/* RMK: a light product story and a dark presentation, with the same offer. */
:root {
    --keynote-ink: #17191b;
    --keynote-muted: #6c7074;
    --keynote-lime: #b4ee35
}

body {
    color: var(--keynote-ink)
}

body.variant-b {
    background: #080909;
    color: #f5f5f7
}

.container {
    width: min(1240px, calc(100% - 96px))
}

.site-header {
    background: #fff;
    border-bottom: 1px solid #ebedef
}

.header-inner {
    min-height: 82px
}

.brand {
    border-radius: 10px
}

.brand-description {
    color: #75787b
}

.site-header nav a {
    font-weight: 400
}

.button {
    font-weight: 600;
    border-radius: 100px;
    letter-spacing: -.015em;
    min-height: 52px
}

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

.primary {
    background: var(--keynote-lime);
    color: #151d08
}

.header-button,
.ink {
    background: #1b1d20
}

.secondary {
    border-color: #cfd2d5;
    color: #36393c
}

.eyebrow {
    font-weight: 600;
    letter-spacing: .09em;
    color: #797e83
}

h2 {
    font-size: clamp(36px, 4.3vw, 58px);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.1
}

h3 {
    font-weight: 600
}

.variant-b .site-header {
    background: #080909;
    border-color: #232629
}

.variant-b .site-header nav a {
    color: #b6b7ba
}

.variant-b .header-button {
    background: #f5f5f7;
    color: #17191b
}

.variant-b .brand-description {
    color: #81858a;
    border-color: #34373a
}

.variant-b h2 {
    font-size: clamp(36px, 4.3vw, 58px);
    font-weight: 600
}

.variant-b em {
    color: #b4ee35;
    font-style: normal
}

.variant-b .eyebrow {
    color: #969a9e
}

/* A is centred and deliberately spacious. */
.a-hero.keynote-a {
    display: block;
    padding: 70px 0 64px;
    margin: 0;
    width: 100%;
    text-align: center;
    background: #fff
}

.keynote-a .a-hero-copy {
    position: relative;
    z-index: 1
}

.keynote-a .audience {
    border: 0;
    background: none;
    padding: 0;
    font-size: 14px;
    color: #6c7074;
    letter-spacing: .01em
}

.keynote-a h1 {
    font-size: clamp(46px, 6.4vw, 88px);
    font-weight: 600;
    line-height: 1.07;
    letter-spacing: -.055em;
    margin-top: 22px
}

.keynote-a h1 span {
    color: #7f8388
}

.keynote-a .hero-description {
    font-size: 20px;
    line-height: 1.65;
    color: #72767b;
    margin: 23px auto 0;
    max-width: 730px
}

.keynote-a .hero-description br:last-child {
    display: none
}

.keynote-a .hero-actions {
    justify-content: center;
    margin-top: 28px;
    gap: 12px
}

.keynote-a .hero-actions .button {
    min-height: 53px;
    padding-inline: 25px;
    font-size: 14px !important
}

.keynote-a .under-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 1.5
}

.keynote-a .under-button strong {
    margin: 0;
    padding: 0;
    background: none;
    color: #292d31;
    font-size: 14px;
    font-weight: 600
}

.keynote-a .under-button>span {
    border-left: 1px solid #d7dadd;
    padding-left: 20px;
    color: #797f85
}

.keynote-a-art {
    margin-top: 16px;
    position: relative
}

.keynote-a-art img {
    width: 100%;
    aspect-ratio: 2.65;
    object-fit: cover;
    object-position: center 68%
}

.keynote-a-art figcaption {
    font-size: 12px;
    color: #8c9094;
    margin-top: 4px
}

.a-solutions {
    padding-block: 40px 96px
}

.a-solutions .section-top {
    align-items: center
}

.a-solutions h2 {
    font-size: 46px
}

.section-top>p {
    color: #777b80
}

.solution-cards {
    gap: 20px
}

.solution-card {
    border-radius: 28px;
    padding: 32px;
    min-height: 320px
}

.solution-card:hover {
    box-shadow: 0 12px 32px #1b1e2110
}

.card-ink {
    background: #1d2023
}

.card-lime {
    background: #c7f35b
}

.card-lilac {
    background: #f1f2f4;
    color: #25272a
}

.solution-card h3 {
    font-size: 29px;
    font-weight: 600
}

.solution-card p {
    font-size: 16px;
    line-height: 1.65;
    opacity: .75
}

.card-bottom {
    font-size: 14px !important
}

.card-bottom>.icon {
    display: none
}

.bespoke-section {
    background: #f5f5f7;
    padding-block: 90px
}

.bespoke-grid {
    gap: 90px
}

.bespoke-grid>div>p,
.bespoke-points p {
    color: #747980
}

.bespoke-points article,
.outcome-strip {
    border-color: #dadddf
}

.bespoke-points article>span {
    color: #8c9196
}

.outcome-strip {
    color: #646a71
}

.bespoke-points h3 {
    font-size: 23px
}

.bespoke-grid h2 {
    font-size: 52px
}

.outcome-strip span:before {
    color: #728d39
}

.industries-section,
.reported-cases {
    padding-block: 100px
}

.section-intro,
.section-footnote {
    color: #757b81
}

.industry-card {
    background: #f5f5f7;
    border: 0;
    border-radius: 25px;
    padding: 32px
}

.industry-card h3 {
    font-size: 28px
}

.industry-card>p,
.industry-card ul {
    color: #6b7278
}

.industry-card .inline-link {
    color: #404d24
}

.industry-number {
    color: #8d9298
}

.portfolio-grid article,
.case-metrics {
    border-color: #dedfe2
}

.portfolio-grid p,
.case-heading>p,
.case-metrics span {
    color: #787e84
}

.case-metrics {
    padding-block: 36px;
    gap: 28px
}

.case-metrics strong {
    font-size: 55px;
    color: #24272b
}

.case-metrics>div:last-child strong {
    font-size: 39px;
    line-height: 1.7
}

.metrics-source {
    color: #8b8f95
}

.portfolio-grid {
    gap: 38px 65px
}

.portfolio-grid h3 {
    font-size: 25px
}

.a-workspace {
    background: #f5f5f7;
    padding-block: 90px
}

.center-heading>p,
.panel-copy>p {
    color: #777d83
}

.work-tabs {
    background: #e8e9ec
}

.app-mock {
    transform: none;
    box-shadow: 0 24px 75px #15191d0d;
    border-color: #dddfe2;
    border-radius: 24px
}

.mock-layout aside {
    background: #f3f4f6
}

.route-display {
    background: #f4f5f7
}

.a-economics {
    background: #121519;
    padding-block: 90px
}

.a-economics .eyebrow {
    color: #a8c774
}

.economic-card {
    background: #202429;
    border-color: #343b43;
    border-radius: 24px;
    padding: 32px
}

.economic-card>span {
    color: #adb8a3
}

.economic-card p {
    color: #a1a9b0
}

.economic-card strong {
    font-size: 55px
}

.economic-card b {
    color: #c4ed83;
    font-size: 34px
}

.formula {
    color: #89929c;
    border-color: #3b424a
}

.economic-note,
.a-economics .section-intro {
    color: #a1abb5
}

.a-process {
    padding-block: 96px
}

.process-cards p {
    color: #757c84
}

.process-cards article {
    border-color: #dcdee2
}

.process-cards article>span {
    background: #f1f2f4;
    color: #6a7077
}

.process-cards h3 {
    font-size: 26px
}

.a-faq {
    padding-block: 96px
}

.faq-list details {
    border-color: #dcdfe2
}

.faq-list details>p {
    color: #707781
}

.a-contact {
    background: #f5f5f7;
    padding-block: 90px
}

.a-contact h2 {
    font-weight: 600;
    color: #292c31
}

.a-contact h2 em {
    color: #7d858f
}

.a-contact .contact-grid>div>p:not(.fine-print) {
    color: #747c85;
    font-size: 17px
}

.a-contact .form-card {
    background: #fff;
    border: 1px solid #e5e6e9;
    border-radius: 26px
}

.contact-badge {
    color: #646c75;
    background: #eeeef1
}

.form-threshold p,
.budget-feedback {
    color: #727c6b
}

.form-card select {
    background: #f7f8f5
}

.form-card input,
.form-card textarea {
    border-color: #d9ded2
}

.site-footer {
    border-top: 1px solid #e5e7e9
}

.footer-inner>p {
    color: #858b92
}

/* B opens with a large dark product reveal and a compact offer. */
.b-hero.keynote-b {
    position: relative;
    min-height: 780px;
    padding-block: 96px 52px;
    background: #080909;
    overflow: hidden
}

.b-keynote-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.keynote-b:after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #080909 0%, #080909e6 26%, #0809097a 43%, transparent 65%)
}

.b-keynote-content {
    position: relative;
    z-index: 1
}

.b-keynote-content .eyebrow {
    color: #b4b9bf;
    font-size: 12px !important
}

.keynote-b h1 {
    font-size: clamp(48px, 5.1vw, 72px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.05em;
    margin-top: 28px;
    max-width: 620px
}

.keynote-b h1 span {
    color: #f5f5f7
}

.keynote-b h1:first-line {
    color: #959ba2
}

.b-keynote-content>p {
    font-size: 18px;
    line-height: 1.75;
    color: #a3abb4;
    max-width: 480px;
    margin-top: 26px
}

.keynote-b .hero-actions {
    margin-top: 30px;
    gap: 12px
}

.keynote-b .secondary {
    border-color: #596068;
    background: #090b0d6b;
    color: #d0d5da
}

.keynote-b .secondary:hover {
    background: #282e33
}

.keynote-b .hero-actions .button {
    font-size: 14px !important;
    padding-inline: 22px
}

.b-keynote-offer {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-top: 30px
}

.b-keynote-offer strong {
    font-size: 23px;
    font-weight: 600;
    letter-spacing: -.035em;
    color: #bdec64;
    white-space: nowrap
}

.b-keynote-offer>span {
    font-size: 13px;
    line-height: 1.6;
    color: #9ca5ae;
    border-left: 1px solid #48525a;
    padding-left: 22px
}

.b-keynote-caption {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    color: #848e98;
    font-size: 12px;
    margin-top: 72px
}

.variant-b .reported-cases {
    padding-top: 86px
}

.variant-b .case-heading>p,
.variant-b .portfolio-grid p,
.variant-b .case-metrics span {
    color: #929da8
}

.variant-b .case-metrics strong {
    color: #c1ef68
}

.variant-b .case-metrics,
.variant-b .portfolio-grid article {
    border-color: #30363d
}

.variant-b .metrics-source {
    color: #79848f
}

.variant-b .bespoke-section {
    background: #15191d
}

.variant-b .bespoke-grid>div>p,
.variant-b .bespoke-points p {
    color: #929eab
}

.variant-b .bespoke-points article,
.variant-b .outcome-strip {
    border-color: #343c44
}

.variant-b .outcome-strip {
    color: #a4b59c
}

.variant-b .bespoke-grid h2 {
    font-size: 52px
}

.variant-b .section-intro {
    color: #929ba5
}

.industry-panel {
    background: #161b20;
    border-color: #343b43;
    border-radius: 0 0 25px 25px
}

.industry-tabs {
    border-color: #343b43
}

.industry-tabs button {
    color: #8e9aa7;
    background: #101419
}

.industry-tabs button[aria-selected=true] {
    background: #252e27;
    color: #d2eba6;
    border-color: #b7e86f
}

.industry-tabs button:first-child {
    border-radius: 20px 0 0 0
}

.industry-tabs button:last-child {
    border-radius: 0 20px 0 0
}

.industry-panel-main>p {
    color: #a0abb7
}

.industry-panel ul {
    color: #b2bec7
}

.industry-flow {
    border-color: #3c454b;
    color: #b8c89e
}

.variant-b .section-footnote {
    color: #7f8b97
}

.b-journey {
    background: #14181d;
    padding-block: 90px
}

.stage-panel {
    gap: 60px
}

.stage-copy>p,
.human-system p {
    color: #9ba8b6
}

.stage-visual {
    background: #1c2229;
    border-radius: 24px;
    min-height: 350px
}

.stage-object {
    background: #252e37;
    border-color: #404d58;
    border-radius: 24px
}

.stage-object>strong {
    color: #d9e6c2
}

.stage-big-number {
    color: #263038
}

.b-estimate {
    background: #eaf0e2;
    color: #1e2920;
    padding-block: 90px
}

.variant-b .b-estimate .eyebrow {
    color: #7b8a69
}

.b-estimate h2 em {
    color: #5f7b3b
}

.b-estimate .estimate-grid {
    gap: 65px
}

.calculator {
    border-radius: 24px;
    background: #f9fbf5;
    border-color: #d9e3cc;
    padding: 32px
}

.calculator>.button {
    border-radius: 100px
}

.estimate-grid>div>p:not(.estimate-disclaimer) {
    color: #758364
}

.b-approach {
    padding-block: 96px
}

.approach-grid>div:first-child>p,
.approach-list p {
    color: #93a0ad
}

.approach-list>article {
    border-color: #343c46
}

.approach-list h3 {
    font-size: 24px;
    font-weight: 600
}

.b-faq {
    padding-block: 96px
}

.variant-b .faq-list details {
    border-color: #333b45
}

.variant-b .faq-list summary {
    font-weight: 400
}

.variant-b .faq-list details>p {
    color: #9ba6b4
}

.b-contact {
    background: #171c21;
    padding-block: 90px
}

.b-contact .form-card {
    background: #f5f7f0;
    border-radius: 24px
}

.b-contact .contact-grid>div>p:not(.fine-print) {
    color: #99a6b3
}

.b-contact .fine-print {
    color: #7d8b99
}

.b-contact-mark {
    display: none
}

.variant-b .site-footer {
    background: #080909;
    border-color: #2b323a
}

/* Support is a banner on A; a bright, typographic interlude on B. */
.support-banner {
    position: relative;
    background: #080909;
    min-height: 570px;
    overflow: hidden;
    color: #f5f5f7
}

.support-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.support-a .support-banner:after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #080909 0%, #080909e0 33%, #08090975 48%, transparent 68%)
}

.support-banner-copy {
    position: relative;
    z-index: 1;
    padding-block: 74px
}

.support-banner h2 {
    font-size: clamp(40px, 4.7vw, 65px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -.05em;
    margin-top: 23px;
    max-width: 570px
}

.support-banner .eyebrow {
    color: #8e9aa5;
    max-width: 500px
}

.support-banner p {
    font-size: 20px;
    line-height: 1.65;
    color: #aab4bf;
    margin-top: 23px;
    max-width: 530px
}

.support-banner .button {
    margin-top: 28px
}

.support-details {
    padding-block: 60px 64px
}

.support-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px
}

.support-cards article>span {
    display: block;
    font-size: 13px;
    color: #8b929b;
    margin-bottom: 17px
}

.support-cards h3 {
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -.03em
}

.support-cards p {
    font-size: 16px;
    line-height: 1.75;
    color: #808991;
    margin-top: 15px
}

.support-terms {
    border-top: 1px solid #e1e4e7;
    margin-top: 32px;
    padding-top: 23px;
    max-width: 1120px;
    font-size: 13px;
    line-height: 1.75;
    color: #8c949e
}

.support-b {
    background: #f5f5f7;
    color: #22272d
}

.support-b .support-banner {
    min-height: 0;
    background: transparent;
    color: inherit;
    text-align: center
}

.support-b .support-banner-copy {
    padding-block: 88px 28px
}

.support-b .support-banner h2 {
    max-width: none;
    font-size: clamp(42px, 6vw, 82px);
    line-height: 1.09
}

.support-b .support-banner h2 br {
    display: none
}

.support-b .support-banner h2 br:after {
    content: ' '
}

.support-b .support-banner p {
    max-width: none;
    color: #828990;
    font-size: 23px
}

.support-b .support-banner .eyebrow {
    max-width: none;
    color: #8b9299
}

.support-b .support-banner .button {
    background: #222a30;
    color: #fff
}

.support-b .support-details {
    padding-top: 38px
}

.support-b .support-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px
}

.support-b .support-cards article {
    background: #fff;
    border-radius: 24px;
    padding: 30px
}

.support-b .support-cards h3 {
    font-size: 26px
}

.support-b .support-cards p {
    color: #79828c
}

.support-b .support-terms {
    border-color: #dadddf;
    color: #868e98
}

@media(max-width:1100px) {
    .container {
        width: calc(100% - 64px)
    }

    .keynote-a h1 {
        font-size: 70px
    }

    .keynote-b h1 {
        font-size: 58px;
        max-width: 540px
    }

    .b-hero.keynote-b {
        min-height: 760px
    }

    .keynote-b:after {
        background: linear-gradient(90deg, #080909 0%, #080909f5 22%, #08090999 50%, transparent 75%)
    }

    .support-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 40px
    }

    .case-metrics strong {
        font-size: 46px
    }

    .case-metrics>div:last-child strong {
        font-size: 32px
    }

    .solution-card {
        padding: 28px
    }

    .solution-card h3 {
        font-size: 25px
    }

    .bespoke-grid {
        gap: 50px
    }

    .bespoke-grid h2,
    .variant-b .bespoke-grid h2 {
        font-size: 45px
    }

    .support-b .support-banner h2 {
        font-size: 64px
    }

    .support-a .support-banner:after {
        background: linear-gradient(90deg, #080909 0%, #080909eb 35%, #08090991 57%, transparent 90%)
    }
}

@media(max-width:720px) {
    .container {
        width: calc(100% - 40px)
    }

    .header-inner,
    .variant-b .header-inner {
        min-height: 75px
    }

    .a-hero.keynote-a {
        padding: 43px 0 40px
    }

    .keynote-a .audience {
        font-size: 13px
    }

    .keynote-a h1 {
        font-size: clamp(39px, 6.9vw, 50px);
        letter-spacing: -.05em;
        margin-top: 20px;
        line-height: 1.1
    }

    .keynote-a .hero-description {
        font-size: 17px;
        margin-top: 20px;
        max-width: 470px;
        line-height: 1.7
    }

    .keynote-a .hero-description br {
        display: none
    }

    .keynote-a .hero-actions {
        margin-top: 23px;
        gap: 10px
    }

    .keynote-a .hero-actions .button {
        min-height: 49px;
        font-size: 14px !important;
        padding: 14px 21px
    }

    .keynote-a .under-button {
        flex-direction: column;
        gap: 6px;
        margin-top: 21px;
        font-size: 13px
    }

    .keynote-a .under-button strong {
        font-size: 14px
    }

    .keynote-a .under-button>span {
        border: 0;
        padding: 0
    }

    .keynote-a-art {
        margin-top: 22px;
        width: 100%
    }

    .keynote-a-art img {
        aspect-ratio: 1.7;
        object-fit: cover;
        object-position: center 65%
    }

    .keynote-a-art figcaption {
        font-size: 12px;
        padding-inline: 20px;
        margin-top: 7px;
        line-height: 1.6
    }

    h2,
    .variant-b h2,
    .a-solutions h2 {
        font-size: 35px;
        line-height: 1.12
    }

    .a-solutions {
        padding-block: 35px 58px
    }

    .solution-card {
        border-radius: 24px;
        min-height: 0;
        padding: 28px
    }

    .solution-card h3 {
        font-size: 28px
    }

    .solution-card p {
        font-size: 16px
    }

    .card-bottom {
        padding-top: 25px;
        font-size: 14px !important
    }

    .bespoke-section,
    .a-workspace {
        padding-block: 58px
    }

    .bespoke-grid h2,
    .variant-b .bespoke-grid h2 {
        font-size: 36px
    }

    .bespoke-grid {
        gap: 30px
    }

    .bespoke-grid>div>p {
        font-size: 16px
    }

    .bespoke-points h3 {
        font-size: 22px
    }

    .industries-section,
    .reported-cases {
        padding-block: 58px
    }

    .industry-card {
        padding: 27px
    }

    .industry-card h3 {
        font-size: 27px
    }

    .case-metrics strong {
        font-size: 40px
    }

    .case-metrics>div:last-child strong {
        font-size: 25px;
        line-height: 1.9
    }

    .case-metrics {
        gap: 25px 19px;
        margin-top: 28px;
        padding-block: 24px
    }

    .case-metrics span {
        font-size: 14px
    }

    .case-heading {
        gap: 25px
    }

    .portfolio-grid h3 {
        font-size: 24px
    }

    .a-economics {
        padding-block: 58px
    }

    .economic-card {
        padding: 28px
    }

    .economic-card strong {
        font-size: 50px
    }

    .economic-card b {
        font-size: 33px
    }

    .a-process {
        padding-block: 58px
    }

    .process-cards h3 {
        font-size: 25px
    }

    .a-faq,
    .b-faq {
        padding-block: 58px
    }

    .a-contact,
    .b-contact {
        padding-block: 58px
    }

    .a-contact h2,
    .b-contact h2 {
        font-size: 38px
    }

    .a-contact .form-card,
    .b-contact .form-card {
        padding: 25px;
        border-radius: 22px
    }

    .faq-list summary {
        font-size: 16px !important;
        line-height: 1.55
    }

    .faq-list details>p {
        font-size: 16px !important
    }

    .b-hero.keynote-b {
        padding: 42px 0 0;
        min-height: 0
    }

    .b-keynote-art {
        position: relative;
        inset: auto;
        width: 100%;
        height: 310px;
        object-fit: cover;
        object-position: 70% center;
        margin-top: 28px
    }

    .keynote-b:after {
        display: none
    }

    .b-keynote-content {
        position: relative;
        margin-top: -310px;
        padding-bottom: 338px
    }

    .keynote-b h1 {
        font-size: clamp(42px, 8.1vw, 57px);
        line-height: 1.1;
        margin-top: 24px;
        max-width: none
    }

    .b-keynote-content>.eyebrow {
        font-size: 12px !important
    }

    .b-keynote-content>p {
        font-size: 17px;
        line-height: 1.75;
        margin-top: 23px;
        max-width: 430px
    }

    .b-keynote-content>p br {
        display: none
    }

    .keynote-b .hero-actions {
        margin-top: 25px;
        gap: 12px;
        flex-direction: column;
        align-items: flex-start
    }

    .keynote-b .hero-actions .button {
        min-height: 50px;
        padding-inline: 23px
    }

    .b-keynote-offer {
        margin-top: 25px;
        gap: 17px;
        align-items: start
    }

    .b-keynote-offer strong {
        font-size: 21px;
        line-height: 1.5
    }

    .b-keynote-offer>span {
        font-size: 12px;
        padding-left: 17px;
        line-height: 1.7
    }

    .b-keynote-caption {
        margin: 0 auto;
        gap: 18px;
        padding-block: 18px 24px;
        font-size: 12px;
        line-height: 1.6
    }

    .b-keynote-caption>span {
        max-width: 48%
    }

    .b-keynote-caption>span:last-child {
        text-align: right
    }

    .variant-b .reported-cases {
        padding-top: 58px
    }

    .industry-panel {
        border-radius: 0 0 22px 22px
    }

    .industry-tabs button:first-child {
        border-radius: 17px 0 0 0
    }

    .industry-tabs button:nth-child(2) {
        border-radius: 0 17px 0 0
    }

    .industry-tabs button:last-child {
        border-radius: 0
    }

    .b-journey,
    .b-estimate,
    .b-approach {
        padding-block: 58px
    }

    .stage-panel {
        gap: 30px
    }

    .stage-visual {
        min-height: 280px
    }

    .stage-object {
        border-radius: 20px
    }

    .b-estimate .estimate-grid {
        gap: 30px
    }

    .calculator.roi-calculator {
        padding: 25px
    }

    .calculator>.button {
        font-size: 14px
    }

    .approach-list h3 {
        font-size: 24px
    }

    .support-banner {
        min-height: 0
    }

    .support-art {
        position: relative;
        height: 290px;
        object-fit: cover;
        object-position: 70% center;
        margin-top: 0
    }

    .support-a .support-banner:after {
        display: none
    }

    .support-a .support-banner-copy {
        margin-top: -290px;
        padding-top: 45px;
        padding-bottom: 335px
    }

    .support-banner h2 {
        font-size: 46px;
        line-height: 1.08;
        max-width: none;
        margin-top: 22px
    }

    .support-banner .eyebrow {
        max-width: 310px;
        font-size: 12px !important;
        line-height: 1.8
    }

    .support-banner p {
        font-size: 18px;
        line-height: 1.7;
        margin-top: 22px
    }

    .support-banner .button {
        font-size: 14px;
        margin-top: 25px;
        padding-inline: 22px
    }

    .support-details {
        padding-block: 38px 48px
    }

    .support-cards {
        grid-template-columns: 1fr;
        gap: 28px
    }

    .support-cards article {
        border-bottom: 1px solid #e0e3e5;
        padding-bottom: 24px
    }

    .support-cards article:last-child {
        border-bottom: 0;
        padding-bottom: 0
    }

    .support-cards article>span {
        margin-bottom: 11px
    }

    .support-cards h3 {
        font-size: 25px
    }

    .support-cards p {
        margin-top: 12px;
        font-size: 16px
    }

    .support-terms {
        font-size: 13px;
        margin-top: 28px
    }

    .support-b .support-banner-copy {
        padding-block: 52px 20px
    }

    .support-b .support-banner h2 {
        font-size: 45px;
        line-height: 1.12
    }

    .support-b .support-banner h2 br {
        display: block
    }

    .support-b .support-banner p {
        font-size: 19px
    }

    .support-b .support-banner .eyebrow {
        max-width: none
    }

    .support-b .support-details {
        padding-top: 27px
    }

    .support-b .support-cards {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .support-b .support-cards article {
        border: 0;
        padding: 26px
    }

    .support-b .support-cards h3 {
        font-size: 25px
    }
}

@media(max-width:390px) {
    .keynote-a h1 {
        font-size: 39px
    }

    .keynote-a .hero-actions {
        flex-direction: column;
        align-items: center
    }

    .keynote-a .hero-actions .button {
        width: 100%;
        max-width: 305px
    }

    .keynote-b h1 {
        font-size: 42px
    }

    .keynote-b .b-keynote-offer {
        flex-direction: column;
        gap: 10px
    }

    .b-keynote-offer>span {
        border: 0;
        padding: 0;
        font-size: 13px
    }

    .support-banner h2 {
        font-size: 44px
    }

    .support-b .support-banner h2 {
        font-size: 40px
    }

    .case-metrics>div:last-child strong {
        font-size: 23px
    }
}

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

    .button:hover,
    .solution-card:hover {
        transform: none
    }
}

.integration-section {
    padding-block: 24px 65px
}

.integration-heading {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: center;
    margin-bottom: 28px
}

.integration-heading>p {
    font-size: 18px;
    color: #6c747d
}

.integration-brands {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border-block: 1px solid #e0e4e8;
    gap: 15px;
    padding-block: 29px
}

.integration-brands strong {
    display: block;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.04em
}

.integration-brands>div:nth-child(5) strong {
    font-size: 20px
}

.integration-brands span {
    display: block;
    font-size: 12px;
    color: #8b949c;
    margin-top: 6px
}

.integration-note {
    font-size: 13px;
    line-height: 1.8;
    color: #8c949c;
    max-width: 1080px;
    margin-top: 20px
}

.variant-b .integration-section {
    padding-block: 48px 65px
}

.variant-b .integration-heading>p {
    color: #9aa4ae
}

.variant-b .integration-brands {
    border-color: #333b43
}

.variant-b .integration-brands strong {
    color: #d7e0e6
}

.variant-b .integration-note {
    color: #808f9f
}

.ai-section {
    padding-block: 88px;
    background: #eff2f5
}

.ai-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start
}

.ai-heading h2 {
    margin-top: 22px
}

.ai-heading>div>p {
    font-size: 18px;
    line-height: 1.8;
    color: #747f8b
}

.ai-heading .button {
    margin-top: 28px
}

.ai-scenarios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 48px
}

.ai-scenarios article {
    padding: 32px;
    background: #fff;
    border-radius: 26px
}

.ai-scenario-number {
    font-size: 13px;
    color: #93a1af
}

.ai-scenarios h3 {
    font-size: 27px;
    letter-spacing: -.035em;
    margin-top: 16px;
    line-height: 1.25
}

.ai-scenarios p {
    font-size: 16px;
    color: #798491;
    line-height: 1.8;
    margin-top: 16px
}

.ai-control {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 75px;
    margin-top: 38px;
    border-top: 1px solid #d2dce4;
    padding-top: 28px
}

.ai-control strong {
    font-size: 26px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.03em
}

.ai-control p {
    font-size: 14px;
    color: #82909c;
    line-height: 1.85
}

.ai-b {
    background: #141a20
}

.variant-b .ai-heading h2 {
    color: #f5f5f7
}

.ai-b .ai-heading>div>p {
    color: #9aa9b9
}

.ai-b .ai-scenarios {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px
}

.ai-b .ai-scenarios article {
    background: #1e2731;
    border: 1px solid #303d48;
    padding: 28px;
    border-radius: 22px
}

.ai-b .ai-scenarios h3 {
    font-size: 23px
}

.ai-b .ai-scenarios p {
    color: #99a9b9
}

.ai-b .ai-control {
    border-color: #37434e
}

.ai-b .ai-control strong {
    color: #c8e69c
}

.ai-b .ai-control p {
    color: #8d9eaf
}

.starting-section {
    padding-block: 85px
}

.starting-heading {
    display: grid;
    grid-template-columns: 1fr .7fr;
    gap: 75px;
    align-items: end
}

.starting-heading h2 {
    margin-top: 20px
}

.starting-heading h2 span {
    color: #84927a
}

.starting-heading>p {
    font-size: 17px;
    line-height: 1.8;
    color: #7e8994
}

.starting-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 38px
}

.starting-grid article {
    background: #f1f4f5;
    border-radius: 25px;
    padding: 30px
}

.starting-grid h3 {
    font-size: 25px;
    line-height: 1.3;
    letter-spacing: -.03em
}

.starting-grid p {
    font-size: 16px;
    color: #7b8793;
    line-height: 1.8;
    margin-top: 16px
}

.delivery-scope {
    margin-top: 35px;
    padding: 32px;
    border: 1px solid #dce2e7;
    border-radius: 25px
}

.delivery-scope h3 {
    font-size: 24px;
    letter-spacing: -.03em
}

.delivery-scope ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 40px;
    list-style: none;
    padding: 0;
    margin: 25px 0 0;
    color: #778492;
    font-size: 15px;
    line-height: 1.8
}

.delivery-scope li {
    padding-left: 20px;
    position: relative
}

.delivery-scope li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #839962
}

.starting-section>.button {
    margin-top: 28px
}

.variant-b .starting-grid article {
    background: #1b232a
}

.variant-b .delivery-scope {
    border-color: #333f49
}

.variant-b .starting-grid p,
.variant-b .delivery-scope ul,
.variant-b .starting-heading>p {
    color: #9aa7b4
}

.variant-b .starting-heading h2 span {
    color: #bbed66
}

.variant-b .starting-section>.button {
    color: #20272d;
    background: #edf1e5
}

@media(max-width:1100px) {
    .integration-brands {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px
    }

    .ai-b .ai-scenarios {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ai-heading,
    .ai-control {
        gap: 45px
    }

    .starting-heading {
        gap: 45px
    }

    .starting-grid article {
        padding: 25px
    }
}

@media(max-width:720px) {
    .b-hero.keynote-b {
        display: flex;
        flex-direction: column
    }

    .b-keynote-content {
        order: 1;
        margin-top: 0;
        padding-bottom: 0
    }

    .b-keynote-art {
        order: 2;
        margin-top: 27px
    }

    .b-keynote-caption {
        order: 3
    }

    .support-a .support-banner {
        display: flex;
        flex-direction: column
    }

    .support-a .support-banner-copy {
        order: 1;
        margin-top: 0;
        padding-top: 45px;
        padding-bottom: 0
    }

    .support-art {
        order: 2;
        margin-top: 25px
    }

    .integration-section,
    .variant-b .integration-section {
        padding-block: 30px 48px
    }

    .integration-heading {
        display: block
    }

    .integration-heading>p {
        font-size: 16px;
        margin-top: 16px
    }

    .integration-brands {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px 18px
    }

    .integration-brands strong {
        font-size: 22px
    }

    .integration-brands>div:nth-child(5) strong {
        font-size: 19px
    }

    .integration-note {
        font-size: 13px
    }

    .ai-section {
        padding-block: 54px
    }

    .ai-heading {
        grid-template-columns: 1fr;
        gap: 27px
    }

    .ai-heading>div>p {
        font-size: 17px
    }

    .ai-heading .button {
        margin-top: 23px
    }

    .ai-scenarios,
    .ai-b .ai-scenarios {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 28px
    }

    .ai-scenarios article,
    .ai-b .ai-scenarios article {
        padding: 26px
    }

    .ai-scenarios h3,
    .ai-b .ai-scenarios h3 {
        font-size: 26px
    }

    .ai-control {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 28px;
        padding-top: 23px
    }

    .ai-control strong {
        font-size: 25px
    }

    .ai-control p {
        font-size: 14px
    }

    .starting-section {
        padding-block: 54px
    }

    .starting-heading {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .starting-heading>p {
        font-size: 16px
    }

    .starting-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 29px
    }

    .starting-grid article {
        padding: 26px
    }

    .starting-grid h3 {
        font-size: 25px
    }

    .delivery-scope {
        padding: 26px;
        margin-top: 24px
    }

    .delivery-scope ul {
        grid-template-columns: 1fr;
        font-size: 15px;
        gap: 13px;
        margin-top: 20px
    }

    .delivery-scope h3 {
        font-size: 23px
    }

    .starting-section>.button {
        width: 100%;
        font-size: 14px
    }
}

.keynote-a-art img {
    height: auto
}