/* Pantry Ally one-page site, v2 (Oct 20): light, airy. Palette: design/brand/palette.md. Fonts self-hosted (OFL). */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/Fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito";src:url(/assets/fonts/Nunito.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--bg:#FBF6EC;--card:#FFFFFF;--ink:#25302A;--muted:#5E6B63;--line:#EADFCB;--green:#2F7A55;--greenDeep:#1F5C3F;--greenSoft:#E4F2E8;
  --butterSoft:#FDF0CF;--warn:#946010;--terraSoft:#FCE6DA;--terra:#B84A22;--grad:linear-gradient(#4BA878,#1F5C3F);--r:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#FFFFFF;color:var(--ink);font:400 17px/1.6 "Nunito",system-ui,sans-serif}
a{color:var(--green)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #F2B84B;outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:var(--card);padding:8px 12px;border-radius:12px;z-index:9}
header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.9);backdrop-filter:blur(8px)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand img.disc{width:36px;height:36px}.brand img.wm{height:22px;width:auto}
nav.top a{color:var(--muted);text-decoration:none;font-weight:700;margin-left:28px;font-size:15px}nav.top a:hover{color:var(--ink)}
.cta{display:inline-block;background:var(--grad);color:#fff;text-decoration:none;font-weight:800;border-radius:18px;padding:14px 24px;min-height:48px;border:0;font-size:16px;cursor:pointer}
nav.top a.cta{color:#fff;padding:10px 18px;min-height:40px;font-size:14px}
.ghost{color:var(--green);font-weight:800;text-decoration:none;margin-left:18px}
h1,h2{font-family:"Fraunces",Georgia,serif;font-weight:700;line-height:1.06;margin:0;letter-spacing:-.01em}h1{font-size:clamp(40px,5.6vw,64px)}h2{font-size:clamp(28px,3.6vw,40px)}
h1 em{font-style:normal;color:var(--green)}
/* HERO */
.hero{padding:72px 0 96px}.hero .wrap{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:center}
.kicker{font-weight:800;font-size:13px;letter-spacing:1.4px;color:var(--green);margin-bottom:18px}
.lede{color:var(--muted);font-size:19px;max-width:500px;margin:22px 0 32px}
.stage{position:relative;justify-self:center}
.stage::before{content:"";position:absolute;inset:40px -40px -10px -40px;border-radius:50%;background:radial-gradient(closest-side,var(--greenSoft),transparent);z-index:0}
.note{position:relative;text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
/* PHONE (pure HTML/CSS, stays sharp) */
.phone{position:relative;z-index:1;width:340px;border-radius:48px;background:#25302A;padding:11px;box-shadow:0 40px 80px rgba(37,48,42,.22),0 8px 20px rgba(37,48,42,.12)}
.screen{border-radius:38px;background:var(--bg);overflow:hidden;font-size:13px;line-height:1.35}
.sbar{display:flex;justify-content:space-between;padding:12px 22px 4px;font-weight:800;font-size:12px}
.app-h{display:flex;align-items:center;gap:10px;padding:8px 18px 10px}.app-h img{width:30px;height:30px}.app-h b{font-family:"Fraunces";font-size:20px}.app-h span{display:block;color:var(--muted);font-size:11px;font-weight:700}
.dash{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 16px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px}
.tile .lab{color:var(--muted);font-weight:700;font-size:11px}.tile .big{font-family:"Fraunces";font-weight:700;font-size:26px;line-height:1.1;margin-top:2px}
.tile .tiny{color:var(--muted);font-size:10.5px;margin-top:2px}
.money .big{color:var(--green)}.bars{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:8px}.bars i{flex:1;border-radius:3px;background:var(--greenSoft)}.bars i:last-child{background:var(--green)}
.waste{display:flex;flex-direction:column}.ring{--p:76;width:58px;height:58px;border-radius:50%;margin:6px auto 0;background:conic-gradient(#F2B84B calc(var(--p)*1%),var(--butterSoft) 0);display:grid;place-items:center}
.ring b{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:12px}
.exp{grid-column:1/-1;background:var(--butterSoft);border-color:#F2DFA8}.exp .row{display:flex;justify-content:space-between;align-items:baseline}
.chips{display:flex;gap:7px;margin-top:9px}.chip{flex:1;background:#fff;border-radius:14px;padding:6px 2px 7px;text-align:center}.chip img{width:40px;height:40px;display:block;margin:0 auto}
.chip b{display:block;font-size:10px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip span{font-size:9.5px;font-weight:800;color:var(--warn)}.chip span.c{color:#C73E33}
.today{grid-column:1/-1}.meter{margin-top:8px}.meter .t{display:flex;justify-content:space-between;font-size:11px;font-weight:700}.meter .t span{color:var(--muted)}
.track{height:8px;border-radius:99px;background:#F1EBDF;margin-top:4px;overflow:hidden}.track i{display:block;height:100%;border-radius:99px;background:var(--grad)}.track.p i{background:linear-gradient(90deg,#F08A5D,#B84A22)}
.tabs{display:flex;justify-content:space-around;border-top:1px solid var(--line);background:#fff;padding:9px 0 14px;font-size:10px;font-weight:700;color:var(--muted)}.tabs .on{color:var(--green)}
/* SECTIONS */
section{padding:88px 0}.sub{color:var(--muted);margin:14px 0 0;max-width:560px;font-size:18px}
.alt{background:var(--bg)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:20px}.feat h3{margin:0 0 8px;font-size:19px}.feat p{margin:0;color:var(--muted)}
.feat .n{font-family:"Fraunces";color:var(--green);font-size:15px;font-weight:700;margin-bottom:10px;display:block}
.plans{display:grid;grid-template-columns:1fr 1.15fr;gap:24px;align-items:start;margin-top:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.plan ul{list-style:none;padding:0;margin:16px 0 0}.plan li{padding-left:26px;position:relative;margin:8px 0}.plan li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.plan h3{margin:0;font-size:20px}.price{font-family:"Fraunces",serif;font-size:36px;font-weight:700}.price small{font:700 14px "Nunito";color:var(--muted)}
.premium{border:2px solid var(--green);position:relative}
.badge{position:absolute;top:-13px;right:18px;background:var(--butterSoft);color:var(--warn);border:1px solid var(--warn);font-weight:900;font-size:12px;letter-spacing:.8px;border-radius:999px;padding:5px 11px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.opt{border:1px solid var(--line);border-radius:18px;padding:12px 14px}.opt.best{border:2px solid var(--green);background:var(--greenSoft)}
.opt b{display:block;font-size:20px}.opt s{color:var(--muted)}.opt span{color:var(--muted);font-size:14px}.opt em{font-style:normal;font-weight:800;font-size:12px;color:var(--green);letter-spacing:.5px}
.fine{color:var(--muted);font-size:14px;margin-top:14px}
.signup{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
form .row{display:flex;gap:10px;flex-wrap:wrap}label{font-weight:700}
input[type=email]{flex:1;min-width:220px;min-height:48px;border-radius:16px;border:1px solid #CFC3AC;background:#fff;color:var(--ink);padding:0 14px;font:inherit}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-weight:400;color:var(--muted);font-size:15px}.consent input{width:22px;height:22px;margin-top:2px;accent-color:#2F7A55}
.msg{min-height:24px;margin-top:10px;color:var(--warn);font-weight:700}
footer{padding:36px 0 48px;color:var(--muted);font-size:15px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}footer .brand img.disc{width:24px;height:24px}
footer nav a{color:var(--muted);margin:0 18px 0 0}
@media (max-width:900px){.hero .wrap,.plans,.signup{grid-template-columns:1fr}.feat{grid-template-columns:1fr;gap:28px}nav.top a:not(.cta){display:none}
  .hero{padding:32px 0 64px}.hero .wrap{gap:48px}.stage{justify-self:center}section{padding:64px 0}}
@media (max-width:380px){.phone{width:300px}}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.feat .sage{grid-column:1/-1;display:flex;gap:28px;align-items:center;padding:40px;background:linear-gradient(135deg,#FFFFFF,var(--greenSoft));border-color:#CDE6D6}
.feat .sage img{width:96px;height:96px;flex:none}.feat .sage h3{font-family:"Fraunces",serif;font-size:clamp(24px,3vw,32px);line-height:1.15}.feat .sage p{font-size:18px;max-width:660px;margin-top:8px}
.soon{display:inline-block;font:800 11px/1 "Nunito";letter-spacing:.4px;color:var(--warn);background:var(--butterSoft);border:1px solid #E9CF8A;border-radius:99px;padding:3px 7px;font-style:normal;vertical-align:1px}
.meter .soon{font-size:8.5px;padding:2px 5px;margin-left:4px}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}.was{font:700 16px "Nunito";color:var(--muted)}.intro{font:800 20px "Nunito";color:var(--green)}
.then{margin:2px 0 12px;color:var(--muted);font-size:14px}.plan p{margin-top:10px}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat .sage{flex-direction:column;align-items:flex-start;padding:28px}.feat .sage img{width:72px;height:72px}}
.basic{position:relative}
.intro small{font-size:15px;color:var(--green)}

/* Jordan: keep "Soon" on the nutrition line only */
.feat .nutri{display:block;margin-top:8px}

/* Sage card animation (inline SVG). Spec: design/sage-smile/spec.md */
.sage-anim{width:112px;height:112px;flex:none}
.sage-anim .sway,.sage-anim .squash{transform-box:view-box;transform-origin:32px 45.7px}
.sage-anim .sway{animation:sgSway 4s ease-in-out infinite}
@keyframes sgSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.sage-anim .spark{transform-box:fill-box;transform-origin:center;animation:sgSpark 3s ease-in-out infinite}
@keyframes sgSpark{0%,100%{transform:scale(1.6)}50%{transform:scale(1.728)}}
.sage-anim .sm-rest,.sage-anim .sm-peak{transition:opacity .6s cubic-bezier(.45,0,.55,1)}
.sage-anim .sm-peak,.sage-anim .sm-soft{opacity:0}
.sage-anim.smile .sm-rest{opacity:0}.sage-anim.smile .sm-peak{opacity:1}
.sage-anim .squash{transition:transform 90ms ease-in-out}.sage-anim.blink .squash{transform:scaleX(1.05) scaleY(.78)}
.fic{width:56px;height:56px;display:block;margin-bottom:10px}
@media (max-width:900px){.sage-anim{width:88px;height:88px}}
@media (prefers-reduced-motion:reduce){.sage-anim .sway,.sage-anim .spark{animation:none}.sage-anim .sm-rest,.sage-anim .sm-peak{opacity:0!important}.sage-anim .sm-soft{opacity:1}}

/* ===== DARK THEME (Oct 20, 1:13 PM CT, Sumit): palette.md / plan-card dark tokens. Overrides the light rules above. ===== */
:root{--bg:#182720;--card:#1E2D25;--ink:#F2EDE0;--muted:#A9B8AE;--line:#2D3F35;--green:#6FCB98;--greenDeep:#23382C;--greenSoft:#23382C;
  --butterSoft:#3A3220;--warn:#F2B84B;--terraSoft:#3A2A22;--terra:#F08A5D;color-scheme:dark}
body{background:#14201A}
header{background:rgba(20,32,26,.9)}
.cta,nav.top a.cta{background:#6FCB98;color:#0F2A1D}.cta:hover{background:#8ADBAE}
.stage::before{background:radial-gradient(closest-side,rgba(111,203,152,.16),transparent)}
.phone{background:#0B1410;box-shadow:0 0 0 1px #2D3F35,0 40px 80px rgba(0,0,0,.5)}
.screen{background:#14201A}
.ring b,.chip,.tabs{background:#1E2D25}.chip{background:#263A2F}
.exp{border-color:#5A4A26}.chip span{color:#F2B84B}.chip span.c{color:#F08A5D}
.bars i{background:#2D3F35}.bars i:last-child{background:#6FCB98}
.track{background:#2D3F35}.track i{background:linear-gradient(90deg,#4BA878,#6FCB98)}
.feat .sage{background:linear-gradient(135deg,#1E2D25,#23382C);border-color:#2D3F35}
.soon{background:#3A3220;border-color:#5A4A26;color:#F2B84B}
input[type=email]{background:#1E2D25;border-color:#4A5F53;color:var(--ink)}
.badge{background:#3A3220;border-color:#F2B84B;color:#F2B84B}
.opt.best{background:#23382C}
a:focus-visible,button:focus-visible,input:focus-visible{outline-color:#F2B84B}

/* ===== ORIGINAL PALETTE (Oct 20, Sumit): colours reverted to the first site, commit 045ff9b. Colour-only; overrides the dark block above. =====
   Only deviation: CTA gradient top #4BA878 -> #2F7A55 so white button text passes 4.5:1 (white on #4BA878 = 2.93:1). */
:root{--bg:#14201A;--terraSoft:#3B2A22}
body{background:#14201A}
header{background:rgba(20,32,26,.92);border-bottom:1px solid #2D3F35}
.hero{background:radial-gradient(900px 500px at 85% 10%,#23382C,transparent 70%)}
.cta,nav.top a.cta{background:linear-gradient(#2F7A55,#1F5C3F);color:#fff}.cta:hover{background:linear-gradient(#2F7A55,#1A4E35)}
.consent input{accent-color:#4BA878}

/* ===== HERO PHONE: app LIGHT theme (design/theme-tokens.json light), neutral charcoal frame. Scoped to .phone only. ===== */
.phone{--bg:#FBF6EC;--card:#FFFFFF;--ink:#25302A;--muted:#5E6B63;--line:#EADFCB;--green:#2F7A55;--greenSoft:#E4F2E8;--butterSoft:#FDF0CF;--warn:#946010;--terraSoft:#FCE6DA;--terra:#B84A22;
  color-scheme:light;color:var(--ink);background:#2B2B2E;box-shadow:0 0 0 1px #3A3A3E,0 40px 80px rgba(0,0,0,.5)}
.phone .screen{background:#FBF6EC;color:#25302A}
.phone .tile{background:#FFFFFF;border-color:#EADFCB}
.phone .ring b,.phone .chip,.phone .tabs{background:#FFFFFF}
.phone .exp{background:#FDF0CF;border-color:#F2DFA8}.phone .chip span{color:#946010}.phone .chip span.c{color:#C73E33}
.phone .bars i{background:#E4F2E8}.phone .bars i:last-child{background:#2F7A55}
.phone .ring{background:conic-gradient(#F2B84B calc(var(--p)*1%),#FDF0CF 0)}
.phone .track{background:#F1EBDF}.phone .track i{background:linear-gradient(#4BA878,#1F5C3F)}.phone .track.p i{background:linear-gradient(90deg,#F08A5D,#B84A22)}
.phone .soon{background:#FDF0CF;border-color:#E9CF8A;color:#946010}
.phone .tabs{border-color:#EADFCB;color:#5E6B63}.phone .tabs .on{color:#2F7A55}

/* ===== LIFT PASS removed (Oct 20, Sumit): dark sections back to original deep green (c0de7a7/2d51a2b). ===== */

/* ===== DEEP GREEN + CREAM BOXES (Oct 20, Sumit): every section #14201A; all cards/boxes cream #FBF6EC with dark-on-light tokens. Phone screen scoped separately above. ===== */
body,.alt,.hero{background-color:#14201A}
.alt{background:#14201A}
header{background:rgba(20,32,26,.92);border-bottom:1px solid #2D3F35}
footer{border-top:1px solid #2D3F35}
.card,.signup{--card:#FBF6EC;--ink:#25302A;--muted:#5E6B63;--line:#E6DCC8;--green:#1F5C3F;--greenSoft:#E4F2E8;--butterSoft:#FDF0CF;--warn:#8A5A0E;--terra:#B84A22;
  color-scheme:light;background:#FBF6EC;color:#25302A;border:1px solid #E6DCC8;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.signup{border-radius:var(--r);padding:32px}
.card h3,.card p,.card li,.signup h2,.signup p,.signup label{color:#25302A}
.card p,.signup .sub,.signup .consent,.signup p.sub{color:#5E6B63}
.feat .sage{background:linear-gradient(135deg,#FBF6EC,#E4F2E8);border-color:#CDE6D6}
.feat .n,.card .n{color:#1F5C3F}
.card a,.signup a{color:#1F5C3F}
.premium{border:2px solid #2F7A55}
.opt{background:#FFFFFF;border-color:#E6DCC8}.opt.best{background:#E4F2E8;border-color:#2F7A55}
.card .soon,.card .badge,.signup .soon{background:#FDF0CF;border-color:#C9A24E;color:#8A5A0E}
.signup input[type=email]{background:#FFFFFF;border-color:#8C9A90;color:#25302A}
.signup input::placeholder{color:#6B776F}
.signup .consent input{accent-color:#2F7A55}

/* ===== SITE-MOTION (branch site-motion): hero canvas sits behind content; never under cream boxes. ===== */
.hero{position:relative;overflow:hidden}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.hero-fx{opacity:.6}}