/* LIOS public-site marketing layer: home, bell-studio, trust,
   platform, faq, help, pricing, status and legal pages. Requires
   base.css to be loaded first (shared tokens/resets/components). */

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 80;
    padding: 11px 14px;
    border-radius: 14px;
    color: var(--paper-ink);
    background: var(--paper);
    transform: translateY(-160%);
    transition: transform 260ms var(--spring);
}

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

.skip-target {
    display: block;
    width: 1px;
    height: 1px;
    scroll-margin-top: 110px;
}

.sales-shell {
    width: var(--shell);
    margin: 0 auto;
    padding: 16px 0 90px;
}

.sales-trust-shell {
    width: min(1160px, calc(100% - 32px));
}

/* P2.14 (LIOS_FULL_AUDIT_2026-07-10.md): the audit asked to remove the
   artificial loader outright, not just shorten its timers - a static SSR
   page never had anything to wait for. The `.sales-loader` markup itself
   (app.py::render_public_home_page) has been deleted rather than just
   hidden here, so this selector is intentionally gone, not renamed. */

.sales-nav {
    position: sticky;
    top: 14px;
    z-index: 45;
    min-height: 68px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        ),
        #060607;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 18px 70px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sales-logo,
.sales-nav a,
.sales-button,
.sales-nav-cta {
    text-decoration: none;
}

.sales-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 48px;
    padding: 0 10px 0 6px;
    border-radius: 16px;
    color: var(--ink-strong);
    background: transparent;
    font-size: 1.04rem;
    font-weight: 780;
    letter-spacing: -0.04em;
    transition:
        background 260ms var(--ease),
        transform 260ms var(--ease);
}

.sales-logo:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

/* Wordmark, no icon/badge/gradient-clip: "LIOS" set bold and clean,
   sitting inside a very quiet glass plate (a slightly rounded panel with
   the same low-opacity monochrome wash used on the cards, so it never
   reads as a gray box). The plate has a continuous, slow diagonal sheen
   sweep (a real ambient animation, not just a hover state) and tilts in
   3D on pointer move via the same --tilt-x/--tilt-y system the rest of
   the site's cards use ([data-tilt] on the <a> in the HTML). On the home
   page the plate's border/glow picks up --growth (green) instead of
   white - the letters themselves stay pure white everywhere. */
.sales-logo {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    perspective: 600px;
}

.sales-logo:hover .sales-logo-word,
.sales-logo:focus-visible .sales-logo-word {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.1);
}

.sales-logo-word-text {
    position: relative;
    z-index: 2;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ink-strong);
}

.sales-logo-word-rule {
    display: none;
}

.sales-nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(8px, 1.4vw, 18px);
    min-width: 0;
}

.sales-nav-links a {
    color: rgba(247, 247, 242, 0.82);
    font-size: 0.88rem;
    font-weight: 620;
    white-space: nowrap;
    transition:
        color 320ms var(--ease),
        transform 320ms var(--ease);
}

.sales-nav-links a:hover {
    color: var(--growth);
    transform: translateY(-1px);
}

.sales-nav-cta,
.sales-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform 420ms var(--spring),
        background 420ms var(--ease),
        color 420ms var(--ease),
        border-color 420ms var(--ease);
}

.sales-nav-cta {
    min-height: 48px;
    padding: 0 18px;
    color: var(--paper-ink);
    background: var(--paper);
    font-size: 0.9rem;
    font-weight: 760;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 16px 50px rgba(255, 255, 255, 0.08);
}

.sales-nav-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

/* Persistent compact CTA shown in the collapsed mobile header, next to the
   hamburger toggle - the .sales-nav-cta inside .sales-nav-panel disappears
   whenever the panel is collapsed (the default state on phones), which was
   losing the primary CTA entirely until the menu is opened. This duplicate
   node shares the same .sales-nav-cta button styling and the same
   data-nav-cta hook (see setupAccountMenu() in public-site.js, which now
   syncs every matching node) so both stay in sync for signed-in/paid state;
   only one of the two is ever visible at a time (see the max-width: 900px
   rules below), so screen readers/keyboard users never see a duplicate. */
.sales-nav-cta-compact {
    display: none;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-profile-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.sales-profile-trigger {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    list-style: none;
    transition:
        color 320ms var(--ease),
        background 320ms var(--ease),
        border-color 320ms var(--ease),
        transform 320ms var(--ease);
}

.sales-profile-trigger::-webkit-details-marker {
    display: none;
}

.sales-profile-trigger::marker {
    content: "";
}

.sales-profile-trigger:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
    transform: translateY(-1px);
}

.sales-profile-trigger:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.24);
}

.sales-profile-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
}

.sales-profile-menu-card {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 50;
    display: grid;
    gap: 4px;
    width: min(220px, calc(100vw - 32px));
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.02)
        ),
        rgba(9, 9, 11, 0.97);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: top right;
    transition:
        opacity 200ms var(--ease),
        transform 200ms var(--ease);
}

.sales-profile-menu:focus-within .sales-profile-menu-card,
.sales-profile-menu[open] .sales-profile-menu-card {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.sales-profile-menu-title {
    margin: 4px 8px 6px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sales-profile-menu-links {
    display: grid;
    gap: 2px;
}

.sales-profile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 620;
    white-space: nowrap;
    transition:
        color 220ms var(--ease),
        background 220ms var(--ease);
}

.sales-profile-menu-links a:hover,
.sales-profile-menu-links a:focus-visible {
    color: var(--growth);
    background: var(--growth-soft);
}

.sales-profile-menu-links a.is-locked {
    color: var(--muted);
    font-style: italic;
}

/* Active nav state: the current page is always visibly highlighted so moving
   between pages never feels like an unrelated jump. */
.sales-nav-links a.is-active {
    position: relative;
    color: var(--ink-strong);
}

.sales-nav-links a.is-active::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: -8px;
    height: 2px;
    border-radius: 2px;
    background: var(--growth-strong);
}

/* Local cluster tab strip: shown under the main nav on pages that belong to
   the same topic (how-it-works, proof), so the sibling pages stay visible
   and one click away instead of hiding inside an inconsistent link list. */
.sales-cluster-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: var(--shell);
    max-width: 1360px;
    margin: 14px auto 0;
    padding: 0 4px;
}

.sales-cluster-pill {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.8);
    font-size: 0.82rem;
    font-weight: 640;
    white-space: nowrap;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.04);
    transition:
        color 220ms var(--ease),
        background 220ms var(--ease),
        border-color 220ms var(--ease),
        box-shadow 220ms var(--ease),
        transform 220ms var(--ease);
}

.sales-cluster-pill:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
    box-shadow: 0 10px 26px rgba(255, 255, 255, 0.14);
    transform: translateY(-1px);
}

.sales-cluster-pill.is-active {
    color: var(--paper-ink);
    background: var(--paper);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Account switcher: guest state vs authenticated state, populated by
   public-site.js from /api/auth/status and /api/account/profile. Both the
   nav trigger and the menu header avatar can hold either plain initials
   text or a real uploaded <img>; the image variant always fills the circle
   edge-to-edge so a picture never looks clipped or off-center. */
.sales-profile-avatar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a2a2c, #050506);
    color: #f7f7f2;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* The [hidden] attribute must always win over the .sales-profile-avatar
   class rule above, otherwise a guest visitor briefly sees the (empty)
   avatar's dark red gradient fill behind the guest icon. Attribute + class
   gives this the higher specificity it needs to actually hide the node. */
.sales-profile-avatar[hidden] {
    display: none;
}

.sales-profile-avatar img,
.sales-profile-menu-avatar img,
.sales-account-switch-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
}

.sales-profile-menu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 6px 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.sales-profile-menu-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #2a2a2c, #050506);
    color: #f7f7f2;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.sales-profile-menu-identity {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.sales-profile-menu-identity strong {
    color: var(--ink-strong);
    font-size: 0.86rem;
    font-weight: 720;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-profile-menu-identity span {
    color: var(--muted);
    font-size: 0.74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-profile-menu-identity em {
    color: rgba(247, 247, 242, 0.5);
    font-size: 0.7rem;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-account-switch-list {
    display: grid;
    gap: 2px;
    margin: 4px 0;
    padding-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* P2.11 (LIOS_FULL_AUDIT_2026-07-10.md): wraps the switch button plus its
   dedicated "forget this account" control, so they can sit side by side
   without the forget action ever triggering the switch navigation. */
.sales-account-switch-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

.sales-account-switch-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.84rem;
    text-align: left;
    cursor: pointer;
    transition: background 220ms var(--ease);
}

.sales-account-switch-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sales-account-switch-forget {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition:
        background 220ms var(--ease),
        color 220ms var(--ease);
}

.sales-account-switch-forget:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--ink);
}

.sales-account-switch-forget:focus-visible {
    outline: 2px solid var(--growth);
    outline-offset: 2px;
}

.sales-account-switch-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-account-switch-item .sales-account-switch-avatar {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
    color: var(--ink-strong);
    font-size: 0.66rem;
    font-weight: 800;
}

.sales-account-action {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 620;
    text-align: left;
    cursor: pointer;
    transition:
        color 220ms var(--ease),
        background 220ms var(--ease);
}

.sales-account-action:hover,
.sales-account-action:focus-visible {
    color: var(--growth);
    background: var(--growth-soft);
}

.sales-account-action-danger {
    color: var(--muted);
}

.sales-account-action-danger:hover,
.sales-account-action-danger:focus-visible {
    color: var(--ink-strong);
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 760px) {
    .sales-cluster-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sales-cluster-nav::-webkit-scrollbar {
        display: none;
    }
}

.sales-button:hover,
.sales-nav-cta:hover {
    transform: translateY(-2px) scale(1.01);
}

.sales-button:active,
.sales-nav-cta:active {
    transform: translateY(1px) scale(0.985);
}

.sales-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.sales-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 34px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.7);
    background: rgba(255, 255, 255, 0.06);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lead-shell {
    padding-bottom: 120px;
}

.lead-hero {
    min-height: calc(100dvh - 104px);
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(460px, 1.12fr);
    align-items: center;
    gap: clamp(28px, 4vw, 74px);
    padding: clamp(54px, 6vw, 88px) 0 clamp(48px, 6vw, 74px);
}

.lead-hero-copy {
    display: grid;
    gap: 22px;
    align-content: center;
}

.lead-hero h1 {
    margin: 0;
    max-width: 760px;
    color: var(--ink-strong);
    font-size: clamp(3.35rem, 5.45vw, 6.95rem);
    line-height: 0.88;
    letter-spacing: -0.085em;
    text-wrap: balance;
}

.sales-hero-text {
    margin: 0;
    max-width: 620px;
    color: rgba(247, 247, 242, 0.72);
    font-size: clamp(1.08rem, 1.45vw, 1.34rem);
    line-height: 1.45;
    text-wrap: pretty;
}

/* Spells out what the LIOS acronym stands for right under the hero kicker,
   before the headline, so first-time visitors are never left guessing. */
.sales-acronym-decode {
    margin: 0;
    max-width: 560px;
    color: rgba(247, 247, 242, 0.58);
    font-size: 0.86rem;
    line-height: 1.5;
    text-wrap: pretty;
}

.sales-acronym-decode strong {
    color: var(--ink-strong);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.lead-hero-note {
    width: min(520px, 100%);
    margin-top: 6px;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    color: rgba(247, 247, 242, 0.72);
    background: rgba(255, 255, 255, 0.055);
}

.lead-hero-note span,
.hero-floating-card span,
.lead-proof-strip span,
.impact-card span,
.engine-panel > span,
.feature-mosaic article > span,
.sales-pricing-card > span,
.safety-stack span,
.sales-final > span,
.sales-trust-note span,
.sales-trust-matrix span,
.sales-trust-gates span,
.sales-review-state span {
    color: rgba(247, 247, 242, 0.52);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lead-hero-note strong {
    font-weight: 680;
}

.lead-hero-visual {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    min-width: 0;
    perspective: 1300px;
}

.hero-glass-frame {
    position: relative;
    overflow: hidden;
    padding: clamp(10px, 1vw, 14px);
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 42px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.05)
        ),
        rgba(255, 255, 255, 0.065);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 36px 140px rgba(0, 0, 0, 0.56);
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

.hero-glass-frame::before {
    content: "";
    position: absolute;
    inset: -45% -20%;
    background: linear-gradient(
        115deg,
        transparent 24%,
        rgba(255, 255, 255, 0.22) 48%,
        transparent 68%
    );
    transform: translateX(-36%) rotate(8deg);
    animation: frame-shine 6200ms var(--ease) infinite;
    pointer-events: none;
}

.hero-window-top {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: rgba(247, 247, 242, 0.55);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-window-top i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
}

.hero-window-top span {
    margin-left: auto;
}

.hero-glass-frame img {
    width: 100%;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 24px 90px rgba(0, 0, 0, 0.36);
}

.hero-floating-card {
    position: absolute;
    display: grid;
    gap: 4px;
    max-width: 280px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.065)
        ),
        rgba(10, 10, 12, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 22px 70px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.hero-floating-card strong {
    font-size: clamp(1.1rem, 1.8vw, 1.7rem);
    letter-spacing: -0.05em;
}

.hero-floating-card small {
    color: var(--muted);
    line-height: 1.35;
}

.hero-card-top {
    top: 88px;
    right: -18px;
}

.hero-card-bottom {
    left: -24px;
    bottom: 58px;
}

/* Compact monochrome "queue" mockup living inside the hero glass frame -
   replaces the old full-bleed centered hero with a bounded, content-sized
   visual so the first screen never feels empty or taller than its copy. */
.hero-queue-mock {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    padding: 22px 22px 24px;
    border-radius: 26px;
}

.hero-queue-mock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(247, 247, 242, 0.62);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-queue-mock-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.hero-queue-mock-head strong {
    color: var(--ink-strong);
    font-family: var(--font);
    font-size: 1.05rem;
    letter-spacing: -0.03em;
}

.hero-queue-mock-live {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
    animation: home-caret-blink 1700ms ease-in-out infinite;
}

.hero-queue-mock-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    transition:
        transform 320ms var(--ease),
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.hero-queue-mock-row:hover {
    transform: translateX(4px);
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.08);
}

.hero-queue-mock-row b {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--paper-ink);
    font-size: 0.66rem;
    font-weight: 780;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero-queue-mock-row span {
    min-width: 0;
    overflow: hidden;
    color: rgba(247, 247, 242, 0.82);
    font-size: 0.86rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hero-queue-mock-row.is-muted b {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(247, 247, 242, 0.6);
}

.hero-queue-mock-row.is-muted span {
    color: rgba(247, 247, 242, 0.42);
}

.hero-queue-mock-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 52px;
    margin-top: 4px;
    padding-top: 8px;
}

.hero-queue-mock-bars i {
    flex: 1;
    height: var(--h, 40%);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.92),
        rgba(255, 255, 255, 0.2)
    );
    animation: hero-bar-breathe 3400ms var(--ease) infinite alternate;
}

.hero-queue-mock-bars i:nth-child(2) {
    animation-delay: 180ms;
}

.hero-queue-mock-bars i:nth-child(3) {
    animation-delay: 360ms;
}

.hero-queue-mock-bars i:nth-child(4) {
    animation-delay: 540ms;
}

.hero-queue-mock-bars i:nth-child(5) {
    animation-delay: 720ms;
}

.hero-queue-mock-bars i:nth-child(6) {
    animation-delay: 900ms;
}

.hero-queue-mock-bars i:nth-child(7) {
    animation-delay: 1080ms;
}

@media (max-width: 760px) {
    .hero-queue-mock-row span {
        font-size: 0.8rem;
    }
}

.micro-bars,
.engine-map,
.engine-meter,
.message-stack,
.tile-queue,
.chart-columns,
.verdict-grid,
.learning-rings {
    display: flex;
    align-items: end;
    gap: 8px;
}

.micro-bars i {
    width: 42px;
    height: 8px;
    border-radius: 99px;
    background: var(--paper);
    opacity: 0.92;
}

.micro-bars i:nth-child(2) {
    width: 30px;
    opacity: 0.62;
}

.micro-bars i:nth-child(3) {
    width: 18px;
    opacity: 0.38;
}

.lead-proof-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0 clamp(92px, 10vw, 150px);
}

.lead-proof-strip article,
.impact-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.sales-request-panel,
.sales-trust-note,
.sales-trust-matrix article,
.sales-trust-columns article,
.sales-trust-gates article,
.sales-review-state,
.sales-trust-section,
.proof-shot,
.proof-reel-frame,
.proof-reel-scene,
.chart-glass,
.engine-console {
    border: 1px solid rgba(255, 255, 255, 0.11);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.016)
        ),
        rgba(255, 255, 255, 0.02);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 24px 100px rgba(0, 0, 0, 0.3);
}

.lead-proof-strip article {
    min-height: 160px;
    display: grid;
    align-content: space-between;
    gap: 18px;
    padding: 22px;
    border-radius: 28px;
}

.lead-proof-strip strong {
    display: block;
    color: var(--ink-strong);
    font-size: clamp(2rem, 3.6vw, 4rem);
    letter-spacing: -0.08em;
    line-height: 0.92;
}

.lead-proof-strip p,
.impact-card p,
.feature-mosaic p,
.engine-panel p,
.sales-pricing-card li,
.sales-pricing-card small,
.safety-stack strong,
.sales-trust-note p,
.sales-trust-matrix p,
.sales-trust-section p,
.sales-trust-section li,
.sales-request-field small,
.sales-request-result,
.proof-shot figcaption span,
.proof-reel-hero-shot figcaption span,
.proof-reel-scene p {
    color: var(--muted);
    line-height: 1.55;
}

.proof-reel-stage,
.proof-reel-cut,
.sales-trust-section {
    margin-top: clamp(96px, 11vw, 172px);
}

.lead-section-copy {
    display: grid;
    gap: 18px;
    margin-bottom: 34px;
}

.lead-section-center {
    justify-items: center;
    text-align: center;
    margin-inline: auto;
}

.lead-section-copy h2,
.sales-trust-hero h1,
.sales-trust-section h2,
.sales-final h2,
.sales-pricing h2 {
    margin: 0;
    max-width: 960px;
    color: var(--ink-strong);
    font-size: clamp(2.8rem, 5.2vw, 6.6rem);
    line-height: 0.92;
    letter-spacing: -0.08em;
    text-wrap: balance;
}

.lead-section-copy p:not(.sales-kicker),
.sales-section-head p,
.sales-final p,
.sales-trust-hero .sales-hero-text,
.sales-trust-section > div > p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.24vw, 1.2rem);
    line-height: 1.62;
    text-wrap: pretty;
}

.impact-board {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr 0.7fr;
    grid-auto-rows: minmax(220px, auto);
    gap: 16px;
}

.impact-card {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: space-between;
    gap: 18px;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 34px;
}

/* Hover feedback is a plain, non-tracking lift: no light or glow follows
   the cursor. Border brightens and the card lifts slightly instead. */
.impact-card:hover,
.feature-mosaic article:hover,
.sales-pricing-card:hover,
.engine-console:hover,
.chart-glass:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 30px 90px rgba(0, 0, 0, 0.4);
}

.impact-card,
.feature-mosaic article,
.sales-pricing-card,
.engine-console,
.chart-glass {
    transition:
        transform 320ms var(--spring),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease);
}

.impact-card-large {
    grid-row: span 2;
    min-height: 456px;
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(255, 255, 255, 0.9),
            transparent 18rem
        ),
        #ffffff;
}

.impact-card-large span,
.impact-card-large p {
    color: rgba(7, 7, 8, 0.58);
}

.impact-card h3 {
    margin: 0;
    max-width: 680px;
    font-size: clamp(2.1rem, 3.6vw, 4.8rem);
    line-height: 0.94;
    letter-spacing: -0.075em;
}

.impact-card strong {
    color: var(--ink-strong);
    font-size: clamp(3.2rem, 6vw, 7rem);
    line-height: 0.86;
    letter-spacing: -0.09em;
}

.impact-card-large strong,
.impact-card-large h3 {
    color: var(--paper-ink);
}

.impact-equation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.impact-equation b {
    padding: 12px 14px;
    border-radius: 999px;
    color: var(--paper-ink);
    background: rgba(7, 7, 8, 0.08);
}

.impact-equation i {
    width: 42px;
    height: 1px;
    background: rgba(7, 7, 8, 0.28);
}

.engine-console {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
    gap: 18px;
    padding: clamp(16px, 2vw, 24px);
    border-radius: 42px;
}

.engine-console-left,
.engine-console-stage {
    position: relative;
    z-index: 1;
}

.engine-console-left {
    display: grid;
    gap: 18px;
}

.engine-main-button {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 14px 24px;
    border-radius: 28px;
    color: var(--paper-ink);
    background: var(--paper);
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 20px 70px rgba(255, 255, 255, 0.09);
    transition: transform 420ms var(--spring);
}

.engine-main-button span {
    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 820;
    letter-spacing: -0.05em;
}

.engine-main-button i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--paper);
    background: var(--paper-ink);
    font-style: normal;
}

.engine-main-button:hover {
    transform: translateY(-2px) scale(1.01);
}

.engine-main-button.is-running {
    animation: prepare-pulse 900ms var(--ease);
}

.engine-step-list {
    display: grid;
    gap: 10px;
}

.engine-step-list button {
    display: grid;
    gap: 5px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    color: var(--ink);
    text-align: left;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
    transition:
        transform 360ms var(--spring),
        background 360ms var(--ease),
        border-color 360ms var(--ease);
}

.engine-step-list button strong {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 520;
}

.engine-step-list button.is-active {
    border-color: rgba(255, 255, 255, 0.34);
    color: var(--paper-ink);
}

.engine-step-list button.is-active span,
.engine-step-list button.is-active strong {
    color: var(--paper-ink);
}

.engine-console-stage {
    min-height: 620px;
    border-radius: 32px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 74% 18%,
            rgba(255, 255, 255, 0.16),
            transparent 18rem
        ),
        rgba(5, 5, 6, 0.46);
}

.engine-panel {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: space-between;
    gap: 24px;
    padding: clamp(28px, 4vw, 54px);
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.98);
    pointer-events: none;
    transition:
        opacity 560ms var(--ease),
        transform 560ms var(--ease);
}

.engine-panel.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.engine-panel h3 {
    max-width: 760px;
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(2.5rem, 5.5vw, 6.4rem);
    line-height: 0.9;
    letter-spacing: -0.08em;
}

.engine-panel p {
    max-width: 680px;
    margin: 0;
    font-size: 1.05rem;
}

/* Compact modifier: same engine-console/engine-panel interaction pattern as
   the request-demo hero console, scaled down for use as an inline
   explainer widget inside a regular content section (method loop, product
   tour walkthrough) instead of a full hero moment. */
.engine-console-compact .engine-console-stage {
    min-height: 420px;
}

.engine-console-compact .engine-panel {
    gap: 16px;
    padding: clamp(22px, 3vw, 34px);
}

.engine-console-compact .engine-panel span {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.engine-console-compact .engine-panel h3 {
    max-width: 520px;
    font-size: clamp(1.5rem, 2.4vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.engine-console-compact .engine-panel p {
    max-width: 52ch;
    font-size: 0.94rem;
    line-height: 1.5;
}

.engine-console-compact .engine-panel img {
    width: 100%;
    max-height: 260px;
    border-radius: 20px;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

@media (max-width: 760px) {
    .engine-console-compact .engine-console-stage {
        min-height: 360px;
    }

    .engine-console-compact .engine-panel img {
        max-height: 200px;
    }
}

/* Media modifier: same engine-console/engine-panel interaction pattern,
   but the stage is dominated by a full-bleed screenshot instead of large
   headline typography (video-tour style walkthrough on /pilot-reel). */
.engine-console-media .engine-panel {
    align-content: start;
    gap: 18px;
}

.engine-console-media .engine-panel span {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.engine-console-media .engine-panel img {
    width: 100%;
    max-height: 420px;
    border-radius: 24px;
    object-fit: cover;
    object-position: top;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.engine-console-media .engine-panel p {
    max-width: 60ch;
    font-size: 0.98rem;
}

@media (max-width: 760px) {
    .engine-console-media .engine-panel img {
        max-height: 240px;
    }
}

.engine-map {
    align-items: center;
    height: 160px;
}

.engine-map i {
    flex: 1;
    min-width: 42px;
    height: clamp(36px, 8vw, 92px);
    border-radius: 24px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.94),
        rgba(255, 255, 255, 0.28)
    );
    animation: map-float 2600ms var(--ease) infinite alternate;
}

.engine-map i:nth-child(2) {
    animation-delay: 120ms;
    opacity: 0.84;
}
.engine-map i:nth-child(3) {
    animation-delay: 240ms;
    opacity: 0.68;
}
.engine-map i:nth-child(4) {
    animation-delay: 360ms;
    opacity: 0.52;
}
.engine-map i:nth-child(5) {
    animation-delay: 480ms;
    opacity: 0.36;
}

.engine-meter {
    align-items: center;
    height: 180px;
}

.engine-meter i {
    flex: 1;
    height: 16px;
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 0 0 46px rgba(255, 255, 255, 0.22);
}

.engine-meter i:nth-child(1) {
    transform: translateY(-48px) scaleX(0.72);
}
.engine-meter i:nth-child(2) {
    transform: scaleX(0.56);
    opacity: 0.72;
}
.engine-meter i:nth-child(3) {
    transform: translateY(48px) scaleX(0.86);
    opacity: 0.52;
}

.verdict-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.verdict-grid b {
    min-height: 120px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    color: var(--paper-ink);
    background: var(--paper);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
}

.verdict-grid b:nth-child(even) {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
}

.message-stack {
    display: grid;
    gap: 12px;
    align-items: initial;
}

.message-stack i {
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.message-stack i:nth-child(1) {
    width: 86%;
    background: var(--paper);
}
.message-stack i:nth-child(2) {
    width: 74%;
}
.message-stack i:nth-child(3) {
    width: 66%;
}
.message-stack i:nth-child(4) {
    width: 52%;
}

.learning-rings {
    position: relative;
    min-height: 220px;
    align-items: center;
    justify-content: center;
}

.learning-rings i {
    position: absolute;
    width: 210px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    animation: ring-spin 9000ms linear infinite;
}

.learning-rings i:nth-child(2) {
    width: 150px;
    animation-duration: 7000ms;
    animation-direction: reverse;
}

.learning-rings i:nth-child(3) {
    width: 86px;
    background: var(--paper);
    border-color: transparent;
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.24);
}

.feature-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(250px, auto);
    gap: 16px;
}

.feature-mosaic article {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: space-between;
    gap: 18px;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: 32px;
    transition:
        transform 440ms var(--spring),
        border-color 440ms var(--ease);
}

.feature-mosaic article:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.24);
}

.feature-mosaic h3,
.sales-pricing-card h3,
.sales-trust-matrix strong,
.sales-trust-note strong,
.sales-trust-gates strong,
.safety-stack strong {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.35rem, 2vw, 2.1rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.feature-tile-large {
    grid-column: span 2;
    grid-row: span 2;
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 75% 0%,
            rgba(255, 255, 255, 0.9),
            transparent 18rem
        ),
        #ffffff !important;
}

.feature-tile-large span,
.feature-tile-large p,
.feature-tile-large h3 {
    color: var(--paper-ink) !important;
}

.feature-tile-large h3 {
    font-size: clamp(2.6rem, 4.5vw, 5.6rem);
}

.feature-tile-dark {
    grid-column: span 2;
}

.tile-queue {
    gap: 12px;
    align-items: center;
}

.tile-queue b {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: var(--paper);
    background: var(--paper-ink);
    font-size: 2rem;
}

.tile-queue i {
    height: 18px;
    flex: 1;
    border-radius: 999px;
    background: rgba(7, 7, 8, 0.18);
}

.chart-glass {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 42px;
}

.chart-axis {
    display: flex;
    justify-content: space-between;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.chart-columns {
    position: relative;
    z-index: 1;
    min-height: clamp(360px, 46vw, 540px);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 14px;
    padding-top: 44px;
}

.chart-columns div {
    display: grid;
    gap: 12px;
    align-content: end;
}

.chart-columns i {
    display: block;
    min-height: 80px;
    border-radius: 28px 28px 10px 10px;
    transform-origin: bottom;
    transform: scaleY(0.16);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 255, 255, 0.16)
        ),
        rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.14);
    transition: transform 1200ms var(--ease);
}

.is-visible .chart-columns div:nth-child(1) i {
    transform: scaleY(0.95);
}
.is-visible .chart-columns div:nth-child(2) i {
    transform: scaleY(0.62);
    transition-delay: 90ms;
}
.is-visible .chart-columns div:nth-child(3) i {
    transform: scaleY(0.78);
    transition-delay: 180ms;
}
.is-visible .chart-columns div:nth-child(4) i {
    transform: scaleY(0.54);
    transition-delay: 270ms;
}
.is-visible .chart-columns div:nth-child(5) i {
    transform: scaleY(0.86);
    transition-delay: 360ms;
}

.chart-columns b {
    color: var(--ink-strong);
    letter-spacing: -0.04em;
}

.chart-columns span {
    color: var(--muted-2);
    font-size: 0.86rem;
}

.chart-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 45%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.56),
        transparent
    );
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1300ms var(--ease) 300ms;
}

.is-visible .chart-line {
    transform: scaleX(1);
}

.proof-gallery-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 16px;
    align-items: stretch;
}

.proof-shot {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    margin: 0;
    overflow: hidden;
    display: grid;
    gap: 0;
    border-radius: 34px;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 520ms var(--spring),
        border-color 420ms var(--ease);
}

.proof-shot-large {
    grid-row: span 2;
}

.proof-shot img {
    width: 100%;
    height: 100%;
    min-height: 270px;
    object-fit: cover;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.proof-shot figcaption {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
}

.proof-shot figcaption strong {
    color: var(--ink-strong);
    font-size: 1.05rem;
}

.proof-reel-stage {
    display: grid;
    gap: 24px;
}

.proof-reel-frame {
    display: grid;
    grid-template-columns: minmax(0, 1.24fr) minmax(260px, 0.76fr);
    gap: 16px;
    overflow: hidden;
    padding: clamp(16px, 2vw, 22px);
    border-radius: 36px;
}

.proof-reel-hero-shot {
    margin: 0;
    overflow: hidden;
    display: grid;
    align-content: stretch;
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.22);
}

.proof-reel-hero-shot img {
    width: 100%;
    height: 100%;
    min-height: 520px;
    object-fit: cover;
}

.proof-reel-hero-shot figcaption {
    display: grid;
    gap: 6px;
    padding: 18px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.proof-reel-hero-shot figcaption strong,
.proof-reel-scene strong {
    color: var(--ink-strong);
}

.proof-reel-sequence {
    display: grid;
    gap: 12px;
}

.proof-reel-scene {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 144px;
    padding: 20px;
    border-radius: 26px;
}

.proof-reel-scene span {
    color: rgba(247, 247, 242, 0.62);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.proof-reel-scene strong {
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    letter-spacing: -0.035em;
}

.proof-reel-scene p {
    margin: 0;
}

.sample-report-hero {
    align-items: stretch;
}

.sample-report-note {
    min-height: 100%;
}

.sample-report-scoreboard {
    display: grid;
    grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
    gap: 16px;
}

.sample-report-score,
.sample-report-metrics article,
.sample-report-flow article,
.sample-report-decision,
.sample-report-boundary-grid article {
    border: 1px solid rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.125),
            rgba(255, 255, 255, 0.045)
        ),
        rgba(255, 255, 255, 0.052);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        0 24px 100px rgba(0, 0, 0, 0.3);
}

.sample-report-score {
    display: grid;
    align-content: space-between;
    gap: 18px;
    min-height: 320px;
    padding: clamp(24px, 3vw, 38px);
    border-radius: 34px;
}

.sample-report-score span,
.sample-report-metrics span,
.sample-report-flow span,
.sample-report-decision .sales-kicker,
.sample-report-boundary-grid span {
    color: rgba(247, 247, 242, 0.58);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sample-report-score strong {
    color: var(--paper);
    font-size: clamp(4rem, 9vw, 8.5rem);
    letter-spacing: -0.1em;
    line-height: 0.86;
}

.sample-report-score p,
.sample-report-metrics p,
.sample-report-flow p,
.sample-report-decision p,
.sample-report-decision li,
.sample-report-boundary-grid p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.sample-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sample-report-metrics article,
.sample-report-flow article,
.sample-report-boundary-grid article {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 20px;
    border-radius: 26px;
}

.sample-report-metrics strong {
    color: var(--ink-strong);
    font-size: clamp(2rem, 4vw, 4.25rem);
    letter-spacing: -0.08em;
    line-height: 0.9;
}

.sample-report-flow,
.sample-report-boundary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.sample-report-flow strong,
.sample-report-boundary-grid strong {
    color: var(--ink-strong);
    font-size: clamp(1.05rem, 1.5vw, 1.28rem);
    letter-spacing: -0.035em;
    line-height: 1.12;
}

.sample-report-decision {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.74fr);
    align-items: start;
    gap: clamp(22px, 4vw, 54px);
    padding: clamp(24px, 4vw, 48px);
    border-radius: 34px;
}

.sample-report-decision h2 {
    margin: 8px 0 16px;
    color: var(--ink-strong);
    font-size: clamp(2.3rem, 4.5vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.08em;
    text-wrap: balance;
}

.sample-report-decision ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sample-report-decision li {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sample-report-decision li:last-child {
    border-bottom: 0;
}

.sample-report-boundary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.proof-reel-cut {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lead-safety {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 22px;
    align-items: start;
}

.safety-stack {
    display: grid;
    gap: 14px;
}

.safety-stack article {
    min-height: 132px;
    display: grid;
    gap: 10px;
    align-content: center;
    padding: 22px;
    border-radius: 28px;
}

.sales-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.sales-pricing-card {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    display: grid;
    align-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: 34px;
}

.sales-pricing-card.featured {
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 75% 8%,
            rgba(255, 255, 255, 0.92),
            transparent 16rem
        ),
        #ffffff;
}

.sales-pricing-card.featured span,
.sales-pricing-card.featured h3,
.sales-pricing-card.featured .sales-price,
.sales-pricing-card.featured li,
.sales-pricing-card.featured small {
    color: var(--paper-ink);
}

.sales-price {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(2.1rem, 3.2vw, 3.4rem);
    font-weight: 820;
    letter-spacing: -0.075em;
    line-height: 0.95;
}

.sales-price small {
    display: block;
    margin-top: 10px;
    font-size: 0.88rem;
    font-weight: 520;
    letter-spacing: 0;
}

.sales-pricing-card ul,
.sales-trust-section ul {
    margin: 0;
    padding-left: 18px;
}

.sales-pricing-card li + li,
.sales-trust-section li + li {
    margin-top: 10px;
}

.sales-request-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 22px;
    align-items: start;
}

.sales-request-panel {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    padding: clamp(20px, 3vw, 30px);
    border-radius: 34px;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

.sales-request-form {
    display: grid;
    gap: 16px;
}

.sales-request-field {
    display: grid;
    gap: 8px;
    color: var(--ink);
    font-weight: 690;
}

.sales-request-field input,
.sales-request-field select,
.sales-request-field textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
    padding: 14px 15px;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.sales-request-field textarea {
    min-height: 112px;
    resize: vertical;
}

.sales-request-field input::placeholder,
.sales-request-field textarea::placeholder {
    color: rgba(247, 247, 242, 0.38);
}

.sales-request-field input:focus,
.sales-request-field select:focus,
.sales-request-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.12);
}

.sales-request-result {
    min-height: 112px;
    margin-top: 16px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.055);
    white-space: pre-wrap;
}

.sales-request-result.is-ready {
    color: var(--paper-ink);
    background: var(--paper);
}

.sales-final {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 20px;
    padding: clamp(52px, 8vw, 92px);
    border-radius: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.18),
            transparent 22rem
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 28px 110px rgba(0, 0, 0, 0.36);
}

.sales-final h2 {
    max-width: 980px;
}

.public-site-footer {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(18px, 4vw, 44px);
    align-items: start;
    margin-top: clamp(44px, 7vw, 88px);
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.026)
        ),
        rgba(255, 255, 255, 0.032);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        0 18px 80px rgba(0, 0, 0, 0.28);
}

.public-site-journey-rail {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(20px, 3.4vw, 34px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(255, 255, 255, 0.14),
            transparent 18rem
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.03)
        ),
        rgba(255, 255, 255, 0.036);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.public-site-journey-copy {
    display: grid;
    align-content: center;
    gap: 12px;
}

.public-site-journey-copy > span,
.public-site-journey-steps span {
    color: rgba(247, 247, 242, 0.52);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 720;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-site-journey-copy h2 {
    max-width: 640px;
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.9rem, 3.5vw, 3.9rem);
    line-height: 0.98;
    letter-spacing: -0.07em;
}

.public-site-journey-copy p,
.public-site-journey-steps p {
    margin: 0;
    color: rgba(247, 247, 242, 0.64);
    line-height: 1.56;
}

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

.public-site-journey-actions a,
.public-site-journey-steps a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.86);
    background: rgba(255, 255, 255, 0.055);
    font-size: 0.88rem;
    font-weight: 720;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 240ms var(--ease),
        border-color 240ms var(--ease),
        background 240ms var(--ease),
        transform 240ms var(--ease);
}

.public-site-journey-actions a:first-child {
    color: var(--paper-ink);
    border-color: rgba(255, 255, 255, 0.56);
    background: var(--paper);
}

.public-site-journey-actions a:hover,
.public-site-journey-steps a:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
    transform: translateY(-1px);
}

.public-site-journey-actions a:first-child:hover {
    color: var(--paper-ink);
    background: var(--paper-soft);
}

.public-site-journey-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.public-site-journey-steps article {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 100%;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.044);
}

.public-site-journey-steps strong {
    color: var(--ink-strong);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.public-site-footer-brand {
    display: grid;
    gap: 10px;
}

.public-site-footer-brand a {
    width: fit-content;
    color: var(--ink-strong);
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: 820;
    letter-spacing: -0.055em;
    text-decoration: none;
}

.public-site-footer-brand p,
.public-site-footer-boundary {
    margin: 0;
    color: rgba(247, 247, 242, 0.62);
    font-size: 0.92rem;
    line-height: 1.55;
}

.public-site-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.public-site-footer-group {
    display: grid;
    gap: 10px;
    align-content: start;
}

.public-site-footer-group h2 {
    margin: 0;
    color: rgba(247, 247, 242, 0.52);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 680;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.public-site-footer-group div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

.public-site-footer-links a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.76);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.88rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color 280ms var(--ease),
        border-color 280ms var(--ease),
        background 280ms var(--ease),
        transform 280ms var(--ease);
}

.public-site-footer-links a:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
    transform: translateY(-1px);
}

.public-site-footer-boundary {
    grid-column: 1 / -1;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(247, 247, 242, 0.5);
}

/* Shared trust and legal public pages */
.sales-trust-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
    gap: 22px;
    align-items: stretch;
    padding: clamp(64px, 8vw, 108px) 0 24px;
}

.sales-trust-hero > div:first-child {
    display: grid;
    gap: 22px;
    align-content: center;
}

.sales-trust-note {
    display: grid;
    gap: 12px;
    align-content: center;
    padding: 28px;
    border-radius: 32px;
}

.sales-trust-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

/* Home page feature grid: four cards, each with its own accent hue, icon
   and mini visual, so the section reads as four distinct products rather
   than four copies of the same card. */
.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.home-feature-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 26px 24px 28px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.014)
        ),
        rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 24px 80px rgba(0, 0, 0, 0.28);
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(0);
    transition:
        transform 480ms var(--spring),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease);
}

.home-feature-card:hover {
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 28px 90px rgba(0, 0, 0, 0.34);
}

.home-feature-card:active {
    transform: scale(0.985);
}

.home-feature-card h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 1.14rem;
    font-weight: 760;
    letter-spacing: -0.02em;
}

.home-feature-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
}

.home-feature-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: rgb(var(--feature-accent));
    background: rgba(var(--feature-accent), 0.16);
    border: 1px solid rgba(var(--feature-accent), 0.32);
}

.home-feature-icon svg {
    width: 22px;
    height: 22px;
}

.is-accent-emerald {
    --feature-accent: 121, 214, 170;
}

.is-accent-amber {
    --feature-accent: 235, 190, 120;
}

.is-accent-sky {
    --feature-accent: 133, 190, 240;
}

.is-accent-violet {
    --feature-accent: 196, 165, 232;
}

.home-feature-visual {
    margin-top: 4px;
    min-height: 44px;
}

/* Card 1: overlapping circles standing in for separate, isolated client
   bases. They spread apart slightly on hover to feel alive. */
.home-feature-stack {
    display: flex;
}

.home-feature-stack i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--bg-raised);
    background: rgba(var(--feature-accent), 0.5);
    margin-left: -10px;
    transition: transform 420ms var(--spring);
}

.home-feature-stack i:first-child {
    margin-left: 0;
    background: rgba(var(--feature-accent), 0.85);
}

.home-feature-stack i:nth-child(2) {
    background: rgba(var(--feature-accent), 0.65);
}

.home-feature-card:hover .home-feature-stack i:nth-child(2) {
    transform: translateX(4px);
}

.home-feature-card:hover .home-feature-stack i:nth-child(3) {
    transform: translateX(8px);
}

/* Card 2: a tiny "today" queue with one highlighted row. */
.home-feature-queue {
    display: grid;
    gap: 6px;
}

.home-feature-queue div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--muted-2);
    font-size: 0.78rem;
    transition: background 320ms var(--ease);
}

.home-feature-queue b {
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
}

.home-feature-queue .is-today {
    color: var(--ink-strong);
    background: rgba(var(--feature-accent), 0.14);
    font-weight: 640;
}

.home-feature-queue .is-today b {
    background: rgb(var(--feature-accent));
    opacity: 1;
}

/* Card 3: a drafted message with a blinking caret. */
.home-feature-typing p {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.82rem;
}

.home-feature-cursor {
    display: inline-block;
    width: 2px;
    height: 0.9em;
    margin-left: 2px;
    background: rgb(var(--feature-accent));
    vertical-align: -0.1em;
    animation: home-caret-blink 1.05s step-end infinite;
}

@keyframes home-caret-blink {
    50% {
        opacity: 0;
    }
}

/* Card 4: a tiny bar chart that grows in once the card scrolls into view. */
.home-feature-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 44px;
}

.home-feature-chart i {
    flex: 1;
    height: 100%;
    border-radius: 4px 4px 1px 1px;
    background: rgba(var(--feature-accent), 0.55);
    transform: scaleY(0.12);
    transform-origin: bottom;
    transition: transform 720ms var(--spring);
}

.home-feature-card.is-visible .home-feature-chart i:nth-child(1) {
    transform: scaleY(0.45);
}

.home-feature-card.is-visible .home-feature-chart i:nth-child(2) {
    transform: scaleY(0.72);
    transition-delay: 80ms;
}

.home-feature-card.is-visible .home-feature-chart i:nth-child(3) {
    transform: scaleY(0.58);
    transition-delay: 160ms;
}

.home-feature-card.is-visible .home-feature-chart i:nth-child(4) {
    transform: scaleY(1);
    transition-delay: 240ms;
}

.sales-public-route-map {
    display: grid;
    gap: 24px;
    margin-top: 28px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 34px;
    background:
        radial-gradient(
            circle at 16% 8%,
            rgba(255, 255, 255, 0.12),
            transparent 22rem
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.095),
            rgba(255, 255, 255, 0.032)
        ),
        rgba(255, 255, 255, 0.048);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 24px 100px rgba(0, 0, 0, 0.3);
}

.sales-public-route-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 14px;
}

.sales-public-route-group {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 520ms var(--spring),
        border-color 420ms var(--ease);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.036)
        ),
        rgba(255, 255, 255, 0.045);
}

.sales-public-route-group-primary {
    grid-row: span 2;
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(255, 255, 255, 0.18),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.042)
        ),
        rgba(255, 255, 255, 0.06);
}

.sales-public-route-group > span {
    color: rgba(247, 247, 242, 0.54);
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 720;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.sales-public-route-group strong {
    color: var(--ink-strong);
    font-size: clamp(1.25rem, 2vw, 2rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.sales-public-route-group p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.sales-public-route-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.sales-public-route-links a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.78);
    background: rgba(255, 255, 255, 0.045);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition:
        color 180ms var(--ease),
        border-color 180ms var(--ease),
        background 180ms var(--ease),
        transform 180ms var(--ease);
}

.sales-public-route-links a:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
    transform: translateY(-1px);
}

.sales-legal-matrix {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-trust-matrix article,
.sales-trust-columns article,
.sales-trust-gates article {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: 28px;
}

.sales-section-head {
    display: grid;
    gap: 16px;
    margin-bottom: 24px;
}

.sales-trust-section {
    padding: clamp(28px, 4vw, 42px);
    border-radius: 34px;
}

.compare-table-wrap {
    margin-top: 28px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
}

.compare-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    padding: 20px 24px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
    border-bottom: none;
}

.compare-table th {
    width: 190px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.compare-table td strong {
    display: block;
    margin-bottom: 6px;
    font-size: 1.05rem;
    color: var(--ink-strong);
}

.compare-table td p {
    margin: 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.compare-table tr.is-lios th,
.compare-table tr.is-lios td {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16),
        rgba(255, 255, 255, 0.06)
    );
    color: var(--ink-strong);
}

.compare-table tr.is-lios th {
    font-weight: 800;
    border-radius: 0 0 0 26px;
}

.compare-table tr.is-lios td {
    border-radius: 0 0 26px 0;
}

.compare-table tr.is-lios td p {
    color: rgba(247, 247, 242, 0.78);
}

.step-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.step-flow-item {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.125),
        rgba(255, 255, 255, 0.045)
    );
    transition:
        transform 320ms var(--ease),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease),
        background 320ms var(--ease);
}

.step-flow-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.17),
        rgba(255, 255, 255, 0.05)
    );
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.36);
}

.step-flow-item::after {
    content: "";
    position: absolute;
    top: 37px;
    left: 100%;
    width: 14px;
    height: 1px;
    background: var(--line-strong);
    transition: background 320ms var(--ease);
}

.step-flow-item:hover::after {
    background: var(--growth-line);
}

.step-flow-item:last-child::after {
    display: none;
}

.step-flow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--growth-soft);
    color: var(--growth);
    border: 1px solid var(--growth-line);
    font-size: 0.86rem;
    font-weight: 800;
    transition:
        background 320ms var(--ease),
        color 320ms var(--ease),
        transform 320ms var(--spring);
}

.step-flow-item:hover .step-flow-number {
    background: var(--growth);
    color: var(--growth-ink);
    transform: scale(1.1);
}

.step-flow-item strong {
    font-size: 1.02rem;
    color: var(--ink-strong);
}

.step-flow-item p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.sales-trust-section h2 {
    font-size: clamp(2.1rem, 4vw, 4.8rem);
}

.sales-trust-dark {
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 70% 0%,
            rgba(255, 255, 255, 0.85),
            transparent 16rem
        ),
        #ffffff;
}

.sales-trust-dark .sales-kicker,
.sales-trust-dark h2,
.sales-trust-dark p,
.sales-trust-dark li {
    color: var(--paper-ink);
}

.sales-trust-columns,
.sales-trust-gates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sales-trust-gates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* When the item count isn't a multiple of 3, the last tile would otherwise
   sit alone in a mostly-empty row at 1/3 width. Instead of leaving that gap,
   stretch the orphan across the full row and treat it as a deliberate
   closing highlight rather than a layout accident. */
.sales-trust-gates > article:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0.045)
    );
    border-color: rgba(255, 255, 255, 0.24);
}

.sales-trust-gates > article:last-child:nth-child(3n + 1) strong {
    font-size: 1.18rem;
}

.sales-legal-gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sales-review-state {
    display: grid;
    grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 24px;
    padding: 20px;
    border-radius: 28px;
}

.sales-review-state strong {
    display: block;
    margin-top: 4px;
    color: var(--ink-strong);
    font-size: 1.35rem;
}

.sales-review-state p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.sales-trust-section p .sales-button-secondary,
.sales-trust-section > p .sales-button-secondary {
    margin: 6px 6px 0 0;
}

@keyframes frame-shine {
    0%,
    42% {
        transform: translateX(-52%) rotate(8deg);
    }
    74%,
    100% {
        transform: translateX(52%) rotate(8deg);
    }
}

@keyframes prepare-pulse {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.975);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes map-float {
    from {
        transform: translateY(8px);
    }
    to {
        transform: translateY(-8px);
    }
}

@keyframes ring-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1120px) {
    .lead-hero,
    .sales-request-grid,
    .lead-safety,
    .sales-trust-hero {
        grid-template-columns: 1fr;
    }

    .lead-hero {
        min-height: auto;
    }

    .lead-hero h1 {
        max-width: 920px;
    }

    .lead-hero-visual {
        min-width: 0;
    }

    .impact-board {
        grid-template-columns: 1fr 1fr;
    }

    .impact-card-large {
        grid-column: span 2;
    }

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

    .engine-console,
    .proof-reel-frame {
        grid-template-columns: 1fr;
    }

    .engine-console-stage {
        min-height: 520px;
    }

    .lead-proof-strip,
    .sales-trust-matrix,
    .home-feature-grid,
    .sales-legal-matrix,
    .sales-pricing-grid,
    .step-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step-flow-item:nth-child(2)::after {
        display: none;
    }

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

    .sales-nav-links::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 760px) {
    :root {
        --shell: min(100% - 24px, 1360px);
    }

    .sales-shell {
        padding-top: 10px;
    }

    .sales-nav {
        grid-template-columns: auto auto;
        min-height: 62px;
        padding: 8px;
    }

    .sales-logo {
        height: 46px;
        padding: 0 8px 0 4px;
    }

    .sales-logo-word-text {
        font-size: 0.96rem;
        letter-spacing: 0.05em;
    }

    .sales-nav-links {
        grid-column: 1 / -1;
        order: 3;
        justify-content: flex-start;
        padding: 2px 6px 6px;
    }

    .sales-nav-cta {
        min-height: 46px;
        padding: 0 14px;
    }

    .sales-nav-end {
        gap: 8px;
    }

    .sales-profile-trigger {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .sales-profile-icon {
        width: 18px;
        height: 18px;
    }

    .sales-profile-menu-card {
        right: -6px;
    }

    .lead-hero {
        padding-top: 46px;
        gap: 28px;
    }

    .lead-hero h1,
    .lead-section-copy h2,
    .sales-trust-hero h1,
    .sales-trust-section h2,
    .sales-final h2,
    .sales-pricing h2 {
        font-size: clamp(2.6rem, 15vw, 4.2rem);
        line-height: 0.96;
    }

    .sales-hero-actions {
        width: 100%;
    }

    .sales-button {
        width: 100%;
        justify-content: space-between;
    }

    .hero-floating-card {
        position: static;
        max-width: none;
        margin-top: 10px;
    }

    .lead-proof-strip,
    .impact-board,
    .feature-mosaic,
    .proof-gallery-grid,
    .proof-reel-cut,
    .sales-pricing-grid,
    .sales-trust-matrix,
    .home-feature-grid,
    .sales-public-route-grid,
    .sales-legal-matrix,
    .sales-trust-columns,
    .sales-trust-gates,
    .sales-legal-gates,
    .sales-review-state,
    .step-flow {
        grid-template-columns: 1fr;
    }

    .step-flow-item::after {
        display: none;
    }

    .sales-public-route-group-primary {
        grid-row: auto;
    }

    .impact-card-large,
    .feature-tile-large,
    .feature-tile-dark,
    .proof-shot-large {
        grid-column: auto;
        grid-row: auto;
    }

    .engine-console-stage {
        min-height: 620px;
    }

    .proof-reel-hero-shot img {
        min-height: 300px;
    }

    .engine-panel h3 {
        font-size: clamp(2.3rem, 13vw, 4rem);
    }

    .verdict-grid,
    .chart-columns {
        grid-template-columns: 1fr;
    }

    .chart-columns {
        min-height: auto;
    }

    .chart-columns i {
        height: 72px;
        transform-origin: left;
        transform: scaleX(0.16);
    }

    .is-visible .chart-columns div:nth-child(n) i {
        transform: scaleX(1);
    }

    .chart-line {
        display: none;
    }

    .sales-final {
        padding: 36px 18px;
    }

    .public-site-footer {
        grid-template-columns: 1fr;
        padding: 22px;
        border-radius: 24px;
    }

    .public-site-journey-rail,
    .public-site-journey-steps {
        grid-template-columns: 1fr;
    }

    .public-site-journey-rail {
        padding: 18px;
        border-radius: 22px;
    }

    .public-site-journey-copy h2 {
        font-size: clamp(1.8rem, 11vw, 3.1rem);
    }

    .public-site-journey-actions a {
        width: 100%;
    }

    .public-site-footer-links {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .public-site-footer-group div {
        gap: 8px;
    }

    .public-site-footer-links a {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.84rem;
    }
}

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

    body.js-enabled [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
    .sales-nav,
    .hero-floating-card {
        background: rgba(12, 12, 14, 0.96);
    }
}

.sales-nav {
    top: 18px;
    min-height: 66px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        ),
        #050506;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(255, 255, 255, 0.04),
        0 20px 90px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sales-nav-cta,
.sales-button-primary,
.engine-main-button,
.sales-request-result.is-ready {
    background:
        radial-gradient(
            circle at 22% 0%,
            rgba(255, 255, 255, 1),
            transparent 38%
        ),
        #ffffff;
}

.sales-button,
.sales-nav-cta,
.engine-main-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.sales-button::before,
.sales-nav-cta::before,
.engine-main-button::before {
    content: "";
    position: absolute;
    inset: -70% -28%;
    background: linear-gradient(
        112deg,
        transparent 30%,
        rgba(255, 255, 255, 0.44),
        transparent 60%
    );
    transform: translateX(-62%) rotate(8deg);
    transition: transform 760ms var(--ease);
    pointer-events: none;
}

.sales-button:hover::before,
.sales-nav-cta:hover::before,
.engine-main-button:hover::before {
    transform: translateX(58%) rotate(8deg);
}

.sales-button span,
.sales-button i,
.sales-nav-cta,
.engine-main-button span,
.engine-main-button i {
    position: relative;
    z-index: 1;
}

.sales-kicker {
    min-height: 32px;
    color: rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.045)
        ),
        rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.lead-hero-kinetic {
    --pointer-x: 50%;
    --pointer-y: 38%;
    position: relative;
    min-height: min(840px, calc(100dvh - 98px));
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    margin: 22px 0 clamp(34px, 5vw, 68px);
    padding: clamp(74px, 9vw, 132px) clamp(18px, 4vw, 72px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: clamp(34px, 6vw, 76px);
    background:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.2),
            transparent 22rem
        ),
        radial-gradient(
            circle at 50% 46%,
            rgba(255, 255, 255, 0.12),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.025)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        0 36px 140px rgba(0, 0, 0, 0.44);
}

.lead-hero-kinetic::before,
.lead-hero-kinetic::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.lead-hero-kinetic::before {
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.2),
            transparent 28%,
            transparent 66%,
            rgba(255, 255, 255, 0.08)
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(255, 255, 255, 0.1),
            transparent 24rem
        );
}

.lead-hero-kinetic::after {
    inset: 0;
    z-index: 0;
    opacity: 0.2;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(
        circle at 50% 46%,
        black 0 30%,
        transparent 70%
    );
}

.lead-hero-copy-centered {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    justify-items: center;
    text-align: center;
    margin-inline: auto;
    gap: clamp(18px, 2.2vw, 28px);
}

.lead-hero-copy-centered .sales-kicker,
.hero-actions-centered {
    margin-inline: auto;
}

.lead-hero-kinetic h1 {
    max-width: 1120px;
    font-size: clamp(4rem, 8.8vw, 9.7rem);
    line-height: 0.82;
    letter-spacing: -0.105em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16),
        0 40px 120px rgba(255, 255, 255, 0.12);
}

.lead-hero-copy-centered .sales-hero-text {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.12rem, 1.52vw, 1.45rem);
}

.hero-actions-centered {
    justify-content: center;
}

.lead-proof-strip {
    margin-top: clamp(28px, 4vw, 54px);
}

.lead-proof-strip article,
.impact-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.sales-request-panel,
.sales-trust-note,
.sales-trust-matrix article,
.sales-trust-columns article,
.sales-trust-gates article,
.sales-review-state,
.sales-trust-section,
.proof-shot,
.proof-reel-frame,
.proof-reel-scene,
.chart-glass,
.engine-console {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.052),
            rgba(255, 255, 255, 0.014)
        ),
        rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 28px 110px rgba(0, 0, 0, 0.34);
}

.impact-card-large,
.feature-tile-large,
.sales-pricing-card.featured {
    background:
        radial-gradient(
            circle at 22% 0%,
            rgba(255, 255, 255, 1),
            transparent 26rem
        ),
        #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -26px 54px rgba(5, 5, 6, 0.08),
        0 34px 120px rgba(255, 255, 255, 0.09),
        0 24px 110px rgba(0, 0, 0, 0.36);
}

.feature-tile-dark {
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(255, 255, 255, 0.2),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.045)
        ),
        #09090a !important;
}

.lead-section-copy {
    max-width: 1060px;
}

.lead-section-copy h2,
.sales-final h2,
.sales-pricing h2 {
    letter-spacing: -0.092em;
}

.engine-console {
    padding: clamp(14px, 2.2vw, 26px);
    border-radius: 48px;
}

.engine-console-stage {
    background:
        radial-gradient(
            circle at 80% 8%,
            rgba(255, 255, 255, 0.18),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        ),
        #050506;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.engine-step-list button {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.035)
        ),
        rgba(255, 255, 255, 0.04);
}

.engine-step-list button.is-active {
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 1),
            transparent 38%
        ),
        #ffffff;
}

.learning-rings i {
    animation-timing-function: var(--ease);
}

.chart-glass {
    min-height: 560px;
}

.chart-columns i {
    border-radius: 999px 999px 14px 14px;
}

.proof-shot img {
    filter: grayscale(1) contrast(1.08) brightness(0.92);
    transition:
        filter 560ms var(--ease),
        transform 720ms var(--ease);
}

.proof-shot:hover img {
    filter: grayscale(1) contrast(1.12) brightness(1);
    transform: scale(1.015);
}

.sales-request-field input,
.sales-request-field select,
.sales-request-field textarea {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.11),
            rgba(255, 255, 255, 0.04)
        ),
        rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.sales-trust-dark {
    color: var(--ink);
    background:
        radial-gradient(
            circle at 80% 0%,
            rgba(255, 255, 255, 0.18),
            transparent 22rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.045)
        ),
        rgba(255, 255, 255, 0.05);
}

.sales-trust-dark .sales-kicker,
.sales-trust-dark h2,
.sales-trust-dark p,
.sales-trust-dark li {
    color: inherit;
}

.sales-final {
    position: relative;
    overflow: hidden;
}

.sales-final::before {
    content: "";
    position: absolute;
    inset: -40% -20%;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(255, 255, 255, 0.22),
        transparent 24rem
    );
    pointer-events: none;
}

.sales-final > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 1120px) {
    .lead-hero-kinetic {
        min-height: min(820px, calc(100dvh - 108px));
    }

    .lead-hero-kinetic h1 {
        font-size: clamp(4rem, 12vw, 8rem);
    }
}

@media (max-width: 760px) {
    .sales-nav {
        top: 10px;
        border-radius: 30px;
    }

    .lead-hero-kinetic {
        min-height: calc(100dvh - 124px);
        margin-top: 14px;
        padding: 58px 16px 54px;
        border-radius: 34px;
    }

    .lead-hero-kinetic h1 {
        font-size: clamp(3.05rem, 16vw, 4.8rem);
        line-height: 0.88;
        letter-spacing: -0.095em;
    }

    .lead-hero-copy-centered .sales-hero-text {
        font-size: 1rem;
        line-height: 1.5;
    }

    .lead-proof-strip article {
        min-height: 136px;
    }

    .engine-console {
        border-radius: 34px;
    }

    .chart-glass {
        min-height: auto;
    }
}

.lead-logo {
    gap: 8px;
    padding: 0 14px 0 8px;
    color: var(--ink-strong);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.035)
        ),
        rgba(255, 255, 255, 0.052);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 16px 60px rgba(0, 0, 0, 0.36);
}

.lead-logo-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 24% 0%,
            rgba(255, 255, 255, 1),
            transparent 34%
        ),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -8px 18px rgba(5, 5, 6, 0.14);
    font-weight: 860;
    letter-spacing: -0.1em;
}

.lead-logo-word {
    font-weight: 820;
    letter-spacing: -0.08em;
}

.lead-hero-minimal {
    min-height: min(820px, calc(100dvh - 96px));
    margin-top: 18px;
    padding: clamp(66px, 8vw, 110px) clamp(16px, 4vw, 68px);
    background:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.12),
            transparent 18rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.018)
        ),
        rgba(255, 255, 255, 0.018);
    backdrop-filter: blur(28px) saturate(150%) contrast(1.05);
    -webkit-backdrop-filter: blur(28px) saturate(150%) contrast(1.05);
}

.lead-hero-minimal::after {
    opacity: 0.12;
    background-size: 62px 62px;
}

.lead-hero-minimal h1 {
    max-width: 1040px;
    font-size: clamp(4.2rem, 9vw, 9.2rem);
    line-height: 0.84;
    letter-spacing: -0.108em;
}

.roi-lab-grid,
.product-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 16px;
    align-items: stretch;
}

.roi-lab-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.72fr) minmax(
            280px,
            0.72fr
        );
}

.roi-card,
.product-live-card,
.product-side-panel article {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 34px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.052),
            rgba(255, 255, 255, 0.014)
        ),
        rgba(255, 255, 255, 0.018);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.19),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 28px 110px rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.roi-card::after,
.product-live-card::after,
.product-side-panel article::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        112deg,
        transparent 28%,
        rgba(255, 255, 255, 0.14),
        transparent 58%
    );
    transform: translateX(-72%) rotate(6deg);
    transition: transform 900ms var(--ease);
    pointer-events: none;
}

.roi-card:hover::after,
.product-live-card:hover::after,
.product-side-panel article:hover::after {
    transform: translateX(72%) rotate(6deg);
}

.roi-card {
    min-height: 410px;
    display: grid;
    align-content: space-between;
    gap: 24px;
    padding: clamp(24px, 3vw, 34px);
}

.roi-card-main {
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 1),
            transparent 26rem
        ),
        #ffffff;
}

.roi-card span,
.product-live-card span,
.product-side-panel span {
    color: rgba(247, 247, 242, 0.52);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.roi-card-main span,
.roi-card-main .roi-equation i {
    color: rgba(7, 7, 8, 0.54);
}

.roi-card h3,
.product-lead-title h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.45rem, 2.3vw, 2.55rem);
    line-height: 1;
    letter-spacing: -0.06em;
}

.roi-card-main h3 {
    color: var(--paper-ink);
    font-size: clamp(2.2rem, 4.4vw, 5.2rem);
    line-height: 0.92;
    letter-spacing: -0.08em;
}

.roi-equation {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.roi-equation b,
.roi-equation i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 13px;
    border-radius: 999px;
    font-style: normal;
}

.roi-equation b {
    color: var(--paper-ink);
    background: rgba(7, 7, 8, 0.08);
}

.roi-equation i {
    font-size: 0.82rem;
}

.roi-bars-card {
    align-content: end;
}

.roi-bars {
    min-height: 190px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
}

.roi-bars i {
    display: block;
    height: 42%;
    border-radius: 999px 999px 12px 12px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.95),
        rgba(255, 255, 255, 0.14)
    );
    transform-origin: bottom;
    transform: scaleY(0.18);
    transition: transform 1100ms var(--ease);
}

.is-visible .roi-bars-before i:nth-child(1) {
    transform: scaleY(0.95);
}
.is-visible .roi-bars-before i:nth-child(2) {
    transform: scaleY(0.82);
    transition-delay: 70ms;
}
.is-visible .roi-bars-before i:nth-child(3) {
    transform: scaleY(0.72);
    transition-delay: 140ms;
}
.is-visible .roi-bars-before i:nth-child(4) {
    transform: scaleY(0.44);
    transition-delay: 210ms;
}
.is-visible .roi-bars-before i:nth-child(5) {
    transform: scaleY(0.34);
    transition-delay: 280ms;
}

.is-visible .roi-bars-after i:nth-child(1) {
    transform: scaleY(0.38);
}
.is-visible .roi-bars-after i:nth-child(2) {
    transform: scaleY(0.54);
    transition-delay: 70ms;
}
.is-visible .roi-bars-after i:nth-child(3) {
    transform: scaleY(0.78);
    transition-delay: 140ms;
}
.is-visible .roi-bars-after i:nth-child(4) {
    transform: scaleY(0.68);
    transition-delay: 210ms;
}
.is-visible .roi-bars-after i:nth-child(5) {
    transform: scaleY(0.9);
    transition-delay: 280ms;
}

.chart-funnel .chart-columns i {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 70px rgba(255, 255, 255, 0.12);
}

.product-card-grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
}

.product-live-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    min-height: 650px;
    display: grid;
    align-content: space-between;
    gap: 26px;
    padding: clamp(24px, 4vw, 44px);
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

.product-live-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 24% 0%,
            rgba(255, 255, 255, 0.2),
            transparent 18rem
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.14),
            transparent 32%,
            transparent 68%,
            rgba(255, 255, 255, 0.08)
        );
}

.product-card-top,
.product-signal-grid,
.product-message-card,
.product-lead-title {
    position: relative;
    z-index: 1;
}

.product-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.product-card-top strong {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 24% 0%,
            rgba(255, 255, 255, 1),
            transparent 36%
        ),
        #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.product-lead-title {
    display: grid;
    gap: 16px;
}

.product-lead-title h3 {
    max-width: 780px;
    font-size: clamp(2.7rem, 5vw, 6.2rem);
    line-height: 0.9;
    letter-spacing: -0.085em;
}

.product-lead-title p,
.product-message-card p,
.product-side-panel p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.product-signal-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.product-signal-grid div {
    display: grid;
    gap: 10px;
    min-height: 116px;
    align-content: space-between;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.055);
}

.product-signal-grid b {
    color: var(--ink-strong);
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    letter-spacing: -0.04em;
}

.product-message-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 24px;
    color: var(--paper-ink);
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 1),
            transparent 18rem
        ),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 24px 90px rgba(0, 0, 0, 0.22);
}

.product-message-card span,
.product-message-card p {
    color: var(--paper-ink);
}

.product-side-panel {
    display: grid;
    gap: 14px;
}

.product-side-panel article {
    min-height: 150px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 22px;
}

.product-side-panel strong {
    color: var(--ink-strong);
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

@keyframes hero-bar-breathe {
    from {
        transform: scaleY(0.74);
        opacity: 0.54;
    }
    to {
        transform: scaleY(1.04);
        opacity: 0.92;
    }
}

@media (max-width: 1120px) {
    .roi-lab-grid,
    .product-card-grid {
        grid-template-columns: 1fr;
    }

    .roi-card-main {
        min-height: 360px;
    }

    .product-live-card {
        min-height: 580px;
    }
}

@media (max-width: 760px) {
    .lead-logo-word {
        display: none;
    }

    .lead-logo {
        padding: 0 8px;
    }

    .lead-hero-minimal {
        min-height: calc(100dvh - 120px);
        padding: 52px 14px;
    }

    .lead-hero-minimal h1 {
        font-size: clamp(3.25rem, 16vw, 5rem);
        line-height: 0.88;
    }

    .roi-lab-grid,
    .product-card-grid,
    .product-signal-grid {
        grid-template-columns: 1fr;
    }

    .roi-card,
    .product-live-card,
    .product-side-panel article {
        border-radius: 28px;
    }

    .roi-card,
    .product-live-card {
        min-height: auto;
        padding: 22px;
    }

    .product-lead-title h3 {
        font-size: clamp(2.35rem, 13vw, 4rem);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lead-hero-minimal,
    .roi-card,
    .product-live-card,
    .product-side-panel article {
        background: #101012;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .roi-card-main,
    .product-message-card {
        background: #ffffff;
    }
}

/* Public site v7: black glass sales finish */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lead-nav {
    border-color: rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.04)
        ),
        rgba(6, 6, 7, 0.74);
}

.lead-logo {
    gap: 8px;
    padding: 0 14px 0 8px;
}

.lead-logo-mark {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    font-size: 0.98rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -10px 20px rgba(5, 5, 6, 0.16),
        0 8px 28px rgba(255, 255, 255, 0.08);
}

.lead-logo-sub {
    margin-left: -3px;
    color: rgba(247, 247, 242, 0.46);
    font-size: 0.72rem;
    font-weight: 640;
    letter-spacing: -0.015em;
}

.lead-hero-minimal {
    min-height: min(780px, calc(100dvh - 104px));
    margin-top: 18px;
    padding: clamp(58px, 7vw, 98px) clamp(16px, 4vw, 68px);
    border-color: rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(
            circle at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.085),
            transparent 18rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.072),
            rgba(255, 255, 255, 0.012)
        ),
        rgba(255, 255, 255, 0.014);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 34px 140px rgba(0, 0, 0, 0.48);
}

.lead-hero-minimal::after {
    opacity: 0.08;
}

.lead-hero-minimal h1 {
    max-width: 1000px;
    color: #fbfbf7;
    font-size: clamp(4.35rem, 8.35vw, 9.05rem);
    line-height: 0.85;
    letter-spacing: -0.108em;
    text-shadow: 0 34px 130px rgba(255, 255, 255, 0.1);
}

.lead-proof-strip article,
.impact-card,
.roi-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.sales-request-panel,
.chart-glass,
.engine-console,
.product-live-card,
.product-side-panel article {
    border-color: rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.115),
            rgba(255, 255, 255, 0.03)
        ),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -1px 0 rgba(255, 255, 255, 0.055),
        0 28px 112px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(24px) saturate(165%) contrast(1.06);
    -webkit-backdrop-filter: blur(24px) saturate(165%) contrast(1.06);
}

.impact-card-large,
.feature-tile-large,
.roi-card-main,
.sales-pricing-card.featured,
.product-message-card,
.sales-request-result.is-ready {
    background: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -22px 48px rgba(5, 5, 6, 0.08),
        0 26px 105px rgba(0, 0, 0, 0.36) !important;
}

.lead-proof-strip article:nth-child(4) strong {
    font-size: clamp(1.45rem, 2.1vw, 2.65rem);
    letter-spacing: -0.065em;
    line-height: 1;
}

.impact-card-large::after,
.feature-tile-large::after,
.roi-card-main::after,
.sales-pricing-card.featured::after,
.product-message-card::after {
    opacity: 0;
}

.roi-bars i,
.chart-columns i {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.9),
            rgba(255, 255, 255, 0.1)
        ),
        rgba(255, 255, 255, 0.08);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 62px rgba(255, 255, 255, 0.1);
}

.chart-glass {
    overflow: hidden;
}

.chart-glass::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}

.product-live-card {
    min-height: 660px;
}

.product-card-top strong {
    min-height: 44px;
    padding: 0 18px;
    letter-spacing: -0.035em;
}

.product-decision-rail {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.product-decision-rail span {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(247, 247, 242, 0.76);
    background: rgba(255, 255, 255, 0.055);
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: none;
}

.product-signal-grid div {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.028)
        ),
        rgba(255, 255, 255, 0.04);
}

.product-message-card {
    position: relative;
    z-index: 1;
}

.sales-final {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.028)
        ),
        rgba(255, 255, 255, 0.034);
}

.sales-final::before {
    opacity: 0.55;
    background: linear-gradient(
        110deg,
        transparent 18%,
        rgba(255, 255, 255, 0.12),
        transparent 42%
    );
}

@media (max-width: 1120px) {
    .lead-logo-sub {
        display: none;
    }

    .lead-hero-minimal h1 {
        font-size: clamp(4rem, 12vw, 7.6rem);
    }
}

@media (max-width: 760px) {
    .lead-hero-minimal {
        min-height: calc(100dvh - 118px);
        padding: 50px 14px;
    }

    .lead-hero-minimal h1 {
        font-size: clamp(3.05rem, 15.5vw, 4.7rem);
        line-height: 0.9;
    }

    .lead-proof-strip article:nth-child(4) strong {
        font-size: clamp(1.35rem, 9vw, 2.2rem);
    }

    .product-decision-rail {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lead-nav,
    .lead-hero-minimal,
    .lead-proof-strip article,
    .impact-card,
    .roi-card,
    .feature-mosaic article,
    .sales-pricing-card,
    .safety-stack article,
    .sales-request-panel,
    .chart-glass,
    .engine-console,
    .product-live-card,
    .product-side-panel article {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

.lead-nav {
    border-color: rgba(255, 255, 255, 0.13);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.032)
        ),
        rgba(5, 5, 6, 0.78);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(255, 255, 255, 0.052),
        0 18px 78px rgba(0, 0, 0, 0.58);
}

.lead-logo-mark {
    width: 38px;
    height: 36px;
    border-radius: 15px;
    font-size: 0.9rem;
    letter-spacing: -0.12em;
}

.lead-logo-word {
    letter-spacing: -0.075em;
}

.lead-hero-minimal {
    min-height: calc(100dvh - 104px);
    padding: clamp(54px, 6.8vw, 92px) clamp(16px, 4vw, 68px);
    background:
        linear-gradient(
            118deg,
            rgba(255, 255, 255, 0.075),
            transparent 28%,
            transparent 68%,
            rgba(255, 255, 255, 0.046)
        ),
        radial-gradient(
            ellipse at var(--pointer-x) var(--pointer-y),
            rgba(255, 255, 255, 0.058),
            transparent 17rem
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.056),
            rgba(255, 255, 255, 0.01)
        ),
        rgba(255, 255, 255, 0.012);
    backdrop-filter: blur(30px) saturate(175%) contrast(1.08);
    -webkit-backdrop-filter: blur(30px) saturate(175%) contrast(1.08);
}

.lead-hero-minimal::before {
    z-index: 0;
    opacity: 0.72;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.14),
            transparent 24%,
            transparent 70%,
            rgba(255, 255, 255, 0.06)
        ),
        radial-gradient(
            ellipse at 50% 106%,
            rgba(255, 255, 255, 0.07),
            transparent 25rem
        );
}

.lead-hero-minimal::after {
    opacity: 0.055;
    background-size: 72px 72px;
    mask-image: radial-gradient(
        ellipse at 50% 48%,
        black 0 22%,
        transparent 68%
    );
}

.lead-hero-minimal h1 {
    max-width: 1010px;
    font-size: clamp(4.15rem, 8vw, 8.75rem);
    line-height: 0.86;
    letter-spacing: -0.108em;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.11),
        0 32px 120px rgba(255, 255, 255, 0.075);
}

.lead-proof-strip article,
.impact-card,
.roi-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.sales-request-panel,
.chart-glass,
.engine-console,
.product-live-card,
.product-side-panel article {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.098),
            rgba(255, 255, 255, 0.026)
        ),
        rgba(255, 255, 255, 0.03);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 255, 255, 0.048),
        0 26px 104px rgba(0, 0, 0, 0.4);
}

.lead-proof-strip article,
.impact-card,
.roi-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.sales-request-panel,
.sales-trust-note,
.sales-trust-matrix article,
.sales-trust-columns article,
.sales-trust-gates article,
.sales-review-state,
.sales-trust-section,
.chart-glass,
.engine-console,
.product-live-card,
.product-side-panel article,
.home-feature-card {
    transition:
        transform 320ms var(--spring),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease);
}

.lead-proof-strip article:hover,
.impact-card:hover,
.roi-card:hover,
.feature-mosaic article:hover,
.sales-pricing-card:hover,
.safety-stack article:hover,
.sales-request-panel:hover,
.sales-trust-note:hover,
.sales-trust-matrix article:hover,
.sales-trust-columns article:hover,
.sales-trust-gates article:hover,
.sales-review-state:hover,
.sales-trust-section:hover,
.chart-glass:hover,
.engine-console:hover,
.product-live-card:hover,
.product-side-panel article:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 32px 96px rgba(0, 0, 0, 0.42);
}

.impact-card-large,
.feature-tile-large,
.roi-card-main,
.sales-pricing-card.featured,
.product-message-card,
.sales-request-result.is-ready {
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 255, 255, 0.82),
            transparent 19rem
        ),
        #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -18px 42px rgba(5, 5, 6, 0.075),
        0 24px 92px rgba(0, 0, 0, 0.34) !important;
}

.product-live-card::before {
    background:
        radial-gradient(
            circle at 24% 0%,
            rgba(255, 255, 255, 0.16),
            transparent 16rem
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.11),
            transparent 30%,
            transparent 70%,
            rgba(255, 255, 255, 0.06)
        ),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size:
        auto,
        auto,
        72px 72px,
        72px 72px;
    opacity: 0.9;
}

.product-decision-rail span {
    background: rgba(255, 255, 255, 0.046);
}

.sales-final::before {
    opacity: 0.34;
    background: linear-gradient(
        110deg,
        transparent 20%,
        rgba(255, 255, 255, 0.085),
        transparent 42%
    );
}

@supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
    .lead-nav,
    .lead-hero-minimal,
    .roi-card,
    .product-live-card,
    .product-side-panel article {
        background: rgba(10, 10, 12, 0.94);
    }
}

@media (max-width: 1120px) {
    .lead-hero-minimal h1 {
        font-size: clamp(3.85rem, 11.2vw, 7.25rem);
    }
}

@media (max-width: 760px) {
    .lead-logo-mark {
        width: 36px;
        height: 34px;
        font-size: 0.82rem;
    }

    .lead-hero-minimal {
        min-height: calc(100dvh - 118px);
        padding: 48px 14px;
    }

    .lead-hero-minimal h1 {
        font-size: clamp(2.9rem, 15vw, 4.5rem);
        line-height: 0.92;
        letter-spacing: -0.098em;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .lead-hero-minimal,
    .roi-card,
    .product-live-card,
    .product-side-panel article {
        background: #101012;
    }
}

/* Public site v9: B2B growth polish */
/* Sitewide LIOS growth-green accent on every element that uses --growth
   (nav hover, key metrics, ROI equation, growth callouts). This is the
   default on every public page, not just the home page. --growth* tokens
   live in the single :root block at the top of this file. */

/* Sitewide green text accent - color only, never a background fill.
   Use sparingly, inline, on a specific number/word that signals growth,
   benefit or a positive outcome (e.g. "70-85%", "быстрее", "включено").
   Works on every public page, not just the home page. */
.text-growth {
    color: #3ddc91;
}

.sales-nav-links {
    gap: clamp(8px, 1.1vw, 16px);
}

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

.lead-hero-minimal {
    overflow: clip;
    transform-origin: center top;
}

.lead-hero-minimal::before {
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.13),
            transparent 24%,
            transparent 70%,
            rgba(255, 255, 255, 0.055)
        ),
        radial-gradient(
            ellipse at 50% 104%,
            rgba(0, 0, 0, 0.62),
            transparent 28rem
        );
}

.lead-hero-copy-centered {
    will-change: opacity, transform, filter;
}

@supports (animation-timeline: view()) {
    .lead-hero-copy-centered {
        animation: hero-copy-shadow-out linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 76%;
    }

    .lead-hero-minimal {
        animation: hero-panel-shadow-out linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
    }
}

.growth-equation em,
.roi-growth-equation i,
.growth-card-value,
.growth-chart .chart-columns div:nth-child(5) b,
.product-signal-grid div:first-child b {
    color: var(--growth);
}

.growth-equation em {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(10, 10, 10, 0.18);
    color: var(--growth-ink);
    background: rgba(255, 255, 255, 0.18);
    font-style: normal;
    font-weight: 760;
}

.growth-metric-card strong {
    color: var(--growth);
}

.lead-proof-strip article:nth-child(4) strong {
    color: var(--growth);
    font-size: clamp(2rem, 3.6vw, 4rem);
    letter-spacing: -0.08em;
}

.roi-growth-equation i {
    min-width: 40px;
    justify-content: center;
    color: var(--growth-ink);
    background: linear-gradient(145deg, var(--growth), var(--growth-strong));
    box-shadow: 0 14px 42px rgba(255, 255, 255, 0.24);
}

.growth-card-value {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 4.8rem);
    font-weight: 850;
    line-height: 0.9;
    letter-spacing: -0.08em;
}

.growth-card-value small {
    display: block;
    margin-top: 10px;
    color: rgba(247, 247, 242, 0.58);
    font-size: 0.9rem;
    font-weight: 560;
    letter-spacing: 0;
    line-height: 1.35;
}

.roi-bars-after i,
.growth-chart .chart-columns div:nth-child(5) i {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.96),
            rgba(255, 255, 255, 0.14)
        ),
        rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 0 72px rgba(255, 255, 255, 0.16);
}

.growth-chart .chart-columns div:nth-child(4) b {
    color: rgba(247, 247, 242, 0.96);
}

.growth-chart-note {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.035)
        ),
        rgba(255, 255, 255, 0.035);
}

.growth-chart-note strong {
    color: var(--growth);
    letter-spacing: -0.035em;
}

.growth-chart-note span {
    color: var(--muted);
    line-height: 1.35;
}

.product-signal-grid div:first-child {
    border-color: rgba(255, 255, 255, 0.26);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.028)
        ),
        rgba(255, 255, 255, 0.04);
}

.product-card-top strong {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 14px 48px rgba(255, 255, 255, 0.12);
}

.sales-pricing-card.featured .sales-price {
    color: var(--growth-ink);
}

@keyframes hero-copy-shadow-out {
    0%,
    28% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0.16;
        transform: translate3d(0, 74px, 0) scale(0.94);
        filter: blur(18px);
    }
}

@keyframes hero-panel-shadow-out {
    0%,
    28% {
        border-color: rgba(255, 255, 255, 0.14);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.22),
            inset 0 -1px 0 rgba(255, 255, 255, 0.06),
            0 34px 140px rgba(0, 0, 0, 0.48);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.055);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),
            inset 0 -80px 180px rgba(0, 0, 0, 0.58),
            0 56px 180px rgba(0, 0, 0, 0.62);
    }
}

@media (max-width: 1120px) {
    .sales-nav-links a {
        font-size: 0.82rem;
    }

    .growth-chart-note {
        border-radius: 28px;
        align-items: flex-start;
    }
}

@media (max-width: 760px) {
    .lead-hero-minimal {
        min-height: calc(100dvh - 118px);
        padding: 44px 14px;
    }

    .lead-hero-minimal h1 {
        font-size: clamp(2.72rem, 14vw, 4.1rem);
        max-width: 96%;
    }

    .growth-card-value {
        font-size: clamp(2.05rem, 13vw, 3.7rem);
    }

    .growth-chart-note {
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-hero-copy-centered,
    .lead-hero-minimal {
        animation: none !important;
    }
}

.lead-shell {
    padding-bottom: clamp(76px, 8vw, 112px);
}

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

.lead-hero-minimal {
    min-height: min(700px, calc(100dvh - 104px));
    place-items: center start;
    padding: clamp(48px, 6vw, 76px) clamp(18px, 4vw, 62px);
    border-radius: clamp(30px, 5vw, 56px);
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.012) 46%,
            rgba(255, 255, 255, 0.03)
        ),
        rgba(255, 255, 255, 0.012);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -1px 0 rgba(255, 255, 255, 0.045),
        0 30px 118px rgba(0, 0, 0, 0.46);
}

.lead-hero-minimal::before {
    opacity: 0.44;
    background:
        radial-gradient(
            ellipse at 76% 48%,
            rgba(255, 255, 255, 0.1),
            transparent 24rem
        ),
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.09),
            transparent 22%,
            transparent 72%,
            rgba(255, 255, 255, 0.04)
        );
}

.lead-hero-minimal::after {
    opacity: 0.035;
    background-size: 86px 86px;
    mask-image: radial-gradient(
        ellipse at 68% 50%,
        black 0 28%,
        transparent 72%
    );
}

.lead-hero-copy-centered {
    width: min(720px, 100%);
    max-width: 720px;
    justify-items: start;
    text-align: left;
    margin-inline: 0;
    gap: clamp(15px, 2vw, 22px);
}

.lead-hero-copy-centered .hero-actions-centered {
    justify-content: flex-start;
    margin-inline: 0;
}

.lead-hero-minimal h1 {
    max-width: 720px;
    font-size: clamp(3rem, 5.7vw, 6.35rem);
    line-height: 0.96;
    letter-spacing: -0.083em;
    text-shadow: 0 22px 84px rgba(255, 255, 255, 0.06);
}

.lead-hero-copy-centered .sales-hero-text {
    display: block;
    max-width: 620px;
    color: rgba(247, 247, 242, 0.76);
    font-size: clamp(1rem, 1.22vw, 1.18rem);
    line-height: 1.55;
}

@supports (animation-timeline: view()) {
    .lead-hero-copy-centered {
        animation: lead-copy-scroll-out linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 76%;
    }

    .lead-hero-minimal {
        animation: lead-panel-scroll-out linear both;
        animation-timeline: view();
        animation-range: exit 0% exit 100%;
    }
}

.lead-proof-strip {
    gap: 12px;
    margin: clamp(22px, 3vw, 42px) 0 clamp(74px, 8vw, 118px);
}

.lead-proof-strip article {
    min-height: 142px;
    padding: 20px;
    border-radius: 24px;
}

.lead-proof-strip strong {
    font-size: clamp(1.7rem, 3vw, 3.35rem);
    line-height: 0.98;
}

.lead-proof-strip article:nth-child(3) strong {
    color: var(--growth);
}

.lead-proof-strip article:nth-child(4) strong {
    color: var(--ink-strong);
    font-size: clamp(1.7rem, 3vw, 3.35rem);
}

.lead-proof-strip p,
.impact-card p,
.feature-mosaic p,
.engine-panel p,
.sales-pricing-card li,
.sales-pricing-card small,
.safety-stack strong,
.product-lead-title p,
.product-message-card p,
.product-side-panel p {
    font-size: 0.95rem;
    line-height: 1.5;
}

.lead-impact,
.lead-roi-lab,
.lead-engine,
.lead-features,
.lead-chart-story,
.lead-proof-gallery,
.lead-safety,
.lead-pricing,
.lead-first-briefs,
.lead-request,
.sales-final {
    margin-top: clamp(76px, 8vw, 126px);
}

.lead-section-copy {
    gap: 14px;
    margin-bottom: 26px;
}

.lead-section-copy h2,
.sales-final h2,
.sales-pricing h2 {
    max-width: 900px;
    font-size: clamp(2.15rem, 4.05vw, 4.95rem);
    line-height: 1;
    letter-spacing: -0.066em;
}

.lead-section-copy p:not(.sales-kicker),
.sales-final p {
    max-width: 680px;
    font-size: clamp(0.98rem, 1.08vw, 1.1rem);
    line-height: 1.58;
}

.impact-board {
    grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(170px, 0.62fr));
    grid-auto-rows: minmax(246px, auto);
    gap: 14px;
}

.impact-card {
    padding: clamp(22px, 2.3vw, 30px);
    border-radius: 28px;
}

.impact-card-large {
    grid-row: span 2;
    min-height: 508px;
}

.impact-card h3 {
    font-size: clamp(1.75rem, 2.85vw, 3.45rem);
    line-height: 1;
    letter-spacing: -0.064em;
}

.impact-card strong {
    font-size: clamp(2.25rem, 4.25vw, 5.05rem);
    line-height: 0.92;
}

.growth-metric-card {
    min-height: 246px;
}

.impact-equation b,
.growth-equation em,
.roi-equation b,
.roi-equation i {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.88rem;
}

.roi-lab-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.82fr) minmax(
            260px,
            0.82fr
        );
    gap: 14px;
}

.roi-card {
    min-height: 370px;
    padding: clamp(22px, 2.4vw, 30px);
    border-radius: 28px;
}

.roi-card h3,
.product-lead-title h3 {
    font-size: clamp(1.28rem, 1.75vw, 2rem);
    line-height: 1.05;
    letter-spacing: -0.048em;
}

.roi-card-main h3 {
    font-size: clamp(2rem, 3.75vw, 4.4rem);
    line-height: 0.97;
}

.growth-card-value {
    font-size: clamp(1.95rem, 3.45vw, 4rem);
    line-height: 0.96;
}

.roi-bars {
    min-height: 150px;
}

.engine-console {
    grid-template-columns: minmax(290px, 0.58fr) minmax(0, 1fr);
    gap: 16px;
    padding: clamp(14px, 1.8vw, 22px);
    border-radius: 34px;
}

.engine-main-button {
    min-height: 68px;
    padding: 12px 14px 12px 20px;
    border-radius: 22px;
}

.engine-main-button span {
    font-size: clamp(1.05rem, 1.25vw, 1.28rem);
}

.engine-main-button i {
    width: 40px;
    height: 40px;
}

.engine-step-list {
    gap: 8px;
}

.engine-step-list button {
    gap: 4px;
    padding: 13px 14px;
    border-radius: 18px;
}

.engine-step-list button strong {
    font-size: 0.82rem;
    line-height: 1.35;
}

.engine-console-stage {
    min-height: 500px;
    border-radius: 26px;
}

.engine-panel {
    gap: 18px;
    padding: clamp(24px, 3vw, 38px);
}

.engine-panel h3 {
    max-width: 620px;
    font-size: clamp(1.9rem, 3.65vw, 4.2rem);
    line-height: 1;
    letter-spacing: -0.064em;
}

.engine-panel p {
    max-width: 56ch;
    font-size: 0.98rem;
}

.engine-map {
    height: 190px;
    gap: 12px;
}

.engine-map i {
    min-width: 34px;
    border-radius: 18px;
    animation: none;
}

.engine-meter {
    height: 150px;
}

.verdict-grid b {
    min-height: 92px;
    border-radius: 22px;
}

.learning-rings {
    min-height: 180px;
}

.feature-mosaic {
    grid-auto-rows: minmax(220px, auto);
    gap: 14px;
}

.feature-mosaic article {
    border-radius: 28px;
    padding: clamp(20px, 2vw, 26px);
}

.feature-mosaic h3,
.sales-pricing-card h3,
.product-side-panel strong {
    font-size: clamp(1.25rem, 1.65vw, 1.85rem);
    line-height: 1.08;
}

.feature-tile-large h3 {
    font-size: clamp(2rem, 3.45vw, 4.1rem);
    line-height: 0.98;
}

.chart-glass {
    min-height: auto;
    padding: clamp(24px, 3.8vw, 46px);
    border-radius: 34px;
}

.chart-axis {
    margin-bottom: 18px;
    font-size: 0.66rem;
}

.chart-columns {
    min-height: clamp(430px, 42vw, 560px);
    gap: 16px;
    padding-top: 12px;
}

.chart-columns div {
    min-width: 0;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.026);
}

.chart-columns i {
    min-height: 170px;
    border-radius: 22px 22px 10px 10px;
}

.is-visible .chart-columns div:nth-child(1) i {
    transform: scaleY(0.96);
}
.is-visible .chart-columns div:nth-child(2) i {
    transform: scaleY(0.78);
}
.is-visible .chart-columns div:nth-child(3) i {
    transform: scaleY(0.34);
}
.is-visible .chart-columns div:nth-child(4) i {
    transform: scaleY(0.58);
}
.is-visible .chart-columns div:nth-child(5) i {
    transform: scaleY(0.86);
}

.chart-columns b {
    font-size: clamp(1.35rem, 2.05vw, 2.2rem);
    line-height: 1;
}

.chart-columns span {
    color: rgba(247, 247, 242, 0.66);
    font-size: 0.9rem;
    line-height: 1.42;
}

.chart-line {
    top: 43%;
    opacity: 0.46;
}

.growth-chart-note {
    border-radius: 24px;
    margin-top: 18px;
}

.product-card-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.78fr);
    gap: 14px;
}

.product-live-card {
    min-height: 560px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 30px;
}

.product-lead-title h3 {
    font-size: clamp(2rem, 3.6vw, 4.25rem);
    line-height: 0.98;
}

.product-signal-grid div {
    min-height: 96px;
    border-radius: 20px;
}

.product-decision-rail span {
    min-height: 40px;
    font-size: 0.8rem;
}

.sales-pricing-grid {
    grid-template-columns: minmax(220px, 0.86fr) minmax(280px, 1.24fr) minmax(
            220px,
            0.9fr
        );
    gap: 14px;
    align-items: stretch;
}

.sales-pricing-card {
    min-height: 380px;
    padding: clamp(22px, 2.5vw, 30px);
    border-radius: 28px;
}

.sales-price {
    font-size: clamp(1.75rem, 2.65vw, 2.95rem);
    line-height: 1;
}

.sales-request-grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(380px, 1fr);
    gap: 18px;
}

.first-brief-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) repeat(3, minmax(180px, 0.72fr));
    gap: 14px;
}

.first-brief-grid article {
    position: relative;
    overflow: hidden;
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 218px;
    padding: clamp(20px, 2vw, 26px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 18% 0%,
            rgba(255, 255, 255, 0.12),
            transparent 18rem
        ),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.105),
            rgba(255, 255, 255, 0.032)
        ),
        rgba(255, 255, 255, 0.034);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 24px 90px rgba(0, 0, 0, 0.34);
}

.first-brief-grid article:first-child {
    min-height: 250px;
}

.first-brief-grid span {
    color: rgba(247, 247, 242, 0.58);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.first-brief-grid h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.24rem, 1.55vw, 1.82rem);
    line-height: 1.08;
    letter-spacing: -0.048em;
    text-wrap: balance;
}

.first-brief-grid p {
    margin: 0;
    color: rgba(247, 247, 242, 0.66);
    font-size: 0.95rem;
    line-height: 1.5;
}

.sales-request-panel,
.sales-final {
    border-radius: 32px;
}

.sales-final {
    padding: clamp(42px, 6vw, 72px);
}

@keyframes lead-copy-scroll-out {
    0%,
    24% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0.22;
        transform: translate3d(0, 48px, 0) scale(0.97);
        filter: blur(8px);
    }
}

@keyframes lead-panel-scroll-out {
    0%,
    26% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        transform: translate3d(0, 18px, 0) scale(0.985);
    }
}

@media (max-width: 1180px) {
    .impact-board,
    .roi-lab-grid,
    .sales-pricing-grid,
    .product-card-grid,
    .first-brief-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sample-report-scoreboard,
    .sample-report-flow {
        grid-template-columns: 1fr 1fr;
    }

    .sample-report-boundary-grid {
        grid-template-columns: 1fr;
    }

    .impact-card-large,
    .roi-card-main,
    .sales-pricing-card.featured,
    .product-live-card,
    .first-brief-grid article:first-child {
        grid-column: span 2;
    }

    .engine-console {
        grid-template-columns: 1fr;
    }

    .engine-console-stage {
        min-height: 460px;
    }
}

@media (max-width: 760px) {
    .sales-nav-links a {
        font-size: 0.78rem;
    }

    .sample-report-scoreboard,
    .sample-report-metrics,
    .sample-report-flow,
    .sample-report-decision,
    .sample-report-boundary-grid {
        grid-template-columns: 1fr;
    }

    .sample-report-score {
        min-height: 240px;
    }

    .sample-report-score strong {
        font-size: clamp(3.4rem, 21vw, 5.5rem);
    }

    .lead-hero-minimal {
        min-height: auto;
        padding: 42px 16px 220px;
        border-radius: 30px;
    }

    .lead-hero-copy-centered {
        max-width: none;
        width: 100%;
    }

    .lead-hero-minimal h1 {
        max-width: 100%;
        font-size: clamp(2.55rem, 12.2vw, 3.9rem);
        line-height: 0.98;
        letter-spacing: -0.072em;
    }

    .lead-hero-copy-centered .sales-hero-text {
        font-size: 0.98rem;
    }

    .lead-proof-strip,
    .impact-board,
    .roi-lab-grid,
    .feature-mosaic,
    .sales-pricing-grid,
    .product-card-grid,
    .first-brief-grid,
    .sales-request-grid,
    .product-signal-grid,
    .product-decision-rail {
        grid-template-columns: 1fr;
    }

    .impact-card-large,
    .roi-card-main,
    .sales-pricing-card.featured,
    .product-live-card,
    .first-brief-grid article:first-child {
        grid-column: auto;
    }

    .impact-card-large,
    .product-live-card,
    .sales-pricing-card,
    .roi-card {
        min-height: auto;
    }

    .lead-section-copy h2,
    .sales-final h2,
    .sales-pricing h2 {
        font-size: clamp(2rem, 10.5vw, 3.35rem);
        line-height: 1.02;
        letter-spacing: -0.058em;
    }

    .engine-console-stage {
        min-height: 560px;
    }

    .engine-panel {
        padding: 22px;
    }

    .engine-panel h3 {
        font-size: clamp(1.8rem, 9.5vw, 3rem);
    }

    .chart-columns {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 12px;
    }

    .chart-columns div {
        display: grid;
        grid-template-columns: minmax(88px, 0.32fr) minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        gap: 5px 12px;
    }

    .chart-columns i {
        grid-row: 1 / span 2;
        height: 26px;
        min-height: 26px;
        border-radius: 999px;
        transform-origin: left;
        transform: scaleX(0.18);
    }

    .is-visible .chart-columns div:nth-child(n) i {
        transform: scaleX(1);
    }

    .chart-columns b {
        font-size: 1.35rem;
    }

    .chart-line {
        display: none;
    }

    .sales-final {
        padding: 34px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-hero-copy-centered,
    .lead-hero-minimal {
        animation: none !important;
    }

    body.js-enabled [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Public site v11: composition corrections after browser review */
.impact-card strong,
.growth-card-value,
.sales-price,
.chart-columns b,
.product-signal-grid b {
    overflow-wrap: anywhere;
}

.engine-console,
.chart-glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.engine-panel {
    transform: translate3d(0, 10px, 0) scale(0.995);
    transition:
        opacity 260ms var(--ease),
        transform 260ms var(--ease);
}

@media (min-width: 1181px) {
    .impact-board {
        grid-template-columns:
            minmax(0, 1.12fr) minmax(0, 0.78fr) minmax(0, 0.72fr)
            minmax(0, 0.72fr);
        grid-auto-rows: minmax(232px, auto);
    }

    .impact-card-large {
        grid-column: 1 / span 2;
        grid-row: span 2;
        min-height: 486px;
    }

    .impact-board .growth-metric-card:nth-child(2) {
        grid-column: 3 / span 2;
    }

    .impact-board .growth-metric-card:nth-child(3) {
        grid-column: 3;
    }

    .impact-board .growth-metric-card:nth-child(4) {
        grid-column: 4;
    }

    .growth-metric-card {
        min-height: 232px;
    }
}

@media (min-width: 761px) {
    .chart-glass {
        padding: clamp(28px, 4vw, 54px);
    }

    .chart-columns {
        min-height: clamp(560px, 48vw, 680px);
        align-items: stretch;
        gap: 18px;
    }

    .chart-columns div {
        grid-template-rows: minmax(260px, 1fr) auto minmax(78px, auto);
        align-content: stretch;
        padding: 16px;
    }

    .chart-columns i {
        width: 100%;
        height: 100%;
        min-height: 260px;
        align-self: end;
    }

    .chart-columns b {
        font-size: clamp(1.55rem, 2.35vw, 2.6rem);
    }

    .chart-columns span {
        font-size: 0.92rem;
    }

    .growth-chart-note {
        padding: 18px 20px;
    }
}

@media (max-width: 1180px) and (min-width: 761px) {
    .impact-board .growth-metric-card:nth-child(n) {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .engine-console,
    .chart-glass {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .engine-panel {
        transition:
            opacity 220ms var(--ease),
            transform 220ms var(--ease);
    }
}

/* Public site v12: no broken logo, no broken words, clearer first screen */
.lead-logo.sales-logo {
    display: inline-flex;
    grid-auto-flow: column;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    width: auto;
    min-width: 0;
    max-width: 100%;
    height: 48px;
    padding: 0 15px 0 7px;
    white-space: nowrap;
    overflow: hidden;
}

.lead-logo-mark,
.lead-logo-word,
.lead-logo-sub {
    flex: 0 0 auto;
    min-width: 0;
    line-height: 1;
    white-space: nowrap;
}

.lead-logo-mark {
    display: inline-grid;
    place-items: center;
}

.lead-logo-word {
    display: inline-block;
    transform: translateY(-1px);
}

.lead-logo-sub {
    display: inline-block;
    max-width: 86px;
    color: rgba(247, 247, 242, 0.54);
    font-size: 0.7rem;
    letter-spacing: -0.01em;
    transform: translateY(1px);
}

.impact-card strong,
.growth-card-value,
.sales-price,
.chart-columns b,
.product-signal-grid b,
.lead-proof-strip strong,
.product-card-top strong {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    white-space: nowrap;
}

.impact-card h3,
.roi-card h3,
.engine-panel h3,
.feature-mosaic h3,
.product-lead-title h3,
.sales-pricing-card h3 {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.lead-hero-minimal {
    min-height: min(720px, calc(100dvh - 104px));
    align-items: center;
}

.lead-hero-copy-centered {
    width: min(820px, 100%);
    max-width: 820px;
}

.lead-hero-minimal h1 {
    max-width: none;
    font-size: clamp(3.45rem, 6.4vw, 7.25rem);
    line-height: 0.92;
    letter-spacing: -0.082em;
    white-space: nowrap;
}

.lead-hero-copy-centered .sales-hero-text {
    max-width: 690px;
    font-size: clamp(1.03rem, 1.28vw, 1.22rem);
}

.lead-hero-value-strip {
    width: min(760px, 100%);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 2px;
}

.lead-hero-value-strip article {
    min-width: 0;
    display: grid;
    gap: 8px;
    align-content: space-between;
    min-height: 138px;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 22px;
    background: var(--bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.lead-hero-value-strip span {
    color: rgba(247, 247, 242, 0.52);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Monochrome by design: these numbers used to render in the green
   "growth" accent (with nowrap), which overflowed its own card at
   narrower widths and visually bled into the neighboring card. Now
   plain ink-white, sized to always fit the card, and allowed to wrap
   as a last-resort safety net so a number can never spill outside its
   own rectangle again. */
.lead-hero-value-strip strong {
    color: var(--ink-strong);
    font-size: clamp(1.35rem, 1.9vw, 2.05rem);
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: normal;
    overflow-wrap: break-word;
}

.lead-hero-value-strip p {
    margin: 0;
    color: rgba(247, 247, 242, 0.64);
    font-size: 0.84rem;
    line-height: 1.38;
}

.lead-proof-strip strong {
    font-size: clamp(1.95rem, 3.35vw, 3.75rem);
}

.chart-columns b {
    letter-spacing: -0.055em;
}

@media (min-width: 1181px) {
    .lead-proof-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .lead-logo-sub {
        display: none;
    }

    .lead-hero-minimal h1 {
        white-space: normal;
    }

    .lead-hero-value-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .lead-logo.sales-logo {
        height: 46px;
        padding: 0 8px;
    }

    .lead-logo-word {
        display: inline-block;
        max-width: 52px;
        overflow: hidden;
    }

    .lead-hero-minimal {
        padding-bottom: 250px;
    }

    .lead-hero-minimal h1 {
        white-space: normal;
        font-size: clamp(2.85rem, 13.2vw, 4.2rem);
        line-height: 0.96;
    }

    .lead-hero-value-strip {
        grid-template-columns: 1fr;
    }

    .lead-hero-value-strip article {
        min-height: auto;
    }

    .lead-hero-value-strip strong,
    .lead-proof-strip strong,
    .impact-card strong,
    .growth-card-value,
    .sales-price,
    .chart-columns b {
        white-space: normal;
    }
}

/* Public site v13: strict overflow and rhythm fix */
.impact-card,
.roi-card,
.sales-pricing-card,
.engine-console-stage,
.engine-panel,
.product-live-card,
.product-side-panel article {
    overflow: visible;
}

.impact-card,
.roi-card,
.sales-pricing-card,
.product-live-card,
.product-side-panel article {
    align-content: start;
}

.impact-card p,
.roi-card p,
.roi-card h3,
.sales-pricing-card p,
.sales-pricing-card li,
.engine-panel p,
.product-side-panel p {
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.impact-card strong,
.growth-card-value,
.sales-price {
    max-width: 100%;
    white-space: nowrap;
}

.impact-card strong,
.growth-card-value {
    font-size: clamp(2rem, 3.8vw, 4.35rem);
}

@media (min-width: 1181px) {
    .impact-board {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.85fr) minmax(
                0,
                0.85fr
            );
        grid-auto-rows: minmax(238px, auto);
    }

    .impact-card-large {
        grid-column: 1;
        grid-row: span 2;
        min-height: 500px;
    }

    .impact-board .growth-metric-card:nth-child(2),
    .impact-board .growth-metric-card:nth-child(3),
    .impact-board .growth-metric-card:nth-child(4) {
        grid-column: auto;
    }

    .impact-board .growth-metric-card:nth-child(2) {
        grid-column: 2 / span 2;
    }

    .growth-metric-card {
        min-height: 238px;
    }
}

.roi-lab-grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(300px, 0.82fr) minmax(
            300px,
            0.82fr
        );
    align-items: stretch;
}

.roi-card {
    min-width: 0;
    min-height: 420px;
    gap: 18px;
}

.roi-card-main h3 {
    font-size: clamp(1.85rem, 3.1vw, 3.8rem);
    line-height: 1.02;
}

.roi-card h3 {
    font-size: clamp(1.18rem, 1.42vw, 1.55rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.roi-bars-card {
    align-content: space-between;
}

.roi-bars {
    min-height: 118px;
    max-height: 150px;
    margin-top: auto;
}

.roi-bars i {
    min-width: 0;
}

.sales-pricing-grid {
    grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1.15fr) minmax(
            320px,
            1fr
        );
    align-items: stretch;
}

.sales-pricing-card {
    min-width: 0;
    min-height: 430px;
    gap: 18px;
}

.sales-pricing-card.featured {
    grid-column: auto;
}

.sales-price {
    font-size: clamp(1.65rem, 2.25vw, 2.55rem);
    letter-spacing: -0.058em;
}

.sales-pricing-card h3 {
    font-size: clamp(1.25rem, 1.55vw, 1.75rem);
}

.sales-pricing-card ul {
    padding-left: 16px;
}

.engine-console {
    overflow: visible;
}

.engine-console-stage {
    min-height: 470px;
    overflow: hidden;
}

.engine-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}

.engine-panel h3 {
    max-width: 680px;
    font-size: clamp(1.7rem, 3vw, 3.45rem);
    line-height: 1.04;
}

.engine-panel p {
    max-width: 58ch;
    font-size: 0.94rem;
    line-height: 1.45;
}

.engine-map,
.engine-meter,
.message-stack,
.learning-rings {
    flex: 0 0 auto;
    margin-top: auto;
}

.engine-map {
    height: 130px;
}

.engine-map i {
    height: clamp(34px, 6vw, 78px);
}

.engine-meter {
    height: 120px;
}

.engine-meter i:nth-child(1) {
    transform: translateY(-30px) scaleX(0.72);
}
.engine-meter i:nth-child(3) {
    transform: translateY(30px) scaleX(0.86);
}

.message-stack {
    gap: 10px;
    padding-bottom: 4px;
}

.message-stack i {
    height: 34px;
}

.learning-rings {
    min-height: 148px;
    overflow: hidden;
}

.learning-rings i {
    width: 154px;
}

.learning-rings i:nth-child(2) {
    width: 112px;
}

.learning-rings i:nth-child(3) {
    width: 66px;
}

@media (max-width: 1180px) {
    .roi-lab-grid,
    .sales-pricing-grid {
        grid-template-columns: 1fr;
    }

    .roi-card-main,
    .sales-pricing-card.featured {
        grid-column: auto;
    }

    .roi-card,
    .sales-pricing-card {
        min-height: auto;
    }

    .sales-price,
    .impact-card strong,
    .growth-card-value {
        white-space: normal;
    }
}

@media (max-width: 760px) {
    .engine-console-stage {
        min-height: 500px;
    }

    .engine-map,
    .engine-meter {
        height: 104px;
    }

    .message-stack i {
        height: 28px;
    }

    .learning-rings {
        min-height: 126px;
    }
}

.sales-pricing-card:not(.featured) .sales-price {
    font-size: clamp(1.45rem, 1.85vw, 2.12rem);
    white-space: normal;
}

.sales-pricing-card.featured .sales-price {
    font-size: clamp(1.7rem, 2.15vw, 2.45rem);
}

/* Public site v14: hard containment after visual QA */
.lead-proof-strip article,
.impact-card,
.roi-card,
.feature-mosaic article,
.sales-pricing-card,
.safety-stack article,
.chart-glass,
.engine-console,
.engine-console-stage,
.product-live-card,
.product-side-panel article,
.product-message-card {
    min-width: 0;
    overflow: hidden;
}

.roi-lab-grid,
.sales-pricing-grid,
.product-card-grid,
.product-signal-grid,
.product-decision-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.roi-lab-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
    gap: 14px;
}

.roi-card {
    min-height: 380px;
    padding: clamp(22px, 2.2vw, 30px);
}

.roi-card-main h3 {
    font-size: clamp(1.65rem, 2.65vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
}

.roi-card h3 {
    font-size: clamp(1.05rem, 1.28vw, 1.42rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
}

.growth-card-value {
    font-size: clamp(2rem, 3.25vw, 3.7rem);
}

.growth-card-value small {
    max-width: 100%;
    white-space: normal;
}

.roi-bars {
    min-height: 100px;
    max-height: 132px;
}

.sales-pricing-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sales-pricing-card {
    min-height: 390px;
    padding: clamp(20px, 2.2vw, 28px);
}

.sales-pricing-card h3 {
    font-size: clamp(1.14rem, 1.36vw, 1.58rem);
    line-height: 1.12;
}

.sales-pricing-card .sales-price,
.sales-pricing-card:not(.featured) .sales-price,
.sales-pricing-card.featured .sales-price {
    font-size: clamp(1.38rem, 1.75vw, 2.05rem);
    line-height: 1.06;
    white-space: normal;
}

.product-card-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.55fr);
    gap: 14px;
}

.product-live-card {
    min-height: 520px;
    gap: 18px;
    padding: clamp(22px, 3vw, 34px);
    transform: none;
}

.product-live-card:hover,
.product-live-card[data-tilt] {
    transform: none;
}

.product-lead-title {
    gap: 10px;
}

.product-lead-title h3 {
    max-width: 100%;
    font-size: clamp(1.85rem, 3.15vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -0.062em;
}

.product-lead-title p,
.product-message-card p {
    font-size: 0.95rem;
    line-height: 1.48;
}

.product-decision-rail {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-decision-rail span {
    min-width: 0;
    padding: 0 10px;
    font-size: 0.78rem;
}

.product-signal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-signal-grid div {
    min-width: 0;
    min-height: 88px;
    padding: 14px;
}

.product-signal-grid b {
    font-size: clamp(1.05rem, 1.45vw, 1.38rem);
    white-space: normal;
}

.product-message-card {
    max-width: 100%;
    padding: 16px;
    border-radius: 22px;
}

.engine-console-stage {
    min-height: 450px;
}

.engine-panel h3 {
    font-size: clamp(1.55rem, 2.65vw, 3.1rem);
}

.message-stack i {
    max-width: 100%;
}

@media (max-width: 1180px) {
    .roi-lab-grid,
    .sales-pricing-grid,
    .product-card-grid {
        grid-template-columns: 1fr;
    }

    .product-live-card {
        min-height: auto;
    }
}

@media (max-width: 760px) {
    .product-decision-rail,
    .product-signal-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-lead-title h3 {
        font-size: clamp(1.8rem, 9vw, 3rem);
    }

    .engine-console-stage {
        min-height: 480px;
    }
}

/* ---------------------------------------------------------------------- */
/* /platform page only: hero viewport fit, a double-bezel quick-start card */
/* with a small cyclical progress strip, and a pure-CSS tool-comparison    */
/* switcher. All selectors are prefixed with `platform-` so nothing here   */
/* leaks into shared classes used by other public pages.                  */
/* ---------------------------------------------------------------------- */

.platform-hero {
    align-items: center;
    min-height: min(760px, calc(100dvh - 210px));
    padding-top: clamp(28px, 4vw, 56px);
    padding-bottom: clamp(28px, 4vw, 56px);
}

@media (max-width: 1120px) {
    .platform-hero {
        min-height: auto;
    }
}

.platform-hero-bezel {
    display: grid;
    align-self: stretch;
    padding: 7px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-hero-bezel .platform-hero-note {
    border-radius: 30px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.platform-hero-cycle {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.platform-hero-cycle span {
    position: relative;
    z-index: 1;
    padding: 8px 2px;
    border-radius: 12px;
    color: rgba(247, 247, 242, 0.5);
    font-size: 0.68rem;
    font-weight: 650;
    text-align: center;
    letter-spacing: -0.01em;
}

.platform-hero-cycle::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 16px;
    left: 0;
    width: 25%;
    height: calc(100% - 16px);
    border-radius: 12px;
    background: var(--paper);
    opacity: 0.92;
    animation: platform-cycle-slide 8s var(--ease) infinite;
}

@keyframes platform-cycle-slide {
    0%,
    18% {
        transform: translateX(0%);
    }
    25%,
    43% {
        transform: translateX(100%);
    }
    50%,
    68% {
        transform: translateX(200%);
    }
    75%,
    93% {
        transform: translateX(300%);
    }
    100% {
        transform: translateX(0%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-hero-cycle::before {
        animation: none;
    }
}

/* Interactive tool-comparison switcher: five radio tabs, one visible panel
   at a time via :has(), each panel a two-column split between the picked
   tool's limitation and the matching LIOS behaviour. No JS required. */
.platform-compare-switcher {
    margin-top: 28px;
    display: grid;
    gap: 20px;
}

.platform-compare-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
}

.platform-compare-tab {
    position: relative;
    display: inline-flex;
}

.platform-compare-tab input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.platform-compare-tab span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 640;
    white-space: nowrap;
    transition:
        color 320ms var(--ease),
        background 320ms var(--ease),
        border-color 320ms var(--ease),
        transform 320ms var(--spring);
}

.platform-compare-tab input:hover + span {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.3);
}

.platform-compare-tab input:focus-visible + span {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.platform-compare-tab input:checked + span {
    color: var(--paper-ink);
    background: var(--paper);
    border-color: transparent;
    transform: translateY(-1px);
}

.platform-compare-stage {
    position: relative;
}

.platform-compare-panel {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.08);
}

.platform-compare-switcher:has(input[value="crm"]:checked)
    .platform-compare-panel[data-tool="crm"],
.platform-compare-switcher:has(input[value="list"]:checked)
    .platform-compare-panel[data-tool="list"],
.platform-compare-switcher:has(input[value="mail"]:checked)
    .platform-compare-panel[data-tool="mail"],
.platform-compare-switcher:has(input[value="ai"]:checked)
    .platform-compare-panel[data-tool="ai"],
.platform-compare-switcher:has(input[value="sheet"]:checked)
    .platform-compare-panel[data-tool="sheet"] {
    display: grid;
    animation: platform-compare-in 420ms var(--ease);
}

@keyframes platform-compare-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-compare-panel {
        animation: none !important;
    }
}

.platform-compare-side {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: clamp(22px, 3vw, 32px);
    background: rgba(5, 5, 6, 0.5);
}

.platform-compare-side-lios {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0.06)
        ),
        rgba(5, 5, 6, 0.5);
}

.platform-compare-side span {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.platform-compare-side-lios span {
    color: rgba(7, 7, 8, 0.5);
}

.platform-compare-side strong {
    color: var(--ink-strong);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.platform-compare-side-lios strong {
    color: var(--paper-ink);
}

.platform-compare-side p {
    margin: 0;
    max-width: 44ch;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.platform-compare-side-lios p {
    color: rgba(7, 7, 8, 0.72);
}

@media (max-width: 760px) {
    .platform-compare-panel {
        grid-template-columns: 1fr;
    }

    .platform-hero-cycle span {
        font-size: 0.64rem;
    }
}

/* === /trust: hero fit + access-roles demo panel === */

.security-hero {
    align-content: center;
}

@media (min-width: 901px) {
    .security-hero {
        min-height: calc(100dvh - 190px);
    }
}

.security-hero-copy {
    display: grid;
    gap: clamp(16px, 2vw, 22px);
    align-content: center;
}

.security-hero-note {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

.security-role-grid {
    display: grid;
    align-content: center;
    gap: 10px;
    min-height: 150px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.security-role-grid li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: -0.01em;
}

.security-role-grid li::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.security-role-grid li.is-allowed::before {
    background: var(--ink-strong);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

.security-role-grid li.is-allowed span {
    color: var(--ink);
}

.security-role-grid li.is-restricted::before {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
}

.security-role-grid li.is-restricted span {
    color: var(--muted-2);
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 760px) {
    .security-hero {
        align-content: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .security-hero-note {
        transition: none;
    }
}

.faq-finder-panel {
    position: relative;
    display: grid;
    gap: clamp(18px, 2.2vw, 26px);
    padding: clamp(20px, 2.6vw, 34px);
    border-radius: 42px;
    border: 1px solid var(--line);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.045),
        rgba(255, 255, 255, 0.012)
    );
}

.faq-finder-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.faq-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 260px;
    max-width: 420px;
    padding: 13px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(5, 5, 6, 0.4);
    color: var(--muted);
    transition:
        border-color 320ms ease,
        background 320ms ease;
}

.faq-search svg {
    flex: none;
    opacity: 0.6;
}

.faq-search:focus-within {
    border-color: var(--line-strong);
    background: rgba(5, 5, 6, 0.62);
}

.faq-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.96rem;
    outline: none;
}

.faq-search input::placeholder {
    color: var(--muted-2);
}

.faq-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 2 1 420px;
}

.faq-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.84rem;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
        background 320ms ease,
        border-color 320ms ease,
        color 320ms ease;
}

.faq-tab span {
    font-family: var(--mono);
    font-size: 0.7rem;
    opacity: 0.6;
}

.faq-tab:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.faq-tab.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.faq-tab:active {
    transform: scale(0.97);
}

.faq-finder-status {
    margin: 0;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.faq-item {
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition:
        border-color 320ms ease,
        background 320ms ease;
    animation: faq-item-in 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-item:hover {
    border-color: var(--line-strong);
}

.faq-item.is-open {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-strong);
}

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

.faq-item-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.faq-item-index {
    flex: none;
    min-width: 22px;
    font-family: var(--mono);
    font-size: 0.74rem;
    color: var(--muted-2);
}

.faq-item-question {
    flex: 1;
    font-size: clamp(0.98rem, 1.1vw, 1.08rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.faq-item-icon {
    position: relative;
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--muted);
    transition: color 320ms ease;
}

.faq-item-icon::before,
.faq-item-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: currentColor;
    border-radius: 2px;
    transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-item-icon::before {
    width: 100%;
    height: 1.5px;
}

.faq-item-icon::after {
    width: 1.5px;
    height: 100%;
}

.faq-item.is-open .faq-item-icon {
    color: var(--ink);
}

.faq-item.is-open .faq-item-icon::after {
    transform: rotate(90deg);
}

.faq-item-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 460ms cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-item.is-open .faq-item-answer {
    grid-template-rows: 1fr;
}

.faq-item-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-item-answer-inner p {
    margin: 0;
    padding: 0 22px 22px 60px;
    max-width: 62ch;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.62;
    text-wrap: pretty;
}

.faq-item-answer-inner p a {
    color: var(--ink);
    text-decoration-color: var(--line-strong);
}

.faq-finder-empty {
    margin: 0;
    padding: 28px;
    border-radius: 20px;
    border: 1px dashed var(--line);
    color: var(--muted);
    text-align: center;
    font-size: 0.94rem;
}

@media (max-width: 760px) {
    .faq-finder-panel {
        border-radius: 28px;
    }

    .faq-finder-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .faq-search,
    .faq-tabs {
        max-width: none;
        flex: none;
    }

    .faq-item-trigger {
        padding: 16px;
        gap: 12px;
    }

    .faq-item-answer-inner p {
        padding: 0 16px 20px 16px;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item,
    .faq-item-answer,
    .faq-item-icon::before,
    .faq-item-icon::after,
    .faq-tab,
    .faq-search {
        transition: none;
        animation: none;
    }
}

/* ------------------------------------------------------------------------
   /pricing page only. Everything below is scoped under the "pricing-"
   prefix (plus the plan-fit picker's own attribute selectors) so the
   shared .sales-pricing-grid / .sales-pricing-card rules used on the home
   page stay untouched. Cards keep the "sales-pricing-card" class for the
   generic spotlight/hover behaviour and simply gain "pricing-card" on top
   for pricing-page-only layout. Motion is transform/opacity only.
   ------------------------------------------------------------------------ */

.pricing-hero {
    min-height: min(720px, calc(100dvh - 104px));
    align-items: center;
}

@media (max-width: 1120px) {
    .pricing-hero {
        min-height: auto;
    }
}

.pricing-cards-grid {
    margin-top: clamp(40px, 5vw, 72px);
}

/* Four plans now (Free + Start + Growth + Agency) - a compound selector
   beats the shared, order-dependent .sales-pricing-grid column rules used
   elsewhere on the site regardless of where those happen to sit in the
   cascade. */
.sales-pricing-grid.pricing-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1180px) {
    .sales-pricing-grid.pricing-cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sales-pricing-grid.pricing-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan-fit picker: pure CSS radio + :has() calculator. Selecting a volume
   reveals the matching answer here, and (via .pricing-fit-scope further
   down) highlights the matching plan card in the grid below. */
.pricing-fit-picker {
    position: relative;
    display: grid;
    gap: clamp(16px, 2.2vw, 24px);
    padding: clamp(20px, 2.6vw, 30px);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.045);
}

.pricing-fit-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pricing-fit-option {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition:
        transform 360ms var(--spring),
        background 360ms var(--ease),
        border-color 360ms var(--ease);
}

.pricing-fit-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pricing-fit-option-value {
    color: var(--ink-strong);
    font-family: var(--mono);
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-fit-option strong {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 560;
}

.pricing-fit-option small {
    color: var(--muted-2);
    font-size: 0.78rem;
}

.pricing-fit-option:has(.pricing-fit-radio:checked) {
    border-color: rgba(255, 255, 255, 0.34);
    background: var(--paper);
    transform: translateY(-3px);
}

.pricing-fit-option:has(.pricing-fit-radio:checked) .pricing-fit-option-value,
.pricing-fit-option:has(.pricing-fit-radio:checked) strong,
.pricing-fit-option:has(.pricing-fit-radio:checked) small {
    color: var(--paper-ink);
}

.pricing-fit-option:has(.pricing-fit-radio:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

.pricing-fit-result {
    position: relative;
    min-height: 116px;
}

.pricing-fit-answer {
    position: absolute;
    inset: 0;
    display: none;
    align-content: center;
    gap: 6px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.05);
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    pointer-events: none;
    transition:
        opacity 420ms var(--ease),
        transform 420ms var(--ease);
}

.pricing-fit-answer span {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-fit-answer strong {
    color: var(--ink-strong);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    letter-spacing: -0.02em;
}

.pricing-fit-answer p {
    max-width: 62ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pricing-fit-picker:has(.pricing-fit-radio[value="free"]:checked)
    [data-fit-answer="free"],
.pricing-fit-picker:has(.pricing-fit-radio[value="starter"]:checked)
    [data-fit-answer="starter"],
.pricing-fit-picker:has(.pricing-fit-radio[value="studio"]:checked)
    [data-fit-answer="studio"],
.pricing-fit-picker:has(.pricing-fit-radio[value="agency"]:checked)
    [data-fit-answer="agency"] {
    display: grid;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

/* Plan cards: equal-height columns (grid row stretch already does that),
   with the CTA row pinned to the bottom of every card via flex, regardless
   of how many entitlement lines a given plan has. */
.sales-pricing-card.pricing-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

.pricing-card-list {
    flex: 1 1 auto;
}

.pricing-card-cta {
    display: grid;
    gap: 10px;
    margin-top: auto;
}

.pricing-card-meta {
    color: var(--muted-2);
    font-size: 0.78rem;
}

.sales-pricing-card.pricing-card.featured .pricing-card-meta {
    color: rgba(7, 7, 8, 0.6);
}

.pricing-card-badge {
    position: absolute;
    top: clamp(20px, 2.6vw, 28px);
    right: clamp(20px, 2.6vw, 28px);
    padding: 6px 12px;
    border-radius: 999px;
    color: rgba(7, 7, 8, 0.72);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(7, 7, 8, 0.08);
}

/* Free plan card: same badge shape as "Рекомендуем", but the quiet green
   accent already used for free/no-card state everywhere else (account
   billing panel, trust banner). */
.pricing-card-badge-free {
    color: var(--growth-ink);
    background: var(--growth);
}

.sales-pricing-card.pricing-card.free-plan {
    border-color: var(--growth-line);
}

/* Highlight the plan card that matches the checked picker option. The
   picker and the card grid are separate sections, so the shared
   .pricing-fit-scope ancestor is what lets :has() bridge them. */
.pricing-fit-scope:has(.pricing-fit-radio[value="free"]:checked)
    .pricing-card[data-plan="free"],
.pricing-fit-scope:has(.pricing-fit-radio[value="starter"]:checked)
    .pricing-card[data-plan="starter"],
.pricing-fit-scope:has(.pricing-fit-radio[value="studio"]:checked)
    .pricing-card[data-plan="studio"],
.pricing-fit-scope:has(.pricing-fit-radio[value="agency"]:checked)
    .pricing-card[data-plan="agency"] {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

@media (max-width: 1024px) {
    .pricing-fit-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .pricing-fit-options {
        grid-template-columns: 1fr;
    }

    .pricing-fit-result {
        min-height: 152px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-fit-option,
    .pricing-fit-answer,
    .sales-pricing-card.pricing-card {
        transition: none;
    }
}

/* =========================================================================
   PAGE ENHANCEMENT ZONES (agent write-scope markers)
   Each public marketing page other than "/" gets its own dedicated zone
   below. Only add rules inside the matching zone to keep concurrent edits
   to this shared stylesheet conflict-free. Monochrome only: pure black /
   white (+ existing --paper, --ink, --muted, --line tokens). No new hues.
   ========================================================================= */

/* === ZONE: PRICING PAGE ENHANCEMENTS (/pricing) === */

/* --- Free-plan banner: quiet green-tinted strip right under the hero.
   Renamed from the old "trial" naming once the permanent, no-card-required
   Free plan replaced the time-limited trial framing (billing.py has no
   trial-expiry mechanic - Free really is a standing plan). --- */

.pricing-free-banner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(18px, 3vw, 32px);
    padding: clamp(22px, 3vw, 30px) clamp(24px, 3.4vw, 36px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--growth-line);
    background: var(--growth-soft);
}

.pricing-free-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--growth);
    color: var(--growth-ink);
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 760;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pricing-free-banner h2 {
    margin: 0 0 6px;
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    letter-spacing: -0.01em;
}

.pricing-free-banner p {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.pricing-free-banner .sales-button {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .pricing-free-banner {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

/* --- Contextual strip for visitors bounced here from signup or from the
   /app billing gate (?welcome=1 / ?checkout=required). Neutral/monochrome
   on purpose - it is a status message, not a promo. --- */

.pricing-checkout-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 14px 20px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--glass-strong);
}

.pricing-checkout-notice-kicker {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ink-strong);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pricing-checkout-notice p {
    flex: 1 1 240px;
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.5;
}

.pricing-checkout-notice .sales-button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .pricing-checkout-notice {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- "1 лид-кредит = 1 обработанный лид" explainer steps --- */

.pricing-credit-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.pricing-credit-steps article {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: clamp(20px, 2.4vw, 26px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--glass);
    transition:
        transform 360ms var(--spring),
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.pricing-credit-steps article:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    background: var(--glass-strong);
}

.pricing-credit-steps span {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.pricing-credit-steps strong {
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.pricing-credit-steps p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

/* --- Credit top-up packs --- */

.pricing-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pricing-pack-card {
    display: grid;
    justify-items: start;
    gap: 6px;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--glass);
    transition:
        transform 420ms var(--spring),
        border-color 320ms var(--ease);
}

.pricing-pack-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
}

.pricing-pack-card strong {
    font-family: var(--mono);
    font-size: clamp(1.9rem, 3vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pricing-pack-card > span {
    color: var(--muted-2);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pricing-pack-card .sales-price {
    margin: 8px 0 0;
}

.pricing-pack-note {
    margin: 0 0 14px;
    color: var(--muted-2);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* --- Plan-switch proration example: elevated white card, same "equation
   with arrows" grammar as the home page's impact/roi equations --- */

.pricing-switch-example {
    display: grid;
    gap: 18px;
    margin-top: 28px;
    padding: clamp(24px, 3vw, 34px);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255, 255, 255, 0.95),
            transparent 26rem
        ),
        #ffffff;
    color: var(--paper-ink);
}

.pricing-switch-example > span {
    color: rgba(7, 7, 8, 0.5);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pricing-switch-equation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pricing-switch-equation b,
.pricing-switch-equation i {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-style: normal;
    font-size: 0.9rem;
}

.pricing-switch-equation b {
    color: var(--paper-ink);
    background: rgba(7, 7, 8, 0.08);
}

.pricing-switch-equation i {
    min-height: auto;
    padding: 0 2px;
    color: rgba(7, 7, 8, 0.4);
}

.pricing-switch-equation em {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--growth);
    color: var(--growth-ink);
    font-style: normal;
    font-weight: 760;
}

.pricing-switch-example p {
    margin: 0;
    max-width: 66ch;
    color: rgba(7, 7, 8, 0.62);
    font-size: 0.88rem;
    line-height: 1.6;
}

@media (max-width: 900px) {
    .pricing-credit-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 640px) {
    .pricing-credit-steps {
        grid-template-columns: 1fr;
    }

    .pricing-switch-equation {
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-credit-steps article,
    .pricing-pack-card {
        transition: none;
    }
}

/* === ZONE: PLATFORM PAGE ENHANCEMENTS (/platform) === */

/* --- Hero: ambient monochrome field + tilt on the quick-start card --- */

.platform-hero-decorated {
    position: relative;
    z-index: 0;
}

.platform-hero-decorated::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(
            circle at 16% 18%,
            rgba(255, 255, 255, 0.14),
            transparent 42%
        ),
        radial-gradient(
            circle at 86% 82%,
            rgba(255, 255, 255, 0.07),
            transparent 46%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.05) 0 1px,
            transparent 1px 64px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0 1px,
            transparent 1px 64px
        );
    -webkit-mask-image: radial-gradient(
        circle at 28% 32%,
        rgba(0, 0, 0, 0.9),
        transparent 72%
    );
    mask-image: radial-gradient(
        circle at 28% 32%,
        rgba(0, 0, 0, 0.9),
        transparent 72%
    );
    animation: platform-hero-drift 26s var(--ease) infinite;
}

@keyframes platform-hero-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0, -14px, 0) scale(1.03);
    }
}

.platform-hero-tilt {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

@media (prefers-reduced-motion: reduce) {
    .platform-hero-decorated::before {
        animation: none;
    }
}

/* --- "Из чего состоит LIOS": vertical numbered process rail --- */

.platform-pillars-section {
    margin-top: clamp(72px, 9vw, 128px);
}

.platform-pillars-rail {
    position: relative;
    display: grid;
    gap: clamp(22px, 3.4vw, 40px);
    margin: 8px 0 0;
    padding: 4px 0;
    list-style: none;
}

.platform-pillars-rail::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent,
        var(--line-strong) 8%,
        var(--line-strong) 92%,
        transparent
    );
    transform: translateX(-0.5px);
    pointer-events: none;
}

.platform-pillar {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: center;
    gap: clamp(14px, 2.6vw, 28px);
}

.platform-pillar-index {
    position: relative;
    z-index: 1;
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg-raised);
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.platform-pillar-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    grid-column: 1;
    display: grid;
    gap: 8px;
    padding: 22px 24px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.035),
        rgba(255, 255, 255, 0.01)
    );
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 420ms var(--spring),
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.platform-pillar:nth-child(even) .platform-pillar-card {
    grid-column: 3;
}

.platform-pillar:nth-child(odd) .platform-pillar-card {
    text-align: right;
}

.platform-pillar:nth-child(even) .platform-pillar-card {
    text-align: left;
}

.platform-pillar-card:hover {
    border-color: var(--line-strong);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.016)
    );
}

.platform-pillar-card strong {
    font-size: 1.05rem;
    color: var(--ink-strong);
    letter-spacing: -0.01em;
}

.platform-pillar-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .platform-pillars-rail::before {
        left: 23px;
    }

    .platform-pillar,
    .platform-pillar:nth-child(even) {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
    }

    .platform-pillar-index,
    .platform-pillar:nth-child(even) .platform-pillar-index {
        grid-column: 1;
        width: 34px;
        height: 34px;
        font-size: 0.7rem;
    }

    .platform-pillar-card,
    .platform-pillar:nth-child(even) .platform-pillar-card,
    .platform-pillar:nth-child(odd) .platform-pillar-card {
        grid-column: 2;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-pillar-card {
        transition:
            border-color 320ms var(--ease),
            background 320ms var(--ease);
    }
}

/* --- "Сценарии": horizontal scroll-snapping showcase --- */

.platform-usecases {
    position: relative;
    margin-top: 28px;
}

.platform-usecases-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 300px);
    gap: 16px;
    padding: 6px 4px 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

.platform-usecases-track::-webkit-scrollbar {
    height: 6px;
}

.platform-usecases-track::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: 999px;
}

.platform-usecases-track::-webkit-scrollbar-track {
    background: transparent;
}

.platform-usecase-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    scroll-snap-align: start;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 26px 22px 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0.02)
    );
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 420ms var(--spring),
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease);
}

.platform-usecase-card:nth-child(2) {
    margin-top: 22px;
}

.platform-usecase-card:nth-child(4) {
    margin-top: -22px;
}

.platform-usecase-card:hover,
.platform-usecase-card:focus-within {
    border-color: var(--line-strong);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.platform-usecase-index {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--muted-2);
}

.platform-usecase-tag {
    display: inline-flex;
    align-self: start;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.platform-usecase-card strong {
    font-size: 1.1rem;
    color: var(--ink-strong);
}

.platform-usecase-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.platform-usecases-hint {
    margin: 0;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (min-width: 900px) {
    .platform-usecases-hint {
        display: none;
    }
}

@media (max-width: 760px) {
    .platform-usecase-card:nth-child(2),
    .platform-usecase-card:nth-child(4) {
        margin-top: 0;
    }
}

/* --- Compare section: disclosure notes below the tabbed switcher --- */

.platform-compare-notes {
    margin-top: 22px;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--line);
}

.platform-detail {
    border-bottom: 1px solid var(--line);
}

.platform-detail summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 4px;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 620;
    transition: color 240ms var(--ease);
}

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

.platform-detail summary::after {
    content: "+";
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    font-size: 0.9rem;
    color: var(--muted);
    transition: color 240ms var(--ease);
}

.platform-detail[open] summary::after {
    content: "\2212";
    color: var(--ink);
}

.platform-detail summary:hover,
.platform-detail summary:focus-visible {
    color: var(--ink-strong);
}

.platform-detail summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

.platform-detail p {
    margin: 0 0 16px;
    padding-right: 32px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* --- Boundary list: numbered monochrome checklist grid --- */

.platform-boundary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    background: var(--line);
}

.platform-boundary-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.03);
    transition: background 260ms var(--ease);
}

.platform-boundary-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.platform-boundary-index {
    flex-shrink: 0;
    padding-top: 3px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
}

.platform-boundary-item p {
    margin: 0;
    color: inherit;
    font-size: 0.92rem;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .platform-boundary-list {
        grid-template-columns: 1fr;
    }
}

/* --- Final CTA: slow-drifting outline ring (decorative, monochrome) --- */

.platform-final-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(64vw, 560px);
    height: min(64vw, 560px);
    margin: 0;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    pointer-events: none;
    animation: platform-final-ring-spin 44s linear infinite;
}

@keyframes platform-final-ring-spin {
    to {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .platform-final-ring {
        animation: none;
    }
}

/* === END ZONE: PLATFORM PAGE ENHANCEMENTS === */

/* === ZONE: TRUST / SECURITY PAGE ENHANCEMENTS (/trust) === */

/* Hero: a small hand-built lock glyph sits next to the kicker pill so the
   page reads as "security" before a single word is parsed. Floats gently;
   disabled under reduced motion (and already flattened by the sitewide
   prefers-reduced-motion block above). */
.trust-hero-kicker-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.trust-hero-mark {
    position: relative;
    width: 30px;
    height: 30px;
    flex: none;
    animation: trust-hero-mark-float 5200ms ease-in-out infinite;
}

.trust-hero-mark i {
    display: block;
    position: absolute;
}

.trust-hero-mark i:first-child {
    left: 7px;
    top: 0;
    width: 16px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}

.trust-hero-mark i:last-child {
    left: 2px;
    bottom: 0;
    width: 26px;
    height: 16px;
    border-radius: 5px;
    background: var(--ink-strong);
    box-shadow: inset 0 -4px 7px rgba(0, 0, 0, 0.28);
}

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

@media (prefers-reduced-motion: reduce) {
    .trust-hero-mark {
        animation: none;
    }
}

/* -- Trust ledger: replaces the generic 4-card grid with an audit-log
   style accordion (native <details>/<summary>, no JS required). ------- */
.trust-ledger {
    padding: clamp(26px, 3.6vw, 40px);
    border: 1px solid var(--line);
    border-radius: 34px;
    background: var(--glass);
}

.trust-ledger-head {
    display: grid;
    gap: 14px;
    max-width: 640px;
    margin-bottom: 22px;
}

.trust-ledger-head h2 {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.trust-ledger-head p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 0.96rem;
    line-height: 1.55;
}

.trust-ledger-list {
    display: grid;
    gap: 10px;
}

.trust-ledger-entry {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.trust-ledger-entry:hover,
.trust-ledger-entry:focus-within {
    border-color: var(--line-strong);
}

.trust-ledger-entry[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-strong);
}

.trust-ledger-entry summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    cursor: pointer;
    list-style: none;
}

.trust-ledger-entry summary::-webkit-details-marker {
    display: none;
}

.trust-ledger-entry summary::after {
    content: "+";
    margin-left: auto;
    flex: none;
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1;
    transition:
        transform 320ms var(--spring),
        color 320ms var(--ease);
}

.trust-ledger-entry[open] summary::after {
    transform: rotate(45deg);
    color: var(--ink-strong);
}

.trust-ledger-entry summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.trust-ledger-index {
    flex: none;
    width: 26px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.trust-ledger-label {
    flex: none;
    color: var(--ink-strong);
    font-size: 1rem;
    font-weight: 720;
}

.trust-ledger-state {
    color: var(--muted);
    font-size: 0.88rem;
}

.trust-ledger-entry p {
    margin: 0;
    padding: 0 22px 20px 62px;
    max-width: 640px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .trust-ledger-entry summary {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .trust-ledger-state {
        width: 100%;
        padding-left: 40px;
    }

    .trust-ledger-entry p {
        padding-left: 22px;
    }
}

/* -- Permission matrix: replaces the role tab-switcher with a real table
   of who-can-do-what, with a hover/focus-reveal emphasis per row. ------ */
.trust-matrix-wrap {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    overflow-x: auto;
    padding: clamp(4px, 1vw, 10px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.02);
    transform: perspective(1400px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 520ms var(--spring);
}

@media (prefers-reduced-motion: reduce) {
    .trust-matrix-wrap {
        transition: none;
    }
}

.trust-permission-matrix {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.trust-permission-matrix thead th {
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted-2);
    font-size: 0.74rem;
    font-weight: 640;
    letter-spacing: 0.07em;
    text-align: left;
    text-transform: uppercase;
}

.trust-permission-matrix thead th:not(:first-child) {
    text-align: center;
}

.trust-permission-matrix tbody th {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 620;
    text-align: left;
    white-space: nowrap;
}

.trust-permission-matrix tbody td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}

.trust-permission-matrix tbody tr:last-child th,
.trust-permission-matrix tbody tr:last-child td {
    border-bottom: 0;
}

.trust-permission-matrix tbody tr {
    transition: background 260ms var(--ease);
}

.trust-permission-matrix tbody tr:hover,
.trust-permission-matrix tbody tr:focus-within {
    background: rgba(255, 255, 255, 0.045);
}

.trust-matrix-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.84rem;
    line-height: 1;
    transition: transform 260ms var(--spring);
}

.trust-permission-matrix tbody tr:hover .trust-matrix-mark,
.trust-permission-matrix tbody tr:focus-within .trust-matrix-mark {
    transform: scale(1.16);
}

.trust-permission-matrix td.is-allowed .trust-matrix-mark,
.trust-matrix-legend .trust-matrix-mark.is-allowed {
    color: var(--paper-ink);
    background: var(--paper);
}

.trust-permission-matrix td.is-partial .trust-matrix-mark,
.trust-matrix-legend .trust-matrix-mark.is-partial {
    color: var(--ink-strong);
    background: transparent;
    border: 1.5px dashed var(--line-strong);
}

.trust-permission-matrix td.is-restricted .trust-matrix-mark,
.trust-matrix-legend .trust-matrix-mark.is-restricted {
    color: var(--muted-2);
    background: transparent;
}

.trust-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 14px 18px 16px;
    color: var(--muted);
    font-size: 0.8rem;
}

.trust-matrix-legend span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trust-matrix-legend .trust-matrix-mark {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
}

.trust-matrix-notes {
    display: grid;
    gap: 10px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.trust-matrix-notes li {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.trust-matrix-notes li strong {
    color: var(--ink-strong);
}

/* -- Data manifest: two columns get literally inverted (paper vs. ink)
   so "what we keep" and "what we never do" read as opposites. --------- */
.trust-manifest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.trust-manifest-column {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 26px;
    transition:
        transform 320ms var(--spring),
        border-color 320ms var(--ease);
}

.trust-manifest-column:hover {
    transform: translateY(-4px);
}

.trust-manifest-column h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.trust-manifest-column ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust-manifest-column li {
    position: relative;
    padding-left: 20px;
    font-size: 0.92rem;
    line-height: 1.55;
}

.trust-manifest-column li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.trust-manifest-glyph {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 700;
}

.trust-manifest-column.is-keep {
    background: var(--paper);
    border-color: transparent;
    color: var(--paper-ink);
}

.trust-manifest-column.is-keep li {
    color: rgba(7, 7, 8, 0.72);
}

.trust-manifest-column.is-keep li::before {
    background: var(--paper-ink);
}

.trust-manifest-column.is-keep .trust-manifest-glyph {
    background: var(--paper-ink);
    color: var(--paper);
}

.trust-manifest-column.is-never {
    background: rgba(255, 255, 255, 0.02);
}

.trust-manifest-column.is-never li {
    color: var(--muted);
}

.trust-manifest-column.is-never li::before {
    background: var(--muted-2);
}

.trust-manifest-column.is-never .trust-manifest-glyph {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ink-strong);
    border: 1px solid var(--line-strong);
}

@media (max-width: 760px) {
    .trust-manifest {
        grid-template-columns: 1fr;
    }
}

/* -- Compliance seal: a small dashed "stamp" on the 152-ФЗ section. ----- */
.trust-legal-section {
    position: relative;
    overflow: hidden;
}

.trust-compliance-seal {
    position: absolute;
    top: 26px;
    right: 26px;
    display: grid;
    align-content: center;
    justify-content: center;
    gap: 2px;
    width: 88px;
    height: 88px;
    border: 1.5px dashed rgba(7, 7, 8, 0.32);
    border-radius: 50%;
    transform: rotate(-8deg);
    text-align: center;
    pointer-events: none;
}

.trust-compliance-seal em {
    color: rgba(7, 7, 8, 0.68);
    font-family: var(--mono);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.trust-compliance-seal i {
    color: rgba(7, 7, 8, 0.42);
    font-size: 0.5rem;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .trust-compliance-seal {
        display: none;
    }
}

/* -- Incident-response timeline: vertical, connected steps built from
   native <details>/<summary> instead of the shared engine-console tabs. */
.trust-incident-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust-incident-timeline li {
    position: relative;
    padding-bottom: 14px;
    padding-left: 44px;
}

.trust-incident-timeline li:last-child {
    padding-bottom: 0;
}

.trust-incident-timeline li::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 14px;
    bottom: -14px;
    width: 2px;
    background: var(--line);
}

.trust-incident-timeline li:last-child::before {
    display: none;
}

.trust-incident-node {
    position: absolute;
    top: 14px;
    left: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.78rem;
    transition:
        transform 300ms var(--spring),
        background 300ms var(--ease),
        color 300ms var(--ease),
        border-color 300ms var(--ease);
}

.trust-incident-step {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.trust-incident-step:hover,
.trust-incident-step:focus-within {
    border-color: var(--line-strong);
}

.trust-incident-step[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-strong);
}

.trust-incident-step[open] .trust-incident-node {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--paper-ink);
    transform: scale(1.06);
}

.trust-incident-step summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    cursor: pointer;
    list-style: none;
}

.trust-incident-step summary::-webkit-details-marker {
    display: none;
}

.trust-incident-step summary::after {
    content: "+";
    margin-left: auto;
    flex: none;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    transition:
        transform 320ms var(--spring),
        color 320ms var(--ease);
}

.trust-incident-step[open] summary::after {
    transform: rotate(45deg);
    color: var(--ink-strong);
}

.trust-incident-step summary:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.trust-incident-tag {
    flex: none;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trust-incident-title {
    color: var(--ink-strong);
    font-size: 0.98rem;
    font-weight: 700;
}

.trust-incident-step p {
    margin: 0;
    max-width: 600px;
    padding: 0 18px 18px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.trust-incident-outcomes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 18px 18px;
}

.trust-incident-outcomes span {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .trust-incident-timeline li {
        padding-left: 38px;
    }

    .trust-incident-node {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .trust-incident-step summary {
        flex-wrap: wrap;
    }
}

/* -- Retention strip: replaces the 3-card grid with duration-style bars. */
.trust-retention-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.trust-retention-strip article {
    display: grid;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    transition:
        transform 320ms var(--spring),
        border-color 320ms var(--ease);
}

.trust-retention-strip article:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
}

.trust-retention-bar {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.trust-retention-bar span {
    display: block;
    height: 100%;
    width: var(--bar-fill, 50%);
    border-radius: 999px;
    background: var(--ink-strong);
    transition:
        background 260ms var(--ease),
        box-shadow 260ms var(--ease);
}

.trust-retention-strip article:hover .trust-retention-bar span {
    background: var(--paper);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.trust-retention-tag {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.trust-retention-strip strong {
    color: var(--ink-strong);
    font-size: 1.05rem;
    font-weight: 700;
}

.trust-retention-strip p {
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .trust-retention-strip {
        grid-template-columns: 1fr;
    }
}

/* === END ZONE: TRUST / SECURITY PAGE ENHANCEMENTS === */

/* === ZONE: PRICING PAGE ENHANCEMENTS (/pricing) === */

/* Comparison table: same plan data as the cards above, laid out as a
   scannable grid instead of three columns of prose. The featured plan
   (Studio) gets the same light/white column treatment the featured card
   already uses, so the two views agree visually. */
.pricing-compare-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    -webkit-overflow-scrolling: touch;
}

.pricing-compare-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.pricing-compare-table th,
.pricing-compare-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.pricing-compare-table thead th {
    padding-top: 20px;
    vertical-align: top;
    background: var(--bg-soft);
}

.pricing-compare-table tbody th {
    color: var(--muted);
    font-weight: 560;
    font-size: 0.92rem;
    white-space: normal;
}

.pricing-compare-table td {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.94rem;
}

.pricing-compare-plan-name {
    display: block;
    color: var(--ink-strong);
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: 720;
    letter-spacing: -0.01em;
}

.pricing-compare-plan-price {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 480;
    white-space: normal;
}

.pricing-compare-cta {
    display: inline-flex;
    margin-top: 10px;
    color: var(--ink);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 620;
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    transition:
        color 220ms var(--ease),
        border-color 220ms var(--ease),
        transform 220ms var(--ease);
}

.pricing-compare-cta:hover,
.pricing-compare-cta:focus-visible {
    color: var(--ink-strong);
    border-color: var(--ink-strong);
    transform: translateX(2px);
}

.pricing-compare-cta:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

.pricing-compare-table tbody tr {
    transition: background 220ms var(--ease);
}

.pricing-compare-table tbody tr:hover {
    background: var(--glass);
}

.pricing-compare-table th.is-featured-col,
.pricing-compare-table td.is-featured-col {
    background: var(--paper);
}

.pricing-compare-table tbody tr:hover td.is-featured-col {
    background: var(--paper-soft);
}

.pricing-compare-table td.is-featured-col,
.pricing-compare-table th.is-featured-col .pricing-compare-plan-name,
.pricing-compare-table th.is-featured-col .pricing-compare-plan-price {
    color: var(--paper-ink);
}

.pricing-compare-table th.is-featured-col .pricing-compare-cta {
    color: var(--paper-ink);
    border-color: rgba(7, 7, 8, 0.32);
}

.pricing-compare-table th.is-featured-col .pricing-compare-cta:hover,
.pricing-compare-table th.is-featured-col .pricing-compare-cta:focus-visible {
    color: var(--paper-ink);
    border-color: rgba(7, 7, 8, 0.65);
}

/* Native accordion for pricing-specific fine print. Strip the default
   marker and draw a plus/rotate indicator instead, matching the plus/minus
   accordion pattern used elsewhere on the site. */
.pricing-faq-list {
    display: grid;
    gap: 0;
}

.pricing-faq-item {
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
}

.pricing-faq-item:first-child {
    border-top: 1px solid var(--line);
}

.pricing-faq-item summary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 34px 18px 2px;
    color: var(--ink-strong);
    font-size: clamp(1rem, 1.3vw, 1.14rem);
    font-weight: 620;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
}

.pricing-faq-item summary::-webkit-details-marker {
    display: none;
}

.pricing-faq-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 2px;
    width: 12px;
    height: 12px;
    transform: translateY(-50%);
    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            var(--muted) 45%,
            var(--muted) 55%,
            transparent 55%
        ),
        linear-gradient(
            to right,
            transparent 45%,
            var(--muted) 45%,
            var(--muted) 55%,
            transparent 55%
        );
    transition: transform 280ms var(--spring);
}

.pricing-faq-item[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
    opacity: 0;
}

.pricing-faq-item summary:hover,
.pricing-faq-item summary:focus-visible {
    color: var(--ink-strong);
}

.pricing-faq-item summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}

.pricing-faq-item p {
    max-width: 68ch;
    margin: -4px 0 20px;
    padding-right: 34px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.6;
}

@media (max-width: 760px) {
    .pricing-compare-table {
        min-width: 560px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-compare-cta,
    .pricing-compare-table tbody tr,
    .pricing-faq-item summary::after {
        transition: none;
    }
}

/* === END ZONE: PRICING PAGE ENHANCEMENTS === */

/* === ZONE: FAQ + HELP PAGE ENHANCEMENTS (/faq, /help) === */

/* ------------------------------------------------------------------------
   /faq — the question list is native <details>/<summary> (zero JS needed
   to open/close, fully keyboard operable, exposes state to assistive tech
   automatically). The live search + topic tabs above the list stay JS,
   but the accordion itself works with JS disabled. Each item also carries
   its own [data-reveal] so the list cascades in on scroll rather than
   popping in as one block; --i (set inline per item) drives the stagger.
   ------------------------------------------------------------------------ */

.faq-item[data-reveal] {
    animation: none;
    transition-delay: calc(var(--i, 0) * 55ms);
}

.faq-item-trigger::marker,
.faq-item-trigger::-webkit-details-marker {
    display: none;
}

.faq-item-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: -2px;
    border-radius: 16px;
}

.faq-item[open] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--line-strong);
}

.faq-item[open] .faq-item-icon {
    color: var(--ink);
}

.faq-item[open] .faq-item-icon::after {
    transform: rotate(90deg);
}

.faq-item[open] .faq-item-answer-inner {
    animation: faq-answer-in 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

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

/* "Следующий шаг" leaves the generic 4-up sales-trust-gates card grid used
   everywhere else on the site and becomes a quiet, editorial row list —
   numbered rows separated only by hairlines, with the destination sliding
   into view on hover/focus. Distinct shape from the Help page's tiles. */
.faq-route-rail {
    display: grid;
}

.faq-route-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    padding: clamp(18px, 2.4vw, 26px) 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 320ms ease,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.faq-route-rail > .faq-route-row:first-child {
    border-top: 1px solid var(--line);
}

.faq-route-row-num {
    font-family: var(--mono);
    font-size: 0.76rem;
    color: var(--muted-2);
}

.faq-route-row-text {
    display: grid;
    gap: 4px;
}

.faq-route-row-label {
    color: var(--muted);
    font-size: 0.82rem;
}

.faq-route-row-title {
    font-size: clamp(1.02rem, 1.4vw, 1.16rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.faq-route-row-note {
    display: block;
    max-width: 56ch;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.faq-route-row-arrow {
    color: var(--muted-2);
    font-size: 1.2rem;
    transition:
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
        color 320ms ease;
}

.faq-route-row:hover,
.faq-route-row:focus-visible {
    border-color: var(--line-strong);
    transform: translateX(4px);
}

.faq-route-row:hover .faq-route-row-arrow,
.faq-route-row:focus-visible .faq-route-row-arrow {
    color: var(--ink);
    transform: translateX(4px);
}

.faq-route-row:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .faq-route-row {
        grid-template-columns: auto 1fr;
    }

    .faq-route-row-arrow {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .faq-item[open] .faq-item-answer-inner {
        animation: none;
    }

    .faq-route-row,
    .faq-route-row-arrow {
        transition: none;
    }

    .faq-route-row:hover,
    .faq-route-row:focus-visible {
        transform: none;
    }
}

/* ------------------------------------------------------------------------
   /help — quick routes become an asymmetric bento: one large "start here"
   tile plus link tiles of a normal size, and two flat "info" tiles (no
   href) that read differently on purpose, since they are boundaries, not
   destinations. Distinct shape from the FAQ page's row list.
   ------------------------------------------------------------------------ */
.help-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.help-quick-tile {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    grid-column: span 2;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--line);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 320ms ease,
        background 320ms ease,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
}

.help-quick-tile-lead {
    grid-column: span 4;
    grid-row: span 2;
    padding: clamp(28px, 3.2vw, 40px);
    background: linear-gradient(
        160deg,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.015)
    );
}

.help-quick-tile-lead .help-quick-tile-title {
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

.help-quick-tile-lead p {
    max-width: 46ch;
}

.help-quick-tile[href]:hover,
.help-quick-tile[href]:focus-visible {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-3px);
}

.help-quick-tile[href]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.help-quick-tile-kicker {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-quick-tile-title {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem);
    font-weight: 620;
    letter-spacing: -0.01em;
}

.help-quick-tile p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.help-quick-tile-path {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.86em;
}

.help-quick-tile-arrow {
    position: absolute;
    top: clamp(20px, 2.4vw, 28px);
    right: clamp(20px, 2.4vw, 28px);
    color: var(--muted-2);
    font-size: 1.1rem;
    transition:
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
        color 320ms ease;
}

.help-quick-tile[href]:hover .help-quick-tile-arrow,
.help-quick-tile[href]:focus-visible .help-quick-tile-arrow {
    color: var(--ink);
    transform: translate(3px, -3px);
}

.help-quick-tile-info {
    grid-column: span 2;
    border-style: dashed;
    background: transparent;
    color: var(--muted);
}

.help-quick-tile-info .help-quick-tile-title {
    color: var(--ink);
}

@media (max-width: 1000px) {
    .help-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-quick-tile-lead {
        grid-column: span 2;
        grid-row: auto;
    }
}

@media (max-width: 640px) {
    .help-quick-grid {
        grid-template-columns: 1fr;
    }

    .help-quick-tile,
    .help-quick-tile-lead,
    .help-quick-tile-info {
        grid-column: span 1;
    }
}

/* Contact cards: collapsed to label + handle, and expand on hover/focus to
   reveal a response-time detail line. The handle itself is a copy-friendly
   highlight (monospace chip, selectable in one click). Pure CSS, no JS. */
.help-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.help-contact-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 4px 16px;
    padding: clamp(20px, 2.4vw, 26px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 320ms ease,
        background 320ms ease;
    transition-delay: calc(var(--i, 0) * 70ms);
}

.help-contact-card-mark {
    grid-row: 1 / 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    transition:
        color 320ms ease,
        border-color 320ms ease;
}

.help-contact-card-label {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-contact-card-handle {
    font-family: var(--mono);
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    -webkit-user-select: all;
    user-select: all;
}

.help-contact-card-detail {
    grid-column: 2;
    display: block;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 320ms ease,
        transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.help-contact-card:hover,
.help-contact-card:focus-visible {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.05);
}

.help-contact-card:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.help-contact-card:hover .help-contact-card-mark,
.help-contact-card:focus-visible .help-contact-card-mark {
    color: var(--ink);
    border-color: var(--ink);
}

.help-contact-card:hover .help-contact-card-detail,
.help-contact-card:focus-visible .help-contact-card-detail {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 640px) {
    .help-contact-grid {
        grid-template-columns: 1fr;
    }

    .help-contact-card-detail {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-quick-tile,
    .help-quick-tile-arrow,
    .help-contact-card,
    .help-contact-card-mark,
    .help-contact-card-detail {
        transition: none;
    }

    .help-quick-tile[href]:hover,
    .help-quick-tile[href]:focus-visible {
        transform: none;
    }
}

/* === END ZONE: FAQ + HELP PAGE ENHANCEMENTS === */

/* === ZONE: BELL STUDIO + STATUS + LEGAL PAGE ENHANCEMENTS (/bell-studio, /status, /legal) === */

/* ---- /bell-studio: editorial values list (replaces generic card grid) ---- */
.studio-values {
    margin-top: 28px;
}

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

.studio-value {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 26px 6px;
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-sm);
    transition: background 420ms var(--ease);
}

.studio-value:hover,
.studio-value:focus-within {
    background: var(--glass);
}

.studio-value-index {
    font-family: var(--mono);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: var(--muted-2);
    transition:
        color 420ms var(--ease),
        transform 420ms var(--spring);
}

.studio-value:hover .studio-value-index,
.studio-value:focus-within .studio-value-index {
    color: var(--ink-strong);
    transform: translateX(2px);
}

.studio-value-body {
    display: grid;
    gap: 6px;
}

.studio-value-label {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.studio-value-body strong {
    color: var(--ink-strong);
    font-size: 1.14rem;
    font-weight: 700;
}

.studio-value-body p {
    margin: 0;
    max-width: 62ch;
    color: var(--muted);
    line-height: 1.6;
    opacity: 0.72;
    transform: translateX(0);
    transition:
        opacity 420ms var(--ease),
        transform 420ms var(--ease);
}

.studio-value:hover .studio-value-body p,
.studio-value:focus-within .studio-value-body p {
    opacity: 1;
    transform: translateX(3px);
}

/* ---- /bell-studio: large pull-quote treatment ---- */
.studio-pull-quote {
    margin: clamp(72px, 9vw, 132px) auto 0;
    max-width: 780px;
    padding: 0 6px;
    text-align: center;
    transition: transform 480ms var(--spring);
}

.studio-pull-quote blockquote {
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(1.5rem, 3vw, 2.35rem);
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1.28;
}

.studio-pull-quote:hover,
.studio-pull-quote:focus-within {
    transform: translateY(-3px);
}

.studio-pull-quote figcaption {
    margin-top: 18px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

/* ---- /bell-studio: distinctive team-note block ---- */
.studio-note {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    margin-top: clamp(72px, 9vw, 132px);
    padding: clamp(28px, 4vw, 40px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--glass);
}

.studio-note-mark {
    color: var(--muted-2);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1;
}

.studio-note-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.studio-note-sign {
    margin-top: 12px !important;
    color: var(--muted-2) !important;
    font-family: var(--mono);
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}

@media (max-width: 760px) {
    .studio-value {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .studio-note {
        grid-template-columns: 40px minmax(0, 1fr);
    }
}

/* ---- /status: vertical status timeline/checklist ---- */
.status-timeline {
    position: relative;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.status-timeline::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 21px;
    top: 26px;
    bottom: 26px;
    width: 1px;
    background: var(--line);
}

.status-timeline-item,
.status-timeline-divider {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 18px 10px;
    border-radius: var(--radius-sm);
    transition: background 420ms var(--ease);
}

.status-timeline-item:hover {
    background: var(--glass);
}

.status-timeline-marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.76rem;
}

.status-timeline-item.is-done .status-timeline-marker {
    border-color: var(--paper);
    background: var(--paper);
}

.status-timeline-item.is-done .status-timeline-marker::after {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 2px solid var(--paper-ink);
    border-bottom: 2px solid var(--paper-ink);
    transform: rotate(-45deg) translate(1px, -1px);
}

.status-timeline-item.is-progress .status-timeline-marker {
    background: var(--bg-raised);
    border-style: dashed;
}

.status-timeline-divider .status-timeline-marker {
    width: 8px;
    height: 8px;
    margin: 18px auto;
    border: none;
    background: var(--muted-2);
}

.status-timeline-divider-label {
    align-self: center;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-timeline-tag {
    display: block;
    margin-bottom: 6px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.status-timeline-card h3 {
    margin: 0 0 6px;
    color: var(--ink-strong);
    font-size: 1.08rem;
}

.status-timeline-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.status-timeline-card a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
}

.status-timeline-track {
    overflow: hidden;
    margin-top: 12px;
    height: 3px;
    border-radius: 999px;
    background: var(--line);
}

.status-timeline-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--paper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--ease);
}

.status-timeline-item.is-visible .status-timeline-track i {
    transform: scaleX(var(--fill, 0));
}

@media (max-width: 760px) {
    .status-timeline::before {
        left: 17px;
    }

    .status-timeline-item,
    .status-timeline-divider {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 6px;
    }

    .status-timeline-marker {
        width: 36px;
        height: 36px;
        font-size: 0.68rem;
    }
}

/* ---- /legal: expandable accordion summary ---- */
.legal-accordion-section {
    margin-top: 28px;
}

.legal-accordion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.legal-accordion-item {
    padding: 4px 22px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.legal-accordion-item summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 30px 18px 0;
    list-style: none;
    cursor: pointer;
}

.legal-accordion-item summary::-webkit-details-marker {
    display: none;
}

.legal-accordion-item summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 2px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 1.15rem;
    transform: translateY(-50%);
    transition:
        color 320ms var(--ease),
        transform 320ms var(--spring);
}

.legal-accordion-item[open] summary::after {
    content: "\2212";
    color: var(--ink-strong);
}

.legal-accordion-tag {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.legal-accordion-item summary strong {
    color: var(--ink-strong);
    font-size: 0.98rem;
    font-weight: 650;
    transition: color 320ms var(--ease);
}

.legal-accordion-item:hover summary strong,
.legal-accordion-item:focus-within summary strong {
    color: var(--ink-strong);
}

.legal-accordion-item:hover summary .legal-accordion-tag {
    color: var(--ink);
}

.legal-accordion-item p {
    max-width: 46ch;
    margin: 0 0 20px;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 760px) {
    .legal-accordion {
        grid-template-columns: 1fr;
    }

    .legal-accordion-item summary {
        flex-wrap: wrap;
    }
}

/* ---- /legal: numbered document clauses (replaces card-grid sub-sections) ---- */
.legal-clause {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 22px;
}

.legal-clause-number {
    grid-column: 1;
    grid-row: 1 / -1;
    padding-top: 6px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.legal-clause > .sales-section-head,
.legal-clause > .legal-clause-grid,
.legal-clause > .legal-clause-list,
.legal-clause > p {
    grid-column: 2;
}

.legal-clause-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px 28px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.legal-clause-grid article {
    display: grid;
    align-content: start;
    gap: 8px;
    padding-left: 20px;
    border-left: 1px solid var(--line);
}

.legal-clause-grid article > span:first-child {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.legal-clause-grid article strong,
.legal-clause-grid article h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 1.02rem;
}

.legal-clause-grid article p,
.legal-clause-grid article ul {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.legal-clause-grid article ul {
    display: grid;
    gap: 6px;
    padding-left: 18px;
}

.legal-clause-list {
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.legal-clause-list ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 20px;
    color: var(--muted);
    line-height: 1.6;
}

.legal-clause-list p {
    margin-top: 20px;
}

@media (max-width: 760px) {
    .legal-clause {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 14px;
    }

    .legal-clause-grid article {
        padding-left: 14px;
    }
}

/* === END ZONE: BELL STUDIO + STATUS + LEGAL PAGE ENHANCEMENTS === */

/* === PREMIUM CARD INTERACTION: 3D tilt + glare sweep (monochrome) === */
/* Adds real depth and light-catching interactivity to the flat "glass"
   cards used across the platform/trust/home pages, in the same visual
   language as the Belo Studio bento cards: perspective tilt driven by the
   --tilt-x/--tilt-y custom properties already set by [data-tilt] in
   public-site.js, a deeper resting shadow and a diagonal sheen that sweeps
   across the card on hover/focus. Purely additive - existing card
   backgrounds/colors (including the light "featured" and paper cards) are
   left untouched, and cards that rely on overflow:visible elsewhere in
   this file are intentionally excluded. */
.lead-proof-strip article,
.feature-mosaic article,
.safety-stack article,
.sales-request-panel,
.sales-trust-note,
.sales-trust-matrix article,
.sales-trust-columns article,
.sales-trust-gates article,
.sales-review-state,
.sales-trust-section,
.proof-shot,
.proof-reel-frame,
.proof-reel-scene,
.chart-glass,
.home-feature-card,
.impact-card.growth-metric-card,
.roi-card.roi-bars-card,
.platform-pillar-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 34px 90px -46px rgba(0, 0, 0, 0.7);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition:
        transform 420ms var(--spring),
        box-shadow 360ms var(--ease),
        border-color 320ms var(--ease);
}

.lead-proof-strip article:hover,
.feature-mosaic article:hover,
.safety-stack article:hover,
.sales-request-panel:hover,
.sales-trust-note:hover,
.sales-trust-matrix article:hover,
.sales-trust-columns article:hover,
.sales-trust-gates article:hover,
.sales-review-state:hover,
.sales-trust-section:hover,
.proof-shot:hover,
.proof-reel-frame:hover,
.proof-reel-scene:hover,
.chart-glass:hover,
.home-feature-card:hover,
.impact-card.growth-metric-card:hover,
.roi-card.roi-bars-card:hover,
.platform-pillar-card:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 44px 110px -40px rgba(0, 0, 0, 0.8);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg)) translateY(-6px);
}

.lead-proof-strip article::after,
.feature-mosaic article::after,
.safety-stack article::after,
.sales-request-panel::after,
.sales-trust-note::after,
.sales-trust-matrix article::after,
.sales-trust-columns article::after,
.sales-trust-gates article::after,
.sales-review-state::after,
.sales-trust-section::after,
.proof-shot::after,
.proof-reel-frame::after,
.proof-reel-scene::after,
.chart-glass::after,
.home-feature-card::after,
.impact-card.growth-metric-card::after,
.roi-card.roi-bars-card::after,
.platform-pillar-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0 36%,
        rgba(255, 255, 255, 0.18) 48%,
        transparent 60% 100%
    );
    opacity: 0.55;
    pointer-events: none;
    transform: translateX(-125%);
    transition: transform 900ms var(--ease);
}

.lead-proof-strip article:hover::after,
.feature-mosaic article:hover::after,
.safety-stack article:hover::after,
.sales-request-panel:hover::after,
.sales-trust-note:hover::after,
.sales-trust-matrix article:hover::after,
.sales-trust-columns article:hover::after,
.sales-trust-gates article:hover::after,
.sales-review-state:hover::after,
.sales-trust-section:hover::after,
.proof-shot:hover::after,
.proof-reel-frame:hover::after,
.proof-reel-scene:hover::after,
.chart-glass:hover::after,
.home-feature-card:hover::after,
.impact-card.growth-metric-card:hover::after,
.roi-card.roi-bars-card:hover::after,
.platform-pillar-card:hover::after {
    transform: translateX(125%);
}

@media (prefers-reduced-motion: reduce) {
    .lead-proof-strip article,
    .feature-mosaic article,
    .safety-stack article,
    .sales-request-panel,
    .sales-trust-note,
    .sales-trust-matrix article,
    .sales-trust-columns article,
    .sales-trust-gates article,
    .sales-review-state,
    .sales-trust-section,
    .proof-shot,
    .proof-reel-frame,
    .proof-reel-scene,
    .chart-glass,
    .home-feature-card,
    .impact-card.growth-metric-card,
    .roi-card.roi-bars-card,
    .platform-pillar-card {
        transform: none !important;
    }
}

/* === CARD DEPTH ENHANCEMENT: tilt + glow, no clipping (monochrome) === */
/* .sales-pricing-card, .sales-request-panel, .engine-console,
   .product-live-card, the bare .roi-card and the bare .impact-card were
   left out of the premium block above because overflow on their bases is
   controlled elsewhere in this file for layout reasons, and the sliding
   glare there needs overflow: hidden to clip correctly. Overflow is never
   touched here. Depth instead comes from a brightening outer box-shadow
   glow plus a border-color brighten on hover/focus, and the same
   perspective tilt transform as the premium block so elements with
   [data-tilt] keep responding to public-site.js pointer tracking. Strictly
   monochrome (white/black alpha only); backgrounds are untouched.
   .impact-card-large and .roi-card-main (paper cards) are excluded via
   :not(), as are .impact-card.growth-metric-card and .roi-card.roi-bars-card,
   which already get the full premium treatment above - this avoids
   re-declaring box-shadow/transform for them at equal-or-higher
   specificity. .sales-pricing-card.pricing-card is included explicitly
   because that compound selector already sets its own (non-perspective)
   transform elsewhere with matching specificity, so it needs to be listed
   here too for the perspective tilt to win. Note: .sales-pricing-card.featured
   keeps its own paper-card box-shadow, which is declared with !important
   elsewhere in this file, so only its border-color/transform pick up the
   enhancement below - this mirrors how that existing !important rule
   already behaves with the generic hover rule earlier in the file. */
.sales-pricing-card,
.sales-pricing-card.pricing-card,
.sales-request-panel,
.engine-console,
.product-live-card,
.roi-card:not(.roi-card-main):not(.roi-bars-card),
.impact-card:not(.impact-card-large):not(.growth-metric-card) {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.4),
        0 32px 90px -42px rgba(0, 0, 0, 0.68),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition:
        transform 420ms var(--spring),
        box-shadow 360ms var(--ease),
        border-color 320ms var(--ease);
}

.sales-pricing-card:hover,
.sales-pricing-card:focus-visible,
.sales-pricing-card.pricing-card:hover,
.sales-pricing-card.pricing-card:focus-visible,
.sales-request-panel:hover,
.sales-request-panel:focus-visible,
.engine-console:hover,
.engine-console:focus-visible,
.product-live-card:hover,
.product-live-card:focus-visible,
.roi-card:not(.roi-card-main):not(.roi-bars-card):hover,
.roi-card:not(.roi-card-main):not(.roi-bars-card):focus-visible,
.impact-card:not(.impact-card-large):not(.growth-metric-card):hover,
.impact-card:not(.impact-card-large):not(.growth-metric-card):focus-visible {
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        inset 0 -1px 0 rgba(0, 0, 0, 0.42),
        0 46px 130px -34px rgba(0, 0, 0, 0.8),
        0 0 64px rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.26);
    transform: perspective(1200px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg)) translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .sales-pricing-card,
    .sales-pricing-card.pricing-card,
    .sales-request-panel,
    .engine-console,
    .product-live-card,
    .roi-card:not(.roi-card-main):not(.roi-bars-card),
    .impact-card:not(.impact-card-large):not(.growth-metric-card) {
        transition:
            box-shadow 360ms var(--ease),
            border-color 320ms var(--ease);
    }

    .sales-pricing-card:hover,
    .sales-pricing-card.pricing-card:hover,
    .sales-request-panel:hover,
    .engine-console:hover,
    .product-live-card:hover,
    .roi-card:not(.roi-card-main):not(.roi-bars-card):hover,
    .impact-card:not(.impact-card-large):not(.growth-metric-card):hover {
        transform: none !important;
    }
}

/* === GLARE COMPLETION: .sales-pricing-card / .engine-console /
   .product-live-card already resolve to overflow: hidden by the time the
   cascade finishes (see the "v14: hard containment" rule earlier in this
   file), so it's safe to give them the same diagonal light-sweep as the
   main premium-card block. .featured keeps its own !important paper-card
   background/box-shadow untouched - only the sweep is added. */
.sales-pricing-card::after,
.engine-console::after,
.product-live-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(
        115deg,
        transparent 0 36%,
        rgba(255, 255, 255, 0.16) 48%,
        transparent 60% 100%
    );
    opacity: 0.5;
    pointer-events: none;
    transform: translateX(-125%);
    transition: transform 900ms var(--ease);
}

.sales-pricing-card:hover::after,
.sales-pricing-card:focus-visible::after,
.engine-console:hover::after,
.engine-console:focus-visible::after,
.product-live-card:hover::after,
.product-live-card:focus-visible::after {
    transform: translateX(125%);
}

/* ============================================================
   Home hero - final layout lock (v2, self-contained)
   Restores the original two-column LIOS hero: copy + CTAs +
   value-strip on the left, a brand-new green signal chart confined
   to the right half inside one rounded dark card. This replaces
   all dependency on the old, multiply-redeclared .hero-motion-field
   / .hero-live-graph / .hero-signal-map / .hero-decision-grid /
   .hero-orbit family (which had conflicting positioning rules
   scattered across several historical versions of this file and
   rendered the chart mis-placed/overflowing). The markup for this
   hero no longer references any of those old classes at all.
   ============================================================ */
.lead-hero-minimal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    place-items: stretch;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    text-align: left;
    overflow: hidden;
}

.lead-hero-copy-centered {
    position: relative;
    z-index: 2;
    justify-items: start;
    text-align: left;
    margin-inline: 0;
    max-width: 560px;
}

.lead-hero-copy-centered .sales-kicker,
.hero-actions-centered {
    margin-inline: 0;
}

.hero-actions-centered {
    justify-content: flex-start;
}

.lead-hero-minimal h1 {
    font-size: clamp(3.2rem, 5.6vw, 5.6rem);
    line-height: 0.92;
    white-space: nowrap;
}

.lead-hero-value-strip {
    width: 100%;
    margin-top: 6px;
}

/* Hero enlargement pass: give the primary hero card more presence on
   desktop/tablet without touching the legacy mobile-specific
   min-height/padding rules declared earlier in this file (keeps the
   already-tuned <=980px stacked layout untouched). */
@media (min-width: 981px) {
    .lead-hero-minimal {
        min-height: min(860px, calc(100dvh - 80px));
        padding: clamp(60px, 6.4vw, 108px) clamp(28px, 4.4vw, 84px);
        border-radius: clamp(32px, 5vw, 60px);
    }

    .lead-hero-minimal h1 {
        font-size: clamp(3.8rem, 6.4vw, 7rem);
    }

    /* Give the value-strip cards more room so their numbers never need
       to shrink past comfortable reading size (see the overflow fix on
       .lead-hero-value-strip strong above/below). */
    .lead-hero-copy-centered {
        max-width: 640px;
    }
}

/* Self-contained green signal chart. Every rule below is scoped to
   .lios-hero-chart only, so nothing from the legacy hero-* family can
   leak into it and nothing here can leak out. Only ONE mask exists in
   this whole component (the vertical fade below, on the container) -
   do not add a second mask on a child layer, that is what produced the
   earlier "chart looks like it's drifting/misaligned" bug. Signal dots
   are generated per-bar (see .lios-hero-chart-bars i::after) instead of
   a separate layer with hand-picked --x/--y coordinates, so a dot can
   never end up floating over the wrong column. */
.lios-hero-chart {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 46%;
    right: -4%;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 16%,
        black 88%,
        transparent
    );
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 16%,
        black 88%,
        transparent
    );
}

.lios-hero-chart-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(61, 220, 145, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 220, 145, 0.13) 1px, transparent 1px);
    background-size: 54px 54px;
}

.lios-hero-chart-bars {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 8%;
    height: 66%;
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.6vw, 20px);
}

.lios-hero-chart-bars i {
    position: relative;
    flex: 1 1 0;
    height: var(--h);
    min-height: 6%;
    border-radius: 10px 10px 3px 3px;
    background: linear-gradient(
        180deg,
        rgba(61, 220, 145, 0.6),
        rgba(61, 220, 145, 0.06)
    );
    transform-origin: bottom;
    animation: lios-hero-chart-bar-breathe 4800ms ease-in-out infinite;
}

/* The signal dot lives directly on its bar (top-center, via ::after)
   instead of a separate layer positioned with hand-picked --x/--y
   percentages, so it is always locked to the top of its own column and
   moves with it if the chart is ever resized or re-ordered. */
.lios-hero-chart-bars i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--growth, #3ddc91);
    box-shadow: 0 0 16px rgba(61, 220, 145, 0.55);
    transform: translate(-50%, -50%);
}

.lios-hero-chart-bars i:nth-child(2n) {
    animation-delay: -900ms;
}

.lios-hero-chart-bars i:nth-child(3n) {
    animation-delay: -1800ms;
}

.lios-hero-chart-bars i:nth-child(4n) {
    animation-delay: -2700ms;
}

@keyframes lios-hero-chart-bar-breathe {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.93);
    }
}

@media (max-width: 980px) {
    .lead-hero-minimal {
        grid-template-columns: 1fr;
    }

    .lios-hero-chart {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        height: 190px;
        margin: 16px 0 4px;
        -webkit-mask-image: linear-gradient(to bottom, black 74%, transparent);
        mask-image: linear-gradient(to bottom, black 74%, transparent);
    }

    .lead-hero-copy-centered {
        max-width: 100%;
    }

    .lead-hero-minimal h1 {
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lios-hero-chart-bars i,
    .lios-hero-chart-bars i::after {
        animation: none !important;
    }
}

/* ============================================================
   Brand mark v3 - Bélo Studio house style
   Copies the exact pattern used on the main Bélo Studio marketing
   site (index.html ".brand" / ".brand-mark"): a plain round
   off-white badge with a short bold monogram, sitting directly on
   the dark nav pill with no extra glass plate/border around it or
   the wordmark. The only added touch is a tiny pulsing green dot on
   the badge (a live/online indicator), which is this mark's one
   sitewide --growth accent moment.
   ============================================================ */
.sales-logo-badge {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--ink-strong);
    color: var(--bg);
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -9px 18px rgba(0, 0, 0, 0.1);
    transition: transform 420ms var(--spring);
}

/* Static green status dot on the LIOS badge. */
.sales-logo-badge-dot {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--growth);
    border: 2px solid var(--bg);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.78),
        0 0 12px rgba(61, 220, 145, 0.62);
    animation: none;
}

.sales-logo:hover .sales-logo-badge,
.sales-logo:focus-visible .sales-logo-badge {
    transform: rotate(-8deg) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .sales-logo-badge-dot {
        animation: none !important;
    }

    .sales-logo:hover .sales-logo-badge,
    .sales-logo:focus-visible .sales-logo-badge {
        transform: none !important;
    }
}

/* ============================================================
   LIOS home hero restore: old first-screen composition
   ============================================================ */
.lead-engine-page .lead-hero-minimal {
    position: relative;
    isolation: isolate;
    min-height: min(720px, calc(100dvh - 72px));
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: start;
    place-items: initial;
    gap: 0;
    margin: 28px 0 clamp(44px, 5vw, 72px);
    padding: clamp(104px, 9.4vw, 136px) clamp(42px, 6vw, 78px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(38px, 4vw, 52px);
    background:
        radial-gradient(
            circle at 83% 46%,
            rgba(61, 220, 145, 0.16),
            rgba(61, 220, 145, 0.055) 22rem,
            transparent 34rem
        ),
        linear-gradient(
            108deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.002) 42%,
            rgba(61, 220, 145, 0.026) 100%
        ),
        #010101;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.035),
        0 46px 150px rgba(0, 0, 0, 0.68);
}

.lead-engine-page .lead-hero-minimal::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(
        112deg,
        rgba(255, 255, 255, 0.055),
        transparent 27%,
        transparent 68%,
        rgba(61, 220, 145, 0.09)
    );
    pointer-events: none;
}

.lead-engine-page .lead-hero-minimal::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.065;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(
        90deg,
        transparent 0 43%,
        black 55%,
        black 100%
    );
    pointer-events: none;
}

.lead-engine-page .lead-hero-copy-classic {
    position: relative;
    z-index: 2;
    width: min(620px, 58%);
    max-width: 620px;
    display: grid;
    justify-items: start;
    align-content: center;
    gap: clamp(18px, 2vw, 24px);
    margin: 0;
    text-align: left;
}

.lead-engine-page .lead-hero-copy-classic h1 {
    max-width: none;
    margin: 0;
    color: var(--ink-strong);
    font-size: clamp(4.2rem, 6.25vw, 6.15rem);
    line-height: 0.88;
    letter-spacing: -0.085em;
    white-space: nowrap;
    text-shadow: 0 30px 110px rgba(255, 255, 255, 0.12);
}

.lead-engine-page .lead-hero-copy-classic .sales-hero-text {
    max-width: 560px;
    color: rgba(247, 247, 242, 0.66);
    font-size: clamp(1rem, 1.14vw, 1.13rem);
    line-height: 1.5;
}

.lead-engine-page .hero-actions-classic {
    justify-content: flex-start;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip {
    width: min(620px, 100%);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
    min-height: 132px;
    padding: 15px 14px 14px;
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.028)
        ),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 16px 56px rgba(0, 0, 0, 0.24);
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip span {
    color: rgba(247, 247, 242, 0.46);
    font-size: 0.58rem;
    letter-spacing: 0.14em;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip strong {
    color: var(--ink-strong);
    font-size: clamp(1.45rem, 2.05vw, 2.16rem);
    line-height: 0.96;
    letter-spacing: -0.058em;
    white-space: nowrap;
}

.lead-engine-page
    .lead-hero-copy-classic
    .lead-hero-value-strip
    article:nth-child(-n + 2)
    strong {
    color: var(--growth);
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip p {
    color: rgba(247, 247, 242, 0.56);
    font-size: 0.78rem;
    line-height: 1.36;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart {
    position: absolute;
    z-index: 1;
    top: 38px;
    right: -7%;
    bottom: 30px;
    left: 48%;
    overflow: hidden;
    opacity: 0.9;
    transform-origin: 52% 56%;
    animation: lios-chart-stage-float 6200ms var(--ease) infinite alternate;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent,
        black 10%,
        black 88%,
        transparent
    );
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 10%,
        black 88%,
        transparent
    );
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart::before {
    content: "";
    position: absolute;
    inset: 8% 0 4%;
    z-index: 0;
    border: 1px solid rgba(61, 220, 145, 0.1);
    border-radius: 28px;
    background: radial-gradient(
        circle at 50% 44%,
        rgba(61, 220, 145, 0.18),
        transparent 19rem
    );
    transform-origin: 50% 55%;
    animation: lios-chart-ambient-breathe 7600ms var(--ease) infinite alternate;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart::after {
    content: "";
    position: absolute;
    inset: 2% -34%;
    z-index: 1;
    background: linear-gradient(
        105deg,
        transparent 0 40%,
        rgba(61, 220, 145, 0.16) 48%,
        transparent 58% 100%
    );
    opacity: 0;
    transform: translate3d(-28%, 0, 0);
    animation: lios-chart-scan 6800ms var(--ease) infinite;
    pointer-events: none;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
    inset: -54px;
    z-index: 1;
    opacity: 0.5;
    background-size: 54px 54px;
    transform: translate3d(0, 0, 0);
    animation: lios-chart-grid-drift 14000ms var(--ease) infinite alternate;
    will-change: transform;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
    z-index: 2;
    left: 7%;
    right: 0;
    bottom: 21%;
    height: 50%;
    gap: clamp(16px, 1.85vw, 26px);
    transform-origin: 50% 72%;
    animation: lios-chart-bars-drift 4200ms var(--ease) infinite alternate;
    will-change: transform;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
    border-radius: 18px 18px 4px 4px;
    background: linear-gradient(
        180deg,
        rgba(61, 220, 145, 0.68),
        rgba(61, 220, 145, 0.09)
    );
    animation: lios-chart-bar-wave 3600ms var(--ease) infinite alternate;
    will-change: transform;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i::after {
    width: 8px;
    height: 8px;
    background: var(--growth);
    box-shadow: 0 0 18px rgba(61, 220, 145, 0.72);
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i:nth-child(2n) {
    animation-delay: -520ms;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i:nth-child(3n) {
    animation-delay: -1040ms;
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i:nth-child(4n) {
    animation-delay: -1560ms;
}

@keyframes lios-chart-stage-float {
    0% {
        transform: translate3d(-8px, 8px, 0) scale(0.985);
    }
    100% {
        transform: translate3d(14px, -10px, 0) scale(1.025);
    }
}

@keyframes lios-chart-bars-drift {
    0% {
        transform: translate3d(-12px, 10px, 0) skewX(-1deg);
    }
    100% {
        transform: translate3d(18px, -14px, 0) skewX(1.4deg);
    }
}

@keyframes lios-chart-bar-wave {
    0% {
        transform: translate3d(0, 10px, 0) scaleY(0.82);
        opacity: 0.62;
    }
    45% {
        opacity: 0.92;
    }
    100% {
        transform: translate3d(0, -12px, 0) scaleY(1.18);
        opacity: 1;
    }
}

@keyframes lios-chart-grid-drift {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-54px, -54px, 0);
    }
}

@keyframes lios-chart-ambient-breathe {
    0% {
        opacity: 0.72;
        transform: translate3d(-8px, 6px, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translate3d(10px, -8px, 0) scale(1.035);
    }
}

@keyframes lios-chart-scan {
    0%,
    28% {
        opacity: 0;
        transform: translate3d(-32%, 0, 0);
    }
    46% {
        opacity: 0.72;
    }
    72% {
        opacity: 0.18;
        transform: translate3d(34%, 0, 0);
    }
    100% {
        opacity: 0;
        transform: translate3d(48%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-engine-page .lead-hero-minimal .lios-hero-chart,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 1120px) {
    .lead-engine-page .lead-hero-copy-classic {
        width: min(640px, 66%);
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        left: 48%;
        opacity: 0.54;
    }
}

@media (max-width: 980px) {
    .lead-engine-page .lead-hero-minimal {
        min-height: auto;
        padding: 56px clamp(18px, 5vw, 34px) 270px;
    }

    .lead-engine-page .lead-hero-copy-classic {
        width: 100%;
        max-width: 640px;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        top: auto;
        right: -12%;
        bottom: 22px;
        left: -12%;
        height: 220px;
        opacity: 0.34;
    }
}

@media (max-width: 760px) {
    .lead-engine-page .lead-hero-minimal {
        margin-top: 14px;
        padding: 42px 16px 236px;
        border-radius: 30px;
    }

    .lead-engine-page .lead-hero-copy-classic h1 {
        font-size: clamp(2.85rem, 13.4vw, 4.2rem);
        line-height: 0.96;
        white-space: normal;
    }

    .lead-engine-page .lead-hero-copy-classic .sales-hero-text {
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip {
        grid-template-columns: 1fr;
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
        min-height: auto;
    }

    .lead-engine-page .hero-actions-classic {
        width: 100%;
    }
}

/* === ZONE: /help PAGE V2 REDESIGN (help-v2-*) === */

/* ---- Hero: live response pulse (radar ping + scrolling ticker) ---- */
.help-v2-pulse {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    position: relative;
    display: grid;
    gap: 16px;
    align-content: start;
    padding: clamp(24px, 2.6vw, 30px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(
        165deg,
        var(--glass-strong),
        var(--glass) 55%,
        transparent
    );
    overflow: hidden;
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 520ms var(--spring),
        border-color 320ms var(--ease);
}

.help-v2-pulse:hover,
.help-v2-pulse:focus-within {
    border-color: var(--growth-line);
}

.help-v2-pulse-radar {
    position: relative;
    width: 44px;
    height: 44px;
}

.help-v2-pulse-radar i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--growth-line);
    opacity: 0;
    animation: help-v2-radar-ping 2600ms var(--ease) infinite;
}

.help-v2-pulse-radar i:nth-child(2) {
    animation-delay: 620ms;
}

.help-v2-pulse-radar i:nth-child(3) {
    animation-delay: 1240ms;
}

.help-v2-pulse-radar b {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin: -5px;
    border-radius: 50%;
    background: var(--growth);
    box-shadow: 0 0 16px var(--growth-soft);
}

@keyframes help-v2-radar-ping {
    0% {
        transform: scale(0.35);
        opacity: 0.9;
    }
    80% {
        opacity: 0;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

.help-v2-pulse-stat {
    display: grid;
    gap: 4px;
}

.help-v2-pulse-label {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-v2-pulse-value {
    color: var(--ink-strong);
    font-size: clamp(1.4rem, 2.2vw, 1.8rem);
    font-weight: 640;
    letter-spacing: -0.01em;
}

.help-v2-pulse-ticker {
    position: relative;
    height: 84px;
    overflow: hidden;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent,
        #000 22%,
        #000 78%,
        transparent
    );
    mask-image: linear-gradient(
        180deg,
        transparent,
        #000 22%,
        #000 78%,
        transparent
    );
}

.help-v2-pulse-ticker ul {
    margin: 0;
    padding: 0;
    list-style: none;
    animation: help-v2-ticker-scroll 14s linear infinite;
}

.help-v2-pulse-ticker li {
    display: flex;
    align-items: center;
    height: 42px;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.84rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes help-v2-ticker-scroll {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-50%);
    }
}

.help-v2-pulse-note {
    margin: 0;
    color: var(--muted-2);
    font-size: 0.78rem;
}

/* ---- Quick routes: asymmetric grid, ghost index numbers, hover underline ---- */
.help-v2-route-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.help-v2-route-grid > :nth-child(2),
.help-v2-route-grid > :nth-child(5),
.help-v2-route-grid > :nth-child(6) {
    grid-column: span 2;
}

.help-v2-route {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    padding: clamp(20px, 2.2vw, 26px);
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--glass);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease),
        transform 420ms var(--spring);
}

.help-v2-route-lead {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    grid-column: span 2;
    grid-row: span 2;
    padding: clamp(26px, 3vw, 36px);
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.help-v2-route-index {
    position: absolute;
    top: 14px;
    right: 18px;
    color: rgba(255, 255, 255, 0.06);
    font-family: var(--mono);
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1;
    transition:
        color 420ms var(--ease),
        transform 420ms var(--spring);
}

.help-v2-route[href]:hover .help-v2-route-index,
.help-v2-route[href]:focus-visible .help-v2-route-index {
    color: var(--growth-soft);
    transform: translateY(-2px);
}

.help-v2-route-kicker {
    position: relative;
    z-index: 1;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-v2-route-title {
    position: relative;
    z-index: 1;
    font-size: clamp(1.02rem, 1.5vw, 1.16rem);
    font-weight: 620;
    letter-spacing: -0.01em;
}

.help-v2-route-lead .help-v2-route-title {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

.help-v2-route p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

.help-v2-route-path {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.86em;
}

.help-v2-route-go {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    color: var(--muted-2);
    font-size: 0.82rem;
}

.help-v2-route-go i {
    transition: transform 320ms var(--spring);
}

.help-v2-route[href]:hover,
.help-v2-route[href]:focus-visible {
    border-color: var(--growth-line);
    background: var(--growth-soft);
}

.help-v2-route[href]:hover:not(.help-v2-route-lead),
.help-v2-route[href]:focus-visible:not(.help-v2-route-lead) {
    transform: translateY(-3px);
}

.help-v2-route[href]:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.help-v2-route[href]:hover .help-v2-route-go,
.help-v2-route[href]:focus-visible .help-v2-route-go {
    color: var(--growth);
}

.help-v2-route[href]:hover .help-v2-route-go i,
.help-v2-route[href]:focus-visible .help-v2-route-go i {
    transform: translate(3px, -3px);
}

.help-v2-route::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--growth);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 420ms var(--spring);
}

.help-v2-route[href]:hover::after,
.help-v2-route[href]:focus-visible::after {
    transform: scaleX(1);
}

.help-v2-route-note {
    border-style: dashed;
    background: transparent;
    color: var(--muted);
}

.help-v2-route-note .help-v2-route-title {
    color: var(--ink);
}

@media (max-width: 1000px) {
    .help-v2-route-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-v2-route-lead {
        grid-column: span 2;
        grid-row: auto;
    }

    .help-v2-route-grid > :nth-child(2),
    .help-v2-route-grid > :nth-child(5),
    .help-v2-route-grid > :nth-child(6) {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .help-v2-route-grid {
        grid-template-columns: 1fr;
    }

    .help-v2-route-grid > * {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
}

/* ---- "У меня вопрос про..." router: CSS-only details/summary accordion ---- */
.help-v2-faq-list {
    display: grid;
    gap: 10px;
}

.help-v2-faq {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--glass);
    overflow: hidden;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease);
}

.help-v2-faq[open] {
    border-color: var(--growth-line);
    background: var(--growth-soft);
}

.help-v2-faq summary {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    list-style: none;
    cursor: pointer;
    outline-offset: -2px;
}

.help-v2-faq summary::-webkit-details-marker {
    display: none;
}

.help-v2-faq summary::marker {
    content: "";
}

.help-v2-faq summary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
}

.help-v2-faq-num {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.82rem;
    transition: color 320ms var(--ease);
}

.help-v2-faq[open] .help-v2-faq-num {
    color: var(--growth);
}

.help-v2-faq-q {
    color: var(--ink);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.help-v2-faq-chevron {
    position: relative;
    width: 16px;
    height: 16px;
}

.help-v2-faq-chevron::before,
.help-v2-faq-chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--muted-2);
    border-radius: 2px;
    transition:
        transform 320ms var(--spring),
        background 320ms var(--ease);
}

.help-v2-faq-chevron::before {
    left: 0;
    transform: rotate(40deg);
}

.help-v2-faq-chevron::after {
    right: 0;
    transform: rotate(-40deg);
}

.help-v2-faq[open] .help-v2-faq-chevron::before {
    transform: rotate(-40deg);
}

.help-v2-faq[open] .help-v2-faq-chevron::after {
    transform: rotate(40deg);
}

.help-v2-faq[open] .help-v2-faq-chevron::before,
.help-v2-faq[open] .help-v2-faq-chevron::after {
    background: var(--growth);
}

.help-v2-faq-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 460ms var(--spring);
}

.help-v2-faq[open] .help-v2-faq-collapse {
    grid-template-rows: 1fr;
}

.help-v2-faq-body {
    display: grid;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    padding: 0 22px 22px;
}

.help-v2-faq-body h3 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 1.05rem;
    font-weight: 620;
    letter-spacing: -0.01em;
}

.help-v2-faq-body p {
    margin: 0;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.help-v2-faq-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.help-v2-faq-contact {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--growth);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        color 220ms ease,
        transform 220ms ease;
}

.help-v2-faq-contact i {
    transition: transform 320ms var(--spring);
}

.help-v2-faq-contact:hover,
.help-v2-faq-contact:focus-visible {
    color: var(--growth-strong);
}

.help-v2-faq-contact:hover i,
.help-v2-faq-contact:focus-visible i {
    transform: translate(2px, -2px);
}

/* ---- Direct contact: horizontal boarding-pass tickets with perforation ---- */
.help-v2-ticket-row {
    display: grid;
    gap: 12px;
}

.help-v2-ticket {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--glass);
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease),
        transform 320ms var(--spring);
}

.help-v2-ticket-stub {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 18px 20px;
}

.help-v2-ticket-code {
    color: var(--ink-strong);
    font-family: var(--mono);
    font-size: 0.92rem;
    letter-spacing: 0.06em;
}

.help-v2-ticket-stub-label {
    color: var(--muted-2);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.help-v2-ticket-perf {
    position: relative;
    align-self: stretch;
    width: 1px;
    background-image: repeating-linear-gradient(
        180deg,
        var(--line-strong) 0 6px,
        transparent 6px 12px
    );
}

.help-v2-ticket-perf::before,
.help-v2-ticket-perf::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--bg);
}

.help-v2-ticket-perf::before {
    top: -7px;
}

.help-v2-ticket-perf::after {
    bottom: -7px;
}

.help-v2-ticket-body {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 18px 22px;
}

.help-v2-ticket-handle {
    font-family: var(--mono);
    font-size: 0.98rem;
    letter-spacing: -0.01em;
    -webkit-user-select: all;
    user-select: all;
}

.help-v2-ticket-hint {
    color: var(--muted);
    font-size: 0.82rem;
}

.help-v2-ticket-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 22px;
    color: var(--muted-2);
    font-size: 0.86rem;
    white-space: nowrap;
    transition: color 320ms var(--ease);
}

.help-v2-ticket-go i {
    transition: transform 320ms var(--spring);
}

.help-v2-ticket:hover,
.help-v2-ticket:focus-visible {
    border-color: var(--growth-line);
    background: var(--growth-soft);
    transform: translateY(-2px);
}

.help-v2-ticket:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.help-v2-ticket:hover .help-v2-ticket-go,
.help-v2-ticket:focus-visible .help-v2-ticket-go {
    color: var(--growth);
}

.help-v2-ticket:hover .help-v2-ticket-go i,
.help-v2-ticket:focus-visible .help-v2-ticket-go i {
    transform: translate(3px, -3px);
}

@media (max-width: 760px) {
    .help-v2-ticket {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
    }

    .help-v2-ticket-stub {
        grid-column: 1;
        grid-row: 1;
    }

    .help-v2-ticket-perf {
        display: none;
    }

    .help-v2-ticket-body {
        grid-column: 2;
        grid-row: 1;
    }

    .help-v2-ticket-go {
        grid-column: 1 / -1;
        grid-row: 2;
        padding: 0 20px 16px;
    }
}

/* ---- Support boundaries: scanning divider + numbered boundary cards ---- */
.help-v2-boundary-scan {
    position: relative;
    display: block;
    height: 1px;
    margin: 26px 0 24px;
    background: var(--line);
    overflow: hidden;
}

.help-v2-boundary-scan::before {
    content: "";
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--growth), transparent);
    animation: help-v2-scan-sweep 3400ms linear infinite;
}

@keyframes help-v2-scan-sweep {
    0% {
        left: -30%;
    }
    100% {
        left: 100%;
    }
}

.help-v2-boundary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.help-v2-boundary-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--glass);
}

.help-v2-boundary-mark {
    color: var(--growth);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.help-v2-boundary-card p {
    margin: 0;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .help-v2-boundary-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Final CTA: small live-status pill tying back to the hero pulse ---- */
.help-v2-final-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--growth-line);
    border-radius: 999px;
    background: var(--growth-soft);
    color: var(--growth);
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.help-v2-final-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--growth);
    box-shadow: 0 0 0 0 var(--growth-line);
    animation: help-v2-final-pulse 1900ms ease-in-out infinite;
}

@keyframes help-v2-final-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--growth-line);
    }
    70% {
        box-shadow: 0 0 0 8px transparent;
    }
    100% {
        box-shadow: 0 0 0 0 transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .help-v2-pulse-radar i,
    .help-v2-pulse-ticker ul,
    .help-v2-boundary-scan::before,
    .help-v2-final-status i {
        animation: none !important;
    }

    .help-v2-pulse,
    .help-v2-route,
    .help-v2-ticket,
    .help-v2-faq-collapse,
    .help-v2-faq-chevron::before,
    .help-v2-faq-chevron::after {
        transition: none !important;
    }

    .help-v2-route[href]:hover:not(.help-v2-route-lead),
    .help-v2-route[href]:focus-visible:not(.help-v2-route-lead),
    .help-v2-ticket:hover,
    .help-v2-ticket:focus-visible {
        transform: none !important;
    }
}

/* === END ZONE: /help PAGE V2 REDESIGN === */

/* ---------------------------------------------------------------------
   /status page v2: hero readiness ring, done/progress grid and the
   CSS-only "what to do next" path chooser. All rules are scoped under
   .status-v2-* class names so they never collide with other pages. */

.status-v2-hero-note {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.status-v2-hero-note-body {
    display: grid;
    gap: 10px;
}

.status-v2-ring {
    position: relative;
    width: 88px;
    height: 88px;
    flex: none;
}

.status-v2-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.status-v2-ring-track {
    fill: none;
    stroke: var(--line);
    stroke-width: 9;
}

.status-v2-ring-fill {
    fill: none;
    stroke: var(--growth);
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 314;
    stroke-dashoffset: 314;
    transition: stroke-dashoffset 1100ms var(--ease);
}

.status-v2-ring.is-visible .status-v2-ring-fill {
    stroke-dashoffset: calc(314 - 314 * var(--ring-fill, 0));
}

.status-v2-ring-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}

.status-v2-ring-value i {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--muted-2);
}

@media (max-width: 560px) {
    .status-v2-hero-note {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

/* Done / in-progress readiness board */

.status-v2-done-row {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.status-v2-done-card {
    display: grid;
    gap: 10px;
    padding: 22px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--glass);
    transition:
        border-color 380ms var(--ease),
        background 380ms var(--ease),
        box-shadow 380ms var(--ease);
}

.status-v2-done-card:hover,
.status-v2-done-card:focus-visible {
    border-color: var(--growth-line);
    background: var(--glass-strong);
    box-shadow: 0 24px 60px -30px rgba(61, 220, 145, 0.35);
}

.status-v2-done-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-v2-done-check {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--growth);
}

.status-v2-done-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--growth-ink);
    border-bottom: 2px solid var(--growth-ink);
    transform: rotate(-45deg);
}

.status-v2-done-tag {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.status-v2-done-card h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink-strong);
}

.status-v2-done-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.status-v2-done-card p a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
}

.status-v2-progress-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 32px 0 18px;
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.status-v2-progress-divider::before,
.status-v2-progress-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.status-v2-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.status-v2-progress-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4px 18px;
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--glass);
    transition:
        border-color 380ms var(--ease),
        background 380ms var(--ease);
}

.status-v2-progress-row:hover,
.status-v2-progress-row:focus-visible {
    border-color: var(--line-strong);
    background: var(--glass-strong);
}

.status-v2-progress-value {
    grid-row: 1;
    grid-column: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    font-family: var(--mono);
    color: var(--ink-strong);
}

.status-v2-progress-value b {
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.status-v2-progress-value i {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--muted-2);
}

.status-v2-progress-body {
    grid-row: 1;
    grid-column: 2;
    display: grid;
    gap: 4px;
}

.status-v2-progress-tag {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.status-v2-progress-body h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--ink-strong);
}

.status-v2-progress-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
    font-size: 0.92rem;
}

.status-v2-progress-track {
    grid-row: 2;
    grid-column: 1 / -1;
    margin-top: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
}

.status-v2-progress-track i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: var(--paper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--ease);
}

.status-v2-progress-row.is-visible .status-v2-progress-track i {
    transform: scaleX(var(--fill, 0));
}

@media (max-width: 900px) {
    .status-v2-done-row {
        grid-template-columns: 1fr;
    }

    .status-v2-progress-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .status-v2-progress-row {
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 16px;
    }

    .status-v2-progress-value b {
        font-size: 1.4rem;
    }
}

/* "What to do next": a CSS-only radio path chooser using :has(), styled
   as a numbered vertical step list next to a single stage panel. This is
   deliberately a different visual language from the pill-tab switcher
   used on /platform (.platform-compare-switcher) and from the tabbed
   .engine-console used on /platform and /help. */

.status-v2-path {
    margin-top: 28px;
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 20px;
}

.status-v2-path-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.status-v2-path-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--line);
    background: var(--glass);
    cursor: pointer;
    transition:
        border-color 320ms var(--ease),
        background 320ms var(--ease),
        transform 320ms var(--spring);
}

.status-v2-path-item:hover {
    border-color: var(--line-strong);
    transform: translateX(4px);
}

.status-v2-path-item input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.status-v2-path-item:has(input:focus-visible) {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.status-v2-path-index {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.78rem;
    transition:
        background 320ms var(--ease),
        color 320ms var(--ease),
        border-color 320ms var(--ease);
}

.status-v2-path-text {
    display: grid;
    gap: 2px;
}

.status-v2-path-text strong {
    color: var(--ink-strong);
    font-size: 0.95rem;
    font-weight: 640;
}

.status-v2-path-text em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.82rem;
}

.status-v2-path-item:has(input:checked) {
    border-color: var(--growth-line);
    background: var(--growth-soft);
}

.status-v2-path-item:has(input:checked) .status-v2-path-index {
    background: var(--growth);
    border-color: transparent;
    color: var(--growth-ink);
}

.status-v2-path-stage {
    position: relative;
    display: grid;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--glass);
    padding: 32px;
}

.status-v2-path-panel {
    display: none;
    grid-column: 1;
    grid-row: 1;
    align-content: start;
    gap: 12px;
}

.status-v2-path-kicker {
    font-family: var(--mono);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--growth);
}

.status-v2-path-panel h3 {
    margin: 0;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    color: var(--ink-strong);
}

.status-v2-path-panel p {
    margin: 0;
    max-width: 520px;
    color: var(--muted);
    line-height: 1.6;
}

.status-v2-path-panel .sales-button {
    justify-self: start;
    margin-top: 4px;
}

.status-v2-path:has(input[value="new"]:checked)
    .status-v2-path-panel[data-path="new"],
.status-v2-path:has(input[value="login"]:checked)
    .status-v2-path-panel[data-path="login"],
.status-v2-path:has(input[value="security"]:checked)
    .status-v2-path-panel[data-path="security"],
.status-v2-path:has(input[value="ask"]:checked)
    .status-v2-path-panel[data-path="ask"] {
    display: grid;
    animation: status-v2-panel-in 420ms var(--ease);
}

@keyframes status-v2-panel-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 760px) {
    .status-v2-path {
        grid-template-columns: 1fr;
    }

    .status-v2-path-stage {
        padding: 24px;
    }
}

/* Boundary / caution cards inside the light .sales-trust-dark section */

.status-v2-boundary-grid {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.status-v2-boundary-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: rgba(7, 7, 8, 0.05);
    border: 1px solid rgba(7, 7, 8, 0.14);
}

.status-v2-boundary-card span {
    flex: none;
    padding-top: 2px;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: rgba(7, 7, 8, 0.4);
}

.status-v2-boundary-card p {
    margin: 0;
    color: var(--paper-ink);
    line-height: 1.6;
}

@media (max-width: 640px) {
    .status-v2-boundary-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-v2-ring-fill,
    .status-v2-progress-track i,
    .status-v2-path-item,
    .status-v2-path-index {
        transition: none;
    }

    .status-v2-path-panel {
        animation: none !important;
    }
}

@media (max-width: 1180px) {
    :root {
        --shell: min(100% - 28px, 1360px);
    }

    .sales-trust-shell {
        width: min(1160px, calc(100% - 28px));
    }

    .sales-nav {
        gap: 10px;
    }

    .sales-nav-links {
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sales-nav-links::-webkit-scrollbar {
        display: none;
    }

    .sales-trust-hero,
    .security-hero,
    .pricing-hero,
    .sales-legal-hero,
    .sales-request-grid,
    .lead-safety,
    .engine-console,
    .proof-reel-frame,
    .status-v2-path {
        grid-template-columns: 1fr;
    }

    .lead-proof-strip,
    .impact-board,
    .roi-lab-grid,
    .feature-mosaic,
    .sales-pricing-grid,
    .safety-stack,
    .sales-trust-matrix,
    .sales-trust-columns,
    .sales-trust-gates,
    .sales-legal-gates,
    .sales-legal-matrix,
    .home-feature-grid,
    .sales-public-route-grid,
    .product-card-grid,
    .product-signal-grid,
    .product-decision-rail,
    .first-brief-grid,
    .sample-report-scoreboard,
    .sample-report-metrics,
    .sample-report-flow,
    .sample-report-decision,
    .sample-report-boundary-grid,
    .public-site-journey-steps,
    .status-v2-done-row,
    .status-v2-progress-grid,
    .status-v2-boundary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .impact-card-large,
    .roi-card-main,
    .sales-pricing-card.featured,
    .product-live-card,
    .first-brief-grid article:first-child {
        grid-column: 1 / -1;
    }

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

@media (max-width: 900px) {
    :root {
        --shell: min(100% - 24px, 1360px);
    }

    .sales-trust-shell {
        width: min(1160px, calc(100% - 24px));
    }

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

    .sales-nav-end {
        justify-self: end;
    }

    .sales-nav-links {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        padding: 4px 4px 2px;
    }

    .sales-nav-links a,
    .sales-cluster-pill {
        flex: 0 0 auto;
        min-height: 38px;
        scroll-snap-align: start;
    }

    .sales-cluster-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .sales-cluster-nav::-webkit-scrollbar {
        display: none;
    }

    .sales-trust-hero,
    .pricing-hero,
    .security-hero,
    .sales-legal-hero {
        gap: 18px;
        padding-top: clamp(42px, 8vw, 72px);
    }

    .sales-trust-note,
    .sales-trust-section,
    .sales-final,
    .sales-request-panel,
    .sales-pricing-card,
    .impact-card,
    .roi-card,
    .engine-panel,
    .feature-mosaic article,
    .product-live-card,
    .product-side-panel article,
    .status-v2-path-stage {
        border-radius: 28px;
    }

    .public-site-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    :root {
        --shell: min(100% - 20px, 1360px);
        --radius-xl: 30px;
        --radius-lg: 24px;
        --radius-md: 18px;
    }

    .sales-trust-shell {
        width: min(1160px, calc(100% - 20px));
    }

    .sales-shell {
        padding-top: 8px;
        padding-bottom: 64px;
    }

    .sales-nav {
        top: 8px;
        max-width: 100%;
        min-height: auto;
        gap: 8px;
        padding: 8px;
        border-radius: 26px;
    }

    .sales-logo {
        height: 42px;
        gap: 8px;
        padding: 0 8px 0 4px;
        letter-spacing: -0.03em;
    }

    .sales-logo-badge {
        width: 34px;
        height: 34px;
        font-size: 0.8rem;
    }

    .sales-logo-badge-dot {
        width: 10px;
        height: 10px;
        right: -1px;
        bottom: -1px;
    }

    .sales-logo-word-text {
        font-size: 0.94rem;
        letter-spacing: -0.01em;
    }

    .sales-nav-end {
        gap: 6px;
    }

    .sales-profile-trigger {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .sales-nav-cta {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.82rem;
    }

    .sales-nav-links {
        gap: 6px;
        padding: 2px 2px 0;
        scroll-snap-type: x proximity;
    }

    .sales-nav-links a {
        min-height: 36px;
        padding: 0 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
        font-size: 0.78rem;
    }

    .sales-nav-links a.is-active::after {
        display: none;
    }

    .sales-profile-menu-card {
        right: 0;
        width: min(260px, calc(100vw - 24px));
    }

    .sales-cluster-nav {
        width: min(100% - 20px, 1360px);
        margin-top: 10px;
        padding: 0;
    }

    .sales-cluster-pill {
        min-height: 38px;
        padding: 0 12px;
        font-size: 0.76rem;
    }

    .lead-engine-page .lead-hero-minimal {
        min-height: auto;
        margin: 14px 0 36px;
        padding: 42px 16px 210px;
        border-radius: 30px;
    }

    .lead-engine-page .lead-hero-copy-classic {
        width: 100%;
        max-width: none;
        gap: 17px;
    }

    .lead-engine-page .lead-hero-copy-classic h1,
    .lead-hero h1,
    .sales-trust-hero h1,
    .pricing-hero h1,
    .security-hero h1,
    .sales-legal-hero h1 {
        font-size: clamp(2.8rem, 14.8vw, 4.35rem);
        line-height: 0.94;
        letter-spacing: -0.075em;
        white-space: normal;
    }

    .lead-section-copy h2,
    .sales-section-head h2,
    .sales-trust-section h2,
    .sales-final h2,
    .sales-pricing h2 {
        font-size: clamp(2rem, 10.5vw, 3.25rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
    }

    .sales-hero-text,
    .lead-engine-page .lead-hero-copy-classic .sales-hero-text,
    .lead-section-copy p:not(.sales-kicker),
    .sales-section-head p,
    .sales-final p,
    .sales-trust-section > div > p {
        max-width: 64ch;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .sales-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        align-items: stretch;
    }

    .sales-hero-actions .sales-button,
    .sales-final .sales-button,
    .sales-request-panel .sales-button,
    .sales-pricing-card .sales-button,
    .engine-panel .sales-button {
        width: 100%;
        min-height: 50px;
        justify-content: space-between;
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip {
        width: 100%;
        display: flex;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        padding: 2px 2px 4px;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .lead-engine-page
        .lead-hero-copy-classic
        .lead-hero-value-strip::-webkit-scrollbar {
        display: none;
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
        flex: 0 0 min(82vw, 260px);
        min-height: 118px;
        scroll-snap-align: start;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        top: auto;
        right: -18%;
        bottom: 16px;
        left: -18%;
        height: 190px;
        opacity: 0.48;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        left: 10%;
        right: 8%;
        bottom: 18%;
        height: 54%;
        gap: 12px;
    }

    .lead-proof-strip,
    .impact-board,
    .roi-lab-grid,
    .feature-mosaic,
    .proof-gallery-grid,
    .proof-reel-cut,
    .sales-pricing-grid,
    .safety-stack,
    .sales-trust-matrix,
    .sales-trust-columns,
    .sales-trust-gates,
    .sales-legal-gates,
    .sales-legal-matrix,
    .home-feature-grid,
    .sales-public-route-grid,
    .product-card-grid,
    .product-signal-grid,
    .product-decision-rail,
    .first-brief-grid,
    .sample-report-scoreboard,
    .sample-report-metrics,
    .sample-report-flow,
    .sample-report-decision,
    .sample-report-boundary-grid,
    .public-site-journey-steps,
    .public-site-footer-links,
    .status-v2-done-row,
    .status-v2-progress-grid,
    .status-v2-boundary-grid,
    .status-v2-path {
        grid-template-columns: 1fr;
    }

    .impact-card-large,
    .roi-card-main,
    .sales-pricing-card.featured,
    .product-live-card,
    .first-brief-grid article:first-child,
    .sales-review-state {
        grid-column: auto;
    }

    .lead-proof-strip {
        gap: 10px;
        margin-bottom: clamp(58px, 14vw, 92px);
    }

    .lead-proof-strip article,
    .impact-card,
    .roi-card,
    .feature-mosaic article,
    .sales-pricing-card,
    .safety-stack article,
    .sales-request-panel,
    .sales-trust-note,
    .sales-trust-matrix article,
    .sales-trust-columns article,
    .sales-trust-gates article,
    .sales-trust-section,
    .proof-shot,
    .proof-reel-frame,
    .proof-reel-scene,
    .chart-glass,
    .engine-console,
    .product-live-card,
    .product-side-panel article,
    .status-v2-path-stage {
        padding: 20px;
        border-radius: 24px;
    }

    .engine-console-stage,
    .product-live-card,
    .roi-card-main,
    .sample-report-score,
    .sample-report-decision {
        min-height: auto;
    }

    .engine-tabs,
    .platform-compare-switcher,
    .pricing-toggle,
    .status-v2-path-list {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .engine-tabs::-webkit-scrollbar,
    .platform-compare-switcher::-webkit-scrollbar,
    .pricing-toggle::-webkit-scrollbar,
    .status-v2-path-list::-webkit-scrollbar {
        display: none;
    }

    .chart-columns,
    .status-v2-progress-row {
        grid-template-columns: 1fr;
    }

    .status-v2-progress-value,
    .status-v2-progress-body,
    .status-v2-progress-track {
        grid-column: 1;
    }

    .status-v2-progress-body {
        grid-row: auto;
    }

    .status-v2-progress-track {
        grid-row: auto;
    }

    .public-site-footer {
        gap: 22px;
        margin-top: 56px;
        padding: 22px;
        border-radius: 26px;
    }

    .public-site-footer-group div {
        gap: 8px;
    }

    .public-site-footer-links a {
        min-height: 40px;
        padding: 0 12px;
        font-size: 0.84rem;
    }
}

@media (max-width: 520px) {
    :root {
        --shell: min(100% - 16px, 1360px);
    }

    .sales-trust-shell {
        width: min(1160px, calc(100% - 16px));
    }

    .sales-nav {
        grid-template-columns: minmax(0, auto) auto;
        border-radius: 24px;
    }

    .sales-logo {
        max-width: 142px;
    }

    .sales-nav-cta {
        padding: 0 10px;
        font-size: 0.78rem;
    }

    .lead-engine-page .lead-hero-minimal {
        padding: 36px 14px 184px;
        border-radius: 26px;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        height: 168px;
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
        flex-basis: min(86vw, 238px);
        padding: 14px;
    }

    .sales-kicker {
        min-height: 30px;
        padding: 0 10px;
        font-size: 0.58rem;
        letter-spacing: 0.11em;
    }

    .sales-button {
        min-height: 48px;
        padding-left: 18px;
    }

    .sales-button i {
        width: 32px;
        height: 32px;
    }

    .public-site-footer-links a {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 380px) {
    .sales-nav-cta {
        display: none;
    }

    .sales-logo {
        max-width: none;
    }

    .lead-engine-page .lead-hero-copy-classic h1,
    .lead-hero h1,
    .sales-trust-hero h1,
    .pricing-hero h1,
    .security-hero h1,
    .sales-legal-hero h1 {
        font-size: clamp(2.45rem, 15.5vw, 3.4rem);
    }

    .lead-section-copy h2,
    .sales-section-head h2,
    .sales-trust-section h2,
    .sales-final h2,
    .sales-pricing h2 {
        font-size: clamp(1.8rem, 11.5vw, 2.55rem);
    }
}

.sales-profile-menu-card {
    visibility: hidden;
}

.sales-profile-menu:focus-within .sales-profile-menu-card,
.sales-profile-menu[open] .sales-profile-menu-card {
    visibility: visible;
}

.sales-final {
    max-width: 100%;
    overflow: clip;
}

@supports not (overflow: clip) {
    .sales-final {
        overflow: hidden;
    }
}

.sales-final::before {
    inset: 0;
    transform: none;
    transform-origin: center;
}

.sales-final > * {
    max-width: 100%;
}

.sales-final .sales-hero-actions {
    justify-content: center;
}

.pricing-compare-scroll,
.trust-matrix-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.pricing-compare-table,
.trust-permission-matrix {
    max-width: none;
}

.step-flow-item::after {
    display: none;
}

.engine-step-list button.is-active {
    transform: none;
}

.platform-hero-decorated {
    overflow: clip;
}

@supports not (overflow: clip) {
    .platform-hero-decorated {
        overflow: hidden;
    }
}

.platform-hero-decorated::before {
    animation: none;
    transform: none;
}

@media (min-width: 981px) {
    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        right: 0;
        left: 50%;
        max-width: 50%;
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
        inset: 0;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        right: 6%;
    }
}

@media (max-width: 980px) {
    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        left: 0;
        right: 0;
        max-width: 100%;
        overflow: hidden;
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
        inset: 0;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        left: 8%;
        right: 8%;
    }
}

@media (max-width: 900px) {
    .impact-board {
        grid-template-columns: 1fr;
    }

    .impact-card-large,
    .impact-board .growth-metric-card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .growth-card-value,
    .growth-card-value small,
    .impact-card strong,
    .chart-columns b,
    .chart-columns span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .platform-usecases-track {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding: 0;
    }

    .platform-usecase-card {
        width: 100%;
        scroll-snap-align: none;
    }

    .platform-usecases-hint {
        display: none;
    }
}

@media (max-width: 760px) {
    .sales-nav-end {
        position: relative;
    }

    .engine-console-left,
    .engine-step-list,
    .engine-step-list button {
        overflow: hidden;
    }

    .engine-step-list button.is-active {
        transform: none;
    }

    .sales-profile-menu {
        position: static;
    }

    .sales-profile-menu-card {
        top: calc(100% + 10px);
        right: 0;
        width: min(280px, calc(100vw - 20px));
        max-height: min(70dvh, 520px);
        overflow: auto;
        transform-origin: top right;
    }

    .sales-nav-links,
    .sales-cluster-nav {
        max-width: 100%;
    }

    .pricing-compare-table {
        min-width: 540px;
    }

    .trust-permission-matrix {
        min-width: 520px;
    }

    .pricing-compare-table th,
    .pricing-compare-table td,
    .trust-permission-matrix thead th,
    .trust-permission-matrix tbody th,
    .trust-permission-matrix tbody td {
        padding: 13px 14px;
    }
}

@media (max-width: 520px) {
    .sales-nav {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lead-engine-page .lead-hero-minimal {
        padding-bottom: 178px;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        left: 0;
        right: 0;
        bottom: 12px;
        max-width: 100%;
        height: 158px;
        opacity: 0.38;
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
        animation: none;
        transform: none;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after,
    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
        inset: 0;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
        background-size: 46px 46px;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        left: 8%;
        right: 8%;
        gap: 8px;
    }

    .platform-usecases-track {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: initial;
        grid-template-columns: 1fr;
        overflow-x: visible;
        padding: 0;
    }

    .platform-usecase-card {
        width: 100%;
        scroll-snap-align: none;
    }

    .platform-usecases-hint {
        display: none;
    }

    .pricing-compare-table {
        min-width: 500px;
    }

    .trust-permission-matrix {
        min-width: 500px;
    }
}

@media (max-width: 380px) {
    .lead-engine-page .lead-hero-minimal {
        padding-bottom: 166px;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        height: 146px;
    }
}

/* ============================================================
   LIOS responsive hardening v22
   Tightest mobile pass: prevent vertical clipping from decorative
   shine layers and keep CTA/card text calmly centered at 320px.
   ============================================================ */
@media (max-width: 760px) {
    .sales-button,
    .sales-nav-cta,
    .engine-main-button {
        height: auto;
        line-height: 1.16;
        text-align: center;
        white-space: normal;
    }

    .sales-button {
        min-height: 54px;
        justify-content: center;
        padding: 12px 18px;
    }

    .sales-button i {
        width: 32px;
        height: 32px;
        min-width: 32px;
        flex: 0 0 32px;
    }

    .engine-main-button {
        min-height: 68px;
        justify-content: center;
        padding: 14px 18px;
    }

    .engine-main-button span {
        line-height: 1.08;
    }

    .engine-main-button i {
        width: 38px;
        height: 38px;
        min-width: 38px;
        flex: 0 0 38px;
    }

    .engine-console-stage,
    .engine-console-compact .engine-console-stage {
        min-height: 0;
        overflow: visible;
    }

    .engine-panel,
    .engine-console-compact .engine-panel {
        position: relative;
        inset: auto;
        display: none;
        min-height: 360px;
        opacity: 1;
        transform: none;
        pointer-events: none;
    }

    .engine-panel.is-active,
    .engine-console-compact .engine-panel.is-active {
        display: grid;
        pointer-events: auto;
    }

    .product-tour-console .engine-panel,
    .engine-console-media .engine-panel {
        min-height: 0;
    }

    .sales-button::before,
    .sales-nav-cta::before,
    .engine-main-button::before,
    .roi-card::after,
    .product-live-card::after,
    .product-side-panel article::after,
    .feature-tile-large::after,
    .impact-card-large::after,
    .sales-pricing-card.featured::after {
        display: none;
    }

    .roi-card,
    .product-live-card,
    .product-side-panel article,
    .feature-mosaic article,
    .lead-proof-strip article {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .roi-card,
    .feature-mosaic article {
        align-content: start;
    }
}

/* ============================================================
   LIOS responsive hardening v23
   Tablet seam pass: 768-900px should not keep desktop clipping
   layers when cards and CTAs are already stacked like mobile.
   ============================================================ */
/* Status page hero note: allow long readiness phrases to wrap inside
   the narrow desktop aside instead of increasing internal scroll width. */
.status-v2-hero-note,
.status-v2-hero-note-body,
.status-v2-hero-note-body > * {
    min-width: 0;
    max-width: 100%;
}

.status-v2-hero-note-body strong,
.status-v2-hero-note-body p {
    display: block;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.status-v2-hero-note-body strong {
    font-size: clamp(1.08rem, 1.55vw, 1.45rem);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

@media (max-width: 900px) {
    .sales-button,
    .sales-nav-cta,
    .engine-main-button {
        height: auto;
        line-height: 1.16;
        text-align: center;
        white-space: normal;
    }

    .sales-button::before,
    .sales-nav-cta::before,
    .engine-main-button::before,
    .roi-card::after,
    .product-live-card::after,
    .product-side-panel article::after,
    .feature-tile-large::after,
    .impact-card-large::after,
    .sales-pricing-card.featured::after {
        display: none;
    }

    .roi-card,
    .product-live-card,
    .product-side-panel article,
    .feature-mosaic article,
    .lead-proof-strip article {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .roi-card,
    .feature-mosaic article {
        align-content: start;
    }
}

/* Public primary navigation: progressive enhancement keeps the complete
   desktop/no-JS navigation visible, while JS turns it into a disclosure on
   compact viewports. */
.sales-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--ink-strong);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition:
        color 260ms var(--ease),
        border-color 260ms var(--ease),
        background 260ms var(--ease),
        transform 260ms var(--ease);
}

.sales-nav-toggle:hover {
    color: var(--growth);
    border-color: var(--growth-line);
    background: var(--growth-soft);
}

.sales-nav-toggle-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 14px;
}

.sales-nav-toggle-icon i {
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition:
        top 260ms var(--ease),
        transform 260ms var(--ease);
}

.sales-nav-toggle-icon i:first-child {
    top: 3px;
}

.sales-nav-toggle-icon i:last-child {
    top: 9px;
}

.sales-nav.is-mobile-menu-open .sales-nav-toggle-icon i:first-child {
    top: 6px;
    transform: rotate(45deg);
}

.sales-nav.is-mobile-menu-open .sales-nav-toggle-icon i:last-child {
    top: 6px;
    transform: rotate(-45deg);
}

.sales-nav-panel {
    display: contents;
}

@media (max-width: 900px) {
    body.js-enabled .sales-nav {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    body.js-enabled .sales-nav-toggle:not([hidden]) {
        display: inline-flex;
        justify-self: end;
    }

    /* Shown by default once the collapsed mobile header is active; hidden
       again while the panel itself is open, since the in-panel CTA (styled
       identically) is already visible there - this keeps exactly one
       primary CTA visible at any given moment. */
    body.js-enabled .sales-nav-cta-compact {
        display: inline-flex;
    }

    body.js-enabled .sales-nav.is-mobile-menu-open .sales-nav-cta-compact {
        display: none;
    }

    body.js-enabled .sales-nav-panel:not([hidden]) {
        grid-column: 1 / -1;
        display: grid;
        gap: 12px;
        width: 100%;
        max-height: calc(100dvh - 96px);
        padding: 12px 4px 2px;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.js-enabled .sales-nav-panel .sales-nav-links {
        grid-column: auto;
        order: initial;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        padding: 0;
        overflow: visible;
    }

    body.js-enabled .sales-nav-panel .sales-nav-links a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.035);
        white-space: normal;
    }

    body.js-enabled .sales-nav-panel .sales-nav-end {
        width: 100%;
        justify-self: auto;
    }

    body.js-enabled .sales-nav-panel .sales-nav-cta {
        display: inline-flex;
        flex: 1 1 auto;
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    body.js-enabled .sales-nav-panel .sales-nav-links {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sales-nav-toggle,
    .sales-nav-toggle-icon i {
        transition: none !important;
    }
}

/* ============================================================
   LIOS home hero — monochrome contrast and motion finish
   ============================================================ */
.lead-engine-page .lead-hero-minimal {
    background:
        radial-gradient(
            circle at 82% 46%,
            rgba(61, 220, 145, 0.16),
            rgba(61, 220, 145, 0.055) 22rem,
            transparent 34rem
        ),
        linear-gradient(
            108deg,
            rgba(255, 255, 255, 0.018),
            rgba(255, 255, 255, 0.002) 42%,
            rgba(61, 220, 145, 0.026) 100%
        ),
        #010101;
}

.lead-engine-page .lead-hero-minimal::before {
    background: linear-gradient(
        112deg,
        rgba(255, 255, 255, 0.055),
        transparent 27%,
        transparent 68%,
        rgba(61, 220, 145, 0.09)
    );
}

.lead-engine-page .lead-hero-copy-classic > h1,
.lead-engine-page .lead-hero-copy-classic > .sales-hero-text,
.lead-engine-page .lead-hero-copy-classic > .hero-actions-classic,
.lead-engine-page .lead-hero-copy-classic > .lead-hero-value-strip {
    animation: lios-home-copy-in 780ms var(--spring) backwards;
}

.lead-engine-page .lead-hero-copy-classic > .sales-hero-text {
    animation-delay: 90ms;
}

.lead-engine-page .lead-hero-copy-classic > .hero-actions-classic {
    animation-delay: 180ms;
}

.lead-engine-page .lead-hero-copy-classic > .lead-hero-value-strip {
    margin-top: 8px;
    animation-delay: 270ms;
}

.lead-engine-page .hero-actions-classic .sales-button {
    transition:
        transform 420ms var(--spring),
        border-color 320ms var(--ease),
        background-color 320ms var(--ease),
        box-shadow 420ms var(--ease);
}

.lead-engine-page .hero-actions-classic .sales-button i {
    transition: transform 420ms var(--spring);
}

@media (hover: hover) {
    .lead-engine-page .hero-actions-classic .sales-button:hover i {
        transform: translate3d(2px, 2px, 0) scale(1.06);
    }

    .lead-engine-page .hero-actions-classic .sales-button-secondary:hover {
        border-color: rgba(255, 255, 255, 0.4);
        background: #0a0a0a;
    }
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.12),
            rgba(255, 255, 255, 0.028) 62%
        ),
        rgba(255, 255, 255, 0.035);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.13),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025),
        0 18px 52px rgba(0, 0, 0, 0.54);
    transform: perspective(880px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition:
        transform 540ms var(--spring),
        border-color 320ms var(--ease),
        background-color 320ms var(--ease),
        box-shadow 420ms var(--ease);
    animation: lios-home-value-in 720ms var(--spring) backwards;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article:nth-child(1) {
    animation-delay: 340ms;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article:nth-child(2) {
    animation-delay: 420ms;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article:nth-child(3) {
    animation-delay: 500ms;
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article strong,
.lead-engine-page
    .lead-hero-copy-classic
    .lead-hero-value-strip
    article:nth-child(-n + 2)
    strong {
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
}

.lead-engine-page
    .lead-hero-copy-classic
    .lead-hero-value-strip
    article:nth-child(-n + 2)
    strong {
    color: var(--growth);
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip span {
    color: rgba(247, 247, 242, 0.46);
}

.lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip p {
    color: rgba(247, 247, 242, 0.56);
}

@media (hover: hover) {
    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article:hover {
        border-color: rgba(61, 220, 145, 0.46);
        background:
            linear-gradient(
                145deg,
                rgba(61, 220, 145, 0.14),
                rgba(255, 255, 255, 0.028) 62%
            ),
            rgba(61, 220, 145, 0.055);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.2),
            0 26px 64px rgba(15, 105, 65, 0.28);
        transform:
            perspective(880px)
            rotateX(var(--tilt-x))
            rotateY(var(--tilt-y))
            translate3d(0, -6px, 0);
    }
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart::before {
    border-color: rgba(61, 220, 145, 0.1);
    background: radial-gradient(
        circle at 50% 44%,
        rgba(61, 220, 145, 0.18),
        transparent 19rem
    );
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart::after {
    background: linear-gradient(
        105deg,
        transparent 0 40%,
        rgba(61, 220, 145, 0.16) 48%,
        transparent 58% 100%
    );
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
    background-image:
        linear-gradient(rgba(61, 220, 145, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(61, 220, 145, 0.13) 1px, transparent 1px);
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
    background: linear-gradient(
        180deg,
        rgba(61, 220, 145, 0.68),
        rgba(61, 220, 145, 0.09)
    );
}

.lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i::after {
    background: var(--growth);
    box-shadow: 0 0 18px rgba(61, 220, 145, 0.72);
}

@media (min-width: 981px) {
    .lead-engine-page .lead-hero-minimal .lios-hero-chart {
        animation: lios-chart-stage-float 6200ms var(--ease) infinite alternate;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::before {
        animation: lios-chart-ambient-breathe 7600ms var(--ease) infinite alternate;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart::after {
        animation: lios-chart-scan 6800ms var(--ease) infinite;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-grid {
        animation: lios-chart-grid-drift 14000ms var(--ease) infinite alternate;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars {
        animation: lios-chart-bars-drift 4200ms var(--ease) infinite alternate;
    }

    .lead-engine-page .lead-hero-minimal .lios-hero-chart-bars i {
        animation: lios-chart-bar-wave 3600ms var(--ease) infinite alternate;
    }
}

@keyframes lios-home-copy-in {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes lios-home-value-in {
    from {
        opacity: 0;
        transform: translate3d(0, 26px, 0) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 760px) {
    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip {
        scroll-padding-inline: 2px;
        scroll-snap-stop: always;
        touch-action: pan-x;
        -webkit-mask-image: linear-gradient(
            to right,
            #000 0,
            #000 calc(100% - 30px),
            transparent 100%
        );
        mask-image: linear-gradient(
            to right,
            #000 0,
            #000 calc(100% - 30px),
            transparent 100%
        );
    }

    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
        scroll-snap-stop: always;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lead-engine-page .lead-hero-copy-classic > h1,
    .lead-engine-page .lead-hero-copy-classic > .sales-hero-text,
    .lead-engine-page .lead-hero-copy-classic > .hero-actions-classic,
    .lead-engine-page .lead-hero-copy-classic > .lead-hero-value-strip,
    .lead-engine-page .lead-hero-copy-classic .lead-hero-value-strip article {
        animation: none !important;
        transform: none !important;
    }
}