/* =========================================================
   MICHAEL WOOD — SERVICEFLOWOS PRODUCT PAGE
========================================================= */

:root {
    --sfo-navy: #071021;
    --sfo-navy-2: #0b1730;
    --sfo-blue: #4769df;
    --sfo-blue-2: #5f7df0;
    --sfo-purple: #8a62df;
    --sfo-cyan: #42d7f5;
    --sfo-white: #ffffff;
    --sfo-soft: #f7f9fd;
    --sfo-soft-2: #eef3fb;
    --sfo-ink: #081225;
    --sfo-copy: #53617a;
    --sfo-border: #dfe6f1;
    --sfo-shadow: 0 28px 70px rgba(17, 33, 63, .13);
}

.sfoPage {
    overflow: hidden;
    background: #fff;
    color: var(--sfo-ink);
}

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

.sfoContainer {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.sfoContainer--wide {
    width: min(1320px, calc(100% - 48px));
}

.sfoSection {
    padding: 110px 0;
}

.sfoWhite { background: #fff; }
.sfoSoft { background: var(--sfo-soft); }
.sfoDark {
    background:
        radial-gradient(circle at 12% 15%, rgba(66,215,245,.10), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(138,98,223,.16), transparent 34%),
        var(--sfo-navy);
    color: #fff;
}

.sfoEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #aab5c9;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.sfoEyebrow > span {
    width: 28px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--sfo-cyan), var(--sfo-purple));
}

.sfoEyebrow--dark {
    color: #637088;
}

.sfoSectionHead {
    max-width: 820px;
    margin-bottom: 54px;
}

.sfoSectionHead--center {
    margin-inline: auto;
    text-align: center;
}

.sfoSectionHead--center .sfoEyebrow {
    justify-content: center;
}

.sfoSectionHead h2,
.sfoSplitHead h2,
.sfoProblem h2,
.sfoBuild h2,
.sfoFaq h2,
.sfoFinal h2 {
    margin: 18px 0 20px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -.055em;
    color: var(--sfo-ink);
}

.sfoSectionHead h2 span,
.sfoSplitHead h2 span,
.sfoProblem h2 span,
.sfoFaq h2 span {
    display: block;
    background: linear-gradient(100deg, var(--sfo-blue), var(--sfo-purple));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sfoSectionHead > p,
.sfoSplitHead > p,
.sfoProblem__copy > p,
.sfoFaq__intro > p {
    color: var(--sfo-copy);
    font-size: 17px;
    line-height: 1.75;
}

.sfoDark .sfoSectionHead h2,
.sfoBuild h2,
.sfoFinal h2 {
    color: #fff;
}

.sfoDark .sfoSectionHead h2 span,
.sfoBuild h2 span,
.sfoFinal h2 span {
    display: block;
    color: #aab7ff;
}

.sfoDark .sfoSectionHead > p,
.sfoBuild__copy > p,
.sfoFinal p {
    color: #a8b4c8;
}

/* HERO */

.sfoHero {
    position: relative;
    min-height: 780px;
    display: flex;
    align-items: center;
    background: var(--sfo-navy);
    color: #fff;
    isolation: isolate;
}

.sfoHero__media,
.sfoHero__overlay,
.sfoHero__grid,
.sfoHero__glow {
    position: absolute;
    inset: 0;
}

.sfoHero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .24;
    filter: saturate(.8) contrast(1.1);
}

.sfoHero__overlay {
    background:
        linear-gradient(90deg, rgba(7,16,33,.98) 0%, rgba(7,16,33,.92) 46%, rgba(7,16,33,.56) 100%),
        linear-gradient(180deg, rgba(7,16,33,.10), rgba(7,16,33,.80));
}

.sfoHero__grid,
.sfoFinal__grid {
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
}

.sfoHero__glow--one {
    width: 550px;
    height: 550px;
    left: auto;
    right: 5%;
    top: 12%;
    border-radius: 50%;
    background: rgba(71,105,223,.22);
    filter: blur(110px);
}

.sfoHero__glow--two {
    width: 420px;
    height: 420px;
    right: 30%;
    bottom: 0;
    top: auto;
    border-radius: 50%;
    background: rgba(138,98,223,.16);
    filter: blur(100px);
}

.sfoHero__content {
    width: min(820px, 100%);
    padding: 145px 0 150px;
}

.sfoHero__brand {
    margin-top: 26px;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 900;
    letter-spacing: -.03em;
    color: #fff;
}

.sfoHero__brand span { color: var(--sfo-cyan); }

.sfoHero h1 {
    margin: 20px 0 24px;
    max-width: 900px;
    font-size: clamp(52px, 7vw, 94px);
    line-height: .93;
    letter-spacing: -.068em;
    color: #fff;
}

.sfoHero h1 span {
    display: block;
    background: linear-gradient(100deg, #7ee8ff 0%, #7891ff 48%, #b592ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sfoHero__lead {
    max-width: 740px;
    margin: 0;
    color: #c2cada;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.7;
}

.sfoHero__actions,
.sfoBuild__actions,
.sfoFinal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.sfoButton {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 21px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: .015em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

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

.sfoButton--primary {
    color: #fff;
    background: linear-gradient(100deg, var(--sfo-blue), var(--sfo-purple));
    box-shadow: 0 14px 35px rgba(71,105,223,.28);
}

.sfoButton--outline {
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
}

.sfoButton--dark {
    background: var(--sfo-navy);
    color: #fff;
}

.sfoButton--full { width: 100%; }

.sfoHero__points {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-top: 34px;
    color: #aeb8c9;
    font-size: 13px;
    font-weight: 700;
}

.sfoHero__points span::first-letter { color: var(--sfo-cyan); }

.sfoHero__featureBar {
    position: absolute;
    inset: auto 0 0;
    border-top: 1px solid rgba(255,255,255,.10);
    background: rgba(5,12,26,.62);
    backdrop-filter: blur(16px);
}

.sfoHero__featureTrack {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: #d4daea;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sfoHero__featureTrack i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--sfo-cyan);
}

/* SPLIT HEADING */

.sfoSplitHead {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 60px;
}

.sfoSplitHead > p { margin: 0; }

/* WORKFLOW */

.sfoWorkflow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.sfoWorkflow__step {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border: 1px solid var(--sfo-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 36px rgba(21, 42, 81, .06);
}

.sfoWorkflow__step > span {
    margin-bottom: 22px;
    color: var(--sfo-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.sfoWorkflow__step strong {
    font-size: 19px;
    color: var(--sfo-ink);
}

.sfoWorkflow__step small {
    margin-top: 7px;
    color: var(--sfo-copy);
    line-height: 1.5;
}

.sfoWorkflow__arrow {
    color: #a4aec0;
    font-size: 22px;
}

/* DEVICES */

.sfoDevices {
    position: relative;
    min-height: 670px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfoDevice {
    margin: 0;
    overflow: hidden;
    background: #0c1425;
    border: 1px solid rgba(9,22,44,.12);
    box-shadow: var(--sfo-shadow);
}

.sfoDevice img {
    display: block;
    width: 100%;
    height: auto;
}

.sfoDevice--desktop {
    width: min(920px, 78%);
    border-radius: 17px;
}

.sfoDevice--tablet {
    position: absolute;
    width: 31%;
    right: 3%;
    bottom: 8%;
    border-radius: 22px;
    transform: rotate(1.5deg);
}

.sfoDevice--mobile {
    position: absolute;
    width: 14%;
    left: 7%;
    bottom: 2%;
    border-radius: 24px;
    transform: rotate(-3deg);
}

.sfoBrowserBar {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    background: #111b2f;
    color: #8894aa;
    font-size: 11px;
}

.sfoBrowserBar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34405a;
}

.sfoBrowserBar span { margin-left: 7px; }

/* PROBLEM */

.sfoProblem {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
}

.sfoProblem__copy p { max-width: 640px; }

.sfoProblem__list {
    display: grid;
    gap: 14px;
}

.sfoProblem__list article {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    padding: 23px;
    border: 1px solid var(--sfo-border);
    border-radius: 15px;
    background: var(--sfo-soft);
}

.sfoProblem__list article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #e9eeff;
    color: var(--sfo-blue);
    font-size: 11px;
    font-weight: 900;
}

.sfoProblem__list strong {
    color: var(--sfo-ink);
    font-size: 16px;
}

.sfoProblem__list p {
    margin: 6px 0 0;
    color: var(--sfo-copy);
    line-height: 1.6;
}

/* DEMOS */

.sfoDemos {
    display: grid;
    gap: 90px;
}

.sfoDemo {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: center;
}

.sfoDemo--reverse .sfoDemo__media { order: 2; }
.sfoDemo--reverse .sfoDemo__copy { order: 1; }

.sfoDemo__media {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background: #0d1629;
    box-shadow: 0 35px 90px rgba(0,0,0,.32);
}

.sfoDemo__media video {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    background: #111b2f;
}

.sfoDemo__copy > span {
    color: var(--sfo-cyan);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.sfoDemo__copy h3 {
    margin: 12px 0 15px;
    color: #fff;
    font-size: clamp(28px, 4vw, 43px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

.sfoDemo__copy p {
    color: #aab5c8;
    font-size: 16px;
    line-height: 1.75;
}

/* FEATURES */

.sfoFeatures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.sfoFeature {
    min-height: 225px;
    padding: 26px;
    border: 1px solid var(--sfo-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 32, 65, .055);
}

.sfoFeature > span {
    color: var(--sfo-blue);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
}

.sfoFeature h3 {
    margin: 38px 0 10px;
    color: var(--sfo-ink);
    font-size: 19px;
}

.sfoFeature p {
    margin: 0;
    color: var(--sfo-copy);
    line-height: 1.65;
}

/* INDUSTRIES */

.sfoIndustries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sfoIndustry {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 18px 20px;
    border: 1px solid var(--sfo-border);
    border-radius: 14px;
    background: #fff;
    color: var(--sfo-ink);
    font-weight: 800;
}

.sfoIndustry span {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    flex: 0 0 27px;
    border-radius: 50%;
    background: #edf1ff;
    color: var(--sfo-blue);
}

/* BUILT BY MICHAEL */

.sfoBuild {
    background:
        radial-gradient(circle at 15% 15%, rgba(66,215,245,.10), transparent 30%),
        radial-gradient(circle at 85% 80%, rgba(138,98,223,.17), transparent 32%),
        var(--sfo-navy);
    color: #fff;
}

.sfoBuild__grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: center;
}

.sfoBuild__copy > p {
    font-size: 16px;
    line-height: 1.75;
}

.sfoBuild__screen { position: relative; }

.sfoBrowserFrame {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 17px;
    background: #101a2d;
    box-shadow: 0 45px 110px rgba(0,0,0,.36);
}

.sfoBrowserFrame img {
    display: block;
    width: 100%;
}

.sfoBuild__chip {
    position: absolute;
    min-width: 175px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 13px;
    background: rgba(13,25,49,.88);
    backdrop-filter: blur(13px);
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.sfoBuild__chip small {
    display: block;
    margin-bottom: 5px;
    color: #8f9ab0;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sfoBuild__chip strong {
    color: #fff;
    font-size: 13px;
}

.sfoBuild__chip--one { left: -26px; bottom: 18%; }
.sfoBuild__chip--two { right: -24px; top: 17%; }

/* PRICING */

.sfoPricing { background: #fff; }

.sfoPricing__grid {
    width: min(920px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.sfoPrice {
    position: relative;
    padding: 36px;
    border: 1px solid var(--sfo-border);
    border-radius: 20px;
    background: var(--sfo-soft);
}

.sfoPrice--featured {
    background: #fff;
    border-color: #bfcafd;
    box-shadow: 0 28px 70px rgba(71,105,223,.14);
}

.sfoPrice__badge {
    position: absolute;
    right: 24px;
    top: 24px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecf0ff;
    color: var(--sfo-blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sfoPrice__label {
    display: block;
    color: #6d7890;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.sfoPrice__number {
    display: flex;
    align-items: flex-end;
    margin: 26px 0 14px;
    color: var(--sfo-ink);
}

.sfoPrice__number small {
    align-self: flex-start;
    margin-top: 14px;
    font-size: 24px;
    font-weight: 900;
}

.sfoPrice__number strong {
    font-size: 74px;
    line-height: .8;
    letter-spacing: -.07em;
}

.sfoPrice__number span {
    margin-left: 8px;
    color: var(--sfo-copy);
    font-size: 13px;
}

.sfoPrice > p {
    color: var(--sfo-copy);
    line-height: 1.6;
}

.sfoPrice ul {
    margin: 28px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.sfoPrice li {
    position: relative;
    padding-left: 24px;
    color: #33415d;
    font-size: 14px;
}

.sfoPrice li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--sfo-blue);
    font-weight: 900;
}

.sfoPrice__note {
    margin: 32px 0;
    padding: 20px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--sfo-border);
}

.sfoPrice__note strong { color: var(--sfo-ink); }

.sfoPrice__note p {
    margin: 8px 0 0;
    color: var(--sfo-copy);
    line-height: 1.65;
}

/* FAQ */

.sfoFaq {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 80px;
}

.sfoFaq__items {
    border-top: 1px solid var(--sfo-border);
}

.sfoFaq__items details {
    border-bottom: 1px solid var(--sfo-border);
}

.sfoFaq__items summary {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    cursor: pointer;
    list-style: none;
    color: var(--sfo-ink);
    font-size: 16px;
    font-weight: 850;
}

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

.sfoFaq__items summary span {
    color: var(--sfo-blue);
    font-size: 23px;
    transition: transform .2s ease;
}

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

.sfoFaq__items details p {
    max-width: 720px;
    margin: -4px 0 24px;
    color: var(--sfo-copy);
    line-height: 1.7;
}

/* FINAL */

.sfoFinal {
    position: relative;
    padding: 92px 0;
    overflow: hidden;
    background: var(--sfo-navy);
    color: #fff;
}

.sfoFinal__grid,
.sfoFinal__glow {
    position: absolute;
    inset: 0;
}

.sfoFinal__glow {
    width: 650px;
    height: 650px;
    left: auto;
    right: -100px;
    top: -260px;
    border-radius: 50%;
    background: rgba(87,102,244,.19);
    filter: blur(100px);
}

.sfoFinal__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 50px;
    align-items: center;
}

.sfoFinal h2 { max-width: 770px; }

.sfoFinal p {
    max-width: 680px;
    font-size: 16px;
    line-height: 1.7;
}

.sfoFinal__actions {
    margin-top: 0;
    justify-content: flex-end;
}

/* REVEALS */

.sfoReveal {
    opacity: 1;
    transform: none;
}

.sfoJs .sfoReveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity .75s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.sfoJs .sfoReveal--left { transform: translateX(-42px); }
.sfoJs .sfoReveal--right { transform: translateX(42px); }

.sfoJs .sfoReveal.is-visible {
    opacity: 1;
    transform: none;
}

.sfoDelay1 { transition-delay: .08s !important; }
.sfoDelay2 { transition-delay: .16s !important; }
.sfoDelay3 { transition-delay: .24s !important; }
.sfoDelay4 { transition-delay: .32s !important; }

.sfoSwipeHint {
    display: none;
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .sfoSection { padding: 90px 0; }

    .sfoWorkflow {
        grid-template-columns: repeat(5, 1fr);
        gap: 10px;
    }

    .sfoWorkflow__arrow { display: none; }

    .sfoFeatures { grid-template-columns: repeat(3, 1fr); }
    .sfoIndustries { grid-template-columns: repeat(2, 1fr); }

    .sfoBuild__grid,
    .sfoProblem,
    .sfoFaq {
        gap: 50px;
    }

    .sfoDemo { gap: 40px; }
}

@media (max-width: 820px) {
    .sfoContainer,
    .sfoContainer--wide {
        width: min(100% - 32px, 1180px);
    }

    .sfoHero {
        min-height: 760px;
    }

    .sfoHero__content {
        padding: 125px 0 135px;
    }

    .sfoHero__featureTrack {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .sfoHero__featureTrack::-webkit-scrollbar { display: none; }
    .sfoHero__featureTrack span { flex: 0 0 auto; }

    .sfoSplitHead,
    .sfoProblem,
    .sfoBuild__grid,
    .sfoFaq,
    .sfoFinal__inner {
        grid-template-columns: 1fr;
    }

    .sfoSplitHead,
    .sfoProblem,
    .sfoBuild__grid,
    .sfoFaq {
        gap: 36px;
    }

    .sfoDevices { min-height: 530px; }
    .sfoDevice--desktop { width: 88%; }
    .sfoDevice--tablet { width: 36%; right: 0; }
    .sfoDevice--mobile { width: 17%; left: 2%; }

    .sfoDemo,
    .sfoDemo--reverse {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .sfoDemo--reverse .sfoDemo__media,
    .sfoDemo--reverse .sfoDemo__copy {
        order: initial;
    }

    .sfoFeatures { grid-template-columns: repeat(2, 1fr); }

    .sfoPricing__grid { grid-template-columns: 1fr; }

    .sfoFinal__actions {
        justify-content: flex-start;
    }

    .sfoBuild__chip--one { left: 10px; }
    .sfoBuild__chip--two { right: 10px; }
}

@media (max-width: 620px) {
    .sfoSection { padding: 72px 0; }

    .sfoContainer,
    .sfoContainer--wide {
        width: min(100% - 24px, 1180px);
    }

    .sfoHero {
        min-height: 720px;
    }

    .sfoHero__content {
        padding: 105px 0 135px;
    }

    .sfoHero h1 {
        font-size: clamp(46px, 14vw, 67px);
    }

    .sfoHero__lead {
        font-size: 16px;
    }

    .sfoHero__actions,
    .sfoBuild__actions,
    .sfoFinal__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sfoButton { width: 100%; }

    .sfoHero__points {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .sfoHero__featureBar {
        position: absolute;
    }

    .sfoSectionHead h2,
    .sfoSplitHead h2,
    .sfoProblem h2,
    .sfoBuild h2,
    .sfoFaq h2,
    .sfoFinal h2 {
        font-size: clamp(35px, 11vw, 49px);
    }

    .sfoWorkflow {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .sfoWorkflow::-webkit-scrollbar { display: none; }

    .sfoWorkflow__step {
        min-width: 235px;
        scroll-snap-align: start;
    }

    .sfoDevices {
        min-height: 395px;
        margin-top: 20px;
    }

    .sfoDevice--desktop {
        width: 96%;
    }

    .sfoDevice--tablet {
        width: 41%;
        right: -2%;
        bottom: 0;
    }

    .sfoDevice--mobile {
        width: 20%;
        left: 0;
        bottom: -3%;
    }

    .sfoProblem__list article {
        grid-template-columns: 42px 1fr;
        padding: 18px;
    }

    .sfoDemos { gap: 64px; }

    .sfoDemo__media {
        border-radius: 15px;
    }

    .sfoFeatures,
    .sfoIndustries {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding-bottom: 8px;
    }

    .sfoFeatures::-webkit-scrollbar,
    .sfoIndustries::-webkit-scrollbar {
        display: none;
    }

    .sfoFeature {
        min-width: 82%;
        scroll-snap-align: start;
    }

    .sfoIndustry {
        min-width: 75%;
        scroll-snap-align: start;
    }

    .sfoSwipeHint {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 14px;
        color: #7b879d;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .sfoBuild__chip {
        display: none;
    }

    .sfoPrice {
        padding: 28px 22px;
    }

    .sfoPrice__number strong {
        font-size: 65px;
    }

    .sfoFinal {
        padding: 72px 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sfoJs .sfoReveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html { scroll-behavior: auto !important; }
}