@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

:root { --background: #f8f7f1; --foreground: #1e2923; --forest: #183d32; --forest-deep: #102e26; --cream: #f1eee3; --paper: #fffefa; --muted: #68736c; --line: #d9ded5; --gold: #c3a76b; --radius: 1.25rem; }
@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-primary: var(--forest); --color-primary-foreground: var(--paper); --color-muted-foreground: var(--muted); --color-border: var(--line); --font-sans: 'DM Sans', sans-serif; --font-serif: 'Cormorant Garamond', serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--background); }
body { margin: 0; background: var(--background); color: var(--foreground); font-family: 'DM Sans', sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
.container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(248,247,241,.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(24,61,50,.1); }
.nav-shell { width: min(1280px, calc(100% - 48px)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--forest); font-size: 15px; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.brand em { font-weight: 400; font-style: italic; }
.brand-mark { width: 33px; height: 33px; border: 1px solid var(--forest); border-radius: 50%; display: grid; place-items: center; font: 23px/1 'Cormorant Garamond', serif; font-style: italic; }
.main-nav { display: flex; align-items: center; gap: 25px; color: #54625a; font-size: 12px; font-weight: 600; }
.main-nav a:not(.nav-cta):hover, .text-link:hover { color: var(--forest); }
.nav-cta { padding: 12px 17px; color: var(--paper); background: var(--forest); border-radius: 999px; }
.nav-cta span, .button span, .text-link span { margin-left: 8px; }
.menu-toggle { display: none; border: 0; background: transparent; }
.hero { overflow: hidden; background: var(--cream); }
.hero-grid { min-height: 625px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 52px; padding: 82px 0 76px; }
.eyebrow { margin: 0 0 20px; color: #718278; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { color: var(--forest); font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: -.045em; line-height: .95; }
h1 { max-width: 650px; margin-bottom: 25px; font-size: clamp(52px, 6vw, 83px); }
h2 { margin-bottom: 22px; font-size: clamp(43px, 5vw, 66px); }
h1 i, h2 i { color: #779583; font-style: italic; }
.hero-lede, .lead { max-width: 540px; color: #5e6a62; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 33px; }
.button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 15px 22px; font-size: 12px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(24,61,50,.15); }
.button-primary { background: var(--forest); color: var(--paper); }
.button-quiet { color: var(--forest); border: 1px solid #c4cec5; }
.button-light { background: var(--paper); color: var(--forest); }
.microcopy { margin-top: 22px; color: #829087; font-size: 11px; }
.hero-product { position: relative; min-height: 480px; display: grid; place-items: center; }
.hero-product img { position: relative; z-index: 1; width: min(100%, 470px); max-height: 540px; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 22px 20px rgba(35,57,44,.2)); }
.product-halo { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: #dfe4d7; }
.image-caption { position: absolute; bottom: 8px; right: 5%; z-index: 2; color: #829087; font-size: 10px; }
.facts-section { background: var(--paper); padding: 0 0 40px; }
.facts-grid { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid var(--line); }
.fact { padding: 32px 18px 30px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.fact:first-child { padding-left: 0; }.fact:last-child { border-right: 0; }.fact strong { color: var(--forest); font: 500 40px/1 'Cormorant Garamond', serif; }.fact span { color: var(--forest); font-size: 13px; font-weight: 700; }.fact small, .section-note { color: #89938b; font-size: 11px; }.section-note { text-align: center; margin: 22px 0 0; }
.section { padding: 115px 0; }.editorial-grid, .split-section, .ingredient-grid, .pros-grid, .faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }.prose { max-width: 650px; color: #5e6a62; font-size: 16px; line-height: 1.9; }.prose p { margin-bottom: 24px; }
.feature-band, .soft-section, .comparison-section { background: var(--cream); padding: 110px 0; }.split-section { align-items: center; }.botanical-panel { min-height: 310px; padding: 42px; background: var(--forest); color: var(--paper); border-radius: 2rem; position: relative; overflow: hidden; }.botanical-panel:after { content: ''; position: absolute; inset: 35px; border: 1px solid rgba(255,255,255,.22); border-radius: 50% 45% 48% 55%; transform: rotate(-28deg); }.leaf-line { display: block; font: italic 140px/1 'Cormorant Garamond', serif; color: var(--gold); }.botanical-panel p { position: absolute; z-index: 1; bottom: 28px; font: 400 33px/1 'Cormorant Garamond', serif; }.botanical-panel i { color: #b7ceb5; }
.text-link { display: inline-block; color: var(--forest); font-size: 12px; font-weight: 700; margin-top: 22px; }
.section-heading { max-width: 680px; margin-bottom: 52px; }.section-heading p:last-child { color: var(--muted); line-height: 1.8; }.section-heading.compact { margin-bottom: 42px; }.cards-grid { display: grid; gap: 16px; }.six-cards { grid-template-columns: repeat(3,1fr); }.three-cards { grid-template-columns: repeat(3,1fr); }.info-card, .profile-card, .shopper-cards article { background: var(--paper); border: 1px solid rgba(24,61,50,.08); border-radius: 1.25rem; padding: 28px; min-height: 190px; box-shadow: 0 9px 28px rgba(38,56,45,.04); }.card-number { color: var(--gold); font-size: 11px; font-weight: 700; }.info-card h3, .profile-card h3, .shopper-cards h3, .step h3 { color: var(--forest); font: 600 22px/1.1 'Cormorant Garamond', serif; margin: 28px 0 11px; }.info-card p, .profile-card p, .shopper-cards p, .step p { color: var(--muted); font-size: 13px; line-height: 1.7; }.ingredient-section { padding: 100px 0; background: var(--forest); color: var(--paper); }.ingredient-section h2 { color: var(--paper); }.ingredient-callout { padding: 36px; border-left: 1px solid var(--gold); }.quote-mark { color: var(--gold); font: 70px/.6 'Cormorant Garamond', serif; }.ingredient-callout p { max-width: 550px; font: 26px/1.35 'Cormorant Garamond', serif; }.ingredient-callout .text-link { color: var(--paper); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; }.step { border-top: 1px solid var(--forest); padding-top: 20px; }.step > span { color: var(--gold); font-size: 12px; font-weight: 700; }.step h3 { margin-top: 45px; font-size: 29px; }.safety-note { margin-top: 55px; padding: 24px 28px; border: 1px solid #d8dfd7; display: flex; gap: 26px; align-items: center; border-radius: 12px; }.safety-note strong { color: var(--forest); font: 600 20px 'Cormorant Garamond', serif; white-space: nowrap; }.safety-note p { margin: 0; color: var(--muted); font-size: 12px; }.profile-card { min-height: 210px; }.profile-card h3 { margin-top: 10px; font-size: 27px; }.profile-card span { display: block; margin-top: 25px; color: #849389; font-size: 11px; font-weight: 700; }
.pros-list { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }.pros-list h3 { color: var(--forest); font: 600 23px 'Cormorant Garamond', serif; }.pros-list h3 span { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: #dfe9df; font-family: 'DM Sans', sans-serif; font-size: 15px; }.pros-list ul { list-style: none; padding: 0; margin: 22px 0 0; }.pros-list li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }.comparison-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); }.table-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--line); }.table-row:first-child { border-top: 0; }.table-row span { padding: 17px 20px; color: var(--muted); font-size: 12px; }.table-row span + span { border-left: 1px solid var(--line); }.table-head { background: var(--forest); }.table-head span { color: var(--paper); font-weight: 700; }.shopper-cards article { min-height: 220px; }.shopper-icon { color: var(--gold); font-size: 13px; }.shopper-cards h3 { margin-top: 25px; font-size: 27px; }
.takeaway-section { padding: 100px 0; background: #e9ede4; }.takeaway { max-width: 860px; text-align: center; }.takeaway h2 { font-size: clamp(40px,5vw,65px); }.takeaway h2 span { font-family: sans-serif; font-size: .6em; }.takeaway p:last-child { max-width: 680px; margin: 0 auto; color: #617068; line-height: 1.8; }.cta-section { padding: 72px 0; background: var(--forest); color: var(--paper); }.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }.cta-inner h2 { color: var(--paper); max-width: 580px; margin-bottom: 15px; }.cta-inner p:last-child { max-width: 560px; margin: 0; color: #b9c8be; font-size: 14px; }.faq-grid { align-items: start; }.faq-list { border-top: 1px solid var(--line); }.faq-item { border-bottom: 1px solid var(--line); }.faq-item button { width: 100%; padding: 20px 0; border: 0; background: transparent; color: var(--forest); display: flex; justify-content: space-between; text-align: left; cursor: pointer; font: 600 17px 'Cormorant Garamond', serif; }.faq-item button b { color: var(--gold); font: 400 22px sans-serif; }.faq-item p { max-width: 580px; color: var(--muted); font-size: 13px; padding: 0 40px 20px 0; margin: 0; }
.footer { padding: 55px 0 25px; background: var(--forest-deep); color: #c5d0c8; }.footer-brand { color: var(--paper); }.footer-top { display: flex; justify-content: space-between; gap: 60px; padding-bottom: 55px; }.footer-top p { margin: 20px 0 0; color: #8da197; font-size: 12px; }.footer-links { max-width: 430px; display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: 14px 25px; }.footer-links a { color: #b8c7bd; font-size: 11px; }.footer-links a:hover { color: var(--paper); }.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 21px; display: flex; justify-content: space-between; gap: 20px; color: #758b7e; font-size: 10px; }
@media (max-width: 800px) { .container, .nav-shell { width: min(100% - 32px, 600px); }.menu-toggle { display: grid; gap: 4px; padding: 10px 0 10px 10px; }.menu-toggle span { display: block; width: 23px; height: 1px; background: var(--forest); }.main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 20px 24px 28px; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 17px; }.main-nav.is-open { display: flex; }.nav-cta { text-align: center; }.hero-grid { grid-template-columns: 1fr; min-height: auto; padding: 66px 0 48px; gap: 25px; }.hero-product { min-height: 340px; }.product-halo { width: 280px; height: 280px; }.hero-product img { max-height: 350px; }.facts-grid { grid-template-columns: repeat(2,1fr); }.fact:nth-child(2) { border-right: 0; }.fact:nth-child(3), .fact:nth-child(4) { border-top: 1px solid var(--line); }.fact:nth-child(3) { padding-left: 0; }.editorial-grid, .split-section, .ingredient-grid, .pros-grid, .faq-grid { grid-template-columns: 1fr; gap: 35px; }.section { padding: 76px 0; }.feature-band, .soft-section, .comparison-section { padding: 76px 0; }.botanical-panel { min-height: 250px; }.six-cards, .three-cards, .steps-grid { grid-template-columns: 1fr; }.steps-grid { gap: 32px; }.step h3 { margin-top: 25px; }.safety-note, .cta-inner, .footer-top, .footer-bottom { flex-direction: column; align-items: flex-start; }.safety-note { gap: 8px; }.pros-list { grid-template-columns: 1fr; gap: 35px; }.table-row span { padding: 13px 10px; font-size: 10px; }.table-row span:first-child { font-weight: 700; }.ingredient-callout p { font-size: 22px; }.footer-links { justify-content: flex-start; }.footer-bottom { gap: 8px; } }
@media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal .7s ease both; }.hero-product { animation-delay: .1s; } } @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }