/* ============================================================
   PHARMACOMPARE — BASE STYLES
   ============================================================ */

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

html {
  /* Light-only site. "only" also opts out of browser force-darkening
     (Chrome Android "Auto dark mode for web contents", etc.), which
     otherwise repaints the page and images when the device is in dark
     mode. Paired with <meta name="color-scheme" content="only light">
     in every page's <head> so it applies before this CSS loads. */
  color-scheme: only light;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* DELIBERATELY no overflow-x here (or max-width:100vw) — that was
     tried as a mobile-viewport-inflation fix and reverted. Any
     non-visible `overflow` on an ancestor of .mission-pin-inner —
     up to and including <html> itself — silently breaks that
     element's position: sticky (Chrome resolves its "nearest
     scrolling ancestor" to that overflow box instead of the real
     viewport, and it never actually sticks even though
     getComputedStyle still reports "sticky"). That's exactly what
     happened here: it fixed the back-to-top button off-canvas on
     mobile but broke Mission's pinned sequence on desktop. The real
     source of the mobile inflation — unrevealed [data-animate=
     "fade-left"/"fade-right"] elements sitting translateX(±80px)
     off their resting position before they scroll into view — is
     now contained locally on the specific sections that hold them
     (.how-it-works, .blog, .why-built in sections.css) instead, so
     no shared ancestor of Mission needs touching. See
     visual-verification notes for how this was isolated. */
}

/* Catch-all for the same problem on every <section> (so newly added
   sections can't reintroduce it): `overflow-x: clip` — unlike `hidden`
   — does NOT create a scroll container, so it can't break Mission's
   position: sticky the way the html/body overflow attempt did. It only
   crops the un-revealed translateX(±80px) [data-animate] elements that
   otherwise widen the page and, in mobile emulation/real phones, make
   Chrome inflate the layout viewport (pushing the hamburger button
   off-screen). Browsers without `clip` support just ignore it. */
section {
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-body);
  background: var(--color-content-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text-dark);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: var(--fs-hero-headline); }
h2 { font-size: var(--fs-section-title); }
h3 { font-size: var(--fs-card-title); font-weight: 600; }

p {
  font-size: var(--fs-body);
  color: var(--color-text-body);
}

.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.text-gradient-green {
  background: var(--gradient-green-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-green-primary);
  margin-bottom: var(--space-xs);
}

.section-eyebrow.light {
  color: var(--color-green-bright);
}

.section-title {
  margin-bottom: var(--space-md);
  max-width: 700px;
}

.section-title.light {
  color: var(--color-white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-light);
}

::-webkit-scrollbar-thumb {
  background: var(--color-green-primary);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-green-dark);
}

/* ── PRELOADER — light cream-green background, green/black spinner ── */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-content-bg);   /* ✏️ CHANGED from dark #0a0a0a — now the same light cream-green as the page */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Spinner — Zenithe-style thin ring with a bright arc, recolored
   to brand green/black instead of blue/black */
.preloader-spinner {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 4px solid rgba(0, 120, 50, 0.12);      /* ✏️ pale green track ring */
  border-top-color: var(--color-green-bright);    /* ✏️ bright green arc */
  border-right-color: var(--color-text-dark);     /* ✏️ black accent segment, echoes Zenithe's dual-tone arc */
  animation: preloaderSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;  /* ✏️ SLOWED from 0.9s linear — smoother, more elegant spin */
}

@keyframes preloaderSpin {
  to { transform: rotate(360deg); }
}

body.loading {
  overflow: hidden;
}