/* What's in my Fridge: John's own web app. The portfolio frame (Poppins, white,
   highlighter marks) with the app's own pieces rebuilt in HTML/CSS from its source:
   Fraunces + Plus Jakarta Sans, warm paper, fresh green, amber and red.
   Everything from the app is prefixed fa- so it never meets the site's own classes. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/fraunces-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/fraunces-italic.woff2) format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../projects/whats-in-my-fridge/fonts/plusjakartasans-normal.woff2) format("woff2"); }

body { --project-pen: #b9e4c9; }

/* ---------- The app's tokens (src/index.css) ---------- */
.fa, .wf {
  --fa-bg: #faf7f2; --fa-surface: #fffdf9; --fa-surface-2: #f3eee4;
  --fa-ink: #1f1b16; --fa-ink-soft: #6b6358; --fa-ink-faint: #7c7264;
  --fa-line: #e7e0d3; --fa-line-strong: #d8cfbe;
  --fa-accent: #2f7d5a; --fa-accent-press: #28694c; --fa-accent-soft: #e6efe8; --fa-on-accent: #fdfdfb; --fa-leaf: #7bb497;
  --fa-warn: #bf6432; --fa-warn-soft: #f8ebe0; --fa-danger: #b1433a; --fa-danger-soft: #f6e3e0;
  --fa-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --fa-display: "Fraunces", Georgia, serif;
}
.fa { font-family: var(--fa-sans); color: var(--fa-ink); line-height: 1.5; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.fa *, .fa *::before, .fa *::after { box-sizing: border-box; }
.fa [hidden], .fa[hidden] { display: none !important; }
:where(.fa) button { border: 0; background: none; font: inherit; color: inherit; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fa svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fa h1, .fa h3, .fa h4, .fa :where(.fa-h4) { letter-spacing: normal; line-height: 1.2; }

/* A full app screen inside a .phone: laid out at 390px wide like the real app and
   scaled to fit (whats-in-my-fridge.js), so the text stays real and sharp */
.fa-app {
  position: absolute; left: 0; top: 0; width: 390px; height: 824px; overflow: hidden;
  transform-origin: 0 0; background: var(--fa-bg);
  background-image: radial-gradient(120% 80% at 50% -10%, #fffdf8 0%, var(--fa-bg) 55%);
  display: flex; flex-direction: column;
}
.wf .phone__display { --status-bg: #fcfaf5; }
.wf .phone .screen { background: var(--fa-bg); }
.fa-body { flex: 1; padding: 8px 18px 0; position: relative; overflow: hidden; }

/* Header: leaf + the stacked wordmark */
.fa-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 6px; }
.fa-brand { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.fa-leaf { width: 22px; height: 22px; color: #2c7a57; }
.fa-leaf path { fill: currentColor; stroke: none; }
.fa-bt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.fa-bt small { font: italic 500 12px/1 var(--fa-display); color: #5a8a72; margin-bottom: 1px; }
.fa-bt b { font: 600 27px/1 var(--fa-display); letter-spacing: -0.02em; color: var(--fa-accent); }
.fa-head__r { display: flex; align-items: center; gap: 8px; }
.fa-round { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fa-surface-2); color: var(--fa-ink-soft); border: 1px solid var(--fa-line); }
.fa-pill { font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); background: var(--fa-surface-2); border: 1px solid var(--fa-line); padding: 6px 11px; border-radius: 999px; }

.fa-title { margin: 10px 0 2px; font: 600 30px/1.1 var(--fa-display); letter-spacing: -0.02em; }
.fa-sub { margin: 0 0 16px; font-size: 14px; color: var(--fa-ink-soft); }

/* Bottom nav */
.fa-nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: 74px; padding-bottom: 6px; z-index: 6;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgb(255 253 249 / 0.94); border-top: 1px solid var(--fa-line);
}
.fa-nav span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--fa-ink-faint); }
.fa-nav span.on { color: var(--fa-accent); }
.fa-nav i { display: inline-flex; position: relative; }
.fa-nav i.pulse { animation: fa-nav-pulse 0.42s ease-in-out 3; color: var(--fa-accent); }
@keyframes fa-nav-pulse { 50% { transform: scale(1.25); } }

/* Segmented toggle + chips */
.fa-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fa-surface-2); margin-bottom: 14px; }
.fa-seg span { flex: 1; text-align: center; padding: 8px 6px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--fa-ink-soft); }
.fa-seg span.on { background: var(--fa-surface); color: var(--fa-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.fa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fa-chip { border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink-soft); font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.fa-chip.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.fa-chip em { font-style: normal; opacity: 0.65; margin-left: 3px; font-weight: 700; }

/* Buttons */
.fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; border-radius: 14px; padding: 13px 18px; }
.fa-btn--primary { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-btn--ghost { background: var(--fa-surface); border: 1px solid var(--fa-line-strong); }
.fa-btn--block { width: 100%; }
.fa-btn.is-press { transform: scale(0.96); background: var(--fa-accent-press); }

/* Item row */
.fa-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.fa-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
  padding: 13px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface);
  transition: border-color 0.2s, background 0.3s, opacity 0.3s;
}
.fa-item.soon { border-color: #ecc7ab; background: linear-gradient(180deg, var(--fa-warn-soft), var(--fa-surface) 70%); }
.fa-item.expired { border-color: #e6b8b2; background: linear-gradient(180deg, var(--fa-danger-soft), var(--fa-surface) 70%); }
.fa-item__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fa-item__name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-item__name small { font-size: inherit; color: var(--fa-ink-soft); font-weight: 500; }
.fa-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--fa-ink-soft); }
.fa-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fa-line-strong); }
.fa-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--fa-surface-2); color: var(--fa-ink-soft); }
.fa-tag.dairy { background: #eef2fa; color: #46618c; }
.fa-tag.produce { background: #eaf3e8; color: #4a7a43; }
.fa-tag.meat { background: #f7ebe9; color: #9c5249; }
.fa-tag.bakery { background: #f4ecdd; color: #8a6a32; }
.fa-tag.drinks { background: #e7f1f3; color: #3f7480; }
.fa-exp { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fa-exp.soon { color: var(--fa-warn); }
.fa-exp.expired { color: var(--fa-danger); }
.fa-new { background: var(--fa-accent); color: var(--fa-on-accent); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; }
.fa-acts { display: flex; align-items: center; gap: 8px; margin-right: -4px; }
.fa-ibtn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--fa-line); background: var(--fa-surface); color: #4a86b8; display: grid; place-items: center; transition: background 0.2s, color 0.2s, transform 0.12s; }
.fa-used { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 11px; border-radius: 12px; border: 1px solid var(--fa-line); background: var(--fa-surface); color: var(--fa-ink-soft); font-weight: 600; font-size: 12px; line-height: 1; transition: background 0.22s, color 0.22s, border-color 0.22s, transform 0.12s; }
.fa-used svg { color: var(--fa-ink-faint); }
.fa-used .fa-tick, .fa-ibtn .fa-tick { display: none; }
.fa-used.on, .fa-ibtn.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.fa-used.on svg { color: var(--fa-on-accent); }
.fa-used.on .fa-ring, .fa-ibtn.on .fa-snow { display: none; }
.fa-used.on .fa-tick, .fa-ibtn.on .fa-tick { display: block; animation: fa-tick 0.24s ease; }
@keyframes fa-tick { 0% { transform: scale(0.5); } 60% { transform: scale(1.18); } }
.fa-used:active, .fa-ibtn:active { transform: scale(0.95); }

/* Banners */
.fa-banner { display: flex; gap: 10px; align-items: flex-start; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: #7c4a23; border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.fa-staples { background: var(--fa-accent-soft); border: 1px solid #cfe5d6; border-radius: 14px; padding: 13px 14px 6px; }
.fa-staples__head { display: flex; gap: 9px; align-items: flex-start; color: var(--fa-accent-press); }
.fa-staples__head strong { display: block; font-size: 14px; font-weight: 700; }
.fa-staples__head p { margin: 1px 0 0; font-size: 12.5px; color: var(--fa-ink-soft); }
.fa-staple { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #d6e7dc; margin-top: 8px; }
.fa-staple + .fa-staple { margin-top: 0; }
.fa-staple__i { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fa-staple__i b { font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; }
.fa-staple__i small { font-size: 11.5px; color: var(--fa-ink-soft); }
.fa-staple-add { display: inline-flex; align-items: center; gap: 5px; background: var(--fa-accent); color: var(--fa-on-accent); border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 600; transition: transform 0.12s, background 0.2s; }
.fa-staple-add.done { background: var(--fa-surface); color: var(--fa-accent-press); box-shadow: inset 0 0 0 1px #cfe5d6; }
.fa-x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--fa-ink-faint); }

/* Category header */
.fa-cat { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; font: 500 17px/1.2 var(--fa-display); }
.fa-cat b { margin-left: auto; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / 0.75); font: 700 12px/1 var(--fa-sans); }
.fa-cat.new { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-cat.new b { background: rgb(255 255 255 / 0.22); }
.fa-cat.dairy { background: #eef2fa; color: #46618c; }
.fa-cat.produce { background: #eaf3e8; color: #4a7a43; }
.fa-cat.meat { background: #f7ebe9; color: #9c5249; }
.fa-cat.freezer { background: #e8f1f8; color: #2f6c9e; }
.fa-cat.bakery { background: #f4ecdd; color: #8a6a32; }
.fa-cat.drinks { background: #e7f1f3; color: #3f7480; }

/* Toast */
.fa-toast { position: absolute; left: 50%; bottom: 92px; z-index: 8; translate: -50% 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; background: var(--fa-ink); color: #fff; padding: 11px 17px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: 0 14px 30px -10px rgb(0 0 0 / 0.4); }
.fa-toast svg { color: var(--fa-accent-soft); }

/* Scan */
.fa-drop { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--fa-line-strong); border-radius: 20px; background: var(--fa-surface); }
.fa-art { width: 64px; height: 64px; border-radius: 18px; background: var(--fa-accent-soft); color: var(--fa-accent); display: grid; place-items: center; }
.fa-drop h3 { margin: 0; font: 600 19px/1.25 var(--fa-display); }
.fa-drop p { margin: 0; color: var(--fa-ink-soft); font-size: 14px; max-width: 30ch; }
.fa-photo { position: relative; height: 330px; border-radius: 20px; overflow: hidden; background: #e9dfcf; }
.fa-photo i { position: absolute; border-radius: 50%; filter: blur(16px); opacity: 0.9; }
.fa-photo__busy { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgb(255 253 249 / 0.62); font-weight: 600; font-size: 15px; }
.fa-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--fa-accent-soft); border-top-color: var(--fa-accent); animation: fa-spin 0.8s linear infinite; }
@keyframes fa-spin { to { transform: rotate(1turn); } }
.fa-sweep { position: absolute; left: 0; right: 0; height: 90px; top: -90px; background: linear-gradient(180deg, transparent, rgb(255 255 255 / 0.35) 70%, rgb(255 255 255 / 0.85) 96%, transparent); }
.fa-label { font-size: 13px; font-weight: 600; color: var(--fa-ink-soft); margin: 0 0 8px; }
.fa-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--fa-ink-soft); line-height: 1.4; }
.fa-confirm { margin-top: 14px; padding: 0 12px; border: 1px solid var(--fa-line); border-radius: 18px; background: var(--fa-surface); }
.fa-crow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--fa-line); }
.fa-crow:last-child { border-bottom: 0; }
.fa-check { width: 26px; height: 26px; border-radius: 8px; background: var(--fa-accent); color: var(--fa-on-accent); display: grid; place-items: center; }
.fa-crow b { display: block; font-weight: 600; font-size: 15px; }
.fa-crow small { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fa-ink-soft); }
.fa-qty { width: 54px; height: 40px; border-radius: 10px; border: 1px solid var(--fa-line-strong); display: grid; place-items: center; font-size: 15px; background: var(--fa-surface); }
.fa-flag { display: inline-flex; align-items: center; gap: 4px; color: var(--fa-warn); font-weight: 600; }
.fa-dock { position: absolute; left: 18px; right: 18px; bottom: 90px; z-index: 5; display: flex; gap: 10px; }
.fa-dock .fa-btn--ghost { flex: none; }

/* Chat */
.fa-chat { display: flex; flex-direction: column; gap: 10px; }
.fa-bubble { max-width: 84%; padding: 11px 14px; border-radius: 17px; font-size: 14.5px; line-height: 1.5; }
.fa-bubble.me { align-self: flex-end; background: var(--fa-accent); color: var(--fa-on-accent); border-bottom-right-radius: 5px; }
.fa-bubble.ai { align-self: flex-start; background: var(--fa-surface); border: 1px solid var(--fa-line); border-bottom-left-radius: 5px; }
.fa-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.fa-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--fa-ink-faint); animation: fa-blink 1.2s infinite ease-in-out; }
.fa-typing span:nth-child(2) { animation-delay: 0.2s; }
.fa-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes fa-blink { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.fa-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: fa-caret 0.9s steps(1) infinite; }
@keyframes fa-caret { 50% { opacity: 0; } }
.fa-nudge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: var(--fa-warn); font-size: 14px; }
.fa-nudge span { flex: 1; color: var(--fa-ink); font-weight: 500; }
.fa-nudge strong { color: var(--fa-warn); }
.fa-meals-intro { margin: 2px 0 0; font-size: 13px; color: var(--fa-ink-soft); }
.fa-meal { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface); }
.fa-meal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fa-meal h4, .fa-meal :where(.fa-h4) { flex: 1; min-width: 0; margin: 0 0 3px; font: 600 15px/1.3 var(--fa-display); letter-spacing: -0.01em; }
.fa-meal__acts { display: inline-flex; gap: 7px; flex: none; }
.fa-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink-soft); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s; }
.fa-mini.on { background: var(--fa-accent-soft); color: var(--fa-accent-press); border-color: #cfe5d6; }
.fa-mini .fa-tick { display: none; }
.fa-mini.on .fa-tick { display: block; }
.fa-mini.on .fa-off { display: none; }
.fa-meal p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.4; }
.fa-meal .fa-uses { margin: 0; font-size: 12px; color: var(--fa-ink-faint); }
.fa-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--fa-ink-soft); }
.fa-buy-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-ink); transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s; }
.fa-buy-chip.on { background: var(--fa-accent-soft); color: var(--fa-accent-press); border-color: #cfe5d6; }
.fa-buy-chip .fa-tick { display: none; }
.fa-buy-chip.on .fa-tick { display: block; }
.fa-buy-chip.on .fa-plus { display: none; }
.fa-input { position: absolute; left: 14px; right: 14px; bottom: 86px; z-index: 5; display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 16px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); color: var(--fa-ink-faint); font-size: 14.5px; }
.fa-input span { flex: 1; }
.fa-input b { width: 38px; height: 38px; border-radius: 50%; background: var(--fa-accent); color: var(--fa-on-accent); display: grid; place-items: center; }

/* Shopping list */
.fa-shop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fa-line); background: var(--fa-surface); transition: opacity 0.3s; }
.fa-shop + .fa-shop { margin-top: 8px; }
.fa-box { width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-on-accent); display: grid; place-items: center; transition: background 0.18s, border-color 0.18s; }
.fa-box svg { opacity: 0; }
.fa-shop.done { opacity: 0.6; }
.fa-shop.done .fa-box { background: var(--fa-accent); border-color: var(--fa-accent); }
.fa-shop.done .fa-box svg { opacity: 1; animation: fa-tick 0.24s ease; }
.fa-shop b { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.fa-shop.done b { text-decoration: line-through; text-decoration-color: var(--fa-ink-faint); }
.fa-shop i { color: var(--fa-ink-faint); }

/* Install sheet bits */
.fa-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fa-steps li { display: flex; gap: 12px; align-items: flex-start; }
.fa-steps .n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-weight: 700; font-size: 13px; display: grid; place-items: center; transition: background 0.2s, color 0.2s; }
.fa-steps li.now .n { background: var(--fa-accent); color: var(--fa-on-accent); }
.fa-steps .t { font-size: 15px; line-height: 1.45; padding-top: 2px; }
.fa-steps .t b { font-weight: 700; }
.fa-inl { display: inline-flex; vertical-align: -3px; color: var(--fa-accent); margin: 0 1px; }
.fa-tile { width: 100%; aspect-ratio: 1; border-radius: 23%; background: var(--fa-accent); display: grid; place-items: center; box-shadow: 0 6px 14px rgb(38 104 75 / 0.35); overflow: hidden; }
.fa-tile svg { width: 100%; height: 100%; stroke: none; }

/* =================== Page layout (portfolio frame) =================== */
.wf-hero h1 { font-size: clamp(50px, 7.2vw, 106px); }
.wf-hero .cs-hero__lede { max-width: 46ch; }
.wf-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-tags span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px; background: var(--grey-1); border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; }
.wf-tags span:first-child::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2f7d5a; box-shadow: 0 0 0 3px #d5ebdc; }
.wf-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wf-get { background: #2f7d5a; border-color: #2f7d5a; }
.wf-get:hover { background: #28694c; }
.wf-get svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 680px) { .wf-ctas .btn { padding: 13px 18px; } }

/* Hero stage: three phones, upright and overlapping, with app pieces around them */
.wf-stage { aspect-ratio: 1 / 0.9; }
.wf-stage .phone { position: absolute; bottom: auto; right: auto; }
.wf-stage .wf-ph--l { left: 6%; top: 15%; width: 26%; z-index: 2; rotate: -7deg; }
.wf-stage .wf-ph--c { left: 35%; top: 3%; width: 30%; z-index: 3; }
.wf-stage .wf-ph--r { left: 68%; top: 15%; width: 26%; z-index: 2; rotate: 7deg; }
.wf-stage .stage__glow { inset: 6% 2% 0; }
.wf-pop-row { width: 100%; }
.wf-pop-row .fa-item { box-shadow: 0 2px 4px rgb(60 40 10 / 0.06); }
.wf-pop-logo { width: 100%; padding: 10px 14px 8px; border-radius: 16px; background: #fffdf9; border: 1px solid #e7e0d3; }
.wf-pop-logo img { display: block; width: 100%; height: auto; }
.wf-pop-toast { position: static !important; translate: none !important; }
@media (max-width: 900px) {
  .wf-stage { aspect-ratio: 1 / 1.02; margin-top: 8px; }
  .wf-stage .wf-ph--l { left: 1%; top: 17%; width: 31%; }
  .wf-stage .wf-ph--c { left: 32%; top: 4%; width: 36%; }
  .wf-stage .wf-ph--r { left: 68%; top: 17%; width: 31%; }
}

/* Phones: the hero walkthrough (whats-in-my-fridge.js). Each phone gets a stack of the
   real screens; the centre one pushes between them, the pieces around it react. */
.wf-reel, .wf-cue, .wf-hero-now, .wf-deck-info { display: none; }
@media (max-width: 760px) {
  .wf-stage.is-reel { margin-bottom: 14px; }
  .wf-reel { display: block; position: absolute; inset: 0; overflow: hidden; background: #faf7f2; }
  .wf-reel img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; visibility: hidden; will-change: transform, opacity; }
  .wf-stage.is-reel .pop:has(.wf-pop-row) { --y-sm: 60% !important; }
  .wf-hero-now.parade__now { display: flex; position: absolute; z-index: 6; left: 50%; top: calc(84% + 6px); translate: -50% 0; max-width: 78vw; box-shadow: 0 10px 24px -12px rgb(24 24 26 / 0.35), 0 0 0 1px rgb(24 24 26 / 0.06); visibility: hidden; }
  .wf-cue { display: block; position: absolute; z-index: 5; right: -1%; top: 47%; width: 0; height: 0; }
  .wf-cue > div { position: absolute; right: 0; top: 0; visibility: hidden; transform-origin: 100% 50%; filter: drop-shadow(0 14px 18px rgb(17 17 17 / 0.2)); }
  .wf-cue__chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); color: var(--fa-ink); font-size: 12.5px; font-weight: 700; }
  .wf-cue__chip svg { color: var(--fa-accent); }
  .wf-cue__chip.is-on { background: var(--fa-accent); border-color: var(--fa-accent); color: var(--fa-on-accent); }
  .wf-cue__chip.is-on svg { color: var(--fa-on-accent); }
  .wf-cue__chip.is-warn { background: var(--fa-warn-soft); border-color: #ecc7ab; color: #7c4a23; }
  .wf-cue__chip.is-warn svg { color: var(--fa-warn); }
  .wf-cue .fa-buy-chip { white-space: nowrap; }
  .wf-cue__meal { display: grid; gap: 2px; width: 172px; padding: 10px 12px; border-radius: 14px; background: var(--fa-surface); border: 1px solid var(--fa-line); }
  .wf-cue__meal b { font: 600 14px/1.25 var(--fa-display); letter-spacing: -0.01em; }
  .wf-cue__meal small { font-size: 11.5px; color: var(--fa-ink-soft); font-weight: 600; }
  /* The screen deck: a line on what the screen does, and dots for where you are */
  .parade.is-deck .wf-deck-info { display: grid; justify-items: center; gap: 10px; margin-top: 12px; padding-inline: 16px; text-align: center; }
  .wf-deck-info p { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--grey-7, #555); }
  .wf-dots { display: flex; gap: 6px; }
  .wf-dots { gap: 8px; }
  .wf-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgb(24 24 26 / 0.18); transition: transform 0.4s cubic-bezier(.2,.8,.2,1), background-color 0.4s; }
  .wf-dots i.on { transform: scale(1.45); background: #18181a; }
  .parade.is-deck .phone .screen img { transform-origin: 50% 0; }
}

/* Chapter label used through the feature run */
.wf-step { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--grey-7); }
.wf-step b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--project-pen); color: #18181a; font-size: 11px; }

/* Intro to the feature run */
.wf-run-head { display: grid; gap: 18px; max-width: 820px; }
.wf-run-head h2 { font-size: clamp(36px, 5.4vw, 76px); letter-spacing: -0.045em; }
.wf-run-head p { color: var(--grey-7); font-size: 18px; max-width: 58ch; }
.wf-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.wf-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.2s, border-color 0.2s; }
.wf-jump a:hover { background: var(--grey-1); border-color: var(--grey-3); }
.wf-jump b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-1); font-size: 10.5px; }

/* One feature: copy on one side, a live demo breaking out of a green panel on the other */
.wf-feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 8vw, 120px); }
.wf-feat--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wf-feat--flip .wf-feat__copy { order: 2; }
.wf-feat__copy { display: grid; gap: 20px; align-content: center; }
.wf-feat__copy h2 { font-size: clamp(32px, 4.2vw, 58px); }
.wf-feat__copy > p { color: var(--grey-7); font-size: 17px; max-width: 46ch; }
.wf-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; }
.wf-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.55; color: var(--ink); }
.wf-points li::before { content: ""; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: #e6efe8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d5a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wf-replay { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 0.2s; }
.wf-replay:hover { background: var(--grey-1); }
.wf-replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.wf-demo { position: relative; isolation: isolate; min-height: clamp(520px, 52vw, 700px); display: grid; align-items: end; }
.wf-panel {
  position: absolute; left: 0; right: 0; bottom: 0; top: 14%; z-index: -1; border-radius: var(--radius-l); overflow: hidden;
  background: radial-gradient(110% 120% at 15% 0%, #e9f3ec 0%, #d9ebdf 55%, #c9e2d1 100%);
}
.wf-panel::before { content: ""; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; }
.wf-panel--warm { background: radial-gradient(110% 120% at 85% 0%, #fbf1e6 0%, #f5e4d2 55%, #efd6bf 100%); }
.wf-panel--deep { background: radial-gradient(110% 120% at 15% 0%, #3d8f69 0%, #2f7d5a 55%, #276848 100%); }
.wf-panel--deep::before { opacity: 0.16; }

.wf-demo .phone { position: absolute; z-index: 2; width: clamp(220px, 21vw, 290px); bottom: 8%; filter: drop-shadow(0 40px 50px rgb(20 60 40 / 0.25)); box-shadow: none; }
.wf-demo .phone.at-l { left: 9%; }
.wf-demo .phone.at-c { left: 50%; translate: -50% 0; }
.wf-demo .phone.at-r { right: 9%; }
.wf-pull { position: absolute; z-index: 4; width: var(--w, 320px); filter: drop-shadow(0 2px 3px rgb(30 50 40 / 0.08)) drop-shadow(0 30px 40px rgb(30 60 40 / 0.22)); }
.wf-pull > * { rotate: var(--r, 0deg); }
.wf-card { border-radius: 20px; background: var(--fa-surface); border: 1px solid var(--fa-line); padding: 16px; }
.wf-card__k { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font: 600 11px/1 var(--fa-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fa-ink-faint); }

/* Small annotations pointing at a detail */
.wf-note {
  position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 8px; max-width: 220px;
  padding: 8px 13px 8px 9px; border-radius: 999px; background: #18181a; color: #fff;
  font: 500 12.5px/1.3 var(--font); letter-spacing: -0.005em; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); white-space: nowrap;
}
.wf-note--tap i { position: relative; background: none; }
.wf-note--tap i::before, .wf-note--tap i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--project-pen); }
.wf-note--tap i::after { animation: credit-pulse 1.6s ease-out infinite; }
.wf-note i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--project-pen); color: #18181a; font: 700 10px/1 var(--font); font-style: normal; }

/* 01 Scan */
.wf-scan .wf-pull--flag { right: -1%; top: 16%; --w: clamp(280px, 25vw, 350px); --r: 4deg; }
.wf-scan .wf-note--a { left: 47%; top: 61%; }

/* 02 Receipt */
.wf-receipt-demo { min-height: clamp(520px, 50vw, 660px); }
.wf-receipt {
  position: absolute; z-index: 2; left: 3%; bottom: 7%; width: clamp(230px, 21vw, 280px); padding: 26px 22px 30px;
  background: #fffefa; color: #2b2925; font: 500 12.5px/1.75 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.02em;
  rotate: -4deg; box-shadow: 0 2px 3px rgb(60 40 10 / 0.08), 0 40px 50px -20px rgb(60 40 10 / 0.35);
  -webkit-mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 0 100% / 14px 100% repeat-x;
          mask: radial-gradient(7px at 50% 100%, transparent 98%, #000) 0 100% / 14px 100% repeat-x;
  overflow: hidden;
}
.wf-receipt__top { text-align: center; margin-bottom: 12px; line-height: 1.5; }
.wf-receipt__top b { display: block; font-size: 15px; letter-spacing: 0.18em; }
.wf-receipt ol { list-style: none; margin: 0; padding: 10px 0; border-block: 1px dashed #b9b2a5; }
.wf-receipt li { display: flex; justify-content: space-between; gap: 10px; padding: 0 4px; border-radius: 4px; transition: background 0.25s, color 0.25s; }
.wf-receipt li.is-on { background: rgb(47 125 90 / 0.14); color: #1d5a3f; }
.wf-receipt li.is-skip { color: #a59d90; text-decoration: line-through; }
.wf-receipt__foot { padding-top: 10px; display: flex; justify-content: space-between; }
.wf-beam { position: absolute; left: -10%; right: -10%; height: 3px; top: 0; background: #2f7d5a; box-shadow: 0 0 18px 4px rgb(47 125 90 / 0.45); opacity: 0; }
.wf-found { position: absolute; z-index: 3; right: 0; top: 4%; width: clamp(270px, 25vw, 330px); }
.wf-found .wf-card { padding: 16px 14px 10px; }
.wf-found__date { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-size: 12.5px; font-weight: 600; }
.wf-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--fa-line); }
.wf-frow small { display: block; font: 500 11px/1.3 ui-monospace, Menlo, monospace; color: var(--fa-ink-faint); letter-spacing: 0.02em; }
.wf-frow b { display: block; font-size: 14.5px; font-weight: 600; }
.wf-frow--skip b { color: var(--fa-ink-faint); font-weight: 500; font-size: 13px; }
.wf-receipt-demo .wf-note--a { left: 34%; bottom: 3%; }

/* 03 Use soon */
.wf-soon .phone { left: 7%; }
.wf-soon .wf-pull--rows { right: -2%; top: 4%; --w: clamp(300px, 27vw, 360px); --r: 2deg; }
.wf-soon .wf-pull--rows .fa-list { gap: 9px; }
.wf-soon .wf-pull--rows .fa-banner { margin-bottom: 9px; }
.wf-soon .wf-note--a { right: 10%; bottom: 10%; }

/* 04 Staples + list */
.wf-list-demo .wf-pull--staples { left: 3%; top: 2%; --w: clamp(280px, 25vw, 330px); --r: -3deg; }
.wf-list-demo .wf-pull--list { right: 3%; bottom: 7%; --w: clamp(280px, 25vw, 330px); --r: 2deg; }
.wf-list-demo .wf-card .fa-title { margin-top: 0; font-size: 24px; }
.wf-list-demo .fa-shop { padding: 10px 12px; }
.wf-list-demo .wf-tickhead { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; padding: 9px 12px; border-radius: 12px; background: var(--fa-surface-2); color: var(--fa-ink-soft); font: 500 15px/1.2 var(--fa-display); }
.wf-tickhead small { margin-left: auto; font: 600 11px/1.2 var(--fa-sans); color: var(--fa-accent-press); }
.wf-list-demo .wf-note--a { left: 5%; bottom: 8%; }

/* 05 Dinner */
.wf-dinner .wf-pull--meal { left: -2%; top: 6%; --w: clamp(280px, 25vw, 330px); --r: -3deg; }
.wf-dinner .phone { right: 8%; }
.wf-dinner .wf-note--a { left: 6%; bottom: 12%; }

/* 06 Home screen */
.wf-home-demo .wf-pull--steps { right: 2%; top: 10%; --w: clamp(270px, 24vw, 320px); --r: 3deg; }
.wf-home-demo .phone { left: 10%; }
.wf-hs { position: absolute; inset: 0; background: linear-gradient(180deg, #cfe0d6, #eef3ee); padding: 80px 30px 0; }
.wf-hs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 22px; }
.wf-hs__app { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #2a3b33; }
.wf-hs__ghost { width: 100%; aspect-ratio: 1; border-radius: 23%; background: rgb(255 255 255 / 0.55); }
.wf-hs__app .fa-tile { box-shadow: 0 8px 18px rgb(38 104 75 / 0.35); }
.wf-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; padding: 8px 10px 14px; border-radius: 26px; background: var(--fa-surface); box-shadow: 0 -10px 40px rgb(0 0 0 / 0.18); }
.wf-sheet__grip { width: 40px; height: 5px; border-radius: 999px; background: var(--fa-line-strong); margin: 4px auto 10px; }
.wf-sheet__row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--fa-ink-soft); border-radius: 13px; }
.wf-sheet__row + .wf-sheet__row { border-top: 1px solid var(--fa-line); }
.wf-sheet__row.hot { background: var(--fa-accent); color: var(--fa-on-accent); border-color: transparent; }
.wf-sheet__row svg { margin-left: auto; }
.wf-browser { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--fa-bg); }
.wf-browser__bar { margin-top: auto; display: flex; align-items: center; justify-content: space-around; padding: 14px 10px 30px; background: var(--fa-surface); border-top: 1px solid var(--fa-line); color: var(--fa-accent); }
.wf-browser__bar span { color: var(--fa-ink-faint); }
.wf-ring { position: absolute; inset: -9px; border: 2.5px solid var(--fa-accent); border-radius: 50%; }

/* Get the app */
.wf-get-band { position: relative; overflow: hidden; border-radius: var(--radius-l); background: #2f7d5a; color: #fff; padding: clamp(28px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: center; isolation: isolate; }
.wf-get-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.12; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; }
.wf-get-band .label { color: rgb(255 255 255 / 0.7); }
.wf-get-band h2 { font-size: clamp(34px, 4.6vw, 64px); color: #fff; }
.wf-get-band .hl { --pen: #b9e4c9 !important; --hl-text: #18181a; color: #18181a; }
.wf-get__copy { display: grid; gap: 20px; align-content: start; }
.wf-get__copy > p { color: rgb(255 255 255 / 0.85); font-size: 17px; max-width: 44ch; }
.wf-get__row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 6px; }
.wf-get__btn { background: #fff; color: #18181a; border-color: #fff; }
.wf-get__btn:hover { background: #f2f7f3; }
.wf-get__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-qr { display: flex; align-items: center; gap: 14px; }
.wf-qr__code { width: 112px; padding: 10px; border-radius: 18px; background: #fff; }
.wf-qr p { font-size: 13.5px; line-height: 1.45; color: rgb(255 255 255 / 0.85); max-width: 16ch; }
.wf-qr p b { color: #fff; font-weight: 600; }
.wf-guide { border-radius: 24px; background: var(--fa-surface); color: var(--fa-ink); padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.45); }
.wf-guide h3 { font: 600 22px/1.2 var(--fa-display); letter-spacing: -0.01em; margin: 0 0 4px; }
.wf-guide > p { font-family: var(--fa-sans); font-size: 14px; color: var(--fa-ink-soft); margin: 0 0 16px; }
.wf-guide .fa-seg { margin-bottom: 18px; border-radius: 999px; }
.wf-guide .fa-seg button { flex: 1; padding: 9px 10px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--fa-ink-soft); }
.wf-guide .fa-seg button[aria-selected="true"] { background: var(--fa-surface); color: var(--fa-ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.08); }
.wf-guide__note { margin: 16px 0 0; font-size: 12.5px; color: var(--fa-ink-faint); font-family: var(--fa-sans); }
@media (max-width: 900px) {
  .wf-get-band { grid-template-columns: 1fr; }
}
@media (max-width: 680px) { .wf-qr { display: none; } }

/* ---------- Up close: four small breakouts ---------- */
.wf-close { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); row-gap: clamp(56px, 7vw, 96px); }
.wf-break { position: relative; margin: 0; display: grid; gap: 18px; isolation: isolate; }
.wf-break__stage { position: relative; height: clamp(300px, 28vw, 380px); display: grid; place-items: center; }
.wf-break__stage > .wf-panel { top: 12%; }
.wf-break figcaption { display: grid; gap: 4px; padding-inline: 4px; }
.wf-break figcaption b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.wf-break figcaption span { font-size: 15px; color: var(--grey-7); line-height: 1.55; max-width: 46ch; }
.wf-mark { width: clamp(150px, 14vw, 190px); padding: 0; border: 0; background: none; border-radius: 27%; cursor: pointer; filter: drop-shadow(0 30px 30px rgb(20 60 40 / 0.3)); }
.wf-mark svg { width: 100%; height: auto; display: block; }
.wf-mark-word { position: absolute; bottom: 9%; display: flex; align-items: center; gap: 10px; }
.wf-mark-word .fa-leaf { width: 30px; height: 30px; }
.wf-mark-word .fa-bt small { font-size: 15px; }
.wf-mark-word .fa-bt b { font-size: 36px; }
.wf-fan { position: relative; width: min(88%, 380px); display: grid; }
.wf-fan .fa-item { grid-area: 1 / 1; box-shadow: 0 2px 4px rgb(60 40 10 / 0.06), 0 26px 40px -18px rgb(30 50 40 / 0.35); transition: translate 0.6s var(--ease-out), rotate 0.6s var(--ease-out); }
.wf-fan .fa-item:nth-child(1) { translate: 0 -110%; rotate: -4deg; }
.wf-fan .fa-item:nth-child(2) { z-index: 2; rotate: 1deg; }
.wf-fan .fa-item:nth-child(3) { translate: 0 110%; rotate: -2deg; }
.wf-fan:hover .fa-item { rotate: 0deg; }
.wf-navbox { position: relative; zoom: 1.15; width: min(92%, 410px); height: 74px; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 40px -18px rgb(20 60 40 / 0.4); }
.wf-navbox .fa-nav { border: 1px solid var(--fa-line); border-radius: 22px; background: var(--fa-surface); padding: 0; }
.wf-navbox .fa-nav span { cursor: pointer; transition: color 0.2s; }
.wf-dotto { position: absolute; z-index: 7; width: 12px; height: 12px; border-radius: 50%; background: var(--fa-accent); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.9); opacity: 0; pointer-events: none; }
.wf-cats { display: grid; gap: 10px; width: min(80%, 330px); }
.wf-cats .fa-cat { box-shadow: 0 18px 30px -18px rgb(30 50 40 / 0.4); font-size: 18px; }
.wf-cats .fa-cat:nth-child(odd) { rotate: -1.5deg; }
.wf-cats .fa-cat:nth-child(even) { rotate: 1.2deg; translate: 18px 0; }
.wf-cats .fa-cat svg { width: 19px; height: 19px; }

/* ---------- Colour + type ---------- */
.wf-specimen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.wf-specimen > div { border-radius: var(--radius-l); padding: clamp(24px, 4vw, 48px); background: #faf7f2; box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; }
.wf-specimen .aa { font: 600 clamp(90px, 11vw, 160px)/0.85 var(--fa-display); color: #2f7d5a; letter-spacing: -0.03em; }
.wf-specimen .aa--sans { font-family: var(--fa-sans); font-weight: 700; color: #1f1b16; letter-spacing: -0.04em; }
.wf-specimen h3 { font: 600 clamp(26px, 2.6vw, 34px)/1.15 var(--fa-display); letter-spacing: -0.02em; color: #1f1b16; }
.wf-specimen h3 em { font-style: italic; font-weight: 500; color: #5a8a72; }
.wf-specimen p { font-family: var(--fa-sans); font-size: 15px; color: #6b6358; max-width: 44ch; }
.wf-specimen small { font-size: 13px; color: var(--grey-5); }
@media (max-width: 800px) { .wf-specimen { grid-template-columns: 1fr; } }

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 1100px) and (min-width: 901px) {
  .wf-pull { zoom: 0.86; }
}
@media (max-width: 900px) {
  .wf-feat, .wf-feat--flip { grid-template-columns: 1fr; gap: 28px; padding-block: 48px 64px; }
  .wf-feat--flip .wf-feat__copy { order: 0; }
  .wf-demo { min-height: 0; height: clamp(520px, 128vw, 640px); }
  .wf-receipt-demo { height: clamp(560px, 140vw, 680px); }
  .wf-panel { top: 10%; }
  .wf-demo .phone { width: clamp(180px, 50vw, 250px); bottom: 5%; }
  .wf-demo .phone.at-l, .wf-soon .phone, .wf-home-demo .phone { left: 5%; }
  .wf-dinner .phone { right: 5%; }
  .wf-pull { zoom: 0.72; }
  .wf-scan .wf-pull--flag { right: -2%; top: 18%; }
  .wf-soon .wf-pull--rows { right: -3%; top: 0; }
  .wf-list-demo .wf-pull--staples { left: -1%; top: 0; }
  .wf-list-demo .wf-pull--list { right: -1%; bottom: 4%; }
  .wf-dinner .wf-pull--meal { left: -3%; top: 0; }
  .wf-home-demo .wf-pull--steps { right: -2%; top: 4%; }
  .wf-receipt { left: 3%; top: 4%; bottom: auto; width: 62%; font-size: 11.5px; padding: 20px 16px 24px; }
  .wf-found { right: 2%; top: auto; bottom: 3%; zoom: 0.8; }
  .wf-note { font-size: 11.5px; }
  .wf-scan .wf-note--a { left: auto; top: auto; right: 3%; bottom: 6%; }
  .wf-soon .wf-note--a { right: 3%; bottom: 6%; }
  .wf-list-demo .wf-note--a, .wf-dinner .wf-note--a { display: none; }
  .wf-receipt-demo .wf-note--a { display: none; }
  .wf-close { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .wf-pull { zoom: 0.64; }
  .wf-found { zoom: 0.72; }
}

/* Phones: each demo composed for a 390 screen. Cards overlap the phone on purpose and
   overhang the panel by a few pixels at most; nothing runs off the screen. */
@media (max-width: 760px) {
  .wf-scan .wf-pull--flag { right: 1%; top: 17%; }
  .wf-soon .wf-pull--rows { right: 1%; top: 1%; }
  .wf-dinner .wf-pull--meal { left: 1%; top: 2%; }
  .wf-home-demo .wf-pull--steps { right: 1%; top: 5%; }
  .wf-receipt-demo { height: clamp(540px, 136vw, 660px); }
}

/* Reduced motion: everything sits in its finished state (the JS skips the timelines) */
@media (prefers-reduced-motion: reduce) {
  .fa-spin, .fa-typing span, .fa-caret, .fa-nav i.pulse { animation: none !important; }
}
.wf-replay[hidden] { display: none; }

/* Softer palette, matching the app: warm cream with its food-group pastels; green kept for buttons and the logo */
body { --project-pen: #f1d9c7; }
.wf-panel--sand  { background: radial-gradient(110% 120% at 85% 0%, #faf5ec 0%, #f4ecdd 60%, #ece1cc 100%); }
.wf-panel--blush { background: radial-gradient(110% 120% at 15% 0%, #fcf4f2 0%, #f7ebe9 60%, #f0dcd8 100%); }
.wf-panel--sky   { background: radial-gradient(110% 120% at 85% 0%, #f6f8fd 0%, #eef2fa 60%, #dfe7f5 100%); }
.wf-panel--sage  { background: radial-gradient(110% 120% at 15% 0%, #f5f9f3 0%, #eaf3e8 60%, #dcead9 100%); }
.wf-panel--teal  { background: radial-gradient(110% 120% at 85% 0%, #f4f9fa 0%, #e7f1f3 60%, #d8e8ec 100%); }
.wf-panel--sand::before, .wf-panel--blush::before, .wf-panel--sky::before, .wf-panel--sage::before, .wf-panel--teal::before { opacity: 0.5; }
.wf-get-band { background: radial-gradient(120% 140% at 85% 0%, #fbf7f0 0%, #f3eee4 55%, #ece3d3 100%); color: var(--fa-ink, #1f1b16); }
.wf-get-band::before { background-image: radial-gradient(circle, #d8cfbe 1.5px, transparent 2px); opacity: 0.5; }
.wf-get-band .label { color: var(--fa-ink-soft, #6b6358); }
.wf-get-band .hl { --pen: #f1d9c7 !important; }
.wf-get-band h2 { color: var(--fa-ink, #1f1b16); }
.wf-get__copy > p, .wf-qr p { color: var(--fa-ink-soft, #6b6358); }
.wf-qr p b { color: var(--fa-ink, #1f1b16); }
.wf-get__btn { background: #2f7d5a; color: #fff; border-color: #2f7d5a; }
.wf-get__btn:hover { background: #28694c; }
.wf-qr__code { box-shadow: 0 0 0 1px #e7e0d3; }
.wf-guide { box-shadow: 0 30px 50px -30px rgb(60 40 20 / 0.3); }

/* ---------- Visual-first pass: bold titles, live phones, compact details ---------- */
/* Feature run: a step number, a big title, a tiny label, then the demo does the talking */
.wf-feat { padding-block: clamp(40px, 6vw, 96px); }
.wf-feat__copy { gap: 14px; }
.wf-feat__copy h2 { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -0.045em; line-height: 1; }
.wf-sub { margin: 0; font-size: 15px; font-weight: 500; color: var(--grey-7); }
.wf-run-head h2 { font-size: clamp(40px, 6vw, 84px); }
@media (max-width: 900px) {
  .wf-feat, .wf-feat--flip { gap: 20px; padding-block: 36px 44px; }
}

/* Carousel phones: always crisp here (no blur on the phone that's leaving) */
.parade .phone { filter: none !important; }
/* A walkthrough over each screenshot: a flick that scrolls and bounces, then a tap */
.wf-live { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wf-live__body { position: absolute; inset: 0; overflow: hidden; clip-path: inset(9.5% 0 9.5% 0); background: #faf7f2; }
.wf-live__body img { display: block; width: 100%; height: 100%; will-change: transform; }
.wf-live__ring { position: absolute; border: 0.7cqw solid #2f7d5a; border-radius: 3cqw; background: rgb(47 125 90 / 0.08); box-shadow: 0 0 0 1.4cqw rgb(47 125 90 / 0.14); }
.wf-live__ripple { position: absolute; width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; border-radius: 50%; background: rgb(47 125 90 / 0.35); }
.wf-live__finger { position: absolute; width: 10cqw; height: 10cqw; border-radius: 50%; background: rgb(24 24 26 / 0.22); border: 0.6cqw solid rgb(255 255 255 / 0.9); box-shadow: 0 1cqw 3cqw rgb(0 0 0 / 0.2); }
.wf-live__toast { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; display: flex; align-items: center; gap: 1.6cqw; white-space: nowrap; padding: 2.4cqw 4cqw; border-radius: 99px; background: #1f1b16; color: #fff; font: 600 3.6cqw/1 var(--fa-sans); box-shadow: 0 2cqw 5cqw -1cqw rgb(0 0 0 / 0.35); }
.wf-live__toast svg { width: 3.8cqw; height: 3.8cqw; color: #b9e4c9; }

/* Get the app: the copy, and the QR code on its own beside it */
@media (min-width: 901px) { .wf-get-band { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.wf-qr--big { flex-direction: column; align-items: center; justify-self: center; text-align: center; gap: 16px; }
.wf-qr--big .wf-qr__code { width: clamp(150px, 14vw, 196px); box-shadow: 0 30px 50px -28px rgb(60 40 20 / 0.45), 0 0 0 1px #e7e0d3; }
.wf-qr--big p { max-width: 22ch; }

@media (max-width: 760px) {

  /* 04 The usuals: the two cards stacked and centred, a slight overlap, the panel
     cut to fit, and the toast below them */
  .wf-list-demo { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 0 64px; }
  .wf-list-demo .wf-panel { top: 30px; }
  .wf-list-demo .wf-pull { position: relative; inset: auto; zoom: 0.8; --w: 330px; }
  .wf-list-demo .wf-pull--staples { --r: -2deg; }
  .wf-list-demo .wf-pull--list { margin-top: -4px; --r: 1.5deg; }
  .wf-list-demo .wf-tickhead { white-space: nowrap; font-size: 14px; }
  .wf-list-demo .wf-tickhead small { font-size: 10.5px; }
  .wf-list-demo .fa-toast { left: 50% !important; bottom: 16px !important; font-size: 13px; }
}

/* ---------- The clever bits: four tiles, each a piece of the app at its own size,
   scaled to fill the tile (data-fit), playing on a loop ---------- */
.wf-close { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.wf-break { gap: 12px; }
.wf-break figcaption b { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.wf-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; background: var(--fa-bg); box-shadow: inset 0 0 0 1px #e7e0d3, 0 30px 50px -34px rgb(60 40 20 / 0.45); isolation: isolate; }
.wf-tile__ui { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; overflow: hidden; }
.wf-tile__ui .fa-title { margin: 6px 18px 12px; font-size: 32px; }
.wf-tile__ui .fa-seg { margin: 0 18px 14px; }
.wf-ttoast { bottom: 22px; }
@media (max-width: 1100px) { .wf-close { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .wf-close { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .wf-close::-webkit-scrollbar { display: none; }
  .wf-break { flex: 0 0 80%; scroll-snap-align: center; }
}
/* Step-by-step: the method sheet */
.wf-method { padding: 6px 22px 0; background: var(--fa-surface); }
.wf-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--fa-line-strong); margin: 6px auto 14px; }
.wf-m-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wf-m-head h4, .wf-m-head :where(.fa-h4) { margin: 0; font: 600 25px/1.15 var(--fa-display); letter-spacing: -0.02em; }
.wf-serves { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; font-size: 14px; color: var(--fa-ink-soft); }
.wf-stepper { display: inline-flex; align-items: center; gap: 12px; }
.wf-stepper i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--fa-line-strong); background: var(--fa-surface); color: var(--fa-accent-press); display: grid; place-items: center; font: 400 20px/1 var(--fa-sans); font-style: normal; }
.wf-stepper b { display: inline-block; min-width: 18px; text-align: center; font-size: 18px; color: var(--fa-ink); font-variant-numeric: tabular-nums; }
.wf-m-time { margin: 0 0 12px; font-size: 13.5px; color: var(--fa-ink-faint); }
.wf-method h5, .wf-method :where(.fa-h5) { margin: 0 0 8px; font: 600 18px/1.2 var(--fa-display); }
.wf-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 7px; }
.wf-steps li { counter-increment: st; position: relative; padding: 10px 12px 10px 46px; border-radius: 14px; font-size: 14.5px; line-height: 1.4; color: var(--fa-ink-soft); background: var(--fa-surface-2); transition: background 0.35s, color 0.35s; }
.wf-steps li::before { content: counter(st); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--fa-surface); color: var(--fa-ink-soft); font: 700 12px/1 var(--fa-sans); transition: background 0.35s, color 0.35s; }
.wf-steps li.on { background: var(--fa-accent-soft); color: var(--fa-ink); box-shadow: inset 3px 0 0 var(--fa-accent); }
.wf-steps li.on::before, .wf-steps li.done::before { background: var(--fa-accent); color: var(--fa-on-accent); }
.wf-steps li.done { color: var(--fa-ink-faint); }
.wf-safety { display: flex; gap: 6px; margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--fa-ink-faint); }
.wf-safety svg { flex: none; margin-top: 2px; color: var(--fa-warn); }
/* Saved meals: a stack of cards */
.wf-mstack { position: relative; margin: 0 18px; height: 290px; }
.wf-mcard { position: absolute; left: 0; right: 0; top: 0; padding: 14px 15px 12px; border-radius: 18px; background: var(--fa-surface); border: 1px solid var(--fa-line); box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 18px 30px -18px rgb(60 40 10 / 0.35); transform-origin: 50% 0; }
.wf-mcard__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.wf-mcard h4, .wf-mcard :where(.fa-h4) { margin: 0 0 4px; font: 600 17px/1.25 var(--fa-display); }
.wf-mcard p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.4; }
.wf-mcard .fa-uses { font-size: 12px; color: var(--fa-ink-faint); }
.wf-mcard__foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--fa-line); }
.wf-cooked { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--fa-line-strong); font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); transition: background 0.2s, color 0.2s; }
.wf-cooked.on { background: var(--fa-accent); color: var(--fa-on-accent); border-color: var(--fa-accent); }
.wf-mcard__foot small { margin-left: auto; font-size: 11.5px; color: var(--fa-ink-faint); white-space: nowrap; }
/* Freeze it */
.wf-freeze .fa-cat, .wf-fz-list { margin-inline: 16px; }
.wf-fz-cat { margin-top: 6px; font-size: 16px; padding: 9px 13px; }
.wf-fz-list { display: grid; gap: 8px; margin-block: 8px 10px; }
.wf-fz-list .fa-item { box-shadow: 0 1px 2px rgb(60 40 10 / 0.05); }
.wf-fz-slot { height: 0; }
.fa-tag.freezer-t { background: #e7f0f8; color: #3d6f99; }
.wf-freeze .fa-exp em { font-style: normal; }
/* Coach tips */
.wf-coachbox { position: relative; margin: 0 16px; height: 128px; }
.wf-coachbox .coach-tip { position: absolute; inset: 0 0 auto; display: flex; gap: 10px; align-items: flex-start; background: var(--fa-accent-soft); border: 1px solid #cfe5d6; border-left: 3px solid var(--fa-accent); border-radius: 14px; padding: 12px 12px 12px 13px; box-shadow: 0 10px 24px -14px rgb(30 60 40 / 0.45); }
.coach-ico { font-size: 19px; line-height: 1.25; flex: none; }
.coach-body { flex: 1; min-width: 0; }
.coach-title { display: block; font-size: 14.5px; font-weight: 700; color: var(--fa-ink); }
.coach-text { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--fa-accent-press); }
.coach-x { flex: none; color: var(--fa-accent-press); opacity: 0.6; }
.wf-ghost { display: grid; gap: 9px; margin: 14px 16px 0; }
.wf-ghost i { height: 54px; border-radius: 14px; background: var(--fa-surface); border: 1px solid var(--fa-line); }
.wf-cdots { position: absolute; left: 0; right: 0; bottom: 86px; display: flex; justify-content: center; gap: 6px; }
.wf-cdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--fa-line-strong); transition: background-color 0.3s, transform 0.3s; }
.wf-cdots i.on { background: var(--fa-accent); transform: scale(1.3); }
.wf-tnav span { transition: color 0.3s; }
/* Static fallbacks (reduced motion / no JS): the stack and the first tip */
.wf-mcard:nth-child(1) { z-index: 3; }
.wf-mcard:nth-child(2) { z-index: 2; transform: translateY(26px) scale(0.94); }
.wf-mcard:nth-child(3) { z-index: 1; transform: translateY(52px) scale(0.88); }
.wf-coachbox .coach-tip:not(:first-child) { visibility: hidden; }
.wf-freeze .fa-toast { font-size: 13px; }

/* Phone parade: desktop only. One tidy row, a bold caption under each phone;
   hidden on phones, where the features below show the app in detail */
.wf-parade-sec { padding-block: clamp(24px, 4vw, 64px); }
.wf-parade { padding-block: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px); }
.wf-parade .parade__row .phone:nth-child(even) { margin-top: 0; }
.wf-parade .parade__caption { margin-top: 22px; text-transform: none; letter-spacing: -0.01em; font-size: 15px; font-weight: 600; color: var(--ink, #18181a); }
@media (max-width: 760px) { .wf-parade-sec { display: none; } }

/* ---------- 05 Dinner: the centrepiece. Three acts, a phone in the middle,
   a card either side that follows along ---------- */
.wf-cook { display: block; }
.wf-cook .wf-feat__copy { margin-bottom: 18px; }
.wf-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(18px, 2.4vw, 30px); }
.wf-acts span { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 9px 7px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--grey-5, #888); overflow: hidden; transition: color 0.3s, box-shadow 0.3s; }
.wf-acts b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-1); color: #18181a; font-size: 11px; transition: background-color 0.3s; }
.wf-acts span.on { color: #18181a; box-shadow: 0 0 0 1.5px #18181a; }
.wf-acts span.on b { background: var(--project-pen); }
.wf-acts i { position: absolute; left: 16px; right: 16px; bottom: 3px; height: 2px; border-radius: 2px; background: rgb(0 0 0 / 0.08); overflow: hidden; }
.wf-acts em { position: absolute; inset: 0; background: #18181a; transform-origin: 0 50%; transform: scaleX(0); }
.wf-cook__stage { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(16px, 2.2vw, 34px); align-items: center; }
.wf-cook__mid { position: relative; isolation: isolate; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 48px); }
.wf-cook__mid .wf-panel { top: 0; }
.wf-cook__ph.phone { position: relative; width: clamp(250px, 22vw, 310px); box-shadow: none; filter: drop-shadow(0 40px 50px rgb(20 60 40 / 0.25)); }
.wf-cook__col { display: grid; align-items: center; grid-row: 1; }
.wf-cook__col--l { grid-column: 1; }
.wf-cook__mid { grid-column: 2; grid-row: 1; }
.wf-cook__col--r { grid-column: 3; }
.wf-ccard { grid-area: 1 / 1; border-radius: 20px; background: var(--fa-surface); border: 1px solid var(--fa-line); padding: 16px 16px 14px; box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 30px 44px -26px rgb(30 50 40 / 0.4); visibility: hidden; }
.wf-ccard[data-act="1"] { visibility: visible; }
.wf-cook__col--l .wf-ccard { rotate: -1.2deg; }
.wf-cook__col--r .wf-ccard { rotate: 1.2deg; }
/* You have / Used up */
.wf-hrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--fa-line); }
.wf-hrow b { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.wf-hrow .fa-meta { gap: 6px; font-size: 12px; }
.wf-tickbox { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--fa-line-strong); display: grid; place-items: center; color: transparent; transition: background-color 0.25s, border-color 0.25s, color 0.25s; }
.wf-tickbox.on { background: var(--fa-accent); border-color: var(--fa-accent); color: #fff; }
.wf-usesup { padding: 4px 9px; border-radius: 999px; background: var(--fa-warn-soft); color: var(--fa-warn); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.wf-hused { padding: 6px 9px; font-size: 11px; }
[data-act="1"] .wf-hused, [data-act="3"] .wf-usesup, [data-act="3"] .wf-tickbox { display: none; }
[data-act="3"] .wf-hrow { grid-template-columns: minmax(0, 1fr) auto; }
/* You need: the chip and the list it drops onto */
.wf-minilist { border-radius: 14px; background: var(--fa-surface-2); padding: 12px; display: grid; gap: 7px; }
.wf-minilist h4, .wf-minilist :where(.fa-h4) { margin: 0 0 2px; font: 600 17px/1.2 var(--fa-display); }
.wf-minilist .fa-shop { padding: 8px 10px; gap: 10px; grid-template-columns: auto minmax(0, 1fr); }
.wf-minilist .fa-shop + .fa-shop { margin-top: 0; }
.wf-minilist .fa-box { width: 20px; height: 20px; border-radius: 6px; }
.wf-minilist .fa-shop b { font-size: 14px; }
.fa-buy-chip em { font-style: normal; }
/* Ingredients, scaled by Cooking for */
.wf-ing { list-style: none; margin: 0 0 12px; padding: 0; }
.wf-ing li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-bottom: 1px solid var(--fa-line); border-radius: 8px; font-size: 14px; transition: background-color 0.3s; }
.wf-ing li b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fa-accent-press); }
.wf-ing li.hl { background: var(--fa-accent-soft); }
.wf-ing--lg li { font-size: 15px; padding-block: 9px; }
/* How to make it: the step, big */
.wf-stepnum { display: flex; align-items: baseline; gap: 8px; }
.wf-stepnum b { font: 600 54px/1 var(--fa-display); color: var(--fa-accent); }
.wf-stepnum span { font-size: 14px; color: var(--fa-ink-soft); font-weight: 600; }
.wf-stepnum .wf-steptime { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: var(--fa-surface-2); font-size: 12.5px; }
.wf-stepbar { display: flex; gap: 5px; margin: 12px 0 14px; }
.wf-stepbar i { flex: 1; height: 5px; border-radius: 5px; background: var(--fa-line); overflow: hidden; position: relative; }
.wf-stepbar i::after { content: ""; position: absolute; inset: 0; background: var(--fa-accent); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.wf-steptext { display: grid; min-height: 7.2em; }
.wf-steptext p { grid-area: 1 / 1; margin: 0; font: 500 21px/1.35 var(--fa-display); color: var(--fa-ink); visibility: hidden; }
.wf-steptext p:first-child { visibility: visible; }
.wf-steptext mark { background: var(--fa-accent-soft); color: var(--fa-accent-press); padding: 0 4px; border-radius: 6px; }
/* Cooked */
.wf-done { display: grid; gap: 8px; justify-items: start; padding: 4px 0 12px; }
.wf-done b { font: 600 19px/1.25 var(--fa-display); }
.wf-done small { font-size: 12.5px; color: var(--fa-ink-faint); }
.wf-leftover { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #e7f0f8; color: #3d6f99; font-size: 13.5px; font-weight: 600; }
/* Inside the phone: the method sheet slides up over the Ask screen */
.wf-msheet { position: absolute; left: 0; right: 0; top: 58px; bottom: 0; z-index: 7; padding: 4px 20px 0; border-radius: 26px 26px 0 0; background: var(--fa-surface); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.16); visibility: hidden; }
.wf-msheet .wf-m-head h4, .wf-msheet .wf-m-head :where(.fa-h4) { font-size: 23px; }
.wf-update, .wf-writing { position: absolute; left: 20px; right: 20px; top: 148px; visibility: hidden; }
.wf-writing { display: flex; align-items: center; gap: 10px; color: var(--fa-ink-soft); font-size: 14px; }
.wf-recipe { position: absolute; left: 20px; right: 20px; top: 140px; bottom: 0; overflow: hidden; visibility: hidden; }
.wf-recipe h5, .wf-recipe :where(.fa-h5) { margin: 4px 0 6px; font: 600 17px/1.2 var(--fa-display); }
.wf-steps--sm { gap: 6px; }
.wf-steps--sm li { font-size: 13.5px; padding: 9px 10px 9px 42px; }
.wf-steps--sm li::before { left: 10px; top: 8px; width: 22px; height: 22px; }
.wf-m-tip { display: flex; gap: 7px; margin: 10px 0; padding: 10px 12px; border-radius: 12px; background: var(--fa-accent-soft); color: var(--fa-accent-press); font-size: 13px; }
.wf-cook__toast { bottom: 92px; white-space: normal; width: 330px; justify-content: center; text-align: center; font-size: 13.5px; opacity: 0; }
.wf-cook__app .fa-meal { box-shadow: 0 2px 6px rgb(60 40 10 / 0.06); }
.wf-cook__saved { position: relative; }
.fa-mini.is-press, .fa-buy-chip.is-press, .wf-cooked.is-press, .wf-stepper i.is-press, .fa-btn.is-press { transform: scale(0.92); background: var(--fa-accent-soft); }
@media (max-width: 1100px) and (min-width: 761px) {
  .wf-cook__stage { grid-template-columns: auto minmax(0, 1fr); }
  .wf-cook__mid { grid-column: 1; grid-row: 1 / span 2; }
  .wf-cook__col--l { grid-column: 2; grid-row: 1; }
  .wf-cook__col--r { grid-column: 2; grid-row: 2; }
}
@media (max-width: 760px) {
  .wf-cook__stage { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wf-cook__mid, .wf-cook__col--l, .wf-cook__col--r { grid-column: 1; grid-row: auto; }
  .wf-cook__mid { padding: 22px 0; display: grid; justify-items: center; }
  .wf-cook__ph.phone { width: min(64vw, 260px); }
  .wf-acts span { font-size: 12.5px; padding: 6px 12px 8px 6px; }
  .wf-ccard { padding: 14px; }
  .wf-steptext p { font-size: 19px; }
  .wf-stepnum b { font-size: 44px; }
}

/* ---------- In detail: the standout features, one band each ---------- */
.wf-deephead { padding-block: clamp(36px, 5vw, 72px) 0; display: grid; gap: 10px; }
.wf-deephead h2 { font-size: clamp(42px, 5.4vw, 80px); letter-spacing: -0.045em; line-height: 1; }
.wf-deep { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(28px, 4vw, 64px); }
.wf-deep--flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.wf-deep--flip .wf-deep__copy { order: 2; }
.wf-deep__copy { display: grid; gap: 14px; align-content: center; }
.wf-deep__copy h2 { font-size: clamp(40px, 4.6vw, 70px); letter-spacing: -0.045em; line-height: 1; }
.wf-step--in b { background: #18181a; color: #fff; }
.wf-step--in b svg { fill: none; stroke: currentColor; stroke-width: 2; }
.wf-deep__stage { position: relative; isolation: isolate; padding: clamp(40px, 4vw, 60px) clamp(18px, 3vw, 44px); }
.wf-deep__stage > .wf-panel { top: 0; }
.wf-call { position: absolute; z-index: 6; left: var(--x); top: var(--y); display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; background: #18181a; color: #fff; font: 500 12.5px/1.3 var(--font); white-space: nowrap; box-shadow: 0 14px 30px -12px rgb(0 0 0 / 0.5); }
.wf-call i { position: relative; width: 18px; height: 18px; flex: none; }
.wf-call i::before, .wf-call i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--project-pen); }
.wf-call i::after { animation: credit-pulse 1.6s ease-out infinite; }
.wf-deep .wf-card { box-shadow: 0 2px 4px rgb(60 40 10 / 0.05), 0 30px 44px -26px rgb(30 50 40 / 0.4); }
/* Freshness */
.wf-fresh { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wf-fresh__main { padding: 18px; rotate: -0.8deg; }
.wf-fresh__side { rotate: 1.2deg; }
.wf-fresh__now { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.wf-fresh__now b { font: 600 40px/1 var(--fa-display); letter-spacing: -0.02em; }
.wf-fpill { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--fa-accent-soft); color: var(--fa-accent-press); transition: background-color 0.3s, color 0.3s; }
.wf-fpill.is-soon { background: var(--fa-warn-soft); color: var(--fa-warn); }
.wf-fpill.is-past { background: var(--fa-danger-soft); color: var(--fa-danger); }
.wf-fpill.is-frozen { background: #e7f0f8; color: #3d6f99; }
.wf-track { position: relative; height: 40px; margin: 0 6px; }
.wf-track::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 10px; background: var(--fa-surface-2); box-shadow: inset 0 0 0 1px var(--fa-line); }
.wf-track__fill { position: absolute; left: 0; right: 0; top: 6px; height: 10px; border-radius: 10px; background: var(--fa-accent); transform-origin: 0 50%; transform: scaleX(0); transition: background-color 0.3s; }
.wf-track.is-soon .wf-track__fill { background: var(--fa-warn); }
.wf-track.is-past .wf-track__fill { background: var(--fa-danger); }
.wf-track.is-frozen .wf-track__fill { background: #4a86b8; }
.wf-track__dot { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--fa-accent), 0 4px 10px rgb(0 0 0 / 0.2); }
.wf-track i { position: absolute; top: 22px; width: 1px; height: 6px; background: var(--fa-line-strong); }
.wf-track i b { position: absolute; top: 7px; left: 0; translate: -50% 0; font: 600 10.5px/1 var(--fa-sans); color: var(--fa-ink-faint); }
.wf-track__ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--fa-ink-soft); }
.wf-track__ends span { display: inline-flex; align-items: center; gap: 5px; }
.wf-life { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wf-life li { display: flex; align-items: center; justify-content: space-between; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; font-size: 13.5px; transition: background-color 0.3s; }
.wf-life li b { font-weight: 700; }
.wf-life li.on { background: var(--fa-accent-soft); }
/* Usuals */
.wf-learn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wf-cal { rotate: -1deg; }
.wf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wf-cal__d { position: relative; aspect-ratio: 1; border-radius: 10px; background: var(--fa-surface-2); display: grid; place-items: start center; padding-top: 4px; transition: background-color 0.3s; }
.wf-cal__d small { font-size: 10px; font-weight: 700; color: var(--fa-ink-faint); }
.wf-cal__d::after { content: "Milk"; position: absolute; left: 50%; bottom: 5px; translate: -50% 0; font-size: 9.5px; font-weight: 700; color: #fff; opacity: 0; transition: opacity 0.3s; }
.wf-cal__d.on { background: #46618c; }
.wf-cal__d.on small { color: rgb(255 255 255 / 0.75); }
.wf-cal__d.on::after { opacity: 1; }
.wf-cal__count { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--fa-ink-soft); font-weight: 600; }
.wf-cal__count b { font: 600 34px/1 var(--fa-display); color: var(--fa-ink); min-width: 22px; }
.wf-usual { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: var(--fa-accent); color: #fff; font-size: 12.5px; font-weight: 700; }
.wf-learn__stack { display: grid; gap: 12px; rotate: 1deg; }
.wf-learn__stack .fa-item { box-shadow: 0 18px 30px -20px rgb(30 50 40 / 0.4); }
.wf-learn__stack .fa-staples { box-shadow: 0 18px 30px -20px rgb(30 50 40 / 0.4); }
/* The list files itself */
.wf-file { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.wf-file__list { rotate: -1deg; }
.wf-file__list .fa-title { margin: 0; font-size: 26px; }
.wf-file__list .fa-shop { padding: 10px 12px; }
.wf-file__list .fa-shop.done b { color: var(--fa-ink-faint); text-decoration: line-through; }
.wf-file__dest { display: grid; gap: 10px; }
.wf-dest { box-shadow: 0 16px 26px -18px rgb(30 50 40 / 0.45); font-size: 18px; }
.wf-tickhead2 { display: inline-flex; justify-self: start; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line); color: var(--fa-accent-press); font-size: 12.5px; font-weight: 700; }
.wf-fly { position: absolute; z-index: 8; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; background: var(--fa-accent); color: #fff; font: 700 13px/1 var(--fa-sans); white-space: nowrap; pointer-events: none; box-shadow: 0 10px 20px -8px rgb(30 60 40 / 0.5); }
/* Offline + install */
.wf-off { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.wf-off__phone { width: 300px; border-radius: 40px; border: 9px solid #111; background: var(--fa-bg); overflow: hidden; box-shadow: 0 40px 50px -28px rgb(30 20 20 / 0.5); }
.wf-off__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 22px 6px; font-size: 14px; }
.wf-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.wf-sig i { width: 3px; border-radius: 1px; background: #111; transition: background-color 0.3s; }
.wf-sig i:nth-child(1) { height: 4px; } .wf-sig i:nth-child(2) { height: 6px; } .wf-sig i:nth-child(3) { height: 9px; } .wf-sig i:nth-child(4) { height: 12px; }
.wf-sig.is-off i { background: #c9c3b8; }
.wf-off__body { padding: 6px 16px 22px; display: grid; gap: 8px; min-height: 330px; align-content: start; }
.wf-off__body .fa-title { margin: 4px 0 4px; font-size: 26px; }
.wf-sync { display: flex; gap: 9px; align-items: flex-start; padding: 11px 12px; border-radius: 13px; background: var(--fa-warn-soft); border: 1px solid #ecc7ab; color: var(--fa-warn); font-size: 12.5px; line-height: 1.4; }
.wf-sync span { color: var(--fa-ink); }
.wf-off .fa-shop.done b { color: var(--fa-ink-faint); text-decoration: line-through; }
.wf-off > .wf-net, .wf-off > .wf-a2hs { grid-column: 2; }
.wf-off { grid-template-rows: auto auto; }
.wf-off__phone { grid-row: 1 / span 2; }
.wf-net { display: grid; justify-items: start; align-self: end; }
.wf-net > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; font-size: 14px; font-weight: 700; box-shadow: 0 14px 26px -16px rgb(0 0 0 / 0.4); }
[data-netoff] { background: #fff; color: var(--fa-danger); }
[data-netoff] i { width: 9px; height: 9px; border-radius: 50%; background: var(--fa-danger); }
[data-neton] { background: var(--fa-accent); color: #fff; visibility: hidden; }
.wf-a2hs { align-self: start; max-width: 300px; padding: 8px 10px 12px; border-radius: 24px; background: var(--fa-surface); box-shadow: 0 30px 44px -26px rgb(0 0 0 / 0.4); rotate: 1.5deg; }
@media (max-width: 900px) {
  .wf-deep, .wf-deep--flip { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 22px 28px; }
  .wf-deep--flip .wf-deep__copy { order: 0; }
  .wf-deep__stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 22px 12px 18px; }
  .wf-deep__stage > .fa { flex: 0 0 100%; margin-bottom: 8px; }
  .wf-call { position: static; font-size: 12px; }
  .wf-fresh, .wf-learn, .wf-file { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wf-fresh__side { display: none; }
  .wf-file { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
  .wf-file .fa-shop { padding: 8px 9px; gap: 8px; }
  .wf-file .fa-shop b { font-size: 13.5px; }
  .wf-file .fa-shop i { display: none; }
  .wf-file .fa-box { width: 22px; height: 22px; }
  .wf-dest { font-size: 15px; padding: 9px 10px; gap: 7px; }
  .wf-file__dest .wf-card__k { font-size: 10px; }
  .wf-tickhead2 { font-size: 11px; padding: 6px 9px; }
  .wf-off { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wf-off__phone { grid-row: auto; width: min(100%, 290px); }
  .wf-off > .wf-net, .wf-off > .wf-a2hs { grid-column: 1; justify-self: center; }
  .wf-a2hs { width: min(100%, 290px); }
}

/* ---------- Overlays: extra rebuilt pieces layered around each demo ---------- */
.wf-ov { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--w); pointer-events: none; filter: drop-shadow(0 18px 22px rgb(30 50 40 / 0.2)); }
.wf-ov > * { rotate: var(--r); }
.wf-ovchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--fa-surface); border: 1px solid var(--fa-line-strong); font-size: 13px; font-weight: 700; color: var(--fa-ink); white-space: nowrap; }
.wf-ovchip svg { color: var(--fa-accent); }
.wf-ovchip.is-green { background: var(--fa-accent); border-color: var(--fa-accent); color: #fff; }
.wf-ovchip.is-green svg { color: #fff; }
.wf-ovchip.is-blue { background: #e7f0f8; border-color: #c9dcee; color: #3d6f99; }
.wf-ovchip.is-blue svg { color: #4a86b8; }
.wf-ovchip.is-warn { background: var(--fa-warn-soft); border-color: #ecc7ab; color: #7c4a23; }
.wf-ovchip.is-warn svg { color: var(--fa-warn); }
.wf-ov .fa-item { padding: 11px 13px; }
.wf-ovphoto { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #e9dfcf; border: 4px solid #fff; }
.wf-ovphoto i { position: absolute; border-radius: 50%; filter: blur(12px); opacity: 0.9; }
.wf-box { position: absolute; border: 2px solid #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgb(47 125 90 / 0.6); }
.wf-box em { position: absolute; left: -2px; top: -2px; translate: 0 -100%; padding: 2px 6px; border-radius: 6px 6px 6px 0; background: var(--fa-accent); color: #fff; font: 700 9.5px/1.3 var(--fa-sans); font-style: normal; white-space: nowrap; }
.wf-box.is-unsure { border-style: dashed; box-shadow: 0 0 0 1px rgb(191 100 50 / 0.6); }
.wf-box.is-unsure em { background: var(--fa-warn); }
@media (max-width: 760px) {
  .wf-ov { left: var(--xs); top: var(--ys); zoom: 0.74; }
  .wf-ov--desk { display: none; }
}

/* ---------- Tighter rhythm, and a thread joining the five steps ---------- */
.wf-feat { position: relative; padding-block: clamp(26px, 4vw, 64px); }
.wf .section { padding-block: clamp(40px, 6vw, 86px); }
.wf .section--tight { padding-block: clamp(26px, 4vw, 48px); }
.wf-hero + .wf-parade-sec { padding-top: 0; }
#snap { padding-top: clamp(20px, 3vw, 44px); }
/* the thread: a dashed line from one step to the next, with a dot where it lands */
.wf-feat + .wf-feat::before { content: ""; position: absolute; left: 50%; top: calc(-1 * clamp(14px, 2vw, 30px)); height: clamp(36px, 5vw, 70px); border-left: 2px dashed #d8cfbe; translate: -1px 0; }
.wf-feat + .wf-feat::after { content: ""; position: absolute; left: 50%; top: calc(clamp(36px, 5vw, 70px) - clamp(14px, 2vw, 30px)); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--project-pen); box-shadow: 0 0 0 4px #fff; }
@media (max-width: 900px) {
  .wf-feat, .wf-feat--flip { padding-block: 22px 26px; gap: 14px; }
  .wf-feat + .wf-feat::before { left: 30px; top: -12px; height: 34px; }
  .wf-feat + .wf-feat::after { left: 30px; top: 20px; }
  .wf-feat + .wf-feat { padding-top: 40px; }
  .wf .section { padding-block: 32px; }
  .wf .section--tight { padding-block: 22px; }
}

/* ---------- In detail, take two: each band is one card, title ~38%, demo ~62% ---------- */
.wf-deepw { padding-block: clamp(8px, 1vw, 14px); }
.wf-deep, .wf-deep--flip { position: relative; isolation: isolate; grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.4vw, 52px); min-height: 560px; border-radius: var(--radius-l); overflow: hidden; }
.wf-deep--flip { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
.wf-deep::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); background-size: 24px 24px; pointer-events: none; }
.wf-deep--sky { background: radial-gradient(110% 120% at 85% 0%, #f6f8fd 0%, #eef2fa 60%, #dfe7f5 100%); }
.wf-deep--sage { background: radial-gradient(110% 120% at 15% 0%, #f5f9f3 0%, #eaf3e8 60%, #dcead9 100%); }
.wf-deep--sand { background: radial-gradient(110% 120% at 85% 0%, #faf5ec 0%, #f4ecdd 60%, #ece1cc 100%); }
.wf-deep--blush { background: radial-gradient(110% 120% at 15% 0%, #fcf4f2 0%, #f7ebe9 60%, #f0dcd8 100%); }
.wf-deep__copy { padding-inline: clamp(0px, 1vw, 12px); }
.wf-deep__stage { padding: 64px 0; }
.wf-deephead { padding-bottom: clamp(14px, 2vw, 24px); }
/* annotation chips with a leader line to the detail they mean (placed by the script) */
.wf-call { left: 0; top: 0; font-size: 14.5px; padding: 10px 16px 10px 11px; gap: 9px; }
.wf-call i { width: 20px; height: 20px; }
.wf-lead { position: absolute; left: var(--lx, 50%); top: var(--ly, 0); width: var(--ll, 0); height: 2px; background: #18181a; transform-origin: 0 50%; rotate: var(--la, 0deg); pointer-events: none; }
.wf-lead::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #18181a; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.85); }
/* demos scaled up to fill their card */
.wf-off__phone { width: 330px; }
.wf-off__body { min-height: 430px; }
.wf-off__body .fa-shop { padding: 13px 14px; }
.wf-off .wf-net > span { font-size: 15px; padding: 12px 18px; }
.wf-a2hs { max-width: 330px; }
.wf-a2hs .wf-sheet__row { font-size: 16px; }
.wf-off { column-gap: 28px; }
.wf-learn__stack .fa-item, .wf-learn__stack .fa-staples { font-size: 1.04em; }
.wf-cal__d small { font-size: 11px; }
@media (max-width: 1100px) {
  .wf-fresh { grid-template-columns: minmax(0, 1fr); }
  .wf-fresh__side { display: none; }
  .wf-off__phone { width: 290px; }
  .wf-deep h2 { font-size: clamp(36px, 4.2vw, 56px); }
}
@media (max-width: 900px) {
  .wf-deep, .wf-deep--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 22px 14px 18px; gap: 10px; }
  .wf-deep__stage { padding: 6px 0 0; }
  .wf-call { font-size: 12.5px; padding: 8px 13px 8px 9px; }
  .wf-lead { display: none; }
  .wf-off__phone { width: min(100%, 290px); }
  .wf-off__body { min-height: 330px; }
}

/* ==========================================================================
   The timeline: the five steps and the standout features run down one line
   in the middle (desktop), each item a demo on one side and its title on the
   other, alternating. Phones: the same line and nodes on the left.
   ========================================================================== */
.wf-feat + .wf-feat::before, .wf-feat + .wf-feat::after { display: none; }
.wf-tl { position: relative; --tl-x: 50%; padding-block: clamp(12px, 2vw, 28px) clamp(24px, 3vw, 48px); }
.wf-tl__line { position: absolute; z-index: 0; left: var(--tl-x); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ebe4d8; pointer-events: none; }
.wf-tl__line i { position: absolute; inset: 0; background: linear-gradient(#2f7d5a, #7bb497); transform-origin: 50% 0; transform: scaleY(0); }
.wf-node { position: absolute; z-index: 4; left: var(--tl-x); top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 2px #18181a, 0 0 0 8px #fff; font: 700 13px/1 var(--font); color: #18181a; }
.wf-node svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.wf-node.is-lit { background: var(--project-pen); }
.wf-tl > section { position: relative; }
.wf-tl__head { text-align: center; display: grid; justify-items: center; padding-block: clamp(36px, 5vw, 64px) clamp(12px, 2vw, 24px); }
.wf-tl__head > :not(.wf-node) { position: relative; z-index: 2; background: #fff; padding-inline: 14px; }
.wf-tl__head h2 { padding-block: 6px; }
@media (min-width: 761px) {
  /* each row: two equal sides of a centred column, the line between them */
  .wf-tl .wf-feat:not(.wf-cook), .wf-tl .wf-deep { max-width: 1000px; margin-inline: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 120px; align-items: center; padding-block: clamp(28px, 3.4vw, 56px); }
  .wf-tl .wf-deepw { padding-block: 0; }
  .wf-tl .wf-feat--flip:not(.wf-cook) .wf-feat__copy, .wf-tl .wf-deep--flip .wf-deep__copy { order: 2; }
  .wf-tl .wf-feat:not(.wf-feat--flip) .wf-feat__copy, .wf-tl .wf-deep:not(.wf-deep--flip) .wf-deep__copy { justify-items: end; text-align: right; }
  .wf-tl .wf-feat__copy h2, .wf-tl .wf-deep__copy h2 { font-size: clamp(38px, 4vw, 58px); }
  /* the demos keep their compact phone composition, scaled up a touch */
  .wf-tl .wf-demo { justify-self: center; width: 358px; zoom: 1.2; }
  .wf-tl .wf-demo { min-height: 0; height: 520px; }
  .wf-tl .wf-receipt-demo { height: 540px; }
  /* a soft rounded square behind each demo (was an organic oval), dotted like the phone layout */
  .wf-tl .wf-panel { top: 10%; left: 4%; right: 4%; bottom: 2%; border-radius: 30px; }
  .wf-tl .wf-demo .phone { width: 195px; bottom: 5%; }
  .wf-tl .wf-demo .phone.at-l, .wf-tl .wf-soon .phone { left: 5%; }
  .wf-tl .wf-pull { zoom: 0.64; }
  .wf-tl .wf-scan .wf-pull--flag { right: 1%; top: 17%; }
  .wf-tl .wf-soon .wf-pull--rows { right: 1%; top: 1%; }
  .wf-tl .wf-receipt { left: 3%; top: 4%; bottom: auto; width: 62%; font-size: 11.5px; padding: 20px 16px 24px; }
  .wf-tl .wf-found { right: 2%; top: auto; bottom: 3%; zoom: 0.72; }
  .wf-tl .wf-note { font-size: 11.5px; }
  .wf-tl .wf-scan .wf-note--a { left: auto; top: auto; right: 3%; bottom: 6%; }
  .wf-tl .wf-soon .wf-note--a { right: 3%; bottom: 6%; }
  .wf-tl .wf-list-demo .wf-note--a, .wf-tl .wf-receipt-demo .wf-note--a { display: none; }
  .wf-tl .wf-ov { left: var(--xs); top: var(--ys); zoom: 0.74; }
  .wf-tl .wf-ov--desk { display: none; }
  .wf-tl .wf-list-demo { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 0 64px; }
  .wf-tl .wf-list-demo .wf-panel { top: 30px; }
  .wf-tl .wf-list-demo .wf-pull { position: relative; inset: auto; zoom: 0.8; --w: 330px; }
  .wf-tl .wf-list-demo .wf-pull--staples { --r: -2deg; }
  .wf-tl .wf-list-demo .wf-pull--list { margin-top: -4px; --r: 1.5deg; }
  .wf-tl .wf-list-demo .wf-tickhead { white-space: nowrap; font-size: 14px; }
  .wf-tl .wf-list-demo .wf-tickhead small { font-size: 10.5px; }
  .wf-tl .wf-list-demo .fa-toast { left: 50% !important; bottom: 16px !important; font-size: 13px; }
  /* standout features: no cards, the demo sits on its side with a soft blob behind */
  .wf-tl .wf-deep { background: none; min-height: 0; border-radius: 0; overflow: visible; padding-inline: 0; gap: 0 120px; }
  .wf-tl .wf-deep::before { display: none; }
  .wf-tl .wf-deep__stage { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
  .wf-tl .wf-deep__stage::before { content: ""; position: absolute; z-index: -1; inset: 4% 2% 14%; border-radius: 28px; background: var(--blob, #eef2fa); opacity: 0.85; }
  .wf-tl .wf-deep--sky { --blob: #e8eef9; } .wf-tl .wf-deep--sage { --blob: #e4efe1; } .wf-tl .wf-deep--sand { --blob: #f1e8d8; } .wf-tl .wf-deep--blush { --blob: #f5e5e2; }
  .wf-tl .wf-deep__stage > .fa { flex: 0 0 100%; margin-bottom: 8px; }
  .wf-tl .wf-call { position: static; font-size: 13px; padding: 8px 14px 8px 10px; }
  .wf-tl .wf-lead { display: none; }
  .wf-tl .wf-fresh, .wf-tl .wf-learn { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .wf-tl .wf-fresh__side { display: none; }
  .wf-tl .wf-file { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 10px; }
  .wf-tl .wf-file .fa-shop i { display: none; }
  .wf-tl .wf-dest { font-size: 15px; padding: 9px 10px; gap: 7px; }
  .wf-tl .wf-off { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wf-tl .wf-off__phone { grid-row: auto; width: 270px; }
  .wf-tl .wf-off__body { min-height: 320px; }
  .wf-tl .wf-off > .wf-net, .wf-tl .wf-off > .wf-a2hs { grid-column: 1; justify-self: center; }
  .wf-tl .wf-a2hs { width: 270px; }
  /* the dinner centrepiece is a wider row: title and acts centred over the line */
  .wf-tl .wf-cook { max-width: 1160px; margin-inline: auto; }
  .wf-tl .wf-cook .wf-feat__copy { justify-items: center; text-align: center; position: relative; z-index: 2; }
  .wf-tl .wf-cook .wf-feat__copy > *, .wf-tl .wf-acts span { position: relative; z-index: 2; }
  .wf-tl .wf-cook .wf-feat__copy h2 { background: #fff; padding: 4px 12px; }
  .wf-tl .wf-acts { justify-content: center; }
  .wf-tl .wf-cook__mid { z-index: 2; }
  .wf-tl .wf-cook .wf-node { top: 0; }
}
@media (min-width: 761px) and (max-width: 1040px) {
  .wf-tl .wf-feat:not(.wf-cook), .wf-tl .wf-deep { column-gap: 80px; }
  .wf-tl .wf-demo { zoom: 1; }
}
@media (max-width: 760px) {
  .wf-tl { --tl-x: 18px; }
  .wf-tl > section { padding-left: 40px !important; }
  .wf-tl .wf-node { top: 34px; width: 34px; height: 34px; margin: 0 0 0 -17px; font-size: 11px; box-shadow: 0 0 0 2px #18181a, 0 0 0 5px #fff; }
  .wf-tl .wf-deep, .wf-tl .wf-deep--flip { padding-inline: 10px; }
  .wf-tl__head { text-align: left; justify-items: start; }
  .wf-tl__head > :not(.wf-node) { padding-inline: 0; }
  .wf-tl .wf-cook__ph.phone { width: min(58vw, 240px); }
}
.wf-tl__head .wf-node { top: 28px; }
.wf-tl__head { padding-top: clamp(84px, 8vw, 110px); }
.wf-recipe .wf-steps--sm li { font-size: 14.5px; }
.wf-recipe .wf-m-time { margin-bottom: 4px; }
/* Dinner on phones: one screen. A smaller phone on the left, this act's cards
   overlapping it on the right, so both are in view together */
@media (max-width: 760px) {
  .wf-tl .wf-cook__stage { display: grid; grid-template-columns: 40% 16% minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 0; align-items: center; }
  .wf-tl .wf-cook__mid { grid-column: 1 / span 2; grid-row: 1 / span 2; padding: 10px 0; z-index: 1; }
  .wf-tl .wf-cook__mid .wf-panel { inset: 0 -10px 0 -10px; }
  .wf-tl .wf-cook__ph.phone { width: 100%; }
  .wf-tl .wf-cook__col--l { grid-column: 2 / span 2; grid-row: 1; align-self: end; z-index: 3; }
  .wf-tl .wf-cook__col--r { grid-column: 2 / span 2; grid-row: 2; align-self: start; z-index: 3; }
  .wf-tl .wf-ccard { padding: 10px 10px 8px; border-radius: 15px; font-size: 13px; }
  .wf-tl .wf-ccard .wf-card__k { margin-bottom: 6px; font-size: 9.5px; }
  .wf-tl .wf-hrow { gap: 6px; padding: 5px 0; }
  .wf-tl .wf-hrow b { font-size: 12.5px; margin-bottom: 1px; }
  .wf-tl .wf-hrow .fa-meta { font-size: 10.5px; gap: 4px; }
  .wf-tl .wf-hrow .fa-tag { display: none; }
  .wf-tl .wf-tickbox { width: 18px; height: 18px; }
  .wf-tl .wf-tickbox svg { width: 11px; height: 11px; }
  .wf-tl .wf-usesup { font-size: 9.5px; padding: 3px 6px; }
  .wf-tl .wf-hused { padding: 4px 6px; font-size: 9.5px; }
  .wf-tl .wf-hused svg { width: 12px; height: 12px; }
  .wf-tl .wf-ccard .fa-buy { font-size: 11px; margin-bottom: 8px !important; }
  .wf-tl .wf-ccard .fa-buy-chip { font-size: 11px; padding: 4px 8px; }
  .wf-tl .wf-minilist { padding: 8px; gap: 5px; }
  .wf-tl .wf-minilist h4, .wf-tl .wf-minilist :where(.fa-h4) { font-size: 14px; }
  .wf-tl .wf-minilist .fa-shop { padding: 5px 7px; }
  .wf-tl .wf-minilist .fa-shop b { font-size: 12px; }
  .wf-tl .wf-ing { margin: 0; }
  .wf-tl .wf-ing li, .wf-tl .wf-ing--lg li { font-size: 12.5px; padding: 4px 6px; margin: 0 -6px; }
  .wf-tl .wf-stepnum b { font-size: 30px; }
  .wf-tl .wf-stepnum span { font-size: 11.5px; }
  .wf-tl .wf-stepnum .wf-steptime { font-size: 10.5px; padding: 3px 7px; }
  .wf-tl .wf-stepbar { margin: 7px 0 8px; gap: 3px; }
  .wf-tl .wf-stepbar i { height: 4px; }
  .wf-tl .wf-steptext { min-height: 4.2em; }
  .wf-tl .wf-steptext p { font-size: 15px; line-height: 1.3; }
  .wf-tl .wf-done { padding-bottom: 8px; gap: 5px; }
  .wf-tl .wf-done b { font-size: 14px; }
  .wf-tl .wf-leftover { font-size: 11.5px; padding: 7px 9px; }
  .wf-tl .wf-cook__col--l .wf-ccard { rotate: -1deg; }
  .wf-tl .wf-cook__col--r .wf-ccard { rotate: 1deg; }
}
/* Offline: a real phone (the site's .phone frame), the chips tucked beside it */
.wf-off__ph.phone { position: relative; width: 260px; box-shadow: none; filter: drop-shadow(0 30px 40px rgb(30 20 20 / 0.28)); grid-row: 1 / span 2; }
.wf-off__body { display: block; min-height: 0; padding: 8px 18px 0; }
.wf-off__body .wf-sync { margin-bottom: 4px; font-size: 13px; }
.wf-off__body .fa-shop { padding: 12px 14px; margin-bottom: 8px; }
.wf-off__body .fa-shop + .fa-shop { margin-top: 0; }
.wf-tl .wf-off__ph.phone { width: 240px; grid-row: auto; }
.wf-tl .wf-off { grid-template-columns: auto auto; grid-template-rows: auto auto; justify-content: center; justify-items: start; column-gap: 0; }
.wf-tl .wf-off__ph.phone { grid-column: 1; grid-row: 1 / span 2; }
.wf-tl .wf-off > .wf-net { grid-column: 2; grid-row: 1; justify-self: start; align-self: end; margin: 0 0 14px -44px; position: relative; z-index: 3; }
.wf-tl .wf-off > .wf-a2hs { grid-column: 2; grid-row: 2; justify-self: start; align-self: start; width: 210px; margin-left: -60px; position: relative; z-index: 3; }
.wf-tl .wf-a2hs .wf-sheet__row { font-size: 13.5px; padding: 10px 11px; }
@media (max-width: 760px) {
  .wf-tl .wf-off__ph.phone { width: 52vw; max-width: 220px; }
  .wf-tl .wf-off > .wf-a2hs { width: 46vw; max-width: 200px; margin-left: -40px; }
  .wf-tl .wf-off > .wf-net { margin-left: -30px; }
  .wf-tl .wf-off .wf-net > span { font-size: 12px; padding: 8px 12px; }
  .wf-tl .wf-a2hs .wf-sheet__row { font-size: 12px; padding: 8px 9px; }
}
@media (max-width: 760px) {
  .wf-tl .wf-cook .wf-feat__copy { margin-bottom: 8px; }
  .wf-tl .wf-acts { flex-wrap: nowrap; gap: 5px; margin-bottom: 10px; }
  .wf-tl .wf-acts span { font-size: 11.5px; padding: 5px 9px 7px 5px; gap: 5px; white-space: nowrap; }
  .wf-tl .wf-acts b { width: 19px; height: 19px; font-size: 10px; }
  .wf-tl .wf-acts i { left: 10px; right: 10px; }
}
/* the shopping photo: a real one, crisp */
.wf-ovphoto img, .fa-photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-ovphoto { aspect-ratio: 640 / 464; }
.fa-photo { background: #efe7da; }
.wf-box em { left: 3px; top: 3px; translate: none; border-radius: 5px; font-size: 9px; padding: 1px 5px; }

/* ---------- Hierarchy: section headings stay big; titles inside the timeline are
   smaller, with a thin underline in their colour instead of the marker ---------- */
.wf-tl .wf-feat__copy h2, .wf-tl .wf-deep__copy h2 { font-size: clamp(28px, 3.3vw, 48px); letter-spacing: -0.035em; line-height: 1.05; }
.wf-tl .wf-cook .wf-feat__copy h2 { font-size: clamp(30px, 3.6vw, 52px); }
.wf-tl .wf-feat__copy .hl, .wf-tl .wf-deep__copy .hl { padding: 0; margin: 0; border-radius: 0; background-position: 0 96%; background-size: 0% 0.2em; }
.wf-tl .wf-feat__copy .hl.is-lit, .wf-tl .wf-deep__copy .hl.is-lit, .no-js .wf-tl .wf-feat__copy .hl, .no-js .wf-tl .wf-deep__copy .hl { background-size: 100% 0.2em; }
.wf-tl .wf-feat__copy .wf-sub, .wf-tl .wf-deep__copy .wf-sub { font-size: 14.5px; }
/* the standout heading: room around it and a short rule before the first item */
.wf-tl__head { padding-bottom: clamp(28px, 3vw, 44px); }
.wf-tl__head::after { content: ""; position: relative; z-index: 2; display: block; width: 64px; height: 3px; margin-top: 18px; border-radius: 3px; background: #18181a; }
/* the step card hugs its text */
.wf-steptext, .wf-tl .wf-steptext { min-height: 0; }
/* Usuals: "Running low" takes the Milk card's place instead of needing room below it */
.wf-learn__stack > [data-low] { transform-origin: 50% 0; }
/* Offline on phones: a proper phone, the chips overlapping its edges, nothing reserved */
@media (max-width: 760px) {
  .wf-tl .wf-off { position: relative; display: block; width: fit-content; margin-inline: auto; padding: 6px 0 4px; }
  .wf-tl .wf-off__ph.phone { width: 60vw; max-width: 236px; }
  .wf-tl .wf-off > .wf-net { position: absolute; z-index: 3; right: -26%; top: 20%; margin: 0; }
  .wf-tl .wf-off > .wf-a2hs { position: absolute; z-index: 3; right: -30%; bottom: 8%; margin: 0; width: 58vw; max-width: 210px; }
}
@media (max-width: 760px) {
  .wf-tl .wf-off { width: 100%; margin-inline: 0; }
  .wf-tl .wf-off__ph.phone { width: 64%; max-width: 236px; margin-left: 2%; }
  .wf-tl .wf-off > .wf-net { right: 0; top: 16%; }
  .wf-tl .wf-off > .wf-a2hs { right: 0; bottom: 10%; width: 56%; }
}
.coach-ico svg { display: block; margin-top: 1px; color: var(--wf-green, #2f7d5a); }
/* second button: out to the app's own website */
.wf-site { border-color: #2f7d5a; color: #2f7d5a; }
.wf-site:hover { background: #2f7d5a; color: #fff; border-color: #2f7d5a; }
.wf-site svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the numbered pills above each feature title aren't needed: the timeline node already shows the number
   (kept in the markup because the timeline reads its number from them) */
.wf-step:not(.wf-step--in) { display: none; }