.mlp-cc-section-inner, .mlp-cc-article { max-width: 1440px; margin: 0 auto; }
      .mlp-cc-article {
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
        align-items: center;
        gap: clamp(32px, 6vw, 96px);
      }
      .mlp-cc-article.reverse .mlp-cc-section-head { order: 2; }
      .mlp-cc-article.reverse .mlp-cc-visual-slot { order: 1; }
      .mlp-cc-visual-slot { min-width: 0; }
      .mlp-cc-section-head h2 {
        margin: 16px 0 0; max-width: 22ch;
        font-family: Poppins, system-ui, sans-serif; font-weight: 700;
        font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.12; letter-spacing: -0.02em;
        color: var(--mel-text-primary);
      }
      .mlp-cc-section-head > p {
        margin: 20px 0 0; max-width: 66ch;
        font-family: Poppins, system-ui, sans-serif;
        font-size: clamp(1rem, 0.42vw + 0.92rem, 1.16rem); line-height: 1.68;
        color: var(--mel-text-secondary);
      }

      /* Hero fit + centring (desktop split layout only; <=880px keeps the
         shared phone and tablet rules). Same scheme on .mlp-cc-hero,
         .mlp-dc-hero and .mlp-bc-herofit:
         - H1 scale below the shared 76px cap, tighter intro/CTA spacing.
         - A 156px band at the bottom of the viewport is kept free for the
           fixed bottom-left widgets (community pill top ~143px above the
           viewport bottom, social row ~76px).
         - Text block and visual are centred together between the eyebrow
           rail and that band: equal gaps above and below the row, no section
           bottom padding, and the rest offset of the scroll-linked lift
           cancelled (see below).
         - The desktop scene is capped at the row height minus the ~56px MCP
           note under it. */
      @media (min-width: 881px) {
        .mlp-cc-hero {
          --mlp-cc-safe: 156px;
          --mlp-cc-pt: clamp(72px, 9vh, 96px);
          --mlp-cc-g: clamp(8px, 2vh, 24px);
          /* Centre row height: viewport minus top padding, the eyebrow rail
             (~16px line + clamp padding + 1px rule), the equal top/bottom
             gaps and the reserved band. */
          --mlp-cc-row: calc(100dvh - var(--mlp-cc-safe) - var(--mlp-cc-pt) - clamp(14px, 2vh, 22px) - 17px - 2 * var(--mlp-cc-g));
        }
        .mlp-cc-hero .mlp-hero-section { min-height: 100dvh !important; padding-top: var(--mlp-cc-pt) !important; padding-bottom: 0 !important; }
        .mlp-cc-hero .mlp-hero-center { margin-top: var(--mlp-cc-g) !important; margin-bottom: calc(var(--mlp-cc-safe) + var(--mlp-cc-g)) !important; }
        .mlp-cc-hero .mlp-hero-section h1 { font-size: clamp(32px, 3vw, 58px) !important; max-width: none !important; }
        .mlp-cc-hero .mlp-hero-headline-block > p { margin-top: clamp(14px, 2vh, 24px) !important; max-width: 34em !important; }
        .mlp-cc-hero .mlp-hero-actions { margin-top: clamp(18px, 2.6vh, 32px) !important; gap: 12px 18px !important; }
        .mlp-cc-hero .mlp-hero-signature-col .ds { max-height: calc(var(--mlp-cc-row) - 56px); }
      }
      /* ProductHero lifts the centre with a scroll-linked y (0 to -80px over
         the section's pass through the viewport), already -40px at scroll 0
         when the hero is exactly one viewport tall. Cancel that rest offset
         so the content sits centred; the drift on scroll is kept. Reduced
         motion has no lift, so no compensation there. */
      @media (min-width: 881px) and (prefers-reduced-motion: no-preference) {
        .mlp-cc-hero .mlp-hero-center { translate: 0 40px; }
      }

      /* Hero secondary action */
      .mlp-cc-hero-open {
        display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px;
        border-radius: 999px; text-decoration: none; white-space: nowrap;
        font: 600 15px/1 Poppins, system-ui, sans-serif; color: var(--mel-text-primary);
        border: 1px solid #818CF866; background: #818CF814;
        transition: box-shadow 180ms ease, border-color 180ms ease;
      }
      .mlp-cc-hero-open:hover { border-color: #818CF8; box-shadow: 0 0 0 1px #818CF855, 0 0 22px #818CF844; }
      .light .mlp-cc-hero-open { color: #1E3A8A; border-color: rgba(30,58,138,0.30); background: rgba(30,58,138,0.06); }
      .light .mlp-cc-hero-open:hover { border-color: #1E3A8A; box-shadow: none; background: rgba(30,58,138,0.10); }
      .mlp-cc-hero-open:focus-visible, .mlp-cc-os-chip:focus-visible, .mlp-cc-how-link:focus-visible, .mlp-cc-combo a:focus-visible {
        outline: 2px solid #818CF8; outline-offset: 3px;
      }
      .light .mlp-cc-hero-open:focus-visible, .light .mlp-cc-os-chip:focus-visible, .light .mlp-cc-how-link:focus-visible, .light .mlp-cc-combo a:focus-visible { outline-color: #1E3A8A; }

      /* Shared glass card */
      .mlp-cc-how-step, .mlp-cc-cap, .mlp-cc-surface, .mlp-cc-case, .mlp-cc-server {
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
      }
      .light .mlp-cc-how-step, .light .mlp-cc-cap, .light .mlp-cc-surface, .light .mlp-cc-case, .light .mlp-cc-server {
        border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.74);
      }

      /* How it works */
      .mlp-cc-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 48px); }
      .mlp-cc-how-step { display: flex; flex-direction: column; gap: 10px; border-radius: 24px; padding: 22px; }
      .mlp-cc-how-top { display: flex; align-items: center; justify-content: space-between; }
      .mlp-cc-how-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(140deg, #818CF8, #22D3EE); }
      .light .mlp-cc-how-ico { background: #1E3A8A; }
      .mlp-cc-how-num { color: var(--mel-text-tertiary); font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; }
      .mlp-cc-how-step strong { margin-top: 6px; color: var(--mel-text-primary); font: 700 19px/1.2 Poppins, system-ui, sans-serif; letter-spacing: -0.02em; }
      .mlp-cc-how-step p { margin: 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.58; }
      .mlp-cc-os-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
      .mlp-cc-os-chip {
        display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; text-decoration: none;
        font: 700 12px/1 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary);
        border: 1px solid rgba(148,163,184,0.26); background: rgba(148,163,184,0.06);
      }
      .mlp-cc-os-chip:hover { color: var(--mel-text-primary); border-color: #818CF888; }
      .mlp-cc-os-chip[data-current="true"] { color: var(--mel-text-primary); border-color: #818CF8; box-shadow: 0 0 0 1px #818CF844, 0 0 16px #818CF833; }
      .light .mlp-cc-os-chip { border-color: rgba(15,23,42,0.14); background: #FFFFFF; }
      .light .mlp-cc-os-chip[data-current="true"] { color: #FFFFFF; background: #1E3A8A; border-color: #1E3A8A; box-shadow: none; }
      .mlp-cc-how-link {
        display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 8px; text-decoration: none;
        color: #818CF8; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase;
      }
      .mlp-cc-how-link:hover { text-decoration: underline; }
      .light .mlp-cc-how-link { color: #1E3A8A; }
      .mlp-cc-server {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
        margin-top: 14px; padding: 18px 20px; border-radius: 22px;
      }
      .mlp-cc-server-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #22D3EE; border: 1px solid #22D3EE55; background: #22D3EE14; }
      .light .mlp-cc-server-ico { color: #1E3A8A; border-color: rgba(30,58,138,0.25); background: rgba(30,58,138,0.06); }
      .mlp-cc-server-text strong { color: var(--mel-text-primary); font: 700 16px/1.25 Poppins, system-ui, sans-serif; }
      .mlp-cc-server-text p { margin: 4px 0 0; color: var(--mel-text-secondary); font-size: 14px; line-height: 1.5; }
      .mlp-cc-server-cmd {
        display: inline-flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; white-space: nowrap;
        font: 700 13px/1.2 'JetBrains Mono', ui-monospace, monospace; color: #E2E8F0;
        background: rgba(2,6,23,0.88); border: 1px solid #22D3EE44;
      }
      .mlp-cc-server-cmd span { color: #22D3EE; }
      .light .mlp-cc-server-cmd { border-color: rgba(15,23,42,0.18); }
      .mlp-cc-platforms { margin: 14px 0 0; color: var(--mel-text-tertiary); font: 700 11px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; }

      /* Capabilities */
      .mlp-cc-caps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 48px); }
      .mlp-cc-cap { display: flex; flex-direction: column; gap: 10px; border-radius: 22px; padding: 20px; }
      .mlp-cc-cap-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
      .mlp-cc-cap-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #818CF8; border: 1px solid #818CF855; background: #818CF814; box-shadow: 0 0 18px -6px #818CF888; }
      .light .mlp-cc-cap-ico { color: #1E3A8A; border-color: rgba(30,58,138,0.22); background: rgba(30,58,138,0.06); box-shadow: none; }
      .mlp-cc-cap-top code { color: var(--mel-text-tertiary); font: 700 10.5px/1.3 'JetBrains Mono', ui-monospace, monospace; text-align: right; }
      .mlp-cc-cap h3 { margin: 4px 0 0; color: var(--mel-text-primary); font: 700 17px/1.25 Poppins, system-ui, sans-serif; letter-spacing: -0.015em; }
      .mlp-cc-cap p { margin: 0; color: var(--mel-text-secondary); font-size: 14px; line-height: 1.56; }

      /* Safety */
      .mlp-cc-security-list { display: grid; gap: 10px; margin-top: 24px; }
      .mlp-cc-security-list div { display: flex; gap: 10px; color: var(--mel-text-secondary); line-height: 1.55; font-size: 14.5px; }
      .mlp-cc-security-list span { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 14px #10B981; }
      .light .mlp-cc-security-list span { box-shadow: none; }
      .mlp-cc-allow {
        position: relative; border-radius: 28px; padding: clamp(18px, 3vw, 28px);
        border: 1px solid #10B98133; background: rgba(255,255,255,0.045);
        box-shadow: 0 0 0 1px #10B98110, 0 0 60px -26px #10B98188;
        backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
      }
      .light .mlp-cc-allow { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.80); box-shadow: 0 30px 80px -40px rgba(15,23,42,0.35); }
      .mlp-cc-allow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(148,163,184,0.14); }
      .mlp-cc-allow-head .title { display: inline-flex; align-items: center; gap: 8px; color: var(--mel-text-primary); font: 700 15px/1.2 Poppins, system-ui, sans-serif; }
      .mlp-cc-allow-head .pc { color: var(--mel-text-tertiary); font: 700 10.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; }
      .mlp-cc-allow-rows { display: grid; gap: 10px; margin-top: 14px; }
      .mlp-cc-allow-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); }
      .light .mlp-cc-allow-row { border-color: rgba(15,23,42,0.07); background: #FFFFFF; }
      .mlp-cc-allow-row .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; }
      .mlp-cc-allow-row .meta { min-width: 0; }
      .mlp-cc-allow-row strong { display: block; color: var(--mel-text-primary); font-size: 14px; }
      .mlp-cc-allow-row p { margin: 2px 0 0; color: var(--mel-text-tertiary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .mlp-cc-tiers { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.22); background: rgba(2,6,23,0.35); }
      .light .mlp-cc-tiers { border-color: rgba(15,23,42,0.12); background: #F1F5F9; }
      .mlp-cc-tiers span { padding: 6px 10px; border-radius: 999px; color: var(--mel-text-tertiary); font: 700 11px/1 Poppins, system-ui, sans-serif; }
      .mlp-cc-tiers span.on { color: #04121F; background: linear-gradient(135deg, #10B981, #22D3EE); box-shadow: 0 0 14px -2px #10B981AA; }
      .light .mlp-cc-tiers span.on { color: #FFFFFF; background: #1E3A8A; box-shadow: none; }
      .mlp-cc-sensitive { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: #FCA5A5; font: 800 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.32); }
      .light .mlp-cc-sensitive { color: #B91C1C; background: rgba(239,68,68,0.06); }
      .mlp-cc-allow-note { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 14px; padding: 13px 14px; border-radius: 16px; background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.22); }
      .mlp-cc-allow-note span { color: #10B981; font: 900 10px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
      .light .mlp-cc-allow-note span { color: #047857; }
      .mlp-cc-allow-note p { margin: 0; color: var(--mel-text-secondary); font-size: 13px; line-height: 1.5; }

      /* Surfaces */
      .mlp-cc-surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 48px); }
      .mlp-cc-surface { display: flex; flex-direction: column; gap: 12px; border-radius: 24px; padding: 22px; }
      .mlp-cc-surface-top { display: flex; align-items: center; gap: 12px; }
      .mlp-cc-surface-top .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #8B5CF6; border: 1px solid #8B5CF655; background: #8B5CF614; }
      .light .mlp-cc-surface-top .ico { color: #1E3A8A; border-color: rgba(30,58,138,0.22); background: rgba(30,58,138,0.06); }
      .mlp-cc-surface h3 { margin: 0; color: var(--mel-text-primary); font: 700 19px/1.2 Poppins, system-ui, sans-serif; }
      .mlp-cc-surface > p { margin: 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.58; }
      .mlp-cc-chat { display: grid; gap: 8px; margin-top: auto; }
      .mlp-cc-chat .me { justify-self: end; max-width: 92%; padding: 10px 13px; border-radius: 16px 16px 4px 16px; color: #FFFFFF; font-size: 13px; line-height: 1.45; background: linear-gradient(135deg, #8B5CF6, #818CF8); }
      .light .mlp-cc-chat .me { background: #1E3A8A; }
      .mlp-cc-chat .bot { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 12px; border-radius: 16px 16px 16px 4px; color: var(--mel-text-secondary); font-size: 12.5px; border: 1px solid rgba(148,163,184,0.20); background: rgba(148,163,184,0.06); }
      .mlp-cc-chat .bot i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 8px #22D3EE; }
      .light .mlp-cc-chat .bot i { background: #1E3A8A; box-shadow: none; }
      .mlp-cc-sched { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 11px 13px; border-radius: 14px; color: var(--mel-text-primary); font: 700 12.5px/1.3 'JetBrains Mono', ui-monospace, monospace; border: 1px solid rgba(148,163,184,0.20); background: rgba(148,163,184,0.06); }
      .mlp-cc-sched svg { color: #8B5CF6; flex: 0 0 auto; }
      .light .mlp-cc-sched svg { color: #1E3A8A; }
      .mlp-cc-sched em { margin-left: auto; font-style: normal; color: #10B981; font-size: 11px; white-space: nowrap; }
      .light .mlp-cc-sched em { color: #047857; }
      .mlp-cc-mcp { margin-top: auto; display: grid; gap: 12px; }
      .mlp-cc-mcp .clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
      .mlp-cc-mcp figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
      .mlp-cc-mcp img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; background: #FFFFFF; padding: 3px; }
      .mlp-cc-mcp figcaption { color: var(--mel-text-tertiary); font-size: 11px; font-weight: 600; text-align: center; white-space: nowrap; }
      .mlp-cc-mcp .endpoint { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; border: 1px solid #8B5CF644; background: #8B5CF612; }
      .mlp-cc-mcp .endpoint code { color: var(--mel-text-primary); font: 700 12.5px/1.2 ui-monospace, "SF Mono", Menlo, monospace; }
      .mlp-cc-mcp .endpoint span { color: #22D3EE; font: 700 11.5px/1.2 ui-monospace, "SF Mono", Menlo, monospace; }
      .light .mlp-cc-mcp .endpoint { border-color: rgba(30,58,138,0.22); background: rgba(30,58,138,0.05); }
      .light .mlp-cc-mcp .endpoint span { color: #1E3A8A; }
      .mlp-cc-combo { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.6; }
      .mlp-cc-combo svg { flex: 0 0 auto; margin-top: 4px; color: #8B5CF6; }
      .light .mlp-cc-combo svg { color: #1E3A8A; }
      .mlp-cc-combo a { color: var(--mel-text-primary); font-weight: 600; text-decoration: underline; text-decoration-color: #818CF888; text-underline-offset: 3px; }
      .light .mlp-cc-combo a { text-decoration-color: rgba(30,58,138,0.45); }

      /* Use cases */
      .mlp-cc-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 5vh, 48px); }
      .mlp-cc-case { display: flex; flex-direction: column; gap: 10px; border-radius: 22px; padding: 20px; }
      .mlp-cc-case .ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #F59E0B; border: 1px solid #F59E0B55; background: #F59E0B14; }
      .light .mlp-cc-case .ico { color: #B45309; }
      .mlp-cc-case h3 { margin: 6px 0 0; color: var(--mel-text-primary); font: 700 17px/1.25 Poppins, system-ui, sans-serif; }
      .mlp-cc-case p { margin: 0; color: var(--mel-text-secondary); font-size: 14px; line-height: 1.56; }
      .mlp-cc-case .apps { margin-top: auto; padding-top: 6px; color: var(--mel-text-tertiary); font: 700 10.5px/1.4 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }

      /* Why System One */
      .mlp-cc-s1 { display: grid; gap: clamp(20px, 3vh, 28px); margin-top: clamp(28px, 5vh, 48px); }
      .mlp-cc-s1-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(8px, 2vh, 20px); }
      .mlp-cc-s1-run { display: grid; gap: 12px; }
      .mlp-cc-s1-run h3 { margin: 0; color: var(--mel-text-primary); font: 600 15px/1.3 Poppins, system-ui, sans-serif; }
      .mlp-cc-docs-link {
        display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; text-decoration: none;
        color: #818CF8; font: 700 13.5px/1.3 Poppins, system-ui, sans-serif;
      }
      .mlp-cc-docs-link:hover { text-decoration: underline; }
      .light .mlp-cc-docs-link { color: #1E3A8A; }
      .mlp-cc-docs-link:focus-visible, .mlp-cc-mcp-detail a:focus-visible { outline: 2px solid #818CF8; outline-offset: 3px; }
      .light .mlp-cc-docs-link:focus-visible, .light .mlp-cc-mcp-detail a:focus-visible { outline-color: #1E3A8A; }

      /* Linux and VMs */
      .mlp-cc-linux { display: grid; gap: 14px; padding: clamp(18px, 3vw, 28px); border-radius: 26px; border: 1px solid #10B98133; background: rgba(255,255,255,0.04); box-shadow: 0 0 0 1px #10B98110, 0 0 60px -28px #10B98188; }
      .light .mlp-cc-linux { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.82); box-shadow: 0 30px 80px -44px rgba(15,23,42,0.35); }
      .mlp-cc-linux .mlp-cc-server-cmd { justify-self: start; max-width: 100%; overflow-x: auto; }
      .mlp-cc-linux ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
      .mlp-cc-linux li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: var(--mel-text-secondary); font-size: 14px; line-height: 1.45; border: 1px solid rgba(148,163,184,0.12); background: rgba(148,163,184,0.04); }
      .light .mlp-cc-linux li { background: #FFFFFF; border-color: rgba(15,23,42,0.07); }
      .mlp-cc-linux .ico { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; color: #10B981; background: #10B9811A; }
      .light .mlp-cc-linux .ico { color: #047857; }

      /* MCP detail under the surfaces */
      .mlp-cc-mcp-detail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin-top: 14px; padding: 20px 22px; border-radius: 22px; border: 1px solid #8B5CF633; background: #8B5CF60D; }
      .light .mlp-cc-mcp-detail { border-color: rgba(30,58,138,0.16); background: rgba(30,58,138,0.04); }
      .mlp-cc-mcp-detail .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #8B5CF6; border: 1px solid #8B5CF655; background: #8B5CF614; }
      .light .mlp-cc-mcp-detail .ico { color: #1E3A8A; border-color: rgba(30,58,138,0.22); background: rgba(30,58,138,0.06); }
      .mlp-cc-mcp-detail h3 { margin: 0; color: var(--mel-text-primary); font: 700 18px/1.25 Poppins, system-ui, sans-serif; }
      .mlp-cc-mcp-detail p { margin: 6px 0 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.6; max-width: 80ch; }
      .mlp-cc-mcp-detail a { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; text-decoration: none; color: #818CF8; font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
      .light .mlp-cc-mcp-detail a { color: #1E3A8A; }

      /* Links to the computer-use comparison pages, under the FAQ */
      .mlp-cc-faq-compare {
        max-width: 1440px; margin: -24px auto 0; padding-bottom: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
        color: var(--mel-text-tertiary); font: 600 13.5px/1.4 Poppins, system-ui, sans-serif; box-sizing: border-box;
      }
      .mlp-cc-faq-compare a { color: var(--mel-text-primary); text-decoration: underline; text-decoration-color: #818CF888; text-underline-offset: 3px; }
      .light .mlp-cc-faq-compare a { text-decoration-color: rgba(30,58,138,0.45); }
      .mlp-cc-faq-compare a:focus-visible { outline: 2px solid #818CF8; outline-offset: 3px; }
      .light .mlp-cc-faq-compare a:focus-visible { outline-color: #1E3A8A; }

      @media (min-width: 1181px) {
        .mlp-cc-caps-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
      }
      @media (max-width: 1180px) {
        .mlp-cc-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .mlp-cc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      @media (max-width: 980px) {
        .mlp-cc-article { grid-template-columns: 1fr; gap: 28px; }
        .mlp-cc-article.reverse .mlp-cc-section-head, .mlp-cc-article.reverse .mlp-cc-visual-slot { order: initial; }
        .mlp-cc-visual-slot { width: 100%; max-width: 620px; margin: 0 auto; }
        .mlp-cc-how, .mlp-cc-surfaces, .mlp-cc-s1-grid { grid-template-columns: 1fr; }
        .mlp-cc-server { grid-template-columns: auto minmax(0, 1fr); }
        .mlp-cc-server-cmd { grid-column: 1 / -1; justify-self: start; max-width: 100%; overflow-x: auto; }
      }
      @media (max-width: 640px) {
        .mlp-product-section { --mlp-cc-sec-pad-y: clamp(44px, 7vh, 60px); }
        .mlp-cc-section-head h2 { max-width: none; margin-top: 12px; }
        .mlp-cc-section-head > p { margin-top: 12px; font-size: 15px; line-height: 1.62; }
        .mlp-cc-caps-grid, .mlp-cc-cases { grid-template-columns: 1fr; gap: 10px; }
        .mlp-cc-how-step, .mlp-cc-surface { padding: 18px; border-radius: 20px; }
        .mlp-cc-cap, .mlp-cc-case { padding: 16px; border-radius: 18px; }
        .mlp-cc-allow-row { grid-template-columns: 38px minmax(0, 1fr); }
        .mlp-cc-allow-row .ico { width: 38px; height: 38px; }
        .mlp-cc-tiers, .mlp-cc-sensitive { grid-column: 1 / -1; justify-self: start; }
        .mlp-cc-hero-open { min-height: 44px; }
      }