/*
  SEED: 519273

  A — Layout:      digit 3 → Single-column editorial — ultra-narrow 560px column,
                              all content stacked, full-bleed accents break out
  B — Color:       digit 7 → Charcoal (#1c1c1e) base, copper/bronze primary, cool grey secondary
  C — Typography:  digit 2 → Fraunces (optical serif) + Outfit (geometric sans)
  D — Visual lang: digit 9 → Monochrome photography + single brand-color duotone treatment
  E — Navigation:  digit 1 → Fullscreen overlay — hamburger triggers full viewport nav
                              with giant links
  F — Tone:        digit 5 → Energetic challenger — short punchy fragments, active verbs,
                              urgency

  These choices were determined by the seed and must not be changed
  for reasons of "appropriateness" or "better fit for the content".
  Tension between content and form is intentional.

  BRAND ARCHETYPE:   Challenger
  LAYOUT PARADIGM:   Single-column editorial, 560px spine; full-bleed breaks for images
                     and CTA sections. Reading: pure vertical, intimate then explosive.
  SECTION ORDER:     Hero → Intro → Comparison → Method 1 → Method 2 → Method 3 →
                     CTA 1 → Features → Testimonials → CTA 2 → FAQ → Product →
                     Power CTA → Finale → Footer
  DISPLAY FONT:      Fraunces — https://fonts.google.com/specimen/Fraunces
  BODY FONT:         Outfit — https://fonts.google.com/specimen/Outfit
  PRIMARY COLOR:     #c87941 copper/bronze — defies juice-cleanse category convention,
                     signals seriousness and heat rather than freshness and health.
  SHAPE LANGUAGE:    Sharp / rectangular — zero border-radius, ruled lines, hard cuts
  SIGNATURE MOMENT:  Every image grayscale + copper duotone overlay (mix-blend-mode: multiply);
                     giant ghost section numerals at 22vw opacity 0.04
  TONE OF VOICE:     Urgent, direct, uncompromising
*/

/* ─────────────────────────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────────────────────────── */
:root {

  /* ── Brand colors ─────────────────────────────────────── */
  --brand-primary:     #c87941;   /* warm copper/bronze */
  --brand-primary-dk:  #a8622f;   /* darkened copper — hover states */
  --brand-secondary:   #6e6e76;   /* cool mid-grey */
  --brand-accent:      #d48a50;   /* lighter copper — hover glows */

  /* ── Surfaces ─────────────────────────────────────────── */
  --surface-base:      #141414;   /* near-black charcoal */
  --surface-raised:    #1e1e20;   /* cards, panels */
  --surface-section:   #1a1a1c;   /* alternate section backgrounds */
  --surface-inverse:   #c87941;   /* copper-background sections */
  --surface-overlay:   #0a0a0a;   /* nav overlay background */

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:      #f0ece4;   /* warm off-white — main reading text */
  --text-secondary:    #8a8a90;   /* subdued — captions, meta, labels */
  --text-tertiary:     #5a5a60;   /* very subdued — footnotes, disclaimers */
  --text-inverse:      #141414;   /* dark text on copper backgrounds */
  --text-copper:       #c87941;   /* copper-colored text for emphasis */

  /* ── Borders ──────────────────────────────────────────── */
  --border-subtle:     rgba(240, 236, 228, 0.08);
  --border-mid:        rgba(240, 236, 228, 0.16);
  --border-strong:     rgba(240, 236, 228, 0.28);
  --border-copper:     rgba(200, 121, 65, 0.40);
  --border-copper-str: rgba(200, 121, 65, 0.70);

  /* ── Functional ───────────────────────────────────────── */
  --color-success:     #5a9f5a;
  --color-warn:        #b8860b;
  --color-danger:      #c0392b;
  --color-yes:         #5a9f5a;
  --color-no:          #c0392b;
  --color-maybe:       #b8860b;
  --color-star:        #d4a017;  /* star/rating gold */
  --color-lime:        #c8ff00;  /* high-visibility lime — CTA accents */
  --color-inverse-hover: #ddd8d0; /* hover on light surfaces */

  /* ── Typography ───────────────────────────────────────── */
  --font-display:      'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:         'Outfit', system-ui, -apple-system, sans-serif;

  /* ── Type scale — fluid (no fixed breakpoints) ────────── */
  --text-hero:   clamp(3.5rem,  10vw,  8.5rem);
  --text-h1:     clamp(2.5rem,   6vw,  5.25rem);
  --text-h2:     clamp(1.75rem,  4vw,  3rem);
  --text-h3:     clamp(1.2rem,  2.5vw, 1.75rem);
  --text-body:   clamp(1rem,   1.5vw,  1.125rem);
  --text-sm:     clamp(0.8125rem, 1vw, 0.9375rem);
  --text-xs:     0.75rem;
  --text-label:  0.8125rem;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;

  /* ── Layout ───────────────────────────────────────────── */
  --col-editorial: 560px;      /* the spine of the page */
  --col-wide:      900px;      /* comparison table, feature grid */
  --col-max:       1200px;     /* absolute max */
  --page-pad:      clamp(1rem, 5vw, 2.5rem);

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-mid:     300ms;
  --dur-slow:    600ms;
  --dur-xslow:   900ms;

  /* ── Z-index stack ────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-sticky:  300;
  --z-max:     999;
}

/* ─────────────────────────────────────────────────────────────────
   RESET
───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul,
ol {
  list-style: none;
}

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

table {
  border-collapse: collapse;
  width: 100%;
}

input,
textarea,
select {
  font: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}