/* "Already invested? Build on it." Vanilla Cloud base + Plus layers */
.b2{overflow:hidden}
.b2-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px}
.b2-hc{display:grid;gap:18px;max-width:980px}
.b2-hc .h-1{color:#fff}
.b2-hc .lede{max-width:62ch}
.b2-in{display:grid;grid-template-columns:minmax(250px,.5fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(8px,2vw,24px)}
.b2-steps{list-style:none;margin:6px 0 0;padding:0;border-top:1px solid rgba(169,194,238,.12)}
.b2-steps li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid rgba(169,194,238,.12)}
.b2-steps b{font:600 13px/1.6 var(--f-display);letter-spacing:.12em;color:#6F93DA}
.b2-steps span{font-size:15px;line-height:1.55;color:var(--t-mid)}
.b2-steps strong{display:block;font:600 17px/1.3 var(--f-display);color:#fff;margin-bottom:3px}
.b2-toggle{position:relative;flex:none;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(169,194,238,.16)}
.b2-toggle button{position:relative;z-index:1;padding:10px 20px;border-radius:999px;font:700 14px/1 var(--f-display);color:var(--t-mid);transition:color .35s;white-space:nowrap}
.b2-toggle button[aria-pressed="true"]{color:#0B1430}
.b2-toggle::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(135deg,#B8EB4F,#74C22D);transition:transform .5s var(--ease)}
.b2.is-plus .b2-toggle::before{transform:translateX(100%)}
.b2-toggle button:focus-visible{outline:2px solid #A9C2EE;outline-offset:2px}

/* stage: fixed 760x560 design, scaled to fit by ba2.js */
.b2-vis{min-width:0}
.b2-scene{position:relative;width:100%;max-width:1000px;aspect-ratio:800/540;margin:0 auto}
.b2-stage{position:absolute;left:50%;top:0;width:760px;height:560px;margin-left:calc(-380px * var(--s,1));transform-origin:top left;transform:scale(var(--s,1))}
.b2-glow{position:absolute;left:150px;top:120px;width:420px;height:400px;border-radius:50%;background:radial-gradient(closest-side,rgba(60,99,184,.42),transparent);transition:background .8s}
.b2.is-plus .b2-glow{background:radial-gradient(closest-side,rgba(60,99,184,.45),rgba(30,156,107,.16) 60%,transparent)}
.b2-iso{position:absolute;left:360px;top:400px;width:0;height:0;transform-style:preserve-3d;transform:rotateX(58deg) rotateZ(-45deg)}
.b2-l{position:absolute;left:-120px;top:-120px;width:240px;height:240px;border-radius:24px;transform-style:preserve-3d;transform:translateZ(var(--z,0))}
.b2-l::before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateZ(-8px);background:var(--edge,#0A1230)}
/* Vanilla Cloud base: solid navy slabs, lighter towards the top */
.b2-l.b{background:linear-gradient(135deg,color-mix(in srgb,#3C63B8 calc(var(--t) * 100%),#16264F),#101C42 75%);border:1px solid rgba(169,194,238,.32);--edge:#0A1433;box-shadow:0 30px 40px -24px rgba(0,0,0,.6)}
.b2-l.b[style*="--i:0"]{box-shadow:0 60px 80px -20px rgba(0,0,0,.7)}
.b2-logo{position:absolute;left:50%;top:50%;width:132px;height:auto;transform:translate(-50%,-50%) rotate(45deg) scaleY(1.15);opacity:.95}
/* Plus glass layers */
.b2-l.p{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 16%,transparent),color-mix(in srgb,var(--c) 3%,transparent) 60%);border:1.5px solid var(--c);--edge:color-mix(in srgb,var(--c) 22%,transparent);box-shadow:0 0 24px -8px color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 20px -6px color-mix(in srgb,var(--c) 45%,transparent);opacity:0;transform:translateZ(calc(var(--z) + 190px));transition:transform .75s cubic-bezier(.22,1.2,.36,1),opacity .45s ease;transition-delay:calc((5 - var(--i)) * 60ms)}
.b2.is-plus .b2-l.p{opacity:1;transform:translateZ(var(--z));transition-delay:calc(var(--i) * 190ms + 150ms)}
.b2-ic{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--c) 30%,#0B1430);color:#fff;border:1px solid var(--c)}
.b2-ic .ic{width:17px;height:17px}
.b2-plus{position:absolute;left:336px;top:78px;width:48px;height:48px;opacity:0;transform:translateY(-30px) scale(.4) rotate(-90deg);transition:all .6s cubic-bezier(.34,1.6,.5,1);filter:drop-shadow(0 0 14px rgba(146,214,60,.7))}
.b2.is-plus .b2-plus{opacity:1;transform:none;transition-delay:1.45s}
.b2-plus::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px solid #92D63C;opacity:0}
.b2.is-plus .b2-plus::after{animation:b2ring 1.2s ease-out 1.7s}
@keyframes b2ring{0%{opacity:.9;transform:scale(.5)}100%{opacity:0;transform:scale(2)}}
/* labels */
.b2-labels{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.b2-lab{position:absolute;top:var(--y);display:flex;align-items:center;gap:8px;transform:translateY(-50%);font:600 14px/1 var(--f-display);white-space:nowrap}
.b2-lab.l{right:calc(760px - 196px);color:#DCE5F6}
.b2-lab.l i{width:22px;height:1.5px;background:linear-gradient(90deg,rgba(169,194,238,.6),transparent)}
.b2-lab.l span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:#A9C2EE;margin-left:8px;vertical-align:1px}
.b2-lab.r{left:528px;color:#fff}
.b2-lab.r i{width:22px;height:1.5px;background:linear-gradient(90deg,transparent,var(--c))}
.b2-lab.r span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin-right:8px;box-shadow:0 0 8px var(--c);vertical-align:1px}
.b2-lab em{display:inline-flex;color:#92D63C}
.b2-lab .ck{width:15px;height:15px}
.b2-grp{position:absolute;top:var(--y);display:grid;gap:4px;font:600 12px/1.2 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:#8EA5D1}
.b2-grp b{font-size:15px;letter-spacing:0;text-transform:none;color:#fff}
.b2-grp.l{right:calc(760px - 166px);text-align:right}
.b2-grp.r{left:558px}
.b2-grp.r b{color:#B8EB4F}
.b2-lab.p,.b2-grp.p{opacity:0;transform:translate(14px,-50%);transition:all .5s var(--ease);transition-delay:0s}
.b2-grp.p{transform:translate(14px,0)}
.b2.is-plus .b2-lab.p{opacity:1;transform:translateY(-50%);transition-delay:calc(var(--i) * 190ms + 500ms)}
.b2.is-plus .b2-grp.p{opacity:1;transform:none;transition-delay:1.7s}
/* mobile legend replaces side labels */
.b2-legend{display:none}
@media (max-width:1023px){.b2-in{grid-template-columns:1fr}.b2-vis{order:-1}.b2-steps{max-width:640px}}
@media (max-width:640px){
  .b2-labels{display:none}
  .b2-scene{aspect-ratio:auto;height:calc(560px * var(--s,1))}
  .b2-stage{left:50%;margin-left:calc(-380px * var(--s,1))}
  .b2-legend{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:6px}
  .b2-legend b{display:block;font:600 15px/1.2 var(--f-display);color:#fff;margin-bottom:8px}
  .b2-legend .pl b{color:#B8EB4F}
  .b2-legend ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
  .b2-legend li{font-size:14px;line-height:1.3;color:#DCE5F6;padding-left:14px;position:relative}
  .b2-legend li::before{content:"";position:absolute;left:0;top:.45em;width:7px;height:7px;border-radius:2px;background:#A9C2EE}
  .b2-legend .pl li::before{border-radius:50%;background:var(--c)}
  .b2-legend .pl li{opacity:.35;transition:opacity .5s}
  .b2.is-plus .b2-legend .pl li{opacity:1}
}
@media (prefers-reduced-motion:reduce){.b2 *,.b2 *::before,.b2 *::after{transition:none !important;animation:none !important}}

@media (min-width:1200px){.b2-vis{margin-right:calc(-1 * clamp(0px,3vw,56px))}}
@media (min-width:1366px){.b2-vis{transform:translateX(clamp(0px,2.5vw,48px))}}

/* toggle states. iOS Safari ignores opacity on 3D layers, so hidden Plus parts also use visibility */
.b2-l.p,.b2-plus,.b2-lab.p,.b2-grp.p{visibility:hidden}
.b2-l.p{transition-property:transform,opacity,visibility}
.b2.is-plus .b2-l.p,.b2.is-plus .b2-plus,.b2.is-plus .b2-lab.p,.b2.is-plus .b2-grp.p{visibility:visible}
.b2.is-pre .b2-l.p,.b2.is-pre .b2-lab.p,.b2.is-pre .b2-grp.p,.b2.is-pre .b2-plus,.b2.is-pre .b2-legend .pl li{transition:none !important}
@media (max-width:640px){
  .b2-legend .pl li{opacity:.18}
  .b2.is-plus .b2-legend .pl li{opacity:1}
}
/* m-floor:start (generated by scripts/gen_mfloor.py) */
@media (max-width:760px){.b2-steps b{font-size:max(14px, 13px)}.b2-grp{font-size:max(14px, 12px)}}
/* m-floor:end */
