/* =============================================================
   IMMOR — V9 DESIGN SYSTEM
   Modern Botanical Editorial
   --------------------------------------------------------------
   Foundation: CSS variables · Typography · Components
   Scope: All rules prefixed with .v9- or inside .v9 namespace
   Compatibility: Designed to coexist with WoodMart + immor-global.css
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS — CSS Variables
   ------------------------------------------------------------- */
:root {
  /* — FOUNDATION COLORS — */
  --v9-cream-bone: #F8F6F0;
  --v9-snow: #FFFFFF;
  --v9-whisper-sage: #E8EFE3;

  /* — BRAND COLORS — */
  --v9-deep-botanical: #1F4E36;
  --v9-living-green: #2F7B5C;
  --v9-sage-mist: #A8BFA0;

  /* — ACCENT — Earth Copper */
  --v9-earth-copper: #A8703D;  /* Brand accent — pair with shades below for AA */
  --v9-copper-dark:  #8B5A2B;  /* For text on light bg (Cream/Sage/White) */
  --v9-copper-light: #C89067;  /* For text on dark bg (Ink Footer) */
  --v9-accent: #A8703D;        /* Canonical accent name */

  /* — V9.1 COOL ACCENT — Cerulean (matches logo, complements copper) */
  /*  Triadic balance: 207° cerulean ↔ 29° copper (180° complementary)  */
  /*                   207° cerulean ↔ 149° botanical (60° analogous)    */
  --v9-cerulean:       #1A7CB8;  /* Vibrant primary — icons, decorative   */
  --v9-cerulean-dark:  #0F5C8F;  /* For text on light bg (AA: 6.51 cream) */
  --v9-cerulean-light: #7EC8E8;  /* For text on dark bg (AAA: 9.30 ink)    */
  --v9-sky-tint:       #A4D4ED;  /* Light info backgrounds, subtle accents */

  /* — TEXT — */
  --v9-ink: #1A1F18;
  --v9-whisper: #6A7268;
  --v9-hairline: rgba(26, 31, 24, 0.08);
  --v9-hairline-strong: rgba(26, 31, 24, 0.12);

  /* — SEMANTIC ALIASES — */
  --v9-bg: var(--v9-cream-bone);
  --v9-bg-card: var(--v9-snow);
  --v9-bg-tint: var(--v9-whisper-sage);
  --v9-text: var(--v9-ink);
  --v9-text-muted: var(--v9-whisper);
  --v9-action: var(--v9-living-green);
  --v9-action-strong: var(--v9-deep-botanical);

  /* — TYPOGRAPHY — */
  --v9-font-thai: 'Anakotmai', 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
  --v9-font-display: 'Anakotmai', 'IBM Plex Sans Thai', -apple-system, sans-serif;
  /* Reserved — currently unused (Thai doesn't have italic typography convention) */
  --v9-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Font sizes — fluid scale */
  --v9-text-xs: 11px;
  --v9-text-sm: 13px;
  --v9-text-base: 16px;
  --v9-text-lg: 17px;
  --v9-text-xl: 18px;
  --v9-text-2xl: clamp(22px, 2.5vw, 28px);
  --v9-text-3xl: clamp(28px, 3.5vw, 40px);
  --v9-text-4xl: clamp(36px, 5vw, 56px);
  --v9-text-5xl: clamp(48px, 7vw, 92px);

  /* Line heights */
  --v9-leading-tight: 1.05;
  --v9-leading-snug: 1.25;
  --v9-leading-normal: 1.55;
  --v9-leading-relaxed: 1.75;

  /* Letter spacing */
  --v9-tracking-tight: -0.025em;
  --v9-tracking-snug: -0.015em;
  --v9-tracking-normal: 0;
  --v9-tracking-wide: 0.05em;
  --v9-tracking-widest: 0.18em;

  /* — SPACING — */
  --v9-space-1: 4px;
  --v9-space-2: 8px;
  --v9-space-3: 12px;
  --v9-space-4: 16px;
  --v9-space-5: 24px;
  --v9-space-6: 32px;
  --v9-space-8: 48px;
  --v9-space-10: 64px;
  --v9-space-12: 80px;
  --v9-space-16: 96px;
  --v9-space-20: 120px;

  --v9-section-y: clamp(80px, 12vh, 140px);
  --v9-section-x: clamp(20px, 4vw, 48px);

  /* — RADII — */
  --v9-radius-sm: 8px;
  --v9-radius-md: 16px;
  --v9-radius-lg: 24px;
  --v9-radius-xl: 32px;
  --v9-radius-pill: 999px;

  /* — SHADOWS — */
  --v9-shadow-soft: 0 1px 2px rgba(26, 31, 24, 0.04), 0 4px 16px rgba(26, 31, 24, 0.04);
  --v9-shadow-lift: 0 8px 24px rgba(26, 31, 24, 0.08), 0 2px 6px rgba(26, 31, 24, 0.04);
  --v9-shadow-press: 0 16px 40px rgba(26, 31, 24, 0.12);
  --v9-shadow-action: 0 12px 32px rgba(31, 78, 54, 0.25);

  /* — MOTION — */
  --v9-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --v9-duration-fast: 0.25s;
  --v9-duration: 0.4s;
  --v9-duration-slow: 0.6s;

  /* — LAYOUT — */
  --v9-max-content: 1280px;
  --v9-max-wide: 1440px;
}

/* -------------------------------------------------------------
   2. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------- */
.v9-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-xs);
  font-weight: 700;
  letter-spacing: var(--v9-tracking-widest);
  text-transform: uppercase;
  color: var(--v9-earth-copper);
}
.v9-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--v9-earth-copper);
}

.v9-eyebrow--green {
  color: var(--v9-living-green);
}
.v9-eyebrow--green::before {
  background: var(--v9-living-green);
}

.v9-display {
  font-family: var(--v9-font-display);
  font-size: var(--v9-text-5xl);
  line-height: var(--v9-leading-tight);
  letter-spacing: var(--v9-tracking-tight);
  font-weight: 700;
  color: var(--v9-ink);
  margin: 0;
}

.v9-h2 {
  font-family: var(--v9-font-display);
  font-size: var(--v9-text-4xl);
  line-height: var(--v9-leading-snug);
  letter-spacing: var(--v9-tracking-snug);
  font-weight: 700;
  color: var(--v9-ink);
  margin: 0;
}

.v9-h3 {
  font-family: var(--v9-font-display);
  font-size: var(--v9-text-2xl);
  line-height: var(--v9-leading-snug);
  font-weight: 700;
  color: var(--v9-ink);
  margin: 0;
}

.v9-italic {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--v9-deep-botanical);
}

.v9-body {
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-lg);
  line-height: var(--v9-leading-relaxed);
  color: var(--v9-text);
  margin: 0;
}

.v9-body-muted {
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-lg);
  line-height: var(--v9-leading-relaxed);
  color: var(--v9-text-muted);
  margin: 0;
}

.v9-caption {
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-xs);
  letter-spacing: var(--v9-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--v9-text-muted);
}

/* -------------------------------------------------------------
   3. SECTION FOUNDATIONS
   ------------------------------------------------------------- */
.v9-section {
  padding: var(--v9-section-y) var(--v9-section-x);
  position: relative;
}
.v9-section--cream { background: var(--v9-cream-bone); }
.v9-section--snow { background: var(--v9-snow); }
.v9-section--sage { background: var(--v9-whisper-sage); }
.v9-section--dark { background: var(--v9-ink); color: var(--v9-cream-bone); }

.v9-container {
  max-width: var(--v9-max-content);
  margin-left: auto;
  margin-right: auto;
}
.v9-container--wide {
  max-width: var(--v9-max-wide);
  margin-left: auto;
  margin-right: auto;
}

/* Editorial section header (3-column) */
.v9-section-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--v9-space-8);
  margin-bottom: var(--v9-space-12);
}
.v9-section-header__eyebrow { align-self: end; }
.v9-section-header__title {
  font-family: var(--v9-font-display);
  font-size: var(--v9-text-4xl);
  line-height: var(--v9-leading-snug);
  letter-spacing: var(--v9-tracking-snug);
  font-weight: 700;
  color: var(--v9-ink);
  margin: 0;
  max-width: 720px;
}
.v9-section-header__link {
  white-space: nowrap;
  align-self: end;
}

@media (max-width: 968px) {
  .v9-section-header {
    grid-template-columns: 1fr;
    gap: var(--v9-space-5);
    text-align: left;
  }
}

/* -------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------- */
.v9-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  border-radius: var(--v9-radius-pill);
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--v9-duration) var(--v9-ease);
  line-height: 1;
}
.v9-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
  transition: transform var(--v9-duration) ease;
  fill: none;
  stroke: currentColor;
}
.v9-btn:hover svg {
  transform: translateX(4px);
}

.v9-btn--primary {
  background: var(--v9-deep-botanical);
  color: var(--v9-cream-bone) !important;
}
.v9-btn--primary:hover {
  background: var(--v9-ink);
  transform: translateY(-2px);
  box-shadow: var(--v9-shadow-action);
}

.v9-btn--secondary {
  background: var(--v9-snow);
  color: var(--v9-ink) !important;
  border-color: var(--v9-hairline-strong);
}
.v9-btn--secondary:hover {
  background: var(--v9-whisper-sage);
  border-color: var(--v9-living-green);
}

.v9-btn--ghost {
  background: transparent;
  color: var(--v9-ink) !important;
  padding: 18px 4px;
  position: relative;
}
.v9-btn--ghost::after {
  content: "";
  position: absolute;
  bottom: 12px;
  left: 4px;
  right: 24px;
  height: 1px;
  background: var(--v9-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v9-duration) ease;
}
.v9-btn--ghost:hover::after {
  transform: scaleX(1);
}

.v9-btn--sm {
  padding: 12px 22px;
  font-size: var(--v9-text-sm);
}

/* Section header link */
.v9-section-link {
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-sm);
  font-weight: 700;
  color: var(--v9-ink) !important;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--v9-ink);
  transition: all var(--v9-duration-fast) ease;
}
.v9-section-link:hover {
  color: var(--v9-living-green) !important;
  border-color: var(--v9-living-green);
  gap: 12px;
}
.v9-section-link svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  fill: none;
  stroke: currentColor;
}

/* -------------------------------------------------------------
   5. CARDS — base & variants
   ------------------------------------------------------------- */
.v9-card {
  background: var(--v9-snow);
  border-radius: var(--v9-radius-lg);
  padding: 32px;
  border: 1px solid var(--v9-hairline);
  transition: all var(--v9-duration-slow) var(--v9-ease);
  position: relative;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.v9-card:hover {
  transform: translateY(-6px);
  border-color: var(--v9-sage-mist);
  box-shadow: var(--v9-shadow-lift);
}

.v9-card--no-hover:hover {
  transform: none;
  border-color: var(--v9-hairline);
  box-shadow: none;
}

.v9-card--cream {
  background: var(--v9-cream-bone);
}

.v9-card--dark {
  background: var(--v9-deep-botanical);
  color: var(--v9-cream-bone);
  border-color: transparent;
}

/* -------------------------------------------------------------
   6. ICON BADGES (round icon containers)
   ------------------------------------------------------------- */
.v9-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: var(--v9-radius-md);
  background: var(--v9-whisper-sage);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--v9-duration-slow) ease;
  flex-shrink: 0;
}
.v9-icon-badge svg {
  width: 28px;
  height: 28px;
  stroke: var(--v9-deep-botanical);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--v9-duration-slow) ease;
}

.v9-card:hover .v9-icon-badge {
  background: var(--v9-living-green);
  transform: scale(1.05) rotate(-4deg);
}
.v9-card:hover .v9-icon-badge svg {
  stroke: var(--v9-cream-bone);
}

.v9-icon-badge--sm {
  width: 38px;
  height: 38px;
}
.v9-icon-badge--sm svg {
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------
   7. TAGS & BADGES
   ------------------------------------------------------------- */
.v9-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--v9-radius-pill);
  font-family: var(--v9-font-thai);
  font-size: var(--v9-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.v9-tag--copper {
  background: var(--v9-snow);
  color: var(--v9-earth-copper);
}
.v9-tag--green {
  background: var(--v9-snow);
  color: var(--v9-living-green);
}
.v9-tag--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v9-living-green);
}

/* -------------------------------------------------------------
   8. GRID UTILITIES
   ------------------------------------------------------------- */
.v9-grid {
  display: grid;
  gap: var(--v9-space-6);
}
.v9-grid--2 { grid-template-columns: repeat(2, 1fr); }
.v9-grid--3 { grid-template-columns: repeat(3, 1fr); }
.v9-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 968px) {
  .v9-grid--3,
  .v9-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .v9-grid--2,
  .v9-grid--3,
  .v9-grid--4 { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------
   9. DECORATIVE — Italic accents in titles
   ------------------------------------------------------------- */
.v9-title-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--v9-deep-botanical);
}

/* -------------------------------------------------------------
   10. SAFETY GUARDS
   ------------------------------------------------------------- */
/* Ensure v9 buttons/links never inherit WoodMart styles */
.v9 a,
.v9-btn,
.v9-section-link {
  text-decoration: none;
}

.v9 img,
.v9-section img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* WoodMart top bar protection — never override these */
.whb-row,
.whb-top-bar,
.whb-flex-row,
.wd-header-text,
.wd-toolbar { /* intentionally empty — these need to stay native */ }

/* -------------------------------------------------------------
   10.5 ELEMENTOR WRAPPER RESET — Kill default padding/margin
   ─────────────────────────────────────────────────────────────
   Elementor wraps HTML widgets in many layers (.elementor-section,
   .elementor-column, .elementor-widget-container, etc.)
   Each wrapper adds padding/margin → ~200-300px gap between sections.
   
   Solution: Use :has() to target wrappers that contain a v9 section
   and zero out their padding/margin.
   
   Browser support: Chrome 105+, Safari 15.4+, Firefox 121+
   ─────────────────────────────────────────────────────────────
   Note: ONLY applies to wrappers that contain v9 sections.
   Other Elementor sections on the page are unaffected.
   ------------------------------------------------------------- */
.elementor-widget-container:has(> [class^="v9-"]),
.elementor-widget-container:has(> section[class^="v9-"]),
.elementor-widget.elementor-widget-html:has([class^="v9-"]),
.elementor-element:has(> .elementor-widget-container > [class^="v9-"]),
.elementor-column:has([class^="v9-"]),
.elementor-row:has([class^="v9-"]),
.elementor-container:has([class^="v9-"]),
.elementor-section:has([class^="v9-"]),
.elementor-widget-wrap:has([class^="v9-"]),
.e-con:has([class^="v9-"]),
.e-con-inner:has([class^="v9-"]),
.e-con-full:has([class^="v9-"]) {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

/* WoodMart main content wrapper — remove default padding on pages with v9 */
main#main-content:has([class^="v9-"]),
main.wd-content-layout:has([class^="v9-"]),
.content-layout-wrapper:has([class^="v9-"]) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* Article wrapper that holds page content */
article.entry-content:has([class^="v9-"]) {
  margin: 0 !important;
  padding: 0 !important;
}

/* Elementor sections containing v9 must be full-bleed */
.elementor-section:has([class^="v9-"]),
.elementor-section:has([class^="v9-"]) > .elementor-container,
.e-con:has([class^="v9-"]) {
  width: 100% !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------------
   11. ACCESSIBILITY
   ------------------------------------------------------------- */
.v9-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible for keyboard users */
.v9-btn:focus-visible,
.v9-section-link:focus-visible,
.v9-card:focus-visible {
  outline: 2px solid var(--v9-living-green);
  outline-offset: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .v9-btn,
  .v9-card,
  .v9-icon-badge,
  .v9-section-link {
    transition-duration: 0.01s;
  }
}

/* -------------------------------------------------------------
   12. SCROLL REVEAL ANIMATIONS
   ─────────────────────────────────────────────────────────────
   ✦ .v9-reveal applied by JS (immor-v9-reveal.js) via IntersectionObserver
   ✦ Hero uses on-load CSS animation (no JS) to preserve LCP
   ✦ All animations skip on prefers-reduced-motion
   ✦ Title (h1) intentionally NOT animated — preserves LCP
   ------------------------------------------------------------- */

/* ── Hero entrance — on-load CSS animation, no scroll trigger ── */
@keyframes v9-hero-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.v9-hero__eyebrow,
.v9-hero__subtitle,
.v9-hero__actions,
.v9-hero__visual {
  animation: v9-hero-enter 0.7s ease-out both;
}

.v9-hero__eyebrow  { animation-delay: 0.05s; }
.v9-hero__visual   { animation-delay: 0.10s; }
.v9-hero__subtitle { animation-delay: 0.25s; }
.v9-hero__actions  { animation-delay: 0.40s; }

/* NOTE: .v9-hero__title intentionally NOT animated — it's the LCP element */

/* ── Scroll reveal — applied by JS to sections below the fold ── */
.v9-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--v9-reveal-delay, 0s),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--v9-reveal-delay, 0s);
  will-change: opacity, transform;
}

.v9-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Respect prefers-reduced-motion — disable all reveals ── */
@media (prefers-reduced-motion: reduce) {
  .v9-hero__eyebrow,
  .v9-hero__subtitle,
  .v9-hero__actions,
  .v9-hero__visual,
  .v9-reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------
   13. CI COLOR SYSTEM — Earth Copper Accent + AA Contrast
   ─────────────────────────────────────────────────────────────
   Earth Copper #A8703D is the brand accent (~10% of UI).
   Pure #A8703D fails WCAG AA for small text (3.91:1), so we
   use two AA-safe shades for text contexts:
   
   - Light backgrounds (Cream/Sage/White) → #8B5A2B (dark copper)
     • Cream 5.51 · Sage 5.06 · White 5.93 (AA pass)
   - Dark backgrounds (Ink Footer)        → #C89067 (light copper)
     • On Ink #1A1F18: 6.30 (AA pass)
   - Stars (decorative icons)              → #A8703D (pure copper)
     • WCAG exempts decorative icons from contrast
   - Hero info-card "01"                   → #8B5A2B (text on light)
   - Founder badge dot                     → #8B5A2B (text on light)
   
   Uses !important to override hardcoded colors in HTML widgets
   ------------------------------------------------------------- */

/* ── Eyebrows + labels + accents on LIGHT backgrounds ── */
.v9-trust__label,
.v9-goal__eyebrow,
.v9-best__eyebrow,
.v9-best__tag,
.v9-review__eyebrow,
.v9-founder__eyebrow,
.v9-why__eyebrow,
.v9-why__certs-eyebrow,
.v9-articles__eyebrow,
.v9-articles__category,
.v9-loyalty__eyebrow,
.v9-contact__eyebrow {
  color: #8B5A2B !important;
}

/* ── Hero info-card "01" accent ── */
.v9-hero__info-card__num {
  color: #8B5A2B !important;
}

/* ── Decorative hairlines/dividers (pseudo-elements) ── */
.v9-goal__eyebrow::before,
.v9-best__eyebrow::before,
.v9-review__eyebrow::before,
.v9-founder__eyebrow::before,
.v9-why__eyebrow::before,
.v9-why__eyebrow::after,
.v9-articles__eyebrow::before,
.v9-loyalty__eyebrow::before,
.v9-loyalty__eyebrow::after,
.v9-contact__eyebrow::before,
.v9-contact__eyebrow::after {
  background: #8B5A2B !important;
}

/* ── Founder badge dot ── */
.v9-founder__badge::before {
  background: #8B5A2B !important;
}

/* ── Rating stars — pure Earth Copper (decorative) ── */
.v9-review__stars svg,
.v9-best__stars svg {
  fill: #A8703D !important;
}

/* ── Footer (dark Ink bg) — uses LIGHT copper for AA ── */
.v9-footer__col-title {
  color: #C89067 !important;
}

/* Footer social icon hover */
.v9-footer__social-link:hover {
  background: #C89067 !important;
}

/* Footer link arrow + contact icon */
.v9-footer__list a::after,
.v9-footer__contact-row svg {
  color: #C89067 !important;
}

/* ── Body text — Whisper gray darkened for WCAG AA ── */
/*  Original #6A7268 was marginal (4.46:1) on Cream and failed (4.09:1) on Sage  */
/*  New #5A5F58 passes on all light backgrounds: Cream 6.22 · Sage 5.71 · White 6.69  */
.v9-hero__subtitle,
.v9-goal__desc,
.v9-best__rating,
.v9-best__price-prefix,
.v9-founder__role,
.v9-why__desc,
.v9-why__pillar-desc,
.v9-articles__date,
.v9-articles__excerpt,
.v9-contact__note {
  color: #5A5F58 !important;
}

/* ── EXCEPTION: Featured card (Goal section) has dark green bg ── */
/*  Restore light text — higher specificity (0,2,0) beats override above (0,1,0) */
/*  Contrast bumped from 0.75 → 0.92 alpha for better legibility (6.55:1 AA)    */
.v9-goal__card--featured .v9-goal__desc {
  color: rgba(248, 246, 240, 0.92) !important;
}

/* ── EXCEPTION: Best Sellers tags with DARK backgrounds ── */
/*  --no1 (bg Deep Botanical) + --new (bg Living Green) need CREAM text  */
/*  Section 13 default forces copper #8B5A2B which fails on dark bg      */
/*  Specificity 0,2,0 beats Section 13's 0,1,0 + !important               */
/*  Contrast cream on Deep Botanical: 14.5:1 AAA · on Living Green: 6.4:1 AA */
.v9-best__tag.v9-best__tag--no1,
.v9-best__tag.v9-best__tag--new {
  color: #F8F6F0 !important;
}

/* ── EXCEPTION: Hero Dark variant on gradient bg ── */
/*  Subtitle needs LIGHT text — overrides #5A5F58 dark gray  */
/*  rgba alpha 0.92 = ~5.6:1 AA pass at any gradient point   */
/*  Activated by .v9-hero--dark modifier class on <section>  */
.v9-hero--dark .v9-hero__subtitle {
  color: rgba(248, 246, 240, 0.92) !important;
}

/* -------------------------------------------------------------
   14. RESPONSIVE TYPOGRAPHY SCALE — Windows Scaling Fix
   ─────────────────────────────────────────────────────────────
   PROBLEM:
   Original clamp() values used aggressive vw scaling with high
   upper caps. On Windows notebooks at 125-150% display scale
   (Microsoft's default recommendation for 1920×1080), the
   effective CSS viewport drops to 1280-1536px, but font-sizes
   stayed near their max cap → headlines appeared oversized.
   
   FIX:
   Tighter upper caps (~20% smaller) + lower vw multipliers.
   Padding switched from vh → vw to prevent section overflow
   on tall screens.
   
   Tested across: 100% / 125% / 150% / 175% Windows scaling
   Result: All Hero/Section titles render at sensible sizes
   regardless of OS scaling.
   ------------------------------------------------------------- */

/* ── Hero — title + padding ── */
.v9-hero__title {
  font-size: clamp(36px, 5vw, 68px) !important;
}
.v9-hero {
  padding-top: clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
}

/* ── Section titles (Goal/Best/Review/Articles use 4.5vw) ── */
.v9-goal__title,
.v9-best__title,
.v9-review__title,
.v9-articles__title {
  font-size: clamp(28px, 3.6vw, 48px) !important;
}

/* ── Why section title (uses 4.5vw too) ── */
.v9-why__title {
  font-size: clamp(28px, 3.6vw, 48px) !important;
}

/* ── Loyalty title (5.5vw) ── */
.v9-loyalty__title {
  font-size: clamp(32px, 4.4vw, 56px) !important;
}

/* ── Founder quote (3.2vw) ── */
.v9-founder__quote {
  font-size: clamp(22px, 2.6vw, 32px) !important;
}

/* ── Contact title (3vw) ── */
.v9-contact__title {
  font-size: clamp(22px, 2.4vw, 32px) !important;
}

/* ── Why subtitle (2.4vw) — slightly tighter ── */
.v9-why__subtitle {
  font-size: clamp(18px, 1.8vw, 22px) !important;
}

/* ── Section padding — switch vh → vw across all sections ── */
.v9-goal,
.v9-best,
.v9-review,
.v9-founder,
.v9-why,
.v9-articles,
.v9-loyalty {
  padding-top: clamp(64px, 8vw, 96px) !important;
  padding-bottom: clamp(64px, 8vw, 96px) !important;
}
.v9-contact {
  padding-top: clamp(48px, 6vw, 72px) !important;
  padding-bottom: clamp(48px, 6vw, 72px) !important;
}