/* Vynn — Official Brand Palette *//* Fonts loaded via <link> in HTML head for performance */@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap;}@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap;}@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap;}@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap;}@font-face { font-family: 'Gilroy-Center'; src: url('assets/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 85%; descent-override: 15%;}@font-face { font-family: 'Gilroy'; src: url('assets/fonts/Gilroy-Heavy.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap;}:root { /* Colors — VYNN Brand Palette */ --bg: #FBFBFB; --bg-warm: #F5F5F5; --bg-sage: #EFF5F0; --surface: #FFFFFF; --surface-2: #F3F3F3; --surface-elevated: #FEFEFE; --text-main: #013B21; --text-secondary: #3D5C47; --text-muted: #8A9A8E; --primary: #013B21; --primary-fg: #FFFFFF; --accent: #2D823D; --accent-soft: #4A9954; --accent-light: #E6F2E8; --accent-glow: rgba(45, 130, 61, 0.1); --purple: #2D823D; --purple-light: rgba(45, 130, 61, 0.06); --border: #D9DDD9; --border-soft: rgba(1, 59, 33, 0.05); /* Generous Spacing */ --space-xs: 0.25rem; --space-s: 0.5rem; --space-m: 1rem; --space-l: 1.5rem; --space-xl: 3rem; --space-xxl: 7rem; --max-width: 68.75rem; --header-height: 4.75rem; /* Organic Radii — soft, generous curves */ --radius-s: 0.75rem; --radius-m: 1.25rem; --radius-l: 1.75rem; --radius-xl: 2.25rem; --radius-blob: 3rem; --radius-pill: 9999px; /* Soft Shadow System — diffused, gentle */ --shadow-card: 0 0 1px rgba(1, 59, 33, 0.1), 0 1px 3px rgba(1, 59, 33, 0.02), 0 6px 20px rgba(1, 59, 33, 0.035); --shadow-hover: 0 0 2px rgba(1, 59, 33, 0.1), 0 2px 6px rgba(1, 59, 33, 0.03), 0 16px 40px rgba(1, 59, 33, 0.055); --shadow-elevated: 0 0 2px rgba(1, 59, 33, 0.1), 0 4px 12px rgba(1, 59, 33, 0.03), 0 32px 64px rgba(1, 59, 33, 0.06); --focus-outline: #2D823D; --focus-shadow: 0 0 0 4px rgba(45, 130, 61, 0.18); /* Typography */ --font-display: 'Gilroy', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Gilroy', -apple-system, BlinkMacSystemFont, sans-serif; /* Organic Transitions */ --ease-gentle: cubic-bezier(0.25, 0.8, 0.25, 1); --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); --duration-slow: 0.4s; --duration-base: 0.3s;}/* ========================================== RESET & BASE ========================================== */* { box-sizing: border-box; }html, body { margin: 0; padding: 0; overflow-x: hidden; }html { scroll-behavior: smooth; overflow-x: hidden;}body { background-color: var(--bg); color: var(--text-main); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/* ========================================== TYPOGRAPHY ========================================== */h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; color: var(--text-main);}h1 { font-size: clamp(2.375rem, 5.5vw, 4rem); line-height: 1.12; margin-bottom: var(--space-l);}h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.18; margin-bottom: var(--space-m);}h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; margin-bottom: var(--space-s); letter-spacing: -0.005em;}p { margin: 0 0 var(--space-m); color: var(--text-secondary);}p.lead { font-size: 1.125rem; line-height: 1.65; max-width: 33.75rem; margin-bottom: var(--space-xl);}a { color: var(--text-main); text-decoration: none; transition: color var(--duration-base) var(--ease-gentle), opacity var(--duration-base) var(--ease-gentle);}a:hover { opacity: 0.72; }a:focus, button:focus, input:focus, summary:focus { outline: 2px solid var(--focus-outline); outline-offset: 3px;}a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 3px; box-shadow: var(--focus-shadow); border-radius: var(--radius-s);}a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),summary:focus:not(:focus-visible) { outline: none; box-shadow: none;}.muted { color: var(--text-muted); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;}.skip-link { position: absolute; left: -62.4375rem; top: 0.75rem; background: var(--text-main); color: var(--surface); padding: 0.75rem 1rem; border-radius: var(--radius-m); z-index: 999; font-family: var(--font-body); font-weight: 600;}.skip-link:focus { left: 0.75rem; }/* ========================================== LAYOUT — Calm Spaciousness ========================================== */.container { width: min(var(--max-width), 100% - 3rem); margin: 0 auto;}.section { padding: 6rem 0;}.section-tight { padding: 1.75rem 0;}.section.alt { background-color: var(--bg-warm); border-top: none; border-bottom: none;}.chapter { position: relative;}.chapter--plain.section.alt { background: var(--bg-warm); border-top: none; border-bottom: none;}.chapter--tint,.chapter--tint.section.alt { background: radial-gradient(ellipse 1200px 500px at 10% 20%, rgba(45, 130, 61, 0.05), transparent 60%), radial-gradient(ellipse 800px 400px at 85% 80%, rgba(45, 130, 61, 0.035), transparent 55%), radial-gradient(ellipse 600px 600px at 50% 0%, rgba(45, 130, 61, 0.025), transparent 70%), var(--bg-sage); border-top: none; border-bottom: none;}/* ── Dark chapter — dramatic contrast break ── */.chapter--dark { background: radial-gradient(ellipse 1200px 600px at 15% 25%, rgba(45, 130, 61, 0.12), transparent 55%), radial-gradient(ellipse 900px 500px at 80% 75%, rgba(45, 130, 61, 0.08), transparent 50%), var(--primary); color: rgba(255, 255, 255, 0.8); border-top: none; border-bottom: none;}/* Dark chapter — typography */.chapter--dark h1 { color: #FFFFFF; }.chapter--dark h1 em { color: #7DC88A; }.chapter--dark h2 { color: #FFFFFF; }.chapter--dark h2 em { color: #7DC88A; }.chapter--dark .eyebrow { color: #7DC88A; }.chapter--dark .eyebrow::before { background: #7DC88A; opacity: 0.8; }.chapter--dark .lead { color: rgba(255, 255, 255, 0.75); }.chapter--dark .shared-benefits li { color: rgba(255, 255, 255, 0.7); }.chapter--dark .shared-benefits li::before { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237DC88A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center;}/* Dark chapter — primary button (inverted) */.chapter--dark .btn-primary { background-color: #FFFFFF; color: var(--primary);}.chapter--dark .btn-primary:hover { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);}/* Dark chapter — nutrition card */.chapter--dark .ntr-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);}.chapter--dark .ntr-card::before { background: radial-gradient(circle, rgba(125, 200, 138, 0.08), transparent 70%);}.chapter--dark .ntr-score-area { border-bottom-color: rgba(255, 255, 255, 0.08);}.chapter--dark .ntr-ring-bg { stroke: rgba(255, 255, 255, 0.12); }.chapter--dark .ntr-ring-fill { stroke: #7DC88A; }.chapter--dark .ntr-big-number { color: #FFFFFF; }.chapter--dark .ntr-of-ten { color: rgba(255, 255, 255, 0.5); }.chapter--dark .ntr-verdict { color: #7DC88A; }.chapter--dark .ntr-item { border-bottom-color: rgba(255, 255, 255, 0.08); }.chapter--dark .ntr-item-icon { background: rgba(255, 255, 255, 0.1); }.chapter--dark .ntr-item-info b { color: #FFFFFF; }.chapter--dark .ntr-item-info em { color: rgba(255, 255, 255, 0.5); }.chapter--dark .ntr-excellent { background: rgba(125, 200, 138, 0.2); color: #7DC88A;}.chapter--dark .ntr-good { background: rgba(125, 200, 138, 0.15); color: #7DC88A;}.chapter--dark .ntr-moderate { background: rgba(255, 200, 60, 0.15); color: #F5D26E;}.chapter--dark .ntr-detail { background: rgba(255, 255, 255, 0.06);}.chapter--dark .ntr-macro-label { color: rgba(255, 255, 255, 0.6); }.chapter--dark .ntr-macro-track { background: rgba(255, 255, 255, 0.1); }.chapter--dark .ntr-macro-val { color: rgba(255, 255, 255, 0.8); }/* Dark chapter — restock card */.chapter--dark .restock-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);}.chapter--dark .restock-card::before { background: radial-gradient(circle, rgba(125, 200, 138, 0.08), transparent 70%);}.chapter--dark .restock-header-text { color: #FFFFFF; }.chapter--dark .restock-bell { color: #7DC88A; }.chapter--dark .restock-header-badge { background: rgba(125, 200, 138, 0.15); color: #7DC88A;}.chapter--dark .restock-item { border-bottom-color: rgba(255, 255, 255, 0.08); }.chapter--dark .restock-item-icon { background: rgba(255, 255, 255, 0.1); }.chapter--dark .restock-item-info b { color: #FFFFFF; }.chapter--dark .restock-item-info em { color: rgba(255, 255, 255, 0.5); }.chapter--dark .restock-sale-tag { background: rgba(255, 200, 60, 0.1); border-color: rgba(255, 200, 60, 0.2); color: #F5D26E;}.chapter--dark .restock-sale-tag svg { color: #F5D26E; }.chapter--dark .restock-sale-tag b { color: #F5D26E; }.chapter--dark .restock-sale-tag s { color: rgba(245, 210, 110, 0.6); }.chapter--dark .restock-add { border-color: rgba(255, 255, 255, 0.25); background: transparent; color: rgba(255, 255, 255, 0.8);}.chapter--dark .restock-add:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF;}.chapter--dark .restock-pattern-dot--filled { background: #7DC88A; }.chapter--dark .restock-pattern-dot--pulse { background: #7DC88A; }.chapter--dark .restock-added-badge { background: rgba(125, 200, 138, 0.15); color: #7DC88A;}/* Dark chapter — comparison matrix */.chapter--dark .matrix-wrap { border-color: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.05);}.chapter--dark .capability-matrix { background: transparent; }.chapter--dark .capability-matrix th,.chapter--dark .capability-matrix td { border-bottom-color: rgba(255, 255, 255, 0.08); border-right-color: rgba(255, 255, 255, 0.08);}.chapter--dark .capability-matrix thead th { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9);}.chapter--dark .capability-matrix thead th:first-child { background: rgba(255, 255, 255, 0.08);}.chapter--dark .capability-matrix tbody th { background: rgba(255, 255, 255, 0.03); color: rgba(255, 255, 255, 0.7); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.15);}.chapter--dark .capability-matrix td:nth-child(2) { background: rgba(125, 200, 138, 0.08);}.chapter--dark .matrix-vynn { background: rgba(125, 200, 138, 0.15); color: #7DC88A;}.chapter--dark .matrix-x { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.3);}.chapter--dark .matrix-note { color: rgba(255, 255, 255, 0.4); }.chapter--dark .matrix-caption { color: rgba(255, 255, 255, 0.5); }/* Organic flowing divider between sections */.section + .section { border-top: none;}/* ========================================== GENTLE ANIMATIONS ========================================== */@keyframes breatheIn { from { opacity: 0; transform: translateY(1.5rem) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); }}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.375rem); }}.hero-copy > * { animation: breatheIn 0.9s var(--ease-soft) both;}.hero-copy > *:nth-child(1) { animation-delay: 0.08s; }.hero-copy > *:nth-child(2) { animation-delay: 0.18s; }.hero-copy > *:nth-child(3) { animation-delay: 0.28s; }.hero-copy > *:nth-child(4) { animation-delay: 0.38s; }.hero-copy > *:nth-child(5) { animation-delay: 0.48s; }.hero-copy > *:nth-child(6) { animation-delay: 0.58s; }.hero-copy > *:nth-child(7) { animation-delay: 0.68s; }.hero-copy > *:nth-child(8) { animation-delay: 0.78s; }/* ========================================== SCROLL-REVEAL & PARALLAX ========================================== *//* --- Hidden initial states --- */.section .shared-list-copy { opacity: 0; transform: translateY(3rem) translateX(-2rem); will-change: transform, opacity;}.section .shared-list-visual { opacity: 0; transform: translateY(4.5rem) translateX(2rem); will-change: transform, opacity;}/* RTL sections: reversed horizontal offset */.nutrition-layout > .shared-list-copy { transform: translateY(3rem) translateX(2rem); }.nutrition-layout > .shared-list-visual { transform: translateY(4.5rem) translateX(-2rem); }/* Comparison */#comparison h2 { opacity: 0; transform: translateY(2.5rem); will-change: transform, opacity; }#comparison .matrix-wrap { opacity: 0; transform: translateY(3.5rem); will-change: transform, opacity; }/* --- Revealed state (JS adds .is-revealed) --- */.section.is-revealed .shared-list-copy { opacity: 1; transform: translateY(0) translateX(0); transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);}.section.is-revealed .shared-list-visual { opacity: 1; transform: translateY(0) translateX(0); transition: opacity 0.9s var(--ease-soft) 0.15s, transform 0.9s var(--ease-soft) 0.15s;}/* Comparison entrance */#comparison.is-revealed h2 { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);}#comparison.is-revealed .matrix-wrap { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease-soft) 0.2s, transform 0.8s var(--ease-soft) 0.2s;}/* More features entrance */#more-features.is-revealed .more-features-heading { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);}#more-features.is-revealed .more-features-grid { opacity: 1; transform: translateY(0); transition: opacity 0.8s var(--ease-soft) 0.2s, transform 0.8s var(--ease-soft) 0.2s;}/* --- Parallax-active: JS drives transform directly --- */.section.parallax-active .shared-list-visual { transition: none; will-change: transform;}/* --- Reduced motion --- */@media (prefers-reduced-motion: reduce) { .section .shared-list-copy, .section .shared-list-visual, #comparison h2, #comparison .matrix-wrap { opacity: 1; transform: none; transition: none; will-change: auto; } .section.parallax-active .shared-list-visual { transform: none !important; }}/* --- Mobile: vertical-only entrance, no horizontal offset --- */@media (max-width: 859px) { .section .shared-list-copy { transform: translateY(2rem) translateX(0); } .section .shared-list-visual { transform: translateY(3rem) translateX(0); } .nutrition-layout > .shared-list-copy { transform: translateY(2rem) translateX(0); } .nutrition-layout > .shared-list-visual { transform: translateY(3rem) translateX(0); }}/* ========================================== HEADER — Floating, Soft ========================================== */.site-header { position: sticky; top: 0; height: var(--header-height); background: rgba(251, 251, 251, 0.82); backdrop-filter: blur(1.25rem) saturate(1.2); -webkit-backdrop-filter: blur(1.25rem) saturate(1.2); border-bottom: 1px solid var(--border-soft); z-index: 100; display: flex; align-items: center;}.header-inner { display: flex; align-items: center; justify-content: space-between;}.brand { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 1.125rem; text-decoration: none; font-family: var(--font-body);}.brand-mark { width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: block;}.brand-name { font-family: 'Gilroy', var(--font-body); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em;}.brand-lockup { height: 2.25rem; width: auto; display: block;}.nav { display: flex; gap: 0.25rem; align-items: center;}.nav a { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--radius-pill); transition: all var(--duration-base) var(--ease-gentle);}.nav a:hover { color: var(--text-main); background: rgba(1, 59, 33, 0.04); opacity: 1;}.nav .nav-cta { color: var(--primary-fg); background: var(--primary); border-radius: var(--radius-pill); padding: 0.5rem 1.5rem; font-weight: 600; margin-left: 0.5rem; transition: all var(--duration-base) var(--ease-gentle);}.nav .nav-cta:hover { color: var(--primary-fg); background: #024125; opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(1, 59, 33, 0.15);}@media (max-width: 859px) { .nav { gap: 0; } .nav a { font-size: 0.75rem; padding: 0.5rem 0.5rem; } .nav .nav-cta { margin-left: 0; }}/* ========================================== BUTTONS — Rounded, Soft ========================================== */.btn { display: inline-flex; align-items: center; justify-content: center; padding: 1rem 2rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all var(--duration-slow) var(--ease-soft); border: 1.5px solid transparent; gap: 0.5rem; font-family: var(--font-body); text-decoration: none; letter-spacing: -0.005em;}.btn:focus-visible { box-shadow: var(--focus-shadow);}.btn-primary { background-color: var(--accent); color: #fff;}.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(45, 130, 61, 0.25); background-color: var(--accent-soft); opacity: 1;}.btn-primary:focus-visible { background-color: #24703A;}.btn-secondary { background-color: var(--surface); border: 1.5px solid var(--border); color: var(--text-main);}.btn-secondary:hover { background-color: var(--surface); border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-card); opacity: 1;}.btn-secondary:focus-visible { background-color: var(--surface); border-color: var(--accent);}.btn-small { padding: 0.5rem 1rem; font-size: 0.8125rem;}.btn:disabled,.btn[disabled] { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important;}.btn:active:not(:disabled) { transform: scale(0.98); box-shadow: none; transition-duration: 0.1s;}.btn-note { font-weight: 600; font-size: 0.75rem; color: var(--text-muted); background: var(--surface-2); padding: 0.25rem 0.75rem; border-radius: 999px;}/* ========================================== HERO — Spacious, Organic Background ========================================== */.hero { padding: 4.5rem 0 6rem; position: relative;}.hero.chapter { overflow: hidden; background: radial-gradient(ellipse 900px 700px at 5% 30%, rgba(45, 130, 61, 0.06), transparent 55%), radial-gradient(ellipse 700px 500px at 90% 10%, rgba(45, 130, 61, 0.035), transparent 50%), radial-gradient(ellipse 500px 500px at 50% 80%, rgba(45, 130, 61, 0.03), transparent 60%), linear-gradient(170deg, var(--bg) 0%, var(--bg-sage) 50%, var(--bg-warm) 100%);}/* Soft organic blob shapes */.hero.chapter::before { content: ""; position: absolute; top: -7.5rem; right: -5rem; width: 31.25rem; height: 31.25rem; border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.04), transparent 70%); pointer-events: none; z-index: 0;}.hero.chapter::after { content: ""; position: absolute; bottom: -6.25rem; left: -3.75rem; width: 25rem; height: 25rem; border-radius: 50% 60% 40% 50% / 40% 50% 60% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.03), transparent 70%); pointer-events: none; z-index: 0;}.hero .container { position: relative; z-index: 1;}.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;}.hero .hero-copy { max-width: 42.5rem;}.hero h1 { font-size: clamp(2.5rem, 6vw, 4.375rem); line-height: 1.08; letter-spacing: -0.02em; font-style: normal;}.hero h1 em,h2 em { font-style: italic; color: var(--accent);}.hero-microcopy { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em;}.launch-badge { display: inline-block; padding: 0.375rem 1rem; border-radius: var(--radius-pill); background: var(--accent-light); color: #1d6030; font-size: 0.8125rem; font-weight: 700; margin-bottom: 1.25rem; letter-spacing: 0.01em;}.social-proof { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500;}.social-proof-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent); flex-shrink: 0; animation: pulse 2s var(--ease-gentle) infinite;}/* Trust Micro — Soft container */.trust-micro { margin-top: 1.25rem; padding: 1rem 1.5rem; border-radius: var(--radius-l); border: 1px solid var(--border-soft); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(0.5rem);}.trust-micro-title { margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-body);}.trust-micro ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem;}.trust-micro li { display: inline-flex; align-items: flex-start; gap: 0.75rem; color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.5;}.trust-micro li::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: var(--accent); flex-shrink: 0; margin-top: 0.5rem; opacity: 0.7;}/* Eyebrow — Organic dot instead of bar */.eyebrow { display: inline-flex; gap: 0.75rem; align-items: center; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; font-size: 0.8125rem; font-family: var(--font-body);}.eyebrow::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 999px; background: var(--accent); display: inline-block; opacity: 0.6;}.accent { color: var(--accent);}.subhead { margin: 0 0 1.5rem; color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.7; max-width: 52ch;}.hero-outcome { margin: -0.5rem 0 0.75rem; color: var(--text-secondary); font-size: 1rem;}.proof-line { margin: 0 0 0.5rem; color: var(--text-main); font-size: 1rem; font-weight: 600;}.trust-line { margin: 0; color: var(--text-secondary); font-size: 0.875rem;}.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0.75rem;}.hero .cta-row { margin: 1.75rem 0 1.5rem;}/* Store Badges — Softer frames */.store-badges { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 1rem;}.store-badge { display: inline-flex; align-items: center; border-radius: var(--radius-s); overflow: hidden; border: 1.5px solid var(--border); background: var(--surface); transition: all var(--duration-slow) var(--ease-soft);}.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--accent); opacity: 1;}.store-badge:active { transform: scale(0.98); box-shadow: none;}.store-badge img { display: block; height: 2.75rem; width: auto;}/* Waitlist inline */.waitlist-inline--hero { margin-top: 1rem;}.waitlist-label { margin: 0 0 0.75rem; color: var(--text-secondary); font-size: 0.875rem; font-weight: 600;}.hero-meta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: var(--space-l) 0;}.pill { font-size: 0.8125rem; padding: 0.5rem 0.75rem; background: var(--surface-2); border-radius: var(--radius-pill); color: var(--text-secondary); font-weight: 500; border: 1px solid var(--border);}/* ========================================== PHONE MOCKUP — Soft Organic Frame ========================================== */.hero-visual { display: grid; justify-items: center; gap: 1rem;}.phone { width: min(22.5rem, 92vw); border-radius: 2.75rem; border: 3px solid #024125; background: #013E23; padding: 0.5rem; box-shadow: 0 26px 50px rgba(15, 17, 21, 0.25); overflow: hidden;}.phone-calm { width: min(21.25rem, 100%); border-radius: var(--radius-xl); border: 1.5px solid var(--border); background: var(--surface); padding: 0.75rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}/* Soft notch pill */.phone-calm::before { content: ""; position: absolute; top: 0.75rem; left: 50%; transform: translateX(-50%); width: 4.5rem; height: 0.3125rem; border-radius: 999px; background: var(--surface-2); z-index: 2;}.app-shell-calm { border-radius: 1.5rem; border: 1px solid var(--border); background: linear-gradient(180deg, #F4F8F5 0%, #EDF2EE 100%); padding: 1.25rem 0.75rem 0.75rem; display: grid; gap: 0.75rem;}.mock-screen { margin: 0; padding: 1rem; border: 1px solid rgba(45, 130, 61, 0.1); border-radius: 0.5rem; background: #FFFFFF; transition: all var(--duration-slow) var(--ease-soft);}.mock-screen:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(1, 59, 33, 0.06);}.mock-screen h3 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-family: var(--font-body); font-weight: 700;}.mock-screen p { margin: 0 0 0.25rem; font-size: 0.8125rem; color: #5A7060;}.mock-screen strong { color: #013B21;}.mock-label { margin: 0 0 0.5rem; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--accent); font-family: var(--font-body);}.mock-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;}.mock-chip { display: inline-flex; align-items: center; border: 1px solid rgba(45, 130, 61, 0.15); border-radius: 999px; background: var(--accent-light); color: var(--accent); padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.2;}.mock-chip-success { border-color: rgba(45, 130, 61, 0.2); background: var(--accent-light); color: #24703A;}.progress-track { margin-top: 0.75rem; height: 0.5rem; border-radius: 999px; background: rgba(45, 130, 61, 0.1); overflow: hidden;}.progress-fill { display: block; height: 100%; width: 65%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: 999px;}.mock-estimate { margin-bottom: 0.5rem; font-size: 0.75rem; color: #5A7060;}.mock-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem;}.mock-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; font-size: 0.8125rem;}.mock-list li span b { display: block; font-size: 0.8125rem; font-weight: 600; color: #013B21;}.mock-list li span em { display: block; margin-top: 0.125rem; font-style: normal; font-size: 0.6875rem; color: var(--text-muted);}.mock-list li strong { font-size: 0.6875rem; color: #24703A; background: var(--accent-light); border-radius: 999px; padding: 0.25rem 0.75rem; font-weight: 700;}.mock-comparison { color: #5A7060; font-size: 0.75rem;}.mock-remaining { color: #5A7060; font-size: 0.75rem;}.app-shell { border-radius: 2.125rem; border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient(175deg, #d7dbe3 0%, #c6ccd6 40%, #b9c0cb 100%); padding: 0.75rem 0.75rem 1rem; overflow: hidden;}.visual-caption { margin: 0; color: var(--text-muted); font-size: 0.8125rem; text-align: center;}/* ========================================== PROOF BAR — Breathing Room ========================================== */.proof-bar { border-top: none; border-bottom: none; background: var(--surface-elevated); padding: 1.5rem 0;}.proof-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem;}.proof-item { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500; line-height: 1.55; position: relative; padding-left: 1.5rem;}.proof-item::before { content: ""; position: absolute; left: 0; top: 0.4375rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--accent-light); border: 2px solid var(--accent); opacity: 0.6;}/* ========================================== OUTCOME STRIP — Generous Space ========================================== */.outcome-strip { padding-bottom: 4.5rem;}.outcome-strip h2 { margin: 0 0 0.75rem;}.outcome-strip .lead { margin: 0;}.steps-cta { margin-top: 2rem; text-align: center;}/* ========================================== WAITLIST FORM — Soft Container ========================================== */.waitlist-inline { background: var(--surface); padding: 1.5rem; border-radius: var(--radius-l); border: 1.5px solid var(--border); box-shadow: var(--shadow-card); margin-top: 1.5rem; max-width: 42.5rem;}.h3 { margin: 0 0 0.5rem; font-size: 1.125rem; }.lead { color: var(--text-secondary); font-size: 1.125rem; margin-top: 0.5rem; }.form { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 0.75rem;}input[type="email"] { width: 100%; padding: 1rem 1.25rem; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); color: var(--text-main); font-size: 1rem; font-family: var(--font-body); transition: all var(--duration-base) var(--ease-gentle);}input[type="email"]:hover { border-color: var(--accent); border-color: rgba(45, 130, 61, 0.35);}input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow);}input::placeholder { color: var(--text-muted); }button[disabled] { opacity: 0.4; cursor: not-allowed;}.fineprint { font-size: 0.8125rem; color: var(--text-muted); margin: 0.75rem 0 0; line-height: 1.6;}.reassurance-line { margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--text-muted);}.form-status { min-height: 1.25rem; margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--text-secondary);}.form-status[data-state="error"] { color: #E01B25;}.form-status[data-state="success"] { color: var(--accent);}.form-status[data-state="info"] { color: var(--text-secondary);}/* ========================================== TRANSPARENCY ========================================== */.transparency { margin-top: 1.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-card);}.transparency h3 { margin: 0 0 0.75rem; font-size: 1rem;}.transparency-list { margin: 0; padding-left: 1rem;}.transparency-list li { margin: 0 0 0.5rem; color: var(--text-secondary); font-size: 0.875rem;}.transparency-list li:last-child { margin: 0;}/* ========================================== CARDS — Soft Organic Containers ========================================== */.cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem;}.card { background: var(--surface); padding: 2rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-card); transition: all var(--duration-slow) var(--ease-soft); border: 1.5px solid var(--border); display: flex; flex-direction: column; min-height: 100%; position: relative; overflow: hidden;}/* Soft organic glow on hover instead of hard accent bar */.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 30% 0%, var(--accent-glow), transparent 60%); opacity: 0; transition: opacity var(--duration-slow) var(--ease-gentle); pointer-events: none;}.card:hover::after { opacity: 1;}#features .card { border: 1.5px solid var(--border); box-shadow: var(--shadow-card);}#features .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover);}/* Feature card animated icons */.card-icon { margin-bottom: 1rem; height: 3.5rem; display: flex; align-items: center;}/* ---- Household Sync Icon ---- */.icon-sync { position: relative; width: 4rem; height: 3.25rem;}.icon-sync-list { position: absolute; left: 0; top: 0.375rem; width: 2.25rem; height: 2.5rem; border-radius: 0.5rem; background: var(--bg-sage); border: 1.5px solid var(--border); padding: 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 0.3125rem;}.icon-sync-row { display: block; height: 0.1875rem; border-radius: 0.125rem; background: var(--border);}.icon-sync-row--1 { width: 1.125rem; }.icon-sync-row--2 { width: 0.875rem; }.icon-sync-row--new { width: 0; background: var(--accent); opacity: 0;}.card-anim.in-view .icon-sync-row--new { animation: syncRowSlide 0.4s 0.6s var(--ease-soft) forwards;}@keyframes syncRowSlide { from { width: 0; opacity: 0; } to { width: 1rem; opacity: 1; }}/* Notification badge */.icon-sync-notif { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 0; opacity: 0; transform: translateY(0.375rem) scale(0.8);}.card-anim.in-view .icon-sync-notif { animation: syncNotifPop 0.45s 0.35s var(--ease-soft) forwards;}@keyframes syncNotifPop { 0% { opacity: 0; transform: translateY(0.375rem) scale(0.8); } 70% { opacity: 1; transform: translateY(-1px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); }}.icon-sync-avatar { width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); position: relative; z-index: 1;}.icon-sync-badge { margin-left: -0.25rem; padding: 0.125rem 0.5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.5625rem; font-weight: 700; line-height: 1; border: 2px solid var(--surface); white-space: nowrap;}/* ---- Nutrition Score Icon ---- */.icon-nutrition { position: relative; width: 3.25rem; height: 3.25rem;}.icon-ntr-ring { display: block; }.icon-ntr-score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.125rem; color: var(--text-main); line-height: 1;}.card-anim.in-view .icon-ntr-fill { animation: ntrFill 1.2s 0.2s var(--ease-soft) forwards;}/* Score number counts up via JS — fallback static */@keyframes ntrFill { to { stroke-dashoffset: 34.31; }}/* ---- Store Pin Icon ---- */.icon-store { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;}.icon-store-pin { position: relative; z-index: 1; opacity: 0; transform: translateY(-0.5rem);}.card-anim.in-view .icon-store-pin { animation: pinDrop 0.5s 0.15s var(--ease-soft) forwards;}@keyframes pinDrop { 0% { opacity: 0; transform: translateY(-0.75rem); } 60% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); }}.icon-store-ripple { position: absolute; bottom: 0.25rem; left: 50%; transform: translateX(-50%) scale(0); width: 2.25rem; height: 0.75rem; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0;}.card-anim.in-view .icon-store-ripple--1 { animation: storeRipple 1.8s 0.5s var(--ease-gentle) infinite;}.card-anim.in-view .icon-store-ripple--2 { animation: storeRipple 1.8s 1.1s var(--ease-gentle) infinite;}.card-anim.in-view .icon-store-ripple--3 { animation: storeRipple 1.8s 1.7s var(--ease-gentle) infinite;}@keyframes storeRipple { 0% { opacity: 0.5; transform: translateX(-50%) scale(0.5); } 100% { opacity: 0; transform: translateX(-50%) scale(1.6); }}/* ---- Recipe Import Icon ---- */.icon-recipe { position: relative; width: 3rem; height: 3rem;}.icon-recipe-clip { position: relative; z-index: 0; }.icon-recipe-line { position: absolute; left: 1.25rem; height: 0.125rem; border-radius: 0.125rem; background: var(--accent); opacity: 0; transform: scaleX(0); transform-origin: left;}.icon-recipe-line--1 { top: 1.375rem; width: 1rem; }.icon-recipe-line--2 { top: 1.75rem; width: 0.75rem; }.icon-recipe-line--3 { top: 2.125rem; width: 0.875rem; }.card-anim.in-view .icon-recipe-line--1 { animation: recipeLine 0.35s 0.3s var(--ease-soft) forwards;}.card-anim.in-view .icon-recipe-line--2 { animation: recipeLine 0.35s 0.45s var(--ease-soft) forwards;}.card-anim.in-view .icon-recipe-line--3 { animation: recipeLine 0.35s 0.6s var(--ease-soft) forwards;}@keyframes recipeLine { from { opacity: 0; transform: scaleX(0); } to { opacity: 0.6; transform: scaleX(1); }}.icon-recipe-check { position: absolute; bottom: 0.375rem; right: 0.375rem; opacity: 0; transform: scale(0);}.card-anim.in-view .icon-recipe-check { animation: recipeCheck 0.4s 0.8s var(--ease-soft) forwards;}@keyframes recipeCheck { from { opacity: 0; transform: scale(0) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(0deg); }}/* ---- Smart Restock Icon ---- */.icon-restock { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;}.icon-restock-bell { position: relative; z-index: 1; opacity: 0; transform: rotate(0deg); transform-origin: center 8px;}.card-anim.in-view .icon-restock-bell { animation: restockBellSwing 0.8s 0.15s var(--ease-soft) forwards;}@keyframes restockBellSwing { 0% { opacity: 0; transform: rotate(-15deg); } 30% { opacity: 1; transform: rotate(10deg); } 50% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } 100% { opacity: 1; transform: rotate(0deg); }}.icon-restock-dot { position: absolute; top: 0.375rem; right: 0.375rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #E01B25; border: 2px solid var(--surface); opacity: 0; transform: scale(0); z-index: 2;}.card-anim.in-view .icon-restock-dot { animation: restockDotPop 0.4s 0.7s var(--ease-soft) forwards;}@keyframes restockDotPop { 0% { opacity: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); }}/* ---- Barcode Scanner Icon ---- */.icon-barcode { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;}.icon-barcode-frame { position: relative; z-index: 0; }.icon-barcode-bars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.125rem;}.icon-barcode-bars span { display: block; width: 0.125rem; height: 1rem; background: var(--text-main); opacity: 0; transform: scaleY(0); transform-origin: center;}.icon-barcode-bars span:nth-child(1) { height: 1.125rem; }.icon-barcode-bars span:nth-child(2) { width: 3px; height: 0.875rem; }.icon-barcode-bars span:nth-child(3) { height: 1.125rem; }.icon-barcode-bars span:nth-child(4) { width: 1.5px; height: 1rem; }.icon-barcode-bars span:nth-child(5) { height: 1.125rem; }.icon-barcode-bars span:nth-child(6) { width: 3px; height: 0.875rem; }.icon-barcode-bars span:nth-child(7) { height: 1.125rem; }.card-anim.in-view .icon-barcode-bars span { animation: barcodeBarsIn 0.3s var(--ease-soft) forwards;}.card-anim.in-view .icon-barcode-bars span:nth-child(1) { animation-delay: 0.2s; }.card-anim.in-view .icon-barcode-bars span:nth-child(2) { animation-delay: 0.25s; }.card-anim.in-view .icon-barcode-bars span:nth-child(3) { animation-delay: 0.3s; }.card-anim.in-view .icon-barcode-bars span:nth-child(4) { animation-delay: 0.35s; }.card-anim.in-view .icon-barcode-bars span:nth-child(5) { animation-delay: 0.4s; }.card-anim.in-view .icon-barcode-bars span:nth-child(6) { animation-delay: 0.45s; }.card-anim.in-view .icon-barcode-bars span:nth-child(7) { animation-delay: 0.5s; }@keyframes barcodeBarsIn { from { opacity: 0; transform: scaleY(0); } to { opacity: 0.7; transform: scaleY(1); }}.icon-barcode-line { position: absolute; left: 0.625rem; right: 0.625rem; height: 0.125rem; background: var(--accent); opacity: 0; box-shadow: 0 0 6px rgba(45, 130, 61, 0.4);}.card-anim.in-view .icon-barcode-line { animation: iconBarcodeScan 1.8s 0.6s var(--ease-gentle) infinite;}@keyframes iconBarcodeScan { 0%, 100% { top: 14px; opacity: 0.3; } 50% { top: 32px; opacity: 1; }}/* ---- Voice Assistant Icon ---- */.icon-voice { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;}.icon-voice-mic { position: relative; z-index: 1; }.icon-voice-wave { position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 2px solid var(--accent); opacity: 0; transform: scale(0.8);}.card-anim.in-view .icon-voice-wave--1 { animation: voiceIconPulse 2s 0.3s var(--ease-gentle) infinite;}.card-anim.in-view .icon-voice-wave--2 { animation: voiceIconPulse 2s 1s var(--ease-gentle) infinite;}@keyframes voiceIconPulse { 0% { opacity: 0.5; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.6); }}.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover);}.card:active { transform: translateY(-2px) scale(0.98); box-shadow: none; transition-duration: 0.1s;}.card h3 { margin: 0 0 0.75rem; font-family: var(--font-display); font-weight: 400; font-size: 1.375rem;}.card p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.6;}.card .btn { margin-top: 0.5rem;}.steps-cta .btn,.card .btn,.preview-copy .btn,.grid-cta .btn { padding: 0.75rem 1.25rem; font-size: 0.875rem;}.text-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; padding: 0.5rem 0; color: var(--accent); font-size: 0.875rem; font-weight: 600; line-height: 1.35; text-decoration: none; border-radius: var(--radius-s); transition: all var(--duration-base) var(--ease-gentle);}.card .text-cta { margin-top: auto; display: inline-flex; align-items: center; align-self: flex-start;}.text-cta::after { content: "\2192"; font-size: 0.875rem; transition: transform var(--duration-base) var(--ease-soft);}.text-cta:hover { opacity: 1; color: #24703A;}.text-cta:hover::after { transform: translateX(4px);}.text-cta:active { transform: scale(0.98); opacity: 0.8;}.text-cta:focus-visible { color: #1D6030;}/* ========================================== STEPPER — Horizontal Flow ========================================== */.stepper { margin: 2.5rem 0 0; padding-left: 0; list-style: none; display: grid; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; position: relative;}.stepper-step { flex: 0 0 calc(100% / 7); max-width: calc(100% / 7); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.75rem; position: relative; z-index: 1;}/* Dotted connector between steps */.stepper-step:not(:last-child)::after { content: ""; position: absolute; top: 1.5rem; left: calc(50% + 1.75rem); width: calc(100% - 3.5rem); height: 0.125rem; background: repeating-linear-gradient( 90deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px ); z-index: -1;}.stepper-num { width: 3rem; height: 3rem; border-radius: 999px; background: var(--surface); border: 2px solid var(--accent); color: var(--accent); font-family: 'Gilroy-Center', var(--font-display); font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; margin-bottom: 1.25rem; box-shadow: 0 2px 8px rgba(45, 130, 61, 0.1); transition: all var(--duration-base) var(--ease-soft);}.stepper-step:hover .stepper-num { background: var(--accent); color: #fff; transform: scale(1.08); box-shadow: 0 4px 16px rgba(45, 130, 61, 0.25);}.stepper-step h3 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.35;}.stepper-step p { margin: 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.55;}/* Tablet: 4 + 3 layout */@media (max-width: 960px) and (min-width: 601px) { .stepper { flex-wrap: wrap; justify-content: center; } .stepper-step { flex: 0 0 25%; max-width: 25%; margin-bottom: 1.75rem; } .stepper-step:not(:last-child)::after { width: calc(100% - 3.25rem); left: calc(50% + 1.625rem); } /* Hide connector on 4th item (end of row 1) */ .stepper-step:nth-child(4)::after { display: none; }}.section h2 { margin: 0; font-size: clamp(1.625rem, 3.5vw, 2.625rem); letter-spacing: -0.01em;}.section p { margin-bottom: 0; }/* ========================================== PREVIEW SECTION — Flowing Container ========================================== */.preview-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;}#preview .preview-layout { padding: 2.25rem; border-radius: var(--radius-blob); border: 1.5px solid var(--border); background: radial-gradient(ellipse 400px 300px at 80% 20%, rgba(45, 130, 61, 0.04), transparent 60%), var(--surface); box-shadow: var(--shadow-card);}.preview-copy .lead { margin-bottom: 1rem;}/* ========================================== FEATURE GRID ========================================== */.feature-grid { margin-top: 1rem; display: grid; grid-template-columns: 1fr; gap: 0.75rem;}.chapter--more-features .feature-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; align-items: flex-start;}.feature-pill { margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--accent-light); color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; line-height: 1.35; display: inline-flex; justify-self: start; max-width: 100%; white-space: normal;}.chapter--more-features .feature-pill { margin: 0;}.grid-cta { margin-top: 0.75rem;}.chapter--more-features .grid-cta .text-cta { color: var(--text-secondary);}.chapter--more-features .grid-cta .text-cta:hover { color: var(--text-main);}/* ========================================== DEFINITION + MATRIX — Soft Containers ========================================== */.definition-block { margin-top: 1.5rem; padding: 1.75rem 2rem; border-radius: var(--radius-xl); background: var(--surface); border: 1.5px solid var(--border);}.definition-block h3 { margin: 0 0 0.75rem; font-size: 1.375rem; font-family: var(--font-display); font-weight: 400;}.definition-block p { line-height: 1.7;}.definition-block p + p { margin-top: 0.75rem;}.matrix-wrap { margin-top: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-l); border: 1.5px solid var(--border); background: var(--surface);}.capability-matrix { width: 100%; border-collapse: collapse; background: var(--surface); table-layout: fixed;}.capability-matrix tbody th,.capability-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);}.capability-matrix thead th:first-child { background: var(--bg-sage);}@media (max-width: 859px) { .capability-matrix { min-width: 36rem; } .capability-matrix colgroup col:first-child { width: 40%; }}.capability-matrix th,.capability-matrix td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 1rem 1rem; text-align: left; font-size: 0.8125rem; vertical-align: middle; height: 3rem;}.capability-matrix th:last-child,.capability-matrix td:last-child { border-right: none;}.capability-matrix tbody tr:last-child th,.capability-matrix tbody tr:last-child td { border-bottom: none;}.capability-matrix thead th { background: var(--bg-sage); color: var(--text-main); font-weight: 700; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.02em; text-align: center;}.capability-matrix thead th:first-child { font-size: 0.8125rem; text-align: left;}.capability-matrix tbody th { color: var(--text-secondary); font-weight: 600;}.capability-matrix td { min-width: 4rem; text-align: center;}/* Vynn column highlight */.matrix-vynn { background: var(--accent-light); color: var(--accent);}.capability-matrix td.matrix-yes,.capability-matrix td.matrix-no,.capability-matrix td.matrix-partial { position: relative;}/* Vynn column cells get a subtle accent background */.capability-matrix td:nth-child(2) { background: rgba(45, 130, 61, 0.04);}.matrix-check { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--accent); color: #fff; font-family: 'Gilroy-Center', var(--font-body); font-size: 0.875rem; font-weight: 700; line-height: 1;}.matrix-x { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #F0EDEA; color: #B5AFA8; font-family: 'Gilroy-Center', var(--font-body); font-size: 0.8125rem; font-weight: 700; line-height: 1;}.matrix-dash { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: #FFF4E5; color: #B8860B; font-family: 'Gilroy-Center', var(--font-body); font-size: 0.875rem; font-weight: 700; line-height: 1;}.matrix-note { display: block; font-size: 0.625rem; color: var(--text-muted); font-weight: 500; line-height: 1; margin-top: 0.125rem;}.matrix-caption { margin: 0.75rem 0 0; color: var(--text-muted); font-size: 0.75rem;}.compat-anchor { height: 0; overflow: hidden;}/* ========================================== SHARED LIST — Household Sync Feature ========================================== */.shared-list-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;}.shared-list-copy .lead { margin-bottom: var(--space-l);}.shared-benefits { margin: 0 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 0.75rem;}.shared-benefits li { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; font-weight: 500; color: var(--text-secondary); line-height: 1.5;}.shared-benefits li::before { content: ""; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--accent-light); border: 2px solid rgba(45, 130, 61, 0.2); flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D823D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center;}/* Sync card visual mockup */.shared-list-visual { display: flex; justify-content: center;}.sync-card { width: 100%; max-width: 23.75rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}/* Subtle organic glow behind the card */.sync-card::before { content: ""; position: absolute; top: -2.5rem; right: -2.5rem; width: 12.5rem; height: 12.5rem; border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.06), transparent 70%); pointer-events: none;}.sync-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;}.sync-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #2D823D; animation: pulse 2s var(--ease-gentle) infinite;}@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45, 130, 61, 0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(45, 130, 61, 0); }}.sync-label { font-size: 0.75rem; font-weight: 700; color: #2D823D; text-transform: uppercase; letter-spacing: 0.08em;}.sync-family { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); font-weight: 500;}.sync-title { margin: 0 0 1rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; color: var(--text-main);}.sync-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;}.sync-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); animation: slideInItem 0.6s var(--ease-soft) both;}.sync-item:last-child { border-bottom: none;}@keyframes slideInItem { from { opacity: 0; transform: translateX(-0.75rem); } to { opacity: 1; transform: translateX(0); }}.sync-item--checked .sync-item-text b { text-decoration: line-through; color: var(--text-muted);}.sync-avatar { width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0; color: #fff;}.sync-avatar--teal { background: var(--accent); }.sync-avatar--purple { background: var(--purple); }.sync-avatar--warm { background: #D4956A; }.sync-avatar--blue { background: #5B8EC9; }.sync-item-text { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0;}.sync-item-text b { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.sync-item-text em { font-style: normal; font-size: 0.75rem; color: var(--text-muted);}.sync-typing { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft);}.sync-typing em { font-style: normal; font-size: 0.8125rem; color: var(--text-muted);}.sync-typing-dots { display: flex; gap: 0.1875rem; align-items: center;}.sync-typing-dots span { width: 0.3125rem; height: 0.3125rem; border-radius: 999px; background: var(--text-muted); animation: typingBounce 1.4s var(--ease-gentle) infinite;}.sync-typing-dots span:nth-child(2) { animation-delay: 0.15s; }.sync-typing-dots span:nth-child(3) { animation-delay: 0.3s; }@keyframes typingBounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); }}@media (min-width: 860px) { .shared-list-layout { grid-template-columns: 1fr 1fr; gap: 3.5rem; }}/* ========================================== NUTRITION SCORE — Cart Health Feature ========================================== */.nutrition-layout { direction: ltr;}@media (min-width: 860px) { .nutrition-layout { direction: rtl; } .nutrition-layout > * { direction: ltr; }}.ntr-card { width: 100%; max-width: 23.75rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.75rem 1.5rem 1.5rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}.ntr-card::before { content: ""; position: absolute; bottom: -3.125rem; left: -1.875rem; width: 13.75rem; height: 13.75rem; border-radius: 50% 60% 40% 50% / 40% 50% 60% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.05), transparent 70%); pointer-events: none;}/* Score ring area */.ntr-score-area { display: flex; flex-direction: column; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-soft);}.ntr-ring-wrap { position: relative; width: 7.5rem; height: 7.5rem;}.ntr-ring-bg { stroke: var(--accent-light);}.ntr-ring-fill { stroke: var(--accent);}.ntr-ring-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;}.ntr-big-number { font-family: var(--font-display); font-size: 2rem; color: var(--text-main); line-height: 1;}.ntr-of-ten { font-size: 0.8125rem; color: var(--text-muted); font-weight: 500; margin-top: 0.125rem;}.ntr-verdict { margin: 0.75rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--accent); text-align: center;}/* Item list */.ntr-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;}.ntr-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft);}.ntr-item:last-child { border-bottom: none;}.ntr-item--open { flex-direction: column; align-items: stretch; gap: 0;}.ntr-item-row { display: flex; align-items: center; gap: 0.75rem;}.ntr-item-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--bg-sage); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0;}.ntr-item-info { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; min-width: 0;}.ntr-item-info b { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.ntr-item-info em { font-style: normal; font-size: 0.75rem; color: var(--text-muted);}.ntr-item-badge { width: 2.375rem; height: 1.75rem; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; flex-shrink: 0;}.ntr-excellent { background: var(--accent-light); color: #24703A;}.ntr-good { background: #E6F2E8; color: var(--accent);}.ntr-moderate { background: #FFF4E5; color: #B8860B;}/* Expanded nutrition detail panel */.ntr-detail { margin-top: 0.75rem; padding: 1rem 1rem; background: var(--bg-sage); border-radius: var(--radius-m); display: grid; gap: 0.75rem;}.ntr-macro { display: grid; grid-template-columns: 3.25rem 1fr 2rem; align-items: center; gap: 0.75rem;}.ntr-macro-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);}.ntr-macro-track { height: 0.4375rem; border-radius: 999px; background: rgba(1, 59, 33, 0.06); overflow: hidden;}.ntr-macro-fill { display: block; height: 100%; border-radius: 999px;}.ntr-fill-protein { background: var(--accent); }.ntr-fill-carbs { background: #D4956A; }.ntr-fill-fat { background: var(--purple); }.ntr-fill-fiber { background: #5B8EC9; }.ntr-macro-val { font-size: 0.75rem; font-weight: 700; color: var(--text-main); text-align: right;}.ntr-tap-hint { margin: 0.75rem 0 0; text-align: center; font-size: 0.75rem; color: var(--text-muted); font-weight: 500;}/* ========================================== STORE FINDER — Availability Feature ========================================== */.finder-card { width: 100%; max-width: 23.75rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}.finder-card::before { content: ""; position: absolute; top: -3.75rem; left: -2.5rem; width: 12.5rem; height: 12.5rem; border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.05), transparent 70%); pointer-events: none;}.finder-search { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--radius-pill); background: var(--bg); border: 1.5px solid var(--border); margin-bottom: 1rem;}.finder-search-icon { color: var(--text-muted); flex-shrink: 0;}.finder-search-text { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.finder-results-label { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);}.finder-stores { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;}.finder-store { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft);}.finder-store:last-child { border-bottom: none;}.finder-store-pin { width: 2.125rem; height: 2.125rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.finder-pin--available { background: var(--accent-light); color: var(--accent);}.finder-pin--unavailable { background: #F5F0EB; color: var(--text-muted);}.finder-store-info { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; min-width: 0;}.finder-store-info b { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.finder-store-info em { font-style: normal; font-size: 0.75rem; color: var(--text-muted);}.finder-store--unavailable .finder-store-info b { color: var(--text-muted);}.finder-status { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); flex-shrink: 0; white-space: nowrap;}.finder-status--in-stock { background: var(--accent-light); color: #24703A;}.finder-status--unavailable { background: #F5F0EB; color: #8A9A8E;}.finder-tip { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); font-size: 0.75rem; color: var(--text-muted);}.finder-tip svg { flex-shrink: 0; color: var(--text-muted);}/* ========================================== RECIPE IMPORT — Link/Screenshot Feature ========================================== */.recipe-card { width: 100%; max-width: 23.75rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}.recipe-card::before { content: ""; position: absolute; top: -3.125rem; right: -3.125rem; width: 12.5rem; height: 12.5rem; border-radius: 50% 40% 60% 50% / 40% 60% 50% 50%; background: radial-gradient(circle, rgba(212, 149, 106, 0.06), transparent 70%); pointer-events: none;}.recipe-source { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1rem; border-radius: var(--radius-m); background: var(--bg-sage); border: 1px solid var(--border-soft); margin-bottom: 1rem;}.recipe-source-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--accent);}.recipe-source-text { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; min-width: 0;}.recipe-source-text b { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.recipe-source-text em { font-style: normal; font-size: 0.75rem; color: var(--text-muted);}.recipe-source-badge { font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); background: var(--accent-light); color: #24703A; flex-shrink: 0;}/* Servings selector */.recipe-servings { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}.recipe-servings-label { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.recipe-servings-control { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; background: var(--bg);}.recipe-servings-btn { width: 2.25rem; height: 2.125rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all var(--duration-base) var(--ease-gentle); background: none; border: none; font-family: var(--font-body); padding: 0; line-height: 1; -webkit-appearance: none;}.recipe-servings-btn:hover { color: var(--accent); background: var(--accent-light);}.recipe-servings-btn:active { transform: scale(0.92);}.recipe-servings-btn--active { color: var(--accent);}.recipe-servings-btn--disabled { color: var(--border); cursor: not-allowed;}.recipe-servings-btn--disabled:hover { color: var(--border); background: none;}.recipe-servings-btn--disabled:active { transform: none;}.recipe-servings-value { width: 2.5rem; text-align: center; font-size: 1rem; font-weight: 700; color: var(--text-main); border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); height: 2.125rem; display: flex; align-items: center; justify-content: center;}/* Cost summary */.recipe-cost-summary { display: flex; gap: 0.75rem; margin-bottom: 1rem;}.recipe-cost-total,.recipe-cost-per,.recipe-cost-nutrition { flex: 1; padding: 0.75rem 0.75rem; border-radius: var(--radius-m); background: var(--bg); border: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; gap: 0.125rem;}.recipe-cost-total,.recipe-cost-per { align-items: flex-start;}.recipe-cost-nutrition { overflow: hidden;}.recipe-nutrition-ring { position: relative; width: 2.75rem; height: 2.75rem; flex-shrink: 0; margin-top: auto;}.recipe-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%;}.recipe-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--accent); line-height: 1;}.recipe-cost-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);}.recipe-cost-value { font-family: var(--font-display); font-size: 1.375rem; color: var(--text-main); line-height: 1.2; transition: all var(--duration-base) var(--ease-gentle); margin-top: auto;}.recipe-cost-value--accent { color: var(--accent);}.recipe-divider { height: 0.0625rem; background: var(--border-soft); margin-bottom: 1rem;}.recipe-items-label { margin: 0 0 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);}.recipe-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;}.recipe-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); animation: slideInItem 0.5s var(--ease-soft) both;}.recipe-item:last-child { border-bottom: none;}.recipe-item-check { width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;}.recipe-item-text { flex: 1; font-size: 0.875rem; font-weight: 500; color: var(--text-main);}.recipe-item-price { font-size: 0.8125rem; font-weight: 700; color: var(--text-main); flex-shrink: 0; transition: all var(--duration-base) var(--ease-gentle);}.recipe-item-qty { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); background: var(--bg); padding: 0.1875rem 0.75rem; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); flex-shrink: 0; min-width: 3.25rem; text-align: center; transition: all var(--duration-base) var(--ease-gentle);}.recipe-footer { margin: 0.75rem 0 0; text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--accent);}/* ========================================== SMART RESTOCK — Pattern Recognition Feature ========================================== */.restock-card { width: 100%; max-width: 23.75rem; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 1.5rem; box-shadow: var(--shadow-elevated); position: relative; overflow: hidden;}.restock-card::before { content: ""; position: absolute; bottom: -2.5rem; right: -1.875rem; width: 11.25rem; height: 11.25rem; border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; background: radial-gradient(circle, rgba(45, 130, 61, 0.05), transparent 70%); pointer-events: none;}.restock-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;}.restock-bell { color: var(--purple); flex-shrink: 0;}.restock-header-text { font-size: 0.875rem; font-weight: 700; color: var(--text-main);}.restock-header-badge { margin-left: auto; font-size: 0.6875rem; font-weight: 600; padding: 0.1875rem 0.75rem; border-radius: var(--radius-pill); background: rgba(45, 130, 61, 0.1); color: var(--purple);}.restock-items { margin: 0; padding: 0; list-style: none; display: grid; gap: 0;}.restock-item { padding: 0.75rem 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 0.75rem;}.restock-item:last-child { border-bottom: none;}.restock-item-main { display: flex; align-items: center; gap: 0.75rem;}.restock-item-icon { width: 2.25rem; height: 2.25rem; border-radius: 999px; background: var(--bg-sage); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0;}.restock-item-info { display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; min-width: 0;}.restock-item-info b { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.restock-item-info em { font-style: normal; font-size: 0.75rem; color: var(--text-muted);}/* Sale notification tag */.restock-sale-tag { display: flex; align-items: center; gap: 0.5rem; margin-left: 3rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-lg); background: #FFF8E1; border: 1px solid #F5E6A3; font-size: 0.75rem; color: #8B6914; line-height: 1.3;}.restock-sale-tag svg { flex-shrink: 0; color: #D4A017;}.restock-sale-tag b { font-weight: 700; color: #6B4F0A;}.restock-sale-tag s { color: #B8A56E; font-size: 0.6875rem;}.restock-item-action { display: flex; align-items: center; justify-content: space-between; padding-left: 3rem;}/* Purchase pattern dots */.restock-pattern { display: flex; align-items: center; gap: 0.25rem;}.restock-pattern-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px;}.restock-pattern-dot--filled { background: var(--purple); opacity: 0.4;}.restock-pattern-dot--pulse { background: var(--purple); animation: restockPulse 1.5s var(--ease-gentle) infinite;}@keyframes restockPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); }}.restock-add { padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font-size: 0.75rem; font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: all var(--duration-base) var(--ease-gentle);}.restock-add:hover { background: var(--accent); color: #fff;}.restock-added-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); background: var(--accent-light); color: #24703A; font-size: 0.75rem; font-weight: 700;}.restock-item--added .restock-item-info b { color: var(--text-muted);}.restock-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); font-size: 0.75rem; color: var(--text-muted);}.restock-footer svg { flex-shrink: 0; color: var(--text-muted);}/* ========================================== VOICE ASSISTANT — Voice Feature Card ========================================== */.voice-card { max-width: 23.75rem; border-radius: var(--radius-xl); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); padding: 1.75rem 1.5rem; text-align: center;}/* Orb with pulsing rings */.voice-orb-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem;}.voice-orb { position: relative; width: 5rem; height: 5rem; border-radius: 999px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(45, 130, 61, 0.3);}.voice-mic { position: relative; z-index: 1; }.voice-ring { position: absolute; inset: -0.5rem; border-radius: 999px; border: 2px solid var(--accent); opacity: 0; animation: voicePulse 2.4s var(--ease-gentle) infinite;}.voice-ring--2 { inset: -1.125rem; animation-delay: 0.6s;}.voice-ring--3 { inset: -1.75rem; animation-delay: 1.2s;}@keyframes voicePulse { 0% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 0.1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.1); }}/* Transcript area */.voice-transcript { margin-bottom: 1.25rem;}.voice-transcript-label { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #1d6030; margin-bottom: 0.5rem; animation: voiceListening 1.5s ease-in-out infinite;}@keyframes voiceListening { 0%, 100% { color: #1d6030; } 50% { color: #3d7a4d; }}.voice-transcript-text { font-family: var(--font-display); font-size: 1.125rem; color: var(--text-main); line-height: 1.4; margin: 0;}/* Added items */.voice-added-items { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0;}.voice-added-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-soft); text-align: left;}.voice-added-item:last-child { border-bottom: none;}.voice-added-item svg { color: var(--accent); flex-shrink: 0;}.voice-added-item span { font-size: 0.875rem; font-weight: 600; color: var(--text-main);}.voice-added-item em { font-style: normal; font-size: 0.75rem; color: #5c6e62; margin-left: auto;}/* Assistant badges */.voice-assistants { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap;}.voice-assistant-badge { padding: 0.3125rem 0.75rem; border-radius: var(--radius-pill); background: var(--bg-sage); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 700; color: var(--text-secondary);}/* ========================================== BARCODE SCANNER — Scan Feature Card ========================================== */.barcode-card { max-width: 23.75rem; border-radius: var(--radius-xl); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); overflow: hidden;}/* Viewfinder area */.barcode-viewfinder { position: relative; background: #013E23; padding: 2rem 2.5rem; display: flex; align-items: center; justify-content: center; overflow: hidden;}.barcode-corner { position: absolute; width: 1.25rem; height: 1.25rem; border-color: var(--accent); border-style: solid; border-width: 0;}.barcode-corner--tl { top: 1rem; left: 1.5rem; border-top-width: 3px; border-left-width: 3px; border-radius: 0.25rem 0 0 0; }.barcode-corner--tr { top: 1rem; right: 1.5rem; border-top-width: 3px; border-right-width: 3px; border-radius: 0 0.25rem 0 0; }.barcode-corner--bl { bottom: 1rem; left: 1.5rem; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 0.25rem; }.barcode-corner--br { bottom: 1rem; right: 1.5rem; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 0.25rem 0; }.barcode-lines { display: flex; align-items: flex-end; gap: 0.1875rem; height: 2rem;}.barcode-bar { display: block; width: 0.1875rem; background: #fff; opacity: 0.7; border-radius: 0.0625rem;}/* Animated scan line */.barcode-scanline { position: absolute; left: 1.5rem; right: 1.5rem; height: 0.125rem; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 8px rgba(45, 130, 61, 0.5); animation: barcodeScan 2.4s var(--ease-gentle) infinite;}@keyframes barcodeScan { 0%, 100% { top: 18px; opacity: 0.3; } 50% { top: calc(100% - 18px); opacity: 1; }}/* Result area */.barcode-result { padding: 1.25rem;}.barcode-result-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem;}.barcode-result-header b { font-size: 0.9375rem; color: var(--text-main);}.barcode-match-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.75rem; border-radius: var(--radius-pill); background: var(--accent-light); color: #24703A; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;}/* Info row: nutrition + calories */.barcode-info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem;}.barcode-info-block { padding: 0.75rem 1rem; border-radius: var(--radius-lg); background: var(--bg-sage); display: flex; flex-direction: column; gap: 0.125rem;}.barcode-info-label { font-size: 0.6875rem; color: #5c6e62; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;}.barcode-info-value { font-family: var(--font-display); font-size: 1.25rem; color: var(--text-main); line-height: 1.2;}.barcode-info-value--accent { color: #1d6030;}/* Store list */.barcode-stores { margin-bottom: 1rem;}.barcode-stores-label { display: block; font-size: 0.6875rem; font-weight: 700; color: #5c6e62; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem;}.barcode-store-list { list-style: none; padding: 0; margin: 0;}.barcode-store-list li { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border-soft);}.barcode-store-list li:last-child { border-bottom: none;}.barcode-store-name { font-size: 0.875rem; color: var(--text-main);}.barcode-store-price { font-size: 0.875rem; font-weight: 700; color: var(--text-main);}.barcode-store-price--sale { color: #24703A; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;}.barcode-sale-flag { padding: 0.125rem 0.5rem; border-radius: var(--radius-pill); background: #FFF8E1; border: 1px solid #F5E6A3; color: #8B6914; font-size: 0.625rem; font-weight: 700;}/* Add to list button */.barcode-add-btn { width: 100%; padding: 0.75rem 0; border-radius: var(--radius-pill); border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font-size: 0.875rem; font-weight: 700; font-family: var(--font-body); cursor: pointer; transition: all var(--duration-base) var(--ease-gentle);}.barcode-add-btn:hover { background: var(--accent); color: #fff;}/* ========================================== RETAILER PARTNERSHIP ========================================== */.partner-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center;}.partner-copy .lead { margin-bottom: var(--space-l);}@media (min-width: 860px) { .partner-layout { grid-template-columns: 1fr 1fr; gap: 3.5rem; }}.section p.partner-ideal { font-size: 1rem; color: var(--text-secondary); font-style: italic; margin-top: 0.75rem; margin-bottom: 1.75rem;}/* Retailer dashboard card */.partner-card { max-width: 23.75rem; border-radius: var(--radius-xl); border: 1.5px solid var(--border); background: var(--surface); box-shadow: var(--shadow-card); padding: 1.5rem;}.partner-card-header { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-soft); margin-bottom: 1rem; color: #5c6e62; font-size: 0.8125rem; font-weight: 600;}.partner-card-header svg { color: #1d6030;}.partner-card-store { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem;}.partner-store-avatar { width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.875rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}.partner-card-store b { display: block; font-size: 0.9375rem; color: var(--text-main);}.partner-card-store em { font-style: normal; font-size: 0.75rem; color: #5c6e62;}.partner-card-stats { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;}.partner-card-stats li { text-align: center; padding: 0.75rem 0.5rem; border-radius: var(--radius-lg); background: var(--bg-sage);}.partner-stat-value { display: block; font-family: var(--font-display); font-size: 1.375rem; color: #1d6030; line-height: 1.2;}.partner-stat-label { display: block; font-size: 0.625rem; font-weight: 700; color: #5c6e62; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.125rem;}.partner-card-recent { padding-top: 1rem; border-top: 1px solid var(--border-soft);}.partner-recent-label { display: block; font-size: 0.6875rem; font-weight: 700; color: #5c6e62; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75rem;}.partner-recent-items { display: flex; flex-direction: column; gap: 0.5rem;}.partner-recent-item { font-size: 0.8125rem; color: var(--text-secondary); padding: 0.5rem 0.75rem; border-radius: var(--radius-m); background: var(--surface-2);}/* ========================================== FINAL CTA — Organic Gradient Panel ========================================== */.section.final-cta { padding: 4.5rem 0 4rem; position: relative;}.final-cta .cta-panel h2 { margin: 0 0 0.75rem;}.final-cta .cta-panel p { margin: 0 0 1rem;}/* ========================================== FAQ — Rounded, Calm Details ========================================== */.faq { margin-top: 1.5rem; display: grid; gap: 0.75rem;}details { border-radius: var(--radius-l); border: 1.5px solid var(--border); background: var(--surface); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-card); transition: all var(--duration-slow) var(--ease-gentle);}details:hover { box-shadow: var(--shadow-hover); border-color: rgba(45, 130, 61, 0.2);}details[open] { box-shadow: var(--shadow-hover); border-color: rgba(45, 130, 61, 0.15);}summary { cursor: pointer; font-weight: 600; list-style: none; color: var(--text-main); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-family: var(--font-body); transition: color var(--duration-base) var(--ease-gentle);}/* Circular expand indicator — uses SVG data URIs for pixel-perfect centering */summary::after { content: ""; width: 1.75rem; height: 1.75rem; min-width: 1.75rem; border-radius: 999px; background-color: var(--accent-light); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cline x1='7' y1='2' x2='7' y2='12' stroke='%232D823D' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='2' y1='7' x2='12' y2='7' stroke='%232D823D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; flex-shrink: 0; transition: all var(--duration-base) var(--ease-gentle);}details[open] summary::after { background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cline x1='2' y1='7' x2='12' y2='7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");}summary:hover { text-decoration: none; color: var(--accent);}summary:focus-visible { background: var(--accent-light); border-radius: var(--radius-m);}summary::-webkit-details-marker { display: none; }details[open] summary { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border);}details p { margin: 0; color: var(--text-secondary); line-height: 1.7;}/* ========================================== CTA PANEL — Organic Flowing Shape ========================================== */.cta-panel { margin-top: 0; padding: 2.5rem 2.25rem; border-radius: var(--radius-blob); border: 1.5px solid var(--border); background: radial-gradient(ellipse 500px 300px at 15% 20%, rgba(45, 130, 61, 0.06), transparent 60%), radial-gradient(ellipse 400px 250px at 85% 80%, rgba(45, 130, 61, 0.04), transparent 55%), radial-gradient(ellipse 300px 300px at 50% 50%, rgba(45, 130, 61, 0.02), transparent 70%), var(--surface); box-shadow: var(--shadow-elevated); text-align: center; max-width: 38.75rem; margin-inline: auto;}.cta-panel .store-badges { justify-content: center;}.cta-panel .waitlist-inline { margin-inline: auto; border: none; box-shadow: none; background: transparent; padding: 1.5rem 0 0;}.cta-panel h3 { margin: 0 0 0.375rem; }/* ========================================== FOOTER — Warm, Organic ========================================== */.site-footer { padding: 5rem 0 2.5rem; background: var(--primary); color: var(--primary-fg); border-top: none; position: relative;}/* Organic curved top edge */.site-footer::before { content: ""; position: absolute; top: -2.5rem; left: 0; right: 0; height: 2.5rem; background: var(--primary); border-radius: 50% 50% 0 0 / 100% 100% 0 0;}.footer-grid { display: grid; gap: 1.5rem;}.site-footer .brand-name { color: var(--primary-fg);}.site-footer .muted { color: rgba(255, 255, 255, 0.45);}.footer-links { display: grid; gap: 0.75rem;}.footer-links a { color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.875rem; transition: color var(--duration-base) var(--ease-gentle);}.footer-links a:hover { color: var(--primary-fg); text-decoration: none; opacity: 1;}.footer-social { display: flex; gap: 1rem; margin-top: 1rem;}.footer-social a { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; opacity: 0.5; transition: opacity var(--duration-base) var(--ease-gentle);}.footer-social a:hover { opacity: 1;}.footer-social img { width: 1.25rem; height: 1.25rem;}.footer-meta { color: rgba(255, 255, 255, 0.35); }.footer-meta .fineprint { color: rgba(255, 255, 255, 0.35); }.footer-brand .brand-name { font-size: 1.0625rem; }/* ========================================== LEGAL PAGES ========================================== */.legal-content { padding: 2.5rem 0 3.75rem;}.legal-content h1 { font-size: clamp(1.75rem, 4vw, 2.625rem); margin: 0 0 0.5rem;}.legal-content .legal-date { color: var(--text-secondary); font-size: 0.875rem; margin: 0 0 2rem;}.legal-content h2 { font-size: 1.375rem; margin: 2rem 0 0.75rem; letter-spacing: -0.2px;}.legal-content p { color: var(--text-secondary); margin: 0 0 1rem; max-width: 72ch; line-height: 1.7;}.legal-content ul { color: var(--text-secondary); margin: 0 0 1rem; padding-left: 1.25rem; line-height: 1.8;}.legal-content a { color: var(--accent);}/* ========================================== RESPONSIVE ========================================== */@media (min-width: 860px) { .nav { display: inline-flex; position: static; flex-direction: row; transform: none; background: transparent; padding: 0; } .hero { padding: 6.5rem 0 6rem; } .hero-grid { grid-template-columns: 1fr; gap: 3rem; } .proof-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } .form { grid-template-columns: 1fr auto; } .cards { grid-template-columns: repeat(2, 1fr); } .cards .card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 50%; justify-self: center; } .preview-layout { grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 63.75rem; margin-inline: auto; } .preview-layout .phone-calm { width: min(21.25rem, 100%); } .feature-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr 1fr; align-items: start; gap: 1.75rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }}@media (max-width: 600px) { .text-cta { padding: 0.5rem 0; } .section { padding: 4.5rem 0; } .section-tight { padding: 1.25rem 0; } .chapter--tint, .chapter--tint.section.alt { background: radial-gradient(ellipse 600px 400px at 10% 20%, rgba(45, 130, 61, 0.04), transparent 55%), radial-gradient(ellipse 500px 300px at 85% 80%, rgba(45, 130, 61, 0.025), transparent 50%), var(--bg-sage); } .chapter--dark { background: radial-gradient(ellipse 600px 400px at 15% 25%, rgba(45, 130, 61, 0.1), transparent 55%), radial-gradient(ellipse 500px 300px at 80% 75%, rgba(45, 130, 61, 0.06), transparent 50%), var(--primary); } #preview .preview-layout { padding: 1.25rem; border-radius: var(--radius-xl); } .proof-bar { padding: 1rem 0; } .container { width: min(var(--max-width), 100% - 2rem); } .footer-grid { grid-template-columns: 1fr; } .footer-links { flex-direction: column; gap: 0.75rem; } .phone-calm { width: 100%; max-width: 100%; } .hero h1 { font-size: clamp(2.125rem, 9vw, 3rem); } .cta-panel { padding: 1.75rem 1.5rem; border-radius: var(--radius-xl); } /* Stepper: single column on mobile */ .stepper { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; padding-left: 2rem; } .stepper::before { top: 0; bottom: 0; left: 1.4375rem; right: auto; width: 0.125rem; height: auto; background: repeating-linear-gradient( 180deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px ); } .stepper-step { flex: 0 0 auto; max-width: 100%; display: grid; grid-template-columns: 2.5rem 1fr; grid-template-rows: auto auto; text-align: left; gap: 0.25rem 1rem; padding: 0 0 1.75rem 0; } .stepper-step:not(:last-child)::after { display: none; } .stepper-step:last-child { padding-bottom: 0; } .stepper-num { grid-row: 1 / -1; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; font-size: 1.0625rem; margin-bottom: 0; margin-left: -1.25rem; } .stepper-step h3 { font-size: 1rem; } .stepper-step p { font-size: 0.8125rem; } .site-footer::before { top: -1.5rem; height: 1.5rem; }}/* ========================================== STATUS BAR + NUTRITION (legacy mockup styles) ========================================== */.app-status-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem;}.status-left { display: inline-flex; align-items: center; gap: 0.5rem; color: #013B21; font-weight: 700; font-size: 0.8125rem;}.status-mute { width: 0.625rem; height: 0.625rem; position: relative; display: inline-block;}.status-mute::before,.status-mute::after { content: ""; position: absolute; background: #013B21;}.status-mute::before { width: 0.625rem; height: 0.125rem; left: 0; top: 0.25rem;}.status-mute::after { width: 0.125rem; height: 0.625rem; left: 0.25rem; top: 0; transform: rotate(45deg);}.status-notch { width: 7.25rem; height: 1.75rem; border-radius: 1.125rem; background: #013E23; border: 1px solid rgba(255, 255, 255, 0.08);}.status-right { display: inline-flex; justify-self: end; align-items: center; gap: 0.5rem;}.status-signal { width: 1rem; height: 0.75rem; position: relative; display: inline-block;}.status-signal::before { content: ""; position: absolute; left: 0; bottom: 0; width: 0.1875rem; height: 0.1875rem; border-radius: 0.0625rem; background: #013B21; box-shadow: 4px -2px 0 #013B21, 8px -4px 0 #013B21, 12px -6px 0 #013B21;}.status-wifi { width: 0.875rem; height: 0.625rem; border: 2px solid #013B21; border-color: #013B21 transparent transparent transparent; border-radius: 50% 50% 0 0; transform: translateY(2px);}.status-battery { border-radius: 0.5rem; background: rgba(1, 59, 33, 0.18); color: #013B21; font-size: 0.625rem; font-weight: 700; padding: 0.125rem 0.5rem;}.app-top-summary { margin: 1rem 0 0.75rem; display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center;}.menu-lines { width: 1.25rem; height: 1rem; display: inline-block; position: relative;}.menu-lines::before,.menu-lines::after { content: ""; position: absolute; left: 0; height: 0.1875rem; border-radius: 0.1875rem; background: #024125;}.menu-lines::before { width: 1.25rem; top: 0.1875rem; }.menu-lines::after { width: 0.75rem; top: 0.625rem; }.summary-total { text-align: center;}.summary-total span,.summary-score span { display: block; letter-spacing: 0.12em; font-size: 0.625rem; color: #3D5C47; font-weight: 700;}.summary-total strong { font-size: 2.875rem; line-height: 1; color: #013B21; letter-spacing: -0.04em;}.summary-score strong { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.5rem; width: 3.5rem; height: 2.5rem; border-radius: 0.75rem; background: #2D823D; color: #E6F2E8; font-size: 1.25rem;}.nutrition-sheet { border-radius: 1.375rem; background: #F3F3F3; border: 1px solid rgba(1, 59, 33, 0.12); box-shadow: 0 10px 22px rgba(1, 59, 33, 0.12); padding: 1rem 0.75rem 0.75rem;}.nutrition-head { display: flex; justify-content: space-between; gap: 0.75rem;}.nutrition-head h3 { margin: 0; font-size: 1.25rem; color: #024125; }.nutrition-head p { margin: 0.125rem 0 0; color: #3D5C47; }.nutrition-score strong { color: #013B21; }.nutrition-score span { color: #8A9A8E; }.close-chip { width: 2.125rem; height: 2.125rem; border-radius: 999px; background: #D9DDD9; color: #024125; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;}.macro-tip { margin: 0.5rem 0 0.5rem auto; width: fit-content; background: #013E23; color: #f4f5f7; border-radius: 0.625rem; font-size: 0.6875rem; font-weight: 700; padding: 0.3125rem 0.75rem;}.macro-bar { display: flex; height: 0.75rem; border-radius: 999px; overflow: hidden; background: #D9DDD9;}.macro-protein { width: 50%; background: #2D823D; }.macro-fat { width: 42%; background: #e0c062; }.macro-carbs { width: 8%; background: #9aabc1; }.macro-legend { margin: 0.5rem 0 0.75rem; display: flex; justify-content: space-around; gap: 0.5rem; color: #3D5C47; font-size: 0.6875rem; font-weight: 600;}.macro-legend span { display: inline-flex; align-items: center; gap: 0.3125rem;}.dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; display: inline-block;}.dot.protein { background: #2D823D; }.dot.fat { background: #e0c062; }.dot.carbs { background: #9aabc1; }.nutrition-card { margin-top: 0.75rem; border: 1px solid #D9DDD9; border-radius: 1rem; background: #F3F3F3; padding: 0.75rem;}.nutrition-card h4 { margin: 0 0 0.5rem; font-size: 1.125rem; color: #013B21; }.nutrition-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem;}.nutrition-card li { display: grid; grid-template-columns: 5.75rem 1fr auto; gap: 0.5rem; align-items: center; font-size: 0.75rem;}.nutrition-card li span:first-child { color: #013B21; }.meter { display: block; height: 0.5625rem; border-radius: 999px; background: #D9DDD9; overflow: hidden;}.fill { display: block; height: 100%; border-radius: inherit;}.fill.protein { background: #2D823D; }.fill.moderate { background: #e0c062; }.fill.high { background: #d45463; }.w-xxs { width: 3%; }.w-xs { width: 5%; }.w-sm { width: 12%; }.w-md { width: 22%; }.w-full { width: 100%; }.nutrition-card strong { font-size: 0.625rem; font-weight: 700; text-align: right;}.nutrition-card strong.moderate { color: #d3ae46; }.nutrition-card strong.low { color: #58a77f; }.nutrition-card strong.high { color: #cc4f62; }.nutrition-card strong.excellent { color: #2D823D; }.nutrition-card strong.good { color: #d3ae46; }.nutrition-note { margin: 0.75rem 0 0; text-align: center; font-size: 0.6875rem; color: #8A9A8E;}.nutrition-sheet .nutrition-card:last-of-type { margin-bottom: 0;}/* ========================================== FEATURE LANDING PAGES ========================================== *//* Override scroll-reveal opacity for feature pages (hero visible immediately) */.feature-page .shared-list-copy,.feature-page .shared-list-visual { opacity: 1; transform: none; transition: none;}/* Deep-dive grid */.feature-deep-grid { display: grid; grid-template-columns: 1fr; gap: 2rem;}@media (min-width: 860px) { .feature-deep-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }}.feature-deep-item h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem;}.feature-deep-item p { font-size: 0.9375rem; line-height: 1.7; color: var(--text-secondary);}/* Related features grid */.related-features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem;}@media (min-width: 860px) { .related-features-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }}.related-feature-card { display: block; padding: 1.75rem; border: 1.5px solid var(--border); border-radius: var(--radius-l); background: var(--surface); text-decoration: none; transition: transform var(--duration-base) var(--ease-gentle), box-shadow var(--duration-base) var(--ease-gentle);}.related-feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); opacity: 1;}.related-feature-card .eyebrow { margin-bottom: 0.5rem; font-size: 0.75rem;}.related-feature-card h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; color: var(--text-main);}.related-feature-card p { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 0;}/* "Learn more" link for homepage feature sections */.feature-learn-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.9375rem; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 0.75rem;}.feature-learn-more:hover { opacity: 0.8;}/* Dark chapter overrides for feature page elements */.chapter--dark .feature-deep-item h3 { color: #FFFFFF; }.chapter--dark .feature-deep-item p { color: rgba(255, 255, 255, 0.7); }.chapter--dark .feature-learn-more { color: #7DC88A; }.chapter--dark .related-feature-card { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.1);}.chapter--dark .related-feature-card h3 { color: #FFFFFF; }.chapter--dark .related-feature-card p { color: rgba(255, 255, 255, 0.6); }.chapter--dark .related-feature-card:hover { background: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);}/* FAQ on feature pages */.feature-page .faq { max-width: 48rem; }.feature-page details summary { color: var(--text-main);}.feature-page details p { margin: 0; color: var(--text-secondary); line-height: 1.7;}
/* Mobile nav overlay patch for #main-nav */
#nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  flex-direction: column;
  gap: 5px;
  z-index: 10001;
}

#nav-hamburger .hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: transform 0.3s var(--ease-gentle), opacity 0.3s var(--ease-gentle);
}

#nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

#nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

#nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  #nav-hamburger {
    display: flex;
  }

  .nav#main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: calc(var(--header-height) + 2rem) 2rem 2rem;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease-gentle);
    z-index: 10000;
  }

  .nav#main-nav.is-open {
    opacity: 1;
    pointer-events: auto;
    background-color: var(--bg) !important;
  }

  .nav#main-nav a {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: left;
    color: var(--text-main);
    display: block;
    width: 100%;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
    transition: all 0.2s ease;
  }

  .nav#main-nav a:first-child {
    border-top: 1px solid var(--border-soft);
  }

  .nav#main-nav a:active {
    background: rgba(1, 59, 33, 0.04);
    padding-left: 0.5rem;
  }

  .nav#main-nav .nav-cta {
    margin-left: 0;
    margin-top: 2rem;
    text-align: center;
    border-bottom: none;
    padding: 1rem 2rem;
    background: var(--primary);
    color: var(--primary-fg);
    border-radius: var(--radius-pill);
  }
}

@media (max-width:768px){.site-header{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}