/* Containment: any future section that runs wide must not create
           horizontal scroll. clip (not hidden) keeps the sticky and
           scroll-linked sections working. */
        [data-product-route="marketing"] {
          overflow-x: clip;
          max-width: 100vw;
          --mk-accent: #EC4899;
          --mk-accent-2: #8B5CF6;
          --mk-accent-ink: #EC4899;
          --mk-card-bg: rgba(255, 255, 255, 0.03);
          --mk-card-border: rgba(255, 255, 255, 0.09);
          --mk-chip-bg: rgba(255, 255, 255, 0.04);
          --mk-rule: rgba(255, 255, 255, 0.10);
          /* Neumorphic surface tokens (mirror mcp/mcpTheme soft + inset). A
             raised panel = one dark shadow below-right + a faint highlight
             above-left; a pressed well = the same, inset. */
          --mk-soft-bg: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
          --mk-soft-shadow: 6px 6px 18px rgba(0,0,0,0.34), -3px -3px 10px rgba(255,255,255,0.04);
          --mk-soft2-shadow: 10px 10px 30px rgba(0,0,0,0.36), -5px -5px 17px rgba(255,255,255,0.04);
          --mk-soft-border: rgba(255,255,255,0.08);
          --mk-inset-bg: rgba(2,6,23,0.5);
          --mk-inset-shadow: inset 3px 3px 9px rgba(0,0,0,0.45), inset -1px -1px 4px rgba(255,255,255,0.03);
          --mk-inset-border: rgba(255,255,255,0.05);
          /* Opaque card ground for the mobile sticky deck: a card sliding
             over the previous one must fully hide it, and --mk-soft-bg is
             translucent. Solid deep navy, close to the page ground. */
          --mk-surface-solid: #0c1017;
        }
        :root.light [data-product-route="marketing"] {
          --mk-accent-ink: color-mix(in srgb, #EC4899 62%, #0F172A 38%);
          --mk-card-bg: rgba(255, 255, 255, 0.72);
          --mk-card-border: rgba(15, 23, 42, 0.09);
          --mk-chip-bg: rgba(15, 23, 42, 0.035);
          --mk-rule: rgba(15, 23, 42, 0.12);
          --mk-soft-bg: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(241,245,249,0.72));
          --mk-soft-shadow: 6px 6px 16px rgba(15,23,42,0.07), -4px -4px 12px rgba(255,255,255,0.9);
          --mk-soft2-shadow: 10px 10px 27px rgba(15,23,42,0.08), -7px -7px 20px rgba(255,255,255,0.92);
          --mk-soft-border: rgba(15,23,42,0.06);
          --mk-inset-bg: rgba(241,245,249,0.9);
          --mk-inset-shadow: inset 3px 3px 8px rgba(15,23,42,0.075), inset -2px -2px 6px rgba(255,255,255,0.85);
          --mk-inset-border: rgba(15,23,42,0.05);
          --mk-surface-solid: #ffffff;
        }
        [data-product-route="marketing"] section { max-width: 100%; overflow-x: clip; }
        [data-product-route="marketing"] .mlp-faq { padding-bottom: clamp(32px, 4vh, 48px); }

        /* ---- Surfaces: horizontal scroll-snap carousel (one row, all 6) ---- */
        [data-product-route="marketing"] .mk-surfaces-grid {
          display: flex;
          gap: clamp(16px, 2vw, 22px);
          overflow-x: auto;
          overflow-y: hidden;
          scroll-snap-type: x mandatory;
          scroll-padding-left: 2px;
          padding: 8px 2px 20px;
          margin-top: clamp(34px, 4.5vh, 54px);
          scrollbar-width: thin;
          scrollbar-color: color-mix(in srgb, var(--mk-accent) 45%, transparent) transparent;
          scroll-behavior: smooth;
        }
        [data-product-route="marketing"] .mk-surfaces-grid::-webkit-scrollbar { height: 8px; }
        [data-product-route="marketing"] .mk-surfaces-grid::-webkit-scrollbar-track { background: transparent; }
        [data-product-route="marketing"] .mk-surfaces-grid::-webkit-scrollbar-thumb {
          background: color-mix(in srgb, var(--mk-accent) 40%, transparent);
          border-radius: 999px;
        }
        [data-product-route="marketing"] .mk-surface {
          flex: 0 0 clamp(288px, 30vw, 360px);
          scroll-snap-align: start;
          border-radius: 22px;
          background: var(--mk-soft-bg);
          box-shadow: var(--mk-soft2-shadow);
          border: 1px solid var(--mk-soft-border);
          padding: clamp(20px, 2.2vw, 26px) clamp(18px, 2.2vw, 22px);
          display: flex;
          flex-direction: column;
          /* NOTE: no align-items:center here. Centering is done with
             text-align + per-row justify so children (esp. .mk-surface-viz)
             keep stretching to full card width; align-items:center would
             collapse the viz to its dense min-content and overflow the card. */
          text-align: center;
          gap: 13px;
          min-width: 0;
          transition: box-shadow 220ms ease, transform 220ms ease;
        }
        [data-product-route="marketing"] .mk-surface:hover {
          transform: translateY(-5px);
          box-shadow: var(--mk-soft2-shadow), 0 0 0 1px color-mix(in srgb, var(--mk-accent) 40%, transparent);
        }
        /* Uniform preview window so every card is the SAME height, coherent row. */
        [data-product-route="marketing"] .mk-surface-viz {
          height: 300px;
          width: 100%;
          align-self: stretch;
          overflow: hidden;
          border-radius: 14px;
          margin-bottom: 4px;
          flex: 0 0 auto;
          -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
        }
        [data-product-route="marketing"] .mk-surface-viz > * { width: 100%; display: block; }
        [data-product-route="marketing"] .mk-surface-top {
          display: flex; align-items: center; justify-content: center;
        }
        [data-product-route="marketing"] .mk-surface-num { display: none; }
        [data-product-route="marketing"] .mk-surface-icon {
          width: 48px; height: 48px; border-radius: 15px;
          display: grid; place-items: center;
          color: var(--mk-accent-ink);
          background: var(--mk-soft-bg);
          box-shadow: var(--mk-soft-shadow);
          border: 1px solid var(--mk-soft-border);
        }
        [data-product-route="marketing"] .mk-surface-num {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
          color: var(--mel-text-muted); opacity: 0.8;
        }
        [data-product-route="marketing"] .mk-surface h3 {
          margin: 0; font-size: clamp(17px, 1.8vw, 20px); font-weight: 650;
          letter-spacing: -0.02em; color: var(--mel-text-primary);
        }
        [data-product-route="marketing"] .mk-surface > p {
          margin: 0; font-size: 14px; line-height: 1.55;
          color: var(--mel-text-secondary); flex: 1;
          display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
        }
        /* Chips fill the card in an even grid so no ragged empty space is left
           by short labels. 4 chips -> a tidy 2x2 that spans the full width. */
        [data-product-route="marketing"] .mk-surface-chips {
          display: grid; grid-template-columns: 1fr 1fr;
          gap: 7px; margin-top: 2px; width: 100%;
        }
        [data-product-route="marketing"] .mk-surface-chips span {
          display: flex; align-items: center; justify-content: center; gap: 6px;
          border-radius: 9px; padding: 7px 10px; text-align: center;
          background: var(--mk-inset-bg);
          box-shadow: var(--mk-inset-shadow);
          border: 1px solid var(--mk-inset-border);
          font-size: 11.5px; line-height: 1.3; color: var(--mel-text-muted);
        }
        [data-product-route="marketing"] .mk-surface-chips svg {
          color: var(--mk-accent-ink); flex: 0 0 auto;
        }

        /* ---- How it works: three steps on a rail ---- */
        [data-product-route="marketing"] .mk-steps {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: clamp(18px, 2.4vw, 28px);
          margin-top: clamp(34px, 4.5vh, 54px);
          position: relative;
        }
        [data-product-route="marketing"] .mk-step {
          display: flex; flex-direction: column; align-items: center;
          text-align: center; gap: 14px;
          border-radius: 22px;
          background: var(--mk-soft-bg);
          box-shadow: var(--mk-soft2-shadow);
          border: 1px solid var(--mk-soft-border);
          padding: clamp(24px, 2.6vw, 30px) clamp(18px, 2.2vw, 26px);
          min-width: 0;
        }
        [data-product-route="marketing"] .mk-step-badge {
          display: flex; flex-direction: column; align-items: center; gap: 9px;
        }
        [data-product-route="marketing"] .mk-step-badge i {
          width: 48px; height: 48px; border-radius: 15px;
          display: grid; place-items: center; font-style: normal;
          color: var(--mk-accent-ink);
          background: var(--mk-soft-bg);
          box-shadow: var(--mk-soft-shadow);
          border: 1px solid var(--mk-soft-border);
        }
        [data-product-route="marketing"] .mk-step-badge b {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
          color: var(--mk-accent-ink); opacity: 0.85;
        }
        [data-product-route="marketing"] .mk-step h3 {
          margin: 0; font-size: clamp(18px, 1.9vw, 21px); font-weight: 650;
          letter-spacing: -0.02em; color: var(--mel-text-primary);
        }
        [data-product-route="marketing"] .mk-step p {
          margin: 0; font-size: 14px; line-height: 1.58;
          color: var(--mel-text-secondary);
        }

        /* ---- Connectors: editorial category rows ---- */
        [data-product-route="marketing"] .mk-conn-rows {
          margin-top: clamp(30px, 4vh, 46px);
          display: flex; flex-direction: column;
        }
        [data-product-route="marketing"] .mk-conn-row {
          display: grid;
          grid-template-columns: minmax(120px, 200px) 1fr;
          gap: clamp(14px, 2.4vw, 32px);
          align-items: baseline;
          padding: 17px 0;
          border-top: 1px solid var(--mk-rule);
        }
        [data-product-route="marketing"] .mk-conn-row:first-child { border-top: none; }
        [data-product-route="marketing"] .mk-conn-label {
          font-family: 'JetBrains Mono', ui-monospace, monospace;
          font-size: 11px; font-weight: 600; letter-spacing: 0.15em;
          text-transform: uppercase; color: var(--mk-accent-ink);
          text-align: right;
        }
        [data-product-route="marketing"] .mk-conn-items {
          margin: 0; font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.6;
          color: var(--mel-text-primary); letter-spacing: -0.005em;
          overflow-wrap: anywhere;
        }
        [data-product-route="marketing"] .mk-conn-footnote {
          margin: 18px 0 0; font-size: 13.5px; font-style: italic;
          color: var(--mel-text-muted);
        }

        /* ---- Trust guarantees ---- */
        [data-product-route="marketing"] .mk-trust-list {
          list-style: none; padding: 0;
          margin: clamp(28px, 3.6vh, 40px) 0 0;
          display: flex; flex-direction: column;
        }
        [data-product-route="marketing"] .mk-trust-list li {
          display: flex; gap: 13px; align-items: flex-start;
          padding: 16px 0;
          border-top: 1px solid var(--mk-rule);
          font-size: clamp(14.5px, 1.5vw, 16px); line-height: 1.6;
          color: var(--mel-text-secondary);
        }
        [data-product-route="marketing"] .mk-trust-list li:first-child { border-top: none; }
        [data-product-route="marketing"] .mk-trust-list li > span {
          color: var(--mk-accent-ink); flex: 0 0 auto; padding-top: 2px;
        }

        /* ---- Tablet ---- */
        @media (max-width: 1024px) {
          [data-product-route="marketing"] .mk-steps {
            grid-template-columns: minmax(0, 1fr);
          }
        }

        /* ---- Phone rhythm: flat 40px section breaks, centred heads,
                tighter cards. vh-based padding scales the gap with the
                dimension that is scarcest on a phone, so it comes off. ---- */
        @media (max-width: 640px) {
          [data-product-route="marketing"] .mlp-product-section {
            padding-top: 40px !important;
            padding-bottom: 40px !important;
          }
          [data-product-route="marketing"] .mlp-product-section:first-of-type {
            padding-top: 24px !important;
          }
          [data-product-route="marketing"] .mlp-faq {
            padding-top: 40px !important;
            padding-bottom: 28px !important;
          }
          /* Phone: the 6 surfaces are a clean, full-width VERTICAL
             STACK with generous spacing. The previous sticky stacked
             deck (each card position: sticky; top: 72px, pinning while
             the next slid up and over) was janky here and could not be
             made reliably smooth: the cards live inside a MotionSection
             that applies content-visibility: auto plus a framer-motion
             entrance transform, and a transformed / contained ancestor
             is a classic reason position: sticky stutters (the section
             becomes the sticky containing block and content-visibility
             re-layout across the very tall deck triggers scroll-anchor
             jank). A plain stack is smoother on a 375px phone and reads
             just as premium. Each card keeps its neumorphic soft-bg
             styling (inherited from the base .mk-surface rule) and its
             gentle one-shot whileInView rise, which is already
             reduced-motion safe via the motion.article initial guard in
             the JSX. */
          [data-product-route="marketing"] .mk-surfaces-grid {
            display: flex;
            flex-direction: column;
            gap: clamp(18px, 4vw, 26px);
            overflow: visible;
            scroll-snap-type: none;
            padding: 0;
          }
          [data-product-route="marketing"] .mk-step {
            border-radius: 16px;
            padding: 18px 16px;
          }
          [data-product-route="marketing"] .mk-surface {
            position: relative;
            flex: 0 0 auto;
            width: 100%;
            scroll-snap-align: none;
            justify-content: flex-start;
            border-radius: 20px;
            padding: 22px 18px;
          }
          /* No hover lift on touch; keep the card perfectly still. */
          [data-product-route="marketing"] .mk-surface:hover {
            transform: none;
            box-shadow: var(--mk-soft2-shadow);
          }
          [data-product-route="marketing"] .mk-surface-viz {
            height: clamp(200px, 34svh, 260px);
          }
          /* SectionHead sets alignItems and textAlign inline, and inline
             styles beat any stylesheet specificity, hence !important. */
          [data-product-route="marketing"] .mk-head {
            align-items: center !important;
            text-align: center !important;
          }
          [data-product-route="marketing"] .mk-head h2,
          [data-product-route="marketing"] .mk-head p {
            max-width: 100% !important;
          }
          [data-product-route="marketing"] .mk-head > *:first-child {
            justify-content: center;
          }
          [data-product-route="marketing"] .mk-lead,
          [data-product-route="marketing"] .mk-kicker {
            text-align: center !important;
            max-width: 100% !important;
            margin-left: auto !important;
            margin-right: auto !important;
          }
          /* Numbered rows centre as a block but keep their text left-aligned:
             a two-line sentence centred under a number badge wraps into a
             ragged triangle. */
          [data-product-route="marketing"] .mk-problem-row {
            justify-content: flex-start;
            text-align: left;
            max-width: 34ch;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
          }
          /* Connectors read as a centred stack on phones: label over items,
             both centred, full-width dividers preserved. */
          [data-product-route="marketing"] .mk-conn-row {
            grid-template-columns: minmax(0, 1fr);
            gap: 6px;
            justify-items: center;
            text-align: center;
          }
          [data-product-route="marketing"] .mk-conn-label { text-align: center; }
          [data-product-route="marketing"] .mk-conn-items { text-align: center; }
          [data-product-route="marketing"] .mk-conn-footnote { text-align: center; }
        }