/* SOULULAB DEMO 3 — mobile app presenter 4.18.12 */
.d3app-mobile{display:none}

@media (max-width:1024px){
  :root{
    --d3app-vh:100dvh;
    --d3app-vw:100vw;
    --d3app-side:clamp(18px,4.6vw,42px);
    --d3app-safe-top:max(18px,env(safe-area-inset-top));
    --d3app-safe-bottom:max(18px,env(safe-area-inset-bottom));
    --d3app-bg:#05070b;
    --d3app-panel:#090c12;
    --d3app-text:#f5f7fa;
    --d3app-muted:rgba(224,230,238,.62);
  }

  html,body{overflow-x:clip!important;overflow-y:visible!important}
  body.home-demo-page{background:#05070b!important}

  .d3app-mobile, .d3app-mobile *{box-sizing:border-box}

  .d3app-mobile{
    display:block;
    position:relative;
    z-index:2;
    width:100%;
    background:#05070b;
    color:var(--d3app-text);
    overflow:visible;
  }

  body.home-demo-page .hd-main{overflow:visible!important}

  /* App presentation temporarily owns the viewport. Site header comes back after it. */
  body.d3app-in-presentation .soul-header,
  body.d3app-in-presentation [data-site-header]{
    transform:translate3d(0,-115%,0)!important;
    opacity:0!important;
    pointer-events:none!important;
    transition:transform .42s cubic-bezier(.32,.72,0,1),opacity .26s ease!important;
  }

  /* =======================================================
     SCREEN 1 — INTRO
     ======================================================= */
  .d3app-intro{
    position:relative;
    width:100%;
    height:var(--d3app-vh);
    min-height:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(78% 58% at 50% 38%,rgba(80,90,110,.10),transparent 64%),
      radial-gradient(44% 36% at 24% 30%,rgba(240,70,198,.07),transparent 72%),
      radial-gradient(40% 36% at 78% 64%,rgba(47,197,255,.07),transparent 72%),
      linear-gradient(180deg,#080a10 0%,#05070b 48%,#030509 100%);
  }
  .d3app-intro::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 18%,transparent 80%,rgba(0,0,0,.22));
  }
  .d3app-intro__ambient{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
  .d3app-intro__halo{position:absolute;border-radius:50%;filter:blur(34px);opacity:.42;transform:scale(.72)}
  .d3app-intro__halo--one{width:42vw;height:42vw;max-width:380px;max-height:380px;left:-16vw;top:16%;background:radial-gradient(circle,rgba(240,70,198,.13),transparent 67%)}
  .d3app-intro__halo--two{width:48vw;height:48vw;max-width:430px;max-height:430px;right:-20vw;bottom:10%;background:radial-gradient(circle,rgba(47,197,255,.13),transparent 68%)}
  .d3app-intro__grid{position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000 0%,transparent 72%)}

  .d3app-intro__content{
    width:min(88%,760px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:calc(var(--d3app-safe-top) + 22px) 0 calc(var(--d3app-safe-bottom) + 56px);
  }
  .d3app-intro__logo{
    width:clamp(78px,22vw,132px);
    height:auto;
    object-fit:contain;
    opacity:0;
    transform:translate3d(0,20px,0) scale(.82);
    filter:brightness(.88) saturate(.92);
    transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.16,1,.3,1),filter 1s cubic-bezier(.16,1,.3,1);
  }
  .d3app-intro__brand{
    margin:30px 0 0;
    font:900 clamp(45px,13.5vw,92px)/.88 Montserrat,sans-serif;
    letter-spacing:-.065em;
    background:linear-gradient(180deg,#fff 0%,#dde1e8 27%,#8d96a2 58%,#f0f2f5 78%,#8c949f 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    opacity:0;
    transform:translate3d(0,22px,0);
    transition:opacity .68s .34s cubic-bezier(.22,1,.36,1),transform .9s .34s cubic-bezier(.16,1,.3,1);
  }
  .d3app-intro__tagline{
    margin:20px 0 0;
    max-width:760px;
    font:700 clamp(18px,4.8vw,32px)/1.08 Montserrat,sans-serif;
    letter-spacing:-.035em;
    color:rgba(246,248,251,.93);
    opacity:0;
    transform:translate3d(0,18px,0);
    transition:opacity .64s .76s cubic-bezier(.22,1,.36,1),transform .82s .76s cubic-bezier(.16,1,.3,1);
  }
  .d3app-intro__sub{
    margin:12px auto 0;
    max-width:600px;
    font:500 clamp(11px,2.9vw,16px)/1.55 Montserrat,sans-serif;
    color:rgba(216,223,232,.54);
    opacity:0;
    transform:translate3d(0,12px,0);
    transition:opacity .6s 1.08s cubic-bezier(.22,1,.36,1),transform .78s 1.08s cubic-bezier(.16,1,.3,1);
  }
  .d3app-intro__scroll{
    position:absolute;
    left:50%;
    bottom:calc(var(--d3app-safe-bottom) + 10px);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:9px;
    transform:translateX(-50%);
    opacity:0;
    transition:opacity .6s 1.48s ease;
  }
  .d3app-intro__scroll span{font:700 8px/1 Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(210,218,228,.36);white-space:nowrap}
  .d3app-intro__scroll i{display:block;width:1px;height:30px;background:linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0));transform-origin:top;animation:d3app-scroll-pulse 1.9s 2.1s cubic-bezier(.4,0,.2,1) infinite}
  .d3app-mobile.is-intro-ready .d3app-intro__logo{opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1.02) saturate(1.02) drop-shadow(0 0 28px rgba(47,197,255,.12)) drop-shadow(0 0 28px rgba(240,70,198,.10))}
  .d3app-mobile.is-intro-ready .d3app-intro__brand,
  .d3app-mobile.is-intro-ready .d3app-intro__tagline,
  .d3app-mobile.is-intro-ready .d3app-intro__sub{opacity:1;transform:translate3d(0,0,0)}
  .d3app-mobile.is-intro-ready .d3app-intro__scroll{opacity:1}
  @keyframes d3app-scroll-pulse{0%,100%{transform:scaleY(.28);opacity:.35}50%{transform:scaleY(1);opacity:1}}

  /* =======================================================
     SCREEN 2 — ONE STICKY VIEWPORT, FIVE HORIZONTAL SLIDES
     ======================================================= */
  .d3app-presenter{
    position:relative;
    width:100%;
    height:calc(var(--d3app-vh) * 6);
    background:#05070b;
  }
  .d3app-presenter__sticky{
    position:sticky;
    top:0;
    width:100%;
    height:var(--d3app-vh);
    min-height:0;
    overflow:hidden;
    isolation:isolate;
    background:#05070b;
  }
  .d3app-presenter__sticky::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;box-shadow:inset 0 1px rgba(255,255,255,.025),inset 0 -1px rgba(255,255,255,.02)}
  .d3app-presenter__chrome{
    position:absolute;
    left:var(--d3app-side);
    right:var(--d3app-side);
    top:calc(var(--d3app-safe-top) + 7px);
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    pointer-events:none;
  }
  .d3app-presenter__label{font:700 8px/1 Montserrat,sans-serif;letter-spacing:.22em;color:rgba(211,219,229,.38)}
  .d3app-presenter__count{display:flex;align-items:baseline;gap:5px;font-family:Montserrat,sans-serif;color:rgba(225,231,239,.44)}
  .d3app-presenter__count b{font-size:13px;line-height:1;font-weight:800;color:#f4f6f9}
  .d3app-presenter__count i{font:500 8px/1 Montserrat,sans-serif;font-style:normal;opacity:.45}.d3app-presenter__count span{font:600 8px/1 Montserrat,sans-serif}

  .d3app-track{
    position:absolute;
    inset:0 auto 0 0;
    z-index:5;
    display:flex;
    width:500%;
    height:100%;
    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .d3app-slide{
    --accent:#2fc5ff;
    position:relative;
    flex:0 0 20%;
    width:20%;
    height:100%;
    overflow:hidden;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    align-items:end;
    padding:calc(var(--d3app-safe-top) + 56px) var(--d3app-side) calc(var(--d3app-safe-bottom) + 78px);
    background:#05070b;
    isolation:isolate;
  }
  .d3app-slide::before,
  .d3app-slide::after{
    content:none!important;
    display:none!important;
  }
  /* Exact desktop DEMO 3 palettes. Do not invent mobile-only colors. */
  .d3app-slide--web{
    --accent:#42C9FF;
    --web-titanium:linear-gradient(110deg,#367EA5 0%,#7FD4FB 28%,#E4F8FF 48%,#66BEE9 70%,#2D7195 100%);
    --web-word:linear-gradient(110deg,#2F7FAE 0%,#73C7F0 42%,#E6F8FF 58%,#6AB8E5 75%,#2A719A 100%);
  }
  .d3app-slide--ai{
    --accent:#F046C6;
    --ai-violet:#7B53FF;--ai-fuchsia:#F046C6;--ai-orange:#F09548;--ai-blue:#5B86FF;
    --ai-gradient:linear-gradient(110deg,var(--ai-violet) 0%,var(--ai-fuchsia) 34%,var(--ai-orange) 70%,var(--ai-blue) 100%);
    --ai-word:linear-gradient(90deg,var(--ai-violet) 0%,var(--ai-fuchsia) 100%);
  }
  .d3app-slide--studio,.d3app-slide--club{
    --club-violet:#7B2FF7;--club-fuchsia:#E83EAD;--club-blue:#3478F6;--club-cyan:#23C9D8;
    --club-gradient:linear-gradient(110deg,var(--club-violet) 0%,var(--club-fuchsia) 34%,var(--club-blue) 68%,var(--club-cyan) 100%);
  }
  .d3app-slide--studio{--accent:#7B2FF7}
  .d3app-slide--club{--accent:#3478F6}
  .d3app-slide--flow{--accent:#f046c6}

  .d3app-slide__visual{
    position:relative;
    min-height:0;
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    transform:translate3d(calc(var(--d3app-slide-shift,0) * -14px),0,0) scale(var(--d3app-slide-scale,1));
    opacity:var(--d3app-slide-opacity,1);
    transition:none;
    will-change:transform,opacity;
  }
  .d3app-slide__copy{
    position:relative;
    z-index:4;
    width:min(100%,760px);
    transform:translate3d(calc(var(--d3app-slide-shift,0) * -20px),0,0) scale(var(--d3app-slide-scale,1));
    transform-origin:left center;
    opacity:var(--d3app-slide-opacity,1);
    transition:none;
    will-change:transform,opacity;
  }
  .d3app-slide__eyebrow{margin:0 0 10px;font:700 8px/1.2 Montserrat,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--accent) 74%,#d7dde6)}
  .d3app-slide h2{margin:0;font:900 clamp(45px,13vw,86px)/.86 Montserrat,sans-serif;letter-spacing:-.065em;white-space:nowrap}
  .d3app-slide h2 span{background:linear-gradient(180deg,#fff 0%,#d9dee6 36%,#8d96a3 68%,#dfe3e9 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
  .d3app-slide h2 em{font-style:normal;color:var(--accent);text-shadow:0 0 26px color-mix(in srgb,var(--accent) 18%,transparent)}
  .d3app-slide__lead{margin:16px 0 0;max-width:620px;font:600 clamp(13px,3.5vw,18px)/1.36 Montserrat,sans-serif;letter-spacing:-.02em;color:rgba(235,239,245,.84)}
  .d3app-slide__features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px;margin:17px 0 0;padding:0;list-style:none;max-width:680px}
  .d3app-slide__features li{position:relative;padding-left:13px;font:600 clamp(9px,2.45vw,12px)/1.35 Montserrat,sans-serif;color:rgba(213,221,231,.58)}
  .d3app-slide__features li::before{content:"";position:absolute;left:0;top:.46em;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 52%,transparent)}

  /* Product palette parity with desktop DEMO 3. Static gradients only: no new background glow. */
  .d3app-slide--web .d3app-slide__eyebrow,
  .d3app-slide--web h2 em{
    background:var(--web-word);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;
  }
  .d3app-slide--web .d3app-slide__features li::before{background:var(--web-titanium);box-shadow:none}

  .d3app-slide--ai .d3app-slide__eyebrow{
    background:var(--ai-gradient);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .d3app-slide--ai h2 em{
    background:var(--ai-word);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;
  }
  .d3app-slide--ai .d3app-slide__features li::before,
  .d3app-slide--ai .d3app-orbit::after{background:var(--ai-gradient);box-shadow:none}
  .d3app-slide--ai .d3app-orbit--one{border-color:rgba(123,83,255,.30)}
  .d3app-slide--ai .d3app-orbit--two{border-color:rgba(240,70,198,.26)}
  .d3app-slide--ai .d3app-orbit--three{border-color:rgba(91,134,255,.28)}
  .d3app-slide--ai .d3app-visual--ai img{filter:none}

  .d3app-slide--studio .d3app-slide__eyebrow,
  .d3app-slide--studio h2 em,
  .d3app-slide--club .d3app-slide__eyebrow,
  .d3app-slide--club h2 em{
    background:var(--club-gradient);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:none;
  }
  .d3app-slide--studio .d3app-slide__features li::before,
  .d3app-slide--club .d3app-slide__features li::before,
  .d3app-slide--studio .d3app-network i,
  .d3app-slide--club .d3app-club-points i{background:var(--club-gradient);box-shadow:none}
  .d3app-slide--studio .d3app-network::before{border-color:rgba(123,47,247,.24)}
  .d3app-slide--studio .d3app-network::after{border-color:rgba(35,201,216,.22)}
  .d3app-slide--studio .d3app-visual--studio img,
  .d3app-slide--club .d3app-visual--club img{filter:none}
  .d3app-slide--club .d3app-club-points::before{border-color:rgba(35,201,216,.20)}

  /* WEB visual */
  .d3app-browser{position:relative;width:min(76vw,520px);aspect-ratio:1.55;border:1px solid transparent;border-radius:20px;background:linear-gradient(145deg,rgba(10,18,28,.82),rgba(3,7,13,.96)) padding-box,var(--web-titanium) border-box;box-shadow:0 32px 80px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.04);transform:perspective(760px) rotateX(7deg) rotateY(-8deg)}
  .d3app-browser::before{content:none;display:none}
  .d3app-browser__bar{height:14%;display:flex;gap:6px;align-items:center;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.045)}
  .d3app-browser__bar i{display:block;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.24)}
  .d3app-browser__body{display:grid;grid-template-columns:1.3fr .7fr;grid-template-rows:1fr 1fr;gap:8px;height:86%;padding:11px}
  .d3app-browser__body span{border-radius:9px;border:1px solid rgba(127,212,251,.10);background:linear-gradient(135deg,rgba(54,126,165,.12),rgba(228,248,255,.035) 48%,rgba(102,190,233,.08))}.d3app-browser__body span:first-child{grid-row:1/3}

  /* AI visual */
  .d3app-visual--ai img,.d3app-visual--studio img,.d3app-visual--club img{position:relative;z-index:5;width:clamp(96px,28vw,170px);height:auto;object-fit:contain;filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 24%,transparent))}
  .d3app-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(240,70,198,.14);border-radius:50%;transform:translate(-50%,-50%) rotate(-18deg)}
  .d3app-orbit--one{width:min(64vw,420px);aspect-ratio:1}.d3app-orbit--two{width:min(48vw,320px);aspect-ratio:1;border-color:rgba(240,149,72,.12);transform:translate(-50%,-50%) rotate(26deg)}.d3app-orbit--three{width:min(34vw,230px);aspect-ratio:1;border-color:rgba(122,66,255,.17)}
  .d3app-orbit::after{content:"";position:absolute;left:8%;top:17%;width:7px;height:7px;border-radius:50%;background:#f046c6;box-shadow:0 0 18px rgba(240,70,198,.75)}

  /* STUDIO visual */
  .d3app-network{position:absolute;width:min(62vw,410px);aspect-ratio:1}
  .d3app-network::before,.d3app-network::after{content:"";position:absolute;inset:15%;border:1px solid rgba(122,66,255,.13);transform:rotate(45deg)}.d3app-network::after{inset:26%;border-color:rgba(255,255,255,.055);transform:rotate(45deg)}
  .d3app-network i{position:absolute;width:8px;height:8px;border-radius:50%;background:#7a42ff;box-shadow:0 0 14px rgba(122,66,255,.62)}
  .d3app-network i:nth-child(1){left:14%;top:16%}.d3app-network i:nth-child(2){right:13%;top:24%}.d3app-network i:nth-child(3){right:20%;bottom:14%}.d3app-network i:nth-child(4){left:18%;bottom:20%}.d3app-network i:nth-child(5){left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:#f046c6}

  /* CLUB visual */
  .d3app-club-points{position:absolute;width:min(68vw,430px);aspect-ratio:1}
  .d3app-club-points::before{content:"";position:absolute;inset:12%;border:1px solid rgba(91,134,255,.11);border-radius:50%}
  .d3app-club-points i{position:absolute;width:10px;height:10px;border-radius:50%;background:#5b86ff;box-shadow:0 0 18px rgba(91,134,255,.65)}
  .d3app-club-points i:nth-child(1){left:11%;top:29%}.d3app-club-points i:nth-child(2){left:31%;top:10%;background:#f046c6}.d3app-club-points i:nth-child(3){right:14%;top:28%}.d3app-club-points i:nth-child(4){right:20%;bottom:15%;background:#78da65}.d3app-club-points i:nth-child(5){left:22%;bottom:18%;background:#f09548}.d3app-club-points i:nth-child(6){left:51%;top:48%;width:13px;height:13px;transform:translate(-50%,-50%)}

  /* FLOW matrix */
  .d3app-slide--flow{display:grid;place-items:center;padding-top:calc(var(--d3app-safe-top) + 54px);padding-bottom:calc(var(--d3app-safe-bottom) + 74px)}
  .d3app-slide--flow::before{content:none!important;display:none!important;background:none!important}
  .d3app-flow-matrix{width:min(100%,820px);display:flex;flex-direction:column;align-items:center;text-align:center}
  .d3app-flow-matrix__brand img{width:clamp(60px,16vw,96px);height:auto;object-fit:contain;filter:drop-shadow(0 0 22px rgba(240,70,198,.10)) drop-shadow(0 0 24px rgba(47,197,255,.08))}
  .d3app-flow-matrix__brand p{margin:12px 0 7px;font:700 8px/1.25 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(207,216,227,.44)}
  .d3app-flow-matrix__brand h2{margin:0;font:900 clamp(40px,12vw,76px)/.9 Montserrat,sans-serif;letter-spacing:-.06em;white-space:nowrap}.d3app-flow-matrix__brand h2 span{background:linear-gradient(180deg,#fff,#8e97a4);-webkit-background-clip:text;background-clip:text;color:transparent}.d3app-flow-matrix__brand h2 em{font-style:normal;background:linear-gradient(90deg,#f046c6,#f09548,#78da65,#2fc5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
  .d3app-flow-matrix__grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:22px}
  .d3app-flow-node{--node:#f046c6;--node-reveal:0;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:11px 12px;border:1px solid rgba(255,255,255,.055);border-radius:15px;background:rgba(9,13,20,.58);box-shadow:inset 2px 0 var(--node),inset 0 1px rgba(255,255,255,.018);opacity:calc(.12 + var(--node-reveal) * .88);transform:translate3d(0,calc((1 - var(--node-reveal)) * 18px),0) scale(calc(.975 + var(--node-reveal) * .025));will-change:transform,opacity}
  .d3app-flow-node img{grid-row:1/3;width:32px;height:32px;object-fit:contain}.d3app-flow-node span{font:800 12px/1 Montserrat,sans-serif;color:#f4f6f9;white-space:nowrap}.d3app-flow-node small{margin-top:4px;font:500 8px/1.25 Montserrat,sans-serif;color:rgba(211,220,231,.50)}
  .d3app-flow-node--nko{--node:#f046c6}.d3app-flow-node--b2b{--node:#f09548}.d3app-flow-node--b2c{--node:#78da65}.d3app-flow-node--b2g{--node:#2fc5ff}

  .d3app-presenter__footer{
    position:absolute;
    z-index:30;
    left:var(--d3app-side);
    right:var(--d3app-side);
    bottom:calc(var(--d3app-safe-bottom) + 14px);
    display:grid;
    grid-template-columns:auto minmax(80px,1fr) auto;
    align-items:center;
    gap:12px;
    pointer-events:none;
  }
  .d3app-presenter__footer>span{min-width:52px;font:800 8px/1 Montserrat,sans-serif;letter-spacing:.14em;color:rgba(235,239,245,.75)}
  .d3app-presenter__footer small{font:600 7px/1 Montserrat,sans-serif;letter-spacing:.08em;color:rgba(203,212,223,.30);white-space:nowrap}
  .d3app-presenter__progress{position:relative;height:1px;background:rgba(255,255,255,.09);overflow:hidden}
  .d3app-presenter__progress i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(90deg,#f046c6 0%,#f09548 34%,#78da65 66%,#2fc5ff 100%);transform-origin:left center;transform:scaleX(var(--d3app-progress,0));will-change:transform}

  .d3app-presenter__outro{
    position:absolute;
    inset:0;
    z-index:26;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    padding:0 var(--d3app-side) calc(var(--d3app-safe-bottom) + 38px);
    text-align:center;
    pointer-events:none;
    opacity:var(--d3app-outro);
    transform:translate3d(0,calc((1 - var(--d3app-outro)) * 16px),0);
    will-change:transform,opacity;
  }
  .d3app-presenter__outro::before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;height:46%;
    z-index:-1;
    background:linear-gradient(180deg,rgba(5,7,11,0),rgba(5,7,11,.72) 42%,#05070b 100%);
  }
  .d3app-presenter__outro p{margin:0 0 8px;font:700 8px/1.2 Montserrat,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(215,222,231,.40)}
  .d3app-presenter__outro h3{margin:0;font:850 clamp(26px,7.6vw,46px)/.98 Montserrat,sans-serif;letter-spacing:-.045em;color:#f3f5f8}
  .d3app-presenter__outro-scroll{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:17px}
  .d3app-presenter__outro-scroll span{font:700 8px/1 Montserrat,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgba(211,219,229,.38)}
  .d3app-presenter__outro-scroll i{display:block;width:1px;height:27px;background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,255,255,0));transform-origin:top;transform:scaleY(calc(.3 + var(--d3app-outro) * .7))}
  .d3app-presenter__sticky{--d3app-outro:0}
  .d3app-presenter__sticky .d3app-presenter__footer{opacity:calc(1 - var(--d3app-outro));transform:translate3d(0,calc(var(--d3app-outro) * 8px),0);will-change:transform,opacity}

  /* =======================================================
     Tablet composition
     ======================================================= */
  @media (min-width:768px){
    .d3app-slide{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);grid-template-rows:1fr;align-items:center;gap:38px;padding-left:clamp(42px,7vw,76px);padding-right:clamp(42px,7vw,76px);padding-bottom:calc(var(--d3app-safe-bottom) + 66px)}
    .d3app-slide__visual{grid-column:2;grid-row:1}.d3app-slide__copy{grid-column:1;grid-row:1;align-self:center}
    .d3app-slide h2{font-size:clamp(58px,8vw,92px);white-space:normal}.d3app-slide__lead{font-size:clamp(15px,2vw,20px)}.d3app-slide__features{margin-top:20px}.d3app-slide__features li{font-size:11px}
    .d3app-slide--flow{display:grid;grid-template-columns:1fr;place-items:center}.d3app-flow-matrix{width:min(86%,820px)}.d3app-flow-matrix__grid{gap:12px;margin-top:28px}.d3app-flow-node{padding:15px 16px}.d3app-flow-node img{width:40px;height:40px}.d3app-flow-node span{font-size:14px}.d3app-flow-node small{font-size:9px}
    .d3app-presenter__footer{left:clamp(42px,7vw,76px);right:clamp(42px,7vw,76px)}
  }

  /* Low-height phones: reduce only internal scale, never section height. */
  @media (max-height:680px){
    .d3app-intro__logo{width:70px}.d3app-intro__brand{margin-top:22px;font-size:42px}.d3app-intro__tagline{margin-top:15px;font-size:17px}.d3app-intro__sub{font-size:10.5px;max-width:300px}
    .d3app-slide{padding-top:calc(var(--d3app-safe-top) + 48px);padding-bottom:calc(var(--d3app-safe-bottom) + 65px)}
    .d3app-slide__visual{max-height:46vh}.d3app-browser{width:min(66vw,340px)}.d3app-visual--ai img,.d3app-visual--studio img,.d3app-visual--club img{width:86px}
    .d3app-slide h2{font-size:39px}.d3app-slide__lead{margin-top:11px;font-size:11px}.d3app-slide__features{margin-top:12px;gap:5px 13px}.d3app-slide__features li{font-size:8px}.d3app-slide__eyebrow{margin-bottom:7px;font-size:7px}
    .d3app-flow-matrix__brand img{width:54px}.d3app-flow-matrix__brand h2{font-size:38px}.d3app-flow-matrix__grid{margin-top:14px;gap:7px}.d3app-flow-node{padding:8px 9px;border-radius:12px}.d3app-flow-node img{width:26px;height:26px}.d3app-flow-node span{font-size:10px}.d3app-flow-node small{font-size:6.8px}
  }

  @media (max-width:359px){
    :root{--d3app-side:15px}
    .d3app-slide h2{font-size:38px}.d3app-slide__features{gap:6px 10px}.d3app-slide__features li{font-size:7.8px}.d3app-presenter__footer small{display:none}.d3app-presenter__footer{grid-template-columns:auto 1fr}
    .d3app-flow-node{column-gap:7px;padding:8px}.d3app-flow-node img{width:26px;height:26px}.d3app-flow-node span{font-size:9.5px}.d3app-flow-node small{font-size:6.5px}
  }

  @media (prefers-reduced-motion:reduce){
    .d3app-intro__logo,.d3app-intro__brand,.d3app-intro__tagline,.d3app-intro__sub,.d3app-intro__scroll{opacity:1!important;transform:none!important;transition:none!important}
    .d3app-intro__scroll i{animation:none!important}
    .d3app-track,.d3app-slide__visual,.d3app-slide__copy,.d3app-flow-node,.d3app-presenter__outro{transition:none!important}
  }
}

@media (min-width:1025px){
  .d3app-mobile{display:none!important}
}

@media (max-width:1024px){
  .d3app-slide--web .d3app-browser__bar i:nth-child(1){background:#367EA5}
  .d3app-slide--web .d3app-browser__bar i:nth-child(2){background:#E4F8FF}
  .d3app-slide--web .d3app-browser__bar i:nth-child(3){background:#66BEE9}
}

@media (max-width:1024px){
  /* Keep STUDIO / CLUB decorative points on the exact desktop four-color palette. */
  .d3app-slide--studio .d3app-network i:nth-child(n),
  .d3app-slide--club .d3app-club-points i:nth-child(n){
    background:var(--club-gradient)!important;
    box-shadow:none!important;
  }
  .d3app-slide--studio .d3app-network i:nth-child(5){
    background:var(--club-gradient)!important;
  }
}

/* =========================================================
   4.18.6 — FLOW mobile narrative inside slide 05
   ========================================================= */
@media (max-width:1024px){
  .d3app-slide--flow{
    display:block!important;
    padding:0!important;
    background:#05070b!important;
  }

  .d3app-flow-scene{
    --flow-logo-reveal:0;
    --flow-title-reveal:0;
    --flow-sub-reveal:0;
    --flow-lift:0;
    --flow-summary:0;
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#05070b;
    isolation:isolate;
  }

  .d3app-flow-scene__brand{
    position:absolute;
    left:50%;
    top:50%;
    z-index:12;
    width:min(84%,640px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transform:translate3d(-50%,-50%,0);
    transform-origin:center center;
    will-change:transform;
    pointer-events:none;
  }
  .d3app-flow-scene__brand img{
    width:clamp(58px,15.5vw,92px);
    height:auto;
    object-fit:contain;
    opacity:var(--flow-logo-reveal);
    filter:none!important;
    transform:none!important;
    will-change:opacity;
  }
  .d3app-flow-scene__brand h2{
    margin:13px 0 0;
    font:900 clamp(38px,11.5vw,74px)/.9 Montserrat,sans-serif;
    letter-spacing:-.06em;
    white-space:nowrap;
    opacity:var(--flow-title-reveal);
    will-change:opacity;
  }
  .d3app-flow-scene__brand h2 span{
    background:linear-gradient(180deg,#fff 0%,#d7dce3 34%,#8b949f 66%,#eef1f4 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .d3app-flow-scene__brand h2 em{
    font-style:normal;
    background:linear-gradient(90deg,#f046c6 0%,#f09548 32%,#78da65 65%,#2fc5ff 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .d3app-flow-scene__brand p{
    margin:10px 0 0;
    max-width:500px;
    font:700 clamp(8px,2.3vw,12px)/1.35 Montserrat,sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(211,219,229,.46);
    opacity:var(--flow-sub-reveal);
    will-change:opacity;
  }

  .d3app-flow-deck{
    position:absolute;
    inset:0;
    z-index:8;
    pointer-events:none;
  }
  .d3app-flow-card{
    --flow-color:#f046c6;
    --flow-card-y:80vh;
    --flow-card-opacity:0;
    --flow-card-surface-h:50px;
    --flow-card-detail:0;
    --flow-card-tags:0;
    --flow-card-title-scale:1;
    position:absolute;
    left:var(--d3app-side);
    right:var(--d3app-side);
    top:0;
    height:min(390px,52vh);
    padding:0;
    border:0;
    background:transparent;
    opacity:var(--flow-card-opacity);
    transform:translate3d(0,var(--flow-card-y),0);
    transform-origin:center top;
    will-change:transform,opacity;
    overflow:visible;
  }
  .d3app-flow-card::before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;
    height:var(--flow-card-surface-h);
    border:1px solid rgba(255,255,255,.075);
    border-radius:18px;
    background:rgba(10,13,19,.94);
    box-shadow:inset 3px 0 0 var(--flow-color),inset 0 1px rgba(255,255,255,.025);
    transition:none!important;
    will-change:height;
  }
  .d3app-flow-card--nko{--flow-color:#f046c6;z-index:1}
  .d3app-flow-card--b2b{--flow-color:#f09548;z-index:2}
  .d3app-flow-card--b2c{--flow-color:#78da65;z-index:3}
  .d3app-flow-card--b2g{--flow-color:#2fc5ff;z-index:4}

  .d3app-flow-card__head{
    position:relative;
    z-index:2;
    height:50px;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:0 13px;
    transform:scale(var(--flow-card-title-scale));
    transform-origin:left center;
    will-change:transform;
  }
  .d3app-flow-card__head img{
    width:32px;height:32px;object-fit:contain;filter:none!important;
  }
  .d3app-flow-card__head div{min-width:0;display:flex;flex-direction:column;gap:3px}
  .d3app-flow-card__head strong{
    font:850 12px/1 Montserrat,sans-serif;
    letter-spacing:-.025em;
    color:#f4f6f9;
    white-space:nowrap;
  }
  .d3app-flow-card__head strong em{font-style:normal;color:var(--flow-color)}
  .d3app-flow-card__head small{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font:600 7.5px/1.2 Montserrat,sans-serif;
    color:rgba(212,220,230,.48);
  }

  .d3app-flow-card__tags{
    position:absolute;
    z-index:2;
    left:13px;right:13px;top:63px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
    opacity:var(--flow-card-tags);
    transform:none;
    will-change:opacity;
    pointer-events:none;
  }
  .d3app-flow-card__tags span{
    min-width:0;
    padding:6px 7px;
    border:1px solid rgba(255,255,255,.055);
    border-radius:999px;
    background:rgba(255,255,255,.018);
    font:650 clamp(6.6px,1.9vw,9px)/1.22 Montserrat,sans-serif;
    color:rgba(228,233,240,.76);
    text-align:left;
    overflow-wrap:anywhere;
  }
  .d3app-flow-card__tags span::before{content:"#";color:var(--flow-color);margin-right:2px}

  .d3app-flow-summary{
    position:absolute;
    z-index:10;
    left:var(--d3app-side);right:var(--d3app-side);
    top:calc(var(--d3app-safe-top) + 116px);
    bottom:calc(var(--d3app-safe-bottom) + 106px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:13px;
    opacity:var(--flow-summary);
    transform:none;
    will-change:opacity;
    pointer-events:none;
  }
  .d3app-flow-summary>p{
    margin:0;
    font:750 7px/1.2 Montserrat,sans-serif;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:rgba(214,221,230,.40);
  }
  .d3app-flow-summary__grid{
    width:min(100%,720px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .d3app-flow-summary__item{
    --flow-color:#f046c6;
    min-width:0;
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    gap:8px;
    min-height:58px;
    padding:9px 10px;
    border:1px solid rgba(255,255,255,.065);
    border-radius:15px;
    background:rgba(10,13,19,.90);
    box-shadow:inset 2px 0 0 var(--flow-color),inset 0 1px rgba(255,255,255,.02);
  }
  .d3app-flow-summary__item--nko{--flow-color:#f046c6}
  .d3app-flow-summary__item--b2b{--flow-color:#f09548}
  .d3app-flow-summary__item--b2c{--flow-color:#78da65}
  .d3app-flow-summary__item--b2g{--flow-color:#2fc5ff}
  .d3app-flow-summary__item img{width:28px;height:28px;object-fit:contain;filter:none!important}
  .d3app-flow-summary__item span{min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
  .d3app-flow-summary__item strong{font:800 9px/1 Montserrat,sans-serif;color:#f2f5f8;white-space:nowrap}
  .d3app-flow-summary__item small{font:550 6.7px/1.25 Montserrat,sans-serif;color:rgba(210,219,229,.48)}

  /* Keep final matrix visible behind the final “details” prompt. */
  .d3app-presenter__outro{z-index:28;padding-bottom:calc(var(--d3app-safe-bottom) + 28px)}
  .d3app-presenter__outro::before{height:34%;background:linear-gradient(180deg,rgba(5,7,11,0),rgba(5,7,11,.48) 48%,#05070b 100%)}
  .d3app-presenter__outro p{display:none}
  .d3app-presenter__outro h3{font-size:clamp(23px,6.8vw,40px)}

  @media (min-width:768px){
    .d3app-flow-scene__brand{width:min(72%,720px)}
    .d3app-flow-scene__brand img{width:88px}
    .d3app-flow-scene__brand h2{font-size:70px}
    .d3app-flow-card{left:clamp(80px,12vw,150px);right:clamp(80px,12vw,150px);height:min(390px,48vh)}
    .d3app-flow-card__head{height:54px;grid-template-columns:38px minmax(0,1fr);padding:0 16px}
    .d3app-flow-card__head img{width:36px;height:36px}
    .d3app-flow-card__head strong{font-size:14px}.d3app-flow-card__head small{font-size:8.5px}
    .d3app-flow-card__tags{left:16px;right:16px;top:68px;gap:7px}.d3app-flow-card__tags span{font-size:9px;padding:7px 9px}
    .d3app-flow-summary{left:clamp(90px,13vw,160px);right:clamp(90px,13vw,160px);top:calc(var(--d3app-safe-top) + 130px);bottom:calc(var(--d3app-safe-bottom) + 112px)}
    .d3app-flow-summary__grid{gap:11px}.d3app-flow-summary__item{min-height:68px;padding:11px 13px}.d3app-flow-summary__item img{width:34px;height:34px}.d3app-flow-summary__item strong{font-size:11px}.d3app-flow-summary__item small{font-size:7.5px}
  }

  @media (max-height:680px){
    .d3app-flow-scene__brand img{width:50px}
    .d3app-flow-scene__brand h2{margin-top:8px;font-size:35px}
    .d3app-flow-scene__brand p{margin-top:7px;font-size:6.5px}
    .d3app-flow-card{height:min(270px,48vh)}
    .d3app-flow-card__head{height:44px;grid-template-columns:29px minmax(0,1fr);gap:8px;padding:0 10px}
    .d3app-flow-card__head img{width:27px;height:27px}
    .d3app-flow-card__head strong{font-size:10px}.d3app-flow-card__head small{font-size:6.4px}
    .d3app-flow-card__tags{left:10px;right:10px;top:54px;gap:4px}.d3app-flow-card__tags span{padding:4px 5px;font-size:6px;line-height:1.15}
    .d3app-flow-summary{top:calc(var(--d3app-safe-top) + 90px);bottom:calc(var(--d3app-safe-bottom) + 94px);gap:8px}
    .d3app-flow-summary__grid{gap:6px}.d3app-flow-summary__item{min-height:48px;border-radius:12px;padding:7px 8px;grid-template-columns:24px minmax(0,1fr);gap:6px}.d3app-flow-summary__item img{width:22px;height:22px}.d3app-flow-summary__item strong{font-size:7.8px}.d3app-flow-summary__item small{font-size:5.8px}
    .d3app-presenter__outro h3{font-size:23px}.d3app-presenter__outro-scroll{margin-top:11px}
  }

  @media (prefers-reduced-motion:reduce){
    .d3app-flow-scene__brand,.d3app-flow-card,.d3app-flow-card__tags,.d3app-flow-summary{transition:none!important}
  }

  /* =======================================================
     4.18.7 — MOBILE PRODUCT CHIPS
     Desktop remains unchanged. No backdrop blur / glow layers.
     ======================================================= */
  .d3app-slide:not(.d3app-slide--flow){--d3app-feature-reveal:0}
  .d3app-slide__features{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    margin-top:18px;
    max-width:700px;
  }
  .d3app-slide__features li{
    --feature-i:0;
    --feature-r:clamp(0,calc((var(--d3app-feature-reveal) * 10) - var(--feature-i)),1);
    flex:0 0 auto;
    max-width:100%;
    padding:8px 11px;
    border:1px solid transparent;
    border-radius:999px;
    background:
      linear-gradient(rgba(10,13,19,.94),rgba(10,13,19,.94)) padding-box,
      var(--chip-accent,linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.045))) border-box;
    box-shadow:inset 0 1px rgba(255,255,255,.025);
    font:650 clamp(8.2px,2.2vw,11px)/1.15 Montserrat,sans-serif;
    letter-spacing:-.012em;
    color:rgba(229,234,241,.76);
    opacity:var(--feature-r);
    transform:translate3d(0,calc((1 - var(--feature-r)) * 7px),0);
    will-change:transform,opacity;
  }
  .d3app-slide__features li::before{content:none!important;display:none!important}
  .d3app-slide__features li:nth-child(1){--feature-i:0}
  .d3app-slide__features li:nth-child(2){--feature-i:1}
  .d3app-slide__features li:nth-child(3){--feature-i:2}
  .d3app-slide__features li:nth-child(4){--feature-i:3}
  .d3app-slide__features li:nth-child(5){--feature-i:4}
  .d3app-slide__features li:nth-child(6){--feature-i:5}
  .d3app-slide__features li:nth-child(7){--feature-i:6}
  .d3app-slide__features li:nth-child(8){--feature-i:7}
  .d3app-slide__features li:nth-child(9){--feature-i:8}
  .d3app-slide__features li:nth-child(10){--feature-i:9}

  .d3app-slide--web{--chip-accent:var(--web-titanium)}
  .d3app-slide--ai{--chip-accent:var(--ai-gradient)}
  .d3app-slide--studio,.d3app-slide--club{--chip-accent:var(--club-gradient)}

  /* FLOW: chips instead of hashtags, arranged inside the expanding surface. */
  .d3app-flow-card__tags{
    top:calc(var(--flow-card-surface-h) * .18 + 42px);
    left:14px;
    right:14px;
    height:calc(var(--flow-card-surface-h) - 76px);
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-content:center;
    align-items:center;
    gap:7px;
    opacity:1;
    transform:none;
    overflow:hidden;
  }
  .d3app-flow-card__tags span{
    --tag-i:0;
    --tag-r:clamp(0,calc((var(--flow-card-tags) * 10) - var(--tag-i)),1);
    flex:0 1 auto;
    max-width:100%;
    padding:7px 10px;
    border:1px solid color-mix(in srgb,var(--flow-color) 22%,rgba(255,255,255,.055));
    border-radius:999px;
    background:rgba(255,255,255,.025);
    box-shadow:inset 0 1px rgba(255,255,255,.025);
    font:650 clamp(6.8px,1.95vw,9.2px)/1.2 Montserrat,sans-serif;
    letter-spacing:-.012em;
    color:rgba(229,234,241,.78);
    text-align:center;
    overflow-wrap:anywhere;
    opacity:var(--tag-r);
    transform:translate3d(0,calc((1 - var(--tag-r)) * 7px),0);
    will-change:transform,opacity;
  }
  .d3app-flow-card__tags span::before{content:none!important;display:none!important}
  .d3app-flow-card__tags span:nth-child(1){--tag-i:0}
  .d3app-flow-card__tags span:nth-child(2){--tag-i:1}
  .d3app-flow-card__tags span:nth-child(3){--tag-i:2}
  .d3app-flow-card__tags span:nth-child(4){--tag-i:3}
  .d3app-flow-card__tags span:nth-child(5){--tag-i:4}
  .d3app-flow-card__tags span:nth-child(6){--tag-i:5}
  .d3app-flow-card__tags span:nth-child(7){--tag-i:6}
  .d3app-flow-card__tags span:nth-child(8){--tag-i:7}
  .d3app-flow-card__tags span:nth-child(9){--tag-i:8}
  .d3app-flow-card__tags span:nth-child(10){--tag-i:9}

  @media (min-width:768px){
    .d3app-slide__features{gap:8px;margin-top:21px}
    .d3app-slide__features li{padding:9px 12px;font-size:10.5px}
    .d3app-flow-card__tags{left:18px;right:18px;height:calc(var(--flow-card-surface-h) - 86px);gap:8px}
    .d3app-flow-card__tags span{padding:8px 11px;font-size:9.4px}
  }

  @media (max-width:374px){
    .d3app-slide__features{gap:5px;margin-top:12px}
    .d3app-slide__features li{padding:6px 8px;font-size:7.3px}
    .d3app-flow-card__tags{left:9px;right:9px;gap:4px;height:calc(var(--flow-card-surface-h) - 68px)}
    .d3app-flow-card__tags span{padding:5px 7px;font-size:5.8px}
  }

  @media (max-height:680px){
    .d3app-slide__features{gap:5px;margin-top:11px}
    .d3app-slide__features li{padding:5px 8px;font-size:7.2px}
    .d3app-flow-card__tags{top:47px;left:9px;right:9px;height:calc(var(--flow-card-surface-h) - 57px);gap:4px}
    .d3app-flow-card__tags span{padding:4px 6px;font-size:5.8px}
  }

}


/* =========================================================
   4.18.8 — FLOW full-screen card composition
   The duplicate summary matrix is removed. Expanded ecosystem cards use the
   available viewport, while collapsed cards remain as a compact stack.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-summary{display:none!important}

  .d3app-flow-card{
    height:calc(var(--d3app-vh) - 44px);
  }
  .d3app-flow-card::before{
    border-radius:20px;
    background:rgba(9,12,18,.965);
    box-shadow:inset 3px 0 0 var(--flow-color),inset 0 1px rgba(255,255,255,.032);
  }
  .d3app-flow-card__head{
    height:54px;
    grid-template-columns:36px minmax(0,1fr);
    gap:11px;
    padding:0 15px;
  }
  .d3app-flow-card__head img{width:34px;height:34px}
  .d3app-flow-card__head strong{font-size:12.5px}
  .d3app-flow-card__head small{font-size:7.6px}

  .d3app-flow-card__tags{
    top:70px;
    left:15px;
    right:15px;
    height:calc(var(--flow-card-surface-h) - 92px);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(38px,auto);
    align-content:space-evenly;
    gap:8px 9px;
    overflow:hidden;
    opacity:1;
    z-index:3;
  }
  .d3app-flow-card__tags span{
    min-height:40px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px 9px;
    border-radius:14px;
    border:1px solid color-mix(in srgb,var(--flow-color) 24%,rgba(255,255,255,.055));
    background:rgba(255,255,255,.022);
    font:650 clamp(7px,1.92vw,9.4px)/1.2 Montserrat,sans-serif;
    text-align:center;
    color:rgba(231,235,241,.80);
  }
  .d3app-flow-card__code{
    position:absolute;
    right:14px;
    bottom:calc(var(--d3app-vh) - var(--flow-card-surface-h) + 2px);
    z-index:1;
    font:900 clamp(66px,22vw,126px)/.75 Montserrat,sans-serif;
    letter-spacing:-.08em;
    color:color-mix(in srgb,var(--flow-color) 8%,transparent);
    opacity:var(--flow-card-detail);
    transform:translate3d(0,calc((1 - var(--flow-card-detail)) * 10px),0);
    pointer-events:none;
    user-select:none;
    will-change:transform,opacity;
  }

  /* The transition to the detailed product canvas now appears directly over
     the completed collapsed FLOW stack; no intermediate matrix screen. */
  .d3app-presenter__outro{
    justify-content:flex-end;
    padding-bottom:calc(var(--d3app-safe-bottom) + 24px);
  }
  .d3app-presenter__outro::before{
    height:38%;
    background:linear-gradient(180deg,rgba(5,7,11,0),rgba(5,7,11,.34) 42%,#05070b 100%);
  }

  @media (min-width:768px){
    .d3app-flow-card__head{height:60px;grid-template-columns:42px minmax(0,1fr);padding:0 18px}
    .d3app-flow-card__head img{width:40px;height:40px}
    .d3app-flow-card__head strong{font-size:14px}.d3app-flow-card__head small{font-size:8.5px}
    .d3app-flow-card__tags{top:78px;left:18px;right:18px;height:calc(var(--flow-card-surface-h) - 102px);gap:10px 12px;grid-auto-rows:minmax(46px,auto)}
    .d3app-flow-card__tags span{min-height:48px;padding:10px 12px;border-radius:16px;font-size:10px}
    .d3app-flow-card__code{right:20px;font-size:148px}
  }

  @media (max-width:374px){
    .d3app-flow-card__head{height:46px;grid-template-columns:29px minmax(0,1fr);gap:8px;padding:0 10px}
    .d3app-flow-card__head img{width:27px;height:27px}
    .d3app-flow-card__head strong{font-size:10px}.d3app-flow-card__head small{font-size:6.3px}
    .d3app-flow-card__tags{top:57px;left:10px;right:10px;height:calc(var(--flow-card-surface-h) - 70px);gap:5px 6px;grid-auto-rows:minmax(30px,auto)}
    .d3app-flow-card__tags span{min-height:31px;padding:5px 6px;border-radius:11px;font-size:5.9px}
    .d3app-flow-card__code{right:9px;font-size:62px}
  }

  @media (max-height:680px){
    .d3app-flow-card__head{height:46px;grid-template-columns:29px minmax(0,1fr);gap:8px;padding:0 10px}
    .d3app-flow-card__head img{width:27px;height:27px}
    .d3app-flow-card__head strong{font-size:10px}.d3app-flow-card__head small{font-size:6.3px}
    .d3app-flow-card__tags{top:56px;left:10px;right:10px;height:calc(var(--flow-card-surface-h) - 68px);gap:5px 6px;grid-auto-rows:minmax(28px,auto)}
    .d3app-flow-card__tags span{min-height:29px;padding:4px 6px;border-radius:10px;font-size:5.8px}
    .d3app-flow-card__code{right:9px;font-size:58px}
  }
}

/* =========================================================
   4.18.9 — FLOW reference screens
   Mobile-only composition based on approved NKO/B2B/B2C/B2G mockups.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card{
    --flow-card-statement:0;
    --flow-card-route:0;
    --flow-card-metrics:0;
    --flow-card-formula:0;
  }
  .d3app-flow-card::before{
    background:linear-gradient(180deg,rgba(10,13,19,.985),rgba(7,10,15,.985));
    border-color:rgba(255,255,255,.09);
    box-shadow:inset 3px 0 0 var(--flow-color),inset 0 1px rgba(255,255,255,.035);
  }

  .d3app-flow-card__head{
    z-index:7;
  }

  .d3app-flow-card__body{
    position:absolute;
    z-index:5;
    top:54px;
    left:0;
    right:0;
    height:max(0px,calc(var(--flow-card-surface-h) - 54px));
    padding:10px 14px 12px;
    display:grid;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    gap:9px;
    overflow:hidden;
    pointer-events:none;
  }

  .d3app-flow-card__statement{
    margin:0;
    max-width:94%;
    font:650 clamp(15px,4.45vw,23px)/1.12 Montserrat,sans-serif;
    letter-spacing:-.032em;
    color:#f3f5f8;
    opacity:var(--flow-card-statement);
    transform:translate3d(0,calc((1 - var(--flow-card-statement))*8px),0);
    will-change:opacity,transform;
  }

  .d3app-flow-card__route{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:start;
    gap:0;
    min-height:58px;
    padding-top:1px;
    opacity:var(--flow-card-route);
    transform:translate3d(0,calc((1 - var(--flow-card-route))*7px),0);
    will-change:opacity,transform;
  }
  .d3app-flow-card__route::before{
    content:"";
    position:absolute;
    top:18px;
    left:9.5%;
    right:9.5%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--flow-color) 8%,var(--flow-color) 92%,transparent);
    opacity:.68;
  }
  .d3app-flow-card__route span{
    position:relative;
    z-index:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-align:center;
  }
  .d3app-flow-card__route i{
    width:37px;
    height:37px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--flow-color) 70%,transparent);
    border-radius:50%;
    background:#080b10;
    color:var(--flow-color);
    font:700 16px/1 Montserrat,sans-serif;
    font-style:normal;
  }
  .d3app-flow-card__route b{
    max-width:100%;
    font:650 clamp(6px,1.65vw,8px)/1.1 Montserrat,sans-serif;
    color:rgba(239,243,248,.83);
    white-space:normal;
  }

  .d3app-flow-card__metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    opacity:var(--flow-card-metrics);
    transform:translate3d(0,calc((1 - var(--flow-card-metrics))*7px),0);
    will-change:opacity,transform;
  }
  .d3app-flow-card__metrics>span{
    min-width:0;
    min-height:38px;
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 15px;
    align-items:center;
    gap:4px;
    padding:5px 7px;
    border:1px solid color-mix(in srgb,var(--flow-color) 36%,rgba(255,255,255,.045));
    border-radius:10px;
    background:rgba(255,255,255,.018);
  }
  .d3app-flow-card__metrics i,
  .d3app-flow-card__metrics em{
    color:var(--flow-color);
    font-style:normal;
    text-align:center;
  }
  .d3app-flow-card__metrics i{font:700 14px/1 Montserrat,sans-serif}
  .d3app-flow-card__metrics em{font:700 11px/1 Montserrat,sans-serif;opacity:.9}
  .d3app-flow-card__metrics b{
    min-width:0;
    font:650 clamp(5.8px,1.45vw,7.2px)/1.12 Montserrat,sans-serif;
    color:rgba(235,239,245,.82);
    white-space:normal;
  }

  /* Reset the previous absolute chip layer: in 4.18.9 it becomes a real row
     in the card body and fills the available vertical space. */
  .d3app-flow-card__body .d3app-flow-card__tags{
    position:relative!important;
    inset:auto!important;
    height:auto!important;
    min-height:0;
    align-self:stretch;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(32px,1fr);
    align-content:stretch;
    gap:6px 8px;
    overflow:hidden;
    opacity:1;
    z-index:3;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:32px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 7px;
    border-radius:10px;
    border:1px solid color-mix(in srgb,var(--flow-color) 36%,rgba(255,255,255,.045));
    background:rgba(255,255,255,.012);
    font:650 clamp(6px,1.6vw,8px)/1.18 Montserrat,sans-serif;
    text-align:center;
    color:rgba(235,239,245,.84);
    opacity:var(--tag-r,0);
    transform:translate3d(0,calc((1 - var(--tag-r,0))*7px),0);
    transition:none!important;
    will-change:opacity,transform;
  }

  .d3app-flow-card__formula{
    position:relative;
    min-height:23px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.14);
    font:550 clamp(6.4px,1.7vw,8px)/1 Montserrat,sans-serif;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(226,232,240,.66);
    opacity:var(--flow-card-formula);
    transform:translate3d(0,calc((1 - var(--flow-card-formula))*6px),0);
    will-change:opacity,transform;
  }

  .d3app-flow-card__code{
    z-index:4;
    bottom:8px;
    right:12px;
    font-size:clamp(64px,20vw,116px);
    color:color-mix(in srgb,var(--flow-color) 10%,transparent);
    opacity:calc(var(--flow-card-detail) * .72);
  }

  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:start;
    grid-auto-rows:minmax(38px,46px);
  }
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:40px;
  }

  @media (min-width:768px){
    .d3app-flow-card__body{top:60px;height:max(0px,calc(var(--flow-card-surface-h) - 60px));padding:14px 18px 16px;gap:12px}
    .d3app-flow-card__statement{font-size:25px}
    .d3app-flow-card__route{min-height:72px}.d3app-flow-card__route::before{top:23px}.d3app-flow-card__route i{width:48px;height:48px;font-size:20px}.d3app-flow-card__route b{font-size:9px}
    .d3app-flow-card__metrics{gap:10px}.d3app-flow-card__metrics>span{min-height:48px;border-radius:13px;padding:7px 10px;grid-template-columns:28px minmax(0,1fr) 18px}.d3app-flow-card__metrics i{font-size:17px}.d3app-flow-card__metrics b{font-size:8.5px}.d3app-flow-card__metrics em{font-size:13px}
    .d3app-flow-card__body .d3app-flow-card__tags{gap:8px 10px;grid-auto-rows:minmax(40px,1fr)}
    .d3app-flow-card__body .d3app-flow-card__tags span{min-height:40px;border-radius:13px;padding:8px 10px;font-size:9.5px}
    .d3app-flow-card__formula{min-height:28px;font-size:8.8px}
    .d3app-flow-card__code{right:18px;font-size:140px}
  }

  @media (max-width:374px), (max-height:680px){
    .d3app-flow-card__body{top:46px;height:max(0px,calc(var(--flow-card-surface-h) - 46px));padding:7px 9px 8px;gap:5px}
    .d3app-flow-card__statement{font-size:12px;line-height:1.1}
    .d3app-flow-card__route{min-height:48px}.d3app-flow-card__route::before{top:14px}.d3app-flow-card__route i{width:29px;height:29px;font-size:12px}.d3app-flow-card__route b{font-size:5.2px}
    .d3app-flow-card__metrics{gap:4px}.d3app-flow-card__metrics>span{min-height:29px;border-radius:8px;padding:3px 4px;grid-template-columns:16px minmax(0,1fr) 10px;gap:2px}.d3app-flow-card__metrics i{font-size:10px}.d3app-flow-card__metrics b{font-size:4.8px}.d3app-flow-card__metrics em{font-size:8px}
    .d3app-flow-card__body .d3app-flow-card__tags{gap:4px 5px;grid-auto-rows:minmax(23px,1fr)}
    .d3app-flow-card__body .d3app-flow-card__tags span{min-height:23px;border-radius:8px;padding:3px 4px;font-size:5px}
    .d3app-flow-card__formula{min-height:16px;padding-top:4px;font-size:5.2px}
    .d3app-flow-card__code{right:8px;bottom:5px;font-size:54px}
  }
}

/* =========================================================
   4.18.10 — FLOW density / hierarchy final pass
   Raise FLOW brand, enlarge primary narrative, make metric tiles dominant,
   and compact the capability matrix to use the mobile viewport more fully.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-scene__brand{
    top:49%;
  }
  .d3app-flow-scene__brand img{
    width:58px;
  }
  .d3app-flow-scene__brand h2{
    margin-top:7px;
    font-size:clamp(38px,10.7vw,48px);
  }
  .d3app-flow-scene__brand p{
    margin-top:5px;
    font-size:7.2px;
    letter-spacing:.175em;
  }

  .d3app-flow-card__head{
    height:58px;
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
    padding:0 15px;
  }
  .d3app-flow-card__head img{width:38px;height:38px}
  .d3app-flow-card__head strong{font-size:13.5px;line-height:1.02}
  .d3app-flow-card__head small{margin-top:2px;font-size:8px;line-height:1.18}

  .d3app-flow-card__body{
    top:58px;
    height:max(0px,calc(var(--flow-card-surface-h) - 58px));
    padding:10px 13px 12px;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    gap:8px;
  }
  .d3app-flow-card__statement{
    max-width:97%;
    font-size:clamp(17px,5.05vw,25px);
    line-height:1.08;
  }

  /* Larger route — keeps the five-step story readable at a glance. */
  .d3app-flow-card__route{
    min-height:70px;
    padding-top:1px;
  }
  .d3app-flow-card__route::before{top:22px;left:8.8%;right:8.8%}
  .d3app-flow-card__route span{gap:6px}
  .d3app-flow-card__route i{
    width:45px;
    height:45px;
    font-size:18px;
    border-width:1.2px;
  }
  .d3app-flow-card__route b{
    font-size:clamp(6.9px,1.9vw,9px);
    line-height:1.08;
  }

  /* The 3 context tiles are the secondary focal point and intentionally large. */
  .d3app-flow-card__metrics{
    gap:7px;
  }
  .d3app-flow-card__metrics>span{
    min-height:61px;
    grid-template-columns:30px minmax(0,1fr) 20px;
    gap:6px;
    padding:8px 9px;
    border-radius:13px;
  }
  .d3app-flow-card__metrics i{font-size:20px}
  .d3app-flow-card__metrics b{
    font-size:clamp(7.2px,2vw,9.5px);
    line-height:1.08;
  }
  .d3app-flow-card__metrics em{font-size:14px}

  /* Capability matrix: still two columns, but compact, denser and more legible. */
  .d3app-flow-card__body .d3app-flow-card__tags{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:minmax(28px,auto);
    align-content:center;
    gap:4px 6px;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:29px;
    padding:5px 7px;
    border-radius:9px;
    font-size:clamp(6.8px,1.82vw,8.8px);
    line-height:1.12;
  }
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:center;
    grid-auto-rows:minmax(34px,42px);
  }
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:36px;
  }

  .d3app-flow-card__formula{
    min-height:24px;
    padding-top:7px;
    font-size:7.2px;
  }
  .d3app-flow-card__code{
    bottom:4px;
    font-size:clamp(70px,22vw,124px);
  }

  @media (min-width:768px){
    .d3app-flow-scene__brand img{width:82px}
    .d3app-flow-scene__brand h2{font-size:66px}
    .d3app-flow-scene__brand p{font-size:8.5px}
    .d3app-flow-card__head{height:66px;grid-template-columns:46px minmax(0,1fr);padding:0 19px}
    .d3app-flow-card__head img{width:44px;height:44px}
    .d3app-flow-card__head strong{font-size:16px}.d3app-flow-card__head small{font-size:9.5px}
    .d3app-flow-card__body{top:66px;height:max(0px,calc(var(--flow-card-surface-h) - 66px));padding:15px 20px 17px;gap:11px}
    .d3app-flow-card__statement{font-size:28px}
    .d3app-flow-card__route{min-height:86px}.d3app-flow-card__route::before{top:27px}.d3app-flow-card__route i{width:56px;height:56px;font-size:22px}.d3app-flow-card__route b{font-size:10px}
    .d3app-flow-card__metrics{gap:11px}.d3app-flow-card__metrics>span{min-height:72px;border-radius:15px;padding:10px 13px;grid-template-columns:34px minmax(0,1fr) 22px}.d3app-flow-card__metrics i{font-size:23px}.d3app-flow-card__metrics b{font-size:10.5px}.d3app-flow-card__metrics em{font-size:15px}
    .d3app-flow-card__body .d3app-flow-card__tags{gap:6px 9px;grid-auto-rows:minmax(34px,auto)}
    .d3app-flow-card__body .d3app-flow-card__tags span{min-height:35px;padding:7px 9px;border-radius:11px;font-size:9.5px}
    .d3app-flow-card__formula{min-height:28px;font-size:8.6px}
  }

  @media (max-width:374px), (max-height:680px){
    .d3app-flow-scene__brand img{width:44px}
    .d3app-flow-scene__brand h2{font-size:32px}
    .d3app-flow-scene__brand p{font-size:5.9px}
    .d3app-flow-card__head{height:45px;grid-template-columns:29px minmax(0,1fr);gap:7px;padding:0 9px}
    .d3app-flow-card__head img{width:27px;height:27px}
    .d3app-flow-card__head strong{font-size:10.5px}.d3app-flow-card__head small{font-size:6.5px}
    .d3app-flow-card__body{top:45px;height:max(0px,calc(var(--flow-card-surface-h) - 45px));padding:6px 8px 7px;gap:4px}
    .d3app-flow-card__statement{font-size:12.8px;line-height:1.06}
    .d3app-flow-card__route{min-height:45px}.d3app-flow-card__route::before{top:14px}.d3app-flow-card__route i{width:29px;height:29px;font-size:12px}.d3app-flow-card__route b{font-size:5.3px}
    .d3app-flow-card__metrics{gap:3px}.d3app-flow-card__metrics>span{min-height:34px;border-radius:8px;padding:4px;grid-template-columns:17px minmax(0,1fr) 11px;gap:2px}.d3app-flow-card__metrics i{font-size:11px}.d3app-flow-card__metrics b{font-size:5.1px}.d3app-flow-card__metrics em{font-size:8px}
    .d3app-flow-card__body .d3app-flow-card__tags{gap:2px 4px;grid-auto-rows:minmax(22px,auto)}
    .d3app-flow-card__body .d3app-flow-card__tags span{min-height:22px;padding:3px 4px;border-radius:7px;font-size:5.4px}
    .d3app-flow-card__formula{min-height:15px;padding-top:3px;font-size:5px}
    .d3app-flow-card__code{font-size:52px}
  }
}


/* =========================================================
   4.18.11 — FLOW mobile polish
   Drawn icons, explanatory copy, denser fill and auto density.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card{
    height:calc(var(--d3app-vh) - 24px);
  }

  .d3app-flow-card__body{
    top:54px;
    height:max(0px,calc(var(--flow-card-surface-h) - 54px));
    padding:12px 14px 14px;
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    gap:10px;
  }

  .d3app-flow-card svg{
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.85;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .d3app-flow-card__statement{
    max-width:100%;
    padding-bottom:4px;
  }

  .d3app-flow-card__route{
    min-height:66px;
    margin-top:2px;
  }
  .d3app-flow-card__route::before{
    top:18px;
    left:10%;
    right:10%;
  }
  .d3app-flow-card__route span{
    gap:7px;
  }
  .d3app-flow-card__route .d3app-flow-icon{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid color-mix(in srgb,var(--flow-color) 70%,transparent);
    border-radius:50%;
    background:#080b10;
    color:var(--flow-color);
  }
  .d3app-flow-card__route .d3app-flow-icon svg{
    width:18px;
    height:18px;
  }
  .d3app-flow-card__route b{
    font:650 clamp(6.2px,1.7vw,8.2px)/1.14 Montserrat,sans-serif;
  }

  .d3app-flow-card__metrics{
    gap:8px;
  }
  .d3app-flow-card__metrics > span{
    min-height:44px;
    grid-template-columns:20px minmax(0,1fr);
    gap:6px;
    padding:6px 8px;
    border-radius:12px;
  }
  .d3app-flow-card__metrics .d3app-flow-icon{
    width:18px;
    height:18px;
    display:grid;
    place-items:center;
    color:var(--flow-color);
  }
  .d3app-flow-card__metrics b{
    font:650 clamp(6.2px,1.62vw,8.3px)/1.14 Montserrat,sans-serif;
  }

  .d3app-flow-card__modules-intro{
    margin:0;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.09);
    font:600 clamp(6.8px,1.85vw,9.2px)/1.42 Montserrat,sans-serif;
    letter-spacing:-.01em;
    color:rgba(220,227,236,.68);
    opacity:var(--flow-card-tags);
    transform:translate3d(0,calc((1 - var(--flow-card-tags))*7px),0);
    will-change:opacity,transform;
  }

  .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:stretch;
    grid-auto-rows:minmax(34px,1fr);
    gap:7px 8px;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:34px;
    padding:7px 8px;
    border-radius:12px;
    font:650 clamp(6.3px,1.68vw,8.5px)/1.16 Montserrat,sans-serif;
  }

  .d3app-flow-card__formula{
    min-height:24px;
    padding-top:9px;
  }

  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    gap:6px 7px;
    grid-auto-rows:minmax(31px,1fr);
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:31px;
    padding:6px 7px;
    font-size:7.4px;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__modules-intro{
    font-size:8px;
  }

  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body{
    gap:7px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route{
    min-height:56px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon{
    width:31px;
    height:31px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon svg{
    width:15px;
    height:15px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route b{
    font-size:5.5px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics > span{
    min-height:34px;
    padding:4px 6px;
    gap:4px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics .d3app-flow-icon{
    width:15px;
    height:15px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics b{
    font-size:5.4px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__modules-intro{
    padding-top:6px;
    font-size:6.7px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    gap:4px 5px;
    grid-auto-rows:minmax(25px,1fr);
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:25px;
    padding:4px 5px;
    font-size:5.8px;
    border-radius:9px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__formula{
    min-height:18px;
    padding-top:5px;
    font-size:5.8px;
  }

  @media (min-width:768px){
    .d3app-flow-card{
      height:calc(var(--d3app-vh) - 28px);
    }
    .d3app-flow-card__body{
      top:60px;
      height:max(0px,calc(var(--flow-card-surface-h) - 60px));
      padding:15px 18px 16px;
      gap:12px;
    }
    .d3app-flow-card__statement{
      font-size:25px;
    }
    .d3app-flow-card__route{
      min-height:76px;
    }
    .d3app-flow-card__route::before{
      top:23px;
    }
    .d3app-flow-card__route .d3app-flow-icon{
      width:48px;
      height:48px;
    }
    .d3app-flow-card__route .d3app-flow-icon svg{
      width:22px;
      height:22px;
    }
    .d3app-flow-card__route b{
      font-size:9px;
    }
    .d3app-flow-card__metrics > span{
      min-height:52px;
      grid-template-columns:24px minmax(0,1fr);
      gap:8px;
      padding:8px 10px;
      border-radius:14px;
    }
    .d3app-flow-card__metrics .d3app-flow-icon{
      width:21px;
      height:21px;
    }
    .d3app-flow-card__metrics b{
      font-size:8.8px;
    }
    .d3app-flow-card__modules-intro{
      font-size:9.4px;
      padding-top:10px;
    }
    .d3app-flow-card__body .d3app-flow-card__tags{
      gap:8px 10px;
      grid-auto-rows:minmax(42px,1fr);
    }
    .d3app-flow-card__body .d3app-flow-card__tags span{
      min-height:42px;
      padding:8px 10px;
      border-radius:14px;
      font-size:9.6px;
    }
    .d3app-flow-card__formula{
      min-height:28px;
      font-size:8.8px;
    }
  }

  @media (max-width:374px), (max-height:680px){
    .d3app-flow-card__body{
      top:46px;
      height:max(0px,calc(var(--flow-card-surface-h) - 46px));
      padding:7px 9px 8px;
      gap:6px;
    }
    .d3app-flow-card__statement{
      font-size:12px;
      line-height:1.1;
      padding-bottom:2px;
    }
    .d3app-flow-card__route{
      min-height:50px;
    }
    .d3app-flow-card__route::before{
      top:14px;
    }
    .d3app-flow-card__route .d3app-flow-icon{
      width:29px;
      height:29px;
    }
    .d3app-flow-card__route .d3app-flow-icon svg{
      width:14px;
      height:14px;
    }
    .d3app-flow-card__route b{
      font-size:5.2px;
    }
    .d3app-flow-card__metrics{
      gap:4px;
    }
    .d3app-flow-card__metrics > span{
      min-height:30px;
      grid-template-columns:16px minmax(0,1fr);
      gap:3px;
      padding:4px 5px;
      border-radius:8px;
    }
    .d3app-flow-card__metrics .d3app-flow-icon{
      width:14px;
      height:14px;
    }
    .d3app-flow-card__metrics b{
      font-size:4.9px;
    }
    .d3app-flow-card__modules-intro{
      padding-top:5px;
      font-size:6.4px;
    }
    .d3app-flow-card__body .d3app-flow-card__tags{
      gap:4px 5px;
      grid-auto-rows:minmax(24px,1fr);
    }
    .d3app-flow-card__body .d3app-flow-card__tags span{
      min-height:24px;
      padding:4px 5px;
      border-radius:8px;
      font-size:5.1px;
    }
    .d3app-flow-card__formula{
      min-height:16px;
      padding-top:4px;
      font-size:5.2px;
    }
  }
}

/* =========================================================
   4.18.12 — FLOW unified mobile UI contract
   Same geometry/typography for NKO, B2B, B2C and B2G.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card,
  .d3app-flow-card--nko,
  .d3app-flow-card--b2b,
  .d3app-flow-card--b2c,
  .d3app-flow-card--b2g{
    --flow-ui-head:56px;
    --flow-ui-gap:9px;
    --flow-ui-chip-h:42px;
    --flow-ui-chip-fs:clamp(8.8px,2.45vw,10.4px);
    --flow-ui-intro-fs:clamp(9px,2.35vw,10.8px);
  }

  .d3app-flow-card::before{
    background:linear-gradient(180deg,rgba(10,13,19,.975),rgba(7,10,15,.975));
  }

  .d3app-flow-card__head{
    height:var(--flow-ui-head)!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    gap:10px!important;
    padding:0 14px!important;
  }
  .d3app-flow-card__head img{width:36px!important;height:36px!important}
  .d3app-flow-card__head strong{font-size:13.5px!important;line-height:1!important}
  .d3app-flow-card__head small{font-size:8px!important;line-height:1.2!important}

  .d3app-flow-card__body{
    top:var(--flow-ui-head)!important;
    height:max(0px,calc(var(--flow-card-surface-h) - var(--flow-ui-head)))!important;
    padding:11px 14px 13px!important;
    grid-template-rows:auto 74px 48px auto minmax(0,1fr) 24px!important;
    gap:var(--flow-ui-gap)!important;
  }

  .d3app-flow-card__statement{
    max-width:100%!important;
    min-height:42px;
    margin:0!important;
    padding:0 0 4px!important;
    font:720 clamp(16.5px,4.75vw,23px)/1.1 Montserrat,sans-serif!important;
    letter-spacing:-.032em!important;
  }

  /* One route language for all directions. */
  .d3app-flow-card__route{
    min-height:74px!important;
    height:74px!important;
    margin:0!important;
    padding-top:2px!important;
  }
  .d3app-flow-card__route::before{
    top:21px!important;
    left:9.3%!important;
    right:9.3%!important;
    height:1.5px!important;
    background:linear-gradient(90deg,
      color-mix(in srgb,var(--flow-color) 10%,transparent),
      color-mix(in srgb,var(--flow-color) 80%,transparent) 9%,
      color-mix(in srgb,var(--flow-color) 80%,transparent) 91%,
      color-mix(in srgb,var(--flow-color) 10%,transparent))!important;
  }
  .d3app-flow-card__route span{
    gap:7px!important;
  }
  .d3app-flow-card__route span:not(:last-child)::after{
    content:"";
    position:absolute;
    top:19px;
    right:-3px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--flow-color);
    border:2px solid #080b10;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--flow-color) 34%,transparent),0 0 8px color-mix(in srgb,var(--flow-color) 34%,transparent);
  }
  .d3app-flow-card__route .d3app-flow-icon{
    width:43px!important;
    height:43px!important;
    border-width:1.25px!important;
    background:#080b10!important;
  }
  .d3app-flow-card__route .d3app-flow-icon svg{
    width:19px!important;
    height:19px!important;
  }
  .d3app-flow-card__route b{
    font:680 clamp(6.8px,1.88vw,8.8px)/1.1 Montserrat,sans-serif!important;
    color:rgba(242,245,249,.9)!important;
  }

  /* Three key context cards: same geometry everywhere. */
  .d3app-flow-card__metrics{
    height:48px!important;
    gap:7px!important;
  }
  .d3app-flow-card__metrics > span{
    min-height:48px!important;
    height:48px!important;
    grid-template-columns:21px minmax(0,1fr)!important;
    gap:6px!important;
    padding:6px 8px!important;
    border-radius:12px!important;
    border-color:color-mix(in srgb,var(--flow-color) 42%,rgba(255,255,255,.06))!important;
    background:rgba(255,255,255,.025)!important;
  }
  .d3app-flow-card__metrics .d3app-flow-icon{
    width:18px!important;
    height:18px!important;
  }
  .d3app-flow-card__metrics b{
    font:680 clamp(6.4px,1.72vw,8.4px)/1.12 Montserrat,sans-serif!important;
    color:rgba(242,245,249,.9)!important;
  }
  .d3app-flow-card__metrics em{display:none!important}

  .d3app-flow-card__modules-intro{
    min-height:44px;
    margin:0!important;
    padding:9px 0 0!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    font:600 var(--flow-ui-intro-fs)/1.42 Montserrat,sans-serif!important;
    letter-spacing:-.012em!important;
    color:rgba(231,236,243,.79)!important;
  }

  /* Same tile component for every direction. Number of tiles may differ,
     but height, typography, radius and border treatment never do. */
  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:var(--flow-ui-chip-h)!important;
    align-content:space-evenly!important;
    gap:7px 8px!important;
    overflow:hidden!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:var(--flow-ui-chip-h)!important;
    height:var(--flow-ui-chip-h)!important;
    padding:6px 8px!important;
    border-radius:12px!important;
    border:1px solid color-mix(in srgb,var(--flow-color) 38%,rgba(255,255,255,.06))!important;
    background:rgba(255,255,255,.025)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
    font:660 var(--flow-ui-chip-fs)/1.18 Montserrat,sans-serif!important;
    color:rgba(241,244,248,.91)!important;
  }

  .d3app-flow-card__formula{
    min-height:24px!important;
    height:24px!important;
    padding-top:8px!important;
    font:580 7.4px/1 Montserrat,sans-serif!important;
    color:rgba(230,235,242,.7)!important;
  }

  /* The density mode is global per viewport, never per product. */
  .d3app-flow-card[data-density="dense"]{
    --flow-ui-gap:7px;
    --flow-ui-chip-h:36px;
    --flow-ui-chip-fs:7.9px;
    --flow-ui-intro-fs:8.2px;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body{
    grid-template-rows:auto 64px 42px auto minmax(0,1fr) 20px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__statement{font-size:14px!important;min-height:36px}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route{height:64px!important;min-height:64px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route::before{top:18px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route span:not(:last-child)::after{top:16px}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route .d3app-flow-icon{width:37px!important;height:37px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route .d3app-flow-icon svg{width:17px!important;height:17px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route b{font-size:6px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics{height:42px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics > span{height:42px!important;min-height:42px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__modules-intro{min-height:38px;padding-top:7px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__formula{height:20px!important;min-height:20px!important;padding-top:5px!important;font-size:6.4px!important}

  .d3app-flow-card[data-density="x-dense"]{
    --flow-ui-gap:5px;
    --flow-ui-chip-h:31px;
    --flow-ui-chip-fs:6.6px;
    --flow-ui-intro-fs:7px;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body{
    grid-template-rows:auto 54px 36px auto minmax(0,1fr) 17px!important;
  }
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__statement{font-size:12px!important;min-height:31px}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route{height:54px!important;min-height:54px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route::before{top:15px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route span:not(:last-child)::after{top:13px;width:5px;height:5px}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon{width:31px!important;height:31px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon svg{width:14px!important;height:14px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route b{font-size:5.1px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics{height:36px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics > span{height:36px!important;min-height:36px!important;padding:4px 5px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics b{font-size:5.2px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__modules-intro{min-height:34px;padding-top:5px!important}
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__formula{height:17px!important;min-height:17px!important;padding-top:4px!important;font-size:5.2px!important}

  @media (min-width:768px){
    .d3app-flow-card,
    .d3app-flow-card--nko,
    .d3app-flow-card--b2b,
    .d3app-flow-card--b2c,
    .d3app-flow-card--b2g{
      --flow-ui-head:62px;
      --flow-ui-gap:12px;
      --flow-ui-chip-h:48px;
      --flow-ui-chip-fs:10px;
      --flow-ui-intro-fs:10.5px;
    }
    .d3app-flow-card__head{grid-template-columns:42px minmax(0,1fr)!important;padding:0 18px!important}
    .d3app-flow-card__head img{width:40px!important;height:40px!important}
    .d3app-flow-card__head strong{font-size:15px!important}.d3app-flow-card__head small{font-size:9px!important}
    .d3app-flow-card__body{padding:14px 18px 16px!important;grid-template-rows:auto 86px 56px auto minmax(0,1fr) 28px!important}
    .d3app-flow-card__statement{font-size:25px!important;min-height:52px}
    .d3app-flow-card__route{height:86px!important;min-height:86px!important}.d3app-flow-card__route::before{top:25px!important}
    .d3app-flow-card__route span:not(:last-child)::after{top:23px;right:-4px;width:7px;height:7px}
    .d3app-flow-card__route .d3app-flow-icon{width:51px!important;height:51px!important}.d3app-flow-card__route .d3app-flow-icon svg{width:23px!important;height:23px!important}.d3app-flow-card__route b{font-size:9.5px!important}
    .d3app-flow-card__metrics{height:56px!important;gap:10px!important}.d3app-flow-card__metrics > span{height:56px!important;min-height:56px!important;padding:8px 10px!important;border-radius:14px!important}.d3app-flow-card__metrics b{font-size:9px!important}
    .d3app-flow-card__modules-intro{min-height:50px;padding-top:10px!important}
    .d3app-flow-card__body .d3app-flow-card__tags span{border-radius:14px!important;padding:8px 10px!important}
    .d3app-flow-card__formula{height:28px!important;min-height:28px!important;font-size:8.8px!important}
  }
}

/* =========================================================
   4.18.13 — FLOW fit + B2G no-dim fix
   One compact contract for NKO/B2B/B2C/B2G on the same viewport.
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card,
  .d3app-flow-card--nko,
  .d3app-flow-card--b2b,
  .d3app-flow-card--b2c,
  .d3app-flow-card--b2g{
    --flow-ui-head:50px;
    --flow-ui-gap:6px;
    --flow-ui-chip-h:34px;
    --flow-ui-chip-fs:clamp(7.2px,2.02vw,8.8px);
    --flow-ui-intro-fs:clamp(7.6px,2.08vw,9.2px);
  }

  .d3app-flow-card__head{
    height:var(--flow-ui-head)!important;
    grid-template-columns:33px minmax(0,1fr)!important;
    gap:9px!important;
    padding:0 12px!important;
  }
  .d3app-flow-card__head img{width:31px!important;height:31px!important}
  .d3app-flow-card__head strong{font-size:12px!important}
  .d3app-flow-card__head small{font-size:7.2px!important}

  .d3app-flow-card__body{
    top:var(--flow-ui-head)!important;
    height:max(0px,calc(var(--flow-card-surface-h) - var(--flow-ui-head)))!important;
    padding:8px 12px 10px!important;
    grid-template-rows:auto 60px 42px auto minmax(0,1fr) 20px!important;
    gap:var(--flow-ui-gap)!important;
  }

  .d3app-flow-card__statement{
    min-height:0!important;
    padding:0 0 2px!important;
    font:720 clamp(14px,4.05vw,19px)/1.08 Montserrat,sans-serif!important;
  }

  .d3app-flow-card__route{
    height:60px!important;
    min-height:60px!important;
    padding-top:1px!important;
  }
  .d3app-flow-card__route::before{
    top:17px!important;
  }
  .d3app-flow-card__route span{gap:5px!important}
  .d3app-flow-card__route span:not(:last-child)::after{
    top:15px!important;
    right:-2px!important;
    width:5px!important;
    height:5px!important;
    border-width:1.5px!important;
  }
  .d3app-flow-card__route .d3app-flow-icon{
    width:35px!important;
    height:35px!important;
  }
  .d3app-flow-card__route .d3app-flow-icon svg{
    width:16px!important;
    height:16px!important;
  }
  .d3app-flow-card__route b{
    font:670 clamp(5.7px,1.58vw,7.2px)/1.08 Montserrat,sans-serif!important;
  }

  .d3app-flow-card__metrics{
    height:42px!important;
    gap:6px!important;
  }
  .d3app-flow-card__metrics > span{
    height:42px!important;
    min-height:42px!important;
    grid-template-columns:18px minmax(0,1fr)!important;
    gap:5px!important;
    padding:5px 7px!important;
    border-radius:11px!important;
  }
  .d3app-flow-card__metrics .d3app-flow-icon{
    width:16px!important;
    height:16px!important;
  }
  .d3app-flow-card__metrics b{
    font:670 clamp(5.6px,1.52vw,7.1px)/1.08 Montserrat,sans-serif!important;
  }

  .d3app-flow-card__modules-intro{
    min-height:0!important;
    padding:7px 0 0!important;
    font:600 var(--flow-ui-intro-fs)/1.34 Montserrat,sans-serif!important;
  }

  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:var(--flow-ui-chip-h)!important;
    gap:5px 7px!important;
    align-content:space-evenly!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:var(--flow-ui-chip-h)!important;
    height:var(--flow-ui-chip-h)!important;
    padding:5px 7px!important;
    border-radius:11px!important;
    font:660 var(--flow-ui-chip-fs)/1.12 Montserrat,sans-serif!important;
  }

  .d3app-flow-card__formula{
    height:20px!important;
    min-height:20px!important;
    padding-top:6px!important;
    font-size:6.4px!important;
  }

  /* Compact stack headers must free room for the active card. */
  .d3app-flow-card[style*="--flow-card-surface-h"] .d3app-flow-card__head{
    transform-origin:left center!important;
  }

  /* Final FLOW screen must never be covered by the outro dark veil. */
  .d3app-presenter__outro::before{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  /* Density stays identical across all four products on one viewport. */
  .d3app-flow-card[data-density="dense"],
  .d3app-flow-card[data-density="x-dense"]{
    --flow-ui-head:46px;
    --flow-ui-gap:5px;
    --flow-ui-chip-h:30px;
    --flow-ui-chip-fs:6.4px;
    --flow-ui-intro-fs:6.8px;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body{
    grid-template-rows:auto 52px 36px auto minmax(0,1fr) 17px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__statement,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__statement{font-size:11.5px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route{height:52px!important;min-height:52px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route::before,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route::before{top:14px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route span:not(:last-child)::after,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route span:not(:last-child)::after{top:12px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route .d3app-flow-icon,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon{width:29px!important;height:29px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route .d3app-flow-icon svg,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route .d3app-flow-icon svg{width:13px!important;height:13px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__route b,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__route b{font-size:4.9px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics{height:36px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics > span,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics > span{height:36px!important;min-height:36px!important;padding:4px 5px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics b,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics b{font-size:5px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__modules-intro,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__modules-intro{padding-top:5px!important}
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__formula,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__formula{height:17px!important;min-height:17px!important;padding-top:4px!important;font-size:5.2px!important}

  @media (min-width:768px){
    .d3app-flow-card,
    .d3app-flow-card--nko,
    .d3app-flow-card--b2b,
    .d3app-flow-card--b2c,
    .d3app-flow-card--b2g{
      --flow-ui-head:56px;
      --flow-ui-gap:8px;
      --flow-ui-chip-h:40px;
      --flow-ui-chip-fs:8.8px;
      --flow-ui-intro-fs:9.4px;
    }
    .d3app-flow-card__head{grid-template-columns:38px minmax(0,1fr)!important;padding:0 16px!important}
    .d3app-flow-card__head img{width:36px!important;height:36px!important}
    .d3app-flow-card__head strong{font-size:13.5px!important}.d3app-flow-card__head small{font-size:8px!important}
    .d3app-flow-card__body{padding:11px 16px 13px!important;grid-template-rows:auto 70px 48px auto minmax(0,1fr) 23px!important}
    .d3app-flow-card__statement{font-size:20px!important}
    .d3app-flow-card__route{height:70px!important;min-height:70px!important}.d3app-flow-card__route::before{top:20px!important}
    .d3app-flow-card__route span:not(:last-child)::after{top:18px!important;width:6px!important;height:6px!important}
    .d3app-flow-card__route .d3app-flow-icon{width:41px!important;height:41px!important}.d3app-flow-card__route .d3app-flow-icon svg{width:18px!important;height:18px!important}.d3app-flow-card__route b{font-size:7.7px!important}
    .d3app-flow-card__metrics{height:48px!important;gap:8px!important}.d3app-flow-card__metrics > span{height:48px!important;min-height:48px!important;padding:6px 8px!important}.d3app-flow-card__metrics b{font-size:7.8px!important}
    .d3app-flow-card__modules-intro{padding-top:8px!important}
    .d3app-flow-card__formula{height:23px!important;min-height:23px!important;font-size:7.2px!important}
  }
}

/* =========================================================
   4.18.14 — safe FLOW hero + collapse polish
   Based on stable 4.18.13. No global scroll/touch lock.
   ========================================================= */
@media (max-width:1024px){
  /* Larger first FLOW brand state. The existing JS lift still scales this
     same block down to the compact header size while scrolling. */
  .d3app-flow-scene__brand{
    top:50%;
    width:min(92%,680px);
  }
  .d3app-flow-scene__brand img{
    width:74px;
  }
  .d3app-flow-scene__brand h2{
    margin-top:10px;
    font-size:clamp(44px,12.4vw,56px);
    line-height:.88;
  }
  .d3app-flow-scene__brand p{
    margin-top:8px;
    font-size:8.4px;
    line-height:1.25;
    letter-spacing:.16em;
    color:rgba(218,225,234,.56);
  }

  /* When a card starts folding, content is clipped inside the shrinking
     surface. JS hides the route before the statement so icons never cross it. */
  .d3app-flow-card,
  .d3app-flow-card::before,
  .d3app-flow-card__body{
    overflow:hidden;
  }

  @media (min-width:768px){
    .d3app-flow-scene__brand img{width:96px}
    .d3app-flow-scene__brand h2{font-size:72px}
    .d3app-flow-scene__brand p{font-size:10.5px}
  }

  @media (max-width:374px), (max-height:680px){
    .d3app-flow-scene__brand img{width:60px}
    .d3app-flow-scene__brand h2{font-size:40px}
    .d3app-flow-scene__brand p{font-size:7px}
  }
}

/* =========================================================
   4.18.15 — FLOW intro parity + safe gesture capture
   ========================================================= */
@media (max-width:1024px){
  /* Initial FLOW lockup uses the same visual scale as the opening SOULULAB
     splash. JS scales this exact block down when the first ecosystem opens. */
  .d3app-flow-scene__brand{
    top:50%;
    width:min(92%,760px);
  }
  .d3app-flow-scene__brand img{
    width:clamp(78px,22vw,132px)!important;
    height:auto;
  }
  .d3app-flow-scene__brand h2{
    margin:30px 0 0!important;
    font:900 clamp(45px,13.5vw,92px)/.88 Montserrat,sans-serif!important;
    letter-spacing:-.065em!important;
    white-space:nowrap;
  }
  .d3app-flow-scene__brand p{
    margin:20px 0 0!important;
    max-width:700px;
    font:700 clamp(18px,4.8vw,32px)/1.08 Montserrat,sans-serif!important;
    letter-spacing:-.035em!important;
    text-transform:none!important;
    color:rgba(246,248,251,.93)!important;
  }

  /* The compact card stack always starts below the shrunken FLOW brand.
     The JS stack position supplies the main gap; this prevents accidental
     optical collision while the transform is settling. */
  .d3app-flow-deck{
    padding-top:0;
  }

  @media (max-width:374px), (max-height:680px){
    .d3app-flow-scene__brand img{
      width:70px!important;
    }
    .d3app-flow-scene__brand h2{
      margin-top:22px!important;
      font-size:42px!important;
    }
    .d3app-flow-scene__brand p{
      margin-top:15px!important;
      font-size:17px!important;
    }
  }
}

/* =========================================================
   4.18.17 — B2G fit / tighter module tiles / full collapse
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card--b2g .d3app-flow-card__statement{
    padding-bottom:6px!important;
  }

  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    gap:4px 6px!important;
    grid-auto-rows:minmax(30px,auto)!important;
    align-content:start!important;
  }

  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:30px!important;
    height:30px!important;
    padding:4px 7px!important;
  }

  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    gap:3px 5px!important;
    grid-auto-rows:minmax(28px,auto)!important;
    align-content:start!important;
  }

  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:28px!important;
    height:28px!important;
    padding:4px 6px!important;
  }
}

/* =========================================================
   4.18.18 — B2C/B2G lower compact modules + complete B2G fold
   ========================================================= */
@media (max-width:1024px){
  /* B2C and B2G keep the same tile visual language, but their shorter module
     sets are packed at the bottom of the available module area. This creates
     breathing room after the explanatory copy and keeps every row on-screen. */
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:end!important;
    grid-auto-rows:31px!important;
    gap:5px 6px!important;
    padding-top:10px!important;
  }

  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:31px!important;
    height:31px!important;
    padding:4px 7px!important;
  }

  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:end!important;
    grid-auto-rows:27px!important;
    gap:4px 5px!important;
    padding-top:7px!important;
  }

  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:27px!important;
    height:27px!important;
    padding:3px 6px!important;
  }
}

/* =========================================================
   4.18.19 — B2C/B2G module tiles raised for Safari bottom chrome
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    align-content:end!important;
    padding-top:0!important;
    padding-bottom:clamp(54px,7vh,72px)!important;
  }

  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    padding-top:0!important;
    padding-bottom:clamp(46px,6vh,62px)!important;
  }
}

/* =========================================================
   4.18.21 — FLOW primary metric tiles: centered + tinted
   ========================================================= */
@media (max-width:1024px){
  .d3app-flow-card__metrics > span{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    text-align:center!important;
    padding:5px 8px!important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb,var(--flow-color) 8%,rgba(17,21,29,.96)),
        color-mix(in srgb,var(--flow-color) 4%,rgba(10,13,19,.98)))!important;
    border-color:color-mix(in srgb,var(--flow-color) 42%,rgba(255,255,255,.05))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
  }

  .d3app-flow-card__metrics .d3app-flow-icon{
    flex:0 0 auto!important;
    margin:0!important;
  }

  .d3app-flow-card__metrics b{
    flex:0 1 auto!important;
    min-width:0!important;
    margin:0!important;
    text-align:center!important;
    font:700 clamp(6.4px,1.72vw,8px)/1.12 Montserrat,sans-serif!important;
    white-space:normal!important;
  }

  .d3app-flow-card[data-density="dense"] .d3app-flow-card__metrics b{
    font-size:6.2px!important;
  }

  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__metrics b{
    font-size:5.5px!important;
  }

  @media (min-width:768px){
    .d3app-flow-card__metrics > span{gap:9px!important}
    .d3app-flow-card__metrics b{font-size:9.4px!important}
  }
}

/* =========================================================
   4.18.22 — persistent product-matrix progress rail
   Only the thin bottom loading/progress line is changed.
   ========================================================= */
@media (max-width:1024px){
  .d3app-presenter__footer{
    left:var(--d3app-side)!important;
    right:var(--d3app-side)!important;
    bottom:calc(var(--d3app-safe-bottom) + 12px)!important;
    display:block!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:none!important;
  }

  .d3app-presenter__footer > span,
  .d3app-presenter__footer > small{
    display:none!important;
  }

  .d3app-presenter__progress{
    --d3app-line-progress:0;
    --d3app-flow-line-mix:0;
    position:relative!important;
    width:100%!important;
    height:1.5px!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.09)!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.012)!important;
  }

  .d3app-presenter__progress i{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    border-radius:inherit!important;
    background:none!important;
    transform-origin:left center!important;
    will-change:transform!important;
  }

  .d3app-presenter__progress i::before,
  .d3app-presenter__progress i::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
  }

  /* WEB / AI / STUDIO / CLUB — AI/logo spectrum. */
  .d3app-presenter__progress i::before{
    background:linear-gradient(90deg,
      #7B53FF 0%,
      #F046C6 34%,
      #F09548 68%,
      #2FC5FF 100%);
    opacity:calc(1 - var(--d3app-flow-line-mix));
  }

  /* SOULU FLOW — direction palette. */
  .d3app-presenter__progress i::after{
    background:linear-gradient(90deg,
      #F046C6 0%,
      #F09548 34%,
      #78DA65 67%,
      #2FC5FF 100%);
    opacity:var(--d3app-flow-line-mix);
  }
}

/* =========================================================
   4.18.23 — product progress fixed to the visible viewport edge
   ========================================================= */
@media (max-width:1024px){
  /* The old footer rail is retired; it moved with the sticky/footer geometry. */
  .d3app-presenter__footer{
    display:none!important;
  }

  .d3app-matrix-progress{
    --d3app-line-progress:0;
    --d3app-line-visible:0;
    --d3app-line-fill:linear-gradient(90deg,#7B53FF 0%,#7B53FF 20%,#F046C6 30%,#F046C6 45%,#F09548 55%,#F09548 70%,#2FC5FF 80%,#2FC5FF 100%);
    position:fixed!important;
    z-index:120!important;
    left:0!important;
    right:0!important;
    top:calc(var(--d3app-progress-bottom-y, 100dvh) - 1px)!important;
    bottom:auto!important;
    width:100vw!important;
    height:1px!important;
    overflow:hidden!important;
    pointer-events:none!important;
    opacity:var(--d3app-line-visible)!important;
    background:rgba(255,255,255,.10)!important;
    box-shadow:none!important;
    border:0!important;
    border-radius:0!important;
    transition:opacity .12s linear!important;
  }

  .d3app-matrix-progress > i{
    position:absolute!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    width:calc(var(--d3app-line-progress) * 100%)!important;
    height:1px!important;
    overflow:hidden!important;
    background:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    will-change:width!important;
    transition:width .08s linear!important;
  }

  .d3app-matrix-progress > i::before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:0!important;
    width:100vw!important;
    height:1px!important;
    background:var(--d3app-line-fill)!important;
    border-radius:0!important;
    pointer-events:none!important;
  }

  .d3app-matrix-progress > i::after{
    content:none!important;
  }
}

/* 4.18.30 - static product logos only; no decorative backgrounds or logo breathing */
.d3app-slide--web .d3app-slide__visual,
.d3app-slide--ai .d3app-slide__visual,
.d3app-slide--studio .d3app-slide__visual,
.d3app-slide--club .d3app-slide__visual{
  overflow:hidden;
}
.d3app-static-logo{
  position:relative;
  z-index:5;
  width:clamp(96px,28vw,170px);
  height:auto;
  object-fit:contain;
  filter:none!important;
  animation:none!important;
  transform:none!important;
  transition:none!important;
}
.d3app-static-logo--web{width:clamp(100px,30vw,176px)}
@media (max-width:374px), (max-height:680px){
  .d3app-static-logo{width:86px}
  .d3app-static-logo--web{width:90px}
}


/* 4.18.33 - WEB background image, smartphones only. Tablet/desktop untouched. */
@media (max-width: 767px) {
  .d3app-slide--web {
    background-color:#05070b;
    background-image:url('/site-home/assets/img/site-home/soulu-web-mobile-bg-4.18.33.webp');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
  }

  /* Preserve legibility of the existing copy without changing its layout. */
  .d3app-slide--web .d3app-slide__copy {
    z-index:4;
  }
  .d3app-slide--web .d3app-slide__visual {
    z-index:3;
  }
}

/* 4.18.34 - AI / STUDIO / CLUB background images, smartphones only. Tablet/desktop untouched. */
@media (max-width: 767px) {
  .d3app-slide--ai,
  .d3app-slide--studio,
  .d3app-slide--club {
    background-color:#05070b;
    background-repeat:no-repeat;
    background-size:cover;
  }

  .d3app-slide--ai {
    background-image:url('/site-home/assets/img/site-home/soulu-ai-mobile-bg-4.18.34.webp');
    background-position:center center;
  }

  .d3app-slide--studio {
    background-image:url('/site-home/assets/img/site-home/soulu-studio-mobile-bg-4.18.34.webp');
    background-position:center center;
  }

  .d3app-slide--club {
    background-image:url('/site-home/assets/img/site-home/soulu-club-mobile-bg-4.18.34.webp');
    background-position:center center;
  }

  .d3app-slide--ai .d3app-slide__copy,
  .d3app-slide--studio .d3app-slide__copy,
  .d3app-slide--club .d3app-slide__copy {
    z-index:4;
  }

  .d3app-slide--ai .d3app-slide__visual,
  .d3app-slide--studio .d3app-slide__visual,
  .d3app-slide--club .d3app-slide__visual {
    z-index:3;
  }
}

/* =========================================================
   4.18.35 — dimmed optimized mobile product backgrounds
   + compositor-friendly product swipe
   Smartphones only. Tablet / desktop untouched.
   ========================================================= */
@media (max-width: 767px) {
  .d3app-slide--web,
  .d3app-slide--ai,
  .d3app-slide--studio,
  .d3app-slide--club {
    background-color:#05070b;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    contain:paint;
  }

  .d3app-slide--web {
    background-image:url('/site-home/assets/img/site-home/soulu-web-mobile-bg-4.18.35.webp');
  }
  .d3app-slide--ai {
    background-image:url('/site-home/assets/img/site-home/soulu-ai-mobile-bg-4.18.35.webp');
  }
  .d3app-slide--studio {
    background-image:url('/site-home/assets/img/site-home/soulu-studio-mobile-bg-4.18.35.webp');
  }
  .d3app-slide--club {
    background-image:url('/site-home/assets/img/site-home/soulu-club-mobile-bg-4.18.35.webp');
  }

  /* Let the track perform the swipe. Avoid separate per-slide scale/parallax
     layers over full-screen bitmaps — this noticeably reduces Safari compositing work. */
  .d3app-slide--web .d3app-slide__visual,
  .d3app-slide--ai .d3app-slide__visual,
  .d3app-slide--studio .d3app-slide__visual,
  .d3app-slide--club .d3app-slide__visual,
  .d3app-slide--web .d3app-slide__copy,
  .d3app-slide--ai .d3app-slide__copy,
  .d3app-slide--studio .d3app-slide__copy,
  .d3app-slide--club .d3app-slide__copy {
    transform:none!important;
    will-change:auto!important;
  }

  /* Keep the existing soft opacity interpolation, but without runtime blur/filter. */
  .d3app-slide--web .d3app-slide__visual,
  .d3app-slide--ai .d3app-slide__visual,
  .d3app-slide--studio .d3app-slide__visual,
  .d3app-slide--club .d3app-slide__visual,
  .d3app-slide--web .d3app-slide__copy,
  .d3app-slide--ai .d3app-slide__copy,
  .d3app-slide--studio .d3app-slide__copy,
  .d3app-slide--club .d3app-slide__copy {
    filter:none!important;
    -webkit-filter:none!important;
  }
}

/* =========================================================
   4.18.36 — unified larger product logos + graphite titanium chips
   Smartphones only. Tablet / desktop untouched.
   ========================================================= */
@media (max-width: 767px) {
  /* WEB / AI / STUDIO / CLUB: one visual size contract, ~50% larger than 4.18.35. */
  .d3app-slide--web .d3app-static-logo,
  .d3app-slide--ai .d3app-static-logo,
  .d3app-slide--studio .d3app-static-logo,
  .d3app-slide--club .d3app-static-logo,
  .d3app-slide--web .d3app-static-logo--web {
    width:clamp(144px,42vw,255px)!important;
    height:auto!important;
    max-width:68vw!important;
    object-fit:contain!important;
    filter:none!important;
    animation:none!important;
    transform:none!important;
    transition:none!important;
  }

  /* One neutral Titanium border for all product hashtags/chips.
     The metallic variation is baked into the static gradient: no animated shimmer/GPU load. */
  .d3app-slide--web,
  .d3app-slide--ai,
  .d3app-slide--studio,
  .d3app-slide--club {
    --chip-accent:linear-gradient(112deg,
      rgba(66,72,82,.86) 0%,
      rgba(146,154,166,.72) 18%,
      rgba(54,59,68,.88) 38%,
      rgba(190,197,207,.58) 52%,
      rgba(62,68,77,.90) 68%,
      rgba(126,134,146,.68) 84%,
      rgba(48,53,61,.90) 100%);
  }

  .d3app-slide--web .d3app-slide__features li,
  .d3app-slide--ai .d3app-slide__features li,
  .d3app-slide--studio .d3app-slide__features li,
  .d3app-slide--club .d3app-slide__features li {
    background:
      linear-gradient(rgba(10,13,19,.94),rgba(10,13,19,.94)) padding-box,
      var(--chip-accent) border-box!important;
    border-color:transparent!important;
    box-shadow:
      inset 0 1px rgba(255,255,255,.035),
      inset 0 -1px rgba(0,0,0,.18)!important;
  }
}

@media (max-width:374px), (max-height:680px) {
  .d3app-slide--web .d3app-static-logo,
  .d3app-slide--ai .d3app-static-logo,
  .d3app-slide--studio .d3app-static-logo,
  .d3app-slide--club .d3app-static-logo,
  .d3app-slide--web .d3app-static-logo--web {
    width:129px!important;
    max-width:62vw!important;
  }
}

/* =========================================================
   4.18.37 — exact approved backgrounds, uniformly dimmed/blurred offline.
   Smartphone only; no runtime filter/blur.
   ========================================================= */
@media (max-width: 767px) {
  .d3app-slide--web {
    background-image:url('/site-home/assets/img/site-home/soulu-web-mobile-bg-4.18.37.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .d3app-slide--ai {
    background-image:url('/site-home/assets/img/site-home/soulu-ai-mobile-bg-4.18.37.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .d3app-slide--studio {
    background-image:url('/site-home/assets/img/site-home/soulu-studio-mobile-bg-4.18.37.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
  }
  .d3app-slide--club {
    background-image:url('/site-home/assets/img/site-home/soulu-club-mobile-bg-4.18.37.webp')!important;
    background-position:center center!important;
    background-size:cover!important;
  }

  /* B2G has only four module tiles and spare vertical room: move the lower module block down. */
  .d3app-flow-card--b2g .d3app-flow-card__modules-intro {
    margin-top:7px!important;
  }
}

/* =========================================================
   4.18.38 — FLOW route/metric tiles in graphite titanium.
   Smartphone only; keeps layout intact and unifies the surface treatment.
   ========================================================= */
@media (max-width: 767px) {
  .d3app-flow-card__route i{
    border:1px solid rgba(154,164,178,.32)!important;
    background:
      radial-gradient(circle at 28% 22%, rgba(255,255,255,.18), transparent 36%),
      radial-gradient(circle at 76% 12%, rgba(122,164,220,.08), transparent 34%),
      linear-gradient(145deg, rgba(53,60,73,.54) 0%, rgba(24,28,36,.78) 24%, rgba(9,12,18,.96) 68%, rgba(36,41,50,.82) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 10px 22px rgba(0,0,0,.16)!important;
    color:rgba(229,234,240,.90)!important;
    text-shadow:0 1px 0 rgba(0,0,0,.34),0 0 12px rgba(255,255,255,.04);
  }

  .d3app-flow-card__metrics > span{
    border:1px solid rgba(154,164,178,.28)!important;
    background:
      radial-gradient(circle at 20% 10%, rgba(255,255,255,.10), transparent 34%),
      radial-gradient(circle at 84% 0%, rgba(124,158,210,.08), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.014) 18%, rgba(11,14,20,.96) 100%),
      linear-gradient(135deg, rgba(63,70,84,.42) 0%, rgba(22,27,35,.84) 42%, rgba(7,10,15,.96) 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 10px 24px rgba(0,0,0,.14)!important;
  }

  .d3app-flow-card__metrics i,
  .d3app-flow-card__metrics em{
    color:rgba(229,234,240,.90)!important;
    text-shadow:0 1px 0 rgba(0,0,0,.34),0 0 12px rgba(255,255,255,.04);
  }

  .d3app-flow-card__metrics b{
    color:rgba(238,242,247,.86)!important;
  }
}

/* =========================================================
   4.18.39r1 — mobile white modules rebuilt from 4.18.38.
   Preserve original content/cards; only adapt layout + add stable module dock.
   ========================================================= */
.hd-mobile-module-nav,
.hd-flow-mobile-dashboard{display:none}

@media (max-width:767px){
  /* Prevent Safari/browser-chrome resize and lazy-content anchoring from shifting the white section. */
  body.home-demo-page .hd-story,
  body.home-demo-page .hd-stage,
  body.home-demo-page .hd-stage__layout,
  body.home-demo-page .hd-panels,
  body.home-demo-page .hd-panel,
  body.home-demo-page .hd-visual{
    scroll-snap-type:none!important;
    scroll-snap-align:none!important;
    scroll-snap-stop:normal!important;
    overflow-anchor:none!important;
  }
  body.home-demo-page .hd-story{padding-bottom:86px!important}
  body.home-demo-page .hd-panel{
    min-height:0!important;
    height:auto!important;
    padding-bottom:54px!important;
  }

  /* WEB: keep the original mobile carousel and dots exactly as designed. */
  body.home-demo-page #soulu-web .hd-web-mobile-strip{
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch;
  }

  /* FLOW: smartphone-only swipeable showcase with desktop / tablet / mobile mockups. */
  body.home-demo-page #soulu-flow .hd-flow-mobile-dashboard,
  body.home-demo-page #soulu-flow .hd-flow-showcase{display:none!important}
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(88vw,338px)!important;
    gap:12px!important;
    width:calc(100% + 12px)!important;
    margin-right:-12px!important;
    padding:2px 12px 8px 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups::-webkit-scrollbar{display:none}
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup{
    scroll-snap-align:start!important;
    display:flex!important;flex-direction:column!important;
    min-height:0!important;
    border-radius:22px!important;
    overflow:hidden!important;
    border:1px solid rgba(39,52,68,.10)!important;
    background:linear-gradient(160deg,#0f141d,#0a0f15 62%,#090d12)!important;
    box-shadow:0 16px 40px rgba(13,19,28,.18),inset 0 1px 0 rgba(255,255,255,.06)!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-devicebar{
    display:flex;align-items:center;gap:5px;min-height:28px;padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.03)
  }
  body.home-demo-page #soulu-flow .hd-flow-devicebar i{width:5px;height:5px;border-radius:50%;background:rgba(213,220,230,.34)}
  body.home-demo-page #soulu-flow .hd-flow-devicebar span{margin-left:5px;font:800 8px/1 Montserrat,sans-serif;color:#eff3f7;letter-spacing:.02em}
  body.home-demo-page #soulu-flow .hd-flow-devicebar em{margin-left:auto;font:700 6.9px/1 Montserrat,sans-serif;font-style:normal;color:rgba(222,228,236,.46);text-transform:uppercase;letter-spacing:.08em}
  body.home-demo-page #soulu-flow .hd-flow-workspace{min-width:0;padding:12px}
  body.home-demo-page #soulu-flow .hd-flow-workspace--desktop{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;min-height:324px}
  body.home-demo-page #soulu-flow .hd-flow-workspace__side{
    display:flex;flex-direction:column;gap:8px;padding:9px 8px;border-radius:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.06)
  }
  body.home-demo-page #soulu-flow .hd-flow-brand{display:flex;align-items:center;gap:7px}
  body.home-demo-page #soulu-flow .hd-flow-brand img{width:28px;height:28px;object-fit:contain}
  body.home-demo-page #soulu-flow .hd-flow-brand strong{display:block;font:800 7.5px/1.1 Montserrat,sans-serif;color:#f5f7fb}
  body.home-demo-page #soulu-flow .hd-flow-brand span{display:block;margin-top:2px;font:650 6.1px/1.15 Montserrat,sans-serif;color:rgba(221,228,236,.45)}
  body.home-demo-page #soulu-flow .hd-flow-side-nav{display:flex;flex-direction:column;gap:4px}
  body.home-demo-page #soulu-flow .hd-flow-side-nav span{display:flex;align-items:center;min-height:25px;padding:0 7px;border-radius:8px;font:700 6.8px/1 Montserrat,sans-serif;color:rgba(222,229,236,.54)}
  body.home-demo-page #soulu-flow .hd-flow-side-nav span.is-active{background:linear-gradient(135deg,rgba(240,70,198,.18),rgba(47,197,255,.13));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
  body.home-demo-page #soulu-flow .hd-flow-side-user{margin-top:auto;padding-top:7px;border-top:1px solid rgba(255,255,255,.06)}
  body.home-demo-page #soulu-flow .hd-flow-side-user b{display:block;font:760 6.9px/1.15 Montserrat,sans-serif;color:#f2f5f9}
  body.home-demo-page #soulu-flow .hd-flow-side-user span{display:block;margin-top:2px;font:650 5.9px/1.2 Montserrat,sans-serif;color:rgba(221,228,236,.44)}
  body.home-demo-page #soulu-flow .hd-flow-side-user__icons{display:flex;gap:5px;margin-top:8px}
  body.home-demo-page #soulu-flow .hd-flow-side-user__icons i{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:8px;background:rgba(255,255,255,.055);font-style:normal;color:#d9e1ea;font-size:11px}
  body.home-demo-page #soulu-flow .hd-flow-workspace__main{min-width:0}
  body.home-demo-page #soulu-flow .hd-flow-workspace__top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:9px}
  body.home-demo-page #soulu-flow .hd-flow-workspace__top b{display:block;font:800 12px/1.05 Montserrat,sans-serif;color:#f6f9fd}
  body.home-demo-page #soulu-flow .hd-flow-workspace__top small{display:block;margin-top:3px;font:650 6.3px/1.3 Montserrat,sans-serif;color:rgba(219,226,233,.42)}
  body.home-demo-page #soulu-flow .hd-flow-pillset{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px}
  body.home-demo-page #soulu-flow .hd-flow-pillset span{display:inline-flex;align-items:center;min-height:20px;padding:0 7px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font:760 5.8px/1 Montserrat,sans-serif;color:#dce3ec}
  body.home-demo-page #soulu-flow .hd-flow-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
  body.home-demo-page #soulu-flow .hd-flow-kpis article,
  body.home-demo-page #soulu-flow .hd-flow-panel{min-width:0;padding:9px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(150deg,rgba(255,255,255,.058),rgba(255,255,255,.018));box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
  body.home-demo-page #soulu-flow .hd-flow-kpis small{display:block;font:750 5.7px/1.05 Montserrat,sans-serif;color:#95d4ff;text-transform:uppercase;letter-spacing:.06em}
  body.home-demo-page #soulu-flow .hd-flow-kpis strong{display:block;margin-top:5px;font:800 10px/1 Montserrat,sans-serif;color:#f8fbff}
  body.home-demo-page #soulu-flow .hd-flow-kpis span{display:block;margin-top:4px;font:650 5.9px/1.3 Montserrat,sans-serif;color:rgba(221,228,236,.46)}
  body.home-demo-page #soulu-flow .hd-flow-panels--desktop{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  body.home-demo-page #soulu-flow .hd-flow-panel header{display:flex;align-items:flex-end;justify-content:space-between;gap:6px;margin-bottom:7px}
  body.home-demo-page #soulu-flow .hd-flow-panel b{font:780 7.4px/1.1 Montserrat,sans-serif;color:#f1f5fa}
  body.home-demo-page #soulu-flow .hd-flow-panel header span{font:700 5.7px/1.2 Montserrat,sans-serif;color:rgba(220,227,235,.42)}
  body.home-demo-page #soulu-flow .hd-flow-bars{display:flex;align-items:flex-end;gap:4px;height:52px}
  body.home-demo-page #soulu-flow .hd-flow-bars i{display:block;flex:1;border-radius:999px 999px 4px 4px;background:linear-gradient(180deg,rgba(95,180,255,.92),rgba(78,129,255,.32));box-shadow:0 0 12px rgba(81,140,255,.18)}
  body.home-demo-page #soulu-flow .hd-flow-bars i:nth-child(1){height:35%} body.home-demo-page #soulu-flow .hd-flow-bars i:nth-child(2){height:54%} body.home-demo-page #soulu-flow .hd-flow-bars i:nth-child(3){height:62%} body.home-demo-page #soulu-flow .hd-flow-bars i:nth-child(4){height:78%} body.home-demo-page #soulu-flow .hd-flow-bars i:nth-child(5){height:92%}
  body.home-demo-page #soulu-flow .hd-flow-line{position:relative;height:52px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));overflow:hidden}
  body.home-demo-page #soulu-flow .hd-flow-line i{position:absolute;left:6px;right:6px;bottom:9px;height:29px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,0)),linear-gradient(135deg,transparent 0 6%,rgba(255,255,255,0) 6% 8%,#6ea8ff 8% 18%,#6ea8ff 18% 21%,#9f77ff 21% 33%,#9f77ff 33% 36%,#ff5fbe 36% 48%,#ff5fbe 48% 51%,#7ae0ff 51% 65%,#7ae0ff 65% 68%,#8af26d 68% 82%,#8af26d 82% 85%,#f7f8fb 85% 100%);clip-path:polygon(0 88%,10% 84%,22% 70%,36% 74%,50% 52%,64% 56%,78% 28%,100% 8%,100% 100%,0 100%);opacity:.95}
  body.home-demo-page #soulu-flow .hd-flow-mini-list{display:grid;gap:6px;padding:0;margin:0;list-style:none}
  body.home-demo-page #soulu-flow .hd-flow-mini-list li{display:flex;align-items:center;justify-content:space-between;gap:6px;font:700 6.3px/1.2 Montserrat,sans-serif;color:#eef3f9}
  body.home-demo-page #soulu-flow .hd-flow-mini-list em{font-style:normal;color:rgba(221,228,236,.45)}
  body.home-demo-page #soulu-flow .hd-flow-tags{display:flex;flex-wrap:wrap;gap:5px}
  body.home-demo-page #soulu-flow .hd-flow-tags span{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);font:760 6px/1 Montserrat,sans-serif;color:#e5ebf2}
  body.home-demo-page #soulu-flow .hd-flow-workspace--tablet{display:grid;gap:10px;min-height:304px}
  body.home-demo-page #soulu-flow .hd-flow-brand--compact strong{font-size:8.3px}
  body.home-demo-page #soulu-flow .hd-flow-brand--compact span{font-size:6px}
  body.home-demo-page #soulu-flow .hd-flow-tablet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  body.home-demo-page #soulu-flow .hd-flow-pillset--compact{max-width:126px}
  body.home-demo-page #soulu-flow .hd-flow-tablet-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:8px;margin-top:2px}
  body.home-demo-page #soulu-flow .hd-flow-funnels{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  body.home-demo-page #soulu-flow .hd-flow-funnels article{padding:8px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.016))}
  body.home-demo-page #soulu-flow .hd-flow-funnels header{margin-bottom:7px;font:800 7px/1 Montserrat,sans-serif;color:#f3f7fc}
  body.home-demo-page #soulu-flow .hd-flow-funnels span{display:flex;align-items:center;min-height:22px;margin-top:4px;padding:0 7px;border-radius:9px;background:rgba(255,255,255,.04);font:700 5.9px/1.15 Montserrat,sans-serif;color:rgba(231,237,243,.78)}
  body.home-demo-page #soulu-flow .hd-flow-tablet-side{display:grid;gap:8px}
  body.home-demo-page #soulu-flow .hd-flow-tags--dense span{min-height:20px;font-size:5.8px}
  body.home-demo-page #soulu-flow .hd-flow-phone-shell{display:grid;gap:8px;padding:12px;min-height:304px}
  body.home-demo-page #soulu-flow .hd-flow-phone-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
  body.home-demo-page #soulu-flow .hd-flow-phone-head strong{display:block;font:800 10.5px/1.05 Montserrat,sans-serif;color:#f5f8fc}
  body.home-demo-page #soulu-flow .hd-flow-phone-head span{display:block;margin-top:3px;font:700 6px/1.25 Montserrat,sans-serif;color:rgba(219,226,233,.44)}
  body.home-demo-page #soulu-flow .hd-flow-phone-status{display:inline-flex;align-items:center;min-height:18px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.055);font:760 5.8px/1 Montserrat,sans-serif;color:#8ff6a8}
  body.home-demo-page #soulu-flow .hd-flow-phone-hero{padding:10px;border-radius:16px;background:linear-gradient(145deg,rgba(104,157,255,.18),rgba(234,75,184,.18));border:1px solid rgba(255,255,255,.07)}
  body.home-demo-page #soulu-flow .hd-flow-phone-hero small{display:block;font:760 5.8px/1 Montserrat,sans-serif;color:#bde4ff;text-transform:uppercase;letter-spacing:.06em}
  body.home-demo-page #soulu-flow .hd-flow-phone-hero strong{display:block;margin-top:5px;font:800 10px/1.18 Montserrat,sans-serif;color:#f8fbff}
  body.home-demo-page #soulu-flow .hd-flow-phone-hero span{display:block;margin-top:5px;font:700 6px/1.35 Montserrat,sans-serif;color:rgba(237,242,248,.72)}
  body.home-demo-page #soulu-flow .hd-flow-phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
  body.home-demo-page #soulu-flow .hd-flow-phone-grid article{padding:9px;border-radius:13px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.02))}
  body.home-demo-page #soulu-flow .hd-flow-phone-grid b{display:block;font:780 7.2px/1.1 Montserrat,sans-serif;color:#f2f6fb}
  body.home-demo-page #soulu-flow .hd-flow-phone-grid span{display:block;margin-top:4px;font:700 5.9px/1.3 Montserrat,sans-serif;color:rgba(220,227,235,.45)}
  body.home-demo-page #soulu-flow .hd-flow-phone-bottom{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:auto}
  body.home-demo-page #soulu-flow .hd-flow-phone-bottom span{display:flex;align-items:center;justify-content:center;min-height:30px;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);font-size:13px;color:#e4ebf3}
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup figcaption{padding:9px 12px 11px;border-top:1px solid rgba(255,255,255,.05);font:720 8.5px/1.35 Montserrat,sans-serif;color:rgba(228,234,241,.72)}

  /* FLOW NKO: preserve all three real screenshots and make them a native horizontal carousel. */
  body.home-demo-page #soulu-flow-nko .hd-visual{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  body.home-demo-page #soulu-flow-nko .hd-product-screens{
    position:relative!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(86vw,330px)!important;
    gap:11px!important;
    width:calc(100% + 11px)!important;
    height:auto!important;
    margin:0 -11px 0 0!important;
    padding:2px 11px 6px 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  body.home-demo-page #soulu-flow-nko .hd-product-screens::-webkit-scrollbar{display:none}
  body.home-demo-page #soulu-flow-nko .hd-screen-card{
    position:relative!important;inset:auto!important;
    width:100%!important;height:auto!important;max-width:none!important;
    margin:0!important;transform:none!important;opacity:1!important;
    scroll-snap-align:start!important;
    overflow:hidden!important;border-radius:18px!important;
    background:#fff!important;box-shadow:0 14px 34px rgba(48,61,76,.10)!important;
  }
  body.home-demo-page #soulu-flow-nko .hd-screen-card img{
    display:block!important;width:100%!important;height:auto!important;aspect-ratio:1100/756!important;
    object-fit:cover!important;object-position:top center!important;
  }
  body.home-demo-page #soulu-flow-nko .hd-screen-card figcaption{display:flex!important;min-height:46px;align-items:center;padding:10px 12px;font:760 10px/1.35 Montserrat,sans-serif;color:#22303d;background:linear-gradient(180deg,#ffffff,#f4f7fb)}
  body.home-demo-page #soulu-flow-nko .hd-flow-chain--nko{display:none!important}

  /* MVP: preserve all cards and make them swipe horizontally on smartphones. */
  body.home-demo-page #create-flow .mvp-premium{min-height:0!important;display:block!important;overflow:visible!important}
  body.home-demo-page #create-flow .mvp-carousel{
    display:flex!important;gap:12px!important;
    width:calc(100% + 12px)!important;margin-right:-12px!important;padding:2px 12px 6px 0!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch;
  }
  body.home-demo-page #create-flow .mvp-carousel::-webkit-scrollbar{display:none}
  body.home-demo-page #create-flow .mvp-ui{
    position:relative!important;inset:auto!important;flex:0 0 min(86vw,320px)!important;
    width:min(86vw,320px)!important;max-width:min(86vw,320px)!important;min-width:min(86vw,320px)!important;
    min-height:0!important;height:auto!important;transform:none!important;border-radius:20px!important;
    scroll-snap-align:start!important;
  }
  body.home-demo-page #create-flow .mvp-cols,
  body.home-demo-page #create-flow .mvp-economy-top,
  body.home-demo-page #create-flow .mvp-economy-grid{grid-template-columns:1fr!important}
  body.home-demo-page #create-flow .mvp-caption{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;margin-top:8px!important}

  /* CLUB: retain all three original cards and swipe horizontally instead of deleting cards. */
  body.home-demo-page #soulu-club .hd-visual{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
  body.home-demo-page #soulu-club .club-right-stage{width:100%!important;max-width:100%!important;transform:none!important;overflow:visible!important}
  body.home-demo-page #soulu-club .club-dark-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:11px!important;
    width:calc(100% + 11px)!important;
    max-width:none!important;
    margin-right:-11px!important;
    padding:0 11px 7px 0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  body.home-demo-page #soulu-club .club-dark-grid::-webkit-scrollbar{display:none}
  body.home-demo-page #soulu-club .club-dark-card{
    flex:0 0 min(86vw,320px)!important;
    width:min(86vw,320px)!important;min-width:min(86vw,320px)!important;max-width:min(86vw,320px)!important;
    min-height:420px!important;padding:19px!important;border-radius:25px!important;
    scroll-snap-align:start!important;transform:none!important;
    display:flex!important;flex-direction:column!important;
  }
  body.home-demo-page #soulu-club .club-card-btn{margin-top:auto!important;align-self:stretch!important;display:flex!important;align-items:center!important;justify-content:center!important;min-height:42px!important;border-radius:13px!important;border:1px solid rgba(200,210,223,.14)!important;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;}
  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn{border-color:rgba(123,47,247,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(123,47,247,.12)!important;}
  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn{border-color:rgba(232,62,173,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(232,62,173,.12)!important;}
  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{border-color:rgba(35,201,216,.34)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(35,201,216,.12)!important;}

  /* Five-item fixed mobile module switcher. */
  .hd-mobile-module-nav{
    display:block;position:fixed;z-index:9400;left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom));
    opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(0,14px,0);
    transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility 0s linear .2s
  }
  body.hd-module-nav-visible .hd-mobile-module-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
  .hd-mobile-module-nav__rail{
    display:grid;grid-template-columns:.78fr .86fr 1.3fr .78fr .84fr;align-items:center;gap:4px;
    width:100%;padding:5px;border:1px solid rgba(139,149,163,.34);border-radius:17px;
    background:linear-gradient(180deg,rgba(54,60,69,.97),rgba(11,14,19,.988));
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 9px 26px rgba(0,0,0,.20)
  }
  .hd-mobile-module-nav button{
    min-width:0;min-height:34px;padding:0 4px;border:1px solid rgba(174,182,194,.12);border-radius:11px;
    background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
    color:rgba(232,236,242,.62);font:750 7.4px/1 Montserrat,sans-serif;white-space:nowrap;-webkit-tap-highlight-color:transparent
  }
  .hd-mobile-module-nav button.is-active{
    border-color:rgba(211,217,226,.38);
    background:radial-gradient(circle at 24% 0%,rgba(255,255,255,.20),transparent 40%),linear-gradient(180deg,#626a76,#303640 42%,#10141a);
    color:#fff;box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.14)
  }
}

/* =========================================================
   4.18.41 — mobile module polish + stable iPhone presenter.
   Smartphone only. Desktop/tablet white section untouched.
   ========================================================= */
@media (max-width:767px){
  /* Product presenter must always cover the complete iPhone large viewport.
     JS also freezes the maximum stable height for the current width. */
  .d3app-intro,
  .d3app-presenter__sticky{
    height:max(var(--d3app-vh),100lvh)!important;
    min-height:max(var(--d3app-vh),100lvh)!important;
  }

  /* FLOW: use three prepared mockup images instead of rendering a tiny dashboard in DOM. */
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(88vw,342px)!important;
    gap:12px!important;
    width:calc(100% + 12px)!important;
    max-width:none!important;
    margin:0 -12px 0 0!important;
    padding:2px 12px 8px 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:auto!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups::-webkit-scrollbar{display:none!important}
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    border-radius:22px!important;
    border:1px solid rgba(43,52,64,.12)!important;
    background:#f6f8fb!important;
    box-shadow:0 16px 38px rgba(24,33,43,.12)!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:9/16!important;
    object-fit:cover!important;
    object-position:center center!important;
    margin:0!important;
    background:#f6f8fb!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-device-label{
    position:absolute!important;
    z-index:3!important;
    top:11px!important;
    right:11px!important;
    display:inline-flex!important;
    align-items:center!important;
    min-height:23px!important;
    padding:0 8px!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:999px!important;
    background:rgba(8,12,18,.72)!important;
    color:rgba(240,244,249,.80)!important;
    backdrop-filter:none!important;
    font:760 7px/1 Montserrat,sans-serif!important;
    letter-spacing:.08em!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup figcaption{
    display:block!important;
    min-height:54px!important;
    padding:11px 13px 12px!important;
    border-top:1px solid rgba(28,38,49,.08)!important;
    background:linear-gradient(180deg,#fff,#f5f7fa)!important;
    color:#253240!important;
    font:740 9.5px/1.38 Montserrat,sans-serif!important;
  }
  body.home-demo-page #soulu-flow .hd-visual-caption--flow{
    margin-top:8px!important;
    font-size:9px!important;
    color:#697684!important;
  }

  /* FLOW NKO: the text under every screenshot must be readable on iPhone. */
  body.home-demo-page #soulu-flow-nko .hd-screen-card figcaption{
    min-height:50px!important;
    padding:11px 13px!important;
    font:760 11px/1.35 Montserrat,sans-serif!important;
    color:#182533!important;
    background:linear-gradient(180deg,#fff,#f3f6f9)!important;
  }

  /* MVP: exactly the same native horizontal mechanics as FLOW NKO. */
  body.home-demo-page #create-flow .hd-visual{
    overflow:visible!important;
    max-width:100%!important;
  }
  body.home-demo-page #create-flow .mvp-premium{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-height:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  body.home-demo-page #create-flow .mvp-carousel{
    position:relative!important;
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:min(86vw,330px)!important;
    gap:11px!important;
    width:calc(100% + 11px)!important;
    max-width:none!important;
    margin:0 -11px 0 0!important;
    padding:2px 11px 8px 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-padding-inline:0!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:auto!important;
  }
  body.home-demo-page #create-flow .mvp-carousel::-webkit-scrollbar{display:none!important}
  body.home-demo-page #create-flow .mvp-carousel>.mvp-ui{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    transform:none!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
    overflow:hidden!important;
  }
  body.home-demo-page #create-flow .mvp-caption{
    margin-top:8px!important;
  }

  /* CLUB: same robust horizontal behavior; CTA stays at the bottom of each card. */
  body.home-demo-page #soulu-club .club-dark-grid{
    touch-action:auto!important;
    scroll-snap-stop:normal!important;
  }
  body.home-demo-page #soulu-club .club-dark-card{
    scroll-snap-stop:always!important;
  }
}


/* =========================================================
   4.18.42 — final mobile carousel + CTA + FLOW fit polish.
   Smartphone only. Existing desktop/tablet layouts remain untouched.
   ========================================================= */
@media (max-width:767px){
  /* 1) FLOW direction cards: reclaim vertical space between module pills.
     Content and typography stay intact; only spacing/row height is tightened. */
  .d3app-flow-card,
  .d3app-flow-card--nko,
  .d3app-flow-card--b2b,
  .d3app-flow-card--b2c,
  .d3app-flow-card--b2g{
    --flow-ui-gap:4px!important;
    --flow-ui-chip-h:27px!important;
  }
  .d3app-flow-card__body{
    padding-bottom:7px!important;
    gap:4px!important;
  }
  .d3app-flow-card__modules-intro{
    padding-top:3px!important;
    line-height:1.26!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:27px!important;
    gap:3px 6px!important;
    align-content:start!important;
    padding-top:3px!important;
    padding-bottom:4px!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:27px!important;
    height:27px!important;
    padding:3px 6px!important;
    border-radius:9px!important;
  }
  .d3app-flow-card[data-density="dense"],
  .d3app-flow-card[data-density="x-dense"]{
    --flow-ui-chip-h:25px!important;
    --flow-ui-gap:3px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:25px!important;
    gap:2px 5px!important;
    padding-top:2px!important;
    padding-bottom:3px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:25px!important;
    height:25px!important;
    padding:2px 5px!important;
  }
  /* Cancel the older large Safari reserve that was creating the visible dead zone. */
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"].d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    padding-bottom:4px!important;
  }

  /* 2) One shared carousel contract for every multi-screen block. */
  body.home-demo-page [data-hd-carousel]{
    position:relative!important;
    box-sizing:border-box!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-x pan-y pinch-zoom!important;
    pointer-events:auto!important;
  }
  body.home-demo-page [data-hd-carousel]::-webkit-scrollbar{display:none!important}

  /* MVP: no hidden/absolute parent can swallow the horizontal gesture. */
  body.home-demo-page #create-flow .hd-visual,
  body.home-demo-page #create-flow .mvp-premium{
    overflow:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  body.home-demo-page #create-flow .mvp-carousel{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:11px!important;
    width:calc(100% + 14px)!important;
    max-width:none!important;
    margin:0 -14px 0 0!important;
    padding:2px 14px 8px 0!important;
  }
  body.home-demo-page #create-flow .mvp-carousel>.mvp-ui{
    flex:0 0 min(86vw,330px)!important;
    width:min(86vw,330px)!important;
    min-width:min(86vw,330px)!important;
    max-width:min(86vw,330px)!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  /* CLUB: all three role cards are a real horizontal carousel. */
  body.home-demo-page #soulu-club .hd-visual,
  body.home-demo-page #soulu-club .club-right-stage{
    overflow:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
  body.home-demo-page #soulu-club .club-dark-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    grid-template-columns:none!important;
    gap:11px!important;
    width:calc(100% + 14px)!important;
    max-width:none!important;
    margin:0 -14px 0 0!important;
    padding:0 14px 8px 0!important;
    transform:none!important;
  }
  body.home-demo-page #soulu-club .club-dark-card{
    flex:0 0 min(86vw,320px)!important;
    width:min(86vw,320px)!important;
    min-width:min(86vw,320px)!important;
    max-width:min(86vw,320px)!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  /* FLOW + NKO use the same snapping/dot behavior. */
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups,
  body.home-demo-page #soulu-flow-nko .hd-product-screens{
    pointer-events:auto!important;
  }
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockup,
  body.home-demo-page #soulu-flow-nko .hd-screen-card{
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  /* Shared dot indicator. */
  .hd-carousel-dots{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    min-height:22px!important;
    margin:6px 0 2px!important;
  }
  .hd-carousel-dots button{
    appearance:none!important;
    width:6px!important;
    height:6px!important;
    min-width:6px!important;
    padding:0!important;
    border:0!important;
    border-radius:999px!important;
    background:rgba(71,82,94,.22)!important;
    box-shadow:none!important;
    transition:width .18s ease,background .18s ease,opacity .18s ease!important;
    opacity:.68!important;
  }
  .hd-carousel-dots button.is-active{
    width:19px!important;
    background:linear-gradient(90deg,#7b53ff 0%,#e83ead 34%,#f09548 66%,#2fc5ff 100%)!important;
    opacity:1!important;
  }

  /* 3) Mobile CTAs: reuse the approved desktop product color systems. */
  body.home-demo-page #soulu-web .hd-btn--primary{
    color:#103647!important;
    border:1px solid rgba(255,255,255,.76)!important;
    background:linear-gradient(145deg,#2f7198 0%,#73c7f0 24%,#e6f8ff 46%,#61afd8 60%,#9bdcf8 76%,#2a719a 100%)!important;
    box-shadow:0 12px 26px rgba(56,145,194,.16),inset 0 1px 0 rgba(255,255,255,.82),inset 0 -7px 16px rgba(38,105,142,.10)!important;
  }
  body.home-demo-page #soulu-web .hd-btn--secondary{
    color:#18232b!important;border:1px solid transparent!important;
    background:linear-gradient(transparent,transparent) padding-box,linear-gradient(110deg,#367ea5 0%,#7fd4fb 28%,#e4f8ff 48%,#66bee9 70%,#2d7195 100%) border-box!important;
    box-shadow:none!important;
  }

  body.home-demo-page #soulu-flow .hd-btn--primary{
    color:#15181d!important;
    border:1px solid rgba(255,255,255,.78)!important;
    background:linear-gradient(140deg,#bf2daa 0%,#ef8740 26%,#eaf4ee 43%,#79b84d 63%,#68c2e7 82%,#4c9fd7 100%)!important;
    box-shadow:0 12px 28px rgba(99,129,162,.14),inset 0 1px 0 rgba(255,255,255,.86)!important;
  }
  body.home-demo-page #soulu-flow .hd-btn--secondary{
    color:#15181d!important;border:1px solid transparent!important;
    background:linear-gradient(transparent,transparent) padding-box,linear-gradient(110deg,#c72bad 0%,#ef8742 30%,#79b84d 66%,#4ca9df 100%) border-box!important;
    box-shadow:none!important;
  }

  body.home-demo-page #soulu-flow-nko .hd-btn--primary{
    color:#fff!important;
    border:1px solid rgba(255,255,255,.28)!important;
    background:linear-gradient(110deg,#8d0e59 0%,#d82e96 28%,#ff91cf 50%,#df3b9f 72%,#831051 100%)!important;
    box-shadow:0 12px 28px rgba(216,46,150,.18),inset 0 1px 0 rgba(255,255,255,.30)!important;
  }
  body.home-demo-page #soulu-flow-nko .hd-btn--secondary{
    color:#24111d!important;border:1px solid transparent!important;
    background:linear-gradient(transparent,transparent) padding-box,linear-gradient(110deg,#8d0e59 0%,#d82e96 28%,#ff91cf 50%,#df3b9f 72%,#831051 100%) border-box!important;
    box-shadow:none!important;
  }

  body.home-demo-page #create-flow .hd-btn--primary{
    color:#fff!important;border:0!important;
    background:linear-gradient(110deg,#117983 0%,#22b8c1 30%,#72e0df 52%,#22b8c1 74%,#168f98 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 10px 25px rgba(34,184,193,.17)!important;
  }
  body.home-demo-page #create-flow .hd-btn--secondary{
    color:#173237!important;border:1px solid transparent!important;
    background:linear-gradient(transparent,transparent) padding-box,linear-gradient(110deg,#117983 0%,#22b8c1 32%,#72e0df 52%,#22b8c1 74%,#168f98 100%) border-box!important;
    box-shadow:none!important;
  }

  body.home-demo-page #soulu-club .hd-btn--primary{
    color:#fff!important;border:0!important;
    background:linear-gradient(110deg,#7b2ff7 0%,#e83ead 34%,#3478f6 68%,#23c9d8 100%)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 10px 25px rgba(82,88,210,.14)!important;
  }
  body.home-demo-page #soulu-club .hd-btn--secondary{
    color:#15181d!important;border:1px solid transparent!important;
    background:linear-gradient(transparent,transparent) padding-box,linear-gradient(110deg,#7b2ff7 0%,#e83ead 34%,#3478f6 68%,#23c9d8 100%) border-box!important;
    box-shadow:none!important;
  }

  /* Contact submit: graphite titanium surface + four-color header-like edge. */
  body.home-demo-page #contact .hd-form__actions .hd-btn--primary{
    color:#11151a!important;
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,#c7cbd0 0%,#9ca2aa 20%,#eceff2 43%,#a6abb2 62%,#d8dbe0 82%,#90969e 100%) padding-box,
      linear-gradient(110deg,#7b53ff 0%,#e83ead 34%,#f09548 66%,#2fc5ff 100%) border-box!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70),0 10px 24px rgba(48,55,66,.12)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.38)!important;
  }
}


/* =========================================================
   4.18.43 — mobile verification fixes.
   Only smartphones: reliable swipe, product-colored dots,
   correct CTA hierarchy, safe-space and final FLOW fit.
   ========================================================= */
@media (max-width:767px){
  /* PRODUCT MATRIX: keep all four detailed FLOW screens fully inside Safari. */
  .d3app-flow-card,
  .d3app-flow-card--nko,
  .d3app-flow-card--b2b,
  .d3app-flow-card--b2c,
  .d3app-flow-card--b2g{
    --flow-ui-gap:3px!important;
    --flow-ui-chip-h:24px!important;
  }
  .d3app-flow-card__body{
    gap:3px!important;
    padding-bottom:5px!important;
  }
  .d3app-flow-card__modules-intro{
    padding-top:2px!important;
    padding-bottom:1px!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:24px!important;
    gap:2px 6px!important;
    padding-top:2px!important;
    padding-bottom:2px!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:24px!important;
    height:24px!important;
    padding:2px 5px!important;
  }
  .d3app-flow-card[data-density="dense"],
  .d3app-flow-card[data-density="x-dense"]{
    --flow-ui-chip-h:22px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:22px!important;
    gap:2px 5px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:22px!important;
    height:22px!important;
  }

  /* White module section: reserve room for fixed navigation and fixed site header. */
  body.home-demo-page .hd-panel{
    scroll-margin-top:150px!important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }
  body.home-demo-page .hd-panels{
    scroll-padding-bottom:calc(112px + env(safe-area-inset-bottom))!important;
  }

  /* Every multi-card area is an actual touch scroller. */
  body.home-demo-page [data-hd-carousel],
  body.home-demo-page #create-flow .mvp-carousel,
  body.home-demo-page #soulu-club .club-dark-grid,
  body.home-demo-page #soulu-flow .hd-flow-mobile-mockups,
  body.home-demo-page #soulu-flow-nko .hd-product-screens{
    box-sizing:border-box!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    overscroll-behavior-x:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:none!important;
  }
  body.home-demo-page [data-hd-carousel]::-webkit-scrollbar,
  body.home-demo-page #create-flow .mvp-carousel::-webkit-scrollbar,
  body.home-demo-page #soulu-club .club-dark-grid::-webkit-scrollbar{display:none!important}

  body.home-demo-page #create-flow .mvp-premium,
  body.home-demo-page #create-flow .hd-visual,
  body.home-demo-page #soulu-club .club-right-stage,
  body.home-demo-page #soulu-club .hd-visual{
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  body.home-demo-page #create-flow .mvp-carousel,
  body.home-demo-page #soulu-club .club-dark-grid{
    width:calc(100vw - 32px)!important;
    max-width:calc(100vw - 32px)!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:14px!important;
  }
  body.home-demo-page #create-flow .mvp-carousel>.mvp-ui,
  body.home-demo-page #soulu-club .club-dark-card{
    flex:0 0 calc(100vw - 54px)!important;
    width:calc(100vw - 54px)!important;
    min-width:calc(100vw - 54px)!important;
    max-width:calc(100vw - 54px)!important;
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }
  body.home-demo-page #create-flow .mvp-ui{
    min-height:0!important;
    height:auto!important;
  }
  body.home-demo-page #create-flow .mvp-main,
  body.home-demo-page #create-flow .mvp-member,
  body.home-demo-page #create-flow .mvp-economy{
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
  }

  /* Shared dots: neutral inactive dots, active dot inherits the product language. */
  .hd-carousel-dots button{
    background:rgba(91,100,112,.20)!important;
  }
  [data-hd-carousel-dots="flow"] button.is-active{
    background:linear-gradient(90deg,#7b53ff 0%,#e83ead 34%,#f09548 66%,#2fc5ff 100%)!important;
  }
  [data-hd-carousel-dots="nko"] button.is-active{
    background:linear-gradient(90deg,#9c155f 0%,#e83ead 48%,#ff8dcc 100%)!important;
  }
  [data-hd-carousel-dots="mvp"] button.is-active{
    background:linear-gradient(90deg,#177f89 0%,#2abfc7 48%,#7be3df 100%)!important;
  }
  [data-hd-carousel-dots="club"] button.is-active{
    background:linear-gradient(90deg,#7b2ff7 0%,#e83ead 36%,#3478f6 70%,#23c9d8 100%)!important;
  }

  /* Existing WEB dots keep their native mechanics but use WEB sky-blue titanium color. */
  body.home-demo-page #soulu-web .hd-web-showcase__dots>*{
    background:rgba(91,100,112,.20)!important;
    border-color:transparent!important;
  }
  body.home-demo-page #soulu-web .hd-web-showcase__dots>*.is-active,
  body.home-demo-page #soulu-web .hd-web-showcase__dots>*[aria-current="true"]{
    background:linear-gradient(90deg,#2f7198 0%,#7fd4fb 48%,#2fc5ff 100%)!important;
  }

  /* CTA hierarchy: secondary buttons are outline-only, not filled clones. */
  body.home-demo-page #soulu-web .hd-btn--secondary{
    color:#18232b!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#367ea5 0%,#7fd4fb 28%,#e4f8ff 48%,#66bee9 70%,#2d7195 100%) border-box!important;
  }
  body.home-demo-page #soulu-flow .hd-btn--secondary{
    color:#15181d!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#7b53ff 0%,#e83ead 27%,#f09548 54%,#78da65 76%,#2fc5ff 100%) border-box!important;
  }
  body.home-demo-page #soulu-flow-nko .hd-btn--secondary{
    color:#24111d!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#8d0e59 0%,#d82e96 30%,#ff91cf 52%,#831051 100%) border-box!important;
  }
  body.home-demo-page #create-flow .hd-btn--secondary{
    color:#173237!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#117983 0%,#22b8c1 35%,#72e0df 58%,#168f98 100%) border-box!important;
  }
  body.home-demo-page #soulu-club .hd-btn--secondary{
    color:#15181d!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#7b2ff7 0%,#e83ead 34%,#3478f6 68%,#23c9d8 100%) border-box!important;
  }

  /* Submit: graphite titanium, readable black label, four-color SOULULAB edge. */
  body.home-demo-page #contact .hd-form__actions .hd-btn--primary{
    color:#0b0e12!important;
    border:2px solid transparent!important;
    background:
      linear-gradient(145deg,#8d939b 0%,#c8cdd2 18%,#eef1f3 40%,#a0a6ae 60%,#d9dde1 78%,#898f98 100%) padding-box,
      linear-gradient(110deg,#7b53ff 0%,#e83ead 34%,#f09548 66%,#2fc5ff 100%) border-box!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),inset 0 -1px 0 rgba(44,50,59,.16),0 10px 24px rgba(48,55,66,.12)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.48)!important;
  }
}

/* =========================================================
   4.18.44 — mobile cleanup: remove ghost heights/collapse,
   restore WEB dots, true native carousels, FLOW proportional fit.
   ========================================================= */
@media (max-width:767px){
  /* Remove inherited desktop min-heights that created huge white gaps and
     the apparent collapse/jump between WEB / FLOW NKO / MVP. */
  body.home-demo-page .hd-panel,
  body.home-demo-page .hd-visual,
  body.home-demo-page #soulu-web .hd-web-showcase,
  body.home-demo-page #soulu-web .hd-web-mobile-strip,
  body.home-demo-page #soulu-flow-nko .hd-product-screens,
  body.home-demo-page #create-flow .mvp-premium,
  body.home-demo-page #soulu-club .club-right-stage{
    min-height:0!important;
    height:auto!important;
  }
  body.home-demo-page .hd-panel{
    padding-bottom:28px!important;
  }
  body.home-demo-page #soulu-web .hd-web-showcase{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  body.home-demo-page #soulu-web .hd-web-showcase__footer{
    display:grid!important;
    justify-items:center!important;
    gap:5px!important;
    min-height:0!important;
    margin:8px 0 2px!important;
    padding:0!important;
  }
  body.home-demo-page #soulu-web .hd-web-showcase__caption{
    margin:0!important;
    padding:0!important;
  }
  body.home-demo-page #soulu-web .hd-web-showcase__dots{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:18px!important;
    margin:0!important;
  }

  /* All carousels: native iOS panning + deterministic snap. No JS drag layer. */
  body.home-demo-page [data-hd-carousel]{
    touch-action:auto!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scroll-behavior:smooth!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
  }
  body.home-demo-page [data-hd-carousel]>*{
    scroll-snap-align:start!important;
    scroll-snap-stop:always!important;
  }

  /* WEB mobile strip: remove trailing phantom space and keep cards proportional. */
  body.home-demo-page #soulu-web .hd-web-mobile-strip{
    width:calc(100vw - 32px)!important;
    max-width:calc(100vw - 32px)!important;
    margin:0!important;
    padding:0 12px 0 0!important;
    gap:10px!important;
  }
  body.home-demo-page #soulu-web .hd-web-mobile-card{
    flex:0 0 calc(100vw - 54px)!important;
    width:calc(100vw - 54px)!important;
    min-width:calc(100vw - 54px)!important;
    max-width:calc(100vw - 54px)!important;
  }

  /* Product-colored WEB active dot now uses the common carousel controller. */
  [data-hd-carousel-dots="web"] button.is-active{
    background:linear-gradient(90deg,#2f7198 0%,#7fd4fb 48%,#2fc5ff 100%)!important;
  }

  /* FLOW cards: common proportional geometry for all phone heights.
     NKO gets breathing room; B2B/B2C/B2G use the same compact rhythm. */
  .d3app-flow-card{
    --flow-ui-gap:4px!important;
    --flow-ui-chip-h:23px!important;
  }
  .d3app-flow-card__body{
    gap:4px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  .d3app-flow-card__route{margin-top:1px!important;margin-bottom:1px!important}
  .d3app-flow-card__metrics{margin-top:1px!important;margin-bottom:1px!important}
  .d3app-flow-card__modules-intro{padding:3px 0 1px!important}
  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:23px!important;
    gap:3px 6px!important;
    align-content:start!important;
    padding:2px 0!important;
  }
  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:23px!important;
    height:23px!important;
    padding:2px 5px!important;
  }
  .d3app-flow-card--nko .d3app-flow-card__body{
    gap:6px!important;
  }
  .d3app-flow-card--nko .d3app-flow-card__body .d3app-flow-card__tags{
    gap:6px 7px!important;
    align-content:space-evenly!important;
  }
  .d3app-flow-card__formula{
    min-height:17px!important;
    height:17px!important;
    padding-top:3px!important;
  }
  .d3app-flow-card[data-density="dense"]{
    --flow-ui-chip-h:22px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    grid-auto-rows:22px!important;
    gap:2px 5px!important;
  }
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:22px!important;
    height:22px!important;
  }

  /* Final submit guard: wins against legacy inline reset in all interaction states. */
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"],
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:hover,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:focus,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:focus-visible,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:active{
    color:#0b0e12!important;
    border:2px solid transparent!important;
    background:
      linear-gradient(145deg,#707780 0%,#a7adb5 18%,#d7dbe0 39%,#8a9199 59%,#bec3c9 79%,#6d747d 100%) padding-box,
      linear-gradient(110deg,#7b53ff 0%,#e83ead 34%,#f09548 66%,#2fc5ff 100%) border-box!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(30,35,42,.22),0 10px 24px rgba(65,77,105,.12)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.30)!important;
  }
}

@media (max-width:767px){
  /* 4.18.44 final CTA specificity guard. */
  body.home-demo-page #soulu-web .hd-actions a.hd-btn.hd-btn--secondary{
    color:#17242c!important;
    border:2px solid transparent!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#367ea5 0%,#7fd4fb 32%,#dff7ff 50%,#66bee9 72%,#2d7195 100%) border-box!important;
    box-shadow:none!important;
  }
  body.home-demo-page #soulu-flow .hd-actions a.hd-btn.hd-btn--secondary{
    color:#15181d!important;
    border:2px solid transparent!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#7b53ff 0%,#e83ead 28%,#f09548 55%,#78da65 77%,#2fc5ff 100%) border-box!important;
    box-shadow:none!important;
  }
  body.home-demo-page #soulu-flow-nko .hd-actions a.hd-btn.hd-btn--secondary{
    color:#26121d!important;
    border:2px solid transparent!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#8d0e59 0%,#d82e96 34%,#ff91cf 55%,#831051 100%) border-box!important;
    box-shadow:none!important;
  }
  body.home-demo-page #create-flow .hd-actions a.hd-btn.hd-btn--secondary{
    color:#173237!important;
    border:2px solid transparent!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#117983 0%,#22b8c1 35%,#72e0df 58%,#168f98 100%) border-box!important;
    box-shadow:none!important;
  }
  body.home-demo-page #soulu-club .hd-actions a.hd-btn.hd-btn--secondary{
    color:#15181d!important;
    border:2px solid transparent!important;
    background:linear-gradient(#fff,#fff) padding-box,linear-gradient(110deg,#7b2ff7 0%,#e83ead 34%,#3478f6 68%,#23c9d8 100%) border-box!important;
    box-shadow:none!important;
  }
}


/* =========================================================
   4.18.45 — FLOW equal-layout contract + readable submit CTA.
   Smartphones only. No product/content changes.
   ========================================================= */
@media (max-width:767px){
  /* One geometry for NKO / B2B / B2C / B2G.
     Content count may change only the module list height; all major zones keep
     exactly the same start positions and spacing on the same phone. */
  .d3app-flow-card,
  .d3app-flow-card--nko,
  .d3app-flow-card--b2b,
  .d3app-flow-card--b2c,
  .d3app-flow-card--b2g{
    --flow-ui-gap:4px!important;
    --flow-ui-head:46px!important;
    --flow-ui-chip-h:26px!important;
    --flow-ui-chip-fs:6.35px!important;
    --flow-ui-intro-fs:6.8px!important;
  }

  .d3app-flow-card__head{
    height:46px!important;
    min-height:46px!important;
  }

  .d3app-flow-card__body,
  .d3app-flow-card--nko .d3app-flow-card__body,
  .d3app-flow-card--b2b .d3app-flow-card__body,
  .d3app-flow-card--b2c .d3app-flow-card__body,
  .d3app-flow-card--b2g .d3app-flow-card__body{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:44px 58px 42px 42px auto minmax(0,1fr) 17px!important;
    gap:4px!important;
    padding:6px 12px 7px!important;
    align-content:stretch!important;
  }

  .d3app-flow-card__statement{
    grid-row:1!important;
    min-height:0!important;
    height:44px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    font-size:11.5px!important;
    line-height:1.08!important;
    overflow:hidden!important;
  }

  .d3app-flow-card__route{
    grid-row:2!important;
    height:58px!important;
    min-height:58px!important;
    margin:0!important;
    padding:1px 0 0!important;
  }
  .d3app-flow-card__route::before{top:16px!important}
  .d3app-flow-card__route span:not(:last-child)::after{top:14px!important}
  .d3app-flow-card__route .d3app-flow-icon{width:32px!important;height:32px!important}
  .d3app-flow-card__route .d3app-flow-icon svg{width:14px!important;height:14px!important}
  .d3app-flow-card__route b{font-size:5.3px!important;line-height:1.08!important}

  .d3app-flow-card__metrics{
    grid-row:3!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    gap:6px!important;
  }
  .d3app-flow-card__metrics > span{
    height:42px!important;
    min-height:42px!important;
    padding:5px 7px!important;
  }
  .d3app-flow-card__metrics b{font-size:5.4px!important;line-height:1.08!important}

  .d3app-flow-card__modules-intro,
  .d3app-flow-card--nko .d3app-flow-card__modules-intro,
  .d3app-flow-card--b2b .d3app-flow-card__modules-intro,
  .d3app-flow-card--b2c .d3app-flow-card__modules-intro,
  .d3app-flow-card--b2g .d3app-flow-card__modules-intro{
    grid-row:4!important;
    min-height:42px!important;
    height:42px!important;
    margin:0!important;
    padding:5px 0 0!important;
    display:flex!important;
    align-items:flex-start!important;
    font-size:6.8px!important;
    line-height:1.28!important;
    overflow:hidden!important;
  }

  .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--nko .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2b .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags{
    grid-row:5!important;
    align-self:start!important;
    align-content:start!important;
    grid-auto-rows:26px!important;
    gap:4px 7px!important;
    margin:0!important;
    padding:4px 0 0!important;
  }

  .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--nko .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2b .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__body .d3app-flow-card__tags span,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__body .d3app-flow-card__tags span{
    min-height:26px!important;
    height:26px!important;
    padding:3px 6px!important;
    font-size:6.35px!important;
    line-height:1.1!important;
  }

  .d3app-flow-card__formula,
  .d3app-flow-card[data-density="dense"] .d3app-flow-card__formula,
  .d3app-flow-card[data-density="x-dense"] .d3app-flow-card__formula{
    grid-row:7!important;
    align-self:end!important;
    height:17px!important;
    min-height:17px!important;
    margin:0!important;
    padding-top:4px!important;
    font-size:5.4px!important;
  }

  /* Very short phones: same geometry, proportional compact step only. */
  @media (max-height:680px){
    .d3app-flow-card,
    .d3app-flow-card--nko,
    .d3app-flow-card--b2b,
    .d3app-flow-card--b2c,
    .d3app-flow-card--b2g{
      --flow-ui-head:42px!important;
      --flow-ui-chip-h:22px!important;
    }
    .d3app-flow-card__head{height:42px!important;min-height:42px!important}
    .d3app-flow-card__body,
    .d3app-flow-card--nko .d3app-flow-card__body,
    .d3app-flow-card--b2b .d3app-flow-card__body,
    .d3app-flow-card--b2c .d3app-flow-card__body,
    .d3app-flow-card--b2g .d3app-flow-card__body{
      top:42px!important;
      height:max(0px,calc(var(--flow-card-surface-h) - 42px))!important;
      grid-template-rows:38px 50px 36px 36px auto minmax(0,1fr) 15px!important;
      gap:3px!important;
      padding:5px 10px 6px!important;
    }
    .d3app-flow-card__statement{height:38px!important;font-size:10.4px!important}
    .d3app-flow-card__route{height:50px!important;min-height:50px!important}
    .d3app-flow-card__route .d3app-flow-icon{width:28px!important;height:28px!important}
    .d3app-flow-card__route::before{top:14px!important}
    .d3app-flow-card__route span:not(:last-child)::after{top:12px!important}
    .d3app-flow-card__metrics,.d3app-flow-card__metrics>span{height:36px!important;min-height:36px!important}
    .d3app-flow-card__modules-intro,
    .d3app-flow-card--nko .d3app-flow-card__modules-intro,
    .d3app-flow-card--b2b .d3app-flow-card__modules-intro,
    .d3app-flow-card--b2c .d3app-flow-card__modules-intro,
    .d3app-flow-card--b2g .d3app-flow-card__modules-intro{height:36px!important;min-height:36px!important;font-size:6.1px!important}
    .d3app-flow-card__body .d3app-flow-card__tags,
    .d3app-flow-card--nko .d3app-flow-card__body .d3app-flow-card__tags,
    .d3app-flow-card--b2b .d3app-flow-card__body .d3app-flow-card__tags,
    .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags,
    .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags{
      grid-auto-rows:22px!important;gap:3px 6px!important;padding-top:3px!important;
    }
    .d3app-flow-card__body .d3app-flow-card__tags span,
    .d3app-flow-card--nko .d3app-flow-card__body .d3app-flow-card__tags span,
    .d3app-flow-card--b2b .d3app-flow-card__body .d3app-flow-card__tags span,
    .d3app-flow-card--b2c .d3app-flow-card__body .d3app-flow-card__tags span,
    .d3app-flow-card--b2g .d3app-flow-card__body .d3app-flow-card__tags span{
      height:22px!important;min-height:22px!important;font-size:5.8px!important;
    }
    .d3app-flow-card__formula{height:15px!important;min-height:15px!important;font-size:4.9px!important;padding-top:3px!important}
  }

  /* Submit CTA: same four-color perimeter logic as the SOULULAB header,
     but with a light titanium center and explicitly readable black text. */
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"],
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:hover,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:focus,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:focus-visible,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:active,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:disabled{
    color:#0a0d11!important;
    -webkit-text-fill-color:#0a0d11!important;
    opacity:1!important;
    filter:none!important;
    -webkit-filter:none!important;
    border:3px solid transparent!important;
    border-radius:18px!important;
    background:
      linear-gradient(145deg,#9ea4ab 0%,#d4d8dc 20%,#f2f4f6 42%,#b2b7bd 61%,#e1e4e7 80%,#9299a2 100%) padding-box,
      conic-gradient(from 225deg,#7b53ff 0 24%,#e83ead 24% 49%,#f09548 49% 74%,#2fc5ff 74% 100%) border-box!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.88),
      inset 0 -1px 0 rgba(39,45,53,.18),
      0 9px 22px rgba(36,43,54,.13)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
    font-weight:900!important;
  }
}

/* =========================================================
   4.18.48 — DEMO3 MOBILE HEADER MENU / BLACK TITANIUM
   Page-local override only. No desktop/tablet changes.
   ========================================================= */
@media (max-width: 820px) {
  /* Do not blur/transform the whole document tree when the menu opens.
     This avoids the old heavy, washed-out mobile menu presentation. */
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) main,
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) footer,
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) .soul-page,
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) .gls-page,
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) .gla2-about-page,
  html body.home-demo-page:has(.soul-header__mobile-panel:not([hidden])) .soulu-lab-page {
    filter:none!important;
    transform:none!important;
    pointer-events:none!important;
    user-select:none!important;
  }

  /* Calm page veil. Blur lives here only — one composited layer instead of the whole page. */
  html body.home-demo-page header.soul-header:has(.soul-header__mobile-panel:not([hidden]))::before {
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:9991!important;
    pointer-events:auto!important;
    background:rgba(4,7,11,.34)!important;
    backdrop-filter:blur(6px) saturate(.86)!important;
    -webkit-backdrop-filter:blur(6px) saturate(.86)!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    position:fixed!important;
    left:max(16px,env(safe-area-inset-left))!important;
    right:max(16px,env(safe-area-inset-right))!important;
    top:108px!important;
    z-index:10003!important;
    display:block!important;
    max-height:calc(100dvh - 126px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    touch-action:pan-y!important;

    padding:12px!important;
    border:1px solid transparent!important;
    border-radius:26px!important;
    color:#eef2f7!important;
    background:
      linear-gradient(155deg,rgba(22,27,34,.985) 0%,rgba(12,16,21,.992) 50%,rgba(7,10,14,.997) 100%) padding-box,
      linear-gradient(105deg,#7b53ff 0%,#f046c6 32%,#f09548 64%,#2fc5ff 100%) border-box!important;
    box-shadow:
      0 24px 54px rgba(0,0,0,.38),
      0 8px 20px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(0,0,0,.42)!important;
    backdrop-filter:blur(12px) saturate(.92)!important;
    -webkit-backdrop-filter:blur(12px) saturate(.92)!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel::-webkit-scrollbar {
    display:none!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel[hidden] {
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel:not([hidden]) {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav {
    display:grid!important;
    gap:7px!important;
    padding:0!important;
    margin:0!important;
  }

  /* One titanium contract for top-level links + accordion headers. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary {
    box-sizing:border-box!important;
    width:100%!important;
    min-height:54px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:0 16px!important;
    margin:0!important;
    border:1px solid transparent!important;
    border-radius:16px!important;
    color:#f1f4f8!important;
    -webkit-text-fill-color:#f1f4f8!important;
    background:
      linear-gradient(150deg,rgba(41,47,57,.82),rgba(16,20,26,.96) 66%,rgba(10,13,18,.99)) padding-box,
      linear-gradient(135deg,rgba(224,230,238,.28),rgba(117,128,143,.13) 48%,rgba(255,255,255,.08)) border-box!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 6px 14px rgba(0,0,0,.14)!important;
    font-family:Montserrat,system-ui,-apple-system,sans-serif!important;
    font-size:16px!important;
    line-height:1.1!important;
    font-weight:600!important;
    letter-spacing:-.012em!important;
    text-decoration:none!important;
    list-style:none!important;
    opacity:1!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog {
    display:block!important;
    margin:0!important;
    padding:0!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary::-webkit-details-marker {
    display:none!important;
  }

  /* Replace old text glyph with a clean CSS chevron. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary > span {
    position:relative!important;
    flex:0 0 11px!important;
    width:11px!important;
    height:11px!important;
    display:block!important;
    overflow:hidden!important;
    font-size:0!important;
    line-height:0!important;
    opacity:.72!important;
    transform:rotate(45deg)!important;
    transition:transform .18s ease,opacity .18s ease!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary > span::before {
    content:""!important;
    position:absolute!important;
    right:1px!important;
    bottom:1px!important;
    width:7px!important;
    height:7px!important;
    border-right:1.6px solid #dbe1e8!important;
    border-bottom:1.6px solid #dbe1e8!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog[open] > summary > span {
    transform:rotate(225deg)!important;
    opacity:1!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog[open] > summary {
    background:
      linear-gradient(150deg,rgba(50,56,67,.91),rgba(19,24,31,.98) 68%,rgba(11,14,19,.995)) padding-box,
      linear-gradient(135deg,rgba(238,242,247,.38),rgba(120,133,151,.16) 52%,rgba(255,255,255,.10)) border-box!important;
  }

  /* Compact nested rows — hierarchy instead of a second stack of giant cards. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog-list {
    display:grid!important;
    gap:5px!important;
    padding:6px 4px 1px 12px!important;
    margin:0!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav .soul-header__mobile-blog-list a {
    box-sizing:border-box!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0 13px!important;
    margin:0!important;
    border:1px solid rgba(176,188,202,.11)!important;
    border-radius:13px!important;
    color:#cfd6df!important;
    -webkit-text-fill-color:#cfd6df!important;
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
    font-size:13.5px!important;
    line-height:1.15!important;
    font-weight:500!important;
    letter-spacing:-.006em!important;
    opacity:1!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav .soul-header__mobile-blog-list a.is-active {
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.027))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(255,255,255,.025)!important;
  }

  /* Product identity remains visible but restrained. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-product--web {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(26,34,43,.95),rgba(10,15,21,.985)) padding-box,
      linear-gradient(100deg,rgba(85,202,255,.92),rgba(47,142,224,.68)) border-box!important;
    color:#eef8ff!important;
    -webkit-text-fill-color:#eef8ff!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-product--flow {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(34,27,36,.97),rgba(13,13,18,.99)) padding-box,
      linear-gradient(100deg,rgba(240,70,198,.95),rgba(174,34,139,.70)) border-box!important;
    color:#fff3fc!important;
    -webkit-text-fill-color:#fff3fc!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-about--lab {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(30,34,41,.96),rgba(11,14,19,.99)) padding-box,
      linear-gradient(105deg,#7b53ff 0%,#f046c6 32%,#f09548 64%,#2fc5ff 100%) border-box!important;
    color:#f8f9fb!important;
    -webkit-text-fill-color:#f8f9fb!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__product-web-word {
    -webkit-text-fill-color:transparent!important;
  }
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__flow-word {
    -webkit-text-fill-color:transparent!important;
  }

  /* Active top-level page item: quiet chrome highlight, not a white slab. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a.is-active {
    border-color:rgba(218,224,232,.25)!important;
    background:linear-gradient(145deg,rgba(63,71,83,.77),rgba(20,25,32,.98))!important;
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
  }

  /* Smaller, cleaner close control while preserving the existing burger JS. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger {
    width:52px!important;
    height:52px!important;
    border-radius:16px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger span {
    width:25px!important;
    height:2px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger.is-open span:nth-child(1) {
    transform:translateY(7px) rotate(45deg)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger.is-open span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg)!important;
  }
}

@media (max-width: 380px) {
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    left:12px!important;
    right:12px!important;
    padding:10px!important;
    border-radius:22px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary {
    min-height:50px!important;
    padding:0 14px!important;
    border-radius:15px!important;
    font-size:15px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav .soul-header__mobile-blog-list a {
    min-height:42px!important;
    font-size:13px!important;
  }
}

/* =========================================================
   4.18.49 — COMPACT MOBILE MENU / TITANIUM AURA
   DEMO3 only. Slimmer header + compact Black Titanium menu
   with restrained brand accents and SVG-mask navigation icons.
   ========================================================= */
@media (max-width: 820px) {
  /* Header capsule: deliberately slimmer than the previous mobile build. */
  html body.home-demo-page header.soul-header[data-site-header] {
    padding:6px 12px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-scrolled .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-fixed .soul-header__inner {
    width:100%!important;
    height:50px!important;
    min-height:50px!important;
    max-height:50px!important;
    padding:0 11px 0 13px!important;
    border-radius:19px!important;
    gap:10px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__brand {
    gap:8px!important;
    min-height:0!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__symbol {
    width:30px!important;
    height:30px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__word {
    font-size:.84rem!important;
    letter-spacing:.028em!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger {
    width:39px!important;
    height:39px!important;
    min-width:39px!important;
    min-height:39px!important;
    border-radius:13px!important;
    gap:4px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger span {
    width:20px!important;
    height:1.7px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger.is-open span:nth-child(1) {
    transform:translateY(5.7px) rotate(45deg)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger.is-open span:nth-child(3) {
    transform:translateY(-5.7px) rotate(-45deg)!important;
  }

  /* Menu follows the slimmer header instead of the old 108px offset. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    left:max(12px,env(safe-area-inset-left))!important;
    right:max(12px,env(safe-area-inset-right))!important;
    top:64px!important;
    max-height:calc(100dvh - 76px)!important;
    padding:9px!important;
    border-radius:22px!important;
    background:
      radial-gradient(circle at 8% 0%,rgba(123,83,255,.13),transparent 32%),
      radial-gradient(circle at 96% 8%,rgba(47,197,255,.10),transparent 34%),
      radial-gradient(circle at 48% 102%,rgba(240,70,198,.07),transparent 40%),
      linear-gradient(155deg,rgba(25,30,38,.985),rgba(11,15,20,.994) 56%,rgba(7,10,14,.998)) padding-box,
      linear-gradient(110deg,#7b53ff 0%,#f046c6 33%,#f09548 66%,#2fc5ff 100%) border-box!important;
    box-shadow:
      0 18px 38px rgba(0,0,0,.30),
      0 5px 14px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.40)!important;
    backdrop-filter:blur(10px) saturate(.94)!important;
    -webkit-backdrop-filter:blur(10px) saturate(.94)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel::before {
    content:""!important;
    position:absolute!important;
    left:28px!important;
    right:28px!important;
    top:0!important;
    height:1px!important;
    pointer-events:none!important;
    background:linear-gradient(90deg,transparent,#7b53ff 15%,#f046c6 40%,#f09548 66%,#2fc5ff 88%,transparent)!important;
    opacity:.85!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav {
    gap:5px!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary {
    position:relative!important;
    min-height:46px!important;
    padding:0 13px 0 45px!important;
    border-radius:14px!important;
    gap:8px!important;
    font-size:14.2px!important;
    line-height:1!important;
    font-weight:650!important;
    background:
      radial-gradient(circle at 10% 0%,rgba(255,255,255,.055),transparent 42%),
      linear-gradient(150deg,rgba(41,47,57,.70),rgba(15,19,25,.94) 68%,rgba(9,12,16,.98)) padding-box,
      linear-gradient(135deg,rgba(217,224,233,.24),rgba(105,116,131,.10) 52%,rgba(255,255,255,.07)) border-box!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      inset 0 -1px 0 rgba(0,0,0,.30),
      0 3px 10px rgba(0,0,0,.11)!important;
    overflow:hidden!important;
  }

  /* Slim color identity rail. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a::after,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary::after {
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:9px!important;
    bottom:9px!important;
    width:2px!important;
    border-radius:0 999px 999px 0!important;
    opacity:.56!important;
    background:linear-gradient(180deg,rgba(210,219,230,.58),rgba(116,129,145,.18))!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(1) > summary::after {
    background:linear-gradient(180deg,#7b53ff,#f046c6,#f09548,#2fc5ff)!important;
    opacity:.9!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(2)::after {
    background:linear-gradient(180deg,#2fc5ff,#5f8cff)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(3) > summary::after {
    background:linear-gradient(180deg,#8d6cff,#f046c6)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(4)::after {
    background:linear-gradient(180deg,#f09548,#f0c54a)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(5) > summary::after {
    background:linear-gradient(180deg,#2fc5ff,#7b53ff)!important;
  }

  /* SVG-mask icons — no Unicode glyphs. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a::before,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary::before {
    content:""!important;
    position:absolute!important;
    left:15px!important;
    top:50%!important;
    width:18px!important;
    height:18px!important;
    transform:translateY(-50%)!important;
    background:linear-gradient(145deg,#eef3f8,#98a7b9)!important;
    opacity:.82!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
    -webkit-mask-position:center!important;
    mask-position:center!important;
    -webkit-mask-size:contain!important;
    mask-size:contain!important;
  }
  /* Product: cube */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(1) > summary::before {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='m4.5 7.8 7.5 4.1 7.5-4.1M12 12v9'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9L12 3Z'/%3E%3Cpath d='m4.5 7.8 7.5 4.1 7.5-4.1M12 12v9'/%3E%3C/svg%3E")!important;
    background:linear-gradient(145deg,#f046c6,#2fc5ff)!important;
  }
  /* Cases: stacked window */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(2)::before {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='5' width='16' height='13' rx='2'/%3E%3Cpath d='M7 9h10M7 13h6'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='4' y='5' width='16' height='13' rx='2'/%3E%3Cpath d='M7 9h10M7 13h6'/%3E%3C/svg%3E")!important;
    background:#61cfff!important;
  }
  /* Blog: document */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(3) > summary::before {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h5M9 12h6M9 16h6'/%3E%3C/svg%3E")!important;
    background:linear-gradient(145deg,#9f7cff,#f046c6)!important;
  }
  /* Partners: link */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(4)::before {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M10.5 13.5 13.5 10.5M8.5 15.5l-1.2 1.2a3.2 3.2 0 0 1-4.5-4.5l3-3a3.2 3.2 0 0 1 4.5 0M15.5 8.5l1.2-1.2a3.2 3.2 0 0 1 4.5 4.5l-3 3a3.2 3.2 0 0 1-4.5 0'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M10.5 13.5 13.5 10.5M8.5 15.5l-1.2 1.2a3.2 3.2 0 0 1-4.5-4.5l3-3a3.2 3.2 0 0 1 4.5 0M15.5 8.5l1.2-1.2a3.2 3.2 0 0 1 4.5 4.5l-3 3a3.2 3.2 0 0 1-4.5 0'/%3E%3C/svg%3E")!important;
    background:#f1a05a!important;
  }
  /* About: compass/ring */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > :nth-child(5) > summary::before {
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E")!important;
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E")!important;
    background:linear-gradient(145deg,#52d4ff,#8d6cff)!important;
  }

  /* Open/active rows get a subtle titanium lift, not a bright slab. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog[open] > summary,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a.is-active {
    background:
      radial-gradient(circle at 15% 0%,rgba(255,255,255,.08),transparent 45%),
      linear-gradient(145deg,rgba(55,63,75,.75),rgba(17,22,29,.98))!important;
  }

  /* Nested items now read as compact rows inside the parent section. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog-list {
    gap:4px!important;
    padding:5px 2px 0 10px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav .soul-header__mobile-blog-list a {
    min-height:38px!important;
    padding:0 12px!important;
    border-radius:11px!important;
    font-size:12.4px!important;
    font-weight:550!important;
    background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  }

  /* Lighter single-layer page veil. */
  html body.home-demo-page header.soul-header:has(.soul-header__mobile-panel:not([hidden]))::before {
    background:rgba(4,7,11,.28)!important;
    backdrop-filter:blur(4px) saturate(.90)!important;
    -webkit-backdrop-filter:blur(4px) saturate(.90)!important;
  }
}

@media (max-width: 380px) {
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__inner {
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    top:62px!important;
    max-height:calc(100dvh - 72px)!important;
    padding:8px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary {
    min-height:44px!important;
    padding-left:42px!important;
    font-size:13.7px!important;
  }
}

/* =========================================================
   4.18.50 - DEMO3 mobile menu color system + system header height.
   Only /demo3 smartphone header/menu. Desktop/tablet untouched.
   System mobile header contract from components/header.css:
   inner min-height 58px, symbol 34px, outer padding 8px 14px.
   ========================================================= */
@media (max-width: 820px) {
  /* Restore exact shared mobile header geometry used across the site. */
  html body.home-demo-page header.soul-header[data-site-header] {
    padding:8px 14px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-scrolled .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-fixed .soul-header__inner {
    width:100%!important;
    height:auto!important;
    min-height:58px!important;
    max-height:none!important;
    padding-left:16px!important;
    padding-right:16px!important;
    border-radius:24px!important;
    gap:16px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__brand {
    gap:9px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__symbol {
    width:34px!important;
    height:34px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__word {
    font-size:.92rem!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__burger {
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    border-radius:15px!important;
  }

  /* Panel follows the normal header instead of a page-specific hardcoded y. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    top:calc(100% + 8px)!important;
    max-height:calc(100dvh - 94px)!important;
  }

  /* Product: fuchsia -> orange -> green -> cyan. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(1) > summary::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(1) > summary::before {
    background:linear-gradient(145deg,#F046C6 0%,#F09548 34%,#78DA65 67%,#2FC5FF 100%)!important;
    opacity:.96!important;
  }

  /* Cases: palette from cases.css (NKO / business / experts / future). */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(2)::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(2)::before,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(3) > summary::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(3) > summary::before {
    background:linear-gradient(145deg,#844BD2 0%,#F29154 34%,#74AF54 67%,#4D86C8 100%)!important;
    opacity:.94!important;
  }

  /* Partners: CLUB family palette. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(4)::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(4)::before {
    background:linear-gradient(145deg,#7B53FF 0%,#F046C6 34%,#315BFF 67%,#27D5D8 100%)!important;
    opacity:.96!important;
  }

  /* About: warm golden titanium derived from about.css. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(5) > summary::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(5) > summary::before {
    background:linear-gradient(145deg,#F6F4EE 0%,#D6D0C6 34%,#B19A72 67%,#746A5B 100%)!important;
    opacity:.92!important;
  }

  /* Nested Product items - exact product identity borders. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-product--web {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(28,35,44,.965),rgba(9,14,20,.99)) padding-box,
      linear-gradient(105deg,#B9F1FF 0%,#70D8FF 24%,#39AEE9 52%,#87E5FF 76%,#D4F8FF 100%) border-box!important;
    color:#F4FBFF!important;
    -webkit-text-fill-color:#F4FBFF!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 18px rgba(65,185,235,.055)!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-product--flow {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(34,27,36,.975),rgba(13,13,18,.995)) padding-box,
      linear-gradient(105deg,#FF91DE 0%,#F046C6 28%,#C02CA7 58%,#F55CCF 78%,#FFB3E9 100%) border-box!important;
    color:#FFF3FC!important;
    -webkit-text-fill-color:#FFF3FC!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 18px rgba(240,70,198,.05)!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list .soul-header__mobile-about--lab {
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,rgba(30,34,41,.975),rgba(10,13,18,.995)) padding-box,
      linear-gradient(105deg,#F046C6 0%,#F09548 34%,#78DA65 67%,#2FC5FF 100%) border-box!important;
    color:#F8FAFC!important;
    -webkit-text-fill-color:#F8FAFC!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 18px rgba(80,180,220,.045)!important;
  }
}

/* Keep the same shared header height even on narrow smartphones. */
@media (max-width: 380px) {
  html body.home-demo-page header.soul-header[data-site-header] {
    padding:8px 14px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-scrolled .soul-header__inner,
  html body.home-demo-page header.soul-header[data-site-header].is-fixed .soul-header__inner {
    height:auto!important;
    min-height:58px!important;
    max-height:none!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel {
    top:calc(100% + 8px)!important;
    max-height:calc(100dvh - 94px)!important;
  }
}

/* =========================================================
   4.18.51 - exact mobile menu border selectors + CASES neutral titanium.
   Smartphone only. Corrects 4.18.50 selector collisions with header-menu-accents.css.
   ========================================================= */
@media (max-width: 820px) {
  /* Exact neutral graphite titanium from CASES LIST header family.
     Used for Cases + Blog identity rail/icons and Blog nested rows. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(2)::before,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(2)::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(3) > summary::before,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(3) > summary::after {
    background:linear-gradient(
      145deg,
      rgb(255,255,255) 0%,
      rgb(239,242,243) 24%,
      rgb(205,212,216) 52%,
      rgb(154,164,172) 72%,
      rgb(246,248,248) 100%
    )!important;
    opacity:.96!important;
  }

  /* Blog nested rows: same graphite / neutral titanium family as cases header. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > :nth-child(3) .soul-header__mobile-blog-list > a {
    position:relative!important;
    border:1px solid rgba(150,158,166,.42)!important;
    background:
      radial-gradient(circle at 20% 0%,rgba(255,255,255,.10),transparent 46%),
      linear-gradient(145deg,rgba(42,48,57,.92),rgba(18,22,28,.985))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      inset 0 -1px 0 rgba(80,88,96,.20),
      0 0 0 1px rgba(255,255,255,.018)!important;
  }

  /* Real markup selectors from includes/header.php.
     Border is drawn in ::after so base border declarations cannot suppress it. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--web,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--flow,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-about--lab {
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    border:0!important;
    background:linear-gradient(145deg,rgba(39,45,54,.96),rgba(12,16,21,.995))!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  }

  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--web::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--flow::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-about--lab::after {
    content:""!important;
    position:absolute!important;
    inset:0!important;
    border-radius:inherit!important;
    padding:1.5px!important;
    pointer-events:none!important;
    z-index:2!important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
    -webkit-mask-composite:xor!important;
    mask-composite:exclude!important;
  }

  /* SOULU WEB - sky blue titanium shimmer. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--web::after {
    background:linear-gradient(105deg,#d9f9ff 0%,#8be6ff 18%,#46bce9 40%,#238dcc 58%,#83ddff 78%,#e3fbff 100%)!important;
  }

  /* SOULU FLOW NKO - pink/fuchsia titanium shimmer. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--flow::after {
    background:linear-gradient(105deg,#ffb7e9 0%,#ff6fd1 20%,#f046c6 43%,#b91aa9 64%,#f75dcb 82%,#ffd0f2 100%)!important;
  }

  /* Laboratory - four-color brand shimmer: fuchsia -> orange -> green -> cyan. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-about--lab::after {
    background:linear-gradient(105deg,#f046c6 0%,#f09548 34%,#78da65 67%,#2fc5ff 100%)!important;
  }

  /* Keep text above the border layer. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--web > *,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--flow > *,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-about--lab > * {
    position:relative!important;
    z-index:3!important;
  }
}

/* =========================================================
   4.18.52 - thinner menu accents + darker global menu veil.
   Smartphone only. Keeps the menu composition and page content unchanged.
   ========================================================= */
@media (max-width: 820px) {
  /* General menu cards: make the neutral titanium outline subtler. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog > summary {
    border-width:.6px!important;
  }

  /* Slim identity rail. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav > a::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog > summary::after {
    width:1px!important;
    opacity:.72!important;
  }

  /* Nested rows: thinner neutral outline. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-nav .soul-header__mobile-blog-list a {
    border-width:.6px!important;
  }

  /* WEB / FLOW NKO / Laboratory identity border: reduce from 1.5px to .75px. */
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--web::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-product--flow::after,
  html body.home-demo-page header.soul-header[data-site-header]
  .soul-header__mobile-blog-list > a.soul-header__mobile-about--lab::after {
    padding:.75px!important;
  }

  /* Dark, single-layer backdrop when the mobile menu is open.
     The DOM itself is not filtered; only this fixed veil uses blur. */
  html body.home-demo-page header.soul-header:has(.soul-header__mobile-panel:not([hidden]))::before {
    background:rgba(2,4,8,.56)!important;
    backdrop-filter:blur(10px) saturate(.72) brightness(.72)!important;
    -webkit-backdrop-filter:blur(10px) saturate(.72) brightness(.72)!important;
  }
}

/* =========================================================
   4.18.53 — TRUE FULL-VIEWPORT MOBILE MENU BACKDROP
   Dedicated sibling layer outside header stacking-context.
   Smartphone only. Menu itself stays sharp and readable.
   ========================================================= */
@media (max-width: 820px) {
  /* Disable the old header pseudo veil: on iOS Safari it is trapped by the
     header stacking context and does not reliably cover the whole document. */
  html body.home-demo-page header.soul-header:has(.soul-header__mobile-panel:not([hidden]))::before {
    content:none!important;
    display:none!important;
  }

  html body.home-demo-page .d3app-mobile-menu-backdrop {
    position:fixed!important;
    inset:0!important;
    z-index:9990!important;
    display:block!important;
    pointer-events:none!important;
    opacity:0!important;
    visibility:hidden!important;
    background:
      radial-gradient(52% 30% at 10% 6%, rgba(240,70,198,.10) 0%, rgba(240,70,198,0) 72%),
      radial-gradient(46% 28% at 90% 8%, rgba(47,197,255,.09) 0%, rgba(47,197,255,0) 74%),
      linear-gradient(180deg, rgba(2,4,8,.56) 0%, rgba(2,4,8,.68) 46%, rgba(1,3,6,.76) 100%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(.68) brightness(.62)!important;
    backdrop-filter:blur(18px) saturate(.68) brightness(.62)!important;
    transition:opacity .18s ease,visibility 0s linear .18s!important;
    transform:translateZ(0)!important;
    will-change:opacity!important;
  }

  html body.home-demo-page:has(header.soul-header .soul-header__mobile-panel:not([hidden])) .d3app-mobile-menu-backdrop {
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:opacity .18s ease,visibility 0s!important;
  }

  /* Keep the header capsule and opened panel above the dedicated backdrop. */
  html body.home-demo-page:has(header.soul-header .soul-header__mobile-panel:not([hidden])) header.soul-header[data-site-header] {
    position:relative!important;
    z-index:10002!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel:not([hidden]) {
    z-index:10003!important;
    isolation:isolate!important;
    box-shadow:
      0 28px 62px rgba(0,0,0,.58),
      0 10px 26px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.075),
      inset 0 -1px 0 rgba(0,0,0,.46)!important;
  }

  /* Slightly increase menu-text contrast against the darker background. */
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav > a,
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-blog > summary {
    color:#f2f5f8!important;
    text-shadow:0 1px 0 rgba(0,0,0,.55)!important;
  }
  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-nav .soul-header__mobile-blog-list a {
    color:rgba(239,243,247,.88)!important;
  }
}

/* =========================================================
   4.18.54 — MENU BACKDROP STACKING FIX
   Keep the site header fixed while the full-screen veil is active.
   ========================================================= */
@media (max-width: 820px) {
  html body.home-demo-page:has(header.soul-header .soul-header__mobile-panel:not([hidden])) header.soul-header[data-site-header] {
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:10020!important;
  }

  html body.home-demo-page:has(header.soul-header .soul-header__mobile-panel:not([hidden])) header.soul-header[data-site-header] .soul-header__inner {
    position:relative!important;
    z-index:10021!important;
  }

  html body.home-demo-page header.soul-header[data-site-header] .soul-header__mobile-panel:not([hidden]) {
    position:absolute!important;
    z-index:10022!important;
  }

  html body.home-demo-page .d3app-mobile-menu-backdrop {
    z-index:9990!important;
  }
}

/* 4.18.55 — Contact CTA edge exactly follows demo3 header palette. */
@media (max-width:820px){
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"],
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:hover,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:focus,
  body.home-demo-page #contact #demo-form .hd-form__actions button[type="submit"]:active{
    border:1px solid transparent!important;
    background:
      linear-gradient(145deg,#9ea4ab 0%,#d4d8dc 20%,#f2f4f6 42%,#b2b7bd 61%,#e1e4e7 80%,#9299a2 100%) padding-box,
      linear-gradient(90deg,#F046C6 0%,#F09548 34%,#78DA65 67%,#2FC5FF 100%) border-box!important;
    color:#0a0d11!important;
    -webkit-text-fill-color:#0a0d11!important;
  }
}

/* =========================================================
   4.18.56 — CLUB mobile CTA = desktop button treatment.
   Smartphone only. Uses the exact desktop visual language:
   graphite gradient, neutral edge, white label, soft inner light.
   ========================================================= */
@media (max-width:767px){
  body.home-demo-page #soulu-club .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{
    margin-top:auto!important;
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:16px!important;
    text-decoration:none!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:700!important;
    color:rgba(255,255,255,.94)!important;
    background:linear-gradient(145deg,rgba(40,45,57,.98),rgba(17,22,32,.98))!important;
    border:1px solid rgba(255,255,255,.10)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22)!important;
    text-shadow:none!important;
  }
}


/* =========================================================
   4.18.57 — CLUB mobile cards = desktop visual system.
   Smartphone only. Full card surface, metallic tags, role edge and CTA.
   ========================================================= */
@media (max-width:767px){
  body.home-demo-page #soulu-club .club-dark-card{
    position:relative!important;
    overflow:hidden!important;
    background:
      radial-gradient(120% 120% at 0% 0%,rgba(255,255,255,.075),transparent 38%),
      radial-gradient(90% 90% at 100% 100%,rgba(50,63,110,.09),transparent 46%),
      repeating-linear-gradient(118deg,rgba(255,255,255,.010) 0 1px,transparent 1px 18px),
      linear-gradient(160deg,rgba(19,21,29,.985),rgba(22,23,31,.985) 44%,rgba(12,13,19,.995))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.105),
      inset 0 -1px 0 rgba(0,0,0,.34),
      0 18px 38px rgba(5,8,15,.18)!important;
  }

  body.home-demo-page #soulu-club .club-dark-card--violet{
    border:1.25px solid rgba(123,47,247,.92)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.105),
      0 18px 38px rgba(5,8,15,.18),
      0 0 22px rgba(123,47,247,.09)!important;
  }
  body.home-demo-page #soulu-club .club-dark-card--fuchsia{
    border:1.25px solid rgba(232,62,173,.92)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.105),
      0 18px 38px rgba(5,8,15,.18),
      0 0 22px rgba(232,62,173,.085)!important;
  }
  body.home-demo-page #soulu-club .club-dark-card--cyan{
    border:1.25px solid rgba(35,201,216,.92)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.105),
      0 18px 38px rgba(5,8,15,.18),
      0 0 22px rgba(35,201,216,.085)!important;
  }

  body.home-demo-page #soulu-club .club-card-tags{
    gap:6px!important;
    margin-bottom:14px!important;
  }
  body.home-demo-page #soulu-club .club-card-tags span{
    min-height:27px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    color:#343941!important;
    -webkit-text-fill-color:#343941!important;
    font-weight:700!important;
    background:
      linear-gradient(145deg,#c8ccd1 0%,#f4f5f6 23%,#aeb3ba 48%,#e7e9eb 72%,#a0a6ae 100%)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.90),
      inset 0 -1px 0 rgba(61,68,78,.20),
      0 3px 8px rgba(0,0,0,.14)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.48)!important;
  }

  body.home-demo-page #soulu-club .club-dark-card h3{
    color:#f7f9fc!important;
  }
  body.home-demo-page #soulu-club .club-dark-card p,
  body.home-demo-page #soulu-club .club-dark-card li{
    color:rgba(239,243,249,.78)!important;
  }

  body.home-demo-page #soulu-club .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{
    margin-top:auto!important;
    min-height:50px!important;
    border-radius:16px!important;
    color:#171a20!important;
    -webkit-text-fill-color:#171a20!important;
    font-weight:800!important;
    background:
      radial-gradient(circle at 18% 5%,rgba(255,255,255,.78),transparent 26%),
      linear-gradient(145deg,#777d86 0%,#c6cbd0 22%,#8d939b 44%,#d7dadd 68%,#686e77 100%)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -1px 0 rgba(15,18,24,.34),
      0 8px 20px rgba(0,0,0,.22)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.34)!important;
  }
  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn{
    border:1.25px solid rgba(123,47,247,.95)!important;
  }
  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn{
    border:1.25px solid rgba(232,62,173,.95)!important;
  }
  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{
    border:1.25px solid rgba(35,201,216,.95)!important;
  }
}


/* =========================================================
   4.18.58 — CLUB mobile Подробнее = permanent desktop hover state.
   Keeps the full 4.18.57 card system, changes CTA only.
   ========================================================= */
@media (max-width:767px){
  body.home-demo-page #soulu-club .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn,
  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{
    margin-top:auto!important;
    min-height:50px!important;
    border-radius:16px!important;
    color:rgba(255,255,255,.94)!important;
    -webkit-text-fill-color:rgba(255,255,255,.94)!important;
    font-weight:700!important;
    background:linear-gradient(145deg,rgba(40,45,57,.98),rgba(17,22,32,.98))!important;
    border:1px solid transparent!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22)!important;
    text-shadow:none!important;
    transform:translateY(-1px)!important;
  }

  body.home-demo-page #soulu-club .club-dark-card--violet .club-card-btn{
    border-color:#7B2FF7!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22),
      0 0 18px rgba(123,47,247,.22)!important;
  }

  body.home-demo-page #soulu-club .club-dark-card--fuchsia .club-card-btn{
    border-color:#E83EAD!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22),
      0 0 18px rgba(232,62,173,.22)!important;
  }

  body.home-demo-page #soulu-club .club-dark-card--cyan .club-card-btn{
    border-color:#23C9D8!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 18px rgba(0,0,0,.22),
      0 0 18px rgba(35,201,216,.20)!important;
  }
}


/* =========================================================
   4.18.77 — INTRO SCROLL HINT / SAFARI VISIBLE VIEWPORT
   Smartphones only. Keep the intro/presenter geometry frozen,
   but anchor the "ЛИСТАЙТЕ ВНИЗ" cue to Safari's real visible
   viewport edge so the bottom browser toolbar never covers it.
   ========================================================= */
@media (max-width: 767.98px) {
  body.home-demo-page .d3app-intro__scroll {
    top: calc(var(--d3app-progress-bottom-y, 100dvh) - 92px) !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
  }
}