/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        :before,
        :after,
        ::backdrop {
            --tw-rotate-x: initial;
            --tw-rotate-y: initial;
            --tw-rotate-z: initial;
            --tw-skew-x: initial;
            --tw-skew-y: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-blur: initial;
            --tw-brightness: initial;
            --tw-contrast: initial;
            --tw-grayscale: initial;
            --tw-hue-rotate: initial;
            --tw-invert: initial;
            --tw-opacity: initial;
            --tw-saturate: initial;
            --tw-sepia: initial;
            --tw-drop-shadow: initial;
            --tw-drop-shadow-color: initial;
            --tw-drop-shadow-alpha: 100%;
            --tw-drop-shadow-size: initial;
            --tw-duration: initial;
            --tw-animation-delay: 0s;
            --tw-animation-direction: normal;
            --tw-animation-duration: initial;
            --tw-animation-fill-mode: none;
            --tw-animation-iteration-count: 1;
            --tw-enter-blur: 0;
            --tw-enter-opacity: 1;
            --tw-enter-rotate: 0;
            --tw-enter-scale: 1;
            --tw-enter-translate-x: 0;
            --tw-enter-translate-y: 0;
            --tw-exit-blur: 0;
            --tw-exit-opacity: 1;
            --tw-exit-rotate: 0;
            --tw-exit-scale: 1;
            --tw-exit-translate-x: 0;
            --tw-exit-translate-y: 0
        }
    }
}

@layer theme {

    :root,
    :host {
        --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --default-transition-duration: .15s;
        --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}

@layer base {

    *,
    :after,
    :before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html,
    :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: inherit;
        font-weight: inherit
    }

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

    b,
    strong {
        font-weight: bolder
    }

    code,
    kbd,
    samp,
    pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub,
    sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring:where(:not(iframe)) {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol,
    ul,
    menu {
        list-style: none
    }

    img,
    svg,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        vertical-align: middle;
        display: block
    }

    img,
    video {
        max-width: 100%;
        height: auto
    }

    button,
    input,
    select,
    optgroup,
    textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple], [size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }

    textarea {
        resize: vertical
    }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}

@layer components;

@layer utilities {
    .\!visible {
        visibility: visible !important
    }

    .visible {
        visibility: visible
    }

    .relative {
        position: relative
    }

    .block {
        display: block
    }

    .hidden {
        display: none
    }

    .inline {
        display: inline
    }

    .aspect-square {
        aspect-ratio: 1
    }

    .size-full {
        width: 100%;
        height: 100%
    }

    .transform {
        transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }

    .resize {
        resize: both
    }

    .opacity-0 {
        opacity: 0
    }

    .ring {
        --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
    }

    .filter {
        filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }

    .transition-opacity {
        transition-property: opacity;
        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
        transition-duration: var(--tw-duration, var(--default-transition-duration))
    }

    .duration-700 {
        --tw-duration: .7s;
        transition-duration: .7s
    }

    .\[contain\:layout_paint_size\] {
        contain: layout paint size
    }

    .fade-in {
        --tw-enter-opacity: 0
    }

    .paused {
        animation-play-state: paused
    }

    .running {
        animation-play-state: running
    }
}

@property --tw-animation-delay {
    syntax: "*";
    inherits: false;
    initial-value: 0s
}

@property --tw-animation-direction {
    syntax: "*";
    inherits: false;
    initial-value: normal
}

@property --tw-animation-duration {
    syntax: "*";
    inherits: false
}

@property --tw-animation-fill-mode {
    syntax: "*";
    inherits: false;
    initial-value: none
}

@property --tw-animation-iteration-count {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-enter-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-enter-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-blur {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-opacity {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-rotate {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-scale {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-exit-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-exit-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

:root {
    --radius: .75rem;
    --background: #fff;
    --foreground: #190041;
    --primary: #632dba;
    --primary-foreground: #fff;
    --secondary: #f3edff;
    --secondary-foreground: #190041;
    --muted: #f6f2fb;
    --muted-foreground: #544a73;
    --accent: #ffcd00;
    --accent-foreground: #212529;
    --destructive: #e5484d;
    --destructive-foreground: #fff;
    --border: #ece7f6;
    --input: #ddd3f0;
    --ring: #632dba
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-Regular), local(Gilroy Regular);
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-Medium), local(Gilroy Medium);
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-SemiBold), local(Gilroy SemiBold);
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-Bold), local(Gilroy Bold);
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-ExtraBold), local(Gilroy ExtraBold);
    font-weight: 800;
    font-display: swap
}

@font-face {
    font-family: BB Gilroy;
    src: local(Gilroy-Black), local(Gilroy Black);
    font-weight: 900;
    font-display: swap
}

@font-face {
    font-family: BB Gotham;
    src: local(Gotham-Book), local(Gotham Book);
    font-weight: 400;
    font-display: swap
}

@font-face {
    font-family: BB Gotham;
    src: local(Gotham-Medium), local(Gotham Medium);
    font-weight: 500;
    font-display: swap
}

@font-face {
    font-family: BB Gotham;
    src: local(Gotham-Medium), local(Gotham Medium);
    font-weight: 600;
    font-display: swap
}

@font-face {
    font-family: BB Gotham;
    src: local(Gotham-Bold), local(Gotham Bold);
    font-weight: 700;
    font-display: swap
}

@font-face {
    font-family: BB Gotham;
    src: local(Gotham-Black), local(Gotham Black);
    font-weight: 800;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(../public/fonts/urbanist-latin-600-normal.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(../public/fonts/urbanist-latin-700-normal.woff2)format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(../public/fonts/urbanist-latin-800-normal.woff2)format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Urbanist;
    src: url(../public/fonts/urbanist-latin-900-normal.woff2)format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(../public/fonts/inter-latin-400-normal.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(../public/fonts/inter-latin-500-normal.woff2)format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(../public/fonts/inter-latin-600-normal.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(../public/fonts/inter-latin-700-normal.woff2)format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(../public/fonts/montserrat-latin-400-normal.woff2)format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(../public/fonts/montserrat-latin-500-normal.woff2)format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(../public/fonts/montserrat-latin-600-normal.woff2)format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Montserrat;
    src: url(../public/fonts/montserrat-latin-700-normal.woff2)format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    --navy: #190041;
    --violet-8: #11002b;
    --violet-12: #11002b;
    --violet-45: #632dba;
    --violet-27: #3d2860;
    --purple-accent: #632dba;
    --magenta: #632dba;
    --azure: #e3d8f6;
    --yellow: #ffc300;
    --orange: #ffc300;
    --ink: #190041;
    --faq-ink: #190041;
    --f-black: "BB Gilroy", "Gilroy-Black", "Gilroy", "Urbanist", system-ui, sans-serif;
    --f-xbold: "BB Gilroy", "Gilroy-ExtraBold", "Gilroy", "Urbanist", system-ui, sans-serif;
    --f-bold: "BB Gilroy", "Gilroy-Bold", "Gilroy", "Urbanist", system-ui, sans-serif;
    --f-semi: "BB Gilroy", "Gilroy-SemiBold", "Gilroy", "Urbanist", system-ui, sans-serif;
    --f-book: "BB Gotham", "Gotham Book", "Gotham-Book", "Gotham", "Montserrat", Arial, sans-serif;
    --f-gotham: "BB Gotham", "Gotham", "Gotham Book", "Montserrat", Arial, sans-serif;
    --f-ui: var(--f-gotham);
    --f-sf: var(--f-gotham)
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    color: var(--ink);
    font-family: var(--f-book);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #fff;
    margin: 0;
    overflow-x: hidden
}

img {
    max-width: 100%;
    display: block
}

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

button {
    font: inherit;
    cursor: pointer;
    color: inherit;
    background: 0 0;
    border: 0;
    padding: 0
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.fw-black {
    font-family: var(--f-black);
    font-weight: 900
}

.fw-bold {
    font-family: var(--f-bold);
    font-weight: 700
}

.fw-semi {
    font-family: var(--f-semi);
    font-weight: 600
}

.page {
    overflow-x: clip
}

.container-1400 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto
}

.sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.site-header {
    z-index: 50;
    background: var(--violet-8);
    padding: 24px 20px;
    transition: box-shadow .25s, padding .25s;
    position: sticky;
    top: 0
}

.header-bar {
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    height: 46px;
    margin: 0 auto;
    padding: 0 12px;
    display: flex
}

.brand {
    width: 149px;
    height: 32.34px;
    padding-top: 1.34px;
    display: block
}

.header-right {
    align-items: center;
    gap: 20px;
    display: flex
}

.main-nav>ul {
    align-items: flex-start;
    display: flex
}

.nav-item {
    position: relative
}

.nav-link {
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    font-family: var(--f-book);
    white-space: nowrap;
    padding: 0 16px;
    transition: color .2s;
    display: block;
    position: relative
}

.nav-link:hover,
.nav-item:focus-within>.nav-link {
    color: var(--yellow)
}

.nav-item.has-menu>.nav-link {
    padding-right: 30px
}

.nav-caret {
    align-items: center;
    width: 9px;
    height: 14px;
    display: flex;
    position: absolute;
    top: 9.19px
}

.nav-caret svg {
    width: 9px;
    height: 9px;
    transition: transform .2s
}

.nav-item.has-menu:hover .nav-caret svg,
.nav-item.has-menu:focus-within .nav-caret svg {
    transform: rotate(180deg)
}

.nav-menu {
    opacity: 0;
    visibility: hidden;
    background: #fff;
    border-radius: 14px;
    min-width: 250px;
    margin-top: 12px;
    padding: 10px;
    transition: opacity .2s, transform .2s, visibility .2s;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(6px);
    box-shadow: 0 20px 50px #11002b40
}

.nav-menu:before {
    content: "";
    height: 14px;
    position: absolute;
    top: -14px;
    left: 0;
    right: 0
}

.nav-item.has-menu:hover .nav-menu,
.nav-item.has-menu:focus-within .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.nav-menu a {
    color: var(--navy);
    white-space: nowrap;
    border-radius: 9px;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 20px;
    display: block
}

.nav-menu a:hover {
    color: var(--violet-45);
    background: #f7f3fd
}

.btn-demo-sm {
    background: var(--yellow);
    border: 1px solid var(--yellow);
    font-family: var(--f-semi);
    color: var(--ink);
    white-space: nowrap;
    border-radius: 12px;
    padding: 7px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    transition: transform .2s, box-shadow .2s;
    display: inline-block
}

.menu-toggle {
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    display: none
}

.menu-toggle span,
.menu-toggle span:before,
.menu-toggle span:after {
    background: #fff;
    border-radius: 2px;
    width: 22px;
    height: 2px;
    transition: transform .25s, background .25s;
    display: block;
    position: relative
}

.menu-toggle span:before,
.menu-toggle span:after {
    content: "";
    position: absolute;
    left: 0
}

.menu-toggle span:before {
    top: -7px
}

.menu-toggle span:after {
    top: 7px
}

.nav-open .menu-toggle span {
    background: 0 0
}

.nav-open .menu-toggle span:before {
    transform: translateY(7px)rotate(45deg)
}

.nav-open .menu-toggle span:after {
    transform: translateY(-7px)rotate(-45deg)
}

.hero {
    background: var(--violet-8) url(../public/assets/hero-bg.webp) center top / cover no-repeat;
    padding: 70px 20px 125px;
    position: relative;
    overflow: hidden
}

.hero-stage {
    width: 1400px;
    height: 1242.67px;
    margin: 0 auto;
    position: relative
}

.hero-title {
    text-align: center;
    color: #fff;
    width: 920px;
    font-family: var(--f-black);
    font-size: 63px;
    font-weight: 900;
    line-height: 72.45px;
    position: absolute;
    top: 100.19px;
    left: 240px
}

.hero-title .hash {
    color: var(--yellow)
}

.hero-title .one {
    color: var(--yellow);
    font-size: 75.6px;
    line-height: 86.94px
}

.hero-sub {
    text-align: center;
    color: #fff;
    width: 900px;
    font-size: 18px;
    line-height: 30px;
    position: absolute;
    top: 303.67px;
    left: 250px
}

.hero-ctas {
    justify-content: center;
    gap: 16px;
    width: 920px;
    display: flex;
    position: absolute;
    top: 403.67px;
    left: 240px
}

.btn-pill {
    max-height: 54px;
    font-family: var(--f-semi);
    white-space: nowrap;
    border: 1px solid #0000;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.btn-pill:hover {
    transform: translateY(-2px)
}

.btn-orange {
    background: var(--orange);
    border-color: var(--orange);
    color: #190041
}

.btn-orange:hover {
    box-shadow: 0 12px 30px #ffc30059
}

.btn-ghost {
    color: #ffb600;
    border-color: #ffb600
}

.btn-ghost:hover {
    background: #ffb6001a
}

.hero-ring {
    pointer-events: none;
    border-radius: 50%;
    position: absolute
}

.hero-ring.r1 {
    border: 1.265px solid #3d2860;
    width: 126.457px;
    height: 126.457px;
    top: 544.44px;
    left: 1256.77px
}

.hero-ring.r2 {
    opacity: .12;
    border: 1.565px solid #3d2860;
    width: 156.457px;
    height: 156.457px;
    top: 529.44px;
    left: 1241.77px
}

.hero-bee {
    object-fit: cover;
    width: 443px;
    height: 625px;
    position: absolute;
    top: 617.43px;
    left: 12px
}

.hero-girl {
    object-fit: cover;
    width: 380px;
    height: 444px;
    position: absolute;
    top: 797.94px;
    left: 1007.84px
}

.bubble {
    font-family: var(--f-book);
    opacity: 0;
    border-radius: 100px;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
    animation: .6s cubic-bezier(.2, .8, .2, 1) forwards bubbleIn;
    display: flex;
    position: absolute;
    transform: translateY(14px)scale(.98)
}

.bubble .avatar-slot {
    flex: none;
    height: 46px
}

.bubble p {
    letter-spacing: .02em
}

.bubble.bee {
    background: var(--magenta);
    color: #fff;
    border-bottom-left-radius: 6px;
    padding: 15px 30px 15px 15px
}

.bubble.client {
    background: var(--azure);
    color: var(--navy);
    text-align: right;
    border-bottom-right-radius: 6px;
    justify-content: flex-end;
    padding: 15px 15px 15px 30px
}

.bubble.b1 {
    width: 350px;
    height: 102px;
    animation-delay: .3s;
    top: 617.43px;
    left: 519px
}

.bubble.b1 .avatar-slot {
    width: 48px
}

.bubble.b1 p {
    width: 247px
}

.bubble.b2 {
    width: 282px;
    height: 102px;
    animation-delay: 1.3s;
    top: 779.43px;
    left: 629px
}

.bubble.b2 p {
    width: 181px
}

.bubble.b2 .avatar-slot {
    width: 46px
}

.bubble.b3 {
    width: 370px;
    animation-delay: 2.3s;
    top: 941.43px;
    left: 479px
}

.bubble.b3 .avatar-slot {
    width: 49px
}

.bubble.b3 p {
    width: 266px
}

.bubble.b4 {
    width: 370px;
    height: 76px;
    animation-delay: 3.3s;
    top: 1079.43px;
    left: 549px
}

.bubble.b4 p {
    white-space: nowrap;
    width: 266px
}

.bubble.b4 .avatar-slot {
    width: 49px
}

@keyframes bubbleIn {
    to {
        opacity: 1;
        transform: none
    }
}

.float-y {
    animation: 6s ease-in-out infinite floatY
}

@keyframes floatY {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}

.trusted {
    background: #fff;
    padding: 70px 50px;
    overflow: hidden
}

.trusted-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 12px
}

.trusted-top {
    height: 633px;
    position: relative
}

.trusted-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 650px;
    display: flex;
    position: absolute;
    top: -.48px;
    left: 0
}

.badge-pill {
    filter: drop-shadow(0 1px 1px #11002b0a)drop-shadow(0 6px 9px #11002b0d);
    font-family: var(--f-semi);
    color: #190041;
    background: #f7f3fd;
    border: .5px solid #11002b14;
    border-radius: 100px;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: normal;
    display: inline-flex
}

.badge-pill svg {
    flex: none;
    width: 20px;
    height: 20px
}

.h-trusted {
    font-family: var(--f-bold);
    color: var(--navy);
    font-size: 48px;
    font-weight: 700;
    line-height: 59.4px
}

.h-trusted .accent {
    color: var(--purple-accent)
}

.trusted-desc {
    color: var(--violet-27);
    width: 650px;
    font-size: 18px;
    line-height: 30px
}

.btn-dark {
    background: var(--violet-8);
    filter: drop-shadow(0 1px 1px #11002b0f);
    color: #fff;
    height: 46px;
    font-family: var(--f-semi);
    border: 1px solid #0000;
    border-radius: 11px;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 21.75px;
    transition: background .2s, transform .2s;
    display: inline-flex
}

.btn-dark:hover {
    background: var(--violet-45);
    transform: translateY(-1px)
}

.impact-card {
    background-image: linear-gradient(-53.918deg, #632dba33 7.735%, #e0c3fc33 92.265%);
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    display: flex
}

.live-pill {
    font-family: var(--f-book);
    color: #190041;
    background: linear-gradient(#ffffffe6, #faf8ffe6);
    border: .5px solid #11002b14;
    border-radius: 100px;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: normal;
    display: inline-flex;
    box-shadow: 0 1px 2px #11002b0a, 0 6px 18px #11002b0d
}

.live-dot {
    background: #12915e;
    border-radius: 50%;
    flex: none;
    width: 12px;
    height: 12px;
    position: relative
}

.live-dot:after {
    content: "";
    background: #12915e;
    border-radius: 50%;
    animation: 1.8s ease-out infinite ping;
    position: absolute;
    inset: 0
}

@keyframes ping {

    75%,
    to {
        opacity: 0;
        transform: scale(2)
    }
}

.stats-row {
    align-items: flex-start;
    gap: 24px;
    width: 534px;
    display: flex
}

.stat-card {
    background: #ffffffd1;
    border: .5px solid #632dba24;
    border-radius: 24px;
    flex-direction: column;
    flex: 1 1 0;
    justify-content: center;
    align-items: flex-start;
    min-width: 1px;
    padding: 16px 24px;
    display: flex;
    box-shadow: 0 4px 24px #632dba14, 0 1px 4px #632dba0f
}

.stat-card .val {
    font-family: var(--f-bold);
    color: var(--violet-45);
    letter-spacing: -.717px;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 700;
    line-height: 39.442px
}

.stat-card .lbl {
    color: #190041;
    width: 114px;
    font-size: 12px;
    line-height: 21px
}

.stat-card.tall {
    height: 114px
}

.stat-card.tall .lbl {
    white-space: nowrap;
    width: auto
}

.trusted-globe {
    aspect-ratio: 1;
    width: 660px;
    height: 660px;
    position: absolute;
    top: -24px;
    right: -60px
}

.trusted-globe canvas {
    touch-action: pan-y
}

.trusted-join {
    text-align: center;
    color: #3d2860;
    padding-top: 24px;
    font-size: 18px;
    line-height: 30px
}

.logo-marquee {
    height: 82px;
    margin-top: 24px;
    padding-top: 24px;
    position: relative;
    overflow: hidden
}

.marquee-track {
    gap: 100px;
    width: max-content;
    animation: 45s linear -23.8s infinite marquee;
    display: flex
}

.logo-marquee:hover .marquee-track {
    animation-play-state: paused
}

.marquee-set {
    align-items: flex-start;
    gap: 100px;
    height: 58px;
    display: flex
}

.marquee-set img {
    opacity: .95;
    max-width: none;
    height: auto
}

@keyframes marquee {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-1876px)
    }
}

.bento-section {
    background: #fff;
    padding: 40px 0
}

.bento-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 1090px;
    margin: 0 auto;
    display: flex
}

.bento-head h2 {
    font-family: var(--f-bold);
    color: var(--navy);
    font-size: 48px;
    font-weight: 700;
    line-height: 59.4px
}

.bento-head h2 .accent {
    color: var(--purple-accent)
}

.bento-head p {
    font-family: var(--f-gotham);
    color: var(--violet-27);
    white-space: nowrap;
    font-size: 18px;
    line-height: 30px
}

.bento-scale {
    width: 1280px;
    margin: 40px auto 0
}

.bento {
    background: #fff;
    width: 1280px;
    height: 850px;
    position: relative
}

.card {
    border-radius: 24px;
    width: 623px;
    height: 412px;
    position: absolute;
    overflow: hidden
}

.card-bg {
    border-radius: 24px;
    position: absolute;
    inset: 0
}

.card-a {
    top: .54px;
    left: .33px
}

.card-b {
    top: .54px;
    left: 656.67px
}

.card-c {
    filter: drop-shadow(0 0 1px #00000040);
    top: 437.88px;
    left: .33px
}

.card-d {
    top: 437.88px;
    left: 656.67px
}

.card-a .card-bg {
    background-image: url(../public/assets/atmosphere.svg), linear-gradient(112deg, #632dba33, #e0c3fc33);
    background-size: 100% 100%;
    -webkit-mask: radial-gradient(circle at 639.67px 424.66px, #0000 168px, #000 168.6px);
    mask: radial-gradient(circle at 639.67px 424.66px, #0000 168px, #000 168.6px)
}

.card-b .card-bg {
    background-image: url(../public/assets/atmosphere.svg), linear-gradient(246deg, #632dba33, #e0c3fc33);
    background-size: 100% 100%;
    -webkit-mask: radial-gradient(circle at -16.67px 424.66px, #0000 168px, #000 168.6px);
    mask: radial-gradient(circle at -16.67px 424.66px, #0000 168px, #000 168.6px)
}

.card-c .card-bg {
    background-image: linear-gradient(294deg, #632dba33, #e0c3fc33);
    -webkit-mask: radial-gradient(circle at 639.67px -12.68px, #0000 168px, #000 168.6px);
    mask: radial-gradient(circle at 639.67px -12.68px, #0000 168px, #000 168.6px)
}

.card-d .card-bg {
    background-image: linear-gradient(294deg, #632dba33, #e0c3fc33);
    -webkit-mask: radial-gradient(circle at -16.67px -12.68px, #0000 168px, #000 168.6px);
    mask: radial-gradient(circle at -16.67px -12.68px, #0000 168px, #000 168.6px)
}

.card>:not(.card-bg) {
    position: absolute
}

.channel-icon {
    background: #efe8fa;
    border-radius: 36px;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    display: flex
}

.channel-icon svg {
    width: 36px;
    height: 36px
}

.card-title {
    font-family: var(--f-semi);
    letter-spacing: -1.4px;
    font-weight: 600;
    line-height: 1.05
}

.card-desc {
    font-family: var(--f-gotham);
    font-weight: 400;
    line-height: 1.35
}

.learn-more {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    align-items: center;
    gap: 14px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex
}

.learn-more .arrow-btn {
    background: #efe8fa;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    transition: background .2s, transform .25s;
    display: flex
}

.learn-more .arrow-btn svg {
    width: 28px;
    height: 28px
}

.learn-more:hover .arrow-btn {
    background: #e3d8f6;
    transform: translate(4px)
}

.card-a .a-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 258px;
    display: flex;
    top: 30.4px;
    left: 30px
}

.card-a .card-title {
    color: #190041;
    width: 258px;
    font-size: 36px
}

.card-a .card-desc {
    color: #3e2960b3;
    width: 258px;
    font-size: 20px
}

.card-a .learn-more {
    top: 318.7px;
    left: 33.7px
}

.card-a .voice-phone {
    width: 246px;
    height: 467px;
    top: 29.67px;
    left: 360.67px
}

.card-b .channel-icon {
    top: 29.67px;
    left: 31.33px
}

.card-b .b-text {
    flex-direction: column;
    gap: 16px;
    width: 278px;
    display: flex;
    top: 119.6px;
    left: 30px
}

.card-b .card-title {
    color: #190041;
    white-space: nowrap;
    font-size: 32px
}

.card-b .card-desc {
    color: #736b8c;
    font-size: 16px
}

.chat-panel {
    width: 300px;
    height: 446.14px;
    font-family: var(--f-ui);
    background: #f7f3fd;
    border-radius: 12.857px;
    top: 45.67px;
    left: 368.33px;
    overflow: hidden;
    box-shadow: 0 3.429px 7.714px -.857px #19004126
}

.chat-head {
    background: var(--violet-45);
    color: #fff;
    width: 300px;
    height: 53.14px;
    position: absolute;
    top: 0;
    left: 0
}

.chat-head .glow {
    background: #ffffffe8;
    border-radius: 50%;
    width: 29.57px;
    height: 29.57px;
    position: absolute;
    top: 13.29px;
    left: 14.57px
}

.chat-head .name {
    font-size: 12.43px;
    font-weight: 700;
    line-height: 15.86px;
    position: absolute;
    top: 13.29px;
    left: 54.43px
}

.chat-head .dot {
    background: #12c26d;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 31.29px;
    left: 54.86px
}

.chat-head .online {
    font-size: 9.857px;
    line-height: 12px;
    position: absolute;
    top: 29.57px;
    left: 64.29px
}

.chat-head .min {
    background: #fff;
    width: 10.29px;
    height: .857px;
    position: absolute;
    top: 25.71px;
    left: 236.57px
}

.chat-body {
    width: 300px;
    height: 393px;
    position: absolute;
    top: 53.14px;
    left: 0
}

.chat-greet {
    color: #190041;
    white-space: nowrap;
    background: #fff;
    border: .857px solid #8b63d1;
    border-radius: 13.714px;
    width: 237px;
    height: 107.14px;
    padding: 9.43px 9px 8.57px 12px;
    font-size: 12px;
    line-height: 18px;
    position: absolute;
    top: 14.14px;
    left: 10.71px;
    box-shadow: 0 3.429px 6.857px -2.143px #3d2a6921
}

.quick-replies {
    flex-direction: column;
    align-items: flex-start;
    gap: 6.857px;
    display: flex;
    position: absolute;
    top: 129.86px;
    left: 10.71px
}

.quick-replies button {
    height: 28.29px;
    font-family: var(--f-ui);
    color: #632dba;
    white-space: nowrap;
    background: 0 0;
    border: 1.286px solid #8b63d1;
    border-radius: 17.14px;
    padding: 0 12.43px;
    font-size: 11.143px;
    line-height: 13.714px;
    transition: background .2s, color .2s
}

.quick-replies button.is-active,
.quick-replies button:hover {
    color: #fff;
    background: #632dba;
    border-color: #632dba
}

.chat-divider {
    background: #8b63d1;
    width: 300px;
    height: .857px;
    position: absolute;
    top: 313.71px;
    left: 0
}

.chat-input {
    color: #736b8c;
    border: 1.286px solid #8b63d1;
    border-radius: 17.14px;
    align-items: center;
    width: 240px;
    height: 32.57px;
    padding: 0 12.43px;
    font-size: 12px;
    display: flex;
    position: absolute;
    top: 323.14px;
    left: 10.71px
}

.card-c .dm-phone {
    object-fit: cover;
    width: 369px;
    height: 380px;
    top: 32.33px;
    left: -66.33px
}

.card-c .c-text {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    display: flex;
    top: 120.33px;
    left: 400.67px
}

.card-c .socials {
    width: 105px;
    height: 51px
}

.card-c .card-title {
    color: #190041;
    width: 207px;
    font-size: 32px
}

.card-c .card-desc {
    color: #3e2960b3;
    width: 182px;
    font-size: 16px
}

.card-c .learn-more {
    top: 337.33px;
    left: 400.67px
}

.card-d .d-text {
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    width: 250px;
    display: flex;
    top: 128.33px;
    left: -18.67px
}

.text-icon {
    background: var(--violet-45);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    display: flex;
    box-shadow: 0 12px 24px -4px #2d0b7a2e
}

.text-icon svg {
    width: 52px;
    height: 52px
}

.d-copy {
    width: 250px;
    height: 112px;
    position: relative
}

.d-copy .card-title {
    color: #190041;
    white-space: nowrap;
    font-size: 32px;
    position: absolute;
    top: 0;
    left: 118px
}

.d-copy .card-desc {
    text-align: right;
    color: #736b8c;
    width: 212px;
    font-size: 16px;
    position: absolute;
    top: 42px;
    right: 0
}

.phone-mock {
    width: 260px;
    height: 416px;
    font-family: var(--f-sf);
    background: #fff;
    border: 1px solid #e3d8f6;
    border-radius: 24px;
    top: 40.33px;
    left: 341.33px;
    overflow: hidden;
    box-shadow: 0 12px 24px -4px #2d0b7a2e
}

.phone-mock .status {
    justify-content: space-between;
    align-items: center;
    width: 224px;
    display: flex;
    position: absolute;
    top: 9px;
    left: 17px
}

.phone-mock .status .time {
    color: #190041;
    font-size: 10px;
    font-weight: 700
}

.phone-mock .status svg {
    height: 13px
}

.phone-mock .contact {
    background: #f7f3fd;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 260px;
    height: 61px;
    display: flex;
    position: absolute;
    top: 28px;
    left: -1px
}

.phone-mock .contact .av {
    color: #fff;
    width: 36px;
    height: 36px;
    font-family: var(--f-ui);
    background: #736b8c;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    display: flex
}

.phone-mock .contact .nm {
    color: #190041;
    font-size: 9px
}

.phone-mock .convo {
    flex-direction: column;
    gap: 8px;
    width: 234px;
    display: flex;
    position: absolute;
    top: 102px;
    left: 12px
}

.msg-row {
    align-items: flex-end;
    gap: 8px;
    display: flex
}

.msg-row.me {
    justify-content: flex-end
}

.msg-row img {
    border-radius: 50%;
    flex: none;
    width: 34px;
    height: 34px
}

.msg-row .bee-av {
    border: 1px solid #e3d8f6
}

.msg {
    border-radius: 16px;
    padding: 9px 12px;
    font-size: 11px;
    line-height: 1.2
}

.msg.in {
    color: #190041;
    background: #efe8fa;
    border-bottom-left-radius: 5px
}

.msg.out {
    color: #fff;
    background: #632dba;
    border-bottom-right-radius: 5px
}

.bento-center {
    border-radius: 50%;
    width: 280px;
    height: 280px;
    position: absolute;
    top: 285.1px;
    left: 500px;
    overflow: hidden
}

.bento-center img {
    width: 280px;
    height: 280px
}

.live-banner {
    background: var(--violet-45);
    border: 1px solid #ffffff14;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    gap: 198px;
    width: 1280px;
    margin: 40px auto 0;
    padding: 40px 80px;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 120px #0003
}

.live-left {
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    display: flex
}

.live-left h3 {
    font-family: var(--f-bold);
    color: #fff;
    white-space: nowrap;
    font-size: 56px;
    font-weight: 700;
    line-height: 60px
}

.live-left h3 span {
    color: var(--yellow)
}

.live-left p {
    font-family: var(--f-semi);
    color: #fff;
    white-space: nowrap;
    font-size: 36px;
    font-weight: 600;
    line-height: 39.6px
}

.live-cta {
    width: 254.57px;
    height: 70px;
    padding: 24px 0 0 83.125px;
    position: relative
}

.live-cta .btn-demo-sm {
    filter: drop-shadow(0 4px 3px #0000001a)drop-shadow(0 10px 7.5px #0000001a);
    width: 171.445px;
    min-height: 46px
}

.live-cta .scribble {
    width: 66px;
    height: 33px;
    position: absolute;
    top: -9px;
    left: 248.57px
}

.live-img {
    object-fit: cover;
    width: 400px;
    height: 226.516px
}

.handle {
    width: 1280px;
    margin: 40px auto 0;
    padding: 70px 0
}

.handle-stage {
    height: 930px;
    position: relative
}

.eyebrow {
    font-family: var(--f-gotham);
    letter-spacing: 1.6px;
    color: var(--violet-45);
    font-size: 13px;
    font-weight: 700
}

.handle-left h2 {
    font-family: var(--f-semi);
    letter-spacing: -1.8px;
    color: #190041;
    white-space: nowrap;
    margin-top: 18px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.05
}

.handle-left .lead {
    font-family: var(--f-gotham);
    color: #3d2860;
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.5
}

.accordion {
    flex-direction: column;
    gap: 12px;
    margin-top: 44px;
    display: flex
}

.acc-item {
    background: #fff;
    border: 1px solid #efe8fa;
    border-radius: 18px;
    transition: background .35s, box-shadow .35s, border-color .35s;
    overflow: hidden
}

.acc-head {
    text-align: left;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    display: flex
}

.acc-tile {
    color: #632dba;
    background: #f7f3fd;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    transition: all .35s;
    display: flex
}

.acc-tile svg {
    width: 24px;
    height: 24px
}

.acc-title {
    font-family: var(--f-semi);
    letter-spacing: -.5px;
    color: #190041;
    flex: 1;
    font-size: 21px;
    font-weight: 600;
    transition: font-size .35s, color .35s
}

.acc-plus {
    flex: none;
    width: 18px;
    height: 18px;
    transition: transform .3s, opacity .3s
}

.acc-body {
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s;
    display: grid
}

.acc-body>div {
    overflow: hidden
}

.acc-body p {
    font-family: var(--f-gotham);
    color: #e3d8f6;
    padding-top: 10px;
    font-size: 16px;
    line-height: 1.55
}

.acc-item.is-open {
    background: #632dba;
    border-color: #632dba;
    box-shadow: 0 18px 40px -10px #632dba4d
}

.acc-item.is-open .acc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px 0
}

.acc-item.is-open .acc-title {
    letter-spacing: -.9px;
    color: #fff;
    font-size: 28px
}

.acc-item.is-open .acc-plus {
    display: none
}

.acc-item.is-open .acc-body {
    grid-template-rows: 1fr
}

.handle-right {
    width: 640px;
    height: 473px;
    position: absolute;
    top: 292px;
    left: 640px
}

.dash {
    background: #fff;
    border: 1px solid #efe8fa;
    border-radius: 20px;
    width: 600px;
    position: absolute;
    top: 0;
    left: 40px;
    overflow: hidden;
    box-shadow: 0 30px 70px -10px #4d26991f
}

.dash-top {
    border-bottom: 1px solid #efe8fa;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    display: flex
}

.dash-logo {
    background: #632dba;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    display: flex
}

.dash-logo svg {
    width: 15px;
    height: 15px
}

.dash-top .t {
    font-family: var(--f-gotham);
    color: #190041;
    flex: 1;
    font-size: 14px;
    font-weight: 700
}

.pill {
    font-family: var(--f-gotham);
    white-space: nowrap;
    border-radius: 100px;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex
}

.pill.green {
    color: #12915e;
    background: #e3f7ed
}

.pill.violet {
    color: #632dba;
    background: #f7f3fd
}

.pill.amber {
    color: #190041;
    background: #fff4cc
}

.pill.live {
    padding: 6px 12px 6px 10px
}

.pill.live i {
    background: #12915e;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block
}

.dash-top .bell {
    width: 18px;
    height: 18px
}

.dash-body {
    align-items: stretch;
    display: flex
}

.dash-side {
    background: #f7f3fd;
    border-right: 1px solid #efe8fa;
    flex-direction: column;
    gap: 8px;
    padding: 18px 12px 0;
    display: flex
}

.dash-side span {
    color: #736b8c;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    display: flex
}

.dash-side span.on {
    color: #fff;
    background: #632dba
}

.dash-side svg {
    width: 18px;
    height: 18px
}

.dash-main {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-width: 1px;
    padding: 22px 24px 28px;
    display: flex
}

.dash-main h4 {
    font-family: var(--f-semi);
    letter-spacing: -.6px;
    color: #190041;
    font-size: 24px;
    font-weight: 600;
    line-height: normal
}

.dash-main .sub {
    font-family: var(--f-gotham);
    color: #736b8c;
    margin-top: 4px;
    font-size: 13px
}

.dash-stats {
    gap: 10px;
    display: flex
}

.dash-stat {
    border: 1px solid #efe8fa;
    border-radius: 14px;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    padding: 14px 16px;
    display: flex
}

.dash-stat small {
    font-family: var(--f-gotham);
    color: #736b8c;
    font-size: 11px
}

.dash-stat b {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 24px;
    font-weight: 600;
    line-height: normal
}

.call-log {
    border: 1px solid #efe8fa;
    border-radius: 14px;
    padding: 4px 16px
}

.call-row {
    font-family: var(--f-gotham);
    border-bottom: 1px solid #efe8fa;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    font-weight: 700;
    display: flex
}

.call-row:last-child {
    border-bottom: 0
}

.call-row .tm {
    color: #736b8c;
    flex: none;
    width: 62px;
    font-size: 12px
}

.call-row .what {
    color: #190041;
    flex: 1;
    font-size: 14px
}

.toast {
    font-family: var(--f-gotham);
    background: #fff;
    border: 1px solid #efe8fa;
    border-radius: 16px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 14px;
    animation: .7s cubic-bezier(.2, .8, .2, 1) .2s both toastIn;
    display: flex;
    position: absolute;
    top: 405px;
    left: 0;
    box-shadow: 0 20px 40px -8px #4d26992e
}

.toast .ic {
    background: #632dba;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    display: flex
}

.toast .ic svg {
    width: 18px;
    height: 18px
}

.toast b {
    color: #190041;
    font-size: 13px;
    font-weight: 700;
    display: block
}

.toast small {
    color: #736b8c;
    margin-top: 3px;
    font-size: 11.5px;
    display: block
}

.toast .gdot {
    background: #12c26d;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

@keyframes toastIn {
    0% {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.stories {
    background: #fff;
    padding: 24px 20px
}

.stories-inner {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 0;
    display: flex
}

.stories-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    display: flex
}

.stories-head h2 {
    font-family: var(--f-black);
    color: var(--navy);
    padding-bottom: 16px;
    font-size: 54px;
    font-weight: 900;
    line-height: 59.4px
}

.stories-head p {
    color: var(--ink);
    font-size: 18px;
    line-height: 30px
}

.stories-row {
    align-items: stretch;
    gap: 24px;
    width: 1400px;
    display: flex
}

.story-strip {
    flex: 1016 0 0;
    gap: 24px;
    min-width: 1px;
    height: 480px;
    display: flex
}

.story {
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 16px;
    flex: 140 0 0;
    min-width: 1px;
    height: 480px;
    transition: flex-grow .6s cubic-bezier(.2, .8, .2, 1), border-radius .4s;
    position: relative;
    overflow: hidden
}

.story>img {
    object-fit: cover;
    object-position: center;
    width: calc(100% + 2.8px);
    max-width: none;
    height: 487.56px;
    position: absolute;
    top: -4.78px;
    left: -1.4px
}

.story .shade {
    background: linear-gradient(#11002b14 42%, #11002bb8);
    border-radius: 16px;
    height: 478px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.story .tag {
    text-align: center;
    white-space: nowrap;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 406.3px;
    left: 0;
    right: 0
}

.story .tag .who {
    letter-spacing: .6px;
    color: #fffc;
    font-size: 9px;
    line-height: normal
}

.story .tag .biz {
    font-family: var(--f-black);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: normal
}

.story .play {
    opacity: 0;
    width: 64px;
    height: 64px;
    transition: opacity .3s, transform .3s;
    position: absolute;
    top: 182.63px;
    left: 50%;
    transform: translate(-50%)scale(.6)
}

.story .play svg {
    width: 64px;
    height: 64px
}

.story .feature {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 9px;
    width: 310px;
    transition: opacity .35s;
    display: flex;
    position: absolute;
    top: 284.32px;
    left: 21px
}

.story.is-featured {
    border: 5px solid #632dba33;
    border-radius: 24px;
    flex-grow: 350
}

.story.is-featured>img {
    width: calc(100% + 5px);
    top: -3.78px;
    left: -2.5px
}

.story.is-featured .shade {
    background: linear-gradient(#1900410d 0%, #1900411f 38%, #1909324b 53.5%, #14042e78 69%, #11002bd1 100%);
    border-radius: 24px;
    top: 1px;
    left: 1px
}

.story.is-featured .tag {
    opacity: 0
}

.story.is-featured .play {
    opacity: 1;
    left: 176px;
    transform: translate(-50%)scale(1)
}

.story.is-featured .feature {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .25s
}

.story .play:hover {
    transform: translate(-50%)scale(1.06)
}

.feature .nm {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px
}

.feature .role {
    color: #ccc5e6;
    padding-top: 4px;
    font-size: 12px;
    line-height: 15.6px
}

.feature .quote {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 23.2px
}

.feature hr {
    background: #ffffff24;
    border: 0;
    width: 310px;
    height: 1px;
    margin: 0
}

.feature .stat b {
    font-family: var(--f-black);
    color: #ffc300;
    font-size: 16px;
    font-weight: 900;
    line-height: normal;
    display: block
}

.feature .stat small {
    color: #ccc5e6;
    margin-top: 3px;
    font-size: 12px;
    display: block
}

.intro-card {
    background-image: linear-gradient(126.87deg, #11002b33, #11002b29);
    border-radius: 24px;
    flex: none;
    width: 360px;
    min-width: 260px;
    min-height: 480px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 28px 80px #11002b29
}

.intro-card>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.intro-card .ov {
    background: linear-gradient(#19004138, #11002b57);
    position: absolute;
    inset: 0
}

.intro-card .copy {
    color: #fff;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 32px;
    display: flex;
    position: absolute;
    inset: 0
}

.intro-card .copy span {
    font-size: 27px;
    line-height: 29.7px
}

.intro-card .copy strong {
    font-family: var(--f-black);
    letter-spacing: -1.08px;
    font-size: 54px;
    font-weight: 900;
    line-height: 59.4px
}

.intro-card .copy .spacer {
    height: 78px
}

.integrations {
    background: #fff;
    padding: 70px 20px
}

.int-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 12px
}

.int-card {
    background-image: linear-gradient(-41.376deg, #632dba33 8.2446%, #e0c3fc33 91.755%);
    border-radius: 50px;
    padding: 40px 90px
}

.int-row {
    align-items: center;
    height: 544px;
    margin-left: -12px;
    display: flex
}

.int-text {
    flex: none;
    width: 508px;
    padding: 0 84px 0 12px
}

.int-text h2 {
    font-family: var(--f-semi);
    color: var(--navy);
    font-size: 59px;
    font-weight: 600;
    line-height: 79.06px
}

.int-text p {
    width: 413px;
    color: var(--navy);
    padding: 20px 0 16px;
    font-size: 16px;
    line-height: 26px
}

.int-btn-wrap {
    height: 53.97px;
    padding-top: 8px
}

.btn-outline {
    color: #632dba;
    height: 38px;
    min-height: 38px;
    font-family: var(--f-bold);
    white-space: nowrap;
    background: #efe8fa;
    border: 1px solid #632dba;
    border-radius: 24px;
    align-items: center;
    gap: 8px;
    padding: 3px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 30px;
    transition: background .2s, color .2s;
    display: inline-flex
}

.btn-outline:hover {
    color: #fff;
    background: #632dba
}

.int-visual {
    flex: none;
    width: 712px;
    height: 544px;
    padding-left: 12px
}

.int-visual img {
    width: 688px;
    height: 544px
}

.swipe {
    background: var(--violet-12);
    flex-direction: column;
    align-items: center;
    padding: 40px 80px;
    display: flex
}

.swipe-head {
    text-align: center;
    width: 1400px;
    padding-bottom: 16px
}

.swipe-head h2 {
    font-family: var(--f-black);
    color: #fff;
    padding-bottom: 16px;
    font-size: 54px;
    font-weight: 900;
    line-height: 59.4px
}

.swipe-head h2 span {
    color: #632dba;
    display: block
}

.swipe-head p {
    font-family: var(--f-gotham);
    color: #9a93ae;
    height: 54px;
    padding: 8px 0 16px;
    font-size: 18px;
    line-height: 30px
}

.ba {
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
    --pos: 50%;
    border-radius: 36px;
    width: 1211px;
    height: 760px;
    position: relative;
    overflow: hidden
}

.ba img {
    object-fit: cover;
    pointer-events: none;
    border-radius: 36px;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ba .ba-before {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0)
}

.ba .ba-before.is-filtered {
    filter: grayscale(.85)brightness(.62)contrast(.95)
}

.ba-label {
    color: #fff;
    font-family: var(--f-semi);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    background: #11002b8c;
    border-radius: 100px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .3s;
    position: absolute;
    top: 24px
}

.ba:hover .ba-label,
.ba.is-dragging .ba-label {
    opacity: 1
}

.ba-label.l {
    left: 24px
}

.ba-label.r {
    right: 24px
}

.ba-line {
    top: 0;
    bottom: 0;
    left: var(--pos);
    pointer-events: none;
    background: #ffffff59;
    width: 2px;
    margin-left: -1px;
    position: absolute
}

.ba-handle {
    top: 50%;
    left: var(--pos);
    cursor: ew-resize;
    touch-action: none;
    background: #fff;
    border: 2px solid #632dba;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    display: flex;
    position: absolute;
    box-shadow: 0 18px 30px #00000047
}

.ba-handle svg {
    width: 40px;
    height: 22px
}

.ba-handle:focus-visible {
    outline: 3px solid var(--yellow);
    outline-offset: 3px
}

.faq {
    background: #fff;
    padding: 70px 20px
}

.faq-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px
}

.faq-inner>h2 {
    font-family: var(--f-semi);
    color: var(--faq-ink);
    font-size: 48px;
    font-weight: 600;
    line-height: 57.6px
}

.faq-grid {
    grid-template-columns: 420px 928px;
    align-items: start;
    gap: 28px;
    padding-top: 36px;
    display: grid
}

.help-card {
    filter: drop-shadow(0 35px 45px #280a662e);
    background: radial-gradient(circle at 0 0, #632dba3d 0, #632dba00 178px), linear-gradient(#632dba 0%, #190041 100%);
    border-radius: 40px;
    flex-direction: column;
    gap: 28px;
    max-width: 380px;
    padding: 32px 20px;
    display: flex
}

.help-card .art {
    border-radius: 34px;
    width: 340px;
    height: 259.6px;
    padding: 18px;
    overflow: hidden
}

.help-card .art img {
    width: 304px;
    height: 223.6px
}

.help-card .txt {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex
}

.help-card h3 {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px
}

.help-card p {
    color: #efe8fa;
    width: 340px;
    font-size: 16px;
    line-height: 26px
}

.help-card .btn-wrap {
    padding-top: 8px
}

.btn-talk {
    color: #fff;
    width: 340px;
    min-height: 50px;
    font-family: var(--f-semi);
    background: #632dba;
    border-radius: 40px;
    justify-content: center;
    align-items: center;
    padding: 8px 14px;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
    transition: background .2s, transform .2s;
    display: flex
}

.btn-talk:hover {
    background: #632dba;
    transform: translateY(-1px)
}

.faq-list {
    flex-direction: column;
    gap: 16px;
    display: flex
}

.faq-item {
    background: #632dba0f;
    border-radius: 10px;
    transition: background .3s, box-shadow .3s;
    overflow: hidden
}

.faq-item.is-open {
    background: #632dba1a;
    box-shadow: inset 0 0 0 .5px #19004154
}

.faq-q {
    text-align: left;
    width: 100%;
    height: 62px;
    font-family: var(--f-semi);
    color: var(--faq-ink);
    align-items: center;
    padding: 18px 60px 18px 30px;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    display: flex;
    position: relative
}

.faq-q .chev {
    background: #fff;
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    padding-top: 3px;
    transition: background .3s, transform .3s;
    display: flex;
    position: absolute;
    top: 14px;
    left: 878px
}

.faq-q .chev svg {
    color: #190041;
    width: 18px;
    height: 20px
}

.faq-item.is-open .chev {
    background: #632dba;
    left: 877px;
    transform: rotate(180deg)
}

.faq-item.is-open .chev svg {
    color: #fff
}

.faq-a {
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s;
    display: grid
}

.faq-a>div {
    overflow: hidden
}

.faq-a p {
    width: 927px;
    min-height: 133px;
    color: var(--ink);
    padding: 0 30px 28px;
    font-size: 16px;
    line-height: 26px
}

.faq-item.is-open .faq-a {
    grid-template-rows: 1fr
}

.cta {
    background: var(--violet-8);
    padding: 70px 20px
}

.cta-stage {
    width: 1143px;
    height: 591.15px;
    margin: 0 auto;
    position: relative
}

.cta-stage p {
    text-align: center;
    opacity: .8;
    color: #fff;
    z-index: 1;
    width: 1143px;
    font-size: 18px;
    line-height: 30px;
    position: absolute;
    top: 100px;
    left: 0
}

.cta-stage img {
    object-fit: cover;
    width: 620px;
    height: 217.15px;
    position: absolute;
    top: 120px;
    left: 261.5px
}

.site-footer {
    background: var(--violet-8);
    color: #fff;
    padding: 90px 20px
}

.footer-cols {
    max-width: 1400px;
    height: 210px;
    margin: 0 auto;
    display: flex
}

.fcol {
    flex: none;
    width: 350px;
    padding: 0 12px
}

.fcol h4 {
    font-family: var(--f-bold);
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px
}

.fcol .contact {
    width: 326px
}

.fcol .contact p {
    opacity: .7;
    max-width: 220px;
    margin-top: 5px;
    font-size: 13px;
    line-height: 24px
}

.fcol .contact p:first-of-type {
    margin-top: 16px
}

.fcol .contact a:hover {
    text-decoration: underline
}

.fcol .contact .addr {
    max-width: 203px
}

.flinks {
    padding-top: 16px
}

.flinks li+li {
    padding-top: 5px
}

.flinks a {
    opacity: .77;
    white-space: nowrap;
    height: 24px;
    padding-top: 6px;
    font-size: 13px;
    line-height: 14px;
    transition: opacity .2s, color .2s;
    display: inline-block
}

.flinks a:hover {
    opacity: 1;
    color: var(--yellow)
}

.fcol.right {
    flex-direction: column;
    align-items: flex-end;
    display: flex
}

.socials-row {
    justify-content: flex-end;
    gap: 10px;
    height: 14px;
    display: flex
}

.socials-row a {
    opacity: .77;
    align-items: center;
    height: 14px;
    transition: opacity .2s;
    display: flex
}

.socials-row a:hover {
    opacity: 1
}

.socials-row svg {
    fill: #fff;
    width: auto;
    height: 13px
}

.copyright {
    font-family: var(--f-semi);
    text-align: right;
    padding: 30px 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px
}

.legal {
    justify-content: flex-end;
    gap: 20px;
    display: flex
}

.legal a {
    opacity: .77;
    font-size: 13px;
    line-height: 14px
}

.legal a:hover {
    opacity: 1
}

.modal {
    z-index: 100;
    justify-content: center;
    align-items: center;
    padding: 20px;
    display: none;
    position: fixed;
    inset: 0
}

.modal.is-open {
    display: flex
}

.modal-backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: #11002bb3;
    animation: .25s fadeIn;
    position: absolute;
    inset: 0
}

.modal-dialog {
    background: #fff;
    border-radius: 28px;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    padding: 36px 36px 32px;
    animation: .3s cubic-bezier(.2, .8, .2, 1) popIn;
    position: relative;
    overflow: auto;
    box-shadow: 0 40px 120px #0006
}

.modal-dialog.video {
    background: #000;
    max-width: 960px;
    padding: 0;
    overflow: hidden
}

.modal-dialog.video iframe,
.modal-dialog.video video {
    aspect-ratio: 16/9;
    border: 0;
    width: 100%;
    display: block
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: translateY(16px)scale(.97)
    }
}

.modal-close {
    color: #632dba;
    z-index: 2;
    background: #f7f3fd;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 22px;
    line-height: 1;
    display: flex;
    position: absolute;
    top: 14px;
    right: 14px
}

.modal-dialog.video .modal-close {
    background: #ffffffe6
}

.modal h3 {
    font-family: var(--f-bold);
    color: var(--navy);
    padding-right: 40px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15
}

.modal .sub {
    color: #3d2860;
    margin-top: 8px;
    font-size: 15px;
    line-height: 24px
}

.demo-form {
    gap: 14px;
    margin-top: 22px;
    display: grid
}

.demo-form .two {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    display: grid
}

.demo-form label {
    font-family: var(--f-semi);
    color: #190041;
    flex-direction: column;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 600;
    display: flex
}

.demo-form input,
.demo-form select {
    height: 46px;
    font: 15px/1 var(--f-book);
    color: var(--navy);
    background: #f7f3fd;
    border: 1px solid #e3d8f6;
    border-radius: 12px;
    outline: none;
    padding: 0 14px;
    transition: border-color .2s, box-shadow .2s
}

.demo-form input:focus,
.demo-form select:focus {
    border-color: #632dba;
    box-shadow: 0 0 0 3px #632dba26
}

.demo-form button[type=submit] {
    background: var(--orange);
    color: #190041;
    height: 52px;
    font-family: var(--f-semi);
    border-radius: 100px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s
}

.demo-form button[type=submit]:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px #ffc30059
}

.form-success {
    text-align: center;
    padding: 20px 0 6px;
    display: none
}

.form-success .ok {
    color: #12915e;
    background: #e3f7ed;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    font-size: 30px;
    display: flex
}

.modal.is-done .demo-form {
    display: none
}

.modal.is-done .form-success {
    display: block
}

.reveal {
    opacity: 0;
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
    transform: translateY(24px)
}

.reveal.is-in {
    opacity: 1;
    transform: none
}

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

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

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

.fit {
    transform-origin: 0 0
}

@media (max-width:1439px) {

    .hero-stage-wrap,
    .bento-fit,
    .handle-fit,
    .int-fit,
    .swipe-fit,
    .cta-fit,
    .trusted-fit {
        width: 100%
    }
}

@media (max-width:1100px) {
    .main-nav {
        background: var(--violet-8);
        border-top: 1px solid #ffffff14;
        width: auto;
        padding: 8px 20px 20px;
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0
    }

    .nav-open .main-nav {
        display: block
    }

    .main-nav>ul {
        flex-direction: column
    }

    .nav-link {
        font-size: 16px;
        padding: 10px 0 !important
    }

    .nav-caret {
        top: 18px;
        right: 0;
        left: auto !important
    }

    .nav-menu {
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        background: #ffffff0d;
        margin: 0 0 8px;
        display: none;
        position: static;
        transform: none
    }

    .nav-item.is-expanded .nav-menu {
        display: block
    }

    .nav-menu a {
        color: #fff
    }

    .nav-menu a:hover {
        color: var(--yellow);
        background: #ffffff14
    }

    .menu-toggle {
        display: inline-flex
    }

    .header-right {
        gap: 10px
    }
}

@media (max-width:760px) {
    .site-header {
        padding: 14px 16px
    }

    .header-bar {
        padding: 0
    }

    .header-right .btn-demo-sm {
        display: none
    }

    .nav-open .main-nav .mobile-demo {
        display: block
    }

    .hero {
        padding: 48px 16px 60px
    }

    .hero-stage {
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        display: flex
    }

    .hero-title,
    .hero-sub,
    .hero-ctas {
        width: 100%;
        position: static
    }

    .hero-title {
        font-size: 40px;
        line-height: 46px
    }

    .hero-title .one {
        font-size: 48px;
        line-height: 52px
    }

    .hero-sub {
        margin-top: 18px;
        font-size: 16px;
        line-height: 26px
    }

    .hero-ctas {
        flex-wrap: wrap;
        margin-top: 28px
    }

    .hero-ring {
        display: none
    }

    .hero-chat {
        flex-direction: column;
        gap: 14px;
        width: 100%;
        margin-top: 36px;
        display: flex;
        position: relative
    }

    .bubble {
        max-width: 92%;
        font-size: 15px;
        line-height: 22px;
        position: static;
        width: auto !important;
        height: auto !important
    }

    .bubble p {
        white-space: normal !important;
        width: auto !important
    }

    .bubble .avatar-slot {
        display: none
    }

    .bubble.bee {
        align-self: flex-start;
        padding: 14px 24px
    }

    .bubble.client {
        align-self: flex-end;
        padding: 14px 24px
    }

    .hero-figures {
        width: 100%;
        height: 360px;
        margin-top: 20px;
        position: relative
    }

    .hero-bee {
        width: 55%;
        height: auto;
        position: absolute;
        top: 0;
        left: 0
    }

    .hero-girl {
        width: 52%;
        height: auto;
        position: absolute;
        top: 60px;
        left: auto;
        right: -16px
    }

    .trusted {
        padding: 56px 16px
    }

    .trusted-inner {
        padding: 0
    }

    .trusted-top {
        flex-direction: column;
        gap: 36px;
        height: auto;
        display: flex
    }

    .trusted-left {
        position: relative;
        top: auto;
        left: auto
    }

    .trusted-globe {
        width: 100%;
        max-width: 460px;
        height: auto;
        margin: -10px auto 0;
        position: relative;
        top: auto;
        right: auto
    }

    .trusted-left {
        width: 100%
    }

    .h-trusted {
        font-size: 34px;
        line-height: 42px
    }

    .trusted-desc {
        width: 100%;
        font-size: 16px;
        line-height: 26px
    }

    .impact-card {
        width: 100%;
        padding: 16px
    }

    .stats-row {
        gap: 10px;
        width: 100%
    }

    .stat-card {
        border-radius: 18px;
        padding: 12px
    }

    .stat-card .val {
        font-size: 19px
    }

    .stat-card .lbl {
        width: auto;
        font-size: 11px;
        line-height: 16px
    }

    .stat-card.tall {
        align-self: stretch;
        height: auto
    }

    .stat-card.tall .lbl {
        white-space: normal
    }

    .trusted-join {
        font-size: 16px;
        line-height: 26px
    }

    .bento-head {
        width: 100%;
        padding: 0 16px
    }

    .bento-head h2,
    .stories-head h2,
    .swipe-head h2 {
        font-size: 32px;
        line-height: 38px
    }

    .bento-head p {
        white-space: normal;
        font-size: 16px;
        line-height: 26px
    }

    .bento-scale {
        width: auto;
        margin: 28px 16px 0
    }

    .bento {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: auto;
        height: auto;
        display: flex
    }

    .bento .card {
        zoom: var(--cz, .55);
        flex: none;
        position: relative;
        top: auto !important;
        left: auto !important
    }

    .bento .card .card-bg {
        -webkit-mask: none;
        mask: none
    }

    .bento-center {
        order: -1;
        width: 180px;
        height: 180px;
        position: relative;
        top: auto;
        left: auto
    }

    .bento-center img {
        width: 180px;
        height: 180px
    }

    .live-banner {
        text-align: center;
        flex-direction: column;
        gap: 24px;
        width: auto;
        margin: 32px 16px 0;
        padding: 32px 22px
    }

    .live-left {
        align-items: center
    }

    .live-left h3 {
        white-space: normal;
        font-size: 38px;
        line-height: 44px
    }

    .live-left p {
        white-space: normal;
        font-size: 22px;
        line-height: 28px
    }

    .live-cta {
        width: auto;
        height: auto;
        padding: 16px 0 0
    }

    .live-cta .scribble {
        display: none
    }

    .live-img {
        width: 100%;
        height: auto
    }

    .handle {
        width: auto;
        margin: 16px 16px 0;
        padding: 40px 0
    }

    .handle-stage {
        height: auto
    }

    .handle-left,
    .handle-right {
        width: 100%;
        position: relative;
        top: auto;
        left: auto
    }

    .handle-left h2 {
        letter-spacing: -1px;
        white-space: normal;
        font-size: 34px
    }

    .acc-title {
        font-size: 17px
    }

    .acc-item.is-open .acc-title {
        font-size: 22px
    }

    .handle-right {
        height: auto;
        margin-top: 32px;
        padding-bottom: 70px
    }

    .dash {
        width: 100%;
        position: relative;
        left: 0
    }

    .dash-side {
        display: none
    }

    .dash-main {
        padding: 18px 14px 20px
    }

    .call-row .what {
        font-size: 12.5px
    }

    .toast {
        top: auto;
        bottom: 0;
        left: 8px
    }

    .stories {
        padding: 40px 16px
    }

    .stories-row {
        flex-direction: column;
        width: 100%
    }

    .story-strip {
        scroll-snap-type: x mandatory;
        flex: none;
        gap: 12px;
        height: 440px;
        overflow-x: auto
    }

    .story {
        scroll-snap-align: start;
        height: 440px;
        flex: 0 0 120px !important
    }

    .story.is-featured {
        flex: 0 0 300px !important
    }

    .story.is-featured .play {
        left: 50%
    }

    .story .feature {
        width: 250px;
        top: auto;
        bottom: 24px;
        left: 16px
    }

    .feature hr {
        width: 100%
    }

    .intro-card {
        width: 100%;
        min-height: 360px
    }

    .integrations {
        padding: 40px 16px
    }

    .int-inner {
        padding: 0
    }

    .int-card {
        border-radius: 32px;
        padding: 32px 20px
    }

    .int-row {
        flex-direction: column;
        gap: 20px;
        height: auto;
        margin-left: 0
    }

    .int-text {
        width: 100%;
        padding: 0
    }

    .int-text h2 {
        font-size: 40px;
        line-height: 50px
    }

    .int-text p {
        width: 100%
    }

    .int-visual {
        width: 100%;
        height: auto;
        padding: 0
    }

    .int-visual img {
        width: 100%;
        height: auto
    }

    .swipe {
        padding: 40px 16px
    }

    .swipe-head {
        width: 100%
    }

    .swipe-head p {
        height: auto;
        font-size: 16px
    }

    .ba {
        aspect-ratio: 1211/760;
        border-radius: 22px;
        width: 100%;
        height: auto
    }

    .ba img {
        border-radius: 22px
    }

    .ba-handle {
        width: 52px;
        height: 52px;
        margin: -26px 0 0 -26px
    }

    .ba-handle svg {
        width: 30px
    }

    .faq {
        padding: 48px 16px
    }

    .faq-inner {
        padding: 0
    }

    .faq-inner>h2 {
        font-size: 34px;
        line-height: 42px
    }

    .faq-grid {
        grid-template-columns: 1fr
    }

    .faq-list {
        order: -1
    }

    .help-card {
        max-width: none
    }

    .help-card .art,
    .help-card p,
    .btn-talk {
        width: 100%
    }

    .help-card .art {
        height: auto
    }

    .help-card .art img {
        width: 100%;
        height: auto
    }

    .faq-q {
        height: auto;
        min-height: 62px;
        padding: 16px 60px 16px 20px;
        font-size: 16px;
        line-height: 22px
    }

    .faq-q .chev,
    .faq-item.is-open .chev {
        margin-top: -17px;
        top: 50%;
        left: auto;
        right: 14px
    }

    .faq-a p {
        width: auto;
        padding: 0 20px 22px;
        font-size: 15px
    }

    .cta {
        padding: 48px 16px
    }

    .cta-stage {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        width: 100%;
        height: auto;
        display: flex
    }

    .cta-stage p,
    .cta-stage img {
        width: 100%;
        position: static
    }

    .cta-stage p {
        font-size: 16px;
        line-height: 26px
    }

    .cta-stage img {
        height: auto
    }

    .logo-marquee {
        zoom: .6
    }

    .flinks a {
        white-space: normal;
        height: auto;
        padding-top: 4px;
        line-height: 18px
    }

    .site-footer {
        padding: 56px 16px
    }

    .footer-cols {
        flex-wrap: wrap;
        row-gap: 36px;
        height: auto
    }

    .fcol {
        width: 50%;
        padding: 0 8px 0 0
    }

    .fcol:first-child {
        width: 100%
    }

    .fcol.right {
        align-items: flex-start;
        width: 100%
    }

    .socials-row,
    .legal {
        justify-content: flex-start
    }

    .copyright {
        text-align: left;
        padding: 18px 0
    }

    .modal-dialog {
        border-radius: 22px;
        padding: 30px 22px 24px
    }

    .demo-form .two {
        grid-template-columns: 1fr
    }
}

.trusted2 {
    background: #fff;
    padding: 70px 0
}

.trusted2-stage {
    border-bottom: 1px solid #ccc5e6;
    height: 674px;
    position: relative;
    overflow: hidden
}

.trusted2-inner {
    width: 1440px;
    height: 674px;
    margin: 0 auto;
    position: relative
}

.trusted2-left {
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 662px;
    padding: 12px 0;
    display: flex;
    position: absolute;
    top: 19.52px;
    left: 62px
}

.trust-badge {
    height: 40px;
    font-family: var(--f-semi);
    text-transform: uppercase;
    color: #190041;
    background: #f7f3fd;
    border: .8px solid #632dba1a;
    border-radius: 100px;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex
}

.trust-badge svg {
    flex: none;
    width: 24px;
    height: 24px
}

.trusted2-title {
    width: 648px;
    font-family: var(--f-xbold);
    color: #190041;
    font-size: 48px;
    font-weight: 800;
    line-height: 59.4px
}

.trusted2-title span {
    color: #632dba
}

.trusted2-desc {
    font-family: var(--f-gotham);
    color: #3d2860;
    font-size: 18px;
    line-height: 30px
}

.trusted2-cta {
    height: 46.4px
}

.impact2 {
    background-image: linear-gradient(-49.79deg, #632dba33 0%, #e0c3fc33 100%);
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    display: flex
}

.impact2 .live-pill {
    font-family: var(--f-semi);
    border-width: .8px;
    padding: 9.8px 16.8px 9.8px 10.8px;
    font-weight: 600
}

.stats2 {
    align-items: flex-start;
    gap: 24px;
    display: flex
}

.stat2 {
    background: #ffffffd1;
    border: .8px solid #632dba24;
    border-radius: 24px;
    flex-direction: column;
    justify-content: center;
    padding: 16.8px 24.8px;
    display: flex;
    box-shadow: 0 4px 24px #632dba14, 0 1px 4px #632dba0f
}

.stat2 .val {
    font-family: var(--f-xbold);
    letter-spacing: -.717px;
    color: #632dba;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 800;
    line-height: 39.442px
}

.stat2 .val.big {
    font-size: 26px
}

.stat2 .lbl {
    font-family: var(--f-gotham);
    color: #190041;
    white-space: nowrap;
    padding-top: 6px;
    font-size: 12px;
    line-height: 21px
}

.stat2:last-child {
    min-width: 191.5px
}

.trusted2-globe {
    width: 1500px;
    top: -276px;
    left: 590px;
    position: absolute !important
}

.salon-pins {
    pointer-events: none;
    position: absolute;
    inset: 0
}

.salon-pin {
    will-change: transform, opacity;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    padding: 2px;
    transition: opacity .25s linear, box-shadow .2s;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 0 11px #ffffff73, 0 0 0 12px #632dba0f, 0 8px 18px #2d0b7a38
}

.salon-pin img {
    object-fit: cover;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: block
}

.salon-pin:after {
    content: attr(data-label);
    background: var(--navy);
    color: #fff;
    font-family: var(--f-semi);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: opacity .2s, transform .2s;
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 6px)
}

.salon-pin:hover,
.salon-pin:focus-visible {
    outline: none;
    box-shadow: 0 0 0 11px #ffffffb3, 0 0 0 13px #632dba59, 0 8px 18px #2d0b7a38
}

.salon-pin:hover:after,
.salon-pin:focus-visible:after {
    opacity: 1;
    transform: translate(-50%)
}

.trusted2 .trusted-join {
    max-width: 1316px;
    margin: 10px auto 0;
    padding-top: 24px
}

.trusted2 .logo-marquee {
    max-width: 1316px;
    margin: 24px auto 0
}

.fgrid {
    width: 1280px;
    height: 850px;
    margin: 40px auto 0;
    position: relative
}

.fcard {
    background-color: #fff;
    border: 1px solid #fff9;
    border-radius: 24px;
    position: absolute;
    overflow: hidden
}

.fcard>* {
    position: absolute
}

.fcard-email {
    background-image: linear-gradient(-62.78deg, #632dba33, #e0c3fc33);
    width: 807px;
    height: 412px;
    top: 0;
    left: 0
}

.fcard-rem {
    background-image: linear-gradient(-74.1deg, #632dba33, #e0c3fc33);
    width: 447px;
    height: 412px;
    top: 0;
    left: 833px
}

.fcard-win {
    background-image: linear-gradient(-74.1deg, #632dba33, #e0c3fc33);
    width: 447px;
    height: 412px;
    top: 438px;
    left: 0
}

.fcard-cal {
    background-image: linear-gradient(-62.78deg, #632dba33, #e0c3fc33);
    width: 807px;
    height: 412px;
    top: 438px;
    left: 473px
}

.fcard .glow {
    pointer-events: none;
    border-radius: 50%
}

.fcard .glow.lav {
    filter: blur(39px);
    background: #e3d8f659;
    width: 360px;
    height: 340px
}

.fcard .glow.warm {
    filter: blur(35px);
    background: #fff2c973;
    width: 300px;
    height: 300px
}

.fcard-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    display: flex
}

.fcard-title {
    font-family: var(--f-semi);
    letter-spacing: -1.4px;
    color: #190041;
    white-space: nowrap;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.05
}

.fcard-title.sm {
    letter-spacing: -1.2px;
    font-size: 30px
}

.fcard-desc {
    font-family: var(--f-gotham);
    color: #3d2860;
    font-size: 16px;
    line-height: 1.35
}

.fcard-desc.sm {
    font-size: 15px
}

.bee-av2 {
    background: #fff4cc;
    border: 1px solid #e3d8f6;
    border-radius: 50%;
    flex: none;
    width: 34px;
    height: 34px;
    position: relative;
    overflow: hidden
}

.bee-av2 img {
    object-fit: cover;
    width: 82.02%;
    max-width: none;
    height: 97.95%;
    position: absolute;
    top: 11.76%;
    left: 8.99%
}

.fgrid b,
.fgrid small,
.fgrid p {
    font-family: var(--f-gotham)
}

.inbox {
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    width: 350px;
    height: 400px;
    display: flex;
    top: 39px;
    left: 424px;
    overflow: hidden;
    box-shadow: 0 18px 40px -6px #2d0b7a24
}

.inbox-head {
    background: #190041;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    display: flex
}

.inbox-head i {
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: block
}

.inbox-head b {
    color: #fff;
    flex: 1;
    font-size: 13px;
    font-weight: 700
}

.chip-y {
    font-family: var(--f-gotham);
    color: #190041;
    white-space: nowrap;
    background: #ffc300;
    border-radius: 20px;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex
}

.chip-y i {
    background: #190041;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    display: block
}

.mail {
    border-bottom: 1px solid #efe8fa;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    display: flex
}

.mail.unread {
    background: #f0e7ff8c
}

.mail>div {
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}

.mail .row {
    align-items: center;
    gap: 6px;
    display: flex
}

.mail .row b {
    color: #190041;
    flex: 1;
    font-size: 11px;
    font-weight: 700
}

.mail .row small {
    color: #736b8c;
    font-size: 10px
}

.mail .row em {
    background: #632dba;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block
}

.mail .subj {
    color: #632dba;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    font-weight: 700;
    overflow: hidden
}

.mail .subj.read {
    color: #190041;
    font-weight: 400
}

.mail .prev {
    color: #736b8c;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10.5px;
    overflow: hidden
}

.confirm-card {
    background: #fff;
    border-top: 4px solid #ffc300;
    border-radius: 16px;
    flex-direction: column;
    gap: 12px;
    width: 236px;
    padding: 18px 16px 16px;
    display: flex;
    top: 199px;
    left: 364px;
    box-shadow: 0 20px 36px -6px #2d0b7a38
}

.cc-head {
    color: #190041;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    display: flex
}

.cc-rows {
    background: #f0e7ffb3;
    border-radius: 10px;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    display: flex
}

.cc-rows p {
    white-space: nowrap;
    justify-content: space-between;
    font-size: 10.5px;
    display: flex
}

.cc-rows span {
    color: #736b8c
}

.cc-rows b {
    color: #190041;
    font-weight: 700
}

.cc-btns {
    gap: 8px;
    display: flex
}

.cc-btns span {
    font-family: var(--f-gotham);
    white-space: nowrap;
    text-align: center;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 10.5px;
    font-weight: 700
}

.cc-btns .solid {
    color: #fff;
    background: #632dba;
    flex: 1
}

.cc-btns .ghost {
    color: #632dba;
    border: 1px solid #632dba
}

.sent-chip {
    font-family: var(--f-gotham);
    color: #190041;
    white-space: nowrap;
    background: #ffc300;
    border-radius: 20px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    top: 185px;
    left: 510px;
    box-shadow: 0 8px 18px -6px #ffc30066
}

.sent-chip i {
    background: #190041;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    display: block
}

.notif {
    background: #ffffffeb;
    border-radius: 16px;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    display: flex;
    box-shadow: 0 12px 28px -6px #2d0b7a24
}

.notif>div {
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}

.notif .row {
    white-space: nowrap;
    justify-content: space-between;
    display: flex
}

.notif .row b {
    color: #190041;
    font-size: 11px;
    font-weight: 700
}

.notif .row small {
    color: #736b8c;
    font-size: 10px
}

.notif .txt {
    color: #3d2860;
    font-size: 10.5px;
    line-height: 1.35
}

.chip-v,
.chip-y2 {
    font-family: var(--f-gotham);
    white-space: nowrap;
    border-radius: 20px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 8px;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex
}

.chip-v {
    color: #fff;
    background: #632dba
}

.chip-y2 {
    color: #190041;
    background: #ffc300
}

.bell,
.win-icon {
    border-radius: 26px;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    display: flex;
    top: 19px
}

.bell {
    background: #ffc300;
    animation: 3.2s ease-in-out infinite ring;
    left: 370px;
    box-shadow: 0 10px 20px -4px #ffc3004d
}

.win-icon {
    background: #632dba;
    left: 23px;
    box-shadow: 0 10px 20px -4px #2d0b7a40
}

.bell svg,
.win-icon svg {
    width: 26px;
    height: 26px
}

@keyframes ring {

    0%,
    70%,
    to {
        transform: rotate(0)
    }

    74% {
        transform: rotate(14deg)
    }

    80% {
        transform: rotate(-12deg)
    }

    86% {
        transform: rotate(8deg)
    }

    92% {
        transform: rotate(-4deg)
    }
}

.win-thread {
    flex-direction: column;
    gap: 10px;
    width: 290px;
    display: flex;
    top: 45px;
    left: 95px
}

.wt-row {
    align-items: flex-end;
    gap: 8px;
    display: flex
}

.wt-row.me {
    justify-content: flex-end
}

.wt-in {
    color: #3d2860;
    background: #fff;
    border-radius: 14px 14px 14px 4px;
    flex: 1;
    padding: 10px 12px;
    font-size: 10.5px;
    line-height: 1.4;
    box-shadow: 0 10px 24px -6px #2d0b7a1f
}

.wt-out {
    color: #fff;
    white-space: nowrap;
    background: #632dba;
    border-radius: 14px 14px 4px;
    padding: 9px 14px;
    font-size: 10.5px;
    font-weight: 700
}

.calwin {
    background: #fff;
    border-radius: 18px;
    width: 384px;
    height: 400px;
    top: 39px;
    left: 35px;
    overflow: hidden;
    box-shadow: 0 18px 40px -6px #2d0b7a24
}

.calwin>* {
    position: absolute
}

.cal-head {
    background: #190041;
    align-items: center;
    gap: 8px;
    width: 384px;
    height: 46px;
    padding: 0 18px;
    display: flex;
    top: 0;
    left: 0
}

.cal-head b {
    color: #fff;
    flex: 1;
    font-size: 13px;
    font-weight: 700
}

.cal-head .chip-y {
    padding: 4px 10px 4px 8px
}

.cal-col {
    color: #190041;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 700;
    top: 60px
}

.calwin>div {
    position: static
}

.cal-time {
    color: #736b8c;
    white-space: nowrap;
    font-size: 9.5px;
    position: absolute;
    left: 16px
}

.cal-line {
    background: #efe8fa;
    width: 324px;
    height: 1px;
    position: absolute;
    left: 60px
}

.appt {
    white-space: nowrap;
    background: #efe8fa;
    border-left: 3px solid #e3d8f6;
    border-radius: 8px;
    flex-direction: column;
    gap: 2px;
    width: 148px;
    padding: 7px 8px 0 10px;
    display: flex;
    overflow: hidden;
    position: absolute !important
}

.appt b {
    color: #190041;
    font-size: 10px;
    font-weight: 700
}

.appt small {
    color: #736b8c;
    font-size: 9px
}

.appt.bee {
    background: #632dba;
    border-left-color: #ffc300
}

.appt.bee b {
    color: #fff
}

.appt.bee small {
    color: #e3d8f6
}

.synced {
    white-space: nowrap;
    background: #fff;
    border-radius: 16px;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    display: flex;
    top: 253px;
    left: 171px;
    box-shadow: 0 18px 34px -6px #2d0b7a38
}

.synced>div {
    flex-direction: column;
    gap: 2px;
    display: flex
}

.synced b {
    color: #190041;
    font-size: 11.5px;
    font-weight: 700
}

.synced small {
    color: #736b8c;
    font-size: 10px
}

.fcard .confirm-card,
.fcard .synced,
.fcard .sent-chip,
.fcard .chip-v,
.fcard .chip-y2 {
    transition: transform .5s cubic-bezier(.2, .8, .2, 1)
}

.fcard:hover .confirm-card,
.fcard:hover .synced {
    transform: translateY(-6px)
}

.fcard:hover .sent-chip,
.fcard:hover .chip-v,
.fcard:hover .chip-y2 {
    transform: scale(1.06)
}

.handle-scroller {
    margin-top: 40px;
    position: relative
}

.handle-scroller .handle {
    margin-top: 0
}

.handle-scroller.is-pinned .handle {
    top: var(--handle-top, 94px);
    zoom: var(--handle-zoom, 1);
    padding: 12px 0;
    position: sticky
}

.handle-scroller.is-pinned .handle-stage {
    height: 960px
}

.handle-progress {
    display: none
}

.handle-scroller.is-pinned .handle-progress {
    gap: 6px;
    margin-top: 22px;
    display: flex
}

.handle-progress i {
    background: #e3d8f6;
    border-radius: 4px;
    width: 26px;
    height: 4px;
    transition: background .3s, width .3s
}

.handle-progress i.on {
    background: #632dba;
    width: 44px
}

.acc-item {
    cursor: pointer
}

.dash,
.toast {
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s
}

.dash-main .call-row {
    transition: background .35s
}

.dash-main .call-row.flash {
    background: #f7f3fd
}

.toast.bump {
    animation: .6s cubic-bezier(.2, .8, .2, 1) toastBump
}

@keyframes toastBump {
    0% {
        opacity: .4;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.reviews {
    background: #fff;
    padding: 24px 20px
}

.reviews-inner {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px 0;
    display: flex
}

.reviews-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    display: flex
}

.reviews-head h2 {
    font-family: var(--f-xbold);
    color: #190041;
    padding-bottom: 16px;
    font-size: 54px;
    font-weight: 800;
    line-height: 59.4px
}

.reviews-head p {
    width: 718px;
    font-family: var(--f-gotham);
    color: #190041;
    font-size: 18px;
    line-height: 30px
}

.reviews-row {
    justify-content: space-between;
    align-items: center;
    width: 1400px;
    padding: 0 80px;
    display: flex
}

.rv {
    cursor: pointer;
    border: 1px solid #0000;
    border-radius: 16px;
    outline: none;
    flex: none;
    width: 160px;
    height: 480px;
    transition: width .6s cubic-bezier(.2, .8, .2, 1), border-radius .4s, border-color .4s;
    position: relative;
    overflow: hidden
}

.rv.is-on {
    cursor: default;
    border-color: #ffc300;
    border-radius: 24px;
    width: 420px
}

.rv-photo {
    object-fit: cover;
    filter: grayscale();
    width: 100%;
    height: 100%;
    transition: filter .5s, transform .6s;
    position: absolute;
    inset: 0
}

.rv:hover:not(.is-on) .rv-photo {
    transform: scale(1.03)
}

.rv.is-on .rv-photo {
    filter: none
}

.rv-tint {
    opacity: 0;
    background: #19004170;
    transition: opacity .4s;
    position: absolute;
    inset: 0
}

.rv.is-on .rv-tint {
    opacity: 1
}

.rv-shade {
    opacity: 0;
    background: linear-gradient(#11002b00 45%, #11002b80 80%, #11002bb8);
    transition: opacity .4s;
    position: absolute;
    inset: 0
}

.rv.is-on .rv-shade {
    opacity: 1
}

.rv-tag {
    text-align: center;
    color: #fff;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 408px;
    left: 0;
    right: 0
}

.rv-tag .who {
    font-family: var(--f-gotham);
    letter-spacing: .6px;
    color: #fffc;
    font-size: 9px
}

.rv-tag .biz {
    font-family: var(--f-xbold);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2
}

.rv.is-on .rv-tag {
    opacity: 0
}

.rv-logo {
    opacity: 0;
    width: 105px;
    height: 70px;
    transition: opacity .4s .2s;
    position: absolute;
    top: 19px;
    left: 294px
}

.rv.is-on .rv-logo {
    opacity: 1
}

.rv-play {
    opacity: 0;
    pointer-events: none;
    width: 64px;
    height: 64px;
    transition: opacity .3s, transform .3s;
    position: absolute;
    top: 207px;
    left: 177px;
    transform: scale(.6)
}

.rv-play svg {
    width: 64px;
    height: 64px
}

.rv.is-on .rv-play {
    opacity: 1;
    pointer-events: auto;
    transition-delay: .2s;
    transform: none
}

.rv.is-on .rv-play:hover {
    transform: scale(1.06)
}

.rv-body {
    opacity: 0;
    pointer-events: none;
    flex-direction: column;
    gap: 9px;
    width: 380px;
    transition: opacity .3s;
    display: flex;
    position: absolute;
    top: 313px;
    left: 20px
}

.rv.is-on .rv-body {
    opacity: 1;
    transition-delay: .3s
}

.rv-name {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 15px;
    font-weight: 600
}

.rv-role {
    font-family: var(--f-gotham);
    color: #ccc5e6;
    margin-top: -6px;
    font-size: 12px
}

.rv-quote {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45
}

.rv-body hr {
    background: #ffffff24;
    border: 0;
    height: 1px;
    margin: 0
}

.rv-stat b {
    font-family: var(--f-xbold);
    color: #ffc300;
    font-size: 16px;
    font-weight: 800;
    display: block
}

.rv-stat small {
    font-family: var(--f-gotham);
    color: #ccc5e6;
    margin-top: 3px;
    font-size: 12px;
    display: block
}

.fcta {
    background: #11002b;
    height: 575px;
    position: relative;
    overflow: hidden
}

.fcta-glow {
    pointer-events: none;
    filter: blur(70px);
    border-radius: 50%;
    position: absolute
}

.fcta-glow.l {
    background: radial-gradient(closest-side, #632dba8c, #632dba00);
    width: 734px;
    height: 346px;
    top: 158px;
    left: -335px
}

.fcta-glow.r {
    background: radial-gradient(closest-side, #632dba8c, #632dba00);
    width: 532px;
    height: 323px;
    top: 143px;
    left: 1244px
}

.fcta-copy {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 1400px;
    margin: 0 auto;
    padding: 40px 128.67px 0;
    display: flex;
    position: relative
}

.fcta-copy h2 {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px
}

.fcta-copy p {
    opacity: .8;
    font-family: var(--f-gotham);
    color: #fff;
    white-space: nowrap;
    font-size: 18px;
    line-height: 30px
}

.fcta-btn {
    font-family: var(--f-xbold);
    color: #190041;
    background: #ffc300;
    border: 1px solid #ffc300;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    padding: 19px 39px;
    font-size: 20px;
    font-weight: 800;
    line-height: 24px;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex
}

.fcta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px #ffc30059
}

.fcta-art {
    pointer-events: none;
    width: 909px;
    height: 340px;
    position: absolute;
    top: 256px;
    left: calc(50% - 454px)
}

.site-footer2 {
    color: #fff;
    background: #11002b;
    padding: 90px 20px
}

.ft-row {
    max-width: 1400px;
    height: 205px;
    margin: 0 auto;
    display: flex
}

.ft-col {
    flex: 1 1 0;
    min-width: 1px;
    padding: 0 12px
}

.ft-h {
    font-family: var(--f-xbold);
    font-size: 18px;
    font-weight: 800;
    line-height: 20px
}

.ft-line {
    max-width: 220px;
    font-family: var(--f-gotham);
    opacity: .7;
    margin-top: 4.5px;
    font-size: 13px;
    line-height: 24px
}

.ft-line.first {
    padding-top: 11px
}

.ft-line a:hover,
.ft-links a:hover {
    color: var(--yellow);
    opacity: 1
}

.ft-links {
    flex-direction: column;
    gap: 5px;
    margin-top: 16px;
    display: flex
}

.ft-links li {
    padding: 6px 0 3px
}

.ft-links a {
    font-family: var(--f-gotham);
    opacity: .77;
    padding: .5px 0;
    font-size: 13px;
    line-height: 14px;
    transition: color .2s, opacity .2s;
    display: block
}

.ft-col.right {
    flex-direction: column;
    align-items: flex-end;
    display: flex
}

.site-footer2 .copyright {
    font-family: var(--f-semi)
}

@media (max-width:760px) {
    .trusted2 {
        padding: 48px 0 40px
    }

    .trusted2-stage {
        height: auto
    }

    .trusted2-inner {
        width: 100%;
        height: auto;
        padding: 0 16px
    }

    .trusted2-left {
        gap: 20px;
        width: 100%;
        position: relative;
        top: auto;
        left: auto
    }

    .trusted2-title {
        width: 100%;
        font-size: 34px;
        line-height: 42px
    }

    .trusted2-desc {
        font-size: 16px;
        line-height: 26px
    }

    .impact2 {
        width: 100%;
        padding: 16px
    }

    .stats2 {
        gap: 8px;
        width: 100%
    }

    .stat2 {
        border-radius: 18px;
        flex: 1;
        padding: 12px;
        min-width: 0 !important
    }

    .stat2 .val,
    .stat2 .val.big {
        font-size: 17px;
        line-height: 26px
    }

    .stat2 .lbl {
        white-space: normal;
        font-size: 11px;
        line-height: 15px
    }

    .trusted2-globe {
        width: 125%;
        margin: 10px 0 -45%;
        top: 0;
        left: 10%;
        position: relative !important
    }

    .trusted2 .trusted-join {
        padding: 24px 16px 0;
        font-size: 16px;
        line-height: 26px
    }

    .fgrid {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        width: auto;
        height: auto;
        margin: 28px 16px 0;
        display: flex
    }

    .fcard {
        zoom: var(--cz2, .45);
        flex: none;
        position: relative;
        top: auto !important;
        left: auto !important
    }

    .fcard-rem,
    .fcard-win {
        zoom: var(--cz3, .75)
    }

    .handle-scroller.is-pinned .handle {
        zoom: 1;
        position: static
    }

    .reviews-head h2 {
        font-size: 34px;
        line-height: 40px
    }

    .reviews-head p {
        width: auto;
        font-size: 16px;
        line-height: 26px
    }

    .reviews-row {
        scroll-snap-type: x mandatory;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        padding: 0;
        overflow-x: auto
    }

    .rv {
        scroll-snap-align: start;
        width: 90px;
        height: 420px
    }

    .rv.is-on {
        width: 300px
    }

    .rv-tag {
        top: auto;
        bottom: 20px
    }

    .rv-body {
        width: 268px;
        top: auto;
        bottom: 20px;
        left: 16px
    }

    .rv-play {
        top: 150px;
        left: calc(50% - 32px)
    }

    .rv-logo {
        left: auto;
        right: 12px
    }

    .fcta {
        height: auto;
        padding-bottom: 0
    }

    .fcta-copy {
        gap: 22px;
        width: 100%;
        padding: 48px 16px 0
    }

    .fcta-copy h2 {
        font-size: 34px;
        line-height: 40px
    }

    .fcta-copy p {
        white-space: normal;
        font-size: 16px;
        line-height: 26px
    }

    .fcta-glow {
        display: none
    }

    .fcta-art {
        width: 100%;
        height: auto;
        margin-top: 10px;
        position: relative;
        top: 0;
        left: 0
    }

    .site-footer2 {
        padding: 56px 16px
    }

    .ft-row {
        flex-wrap: wrap;
        row-gap: 32px;
        height: auto
    }

    .ft-col {
        flex: 0 0 50%;
        padding: 0 8px 0 0
    }

    .ft-col:first-child,
    .ft-col.right {
        flex-basis: 100%
    }

    .ft-col.right {
        align-items: flex-start
    }

    .ft-col.right .socials-row,
    .ft-col.right .legal {
        justify-content: flex-start
    }

    .ft-col.right .copyright {
        text-align: left;
        padding: 18px 0
    }
}

.handle.is-swap .dash-main>* {
    animation: .45s cubic-bezier(.2, .8, .2, 1) both dashIn
}

.handle.is-swap .dash-main>:nth-child(2) {
    animation-delay: 50ms
}

.handle.is-swap .dash-main>:nth-child(3) {
    animation-delay: .1s
}

.handle.is-swap .toast {
    animation: .5s cubic-bezier(.2, .8, .2, 1) both toastSwap
}

@keyframes dashIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes toastSwap {
    0% {
        opacity: 0;
        transform: translateY(12px)scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.acc-item {
    transition: background .35s, border-color .35s, box-shadow .35s
}

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

    .handle.is-swap .dash-main>*,
    .handle.is-swap .toast {
        animation: none
    }
}

.ft-line.first,
.ft-line.first a {
    white-space: nowrap
}

:root {
    --gutter: 80px;
    --section-y: 70px;
    --content: 1280px
}

@media (min-width:761px) {
    .site-header {
        padding: 24px var(--gutter)
    }

    .header-bar {
        max-width: var(--content);
        padding: 0
    }

    .hero {
        padding: var(--section-y) var(--gutter)
    }

    .hero-stage {
        width: var(--content)
    }

    .hero-title {
        left: 180px
    }

    .hero-sub {
        left: 190px
    }

    .hero-ctas {
        left: 180px
    }

    .bubble.b1 {
        left: 459px
    }

    .bubble.b2 {
        left: 569px
    }

    .bubble.b3 {
        left: 419px
    }

    .bubble.b4 {
        left: 489px
    }

    .hero-bee {
        left: 0
    }

    .hero-girl {
        left: calc(var(--content) - 380px)
    }

    .hero-ring.r1 {
        left: 1148.93px
    }

    .hero-ring.r2 {
        left: 1133.93px
    }

    .trusted2 {
        padding: var(--section-y) 0
    }

    .trusted2-left {
        left: var(--gutter);
        padding: 0;
        top: 0
    }

    .trusted2 .trusted-join {
        padding: 24px var(--gutter) 0
    }

    .trusted2 .logo-marquee {
        margin-left: var(--gutter);
        margin-right: var(--gutter);
        -webkit-mask-image: linear-gradient(90deg, #0000, #000 64px calc(100% - 64px), #0000);
        mask-image: linear-gradient(90deg, #0000, #000 64px calc(100% - 64px), #0000)
    }

    .bento-section {
        padding: var(--section-y) var(--gutter)
    }

    .handle-scroller {
        margin-top: var(--section-y)
    }

    .handle {
        margin-top: 0;
        padding: 0
    }

    .reviews {
        padding: var(--section-y) var(--gutter)
    }

    .reviews-inner {
        max-width: var(--content);
        padding: 0
    }

    .reviews-row {
        width: 100%;
        padding: 0
    }

    .integrations {
        padding: var(--section-y) var(--gutter)
    }

    .int-inner {
        max-width: var(--content);
        padding: 0
    }

    .int-card {
        padding: 40px 64px
    }

    .int-row {
        margin-left: 0
    }

    .int-text {
        width: 452px;
        padding: 0 40px 0 0
    }

    .int-visual {
        width: 700px
    }

    .swipe {
        padding: var(--section-y) var(--gutter)
    }

    .swipe-head {
        width: 100%
    }

    .ba {
        width: var(--content);
        height: 803px
    }

    .faq {
        padding: var(--section-y) var(--gutter)
    }

    .faq-inner {
        max-width: var(--content);
        padding: 0
    }

    .faq-grid {
        grid-template-columns: 400px 852px
    }

    .fcta-copy {
        width: 100%;
        max-width: calc(var(--content) + 2 * var(--gutter));
        padding: var(--section-y) var(--gutter) 0
    }

    .site-footer2 {
        padding: var(--section-y) var(--gutter)
    }

    .ft-row {
        max-width: var(--content)
    }

    .ft-col {
        padding: 0 24px 0 0
    }

    .ft-col.right {
        padding: 0
    }
}

.card,
.fcard {
    isolation: isolate;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    transform: translateZ(0)
}

.card {
    transition: filter .45s cubic-bezier(.2, .8, .2, 1)
}

.card-c {
    filter: drop-shadow(0 0 1px #19004138)
}

.card-bg {
    transition: opacity .45s
}

.card-bg:after {
    content: "";
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(115deg, #632dba00 30%, #632dba1a 50%, #ffc30014 60%, #632dba00 75%) 110% 0/250% 100%;
    transition: opacity .45s, background-position .9s cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    inset: 0
}

.card:hover {
    filter: drop-shadow(0 22px 32px #632dba29)drop-shadow(0 0 1px #632dba73)
}

.card:hover .card-bg:after {
    opacity: 1;
    background-position: -10% 0
}

.card .voice-phone,
.card .chat-panel,
.card .dm-phone,
.card .phone-mock,
.card .socials,
.card .channel-icon,
.card .text-icon {
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), background .3s
}

.card:hover .voice-phone,
.card:hover .dm-phone,
.card:hover .phone-mock {
    transform: translateY(-8px)
}

.card:hover .chat-panel {
    transform: translateY(-6px)
}

.card:hover .socials {
    transform: scale(1.06)
}

.card:hover .channel-icon,
.card:hover .text-icon {
    transform: scale(1.06)rotate(-4deg)
}

.card:hover .learn-more .arrow-btn,
.fcard:hover .learn-more .arrow-btn {
    background: #632dba;
    transform: translate(4px)
}

.card:hover .learn-more .arrow-btn path,
.fcard:hover .learn-more .arrow-btn path {
    stroke: #fff
}

.learn-more .arrow-btn path {
    transition: stroke .2s
}

.fcard {
    transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s cubic-bezier(.2, .8, .2, 1), border-color .4s;
    box-shadow: 0 0 #632dba00
}

.fcard:hover {
    border-color: #632dba47;
    transform: translateY(-6px);
    box-shadow: 0 24px 44px -14px #632dba47, 0 0 0 1px #632dba1a
}

.fcard .glow {
    transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .5s
}

.fcard:hover .glow.lav {
    transform: translate(-24px, -12px)scale(1.12)
}

.fcard:hover .glow.warm {
    transform: translate(18px, 14px)scale(1.1)
}

.fcard .inbox,
.fcard .calwin,
.fcard .win-thread,
.fcard .notif,
.fcard .channel-icon,
.fcard .bell,
.fcard .win-icon {
    transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.fcard:hover .inbox,
.fcard:hover .calwin {
    transform: translateY(-6px)
}

.fcard:hover .win-thread,
.fcard:hover .notif {
    transform: translateY(-4px)
}

.fcard:hover .channel-icon,
.fcard:hover .win-icon {
    transform: scale(1.06)rotate(-4deg)
}

@media (hover:none),
(prefers-reduced-motion:reduce) {

    .card:hover,
    .fcard:hover {
        filter: none;
        transform: translateZ(0)
    }

    .card-c:hover {
        filter: drop-shadow(0 0 1px #19004138)
    }
}

@media (min-width:761px) {
    .fcta {
        height: 605px
    }

    .fcta-art {
        top: 286px
    }

    .faq-q .chev,
    .faq-item.is-open .chev {
        left: auto;
        right: 16px
    }

    .faq-a p {
        width: auto
    }

    .faq-grid>* {
        min-width: 0
    }
}

.rv.is-on {
    cursor: pointer
}

.rv.is-on:hover .rv-play {
    transform: scale(1.1)
}

.rv-play {
    pointer-events: none !important
}

.rv-play:after {
    content: "";
    opacity: 0;
    border: 2px solid #ffc3008c;
    border-radius: 50%;
    position: absolute;
    inset: -8px
}

.rv.is-on .rv-play:after {
    animation: 1.8s ease-out 1s infinite rvPulse
}

@keyframes rvPulse {
    0% {
        opacity: .9;
        transform: scale(.9)
    }

    to {
        opacity: 0;
        transform: scale(1.35)
    }
}

.rv:focus-visible {
    box-shadow: 0 0 0 3px #632dba
}

.video-slot .video-soon {
    aspect-ratio: 16/9;
    background: #11002b 50% 30%/cover no-repeat;
    align-items: flex-end;
    display: flex;
    position: relative
}

.video-slot .video-soon:before {
    content: "";
    background: linear-gradient(#11002b26, #11002bd9);
    position: absolute;
    inset: 0
}

.video-slot .video-soon p {
    color: #fff;
    font-family: var(--f-semi);
    padding: 32px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    position: relative
}

.video-slot .video-soon small {
    font-family: var(--f-gotham);
    opacity: .75;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 400;
    display: block
}

@media (min-width:761px) {
    .ba {
        border-radius: 28px;
        width: 960px;
        height: 602px
    }

    .ba img {
        border-radius: 28px
    }
}

.salon-pin {
    width: 56px;
    height: 56px;
    padding: 3px
}

.salon-pin img {
    width: 50px;
    height: 50px
}

.vr-modal {
    overscroll-behavior: contain;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto
}

.vr-modal .modal-backdrop {
    position: fixed
}

.vr-dialog {
    zoom: var(--mz, 1);
    background: linear-gradient(-68.27deg, #11002b0d 8.24%, #b0790e13 24.95%, #ffb6001a 41.65%, #632dba1a 66.7%, #9976d225 68.27%, #b69ddf30 69.83%, #d4c6ec46 72.97%, #e4dbf35d 76.1%, #eee8f773 79.23%, #f9f7fc9f 85.49%, #fffc 91.76%), #fff;
    border-radius: 24px;
    flex-direction: column;
    flex: none;
    gap: 64px;
    width: 1184px;
    margin: 0 auto;
    padding: 72px 72px 80px;
    animation: .35s cubic-bezier(.2, .8, .2, 1) popIn;
    display: flex;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 100px -20px #1a004040
}

.vr-close {
    z-index: 3;
    background: #f3edff;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    transition: background .2s, transform .2s;
    display: flex;
    position: absolute;
    top: 24px;
    left: 1120px
}

.vr-close:hover {
    background: #e3d8f6;
    transform: rotate(90deg)
}

.vr-hero {
    align-items: flex-start;
    gap: 64px;
    display: flex
}

.vr-hero-text {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    width: 560px;
    display: flex
}

.vr-eyebrow {
    font-family: var(--f-gotham);
    letter-spacing: 1.6px;
    color: #632dba;
    font-size: 13px;
    font-weight: 700
}

.vr-hero-text h2 {
    font-family: var(--f-semi);
    letter-spacing: -1.2px;
    color: #190041;
    margin-top: 14px;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.12
}

.vr-lead {
    font-family: var(--f-book);
    color: #3d2860;
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.55
}

.vr-hero-text .vr-btns {
    margin-top: 28px
}

.vr-btns {
    align-items: flex-start;
    gap: 12px;
    display: flex
}

.vr-btn {
    font-family: var(--f-gotham);
    white-space: nowrap;
    border-radius: 10px;
    align-items: center;
    gap: 6px;
    padding: 14px 18px 14px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
    display: inline-flex
}

.vr-btn.primary {
    color: #fff;
    background: #632dba
}

.vr-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -8px #632dba8c
}

.vr-btn.primary svg {
    transition: transform .2s
}

.vr-btn.primary:hover svg {
    transform: translate(3px)
}

.vr-btn.secondary {
    color: #632dba;
    background: 0 0;
    border: 1.5px solid #ccbdf2;
    gap: 8px;
    padding: 14px 22px 14px 18px
}

.vr-cta .vr-btn.secondary {
    padding: 14px 22px
}

.vr-btn.secondary:hover {
    background: #632dba0f;
    border-color: #632dba
}

.vr-btn.secondary.is-on {
    color: #fff;
    background: #632dba;
    border-color: #632dba
}

.vr-btn.secondary.is-on path {
    stroke: #fff
}

.vr-checks {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-width: 0;
    padding-top: 44px;
    display: flex
}

.vr-checks li {
    font-family: var(--f-book);
    color: #3d2860;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    line-height: 18px;
    display: flex
}

.vr-checks svg {
    flex: none
}

.vr-visual {
    align-items: stretch;
    gap: 16px;
    display: flex
}

.vr-call-panel {
    background: linear-gradient(142deg, #f6f2ff 0%, #ccb8fa 42.86%, #632dba 71.43%);
    border-radius: 20px;
    flex: none;
    width: 640px;
    height: 500px;
    position: relative;
    overflow: hidden
}

.vr-phone {
    width: 318px;
    max-width: none;
    height: 604px;
    position: absolute;
    top: 15.82px;
    left: 298px
}

.vr-call-card {
    background: #fff;
    border-radius: 22px;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    padding: 20px;
    display: flex;
    position: absolute;
    top: 187.82px;
    left: 38px;
    box-shadow: 0 30px 60px -10px #33148033
}

.vr-caller {
    align-items: center;
    gap: 12px;
    display: flex
}

.vr-caller-icon {
    background: #632dba;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    display: flex
}

.vr-caller-text {
    white-space: nowrap;
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}

.vr-caller-text small {
    font-family: var(--f-book);
    color: #736b8c;
    font-size: 12px
}

.vr-caller-text b {
    font-family: var(--f-gotham);
    color: #190041;
    font-size: 16px;
    font-weight: 700
}

.vr-live {
    font-family: var(--f-gotham);
    color: #12915e;
    font-variant-numeric: tabular-nums;
    background: #e3f7ed;
    border-radius: 100px;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 10px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex
}

.vr-live svg {
    animation: 1.4s ease-in-out infinite vrBlink
}

@keyframes vrBlink {
    50% {
        opacity: .35
    }
}

.vr-wave {
    align-items: center;
    gap: 4px;
    height: 30px;
    display: flex
}

.vr-wave i {
    transform-origin: 50%;
    background: #dbd1f2;
    border-radius: 2px;
    width: 4px
}

.vr-wave i.on {
    background: #632dba;
    animation: 1.1s ease-in-out infinite vrWave
}

@keyframes vrWave {
    50% {
        transform: scaleY(.55)
    }
}

.vr-line {
    display: flex
}

.vr-line.out {
    justify-content: flex-end
}

.vr-bubble {
    max-width: 274px;
    font-family: var(--f-book);
    border-radius: 14px;
    flex-direction: column;
    gap: 3px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.4;
    display: flex
}

.vr-bubble small {
    font-family: var(--f-gotham);
    font-size: 10px;
    font-weight: 700;
    line-height: normal
}

.vr-bubble.in {
    color: #190041;
    background: #f3edff
}

.vr-bubble.in small {
    color: #736b8c
}

.vr-bubble.out {
    color: #fff;
    background: #632dba
}

.vr-bubble.out small {
    color: #ded1ff
}

.vr-bubble.wide {
    width: 274px
}

.vr-booked {
    font-family: var(--f-gotham);
    color: #12915e;
    white-space: nowrap;
    background: #e3f7ed;
    border-radius: 12px;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    font-size: 12px;
    font-weight: 700;
    display: flex
}

.vr-booked svg {
    flex: none
}

.vr-call-card.is-playing .vr-line,
.vr-call-card.is-playing .vr-booked {
    animation: .5s cubic-bezier(.2, .8, .2, 1) both vrIn
}

.vr-call-card.is-playing .vr-line.l1 {
    animation-delay: .4s
}

.vr-call-card.is-playing .vr-line.l2 {
    animation-delay: 2.4s
}

.vr-call-card.is-playing .vr-line.l3 {
    animation-delay: 5s
}

.vr-call-card.is-playing .vr-booked {
    animation-delay: 6.6s
}

@keyframes vrIn {
    0% {
        opacity: 0;
        transform: translateY(10px)scale(.97)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.vr-right {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-width: 0;
    display: flex
}

.vr-stat {
    text-align: center;
    background: linear-gradient(#fbf9ff, #ffedb8);
    border-radius: 20px;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex
}

.vr-stat b {
    font-family: var(--f-semi);
    letter-spacing: -2px;
    color: #632dba;
    font-size: 72px;
    font-weight: 600;
    line-height: normal
}

.vr-stat p {
    font-family: var(--f-book);
    color: #3d2860;
    font-size: 14px;
    line-height: 1.5
}

.vr-chart-wrap {
    background: linear-gradient(147.78deg, #c7b2fa 0%, #632dba 71.43%);
    border-radius: 20px;
    flex: 1;
    align-items: center;
    padding: 0 22px;
    display: flex
}

.vr-chart {
    background: #fff;
    border-radius: 14px;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    display: flex
}

.vr-chart-title {
    font-family: var(--f-gotham);
    color: #190041;
    font-size: 13px;
    font-weight: 700
}

.vr-legend {
    font-family: var(--f-book);
    color: #736b8c;
    gap: 14px;
    font-size: 10.5px;
    display: flex
}

.vr-legend span {
    align-items: center;
    gap: 6px;
    display: inline-flex
}

.vr-legend i {
    border-radius: 2px;
    width: 8px;
    height: 8px
}

.vr-legend i.a,
.vr-pair i.a {
    background: #ccbdf7
}

.vr-legend i.b,
.vr-pair i.b {
    background: #632dba
}

.vr-bars {
    justify-content: space-between;
    align-items: flex-end;
    display: flex
}

.vr-day {
    font-family: var(--f-book);
    color: #736b8c;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    display: flex
}

.vr-pair {
    align-items: flex-end;
    gap: 3px;
    display: flex
}

.vr-pair i {
    transform-origin: bottom;
    border-radius: 3px 3px 0 0;
    width: 12px
}

.vr-modal.is-open .vr-pair i {
    animation: .7s cubic-bezier(.2, .8, .2, 1) both vrGrow
}

.vr-modal.is-open .vr-day:nth-child(2) i {
    animation-delay: 50ms
}

.vr-modal.is-open .vr-day:nth-child(3) i {
    animation-delay: .1s
}

.vr-modal.is-open .vr-day:nth-child(4) i {
    animation-delay: .15s
}

.vr-modal.is-open .vr-day:nth-child(5) i {
    animation-delay: .2s
}

.vr-modal.is-open .vr-day:nth-child(6) i {
    animation-delay: .25s
}

.vr-modal.is-open .vr-day:nth-child(7) i {
    animation-delay: .3s
}

@keyframes vrGrow {
    0% {
        transform: scaleY(0)
    }
}

.vr-features {
    background: #fff;
    border: 1px solid #c2bacf;
    border-radius: 20px;
    align-items: flex-start;
    width: 1074px;
    height: 272px;
    padding: 50px 32px;
    display: flex
}

.vr-feature {
    text-align: center;
    flex-direction: column;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 100%;
    padding: 0 45px 0 32px;
    display: flex
}

.vr-feature+.vr-feature {
    border-left: 2px solid #c2bacf
}

.vr-feature-icon {
    justify-content: center;
    align-items: center;
    height: 32px;
    display: flex
}

.vr-feature h3 {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    padding: 20px 0 10px;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.vr-feature p {
    width: 251px;
    max-width: 100%;
    font-family: var(--f-book);
    color: #190041;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px
}

.vr-cta {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 8px;
    display: flex
}

.vr-cta h3 {
    font-family: var(--f-semi);
    letter-spacing: -1px;
    color: #190041;
    white-space: nowrap;
    font-size: 32px;
    font-weight: 600
}

@media (max-width:760px) {
    .vr-modal {
        padding: 12px
    }

    .vr-dialog {
        zoom: 1;
        gap: 36px;
        width: 100%;
        padding: 56px 20px 40px
    }

    .vr-close {
        top: 12px;
        left: auto;
        right: 12px
    }

    .vr-hero,
    .vr-visual {
        flex-direction: column;
        gap: 24px
    }

    .vr-hero-text {
        width: 100%
    }

    .vr-hero-text h2 {
        font-size: 30px
    }

    .vr-lead {
        font-size: 15px
    }

    .vr-btns {
        flex-wrap: wrap
    }

    .vr-checks {
        padding-top: 0
    }

    .vr-call-panel {
        width: 100%;
        height: 470px
    }

    .vr-phone {
        width: 240px;
        height: auto;
        top: 12px;
        left: auto;
        right: -70px
    }

    .vr-call-card {
        width: calc(100% - 24px);
        max-width: 360px;
        top: 40px;
        left: 12px
    }

    .vr-right {
        gap: 12px
    }

    .vr-stat {
        padding: 28px 0
    }

    .vr-chart-wrap {
        padding: 16px
    }

    .vr-features {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 8px 20px
    }

    .vr-feature {
        height: auto;
        padding: 24px 0
    }

    .vr-feature+.vr-feature {
        border-top: 1px solid #c2bacf;
        border-left: 0
    }

    .vr-feature h3 {
        white-space: normal
    }

    .vr-cta h3 {
        white-space: normal;
        text-align: center;
        font-size: 24px
    }

    .vr-booked {
        white-space: normal;
        line-height: 1.35
    }
}

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

    .vr-wave i.on,
    .vr-live svg,
    .vr-modal.is-open .vr-pair i {
        animation: none
    }
}

.bento-head {
    width: 1280px;
    max-width: 100%
}

.explore-cta {
    justify-content: center;
    margin-top: 48px;
    display: flex
}

.explore-btn {
    color: #fff;
    font-family: var(--f-semi);
    background: #632dba;
    border-radius: 100px;
    align-items: center;
    gap: 10px;
    padding: 16px 30px;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, background .25s;
    display: inline-flex;
    box-shadow: 0 14px 30px -12px #632dba8c
}

.explore-btn svg {
    width: 20px;
    height: 20px;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1)
}

.explore-btn:hover {
    background: #5626a6;
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -12px #632dba99
}

.explore-btn:hover svg {
    transform: translate(4px)
}

.explore-btn:focus-visible {
    outline-offset: 3px;
    outline: 3px solid #ffc300
}

.ml-pack {
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    width: 656px;
    max-width: none;
    height: auto;
    transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .55s cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    top: 286px;
    left: 624px;
    transform: translateY(18px)scale(.98)
}

.handle.show-pack .ml-pack {
    opacity: 1;
    transform: none
}

.handle-right {
    transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1)
}

.handle.show-pack .handle-right {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px)
}

@media (max-width:760px) {
    .explore-cta {
        margin-top: 28px
    }

    .ml-pack {
        width: 100%;
        margin-top: 16px;
        display: none;
        position: relative;
        top: auto;
        left: auto
    }

    .handle.show-pack .ml-pack {
        display: block
    }

    .handle.show-pack .handle-right {
        display: none
    }
}

html {
    scroll-padding-top: 150px
}

.site-header {
    z-index: 90;
    isolation: isolate;
    padding: 24px var(--gutter, 80px);
    background: #11002b;
    position: sticky;
    top: 0
}

.header-bar {
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
    background: #632dba26;
    border: .8px solid #ffffff59;
    border-radius: 48px;
    justify-content: space-between;
    align-items: center;
    max-width: 1185px;
    height: 94px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    position: relative
}

.brand {
    width: 196px;
    height: 40px;
    padding: 0
}

.brand img {
    width: 196px;
    height: 40px
}

.header-right {
    gap: 10px
}

.main-nav {
    width: auto
}

.nav-link {
    font-family: var(--f-book);
    color: #fff;
    border-radius: 100px;
    font-size: 14px;
    line-height: 30px;
    transition: background-color .2s, color .2s
}

.nav-link:hover,
.nav-item:focus-within>.nav-link,
.nav-item.has-menu:hover>.nav-link {
    color: #fff;
    background: #632dba
}

.nav-caret {
    width: 9px;
    height: 14px;
    top: 8px
}

.nav-caret svg {
    width: 9px;
    height: 14px
}

.btn-demo-sm {
    background: var(--yellow);
    width: 172px;
    height: 46px;
    font-family: var(--f-semi);
    color: #190041;
    border: 0;
    border-radius: 28px;
    align-items: center;
    padding: 0 0 0 21px;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    display: inline-flex
}

.btn-demo-sm:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px #ffc30059
}

.nav-menu {
    margin-top: 18px
}

.nav-menu:before {
    height: 20px;
    top: -20px
}

.salon-globe,
.trusted2-stage {
    isolation: isolate
}

.modal {
    z-index: 300
}

@media (max-width:1100px) {
    .header-bar {
        padding: 0 20px 0 24px
    }

    .main-nav {
        border: .8px solid #fff3;
        border-radius: 24px;
        padding: 12px 16px 16px;
        top: calc(100% + 10px)
    }

    .nav-link {
        padding: 8px 14px !important
    }
}

@media (max-width:760px) {
    html {
        scroll-padding-top: 96px
    }

    .site-header {
        padding: 12px
    }

    .header-bar {
        border-radius: 32px;
        height: 64px;
        padding: 0 10px 0 18px
    }

    .brand,
    .brand img {
        width: 147px;
        height: 30px
    }
}

.salon-dot {
    cursor: default;
    will-change: transform, opacity;
    background: #ffc300;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 11px;
    height: 11px;
    transition: opacity .25s linear;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 0 0 3px #632dba47, 0 2px 6px #2d0b7a59
}

.salon-dot:before {
    content: "";
    animation: 3s ease-out infinite dotPing;
    animation-delay: inherit;
    opacity: 0;
    border: 1.5px solid #ffc300b3;
    border-radius: 50%;
    position: absolute;
    inset: -5px
}

@keyframes dotPing {
    0% {
        opacity: .9;
        transform: scale(.4)
    }

    70%,
    to {
        opacity: 0;
        transform: scale(1.6)
    }
}

.salon-dot:after {
    content: attr(data-label);
    background: var(--navy);
    color: #fff;
    font-family: var(--f-semi);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    transition: opacity .2s, transform .2s;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px)
}

.salon-dot:hover {
    z-index: 200 !important
}

.salon-dot:hover:after {
    opacity: 1;
    transform: translate(-50%)
}

@media (prefers-reduced-motion:reduce) {
    .salon-dot:before {
        animation: none
    }
}

.ld {
    padding: var(--section-y, 70px) var(--gutter, 80px);
    color: #fff;
    background: #15002e
}

.ld-inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex
}

.ld-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    display: flex
}

.ld .dot {
    border-radius: 50%;
    flex: none;
    width: 12px;
    height: 12px;
    display: inline-block
}

.ld .dot.sm {
    width: 11px;
    height: 11px
}

.ld .dot.y {
    background: #ffc300
}

.ld .dot.g {
    background: #33e48a;
    animation: 2s ease-out infinite ldPulse;
    box-shadow: 0 0 #33e48a99
}

@keyframes ldPulse {
    0% {
        box-shadow: 0 0 #33e48a8c
    }

    to {
        box-shadow: 0 0 0 10px #33e48a00
    }
}

.ld-eyebrow {
    font-family: var(--f-semi);
    letter-spacing: .5px;
    color: #ccb7f4;
    border: 2px solid #7a35e8;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex
}

.ld-head h2 {
    font-family: var(--f-xbold);
    letter-spacing: -1.6px;
    color: #fff;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.05
}

.ld-head h2 span {
    font-family: var(--f-semi);
    color: #ffc300;
    font-weight: 600
}

.ld-head p {
    font-family: var(--f-book);
    color: #cecbd4;
    font-size: 24px;
    line-height: 26.4px
}

.ld-cards {
    align-items: stretch;
    gap: 32px;
    width: 100%;
    display: flex
}

.ld-card {
    background: #3c126a;
    border: 2px solid #4d218a;
    border-radius: 28px
}

.ld-bee {
    flex: none;
    justify-content: center;
    align-items: center;
    width: 625px;
    display: flex
}

.ld-bee-inner {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 482px;
    display: flex
}

.ld-bee-img {
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 380px;
    height: 380px;
    display: flex;
    overflow: hidden
}

.ld-bee-img img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.ld-bee-title {
    font-family: var(--f-semi);
    color: #fff;
    white-space: nowrap;
    margin-top: 0;
    font-size: 27px;
    font-weight: 600
}

.ld-bee-status {
    font-family: var(--f-semi);
    color: #c7b5e9;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    margin-top: -14px;
    font-size: 19px;
    font-weight: 600;
    display: flex
}

.ld-call {
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    gap: 33px;
    width: 623px;
    padding: 48px 40px;
    display: flex
}

.ld-live {
    font-family: var(--f-semi);
    color: #b897f0;
    border: 1px solid #4d218a;
    border-radius: 999px;
    align-items: center;
    gap: 9px;
    padding: 9px 16px;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex
}

.ld-intro {
    flex-direction: column;
    gap: 10px;
    display: flex
}

.ld-intro h3 {
    font-family: var(--f-semi);
    letter-spacing: -.5px;
    color: #fff;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.08
}

.ld-intro h3 span {
    color: #ffc300
}

.ld-intro p {
    font-family: var(--f-gotham);
    color: #c7b5e9;
    font-size: 18px;
    line-height: 1.45
}

.ld-form {
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    transition: box-shadow .2s;
    display: flex;
    box-shadow: 0 0 #ffc30000
}

.ld-form:focus-within {
    box-shadow: 0 0 0 4px #ffc30059
}

.ld-form.is-error {
    box-shadow: 0 0 0 3px #ff6b8a
}

.ld-country {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 14px 16px;
    font-size: 17px;
    font-weight: 600;
    display: inline-flex
}

.ld-form input {
    min-width: 0;
    font-family: var(--f-book);
    color: #190041;
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 20px
}

.ld-form input::placeholder {
    color: #66577d
}

.ld-form button {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    background: #ffc300;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 16px 26px 16px 24px;
    font-size: 18px;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex
}

.ld-form button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px #ffc300b3
}

.ld-form-note {
    height: 0;
    font-family: var(--f-gotham);
    color: #ffd2dc;
    margin-top: -27px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 16px;
    overflow: visible
}

.ld-divider {
    width: 100%;
    font-family: var(--f-semi);
    color: #c7b5e9;
    white-space: nowrap;
    align-items: center;
    gap: 18px;
    font-size: 16px;
    font-weight: 600;
    display: flex
}

.ld-divider i {
    background: #5b3a7e;
    flex: 1;
    height: 1px
}

.ld-direct {
    background: #632dba;
    border-radius: 18px;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 98px;
    padding: 0 22px 0 15px;
    transition: background .2s, transform .2s;
    display: flex
}

.ld-direct:hover {
    background: #6f37c9;
    transform: translateY(-2px)
}

.ld-direct-icon {
    background: #632dba;
    border: 3px solid #3c126a;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    display: flex
}

.ld-direct-num {
    font-family: var(--f-semi);
    white-space: nowrap;
    flex-direction: column;
    flex: 1;
    gap: 3px;
    font-weight: 600;
    display: flex
}

.ld-direct-num small {
    color: #c7b5e9;
    font-size: 16px
}

.ld-direct-num b {
    color: #fff;
    font-size: 22px;
    font-weight: 600
}

.ld-direct-tap {
    font-family: var(--f-semi);
    color: #fff;
    white-space: nowrap;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex
}

.ld-direct-tap svg {
    transition: transform .2s
}

.ld-direct:hover .ld-direct-tap svg {
    transform: translate(3px)
}

.fs-head {
    align-items: flex-end;
    gap: 24px;
    display: flex
}

.fs-heading {
    flex-direction: column;
    flex: 1;
    gap: 14px;
    display: flex
}

.fs-eyebrow {
    font-family: var(--f-gotham);
    letter-spacing: 1.6px;
    color: #632dba;
    font-size: 13px;
    font-weight: 700
}

.fs-heading h2 {
    font-family: var(--f-semi);
    letter-spacing: -1.5px;
    color: #190041;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.08
}

.fs-arrows {
    gap: 12px;
    display: flex
}

.fs-arrow {
    color: #fff;
    background: #632dba;
    border-radius: 28px;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 56px;
    transition: background .2s, color .2s, transform .2s;
    display: flex
}

.fs-arrow:hover:not(:disabled) {
    background: #5626a6;
    transform: translateY(-2px)
}

.fs-arrow:disabled {
    color: #b8a6de;
    cursor: default;
    background: #f3edff
}

.fs-track {
    margin: 28px calc(-1 * var(--gutter, 80px)) 0;
    padding: 10px var(--gutter, 80px) 30px;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--gutter, 80px);
    scrollbar-width: none;
    cursor: grab;
    outline: none;
    gap: 24px;
    display: flex;
    overflow-x: auto
}

.fs-track::-webkit-scrollbar {
    display: none
}

.fs-track.is-grabbing {
    cursor: grabbing;
    scroll-snap-type: none
}

.fs-track.is-grabbing .fs-card {
    pointer-events: none
}

.fs-card {
    scroll-snap-align: start;
    isolation: isolate;
    background: linear-gradient(-78.58deg, #632dba0f 0%, #e0c3fc33 100%), #fff;
    border: 1px solid #efe8fa;
    border-radius: 28px;
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    width: 400px;
    height: 520px;
    padding: 20px 20px 24px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .3s;
    display: flex;
    overflow: hidden;
    box-shadow: 0 18px 40px -12px #4d269914
}

.fs-card:hover {
    border-color: #632dba40;
    transform: translateY(-6px);
    box-shadow: 0 26px 48px -14px #632dba40
}

.fs-visual {
    border-radius: 20px;
    flex: none;
    width: 360px;
    height: 270px;
    overflow: hidden
}

.fs-visual img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    width: 360px;
    max-width: none;
    height: 270px;
    transition: transform .6s cubic-bezier(.2, .8, .2, 1)
}

.fs-card:hover .fs-visual img {
    transform: scale(1.04)
}

.fs-text {
    flex-direction: column;
    flex: 1;
    gap: 12px;
    width: 100%;
    min-height: 0;
    padding: 24px 8px 0;
    display: flex
}

.fs-title {
    align-items: center;
    gap: 12px;
    display: flex
}

.fs-icon {
    background: #f3edff;
    border-radius: 22px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    transition: transform .3s;
    display: flex
}

.fs-card:hover .fs-icon {
    transform: rotate(-6deg)scale(1.06)
}

.fs-title h3 {
    font-family: var(--f-semi);
    letter-spacing: -.8px;
    color: #190041;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 600
}

.fs-text p {
    font-family: var(--f-book);
    color: #3d2860;
    font-size: 15.5px;
    line-height: 1.5
}

.fs-more {
    font-family: var(--f-semi);
    color: #190041;
    align-items: center;
    gap: 11.9px;
    font-size: 13.6px;
    font-weight: 600;
    display: inline-flex
}

.fs-more-btn {
    background: #f1e7ff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 51px;
    transition: background .2s, transform .25s;
    display: flex
}

.fs-card:hover .fs-more-btn,
.fs-more:focus-visible .fs-more-btn {
    background: #632dba;
    transform: translate(4px)
}

.fs-card:hover .fs-more-btn path {
    stroke: #fff
}

.fs-progress {
    background: #f3edff;
    border-radius: 4px;
    height: 4px;
    margin-top: 0;
    position: relative;
    overflow: hidden
}

.fs-progress span {
    background: #632dba;
    border-radius: 4px;
    height: 100%;
    transition: left .15s linear, width .2s;
    position: absolute;
    top: 0
}

.handle-scroller {
    margin-top: 24px
}

.handle,
.handle-scroller .handle,
.handle-scroller.is-pinned .handle {
    background: linear-gradient(#fff 0%, #f6f2ff 100%);
    width: auto;
    margin: 0 -72px;
    padding: 40px 64px
}

.handle-scroller.is-pinned .handle {
    padding: 28px 64px
}

.handle-stage,
.handle-scroller.is-pinned .handle-stage {
    height: auto;
    position: relative
}

.handle-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex
}

.handle-head .eyebrow {
    font-family: var(--f-gotham);
    letter-spacing: 1.6px;
    color: #632dba;
    font-size: 13px;
    font-weight: 700
}

.handle-head h2 {
    font-family: var(--f-semi);
    letter-spacing: -1.8px;
    color: #190041;
    white-space: nowrap;
    margin-top: 12px;
    font-size: 52px;
    font-weight: 600;
    line-height: 1.05
}

.handle-head .lead {
    font-family: var(--f-book);
    color: #3d2860;
    white-space: nowrap;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.5
}

.handle-row {
    height: 688px;
    margin-top: 40px;
    position: relative
}

.handle-left {
    width: 600px;
    position: absolute;
    top: 44px;
    left: 0
}

.handle-left .accordion {
    margin-top: 0
}

.ml-pack {
    top: 21.67px;
    left: 640px
}

.handle-right {
    top: 50px;
    left: 640px
}

@media (max-width:760px) {
    .ld {
        padding: 48px 16px
    }

    .ld-head h2 {
        letter-spacing: -1px;
        font-size: 36px
    }

    .ld-head p {
        font-size: 17px;
        line-height: 1.4
    }

    .ld-cards {
        flex-direction: column;
        gap: 16px
    }

    .ld-bee,
    .ld-call {
        width: 100%
    }

    .ld-bee {
        padding: 32px 16px
    }

    .ld-bee-inner {
        width: 100%
    }

    .ld-bee-img {
        width: 220px;
        height: 220px
    }

    .ld-bee-title {
        white-space: normal;
        text-align: center;
        font-size: 20px
    }

    .ld-bee-status {
        font-size: 15px
    }

    .ld-call {
        gap: 24px;
        padding: 28px 18px
    }

    .ld-intro h3 {
        font-size: 28px
    }

    .ld-intro p {
        font-size: 15px
    }

    .ld-intro p br {
        display: none
    }

    .ld-country {
        padding: 10px 6px 10px 10px;
        font-size: 15px
    }

    .ld-form input {
        font-size: 16px
    }

    .ld-form button {
        padding: 12px 16px;
        font-size: 15px
    }

    .ld-form-note {
        margin-top: -18px
    }

    .ld-direct {
        gap: 10px;
        height: 84px;
        padding: 0 14px 0 10px
    }

    .ld-direct-num b {
        font-size: 18px
    }

    .ld-direct-tap {
        gap: 0;
        font-size: 0
    }

    .fs-head {
        align-items: flex-end
    }

    .fs-heading h2 {
        letter-spacing: -1px;
        font-size: 30px
    }

    .fs-arrows {
        gap: 8px
    }

    .fs-arrow {
        width: 44px;
        height: 44px
    }

    .fs-track {
        gap: 14px;
        margin: 20px -16px 0;
        padding: 6px 16px 20px;
        scroll-padding: 0 16px
    }

    .fs-card {
        width: 300px;
        height: auto;
        padding: 14px 14px 18px
    }

    .fs-visual,
    .fs-visual img {
        width: 270px;
        height: 203px
    }

    .fs-title h3 {
        font-size: 21px
    }

    .fs-text {
        padding-top: 18px;
        padding-bottom: 16px
    }

    .handle,
    .handle-scroller .handle,
    .handle-scroller.is-pinned .handle {
        margin: 0 -16px;
        padding: 36px 16px
    }

    .handle-head h2 {
        white-space: normal;
        font-size: 32px
    }

    .handle-head .lead {
        white-space: normal;
        font-size: 15px
    }

    .handle-row {
        height: auto;
        margin-top: 24px
    }

    .handle-left {
        width: 100%;
        position: relative;
        top: auto
    }
}

@media (min-width:761px) {
    .bento-section {
        padding-left: 0;
        padding-right: 0
    }

    .fs-head {
        padding: 0 max(var(--gutter, 80px), calc(50% - 640px))
    }

    .fs-track {
        padding: 10px max(var(--gutter, 80px), calc(50% - 640px)) 30px;
        scroll-padding: 0 max(var(--gutter, 80px), calc(50% - 640px));
        margin: 28px 0 0
    }

    .fs-progress {
        margin: 0 max(var(--gutter, 80px), calc(50% - 640px))
    }

    .fs-pin.is-pinned .fs {
        top: var(--fs-top, 150px);
        zoom: var(--fs-zoom, 1);
        background: #fff;
        position: sticky
    }

    .fs-pin.is-pinned .fs-track {
        scroll-snap-type: none;
        cursor: default;
        overflow-x: hidden
    }

    .handle-scroller {
        max-width: 1424px;
        margin: 24px auto 0
    }

    .handle,
    .handle-scroller .handle,
    .handle-scroller.is-pinned .handle {
        margin: 0
    }

    .handle-row {
        width: 1296px;
        margin: 40px auto 0
    }

    .handle-right {
        top: 128px
    }
}

:root {
    --hdr-h: 142px
}

.site-header {
    margin-bottom: calc(-1 * var(--hdr-h));
    pointer-events: none;
    background: 0 0
}

.site-header.is-scrolled {
    box-shadow: none
}

.header-bar {
    pointer-events: auto;
    -webkit-backdrop-filter: blur(18px)saturate(160%);
    backdrop-filter: blur(18px)saturate(160%);
    background: #1900416b;
    border: 1px solid #ffffff47;
    transition: background .3s, box-shadow .3s;
    box-shadow: 0 10px 30px -12px #11002b73, inset 0 1px #ffffff1f
}

.site-header.is-scrolled .header-bar {
    background: #19004194;
    box-shadow: 0 14px 36px -14px #11002b8c, inset 0 1px #ffffff1f
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
    .header-bar {
        background: #190041e0
    }
}

@media (min-width:761px) {
    .hero {
        padding-top: calc(var(--section-y) + var(--hdr-h))
    }
}

@media (max-width:1100px) {
    .main-nav {
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        background: #190041eb
    }
}

@media (max-width:760px) {
    :root {
        --hdr-h: 88px
    }

    .hero {
        padding-top: calc(48px + var(--hdr-h))
    }
}

.swipe {
    background: #160439
}

.swipe-head h2 {
    color: #fefefe
}

.swipe-head h2 span {
    color: #ffc300
}

.ba-fit {
    justify-content: center;
    width: 100%;
    max-width: 1211px;
    margin: 0 auto;
    display: flex
}

.ba,
.ba {
    --pos: 50%;
    cursor: ew-resize;
    border-radius: 36px;
    flex: none;
    width: 1211px;
    height: 760px;
    overflow: hidden
}

@media (min-width:761px) {
    .ba {
        border-radius: 36px;
        width: 1211px;
        height: 760px
    }
}

.ba-layer {
    position: absolute;
    inset: 0
}

.ba-before-layer {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0)
}

.ba .ba-photo {
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    border-radius: 36px;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.ba-bubble {
    pointer-events: none;
    opacity: 0;
    border-radius: 64px;
    align-items: center;
    height: 80px;
    padding: 4px;
    transition: opacity .45s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1);
    display: flex;
    position: absolute;
    transform: translateY(10px)scale(.94);
    box-shadow: 0 4px 8px #7e858e14, 0 2px 1px #0102040a
}

.ba-bubble.is-shown {
    opacity: 1;
    transform: none
}

.ba-bubble img {
    border-radius: 50%;
    flex: none;
    width: 72px;
    height: 72px
}

.ba-bubble span {
    width: 244px;
    font-family: var(--f-semi);
    letter-spacing: -.24px;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px
}

.ba-bubble {
    z-index: 2
}

.ba-bubble.w {
    background: #fff
}

.ba-bubble.w img {
    box-shadow: 0 0 5px #4a9f5b80
}

.ba-bubble.w span {
    color: #190041
}

.ba-bubble.b {
    background: #3d295f
}

.ba-bubble.b img {
    box-shadow: 0 0 5px #e4575880
}

.ba-bubble.b span {
    color: #eeecf2
}

.ba-tag {
    font-family: var(--f-semi);
    letter-spacing: -.24px;
    white-space: nowrap;
    pointer-events: none;
    background: #fff;
    border-radius: 24px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    position: absolute
}

.ba-tag.with {
    color: #0bad7f;
    border: 1px solid #e3f7ed
}

.ba-tag.without {
    color: #ff3c69;
    border: 1px solid #ff8080
}

.ba-label {
    display: none
}

.ba-line {
    z-index: 3;
    background: #ffffffd9;
    width: 3px;
    margin-left: -1.5px;
    box-shadow: 0 0 12px #00000040
}

.ba-handle {
    z-index: 4
}

.ba.is-auto .ba-handle {
    animation: 1.6s ease-out infinite baPulse
}

@keyframes baPulse {
    0% {
        box-shadow: 0 0 #ffffff8c, 0 10px 30px #00000040
    }

    to {
        box-shadow: 0 0 0 16px #fff0, 0 10px 30px #00000040
    }
}

.ba-hint {
    left: var(--pos);
    z-index: 4;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: var(--f-semi);
    white-space: nowrap;
    pointer-events: none;
    background: #11002bb3;
    border-radius: 100px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .3s;
    position: absolute;
    bottom: 28px;
    transform: translate(-50%)
}

.ba.is-dragging .ba-hint {
    opacity: 0
}

@media (max-width:760px) {
    .ba-fit {
        max-width: 100%
    }

    .ba {
        aspect-ratio: auto;
        border-radius: 36px
    }

    .ba-handle {
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px
    }
}

.ba.is-small .ba-handle {
    width: calc(64px / var(--baz));
    height: calc(64px / var(--baz));
    margin: calc(-32px / var(--baz)) 0 0 calc(-32px / var(--baz));
    border-width: calc(2px / var(--baz))
}

.ba.is-small .ba-handle svg {
    width: calc(30px / var(--baz));
    height: calc(18px / var(--baz))
}

.ba.is-small .ba-line {
    width: calc(3px / var(--baz))
}

.ba.is-small .ba-tag {
    font-size: calc(12px / var(--baz));
    padding: calc(7px / var(--baz)) calc(11px / var(--baz));
    border-radius: calc(20px / var(--baz));
    line-height: 1.2;
    top: calc(12px / var(--baz)) !important
}

.ba.is-small .ba-tag.without {
    left: calc(12px / var(--baz)) !important
}

.ba.is-small .ba-tag.with {
    right: calc(12px / var(--baz));
    left: auto !important
}

.ba.is-small .ba-bubble {
    display: none
}

.ba.is-small .ba-hint {
    font-size: calc(12px / var(--baz));
    padding: calc(6px / var(--baz)) calc(12px / var(--baz));
    bottom: calc(12px / var(--baz))
}

.ba.is-small .ba-photo,
.ba.is-small {
    border-radius: calc(20px / var(--baz))
}

.ba .ba-bubble img {
    object-fit: cover;
    border-radius: 50%;
    width: 72px;
    height: 72px;
    position: static;
    inset: auto
}

.trusted2-stage {
    border-bottom: 0
}

.trusted2 .trusted-join {
    text-align: center;
    margin-left: auto;
    margin-right: auto
}

@media (min-width:761px) {
    .trusted2 .logo-marquee {
        width: calc(100% - 2 * var(--gutter));
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto
    }

    .trusted2-globe {
        width: 1323px;
        top: -106px;
        left: 682px
    }
}

.fs-card {
    cursor: pointer;
    position: relative
}

.fs-more {
    position: static
}

.fs-more:after {
    content: "";
    z-index: 2;
    border-radius: inherit;
    position: absolute;
    inset: 0
}

.fs-more:focus-visible {
    outline: none
}

.fs-pin.is-pinned .fs-track {
    cursor: default
}

.fs-pin.is-pinned .fs-card {
    cursor: pointer
}

@media (min-width:761px) {
    .handle-scroller {
        background: linear-gradient(#fff 0%, #f6f2ff 14%, #f1eaff 50%, #f6f2ff 86%, #fff 100%);
        max-width: none;
        margin: 24px 0 0
    }

    .handle,
    .handle-scroller .handle,
    .handle-scroller.is-pinned .handle {
        background: 0 0;
        padding-left: 0;
        padding-right: 0
    }
}

.handle-right {
    --app-ink: #190041;
    --app-ink2: #544866;
    --app-mute: #85749f;
    --app-line: #efeaf8;
    --f-app: "Inter", system-ui, sans-serif
}

.dash.app {
    border: 1px solid var(--app-line);
    width: 600px;
    height: 420px;
    font-family: var(--f-app);
    background: #f6f5f8;
    border-radius: 16px;
    display: flex;
    position: absolute;
    top: 0;
    left: 40px;
    overflow: hidden;
    box-shadow: 0 30px 70px -10px #4d269924
}

.app-side {
    background: #190041;
    flex-direction: column;
    flex: none;
    align-items: center;
    gap: 8px;
    width: 64px;
    padding: 14px 0;
    display: flex
}

.app-side>span {
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    transition: background .3s;
    display: flex
}

.app-side>span img {
    max-width: none;
    display: block
}

.app-side>span.on {
    background: #632dba
}

.app-side .app-logo {
    border-radius: 50%;
    margin-bottom: 10px;
    position: relative
}

.app-side .app-logo i {
    background: #00ada3;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 15px
}

.app-col {
    flex-direction: column;
    flex: 1;
    min-width: 0;
    display: flex
}

.app-top {
    border-bottom: 1px solid var(--app-line);
    background: #fff;
    flex: none;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 16px 0 20px;
    display: flex
}

.app-title {
    font-family: var(--f-app);
    color: #2e233e;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    line-height: 20px
}

.app-chip {
    font-family: var(--f-app);
    color: var(--app-ink);
    white-space: nowrap;
    border: 1px solid #e4dcf2;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px
}

.app-top-icons {
    align-items: center;
    gap: 16px;
    margin-left: auto;
    display: flex
}

.app-top-icons img {
    max-width: none;
    display: block
}

.app-me {
    color: #fff;
    width: 26px;
    height: 26px;
    font: 600 10px/26px var(--f-app);
    text-align: center;
    background: #632dba;
    border-radius: 50%
}

.dash-main.app-main {
    flex-direction: column;
    flex: 1;
    gap: 0;
    padding: 16px 16px 0 20px;
    display: flex
}

.app-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    display: grid
}

.app-stat {
    background: #fff;
    border-radius: 12px;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px;
    display: flex
}

.app-stat b {
    font-family: var(--f-app);
    letter-spacing: -.3px;
    font-size: 24px;
    font-weight: 600;
    line-height: 30px
}

.app-stat.s0 b {
    color: #01b89e
}

.app-stat.s1 b {
    color: #fe6893
}

.app-stat.s2 b {
    color: #3e206d
}

.app-stat small {
    font-family: var(--f-app);
    color: var(--app-mute);
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    overflow: hidden
}

.app-label {
    font-family: var(--f-app);
    color: var(--app-mute);
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 15px
}

.app-list {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.app-row {
    background: #fff;
    border: 1px solid #0000;
    border-radius: 12px;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 16px 0 14px;
    transition: border-color .3s, background .3s;
    display: flex
}

.app-row:first-child {
    border-color: #b99ae8
}

.app-row .av {
    color: #fff;
    width: 34px;
    height: 34px;
    font: 700 13px/34px var(--f-app);
    text-align: center;
    border-radius: 50%;
    flex: none
}

.app-row .who {
    flex-direction: column;
    flex: 1;
    gap: 3px;
    min-width: 0;
    display: flex
}

.app-row .who b,
.app-row .who small {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.app-row .who b {
    font-family: var(--f-app);
    color: var(--app-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px
}

.app-row .who small {
    font-family: var(--f-app);
    color: var(--app-mute);
    font-size: 12px;
    font-weight: 400;
    line-height: 15px
}

.app-row .tm {
    font-family: var(--f-app);
    color: #632dba;
    flex: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 15px
}

.app-row .st {
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    display: flex
}

.app-row .st img {
    max-width: none;
    display: block
}

.app-row .st.book {
    background: #01b89e
}

.app-row .st.move {
    background: #632dba
}

.app-row .st.ans {
    background: #85749f
}

.app-row .st.live {
    background: #f24b52
}

.toast.app-toast {
    border: 1px solid var(--app-line);
    font-family: var(--f-app);
    border-radius: 12px;
    gap: 12px;
    padding: 12px 18px 12px 12px;
    top: 394px;
    left: 0;
    box-shadow: 0 20px 40px -8px #4d269933
}

.toast.app-toast .ic {
    background: #632dba;
    border-radius: 50%;
    width: 36px;
    height: 36px
}

.toast.app-toast .ic img {
    display: block
}

.toast.app-toast .tx {
    flex-direction: column;
    gap: 3px;
    display: flex
}

.toast.app-toast b {
    font-family: var(--f-app);
    color: var(--app-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 16px
}

.toast.app-toast small {
    font-family: var(--f-app);
    color: var(--app-mute);
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px
}

.toast.app-toast .gdot {
    background: #01b89e;
    width: 8px;
    height: 8px;
    margin-left: 6px
}

@media (max-width:760px) {
    .dash.app {
        width: 100%;
        height: auto;
        position: relative;
        left: 0
    }

    .app-side {
        gap: 6px;
        width: 52px
    }

    .app-side>span {
        width: 36px;
        height: 36px
    }

    .app-side .app-logo {
        margin-bottom: 6px
    }

    .app-chip,
    .app-top-icons img {
        display: none
    }

    .app-top {
        padding: 0 12px 0 14px
    }

    .dash-main.app-main {
        padding: 12px 12px 44px
    }

    .app-stat {
        padding: 10px
    }

    .app-stat b {
        font-size: 20px;
        line-height: 24px
    }

    .app-stat small {
        font-size: 11px
    }

    .app-row {
        gap: 10px;
        padding: 0 10px
    }

    .app-row .av {
        width: 30px;
        height: 30px;
        font-size: 12px;
        line-height: 30px
    }

    .toast.app-toast {
        top: auto;
        bottom: 0;
        left: 8px
    }
}

.fs-text {
    gap: 12px;
    padding: 24px 4px 0
}

.fs-more {
    color: #632dba;
    gap: 12px;
    margin-left: 4px;
    font-size: 14px;
    line-height: 20px
}

.fs-more-btn {
    width: 44px;
    height: 44px
}

.fs-title h3 {
    letter-spacing: -.6px;
    font-size: 24px;
    line-height: 30px
}

.fs-text p {
    color: #544866;
    font-size: 15px;
    line-height: 24px
}

@media (max-width:760px) {
    .fs-text {
        padding: 18px 2px 0
    }

    .fs-more {
        margin-left: 2px
    }

    .fs-title h3 {
        font-size: 21px;
        line-height: 26px
    }
}

.acc-item.is-open .acc-head {
    gap: 16px;
    padding: 22px 18px 0
}

.acc-item.is-open .acc-tile {
    width: 44px;
    height: 44px
}

.acc-item.is-open .acc-title {
    letter-spacing: -.8px;
    font-size: 26px;
    line-height: 32px
}

.acc-item.is-open .acc-body>div {
    padding: 0 18px 22px
}

.acc-body p {
    color: #efe7ff;
    padding-top: 8px;
    font-size: 15px;
    line-height: 24px
}

@media (max-width:760px) {
    .acc-item.is-open .acc-title {
        font-size: 22px;
        line-height: 28px
    }

    .handle-right,
    .ml-pack {
        top: auto;
        left: auto
    }
}

.sr-only {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
}

.tr3 {
    padding: var(--section-y, 70px) 0 48px;
    background: #fff
}

.tr3-stage {
    isolation: isolate;
    height: 674px;
    position: relative;
    overflow: hidden
}

.tr3-inner {
    width: 1440px;
    height: 100%;
    margin: 0 auto;
    position: relative
}

.tr3-left {
    left: var(--gutter, 80px);
    z-index: 3;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 560px;
    display: flex;
    position: absolute;
    top: 36px
}

.tr3-title {
    font-family: var(--f-xbold);
    letter-spacing: -1.2px;
    color: #190041;
    margin: 0;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.12
}

.tr3-title span {
    color: #632dba
}

.tr3-desc {
    max-width: 470px;
    font-family: var(--f-book);
    color: #66577d;
    margin: -4px 0 0;
    font-size: 18px;
    line-height: 1.6
}

.tr3-impact {
    flex-direction: column;
    gap: 14px;
    padding-top: 8px;
    display: flex
}

.tr3-live {
    font-family: var(--f-gotham);
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #12915e;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px;
    display: inline-flex
}

.tr3-live i {
    background: #12c26d;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 2s ease-out infinite trLive;
    box-shadow: 0 0 #12c26d80
}

@keyframes trLive {
    0% {
        box-shadow: 0 0 #12c26d80
    }

    to {
        box-shadow: 0 0 0 10px #12c26d00
    }
}

.tr3-stats {
    margin: 0;
    display: flex
}

.tr3-stats>div {
    border-left: 1px solid #e4dcf2;
    flex-direction: column;
    gap: 4px;
    padding: 0 28px;
    display: flex
}

.tr3-stats>div:first-child {
    border-left: 0;
    padding-left: 0
}

.tr3-stats dd {
    font-family: var(--f-xbold);
    letter-spacing: -.8px;
    color: #190041;
    white-space: nowrap;
    order: -1;
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 40px
}

.tr3-stats>div:first-child dd {
    color: #632dba
}

.tr3-stats dt {
    font-family: var(--f-book);
    color: #66577d;
    white-space: nowrap;
    font-size: 13px;
    line-height: 18px
}

.tr3-cta {
    margin-top: 8px
}

.tr3 .salon-dot {
    background: #632dba;
    border: 1.5px solid #fff;
    width: 8px;
    height: 8px;
    box-shadow: 0 1px 3px #2d0b7a4d
}

.tr3 .salon-dot:before {
    display: none
}

.tr3 .salon-pin {
    width: 64px;
    height: 64px;
    padding: 3px;
    transition: none;
    box-shadow: 0 0 0 6px #ffffffbf, 0 14px 30px #2d0b7a4d
}

.tr3 .salon-pin img {
    width: 58px;
    height: 58px
}

.tr3 .salon-pin:after {
    display: none
}

.tr3 .salon-pin.is-spot:before {
    content: "";
    border: 2px solid #ffc300e6;
    border-radius: 50%;
    animation: 2.4s ease-out infinite spotPing;
    position: absolute;
    inset: -6px
}

@keyframes spotPing {
    0% {
        opacity: .9;
        transform: scale(1)
    }

    to {
        opacity: 0;
        transform: scale(1.9)
    }
}

.tr3-card {
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
    background: #fff;
    border-radius: 14px;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 16px 12px 14px;
    display: flex;
    position: absolute;
    top: 50%;
    right: calc(100% + 18px);
    transform: translateY(-50%);
    box-shadow: 0 16px 36px -8px #2d0b7a47
}

.tr3-card:after {
    content: "";
    background: #fff;
    border-radius: 2px;
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%)rotate(45deg)
}

.tr3-card b {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px
}

.tr3-card small {
    font-family: var(--f-book);
    color: #66577d;
    font-size: 12.5px;
    line-height: 16px
}

.tr3-card em {
    font-style: normal;
    font-family: var(--f-gotham);
    color: #12915e;
    background: #e3f7ed;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    padding: 3px 9px 3px 7px;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    display: inline-flex
}

.tr3-card em i {
    background: #12c26d;
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.tr3-dock {
    right: var(--gutter, 80px);
    z-index: 4;
    -webkit-backdrop-filter: blur(12px);
    background: #fffffff0;
    border: 1px solid #632dba1f;
    border-radius: 999px;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 16px;
    display: flex;
    position: absolute;
    bottom: 28px;
    overflow: hidden;
    box-shadow: 0 12px 30px -10px #2d0b7a40
}

.tr3-count {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    display: inline-flex
}

.tr3-count i {
    background: #632dba;
    border-radius: 50%;
    width: 8px;
    height: 8px
}

.tr3-nav {
    border-left: 1px solid #e4dcf2;
    align-items: center;
    gap: 6px;
    padding-left: 14px;
    display: inline-flex
}

.tr3-nav button {
    color: #632dba;
    cursor: pointer;
    background: #f3edff;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    transition: background .2s, color .2s;
    display: flex
}

.tr3-nav button:hover,
.tr3-nav button:focus-visible {
    color: #fff;
    background: #632dba;
    outline: none
}

.tr3-now {
    text-align: center;
    min-width: 58px;
    font-family: var(--f-gotham);
    color: #66577d;
    font-size: 13px;
    line-height: 16px
}

.tr3-now b {
    color: #190041;
    font-weight: 700
}

.tr3-bar {
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.tr3-bar i {
    transform-origin: 0;
    background: #632dba;
    width: 100%;
    height: 100%;
    animation: linear forwards trBar;
    display: block
}

.tr3-bar i.hold {
    animation-play-state: paused
}

@keyframes trBar {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

.tr3-logos {
    max-width: 1280px;
    padding: 0 var(--gutter, 80px);
    box-sizing: content-box;
    align-items: center;
    gap: 40px;
    margin: 36px auto 0;
    display: flex
}

.tr3-logos-label {
    font-family: var(--f-semi);
    color: #66577d;
    white-space: nowrap;
    flex: none;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px
}

.tr3 .logo-marquee {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000)
}

.tr3 .marquee-track {
    zoom: .62
}

.tr3 .marquee-set img {
    filter: grayscale();
    opacity: .55;
    transition: filter .3s, opacity .3s
}

.tr3 .marquee-set img:hover {
    filter: none;
    opacity: 1
}

@media (prefers-reduced-motion:reduce) {
    .tr3-bar {
        display: none
    }

    .tr3 .salon-pin.is-spot:before,
    .tr3-live i {
        animation: none
    }
}

@media (max-width:760px) {
    .tr3 {
        padding: 48px 0 32px
    }

    .tr3-stage {
        height: auto
    }

    .tr3-inner {
        width: 100%;
        padding: 0 16px
    }

    .tr3-left {
        gap: 18px;
        width: 100%;
        position: relative;
        top: auto;
        left: auto
    }

    .tr3-title {
        letter-spacing: -.8px;
        font-size: 34px
    }

    .tr3-desc {
        font-size: 16px
    }

    .tr3-stats {
        width: 100%
    }

    .tr3-stats>div {
        flex: 1;
        min-width: 0;
        padding: 0 10px
    }

    .tr3-stats dd {
        font-size: 22px;
        line-height: 28px
    }

    .tr3-stats dt {
        white-space: normal;
        font-size: 11px;
        line-height: 14px
    }

    .tr3-map {
        margin: 8px -16px 0;
        overflow: hidden
    }

    .tr3 .trusted2-globe {
        width: 125%;
        margin: 0 0 -45%;
        top: 0;
        left: 8%;
        position: relative !important
    }

    .tr3 .salon-pin {
        width: 52px;
        height: 52px
    }

    .tr3 .salon-pin img {
        width: 46px;
        height: 46px
    }

    .tr3-card {
        padding: 10px 12px;
        inset: auto auto calc(100% + 16px) 50%;
        transform: translate(-50%)
    }

    .tr3-card:after {
        inset: auto auto -6px 50%;
        transform: translate(-50%)rotate(45deg)
    }

    .tr3-dock {
        width: max-content;
        max-width: 100%;
        margin: 16px auto 0;
        position: relative;
        bottom: auto;
        right: auto
    }

    .tr3-count {
        font-size: 13px
    }

    .tr3-logos {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        margin-top: 28px;
        padding: 0 16px
    }

    .tr3-logos-label {
        text-align: center
    }
}

.fs-card:before {
    content: "";
    z-index: -1;
    border-radius: inherit;
    background: #632dba;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    inset: 0;
    transform: translateY(101%)
}

.fs-title h3,
.fs-text p,
.fs-more {
    transition: color .35s
}

.fs-icon {
    transition: transform .3s, background .35s, box-shadow .35s, color .35s
}

.fs-more-btn path {
    transition: stroke .35s
}

.fs-card.is-active,
.fs-card:focus-within {
    border-color: #632dba;
    box-shadow: 0 26px 52px -14px #632dba80
}

.fs-card.is-active:before,
.fs-card:focus-within:before {
    transform: translateY(0)
}

.fs-card.is-active .fs-title h3,
.fs-card:focus-within .fs-title h3 {
    color: #fff
}

.fs-card.is-active .fs-text p,
.fs-card:focus-within .fs-text p {
    color: #efe7ff
}

.fs-card.is-active .fs-icon,
.fs-card:focus-within .fs-icon {
    background: #ffffff29;
    box-shadow: inset 0 0 0 1px #ffffff47
}

.fs-icon {
    color: #632dba
}

.fs-card.is-active .fs-icon,
.fs-card:focus-within .fs-icon,
.fs-card.is-active .fs-more,
.fs-card:focus-within .fs-more {
    color: #fff
}

.fs-card.is-active .fs-more-btn,
.fs-card:focus-within .fs-more-btn {
    background: #fff
}

.fs-card.is-active .fs-more-btn path,
.fs-card:focus-within .fs-more-btn path {
    stroke: #632dba
}

.fs-card:has(.fs-more:focus-visible) {
    outline-offset: 3px;
    outline: 3px solid #ffc300
}

@media (prefers-reduced-motion:reduce) {
    .fs-card:before {
        transition: none
    }
}

.fs-card:hover,
.fs-card:hover .fs-visual img,
.fs-card:hover .fs-icon {
    transform: none
}

.fs-card.is-active {
    transform: translateY(-6px)
}

.fs-card.is-active .fs-visual img {
    transform: scale(1.04)
}

.fs-card.is-active .fs-icon {
    transform: rotate(-6deg)scale(1.06)
}

@media (prefers-reduced-motion:reduce) {
    .fs-card.is-active {
        transform: none
    }
}

.acc-tile {
    background: #f3edff
}

.acc-item.is-open .acc-tile {
    color: #fff;
    background: #fff3;
    border: 1px solid #ffffff4d;
    width: 48px;
    height: 48px
}

.tr3-logos {
    flex-direction: column;
    align-items: stretch;
    gap: 20px
}

.tr3-logos-label {
    text-align: center;
    font-family: var(--f-book, inherit);
    color: #190041;
    font-weight: 400
}

.tr3-logos .logo-marquee {
    width: 100%
}

.ip {
    color: #190041;
    background: #fff url(../public/assets/int/page-bg.webp) top/100% 100% no-repeat
}

.ip h1,
.ip h2,
.ip h3,
.ip h4,
.ip p {
    margin: 0
}

.ip ul,
.ip ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.ip-eyebrow,
.ip-label {
    font-family: var(--f-gotham);
    letter-spacing: .12em;
    color: #632dba;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700
}

.ip-label {
    letter-spacing: .1em
}

.ip-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    display: flex
}

.ip-head h2 {
    font-family: var(--f-xbold);
    color: #190041;
    font-weight: 800
}

.ip-head h2 span {
    color: #632dba
}

.ip-ico {
    background: #f3edff;
    border-radius: 22px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    display: inline-flex
}

.ip-ico img {
    width: 20px;
    height: 20px
}

.ip-hero {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 70px 32px;
    display: flex
}

.ip-hero-text {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: min(796px, 100%);
    padding-top: 14px;
    display: flex
}

.ip-hero h1 {
    font-family: var(--f-xbold);
    letter-spacing: -.02em;
    color: #190041;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.12
}

.ip-redline {
    width: 96.7%;
    height: 12px;
    margin-top: -4px
}

.ip-hero-text>p {
    color: #544a73;
    max-width: 660px;
    font-size: 16px;
    line-height: 1.55
}

.ip-hero-btns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    display: flex
}

.ip-btn-primary,
.ip-btn-secondary {
    font-family: var(--f-gotham);
    border-radius: 12px;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.ip-btn-primary {
    color: #fff;
    background: #632dba;
    padding: 14px 18px 14px 22px
}

.ip-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px #632dba4d
}

.ip-btn-secondary {
    color: #632dba;
    border: 1.5px solid #ccbdf2;
    padding: 12.5px 18px
}

.ip-hero-logos {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    display: flex
}

.ip-hero-logos li {
    background: #fff;
    border: 1px solid #632dba26;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    transition: transform .25s;
    display: flex;
    box-shadow: 0 6px 9px -2px #0000001a, 0 2.5px 4px -2.5px #0000001a
}

.ip-hero-logos li:hover {
    transform: translateY(-3px)
}

.ip-hero-logos img {
    object-fit: contain;
    width: 32px;
    height: 32px
}

.ip-sched {
    box-sizing: border-box;
    flex-direction: column;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 88px;
    scroll-margin-top: 150px;
    display: flex
}

.ip-intro,
.ip-group-head {
    flex-direction: column;
    gap: 18px;
    max-width: 800px;
    display: flex
}

.ip-group-head {
    gap: 16px;
    max-width: 600px
}

.ip-intro h2,
.ip-group-head h2,
.ip-split-txt h2 {
    font-family: var(--f-semi);
    letter-spacing: -.03em;
    color: #292332;
    font-size: 42px;
    font-weight: 600;
    line-height: 1.15
}

.ip-intro p:not(.ip-label),
.ip-group-head p:not(.ip-label),
.ip-split-txt>p:not(.ip-label) {
    color: #696370;
    font-size: 15px;
    line-height: 1.55
}

.ip-controls {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    display: flex
}

.ip-tabs {
    background: #fff;
    border: 1px solid #eee7fa;
    border-radius: 999px;
    gap: 6px;
    padding: 6px;
    display: flex
}

.ip-tabs button {
    cursor: pointer;
    font-family: var(--f-semi);
    color: #66577d;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    transition: background .25s, color .25s
}

.ip-tabs button:hover {
    color: #632dba
}

.ip-tabs button.is-on {
    color: #fff;
    background: #632dba
}

.ip-search {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e4dcf2;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    width: 340px;
    max-width: 100%;
    height: 50px;
    padding: 0 18px 0 16px;
    transition: border-color .2s, box-shadow .2s;
    display: flex
}

.ip-search:focus-within {
    border-color: #632dba;
    box-shadow: 0 0 0 3px #632dba1f
}

.ip-search img {
    flex: none;
    width: 18px;
    height: 18px
}

.ip-search input {
    min-width: 0;
    font-family: var(--f-book);
    color: #190041;
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 15px
}

.ip-search input::placeholder {
    color: #a99bc0
}

.ip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid
}

.ip-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6e1e9;
    border-radius: 16px;
    flex-direction: column;
    gap: 18px;
    min-height: 313px;
    padding: 28px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    display: flex
}

.ip-card:hover {
    border-color: #ccbdf2;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px #4d269938
}

.ip-card-id {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    height: 48px;
    display: flex
}

.ip-card-id img {
    object-fit: contain;
    object-position: left center;
    width: auto;
    max-width: 250px;
    height: 48px
}

.ip-badge {
    font-family: var(--f-gotham);
    color: #632dba;
    background: #632dba26;
    border-radius: 100px;
    flex: none;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 13px
}

.ip-card h3 {
    font-family: var(--f-semi);
    color: #292332;
    font-size: 23px;
    font-weight: 600;
    line-height: 28px
}

.ip-tags {
    flex-wrap: wrap;
    gap: 8px;
    display: flex
}

.ip-tags li {
    color: #696370;
    background: #f7f5f1;
    border-radius: 5px;
    padding: 5px 9px;
    font-size: 11px;
    line-height: 13px
}

.ip-card p {
    color: #696370;
    font-size: 15px;
    line-height: 1.53
}

.ip-explore {
    font-family: var(--f-semi);
    color: #632dba;
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none
}

.ip-explore:hover {
    text-underline-offset: 3px;
    text-decoration: underline
}

.ip-group {
    flex-direction: column;
    gap: 24px;
    display: flex
}

.ip-row {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    display: grid
}

.ip-mini {
    background: linear-gradient(-78.6deg, #8ec5fc24 0%, #e0c3fc33 100%), #fff;
    border: 1px solid #ece7f6;
    border-radius: 22px;
    padding: 14px 14px 18px;
    transition: transform .3s, box-shadow .3s
}

.ip-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -16px #4d269938
}

.ip-mini-vis {
    aspect-ratio: 215/161;
    border-radius: 14px;
    overflow: hidden
}

.ip-mini-vis img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.ip-mini-txt {
    flex-direction: column;
    gap: 8px;
    padding: 16px 4px 0;
    display: flex
}

.ip-mini h4 {
    font-family: var(--f-semi);
    color: #190041;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    line-height: 20px;
    display: flex
}

.ip-mini h4 img {
    flex: none;
    width: 32px;
    height: 32px
}

.ip-mini p {
    color: #544a73;
    font-size: 13px;
    line-height: 19px
}

.ip-empty {
    text-align: center;
    color: #66577d;
    border: 1px dashed #ccbdf2;
    border-radius: 16px;
    padding: 24px
}

.ip-request {
    box-sizing: border-box;
    background: #ffc300;
    border-radius: 36px;
    justify-content: flex-end;
    min-height: 358px;
    padding-top: 90px;
    display: flex;
    position: relative;
    overflow: hidden
}

.ip-request-bee {
    pointer-events: none;
    width: 497px;
    height: auto;
    position: absolute;
    top: 7px;
    left: 10px
}

.ip-request-card {
    box-sizing: border-box;
    background: #632dba;
    border-radius: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 733px;
    max-width: 100%;
    min-height: 268px;
    padding: 32px 36px;
    display: flex;
    position: relative
}

.ip-request-card h2 {
    font-family: var(--f-xbold);
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 56px
}

.ip-request-card p {
    color: #dee2e6;
    max-width: 463px;
    font-size: 16px;
    line-height: 26px
}

.ip-btn-red {
    color: #fff;
    font-family: var(--f-semi);
    background: #ff4856;
    border-radius: 16px;
    padding: 14px 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s
}

.ip-btn-red:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px #ff485659
}

.ip-request-obj {
    pointer-events: none;
    width: 122px;
    height: auto;
    position: absolute;
    bottom: 0;
    right: 40px
}

.ip-split {
    background: #fff;
    justify-content: center;
    align-items: center;
    gap: 72px;
    padding: 70px 88px 40px;
    display: flex
}

.ip-split.rev {
    padding: 40px 88px
}

.ip-split-txt {
    flex-direction: column;
    gap: 24px;
    width: 520px;
    display: flex
}

.ip-split.rev .ip-split-txt {
    width: 643px
}

.ip-split-txt:has(.ip-benefits) {
    width: 590px
}

.ip-split-vis {
    flex: none;
    height: auto
}

.ip-sync .ip-split-vis {
    width: 587px;
    margin: -10px 0 -30px -60px
}

.ip-split.rev .ip-split-vis {
    width: 579px;
    margin: 0 -38px -54px 0
}

.ip-omni .ip-split-vis {
    width: 553px
}

.ip-check {
    background: #3bb58133;
    border-radius: 16px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 21px;
    height: 22px;
    display: inline-flex
}

.ip-detail {
    flex-direction: column;
    gap: 8px;
    display: flex
}

.ip-detail h3 {
    font-family: var(--f-semi);
    color: #292332;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    display: flex
}

.ip-detail p {
    color: #696370;
    font-size: 15px;
    line-height: 1.55
}

.ip-benefits {
    flex-direction: column;
    gap: 18px;
    display: flex
}

.ip-benefits li {
    color: #292332;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    display: flex
}

.ip-faq {
    background: #fff;
    justify-content: center;
    align-items: flex-start;
    gap: 64px;
    padding: 70px 80px;
    display: flex
}

.ip-faq-intro {
    flex-direction: column;
    flex: none;
    gap: 16px;
    width: 380px;
    display: flex;
    position: sticky;
    top: 170px
}

.ip-faq-intro h2 {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1
}

.ip-faq-intro>p {
    color: #66577d;
    font-size: 16px;
    line-height: 1.6
}

.ip-faq-intro .help-card {
    margin-top: 0
}

.ip-qs {
    flex-direction: column;
    gap: 12px;
    width: 836px;
    min-width: 0;
    display: flex
}

.ip-q {
    background: #fff;
    border: 1px solid #eee7fa;
    border-radius: 18px;
    transition: background .3s, border-color .3s
}

.ip-q.is-open {
    background: #faf7ff;
    border-color: #d9c7ff
}

.ip-q button {
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: var(--f-semi);
    color: #190041;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-size: 17px;
    font-weight: 600;
    line-height: 21px;
    display: flex
}

.ip-q button span {
    flex: 1
}

.ip-q button i {
    background: #f3edff;
    border-radius: 15px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    transition: transform .3s;
    display: inline-flex
}

.ip-q.is-open button i {
    transform: rotate(180deg)
}

.ip-a {
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s;
    display: grid
}

.ip-a>div {
    overflow: hidden
}

.ip-q.is-open .ip-a {
    grid-template-rows: 1fr
}

.ip-a p {
    color: #3d2860;
    padding: 0 24px 20px;
    font-size: 15px;
    line-height: 1.65
}

@media (max-width:1280px) {
    .ip-split {
        gap: 48px;
        padding-left: 48px;
        padding-right: 48px
    }

    .ip-sched {
        padding: 80px 48px
    }

    .ip-row {
        grid-template-columns: repeat(3, 1fr)
    }

    .ip-split-vis {
        width: min(48%, 587px) !important;
        margin: 0 !important
    }
}

@media (max-width:1024px) {
    .ip-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .ip-split,
    .ip-split.rev {
        flex-direction: column;
        padding: 56px 32px
    }

    .ip-split.rev .ip-split-vis {
        order: 2
    }

    .ip-split-txt,
    .ip-split.rev .ip-split-txt,
    .ip-split-txt:has(.ip-benefits) {
        width: 100%
    }

    .ip-split-vis {
        width: min(100%, 560px) !important
    }

    .ip-faq {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 56px 32px
    }

    .ip-faq-intro {
        width: 100%;
        position: static
    }

    .ip-qs {
        width: 100%
    }

    .ip-request-bee {
        width: 300px;
        top: -30px;
        left: -10px
    }

    .ip-request {
        padding-top: 200px
    }
}

@media (max-width:760px) {
    .ip-hero {
        gap: 32px;
        padding: 40px 16px
    }

    .ip-hero h1 {
        font-size: 36px
    }

    .ip-sched {
        gap: 28px;
        padding: 56px 16px
    }

    .ip-intro h2,
    .ip-group-head h2,
    .ip-split-txt h2 {
        font-size: 30px
    }

    .ip-tabs {
        max-width: 100%;
        overflow-x: auto
    }

    .ip-tabs button {
        white-space: nowrap;
        padding: 9px 14px
    }

    .ip-search {
        width: 100%
    }

    .ip-grid {
        grid-template-columns: 1fr
    }

    .ip-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px
    }

    .ip-request {
        padding: 150px 12px 12px
    }

    .ip-request-bee {
        width: 210px;
        top: -20px;
        left: 0
    }

    .ip-request-card {
        padding: 28px 22px
    }

    .ip-request-obj {
        width: 80px;
        right: 16px
    }

    .ip-split,
    .ip-split.rev {
        padding: 40px 16px
    }

    .ip-faq {
        padding: 48px 16px
    }

    .ip-faq-intro h2 {
        font-size: 32px
    }

    .ip-faq-intro .help-card {
        max-width: none
    }

    .ip-q button {
        padding: 18px;
        font-size: 16px
    }

    .ip-a p {
        padding: 0 18px 18px
    }
}

@media (max-width:480px) {
    .ip-row {
        grid-template-columns: 1fr
    }
}

.fcta-int .fcta-copy h2 {
    font-size: 48px;
    line-height: 1.2
}

.fcta-btns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    display: flex
}

.fcta-int .fcta-btn {
    font-family: var(--f-semi);
    text-transform: none;
    padding: 19px 39px;
    font-weight: 600
}

.fcta-btn.ghost {
    color: #fff;
    background: 0 0;
    border-color: #fff
}

.fcta-btn.ghost:hover {
    box-shadow: none;
    background: #ffffff14
}

@media (max-width:760px) {
    .fcta-int .fcta-copy h2 {
        font-size: 30px
    }

    .fcta-int .fcta-copy p {
        white-space: normal
    }
}

.int-btn-wrap {
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    display: flex
}

.int-visual {
    transition: transform .35s;
    display: block
}

.int-visual:hover {
    transform: scale(1.015)
}

.ip {
    padding-top: var(--hdr-h);
    background: linear-gradient(#11002b, #11002b) top / 100% var(--hdr-h) no-repeat, url(../public/assets/int/page-bg.webp) 0 var(--hdr-h) / 100% calc(100% - var(--hdr-h)) no-repeat, #fff
}

.ip-tabs {
    scrollbar-width: none
}

.ip-tabs::-webkit-scrollbar {
    display: none
}

@media (max-width:760px) {
    .ip-request-card h2 {
        font-size: 32px;
        line-height: 1.15
    }
}

.ip-grid {
    gap: 15px
}

.ip-tele {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    display: grid
}

.ip-tcard {
    background: #fff;
    border: 1px solid #e6e1e9;
    border-radius: 16px;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    display: flex
}

.ip-tcard:hover {
    border-color: #ccbdf2;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px #4d269938
}

.ip-tcard-vis {
    align-items: center;
    height: 120px;
    display: flex
}

.ip-tcard-vis img {
    width: auto;
    max-height: 120px;
    transition: transform .35s
}

.ip-tcard:hover .ip-tcard-vis img {
    transform: scale(1.05)rotate(-2deg)
}

.ip-tcard h3 {
    font-family: var(--f-semi);
    letter-spacing: -.8px;
    color: #190041;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2
}

.ip-tcard p {
    color: #696370;
    font-size: 15px;
    line-height: 1.55
}

.ip-stories {
    background: #fff;
    justify-content: center;
    gap: 15px;
    padding: 40px 20px;
    display: flex
}

.ip-story {
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    background: #3d295f;
    border-radius: 50px;
    flex-direction: column;
    align-items: center;
    width: 785px;
    min-height: 600px;
    padding: 67px 60px 50px;
    display: flex
}

.ip-story h2 {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px
}

.ip-story-body {
    flex-direction: column;
    flex: 1;
    align-items: center;
    padding-top: 59px;
    animation: .5s ip-fade;
    display: flex
}

@keyframes ip-fade {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }
}

.ip-story-logo {
    justify-content: center;
    align-items: center;
    height: 70px;
    display: flex
}

.ip-story-logo img {
    max-width: 223px;
    max-height: 70px
}

.ip-story-logo span {
    font-family: var(--f-semi);
    letter-spacing: .08em;
    color: #e6dfd9;
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 600
}

.ip-story blockquote {
    max-width: 551px;
    font-family: "Inter", var(--f-book);
    color: #fff;
    margin: 34px 0 0;
    padding: 0 34px;
    font-size: 16px;
    line-height: 28px;
    position: relative
}

.ip-story blockquote:before,
.ip-story blockquote:after {
    color: #ff3c69;
    font-family: Georgia, serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
    position: absolute
}

.ip-story blockquote:before {
    content: "“";
    top: 0;
    left: 0
}

.ip-story blockquote:after {
    content: "”";
    bottom: -18px;
    right: 0
}

.ip-story-name {
    font-family: var(--f-semi);
    color: #f2a62e;
    font-size: 18px;
    font-weight: 600;
    margin-top: 51px !important
}

.ip-story-place {
    color: #fff;
    font-size: 16px;
    font-style: italic;
    margin-top: 9px !important
}

.ip-dots {
    gap: 10px;
    margin-top: 30px;
    display: flex
}

.ip-dots button {
    cursor: pointer;
    background: #ffffff69;
    border: 0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    padding: 0;
    transition: background .25s, transform .25s
}

.ip-dots button.is-on {
    background: #fff;
    transform: scale(1.15)
}

.ip-video {
    cursor: pointer;
    color: #fff;
    background: #11002b url(../public/assets/int/video-bg.webp) 50%/cover no-repeat;
    border: 0;
    border-radius: 50px;
    flex-direction: column;
    align-items: center;
    width: 557px;
    min-height: 600px;
    padding: 143px 0 0;
    display: flex;
    position: relative;
    overflow: hidden
}

.ip-video-intro {
    font-family: var(--f-book);
    font-size: 30px;
    line-height: 35px
}

.ip-video-word {
    width: 345px;
    height: auto;
    margin-top: 23px
}

.ip-video-play {
    box-sizing: border-box;
    background: #ffb600;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    margin-top: 44px;
    padding-left: 8px;
    transition: transform .25s;
    animation: 2.4s ease-out infinite ip-pulse;
    display: flex;
    box-shadow: 0 0 #ffb60080
}

.ip-video:hover .ip-video-play {
    transform: scale(1.08)
}

@keyframes ip-pulse {
    70% {
        box-shadow: 0 0 0 22px #ffb60000
    }

    to {
        box-shadow: 0 0 #ffb60000
    }
}

@media (max-width:1280px) {
    .ip-tele {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:1024px) {
    .ip-stories {
        flex-direction: column;
        align-items: center
    }

    .ip-story,
    .ip-video {
        width: 100%;
        max-width: 785px
    }

    .ip-video {
        min-height: 460px;
        padding-top: 100px
    }
}

@media (max-width:760px) {
    .ip-tele {
        grid-template-columns: 1fr
    }

    .ip-stories {
        gap: 14px;
        padding: 32px 16px
    }

    .ip-story {
        border-radius: 32px;
        min-height: 0;
        padding: 40px 20px 32px
    }

    .ip-story h2 {
        font-size: 28px;
        line-height: 1.2
    }

    .ip-story-body {
        padding-top: 32px
    }

    .ip-story blockquote {
        padding: 0 26px;
        font-size: 15px;
        line-height: 25px
    }

    .ip-story-name {
        margin-top: 32px !important
    }

    .ip-video {
        border-radius: 32px;
        min-height: 380px;
        padding-top: 80px
    }

    .ip-video-intro {
        font-size: 22px
    }

    .ip-video-word {
        width: 230px
    }

    .ip-video-play {
        width: 80px;
        height: 80px;
        margin-top: 32px
    }
}

.ip-hero {
    background: #190041;
    padding: 40px 32px 70px
}

.ip-hero h1 {
    color: #fff
}

.ip-hero h1 span {
    color: #ffc300
}

.ip-hero-text>p {
    color: #8a8299
}

.ip-btn-primary {
    color: #190041;
    background: #ffc300
}

.ip-btn-primary:hover {
    box-shadow: 0 10px 24px #ffc30059
}

.ip-btn-secondary {
    color: #ffc300;
    border-color: #ffc300
}

.ip-btn-secondary:hover {
    background: #ffc3001a
}

.ip-hero-logos {
    align-items: flex-start;
    gap: 24px;
    min-height: 98px
}

.ip-hero-logos li {
    box-sizing: border-box;
    width: 74px;
    height: 74px
}

.ip-hero-logos li:nth-child(2n) {
    margin-top: 24px
}

.ip-tele {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 408px;
    align-items: stretch;
    gap: 16px;
    margin-top: 0
}

.ip-tcard {
    gap: 16px
}

.ip-plan {
    background: #3bb581;
    border-radius: 24px;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 340px;
    margin-top: -27px;
    display: flex;
    position: relative
}

.ip-plan-art {
    pointer-events: none;
    width: 262px;
    height: auto;
    transition: transform .4s;
    position: absolute;
    top: -151px;
    left: -6px
}

.ip-plan:hover .ip-plan-art {
    transform: translateY(-6px)rotate(-1deg)
}

.ip-plan-card {
    box-sizing: border-box;
    text-align: center;
    background: #632dba;
    border-radius: 32px 32px 24px 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 264px;
    padding: 16px 24px;
    display: flex;
    position: relative;
    box-shadow: 0 20px 50px #1900401a
}

.ip-plan-card h3 {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 28px
}

.ip-plan-card h3 span {
    color: #ffc300
}

.ip-plan-card p {
    color: #dee2e6;
    font-size: 16px;
    line-height: 26px
}

.ip-plan-btn {
    color: #190041;
    font-family: var(--f-book);
    background: #ffc300;
    border-radius: 12px;
    padding: 16px 24px 12px;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s
}

.ip-plan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px #ffc30059
}

@media (max-width:1280px) {
    .ip-tele {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .ip-plan {
        grid-column: 1/-1;
        margin-top: 150px
    }

    .ip-plan-art {
        left: 20px
    }
}

@media (max-width:760px) {
    .ip-hero-logos {
        gap: 12px
    }

    .ip-hero-logos li {
        width: 60px;
        height: 60px
    }

    .ip-hero-logos li:nth-child(2n) {
        margin-top: 0
    }

    .ip-tele {
        grid-template-columns: 1fr
    }

    .ip-plan {
        margin-top: 140px
    }

    .ip-plan-art {
        width: 200px;
        margin-left: -100px;
        top: -116px;
        left: 50%
    }
}

.ip {
    background: linear-gradient(#190041, #190041) top / 100% calc(var(--hdr-h) + 12px) no-repeat, url(../public/assets/int/page-bg.webp) 0 calc(var(--hdr-h) + 12px) / 100% calc(100% - var(--hdr-h) - 12px) no-repeat, #fff
}

.gs2 {
    background: #fff;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 70px 120px;
    scroll-margin-top: 120px;
    display: flex
}

.gs2-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    display: flex
}

.gs2-head h2 {
    font-family: var(--f-xbold);
    letter-spacing: -.025em;
    color: #190041;
    margin: 0;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.3
}

.gs2-head h2 em {
    color: #632dba;
    font-style: normal
}

.gs2-head p {
    color: #66577d;
    margin: 0;
    font-size: 18px;
    line-height: 1.6
}

.gs2-tabs {
    box-sizing: border-box;
    background: #faf7ff;
    border: 1px solid #eee7fa;
    border-radius: 28px;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 1200px;
    padding: 10px;
    display: flex
}

.gs2-tab-slot {
    flex: 0 auto;
    align-items: center;
    gap: 6px;
    display: flex
}

.gs2-tab-slot:not(:first-child) {
    flex: auto
}

.gs2-link {
    border-top: 1.5px dashed #ffa300;
    flex: 1;
    min-width: 24px;
    height: 0;
    margin: 0 4px;
    position: relative
}

.gs2-link:before,
.gs2-link:after {
    content: "";
    background: #ffa300;
    border-radius: 50%;
    width: 6px;
    height: 6px;
    position: absolute;
    top: -3.75px
}

.gs2-link:before {
    left: -3px
}

.gs2-link:after {
    right: -3px
}

.gs2-tab {
    cursor: pointer;
    font: inherit;
    background: 0 0;
    border: 0;
    border-radius: 14px;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 12px 8px 12px 6px;
    transition: background .35s, padding .35s, border-radius .35s, box-shadow .35s;
    display: flex
}

.gs2-tab:hover:not(.on) {
    background: #f3edff
}

.gs2-tab:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #632dba
}

.gs2-ic {
    color: #632dba;
    background: #eee7fa;
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    transition: background .35s;
    display: flex
}

.gs2-ic svg {
    width: 24px;
    height: 24px;
    transition: width .35s, height .35s
}

.gs2-n {
    font-family: var(--f-gotham);
    color: #66577d;
    font-size: 13px;
    font-weight: 700;
    line-height: 16px
}

.gs2-t {
    font-family: var(--f-semi);
    color: #190041;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px
}

.gs2-tab.on {
    background: #632dba;
    border-radius: 74px;
    padding: 12px 72px 12px 12px;
    box-shadow: 0 12px 28px -10px #632dba8c
}

.gs2-tab.on .gs2-ic {
    background: #fff
}

.gs2-tab.on .gs2-ic svg {
    width: 32px;
    height: 32px
}

.gs2-tab.on .gs2-n {
    color: #ffffffbf
}

.gs2-tab.on .gs2-t {
    color: #fff
}

.gs2-panel {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #eee7fa;
    border-radius: 32px;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1200px;
    padding: 16px;
    display: flex;
    box-shadow: 0 24px 60px #1a00400f
}

.gs2-content {
    box-sizing: border-box;
    flex-direction: column;
    flex: none;
    align-items: flex-start;
    width: 510px;
    padding: 72px 16px 72px 56px;
    animation: .5s both gs2-in;
    display: flex
}

@keyframes gs2-in {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }
}

.gs2-badge {
    font-family: var(--f-gotham);
    letter-spacing: .12em;
    color: #632dba;
    background: #eee7fa;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    line-height: 14px
}

.gs2-content h3 {
    font-family: var(--f-xbold);
    letter-spacing: -.02em;
    color: #190041;
    margin: 22px 0 0;
    font-size: 54px;
    font-weight: 800;
    line-height: 1
}

.gs2-lead {
    color: #66577d;
    max-width: 438px;
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.6
}

.gs2-points {
    flex-direction: column;
    gap: 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: flex
}

.gs2-points li {
    font-family: var(--f-semi);
    color: #190041;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 21px;
    display: flex
}

.gs2-check {
    background: #e3f5ec;
    border-radius: 999px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 19px;
    display: inline-flex
}

.gs2-cta {
    color: #fff;
    font-family: var(--f-semi);
    background: #190041;
    border-radius: 999px;
    align-items: center;
    gap: 16px;
    margin-top: 44px;
    padding: 8px 8px 8px 26px;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex
}

.gs2-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px #1900418c
}

.gs2-arrow {
    background: #ffc300;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    transition: transform .25s;
    display: inline-flex
}

.gs2-cta:hover .gs2-arrow {
    transform: rotate(45deg)
}

.gs2-visual {
    aspect-ratio: 640/600;
    background: linear-gradient(-80deg, #8ec5fc33, #e0c3fc33);
    border-radius: 24px;
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden
}

.gs2-visual img {
    object-fit: cover;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .5s, transform .6s;
    position: absolute;
    inset: 0;
    transform: scale(1.03)
}

.gs2-visual img.on {
    opacity: 1;
    transform: none
}

@media (max-width:1280px) {
    .gs2 {
        padding: 70px var(--gutter, 48px)
    }

    .gs2-head h2 {
        font-size: 52px
    }

    .gs2-content {
        width: 44%;
        padding: 48px 16px 48px 32px
    }

    .gs2-tab.on {
        padding-right: 32px
    }
}

@media (max-width:1024px) {
    .gs2-tabs {
        scrollbar-width: none;
        justify-content: flex-start;
        overflow-x: auto
    }

    .gs2-tabs::-webkit-scrollbar {
        display: none
    }

    .gs2-link {
        min-width: 28px
    }

    .gs2-panel {
        flex-direction: column;
        align-items: stretch
    }

    .gs2-content {
        width: 100%;
        padding: 32px 20px 12px
    }

    .gs2-visual {
        flex: none;
        width: 100%
    }
}

@media (max-width:760px) {
    .gs2 {
        gap: 28px;
        padding: 48px 16px
    }

    .gs2-head h2 {
        font-size: 34px;
        line-height: 1.2
    }

    .gs2-head p {
        font-size: 16px
    }

    .gs2-tabs {
        border-radius: 22px;
        padding: 6px
    }

    .gs2-tab {
        gap: 8px;
        padding: 6px
    }

    .gs2-tab .gs2-n,
    .gs2-tab:not(.on) .gs2-t {
        display: none
    }

    .gs2-ic {
        width: 44px;
        height: 44px
    }

    .gs2-content h3 {
        font-size: 38px
    }

    .gs2-lead {
        font-size: 16px
    }

    .gs2-points li {
        font-size: 15px
    }

    .gs2-cta {
        margin-top: 28px;
        font-size: 16px
    }

    .gs2-tabs {
        justify-content: space-between;
        overflow: visible
    }

    .gs2-tab .gs2-t {
        display: none
    }

    .gs2-tab.on {
        padding: 6px
    }

    .gs2-link {
        min-width: 10px;
        margin: 0 2px
    }
}

.ph {
    background: linear-gradient(#11002b, #11002b) top / 100% calc(var(--hdr-h) + 12px) no-repeat, url(../public/assets/int/page-bg.webp) 0 calc(var(--hdr-h) + 12px) / 100% calc(100% - var(--hdr-h) - 12px) no-repeat, #fff
}

.ph h1,
.ph h2,
.ph h3,
.ph p {
    margin: 0
}

.ph-hero {
    text-align: center;
    background: #11002b;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 70px 32px;
    display: flex
}

.ph-lockup {
    width: 519px;
    max-width: 90%;
    height: auto;
    margin-bottom: 16px
}

.ph-hero h1 {
    font-family: var(--f-semi);
    color: #fff;
    font-size: 59px;
    font-weight: 600;
    line-height: 69px
}

.ph-hero h1 span {
    color: #ffc300
}

.ph-redline {
    width: 934px;
    max-width: 100%;
    height: auto
}

.ph-hero>p {
    color: #fff;
    max-width: 810px;
    font-size: 18px;
    line-height: 28px
}

.ph-btns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    display: flex
}

.ph-btn-primary,
.ph-btn-secondary {
    font-family: var(--f-gotham);
    border-radius: 12px;
    align-items: center;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.ph-btn-primary {
    color: #fff;
    background: #632dba;
    padding: 14px 18px 14px 22px
}

.ph-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px #632dba73
}

.ph-btn-secondary {
    color: #ffc300;
    border: 1.5px solid #ffb600;
    padding: 12.5px 18px
}

.ph-btn-secondary:hover {
    background: #ffb6001a
}

.ph-about {
    padding: 70px 80px 40px
}

.ph-about-card {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e4d8fb;
    border-radius: 32px;
    flex-direction: column;
    gap: 36px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 56px 40px;
    display: flex
}

.ph-about-row {
    align-items: center;
    gap: 72px;
    display: flex
}

.ph-about-txt {
    flex-direction: column;
    flex: 0 515px;
    gap: 16px;
    display: flex
}

.ph-about-txt img {
    width: 153px;
    height: auto
}

.ph-about-txt>p:not(.ip-label) {
    color: #544a73;
    font-size: 16px;
    line-height: 1.65
}

.ph .ip-label {
    font-family: var(--f-gotham);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #632dba;
    font-size: 12px;
    font-weight: 700
}

.ph-why {
    background: linear-gradient(-80deg, #8ec5fc33, #e0c3fc33);
    border-radius: 24px;
    flex-direction: column;
    flex: 1;
    gap: 18px;
    padding: 28px 32px;
    display: flex
}

.ph-why h2 {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3
}

.ph-why h2 span {
    color: #632dba
}

.ph-why>p:not(.ip-label) {
    color: #544a73;
    font-size: 15px;
    line-height: 1.6
}

.ph-facts {
    text-align: center;
    border-top: 1px solid #eee7fa;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding-top: 36px;
    display: grid
}

.ph-facts dt {
    font-family: var(--f-xbold);
    color: #190041;
    font-size: 34px;
    font-weight: 800;
    line-height: 42px
}

.ph-facts dd {
    color: #544a73;
    margin: 4px 0 0;
    font-size: 13px
}

.ph-feat {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 70px 80px;
    display: flex
}

.ph-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 760px;
    display: flex
}

.ph-head h2 {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.15
}

.ph-head>p:not(.ip-label) {
    color: #544a73;
    max-width: 620px;
    font-size: 17px;
    line-height: 1.55
}

.ph-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 1280px;
    display: grid
}

.ph-fcard {
    background: #fff;
    border: 1px solid #e4d8fb;
    border-radius: 22px;
    flex-direction: column;
    gap: 14px;
    padding: 24px 22px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    display: flex
}

.ph-fcard:hover {
    border-color: #ccbdf2;
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -18px #4d269940
}

.ph-fcard-top {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.ph-fcard-top img {
    width: 44px;
    height: 44px
}

.ph-elite {
    color: #fff;
    font-family: var(--f-gotham);
    background: #632dba;
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700
}

.ph-fcard h3 {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2
}

.ph-fcard p {
    color: #544a73;
    font-size: 14px;
    line-height: 1.55
}

.ph-setup {
    box-sizing: border-box;
    text-align: center;
    background: linear-gradient(-80deg, #8ec5fc33, #e0c3fc33);
    border-radius: 60px;
    flex-direction: column;
    align-items: center;
    max-width: 1324px;
    margin: 0 auto;
    padding: 42px;
    display: flex
}

.ph-badge {
    font-family: var(--f-gotham);
    letter-spacing: .1em;
    color: #0bad7f;
    background: #fff9;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 7px 16px 7px 14px;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex
}

.ph-badge i {
    background: #0bad7f;
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.ph-setup h2 {
    font-family: var(--f-semi);
    color: #190041;
    margin-top: 24px;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.2
}

.ph-setup h2 span {
    color: #632dba
}

.ph-setup-sub {
    color: #544a73;
    font-size: 17px;
    margin-top: 14px !important
}

.ph-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 1240px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    display: grid
}

.ph-steps li {
    background: #fff;
    border-radius: 30px;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    transition: transform .25s, box-shadow .25s;
    display: flex;
    position: relative
}

.ph-steps li:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px #4d269940
}

.ph-num {
    color: #fff;
    width: 36px;
    height: 36px;
    font-family: var(--f-semi);
    background: #190041;
    border-radius: 25px;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    display: flex;
    position: absolute;
    top: 24px;
    left: 24px
}

.ph-steps img {
    width: auto;
    height: 120px
}

.ph-steps h3 {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px
}

.ph-steps p {
    color: #12012c;
    max-width: 263px;
    font-size: 15px;
    line-height: 24px
}

.ph-related {
    box-sizing: border-box;
    background: #fff;
    flex-direction: column;
    gap: 30px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px 88px;
    display: flex
}

.ph-rel-head {
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    display: flex
}

.ph-rel-head h2 {
    font-family: var(--f-semi);
    letter-spacing: -.02em;
    color: #190041;
    font-size: 38px;
    font-weight: 600;
    line-height: 1.12;
    margin-top: 14px !important
}

.ph-btn-outline {
    color: #190041;
    font-family: var(--f-semi);
    background: #fff;
    border: 1px solid #e8def5;
    border-radius: 100px;
    padding: 18px 28px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, border-color .2s
}

.ph-btn-outline:hover {
    background: #f3edff;
    border-color: #ccbdf2
}

.ph-qn {
    width: 22px;
    font-family: var(--f-gotham);
    color: #a99bc0;
    flex: none;
    font-size: 12px
}

.ph .ip-q button i.ph-pm {
    color: #632dba;
    font-size: 18px;
    font-style: normal;
    line-height: 1;
    transform: none !important
}

.ph .ip-q.is-open button i.ph-pm {
    color: #fff;
    background: #632dba
}

@media (max-width:1280px) {
    .ph-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .ph-about,
    .ph-feat {
        padding-left: 48px;
        padding-right: 48px
    }

    .ph-related {
        padding: 60px 48px
    }
}

@media (max-width:1024px) {
    .ph-about-row {
        flex-direction: column;
        align-items: stretch;
        gap: 32px
    }

    .ph-facts {
        grid-template-columns: repeat(2, 1fr)
    }

    .ph-steps {
        grid-template-columns: 1fr
    }

    .ph-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:760px) {
    .ph-hero {
        padding: 48px 16px
    }

    .ph-hero h1 {
        font-size: 36px;
        line-height: 1.2
    }

    .ph-hero>p {
        font-size: 16px;
        line-height: 26px
    }

    .ph-about,
    .ph-feat {
        padding: 48px 16px
    }

    .ph-about-card {
        border-radius: 24px;
        padding: 28px 20px
    }

    .ph-why {
        padding: 22px
    }

    .ph-head h2,
    .ph-setup h2 {
        font-size: 30px
    }

    .ph-rel-head h2 {
        font-size: 28px
    }

    .ph-grid {
        grid-template-columns: 1fr
    }

    .ph-setup {
        border-radius: 32px;
        padding: 32px 16px
    }

    .ph-related {
        padding: 48px 16px
    }
}

.ph .ph-steps {
    margin: 40px 0 0
}

.ph-setup-wrap {
    padding: 40px 80px
}

.ph-setup {
    max-width: 1280px;
    padding: 48px 48px 56px
}

.ph-setup-sub {
    margin-top: 16px !important
}

.ph-related {
    background: 0 0;
    max-width: none;
    padding: 70px 80px
}

.ph-related>* {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto
}

.ph-rel-head {
    align-items: center
}

.ph-rel-head h2 {
    font-size: 38px;
    margin-top: 12px !important
}

@media (max-width:1280px) {
    .ph-setup-wrap {
        padding: 40px 48px
    }

    .ph-related {
        padding: 60px 48px
    }
}

@media (max-width:760px) {

    .ph-setup-wrap,
    .ph-setup {
        padding: 32px 16px
    }

    .ph .ph-steps {
        margin-top: 28px
    }

    .ph-related {
        padding: 48px 16px
    }
}

.ld2 {
    color: #fff;
    background: radial-gradient(60% 50% at 50% 0, #632dba8c, #632dba00 100%), radial-gradient(40% 40% at 10% 80%, #632dba38, #632dba00 100%), radial-gradient(40% 40% at 95% 95%, #ffc3001a, #ffc30000 100%), #15002e;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 70px 80px;
    display: flex;
    position: relative;
    overflow: hidden
}

.ld2 h2,
.ld2 h3,
.ld2 p {
    margin: 0
}

.ld2-head {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 19px;
    max-width: 1050px;
    display: flex
}

.ld2-eyebrow {
    font-family: var(--f-semi);
    letter-spacing: .03em;
    color: #eee7fa;
    background: #632dba38;
    border: 2px solid #ffc3008c;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    display: inline-flex
}

.ld2-eyebrow i {
    background: #ffd400;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: 1.6s ease-in-out infinite ld2-pulse;
    box-shadow: 0 0 8px #ffc300e6
}

@keyframes ld2-pulse {
    50% {
        opacity: .45
    }
}

.ld2-head h2 {
    font-family: var(--f-semi);
    letter-spacing: -.025em;
    color: #fff;
    font-size: 64px;
    font-weight: 600;
    line-height: 1.05
}

.ld2-head h2 span {
    color: #ffcd00
}

.ld2-head p {
    color: #cecbd4;
    font-size: 24px;
    line-height: 26.4px
}

.ld2-cards {
    justify-content: center;
    align-items: stretch;
    gap: 36px;
    width: 100%;
    display: flex
}

.ld2-meet,
.ld2-widget {
    box-sizing: border-box;
    border-radius: 28px;
    flex-direction: column;
    gap: 16px;
    width: 460px;
    padding: 20px;
    display: flex
}

.ld2-meet {
    text-align: center;
    background: linear-gradient(#2a0b55, #16002f) padding-box padding-box;
    border: 1.5px solid #0000;
    align-items: center;
    position: relative;
    box-shadow: 0 30px 60px #00000059
}

.ld2-meet:before {
    content: "";
    -webkit-mask-composite: xor;
    pointer-events: none;
    -webkit-mask-composite: xor;
    -webkit-mask-source-type: auto, auto;
    background: linear-gradient(160deg, #ffc300bf, #632dba40 50%, #ffc3004d);
    border-radius: 29.5px;
    padding: 1.5px;
    position: absolute;
    inset: -1.5px;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-position: 0 0, 0 0;
    -webkit-mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source
}

.ld2-art {
    justify-content: center;
    width: 100%;
    margin-top: 12px;
    display: flex;
    position: relative
}

.ld2-bee {
    width: 372px;
    max-width: 100%;
    height: auto
}

.ld2-hi {
    color: #190041;
    font-family: var(--f-semi);
    text-align: left;
    background: #ffc300;
    border-radius: 16px 16px 16px 4px;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    animation: 4s ease-in-out infinite ld2-pop;
    position: absolute;
    top: 70px;
    right: 0;
    box-shadow: 0 8px 20px #00000040
}

@keyframes ld2-pop {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

.ld2-meet h3 {
    font-family: var(--f-xbold);
    color: #fff;
    margin-top: auto;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.5
}

.ld2-meet>p {
    color: #ccb7f4;
    font-size: 16px;
    line-height: 1.5;
    margin-top: -16px !important
}

.ld2-traits {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    display: flex
}

.ld2-traits li {
    color: #eee7fa;
    background: #632dba47;
    border: 1px solid #9c7be673;
    border-radius: 999px;
    align-items: center;
    gap: 5px;
    padding: 6px 10px 6px 9px;
    font-size: 11px;
    display: inline-flex
}

.ld2-traits i {
    background: #ffc300;
    border-radius: 50%;
    width: 6px;
    height: 6px
}

.ld2-widget {
    background: linear-gradient(#7a3fe0, #4a1a9c);
    border: 1px solid #ffffff2e;
    min-height: 545px
}

.ld2-toggle {
    background: #ffffff14;
    border: 1px solid #ffffff4d;
    border-radius: 999px;
    align-self: center;
    gap: 2px;
    padding: 6px;
    display: flex
}

.ld2-toggle button {
    --ld2-dot: #7a3fe0;
    color: #eee7fa;
    font-family: var(--f-semi);
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    transition: background .25s, color .25s;
    display: inline-flex
}

.ld2-toggle button.on {
    --ld2-dot: #fff;
    color: #190041;
    background: #fff
}

.ld2-toggle button:not(.on):hover {
    background: #ffffff1f
}

.ld2-pane {
    flex-direction: column;
    flex: 1;
    gap: 16px;
    min-height: 0;
    animation: .35s both ld2-in;
    display: flex
}

@keyframes ld2-in {
    0% {
        opacity: 0;
        transform: translateY(6px)
    }
}

.ld2-who {
    text-align: left;
    align-items: center;
    gap: 12px;
    display: flex
}

.ld2-who img {
    border-radius: 50%;
    width: 52px;
    height: 52px
}

.ld2-who b {
    font-family: var(--f-xbold);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    display: block
}

.ld2-who small {
    color: #eee7fad9;
    margin-top: 6px;
    font-size: 12px;
    display: block
}

.ld2-window {
    box-sizing: border-box;
    scrollbar-width: none;
    background: linear-gradient(#22074d, #170038);
    border: 1.5px solid #ffffff14;
    border-radius: 20px;
    flex-direction: column;
    gap: 12px;
    height: 281px;
    padding: 18px;
    display: flex;
    overflow-y: auto
}

.ld2-window::-webkit-scrollbar {
    display: none
}

.ld2-bee-msg {
    flex-direction: column;
    gap: 4px;
    max-width: 86%;
    animation: .3s both ld2-in;
    display: flex
}

.ld2-bee-msg small {
    color: #fff;
    opacity: .8;
    padding-left: 42px;
    font-size: 9px
}

.ld2-row {
    align-items: flex-end;
    gap: 6px;
    display: flex
}

.ld2-row img {
    border-radius: 50%;
    flex: none;
    width: 36px;
    height: 36px
}

.ld2-bubble {
    font-family: var(--f-semi);
    text-align: left;
    padding: 11px 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35
}

.ld2-bubble.bee {
    color: #fff;
    background: #632dba;
    border-radius: 12px 12px 12px 4px
}

.ld2-you-msg {
    justify-content: flex-end;
    animation: .3s both ld2-in;
    display: flex
}

.ld2-bubble.you {
    color: #190041;
    background: #fff;
    border-radius: 12px 12px 4px;
    max-width: 80%
}

.ld2-typing {
    background: #632dba;
    border-radius: 12px 12px 12px 4px;
    align-self: flex-start;
    gap: 5px;
    padding: 12px 14px;
    display: inline-flex
}

.ld2-typing i {
    background: #ffc300;
    border-radius: 50%;
    width: 7px;
    height: 7px;
    animation: 1s ease-in-out infinite ld2-dot
}

.ld2-typing i:nth-child(2) {
    animation-delay: .15s
}

.ld2-typing i:nth-child(3) {
    animation-delay: .3s
}

@keyframes ld2-dot {

    0%,
    to {
        opacity: .35;
        transform: translateY(0)
    }

    50% {
        opacity: 1;
        transform: translateY(-3px)
    }
}

.ld2-chips {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
    animation: .3s both ld2-in;
    display: flex
}

.ld2-chips button {
    color: #fff;
    font-family: var(--f-semi);
    cursor: pointer;
    background: #ffffff0a;
    border: 1.5px solid #9c7be699;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    transition: background .2s, border-color .2s, color .2s
}

.ld2-chips button.on,
.ld2-chips button:hover {
    color: #190041;
    background: #ffc300;
    border-color: #ffc300
}

.ld2-input {
    background: #fff;
    border-radius: 999px;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding: 8px 8px 8px 22px;
    display: flex
}

.ld2-input input {
    min-width: 0;
    font-family: var(--f-book);
    color: #190041;
    background: 0 0;
    border: 0;
    outline: 0;
    flex: 1;
    font-size: 16px
}

.ld2-input input::placeholder {
    color: #8a7ba8
}

.ld2-send,
.ld2-callme {
    color: #190041;
    font-family: var(--f-semi);
    cursor: pointer;
    background: #ffc300;
    border: 0;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 14px 22px 14px 20px;
    font-size: 17px;
    font-weight: 600;
    transition: transform .2s;
    display: inline-flex;
    box-shadow: 0 6px 20px #ffc30066
}

.ld2-send:hover,
.ld2-callme:hover {
    transform: translateY(-1px)
}

.ld2-call {
    box-sizing: border-box;
    background: linear-gradient(#22074d, #170038);
    border: 1.5px solid #ffffff14;
    border-radius: 20px;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: 307px;
    padding: 18px;
    display: flex
}

.ld2-status {
    font-family: var(--f-semi);
    color: #ffe38a;
    font-variant-numeric: tabular-nums;
    background: #ffc3001f;
    border: 1px solid #ffc30073;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex
}

.ld2-status i {
    background: #ffc300;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.2s ease-in-out infinite ld2-pulse;
    box-shadow: 0 0 6px #ffc300e6
}

.ld2-visual {
    align-items: center;
    gap: 8px;
    display: flex
}

.ld2-wave {
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    width: 108px;
    height: 36px;
    display: flex
}

.ld2-wave.r {
    flex-direction: row-reverse;
    justify-content: flex-end
}

.ld2-wave i {
    transform-origin: 50%;
    background: linear-gradient(#b9a2f0, #7d5bd6);
    border-radius: 2px;
    width: 3px;
    animation: 1s ease-in-out infinite alternate ld2-bar
}

.ld2-wave i:nth-child(n+9) {
    background: #ffc300
}

@keyframes ld2-bar {
    0% {
        transform: scaleY(.35)
    }

    to {
        transform: scaleY(1)
    }
}

.ld2-orb {
    background: radial-gradient(closest-side, #ffc30073, #ffc30000);
    border-radius: 50%;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 112px;
    display: flex;
    position: relative
}

.ld2-orb:before {
    content: "";
    border: 2px solid #ffc30099;
    border-radius: 50%;
    animation: 2s ease-out infinite ld2-ring;
    position: absolute;
    inset: 12px
}

.ld2-orb:after {
    content: "";
    background: #632dba;
    border-radius: 50%;
    position: absolute;
    inset: 21px
}

.ld2-orb img {
    z-index: 1;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    position: relative
}

@keyframes ld2-ring {
    0% {
        opacity: 1;
        transform: scale(.92)
    }

    to {
        opacity: .2;
        transform: scale(1.12)
    }
}

.ld2-call.ended .ld2-wave i,
.ld2-call.ended .ld2-orb:before,
.ld2-call.ended .ld2-status i {
    opacity: .4;
    animation-play-state: paused
}

.ld2-transcript {
    box-sizing: border-box;
    scrollbar-width: none;
    text-align: left;
    background: #ffffff0d;
    border: 1px solid #ffffff14;
    border-radius: 14px;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    width: 100%;
    min-height: 0;
    padding: 12px 14px;
    display: flex;
    overflow-y: auto
}

.ld2-transcript::-webkit-scrollbar {
    display: none
}

.ld2-transcript p {
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    animation: .3s both ld2-in
}

.ld2-transcript small {
    font-family: var(--f-semi);
    letter-spacing: .08em;
    color: #ccb7f4;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 600;
    display: block
}

.ld2-transcript p.bee small {
    color: #ffc300
}

.ld2-controls {
    gap: 12px;
    margin-top: auto;
    display: flex
}

.ld2-controls button {
    height: 52px;
    font-family: var(--f-semi);
    cursor: pointer;
    border-radius: 999px;
    flex: 1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    transition: background .2s, transform .2s;
    display: inline-flex
}

.ld2-mute {
    color: #fff;
    background: #ffffff24;
    border: 1px solid #ffffff59
}

.ld2-mute:hover {
    background: #ffffff38
}

.ld2-end {
    color: #fff;
    background: #ff3c69;
    border: 0
}

.ld2-end:hover {
    background: #ff2a5b;
    transform: translateY(-1px)
}

.ld2-controls .ld2-callme {
    padding: 0 22px;
    font-size: 17px
}

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

    .ld2 *,
    .ld2 :before {
        animation: none !important
    }
}

@media (max-width:1024px) {
    .ld2 {
        padding: 60px 32px
    }

    .ld2-cards {
        gap: 20px
    }

    .ld2-head h2 {
        font-size: 48px
    }

    .ld2-head p {
        font-size: 18px;
        line-height: 1.5
    }
}

@media (max-width:760px) {
    .ld2 {
        gap: 28px;
        padding: 48px 16px
    }

    .ld2-head h2 {
        font-size: 36px
    }

    .ld2-head p {
        font-size: 16px
    }

    .ld2-eyebrow {
        font-size: 13px
    }

    .ld2-cards {
        flex-direction: column;
        align-items: center
    }

    .ld2-meet,
    .ld2-widget {
        width: 100%;
        max-width: 460px
    }

    .ld2-bee {
        width: 260px
    }

    .ld2-hi {
        font-size: 12px;
        top: 30px
    }

    .ld2-meet h3 {
        font-size: 26px
    }

    .ld2-send {
        padding: 12px 16px;
        font-size: 15px
    }

    .ld2-wave {
        width: 80px
    }

    .ld2-wave i:nth-child(-n+3) {
        display: none
    }

    .ld2-controls button {
        font-size: 15px
    }
}

.ld2-call .ld2-wave i {
    transition: transform 80ms linear;
    animation: none;
    transform: scaleY(.18)
}

.ld2-call:not(.live) .ld2-orb:before {
    opacity: .35;
    animation: none
}

.ld2-call:not(.live) .ld2-status i {
    opacity: .4;
    animation: none
}

.ld2-call.talking .ld2-orb {
    box-shadow: 0 0 0 6px #ffc3001f
}

.ld2-transcript p.hint {
    color: #ccb7f4;
    text-align: center;
    margin: auto 0;
    font-size: 13px;
    line-height: 1.55
}

.ld2-transcript p.interim {
    opacity: .65;
    font-style: italic
}

.ld2-start {
    color: #190041;
    background: #ffc300;
    border: 0;
    box-shadow: 0 6px 20px #ffc30066
}

.ld2-start:hover {
    transform: translateY(-1px)
}

.tr4 {
    background: #fff;
    flex-direction: column;
    align-items: center;
    padding: 86px 0 50px;
    display: flex;
    position: relative;
    overflow: hidden
}

.tr4-head {
    z-index: 2;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1200px;
    padding: 0 20px;
    display: flex;
    position: relative
}

.tr4-head h2 {
    font-family: var(--f-xbold);
    color: #1e0f49;
    margin: 0;
    font-size: 48px;
    font-weight: 800;
    line-height: 59.4px
}

.tr4-head h2 span {
    color: #632dba
}

.tr4-head p {
    color: #3d2860;
    margin: 0;
    font-size: 18px;
    line-height: 30px
}

.tr4-stage {
    width: 100%;
    height: 510px;
    margin-top: -8px;
    position: relative
}

.tr4-globe {
    width: 1422px;
    height: 372px;
    position: absolute;
    top: 0;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%);
    -webkit-mask-image: linear-gradient(#000 62%, #0000 100%);
    mask-image: linear-gradient(#000 62%, #0000 100%)
}

.tr4-sphere {
    width: 1422px;
    top: -116px;
    left: 0;
    position: absolute !important
}

.tr4-impact {
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 3;
    background: linear-gradient(-80deg, #8ec5fc33, #e0c3fc33), #ffffff8c;
    border-radius: 24px;
    flex-direction: column;
    gap: 16px;
    width: 649px;
    padding: 24px;
    display: flex;
    position: absolute;
    top: 329px;
    left: 50%;
    transform: translate(-50%)
}

.tr4-live {
    font-family: var(--f-gotham);
    letter-spacing: .11em;
    color: #12915e;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    display: flex
}

.tr4-live i {
    background: #12c26d;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    animation: 1.6s ease-in-out infinite ld2-pulse;
    box-shadow: 0 0 0 4px #12c26d2e
}

.tr4-stats {
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 24px;
    margin: 0;
    display: grid
}

.tr4-stats>div {
    background: #ffffffd1;
    border: .8px solid #632dba24;
    border-radius: 24px;
    padding: 16px 24px;
    box-shadow: 0 10px 24px -12px #2d0b7a2e
}

.tr4-stats dt {
    font-family: var(--f-xbold);
    letter-spacing: -.03em;
    color: #632dba;
    white-space: nowrap;
    font-size: 24px;
    font-weight: 800;
    line-height: 39.4px
}

.tr4-stats dd {
    color: #0f0820;
    white-space: nowrap;
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 21px
}

.tr4-join {
    z-index: 2;
    text-align: center;
    color: #3d2960;
    max-width: 907px;
    margin: 24px 0 0;
    padding: 0 20px;
    font-size: 18px;
    line-height: 30px;
    position: relative
}

.tr4-logos {
    z-index: 2;
    width: 100%;
    margin-top: 48px;
    position: relative
}

@media (max-width:1024px) {
    .tr4-head h2 {
        font-size: 40px;
        line-height: 1.25
    }
}

@media (max-width:760px) {
    .tr4 {
        padding: 56px 0 40px
    }

    .tr4-head h2 {
        font-size: 28px;
        line-height: 1.25
    }

    .tr4-head h2 br {
        display: none
    }

    .tr4-head p {
        font-size: 16px;
        line-height: 1.5
    }

    .tr4-stage {
        height: auto;
        padding-top: 170px
    }

    .tr4-globe {
        width: 760px;
        height: 230px
    }

    .tr4-sphere {
        width: 760px;
        top: -62px
    }

    .tr4-impact {
        width: auto;
        margin: 0 16px;
        padding: 18px;
        position: relative;
        top: auto;
        left: auto;
        transform: none
    }

    .tr4-stats {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .tr4-stats>div {
        padding: 12px 18px
    }

    .tr4-join {
        font-size: 15px;
        line-height: 24px
    }

    .tr4-logos {
        margin-top: 28px
    }
}

.tr4-sphere .salon-dot {
    width: 10px;
    height: 10px
}

@media (max-width:760px) {
    .tr4-stage {
        height: auto;
        padding-top: 230px
    }

    .tr4-globe {
        height: 290px
    }

    .tr4-impact {
        top: auto
    }

    .tr4-stage {
        padding-top: 250px
    }

    .tr4-globe {
        width: 600px;
        height: 280px
    }

    .tr4-sphere {
        width: 600px;
        top: -52px
    }
}

.tr4-sphere .salon-pin {
    width: 40px;
    height: 40px;
    padding: 2px;
    transition: none;
    box-shadow: 0 0 0 4px #fffc, 0 6px 16px #2d0b7a47
}

.tr4-sphere .salon-pin img {
    width: 36px;
    height: 36px
}

.tr4-sphere .salon-pin:after {
    display: none
}

.tr4-sphere .salon-pin:hover {
    box-shadow: 0 0 0 4px #fff, 0 0 0 6px #632dba73, 0 8px 18px #2d0b7a4d;
    z-index: 300 !important
}

.tr4-tag {
    text-align: left;
    white-space: nowrap;
    pointer-events: none;
    background: #fff;
    border: .8px solid #632dba29;
    border-radius: 10px;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 8px 20px -8px #2d0b7a59
}

.tr4-tag b {
    font-family: var(--f-semi);
    color: #190041;
    font-size: 12px;
    font-weight: 700;
    line-height: 15px
}

.tr4-tag small {
    font-family: var(--f-gotham);
    color: #6b5a8e;
    font-size: 10.5px;
    line-height: 13px
}

.tr4-tag--r {
    left: calc(100% + 10px)
}

.tr4-tag--l {
    right: calc(100% + 10px)
}

.tr4-tag:before {
    content: "";
    background: #fff;
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)rotate(45deg)
}

.tr4-tag--r:before {
    border-bottom: .8px solid #632dba29;
    border-left: .8px solid #632dba29;
    left: -4px
}

.tr4-tag--l:before {
    border-top: .8px solid #632dba29;
    border-right: .8px solid #632dba29;
    right: -4px
}

.tr4-sphere .salon-pin:hover .tr4-tag {
    border-color: #632dba80
}

@media (max-width:760px) {
    .tr4-sphere .salon-pin {
        width: 26px;
        height: 26px;
        padding: 1.5px;
        box-shadow: 0 0 0 2px #ffffffd9, 0 3px 8px #2d0b7a40
    }

    .tr4-sphere .salon-pin img {
        width: 23px;
        height: 23px
    }

    .tr4-tag {
        border-radius: 6px;
        padding: 3px 6px
    }

    .tr4-tag b {
        font-size: 8.5px;
        line-height: 10px
    }

    .tr4-tag small {
        font-size: 7.5px;
        line-height: 9px
    }

    .tr4-tag--r {
        left: calc(100% + 5px)
    }

    .tr4-tag--l {
        right: calc(100% + 5px)
    }

    .tr4-tag:before {
        width: 5px;
        height: 5px
    }

    .tr4-tag--r:before {
        left: -3px
    }

    .tr4-tag--l:before {
        right: -3px
    }
}

.tr4-impact {
    top: 465px
}

@media (max-width:760px) {
    .tr4-stage {
        height: auto
    }

    .tr4-globe {
        height: 280px
    }

    .tr4-impact {
        top: auto
    }

    .tr4-sphere .salon-pin {
        width: 18px;
        height: 18px;
        padding: 1px
    }

    .tr4-sphere .salon-pin img {
        width: 16px;
        height: 16px
    }

    .tr4-tag {
        display: none
    }

    .tr4-sphere .salon-pin:focus .tr4-tag,
    .tr4-sphere .salon-pin:hover .tr4-tag {
        z-index: 5;
        display: flex
    }
}

.tr4-tag {
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    transition: opacity .18s, visibility .18s
}

.tr4-sphere .salon-pin:hover .tr4-tag,
.tr4-sphere .salon-pin:focus-visible .tr4-tag,
.tr4-sphere .salon-pin:focus .tr4-tag {
    opacity: 1;
    visibility: visible;
    display: flex
}

.tr4-stage {
    height: 580px
}

.tr4-globe {
    height: 470px;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 60px), #0000 100%);
    mask-image: linear-gradient(#000 calc(100% - 60px), #0000 100%)
}

.tr4-impact {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: 0 0;
    border-radius: 0;
    align-items: center;
    gap: 14px;
    width: auto;
    padding: 8px 0 0;
    top: 472px
}

.tr4-live {
    letter-spacing: 1.3px;
    font-size: 12px;
    line-height: 14px
}

.tr4-stats {
    align-items: flex-start;
    gap: 0;
    display: flex
}

.tr4-stats>div {
    box-shadow: none;
    background: 0 0;
    border: 0;
    border-left: 1px solid #e4dcf2;
    border-radius: 0;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 28px;
    display: flex
}

.tr4-stats>div:first-child {
    border-left: 0;
    padding-left: 0
}

.tr4-stats>div:last-child {
    padding-right: 0
}

.tr4-stats dt {
    letter-spacing: -.8px;
    color: #190041;
    font-size: 34px;
    line-height: 42px
}

.tr4-stats>div:first-child dt {
    color: #632dba
}

.tr4-stats dd {
    font-family: var(--f-book);
    color: #66577d;
    margin: 0;
    font-size: 13px;
    line-height: 16px
}

.tr4-join {
    max-width: none;
    font-family: var(--f-semi);
    color: #66577d;
    margin: 54px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px
}

.tr4-logos {
    margin-top: 24px
}

@media (max-width:760px) {
    .tr4-stage {
        height: auto
    }

    .tr4-impact {
        margin: 0 16px;
        padding-top: 0;
        top: auto
    }

    .tr4-globe {
        height: 280px;
        -webkit-mask-image: linear-gradient(#000 70%, #0000 100%);
        mask-image: linear-gradient(#000 70%, #0000 100%)
    }

    .tr4-live {
        letter-spacing: 1px;
        font-size: 10.5px
    }

    .tr4-stats>div {
        padding: 0 12px
    }

    .tr4-stats dt {
        letter-spacing: -.4px;
        font-size: 22px;
        line-height: 28px
    }

    .tr4-stats dd {
        text-align: center;
        white-space: normal;
        font-size: 10.5px;
        line-height: 13px
    }

    .tr4-join {
        margin-top: 36px;
        font-size: 14px
    }

    .tr4-logos {
        margin-top: 20px
    }
}

.bb-pill {
    box-sizing: border-box;
    width: max-content;
    max-width: 100%;
    font-family: var(--f-gotham);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #632dba;
    white-space: nowrap;
    background: #632dba0f;
    border: 1px solid #632dba38;
    border-radius: 999px;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 8px 18px 8px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    display: inline-flex
}

.bb-pill i {
    background: #632dba;
    border-radius: 50%;
    flex: none;
    width: 8px;
    height: 8px;
    animation: 2.2s ease-in-out infinite bbPillDot;
    box-shadow: 0 0 0 4px #632dba26
}

@keyframes bbPillDot {
    50% {
        box-shadow: 0 0 0 7px #632dba00
    }
}

.bb-pill--dark,
.ld2 .bb-pill,
.ip-hero .bb-pill,
.fcta .bb-pill {
    color: #efe7ff;
    background: #ffffff14;
    border-color: #ffc30073
}

.bb-pill--dark i,
.ld2 .bb-pill i,
.ip-hero .bb-pill i,
.fcta .bb-pill i {
    background: #ffc300;
    animation-name: bbPillDotY;
    box-shadow: 0 0 0 4px #ffc30033
}

@keyframes bbPillDotY {
    50% {
        box-shadow: 0 0 0 7px #ffc30000
    }
}

@media (max-width:760px) {
    .bb-pill {
        letter-spacing: .12em;
        gap: 8px;
        margin-bottom: 14px;
        padding: 6px 14px 6px 11px;
        font-size: 11px
    }
}

@media (prefers-reduced-motion:reduce) {
    .bb-pill i {
        animation: none
    }
}

.bb-pill {
    margin: 0
}

.hero-stage>.bb-pill,
.int-text>.bb-pill,
.swipe-head>.bb-pill,
.faq-inner>.bb-pill,
.ip-story>.bb-pill {
    margin-bottom: 18px
}

.handle-head>.bb-pill,
.ph-related .bb-pill {
    margin-bottom: 8px
}

.fcta-copy>.bb-pill {
    margin-bottom: -10px
}

.hero .bb-pill {
    color: #efe7ff;
    background: #ffffff14;
    border-color: #ffc30073
}

.hero .bb-pill i {
    background: #ffc300;
    animation-name: bbPillDotY;
    box-shadow: 0 0 0 4px #ffc30033
}

.hero-stage>.bb-pill {
    margin: 0 auto 6px;
    display: flex
}

.bb-pill.bb-pill {
    font-family: var(--f-gotham);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px
}

.bb-pill.bb-pill i {
    width: 8px;
    height: 8px;
    margin: 0
}

:is(.hero, .ld2, .ip-hero, .fcta, .swipe, .ph-hero, .ip-story, .ip-request-card) .bb-pill.bb-pill {
    color: #efe7ff;
    background: #ffffff14;
    border: 1px solid #ffc30073
}

:is(.hero, .ld2, .ip-hero, .fcta, .swipe, .ph-hero, .ip-story, .ip-request-card) .bb-pill.bb-pill i {
    background: #ffc300;
    animation-name: bbPillDotY;
    display: block;
    box-shadow: 0 0 0 4px #ffc30033
}

@media (max-width:760px) {
    .bb-pill.bb-pill {
        letter-spacing: .12em;
        font-size: 11px
    }
}

.ld2-call {
    --lv: 0
}

.ld2-visual {
    height: 128px;
    margin: -6px 0 -8px;
    position: relative
}

.vo {
    pointer-events: none;
    background: radial-gradient(circle, #0000 46%, #0a001e8c 47%, #0a001e40 62%, #0a001e00 63%, #0a001e2e 64%, #0a001e00 74%);
    border-radius: 50%;
    width: 180px;
    height: 180px;
    margin-top: -26px;
    display: block;
    position: relative
}

.vo-dust {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.vo-orb {
    isolation: isolate;
    width: 92px;
    height: 92px;
    transform: scale(calc(1 + var(--lv) * .12));
    box-shadow: 0 0 calc(18px + var(--lv) * 34px) #966eff8c, 0 0 60px rgba(255, 120, 80, calc(.12 + var(--lv) * .3)), inset 0 -10px 24px #78003c59, inset 0 6px 14px #ffffff59;
    background: #5b3dff;
    border-radius: 50%;
    margin: -46px 0 0 -46px;
    transition: transform .12s ease-out;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden
}

.vo-orb i {
    filter: blur(9px);
    mix-blend-mode: normal;
    border-radius: 50%;
    animation: 9s linear infinite vo-spin;
    position: absolute
}

.vo-orb .b1 {
    background: radial-gradient(circle, #19c8ff 0, #2f6bff 55%, #0000 72%);
    inset: -10% 40% 20% -25%
}

.vo-orb .b2 {
    background: radial-gradient(circle, #ff4a1c 0, #ff2f6a 45%, #0000 72%);
    animation-duration: 7s;
    animation-direction: reverse;
    inset: 35% -20% -25% 25%
}

.vo-orb .b3 {
    background: radial-gradient(circle, #ffe3f2 0, #ff9ed6 40%, #0000 70%);
    animation-duration: 11s;
    inset: -25% -20% 40% 35%
}

.vo-orb .b4 {
    background: radial-gradient(circle, #b44dff 0, #7a3cff 45%, #0000 70%);
    animation-duration: 13s;
    animation-direction: reverse;
    inset: 20% 20% 5% 5%
}

.vo-orb:after {
    content: "";
    z-index: 2;
    background: radial-gradient(circle at 32% 22%, #ffffffbf 0, #ffffff2e 18%, #0000 36%), radial-gradient(circle, #0000 58%, #ffffff47 72%, #ffffff0d 100%);
    border-radius: 50%;
    position: absolute;
    inset: 0
}

@keyframes vo-spin {
    0% {
        transform: rotate(0)translate(4%)
    }

    to {
        transform: rotate(360deg)translate(4%)
    }
}

.vo-eyes {
    z-index: 3;
    gap: 12px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.vo-eyes b {
    width: 11px;
    height: calc(22px + var(--lv) * 6px);
    transform-origin: 50%;
    background: #fff;
    border-radius: 6px;
    animation: 4.6s infinite vo-blink;
    display: block;
    box-shadow: 0 0 10px #fffc
}

@keyframes vo-blink {

    0%,
    92%,
    to {
        transform: scaleY(1)
    }

    95% {
        transform: scaleY(.12)
    }
}

.ld2-call.talking .vo-eyes {
    animation: .5s ease-in-out infinite alternate vo-talk
}

@keyframes vo-talk {
    0% {
        transform: translate(-50%, -50%)
    }

    to {
        transform: translate(-50%, -58%)
    }
}

.ld2-call:not(.live) .vo-orb i {
    animation-duration: 22s
}

.ld2-call.ended .vo-orb {
    filter: saturate(.55)brightness(.85)
}

.ld2-call.ended .vo-eyes b {
    animation: none;
    transform: scaleY(.18)
}

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

    .vo-orb i,
    .vo-eyes b,
    .ld2-call.talking .vo-eyes {
        animation: none
    }
}

.ld2-call {
    height: 324px
}

.ld2-visual {
    flex: none;
    height: 132px;
    margin: 0
}

.vo {
    width: 132px;
    height: 132px;
    margin: 0
}

.vo-orb {
    width: 84px;
    height: 84px;
    transform: scale(calc(1 + var(--lv) * .08));
    margin: -42px 0 0 -42px
}

.vo-eyes {
    gap: 11px
}

.vo-eyes b {
    width: 10px;
    height: calc(20px + var(--lv) * 5px)
}

.ld2-window {
    height: 305px
}

@media (max-width:760px) {
    .ld2-window {
        height: 312px
    }
}

.hero2 {
    background: #11002b;
    flex-direction: column;
    align-items: center;
    min-height: max(938px, 220px + 49.8505vw);
    display: flex;
    position: relative;
    overflow: hidden
}

.hero2-room {
    aspect-ratio: 2160/1077;
    background: url(../public/assets/hero2-room.webp) bottom/100% no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.hero2-room:before {
    content: "";
    background: linear-gradient(#11002b 6%, #11002b00);
    height: 41%;
    position: absolute;
    top: -1px;
    left: 0;
    right: 0
}

.hero2-copy {
    z-index: 2;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 900px;
    max-width: calc(100% - 40px);
    padding-top: 172px;
    display: flex;
    position: relative
}

.hero2-copy .bb-pill {
    margin: 0 0 4px
}

.hero2-copy h1 {
    font-family: var(--f-xbold);
    letter-spacing: -2.24px;
    color: #fff;
    margin: 0;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.06
}

.hero2-copy h1 .y {
    color: #ffcd00
}

.hero2-copy p {
    max-width: 640px;
    font-family: var(--f-book);
    color: #e9e1fcc7;
    margin: 0;
    font-size: 19px;
    line-height: 1.6
}

.hero2-ctas {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    display: flex
}

.hero2-btn {
    box-sizing: border-box;
    color: #19131f;
    height: 52px;
    font-family: var(--f-semi);
    background: #ffcd00;
    border-radius: 14px;
    align-items: center;
    padding: 0 26px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.hero2-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -8px #ffcd0099
}

.hero2-btn.ghost {
    color: #fff;
    background: 0 0;
    border: 1.5px solid #ffffff52
}

.hero2-btn.ghost:hover {
    box-shadow: none;
    border-color: #ffffffb3
}

.hero2-voice {
    justify-content: center;
    align-items: center;
    gap: 1.45%;
    width: 22.2%;
    height: 23.4%;
    display: flex;
    position: absolute;
    top: 49.9%;
    left: 50%;
    transform: translate(-50%)
}

.hero2-voice:before {
    content: "";
    filter: blur(21px);
    background: #786eff3d;
    border-radius: 50%;
    position: absolute;
    inset: 18% 10%
}

.hero2-voice:after {
    content: "";
    background: linear-gradient(90deg, #c169ff00, #d0a0ffcc, #c169ff00);
    height: 1.5px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0
}

.hero2-voice i {
    z-index: 1;
    transform-origin: 50%;
    background: linear-gradient(#8ca0ffd9, #d08cfff2, #8ca0ffd9);
    border-radius: 2px;
    flex: none;
    width: 2.5px;
    min-height: 3px;
    animation: 1.2s ease-in-out infinite alternate hero2-bar;
    position: relative
}

@keyframes hero2-bar {
    0% {
        transform: scaleY(.35)
    }

    to {
        transform: scaleY(1)
    }
}

.hero2 .bb-pill.bb-pill {
    color: #efe7ff;
    background: #ffffff14;
    border: 1px solid #ffc30073
}

.hero2 .bb-pill.bb-pill i {
    background: #ffc300;
    animation-name: bbPillDotY;
    display: block;
    box-shadow: 0 0 0 4px #ffc30033
}

@media (prefers-reduced-motion:reduce) {
    .hero2-voice i {
        animation: none
    }
}

@media (max-width:1024px) {
    .hero2-copy h1 {
        font-size: 52px
    }
}

@media (max-width:760px) {
    .hero2 {
        min-height: 0
    }

    .hero2-copy {
        padding-top: calc(48px + var(--hdr-h));
        gap: 14px
    }

    .hero2-copy h1 {
        letter-spacing: -1.1px;
        font-size: 36px
    }

    .hero2-copy p {
        font-size: 16px
    }

    .hero2-btn {
        height: 48px;
        padding: 0 22px;
        font-size: 15px
    }

    .hero2-room {
        aspect-ratio: auto;
        background-position: 24% bottom;
        background-size: auto 100%;
        width: 100%;
        height: 340px;
        margin-top: 8px;
        position: relative;
        left: auto;
        right: auto
    }

    .hero2-room:before {
        height: 30%
    }

    .hero2-voice {
        display: none
    }
}

.gradient-blinds-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden
}

.gradient-blinds-canvas {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0
}

.gradient-blinds-container.hero2-blinds {
    z-index: 1;
    pointer-events: none;
    width: auto;
    height: 640px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-mask-image: linear-gradient(#000 52%, #0000 100%);
    mask-image: linear-gradient(#000 52%, #0000 100%)
}

.hero2-room {
    z-index: 0
}

@media (max-width:760px) {
    .gradient-blinds-container.hero2-blinds {
        height: 560px
    }
}

.hero2-copy:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(closest-side, #11002b9e, #11002b59 60%, #11002b00);
    border-radius: 50%;
    position: absolute;
    inset: 120px -8% -40px
}

.hero2-chair {
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 18px 18px #280a5a73);
    width: 16%;
    height: auto;
    animation: .9s cubic-bezier(.2, .8, .2, 1) .2s both hero2-chair-in;
    position: absolute;
    bottom: 18%;
    left: 63.5%
}

@keyframes hero2-chair-in {
    0% {
        opacity: 0;
        transform: translateY(18px)scale(.96)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@media (prefers-reduced-motion:reduce) {
    .hero2-chair {
        animation: none
    }
}

@media (max-width:760px) {
    .hero2-room {
        background-position: 55% bottom
    }

    .hero2-chair {
        left: calc(55% + 57.9px)
    }

    .hero2-room {
        background-position: 58% bottom;
        height: 290px
    }

    .hero2-chair {
        width: 93px;
        bottom: 52px;
        left: calc(58% + 32.44px)
    }
}

.hero2-bg-toggle {
    z-index: 5;
    cursor: pointer;
    color: #efe7ff;
    font-family: var(--f-gotham);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #11002bb8;
    border: 1px solid #ffffff38;
    border-radius: 999px;
    align-items: center;
    gap: 8px;
    padding: 9px 14px 9px 12px;
    font-size: 12.5px;
    display: inline-flex;
    position: absolute;
    bottom: 24px;
    left: 24px
}

.hero2-bg-toggle b {
    color: #ffc300;
    font-weight: 700
}

.hero2-bg-toggle i {
    background: #fff3;
    border-radius: 999px;
    flex: none;
    width: 30px;
    height: 17px;
    transition: background .2s;
    position: relative
}

.hero2-bg-toggle i:after {
    content: "";
    background: #fff;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    transition: transform .2s;
    position: absolute;
    top: 2px;
    left: 2px
}

.hero2-bg-toggle[aria-pressed=true] i {
    background: #632dba
}

.hero2-bg-toggle[aria-pressed=true] i:after {
    transform: translate(13px)
}

.hero2-bg-toggle:hover {
    border-color: #ffc30099
}

@media (max-width:760px) {
    .hero2-bg-toggle {
        font-size: 11px;
        bottom: 12px;
        left: 12px
    }
}

:root {
    --ts-h1: 800 64px/1.06 var(--f-xbold);
    --ts-h1-ls: -1.92px;
    --ts-h2: 600 48px/1.08 var(--f-semi);
    --ts-h2-ls: -1.5px;
    --ts-h3: 600 28px/1.2 var(--f-semi);
    --ts-h3-ls: -.8px;
    --ts-h4: 600 20px/1.3 var(--f-semi);
    --ts-stat: 800 36px/1.1 var(--f-xbold);
    --ts-stat-ls: -.8px;
    --ts-body-l: 400 18px/1.6 var(--f-book);
    --ts-body: 400 16px/1.55 var(--f-book);
    --ts-body-s: 400 14px/1.55 var(--f-book);
    --ts-caption: 400 12px/1.4 var(--f-book);
    --ts-eyebrow: 600 12px/normal var(--f-semi);
    --ts-eyebrow-ls: 1.6px;
    --ts-button: 600 16px/20px var(--f-semi);
    --ts-button-l: 600 18px/22px var(--f-semi)
}

.bb-pill.bb-pill {
    color: #632dba;
    font: var(--ts-button);
    letter-spacing: 0;
    text-transform: uppercase;
    background: #632dba1f;
    border: 0;
    border-radius: 40px;
    gap: 10px;
    padding: 12px
}

.bb-pill.bb-pill i {
    width: 12px;
    height: 12px
}

.ld2 .bb-pill.bb-pill {
    color: #eee7fa;
    background: #632dba38;
    border: 2px solid #ffc3008c;
    padding: 8px 16px
}

.gs2-eyebrow {
    font: var(--ts-eyebrow);
    letter-spacing: var(--ts-eyebrow-ls);
    text-transform: uppercase;
    color: #632dba
}

.hero2-copy h1 {
    font: var(--ts-h1);
    letter-spacing: var(--ts-h1-ls)
}

.hero2-copy h1 .l {
    color: #ff8080
}

.hero2-copy p {
    font: var(--ts-body-l)
}

.tr4-head h2,
.ld2-head h2,
.fs-heading h2,
.handle-head h2,
.reviews-head h2,
.int-text h2,
.swipe-head h2,
.gs2-head h2,
.faq-inner h2,
.fcta-copy h2 {
    font: var(--ts-h2);
    letter-spacing: var(--ts-h2-ls);
    padding-bottom: 0
}

.tr4-head p,
.ld2-head p,
.handle-head .lead,
.reviews-head p,
.swipe-head p,
.gs2-head p,
.fcta-copy p {
    font: var(--ts-body-l)
}

.tr4 {
    padding-top: 116px
}

.tr4-head h2 {
    color: #1e0f49
}

.tr4-head p {
    color: #3d2860
}

.tr4-live {
    font: var(--ts-eyebrow);
    letter-spacing: var(--ts-eyebrow-ls);
    color: #12915e
}

.tr4-stats dt {
    font: var(--ts-stat);
    letter-spacing: var(--ts-stat-ls)
}

.tr4-stats dd {
    font: var(--ts-body-s);
    color: #66577d
}

.tr4-join {
    font: var(--ts-h4);
    color: #66577d
}

.ld2-head h2 {
    max-width: 696px
}

.ld2-head p {
    color: #cecbd4
}

.handle-head {
    gap: 12px
}

.handle-head>.bb-pill {
    margin-bottom: 0
}

.handle-head h2,
.handle-head .lead {
    margin-top: 0
}

.handle-head .lead {
    color: #544a73
}

.reviews-head h2 {
    color: #190041
}

.reviews-head h2 span {
    color: #6f42c1
}

.reviews-head p {
    color: #212529
}

.rv-name {
    font: 600 15px/normal var(--f-semi)
}

.rv-role,
.rv-stat small {
    font: var(--ts-caption);
    color: #cecbd4
}

.rv-quote {
    font: 600 16px/1.45 var(--f-semi)
}

.rv-stat b {
    font: 800 16px/normal var(--f-xbold);
    color: #fbbc04
}

.int-card {
    background-image: linear-gradient(-43deg, #8ec5fc33 8.2446%, #e0c3fc33 91.755%)
}

.int-text h2 {
    color: #190041
}

.int-text p {
    font: var(--ts-body)
}

.int-btn-wrap .btn-outline {
    font: var(--ts-button);
    color: #632dba
}

.swipe-head p {
    color: #9a93ae
}

.gs2-head h2 {
    color: #190041
}

.gs2-head p {
    color: #66577d
}

.faq-inner h2 {
    color: #1f1637
}

.help-card h3 {
    font: var(--ts-h3);
    letter-spacing: var(--ts-h3-ls)
}

.help-card p {
    font: var(--ts-body);
    color: #efeff3
}

.help-card .btn-talk {
    font: var(--ts-button-l)
}

.faq-q {
    font: 600 18px/22px var(--f-semi);
    color: #1f1637
}

.faq-a p {
    font: var(--ts-body);
    color: #212529
}

.fcta-copy h2 span {
    color: #ff3c69
}

.fcta-btn {
    font: var(--ts-button-l)
}

@media (min-width:761px) {
    .tr4-stage {
        height: 493px
    }

    .tr4-impact {
        top: 395px
    }

    .reviews {
        padding-top: 24px;
        padding-bottom: 24px
    }

    .reviews-head h2 {
        padding-bottom: 16px
    }

    .swipe {
        padding-top: 40px;
        padding-bottom: 40px
    }

    .swipe-head h2 {
        padding-bottom: 16px
    }

    .faq-inner>h2 {
        min-height: 57.6px
    }

    .fcta {
        height: 575px
    }

    .fcta-art {
        top: 256px
    }

    .reviews-inner {
        padding: 16px 0
    }

    .fcta-copy {
        padding-top: 40px
    }
}

.ld2-meet h3 {
    font: var(--ts-h3);
    letter-spacing: var(--ts-h3-ls)
}

.ld2-meet>p {
    font: var(--ts-body);
    color: #ccb7f4;
    margin-top: -16px !important
}

.ld2-traits li {
    font: var(--ts-caption)
}

.ld2-toggle button {
    font: var(--ts-button)
}

.ld2-who b {
    font: var(--ts-h4)
}

.ld2-who small {
    font: var(--ts-caption)
}

.ld2-chips button {
    font: var(--ts-button)
}

.ld2-send,
.ld2-callme {
    font: var(--ts-button-l)
}

@media (min-width:761px) {
    .ld2-window {
        height: 330px
    }
}

.rv-tag .who {
    font: 400 9px/normal var(--f-book);
    letter-spacing: .6px;
    color: #fffc
}

.rv-tag .biz {
    font: var(--ts-caption);
    color: #fff
}

.ld2-traits {
    flex-wrap: nowrap
}

@media (min-width:1025px) {
    .ld2 {
        padding-bottom: 56px
    }
}

.hero2-obj {
    z-index: 1;
    pointer-events: none;
    height: auto;
    left: calc(var(--l) * 100%);
    width: calc(var(--w) * 100%);
    bottom: calc(var(--b) * 100%);
    opacity: 0;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 18px 18px #280a5a73);
    transition: opacity .45s, transform .6s cubic-bezier(.2, .8, .2, 1);
    position: absolute;
    transform: translateY(14px)scale(.96)
}

.hero2-obj.is-on {
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .hero2-obj {
        transition: none
    }
}

@media (max-width:760px) {
    .hero2-obj {
        left: calc((100% - 582px) * .58 + 582px * var(--l));
        width: calc(582px * var(--w));
        bottom: calc(290px * var(--b))
    }
}

.hero2-ind {
    z-index: 3;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(7.5px);
    backdrop-filter: blur(7.5px);
    background: #632dba26;
    border: .8px solid #ffffff59;
    border-radius: 48px;
    align-items: center;
    gap: 4px;
    padding: 24px 8px;
    display: flex;
    position: absolute;
    top: 818px;
    left: 50%;
    transform: translate(-50%)
}

@media (min-width:761px) {
    .hero2-ind {
        top: auto;
        bottom: 32.4px
    }
}

.hero2-ind-btn {
    color: #fff;
    font: var(--ts-body-s, 400 14px/1.55 var(--f-book));
    white-space: nowrap;
    cursor: pointer;
    background: 0 0;
    border: 1px solid #0000;
    border-radius: 24px;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    transition: background .25s, border-color .25s;
    display: inline-flex
}

.hero2-ind-btn img {
    flex: none;
    display: block
}

.hero2-ind-btn:hover {
    background: #ffffff14
}

.hero2-ind-btn.on {
    background: #632dba;
    border-color: #fff
}

.hero2-ind-btn:focus-visible {
    outline-offset: 2px;
    outline: 2px solid #ffc300
}

@media (max-width:760px) {
    .hero2-ind {
        z-index: 3;
        scrollbar-width: none;
        border-radius: 28px;
        justify-content: flex-start;
        gap: 4px;
        width: calc(100% - 32px);
        margin: 12px auto 56px;
        padding: 10px;
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        overflow-x: auto;
        transform: none
    }

    .hero2-ind::-webkit-scrollbar {
        display: none
    }

    .hero2-ind-btn {
        padding: 6px 12px;
        font-size: 13px
    }
}

.ip-eyebrow {
    font: 600 12px/1 var(--f-semi);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #632dba;
    display: block
}

.ip-intro,
.ip-group-head,
.ip-split-txt,
.ip-hero-text {
    gap: 24px
}

.ip-hero h1,
.banner-content h1 {
    font: var(--ts-h1);
    letter-spacing: var(--ts-h1-ls, -1.92px)
}

.ip-intro h2,
.ip-group-head h2,
.ip-split-txt h2,
.ip-faq-intro h2,
.ip-story h2 {
    font: var(--ts-h2);
    letter-spacing: -1.5px
}

.ip-intro p:not(.ip-label),
.ip-group-head p:not(.ip-label),
.ip-split-txt>p:not(.ip-label),
.ip-hero-text>p {
    font: var(--ts-body)
}

.ip-card h3 {
    font: var(--ts-h3);
    letter-spacing: -.8px
}

@media (max-width:760px) {
    .ip-hero h1 {
        letter-spacing: -1.1px;
        font-size: 36px
    }

    .ip-intro h2,
    .ip-group-head h2,
    .ip-split-txt h2,
    .ip-faq-intro h2,
    .ip-story h2 {
        letter-spacing: -.8px;
        font-size: 30px
    }

    .ip-card h3 {
        font-size: 22px
    }
}

.ph-hero h1 {
    font: var(--ts-h1);
    letter-spacing: var(--ts-h1-ls)
}

.ph-head h2,
.ph-setup h2,
.ph-rel-head h2 {
    font: var(--ts-h2);
    letter-spacing: var(--ts-h2-ls)
}

.ph-rel-head h2 {
    max-width: 760px
}

.ph-why h2 {
    font: var(--ts-h4);
    font-size: 20px
}

.ph-about .ip-eyebrow {
    margin-top: 4px;
    font-size: 10px
}

.ph-why .ip-eyebrow {
    color: #632dba;
    font-size: 10px
}

@media (max-width:760px) {
    .ph-hero h1 {
        letter-spacing: -1.1px;
        font-size: 36px;
        line-height: 1.15
    }

    .ph-head h2,
    .ph-setup h2,
    .ph-rel-head h2 {
        letter-spacing: -.8px;
        font-size: 30px
    }
}

.fp {
    padding-top: calc(var(--hdr-h) + 12px);
    color: #190041;
    background: linear-gradient(#190041, #190041) top / 100% calc(var(--hdr-h) + 12px) no-repeat, url(../public/assets/int/page-bg.webp) 0 calc(var(--hdr-h) + 12px) / 100% calc(100% - var(--hdr-h) - 12px) no-repeat, #fff
}

.fp-hero {
    flex-direction: column;
    align-items: center;
    gap: 48px;
    padding: 70px 32px 64px;
    display: flex
}

.fp-hero-text {
    text-align: center;
    flex-direction: column;
    align-items: center;
    width: min(780px, 100%);
    display: flex
}

.fp-hero-text h1 {
    font: var(--ts-h1);
    letter-spacing: var(--ts-h1-ls);
    color: #190041;
    margin: 14px 0 0
}

.fp-redline {
    object-fit: fill;
    width: calc(100% - 26px);
    height: 12px;
    display: block
}

.fp-hero-text p {
    max-width: 660px;
    font: var(--ts-body);
    color: #544a73;
    margin: 18px 0 0
}

.fp-btns {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    display: flex
}

.fp-btn {
    color: #fff;
    font: var(--ts-button);
    background: #632dba;
    border-radius: 12px;
    align-items: center;
    padding: 14px 18px 14px 22px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
    display: inline-flex
}

.fp-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -10px #632dba99
}

.fp-btn.ghost {
    color: #632dba;
    background: 0 0;
    border: 1.5px solid #ccbdf2;
    padding: 12.5px 20.5px 12.5px 16.5px
}

.fp-btn.ghost:hover {
    box-shadow: none;
    background: #fff
}

.fp-bento {
    grid-template-columns: 789fr 415fr;
    gap: 16px;
    width: min(1220px, 100%);
    display: grid
}

.fp-call {
    border-radius: 20px;
    width: 100%;
    height: auto;
    display: block
}

.fp-side {
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    display: grid
}

.fp-stat {
    text-align: center;
    background: #fff;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 24px;
    display: flex
}

.fp-stat b {
    font: 800 48px/1.08 var(--f-xbold);
    letter-spacing: -1.5px;
    color: #12915e
}

.fp-stat span {
    max-width: 208px;
    font: var(--ts-body-s);
    color: #544a73
}

.fp-chart {
    width: 100%;
    height: auto;
    display: block
}

.fp-how {
    box-sizing: content-box;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 32px;
    display: flex
}

.fp-how h2 {
    font: var(--ts-h3);
    letter-spacing: var(--ts-h3-ls);
    color: #190041;
    text-align: center;
    margin: 0 0 12px
}

.fp-how-row {
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #c2bacf;
    border-radius: 20px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: 0;
    padding: 32px;
    list-style: none;
    display: grid
}

.fp-how-row li {
    text-align: center;
    flex-direction: column;
    align-items: center;
    padding: 0 45px 0 32px;
    display: flex
}

.fp-how-row li+li {
    border-left: 2px solid #c2bacf
}

.fp-how-row h3 {
    font: var(--ts-h4);
    color: #190041;
    margin: 20px 0 10px
}

.fp-how-row p {
    max-width: 251px;
    font: var(--ts-body-s);
    color: #190041
}

.fp-can {
    box-sizing: border-box;
    grid-template-columns: 600px 1fr;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 80px 120px;
    display: grid;
    position: relative
}

.fp-can-left h2 {
    font: var(--ts-h2);
    letter-spacing: var(--ts-h2-ls);
    color: #190041;
    margin: 18px 0 52px
}

.fp-acc {
    flex-direction: column;
    gap: 12px;
    display: flex
}

.fp-acc-item {
    background: #fff;
    border: 1px solid #ece7f6;
    border-radius: 18px;
    transition: background .3s, box-shadow .3s, border-color .3s;
    overflow: hidden
}

.fp-acc-q {
    cursor: pointer;
    text-align: left;
    color: #190041;
    background: 0 0;
    border: 0;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px;
    display: flex
}

.fp-acc-ic {
    background: #f3edff;
    border-radius: 12px;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    transition: all .3s;
    display: flex
}

.fp-acc-t {
    font: var(--ts-h4);
    flex: 1;
    transition: font-size .3s
}

.fp-acc-plus {
    flex: none;
    transition: opacity .2s
}

.fp-acc-a {
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s;
    display: grid
}

.fp-acc-a>div {
    overflow: hidden
}

.fp-acc-a p {
    font: var(--ts-body);
    color: #e5dbff;
    padding: 0 28px 26px
}

.fp-acc-item.is-open {
    background: #632dba;
    border-color: #632dba;
    box-shadow: 0 18px 40px -10px #632dba4d
}

.fp-acc-item.is-open .fp-acc-q {
    color: #fff;
    cursor: default;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 26px 28px 10px
}

.fp-acc-item.is-open .fp-acc-ic {
    background: #ffffff29;
    width: 48px;
    height: 48px;
    box-shadow: inset 0 0 0 1px #ffffff40
}

.fp-acc-item.is-open .fp-acc-ic img {
    filter: brightness(0)invert()
}

.fp-acc-item.is-open .fp-acc-t {
    font: var(--ts-h3);
    letter-spacing: var(--ts-h3-ls)
}

.fp-acc-item.is-open .fp-acc-plus {
    display: none
}

.fp-acc-item.is-open .fp-acc-a {
    grid-template-rows: 1fr
}

.fp-acc-item:not(.is-open):hover {
    border-color: #ccbdf2
}

.fp-can-vis {
    position: relative
}

.fp-dash {
    width: 720px;
    max-width: none;
    height: auto;
    position: absolute;
    top: 258px;
    left: 0
}

.fp-toast {
    width: 365px;
    height: auto;
    animation: 4s ease-in-out infinite fpToast;
    position: absolute;
    top: 688px;
    left: -12px
}

@keyframes fpToast {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }
}

@media (prefers-reduced-motion:reduce) {
    .fp-toast {
        animation: none
    }
}

.fp-onboard .ph-setup {
    background: linear-gradient(-56deg, #f7f5fe 8%, #f0eafd 92%)
}

.fp-onboard .ph-setup h2 {
    font: var(--ts-h2);
    letter-spacing: var(--ts-h2-ls)
}

.fp-onboard .ph-setup-sub {
    font: var(--ts-body-l);
    color: #3e2960b3
}

.fp-onboard .ph-steps p {
    font: var(--ts-body)
}

.fp-faq {
    background: 0 0
}

.fp-faq .faq-inner>h2 {
    color: #1f1637;
    font: var(--ts-h2);
    letter-spacing: var(--ts-h2-ls)
}

@media (max-width:1240px) {
    .fp-can {
        grid-template-columns: 1fr;
        padding: 80px 48px
    }

    .fp-can-vis {
        height: 520px
    }

    .fp-dash {
        top: 0;
        left: 50%;
        transform: translate(-50%)
    }

    .fp-toast {
        top: 410px;
        left: calc(50% - 360px)
    }
}

@media (max-width:900px) {
    .fp-bento {
        grid-template-columns: 1fr
    }

    .fp-side {
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr
    }

    .fp-how-row {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .fp-how-row li {
        padding: 0
    }

    .fp-how-row li+li {
        border-top: 2px solid #c2bacf;
        border-left: 0;
        padding-top: 24px
    }
}

@media (max-width:760px) {
    .fp-hero {
        gap: 32px;
        padding: 40px 16px
    }

    .fp-hero-text h1 {
        letter-spacing: -1.1px;
        font-size: 36px;
        line-height: 1.12
    }

    .fp-side {
        grid-template-columns: 1fr
    }

    .fp-how {
        padding: 32px 16px
    }

    .fp-can {
        padding: 56px 16px
    }

    .fp-can-left h2 {
        letter-spacing: -.8px;
        margin-bottom: 28px;
        font-size: 30px
    }

    .fp-acc-item.is-open .fp-acc-t {
        font-size: 22px
    }

    .fp-can-vis {
        flex-direction: column;
        align-items: center;
        height: auto;
        display: flex
    }

    .fp-dash {
        width: calc(100% + 32px);
        margin: 0 -16px;
        position: static;
        transform: none
    }

    .fp-toast {
        width: 300px;
        margin-top: -24px;
        position: static
    }

    .fp-onboard .ph-setup h2 {
        letter-spacing: -.8px;
        font-size: 30px
    }
}

.fp-onboard .ph-setup .bb-pill.bb-pill {
    color: #0bad7f;
    font: var(--ts-button);
    text-transform: none;
    letter-spacing: 0;
    background: #fff9;
    border: 0;
    border-radius: 999px;
    gap: 8px;
    padding: 7px 16px 7px 14px
}

.fp-onboard .ph-setup .bb-pill.bb-pill i {
    width: 6px;
    height: 6px;
    box-shadow: none;
    background: #0bad7f;
    animation: none
}

.ld2-note {
    max-width: 90%;
    font: var(--ts-caption, 400 12px/1.4 var(--f-book));
    color: #fff3c4;
    text-align: center;
    background: #ffc3001f;
    border: 1px solid #ffc30059;
    border-radius: 12px;
    align-self: center;
    margin: 4px auto;
    padding: 8px 14px
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}