/* ============================================================
   PureVitalBody — Production CSS (Replaces Tailwind CDN)
   Self-contained, purged, minified-ready
   ============================================================ */

/* ── Reset & Base ── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px;height:100%;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:"DM Sans",system-ui,-apple-system,sans-serif;background:#fefdf8;
  color:#1c1c1e;line-height:1.7;min-height:100%;overflow-x:hidden}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,textarea,select{font-family:inherit;font-size:1rem}
:focus-visible{outline:3px solid #2a9d5c;outline-offset:3px;border-radius:4px}

/* ── Skip Nav (Accessibility) ── */
.skip-nav{position:absolute;top:-40px;left:0;background:#0f4526;color:#fff;
  padding:8px 16px;border-radius:0 0 4px 4px;z-index:10000;
  font-size:.9rem;font-weight:600;transition:top .2s}
.skip-nav:focus{top:0}

/* ── Color Variables ── */
:root{
  --forest-50:#f0faf4;--forest-100:#dcf5e7;--forest-200:#b3e8ca;
  --forest-300:#7dd4a8;--forest-400:#4aba82;--forest-500:#2a9d5c;
  --forest-600:#1a7a44;--forest-700:#155e35;--forest-800:#0f4526;--forest-900:#0a2e18;
  --cream-50:#fefdf8;--cream-100:#fdf9ed;--cream-200:#f9f0d0;
  --charcoal-800:#1c1c1e;--charcoal-900:#111110;
  --orange-50:#fff7ed;--orange-100:#ffedd5;--orange-400:#fb923c;
  --orange-500:#f97316;--orange-600:#ea580c;--orange-700:#c2410c;
  --amber-50:#fffbeb;--amber-100:#fef3c7;--amber-400:#fbbf24;
  --amber-500:#f59e0b;--amber-600:#d97706;--amber-700:#b45309;
  --red-50:#fef2f2;--red-100:#fee2e2;--red-400:#f87171;
  --red-500:#ef4444;--red-600:#dc2626;--red-700:#b91c1c;
  --lime-50:#f7fee7;--lime-100:#ecfccb;--lime-600:#65a30d;--lime-700:#4d7c0f;
  --green-50:#f0fdf4;--green-100:#dcfce7;--green-600:#16a34a;--green-700:#15803d;
  --teal-100:#ccfbf1;--teal-700:#0f766e;
  --violet-50:#f5f3ff;--violet-100:#ede9fe;--violet-700:#6d28d9;
  --gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;
  --gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;
  --gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;
  --white:#ffffff;
}

/* ── Typography ── */
.font-display{font-family:"DM Serif Display",Georgia,serif}
.font-body{font-family:"DM Sans",system-ui,sans-serif}

/* ── Layout ── */
.max-w-7xl{max-width:80rem;margin-left:auto;margin-right:auto}
.max-w-6xl{max-width:72rem;margin-left:auto;margin-right:auto}
.max-w-5xl{max-width:64rem;margin-left:auto;margin-right:auto}
.max-w-4xl{max-width:56rem;margin-left:auto;margin-right:auto}
.max-w-3xl{max-width:48rem;margin-left:auto;margin-right:auto}
.max-w-2xl{max-width:42rem;margin-left:auto;margin-right:auto}
.max-w-xl{max-width:36rem;margin-left:auto;margin-right:auto}
.max-w-none{max-width:none}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-7{padding-top:1.75rem;padding-bottom:1.75rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.pt-3{padding-top:.75rem}
.pt-4{padding-top:1rem}
.pt-5{padding-top:1.25rem}
.pt-6{padding-top:1.5rem}
.pt-8{padding-top:2rem}
.pt-16{padding-top:4rem}
.pt-24{padding-top:6rem}
.pt-32{padding-top:8rem}
.pb-4{padding-bottom:1rem}
.pb-8{padding-bottom:2rem}
.pb-12{padding-bottom:3rem}
.pb-24{padding-bottom:6rem}
.pb-32{padding-bottom:8rem}
.pb-40{padding-bottom:10rem}
.p-3{padding:.75rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-7{padding:1.75rem}
.p-8{padding:2rem}
.pl-4{padding-left:1rem}
.pl-5{padding-left:1.25rem}
.pr-12{padding-right:3rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-7{margin-top:1.75rem}
.mt-8{margin-top:2rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.mt-14{margin-top:3.5rem}
.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-14{margin-bottom:3.5rem}
.mb-16{margin-bottom:4rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-16{gap:4rem}
.space-y-1>*+*{margin-top:.25rem}
.space-y-2>*+*{margin-top:.5rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-y-8>*+*{margin-top:2rem}
.space-x-3>*+*{margin-left:.75rem}

/* ── Flexbox ── */
.flex{display:flex}
.inline-flex{display:inline-flex}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.flex-grow{flex-grow:1}
.flex-shrink-0{flex-shrink:0}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}

/* ── Grid ── */
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.col-span-1{grid-column:span 1/span 1}

/* ── Display ── */
.block{display:block}
.inline-block{display:inline-block}
.inline{display:inline}
.hidden{display:none}
.contents{display:contents}

/* ── Position ── */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.top-1\/2{top:50%}
.bottom-0{bottom:0}
.left-0{left:0}
.right-0{right:0}
.top-4{top:1rem}
.bottom-4{bottom:1rem}
.left-4{left:1rem}
.right-4{right:1rem}
.-top-16{top:-4rem}
.-top-24{top:-6rem}
.-right-16{right:-4rem}
.-right-24{right:-6rem}
.-left-16{left:-4rem}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-50{z-index:50}
.z-999{z-index:999}
.overflow-hidden{overflow:hidden}
.overflow-x-auto{overflow-x:auto}
.overflow-y-auto{overflow-y:auto}

/* ── Sizing ── */
.w-full{width:100%}
.w-auto{width:auto}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-16{width:4rem}
.w-20{width:5rem}
.w-80{width:20rem}
.w-96{width:24rem}
.h-full{height:100%}
.h-auto{height:auto}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-16{height:4rem}
.h-20{height:5rem}
.h-48{height:12rem}
.h-64{height:16rem}
.h-80{height:20rem}
.h-96{height:24rem}
.min-h-screen{min-height:100vh}
.min-w-0{min-width:0}
.max-w-md{max-width:28rem;margin-left:auto;margin-right:auto}

/* ── Border & Radius ── */
.border{border-width:1px;border-style:solid}
.border-0{border-width:0}
.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-l-4{border-left-width:4px;border-left-style:solid}
.rounded{border-radius:.25rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

/* ── Shadows ── */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}
.shadow-md{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}
.shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}

/* ── Text ── */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-7xl{font-size:4.5rem;line-height:1}
.text-8xl{font-size:6rem;line-height:1}
.font-light{font-weight:300}
.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.italic{font-style:italic}
.not-italic{font-style:normal}
.uppercase{text-transform:uppercase}
.capitalize{text-transform:capitalize}
.tracking-wide{letter-spacing:.025em}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-relaxed{line-height:1.625}
.leading-loose{line-height:2}
.text-left{text-align:left}
.text-center{text-align:center}
.text-right{text-align:right}
.underline{text-decoration:underline}
.no-underline{text-decoration:none}
.whitespace-nowrap{white-space:nowrap}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.resize-y{resize:vertical}
.select-none{user-select:none}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.list-none{list-style:none}

/* ── Colors — Text ── */
.text-white{color:#fff}
.text-gray-400{color:#9ca3af}
.text-gray-500{color:#6b7280}
.text-gray-600{color:#4b5563}
.text-gray-700{color:#374151}
.text-charcoal-800{color:#1c1c1e}
.text-charcoal-900{color:#111110}
.text-forest-100{color:#dcf5e7}
.text-forest-200{color:#b3e8ca}
.text-forest-300{color:#7dd4a8}
.text-forest-600{color:#1a7a44}
.text-forest-700{color:#155e35}
.text-forest-800{color:#0f4526}
.text-orange-700{color:#c2410c}
.text-amber-100{color:#fef3c7}
.text-amber-200{color:#fde68a}
.text-amber-700{color:#b45309}
.text-amber-800{color:#92400e}
.text-red-400{color:#f87171}
.text-red-500{color:#ef4444}
.text-red-700{color:#b91c1c}
.text-lime-600{color:#65a30d}
.text-lime-700{color:#4d7c0f}
.text-green-600{color:#16a34a}
.text-green-700{color:#15803d}
.text-green-800{color:#166534}
.text-teal-100{color:#ccfbf1}
.text-teal-200{color:#99f6e4}
.text-teal-700{color:#0f766e}
.text-violet-100{color:#ede9fe}
.text-violet-700{color:#6d28d9}
.text-stone-100{color:#f5f5f4}
.text-stone-200{color:#e7e5e4}
.text-stone-300{color:#d6d3d1}

/* ── Colors — Background ── */
.bg-white{background-color:#fff}
.bg-cream-50{background-color:#fefdf8}
.bg-gray-50{background-color:#f9fafb}
.bg-gray-100{background-color:#f3f4f6}
.bg-gray-200{background-color:#e5e7eb}
.bg-gray-800{background-color:#1f2937}
.bg-forest-50{background-color:#f0faf4}
.bg-forest-100{background-color:#dcf5e7}
.bg-forest-200{background-color:#b3e8ca}
.bg-forest-600{background-color:#1a7a44}
.bg-forest-700{background-color:#155e35}
.bg-forest-800{background-color:#0f4526}
.bg-forest-900{background-color:#0a2e18}
.bg-orange-50{background-color:#fff7ed}
.bg-orange-100{background-color:#ffedd5}
.bg-orange-500{background-color:#f97316}
.bg-orange-600{background-color:#ea580c}
.bg-amber-50{background-color:#fffbeb}
.bg-amber-100{background-color:#fef3c7}
.bg-amber-200{background-color:#fde68a}
.bg-amber-500{background-color:#f59e0b}
.bg-amber-600{background-color:#d97706}
.bg-red-50{background-color:#fef2f2}
.bg-red-100{background-color:#fee2e2}
.bg-red-200{background-color:#fecaca}
.bg-red-500{background-color:#ef4444}
.bg-red-600{background-color:#dc2626}
.bg-red-700{background-color:#b91c1c}
.bg-lime-50{background-color:#f7fee7}
.bg-lime-100{background-color:#ecfccb}
.bg-lime-600{background-color:#65a30d}
.bg-lime-700{background-color:#4d7c0f}
.bg-green-50{background-color:#f0fdf4}
.bg-green-100{background-color:#dcfce7}
.bg-green-200{background-color:#bbf7d0}
.bg-teal-100{background-color:#ccfbf1}
.bg-violet-50{background-color:#f5f3ff}
.bg-violet-100{background-color:#ede9fe}
.bg-charcoal-900{background-color:#111110}
.bg-transparent{background-color:transparent}

/* ── Colors — Border ── */
.border-white{border-color:#fff}
.border-gray-100{border-color:#f3f4f6}
.border-gray-200{border-color:#e5e7eb}
.border-gray-300{border-color:#d1d5db}
.border-gray-800{border-color:#1f2937}
.border-cream-200{border-color:#f9f0d0}
.border-forest-100{border-color:#dcf5e7}
.border-forest-200{border-color:#b3e8ca}
.border-forest-300{border-color:#7dd4a8}
.border-forest-400{border-color:#4aba82}
.border-orange-100{border-color:#ffedd5}
.border-orange-200{border-color:#fed7aa}
.border-amber-100{border-color:#fef3c7}
.border-amber-200{border-color:#fde68a}
.border-red-200{border-color:#fecaca}
.border-lime-100{border-color:#ecfccb}
.border-green-100{border-color:#dcfce7}
.border-green-200{border-color:#bbf7d0}
.border-teal-100{border-color:#ccfbf1}
.border-violet-100{border-color:#ede9fe}
.border-violet-200{border-color:#ddd6fe}

/* ── Gradients ── */
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-from),var(--tw-gradient-to))}
.from-orange-50{--tw-gradient-from:#fff7ed}
.from-orange-100{--tw-gradient-from:#ffedd5}
.from-green-50{--tw-gradient-from:#f0fdf4}
.from-green-100{--tw-gradient-from:#dcfce7}
.from-amber-50{--tw-gradient-from:#fffbeb}
.from-amber-100{--tw-gradient-from:#fef3c7}
.from-red-50{--tw-gradient-from:#fef2f2}
.from-lime-50{--tw-gradient-from:#f7fee7}
.from-lime-100{--tw-gradient-from:#ecfccb}
.from-teal-100{--tw-gradient-from:#ccfbf1}
.from-violet-100{--tw-gradient-from:#ede9fe}
.from-yellow-50{--tw-gradient-from:#fefce8}
.from-yellow-100{--tw-gradient-from:#fef9c3}
.from-emerald-50{--tw-gradient-from:#ecfdf5}
.from-forest-800{--tw-gradient-from:#0f4526}
.from-stone-50{--tw-gradient-from:#fafaf9}
.to-yellow-50{--tw-gradient-to:#fefce8}
.to-emerald-50{--tw-gradient-to:#ecfdf5}
.to-orange-50{--tw-gradient-to:#fff7ed}
.to-pink-50{--tw-gradient-to:#fdf2f8}
.to-green-50{--tw-gradient-to:#f0fdf4}
.to-amber-50{--tw-gradient-to:#fffbeb}
.to-forest-600{--tw-gradient-to:#1a7a44}

/* ── Opacity ── */
.opacity-0{opacity:0}
.opacity-70{opacity:.7}
.opacity-80{opacity:.8}
.opacity-100{opacity:1}

/* ── Transitions ── */
.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}
.duration-200{transition-duration:.2s}
.duration-300{transition-duration:.3s}

/* ── Transform ── */
.-translate-y-1\/2{transform:translateY(-50%)}
.scale-105{transform:scale(1.05)}
.rotate-180{transform:rotate(180deg)}

/* ── Backdrop ── */
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* ── Object Fit ── */
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.object-center{object-position:center}

/* ── Vertical Align ── */
.align-middle{vertical-align:middle}
.align-top{vertical-align:top}

/* ── Table ── */
table{border-collapse:collapse;width:100%}
th,td{text-align:left}

/* ── Form elements ── */
input[type="email"],input[type="text"],input[type="search"],textarea,select{
  width:100%;border:1px solid var(--gray-200);border-radius:9999px;
  padding:.75rem 1.25rem;font-size:.9rem;background:#fff;
  transition:border-color .2s,box-shadow .2s;color:var(--charcoal-800)
}
input[type="email"]:focus,input[type="text"]:focus,
input[type="search"]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--forest-500);
  box-shadow:0 0 0 3px rgba(42,157,92,.15)
}
textarea{border-radius:1rem;resize:vertical}
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:.75rem;padding-right:2rem}
input[type="checkbox"]{width:1rem;height:1rem;accent-color:var(--forest-600)}
::placeholder{color:var(--gray-400)}

/* ============================================================
   COMPONENT STYLES
   ============================================================ */

/* ── Hero Gradient ── */
.hero-bg{background:linear-gradient(135deg,#0a2e18 0%,#1a6b3c 45%,#2a9d5c 100%)}
.hero-bg-teal{background:linear-gradient(135deg,#134e4a 0%,#0f766e 50%,#14b8a6 100%)}
.hero-bg-amber{background:linear-gradient(135deg,#78350f 0%,#b45309 50%,#d97706 100%)}
.hero-bg-stone{background:linear-gradient(135deg,#1c1917 0%,#44403c 50%,#78716c 100%)}
.hero-bg-violet{background:linear-gradient(135deg,#2e1065 0%,#4c1d95 50%,#6d28d9 100%)}

/* ── Deco elements ── */
.leaf-deco{position:absolute;opacity:.07;pointer-events:none;user-select:none}

/* ── Nav ── */
#site-header{transition:box-shadow .3s ease}
#site-header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}

/* ── Product card ── */
.product-card{transition:transform .3s ease,box-shadow .3s ease}
.product-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.13)}

/* ── Product image ── */
.product-img-wrap{display:block;position:relative;height:220px;overflow:hidden;background:inherit}
.product-img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;padding:16px;
  transition:transform .4s ease;z-index:1}
.product-img-wrap:hover .product-img{transform:scale(1.06)}
.img-fallback-content{display:none;position:absolute;inset:0;
  flex-direction:column;align-items:center;justify-content:center;z-index:2}
.product-img-wrap.img-fallback .product-img{display:none}
.product-img-wrap.img-fallback .img-fallback-content{display:flex}
.product-img-wrap.img-loaded::before{display:none}

/* Shimmer */
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.product-img-wrap::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  background-size:400px 100%;animation:shimmer 1.4s infinite;z-index:0;pointer-events:none}

/* ── Product badge overlays ── */
.badge-overlay{position:absolute;top:12px;left:12px;background:#f97316;color:#fff;
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:99px;z-index:3;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.badge-green{background:#1a7a44}
.badge-amber{background:#d97706}
.badge-red{background:#dc2626}
.badge-lime{background:#65a30d}

/* ── Rating stars ── */
.stars{color:#f59e0b;letter-spacing:2px}

/* ── Animations ── */
@keyframes pulse-green{0%,100%{box-shadow:0 0 0 0 rgba(42,157,92,.4)}50%{box-shadow:0 0 0 8px rgba(42,157,92,0)}}
.badge-pulse{animation:pulse-green 2.5s infinite}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
/* Disable on reduced motion */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .product-img-wrap::before{animation:none}
}

/* ── FAQ Accordion ── */
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-answer.open{max-height:600px;padding-bottom:16px}
.faq-icon{transition:transform .3s ease;display:inline-block}

/* ── Wave divider ── */
.wave-divider svg{display:block;width:100%}

/* ── Check & Cross ── */
.check{color:#2a9d5c}
.cross{color:#e53e3e}

/* ── Sticky mobile CTA ── */
#sticky-cta{display:none}
@media(max-width:768px){
  #sticky-cta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:999;
    padding:10px 12px;background:#fff;border-top:1px solid #e5e7eb;gap:8px;
    padding-bottom:max(10px,env(safe-area-inset-bottom))}
}

/* ── Article prose ── */
.prose h2{font-family:"DM Serif Display",serif;font-size:1.75rem;color:#0f4526;
  margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid #dcf5e7}
.prose h3{font-family:"DM Serif Display",serif;font-size:1.25rem;color:#155e35;
  margin:1.75rem 0 .75rem}
.prose p{margin-bottom:1.25rem;color:#374151;line-height:1.8}
.prose ul{list-style:none;padding:0;margin-bottom:1.25rem}
.prose ul li{padding:.35rem 0 .35rem 1.75rem;position:relative;color:#374151}
.prose ul li::before{content:"✓";position:absolute;left:0;color:#2a9d5c;font-weight:bold}
.prose blockquote{border-left:4px solid #2a9d5c;padding:1rem 1.5rem;background:#f0faf4;
  border-radius:0 12px 12px 0;margin:1.75rem 0;color:#374151;font-style:italic}
.prose strong{color:#1c1c1e;font-weight:600}
.prose a{color:#1a7a44;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:#0f4526}
.prose table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}
.prose th{background:#0f4526;color:#fff;padding:.75rem 1rem;text-align:left;font-weight:600}
.prose td{padding:.75rem 1rem;border-bottom:1px solid #f3f4f6;color:#374151}
.prose tr:hover td{background:#fefdf8}
.habit-card{border-left:4px solid #2a9d5c;background:#f0faf4;
  border-radius:0 16px 16px 0;padding:1.25rem 1.5rem;margin-bottom:1rem}
.rating-bar{height:8px;background:#e5e7eb;border-radius:99px;overflow:hidden}
.rating-fill{height:100%;background:linear-gradient(90deg,#2a9d5c,#4aba82);border-radius:99px}
.compare-cell{padding:1rem;border-bottom:1px solid #f3f4f6;vertical-align:top}

/* ── Comparison table ── */
.compare-table{width:100%;background:#fff;border-radius:1rem;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.1)}
.compare-table thead tr{background:#0f4526;color:#fff}
.compare-table th{padding:1rem .75rem;font-weight:600}
.compare-table td{padding:.875rem .75rem;border-bottom:1px solid #f3f4f6}
.compare-table tr:hover td{background:#fefdf8;transition:background .15s}

/* ── TOC ── */
.toc-link:hover{color:#2a9d5c}

/* ── Trust badges ── */
.trust-badge{display:flex;align-items:center;gap:.5rem;
  background:#f9fafb;border:1px solid #e5e7eb;border-radius:.75rem;
  padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;color:#4b5563}

/* ── Print styles ── */
@media print{
  #site-header,#sticky-cta,.reveal,.badge-pulse{animation:none!important}
  a[href]::after{content:" (" attr(href) ")"}
  .hero-bg{background:#fff!important;color:#000!important}
}

/* ── Focus styles ── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid #2a9d5c;outline-offset:3px;border-radius:4px}

/* ── Gradient text ── */
.grad-text{background:linear-gradient(135deg,#2a9d5c,#4aba82);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── Responsive ── */
@media(min-width:640px){
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .sm\:text-5xl{font-size:3rem;line-height:1}
  .sm\:block{display:block}
  .sm\:hidden{display:none}
}
@media(min-width:768px){
  .md\:flex{display:flex}
  .md\:hidden{display:none}
  .md\:block{display:block}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1}
  .md\:col-span-2{grid-column:span 2}
  .md\:col-span-4{grid-column:span 4}
  .md\:flex-row{flex-direction:row}
  .md\:items-end{align-items:flex-end}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:pt-32{padding-top:8rem}
  .md\:pb-40{padding-bottom:10rem}
  .md\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .md\:pt-40{padding-top:10rem}
}
@media(min-width:1024px){
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1}
  .lg\:block{display:block}
  .lg\:hidden{display:none}
  .lg\:px-8{padding-left:2rem;padding-right:2rem}
  .lg\:text-7xl{font-size:4.5rem;line-height:1}
  .lg\:grid-cols-\[1fr_280px\]{grid-template-columns:1fr 280px}
}
@media(min-width:1280px){
  .xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ── Utility: bg-white/95 ── */
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-white\/15{background-color:rgba(255,255,255,.15)}
.bg-white\/20{background-color:rgba(255,255,255,.2)}
.bg-white\/25{background-color:rgba(255,255,255,.25)}
.bg-forest-500\/40{background-color:rgba(42,157,92,.4)}
.bg-orange-400\/30{background-color:rgba(251,146,60,.3)}
.bg-green-400\/30{background-color:rgba(74,186,130,.3)}
.bg-amber-400\/30{background-color:rgba(251,191,36,.3)}
.bg-teal-400\/30{background-color:rgba(45,212,191,.3)}
.bg-stone-400\/30{background-color:rgba(167,158,147,.3)}
.bg-violet-400\/30{background-color:rgba(167,139,250,.3)}
.border-forest-400\/40{border-color:rgba(74,186,130,.4)}
.border-white\/30{border-color:rgba(255,255,255,.3)}
.border-white\/40{border-color:rgba(255,255,255,.4)}
.border-white\/60{border-color:rgba(255,255,255,.6)}
.border-orange-300\/40{border-color:rgba(253,186,116,.4)}
.border-green-300\/40{border-color:rgba(134,239,172,.4)}
.border-amber-300\/40{border-color:rgba(252,211,77,.4)}
.border-teal-300\/40{border-color:rgba(94,234,212,.4)}
.border-stone-300\/40{border-color:rgba(214,211,209,.4)}
.border-violet-300\/40{border-color:rgba(196,181,253,.4)}
.hover\:bg-white\/10:hover{background-color:rgba(255,255,255,.1)}
.hover\:bg-white\/25:hover{background-color:rgba(255,255,255,.25)}
.hover\:bg-forest-50:hover{background-color:#f0faf4}
.hover\:bg-forest-600:hover{background-color:#1a7a44}
.hover\:bg-forest-700:hover{background-color:#155e35}
.hover\:bg-orange-600:hover{background-color:#ea580c}
.hover\:bg-amber-600:hover{background-color:#d97706}
.hover\:bg-red-600:hover{background-color:#dc2626}
.hover\:bg-lime-700:hover{background-color:#4d7c0f}
.hover\:bg-gray-100:hover{background-color:#f3f4f6}
.hover\:bg-cream-100:hover{background-color:#fdf9ed}
.hover\:text-white:hover{color:#fff}
.hover\:text-forest-600:hover{color:#1a7a44}
.hover\:text-forest-700:hover{color:#155e35}
.hover\:border-forest-200:hover{border-color:#b3e8ca}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:shadow-md:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.hover\:underline:hover{text-decoration:underline}
.hover\:gap-3:hover{gap:.75rem}
.focus\:bg-white\/25:focus{background-color:rgba(255,255,255,.25)}
.focus\:outline-none:focus{outline:none}
.focus\:border-white\/60:focus{border-color:rgba(255,255,255,.6)}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--forest-500)}
.disabled\:opacity-60:disabled{opacity:.6}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}
.not-prose{/* reset prose inside prose */}

/* ── mt/mb responsive ── */
.-mt-1{margin-top:-.25rem}
.mt-0\.5{margin-top:.125rem}
.mb-0\.5{margin-bottom:.125rem}