/* =========================================================================
   Klevrio — landing page
   Satoshi + Inter, shared gutters, scroll-driven motion.
   ========================================================================= */

@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Satoshi";
    src: url("../fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --indigo: #4f46e5;
    --indigo-deep: #3730a3;
    --violet: #9333ea;
    --lilac: #a855f7;
    --ink: #0c0a18;
    --ink-2: #1c1730;
    --body: #3f3a4d;
    --muted: #6b6578;
    --line: #e4e0ea;
    --paper: #f7f4ef;
    --mist: #fbfaf7;
    --lavender: #eee9ff;
    --white: #ffffff;
    --dark: #0c0a18;
    --dark-2: #161326;
    --on-dark: #ece8f4;
    --on-dark-muted: #b7b0c5;
    --plum-deep: #1a0f36;
    --plum-mid: #2d1b57;
    --plum-glow: rgba(132, 92, 255, 0.22);

    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;

    --container: 1180px;
    --gutter: 48px;
    --header-h: 72px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    interpolate-size: allow-keywords;
    background: var(--ink);
}

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

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

a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-deep); }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 0 0 16px;
}

p { margin: 0 0 16px; }
ul, ol { margin: 0; padding: 0; }

.container {
    width: 100%;
    max-width: calc(var(--container) + (var(--gutter) * 2));
    margin: 0 auto;
    padding: 0 var(--gutter);
}

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

.kicker {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 16px;
}

.sec-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.sec-head--left { text-align: left; margin: 0 0 40px; }
.sec-head h2 { font-size: clamp(40px, 6vw, 68px); margin: 0 0 14px; }
.sec-lede { font-size: 18px; color: var(--body); margin: 0; }

[data-reveal] { opacity: 1; transform: none; }

[data-float] {
    will-change: transform;
    transform: translate3d(0, var(--paray, 0px), 0);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.01em;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
    white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.btn--primary:hover { background: var(--indigo-deep); border-color: var(--indigo-deep); color: #fff; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--lavender); color: var(--ink); }
.btn--on-dark { background: #fff; color: var(--ink); border-color: #fff; }
.btn--on-dark:hover { background: var(--lavender); color: var(--ink); }
.btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn--sm { height: 38px; padding: 0 14px; font-size: 13px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn--xl { height: 60px; padding: 0 36px; font-size: 17px; font-weight: 700; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.site-header.is-scrolled,
#siteHeader.is-scrolled {
    background-color: #fff;
    background-image: none;
    border-bottom: 1px solid rgba(12, 10, 24, 0.08);
    box-shadow: 0 10px 30px rgba(12, 10, 24, 0.08);
}
.nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
    width: 100%;
    max-width: calc(var(--container) + (var(--gutter) * 2));
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.nav__brand,
.nav__brand:hover,
.nav__brand:focus,
.nav__brand:focus-visible {
    justify-self: start;
    display: flex;
    align-items: center;
    position: relative;
    height: 44px;
    color: #f1f5f9;
    transition: color 0.25s var(--ease);
}
.nav__brand-logo {
    display: block;
    height: 44px;
    width: 168px;
    flex-shrink: 0;
    overflow: visible;
}
.site-header.is-scrolled .nav__brand,
.site-header.is-scrolled .nav__brand:hover,
.site-header.is-scrolled .nav__brand:focus,
.site-header.is-scrolled .nav__brand:focus-visible {
    color: #0f172a;
}
/* Lighter mark on dark (transparent) hero so it reads clearly */
.site-header:not(.is-scrolled) .nav__brand-stop-a { stop-color: #818CF8; }
.site-header:not(.is-scrolled) .nav__brand-stop-b { stop-color: #C084FC; }
.site-header:not(.is-scrolled) .nav__brand-arc--a { stroke: #A5B4FC; }
.site-header:not(.is-scrolled) .nav__brand-arc--b { stroke: #E9D5FF; }
.site-header:not(.is-scrolled) .nav__brand-dot--a { fill: #C7D2FE; }
.site-header:not(.is-scrolled) .nav__brand-dot--b { fill: #F3E8FF; }
.nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(12, 10, 24, 0.72);
}
.site-header.is-scrolled .nav__links {
    border-color: rgba(12, 10, 24, 0.08);
    background: rgba(255, 255, 255, 0.94);
}
.nav__item { position: static; }
.nav__mobile-only { display: none; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    position: relative;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease), -webkit-text-fill-color 0.2s var(--ease);
}
.nav__link--btn {
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    cursor: pointer;
}
.nav__link--products {
    gap: 8px;
}
.site-header.is-scrolled .nav__link--btn,
#siteHeader.is-scrolled .nav__link--btn {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
}
.nav__live {
    width: 7px;
    height: 7px;
    border-radius: 0;
    background: #a5b4fc;
    box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.55);
    animation: nav-live 1.8s ease-out infinite;
}
.site-header.is-scrolled .nav__live {
    background: var(--indigo);
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
}
@keyframes nav-live {
    0% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(165, 180, 252, 0); }
    100% { box-shadow: 0 0 0 0 rgba(165, 180, 252, 0); }
}
.nav__chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.25s var(--ease);
}
.nav__item.is-open .nav__chevron { transform: rotate(180deg); }
.nav__link::after { display: none; }
.nav__link:hover {
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.site-header.is-mega-open:not(.is-scrolled) .nav__link--products {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: rgba(255, 255, 255, 0.12);
}
.site-header.is-scrolled .nav__link,
.site-header.is-scrolled .nav__link--btn,
#siteHeader.is-scrolled .nav__link,
#siteHeader.is-scrolled .nav__link--btn {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
}
.site-header.is-scrolled .nav__link:hover,
.site-header.is-scrolled.is-mega-open .nav__link--products {
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
    background: rgba(12, 10, 24, 0.06);
}
.nav__cta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nav__cta .btn {
    height: 44px;
    padding: 0 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
}
.nav__cta .btn:hover { transform: none; }
.nav__cta .btn--ghost {
    border-color: transparent;
    background: transparent;
    padding: 0 14px;
}
.nav__cta .btn--ghost:hover {
    background: rgba(12, 10, 24, 0.06);
    color: var(--ink);
}
.site-header:not(.is-scrolled) .nav__cta .btn--ghost {
    color: rgba(255, 255, 255, 0.92);
}
.site-header:not(.is-scrolled) .nav__cta .btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.nav__cta .btn--primary {
    min-width: 148px;
}
.nav__toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.32);
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.nav__toggle svg {
    width: 22px;
    height: 22px;
    display: block;
}
.nav__toggle-close { display: none; }
.nav.is-open .nav__toggle-open { display: none; }
.nav.is-open .nav__toggle-close { display: block; }
.site-header.is-scrolled .nav__toggle {
    color: var(--ink);
    border-color: var(--line);
}
html.is-nav-open,
html.is-nav-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* ---------- Products mega menu ---------- */
.mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    padding: 12px var(--gutter) 28px;
    z-index: 70;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.mega[hidden] { display: none; }
.site-header.is-mega-open .mega {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}
.mega__inner {
    width: 100%;
    max-width: min(720px, var(--container));
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(12, 10, 24, 0.06);
    border-radius: 18px;
    box-shadow: 0 32px 80px rgba(12, 10, 24, 0.14);
    overflow: hidden;
}
.mega__body {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(200px, 0.9fr);
}
.mega__col {
    padding: 12px 14px 8px;
}
.mega__col--products {
    border-right: 1px solid var(--line);
}
.mega__col--more {
    background: linear-gradient(180deg, #faf9f6 0%, #f3f0ea 100%);
}
.mega__label {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.mega__features {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.mega__features--compact {
    grid-template-columns: 1fr;
    gap: 2px;
}
.mega__col--products .mega__feature {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 56px;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 10px;
    color: var(--ink);
    transition: background-color 0.2s var(--ease);
}
.mega__feature {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    color: var(--ink);
    transition: background-color 0.2s var(--ease);
}
a.mega__feature:hover,
a.mega__feature:focus-visible {
    background: rgba(79, 70, 229, 0.05);
    outline: none;
}
a.mega__feature:hover .mega__preview,
a.mega__feature:focus-visible .mega__preview {
    transform: scale(1.04);
}
.mega__feature--static {
    cursor: default;
}
.mega__feature-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--indigo);
    background: linear-gradient(140deg, rgba(99, 102, 241, 0.18), rgba(168, 85, 247, 0.12));
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 9px;
    flex: 0 0 auto;
}
.mega__feature-icon svg { width: 16px; height: 16px; }
.mega__feature-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}
.mega__feature-copy strong {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.mega__feature-copy span {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--muted);
}
.mega__preview {
    position: relative;
    display: block;
    width: 56px;
    height: 32px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(12, 10, 24, 0.1);
    background: linear-gradient(180deg, #f8f7fc 0%, #eef0f6 100%);
    box-shadow: 0 4px 10px rgba(12, 10, 24, 0.08);
    transition: transform 0.2s var(--ease);
}
.mega__preview-chrome {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 7px;
    background: #eceaf3;
    border-bottom: 1px solid rgba(12, 10, 24, 0.06);
}
.mega__preview-chrome::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #c4b5fd;
    box-shadow: 6px 0 0 #ddd6fe, 12px 0 0 #e9d5ff;
}
.mega__preview-body {
    position: absolute;
    inset: 9px 5px 5px;
    border-radius: 3px;
    background:
        linear-gradient(#c7d2fe, #c7d2fe) 0 0 / 28% 100% no-repeat,
        repeating-linear-gradient(
            180deg,
            #4f46e5 0 2px,
            transparent 2px 6px
        ) 36% 2px / 58% 100% no-repeat;
    opacity: 0.85;
}
.mega__preview--chat .mega__preview-body {
    background:
        linear-gradient(#99f6e4, #99f6e4) 0 2px / 52% 6px no-repeat,
        linear-gradient(#0d9488, #0d9488) 48% 13px / 46% 6px no-repeat;
}
.mega__preview--help-center .mega__preview-body {
    background:
        repeating-linear-gradient(180deg, #d97706 0 2px, transparent 2px 6px) 0 0 / 100% 100% no-repeat;
}
.mega__preview--tickets .mega__preview-body {
    background:
        linear-gradient(#e11d48, #e11d48) 0 2px / 70% 4px no-repeat,
        linear-gradient(#fecdd3, #fecdd3) 0 10px / 100% 8px no-repeat;
}
.mega__preview--portal .mega__preview-body {
    background:
        linear-gradient(#0284c7, #0284c7) 0 0 / 100% 5px no-repeat,
        linear-gradient(#bae6fd, #bae6fd) 0 8px / 44% 8px no-repeat,
        linear-gradient(#e0f2fe, #e0f2fe) 52% 8px / 48% 8px no-repeat;
}
.mega__feature--inbox .mega__feature-icon {
    color: #4f46e5;
    background: linear-gradient(140deg, rgba(79, 70, 229, 0.18), rgba(129, 140, 248, 0.12));
    border-color: rgba(79, 70, 229, 0.22);
}
.mega__feature--inbox .mega__preview {
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
    border-color: rgba(79, 70, 229, 0.18);
}
.mega__feature--inbox .mega__preview-chrome { background: #e0e7ff; }
.mega__feature--inbox .mega__preview-chrome::before {
    background: #818cf8;
    box-shadow: 6px 0 0 #a5b4fc, 12px 0 0 #c7d2fe;
}
.mega__feature--chat .mega__feature-icon {
    color: #0f766e;
    background: linear-gradient(140deg, rgba(13, 148, 136, 0.18), rgba(45, 212, 191, 0.12));
    border-color: rgba(13, 148, 136, 0.22);
}
.mega__feature--chat .mega__preview {
    background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
    border-color: rgba(13, 148, 136, 0.18);
}
.mega__feature--chat .mega__preview-chrome { background: #ccfbf1; }
.mega__feature--chat .mega__preview-chrome::before {
    background: #2dd4bf;
    box-shadow: 6px 0 0 #5eead4, 12px 0 0 #99f6e4;
}
.mega__feature--help-center .mega__feature-icon {
    color: #b45309;
    background: linear-gradient(140deg, rgba(217, 119, 6, 0.18), rgba(251, 191, 36, 0.12));
    border-color: rgba(217, 119, 6, 0.22);
}
.mega__feature--help-center .mega__preview {
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    border-color: rgba(217, 119, 6, 0.18);
}
.mega__feature--help-center .mega__preview-chrome { background: #fde68a; }
.mega__feature--help-center .mega__preview-chrome::before {
    background: #f59e0b;
    box-shadow: 6px 0 0 #fbbf24, 12px 0 0 #fde68a;
}
.mega__feature--tickets .mega__feature-icon {
    color: #be123c;
    background: linear-gradient(140deg, rgba(225, 29, 72, 0.16), rgba(251, 113, 133, 0.12));
    border-color: rgba(225, 29, 72, 0.22);
}
.mega__feature--tickets .mega__preview {
    background: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
    border-color: rgba(225, 29, 72, 0.16);
}
.mega__feature--tickets .mega__preview-chrome { background: #fecdd3; }
.mega__feature--tickets .mega__preview-chrome::before {
    background: #fb7185;
    box-shadow: 6px 0 0 #fda4af, 12px 0 0 #fecdd3;
}
.mega__feature--portal .mega__feature-icon {
    color: #0369a1;
    background: linear-gradient(140deg, rgba(2, 132, 199, 0.16), rgba(56, 189, 248, 0.12));
    border-color: rgba(2, 132, 199, 0.22);
}
.mega__feature--portal .mega__preview {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-color: rgba(2, 132, 199, 0.16);
}
.mega__feature--portal .mega__preview-chrome { background: #bae6fd; }
.mega__feature--portal .mega__preview-chrome::before {
    background: #38bdf8;
    box-shadow: 6px 0 0 #7dd3fc, 12px 0 0 #bae6fd;
}
/* Right rail is denser so it reads as a secondary list, not a second product grid. */
.mega__col--more .mega__feature { padding: 6px 8px; }
.mega__col--more .mega__feature-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}
.mega__col--more .mega__feature-icon svg { width: 14px; height: 14px; }
.mega__col--more .mega__feature-copy strong { font-size: 13px; }
.mega__col--more .mega__feature-copy span { font-size: 11.5px; }
.mega__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #f7f5ff 0%, #f3eefc 100%);
    border-top: 1px solid var(--line);
    color: var(--ink);
}
.mega__foot-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--indigo);
}
.mega__foot-cta:hover { color: #4338ca; }
.mega__foot svg { width: 16px; height: 16px; }

.nav__item--drop { position: relative; }
.nav-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 80;
    min-width: 360px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(12, 10, 24, 0.1);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(12, 10, 24, 0.18);
}
.nav-drop[hidden] { display: none; }
.nav-drop a {
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--ink);
}
.nav-drop a strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
}
.nav-drop a span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
}
.nav-drop a:hover,
.nav-drop a:focus-visible { background: var(--paper); }

.site-main { position: relative; }
.site-top-dark {
    position: absolute;
    top: calc(var(--header-h) * -1);
    left: 0;
    right: 0;
    height: calc(var(--header-h) + 200px);
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 80% -10%, var(--plum-glow), transparent 55%),
        linear-gradient(180deg, var(--plum-deep) 0%, var(--plum-mid) 52%, transparent 100%);
}
[data-top-dark] .pitch,
[data-top-dark] .demo-page,
[data-top-dark] .demo-inbox,
[data-top-dark] .switch-page,
[data-top-dark] .legal,
[data-top-dark] .contact,
[data-top-dark] .product {
    position: relative;
    z-index: 1;
}
[data-top-dark] .pitch .kicker,
[data-top-dark] .demo-page .kicker,
[data-top-dark] .demo-inbox .kicker,
[data-top-dark] .legal .kicker,
[data-top-dark] .contact .kicker,
[data-top-dark] .product .kicker {
    color: #c4b5fd;
}
[data-top-dark] .pitch h1,
[data-top-dark] .demo-page__copy h1,
[data-top-dark] .demo-inbox h1,
[data-top-dark] .legal h1,
[data-top-dark] .contact h1,
[data-top-dark] .product-hero h1 {
    color: #fff;
}
[data-top-dark] .pitch__lead,
[data-top-dark] .demo-page__lead,
[data-top-dark] .demo-inbox__lead,
[data-top-dark] .legal__updated,
[data-top-dark] .contact__lead,
[data-top-dark] .product-hero__lead {
    color: rgba(255, 255, 255, 0.78);
}
[data-top-dark] .pitch,
[data-top-dark] .legal,
[data-top-dark] .contact,
[data-top-dark] .product { background: transparent; }
body:has(.demo-page),
body:has(.demo-inbox),
body:has(.switch-page),
body:has(.product),
body:has(.industry-r) { background: #fff; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    margin-top: calc(var(--header-h) * -1);
    padding: 0;
    overflow: hidden;
    background: var(--ink);
    display: flex;
    align-items: flex-end;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 42%;
    filter: none;
    transform: scale(1.04);
    display: block;
}
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(12, 10, 24, 0.88) 0%, rgba(12, 10, 24, 0.42) 28%, rgba(12, 10, 24, 0.35) 58%, rgba(12, 10, 24, 0.86) 100%),
        linear-gradient(90deg, rgba(12, 10, 24, 0.82) 0%, rgba(12, 10, 24, 0.42) 46%, rgba(12, 10, 24, 0.12) 100%);
    pointer-events: none;
}
/* Kill any light bleed from the photo under the sticky nav */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--header-h) + 12px);
    z-index: 1;
    background: linear-gradient(180deg, rgba(12, 10, 24, 0.92) 0%, rgba(12, 10, 24, 0.45) 70%, transparent 100%);
    pointer-events: none;
}
.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: calc(var(--container) + (var(--gutter) * 2));
    margin: 0 auto;
    padding: calc(var(--header-h) + 56px) var(--gutter) 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
}
.hero__content > * {
    max-width: 680px;
}
.hero .kicker {
    margin-bottom: 18px;
    color: #c4b5fd;
}
.hero__title {
    font-size: clamp(44px, 6.8vw, 88px);
    font-weight: 700;
    margin: 0 0 22px;
    color: #fff;
    letter-spacing: -0.045em;
    line-height: 1.02;
    max-width: 640px;
    text-shadow: none;
}
.hero__title > span { display: block; }
.hero__title > .hero__rotate {
    display: grid;
    justify-items: start;
    min-height: 1.15em;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.hero__rotate > span {
    grid-area: 1 / 1;
    color: #c4b5fd;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
}
.hero__rotate > span.is-on {
    visibility: visible;
    animation: rotate-in 0.55s var(--ease) forwards;
}
.hero__rotate > span.is-off {
    visibility: visible;
    animation: rotate-out 0.4s var(--ease) forwards;
}
@keyframes rotate-in {
    from { opacity: 0; transform: translateY(70%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes rotate-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-70%); }
}
.hero__sub {
    font-size: 18px;
    line-height: 1.55;
    max-width: 520px;
    margin: 0 0 28px;
    text-align: left;
    color: rgba(236, 232, 244, 0.86);
}
.hero__sub strong,
.desk__copy strong {
    color: #fff;
    font-weight: 700;
}
.hero__ctas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-bottom: 16px; }
.hero__fine { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin: 0 0 22px; }
.hero__fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hero__channels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.hero__channels span:not(:last-child)::after {
    content: "·";
    margin: 0 14px;
    color: var(--indigo);
    font-weight: 700;
}

.hero__in {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-in 0.8s var(--ease) forwards;
}
.hero__content .kicker { animation-delay: 0.05s; }
.hero__title > .hero__in { animation-delay: 0.16s; }
.hero__sub { animation-delay: 0.32s; }
.hero__ctas { animation-delay: 0.44s; }
.hero__fine { animation-delay: 0.54s; }
.hero__channels { animation-delay: 0.64s; }
@keyframes hero-in {
    to { opacity: 1; transform: none; }
}

/* ---------- Proof board ---------- */
.proof {
    background: var(--paper);
    color: var(--ink);
    padding: 120px 0;
    overflow: hidden;
}
.proof__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: center;
}
.proof__copy h2 { color: var(--ink); font-size: clamp(40px, 5.6vw, 68px); }
.proof__copy p { color: var(--body); font-size: 18px; }
.proof__copy .kicker { color: var(--indigo); }
.proof__stats {
    list-style: none;
    display: flex;
    gap: 40px;
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.proof__stats li {
    color: var(--muted);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.proof__stats strong {
    font-family: var(--font-display);
    font-size: clamp(52px, 6vw, 80px);
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--ink);
    margin-right: 0;
}
.proof__board {
    position: relative;
    width: 100%;
    height: 520px;
    overflow: hidden;
}

/* Photo frames (proof collage, desk, CTA) */
.frame {
    position: relative;
    overflow: hidden;
    background: var(--mist, #f3f1ec);
}
.frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.frame--a {
    position: absolute;
    inset: 0 42% 28% 0;
    width: auto;
    height: auto;
}
.frame--b {
    position: absolute;
    inset: 18% 0 30% 52%;
    width: auto;
    height: auto;
    z-index: 2;
    outline: 10px solid var(--paper);
}
.frame--c {
    position: absolute;
    inset: auto 46% 0 18%;
    width: auto;
    height: 38%;
    z-index: 3;
    outline: 10px solid var(--paper);
}

/* ---------- Help desk slider ---------- */
.desk {
    background: var(--ink);
    padding: 120px var(--gutter);
    overflow: hidden;
    color: var(--on-dark);
}
.desk__intro { max-width: 920px; margin: 0 0 36px; }
.desk__intro .kicker { color: #c4b5fd; }
.desk__intro h2 { font-size: clamp(40px, 5.6vw, 68px); margin: 0; color: #fff; }
.desk__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 48px;
}
.desk__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.12);
    padding: 16px 8px 20px;
    color: var(--on-dark-muted);
    min-width: 0;
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.desk__tab small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(165, 180, 252, 0.7);
}
.desk__tab strong {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: -0.02em;
}
.desk__tab > span {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(183, 176, 197, 0.72);
}
.desk__tab:hover strong { color: rgba(255, 255, 255, 0.85); }
.desk__tab.is-active {
    border-bottom-color: var(--indigo);
    background: transparent;
}
.desk__tab.is-active small { color: #a5b4fc; }
.desk__tab.is-active strong { color: #fff; }
.desk__tab.is-active > span { color: var(--on-dark-muted); }
.desk__tab:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }
.desk__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: transparent;
    overflow: hidden;
    display: block;
}
.desk__progress b {
    display: block;
    height: 100%;
    width: 0;
    background: var(--indigo);
}
.desk__tab.is-active .desk__progress b {
    animation: desk-fill 7s linear forwards;
}
@keyframes desk-fill {
    from { width: 0; }
    to { width: 100%; }
}

.desk__viewport { overflow: hidden; }
.desk__track {
    display: flex;
    transition: transform 0.75s var(--ease);
    will-change: transform;
}
.desk__panel {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
    padding-right: 8px;
}
.desk__copy h3 { font-size: clamp(28px, 3.6vw, 42px); color: #fff; }
.desk__copy > p { font-size: 18px; color: var(--on-dark-muted); }
.desk .ticks li { color: var(--on-dark); }

.desk__panel .desk__copy h3,
.desk__panel .desk__copy > p,
.desk__panel .ticks li,
.desk__panel .stage {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.desk__panel.is-on .desk__copy h3,
.desk__panel.is-on .desk__copy > p,
.desk__panel.is-on .ticks li,
.desk__panel.is-on .stage {
    opacity: 1;
    transform: none;
}
.desk__panel.is-on .desk__copy h3 { transition-delay: 0.05s; }
.desk__panel.is-on .desk__copy > p { transition-delay: 0.12s; }
.desk__panel.is-on .ticks li:nth-child(1) { transition-delay: 0.18s; }
.desk__panel.is-on .ticks li:nth-child(2) { transition-delay: 0.26s; }
.desk__panel.is-on .ticks li:nth-child(3) { transition-delay: 0.34s; }
.desk__panel.is-on .stage { transition-delay: 0.14s; }

.ticks { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 16px; }
.ticks svg { width: 20px; height: 20px; color: var(--indigo); flex-shrink: 0; margin-top: 2px; }

.stage--desk {
    min-height: 480px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.frame--desk {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    flex: 1;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.frame--desk img { filter: none; }
.desk-caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bands {
    background: var(--paper);
    color: var(--body);
    padding: 120px 0;
}
.band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    scroll-margin-top: calc(var(--header-h) + 16px);
    width: 100%;
    max-width: calc(var(--container) + (var(--gutter) * 2));
    margin: 0 auto;
    padding: 0 var(--gutter) 88px;
}
.band:last-child { padding-bottom: 0; }
.band--flip .band__copy { order: 2; }
.band h2 {
    margin: 0 0 14px;
    max-width: 18ch;
    font-size: clamp(32px, 4vw, 48px);
}
.band__lead {
    max-width: 38rem;
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.6;
}
.band__photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--line);
    background: var(--mist);
}
.band__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

/* ---------- Pricing ---------- */
.pricing { background: #fff; padding: 120px 0; border-top: 1px solid var(--line); }
.pricing__toggle-wrap { display: flex; justify-content: center; margin-bottom: 36px; }
.pricing__toggle { display: inline-flex; border: 1px solid var(--ink); }
.pricing__toggle-btn {
    background: transparent;
    border: 0;
    height: 44px;
    padding: 0 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pricing__toggle-btn.is-active { background: var(--ink); color: #fff; }
.pricing__toggle-save {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: var(--lavender);
    color: var(--indigo);
    padding: 2px 6px;
}
.pricing__toggle-btn.is-active .pricing__toggle-save { background: var(--indigo); color: #fff; }
.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.plan {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.plan--featured { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.plan--featured h3,
.plan--featured .plan__price,
.plan--featured .plan__currency { color: #fff; }
.plan--featured .plan__desc,
.plan--featured .plan__billed,
.plan--featured .plan__from,
.plan--featured .plan__was,
.plan--featured .plan__includes,
.plan--featured .plan__features { color: rgba(255, 255, 255, 0.86); }
.plan--featured .plan__was { color: rgba(255, 255, 255, 0.5); }
.plan--featured .plan__features svg { color: #c4b5fd; }
.plan__badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #c4b5fd;
}
.plan__name { font-family: var(--font-display); font-size: 30px; font-weight: 700; margin: 0 0 8px; }
.plan__desc { font-size: 15px; }
.plan__from {
    margin: 18px 0 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.plan__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--font-display); color: var(--ink); }
.plan__was {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--muted);
    line-height: 1;
}
.plan__was[hidden] { display: none !important; }
.plan__was s {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-underline-offset: 0;
}
.plan__now { display: flex; align-items: flex-start; }
.plan__currency { font-size: 22px; margin-top: 8px; }
.plan__price-value {
    font-size: 56px;
    line-height: 1;
    letter-spacing: -0.04em;
    display: inline-block;
    transform-origin: left center;
}
.plan__price-value.is-flipping { animation: price-flip 0.35s var(--ease); }
@keyframes price-flip {
    0% { transform: scale(1); opacity: 1; }
    45% { transform: scale(0.86); opacity: 0.35; }
    100% { transform: scale(1); opacity: 1; }
}
.plan__billed { font-size: 13px; color: var(--muted); margin: 4px 0 20px; }
.plan__includes {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
}
.plan__features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0 0 24px; flex: 1; }
.plan__features li { display: flex; gap: 10px; font-size: 14.5px; }
.plan__features svg { width: 16px; height: 16px; color: var(--indigo); flex-shrink: 0; margin-top: 3px; }
.pricing__team {
    max-width: 46ch;
    margin: 22px auto 0;
    text-align: center;
    font-size: 15px;
    color: var(--body);
}
.pricing__team strong { color: var(--ink); }
.pricing__more { display: flex; justify-content: center; margin: 28px 0 0; }
.pricing__note { text-align: center; color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.pricing__alts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 18px 0 0;
    font-size: 14px;
}
.pricing__alts a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.compare-toggle { gap: 10px; }
.compare-toggle__icon { display: inline-flex; }
.compare-toggle__icon svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.compare-toggle[aria-expanded="true"] .compare-toggle__icon svg { transform: rotate(180deg); }

.plan-compare { margin-top: 36px; }
.plan-compare[hidden] { display: none; }
.plan-compare__head { margin-bottom: 24px; }
.plan-compare__head h2 { font-size: clamp(32px, 4vw, 48px); }
.plan-compare__scroll {
    overflow-x: auto;
    border: 1px solid var(--ink);
    background: #fff;
}
.compare { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; }
.compare__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.compare th,
.compare td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    font-weight: 500;
    text-align: center;
    vertical-align: middle;
    background: #fff;
}
.compare thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 18px 16px;
    border-bottom: 0;
    background: var(--ink);
    color: #fff;
    text-align: center;
}
.compare thead .compare__col--featured { background: var(--indigo); }
.compare__plan {
    display: block;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.compare__tag {
    display: inline-block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ddd6fe;
}
.compare thead th:first-child,
.compare tbody th[scope="row"],
.compare tfoot th {
    text-align: left;
    min-width: 280px;
}
.compare tbody th[scope="row"],
.compare tfoot th {
    position: sticky;
    left: 0;
    z-index: 1;
}
.compare__group th {
    padding: 11px 18px;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    border-bottom: 1px solid var(--line);
    box-shadow: inset 3px 0 0 var(--indigo);
}
.compare__name { display: block; color: var(--ink); font-weight: 600; }
.compare__detail { display: block; margin-top: 3px; max-width: 36ch; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
.compare tbody td.compare__col--featured,
.compare tfoot td.compare__col--featured { background: #f6f3ff; }
.compare__cta th,
.compare__cta td {
    border-bottom: 0;
    padding: 18px 16px 20px;
}
.compare__cta .btn { height: 42px; }
.compare__yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--indigo);
    color: #fff;
}
.compare__yes svg { width: 14px; height: 14px; }
.compare__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.compare__no { color: #c4bfd0; font-size: 18px; line-height: 1; }
.compare__col-label { display: none; }
.compare__limit {
    display: inline-block;
    max-width: 16ch;
    padding: 5px 8px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
}

/* ---------- Reviews ---------- */
.reviews {
    background: var(--ink);
    color: var(--on-dark);
    padding: 120px 0;
    overflow: hidden;
}
.reviews__head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: 32px;
    align-items: end;
    margin-bottom: 40px;
}
.reviews .kicker { color: #c4b5fd; }
.reviews h2 {
    color: #fff;
    font-size: clamp(32px, 4.4vw, 52px);
    margin: 0 0 14px;
    max-width: 18ch;
    letter-spacing: -0.04em;
}
.reviews__lede {
    margin: 0;
    max-width: 46ch;
    color: var(--on-dark-muted);
    font-size: 16px;
    line-height: 1.6;
}
.reviews__score {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 220px;
}
.reviews__score strong {
    font-family: var(--font-display);
    font-size: 48px;
    letter-spacing: -0.05em;
    color: #fff;
    line-height: 1;
}
.reviews__score p {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--on-dark-muted);
    max-width: 16ch;
    line-height: 1.35;
}
.reviews__stars {
    display: inline-block;
    color: #a5b4fc;
    letter-spacing: 0.08em;
    font-size: 14px;
    line-height: 1;
}
.reviews__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 36px;
}
.reviews__metrics > div {
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.reviews__metrics strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(28px, 3vw, 36px);
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 4px;
}
.reviews__metrics span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-dark-muted);
}
.reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.review__label {
    align-self: flex-start;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c4b5fd;
}
.review__label--ink {
    border-color: var(--line);
    color: var(--indigo);
}
.review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 26px 26px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 100%;
    transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), background-color 0.25s var(--ease);
}
.review:hover {
    border-color: rgba(165, 180, 252, 0.4);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
    transform: translateY(-2px);
}
.review--feature {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "stars stars by"
        "quote quote by";
    gap: 12px 40px;
    align-items: start;
    padding: 36px 40px;
    background:
        linear-gradient(135deg, rgba(79, 70, 229, 0.22) 0%, rgba(255, 255, 255, 0.03) 48%),
        rgba(255, 255, 255, 0.04);
}
.review--feature .reviews__stars { grid-area: stars; }
.review--feature blockquote { grid-area: quote; }
.review--feature .review__by {
    grid-area: by;
    align-self: center;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    min-width: 180px;
}
.review blockquote {
    margin: 0;
    flex: 1;
}
.review blockquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: #fff;
}
.review--feature blockquote p {
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.3;
    max-width: 34ch;
}
.review__by {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}
.review__mark {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: var(--indigo);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}
.review__mark--2 { background: var(--violet); }
.review__mark--3 { background: #0ea5e9; }
.review__mark--4 { background: #0f766e; }
.review__mark--5 { background: #b45309; }
.review__mark--6 { background: #be185d; }
.review__by strong {
    display: block;
    font-size: 14px;
    color: #fff;
}
.review__by span span {
    font-size: 13px;
    color: var(--on-dark-muted);
}

/* ---------- FAQ ---------- */
.faq { background: var(--paper); padding: 120px 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
.faq__side h2 { font-size: clamp(30px, 4vw, 44px); }
.faq__side p { color: var(--body); }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    flex-shrink: 0;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); background: var(--lavender); }
.faq-item__icon svg { width: 14px; height: 14px; }
.faq-item__answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s var(--ease);
    color: var(--body);
}
.faq-item[open] .faq-item__answer { grid-template-rows: 1fr; }
.faq-item__answer > p {
    overflow: hidden;
    max-width: 560px;
    margin: 0;
    padding: 0 0 20px;
}

/* ---------- Final CTA ---------- */
.final-cta {
    background: var(--ink);
    color: #fff;
    padding: 120px 0;
    overflow: hidden;
}
.final-cta__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
.final-cta__copy h2 {
    color: #fff;
    font-size: clamp(42px, 6.4vw, 76px);
    margin-bottom: 16px;
}
.cta-word { display: inline-block; }
.final-cta__copy p {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 28px;
    max-width: 460px;
}
.final-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.final-cta__actions .btn--on-dark { animation: cta-glow 2.4s var(--ease) infinite; }
@keyframes cta-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08); }
}
.stage--cta {
    position: relative;
    height: 420px;
    overflow: hidden;
}
.frame--cta-main {
    position: absolute;
    inset: 0 0 12% 28%;
    width: auto;
    height: auto;
}
.frame--cta-side {
    position: absolute;
    inset: auto auto 0 0;
    width: 42%;
    height: 48%;
    z-index: 2;
    outline: 8px solid var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
    background: #07060d;
    color: var(--on-dark-muted);
    padding: 72px 0 0;
    overflow: hidden;
}
.footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
    gap: 48px;
    align-items: start;
}
.footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.footer__col-title {
    font-family: var(--font-sans);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 18px;
}
.footer__list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer__list a { color: var(--on-dark-muted); font-size: 15px; }
.footer__list a:hover { color: #fff; }
.footer__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
    font-size: 13.5px;
}
.footer__tagline { margin: 0; max-width: 220px; }
.footer__watermark {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(80px, 22vw, 320px);
    line-height: 0.76;
    letter-spacing: -0.07em;
    color: rgba(255, 255, 255, 0.07);
    text-align: center;
    text-transform: lowercase;
    padding: 160px 3vw 0;
    margin: 0;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
}

/* ---------- Scroll-driven motion ---------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        @keyframes reveal-up {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: none; }
        }
        @keyframes reveal-left {
            from { opacity: 0; transform: translateX(-32px); }
            to { opacity: 1; transform: none; }
        }
        @keyframes reveal-right {
            from { opacity: 0; transform: translateX(32px); }
            to { opacity: 1; transform: none; }
        }
        @keyframes stage-rise {
            from { opacity: 0.55; transform: translateY(28px) scale(0.985); }
            to { opacity: 1; transform: none; }
        }
        @keyframes pulse-border {
            from { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.45); }
            to { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0); }
        }
        @keyframes word-up {
            from { opacity: 0; transform: translateY(18px); }
            to { opacity: 1; transform: none; }
        }
        @keyframes watermark-in {
            from { opacity: 0.4; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        [data-reveal] {
            opacity: 0;
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
        .hero__bg img {
            animation: hero-ken linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }
        @keyframes hero-ken {
            from { transform: scale(1.08); }
            to { transform: scale(1.02); }
        }
        .plan:nth-child(1) { animation-delay: 0s; }
        .plan:nth-child(2) { animation-delay: 0.08s; }
        .plan:nth-child(3) { animation-delay: 0.16s; }
        .plan--featured {
            animation: reveal-up linear both, pulse-border 0.9s var(--ease) 0.4s 1;
            animation-timeline: view(), auto;
            animation-range: entry 0% entry 40%, normal;
        }
        .reviews__head,
        .reviews__metrics,
        .reviews__grid {
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
        .review:nth-child(2) { animation-range: entry 4% entry 42%; }
        .review:nth-child(3) { animation-range: entry 8% entry 44%; }
        .faq-item:nth-child(1) { animation-delay: 0s; }
        .faq-item:nth-child(2) { animation-delay: 0.05s; }
        .faq-item:nth-child(3) { animation-delay: 0.1s; }
        .faq-item:nth-child(4) { animation-delay: 0.15s; }
        .faq-item:nth-child(5) { animation-delay: 0.2s; }
        .faq-item {
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 30%;
        }
        .cta-word {
            animation: word-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
        .cta-word:nth-child(2) { animation-range: entry 6% entry 44%; }
        .cta-word:nth-child(3) { animation-range: entry 12% entry 48%; }
        .cta-word:nth-child(4) { animation-range: entry 18% entry 52%; }
        .cta-word:nth-child(5) { animation-range: entry 24% entry 56%; }
        .footer__watermark {
            animation: watermark-in linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 50%;
        }
        .product-hero__stage,
        .industry-hero__stage {
            animation: stage-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
        .feature-band__copy,
        .feature-band__stage,
        .industry__tile,
        .industry__example,
        .industry-not__inner,
        .product-meta__inner,
        .industry__close .container,
        .product__close .container {
            animation: reveal-up linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 35%;
        }
        .industry__tile:nth-child(2) { animation-range: entry 4% entry 38%; }
        .industry__tile:nth-child(3) { animation-range: entry 8% entry 42%; }
        .industry__tile:nth-child(4) { animation-range: entry 12% entry 46%; }
        .feature-band--flip .feature-band__stage { animation-name: reveal-left; }
        .feature-band:not(.feature-band--flip) .feature-band__stage { animation-name: reveal-right; }
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    :root { --gutter: 24px; }
    .proof__grid,
    .desk__panel,
    .final-cta__grid,
    .faq__grid { grid-template-columns: 1fr; gap: 36px; }
    .hero {
        min-height: 92vh;
        min-height: 92dvh;
    }
    .hero__content {
        padding: calc(var(--header-h) + 36px) var(--gutter) 56px;
    }
    .hero__title { max-width: 100%; }
    .mega__inner { max-width: min(720px, var(--container)); }
    .mega__features { grid-template-columns: 1fr; }
    .hero__bg img { object-position: 70% 40%; }
    .desk { padding: 72px var(--gutter); }
    .desk__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .proof__board {
        height: 420px;
    }
    .stage--desk,
    .stage--cta { min-height: 420px; }
    .pricing__grid { grid-template-columns: 1fr; }
    .reviews__head,
    .reviews__metrics,
    .reviews__grid,
    .review--feature {
        grid-template-columns: 1fr;
    }
    .review--feature {
        grid-template-areas:
            "stars"
            "quote"
            "by";
        gap: 16px;
        padding: 28px 24px;
    }
    .review--feature .review__by {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding-top: 16px;
        flex-direction: row;
        align-items: center;
        min-width: 0;
    }
    .footer__top { grid-template-columns: 1fr; }
    .footer__cols { grid-template-columns: 1fr 1fr; }
    .footer__meta { align-items: flex-start; text-align: left; }
}

@media (max-width: 980px) {
    .product__grid { grid-template-columns: 1fr; }
    .nav {
        padding: 0 var(--gutter);
        grid-template-columns: minmax(0, 1fr) auto;
        max-width: none;
    }
    .nav__brand { min-width: 0; }
    .nav__brand-logo {
        height: 36px;
        width: 138px;
    }
    .nav__links { display: none; }
    .nav__cta .btn--ghost { display: none; }
    .nav__cta .btn--primary { min-width: 0; padding: 0 14px; }
    .nav__toggle { display: inline-flex; }
    html.is-nav-open .site-header,
    .site-header:has(.nav.is-open) {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: #fff;
        border-bottom: 1px solid rgba(12, 10, 24, 0.08);
        box-shadow: 0 10px 30px rgba(12, 10, 24, 0.08);
    }
    .nav.is-open .nav__links {
        display: flex;
        position: fixed;
        top: var(--header-h);
        left: 0;
        right: 0;
        flex-direction: column;
        justify-content: flex-start;
        background: #fff;
        border: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 48px rgba(12, 10, 24, 0.12);
        backdrop-filter: none;
        padding: 6px var(--gutter) 16px;
        gap: 0;
        align-items: stretch;
        z-index: 80;
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav.is-open .nav__mobile-only { display: list-item; }
    .nav.is-open .nav__links > li {
        opacity: 1;
        transform: none;
    }
    .nav.is-open .nav__link,
    .nav.is-open .nav__link--btn,
    .site-header.is-scrolled .nav.is-open .nav__link,
    .site-header.is-scrolled .nav.is-open .nav__link--btn {
        color: var(--ink) !important;
        -webkit-text-fill-color: var(--ink) !important;
        width: 100%;
        min-height: 40px;
        justify-content: space-between;
        padding: 8px;
        border-radius: 8px;
        background: transparent;
        font-size: 14px;
    }
    .nav.is-open .nav__link:hover,
    .nav.is-open .nav__link--btn:hover,
    .nav.is-open .nav__item.is-open > .nav__link {
        color: var(--ink) !important;
        -webkit-text-fill-color: var(--ink) !important;
        background: rgba(12, 10, 24, 0.05);
    }
    .nav.is-open .nav__link::after { display: none; }
    .nav.is-open .nav__chevron {
        width: 12px;
        height: 12px;
    }
    .nav.is-open .nav__live { background: var(--indigo); }
    .nav.is-open .nav__mobile-cta {
        margin-top: 6px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }
    .nav.is-open .nav__mobile-cta .btn {
        width: 100%;
        height: 40px;
        justify-content: center;
        font-size: 14px;
    }
    .mega {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        width: auto;
        padding: 0 0 8px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: none;
        background: transparent;
    }
    .mega[hidden] { display: none !important; visibility: hidden; }
    .site-header.is-mega-open .mega,
    .nav__item.is-open .mega {
        display: block;
        visibility: visible;
    }
    .mega__inner {
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
        max-width: none;
    }
    .mega__body { display: block; }
    .mega__col {
        padding: 4px 0;
        border: 0;
        background: transparent;
    }
    .mega__col--products { border: 0; }
    .mega__col--more {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        background: transparent;
    }
    .mega__features,
    .mega__features--compact { grid-template-columns: 1fr; }
    .mega__col--products .mega__feature { grid-template-columns: 28px minmax(0, 1fr); }
    .mega__preview { display: none; }
    .nav.is-open .mega__label {
        margin: 0 0 4px;
        font-size: 11px;
    }
    .nav.is-open .mega__feature {
        padding: 8px;
        min-height: 40px;
        border-radius: 8px;
        gap: 8px;
    }
    .nav.is-open .mega__feature-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }
    .nav.is-open .mega__feature-copy strong { font-size: 13px; }
    .nav.is-open .mega__feature-copy span { font-size: 11px; }
    .mega__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 8px;
        padding: 10px;
    }
    .nav.is-open .nav-drop {
        position: static;
        min-width: 0;
        margin: 0 0 6px;
        padding: 0 0 2px;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .nav.is-open .nav-drop[hidden] { display: none !important; }
    .nav.is-open .nav-drop a {
        padding: 8px;
        min-height: 40px;
        border-radius: 8px;
    }
    .nav.is-open .nav-drop a strong { font-size: 13px; }
    .nav.is-open .nav-drop a span { font-size: 11px; }
}

@media (max-width: 420px) {
    .nav__brand-logo {
        height: 32px;
        width: 122px;
    }
    .nav__cta .btn--primary {
        height: 36px;
        padding: 0 10px;
        font-size: 12px;
    }
    .nav__toggle {
        width: 36px;
        height: 36px;
    }
    .nav.is-open .nav__link,
    .nav.is-open .nav__link--btn,
    .site-header.is-scrolled .nav.is-open .nav__link,
    .site-header.is-scrolled .nav.is-open .nav__link--btn {
        min-height: 36px;
        padding: 6px 8px;
        font-size: 13px;
    }
    .nav.is-open .mega__feature,
    .nav.is-open .nav-drop a {
        min-height: 36px;
        padding: 6px 8px;
    }
    .nav.is-open .mega__feature-copy strong,
    .nav.is-open .nav-drop a strong { font-size: 12px; }
    .nav.is-open .nav__mobile-cta .btn {
        height: 36px;
        font-size: 13px;
    }
}

@media (max-width: 720px) {
    :root { --gutter: 16px; --header-h: 64px; }
    .container { padding: 0 16px; }
    .proof, .pricing, .reviews, .faq, .final-cta { padding: 56px 0; }
    .reviews__grid { grid-template-columns: 1fr; }
    .reviews__metrics { grid-template-columns: 1fr; }
    .reviews__head { grid-template-columns: 1fr; align-items: start; }
    .hero {
        min-height: 88vh;
        min-height: 88dvh;
        align-items: flex-end;
    }
    .hero__content { padding: calc(var(--header-h) + 24px) var(--gutter) 40px; }
    .hero__title { font-size: clamp(36px, 11vw, 52px); max-width: none; }
    .hero__bg img { object-position: 75% 35%; }
    .hero__scrim {
        background:
            linear-gradient(180deg, rgba(12, 10, 24, 0.78) 0%, rgba(12, 10, 24, 0.35) 30%, rgba(12, 10, 24, 0.82) 100%),
            linear-gradient(90deg, rgba(12, 10, 24, 0.82) 0%, rgba(12, 10, 24, 0.42) 100%);
    }
    .bands { padding: 56px 0; }
    .band,
    .band--flip {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-bottom: 56px;
    }
    .band--flip .band__copy { order: 0; }
    .band__actions .btn { width: 100%; }
    .desk { padding: 56px var(--gutter); }
    .desk__tabs { grid-template-columns: 1fr; }
    .desk__tab { min-height: 44px; }
    .desk__tab > span { display: block; }
    .stage--desk { min-height: 0; }
    .proof__board {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 120px;
        gap: 8px;
        overflow: hidden;
    }
    .stage--cta {
        height: auto;
        min-height: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 140px;
        gap: 8px;
        overflow: hidden;
    }
    .stage--desk {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .frame--desk {
        aspect-ratio: 16 / 10;
        min-height: 200px;
    }
    .frame--a, .frame--b, .frame--c,
    .frame--cta-main,
    .frame--cta-side {
        position: relative;
        left: auto; right: auto; top: auto; bottom: auto;
        width: auto; height: auto;
        outline: 0;
        inset: auto;
    }
    .frame--a,
    .frame--b,
    .frame--c,
    .frame--cta-main,
    .frame--cta-side {
        height: 100%;
        min-height: 0;
    }
    .frame--a,
    .frame--cta-main,
    .frame--cta-side { grid-column: 1 / -1; }
    .frame--c { display: block; }
    .proof__stats { gap: 20px; }
    .footer__cols { grid-template-columns: 1fr; }
    .footer__watermark { padding-top: 72px; font-size: 22vw; }
    .btn--lg { width: 100%; }
    .hero__ctas {
        align-self: stretch;
        flex-direction: column;
        align-items: stretch;
    }
    .hero__ctas .btn,
    .final-cta__actions .btn { width: 100%; }
    .plan-compare__scroll {
        overflow: visible;
        border: 0;
    }
    .compare {
        display: block;
        min-width: 0;
    }
    .compare thead,
    .compare tbody,
    .compare tfoot { display: block; }
    .compare thead {
        position: sticky;
        top: var(--header-h);
        z-index: 3;
    }
    .compare tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .compare thead th:first-child { display: none; }
    .compare thead th,
    .compare tbody th[scope="row"],
    .compare tfoot th {
        position: static;
        min-width: 0;
    }
    .compare__group th,
    .compare tbody th[scope="row"],
    .compare tfoot th { grid-column: 1 / -1; }
    .compare th,
    .compare td {
        padding: 10px 8px;
        min-width: 0;
    }
    .compare__plan { font-size: 16px; }
    .compare__col-label {
        display: block;
        margin-bottom: 6px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    .compare__col--featured .compare__col-label { color: var(--indigo); }
    .compare__detail { max-width: none; }
    .compare__limit {
        max-width: none;
        padding: 4px 6px;
    }
    .compare__cta .btn {
        height: auto;
        min-height: 42px;
        padding: 8px 6px;
        font-size: 13px;
        white-space: normal;
    }
    .contact__card { padding: 20px; }
}

/* ---------- Legal pages ---------- */
body:has(.legal),
body:has(.contact) { background: var(--paper); }
.legal {
    background: var(--paper);
    color: var(--body);
    padding: 48px 0 120px;
}
.legal__wrap { max-width: 760px; }
.legal .kicker { color: var(--muted); }
.legal h1 {
    font-size: clamp(42px, 6vw, 68px);
    margin: 0 0 12px;
    color: var(--ink);
}
.legal__updated {
    color: var(--muted);
    margin: 0 0 28px;
}
.legal__switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 40px;
}
.legal__switch a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
}
.legal__switch a[aria-current="page"],
.legal__switch a[aria-current="page"]:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
.legal__body h2 {
    font-size: clamp(24px, 3vw, 32px);
    margin: 40px 0 12px;
}
.legal__body h3 {
    font-size: 18px;
    letter-spacing: -0.03em;
    margin: 28px 0 8px;
}
.legal__body p,
.legal__body li {
    font-size: 16.5px;
    line-height: 1.7;
}
.legal__body ul,
.legal__body ol {
    margin: 0 0 16px;
    padding-left: 1.25rem;
}
.legal__body li { margin: 0 0 8px; }
.legal__body li:last-child { margin-bottom: 0; }
.legal__body a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact {
    background: var(--paper);
    color: var(--body);
    padding: 48px 0 120px;
}
.contact__wrap { max-width: 880px; }
.contact__head { max-width: 40rem; margin: 0 0 36px; }
.contact .kicker { color: var(--muted); }
.contact h1 {
    font-size: clamp(42px, 6vw, 64px);
    margin: 0 0 12px;
    color: var(--ink);
}
.contact__lead {
    max-width: 36rem;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--body);
}
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 20px;
    align-items: stretch;
}
.contact__card {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(12, 10, 24, 0.05);
}
.contact__label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.contact__address {
    display: inline-block;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.contact__actions { margin-top: 22px; }
.contact__topics {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    display: grid;
    gap: 0;
}
.contact__topics li {
    padding: 16px 4px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.contact__topics li:last-child { border-bottom: 1px solid var(--line); }
.contact__topics strong {
    font-size: 16px;
    color: var(--ink);
}
.contact__topics span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--body);
}
.contact__aside {
    margin: 28px 0 0;
    color: var(--muted);
    font-size: 15px;
}
.contact__aside a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 720px) {
    .contact__grid { grid-template-columns: 1fr; }
}

/* ---------- Marketing pages ---------- */
body:has(.pitch),
body:has(.industry),
body:has(.product),
body:has(.pricing):not(:has(.hero)) { background: var(--paper); }
.pitch {
    background: var(--paper);
    color: var(--body);
    padding: 28px 0 120px;
}
.pitch__wrap { max-width: 920px; }
.pitch h1 {
    font-size: clamp(42px, 6vw, 68px);
    margin: 0 0 12px;
}
.pitch__lead {
    max-width: 40rem;
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.6;
}
.pitch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
}
.pitch__block { margin: 0 0 40px; }
.pitch__block h2,
.pitch__panel h2 { font-size: clamp(28px, 3vw, 36px); }
.pitch__note { color: var(--muted); font-size: 14px; }
.pitch__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 0 0 40px;
}
.pitch__panel {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--line);
    background: #fff;
}
.pitch__list,
.pitch__steps {
    margin: 0;
    padding-left: 1.2rem;
}
.pitch__list li,
.pitch__steps li { margin: 0 0 8px; }
.pitch__list li:last-child,
.pitch__steps li:last-child { margin-bottom: 0; }
.pitch__table-scroll {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--line);
    background: #fff;
}
.pitch__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}
.pitch__table th,
.pitch__table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-size: 15px;
}
.pitch__table th { color: var(--ink); font-weight: 600; }
.pitch__table thead th { background: var(--mist); }
.pitch__example {
    margin: 0 0 40px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    background: var(--mist);
}
.pitch__example blockquote { margin: 12px 0; }
.pitch__example blockquote p {
    margin: 0;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ink);
}
.pitch__example footer { color: var(--muted); font-size: 14px; }
.pitch strong { font-weight: 700; }
.demo-sheet {
    width: 100%;
    max-height: none;
    margin: 8px 0 0;
    box-shadow: none;
}
.pitch__close {
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.pitch__close .pitch__actions { margin: 0; }

.industry,
.product {
    background: #fff;
    color: var(--body);
    padding: 0 0 0;
}
.product-hero {
    padding: 72px 0 80px;
    background:
        radial-gradient(ellipse at 82% -8%, var(--plum-glow), transparent 48%),
        linear-gradient(180deg, var(--plum-deep) 0%, var(--plum-mid) 48%, #1a0b2e 100%);
    color: #fff;
}
.industry-hero {
    padding: 48px 0 72px;
    background: #fff;
}
.product-hero__inner,
.industry-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 48px;
    align-items: center;
}
.product-hero__inner:not(:has(.product-hero__stage)),
.industry-hero__inner:not(:has(.industry-hero__stage)) {
    grid-template-columns: minmax(0, 36rem);
}
.product-hero .kicker { color: #c4b5fd; }
.product-hero h1,
.industry-hero h1 {
    max-width: 14ch;
    margin: 0 0 14px;
    font-size: clamp(40px, 5.6vw, 64px);
}
.product-hero h1 { color: #fff; }
.product-hero__lead,
.industry-hero__lead {
    max-width: 34rem;
    margin: 0 0 24px;
    font-size: 18px;
    line-height: 1.6;
}
.product-hero__lead { color: rgba(255, 255, 255, 0.78); }
.product-hero__actions,
.industry-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.product-hero__stage,
.industry-hero__stage {
    position: relative;
    margin: 0;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 28px 64px rgba(12, 10, 24, 0.28);
}
.industry-hero__stage {
    padding: 28px 24px 36px;
    background: linear-gradient(160deg, #ffffff 0%, #eef1f6 52%, #e8ecf3 100%);
    border: 0;
    box-shadow: 0 28px 64px rgba(12, 10, 24, 0.07);
}
.product-hero__frame,
.industry-hero__frame {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(12, 10, 24, 0.08);
    background: #fff;
    box-shadow: 0 18px 48px rgba(12, 10, 24, 0.2);
}
.product-hero__frame img,
.industry-hero__frame img,
.feature-band__frame img {
    display: block;
    width: 100%;
    height: auto;
}
.feature-band {
    padding: 72px 0;
    background: #faf8f4;
    border-top: 0;
}
.feature-band:nth-of-type(even) { background: #fff; }
.feature-band__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}
.feature-band__inner:not(:has(.feature-band__stage)) {
    grid-template-columns: minmax(0, 40rem);
}
.feature-band--flip .feature-band__copy { order: 2; }
.feature-band--flip .feature-band__stage { order: 1; }
.feature-band__stage {
    margin: 0;
    padding: 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(12, 10, 24, 0.08);
}
.feature-band__frame {
    margin: 0;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(12, 10, 24, 0.06);
    background: #fff;
}
.feature-band h2 {
    margin: 0 0 12px;
    max-width: 18ch;
    font-size: clamp(28px, 3.4vw, 40px);
}
.feature-band__lead {
    max-width: 38rem;
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--body);
}
.feature-band .ticks { margin-top: 4px; }
.feature-band .ticks strong {
    display: inline;
    color: var(--ink);
}
.industry-problems {
    padding: 56px 0 24px;
    background: #f4f5f7;
}
.industry-problems h2 {
    margin: 0 0 20px;
    font-size: clamp(28px, 3vw, 36px);
}
.industry__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.industry__tile {
    margin: 0;
    padding: 22px;
    border: 1px solid var(--line);
    background: #fff;
}
.industry__tile h3 {
    margin: 0 0 8px;
    font-size: 18px;
}
.industry__tile p { margin: 0; }
.industry__example {
    margin: 0;
    padding: 48px 0;
    background: #f4f5f7;
    border-top: 1px solid rgba(12, 10, 24, 0.06);
}
.industry__label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.industry__example blockquote { margin: 12px 0; }
.industry__example blockquote p {
    margin: 0;
    max-width: 40rem;
    font-size: 22px;
    line-height: 1.45;
    color: var(--ink);
}
.industry__example footer { color: var(--muted); font-size: 14px; }
.industry-not,
.industry-faq,
.product-meta {
    padding: 72px 0;
    border-top: 1px solid var(--line);
    background: #faf8f4;
}
.industry-not h2,
.industry-faq h2 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3vw, 36px);
}
.product-meta h2 {
    margin: 0 0 16px;
    font-size: 20px;
    letter-spacing: -0.02em;
}
.product-meta__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.product-meta__card {
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.industry__list {
    margin: 0;
    padding-left: 1.2rem;
}
.industry__list li { margin: 0 0 8px; }
.product__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}
.product__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--body);
}
.product__list svg {
    width: 16px;
    height: 16px;
    color: var(--indigo);
    flex-shrink: 0;
    margin-top: 2px;
}
.product__related {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.product__related a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
}
.industry__close {
    padding: 64px 0 96px;
    border-top: 1px solid rgba(12, 10, 24, 0.06);
    background: #f4f5f7;
}
.industry__close h2 {
    margin: 0 0 12px;
    font-size: clamp(28px, 3vw, 36px);
}
.industry__close p {
    max-width: 36rem;
    margin: 0 0 20px;
}
.product__close {
    padding: 96px 0 112px;
    background:
        radial-gradient(ellipse at 50% -20%, var(--plum-glow), transparent 50%),
        linear-gradient(160deg, var(--plum-deep) 0%, var(--plum-mid) 55%, #1a0b2e 100%);
    text-align: center;
    color: #fff;
    border-top: 0;
}
.product__close h2 {
    margin: 0 0 28px;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #fff;
}
@media (max-width: 900px) {
    .product-hero__inner,
    .industry-hero__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .product-hero__stage,
    .industry-hero__stage {
        padding: 18px 16px 22px;
        border-radius: 22px;
    }
    .product-hero__frame,
    .industry-hero__frame {
        transform: none;
        border-radius: 12px;
    }
}
@media (max-width: 720px) {
    .pitch__split,
    .industry__grid,
    .feature-band__inner,
    .product-meta__inner { grid-template-columns: 1fr; }
    .feature-band--flip .feature-band__copy,
    .feature-band--flip .feature-band__stage { order: 0; }
    .pitch__actions .btn,
    .product-hero__actions .btn,
    .industry-hero__actions .btn { width: 100%; }
    .feature-band { padding: 48px 0; }
    .feature-band__stage { padding: 14px; border-radius: 18px; }
    .feature-band__frame { border-radius: 10px; }
    .product-hero { padding: 80px 0 56px; }
    .industry-hero { padding: 32px 0 48px; }
    .pitch h1,
    .industry-hero h1,
    .product-hero h1,
    .legal h1,
    .contact h1 { font-size: clamp(34px, 10vw, 52px); }
    .pitch__table-scroll {
        overflow: visible;
        border: 0;
    }
    .pitch__table {
        display: block;
        min-width: 0;
    }
    .pitch__table thead,
    .pitch__table tbody { display: block; }
    .pitch__table thead { position: sticky; top: var(--header-h); z-index: 2; }
    .pitch__table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .pitch__table thead th:first-child { display: none; }
    .pitch__table tbody th[scope="row"] {
        grid-column: 1 / -1;
        background: var(--mist);
    }
    .pitch__table th,
    .pitch__table td {
        min-width: 0;
        padding: 12px 10px;
        font-size: 14px;
        overflow-wrap: anywhere;
    }
    .pitch__table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
}

/* ---------- Rich industry template (Help Scout-inspired) ---------- */
.industry-r { background: #fff; }

.industry-r-hero {
    position: relative;
    margin-top: calc(var(--header-h) * -1);
    padding: calc(var(--header-h) + 48px) 0 88px;
    background:
        radial-gradient(ellipse at 82% 8%, var(--plum-glow), transparent 52%),
        linear-gradient(160deg, var(--plum-deep) 0%, var(--plum-mid) 55%, #1a0b2e 100%);
    overflow: hidden;
    color: #fff;
}
.industry-r-hero .kicker { color: #c4b5fd; }
.industry-r-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.55fr) minmax(0, 0.45fr);
    gap: 48px;
    align-items: center;
}
.industry-r-hero h1 {
    max-width: 14ch;
    margin: 10px 0 16px;
    font-size: clamp(44px, 6.4vw, 80px);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: #fff;
}
.industry-r-hero__lead {
    max-width: 36rem;
    margin: 0 0 28px;
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.industry-r-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}
.industry-r-hero__actions .btn--line {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.industry-r-hero__actions .btn--line:hover {
    background: #fff;
    color: var(--plum-deep);
}
.industry-r-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.industry-r-hero__badges li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.industry-r-hero__badge-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
}
.industry-r-hero__badge-icon svg { width: 16px; height: 16px; }

.industry-r-hero__stage {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0 0 0 24px;
}
.industry-r-hero__frame {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #fff;
    box-shadow: 0 28px 64px rgba(8, 4, 24, 0.45);
}
.industry-r-hero__frame img { display: block; width: 100%; height: auto; }
.industry-r-hero__overlay {
    position: absolute;
    z-index: 2;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(12, 10, 24, 0.08);
    box-shadow: 0 24px 56px rgba(8, 4, 24, 0.4);
}
.industry-r-hero__overlay img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* SaaS — screenshot peeks in from the right */
.industry-r-hero--saas .industry-r-hero__stage {
    margin-right: -80px;
    overflow: hidden;
}
.industry-r-hero--saas .industry-r-hero__stage::before {
    content: "";
    position: absolute;
    inset: 10% auto auto 20%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.35), transparent 70%);
    pointer-events: none;
}
.industry-r-hero--saas .industry-r-hero__frame {
    width: 150%;
    margin-right: -50%;
    border-radius: 18px 0 0 18px;
}
.industry-r-hero--saas .industry-r-hero__overlay {
    left: 8%;
    bottom: -18px;
    width: 46%;
    max-width: 280px;
    transform: rotate(-2deg);
}

/* Ecommerce — stacked tilted cards, amber accent */
.industry-r-hero--ecommerce .kicker { color: #fbbf24; }
.industry-r-hero--ecommerce {
    background:
        radial-gradient(circle at 78% 42%, rgba(251, 191, 36, 0.22), transparent 60%),
        linear-gradient(160deg, var(--plum-deep) 0%, var(--plum-mid) 55%, #1a0b2e 100%);
}
.industry-r-hero--ecommerce .industry-r-hero__inner {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
}
.industry-r-hero--ecommerce .industry-r-hero__stage {
    min-height: 420px;
    overflow: visible;
}
.industry-r-hero--ecommerce .industry-r-hero__frame {
    width: 108%;
    transform: rotate(6deg) translate(8%, 4%);
}
.industry-r-hero--ecommerce .industry-r-hero__overlay {
    left: -8%;
    bottom: 8%;
    width: 58%;
    max-width: 300px;
    transform: rotate(-3deg);
}

/* Agencies — full-bleed screenshot behind editorial text */
.industry-r-hero--agencies-it {
    min-height: 88vh;
    display: flex;
    align-items: center;
}
.industry-r-hero--agencies-it .industry-r-hero__bleed {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
}
.industry-r-hero--agencies-it .industry-r-hero__bleed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 40%;
}
.industry-r-hero--agencies-it .industry-r-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(26, 15, 54, 0.95) 0%, rgba(26, 15, 54, 0.72) 50%, rgba(26, 15, 54, 0.3) 100%);
}
.industry-r-hero--agencies-it .industry-r-hero__inner {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 0.56fr);
}
.industry-r-hero--agencies-it .kicker {
    color: #5eead4;
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(94, 234, 212, 0.55);
}
.industry-r-hero--agencies-it .industry-r-hero__badge-icon { color: #5eead4; }

.industry-r-trust {
    padding: 28px 0;
    background: #f1efe9;
    color: var(--ink);
    border-top: 1px solid rgba(12, 10, 24, 0.05);
    border-bottom: 1px solid rgba(12, 10, 24, 0.05);
}
.industry-r-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
}
.industry-r-trust__eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--indigo);
}
.industry-r-trust__line {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
}

.industry-r-problems {
    padding: 88px 0 64px;
    background: #fff;
}
.industry-r-problems__head {
    max-width: 48rem;
    margin: 0 0 32px;
}
.industry-r-problems__head h2 {
    margin: 0 0 12px;
    font-size: clamp(32px, 3.6vw, 44px);
    letter-spacing: -0.01em;
}
.industry-r-problems__head p {
    margin: 0;
    font-size: 17px;
    color: var(--body);
}
.industry-r-problems__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}
.industry-r-problems__tile {
    position: relative;
    margin: 0;
    padding: 28px 22px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.industry-r-problems__tile:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, 0.24);
    box-shadow: 0 18px 36px rgba(12, 10, 24, 0.08);
}
.industry-r-problems__index {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--indigo);
}
.industry-r-problems__tile h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--ink);
}
.industry-r-problems__tile p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--body);
}

.industry-r-outcome {
    padding: 96px 0;
    background: #fff;
    border-top: 1px solid rgba(12, 10, 24, 0.05);
}
.industry-r-outcome:nth-of-type(even) { background: #f6f7fb; }
.industry-r-outcome__inner {
    display: grid;
    gap: 48px;
}
.industry-r-outcome__head {
    max-width: 52rem;
}
.industry-r-outcome__eyebrow {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo);
}
.industry-r-outcome__head h2 {
    margin: 0 0 14px;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    max-width: 20ch;
}
.industry-r-outcome__lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    color: var(--body);
    max-width: 38rem;
}
.industry-r-outcome__stage {
    position: relative;
    margin: 0 auto;
    max-width: 1180px;
    padding: 14px;
    border-radius: 24px;
    background:
        linear-gradient(160deg, #ffffff 0%, #eef1f6 55%, #e4e8f0 100%);
    box-shadow: 0 28px 64px rgba(12, 10, 24, 0.1);
}
.industry-r-outcome__frame {
    position: relative;
    z-index: 1;
    margin: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(12, 10, 24, 0.08);
    background: #fff;
    box-shadow: 0 18px 40px rgba(12, 10, 24, 0.14);
}
.industry-r-outcome__frame img { display: block; width: 100%; height: auto; }
.industry-r-outcome__overlay {
    position: absolute;
    z-index: 2;
    right: -16px;
    bottom: -24px;
    width: 38%;
    max-width: 280px;
    margin: 0;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(12, 10, 24, 0.08);
    box-shadow: 0 24px 48px rgba(12, 10, 24, 0.22);
    transform: rotate(1.5deg);
}
.industry-r-outcome__overlay img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.industry-r-outcome__sub {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.industry-r-outcome__sub-tile {
    margin: 0;
    padding: 24px 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.industry-r-outcome:nth-of-type(even) .industry-r-outcome__sub-tile { background: #fff; }
.industry-r-outcome__sub-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(12, 10, 24, 0.08);
}
.industry-r-outcome__sub-icon {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--indigo);
}
.industry-r-outcome__sub-icon svg { width: 22px; height: 22px; }
.industry-r-outcome__sub-tile h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: var(--ink);
}
.industry-r-outcome__sub-tile p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--body);
}

.industry-r-quote {
    padding: 72px 0;
    background: #faf8f4;
    border-top: 1px solid rgba(12, 10, 24, 0.05);
    border-bottom: 1px solid rgba(12, 10, 24, 0.05);
}
.industry-r-quote__label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--indigo);
}
.industry-r-quote blockquote {
    margin: 0 0 14px;
    max-width: 44rem;
    border-left: 3px solid var(--indigo);
    padding-left: 20px;
}
.industry-r-quote blockquote p {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 30px);
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink);
}
.industry-r-quote footer {
    font-size: 14px;
    color: var(--muted);
    padding-left: 23px;
}

.industry-r-pillars {
    padding: 88px 0;
    background: #fff;
    border-top: 1px solid rgba(12, 10, 24, 0.05);
}
.industry-r-pillars__head { margin: 0 0 32px; max-width: 42rem; }
.industry-r-pillars__head h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 40px);
    letter-spacing: -0.01em;
}
.industry-r-pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.industry-r-pillars__tile {
    position: relative;
    margin: 0;
    padding: 28px 26px;
    border-radius: 20px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
    border: 1px solid var(--line);
}
.industry-r-pillars__icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--indigo);
}
.industry-r-pillars__icon svg { width: 22px; height: 22px; }
.industry-r-pillars__tile h3 {
    margin: 0 0 8px;
    font-size: 19px;
    color: var(--ink);
}
.industry-r-pillars__tile p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--body);
}

.industry-r-not { padding: 72px 0; background: #f6f7fb; border-top: 1px solid rgba(12, 10, 24, 0.05); }
.industry-r-not h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.01em; }
.industry-r-not p { margin: 0 0 16px; color: var(--body); font-size: 16px; }
.industry-r-not__list {
    margin: 0;
    padding-left: 1.2rem;
    max-width: 40rem;
}
.industry-r-not__list li {
    margin: 0 0 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
}

.industry-r-faq { padding: 88px 0; background: #fff; border-top: 1px solid rgba(12, 10, 24, 0.05); }
.industry-r-faq h2 { margin: 0 0 24px; font-size: clamp(28px, 3vw, 38px); letter-spacing: -0.01em; }

.industry-r-close {
    padding: 96px 0 112px;
    background:
        radial-gradient(ellipse at 50% -20%, var(--plum-glow), transparent 50%),
        linear-gradient(160deg, var(--plum-deep) 0%, var(--plum-mid) 55%, #1a0b2e 100%);
    text-align: center;
    color: #fff;
}
.industry-r-close h2 {
    margin: 0 0 28px;
    font-size: clamp(56px, 9vw, 128px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #fff;
}

@media (max-width: 1024px) {
    .industry-r-problems__grid { grid-template-columns: 1fr 1fr; }
    .industry-r-outcome__sub { grid-template-columns: 1fr 1fr; }
    .industry-r-pillars__grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .industry-r-hero__inner,
    .industry-r-hero--saas .industry-r-hero__inner,
    .industry-r-hero--ecommerce .industry-r-hero__inner,
    .industry-r-hero--agencies-it .industry-r-hero__inner { grid-template-columns: 1fr; gap: 40px; }
    .industry-r-hero--saas .industry-r-hero__stage { margin-right: 0; }
    .industry-r-hero--saas .industry-r-hero__frame { width: 120%; margin-right: -20%; }
    .industry-r-hero__overlay { left: 12px; bottom: -20px; max-width: 220px; }
    .industry-r-outcome__overlay { right: 12px; bottom: -20px; max-width: 220px; }
}
@media (max-width: 720px) {
    .industry-r-hero { padding: calc(var(--header-h) + 32px) 0 64px; }
    .industry-r-hero h1 { font-size: clamp(36px, 10vw, 52px); }
    .industry-r-hero__actions .btn { width: 100%; }
    .industry-r-hero--saas .industry-r-hero__frame { width: 100%; margin-right: 0; border-radius: 14px; }
    .industry-r-problems { padding: 56px 0 32px; }
    .industry-r-problems__grid { grid-template-columns: 1fr; }
    .industry-r-outcome { padding: 56px 0; }
    .industry-r-outcome__inner { gap: 32px; }
    .industry-r-outcome__stage { padding: 14px; border-radius: 20px; }
    .industry-r-outcome__sub { grid-template-columns: 1fr; }
    .industry-r-pillars { padding: 56px 0; }
    .industry-r-close { padding: 64px 0 80px; }
    .industry-r-close h2 { font-size: clamp(40px, 12vw, 72px); }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .industry-r-hero__stage,
        .industry-r-outcome__stage {
            animation: stage-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 40%;
        }
        .industry-r-problems__tile:nth-child(2) { animation-range: entry 4% entry 38%; }
        .industry-r-problems__tile:nth-child(3) { animation-range: entry 8% entry 42%; }
        .industry-r-problems__tile:nth-child(4) { animation-range: entry 12% entry 46%; }
        .industry-r-outcome__sub-tile:nth-child(2) { animation-range: entry 4% entry 38%; }
        .industry-r-outcome__sub-tile:nth-child(3) { animation-range: entry 8% entry 42%; }
        .industry-r-outcome__sub-tile:nth-child(4) { animation-range: entry 12% entry 46%; }
        .industry-r-outcome__sub-tile:nth-child(5) { animation-range: entry 16% entry 50%; }
        .industry-r-outcome__sub-tile:nth-child(6) { animation-range: entry 20% entry 54%; }
        .industry-r-pillars__tile:nth-child(2) { animation-range: entry 6% entry 40%; }
        .industry-r-pillars__tile:nth-child(3) { animation-range: entry 12% entry 46%; }
    }
}

/* ---------- Demo page (standalone /demo) ---------- */
.demo-page {
    background:
        radial-gradient(ellipse at 82% -8%, var(--plum-glow), transparent 48%),
        linear-gradient(180deg, var(--plum-deep) 0%, var(--plum-mid) 42%, #1a0b2e 100%);
}
.demo-page__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: flex-start;
    padding: 72px var(--gutter) 80px;
}
.demo-page__copy { max-width: 560px; }
.demo-page__copy h1 {
    margin: 10px 0 16px;
    font-size: clamp(40px, 5.2vw, 60px);
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: #fff;
}
.demo-page__lead {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.demo-page__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
.demo-page__points li {
    position: relative;
    padding: 14px 0 14px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 16px;
    line-height: 1.45;
    color: #fff;
}
.demo-page__points li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.demo-page__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c4b5fd;
}
.demo-page .kicker { color: #c4b5fd; }

.demo-page__panel { position: sticky; top: calc(var(--header-h) + 24px); }
.demo-page__card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 28px 28px 22px;
    box-shadow: 0 28px 64px rgba(26, 15, 54, 0.16);
}
.demo-page__card-title {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.4vw, 30px);
    letter-spacing: -0.02em;
    color: var(--ink);
}
.demo-page__card-lead {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
}
.demo-page__form .demo-modal__legend { display: none; }
.demo-page__card .demo-modal__grid { margin-bottom: 18px; }
.demo-page__card .demo-modal__field { min-width: 0; }
.demo-page__card input,
.demo-page__card select,
.demo-page__card textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--line);
    height: 46px;
    padding: 0 14px;
    font-size: 15px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.demo-page__card select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.demo-page__card textarea {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
}
.demo-page__card input:focus,
.demo-page__card select:focus,
.demo-page__card textarea:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.14);
}
.demo-page__card .btn--primary {
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-weight: 700;
}
.demo-page__card--success {
    text-align: left;
}
.demo-page__success-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    margin-bottom: 14px;
}
.demo-page__success-icon svg { width: 28px; height: 28px; }
.demo-page__card--success h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 30px); }

.demo-page__trust {
    padding: 56px 0 80px;
    background: #faf8f4;
    border-top: 1px solid var(--line);
}
.demo-page__trust-head { max-width: 36rem; margin: 0 0 28px; }
.demo-page__trust-head .kicker,
[data-top-dark] .demo-page .demo-page__trust-head .kicker { color: var(--indigo); }
.demo-page__trust-head h2 {
    margin: 8px 0 0;
    font-size: clamp(26px, 3vw, 36px);
    letter-spacing: -0.025em;
    color: var(--ink);
}
.demo-page__trust-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.demo-page__trust-grid > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}
.demo-page__trust-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--indigo);
    margin-bottom: 6px;
}
.demo-page__trust-icon svg { width: 20px; height: 20px; }
.demo-page__trust-grid strong { font-size: 15px; color: var(--ink); }
.demo-page__trust-grid span { font-size: 14px; line-height: 1.5; color: var(--body); }

@media (max-width: 1024px) {
    .demo-page__inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: calc(var(--header-h) + 36px) var(--gutter) 56px;
    }
    .demo-page__panel { position: static; }
}
@media (max-width: 720px) {
    .demo-page__inner {
        gap: 36px;
        padding: calc(var(--header-h) + 32px) 20px 56px;
    }
    .demo-page__copy h1 {
        margin: 10px 0 16px;
        font-size: clamp(32px, 9vw, 44px);
    }
    .demo-page__lead {
        margin: 0 0 24px;
        font-size: 16px;
    }
    .demo-page__points li {
        padding: 14px 0 14px 24px;
        font-size: 15px;
    }
    .demo-page__trust-grid { grid-template-columns: 1fr; gap: 16px; }
    .demo-page__trust { padding: 48px 0 64px; }
    .demo-page__trust-head { margin: 0 0 24px; }
    .demo-page__card { padding: 28px 20px 26px; border-radius: 16px; }
    .demo-page__card-title { margin: 0 0 10px; }
    .demo-page__card-lead { margin: 0 0 22px; }
    .demo-page__card .demo-modal__grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 22px;
    }
    .demo-page__card .demo-modal__field label { margin-bottom: 8px; }
    .demo-page__card .btn--primary { margin-top: 4px; }
}

/* ---------- Switch / mailbox cutover ---------- */
.switch-page { background: #faf8f4; }
.switch-page__hero {
    background:
        radial-gradient(ellipse at 82% -8%, var(--plum-glow), transparent 48%),
        linear-gradient(180deg, var(--plum-deep) 0%, var(--plum-mid) 42%, #1a0b2e 100%);
    padding: 72px 0 80px;
    color: #fff;
}
.switch-page__hero-inner { max-width: 44rem; }
.switch-page__hero .kicker { color: #c4b5fd; }
.switch-page__hero h1 {
    margin: 10px 0 16px;
    font-size: clamp(40px, 5.2vw, 64px);
    letter-spacing: -0.02em;
    line-height: 1.04;
    color: #fff;
}
.switch-page__lead {
    margin: 0 0 28px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.switch-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.switch-page__steps { padding: 72px 0 24px; }
.switch-page__section-head { max-width: 36rem; margin: 0 0 28px; }
.switch-page__section-head .kicker { color: var(--indigo); }
.switch-page__section-head h2 {
    margin: 8px 0 0;
    font-size: clamp(28px, 3.2vw, 40px);
    letter-spacing: -0.025em;
    color: var(--ink);
}
.switch-page__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    counter-reset: switch-step;
}
.switch-page__grid li {
    position: relative;
    padding: 22px 20px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-increment: switch-step;
}
.switch-page__grid li::before {
    content: counter(switch-step, decimal-leading-zero);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--indigo);
}
.switch-page__grid strong {
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--ink);
}
.switch-page__grid span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--body);
}
.switch-page__split { padding: 40px 0 80px; }
.switch-page__split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.switch-page__card {
    padding: 28px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.switch-page__card-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(79, 70, 229, 0.1);
    color: var(--indigo);
    margin-bottom: 14px;
}
.switch-page__card-icon svg { width: 18px; height: 18px; }
.switch-page__card--no .switch-page__card-icon {
    background: rgba(12, 10, 24, 0.06);
    color: var(--ink);
}
.switch-page__card h2 {
    margin: 0 0 18px;
    font-size: 22px;
    letter-spacing: -0.02em;
}
.switch-page__card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.switch-page__card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--body);
}
.switch-page__card li svg {
    width: 16px;
    height: 16px;
    color: var(--indigo);
    flex-shrink: 0;
    margin-top: 2px;
}
.switch-page__dash {
    width: 16px;
    flex-shrink: 0;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
}
.switch-page__close {
    padding: 96px 0 112px;
    background:
        radial-gradient(ellipse at 50% -20%, var(--plum-glow), transparent 50%),
        linear-gradient(160deg, var(--plum-deep) 0%, var(--plum-mid) 55%, #1a0b2e 100%);
    text-align: center;
    color: #fff;
}
.switch-page__close h2 {
    margin: 0 0 28px;
    font-size: clamp(48px, 8vw, 96px);
    letter-spacing: -0.04em;
    line-height: 0.95;
    color: #fff;
}
@media (max-width: 900px) {
    .switch-page__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .switch-page__hero { padding: 56px 0 56px; }
    .switch-page__hero h1 { font-size: clamp(34px, 10vw, 48px); }
    .switch-page__actions .btn { width: 100%; }
    .switch-page__grid,
    .switch-page__split-grid { grid-template-columns: 1fr; }
    .switch-page__close { padding: 64px 0 80px; }
    .switch-page__close h2 { font-size: clamp(36px, 12vw, 64px); }
}

.demo-inbox { background: transparent; }
.demo-inbox__inner { padding: 72px 0 96px; max-width: 840px; }
.demo-inbox__head { margin-bottom: 32px; }
.demo-inbox__head h1 { margin: 10px 0 12px; font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.03em; }
.demo-inbox__lead { margin: 0; max-width: 36rem; font-size: 17px; line-height: 1.55; color: var(--body); }
.demo-inbox__empty {
    display: grid;
    gap: 10px;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    max-width: 420px;
}
.demo-inbox__empty .btn { justify-self: start; margin-top: 8px; }
.demo-inbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.demo-inbox__row {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    gap: 10px;
}
.demo-inbox__who { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.demo-inbox__who strong { color: var(--ink); }
.demo-inbox__who a { color: var(--indigo); font-size: 14px; }
.demo-inbox__who span { margin-left: auto; font-size: 12px; color: var(--muted); }
.demo-inbox__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-inbox__meta span {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f4f2ec;
    font-size: 12px;
    color: var(--body);
}
.demo-inbox__row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }

/* ---------- Demo modal ---------- */
.demo-modal {
    width: min(680px, calc(100vw - 32px));
    max-height: min(860px, calc(100vh - 32px));
    margin: auto;
    padding: 28px 28px 22px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 24px 80px rgba(12, 10, 24, 0.28);
}
.demo-modal::backdrop { background: rgba(12, 10, 24, 0.62); }
.demo-modal h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.demo-modal__head { position: relative; padding-right: 40px; margin-bottom: 20px; }
.demo-modal__head > p:not(.kicker):not(.demo-modal__legend) { color: var(--body); margin: 0; }
.demo-modal__head > p.demo-modal__legend { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.demo-modal__req {
    color: #dc2626;
    font-weight: 700;
    text-decoration: none;
    cursor: help;
}
.demo-modal__close {
    position: absolute;
    top: 0;
    right: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
}
.demo-modal__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 16px;
}
.demo-modal__field--full { grid-column: 1 / -1; }
.demo-modal__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.demo-modal__field label span { font-weight: 500; color: var(--muted); }
.demo-modal input,
.demo-modal select,
.demo-modal textarea {
    width: 100%;
    height: 48px;
    padding: 0 12px;
    border: 1px solid var(--line);
    background: var(--mist);
    color: var(--ink);
    font: inherit;
    font-size: 15px;
}
.demo-modal textarea {
    height: auto;
    min-height: 88px;
    padding: 12px;
    resize: vertical;
}
.demo-modal input:focus,
.demo-modal select:focus,
.demo-modal textarea:focus {
    outline: 2px solid var(--indigo);
    outline-offset: 1px;
    border-color: var(--indigo);
}
.demo-modal [aria-invalid="true"] { border-color: #9f1239; }
.demo-modal__hint { margin: 6px 0 0; font-size: 13px; color: #9f1239; }
.demo-modal__error {
    margin: 0 0 12px;
    font-size: 14px;
    color: #9f1239;
}
.demo-modal__fine {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--muted);
}
.demo-modal__fine a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-modal__success[hidden],
.demo-modal__error[hidden],
.demo-modal__form[hidden] { display: none; }
.demo-modal__success h2 { margin-bottom: 8px; }
.demo-modal__success p { color: var(--body); }
.demo-modal__success ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}
.demo-modal__success li {
    position: relative;
    margin: 0 0 10px;
    padding-left: 18px;
    color: var(--body);
    font-size: 15px;
    line-height: 1.5;
}
.demo-modal__success li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    background: var(--indigo);
}
.demo-modal__success a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.demo-modal__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
@media (max-width: 640px) {
    .demo-modal { padding: 22px 18px 18px; }
    .demo-modal__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    [data-float] { transform: none !important; }
    .nav__brand-logo { transform: none !important; }
    .desk__tab.is-active .desk__progress b { animation: none; width: 100%; }
    .hero__in,
    .hero__channels,
    .hero__rotate > span,
    .cta-word,
    .plan__price-value,
    .final-cta__actions .btn--on-dark { animation: none !important; opacity: 1; transform: none; }
    .hero__bg img { transform: none !important; animation: none !important; }
    .desk__panel .desk__copy h3,
    .desk__panel .desk__copy > p,
    .desk__panel .ticks li,
    .desk__panel .stage { opacity: 1; transform: none; }
    .desk__tab.is-active .desk__progress b { animation: none; width: 100%; }
}