/* MU Lab — Service Journey V2 */
.service-journey-v2 .journey-grid{
  align-items:stretch;
}
.service-journey-v2 .journey-card{
  display:flex;
  flex-direction:column;
  min-height:440px;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}
.service-journey-v2 .journey-card:hover{
  transform:translateY(-4px);
  border-color:rgba(124,92,255,.45);
  box-shadow:0 16px 40px rgba(9,12,25,.28), 0 0 0 1px rgba(124,92,255,.12) inset;
}
.service-journey-v2 .journey-index{
  transition:opacity .24s ease, transform .24s ease, color .24s ease;
}
.service-journey-v2 .journey-card:hover .journey-index{
  opacity:.36;
  transform:translateY(-1px);
  color:#9d88ff;
}

.service-journey-v2 .journey-copy{
  margin-bottom:18px;
}
.service-journey-v2 .journey-copy p{
  max-width:38ch;
}
.service-journey-v2 .journey-options{
  margin-top:auto;
}
.service-journey-v2 .journey-meta{
  margin-top:auto;
  padding-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#8b95a5;
  font-size:14px;
  line-height:1.55;
}
.service-journey-v2 .journey-meta strong{
  color:#f6f8fd;
  font:700 28px/1 "Space Grotesk", sans-serif;
  letter-spacing:-.04em;
}
.service-journey-v2 .journey-meta span{
  color:#8b95a5;
  font-size:13px;
  line-height:1.45;
}

.service-journey-v2 .journey-cta{
  margin-top:22px;
  transition:
    background .24s ease,
    border-color .24s ease,
    color .24s ease,
    box-shadow .24s ease,
    transform .24s ease;
}

.service-journey-v2 .journey-card .journey-cta{
  background:rgba(255,255,255,.025) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  color:#f5f7fb !important;
  box-shadow:none !important;
}
.service-journey-v2 .featured-journey .journey-cta{
  background:linear-gradient(135deg,#7c5cff 0%,#6e58ff 42%,#8d7fff 100%) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:0 16px 36px rgba(115,89,255,.30) !important;
}
.service-journey-v2 .journey-grid:hover .featured-journey .journey-cta{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(255,255,255,.09) !important;
  color:#f5f7fb !important;
  box-shadow:none !important;
}
.service-journey-v2 .journey-grid:hover .journey-card:hover .journey-cta,
.service-journey-v2 .journey-grid:hover .featured-journey:hover .journey-cta{
  background:linear-gradient(135deg,#7c5cff 0%,#6e58ff 42%,#8d7fff 100%) !important;
  border-color:transparent !important;
  color:#ffffff !important;
  box-shadow:0 16px 36px rgba(115,89,255,.30) !important;
  transform:translateY(-1px);
}
.service-journey-v2 .journey-card .journey-cta:hover{
  transform:translateY(-1px);
}

.service-journey-v2 .journey-helpbar{
  align-items:center;
  gap:20px;
}
.service-journey-v2 .journey-helpbar strong{
  display:block;
  margin-bottom:6px;
}
.service-journey-v2 .journey-helpbar span{
  display:block;
}
.service-journey-v2 .journey-help-cta{
  flex:0 0 auto;
  min-width:176px;
  justify-content:center;
  background:linear-gradient(135deg,#7c5cff 0%,#6e58ff 42%,#8d7fff 100%) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(115,89,255,.26) !important;
  transition:transform .24s ease, box-shadow .24s ease, filter .24s ease;
}
.service-journey-v2 .journey-help-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 42px rgba(115,89,255,.32) !important;
  filter:brightness(1.03);
}

.service-journey-v2 .journey-options div{
  align-items:center;
}
.service-journey-v2 .journey-options span{
  white-space:nowrap;
}
.service-journey-v2 .journey-icon{
  transition:transform .24s ease, filter .24s ease;
}
.service-journey-v2 .journey-card:hover .journey-icon{
  transform:translateY(-1px) scale(1.04);
  filter:drop-shadow(0 8px 18px rgba(124,92,255,.14));
}

@media (max-width: 900px){
  .service-journey-v2 .journey-card{
    min-height:unset;
  }
}


/* =========================================================
   MU LAB — SERVICE JOURNEY PREMIUM PASS
   ========================================================= */

.service-journey-v2{
  position:relative;
  overflow:hidden;
}
.service-journey-v2::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 16% 11%, rgba(124,92,255,.065), transparent 24%),
    radial-gradient(circle at 87% 58%, rgba(78,199,255,.022), transparent 26%);
}
.service-journey-v2 > .container{
  position:relative;
  z-index:1;
}

/* Card construction */
.service-journey-v2 .journey-card{
  isolation:isolate;
  overflow:hidden;
  border-color:rgba(255,255,255,.075);
  background:
    linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.028),
    0 14px 34px rgba(0,0,0,.08);
}
.service-journey-v2 .journey-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:0;
  background:
    radial-gradient(circle at 20% 0%,rgba(124,92,255,.13),transparent 34%),
    linear-gradient(145deg,rgba(124,92,255,.045),transparent 47%);
  transition:opacity .28s ease;
}
.service-journey-v2 .journey-card::after{
  content:"";
  position:absolute;
  left:-20%;
  top:-45%;
  width:62%;
  height:95%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    112deg,
    transparent 20%,
    rgba(255,255,255,.045) 48%,
    transparent 74%
  );
  transform:translateX(-120%) rotate(8deg);
  transition:transform .72s cubic-bezier(.2,.65,.3,1);
}
.service-journey-v2 .journey-card:hover::before{
  opacity:1;
}
.service-journey-v2 .journey-card:hover::after{
  transform:translateX(250%) rotate(8deg);
}
.service-journey-v2 .journey-card:hover{
  transform:translateY(-6px);
  border-color:rgba(139,119,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 24px 56px rgba(0,0,0,.25),
    0 0 0 1px rgba(124,92,255,.075);
}

/* Default hero card feels premium even without hover */
.service-journey-v2 .featured-journey{
  background:
    radial-gradient(circle at 95% 0%,rgba(124,92,255,.11),transparent 33%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.013));
  border-color:rgba(124,92,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 18px 46px rgba(57,39,145,.11);
}

/* Custom premium icons */
.journey-icon-premium{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid rgba(145,126,255,.15);
  border-radius:14px;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.09),transparent 35%),
    linear-gradient(145deg,rgba(124,92,255,.13),rgba(68,51,145,.045));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.12);
}
.ji-glyph{
  position:relative;
  width:24px;
  height:24px;
  display:block;
}
.ji-glyph i,.ji-glyph b,.ji-glyph em{
  position:absolute;
  display:block;
  box-sizing:border-box;
  font-style:normal;
}

/* Server rack */
.ji-server i{
  left:3px;
  width:18px;
  height:5px;
  border:1.5px solid #b7acff;
  border-radius:2px;
  background:rgba(124,92,255,.08);
}
.ji-server i:nth-child(1){top:3px}
.ji-server i:nth-child(2){top:10px}
.ji-server i:nth-child(3){top:17px}
.ji-server i::after{
  content:"";
  position:absolute;
  right:2px;
  top:1px;
  width:2px;height:2px;border-radius:50%;
  background:#5ce5aa;
  box-shadow:0 0 5px rgba(92,229,170,.55);
}

/* Config sliders */
.ji-config::before,.ji-config::after,.ji-config i{
  content:"";
  position:absolute;
  left:3px;
  right:3px;
  height:1.5px;
  background:#b7acff;
}
.ji-config::before{top:6px}
.ji-config i{top:12px}
.ji-config::after{top:18px}
.ji-config b,.ji-config em,.ji-config span{
  position:absolute;
}
.ji-config b{
  width:5px;height:5px;border-radius:50%;
  background:#8d7fff;top:3.8px;left:7px;
}
.ji-config em{
  width:5px;height:5px;border-radius:50%;
  background:#8d7fff;top:9.8px;right:7px;
}
.ji-config i::after{
  content:"";
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:#8d7fff;top:3.2px;left:6px;
}

/* Balance */
.ji-balance i,.ji-balance b{
  width:2px;
  height:22px;
  top:1px;
  left:11px;
  border-radius:2px;
  background:#b7acff;
}
.ji-balance i{transform:rotate(42deg)}
.ji-balance b{transform:rotate(-42deg)}
.ji-balance::after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  left:9.5px;top:9.5px;
  border-radius:50%;
  background:#8d7fff;
  box-shadow:0 0 7px rgba(141,127,255,.45);
}

/* Shield */
.ji-shield{
  border:1.6px solid #b7acff;
  border-radius:10px 10px 12px 12px;
  clip-path:polygon(50% 0,90% 14%,84% 68%,50% 100%,16% 68%,10% 14%);
}
.ji-shield i{
  width:6px;height:10px;
  border-right:1.5px solid #5ce5aa;
  border-bottom:1.5px solid #5ce5aa;
  transform:rotate(42deg);
  left:8px;top:5px;
}

/* Management wrench-ish */
.ji-management i{
  width:18px;height:5px;
  border:1.5px solid #b7acff;
  border-radius:4px;
  transform:rotate(-42deg);
  left:3px;top:10px;
}
.ji-management b{
  width:7px;height:7px;
  border:1.5px solid #8d7fff;
  border-radius:50%;
  left:2px;top:15px;
}

/* Ads megaphone */
.ji-ads i{
  width:16px;height:12px;
  border:1.5px solid #b7acff;
  clip-path:polygon(0 25%,100% 0,100% 100%,0 75%);
  left:2px;top:5px;
}
.ji-ads b{
  width:5px;height:9px;
  background:#8d7fff;
  transform:rotate(-14deg);
  left:7px;top:14px;
  border-radius:1px;
}

/* Interactive copy */
.service-journey-v2 .journey-kicker{
  transition:color .24s ease, letter-spacing .24s ease;
}
.service-journey-v2 .journey-card:hover .journey-kicker{
  color:#aa9cff;
  letter-spacing:.17em;
}
.service-journey-v2 .journey-card h3{
  transition:transform .24s ease,color .24s ease;
}
.service-journey-v2 .journey-card:hover h3{
  transform:translateX(2px);
  color:#fff;
}
.service-journey-v2 .journey-options span{
  transition:color .24s ease,text-shadow .24s ease,transform .24s ease;
}
.service-journey-v2 .journey-card:hover .journey-options span{
  color:#b6a9ff;
  text-shadow:0 0 12px rgba(124,92,255,.22);
}

/* Better button presence */
.service-journey-v2 .journey-cta{
  min-height:49px;
  border-radius:12px !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}
.service-journey-v2 .journey-cta::after{
  content:"→";
  display:inline-block;
  margin-left:8px;
  opacity:0;
  transform:translateX(-5px);
  transition:opacity .22s ease,transform .22s ease;
}
.service-journey-v2 .journey-card:hover .journey-cta::after{
  opacity:1;
  transform:translateX(0);
}

/* Help bar as a proper conversion moment */
.journey-helpbar-premium{
  position:relative;
  overflow:hidden;
  padding:18px 20px !important;
  background:
    radial-gradient(circle at 85% 50%,rgba(124,92,255,.08),transparent 24%),
    rgba(255,255,255,.018) !important;
}
.journey-helpbar-premium::before{
  content:"";
  position:absolute;
  left:0;top:18%;bottom:18%;
  width:2px;
  border-radius:3px;
  background:linear-gradient(180deg,#8d7fff,#54d7ff);
  box-shadow:0 0 12px rgba(124,92,255,.32);
}

/* Scroll reveal — CSS starts safe; JS opts in. */
.journey-reveal{
  opacity:1;
  transform:none;
}
.js-journey-animate .journey-reveal{
  opacity:0;
  transform:translateY(18px) scale(.992);
}
.js-journey-animate .journey-reveal.is-visible{
  animation:journeyReveal .72s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes journeyReveal{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .service-journey-v2 .journey-card,
  .service-journey-v2 .journey-icon,
  .service-journey-v2 .journey-cta{
    transition:none !important;
  }
  .js-journey-animate .journey-reveal{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}


/* =========================================================
   MU LAB — SERVICE PRICING REFINEMENT
   ========================================================= */

/* Do not let simple-price cards create a large dead zone.
   The price stays near the CTA as a compact reference block. */
.service-journey-v2 .journey-meta-compact{
  margin-top:auto;
  min-height:auto;
  padding:15px 0 4px;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.055);
}

.service-journey-v2 .journey-meta-compact strong{
  color:#f7f8fc;
  font:700 23px/1 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
}

.service-journey-v2 .journey-meta-compact span{
  color:#8793a4;
  font-size:11px;
  line-height:1.35;
}

/* Character Balance now follows the same compare-row language
   as Server Setup and Server Configuration. */
.service-journey-v2 .journey-balance-options{
  margin-top:auto;
  margin-bottom:0;
}

.service-journey-v2 .journey-balance-options div{
  min-height:38px;
}

.service-journey-v2 .journey-balance-options span{
  color:#9d8dff;
  font-weight:800;
}

.service-journey-v2 .journey-note{
  min-height:30px;
  margin-top:8px;
  color:#778497;
  font-size:10px;
  line-height:1.45;
}

/* Fix CTA text contrast in final help bar.
   Old generic journey-helpbar span rules were overriding it. */
.service-journey-v2 .journey-helpbar .journey-help-cta,
.service-journey-v2 .journey-helpbar .journey-help-cta span,
.service-journey-v2 .journey-helpbar .journey-help-cta .journey-i18n{
  color:#ffffff !important;
}

.service-journey-v2 .journey-helpbar .journey-help-cta span{
  margin:0 !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1 !important;
}

.service-journey-v2 .journey-help-cta{
  min-height:47px;
  padding-inline:24px !important;
}

/* Keep bottom CTAs aligned while avoiding oversized empty interiors. */
.service-journey-v2 .journey-card{
  min-height:420px;
}