/* ==========================================================================
   mailkoo - Public marketing site
   Shared shell + section primitives for every page under the marketing
   layout (resources/views/refactor/layouts/marketing.blade.php).

   Loads after variables.css only. This sheet MUST NOT pull in
   components.css (700 KB) — that is the in-app component library and it
   assumes the app shell, Bootstrap resets and a dense-UI type scale.
   Everything a marketing page needs is built here as a self-contained
   primitive referencing variables.css tokens only.

   Conventions
   -----------
   .mcl-block / .mcl-block-element / .is-state   class naming
   --mcl-*                                       marketing-local tokens
   body.mc-marketing                             shared base scope
   body.mc-page-<slug>                           per-page overrides

   No hex literals below: every colour comes from a token so
   [data-theme="dark"] and the 7 [data-color-scheme] palettes retint the
   whole site for free. The two documented exceptions are the .mcl-oncontrast
   inverted-surface scope and the --mcl-gradient-cta contrast fix, both
   explained where they appear.
   ========================================================================== */

/* ---------- Base ---------- */

/* `.mc-landing-page` is retained alongside `.mc-marketing` as a superset
   selector for the duration of the landing-page migration. It is a strict
   superset, so nothing that renders today can change. Drop it once every
   marketing page is on the shared layout. */

.mc-marketing,
.mc-landing-page {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-page-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Shell geometry. marketing-core.js corrects --mcl-nav-h from the real
       measured nav on load and resize; the announcement partial sets
       --mcl-announce-h to its own height when it renders. Everything sticky
       (matrix header, TOC, anchor scroll offset) reads --mcl-sticky-top, so
       toggling the announcement bar cannot desync them. */
    --mcl-nav-h: 68px;
    --mcl-announce-h: 0px;
    --mcl-sticky-top: calc(var(--mcl-nav-h) + var(--mcl-announce-h));

    /* WCAG fix, marketing-scoped. --gradient-primary starts at #9874FF and
       .mcl-btn-primary puts #FFFFFF on it at --text-base (14px) — that is
       ~3.4:1, below the 4.5:1 AA floor, with no large-text exemption. This
       ramp starts at --primary-500 (#7C53F4) instead: ~5.3:1.
       variables.css is deliberately NOT touched — it is shared with 315
       in-app views and ~6,500 --color-teal usages. */
    --mcl-gradient-cta: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
    --mcl-gradient-cta-hover: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-800) 100%);
}

.mc-marketing *,
.mc-marketing *::before,
.mc-marketing *::after,
.mc-landing-page *,
.mc-landing-page *::before,
.mc-landing-page *::after { box-sizing: border-box; }

.mc-marketing h1,
.mc-marketing h2,
.mc-marketing h3,
.mc-marketing h4,
.mc-marketing p,
.mc-landing-page h1,
.mc-landing-page h2,
.mc-landing-page h3,
.mc-landing-page p { margin: 0; }

/* `color: inherit` must skip .mcl-btn anchors — the bare `a` selector outranks
   the single-class button rules, so it was overriding .mcl-btn-primary's white
   text with the inherited page color. .mcl-link is excluded for the same
   reason: it is a real link primitive that owns its own colour. */
.mc-marketing a,
.mc-landing-page a { text-decoration: none; }
.mc-marketing a:not(.mcl-btn):not(.mcl-link),
.mc-landing-page a:not(.mcl-btn):not(.mcl-link) { color: inherit; }

.mc-marketing .material-symbols-rounded,
.mc-landing-page .material-symbols-rounded {
    font-variation-settings: 'opsz' 24, 'wght' 500, 'FILL' 0, 'GRAD' 0;
    font-size: 20px;
    line-height: 1;
}

/* Was an unscoped `html { scroll-behavior: smooth }`, which leaked smooth
   scrolling into every page of the app and ignored reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
    html:has(body.mc-marketing),
    html:has(body.mc-landing-page) { scroll-behavior: smooth; }
}

/* Hides the inline gradient-defs SVG. Lifted from icon-gradients.css so
   marketing pages can drop that 9 KB sheet entirely — it exists to repaint
   sidebar nav icons, and no marketing page renders a gradient icon. Without
   this one rule the defs SVG adds a stray line-box above the nav. */
.mc-marketing .mc-icon-gradient-defs,
.mc-landing-page .mc-icon-gradient-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.mcl-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.mcl-container-narrow { max-width: 760px; }
.mcl-container-wide   { max-width: 1280px; }

.mcl-gradient-text {
    background: linear-gradient(100deg, var(--icon-gradient-from), var(--icon-gradient-via) 55%, var(--icon-gradient-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- Buttons ---------- */

.mcl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), box-shadow var(--transition-fast);
}
.mcl-btn:active { transform: translateY(1px); }
.mcl-btn .material-symbols-rounded { font-size: 18px; }

/* --mcl-gradient-cta, not --gradient-primary: see the contrast note in the
   base block. White on this ramp is ~5.3:1 instead of ~3.4:1. */
.mcl-btn-primary {
    background: var(--mcl-gradient-cta);
    color: #FFFFFF;
    box-shadow: var(--shadow-xs);
}
.mcl-btn-primary:hover { background: var(--mcl-gradient-cta-hover); color: #FFFFFF; }

.mcl-btn-secondary {
    background: var(--color-card-bg);
    border-color: var(--color-border-strong);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}
.mcl-btn-secondary:hover { background: var(--gray-50); border-color: var(--gray-400); }

.mcl-btn-ghost { background: transparent; color: var(--color-text-secondary); }
.mcl-btn-ghost:hover { background: var(--color-teal-light); color: var(--color-teal); }

.mcl-btn-lg { padding: 13px 24px; font-size: var(--text-md); border-radius: var(--radius-md); }
.mcl-btn-block { width: 100%; }

/* ---------- Nav ---------- */

.mcl-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--color-card-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.mcl-nav.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: var(--shadow-xs);
}

.mcl-nav-inner {
    /* Positioning context for the mega panels and the burger sheet, both of
       which are pinned to the container edges rather than to their trigger. */
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-8);
    /* Equal breathing room above and below the menu row */
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    min-height: 64px;
}

.mcl-nav-logo { display: inline-flex; align-items: center; }
/* No `display` here — variables.css owns the .mc-logo-light/.mc-logo-dark theme swap. */
.mcl-nav-logo img { height: 28px; width: auto; }

.mcl-nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-right: auto;
}
.mcl-nav-links a {
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.mcl-nav-links a:hover { color: var(--color-teal); }

.mcl-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
}

.mcl-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.mcl-theme-toggle:hover { color: var(--color-teal); border-color: var(--color-border-strong); }
.mcl-theme-icon-dark { display: none; }
[data-theme="dark"] .mcl-theme-icon-light { display: none; }
[data-theme="dark"] .mcl-theme-icon-dark { display: inline; }

.mcl-nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
}

/* ---------- Hero ---------- */

.mcl-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-20) 0 var(--space-16);
}

.mcl-hero-glow {
    position: absolute;
    inset: -40% -20% auto;
    height: 130%;
    background:
        radial-gradient(600px 380px at 22% 30%, color-mix(in srgb, var(--icon-gradient-from) 14%, transparent), transparent 70%),
        radial-gradient(640px 420px at 78% 24%, color-mix(in srgb, var(--icon-gradient-to) 10%, transparent), transparent 70%);
    pointer-events: none;
}

.mcl-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-12);
    align-items: center;
}

.mcl-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: 1px solid var(--color-teal-ring);
    border-radius: var(--radius-full);
    background: var(--color-teal-light);
    color: var(--color-teal);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-5);
}
.mcl-badge .material-symbols-rounded { font-size: 16px; }

.mcl-hero-copy h1 {
    font-size: clamp(2.25rem, 4.6vw, var(--text-5xl));
    font-weight: var(--weight-black);
    line-height: var(--leading-display);
    letter-spacing: -0.02em;
}

.mcl-hero-subtitle {
    margin-top: var(--space-5);
    max-width: 34rem;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

.mcl-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

/* --- Hero product mock --- */

/* Only the positioning context is shared. The grey skeleton card that used to
   live here went with the home hero rebuild: the home page now renders the
   token-built .mcl-dash frame (marketing-home.css) and the lifetime page its
   screenshot in .mcl-mockup (marketing-lifetime.css). Nothing else used it. */
.mcl-hero-visual { position: relative; }

/* ---------- Trust band ---------- */

.mcl-band {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-card-bg);
}
.mcl-band-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-4) var(--space-8);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
}
.mcl-band-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
}
.mcl-band-item .material-symbols-rounded { color: var(--color-teal); font-size: 18px; }

/* ---------- Sections ---------- */

.mcl-section { padding: var(--space-20) 0; }
.mcl-section-alt {
    background: var(--color-card-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
[data-theme="dark"] .mcl-section-alt { background: color-mix(in srgb, var(--color-card-bg) 55%, var(--color-page-bg)); }

.mcl-section-head {
    max-width: 40rem;
    margin: 0 auto var(--space-12);
    text-align: center;
}
.mcl-section-head h2 {
    font-size: clamp(1.75rem, 3vw, var(--text-3xl));
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    line-height: var(--leading-snug);
}
.mcl-section-head p {
    margin-top: var(--space-3);
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* ---------- Features ---------- */

.mcl-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mcl-feature-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.mcl-feature-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--color-border-strong);
}

.mcl-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-card);
    margin-bottom: var(--space-4);
}
.mcl-feature-icon svg { display: block; }
.mcl-feature-icon.is-teal   { background: var(--chart-1-bg); color: var(--chart-1); }
.mcl-feature-icon.is-purple { background: var(--chart-6-bg); color: var(--chart-6); }
.mcl-feature-icon.is-blue   { background: var(--chart-3-bg); color: var(--chart-3); }
.mcl-feature-icon.is-green  { background: var(--chart-2-bg); color: var(--chart-2); }
.mcl-feature-icon.is-orange { background: var(--chart-4-bg); color: var(--chart-4); }
.mcl-feature-icon.is-rose   { background: var(--chart-5-bg); color: var(--chart-5); }

.mcl-feature-card h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
}
.mcl-feature-card p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* Two more accents, so ten feature pages do not have to share six colours.
   chart-7/8 are defined in both themes in variables.css. */
.mcl-feature-icon.is-cyan   { background: var(--chart-7-bg); color: var(--chart-7); }
.mcl-feature-icon.is-lime   { background: var(--chart-8-bg); color: var(--chart-8); }

/* A section head that introduces a block rather than a whole page: left-aligned
   and tighter, so the /features group headings do not each read as a new page. */
.mcl-section-head.is-left {
    max-width: 46rem;
    margin-inline: 0;
    margin-bottom: var(--space-8);
    text-align: start;
}

/* The tagline sits between the name and the description, so it needs to be
   distinguishable from both without being a third type size. */
.mcl-feature-card-tagline {
    color: var(--color-text-secondary) !important;
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-2);
}

.mcl-cta-band-inner p {
    margin-top: calc(var(--space-6) * -1 + var(--space-2));
    max-width: 44rem;
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

/* ---------- Pricing ----------
   The .mcl-price* plan card lived here for the home page grid. That grid is
   gone and /pricing has always drawn its own cards from marketing-pricing.css,
   so the whole block went with it — nothing rendered these any more. */

/* ---------- FAQ ---------- */

.mcl-faq-container { max-width: 760px; }

.mcl-faq-item {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.mcl-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
}
.mcl-faq-item summary::-webkit-details-marker { display: none; }
.mcl-faq-item summary .material-symbols-rounded {
    color: var(--color-text-muted);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
}
.mcl-faq-item[open] summary .material-symbols-rounded { transform: rotate(180deg); }
.mcl-faq-item p {
    padding: 0 var(--space-5) var(--space-5);
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* ---------- Bottom CTA ---------- */

.mcl-cta-band {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    background:
        radial-gradient(520px 300px at 30% 0%, color-mix(in srgb, var(--icon-gradient-from) 10%, transparent), transparent 70%),
        radial-gradient(520px 300px at 75% 100%, color-mix(in srgb, var(--icon-gradient-to) 8%, transparent), transparent 70%),
        var(--color-card-bg);
}
[data-theme="dark"] .mcl-cta-band { background-color: var(--color-page-bg); }

.mcl-cta-band-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    text-align: center;
}
.mcl-cta-band h2 {
    font-size: clamp(1.75rem, 3.4vw, var(--text-3xl));
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    max-width: 36rem;
}

/* ---------- Footer ---------- */

.mcl-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-card-bg);
}
[data-theme="dark"] .mcl-footer { background: var(--color-page-bg); }

.mcl-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    padding-top: var(--space-10);
    padding-bottom: var(--space-8);
}
.mcl-footer-brand img { height: 26px; width: auto; }
.mcl-footer-brand p {
    margin-top: var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-muted);
}
.mcl-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.mcl-footer-links a {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}
.mcl-footer-links a:hover { color: var(--color-teal); }

.mcl-footer-bottom {
    padding-top: var(--space-4);
    padding-bottom: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---------- How it works ---------- */

.mcl-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}

.mcl-step {
    position: relative;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-xs);
}

.mcl-step-num {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    font-size: var(--text-2xl);
    font-weight: var(--weight-black);
    color: var(--color-border);
    line-height: 1;
}

.mcl-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-card);
    background: var(--color-teal-light);
    color: var(--color-teal);
    margin-bottom: var(--space-4);
}

.mcl-step h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
}
.mcl-step p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* ---------- Showcase rows ---------- */

.mcl-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-12);
    align-items: center;
}
.mcl-showcase.is-reversed .mcl-showcase-copy { order: 2; }
.mcl-showcase.is-reversed .mcl-showcase-visual { order: 1; }

.mcl-showcase-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
}
.mcl-showcase-tag.is-purple { background: var(--chart-6-bg); color: var(--chart-6); }
.mcl-showcase-tag.is-green  { background: var(--chart-2-bg); color: var(--chart-2); }

.mcl-showcase-copy h2 {
    font-size: clamp(1.5rem, 2.6vw, var(--text-2xl));
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
    line-height: var(--leading-snug);
}
.mcl-showcase-copy > p {
    margin-top: var(--space-4);
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.mcl-showcase-list {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.mcl-showcase-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}
.mcl-showcase-list .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-success);
}

/* Automation flow mock */

.mcl-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8) var(--space-6);
}

.mcl-flow-node {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 240px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
}
.mcl-flow-node .material-symbols-rounded {
    font-size: 18px;
    color: var(--color-teal);
    flex-shrink: 0;
}
.mcl-flow-node.is-trigger { border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--color-teal-ring); }
.mcl-flow-node.is-trigger .material-symbols-rounded { color: var(--chart-4); }
.mcl-flow-node.is-wait .material-symbols-rounded { color: var(--color-text-muted); }
.mcl-flow-node.is-small { width: 112px; justify-content: center; }

.mcl-flow-line {
    height: 7px;
    border-radius: 4px;
    background: var(--color-border);
}

.mcl-flow-connector {
    width: 2px;
    height: 22px;
    background: var(--color-border-strong);
}
.mcl-flow-connector.is-branch {
    position: relative;
    height: 26px;
}
.mcl-flow-connector.is-branch::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 128px;
    height: 2px;
    background: var(--color-border-strong);
}

.mcl-flow-row {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
}

/* Analytics report mock */

.mcl-report {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mcl-report-head {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.mcl-report-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-3);
}
.mcl-report-stat strong {
    font-size: var(--text-lg);
    font-weight: var(--weight-black);
    letter-spacing: -0.02em;
}
.mcl-report-stat em {
    display: block;
    width: 60%;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
}

.mcl-report-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    height: 120px;
    padding: 0 var(--space-2);
}
.mcl-report-bars i {
    flex: 1;
    border-radius: 4px 4px 0 0;
    background: var(--color-border);
}
.mcl-report-bars i.is-accent { background: var(--color-teal); }

.mcl-report-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mcl-report-row {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--color-page-bg);
    overflow: hidden;
}
.mcl-report-row i {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--color-teal-light);
    border-right: 3px solid var(--color-teal);
}

/* ---------- Integrations ---------- */

.mcl-integrations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    max-width: 760px;
    margin: 0 auto;
}

.mcl-integration-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
    box-shadow: var(--shadow-xs);
}
.mcl-integration-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--icon-gradient-from), var(--icon-gradient-to));
}

/* ---------- Why ---------- */

.mcl-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 920px;
    margin: 0 auto;
}

.mcl-why-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.mcl-why-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-card);
    background: var(--color-teal-light);
    color: var(--color-teal);
}
.mcl-why-item h3 {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-1);
}
.mcl-why-item p {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

/* ---------- Responsive ---------- */

@media (max-width: 991px) {
    .mcl-hero-inner { grid-template-columns: 1fr; gap: var(--space-10); }
    .mcl-hero { padding-top: var(--space-12); }
    .mcl-hero-visual { max-width: 560px; }
    .mcl-features-grid { grid-template-columns: repeat(2, 1fr); }
    .mcl-steps { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
    .mcl-showcase { grid-template-columns: 1fr; gap: var(--space-8); }
    .mcl-showcase.is-reversed .mcl-showcase-copy { order: 1; }
    .mcl-showcase.is-reversed .mcl-showcase-visual { order: 2; }
    .mcl-showcase-visual { max-width: 520px; }
    .mcl-why-grid { grid-template-columns: 1fr; max-width: 560px; }
}

@media (max-width: 767px) {
    /* Nav rules for this width live in the MULTIPAGE NAV section, with the
       rest of the burger sheet. */

    /* Keep the nav row inside a narrow viewport */
    .mc-marketing,
    .mc-landing-page { overflow-x: hidden; }
    .mcl-container { padding-left: var(--space-4); padding-right: var(--space-4); }

    .mcl-section { padding: var(--space-16) 0; }
    .mcl-features-grid { grid-template-columns: 1fr; }
    .mcl-band-inner { justify-content: center; }
    .mcl-footer-inner { flex-direction: column; }
}

/* ==========================================================================
   SHARED CONTENT PRIMITIVES

   Used by more than one page, so they live here rather than in a page sheet.
   These originally sat in marketing-home.css; when the lifetime page began
   reusing the same markup they rendered completely unstyled there — the
   trust-strip logos came out at their natural size and broke the marquee —
   because that sheet only loads on the home page.
   ========================================================================== */

/* ---------- Avatars ---------- */

.mcl-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-card-bg);
    background: var(--mcl-gradient-cta);
    color: #FFFFFF;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}
.mcl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mcl-avatar-lg { width: 56px; height: 56px; font-size: var(--text-md); }

.mcl-avatar-stack { display: inline-flex; }
.mcl-avatar-stack .mcl-avatar { margin-inline-start: -8px; }
.mcl-avatar-stack .mcl-avatar:first-child { margin-inline-start: 0; }

/* ---------- Proof strip / marquee ---------- */

.mcl-proof { padding: var(--space-10) 0; border-block: 1px solid var(--color-border); }

.mcl-proof-label {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.mcl-marquee {
    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);
}

.mcl-marquee-track {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: max-content;
    animation: mcl-marquee 46s linear infinite;
}
.mcl-marquee:hover .mcl-marquee-track { animation-play-state: paused; }

@keyframes mcl-marquee {
    /* The track holds the item list twice; -50% lands exactly on the seam. */
    to { transform: translateX(-50%); }
}

.mcl-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-card-bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* Constrains third-party logo SVGs, which carry no intrinsic size cap. */
.mcl-chip img { height: 18px; width: auto; opacity: .85; }

/* ---------- Stats ---------- */

.mcl-stat-value {
    font-size: clamp(1.5rem, 3vw, var(--text-3xl));
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.mcl-stat-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* ---------- Testimonials ---------- */

.mcl-quote {
    position: relative;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-xs);
    break-inside: avoid;
    margin-bottom: var(--space-5);
}

/* Oversized opening quote, clipped by the card. Cheap and unmistakably
   editorial — it is what stops the section reading as a generic card grid. */
.mcl-quote::before {
    content: '\201C';
    position: absolute;
    top: -6px;
    inset-inline-start: var(--space-4);
    font-size: 72px;
    line-height: 1;
    color: var(--color-teal);
    opacity: .14;
    pointer-events: none;
}

.mcl-quote-text { position: relative; color: var(--color-text-secondary); }
.mcl-quote-foot { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.mcl-quote-name { font-weight: var(--weight-semibold); font-size: var(--text-base); }
.mcl-quote-role { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-quote-stars { display: inline-flex; gap: 1px; color: var(--color-warning); margin-bottom: var(--space-3); }

/* Lead card — 1px gradient border via a padded wrapper, because
   border-image cannot follow a border-radius. */
.mcl-quote-lead-wrap {
    padding: 1px;
    background: var(--mcl-gradient-cta);
    border-radius: calc(var(--radius-xl) + 1px);
    margin-bottom: var(--space-6);
}
.mcl-quote-lead {
    margin: 0;
    border: 0;
    border-radius: var(--radius-xl);
    padding: var(--space-8);
}
.mcl-quote-lead .mcl-quote-text { font-size: var(--text-xl); line-height: 1.5; color: var(--color-text); }

/* Masonry with zero JS. */
.mcl-quote-columns { columns: 3; column-gap: var(--space-5); }

/* ---------- Use case cards ---------- */

.mcl-usecase h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.mcl-usecase p { color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.mcl-usecase-links { display: flex; flex-direction: column; gap: var(--space-2); }

@media (max-width: 991px) {
    .mcl-quote-columns { columns: 2; }
}

@media (max-width: 767px) {
    /* Columns cannot scroll-snap, so swap masonry for a swipeable rail. */
    .mcl-quote-columns {
        columns: auto;
        display: flex;
        gap: var(--space-4);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--space-4);
        padding-bottom: var(--space-3);
    }
    .mcl-quote-columns .mcl-quote {
        flex: 0 0 82%;
        scroll-snap-align: start;
        margin-bottom: 0;
    }
    .mcl-quote-lead .mcl-quote-text { font-size: var(--text-lg); }
}

/* ==========================================================================
   MULTIPAGE NAV

   Breakpoint contract for this section:
     >= 1024px   horizontal bar + container-width mega menus
     <= 1023px   burger sheet; the same panels flatten into accordions

   1024 rather than 768 because between those widths the bar has to hold a
   logo, two dropdown triggers, two flat links, a theme toggle and two buttons.
   It technically fitted, at the price of every tap target touching its
   neighbour — a tablet is a touch device and gets the touch layout.
   ========================================================================== */

/* Deliberately NOT position: relative — that would make it the panel's
   containing block and shrink the mega menu to the width of its trigger. */
.mcl-nav-item { display: inline-flex; }

.mcl-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
}
.mcl-nav-trigger:hover,
.mcl-nav-trigger.is-active,
.mcl-nav-trigger[aria-expanded="true"] { color: var(--color-teal); }
.mcl-nav-trigger .mc-icon { transition: transform var(--transition-fast); }
.mcl-nav-trigger[aria-expanded="true"] .mc-icon { transform: rotate(180deg); }

.mcl-nav-links a.is-active { color: var(--color-teal); }

.mcl-nav-highlight {
    padding: 4px var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-warning-bg);
    color: var(--color-warning) !important;
    font-weight: var(--weight-semibold);
}

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

   Anchored to .mcl-nav-inner (the container) rather than to its own trigger,
   and stretched edge to edge across it. Centring a 680px panel under the
   trigger put roughly 120px of it outside the container on the left, because
   Product sits next to the logo and there is no room on that side to centre
   into. Pinning to the container also lines the columns up with the page
   content behind the panel.

   Always in the DOM with [hidden] toggled, so the whole link graph is
   crawlable from every page. */
.mcl-nav-panel {
    position: absolute;
    top: calc(100% + 10px);
    /* Matches .mcl-container's inline padding, so the panel edges line up with
       the logo and the Sign up button rather than sitting in the gutter.
       Only ever applies at >= 1024px, where that padding is always space-6. */
    inset-inline: var(--space-6);
    transform: translateY(-6px);
    z-index: var(--z-dropdown);
    opacity: 0;
    transition: opacity 180ms var(--transition-fast), transform 180ms var(--transition-fast);
}
.mcl-nav-panel[hidden] { display: none; }
.mcl-nav-panel.is-open { opacity: 1; transform: translateY(0); }

/* A transparent bridge across the gap between trigger and panel, so a diagonal
   mouse path from one to the other does not cross "nothing" and close it. */
.mcl-nav-panel::before {
    content: '';
    position: absolute;
    top: -10px;
    inset-inline: 0;
    height: 10px;
}

.mcl-nav-panel-inner {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-5);
}

/* auto-fit, not a fixed count: the Product menu has four groups and Resources
   has three, and an empty fifth track would otherwise hold width the visible
   columns could use. 220px is the narrowest a card reads at without its
   tagline breaking to three lines. */
.mcl-nav-mega {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2) var(--space-4);
    align-items: start;
}

.mcl-nav-col { display: flex; flex-direction: column; min-width: 0; }

.mcl-nav-col-label {
    margin: 0 0 var(--space-1);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.mcl-nav-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    min-width: 0;
    transition: background var(--transition-fast);
}
.mcl-nav-card:hover { background: var(--color-hover-bg); }
.mcl-nav-card.is-current { background: var(--color-hover-bg); }
.mcl-nav-card-text { min-width: 0; }
.mcl-nav-card strong {
    display: block;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: 1.35;
}
.mcl-nav-card em {
    display: block;
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.mcl-nav-card-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mcl-nav-card-icon.is-teal   { background: var(--chart-1-bg); color: var(--chart-1); }
.mcl-nav-card-icon.is-green  { background: var(--chart-2-bg); color: var(--chart-2); }
.mcl-nav-card-icon.is-blue   { background: var(--chart-3-bg); color: var(--chart-3); }
.mcl-nav-card-icon.is-orange { background: var(--chart-4-bg); color: var(--chart-4); }
.mcl-nav-card-icon.is-rose   { background: var(--chart-5-bg); color: var(--chart-5); }
.mcl-nav-card-icon.is-purple { background: var(--chart-6-bg); color: var(--chart-6); }
.mcl-nav-card-icon.is-cyan   { background: var(--chart-7-bg); color: var(--chart-7); }
.mcl-nav-card-icon.is-lime   { background: var(--chart-8-bg); color: var(--chart-8); }

/* Competitor links inside the Resources panel. Chips rather than another
   column of cards: they are four one-word destinations and cards would give
   them the same visual weight as the docs. */
.mcl-nav-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) var(--space-3); }
.mcl-nav-chip {
    padding: 4px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text-secondary) !important;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}
.mcl-nav-chip:hover { border-color: var(--color-teal); color: var(--color-teal) !important; }

/* Full-width band under the columns rather than a fifth column: five tracks
   would squeeze the feature cards below the width their taglines need, and
   the promo is the one item here that is an offer rather than a destination. */
.mcl-nav-promo {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-warning-bg);
}
.mcl-nav-promo-tag {
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-warning);
}
.mcl-nav-promo p { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); flex: 1 1 220px; }

.mcl-nav-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}
.mcl-nav-panel-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-nav-panel-links { display: inline-flex; flex-wrap: wrap; gap: var(--space-4); }

/* Sheet-only; see the tablet breakpoint below. */
.mcl-nav-sheet-actions { display: none; }

/* ---------- Minimal (ad-landing) nav ---------- */

.mcl-nav.is-minimal .mcl-nav-inner { justify-content: space-between; }

@media (max-width: 1199px) {
    /* Four centre items plus two triggers: reclaim the gap before the row has
       to wrap. */
    .mcl-nav-links { gap: var(--space-4); }
    .mcl-nav-inner { gap: var(--space-5); }
}

/* ---------- Tablet and below: burger sheet ---------- */

@media (max-width: 1023px) {
    .mcl-nav-burger { display: inline-flex; }

    /* Header buttons that do not survive next to the burger. Both reappear
       inside the sheet as .mcl-nav-sheet-actions, so nothing is lost. */
    .mcl-nav-actions .mcl-btn-ghost { display: none; }

    /* The sheet hangs off .mcl-nav-inner, the same positioned ancestor the
       mega panels use. inset 0 resolves against that element's PADDING box,
       which includes the container gutter — so below 1024px, where the
       container is always viewport-bound, this is edge to edge with no
       negative-margin trick. (The mega panels want the content edge instead,
       which is why they inset by the gutter and this does not.) */
    .mcl-nav-links {
        display: none;
        position: absolute;
        /* Flush under the bar, not floated below it: any gap here has to be
           subtracted from max-height too, and 12px of see-through page between
           a bar and its own drawer reads as a rendering fault anyway. */
        top: 100%;
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--color-card-bg);
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        padding: var(--space-2) 0 var(--space-6);

        /* A ten-feature Product menu plus six resource links is taller than a
           phone. Scroll the sheet, not the page behind it — marketing-core.js
           locks <html> while it is open. */
        max-height: calc(100vh - var(--mcl-nav-h));
        max-height: calc(100dvh - var(--mcl-nav-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .mcl-nav-links.is-open { display: flex; }
    .mcl-nav-links > a { padding: var(--space-3) var(--space-6); }

    /* Panels become accordion sections: static, opaque, single column. */
    .mcl-nav-item { display: block; width: 100%; }
    .mcl-nav-panel {
        position: static;
        transform: none;
        opacity: 1;
        transition: none;
    }
    .mcl-nav-panel::before { content: none; }
    .mcl-nav-panel-inner {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        background: transparent;
        padding: 0 0 var(--space-3);
    }
    .mcl-nav-mega { grid-template-columns: 1fr; gap: var(--space-1); }
    .mcl-nav-col-label { padding-inline: var(--space-6); margin-top: var(--space-2); }

    /* 44px minimum touch target, which the desktop card padding does not
       reach on its own. */
    .mcl-nav-trigger {
        width: 100%;
        justify-content: space-between;
        padding: var(--space-3) var(--space-6);
        min-height: 44px;
    }
    .mcl-nav-card { padding: var(--space-2) var(--space-6); min-height: 44px; align-items: center; }
    .mcl-nav-chips { padding-inline: var(--space-6); }
    .mcl-nav-promo { margin-inline: var(--space-6); }
    .mcl-nav-panel-foot {
        flex-direction: column;
        align-items: flex-start;
        margin-inline: var(--space-6);
    }
    .mcl-nav-panel-links { flex-direction: column; gap: var(--space-2); }
    .mcl-nav-highlight { align-self: flex-start; margin: var(--space-2) var(--space-6); }

    .mcl-nav-sheet-actions {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin: var(--space-3) var(--space-6) 0;
        padding-top: var(--space-4);
        border-top: 1px solid var(--color-border);
    }
}

@media (max-width: 767px) {
    /* Container padding drops to space-4 here, so every rule that reproduced
       the space-6 gutter inside the sheet has to drop with it. */
    .mcl-nav-links > a,
    .mcl-nav-trigger,
    .mcl-nav-card,
    .mcl-nav-col-label,
    .mcl-nav-chips { padding-inline: var(--space-4); }
    .mcl-nav-promo,
    .mcl-nav-panel-foot,
    .mcl-nav-sheet-actions { margin-inline: var(--space-4); }
    .mcl-nav-highlight { margin-inline: var(--space-4); }

    .mcl-nav-inner { gap: var(--space-3); }
    .mcl-nav-actions { gap: var(--space-2); }
    .mcl-nav-actions .mcl-btn-primary .material-symbols-rounded { display: none; }
    .mcl-nav-logo img { height: 24px; }
}

@media (max-width: 479px) {
    /* The single CTA carries a full sentence ("Get Lifetime Account"), which
       at 360px pushed the nav 9px past the viewport and gave the whole page a
       horizontal scrollbar. Shrink the button rather than truncate the label —
       the words are the reason the button converts. */
    .mcl-nav.is-minimal .mcl-nav-inner { gap: var(--space-2); }
    .mcl-nav.is-minimal .mcl-nav-logo img { height: 22px; }
    .mcl-nav.is-minimal .mcl-nav-actions { gap: var(--space-1); }
    .mcl-nav.is-minimal .mcl-nav-actions .mcl-btn {
        padding-inline: var(--space-3);
        font-size: var(--text-sm);
    }

    /* Same squeeze on the full nav: logo + toggle + Sign up + burger. */
    .mcl-nav-actions .mcl-btn {
        padding-inline: var(--space-3);
        font-size: var(--text-sm);
    }
}

/* ==========================================================================
   MULTIPAGE FOOTER
   ========================================================================== */

.mcl-footer-cols {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: var(--space-10);
}
.mcl-footer-brandcol img { height: 26px; width: auto; }
.mcl-footer-brandcol p { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); max-width: 30ch; }
.mcl-footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.mcl-footer-social a { color: var(--color-text-muted); }
.mcl-footer-social a:hover { color: var(--color-teal); }

.mcl-footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.mcl-footer-col h2 {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
.mcl-footer-col a { font-size: var(--text-sm); color: var(--color-text-muted); }
.mcl-footer-col a:hover { color: var(--color-teal); }

.mcl-footer-bottom-links { display: inline-flex; gap: var(--space-4); }
.mcl-footer-bottom-links a { color: var(--color-text-muted); }
.mcl-footer-bottom-links a:hover { color: var(--color-teal); }

@media (max-width: 1199px) {
    .mcl-footer-cols { grid-template-columns: 1fr 1fr 1fr; }
    .mcl-footer-brandcol { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .mcl-footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

/* ==========================================================================
   SHELL ADDITIONS
   Everything below is new to the marketing site (it has no counterpart in
   landing.css) and therefore cannot regress the existing landing page.
   ========================================================================== */

/* ---------- Accessibility: skip link ---------- */

.mcl-skip {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: calc(var(--space-4) * -1 - 60px);
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-input);
    background: var(--color-card-bg);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    font-weight: var(--weight-semibold);
    transition: top var(--transition-fast);
}
.mcl-skip:focus { top: var(--space-4); }

/* ---------- Accessibility: focus ---------- */

/* No `outline: none` anywhere in this sheet. --color-border-focus is
   #5F32EA light / #A78BFF dark, so the ring is visible in both themes. */
.mc-marketing :focus-visible,
.mc-landing-page :focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
.mc-marketing .mcl-btn:focus-visible,
.mc-landing-page .mcl-btn:focus-visible {
    box-shadow: 0 0 0 4px var(--color-teal-ring);
}

/* Screen-reader-only text. Load-bearing, not decorative: the pricing matrix
   renders "not included" as an em-dash in --color-text-disabled (~2.5:1) and
   "0" in --color-text-muted. Those glyphs are decorative-grade contrast, so
   the meaning has to exist as text. */
.mc-marketing .sr-only,
.mc-landing-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Link primitive ---------- */

.mcl-link {
    color: var(--color-teal);
    font-weight: var(--weight-semibold);
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}
.mcl-link:hover { text-decoration: underline; }

/* ---------- Inverted surface ----------

   Sections that deliberately break the page rhythm with a dark panel (the
   home-page deliverability band, the lifetime hero) declare a local token
   scope rather than a parallel set of rules. Every primitive placed inside
   then themes itself with no extra CSS. This is the one place hex literals
   are allowed: these are surface colours for a fixed near-black panel, not
   theme tokens, and they must hold in BOTH light and dark mode. */

.mcl-oncontrast {
    --color-text:           #F5F7FA;
    --color-text-secondary: #C3CAD6;
    --color-text-muted:     #8A94A6;
    --color-card-bg:        rgba(255, 255, 255, 0.05);
    --color-border:         rgba(255, 255, 255, 0.10);
    --color-border-strong:  rgba(255, 255, 255, 0.18);
    --color-page-bg:        var(--gray-950);

    background: var(--gray-950);
    color: var(--color-text);
}

/* In dark mode the page is already near-black, so an identical panel would
   not read as a break. Lift it to a violet-tinted surface instead. */
[data-theme="dark"] .mcl-oncontrast {
    --color-page-bg: #151B29;
    background: linear-gradient(180deg, #151B29, #101623);
}

/* ---------- Scroll reveal ----------

   One shared IntersectionObserver (marketing-reveal.js) adds .is-in. The
   stagger is pure CSS: JS only writes --reveal-i once per child, capped at 6
   so a 12-item grid does not take 720ms to finish. */

[data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 480ms cubic-bezier(.32, .72, 0, 1),
                transform 480ms cubic-bezier(.32, .72, 0, 1);
    transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* ---------- Reduced motion ----------

   CSS zeroes durations globally; marketing-*.js additionally short-circuits
   the count-up, the hero view loop, the tab auto-advance and the bento
   spotlight so they never start rather than running instantly. */

@media (prefers-reduced-motion: reduce) {
    .mc-marketing *,
    .mc-marketing *::before,
    .mc-marketing *::after,
    .mc-landing-page *,
    .mc-landing-page *::before,
    .mc-landing-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .mc-marketing [data-reveal],
    .mc-landing-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
    .mc-marketing .mcl-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; }
    .mc-marketing .mcl-blob { animation: none; }
}