.mlp-tp-head { position: relative; max-width: 1000px; }
        .mlp-tp-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 11px;
          font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          font-size: 12px;
          font-weight: 700;
          color: var(--mel-text-tertiary);
        }
        .mlp-tp-eyebrow-dot {
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: #7C6FF0;
          animation: mlp-tp-pulse 2.8s ease-in-out infinite;
        }
        @keyframes mlp-tp-pulse {
          0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #7C6FF0 22%, transparent); }
          50% { box-shadow: 0 0 0 8px color-mix(in srgb, #7C6FF0 0%, transparent); }
        }
        /* One flowing headline; its words illuminate + lift on scroll (see
           HeadlineWord). Solid accent on the final clause avoids the descender
           clipping a gradient text-fill causes on letters like the "g" in "Grow". */
        .mlp-tp-headline {
          margin: 26px 0 0;
          max-width: 22ch;
          font-family: Poppins, system-ui, sans-serif;
          font-weight: 700;
          font-size: clamp(1.9rem, 2.2vw + 0.95rem, 3.4rem);
          line-height: 1.26;
          letter-spacing: -0.035em;
          color: var(--mel-text-primary);
        }
        /* margin-right (not a text space) is the inter-word gap: an inline-block
           collapses its own trailing whitespace, which ran the words together. */
        .mlp-tp-word { display: inline-block; margin-right: 0.26em; }
        .mlp-tp-word:last-child { margin-right: 0; }
        .mlp-tp-line { display: block; }
        /* Large desktop: two columns. Eyebrow + stacked headline on the left,
           the rule + subhead on the right, sitting on the headline's baseline. */
        @media (min-width: 1200px) {
          .mlp-tp-head {
            max-width: none;
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            grid-template-areas: "eyebrow ." "headline aside";
            column-gap: clamp(56px, 7vw, 128px);
            align-items: end;
          }
          .mlp-tp-head > .mlp-tp-eyebrow { grid-area: eyebrow; justify-self: start; }
          .mlp-tp-head > .mlp-tp-headline { grid-area: headline; max-width: none; }
          .mlp-tp-head > .mlp-tp-aside { grid-area: aside; padding-bottom: 0.5em; }
          .mlp-tp-aside > .mlp-tp-rule { margin-top: 0; }
          .mlp-tp-aside > .mlp-tp-sub { max-width: 46ch; }
        }
        .mlp-tp-word-accent { color: #7C6FF0; }
        .mlp-tp-rule {
          height: 2px;
          width: min(300px, 52%);
          margin: 26px 0 0;
          border-radius: 2px;
          transform-origin: left center;
          background: #7C6FF0;
          opacity: 0.85;
        }
        .mlp-tp-sub {
          margin: 22px 0 0;
          max-width: 760px;
          font-family: Poppins, system-ui, sans-serif;
          font-size: clamp(1rem, 0.72vw + 0.84rem, 1.24rem);
          line-height: 1.66;
          color: var(--mel-text-secondary);
        }
        @media (prefers-reduced-motion: reduce) {
          .mlp-tp-eyebrow-dot { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, #22D3EE 26%, transparent); }
          .mlp-tp-rule { transform: none !important; }
        }

        /* ── Stacking sheets ─────────────────────────────────────────────
           Each product is a full-bleed sheet, alternating light / deep. On
           desktop every sheet sticks to the top at exactly one viewport tall,
           so the next sheet slides over it (28px peek of its rounded top
           edge) while the covered one recedes and dims, all on native
           scroll-driven animations (no JS). Everything inside a sheet is
           sized to fit that one screen. */
        .mlp-sheets { position: relative; }
        .mlp-snaps { display: none; }
        .mlp-sheet {
          position: relative;
          border-radius: 28px 28px 0 0;
          overflow: clip;
          padding: 88px clamp(18px, 4vw, 64px) 44px;
          transform-origin: 50% 0;
        }
        .mlp-sheet + .mlp-sheet { margin-top: -28px; }
        .mlp-sheet--light {
          background: var(--background);
          box-shadow: 0 -1px 0 var(--mlp-product-border), 0 -30px 60px -40px rgba(11,21,48,0.45);
        }
        .mlp-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141B2B 46%, #0C1017 100%);
          color: #E6ECF5;
          box-shadow: 0 -30px 60px -30px rgba(11,21,48,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        .mlp-sheet::after {
          content: "";
          position: absolute;
          inset: 0;
          background: #0C1017;
          opacity: 0;
          pointer-events: none;
          z-index: 3;
        }
        .mlp-sheet-in {
          position: relative;
          z-index: 1;
          max-width: 1280px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: minmax(0, 0.98fr) minmax(420px, 1.02fr);
          align-items: center;
          gap: clamp(34px, 5.6vw, 86px);
        }
        /* Alternate sides by an explicit class (deep sheets put the visual on
           the left). */
        .mlp-sheet--flip .mlp-product-copy { order: 2; }
        .mlp-sheet--flip .mlp-product-visual { order: 1; }
        /* One copy width on every sheet (the body and points cap at 560px),
           and on flipped sheets the block sits against the outer edge, so the
           spare column width always falls between text and visual: the same
           breathing room whichever side the text is on. */
        .mlp-product-copy { position: relative; z-index: 2; width: 100%; max-width: 560px; }
        .mlp-sheet--flip .mlp-product-copy { justify-self: end; }
        .mlp-product-visual { min-width: 0; }
        .mlp-product-visual--assistant .mlp-assistant-hero-console {
          width: min(570px, 100%);
        }
        @media (min-width: 1024px) and (min-height: 600px) {
          /* Magnet: no CSS snap (switching mandatory snap on/off mid-scroll
             made the browser re-snap mid-gesture: the "glitch"). A mouse-wheel
             notch pages one sheet and trackpads settle gently at scroll end
             (useSheetWheelPaging). These markers are the resting positions:
             one per sheet, an exit past the last one, and an up-exit. */
          .mlp-snaps { display: block; position: absolute; inset: 0; pointer-events: none; }
          .mlp-snaps i {
            position: absolute; left: 0; width: 1px; height: 1px;
            top: calc(var(--k) * (100svh - 28px));
          }
          /* Way out upwards: 70% of a screen above the stack, outside the zone
             where snapping is on, so reaching it releases the page. */
          .mlp-snaps i.up { top: -70svh; }
          .mlp-sheet { position: sticky; top: 0; height: 100svh; }
          .mlp-sheet-in { height: 100%; }
          /* A sheet buried under the next two (ProductRail marks it) skips its
             whole subtree: no style, layout, paint or animation ticks, and its
             observers see it as off-screen (typing loop, video pause). */
          .mlp-sheet[data-covered] > .mlp-sheet-in { content-visibility: hidden; }
          /* The consoles keep their design; they scale down as one unit on
             shorter screens so a sheet always fits the viewport. */
          .mlp-sheet .mlp-scene-visual { zoom: 1; }
        }
        @media (min-width: 1024px) and (min-height: 600px) and (max-height: 900px) { .mlp-sheet .mlp-scene-visual { zoom: 0.92; } }
        @media (min-width: 1024px) and (min-height: 600px) and (max-height: 800px) { .mlp-sheet .mlp-scene-visual { zoom: 0.82; } }
        @media (min-width: 1024px) and (min-height: 600px) and (max-height: 700px) { .mlp-sheet .mlp-scene-visual { zoom: 0.72; } }
        @supports (animation-timeline: view()) {
          @media (min-width: 1024px) and (min-height: 600px) {
            .mlp-sheets { timeline-scope: --mlps-1, --mlps-2, --mlps-3, --mlps-4, --mlps-5, --mlps-6; }
            .mlp-sheet { view-timeline-name: var(--mlp-sheet-self); view-timeline-axis: block; }
            /* The range starts 40px into the next sheet's entry: at rest the
               next sheet already overlaps this one by 28px, and a sheet held at
               scale 0.998 is rasterised soft (blurry text). Resting = exactly 1. */
            .mlp-sheet--has-next {
              animation: mlp-sheet-recede linear both;
              animation-timeline: var(--mlp-sheet-next);
              animation-range: entry 40px entry 100%;
            }
            .mlp-sheet--has-next::after {
              animation: mlp-sheet-dim linear both;
              animation-timeline: var(--mlp-sheet-next);
              animation-range: entry 40px entry 100%;
            }
          }
        }
        /* Transform only, so the recede stays on the compositor (a covered
           sheet is skipped by data-covered instead of visibility). */
        @keyframes mlp-sheet-recede { to { transform: scale(0.94); } }
        @keyframes mlp-sheet-dim { to { opacity: 0.5; } }
        @media (prefers-reduced-motion: reduce) {
          .mlp-sheet--has-next, .mlp-sheet--has-next::after { animation: none !important; }
        }
        /* Dark mode keeps the same white / deep alternation as light mode: the
           light sheets are porcelain (light tokens scoped on), sliding over
           the deep ones with a darker contact shadow. */

        html.dark .mlp-sheet--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 .mlp-sheet--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 .mlp-sheet--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 .mlp-sheet--light .mlp-assistant-window-compose { box-shadow: inset 0 1px 3px rgba(15,23,42,.06); }
        html.dark .mlp-sheet--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 .mlp-sheet--light .mlp-assistant-workarea .mlp-assistant-chart { box-shadow: none; }

        html.dark .mlp-sheet--light {
          background: #F8FAFC;
          box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.9);
        }
        html.dark .mlp-sheet--deep {
          background: radial-gradient(135% 115% at 50% -12%, #151C2C 0%, #0C111B 48%, #07090F 100%);
          box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        /* Text and visual share the width evenly (the visuals cap their own width). */
        .mlp-sheet-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); }
        /* One visual box for all six products: the full visual column wide and
           --vis-h tall. Each visual is scaled to fill it, so the six read as one
           set: the laptop and phones by height, the console cards by width
           (zoom keeps their text crisp: it re-lays out, it does not resample). */
        .mlp-sheet { --vis-h: min(560px, calc(100svh - 250px)); }
        .mlp-sheet .mlp-scene-visual { display: grid; place-items: center; min-height: var(--vis-h); }
        .mlp-vis-fit { margin: 0 auto; }
        /* The halo's radial gradient already fades out: the 28px blur on a
           ~540x420 drifting layer was a GPU filter pass per frame for nothing. */
        .mlp-sheet .mlp-assistant-hero-halo { filter: none; }
        /* zoom multiplies px lengths but NOT percentages, so the width is a px
           size (zoomed) clamped by 100% (unzoomed) of the column. */
        /* Browser = same outer box as Assistant and Marketing: 528px x 1.3
           renders the same 686px cap as 660px x 1.04, and the card takes their
           ~1.09 aspect, its page view stretching to fill the extra height. */
        .mlp-vis-fit--browser { width: min(528px, 100%); zoom: 1.3; }
        /* The console has a real minimum content width, so a fixed 1.3 zoom
           spilled into the text column on narrower screens. Step the zoom down
           with the width the visual column actually has (container query on
           the column, not the viewport). */
        .mlp-sheet .mlp-scene-visual { container-type: inline-size; }
        @container (max-width: 700px) { .mlp-vis-fit--browser { zoom: 1.15; } }
        @container (max-width: 600px) { .mlp-vis-fit--browser { zoom: 1; } }
        @container (max-width: 500px) { .mlp-vis-fit--browser { zoom: 0.88; } }
        @container (max-width: 430px) { .mlp-vis-fit--browser { zoom: 0.78; } }
        .mlp-sheet .mlp-vis-fit--browser .mlp-tp-browser { aspect-ratio: 1.09; display: flex; flex-direction: column; }
        .mlp-sheet .mlp-vis-fit--browser .mlp-tp-browser-view { flex: 1; display: flex; flex-direction: column; }
        .mlp-sheet .mlp-vis-fit--browser .mlp-tp-browser-view > div:first-of-type { flex: 1; justify-content: space-evenly; }
        .mlp-vis-fit--assistant { width: min(660px, 100%); zoom: 1.04; }
        .mlp-vis-fit--marketing { width: min(660px, 100%); zoom: 1.04; }
        .mlp-sheet .mlp-mcpflow { width: min(760px, 100%); }
        /* Bigger content in every stage. Laptop: wider body, 16:9 screen
           filled edge to edge by the 1600x818 builder capture. */
        .mlp-sheet .mlp-laptop-rig { width: 100%; }
        .mlp-sheet .mlp-laptop-device { width: 100%; }
        .mlp-sheet .mlp-laptop-lid-shell { width: 94%; }
        .mlp-sheet .mlp-laptop-deck { width: 96%; }
        .mlp-sheet .mlp-laptop-screen { aspect-ratio: 16 / 9; }
        .mlp-sheet .mlp-laptop-screen img { object-fit: cover; object-position: left top; padding: 0; border-radius: 9px; }
        /* Phones: the pair is staggered +/-18px (PhoneFrame y offset), a
           transform the plate cannot see, so the rig pads for it. Width is
           also capped by height so two tall phones always fit the sheet. */
        .mlp-sheet .mlp-phone-rig { min-height: 0; gap: clamp(20px, 3vw, 48px); padding-block: 24px; }
        .mlp-sheet .mlp-phone-card { width: min(260px, 18vw, calc((100svh - 300px) / 2.45)); }
        .mlp-sheet .mlp-product-visual--assistant .mlp-assistant-hero-console { width: min(660px, 100%); }
        .mlp-product-title-row {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          flex-wrap: wrap;
        }
        .mlp-products-waitlist:hover { color: var(--mel-text-primary); }

        /* Visual stage: a plain layout box. No plate: each visual is already
           its own object (laptop, phones, console card, flow), so a container
           around it would only double the frame. */
        .mlp-device-stage { position: relative; display: grid; place-items: center; width: 100%; }

        /* Feature caption: one aligned, centred monospace row in normal flow BELOW
           each device (never overlapping it), replacing the scattered pills. */
        .mlp-visual-caption {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 8px 24px;
          margin-top: 6px;
          pointer-events: none;
          font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--mel-text-tertiary);
        }
        .mlp-visual-caption span { display: inline-flex; align-items: center; gap: 9px; }
        .mlp-sheet--deep .mlp-visual-caption { color: rgba(230,236,245,0.55); }
        .mlp-visual-caption span::before {
          content: "";
          width: 5px; height: 5px;
          border-radius: 50%;
          background: var(--chip-accent);
          box-shadow: 0 0 7px var(--chip-accent);
        }

        .mlp-laptop-rig,
        .mlp-phone-rig,
        .mlp-assistant-rig,
        .mlp-terminal-rig {
          position: relative;
          width: min(850px, 100%);
          z-index: 2;
        }
        .mlp-laptop-screen img,
        .mlp-phone-screen img,
        .mlp-terminal-screen img {
          width: 100%;
          height: 100%;
          display: block;
          box-sizing: border-box;
          object-position: center center;
        }
        .mlp-laptop-screen img {
          object-fit: contain;
          padding: 2px;
          border-radius: 9px;
          background:
            radial-gradient(circle at 18% 12%, rgba(124,111,240,0.10), transparent 32%),
            linear-gradient(180deg, #060913, #04060D);
        }
        .mlp-phone-screen img {
          /* Full-bleed: the screenshot fills the screen edge to edge (no letterbox
             side bands). object-position center keeps the status bar + bottom nav
             visible; the screen's overflow:hidden clips to the rounded corners. */
          object-fit: cover;
          object-position: center;
          padding: 0;
          border-radius: inherit;
          background: #060913;
        }
        .mlp-phone-card.android .mlp-phone-screen img {
          padding: 0;
          border-radius: inherit;
        }
        .mlp-terminal-screen img {
          width: 100%;
          height: auto;
          display: block;
          object-fit: contain;
          padding: 3px;
          border-radius: 20px;
          background:
            radial-gradient(circle at 18% 12%, rgba(16,185,129,0.16), transparent 32%),
            linear-gradient(180deg, #050816, #020617);
        }
        .mlp-screen-glass {
          position: absolute;
          inset: 0;
          border-radius: inherit;
          background:
            linear-gradient(118deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 30%, transparent 46%, transparent 100%),
            radial-gradient(135% 105% at 50% 0%, transparent 78%, rgba(2,6,23,0.16) 100%);
          box-shadow:
            0 0 0 1px rgba(255,255,255,0.05) inset,
            0 1px 8px rgba(2,6,23,0.28) inset;
          pointer-events: none;
        }
        .mlp-screen-sheen {
          position: absolute;
          inset: 0;
          z-index: 2;
          pointer-events: none;
          background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.05) 46%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 54%, transparent 64%);
          transform: translateX(-45%);
          animation: mlp-sheen 8s ease-in-out infinite;
        }
        @keyframes mlp-sheen {
          0%, 60% { opacity: 0; transform: translateX(-45%); }
          70% { opacity: 0.5; }
          86% { opacity: 0.3; }
          100% { opacity: 0; transform: translateX(48%); }
        }

        /* Landing-scoped shadow for the assistant hero console: one static
           neumorphic raised shadow (neoCard raised) on the console window,
           replacing the product page's oversized ambient drop. Theme picked
           by the is-light flag on the stage wrapper. */
        .mlp-assistant-stagewrap .mlp-assistant-window {
          box-shadow: 0 24px 52px -18px rgba(0,0,0,0.92), 8px 8px 22px rgba(0,0,0,0.5), -5px -5px 16px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.09), 0 0 0 1px rgba(255,255,255,0.045);
        }
        .mlp-assistant-stagewrap.is-light .mlp-assistant-window {
          box-shadow: 0 22px 44px -16px rgba(15,23,42,0.32), 7px 7px 17px rgba(15,23,42,0.12), -6px -6px 16px rgba(255,255,255,0.98);
        }

        /* Assistant product preview. This is deliberately an operating
           workspace, not another generic chat bubble. The visual shows the
           three things buyers need to understand at a glance: selected
           systems, a governed answer, and inspectable execution evidence. */
        .mlp-assistant-rig {
          position: relative;
          width: min(860px, 100%);
          z-index: 2;
        }
        .mlp-tp-assistant-console {
          position: relative;
          overflow: hidden;
          min-height: 470px;
          border-radius: 28px;
          border: 1px solid rgba(148,163,184,0.20);
          background:
            radial-gradient(circle at 12% 0%, rgba(34,211,238,0.10), transparent 30%),
            radial-gradient(circle at 100% 100%, rgba(139,92,246,0.12), transparent 34%),
            rgba(5,8,18,0.96);
          box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 36px 88px -28px rgba(2,6,23,0.78),
            0 22px 70px -38px var(--accent-a);
          color: #F8FAFC;
        }
        .mlp-tp-assistant-console::after {
          content: "";
          position: absolute;
          inset: 0;
          pointer-events: none;
          background: linear-gradient(118deg, rgba(255,255,255,0.035), transparent 24%, transparent 72%, rgba(255,255,255,0.02));
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-console {
          color: #0F172A;
          border-color: rgba(15,23,42,0.13);
          background:
            radial-gradient(circle at 12% 0%, rgba(34,211,238,0.13), transparent 30%),
            radial-gradient(circle at 100% 100%, rgba(139,92,246,0.11), transparent 34%),
            rgba(248,250,252,0.98);
          box-shadow:
            0 1px 0 rgba(255,255,255,0.92) inset,
            0 34px 76px -32px rgba(15,23,42,0.26),
            0 20px 58px -38px var(--accent-a);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-console::after {
          background: linear-gradient(118deg, rgba(255,255,255,0.38), transparent 28%, transparent 72%, rgba(15,23,42,0.025));
        }
        .mlp-tp-assistant-top {
          position: relative;
          z-index: 1;
          min-height: 66px;
          padding: 13px 17px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
          border-bottom: 1px solid rgba(148,163,184,0.13);
          background: rgba(8,12,24,0.70);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-top {
          border-bottom-color: rgba(15,23,42,0.09);
          background: rgba(255,255,255,0.76);
        }
        .mlp-tp-assistant-brand,
        .mlp-tp-assistant-state,
        .mlp-tp-assistant-policy,
        .mlp-tp-assistant-tool,
        .mlp-tp-assistant-trace,
        .mlp-tp-assistant-compose {
          display: flex;
          align-items: center;
        }
        .mlp-tp-assistant-brand { gap: 11px; min-width: 0; }
        .mlp-tp-assistant-brand > img {
          width: 38px;
          height: 38px;
          object-fit: contain;
          flex: 0 0 auto;
          filter: drop-shadow(0 9px 18px rgba(34,211,238,0.18));
        }
        .mlp-tp-assistant-brand div { min-width: 0; display: grid; gap: 3px; }
        .mlp-tp-assistant-brand strong {
          font: 700 13px/1.15 Poppins, system-ui, sans-serif;
          letter-spacing: -0.01em;
          white-space: nowrap;
        }
        .mlp-tp-assistant-brand small,
        .mlp-tp-assistant-state,
        .mlp-tp-assistant-policy span,
        .mlp-tp-assistant-tool b,
        .mlp-tp-assistant-trace,
        .mlp-tp-assistant-compose {
          font: 650 8.5px/1.25 'JetBrains Mono', ui-monospace, monospace;
          letter-spacing: 0.09em;
          text-transform: uppercase;
        }
        .mlp-tp-assistant-brand small { color: rgba(203,213,225,0.50); }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-brand strong { color: #0F172A; }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-brand small { color: rgba(51,65,85,0.58); }
        .mlp-tp-assistant-state { gap: 7px; color: #A7F3D0; white-space: nowrap; }
        .mlp-tp-assistant-state i,
        .mlp-tp-assistant-trace > i {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #10B981;
          box-shadow: 0 0 10px rgba(16,185,129,0.72);
        }
        .mlp-tp-assistant-policy {
          position: relative;
          z-index: 1;
          min-height: 42px;
          padding: 8px 17px;
          gap: 8px;
          border-bottom: 1px solid rgba(148,163,184,0.11);
          background: rgba(15,23,42,0.38);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-policy {
          border-bottom-color: rgba(15,23,42,0.08);
          background: rgba(241,245,249,0.70);
        }
        .mlp-tp-assistant-policy span {
          padding: 6px 9px;
          border-radius: 999px;
          border: 1px solid rgba(148,163,184,0.17);
          color: rgba(226,232,240,0.70);
          background: rgba(15,23,42,0.62);
        }
        .mlp-tp-assistant-policy span:first-child {
          color: #C4B5FD;
          border-color: rgba(167,139,250,0.30);
          background: rgba(139,92,246,0.10);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-policy span {
          color: rgba(30,41,59,0.70);
          border-color: rgba(15,23,42,0.11);
          background: rgba(255,255,255,0.70);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-policy span:first-child {
          color: #6D28D9;
          border-color: rgba(109,40,217,0.22);
          background: rgba(139,92,246,0.08);
        }
        .mlp-tp-assistant-body {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: minmax(145px, 0.34fr) minmax(0, 1fr);
          min-height: 360px;
        }
        .mlp-tp-assistant-tools {
          padding: 17px 13px;
          display: grid;
          align-content: start;
          gap: 9px;
          border-right: 1px solid rgba(148,163,184,0.11);
          background: rgba(3,6,15,0.40);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tools {
          border-right-color: rgba(15,23,42,0.08);
          background: rgba(241,245,249,0.56);
        }
        .mlp-tp-assistant-tools > small {
          margin: 1px 3px 5px;
          color: rgba(148,163,184,0.52);
          font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace;
          letter-spacing: 0.15em;
          text-transform: uppercase;
        }
        .mlp-tp-assistant-tool {
          min-width: 0;
          gap: 9px;
          padding: 10px 9px;
          border-radius: 13px;
          border: 1px solid rgba(148,163,184,0.12);
          background: rgba(15,23,42,0.54);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tools > small { color: rgba(51,65,85,0.58); }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tool {
          border-color: rgba(15,23,42,0.09);
          background: rgba(255,255,255,0.74);
          box-shadow: 0 8px 22px -18px rgba(15,23,42,0.24);
        }
        .mlp-tp-assistant-tool > img {
          width: 25px;
          height: 25px;
          flex: 0 0 auto;
          border-radius: 7px;
          object-fit: contain;
          background: rgba(255,255,255,0.94);
          padding: 3px;
        }
        .mlp-tp-assistant-tool div { min-width: 0; display: grid; gap: 3px; }
        .mlp-tp-assistant-tool strong {
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgba(248,250,252,0.88);
          font: 600 9.5px/1.2 Poppins, system-ui, sans-serif;
          white-space: nowrap;
        }
        .mlp-tp-assistant-tool b { color: rgba(34,211,238,0.66); font-size: 7px; }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tool strong { color: rgba(15,23,42,0.86); }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tool b { color: #0E7490; }
        .mlp-tp-assistant-conversation {
          min-width: 0;
          padding: 22px 21px 17px;
          display: flex;
          flex-direction: column;
          gap: 13px;
        }
        .mlp-tp-assistant-user,
        .mlp-tp-assistant-answer {
          margin: 0;
          border-radius: 16px;
          font-family: Poppins, system-ui, sans-serif;
        }
        .mlp-tp-assistant-user {
          max-width: 84%;
          align-self: flex-end;
          padding: 11px 13px;
          border: 1px solid rgba(34,211,238,0.24);
          background: rgba(34,211,238,0.08);
          color: rgba(240,249,255,0.88);
          font-size: 10.5px;
          line-height: 1.5;
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-user {
          border-color: rgba(8,145,178,0.20);
          background: rgba(6,182,212,0.08);
          color: #164E63;
        }
        .mlp-tp-assistant-answer {
          padding: 13px 14px;
          border-left: 2px solid #8B5CF6;
          background: rgba(139,92,246,0.08);
          color: rgba(248,250,252,0.88);
          font-size: 11px;
          line-height: 1.55;
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-answer {
          background: rgba(139,92,246,0.07);
          color: #312E81;
        }
        .mlp-tp-assistant-trace {
          gap: 8px;
          padding: 9px 10px;
          border-radius: 12px;
          border: 1px solid rgba(148,163,184,0.12);
          color: rgba(203,213,225,0.62);
          background: rgba(2,6,23,0.44);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-trace {
          border-color: rgba(15,23,42,0.10);
          color: rgba(51,65,85,0.68);
          background: rgba(255,255,255,0.68);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-trace em { color: #6D28D9; }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-trace b { color: #047857; }
        .mlp-tp-assistant-trace > i { width: 6px; height: 6px; }
        .mlp-tp-assistant-trace b { margin-left: auto; color: #A7F3D0; font-weight: 700; }
        .mlp-tp-assistant-trace em { color: #C4B5FD; font-style: normal; }
        .mlp-tp-assistant-compose {
          min-height: 39px;
          margin-top: auto;
          padding: 0 12px;
          justify-content: space-between;
          gap: 10px;
          border-radius: 13px;
          border: 1px solid rgba(148,163,184,0.16);
          color: rgba(148,163,184,0.58);
          background: rgba(15,23,42,0.46);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-compose {
          border-color: rgba(15,23,42,0.11);
          color: rgba(51,65,85,0.54);
          background: rgba(255,255,255,0.74);
        }
        .mlp-tp-assistant-compose i {
          width: 24px;
          height: 24px;
          display: grid;
          place-items: center;
          border-radius: 8px;
          color: #061018;
          background: #22D3EE;
          font: 900 12px/1 Poppins, system-ui, sans-serif;
          font-style: normal;
        }

        /* ── Assistant console — LIVE animation layer ─────────────────────────
           Typewriter overlay, blinking caret, thinking dots, and per-tile
           sequencing. All cheap CSS; the JS only writes textContent + toggles
           class names at threshold crossings. */
        .mlp-tp-assistant-answer { position: relative; }
        /* Sizer holds the real answer text (in the a11y/SEO tree) but is
           invisible; it reserves the exact final height so nothing reflows. */
        .mlp-tp-assistant-answer-sizer { visibility: hidden; }
        .mlp-tp-assistant-answer-typed {
          position: absolute;
          inset: 13px 14px;
          display: block;
        }
        .mlp-tp-assistant-caret {
          display: inline-block;
          width: 1.5px;
          height: 0.96em;
          margin-left: 2px;
          vertical-align: -0.12em;
          background: #A78BFA;
          animation: mlp-tp-caret 0.9s steps(1) infinite;
        }
        @keyframes mlp-tp-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
        .mlp-tp-assistant-think {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          padding-top: 3px;
        }
        .mlp-tp-assistant-think i {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: #A78BFA;
          opacity: 0.3;
          animation: mlp-tp-think 1.25s ease-in-out infinite;
        }
        .mlp-tp-assistant-think i:nth-child(2) { animation-delay: 0.16s; }
        .mlp-tp-assistant-think i:nth-child(3) { animation-delay: 0.32s; }
        @keyframes mlp-tp-think {
          0%, 20% { opacity: 0.25; transform: translateY(0); }
          50% { opacity: 1; transform: translateY(-2px); }
          80%, 100% { opacity: 0.25; transform: translateY(0); }
        }

        /* Tool tiles: appear one-by-one (is-off → is-on), then check (is-done). */
        .mlp-tp-assistant-tool {
          transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.35s ease, background-color 0.35s ease;
        }
        .mlp-tp-assistant-tool.is-off { opacity: 0.32; transform: translateX(-6px); }
        .mlp-tp-assistant-tool.is-on { opacity: 1; transform: translateX(0); }
        .mlp-tp-assistant-tool.is-on:not(.is-done) {
          border-color: rgba(139,92,246,0.42);
          background: rgba(139,92,246,0.10);
        }
        .mlp-assistant-rig.is-light .mlp-tp-assistant-tool.is-on:not(.is-done) {
          border-color: rgba(139,92,246,0.30);
          background: rgba(139,92,246,0.08);
        }
        .mlp-tp-assistant-tool-flag {
          margin-left: auto;
          flex: 0 0 auto;
          display: grid;
          place-items: center;
          width: 15px;
          height: 15px;
          color: #34D399;
          font: 900 11px/1 Poppins, system-ui, sans-serif;
          font-style: normal;
        }
        .mlp-tp-assistant-tool:not(.is-done) .mlp-tp-assistant-tool-flag { color: transparent; }
        .mlp-tp-assistant-tool-spin {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 1.5px solid rgba(139,92,246,0.28);
          border-top-color: #8B5CF6;
          animation: mlp-tp-spin 0.8s linear infinite;
        }
        @keyframes mlp-tp-spin { to { transform: rotate(360deg); } }
        /* While the run is still executing, the trace + approval read as pending. */
        .mlp-tp-assistant-trace.is-pending { opacity: 0.5; }
        .mlp-tp-assistant-trace { transition: opacity 0.45s ease; }

        @media (prefers-reduced-motion: reduce) {
          .mlp-tp-assistant-caret,
          .mlp-tp-assistant-think i,
          .mlp-tp-assistant-tool-spin { animation: none; }
          .mlp-tp-assistant-tool { transition: none; }
        }

        .mlp-phone-rig {
          min-height: 570px;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(18px, 3vw, 44px);
        }
        .mlp-phone-card {
          position: relative;
          width: min(210px, 40vw);
          padding: 8px;
          border-radius: 26px;
          background:
            linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 26%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.05)),
            linear-gradient(180deg, #3B4250 0%, #232937 44%, #10141D 100%);
          border: 1px solid rgba(255,255,255,0.16);
          /* Static neumorphic raised shadow (neoCard raised, dark: the phone
             hardware is dark in both themes). Bezel insets kept. */
          box-shadow:
            0 1px 0 rgba(255,255,255,0.22) inset,
            0 -1px 0 rgba(0,0,0,0.58) inset,
            0 24px 52px -18px rgba(0,0,0,0.92),
            8px 8px 22px rgba(0,0,0,0.5),
            -5px -5px 16px rgba(255,255,255,0.05),
            0 0 0 1px rgba(255,255,255,0.045);
        }
        .mlp-phone-card.android {
          border-radius: 30px;
          background:
            linear-gradient(160deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02) 26%, rgba(255,255,255,0) 64%, rgba(255,255,255,0.04)),
            linear-gradient(180deg, #2E3440 0%, #1B202A 46%, #0B0E15 100%);
        }
        .mlp-phone-card.primary { z-index: 4; }
        .mlp-phone-card.secondary { z-index: 3; }
        .mlp-phone-screen {
          position: relative;
          overflow: hidden;
          /* Each phone's screen matches its screenshot's exact aspect ratio, so the
             image fills edge to edge with NO crop and NO letterbox bands. iPhone =
             my-pipelines.png (366x850); Android override below = assistant.jpeg. */
          aspect-ratio: 366 / 850;
          border-radius: 20px;
          background: #05070D;
          border: 1px solid rgba(255,255,255,0.05);
          box-shadow:
            0 0 0 1px rgba(2,6,23,0.85) inset,
            0 2px 10px rgba(0,0,0,0.45) inset;
        }
        .mlp-phone-card.android .mlp-phone-screen { border-radius: 24px; aspect-ratio: 930 / 2048; }
        .mlp-phone-island,
        .mlp-phone-hole,
        .mlp-phone-home {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(2,6,23,0.96);
          z-index: 3;
        }
        .mlp-phone-island {
          top: 10px;
          width: 62px;
          height: 18px;
          border-radius: 999px;
          box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;
        }
        .mlp-phone-hole {
          top: 12px;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          border: 1px solid rgba(255,255,255,0.12);
          box-shadow: 0 0 0 2px rgba(2,6,23,0.45);
        }
        .mlp-phone-home {
          bottom: 8px;
          width: 62px;
          height: 4px;
          border-radius: 999px;
          background: rgba(255,255,255,0.55);
        }
        .mlp-phone-button {
          position: absolute;
          width: 3px;
          border-radius: 2px;
          background: linear-gradient(180deg, #4C5464, #232937);
          box-shadow: 0 1px 2px rgba(0,0,0,0.35);
        }
        .mlp-phone-button.left { left: -3px; top: 92px; height: 56px; }
        .mlp-phone-button.right { right: -3px; top: 126px; height: 74px; }
        .mlp-phone-label {
          position: absolute;
          left: 18%;
          right: 18%;
          bottom: -17px;
          min-height: 29px;
          display: grid;
          place-items: center;
          border-radius: 999px;
          background: rgba(4,7,15,0.72);
          border: 1px solid rgba(148,163,184,0.28);
          backdrop-filter: blur(13px) saturate(150%);
          color: rgba(255,255,255,0.92);
          font: 700 9px/1 Poppins, system-ui, sans-serif;
          letter-spacing: 0.13em;
          text-transform: uppercase;
          z-index: 6;
          box-shadow: 0 10px 24px rgba(2,6,23,0.35);
          pointer-events: none;
        }
        .mlp-phone-reflection {
          position: absolute;
          inset: 0;
          z-index: 2;
          border-radius: inherit;
          background:
            linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 26%, transparent 44%, transparent 100%),
            radial-gradient(130% 100% at 50% 0%, transparent 80%, rgba(2,6,23,0.15) 100%);
          box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
          pointer-events: none;
        }

        .mlp-terminal-rig { padding: 4% 0 9%; }
        .mlp-terminal-device {
          position: relative;
          width: min(955px, 120%);
          left: 50%;
          transform: translateX(-50%);
          margin: 0 auto;
          padding: 8px;
          border-radius: 30px;
          overflow: hidden;
          background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(203,213,225,0.92) 45%, rgba(15,23,42,0.95));
          border: 1px solid rgba(255,255,255,0.34);
          box-shadow: 0 44px 110px rgba(15,23,42,0.34), 0 1px 0 rgba(255,255,255,0.70) inset;
          transform-style: preserve-3d;
        }
        .mlp-terminal-device.dark {
          background: linear-gradient(145deg, rgba(30,41,59,0.98), rgba(15,23,42,1) 52%, rgba(2,6,23,1));
          border-color: rgba(255,255,255,0.12);
          box-shadow: 0 46px 118px rgba(0,0,0,0.56), 0 1px 0 rgba(255,255,255,0.12) inset;
        }
        .mlp-terminal-screen {
          position: relative;
          overflow: hidden;
          border-radius: 22px;
          background: #020308;
          border: 1px solid rgba(255,255,255,0.10);
        }
        .mlp-terminal-overlay {
          position: absolute;
          inset: auto 14px 14px;
          display: grid;
          gap: 8px;
          z-index: 3;
        }
        .mlp-terminal-title-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
        }
        .mlp-terminal-title {
          color: #FFFFFF;
          font: 900 10px/1 Poppins, system-ui, sans-serif;
          letter-spacing: 0.16em;
          text-transform: uppercase;
        }
        .mlp-terminal-soon {
          flex: 0 0 auto;
          border-radius: 999px;
          border: 1px solid var(--accent-soon);
          background: rgba(2,3,8,0.64);
          color: var(--accent-text);
          padding: 5px 7px;
          font: 900 8px/1 JetBrains Mono, monospace;
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .mlp-terminal-rows { display: grid; gap: 7px; }
        .mlp-terminal-row {
          display: grid;
          grid-template-columns: 42px 1fr;
          gap: 8px;
          align-items: center;
          padding: 8px 10px;
          border-radius: 12px;
          border: 1px solid rgba(255,255,255,0.10);
          background: rgba(2,3,8,0.50);
          color: #FFFFFF;
          font: 500 11px/1.35 Poppins, system-ui, sans-serif;
          backdrop-filter: blur(12px);
        }
        .mlp-terminal-row.hot { background: var(--accent-hot); }
        .mlp-terminal-row code {
          color: rgba(255,255,255,0.58);
          font: 900 8px/1 JetBrains Mono, monospace;
        }
        .mlp-terminal-row.hot code { color: var(--accent-text); }

        @media (max-width: 920px) {
          .mlp-sheet-in {
            grid-template-columns: 1fr;
            gap: 24px;
          }
          .mlp-sheet--flip .mlp-product-copy,
          .mlp-sheet--flip .mlp-product-visual { order: initial; }
          .mlp-sheet--flip .mlp-product-copy { justify-self: start; }
          .mlp-sheet--flip .mlp-sheet-in { grid-template-columns: 1fr; }
          .mlp-visual-caption { font-size: 9px; letter-spacing: 0.16em; gap: 6px 16px; }
          .mlp-phone-rig { min-height: 520px; gap: clamp(12px, 2vw, 24px); }
          .mlp-phone-card { width: min(172px, 40vw); }
          .mlp-assistant-rig { width: min(820px, 100%); }
        }
        @media (max-width: 560px) {
          .mlp-laptop-deck { min-height: 84px; padding-top: 16px; }
          .mlp-keyboard-grid { gap: 3px; }
          .mlp-key { height: 6px; }
          .mlp-trackpad { height: 16px; }
          .mlp-phone-card { width: min(190px, 46vw); }
          .mlp-phone-card.secondary { margin-left: -52px; }
          .mlp-phone-rig { min-height: 430px; }
          .mlp-phone-label { left: 14%; right: 14%; bottom: -15px; font-size: 8px; min-height: 26px; }
          .mlp-phone-screen img { padding: 27px 6px 22px; }
          .mlp-phone-card.android .mlp-phone-screen img { padding: 22px 6px 19px; }
        }

        /* Mobile-only screenshot frame: inert on desktop. */
        .mlp-tp-mshot { display: none; }
        .mlp-tp-assistant-mshot { color: #F8FAFC; }
        .mlp-tp-assistant-mobile-top,
        .mlp-tp-assistant-mobile-scope,
        .mlp-tp-assistant-mobile-answer,
        .mlp-tp-assistant-mobile-trace { display: flex; align-items: center; }
        .mlp-tp-assistant-mobile-top { gap: 8px; }
        .mlp-tp-assistant-mobile-top > img {
          width: 26px !important;
          height: 26px !important;
          object-fit: contain !important;
        }
        .mlp-tp-assistant-mobile-top strong { font: 700 11px/1 Poppins, system-ui, sans-serif; }
        .mlp-tp-assistant-mobile-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); }
        .mlp-tp-assistant-mobile-scope { gap: 5px; }
        .mlp-tp-assistant-mobile-scope span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,0.96); }
        .mlp-tp-assistant-mobile-scope span > img { width: 17px !important; height: 17px !important; object-fit: contain !important; }
        .mlp-tp-assistant-mobile-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; }
        .mlp-tp-assistant-mshot > p { 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; }
        .mlp-tp-assistant-mobile-answer { align-items: flex-start; gap: 8px; padding: 10px; border-radius: 12px; border-left: 2px solid #8B5CF6; background: rgba(139,92,246,0.09); }
        .mlp-tp-assistant-mobile-answer > span { color: #C4B5FD; font: 800 7px/1.4 'JetBrains Mono', monospace; }
        .mlp-tp-assistant-mobile-answer > p { margin: 0; color: rgba(248,250,252,0.86); font: 500 8.5px/1.45 Poppins, system-ui, sans-serif; }
        .mlp-tp-assistant-mobile-trace { 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; }
        .mlp-tp-assistant-mobile-trace > i { width: 6px; height: 6px; border-radius: 50%; background: #10B981; }
        .mlp-tp-assistant-mobile-trace b { margin-left: auto; color: #C4B5FD; font-weight: 700; }

        /* ============================================================
           MOBILE REBUILD (<= 767px). Desktop above this breakpoint is
           untouched. The CSS-3D hardware, parallax stages and caption
           chrome are hidden; each product becomes a clean stacked card:
           accent-glow screenshot frame on top, then numeral + eyebrow,
           name, body, points and a full-width CTA pill.
           ============================================================ */
        @media (max-width: 767px) {
          /* Header: scale down, never clip or overflow. */
          .mlp-tp-head { max-width: 100%; }
          .mlp-tp-headline {
            max-width: 100%;
            font-size: clamp(1.7rem, 7vw, 2.4rem);
            line-height: 1.2;
            letter-spacing: -0.03em;
            overflow-wrap: break-word;
          }
          .mlp-tp-rule { margin-top: 18px; width: min(180px, 46%); }
          .mlp-tp-sub { margin-top: 16px; font-size: 1rem; line-height: 1.62; }

          .mlp-product-stack { gap: 26px; margin-top: 52px; }

          /* Each product scene becomes a full-width card. */
          .mlp-product-scene {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 18px;
            min-height: 0;
            padding: 16px 16px 22px;
            border: 1px solid var(--mlp-product-border);
            border-radius: 22px;
            overflow: hidden;
            isolation: isolate;
            background:
              linear-gradient(180deg, color-mix(in srgb, var(--mlp-tp-a) 9%, transparent), transparent 42%),
              color-mix(in srgb, var(--mel-text-primary) 3%, transparent);
          }
          /* Accent hairline along the card's top edge (accent -> accent2). */
          .mlp-product-scene::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--mlp-tp-a), var(--mlp-tp-b) 62%, transparent);
            opacity: 0.9;
            pointer-events: none;
          }
          /* Screenshot on top, copy below (also beats the desktop
             nth-child(even) order swap at equal specificity). */
          .mlp-product-scene .mlp-product-visual,
          .mlp-product-scene:nth-child(even) .mlp-product-visual { order: 1; }
          .mlp-product-scene .mlp-product-copy,
          .mlp-product-scene:nth-child(even) .mlp-product-copy { order: 2; }

          /* Kill the 3D hardware, parallax stage and caption chrome. The
             NearViewport wrapper (mlp-scene-visual) hosts the desktop console,
             so it too is hidden here (its placeholder must not add blank space
             under the mobile screenshot). */
          .mlp-device-stage,
          .mlp-scene-visual,
          .mlp-visual-caption { display: none; }
          .mlp-laptop-rig,
          .mlp-phone-rig,
          .mlp-assistant-rig,
          .mlp-terminal-rig { transform: none !important; }
          .mlp-product-scene:first-child .mlp-product-visual { transform: none !important; }

          /* Clean device-agnostic screenshot frame. Fixed aspect ratio
             reserves space (no CLS); top-aligned cover keeps the app
             header/nav visible; accent glow bleeds from the top edge. */
          .mlp-tp-mshot {
            display: block;
            position: relative;
            width: 100%;
            aspect-ratio: 16 / 10;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--mlp-product-border);
            background: #020617;
            box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--mlp-tp-a) 60%, rgba(2,6,23,0.9));
          }
          .mlp-tp-mshot::after {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 38%;
            z-index: 2;
            background: radial-gradient(72% 120% at 50% 0%, color-mix(in srgb, var(--mlp-tp-a) 22%, transparent), transparent 72%);
            pointer-events: none;
          }
          .mlp-tp-mshot img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: top center;
          }
          .mlp-tp-assistant-mshot {
            display: flex;
            flex-direction: column;
            gap: 9px;
            aspect-ratio: 16 / 10;
            padding: 11px;
            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;
          }
          /* Device Control: the two phone captures side by side inside
             one frame, as simple rounded panes (no fake bezels). */
          .mlp-tp-mshot-duo {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            padding: 8px;
            aspect-ratio: auto;
          }
          .mlp-tp-mshot-pane {
            display: block;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
            aspect-ratio: 9 / 16;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: #020617;
          }

          /* CTA: full-width subtle pill; tagline wraps beneath it. */
          .mlp-tp-cta { width: 100%; }
        }

        @media (prefers-reduced-motion: reduce) {
          .mlp-laptop-rig,
          .mlp-phone-rig,
          .mlp-assistant-rig,
          .mlp-terminal-rig { transform: none !important; }
          .mlp-screen-sheen { animation: none !important; opacity: 0 !important; }
          .mlp-tp-browser-live, .mlp-tp-browser-cursor { animation: none !important; }
        }        .mlp-monitor { position: relative; width: min(100%, calc(var(--vis-h, 560px) * 1.5)); margin: 0 auto; }
        .mlp-monitor-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
        /* Screen and capture share the same 1.956:1 ratio: exact fill. */
        .mlp-monitor-screen { position: absolute; overflow: hidden; background: #05070D; }
        .mlp-monitor-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
        .mlp-monitor-screen i {
          position: absolute; inset: 0; pointer-events: none;
          background: linear-gradient(122deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 38%, rgba(255,255,255,0) 38.2%);
        }
        .mlp-svgphones { display: flex; align-items: center; justify-content: center; padding-block: 28px 36px; }
        .mlp-svgphones svg { display: block; height: auto; overflow: visible; }
        .mlp-svgphones .back { width: var(--mlp-phone-w, min(300px, 22vw)); margin-right: -8%; transform: translateY(-4%); }
        .mlp-svgphones .front { width: var(--mlp-phone-w, min(300px, 22vw)); position: relative; z-index: 2; transform: translateY(4%); }
        .mlp-sheet .mlp-svgphones { --mlp-phone-w: min(300px, 18vw, calc(var(--vis-h) / 2.25)); padding-block: 4% 5%; }
        /* Browser Control console: the neumorphic surface language, a faithful
           mirror of components/ui/neoCard and the ProductPage hero mlp-bc-hc, so
           the landing console and the product hero read as one family. The window
           is a soft raised panel, chrome bars sit flat and are split by soft inset
           hairlines, the address bar and status pill are recessed wells, the active
           tab is a raised chip, and the rendered page is recessed into the bezel.
           No hard borders and no accent glow border. Accent stays minimal: the sky
           live dot, the node badges, and the parked violet cursor. Motion is
           transform and opacity only, and reduced-motion safe. */
        .mlp-tp-browser {
          position: relative;
          border: none;
          border-radius: clamp(16px, 3.4vw, 22px);
          overflow: hidden;
          font-family: Poppins, system-ui, sans-serif;
          color: var(--neo-chrome-ink);
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141b2b 46%, #0c1017 100%);
          box-shadow: 0 24px 52px -18px rgba(0,0,0,0.92), 8px 8px 22px rgba(0,0,0,0.52), -5px -5px 16px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(255,255,255,0.045);
          --neo-chrome-ink: #e6ecf5;
          --neo-chrome-muted: rgba(230,236,245,0.58);
          --neo-well-bg: rgba(4,8,18,0.55);
          --neo-page-bg: linear-gradient(180deg, #0A0F1D, #070B16);
          --neo-tab-on-bg: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
          --neo-inset: inset 2px 2px 6px rgba(0,0,0,0.6), inset -1px -1px 3px rgba(255,255,255,0.05);
          --neo-chip: 3px 3px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.07);
          --neo-sep: inset 0 -1px 0 rgba(255,255,255,0.05);
          --neo-status-ink: #7dd3fc;
          --neo-lock: #34D399;
        }
        .mlp-tp-browser.is-light {
          background: #f2f5f9;
          box-shadow: 0 22px 44px -16px rgba(15,23,42,0.34), 7px 7px 17px rgba(15,23,42,0.13), -6px -6px 16px rgba(255,255,255,0.98);
          --neo-chrome-ink: #0f172a;
          --neo-chrome-muted: rgba(15,23,42,0.55);
          --neo-well-bg: #e7ecf3;
          --neo-page-bg: linear-gradient(180deg, #FFFFFF, #F8FAFC);
          --neo-tab-on-bg: #eef2f8;
          --neo-inset: inset 3px 3px 6px rgba(15,23,42,0.10), inset -2px -2px 5px rgba(255,255,255,0.95);
          --neo-chip: 5px 5px 12px rgba(15,23,42,0.14), -3px -3px 9px rgba(255,255,255,0.98), inset 0 1px 0 rgba(255,255,255,0.9);
          --neo-sep: inset 0 -1px 0 rgba(255,255,255,0.75);
          --neo-status-ink: #0369A1;
          --neo-lock: #059669;
        }

        /* Tab strip: flat on the shell, split by a soft inset hairline. */
        .mlp-tp-browser-tabstrip { display: flex; align-items: flex-end; gap: 8px; padding: 8px 11px 0; background: transparent; box-shadow: var(--neo-sep); }
        .mlp-tp-browser-lights { display: inline-flex; gap: 5px; padding-bottom: 6px; flex: 0 0 auto; }
        .mlp-tp-browser-lights i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
        .mlp-tp-browser-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 5px 10px; border-radius: 9px 9px 0 0; font: 700 9px/1.2 Poppins, system-ui, sans-serif; color: var(--neo-chrome-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mlp-tp-browser-tab.on { color: var(--neo-chrome-ink); background: var(--neo-tab-on-bg); border-radius: 9px 9px 6px 6px; box-shadow: var(--neo-chip); }
        .mlp-tp-browser-tab.rest { max-width: 96px; padding-bottom: 6px; opacity: 0.68; }
        .mlp-tp-browser-newtab { margin-left: auto; padding-bottom: 6px; color: var(--neo-chrome-muted); font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; flex: 0 0 auto; }

        /* Toolbar: nav glyphs, a recessed address well, a live status pill. */
        .mlp-tp-browser-toolbar { display: flex; align-items: center; gap: 7px; padding: 7px 11px; background: transparent; box-shadow: var(--neo-sep); }
        .mlp-tp-browser-nav { display: inline-flex; gap: 2px; flex: 0 0 auto; }
        .mlp-tp-browser-nav span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 5px; color: var(--neo-chrome-muted); font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; }
        .mlp-tp-browser-nav span.dim { opacity: 0.5; }
        .mlp-tp-browser-address { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--neo-well-bg); color: var(--neo-chrome-ink); font: 650 8.5px/1 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; box-shadow: var(--neo-inset); }
        .mlp-tp-browser-address svg { flex: 0 0 auto; color: var(--neo-lock); }
        .mlp-tp-browser-address .path { overflow: hidden; text-overflow: ellipsis; }
        .mlp-tp-browser-address .scheme { color: var(--neo-lock); }
        .mlp-tp-browser-address .tail { color: var(--neo-chrome-muted); }
        .mlp-tp-browser-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; color: var(--neo-status-ink); font: 800 7px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--neo-inset); }

        /* Live dot: sky fill plus a soft ping ring, transform and opacity only. */
        .mlp-tp-browser-live { position: relative; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #38BDF8; }
        .mlp-tp-browser-live::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgba(56,189,248,0.7); transform: scale(1); opacity: 0.7; animation: mlp-tp-browser-ping 2.4s ease-in-out infinite; }
        @keyframes mlp-tp-browser-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

        /* Rendered page: recessed into the bezel, calmer palette. */
        .mlp-tp-browser-view { position: relative; margin: 3px 12px 12px; padding: 15px 13px 13px; border-radius: 13px; overflow: hidden; background: var(--neo-page-bg); box-shadow: var(--neo-inset); }
        .mlp-tp-browser-field { position: relative; height: 25px; border-radius: 7px; background: rgba(56,189,248,0.10); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.30); }
        .mlp-tp-browser-field:first-of-type { margin-top: 4px; }
        .mlp-tp-browser-act { position: relative; margin-top: 6px; display: inline-flex; width: fit-content; }
        .mlp-tp-browser-submit { position: relative; height: 30px; min-width: 132px; padding: 0 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #EDE9FE; font: 700 10px/1 Poppins, system-ui, sans-serif; background: linear-gradient(180deg, rgba(139,92,246,0.34), rgba(139,92,246,0.18)); box-shadow: 0 10px 24px -14px #8B5CF6, inset 0 0 0 1px rgba(139,92,246,0.55); }
        .mlp-tp-browser.is-light .mlp-tp-browser-submit { color: #5B21B6; }
        .mlp-tp-browser-cursor { position: absolute; right: -7px; bottom: -9px; filter: drop-shadow(0 2px 3px rgba(2,6,23,0.5)); animation: mlp-tp-browser-cursor 3.4s ease-in-out infinite; }
        @keyframes mlp-tp-browser-cursor { 0%, 62%, 100% { transform: translate(0, 0); } 72% { transform: translate(-3px, -3px); } 82% { transform: translate(0, 0); } }

        /* Governance cue: soft amber well, one raised approve chip. */
        .mlp-tp-browser-approval { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(245,158,11,0.11); color: #FCD34D; font: 650 8.5px/1.4 Poppins, system-ui, sans-serif; }
        .mlp-tp-browser.is-light .mlp-tp-browser-approval { background: rgba(245,158,11,0.12); color: #92400E; }
        .mlp-tp-browser-approval svg { flex: 0 0 auto; }
        .mlp-tp-browser-approval .txt { flex: 1; min-width: 0; }
        .mlp-tp-browser-approval b { flex: 0 0 auto; padding: 4px 9px; border-radius: 7px; background: #F59E0B; color: #1C1206; font: 800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--neo-chip); }
        .mlp-tp-browser.is-light .mlp-tp-browser-approval b { background: #D97706; color: #FFFFFF; }

        /* Rich (landing sheet) extras: order lines + the agent's action trace. */
        .mlp-tp-browser-lines { display: grid; gap: 6px; margin-top: 4px; padding: 9px 10px; border-radius: 9px; box-shadow: var(--neo-inset); }
        .mlp-tp-browser-lines > span { display: grid; grid-template-columns: 52px 1fr 26px 62px; align-items: center; gap: 8px; font: 650 8px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--neo-chrome-muted); }
        .mlp-tp-browser-lines b { font-weight: 800; color: var(--neo-chrome-ink); }
        .mlp-tp-browser-lines em { font-style: normal; text-align: right; }
        .mlp-tp-browser-lines strong { text-align: right; color: var(--neo-chrome-ink); font-variant-numeric: tabular-nums; }
        .mlp-tp-browser-lines .total { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--neo-chrome-muted) 45%, transparent); }
        .mlp-tp-browser-lines .total strong { font-weight: 800; }
        .mlp-tp-browser-trace { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: var(--neo-chrome-ink); }
        .mlp-tp-browser-trace li { display: flex; align-items: center; gap: 7px; }
        .mlp-tp-browser-trace li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--neo-chrome-muted); }
        .mlp-tp-browser-trace i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
        .mlp-tp-browser-trace i.ok { background: #34D399; }
        .mlp-tp-browser-trace i.wait { background: #F59E0B; }

        @media (prefers-reduced-motion: reduce) {
          .mlp-tp-browser-live::after, .mlp-tp-browser-cursor { animation: none; }
          .mlp-tp-browser-cursor { transform: none; }
        }        .mlp-mcpflow { container-type: inline-size; width: min(720px, 100%); margin: 0 auto; display: grid; gap: clamp(14px, 2.4svh, 22px); }
        .mlp-mcpflow-stage { position: relative; width: 100%; aspect-ratio: 600 / 340; }
        .mlp-mcpflow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
        /* One travelling pulse per groove: a short dash sliding along a
           pathLength of 100. Clients -> hub first, then hub -> destinations. */
        .mlp-mcpflow-flux {
          fill: none;
          stroke: var(--flux-a);
          stroke-width: 3.2;
          stroke-linecap: round;
          stroke-dasharray: 12 88;
          stroke-dashoffset: 112;
          opacity: 0;
          animation: mlp-mcp-flux 3.2s cubic-bezier(.45,.05,.35,1) infinite;
        }
        .mlp-mcpflow-flux.is-out { stroke: var(--flux-b); }
        @keyframes mlp-mcp-flux {
          0% { stroke-dashoffset: 112; opacity: 0; }
          8% { opacity: 1; }
          62% { stroke-dashoffset: 0; opacity: 1; }
          70%, 100% { stroke-dashoffset: 0; opacity: 0; }
        }
        .mlp-mcpflow.is-reduced .mlp-mcpflow-flux { animation: none; opacity: 0.55; stroke-dasharray: none; stroke-dashoffset: 0; }
        .mlp-mcpflow-node { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; }
        .mlp-mcpflow-client { width: clamp(38px, 7.4cqi, 48px); aspect-ratio: 1; border-radius: 50%; }
        .mlp-mcpflow-client img { width: 56%; height: 56%; object-fit: contain; }
        .mlp-mcpflow-label, .mlp-mcpflow-more {
          position: absolute; transform: translate(-50%, -50%);
          font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
          color: var(--mcp-sub); white-space: nowrap;
        }
        .mlp-mcpflow-hub {
          gap: 7px; padding: 16px 18px 14px; border-radius: 22px; text-align: center; min-width: 30%;
        }
        .mlp-mcpflow-hub b { font: 700 15px/1.1 Poppins, system-ui, sans-serif; color: var(--mcp-text); }
        .mlp-mcpflow-hub .ep {
          display: block; margin-top: 3px; padding: 8px 14px; border-radius: 999px;
          font: 600 12px/1.1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.01em;
          color: var(--mcp-text); white-space: nowrap;
        }
        .mlp-mcpflow-dest {
          grid-auto-flow: column; gap: 8px; padding: 11px 15px; border-radius: 14px;
          font: 600 13.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-text); white-space: nowrap;
        }
        .mlp-mcpflow-ico { display: grid; }
        /* Phones: the vertical mini flow replaces the curved stage. */
        .mlp-mcpflow { container-type: inline-size; }
        .mlp-mcpflow-mini { display: none; }
        @container (max-width: 520px) {
          .mlp-mcpflow-stage { display: none; }
          .mlp-mcpflow-mini { display: grid; justify-items: center; gap: 8px; padding-block: 4px 6px; }
          .mlp-mcpflow-mini .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
          .mlp-mcpflow-mini .mlp-mcpflow-label, .mlp-mcpflow-mini .mlp-mcpflow-more { position: static; transform: none; }
          .mlp-mcpflow-mini .mlp-mcpflow-client { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 50%; }
          .mlp-mcpflow-mini .mlp-mcpflow-hub { display: grid; justify-items: center; gap: 6px; padding: 12px 16px; border-radius: 18px; text-align: center; }
          .mlp-mcpflow-mini .row { flex-wrap: nowrap; gap: 6px; }
          /* Equal columns so the fan lines land exactly on each node. */
          .mlp-mcpflow-mini .row.grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); justify-items: center; width: 100%; gap: 4px; }
          .mlp-mcpflow-mini .mlp-mcpflow-fan { display: block; width: 100%; height: 34px; overflow: visible; }
          .mlp-mcpflow-mini .mlp-mcpflow-fan .mlp-mcpflow-flux { stroke-width: 2.6; }
          .mlp-mcpflow-mini .mlp-mcpflow-dest { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 11px;
            font: 600 11.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-text); white-space: nowrap; }
          .mlp-mcpflow-mini .mlp-mcpflow-dest svg { width: 15px; height: 15px; }
          .mlp-mcpflow-mini .mlp-mcpflow-client { width: 36px; }
          .mlp-mcpflow-mini .down { position: relative; width: 2px; height: 22px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--mcp-sub) 35%, transparent); }
          .mlp-mcpflow-mini .down i { position: absolute; left: 0; top: 0; width: 2px; height: 8px; border-radius: 2px; background: var(--flux-a);
            animation: mlp-mcp-down 1.6s cubic-bezier(.45,.05,.35,1) infinite; }
          .mlp-mcpflow-mini .down.is-out i { background: var(--flux-b); animation-delay: .8s; }
          @keyframes mlp-mcp-down { 0% { transform: translateY(-8px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }
          .mlp-mcpflow.is-reduced .mlp-mcpflow-mini .down i { animation: none; opacity: 0.6; }
        }
        .mlp-mcpflow-install { border-radius: 20px; padding: 14px 16px 16px; display: grid; gap: 8px; min-height: clamp(260px, 36svh, 340px); align-content: start; }
        .mlp-mcpflow-back {
          justify-self: start; border: 0; background: none; cursor: pointer; padding: 4px 2px;
          font: 600 12.5px/1 Poppins, system-ui, sans-serif; color: var(--mcp-sub);
        }
        .mlp-mcpflow-back:hover { color: var(--mcp-text); }
        .mlp-mcpquick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 14px; }
        .mlp-mcpquick a, .mlp-mcpquick button {
          display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 4px; border: 0; background: none; cursor: pointer;
          text-decoration: none; font: 600 13px/1 Poppins, system-ui, sans-serif; color: var(--mtp-ink, currentColor);
        }
        .mlp-mcpquick button.is-done { color: #10B981; }
        .mlp-mcpquick :is(a, button):focus-visible { outline: 2px solid var(--a); outline-offset: 3px; border-radius: 8px; }
        .mlp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
        @media (prefers-reduced-motion: reduce) { .mlp-mcpflow-flux { animation: none !important; } }