/* Spoonwize site. Colours, type, spacing and radii come from examples/spoonwise/tokens.json. */

@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --surface: #F4F7F2;
  --surface-raised: #FFFFFF;
  --line: #E3E8E0;
  --ink: #17201B;
  --ink-muted: #56625A;
  --on-ink: #FFFFFF;
  --brand: #1F6E43;
  --brand-tint: #E3F1E7;
  --brand-deep: #174D2F;
  --honey: #F2B83A;
  --honey-deep: #8A5A00;
  --sugar: #B23A21;
  --sugar-hero: #D9472B;
  --sugar-tint: #FDF0EC;
  --sugar-deep: #6B2A19;
  --fill-subtle: #E8EDE4;

  --display: "Nunito", ui-rounded, system-ui, sans-serif;
  --sans: "Figtree", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #121815;
    --surface-raised: #1C2420;
    --line: #2C3630;
    --ink: #EEF3EE;
    --ink-muted: #A3B0A7;
    --on-ink: #121815;
    --brand: #6FCF97;
    --brand-tint: #173324;
    --brand-deep: #B9F0CC;
    --honey-deep: #F5C762;
    --sugar: #FF8A73;
    --sugar-hero: #FF8A73;
    --sugar-tint: #3A1C15;
    --sugar-deep: #FFC2B5;
    --fill-subtle: #26302A;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 10;
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--radius-pill);
  font: 800 15px/22px var(--display);
}
.skip-link:focus { top: var(--space-2); }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}
@media (min-width: 720px) { .wrap { padding: 0 var(--space-8); } }

/* Header: the lockup only, no menu */
.site-header { padding: var(--space-4) 0; }
.lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  text-decoration: none;
  font: 900 24px/1 var(--display);
  letter-spacing: -0.01em;
  min-height: 44px;
}
.lockup img { width: 30px; height: 30px; }

/* Hero */
.hero {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-6) 0 var(--space-8);
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; gap: 56px; padding: var(--space-8) 0 72px; }
}

.eyebrow {
  font: 600 13px/18px var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}

.hero h1 {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.04;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.lede {
  margin-top: var(--space-4);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 34em;
}

.cta { margin-top: var(--space-6); }

/* Store badges (shown when the app is live) */
.stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.store { display: block; border-radius: 8px; }
.store img { height: 48px; width: auto; }
/* Google's badge PNG carries its own clear space; this lines its artwork up with Apple's */
.store-android img { height: 71px; margin: -11.6px; }
[data-os="android"] .store-android { order: -1; }

.qr {
  display: none;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
  flex-basis: 100%;
}
.qr svg {
  width: 96px;
  height: 96px;
  padding: 6px;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
}
.qr figcaption { color: var(--ink-muted); font-size: 15px; max-width: 14em; }
[data-os="desktop"] .qr { display: flex; }
@media (min-width: 900px) and (hover: hover) {
  html:not(.js) .qr { display: flex; }
}

/* Waitlist form (shown until the app is live) */
.waitlist { max-width: 30rem; }
.waitlist label.field-label {
  display: block;
  font: 800 19px/26px var(--display);
  margin-bottom: var(--space-2);
}
.field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.field-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 52px;
  padding: 0 20px;
  font: 400 17px/1 var(--sans);
  color: var(--ink);
  background: var(--surface-raised);
  border: 1.5px solid var(--ink-muted);
  border-radius: var(--radius-pill);
}
.field-row input::placeholder { color: var(--ink-muted); opacity: 1; }
.field-row input[aria-invalid="true"] { border-color: var(--sugar); }

.button {
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--on-ink);
  font: 800 17px/22px var(--display);
  cursor: pointer;
  white-space: nowrap;
}
.button:hover { opacity: .9; }
.button[disabled] { opacity: .6; cursor: progress; }

.form-note { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.form-error { margin-top: var(--space-2); font-size: 15px; color: var(--sugar); font-weight: 600; }
.form-error:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.thanks {
  padding: var(--space-4) 20px;
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  color: var(--brand-deep);
  max-width: 30rem;
}
.thanks strong { display: block; font: 800 19px/26px var(--display); color: var(--brand-deep); }

/* Spoon card: the example stack */
.spoon-card {
  margin: 0;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 440px;
  width: 100%;
  justify-self: center;
}
.spoon-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.juicebox { width: 64px; height: 92px; flex: none; }
.juicebox .box { fill: var(--brand-tint); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.juicebox .fold { stroke: var(--ink); stroke-width: 3; }
.juicebox .window { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 2; }
.juicebox .liquid { fill: var(--honey); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.3); }
.juicebox .straw { fill: none; stroke: var(--ink-muted); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }

.chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--fill-subtle);
  color: var(--ink);
  font: 600 13px/20px var(--sans);
}
.product { font: 600 17px/22px var(--sans); margin-top: var(--space-1); }

.count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: var(--space-4) 0;
}
.count .n { font: 900 64px/64px var(--display); color: var(--sugar-hero); }
.count .unit { font: 800 22px/28px var(--display); }

.spoons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}
.slot {
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot svg { width: 44px; height: 28px; }
.slot .handle { stroke: var(--honey-deep); stroke-width: 4; stroke-linecap: round; }
.slot .bowl { fill: var(--honey); stroke: var(--honey-deep); stroke-width: 2; }
.slot .heap { fill: var(--surface-raised); stroke: var(--honey-deep); stroke-width: 1.5; stroke-linejoin: round; }
.slot.over { background: var(--sugar-tint); }
.slot.over .bowl { fill: var(--sugar-tint); stroke: var(--sugar); }
.slot.over .handle, .slot.over .heap { stroke: var(--sugar); }

.budget-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 13px/18px var(--sans);
  color: var(--ink-muted);
}
.budget-line::before, .budget-line::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--ink-muted);
}

.callout {
  margin-top: var(--space-4);
  padding: 12px var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sugar-tint);
  color: var(--sugar-deep);
  font: 600 15px/22px var(--sans);
}
.callout b { color: var(--sugar); font-weight: 700; }

/* The stack plays once when the card scrolls into view (app.js adds .play). Without JavaScript, or with
   reduced motion, the finished stack is shown as it is. */
@media (prefers-reduced-motion: no-preference) {
  .js .spoon-card:not(.play) .slot { opacity: 0; }
  /* text is revealed with a clip, never faded, so it always has full contrast */
  .js .spoon-card:not(.play) :is(.budget-line, .count, .callout) { clip-path: inset(0 0 100% 0); }
  .js .spoon-card:not(.play) .juicebox .liquid { transform: none; }
  .play .juicebox .liquid { animation: drain 1.6s .3s ease-in-out both; }
  .play .slot { animation: pop .38s var(--ease-pop) both; }
  .play .slot:nth-child(1) { animation-delay: .30s; }
  .play .slot:nth-child(2) { animation-delay: .48s; }
  .play .slot:nth-child(3) { animation-delay: .66s; }
  .play .slot:nth-child(4) { animation-delay: .84s; }
  .play .slot:nth-child(5) { animation-delay: 1.02s; }
  /* the spoons past Mia's 5 arrive in honey, then all turn coral together */
  .play .slot.over { animation-name: pop, turn-slot; animation-duration: .38s, .45s; animation-timing-function: var(--ease-pop), ease; }
  .play .slot.over:nth-child(7) { animation-delay: 1.20s, 2.2s; }
  .play .slot.over:nth-child(8) { animation-delay: 1.38s, 2.2s; }
  .play .slot.over:nth-child(9) { animation-delay: 1.56s, 2.2s; }
  .play .slot.over:nth-child(10) { animation-delay: 1.74s, 2.2s; }
  .play .slot.over .bowl { animation: turn-bowl .45s 2.2s ease both; }
  .play .slot.over .handle, .play .slot.over .heap { animation: turn-line .45s 2.2s ease both; }
  .play .budget-line { animation: reveal .4s 1.15s ease both; }
  .play .count, .play .callout { animation: reveal .45s 2.45s ease both; }
}

@keyframes drain { from { transform: scaleY(1); } to { transform: scaleY(.3); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes reveal { from { clip-path: inset(0 0 100% 0); transform: translateY(6px); } to { clip-path: inset(0); transform: none; } }
@keyframes turn-slot { from { background: transparent; } to { background: var(--sugar-tint); } }
@keyframes turn-bowl { from { fill: var(--honey); stroke: var(--honey-deep); } to { fill: var(--sugar-tint); stroke: var(--sugar); } }
@keyframes turn-line { from { stroke: var(--honey-deep); } to { stroke: var(--sugar); } }

/* Sections */
.section { padding: 56px 0; }
.section + .section { padding-top: 0; }
.section-title { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; font-weight: 900; }
.section-lede { margin-top: var(--space-2); color: var(--ink-muted); max-width: 40em; }

.steps {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.step {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.step-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--brand-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.icon { width: 24px; height: 24px; fill: none; stroke: var(--brand-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step h3, .card h2 { font-size: 22px; line-height: 28px; font-weight: 800; }
.step p, .card p { margin-top: var(--space-1); color: var(--ink-muted); }
.step-n { font: 600 13px/18px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }

.cards { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
.card {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); padding: 0; list-style: none; }

.final {
  text-align: left;
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: 40px var(--space-6);
}
@media (min-width: 720px) { .final { padding: 56px; } }
.final h2 { font-size: clamp(32px, 5vw, 48px); line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
.final .section-lede { margin-top: var(--space-2); }

/* Footer */
.site-footer {
  padding: var(--space-8) 0 40px;
  color: var(--ink-muted);
  font-size: 15px;
}
.site-footer nav ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
}
.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
}
.site-footer p + p { margin-top: var(--space-2); }
.fineprint { font-size: 13px; line-height: 18px; }

/* Legal and support pages */
.page { padding: var(--space-4) 0 var(--space-8); }
.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}
.prose {
  max-width: 720px;
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  margin-top: var(--space-2);
  overflow-wrap: anywhere;
}
@media (min-width: 720px) { .prose { padding: 40px 48px; } }
.prose h1 { font-size: clamp(28px, 4.4vw, 40px); line-height: 1.1; font-weight: 900; letter-spacing: -0.01em; }
.prose h2 { font-size: 22px; line-height: 28px; font-weight: 800; margin-top: var(--space-8); }
.prose h3 { font-size: 18px; line-height: 24px; font-weight: 800; margin-top: var(--space-6); }
.prose p, .prose ul, .prose ol { margin: var(--space-2) 0 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: var(--space-1); }
.prose h1 + p { margin-top: var(--space-4); color: var(--ink-muted); }
.table-scroll { overflow-x: auto; margin-top: var(--space-4); }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 22px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { font-weight: 600; color: var(--ink-muted); border-bottom-color: var(--ink-muted); }

.faq { margin-top: var(--space-6); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-2) 0;
  font: 800 18px/24px var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 24px/1 var(--display); color: var(--brand); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 0 var(--space-4); }
.contact {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-tint);
  color: var(--brand-deep);
}
.contact a { color: var(--brand-deep); font-weight: 700; }