/* Use It Fresh website — the app's own palette and type. */
:root {
  --ground:#F7F6EF; --surface:#FFFEF9; --sunk:#EEF1E7; --line:#DCE3D2; --line-soft:#E8ECE0;
  --ink:#1F2A22; --ink-mid:#3F4C42; --ink-soft:#5B685E; --ink-faint:#86927F;
  --forest:#07533A; --forest-top:#176C50; --forest-wash:#E3EDDD;
  --gold:#B7791F; --gold-wash:#F8EDD5;
  --on-forest:#FFFEF9; --btn-edge:#033C29;
  --shadow:0 1px 0 #D6DFCC, 0 10px 24px rgba(31,42,34,.08);
  --f-display:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:"Nunito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* Always the app's green and cream, whatever the device's dark mode
   (owner, 17 Sep). The fridge entrance keeps its own dark stage. */
:root { color-scheme:light; --sage:#E6EDDF; --leaf:#83BD43; }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink);
       background:linear-gradient(180deg, #D9E7CF 0, #E8EFDF 380px, var(--ground) 900px) no-repeat, var(--ground); font-family:var(--f-body);
       font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:var(--forest); }
a:focus-visible, button:focus-visible { outline:3px solid var(--forest); outline-offset:2px; border-radius:4px; }

.wrap { max-width:1060px; margin:0 auto; padding:0 22px; }
.narrow { max-width:760px; }

/* header */
.top { position:sticky; top:0; z-index:5; background:color-mix(in srgb, #DCE8D3 86%, transparent);
       backdrop-filter:blur(8px); border-bottom:1px solid #CFDDC4; }
.top .wrap { display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding-top:12px; padding-bottom:12px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-weight:800; font-size:18px; white-space:nowrap; flex:0 0 auto; }
.brand img { width:30px; height:30px; }
.nav { display:flex; gap:6px; flex-wrap:wrap; }
.nav a { text-decoration:none; color:var(--ink-soft); font-family:var(--f-display); font-weight:600; font-size:15px;
         padding:8px 12px; border-radius:999px; }
.nav a:hover, .nav a[aria-current="page"] { background:var(--forest-wash); color:var(--forest); }

/* hero */
.hero { padding:64px 0 40px; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
h1 { color:var(--forest); font-family:var(--f-display); font-weight:800; font-size:clamp(34px,5.2vw,52px); line-height:1.04;
     letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
.lede { font-size:19px; color:var(--ink-soft); margin:0 0 22px; max-width:52ch; }
.lede.tight { margin-bottom:12px; }
.subhead { font-size:21px; font-weight:700; color:var(--ink); margin:10px 0 18px; }
.tagline { font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.14em;
           text-transform:uppercase; color:var(--forest); margin:0 0 14px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn { display:inline-flex; align-items:center; gap:9px; text-decoration:none; font-family:var(--f-display);
       font-weight:700; font-size:16px; padding:14px 22px; border-radius:16px; border:1px solid var(--forest);
       background:linear-gradient(var(--forest-top), var(--forest)); color:var(--on-forest);
       box-shadow:0 3px 0 var(--btn-edge); }
.btn.ghost { background:var(--surface); color:var(--forest); border-color:var(--line); box-shadow:0 2px 0 var(--line); }
.note { font-size:14px; color:var(--ink-faint); }

.collage { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.collage img { border-radius:16px; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow); }
.collage img:nth-child(1) { grid-column:span 2; aspect-ratio:2/1; }

/* sections */
section { padding:52px 0; border-top:1px solid var(--line-soft); }
section:first-of-type { border-top:none; }
h2 { font-family:var(--f-display); font-weight:800; font-size:clamp(24px,3vw,31px); letter-spacing:-.02em;
     margin:0 0 10px; text-wrap:balance; }
h3 { font-family:var(--f-display); font-weight:700; font-size:19px; margin:26px 0 6px; }
.sub { color:var(--ink-soft); max-width:62ch; margin:0 0 26px; }

/* The two habits (owner, 24 Sep): a stock take once, then receipts. */
.steps { list-style:none; margin:0; padding:0; display:grid; gap:12px;
         grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.step { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
        background:var(--surface); border:1px solid var(--line); border-radius:18px;
        padding:20px; box-shadow:var(--shadow); }
.step .num { width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
             background:var(--forest); color:var(--on-forest); font-family:var(--f-display);
             font-size:20px; font-weight:700; line-height:1; }
.step b { display:block; font-family:var(--f-display); font-size:17px; margin-bottom:4px; }
.step p { margin:0; color:var(--ink-soft); font-size:15px; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.card .ico { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--sage);
             color:var(--forest); font-size:21px; margin-bottom:12px; }
.card b { display:block; font-family:var(--f-display); font-size:17px; margin-bottom:4px; }
.card p { margin:0; color:var(--ink-soft); font-size:15px; }

/* photo cards: our own food photographs with an icon (owner, 17 Sep) */
.photo-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.photo-card { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px;
              overflow:hidden; box-shadow:var(--shadow); padding:0 18px 20px; }
.photo-card-img { margin:0 -18px; aspect-ratio:16/10; overflow:hidden; background:var(--sage); }
.photo-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.photo-card:hover .photo-card-img img { transform:scale(1.04); }
.photo-card-ico { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; margin:-26px 0 10px;
                  position:relative; color:#FFFEF9; background:linear-gradient(var(--forest-top), var(--forest));
                  box-shadow:0 3px 0 var(--btn-edge), 0 6px 14px rgba(7,83,58,.25); border:2px solid var(--surface); }
.photo-card b { display:block; font-family:var(--f-display); font-size:17.5px; margin-bottom:4px; color:var(--ink); }
.photo-card p { margin:0; color:var(--ink-soft); font-size:15px; }
@media (prefers-reduced-motion: reduce) { .photo-card-img img { transition:none; } }

/* the app's own line icons: Material Symbols, outlined (owner, 17 Sep) */
.ms { font-family:"Material Symbols Outlined"; font-weight:400; font-style:normal; font-size:24px; line-height:1;
      letter-spacing:normal; text-transform:none; white-space:nowrap; direction:ltr; display:inline-block;
      -webkit-font-smoothing:antialiased; font-variation-settings:"FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.card .ico .ms { font-size:24px; }
.photo-card-ico .ms { font-size:24px; }
.spark .ms { font-size:22px; vertical-align:-4px; }

/* plans */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; align-items:start; }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow); }
.plan.plus { border:2px solid var(--forest); background:linear-gradient(180deg, #F1F6EC, var(--surface) 60%); }
.plan h3 { margin:0 0 4px; font-size:22px; }
.plan .price { font-family:var(--f-display); font-weight:800; font-size:17px; color:var(--forest); margin-bottom:14px; }
.plan.plus .price { font-size:22px; margin-bottom:4px; }
.price-or { font-size:15px; font-weight:600; color:var(--ink-soft); margin:0 4px; }
.price-note { margin:0 0 14px; font-size:14.5px; color:var(--ink-soft); }
.plan ul { list-style:none; margin:0; padding:0; }
.plan li { display:flex; gap:10px; padding:7px 0; font-size:15.5px; color:var(--ink-mid); }
.plan li::before { content:"✓"; color:var(--forest); font-weight:800; }
.tag { display:inline-block; font-family:var(--f-mono); font-size:10.5px; font-weight:600; letter-spacing:.06em;
       padding:3px 9px; border-radius:999px; background:var(--gold-wash); color:var(--gold); margin-left:8px; }

/* learns your taste */
.learn { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.points { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.points li { color:var(--ink-soft); font-size:15.5px; padding-left:18px; border-left:3px solid var(--forest-wash); }
.points b { display:block; color:var(--ink); font-family:var(--f-display); font-size:16.5px; margin-bottom:2px; }
.learned { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.learned-head { display:flex; align-items:center; gap:10px; }
.learned-head b { font-family:var(--f-display); font-size:20px; flex:1; }
.learned-head .tag { margin-left:0; }
.spark { color:var(--forest); font-size:20px; }
.learned-sub { color:var(--ink-soft); font-size:14px; margin:4px 0 14px; }
.learned ul { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:8px; }
.learned li { display:flex; align-items:center; gap:10px; background:var(--ground); border:1px solid var(--line-soft);
              border-radius:14px; padding:10px 12px; font-weight:700; font-size:15px; color:var(--ink); }
.lean { width:24px; text-align:center; font-weight:800; }
.lean.yes { color:var(--forest); }
.lean.no { color:var(--ink-faint); }
.learned .x { margin-left:auto; color:var(--ink-faint); font-size:13px; }

/* prose (policy pages) */
.prose { max-width:760px; }
.prose p, .prose li { color:var(--ink-mid); }
.prose h2 { font-size:24px; margin-top:38px; }
.prose h3 { font-size:18px; }
.prose ul { padding-left:20px; }
.prose li { margin:7px 0; }
.updated { font-family:var(--f-mono); font-size:12px; color:var(--ink-faint); }
.callout { background:var(--forest-wash); border-radius:14px; padding:16px 18px; margin:22px 0; color:var(--ink-mid); }
.callout b { color:var(--ink); }
table { width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
th { font-family:var(--f-mono); font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.t-scroll { overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.t-scroll table { min-width:560px; margin:0; }

/* faq */
details { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
details[open] { box-shadow:var(--shadow); }
summary { cursor:pointer; font-family:var(--f-display); font-weight:700; font-size:16.5px; }
details p { margin:10px 0 2px; color:var(--ink-soft); }

footer { margin-top:40px; padding:30px 0 60px; font-size:14px; color:#CFE3D2;
         background:linear-gradient(180deg, var(--forest-top), var(--forest)); }
footer .wrap { display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between; align-items:center; }
footer a { color:#FFFEF9; text-decoration:none; margin-right:16px; font-weight:700; }
footer a:hover { color:var(--leaf); }
footer .social { display:flex; gap:6px; }
footer .social a { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; border-radius:50%; }
footer .social a:hover { background:rgba(255,255,255,.08); }
footer .social a:focus-visible { outline:2px solid var(--leaf); outline-offset:2px; }

@media (max-width:860px) {
  .hero { grid-template-columns:1fr; gap:28px; padding-top:40px; }
  .learn { grid-template-columns:1fr; gap:24px; }
  .nav a { padding:7px 10px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }

/* ---- entrance: the fridge (owner, 17 Sep) ---------------------------------
   The same fridge as the app's sign-in, full height: the handle glints until
   someone taps, the door opens, and the page fades in behind it. */
html.entering, html.entering body { overflow:hidden; }
html.entered .entrance { display:none; }
.entrance { position:fixed; inset:0; z-index:50; background:#07100F; display:grid; place-items:center;
            transition:opacity .65s ease; }
.entrance.leaving { opacity:0; pointer-events:none; }
.fridge { all:unset; cursor:pointer; display:block; height:min(100svh, 100vh); aspect-ratio:1290/2292;
          max-width:100vw; position:relative; }
.fridge:focus-visible { outline:3px solid #8FD1AE; outline-offset:-6px; border-radius:18px; }
.fridge-frame { position:absolute; inset:0; display:block; transform:translateX(2.5%); }
.fridge video { width:100%; height:100%; object-fit:contain; display:block; background:#07100F; }
@media (max-aspect-ratio: 1290/2292) { .fridge { height:auto; width:100vw; } }

.glint { position:absolute; pointer-events:none; overflow:hidden; mix-blend-mode:screen; }
.glint::after { content:""; position:absolute; left:-60%; right:-60%; }
/* the handle: a bright band runs down it, rests, and runs again */
.glint-handle { left:17.2%; top:32.5%; width:3.4%; height:25.3%; border-radius:999px; }
.glint-handle::after { top:-40%; height:34%;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.08) 70%, transparent);
  animation:handle-glint 2.5s cubic-bezier(.45,.05,.3,1) 1.2s infinite; transform:translateY(-120%); }
@keyframes handle-glint {
  0% { transform:translateY(-120%); opacity:0; }
  8% { opacity:1; }
  34% { transform:translateY(330%); opacity:1; }
  42%, 100% { transform:translateY(330%); opacity:0; }
}
/* the door: one soft sheen across it, once, a moment after the page opens */
.glint-door { left:13.4%; top:10.6%; width:63.3%; height:74.4%; border-radius:1.5%; }
.glint-door::after { top:-30%; bottom:-30%; left:-40%; width:30%; right:auto;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.10) 45%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.10) 55%, transparent);
  transform:translateX(-120%) skewX(-12deg); animation:door-sheen 1.6s ease-in-out .5s 1 both; }
@keyframes door-sheen { 85% { opacity:1; } to { transform:translateX(760%) skewX(-12deg); opacity:0; } }
.entrance.opening .glint { opacity:0; transition:opacity .15s; }

.entrance-hint { position:absolute; left:0; right:0; bottom:max(22px, 3vh); margin:0; text-align:center;
                 font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.02em;
                 color:#CFE3D2; opacity:.85; animation:hint-in .8s ease 1.6s both; }
@keyframes hint-in { from { opacity:0; transform:translateY(6px); } to { opacity:.85; transform:none; } }
.entrance.opening .entrance-hint { animation:none; opacity:0; transition:opacity .2s; }
.entrance-skip { position:absolute; top:max(14px, 2vh); right:max(14px, 2vw); z-index:2;
                 font-family:var(--f-display); font-weight:700; font-size:14px; color:#CFE3D2;
                 background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
                 border-radius:999px; padding:9px 16px; cursor:pointer; }
.entrance-skip:hover { background:rgba(255,255,255,.16); }
@media (prefers-reduced-motion: reduce) {
  .glint { display:none; }
  .entrance-hint { animation:none; }
  .entrance { transition:none; }
}

/* Help pictures: a screen beside the words, so the page is not a wall of
   text. Drawn ones are SVG and sit wide; a real phone screenshot is tall, so
   it is kept to the height of a phone held beside the text (23 Sep). */
.shot { margin:22px 0 26px; }
.shot img { width:100%; max-width:560px; border-radius:18px;
            border:1px solid var(--line); background:var(--surface);
            box-shadow:var(--shadow); }
.shot.phone img { width:auto; max-width:100%; max-height:520px;
                  border-radius:26px; display:block; }
.shot figcaption { margin-top:10px; max-width:560px; font-size:14px;
                   color:var(--ink-soft); }
@media (min-width:900px) {
  .shot { display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:18px;
          align-items:center; }
  .shot figcaption { margin-top:0; }
}

/* ---- 14 Oct: store buttons, scanning phone, three steps, food waste ---- */
.stores { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.store { display:inline-flex; align-items:center; gap:10px; background:#111; color:#fff; text-decoration:none;
         border-radius:13px; padding:9px 18px 9px 14px; font-family:var(--f-display); font-weight:700; font-size:19px; line-height:1.05;
         border:1px solid #000; box-shadow:0 3px 0 #000; }
.store svg { width:26px; height:26px; flex:0 0 auto; }
.store small { display:block; font-size:11px; font-weight:600; opacity:.8; letter-spacing:.02em; }
.store:hover { background:#222; }

.phone { position:relative; width:min(270px,72vw); aspect-ratio:9/19; border-radius:42px; background:#151815; padding:10px;
         box-shadow:0 30px 60px rgba(7,83,58,.22), inset 0 0 0 2px #2b302b; margin:0 auto; max-width:100%; }
.phone > img, .phone .screen { width:100%; height:100%; border-radius:33px; display:block; object-fit:cover; object-position:top; }
.hero-art { display:flex; justify-content:center; }
.scanphone .screen { background:var(--ground); overflow:hidden; display:flex; flex-direction:column; }
.scanbar { display:flex; justify-content:space-between; align-items:center; padding:30px 16px 10px; font-family:var(--f-display); }
.scanbar span { font-weight:800; color:var(--forest); font-size:15px; }
.scanbar b { font-size:12px; color:var(--on-forest); background:var(--forest); padding:4px 10px; border-radius:999px; }
.shelf { position:relative; margin:0 10px; border-radius:18px; overflow:hidden; aspect-ratio:4/5; }
.shelf img { width:100%; height:100%; object-fit:cover; object-position:58% 50%; display:block; }
.beam { position:absolute; left:0; right:0; height:60px; top:-60px; border-bottom:2px solid var(--leaf);
        background:linear-gradient(180deg, transparent, rgba(131,189,67,.45)); animation:beam 4s ease-in-out infinite; }
@keyframes beam { 0% { top:-60px; } 55%,100% { top:100%; } }
.box { position:absolute; border:2px solid #fff; border-radius:10px; box-shadow:0 0 0 2px var(--forest); opacity:0; animation:boxpop 4s infinite; }
.box i { position:absolute; bottom:calc(100% + 4px); left:-2px; background:var(--forest); color:#fff; font:700 10.5px var(--f-display);
         font-style:normal; padding:2px 7px; border-radius:7px; white-space:nowrap; }
.b1 { left:2%; top:30%; width:34%; height:40%; animation-delay:.6s; }
.b2 { left:40%; top:6%; width:22%; height:52%; animation-delay:.3s; }
.b3 { left:34%; top:66%; width:30%; height:28%; animation-delay:1.1s; }
.b4 { left:66%; top:62%; width:31%; height:32%; animation-delay:1.4s; }
.b4 i { left:auto; right:-2px; }
@keyframes boxpop { 0%,8% { opacity:0; transform:scale(.92); } 16%,88% { opacity:1; transform:none; } 100% { opacity:0; } }
.found { list-style:none; margin:10px 10px 0; padding:0; display:grid; gap:6px; }
.found li { display:flex; justify-content:space-between; align-items:center; background:var(--surface); border:1px solid var(--line);
            border-radius:11px; padding:7px 10px; font:700 12.5px var(--f-display); color:var(--ink); }
.found em { font-style:normal; font-size:11px; padding:2px 8px; border-radius:999px; background:var(--forest-wash); color:var(--forest); }
.found em.soon { background:#FDE7DA; color:#B4520E; }
.addall { margin:auto 10px 14px; background:var(--forest); color:#fff; text-align:center; border-radius:13px; padding:10px; font:700 13px var(--f-display); }

.trio { list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; }
.trio li { display:grid; justify-items:center; text-align:center; gap:12px; }
.trio .big { font:800 52px/1 var(--f-display); color:var(--forest); }
.trio .phone { width:min(230px,64vw); }
.trio h3 { font:800 26px var(--f-display); color:var(--forest); margin:4px 0 0; }
.trio p { margin:0; color:var(--ink-soft); max-width:30ch; }

.waste { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:22px 0 10px; }
.stats div { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; }
.stats b { display:block; font:800 clamp(22px,2.6vw,30px)/1.1 var(--f-display); color:#B4520E; }
.stats span { font-size:14px; color:var(--ink-soft); }
.source { font-size:13px; color:var(--ink-faint); }
.fixes { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.fixes li { display:flex; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.fixes .ms { color:var(--forest); background:var(--forest-wash); border-radius:12px; padding:8px; height:fit-content; }
.fixes b { font-family:var(--f-display); color:var(--ink); }
.fixes p { margin:2px 0 0; color:var(--ink-soft); font-size:15px; }

@media (max-width:860px) {
  .trio, .waste { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { .beam { display:none; } .box { animation:none; opacity:1; } }

/* ---- 15 Oct: approved logo, tomato-forward scan, livelier sections ---- */
.brand .logo { height:38px; width:auto; }
.shelf { aspect-ratio:660/520; }
.shelf img { object-position:center; }
.b1 { left:36%; top:2%; width:48%; height:38%; animation-delay:.2s; }
.b2 { left:11%; top:12%; width:24%; height:50%; animation-delay:.5s; }
.b3 { left:3%; top:60%; width:47%; height:36%; animation-delay:1s; }
.b4 { left:55%; top:54%; width:43%; height:40%; animation-delay:1.3s; }
.b3 i { bottom:auto; top:calc(100% + 3px); }
.found li span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* reveal on scroll: only when the script runs, so content is never hidden */
.js .reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity:1; transform:none; }
.js .bigstats .reveal:nth-child(2), .js .fixgrid .reveal:nth-child(2), .js .aicards .reveal:nth-child(2) { transition-delay:.12s; }
.js .bigstats .reveal:nth-child(3), .js .fixgrid .reveal:nth-child(3), .js .aicards .reveal:nth-child(3) { transition-delay:.24s; }
.js .fixgrid .reveal:nth-child(4), .js .aicards .reveal:nth-child(4) { transition-delay:.36s; }

.ic { display:grid; place-items:center; width:46px; height:46px; border-radius:14px; font-size:24px; flex:0 0 auto; }
.ic.c1 { background:#E3EDDD; color:#07533A; }
.ic.c2 { background:#FDE7DA; color:#B4520E; }
.ic.c3 { background:#DDEBF7; color:#1F5F99; }
.ic.c4 { background:#EEE5F6; color:#6B3FA0; }
.ic.c5 { background:#F8E0EF; color:#BE288C; }
.ic.gold { background:#F8EDD5; color:#B7791F; }

/* food waste band */
.band { background:radial-gradient(1200px 400px at 85% 0%, #176C50 0, transparent 60%), linear-gradient(160deg, #07533A, #053B29);
        color:#F3F7EE; border-radius:28px; padding:48px clamp(18px,4vw,48px); margin:28px 0; overflow:hidden; }
.band h2 { color:#fff; }
.band .sub { color:#CFE0C6; }
.tagline.light { color:#83BD43; }
.bigstats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:28px 0 12px; }
.bigstat { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:20px; padding:20px; display:grid; gap:6px; align-content:start; }
.bigstat .bi { font-size:30px; color:#83BD43; }
.bigstat b { font:800 clamp(30px,4.2vw,46px)/1 var(--f-display); color:#fff; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.bigstat > span:not(.ms):not(.bags) { color:#CFE0C6; font-size:15px; }
.bags { display:flex; gap:8px; margin-top:6px; }
.bags i { width:22px; height:26px; border-radius:5px 5px 8px 8px; background:#83BD43; opacity:.25; transform:translateY(8px); transition:opacity .4s, transform .4s; }
.bags.in i { opacity:1; transform:none; }
.bags.in i:nth-child(2) { transition-delay:.2s; } .bags.in i:nth-child(3) { transition-delay:.4s; } .bags.in i:nth-child(4) { transition-delay:.6s; }
.band .source { color:#9DB894; } .band .source a { color:#CFE0C6; }
.helps { font:800 22px var(--f-display); color:#fff; margin:30px 0 14px; }
.fixgrid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.fixgrid li { background:#FFFEF9; color:var(--ink); border-radius:20px; padding:18px; display:grid; gap:8px; align-content:start;
              transition:transform .25s, box-shadow .25s; }
.fixgrid li:hover { transform:translateY(-4px); box-shadow:0 14px 28px rgba(0,0,0,.18); }
.fixgrid b { font:800 17px var(--f-display); }
.fixgrid p { margin:0; color:var(--ink-soft); font-size:14.5px; }

/* AI flow */
.flow { display:flex; align-items:center; justify-content:space-between; gap:6px; margin:26px 0 30px; flex-wrap:wrap; }
.node { flex:1 1 140px; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px 14px;
        display:grid; justify-items:center; text-align:center; gap:4px; box-shadow:var(--shadow); }
.node .ms { font-size:30px; color:var(--forest); background:var(--forest-wash); border-radius:16px; padding:10px; }
.node b { font:800 16px var(--f-display); color:var(--ink); }
.node small { color:var(--ink-soft); font-size:13px; }
.node.ai { background:linear-gradient(160deg,#07533A,#176C50); border-color:#07533A; }
.node.ai .ms { background:rgba(255,255,255,.14); color:#B8F07A; animation:spark 2.4s ease-in-out infinite; }
.node.ai b { color:#fff; } .node.ai small { color:#CFE0C6; }
@keyframes spark { 0%,100% { transform:scale(1) rotate(0); } 50% { transform:scale(1.15) rotate(12deg); } }
.pipe { flex:0 0 46px; height:6px; position:relative; display:flex; justify-content:space-around; align-items:center; }
.pipe i { width:6px; height:6px; border-radius:50%; background:var(--leaf); animation:dot 1.4s ease-in-out infinite; }
.pipe i:nth-child(2) { animation-delay:.2s; } .pipe i:nth-child(3) { animation-delay:.4s; }
@keyframes dot { 0%,100% { opacity:.25; transform:scale(.8); } 50% { opacity:1; transform:scale(1.3); } }
.aicards { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.aicards li { display:flex; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:14px 16px;
              transition:transform .25s, box-shadow .25s; }
.aicards li:hover { transform:translateX(4px); box-shadow:var(--shadow); }
.aicards b { font:800 16.5px var(--f-display); color:var(--ink); }
.aicards p { margin:3px 0 0; color:var(--ink-soft); font-size:14.5px; }
.pluschip { font-style:normal; font:800 10.5px var(--f-display); letter-spacing:.08em; text-transform:uppercase; background:var(--gold-wash);
            color:var(--gold); padding:2px 7px; border-radius:999px; vertical-align:2px; }
.learned { animation:glow 4s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow:var(--shadow); } 50% { box-shadow:0 0 0 4px rgba(131,189,67,.25), var(--shadow); } }

/* plans */
.billing { display:inline-flex; background:var(--sunk); border:1px solid var(--line); border-radius:999px; padding:4px; margin:18px 0 22px; }
.billing button { border:0; background:transparent; font:700 15px var(--f-display); color:var(--ink-soft); padding:9px 18px; border-radius:999px; cursor:pointer; }
.billing button.on { background:var(--forest); color:#fff; box-shadow:0 2px 0 var(--btn-edge); }
.billing em { font-style:normal; font-size:11.5px; background:#83BD43; color:#06321F; padding:2px 7px; border-radius:999px; margin-left:4px; }
.plans2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.p2 { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:26px; box-shadow:var(--shadow);
      transition:transform .25s, box-shadow .25s; }
.p2:hover { transform:translateY(-4px); }
.p2 header { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.p2 h3 { font:800 24px var(--f-display); margin:0; color:var(--forest); }
.p2 .amt { font:800 30px/1.1 var(--f-display); margin:2px 0 0; color:var(--ink); }
.p2 .amt small { font-size:15px; font-weight:700; color:var(--ink-soft); }
.p2 .per { margin:4px 0 0; font-size:14px; color:var(--ink-soft); }
.p2 ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.p2 li { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink-mid); }
.p2 li .ms { font-size:20px; color:var(--forest); flex:0 0 auto; }
.p2.plus { background:linear-gradient(160deg,#07533A,#0B6446 55%,#176C50); color:#fff; border-color:#07533A; overflow:hidden; }
.p2.plus h3, .p2.plus .amt { color:#fff; }
.p2.plus .amt small, .p2.plus .per { color:#CFE0C6; }
.p2.plus li { color:#EAF3E3; }
.p2.plus li .ms { color:#B8F07A; }
.ribbon { position:absolute; top:18px; right:-34px; transform:rotate(35deg); background:#83BD43; color:#06321F;
          font:800 12px var(--f-display); letter-spacing:.06em; text-transform:uppercase; padding:6px 40px; }

@media (max-width:900px) {
  .fixgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .bigstats, .plans2, .fixgrid { grid-template-columns:1fr; }
  .flow { flex-direction:column; }
  .pipe { transform:rotate(90deg); margin:6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  .node.ai .ms, .pipe i, .learned { animation:none; }
  .bags i { opacity:1; transform:none; }
}

.upto { font-size:.42em; font-weight:700; color:#CFE0C6; letter-spacing:0; vertical-align:.35em; }

/* 15 Oct: every scan label sits inside its box, so none is cut off at the
   photo's edge (lemons and herbs were). */
.box i, .b3 i, .b4 i { top:4px; bottom:auto; left:4px; right:auto; }

/* 15 Oct: taller scan photo (the whole shelf height) and the list below it,
   using the phone's full screen. */
.shelf { aspect-ratio:660/671; flex:0 0 auto; }
.b1 { left:35%; top:6%; width:50%; height:42%; }
.b2 { left:11%; top:26%; width:25%; height:41%; }
.b3 { left:3%; top:63%; width:48%; height:30%; }
.b4 { left:55%; top:59%; width:44%; height:32%; }
.scanphone .found { margin-top:12px; }
.scanphone .addall { margin-top:auto; }

/* 15 Oct: two-shelf fridge photo (Higgsfield), zoomed out. */
.shelf { aspect-ratio:660/795; }
.b1 { left:8%; top:1%; width:21%; height:45%; animation-delay:.2s; }
.b2 { left:29%; top:5%; width:40%; height:41%; animation-delay:.45s; }
.b5 { left:64%; top:25%; width:33%; height:22%; animation-delay:.7s; }
.b4 { left:1%; top:57%; width:48%; height:36%; animation-delay:1s; }
.b3 { left:45%; top:70%; width:33%; height:24%; animation-delay:1.25s; }
.scanphone .found { gap:5px; margin-top:10px; }
.scanphone .found li { padding:6px 10px; }

/* 15 Oct: fridge, freezer and pantry scenes, one every 5 seconds. */
.scanphone .screen { position:relative; }
.scene { display:none; flex-direction:column; height:100%; }
.scene.on { display:flex; animation:scenein .5s ease; }
@keyframes scenein { from { opacity:0; } to { opacity:1; } }
.scene .box { animation:boxin .45s ease forwards; opacity:0; }
@keyframes boxin { from { opacity:0; transform:scale(.9); } to { opacity:1; transform:none; } }
.scene .beam { animation:beam 2.6s ease-in-out 1 forwards; }
.scene .found li { opacity:0; animation:rowin .35s ease forwards; }
.scene .found li:nth-child(1) { animation-delay:1.6s; } .scene .found li:nth-child(2) { animation-delay:1.8s; }
.scene .found li:nth-child(3) { animation-delay:2s; } .scene .found li:nth-child(4) { animation-delay:2.2s; }
.scene .found li:nth-child(5) { animation-delay:2.4s; }
@keyframes rowin { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.scanphone .found { gap:4px; margin-top:8px; }
.scanphone .found li { padding:5px 10px; font-size:12px; }
.scanphone .scanbar { padding:26px 16px 8px; }
.scanphone .addall { margin:auto 10px 12px; padding:9px; }
.scene[data-scene="freezer"] .scanbar span { color:#1F5F99; }
.scene[data-scene="pantry"] .scanbar span { color:#8A5A12; }
@media (prefers-reduced-motion: reduce) {
  .scene .box, .scene .found li { animation:none; opacity:1; }
  .scene .beam { display:none; }
}

/* Labels on boxes at the right edge hang to the left, so they are not cut off. */
.scene .box.r i { left:auto; right:4px; }

/* 15 Oct: scenes cross-fade; the app's leaf loader until the photos load. */
.scanphone .screen { position:relative; }
.scene { display:flex; flex-direction:column; position:absolute; inset:0; opacity:0; visibility:hidden;
         transition:opacity .8s ease, visibility 0s linear .8s; animation:none; }
.scene.on { opacity:1; visibility:visible; transition:opacity .8s ease; animation:none; }
.scene .box, .scene .found li { animation:none; opacity:0; }
.scene .beam { animation:none; top:-60px; }
.scene.play .box { animation:boxin .45s ease forwards; }
.scene.play .beam { animation:beam 2.6s ease-in-out 1 forwards; }
.scene.play .found li { animation:rowin .35s ease forwards; }
.scene.play .found li:nth-child(1) { animation-delay:1.6s; } .scene.play .found li:nth-child(2) { animation-delay:1.8s; }
.scene.play .found li:nth-child(3) { animation-delay:2s; } .scene.play .found li:nth-child(4) { animation-delay:2.2s; }
.scene.play .found li:nth-child(5) { animation-delay:2.4s; }

.screen-loader { position:absolute; inset:0; display:grid; place-items:center; background:var(--ground); z-index:3;
                 transition:opacity .5s ease, visibility 0s linear .5s; }
.scanphone.ready .screen-loader { opacity:0; visibility:hidden; }
.screen-loader .ring { position:absolute; width:72px; height:72px; border-radius:50%; background:#F7F7F0;
                       box-shadow:0 4px 12px rgba(0,0,0,.2); }
.screen-loader .ring::after { content:""; position:absolute; inset:3px; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(7,83,58,0) 0deg, #3F9C5E 150deg, #07533A 216deg, transparent 216deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation:spin 1s linear infinite; }
.screen-loader .ring::before { content:""; position:absolute; inset:3px; border-radius:50%; border:3px solid #DCE6D3; }
.screen-loader img { position:relative; width:36px; height:36px; animation:breathe 1s ease-in-out infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes breathe { 0%,100% { transform:scale(.9) rotate(-4deg); } 50% { transform:scale(1.02) rotate(4deg); } }

/* the receipt */
.shelf.paper { background:linear-gradient(160deg,#D9D2C3,#C9C0AE); display:grid; place-items:center; }
.receipt { width:84%; height:92%; background:#FFFEFA; box-shadow:0 6px 14px rgba(0,0,0,.18); transform:rotate(-2deg);
           padding:10px 10px 0; font:600 9.5px/1.25 "IBM Plex Mono", ui-monospace, monospace; color:#2b2b2b;
           clip-path:polygon(0 0,100% 0,100% 96%,94% 100%,88% 96%,82% 100%,76% 96%,70% 100%,64% 96%,58% 100%,52% 96%,46% 100%,40% 96%,34% 100%,28% 96%,22% 100%,16% 96%,10% 100%,4% 96%,0 100%); }
.receipt .shop { text-align:center; font-weight:700; letter-spacing:.06em; margin:2px 0 1px; }
.receipt .when { text-align:center; color:#777; margin:0 0 8px; font-size:8.5px; }
.receipt ul { list-style:none; margin:0; padding:0; display:grid; gap:7px; }
.receipt li { display:flex; justify-content:space-between; gap:6px; }
.receipt li span:first-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.receipt .tot { border-top:1px dashed #999; padding-top:5px; font-weight:700; }
.scene[data-scene="receipt"] .scanbar span { color:#6B3FA0; }

@media (prefers-reduced-motion: reduce) {
  .scene .box, .scene .found li { opacity:1; }
  .screen-loader .ring::after, .screen-loader img { animation:none; }
}

/* Receipt lines light up one by one as they are read. */
.receipt ul { gap:10px; }
.receipt li:not(.tot) { padding:3px 5px; margin:0 -5px; border-radius:6px; box-shadow:0 0 0 0 transparent; }
.scene.play .receipt li:not(.tot) { animation:lineread .45s ease forwards; }
.scene.play .receipt li:nth-child(1) { animation-delay:.3s; } .scene.play .receipt li:nth-child(2) { animation-delay:.55s; }
.scene.play .receipt li:nth-child(3) { animation-delay:.8s; } .scene.play .receipt li:nth-child(4) { animation-delay:1.05s; }
.scene.play .receipt li:nth-child(5) { animation-delay:1.3s; }
@keyframes lineread { to { background:rgba(131,189,67,.22); box-shadow:0 0 0 2px #07533A; } }
@media (prefers-reduced-motion: reduce) { .receipt li:not(.tot) { background:rgba(131,189,67,.22); box-shadow:0 0 0 2px #07533A; } }