/* The Whysk website, from the Claude Design file "Whysk Waitlist v3" (track W).
   Colours come only from src/ui/tokens.ts: the build writes them as --c-* variables. */

/* Fonts: the app's families as WOFF2 (latin), a quarter of the TTF weight (audit P2). */
@font-face {
  font-family: 'Darker Grotesque';
  src: url('/fonts/DarkerGrotesque-900.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-Variable.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Durva Hand';
  src: url('/fonts/DurvaHand-Regular.otf') format('opentype');
  font-display: swap;
}

:root {
  --font-display: 'Darker Grotesque', sans-serif;
  --font-body: 'Instrument Sans', sans-serif;
  --font-hand: 'Durva Hand', cursive;
  --gutter: clamp(20px, 4vw, 48px);
  --hdr: 83px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
}
a {
  color: var(--c-ink);
}
input::placeholder {
  color: var(--c-muted);
}
img {
  display: block;
}
.page {
  min-height: 100vh;
  overflow-x: clip;
}
.wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
@media (max-width: 599px) {
  .eyebrow {
    font-size: 14px;
  }
  .tag,
  .fridge .label {
    font-size: 12px;
  }
}
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 0.86;
  text-wrap: balance;
}
.hand {
  font-family: var(--font-hand);
  line-height: 1;
  transform: rotate(-3deg);
  transform-origin: left;
}
.mark {
  background-image: linear-gradient(var(--c-yellow), var(--c-yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% var(--mark, 36%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.word {
  display: inline-block;
}

/* ---------- buttons ---------- */
/* One base for every button and one for every chip (D-217): each rule below adds only its size,
   colour and motion. */
.btn-dark,
.btn-light,
.join button[type='submit'],
.thanks .share button {
  border: 3px solid var(--c-ink);
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.fchip,
.mchip,
.ichip,
.bowl .bchip,
.mood-pill,
.hmeal .cooking,
.pill-dark,
.fridge .label {
  border: 2px solid var(--c-ink);
  border-radius: 999px;
  box-sizing: border-box;
  white-space: nowrap;
}
.btn-dark {
  text-decoration: none;
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  background: var(--c-ink);
  color: var(--c-bg);
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  transition:
    background 0.2s,
    color 0.2s;
}
@media (hover: hover) {
  .btn-dark:hover {
    background: var(--c-yellow);
    color: var(--c-ink);
  }
}
.btn-dark.small {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
}
.btn-light {
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 15px;
}
.different :focus-visible {
  outline-color: var(--c-bg);
}
:focus-visible {
  outline: 3px solid var(--c-ink);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-bg);
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s;
}
.site-header.scrolled {
  border-bottom-color: var(--c-ink);
}
.site-header .wrap {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header .logo img {
  height: 38px;
  width: auto;
}
/* At very large text sizes the header has no room for both; the hero form is right there. */
@media (max-width: 299px) {
  .site-header .btn-dark {
    display: none;
  }
}

/* ---------- stages: every section fills the screen and the next one slides over it ---------- */
.stage {
  min-height: calc(100svh - var(--hdr));
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* ---------- forms ---------- */
.join {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px;
  margin: 0;
}
.join-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.join input[type='email'] {
  flex: 1 1 240px;
  min-width: 0;
  height: 62px;
  padding: 0 18px;
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 18px;
  box-sizing: border-box;
  outline: none;
  transition: box-shadow 0.2s;
}
.join input[type='email']:focus {
  box-shadow: 0 0 0 4px var(--focus-ring, var(--c-yellow));
}
.join button[type='submit'] {
  flex: 0 0 auto;
  height: 62px;
  padding: 0 26px;
  border-radius: 14px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 18px;
  box-shadow: 5px 5px 0 var(--btn-shadow, var(--c-yellow));
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
@media (hover: hover) {
  .join button[type='submit']:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--btn-shadow, var(--c-yellow));
  }
}
.join button[type='submit']:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--btn-shadow, var(--c-yellow));
}
.join button[disabled] {
  cursor: progress;
  opacity: 0.8;
}
/* Narrow screens: the button takes the full row and may wrap, so its label is never cut. */
@media (max-width: 399px) {
  .join button[type='submit'] {
    flex: 1 1 100%;
    height: auto;
    min-height: 62px;
    padding: 12px 20px;
    white-space: normal;
  }
}
.join input[type='email'][aria-invalid='true'] {
  border-color: var(--c-red-deep);
}
.join .err {
  font-size: 15px;
  font-weight: 700;
  color: var(--err, var(--c-red-deep));
}
.join .err:empty {
  display: none;
}
.join .note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-ink);
  text-wrap: pretty;
}
.join .note a {
  font-weight: 600;
}
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.done-line {
  font-size: 18px;
  font-weight: 700;
}
.thanks {
  max-width: 580px;
  background: var(--c-white);
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--c-ink);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
  text-align: left;
}
.thanks .display {
  font-size: 46px;
}
.thanks p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}
.thanks .share {
  border-top: 3px solid var(--c-ink);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.thanks .share span {
  font-size: 17px;
  line-height: 1.45;
  flex: 1 1 240px;
}
.thanks .share button {
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-size: 16px;
}
[hidden] {
  display: none !important;
}

/* ---------- hero ---------- */
/* Yellow and black, like the Instagram covers (D-219). */
.hero {
  flex-direction: column;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  padding-top: clamp(20px, 4vh, 56px);
  background: var(--c-yellow);
  --focus-ring: var(--c-bg);
  --btn-shadow: var(--c-bg);
  --err: var(--c-ink);
}
.hero .mark {
  background-image: linear-gradient(var(--c-bg), var(--c-bg));
}
.hero > .wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 64px);
}
.hero-copy {
  flex: 1.4 1 360px;
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 28px);
  padding-bottom: clamp(24px, 5vh, 64px);
}
.hero h1 {
  font-size: clamp(min(52px, 13.5vw), min(7.6vw, 12.5vh), 128px);
  line-height: 0.84;
  letter-spacing: -0.015em;
}
.hero h1 .mark {
  padding: 0 0.06em;
  white-space: nowrap;
}
.hero-lead {
  max-width: 540px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  text-wrap: pretty;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-lead p {
  margin: 0;
}
.hero-lead strong {
  font-weight: 700;
}
.phone-col {
  flex: 1 1 280px;
  max-width: 350px;
  margin: 0 auto;
  align-self: flex-end;
  display: flex;
  justify-content: center;
  position: relative;
}
.phone {
  width: 100%;
  height: min(600px, calc(100svh - var(--hdr) - clamp(20px, 4vh, 56px)));
  min-height: 380px;
  background: var(--c-ink);
  border: 3px solid var(--c-ink);
  border-bottom: 0;
  border-radius: 48px 48px 0 0;
  padding: 11px 11px 0;
  box-sizing: border-box;
  box-shadow: 8px 8px 0 var(--c-bg);
}
.phone-screen {
  height: 100%;
  background: var(--c-white);
  border-radius: 38px 38px 0 0;
  padding: 12px 18px 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.phone-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 26px;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.phone-status span:first-child {
  padding-left: 8px;
}
.phone-status .island {
  width: 86px;
  height: 26px;
  border-radius: 13px;
  background: var(--c-ink);
}
.phone-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fchip {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  background: var(--c-white);
  color: var(--c-ink);
  transition:
    background 0.35s,
    color 0.35s;
}
.fchip.on {
  background: var(--c-ink);
  color: var(--c-bg);
}
.pmeal {
  background: var(--c-white);
  border: 2px solid var(--c-ink);
  border-radius: 12px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.pmeal.on {
  background: var(--c-bg);
  box-shadow: 3px 3px 0 var(--c-ink);
  transform: translate(-2px, -2px);
}
.pmeal .display {
  font-size: 22px;
  line-height: 0.95;
}
.mchip {
  height: 22px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--c-yellow);
}
.mchip.ready {
  background: var(--c-green);
}

/* ---------- how it works ---------- */
/* ---------- the problem: one dark photo, set big (D-219) ---------- */
.problem {
  position: relative;
  background: var(--c-night);
  color: var(--c-bg);
  overflow: hidden;
  align-items: stretch;
}
.problem-photo {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
}
.problem-photo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.problem > .wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.problem-copy {
  width: 50%;
  padding: clamp(64px, 10vh, 120px) clamp(24px, 4vw, 64px) clamp(64px, 10vh, 120px) 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(18px, 2.6vh, 28px);
}
.problem h2 {
  font-size: clamp(min(52px, 13vw), 6.2vw, 96px);
  line-height: 0.84;
}
.problem-line {
  margin: 0;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 0.95;
  color: var(--c-yellow);
}
.problem-body {
  margin: 0;
  max-width: 440px;
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}
.problem-next {
  color: var(--c-bg);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 3px solid var(--c-yellow);
  padding: 10px 0 4px;
}
.problem :focus-visible {
  outline-color: var(--c-bg);
}
@media (hover: hover) {
  .problem-next:hover {
    color: var(--c-yellow);
  }
}
/* Narrow screens: the photo on top, cropped to the fridge, the words underneath. */
@media (max-width: 899px) {
  .problem {
    flex-direction: column;
  }
  .problem-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: min(64svh, 120vw);
  }
  .problem-photo > img:first-child {
    object-position: 52% 40%;
  }
  .problem-photo::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 24%;
    background: linear-gradient(transparent, var(--c-night));
  }
  .problem-copy {
    width: 100%;
    padding: 8px 0 clamp(56px, 9vh, 88px);
  }
}

.how {
  background: var(--c-white);
  border-top: 3px solid var(--c-ink);
  border-bottom: 3px solid var(--c-ink);
  padding: clamp(72px, 10vh, 120px) 0;
}
.how .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
.how-copy {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.how-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how h2 {
  font-size: clamp(min(48px, 13vw), 6vw, 84px);
}
.steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.step-dot {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  border: 3px solid var(--c-ink);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  background: var(--c-white);
}
.step:nth-child(2) .step-dot {
  background: var(--c-yellow);
}
.step:nth-child(3) .step-dot {
  background: var(--c-green);
}
.step-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}
.step-text h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 38px;
  line-height: 0.86;
}
.step-text span {
  font-size: 18px;
  line-height: 1.5;
  text-wrap: pretty;
}
.how-art {
  width: 100%;
  max-width: 560px;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-stack {
  position: relative;
  width: 100%;
  padding-bottom: 28px;
}
.fridge {
  width: 70%;
  position: relative;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--c-fill);
}
.fridge img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.fridge .scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: var(--c-yellow);
  box-shadow: 0 0 0 2px var(--c-ink);
  opacity: 0;
  pointer-events: none;
}
.fridge .label {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: var(--c-bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.how-meals {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pill-dark {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hmeal .mchip {
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  align-self: flex-start;
}
/* The handwritten note under the meal cards, its arrow pointing up at "Just need a lime". */
.how-note {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
}
.how-note .arrow {
  font-size: 22px;
}
.how-note .hand {
  font-size: 28px;
}
/* Phones: the meal cards are taller than the fridge frame, so the frame becomes a wider, shorter
   picture and the cards overlap only its bottom, leaving "Your fridge, 7pm" in view. */
@media (max-width: 599px) {
  .how-stack {
    padding-bottom: 0;
  }
  .fridge {
    width: 80%;
    aspect-ratio: 4 / 3;
  }
  .how-meals {
    position: relative;
    width: 86%;
    margin: -64px 0 0 auto;
  }
  .how-note .hand {
    font-size: 24px;
  }
}
.hmeal {
  background: var(--c-bg);
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--c-ink);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hmeal .display {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 0.9;
}
.hmeal .cooking {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--c-white);
}

/* ---------- why it's different ---------- */
.different {
  background: var(--c-ink);
  color: var(--c-bg);
  padding: clamp(56px, 8vh, 96px) 0;
}
.different .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.diff-copy {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}
.different h2 {
  font-size: clamp(min(48px, 12vw), 5vw, 80px);
  line-height: 0.84;
  color: var(--c-bg);
}
.points {
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--c-bg);
}
.point {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  padding: 20px 0;
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--c-bg);
  color: var(--c-bg);
  font-family: var(--font-body);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.point[aria-pressed='true'] {
  opacity: 1;
}
.point-n {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--c-bg);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition:
    background 0.3s,
    color 0.3s;
}
.point[aria-pressed='true'] .point-n {
  background: var(--c-yellow);
  color: var(--c-ink);
}
.point-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.point-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 0.9;
}
/* The active point's text opens and the old one closes together, over the same 0.4 s as the
   demo's crossfade on the right (Durva: the left side did not feel seamless). The row animates
   from 0 to its height, so the points below glide instead of jumping. */
.point-body {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 10px;
  opacity: 1;
  font-size: 18px;
  line-height: 1.5;
  max-width: 460px;
  text-wrap: pretty;
  transition:
    grid-template-rows 0.4s var(--ease),
    margin-top 0.4s var(--ease),
    opacity 0.3s ease;
}
.point-body > span {
  overflow: hidden;
  min-height: 0;
}
.point[aria-pressed='false'] .point-body {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
}
.demos {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-self: center;
  max-width: 460px;
  width: 100%;
}
/* On phones the active point's text can be above the screen while its demo plays, so the demo
   carries the point's number and title (critique P1). Desktop shows both side by side. */
.demo-label {
  display: none;
  grid-row: 1;
  color: var(--c-bg);
  padding-bottom: 12px;
}
.demo-label:empty {
  padding: 0;
}
@media (max-width: 899px) {
  .demo-label {
    display: block;
  }
}
.demos > .demo {
  grid-row: 2;
}
.demo {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  background: var(--c-bg);
  color: var(--c-ink);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 420px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.demo.shown {
  opacity: 1;
  pointer-events: auto;
}
.place {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}
.place .chips {
  gap: 8px;
}
.ichip {
  padding: 6px 12px;
  background: var(--c-white);
}
.ichip.yellow {
  background: var(--c-yellow);
}
.row-card {
  background: var(--c-white);
  border: 3px solid var(--c-ink);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-card .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-green);
  border: 2px solid var(--c-ink);
  flex: none;
}
.demo .result {
  margin-top: 6px;
}
.picked {
  transition: opacity 0.4s ease;
}
.mood-pill {
  height: 38px;
  padding: 0 14px;
  background: var(--c-white);
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.35s var(--spring);
}
.mood-pill.dark {
  background: var(--c-ink);
  color: var(--c-bg);
}
.mood-pill.pressed {
  transform: scale(0.94);
}
.mood-pill.on {
  background: var(--c-yellow);
  transform: translateY(-2px);
}
.moods {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease);
}
.moods.shown {
  opacity: 1;
  transform: none;
}
.mood-lists {
  position: relative;
  height: 164px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.mood-lists.shown {
  opacity: 1;
}
.mood-list {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    transform 0.5s var(--ease);
  pointer-events: none;
}
.mood-list.shown {
  opacity: 1;
  transform: none;
}
.days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.slots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 64px;
}
.slot {
  border: 2px dashed var(--c-ink);
  border-radius: 12px;
}
.slot-meal {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: calc((100% - 20px) / 3);
  background: var(--c-white);
  border: 3px solid var(--c-ink);
  border-radius: 12px;
  box-sizing: border-box;
  padding: 8px;
  display: flex;
  align-items: center;
  font-size: clamp(11px, 3.3vw, 16px);
  font-weight: 600;
  line-height: 1.15;
}
.slot-meal.new {
  background: var(--c-yellow);
}
.use-first {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
}

/* ---------- doubts ---------- */
.doubts {
  background: var(--c-pink);
  padding: clamp(80px, 11vh, 128px) 0;
}
.doubts .wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.doubts-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.doubts h2 {
  font-size: clamp(min(56px, 13vw), 7vw, 104px);
  line-height: 0.84;
}
/* With motion the section is exactly one screen: the heading stays and only the chat scrolls,
   newest message at the bottom, like a messaging app (D-214). */
.motion .doubts {
  height: calc(100svh - var(--hdr));
  padding: clamp(32px, 6vh, 72px) 0;
}
.motion .doubts .wrap {
  height: 100%;
  align-items: center;
}
.motion .chat-window {
  height: 100%;
  overflow: hidden;
}
.motion .chat-window.scrolled {
  mask-image: linear-gradient(transparent, var(--c-ink) 48px);
  -webkit-mask-image: linear-gradient(transparent, var(--c-ink) 48px);
}
/* A phone on its side: a shorter header, the form beside the headline, no drawn phone, and the
   page reads plainly with nothing held (D-217). */
@media (orientation: landscape) and (max-height: 499px) {
  .site-header .wrap {
    height: 56px;
  }
  .site-header .logo img {
    height: 28px;
    width: auto;
  }
  .phone-col {
    display: none;
  }
  .hero {
    min-height: 0;
    padding-bottom: 24px;
  }
}
.flat .doubts {
  height: auto;
}
.flat .chat-window {
  height: auto;
}
.flat .chat {
  transform: none !important;
}
/* Tablets held upright: the hero stacks with bigger type, so the screen is not half empty. */
@media (min-width: 700px) and (max-width: 1023px) and (orientation: portrait) {
  .hero-copy {
    flex-basis: 100%;
  }
  .hero h1 {
    font-size: clamp(72px, 11vw, 112px);
  }
  .hero-lead {
    font-size: 22px;
  }
  .phone-col {
    max-width: 380px;
  }
}
@media (max-width: 899px) {
  .motion .doubts .wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .motion .doubts h2 {
    font-size: min(48px, 12vw);
  }
  .motion .doubts-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .motion .chat-window {
    flex: 1;
    min-height: 0;
  }
}
.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.qa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
}
.bubble {
  max-width: 85%;
  border: 3px solid var(--c-ink);
  padding: 14px 20px;
  font-size: 19px;
  line-height: 1.45;
  text-wrap: pretty;
  box-sizing: border-box;
}
.bubble.q {
  align-self: flex-end;
  background: var(--c-white);
  border-radius: 22px 22px 6px 22px;
}
.bubble.a {
  grid-area: 1 / 1;
  background: var(--c-yellow);
  border-radius: 22px 22px 22px 6px;
}
.answer {
  display: grid;
  justify-items: start;
}
.typing {
  grid-area: 1 / 1;
  opacity: 0;
  background: var(--c-yellow);
  border: 3px solid var(--c-ink);
  border-radius: 22px 22px 22px 6px;
  height: 56px;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 6px;
}
.typing span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-ink);
}

/* ---------- final call ---------- */
.final {
  position: relative;
  overflow: hidden;
  background: var(--c-yellow);
  border-top: 3px solid var(--c-ink);
  padding: clamp(48px, 9vh, 128px) 0;
  --focus-ring: var(--c-bg);
  --btn-shadow: var(--c-bg);
  --err: var(--c-ink);
}
.final .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 5vw, 72px);
}
.final-copy {
  position: relative;
  z-index: 1;
  max-width: min(580px, 46vw);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.4vh, 32px);
}
.final h2 {
  font-size: clamp(min(56px, 14vw), 6.6vw, 108px);
  line-height: 0.84;
}
.final-body {
  margin: 0;
  max-width: 520px;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.45;
  text-wrap: pretty;
}
/* The plate is part of the section, not a framed photo: the photo's own yellow runs to the right
   and bottom edges, and its top and left fade into the section's yellow. Five frames of the same
   plate, eaten in stop motion: only the frame named by data-frame shows, so each step is a cut,
   never a crossfade. Without the script, or with reduced motion, the finished plate shows. */
.final-plate {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58vw, 880px);
  aspect-ratio: 1122 / 1102;
  -webkit-mask-image:
    linear-gradient(to right, transparent, var(--c-ink) 30%),
    linear-gradient(to bottom, transparent, var(--c-ink) 22%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, var(--c-ink) 30%),
    linear-gradient(to bottom, transparent, var(--c-ink) 22%);
  mask-composite: intersect;
}
.final-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%;
  opacity: 0;
}
.final-plate:not([data-frame]) img:last-child,
.final-plate[data-frame='1'] img:nth-child(1),
.final-plate[data-frame='2'] img:nth-child(2),
.final-plate[data-frame='3'] img:nth-child(3),
.final-plate[data-frame='4'] img:nth-child(4),
.final-plate[data-frame='5'] img:nth-child(5) {
  opacity: 1;
}
@media (max-width: 899px), (max-width: 1024px) and (orientation: portrait) {
  .final {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }
  .final .wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .final-copy {
    max-width: none;
  }
  .final-plate {
    position: relative;
    width: 100%;
    margin-top: auto;
    aspect-ratio: 4 / 5;
    -webkit-mask-image: linear-gradient(to bottom, transparent, var(--c-ink) 18%);
    mask-image: linear-gradient(to bottom, transparent, var(--c-ink) 18%);
  }
}
/* Tablets: the stacked plate stays a plate, not a wall, and sits against the right edge. */
@media (min-width: 600px) and (max-width: 1024px) {
  .final-plate {
    align-self: flex-end;
    width: min(100%, 640px);
    aspect-ratio: 1;
    -webkit-mask-image:
      linear-gradient(to right, transparent, var(--c-ink) 25%),
      linear-gradient(to bottom, transparent, var(--c-ink) 18%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, var(--c-ink) 25%),
      linear-gradient(to bottom, transparent, var(--c-ink) 18%);
    mask-composite: intersect;
  }
}
@media (max-height: 640px) and (max-width: 599px) {
  .final h2 {
    font-size: min(48px, 13vw);
  }
}
.final .join {
  gap: 14px;
  width: 100%;
  max-width: 600px;
}
.final .join .note {
  font-size: 15px;
  font-weight: 600;
}
.final .join .note a {
  font-weight: 700;
}
.final .done-line {
  font-size: 20px;
}
.final .thanks {
  width: 100%;
  max-width: 600px;
}

/* ---------- footer ---------- */
/* With motion the footer fills the screen, so the stuck final section never shows above it. */
.motion .site-footer {
  min-height: calc(100svh - var(--hdr));
}
.site-footer {
  position: relative;
  background: var(--c-bg);
  border-top: 3px solid var(--c-ink);
}
.site-footer > .wrap {
  padding-top: clamp(64px, 9vh, 104px);
  padding-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
.footer-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.footer-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-head h2 {
  font-size: clamp(min(56px, 14vw), 7vw, 104px);
  line-height: 0.84;
}
.footer-head p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  max-width: 420px;
  text-wrap: pretty;
}
.footer-navs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
}
.footer-navs nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 16px;
  font-weight: 600;
}
.footer-navs nav .tag {
  font-size: 12px;
  color: var(--c-muted);
}
.footer-navs a {
  text-decoration: none;
  /* 36 px tall tap targets with the same 12 px look between them (audit P2). */
  padding: 8px 0;
}
@media (pointer: coarse) {
  .footer-navs a {
    padding: 12px 0;
  }
}
@media (hover: hover) {
  .footer-navs a:hover {
    text-decoration: underline;
  }
}
.bowl-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
}
.bowl {
  position: relative;
  width: min(440px, calc(100% - 8px));
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px solid var(--c-ink);
  background: var(--c-white);
  box-shadow: 8px 8px 0 var(--c-ink);
  /* Vertical swipes scroll the page; only a sideways drag stirs (critique P2). */
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.bowl .ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 2px dashed var(--c-disabled);
  pointer-events: none;
}
.bowl .fill {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: var(--c-yellow);
  transform: scale(0);
  pointer-events: none;
}
.bowl .bchip {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 15px;
  font-weight: 700;
  padding: 6px 12px;
  background: var(--c-bg);
  pointer-events: none;
  will-change: transform;
}
.bowl .done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  font-size: clamp(44px, 6vw, 64px);
}
.bowl .whisk {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}
.bowl .whisk img {
  position: absolute;
  width: 120px;
  height: auto;
  left: -56px;
  top: -122px;
  transform: rotate(180deg);
}
.stir-bar {
  min-height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.stir-bar .hand {
  font-size: 30px;
}
.stir-bar .btn-dark {
  font-size: 15px;
}
.legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  border-top: 3px solid var(--c-ink);
  padding-top: 20px;
}
.legal img {
  height: 28px;
  width: auto;
}

/* ---------- privacy page ---------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px var(--gutter) 64px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.legal-page .back {
  font-weight: 600;
  text-decoration: none;
}
.legal-page h1 {
  font-size: clamp(52px, 8vw, 88px);
}
.legal-page h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
}
.legal-page p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  text-wrap: pretty;
}
.legal-page .updated {
  color: var(--c-muted);
  font-size: 15px;
}
.legal-page .lead {
  font-size: 19px;
}
.legal-page ul,
.legal-page ol {
  margin: 10px 0 0;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.55;
}
.legal-page ul li + li {
  margin-top: 8px;
}
.legal-page section p + p {
  margin-top: 12px;
}
.legal-page section {
  border-top: 3px solid var(--c-ink);
  padding-top: 18px;
  scroll-margin-top: 16px;
}
.contents {
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  background: var(--c-white);
  padding: 18px 20px;
}
.contents ol {
  columns: 2 220px;
  font-size: 16px;
}
.contents a {
  display: inline-block;
  padding: 4px 0;
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .contents a:hover {
    text-decoration: underline;
  }
}

/* ---------- legal and 404 footer: a way to every page (D-219 review) ---------- */
.legal-footer {
  border-top: 3px solid var(--c-ink);
}
.legal-footer nav {
  max-width: 760px;
  margin: 0 auto;
  padding: 20px var(--gutter) 32px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.legal-footer a {
  font-weight: 600;
  text-decoration: none;
  padding: 10px 0;
}
@media (hover: hover) {
  .legal-footer a:hover {
    text-decoration: underline;
  }
}
.not-found {
  min-height: 60svh;
  justify-content: center;
}

/* ---------- motion: the script sets every reveal from the scroll (D-213). These are the start
   states, so nothing flashes before the script runs. Reduced motion shows everything at once. ---------- */
.motion [data-reveal='up'],
.motion [data-reveal='pop'] {
  opacity: 0;
}
.motion [data-reveal='mark'] {
  background-size: 0% var(--mark, 36%);
}
.motion .typing span {
  animation: dot 640ms ease-in-out infinite;
}
.motion .typing span:nth-child(2) {
  animation-delay: 130ms;
}
.motion .typing span:nth-child(3) {
  animation-delay: 260ms;
}
@keyframes dot {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.no-motion .point-body {
  transition: none;
}
.no-motion .typing,
.no-motion .scanline {
  display: none;
}
.no-motion [data-reveal='move'] {
  transform: translateX(calc(100% + 10px));
}
/* On narrow screens "why it's different" is taller than the screen: every point stays open so the
   pinned section never changes height while the scroll plays it. */
@media (max-width: 899px) {
  .point[aria-pressed='false'] .point-body {
    grid-template-rows: 1fr;
    margin-top: 10px;
    opacity: 1;
  }
}