/* Exact Option 3 campaign composition — Version 62.
   The selected artwork is preserved at its natural proportions; the working
   authentication panel remains live HTML rather than a flattened screenshot. */

[hidden] { display: none !important; }

body.accessOpen > :not(#accessPortal):not(#verificationOverlay):not(#career-cookie-banner):not(.career-legal-links):not(script) {
  display: none !important;
}

body.accessOpen #accessPortal {
  grid-template-columns: minmax(650px, 65%) minmax(410px, 35%) !important;
  background: #fff !important;
}

body.accessOpen .accessDashboardShowcase {
  order: 1 !important;
  padding: 0 !important;
  background-color: #003b34 !important;
  background-image: none !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
  background-size: auto 100% !important;
}

body.accessOpen .accessDashboardShowcase::before,
body.accessOpen .accessDashboardShowcase::after {
  display: none !important;
}

/* Marketing copy, cards and pricing are already part of the approved visual.
   Hiding the former HTML campaign layer prevents any Version 61 bleed-through. */
body.accessOpen .accessDashboardShowcase > * {
  display: none !important;
}

body.accessOpen .accessPanel {
  order: 2 !important;
  box-sizing: border-box !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: clamp(24px, 3.4vh, 48px) clamp(28px, 3vw, 52px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: linear-gradient(145deg, #fff 0%, #f8fcfa 100%) !important;
  color: #073d35 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(5, 82, 70, .24) transparent;
}

body.accessOpen .accessPanel .accessContent {
  box-sizing: border-box !important;
  width: min(100%, 520px) !important;
  margin: auto auto 20px !important;
  transform: none !important;
}

body.accessOpen .accessPanel .accessTabs,
body.accessOpen .accessPanel.signupActive .accessTabs {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 clamp(24px, 4vh, 44px) !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: #edf5f2 !important;
}

body.accessOpen .accessTabs button {
  min-height: 50px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body.accessOpen .accessTabs button.active {
  background: linear-gradient(135deg, #00564a, #063f37) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 61, 52, .18) !important;
}

body.accessOpen .accessForm.active {
  display: grid !important;
  width: 100% !important;
  gap: clamp(12px, 1.7vh, 18px) !important;
  align-content: center !important;
}

body.accessOpen .accessForm .eyebrow,
body.accessOpen .accessForm h2,
body.accessOpen .accessForm > p {
  text-align: center !important;
}

body.accessOpen .accessForm .eyebrow {
  margin: 0 !important;
  color: #627d76 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 3px !important;
}

body.accessOpen .accessForm h2,
body.accessOpen .accessPanel.signupActive #signUpForm h2 {
  margin: 0 !important;
  color: #063d35 !important;
  font-size: clamp(30px, 2.5vw, 42px) !important;
  line-height: 1.05 !important;
  letter-spacing: -1.6px !important;
  white-space: normal !important;
}

body.accessOpen .accessForm > p:not(.eyebrow) {
  margin: -4px auto 8px !important;
  color: #698079 !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

body.accessOpen .accessForm label {
  gap: 7px !important;
  color: #083e36 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: left !important;
}

body.accessOpen .accessForm input:not([type="checkbox"]) {
  box-sizing: border-box !important;
  min-height: 52px !important;
  padding: 12px 15px !important;
  border: 1px solid #9fb9b1 !important;
  border-radius: 11px !important;
  background: #eef5ff !important;
  color: #082f2a !important;
  font-size: 16px !important;
}

body.accessOpen .accessSubmit {
  min-height: 58px !important;
  padding: 13px 20px !important;
  border: 2px solid #063d35 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #cbff16, #b6f512) !important;
  color: #062f29 !important;
  font-size: 17px !important;
  font-weight: 1000 !important;
  box-shadow: 0 8px 20px rgba(79, 134, 0, .15) !important;
}

body.accessOpen .accessSecurity {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: min(100%, 520px) !important;
  margin: 0 auto !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-left: 5px solid #b9f31b !important;
  border-radius: 12px !important;
  background: #eff7f4 !important;
  text-align: left !important;
}

body.accessOpen .accessSecurity b {
  color: #073d35 !important;
  font-size: 16px !important;
}

body.accessOpen .accessSecurity span {
  color: #60776f !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

body.accessOpen .accessFooter {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: min(100%, 520px) !important;
  margin: 14px auto 0 !important;
  padding-top: 14px !important;
  font-size: 10px !important;
}

body.accessOpen .accessFooter a {
  min-height: 28px !important;
}

body.accessOpen .accessPanel.signupActive .accessContent {
  margin-top: auto !important;
  margin-bottom: 10px !important;
}

body.accessOpen .accessPanel.signupActive .accessForm.active {
  gap: 8px !important;
}

body.accessOpen .accessPanel.signupActive .accessForm h2 {
  font-size: clamp(26px, 2vw, 34px) !important;
}

body.accessOpen .accessPanel.signupActive .accessForm > p:not(.eyebrow) {
  margin-bottom: 2px !important;
  font-size: 13px !important;
}

body.accessOpen .accessPanel.signupActive .accessForm input:not([type="checkbox"]) {
  min-height: 44px !important;
  padding: 9px 12px !important;
}

body.accessOpen .accessPanel.signupActive .checkoutSummary {
  padding: 9px 12px !important;
}

body.accessOpen .accessPanel.signupActive .accessSubmit {
  min-height: 48px !important;
  padding: 10px 16px !important;
}

body.accessOpen .accessPanel.signupActive .demoNote {
  margin: 0 !important;
}

@media (min-width: 1051px) and (max-height: 790px) {
  body.accessOpen .accessPanel { padding-block: 16px !important; }
  body.accessOpen .accessPanel .accessTabs,
  body.accessOpen .accessPanel.signupActive .accessTabs { margin-bottom: 14px !important; }
  body.accessOpen .accessForm.active { gap: 8px !important; }
  body.accessOpen .accessForm h2 { font-size: 29px !important; }
  body.accessOpen .accessForm input:not([type="checkbox"]) { min-height: 44px !important; padding-block: 9px !important; }
  body.accessOpen .accessSubmit { min-height: 49px !important; }
  body.accessOpen .accessSecurity { padding-block: 9px !important; }
  body.accessOpen .accessFooter { margin-top: 8px !important; padding-top: 8px !important; }
}

@media (max-width: 1050px) {
  html.accessLocked,
  html.accessLocked body {
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.accessOpen {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
  }

  body.accessOpen #accessPortal {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow: visible !important;
    flex-direction: column !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  body.accessOpen .accessDashboardShowcase {
    order: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 1088 / 941;
    background-position: left top !important;
    background-size: auto 100% !important;
  }

  body.accessOpen .accessPanel {
    order: 2 !important;
    width: 100% !important;
    min-height: 100svh !important;
    height: auto !important;
    padding-top: max(26px, env(safe-area-inset-top)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    overflow: visible !important;
  }

  body.accessOpen .accessPanel .accessContent,
  body.accessOpen .accessSecurity,
  body.accessOpen .accessFooter {
    width: min(100%, 620px) !important;
  }

  body.accessOpen .accessPanel .accessContent {
    margin: 0 auto 26px !important;
  }

  body.accessOpen .accessPanel .accessTabs,
  body.accessOpen .accessPanel.signupActive .accessTabs {
    margin: 0 0 24px !important;
  }

  body.accessOpen .accessPanel.signupActive .accessContent {
    margin: 0 auto 22px !important;
  }

  body.accessOpen input,
  body.accessOpen select,
  body.accessOpen textarea,
  body.accessOpen button {
    touch-action: manipulation;
  }
}

@media (max-width: 560px) {
  body.accessOpen .accessDashboardShowcase { min-height: 0 !important; }
  body.accessOpen .accessPanel { min-height: auto !important; padding-inline: max(14px, env(safe-area-inset-left)) !important; }
  body.accessOpen .accessForm h2,
  body.accessOpen .accessPanel.signupActive .accessForm h2 { font-size: clamp(28px, 8.8vw, 36px) !important; }
  body.accessOpen .accessTwo { grid-template-columns: 1fr !important; }
  body.accessOpen .accessTabs button { font-size: 15px !important; }
  body.accessOpen .accessFooter nav { gap: 6px 12px !important; }
}

@media (max-width: 1050px) and (orientation: landscape) {
  body.accessOpen .accessDashboardShowcase {
    width: min(100%, 880px) !important;
    align-self: center;
  }
  body.accessOpen .accessPanel { min-height: auto !important; }
}

/* Version 66 — minimal green campaign composition.
   The access screen is live HTML with one functional authentication panel. */
body.accessOpen #accessPortal {
  grid-template-columns: minmax(620px, 64%) minmax(410px, 36%) !important;
}

body.accessOpen .accessDashboardShowcase {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(16px, 2vh, 24px) !important;
  padding: clamp(28px, 4vh, 48px) clamp(34px, 4vw, 74px) !important;
  overflow: hidden !important;
  background-color: #003d35 !important;
  background-image:
    radial-gradient(circle at 82% 20%, rgba(191, 255, 24, .18), transparent 28%),
    radial-gradient(circle at 18% 85%, rgba(0, 99, 83, .72), transparent 36%),
    linear-gradient(135deg, #002d28 0%, #004b40 54%, #00352f 100%) !important;
  background-position: center !important;
  background-size: cover !important;
}

body.accessOpen .accessDashboardShowcase::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .2 !important;
  background-image:
    linear-gradient(rgba(196,255,28,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,255,28,.09) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
  mask-image: linear-gradient(145deg, #000, transparent 74%);
}

body.accessOpen .accessDashboardShowcase::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: -12vw !important;
  bottom: -26vh !important;
  width: 44vw !important;
  height: 58vh !important;
  z-index: -1 !important;
  border: 2px solid rgba(196,255,28,.18) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 80px rgba(196,255,28,.035), 0 0 0 160px rgba(196,255,28,.025) !important;
}

body.accessOpen .accessDashboardShowcase > * {
  display: flex !important;
  position: relative !important;
  z-index: 1 !important;
}

body.accessOpen .accessDashboardShowcase .accessBrand {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 12px 20px 12px 14px !important;
  gap: 13px !important;
  border: 1px solid rgba(196,255,28,.55) !important;
  border-radius: 22px !important;
  background: rgba(0,38,33,.78) !important;
  box-shadow: 0 16px 38px rgba(0,20,17,.25), inset 0 0 0 1px rgba(255,255,255,.05) !important;
  backdrop-filter: blur(12px) !important;
}

body.accessOpen .accessDashboardShowcase .accessBrand img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
}

body.accessOpen .accessDashboardShowcase .accessBrand span {
  display: grid !important;
  gap: 3px !important;
}

body.accessOpen .accessDashboardShowcase .accessBrand strong {
  color: #fff !important;
  font-size: clamp(30px, 2.4vw, 42px) !important;
  line-height: .95 !important;
  letter-spacing: -.8px !important;
}

body.accessOpen .accessDashboardShowcase .accessBrand small {
  color: #c7ff19 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: 3px !important;
}

body.accessOpen .accessDashboardShowcase > .minimalHero {
  box-sizing: border-box !important;
  display: block !important;
  width: min(100%, 880px) !important;
  margin: auto 0 0 !important;
  padding: clamp(24px, 3vh, 34px) clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(196,255,28,.34) !important;
  border-radius: 28px !important;
  background: linear-gradient(145deg, rgba(0,39,34,.94), rgba(0,57,49,.88)) !important;
  box-shadow: 0 24px 62px rgba(0,18,16,.34), inset 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter: blur(14px) !important;
}

body.accessOpen .minimalEyebrow {
  margin: 0 0 16px !important;
  color: #dbeae6 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  letter-spacing: 3px !important;
}

body.accessOpen .minimalHero h1 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(44px, 4.25vw, 72px) !important;
  line-height: .92 !important;
  letter-spacing: -3px !important;
  text-transform: none !important;
  text-wrap: balance !important;
}

body.accessOpen .minimalHero h1 span {
  display: block !important;
  margin-top: 8px !important;
  color: #bfff0b !important;
}

body.accessOpen .minimalLead {
  max-width: 760px !important;
  margin: 18px 0 20px !important;
  color: #dcece8 !important;
  font-size: clamp(15px, 1.25vw, 18px) !important;
  line-height: 1.45 !important;
}

body.accessOpen .minimalFeatures {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 9px !important;
}

body.accessOpen .minimalFeatures span {
  display: grid !important;
  place-items: center !important;
  min-height: 50px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(190,221,213,.28) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  font-size: clamp(11px, .9vw, 13px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

body.accessOpen .accessDashboardShowcase > .minimalPrice {
  box-sizing: border-box !important;
  display: block !important;
  width: min(100%, 650px) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(196,255,28,.62) !important;
  border-radius: 20px !important;
  background: rgba(0,38,33,.88) !important;
  box-shadow: 0 14px 34px rgba(0,18,16,.25) !important;
  transform: none !important;
}

body.accessOpen .minimalPrice > small {
  color: #c7ff19 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  letter-spacing: 1.5px !important;
}

body.accessOpen .minimalPrice > div {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 10px 18px !important;
  margin-top: 7px !important;
}

body.accessOpen .minimalPrice .regularPrice {
  color: #c5d4d0 !important;
  font-size: 15px !important;
}

body.accessOpen .minimalPrice strong {
  color: #c7ff19 !important;
  font-size: clamp(26px, 2.25vw, 38px) !important;
  line-height: 1 !important;
}

body.accessOpen .minimalPrice strong i {
  font-size: .72em !important;
  font-style: normal !important;
}

body.accessOpen .minimalPrice > div > span:last-child {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

@media (min-width: 1051px) and (max-height: 820px) {
  body.accessOpen .accessDashboardShowcase { gap: 12px !important; padding-block: 20px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand { padding-block: 8px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand img { width: 60px !important; height: 60px !important; }
  body.accessOpen .minimalHero { padding-block: 20px !important; }
  body.accessOpen .minimalHero h1 { font-size: clamp(40px, 3.8vw, 62px) !important; }
  body.accessOpen .minimalLead { margin-block: 12px 14px !important; }
  body.accessOpen .minimalFeatures span { min-height: 42px !important; }
  body.accessOpen .minimalPrice { padding-block: 10px !important; }
}

@media (max-width: 1050px) {
  body.accessOpen .accessDashboardShowcase {
    aspect-ratio: auto !important;
    min-height: auto !important;
    padding: max(28px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 34px max(22px, env(safe-area-inset-left)) !important;
  }
  body.accessOpen .minimalHero { margin-top: 28px !important; width: 100% !important; }
  body.accessOpen .minimalPrice { width: 100% !important; }
}

@media (max-width: 620px) {
  body.accessOpen .accessDashboardShowcase { gap: 16px !important; padding-inline: 14px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand { padding: 9px 13px 9px 9px !important; border-radius: 18px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand img { width: 58px !important; height: 58px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand strong { font-size: 27px !important; }
  body.accessOpen .accessDashboardShowcase .accessBrand small { font-size: 9px !important; letter-spacing: 2px !important; }
  body.accessOpen .minimalHero { padding: 22px 16px !important; border-radius: 22px !important; }
  body.accessOpen .minimalEyebrow { font-size: 10px !important; letter-spacing: 2px !important; }
  body.accessOpen .minimalHero h1 { font-size: clamp(38px, 12vw, 54px) !important; letter-spacing: -2px !important; }
  body.accessOpen .minimalHero h1 br { display: none !important; }
  body.accessOpen .minimalFeatures { grid-template-columns: 1fr !important; }
  body.accessOpen .minimalFeatures span { min-height: 46px !important; font-size: 12px !important; }
  body.accessOpen .minimalPrice > div { gap: 7px 12px !important; }
}