/* ---------- BRAND TOKENS — edit to match your palette ---------- */

    .pp-mm{

      --node:#1366f2; --node-2:#0a44bd;     /* brand blue nodes        */

      --ink:#0f1b2d; --muted:#5d6e8c;       /* text                    */

      --card:#ffffff; --border:#e6ebf4;     /* cards                   */

      --stage:#f5f7fb;                       /* canvas background       */

      /* per-layer accents (colour-coding carries meaning) */

      --app:#10b981; --app-tint:#ecfdf5;

      --web:#f59e0b; --web-tint:#fff8ea;

      --net:#3b82f6; --net-tint:#eaf2ff;

      --r:16px;

      --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

    }

    .pp-mm,.pp-mm *{box-sizing:border-box;margin:0;padding:0}

    .pp-mm{

      font-family:var(--font);color:var(--ink);background:var(--stage);

      border:1px solid var(--border);border-radius:calc(var(--r) + 8px);

      width:100%;max-width:1200px;margin-inline:auto;

      padding:clamp(18px,3vw,30px);position:relative;

    }



    /* ---------- toolbar ---------- */

    .pp-mm__bar{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}

    .pp-mm__eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--node)}

    .pp-mm__title{font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;margin-top:4px}



    /* ---------- stage ---------- */

    .pp-mm__stage{position:relative}

    .pp-mm__wires{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}

    .pp-mm__wire{fill:none;stroke-width:2.5;stroke-linecap:round;opacity:.85;transition:opacity .25s,stroke-width .2s}

    .pp-mm__wire--app{stroke:var(--app)} .pp-mm__wire--web{stroke:var(--web)} .pp-mm__wire--net{stroke:var(--net)}

    .pp-mm__stage[data-focus="app"] .pp-mm__wire:not(.pp-mm__wire--app),

    .pp-mm__stage[data-focus="web"] .pp-mm__wire:not(.pp-mm__wire--web),

    .pp-mm__stage[data-focus="net"] .pp-mm__wire:not(.pp-mm__wire--net){opacity:.12}

    .pp-mm__stage[data-focus="app"] .pp-mm__wire--app,

    .pp-mm__stage[data-focus="web"] .pp-mm__wire--web,

    .pp-mm__stage[data-focus="net"] .pp-mm__wire--net{stroke-width:3.4}



    .pp-mm__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(190px,240px) 1fr;align-items:center;gap:clamp(28px,4vw,64px)}



    /* ---------- nodes ---------- */

    .pp-mm__root,.pp-mm__layer{

      display:inline-flex;align-items:center;justify-content:center;text-align:center;

      color:#fff;font-weight:700;line-height:1.25;

      background:linear-gradient(145deg,var(--node),var(--node-2));

      border:0;border-radius:20px;padding:18px 20px;cursor:default;

      box-shadow:0 12px 26px -14px rgba(19,102,242,.7);

      height:auto;white-space:normal;

    }

    .pp-mm__root{font-size:clamp(15px,1.6vw,18px);width:100%;overflow-wrap:anywhere}

    .pp-mm__layer{

      position:relative;display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:12px;

      font-size:clamp(14px,1.5vw,16px);width:100%;min-height:max-content;cursor:pointer;

      padding:18px 20px;justify-content:stretch;align-items:center;overflow:visible;

      transition:transform .18s,box-shadow .25s;

    }

    .pp-mm__layer:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(19,102,242,.8)}

    .pp-mm__layer:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

    .pp-mm__layer-main{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%}

    .pp-mm__layer-tx{text-align:left;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;white-space:normal}

    .pp-mm__chev{position:static;justify-self:end;align-self:center;width:20px;height:20px;transition:transform .3s ease}

    .pp-mm__chev svg{width:100%;height:100%;stroke:#fff;stroke-width:2.4;fill:none}

    .pp-mm__branch:not(.is-open) .pp-mm__chev{transform:rotate(-90deg)}



    /* ---------- branches & groups ---------- */

    .pp-mm__branches{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}

    .pp-mm__branch{display:grid;grid-template-columns:minmax(165px,210px) 1fr;align-items:center;gap:clamp(20px,3vw,46px)}

    .pp-mm__branch--app{--accent:var(--app);--tint:var(--app-tint)}

    .pp-mm__branch--web{--accent:var(--web);--tint:var(--web-tint)}

    .pp-mm__branch--net{--accent:var(--net);--tint:var(--net-tint)}



    .pp-mm__group{

      background:var(--tint);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);

      border-radius:var(--r);overflow:hidden;

    }

    .pp-mm__groupinner{

      display:grid;grid-template-rows:1fr;transition:grid-template-rows .4s cubic-bezier(.4,0,.2,1)}

    .pp-mm__branch:not(.is-open) .pp-mm__groupinner{grid-template-rows:0fr}

    .pp-mm__groupclip{overflow:hidden;min-height:0}

    .pp-mm__cards{

      display:grid;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));

      gap:12px;padding:16px;

    }



    /* ---------- cards ---------- */

    .pp-mm__card{

      position:relative;display:block;width:100%;min-width:0;min-height:0;height:auto;overflow:visible;

      text-align:left;font:inherit;cursor:pointer;color:var(--ink);white-space:normal;

      background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);

      border-radius:12px;padding:14px 15px;

      transition:transform .18s,box-shadow .2s,border-color .2s;

    }

    .pp-mm__card:hover{transform:translateY(-3px);box-shadow:0 14px 26px -16px rgba(15,27,45,.45)}

    .pp-mm__card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

    .pp-mm__card-h{display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:10px;align-items:start;font-size:14px;font-weight:800;line-height:1.35}

    .pp-mm__card-h span{display:block;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;white-space:normal}

    .pp-mm__plus{position:static;justify-self:end;margin-top:2px;width:15px;height:15px;color:var(--accent);font-style:normal;transition:transform .3s}

    .pp-mm__plus svg{width:100%;height:100%;stroke:currentColor;stroke-width:2.4;fill:none}

    .pp-mm__card.is-open .pp-mm__plus{transform:rotate(45deg)}

    .pp-mm__descwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease,margin .3s ease}

    .pp-mm__card.is-open .pp-mm__descwrap{grid-template-rows:1fr;margin-top:9px}

    .pp-mm__desc{overflow:hidden;min-height:0;font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;word-break:break-word;white-space:normal}



    /* gentle entrance */

    @keyframes pp-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

    .pp-mm[data-anim="on"] .pp-mm__card{animation:pp-rise .45s both}



    /* ---------- mobile ---------- */

    @media(max-width:860px){

      .pp-mm__wires{display:none}

      .pp-mm__grid{grid-template-columns:1fr;gap:16px}

      .pp-mm__branches{gap:16px}

      .pp-mm__branch{grid-template-columns:1fr;gap:10px}

      .pp-mm__group{border-left:5px solid var(--accent)}

      .pp-mm__root{text-align:center}

    }

    @media(prefers-reduced-motion:reduce){.pp-mm *{transition:none!important}}