/* =========================================================================
   Ripenol™ brand override — custom palette + asset references
   Original work, layered on top of base template. Load AFTER style.css.
   ========================================================================= */

:root {
  /* Ripenol brand palette — dark greens lifted for a fresher, less-muddy tone */
  --rp-green-900: #163d1f;   /* was #0f2a14 — primary dark green bg */
  --rp-green-800: #1f4d27;   /* was #1b3c1d */
  --rp-green-700: #2d6234;   /* was #284f2b */
  --rp-green-100: #e7efe5;
  --rp-accent: #6FE36F;
  --rp-accent-2: #B8FF5C;
  --rp-accent-3: #38C97A;
  --rp-gold: #b08a2e;
  --rp-gold-light: #d4b068;
  --rp-cream: #faf6ee;
  --rp-ink: #1c1a16;

  /* ── Radianz documented CSS variables (per template documentation) ── */
  --text-color: var(--rp-ink) !important;
  --color-main: var(--rp-green-800) !important;
  --color-primary: var(--rp-green-900) !important;
  --color-secondary: var(--rp-cream) !important;
  --color-accent: var(--rp-accent) !important;
  --color-bg-1: var(--rp-cream) !important;
  --color-bg-2: #ffffff !important;
  --color-border: rgba(28, 26, 22, 0.18) !important;
  --font-1: 'Inter', system-ui, -apple-system, sans-serif !important;
  --font-2: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;

  /* Common fallback names other selectors might use */
  --primary: var(--rp-green-900) !important;
  --primary-color: var(--rp-green-900) !important;
  --secondary: var(--rp-cream) !important;
  --secondary-color: var(--rp-cream) !important;
  --accent: var(--rp-accent) !important;
  --accent-color: var(--rp-accent) !important;
  --brand: var(--rp-accent) !important;
  --brand-color: var(--rp-accent) !important;
  --theme-color: var(--rp-accent) !important;
  --theme: var(--rp-accent) !important;
  --main-color: var(--rp-green-800) !important;
}

/* ---------- typography ---------- */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.heading, .title, .display-1, .display-2, .display-3, .display-4 {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}
.mono, code, pre { font-family: 'JetBrains Mono', ui-monospace, monospace !important; }

/* ---------- accent color cascade ---------- */
a:hover, .text-primary, .color-primary, .text-accent { color: var(--rp-accent) !important; }
.bg-primary, .bg-accent, .btn-primary { background-color: var(--rp-accent) !important; }
.btn-primary { color: var(--rp-green-900) !important; border-color: var(--rp-accent) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--rp-accent-2) !important; color: var(--rp-green-900) !important; box-shadow: 0 12px 32px -8px var(--rp-accent) !important; transform: translateY(-1px); }
.btn-secondary { background-color: var(--rp-green-800) !important; border-color: var(--rp-green-800) !important; color: #fff !important; }
.btn-outline-primary { border-color: var(--rp-accent) !important; color: var(--rp-accent) !important; }
.btn-outline-primary:hover { background-color: var(--rp-accent) !important; color: var(--rp-green-900) !important; }
.btn { border-radius: 999px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; letter-spacing: 0; }

.border-primary, .border-accent { border-color: var(--rp-accent) !important; }
.text-success { color: var(--rp-accent) !important; }
.bg-success { background-color: var(--rp-accent) !important; }

/* ---------- accent gradients commonly used in modern templates ---------- */
.text-gradient, .gradient-text {
  background: linear-gradient(110deg, var(--rp-accent) 0%, var(--rp-accent-2) 60%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
.bg-gradient, .gradient-bg {
  background: linear-gradient(135deg, var(--rp-green-900), var(--rp-green-800)) !important;
}

/* ---------- dark / hero backgrounds ---------- */
.bg-dark, .dark-section, .hero-section, .section-dark { background-color: #0a2010 !important; color: var(--rp-cream) !important; }
.bg-secondary { background-color: var(--rp-green-900) !important; }

/* ---------- icon / accent colors ---------- */
.icon-primary, .icon-accent, .fa-primary { color: var(--rp-accent) !important; }
[class*="icon-"]:not([class*="icon-secondary"]):not([class*="icon-light"]):not([class*="icon-dark"]) { color: var(--rp-accent); }

/* ---------- focus ring ---------- */
:focus-visible { outline: 2px solid var(--rp-accent) !important; outline-offset: 2px !important; }

/* ---------- form fields ---------- */
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--rp-accent) !important;
  box-shadow: 0 0 0 3px rgba(111, 227, 111, 0.15) !important;
}

/* ---------- branding helpers (for Ripenol-specific overrides we add) ---------- */
.rp-logo-mark { color: var(--rp-accent); font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.rp-pill-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; background: rgba(111, 227, 111, 0.1);
  border: 1px solid rgba(111, 227, 111, 0.25); border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--rp-accent);
}
.rp-pill-live::before {
  content: ''; width: 6px; height: 6px; background: var(--rp-accent); border-radius: 50%;
  box-shadow: 0 0 8px var(--rp-accent);
  animation: rp-pulse 2s infinite;
}
@keyframes rp-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .rp-pill-live::before { animation: none; } }

/* ---------- safety: never let template colors override our hover state ---------- */
a, button, .btn { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }

/* ================================================================
   NAVIGATION — desktop links, dropdowns, mobile offcanvas
   ================================================================ */

/* The base style.css uses `overflow-x: hidden` on html+body, which silently
   breaks `position: sticky` on every descendant (Chrome/Safari/Firefox).
   Override with `overflow-x: clip` — same horizontal-scroll prevention,
   but does NOT break sticky positioning. */
html, body { overflow-x: clip !important; }

/* Sticky nav with subtle shadow when the page is scrolled */
header { position: sticky; top: 0; z-index: 1000; }

/* ---------- Top utility strip ---------- */
.rp-utility {
  background: #0c2814;
  color: rgba(250, 246, 238, 0.72);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(111, 227, 111, 0.10);
  padding: 9px 0;
}
.rp-utility .page-size { padding: 0; }
.rp-utility-left,
.rp-utility-right {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  text-transform: uppercase;
}
.rp-utility-status {
  width: 7px; height: 7px;
  background: var(--rp-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--rp-accent);
  animation: rp-pulse 2.2s infinite;
  margin-right: 4px;
}
.rp-utility-key { color: var(--rp-accent); font-weight: 700; }
.rp-utility-text { color: rgba(250, 246, 238, 0.85); text-transform: none; letter-spacing: 0.01em; }
.rp-utility-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(250, 246, 238, 0.78);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  transition: color 200ms;
}
.rp-utility-link:hover { color: var(--rp-accent); }
.rp-utility-link i { color: var(--rp-accent); font-size: 0.8rem; }
.rp-utility-link--mute { cursor: default; opacity: 0.7; }
.rp-utility-link--mute:hover { color: rgba(250, 246, 238, 0.78); }
.rp-utility-sep { opacity: 0.35; }
@media (max-width: 767.98px) {
  .rp-utility-left .rp-utility-text,
  .rp-utility-link span,
  .rp-utility-sep,
  .rp-utility-link--mute { display: none; }
  .rp-utility { padding: 7px 0; font-size: 10.5px; }
}

/* ---------- Navbar — glass on scroll ---------- */
.navbar.bg-prime {
  background: linear-gradient(180deg, var(--rp-green-900) 0%, #143a1c 100%) !important;
  border-bottom: 1px solid rgba(111, 227, 111, 0.10);
  transition: box-shadow 240ms ease, background 240ms ease, backdrop-filter 240ms ease;
}
/* Backdrop-filter creates a stacking context — give the navbar a high z-index
   so its dropdowns can layer above the page banner (which is a sibling). */
.navbar.bg-prime { position: relative; z-index: 50; }
.is-scrolled .navbar.bg-prime {
  background: rgba(22, 61, 31, 0.78) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: rgba(111, 227, 111, 0.18);
  box-shadow: 0 14px 28px -14px rgba(0, 0, 0, 0.55);
  z-index: 50;
}
.is-scrolled .rp-utility { box-shadow: 0 1px 0 rgba(111, 227, 111, 0.10); }

/* Logo — vertically centered + hover lift */
.navbar .navbar-nav { align-items: center; }
.navbar .logo-wrapper { display: flex; align-items: center; }
.navbar-brand {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1;
}
.nav-logo {
  display: block;
  transition: transform 240ms ease, filter 240ms ease;
}
.navbar-brand:hover .nav-logo {
  transform: scale(1.03);
  filter: drop-shadow(0 0 12px rgba(111, 227, 111, 0.25));
}

/* Nav links — uppercase, animated underline */
.navbar .nav-link {
  position: relative;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 22px 4px !important;
  margin: 0 14px;
  color: rgba(250, 246, 238, 0.82) !important;
  transition: color 220ms ease;
}
.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--rp-accent-3) 0%, var(--rp-accent) 50%, var(--rp-accent-3) 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Active-page accent dot floats above the link */
.navbar .nav-link.active::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: var(--rp-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--rp-accent);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: #fff !important;
}
.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after,
.navbar .nav-link.active::after,
.navbar .nav-item.show > .nav-link::after {
  transform: scaleX(1);
}
.navbar .nav-link.active {
  color: var(--rp-accent) !important;
}

/* Dropdown caret rotation */
.navbar .dropdown-toggle::after {
  border-top: 4px solid currentColor !important;
  border-right: 4px solid transparent !important;
  border-left: 4px solid transparent !important;
  margin-left: 6px;
  transition: transform 240ms ease;
}
.navbar .nav-item.show > .dropdown-toggle::after {
  transform: rotate(180deg);
}

/* Polished dropdown panel — supports both Bootstrap .show (click) and
   template's :hover-open behavior. Visual top gap is provided as padding
   inside the menu (not margin) so the hover zone stays continuous. */
/* Make .dropdown the positioning anchor */
.navbar .nav-item.dropdown { position: relative; }

.navbar .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  inset: auto !important;
  margin-top: 0 !important;
  padding: 16px 8px 8px !important;
  min-width: 220px;
  width: max-content;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 1100 !important;
  background: linear-gradient(180deg, #143a1c 0%, #0d2814 100%) !important;
  border: 1px solid rgba(111, 227, 111, 0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(111, 227, 111, 0.06);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
  list-style: none;
}
/* Reset top/left after applying inset:auto so explicit values take effect */
.navbar .dropdown-menu {
  top: 100% !important;
  left: 0 !important;
}
/* Open on hover OR Bootstrap .show (click) — both make the menu visible AND block.
   `transform: none` overrides popper.js's inline transform that would offset it. */
.navbar .nav-item.dropdown:hover > .dropdown-menu,
.navbar .nav-item.dropdown:focus-within > .dropdown-menu,
.navbar .dropdown-menu.show {
  display: block !important;
  opacity: 1;
  transform: none !important;
  pointer-events: auto;
}
/* Subtle scrollbar in long dropdowns (e.g. "Pages") */
.navbar .dropdown-menu::-webkit-scrollbar { width: 6px; }
.navbar .dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(111, 227, 111, 0.25);
  border-radius: 3px;
}
/* Invisible bridge so the cursor can travel from trigger -> menu without
   crossing dead space. Without this, hover-open dropdowns flicker shut. */
.navbar .nav-item.dropdown > .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
.navbar .dropdown-menu::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 18px;
  right: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--rp-accent), transparent);
  border-radius: 2px;
  pointer-events: none;
}
.navbar .dropdown-item {
  padding: 8px 12px !important;
  margin-bottom: 1px;
  border-radius: 6px !important;
  color: rgba(250, 246, 238, 0.85) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-left: 2px solid transparent;
  transition: background 200ms, color 200ms, border-color 200ms, transform 200ms;
  position: relative;
  white-space: nowrap;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus-visible {
  background: rgba(111, 227, 111, 0.08) !important;
  color: #fff !important;
  border-left-color: var(--rp-accent);
  transform: translateX(2px);
}

/* ---------- Custom hamburger button (mobile) ---------- */
.rp-hamburger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(111, 227, 111, 0.30);
  border-radius: 10px;
  cursor: pointer;
  transition: background 220ms, border-color 220ms;
}
.rp-hamburger:hover,
.rp-hamburger:focus-visible {
  background: rgba(111, 227, 111, 0.10);
  border-color: var(--rp-accent);
  outline: none;
}
.rp-hamburger-bar {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--rp-cream);
  border-radius: 2px;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease, top 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-hamburger-bar:nth-child(1) { top: 14px; }
.rp-hamburger-bar:nth-child(2) { top: 21px; }
.rp-hamburger-bar:nth-child(3) { top: 28px; }
/* Animate to X when offcanvas is open (Bootstrap toggles aria-expanded) */
.rp-hamburger[aria-expanded="true"] .rp-hamburger-bar:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.rp-hamburger[aria-expanded="true"] .rp-hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.rp-hamburger[aria-expanded="true"] .rp-hamburger-bar:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* Phone number — interactive on desktop */
.nav-phone {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  color: rgba(250, 246, 238, 0.92) !important;
  letter-spacing: 0.005em;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background 200ms, color 200ms;
}
.nav-phone:hover {
  background: rgba(111, 227, 111, 0.08);
  color: var(--rp-accent) !important;
}
.nav-phone i {
  color: var(--rp-accent) !important;
  font-size: 0.85rem !important;
}

/* ----- Mobile offcanvas ----- */
.offcanvas {
  background: linear-gradient(180deg, var(--rp-green-900) 0%, #0a2010 100%) !important;
  color: var(--rp-cream);
  width: min(380px, 88vw) !important;
  border-left: 1px solid rgba(111, 227, 111, 0.18);
}
.offcanvas-header {
  padding: 22px 22px 16px !important;
  border-bottom: 1px solid rgba(111, 227, 111, 0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.offcanvas-header h4 {
  margin: 0;
  color: var(--rp-cream);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}
.offcanvas .btn-close {
  background: transparent;
  border: 1px solid rgba(111, 227, 111, 0.25);
  border-radius: 8px;
  width: 36px;
  height: 36px;
  opacity: 1;
  position: relative;
  filter: invert(1);
  transition: border-color 200ms, background 200ms;
}
.offcanvas .btn-close:hover {
  border-color: var(--rp-accent);
  background: rgba(111, 227, 111, 0.08);
}
.offcanvas-body {
  padding: 14px 14px 22px !important;
  display: flex;
  flex-direction: column;
}
.offcanvas-body .navbar-nav { gap: 2px; }
.offcanvas-body .nav-item > .nav-link,
.offcanvas-body .nav-item .nav-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px !important;
  margin: 0;
  border-radius: 10px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.86rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rp-cream) !important;
  border-left: 2px solid transparent;
  transition: background 200ms, border-color 200ms, color 200ms;
}
.offcanvas-body .nav-item > .nav-link::after { display: none; } /* kill desktop underline */
.offcanvas-body .nav-item .nav-link:hover,
.offcanvas-body .nav-item .nav-link.active {
  background: rgba(111, 227, 111, 0.08);
  border-left-color: var(--rp-accent);
  color: #fff !important;
}
.offcanvas-body .nav-item .nav-link.active { color: var(--rp-accent) !important; }
.offcanvas-body .navbar-nav .ps-3 {
  padding-left: 18px !important;
  border-left: 1px dashed rgba(111, 227, 111, 0.20);
  margin: 4px 0 8px 18px !important;
}
.offcanvas-body .navbar-nav .ps-3 .nav-link {
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 14px !important;
  font-family: 'Inter', sans-serif !important;
}
.offcanvas .dropdown-icon {
  font-size: 0.8rem;
  color: var(--rp-accent);
  transition: transform 240ms ease;
}
.offcanvas .nav-link[aria-expanded="true"] .dropdown-icon {
  transform: rotate(180deg);
}

/* Bottom info strip in the offcanvas */
.rp-offcanvas-foot {
  margin-top: auto;
  padding: 18px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid rgba(111, 227, 111, 0.12);
}
.rp-offcanvas-foot .rp-offcanvas-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 238, 0.75);
}
.rp-offcanvas-foot .rp-offcanvas-row i {
  color: var(--rp-accent);
  font-size: 0.85rem;
}
.rp-offcanvas-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding: 14px 22px;
  background: var(--rp-accent);
  color: var(--rp-green-900);
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 200ms, transform 200ms;
}
.rp-offcanvas-cta:hover {
  background: var(--rp-accent-2);
  color: var(--rp-green-900);
  transform: translateY(-1px);
}

/* ---------- Inner-page compact banner (sits below the navbar) ---------- */
.rp-page-banner {
  position: relative;
  background: linear-gradient(180deg, var(--rp-green-900) 0%, #143a1c 100%);
  color: var(--rp-cream);
  padding: clamp(28px, 2.5vw, 44px) 0 clamp(24px, 2vw, 36px);
  border-bottom: 1px solid rgba(111, 227, 111, 0.10);
  overflow: hidden;
  /* z-index intentionally NOT set so dropdowns from the navbar can layer on top */
}
.rp-page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(111, 227, 111, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 95% 100%, rgba(184, 255, 92, 0.08) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.rp-page-banner > .page-size {
  position: relative;
  z-index: 1;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.rp-page-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rp-page-crumb a {
  color: rgba(250, 246, 238, 0.65);
  text-decoration: none;
  transition: color 220ms;
}
.rp-page-crumb a:hover { color: var(--rp-accent); }
.rp-page-crumb i { color: var(--rp-accent); font-size: 0.7rem; }
.rp-page-crumb span { color: var(--rp-cream); }
.rp-page-title {
  margin: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
}
.rp-page-title .c-accent { color: var(--rp-accent); }

/* Tighten the gap between banner and the next section */
.rp-page-banner + section,
.rp-page-banner + div { padding-top: clamp(40px, 4vw, 64px) !important; }

/* Banner shrink on scroll — body.is-scrolled (already toggled by JS) trims
   the banner to a slim strip when the user scrolls past the hero area. */
.rp-page-banner { transition: padding 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.rp-page-title  { transition: font-size 280ms cubic-bezier(0.16, 1, 0.3, 1); }
.rp-page-crumb  { transition: margin-bottom 280ms ease, font-size 280ms ease; }
.is-scrolled .rp-page-banner {
  padding-top: clamp(14px, 1.2vw, 22px);
  padding-bottom: clamp(12px, 1vw, 18px);
}
.is-scrolled .rp-page-title { font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
.is-scrolled .rp-page-crumb { margin-bottom: 4px; font-size: 10px; }

/* ---------- consistent section vertical rhythm ---------- */
/* Every direct <section> in <main> gets responsive top/bottom padding so the
   sections don't run into each other. Tighter on small screens, generous on
   wide. Overrides template's mixed padding-top-N/padding-bottom-N classes. */
main > section,
main > .rp-distribution,
main > div.bg-bg-1 {
  padding-top: clamp(64px, 7vw, 110px);
  padding-bottom: clamp(64px, 7vw, 110px);
}
/* Hero is its own thing — its inner padding is already designed */
main > section.rp-hero {
  padding-top: clamp(36px, 4vw, 64px);
  padding-bottom: clamp(56px, 6vw, 96px);
}
/* The CTA card sits in a section that already has its own card padding;
   keep the outer section breathing but lighter so the card doesn't feel
   stranded inside huge whitespace. */
main > section:has(> .page-size > .rp-cta-card) {
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(48px, 5vw, 80px);
}
/* Override the inline `pt-0` template class that was zero-ing some tops */
main > section .page-size.pt-0 { padding-top: 0 !important; }

/* ================================================================
   UNIFIED BUTTON SYSTEM — consistent height, padding, radius, hover
   across .btn-1 / .btn-2 / .rp-hero-secondary / .rp-section-link
   ================================================================ */
.btn-1, .btn-2, .btn-3, .btn-4, .btn-5,
.rp-hero-secondary, .rp-section-link {
  --rp-btn-pad-y: 12px;
  --rp-btn-pad-x: 22px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--rp-btn-pad-y) var(--rp-btn-pad-x) !important;
  min-height: 44px;
  border-radius: 999px !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0;
  line-height: 1.1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 220ms ease, color 220ms ease,
              border-color 220ms ease, transform 220ms ease,
              box-shadow 220ms ease !important;
}
.btn-1 i, .btn-2 i, .btn-3 i, .btn-4 i, .btn-5 i,
.rp-hero-secondary i, .rp-section-link i {
  font-size: 0.82rem !important;
  margin-left: 0 !important;
  transition: transform 220ms ease;
}
.btn-1:hover i, .btn-2:hover i, .btn-3:hover i, .btn-4:hover i, .btn-5:hover i,
.rp-section-link:hover i { transform: translateX(4px); }
.rp-hero-secondary:hover i { transform: translateY(3px); } /* down arrow */

/* PRIMARY — filled accent pill (Contact Us, Secure Your Supply, Read More) */
.btn-2, .btn-5 {
  background-color: var(--rp-accent) !important;
  color: var(--rp-green-900) !important;
  border: 1px solid var(--rp-accent) !important;
  box-shadow: 0 8px 18px -8px rgba(111, 227, 111, 0.45);
}
.btn-2:hover, .btn-5:hover {
  background-color: var(--rp-accent-2) !important;
  border-color: var(--rp-accent-2) !important;
  color: var(--rp-green-900) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(111, 227, 111, 0.55);
}

/* PRIMARY ALT — white pill (navbar Secure Your Supply); darker on hover */
.btn-1 {
  background-color: #ffffff !important;
  color: var(--rp-green-900) !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.35);
}
.btn-1:hover,
.btn-1:focus-visible {
  background-color: var(--rp-green-900) !important;
  border-color: var(--rp-green-900) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.45);
}

/* SECONDARY ON DARK — ghost outline accent (How It Works ↓ / Procurement tiers) */
.rp-hero-secondary {
  background: transparent !important;
  color: var(--rp-cream) !important;
  border: 1px solid rgba(111, 227, 111, 0.40) !important;
}
.rp-hero-secondary:hover {
  background: rgba(111, 227, 111, 0.08) !important;
  border-color: var(--rp-accent) !important;
  color: var(--rp-cream) !important;
  transform: translateY(-1px);
}
.rp-hero-secondary i { color: var(--rp-accent) !important; }

/* SECONDARY ON LIGHT — ghost outline dark green (The full story / Generator compatibility) */
.rp-section-link {
  background: transparent !important;
  color: var(--rp-green-900) !important;
  border: 1px solid var(--rp-green-800) !important;
}
.rp-section-link:hover {
  background: var(--rp-green-900) !important;
  border-color: var(--rp-green-900) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* INLINE — accent text + arrow (in-card "Learn more" links) — already styled */
.rp-feature-link {
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0;
}

/* ---------- image sizing: keep product / produce shots reasonable ----------
   The base template ships .about-img / hero images with no height cap, so
   tall webp source images render full-bleed. Constrain by section. */

/* About comparison row — banana ripened with Ripenol vs unauthorised */
.about-img {
  width: 100% !important;
  max-height: 380px !important;
  object-fit: cover !important;
  border-radius: 14px;
}

/* Banana chart / secondary about image */
.about-img-2 {
  max-height: 460px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Hero podium bottle — already inline-styled; tighten on small screens */
@media (max-width: 991.98px) {
  section.bg-prime img[src*="podium-bottle"] {
    max-height: 280px !important;
  }
}
@media (min-width: 992px) {
  section.bg-prime img[src*="podium-bottle"] {
    max-height: 420px !important;
  }
}

/* How-it-works step cards — bottle / generator / chart */
.how-it-works-card img {
  width: 100% !important;
  max-height: 220px !important;
  object-fit: cover !important;
  border-radius: 12px;
}

/* Generator hero in About / Partnership block */
section img[src*="ethylene-generator"] {
  max-height: 460px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Resources / Blog cards — keep card thumbs uniform */
.blog-img-wrapper, .blog-img {
  height: 220px !important;
  object-fit: cover !important;
}
.blog-img { width: 100% !important; }

/* CTA bottle (already inline 220px) — make sure it never exceeds */
section img[src*="podium-bottle"][style*="max-height: 220"] {
  max-height: 220px !important;
}

/* ---------- Image-led feature cards (Why Ripenol section) ---------- */
.rp-feature-card {
  background: linear-gradient(180deg, #143a1c 0%, #103018 100%);
  border: 1px solid rgba(111, 227, 111, 0.10);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.rp-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 227, 111, 0.35);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(111, 227, 111, 0.08);
}

.rp-feature-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #0a2010;
}
.rp-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms ease;
}
.rp-feature-card:hover .rp-feature-media img {
  transform: scale(1.04);
}
.rp-feature-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(10, 26, 14, 0.85) 100%);
  pointer-events: none;
}
.rp-feature-num {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--rp-accent);
  background: rgba(15, 42, 20, 0.78);
  padding: 4px 10px;
  border: 1px solid rgba(111, 227, 111, 0.4);
  border-radius: 999px;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.rp-feature-body {
  padding: 26px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.rp-feature-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-accent);
}
.rp-feature-eyebrow i {
  font-size: 12px;
}
.rp-feature-card h4 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}
.rp-feature-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(250, 246, 238, 0.78);
}
.rp-feature-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rp-accent);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding-top: 6px;
  align-self: flex-start;
}
.rp-feature-link i {
  transition: transform 220ms ease;
  font-size: 0.85rem;
}
.rp-feature-link:hover {
  color: var(--rp-accent-2);
}
.rp-feature-link:hover i {
  transform: translateX(4px);
}

@media (max-width: 575.98px) {
  .rp-feature-body { padding: 20px 20px 22px; gap: 12px; }
  .rp-feature-card h4 { font-size: 1.2rem; }
}

/* ---------- Transparent bottle product shots ---------- */
/* Real product photo, U2Net-cut, deployed without a podium so it floats
   on whatever section background is behind it. Drop shadow keeps depth. */

.rp-bottle-hero {
  max-height: 480px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55))
          drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
  animation: rp-bottle-float 6s ease-in-out infinite;
  transform: rotateY(var(--rp-tilt-y, 0deg)) rotateX(var(--rp-tilt-x, 0deg));
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
/* When inside a tilt-enabled stage, suppress the float (tilt takes over) */
[data-rp-tilt]:hover .rp-bottle-hero { animation: none; }
.rp-hero-stage { perspective: 1400px; }
@media (min-width: 992px) {
  .rp-bottle-hero { max-height: 560px; }
}
@media (max-width: 575.98px) {
  .rp-bottle-hero { max-height: 320px; }
}

.rp-bottle-step {
  max-height: 220px !important;
  width: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.35))
          drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

.rp-bottle-cta {
  max-height: 240px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45))
          drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}

/* Card 01 — bottle on dark green panel, cropped image area */
.rp-feature-media--bottle {
  background: radial-gradient(ellipse at 50% 110%, rgba(111, 227, 111, 0.10) 0%, transparent 60%),
              linear-gradient(180deg, #143a1c 0%, #103018 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 0 0;
}
.rp-feature-media--bottle .rp-bottle-card-img {
  height: 100%;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  transition: transform 600ms ease;
}
.rp-feature-card:hover .rp-feature-media--bottle .rp-bottle-card-img {
  transform: translateY(-4px) scale(1.02);
}
/* Bottle card overrides the gradient overlay since image is product-only */
.rp-feature-media--bottle::after { display: none; }

/* Subtle hero float */
@keyframes rp-bottle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-bottle-hero { animation: none; }
}

/* ================================================================
   HERO REDESIGN — eyebrow, lead, dual CTA, pill row, bottle stage
   with floating spec badges + radial accent glow
   ================================================================ */
.rp-hero { position: relative; overflow: hidden; isolation: isolate; }

/* Background layer stack */
.rp-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.rp-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(111, 227, 111, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 227, 111, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 90%);
}
.rp-hero-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.rp-hero-orb--1 {
  top: -160px;
  left: -120px;
  background: radial-gradient(circle, rgba(184, 255, 92, 0.30) 0%, transparent 60%);
  animation: rp-orb-drift 18s ease-in-out infinite;
}
.rp-hero-orb--2 {
  bottom: -180px;
  right: -100px;
  background: radial-gradient(circle, rgba(56, 201, 122, 0.30) 0%, transparent 60%);
  animation: rp-orb-drift 22s ease-in-out infinite reverse;
}
@keyframes rp-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(40px, -30px) scale(1.05); }
}

/* Floating accent particles */
.rp-hero-particle {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--rp-accent);
  box-shadow: 0 0 12px var(--rp-accent);
  opacity: 0;
  animation: rp-particle-float 7s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes rp-particle-float {
  0%   { transform: translateY(0)    scale(0.8); opacity: 0; }
  20%  { opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { transform: translateY(-50px) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-hero-orb, .rp-hero-particle { animation: none !important; opacity: 0.4; }
}

/* Heritage micro-pill */
.rp-hero-heritage {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.65);
}
.rp-hero-heritage-key {
  color: var(--rp-accent);
  font-weight: 700;
  padding: 3px 8px;
  border: 1px solid rgba(111, 227, 111, 0.30);
  border-radius: 6px;
  background: rgba(111, 227, 111, 0.06);
}
.rp-hero-heritage-bar {
  width: 18px;
  height: 1px;
  background: rgba(111, 227, 111, 0.4);
}

/* Scroll indicator at bottom of hero */
.rp-hero-scroll {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(250, 246, 238, 0.55);
  z-index: 3;
  transition: color 220ms;
}
.rp-hero-scroll:hover { color: var(--rp-accent); }
.rp-hero-scroll-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.rp-hero-scroll-line {
  position: relative;
  width: 1px;
  height: 36px;
  background: rgba(111, 227, 111, 0.18);
  overflow: hidden;
  border-radius: 1px;
}
.rp-hero-scroll-line span {
  position: absolute;
  top: -16px;
  left: 0;
  width: 1px;
  height: 16px;
  background: var(--rp-accent);
  animation: rp-scroll-down 1.8s ease-in-out infinite;
}
@keyframes rp-scroll-down {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(52px); opacity: 0; }
}
@media (max-width: 991.98px) { .rp-hero-scroll { display: none; } }

/* Eyebrow row — small mono label with pulsing accent dot, borderless */
.rp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-accent);
}
.rp-hero-dot {
  width: 7px; height: 7px;
  background: var(--rp-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--rp-accent);
  animation: rp-pulse 2s infinite;
}

/* Headline */
.rp-hero-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 4.4vw, 4.4rem) !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.rp-hero-lead {
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.6;
  max-width: 56ch;
}

/* Secondary CTA next to primary */
.rp-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid rgba(111, 227, 111, 0.35);
  border-radius: 999px;
  color: var(--rp-cream);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: border-color 220ms, background 220ms, transform 220ms;
}
.rp-hero-secondary i {
  font-size: 0.85rem;
  color: var(--rp-accent);
  transition: transform 220ms;
}
.rp-hero-secondary:hover {
  border-color: var(--rp-accent);
  background: rgba(111, 227, 111, 0.06);
  color: var(--rp-cream);
  transform: translateY(-1px);
}
.rp-hero-secondary:hover i { transform: translateY(3px); }

/* Trust pill row — borderless inline checkmarks */
.rp-hero-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  max-width: 640px;
}
.rp-hero-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: rgba(250, 246, 238, 0.92);
}
.rp-hero-pills i {
  color: var(--rp-accent);
  font-size: 1rem;
}

/* ============== STAGE — bottle + 3 floating spec badges ============== */
.rp-hero-stage {
  position: relative;
  width: 100%;
  min-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-hero-stage .rp-bottle-hero,
.rp-hero-stage .rp-hero-video {
  position: relative;
  z-index: 2;
  max-height: 480px !important;
}
.rp-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(111, 227, 111, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(184, 255, 92, 0.10) 0%, transparent 50%);
  pointer-events: none;
}
/* Floor reflection */
.rp-hero-stage::after {
  content: '';
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 22px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}

/* Spec badge — glassy, three positions */
.rp-spec-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(8, 18, 12, 0.78);
  border: 1px solid rgba(111, 227, 111, 0.28);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(111, 227, 111, 0.06);
  color: var(--rp-cream);
  min-width: 170px;
  animation: rp-badge-float 7s ease-in-out infinite;
}
.rp-spec-badge--tl { top: 4%;    left: -4%;  animation-delay: 0s;    }
.rp-spec-badge--tr { top: 4%;    right: -4%; animation-delay: -1.5s; text-align: right; }
.rp-spec-badge--bl { bottom: 6%; left: -2%;  animation-delay: -3s;   }
.rp-spec-badge--br { bottom: 6%; right: -2%; animation-delay: -4.5s; text-align: right; }

.rp-spec-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--rp-accent);
  letter-spacing: -0.02em;
}
.rp-spec-num--sm { font-size: 1.05rem; color: var(--rp-cream); }
.rp-spec-unit {
  font-size: 0.78em;
  font-weight: 500;
  color: rgba(250, 246, 238, 0.7);
  margin-left: 2px;
}
.rp-spec-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 238, 0.72);
  text-transform: uppercase;
}
.rp-spec-icon {
  height: 38px;
  width: auto;
  background: rgba(255,255,255,0.94);
  padding: 4px;
  border-radius: 8px;
}

@keyframes rp-badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-spec-badge { animation: none; }
}

/* Responsive — collapse badges into a stacked row on tablet/mobile */
@media (max-width: 991.98px) {
  .rp-hero-stage { min-height: auto; padding: 16px 0 8px; }
  .rp-hero-stage .rp-bottle-hero { max-height: 360px !important; }
  .rp-spec-badge {
    position: static;
    animation: none;
    min-width: 140px;
    flex: 1 1 auto;
    margin: 0;
  }
  .rp-hero-stage {
    flex-wrap: wrap;
    gap: 12px;
  }
  .rp-hero-stage::after { display: none; }
}
@media (max-width: 575.98px) {
  .rp-hero-stage .rp-bottle-hero { max-height: 280px !important; }
  .rp-spec-num { font-size: 1.3rem; }
  .rp-hero-pills { padding: 12px 14px; }
}

/* ================================================================
   STAT CARDS — editorial 4-up: eyebrow num, icon, locked figure,
   divider, label + sublabel, body. Equal heights, hover lift.
   ================================================================ */
.rp-stat-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 100% 0%, rgba(111, 227, 111, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #143a1c 0%, #103018 100%);
  border: 1px solid rgba(111, 227, 111, 0.10);
  border-radius: 18px;
  padding: 24px 24px 26px;
  overflow: hidden;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.rp-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--rp-accent), var(--rp-accent-2));
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(111, 227, 111, 0.35);
  box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(111, 227, 111, 0.08);
}
.rp-stat-card:hover::before { width: 100%; }

/* Header: eyebrow num + icon */
.rp-stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.rp-stat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(111, 227, 111, 0.65);
}
.rp-stat-icon {
  font-size: 1.05rem;
  color: var(--rp-accent);
  opacity: 0.85;
}

/* Figure: locked-line value, unit comes from CountUp suffix and stays inline */
.rp-stat-figure {
  display: block;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.rp-stat-value {
  display: inline-block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 3.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--rp-accent);
  white-space: nowrap;
}
.rp-stat-divider {
  width: 36px;
  height: 2px;
  background: var(--rp-accent);
  border-radius: 2px;
  margin: 18px 0 12px;
  opacity: 0.7;
}

/* Label + sub-label */
.rp-stat-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rp-cream);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.rp-stat-sublabel {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(250, 246, 238, 0.5);
  font-weight: 400;
  display: block;
  margin-top: 2px;
}

/* Body */
.rp-stat-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(250, 246, 238, 0.7);
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
}

@media (max-width: 991.98px) {
  .rp-stat-card { padding: 20px 20px 22px; }
}
@media (max-width: 575.98px) {
  .rp-stat-value { font-size: 2.4rem; }
  .rp-stat-unit  { font-size: 0.95rem; }
}

/* ================================================================
   PURITY & SAFETY — section eyebrow, refined link, spec chips,
   editorial figures with caption frames
   ================================================================ */
.rp-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-green-800);
}
.rp-section-rule {
  width: 36px;
  height: 2px;
  background: var(--rp-accent-3);
  border-radius: 2px;
}
.rp-section-eyebrow-text {
  color: var(--rp-green-800);
  font-weight: 600;
}

/* Dark-section variants (used over .bg-prime / dark green) */
.rp-section-eyebrow--dark .rp-section-eyebrow-text { color: var(--rp-accent); }
.rp-section-eyebrow--dark .rp-section-rule { background: var(--rp-accent); }
.rp-section-title--dark { color: #fff !important; }
.rp-section-title-accent--bright { color: var(--rp-accent) !important; }
.rp-section-lead--dark { color: rgba(250, 246, 238, 0.78) !important; }

/* ---------- Distribution block — readable overlay over photo background ---------- */
.rp-distribution {
  position: relative;
}
.rp-distribution::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(10, 26, 14, 0.82) 0%, rgba(15, 42, 20, 0.65) 45%, rgba(15, 42, 20, 0.30) 100%);
  pointer-events: none;
  z-index: 0;
}
.rp-distribution > * { position: relative; z-index: 1; }

.rp-section-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 3.4rem) !important;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rp-green-900);
}
.rp-section-title-accent { color: var(--rp-green-700); }

.rp-section-lead {
  font-size: clamp(1rem, 1.05vw, 1.1rem);
  line-height: 1.6;
  color: var(--rp-ink);
  max-width: 52ch;
}
.rp-section-body {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(28, 26, 22, 0.78);
  margin-bottom: 14px;
}
.rp-section-body strong {
  color: var(--rp-green-800);
  font-weight: 700;
}

/* Refined ghost link to replace generic "Read More" pill */
.rp-section-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--rp-green-800);
  border-radius: 999px;
  color: var(--rp-green-900);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  background: transparent;
  transition: background 220ms, color 220ms, transform 220ms, border-color 220ms;
}
.rp-section-link i {
  font-size: 0.82rem;
  transition: transform 220ms;
}
.rp-section-link:hover {
  background: var(--rp-green-900);
  color: #fff;
  border-color: var(--rp-green-900);
  transform: translateY(-1px);
}
.rp-section-link:hover i { transform: translateX(4px); }

/* Spec chips — borderless inline checkmark rows */
.rp-spec-chips {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.rp-spec-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 0.92rem;
  color: var(--rp-green-900);
  white-space: nowrap;
}
.rp-spec-chips i {
  color: var(--rp-accent-3);
  font-size: 1rem;
}

/* Stacked variant — one item per row (used in partnership block) */
.rp-spec-chips--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.rp-spec-chips--stack li {
  width: 100%;
  white-space: normal;
  font-size: 0.95rem;
}
.rp-spec-chips--stack li i {
  flex-shrink: 0;
}

/* Partnership section gets a soft tonal lift (lighter cream → almost white) */
.rp-partnership {
  background: linear-gradient(180deg, var(--rp-cream) 0%, #fffaf0 100%) !important;
  padding-top: clamp(56px, 7vw, 96px);
}

/* ---------- Standalone testimonial quotes (no name / no logo) ---------- */
.rp-quote-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 36px 28px 32px;
  position: relative;
}
.rp-quote-card .testimonials-icon-right {
  font-size: 1.6rem;
  color: var(--rp-accent-3);
  opacity: 0.45;
}
.rp-quote {
  margin: 0;
  padding: 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--rp-green-900);
  position: relative;
}
.rp-quote::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--rp-accent-3);
  border-radius: 2px;
  margin-bottom: 18px;
  opacity: 0.7;
}

/* When a card thumbnail uses a transparent product PNG, give it a soft
   neutral backdrop and contain (not cover) so the bottle stays whole. */
.rp-blog-img--product {
  object-fit: contain !important;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(15, 42, 20, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, var(--rp-cream) 0%, #fffaf0 100%);
  padding: 14px 0 4px;
  filter: drop-shadow(0 8px 14px rgba(15, 42, 20, 0.18));
}

/* ================================================================
   CLOSING CTA — editorial dark card with accent glow + bottle stage
   ================================================================ */
.rp-cta-card {
  position: relative;
  background:
    radial-gradient(circle at 100% 0%, rgba(184, 255, 92, 0.08) 0%, transparent 55%),
    linear-gradient(160deg, #143a1c 0%, #103018 60%, #0a2010 100%);
  border: 1px solid rgba(111, 227, 111, 0.14);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 36px 70px -28px rgba(15, 42, 20, 0.45),
              0 12px 24px -10px rgba(15, 42, 20, 0.25);
}
.rp-cta-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 50%, rgba(111, 227, 111, 0.10) 0%, transparent 45%);
  pointer-events: none;
}

.rp-cta-actions .btn-2 {
  padding: 14px 26px;
  font-weight: 600;
}

.rp-cta-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
}
.rp-cta-pills li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(250, 246, 238, 0.92);
}
.rp-cta-pills i { color: var(--rp-accent); font-size: 0.95rem; }

/* Bottle stage with accent glow */
.rp-cta-bottle-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  padding: 16px 0;
}
.rp-cta-bottle-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(111, 227, 111, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 95%, rgba(184, 255, 92, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.rp-cta-bottle-stage::after {
  content: '';
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 18px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
  filter: blur(8px);
  z-index: 1;
  pointer-events: none;
}
.rp-cta-bottle {
  position: relative;
  z-index: 2;
  max-height: 420px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 32px rgba(0, 0, 0, 0.5))
          drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
  animation: rp-bottle-float 6s ease-in-out infinite;
}
@media (max-width: 991.98px) {
  .rp-cta-bottle-stage { min-height: 280px; }
  .rp-cta-bottle { max-height: 320px; }
}
@media (max-width: 575.98px) {
  .rp-cta-card { border-radius: 18px; }
  .rp-cta-bottle { max-height: 240px; }
}

/* Topic icon + mono tag in the top-left of every quote card */
.rp-quote-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.rp-quote-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 42, 20, 0.06);
  border: 1px solid rgba(15, 42, 20, 0.12);
  color: var(--rp-green-800);
  font-size: 0.95rem;
}
.rp-quote-tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-green-800);
  font-weight: 600;
}

/* Editorial figures with subtle frame + caption */
.rp-figure {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0a2010;
  box-shadow: 0 30px 60px -28px rgba(15, 42, 20, 0.45),
              0 8px 18px -10px rgba(15, 42, 20, 0.25);
}
.rp-figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: center;
}
/* Lock figures to a sensible aspect ratio so portrait sources can't stretch */
.rp-figure:not(.rp-figure--strip) {
  aspect-ratio: 16 / 10;
}
.rp-figure-caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 6px 12px;
  background: rgba(15, 42, 20, 0.78);
  color: rgba(250, 246, 238, 0.9);
  border-radius: 999px;
  border: 1px solid rgba(111, 227, 111, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ================================================================
   INTRO — editorial company introduction (no boxes), 2-column variant
   ================================================================ */
.rp-intro { padding: 0; }
.rp-intro-lead {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.25vw, 1.28rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--rp-green-900);
  margin: 0 0 18px;
}
.rp-intro-dropcap {
  float: left;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 0.85;
  color: var(--rp-green-800);
  padding: 6px 12px 0 0;
  margin-top: 4px;
}
.rp-intro-lead strong { font-weight: 700; color: var(--rp-green-800); }

.rp-intro-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(0.98rem, 1vw, 1.04rem);
  line-height: 1.7;
  color: rgba(28, 26, 22, 0.82);
  margin: 0 0 18px;
}
.rp-intro-body:last-of-type { margin-bottom: 0; }
.rp-intro-body strong { color: var(--rp-green-900); font-weight: 600; }

/* Two-column magazine layout */
.rp-intro--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 96px;
  position: relative;
  padding-top: 8px;
}
.rp-intro--two-col::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 70px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(15, 42, 20, 0.20) 0%, rgba(15, 42, 20, 0.05) 100%);
  pointer-events: none;
}
.rp-intro-col { min-width: 0; }
.rp-intro-col-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-green-800);
  font-weight: 600;
}
.rp-intro-col-label em {
  font-style: normal;
  color: var(--rp-accent-3);
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  background: rgba(56, 201, 122, 0.10);
  border-radius: 4px;
}

.rp-intro-sign {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(15, 42, 20, 0.10);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 26, 22, 0.5);
}
.rp-intro-sign-bar {
  width: 56px;
  height: 1px;
  background: var(--rp-green-800);
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .rp-intro--two-col {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .rp-intro--two-col::before { display: none; }
  .rp-intro-dropcap { font-size: 3.4rem; padding-right: 10px; }
}

/* ================================================================
   MANIFESTO — large editorial pull quote with mark + cite line
   ================================================================ */
.rp-manifesto {
  position: relative;
  margin: 0;
  padding: 28px 8px 24px 56px;
  border-left: 2px solid var(--rp-accent-3);
}
.rp-manifesto-mark {
  position: absolute;
  top: -18px;
  left: 28px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--rp-accent-3);
  opacity: 0.35;
  pointer-events: none;
}
.rp-manifesto p {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--rp-green-900);
  margin: 0;
}
.rp-manifesto p em {
  font-style: italic;
  font-weight: 600;
  color: var(--rp-green-700);
}
.rp-manifesto p strong {
  font-weight: 700;
  color: var(--rp-green-900);
  background: linear-gradient(120deg, transparent 0%, rgba(111, 227, 111, 0.30) 0%, rgba(111, 227, 111, 0.30) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 30%;
  padding: 0 2px;
}
.rp-manifesto-cite {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 26, 22, 0.55);
}
.rp-manifesto-bar {
  width: 36px;
  height: 2px;
  background: var(--rp-accent-3);
  border-radius: 2px;
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .rp-manifesto { padding: 22px 4px 20px 36px; }
  .rp-manifesto-mark { font-size: 4rem; left: 14px; top: -10px; }
}

/* ================================================================
   PILLARS — 3-up conviction grid below manifesto
   ================================================================ */
.rp-pillars { row-gap: 24px; }
.rp-pillar {
  position: relative;
  height: 100%;
  padding: 28px 26px 30px;
  background:
    linear-gradient(180deg, #ffffff 0%, var(--rp-cream) 100%);
  border: 1px solid rgba(15, 42, 20, 0.10);
  border-radius: 18px;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  overflow: hidden;
}
.rp-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--rp-accent-3), var(--rp-accent));
  transition: width 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-pillar:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 42, 20, 0.20);
  box-shadow: 0 18px 38px -16px rgba(15, 42, 20, 0.25);
}
.rp-pillar:hover::before { width: 100%; }
.rp-pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.rp-pillar-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rp-green-800);
  font-weight: 700;
}
.rp-pillar-icon {
  font-size: 1.05rem;
  color: var(--rp-accent-3);
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(56, 201, 122, 0.12);
}
.rp-pillar-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  color: var(--rp-green-900);
  margin: 0 0 12px;
}
.rp-pillar-body {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(28, 26, 22, 0.78);
  margin: 0;
}
.rp-pillar-body strong {
  color: var(--rp-green-800);
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .rp-pillar { padding: 22px 20px 24px; }
  .rp-pillar-title { font-size: 1.2rem; }
}

/* ================================================================
   PRODUCT SPOTLIGHT — interactive bottle hero with 3D tilt,
   4 corner spec annotations, 4 hotspots with tooltip cards,
   subtle grain texture, and a technical meta strip.
   ================================================================ */
.rp-prodspot {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  justify-items: center;
  min-height: 540px;
  padding: 56px 32px 36px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(184, 255, 92, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(56, 201, 122, 0.10) 0%, transparent 55%),
    linear-gradient(165deg, #163d1f 0%, #103018 60%, #0a2010 100%);
  border: 1px solid rgba(111, 227, 111, 0.16);
  box-shadow: 0 36px 80px -32px rgba(15, 42, 20, 0.55);
  perspective: 1400px;
}
.rp-prodspot-grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.rp-prodspot-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(111, 227, 111, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 95%, rgba(184, 255, 92, 0.10) 0%, transparent 55%);
}

/* Stage — holds the bottle and the hotspot annotation buttons */
.rp-prodspot-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1.3;
  transform-style: preserve-3d;
}
.rp-prodspot-img {
  position: relative;
  z-index: 2;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 38px rgba(0, 0, 0, 0.5))
          drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  transform: rotateY(var(--rp-tilt-y, 0deg)) rotateX(var(--rp-tilt-x, 0deg));
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.rp-prodspot-stage::after {
  content: '';
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 22px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55) 0%, transparent 70%);
  filter: blur(10px);
  z-index: 1;
}

/* 4 corner spec annotations — A1 / B2 / C3 / D4 around the bottle */
.rp-prodspot-spec {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: rgba(8, 18, 12, 0.72);
  border: 1px solid rgba(111, 227, 111, 0.25);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--rp-cream);
  min-width: 150px;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.55);
  animation: rp-prodspot-float 8s ease-in-out infinite;
}
.rp-prodspot-spec--tl { top: 8%;   left: 4%;  animation-delay: 0s;   }
.rp-prodspot-spec--tr { top: 8%;   right: 4%; animation-delay: -2s;  text-align: right; align-items: flex-end; }
.rp-prodspot-spec--bl { bottom: 10%; left: 4%; animation-delay: -4s; }
.rp-prodspot-spec--br { bottom: 10%; right: 4%; animation-delay: -6s; text-align: right; align-items: flex-end; }
.rp-prodspot-spec-key {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: rgba(111, 227, 111, 0.65);
  margin-bottom: 4px;
}
.rp-prodspot-spec-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  color: var(--rp-accent);
  line-height: 1;
  white-space: nowrap;
}
.rp-prodspot-spec-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.65);
  margin-top: 2px;
}

@keyframes rp-prodspot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Hotspots — 4 pulsing dots on the bottle with hover tooltip cards */
.rp-hotspot {
  position: absolute;
  z-index: 4;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rp-hotspot--1 { top: 26%; left: 50%; transform: translateX(-50%); }
.rp-hotspot--2 { top: 46%; left: 50%; transform: translateX(-50%); }
.rp-hotspot--3 { top: 64%; left: 50%; transform: translateX(-50%); }
.rp-hotspot--4 { top: 80%; left: 50%; transform: translateX(-50%); }
.rp-hotspot-dot {
  width: 12px;
  height: 12px;
  background: var(--rp-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(111, 227, 111, 0.30),
              0 4px 10px rgba(0, 0, 0, 0.4);
  animation: rp-pulse 2s infinite;
}
.rp-hotspot-card {
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%) translateX(-6px);
  min-width: 220px;
  padding: 12px 14px;
  background: rgba(8, 18, 12, 0.96);
  border: 1px solid rgba(111, 227, 111, 0.35);
  border-radius: 10px;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(250, 246, 238, 0.92);
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
  box-shadow: 0 18px 36px -10px rgba(0, 0, 0, 0.55);
  white-space: normal;
}
.rp-hotspot-card em {
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--rp-accent);
}
.rp-hotspot-card strong {
  font-weight: 700;
  font-size: 13.5px;
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
}
.rp-hotspot-card span {
  color: rgba(250, 246, 238, 0.7);
}
.rp-hotspot:hover .rp-hotspot-card,
.rp-hotspot:focus-visible .rp-hotspot-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
.rp-hotspot--3 .rp-hotspot-card,
.rp-hotspot--4 .rp-hotspot-card {
  left: auto;
  right: calc(100% + 14px);
}

/* Bottom meta strip — SKU + tip */
.rp-prodspot-meta {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.55);
}
.rp-prodspot-meta-bar {
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, var(--rp-accent), transparent);
}

/* Mobile collapse: stack spec annotations as a compact 2x2 grid below */
@media (max-width: 767.98px) {
  .rp-prodspot { padding: 36px 16px 24px; min-height: auto; }
  .rp-prodspot-stage { aspect-ratio: 1 / 1.4; max-width: 280px; }
  .rp-prodspot-spec {
    position: static;
    animation: none;
    min-width: 0;
    width: 100%;
  }
  .rp-prodspot-spec--tr,
  .rp-prodspot-spec--br { text-align: left; align-items: flex-start; }
  .rp-prodspot {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 10px;
  }
  .rp-prodspot-stage {
    grid-column: 1 / -1;
    margin-bottom: 16px;
  }
  .rp-prodspot-spec--tl { order: 1; }
  .rp-prodspot-spec--tr { order: 2; }
  .rp-prodspot-spec--bl { order: 3; }
  .rp-prodspot-spec--br { order: 4; }
  .rp-prodspot-meta { grid-column: 1 / -1; justify-content: center; }
  .rp-hotspot-card { display: none; }
  .rp-prodspot-spec-num { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-prodspot-spec, .rp-hotspot-dot { animation: none !important; }
  .rp-prodspot-img { transition: none; }
}

/* Ripenol bottle panel — used inside Purity & Safety section,
   replaces the oversized generator image with a tighter editorial card */
.rp-bottle-panel {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(184, 255, 92, 0.10) 0%, transparent 55%),
    linear-gradient(160deg, #143a1c 0%, #103018 70%, #0a2010 100%);
  border: 1px solid rgba(111, 227, 111, 0.14);
  padding: 28px 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 24px 48px -22px rgba(15, 42, 20, 0.45);
}
.rp-bottle-panel-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(111, 227, 111, 0.16) 0%, transparent 55%);
  pointer-events: none;
}
.rp-bottle-panel-img {
  position: relative;
  z-index: 2;
  max-height: 320px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45))
          drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
  margin-bottom: 18px;
}
.rp-bottle-panel-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgba(111, 227, 111, 0.16);
}
.rp-bottle-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.rp-bottle-stat-num {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  color: var(--rp-accent);
  line-height: 1;
}
.rp-bottle-stat-num em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.7em;
  color: rgba(250, 246, 238, 0.6);
  margin-left: 2px;
}
.rp-bottle-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.65);
}
.rp-bottle-panel-link {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid rgba(111, 227, 111, 0.3);
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rp-accent);
  text-decoration: none;
  transition: background 220ms, border-color 220ms, color 220ms, transform 220ms;
}
.rp-bottle-panel-link i { font-size: 0.78rem; transition: transform 220ms; }
.rp-bottle-panel-link:hover {
  background: rgba(111, 227, 111, 0.10);
  border-color: var(--rp-accent);
  color: var(--rp-accent);
  transform: translateY(-1px);
}
.rp-bottle-panel-link:hover i { transform: translateX(3px); }

@media (max-width: 575.98px) {
  .rp-bottle-panel { padding: 22px 18px 18px; }
  .rp-bottle-panel-img { max-height: 240px; }
  .rp-bottle-stat-num { font-size: 1.35rem; }
}

/* Banana strip — full-width band with header */
.rp-figure--strip {
  background: var(--rp-cream);
  border: 1px solid rgba(15, 42, 20, 0.10);
  box-shadow: 0 16px 40px -20px rgba(15, 42, 20, 0.35);
}
.rp-figure-strip-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(15, 42, 20, 0.08);
}
.rp-figure-strip-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rp-green-800);
}
.rp-figure-strip-range {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(28, 26, 22, 0.55);
}
.rp-figure--strip img {
  border-radius: 0 0 14px 14px;
}

@media (max-width: 575.98px) {
  .rp-section-link { padding: 10px 18px; font-size: 0.88rem; }
  .rp-figure-caption { font-size: 10px; left: 12px; bottom: 10px; padding: 4px 10px; }
  .rp-figure-strip-header { padding: 10px 14px; }
  .rp-figure-strip-label, .rp-figure-strip-range { font-size: 10px; letter-spacing: 0.14em; }
}

/* ================================================================
   CROP REFERENCE TABS — multi-crop ripening reference
   ================================================================ */
.rp-cropref { width: 100%; }

/* Header row: eyebrow + auto-rotate indicator */
.rp-cropref-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
  margin-bottom: 14px;
}
.rp-cropref-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-green-800);
}
.rp-cropref-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  background: rgba(15, 42, 20, 0.08);
  border: 1px solid rgba(15, 42, 20, 0.14);
  border-radius: 6px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
}
.rp-cropref-rotate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(28, 26, 22, 0.5);
}
.rp-cropref-rotate-dot {
  width: 6px; height: 6px;
  background: var(--rp-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--rp-accent);
  animation: rp-pulse 2s infinite;
}

/* Tab strip */
.rp-cropref-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(15, 42, 20, 0.04) 0%, rgba(15, 42, 20, 0.02) 100%);
  border: 1px solid rgba(15, 42, 20, 0.10);
  border-radius: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Centered variant — wrap & center the tabs (used on homepage) */
.rp-cropref-tabs--center {
  flex-wrap: wrap;
  justify-content: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.rp-cropref-tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--rp-green-800);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 220ms, color 220ms, border-color 220ms, transform 220ms;
}

/* Fruit-color gradient dot (CSS-only) */
.rp-cropref-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rp-dot-a, #2a7a2a) 0%, var(--rp-dot-b, #ffd84a) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 -2px 3px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

.rp-cropref-name { flex: 1 0 auto; }

/* Stage count badge */
.rp-cropref-stages {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  background: rgba(15, 42, 20, 0.08);
  border: 1px solid rgba(15, 42, 20, 0.10);
  border-radius: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--rp-green-800);
}

.rp-cropref-tab:hover {
  background: rgba(15, 42, 20, 0.06);
  color: var(--rp-green-900);
}

.rp-cropref-tab.is-active {
  background: var(--rp-green-900);
  color: #fff;
  border-color: var(--rp-green-900);
  box-shadow: 0 8px 18px -8px rgba(15, 42, 20, 0.55);
}
.rp-cropref-tab.is-active .rp-cropref-stages {
  background: rgba(111, 227, 111, 0.15);
  border-color: rgba(111, 227, 111, 0.35);
  color: var(--rp-accent);
}
.rp-cropref-tab.is-active .rp-cropref-dot {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 0 4px rgba(111, 227, 111, 0.18);
}

/* Hide non-active panels */
.rp-cropref [data-rp-strip][hidden] { display: none; }

/* Variable zone count — drives grid columns based on data-zones attr */
.rp-banana-zones[data-zones="4"] { grid-template-columns: repeat(4, 1fr); }
.rp-banana-zones[data-zones="5"] { grid-template-columns: repeat(5, 1fr); }
.rp-banana-zones[data-zones="6"] { grid-template-columns: repeat(6, 1fr); }
.rp-banana-ruler[data-ticks="4"] .rp-banana-ticks { grid-template-columns: repeat(4, 1fr); }
.rp-banana-ruler[data-ticks="5"] .rp-banana-ticks { grid-template-columns: repeat(5, 1fr); }
.rp-banana-ruler[data-ticks="6"] .rp-banana-ticks { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 575.98px) {
  .rp-cropref-tab { padding: 9px 12px 9px 10px; font-size: 0.82rem; gap: 8px; }
  .rp-cropref-stages { display: none; }
  .rp-cropref-rotate span { display: none; }
}

/* ================================================================
   BANANA STRIP — animated ripening progression
   - Filter shift on scroll-in (de-saturated → full color)
   - 6 hover zones with floating tooltip
   - Animated ruler with 6 ticks + sliding "current grade" marker
   ================================================================ */
.rp-banana-strip { padding-bottom: 16px; }

/* Image wrap for zone overlay */
.rp-banana-img-wrap { position: relative; }
.rp-banana-img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.55) brightness(1.02);
  transition: filter 1400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-banana-strip.is-active .rp-banana-img {
  filter: saturate(1.05) brightness(1.0);
}

/* Hover zones — invisible buttons over each banana */
.rp-banana-zones {
  position: absolute;
  inset: 6% 4% 14% 4%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  pointer-events: none;
}
.rp-banana-zone {
  position: relative;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: help;
  pointer-events: auto;
  transition: background 220ms;
}
.rp-banana-zone:hover {
  background: radial-gradient(circle at 50% 50%, rgba(111, 227, 111, 0.16) 0%, transparent 60%);
}
.rp-banana-zone::after {
  content: 'Grade ' attr(data-grade) ' · ' attr(data-info);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  padding: 8px 14px;
  background: rgba(15, 42, 20, 0.94);
  color: rgba(250, 246, 238, 0.96);
  border: 1px solid rgba(111, 227, 111, 0.35);
  border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms, transform 220ms;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.45);
  z-index: 5;
}
.rp-banana-zone:hover::after,
.rp-banana-zone:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Ruler under the strip */
.rp-banana-ruler {
  position: relative;
  margin: 22px 36px 12px;
  padding-top: 6px;
}
.rp-banana-track {
  position: relative;
  height: 2px;
  background: rgba(15, 42, 20, 0.10);
  border-radius: 2px;
  overflow: hidden;
}
.rp-banana-track::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--rp-green-700), var(--rp-accent-3), var(--rp-accent));
  transition: width 1800ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-banana-strip.is-active .rp-banana-track::after { width: 100%; }

.rp-banana-ticks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 14px;
}
.rp-banana-tick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 480ms ease, transform 480ms ease;
}
.rp-banana-tick em {
  font-style: normal;
  color: var(--rp-green-800);
  font-weight: 700;
}
.rp-banana-tick b {
  font-weight: 500;
  color: rgba(28, 26, 22, 0.5);
  letter-spacing: 0.06em;
}
.rp-banana-tick::before {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--rp-green-800);
  box-shadow: 0 0 0 4px rgba(15, 42, 20, 0.06);
}
.rp-banana-strip.is-active .rp-banana-tick { opacity: 1; transform: translateY(0); }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(1) { transition-delay: 0.20s; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(2) { transition-delay: 0.40s; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(3) { transition-delay: 0.60s; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(4) { transition-delay: 0.80s; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(5) { transition-delay: 1.00s; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(6) { transition-delay: 1.20s; }

/* Sliding "current grade" marker */
.rp-banana-marker {
  position: absolute;
  top: -10px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateX(0);
  opacity: 0;
  pointer-events: none;
}
.rp-banana-strip.is-active .rp-banana-marker {
  opacity: 1;
  animation: rp-banana-slide 5.5s cubic-bezier(0.4, 0, 0.2, 1) 1.4s 1 forwards;
}
.rp-banana-marker-dot {
  width: 12px;
  height: 12px;
  background: var(--rp-accent);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(111, 227, 111, 0.25),
              0 4px 10px rgba(15, 42, 20, 0.4);
  animation: rp-marker-pulse 1.6s ease-in-out infinite;
}
.rp-banana-marker-label {
  position: absolute;
  top: 22px;
  white-space: nowrap;
  padding: 6px 12px;
  background: var(--rp-green-900);
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  border: 1px solid rgba(111, 227, 111, 0.35);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.45);
}

/* Marker travels left-to-right pausing at each grade tick */
@keyframes rp-banana-slide {
  0%   { left: 0%;     opacity: 0; transform: translateX(0); }
  6%   { opacity: 1; }
  10%  { left: 8.33%;  }
  18%  { left: 8.33%;  }   /* pause grade 1 */
  26%  { left: 25%;    }
  34%  { left: 25%;    }   /* pause grade 2 */
  42%  { left: 41.66%; }
  50%  { left: 41.66%; }   /* pause grade 3 */
  58%  { left: 58.33%; }
  66%  { left: 58.33%; }   /* pause grade 4 */
  74%  { left: 75%;    }
  86%  { left: 75%;    }   /* pause grade 5 (longest — distribution) */
  100% { left: 91.66%; opacity: 1; }
}
@keyframes rp-banana-slide-5 {
  0%   { left: 0%;  opacity: 0; }
  6%   { opacity: 1; }
  12%  { left: 10%; }
  22%  { left: 10%; }
  32%  { left: 30%; }
  42%  { left: 30%; }
  52%  { left: 50%; }
  62%  { left: 50%; }
  72%  { left: 70%; }
  84%  { left: 70%; }   /* pause stage 4 longest */
  100% { left: 90%; opacity: 1; }
}
@keyframes rp-banana-slide-4 {
  0%   { left: 0%;    opacity: 0; }
  8%   { opacity: 1; }
  16%  { left: 12.5%; }
  28%  { left: 12.5%; }
  40%  { left: 37.5%; }
  52%  { left: 37.5%; }
  64%  { left: 62.5%; }
  82%  { left: 62.5%; }   /* pause stage 3 longest */
  100% { left: 87.5%; opacity: 1; }
}
.rp-banana-strip.is-active .rp-banana-ruler[data-ticks="5"] ~ * .rp-banana-marker,
.rp-banana-ruler[data-ticks="5"] .rp-banana-marker { animation-name: rp-banana-slide-5 !important; }
.rp-banana-ruler[data-ticks="4"] .rp-banana-marker { animation-name: rp-banana-slide-4 !important; }
@keyframes rp-marker-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(111, 227, 111, 0.25), 0 4px 10px rgba(15, 42, 20, 0.4); }
  50%      { box-shadow: 0 0 0 9px rgba(111, 227, 111, 0.0),  0 4px 10px rgba(15, 42, 20, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  .rp-banana-img,
  .rp-banana-track::after,
  .rp-banana-tick { transition: none !important; }
  .rp-banana-marker,
  .rp-banana-marker-dot { animation: none !important; }
  .rp-banana-strip .rp-banana-img { filter: saturate(1.05); }
  .rp-banana-strip .rp-banana-track::after { width: 100%; }
  .rp-banana-strip .rp-banana-tick { opacity: 1; transform: none; }
  .rp-banana-marker { display: none; }
}

@media (max-width: 767.98px) {
  .rp-banana-ruler { margin: 18px 12px 10px; }
  .rp-banana-tick b { display: none; }
  .rp-banana-marker-label { font-size: 9.5px; padding: 4px 10px; }
}

/* ============================================
   PREMIUM FOOTER — Ripenol™
   ============================================ */
.ripenol-footer {
  position: relative;
  background: linear-gradient(180deg, #0d1f12 0%, #081509 60%, #050d06 100%);
  color: #d8e4d6;
  font-family: inherit;
  overflow: hidden;
  isolation: isolate;
}
.ripenol-footer::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(255,196,50,0.08), transparent 60%),
    radial-gradient(700px 400px at 90% 30%, rgba(80,180,80,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.ripenol-footer > * { position: relative; z-index: 1; }

/* CTA Banner */
.rp-footer-cta {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 64px 0;
  background:
    linear-gradient(135deg, rgba(255,196,50,0.06), rgba(80,180,80,0.04)),
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.rp-cta-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.rp-cta-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffc432;
  font-weight: 600;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid rgba(255,196,50,0.4);
  border-radius: 99px;
  background: rgba(255,196,50,0.08);
}
.rp-cta-title {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.rp-cta-sub {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 560px;
}
.rp-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.rp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all .3s cubic-bezier(.16,1,.3,1);
  white-space: nowrap;
}
.rp-cta-btn--primary {
  background: linear-gradient(135deg, #ffc432, #ff9a3c);
  color: #0d1f12;
  box-shadow: 0 10px 30px -10px rgba(255,196,50,0.5);
}
.rp-cta-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(255,196,50,0.65);
  color: #0d1f12;
}
.rp-cta-btn--primary i { transition: transform .3s ease; }
.rp-cta-btn--primary:hover i { transform: translateX(4px); }
.rp-cta-btn--ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.rp-cta-btn--ghost:hover {
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.04);
  color: #fff;
}

/* Main Footer */
.rp-footer-main {
  padding: 48px 0 32px;
}
/* Override the global .page-size 100px padding inside footer */
footer .page-size {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.rp-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 56px;
  margin-bottom: 56px;
}
.rp-footer-logo {
  height: 44px;
  width: auto;
  margin-bottom: 22px;
  filter: brightness(1.05);
}
.rp-footer-certifications {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 32px;
}
.rp-footer-made-in-oman {
  height: 100%;
  max-height: 200px;
  width: auto;
}
.rp-footer-tagline {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.62);
  margin-bottom: 28px;
  max-width: 380px;
}

/* Newsletter */
.rp-footer-newsletter { position: relative; }
.rp-newsletter-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: 12px;
}
.rp-newsletter-field {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 99px;
  padding: 4px 4px 4px 20px;
  transition: border-color .25s ease, background .25s ease;
}
.rp-newsletter-field:focus-within {
  border-color: rgba(255,196,50,0.6);
  background: rgba(255,255,255,0.07);
}
.rp-newsletter-field input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14.5px;
  padding: 12px 8px;
  min-width: 0;
}
.rp-newsletter-field input::placeholder { color: rgba(255,255,255,0.4); }
.rp-newsletter-field button {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ffc432, #ff9a3c);
  color: #0d1f12;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .25s ease;
  flex-shrink: 0;
}
.rp-newsletter-field button:hover { transform: scale(1.08) rotate(-8deg); }
.rp-newsletter-note {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
  padding-left: 4px;
}

/* Footer Columns */
.rp-footer-heading {
  font-size: 13px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  margin: 0 0 22px !important;
  position: relative;
  padding-bottom: 14px;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.rp-footer-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #ffc432, transparent);
  border-radius: 2px;
}
.rp-footer-list {
  list-style: none;
  padding: 0; margin: 0;
}
.rp-footer-list li { margin-bottom: 12px; }
.rp-footer-list a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: 14.5px;
  transition: color .2s ease, padding-left .25s ease;
  position: relative;
  display: inline-block;
}
.rp-footer-list a::before {
  content: "→";
  position: absolute;
  left: -18px;
  opacity: 0;
  transition: opacity .25s ease, left .25s ease;
  color: #ffc432;
}
.rp-footer-list a:hover {
  color: #fff;
  padding-left: 4px;
}
.rp-footer-list a:hover::before {
  opacity: 1;
  left: -16px;
}

/* Contact List */
.rp-footer-contact-list {
  list-style: none;
  padding: 0; margin: 0;
}
.rp-footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.7);
}
.rp-footer-contact-list i {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,196,50,0.1);
  color: #ffc432;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(255,196,50,0.18);
}
.rp-footer-contact-list a {
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color .2s ease;
}
.rp-footer-contact-list a:hover { color: #ffc432; }

/* Brochure Downloads */
.rp-footer-brochures {
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rp-brochure-heading {
  margin-bottom: 16px;
}
.rp-brochure-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.rp-brochure-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  flex: 1;
  min-width: 240px;
  max-width: 380px;
}
.rp-brochure-card:hover {
  background: rgba(255,196,50,0.08);
  border-color: rgba(255,196,50,0.35);
  transform: translateY(-2px);
}
.rp-brochure-thumb {
  width: 52px;
  height: 68px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.rp-brochure-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rp-brochure-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.rp-brochure-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e53935;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 2px 7px;
  width: fit-content;
}
.rp-brochure-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}
.rp-brochure-meta {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}
.rp-brochure-dl {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
.rp-brochure-card:hover .rp-brochure-dl {
  background: #ffc432;
  border-color: #ffc432;
  color: #0d1f12;
}
@media (max-width: 575.98px) {
  .rp-brochure-card { max-width: 100%; }
}

/* Downloads inside CTA section */
.rp-footer-brochures--cta {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 0;
}

/* Trust Strip */
.rp-footer-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rp-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}
.rp-trust-item i {
  color: #ffc432;
  font-size: 16px;
}

/* Bottom Bar */
.rp-footer-bottom {
  padding: 24px 0;
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.04);
}
.rp-footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rp-copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
}
.rp-legal {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0; padding: 0;
}
.rp-legal a {
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s ease;
}
.rp-legal a:hover { color: #ffc432; }
.rp-socials {
  display: flex;
  gap: 8px;
}
.rp-socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: 14px;
  transition: all .3s cubic-bezier(.16,1,.3,1);
}
.rp-socials a:hover {
  background: linear-gradient(135deg, #ffc432, #ff9a3c);
  color: #0d1f12;
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -6px rgba(255,196,50,0.5);
}

/* Responsive */
@media (max-width: 991.98px) {
  .rp-cta-grid { grid-template-columns: 1fr; gap: 28px; }
  .rp-cta-actions { flex-direction: row; flex-wrap: wrap; }
  .rp-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .rp-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
  .rp-footer-cta { padding: 48px 0; }
  .rp-footer-main { padding: 56px 0 32px; }
  .rp-footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .rp-cta-actions { flex-direction: column; }
  .rp-cta-btn { width: 100%; }
  .rp-footer-bottom-row { flex-direction: column; text-align: center; gap: 16px; }
  .rp-legal { justify-content: center; }
  .rp-footer-trust { justify-content: center; gap: 18px; }
}

/* =========================================================================
   Compare strip — Grade B → Ripenol process → Export Ready
   ========================================================================= */
.rp-compare-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 32px;
  padding: 24px 0 8px;
}

/* entrance animations — hidden until .is-visible added by JS */
@media (prefers-reduced-motion: no-preference) {
  .rp-compare-card--before {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 700ms cubic-bezier(0.16,1,0.3,1), transform 700ms cubic-bezier(0.16,1,0.3,1);
  }
  .rp-compare-card--after {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 700ms cubic-bezier(0.16,1,0.3,1) 200ms, transform 700ms cubic-bezier(0.16,1,0.3,1) 200ms;
  }
  .rp-process-connector {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.16,1,0.3,1) 100ms, transform 600ms cubic-bezier(0.16,1,0.3,1) 100ms;
  }
  .rp-compare-strip.is-visible .rp-compare-card--before,
  .rp-compare-strip.is-visible .rp-compare-card--after,
  .rp-compare-strip.is-visible .rp-process-connector {
    opacity: 1;
    transform: none;
  }
  .rp-compare-strip.is-visible .rp-process-line--top::before,
  .rp-compare-strip.is-visible .rp-process-line--bottom::before {
    height: 100%;
    transition: height 700ms cubic-bezier(0.16,1,0.3,1) 500ms;
  }
}

.rp-compare-card {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 0 rgba(28,26,22,0.04),
    0 18px 40px -24px rgba(22,61,31,0.35);
}
.rp-compare-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(28,26,22,0.06);
  pointer-events: none;
}
.rp-compare-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-compare-card:hover .rp-compare-img { transform: scale(1.04); }

.rp-compare-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(22,61,31,0.92);
  color: var(--rp-cream);
  font-family: var(--font-2);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.rp-compare-badge--accent {
  background: var(--rp-accent);
  color: var(--rp-green-900);
}

/* Center connector */
.rp-process-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 140px;
  padding: 12px 0;
  color: var(--rp-green-800);
}
.rp-process-eyebrow {
  font-family: var(--font-2);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: var(--rp-green-700);
}
.rp-process-line {
  flex: 1;
  width: 2px;
  min-height: 40px;
  position: relative;
  overflow: hidden;
  background: rgba(22,61,31,0.10);
  border-radius: 2px;
}
.rp-process-line::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: var(--draw, 0%);
  background: linear-gradient(
    to bottom,
    var(--rp-accent-3) 0%,
    var(--rp-accent) 100%
  );
  transition: height 700ms cubic-bezier(0.16, 1, 0.3, 1) 0ms;
  border-radius: 2px;
}
.rp-process-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rp-accent);
  filter: blur(5px);
  opacity: 0.30;
}
.rp-process-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--rp-cream);
  border: 1px solid rgba(22,61,31,0.18);
  color: var(--rp-green-800);
  box-shadow: 0 0 0 6px rgba(111,227,111,0.08), 0 8px 20px -10px rgba(22,61,31,0.4);
  animation: rp-pulse 3.6s ease-in-out infinite;
}
.rp-process-icon svg { width: 32px; height: 32px; }
.rp-process-caret {
  display: none;
  font-size: 1.4rem;
  color: var(--rp-green-700);
}

@keyframes rp-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(111,227,111,0.08), 0 8px 20px -10px rgba(22,61,31,0.4); }
  50%      { box-shadow: 0 0 0 12px rgba(111,227,111,0.04), 0 8px 20px -10px rgba(22,61,31,0.5); }
}

/* ── Hero video: absolute right-side full-height cover panel ── */
.rp-hero { position: relative; overflow: hidden; }
/* Ensure text content sits above the video panel */
.rp-hero .page-size { position: relative; z-index: 2; }

.rp-hero-video-panel {
  position: absolute;
  top: 0; right: 0;
  width: 48%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

@keyframes rp-video-reveal {
  0%   { opacity: 0; transform: scale(1.06); filter: blur(12px) brightness(0.3); }
  100% { opacity: 1; transform: scale(1);    filter: blur(0px)  brightness(1); }
}

.rp-hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: brightness(1) saturate(1);
  animation: rp-video-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* Circular vignette — fades the video edges into the hero background */
.rp-hero-video-fade {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 80% at 58% 50%,
    rgba(22,61,31,0)    35%,
    rgba(22,61,31,0.55) 55%,
    rgba(22,61,31,0.88) 72%,
    #163d1f             88%
  );
}

@media (prefers-reduced-motion: reduce) {
  .rp-hero-video { animation: none; opacity: 1; }
}
/* Mobile: hide the absolute right panel */
@media (max-width: 991px) {
  .rp-hero-video-panel { display: none; }
  .rp-hero-stage { min-height: 0 !important; }
  main > section.rp-hero { padding-top: 0 !important; padding-bottom: 32px !important; }
  .rp-hero-mobile-video { margin: 0 !important; }
  .rp-hero .page-size { padding-top: 24px !important; margin-top: 0 !important; }
  .rp-hero .container-fluid { padding-left: 0 !important; padding-right: 0 !important; }
  .rp-hero .row { margin: 0 !important; gap: 0 !important; }
  /* Video col: no padding. Text col: restore side padding */
  .rp-hero .col-12:first-child { padding-left: 0 !important; padding-right: 0 !important; }
  .rp-hero .col-12:last-child  { padding-left: 20px !important; padding-right: 20px !important; }
  .rp-hero-eyebrow { white-space: nowrap; font-size: 10px; letter-spacing: 0.12em; }
  .rp-hero-heritage { font-size: 11px; flex-wrap: nowrap; white-space: nowrap; }
}

/* Mobile inline video — above hero text */
.rp-hero-mobile-video {
  position: relative;
  width: 100%;
  background: #163d1f;
}
.rp-hero-video-mobile {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(1) saturate(1);
  animation: rp-video-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
/* Circular fade overlay — matches desktop vignette style */
.rp-hero-mobile-video::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 75% 80% at 50% 50%,
    rgba(22,61,31,0)    35%,
    rgba(22,61,31,0.55) 55%,
    rgba(22,61,31,0.9)  72%,
    #163d1f             88%
  );
}

/* Hide the floating "SCROLL" indicator once user scrolls past hero so it doesn't bleed into the next section */
.rp-hero-scroll {
  transition: opacity 400ms ease, transform 400ms ease;
}
body.is-scrolled .rp-hero-scroll {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (max-width: 768px) {
  .rp-compare-strip {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rp-process-connector {
    flex-direction: row;
    min-width: 0;
    width: 100%;
    gap: 12px;
  }
  .rp-process-eyebrow { writing-mode: horizontal-tb; }
  .rp-process-line {
    width: auto;
    height: 2px;
    min-height: 0;
    min-width: 40px;
    overflow: hidden;
    background: rgba(22,61,31,0.10);
  }
  .rp-process-line::before {
    top: 0; bottom: 0; left: 0;
    width: var(--draw, 0%);
    height: auto;
    background: linear-gradient(to right, var(--rp-accent-3), var(--rp-accent));
    transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rp-process-caret { display: inline; }
}


/* =========================================================================
   Product Pages — Ripenol™ & Safe-Ripe™
   ========================================================================= */

/* Breadcrumb */
.rp-breadcrumb { display:flex; align-items:center; gap:8px; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; }
.rp-breadcrumb a { color:rgba(255,255,255,0.5); text-decoration:none; }
.rp-breadcrumb a:hover { color:var(--rp-accent); }
.rp-breadcrumb i { font-size:0.6rem; }
.rp-breadcrumb span { color:var(--rp-accent); }

/* Pain cards */
.rp-pain-card { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:28px; height:100%; }
.rp-pain-card h4 { font-size:1rem; font-weight:700; margin:12px 0 8px; }
.rp-pain-card p { font-size:0.88rem; color:#5a5a5a; margin:0; line-height:1.65; }
.rp-pain-icon { width:44px; height:44px; border-radius:10px; background:rgba(239,68,68,0.1); color:#ef4444; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }

/* Spec table card */
.rp-spec-table-card { background:#fff; border:1px solid var(--color-border); border-radius:16px; padding:32px; }
.rp-spec-table-title { font-size:1rem; font-weight:700; margin-bottom:20px; color:var(--rp-green-900); }
.rp-spec-table { width:100%; border-collapse:collapse; }
.rp-spec-table tr { border-bottom:1px solid rgba(0,0,0,0.06); }
.rp-spec-table tr:last-child { border-bottom:none; }
.rp-spec-table td { padding:11px 0; font-size:0.87rem; vertical-align:top; }
.rp-spec-table td:first-child { color:#666; width:46%; }
.rp-spec-table td:last-child { color:var(--rp-green-900); }

/* Compare table */
.rp-compare-table { width:100%; border-collapse:collapse; min-width:700px; }
.rp-compare-table th, .rp-compare-table td { padding:13px 16px; font-size:0.84rem; border-bottom:1px solid rgba(0,0,0,0.07); text-align:left; }
.rp-compare-table th { background:var(--rp-green-900); color:#fff; font-weight:600; letter-spacing:0.04em; }
.rp-compare-table th.rp-compare-winner, .rp-compare-table td.rp-compare-winner { background:rgba(111,227,111,0.08); font-weight:600; }
.rp-compare-table tr:last-child td { border-bottom:none; }
.text-danger { color:#ef4444 !important; }
.rp-compare-table .fas.fa-times { color:#ef4444; }
.rp-compare-table .fas.fa-minus { color:#999; }

/* Crop cards */
.rp-crop-card { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:22px 16px; text-align:center; height:100%; }
.rp-crop-icon { font-size:2rem; margin-bottom:10px; }
.rp-crop-card h5 { font-size:0.92rem; font-weight:700; margin-bottom:12px; }
.rp-crop-spec { display:flex; flex-direction:column; gap:4px; }
.rp-crop-spec span { font-size:0.76rem; color:#666; background:rgba(22,61,31,0.06); border-radius:20px; padding:3px 10px; }

/* Who cards */
.rp-who-card { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:28px; height:100%; }
.rp-who-card h4 { font-size:1rem; font-weight:700; margin:14px 0 8px; }
.rp-who-card p { font-size:0.87rem; color:#5a5a5a; margin:0; line-height:1.65; }
.rp-who-icon { width:48px; height:48px; border-radius:12px; background:rgba(22,61,31,0.08); color:var(--rp-green-800); display:flex; align-items:center; justify-content:center; font-size:1.2rem; }

/* Step cards */
.rp-step-card { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:28px; height:100%; position:relative; }
.rp-step-num { font-family:var(--font-2); font-size:2.5rem; font-weight:800; color:rgba(22,61,31,0.08); line-height:1; margin-bottom:12px; }
.rp-step-card h4 { font-size:1rem; font-weight:700; margin-bottom:10px; }
.rp-step-card p { font-size:0.87rem; color:#5a5a5a; margin:0; line-height:1.65; }

/* Safety cards */
.rp-safety-card { background:#fff; border:1px solid var(--color-border); border-radius:14px; padding:24px; height:100%; }
.rp-safety-icon { font-size:1.5rem; margin-bottom:12px; }
.rp-safety-card h4 { font-size:0.96rem; font-weight:700; margin-bottom:8px; }
.rp-safety-card p { font-size:0.86rem; color:#5a5a5a; margin:0; line-height:1.65; }

/* System cards */
.rp-system-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:14px; padding:24px; }
.rp-system-card-header { font-size:0.95rem; margin-bottom:16px; color:#fff; }
.rp-system-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.rp-system-list li { font-size:0.87rem; color:rgba(255,255,255,0.7); padding-left:20px; position:relative; }
.rp-system-list li::before { content:"→"; position:absolute; left:0; color:var(--rp-accent); }

/* Feature list */
.rp-feature-list { display:flex; flex-direction:column; gap:14px; }
.rp-feature-item { display:flex; align-items:flex-start; gap:12px; font-size:0.9rem; }
.rp-feature-item i { margin-top:2px; flex-shrink:0; }

/* Page hero adjustment */
.rp-page-hero { padding-top:clamp(48px,5vw,80px); padding-bottom:clamp(48px,5vw,80px); }

/* =========================================================================
   PRODUCT PAGE — Ripenol™ / Safe-Ripe™ — complete redesign
   ========================================================================= */

/* ── Product hero ── */
.rp-prod-hero {
  background: var(--rp-green-900);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  /* Two-tone split: left = dark green, right = slightly lighter with texture */
  position: relative;
}
/* Right panel tint */
.rp-prod-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 100%);
  border-left: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
  z-index: 0;
}
.rp-prod-hero .rp-prod-hero-inner { position: relative; z-index: 1; }
/* Kill the global page-size 100px padding inside the product hero */
.rp-prod-hero .page-size {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.rp-prod-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: stretch;
  padding-top: 36px;
  padding-bottom: 0;
}
.rp-prod-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(111,227,111,0.1);
  border: 1px solid rgba(111,227,111,0.25);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rp-accent);
}
.rp-prod-badge-dot {
  width: 6px; height: 6px;
  background: var(--rp-accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--rp-accent);
  animation: rp-pulse 2s infinite;
}
.rp-prod-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
}
.rp-prod-title span { color: var(--rp-accent); }
.rp-prod-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  margin-bottom: 32px;
  max-width: 480px;
}
.rp-prod-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.rp-prod-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.rp-prod-pills span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.rp-prod-pills span i { color: var(--rp-accent); font-size: 0.75rem; }

/* Bottle visual — anchored to bottom, no top gap */
.rp-prod-hero-right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: 0;
  position: relative;
}
.rp-prod-bottle-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
}
.rp-prod-bottle-glow {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; height: 70%;
  background: radial-gradient(ellipse at center bottom, rgba(111,227,111,0.28) 0%, transparent 65%);
  pointer-events: none;
}
.rp-prod-bottle-img {
  height: clamp(360px, 42vw, 520px);
  width: auto;
  position: relative;
  z-index: 1;
  display: block;
  filter: drop-shadow(0 32px 48px rgba(0,0,0,0.5));
  animation: rp-bottle-float 6s ease-in-out infinite;
}
.rp-prod-bottle-stat {
  position: absolute;
  z-index: 2;
  background: rgba(22,61,31,0.85);
  border: 1px solid rgba(111,227,111,0.2);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 10px 16px;
  display: flex; flex-direction: column;
}
.rp-prod-bottle-stat--tl { top: 10%; left: -10px; }
.rp-prod-bottle-stat--br { bottom: 18%; right: -10px; }
.rp-pbs-val { font-size: 1.3rem; font-weight: 800; color: var(--rp-accent); line-height: 1.1; }
.rp-pbs-label { font-size: 0.68rem; color: rgba(255,255,255,0.55); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }

/* Metrics bar */
.rp-prod-metrics-bar {
  background: rgba(0,0,0,0.25);
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 48px;
}
.rp-prod-metrics {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  gap: 16px;
}
.rp-prod-metric { text-align: center; flex: 1; }
.rp-prod-metric-val { display: block; font-size: 1.5rem; font-weight: 800; color: var(--rp-accent); line-height: 1.1; }
.rp-prod-metric-label { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.45); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.rp-prod-metric-sep { width: 1px; height: 40px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* Section shared */
.rp-prod-section { padding: 56px 0; }
.rp-prod-section-grid { display: grid; gap: 64px; align-items: start; }
.rp-prod-section-grid--60-40 { grid-template-columns: 1fr 1fr; }
.rp-prod-section-grid--50-50 { grid-template-columns: 1fr 1fr; }
.rp-prod-section-grid--40-60 { grid-template-columns: 1fr 1.4fr; }
.rp-prod-section-title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; line-height: 1.2; color: var(--rp-green-900); }
.rp-prod-section-title .c-white { color: #fff; }
.rp-prod-body { font-size: 0.95rem; line-height: 1.75; color: #555; }

/* Pain grid */
.rp-prod-pain-grid { display: flex; flex-direction: column; gap: 20px; }
.rp-prod-pain { display: flex; gap: 16px; align-items: flex-start; }
.rp-prod-pain h4 { font-size: 0.95rem; font-weight: 700; margin: 0 0 6px; color: var(--rp-green-900); }
.rp-prod-pain p { font-size: 0.85rem; color: #666; margin: 0; line-height: 1.6; }
.rp-prod-pain-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.rp-prod-pain-icon--red { background: rgba(239,68,68,0.1); color: #ef4444; }
.rp-prod-pain-icon--amber { background: rgba(251,191,36,0.12); color: #d97706; }

/* How it works */
.rp-prod-how-header { margin-bottom: 48px; }
.rp-prod-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  overflow: hidden;
}
.rp-prod-how-card {
  background: #fff;
  padding: 32px 28px;
  position: relative;
  border-right: 1px solid rgba(0,0,0,0.07);
  transition: background 250ms;
}
.rp-prod-how-card:last-child { border-right: none; }
.rp-prod-how-card:hover { background: #f8fbf8; }

/* Green top gradient bar */
.rp-prod-how-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--rp-green-800), var(--rp-accent));
  opacity: 0.6;
  transition: opacity 250ms;
}
.rp-prod-how-card:hover::before { opacity: 1; }

/* Icon circle */
.rp-prod-how-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(22,61,31,0.08) 0%, rgba(111,227,111,0.12) 100%);
  border: 1px solid rgba(22,61,31,0.1);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  transition: background 250ms, transform 250ms;
}
.rp-prod-how-card:hover .rp-prod-how-icon-wrap {
  background: linear-gradient(135deg, rgba(22,61,31,0.14) 0%, rgba(111,227,111,0.2) 100%);
  transform: translateY(-2px);
}
.rp-prod-how-icon {
  font-size: 1.3rem;
  color: var(--rp-green-800);
}

/* Badge pill */
.rp-prod-how-badge {
  display: inline-block;
  background: rgba(22,61,31,0.07);
  color: var(--rp-green-700);
  border: 1px solid rgba(22,61,31,0.12);
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  font-family: var(--font-2);
}

.rp-prod-how-num {
  font-family: var(--font-2);
  font-size: 1rem;
  font-weight: 700;
  color: var(--rp-accent);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  background: rgba(22,61,31,0.06);
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
}
.rp-prod-how-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; color: var(--rp-green-900); }
.rp-prod-how-card p { font-size: 0.85rem; color: #666; margin: 0; line-height: 1.7; }

@media (max-width: 991px) {
  .rp-prod-how-grid { grid-template-columns: 1fr 1fr; }
  .rp-prod-how-card { border-right: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07); }
  .rp-prod-how-card:nth-child(2) { border-right: none; }
  .rp-prod-how-card:nth-child(3), .rp-prod-how-card:nth-child(4) { border-bottom: none; }
}
@media (max-width: 575px) {
  .rp-prod-how-grid { grid-template-columns: 1fr; }
  .rp-prod-how-card { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.07); }
  .rp-prod-how-card:last-child { border-bottom: none; }
}

/* Spec block */
.rp-prod-spec-block { border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; overflow: hidden; }
.rp-prod-spec-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 0.87rem;
}
.rp-prod-spec-row:last-child { border-bottom: none; }
.rp-prod-spec-row span { color: #888; }
.rp-prod-spec-row strong { color: var(--rp-green-900); text-align: right; }

/* Crop list — Apple-style grid */
.rp-prod-crop-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rp-prod-crop-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms;
  cursor: default;
}
.rp-prod-crop-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(22,61,31,0.15);
  border-color: rgba(22,61,31,0.15);
}
.rp-prod-crop-emoji {
  font-size: 2.4rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.rp-prod-crop-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.rp-prod-crop-info strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--rp-green-900);
  letter-spacing: -0.01em;
}
/* Stat pills */
.rp-prod-crop-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.rp-prod-crop-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(22,61,31,0.05);
  border: 1px solid rgba(22,61,31,0.1);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--rp-green-800);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rp-prod-crop-stat i { font-size: 0.6rem; color: var(--rp-accent); }

/* Compare table — redesigned rows */
.rp-prod-compare-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); }
.rp-prod-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
  table-layout: fixed;
}

/* Alternating row stripes */
.rp-prod-compare-table tbody tr:nth-child(odd)  { background: rgba(255,255,255,0.02); }
.rp-prod-compare-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.12); }
.rp-prod-compare-table tbody tr {
  transition: background 200ms;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rp-prod-compare-table tbody tr:last-child { border-bottom: none; }
.rp-prod-compare-table tbody tr:hover { background: rgba(255,255,255,0.06); }

.rp-prod-compare-table th, .rp-prod-compare-table td {
  padding: 16px 20px;
  font-size: 0.86rem;
  text-align: left;
}

/* Feature label column */
.rp-prod-compare-table td:first-child {
  color: rgba(255,255,255,0.45);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.06);
  white-space: normal;
  width: 140px;
  min-width: 140px;
  max-width: 140px;
}

/* Data cells */
.rp-prod-compare-table td {
  color: rgba(255,255,255,0.75);
  font-size: 0.88rem;
  vertical-align: middle;
}

/* Bad column highlight */
.rp-pct-bad {
  color: rgba(239,68,68,0.9) !important;
  background: rgba(239,68,68,0.04) !important;
}
.rp-pct-bad th { color: rgba(239,68,68,0.7) !important; }

/* Winner column — green accent border + glow */
.rp-pct-win {
  background: rgba(111,227,111,0.07) !important;
  color: #fff !important;
  border-left: 2px solid rgba(111,227,111,0.3);
  font-weight: 600;
}
.rp-pct-win th { color: var(--rp-accent) !important; }

/* Icon styling */
.rp-c-ok  { color: var(--rp-accent); font-size: 0.8rem; }
.rp-c-mid { color: rgba(255,255,255,0.3); font-size: 0.8rem; }
.rp-prod-compare-table .fa-times  { color: #ef4444; font-size: 0.8rem; }
.rp-prod-compare-table .fa-check  { font-size: 0.8rem; }
.rp-prod-compare-table .fa-minus  { font-size: 0.8rem; }

/* Inline pill for each cell value */
.rp-prod-compare-table td i { margin-right: 6px; }

/* Who grid */
.rp-prod-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rp-prod-who { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid rgba(0,0,0,0.07); border-radius: 14px; padding: 22px; }
.rp-prod-who h4 { font-size: 0.92rem; font-weight: 700; margin: 0 0 6px; color: var(--rp-green-900); }
.rp-prod-who p { font-size: 0.83rem; color: #777; margin: 0; line-height: 1.6; }
.rp-prod-who-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(22,61,31,0.08); color: var(--rp-green-800); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

/* CTA strip */
.rp-prod-cta-strip { background: var(--rp-green-900); padding: 60px 0; }
.rp-prod-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.rp-prod-cta-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-accent); margin-bottom: 8px; }
.rp-prod-cta-title { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 800; color: #fff; margin: 0; }
.rp-prod-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; flex-shrink: 0; }

/* Mobile */
@media (max-width: 991px) {
  .rp-prod-hero-inner { grid-template-columns: 1fr; padding-top: 40px; }
  .rp-prod-hero-right { display: none; }
  .rp-prod-metrics { flex-wrap: wrap; gap: 12px; }
  .rp-prod-metric-sep { display: none; }
  .rp-prod-metric { flex: 0 0 45%; }
  .rp-prod-section { padding: 52px 0; }
  .rp-prod-section-grid--60-40,
  .rp-prod-section-grid--50-50,
  .rp-prod-section-grid--40-60 { grid-template-columns: 1fr; gap: 40px; }
  .rp-prod-how-grid { grid-template-columns: 1fr 1fr; }
  .rp-prod-who-grid { grid-template-columns: 1fr; }
  .rp-prod-cta-inner { flex-direction: column; text-align: center; }
  .rp-prod-cta-actions { justify-content: center; }
}
@media (max-width: 575px) {
  .rp-prod-how-grid { grid-template-columns: 1fr; }
  .rp-prod-metric { flex: 0 0 100%; }
}

/* ── Visual comparison cards ── */
.rp-comp-section { background: var(--rp-green-900); padding: 80px 0; }
.rp-comp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
.rp-comp-card {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms;
}
.rp-comp-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px rgba(0,0,0,0.4); }
.rp-comp-card--bad  { background: rgba(15,15,15,0.6); border-color: rgba(239,68,68,0.15); }
.rp-comp-card--warn { background: rgba(15,15,15,0.6); border-color: rgba(251,191,36,0.12); }
.rp-comp-card--win  { background: rgba(22,61,31,0.9); border-color: rgba(111,227,111,0.3); box-shadow: 0 0 0 1px rgba(111,227,111,0.15); }

/* Image area */
.rp-comp-card-img-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
}
.rp-comp-card-img-wrap--win {
  background: radial-gradient(ellipse at center, rgba(22,61,31,0.8) 0%, rgba(10,30,15,0.95) 100%);
}
.rp-comp-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 300ms, transform 500ms;
}
.rp-comp-card--win .rp-comp-card-img { opacity: 1; }
.rp-comp-card:hover .rp-comp-card-img { opacity: 0.85; transform: scale(1.04); }
.rp-comp-card-img--bottle {
  object-fit: contain;
  padding: 20px;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6));
}

/* Verdict badge */
.rp-comp-card-verdict {
  position: absolute;
  top: 12px; left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.rp-comp-card-verdict--bad  { background: rgba(239,68,68,0.9); color: #fff; }
.rp-comp-card-verdict--warn { background: rgba(217,119,6,0.9);  color: #fff; }
.rp-comp-card-verdict--win  { background: var(--rp-accent); color: var(--rp-green-900); }

/* Card body */
.rp-comp-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.rp-comp-card-body h4 {
  font-size: 0.95rem; font-weight: 700;
  color: #fff; margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.rp-comp-card--win .rp-comp-card-body h4 { color: var(--rp-accent); }

/* List items */
.rp-comp-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.rp-comp-list li { font-size: 0.8rem; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.rp-comp-list li i { flex-shrink: 0; margin-top: 2px; font-size: 0.72rem; }
.rp-comp-bad  { color: rgba(239,68,68,0.85); }
.rp-comp-bad i { color: #ef4444; }
.rp-comp-mid  { color: rgba(255,255,255,0.4); }
.rp-comp-mid i { color: rgba(255,255,255,0.3); }
.rp-comp-ok   { color: rgba(255,255,255,0.7); }
.rp-comp-ok i { color: var(--rp-accent); }
.rp-comp-card--win .rp-comp-ok { color: rgba(255,255,255,0.9); }

@media (max-width: 991px) {
  .rp-comp-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
  .rp-comp-cards { grid-template-columns: 1fr; }
}

/* ── Comparison table with product images in headers ── */
.rp-pct-img-table thead th { padding: 0 12px 16px; vertical-align: bottom; }
.rp-pct-feature-col { width: 140px; min-width: 140px; }
.rp-pct-img-table thead th:not(.rp-pct-feature-col) { width: calc((100% - 140px) / 4); }
.rp-pct-th-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: transparent;
}
.rp-pct-th-img-wrap--bottle {
  background: rgba(111,227,111,0.05);
  border: 1px solid rgba(111,227,111,0.15);
}
.rp-pct-th-img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
  padding: 0;
}
.rp-pct-th-img--bottle {
  object-fit: contain !important;
  padding: 12px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.rp-pct-th-badge {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.rp-pct-th-badge--bad  { background: rgba(239,68,68,0.92); color: #fff; }
.rp-pct-th-badge--warn { background: rgba(217,119,6,0.92);  color: #fff; }
.rp-pct-th-badge--win  { background: var(--rp-accent); color: var(--rp-green-900); }
.rp-pct-th-name {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  text-align: center;
}
.rp-pct-win .rp-pct-th-name { color: var(--rp-accent); }
.rp-pct-bad .rp-pct-th-name { color: rgba(239,68,68,0.7); }

/* ── Fix equal column widths + transparent bg images ── */
.rp-pct-img-table { table-layout: fixed; }
.rp-pct-img-table thead th { width: 22%; }
.rp-pct-img-table thead th.rp-pct-feature-col { width: 12%; }

/* override block removed — consolidated above */

/* ── Mobile comparison table ── */
@media (max-width: 767px) {
  /* Hide full table, show scroll hint */
  .rp-prod-compare-wrap {
    position: relative;
    border-radius: 14px;
  }
  .rp-prod-compare-table {
    display: block;
    min-width: 0;
    font-size: 0.78rem;
  }
  .rp-prod-compare-table thead,
  .rp-prod-compare-table tbody,
  .rp-prod-compare-table tr { display: block; width: 100%; }

  /* Hide image header row on mobile */
  .rp-pct-img-row { display: none !important; }

  /* Each tbody row = one feature block */
  .rp-prod-compare-table tbody tr {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 0;
  }
  .rp-prod-compare-table tbody tr:last-child { border-bottom: none; }

  /* Feature label spans full width */
  .rp-prod-compare-table td:first-child {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 12px 16px 6px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
  }

  /* Other cells: display inline-flex as a row of 4 */
  .rp-prod-compare-table td:not(:first-child) {
    display: inline-flex;
    align-items: center;
    width: 25%;
    padding: 8px 10px 12px;
    font-size: 0.78rem;
    vertical-align: top;
    box-sizing: border-box;
  }

  /* Data cell labels via data-attr */
  .rp-prod-compare-table td:nth-child(2)::before { content: "Carbide"; display:block; font-size:0.6rem; color:rgba(255,255,255,0.3); margin-bottom:4px; }
  .rp-prod-compare-table td:nth-child(3)::before { content: "Cylinder"; display:block; font-size:0.6rem; color:rgba(255,255,255,0.3); margin-bottom:4px; }
  .rp-prod-compare-table td:nth-child(4)::before { content: "Sachet"; display:block; font-size:0.6rem; color:rgba(255,255,255,0.3); margin-bottom:4px; }
  .rp-prod-compare-table td:nth-child(5)::before { content: "Ripenol™"; display:block; font-size:0.6rem; color:var(--rp-accent); margin-bottom:4px; font-weight:700; }

  .rp-prod-compare-table td:not(:first-child) {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Winner column mobile */
  .rp-pct-win {
    background: rgba(111,227,111,0.08) !important;
    border-left: none;
    border-top: none;
  }

  /* Hide text, show only icon for bad/mid cells to save space */
  .rp-pct-bad:not(:first-child) { background: rgba(239,68,68,0.06) !important; }
}

/* Kill global page-size 100px padding inside product page sections */
.rp-product-page .rp-prod-section .page-size,
.rp-product-page .rp-comp-section .page-size {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* =========================================================================
   RIPENING PROTOCOLS — Full-width premium showcase
   ========================================================================= */
.rp-crop-showcase {
  background: var(--rp-green-900);
  padding: 80px 0 0;
}
.rp-crop-showcase-header {
  text-align: center;
  padding: 0 24px 56px;
  max-width: 640px;
  margin: 0 auto;
}
.rp-crop-showcase-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #fff;
  margin: 12px 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.rp-crop-showcase-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin: 0;
}

/* 6-tile grid — 3 cols × 2 rows, full bleed */
.rp-crop-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Individual tile */
.rp-crop-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
  border-right: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: background 300ms, box-shadow 300ms;
  cursor: default;
  background: transparent;
}
.rp-crop-tile:nth-child(3n) { border-right: none; }
.rp-crop-tile:nth-child(4),
.rp-crop-tile:nth-child(5),
.rp-crop-tile:nth-child(6) { border-bottom: none; }

/* Hover */
.rp-crop-tile:hover { background: rgba(111,227,111,0.04); }

/* Green glow line at top on hover */
.rp-crop-tile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--rp-green-800), var(--rp-accent));
  opacity: 0;
  transition: opacity 300ms;
}
.rp-crop-tile:hover::before { opacity: 1; }

/* Fruit image — large, offset to right, partially cropped */
.rp-crop-tile-img-wrap {
  position: absolute;
  right: -20px;
  top: -10px;
  width: 180px;
  height: 180px;
  pointer-events: none;
  opacity: 0.92;
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1), opacity 350ms;
}
.rp-crop-tile:hover .rp-crop-tile-img-wrap {
  transform: translate(-6px, 6px) scale(1.05);
  opacity: 1;
}
.rp-crop-tile-img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,0.5));
}

/* Body content */
.rp-crop-tile-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
}
.rp-crop-tile-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  line-height: 1;
}

/* Stats row */
.rp-crop-tile-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.rp-crop-tile-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.rp-crop-tile-stat-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--rp-accent);
  line-height: 1;
  font-family: var(--font-2);
  letter-spacing: -0.01em;
}
.rp-crop-tile-stat-unit {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rp-crop-tile-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.rp-crop-tile-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .rp-crop-showcase-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-crop-tile:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.07); }
  .rp-crop-tile:nth-child(2n) { border-right: none; }
  .rp-crop-tile:nth-child(4),
  .rp-crop-tile:nth-child(5),
  .rp-crop-tile:nth-child(6) { border-bottom: 1px solid rgba(255,255,255,0.07); }
  .rp-crop-tile:nth-child(5),
  .rp-crop-tile:nth-child(6) { border-bottom: none; }
  .rp-crop-tile-img-wrap { width: 130px; height: 130px; }
}

/* Mobile: stack image above content, no absolute overlap */
@media (max-width: 575px) {
  .rp-crop-showcase { padding-top: 52px; }
  .rp-crop-showcase-grid { grid-template-columns: 1fr 1fr; }

  .rp-crop-tile {
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Image block at top */
  .rp-crop-tile-img-wrap {
    position: relative;
    right: auto; top: auto;
    width: 100%;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px 4px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .rp-crop-tile-img {
    width: auto;
    height: 90px;
    object-fit: contain;
  }

  /* Text block below */
  .rp-crop-tile-body {
    padding: 14px 14px 16px;
    width: 100%;
    margin-top: 0;
  }
  .rp-crop-tile-name { font-size: 0.95rem; margin-bottom: 10px; }
  .rp-crop-tile-stats { gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
  .rp-crop-tile-stat-val { font-size: 0.9rem; }
  .rp-crop-tile-stat-unit { font-size: 0.6rem; }
  .rp-crop-tile-divider { height: 20px; }
  .rp-crop-tile-note { font-size: 0.7rem; }

  /* Border fixes for 2-col grid */
  .rp-crop-tile:nth-child(3n) { border-right: 1px solid rgba(255,255,255,0.07); }
  .rp-crop-tile:nth-child(2n) { border-right: none; }
  .rp-crop-tile:nth-child(5),
  .rp-crop-tile:nth-child(6) { border-bottom: none; }
}

/* =========================================================================
   Crop ripening reference — active stage state + CTA strip
   ========================================================================= */
.rp-banana-zone.is-active {
  background: radial-gradient(circle at 50% 50%, rgba(111, 227, 111, 0.28) 0%, transparent 65%);
}
.rp-banana-zone.is-active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.rp-banana-tick {
  cursor: pointer;
  transition: color 200ms;
}
.rp-banana-tick.is-active em,
.rp-banana-tick.is-active b {
  color: var(--rp-green-900);
  font-weight: 700;
}
.rp-banana-tick.is-active::before {
  background: var(--rp-accent);
  box-shadow: 0 0 0 4px rgba(111, 227, 111, 0.18);
}

/* The "We dose for that" CTA strip below the crop reference */
.rp-cropref-cta {
  margin-top: 36px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--rp-green-900) 0%, var(--rp-green-800) 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.rp-cropref-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 100% 50%, rgba(111, 227, 111, 0.18) 0%, transparent 60%);
  pointer-events: none;
}
.rp-cropref-cta-text {
  position: relative;
  flex: 1 1 380px;
}
.rp-cropref-cta-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-accent);
  margin-bottom: 8px;
}
.rp-cropref-cta-headline {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.rp-cropref-cta-headline span {
  color: var(--rp-accent);
}
.rp-cropref-cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--rp-accent);
  color: var(--rp-green-900);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 200ms, box-shadow 200ms;
  white-space: nowrap;
}
.rp-cropref-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(111, 227, 111, 0.45);
  color: var(--rp-green-900);
}
.rp-cropref-cta-btn i {
  font-size: 12px;
  transition: transform 200ms;
}
.rp-cropref-cta-btn:hover i {
  transform: translateX(3px);
}
@media (max-width: 768px) {
  .rp-cropref-cta {
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
  }
  .rp-cropref-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================================
   Crop ripening reference — visual upgrade
   - Gradient gauge replacing flat ruler track
   - Stagger animation on banana strip entrance
   - Slide-in stage detail panel with stat cards
   - Cleaner tick typography
   ========================================================================= */

/* ── Tick label refresh ─────────────────────────────────────────────────── */
.rp-banana-tick em {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rp-green-700);
  font-style: normal;
}
.rp-banana-tick b {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(15, 42, 20, 0.55);
}
.rp-banana-tick.is-active em {
  color: var(--rp-green-900);
}
.rp-banana-tick.is-active b {
  color: var(--rp-green-800);
  font-weight: 600;
}

/* ── Gradient ripening gauge (replaces flat green track) ────────────────── */
.rp-banana-track {
  height: 6px !important;
  border-radius: 999px;
  background: linear-gradient(90deg,
    #2a7a2a 0%,
    #6fb436 25%,
    #c8d442 50%,
    #f0d028 75%,
    #ffd54a 100%
  ) !important;
  opacity: 0.18;
  position: relative;
  overflow: visible;
}
.rp-banana-strip.is-active .rp-banana-track {
  opacity: 1;
  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}
.rp-banana-track::after {
  display: none !important;
}
/* Floating dots above the gauge for each tick */
.rp-banana-tick {
  position: relative;
  padding-top: 18px;
}
.rp-banana-tick::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(15, 42, 20, 0.30);
  transition: all 260ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
.rp-banana-tick.is-active::before {
  background: var(--rp-accent);
  border-color: var(--rp-green-800);
  box-shadow: 0 0 0 5px rgba(111, 227, 111, 0.22);
  transform: translateX(-50%) scale(1.15);
}
.rp-banana-tick:hover::before {
  border-color: var(--rp-green-700);
  transform: translateX(-50%) scale(1.1);
}

/* ── Stagger entrance animation for the banana strip image ──────────────── */
.rp-banana-img {
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-banana-strip:not(.is-active) .rp-banana-img {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}
.rp-banana-strip.is-active .rp-banana-img {
  opacity: 1;
  transform: none;
}
/* Stagger reveal on the gauge ticks */
.rp-banana-strip .rp-banana-tick {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rp-banana-strip.is-active .rp-banana-tick {
  opacity: 1;
  transform: none;
}
.rp-banana-strip.is-active .rp-banana-tick:nth-child(1) { transition-delay: 250ms; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(2) { transition-delay: 350ms; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(3) { transition-delay: 450ms; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(4) { transition-delay: 550ms; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(5) { transition-delay: 650ms; }
.rp-banana-strip.is-active .rp-banana-tick:nth-child(6) { transition-delay: 750ms; }

/* ── Stage detail panel ─────────────────────────────────────────────────── */
.rp-stage-panel {
  margin-top: 28px;
  padding: 24px 28px;
  background: linear-gradient(135deg, #ffffff 0%, #faf6ee 100%);
  border: 1px solid rgba(15, 42, 20, 0.10);
  border-radius: 16px;
  box-shadow: 0 18px 40px -24px rgba(22, 61, 31, 0.20);
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  gap: 32px;
  align-items: center;
  transition: box-shadow 240ms;
}
.rp-stage-panel.is-flashing {
  animation: rp-stage-flash 600ms ease-out;
}
@keyframes rp-stage-flash {
  0%   { box-shadow: 0 18px 40px -24px rgba(22, 61, 31, 0.20), 0 0 0 0 rgba(111, 227, 111, 0.0); }
  35%  { box-shadow: 0 18px 40px -24px rgba(22, 61, 31, 0.30), 0 0 0 4px rgba(111, 227, 111, 0.30); }
  100% { box-shadow: 0 18px 40px -24px rgba(22, 61, 31, 0.20), 0 0 0 0 rgba(111, 227, 111, 0.0); }
}

.rp-stage-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  border-right: 1px solid rgba(15, 42, 20, 0.08);
  padding-right: 32px;
}
.rp-stage-panel-num {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.rp-stage-panel-num-prefix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rp-green-700);
  margin-bottom: 4px;
}
.rp-stage-panel-num-val {
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 800;
  color: var(--rp-green-900);
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.rp-stage-panel-title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rp-stage-panel-name {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 700;
  color: var(--rp-green-900);
  line-height: 1.2;
}
.rp-stage-panel-sub {
  font-size: 0.85rem;
  color: rgba(15, 42, 20, 0.62);
  line-height: 1.4;
}

.rp-stage-panel-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.rp-stage-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 14px;
  background: rgba(111, 227, 111, 0.06);
  border: 1px solid rgba(111, 227, 111, 0.18);
  border-radius: 12px;
  position: relative;
}
.rp-stage-stat i {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  font-size: 14px;
  color: var(--rp-green-700);
  opacity: 0.55;
}
[dir="rtl"] .rp-stage-stat i {
  right: auto;
  left: 14px;
}
.rp-stage-stat-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--rp-green-900);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rp-stage-stat-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(15, 42, 20, 0.55);
}

@media (max-width: 991px) {
  .rp-stage-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
  }
  .rp-stage-panel-head {
    border-right: none;
    border-bottom: 1px solid rgba(15, 42, 20, 0.08);
    padding-right: 0;
    padding-bottom: 18px;
  }
  .rp-stage-panel-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Compact chart so chart + gauge + protocol fit one viewport ─────────── */
.rp-figure--strip .rp-banana-img-wrap {
  aspect-ratio: 24 / 7;
  overflow: hidden;
  position: relative;
}
.rp-figure--strip img.rp-banana-img {
  width: 100%;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}
@media (max-width: 991px) {
  .rp-figure--strip .rp-banana-img-wrap { aspect-ratio: 16 / 7; }
}

/* ── Unified card: visually merge gauge + stage protocol panel ──────────── */
/* Negative-pull the stage panel up so it sits flush with the gauge card,
   making them read as a single continuous piece of UI */
.rp-stage-panel {
  position: relative;
  margin-top: -1px !important;
  background: var(--rp-cream) !important;
  border: 1px solid rgba(15, 42, 20, 0.10) !important;
  border-top: 1px dashed rgba(15, 42, 20, 0.18) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 16px 40px -20px rgba(15, 42, 20, 0.35) !important;
  padding: 22px 28px !important;
}
/* Hide the old triangle pointer + STAGE PROTOCOL pill — they're now in the gauge area */
.rp-stage-panel::before,
.rp-stage-panel::after {
  display: none !important;
}
/* Pull the figure's bottom rounded corners off so it merges seamlessly with the panel below */
.rp-figure--strip {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
  box-shadow: 0 -4px 0 0 var(--rp-cream), 0 16px 40px -20px rgba(15, 42, 20, 0.35) !important;
}
.rp-stage-panel-num-val {
  background: linear-gradient(135deg, var(--rp-green-900) 0%, var(--rp-green-700) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* "STAGE PROTOCOL" label sits inline with the gauge — compact vertical layout */
.rp-banana-ruler {
  position: relative;
  margin-bottom: 0 !important;
  padding: 12px 22px 10px 150px !important;  /* left-pad to clear the pill */
}
.rp-banana-ruler::before {
  content: 'STAGE PROTOCOL';
  position: absolute;
  top: 50%;
  left: 22px;
  transform: translateY(-50%);
  padding: 4px 11px;
  background: var(--rp-green-900);
  color: var(--rp-accent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  border-radius: 999px;
  z-index: 3;
  white-space: nowrap;
  box-shadow: 0 4px 10px -4px rgba(15, 42, 20, 0.30);
}
/* Tighten ruler internals */
.rp-banana-ticks { margin-top: 8px !important; }
.rp-banana-tick { padding-top: 14px !important; }
.rp-banana-tick::before { top: -12px !important; width: 10px !important; height: 10px !important; }
.rp-banana-tick em { font-size: 11px !important; }
.rp-banana-tick b { font-size: 10px !important; }
@media (max-width: 768px) {
  .rp-banana-ruler { padding: 38px 16px 8px !important; }
  .rp-banana-ruler::before { top: 8px; left: 16px; transform: none; }
}