:root{--green-900:#0b3d2e;--green-700:#14684c;--green-600:#178a5e;--green-500:#1fa971;--green-100:#e3f5ec;--blue-700:#0b4f8a;--blue-600:#1268b3;--blue-100:#e5f0fa;--amber-500:#d97706;--ink:#12211b;--ink-soft:#40544a;--ink-faint:#6b7f74;--paper:#fff;--paper-tint:#f4faf7;--line:#dcebe3;
/* aliases used by existing PlainAgri rules, mapped to the Nutrisize Health palette */
--bg:var(--paper);--bg2:var(--paper-tint);--card:#fff;--muted:var(--ink-soft);--green:var(--green-700);--green2:var(--green-600);--amber:var(--amber-500);--soil:var(--green-900);--on-green:#fff;--shadow:0 4px 24px rgba(11,61,46,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px;scroll-padding-bottom:54px}
body{margin:0;font:16px/1.65 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}a{color:var(--blue-600);text-decoration:none}a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px;top:0;background:var(--green);color:var(--on-green);padding:.6rem 1rem;z-index:99}.skip:focus{left:8px;top:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1080px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:28px}
.nav-logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--green-900);white-space:nowrap;flex-shrink:0;text-decoration:none}
.nav-logo:hover{text-decoration:none}.nav-logo img{width:34px;height:34px;border-radius:8px}
.nav-links{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;align-items:center}
.nav-links a{color:var(--ink-soft);font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--green-700);text-decoration:none}
.mobile-menu-btn{display:none;margin-left:auto;background:none;border:none;font-size:24px;color:var(--green-900);cursor:pointer}
h1,h2,h3{line-height:1.15;margin:0 0 .5em}h1{font-size:clamp(34px,5.5vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.12;color:var(--green-900)}
h2{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.02em;color:var(--green-900)}h3{font-size:18px;font-weight:700;color:var(--green-900)}
p{margin:0 0 1em}.lead{font-size:17px;color:var(--ink-soft);max-width:44rem}
section{padding:72px 0}section.alt{background:var(--paper-tint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero{text-align:center;padding:88px 0 72px;background:radial-gradient(1000px 500px at 85% -10%,var(--blue-100) 0%,transparent 60%),radial-gradient(900px 500px at 10% 110%,var(--green-100) 0%,transparent 60%),var(--paper-tint)}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-600);background:var(--green-100);border-radius:999px;padding:4px 14px;margin-bottom:14px}
.btn{display:inline-block;margin:0 .5rem .6rem 0;padding:12px 20px;border-radius:10px;font-weight:700;text-decoration:none;border:2px solid var(--green-600);background:var(--green-600);color:#fff}
.btn:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;text-decoration:none}.btn.ghost{background:transparent;color:var(--green-700)}.btn.ghost:hover{background:var(--green-100);color:var(--green-700)}
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.badge{border:2px dashed var(--line);border-radius:12px;padding:10px 16px;color:var(--muted);font-size:.9rem;background:var(--card)}.badge b{display:block;color:var(--ink)}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:var(--shadow)}.card p{font-size:15px;color:var(--ink-soft)}
.card .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green-100);color:var(--green-700);font-weight:800;margin-bottom:10px}
.ladder{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.ladder li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.ladder .rung{width:calc(18px + var(--w,0)*1%);min-width:18px;max-width:90px;height:14px;border-radius:8px;background:linear-gradient(90deg,var(--green),var(--amber))}
.ladder b{display:block}.ladder span{color:var(--muted);font-size:.95rem}
.pill{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);color:var(--soil)}
.cite{font:inherit;font-size:.78em;vertical-align:super;border:1px solid var(--green);color:var(--green);background:transparent;border-radius:6px;padding:0 6px;cursor:pointer}
.cite:hover{background:var(--green);color:var(--on-green)}
.est{font-size:.85rem;color:var(--muted);border-left:3px solid var(--amber);padding-left:10px}
.note{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--amber);border-radius:10px;padding:14px 16px;margin:16px 0}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:12px;overflow:hidden}th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{background:var(--bg2)}
.zones{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.zones button{font:inherit;padding:8px 14px;border-radius:99px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.zones button[aria-pressed=true]{background:var(--green);color:var(--on-green);border-color:var(--green)}
.zone-out{min-height:200px}
.locked{position:relative;opacity:.9}.locked::after{content:"Full detail in the app";position:absolute;right:12px;top:12px;font-size:.75rem;font-weight:700;color:var(--soil);background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.price{font-size:2.2rem;font-weight:800}.price small{font-size:1rem;color:var(--muted);font-weight:500}
ul.tick{list-style:none;padding:0}ul.tick li{padding-left:26px;position:relative;margin:.4em 0}ul.tick li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
footer{background:var(--green-900);color:#cfe6db;padding:44px 0 36px;font-size:14px}footer a{color:#eaf7f0;font-weight:500}footer .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}footer small{opacity:.85}
/* citation sheet */
.sheet-back{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:70}.sheet-back.open{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;height:80vh;height:80dvh;background:var(--card);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.35);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s ease;z-index:71}
.sheet.open{transform:none}
.sheet-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.sheet-bar button{font:inherit;border:1px solid var(--line);background:var(--bg2);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer}.sheet-bar button:disabled{opacity:.4;cursor:default}
.sheet-title{flex:1;min-width:0;text-align:center;font-size:.85rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-body{flex:1;overflow:auto;padding:20px 18px 40px;max-width:760px;width:100%;margin:0 auto}
.sheet-grab{width:44px;height:5px;border-radius:3px;background:var(--line);margin:8px auto 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.shots{display:flex;gap:20px;overflow-x:auto;padding:8px 2px 18px;scroll-snap-type:x mandatory}
.shots figure{margin:0;flex:0 0 auto;width:min(230px,62vw);scroll-snap-align:start;text-align:center}
.shots figcaption{margin-top:10px;font-size:.9rem;color:var(--muted)}
.phone{border:6px solid #10241c;border-radius:30px;overflow:hidden;background:#10241c;box-shadow:var(--shadow);aspect-ratio:1320/2868}
.phone.android{aspect-ratio:1080/1920;border-radius:22px}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media(min-width:900px){.shots{overflow:visible;justify-content:center;flex-wrap:wrap}}

/* ---------- Demos ---------- */
.fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:14px 0}
.field label{display:block;font-weight:600;font-size:14px;color:var(--green-900);margin-bottom:4px}
.field input{width:100%;font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus,.btn:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--blue-600);outline-offset:2px}
.field small{display:block;color:var(--ink-faint);font-size:12.5px;margin-top:3px}
.out{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;min-width:170px;flex:1}
.stat .num{font-size:24px;font-weight:800;color:var(--green-700);letter-spacing:-.02em}.stat .label{font-size:13px;color:var(--ink-faint);font-weight:500}
.opts{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin:12px 0}
.zones button[role=tab][aria-selected=true]{background:var(--green-700);color:#fff;border-color:var(--green-700)}
.zbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.zbar button{font:inherit;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--green-900);border-radius:10px;padding:8px 16px;cursor:pointer;min-width:44px}
.zbar button:disabled{opacity:.4;cursor:default}.zbar .zpct{min-width:72px}
.zframe{border:6px solid #10241c;border-radius:26px;background:var(--paper-tint);max-width:360px;overflow:hidden;box-shadow:0 12px 34px rgba(11,61,46,.25)}
.zframe{font-size:15px;line-height:1.5}.zview{height:420px;overflow:auto;padding:16px}
.zview h3{font-size:1.35em;margin:0 0 .4em}.zview p{font-size:1em;color:var(--ink-soft);margin:0 0 .8em}
.ztabs{display:flex;border-top:1px solid var(--line);background:#fff}.zview.wide~.ztabs{flex-wrap:wrap}
.ztabs span{flex:1;text-align:center;padding:8px 4px;color:var(--green-700);font-weight:600;white-space:nowrap}
.zshots{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px}
.feat{display:grid;gap:28px;grid-template-columns:1fr 280px;align-items:center;margin:0 0 56px}
.feat.rev{grid-template-columns:280px 1fr}.feat.rev .feat-img{order:-1}
.feat-img{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.feat-img .phone{width:min(240px,70vw)}
.feat h2{margin-top:0}.tag{display:inline-block;font-size:12px;font-weight:700;padding:2px 10px;border-radius:99px;margin:0 6px 6px 0;background:var(--blue-100);color:var(--blue-700)}.tag.pro{background:var(--green-100);color:var(--green-700)}
@media (max-width:760px){.feat,.feat.rev{grid-template-columns:1fr}.feat.rev .feat-img{order:0}}
.feat>*{min-width:0}.feat-img .phone{max-width:100%;flex:0 1 auto}.zframe{max-width:min(360px,100%)}
@media (max-width:1180px){.nav-inner{gap:16px}.nav-links{gap:14px}}
@media (max-width:1040px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;padding:16px 24px;gap:14px;align-items:flex-start}.nav-links.show{display:flex;max-height:calc(100vh - 120px);overflow-y:auto}.mobile-menu-btn{display:block}}
.feat{grid-template-columns:1fr auto}.feat.rev{grid-template-columns:auto 1fr}
.feat-img{flex-wrap:nowrap;align-items:flex-start}.feat-img .phone{width:clamp(130px,17vw,210px)}
@media (max-width:760px){.feat,.feat.rev{grid-template-columns:1fr}.feat-img{flex-wrap:wrap}.feat-img .phone{width:min(42vw,200px)}}

/* Match nutrisize.health: centred hero copy */
.hero .lead{margin:22px auto 0;max-width:760px;font-size:17px;color:var(--ink-soft)}
.hero .badges,.hero .btns{justify-content:center}
.hero h1{margin-bottom:.35em}
/* Fixed bottom dock (as nutrisize.health): footer stays visible; More/Less expands the full footer upward */
footer{background:var(--green-900);color:#cfe6db;font-size:14px;padding:0}
body{padding-bottom:46px}
footer{position:fixed;left:0;right:0;bottom:0;z-index:60;box-shadow:0 -2px 12px rgba(0,0,0,.12)}
.footer-dock summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;max-width:1080px;margin:0 auto;padding:0 24px;min-height:46px;font-size:13px}
.footer-dock summary::-webkit-details-marker{display:none}
.dock-links{display:flex;gap:18px;flex-wrap:wrap}.dock-links a{color:#eaf7f0;font-weight:600;text-decoration:none}
.dock-copy{opacity:.7;margin-left:auto}
.dock-more{color:#bdf0d8;font-weight:600;white-space:nowrap;font-size:0}
.dock-more::before,.dock-more::after{font-size:13px}.dock-more::before{content:"More"}.dock-more::after{content:" \25B4"}
.footer-dock[open] .dock-more::before{content:"Less"}.footer-dock[open] .dock-more::after{content:" \25BE"}
.footer-inner{max-width:1080px;margin:0 auto;padding:0 24px;text-align:center}
.footer-dock .footer-inner{max-height:65vh;overflow-y:auto;padding-top:22px;padding-bottom:22px;border-top:1px solid rgba(255,255,255,.12)}
.footer-links{list-style:none;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:0 0 18px;padding:0}.footer-links a{color:#eaf7f0;font-weight:500;text-decoration:none}
.footer-copy{opacity:.75;line-height:1.9;font-size:13px;margin:0}
@media (max-width:640px){.dock-copy{display:none}.dock-more{margin-left:auto}.footer-dock summary{padding:0 16px;gap:14px}.dock-links{gap:14px;flex-wrap:nowrap}}
/* Centred hero: the note paragraph is centred text, so it must not carry the left rule used for in-page notes */
.hero .est{border-left:0;padding-left:0;max-width:760px;margin:16px auto 0;text-align:center}