/* Jo's calorie counter, home page. Tokens first, then the page's own classes.
   The engine's classes and [data-sc-*] selectors are left alone. */
:root {
  --sc-canvas:     #0A0A0A;
  --sc-surface:    #161616;
  --sc-ink:        #F3F1EA;
  --sc-ink-soft:   #A9AE9F;
  --sc-accent:     #5FBF6E;
  --sc-accent-ink: #0B1409;
  --sc-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --sc-font-text:    "Plus Jakarta Sans", system-ui, sans-serif;
  --edge: max(var(--sc-gutter), (100vw - 90rem) / 2); /* content lines up in a 90rem column on wide screens */
  --bar-bg: rgba(10,10,10,.94);
  --phone-body: linear-gradient(155deg, #2E322B, #121411 55%);
  --floor: rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-3) var(--edge);
  background: var(--bar-bg);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--sc-ink) 7%, transparent);
}
.bar__mark { display: block; line-height: 0; }
.bar__mark img { display: block; width: auto; height: 3.4rem; }
.bar__mark picture { display: block; }
.bar__mark:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 4px; }
.bar__links { display: flex; align-items: center; gap: var(--sc-5); }
.bar__signin { color: var(--sc-ink-soft); text-decoration: none; font-weight: 600; font-size: var(--sc-t-sm); transition: color 150ms var(--sc-ease-out); }
.bar__signin:hover { color: var(--sc-ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 var(--sc-7);
  border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 700; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -10px rgba(40,110,50,.7);
  transition: background-color 150ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: #72CC80; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.btn--small { min-height: 2.5rem; padding: 0 var(--sc-5); font-size: var(--sc-t-sm); box-shadow: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center; gap: var(--sc-6);
  padding: var(--sc-10) var(--edge) var(--sc-8);
  overflow: clip;
}
.hero__copy { display: grid; gap: var(--sc-6); position: relative; z-index: 2; }
.hero__title {
  margin: 0; font-weight: 800; font-size: clamp(2.6rem, 5vw, 4.6rem);
  line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; max-width: 15ch;
  padding-bottom: 0.08em; /* room for the tails of g, y and p */
}
.hero__sub { margin: 0; max-width: 34ch; font-weight: 600; font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.4; color: var(--sc-ink-soft); text-wrap: pretty; }
.hero__act { display: grid; justify-items: start; gap: var(--sc-5); margin-top: var(--sc-2); }
.hero__small { margin: 0; font-size: clamp(1.05rem, 1.25vw, 1.25rem); color: var(--sc-ink-soft); }
.hero__small { line-height: 1.5; }
.hero__small strong { display: inline-block; margin-bottom: .15rem; color: var(--sc-ink); font-weight: 800; font-size: clamp(1.25rem, 1.7vw, 1.6rem); letter-spacing: -0.01em; }

/* ---------- the ring: six real screens turning around one centre ----------
   site.js writes --a (the ring's turn, degrees) and --r (its radius, px) every frame.
   Each phone sits at its own angle on the ring and is pushed out by the radius. */
.hero { --phone-w: min(20.16vw, 34.56svh, 23.04rem); } /* the phone width; on .hero so the words can line up with the phones */
.ring-stage {
  position: relative; height: calc(100svh - 6rem); padding-bottom: 1.5rem; box-sizing: border-box;
  display: grid; place-items: center;
  perspective: 2000px; perspective-origin: 50% 50%;
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none;
}
.ring-stage:active { cursor: grabbing; }
.ring-stage img { -webkit-user-drag: none; pointer-events: none; }
.ring {
  --a: 0; --r: 260; --tilt: -3;
  position: relative; width: var(--phone-w); aspect-ratio: 780 / 1688;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1px)) rotateX(calc(var(--tilt) * 1deg)) rotateY(calc(var(--a) * 1deg));
}
.phone {
  all: unset; box-sizing: border-box; cursor: pointer;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 72deg)) translateZ(calc(var(--r) * 1px + var(--lift, 0) * 1px)) scale(calc(1 + var(--lift, 0) / 900));
}
.phone:focus-visible .phone__face { outline: 3px solid var(--sc-accent); outline-offset: 6px; }
.phone__face, .phone__back {
  position: absolute; inset: 0;
  border-radius: calc(var(--phone-w) * 0.14);
  padding: calc(var(--phone-w) * 0.032);
  background: var(--phone-body);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -28px rgba(0,0,0,.9);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* --t from site.js: 1 at the front of the ring, 0 at the back. The back of the ring darkens; phones are never see-through. */
  filter: brightness(calc(0.45 + var(--t, 1) * 0.55));
}
.phone__face .step {
  position: absolute; inset: calc(var(--phone-w) * 0.032);
  border-radius: calc(var(--phone-w) * 0.11); overflow: hidden;
  background: #F4F4F6;
  opacity: 0; z-index: 0;
  transition: opacity 140ms linear;
}
/* The new screen fades in on top; the old one stays solid underneath until it has arrived. */
.phone__face .step.is-on { opacity: 1; z-index: 2; }
.phone__face .step.was-on { opacity: 1; z-index: 1; transition: none; }
.phone__face .step img {
  display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-top: calc(var(--phone-w) * 0.13) solid #F4F4F6; /* status bar room, so the camera pill sits clear of the app */
}
@media (prefers-color-scheme: dark) {
  .phone__face .step { background: #0F0F12; }
  .phone__face .step img { border-top-color: #0F0F12; }
}
.phone__face::after { z-index: 1; }
.phone__face::after { /* the camera pill */
  content: ""; position: absolute; top: calc(var(--phone-w) * 0.06); left: 50%;
  width: 28%; height: calc(var(--phone-w) * 0.07); translate: -50% 0;
  border-radius: 99px; background: #0A0B09;
}
.phone__back {
  transform: rotateY(180deg);
  display: grid; place-items: center;
  background: linear-gradient(200deg, #262A24, #10120F 70%);
}
.phone__back img { width: 34%; height: auto; border-radius: 22%; opacity: .92; box-shadow: 0 8px 20px -8px rgba(0,0,0,.8); }
.phone__back::before { /* camera bump */
  content: ""; position: absolute; top: 4.5%; left: 7%; width: 32%; aspect-ratio: 1;
  border-radius: 28%; background: linear-gradient(160deg, #30352F, #181A16);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 6px 14px -6px rgba(0,0,0,.8);
}
.ring__floor {
  position: absolute; left: 50%; top: calc((100% - 1.5rem) / 2 + var(--phone-w) * 1.08 - 1.2rem); width: calc(var(--phone-w) * 2.6); height: 3.5rem;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--floor), transparent);
  filter: blur(8px); z-index: -1; pointer-events: none;
}

/* Desktop: the phones sit dead centre between the top bar and the bottom of the screen. */
@media (min-width: 861px) {
  .hero { padding-top: 78px; padding-bottom: 0; } /* 78px = the top bar's height */
  .ring-stage { height: calc(100svh - 78px); padding-bottom: 0; translate: 0 calc(var(--phone-w) * -0.04); } /* the 3D lean makes the phones look low; this evens it out */
  .hero__copy { align-self: start; margin-top: calc((100svh - 78px) / 2 - var(--phone-w) * 1.02); } /* the headline sits level with the tops of the phones, just below them */
  .ring__floor { top: calc(50% + var(--phone-w) * 1.08 - 1.2rem); }
}

/* ---------- short laptop screens: the whole hero fits on one screen ---------- */
@media (min-width: 861px) and (max-height: 800px) {
  .hero__copy { gap: var(--sc-4); }
  .hero__title { font-size: clamp(2.3rem, 4.3vw, 3.7rem); }
  .hero { --phone-w: min(20.16vw, 36.48svh, 23.04rem); }
}

/* ---------- phones and small screens ---------- */
@media (max-width: 860px) { .bar__signin { display: none; } }
@media (max-height: 520px) and (orientation: landscape) { /* a phone on its side */
  .hero { padding-top: calc(var(--sc-9) + var(--sc-3)); padding-bottom: var(--sc-4); }
  .hero__copy { gap: var(--sc-3); }
  .hero__act { gap: var(--sc-3); }
  .hero__title { font-size: clamp(1.6rem, 4.4vw, 2.3rem); }
  .hero__sub { font-size: 1.1rem; }
  .hero__small strong { font-size: 1rem; } /* the trial line stays on one line */
  .bar__mark img { height: 2.4rem; }
  .hero { --phone-w: 30svh; }
  .ring-stage { height: calc(var(--phone-w) * 2.16 + 4.5rem); }
}
@media (max-width: 860px) and (orientation: portrait) {
  .bar__mark img { height: 2.6rem; }
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--sc-10) + var(--sc-4)); gap: 0; align-items: start; }
  .hero__copy { gap: var(--sc-4); }
  .hero__title { font-size: clamp(2rem, 8.4vw, 2.6rem); max-width: 16ch; }
  .hero__sub { font-size: 1.25rem; }
  .hero { --phone-w: min(13rem, 48vw, 32svh); } /* Kaz, 2026-10-13: the phones fill the width on a phone (was min(10rem, 36vw, 24svh)) */
  .ring-stage { height: calc(var(--phone-w) * 2.16 + 4rem); }
}

/* ---------- footer ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3) var(--sc-6);
  padding: var(--sc-6) var(--edge) var(--sc-7);
  border-top: 1px solid color-mix(in srgb, var(--sc-ink) 8%, transparent);
  font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.foot p { margin: 0; }
.foot a { color: var(--sc-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 150ms var(--sc-ease-out); }
.foot a:hover { color: var(--sc-accent); }
.foot a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- AI feature 1: Scan my meal ----------
   Everything here is driven by --sc-p, the section's scroll progress (0 to 1), written by the engine. */
.meal__stage { background: var(--sc-canvas); }
.meal__photo {
  --fw: max(100vw, 75svh); --fh: calc(var(--fw) * 4 / 3);
  position: absolute; left: 50%; width: var(--fw); height: var(--fh); translate: -50% 0;
  top: clamp(calc(100svh - var(--fh)), calc(50svh - var(--fh) * 0.785), 0px); /* the foods sit mid-screen */
  filter: brightness(calc(1 - 0.6 * clamp(0, (var(--sc-p) - 0.72) * 6, 1)));
}
.meal__photo img { display: block; width: 100%; height: 100%; }
.meal__tag {
  --o: min(clamp(0, (var(--sc-p) - var(--at)) * 14, 1), clamp(0, (0.76 - var(--sc-p)) * 12, 1));
  position: absolute; left: var(--x); top: var(--y);
  display: flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .45rem .8rem .45rem .5rem; border-radius: 999px;
  background: rgba(255,255,255,.94); color: #111; font-size: clamp(.85rem, 1.05vw, 1.05rem); font-weight: 600;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,.6);
  opacity: var(--o); transform: translate(-.6rem, -50%) scale(calc(.86 + .14 * var(--o)));
  transform-origin: left center;
}
.meal__tag i { width: .8rem; height: .8rem; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px rgba(95,191,110,.35); flex: none; }
.meal__tag b { font-weight: 700; }
.meal__cam { position: absolute; inset: 14% 12% 20%; opacity: clamp(0, (0.22 - var(--sc-p)) * 12, 1); pointer-events: none; }
.meal__cam i { position: absolute; width: 3.2rem; height: 3.2rem; border: 3px solid rgba(255,255,255,.9); }
.meal__cam i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.meal__cam i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.meal__cam i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.meal__cam i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.meal__cam b { position: absolute; left: 50%; bottom: -5.5rem; width: 4.2rem; height: 4.2rem; translate: -50% 0; border-radius: 50%; border: 4px solid #fff; box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.2); background: rgba(255,255,255,.9); background-clip: content-box; padding: 4px; }
.meal__flash { position: absolute; inset: 0; background: #fff; pointer-events: none; opacity: min(clamp(0, (var(--sc-p) - 0.15) * 30, 1), clamp(0, (0.21 - var(--sc-p)) * 30, 1)); }
.meal__shade { /* a column of shade under the words only, so the plate keeps its colour */
  position: absolute; inset: 0 auto 0 0; width: min(46rem, 60vw); pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,.82), rgba(10,10,10,.55) 55%, transparent);
}
.meal__copy { position: absolute; left: var(--edge); top: 50%; translate: 0 -50%; width: min(30rem, 42vw); }
.meal__line { position: absolute; left: 0; top: 0; translate: 0 -50%; width: 100%; }
.meal__kicker { margin: 0 0 .6rem; color: var(--sc-accent); font-weight: 700; letter-spacing: .02em; }
.meal__title { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; padding-bottom: .06em; }
.meal__text { margin: .9rem 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--sc-ink); opacity: .86; text-wrap: pretty; }
.meal__total { margin: 0; font-weight: 800; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.03em; }
.meal__total span { color: var(--sc-accent); }
.meal__phone {
  --pw: min(20vw, 34svh, 22rem); --o: clamp(0, (var(--sc-p) - 0.74) * 7, 1);
  position: absolute; right: calc(var(--edge) + 4vw); top: 50%; width: var(--pw); aspect-ratio: 780 / 1688; margin: 0;
  border-radius: calc(var(--pw) * 0.14); padding: calc(var(--pw) * 0.032);
  background: var(--phone-body); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.9);
  opacity: var(--o); transform: translateY(calc(-50% + (1 - var(--o)) * 80px)) rotate(calc((1 - var(--o)) * 4deg));
}
.meal__phone::after { content: ""; position: absolute; top: calc(var(--pw) * 0.06); left: 50%; width: 28%; height: calc(var(--pw) * 0.07); translate: -50% 0; border-radius: 99px; background: #0A0B09; }
.meal__screen { display: block; height: 100%; border-radius: calc(var(--pw) * 0.11); overflow: hidden; background: #F4F4F6; }
.meal__screen img { display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; object-position: top; border-top: calc(var(--pw) * 0.13) solid #F4F4F6; background: #F4F4F6; }
@media (prefers-color-scheme: dark) { .meal__screen, .meal__screen img { background: #0F0F12; border-top-color: #0F0F12; } }

@media (max-width: 860px) {
  .meal__shade { inset: 0 0 auto 0; width: auto; height: 52%; background: linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.6) 60%, transparent); }
  .meal__copy { left: var(--sc-gutter); right: var(--sc-gutter); top: 6.5rem; translate: none; width: auto; }
  .meal__line { translate: none; }
  .meal__phone { --pw: min(46vw, 30svh); right: auto; left: 50%; top: auto; bottom: 4svh; transform: translate(-50%, calc((1 - var(--o)) * 80px)); }
  .meal__cam { inset: 30% 8% 22%; }
}
.meal__tag--end { transform: translate(calc(-100% + .6rem), -50%) scale(calc(.86 + .14 * var(--o))); transform-origin: right center; } /* near the right edge: the label grows leftwards so it stays on screen */
@media (max-width: 860px) { .meal__tag--end { left: 72%; } } /* the photo is wider than a phone screen, so the potatoes sit off the edge */

/* ---------- AI features 2 to 5 ---------- */
/* One phone frame for every feature section. --pw sets its width. */
.dev {
  --pw: min(19vw, 30svh, 21rem);
  position: relative; display: block; width: var(--pw); aspect-ratio: 780 / 1688; margin: 0; flex: none;
  border-radius: calc(var(--pw) * 0.14); padding: calc(var(--pw) * 0.032); box-sizing: border-box;
  background: var(--phone-body);
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 0 0 1px rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.9);
}
.dev::after { content: ""; position: absolute; z-index: 3; top: calc(var(--pw) * 0.06); left: 50%; width: 28%; height: calc(var(--pw) * 0.07); translate: -50% 0; border-radius: 99px; background: #0A0B09; }
.dev .dev__step { position: absolute; inset: calc(var(--pw) * 0.032); border-radius: calc(var(--pw) * 0.11); overflow: hidden; background: #F4F4F6; }
.dev .dev__step img { display: block; box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; object-position: top; border-top: calc(var(--pw) * 0.13) solid #F4F4F6; }
@media (prefers-color-scheme: dark) { .dev .dev__step { background: #0F0F12; } .dev .dev__step img { border-top-color: #0F0F12; } }

.feat { background: var(--sc-canvas); }
.feat--split {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: var(--sc-8);
  padding: 78px var(--edge) 0; box-sizing: border-box;
}
.feat--flip .feat__copy { order: 2; }
.feat__copy { display: grid; gap: var(--sc-4); opacity: clamp(0, var(--sc-p) * 8 + .4, 1); }
.feat__kicker { margin: 0; color: var(--sc-accent); font-weight: 700; letter-spacing: .02em; }
.feat__title { margin: 0; font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; padding-bottom: .06em; max-width: 16ch; }
.feat__text { margin: 0; max-width: 36ch; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.55; color: var(--sc-ink); opacity: .86; text-wrap: pretty; }

/* Scan a label: the photo, a green line reading down the label, then the phone slides in with the numbers */
.lbl__pair { position: relative; display: flex; align-items: center; justify-content: center; height: calc(100svh - 120px); }
.lbl__photo { position: relative; height: min(100%, 52rem); aspect-ratio: 896 / 1200; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.lbl__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lbl__beam { /* sweeps over the label table, which sits from 41% to 75% of the photo's height */
  position: absolute; left: 30%; right: 32%; height: 3px; border-radius: 3px;
  top: calc(41% + 34% * clamp(0, (var(--sc-p) - 0.08) / 0.42, 1));
  background: var(--sc-accent); box-shadow: 0 0 0 1px rgba(95,191,110,.4), 0 6px 18px rgba(95,191,110,.55);
  opacity: min(clamp(0, (var(--sc-p) - 0.04) * 20, 1), clamp(0, (0.56 - var(--sc-p)) * 20, 1));
}
.lbl__beam::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 9rem; background: linear-gradient(to top, rgba(95,191,110,.22), transparent); }
.lbl__dev {
  --o: clamp(0, (var(--sc-p) - 0.5) * 6, 1);
  position: absolute; right: 0; top: 50%; --pw: min(17vw, 30svh, 19rem);
  opacity: var(--o); transform: translate(calc((1 - var(--o)) * 40px), -50%) rotate(calc((1 - var(--o)) * 3deg));
}

/* Describe a meal: the words type out, then become foods with their calories */
.say__stage { display: grid; align-content: center; justify-items: center; gap: var(--sc-6); padding: 78px var(--edge) 0; box-sizing: border-box; text-align: center; }
.say__top { display: grid; gap: var(--sc-3); justify-items: center; }
.say__top .feat__title { max-width: 22ch; }
.say__typed { margin: 0; max-width: 24ch; font-weight: 700; font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--sc-ink); min-height: 2.4em; }
.say__q { color: var(--sc-accent); }
.say__caret { display: inline-block; width: .08em; height: 1em; margin-left: .04em; vertical-align: -0.12em; background: var(--sc-accent); animation: say-blink 1s steps(2) infinite; }
@keyframes say-blink { 50% { opacity: 0; } }
.say__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-3); }
.say__chips li {
  --o: clamp(0, (var(--sc-p) - var(--at)) * 12, 1);
  padding: .65rem 1.1rem; border-radius: 999px; background: #fff; color: #111; font-size: clamp(.95rem, 1.2vw, 1.15rem);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.8);
  opacity: var(--o); transform: translateY(calc((1 - var(--o)) * 14px)) scale(calc(.94 + .06 * var(--o)));
}
.say__chips b { font-weight: 700; }
.say__total { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--sc-ink); opacity: calc(clamp(0, (var(--sc-p) - 0.72) * 10, 1) * .9); }
.say__total span { font-weight: 800; color: var(--sc-accent); font-size: 1.6em; }

/* Recipe Generator: a sideways rail */
.kit__stage { background: var(--sc-canvas); display: flex; align-items: center; padding-top: 78px; box-sizing: border-box; }
.kit__rail { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3.5rem); padding: 0 var(--edge); width: max-content; }
.kit__lead { width: min(30rem, 80vw); display: grid; gap: var(--sc-4); flex: none; }
.kit__photo, .kit__shot { margin: 0; flex: none; display: grid; gap: var(--sc-3); }
.kit__photo img { display: block; height: min(62svh, 52rem); width: auto; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.kit__shot .dev { --pw: min(28svh, 26rem); }
.kit figcaption { font-weight: 700; color: var(--sc-ink); font-size: clamp(1rem, 1.2vw, 1.15rem); }

/* Recipe from a link: the pasted link, then the worked-out recipe wipes over it */
.link__devs { position: relative; display: flex; align-items: center; justify-content: center; height: calc(100svh - 120px); }
.link__devs .dev { --pw: min(19vw, 32svh, 21rem); }
.link__a { transform: translateX(-34%) rotate(-4deg); opacity: .9; }
.link__b { position: absolute; left: 50%; top: 50%; transform: translate(-16%, -46%) rotate(3deg); clip-path: inset(calc((1 - clamp(0, (var(--sc-p) - 0.15) / 0.45, 1)) * 100%) 0 0 0 round calc(var(--pw) * 0.14)); }

/* ---------- features on phones and narrow screens ---------- */
@media (max-width: 860px) {
  .feat--split { grid-template-columns: 1fr; align-content: start; gap: var(--sc-5); padding-top: calc(78px + var(--sc-6)); }
  .feat--flip .feat__copy { order: 0; }
  .feat__title { font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  .feat__text { font-size: 1rem; }
  .lbl__pair, .link__devs { height: auto; min-height: 0; }
  /* Kaz, 2026-10-13: on a phone the yoghurt and crisps photos take all the room left under the words, on any phone height
     (a phone browser's bars leave far less than the screen's height), never wider than the column */
  .lbl .feat--split, .bar7 .feat--split, .link .feat--split { grid-template-rows: auto minmax(0, 1fr); }
  .lbl .lbl__pair, .bar7 .bar7__pair { height: 100%; min-height: 0; padding-bottom: var(--sc-4); box-sizing: border-box; }
  .lbl__photo { height: min(100%, calc((100vw - 2 * var(--edge)) * 1200 / 896)); }
  .lbl__dev { --pw: min(40vw, 28svh); right: 2%; transform: translate(0, calc(-50% + (1 - var(--o)) * 40px)); }
  /* the two recipe-link phones fill the room under the words too: sized by that room (container units) */
  .link .link__devs { height: 100%; min-height: 0; padding-bottom: var(--sc-4); box-sizing: border-box; container-type: size; }
  .link__devs .dev { --pw: min(46cqw, 40cqh); }
  .say__stage { gap: var(--sc-5); }
  /* Describe a meal fills the screen on every phone: sizes follow the height the browser leaves (svh), capped at the tall-phone sizes */
  .say__typed { font-size: min(2.15rem, 4.8svh); min-height: 0; }
  .say__chips li { font-size: min(1.05rem, 2.5svh); padding: min(.7rem, 1.6svh) 1.1rem; }
  .say__total { font-size: min(1.2rem, 2.8svh); }
  .kit__photo img { height: 54svh; }
  .kit__shot .dev { --pw: min(26svh, 52vw); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .feat--split { padding-top: 70px; }
  .feat__title { font-size: clamp(1.4rem, 3.6vw, 2rem); }
  .feat__text { display: none; }
}
@media (max-width: 860px) and (max-height: 720px) { /* small phones: everything a size down so each scene fits */
  .feat--split { padding-top: calc(78px + var(--sc-3)); gap: var(--sc-3); }
  .feat__title { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .feat__text { font-size: .92rem; }
  .lbl__dev { --pw: min(30vw, 21svh); }
  .say__stage { gap: var(--sc-3); padding-top: 78px; }
  .say__chips { gap: var(--sc-2); }
}

/* ---------- Scan a barcode ----------
   The barcode on the crisps photo sits at x 39%-64%, y 49%-62%; its digits at y 62%-64.5%. */
.bar7__pair { position: relative; display: flex; align-items: center; justify-content: center; height: calc(100svh - 120px); }
.bar7__photo { position: relative; height: min(100%, 52rem); aspect-ratio: 896 / 1200; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.bar7__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bar7__laser { /* a red-green scan line sweeping across the bars */
  --t: clamp(0, (var(--sc-p) - 0.06) / 0.3, 1);
  position: absolute; top: 47%; height: 17%; width: 3px; border-radius: 3px;
  left: calc(38% + 27% * var(--t));
  background: var(--sc-accent); box-shadow: 0 0 0 1px rgba(95,191,110,.45), 0 0 18px 4px rgba(95,191,110,.6);
  opacity: min(clamp(0, (var(--sc-p) - 0.03) * 20, 1), clamp(0, (0.4 - var(--sc-p)) * 20, 1));
}
.bar7__digits { /* the digits turn green as the line passes */
  position: absolute; top: 61.6%; height: 3.2%; left: 38%; border-radius: 3px;
  width: calc(27% * clamp(0, (var(--sc-p) - 0.06) / 0.3, 1));
  background: rgba(95,191,110,.38); mix-blend-mode: multiply;
}
.bar7__card {
  --o: min(clamp(0, (var(--sc-p) - 0.38) * 9, 1), clamp(0, (0.78 - var(--sc-p)) * 12, 1));
  position: absolute; left: 50%; top: 40%; display: grid; gap: .3rem; min-width: 70%;
  padding: 1rem 1.2rem; border-radius: 18px; background: #fff; color: #111; text-align: left;
  font-size: clamp(.85rem, 1.1vw, 1.05rem); box-shadow: 0 24px 50px -16px rgba(0,0,0,.75);
  opacity: var(--o); transform: translate(-50%, calc(-50% + (1 - var(--o)) * 30px)) scale(calc(.9 + .1 * var(--o)));
}
.bar7__card b { font-size: 1.2em; font-weight: 800; }
.bar7__macros { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin-top: .2rem; }
.bar7__macros i { font-style: normal; font-weight: 600; }
.bar7__macros i::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .3em; }
.bar7__macros .p::before { background: #D9534A; } .bar7__macros .c::before { background: #E08A2E; } .bar7__macros .f::before { background: #3F74E0; }
.bar7__dev {
  --o: clamp(0, (var(--sc-p) - 0.7) * 6, 1); --pw: min(17vw, 30svh, 19rem);
  position: absolute; right: 0; top: 50%;
  opacity: var(--o); transform: translate(0, calc(-50% + (1 - var(--o)) * 40px)) rotate(calc((1 - var(--o)) * 3deg));
}
@media (max-width: 860px) {
  .bar7__pair { height: auto; }
  .bar7__photo { height: min(100%, calc((100vw - 2 * var(--edge)) * 1200 / 896)); }
  .bar7__dev { --pw: min(40vw, 28svh); right: 2%; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .bar7__dev { --pw: min(30vw, 21svh); }
}
@media (max-width: 860px) { .bar7__card { min-width: 88%; padding: .6rem .8rem; font-size: clamp(.68rem, 2.6vw, .9rem); white-space: nowrap; } }

/* ---------- Everything else: a tall list that rolls through the middle of the screen ---------- */
.more__stage { background: var(--sc-canvas); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: var(--sc-8); padding: 78px var(--edge) 0; box-sizing: border-box; }
.more__head { display: grid; gap: var(--sc-4); }
.more__window { position: relative; height: calc(100svh - 120px); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent); }
.more__list { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(var(--y, 0px)); }
.more__list li { display: grid; gap: .2rem; padding: .7rem 0; opacity: calc(.22 + .78 * var(--near, 0)); transform: translateX(calc((1 - var(--near, 0)) * 12px)); }
.more__list b { font-weight: 800; font-size: clamp(1.6rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--sc-ink); }
.more__list li.is-on b { color: var(--sc-accent); }
.more__list span { font-size: clamp(1rem, 1.25vw, 1.2rem); color: var(--sc-ink); opacity: calc(.75 * var(--near, 0)); max-width: 40ch; }

/* ---------- Questions ---------- */
.faq { background: var(--sc-canvas); padding: clamp(4rem, 10vh, 8rem) var(--edge); }
.faq__wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sc-8); align-items: start; }
.faq__list { display: grid; }
.faq__item { border-top: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); }
.faq__item:last-child { border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); }
.faq__item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.25rem 0; font-weight: 700; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 1.6em; line-height: 1; color: var(--sc-accent); transition: transform 180ms var(--sc-ease-out); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; border-radius: 4px; }
.faq__item p { margin: 0 0 1.4rem; max-width: 60ch; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; color: var(--sc-ink); opacity: .82; }

/* ---------- Last call ---------- */
.close { background: var(--sc-canvas); padding: clamp(5rem, 14vh, 10rem) var(--edge); text-align: center; }
.close__wrap { display: grid; justify-items: center; gap: var(--sc-5); }
.close__title { margin: 0; font-weight: 800; font-size: clamp(2.4rem, 6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; padding-bottom: .06em; }
.close__text { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); opacity: .86; }
.btn--big { min-height: 3.75rem; padding: 0 var(--sc-9); font-size: 1.2rem; margin-top: var(--sc-3); }

@media (max-width: 860px) {
  .more__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--sc-3); padding-top: calc(78px + var(--sc-5)); }
  .more__window { height: 100%; }
  .faq__wrap { grid-template-columns: 1fr; gap: var(--sc-5); }
}
.nowrap { white-space: nowrap; }

/* "Snap it! Scan it! Save it!" on one line at every size: the text is about 10.6 times its font size wide,
   so the size follows the width of its column (cqi), capped at the desktop size. */
/* The hero animation (Kaz, 2026-10-13): at least half the screen wide, as tall as the phones, its top level with theirs.
   Wide 9:8 cut; phones get a tall cut later. The button sits on it on computers, under it on phones. */
.hero__film { display: block; width: calc(var(--phone-w) * 2.475); max-width: 100%; height: auto; aspect-ratio: 9 / 8;
  border-radius: 1.5rem; background: #111; cursor: pointer; } /* no shadow: redrawing it around a playing video lagged (Kaz, 2026-10-13) */
.hero__film:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
@media (min-width: 861px) {
  /* the phones' column is only as wide as the ring needs, and the pair is centred, so wide screens get no gap between them */
  .hero { grid-template-columns: calc(var(--phone-w) * 2.475) minmax(0, calc(var(--phone-w) * 2.6)); justify-content: center; }
  .hero__copy { margin-top: calc((100svh - 78px) / 2 - var(--phone-w) * 1.1); }
  /* the button sits on the film's bottom-left corner, in line with its words; no scene puts anything there */
  .hero__act { position: absolute; left: 5.56%; bottom: 3.44%; margin: 0; } /* 40 and 22 px of the 720x640 film */
}
@media (max-height: 520px) and (orientation: landscape) { /* a phone on its side: the same, and the film fits the screen's height */
  .hero__act { position: absolute; left: 5.56%; bottom: 3.44%; margin: 0; }
  .hero .hero__film { width: min(100%, calc((100svh - 10rem) * 1.125)); }
}
@media (max-width: 860px) { .hero__film { width: 100%; } }
/* phones held upright get the tall cut (2:3), as wide as the screen but never taller than about two thirds of it */
@media (max-width: 860px) and (orientation: portrait) { .hero__film { aspect-ratio: 2 / 3; width: min(100%, 44svh); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }