.mlp-bc-section-inner, .mlp-bc-article { max-width: 1440px; margin: 0 auto; }
      .mlp-bc-article {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(340px, 1.1fr);
        align-items: center;
        gap: clamp(32px, 6vw, 96px);
      }
      .mlp-bc-article.reverse .mlp-bc-section-head { order: 2; }
      .mlp-bc-article.reverse .mlp-bc-visual-slot { order: 1; }
      .mlp-bc-section-head h2 {
        margin: 16px 0 0;
        max-width: 24ch;
        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-bc-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);
      }
      .mlp-bc-visual-slot { min-width: 0; }

      /* ── Controlled-browser window: dark chrome wrapping a REAL rendered page ── */
      .mlp-bc-hero { position: relative; min-height: min(560px, 66dvh); display: grid; place-items: center; }
      /* Hero WebGL layering: the live canvas sits over the static mock, which
         fades to a faint ghost so there is never a blank frame while the three
         chunk loads or between frames. */
      .mlp-bc-hero-static { position: relative; z-index: 1; width: 100%; display: grid; place-items: center; transition: opacity .6s ease; }
      .mlp-bc-hero-static.is-under { opacity: 0.12; filter: saturate(0.8) blur(1px); }
      .mlp-bc-hero-canvas { position: absolute; inset: -8% -4%; z-index: 2; pointer-events: none; }
      @media (prefers-reduced-motion: reduce) { .mlp-bc-hero-static.is-under { opacity: 1; filter: none; } }
      .mlp-bc-window {
        width: min(548px, 100%);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid rgba(148,163,184,0.20);
        background: #0B1120;
        box-shadow: 0 40px 120px -30px rgba(0,0,0,0.62), 0 22px 68px -40px #38BDF855, inset 0 1px 0 rgba(255,255,255,0.06);
        font-family: Poppins, system-ui, sans-serif;
      }
      .light .mlp-bc-window { border-color: rgba(15,23,42,0.12); background: #E7ECF4; box-shadow: 0 30px 84px -34px rgba(15,23,42,0.42), 0 18px 50px -34px #38BDF840, inset 0 1px 0 rgba(255,255,255,0.75); }
      .mlp-bc-window.demo { width: 100%; }

      /* Tab strip */
      .mlp-bc-chrome { display: flex; align-items: center; gap: 11px; padding: 9px 12px; background: rgba(15,23,42,0.66); }
      .light .mlp-bc-chrome { background: #D9DFEA; }
      .mlp-bc-dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
      .mlp-bc-dots i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); }
      .mlp-bc-dots i:nth-child(1) { background: #F5675A; }
      .mlp-bc-dots i:nth-child(2) { background: #F7C948; }
      .mlp-bc-dots i:nth-child(3) { background: #3BD97E; }
      .mlp-bc-tabs { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }
      .mlp-bc-tab { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 11px; border-radius: 8px; font: 700 10.5px/1.2 Poppins, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .mlp-bc-tab.active { color: #E0F2FE; background: rgba(56,189,248,0.16); border: 1px solid rgba(56,189,248,0.34); max-width: 220px; }
      .light .mlp-bc-tab.active { color: #075985; background: rgba(56,189,248,0.14); border-color: rgba(56,189,248,0.32); }
      .mlp-bc-tab.rest { color: rgba(203,213,225,0.52); }
      .light .mlp-bc-tab.rest { color: rgba(71,85,105,0.68); }
      .mlp-bc-tab.add { color: rgba(148,163,184,0.65); font-weight: 800; font-size: 13px; padding: 6px 9px; }
      .mlp-bc-indicator { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 800 8.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #6EE7B7; white-space: nowrap; }
      .light .mlp-bc-indicator { color: #059669; }
      .mlp-bc-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.20); animation: mlp-bc-pulse 2.4s ease-in-out infinite; }
      @keyframes mlp-bc-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.20); } 50% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } }

      /* Toolbar: nav glyphs + secured address pill */
      .mlp-bc-toolbar { display: flex; align-items: center; gap: 10px; padding: 0 12px 10px; background: rgba(15,23,42,0.66); }
      .light .mlp-bc-toolbar { background: #D9DFEA; }
      .mlp-bc-navbtns { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: rgba(203,213,225,0.5); }
      .light .mlp-bc-navbtns { color: rgba(71,85,105,0.55); }
      .mlp-bc-navbtns svg:nth-child(2) { opacity: 0.5; }
      .mlp-bc-address { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(2,6,23,0.5); border: 1px solid rgba(148,163,184,0.14); color: rgba(203,213,225,0.82); font: 650 10px/1 'JetBrains Mono', ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .light .mlp-bc-address { background: #F1F4F9; border-color: rgba(15,23,42,0.08); color: #334155; }
      .mlp-bc-address svg { color: #10B981; flex: 0 0 auto; }
      .mlp-bc-address b { color: #34D399; font-weight: 700; }
      .light .mlp-bc-address b { color: #059669; }
      .mlp-bc-address em { color: rgba(148,163,184,0.6); font-style: normal; }

      /* The rendered page: a real WHITE website surface inside the chrome */
      .mlp-bc-page { position: relative; padding: 20px 20px 18px; min-height: 208px; background: #FFFFFF; color: #0F172A; box-shadow: inset 0 1px 0 rgba(15,23,42,0.06); }
      .mlp-bc-window.demo .mlp-bc-page { min-height: 244px; }
      .mlp-bc-page-head { margin-bottom: 16px; }
      .mlp-bc-page-head .crumb { font: 700 8.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #94A3B8; }
      .mlp-bc-page-head .ttl { margin: 7px 0 0; font: 700 18px/1.2 Poppins, system-ui, sans-serif; letter-spacing: -0.01em; color: #0F172A; }
      .mlp-bc-form { display: flex; flex-direction: column; gap: 11px; }
      .mlp-bc-frow { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 10px; border: 1px solid #E2E8F0; background: #F8FAFC; }
      .mlp-bc-frow .lbl { font: 600 11px/1 Poppins, system-ui, sans-serif; color: #64748B; }
      .mlp-bc-frow .val { font: 600 12.5px/1 Poppins, system-ui, sans-serif; color: #0F172A; display: inline-flex; align-items: center; }
      .mlp-bc-frow.hot { border-color: #38BDF8; background: #38BDF80F; box-shadow: 0 0 0 3px #38BDF822; }
      .mlp-bc-frow.hot::after {
        content: attr(data-ref); position: absolute; top: -9px; left: 11px;
        padding: 2px 6px; border-radius: 6px; background: #38BDF8; color: #04121F;
        font: 900 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em;
        box-shadow: 0 5px 12px -4px #38BDF8;
      }
      .mlp-bc-frow .caret { display: inline-block; width: 1.5px; height: 13px; margin-left: 2px; background: #38BDF8; animation: mlp-bc-caret 1.05s step-end infinite; }
      @keyframes mlp-bc-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
      .mlp-bc-submit {
        position: relative; align-self: flex-start; margin-top: 3px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 11px 20px; border-radius: 10px;
        background: linear-gradient(150deg, #8B5CF6 0%, #7C3AED 100%);
        color: #FFFFFF; font: 700 12.5px/1 Poppins, system-ui, sans-serif;
        box-shadow: 0 12px 24px -12px #8B5CF6, inset 0 1px 0 rgba(255,255,255,0.25);
      }
      .mlp-bc-submit::after {
        content: attr(data-ref); position: absolute; top: -9px; right: 10px;
        padding: 2px 6px; border-radius: 6px; background: #8B5CF6; color: #FFFFFF;
        font: 900 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em;
        box-shadow: 0 5px 12px -4px #8B5CF6;
      }
      .mlp-bc-cursor { position: absolute; right: -6px; bottom: -8px; width: 16px; height: 16px; pointer-events: none;
        background: #0F172A; clip-path: polygon(0 0, 0 78%, 26% 60%, 44% 100%, 60% 92%, 42% 54%, 74% 54%);
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); animation: mlp-bc-nudge 2.6s ease-in-out infinite; }
      @keyframes mlp-bc-nudge { 0%,70%,100% { transform: translate(0,0); } 82% { transform: translate(-3px,-3px); } }
      .mlp-bc-approval {
        display: flex; align-items: center; gap: 9px; margin-top: 14px;
        padding: 10px 12px; border-radius: 11px;
        border: 1px solid #F59E0B44; background: #F59E0B14;
        color: #B45309; font: 650 10.5px/1.35 Poppins, system-ui, sans-serif;
      }
      .mlp-bc-approval svg { color: #F59E0B; flex: 0 0 auto; }
      .mlp-bc-approval span { min-width: 0; }
      .mlp-bc-approval b { margin-left: auto; flex: 0 0 auto; padding: 5px 11px; border-radius: 8px; background: #F59E0B; color: #1A1206; font: 800 9.5px/1 Poppins, system-ui, sans-serif; }
      .mlp-bc-controls { display: flex; gap: 8px; padding: 11px 12px; background: rgba(15,23,42,0.66); border-top: 1px solid rgba(148,163,184,0.1); }
      .light .mlp-bc-controls { background: #D9DFEA; border-top-color: rgba(15,23,42,0.06); }
      .mlp-bc-controls span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; font: 800 9px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
      .mlp-bc-controls .stop { color: #FDA4AF; border: 1px solid rgba(244,63,94,0.42); background: rgba(244,63,94,0.12); }
      .mlp-bc-controls .hand { color: #FCD34D; border: 1px solid rgba(245,158,11,0.42); background: rgba(245,158,11,0.1); }
      .light .mlp-bc-controls .stop { color: #E11D48; border-color: transparent; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); box-shadow: 3px 3px 7px rgba(150,161,183,0.5), -2px -2px 5px rgba(255,255,255,0.92), inset 0 1px 0 rgba(255,255,255,0.6); }
      .light .mlp-bc-controls .hand { color: #B45309; border-color: transparent; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); box-shadow: 3px 3px 7px rgba(150,161,183,0.5), -2px -2px 5px rgba(255,255,255,0.92), inset 0 1px 0 rgba(255,255,255,0.6); }
      @media (prefers-reduced-motion: reduce) {
        .mlp-bc-indicator i, .mlp-bc-frow .caret, .mlp-bc-cursor { animation: none; }
      }

      /* == Hero console: live agent driving a realistic browser ==
         Neumorphic language (a faithful mirror of components/ui/neoCard): the
         window is a soft RAISED panel, the chrome bars sit flat on that surface,
         the address pill and command input are recessed INSET wells, and the
         state pill, send button and tabs read as raised chips. No hard borders. */
      .mlp-bc-hc {
        position: relative;
        width: min(600px, 100%);
        border: none;
        border-radius: clamp(16px, 3.4vw, 22px);
        overflow: hidden;
        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-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-sep-top: inset 0 1px 0 rgba(255,255,255,0.05);
      }
      .light .mlp-bc-hc {
        border: none;
        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-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-sep-top: inset 0 1px 0 rgba(255,255,255,0.75);
      }
      /* Title bar: flat on the shell surface, active tab reads as a raised chip */
      .mlp-bc-hc-titlebar { display: flex; align-items: center; gap: 8px; padding: 9px 11px 7px; background: transparent; box-shadow: var(--neo-sep); }
      .mlp-bc-hc-tabs { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
      .mlp-bc-hc-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 6px 11px; border-radius: 9px; font: 600 10.5px/1 Poppins, system-ui, sans-serif; color: var(--neo-chrome-muted); background: transparent; white-space: nowrap; overflow: hidden; }
      .mlp-bc-hc-tab img { border-radius: 3px; flex: 0 0 auto; }
      .mlp-bc-hc-tab .tt { overflow: hidden; text-overflow: ellipsis; }
      .mlp-bc-hc-tab .fav { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; background: linear-gradient(135deg, #64748B, #334155); }
      .mlp-bc-hc-tab.on { color: var(--neo-chrome-ink); background: var(--neo-tab-on-bg); box-shadow: var(--neo-chip); }
      .mlp-bc-hc-tab.rest { opacity: 0.7; }
      .mlp-bc-hc-tab.spawn { animation: mlp-bc-hc-tabin 0.5s cubic-bezier(.3,.8,.3,1) both; }
      @keyframes mlp-bc-hc-tabin { from { max-width: 0; opacity: 0; padding-left: 0; padding-right: 0; } to { max-width: 150px; opacity: 1; } }
      .mlp-bc-hc-newtab { align-self: center; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; color: var(--neo-chrome-muted); }
      .mlp-bc-hc-state { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font: 800 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--neo-inset); }
      .mlp-bc-hc-state i { width: 6px; height: 6px; border-radius: 50%; }
      .mlp-bc-hc-state[data-s="ready"] { color: #6EE7B7; } .mlp-bc-hc-state[data-s="ready"] i { background: #10B981; box-shadow: 0 0 6px #10B981; }
      .mlp-bc-hc-state[data-s="running"] { color: #7dd3fc; } .mlp-bc-hc-state[data-s="running"] i { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; animation: mlp-bc-pulse 2s ease-in-out infinite; }
      .mlp-bc-hc-state[data-s="waiting"] { color: #FBBF24; } .mlp-bc-hc-state[data-s="waiting"] i { background: #F59E0B; box-shadow: 0 0 6px #F59E0B; }
      .light .mlp-bc-hc-state[data-s="ready"] { color: #047857; } .light .mlp-bc-hc-state[data-s="running"] { color: #0369A1; } .light .mlp-bc-hc-state[data-s="waiting"] { color: #B45309; }
      .mlp-bc-hc-wincaps { align-self: center; display: inline-flex; align-items: center; gap: 2px; color: var(--neo-chrome-muted); }
      .mlp-bc-hc-wincaps i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
      .mlp-bc-hc-wincaps i.x { color: #FDA4AF; }
      .light .mlp-bc-hc-wincaps i.x { color: #E11D48; }
      /* Toolbar: nav glyphs + recessed address well */
      .mlp-bc-hc-toolbar { display: flex; align-items: center; gap: 9px; padding: 8px 12px 9px; background: transparent; box-shadow: var(--neo-sep); }
      .mlp-bc-hc-nav { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--neo-chrome-muted); }
      .mlp-bc-hc .mlp-bc-address { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: var(--neo-well-bg); border: none; color: var(--neo-chrome-ink); font: 650 10px/1 'JetBrains Mono', ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: var(--neo-inset); }
      .mlp-bc-address .pathfade { display: inline; animation: mlp-bc-hc-fade 0.4s ease; }
      @keyframes mlp-bc-hc-fade { from { opacity: 0; } to { opacity: 1; } }
      /* Command bar: a recessed well the user talks to */
      .mlp-bc-cmd { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 12px; padding: 7px 8px; border-radius: 13px; background: var(--neo-well-bg); box-shadow: var(--neo-inset); }
      .mlp-bc-cmd-badge { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 9px; color: #04121F; background: linear-gradient(150deg, #7dd3fc, #38BDF8); box-shadow: 0 4px 10px -4px #38BDF8; }
      .mlp-bc-cmd-text { flex: 1; min-width: 0; font: 500 11.5px/1.4 Poppins, system-ui, sans-serif; color: var(--neo-chrome-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mlp-bc-cmd-text .cmd-caret { display: inline-block; width: 1.5px; height: 12px; margin-left: 1px; vertical-align: -2px; background: #38BDF8; animation: mlp-bc-caret 1.05s step-end infinite; }
      .mlp-bc-cmd-send { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 9px; color: #7dd3fc; box-shadow: var(--neo-chip); }
      .light .mlp-bc-cmd-send { color: #0369A1; }
      /* Agent status line / approval hold */
      .mlp-bc-hc-line { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; box-shadow: var(--neo-sep); font: 600 9.5px/1.3 'JetBrains Mono', ui-monospace, monospace; color: var(--neo-chrome-muted); }
      .mlp-bc-hc-line .dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe9ff, #0EA5E9 55%, #0369A1); box-shadow: 0 0 7px #38BDF8; animation: mlp-bci-led 1.3s ease-in-out infinite; }
      .mlp-bc-hc-line .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mlp-bc-hc-line.hold { color: #FBBF24; }
      .light .mlp-bc-hc-line.hold { color: #B45309; }
      .mlp-bc-hc-line.hold svg { color: #F59E0B; flex: 0 0 auto; }
      .mlp-bc-hc-line.hold b { margin-left: auto; flex: 0 0 auto; padding: 5px 11px; border-radius: 8px; background: #F59E0B; color: #1A1206; font: 800 8.5px/1 Poppins, system-ui, sans-serif; box-shadow: 0 6px 14px -6px rgba(245,158,11,0.85); }
      /* Viewport: two stacked pages that cross-fade; a recessed screen in the bezel */
      .mlp-bc-hc-view { position: relative; height: 240px; margin: 2px 12px 12px; border-radius: 13px; overflow: hidden; background: #FFFFFF; box-shadow: var(--neo-inset); }
      .mlp-bc-hc-pg { position: absolute; inset: 0; transition: opacity 0.45s ease, transform 0.45s ease; }
      .mlp-bc-hc-pg.pa.off { opacity: 0; transform: translateX(-10px); pointer-events: none; }
      .mlp-bc-hc-pg.pb { opacity: 0; transform: translateX(12px); pointer-events: none; }
      .mlp-bc-hc-pg.pb.onp { opacity: 1; transform: none; pointer-events: auto; }
      /* A real, elegant SaaS app rendered inside the browser (always light, Poppins, soft neu) */
      .mlp-bc-app { display: flex; height: 100%; width: 100%; background: #eef1f7; font-family: Poppins, system-ui, sans-serif; }
      .mlp-bc-app .side { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0; background: #e8ecf4; border-right: 1px solid rgba(148,163,184,0.2); }
      .mlp-bc-app .brand { width: 32px; height: 32px; display: grid; place-items: center; }
      .mlp-bc-app .brand img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(15,23,42,0.28)); }
      .mlp-bc-app nav { display: flex; flex-direction: column; gap: 7px; margin-top: 3px; }
      .mlp-bc-app .nv { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #9aa6ba; background: #eef1f7; box-shadow: 3px 3px 7px rgba(174,188,209,0.55), -2px -2px 6px #ffffff; }
      .mlp-bc-app .nv.on { color: #0284c7; box-shadow: inset 2px 2px 5px rgba(174,188,209,0.6), inset -2px -2px 4px #ffffff; }
      .mlp-bc-app .me { margin-top: auto; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font: 800 9px/1 Poppins, system-ui, sans-serif; color: #fff; background: linear-gradient(150deg, #F59E0B, #EF4444); }
      .mlp-bc-app .main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 13px 16px; }
      .mlp-bc-app .apphead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
      .mlp-bc-app .ht { margin-right: auto; min-width: 0; }
      .mlp-bc-app .crumb { font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #9aa6ba; }
      .mlp-bc-app .ht .ttl { margin: 4px 0 0; font: 700 16px/1 Poppins, system-ui, sans-serif; letter-spacing: -0.02em; color: #0f172a; }
      .mlp-bc-app .search { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 9px; color: #9aa6ba; font: 500 10px/1 Poppins, system-ui, sans-serif; background: #eef1f7; box-shadow: inset 2px 2px 5px rgba(174,188,209,0.6), inset -2px -2px 4px #ffffff; }
      .mlp-bc-app .search svg { color: #b0bacb; }
      .mlp-bc-app .expbtn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 10px; color: #fff; font: 600 10.5px/1 Poppins, system-ui, sans-serif; background: linear-gradient(150deg, #38BDF8, #0EA5E9); box-shadow: 0 8px 18px -8px rgba(14,165,233,0.75); transition: box-shadow 0.3s ease, transform 0.2s ease; }
      .mlp-bc-app .expbtn.aim { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(56,189,248,0.32), 0 10px 20px -8px rgba(14,165,233,0.9); }
      .mlp-bc-app .expbtn.aim::after { content: attr(data-ref); position: absolute; top: -8px; right: 6px; padding: 2px 5px; border-radius: 5px; background: #0369A1; color: #fff; font: 800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; }
      .mlp-bc-app .tbl { display: flex; flex-direction: column; }
      .mlp-bc-app .th, .mlp-bc-app .tr { display: grid; grid-template-columns: 20px 1.15fr 1.5fr 0.7fr 0.85fr 0.72fr; gap: 10px; align-items: center; }
      .mlp-bc-app .th { padding: 0 11px 8px; font: 700 7px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #aab4c4; }
      .mlp-bc-app .th .r { text-align: right; }
      .mlp-bc-app .tr { padding: 8px 11px; border-radius: 11px; background: #ffffff; box-shadow: 3px 3px 8px rgba(174,188,209,0.42), -3px -3px 7px #ffffff; transition: box-shadow 0.3s ease, transform 0.2s ease; }
      .mlp-bc-app .tr + .tr { margin-top: 6px; }
      .mlp-bc-app .tr.on { box-shadow: 0 0 0 1.5px #38BDF8, 4px 4px 11px rgba(56,189,248,0.28), -3px -3px 7px #ffffff; }
      .mlp-bc-app .tick { width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; color: #fff; background: #eef1f7; box-shadow: inset 2px 2px 4px rgba(174,188,209,0.65), inset -1px -1px 3px #ffffff; }
      .mlp-bc-app .tr.on .tick { background: linear-gradient(150deg, #7dd3fc, #0EA5E9); box-shadow: 0 3px 7px -1px rgba(56,189,248,0.7); }
      .mlp-bc-app .inv { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 Poppins, system-ui, sans-serif; color: #0f172a; }
      .mlp-bc-app .inv svg { color: #b0bacb; flex: 0 0 auto; }
      .mlp-bc-app .cust { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font: 500 10.5px/1 Poppins, system-ui, sans-serif; color: #475569; }
      .mlp-bc-app .cust .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .mlp-bc-app .avi { width: 21px; height: 21px; border-radius: 50%; flex: 0 0 21px; display: grid; place-items: center; font: 800 8px/1 Poppins, system-ui, sans-serif; color: #fff; box-shadow: 0 3px 8px -3px rgba(15,23,42,0.4); }
      .mlp-bc-app .dt { font: 500 10px/1 Poppins, system-ui, sans-serif; color: #94a3b8; }
      .mlp-bc-app .amt { font: 700 11px/1 Poppins, system-ui, sans-serif; color: #0f172a; text-align: right; font-variant-numeric: tabular-nums; }
      .mlp-bc-app .pay { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 700 8px/1 Poppins, system-ui, sans-serif; color: #047857; background: rgba(16,185,129,0.12); font-style: normal; }
      .mlp-bc-app .pay::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #10b981; box-shadow: 0 0 5px #10b981; }
      .mlp-bc-app .foot { margin-top: auto; padding-top: 10px; font: 500 9px/1 Poppins, system-ui, sans-serif; color: #aab4c4; }
      .mlp-bc-app .expcard { border-radius: 13px; background: #ffffff; padding: 4px 15px; margin-bottom: 15px; box-shadow: 6px 6px 15px rgba(174,188,209,0.42), -5px -5px 12px #ffffff; }
      .mlp-bc-app .exprow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; }
      .mlp-bc-app .exprow + .exprow { border-top: 1px solid rgba(148,163,184,0.16); }
      .mlp-bc-app .exprow .k { font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #aab4c4; }
      .mlp-bc-app .exprow .v { font: 600 11px/1 Poppins, system-ui, sans-serif; color: #0f172a; }
      .mlp-bc-app .exprow .chips { display: inline-flex; gap: 6px; }
      .mlp-bc-app .exprow .chips em { font-style: normal; padding: 4px 8px; border-radius: 7px; font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; color: #0369A1; background: rgba(56,189,248,0.1); }
      /* Download action (neu, violet) */
      .mlp-bc-hc-dl { position: relative; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 11px; background: linear-gradient(150deg, #A78BFA, #7C3AED); color: #fff; font: 700 11.5px/1 Poppins, system-ui, sans-serif; box-shadow: 0 12px 24px -12px #7C3AED, inset 0 1px 0 rgba(255,255,255,0.3); transition: transform 0.15s ease; }
      .mlp-bc-hc-dl.press { transform: scale(0.96); }
      .mlp-bc-hc-dl::after { content: attr(data-ref); position: absolute; top: -8px; right: 8px; padding: 2px 5px; border-radius: 5px; background: #7C3AED; color: #fff; font: 800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; }
      /* Reading scan sweep + product-console event banner + traveling cursor */
      .mlp-bc-hc-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; background: linear-gradient(90deg, transparent, #38BDF8, transparent); box-shadow: 0 0 12px #38BDF8; animation: mlp-bc-hc-scan 1.15s ease-in-out infinite; }
      @keyframes mlp-bc-hc-scan { 0% { top: 4%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 96%; opacity: 0; } }
      .mlp-bc-hc-evt { position: absolute; left: 10px; bottom: 10px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(2,6,23,0.82); color: #7dd3fc; font: 800 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.02em; backdrop-filter: blur(8px); border: 1px solid rgba(56,189,248,0.4); animation: mlp-bc-hc-evtin 0.4s ease; }
      .mlp-bc-hc-evt.popup { color: #FBBF24; border-color: rgba(245,158,11,0.5); }
      @keyframes mlp-bc-hc-evtin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
      .mlp-bc-hc-cursor { position: absolute; z-index: 20; pointer-events: none; margin: -2px 0 0 -2px; transform: translateZ(0); transition: transform 0.12s ease; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); will-change: left, top; }
      .mlp-bc-hc-cursor.press { transform: scale(0.82); }
      .mlp-bc-hc-cursor .rip { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #38BDF8; transform: translate(-50%, -50%); animation: mlp-bc-hc-rip 0.7s ease-out; }
      @keyframes mlp-bc-hc-rip { from { opacity: 0.6; transform: translate(-50%, -50%) scale(0.4); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }
      @media (prefers-reduced-motion: reduce) {
        .mlp-bc-hc-scan, .mlp-bc-hc-tab.spawn, .mlp-bc-hc-cursor, .mlp-bc-hc-cursor .rip, .mlp-bc-hc-line .dot, .mlp-bc-hc-state i, .mlp-bc-hc-evt { animation: none; }
        .mlp-bc-hc-cursor { transition: none; }
      }
      .mlp-bc-hero-foot { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; background: transparent; box-shadow: var(--neo-sep-top); }
      .mlp-bc-hero-foot .live { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font: 800 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.09em; text-transform: uppercase; color: #6EE7B7; }
      .light .mlp-bc-hero-foot .live { color: #047857; }
      .mlp-bc-hero-foot .live i { width: 7px; height: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 8px rgba(16,185,129,0.7); animation: mlp-bc-pulse 2.4s ease-in-out infinite; }
      .mlp-bc-hero-foot .cap { flex: 1; min-width: 0; text-align: center; font: 600 9px/1.3 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.03em; color: var(--neo-chrome-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .mlp-bc-hero-foot .stop { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 9px; font: 800 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #FDA4AF; background: transparent; box-shadow: var(--neo-chip); }
      .light .mlp-bc-hero-foot .stop { color: #E11D48; }

      /* == Mobile hero: reshape the desktop browser into a clean phone card ==
         CSS ONLY. Every element the storyline measures (the invoice rows, the
         Export link, the spawned tab, the download button, the command text and
         the traveling cursor) stays in the DOM and stays sized; we only hide
         non-essential chrome (window caps, the extra background tab, nav glyphs,
         the app sidebar, the search field and dropped table columns) and reflow
         the invoice table from a 6-column grid into stacked row cards. */
      @media (max-width: 640px) {
        .mlp-bc-hc { width: 100%; border-radius: 16px; }
        .mlp-bc-hc-wincaps, .mlp-bc-hc-newtab, .mlp-bc-hc-tab.rest, .mlp-bc-hc-nav, .mlp-bc-app .search, .mlp-bc-app .th, .mlp-bc-app .dt, .mlp-bc-app .side { display: none; }
        .mlp-bc-hc-titlebar { padding: 8px 10px 6px; gap: 6px; }
        .mlp-bc-hc-tab { max-width: 138px; padding: 6px 9px; font-size: 10px; }
        .mlp-bc-hc-state { padding: 4px 8px; font-size: 7.5px; }
        .mlp-bc-hc-toolbar { padding: 7px 10px 8px; gap: 8px; }
        .mlp-bc-hc .mlp-bc-address { font-size: 9.5px; padding: 7px 12px; }
        .mlp-bc-cmd { margin: 8px 10px; }
        .mlp-bc-cmd-text { white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.7em; }
        .mlp-bc-hc-line { padding: 7px 12px; font-size: 9px; }
        .mlp-bc-hc-view { height: 226px; margin: 2px 10px 10px; }
        .mlp-bc-app .main { padding: 11px 12px; }
        .mlp-bc-app .apphead { gap: 8px; margin-bottom: 10px; }
        .mlp-bc-app .ht .ttl { font-size: 15px; }
        .mlp-bc-app .expbtn { padding: 7px 11px; font-size: 10px; }
        .mlp-bc-app .tr { grid-template-columns: 18px minmax(0,1fr) auto; grid-template-areas: "tick inv amt" "tick cust pay"; column-gap: 9px; row-gap: 2px; padding: 9px 11px; }
        .mlp-bc-app .tr + .tr { margin-top: 7px; }
        .mlp-bc-app .tick { grid-area: tick; align-self: center; }
        .mlp-bc-app .inv { grid-area: inv; font-size: 11px; }
        .mlp-bc-app .cust { grid-area: cust; font-size: 10px; }
        .mlp-bc-app .avi { width: 17px; height: 17px; flex-basis: 17px; font-size: 7px; }
        .mlp-bc-app .amt { grid-area: amt; font-size: 11px; }
        .mlp-bc-app .st { grid-area: pay; justify-self: end; }
        .mlp-bc-app .foot { padding-top: 8px; font-size: 8.5px; }
        .mlp-bc-app .expcard { padding: 2px 12px; margin-bottom: 12px; }
        .mlp-bc-app .exprow { padding: 9px 0; gap: 8px; }
        .mlp-bc-app .exprow .chips { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
        .mlp-bc-hero-foot { padding: 8px 11px 10px; gap: 8px; }
        .mlp-bc-hero-foot .cap { font-size: 8.5px; }
      }
      @media (max-width: 400px) {
        .mlp-bc-hc-view { height: 220px; }
        .mlp-bc-hc-tab { max-width: 104px; }
        .mlp-bc-app .cust .nm { max-width: 88px; }
        .mlp-bc-hero-foot .cap { display: none; }
      }

      /* Demo section layout: window + trace side by side */
      .mlp-bc-demo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr); gap: clamp(18px, 3vw, 34px); margin-top: clamp(30px, 5vh, 52px); align-items: start; }
      /* ── Live tool tape: a vertical spine of verified steps ── */
      .mlp-bc-tape { position: relative; border-radius: 18px; padding: clamp(18px, 2vw, 24px); border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1b2029 0%, #12151c 100%); box-shadow: 6px 6px 16px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.045), inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bc-tape { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff 0%, #dfe3ea 100%); box-shadow: 7px 7px 15px rgba(150,161,183,0.5), -6px -6px 13px rgba(255,255,255,0.92), inset 0 1px 0 rgba(255,255,255,0.6); }
      .mlp-bc-tape-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font: 700 8.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mel-text-muted); }
      .mlp-bc-tape-head .live { display: inline-flex; align-items: center; gap: 7px; color: #34D399; }
      .light .mlp-bc-tape-head .live { color: #047857; }
      .mlp-bc-tape-head .live i { width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9ffe9, #10B981 55%, #047857); box-shadow: 0 0 7px #34D399, inset 0 0 2px rgba(255,255,255,0.7); animation: mlp-bci-led 2.6s ease-in-out infinite; }
      .mlp-bc-steps { list-style: none; margin: 0; padding: 0; }
      .mlp-bc-step { position: relative; display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding-bottom: 20px; }
      .mlp-bc-step:last-child { padding-bottom: 0; }
      .mlp-bc-step .rail { position: relative; display: flex; justify-content: center; }
      .mlp-bc-step:not(:last-child) .rail::before { content: ""; position: absolute; top: 16px; bottom: -6px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(148,163,184,0.18); transition: background 0.4s ease; }
      .mlp-bc-step.done .rail::before { background: linear-gradient(180deg, #34D399 0%, rgba(52,211,153,0.22) 100%); }
      .mlp-bc-step .dot { position: relative; z-index: 1; margin-top: 2px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3c4658, #12151c); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8), 0 0 0 3px rgba(0,0,0,0.22); }
      .light .mlp-bc-step .dot { background: radial-gradient(circle at 35% 30%, #cbd2dd, #aab2c0); box-shadow: inset 1px 1px 2px rgba(140,152,175,0.7), 0 0 0 3px rgba(255,255,255,0.5); }
      .mlp-bc-step.done .dot { background: radial-gradient(circle at 35% 30%, #c9ffe9, #10B981 55%, #047857); box-shadow: 0 0 8px #34D399, inset 0 0 2px rgba(255,255,255,0.7); }
      .mlp-bc-step.active .dot { background: radial-gradient(circle at 35% 30%, #bfe9ff, #0EA5E9 55%, #0369A1); box-shadow: 0 0 8px #38BDF8, inset 0 0 2px rgba(255,255,255,0.7); animation: mlp-bci-led 1.3s ease-in-out infinite; }
      .mlp-bc-step.hold .dot { background: radial-gradient(circle at 35% 30%, #ffe9b0, #F59E0B 55%, #B45309); box-shadow: 0 0 9px #F59E0B, inset 0 0 2px rgba(255,255,255,0.7); animation: mlp-bci-led 1.1s ease-in-out infinite; }
      .mlp-bc-step .body { min-width: 0; }
      .mlp-bc-step .body code { display: block; color: #7dd3fc; font: 500 11px/1.45 'JetBrains Mono', ui-monospace, monospace; overflow-wrap: anywhere; min-height: 15px; }
      .light .mlp-bc-step .body code { color: #0369A1; }
      .mlp-bc-step.hold .body code { color: #FBBF24; }
      .light .mlp-bc-step.hold .body code { color: #B45309; }
      .mlp-bc-step .body p { margin: 4px 0 0; color: var(--mel-text-secondary); font: 450 10.5px/1.45 Poppins, system-ui, sans-serif; }
      .mlp-bc-step.pending { opacity: 0.5; }
      .mlp-bc-step .chip { display: inline-flex; align-items: center; margin-top: 9px; padding: 5px 11px; border-radius: 999px; font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #FBBF24; border: 1px solid #F59E0B44; background: #F59E0B12; }
      .light .mlp-bc-step .chip { color: #B45309; border-color: transparent; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); box-shadow: 3px 3px 6px rgba(150,161,183,0.5), -2px -2px 5px rgba(255,255,255,0.92); }

      /* ══ Precision-instrument neu language (panels · keys · displays · LEDs) ══ */
      .mlp-bci-panel {
        position: relative; border-radius: 18px; padding: clamp(16px, 2vw, 22px);
        border: 1px solid rgba(255,255,255,0.05);
        background: linear-gradient(150deg, #1b2029 0%, #12151c 100%);
        box-shadow: 6px 6px 16px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.045), inset 0 1px 0 rgba(255,255,255,0.05);
      }
      .light .mlp-bci-panel {
        border-color: rgba(90,105,130,0.14);
        background: linear-gradient(150deg, #ffffff 0%, #dfe3ea 100%);
        box-shadow: 7px 7px 15px rgba(150,161,183,0.5), -6px -6px 13px rgba(255,255,255,0.92), inset 0 1px 0 rgba(255,255,255,0.6);
      }
      .mlp-bci-panel::before { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background-image: linear-gradient(var(--mlp-bci-grid, rgba(255,255,255,0.016)) 1px, transparent 1px), linear-gradient(90deg, var(--mlp-bci-grid, rgba(255,255,255,0.016)) 1px, transparent 1px); background-size: 19px 19px; opacity: 0.7; }
      .light .mlp-bci-panel { --mlp-bci-grid: rgba(90,105,130,0.05); }
      .mlp-bci-panel > * { position: relative; z-index: 1; }

      .mlp-bci-screw { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #090b10; box-shadow: inset 1px 1px 2px rgba(0,0,0,0.9), inset -1px -1px 1px rgba(255,255,255,0.05); opacity: 0.7; z-index: 2; }
      .light .mlp-bci-screw { background: #c7ccd6; box-shadow: inset 1px 1px 2px rgba(140,152,175,0.7), inset -1px -1px 1px rgba(255,255,255,0.9); }
      .mlp-bci-screw.tl { top: 10px; left: 10px; } .mlp-bci-screw.tr { top: 10px; right: 10px; }
      .mlp-bci-screw.bl { bottom: 10px; left: 10px; } .mlp-bci-screw.br { bottom: 10px; right: 10px; }

      .mlp-bci-eyebrow { display: flex; align-items: center; gap: 9px; font: 700 8.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mel-text-muted, rgba(148,163,184,0.7)); }
      .mlp-bci-eyebrow .ln { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(148,163,184,0.28), transparent); }
      .mlp-bci-sublabel { margin: 15px 0 8px; font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mel-text-muted, rgba(148,163,184,0.6)); }
      .mlp-bci-seam { height: 1px; margin: 15px 0; background: rgba(0,0,0,0.4); box-shadow: 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bci-seam { background: rgba(140,152,175,0.35); box-shadow: 0 1px 0 rgba(255,255,255,0.8); }

      /* LED indicator, accent shows ONLY here */
      .mlp-bci-led { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bfe9ff, #0EA5E9 55%, #0369A1); box-shadow: 0 0 7px #38BDF8, 0 0 2px #38BDF8, inset 0 0 2px rgba(255,255,255,0.7); animation: mlp-bci-led 2.6s ease-in-out infinite; }
      .mlp-bci-led.g { background: radial-gradient(circle at 35% 30%, #c9ffe9, #10B981 55%, #047857); box-shadow: 0 0 7px #34D399, 0 0 2px #34D399, inset 0 0 2px rgba(255,255,255,0.7); }
      .mlp-bci-led.a { background: radial-gradient(circle at 35% 30%, #ffe9b0, #F59E0B 55%, #B45309); box-shadow: 0 0 7px #F59E0B, 0 0 2px #F59E0B, inset 0 0 2px rgba(255,255,255,0.7); }
      .mlp-bci-led.off { background: radial-gradient(circle at 35% 30%, #3c4658, #12151c); box-shadow: inset 1px 1px 2px rgba(0,0,0,0.8); animation: none; }
      @keyframes mlp-bci-led { 0%,100% { opacity: 1; } 50% { opacity: 0.58; } }

      /* Hardware keys (engine selector): active key presses in + lights its LED */
      .mlp-bci-keys { display: flex; gap: 9px; }
      .mlp-bci-key { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 13px 8px; border-radius: 13px; cursor: default; color: var(--mel-text-secondary); border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1e242e 0%, #12151c 100%); box-shadow: 3px 3px 8px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05); transition: box-shadow .2s ease, color .2s ease; }
      .light .mlp-bci-key { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e2e6ee); box-shadow: 4px 4px 9px rgba(150,161,183,0.45), -3px -3px 7px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.55); }
      .mlp-bci-key.on { box-shadow: inset 3px 3px 7px rgba(0,0,0,0.7), inset -1px -1px 3px rgba(255,255,255,0.04); color: var(--mel-text-primary); }
      .light .mlp-bci-key.on { box-shadow: inset 3px 3px 6px rgba(150,161,183,0.6), inset -2px -2px 4px rgba(255,255,255,0.85); }
      .mlp-bci-key .kn { font: 600 10.5px/1 Poppins, system-ui, sans-serif; }
      .mlp-bci-kled { width: 5px; height: 5px; border-radius: 50%; background: #38BDF8; box-shadow: 0 0 6px #38BDF8; opacity: 0.2; transition: opacity .25s; }
      .mlp-bci-key.on .mlp-bci-kled { opacity: 1; }
      .mlp-bci-logo { display: block; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }

      /* Spec list: plain grouped readout rows (hairline-bounded, never sunk) */
      .mlp-bci-speclist { position: relative; margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.055); border-bottom: 1px solid rgba(255,255,255,0.055); }
      .light .mlp-bci-speclist { border-top-color: rgba(90,105,130,0.16); border-bottom-color: rgba(90,105,130,0.16); }
      .mlp-bci-row { display: flex; align-items: center; gap: 11px; padding: 10px 2px; }
      .mlp-bci-row + .mlp-bci-row { border-top: 1px solid rgba(255,255,255,0.045); }
      .light .mlp-bci-row + .mlp-bci-row { border-top-color: rgba(90,105,130,0.14); }
      .mlp-bci-row .k { flex: 0 0 54px; font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mel-text-muted); }
      .mlp-bci-row .v { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; color: var(--mel-text-primary); font: 600 11.5px/1.4 Poppins, system-ui, sans-serif; }
      .mlp-bci-row .v > svg { color: #38BDF8; flex: 0 0 auto; }
      .mlp-bci-row .vt { min-width: 0; }
      .mlp-bci-soon { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; font-style: normal; color: #FBBF24; border: 1px solid #F59E0B44; background: #F59E0B12; }
      .light .mlp-bci-soon { color: #B45309; border-color: transparent; background: linear-gradient(150deg, #FFFFFF, #E4E8EF); box-shadow: 3px 3px 6px rgba(150,161,183,0.5), -2px -2px 5px rgba(255,255,255,0.92); }

      /* Machined primary action + wax seal */
      .mlp-bci-grant-wrap { position: relative; margin-top: 15px; }
      .mlp-bci-act { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 14px; border-radius: 13px; cursor: default; overflow: hidden; border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1e242e 0%, #12151c 100%); box-shadow: 4px 4px 11px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.045), inset 0 1px 0 rgba(255,255,255,0.05); color: var(--mel-text-primary); font: 600 13px/1 Poppins, system-ui, sans-serif; }
      .light .mlp-bci-act { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e2e6ee); box-shadow: 5px 5px 12px rgba(150,161,183,0.5), -4px -4px 10px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.6); }
      .mlp-bci-act > svg { color: #38BDF8; flex: 0 0 auto; }
      .mlp-bci-act .mlp-bci-trace { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, #38BDF8, transparent); box-shadow: 0 0 8px #38BDF8; transform: scaleX(0.28); opacity: 0.6; animation: mlp-bci-sweep 3.4s ease-in-out infinite; }
      @keyframes mlp-bci-sweep { 0%,100% { transform: scaleX(0.24); opacity: 0.45; } 50% { transform: scaleX(1); opacity: 1; } }
      .mlp-bci-note { margin: 11px 0 0; text-align: center; font: 600 8.5px/1.5 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mel-text-muted); }
      .mlp-bci-seal { position: absolute; right: 12px; top: 50%; margin-top: -15px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; }

      /* Engine modules list */
      .mlp-bci-emlist { margin-top: 14px; }
      .mlp-bci-emrow { display: flex; align-items: center; gap: 14px; padding: 12px 2px; }
      .mlp-bci-emrow + .mlp-bci-emrow { border-top: 1px solid rgba(255,255,255,0.05); }
      .light .mlp-bci-emrow + .mlp-bci-emrow { border-top-color: rgba(90,105,130,0.14); }
      .mlp-bci-emkey { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 13px; border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1e242e, #12151c); box-shadow: 3px 3px 8px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bci-emkey { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e2e6ee); box-shadow: 4px 4px 9px rgba(150,161,183,0.45), -3px -3px 7px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.55); }
      .mlp-bci-emrow .emtx { min-width: 0; flex: 1; }
      .mlp-bci-emrow .emtx strong { display: block; font: 600 13px/1.2 Poppins, system-ui, sans-serif; color: var(--mel-text-primary); }
      .mlp-bci-emrow .emtx p { margin: 3px 0 0; color: var(--mel-text-secondary); font: 450 11.5px/1.5 Poppins, system-ui, sans-serif; }
      .mlp-bci-stat { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mel-text-muted); box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5), inset -1px -1px 2px rgba(255,255,255,0.04); }
      .light .mlp-bci-stat { box-shadow: inset 2px 2px 5px rgba(150,161,183,0.4), inset -1px -1px 2px rgba(255,255,255,0.85); }

      /* WHAT IT IS: four "how it browses" beats as glass cells */
      .mlp-bc-what-grid {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(12px, 1.6vw, 18px); width: 100%; margin-top: 8px; text-align: left;
      }
      .mlp-bc-what-cell {
        display: flex; gap: 13px; align-items: flex-start;
        padding: clamp(15px, 1.8vw, 20px);
        border-radius: 18px;
        border: 1px solid rgba(148,163,184,0.16);
        background: rgba(255,255,255,0.04);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        box-shadow: 0 1px 2px rgba(0,0,0,0.42), 0 14px 34px -24px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
        transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
      }
      .mlp-bc-what-cell:hover {
        transform: translateY(-3px); border-color: #38BDF844;
        box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 20px 42px -22px rgba(0,0,0,0.62), 0 0 0 1px #38BDF822, inset 0 1px 0 rgba(255,255,255,0.08);
      }
      .light .mlp-bc-what-cell {
        border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.72);
        box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 12px 28px -20px rgba(16,24,40,0.16), inset 0 1px 0 rgba(255,255,255,0.9);
      }
      .light .mlp-bc-what-cell:hover { border-color: #38BDF855; box-shadow: 0 2px 4px rgba(16,24,40,0.07), 0 16px 32px -18px rgba(16,24,40,0.2), 0 0 0 1px #38BDF822, inset 0 1px 0 rgba(255,255,255,0.95); }
      .mlp-bc-what-cell .ico { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 12px; color: #38BDF8; border: 1px solid #38BDF844; background: #38BDF812; }
      .mlp-bc-what-cell:nth-child(3) .ico { color: #10B981; border-color: #10B98144; background: #10B98112; }
      .mlp-bc-what-cell:nth-child(4) .ico { color: #8B5CF6; border-color: #8B5CF644; background: #8B5CF612; }
      .mlp-bc-what-cell p { margin: 3px 0 0; color: var(--mel-text-secondary); font: 450 13.5px/1.55 Poppins, system-ui, sans-serif; }
      @media (prefers-reduced-motion: reduce) {
        .mlp-bc-what-cell { transition: none; }
        .mlp-bc-what-cell:hover { transform: none; }
      }
      @media (max-width: 720px) { .mlp-bc-what-grid { grid-template-columns: 1fr; } }

      .mlp-bc-security-list { display: grid; gap: 10px; margin-top: 0; }
      .mlp-bc-security-list > div { display: flex; gap: 11px; align-items: flex-start; color: var(--mel-text-secondary); font: 450 14px/1.55 Poppins, system-ui, sans-serif; }
      .mlp-bc-security-list > div > span { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #10B981; box-shadow: 0 0 12px #10B981; }

      /* ── Where to start: two paths, each shown as a real micro-UI ── */
      .mlp-bc-start-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); margin-top: clamp(28px, 4vh, 46px); }
      @media (max-width: 760px) { .mlp-bc-start-grid { grid-template-columns: 1fr; } }
      .mlp-bc-start-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid rgba(148,163,184,0.16); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)); box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 24px 52px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06); transition: transform .26s cubic-bezier(.2,.7,.3,1), border-color .26s ease, box-shadow .26s ease; }
      .light .mlp-bc-start-card { border-color: rgba(15,23,42,0.08); background: #ffffff; box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 18px 40px -26px rgba(16,24,40,0.2), inset 0 1px 0 #ffffff; }
      .mlp-bc-start-card:hover { transform: translateY(-4px); border-color: rgba(148,163,184,0.3); box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 32px 62px -30px rgba(0,0,0,0.78), inset 0 1px 0 rgba(255,255,255,0.08); }
      .mlp-bc-start-card.primary { border-color: #38BDF844; }
      .mlp-bc-start-card.primary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, #38BDF8, #8B5CF6, transparent); }

      /* Scene stage */
      .mlp-bc-start-card .scene { position: relative; height: 132px; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(148,163,184,0.12); background: radial-gradient(130% 130% at 50% -10%, #38BDF814, transparent 60%); }
      .light .mlp-bc-start-card .scene { background: radial-gradient(130% 130% at 50% -10%, #38BDF818, #f3f6fb 64%); border-bottom-color: rgba(15,23,42,0.06); }
      .mlp-bc-start-card .scene::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(72% 72% at 50% 42%, #000, transparent); mask-image: radial-gradient(72% 72% at 50% 42%, #000, transparent); opacity: 0.55; }
      .mlp-bc-start-card:hover .scene .win { transform: translateY(-2px); }
      .mlp-bc-start-card:hover .scene .bar { transform: translateY(-2px); }

      /* Scene A: a mini Melaya window with a Launch action */
      .sceneA .win { position: relative; z-index: 1; width: 182px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(148,163,184,0.22); background: #0c1220; box-shadow: 0 20px 42px -18px rgba(0,0,0,0.72); transition: transform .26s cubic-bezier(.2,.7,.3,1); }
      .sceneA .wtop { display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: rgba(255,255,255,0.06); }
      .sceneA .mk { width: 17px; height: 17px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
      .sceneA .wt { font: 700 9.5px/1 Poppins, system-ui, sans-serif; color: #e6edf7; margin-right: auto; }
      .sceneA .dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 8px #34D399; animation: mlp-bc-pulse 2.4s ease-in-out infinite; }
      .sceneA .wbody { display: grid; place-items: center; padding: 17px 0 19px; }
      .sceneA .launch { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 9px; font: 700 10.5px/1 Poppins, system-ui, sans-serif; color: #eaf6ff; background: linear-gradient(150deg, #0EA5E9, #0369A1); box-shadow: 0 9px 20px -6px rgba(3,105,161,0.8), inset 0 1px 0 rgba(255,255,255,0.25); }
      .sceneA .launch svg { color: #eaf6ff; }

      /* Scene B: a browser toolbar with the Melaya extension pinned */
      .sceneB .bar { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: 216px; padding: 9px 11px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.08); background: #ffffff; box-shadow: 0 18px 38px -18px rgba(16,24,40,0.42); transition: transform .26s cubic-bezier(.2,.7,.3,1); }
      .sceneB .addr { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #f1f4f9; color: #94a3b8; font: 600 9px/1 'JetBrains Mono', ui-monospace, monospace; }
      .sceneB .addr svg { color: #94a3b8; }
      .sceneB .exts { display: inline-flex; align-items: center; gap: 8px; color: #b0bacb; }
      .sceneB .pin { position: relative; width: 25px; height: 25px; border-radius: 7px; display: grid; place-items: center; background: #eef3fb; box-shadow: inset 0 0 0 1.5px #38BDF8; }
      .sceneB .pin .mk { width: 17px; height: 17px; object-fit: contain; }
      .sceneB .pin::after { content: ""; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #38BDF8; box-shadow: 0 0 0 2px #fff, 0 0 8px #38BDF8; }

      /* Card body */
      .mlp-bc-start-card .cbody { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 26px); }
      .mlp-bc-start-card .ix { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; }
      .mlp-bc-start-card .no { font: 800 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; color: #38BDF8; }
      .light .mlp-bc-start-card .no { color: #0369A1; }
      .mlp-bc-start-card .badge { font: 800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mel-text-muted); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(148,163,184,0.22); }
      .mlp-bc-start-card.primary .badge { color: #7dd3fc; border-color: #38BDF844; background: #38BDF810; }
      .light .mlp-bc-start-card.primary .badge { color: #0369A1; }
      .mlp-bc-start-card h3 { margin: 0 0 8px; font: 700 clamp(1.18rem, 1.4vw, 1.42rem)/1.2 Poppins, system-ui, sans-serif; letter-spacing: -0.02em; color: var(--mel-text-primary); }
      .mlp-bc-start-card .cbody > p { margin: 0 0 22px; font: 450 13.5px/1.62 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }
      /* Neumorphic CTAs: blue ink + blue-tint drop shadow, never dark text on blue. Centered. */
      .mlp-bc-start-card .cta { margin-top: auto; align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border-radius: 13px; font: 600 12.5px/1 Poppins, system-ui, sans-serif; text-decoration: none; color: var(--mel-text-secondary); border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1a2337, #0e1626); box-shadow: 4px 4px 10px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.045), inset 0 1px 0 rgba(255,255,255,0.05); transition: transform .2s ease, box-shadow .2s ease, color .2s ease; }
      .light .mlp-bc-start-card .cta { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e9edf4); box-shadow: 5px 5px 12px rgba(150,161,183,0.5), -4px -4px 10px #ffffff, inset 0 1px 0 rgba(255,255,255,0.6); }
      .mlp-bc-start-card .cta:hover { transform: translateY(-2px); color: var(--mel-text-primary); }
      .mlp-bc-start-card .cta:active { transform: translateY(0); box-shadow: inset 3px 3px 7px rgba(0,0,0,0.55), inset -1px -1px 3px rgba(255,255,255,0.05); }
      .light .mlp-bc-start-card .cta:active { box-shadow: inset 3px 3px 6px rgba(150,161,183,0.6), inset -2px -2px 4px #ffffff; }
      .mlp-bc-start-card .cta.primary { color: #7dd3fc; border-color: #38BDF82e; box-shadow: 4px 4px 10px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.045), 0 13px 28px -12px #38BDF8, inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bc-start-card .cta.primary { color: #0369A1; border-color: #38BDF833; box-shadow: 5px 5px 12px rgba(150,161,183,0.5), -4px -4px 10px #ffffff, 0 13px 26px -12px #38BDF888, inset 0 1px 0 rgba(255,255,255,0.6); }
      .mlp-bc-start-card .cta.primary:hover { box-shadow: 4px 4px 10px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.045), 0 17px 34px -12px #38BDF8, inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bc-start-card .cta.primary:hover { box-shadow: 5px 5px 12px rgba(150,161,183,0.5), -4px -4px 10px #ffffff, 0 17px 32px -12px #38BDF8, inset 0 1px 0 rgba(255,255,255,0.6); }
      .mlp-bc-start-card .cta svg { transition: transform .2s ease; }
      .mlp-bc-start-card .cta:hover svg { transform: translateX(3px); }

      /* "Two ways in" — extension store marks (Chrome, Edge, Brave, Firefox).
         Bare logos casting their own brand-coloured drop-shadow (the onboarding
         treatment), name below, in a centred one-row band. Far lighter than four
         pill buttons, so this card stays balanced with the launch card. The row
         wraps to 2x2 on narrow phones. */
      .mlp-bc-ext-stores { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 20px 30px; }
      .mlp-bc-ext-store { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; cursor: pointer; transition: transform .2s ease; }
      .mlp-bc-ext-store img { width: 40px; height: 40px; object-fit: contain; display: block; }
      .mlp-bc-ext-store span { font: 700 11.5px/1 Poppins, system-ui, sans-serif; letter-spacing: 0.01em; color: var(--mel-text-secondary); }
      .mlp-bc-ext-store:hover { transform: translateY(-4px); }
      .mlp-bc-ext-store:hover span { color: var(--mel-text-primary); }
      @media (max-width: 480px) { .mlp-bc-ext-stores { gap: 18px 26px; } .mlp-bc-ext-store img { width: 36px; height: 36px; } }
      /* The second tier under the store marks: a hairline rule and a quiet row,
         so it reads as a footnote to the four links rather than a fifth option. */
      .mlp-bc-ext-compat { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
      .light .mlp-bc-ext-compat { border-top-color: rgba(90,105,130,0.16); }

      /* "Now live" band CTA.
         Was a flat, fully saturated cyan-to-violet slab with a coloured drop
         shadow - loud, and the only thing on the page not speaking the
         neumorphic language every other raised surface uses. It is now a raised
         pill on the same dual-shadow spec as .mlp-bc-tape, carrying its own
         browser mark, with the accent moved to a RIM and a HALO. On a dark
         ground attention is cast as light, never as a black-on-black shadow. */
      .mlp-bc-band-btn {
        display: inline-flex; align-items: center; gap: 9px;
        min-height: 42px; padding: 0 17px; border-radius: 13px;
        font: 700 13px/1 Poppins, system-ui, sans-serif; text-decoration: none;
        color: var(--mel-text-primary, #EEF1FB);
        background: linear-gradient(150deg, #1b2029 0%, #12151c 100%);
        border: 1px solid #38BDF838;
        box-shadow: 6px 6px 16px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.045),
                    inset 0 1px 0 rgba(255,255,255,0.05), 0 0 18px -6px #38BDF84D;
        transition: box-shadow .22s ease, border-color .22s ease, transform .18s ease;
      }
      .mlp-bc-band-btn img { display: block; width: 18px; height: 18px; object-fit: contain; }
      .mlp-bc-band-btn:hover {
        border-color: #38BDF870;
        box-shadow: 6px 6px 16px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.045),
                    inset 0 1px 0 rgba(255,255,255,0.08), 0 0 26px -4px #38BDF880;
      }
      .light .mlp-bc-band-btn {
        color: #0F172A;
        background: linear-gradient(150deg, #ffffff 0%, #dfe3ea 100%);
        border-color: rgba(90,105,130,0.18);
        box-shadow: 7px 7px 15px rgba(150,161,183,0.5), -6px -6px 13px rgba(255,255,255,0.92),
                    inset 0 1px 0 rgba(255,255,255,0.6);
      }
      .light .mlp-bc-band-btn:hover {
        border-color: #38BDF855;
        box-shadow: 7px 7px 15px rgba(150,161,183,0.5), -6px -6px 13px rgba(255,255,255,0.92),
                    inset 0 1px 0 rgba(255,255,255,0.6), 0 0 20px -8px #38BDF866;
      }

      @media (prefers-reduced-motion: reduce) { .mlp-bc-start-card, .mlp-bc-start-card .cta, .mlp-bc-start-card .cta svg, .mlp-bc-ext-store, .mlp-bc-start-card .scene .win, .mlp-bc-start-card .scene .bar, .sceneA .dot { transition: none; animation: none; } .mlp-bc-start-card:hover { transform: none; } }

      /* Approvals: the governance gate sits beside the guardrail list. */
      .mlp-bc-approvals-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 60px); align-items: center; margin-top: 34px; }
      @media (max-width: 980px) { .mlp-bc-approvals-grid { grid-template-columns: 1fr; gap: 30px; } }

      /* ── Approval checkpoint: a hazard barrier across the action lane ── */
      .mlp-bc-lane { display: flex; align-items: stretch; gap: 13px; margin-top: 18px; }
      .mlp-bc-lane .end { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; }
      .mlp-bc-lane .end .b { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--mel-text-secondary); border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1e242e, #12151c); box-shadow: 3px 3px 8px rgba(0,0,0,0.55), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bc-lane .end .b { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e2e6ee); box-shadow: 4px 4px 9px rgba(150,161,183,0.45), -3px -3px 7px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.55); }
      .mlp-bc-lane .end.site .b { color: #38BDF8; }
      .mlp-bc-lane .end small { font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mel-text-muted); }
      .mlp-bc-lane .track { position: relative; flex: 1; min-width: 0; align-self: center; height: 46px; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, #090b10, #0f131a); box-shadow: inset 3px 3px 7px rgba(0,0,0,0.7), inset -1px -1px 2px rgba(255,255,255,0.03); }
      .light .mlp-bc-lane .track { background: linear-gradient(150deg, #ccd1da, #e4e8ef); box-shadow: inset 3px 3px 7px rgba(150,161,183,0.5), inset -2px -2px 5px rgba(255,255,255,0.9); }
      .mlp-bc-lane .track .rail { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; transform: translateY(-50%); background: repeating-linear-gradient(90deg, rgba(148,163,184,0.3) 0 4px, transparent 4px 9px); }
      .mlp-bc-lane .packet { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 4px 9px; border-radius: 7px; white-space: nowrap; color: #04121F; font: 700 9px/1 'JetBrains Mono', ui-monospace, monospace; background: linear-gradient(150deg, #7dd3fc, #38BDF8); box-shadow: 0 4px 12px -3px #38BDF8; }
      .mlp-bc-lane .barrier { position: absolute; left: 50%; top: 5px; bottom: 5px; transform: translateX(-50%); z-index: 4; width: 16px; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 14px -3px #F59E0B; transition: transform 0.5s cubic-bezier(.5,0,.2,1), opacity 0.4s ease, box-shadow 0.4s ease; }
      .mlp-bc-lane .barrier .bars { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, #F59E0B 0 5px, #171008 5px 10px); }
      .mlp-bc-lane .barrier.held { box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 0 3px #F59E0B22, 0 0 18px -2px #F59E0B; }
      .mlp-bc-lane .barrier.open { transform: translateX(-50%) translateY(-190%); opacity: 0; box-shadow: 0 0 0 1px rgba(0,0,0,0.45), 0 0 18px -2px #10B981; }
      .mlp-bc-lane .barrier.open .bars { background: repeating-linear-gradient(45deg, #34D399 0 5px, #06251a 5px 10px); }

      .mlp-bc-verdict { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
      .light .mlp-bc-verdict { border-color: rgba(90,105,130,0.14); background: rgba(255,255,255,0.5); }
      .mlp-bc-verdict code { font: 600 11px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--mel-text-primary); }
      .mlp-bc-verdict code .ref { color: #38BDF8; }
      .mlp-bc-verdict .vs { margin-left: auto; font: 700 8px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; color: #FBBF24; }
      .light .mlp-bc-verdict .vs { color: #B45309; }
      .mlp-bc-verdict .vs.ok { color: #34D399; }
      .light .mlp-bc-verdict .vs.ok { color: #047857; }

      .mlp-bci-gactions { display: flex; gap: 9px; margin-top: 14px; }
      .mlp-bci-gbtn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 11px; cursor: default; font: 600 11px/1 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); border: 1px solid rgba(255,255,255,0.05); background: linear-gradient(150deg, #1e242e, #12151c); box-shadow: 3px 3px 8px rgba(0,0,0,0.5), -1px -1px 2px rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.05); }
      .light .mlp-bci-gbtn { border-color: rgba(90,105,130,0.14); background: linear-gradient(150deg, #ffffff, #e2e6ee); box-shadow: 4px 4px 9px rgba(150,161,183,0.45), -3px -3px 7px rgba(255,255,255,0.9), inset 0 1px 0 rgba(255,255,255,0.55); }
      .mlp-bci-gbtn.pri { flex: 1.6; color: #10B981; border-color: #10B98144; }
      .light .mlp-bci-gbtn.pri { color: #047857; }

      /* ── Reduced-motion: settle every instrument indicator ── */
      @media (prefers-reduced-motion: reduce) {
        .mlp-bci-led, .mlp-bci-act .mlp-bci-trace, .mlp-bc-tape-head .live i, .mlp-bc-step .dot { animation: none; }
      }

      @media (max-width: 920px) {
        .mlp-bc-article { grid-template-columns: 1fr; gap: 26px; }
        .mlp-bc-article.reverse .mlp-bc-section-head { order: 1; }
        .mlp-bc-article.reverse .mlp-bc-visual-slot { order: 2; }
        .mlp-bc-demo { grid-template-columns: 1fr; }
        .mlp-bc-hero { min-height: 0; padding: 16px 0; }
      }