/* Four-phase explorer. Built from the Cloud Migrations page, 2 October 2026.
   Off-palette values from the source are mapped to theme tokens. */
.db-journey{margin-top:clamp(42px,5vw,66px);border:1px solid rgba(60,95,172,.16);border-radius:26px;background:linear-gradient(145deg,#fff,var(--stone));padding:clamp(24px,3vw,38px);overflow:hidden}
.db-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 0 30px}
.db-track-line{position:absolute;left:7%;right:7%;bottom:13px;height:2px;background:rgba(60,95,172,.14);overflow:hidden;border-radius:99px}
.db-track-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--mid),var(--deep));transition:width .55s var(--ease)}
.db-journey[data-active="01"] .db-track-line span{width:0}
.db-journey[data-active="02"] .db-track-line span{width:33.333%}
.db-journey[data-active="03"] .db-track-line span{width:66.666%}
.db-journey[data-active="04"] .db-track-line span{width:100%}
.db-tab{position:relative;background:transparent;border:0;color:var(--lt-mut);display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 8px;font-family:var(--head)}
.db-tab:after{content:"";position:absolute;bottom:-23px;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--lt-line);transition:.35s;z-index:2}
.db-tab span{font-size:15px;color:var(--mid);font-weight:700}
.db-tab b{font-size:18px}
.db-tab.is-active{color:var(--deep)}
.db-tab.is-active:after{background:var(--mid);border-color:var(--mid);box-shadow:0 0 0 8px rgba(90,45,145,.08)}
.db-stage-shell{display:grid;grid-template-columns:minmax(360px,.95fr) minmax(0,1.05fr);gap:clamp(34px,5vw,72px);align-items:center;padding-top:34px}
.db-visual{position:relative;min-height:430px;border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 46%,rgba(90,45,145,.09),transparent 38%),var(--stone);border:1px solid rgba(60,95,172,.14)}
.db-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(38,66,149,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(38,66,149,.05) 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.db-vstage{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.db-vstage.is-active{opacity:1;transform:scale(1)}
.db-foundation{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:72%;display:flex;flex-direction:column-reverse;gap:10px}
.db-foundation span{height:58px;border:1px solid rgba(60,95,172,.19);background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--deep);font:800 16px var(--head);box-shadow:0 16px 30px -28px rgba(0,24,68,.6)}
.db-foundation span:last-child{background:linear-gradient(90deg,rgba(38,66,149,.08),rgba(90,45,145,.1))}
.db-shield{position:absolute;right:12%;top:12%;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font:900 25px var(--head);box-shadow:0 0 0 10px rgba(38,66,149,.08)}
.db-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;height:280px;border:1px solid rgba(90,45,145,.25);border-radius:50%;animation:dbSpin 18s linear infinite}
.db-orbit:after{content:"";position:absolute;inset:42px;border:1px dashed rgba(38,66,149,.2);border-radius:50%}
.db-orbit b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:var(--deep);color:#fff;font:900 22px var(--head)}
.db-orbit span{position:absolute;background:#fff;border:1px solid rgba(60,95,172,.22);border-radius:999px;padding:9px 13px;color:var(--deep);font:800 15px var(--head)}
.db-orbit span:nth-child(1){left:50%;top:-17px;transform:translateX(-50%)}
.db-orbit span:nth-child(2){right:-24px;top:50%;transform:translateY(-50%)}
.db-orbit span:nth-child(3){left:50%;bottom:-17px;transform:translateX(-50%)}
.db-orbit span:nth-child(4){left:-22px;top:50%;transform:translateY(-50%)}
.db-orbit b{animation:dbUprightC 18s linear infinite}
.db-orbit span:nth-child(odd){animation:dbUprightX 18s linear infinite}
.db-orbit span:nth-child(even){animation:dbUprightY 18s linear infinite}
.db-copy-stage{animation:dbIn .42s var(--ease)}
.db-copy-k{color:var(--mid);font:800 15px var(--head);text-transform:uppercase;letter-spacing:.1em}
.db-copy h3{color:var(--deep);font:900 clamp(28px,3vw,38px)/1.18 var(--head);margin:14px 0 0}
/* The panel is light inside a dark section. theme.css paints .sfc-dark h3 white at
   the same strength as the rule above, so whichever file loaded last decided the
   colour, and in some loads the heading went white on white. This outranks it. */
.sfc-dark .db-copy h3{color:var(--deep)}
.db-copy-stage>p{color:var(--lt-mut);margin-top:14px!important;max-width:64ch}
.db-mini-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.db-mini-steps>div{background:#fff;border:1px solid rgba(60,95,172,.15);border-radius:12px;padding:16px}
.db-mini-steps b{display:block;color:var(--deep);font:800 16px var(--head)}
.db-mini-steps span{display:block;color:var(--lt-mut);font-size:15px;line-height:1.55;margin-top:5px}
.db-outcome{display:flex;gap:10px;align-items:center;color:var(--deep)!important;font-weight:800;margin-top:24px!important}
.db-outcome span{color:var(--mid);font-size:21px}
@media(max-width:980px){.db-stage-shell{grid-template-columns:1fr}.db-visual{min-height:380px}.db-track{overflow-x:auto;grid-template-columns:repeat(4,minmax(150px,1fr))}}
@media(max-width:600px){.db-mini-steps{grid-template-columns:1fr}.db-visual{min-height:330px}.db-tab b{font-size:16px}}
}
@media(prefers-reduced-motion:reduce){.db-orbit,.db-orbit b,.db-orbit span{animation:none}.db-vstage,.db-copy-stage{transition:none;animation:none}}
.db-hint{ display:flex; align-items:center; gap:7px; margin:0 0 14px; font:600 .82rem/1.3 var(--body); color:var(--mid); }
.db-hint svg{ width:18px; height:18px; flex:none; }
.db-track{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0; overflow:visible; }
.db-track-line, .db-tab:after{ display:none; }
.db-tab{ position:relative; overflow:hidden; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:1fr auto; grid-template-areas:"n go" "t t" "o o";
  align-items:start; align-content:start; justify-content:stretch; gap:6px 8px; padding:16px 18px 20px;
  background:#fff; border:1px solid var(--lt-line); border-radius:16px; color:var(--deep);
  font-family:var(--head); transition:transform .2s, border-color .2s, background .25s, color .25s; }
.db-tab span{ grid-area:n; font:600 .75rem/1.4 var(--mono) !important; letter-spacing:.14em; color:var(--mid); }
.db-tab b{ grid-area:t; font:800 clamp(1.05rem,1.4vw,1.2rem)/1.2 var(--head) !important; }
.db-tab em{ grid-area:o; font:600 .86rem/1.4 var(--body); font-style:normal; color:var(--lt-mut); }
.db-go{ grid-area:go; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--lt-line); color:var(--spot); transition:transform .2s, background .2s, border-color .2s; }
.db-go svg{ width:14px; height:14px; }
.db-tab:hover{ transform:translateY(-3px); border-color:var(--mid); }
.db-tab:hover .db-go{ transform:translateX(3px); background:var(--spot); border-color:var(--spot); color:#fff; }
.db-tab:focus-visible{ outline:2px solid var(--spot); outline-offset:3px; }
.db-tab.is-active{ background:var(--deep); border-color:var(--deep); color:#fff; transform:none; }
.db-tab.is-active span{ color:#fff; }
.db-tab.is-active em{ color:hsla(0,0%,100%,.88); }
.db-tab.is-active .db-go{ background:#fff; border-color:#fff; color:var(--deep); transform:rotate(90deg); }
.db-prog{ position:absolute; left:0; right:0; bottom:0; height:4px; }
.db-prog i{ display:block; height:100%; width:0; background:var(--neon); }
.db-journey.is-auto .db-tab.is-active .db-prog i{ animation:dbProg 6.5s linear forwards; }
.db-journey.is-auto:hover .db-prog i{ animation-play-state:paused; }
@media (max-width:760px){.db-track{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.db-tab{ padding:14px 14px 18px; }}
@media (prefers-reduced-motion:reduce){.db-tab, .db-go{ transition:none; }.db-prog{ display:none; }}
@keyframes dbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* The ring turns; its labels ride round it but stay upright. Each counter-spin
   repeats the element's own positioning transform, so it turns in place. */
@keyframes dbUprightC{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes dbUprightX{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(-360deg)}}
@keyframes dbUprightY{from{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(-360deg)}}
@keyframes dbIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dbProg{ to{ width:100%; } }

/* ── Assess: four inputs feed one business case ─────────────────────────────
   Data runs along four lines into the card, which fills row by row (inventory,
   waves, TCO) and then reads ready for sign-off: the four steps beside it.
   Every distance is a share of the panel, so it holds from 230px to 700px.
   Animations run only on the active phase, so each restarts when opened. */
.db-visual{container-type:inline-size}
.as-in{position:absolute;left:6%;right:42%;top:15%;bottom:15%;display:grid;grid-template-rows:repeat(4,1fr);align-items:center}
.as-r{display:flex;align-items:center;min-width:0}
.as-chip{flex:none;position:relative;z-index:2;background:#fff;border:1px solid rgba(60,95,172,.2);border-radius:999px;padding:9px 14px;font:800 14px/1 var(--head);color:var(--deep);box-shadow:0 14px 28px -24px rgba(0,24,68,.6);white-space:nowrap}
.as-r i{flex:1;position:relative;display:block;height:0;min-width:16px;border-top:1.5px dashed rgba(90,45,145,.35)}
.as-r i:after{content:"";position:absolute;top:-4.75px;left:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--purple);box-shadow:0 0 0 4px rgba(90,45,145,.14);opacity:0}
.vs01.is-active .as-r i:after{animation:asDot 7s linear infinite}
.vs01.is-active .as-r:nth-child(2) i:after{animation-delay:.25s}
.vs01.is-active .as-r:nth-child(3) i:after{animation-delay:.5s}
.vs01.is-active .as-r:nth-child(4) i:after{animation-delay:.75s}
.as-doc{position:absolute;right:6%;top:13%;bottom:13%;width:36%;background:#fff;border:1px solid rgba(60,95,172,.2);border-radius:16px;padding:20px 18px;box-shadow:0 28px 54px -38px rgba(0,24,68,.7);display:flex;flex-direction:column;gap:18px;z-index:2}
.as-rows{display:flex;flex-direction:column;gap:16px}
.as-doc b{font:800 15px/1.2 var(--head);color:var(--deep)}
.as-row{display:block}
.as-l{display:block;font:600 11px/1 var(--body);color:var(--lt-mut);letter-spacing:.02em;margin-bottom:6px}
.as-b{display:block;height:8px;border-radius:4px;background:var(--lt-line);position:relative;overflow:hidden}
.as-b:after{content:"";position:absolute;top:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(90deg,var(--mid),var(--purple));transform-origin:left}
.f1 .as-b:after{width:100%}.f2 .as-b:after{width:72%}.f3 .as-b:after{width:86%}.f4 .as-b:after{width:64%}
.vs01.is-active .f1 .as-b:after{animation:asF1 7s ease-out infinite}
.vs01.is-active .f2 .as-b:after{animation:asF2 7s ease-out infinite}
.vs01.is-active .f3 .as-b:after{animation:asF3 7s ease-out infinite}
.vs01.is-active .f4 .as-b:after{animation:asF4 7s ease-out infinite}
.as-ok{margin-top:auto;display:flex;align-items:center;gap:7px;font:800 12px/1.25 var(--head);color:var(--deep)}
.as-ok:before{content:"\2713";flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--neon);color:var(--deep);font:900 11px/1 var(--head)}
.vs01.is-active .as-ok{animation:asOk 7s ease-out infinite}
@keyframes asDot{0%{left:0;opacity:0}3%{opacity:1}17%{left:100%;opacity:1}19%{left:100%;opacity:0}20%{left:0;opacity:0}23%{opacity:1}37%{left:100%;opacity:1}39%{left:100%;opacity:0}40%{left:0;opacity:0}43%{opacity:1}57%{left:100%;opacity:1}59%,100%{left:100%;opacity:0}}
@keyframes asF1{0%,10%{transform:scaleX(0)}24%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes asF2{0%,24%{transform:scaleX(0)}38%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes asF3{0%,38%{transform:scaleX(0)}52%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes asF4{0%,52%{transform:scaleX(0)}64%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
@keyframes asOk{0%,66%{opacity:0;transform:translateY(6px)}72%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}

/* ── Migrate: two waves move from today to AWS, each tested on the way ───────
   Wave 1 (lower-risk workloads) lands first, then wave 2. A tile travels 63% of
   the panel: from just inside the left column to its slot in the right one. */
.mg-col{position:absolute;top:16%;bottom:20%;width:27%;border-radius:16px}
.mg-src{left:5%;background:#fff;border:1px solid rgba(60,95,172,.18)}
.mg-dst{right:5%;background:linear-gradient(160deg,var(--deep),var(--mid));box-shadow:0 24px 44px -30px rgba(0,24,68,.8)}
.mg-h{position:absolute;top:13px;left:0;right:0;text-align:center;font:700 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.mg-dst .mg-h{color:#fff}
.vs03 .r1{top:37%}.vs03 .r2{top:49%}.vs03 .r3{top:61%}.vs03 .r4{top:73%}
.mg-lane{position:absolute;left:32%;right:32%;height:0;border-top:1.5px dashed rgba(90,45,145,.3)}
.mg-gate{position:absolute;left:50%;top:15%;bottom:20%;border-left:1.5px solid rgba(90,45,145,.2)}
.mg-tag{position:absolute;left:50%;top:7%;transform:translateX(-50%);background:#fff;border:1px solid rgba(90,45,145,.25);border-radius:999px;padding:5px 10px;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--purple);white-space:nowrap}
.mg-dot{position:absolute;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid rgba(90,45,145,.35)}
.mg-slot,.mg-wl{position:absolute;width:calc(27% - 16px);height:30px;margin-top:-15px;border-radius:8px;box-sizing:border-box}
.mg-slot{left:calc(68% + 8px);border:1.5px dashed rgba(255,255,255,.32)}
.mg-wl{left:calc(5% + 8px);background:#fff;border:1px solid rgba(60,95,172,.25);color:var(--deep);font:800 13px/28px var(--head);text-align:center;z-index:2;box-shadow:0 10px 20px -16px rgba(0,24,68,.6)}
.vs03.is-active .mg-wl.w1{animation:mgW1 9s cubic-bezier(.45,0,.25,1) infinite}
.vs03.is-active .mg-wl.w2{animation:mgW2 9s cubic-bezier(.45,0,.25,1) infinite}
.vs03.is-active .mg-wl.r2,.vs03.is-active .mg-wl.r4{animation-delay:.2s}
.vs03.is-active .mg-dot.d1{animation:mgD1 9s linear infinite}
.vs03.is-active .mg-dot.d2{animation:mgD2 9s linear infinite}
.mg-status{position:absolute;left:4%;right:4%;bottom:7%;height:18px}
.mg-status span{position:absolute;inset:0;text-align:center;font:700 13px/18px var(--head);color:var(--deep);opacity:0}
.vs03.is-active .mg-status .s1{animation:mgS1 9s linear infinite}
.vs03.is-active .mg-status .s2{animation:mgS2 9s linear infinite}
.vs03.is-active .mg-status .s3{animation:mgS3 9s linear infinite}
@keyframes mgW1{
  0%{opacity:0;transform:none;background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  4%,10%{opacity:1;transform:none;background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  28%{opacity:1;transform:translateX(63cqi);background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  33%,88%{opacity:1;transform:translateX(63cqi);background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
  94%,100%{opacity:0;transform:translateX(63cqi);background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}}
@keyframes mgW2{
  0%{opacity:0;transform:none;background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  4%,40%{opacity:1;transform:none;background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  58%{opacity:1;transform:translateX(63cqi);background:#fff;color:var(--deep);border-color:rgba(60,95,172,.25)}
  63%,88%{opacity:1;transform:translateX(63cqi);background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
  94%,100%{opacity:0;transform:translateX(63cqi);background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}}
@keyframes mgD1{0%,19%{background:#fff;border-color:rgba(90,45,145,.35)}21%,88%{background:var(--neon);border-color:var(--neon)}94%,100%{background:#fff;border-color:rgba(90,45,145,.35)}}
@keyframes mgD2{0%,49%{background:#fff;border-color:rgba(90,45,145,.35)}51%,88%{background:var(--neon);border-color:var(--neon)}94%,100%{background:#fff;border-color:rgba(90,45,145,.35)}}
@keyframes mgS1{0%,3%{opacity:0}6%,32%{opacity:1}35%,100%{opacity:0}}
@keyframes mgS2{0%,35%{opacity:0}38%,62%{opacity:1}65%,100%{opacity:0}}
@keyframes mgS3{0%,65%{opacity:0}68%,88%{opacity:1}92%,100%{opacity:0}}

@media(max-width:600px){
  .as-in{left:5%;right:37%}
  .as-chip{padding:6px 9px;font-size:12px}
  .as-doc{right:5%;width:32%;padding:12px 10px;gap:12px;border-radius:12px}
  .as-rows{gap:10px}
  .as-doc b{font-size:12px}
  .as-l{font-size:10.5px;margin-bottom:4px}
  .as-b{height:6px}
  .as-ok{font-size:11px;gap:5px}
  .as-ok:before{width:14px;height:14px;font-size:9px}
  .mg-h{font-size:10.5px;letter-spacing:.08em;top:10px}
  .mg-slot,.mg-wl{width:calc(27% - 10px);height:26px;margin-top:-13px}
  .mg-slot{left:calc(68% + 5px)}
  .mg-wl{left:calc(5% + 5px);font-size:11px;line-height:24px}
  .mg-tag{font-size:10.5px;padding:4px 8px}
  .mg-status span{font-size:12px}
}
/* The narrowest phones: the card is about 55px inside, so the badge says "Ready". */
@media(max-width:420px){.as-ok-x{display:none}.as-rows{gap:8px}.as-doc{gap:10px}}
/* Reduced motion: the finished picture, nothing moving. */
@media(prefers-reduced-motion:reduce){
  .vs01.is-active .as-r i:after,.vs01.is-active .as-b:after,.vs01.is-active .as-ok,
  .vs03.is-active .mg-wl,.vs03.is-active .mg-dot,.vs03.is-active .mg-status span{animation:none !important}
  .mg-wl{transform:translateX(63cqi);background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.5)}
  .mg-dot{background:var(--neon);border-color:var(--neon)}
  .mg-status .s3{opacity:1}
}

/* ── Windows pictures: Launch, License, Scale, Manage ────────────────────────
   Chosen per phase through the "Picture" field; the migration set keeps its
   position-based default. Each loops on its own while its phase is active,
   sized in container units so it holds from a 230px phone panel up. */
.vs-launch,.vs-license,.vs-scale,.vs-manage{--fs:clamp(10.5px,3.1cqi,13px)}
.vs-launch b,.vs-license b{font-weight:800}

/* Launch: two images produce instances on Amazon EC2 and a database on Amazon RDS. */
.ln-img{position:absolute;left:5%;width:30%;height:22%;display:flex;flex-direction:column;justify-content:center;gap:.35em;padding:0 4cqi;border-radius:12px;
  background:linear-gradient(150deg,var(--deep),var(--mid));color:#fff;box-shadow:0 18px 30px -24px rgba(0,24,68,.8)}
.ln-img b{font:800 var(--fs)/1.15 var(--head)}
.ln-img small{font:700 max(10.5px,calc(var(--fs) * .8))/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--neon)}
.ln-img.i1{top:20%}.ln-img.i2{top:62%}
.ln-path{position:absolute;left:35%;width:12%;height:0;border-top:1.5px dashed rgba(90,45,145,.4)}
.ln-path.p1{top:31%}.ln-path.p2{top:73%}
.ln-path span{position:absolute;top:-1.4cqi;left:0;width:2.6cqi;height:2.6cqi;margin-left:-1.3cqi;border-radius:50%;background:var(--orange);opacity:0}
.ln-box{position:absolute;left:47%;right:5%;background:#fff;border:1px solid rgba(60,95,172,.22);border-radius:14px;box-shadow:0 18px 34px -28px rgba(0,24,68,.6)}
.ln-box.b1{top:8%;height:50%}.ln-box.b2{top:64%;height:28%}
.ln-h{position:absolute;left:5cqi;top:3.4cqi;font:700 max(10.5px,calc(var(--fs) * .82))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.ln-vms{position:absolute;left:5cqi;right:5cqi;top:30%;bottom:28%;display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqi}
.ln-vms i{position:relative;border-radius:8px;background:linear-gradient(160deg,var(--mid),var(--deep));transform:scale(0);opacity:0}
.ln-vms i:after{content:"";position:absolute;left:12%;right:12%;bottom:-2.6cqi;height:1.4cqi;border-radius:2px;background:var(--neon)}
.ln-ebs{position:absolute;left:5cqi;bottom:3.2cqi;font:700 max(10.5px,calc(var(--fs) * .78))/1 var(--mono);letter-spacing:.06em;color:var(--lt-mut)}
.ln-db{position:absolute;left:5cqi;top:44%;width:9cqi;height:9cqi;border-radius:50%/22%;background:linear-gradient(160deg,var(--purple),var(--deep));transform:scale(0);opacity:0}
.vs-launch.is-active .ln-path.p1 span{animation:lnDot1 8s linear infinite}
.vs-launch.is-active .ln-path.p2 span{animation:lnDot2 8s linear infinite}
.vs-launch.is-active .ln-vms .v1{animation:lnV1 8s cubic-bezier(.3,1.5,.5,1) infinite}
.vs-launch.is-active .ln-vms .v2{animation:lnV2 8s cubic-bezier(.3,1.5,.5,1) infinite}
.vs-launch.is-active .ln-vms .v3{animation:lnV3 8s cubic-bezier(.3,1.5,.5,1) infinite}
.vs-launch.is-active .ln-db{animation:lnDb 8s cubic-bezier(.3,1.5,.5,1) infinite}

/* License: one instance, two ways to license it, alternating. */
.lc-opt{position:absolute;top:6%;padding:.55em .9em;border-radius:999px;background:#fff;border:1px solid rgba(60,95,172,.25);font:800 var(--fs)/1 var(--head);color:var(--deep);white-space:nowrap;box-shadow:0 12px 24px -20px rgba(0,24,68,.6)}
.lc-opt.o1{left:5%}.lc-opt.o2{right:5%}
.lc-own{position:absolute;left:5%;top:38%;width:32%;height:40%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;text-align:center;padding:0 3cqi;
  background:#fff;border:1.5px dashed rgba(90,45,145,.35);border-radius:14px;color:var(--purple);opacity:.45}
.lc-own svg{width:7cqi;height:7cqi}
.lc-own small{font:700 max(10.5px,calc(var(--fs) * .85))/1.25 var(--head);color:var(--deep)}
.lc-vm{position:absolute;right:5%;top:30%;width:50%;height:56%;padding:4cqi;border-radius:14px;background:linear-gradient(160deg,var(--deep),var(--mid));color:#fff;box-shadow:0 22px 40px -26px rgba(0,24,68,.85)}
.lc-h{display:block;font:700 max(10.5px,calc(var(--fs) * .8))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--neon)}
.lc-vm b{display:block;margin-top:.8em;font:800 calc(var(--fs) * 1.08)/1.15 var(--head)}
.lc-tag{position:absolute;left:4cqi;right:4cqi;bottom:4cqi;display:flex;align-items:center;gap:.45em;padding:.5em .7em;border-radius:8px;background:rgba(255,255,255,.14);font:700 max(10.5px,calc(var(--fs) * .85))/1.15 var(--head)}
.lc-tag svg{width:1.4em;height:1.4em;flex:none;color:var(--neon)}
.lc-slot{position:absolute;right:4cqi;top:4cqi;width:8cqi;height:8cqi;border-radius:50%;border:1.5px dashed rgba(255,255,255,.45)}
.lc-key{position:absolute;left:calc(21% - 3cqi);top:calc(58% - 3cqi);width:6cqi;height:6cqi;display:grid;place-items:center;border-radius:50%;background:var(--purple);color:#fff;opacity:0}
.lc-key svg{width:70%;height:70%}
.vs-license.is-active .lc-opt.o1{animation:lcO1 8s step-end infinite}
.vs-license.is-active .lc-opt.o2{animation:lcO2 8s step-end infinite}
.vs-license.is-active .lc-tag{animation:lcTag 8s ease infinite}
.vs-license.is-active .lc-own{animation:lcOwn 8s ease infinite}
.vs-license.is-active .lc-key{animation:lcKey 8s cubic-bezier(.45,0,.25,1) infinite}

/* Scale: the instance count follows the traffic line. */
.sc-chart{position:absolute;left:5%;right:5%;top:6%;height:44%;background:#fff;border:1px solid rgba(60,95,172,.22);border-radius:14px;box-shadow:0 18px 34px -28px rgba(0,24,68,.6);overflow:hidden}
.sc-chart svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:72%}
.sc-line{fill:none;stroke:var(--spot);stroke-width:2.4;vector-effect:non-scaling-stroke}
.sc-fill{fill:rgba(60,95,172,.1)}
.sc-h{position:absolute;left:4cqi;top:3.2cqi;font:700 max(10.5px,calc(var(--fs) * .82))/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mid)}
.sc-cursor{position:absolute;top:22%;bottom:0;left:0;width:0;border-left:2px solid var(--orange);opacity:.85}
.sc-group{position:absolute;left:5%;right:5%;top:56%;height:38%;border:1.5px dashed rgba(90,45,145,.35);border-radius:14px;background:rgba(255,255,255,.6)}
.sc-group .sc-h{color:var(--purple)}
.sc-vms{position:absolute;left:4cqi;right:4cqi;top:40%;bottom:16%;display:grid;grid-template-columns:repeat(5,1fr);gap:2.4cqi}
.sc-vms i{border-radius:8px;background:linear-gradient(160deg,var(--mid),var(--deep));transition:opacity .3s}
.sc-vms .x3,.sc-vms .x4,.sc-vms .x5{opacity:.14}
.vs-scale.is-active .sc-cursor{animation:scCur 9s linear infinite}
.vs-scale.is-active .sc-vms .x3{animation:scX3 9s step-end infinite}
.vs-scale.is-active .sc-vms .x4{animation:scX4 9s step-end infinite}
.vs-scale.is-active .sc-vms .x5{animation:scX5 9s step-end infinite}

/* Manage: a rolling upgrade across two zones while everything stays available. */
.mn-az{position:absolute;top:8%;height:58%;width:41%;display:flex;flex-direction:column;gap:3cqi;padding:10cqi 4cqi 4cqi;border:1px solid rgba(60,95,172,.22);border-radius:14px;background:#fff;box-shadow:0 18px 34px -28px rgba(0,24,68,.6)}
.mn-az.a1{left:5%}.mn-az.a2{right:5%}
.mn-h{position:absolute;left:4cqi;right:3cqi;top:3.4cqi;font:700 max(10.5px,calc(var(--fs) * .78))/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mid)}
.mn-vm{position:relative;flex:1;border-radius:8px;background:linear-gradient(160deg,var(--mid),var(--deep));outline:2px solid transparent;outline-offset:2px}
.mn-vm:before{content:"";position:absolute;left:3cqi;top:50%;width:2.2cqi;height:2.2cqi;margin-top:-1.1cqi;border-radius:50%;background:var(--neon);box-shadow:0 0 0 .8cqi rgba(97,212,195,.25)}
.mn-vm span{position:absolute;right:2.6cqi;top:50%;width:6cqi;height:6cqi;margin-top:-3cqi;display:grid;place-items:center;border-radius:50%;opacity:0}
.mn-vm span svg{width:64%;height:64%}
.mn-vm .up{background:var(--orange);color:#fff}
.mn-vm .ok{background:var(--neon);color:var(--deep)}
.mn-ha{position:absolute;left:50%;top:72%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.5em;padding:.5em .9em;border-radius:999px;background:var(--deep);color:#fff;font:800 var(--fs)/1 var(--head);white-space:nowrap}
.mn-ha i{width:.7em;height:.7em;border-radius:50%;background:var(--neon);animation:opLiveDb 1.6s ease-out infinite}
@keyframes opLiveDb{0%{box-shadow:0 0 0 0 rgba(97,212,195,.7)}70%,100%{box-shadow:0 0 0 .7em rgba(97,212,195,0)}}
.mn-status{position:absolute;left:4%;right:4%;bottom:5%;height:1.4em}
.mn-status span{position:absolute;inset:0;text-align:center;font:700 var(--fs)/1.4 var(--head);color:var(--deep);opacity:0}
.vs-manage.is-active .mn-status .s1{animation:mnS1 10s step-end infinite}
.vs-manage.is-active .mn-status .s2{animation:mnS2 10s step-end infinite}
.vs-manage.is-active .mn-vm.m1{animation:mnRing1 10s step-end infinite}
.vs-manage.is-active .mn-vm.m1 .up{animation:mnUp1 10s linear infinite}
.vs-manage.is-active .mn-vm.m1 .ok{animation:mnOk1 10s step-end infinite}
.vs-manage.is-active .mn-vm.m2{animation:mnRing2 10s step-end infinite}
.vs-manage.is-active .mn-vm.m2 .up{animation:mnUp2 10s linear infinite}
.vs-manage.is-active .mn-vm.m2 .ok{animation:mnOk2 10s step-end infinite}
.vs-manage.is-active .mn-vm.m3{animation:mnRing3 10s step-end infinite}
.vs-manage.is-active .mn-vm.m3 .up{animation:mnUp3 10s linear infinite}
.vs-manage.is-active .mn-vm.m3 .ok{animation:mnOk3 10s step-end infinite}
.vs-manage.is-active .mn-vm.m4{animation:mnRing4 10s step-end infinite}
.vs-manage.is-active .mn-vm.m4 .up{animation:mnUp4 10s linear infinite}
.vs-manage.is-active .mn-vm.m4 .ok{animation:mnOk4 10s step-end infinite}
@keyframes lnDot1{0%,4%{left:0;opacity:0}6%{opacity:1}18%{left:100%;opacity:1}20%{left:100%;opacity:0}21%{left:0;opacity:0}24%{opacity:1}36%{left:100%;opacity:1}38%{left:100%;opacity:0}39%{left:0;opacity:0}42%{opacity:1}54%{left:100%;opacity:1}56%,100%{left:100%;opacity:0}}
@keyframes lnDot2{0%,62%{left:0;opacity:0}64%{opacity:1}76%{left:100%;opacity:1}78%,100%{left:100%;opacity:0}}
@keyframes lnV1{0%,20%{transform:scale(0);opacity:0}25%,90%{transform:scale(1);opacity:1}97%,100%{transform:scale(1);opacity:0}}
@keyframes lnV2{0%,38%{transform:scale(0);opacity:0}43%,90%{transform:scale(1);opacity:1}97%,100%{transform:scale(1);opacity:0}}
@keyframes lnV3{0%,56%{transform:scale(0);opacity:0}61%,90%{transform:scale(1);opacity:1}97%,100%{transform:scale(1);opacity:0}}
@keyframes lnDb{0%,78%{transform:scale(0);opacity:0}83%,90%{transform:scale(1);opacity:1}97%,100%{transform:scale(1);opacity:0}}
@keyframes lcO1{0%{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 0 0 5px rgba(38,66,149,.12)}50%{background:#fff;border-color:rgba(60,95,172,.25);color:var(--deep);box-shadow:none}100%{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 0 0 5px rgba(38,66,149,.12)}}
@keyframes lcO2{0%{background:#fff;border-color:rgba(60,95,172,.25);color:var(--deep);box-shadow:none}50%{background:var(--deep);border-color:var(--deep);color:#fff;box-shadow:0 0 0 5px rgba(38,66,149,.12)}100%{background:#fff;border-color:rgba(60,95,172,.25);color:var(--deep);box-shadow:none}}
@keyframes lcTag{0%,44%{opacity:1;transform:none}50%,94%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes lcOwn{0%,48%{opacity:.45;border-color:rgba(90,45,145,.35)}52%,94%{opacity:1;border-color:var(--purple)}100%{opacity:.45}}
@keyframes lcKey{0%,54%{left:calc(21% - 3cqi);top:calc(58% - 3cqi);opacity:0}57%{left:calc(21% - 3cqi);top:calc(58% - 3cqi);opacity:1}72%,94%{left:calc(87% - 3cqi);top:calc(30% + 5cqi);opacity:1}98%,100%{left:calc(87% - 3cqi);top:calc(30% + 5cqi);opacity:0}}
@keyframes scCur{0%{left:0}100%{left:100%}}
@keyframes scX3{0%{opacity:.14}16%{opacity:1}74%{opacity:.14}}
@keyframes scX4{0%{opacity:.14}24%{opacity:1}66%{opacity:.14}}
@keyframes scX5{0%{opacity:.14}32%{opacity:1}58%{opacity:.14}}
@keyframes mnUp1{0%,4%{opacity:0}5%,18%{opacity:1;transform:rotate(360deg)}19%,100%{opacity:0}}
@keyframes mnOk1{0%,18%{opacity:0}20%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes mnRing1{0%,4%{outline-color:transparent}5%,18%{outline-color:var(--orange)}19%,100%{outline-color:transparent}}
@keyframes mnUp2{0%,22%{opacity:0}23%,36%{opacity:1;transform:rotate(360deg)}37%,100%{opacity:0}}
@keyframes mnOk2{0%,36%{opacity:0}38%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes mnRing2{0%,22%{outline-color:transparent}23%,36%{outline-color:var(--orange)}37%,100%{outline-color:transparent}}
@keyframes mnUp3{0%,40%{opacity:0}41%,54%{opacity:1;transform:rotate(360deg)}55%,100%{opacity:0}}
@keyframes mnOk3{0%,54%{opacity:0}56%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes mnRing3{0%,40%{outline-color:transparent}41%,54%{outline-color:var(--orange)}55%,100%{outline-color:transparent}}
@keyframes mnUp4{0%,58%{opacity:0}59%,72%{opacity:1;transform:rotate(360deg)}73%,100%{opacity:0}}
@keyframes mnOk4{0%,72%{opacity:0}74%,95%{opacity:1}98%,100%{opacity:0}}
@keyframes mnRing4{0%,58%{outline-color:transparent}59%,72%{outline-color:var(--orange)}73%,100%{outline-color:transparent}}
@keyframes mnS1{0%{opacity:1}76%{opacity:0}99%{opacity:1}}
@keyframes mnS2{0%{opacity:0}76%{opacity:1}99%{opacity:0}}
@media(max-width:600px){.lc-opt{padding:.5em .7em}.mn-h{letter-spacing:.03em}}
/* Five phases: five across on desktop, three on tablet, two on phones. */
@media(min-width:1100px){.db-track:has(> button:nth-of-type(5)){grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:761px) and (max-width:1099px){.db-track:has(> button:nth-of-type(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Reduced motion: the finished picture, nothing moving. */
@media(prefers-reduced-motion:reduce){
  .vs-launch *,.vs-license *,.vs-scale *,.vs-manage *{animation:none !important}
  .ln-vms i,.ln-db{transform:none;opacity:1}
  .lc-opt.o1{background:var(--deep);border-color:var(--deep);color:#fff}
  .sc-vms .x3,.sc-vms .x4{opacity:1}
  .mn-vm .ok,.mn-status .s2{opacity:1}
}