
button, input, select, summary {
  font: inherit;
}

button, a, summary {
  -webkit-tap-highlight-color: transparent;
}

button, summary {
  cursor: pointer;
}

summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 5px;
}

img {
  max-width: 100%;
}

h1, h2, h3, p {
  overflow-wrap: break-word;
}

h1, h2, h3 {
  text-wrap: balance;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 16px;
  padding: 12px 20px;
  color: var(--black);
  background: var(--ivory);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

.desktop-nav a, .account-link {
  min-height: 44px;
  font-size: 11px;
  letter-spacing: .12em;
}
/* Both image masks remain in the original artwork's coordinate system. */

.hero-art picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-molecules {
  animation: molecular-drift var(--hero-duration) ease-in-out infinite alternate;
  transform-origin: 65% 25%;
  z-index: 1;
  mask-image: url('../images/hero-molecule-mask.svg');
  mask-size: 100% 100%;
}

.hero-foreground {
  z-index: 0;
}

.touch-icon {
  display: none;
}
/* Shared light fades to the same base at every section boundary. */

.science-section, .results-section, .payment-section, .process-section, .faq-section {
  padding: var(--section-space) var(--gutter);
  background: var(--black);
  min-height: 0;
}

.section-eyebrow, .results-eyebrow, .payment-eyebrow, .process-eyebrow, .faq-eyebrow, .evidence-heading {
  color: #d0d8c6;
  font-size: 10px;
  letter-spacing: .18em;
  line-height: 1.5;
}

.science-panel h2, .results-heading h2, .purchase-copy h2, .process-intro h2, .faq-intro h2 {
  margin: 16px 0 20px;
  font-size: clamp(52px, 4.6vw, 80px);
  line-height: .96;
}

.results-heading h2 em, .purchase-copy h2 em, .process-intro h2 em, .faq-intro h2 em {
  color: #d0eab1;
}

.results-backdrop, .payment-backdrop, .process-backdrop {
  inset: 0;
  opacity: .3;
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 65%, transparent);
}

.results-backdrop img, .payment-backdrop img, .process-backdrop img {
  width: 100%;
  height: 100%;
  transform: none;
  filter: none;
}

.results-overlay, .payment-overlay, .process-shade {
  background: radial-gradient(ellipse at 65% 45%, transparent, rgb(3 7 3 / 48%) 75%);
  backdrop-filter: none;
}
/* Science: 30% artwork, 70% content, with a moving peptide behind fixed cells. */

.science-art {
  position: absolute;
  overflow: hidden;
  inset: auto;
  width: 130%;
  height: auto;
  aspect-ratio: 1672 / 941;
  top: 50%;
  left: -18%;
  transform: translateY(-50%);
  mask-image: radial-gradient(ellipse, #000 25%, rgb(0 0 0 / 80%) 46%, transparent 71%);
}

.science-peptide img {
  animation: peptide-engage var(--science-duration) cubic-bezier(.45, 0, .35, 1) infinite alternate;
  transform-origin: 63% 63%;
}

.science-cells {
  clip-path: polygon(0 100%, 17% 100%, 27% 82%, 38% 81%, 45% 72%, 51% 70%, 59% 65%, 65% 56%, 65% 45%, 72% 38%, 72% 29%, 78% 20%, 88% 22%, 90% 11%, 100% 5%, 100% 100%);
}

.pathway-card:hover, .pathway-card.is-open {
  transform: none;
  border-color: #7eaa57;
  background: #132011;
  box-shadow: none;
}

.pathway-icon svg {
  width: 25px;
  height: 25px;
}
/* Square comparisons contain complete figures instead of cropping them. */

.results-heading h2 br {
  display: none;
}

.result-card.is-active, .result-card:hover {
  border-color: #7b9c54;
  box-shadow: none;
}

.results-arrow svg {
  width: 20px;
}

.results-pagination button::after {
  content: '';
  position: absolute;
  height: 3px;
  left: 8px;
  right: 8px;
  top: 15px;
  border-radius: 4px;
  background: #455039;
}

.results-pagination button.is-active::after {
  background: var(--lime);
}
/* Plans remain readable; secondary fields expand on demand on mobile. */

.purchase-copy {
  padding-right: 25%;
}

.plan-option-single .plan-details {
  justify-content: space-between;
  gap: 12px;
  flex-direction: column;
  align-items: start;
}

.plan-option-single .plan-price strong {
  font-size: 27px;
}

.checkout-intro h3 {
  font-size: 30px;
}

.checkout-details {
  margin-top: 22px;
  scroll-margin-top: 88px;
}

.checkout-details summary {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid #739653;
  border-radius: 10px;
  background: linear-gradient(110deg, #263b1d, #14200f);
  box-shadow: inset 0 1px 0 rgb(210 240 175 / 9%);
  transition: border-color 180ms, background 180ms;
  list-style: none;
  font-size: 14px;
}

.checkout-details summary::-webkit-details-marker {
  display: none;
}

.checkout-details summary small {
  display: block;
  margin-top: 4px;
  color: #c2d6b1;
  font-size: 11px;
}

.checkout-details summary > svg {
  flex-shrink: 0;
  color: var(--lime);
  transition: transform 200ms;
}

.checkout-details[open] summary > svg {
  transform: rotate(180deg);
}

.checkout-fields {
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
}

.order-summary {
  margin-top: 20px;
}
/* Bounded process media replaces oversized vertical image containers. */

.process-step-tabs {
  display: none;
}

@keyframes molecular-drift {

from {
  transform: translate3d(calc(-1 * var(--hero-x)), var(--hero-y), 0) rotate(calc(-1 * var(--hero-rotation))) scale(1.035);
}

to {
  transform: translate3d(var(--hero-x), calc(-1 * var(--hero-y)), 0) rotate(var(--hero-rotation)) scale(1.035);
} }
@keyframes peptide-engage {

from {
  transform: translate3d(calc(-.65 * var(--science-x)), calc(-.65 * var(--science-y)), 0) rotate(calc(-1 * var(--science-rotation)));
}

to {
  transform: translate3d(var(--science-x), var(--science-y), 0) rotate(var(--science-rotation));
} }

.hero:not([data-in-view="true"]) .hero-molecules, .science-section:not([data-in-view="true"]) .science-peptide img {
  animation-play-state: paused;
}
