/* HUMAN MAXIMUS V155 — FINAL MOBILE CTA SYSTEM
   One clean source of truth for the two hero actions.
   No inherited legacy hero-button classes are used. */

/* Desktop: premium horizontal pair, compact and controlled. */
.hmc-v155-cta-stack{
  width:min(980px,calc(100% - 32px));
  margin:18px auto 26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.hmc-v155-cta{
  position:relative;
  min-height:82px;
  padding:14px 52px 14px 16px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:15px;
  overflow:hidden;
  border:1px solid rgba(231,211,249,.70);
  border-radius:22px;
  color:#fff;
  text-decoration:none;
  text-align:left;
  cursor:pointer;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  isolation:isolate;
  box-shadow:
    0 18px 36px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -16px 28px rgba(0,0,0,.24);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
}
.hmc-v155-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.025) 40%,transparent 62%),
    repeating-linear-gradient(135deg,transparent 0 28px,rgba(255,255,255,.018) 29px 30px);
}
.hmc-v155-start{
  background:
    radial-gradient(circle at 14% 10%,rgba(223,177,255,.28),transparent 30%),
    linear-gradient(145deg,#5b2683 0%,#2a1139 52%,#0b0610 100%);
}
.hmc-v155-play{
  background:
    radial-gradient(circle at 14% 10%,rgba(232,194,255,.32),transparent 30%),
    linear-gradient(145deg,#7c35b9 0%,#431767 52%,#14071f 100%);
}
.hmc-v155-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid rgba(250,242,255,.82);
  border-radius:50%;
  color:#fff;
  background:
    radial-gradient(circle at 35% 25%,#e4c2ff 0 4%,#9a4fda 16%,#54207e 48%,#12071a 78%,#050307 100%);
  box-shadow:
    0 0 0 3px rgba(86,31,123,.42),
    0 0 22px rgba(171,79,234,.38),
    inset 0 2px 1px rgba(255,255,255,.50),
    inset 0 -11px 16px rgba(0,0,0,.44);
  font-size:20px;
  line-height:1;
}
.hmc-v155-label{
  min-width:0;
  color:#fff;
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.05;
  font-weight:950;
  letter-spacing:.012em;
  white-space:normal;
  text-wrap:balance;
  text-shadow:0 2px 9px rgba(0,0,0,.38);
}
.hmc-v155-chevron{
  position:absolute;
  right:15px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(230,203,250,.32);
  border-radius:50%;
  color:#f0d8ff;
  background:rgba(5,3,8,.38);
  font-size:22px;
}
.hmc-v155-cta:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    0 22px 42px rgba(0,0,0,.52),
    0 0 22px rgba(158,67,220,.20),
    inset 0 1px rgba(255,255,255,.22);
}
.hmc-v155-cta:active{
  transform:scale(.985);
  filter:brightness(.96);
}
.hmc-v155-cta:focus-visible{
  outline:3px solid rgba(207,151,248,.76);
  outline-offset:3px;
}

/* Mobile quick actions remain hidden unless the controller removes [hidden]. */
.mobile-conversion-grid[hidden]{
  display:none!important;
}

@media(max-width:700px){
  .hmc-v155-cta-stack{
    width:calc(100% - 24px);
    max-width:520px;
    margin:14px auto 24px;
    grid-template-columns:1fr;
    gap:10px;
  }

  .hmc-v155-cta{
    min-height:68px;
    padding:9px 40px 9px 11px;
    grid-template-columns:44px minmax(0,1fr);
    gap:11px;
    border-radius:18px;
    border-color:rgba(238,218,255,.72);
    box-shadow:
      0 12px 24px rgba(0,0,0,.50),
      0 0 0 1px rgba(88,33,124,.32),
      inset 0 1px rgba(255,255,255,.17),
      inset 0 -12px 20px rgba(0,0,0,.22);
  }

  .hmc-v155-start{
    background:
      radial-gradient(circle at 13% 10%,rgba(229,189,255,.30),transparent 29%),
      linear-gradient(145deg,#693098 0%,#351448 52%,#0c0611 100%);
  }

  .hmc-v155-play{
    background:
      radial-gradient(circle at 13% 10%,rgba(238,207,255,.32),transparent 29%),
      linear-gradient(145deg,#853ec2 0%,#4a1a70 52%,#160821 100%);
  }

  .hmc-v155-icon{
    width:42px;
    height:42px;
    font-size:17px;
    box-shadow:
      0 0 0 2px rgba(87,31,125,.38),
      0 0 16px rgba(174,79,237,.32),
      inset 0 2px 1px rgba(255,255,255,.44),
      inset 0 -9px 13px rgba(0,0,0,.42);
  }

  .hmc-v155-label{
    font-size:clamp(15px,4.4vw,18px);
    line-height:1.04;
    color:#fff!important;
  }

  .hmc-v155-chevron{
    right:9px;
    width:23px;
    height:23px;
    font-size:18px;
  }

  .mobile-conversion-grid:not([hidden]){
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    padding:9px 10px 10px!important;
    background:linear-gradient(180deg,#120b18,#050307)!important;
    border-bottom:1px solid rgba(219,188,247,.22)!important;
    position:relative!important;
    z-index:52!important;
  }

  .mobile-conversion-grid:not([hidden])>*{
    min-width:0!important;
    min-height:52px!important;
    padding:8px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    border:1px solid rgba(228,205,249,.46)!important;
    border-radius:14px!important;
    color:#fff!important;
    text-decoration:none!important;
    background:linear-gradient(180deg,#261431,#0b0710)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 15px rgba(0,0,0,.28)!important;
    font:900 10px/1 Inter,system-ui,sans-serif!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }

  .mobile-conversion-grid:not([hidden])>*>span{
    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    border:1px solid rgba(239,218,255,.46)!important;
    color:#f1d7ff!important;
  }

  .mobile-start-free-clean{
    background:linear-gradient(180deg,#61298b,#2b103b)!important;
    border-color:rgba(240,222,255,.78)!important;
  }
}

@media(max-width:390px){
  .hmc-v155-cta-stack{
    width:calc(100% - 18px);
    gap:8px;
  }
  .hmc-v155-cta{
    min-height:64px;
    padding:8px 36px 8px 9px;
    grid-template-columns:40px minmax(0,1fr);
    gap:9px;
  }
  .hmc-v155-icon{
    width:38px;
    height:38px;
    font-size:15px;
  }
  .hmc-v155-label{
    font-size:14px;
  }
}