:root { color-scheme: light; --ink:#233c31; --muted:#646f65; --paper:#f7f8f2; --line:#dfe5d9; --orange:#b94923; --green:#203e30; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
a { color:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid #a2681e; outline-offset:4px; }
[hidden] { display:none !important; }
.wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; top:-100px; left:20px; z-index:10; background:#fff; padding:12px; }
.skip-link:focus { top:12px; }
.site-header { display:flex; gap:24px; align-items:center; justify-content:space-between; padding-block:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:24px; font-weight:760; letter-spacing:-.9px; text-decoration:none; white-space:nowrap; }
.brand img { object-fit:contain; }
.brand-dot { color:var(--orange); }
.header-links { display:flex; gap:28px; font-size:13px; font-weight:650; }
.header-links a,.login-link { text-decoration:none; padding-block:10px; }
.header-links a:hover,.login-link:hover { color:var(--orange); }
.header-actions { display:flex; gap:22px; align-items:center; font-size:13px; font-weight:650; }
.btn { display:inline-flex; gap:22px; align-items:center; justify-content:center; min-height:54px; padding:14px 23px; border:1px solid transparent; border-radius:12px; background:var(--orange); color:#fff; text-decoration:none; font-size:15px; font-weight:700; line-height:1.4; cursor:pointer; box-shadow:0 5px 12px #87351012; transition:background .15s,transform .15s; }
.btn:hover { background:#993818; transform:translateY(-2px); }
.btn span[aria-hidden] { font-size:20px; font-weight:400; line-height:1; }
.btn-small { min-height:44px; padding:11px 16px; font-size:13px; gap:16px; border-radius:10px; }
.btn-outline { background:transparent; color:var(--ink); border-color:#c3d0bd; box-shadow:none; }
.btn-outline:hover { background:#edf2e6; }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:70px; padding-block:64px 80px; align-items:center; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:10px; font-weight:750; letter-spacing:1.7px; line-height:1.6; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#718b56; box-shadow:0 0 0 4px #718b5615; }
h1,h2,h3,p { margin:0; }
h1 { margin:24px 0; font-size:clamp(46px,5.4vw,70px); line-height:1.04; letter-spacing:-3.3px; font-weight:750; }
h1 em { display:block; color:#698348; font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-3px; }
.hero-description { max-width:480px; font-size:18px; line-height:1.75; color:var(--muted); }
.hero-actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:30px; }
.text-link { font-size:13px; font-weight:650; text-underline-offset:5px; }
.text-link span { display:inline-block; margin-left:8px; }
.cta-note { margin-top:14px; color:var(--muted); font-size:11px; }
.cta-note span { padding-inline:5px; }
.hero-points { display:flex; gap:18px; flex-wrap:wrap; margin-top:32px; padding-top:22px; border-top:1px solid var(--line); font-size:11px; color:#4b5b4e; }
.hero-points i { font-style:normal; margin-right:4px; color:#587638; }
.hero-preview { position:relative; min-width:0; scroll-margin-top:30px; }
.hero-preview::before { content:""; position:absolute; z-index:-1; width:110%; aspect-ratio:1; top:9%; left:-5%; border-radius:50%; background:#e9eedb; }
.preview-label { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:0 14px 14px; }
.preview-label > span:last-child { font-size:10px; color:var(--muted); }
.demo-card { background:#fff; border:1px solid #dbe1d5; border-radius:23px; padding:26px; box-shadow:0 24px 60px #263c3010,0 3px 6px #263c3005; }
.demo-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.demo-header .muted { font-size:11px; }
.demo-header h2 { font-size:24px; letter-spacing:-.8px; line-height:1.3; }
.muted { color:var(--muted); }
.today-pill { padding:5px 12px; border-radius:7px; background:#f1f4ed; font-size:11px; }
.demo-overview { display:grid; grid-template-columns:166px minmax(0,1fr); gap:25px; align-items:center; padding-block:24px; }
.demo-ring { width:166px; height:166px; border-radius:50%; padding:11px; background:conic-gradient(#718b50 var(--progress),#edf1e6 0); }
.demo-ring > div { width:100%; height:100%; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.demo-ring strong { font-size:34px; line-height:1.2; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; }
.demo-ring span { font-size:11px; color:var(--muted); }
.demo-ring small { font-size:9px; color:var(--muted); margin-top:8px; }
.demo-ring small span { font-size:inherit; }
.demo-macros { display:grid; gap:12px; }
.demo-macros > div { display:grid; gap:3px; }
.demo-macros > div > span { display:flex; gap:5px; align-items:center; color:var(--muted); font-size:10px; }
.demo-macros strong { font-size:15px; font-variant-numeric:tabular-nums; }
.demo-macros small { font-weight:400; font-size:10px; color:var(--muted); }
.macro-dot { width:5px; height:5px; border-radius:50%; }
.protein { background:#688943; }.carbs { background:#cda048; }.fat { background:#6b96a6; }
.macro-track { height:4px; border-radius:6px; background:#f1f3ed; overflow:hidden; }
.macro-track span { display:block; height:100%; border-radius:6px; }
.demo-meal { display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid #edf0e7; }
.meal-icon { width:34px; height:34px; display:grid; place-items:center; background:#ecf2e6; border-radius:10px; flex-shrink:0; font-size:13px; color:#5e7f3c; }
.demo-meal > div:not(.meal-icon) { display:grid; gap:2px; }
.demo-meal strong { font-size:11px; }.demo-meal span { color:var(--muted); font-size:9px; }.demo-meal .meal-kcal { margin-left:auto; color:var(--ink); white-space:nowrap; font-size:11px; }
.demo-entry { padding:16px; margin-top:8px; background:#f6f8f0; border:1px solid #e5eadb; border-radius:13px; }
.demo-entry-head { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.demo-entry-head strong { font-size:12px; }
.tag { display:inline-flex; align-items:center; padding:3px 7px; border-radius:5px; background:#fff; border:1px solid #e2e8d9; color:#61704f; font-size:9px; font-weight:700; white-space:nowrap; }
.demo-entry label { display:block; font-size:10px; font-weight:600; margin-bottom:4px; }
.demo-entry-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.demo-entry input { min-width:0; width:100%; min-height:44px; border:1px solid #cad5bf; border-radius:9px; padding:8px 12px; font-size:16px; color:var(--ink); background:#fff; }
.demo-feedback { display:flex; gap:10px; align-items:center; margin-top:10px; min-height:30px; }
.demo-feedback p { font-size:10px; line-height:1.5; color:var(--muted); }
.reset-link { background:none; border:0; color:var(--orange); font-size:11px; font-weight:700; cursor:pointer; padding:8px; min-height:40px; }
.demo-caption { font-size:10px; text-align:center; color:var(--muted); margin-top:14px; }
.benefit-strip { background:#eaf0e2; border-top:1px solid #e0e7d6; border-bottom:1px solid #e0e7d6; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding-block:25px; gap:36px; }
.benefit-grid > div { display:flex; align-items:center; gap:16px; }
.benefit-number { color:#718b56; font:italic 30px Georgia,serif; }
.benefit-grid p { display:grid; gap:2px; font-size:13px; }.benefit-grid p span { font-size:12px; color:var(--muted); }
.section { padding-block:90px; }
.section-heading { max-width:590px; margin-bottom:36px; }
.section-heading h2 { font-size:clamp(32px,3.7vw,46px); line-height:1.13; letter-spacing:-1.8px; margin:14px 0 18px; }
.section-heading p { color:var(--muted); font-size:15px; max-width:540px; }
.feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.feature-card { padding:34px; background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.feature-index { display:block; color:#6b785f; font-size:9px; font-weight:700; letter-spacing:1.4px; margin-bottom:18px; }
.feature-card h3 { font-size:28px; line-height:1.16; letter-spacing:-1px; margin-bottom:15px; }
.feature-card p { font-size:14px; color:var(--muted); max-width:425px; }
.feature-main { background:#f0e9de; border-color:#e7dece; }
.capture-options { display:grid; gap:8px; margin-top:25px; }
.capture-options > div { display:flex; align-items:center; gap:13px; padding:14px 16px; background:#fff9; border:1px solid #e1d7c6; border-radius:10px; font-size:12px; font-weight:600; }
.capture-options .capture-selected { background:#fff; box-shadow:0 5px 20px #71553308; border-color:#ccb799; }
.capture-options > div > :last-child { margin-left:auto; }.capture-icon { width:21px; height:21px; font-size:24px; line-height:21px; color:#8e6040; }
.feature-green { background:#eaf0e1; border-color:#dce5d0; }
.balance-visual { margin-top:36px; padding:22px; background:#ffffff90; border-radius:13px; }
.balance-visual > span { font-size:11px; color:var(--muted); }.balance-visual > div { background:#d8e2cc; height:13px; border-radius:20px; margin:12px 0 16px; }.balance-visual i { display:block; width:68%; height:100%; background:#748c54; border-radius:20px; }.balance-visual strong { font-size:14px; }
.routine-chips { display:flex; gap:10px; flex-wrap:wrap; margin-top:26px; }.routine-chips span { padding:10px 12px; border-radius:9px; border:1px solid #e0e7d8; background:#f5f8ef; font-size:12px; color:#5b704b; }
.feature-progress { background:#f0f3f0; }
.trend-visual { display:flex; align-items:end; gap:9px; height:120px; padding-bottom:26px; margin-top:18px; position:relative; }.trend-visual > span { height:var(--height); flex:1; background:#b8c9ac; border-radius:5px 5px 0 0; }.trend-visual > span:nth-last-of-type(1) { background:#63874e; }.trend-visual small { position:absolute; bottom:0; font-size:8px; letter-spacing:1.2px; color:var(--muted); }
.how-section { background:var(--green); color:#f4f6eb; padding-block:70px; }
.how-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:100px; }
.how-section .eyebrow { color:#b4c999; }.how-section .section-heading { margin-bottom:0; }.how-section h2 { margin-bottom:28px; }
.steps { padding:0; margin:0; list-style:none; display:grid; gap:26px; }.steps li { display:flex; gap:20px; padding-bottom:26px; border-bottom:1px solid #ffffff20; }.steps li:last-child { padding-bottom:0; border:0; }.steps li > span { color:#b9cd9d; font:italic 28px Georgia,serif; }.steps h3 { font-size:18px; margin-bottom:7px; letter-spacing:-.3px; }.steps p { color:#bdcdbf; font-size:13px; max-width:380px; }
.centered { margin-inline:auto; text-align:center; max-width:730px; }.centered .eyebrow { justify-content:center; }.centered p { margin-inline:auto; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:860px; margin:52px auto 0; }
.price-card { position:relative; padding:32px; background:#fff; border:1px solid var(--line); border-radius:20px; }.price-card h3 { font-size:25px; margin-top:8px; letter-spacing:-.7px; }.price { font-size:44px; line-height:1.2; letter-spacing:-1.7px; margin:20px 0 12px; font-weight:720; }.price > span { font-size:14px; color:var(--muted); font-weight:400; letter-spacing:0; }.plan-description { font-size:13px; color:var(--muted); min-height:42px; }.price-card .btn { width:100%; margin-block:24px; }
.price-pro { background:#f0f5e8; border:1px solid #9aaf84; }.pro-ribbon { position:absolute; top:-14px; left:24px; right:24px; text-align:center; padding:5px 8px; background:var(--green); color:#fff; border-radius:6px; font-size:8px; font-weight:700; letter-spacing:1px; }
.check-list { margin:0; padding:0; list-style:none; display:grid; gap:13px; font-size:13px; }.check-list li { padding-left:23px; position:relative; }.check-list li::before { content:'✓'; position:absolute; left:0; color:#5d7a45; }
.pricing-note { color:var(--muted); font-size:12px; text-align:center; max-width:650px; margin:24px auto 0; }
.faq-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; padding-top:20px; }.faq-section a { text-underline-offset:4px; }
.faq-list details { border-bottom:1px solid var(--line); }.faq-list summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px; padding-block:18px; font-weight:650; font-size:14px; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary > span { font-size:22px; font-weight:400; color:#6f855a; }.faq-list details[open] summary > span { transform:rotate(45deg); }.faq-list details p { font-size:14px; color:var(--muted); padding-bottom:24px; }
.final-section { padding-bottom:68px; }.final-card { position:relative; overflow:hidden; padding:60px 28px; border-radius:24px; text-align:center; background:#e8efdc; border:1px solid #dbe5cc; }.final-card::before,.final-card::after { content:''; position:absolute; width:350px; height:350px; border:1px solid #91a67230; border-radius:50%; pointer-events:none; }.final-card::before { left:-170px; top:-100px; }.final-card::after { right:-190px; bottom:-200px; }.final-card .eyebrow { justify-content:center; }.final-card h2 { font-size:clamp(32px,4vw,50px); line-height:1.14; letter-spacing:-1.8px; margin:18px 0; }.final-card p { font-size:15px; color:var(--muted); margin-bottom:24px; }.final-note { display:block; font-size:11px; color:var(--muted); margin-top:12px; }
.site-footer { display:flex; align-items:center; gap:30px; padding-block:0 30px; }.site-footer .brand { font-size:19px; }.site-footer > span { font-size:11px; color:var(--muted); }.site-footer nav { display:flex; gap:24px; margin-left:auto; font-size:11px; }.site-footer nav a { text-decoration:none; padding:10px 0; }.site-footer nav a:hover { text-decoration:underline; }
@media (max-width:1050px) {
    .header-links { gap:16px; }.hero { gap:32px; padding-top:40px; }h1 { font-size:54px; }.hero-actions { gap:16px; }.demo-card { padding:20px; }.demo-overview { grid-template-columns:140px minmax(0,1fr); gap:18px; }.demo-ring { width:140px; height:140px; }.demo-entry-head { flex-wrap:wrap; }.how-layout { gap:45px; }.faq-section { gap:40px; }
}
@media (max-width:800px) {
    .wrap { width:calc(100% - 40px); }.header-links { display:none; }.hero { grid-template-columns:1fr; gap:45px; padding-block:40px 52px; }.hero-copy { max-width:580px; }.hero-preview { width:min(100%,490px); margin-inline:auto; }.hero-preview::before { width:100%; left:0; }.hero-description { max-width:540px; }h1 { font-size:64px; }h1 em { display:inline; }.benefit-grid { gap:16px; }.benefit-grid > div { align-items:flex-start; gap:10px; }.benefit-grid p { font-size:12px; }.benefit-grid p span { font-size:11px; }.feature-card { padding:26px; }.feature-card h3 { font-size:25px; }.feature-grid { gap:14px; }.how-layout { grid-template-columns:1fr; gap:36px; }.how-section .section-heading { max-width:100%; }.steps p { max-width:100%; }.faq-section { grid-template-columns:1fr; gap:0; }.section { padding-block:60px; }.faq-section { padding-top:0; }.price-card { padding:26px; }.site-footer { flex-wrap:wrap; gap:18px; }.site-footer nav { margin-left:0; }
}
@media (max-width:540px) {
    .wrap { width:calc(100% - 36px); }.site-header { gap:10px; padding-block:16px; }.brand { font-size:20px; gap:7px; }.brand img { width:32px; height:32px; }.header-actions { gap:12px; }.header-actions .btn { display:none; }.login-link { min-height:44px; padding:12px 0; }.hero { padding-top:26px; gap:36px; }.eyebrow { font-size:9px; letter-spacing:1.3px; }h1 { font-size:clamp(43px,12vw,62px); letter-spacing:-2.1px; margin:20px 0; }h1 em { letter-spacing:-2px; }.hero-description { font-size:16px; }.hero-actions { display:grid; gap:16px; margin-top:24px; }.hero-actions .btn { width:100%; }.hero-actions .text-link { text-align:center; }.cta-note { text-align:center; font-size:10px; }.hero-points { margin-top:22px; padding-top:18px; gap:10px; justify-content:space-between; font-size:9px; }.hero-points i { margin-right:2px; }.preview-label { margin-inline:4px; }.preview-label .eyebrow { font-size:8px; }.preview-label > span:last-child { font-size:9px; }.demo-card { padding:18px; border-radius:18px; }.demo-header h2 { font-size:22px; }.demo-overview { grid-template-columns:138px minmax(0,1fr); gap:20px; padding-block:20px; }.demo-ring { width:138px; height:138px; padding:10px; }.demo-ring strong { font-size:30px; }.demo-entry { padding:12px; }.demo-entry-head strong { font-size:11px; }.demo-entry-controls { grid-template-columns:minmax(0,1fr) auto; }.demo-entry .btn { padding-inline:12px; gap:10px; }.demo-caption { font-size:9px; }.demo-meal .meal-kcal { font-size:10px; }.demo-meal > div:not(.meal-icon) { min-width:0; }.demo-meal span { line-height:1.4; }.benefit-grid { grid-template-columns:1fr; gap:20px; padding-block:26px; }.benefit-grid > div { gap:18px; align-items:center; }.benefit-grid p { font-size:14px; }.benefit-grid p span { font-size:12px; }.benefit-number { font-size:28px; }.section-heading h2 { font-size:34px; letter-spacing:-1.1px; }.section-heading p { font-size:14px; }.feature-grid,.pricing-grid { grid-template-columns:1fr; gap:16px; }.feature-card { padding:25px; border-radius:16px; }.feature-card h3 { font-size:27px; }.feature-index { font-size:8px; }.capture-options > div { padding:12px; gap:9px; font-size:11px; }.capture-options .tag { font-size:8px; }.balance-visual { margin-top:24px; }.how-section { padding-block:48px; }.steps { gap:22px; }.steps li { gap:18px; }.steps h3 { font-size:17px; }.pricing-grid { gap:34px; margin-top:34px; }.price-card { padding:28px; }.price-card .plan-description { min-height:0; }.price { font-size:42px; }.check-list { font-size:13px; }.pro-ribbon { font-size:7px; left:16px; right:16px; }.centered { text-align:left; }.centered .eyebrow { justify-content:flex-start; }.pricing-note { text-align:left; font-size:11px; }.faq-list summary { font-size:14px; }.final-card { padding:40px 20px; border-radius:18px; }.final-card .eyebrow { font-size:8px; }.final-card h2 { font-size:34px; letter-spacing:-1.2px; }.final-card p { font-size:14px; }.final-card .btn { width:100%; }.site-footer { display:grid; gap:10px; }.site-footer nav { gap:24px; }.final-section { padding-bottom:38px; }
}
@media (max-width:360px) {
    .hero-points { flex-wrap:wrap; justify-content:flex-start; gap:8px 14px; }.demo-overview { grid-template-columns:116px minmax(0,1fr); gap:14px; }.demo-ring { width:116px; height:116px; }.demo-ring strong { font-size:26px; }.demo-ring small { font-size:8px; }.demo-card { padding:14px; }.demo-meal .meal-icon { display:none; }.demo-entry-controls { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }*,*::before,*::after { transition:none !important; }
}