.mlp-device-section-inner,
      .mlp-device-article {
        max-width: 1440px;
        margin: 0 auto;
      }
      .mlp-device-article {
        display: grid;
        grid-template-columns: minmax(0, 0.86fr) minmax(380px, 1.14fr);
        align-items: center;
        gap: clamp(32px, 6vw, 96px);
      }
      .mlp-device-article.reverse .mlp-device-section-head { order: 2; }
      .mlp-device-article.reverse .mlp-device-visual-slot { order: 1; }
      .mlp-device-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-device-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-device-visual-slot {
        min-width: 0;
      }
      .mlp-device-hero-sig {
        position: relative;
        min-height: min(620px, 72dvh);
        perspective: 1300px;
        transform-style: preserve-3d;
      }
      .mlp-device-hero-orbit {
        position: absolute;
        inset: 4% 2% 0;
        border-radius: 42px;
        background:
          radial-gradient(circle at 24% 18%, rgba(34,211,238,0.26), transparent 30%),
          radial-gradient(circle at 78% 70%, rgba(139,92,246,0.23), transparent 34%),
          linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
        border: 1px solid rgba(255,255,255,0.09);
        backdrop-filter: blur(18px) saturate(150%);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        mask-image: radial-gradient(circle at 50% 50%, black 52%, transparent 74%);
      }
      .mlp-device-hero-sig[data-light="true"] .mlp-device-hero-orbit {
        background:
          radial-gradient(circle at 24% 18%, rgba(34,211,238,0.28), transparent 30%),
          radial-gradient(circle at 78% 70%, rgba(139,92,246,0.22), transparent 34%),
          linear-gradient(135deg, rgba(255,255,255,0.74), rgba(255,255,255,0.20));
        border-color: rgba(15,23,42,0.08);
      }
      .mlp-device-hero-phone {
        position: absolute;
        transform-style: preserve-3d;
      }
      .mlp-device-hero-phone-iphone {
        left: 10%;
        top: 4%;
        z-index: 3;
      }
      .mlp-device-hero-phone-android {
        right: 8%;
        top: 17%;
        z-index: 4;
      }
      .mlp-device-phone-shell {
        position: relative;
        width: min(242px, 42vw);
        padding: 9px;
        border-radius: 46px;
        background: linear-gradient(145deg, #F8FAFC 0%, #94A3B8 46%, #0F172A 100%);
        border: 1px solid rgba(255,255,255,0.20);
        box-shadow:
          0 42px 110px rgba(0,0,0,0.45),
          inset 0 1px 0 rgba(255,255,255,0.62),
          inset 0 -18px 34px rgba(2,6,23,0.38);
      }
      .mlp-device-phone-android {
        border-radius: 34px;
        background: linear-gradient(145deg, #334155 0%, #0F172A 48%, #020617 100%);
      }
      .mlp-device-phone-btn {
        position: absolute;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(180deg, #CBD5E1, #334155);
        z-index: 0;
      }
      .mlp-device-phone-btn-left {
        left: -3px;
        top: 92px;
        height: 52px;
      }
      .mlp-device-phone-btn-right {
        right: -3px;
        top: 132px;
        height: 74px;
      }
      .mlp-device-phone-glass {
        position: relative;
        overflow: hidden;
        aspect-ratio: 9 / 19.4;
        border-radius: 37px;
        background: #020617;
        border: 1px solid rgba(255,255,255,0.12);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
      }
      .mlp-device-phone-android .mlp-device-phone-glass {
        border-radius: 26px;
      }
      .mlp-device-phone-glass img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
      .mlp-device-dynamic-island {
        position: absolute;
        top: 10px;
        left: 50%;
        width: 74px;
        height: 22px;
        border-radius: 999px;
        transform: translateX(-50%);
        background: rgba(2,6,23,0.96);
        box-shadow: 0 4px 12px rgba(0,0,0,0.32);
      }
      .mlp-device-punch-hole {
        position: absolute;
        top: 11px;
        left: 50%;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        transform: translateX(-50%);
        background: rgba(2,6,23,0.92);
        border: 1px solid rgba(255,255,255,0.18);
      }
      .mlp-device-screen-sheen {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(145deg, rgba(255,255,255,0.22), transparent 23%, transparent 72%, rgba(255,255,255,0.08));
        mix-blend-mode: screen;
      }
      .mlp-device-home-indicator {
        position: absolute;
        left: 50%;
        bottom: 8px;
        width: 74px;
        height: 4px;
        border-radius: 999px;
        transform: translateX(-50%);
        background: rgba(255,255,255,0.78);
      }
      .mlp-device-phone-label {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 18px;
        min-height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: rgba(2,6,23,0.68);
        border: 1px solid rgba(34,211,238,0.45);
        backdrop-filter: blur(12px) saturate(150%);
        -webkit-backdrop-filter: blur(12px) saturate(150%);
        color: #FFFFFF;
        font: 900 10px/1 Poppins, system-ui, sans-serif;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .mlp-device-hero-chip {
        position: absolute;
        z-index: 6;
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 13px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(2,6,23,0.48);
        backdrop-filter: blur(18px) saturate(160%);
        -webkit-backdrop-filter: blur(18px) saturate(160%);
        color: #FFFFFF;
        font: 800 10px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        box-shadow: 0 18px 54px rgba(0,0,0,0.24);
      }
      .mlp-device-hero-chip-top { left: 2%; top: 18%; }
      .mlp-device-hero-chip-bottom { right: 0; bottom: 14%; }
      .mlp-device-tool-surface,
      .mlp-device-allowlist,
      .mlp-device-mobile-app {
        position: relative;
        overflow: hidden;
        border-radius: 34px;
        border: 1px solid rgba(255,255,255,0.10);
        background:
          radial-gradient(circle at 18% 12%, rgba(34,211,238,0.16), transparent 32%),
          radial-gradient(circle at 88% 78%, rgba(139,92,246,0.15), transparent 34%),
          rgba(255,255,255,0.045);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        box-shadow: 0 34px 110px rgba(0,0,0,0.32);
      }
      .light .mlp-device-tool-surface,
      .light .mlp-device-allowlist,
      .light .mlp-device-mobile-app {
        border-color: rgba(15,23,42,0.08);
        background:
          radial-gradient(circle at 18% 12%, rgba(34,211,238,0.18), transparent 32%),
          radial-gradient(circle at 88% 78%, rgba(139,92,246,0.13), transparent 34%),
          rgba(255,255,255,0.72);
        box-shadow: 0 34px 100px rgba(15,23,42,0.14);
      }
      .mlp-device-tool-surface {
        padding: clamp(20px, 3vw, 34px);
      }
      .mlp-device-tool-glow {
        position: absolute;
        inset: -30%;
        background: conic-gradient(from 130deg, transparent, rgba(34,211,238,0.22), transparent, rgba(139,92,246,0.20), transparent);
        filter: blur(20px);
        opacity: 0.82;
      }
      .mlp-device-tool-header,
      .mlp-device-tool-grid,
      .mlp-device-tool-list {
        position: relative;
        z-index: 1;
      }
      .mlp-device-tool-header {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        color: var(--mel-text-tertiary);
        font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .mlp-device-tool-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-top: 24px;
      }
      .mlp-device-tool-verb,
      .mlp-device-tool-row,
      .mlp-device-loop-step,
      .mlp-device-setup-step,
      .mlp-device-faq {
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
      }
      .light .mlp-device-tool-verb,
      .light .mlp-device-tool-row,
      .light .mlp-device-loop-step,
      .light .mlp-device-setup-step,
      .light .mlp-device-faq {
        border-color: rgba(15,23,42,0.08);
        background: rgba(255,255,255,0.70);
      }
      .mlp-device-tool-verb {
        min-height: 98px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px;
        padding: 14px;
      }
      .mlp-device-tool-verb span,
      .mlp-device-loop-index,
      .mlp-device-setup-step span {
        color: #22D3EE;
        font: 900 11px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .mlp-device-tool-verb strong {
        color: var(--mel-text-primary);
        font: 700 18px/1.1 Poppins, system-ui, sans-serif;
      }
      .mlp-device-tool-list {
        display: grid;
        gap: 10px;
        margin-top: 12px;
      }
      .mlp-device-tool-row {
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: 12px;
        align-items: start;
        border-radius: 18px;
        padding: 14px;
      }
      .mlp-device-tool-row span {
        color: #8B5CF6;
        font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
      }
      .mlp-device-tool-row p,
      .mlp-device-loop-step p,
      .mlp-device-setup-step p,
      .mlp-device-faq p {
        margin: 0;
        color: var(--mel-text-secondary);
        line-height: 1.55;
        font-size: 14px;
      }
      .mlp-device-allowlist {
        padding: clamp(18px, 3vw, 30px);
      }
      .mlp-device-allowlist-search {
        height: 46px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 999px;
        padding: 0 16px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(2,6,23,0.32);
      }
      .light .mlp-device-allowlist-search { background: rgba(255,255,255,0.64); border-color: rgba(15,23,42,0.08); }
      .mlp-device-allowlist-search span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid #22D3EE;
        box-shadow: 8px 8px 0 -6px #22D3EE;
      }
      .mlp-device-allowlist-search p {
        margin: 0;
        color: var(--mel-text-tertiary);
        font-size: 13px;
      }
      .mlp-device-allowlist-rows {
        display: grid;
        gap: 11px;
        margin-top: 16px;
      }
      .mlp-device-app-row {
        display: grid;
        grid-template-columns: 46px 1fr auto;
        gap: 13px;
        align-items: center;
        padding: 12px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.052);
      }
      .light .mlp-device-app-row { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.70); }
      .mlp-device-app-icon {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(34,211,238,0.24), rgba(139,92,246,0.24));
        color: var(--mel-text-primary);
        font-weight: 900;
      }
      .mlp-device-app-row strong {
        display: block;
        color: var(--mel-text-primary);
        font-size: 14px;
      }
      .mlp-device-app-row p {
        margin: 3px 0 0;
        color: var(--mel-text-tertiary);
        font-size: 12px;
      }
      .mlp-device-toggle {
        position: relative;
        width: 48px;
        height: 28px;
        border-radius: 999px;
        background: rgba(148,163,184,0.28);
        border: 1px solid rgba(255,255,255,0.12);
      }
      .mlp-device-toggle i {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #FFFFFF;
        transition: transform 180ms ease;
      }
      .mlp-device-toggle.on {
        background: linear-gradient(135deg, #10B981, #22D3EE);
      }
      .mlp-device-toggle.on i { transform: translateX(20px); }
      .mlp-device-allowlist-note {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        margin-top: 16px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(16,185,129,0.10);
        border: 1px solid rgba(16,185,129,0.22);
      }
      .mlp-device-allowlist-note span {
        color: #10B981;
        font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .mlp-device-allowlist-note p {
        margin: 0;
        color: var(--mel-text-secondary);
        font-size: 13px;
        line-height: 1.5;
      }
      .mlp-device-loop {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: clamp(28px, 5vh, 54px);
      }
      .mlp-device-loop-step {
        position: relative;
        min-height: 250px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        border-radius: 26px;
        padding: 22px;
        overflow: hidden;
      }
      .mlp-device-loop-step::before {
        content: "";
        position: absolute;
        inset: -35% -20% auto auto;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(34,211,238,0.26), transparent 66%);
      }
      .mlp-device-loop-step h3 {
        margin: auto 0 0;
        color: var(--mel-text-primary);
        font: 700 clamp(1.25rem, 1vw + 1rem, 1.8rem)/1.1 Poppins, system-ui, sans-serif;
        letter-spacing: -0.03em;
      }
      .mlp-device-mobile-app {
        min-height: 560px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 34px;
      }
      .mlp-device-mobile-app .mlp-device-phone-shell {
        transform: rotate(-4deg) scale(0.92);
      }
      .mlp-device-working-card {
        position: absolute;
        z-index: 4;
        width: min(330px, 78%);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 26px;
        border: 1px solid rgba(255,255,255,0.14);
        background: rgba(2,6,23,0.64);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        padding: 22px;
        text-align: center;
        color: #FFFFFF;
        box-shadow: 0 28px 90px rgba(0,0,0,0.40);
      }
      .mlp-device-working-logo {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        margin: 0 auto 12px;
        border-radius: 14px;
        background: linear-gradient(135deg, #22D3EE, #8B5CF6);
        color: #020617;
        font-weight: 1000;
      }
      .mlp-device-working-card strong {
        font: 800 20px/1.1 Poppins, system-ui, sans-serif;
      }
      .mlp-device-working-card p {
        margin: 10px 0 0;
        color: rgba(255,255,255,0.72);
        font-size: 13px;
        line-height: 1.5;
      }
      .mlp-device-working-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
        margin-top: 16px;
      }
      .mlp-device-working-actions button {
        height: 38px;
        border: 0;
        border-radius: 12px;
        background: rgba(255,255,255,0.12);
        color: #FFFFFF;
        font-weight: 800;
      }
      .mlp-device-working-actions button:first-child {
        background: rgba(239,68,68,0.86);
      }
      .mlp-device-mobile-bullets {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
      }
      .mlp-device-mobile-bullets span {
        border-radius: 999px;
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.07);
        color: var(--mel-text-secondary);
        font-size: 12px;
      }
      .mlp-device-setup-rail {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin-top: clamp(28px, 5vh, 54px);
      }
      .mlp-device-setup-rail::before {
        content: "";
        position: absolute;
        left: 6%;
        right: 6%;
        top: 32px;
        height: 1px;
        background: linear-gradient(90deg, #F59E0B, #22D3EE, #8B5CF6);
        opacity: 0.42;
      }
      .mlp-device-setup-step {
        position: relative;
        min-height: 190px;
        border-radius: 24px;
        padding: 20px;
      }
      .mlp-device-setup-step span {
        display: inline-grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(245,158,11,0.15);
        color: #F59E0B;
        border: 1px solid rgba(245,158,11,0.30);
      }
      .mlp-device-setup-step p {
        margin-top: 54px;
      }
      .mlp-device-security-layout {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
        gap: clamp(28px, 5vw, 72px);
        align-items: start;
      }
      .mlp-device-security-list {
        display: grid;
        gap: 10px;
        margin-top: 24px;
      }
      .mlp-device-security-list div {
        display: flex;
        gap: 10px;
        color: var(--mel-text-secondary);
        line-height: 1.55;
        font-size: 14px;
      }
      .mlp-device-security-list span {
        width: 8px;
        height: 8px;
        margin-top: 7px;
        border-radius: 50%;
        flex: 0 0 8px;
        background: #10B981;
        box-shadow: 0 0 18px #10B981;
      }
      .mlp-device-faq-stack {
        display: grid;
        gap: 12px;
      }
      .mlp-device-faq {
        border-radius: 22px;
        padding: 18px;
      }
      .mlp-device-faq summary {
        cursor: pointer;
        color: var(--mel-text-primary);
        font-weight: 800;
        line-height: 1.35;
      }
      .mlp-device-faq p {
        margin-top: 12px;
      }
      @media (max-width: 980px) {
        .mlp-device-article,
        .mlp-device-security-layout {
          grid-template-columns: 1fr;
        }
        .mlp-device-article.reverse .mlp-device-section-head,
        .mlp-device-article.reverse .mlp-device-visual-slot {
          order: initial;
        }
        .mlp-device-loop,
        .mlp-device-setup-rail {
          grid-template-columns: 1fr;
        }
        .mlp-device-setup-rail::before { display: none; }
        .mlp-device-setup-step { min-height: auto; }
        .mlp-device-setup-step p { margin-top: 24px; }
        .mlp-device-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .mlp-device-hero-sig { min-height: 520px; }
        .mlp-device-hero-phone-iphone { left: 2%; }
        .mlp-device-hero-phone-android { right: 0; }
      }
      @media (max-width: 640px) {
        .mlp-device-phone-shell { width: min(208px, 48vw); }
        .mlp-device-hero-sig { min-height: 440px; }
        .mlp-device-hero-chip { display: none; }
        .mlp-device-tool-grid { grid-template-columns: 1fr; }
        .mlp-device-mobile-app { min-height: 500px; padding: 18px; }
        .mlp-device-working-card { width: min(300px, 86%); }
      }
      @media (prefers-reduced-motion: reduce) {
        .mlp-device-phone-shell,
        .mlp-device-tool-glow {
          animation: none !important;
          transition: none !important;
        }
      }

      /* ============ Reworked visuals (2026-07) ============ */

      /* Hero — real orbital system instead of a flat glass blob */
      .mlp-device-hero-orbit {
        inset: 0;
        border: 0;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        mask-image: none;
        display: grid;
        place-items: center;
      }
      .mlp-device-hero-sig[data-light="true"] .mlp-device-hero-orbit { background: none; border: 0; }
      .mlp-device-orbit-core {
        position: absolute;
        width: 48%;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
          radial-gradient(circle at 40% 36%, rgba(34,211,238,0.34), transparent 60%),
          radial-gradient(circle at 66% 70%, rgba(139,92,246,0.32), transparent 62%);
        filter: blur(36px);
      }
      .mlp-device-orbit-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(148,163,184,0.20);
        will-change: transform;
      }
      .light .mlp-device-orbit-ring { border-color: rgba(15,23,42,0.10); }
      .mlp-device-orbit-ring i {
        position: absolute;
        top: -4px;
        left: 50%;
        width: 9px;
        height: 9px;
        margin-left: -4.5px;
        border-radius: 50%;
        background: linear-gradient(135deg, #22D3EE, #8B5CF6);
        box-shadow: 0 0 14px rgba(34,211,238,0.85);
      }
      .mlp-orbit-r1 { width: 56%; aspect-ratio: 1; animation: mlp-orbit 26s linear infinite; }
      .mlp-orbit-r2 { width: 80%; aspect-ratio: 1; border-style: dashed; animation: mlp-orbit 44s linear infinite reverse; }
      .mlp-orbit-r2 i { background: linear-gradient(135deg, #10B981, #22D3EE); box-shadow: 0 0 14px rgba(16,185,129,0.75); }
      .mlp-orbit-r3 { width: 104%; aspect-ratio: 1; opacity: 0.5; animation: mlp-orbit 66s linear infinite; }
      .mlp-orbit-r3 i { background: #F59E0B; box-shadow: 0 0 12px rgba(245,158,11,0.75); }
      @keyframes mlp-orbit { to { transform: rotate(360deg); } }

      /* Capability tool card — verb tiles with icons */
      .mlp-device-tool-header { align-items: center; }
      .mlp-device-tool-file { display: inline-flex; align-items: center; gap: 8px; color: var(--mel-text-secondary); }
      .mlp-device-tool-file i { width: 9px; height: 9px; border-radius: 50%; background: #10B981; box-shadow: 0 0 10px #10B981; }
      .mlp-device-tool-badge { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(34,211,238,0.30); background: rgba(34,211,238,0.10); color: #22D3EE; }
      .light .mlp-device-tool-badge { color: #0891B2; }
      .mlp-device-tool-verb { min-height: auto; align-items: flex-start; gap: 10px; padding: 16px; position: relative; }
      .mlp-device-verb-ico {
        display: grid; place-items: center;
        width: 38px; height: 38px; border-radius: 12px; color: #fff;
        background: linear-gradient(140deg, rgba(34,211,238,0.92), rgba(139,92,246,0.92));
        box-shadow: 0 8px 18px -8px rgba(139,92,246,0.7);
      }
      .mlp-device-tool-verb strong { text-transform: capitalize; }
      .mlp-device-tool-verb em {
        position: absolute; top: 13px; right: 14px; font-style: normal;
        color: var(--mel-text-tertiary); font: 900 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em;
      }

      /* Allowlist — real app logos + state label */
      .mlp-device-allowlist-search svg { color: var(--mel-text-tertiary); flex: 0 0 auto; }
      .mlp-device-app-row { grid-template-columns: 44px 1fr auto; }
      .mlp-device-app-icon {
        width: 44px; height: 44px; overflow: hidden; border-radius: 13px;
        background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
      }
      .mlp-device-app-icon[data-logo="true"] { background: #fff; border-color: rgba(15,23,42,0.10); }
      .light .mlp-device-app-icon { background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.08); }
      .light .mlp-device-app-icon[data-logo="true"] { background: #fff; }
      .mlp-device-app-icon img { width: 66%; height: 66%; object-fit: contain; }
      .mlp-device-app-icon svg { color: var(--mel-text-secondary); }
      .mlp-device-app-state {
        display: inline-flex; align-items: center; gap: 10px;
        font: 800 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.10em; text-transform: uppercase;
        color: var(--mel-text-tertiary);
      }
      .mlp-device-app-state.on { color: #10B981; }
      .light .mlp-device-app-state.on { color: #059669; }

      /* Agent loop — an elegant connected cycle */
      .mlp-device-loop { position: relative; }
      .mlp-device-loop-rail {
        position: absolute; left: 8%; right: 8%; top: 46px; height: 2px; border-radius: 999px;
        background: linear-gradient(90deg, #22D3EE, #8B5CF6 40%, #10B981 74%, #22D3EE);
        opacity: 0.55;
      }
      .mlp-device-loop-step {
        min-height: auto; align-items: flex-start; gap: 12px; padding: 22px 20px; z-index: 1;
      }
      .mlp-device-loop-step::before { display: none; }
      .mlp-device-loop-node { display: flex; align-items: center; gap: 12px; }
      .mlp-device-loop-ico {
        display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; color: #fff;
        background: linear-gradient(140deg, #22D3EE, #8B5CF6);
        box-shadow: 0 10px 22px -10px rgba(139,92,246,0.85);
      }
      .mlp-device-loop-step h3 { margin: 4px 0 0; }
      .mlp-device-loop-return {
        position: absolute; top: 29px; right: calc(8% - 17px); display: grid; place-items: center;
        width: 34px; height: 34px; border-radius: 50%; color: #22D3EE;
        border: 1px solid rgba(34,211,238,0.42); background: rgba(34,211,238,0.10);
        box-shadow: 0 0 18px -4px rgba(34,211,238,0.6);
      }

      /* Mobile "Melaya is working" overlay — real logo, readable, left-aligned */
      .mlp-device-mobile-app { position: relative; }
      .mlp-device-working-scrim {
        position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 34px;
        background: radial-gradient(circle at 50% 42%, rgba(2,6,23,0.52), rgba(2,6,23,0.28));
        backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
      }
      .mlp-device-working-card { width: min(340px, 84%); padding: 20px; text-align: left; }
      .mlp-device-working-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
      .mlp-device-working-logo {
        width: 40px; height: 40px; margin: 0; border-radius: 12px; background: rgba(255,255,255,0.10);
        border: 1px solid rgba(255,255,255,0.18); overflow: hidden;
      }
      .mlp-device-working-logo img { width: 26px; height: 26px; object-fit: contain; }
      .mlp-device-working-live {
        display: inline-flex; align-items: center; gap: 7px; color: #22D3EE;
        font: 800 9.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.14em; text-transform: uppercase;
      }
      .mlp-device-working-live i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 10px #22D3EE; animation: mlp-live 1.6s ease-in-out infinite; }
      @keyframes mlp-live { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.68); } }
      .mlp-device-working-card strong { font: 800 19px/1.15 Poppins, system-ui, sans-serif; }
      .mlp-device-working-card p { margin: 8px 0 0; color: rgba(255,255,255,0.74); }
      .mlp-device-working-progress { margin-top: 15px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.14); overflow: hidden; }
      .mlp-device-working-progress span { display: block; height: 100%; width: 42%; border-radius: 999px; background: linear-gradient(90deg, #22D3EE, #8B5CF6); animation: mlp-progress 2.2s ease-in-out infinite; }
      @keyframes mlp-progress { 0% { transform: translateX(-130%); } 100% { transform: translateX(320%); } }
      .mlp-device-working-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
      .mlp-device-working-actions .hitl { background: rgba(255,255,255,0.14); }
      .mlp-device-mobile-bullets { z-index: 5; gap: 8px; }
      .mlp-device-mobile-bullet {
        display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 8px 12px;
        border: 1px solid rgba(255,255,255,0.14); background: rgba(2,6,23,0.55); color: #E2E8F0; font-size: 12px;
        backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      }
      .mlp-device-mobile-bullet svg { color: #34D399; flex: 0 0 auto; }

      /* Setup rail — connected numbered path */
      .mlp-device-setup-rail::before { display: none; }
      .mlp-device-setup-line {
        position: absolute; left: 6%; right: 6%; top: 41px; height: 2px; border-radius: 999px;
        background: linear-gradient(90deg, #F59E0B, #22D3EE 55%, #8B5CF6); opacity: 0.5;
      }
      .mlp-device-setup-step { min-height: auto; padding: 20px; z-index: 1; }
      .mlp-device-setup-num {
        display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%;
        color: #1A1205; font: 900 15px/1 'JetBrains Mono', ui-monospace, monospace;
        background: linear-gradient(140deg, #FBBF24, #F59E0B); box-shadow: 0 10px 22px -10px rgba(245,158,11,0.85);
      }
      .mlp-device-setup-step p { margin-top: 16px; }

      /* FAQ — vertically centered beside the security list, chevron affordance */
      .mlp-device-security-layout { align-items: center; }
      .mlp-device-faq-layout { align-items: start; }
      .mlp-device-faq-heading { position: sticky; top: 116px; }
      .mlp-device-faq-stack { align-self: center; gap: 10px; }
      .mlp-device-faq summary {
        display: flex; align-items: center; justify-content: space-between; gap: 14px; list-style: none;
      }
      .mlp-device-faq summary::-webkit-details-marker { display: none; }
      .mlp-device-faq-chevron {
        flex: 0 0 auto; width: 9px; height: 9px; margin-bottom: 3px;
        border-right: 2px solid var(--mel-text-tertiary); border-bottom: 2px solid var(--mel-text-tertiary);
        transform: rotate(45deg); transition: transform 0.26s cubic-bezier(0.2,0.7,0.3,1);
      }
      .mlp-device-faq[open] .mlp-device-faq-chevron { transform: rotate(-135deg); margin-bottom: -3px; border-color: #22D3EE; }
      .mlp-device-faq[open] { border-color: rgba(34,211,238,0.30); }

      /* Capability visual — real agent tool-call trace (a console, kept dark in
         both themes because that is how a real trace reads) */
      .mlp-device-trace {
        position: relative; overflow: hidden; border-radius: 28px;
        border: 1px solid rgba(255,255,255,0.10);
        background: linear-gradient(180deg, rgba(7,11,26,0.94), rgba(2,6,23,0.97));
        box-shadow: 0 34px 110px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
      }
      .light .mlp-device-trace { border-color: rgba(15,23,42,0.10); box-shadow: 0 30px 80px rgba(15,23,42,0.22); }
      .mlp-device-trace-glow { position: absolute; inset: -45% -25% auto auto; width: 300px; height: 300px; background: radial-gradient(circle, rgba(34,211,238,0.22), transparent 66%); filter: blur(32px); pointer-events: none; }
      .mlp-device-trace-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .mlp-device-trace-dots { display: inline-flex; gap: 6px; }
      .mlp-device-trace-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,0.2); }
      .mlp-device-trace-dots i:nth-child(1) { background: #FF5F57; }
      .mlp-device-trace-dots i:nth-child(2) { background: #FEBC2E; }
      .mlp-device-trace-dots i:nth-child(3) { background: #28C840; }
      .mlp-device-trace-name { color: rgba(226,232,240,0.60); font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.10em; }
      .mlp-device-trace-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #22D3EE; font: 800 10px/1 'JetBrains Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; }
      .mlp-device-trace-live i { width: 7px; height: 7px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 10px #22D3EE; animation: mlp-live 1.6s ease-in-out infinite; }
      .mlp-device-trace-body { position: relative; z-index: 1; padding: 16px 18px 18px; display: grid; gap: 9px; }
      .mlp-device-trace-call { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; padding: 11px 13px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); }
      .mlp-device-trace-gutter { color: rgba(148,163,184,0.55); font: 800 11px/1 'JetBrains Mono', monospace; }
      .mlp-device-trace-line { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
      .mlp-device-trace-line code { color: #7DE3F4; font: 700 13px/1.3 'JetBrains Mono', ui-monospace, monospace; }
      .mlp-device-trace-line p { margin: 0; color: rgba(226,232,240,0.66); font-size: 12.5px; line-height: 1.45; }
      .mlp-device-trace-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #05140D; background: linear-gradient(135deg, #34D399, #10B981); box-shadow: 0 4px 12px -4px rgba(16,185,129,0.8); }
      .mlp-device-trace-return { display: flex; align-items: center; gap: 9px; padding: 4px 2px 0; color: rgba(148,163,184,0.7); font-size: 12px; }
      .mlp-device-trace-done { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; color: #6EE7B7; background: rgba(16,185,129,0.16); border: 1px solid rgba(16,185,129,0.34); font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; }
      .mlp-device-trace-done svg { color: #34D399; }
      .mlp-device-trace-cursor { width: 8px; height: 15px; background: #22D3EE; border-radius: 1px; animation: mlp-blink 1.1s steps(1) infinite; }
      @keyframes mlp-blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }

      /* Setup — stateful guided checklist (done / current / next) on a spine */
      .mlp-device-setup-flow { position: relative; list-style: none; margin: clamp(28px, 5vh, 52px) 0 0; padding: 0; display: grid; gap: 12px; max-width: 780px; }
      .mlp-device-setup-spine { position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, #10B981 0%, #10B981 38%, #22D3EE 38%, #22D3EE 52%, rgba(148,163,184,0.24) 52%); }
      .light .mlp-device-setup-spine { background: linear-gradient(180deg, #10B981 0%, #10B981 38%, #22D3EE 38%, #22D3EE 52%, rgba(15,23,42,0.14) 52%); }
      .mlp-device-setup-node { position: relative; z-index: 1; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; }
      .mlp-device-setup-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: var(--mel-surface-card); color: var(--mel-text-secondary); }
      .light .mlp-device-setup-badge { border-color: rgba(15,23,42,0.10); }
      .mlp-device-setup-badge[data-state="done"] { color: #04140C; border: 0; background: linear-gradient(140deg, #34D399, #10B981); box-shadow: 0 8px 18px -8px rgba(16,185,129,0.8); }
      .mlp-device-setup-badge[data-state="current"] { color: #22D3EE; border-color: rgba(34,211,238,0.5); animation: mlp-setup-pulse 2.4s ease-in-out infinite; }
      @keyframes mlp-setup-pulse { 0%,100% { box-shadow: 0 0 0 4px rgba(34,211,238,0.12); } 50% { box-shadow: 0 0 0 8px rgba(34,211,238,0.05); } }
      .mlp-device-setup-body { display: flex; flex-direction: column; gap: 3px; padding: 13px 0; border-bottom: 1px solid rgba(148,163,184,0.12); }
      .light .mlp-device-setup-body { border-color: rgba(15,23,42,0.08); }
      .mlp-device-setup-node:last-child .mlp-device-setup-body { border-bottom: 0; }
      .mlp-device-setup-kicker { color: var(--mel-text-tertiary); font: 800 10px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.16em; }
      .mlp-device-setup-body p { margin: 0; color: var(--mel-text-secondary); font-size: 14.5px; line-height: 1.5; }

      @media (max-width: 980px) {
        .mlp-device-loop-rail, .mlp-device-loop-return { display: none; }
        .mlp-device-security-layout { align-items: start; }
      }
      @media (prefers-reduced-motion: reduce) {
        .mlp-device-orbit-ring, .mlp-device-working-live i, .mlp-device-working-progress span,
        .mlp-device-trace-live i, .mlp-device-trace-cursor, .mlp-device-setup-badge[data-state="current"] { animation: none !important; }
        .mlp-device-working-progress span { width: 62%; }
      }

      /* ===== Sharp, tight titanium phone pair (no floating chips / labels) ===== */
      .mlp-device-hero-sig { min-height: min(560px, 66dvh); perspective: 1600px; }
      .mlp-device-hero-chip, .mlp-device-phone-label { display: none !important; }
      /* Overlapping, centered pair — the android sits on top of the iPhone's inner edge */
      .mlp-device-hero-phone-iphone { left: auto; right: 47%; top: 9%; z-index: 3; }
      .mlp-device-hero-phone-android { right: auto; left: 47%; top: 0%; z-index: 4; }
      .mlp-device-phone-shell {
        width: min(216px, 40vw);
        padding: 6px;
        border-radius: 42px;
        background: linear-gradient(155deg, #4A5163 0%, #262B36 38%, #0C0F16 100%);
        border: 1px solid rgba(255,255,255,0.16);
        box-shadow:
          0 46px 100px rgba(0,0,0,0.55),
          0 10px 26px rgba(0,0,0,0.42),
          inset 0 0 0 1.5px rgba(255,255,255,0.05),
          inset 0 1.5px 0 rgba(255,255,255,0.42),
          inset 0 -16px 30px rgba(0,0,0,0.55);
      }
      .mlp-device-phone-android {
        border-radius: 32px;
        background: linear-gradient(155deg, #3A404E 0%, #1B1F28 42%, #05070C 100%);
      }
      .mlp-device-phone-btn {
        width: 2.5px; border-radius: 999px;
        background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(120,130,150,0.42));
        box-shadow: -1px 0 2px rgba(0,0,0,0.42);
      }
      .mlp-device-phone-btn-left { left: -2.5px; top: 82px; height: 38px; }
      .mlp-device-phone-btn-power { left: -2.5px; top: 130px; height: 58px; }
      .mlp-device-phone-btn-right { right: -2.5px; top: 116px; height: 70px; }
      .mlp-device-phone-glass {
        aspect-ratio: 9 / 19.5;
        border-radius: 36px;
        border: 1px solid rgba(0,0,0,0.6);
        box-shadow: inset 0 0 0 2px rgba(0,0,0,0.85), inset 0 0 22px rgba(0,0,0,0.5);
      }
      .mlp-device-phone-android .mlp-device-phone-glass { border-radius: 26px; }
      .mlp-device-dynamic-island { top: 9px; width: 62px; height: 19px; background: #000; box-shadow: 0 2px 8px rgba(0,0,0,0.5); }
      .mlp-device-punch-hole { top: 10px; width: 10px; height: 10px; background: #000; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 0 0 2px rgba(2,6,23,0.5); }
      .mlp-device-screen-sheen { background: linear-gradient(150deg, rgba(255,255,255,0.16), transparent 20%, transparent 78%, rgba(255,255,255,0.06)); }
      .mlp-device-home-indicator { bottom: 7px; width: 84px; height: 4px; background: rgba(255,255,255,0.55); }
      @media (max-width: 980px) {
        .mlp-device-hero-sig { min-height: 480px; }
        .mlp-device-hero-phone-iphone { right: 50%; }
        .mlp-device-hero-phone-android { left: 50%; }
      }
      @media (max-width: 640px) {
        .mlp-device-hero-sig { min-height: 402px; }
        .mlp-device-phone-shell { width: min(176px, 46vw); }
        .mlp-device-hero-phone-iphone { right: 49%; top: 10%; }
        .mlp-device-hero-phone-android { left: 49%; top: 2%; }
      }

      /* ============ Problem / "how you use it" beat (post-hero) ============ */
      .mlp-device-section-head p.mlp-device-problem-answer {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 16px;
        max-width: 62ch;
        color: var(--mel-text-primary);
        font-weight: 600;
        font-size: clamp(0.98rem, 0.34vw + 0.9rem, 1.08rem);
        line-height: 1.6;
      }
      .mlp-device-problem-answer > span {
        flex: 0 0 8px;
        width: 8px;
        height: 8px;
        margin-top: 8px;
        border-radius: 50%;
        background: #10B981;
        box-shadow: 0 0 18px #10B981;
      }
      .mlp-device-problem-how { margin-top: clamp(26px, 4.5vh, 44px); }
      .mlp-device-problem-kicker {
        color: var(--mel-text-tertiary);
        font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .mlp-device-problem-steps {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 14px;
      }
      .mlp-device-problem-step {
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-radius: 22px;
        padding: 18px;
        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.055);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
      }
      .light .mlp-device-problem-step { border-color: rgba(15,23,42,0.08); background: rgba(255,255,255,0.70); }
      .mlp-device-problem-step span {
        color: #22D3EE;
        font: 900 11px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
      }
      .mlp-device-problem-step strong {
        color: var(--mel-text-primary);
        font: 700 17px/1.2 Poppins, system-ui, sans-serif;
        letter-spacing: -0.02em;
      }
      .mlp-device-problem-step p {
        margin: 0;
        color: var(--mel-text-secondary);
        font-size: 14px;
        line-height: 1.55;
      }
      .mlp-device-problem-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 16px;
        color: #22D3EE;
        text-decoration: none;
        font: 800 11px/1 'JetBrains Mono', ui-monospace, monospace;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }
      .mlp-device-problem-link:hover { text-decoration: underline; }
      .light .mlp-device-problem-link { color: #0891B2; }

      /* ============ Mobile hero: single clean phone (hook swaps markup <768px) ============ */
      .mlp-device-hero-sig.mlp-device-hero-sig-mobile {
        min-height: min(400px, 52dvh);
        perspective: none;
        transform-style: flat;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .mlp-device-hero-sig-mobile .mlp-device-hero-phone-solo {
        position: relative;
        inset: auto;
        transform-style: flat;
      }
      .mlp-device-hero-sig-mobile .mlp-device-phone-shell { width: min(184px, 46vw); }
      .mlp-device-hero-sig-mobile .mlp-device-orbit-core { width: 76%; }

      /* ============ Mobile adaptation (<=768px) - desktop rules above untouched ============ */
      @media (max-width: 768px) {
        .mlp-device-faq-heading { position: static; }
        .mlp-device-section-inner,
        .mlp-device-article { min-width: 0; }
        .mlp-device-article,
        .mlp-device-security-layout { grid-template-columns: 1fr; }
        .mlp-device-article { gap: 26px; }
        .mlp-device-article.reverse .mlp-device-section-head,
        .mlp-device-article.reverse .mlp-device-visual-slot { order: initial; }
        .mlp-device-visual-slot { width: 100%; max-width: 560px; margin: 0 auto; }
        .mlp-device-visual-slot > * { max-width: 100%; }
        .mlp-device-loop { grid-template-columns: 1fr; gap: 12px; }
        .mlp-device-loop-rail,
        .mlp-device-loop-return { display: none; }
        .mlp-device-loop-step { min-height: auto; padding: 18px 16px; }
        .mlp-device-problem-steps { grid-template-columns: 1fr; gap: 10px; }
        .mlp-device-security-layout { align-items: start; gap: 26px; }
      }

      .mlp-device-mcp {
        position: relative;
        border-radius: 24px;
        padding: clamp(22px, 2.4vw, 30px);
        background: var(--mel-surface-card);
        border: 1px solid color-mix(in srgb, #8B5CF6 24%, transparent);
        box-shadow: 0 34px 90px -60px #8B5CF6;
        overflow: hidden;
      }
      .mlp-device-mcp-glow {
        position: absolute;
        inset: -55% 28% 58% -28%;
        background: radial-gradient(circle at 36% 44%, rgba(139,92,246,0.20), transparent 62%);
        pointer-events: none;
      }
      .mlp-device-mcp-clients {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(8px, 1.4vw, 18px);
      }
      .mlp-device-mcp-client {
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;
      }
      .mlp-device-mcp-client img {
        display: block;
        width: clamp(38px, 4vw, 50px);
        height: clamp(38px, 4vw, 50px);
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 10px 26px -16px rgba(0,0,0,0.9);
      }
      .mlp-device-mcp-client figcaption {
        font-family: Poppins, system-ui, sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--mel-text-secondary);
        text-align: center;
        white-space: nowrap;
      }
      .mlp-device-mcp-wire {
        position: relative;
        height: 48px;
        display: flex;
        justify-content: center;
      }
      .mlp-device-mcp-wire span {
        width: 1px;
        height: 100%;
        background: linear-gradient(180deg, transparent 0%, #8B5CF6 58%, #22D3EE 100%);
      }
      .mlp-device-mcp-endpoint {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 12px 14px;
        border-radius: 14px;
        color: #8B5CF6;
        background: color-mix(in srgb, #8B5CF6 9%, transparent);
        border: 1px solid color-mix(in srgb, #8B5CF6 26%, transparent);
      }
      .mlp-device-mcp-endpoint code {
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: clamp(0.84rem, 1vw, 1rem);
        color: var(--mel-text-primary);
        overflow-wrap: anywhere;
      }
      .mlp-device-mcp-oauth {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 9px;
        border-radius: 999px;
        font-family: Poppins, system-ui, sans-serif;
        font-size: 11px;
        font-weight: 700;
        color: #10B981;
        background: color-mix(in srgb, #10B981 12%, transparent);
        border: 1px solid color-mix(in srgb, #10B981 32%, transparent);
      }
      .mlp-device-mcp-scopes {
        position: relative;
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 12px;
      }
      .mlp-device-mcp-scopes span {
        padding: 4px 9px;
        border-radius: 8px;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 11.5px;
        color: #22D3EE;
        background: color-mix(in srgb, #22D3EE 10%, transparent);
        border: 1px solid color-mix(in srgb, #22D3EE 26%, transparent);
      }
      .mlp-device-mcp-note {
        position: relative;
        margin: 16px 0 0;
        font-family: Poppins, system-ui, sans-serif;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--mel-text-tertiary);
      }
      @media (max-width: 640px) {
        .mlp-product-section {
          --mlp-device-sec-pad-y: clamp(44px, 7vh, 60px);
        }
        .mlp-device-section-head h2 {
          max-width: none;
          margin-top: 12px;
        }
        .mlp-device-section-head p { margin-top: 12px; font-size: 15px; line-height: 1.62; }
        .mlp-device-section-head p.mlp-device-problem-answer { margin-top: 12px; font-size: 14.5px; }
        .mlp-device-problem-how { margin-top: 24px; }
        .mlp-device-problem-step { padding: 15px; border-radius: 18px; }
        .mlp-device-problem-step strong { font-size: 16px; }
        .mlp-device-problem-step p { font-size: 13.5px; }
        .mlp-device-hero-sig,
        .mlp-device-hero-sig.mlp-device-hero-sig-mobile { min-height: min(360px, 48dvh); }
        /* CSS-only fallback for the prerendered dual-phone markup before the
           mobile hook hydrates: hide the outer rings + second phone, center
           the remaining one. Post-hydration the solo variant takes over. */
        .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-orbit-r2,
        .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-orbit-r3,
        .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-device-hero-phone-iphone { display: none; }
        .mlp-device-hero-sig:not(.mlp-device-hero-sig-mobile) .mlp-device-hero-phone-android {
          left: 0;
          right: 0;
          width: max-content;
          margin: 0 auto;
        }
        .mlp-device-trace-head { padding: 12px 14px; gap: 9px; }
        .mlp-device-trace-name {
          flex: 1 1 auto;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .mlp-device-trace-body { padding: 12px 12px 14px; gap: 8px; }
        .mlp-device-trace-call { grid-template-columns: 18px 1fr auto; gap: 9px; padding: 10px 11px; }
        .mlp-device-trace-line code { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
        .mlp-device-trace-line p { font-size: 12px; }
        .mlp-device-allowlist { padding: 16px 14px; }
        .mlp-device-allowlist-search { height: 42px; padding: 0 14px; gap: 10px; }
        .mlp-device-app-row { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 10px; }
        .mlp-device-app-icon { width: 40px; height: 40px; border-radius: 12px; }
        .mlp-device-app-meta { min-width: 0; }
        .mlp-device-app-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mlp-device-app-state { gap: 7px; font-size: 9px; letter-spacing: 0.08em; }
        .mlp-device-toggle { width: 40px; height: 24px; }
        .mlp-device-toggle i { width: 16px; height: 16px; }
        .mlp-device-toggle.on i { transform: translateX(16px); }
        .mlp-device-mobile-app { min-height: 440px; padding: 18px 14px 72px; }
        .mlp-device-working-card { width: min(280px, 94%); padding: 16px; }
        .mlp-device-working-card strong { font-size: 17px; }
        .mlp-device-working-card p { font-size: 12px; }
        .mlp-device-working-actions button { height: 36px; font-size: 13px; }
        .mlp-device-mobile-bullets { left: 10px; right: 10px; bottom: 12px; gap: 6px; }
        .mlp-device-mobile-bullet { padding: 6px 10px; font-size: 11px; }
        .mlp-device-setup-node { grid-template-columns: 40px 1fr; gap: 12px; }
        .mlp-device-setup-badge { width: 40px; height: 40px; }
        .mlp-device-setup-spine { left: 19px; }
        .mlp-device-setup-body { padding: 11px 0; }
        .mlp-device-setup-body p { font-size: 14px; }
        .mlp-device-faq { padding: 15px 16px; border-radius: 18px; }
        .mlp-device-faq summary { font-size: 14.5px; gap: 10px; }
        .mlp-device-mcp { padding: 18px 15px; border-radius: 20px; }
        .mlp-device-mcp-clients { gap: 6px; }
        .mlp-device-mcp-client figcaption { font-size: 10.5px; }
        .mlp-device-mcp-wire { height: 32px; }
        .mlp-device-mcp-endpoint { padding: 11px 12px; gap: 8px; }
        .mlp-device-mcp-oauth { margin-left: 0; }
      }