:root {
    --brand-coral: #fc6156;
    --brand-coral-dark: #b83d36;
    --brand-coral-soft: #fff0ed;
    --brand-blue: #1448c8;
    --brand-blue-hover: #103ca9;
    --brand-blue-dark: #0b1f52;
    --brand-blue-darkest: #081a3f;
    --brand-blue-raised: #12306f;
    --brand-blue-soft: #edf3ff;
    --bg-page: #fafaf8;
    --surface: #ffffff;
    --surface-alt: #f5f6f8;
    --text-primary: #1e2430;
    --text-secondary: #596170;
    --border: #e4e2dc;
    --success: #2f855a;
    --success-soft: #e9f7ef;
    --warning: #9a620e;
    --warning-soft: #fff4dc;
    --error: #d8483d;
    --error-soft: #fcecea;
    --info: #3b82c4;
    --info-soft: #eaf4fc;
    --on-dark: #f8faff;
    --on-dark-soft: #c7d2eb;
    --white: #ffffff;
    --shadow-sm: 0 14px 40px rgba(11, 31, 82, 0.08);
    --shadow-lg: 0 36px 90px rgba(11, 31, 82, 0.14);
    --motion-duration: 620ms;
    --motion-ease: cubic-bezier(0.2, 0.75, 0.3, 1);
    --motion-distance: 18px;
    --radius-sm: 10px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --container: 1180px;
    --header-height: 78px;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: Iowan Old Style, Charter, "Palatino Linotype", Georgia, serif;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    margin: 0;
    min-width: 320px;
    overflow-x: hidden;
    color: var(--text-primary);
    background: var(--bg-page);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

body.modal-open {
    overflow: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

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

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

button {
    color: inherit;
}

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

p,
h1,
h2,
h3,
h4 {
    margin-top: 0;
}

:focus-visible {
    outline: 3px solid rgba(20, 72, 200, 0.42);
    outline-offset: 4px;
}

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 300;
    padding: 10px 16px;
    border-radius: 8px;
    color: var(--white);
    background: var(--text-primary);
    transform: translateY(-160%);
    transition: transform 160ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

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

.section {
    position: relative;
    padding-block: 84px;
}

.eyebrow {
    margin-bottom: 16px;
    color: var(--brand-coral);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.45;
    text-transform: uppercase;
}

h1,
h2 {
    font-family: var(--font-sans);
    font-weight: 760;
    letter-spacing: -0.055em;
    line-height: 1.04;
}

h1 {
    margin-bottom: 24px;
    font-size: clamp(2.55rem, 7.5vw, 4.35rem);
}

h1 span,
#pricing-title span {
    display: block;
}

h1 .accent-line {
    margin-top: 0.12em;
    color: var(--brand-coral);
}

h2 {
    margin-bottom: 24px;
    font-size: clamp(2.25rem, 6vw, 4rem);
}

h3,
h4 {
    line-height: 1.25;
}

.button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid var(--brand-blue);
    border-radius: 999px;
    color: var(--white);
    background: var(--brand-blue);
    box-shadow: 0 12px 25px rgba(20, 72, 200, 0.2);
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.button:hover {
    background: var(--brand-blue-hover);
    border-color: var(--brand-blue-hover);
    box-shadow: 0 16px 28px rgba(20, 72, 200, 0.26);
    transform: translateY(-2px);
}

.button-small {
    min-height: 42px;
    padding-inline: 18px;
    font-size: 0.86rem;
}

.button-secondary,
.button-quiet {
    color: var(--brand-blue);
    background: transparent;
    border-color: var(--brand-blue);
    box-shadow: none;
}

.button-secondary:hover,
.button-quiet:hover {
    color: var(--brand-blue-hover);
    background: var(--brand-blue-soft);
    border-color: var(--brand-blue-hover);
    box-shadow: none;
}

.button-light {
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    border-color: var(--brand-coral);
    box-shadow: none;
}

.button-light:hover {
    color: var(--white);
    background: var(--brand-coral-dark);
    border-color: var(--brand-coral-dark);
    box-shadow: none;
}

.button-outline-light {
    color: var(--white);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.button-outline-light:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: none;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.site-header.is-scrolled {
    border-color: var(--border);
    box-shadow: 0 12px 32px rgba(11, 31, 82, 0.07);
}

.header-inner {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.brand-wordmark {
    width: auto;
    height: 40px;
    object-fit: contain;
}

.menu-toggle {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    cursor: pointer;
}

.menu-toggle span {
    width: 18px;
    height: 1.5px;
    background: var(--text-primary);
    transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

.primary-navigation {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 18px 20px 28px;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.primary-navigation.is-open {
    display: block;
}

.nav-links {
    display: grid;
}

.nav-links a {
    padding-block: 13px;
    border-bottom: 1px solid var(--border);
    font-size: 1.03rem;
    font-weight: 650;
}

.nav-links a:hover,
.text-link:hover {
    color: var(--brand-blue);
}

.nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-top: 22px;
}

.merchant-login {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 17px;
    border: 1px solid var(--brand-blue);
    border-radius: 999px;
    color: var(--brand-blue);
    background: transparent;
    font-size: 0.91rem;
    font-weight: 780;
    line-height: 1;
    transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.merchant-login:hover {
    color: var(--white);
    background: var(--brand-blue);
    transform: translateY(-1px);
}

.merchant-login.is-disabled {
    color: var(--text-secondary);
    border-color: var(--border);
    background: var(--surface-alt);
    cursor: not-allowed;
    opacity: 0.76;
}

.text-link {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
}

.language-switch {
    display: inline-flex;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 750;
}

.language-switch a.is-current {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hero {
    min-height: min(870px, calc(100vh - var(--header-height)));
    display: flex;
    align-items: center;
    padding-top: 64px;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: -20%;
    right: -45%;
    width: 100vw;
    height: 100vw;
    max-width: 950px;
    max-height: 950px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 72, 200, 0.1), rgba(250, 250, 248, 0) 68%);
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 62px;
}

.hero-copy {
    max-width: 730px;
}

.js.motion-ready .hero-enter,
.js.motion-ready .hero-product-enter {
    opacity: 0;
    animation: hero-enter 560ms var(--motion-ease) forwards;
}

.js.motion-ready .hero-enter-two { animation-delay: 70ms; }
.js.motion-ready .hero-enter-three { animation-delay: 140ms; }
.js.motion-ready .hero-enter-four { animation-delay: 210ms; }

.js.motion-ready .hero-product-enter {
    animation-name: hero-product-enter;
    animation-delay: 120ms;
    animation-duration: 680ms;
}

.hero-lead {
    max-width: 650px;
    margin-bottom: 18px;
    color: var(--text-secondary);
    font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    line-height: 1.65;
}

.hero-context {
    margin-bottom: 28px;
    max-width: 690px;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.55;
}

.micro-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
    padding: 8px 14px;
    border: 1px solid rgba(252, 97, 86, 0.28);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--brand-coral-soft);
    font-size: 0.84rem;
    font-weight: 750;
}

.micro-value > span:first-child {
    color: var(--brand-coral);
    font-size: 0.5rem;
}

.hero-visual {
    position: relative;
    width: 100%;
    min-height: 430px;
    max-width: 670px;
    margin-inline: auto;
}

@keyframes hero-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-product-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes laptop-drift {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

.device {
    position: absolute;
}

.device-screen {
    overflow: hidden;
    background: var(--surface);
}

.laptop {
    right: -8%;
    bottom: 8%;
    width: 93%;
    padding: 11px 11px 0;
    border-radius: 18px 18px 9px 9px;
    background: var(--text-primary);
    box-shadow: var(--shadow-lg);
}

.laptop-camera {
    position: absolute;
    top: 4px;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #9ca3af;
}

.laptop .device-screen {
    aspect-ratio: 16 / 10;
    border-radius: 9px 9px 2px 2px;
}

.laptop-base {
    position: absolute;
    right: -4%;
    bottom: -13px;
    left: -4%;
    height: 14px;
    border-radius: 2px 2px 14px 14px;
    background: linear-gradient(#d9dce4, #9ca3af);
}

.laptop-base::after {
    position: absolute;
    top: 0;
    left: 44%;
    width: 12%;
    height: 4px;
    border-radius: 0 0 5px 5px;
    background: #7c8492;
    content: "";
}

.manager-screen {
    display: flex;
    color: var(--text-primary);
    font-size: clamp(0.42rem, 1.25vw, 0.74rem);
}

.manager-rail {
    display: flex;
    width: 14%;
    flex-direction: column;
    align-items: center;
    gap: 12%;
    padding-top: 5%;
    background: var(--brand-blue-dark);
}

.rail-logo {
    display: block;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 5px;
    object-fit: contain;
    background: var(--brand-coral);
}

.manager-rail span:not(.rail-logo) {
    width: 28%;
    height: 3px;
    border-radius: 4px;
    background: #7e91c5;
}

.manager-rail span:nth-child(2) {
    width: 34%;
    background: var(--brand-coral);
}

.manager-content {
    width: 86%;
    padding: 7% 6%;
    background: var(--surface-alt);
}

.mock-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7%;
}

.mock-topbar div {
    display: grid;
}

.mock-topbar small {
    color: var(--text-secondary);
}

.mock-topbar strong {
    font-size: 1.5em;
}

.today-pill {
    padding: 0.5em 0.9em;
    border-radius: 999px;
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
    font-weight: 700;
}

.order-table {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--white);
}

.order-row {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
    align-items: center;
    gap: 4%;
    padding: 4%;
    border-bottom: 1px solid var(--border);
}

.order-row:last-child {
    border-bottom: 0;
}

.order-row div {
    display: grid;
}

.order-row small {
    color: var(--text-secondary);
}

.order-row > strong {
    text-align: right;
}

.status {
    justify-self: start;
    padding: 0.38em 0.7em;
    border-radius: 999px;
    color: var(--warning);
    background: var(--warning-soft);
    font-size: 0.88em;
    font-weight: 750;
}

.status-new {
    color: var(--brand-coral-dark);
    background: var(--brand-coral-soft);
}

.status-done {
    color: var(--success);
    background: var(--success-soft);
}

.phone {
    z-index: 2;
    bottom: 0;
    left: 2%;
    width: 36%;
    min-width: 150px;
    padding: 7px;
    border: 2px solid var(--text-primary);
    border-radius: 27px;
    background: var(--text-primary);
    box-shadow: 0 28px 65px rgba(11, 31, 82, 0.22);
}

.phone .device-screen {
    aspect-ratio: 9 / 18.5;
    border-radius: 20px;
}

.phone-speaker {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 50%;
    width: 28%;
    height: 4px;
    border-radius: 5px;
    background: var(--text-primary);
    transform: translateX(-50%);
}

.storefront-screen {
    padding: 12% 7% 7%;
    color: var(--text-primary);
    font-size: clamp(0.46rem, 1.45vw, 0.75rem);
    background: var(--surface);
}

.storefront-bar {
    display: flex;
    align-items: center;
    gap: 5%;
    margin-bottom: 10%;
}

.store-brand-mark {
    display: grid;
    width: 18%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-family: var(--font-sans);
    font-size: 0.68em;
    letter-spacing: -0.04em;
    font-weight: 700;
}

.storefront-bar strong {
    flex: 1;
    font-family: var(--font-serif);
    font-size: 1em;
}

.bag-icon {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-size: 0.72em;
    font-weight: 800;
}

.storefront-hero {
    display: grid;
    gap: 2px;
    margin-bottom: 10%;
    padding: 10% 8%;
    border-radius: 9px;
    color: var(--brand-blue-dark);
    background: linear-gradient(135deg, var(--brand-coral), #ff8a82);
}

.storefront-hero small {
    opacity: 0.78;
    text-transform: uppercase;
}

.storefront-hero strong {
    font-family: var(--font-serif);
    font-size: 1.35em;
}

.store-products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5%;
}

.store-products article {
    display: grid;
    gap: 3px;
}

.store-products small {
    color: var(--brand-coral-dark);
    font-weight: 800;
}

.food-shape {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    margin-bottom: 5%;
    border-radius: 8px;
    background: var(--brand-coral-soft);
}

.food-shape span {
    position: absolute;
    border-radius: 50%;
    background: var(--brand-coral);
    box-shadow: inset 0 -4px 8px rgba(11, 31, 82, 0.08);
}

.food-shape span:nth-child(1) { width: 44%; height: 44%; top: 15%; left: 10%; }
.food-shape span:nth-child(2) { width: 38%; height: 38%; top: 37%; right: 8%; background: #ff9e77; }
.food-shape span:nth-child(3) { width: 32%; height: 32%; bottom: 5%; left: 16%; background: var(--brand-blue); }
.food-shape-two { background: var(--surface-alt); }
.food-shape-two span:nth-child(1) { background: var(--brand-coral-dark); }
.food-shape-two span:nth-child(2) { background: #ff8a82; }
.food-shape-two span:nth-child(3) { background: #ffd1b8; }

.mock-cart-button {
    display: block;
    margin-top: 12%;
    padding: 5% 7%;
    border-radius: 999px;
    color: var(--white);
    background: var(--brand-blue);
    text-align: center;
    font-weight: 750;
}

.proof-strip {
    padding-block: 74px;
    border-block: 1px solid var(--border);
    background: linear-gradient(135deg, var(--surface) 0%, #f4f7ff 100%);
}

.audience-strip {
    padding-block: 34px;
    border-bottom: 1px solid var(--border);
    background: var(--brand-coral-soft);
}

.audience-inner {
    display: grid;
    gap: 16px;
}

.audience-inner h2 {
    margin: 0;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.audience-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.audience-list li {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.86rem;
    font-weight: 700;
}

.audience-list li::before {
    margin-right: 7px;
    color: var(--brand-coral);
    content: "•";
}

.audience-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 650;
}

.proof-inner {
    display: grid;
    align-items: center;
    gap: 38px;
}

.proof-preview {
    position: relative;
    width: 100%;
    min-height: 240px;
    overflow: hidden;
    border: 7px solid var(--white);
    border-radius: var(--radius-md);
    background: var(--brand-blue-soft);
    box-shadow: var(--shadow-sm);
}

.proof-browser-bar {
    display: flex;
    height: 38px;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    color: var(--text-secondary);
    background: var(--white);
    font-size: 0.68rem;
}

.proof-browser-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #d7dbe5;
}

.proof-browser-bar span {
    margin-left: auto;
}

.proof-browser-body {
    display: flex;
    min-height: 195px;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 34px;
    background: radial-gradient(circle at 72% 24%, rgba(252, 97, 86, 0.2), transparent 34%), var(--brand-blue-soft);
}

.proof-logo {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 18px;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-size: 2rem;
    font-weight: 900;
    transform: rotate(-7deg);
}

.proof-browser-body div {
    display: grid;
    gap: 4px;
}

.proof-browser-body b {
    color: var(--brand-blue-dark);
    font-size: 1.35rem;
}

.proof-browser-body small {
    color: var(--text-secondary);
}

.proof-live {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--brand-blue-dark);
    background: rgba(255, 255, 255, 0.94);
    font-size: 0.76rem;
    font-weight: 750;
}

.proof-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(47, 133, 90, 0.14);
}

.proof-copy .eyebrow {
    margin-bottom: 12px;
}

.proof-copy h2 {
    margin-bottom: 18px;
    font-family: var(--font-sans);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}

.proof-copy > p:not(.eyebrow) {
    margin: 0 0 20px;
    color: var(--text-secondary);
    font-size: 1.02rem;
}

.proof-benefits {
    display: grid;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.proof-benefits li {
    font-size: 0.92rem;
    font-weight: 700;
}

.proof-benefits li::before {
    margin-right: 9px;
    color: var(--brand-coral);
    content: "✓";
}

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 800;
}

.arrow-link span:last-child {
    font-size: 1.35rem;
    transition: transform 180ms ease;
}

.arrow-link:hover span:last-child {
    transform: translateX(4px);
}

.section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.section-heading > p:last-child {
    max-width: 670px;
    margin-bottom: 0;
    color: var(--text-secondary);
    font-size: 1.04rem;
}

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

.problem-section {
    background: var(--bg-page);
    overflow: hidden;
}

.comparison-grid {
    display: grid;
    gap: 18px;
}

.comparison-card {
    padding: 24px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: 0 12px 34px rgba(11, 31, 82, 0.04);
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.comparison-card:hover {
    box-shadow: 0 22px 48px rgba(11, 31, 82, 0.09);
    transform: translateY(-3px);
}

.before-card {
    color: var(--text-primary);
    background: #fff6f3;
    border-top: 4px solid var(--brand-coral);
}

.after-card {
    color: var(--text-primary);
    background: var(--brand-blue-soft);
    border-color: #ccd9f5;
    border-top: 4px solid var(--brand-blue);
}

.after-card .card-kicker span,
.after-card .comparison-list li > span {
    color: var(--brand-blue);
}

.card-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.card-kicker span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    font-weight: 900;
}

.card-kicker h3 {
    margin: 0;
    font-size: 1.1rem;
}

.comparison-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparison-list li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    padding-block: 14px;
    border-top: 1px solid rgba(30, 36, 48, 0.1);
}

.js.motion-ready .motion-sequence.is-visible .comparison-list li {
    animation: sequence-item 480ms var(--motion-ease) both;
}

.js.motion-ready .motion-sequence.is-visible .comparison-list li:nth-child(2) { animation-delay: 70ms; }
.js.motion-ready .motion-sequence.is-visible .comparison-list li:nth-child(3) { animation-delay: 140ms; }
.js.motion-ready .motion-sequence.is-visible .comparison-list li:nth-child(4) { animation-delay: 210ms; }

@keyframes sequence-item {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.comparison-list li > span {
    padding-top: 2px;
    color: var(--brand-coral-dark);
    font-size: 0.7rem;
    font-weight: 800;
}

.comparison-list h4 {
    margin-bottom: 5px;
    font-size: 0.98rem;
}

.comparison-list p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.product-section {
    color: var(--on-dark);
    background: var(--brand-blue-dark);
    overflow: hidden;
}

.product-section::before {
    position: absolute;
    top: -150px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(20, 72, 200, 0.26);
    content: "";
    filter: blur(1px);
}

.product-section::after {
    position: absolute;
    bottom: 12%;
    left: -180px;
    width: 520px;
    height: 520px;
    border: 90px solid rgba(20, 72, 200, 0.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.section-heading-light .eyebrow,
.product-section .eyebrow {
    color: var(--brand-coral);
}

.section-heading-light > p:last-child {
    color: var(--on-dark-soft);
}

.product-stage {
    position: relative;
    display: grid;
    gap: 26px;
    margin-bottom: 80px;
}

.product-window {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.2);
    transition: box-shadow 240ms ease, transform 240ms ease;
}

.product-window:hover {
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.26);
    transform: translateY(-4px);
}

.window-bar {
    display: flex;
    height: 34px;
    align-items: center;
    gap: 6px;
    padding-inline: 13px;
    color: var(--text-secondary);
    background: var(--surface-alt);
    font-size: 0.6rem;
}

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

.window-bar span {
    margin-left: auto;
    margin-right: auto;
}

.store-window-body {
    min-height: 270px;
    padding: 18px;
    background: var(--surface);
}

.mini-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-size: 0.58rem;
}

.mini-nav b {
    margin-right: auto;
    color: var(--brand-coral-dark);
    font-family: var(--font-serif);
    font-size: 0.8rem;
}

.mini-bag {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
}

.store-window-hero {
    display: grid;
    min-height: 128px;
    align-content: center;
    justify-items: start;
    padding: 22px;
    border-radius: 10px;
    color: var(--brand-blue-dark);
    background: linear-gradient(120deg, var(--brand-coral), #ff8a82), radial-gradient(circle at 80% 20%, #ffd1b8, var(--brand-coral));
}

.store-window-hero small {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.store-window-hero strong {
    margin-block: 5px 11px;
    font-family: var(--font-serif);
    font-size: 1.3rem;
}

.store-window-hero span {
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--brand-blue);
    background: var(--white);
    font-size: 0.55rem;
    font-weight: 800;
}

.mini-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 14px;
}

.mini-product-grid i {
    aspect-ratio: 1.7;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--brand-coral-soft), var(--brand-coral));
}

.mini-product-grid i:nth-child(2) { background: linear-gradient(135deg, var(--brand-blue-soft), var(--brand-blue)); }
.mini-product-grid i:nth-child(3) { background: linear-gradient(135deg, #ffd1b8, var(--brand-coral-dark)); }

.product-window footer {
    padding: 20px;
    border-top: 1px solid var(--border);
}

.product-window footer strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.92rem;
}

.product-window footer p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.backoffice-window-body {
    display: grid;
    grid-template-columns: 16% 1fr;
    min-height: 270px;
    background: var(--surface-alt);
}

.backoffice-window-body aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 20px;
    background: var(--brand-blue-dark);
}

.backoffice-window-body aside b {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 7px;
    color: var(--white);
    background: var(--brand-coral);
    font-family: var(--font-serif);
}

.backoffice-window-body aside i {
    width: 18px;
    height: 3px;
    border-radius: 4px;
    background: #7e91c5;
}

.backoffice-window-body > div {
    padding: 25px 22px;
}

.backoffice-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.backoffice-heading strong {
    font-size: 1rem;
}

.backoffice-heading span {
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--white);
    background: var(--brand-blue);
    font-size: 0.54rem;
    font-weight: 800;
}

.backoffice-filters {
    display: flex;
    gap: 7px;
    margin-block: 18px 12px;
}

.backoffice-filters i {
    width: 24%;
    height: 18px;
    border-radius: 5px;
    background: #d9e2f8;
}

.backoffice-rows {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--white);
}

.backoffice-rows p {
    height: 40px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(90deg, transparent 6%, #d9e2f8 6%, #d9e2f8 25%, transparent 25%, transparent 44%, #e8edf8 44%, #e8edf8 57%, transparent 57%, transparent 74%, #d9e2f8 74%, #d9e2f8 90%, transparent 90%);
}

.backoffice-rows p:last-child {
    border-bottom: 0;
}

.benefits-header h3 {
    max-width: 540px;
    margin-bottom: 34px;
    font-family: var(--font-sans);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 740;
    letter-spacing: -0.03em;
}

.benefits-grid {
    display: grid;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.benefit {
    padding-block: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.benefit {
    transition: background 200ms ease, border-color 200ms ease;
}

.benefit:hover,
.benefit:focus-within {
    background: rgba(20, 72, 200, 0.12);
    border-bottom-color: rgba(252, 97, 86, 0.46);
}

.benefit > small {
    color: var(--brand-coral);
    font-size: 0.7rem;
    font-weight: 800;
}

.benefit-icon {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    place-items: center;
    border: 1px solid rgba(252, 97, 86, 0.46);
    border-radius: 10px;
    color: var(--brand-coral);
    font-size: 1rem;
    font-weight: 800;
}

.benefit h3 {
    margin-block: 10px 9px;
    font-size: 1.13rem;
}

.benefit p {
    margin: 0;
    color: var(--on-dark-soft);
    font-size: 0.96rem;
    line-height: 1.55;
}

.flow-section {
    background: var(--bg-page);
}

.flow-list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: flow;
}

.flow-progress-shell {
    position: relative;
    max-width: 1120px;
    margin-inline: auto;
}

.flow-track {
    position: absolute;
    z-index: 2;
    top: 44px;
    bottom: 44px;
    left: 42px;
    width: 2px;
    overflow: visible;
    border-radius: 999px;
    background: linear-gradient(var(--brand-blue-soft), #d4def5);
    pointer-events: none;
}

.flow-progress {
    display: block;
    width: 100%;
    height: 0;
    border-radius: inherit;
    background: var(--brand-blue);
    transition: height 950ms var(--motion-ease);
}

.flow-indicator {
    position: absolute;
    top: 0;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 3px solid var(--surface);
    border-radius: 50%;
    background: var(--brand-coral);
    box-shadow: 0 0 0 3px rgba(252, 97, 86, 0.2);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: top 950ms var(--motion-ease), opacity 160ms ease;
}

.flow-progress-shell.is-flow-active .flow-progress {
    height: 100%;
}

.flow-progress-shell.is-flow-active .flow-indicator {
    top: 100%;
    opacity: 1;
}

.flow-list li {
    position: relative;
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 88px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    counter-increment: flow;
    box-shadow: 0 10px 28px rgba(11, 31, 82, 0.045);
    transition: border-color 240ms ease, box-shadow 240ms ease, transform 420ms var(--motion-ease), opacity 420ms ease, background 240ms ease;
}

.js.motion-ready .flow-progress-shell:not(.is-flow-active) .flow-list li {
    opacity: 0.62;
    transform: translateY(10px);
}

.js.motion-ready .flow-progress-shell.is-flow-active .flow-list li {
    opacity: 1;
    transform: translateY(0);
}

.js.motion-ready .flow-progress-shell.is-flow-active .flow-list li:nth-child(2) { transition-delay: 120ms; }
.js.motion-ready .flow-progress-shell.is-flow-active .flow-list li:nth-child(3) { transition-delay: 240ms; }
.js.motion-ready .flow-progress-shell.is-flow-active .flow-list li:nth-child(4) { transition-delay: 360ms; }

.flow-progress-shell.is-flow-active .flow-list li:last-child {
    color: var(--white);
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    box-shadow: 0 18px 42px rgba(20, 72, 200, 0.2);
}

.flow-progress-shell.is-flow-active .flow-list li:last-child .flow-icon {
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
}

.flow-progress-shell.is-flow-active .flow-list li:last-child .flow-step-number {
    color: #b9c8ef;
}

.flow-icon {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral-soft);
}

.flow-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.flow-step-number {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #9ca8c5;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.flow-list strong {
    padding-right: 28px;
    font-size: 1rem;
    line-height: 1.35;
}

.demo-section {
    color: var(--on-dark);
    background: var(--brand-blue-dark);
    overflow: hidden;
}

.demo-section::before {
    position: absolute;
    right: -220px;
    bottom: -260px;
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    content: "";
}

.demo-showcase {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
}

.demo-copy {
    max-width: 720px;
}

.demo-copy h2 {
    font-size: clamp(2.65rem, 6.5vw, 4.6rem);
}

.demo-copy .eyebrow {
    color: var(--brand-coral);
}

.demo-copy > p:not(.eyebrow):not(.demo-note) {
    max-width: 680px;
    margin-bottom: 28px;
    color: var(--on-dark-soft);
    font-size: 1.12rem;
}

.demo-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: -8px 0 28px;
    padding: 0;
    list-style: none;
    justify-content: flex-start;
}

.demo-proof-list li {
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    color: var(--on-dark);
    background: rgba(20, 72, 200, 0.16);
    font-size: 0.86rem;
    font-weight: 700;
}

.demo-proof-list li::before {
    margin-right: 7px;
    color: var(--brand-coral);
    content: "✓";
}

.demo-store-card {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    overflow: hidden;
    border: 8px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: 0 34px 78px rgba(4, 14, 42, 0.3);
    transform: none;
    transition: box-shadow 260ms ease, transform 260ms ease;
}

.demo-store-card:hover {
    box-shadow: 0 42px 90px rgba(4, 14, 42, 0.36);
    transform: translateY(-3px);
}

.demo-actions {
    display: grid;
    justify-items: start;
    gap: 14px;
    text-align: left;
}

.button.is-disabled {
    opacity: 0.58;
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.demo-actions .demo-note {
    margin-top: 0;
}

.demo-store-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
}

.demo-store-top > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-family: var(--font-serif);
}

.demo-store-top strong {
    flex: 1;
    font-family: var(--font-serif);
}

.demo-store-top i {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-size: 0.65rem;
    font-style: normal;
}

.demo-store-cover {
    display: grid;
    min-height: 140px;
    align-content: end;
    padding: 24px;
    color: var(--brand-blue-dark);
    background: linear-gradient(0deg, rgba(252, 97, 86, 0.92), rgba(252, 97, 86, 0.64)), radial-gradient(circle at 70% 30%, #ffd1b8, var(--brand-coral));
}

.demo-store-cover small {
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.demo-store-cover b {
    font-family: var(--font-serif);
    font-size: 1.6rem;
}

.demo-items {
    padding: 10px 18px 18px;
}

.demo-items > div {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 12px;
    padding-block: 12px;
    border-bottom: 1px solid var(--border);
}

.demo-items > div:last-child {
    border-bottom: 0;
}

.demo-food {
    width: 58px;
    height: 48px;
    border-radius: 9px;
    background: radial-gradient(circle at 30% 50%, var(--brand-coral-dark) 0 18%, transparent 19%), radial-gradient(circle at 60% 35%, #ff8a82 0 18%, transparent 19%), radial-gradient(circle at 68% 70%, #ffd1b8 0 16%, transparent 17%), var(--brand-coral-soft);
}

.demo-food-savory {
    background: radial-gradient(circle at 30% 50%, var(--brand-blue) 0 18%, transparent 19%), radial-gradient(circle at 60% 35%, var(--brand-coral) 0 18%, transparent 19%), radial-gradient(circle at 68% 70%, #ffd1b8 0 16%, transparent 17%), var(--brand-blue-soft);
}

.demo-items p {
    display: grid;
    margin: 0;
}

.demo-items p strong {
    font-size: 0.84rem;
}

.demo-items p small {
    color: var(--brand-coral-dark);
    font-weight: 800;
}

.demo-items i {
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--brand-blue);
    background: var(--brand-blue-soft);
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 800;
}

.how-section {
    background: var(--brand-blue-soft);
}

.steps-list {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
    list-style: none;
}

.steps-list li {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 18px;
    padding-block: 30px;
    border-bottom: 1px solid var(--border);
}

.steps-list li > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--brand-coral);
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
}

.how-layout {
    display: grid;
    gap: 32px;
    align-items: center;
}

.how-visual {
    position: relative;
}

.how-visual::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(20, 72, 200, 0.1), transparent 70%);
    content: "";
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.how-visual-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1600 / 1048;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
}

@media (min-width: 1024px) {
    .how-layout {
        grid-template-columns: 0.42fr 0.58fr;
        gap: 48px;
    }

    .steps-list {
        border-top: 0;
    }

    .steps-list li:first-child {
        padding-top: 0;
    }
}

.steps-list h3 {
    margin-bottom: 8px;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 740;
}

.steps-list p {
    max-width: 570px;
    margin: 0;
    color: var(--text-secondary);
}

.onboarding-support {
    display: grid;
    gap: 16px;
    margin-top: 40px;
}

.onboarding-support article {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.onboarding-support article:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.onboarding-support article:last-child {
    border-color: #ccd9f5;
    background: var(--brand-blue-soft);
}

.onboarding-support h3 {
    margin-bottom: 15px;
    color: var(--brand-blue-dark);
    font-size: 1rem;
}

.onboarding-support ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.onboarding-support li {
    position: relative;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.onboarding-support li::before {
    position: absolute;
    top: 0.08em;
    left: 0;
    color: var(--brand-coral);
    content: "✓";
    font-weight: 900;
}

.pricing-section {
    border-top: 1px solid var(--border);
    background: var(--bg-page);
}

#pricing-title span:last-child {
    color: var(--brand-coral);
}

.pricing-grid {
    display: grid;
    gap: 28px;
    margin-top: 36px;
}

.pricing-price-panel {
    padding: 28px 28px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

#pricing .pricing-price-panel {
    transition: transform 220ms ease, box-shadow 220ms ease;
}

#pricing .pricing-price-panel:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.pricing-primary-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
}

.pricing-primary-price strong {
    color: var(--brand-blue-dark);
    letter-spacing: -0.03em;
    font-size: clamp(2.6rem, 5.4vw, 3.6rem);
    font-weight: 900;
    line-height: 0.98;
}

.pricing-primary-price span {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 700;
}

.pricing-primary-support {
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 0.96rem;
}

.pricing-checklist {
    display: grid;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.pricing-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 700;
}

.pricing-checklist li:not(.is-included) {
    color: var(--text-secondary);
    font-weight: 600;
}

.pricing-checklist-mark {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border: 1.5px solid rgba(20, 72, 200, 0.35);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 900;
}

.is-included .pricing-checklist-mark {
    border-color: var(--brand-blue);
    color: #fff;
    background: var(--brand-blue);
}

.pricing-checklist li em {
    margin-left: auto;
    color: var(--brand-blue);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.pricing-checklist li:not(.is-included) em {
    color: var(--text-secondary);
    font-weight: 700;
}

.pricing-checklist-label {
    margin: 4px 0 12px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pricing-price-panel .button {
    margin-top: 14px;
}

.pricing-advantages {
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--brand-coral-soft);
}

.pricing-advantages-eyebrow {
    margin: 0;
    color: var(--brand-coral-dark);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pricing-advantage-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.pricing-advantage-row:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.pricing-advantage-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: var(--brand-blue-dark);
    background: var(--brand-blue-soft);
    font-size: 1rem;
    font-weight: 900;
}

.pricing-advantage-row strong {
    display: block;
    margin-bottom: 5px;
    color: var(--text-primary);
    font-size: 1.02rem;
    line-height: 1.3;
}

.pricing-advantage-row p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.pricing-clarification {
    margin: 14px 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (min-width: 1024px) {
    .pricing-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        gap: 40px;
    }
}

.about-section {
    border-block: 1px solid var(--border);
    background: var(--brand-coral-soft);
}

.about-inner {
    display: grid;
    gap: 40px;
    max-width: 1080px;
}

.about-inner h2 {
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.about-lead {
    max-width: 560px;
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.about-closing {
    max-width: 560px;
    margin: 0 0 20px;
    padding-left: 18px;
    border-left: 3px solid var(--brand-coral);
    color: var(--text-primary);
    font-size: 1.14rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
}

.about-eco-link {
    display: inline-block;
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.about-facts {
    display: grid;
    gap: 26px;
    align-content: start;
}

.about-fact {
    padding: 8px 12px 8px 18px;
    border-left: 3px solid var(--brand-blue);
    border-radius: 0 12px 12px 0;
    transition: background 200ms ease, border-color 200ms ease;
}

.about-fact:hover {
    border-left-color: var(--brand-coral);
    background: rgba(255, 255, 255, 0.45);
}

.about-fact h3 {
    margin: 0 0 8px;
    color: var(--brand-blue-dark);
    font-size: 1.05rem;
}

.about-fact p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.94rem;
    line-height: 1.55;
}

.about-fact-products {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.94rem;
    font-weight: 700;
}

.about-fact-products span {
    color: var(--text-primary);
}

.about-fact-products a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (min-width: 900px) {
    .about-inner {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 56px;
    }
}

.contact-section {
    position: relative;
    padding-block: 82px;
    color: var(--on-dark);
    background: radial-gradient(circle at 82% 24%, rgba(20, 72, 200, 0.42), transparent 34%), var(--brand-blue-dark);
    overflow: hidden;
}

.contact-section::before {
    position: absolute;
    top: -160px;
    right: -120px;
    width: 460px;
    height: 460px;
    border: 72px solid rgba(255, 255, 255, 0.035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.contact-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 46px;
}

.contact-copy {
    max-width: 650px;
}

.contact-copy h2 {
    max-width: 720px;
    margin-top: 0;
}

.contact-copy > p:not(.eyebrow):not(.contact-form-status) {
    max-width: 600px;
    margin-bottom: 26px;
    color: var(--on-dark-soft);
    font-size: 1.08rem;
}

.contact-form-status {
    display: inline-flex;
    max-width: 520px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    color: var(--on-dark);
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.86rem;
}

.contact-channels {
    display: grid;
    gap: 12px;
}

.contact-channel {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 30px rgba(11, 31, 82, 0.045);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-channel:hover {
    box-shadow: 0 16px 36px rgba(11, 31, 82, 0.1);
    transform: translateY(-2px);
}

.contact-channel-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    color: var(--brand-blue-dark);
    background: var(--brand-coral-soft);
    font-size: 1.1rem;
    font-weight: 850;
}

.contact-channel h3 {
    margin: 0 0 2px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.contact-channel p,
.contact-channel a {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    font-size: 0.94rem;
    font-weight: 700;
}

.contact-channel a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.faq-section {
    background: var(--surface);
}

.faq-grid {
    display: grid;
    gap: 10px 60px;
}

.faq-list {
    border-top: 1px solid var(--border);
}

.faq-item {
    border-bottom: 1px solid var(--border);
    transition: border-color 180ms ease, background 180ms ease;
}

.faq-item:has(button[aria-expanded="true"]) {
    border-bottom-color: var(--brand-blue);
    background: linear-gradient(90deg, rgba(20, 72, 200, 0.04), transparent 72%);
}

.faq-item h3 {
    margin: 0;
}

.faq-item button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-weight: 750;
    cursor: pointer;
}

.faq-item button:hover,
.faq-item button[aria-expanded="true"] {
    color: var(--brand-blue);
}

.faq-item button i {
    position: relative;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 50%;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.faq-item button[aria-expanded="true"] i {
    border-color: var(--brand-blue);
    background: var(--brand-blue-soft);
    transform: rotate(90deg);
}

.faq-item button i::before,
.faq-item button i::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--brand-blue);
    content: "";
    transform: translate(-50%, -50%);
    transition: transform 180ms ease;
}

.faq-item button i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item button[aria-expanded="true"] i::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
    overflow: hidden;
}

.js.motion-ready .faq-answer:not([hidden]) {
    animation: faq-open 260ms ease both;
}

@keyframes faq-open {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-answer p {
    max-width: 680px;
    margin: -5px 40px 22px 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.faq-answer[hidden] {
    display: none;
}

.site-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--on-dark-soft);
    background: var(--brand-blue-darkest);
}

.footer-grid {
    display: grid;
    gap: 42px;
    padding-block: 54px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.footer-brand-mark {
    width: 112px;
    height: 112px;
    object-fit: contain;
    transform: translate(-2px, -1px);
}

.footer-brand-icon {
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    flex: 0 0 auto;
}

.footer-brand-copy {
    min-width: 0;
}

.footer-brand strong {
    color: var(--white);
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.footer-brand-copy p {
    max-width: 320px;
    margin: 8px 0 0;
    color: var(--on-dark-soft);
    font-size: 0.88rem;
}

.footer-grid nav {
    display: grid;
    gap: 8px;
}

.footer-grid nav h2,
.footer-contact h2 {
    margin-bottom: 8px;
    color: #91a4d7;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.footer-grid nav a {
    width: fit-content;
    font-size: 0.88rem;
}

.footer-grid nav a:hover {
    color: var(--brand-coral);
}

.footer-contact {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 9px;
}

.footer-contact a {
    color: var(--white);
    font-size: 0.88rem;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-contact-row {
    display: grid;
    gap: 2px;
}

.footer-contact-row > span {
    color: #91a4d7;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.footer-contact-row small {
    color: var(--on-dark-soft);
    font-size: 0.8rem;
}

.footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-block: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: #91a4d7;
    font-size: 0.72rem;
}

.back-to-top {
    position: fixed;
    z-index: 90;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    color: var(--white);
    background: var(--brand-blue);
    box-shadow: 0 14px 36px rgba(11, 31, 82, 0.24);
    font-size: 1.15rem;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.94);
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.back-to-top:hover {
    background: var(--brand-blue-hover);
    transform: translateY(-2px);
}

.modal-layer {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 12px;
}

.modal-layer.is-open {
    display: flex;
}

.modal-scrim {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 82, 0.72);
    backdrop-filter: blur(5px);
}

.demo-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 650px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 34px 22px 24px;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}

.demo-modal h2 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 8vw, 2.8rem);
}

.modal-intro {
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.modal-close {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: -38px;
    margin-left: auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

.form-grid {
    display: grid;
    gap: 18px;
}

.demo-form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 7px;
}

.field label {
    font-size: 0.82rem;
    font-weight: 750;
}

.field label b {
    color: var(--error);
}

.field label small {
    color: var(--text-secondary);
    font-weight: 500;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text-primary);
    background: var(--surface);
}

.field input,
.field select {
    min-height: 48px;
    padding: 10px 12px;
}

.field textarea {
    min-height: 104px;
    padding: 12px;
    resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: #a7afbf;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--brand-blue);
    outline: 3px solid rgba(20, 72, 200, 0.15);
}

.field-error {
    margin: 0;
    color: var(--error);
    font-size: 0.75rem;
    font-weight: 650;
}

.form-alert {
    margin-bottom: 20px;
    padding: 12px 14px;
    border: 1px solid #efb2ad;
    border-radius: 9px;
    color: #a52f27;
    background: var(--error-soft);
    font-size: 0.82rem;
}

.form-alert[hidden],
.success-state[hidden] {
    display: none;
}

.demo-form[aria-busy="true"] input,
.demo-form[aria-busy="true"] select,
.demo-form[aria-busy="true"] textarea {
    opacity: 0.72;
}

.demo-form button:disabled {
    cursor: wait;
    opacity: 0.7;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

.success-state {
    display: grid;
    min-height: 330px;
    align-content: center;
    justify-items: start;
}

.success-state p {
    max-width: 480px;
    margin-bottom: 26px;
    color: var(--text-secondary);
}

.success-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 50%;
    color: var(--success);
    background: var(--success-soft);
    font-size: 1.4rem;
    font-weight: 900;
}

.js.motion-ready .reveal {
    opacity: 0;
    transform: translateY(var(--motion-distance));
    transition: opacity var(--motion-duration) ease, transform var(--motion-duration) var(--motion-ease);
}

.js.motion-ready .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.js.motion-ready .reveal-left {
    transform: translateY(var(--motion-distance));
}

.js.motion-ready .reveal-right {
    transform: translateY(var(--motion-distance));
}

.js.motion-ready .reveal-depth {
    transform: translateY(16px) scale(0.985);
}

.js.motion-ready .reveal-depth-up {
    transform: translateY(-16px) scale(0.985);
}

.js.motion-ready .reveal-delay-one {
    transition-delay: 90ms;
}

.js.motion-ready .reveal-left.is-visible,
.js.motion-ready .reveal-right.is-visible,
.js.motion-ready .reveal-depth.is-visible,
.js.motion-ready .reveal-depth-up.is-visible {
    transform: none;
}

@media (min-width: 560px) {
    .container {
        width: min(100% - 64px, var(--container));
    }

    .section {
        padding-block: 104px;
    }

    .js.motion-ready .reveal-left {
        transform: translateX(-22px);
    }

    .js.motion-ready .reveal-right {
        transform: translateX(22px);
    }

    .proof-inner {
        gap: 42px;
    }

    .audience-inner {
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 24px;
    }

    .audience-note {
        grid-column: 1 / -1;
    }

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

    .demo-modal {
        padding: 48px 44px 38px;
        border-radius: 26px;
    }

    .modal-layer {
        align-items: center;
        padding: 24px;
    }

    .flow-list {
        grid-template-columns: 1fr 1fr;
    }

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

    .benefit:nth-child(odd) {
        padding-right: 24px;
        border-right: 1px solid rgba(255, 255, 255, 0.14);
    }

    .benefit:nth-child(even) {
        padding-left: 24px;
    }

    .footer-grid { grid-template-columns: 1.5fr 1fr; }
}

@media (min-width: 768px) {
    :root {
        --header-height: 78px;
    }

    .section {
        padding-block: 122px;
    }

    .hero {
        padding-top: 86px;
    }

    .comparison-grid,
    .product-stage {
        grid-template-columns: 1fr 1fr;
    }

    .proof-inner {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 58px;
    }

    .contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
        align-items: center;
        gap: 70px;
    }

    .comparison-card {
        padding: 36px;
    }

    .product-stage {
        gap: 34px;
    }

    .flow-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .flow-track {
        top: 51px;
        right: 12.5%;
        bottom: auto;
        left: 12.5%;
        width: auto;
        height: 2px;
    }

    .flow-progress {
        width: 0;
        height: 100%;
        transition-property: width;
    }

    .flow-indicator {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%);
        transition-property: left, opacity;
    }

    .flow-progress-shell.is-flow-active .flow-progress {
        width: 100%;
        height: 100%;
    }

    .flow-progress-shell.is-flow-active .flow-indicator {
        top: 50%;
        left: 100%;
    }

    .flow-list li {
        grid-template-columns: 1fr;
        align-content: start;
        min-height: 176px;
        padding: 26px 22px;
        border-radius: var(--radius-md);
        border-right-width: 1px;
    }

    .flow-list li:first-child {
        border-radius: var(--radius-md);
    }

    .flow-list li:last-child {
        border-right-width: 1px;
        border-radius: var(--radius-md);
    }

    .flow-list li:not(:last-child)::after {
        content: none;
    }

    .pricing-grid {
        grid-template-columns: 0.94fr 1.06fr;
        gap: 78px;
    }

    .steps-list li {
        grid-template-columns: 100px 1fr;
        padding-block: 40px;
    }

    .steps-list li > span {
        font-size: 1.8rem;
    }

    .onboarding-support {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid {
        grid-template-columns: 1.35fr 0.8fr 1fr;
    }
}

@media (min-width: 1024px) {
    :root {
        --header-height: 82px;
    }

    .eyebrow {
        font-size: 1rem;
    }

    .brand-wordmark {
        height: 46px;
    }

    .menu-toggle {
        display: none;
    }

    .primary-navigation {
        position: static;
        display: flex;
        max-height: none;
        align-items: center;
        gap: 20px;
        overflow: visible;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 22px;
    }

    .nav-links a {
        padding-block: 10px;
        border: 0;
        color: var(--text-secondary);
        font-size: 0.97rem;
        font-weight: 680;
        transition: color 160ms ease;
    }

    .nav-links a:hover {
        color: var(--brand-blue);
    }

    .nav-actions {
        flex-wrap: nowrap;
        gap: 12px;
        padding: 0;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(500px, 0.98fr);
        align-items: center;
        gap: 32px;
    }

    .demo-showcase {
        grid-template-columns: minmax(0, 0.82fr) minmax(500px, 1.18fr);
        grid-template-areas: "copy preview" "actions preview";
        align-items: center;
        column-gap: 64px;
        row-gap: 26px;
    }

    .demo-copy {
        grid-area: copy;
    }

    .demo-store-card {
        grid-area: preview;
    }

    .demo-actions {
        grid-area: actions;
        align-self: start;
    }

    .back-to-top {
        right: 28px;
        bottom: 28px;
        width: 52px;
        height: 52px;
    }

    .js.motion-ready .hero-visual.is-visible .phone {
        animation: phone-float 6s ease-in-out 1s infinite;
    }

    .js.motion-ready .hero-visual.is-visible .laptop {
        animation: laptop-drift 9s ease-in-out 1.2s infinite;
    }

    .hero-visual {
        min-height: 575px;
    }

    .laptop {
        right: -10%;
        bottom: 15%;
        width: 114%;
    }

    .phone {
        bottom: 4%;
        left: 0;
        width: 41%;
    }

    .comparison-grid {
        gap: 24px;
    }

    .product-stage {
        margin-bottom: 120px;
    }

    .store-window-body,
    .backoffice-window-body {
        min-height: 360px;
    }

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

    .benefit {
        min-height: 210px;
        padding: 32px 30px;
        border-right: 1px solid rgba(255, 255, 255, 0.14);
    }

    .benefit:nth-child(3n) {
        border-right: 0;
    }

    .benefit:nth-child(odd),
    .benefit:nth-child(even) {
        padding-inline: 30px;
    }

    .benefit h3 {
        margin-top: 18px;
    }

    .faq-grid {
        grid-template-columns: 0.8fr 1.35fr;
        align-items: start;
    }

    .faq-grid .section-heading {
        position: sticky;
        top: calc(var(--header-height) + 40px);
        margin-bottom: 0;
    }

}

@media (min-width: 1280px) {
    .primary-navigation,
    .nav-links {
        gap: 30px;
    }

    .hero-grid {
        gap: 55px;
    }

    .hero-visual {
        min-height: 610px;
    }

    .section-heading {
        margin-bottom: 62px;
    }

    .comparison-card {
        padding: 34px;
    }

    .product-window footer {
        padding: 24px;
    }
}

@media (min-width: 1500px) {
    :root {
        --container: 1240px;
    }

    .hero {
        min-height: 860px;
    }
}

@media (max-width: 390px) {
    .brand-wordmark {
        height: 34px;
    }

    .container {
        width: min(100% - 28px, var(--container));
    }

    .section {
        padding-block: 72px;
    }

    h1 {
        font-size: clamp(2.35rem, 12.4vw, 3rem);
    }

    h2 {
        font-size: clamp(2rem, 10vw, 2.6rem);
    }

    .button-row .button {
        width: 100%;
    }

    .hero-visual {
        min-height: 370px;
    }

    .laptop {
        right: 0;
        width: 96%;
    }

    .phone {
        left: 0;
        width: 43%;
    }

    .proof-inner {
        gap: 28px;
    }

    .comparison-card,
    .pricing-card {
        padding-inline: 18px;
    }

    .pricing-inclusions {
        grid-template-columns: 1fr;
    }

    .demo-store-card {
        border-width: 5px;
    }

    .demo-items {
        padding-inline: 12px;
    }

    .demo-items > div {
        grid-template-columns: 50px 1fr;
    }

    .demo-items i {
        display: none;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-brand-mark {
        width: 96px;
        height: 96px;
    }

    .footer-brand-icon {
        width: 96px;
        height: 96px;
    }

    .modal-actions .button {
        width: 100%;
    }
}

/* Targeted art-direction polish */
.eyebrow {
    font-size: 0.95rem;
    font-weight: 850;
    letter-spacing: 0.085em;
    line-height: 1.55;
}

.audience-strip {
    border-block: 1px solid var(--border);
    background: var(--brand-coral-soft);
}

.audience-inner {
    padding-block: 44px;
}

.audience-inner h2 {
    font-size: clamp(1.75rem, 3vw, 2.45rem);
    font-weight: 800;
}

.audience-list li {
    padding: 9px 14px;
    border: 1px solid rgba(20, 72, 200, 0.13);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.95rem;
    font-weight: 760;
}

.audience-note {
    color: var(--brand-blue-dark);
    font-size: 1.04rem;
    font-weight: 760;
}

.channel-convergence {
    position: relative;
    display: grid;
    gap: 32px;
    padding: clamp(24px, 4vw, 48px);
    border: 1px solid rgba(20, 72, 200, 0.14);
    border-radius: var(--radius-lg);
    background: linear-gradient(110deg, #fff7f4 0 48%, #f2f6ff 48% 100%);
    box-shadow: 0 26px 70px rgba(11, 31, 82, 0.08);
}

.channel-sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 10px;
}

.channel-sources > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid rgba(252, 97, 86, 0.2);
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.78rem;
}

.channel-sources i {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 8px;
    color: var(--brand-blue-dark);
    background: var(--brand-coral-soft);
    font-style: normal;
    font-weight: 850;
}

.channel-sources b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-lines {
    position: relative;
    display: grid;
    min-height: 40px;
    place-items: center;
}

.channel-lines::before,
.channel-lines::after,
.channel-lines span {
    position: absolute;
    background: var(--brand-blue);
    content: "";
}

.channel-lines::before {
    width: 2px;
    height: 100%;
}

.channel-lines::after {
    bottom: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(252, 97, 86, 0.18);
    background: var(--brand-coral);
}

.channel-lines span {
    top: 0;
    width: 54%;
    height: 1px;
    opacity: 0.32;
}

.channel-lines span:nth-child(2) { width: 34%; }
.channel-lines span:nth-child(3) { width: 16%; }

.channel-lines .channel-link-chip {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: max-content;
    height: auto;
    max-width: 220px;
    padding: 7px 13px;
    border: 1px solid rgba(20, 72, 200, 0.25);
    border-radius: 999px;
    color: var(--brand-blue-dark);
    background: var(--white);
    opacity: 1;
    box-shadow: 0 8px 20px rgba(11, 31, 82, 0.14);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.structured-order {
    padding: clamp(22px, 4vw, 34px);
    border-radius: 20px;
    color: var(--on-dark);
    background: var(--brand-blue-dark);
    box-shadow: 0 24px 58px rgba(11, 31, 82, 0.2);
}

.structured-order-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 13px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.structured-order-head > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-weight: 900;
}

.structured-order-head div {
    display: grid;
}

.structured-order-head small {
    color: #9eb1df;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.structured-order-head strong {
    font-size: 1rem;
}

.structured-order-head > i {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--brand-blue-dark);
    background: var(--brand-coral);
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 850;
}

.structured-order dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 22px 0 16px;
}

.structured-order dl div {
    display: grid;
    gap: 3px;
}

.structured-order dt {
    color: #9eb1df;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.structured-order dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 750;
}

.structured-order p {
    margin: 0;
    color: var(--on-dark-soft);
    font-size: 0.8rem;
}

.channel-clarification {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 620px;
    margin: 28px 0 0;
    color: var(--text-primary);
    font-size: 0.98rem;
    line-height: 1.5;
    font-weight: 700;
}

.channel-clarification > span:first-child {
    color: var(--brand-coral);
    font-weight: 900;
}

.problem-outcomes {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 28px 0 0;
    padding: 0;
    color: var(--text-primary);
    list-style: none;
}

.problem-outcomes li {
    font-size: 0.9rem;
    font-weight: 700;
}

.problem-outcomes li::before {
    margin-right: 8px;
    color: var(--brand-coral);
    content: "•";
}

.benefits-header h3 {
    max-width: 680px;
}

.benefits-grid {
    gap: 0;
}

.benefit,
.benefit:nth-child(n) {
    padding: 30px 24px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
}

.benefit-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-color: rgba(252, 97, 86, 0.5);
    border-radius: 14px;
    background: rgba(252, 97, 86, 0.06);
}

.benefit-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.65;
}

.benefit h3 {
    margin-block: 9px 10px;
    font-size: 1.18rem;
}

.flow-progress-shell {
    padding-top: 8px;
}

.flow-list li {
    border-color: rgba(20, 72, 200, 0.13);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: none;
}

.flow-list li:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 16px 34px rgba(11, 31, 82, 0.09);
}

.flow-icon {
    border: 2px solid var(--brand-blue);
    box-shadow: 0 9px 22px rgba(20, 72, 200, 0.12);
}

.flow-track {
    background: rgba(20, 72, 200, 0.16);
}

.demo-section {
    background: linear-gradient(145deg, var(--brand-blue-dark), #102c68 70%, #16377a);
}

.demo-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "preview" "proof" "actions";
    justify-items: center;
    gap: 30px;
}

.demo-copy {
    grid-area: copy;
    max-width: 830px;
    text-align: center;
}

.demo-copy h2 {
    font-size: clamp(2.4rem, 5.5vw, 4.3rem);
}

.demo-copy > p:not(.eyebrow) {
    max-width: 690px;
    margin-inline: auto;
    font-size: 1.08rem;
}

.demo-gallery {
    grid-area: preview;
    width: 100%;
}

.demo-store-card {
    max-width: 980px;
    border: 10px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    box-shadow: 0 38px 90px rgba(2, 10, 32, 0.38);
    transform: rotate(0deg);
}

.demo-store-card:hover {
    box-shadow: 0 42px 96px rgba(2, 10, 32, 0.42);
    transform: translateY(-2px) rotate(0deg);
}

.demo-browser-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    height: 42px;
    align-items: center;
    padding-inline: 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
    background: #f5f6f9;
}

.demo-browser-bar span {
    display: flex;
    gap: 6px;
}

.demo-browser-bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd1dc;
}

.demo-browser-bar i:first-child { background: var(--brand-coral); }
.demo-browser-bar b { font-size: 0.68rem; font-weight: 700; }

.demo-store-cover {
    min-height: 210px;
    padding: 34px;
}

.demo-store-cover b {
    font-size: clamp(1.8rem, 4vw, 2.7rem);
}

.demo-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px 26px 28px;
}

.demo-items > div {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
}

.demo-items > div:last-child {
    border-bottom: 1px solid var(--border);
}

.demo-proof-list {
    grid-area: proof;
    justify-content: center;
    margin: 0;
}

.demo-proof-list li {
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.demo-actions {
    grid-area: actions;
    justify-items: center;
    text-align: center;
}

.about-inner h2 {
    font-size: clamp(2.65rem, 5vw, 4.25rem);
}

.footer-brand-mark {
    object-position: 47% 46%;
    transform: translate(-4px, -2px) scale(1.015);
}

.footer-brand-icon {
    align-self: center;
}

.back-to-top:hover,
.back-to-top:focus-visible {
    border-color: var(--brand-coral);
    background: var(--brand-blue-hover);
}

@media (min-width: 768px) {
    .channel-convergence {
        grid-template-columns: minmax(0, 0.9fr) 90px minmax(0, 1.1fr);
        align-items: center;
    }

    .channel-lines {
        min-height: 220px;
        transform: rotate(-90deg);
    }

    .channel-lines .channel-link-chip {
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .benefit,
    .benefit:nth-child(n) {
        border-right: 1px solid rgba(255, 255, 255, 0.14);
    }

    .benefit:nth-child(2n) {
        border-right: 0;
    }
}

@media (min-width: 1024px) {
    :root { --header-height: 84px; }

    .brand-wordmark { height: 49px; }

    .primary-navigation { gap: 14px; }

    .nav-links { gap: 16px; }

    .nav-links a { font-size: 1rem; }

    .nav-actions { gap: 10px; }

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

    .about-cards { grid-template-columns: repeat(3, 1fr); }

    .benefit:nth-child(n) { border-right: 1px solid rgba(255, 255, 255, 0.14); }
    .benefit:nth-child(3n) { border-right: 0; }

    .demo-showcase {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "copy" "preview" "proof" "actions";
        column-gap: 0;
        row-gap: 30px;
    }

    .demo-copy { grid-area: copy; }
    .demo-gallery { grid-area: preview; }
    .demo-proof-list { grid-area: proof; }
    .demo-actions { grid-area: actions; align-self: auto; }
}

@media (min-width: 1280px) {
    .primary-navigation { gap: 24px; }
    .nav-links { gap: 24px; }
    .nav-links a { font-size: 1.04rem; }
}

@media (max-width: 559px) {
    .channel-sources { grid-template-columns: 1fr; }
    .structured-order dl { grid-template-columns: 1fr; }
    .demo-items { grid-template-columns: 1fr; }
    .demo-store-cover { min-height: 160px; padding: 24px; }
    .back-to-top { right: 14px; bottom: 14px; width: 44px; height: 44px; }
}

/* Focused product-owner refinement */
.merchant-login,
button.merchant-login {
    border-color: var(--brand-blue-dark);
    color: var(--white);
    background: var(--brand-blue-dark);
    box-shadow: 0 8px 20px rgba(11, 31, 82, 0.16);
}

button.merchant-login {
    font-family: inherit;
}

.merchant-login:hover,
.merchant-login:focus-visible {
    border-color: var(--brand-blue);
    color: var(--white);
    background: var(--brand-blue);
    box-shadow: 0 10px 24px rgba(20, 72, 200, 0.22);
}

.proof-strip {
    padding-block: clamp(74px, 8vw, 116px);
}

.proof-inner {
    gap: clamp(44px, 6vw, 86px);
}

.proof-preview {
    min-height: 390px;
    border: 10px solid var(--white);
    border-radius: 26px;
    background: #e9edf5;
    box-shadow: 0 28px 72px rgba(11, 31, 82, 0.14);
}

.proof-kitchen-visual {
    position: relative;
    min-height: 325px;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(11, 31, 82, 0.1), transparent 45%),
        linear-gradient(0deg, #c9d0da 0 27%, #e8ecf1 27% 72%, #dce2e9 72%);
}

.proof-kitchen-visual::before {
    position: absolute;
    inset: 30px 34px auto auto;
    width: 42%;
    height: 38%;
    border: 9px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    background: linear-gradient(135deg, #cbd4df, #f4f6f8);
    box-shadow: inset 0 0 0 1px rgba(11, 31, 82, 0.08);
    content: "";
}

.proof-brand-badge {
    position: absolute;
    z-index: 3;
    top: 24px;
    left: 24px;
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 7px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    background: var(--white);
    box-shadow: 0 14px 32px rgba(11, 31, 82, 0.16);
}

.proof-brand-badge img {
    width: 100%;
    height: 100%;
    border-radius: 13px;
    object-fit: contain;
}

.prep-surface {
    position: absolute;
    right: 7%;
    bottom: 28px;
    left: 7%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 42px rgba(11, 31, 82, 0.14);
}

.prep-surface span {
    min-height: 76px;
    border: 1px solid rgba(11, 31, 82, 0.08);
    border-radius: 12px;
    background:
        radial-gradient(circle at 30% 48%, #c54b3f 0 11%, transparent 12%),
        radial-gradient(circle at 56% 34%, #e8a45e 0 13%, transparent 14%),
        radial-gradient(circle at 66% 68%, #6d8f55 0 12%, transparent 13%),
        #f5eee6;
}

.prep-surface span:nth-child(2) {
    background:
        radial-gradient(circle at 34% 45%, #d96a5f 0 12%, transparent 13%),
        radial-gradient(circle at 63% 52%, #d3a56a 0 16%, transparent 17%),
        #f2e9df;
}

.prep-surface span:nth-child(3) {
    background:
        radial-gradient(circle at 35% 54%, #6d8f55 0 14%, transparent 15%),
        radial-gradient(circle at 64% 42%, #c54b3f 0 12%, transparent 13%),
        #f5eee6;
}

.prep-ticket {
    position: absolute;
    z-index: 2;
    top: 54px;
    right: 13%;
    display: grid;
    width: 150px;
    gap: 8px;
    padding: 16px;
    border-radius: 12px;
    color: var(--brand-blue-dark);
    background: var(--white);
    box-shadow: 0 16px 32px rgba(11, 31, 82, 0.13);
    transform: rotate(2deg);
}

.prep-ticket small { color: var(--text-secondary); font-size: 0.62rem; font-weight: 750; }
.prep-ticket b { font-size: 1.05rem; }
.prep-ticket i { height: 5px; border-radius: 5px; background: #dce4f5; }
.prep-ticket i:last-child { width: 62%; }

.proof-product-state {
    display: flex;
    min-height: 66px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 20px;
    color: var(--brand-blue-dark);
    background: var(--white);
}

.proof-product-state span { display: flex; align-items: center; gap: 9px; }
.proof-product-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(47,133,90,.13); }
.proof-product-state strong { font-size: 0.78rem; }
.proof-product-state > b { font-size: 0.8rem; }

.structured-order-brand {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border-radius: 13px;
}

.structured-order-brand img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-brand-mark {
    width: 31px;
    height: 31px;
    border-radius: 8px;
    object-fit: contain;
}

.flow-track-node {
    display: none;
}

.demo-brand-mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    object-fit: contain;
}

.demo-store-cover {
    position: relative;
    color: var(--on-dark);
    background:
        linear-gradient(110deg, rgba(11, 31, 82, 0.96), rgba(20, 72, 200, 0.86)),
        radial-gradient(circle at 80% 25%, rgba(252, 97, 86, 0.3), transparent 30%);
}

.demo-store-cover::after {
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 72px;
    height: 7px;
    border-radius: 999px;
    background: var(--brand-coral);
    content: "";
}

.demo-store-top > span {
    display: none;
}

.pricing-commission-highlight {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 13px;
    margin: 4px 0 12px;
    padding: 14px 18px 14px 12px;
    border: 1px solid rgba(252, 97, 86, 0.5);
    border-radius: 18px;
    color: var(--brand-blue-dark);
    background:
        linear-gradient(95deg, rgba(252, 97, 86, 0.23), rgba(252, 97, 86, 0.07)),
        var(--surface);
    box-shadow: 0 18px 36px rgba(11, 31, 82, 0.14);
}

.pricing-commission-highlight strong {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 15px;
    color: var(--white);
    background: var(--brand-blue-dark);
    font-size: 1.72rem;
    font-weight: 900;
    line-height: 1;
}

.pricing-commission-highlight span {
    max-width: 280px;
    font-size: 1.04rem;
    font-weight: 880;
    line-height: 1.18;
}

.pricing-commission-micro {
    max-width: 520px;
    margin: 0 0 20px;
    color: var(--brand-blue-dark);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.merchant-modal-layer {
    position: fixed;
    z-index: 210;
    inset: 0;
    display: none;
    place-items: center;
    padding: 20px;
}

.merchant-modal-layer.is-open { display: grid; }
.merchant-modal-scrim { position: absolute; inset: 0; background: rgba(6, 16, 45, 0.72); backdrop-filter: blur(3px); }

.merchant-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    padding: 42px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 34px 90px rgba(4, 14, 42, 0.3);
}

.merchant-modal h2 { margin-bottom: 16px; font-size: clamp(2rem, 5vw, 3rem); }
.merchant-modal > p:not(.eyebrow) { margin-bottom: 26px; color: var(--text-secondary); }
.merchant-modal-mark { width: 58px; height: 58px; margin-bottom: 22px; border-radius: 15px; object-fit: contain; }
.merchant-login-form { gap: 16px; }
.merchant-login-note { margin: 0; color: var(--text-secondary); font-size: 0.8rem; }
.merchant-login-form .modal-actions { margin-top: 0; }
.form-alert.is-success {
    border-color: #b2dcc0;
    color: #245c3a;
    background: #eaf7ee;
}

@media (min-width: 768px) {
    .flow-progress-shell {
        padding-top: 78px;
    }

    .flow-track {
        top: 24px;
        right: 12.5%;
        left: 12.5%;
        height: 2px;
    }

    .flow-track-node {
        position: absolute;
        top: 50%;
        display: block;
        width: 14px;
        height: 14px;
        border: 3px solid var(--surface);
        border-radius: 50%;
        background: #b9c7e8;
        box-shadow: 0 0 0 2px rgba(20, 72, 200, 0.2);
        transform: translate(-50%, -50%);
        transition: background 240ms ease, box-shadow 240ms ease;
    }

    .flow-track-node-one { left: 0; }
    .flow-track-node-two { left: 33.333%; }
    .flow-track-node-three { left: 66.666%; }
    .flow-track-node-four { left: 100%; }

    .flow-progress-shell.is-flow-active .flow-track-node { background: var(--brand-blue); }
    .flow-progress-shell.is-flow-active .flow-track-node-four { background: var(--brand-coral); box-shadow: 0 0 0 6px rgba(252, 97, 86, 0.16); }

    .flow-list li {
        min-height: 164px;
        padding-top: 30px;
    }
}

@media (max-width: 559px) {
    .proof-preview { min-height: 330px; }
    .proof-kitchen-visual { min-height: 270px; }
    .proof-brand-badge { width: 58px; height: 58px; top: 18px; left: 18px; border-width: 5px; }
    .prep-ticket { top: 38px; right: 8%; width: 128px; }
    .prep-surface { right: 5%; left: 5%; gap: 7px; padding: 10px; }
    .prep-surface span { min-height: 62px; }
    .proof-product-state { align-items: flex-start; flex-direction: column; gap: 4px; }
    .about-closing { font-size: 0.98rem; }
    .merchant-modal { padding: 34px 24px 28px; }
}

/* Brand, audience and payment-copy cleanup */
.merchant-login,
button.merchant-login {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    box-shadow: 0 8px 20px rgba(20, 72, 200, 0.2);
}

.merchant-login:hover,
.merchant-login:focus-visible {
    border-color: var(--brand-blue-hover);
    background: var(--brand-blue-hover);
    box-shadow: 0 10px 24px rgba(20, 72, 200, 0.28);
}

.audience-strip {
    padding-block: clamp(54px, 7vw, 82px);
    background:
        radial-gradient(circle at 8% 20%, rgba(252, 97, 86, 0.13), transparent 25%),
        var(--brand-coral-soft);
}

.audience-inner {
    gap: 24px;
    padding-block: 0;
}

.audience-heading {
    display: grid;
    gap: 6px;
}

.audience-heading .eyebrow {
    margin: 0;
    font-size: 0.78rem;
}

.audience-inner .audience-heading h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -0.04em;
    line-height: 1.04;
    text-transform: none;
}

.audience-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.audience-list li:last-child {
    grid-column: 1 / -1;
}

.audience-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(20, 72, 200, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(11, 31, 82, 0.06);
    font-size: 0.9rem;
    line-height: 1.3;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.audience-list li:hover {
    box-shadow: 0 18px 36px rgba(11, 31, 82, 0.12);
    transform: translateY(-3px);
}

.audience-list li::before {
    display: none;
}

.audience-list svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: var(--brand-coral);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.audience-list span {
    color: var(--brand-blue-dark);
    font-weight: 800;
}

.audience-note {
    display: flex;
    max-width: 850px;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border-left: 4px solid var(--brand-coral);
    border-radius: 0 12px 12px 0;
    color: var(--brand-blue-dark);
    background: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.5;
}

.audience-note > span {
    color: var(--brand-coral-dark);
    font-weight: 900;
}

.audience-content {
    display: grid;
    gap: 24px;
}

.audience-visual {
    position: relative;
    min-width: 0;
}

.audience-visual img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    object-fit: cover;
    object-position: right center;
}

.audience-visual-badge {
    display: flex;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--brand-blue-dark);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm);
    font-size: 0.82rem;
    font-weight: 800;
}

.audience-visual-badge > span:first-child {
    color: var(--brand-coral);
    font-size: 0.6rem;
}

@media (min-width: 768px) {
    .audience-inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 32px;
    }
}

@media (min-width: 1024px) {
    .audience-inner {
        grid-template-columns: 0.44fr 0.56fr;
        gap: 44px;
    }
}

.viva-payment-note {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid rgba(20, 72, 200, 0.12);
    border-radius: 14px;
    color: var(--text-secondary);
    background: var(--brand-blue-soft);
    font-size: 0.76rem;
    line-height: 1.55;
}

.viva-payment-note p {
    margin: 0;
}

.viva-payment-note small {
    display: block;
    margin-top: 8px;
    color: var(--brand-blue-dark);
    font-size: 0.7rem;
    font-weight: 800;
}

@media (max-width: 400px) {
    .audience-list { grid-template-columns: 1fr; }
    .audience-list li:last-child { grid-column: auto; }
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .js.motion-ready .reveal {
        opacity: 1;
        transform: none;
    }

    .js.motion-ready .hero-enter,
    .js.motion-ready .hero-product-enter,
    .js.motion-ready .hero-visual.is-visible .phone,
    .js.motion-ready .hero-visual.is-visible .laptop,
    .js.motion-ready .motion-sequence.is-visible .comparison-list li,
    .js.motion-ready .faq-answer:not([hidden]) {
        opacity: 1;
        animation: none;
        transform: none;
    }

    .js.motion-ready .flow-progress-shell:not(.is-flow-active) .flow-list li {
        opacity: 1;
        transform: none;
    }

    .flow-progress {
        width: 100%;
        height: 100%;
    }

    .flow-indicator {
        display: none;
    }

    .channel-sources,
    .structured-order,
    .channel-lines {
        opacity: 1;
        transform: none;
    }
}