:root {
    --marketing-gold: #8a681d;
    --marketing-gold-dark: #5f470f;
    --marketing-gold-deep: #21180b;
    --marketing-ink: #111318;
    --marketing-charcoal: #171717;
    --marketing-paper: #fbfaf6;
    --marketing-soft: #f3eee2;
    --marketing-line: rgba(138, 104, 29, 0.24);
    --marketing-muted: #5d6675;
    --marketing-teal: #0f766e;
    --marketing-rose: #8f3d4d;
    --marketing-shadow: 0 24px 70px rgba(25, 20, 12, 0.18);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.marketing-site {
    min-height: 100%;
    margin: 0;
    overflow-x: hidden;
    background: var(--marketing-paper);
    color: var(--marketing-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

.brand-word {
    white-space: nowrap;
    word-break: keep-all;
}

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

.marketing-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(17, 19, 24, 0.08);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 12px 30px rgba(17, 19, 24, 0.08);
    backdrop-filter: blur(16px);
}

.marketing-nav {
    width: min(100%, 76rem);
    margin: 0 auto;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.marketing-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--marketing-ink);
    text-decoration: none;
}

.marketing-logo img {
    width: 2.3rem;
    height: 2.7rem;
    object-fit: contain;
}

.marketing-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.marketing-nav-links a,
.marketing-pill-link {
    display: inline-flex;
    min-height: 2.6rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0 1rem;
    color: #242936;
    font-family: Inter, "SF Pro Text", "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    font-weight: 540;
    letter-spacing: 0;
    text-decoration: none;
}

.marketing-pill-link {
    border: 1px solid var(--marketing-line);
    background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-gold-deep));
    color: #fff !important;
    font-weight: 650;
    box-shadow: 0 12px 26px rgba(95, 71, 15, 0.22);
}

.marketing-nav-links a.marketing-pill-link,
.marketing-nav-links a.marketing-pill-link:visited,
.marketing-nav-links a.marketing-pill-link:hover,
.marketing-nav-links a.marketing-pill-link:focus-visible {
    color: #fff !important;
}

.marketing-menu-toggle {
    display: none;
}

.marketing-main {
    overflow: hidden;
}

.marketing-section {
    position: relative;
    padding: 5rem 1rem;
}

.marketing-section-inner {
    width: min(100%, 76rem);
    margin: 0 auto;
}

.marketing-hero {
    position: relative;
    min-height: 42rem;
    display: grid;
    align-items: stretch;
    background: #0e0f12;
    color: #fff;
}

.marketing-hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.marketing-hero-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0.76;
    transform: scale(1.02);
}

.marketing-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(11, 11, 12, 0.92), rgba(11, 11, 12, 0.58) 46%, rgba(11, 11, 12, 0.15)),
        linear-gradient(180deg, rgba(11, 11, 12, 0.25), rgba(11, 11, 12, 0.82));
}

.marketing-hero-content {
    position: relative;
    z-index: 1;
    width: min(100%, 76rem);
    margin: 0 auto;
    padding: 6.4rem 1rem 4.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 25rem);
    gap: 2rem;
    align-items: end;
}

.marketing-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.48rem 0.8rem;
    background: rgba(255, 255, 255, 0.1);
    color: #f5ebd1;
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.marketing-kicker::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: #d6b768;
    box-shadow: 0 0 0 0.38rem rgba(214, 183, 104, 0.16);
}

.marketing-hero h1,
.marketing-page-hero h1 {
    max-width: 12ch;
    margin: 1.25rem 0 0;
    color: #fff;
    font-size: 5.6rem;
    line-height: 0.92;
    letter-spacing: 0;
    text-shadow: 0 10px 42px rgba(0, 0, 0, 0.58);
}

.marketing-page-hero h1 {
    max-width: min(80%, 58rem);
}

.marketing-hero p,
.marketing-page-hero p {
    max-width: 39rem;
    margin: 1.25rem 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.22rem;
    line-height: 1.68;
}

.marketing-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
}

.marketing-button {
    display: inline-flex;
    min-height: 3.1rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0 1.25rem;
    font-size: 1rem;
    font-weight: 880;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.marketing-button:hover,
.marketing-button:focus-visible {
    transform: translateY(-1px);
}

.marketing-button-primary {
    background: linear-gradient(135deg, #9a7727, #21180b);
    color: #fff;
    box-shadow: 0 18px 36px rgba(95, 71, 15, 0.35);
}

.marketing-button-secondary {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
}

.marketing-button-light {
    border-color: var(--marketing-line);
    background: #fff;
    color: var(--marketing-gold-deep);
}

.marketing-calm-hub-hero {
    min-height: calc(100svh - 4.6rem);
    overflow: hidden;
    background: #090807;
}

.marketing-calm-hub-media .marketing-calm-hub-photo {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity 420ms ease;
}

html:not([data-hero-person]) .marketing-calm-hub-photo.is-redhead,
html[data-hero-person="redhead"] .marketing-calm-hub-photo.is-redhead,
html[data-hero-person="indian"] .marketing-calm-hub-photo.is-indian,
html[data-hero-person="stuart"] .marketing-calm-hub-photo.is-stuart {
    opacity: 0.96;
}

.marketing-calm-hub-media::after {
    background:
        radial-gradient(circle at 50% 50%, rgba(214, 183, 104, 0.12), transparent 19rem),
        radial-gradient(circle at 50% 72%, rgba(9, 8, 7, 0.01), rgba(9, 8, 7, 0.42) 44rem),
        linear-gradient(90deg, rgba(9, 8, 7, 0.34), rgba(9, 8, 7, 0.07) 26%, rgba(9, 8, 7, 0.05) 72%, rgba(9, 8, 7, 0.3)),
        linear-gradient(180deg, rgba(9, 8, 7, 0.04), rgba(9, 8, 7, 0.1) 52%, rgba(9, 8, 7, 0.58));
}

.marketing-calm-hub-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 86rem);
    min-height: calc(100svh - 4.6rem);
    margin: 0 auto;
    padding: clamp(1.3rem, 3vh, 2.4rem) 1rem;
}

.marketing-calm-hub-stage {
    position: relative;
    min-width: 0;
    width: min(100%, 82rem);
    height: calc(100svh - 7.2rem);
    min-height: 42rem;
    max-height: 54rem;
    margin: 0 auto;
    isolation: isolate;
}

.marketing-calm-orbit {
    position: absolute;
    left: 50%;
    top: 59%;
    width: min(52vw, 38rem);
    aspect-ratio: 1;
    border: 2px dotted rgba(230, 202, 125, 0.46);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    opacity: 0.78;
    filter: drop-shadow(0 0 1.2rem rgba(214, 183, 104, 0.32));
    animation: calmHubOrbit 26s linear infinite;
}

.marketing-calm-orbit::before,
.marketing-calm-orbit::after {
    content: "";
    position: absolute;
    inset: 14%;
    border: 1px dotted rgba(255, 255, 255, 0.28);
    border-radius: inherit;
}

.marketing-calm-orbit::after {
    inset: 30%;
    border-color: rgba(214, 183, 104, 0.42);
}

.marketing-calm-hub-centre-logo {
    position: absolute;
    left: 50%;
    top: 64%;
    z-index: 4;
    width: clamp(4.2rem, 7vw, 6.4rem);
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 0.45rem 0.62rem rgba(0, 0, 0, 0.34))
        drop-shadow(0 1rem 1.8rem rgba(0, 0, 0, 0.32));
    transform: translate(-50%, -50%);
}

.marketing-calm-card {
    position: absolute;
    z-index: 5;
    width: clamp(11rem, 15.4vw, 14.5rem);
    min-height: 8.6rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    color: #101319;
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(16px);
    animation:
        calmCardIn 680ms cubic-bezier(0.2, 0.78, 0.2, 1) var(--card-delay) both;
}

.marketing-calm-card.is-inbox {
    left: 10%;
    top: 8%;
}

.marketing-calm-card.is-calendar {
    left: 5%;
    top: 39%;
}

.marketing-calm-card.is-tasks {
    left: 2.5%;
    top: 68%;
}

.marketing-calm-card.is-money {
    right: 10%;
    top: 9%;
}

.marketing-calm-card.is-website {
    right: 5%;
    top: 40%;
}

.marketing-calm-card.is-marketing {
    right: 7%;
    top: 69%;
}

.marketing-calm-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 2;
    height: 0.28rem;
    background: linear-gradient(90deg, var(--card-accent), color-mix(in srgb, var(--card-accent) 54%, #111 46%));
}

.marketing-calm-card-slide {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: space-between;
    gap: 0.65rem;
    padding: 0.9rem;
    opacity: 0;
    transform: none;
    animation: calmCardSlide var(--slide-duration, 12s) ease infinite;
    animation-delay: var(--slide-offset, 0s);
}

.marketing-calm-card-slide:nth-child(2) {
    animation-delay: calc(var(--slide-offset, 0s) + var(--slide-step, 4s));
}

.marketing-calm-card-slide:nth-child(3) {
    animation-delay: calc(var(--slide-offset, 0s) + var(--slide-step-two, 8s));
}

.marketing-calm-card-head {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.marketing-calm-card-head strong {
    min-width: 0;
    overflow: hidden;
    color: #121722;
    font-size: 0.92rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-calm-card p {
    margin: 0;
    color: #171b23;
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    font-weight: 900;
    line-height: 1.08;
}

.marketing-calm-card small {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    border-radius: 999px;
    padding: 0.32rem 0.55rem;
    background: color-mix(in srgb, var(--card-accent) 14%, #fff);
    color: color-mix(in srgb, var(--card-accent) 70%, #111);
    font-size: 0.68rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes calmHubOrbit {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes calmHubPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0.52rem rgba(214, 183, 104, 0.14),
            0 0 2.8rem rgba(214, 183, 104, 0.42),
            0 1.4rem 4rem rgba(0, 0, 0, 0.45);
    }

    50% {
        box-shadow:
            0 0 0 0.75rem rgba(214, 183, 104, 0.1),
            0 0 3.6rem rgba(214, 183, 104, 0.56),
            0 1.4rem 4rem rgba(0, 0, 0, 0.45);
    }
}

@keyframes calmCardIn {
    from {
        opacity: 0;
        transform: translateY(1.25rem) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes calmCardSlide {
    0%,
    28% {
        opacity: 1;
        transform: none;
    }

    34%,
    94% {
        opacity: 0;
        transform: none;
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.marketing-calm-hub-caption {
    position: absolute;
    left: 50%;
    bottom: clamp(1rem, 3.2vh, 2rem);
    z-index: 6;
    display: grid;
    justify-items: center;
    gap: 0.58rem;
    width: min(24rem, 86vw);
    color: #d6b768;
    text-align: center;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
    transform: translateX(-50%);
}

.marketing-calm-hub-caption h1 {
    max-width: none;
    margin: 0;
    color: #d6b768;
    font-size: clamp(1.35rem, 2.1vw, 1.95rem);
    font-weight: 520;
    letter-spacing: 0.28em;
    line-height: 1.2;
    text-transform: lowercase;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.72);
}

.marketing-calm-hub-caption span {
    width: min(17rem, 60vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(214, 183, 104, 0.5), transparent);
}

.marketing-calm-hub-caption img {
    width: min(9.6rem, 42vw);
    height: auto;
    object-fit: contain;
    opacity: 0.92;
    filter: sepia(1) saturate(1.3) hue-rotate(354deg) brightness(0.82) drop-shadow(0 10px 26px rgba(0, 0, 0, 0.62));
}

.marketing-hub-main {
    background:
        radial-gradient(circle at top left, rgba(214, 183, 104, 0.22), transparent 34rem),
        linear-gradient(180deg, #fff, var(--marketing-paper) 46%, #fff);
}

.marketing-hub-section {
    padding-top: 4rem;
}

.marketing-hub-section .marketing-breadcrumbs {
    color: rgba(17, 19, 24, 0.62);
}

.marketing-hub-section .marketing-breadcrumbs a:hover,
.marketing-hub-section .marketing-breadcrumbs a:focus-visible {
    color: var(--marketing-gold-dark);
}

.marketing-hub-intro {
    max-width: 58rem;
}

.marketing-hub-intro .marketing-kicker {
    border-color: rgba(138, 104, 29, 0.24);
    background: rgba(138, 104, 29, 0.08);
    color: var(--marketing-gold-dark);
}

.marketing-hub-intro h1 {
    max-width: 12ch;
    margin: 1.1rem 0 0;
    color: var(--marketing-ink);
    font-size: clamp(3.1rem, 8vw, 5.8rem);
    line-height: 0.92;
    letter-spacing: 0;
}

.marketing-hub-intro p {
    max-width: 45rem;
    margin: 1.2rem 0 0;
    color: var(--marketing-muted);
    font-size: 1.15rem;
    line-height: 1.65;
}

.marketing-hub-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.marketing-hub-intro.marketing-sr-only + .marketing-hub-card-grid {
    margin-top: 1.15rem;
}

.marketing-hub-card {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 1.25rem;
    color: #fff;
    text-decoration: none;
    box-shadow: var(--marketing-shadow);
    isolation: isolate;
    animation: marketingHubCardIn 620ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.marketing-hub-card:nth-child(2) {
    animation-delay: 70ms;
}

.marketing-hub-card:nth-child(3) {
    animation-delay: 140ms;
}

.marketing-hub-card:nth-child(4) {
    animation-delay: 210ms;
}

.marketing-hub-card:nth-child(5) {
    animation-delay: 280ms;
}

.marketing-hub-card:nth-child(6) {
    animation-delay: 350ms;
}

.marketing-hub-card:nth-child(7) {
    animation-delay: 420ms;
}

.marketing-hub-card:nth-child(8) {
    animation-delay: 490ms;
}

.marketing-hub-card:nth-child(9) {
    animation-delay: 560ms;
}

.marketing-hub-card::before,
.marketing-hub-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.marketing-hub-card::before {
    background:
        radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.28), transparent 11rem),
        linear-gradient(135deg, var(--hub-card-a), var(--hub-card-b));
}

.marketing-hub-card::after {
    opacity: 0.58;
    background:
        linear-gradient(140deg, transparent 0 38%, rgba(255, 255, 255, 0.16) 38% 39%, transparent 39%),
        radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.2), transparent 7.5rem);
}

.marketing-hub-card:hover,
.marketing-hub-card:focus-visible {
    transform: translateY(-3px);
    filter: saturate(1.06);
    box-shadow: 0 30px 82px rgba(25, 20, 12, 0.24);
}

.marketing-hub-card-icon {
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    background: rgba(17, 19, 24, 0.2);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(12px);
}

.marketing-hub-card strong {
    display: block;
    max-width: 11ch;
    color: #fff;
    font-size: clamp(1.85rem, 3.1vw, 2.85rem);
    line-height: 0.96;
    letter-spacing: 0;
    text-shadow: 0 8px 32px rgba(0, 0, 0, 0.52);
}

.marketing-hub-card > span:not(.marketing-hub-card-icon) {
    display: block;
    max-width: 24rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.98rem;
    line-height: 1.45;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

.marketing-hub-card em {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border-radius: 999px;
    padding: 0.52rem 0.8rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--marketing-gold-deep);
    font-size: 0.88rem;
    font-style: normal;
    font-weight: 850;
}

.marketing-hub-card em::after {
    content: ">";
    margin-left: 0.48rem;
}

.marketing-hub-card.is-gold {
    --hub-card-a: #9a7727;
    --hub-card-b: #21180b;
}

.marketing-hub-card.is-teal {
    --hub-card-a: #0f766e;
    --hub-card-b: #083f3d;
}

.marketing-hub-card.is-rose {
    --hub-card-a: #a9465b;
    --hub-card-b: #4b1d27;
}

.marketing-hub-card.is-indigo {
    --hub-card-a: #3658a8;
    --hub-card-b: #161c4a;
}

.marketing-hub-card.is-green {
    --hub-card-a: #2f7d50;
    --hub-card-b: #123821;
}

.marketing-hub-card.is-plum {
    --hub-card-a: #794c8b;
    --hub-card-b: #2c1737;
}

.why-choose-main {
    background:
        radial-gradient(circle at 10% 0%, rgba(15, 118, 110, 0.12), transparent 20rem),
        radial-gradient(circle at 90% 8%, rgba(143, 61, 77, 0.12), transparent 22rem),
        linear-gradient(180deg, #fbfaf6 0%, #f3eee2 55%, #fbfaf6 100%);
}

.why-choose-hero {
    padding: 3.2rem 1rem 2.2rem;
}

.why-choose-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 23rem);
    gap: 1.2rem;
    align-items: end;
}

.why-choose-hero .marketing-kicker {
    margin-top: 1.4rem;
    border-color: rgba(138, 104, 29, 0.2);
    background: rgba(255, 255, 255, 0.7);
    color: var(--marketing-gold-dark);
    box-shadow: 0 16px 38px rgba(25, 20, 12, 0.08);
}

.why-choose-hero h1 {
    max-width: 12ch;
    margin: 1.05rem 0 0;
    color: var(--marketing-ink);
    font-size: clamp(3.4rem, 9vw, 6.9rem);
    line-height: 0.88;
    letter-spacing: 0;
}

.why-choose-hero p {
    max-width: 47rem;
    margin: 1.15rem 0 0;
    color: var(--marketing-muted);
    font-size: 1.16rem;
    line-height: 1.65;
}

.why-choose-instructions {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.65rem;
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 16px;
    padding: 1.1rem;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--marketing-shadow);
}

.why-choose-instructions::after {
    content: "";
    position: absolute;
    right: -2.2rem;
    bottom: -2.2rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(138, 104, 29, 0.18), transparent 68%);
}

.why-choose-instructions strong {
    color: var(--marketing-ink);
    font-size: 1.18rem;
    line-height: 1.15;
}

.why-choose-instructions span {
    color: var(--marketing-muted);
    line-height: 1.55;
}

.why-choose-card-section {
    padding-top: 2.2rem;
}

.why-choose-heading {
    max-width: 58rem;
}

.why-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.why-choose-card-section .why-card-grid {
    margin-top: 0;
}

.why-flip-card {
    --why-a: #9a7727;
    --why-b: #21180b;
    --why-c: rgba(255, 255, 255, 0.2);
    display: block;
    min-width: 0;
    min-height: 17.5rem;
    border: 0;
    border-radius: 18px;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    perspective: 1200px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.why-card-inner {
    position: relative;
    display: block;
    min-height: inherit;
    border-radius: inherit;
    transform-style: preserve-3d;
    transition: filter 220ms ease;
}

.why-card-face {
    position: absolute;
    inset: 0;
    display: flex;
    min-height: inherit;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: inherit;
    padding: 1.2rem;
    color: #fff;
    box-shadow: 0 24px 62px rgba(25, 20, 12, 0.2);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(0deg);
    transition:
        opacity 220ms ease,
        transform 520ms cubic-bezier(0.2, 0.78, 0.2, 1),
        visibility 0ms linear 220ms;
}

.why-card-face::before,
.why-card-face::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.why-card-face::before {
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.28), transparent 9.5rem),
        radial-gradient(circle at 90% 4%, var(--why-c), transparent 7.5rem),
        linear-gradient(135deg, var(--why-a), var(--why-b));
}

.why-card-face::after {
    right: -3.8rem;
    bottom: -4.2rem;
    z-index: -1;
    width: 12rem;
    height: 12rem;
    border: 1.1rem solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.why-card-back {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(-180deg);
}

.why-card-front {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.why-flip-card.is-flipped .why-card-front {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: rotateY(180deg);
}

.why-flip-card.is-flipped .why-card-back {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    transform: rotateY(0deg);
    transition:
        opacity 220ms ease,
        transform 520ms cubic-bezier(0.2, 0.78, 0.2, 1),
        visibility 0ms;
}

.why-card-back::before {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.32), transparent 10rem),
        linear-gradient(145deg, var(--why-b), var(--why-a));
}

.why-card-count,
.why-card-action {
    position: relative;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(17, 19, 24, 0.2);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px);
}

.why-card-count {
    padding: 0.42rem 0.68rem;
}

.why-card-action {
    gap: 0.5rem;
    padding: 0.52rem 0.78rem;
}

.why-card-action::after {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.why-card-prompt,
.why-card-solution {
    position: relative;
    display: block;
    color: #fff;
    font-weight: 880;
    letter-spacing: 0;
    line-height: 0.98;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

.why-card-prompt {
    max-width: 13ch;
    font-size: clamp(1.85rem, 2.4vw, 2.75rem);
}

.why-card-solution {
    max-width: 13ch;
    font-size: clamp(1.55rem, 2.1vw, 2.35rem);
}

.why-card-copy {
    position: relative;
    display: block;
    margin: 0.9rem 0 1rem;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.98rem;
    line-height: 1.45;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.4);
}

.why-flip-card:hover .why-card-inner,
.why-flip-card:focus-visible .why-card-inner {
    filter: saturate(1.08);
}

.why-flip-card:focus-visible {
    outline: 3px solid rgba(138, 104, 29, 0.38);
    outline-offset: 4px;
}

.why-flip-card.tone-gold {
    --why-a: #9a7727;
    --why-b: #21180b;
    --why-c: rgba(214, 183, 104, 0.34);
}

.why-flip-card.tone-teal {
    --why-a: #0f766e;
    --why-b: #083f3d;
    --why-c: rgba(121, 210, 199, 0.28);
}

.why-flip-card.tone-rose {
    --why-a: #a9465b;
    --why-b: #4b1d27;
    --why-c: rgba(255, 176, 190, 0.24);
}

.why-flip-card.tone-indigo {
    --why-a: #3658a8;
    --why-b: #161c4a;
    --why-c: rgba(153, 177, 255, 0.22);
}

.why-flip-card.tone-green {
    --why-a: #2f7d50;
    --why-b: #123821;
    --why-c: rgba(142, 221, 172, 0.24);
}

.why-flip-card.tone-plum {
    --why-a: #794c8b;
    --why-b: #2c1737;
    --why-c: rgba(219, 170, 238, 0.24);
}

.marketing-compare-card-grid {
    margin-top: 2rem;
}

.marketing-compare-card strong {
    max-width: 100%;
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: keep-all;
}

.marketing-compare-card .marketing-compare-subtitle {
    margin-top: -0.65rem;
    color: rgba(255, 255, 255, 0.94);
    font-size: clamp(1.18rem, 2.2vw, 1.7rem);
    font-weight: 900;
    line-height: 1;
    text-transform: lowercase;
}

.marketing-compare-card .marketing-compare-copy {
    margin-top: auto;
}

.price-calculator-section {
    padding-top: 2rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(15, 118, 110, 0.12), transparent 22rem),
        radial-gradient(circle at 92% 14%, rgba(143, 61, 77, 0.1), transparent 21rem),
        var(--marketing-paper);
}

.price-calculator-shell {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.price-calculator-summary,
.price-calculator-card {
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--marketing-shadow);
    backdrop-filter: blur(18px);
}

.price-calculator-summary {
    position: sticky;
    top: 6rem;
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
}

.price-calculator-summary .marketing-kicker,
.price-calculator-card .marketing-kicker {
    border-color: rgba(138, 104, 29, 0.22);
    background: rgba(138, 104, 29, 0.08);
    color: var(--marketing-gold-dark);
}

.price-calculator-summary > strong {
    color: var(--marketing-ink);
    font-size: clamp(2.4rem, 7vw, 3.8rem);
    line-height: 0.94;
    letter-spacing: 0;
}

.price-calculator-summary > small {
    color: var(--marketing-gold-dark);
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.price-calculator-summary p {
    margin: 0.2rem 0 0;
    color: var(--marketing-muted);
    line-height: 1.5;
}

.price-calculator-mini-list {
    display: flex;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.price-calculator-mini-list span {
    border-radius: 999px;
    padding: 0.38rem 0.58rem;
    background: #f3eee2;
    color: #4a3b1f;
    font-size: 0.76rem;
    font-weight: 760;
}

.price-calculator-wizard {
    min-width: 0;
}

.price-calculator-progress {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.price-calculator-progress span {
    color: var(--marketing-gold-dark);
    font-size: 0.82rem;
    font-weight: 850;
    text-transform: uppercase;
}

.price-calculator-progress i {
    display: block;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(138, 104, 29, 0.13);
}

.price-calculator-progress b {
    display: block;
    width: 6%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-gold-deep));
    transition: width 220ms ease;
}

.price-calculator-card {
    min-height: 33rem;
    display: grid;
    align-content: start;
    gap: 1rem;
    padding: clamp(1.1rem, 4vw, 2rem);
}

.price-calculator-card h2 {
    max-width: 15ch;
    margin: 0;
    color: var(--marketing-ink);
    font-size: clamp(2.3rem, 7vw, 4.8rem);
    line-height: 0.94;
    letter-spacing: 0;
}

.price-calculator-card p {
    max-width: 46rem;
    margin: 0;
    color: var(--marketing-muted);
    font-size: 1.08rem;
    line-height: 1.62;
}

.price-choice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.35rem;
}

.price-choice-button,
.price-feedback-panel button {
    min-height: 3.25rem;
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 999px;
    padding: 0 0.9rem;
    background: #fff;
    color: var(--marketing-ink);
    cursor: pointer;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 850;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(25, 20, 12, 0.08);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.price-choice-button:hover,
.price-choice-button:focus-visible,
.price-feedback-panel button:hover,
.price-feedback-panel button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(138, 104, 29, 0.34);
    box-shadow: 0 18px 40px rgba(25, 20, 12, 0.12);
}

.price-choice-button.is-selected {
    border-color: rgba(95, 71, 15, 0.46);
    background: linear-gradient(135deg, #9a7727, #21180b);
    color: #fff;
    box-shadow: 0 18px 38px rgba(95, 71, 15, 0.26);
}

.price-team-stepper {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr) 3.75rem;
    align-items: center;
    gap: 0.7rem;
    max-width: 25rem;
    margin-top: 0.35rem;
}

.price-free-start {
    display: grid;
    gap: 0.65rem;
    max-width: 46rem;
    border: 1px solid rgba(15, 118, 110, 0.18);
    border-radius: 16px;
    padding: clamp(1rem, 3vw, 1.25rem);
    background:
        radial-gradient(circle at 100% 0%, rgba(15, 118, 110, 0.12), transparent 12rem),
        linear-gradient(135deg, #ffffff, #fbfaf6);
    box-shadow: 0 18px 40px rgba(25, 20, 12, 0.08);
}

.price-free-start > span {
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 880;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.price-free-start strong {
    color: var(--marketing-ink);
    font-size: clamp(1.25rem, 3vw, 1.65rem);
    line-height: 1.1;
}

.price-free-start p {
    max-width: none;
    color: #303642;
    font-size: 0.98rem;
    line-height: 1.5;
}

.price-free-start div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.price-free-start b {
    border-radius: 999px;
    padding: 0.42rem 0.68rem;
    background: linear-gradient(135deg, #0f766e, #5f470f);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 820;
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.15);
}

.price-team-stepper button {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    border: 1px solid rgba(138, 104, 29, 0.2);
    border-radius: 999px;
    background: #fff;
    color: var(--marketing-gold-dark);
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(25, 20, 12, 0.1);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.price-team-stepper button:hover,
.price-team-stepper button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(138, 104, 29, 0.38);
    box-shadow: 0 18px 40px rgba(25, 20, 12, 0.14);
}

.price-stepper-arrow {
    width: 0.9rem;
    height: 0.9rem;
    border-color: currentColor;
    border-style: solid;
    border-width: 0.18rem 0.18rem 0 0;
}

.price-stepper-arrow.is-up {
    transform: translateY(0.2rem) rotate(-45deg);
}

.price-stepper-arrow.is-down {
    transform: translateY(-0.2rem) rotate(135deg);
}

.price-team-stepper > div {
    display: grid;
    min-height: 8.5rem;
    place-items: center;
    align-content: center;
    gap: 0.2rem;
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 18px;
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 183, 104, 0.18), transparent 10rem),
        #fff;
    box-shadow: 0 18px 42px rgba(25, 20, 12, 0.08);
}

.price-team-stepper strong {
    color: var(--marketing-ink);
    font-size: clamp(4.5rem, 16vw, 7rem);
    line-height: 0.9;
}

.price-team-stepper span:not(.price-stepper-arrow) {
    color: var(--marketing-gold-dark);
    font-size: 0.9rem;
    font-weight: 850;
    text-transform: uppercase;
}

.price-use-case,
.price-module-price,
.price-included-panel,
.price-feedback-panel {
    display: grid;
    gap: 0.35rem;
    border: 1px solid rgba(138, 104, 29, 0.16);
    border-radius: 12px;
    padding: 1rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(214, 183, 104, 0.15), transparent 12rem),
        #fbfaf6;
}

.price-use-case strong,
.price-module-price span,
.price-included-panel strong,
.price-feedback-panel strong {
    color: var(--marketing-gold-dark);
    font-size: 0.78rem;
    font-weight: 880;
    text-transform: uppercase;
}

.price-use-case span,
.price-included-panel p,
.price-feedback-panel > span {
    color: #303642;
    line-height: 1.52;
}

.price-included-panel {
    gap: 0.6rem;
    background:
        radial-gradient(circle at 0% 0%, rgba(15, 118, 110, 0.12), transparent 12rem),
        #fff;
}

.price-included-panel p {
    margin: 0;
    color: var(--marketing-muted);
}

.price-included-panel div {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.price-included-panel div span {
    border-radius: 999px;
    padding: 0.44rem 0.7rem;
    background: linear-gradient(135deg, #0f766e, #5f470f);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 850;
    box-shadow: 0 10px 24px rgba(15, 118, 110, 0.16);
}

.price-module-price {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.price-module-price strong {
    color: var(--marketing-ink);
    font-size: 1.5rem;
}

.price-calculator-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.price-result-list {
    display: grid;
    gap: 0.55rem;
}

.price-result-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid rgba(138, 104, 29, 0.14);
    border-radius: 10px;
    padding: 0.75rem;
    background: #fff;
}

.price-result-list span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.price-result-list strong {
    color: var(--marketing-ink);
}

.price-result-list small {
    color: var(--marketing-muted);
    font-weight: 650;
}

.price-result-list b {
    color: var(--marketing-gold-dark);
    white-space: nowrap;
}

.price-comparison-panel {
    display: grid;
    gap: 0.85rem;
    border: 1px solid rgba(95, 71, 15, 0.2);
    border-radius: 14px;
    padding: 1rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(143, 61, 77, 0.18), transparent 12rem),
        linear-gradient(135deg, #17100a, #5f470f);
    color: #fff;
    box-shadow: 0 18px 42px rgba(34, 25, 10, 0.2);
}

.price-comparison-heading {
    display: grid;
    gap: 0.18rem;
}

.price-comparison-heading span,
.price-comparison-panel article span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    font-weight: 880;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.price-comparison-heading strong {
    font-size: 1.28rem;
    line-height: 1.1;
}

.price-comparison-panel p {
    max-width: 58rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.98rem;
    line-height: 1.5;
}

.price-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.62rem;
}

.price-comparison-panel article {
    display: grid;
    gap: 0.34rem;
    align-content: start;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 0.85rem;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.price-comparison-panel article strong {
    font-size: 1.05rem;
}

.price-comparison-panel article b {
    color: #fff;
    font-size: 1.18rem;
    line-height: 1.1;
}

.price-comparison-panel article small,
.price-comparison-panel em {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.42;
}

.price-comparison-panel em {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 0.72rem;
}

.price-feedback-panel div {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.price-feedback-panel button {
    min-height: 2.65rem;
    font-size: 0.84rem;
}

.price-feedback-panel em {
    min-height: 1.2rem;
    color: var(--marketing-teal);
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 800;
}

@keyframes marketingHubCardIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.marketing-hub-action {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(138, 104, 29, 0.2);
    border-radius: 12px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 55px rgba(25, 20, 12, 0.09);
}

.marketing-hub-action p {
    max-width: 42rem;
    margin: 0;
    color: var(--marketing-muted);
    line-height: 1.5;
}

.marketing-proof-panel {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 1.15rem;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: var(--marketing-shadow);
    backdrop-filter: blur(12px);
}

.marketing-proof-panel strong {
    display: block;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.3;
}

.marketing-proof-panel span {
    display: block;
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}

.marketing-proof-panel-light {
    border-color: var(--marketing-line);
    background: #fff;
}

.marketing-proof-panel-light strong {
    color: var(--marketing-ink);
}

.marketing-proof-panel-light span {
    color: var(--marketing-muted);
}

.marketing-confidence-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.marketing-confidence-list span {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.65rem 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.86);
    font-size: 0.9rem;
    font-weight: 760;
}

.marketing-confidence-list span::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    background: #d6b768;
}

.marketing-confidence-list-light span {
    background: #fbfaf6;
    color: #343946;
}

.marketing-reveal {
    animation: marketingRise 700ms ease both;
}

.marketing-reveal-delay {
    animation-delay: 120ms;
}

@keyframes marketingRise {
    from {
        opacity: 0.001;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.marketing-section-heading {
    max-width: 45rem;
}

.marketing-section-heading::before,
.marketing-gold-stripe {
    content: "";
    display: block;
    width: 6.5rem;
    height: 0.28rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--marketing-gold), var(--marketing-gold-deep));
}

.marketing-section-heading h2,
.marketing-article h2 {
    margin: 0;
    color: var(--marketing-ink);
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0;
}

.marketing-section-heading p,
.marketing-article p,
.marketing-card p,
.marketing-feature-row p {
    color: var(--marketing-muted);
    line-height: 1.65;
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.marketing-card,
.marketing-feature-row,
.marketing-comparison-card {
    border: 1px solid var(--marketing-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 44px rgba(25, 20, 12, 0.08);
}

.marketing-card {
    padding: 1.2rem;
}

.marketing-card h3,
.marketing-feature-row h3,
.marketing-comparison-card h3 {
    margin: 0;
    color: var(--marketing-ink);
    font-size: 1.22rem;
    line-height: 1.2;
}

.marketing-card p {
    margin: 0.65rem 0 0;
}

.marketing-card a {
    color: var(--marketing-ink);
}

.marketing-card-icon {
    min-width: 2.2rem;
    width: fit-content;
    height: 2.2rem;
    margin-bottom: 0.9rem;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-gold-deep));
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 0 0.65rem;
}

.marketing-band-dark {
    background: linear-gradient(135deg, #15110a, #21180b);
    color: #fff;
}

.marketing-band-dark .marketing-section-heading h2,
.marketing-band-dark .marketing-card h3 {
    color: #fff;
}

.marketing-band-dark .marketing-card a {
    color: #fff;
}

.marketing-band-dark .marketing-section-heading p,
.marketing-band-dark .marketing-card p {
    color: rgba(255, 255, 255, 0.78);
}

.marketing-band-dark .marketing-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.marketing-feature-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 2rem;
}

.marketing-feature-row {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.marketing-feature-row span {
    color: var(--marketing-gold-dark);
    font-weight: 860;
}

.marketing-feature-row p {
    margin: 0.2rem 0 0;
}

.marketing-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(17rem, 0.95fr);
    gap: 2rem;
    align-items: center;
}

.marketing-image-story-section {
    padding-top: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(243, 238, 226, 0.72));
}

.marketing-image-story-grid {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    margin-inline: -0.25rem;
    padding: 0.15rem 0.25rem 1.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 0.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-color: rgba(138, 104, 29, 0.42) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.marketing-image-story-grid::-webkit-scrollbar {
    height: 0.55rem;
}

.marketing-image-story-grid::-webkit-scrollbar-track {
    background: rgba(138, 104, 29, 0.08);
    border-radius: 999px;
}

.marketing-image-story-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, rgba(95, 71, 15, 0.72), rgba(138, 104, 29, 0.72));
    border-radius: 999px;
}

.marketing-image-story-card {
    flex: 0 0 clamp(18rem, 31vw, 25rem);
    position: relative;
    min-height: 23rem;
    overflow: hidden;
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 12px;
    background: #111318;
    box-shadow: var(--marketing-shadow);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.marketing-image-story-card.marketing-image-story-feature {
    flex-basis: clamp(20rem, 38vw, 34rem);
}

.marketing-image-story-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    transform: scale(1.01);
}

.marketing-image-story-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(17, 19, 24, 0.04), rgba(17, 19, 24, 0.72)),
        linear-gradient(90deg, rgba(33, 24, 11, 0.18), rgba(15, 118, 110, 0.12));
}

.marketing-image-story-card figcaption {
    position: absolute;
    inset: auto 1rem 1rem;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    padding: 0.9rem;
    background: rgba(17, 19, 24, 0.58);
    color: #fff;
    backdrop-filter: blur(14px);
}

.marketing-image-story-card figcaption strong,
.marketing-image-story-card figcaption span {
    display: block;
}

.marketing-image-story-card figcaption strong {
    font-size: 1.08rem;
    line-height: 1.15;
}

.marketing-image-story-card figcaption span {
    margin-top: 0.38rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    line-height: 1.4;
}

.marketing-workspace-preview {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(138, 104, 29, 0.26);
    border-radius: 16px;
    padding: 0.9rem;
    background:
        radial-gradient(circle at 12% 8%, rgba(138, 104, 29, 0.18), transparent 12rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(244, 239, 226, 0.9));
    box-shadow: var(--marketing-shadow);
}

.marketing-workspace-preview::after {
    content: "";
    position: absolute;
    inset: auto -10% -28% 36%;
    height: 12rem;
    border-radius: 999px;
    background: rgba(138, 104, 29, 0.13);
    filter: blur(18px);
}

.marketing-preview-topbar,
.marketing-preview-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.marketing-preview-topbar {
    justify-content: space-between;
    border-bottom: 1px solid rgba(138, 104, 29, 0.18);
    padding: 0.2rem 0.15rem 0.9rem;
}

.marketing-preview-topbar span {
    width: 1.8rem;
    height: 2.1rem;
    border-radius: 0.65rem;
    background: url("/assets/images/r.png") center / contain no-repeat;
}

.marketing-preview-topbar strong {
    color: var(--marketing-ink);
    font-size: 0.86rem;
}

.marketing-preview-logo {
    position: absolute;
    left: 50%;
    width: 7.8rem;
    height: 1.75rem;
    transform: translateX(-50%);
    overflow: hidden;
    background: url("/assets/images/wordmark.png") center / contain no-repeat;
    text-indent: -999px;
    white-space: nowrap;
}

.marketing-preview-topbar em {
    border-radius: 999px;
    padding: 0.32rem 0.62rem;
    background: #173f36;
    color: #fff;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 860;
}

.marketing-preview-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.72rem;
    margin-top: 0.82rem;
}

.marketing-preview-panel {
    min-width: 0;
    min-height: 9rem;
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 12px;
    padding: 0.82rem;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(25, 20, 12, 0.08);
}

.marketing-preview-inbox {
    grid-row: span 2;
}

.marketing-preview-carousel {
    position: relative;
    overflow: hidden;
}

.marketing-preview-inbox.marketing-preview-carousel {
    min-height: 18.85rem;
}

.marketing-preview-slide {
    position: absolute;
    inset: 0.82rem;
    opacity: 0;
    transform: translateY(0.7rem);
    animation-name: marketingPreviewSlide;
    animation-duration: 12s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    will-change: opacity, transform;
}

.marketing-preview-carousel-b .marketing-preview-slide {
    animation-duration: 13.5s;
}

.marketing-preview-carousel-c .marketing-preview-slide {
    animation-duration: 15s;
}

.marketing-preview-carousel-a .marketing-preview-slide:nth-child(2) {
    animation-delay: 4s;
}

.marketing-preview-carousel-a .marketing-preview-slide:nth-child(3) {
    animation-delay: 8s;
}

.marketing-preview-carousel-b .marketing-preview-slide:nth-child(2) {
    animation-delay: 4.5s;
}

.marketing-preview-carousel-b .marketing-preview-slide:nth-child(3) {
    animation-delay: 9s;
}

.marketing-preview-carousel-c .marketing-preview-slide:nth-child(2) {
    animation-delay: 5s;
}

.marketing-preview-carousel-c .marketing-preview-slide:nth-child(3) {
    animation-delay: 10s;
}

@keyframes marketingPreviewSlide {
    0%,
    29% {
        opacity: 1;
        transform: translateY(0);
    }

    36%,
    93% {
        opacity: 0;
        transform: translateY(-0.55rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.marketing-preview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
    max-width: 100%;
    width: fit-content;
    border-radius: 999px;
    padding: 0.22rem 0.5rem 0.22rem 0.24rem;
    background: rgba(138, 104, 29, 0.12);
    background: color-mix(in srgb, var(--preview-accent, #8a681d) 14%, white);
    color: var(--marketing-gold-dark);
    color: color-mix(in srgb, var(--preview-accent, #8a681d) 68%, #21180b);
    font-size: 0.56rem;
    font-weight: 900;
    text-transform: uppercase;
}

.marketing-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}

.marketing-preview-icon {
    --preview-accent: #8a681d;
    position: relative;
    display: inline-grid;
    width: 1.08rem;
    height: 1.08rem;
    flex: 0 0 1.08rem;
    place-items: center;
    border-radius: 0.55rem;
    background: var(--preview-accent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--preview-accent) 86%, #fff), color-mix(in srgb, var(--preview-accent) 72%, #21180b));
    box-shadow: 0 8px 16px rgba(25, 20, 12, 0.13);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--preview-accent) 24%, transparent);
}

.marketing-preview-label span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.marketing-preview-icon::before,
.marketing-preview-icon::after {
    content: "";
    position: absolute;
    display: block;
}

.marketing-preview-icon.is-inbox { --preview-accent: #2563eb; }
.marketing-preview-icon.is-chat { --preview-accent: #0f766e; }
.marketing-preview-icon.is-follow { --preview-accent: #7c3aed; }
.marketing-preview-icon.is-website { --preview-accent: #8a681d; }
.marketing-preview-icon.is-landing { --preview-accent: #be5b1d; }
.marketing-preview-icon.is-blog { --preview-accent: #8f3d4d; }
.marketing-preview-icon.is-money { --preview-accent: #0b7a55; }
.marketing-preview-icon.is-calendar { --preview-accent: #1d4ed8; }
.marketing-preview-icon.is-tasks { --preview-accent: #6d4c41; }

.marketing-preview-label.is-inbox { --preview-accent: #2563eb; }
.marketing-preview-label.is-chat { --preview-accent: #0f766e; }
.marketing-preview-label.is-follow { --preview-accent: #7c3aed; }
.marketing-preview-label.is-website { --preview-accent: #8a681d; }
.marketing-preview-label.is-landing { --preview-accent: #be5b1d; }
.marketing-preview-label.is-blog { --preview-accent: #8f3d4d; }
.marketing-preview-label.is-money { --preview-accent: #0b7a55; }
.marketing-preview-label.is-calendar { --preview-accent: #1d4ed8; }
.marketing-preview-label.is-tasks { --preview-accent: #6d4c41; }

.marketing-preview-icon.is-inbox::before,
.marketing-preview-icon.is-website::before,
.marketing-preview-icon.is-landing::before,
.marketing-preview-icon.is-blog::before {
    width: 0.62rem;
    height: 0.44rem;
    border: 2px solid #fff;
    border-radius: 0.15rem;
}

.marketing-preview-icon.is-inbox::after {
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-0.1rem) rotate(45deg);
}

.marketing-preview-icon.is-chat::before {
    width: 0.66rem;
    height: 0.5rem;
    border: 2px solid #fff;
    border-radius: 0.28rem;
}

.marketing-preview-icon.is-chat::after {
    left: 0.36rem;
    bottom: 0.3rem;
    width: 0.24rem;
    height: 0.24rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-28deg);
}

.marketing-preview-icon.is-follow::before,
.marketing-preview-icon.is-tasks::before {
    width: 0.6rem;
    height: 0.32rem;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-0.08rem) rotate(-45deg);
}

.marketing-preview-icon.is-website::after,
.marketing-preview-icon.is-landing::after,
.marketing-preview-icon.is-blog::after {
    top: 0.37rem;
    left: 0.34rem;
    width: 0.5rem;
    height: 2px;
    background: #fff;
}

.marketing-preview-icon.is-money::before {
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid #fff;
    border-radius: 999px;
}

.marketing-preview-icon.is-money::after {
    width: 0.16rem;
    height: 0.48rem;
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}

.marketing-preview-icon.is-calendar::before {
    width: 0.66rem;
    height: 0.6rem;
    border: 2px solid #fff;
    border-radius: 0.16rem;
}

.marketing-preview-icon.is-calendar::after {
    top: 0.37rem;
    width: 0.64rem;
    height: 2px;
    background: #fff;
}

.marketing-mini-toggle {
    position: relative;
    display: inline-flex;
    width: 1.74rem;
    height: 0.94rem;
    flex: 0 0 auto;
    align-items: center;
    border: 1px solid rgba(18, 21, 33, 0.1);
    border-radius: 999px;
    background: rgba(18, 21, 33, 0.13);
    box-shadow: inset 0 1px 3px rgba(18, 21, 33, 0.16);
}

.marketing-mini-toggle span {
    width: 0.62rem;
    height: 0.62rem;
    margin-left: 0.14rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 8px rgba(18, 21, 33, 0.18);
    transition: transform 220ms ease;
}

.marketing-mini-toggle.is-on {
    background: linear-gradient(135deg, #8a681d, #21180b);
}

.marketing-mini-toggle.is-on span {
    transform: translateX(0.78rem);
}

.marketing-preview-panel h3 {
    margin: 0.52rem 0 0;
    color: var(--marketing-ink);
    font-size: 0.86rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.marketing-preview-message {
    display: flex;
    gap: 0.48rem;
    align-items: flex-start;
    min-width: 0;
    margin-top: 0.58rem;
    border-radius: 10px;
    padding: 0.52rem;
    background: #fbfaf6;
}

.marketing-preview-message .marketing-message-icon {
    flex: 0 0 auto;
    width: 1.2rem;
    height: 1.2rem;
    position: relative;
    border-radius: 8px;
    background: var(--message-accent, #8a681d);
    background: linear-gradient(135deg, var(--message-accent, #8a681d), color-mix(in srgb, var(--message-accent, #8a681d) 72%, #21180b));
}

.marketing-message-icon::before {
    content: "";
    position: absolute;
    inset: 0.35rem;
    border: 2px solid #fff;
    border-radius: 999px;
}

.marketing-message-icon.is-blue { --message-accent: #2563eb; }
.marketing-message-icon.is-amber { --message-accent: #8a681d; }
.marketing-message-icon.is-teal { --message-accent: #0f766e; }
.marketing-message-icon.is-rose { --message-accent: #8f3d4d; }
.marketing-message-icon.is-violet { --message-accent: #7c3aed; }
.marketing-message-icon.is-green { --message-accent: #0b7a55; }

.marketing-preview-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.64rem;
}

.marketing-preview-chip-row span {
    border-radius: 999px;
    padding: 0.2rem 0.38rem;
    background: rgba(17, 19, 24, 0.07);
    color: #343946;
    font-size: 0.56rem;
    font-weight: 760;
}

.marketing-preview-message strong {
    display: block;
    color: var(--marketing-ink);
    font-size: 0.68rem;
    line-height: 1.18;
    overflow-wrap: anywhere;
}

.marketing-preview-message p {
    margin: 0.16rem 0 0;
    color: var(--marketing-muted);
    font-size: 0.62rem;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.marketing-progress {
    overflow: hidden;
    height: 0.52rem;
    margin-top: 0.95rem;
    border-radius: 999px;
    background: rgba(138, 104, 29, 0.16);
}

.marketing-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--marketing-gold), var(--marketing-gold-deep));
}

.marketing-preview-number {
    margin-top: 0.84rem;
    color: var(--marketing-gold-deep);
    font-size: 1.34rem;
    font-weight: 920;
}

.marketing-preview-footer {
    z-index: 1;
    flex-wrap: wrap;
    margin-top: 0.9rem;
}

.marketing-preview-footer span {
    border: 1px solid rgba(138, 104, 29, 0.18);
    border-radius: 999px;
    padding: 0.32rem 0.54rem;
    background: rgba(255, 255, 255, 0.72);
    color: #343946;
    font-size: 0.62rem;
    font-weight: 830;
}

.marketing-feature-preview-section {
    padding: 2.6rem 1rem 0;
    background: #fbfaf6;
}

.marketing-feature-preview-section + .marketing-section {
    padding-top: 3rem;
}

.marketing-feature-preview {
    --feature-accent: #8a681d;
    --feature-accent-2: #21180b;
    width: min(100%, 64rem);
    margin: 0 auto;
    border-color: color-mix(in srgb, var(--feature-accent) 28%, transparent);
    background:
        radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--feature-accent) 22%, transparent), transparent 12rem),
        radial-gradient(circle at 86% 88%, color-mix(in srgb, var(--feature-accent-2) 18%, transparent), transparent 14rem),
        linear-gradient(135deg, #fff, color-mix(in srgb, var(--feature-accent) 9%, #fbfaf6));
}

.marketing-feature-preview .marketing-preview-topbar {
    border-bottom-color: color-mix(in srgb, var(--feature-accent) 22%, transparent);
}

.marketing-feature-preview::after {
    background: color-mix(in srgb, var(--feature-accent) 16%, transparent);
}

.marketing-feature-preview .marketing-preview-topbar em,
.marketing-feature-preview .marketing-mini-toggle.is-on {
    background: linear-gradient(135deg, var(--feature-accent), var(--feature-accent-2));
}

.marketing-feature-preview .marketing-preview-panel {
    border-color: color-mix(in srgb, var(--feature-accent) 20%, transparent);
}

.marketing-feature-preview .marketing-progress {
    background: color-mix(in srgb, var(--feature-accent) 14%, white);
}

.marketing-feature-preview .marketing-progress span {
    background: linear-gradient(90deg, var(--feature-accent), var(--feature-accent-2));
}

.marketing-feature-preview .marketing-preview-number {
    color: var(--feature-accent-2);
}

.marketing-feature-preview.is-inbox {
    --feature-accent: #2563eb;
    --feature-accent-2: #172554;
}

.marketing-feature-preview.is-chatflow {
    --feature-accent: #0f766e;
    --feature-accent-2: #134e4a;
}

.marketing-feature-preview.is-website {
    --feature-accent: #8a681d;
    --feature-accent-2: #3f2f0d;
}

.marketing-feature-preview.is-bookings {
    --feature-accent: #7c3aed;
    --feature-accent-2: #3b0764;
}

.marketing-feature-preview.is-marketing {
    --feature-accent: #be5b1d;
    --feature-accent-2: #7c2d12;
}

.marketing-feature-preview.is-writing {
    --feature-accent: #8f3d4d;
    --feature-accent-2: #4a1422;
}

.marketing-feature-preview .marketing-preview-label,
.marketing-feature-preview .marketing-preview-icon {
    --preview-accent: var(--feature-accent);
}

.marketing-preview-form {
    display: grid;
    gap: 0.48rem;
    margin-top: 0.62rem;
}

.marketing-preview-field {
    min-height: 2.45rem;
    border: 1px solid color-mix(in srgb, var(--feature-accent) 20%, transparent);
    border-radius: 10px;
    padding: 0.58rem 0.62rem;
    background: #fff;
    color: var(--marketing-ink);
    font-size: 0.68rem;
    font-weight: 780;
    line-height: 1.28;
}

.marketing-preview-field.is-large {
    min-height: 4.4rem;
}

.marketing-preview-field span {
    display: block;
    margin-bottom: 0.24rem;
    color: var(--marketing-muted);
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.marketing-preview-button {
    justify-self: start;
    border-radius: 999px;
    padding: 0.42rem 0.72rem;
    background: linear-gradient(135deg, var(--feature-accent), var(--feature-accent-2));
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--feature-accent) 22%, transparent);
}

.marketing-preview-calendar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.32rem;
    margin-top: 0.72rem;
}

.marketing-preview-calendar span {
    display: grid;
    min-height: 2.5rem;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--feature-accent) 10%, #fff);
    color: color-mix(in srgb, var(--feature-accent-2) 82%, #111318);
    font-size: 0.62rem;
    font-weight: 900;
}

.marketing-preview-calendar .is-selected {
    background: linear-gradient(135deg, var(--feature-accent), var(--feature-accent-2));
    color: #fff;
}

.marketing-social-icons,
.marketing-platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
    margin-top: 0.72rem;
}

.marketing-social-icons span,
.marketing-platform-row span {
    display: inline-grid;
    min-width: 2.1rem;
    height: 2.1rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--feature-accent) 12%, #fff);
    color: var(--feature-accent-2);
    font-size: 0.58rem;
    font-weight: 920;
}

.marketing-platform-row span {
    min-width: auto;
    height: auto;
    border-radius: 999px;
    padding: 0.36rem 0.48rem;
}

.marketing-preview-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.46rem;
    margin-top: 0.64rem;
}

.marketing-preview-stat {
    border-radius: 11px;
    padding: 0.56rem;
    background: color-mix(in srgb, var(--feature-accent) 9%, #fff);
}

.marketing-preview-stat strong {
    display: block;
    color: var(--feature-accent-2);
    font-size: 1rem;
    line-height: 1;
}

.marketing-preview-stat span {
    display: block;
    margin-top: 0.22rem;
    color: var(--marketing-muted);
    font-size: 0.56rem;
    font-weight: 820;
}

.marketing-preview-checklist {
    display: grid;
    gap: 0.38rem;
    margin-top: 0.68rem;
}

.marketing-preview-checklist span {
    position: relative;
    border-radius: 999px;
    padding: 0.38rem 0.52rem 0.38rem 1.5rem;
    background: #fff;
    color: var(--marketing-ink);
    font-size: 0.62rem;
    font-weight: 820;
}

.marketing-preview-checklist span::before {
    content: "";
    position: absolute;
    left: 0.52rem;
    top: 50%;
    width: 0.48rem;
    height: 0.28rem;
    border-left: 2px solid var(--feature-accent);
    border-bottom: 2px solid var(--feature-accent);
    transform: translateY(-62%) rotate(-45deg);
}

.marketing-preview-sparkline {
    display: flex;
    align-items: end;
    gap: 0.24rem;
    height: 4.4rem;
    margin-top: 0.72rem;
    border-radius: 12px;
    padding: 0.52rem;
    background: color-mix(in srgb, var(--feature-accent) 8%, #fff);
}

.marketing-preview-sparkline span {
    flex: 1;
    min-width: 0.28rem;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, var(--feature-accent), var(--feature-accent-2));
}

.marketing-page-hero {
    position: relative;
    padding: 5.5rem 1rem 4.4rem;
    background:
        linear-gradient(135deg, rgba(14, 15, 18, 0.94), rgba(33, 24, 11, 0.88)),
        url("/assets/images/goldwater.jpeg") center / cover;
    color: #fff;
}

.marketing-page-hero-inner {
    width: min(100%, 76rem);
    margin: 0 auto;
}

.marketing-feature-hero {
    padding: 5.2rem 1rem 4.8rem;
}

.marketing-feature-hero .marketing-page-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(25rem, 1.12fr);
    align-items: center;
    gap: 1rem 2.4rem;
}

.marketing-feature-hero .marketing-breadcrumbs,
.marketing-feature-hero h1,
.marketing-feature-hero .marketing-page-hero-inner > p,
.marketing-feature-hero .marketing-actions {
    grid-column: 1;
}

.marketing-feature-hero h1 {
    max-width: 13ch;
}

.marketing-feature-hero .marketing-page-hero-inner > p {
    max-width: 38rem;
}

.marketing-feature-hero .marketing-feature-preview-section {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    padding: 0;
    background: transparent;
}

.marketing-feature-hero .marketing-feature-preview {
    width: 100%;
    margin: 0;
}

.marketing-breadcrumbs {
    display: none;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: nowrap;
    margin: 0 0 1.25rem;
    color: rgba(255, 255, 255, 0.76);
    font-family: "Avenir Next", Aptos, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.marketing-breadcrumbs a,
.marketing-breadcrumbs span {
    color: inherit;
    font: inherit;
}

.marketing-breadcrumbs a {
    text-decoration: none;
}

.marketing-breadcrumbs a:hover,
.marketing-breadcrumbs a:focus-visible {
    color: #fff;
}

.marketing-article {
    width: min(100%, 76rem);
    margin: 0 auto;
}

.marketing-article h2 {
    margin-top: 2.6rem;
}

.marketing-article h3 {
    margin: 1.6rem 0 0;
    font-size: 1.45rem;
}

.marketing-article p,
.marketing-article li {
    font-size: 1.05rem;
    line-height: 1.68;
}

.marketing-article a {
    color: var(--marketing-gold-dark);
    font-weight: 780;
}

.marketing-note {
    border-left: 0.35rem solid var(--marketing-gold);
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
    color: #444b58;
}

.marketing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--marketing-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(25, 20, 12, 0.08);
}

.marketing-table th,
.marketing-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(138, 104, 29, 0.16);
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
}

.marketing-table th {
    background: #21180b;
    color: #fff;
}

.marketing-table tr:last-child td {
    border-bottom: 0;
}

.marketing-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.3rem;
}

.marketing-comparison-card {
    padding: 1.2rem;
}

.marketing-comparison-card ul {
    padding-left: 1.2rem;
}

.marketing-cta-band {
    border-radius: 12px;
    padding: 2rem;
    background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-gold-deep));
    color: #fff;
    box-shadow: var(--marketing-shadow);
}

.marketing-cta-band h2 {
    color: #fff;
}

.marketing-cta-band p {
    color: rgba(255, 255, 255, 0.84);
}

.marketing-cta-band .marketing-button-secondary,
.marketing-cta-band .marketing-button-secondary:visited,
.marketing-cta-band .marketing-button-secondary:hover,
.marketing-cta-band .marketing-button-secondary:focus-visible {
    border-color: rgba(255, 255, 255, 0.95);
    background: #fff;
    color: #21180b !important;
    box-shadow: 0 18px 34px rgba(33, 24, 11, 0.24);
}

.marketing-footer {
    border-top: 1px solid rgba(138, 104, 29, 0.22);
    padding: 2rem 1rem;
    background: #fff;
}

.marketing-footer-inner {
    width: min(100%, 76rem);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--marketing-muted);
    font-size: 0.92rem;
}

.marketing-footer a {
    color: var(--marketing-muted);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}

@media (max-width: 900px) {
    .marketing-hero {
        min-height: calc(100svh - 4.6rem);
    }

    .marketing-calm-hub-hero {
        min-height: calc(100svh - 4.6rem);
    }

    .marketing-calm-hub-shell {
        min-height: calc(100svh - 4.6rem);
        padding: 1rem;
    }

    .marketing-calm-hub-stage {
        width: min(100%, 58rem);
        height: calc(100svh - 6.6rem);
        min-height: 40rem;
        margin: 0 auto;
    }

    .marketing-calm-card {
        width: clamp(9.4rem, 24vw, 12rem);
        min-height: 7.4rem;
    }

    .marketing-calm-hub-caption h1 {
        font-size: clamp(1.25rem, 3vw, 1.75rem);
    }

    .marketing-hero-content,
    .marketing-split,
    .marketing-feature-hero .marketing-page-hero-inner,
    .marketing-comparison-grid {
        grid-template-columns: 1fr;
    }

    .marketing-feature-hero .marketing-breadcrumbs,
    .marketing-feature-hero h1,
    .marketing-feature-hero .marketing-page-hero-inner > p,
    .marketing-feature-hero .marketing-actions,
    .marketing-feature-hero .marketing-feature-preview-section {
        grid-column: 1;
    }

    .marketing-feature-hero .marketing-feature-preview-section {
        grid-row: auto;
        margin-top: 1rem;
    }

    .marketing-feature-hero h1 {
        max-width: none;
    }

    .marketing-hero h1,
    .marketing-page-hero h1 {
        font-size: 4.2rem;
    }

    .marketing-hero .marketing-calm-hub-caption h1 {
        font-size: clamp(1.25rem, 3vw, 1.75rem);
    }

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

    .marketing-hub-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marketing-hub-card {
        min-height: 16rem;
    }

    .marketing-hub-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .marketing-image-story-grid {
        scroll-padding-inline: 0;
    }

    .marketing-image-story-card {
        flex-basis: min(82vw, 27rem);
        min-height: 25rem;
    }

    .marketing-image-story-card.marketing-image-story-feature {
        flex-basis: min(88vw, 31rem);
    }

    .marketing-feature-row {
        grid-template-columns: 1fr;
    }

    .marketing-preview-grid {
        grid-template-columns: 1fr;
    }

    .marketing-preview-inbox {
        grid-row: auto;
    }

    .price-calculator-shell {
        grid-template-columns: 1fr;
    }

    .price-calculator-summary {
        position: relative;
        top: auto;
    }

    .price-choice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .marketing-preview-slide {
        animation: none;
    }

    .marketing-calm-card,
    .marketing-calm-card-slide,
    .marketing-calm-orbit,
    .marketing-calm-hub-centre-logo {
        animation: none;
    }

    .marketing-calm-card-slide:first-child {
        opacity: 1;
        transform: none;
    }

    .marketing-hub-card {
        animation: none;
    }

    .marketing-preview-slide:first-child {
        opacity: 1;
        transform: none;
    }

    .why-card-inner,
    .why-card-face {
        transition: none;
    }
}

@media (max-width: 1180px) {
    .why-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .why-choose-hero-inner {
        grid-template-columns: 1fr;
    }

    .why-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .marketing-header {
        position: sticky;
    }

    .marketing-nav,
    .marketing-actions,
    .marketing-footer-inner {
        align-items: stretch;
    }

    .marketing-nav {
        position: relative;
        width: 100vw;
        max-width: none;
        min-height: 4.75rem;
        flex-direction: row;
        align-items: center;
        padding: 0.76rem 1rem;
    }

    .marketing-menu-toggle {
        position: fixed;
        top: 0.82rem;
        right: auto;
        left: calc(100vw - 4.1rem);
        left: calc(100dvw - 4.1rem);
        z-index: 80;
        display: inline-grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 3.1rem;
        height: 3.1rem;
        flex: 0 0 auto;
        place-items: center;
        margin-left: auto;
        border: 1px solid rgba(95, 71, 15, 0.2);
        border-radius: 999px;
        background: #fff;
        color: var(--marketing-gold-dark);
        box-shadow: 0 14px 34px rgba(17, 19, 24, 0.12);
        -webkit-tap-highlight-color: transparent;
    }

    .marketing-menu-toggle span:not(.marketing-sr-only) {
        position: absolute;
        left: 50%;
        width: 1.25rem;
        height: 0.14rem;
        border-radius: 999px;
        background: currentColor;
        transform: translateX(-50%);
        transition: transform 180ms ease, opacity 180ms ease, top 180ms ease;
    }

    .marketing-menu-toggle span:nth-child(1) {
        top: 1.05rem;
    }

    .marketing-menu-toggle span:nth-child(2) {
        top: 1.47rem;
    }

    .marketing-menu-toggle span:nth-child(3) {
        top: 1.89rem;
    }

    .marketing-nav.is-open .marketing-menu-toggle span:nth-child(1) {
        top: 1.47rem;
        transform: translateX(-50%) rotate(45deg);
    }

    .marketing-nav.is-open .marketing-menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .marketing-nav.is-open .marketing-menu-toggle span:nth-child(3) {
        top: 1.47rem;
        transform: translateX(-50%) rotate(-45deg);
    }

    .marketing-nav.has-menu-toggle .marketing-nav-links {
        position: fixed;
        z-index: 70;
        top: 4.85rem;
        left: 1rem;
        right: auto;
        width: calc(100vw - 2rem);
        width: calc(100dvw - 2rem);
        display: grid;
        grid-template-columns: 1fr;
        max-height: calc(100vh - 7.5rem);
        overflow-y: auto;
        border: 1px solid rgba(95, 71, 15, 0.14);
        border-radius: 1.35rem;
        padding: 0.62rem;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 24px 58px rgba(17, 19, 24, 0.18);
        backdrop-filter: blur(18px);
        opacity: 0;
        transform: translateY(-0.45rem) scale(0.98);
        transform-origin: top right;
        pointer-events: none;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
        gap: 0.36rem;
        justify-content: stretch;
    }

    .marketing-nav.has-menu-toggle.is-open .marketing-nav-links {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
        visibility: visible;
    }

    .marketing-nav-links a,
    .marketing-pill-link,
    .marketing-button {
        min-width: 0;
        flex: 1 1 auto;
        padding-inline: 0.62rem;
        font-size: 0.82rem;
        text-align: center;
    }

    .marketing-nav.has-menu-toggle .marketing-nav-links a {
        min-height: 3rem;
        justify-content: flex-start;
        border-radius: 0.95rem;
        padding-inline: 0.95rem;
        background: rgba(138, 104, 29, 0.07);
        color: var(--marketing-ink);
        font-size: 0.92rem;
        font-weight: 680;
    }

    .marketing-nav-links .marketing-pill-link {
        grid-column: auto;
    }

    .marketing-nav.has-menu-toggle .marketing-nav-links .marketing-pill-link {
        justify-content: center;
        margin-top: 0.2rem;
        background: linear-gradient(135deg, var(--marketing-gold), var(--marketing-gold-deep));
        color: #fff !important;
    }

    .marketing-hero h1,
    .marketing-page-hero h1 {
        font-size: 3.25rem;
    }

    .marketing-hero p,
    .marketing-page-hero p {
        font-size: 1.05rem;
    }

    .marketing-calm-hub-shell {
        padding: 0.5rem 0.75rem;
    }

    .marketing-calm-hub-stage {
        display: block;
        height: 35rem;
        min-height: 35rem;
        padding: 0;
    }

    .marketing-calm-orbit {
        display: block;
        top: 58%;
        width: min(76vw, 20rem);
        opacity: 0.52;
    }

    .marketing-calm-hub-centre-logo {
        top: 63%;
        width: 4.2rem;
        height: auto;
        transform: translate(-50%, -50%);
    }

    .marketing-calm-card {
        position: absolute;
        width: min(30vw, 7.6rem);
        min-height: 5.85rem;
        border-radius: 12px;
        animation:
            calmCardIn 620ms cubic-bezier(0.2, 0.78, 0.2, 1) var(--card-delay) both;
    }

    .marketing-calm-card.is-calendar,
    .marketing-calm-card.is-website {
        display: none;
    }

    .marketing-calm-card.is-inbox {
        left: 2%;
        top: 5%;
    }

    .marketing-calm-card.is-tasks {
        left: 2%;
        top: auto;
        bottom: 11%;
    }

    .marketing-calm-card.is-money {
        left: auto;
        right: 2%;
        top: 5%;
    }

    .marketing-calm-card.is-marketing {
        left: auto;
        right: 2%;
        top: auto;
        bottom: 11%;
    }

    .marketing-calm-card-slide {
        gap: 0.35rem;
        padding: 0.66rem;
    }

    .marketing-calm-card-head strong {
        font-size: 0.72rem;
    }

    .marketing-calm-card p {
        font-size: 0.7rem;
        line-height: 1.08;
    }

    .marketing-calm-card small {
        max-width: 100%;
        padding: 0.24rem 0.42rem;
        font-size: 0.54rem;
    }

    .marketing-calm-hub-caption {
        bottom: 1.05rem;
        gap: 0.45rem;
    }

    .marketing-calm-hub-caption h1 {
        font-size: 1.12rem;
        letter-spacing: 0.23em;
    }

    .marketing-calm-hub-caption img {
        display: none;
    }

    .marketing-section {
        padding: 3.4rem 1rem;
    }

    .marketing-section-heading h2,
    .marketing-article h2 {
        font-size: 2.3rem;
    }

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

    .marketing-hub-section {
        padding-top: 3.2rem;
    }

    .marketing-hub-card-grid {
        grid-template-columns: 1fr;
    }

    .marketing-hub-card {
        min-height: 15rem;
    }

    .marketing-hub-card strong {
        max-width: 12ch;
    }

    .marketing-image-story-card {
        flex-basis: 84vw;
        min-height: 21rem;
    }

    .marketing-image-story-card.marketing-image-story-feature {
        flex-basis: 84vw;
    }

    .marketing-workspace-preview {
        padding: 0.72rem;
    }

    .marketing-preview-topbar {
        padding-bottom: 0.68rem;
    }

    .marketing-preview-topbar em {
        font-size: 0.66rem;
        padding: 0.26rem 0.5rem;
    }

    .marketing-preview-logo {
        width: 6.6rem;
        height: 1.42rem;
    }

    .marketing-preview-grid {
        gap: 0.6rem;
        margin-top: 0.66rem;
    }

    .marketing-preview-panel {
        min-height: 8rem;
        padding: 0.68rem;
    }

    .marketing-preview-inbox.marketing-preview-carousel {
        min-height: 16.4rem;
    }

    .marketing-preview-slide {
        inset: 0.68rem;
    }

    .marketing-preview-label {
        font-size: 0.52rem;
        padding-right: 0.42rem;
    }

    .marketing-preview-panel h3 {
        font-size: 0.8rem;
    }

    .marketing-preview-message strong {
        font-size: 0.64rem;
    }

    .marketing-preview-message p,
    .marketing-preview-chip-row span,
    .marketing-preview-footer span {
        font-size: 0.58rem;
    }

    .marketing-preview-number {
        font-size: 1.18rem;
    }

    .marketing-table {
        display: block;
        overflow-x: auto;
    }

    .price-calculator-summary {
        display: none;
    }

    .price-calculator-card {
        min-height: auto;
    }

    .price-calculator-card h2 {
        max-width: none;
        font-size: 2.65rem;
    }

    .price-team-stepper {
        grid-template-columns: 3rem minmax(0, 1fr) 3rem;
        gap: 0.55rem;
        max-width: 100%;
    }

    .price-team-stepper button {
        width: 3rem;
        height: 3rem;
    }

    .price-team-stepper > div {
        min-height: 7.4rem;
    }

    .price-team-stepper strong {
        font-size: 4.6rem;
    }

    .price-choice-grid {
        grid-template-columns: 1fr;
    }

    .price-module-price {
        grid-template-columns: 1fr;
    }

    .price-result-list article {
        align-items: flex-start;
        flex-direction: column;
    }

    .price-comparison-grid {
        grid-template-columns: 1fr;
    }

    .price-calculator-actions .marketing-button {
        width: 100%;
    }

    .why-choose-hero {
        padding-top: 2.4rem;
    }

    .why-choose-hero h1 {
        font-size: 3.5rem;
    }

    .why-choose-hero p {
        font-size: 1rem;
    }

    .why-card-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .why-flip-card {
        min-height: 15.5rem;
    }

    .why-card-prompt {
        max-width: 15ch;
    }

    .why-card-solution {
        max-width: 16ch;
    }
}