:root {
  --mega3-bg: #f0f7f7;
  --mega3-surface: #ffffff;
  --mega3-tone: #0284c7;
  --mega3-tone-hover: #0369a1;
  --mega3-soft-teal: #e0f2fe;
  --mega3-ink: #0f172a;
  --mega3-border: #e2e8f0;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Radio button gallery styling */
.optive-gallery-input {
  display: none;
}

.optive-slide {
  display: none;
}

#slide-1:checked ~ .optive-slide-stage .optive-slide-1,
#slide-2:checked ~ .optive-slide-stage .optive-slide-2,
#slide-3:checked ~ .optive-slide-stage .optive-slide-3,
#slide-4:checked ~ .optive-slide-stage .optive-slide-4 {
  display: block;
}

/* Active thumbnail outline */
#slide-1:checked ~ nav label[for="slide-1"],
#slide-2:checked ~ nav label[for="slide-2"],
#slide-3:checked ~ nav label[for="slide-3"],
#slide-4:checked ~ nav label[for="slide-4"] {
  border-color: var(--mega3-tone) !important;
  box-shadow: 0 0 0 2px var(--mega3-soft-teal);
}

/* Preset A CTA hover shadow effect */
.optive-buy-button {
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
}

.optive-buy-button:hover {
  background-color: var(--mega3-tone-hover) !important;
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
  transform: translateY(-1px);
}