/* Recodet V89 — quieter, clearer Guest / Member access screen. */
#viewSubscription.onboardingScreen{
  width:min(100%,660px)!important;
  margin:0 auto!important;
  padding:clamp(12px,3vw,24px) 0 calc(28px + env(safe-area-inset-bottom,0px))!important;
}

#viewSubscription .memberAccessCard{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:640px!important;
  margin:0 auto!important;
  padding:clamp(20px,4vw,28px)!important;
  overflow:hidden!important;
  border:1px solid rgba(231,186,67,.22)!important;
  border-radius:24px!important;
  color:#f7f3e8!important;
  background:
    radial-gradient(110% 72% at 50% -18%,rgba(231,186,67,.11),transparent 58%),
    linear-gradient(165deg,#15130f 0%,#090907 68%,#070706 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,246,210,.045),
    0 24px 58px rgba(0,0,0,.34)!important;
}

#viewSubscription .startupProgress{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:24px!important;
  margin:0 0 18px!important;
  padding:0!important;
  color:#8f8059!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.1em!important;
  text-transform:uppercase!important;
}
#viewSubscription .startupProgress b{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:50px!important;
  min-height:26px!important;
  padding:5px 10px!important;
  border:1px solid rgba(231,186,67,.18)!important;
  border-radius:999px!important;
  color:#e9c75f!important;
  background:rgba(231,186,67,.07)!important;
  font-size:12px!important;
  letter-spacing:.06em!important;
}

#viewSubscription .memberAccessHeading{
  display:grid!important;
  gap:8px!important;
  margin:0 0 18px!important;
}
#viewSubscription .memberAccessHeading strong{
  color:#fffaf0!important;
  font-size:clamp(26px,5vw,32px)!important;
  font-weight:800!important;
  line-height:1.08!important;
  letter-spacing:-.035em!important;
}
#viewSubscription .memberAccessHeading small{
  max-width:510px!important;
  margin:0!important;
  color:#aaa18f!important;
  font-size:16px!important;
  line-height:1.5!important;
}

#viewSubscription .memberAccessNotice{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 18px!important;
  padding:13px 14px!important;
  border:1px solid rgba(231,186,67,.22)!important;
  border-radius:17px!important;
  color:#f4db82!important;
  background:linear-gradient(135deg,rgba(231,186,67,.105),rgba(231,186,67,.035))!important;
  box-shadow:inset 0 1px 0 rgba(255,244,198,.035)!important;
}
#viewSubscription .memberAccessNotice>span{
  display:grid!important;
  place-items:center!important;
  flex:0 0 34px!important;
  width:34px!important;
  height:34px!important;
  border:1px solid rgba(244,211,108,.4)!important;
  border-radius:50%!important;
  color:#161108!important;
  background:linear-gradient(145deg,#f1d36e,#c8951f)!important;
  box-shadow:0 6px 15px rgba(0,0,0,.2)!important;
  font-size:17px!important;
  font-weight:950!important;
}
#viewSubscription .memberAccessNotice p{
  display:grid!important;
  gap:2px!important;
  margin:0!important;
}
#viewSubscription .memberAccessNotice strong{
  color:#f7e6a9!important;
  font-size:15px!important;
  font-weight:850!important;
  line-height:1.25!important;
}
#viewSubscription .memberAccessNotice small{
  color:#a99f8b!important;
  font-size:14px!important;
  line-height:1.35!important;
}

#viewSubscription .memberAccessGrid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
}
#viewSubscription .memberAccessPlan{
  position:relative!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  box-sizing:border-box!important;
  min-height:132px!important;
  padding:17px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:18px!important;
  color:#e7e3d9!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 42%),
    linear-gradient(160deg,#171715,#10100e)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 24px rgba(0,0,0,.22)!important;
  text-align:left!important;
  cursor:pointer!important;
  -webkit-tap-highlight-color:transparent!important;
  transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease,background 180ms ease!important;
}
#viewSubscription .memberAccessPlan::after{display:none!important}
#viewSubscription .memberAccessPlan:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(231,186,67,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 14px 30px rgba(0,0,0,.3)!important;
}
#viewSubscription .memberAccessPlan:active{transform:scale(.985)!important}
#viewSubscription .memberAccessPlan:focus-visible{
  outline:2px solid rgba(244,211,108,.88)!important;
  outline-offset:3px!important;
}
#viewSubscription .memberAccessPlan.active{
  border-color:rgba(231,186,67,.58)!important;
  background:
    radial-gradient(100% 110% at 0% 0%,rgba(231,186,67,.13),transparent 58%),
    linear-gradient(160deg,#1b1811,#100f0c)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,241,184,.06),
    0 0 0 2px rgba(231,186,67,.075),
    0 14px 30px rgba(0,0,0,.28)!important;
}
#viewSubscription .memberAccessPlan:disabled{
  opacity:.56!important;
  filter:saturate(.55)!important;
  cursor:default!important;
}
#viewSubscription .memberAccessPlan:disabled:hover{
  transform:none!important;
  border-color:rgba(255,255,255,.09)!important;
}

#viewSubscription .memberAccessIcon{
  display:grid!important;
  place-items:center!important;
  width:54px!important;
  height:54px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:16px!important;
  color:#d8d2c4!important;
  background:rgba(255,255,255,.045)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#viewSubscription .memberAccessIcon.member{
  border-color:rgba(231,186,67,.18)!important;
  color:#ebc75f!important;
  background:rgba(231,186,67,.075)!important;
}
#viewSubscription .memberAccessIcon svg{
  display:block!important;
  width:28px!important;
  height:28px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#viewSubscription .memberAccessCopy{
  display:grid!important;
  align-content:center!important;
  gap:9px!important;
  min-width:0!important;
}
#viewSubscription .memberAccessPlan .startupPlanTop{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:0!important;
}
#viewSubscription .memberAccessPlan .planTitle{
  color:#fffaf0!important;
  font-size:19px!important;
  font-weight:850!important;
  line-height:1.15!important;
}
#viewSubscription .memberAccessPlan .startupPlanTop>span{
  color:#aa9360!important;
  font-size:11px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}
#viewSubscription .memberAccessPlan .s{
  margin:0!important;
  color:#aaa395!important;
  font-size:14px!important;
  line-height:1.4!important;
}
#viewSubscription .memberAccessPill{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  width:max-content!important;
  min-height:30px!important;
  margin:0!important;
  padding:6px 10px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
#viewSubscription .memberAccessPill.open{
  border-color:rgba(80,190,126,.19)!important;
  color:#8bd5a9!important;
  background:rgba(45,144,87,.1)!important;
}
#viewSubscription .memberAccessPill.login{
  border-color:rgba(231,186,67,.17)!important;
  color:#dfc16e!important;
  background:rgba(231,186,67,.075)!important;
}

#viewSubscription .memberAccessStatus{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  min-height:48px!important;
  margin:16px 0 11px!important;
  padding:11px 14px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:15px!important;
  color:#b9b1a1!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:650!important;
  line-height:1.4!important;
  text-align:center!important;
}
#viewSubscription .memberAccessStatus.success{
  border-color:rgba(72,183,118,.22)!important;
  color:#92d5ac!important;
  background:rgba(35,131,75,.09)!important;
}
#viewSubscription .memberAccessStatus.pending{
  border-color:rgba(231,186,67,.22)!important;
  color:#ddc37a!important;
  background:rgba(231,186,67,.07)!important;
}
#viewSubscription .memberAccessStatus.error{
  border-color:rgba(224,96,82,.25)!important;
  color:#eea198!important;
  background:rgba(180,48,35,.09)!important;
}
#viewSubscription .memberAccessPrimary{
  min-height:56px!important;
  border:1px solid rgba(255,236,164,.2)!important;
  border-radius:16px!important;
  color:#130f07!important;
  background:linear-gradient(135deg,#f0d067 0%,#d3a52d 62%,#bf8d18 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 26px rgba(151,105,10,.2)!important;
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease!important;
}
#viewSubscription .memberAccessPrimary:hover{
  filter:brightness(1.045)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 15px 30px rgba(151,105,10,.24)!important;
}
#viewSubscription .memberAccessPrimary:active{transform:scale(.985)!important}
#viewSubscription .memberAccessPrimary:focus-visible{outline:2px solid #fff0b4!important;outline-offset:3px!important}
#viewSubscription .memberAccessPrimary[disabled]{opacity:.62!important;cursor:wait!important}
#viewSubscription .memberAccessTrust{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:13px 4px 0!important;
  color:#8f887a!important;
  font-size:13px!important;
  line-height:1.4!important;
  text-align:center!important;
}
#viewSubscription .memberAccessTrust>span{color:#cfad4a!important}

@media(max-width:560px){
  #viewSubscription.onboardingScreen{padding-top:10px!important}
  #viewSubscription .memberAccessCard{padding:19px 17px!important;border-radius:22px!important}
  #viewSubscription .startupProgress{margin-bottom:15px!important}
  #viewSubscription .memberAccessHeading{margin-bottom:16px!important}
  #viewSubscription .memberAccessHeading strong{font-size:27px!important}
  #viewSubscription .memberAccessHeading small{font-size:15px!important}
  #viewSubscription .memberAccessNotice{margin-bottom:14px!important;padding:12px 13px!important}
  #viewSubscription .memberAccessGrid{grid-template-columns:1fr!important;gap:11px!important}
  #viewSubscription .memberAccessPlan{min-height:116px!important;padding:15px!important}
  #viewSubscription .memberAccessStatus{margin-top:14px!important}
}

@media(max-width:360px){
  #viewSubscription .memberAccessCard{padding:17px 14px!important}
  #viewSubscription .memberAccessHeading strong{font-size:25px!important}
  #viewSubscription .memberAccessPlan{grid-template-columns:50px minmax(0,1fr)!important;gap:12px!important;padding:14px!important}
  #viewSubscription .memberAccessIcon{width:50px!important;height:50px!important;border-radius:15px!important}
  #viewSubscription .memberAccessPlan .planTitle{font-size:18px!important}
  #viewSubscription .memberAccessPlan .startupPlanTop>span{font-size:10px!important}
}

@media(prefers-reduced-motion:reduce){
  #viewSubscription .memberAccessPlan,
  #viewSubscription .memberAccessPrimary{transition:none!important}
}