/* =============================================================================================
   marketing-v2.css — new ReliableSuite public marketing site (/home-v2)

   Loaded ONLY by MarketingLayoutV2 (via <HeadContent>), so the live homepage at "/" never receives a
   byte of it. Every rule is additionally scoped under `.mkt-v2` (or `:has(.mkt-v2)` for the two
   document-level rules that genuinely need it) as a second line of defence.

   Shared theme.css and ReliableSuite.Portal.Shared are untouched; site.css is untouched. This sheet
   loads after both, and the `.mkt-v2` scope neutralises what they would otherwise inherit in.

   Design tokens, colours and spacing are the approved values from
   systemdocs/portals/prototype/design_handoff_homepage.

   Stage 2 covers: announcement bar, header, mobile drawer, hero, hero product visual, modules strip.
   Stage 3 adds:   section primitives, trust strip, business problems, product overview, business flow.
   Stage 4 adds:   module explorer, industry solutions.
   Stage 5 adds:   deployment comparison, BI &amp; AI band.
   Stage 6 adds:   customer success, testimonials, about preview, commercial models.
   Stage 7 adds:   FAQ, closing CTA, site footer, floating widgets, Ask Reliable assistant.
   Later added:    the legal-document surface used by /privacy-policy (25.1).

   Contents
     1.  Font + tokens
     2.  Scoped reset
     3.  Buttons
     4.  Announcement bar
     5.  Site header
     6.  Mobile drawer
     7.  Hero
     8.  Hero product visual
     9.  Connected modules strip
     10. Section primitives (eyebrow / h2 / lead — shared by every band below)
     11. Trust strip
     12. Business problems
     13. Product overview
     14. Business flow
     15. Module explorer
     16. Industry solutions
     17. Deployment comparison
     18. BI &amp; AI band
     19. Customer success + testimonials
     20. About preview
     21. Commercial models
     22. FAQ
     23. Closing CTA
     24. Site footer
     25. Floating widgets + Ask Reliable assistant
     25.1 Legal document (Privacy Policy)
     26. Responsive
     27. Motion preferences
   ============================================================================================= */


/* ---------------------------------------------------------------------------------------------
   1. Font + tokens
   --------------------------------------------------------------------------------------------- */

/* Self-hosted variable Manrope. Declaring the family is inert on its own — it is only ever applied
   inside `.mkt-v2`, so the current site's typography is unchanged. */
@font-face {
    font-family: 'Manrope V2';
    src: url('/fonts/Manrope-Variable.ttf') format('truetype-variations'),
         url('/fonts/Manrope-Variable.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

.mkt-v2 {
    /* brand */
    --mkt-navy-900: #0F2A50;
    --mkt-navy: #15396B;
    --mkt-blue-deep: #1E5C9E;
    --mkt-blue: #2F7BC3;
    --mkt-cyan: #21B6D7;
    --mkt-green: #27B15C;
    --mkt-green-deep: #17703C;
    --mkt-mint: #7FE0A8;

    /* text */
    --mkt-text: #1F2A37;
    --mkt-muted: #5F6B7F;
    --mkt-secondary: #33456A;
    --mkt-faint: #5D6A7D;
    --mkt-on-navy: #C4D2E8;
    --mkt-on-navy-soft: #9DB2D2;
    --mkt-announce-text: #B9C9E2;

    /* surfaces */
    --mkt-border: #E5EAF1;
    --mkt-border-soft: #EEF2F7;
    --mkt-border-hover: #C4D5EA;

    /* layout */
    --mkt-shell: 1280px;
    --mkt-gutter: clamp(18px, 3vw, 40px);
    --mkt-header-h: 72px;

    /* focus */
    --mkt-focus: #1E5C9E;
}

/* Sticky-header offset for in-page anchors + smooth scrolling, applied only when a marketing page is
   mounted. `:has()` keeps this genuinely scoped to the marketing root rather than global. */
html:has(.mkt-v2) {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--mkt-header-h, 72px) + 16px);
}

/* Body scroll lock while the drawer is open. */
html.rs-mkt-v2-drawer-open,
html.rs-mkt-v2-drawer-open body {
    overflow: hidden;
}


/* ---------------------------------------------------------------------------------------------
   2. Scoped reset
   --------------------------------------------------------------------------------------------- */

.mkt-v2 {
    font-family: 'Manrope V2', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--mkt-text);
    background: #fff;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
}

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

/* These undo what theme.css / site.css would otherwise inherit in. Each element selector is wrapped in
   :where() so the rule keeps a single-class weight (0,1,0): strong enough to beat the bare `a` / `p` /
   `button` rules coming from the shared sheets, but never strong enough to beat a `.mkt-v2-*` component
   rule further down this file. Without :where() the reset silently ate component colours and margins. */
/* blockquote/figure carry a UA inline margin (40px in Chrome) that indents a quote away from its own
   attribution — they belong in the reset just as much as the block elements above them. */
.mkt-v2 :where(h1, h2, h3, p, ul, ol, li, dl, dt, dd, figure, figcaption, blockquote) {
    margin: 0;
    padding: 0;
}

.mkt-v2 :where(ul, ol) {
    list-style: none;
}

.mkt-v2 :where(a) {
    text-decoration: none;
    color: inherit;
}

.mkt-v2 :where(button) {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.mkt-v2 :where(img, svg) {
    display: block;
    max-width: 100%;
}

/* One visible focus treatment for every interactive element on the page. */
.mkt-v2 a:focus-visible,
.mkt-v2 button:focus-visible {
    outline: 2px solid var(--mkt-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

.mkt-v2-main {
    display: block;
}


/* ---------------------------------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------------------------------- */

.mkt-v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 9px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.mkt-v2-btn-outline {
    color: var(--mkt-navy);
    font-size: clamp(12px, .95vw, 13px);
    padding-block: 9px;
    padding-inline: clamp(10px, 1.1vw, 14px);
    border: 1.5px solid #D4DEEA;
}

.mkt-v2-btn-outline:hover {
    border-color: var(--mkt-navy);
}

.mkt-v2-btn-solid {
    color: #fff;
    font-size: clamp(12px, .95vw, 13px);
    padding-block: 9px;
    padding-inline: clamp(12px, 1.25vw, 16px);
    background: var(--mkt-navy);
}

.mkt-v2-btn-solid:hover {
    background: var(--mkt-navy-900);
    color: #fff;
}

/* Hero-scale CTAs. */
.mkt-v2-btn-lg {
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 10px;
}

.mkt-v2-btn-light {
    background: #fff;
    color: var(--mkt-navy-900);
    font-weight: 700;
}

.mkt-v2-btn-light:hover {
    background: #E9F2FF;
    color: var(--mkt-navy-900);
}

.mkt-v2-btn-onnavy {
    color: #fff;
    font-weight: 600;
    border: 1.5px solid rgba(255, 255, 255, .38);
}

.mkt-v2-btn-onnavy:hover {
    border-color: #fff;
    color: #fff;
}

/* Focus ring needs to stay visible against the navy hero. */
.mkt-v2-hero .mkt-v2-btn:focus-visible,
.mkt-v2-announce a:focus-visible,
.mkt-v2-announce button:focus-visible {
    outline-color: var(--mkt-mint);
}

.mkt-v2-btn-block {
    display: flex;
    width: 100%;
    font-size: 14px;
    padding-block: 12px;
}


/* ---------------------------------------------------------------------------------------------
   4. Announcement bar
   --------------------------------------------------------------------------------------------- */

.mkt-v2-announce {
    background: var(--mkt-navy-900);
    color: var(--mkt-announce-text);
    font-size: 12.5px;
    letter-spacing: .01em;
}

/* Session-scoped dismissal, applied by marketing-v2.js (and pre-applied in App.razor before paint). */
html.rs-mkt-v2-announce-dismissed .mkt-v2-announce {
    display: none;
}

.mkt-v2-announce-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    padding: 8px var(--mkt-gutter);
}

.mkt-v2-announce-lead {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.mkt-v2-announce-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mkt-v2-announce-brand {
    color: #fff;
    font-weight: 600;
}

.mkt-v2-announce-cta {
    color: var(--mkt-mint);
    font-weight: 600;
    white-space: nowrap;
}

.mkt-v2-announce-cta:hover {
    color: #A6ECC4;
}

.mkt-v2-announce-meta {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

/* Vertical padding lifts the hit area to the 24px WCAG 2.2 minimum without changing the bar's height —
   the row is already taller than the text, so this only claims space that was dead. */
.mkt-v2-announce-link,
.mkt-v2-announce-cta {
    padding-block: 5px;
}

.mkt-v2-announce-link {
    color: var(--mkt-announce-text);
    white-space: nowrap;
}

.mkt-v2-announce-link:hover {
    color: #fff;
}

/* Destination not configured — present but plainly not a link (see AnnouncementBar). */
.mkt-v2-announce-link.is-inactive {
    color: #7E93B4;
    cursor: default;
}

.mkt-v2-announce-lang {
    color: var(--mkt-mint);
}

.mkt-v2-announce-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    color: #6E86AC;
}

.mkt-v2-announce-dismiss:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}


/* ---------------------------------------------------------------------------------------------
   5. Site header
   --------------------------------------------------------------------------------------------- */

.mkt-v2-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--mkt-border);
}

.mkt-v2-header-inner {
    max-width: var(--mkt-shell);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px var(--mkt-gutter);
    /* The nav must stay on one line: below the breakpoint the drawer takes over instead of wrapping. */
    flex-wrap: nowrap;
}

/* ---- brand block ---- */

.mkt-v2-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 0 0 auto;
}

.mkt-v2-brand-mark {
    height: 34px;
    width: auto;
}

.mkt-v2-brand-type {
    line-height: 1;
}

.mkt-v2-wordmark {
    display: block;
    font-weight: 800;
    font-size: clamp(14px, 1.25vw, 16.5px);
    letter-spacing: .01em;
    white-space: nowrap;
}

.mkt-v2-wordmark-lead {
    color: var(--mkt-navy);
}

.mkt-v2-wordmark-accent {
    color: var(--mkt-green);
}

/* Raised from clamp(6.5px, .57vw, 7.5px): 6.5-7.5px is below the size at which the .26em tracking
   stays legible, and it failed contrast at any weight. Letter-spacing trimmed a little so the longer
   glyphs still fit beside the 34px mark without forcing the header wider. */
.mkt-v2-wordmark-sub {
    display: block;
    font-size: clamp(9px, .72vw, 9.5px);
    letter-spacing: .2em;
    color: #55627A;
    margin-top: 3px;
    white-space: nowrap;
}

/* ---- primary nav ---- */

.mkt-v2-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.5vw, 24px);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    color: var(--mkt-secondary);
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.mkt-v2-nav-link {
    color: var(--mkt-secondary);
    position: relative;
    padding-block: 4px;
    transition: color .16s ease;
}

.mkt-v2-nav-link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--mkt-green);
    transform: scaleX(0);
    transition: transform .18s ease;
}

.mkt-v2-nav-link:hover {
    color: var(--mkt-navy);
}

.mkt-v2-nav-link:hover::after {
    transform: scaleX(1);
}

.mkt-v2-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ---- menu button (below the nav breakpoint only) ---- */

.mkt-v2-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid #D4DEEA;
    border-radius: 10px;
    flex: 0 0 auto;
}

.mkt-v2-menu-btn:hover {
    border-color: var(--mkt-navy);
}


/* ---------------------------------------------------------------------------------------------
   6. Mobile drawer
   --------------------------------------------------------------------------------------------- */

.mkt-v2-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(11, 31, 60, .48);
    opacity: 0;
    transition: opacity .2s ease;
}

.mkt-v2-drawer-backdrop[hidden] {
    display: none;
}

html.rs-mkt-v2-drawer-open .mkt-v2-drawer-backdrop {
    opacity: 1;
}

.mkt-v2-drawer {
    position: fixed;
    z-index: 81;
    inset-block: 0;
    inset-inline-end: 0;                 /* logical: flips automatically under dir="rtl" */
    width: min(340px, 86vw);
    background: #fff;
    border-inline-start: 1px solid var(--mkt-border);
    box-shadow: -24px 0 60px -30px rgba(15, 42, 80, .55);
    display: flex;
    flex-direction: column;
    padding: 18px 22px 26px;
    transform: translateX(100%);
    transition: transform .22s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mkt-v2-drawer[hidden] {
    display: none;
}

[dir='rtl'] .mkt-v2-drawer {
    transform: translateX(-100%);
}

html.rs-mkt-v2-drawer-open .mkt-v2-drawer {
    transform: translateX(0);
}

.mkt-v2-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mkt-border);
}

.mkt-v2-drawer-brand {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mkt-v2-drawer-brand .mkt-v2-brand-mark {
    height: 28px;
}

.mkt-v2-wordmark-sm {
    font-size: 14.5px;
}

.mkt-v2-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid var(--mkt-border);
}

.mkt-v2-drawer-close:hover {
    background: #F4F7FB;
}

.mkt-v2-drawer-nav {
    display: flex;
    flex-direction: column;
    padding-block: 8px;
    flex: 1 1 auto;
}

.mkt-v2-drawer-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--mkt-secondary);
    padding: 13px 4px;
    border-bottom: 1px solid #F1F4F8;
}

.mkt-v2-drawer-link:hover {
    color: var(--mkt-navy);
}

.mkt-v2-drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
}


/* ---------------------------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------------------------- */

.mkt-v2-hero-frame {
    background: #fff;
    padding: 28px 32px 0;
}

.mkt-v2-hero {
    position: relative;
    max-width: var(--mkt-shell);
    margin-inline: auto;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(120deg, #0F2A50 0%, #15396B 48%, #155E74 100%);
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    gap: 8px;
    align-items: center;
}

/* 44px grid-line overlay at 4.5% white. */
.mkt-v2-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
}

.mkt-v2-hero-watermark {
    position: absolute;
    inset-inline-start: -46px;
    bottom: -56px;
    width: 270px;
    height: 270px;
    opacity: .09;
    pointer-events: none;
}

.mkt-v2-hero-copy {
    position: relative;
    padding: 52px 8px 52px 52px;
    animation: mktV2FadeUp .7s ease both;
}

.mkt-v2-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mkt-mint);
    background: rgba(127, 224, 168, .1);
    border: 1px solid rgba(127, 224, 168, .28);
    padding: 7px 14px;
    border-radius: 100px;
    margin-bottom: 22px;
}

/* Holds the approved 44px exactly at >= 1280px and scales down cleanly below it. */
.mkt-v2-hero-title {
    font-size: clamp(30px, 3.44vw, 44px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.025em;
    color: #fff;
    margin-bottom: 18px;
    text-wrap: balance;
}

.mkt-v2-hero-lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--mkt-on-navy);
    max-width: 470px;
    margin-bottom: 28px;
}

.mkt-v2-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-bottom: 26px;
}

.mkt-v2-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    font-size: 12.5px;
    color: var(--mkt-on-navy-soft);
    font-weight: 600;
}

.mkt-v2-hero-points li {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* ---------------------------------------------------------------------------------------------
   8. Hero product visual
   --------------------------------------------------------------------------------------------- */

.mkt-v2-visual {
    position: relative;
    padding: 40px 40px 40px 6px;
    animation: mktV2FadeUp .7s .12s ease both;
}

.mkt-v2-mockup {
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 44px 90px -30px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* ---- browser chrome ---- */

.mkt-v2-mockup-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--mkt-border-soft);
    background: #FBFCFE;
}

.mkt-v2-mockup-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.mkt-v2-mockup-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E2E7EE;
}

.mkt-v2-mockup-url {
    font-size: 10.5px;
    color: var(--mkt-faint);
    font-weight: 600;
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-v2-mockup-live {
    font-size: 9.5px;
    color: var(--mkt-green);
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ---- dashboard ---- */

.mkt-v2-mockup-body {
    padding: 15px 16px 16px;
}

.mkt-v2-mockup-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.mkt-v2-mockup-headline {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.mkt-v2-mockup-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    white-space: nowrap;
}

.mkt-v2-mockup-scope {
    font-size: 9.5px;
    color: #4A5D7E;
    background: #F0F4FA;
    border: 1px solid var(--mkt-border);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-v2-caret {
    color: #7E8DA5;
}

.mkt-v2-mockup-period {
    font-size: 9.5px;
    color: #94A2B6;
    background: #F2F5FA;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 600;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ---- KPI cards ---- */

.mkt-v2-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.mkt-v2-kpi {
    border: 1px solid var(--mkt-border-soft);
    border-radius: 9px;
    padding: 9px 10px;
    min-width: 0;
}

.mkt-v2-kpi-label {
    display: block;
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mkt-faint);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-v2-kpi-value {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-top: 3px;
    white-space: nowrap;
}

.mkt-v2-kpi-delta {
    display: block;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
}

.mkt-v2-kpi-delta.is-positive {
    color: var(--mkt-green);
}

.mkt-v2-kpi-delta.is-neutral {
    color: #94A2B6;
}

/* ---- charts ---- */

.mkt-v2-charts {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
}

.mkt-v2-card {
    border: 1px solid var(--mkt-border-soft);
    border-radius: 9px;
    min-width: 0;
}

.mkt-v2-trend {
    padding: 11px 12px 6px;
}

.mkt-v2-mix {
    padding: 11px 12px;
}

.mkt-v2-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.mkt-v2-card-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--mkt-navy-900);
}

.mkt-v2-card-meta {
    font-size: 8.5px;
    color: var(--mkt-blue);
    font-weight: 600;
    white-space: nowrap;
}

/* preserveAspectRatio="none" lets the series span the card at any width; the stroke keeps its
   2.4px weight via vector-effect rather than being scaled with it. */
.mkt-v2-trend-svg {
    width: 100%;
    height: 66px;
}

.mkt-v2-mix .mkt-v2-card-title {
    display: block;
    margin-bottom: 8px;
}

.mkt-v2-mix-bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mkt-v2-mix-label {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: 8.5px;
    color: #61708A;
    font-weight: 600;
    margin-bottom: 3px;
}

.mkt-v2-mix-track {
    height: 5px;
    border-radius: 3px;
    background: var(--mkt-border-soft);
}

.mkt-v2-mix-fill {
    height: 5px;
    border-radius: 3px;
}

/* ---- Reliable Intelligence panel ---- */

.mkt-v2-intel {
    border: 1px solid #DDEBE2;
    background: #F4FBF7;
    border-radius: 9px;
    padding: 9px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mkt-v2-intel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mkt-v2-intel-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mkt-green-deep);
}

.mkt-v2-intel-count {
    font-size: 8.5px;
    color: #61708A;
    font-weight: 600;
    white-space: nowrap;
}

.mkt-v2-intel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 9.5px;
    color: var(--mkt-secondary);
    font-weight: 600;
}

.mkt-v2-intel-text {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.mkt-v2-intel-text .mkt-v2-icon {
    flex: 0 0 auto;
}

.mkt-v2-intel-action {
    color: var(--mkt-blue-deep);
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ---- floating stock alert (intentionally overlaps the browser chrome) ---- */

.mkt-v2-float-alert {
    position: absolute;
    top: 22px;
    inset-inline-end: 22px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 44px -16px rgba(15, 42, 80, .5);
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    animation: mktV2FadeUp .7s .4s ease both;
}

.mkt-v2-float-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #FDF2E7;
    flex: 0 0 auto;
}

.mkt-v2-float-copy {
    line-height: 1.35;
}

.mkt-v2-float-title {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    white-space: nowrap;
}

.mkt-v2-float-body {
    display: block;
    font-size: 9px;
    color: var(--mkt-muted);
    font-weight: 600;
    white-space: nowrap;
}


/* ---------------------------------------------------------------------------------------------
   9. Connected modules strip
   --------------------------------------------------------------------------------------------- */

.mkt-v2-strip {
    max-width: var(--mkt-shell);
    margin-inline: auto;
    padding: 34px var(--mkt-gutter) 20px;
}

.mkt-v2-strip-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.mkt-v2-strip-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--mkt-muted);
    letter-spacing: .02em;
    line-height: 1.5;
    flex: 0 0 auto;
}

.mkt-v2-strip-emph {
    color: var(--mkt-text);
}

.mkt-v2-strip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
}

.mkt-v2-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--mkt-border);
    border-radius: 12px;
    padding: 10px 16px;
    background: #fff;
    color: var(--mkt-text);
    height: 100%;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mkt-v2-chip:hover {
    border-color: var(--mkt-border-hover);
    box-shadow: 0 10px 24px -16px rgba(16, 40, 80, .4);
    transform: translateY(-1px);
}

.mkt-v2-chip-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.mkt-v2-chip-name {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}


/* ---------------------------------------------------------------------------------------------
   10. Section primitives — the eyebrow / heading / lead trio every band below reuses
   --------------------------------------------------------------------------------------------- */

.mkt-v2 {
    --mkt-content: 1180px;
    --mkt-band-pad: 84px;
}

/* Eyebrows sit on white and on five different tinted bands. The approved #2CA978 measured 2.69-2.98:1
   against them; #17703C clears 4.5:1 on every one (5.38-6.14) while staying the same brand green
   family. #1F8A4C was evaluated first and only reached 3.83-4.38, so it would not have fixed this. */
.mkt-v2-eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #17703C;
    margin-bottom: 12px;
}

/* Holds the approved sizes (32 / 36 / 34px) at desktop and scales down on phones, so no band needs a
   heading override in the breakpoint blocks. */
.mkt-v2-h2 {
    font-size: clamp(24px, 4.6vw, 32px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--mkt-navy-900);
    line-height: 1.15;
    margin-bottom: 16px;
    text-wrap: balance;
}

.mkt-v2-h2-lg {
    font-size: clamp(26px, 5vw, 36px);
}

.mkt-v2-section-lead {
    font-size: 15px;
    line-height: 1.7;
    color: var(--mkt-muted);
}

/* Split band header: eyebrow + heading on the lead edge, supporting copy trailing. Used by the module
   explorer and the industries grid. */
.mkt-v2-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 38px;
}

.mkt-v2-section-head .mkt-v2-h2-band {
    margin-bottom: 0;
}

.mkt-v2-section-aside {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mkt-muted);
    max-width: 420px;
    text-align: end;
}


/* ---------------------------------------------------------------------------------------------
   11. Trust strip
   --------------------------------------------------------------------------------------------- */

.mkt-v2-trust {
    background: #E3F4EA;
    padding: 44px 0 48px;
    margin-top: 34px;
}

.mkt-v2-trust-heading {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mkt-green-deep);
    text-align: center;
    margin-bottom: 26px;
}

/* Feathered edges so logos enter and leave the band instead of being chopped off. */
.mkt-v2-marquee-mask {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mkt-v2-marquee {
    display: flex;
    width: max-content;
    animation: mktV2Marquee 45s linear infinite;
}

/* The gap belongs to the track, not the rail: one track then measures exactly one loop period, so
   translating the rail -50% lands seamlessly. A gap on the rail would leave a half-gap seam. */
.mkt-v2-marquee-track {
    display: flex;
    gap: 14px;
    padding-inline-end: 14px;
}

.mkt-v2-marquee-slot {
    flex: 0 0 auto;
    width: 150px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
}

/* <picture> is the flex child now (WebP + PNG fallback). It needs a DEFINITE size, not max-*: the
   img's own max-height:100% resolves against its parent, and a parent of auto height makes that
   percentage indefinite — the logo then sizes to width only and overflows the 56px slot. */
.mkt-v2-marquee-slot picture {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mkt-v2-marquee-slot img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;   /* never stretch or crop a customer's mark */
}


/* ---------------------------------------------------------------------------------------------
   12. Business problems
   --------------------------------------------------------------------------------------------- */

.mkt-v2-problems {
    background: #EEF4FB;
    padding: var(--mkt-band-pad) var(--mkt-gutter);
}

.mkt-v2-problems-inner {
    max-width: var(--mkt-content);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

/* Clears the sticky header; released below the two-column breakpoint (see §15). */
.mkt-v2-problems-rail {
    position: sticky;
    top: 110px;
}

.mkt-v2-problems-rail .mkt-v2-section-lead {
    margin-bottom: 22px;
}

.mkt-v2-pain-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mkt-v2-pain-chip {
    font-size: 12px;
    font-weight: 600;
    color: #4A5D7E;
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 100px;
    padding: 6px 13px;
}

.mkt-v2-problem-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mkt-v2-problem-card {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 16px;
    padding: 26px 28px;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.mkt-v2-problem-card:hover {
    border-color: var(--mkt-border-hover);
    box-shadow: 0 18px 44px -28px rgba(16, 40, 80, .35);
}

/* auto-fit collapses three columns to two then one as the card narrows — no extra breakpoints needed. */
.mkt-v2-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.mkt-v2-problem-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.mkt-v2-problem-label.is-problem {
    color: #B0433A;
}

.mkt-v2-problem-label.is-impact {
    color: #8A5F13;
}

.mkt-v2-problem-label.is-outcome {
    color: var(--mkt-green-deep);
}

.mkt-v2-problem-value.is-problem {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mkt-text);
    font-weight: 600;
}

.mkt-v2-problem-value.is-impact {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mkt-muted);
}

.mkt-v2-problem-value.is-outcome {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mkt-navy);
    font-weight: 600;
}


/* ---------------------------------------------------------------------------------------------
   13. Product overview
   --------------------------------------------------------------------------------------------- */

.mkt-v2-overview {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 92px var(--mkt-gutter) var(--mkt-band-pad);
}

.mkt-v2-overview-intro {
    text-align: center;
}

.mkt-v2-overview-intro .mkt-v2-eyebrow {
    margin-bottom: 14px;
}

.mkt-v2-overview-intro .mkt-v2-h2 {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: 18px;
}

.mkt-v2-overview-lead {
    font-size: 16px;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: 48px;
}

.mkt-v2-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mkt-v2-pillar {
    border: 1px solid var(--mkt-border);
    border-radius: 18px;
    padding: 30px;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.mkt-v2-pillar:hover {
    border-color: var(--mkt-border-hover);
    box-shadow: 0 18px 44px -28px rgba(16, 40, 80, .35);
}

.mkt-v2-pillar-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    margin-bottom: 18px;
}

.mkt-v2-pillar-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-bottom: 8px;
}

.mkt-v2-pillar-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--mkt-muted);
}


/* ---------------------------------------------------------------------------------------------
   14. Business flow
   --------------------------------------------------------------------------------------------- */

.mkt-v2-flow {
    background: #EDF6F0;
    padding: var(--mkt-band-pad) var(--mkt-gutter);
}

.mkt-v2-flow-inner {
    max-width: var(--mkt-content);
    margin-inline: auto;
}

.mkt-v2-flow-head {
    text-align: center;
    margin-bottom: 52px;
}

.mkt-v2-flow-head .mkt-v2-h2 {
    font-size: clamp(25px, 4.8vw, 34px);
    margin-bottom: 14px;
}

.mkt-v2-flow-lead {
    font-size: 15.5px;
    max-width: 560px;
    margin-inline: auto;
}

.mkt-v2-flow-steps {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
}

.mkt-v2-flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

/* Decorative connector: runs from this circle's edge to the next circle's edge, so it never passes
   under a circle and needs no stacking tricks. Suppressed on the last item of each visual row. */
.mkt-v2-flow-step::after {
    content: '';
    position: absolute;
    top: 26px;
    inset-inline-start: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 2px;
    background: repeating-linear-gradient(90deg, #9DBFAE 0 8px, transparent 8px 16px);
    animation: mktV2FlowDash 1.4s linear infinite;
}

.mkt-v2-flow-step:last-child::after {
    content: none;
}

.mkt-v2-flow-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #DCE5EF;
    font-size: 13px;
    font-weight: 800;
    color: var(--mkt-navy);
    box-shadow: 0 6px 16px -8px rgba(16, 40, 80, .25);
    flex: 0 0 auto;
}

.mkt-v2-flow-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mkt-secondary);
    line-height: 1.3;
}

.mkt-v2-flow-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 26px;
    margin-top: 44px;
    font-size: 13px;
    color: var(--mkt-muted);
    font-weight: 600;
}

.mkt-v2-flow-points li {
    display: flex;
    align-items: center;
    gap: 7px;
}


/* ---------------------------------------------------------------------------------------------
   15. Module explorer
   --------------------------------------------------------------------------------------------- */

.mkt-v2-modules {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 92px var(--mkt-gutter);
}

.mkt-v2-mod-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 22px;
    align-items: stretch;
}

/* ---- selector rail ---- */

.mkt-v2-mod-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mkt-v2-mod-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    border-radius: 12px;
    border: 1px solid #EDF1F6;
    background: transparent;
    text-align: start;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.mkt-v2-mod-btn:hover {
    border-color: var(--mkt-border-hover);
}

/* Selected state is carried by aria-pressed, so the styling can never drift from what AT is told.
   Colours are the approved values (white surface, #C4D5EA border, stronger text). The light shadow is
   an addition: the approved white-on-white surface reads clearly in a static mock but not in a live
   control on a white page — it lifts the selection without changing any approved colour, and the spec
   reserves shadow for the active item ("inactive ... no heavy shadow"). */
.mkt-v2-mod-btn[aria-pressed='true'] {
    background: #fff;
    border-color: var(--mkt-border-hover);
    box-shadow: 0 6px 18px -12px rgba(16, 40, 80, .45);
}

.mkt-v2-mod-btn-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    background: var(--mkt-mod-tile, #EEF2F7);   /* set per module from ModuleCatalog */
}

.mkt-v2-mod-btn-name {
    font-size: 14px;
    font-weight: 700;
    color: #556279;
    transition: color .16s ease;
}

.mkt-v2-mod-btn[aria-pressed='true'] .mkt-v2-mod-btn-name {
    color: var(--mkt-navy-900);
}

/* ---- detail panel ---- */

.mkt-v2-mod-panels {
    display: grid;   /* every panel occupies the same cell, so switching cannot shift the layout */
}

.mkt-v2-mod-panel {
    grid-area: 1 / 1;
    border: 1px solid var(--mkt-border);
    border-radius: 20px;
    padding: 34px 36px;
    background: linear-gradient(160deg, #FBFDFF, #F5F8FC);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: start;
}

.mkt-v2-mod-panel[hidden] {
    display: none;
}

.mkt-v2-mod-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-bottom: 12px;
}

.mkt-v2-mod-desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #556279;
    margin-bottom: 22px;
}

.mkt-v2-mod-caps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.mkt-v2-mod-caps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: var(--mkt-secondary);
    font-weight: 600;
    line-height: 1.5;
}

.mkt-v2-mod-caps .mkt-v2-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.mkt-v2-mod-outcome {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #E9F7EE;
    border: 1px solid #CDEBD9;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mkt-green-deep);
}

/* ---- in-product preview ---- */

.mkt-v2-mod-preview {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 24px 54px -36px rgba(16, 40, 80, .4);
    align-self: center;
}

.mkt-v2-mod-preview-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-bottom: 14px;
}

.mkt-v2-mod-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.mkt-v2-mod-kpi {
    border: 1px solid var(--mkt-border-soft);
    border-radius: 9px;
    padding: 9px 10px;
    min-width: 0;
}

.mkt-v2-mod-kpi-label {
    display: block;
    font-size: 8.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mkt-faint);
    font-weight: 700;
}

.mkt-v2-mod-kpi-value {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-top: 3px;
}

/* Real table markup — this is tabular data, and fixed layout keeps the columns aligned across
   modules whose cell text differs wildly in length. */
.mkt-v2-mod-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.mkt-v2-mod-table th:nth-child(1),
.mkt-v2-mod-table td:nth-child(1) {
    width: 44%;
}

.mkt-v2-mod-table th:nth-child(2),
.mkt-v2-mod-table td:nth-child(2) {
    width: 31%;
}

.mkt-v2-mod-table th:nth-child(3),
.mkt-v2-mod-table td:nth-child(3) {
    width: 25%;
}

.mkt-v2-mod-table th {
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--mkt-faint);
    font-weight: 700;
    text-align: start;
    padding: 0 4px 7px;
    border-bottom: 1px solid var(--mkt-border-soft);
}

.mkt-v2-mod-table td {
    font-size: 11px;
    color: var(--mkt-secondary);
    font-weight: 600;
    padding: 9px 4px;
    border-bottom: 1px solid #F4F7FA;
    overflow-wrap: anywhere;
}

.mkt-v2-mod-table .is-primary {
    color: var(--mkt-navy-900);
    font-weight: 700;
}

.mkt-v2-mod-table .is-end {
    text-align: end;
}

.mkt-v2-mod-table td.is-end {
    color: var(--mkt-blue-deep);
}


/* ---------------------------------------------------------------------------------------------
   16. Industry solutions
   --------------------------------------------------------------------------------------------- */

.mkt-v2-industries {
    background: #EBF4F8;
    padding: var(--mkt-band-pad) var(--mkt-gutter);
}

.mkt-v2-industries-inner {
    max-width: var(--mkt-content);
    margin-inline: auto;
}

.mkt-v2-industries .mkt-v2-section-aside {
    max-width: 400px;
}

.mkt-v2-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

/* Span comes from IndustryCatalog via a custom property; 1 is the fallback and the narrow-layout
   reset (see §17). Spans total 8 cells, filling the four-column grid in exactly two rows. */
.mkt-v2-industry-cell {
    grid-column: span var(--mkt-ind-span, 1);
    display: flex;
}

.mkt-v2-industry-card {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.mkt-v2-industry-card:hover {
    border-color: var(--mkt-border-hover);
    box-shadow: 0 18px 44px -28px rgba(16, 40, 80, .35);
}

.mkt-v2-industry-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--mkt-navy-900);
}

/* Grows so the chips and footer line up along the bottom of every card in a row. */
.mkt-v2-industry-pain {
    font-size: 13px;
    line-height: 1.6;
    color: var(--mkt-muted);
    flex: 1;
}

.mkt-v2-industry-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mkt-v2-industry-mod {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mkt-blue-deep);
    background: #EAF2FB;
    border-radius: 100px;
    padding: 4px 10px;
}

.mkt-v2-industry-deploy {
    font-size: 11.5px;
    font-weight: 700;
    color: #667085;
    border-top: 1px solid var(--mkt-border-soft);
    padding-top: 11px;
}


/* ---------------------------------------------------------------------------------------------
   17. Deployment comparison
   --------------------------------------------------------------------------------------------- */

.mkt-v2-deploy {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 92px var(--mkt-gutter);
}

/* Centred eyebrow / heading / lead intro, shared with the BI band below. */
.mkt-v2-band-intro {
    text-align: center;
    margin-bottom: 48px;
}

.mkt-v2-band-intro .mkt-v2-h2 {
    margin-bottom: 14px;
}

.mkt-v2-band-lead {
    font-size: 15.5px;
    max-width: 560px;
    margin-inline: auto;
}

.mkt-v2-deploy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Column layout + a growing feature list is what keeps both CTAs on one baseline — no fixed height,
   so nothing clips when one card's copy runs longer. */
.mkt-v2-deploy-card {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    padding: 36px;
}

.mkt-v2-deploy-card.is-cloud {
    background: #fff;
    border: 1px solid var(--mkt-border);
}

.mkt-v2-deploy-card.is-onpremise {
    background: linear-gradient(155deg, #0F2A50, #15396B);
    border: 1px solid transparent;
    color: #fff;
}

.mkt-v2-deploy-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 8px;
}

.mkt-v2-deploy-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.is-cloud .mkt-v2-deploy-tile {
    background: #E7F7FB;
}

.is-onpremise .mkt-v2-deploy-tile {
    background: rgba(127, 224, 168, .14);
}

.mkt-v2-deploy-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--mkt-navy-900);
}

.is-onpremise .mkt-v2-deploy-title {
    color: #fff;
}

.mkt-v2-deploy-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #0F7391;
}

.is-onpremise .mkt-v2-deploy-subtitle {
    color: var(--mkt-mint);
}

.mkt-v2-deploy-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--mkt-muted);
    margin: 12px 0 20px;
}

.is-onpremise .mkt-v2-deploy-desc {
    color: var(--mkt-announce-text);
}

.mkt-v2-deploy-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;              /* absorbs the height difference between the two cards */
}

.mkt-v2-deploy-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--mkt-secondary);
}

.is-onpremise .mkt-v2-deploy-feats li {
    color: #DCE6F4;
}

.mkt-v2-deploy-feats .mkt-v2-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.mkt-v2-deploy-cta {
    margin-top: 26px;
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 13px;
    border-radius: 10px;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.is-cloud .mkt-v2-deploy-cta {
    color: var(--mkt-navy);
    border: 1.5px solid #D4DEEA;
}

.is-cloud .mkt-v2-deploy-cta:hover {
    border-color: var(--mkt-navy);
}

.is-onpremise .mkt-v2-deploy-cta {
    color: var(--mkt-navy-900);
    background: #fff;
}

.is-onpremise .mkt-v2-deploy-cta:hover {
    background: #E9F2FF;
    color: var(--mkt-navy-900);
}

/* Focus ring has to clear the navy surface. */
.is-onpremise .mkt-v2-deploy-cta:focus-visible {
    outline-color: var(--mkt-mint);
}


/* ---------------------------------------------------------------------------------------------
   18. BI & AI band
   --------------------------------------------------------------------------------------------- */

.mkt-v2-bi-band {
    position: relative;
    overflow: hidden;
    background: var(--mkt-navy-900);
    padding: 92px var(--mkt-gutter);
}

.mkt-v2-bi-watermark {
    position: absolute;
    inset-inline-end: -60px;
    top: -70px;
    width: 320px;
    height: 320px;
    opacity: .07;
    pointer-events: none;
}

.mkt-v2-bi-inner {
    position: relative;
    max-width: var(--mkt-content);
    margin-inline: auto;
}

.mkt-v2-bi-intro {
    max-width: 640px;
    margin-bottom: 52px;
}

.mkt-v2-eyebrow-mint {
    color: var(--mkt-mint);
}

.mkt-v2-h2-onnavy {
    color: #fff;
}

.mkt-v2-bi-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--mkt-announce-text);
}

.mkt-v2-bi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Glass surfaces. The tint is the only thing that differs — each card also states its own
   included / optional status in its label, so the distinction never rests on colour. */
.mkt-v2-bi-card {
    border-radius: 18px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.mkt-v2-bi-card.is-standard {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
}

.mkt-v2-bi-card.is-optional {
    background: rgba(127, 224, 168, .07);
    border: 1px solid rgba(127, 224, 168, .25);
}

.mkt-v2-bi-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.is-standard .mkt-v2-bi-label {
    color: #8FB4E8;
}

.is-optional .mkt-v2-bi-label {
    color: var(--mkt-mint);
}

.mkt-v2-bi-title {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 16px;
}

.mkt-v2-bi-feats {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.mkt-v2-bi-feats li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.5;
}

.is-standard .mkt-v2-bi-feats li {
    color: #DCE6F4;
}

.is-optional .mkt-v2-bi-feats li {
    color: #D7F3E2;
}

.mkt-v2-bi-feats .mkt-v2-icon {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* Square marker for the Standard BI list — a bullet shape, drawn rather than typed. */
.mkt-v2-bi-bullet {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: #8FB4E8;
    flex: 0 0 auto;
    margin-top: 7px;
}

/* Present and legible, but visibly subordinate to the feature list above it. */
.mkt-v2-bi-note {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    font-size: 12px;
    line-height: 1.6;
    color: var(--mkt-on-navy-soft);
}


/* ---------------------------------------------------------------------------------------------
   19. Customer success + testimonials

   Two sibling components sharing one visual band: the case-study card sits above the testimonial
   pair, so this section drops its bottom padding and §19b picks up with the approved 18px gap.
   --------------------------------------------------------------------------------------------- */

.mkt-v2-cs {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 92px var(--mkt-gutter) 0;
}

.mkt-v2-cs-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 14px;
}

.mkt-v2-cs-head .mkt-v2-h2-band {
    margin-bottom: 0;
}

/* The section's honesty statement. Amber is a reinforcement — the wording carries the meaning. */
.mkt-v2-cs-badge {
    font-size: 11px;
    font-weight: 700;
    color: #8A5F13;
    background: #FDF6E9;
    border: 1px solid #F0E2C4;
    border-radius: 100px;
    padding: 6px 14px;
    white-space: nowrap;
}

.mkt-v2-cs-lead {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--mkt-muted);
    max-width: 560px;
    margin-bottom: 40px;
}

.mkt-v2-cs-card {
    border: 1px solid var(--mkt-border);
    border-radius: 20px;
    padding: 34px;
    background: linear-gradient(160deg, #FBFDFF, #F5F8FC);
}

.mkt-v2-cs-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mkt-blue-deep);
    margin-bottom: 18px;
}

.mkt-v2-cs-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}

.mkt-v2-cs-subhead {
    font-size: 12px;
    font-weight: 800;
    color: #667085;
    margin-bottom: 6px;
}

.mkt-v2-cs-before {
    font-size: 13.5px;
    line-height: 1.65;
    color: #556279;
}

.mkt-v2-cs-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.mkt-v2-cs-mod {
    font-size: 11px;
    font-weight: 700;
    color: var(--mkt-blue-deep);
    background: #EAF2FB;
    border-radius: 100px;
    padding: 4px 11px;
}

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

.mkt-v2-cs-metric {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 12px;
    padding: 16px;
}

/* Deliberately "[ % ]" / "[ KD ]" — a bracketed slot reads as unfilled, a number would read as fact. */
.mkt-v2-cs-metric-value {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--mkt-navy-900);
}

.mkt-v2-cs-metric-label {
    display: block;
    font-size: 12px;
    color: var(--mkt-muted);
    margin-top: 3px;
}


/* ---- 19b. Testimonials (continues the band above) ---- */

.mkt-v2-testi {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 18px var(--mkt-gutter) 92px;
}

.mkt-v2-testi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.mkt-v2-testi-grid > li {
    display: flex;
}

.mkt-v2-testi-card {
    border: 1px solid var(--mkt-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.mkt-v2-testi-quote {
    font-size: 14px;
    line-height: 1.7;
    color: var(--mkt-secondary);
    font-style: italic;
    margin-bottom: 14px;
    flex: 1;              /* keeps both attributions on the same baseline */
}

.mkt-v2-testi-by {
    display: flex;
    align-items: center;
    gap: 11px;
}

/* Holds an em dash, not initials — no information, so it is hidden from assistive tech. */
.mkt-v2-testi-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #EAF2FB;
    color: var(--mkt-blue-deep);
    font-weight: 800;
    font-size: 13px;
    flex: 0 0 auto;
}

.mkt-v2-testi-name {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--mkt-navy-900);
}

.mkt-v2-testi-role {
    display: block;
    font-size: 11.5px;
    color: #667085;
}


/* ---------------------------------------------------------------------------------------------
   20. About preview
   --------------------------------------------------------------------------------------------- */

.mkt-v2-about {
    background: #F0F3F9;
    padding: var(--mkt-band-pad) var(--mkt-gutter);
}

.mkt-v2-about-inner {
    max-width: var(--mkt-content);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 60px;
    align-items: center;
}

.mkt-v2-about-copy .mkt-v2-h2 {
    line-height: 1.18;
    margin-bottom: 18px;
}

.mkt-v2-about-para {
    font-size: 15px;
    line-height: 1.75;
    color: #556279;
    margin-bottom: 14px;
}

.mkt-v2-about-entity {
    color: var(--mkt-navy-900);
}

/* Plain text, not an anchor — the About page does not exist yet (see AboutPreview.razor). */
.mkt-v2-about-more {
    font-size: 14px;
    font-weight: 700;
    color: var(--mkt-blue-deep);
    margin-top: 26px;
}

.mkt-v2-about-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mkt-v2-about-fact {
    grid-column: span var(--mkt-about-span, 1);
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 16px;
    padding: 26px;
}

.mkt-v2-about-fact-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-bottom: 7px;
}

.mkt-v2-about-fact-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--mkt-muted);
}


/* ---------------------------------------------------------------------------------------------
   21. Commercial models
   --------------------------------------------------------------------------------------------- */

.mkt-v2-pricing {
    max-width: var(--mkt-content);
    margin-inline: auto;
    padding: 92px var(--mkt-gutter);
}

.mkt-v2-pricing-lead {
    font-size: 15.5px;
    max-width: 600px;
    margin-inline: auto;
}

.mkt-v2-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

/* Per-plan surface, tag and CTA colours come in as custom properties, so the card rules below stay
   variant-free. Defaults are the Cloud / Enterprise treatment. */
.mkt-v2-plan {
    --plan-bg: #fff;
    --plan-bd: var(--mkt-border);
    --plan-tag: #0F7391;
    --plan-cta-fg: var(--mkt-navy);
    --plan-cta-bg: #fff;
    --plan-cta-bd: #D4DEEA;

    display: flex;
    flex-direction: column;
    background: var(--plan-bg);
    border: 1px solid var(--plan-bd);
    border-radius: 20px;
    padding: 32px;
}

.mkt-v2-plan.is-onprem {
    --plan-bg: #F4F8FC;
    --plan-bd: var(--mkt-border-hover);
    --plan-tag: var(--mkt-green-deep);
    --plan-cta-fg: #fff;
    --plan-cta-bg: var(--mkt-navy);
    --plan-cta-bd: var(--mkt-navy);
}

.mkt-v2-plan.is-enterprise {
    --plan-tag: #5B4FB5;
}

.mkt-v2-plan-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--plan-tag);
    margin-bottom: 10px;
}

.mkt-v2-plan-name {
    font-size: 21px;
    font-weight: 800;
    color: var(--mkt-navy-900);
    margin-bottom: 6px;
}

.mkt-v2-plan-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--mkt-muted);
    margin-bottom: 22px;
}

.mkt-v2-plan-feats {
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1;              /* pins all three CTAs to one baseline without a fixed height */
    margin-bottom: 26px;
}

.mkt-v2-plan-feats li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: var(--mkt-secondary);
    font-weight: 600;
    line-height: 1.5;
}

.mkt-v2-plan-feats .mkt-v2-icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

.mkt-v2-plan-cta {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    padding: 13px;
    border-radius: 10px;
    color: var(--plan-cta-fg);
    background: var(--plan-cta-bg);
    border: 1.5px solid var(--plan-cta-bd);
    transition: opacity .16s ease;
}

.mkt-v2-plan-cta:hover {
    opacity: .92;
    color: var(--plan-cta-fg);
}


/* ---------------------------------------------------------------------------------------------
   22. FAQ
   --------------------------------------------------------------------------------------------- */

.mkt-v2-faq {
    background: #F3F5F0;
    padding: var(--mkt-band-pad) var(--mkt-gutter);
}

.mkt-v2-faq-inner {
    max-width: 880px;
    margin-inline: auto;
}

.mkt-v2-faq-head {
    text-align: center;
    margin-bottom: 44px;
}

.mkt-v2-faq-head .mkt-v2-h2 {
    margin-bottom: 0;
}

.mkt-v2-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mkt-v2-faq-item {
    background: #fff;
    border: 1px solid var(--mkt-border);
    border-radius: 14px;
    overflow: hidden;
}

/* The <h3> exists purely to put each question in the document outline; the button carries the look. */
.mkt-v2-faq-h {
    margin: 0;
    font: inherit;
}

.mkt-v2-faq-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 19px 24px;
    text-align: start;
}

.mkt-v2-faq-q {
    font-size: 15px;
    font-weight: 700;
    color: var(--mkt-navy-900);
}

/* Plus/minus drawn from two bars — the vertical one collapses when the item opens. A "+"/"−" glyph
   pair renders at inconsistent weights and widths across platforms. */
.mkt-v2-faq-mark {
    position: relative;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.mkt-v2-faq-mark::before,
.mkt-v2-faq-mark::after {
    content: '';
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    background: #8894A8;
    border-radius: 1px;
    translate: -50% -50%;
    transition: opacity .16s ease, rotate .16s ease;
}

.mkt-v2-faq-mark::before {
    width: 15px;
    height: 1.8px;
}

.mkt-v2-faq-mark::after {
    width: 1.8px;
    height: 15px;
}

.mkt-v2-faq-trigger[aria-expanded='true'] .mkt-v2-faq-mark::after {
    opacity: 0;
    rotate: 90deg;
}

.mkt-v2-faq-trigger[aria-expanded='true'] .mkt-v2-faq-mark::before {
    background: var(--mkt-navy-900);
}

.mkt-v2-faq-panel {
    padding: 0 24px 20px;
    animation: mktV2FaqReveal .18s ease both;
}

.mkt-v2-faq-panel[hidden] {
    display: none;
}

.mkt-v2-faq-a {
    font-size: 14px;
    line-height: 1.75;
    color: #556279;
    max-width: 760px;
}


/* ---------------------------------------------------------------------------------------------
   23. Closing CTA
   --------------------------------------------------------------------------------------------- */

.mkt-v2-cta {
    position: relative;
    overflow: hidden;
    padding: 92px var(--mkt-gutter);
    background: linear-gradient(120deg, #0F2A50 0%, #15396B 55%, #155E74 100%);
}

.mkt-v2-cta-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 44px 44px;
}

.mkt-v2-cta-inner {
    position: relative;
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}

.mkt-v2-cta-mark {
    height: 44px;
    width: auto;
    margin: 0 auto 22px;
}

.mkt-v2-cta-title {
    font-size: clamp(27px, 4.2vw, 38px);
    color: #fff;
    margin-bottom: 16px;
}

.mkt-v2-cta-lead {
    font-size: 16px;
    line-height: 1.7;
    color: var(--mkt-announce-text);
    max-width: 540px;
    margin: 0 auto 32px;
}

.mkt-v2-cta-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}

.mkt-v2-cta-actions .mkt-v2-btn-lg {
    padding: 15px 30px;
}

.mkt-v2-btn-whatsapp {
    color: #fff;
    font-weight: 600;
    padding-inline: 26px;
    border: 1.5px solid rgba(127, 224, 168, .5);
}

.mkt-v2-btn-whatsapp:hover {
    border-color: var(--mkt-mint);
    color: #fff;
}

.mkt-v2-cta .mkt-v2-btn:focus-visible {
    outline-color: var(--mkt-mint);
}


/* ---------------------------------------------------------------------------------------------
   24. Site footer
   --------------------------------------------------------------------------------------------- */

.mkt-v2-foot {
    background: #0B1F3C;
    color: #8FA3C4;
    padding: 64px var(--mkt-gutter) 34px;
}

.mkt-v2-foot-inner {
    max-width: var(--mkt-content);
    margin-inline: auto;
}

.mkt-v2-foot-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* ---- brand block ---- */

.mkt-v2-foot-mark {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
}

.mkt-v2-foot-mark img {
    height: 32px;
    width: auto;
}

.mkt-v2-foot-type {
    line-height: 1;
}

.mkt-v2-foot-wordmark {
    display: block;
    font-weight: 800;
    font-size: 15.5px;
    color: #fff;
}

.mkt-v2-foot-wordmark-accent {
    color: var(--mkt-mint);
}

/* Raised from 7px for the same reason as the header subtitle. */
.mkt-v2-foot-sub {
    display: block;
    font-size: 9px;
    letter-spacing: .2em;
    color: #8FA3C4;
    margin-top: 3px;
}

.mkt-v2-foot-desc {
    font-size: 13px;
    line-height: 1.7;
    max-width: 300px;
    margin-bottom: 18px;
}

.mkt-v2-foot-contact {
    font-size: 12px;
    line-height: 1.7;
    color: #8FA3C4;
    margin-bottom: 18px;
    font-style: normal;
}

.mkt-v2-foot-contact a {
    color: inherit;
}

.mkt-v2-foot-contact a:hover {
    color: var(--mkt-mint);
}

/* ---- socials ---- */

.mkt-v2-foot-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mkt-v2-foot-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #8FA3C4;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

a.mkt-v2-foot-social:hover {
    background: rgba(127, 224, 168, .14);
    border-color: rgba(127, 224, 168, .35);
    color: var(--mkt-mint);
}

/* Profile URL not configured — visibly present but plainly not clickable.
   #8497B6 gives 5.55:1 on the footer navy and 5.26:1 on the social tile, with enough headroom that the
   pixel sampler still measures it above 4.5 once antialiasing is accounted for. It stays visibly
   dimmer than the #8FA3C4 active links (6.43:1), so the "not yet a link" distinction survives.
   The original #4C5E7E measured 2.44:1. */
.mkt-v2-foot-social.is-inactive {
    color: #8497B6;
    background: rgba(255, 255, 255, .04);
}

/* ---- link columns ---- */

.mkt-v2-foot-colhead {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
}

/* gap 10px -> 4px with 6px of vertical padding on each item: identical visual rhythm, but each link
   now presents a >=24px target instead of a bare 18px text line. */
.mkt-v2-foot-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13.5px;
}

.mkt-v2-foot-links .mkt-v2-foot-link,
.mkt-v2-foot-legal-links .mkt-v2-foot-link,
.mkt-v2-foot-contact a {
    display: inline-block;
    padding-block: 6px;
}

.mkt-v2-foot-link {
    color: #8FA3C4;
    transition: color .16s ease;
}

a.mkt-v2-foot-link:hover {
    color: var(--mkt-mint);
}

/* No route yet — muted plain text, not a link that goes nowhere. See the note on
   .mkt-v2-foot-social.is-inactive for why this is #8497B6 rather than the dimmer original. */
.mkt-v2-foot-link.is-inactive {
    color: #8497B6;
    cursor: default;
}

/* ---- legal ---- */

.mkt-v2-foot-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    padding-top: 24px;
    font-size: 12px;
    color: #8FA3C4;
    flex-wrap: wrap;
}

.mkt-v2-foot-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mkt-v2-foot-legal-links .mkt-v2-foot-link {
    color: #8FA3C4;
}

.mkt-v2-foot-legal-links .mkt-v2-foot-link.is-inactive {
    color: #8497B6;
}


/* ---------------------------------------------------------------------------------------------
   25. Floating widgets + Ask Reliable assistant

   Both triggers share one set of offsets so they stack predictably and can never collide: the
   assistant pill sits on the baseline, the WhatsApp circle directly above it, and the panel above
   both. Change --mkt-widget-* and the whole stack moves together.
   --------------------------------------------------------------------------------------------- */

.mkt-v2 {
    --mkt-widget-inset: 24px;
    --mkt-widget-pill-h: 44px;
    --mkt-widget-gap: 12px;
}

/* ---- WhatsApp ---- */

.mkt-v2-wa {
    position: fixed;
    inset-inline-end: var(--mkt-widget-inset);
    bottom: calc(var(--mkt-widget-inset) + var(--mkt-widget-pill-h) + var(--mkt-widget-gap));
    z-index: 91;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #22A75D;
    box-shadow: 0 14px 34px -10px rgba(34, 167, 93, .6);
    transition: background-color .16s ease;
}

.mkt-v2-wa:hover {
    background: #1D9251;
}

/* ---- assistant trigger ---- */

.mkt-v2-bot-trigger {
    position: fixed;
    inset-inline-end: var(--mkt-widget-inset);
    bottom: var(--mkt-widget-inset);
    z-index: 91;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mkt-navy-900);
    color: #fff;
    border-radius: 100px;
    padding: 13px 20px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 14px 34px -10px rgba(15, 42, 80, .55);
    transition: background-color .16s ease;
}

.mkt-v2-bot-trigger:hover {
    background: var(--mkt-navy);
}

.mkt-v2-bot-trigger img {
    height: 18px;
    width: auto;
}

/* ---- panel ---- */

.mkt-v2-bot-panel {
    position: fixed;
    inset-inline-end: var(--mkt-widget-inset);
    bottom: calc(var(--mkt-widget-inset) + var(--mkt-widget-pill-h) + var(--mkt-widget-gap) + 52px + var(--mkt-widget-gap));
    z-index: 90;
    width: 360px;
    max-width: calc(100vw - (var(--mkt-widget-inset) * 2));
    max-height: min(540px, calc(100vh - 190px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 34px 80px -24px rgba(11, 31, 60, .55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mktV2FadeUp .3s ease both;
}

.mkt-v2-bot-panel[hidden] {
    display: none;
}

.mkt-v2-bot-head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mkt-navy-900);
    color: #fff;
    padding: 16px 20px;
}

.mkt-v2-bot-titles {
    flex: 1;
    min-width: 0;
}

.mkt-v2-bot-name {
    display: block;
    font-size: 14.5px;
    font-weight: 800;
}

.mkt-v2-bot-sub {
    display: block;
    font-size: 11px;
    color: #8FB4E8;
}

.mkt-v2-bot-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #8FB4E8;
    flex: 0 0 auto;
}

.mkt-v2-bot-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

.mkt-v2-bot-panel :where(.mkt-v2-bot-close, .mkt-v2-bot-restart):focus-visible {
    outline-color: var(--mkt-mint);
}

.mkt-v2-bot-head .mkt-v2-bot-close:focus-visible {
    outline-color: var(--mkt-mint);
}

/* ---- message log ---- */

.mkt-v2-bot-log {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #F5F7FA;
}

.mkt-v2-bot-msg {
    padding: 11px 15px;
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 85%;
    font-weight: 500;
}

.mkt-v2-bot-msg.is-bot {
    align-self: flex-start;
    background: #fff;
    color: var(--mkt-secondary);
    border-radius: 14px 14px 14px 4px;
}

.mkt-v2-bot-msg.is-me {
    align-self: flex-end;
    background: var(--mkt-navy);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
}

/* ---- option chips ---- */

.mkt-v2-bot-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--mkt-border);
    background: #fff;
}

.mkt-v2-bot-opts:empty,
.mkt-v2-bot-opts[hidden] {
    display: none;
}

.mkt-v2-bot-chip {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mkt-blue-deep);
    border: 1.5px solid #C9DAEE;
    border-radius: 100px;
    padding: 8px 15px;
    transition: background-color .16s ease;
}

.mkt-v2-bot-chip:hover {
    background: #EAF2FB;
}

/* ---- final actions ---- */

.mkt-v2-bot-actions {
    padding: 14px 18px;
    border-top: 1px solid var(--mkt-border);
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mkt-v2-bot-actions[hidden] {
    display: none;
}

.mkt-v2-bot-final {
    display: flex;
    gap: 8px;
}

.mkt-v2-bot-final-primary,
.mkt-v2-bot-final-secondary {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 9px;
    padding: 11px;
}

.mkt-v2-bot-final-primary {
    color: #fff;
    background: var(--mkt-navy);
}

.mkt-v2-bot-final-primary:hover {
    background: var(--mkt-navy-900);
    color: #fff;
}

.mkt-v2-bot-final-secondary {
    color: var(--mkt-navy);
    border: 1.5px solid #D4DEEA;
    background: #fff;
}

.mkt-v2-bot-final-secondary:hover {
    border-color: var(--mkt-navy);
}

.mkt-v2-bot-restart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    color: #667085;
    font-weight: 600;
}

.mkt-v2-bot-restart:hover {
    color: var(--mkt-navy);
}

/* Reserve the footer's trailing edge for the floating stack.
   Scrolled to the very bottom of the page the widgets sit directly over the footer, so the last row
   has to end above them. Derived from the same offsets the widgets use — WhatsApp circle is the
   tallest element in the stack — so moving the stack moves this clearance with it. */
.mkt-v2-foot-legal {
    padding-bottom: calc(
        var(--mkt-widget-inset) + var(--mkt-widget-pill-h) + var(--mkt-widget-gap) + 52px + 18px
    );
}


/* ---------------------------------------------------------------------------------------------
   25.1 Legal document (Privacy Policy)

   A reading surface rather than a marketing band: one measured column, generous leading and a
   deliberately narrow measure (~68 characters at desktop), because this page is read start to finish
   rather than scanned. It reuses the site's tokens and the `.mkt-v2-eyebrow` primitive, so it inherits
   the same type, colour and focus treatment as every other page and needs no new palette.

   Nothing here depends on JavaScript: the table of contents is fragment anchors, and the sticky-header
   offset comes from the existing `scroll-padding-top` on `html:has(.mkt-v2)`.
   --------------------------------------------------------------------------------------------- */

.mkt-v2-legal {
    padding: 64px var(--mkt-gutter) 96px;
    background: #fff;
}

.mkt-v2-legal-inner {
    max-width: 780px;
    margin-inline: auto;
}

/* ---- document header ---- */

.mkt-v2-legal-head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--mkt-border);
}

.mkt-v2-legal-title {
    font-size: clamp(30px, 5.4vw, 42px);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--mkt-navy-900);
    margin-bottom: 16px;
}

.mkt-v2-legal-lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--mkt-muted);
}

/* Effective / last-updated pair. A definition list, because that is what it is. */
.mkt-v2-legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 22px;
}

.mkt-v2-legal-meta div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.mkt-v2-legal-meta dt {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mkt-faint);
}

.mkt-v2-legal-meta dd {
    font-size: 14px;
    font-weight: 700;
    color: var(--mkt-navy);
}

/* ---- PDF download ---- */

.mkt-v2-legal-pdf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 24px;
}

.mkt-v2-legal-pdf-link {
    font-size: 13.5px;
    padding: 10px 16px;
}

.mkt-v2-legal-pdf-note {
    font-size: 13px;
    color: var(--mkt-faint);
}

/* ---- table of contents ---- */

.mkt-v2-legal-toc {
    margin: 34px 0 8px;
    padding: 24px 26px;
    border: 1px solid var(--mkt-border);
    border-radius: 12px;
    background: var(--mkt-border-soft);
}

.mkt-v2-legal-toc-head {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mkt-faint);
    margin-bottom: 14px;
}

/* Two columns at desktop so a sixteen-clause contents block stays one glance tall. `list-style: none`
   comes from the scoped reset, so the clause number is rendered as content instead. */
.mkt-v2-legal-toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 26px;
}

.mkt-v2-legal-toc-link {
    display: flex;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mkt-secondary);
    transition: color .16s ease;
}

.mkt-v2-legal-toc-link:hover {
    color: var(--mkt-blue-deep);
}

.mkt-v2-legal-toc-num {
    flex: 0 0 auto;
    min-width: 18px;
    font-weight: 800;
    color: var(--mkt-faint);
    font-variant-numeric: tabular-nums;
}

/* ---- clauses ---- */

.mkt-v2-legal-section {
    margin-top: 44px;
}

.mkt-v2-legal-h2 {
    display: flex;
    gap: 10px;
    font-size: clamp(19px, 2.6vw, 22px);
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.3;
    color: var(--mkt-navy-900);
    margin-bottom: 14px;
}

.mkt-v2-legal-h2-num {
    flex: 0 0 auto;
    color: var(--mkt-blue);
    font-variant-numeric: tabular-nums;
}

.mkt-v2-legal-h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--mkt-navy);
    margin: 24px 0 10px;
}

.mkt-v2-legal-p {
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--mkt-text);
}

.mkt-v2-legal-p + .mkt-v2-legal-p {
    margin-top: 14px;
}

/* Markers are drawn rather than inherited: the scoped reset clears list-style for the whole page. */
.mkt-v2-legal-list {
    margin-top: 12px;
    display: grid;
    gap: 10px;
}

.mkt-v2-legal-list li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--mkt-text);
}

.mkt-v2-legal-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 4px;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mkt-blue);
}

.mkt-v2-legal-list + .mkt-v2-legal-p,
.mkt-v2-legal-list + .mkt-v2-legal-h3 {
    margin-top: 18px;
}

/* ---- contact block ---- */

.mkt-v2-legal-address {
    margin: 16px 0 18px;
    padding: 18px 20px;
    border: 1px solid var(--mkt-border);
    border-radius: 12px;
    background: var(--mkt-border-soft);
    font-style: normal;
    font-size: 15px;
    line-height: 1.8;
    color: var(--mkt-text);
}

/* Links inside running legal text must be visibly links — colour alone is not enough at this size. */
.mkt-v2-legal-link {
    color: var(--mkt-blue-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mkt-v2-legal-link:hover {
    color: var(--mkt-navy-900);
}


/* ---------------------------------------------------------------------------------------------
   26. Responsive

   Single primary breakpoint at 1040px: below it the nav would start to crowd, so it is replaced by
   the drawer and the hero stacks. Everything above stays a balanced two-column composition, sized
   with clamp() so 1280 / 1366 / 1440 / 1920 all read as deliberate rather than stretched.
   --------------------------------------------------------------------------------------------- */

/* --- large desktop: let the composition breathe rather than stretching the hero copy --- */
@media (min-width: 1600px) {
    .mkt-v2 {
        --mkt-shell: 1360px;
    }

    .mkt-v2-hero-copy {
        padding: 60px 12px 60px 60px;
    }

    .mkt-v2-hero-lead {
        max-width: 500px;
    }

    .mkt-v2-visual {
        padding: 48px 48px 48px 8px;
    }
}

/* --- 1280–1366 laptops: trim the interior padding so the hero keeps a compact first viewport --- */
@media (max-width: 1400px) {
    .mkt-v2-hero-copy {
        padding: 44px 8px 44px 44px;
    }

    .mkt-v2-visual {
        padding: 34px 34px 34px 6px;
    }

    .mkt-v2-hero-lead {
        margin-bottom: 24px;
    }

    .mkt-v2-hero-cta {
        margin-bottom: 22px;
    }
}

/* --- below the nav breakpoint: drawer + single-column hero --- */
@media (max-width: 1039.98px) {
    .mkt-v2-nav,
    .mkt-v2-header-actions {
        display: none;
    }

    .mkt-v2-menu-btn {
        display: inline-flex;
    }

    .mkt-v2-header-inner {
        justify-content: space-between;
    }

    .mkt-v2-hero-frame {
        padding: 22px 22px 0;
    }

    .mkt-v2-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .mkt-v2-hero-copy {
        padding: 44px 32px 8px;
    }

    .mkt-v2-hero-title {
        font-size: clamp(30px, 4.6vw, 40px);
    }

    .mkt-v2-hero-lead {
        max-width: 620px;
    }

    .mkt-v2-visual {
        padding: 26px 32px 40px;
    }

    /* Keep the mockup legible instead of letting it fill an over-wide column. */
    .mkt-v2-mockup {
        max-width: 620px;
        margin-inline: auto;
    }

    .mkt-v2-float-alert {
        inset-inline-end: max(32px, calc(50% - 310px + 14px));
        top: 8px;
    }

    .mkt-v2-strip-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .mkt-v2-strip-list {
        justify-content: flex-start;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mkt-v2-chip {
        justify-content: flex-start;
    }

    /* Problem rail stacks above the cards; sticky is released so it cannot pin over the content. */
    .mkt-v2-problems-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-problems-rail {
        position: static;
        top: auto;
    }

    /* Ten across would squeeze each label into an unreadable column — go 5 × 2 and drop the connector
       at the end of each row. */
    .mkt-v2-flow-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        row-gap: 34px;
    }

    .mkt-v2-flow-step:nth-child(5n)::after {
        content: none;
    }

    /* Split band headers stack — a right-aligned aside beside a heading reads as a stray column once
       the row narrows. */
    .mkt-v2-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 30px;
    }

    .mkt-v2-section-aside {
        text-align: start;
        max-width: 640px;
    }

    .mkt-v2-industries .mkt-v2-section-aside {
        max-width: 640px;
    }

    .mkt-v2-modules {
        padding-block: var(--mkt-band-pad);
    }

    /* A 300px rail beside a squeezed panel wastes both — put the selector above as a two-column grid
       and give the panel the full width. */
    .mkt-v2-mod-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .mkt-v2-mod-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mkt-v2-mod-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        padding: 28px;
    }

    .mkt-v2-mod-preview {
        align-self: stretch;
    }

    .mkt-v2-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Cloud above On-Premise — DOM order already puts them that way, so stacking needs no reordering. */
    .mkt-v2-deploy-grid,
    .mkt-v2-bi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-deploy {
        padding-block: var(--mkt-band-pad);
    }

    .mkt-v2-bi-band {
        padding-block: var(--mkt-band-pad);
    }

    .mkt-v2-bi-intro {
        margin-bottom: 34px;
    }

    /* Badge drops below the heading rather than being squeezed against it. */
    .mkt-v2-cs-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mkt-v2-cs-badge {
        white-space: normal;
    }

    .mkt-v2-cs {
        padding-top: var(--mkt-band-pad);
    }

    .mkt-v2-testi {
        padding-bottom: var(--mkt-band-pad);
    }

    /* Copy above the fact cards; the third card still spans the pair. */
    .mkt-v2-about-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .mkt-v2-pricing {
        padding-block: var(--mkt-band-pad);
    }

    .mkt-v2-cta {
        padding-block: var(--mkt-band-pad);
    }

    /* Brand block spans the row; the three link columns share the one below. */
    .mkt-v2-foot-top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 34px;
    }

    .mkt-v2-foot-brand {
        grid-column: 1 / -1;
    }

    .mkt-v2-foot-desc {
        max-width: 560px;
    }
}

/* --- three plan cards need roughly 300px each to stay readable; below that they stack rather than
       crowd, and stacking keeps them peers instead of implying a ranking --- */
@media (max-width: 820px) {
    .mkt-v2-plan-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- tablets --- */
@media (max-width: 820px) {
    .mkt-v2-announce-inner {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .mkt-v2-announce-lead {
        flex: 1 1 100%;
        gap: 10px;
    }

    .mkt-v2-announce-meta {
        flex: 1 1 100%;
        justify-content: flex-start;
        gap: 18px;
    }

    .mkt-v2-strip-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 2 + 1: three across leaves each pillar too narrow for its body copy at this width. */
    .mkt-v2-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- phones --- */
@media (max-width: 640px) {
    .mkt-v2 {
        --mkt-gutter: 18px;
    }

    .mkt-v2-announce {
        font-size: 11.5px;
    }

    /* Once the sentence wraps, a right-floating "Compare options" reads as unrelated to it — stack the
       link under its own text instead. */
    .mkt-v2-announce-lead {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .mkt-v2-announce-text {
        white-space: normal;
    }

    .mkt-v2-hero-frame {
        padding: 14px 14px 0;
    }

    .mkt-v2-hero {
        border-radius: 18px;
    }

    .mkt-v2-hero-copy {
        padding: 34px 22px 6px;
    }

    .mkt-v2-hero-title {
        font-size: clamp(26px, 7.4vw, 34px);
    }

    .mkt-v2-hero-lead {
        font-size: 15px;
        margin-bottom: 22px;
    }

    .mkt-v2-hero-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mkt-v2-hero-cta .mkt-v2-btn {
        width: 100%;
        padding-block: 13px;
    }

    .mkt-v2-hero-points {
        flex-direction: column;
        gap: 8px;
    }

    .mkt-v2-visual {
        padding: 24px 14px 28px;
    }

    /* Two-up KPI grid keeps the values readable instead of shrinking four across. */
    .mkt-v2-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mkt-v2-charts {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-mockup-head {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .mkt-v2-intel-row {
        align-items: flex-start;
    }

    .mkt-v2-float-alert {
        inset-inline-end: 10px;
        top: 4px;
        padding: 8px 11px;
    }

    .mkt-v2-strip {
        padding-top: 26px;
    }

    .mkt-v2-strip-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2 {
        --mkt-band-pad: 56px;
    }

    .mkt-v2-overview {
        padding-top: 64px;
    }

    .mkt-v2-overview-lead {
        margin-bottom: 34px;
    }

    .mkt-v2-pillars {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-pillar {
        padding: 24px;
    }

    .mkt-v2-problem-card {
        padding: 22px;
    }

    .mkt-v2-flow-head {
        margin-bottom: 38px;
    }

    /* Vertical connected timeline: circle on the lead edge, label beside it, connector running down
       through the row gap. Reading order stays 01 → 10. */
    .mkt-v2-flow-steps {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 26px;
    }

    .mkt-v2-flow-step {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        text-align: start;
    }

    .mkt-v2-flow-step::after {
        top: 54px;
        inset-inline-start: 26px;
        width: 2px;
        height: 26px;
        background: repeating-linear-gradient(180deg, #9DBFAE 0 8px, transparent 8px 16px);
        animation-name: mktV2FlowDashVertical;
    }

    /* Restore the connectors the 5-column rule removed — the vertical chain is unbroken... */
    .mkt-v2-flow-step:nth-child(5n)::after {
        content: '';
    }

    /* ...except after the final stage. */
    .mkt-v2-flow-step:last-child::after {
        content: none;
    }

    .mkt-v2-flow-name {
        font-size: 14px;
    }

    .mkt-v2-flow-points {
        margin-top: 32px;
        justify-content: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    /* Two-up selector buttons would wrap "Reliable Intelligence · AI" over three lines here. */
    .mkt-v2-mod-nav {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .mkt-v2-mod-btn {
        padding: 11px 14px;
    }

    .mkt-v2-mod-panel {
        padding: 22px;
        border-radius: 16px;
    }

    .mkt-v2-mod-preview {
        padding: 14px;
    }

    /* Column widths that read fine at 400px start truncating below it; let the first column take the
       room it needs and the table scroll inside its own card rather than the page. */
    .mkt-v2-mod-preview {
        overflow-x: auto;
    }

    .mkt-v2-mod-table {
        min-width: 290px;
    }

    /* Every card back to one column — a 2-span here would be the full row anyway. */
    .mkt-v2-industry-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-industry-cell {
        grid-column: span 1;
    }

    .mkt-v2-deploy-card {
        padding: 26px 22px;
    }

    .mkt-v2-deploy-head {
        gap: 11px;
    }

    .mkt-v2-deploy-title {
        font-size: 17.5px;
    }

    .mkt-v2-bi-card {
        padding: 24px 22px;
    }

    .mkt-v2-bi-watermark {
        width: 220px;
        height: 220px;
        inset-inline-end: -70px;
    }

    .mkt-v2-cs-card {
        padding: 22px;
    }

    /* Before / modules stack, and the metric labels get their full width back. */
    .mkt-v2-cs-split,
    .mkt-v2-cs-metrics,
    .mkt-v2-testi-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-cs-lead {
        margin-bottom: 28px;
    }

    .mkt-v2-about-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-about-fact {
        grid-column: span 1;   /* the spanning card has nothing left to span */
        padding: 22px;
    }

    .mkt-v2-plan {
        padding: 26px 22px;
    }

    .mkt-v2-faq-trigger {
        padding: 16px 18px;
    }

    .mkt-v2-faq-panel {
        padding: 0 18px 18px;
    }

    /* Full-width CTAs read better than three wrapped pills on a phone. */
    .mkt-v2-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mkt-v2-cta-actions .mkt-v2-btn-lg {
        width: 100%;
        padding-inline: 18px;
    }

    .mkt-v2-foot-top {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
        padding-bottom: 32px;
    }

    .mkt-v2-foot-legal {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Tighter inset so the stack does not crowd the screen edge on a phone. */
    .mkt-v2 {
        --mkt-widget-inset: 14px;
    }

    .mkt-v2-bot-trigger {
        padding: 11px 16px;
        font-size: 12.5px;
    }

    .mkt-v2-wa {
        width: 48px;
        height: 48px;
    }

    .mkt-v2-bot-panel {
        width: calc(100vw - 24px);
        inset-inline-end: 12px;
        max-height: min(540px, calc(100vh - 170px));
    }

    /* Legal document: the two-column contents block cannot hold a clause title at phone width. */
    .mkt-v2-legal {
        padding-top: 44px;
        padding-bottom: 68px;
    }

    .mkt-v2-legal-toc {
        padding: 20px;
    }

    .mkt-v2-legal-toc-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .mkt-v2-legal-section {
        margin-top: 36px;
    }
}

/* --- very narrow: let the mockup's fixed-width labels wrap rather than overflow --- */
@media (max-width: 400px) {
    .mkt-v2-float-title,
    .mkt-v2-float-body {
        white-space: normal;
    }

    .mkt-v2-mockup-scope {
        max-width: 100%;
    }
}


/* ---------------------------------------------------------------------------------------------
   16. Motion preferences
   --------------------------------------------------------------------------------------------- */

@keyframes mktV2FadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Exactly one track width — see the note on .mkt-v2-marquee-track. */
@keyframes mktV2Marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* One dash period (8px dash + 8px gap) so the crawl repeats without a step. */
@keyframes mktV2FlowDash {
    to {
        background-position: 16px 0;
    }
}

@keyframes mktV2FlowDashVertical {
    to {
        background-position: 0 16px;
    }
}

/* FAQ panels appear rather than expand — `hidden` cannot be transitioned, and keeping the attribute
   is what keeps a collapsed answer out of the accessibility tree. */
@keyframes mktV2FaqReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* The wildcard covers the hero fade-up, the logo marquee and the flow dash crawl alike — every
   animation and transition on the page stops, and the marquee simply rests on its first frame. */
@media (prefers-reduced-motion: reduce) {
    html:has(.mkt-v2) {
        scroll-behavior: auto;
    }

    .mkt-v2 *,
    .mkt-v2 *::before,
    .mkt-v2 *::after,
    .mkt-v2-drawer,
    .mkt-v2-drawer-backdrop {
        animation: none !important;
        transition: none !important;
    }
}