.mtp-shell { position: relative; padding: 48px 0 60px; overflow: clip; }
        .mtp-bg {
          position: absolute; inset: 0; pointer-events: none;
          background:
            radial-gradient(circle at 16% 8%, rgba(167,139,250,0.16), transparent 40%),
            radial-gradient(circle at 92% 26%, rgba(34,211,238,0.13), transparent 38%),
            radial-gradient(circle at 60% 96%, rgba(16,185,129,0.10), transparent 42%);
        }
        .mtp-wrap { position: relative; max-width: 560px; margin: 0 auto; padding: 0 16px; }

        /* Centered mobile section header. */
        .mtp-eyebrow {
          display: flex; align-items: center; justify-content: center; gap: 9px;
          font: 700 11px/1 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
          letter-spacing: 0.2em; text-transform: uppercase; color: var(--mel-text-tertiary);
        }
        .mtp-eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #7C6FF0; box-shadow: 0 0 0 3px color-mix(in srgb, #7C6FF0 20%, transparent); }
        .mtp-headline {
          margin: 16px 0 0; text-align: center; font-family: Poppins, system-ui, sans-serif; font-weight: 700;
          font-size: clamp(1.85rem, 8.4vw, 2.4rem); line-height: 1.16; letter-spacing: -0.035em;
          color: var(--mel-text-primary); overflow-wrap: break-word;
        }
        /* One sentence per line (the render splits the headline on '. '). */
        .mtp-headline span { display: block; }
        .mtp-headline .accent { color: #7C6FF0; }
        .mtp-rule { height: 2px; width: min(160px, 44%); margin: 16px auto 0; border-radius: 2px; background: #7C6FF0; opacity: 0.85; }
        .mtp-sub { margin: 15px 0 0; text-align: center; font: 400 1rem/1.62 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }

        .mtp-stack { display: flex; flex-direction: column; margin-top: 38px; }

        /* The deck: one card per product, each a fixed viewport-height card
           that sticks under the promo pill and stacks on the previous one
           (a 7px step leaves each earlier card's edge peeking above), down to
           the bottom safe area (no product rail on phones). Alternating
           light / deep; dark mode
           alternates a lighter and a darker card. */
        .mtp-stack {
          --mtp-top: calc(58px + env(safe-area-inset-top, 0px));
          --mtp-bot: calc(12px + env(safe-area-inset-bottom, 0px));
          padding: 0 10px;
        }
        .mtp-sheet {
          position: sticky; top: calc(var(--mtp-top) + var(--k) * 7px);
          height: calc(100svh - var(--mtp-top) - var(--mtp-bot) - var(--k) * 7px);
          min-height: 460px;
          border-radius: 26px; overflow: hidden; isolation: isolate;
          /* The card surface lives on the two faces (see .mtp-face). */
        }
        .mtp-sheet + .mtp-sheet { margin-top: 18px; }
        .mtp-sheet.is-light .mtp-face { background: var(--background); box-shadow: 0 -14px 34px -18px rgba(11,21,48,0.34); }
        .mtp-sheet.is-deep .mtp-face {
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141B2B 46%, #0C1017 100%);
          box-shadow: 0 -14px 34px -16px rgba(11,21,48,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        
        html.dark .mtp-sheet.is-light {
          color-scheme: light;
          --background: #F8FAFC; --foreground: #0F172A;
          --card: #FFFFFF; --card-foreground: #0F172A;
          --muted: #F1F5F9; --muted-foreground: #475569;
          --border: rgba(100,116,139,0.22); --input: rgba(100,116,139,0.18);
          --mel-text-primary: #0F172A; --mel-text-secondary: #1E293B; --mel-text-tertiary: #475569;
          --mel-text-muted: #64748B; --mel-text-faint: rgba(71,85,105,0.4);
          --mel-surface-1: #F8FAFC; --mel-surface-2: #F1F5F9; --mel-surface-3: #E2E8F0;
          --mel-surface-overlay: #FFFFFF; --mel-surface-card: #FFFFFF; --mel-surface-panel: #F8FAFC; --mel-surface-modal: #FFFFFF;
          --mel-input-bg: #FFFFFF; --mel-input-border: rgba(100,116,139,0.28); --mel-input-text-muted: #475569; --mel-input-label: #1E293B;
          --mel-border-subtle: rgba(100,116,139,0.18); --mel-border-default: rgba(100,116,139,0.24); --mel-border-muted: rgba(100,116,139,0.14);
          color: #0F172A;
        }
        html.dark .mtp-sheet.is-light .mlp-assistant-window-controls span {
          border-color: var(--mel-border-subtle);
          background: linear-gradient(180deg, var(--mel-surface-card), var(--mel-surface-1));
          box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 2px 5px -2px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.7);
        }
        html.dark .mtp-sheet.is-light .mlp-assistant-tool-stream span {
          border-top-color: var(--mel-border-subtle); border-right-color: var(--mel-border-subtle); border-bottom-color: var(--mel-border-subtle);
          box-shadow: 0 1px 2px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.45);
        }
        html.dark .mtp-sheet.is-light .mlp-assistant-window-compose { box-shadow: inset 0 1px 3px rgba(15,23,42,.06); }
        html.dark .mtp-sheet.is-light :is(.mlp-assistant-chart, .mlp-assistant-workarea, .mlp-assistant-wa-inv, .mlp-assistant-wa-mail, .mlp-assistant-wa-draft) {
          border-color: var(--mel-border-subtle);
          box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 3px 8px -4px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.55);
        }
        html.dark .mtp-sheet.is-light .mlp-assistant-workarea .mlp-assistant-chart { box-shadow: none; }

        html.dark .mtp-sheet.is-light .mtp-face { background: #F8FAFC; box-shadow: 0 -14px 34px -14px rgba(0,0,0,0.75); }
        html.dark .mtp-sheet.is-deep .mtp-face { background: radial-gradient(135% 115% at 50% -12%, #151C2C 0%, #0C111B 48%, #07090F 100%); box-shadow: 0 -14px 34px -14px rgba(0,0,0,0.8); }
        /* Flip: the article is the 3D stage, the faces carry the card. */
        .mtp-sheet { perspective: 1600px; overflow: visible !important; cursor: pointer; -webkit-tap-highlight-color: transparent; }
        .mtp-flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1); }
        .mtp-sheet.is-flipped .mtp-flip { transform: rotateY(180deg); }
        .mtp-face {
          position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
          padding: 12px 14px 14px; border-radius: 26px; overflow: hidden; border: 1px solid var(--mtp-border);
          backface-visibility: hidden; -webkit-backface-visibility: hidden; cursor: auto;
        }
        .mtp-face.back { transform: rotateY(180deg); }
        .mtp-face::before {
          content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 3px; margin-left: -18px; border-radius: 3px;
          background: linear-gradient(90deg, var(--a), var(--b));
        }
        /* Front: the visual fills the free height, the copy sits at the bottom. */
        .mtp-face.front .mtp-fit { flex: 1 1 auto; align-items: flex-start; }
        /* The MCP dock (install field + links) is too dense for a phone card
           front: the back face carries the skill + copy actions instead. */
        .mtp-face.front .mlp-mcpact { display: none; }
        .mtp-face.front .mtp-meta { flex: 0 0 auto; }
        /* Actions stacked, full width: the CTA, then the flip toggle. */
        .mtp-front-actions, .mtp-back-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; width: 100%; margin-top: 12px; }
        .mtp-front-actions .mlp-neu-cta, .mtp-back-actions .mlp-neu-cta { justify-content: center; width: 100%; }
        .mtp-front-actions .mtp-flip-btn, .mtp-back-actions .mtp-flip-btn { justify-content: center; width: 100%; height: 40px; }
        /* Details / Back with, on the Assistant card, Slack's official button
           (139x40 at its native size, never stretched) on the same row. */
        .mtp-flip-row { display: flex; align-items: center; gap: 8px; width: 100%; }
        .mtp-flip-row .mtp-flip-btn { flex: 1 1 auto; min-width: 0; }
        .mtp-flip-row > a { flex: 0 0 auto; }
        .mtp-flip-btn {
          flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 12px;
          font: 600 13px/1 Poppins, system-ui, sans-serif; color: var(--mtp-ink); cursor: pointer;
          background: color-mix(in srgb, var(--mtp-ink) 6%, transparent); border: 1px solid var(--mtp-border);
        }
        .mtp-flip-btn:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }
        /* Back: details scroll inside the card if a language runs long. */
        /* Back: the details sit centred in the free height ("safe" keeps the
           top reachable when a long language overflows and scrolls). */
        .mtp-back-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; justify-content: safe center; text-align: center; padding-block: 10px; }
        .mtp-face.back .mtp-title { font-size: clamp(1.2rem, 5.6vw, 1.45rem); }
        .mtp-face.back .mtp-points { margin-top: 18px; gap: 11px; }
        .mtp-face.back .mtp-points li { font-size: 13.5px; line-height: 1.55; }
        .mtp-face.back .mtp-stores { margin: 14px 0 0; }
        .mtp-face.front .mtp-meta { gap: 0; }
        .mtp-face.front .mtp-title { margin-top: 2px; }
        .mtp-face.front .mtp-body { margin: 12px 0 0; }
        .mtp-face.front .mtp-front-actions { margin-top: 18px; }
        .mtp-face.back .mtp-tagline { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; max-width: 36ch; }
        @media (prefers-reduced-motion: reduce) {
          .mtp-flip { transition: none; transform: none !important; }
          .mtp-face { transition: opacity .2s ease; }
          .mtp-face.back { transform: none; opacity: 0; pointer-events: none; }
          .mtp-sheet.is-flipped .mtp-face.back { opacity: 1; pointer-events: auto; }
          .mtp-sheet.is-flipped .mtp-face.front { opacity: 0; pointer-events: none; }
        }
        .mtp-sheet-in { position: relative; height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
        /* Desktop visuals on a phone: no stage padding, phones sized to the card. */
        .mtp-embed .mlp-device-stage { padding: 0; }
        .mtp-embed .mlp-svgphones { --mlp-phone-w: 44%; padding-block: 6px 10px; }
        .mtp-embed .mlp-monitor { width: 100%; }
        /* Marketing on a phone: the desktop audit simulator restyled as a
           native control. No inner card; a big score readout on top; a full
           width 52px field (16px text: no iOS focus zoom); a full width 48px
           thumb button under it; the live scan keeps its own phone layout. */
        .mtp-sim .mk-sim-root { background: none !important; box-shadow: none !important; border: 0 !important; padding: 2px 2px 0 !important; overflow: visible; }
        .mtp-sim .mk-sim-head { flex-direction: column-reverse; justify-content: center !important; align-items: center; gap: 10px !important; margin-bottom: 16px !important; }
        .mtp-sim .mk-sim-head > .mk-sim-chip {
          flex-direction: column; gap: 4px !important; padding: 0 !important;
          background: none !important; box-shadow: none !important; border: 0 !important;
        }
        .mtp-sim .mk-sim-head > .mk-sim-chip > span:last-child { font-size: 44px !important; line-height: 1; letter-spacing: -0.02em; }
        .mtp-sim form { display: grid; gap: 10px; margin-bottom: 6px !important; }
        .mtp-sim form > svg:first-child { top: 26px !important; }
        .mtp-sim .mk-sim-input { height: 52px; font-size: 16px; padding: 0 16px 0 44px !important; border-radius: 14px; }
        .mtp-sim .mk-sim-go, .mtp-sim .mk-sim-cancel {
          position: static !important; width: 100%; height: 48px; border-radius: 14px; justify-content: center; font-size: 14.5px;
        }
        .mtp-sim #mk-sim-hint { text-align: center; margin-bottom: 2px !important; }

        /* Browser Control: the three live extension stores. */
        /* Store logos, bare and large with a soft lift (no tiles). The shadow
           is static (not animated), only the hover lift moves. */
        .mtp-stores { display: flex; justify-content: center; align-items: center; gap: 22px; margin: 0 0 8px; }
        .mtp-stores a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; transition: transform .18s ease; }
        .mtp-stores a:hover, .mtp-stores a:focus-visible { transform: translateY(-2px) scale(1.04); }
        .mtp-stores a:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }
        .mtp-stores img { width: 40px; height: 40px; object-fit: contain;
          filter: drop-shadow(0 6px 10px rgba(2,6,23,0.28)) drop-shadow(0 2px 3px rgba(2,6,23,0.18)); }
        .mtp-sheet.is-deep .mtp-stores img, html.dark .mtp-sheet.is-deep .mtp-stores img {
          filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 1px rgba(255,255,255,0.25)); }
        .mtp-sheet-in::before {
          content: ""; position: absolute; top: -12px; left: 50%; width: 36px; height: 3px; margin-left: -18px; border-radius: 3px;
          background: linear-gradient(90deg, var(--a), var(--b));
        }
        /* The visual takes whatever height the copy leaves, scaled to fit. */
        /* Natural height, shrink-only: the copy below always gets its room,
           and there is no empty band above or below the visual. */
        .mtp-fit { flex: 0 1 auto; min-height: 0; display: flex; justify-content: center; align-items: flex-start; overflow: hidden; }
        .mtp-fit-in { flex: 0 0 auto; width: 100%; transform-origin: top center; }
        @media (min-height: 621px) { .mtp-sheet[data-covered] > .mtp-flip { content-visibility: hidden; } }
        /* Short phones: a plain stack, no deck (cards would be too cramped). */
        @media (max-height: 620px) {
          .mtp-sheet { position: relative; top: auto; height: auto; min-height: 0; cursor: auto; }
          /* No deck on short phones: no flip either, both faces stacked. */
          .mtp-flip { transform: none !important; height: auto; }
          .mtp-face { position: relative; }
          .mtp-face.back { transform: none; margin-top: 12px; }
          .mtp-flip-btn { display: none; }
          .mtp-fit { overflow: visible; }
        }

        .mtp-shot {
          position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 15px;
          overflow: hidden; border: 1px solid var(--mtp-border); background: #020617;
          box-shadow: 0 20px 42px -26px color-mix(in srgb, var(--a) 60%, rgba(2,6,23,0.9));
        }
        .mtp-shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
        .mtp-shot::after {
          content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; z-index: 2;
          background: radial-gradient(72% 120% at 50% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 72%);
          pointer-events: none;
        }

        /* Self-contained visuals (BrowserConsole, McpConnect, SeoAuditPreview)
           bring their own rounded shell and size to 100% width. Render them bare
           so nothing is cropped: no fixed aspect ratio, no extra chrome, no
           overlay, and never wider than the card. */
        .mtp-embed {
          aspect-ratio: auto; height: auto; overflow: visible;
          border: none; background: transparent; box-shadow: none; border-radius: 0;
        }
        .mtp-embed::after { display: none; }
        .mtp-embed > * { width: 100%; max-width: 100%; }
        .mtp-embed img, .mtp-embed svg { max-width: 100%; }

        .mtp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; aspect-ratio: auto; background: #050812; }
        .mtp-duo::after { display: none; }
        .mtp-duo > span { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 9 / 16; border: 1px solid rgba(148,163,184,0.16); background: #020617; display: block; }
        .mtp-duo > span > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

        .mtp-console {
          aspect-ratio: auto; display: flex; flex-direction: column; gap: 9px; padding: 12px;
          background:
            radial-gradient(circle at 8% 0%, rgba(34,211,238,0.14), transparent 36%),
            radial-gradient(circle at 100% 100%, rgba(139,92,246,0.15), transparent 40%),
            #050812;
        }
        .mtp-console::after { display: none; }
        .mtp-console-top { display: flex; align-items: center; gap: 8px; }
        .mtp-console-top > img { width: 26px; height: 26px; object-fit: contain; }
        .mtp-console-top strong { font: 700 11px/1 Poppins, system-ui, sans-serif; color: #F8FAFC; }
        .mtp-console-top i { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 9px rgba(16,185,129,0.7); }
        .mtp-console-scope { display: flex; align-items: center; gap: 5px; }
        .mtp-console-scope span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.96); }
        .mtp-console-scope span > img { width: 17px; height: 17px; object-fit: contain; }
        .mtp-console-scope b { margin-left: 4px; color: rgba(203,213,225,0.62); font: 650 7px/1.2 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
        .mtp-console-user { margin: 0 0 0 18%; padding: 9px 10px; border-radius: 12px; border: 1px solid rgba(34,211,238,0.20); background: rgba(34,211,238,0.08); color: rgba(240,249,255,0.86); font: 500 8.5px/1.45 Poppins, system-ui, sans-serif; }
        .mtp-console-answer { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 12px; border-left: 2px solid #8B5CF6; background: rgba(139,92,246,0.09); }
        .mtp-console-answer > span { color: #C4B5FD; font: 800 7px/1.4 'JetBrains Mono', monospace; }
        .mtp-console-answer > p { margin: 0; color: rgba(248,250,252,0.86); font: 500 8.5px/1.45 Poppins, system-ui, sans-serif; }
        .mtp-console-trace { display: flex; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid rgba(148,163,184,0.12); color: rgba(203,213,225,0.58); font: 650 7px/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; }
        .mtp-console-trace > i { width: 6px; height: 6px; border-radius: 50%; background: #10B981; }
        .mtp-console-trace b { margin-left: auto; color: #C4B5FD; font-weight: 700; }

        /* The whole card text column is centered on mobile: eyebrow, title,
           body, points and CTA all read from the middle. */
        .mtp-meta { display: flex; flex-direction: column; align-items: center; text-align: center; }
        /* Centered numeral + wrapping label. The rule is dropped on mobile: a
           long eyebrow wraps to 2 lines and a centred rule floated mid-text. */
        .mtp-eyebrow-row { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 8px; }
        .mtp-num { font: 800 11px/1 'JetBrains Mono', monospace; letter-spacing: 0.12em; color: var(--a); flex: 0 0 auto; }
        .mtp-eyebrow-row .r { display: none; }
        .mtp-eyebrow-row .lbl { font: 700 10px/1.5 'JetBrains Mono', monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mtp-eyebrow-ink); }
        /* Titles are centered and sized for a phone (about 1.15 to 1.35rem). */
        .mtp-title { margin: 0; text-align: center; font: 700 clamp(1.15rem, 5.2vw, 1.35rem)/1.22 Poppins, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--mtp-ink); }
        .mtp-underline { height: 3px; width: 48px; margin: 11px auto 0; border-radius: 3px; background: linear-gradient(90deg, var(--a), var(--b)); box-shadow: 0 0 16px color-mix(in srgb, var(--a) 42%, transparent); }
        /* Never clamped: the full body lives on the card's back face. */
        .mtp-body { margin: 8px 0 14px; max-width: 42ch; font: 400 0.9rem/1.55 Poppins, system-ui, sans-serif; color: var(--mtp-body); }
        .mtp-meta { flex: 0 0 auto; }
        .mtp-points { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 8px; width: 100%; max-width: 40ch; }
        .mtp-points li { display: flex; align-items: flex-start; justify-content: center; gap: 8px; text-align: left; font: 400 13px/1.5 Poppins, system-ui, sans-serif; color: var(--mtp-muted); }
        .mtp-points li::before { content: ""; margin-top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--a); box-shadow: 0 0 12px var(--a); flex: 0 0 6px; }
        /* CTA + skip use the shared .mlp-neu-cta system (animations.css). The
           block CTA stays full width even inside the centered column. */
        .mtp-meta > .mlp-neu-cta--block { align-self: stretch; width: 100%; }
        .mtp-tagline { margin-top: 12px; text-align: center; font: 400 11.5px/1.4 Poppins, system-ui, sans-serif; color: var(--mtp-muted); }

        .mtp-skip { display: flex; justify-content: center; margin-top: 24px; }

        @media (prefers-reduced-motion: reduce) {
          .mtp-eyebrow i { box-shadow: none; }
          .mlp-tp-browser-live, .mlp-tp-browser-cursor { animation: none !important; }
        }