/*! tailwindcss v4.2.1 | 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-ease: initial
        }
    }
}

@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, ui-sans-serif, system-ui, 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;
        -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 {
        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
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .block {
        display: block
    }

    .table {
        display: table
    }

    .ease-in-out {
        --tw-ease: var(--ease-in-out);
        transition-timing-function: var(--ease-in-out)
    }
}

:root {
    --mint: #49d4ae;
    --gold: #ffb931;
    --pink: #ef476f;
    --ink: #0f1f33;
    --muted: #667283;
    --paper: #fafbfe;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    line-height: 1.9
}

a {
    color: inherit
}

.topbar {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    z-index: 10;
    background: #fafbfee0;
    border-bottom: 1px solid #2e73ce1a;
    justify-content: space-between;
    align-items: center;
    height: 76px;
    padding: 0 clamp(22px, 5vw, 76px);
    display: flex;
    position: relative
}

.brand {
    letter-spacing: .08em;
    color: var(--primaryblue);
    align-items: center;
    gap: 10px;
    font-size: 1.16rem;
    font-weight: 700;
    text-decoration: none;
    display: flex
}

.brand span {
    letter-spacing: 0;
    color: var(--ink);
    font-size: .78rem;
    font-weight: 600
}

.top-cta,
.button {
    border-radius: 999px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, background .25s;
    display: inline-flex
}

.top-cta {
    background: var(--ink);
    color: #fff;
    padding: 9px 20px;
    font-size: .85rem
}

.top-cta:hover,
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px #0f1f332e
}

.hero {
    background: linear-gradient(135deg, #f8fbff 0%, #fff 48%, #f1fbf8 100%);
}

.herobox {
    gap: clamp(50px, 7vw, 110px);
    min-height: 690px;
    padding: clamp(50px, 7vw, 100px) clamp(22px, 5vw, 76px);
    display: grid;
    position: relative;
    width: 1380px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding-right: 85px;
    padding-left: 63px;
    align-items: center;
    z-index: 2;
    grid-template-columns: minmax(0, .94fr) minmax(560px, 1.06fr);
    min-height: 915px;
    margin-top: 32px !important;
    padding-top: clamp(105px,9vw,145px) !important;
    padding-bottom: clamp(80px,8vw,120px) !important

}

.hero-copy {
    z-index: 2;
    max-width: 660px;
    position: relative
}

.eyebrow {
    color: var(--primaryblue);
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: .85rem;
    font-weight: 600;
    display: flex
}

.eyebrow span {
    background: var(--mint);
    width: 34px;
    height: 2px
}

.herobox h1,
.herobox .headerTitle {
    color: var(--darkbluetext);
}

.herobox .headerTitleBold {
    color: var(--darkbluetext);
}

.herobox p {
    color: var(--darkbluetext);
}

h1 {
    letter-spacing: -.035em;
    max-width: 720px;
    margin: 0 0 22px;
    font-size: clamp(2.25rem, 4.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.25
}

.hero-prose>p {
    color: #46566c;
    border-right: 3px solid #2e73ce47;
    margin: 0 0 14px;
    padding-right: 18px;
    font-size: clamp(.98rem, 1.15vw, 1.12rem)
}

.hero-prose .button {
    background: var(--primaryblue);
    color: #fff;
    margin-top: 12px;
    padding: 12px 26px
}

.hero-prose small {
    color: var(--muted);
    margin-top: 9px;
    font-size: .77rem;
    display: block
}

.hero-visual {
    background: #eaf2f8;
    border-radius: 38% 9% 35% 8%;
    min-height: 500px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 35px 90px #214a7a2e
}

.hero-visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
}

.signal {
    border: 1px solid #fffc;
    border-radius: 50%;
    position: absolute;
    box-shadow: 0 0 0 10px #49d4ae2e
}

.signal-a {
    width: 18px;
    height: 18px;
    top: 25%;
    right: 18%
}

.signal-b {
    width: 12px;
    height: 12px;
    top: 60%;
    right: 30%;
    box-shadow: 0 0 0 8px #ffb93133
}

.marquee {
    background: var(--primaryblue);
    color: #fff;
    white-space: nowrap;
    padding: 13px 0;
    font-size: .86rem;
    font-weight: 600;
    overflow: hidden
}

.marquee div {
    width: max-content;
    animation: 25s linear infinite marquee
}

@keyframes marquee {
    to {
        transform: translate(50%)
    }
}

.page-shell {
    width: min(1180px, 100% - 44px);
    margin: auto
}

.content-section {
    border-bottom: 1px solid var(--line);
    padding: clamp(76px, 9vw, 126px) 0;
    padding-top: clamp(82px, 8vw, 118px) !important;
    padding-bottom: clamp(82px,8vw,118px) !important;

}

.section-head {
    grid-template-columns: 58px 1fr;
    align-items: start;
    gap: 20px;
    margin-bottom: 32px;
    display: grid
}

.section-head span {
    color: var(--primaryblue);
    padding-top: 10px;
    font-size: .8rem;
    font-weight: 800
}

.section-head h2 {
    letter-spacing: -.02em;
    margin: 0;
    font-size: clamp(1.65rem, 2.7vw, 2.55rem);
    font-weight: 700;
    line-height: 1.45
}

.prose {
    color: #536176;
    max-width: 940px
}

.ruled {
    border-right: 3px solid var(--primaryblue);
    padding-right: 24px
}

.prose p {
    margin: 0 0 15px
}

.prose a,
.feature-card a {
    color: var(--primaryblue);
    font-weight: 600
}

.cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 36px;
    display: grid
}

.cards.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.feature-card {
    background: #fff;
    border: 1px solid #e2e9f2;
    border-radius: 22px;
    min-height: 230px;
    padding: 26px;
    transition: transform .28s, box-shadow .28s;
    position: relative;
    overflow: hidden
}

.feature-card:after {
    content: "";
    background: var(--accent, var(--primaryblue));
    width: 0;
    height: 4px;
    transition: width .3s;
    position: absolute;
    bottom: 0;
    right: 0
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px #2d56871f
}

.feature-card:hover:after {
    width: 100%
}

.feature-card:nth-child(4n+2) {
    --accent: var(--mint)
}

.feature-card:nth-child(4n+3) {
    --accent: var(--gold)
}

.feature-card:nth-child(4n+4) {
    --accent: var(--pink)
}

.feature-card h3 {
    margin: 16px 0 9px;
    font-size: 1.08rem;
    line-height: 1.7
}

.feature-card p {
    color: #647187;
    margin: 0;
    font-size: .88rem
}

.icon {
    width: 42px;
    height: 42px;
    color: var(--primaryblue);
    background: #e9f2fd;
    border-radius: 14px;
    place-items: center;
    display: grid
}

.icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 22px;
    height: 22px
}

.tone-1 {
    color: #219c7b;
    background: #e8f9f4
}

.tone-2 {
    color: #c48300;
    background: #fff4dc
}

.tone-3 {
    color: #d62f5b;
    background: #feeaf0
}

.tone-4 {
    color: #665bd3;
    background: #eef0ff
}

.tone-5 {
    color: #4d7698;
    background: #eef4f9
}

.journey {
    background: var(--ink);
    text-align: center;
    word-spacing: 5px;
    border-radius: 18px;
    font-size: clamp(.85rem, 1.5vw, 1.05rem);
    color: #fff !important;
    border: 0 !important;
    padding: 22px !important
}

.footer-brand {
    background: var(--ink);
    color: #fff;
    justify-content: center;
    padding: 38px
}

.footer-brand span {
    color: #b9c6d8
}

/* .reveal {
    animation: linear both appear;
    animation-timeline: view();
    animation-range: entry 8% cover 28%
}

@keyframes appear {
    0% {
        opacity: .25;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: none
    }
} */

@media (width<=960px) {
    .herobox {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-copy {
        max-width: none
    }

    .hero-visual {
        min-height: 420px
    }

    .cards,
    .cards.cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .cards .feature-card:last-child:nth-child(odd) {
        grid-column: 1/-1;
        min-height: auto
    }

    .section-head {
        grid-template-columns: 42px 1fr
    }
}

@media (width<=620px) {
    .topbar {
        height: 66px
    }

    .top-cta {
        padding: 8px 15px
    }

    .herobox {
        padding-top: 44px
    }

    .hero-visual {
        border-radius: 28px;
        min-height: 310px
    }

    .cards,
    .cards.cols-4 {
        grid-template-columns: 1fr
    }

    .cards .feature-card:last-child:nth-child(odd) {
        grid-column: auto
    }

    .feature-card {
        min-height: auto;
        padding: 22px
    }

    .section-head {
        display: block
    }

    .section-head span {
        margin-bottom: 7px;
        display: block
    }

    .ruled {
        padding-right: 16px
    }

    .page-shell {
        width: min(100% - 30px, 1180px)
    }

    .marquee {
        font-size: .76rem
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .marquee div,
    .reveal {
        animation: none
    }

    .feature-card,
    .button,
    .top-cta {
        transition: none
    }
}

.hero-prose>p,
.content-section>.ruled {
    border-right: 0;
    padding-right: 0
}

.hero-visual {
    border-radius: 32px;
    min-height: 530px;
    overflow: visible
}

.hero-visual>img {
    border-radius: 32px;
    box-shadow: 0 35px 90px #214a7a2e
}

.hero-float {
    z-index: 3;
    white-space: nowrap;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #fffffff0;
    border: 1px solid #2e73ce21;
    border-radius: 18px;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    font-size: .78rem;
    font-weight: 600;
    display: flex;
    position: absolute;
    box-shadow: 0 16px 38px #0f1f3324
}

.hero-float .icon {
    border-radius: 10px;
    width: 34px;
    height: 34px
}

.hero-float .icon svg {
    width: 18px;
    height: 18px
}

.float-c {
    bottom: -22px;
    right: 10%
}

.hero-transition {
    background: linear-gradient(180deg, #edf7f5 0%, var(--paper) 100%);
    height: 118px;
    position: relative;
    overflow: hidden
}

.hero-transition:before,
.hero-transition:after {
    content: "";
    border: 1px solid #2e73ce29;
    border-radius: 50%;
    position: absolute
}

.hero-transition:before {
    width: 220px;
    height: 220px;
    top: -160px;
    right: 12%
}

.hero-transition:after {
    width: 130px;
    height: 130px;
    bottom: -92px;
    left: 16%
}

.hero-transition span {
    background: linear-gradient(90deg, transparent, var(--mint), var(--primaryblue), transparent);
    width: min(700px, 70%);
    height: 1px;
    position: absolute;
    top: 50%;
    right: 15%
}

.hero-transition i {
    border: 2px solid var(--primaryblue);
    z-index: 2;
    background: #fff;
    border-radius: 50%;
    width: 9px;
    height: 9px;
    position: absolute;
    top: calc(50% - 4px)
}

.hero-transition i:first-child {
    right: 24%
}

.hero-transition i:nth-child(2) {
    border-color: var(--mint);
    right: 49%
}

.hero-transition i:nth-child(3) {
    border-color: var(--gold);
    right: 74%
}

.section-head {
    margin-bottom: 28px;
    display: block
}

.section-head h2 {
    max-width: 820px
}

.section-visual {
    background: linear-gradient(145deg, #f5f9fe, #eef8f5);
    border: 1px solid #2e73ce1a;
    border-radius: 28px;
    min-height: 280px;
    margin: 0;
    overflow: hidden
}

.section-visual img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block
}

.integrated-section,
.auto-section {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 28px 56px;
    display: grid
}

.integrated-section .section-head,
.auto-section .section-head,
.integrated-section>.prose,
.auto-section>.prose {
    grid-column: 1
}

.integrated-section>.section-visual,
.auto-section>.section-visual {
    grid-area: 1/2/3;
    min-height: 370px
}

.how-section .feature-card .icon {
    color: var(--primaryblue);
    background: #e9f2fd
}

.loyalty-section .cards,
.business-section .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.loyalty-section .feature-card .icon,
.benefits-section .feature-card .icon {
    color: var(--primaryblue);
    background: #e9f2fd
}

.loyalty-section .feature-card:after,
.benefits-section .feature-card:after {
    background: var(--primaryblue)
}

.grid-visual {
    min-height: 230px
}

.business-section .cards {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.business-section .grid-visual,
.business-section .feature-card:nth-child(5) {
    grid-column: auto
}

.flow-section,
.closing-section {
    background: radial-gradient(circle at 12% 20%, #2e73ce33, transparent 28%), var(--ink);
    color: #fff;
    border: 0;
    border-radius: 34px;
    margin: 70px 0;
    padding: clamp(48px, 7vw, 80px);
    box-shadow: 0 28px 70px #0f1f3333
}

.flow-section .section-head h2,
.closing-section .section-head h2 {
    color: #72afff
}

.flow-section>.prose,
.closing-section>.prose {
    color: #d6dfeb;
    max-width: none
}

.flow-section .journey {
    background: #ffffff0f;
    color: #fff !important;
    border: 1px solid #72afff40 !important
}

.closing-section .button {
    background: var(--primaryblue);
    color: #fff;
    padding: 12px 26px
}

.closing-section small {
    color: #aebed0;
    margin-top: 9px;
    display: block
}

.benefits-section .feature-card {
    min-height: 190px
}

.benefits-section .icon {
    border-radius: 50%;
    width: 34px;
    height: 34px
}

.benefits-section .icon svg {
    width: 18px;
    height: 18px
}

.guide-section .cards {
    margin: 44px 0 0;
    padding-right: 42px;
    display: block;
    position: relative
}

.guide-section .cards:before {
    content: "";
    background: linear-gradient(var(--primaryblue), var(--mint), #2e73ce1f);
    width: 2px;
    position: absolute;
    top: 6px;
    bottom: 10px;
    right: 12px
}

.guide-section .feature-card {
    min-height: 0;
    box-shadow: none;
    background: 0 0;
    border: 0;
    border-radius: 0;
    padding: 0 28px 36px 0;
    overflow: visible
}

.guide-section .feature-card:hover {
    box-shadow: none;
    transform: none
}

.guide-section .feature-card:before {
    content: "";
    border: 4px solid var(--primaryblue);
    background: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 7px;
    right: -38px;
    box-shadow: 0 0 0 7px #e9f2fd
}

.guide-section .feature-card:nth-child(2n):before {
    border-color: var(--mint);
    box-shadow: 0 0 0 7px #e8f9f4
}

.guide-section .feature-card:after {
    display: none
}

.guide-section .feature-card h3 {
    margin: 0 0 7px;
    font-size: 1.12rem
}

.guide-section .feature-card p {
    max-width: 900px;
    font-size: .94rem
}

.guide-section .icon {
    display: none
}

@media (width<=960px) {

    .integrated-section,
    .auto-section {
        grid-template-columns: 1fr
    }

    .integrated-section .section-head,
    .integrated-section>.prose,
    .integrated-section>.section-visual,
    .auto-section .section-head,
    .auto-section>.prose,
    .auto-section>.section-visual {
        grid-area: auto/1
    }

    .loyalty-section .cards,
    .business-section .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .hero-float {
        font-size: .72rem
    }

    .float-a {
        right: 12px
    }

    .float-b {
        left: 12px
    }
}

@media (width<=620px) {
    .herobox {
        padding-bottom: 62px
    }

    .hero-visual {
        min-height: 380px
    }

    .hero-float {
        padding: 8px 10px
    }

    .float-a {
        top: 8%;
        right: 8px
    }

    .float-b {
        top: 54%;
        left: 8px
    }

    .float-c {
        bottom: -24px;
        right: 8%
    }

    .hero-transition {
        height: 86px
    }

    .loyalty-section .cards,
    .business-section .cards {
        grid-template-columns: 1fr
    }

    .flow-section,
    .closing-section {
        border-radius: 24px;
        margin: 44px 0;
        padding: 34px 22px
    }

    .guide-section .cards {
        padding-right: 32px
    }

    .guide-section .feature-card {
        padding-right: 20px
    }

    .guide-section .feature-card:before {
        right: -30px
    }

    .section-visual {
        min-height: 250px
    }
}

.hero-prose .button+small {
    background: #fff;
    border-radius: 999px;
    width: max-content;
    max-width: 100%;
    padding: 8px 14px 8px 34px;
    position: relative;
    box-shadow: 0 10px 30px #0f1f3314
}

.hero-prose .button+small:before {
    content: "";
    background: var(--mint);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    box-shadow: 0 0 0 5px #49d4ae24
}

.hero-visual {
    isolation: isolate;
    background: 0 0;
    min-height: 570px
}

.hero-visual>img {
    clip-path: path("M 92 10 C 210 -18 425 12 510 86 C 585 152 560 270 580 360 C 596 438 532 532 438 550 C 330 570 238 525 132 548 C 48 565 -2 502 18 412 C 37 326 -5 243 34 157 C 54 110 40 32 92 10 Z");
    box-shadow: none;
    z-index: 1;
    object-position: 42% center;
    border-radius: 0
}

.hero-blob {
    z-index: -1;
    filter: saturate(.95);
    position: absolute
}

.blob-a {
    clip-path: polygon(8% 8%, 77% 0, 100% 23%, 91% 85%, 60% 100%, 12% 91%, 0 55%);
    background: linear-gradient(140deg, #2e73ce52, #49d4ae4d);
    inset: -22px 5% 6% -2%
}

.blob-b {
    background: #ffb9315c;
    border-radius: 68% 32% 58% 42%/38% 67% 33% 62%;
    width: 160px;
    height: 180px;
    bottom: 25px;
    left: -40px
}

.blob-c {
    background: #ef476f33;
    border-radius: 34% 66% 43% 57%/62% 36% 64% 38%;
    width: 130px;
    height: 125px;
    top: 22px;
    right: -22px
}

.hero-float {
    z-index: 5;
    border: 1px solid #ffffffe0;
    padding: 9px 13px;
    font-size: .72rem;
    box-shadow: 0 13px 34px #0f1f3326
}

.float-a {
    top: 7%;
    right: -12px
}

.float-b {
    top: 25%;
    left: -18px
}

.float-c {
    top: 42%;
    bottom: auto;
    right: -28px
}

.float-d {
    top: 57%;
    left: -34px
}

.float-e {
    bottom: 18%;
    right: 0
}

.float-f {
    bottom: 3%;
    left: 4%
}

.float-g {
    top: -20px;
    right: 31%
}

.hero-transition span {
    background: linear-gradient(90deg, transparent, #2e73ce40, var(--mint), #2e73ce40, transparent);
    height: 2px
}

.section-visual {
    box-shadow: none;
    background: 0 0;
    border: 0;
    overflow: visible
}

.section-visual img {
    object-fit: contain;
    filter: none
}

.integrated-section>.section-visual,
.auto-section>.section-visual {
    clip-path: polygon(8% 4%, 82% 0, 100% 22%, 94% 82%, 74% 100%, 12% 93%, 0 62%, 3% 23%);
    background: radial-gradient(circle at 45% 45%, #49d4ae1f, #0000 55%);
    min-height: 410px;
    padding: 26px
}

.integrated-section {
    position: relative
}

.integrated-section:before {
    content: "";
    z-index: -1;
    background: #2e73ce14;
    border-radius: 31% 69% 62% 38%/44% 41% 59% 56%;
    width: 160px;
    height: 160px;
    position: absolute;
    top: 80px;
    left: -40px
}

.loyalty-section {
    background: linear-gradient(135deg, #49d4ae 0%, #86e6ca 100%);
    border: 0;
    border-radius: 40px;
    width: calc(100% + 100px);
    margin-right: -50px;
    padding: clamp(58px, 7vw, 92px) 50px;
    position: relative;
    overflow: hidden
}

.loyalty-section:after {
    content: "";
    border: 1px solid #ffffff80;
    border-radius: 50%;
    width: 320px;
    height: 320px;
    position: absolute;
    top: -140px;
    left: -120px;
    box-shadow: 0 0 0 45px #ffffff14, 0 0 0 90px #ffffff0d
}

.loyalty-section .section-head,
.loyalty-section>.prose,
.loyalty-section .cards {
    z-index: 1;
    position: relative
}

.loyalty-section .cards {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.loyalty-section .feature-card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffffdb;
    border-color: #ffffffbf
}

.loyalty-section .grid-visual {
    clip-path: polygon(12% 4%, 88% 0, 100% 29%, 91% 92%, 58% 100%, 5% 84%, 0 31%);
    background: #ffffff3b;
    padding: 18px
}

.business-section .grid-visual {
    clip-path: polygon(15% 2%, 89% 0, 100% 25%, 92% 88%, 67% 100%, 7% 90%, 0 52%, 5% 16%);
    background: linear-gradient(145deg, #2e73ce1a, #49d4ae29);
    grid-column: span 1;
    min-height: 100%;
    padding: 8px
}

.business-section .grid-visual img {
    object-fit: cover;
    object-position: center top
}

.business-section .feature-card {
    border-radius: 28px 12px
}

.auto-section>.section-visual {
    clip-path: polygon(3% 11%, 74% 0, 100% 18%, 93% 78%, 72% 100%, 14% 92%, 0 62%);
    background: linear-gradient(145deg, #2e73ce12, #49d4ae24)
}

.closing-section {
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
    padding-left: 34%;
    display: flex;
    position: relative;
    overflow: hidden
}

.closing-section:before {
    content: "";
    background: var(--mint);
    border-radius: 45% 55% 38% 62%/55% 36% 64% 45%;
    width: 430px;
    height: 430px;
    position: absolute;
    top: -34%;
    left: -8%;
    box-shadow: 0 0 0 48px #49d4ae17, 0 0 0 96px #2e73ce12
}

.closing-section:after {
    content: "";
    border: 2px solid #fff9;
    border-radius: 28px;
    width: 120px;
    height: 180px;
    position: absolute;
    top: 23%;
    left: 9%;
    transform: rotate(-8deg);
    box-shadow: 26px 25px 0 -8px #2e73ce8c
}

.closing-section>* {
    z-index: 1;
    position: relative
}

.closing-section .section-head h2 {
    font-size: clamp(1.9rem, 3vw, 3rem)
}

.closing-section>.prose p {
    font-size: 1.02rem
}

@media (width<=1100px) {
    .float-a {
        right: 0
    }

    .float-b {
        left: 0
    }

    .float-c {
        right: 0
    }

    .float-d {
        left: 0
    }

    .loyalty-section {
        width: 100%;
        margin-right: 0
    }

    .closing-section {
        padding-left: 28%
    }
}

@media (width<=960px) {
    .hero-visual>img {
        clip-path: polygon(8% 2%, 84% 0, 100% 24%, 92% 88%, 62% 100%, 5% 91%, 0 47%)
    }

    .hero-float {
        font-size: .68rem
    }

    .loyalty-section {
        padding-inline: 26px
    }

    .closing-section {
        padding-bottom: 210px;
        padding-left: 30px
    }

    .closing-section:before {
        width: 380px;
        height: 380px;
        top: auto;
        bottom: -260px;
        left: 16%
    }

    .closing-section:after {
        top: auto;
        bottom: 30px;
        left: 36%
    }
}

@media (width<=620px) {
    .hero-visual {
        min-height: 470px;
        margin-top: 18px
    }

    .hero-visual>img {
        height: 380px;
        top: 42px
    }

    .hero-float {
        padding: 7px 9px;
        font-size: .61rem
    }

    .hero-float .icon {
        display: none
    }

    .float-a {
        top: 2%;
        right: 2%
    }

    .float-b {
        top: 19%;
        left: 0
    }

    .float-c {
        top: 37%;
        right: 0
    }

    .float-d {
        top: 55%;
        left: 0
    }

    .float-e {
        bottom: 15%;
        right: 0
    }

    .float-f {
        bottom: 1%;
        left: 0
    }

    .float-g {
        top: 6%;
        left: 10%;
        right: auto
    }

    .loyalty-section {
        border-radius: 28px;
        padding: 48px 18px
    }

    .integrated-section>.section-visual,
    .auto-section>.section-visual {
        min-height: 290px;
        padding: 12px
    }

    .closing-section {
        padding: 38px 22px 205px
    }

    .closing-section:before {
        left: -10%
    }

    .closing-section:after {
        left: 34%
    }
}

.hero-visual>img {
    animation: 7s ease-in-out infinite alternate hero-breathe
}

.hero-blob {
    animation: 9s ease-in-out infinite alternate blob-drift
}

.blob-b {
    animation-delay: -3s
}

.blob-c {
    animation-delay: -6s
}

.hero-float {
    animation: 4.8s ease-in-out infinite float-card
}

.float-b,
.float-e {
    animation-delay: -1.2s
}

.float-c,
.float-f {
    animation-delay: -2.4s
}

.float-d,
.float-g {
    animation-delay: -3.4s
}

.section-visual {
    isolation: isolate;
    position: relative
}

.section-visual img {
    z-index: 2;
    animation: 6.5s ease-in-out infinite alternate visual-hover;
    position: relative
}

.motion-orbit {
    z-index: 3;
    background: var(--primaryblue);
    pointer-events: none;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    position: absolute;
    box-shadow: 0 0 0 8px #2e73ce1c
}

.orbit-a {
    animation: 7s ease-in-out infinite orbit-a;
    top: 15%;
    right: 12%
}

.orbit-b {
    background: var(--mint);
    width: 10px;
    height: 10px;
    animation: 8s ease-in-out infinite orbit-b;
    bottom: 14%;
    left: 13%;
    box-shadow: 0 0 0 7px #49d4ae21
}

.loyalty-section .feature-card:nth-child(odd) {
    animation: 6s ease-in-out infinite card-soft-rise
}

.loyalty-section .feature-card:nth-child(2n) {
    animation: 6s ease-in-out -3s infinite card-soft-rise
}

.guide-section .feature-card:before {
    animation: 3.2s ease-in-out infinite timeline-pulse
}

.guide-section .feature-card:nth-child(2n):before {
    animation-delay: -1.6s
}

.closing-section:after {
    animation: 6s ease-in-out infinite alternate phone-tilt
}

.closing-section:before {
    animation: 9s ease-in-out infinite alternate closing-blob
}

@keyframes hero-breathe {
    0% {
        transform: translate(0)scale(1)
    }

    to {
        transform: translateY(-7px)scale(1.012)
    }
}

@keyframes blob-drift {
    0% {
        transform: translate(-4px, 2px)rotate(-1deg)
    }

    to {
        transform: translate(8px, -7px)rotate(2deg)
    }
}

@keyframes float-card {

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

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

@keyframes visual-hover {
    0% {
        transform: translateY(3px)
    }

    to {
        transform: translateY(-7px)
    }
}

@keyframes orbit-a {

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

    35% {
        transform: translate(-24px, 18px)
    }

    70% {
        transform: translate(10px, 38px)
    }
}

@keyframes orbit-b {

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

    40% {
        transform: translate(30px, -18px)
    }

    75% {
        transform: translate(12px, -42px)
    }
}

@keyframes card-soft-rise {

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

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

@keyframes timeline-pulse {

    0%,
    to {
        box-shadow: 0 0 0 7px #e9f2fd
    }

    50% {
        box-shadow: 0 0 0 12px #2e73ce0d
    }
}

@keyframes phone-tilt {
    0% {
        transform: rotate(-8deg)translateY(0)
    }

    to {
        transform: rotate(-3deg)translateY(-9px)
    }
}

@keyframes closing-blob {
    0% {
        transform: rotate(-2deg)scale(1)
    }

    to {
        transform: rotate(3deg)scale(1.03)
    }
}

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

    .hero-visual>img,
    .hero-blob,
    .hero-float,
    .section-visual img,
    .motion-orbit,
    .loyalty-section .feature-card,
    .guide-section .feature-card:before,
    .closing-section:before,
    .closing-section:after {
        animation: none !important
    }
}

.hero-blob.blob-a {
    clip-path: none;
    background: linear-gradient(145deg, #2e73ce33, #7d8fa92e);
    border-radius: 22% 9% 18% 13%/12% 19% 10% 21%;
    inset: -18px 2% 3% -1%;
    transform: rotate(-1.2deg);
    box-shadow: 0 24px 70px #2e73ce1a
}

.section-visual,
.integrated-section>.section-visual,
.auto-section>.section-visual,
.loyalty-section .grid-visual,
.business-section .grid-visual {
    box-shadow: none !important;
    clip-path: none !important;
    background: 0 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible !important
}

.section-visual:before,
.section-visual:after,
.integrated-section:before {
    display: none !important
}

.section-visual img {
    object-fit: contain;
    filter: none;
    width: 100%;
    height: auto;
    min-height: 0
}

.business-section .grid-visual img {
    clip-path: path("M 72 8 C 205 -8 410 20 500 86 C 568 136 562 266 536 365 C 510 465 420 538 306 530 C 196 522 70 556 22 458 C -19 374 12 278 8 191 C 5 112 18 32 72 8 Z");
    object-fit: cover;
    aspect-ratio: 1
}

.motion-orbit {
    display: none !important
}

.flow-section {
    width: 100vw;
    max-width: none;
    color: var(--ink);
    box-shadow: none;
    background: linear-gradient(120deg, #ffb931 0%, #ffc95b 100%);
    border-radius: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(70px, 8vw, 118px) max(50vw - 590px, clamp(22px, 5vw, 76px));
    position: relative;
    overflow: hidden
}

.flow-section:before {
    content: "";
    border: 1px solid #0f1f3321;
    border-radius: 42% 12% 38% 17%/18% 42% 15% 39%;
    width: 32%;
    height: 64%;
    position: absolute;
    inset: 18% auto auto 3%;
    transform: rotate(-3deg)
}

.flow-section .section-head,
.flow-section>.prose {
    z-index: 1;
    position: relative
}

.flow-section .section-head h2 {
    color: var(--ink);
    max-width: 880px
}

.flow-section>.prose {
    color: #26384e
}

.flow-section .journey {
    background: #0f1f33eb;
    border-radius: 22px;
    box-shadow: 0 18px 45px #0f1f3326;
    color: #fff !important;
    border: 0 !important;
    padding: 28px !important
}

@media (width<=620px) {
    .flow-section {
        padding: 58px 22px
    }

    .flow-section:before {
        display: none
    }

    .business-section .grid-visual img {
        clip-path: polygon(8% 2%, 86% 0, 100% 24%, 92% 88%, 66% 100%, 6% 92%, 0 52%)
    }
}

.visual-tag {
    z-index: 5;
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    background: #fffffff2;
    border: 1px solid #2e73ce1f;
    border-radius: 15px;
    align-items: center;
    gap: 9px;
    max-width: 240px;
    padding: 9px 13px;
    font-size: .7rem;
    line-height: 1.55;
    animation: 4.7s ease-in-out infinite visual-tag-float;
    display: flex;
    position: absolute;
    box-shadow: 0 13px 32px #0f1f3324
}

.visual-tag .icon {
    border-radius: 10px;
    flex: none;
    width: 32px;
    height: 32px
}

.visual-tag .icon svg {
    width: 17px;
    height: 17px
}

.visual-tag b {
    font-weight: 600
}

.visual-tag.tag-1 {
    top: 8%;
    right: -4%
}

.visual-tag.tag-2 {
    animation-delay: -1.6s;
    top: 46%;
    left: -5%
}

.visual-tag.tag-3 {
    animation-delay: -3.2s;
    bottom: 3%;
    right: 8%
}

.loyalty-section .visual-tag {
    background: #ffffffeb
}

.business-section .visual-tag.tag-1 {
    top: 12%;
    right: -7%
}

.business-section .visual-tag.tag-2 {
    top: 53%;
    left: -8%
}

.business-section .visual-tag.tag-3 {
    bottom: 4%;
    right: 2%
}

.auto-section .visual-tag.tag-2 {
    left: -2%
}

@keyframes visual-tag-float {

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

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

@media (width<=960px) {
    .visual-tag {
        font-size: .64rem
    }

    .visual-tag.tag-1 {
        right: 0
    }

    .visual-tag.tag-2 {
        left: 0
    }

    .business-section .visual-tag.tag-1 {
        right: 0
    }

    .business-section .visual-tag.tag-2 {
        left: 0
    }
}

@media (width<=620px) {
    .visual-tag {
        max-width: 175px;
        padding: 7px 9px;
        font-size: .58rem
    }

    .visual-tag .icon {
        display: none
    }

    .visual-tag.tag-1 {
        top: 3%;
        right: 0
    }

    .visual-tag.tag-2 {
        top: 48%;
        left: 0
    }

    .visual-tag.tag-3 {
        bottom: 1%;
        right: 4%
    }
}

@media (prefers-reduced-motion:reduce) {
    .visual-tag {
        animation: none !important
    }
}

body {
    background: #fff
}

main {
    overflow: clip visible
}

.topbar {
    background: #ffffffe6;
    border-bottom: 1px solid #e8edf4;
    position: sticky;
    top: 0
}

.heroboxh1 {
    font-size: clamp(2.25rem, 3.8vw, 3.75rem)
}

.hero-visual {
    min-height: 620px
}

.hero-visual>img {
    object-fit: contain;
    clip-path: none;
    border-radius: 0;
    width: 104%;
    height: 96%;
    animation: 8s ease-in-out infinite alternate hero-breathe;
    inset: 3% -2% 1% 0
}

.hero-blob.blob-a {
    display: none
}

.hero-float {
    background: #fffffff5;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 16px 44px #0f1f331f
}

.hero-transition {
    background: linear-gradient(#f1fbf8, #fff);
    height: 72px
}

.hero-transition:before,
.hero-transition:after,
.hero-transition i {
    display: none
}

.hero-transition span {
    opacity: .45;
    top: 12px
}

.section-head h2 {
    font-size: clamp(1.8rem, 2.6vw, 2.7rem)
}

.sticky-story {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .72fr);
    align-items: start;
    gap: clamp(42px, 7vw, 92px);
    margin-top: 52px;
    display: grid
}

.sticky-product {
    background: linear-gradient(145deg, #eaf4ff, #eefbf7);
    border-radius: 36px;
    place-items: center;
    height: 590px;
    display: grid;
    position: sticky;
    top: 120px;
    overflow: hidden
}

.product-window {
    background: #fff;
    border-radius: 20px;
    grid-template-rows: 42px 1fr;
    grid-template-columns: 17% 1fr;
    width: 78%;
    height: 68%;
    display: grid;
    overflow: hidden;
    transform: rotate(-1.5deg);
    box-shadow: 0 30px 70px #254e7e2e
}

.window-top {
    border-bottom: 1px solid #edf0f4;
    grid-column: 1/-1;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    display: flex
}

.window-top i {
    background: #d9e2ed;
    border-radius: 50%;
    width: 7px;
    height: 7px
}

.product-rail {
    background: #12243a;
    flex-direction: column;
    gap: 18px;
    padding: 20px 12px;
    display: flex
}

.product-rail span {
    background: #ffffff2e;
    border-radius: 8px;
    height: 8px
}

.product-rail span:first-child {
    background: #49d4ae
}

.product-main {
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    padding: 26px;
    display: grid
}

.mini-profile {
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 7px 14px;
    display: grid
}

.mini-profile .icon {
    grid-row: 1/3
}

.mini-profile b,
.mini-profile em {
    background: #dfe8f3;
    border-radius: 8px;
    height: 8px
}

.mini-profile em {
    background: #eef2f7;
    width: 62%
}

.chart-lines {
    background: linear-gradient(#f7faff, #fff);
    border-radius: 15px;
    position: relative;
    overflow: hidden
}

.chart-lines:before {
    content: "";
    background: linear-gradient(150deg, #0000 44%, #2e73ce 45% 47%, #0000 48%), linear-gradient(25deg, #0000 54%, #49d4ae 55% 57%, #0000 58%);
    position: absolute;
    inset: 12%
}

.chart-lines i {
    background: #e8edf4;
    height: 1px;
    position: absolute;
    left: 12%;
    right: 12%
}

.chart-lines i:first-child {
    top: 18%
}

.chart-lines i:nth-child(2) {
    top: 36%
}

.chart-lines i:nth-child(3) {
    top: 54%
}

.chart-lines i:nth-child(4) {
    top: 72%
}

.chart-lines i:nth-child(5) {
    top: 90%
}

.metric-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    display: grid
}

.metric-grid span {
    background: #edf4fd;
    border-radius: 10px;
    height: 48px
}

.metric-grid span:nth-child(2) {
    background: #e8f9f4
}

.metric-grid span:nth-child(3) {
    background: #fff3d9
}

.data-chip {
    background: #fff;
    border-radius: 16px;
    place-items: center;
    width: 70px;
    height: 70px;
    animation: 5s ease-in-out infinite float-card;
    display: grid;
    position: absolute;
    box-shadow: 0 18px 42px #0f1f3329
}

.data-chip .icon {
    background: 0 0
}

.chip-one {
    top: 12%;
    right: 5%
}

.chip-two {
    animation-delay: -1.7s;
    top: 44%;
    left: 4%
}

.chip-three {
    animation-delay: -3.2s;
    bottom: 7%;
    right: 11%
}

.story-steps {
    gap: 28px;
    padding: 30px 0 110px;
    display: grid
}

.story-step {
    background: #fff;
    border: 1px solid #e6ebf2;
    border-radius: 22px;
    grid-template-columns: 48px 1fr;
    align-items: start;
    gap: 18px;
    min-height: 180px;
    padding: 28px;
    display: grid;
    box-shadow: 0 15px 36px #1c427012
}

.story-step:nth-child(odd) {
    transform: translate(-14px)
}

.story-step h3 {
    margin: 2px 0 8px;
    font-size: 1.12rem
}

.story-step p {
    color: #637187;
    margin: 0;
    font-size: .9rem
}

.how-section.reveal {
    opacity: 1;
    transform: none;
    animation: none !important
}

.section-visual {
    min-height: 390px
}

.section-visual img {
    object-fit: contain;
    width: 100%;
    max-height: 520px;
    display: block
}

.visual-tag {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 15px 38px #0f1f3321
}

.integrated-section,
.auto-section {
    gap: 10px 72px
}

.integrated-section>.section-visual,
.auto-section>.section-visual {
    min-height: fit-content;
}

.loyalty-section {
    background: #e9f8f3;
    border-radius: 36px
}

.loyalty-section:after {
    display: none
}

.loyalty-section .feature-card {
    background: #fff;
    border: 1px solid #dcece7
}

.loyalty-section .grid-visual {
    grid-column: span 2;
    min-height: 300px
}

.business-section {
    background: #f5f8fc;
    border-radius: 36px;
    width: calc(100% + 108px);
    margin-right: -54px;
    padding-inline: clamp(22px, 4vw, 54px)
}

.business-section .grid-visual {
    min-height: 360px
}

.business-section .grid-visual img {
    clip-path: none;
    border-radius: 28px 8px;
    box-shadow: 0 24px 54px #0f1f3324
}

.flow-section {
    background: #ffb931
}

.flow-section:before {
    display: none
}

.closing-section {
    background: #11233a;
    border-radius: 0;
    width: 100vw;
    min-height: 460px;
    margin-right: calc(50% - 50vw);
    padding-inline: max(50vw - 590px, clamp(22px, 5vw, 76px))
}

.closing-section:before,
.closing-section:after {
    display: none
}

.closing-section .section-head h2 {
    color: #62dcb8
}

.closing-section>.prose {
    max-width: 850px
}

@media (width<=1050px) {
    .herobox {
        grid-template-columns: 1fr
    }

    .hero-visual {
        min-height: 560px
    }

    .sticky-story {
        grid-template-columns: 1fr
    }

    .sticky-product {
        height: 520px;
        position: relative;
        top: auto
    }

    .story-steps {
        grid-template-columns: repeat(2, 1fr);
        padding-bottom: 20px
    }

    .story-step:nth-child(odd) {
        transform: none
    }

    .business-section {
        width: 100%;
        margin-right: 0
    }
}

@media (width<=650px) {
    .hero-visual {
        min-height: 440px
    }

    .hero-visual>img {
        height: 88%;
        top: 5%
    }

    .hero-float {
        font-size: .58rem
    }

    .sticky-product {
        border-radius: 24px;
        height: 390px
    }

    .product-window {
        width: 82%;
        height: 72%
    }

    .story-steps {
        grid-template-columns: 1fr
    }

    .story-step {
        min-height: 0
    }

    .loyalty-section .grid-visual {
        grid-column: auto
    }

    .section-visual {
        min-height: 290px
    }

    .business-section {
        border-radius: 24px
    }

    .closing-section {
        padding-bottom: 64px
    }
}

.loyalty-section {
    color: var(--ink);
    background: #49d4ae !important
}

.loyalty-section>.prose {
    color: #173246
}

.loyalty-section .feature-card {
    background: #fffffff5;
    border-color: #ffffffd1
}

.loyalty-section .grid-visual {
    border-radius: 28px;
    align-self: stretch;
    background: #ffffff2e !important;
    padding: 16px !important
}

.loyalty-section .grid-visual img {
    border-radius: 20px
}

.flow-section {
    padding-top: clamp(72px, 8vw, 112px);
    padding-bottom: clamp(72px, 8vw, 112px)
}

.flow-section .section-head,
.flow-section>.prose {
    width: min(1180px, 100%);
    margin-inline: auto
}

.flow-section .journey {
    box-shadow: none;
    border-radius: 0;
    color: var(--ink) !important;
    background: 0 0 !important;
    border-top: 1px solid #0f1f3340 !important;
    border-bottom: 1px solid #0f1f3340 !important;
    padding: 18px 0 !important
}

.closing-section {
    grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(40px, 7vw, 100px);
    padding-left: max(50vw - 590px, clamp(22px, 5vw, 76px));
    display: grid
}

.closing-section .closing-symbol {
    aspect-ratio: 1;
    background: linear-gradient(145deg, #49d4ae, #2e73ce);
    border-radius: 38% 62% 42% 58%/56% 38% 62% 44%;
    grid-area: 1/1/3;
    place-items: center;
    width: min(360px, 100%);
    display: grid;
    position: relative;
    box-shadow: inset 0 0 0 18px #ffffff14
}

.closing-symbol:before,
.closing-symbol:after {
    content: "";
    border: 2px solid #ffffff73;
    border-radius: 50%;
    position: absolute
}

.closing-symbol:before {
    inset: 18%
}

.closing-symbol:after {
    inset: 34%
}

.closing-symbol>.icon {
    z-index: 2;
    width: 82px;
    height: 82px;
    color: var(--primaryblue);
    background: #fff;
    border-radius: 24px;
    position: absolute;
    box-shadow: 0 15px 38px #0f1f3338
}

.closing-symbol>.icon svg {
    width: 42px;
    height: 42px
}

.closing-symbol>.icon:first-child {
    top: 16%;
    right: 13%
}

.closing-symbol>.icon:nth-child(2) {
    color: #199374;
    top: 46%;
    left: 12%
}

.closing-symbol>.icon:nth-child(3) {
    color: #c48300;
    bottom: 10%;
    right: 32%
}

.closing-section .section-head,
.closing-section>.prose {
    grid-column: 2
}

.closing-section .section-head {
    grid-row: 1;
    align-self: end
}

.closing-section>.prose {
    grid-row: 2;
    align-self: start
}

@media (width<=850px) {
    .closing-section {
        grid-template-columns: 1fr
    }

    .closing-section .closing-symbol {
        grid-area: 3/1;
        width: min(330px, 82vw);
        margin: 30px auto 0
    }

    .closing-section .section-head,
    .closing-section>.prose {
        grid-column: 1
    }

    .closing-section .section-head {
        grid-row: 1
    }

    .closing-section>.prose {
        grid-row: 2
    }
}

.loyalty-section {
    overflow: hidden;
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-inline: max(50vw - 590px, clamp(22px, 5vw, 76px)) !important
}

.loyalty-section .cards {
    gap: 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important
}

.loyalty-section .feature-card,
.loyalty-section .grid-visual {
    min-width: 0;
    height: auto;
    min-height: 300px
}

.loyalty-section .grid-visual {
    justify-content: center;
    align-items: center;
    display: flex;
    clip-path: polygon(8% 2%, 92% 0, 100% 18%, 94% 88%, 72% 100%, 10% 94%, 0 70%, 3% 20%) !important;
    background: #ffffff38 !important;
    grid-column: auto !important;
    padding: 12px !important
}

.loyalty-section .grid-visual img {
    object-fit: cover;
    border-radius: 0;
    width: 100%;
    height: 100%
}

.loyalty-section .visual-tag {
    display: none
}

.feature-card>.icon {
    opacity: 1 !important;
    display: grid !important
}

.feature-card>.icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7px;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block !important
}

.business-section .feature-card>.icon,
.benefits-section .feature-card>.icon {
    display: grid !important
}

.benefits-section .feature-card>.icon {
    color: var(--primaryblue) !important;
    background: #e9f2fd !important
}

.readMore {
    margin-top: 82px;
    text-align: center;
    color: #0f1f33;
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
}

.article {
    max-height: 300px;
    margin-top: 40px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    transition: max-height 2s ease;
}

.article.show {
    max-height: 26000px;
    -webkit-mask-image: none;
    mask-image: none;
}

.showMore {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: max-content;
    margin: 18px auto 70px;
    padding: 8px 16px;
    border: 0;
    background: transparent;
    color: #0f1f33;
    font: inherit;
    cursor: pointer;
}

.showMore i {
    transform: rotate(-90deg);
    transition: transform .9s ease;
}

.showMore.close i {
    transform: rotate(90deg);
}

.hero-copy {
    align-self: center
}

.hero-prose .btn.demobtn,
.closing-section .btn.demobtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 158px;
    height: 50px;
    padding: 7px 23px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(126.02deg,
            #64eac5 18.38%,
            #49d4ae 71.05%);
    color: #fafbfe;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.8;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease,
        box-shadow .2s ease
}

.hero-prose .btn.demobtn:hover,
.closing-section .btn.demobtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(73,
            212,
            174,
            .26)
}

.hero-prose .btn.demobtn+small {
    position: relative;
    display: block;
    width: max-content;
    max-width: 100%;
    margin-top: 12px;
    padding: 8px 14px 8px 36px;
    border-radius: 999px;
    background: #fff;
    color: #536176;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.8;
    white-space: normal;
    box-shadow: 0 10px 30px rgba(15,
            31,
            51,
            .08)
}

.hero-prose .btn.demobtn+small:before {
    content: "";
    position: absolute;
    right: auto !important;
    left: 14px !important;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #49d4ae;
    transform: translateY(-50%);
    box-shadow: 0 0 0 5px rgba(73,
            212,
            174,
            .14)
}
.section-head {
    margin-bottom: 38px !important
}

.cards {
    gap: 30px !important;
    margin-top: 44px !important
}

.feature-card {
    height: auto !important;
    min-height: 260px;
    padding: 30px 28px !important
}

.feature-card h3 {
    margin: 18px 0 12px !important;
    line-height: 1.85 !important
}

.feature-card p,
.story-step p,
.guide-section p {
    margin: 0 !important;
    line-height: 2 !important
}

.sticky-story {
    gap: 52px !important
}

.story-steps {
    gap: 34px !important;
    padding-top: 36px !important
}

.story-step {
    height: auto !important;
    min-height: 220px !important;
    padding: 34px 30px !important;
    align-content: start !important
}

.story-step h3 {
    margin: 0 0 12px !important;
    line-height: 1.8 !important
}

.loyalty-section .cards {
    gap: 30px !important
}

.loyalty-section .feature-card,
.loyalty-section .grid-visual {
    min-height: 360px !important
}

.guide-section .cards {
    margin-top: 52px !important
}

.guide-section .feature-card {
    min-height: 0 !important;
    padding-bottom: 54px !important
}

.guide-section .feature-card h3 {
    margin-bottom: 14px !important;
    line-height: 1.8 !important
}

@media (width<=1100px) {
    .loyalty-section .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important
    }
}

@media (width<=820px) {
    .loyalty-section .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .loyalty-section .feature-card,
    .loyalty-section .grid-visual {
        min-height: 260px
    }
}

@media (width<=560px) {
    .loyalty-section {
        padding-inline: 18px !important
    }

    .loyalty-section .section-head h2 {
        font-size: 1.75rem;
        line-height: 1.45
    }

    .loyalty-section .cards {
        gap: 15px;
        grid-template-columns: 1fr !important
    }

    .loyalty-section .feature-card,
    .loyalty-section .grid-visual {
        width: 100%;
        height: auto;
        min-height: 0
    }

    .loyalty-section .feature-card {
        padding: 22px
    }

    .loyalty-section .grid-visual {
        aspect-ratio: 1;
        max-height: 420px
    }

    .loyalty-section .feature-card h3 {
        font-size: 1.05rem
    }

    .loyalty-section .feature-card p {
        font-size: .88rem
    }

    .business-section .cards,
    .benefits-section .cards {
        grid-template-columns: 1fr !important
    }

    .business-section .feature-card,
    .benefits-section .feature-card {
        width: 100%;
        min-width: 0
    }
}

.hero-visual {
    isolation: isolate;
    box-shadow: none !important;
    background: 0 0 !important;
    border-radius: 0 !important;
    overflow: visible !important
}

.hero-visual>img {
    filter: drop-shadow(0 28px 38px #0f1f3329);
    object-fit: contain !important;
    clip-path: none !important
}

.hero-blob {
    display: none !important
}

.loyalty-section .grid-visual {
    aspect-ratio: auto !important;
    clip-path: none !important;
    background: 0 0 !important;
    order: -1 !important;
    grid-column: auto !important;
    min-height: 300px !important;
    padding: 0 !important;
    overflow: visible !important
}

.loyalty-section .grid-visual img {
    clip-path: polygon(7% 3%, 91% 0, 100% 21%, 94% 88%, 70% 100%, 9% 94%, 0 68%, 3% 18%);
    object-fit: cover !important;
    border-radius: 0 !important;
    height: 100% !important
}

.flow-map {
    z-index: 1;
    direction: rtl;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin: 38px 0 34px;
    display: grid;
    position: relative
}

.flow-step {
    background: #ffffffd1;
    border: 1px solid #0f1f331f;
    border-radius: 22px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    min-height: 150px;
    padding: 24px 22px;
    transition: transform .25s, box-shadow .25s;
    display: flex;
    position: relative;
    box-shadow: 0 14px 32px #6f450017
}

.flow-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px #6f450024
}

.flow-step .icon {
    color: var(--primaryblue);
    background: #fff;
    box-shadow: 0 8px 22px #0f1f331a
}

.flow-step span {
    color: var(--ink);
    font-weight: 600;
    line-height: 1.65
}

.flow-step>b {
    z-index: 3;
    background: var(--ink);
    color: #fff;
    border-radius: 50%;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 1rem;
    display: grid;
    position: absolute;
    top: 50%;
    left: -17px;
    transform: translateY(-50%)
}

.flow-section>.prose {
    text-align: center;
    color: #25364a !important;
    max-width: 920px !important;
    margin-inline: auto !important
}

.flow-section>.prose p {
    margin: 0
}

@media (width<=900px) {
    .flow-map {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .flow-step:nth-child(2n)>b {
        display: none
    }
}

@media (width<=560px) {
    .flow-map {
        grid-template-columns: 1fr;
        gap: 13px
    }

    .flow-step {
        grid-template-columns: 44px 1fr;
        align-items: center;
        min-height: 0;
        padding: 18px;
        display: grid
    }

    .flow-step>b {
        top: auto;
        bottom: -24px;
        left: 50%;
        transform: translate(-50%)rotate(-90deg);
        display: grid !important
    }

    .flow-step:last-child>b {
        display: none !important
    }

    .loyalty-section .grid-visual {
        aspect-ratio: 4/3 !important;
        min-height: 280px !important
    }

    .hero-visual>img {
        filter: drop-shadow(0 18px 24px #0f1f3321)
    }
}

.flow-section {
    width: auto !important;
    color: var(--ink) !important;
    background: 0 0 !important;
    margin: 0 !important;
    padding: clamp(68px, 8vw, 105px) 0 !important;
    overflow: visible !important
}

.flow-section .section-head {
    margin-bottom: 18px
}

.flow-map {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 34px 24px !important;
    margin: 32px 0 28px !important
}

.flow-step {
    min-height: 0 !important;
    box-shadow: none !important;
    background: 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    grid-template-columns: 42px 1fr !important;
    justify-content: stretch !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    display: grid !important
}

.flow-step:hover {
    box-shadow: none !important;
    transform: none !important
}

.flow-step .icon {
    width: 42px;
    height: 42px;
    color: var(--primaryblue) !important;
    box-shadow: none !important;
    background: #eef5ff !important;
    border-radius: 14px !important
}

.flow-step .icon svg {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65px;
    width: 21px;
    height: 21px
}

.flow-step span {
    font-size: .9rem;
    line-height: 1.65
}

.flow-step>b {
    width: 30px !important;
    height: 30px !important;
    color: var(--primaryblue) !important;
    background: #fff !important;
    border: 1px solid #d8e5f5 !important;
    font-size: .85rem !important;
    left: -28px !important;
    box-shadow: 0 6px 16px #2e73ce1a !important
}

.flow-section>.prose {
    border-top: 1px solid #e1e8f1;
    padding-top: 22px;
    text-align: right !important;
    color: #536176 !important;
    margin-top: 20px !important
}

@media (width<=900px) {
    .flow-map {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important
    }

    .flow-step:nth-child(2n)>b {
        display: none !important
    }
}

@media (width<=560px) {
    .flow-map {
        grid-template-columns: 1fr !important;
        gap: 10px !important
    }

    .flow-step {
        padding: 10px 0 !important
    }

    .flow-step>b {
        display: grid !important;
        bottom: -15px !important;
        left: 50% !important
    }

    .flow-step:last-child>b {
        display: none !important
    }

    .flow-section>.prose {
        text-align: right !important
    }
}

.flow-section {
    background: linear-gradient(135deg, #ffb931 0%, #ffc65a 100%) !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: clamp(72px, 8vw, 112px) max(50vw - 590px, clamp(22px, 5vw, 76px)) !important
}

.flow-map {
    position: relative;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 30px 54px !important
}

.flow-step {
    position: relative;
    padding: 13px 0 !important
}

.flow-step .icon {
    background: #ffffffeb !important
}

.flow-step:first-child .icon,
.flow-step:nth-child(6) .icon {
    color: #2e73ce !important
}

.flow-step:nth-child(2) .icon,
.flow-step:nth-child(7) .icon {
    color: #0b9877 !important;
    background: #ecfbf6 !important
}

.flow-step:nth-child(3) .icon,
.flow-step:nth-child(8) .icon {
    color: #ef476f !important;
    background: #fff0f4 !important
}

.flow-step:nth-child(4) .icon,
.flow-step:nth-child(5) .icon {
    color: #7757c7 !important;
    background: #f3efff !important
}

.flow-step>b {
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    left: -42px !important
}

.flow-step:first-child,
.flow-step:nth-child(2),
.flow-step:nth-child(3),
.flow-step:nth-child(4) {
    grid-row: 1
}

.flow-step:nth-child(5) {
    grid-area: 2/4
}

.flow-step:nth-child(6) {
    grid-area: 2/3
}

.flow-step:nth-child(7) {
    grid-area: 2/2
}

.flow-step:nth-child(8) {
    grid-area: 2/1
}

.flow-step:nth-child(n+5)>b {
    font-size: 0 !important;
    left: auto !important;
    right: -42px !important
}

.flow-step:nth-child(n+5)>b:after {
    content: "→";
    font-size: .85rem
}

.flow-step:nth-child(4)>b {
    top: auto !important;
    bottom: -28px !important;
    left: 50% !important;
    transform: translate(-50%)rotate(-90deg) !important
}

.flow-step:nth-child(8)>b {
    display: none !important
}

.flow-section>.prose {
    color: #25364a !important;
    border-top-color: #0f1f3333 !important
}

.loyalty-section .grid-visual img {
    clip-path: none !important;
    border-radius: 30% 12% 28% 10%/18% 30% 14% 28% !important;
    box-shadow: 0 22px 46px #0f1f3321 !important
}

@media (width<=900px) {
    .flow-map {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px 50px !important
    }

    .flow-step:nth-child(n) {
        grid-area: auto
    }

    .flow-step:nth-child(3),
    .flow-step:nth-child(7) {
        grid-column: 2
    }

    .flow-step:nth-child(4),
    .flow-step:nth-child(8) {
        grid-column: 1
    }

    .flow-step:nth-child(2)>b,
    .flow-step:nth-child(6)>b {
        display: grid !important;
        inset: auto auto -24px 50% !important;
        transform: translate(-50%)rotate(-90deg) !important
    }

    .flow-step:nth-child(3)>b,
    .flow-step:nth-child(4)>b,
    .flow-step:nth-child(7)>b {
        font-size: 0 !important;
        inset: 50% -40px auto auto !important;
        transform: translateY(-50%) !important
    }

    .flow-step:nth-child(3)>b:after,
    .flow-step:nth-child(4)>b:after,
    .flow-step:nth-child(7)>b:after {
        content: "→";
        font-size: .85rem
    }

    .flow-step:nth-child(8)>b {
        display: none !important
    }
}

@media (width<=560px) {
    .flow-section {
        padding-inline: 20px !important
    }

    .flow-map {
        grid-template-columns: 1fr !important;
        gap: 12px !important
    }

    .flow-step:nth-child(n) {
        grid-column: auto !important
    }

    .flow-step:nth-child(n)>b {
        font-size: 0 !important;
        display: grid !important;
        inset: auto auto -17px 50% !important;
        transform: translate(-50%)rotate(-90deg) !important
    }

    .flow-step:nth-child(n)>b:after {
        content: "←" !important;
        font-size: .85rem !important
    }

    .flow-step:nth-child(8)>b {
        display: none !important
    }

    .loyalty-section .grid-visual img {
        border-radius: 24% 8% 22%/12% 24% 10% 22% !important
    }
}

.sticky-product.real-panel img {
    object-fit: contain;
    filter: none;
    border-radius: 26px;
    width: 100%;
    height: 100%;
    animation: none;
    display: block
}

.panel-chip {
    z-index: 3;
    pointer-events: none;
    background: #fffffff5;
    border-radius: 17px;
    place-items: center;
    width: 62px;
    height: 62px;
    animation: 5s ease-in-out infinite panel-chip-float;
    display: grid;
    position: absolute;
    box-shadow: 0 16px 36px #0f1f3329
}

.panel-chip .icon {
    border-radius: 13px;
    width: 40px;
    height: 40px
}

.panel-chip-b {
    animation-delay: -1.7s;
    top: 44%;
    left: 2%
}

.panel-chip-c {
    animation-delay: -3.3s;
    bottom: 5%;
    right: 10%
}

@keyframes panel-chip-float {

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

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

.loyalty-section .grid-visual {
    box-shadow: none !important;
    clip-path: none !important;
    background: 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important
}

.loyalty-section .grid-visual img {
    clip-path: none !important;
    box-shadow: none !important;
    object-fit: contain !important;
    background: 0 0 !important;
    border-radius: 22px !important
}

.auto-section>.section-visual {
    box-shadow: none !important;
    clip-path: none !important;
    background: 0 0 !important;
    border: 0 !important;
    padding: 0 !important;
    overflow: visible !important
}

.auto-section>.section-visual:before,
.auto-section>.section-visual:after {
    display: none !important
}

.auto-section>.section-visual img {
    clip-path: none !important;
    box-shadow: none !important;
    filter: none !important;
    object-fit: contain !important;
    background: 0 0 !important;
    border-radius: 0 !important
}

.auto-section .visual-tag {
    display: none !important
}

@media (width<=560px) {
    .sticky-product.real-panel {
        border-radius: 22px;
        min-height: 0;
        padding: 10px;
        height: auto !important
    }

    .sticky-product.real-panel img {
        border-radius: 16px;
        height: auto
    }

    .panel-chip {
        border-radius: 13px;
        width: 44px;
        height: 44px
    }

    .panel-chip .icon {
        width: 30px;
        height: 30px
    }

    .panel-chip-a {
        top: 5%;
        right: 1%
    }

    .panel-chip-b {
        top: 43%;
        left: 0
    }

    .panel-chip-c {
        bottom: 2%;
        right: 7%
    }

    .flow-section .section-head {
        text-align: center
    }

    .flow-section .section-head h2 {
        margin-inline: auto
    }

    .flow-map {
        width: min(390px, 100%);
        margin-inline: auto !important
    }

    .flow-step {
        width: 100%;
        max-width: 330px;
        margin-inline: auto;
        grid-template-columns: 46px minmax(0, 1fr) !important;
        place-items: center start !important;
        padding: 11px 0 !important
    }

    .flow-step span {
        text-align: right;
        width: 100%
    }

    .flow-step:nth-child(n)>b {
        left: 50% !important
    }

    .flow-section>.prose {
        text-align: center !important;
        margin-inline: auto !important
    }

    .auto-section>.section-visual {
        min-height: 0 !important
    }

    .loyalty-section .grid-visual img {
        border-radius: 18px !important
    }
}

@media (prefers-reduced-motion:reduce) {
    .panel-chip {
        animation: none !important
    }
}

.sticky-product.real-panel {
    background: 0 0 !important;
    border-radius: 36px !important;
    padding: 0 !important;
    overflow: visible !important
}

.sticky-product.real-panel img {
    box-shadow: 0 24px 58px #0f1f3321;
    object-fit: cover !important;
    border-radius: 36px !important
}

.panel-chip-a {
    top: 8%;
    right: -1%
}

.panel-chip-b {
    top: 44%;
    left: -2%
}

.panel-chip-c {
    bottom: 4%;
    right: 8%
}

.loyalty-section .cards {
    grid-auto-rows: 1fr;
    align-items: stretch !important
}

.loyalty-section .grid-visual {
    background: #fff !important;
    border-radius: 22px !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: block !important;
    overflow: hidden !important
}

.loyalty-section .grid-visual img {
    transform: scale(1.035);
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    display: block !important
}

@media (width<=820px) {
    .loyalty-section .cards {
        grid-auto-rows: auto
    }

    .loyalty-section .grid-visual {
        aspect-ratio: 4/3 !important;
        min-height: 300px !important
    }

    .loyalty-section .grid-visual img {
        min-height: 0 !important
    }
}

@media (width<=560px) {

    .sticky-product.real-panel,
    .sticky-product.real-panel img {
        border-radius: 22px !important
    }

    .panel-chip-a {
        top: 5%;
        right: -2%
    }

    .panel-chip-b {
        top: 43%;
        left: -2%
    }

    .panel-chip-c {
        bottom: 2%;
        right: 6%
    }

    .loyalty-section .grid-visual {
        aspect-ratio: 4/3 !important;
        border-radius: 20px !important;
        min-height: 260px !important
    }

    .loyalty-section .grid-visual img {
        transform: scale(1.02)
    }
}

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

.container {
    width: min(1180px, 100% - 40px);
    margin-inline: auto;
}

.section>.container {
    z-index: 1;
    position: relative;
}

.clientsection {
    width: 100vw;
    margin-right: calc(50% - 50vw);
}

.faq .container h2 {
    letter-spacing: -.025em;
    margin-bottom: 24px;
    color: var(--darkbluetext);
    font-size: clamp(1.34rem, 2.1vw, 1.78rem);
    line-height: 1.65;
    font-weight: 700
}

.faq {
    position: relative;
    border-radius: 8px;
    line-height: 1.95;
}

.section.faq {
    background: #fff;
}

.faq::before {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%' ry='100%' stroke='rgba(185, 198, 216, 0.5)' stroke-width='4' stroke-dasharray='1.5%2c 10' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
    border-radius: 100%;
}

.faq::after {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100%' ry='100%' stroke='rgba(185, 198, 216, 0.3)' stroke-width='1' stroke-dasharray='7' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
    border-radius: 100%;
}

.accordion {
    border-top: 1px solid var(--line);
}

details {
    border-bottom: 1px solid var(--line);
}

summary {
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 20px 3px;
    list-style: none;
    display: flex;
}

summary::-webkit-details-marker {
    display: none;
}

summary h3 {
    margin: 0;
}

summary span {
    color: var(--primaryblue);
    font-size: 1.35rem;
    transition: all 0.2s;
}

details p {
    color: #596b80;
    margin: 0;
    padding: 0 4px 22px;
    font-size: .94rem
}

details>p {
    color: #596b80;
    margin: 0;
    padding: 0 3px 20px;
}

details[open] summary span {
    transform: rotate(45deg);
}


.faq details {
    transition: background 0.2s;
}

.faq details:hover,
.faq details[open] {
    background: #f8fbff;
}

.faq details>p {
    padding-left: 17px;
    padding-right: 17px;
}

.faq summary {
    padding: 23px 17px;
}