/* Yumo website — "Basil" design system.
   Tokens mirror ios/Yumo/DesignSystem/Theme.swift (Palette, Radius, Typo).
   CSP is default-src 'self'; style-src 'self' — everything lives in this file.
   No inline styles, no webfonts, no external assets. */

:root {
  /* Surfaces */
  --ground: #FBF7EF;
  --card: #FFFFFF;
  --well: #F3EDDF;
  --stroke: #EFE8D8;
  --stroke-field: #E4DBC7;

  /* Brand */
  --brand: #36533B;
  --brand-top: #405F45;
  --leaf-soft: #E8EDE2;
  --brand-on-photo: #B8D5B6;

  /* Ink on a brand or basil fill — Theme.swift's onBrand / onInk. */
  --on-brand: #FFFFFF;

  /* Ink */
  --ink: #1C2B22;
  --ink-2: #5E6A5E;

  /* Accents */
  --gold: #C87A12;
  --heart: #FB3A09;

  /* Dark band */
  --basil-deep: #263E2D;
  --on-ink-2: #D0DCCB;
  --well-on-ink: #2B4530;

  /* Radii */
  --r-card: 22px;
  --r-tile: 18px;
  --r-control: 16px;
  --r-pill: 999px;

  /* Elevation — black tonal, never colored */
  --sh-1: 0 1px 2px rgba(28, 43, 34, .06);
  --sh-2: 0 18px 48px rgba(28, 43, 34, .08);

  /* Type */
  --font-display: ui-rounded, "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  --font-text: system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing */
  --gutter: 24px;
  --section-y: 104px;
  --hero-y-top: 72px;
  --hero-y-bottom: 64px;

  /* Legacy aliases: the legal, support and 404 pages still name these. */
  --leaf: var(--brand);
  --forest: var(--brand);
  --soft: var(--leaf-soft);
  --muted: var(--ink-2);
  --line: var(--stroke-field);
  --shadow: var(--sh-2);
}

/* ---------------------------------------------------------------- base */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.02rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

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

h1, h2, h3, .eyebrow, .button, .store-pill, .num, .brand, .plan-name, .faq summary, .goal h3, .stat {
  font-family: var(--font-display);
}

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

h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  font-weight: 900;
  line-height: .93;
  letter-spacing: -.07em;
}

h2 {
  font-size: clamp(2rem, 4.1vw, 3.35rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.055em;
}

h3 {
  font-size: 1.26rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

.wrap { width: min(1180px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-control) 0;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
}

.skip:focus { left: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  background: var(--leaf-soft);
  color: var(--brand);
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--brand-top), var(--brand));
  color: var(--on-brand);
  font-size: 1.02rem;
  font-weight: 800;
  text-decoration: none;
}

/* ------------------------------------------------------------- sections */

.section {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0;
}

section[id] { scroll-margin-top: 104px; }

.band-well { background: var(--well); }

/* Decorations sit at z-index 0; content must stay above them. */
.section > .wrap { position: relative; z-index: 1; }

.section-head { max-width: 780px; }

.section-head .eyebrow { margin-bottom: 20px; }

.section-head h2 + p { margin-top: 18px; color: var(--ink-2); font-size: 1.12rem; max-width: 60ch; }

.section-body { margin-top: 56px; }

.footnote { margin-top: 32px; color: var(--ink-2); font-size: .92rem; max-width: 62ch; }

.disclosure {
  margin-top: 32px;
  padding: 16px 20px;
  border-radius: var(--r-control);
  background: var(--card);
  color: var(--ink-2);
  font-size: .88rem;
  line-height: 1.55;
  max-width: 74ch;
}

.band-well .disclosure { background: var(--ground); }

/* On the sand band the pill's own --well fill would vanish. */
.band-well .store-pill { background: var(--ground); }

/* ------------------------------------------------------------------ nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 0;
  background: var(--ground);
  border-bottom: 1px solid var(--stroke);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* The legal, support and 404 pages put .nav and .wrap on the same element. */
.nav.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--brand);
  font-size: 1.35rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img { display: block; width: 96px; height: auto; }

.links { display: flex; align-items: center; gap: 6px; }

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-control);
  color: var(--ink-2);
  font-weight: 650;
  text-decoration: none;
}

.links a:hover { color: var(--ink); background: var(--well); }

/* ---------------------------------------------------------- store row */

.store-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* Apple's badge keeps clear space of one quarter of its height on every side
   and is never recolored, angled or animated. */
.badge {
  display: inline-flex;
  padding: 12px;
  text-decoration: none;
}

.badge img { display: block; height: 48px; width: auto; }

.badge-sm { padding: 10px; }

.badge-sm img { height: 40px; }

.store-pill {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  margin: 12px 0;
  min-height: 48px;
  padding: 6px 20px;
  border-radius: var(--r-control);
  background: var(--well);
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.store-pill small { font-size: .8rem; font-weight: 600; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  overflow: hidden;
  min-height: min(92vh, 860px);
  display: flex;
  align-items: center;
  padding: var(--hero-y-top) 0 var(--hero-y-bottom);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.26fr) minmax(0, .74fr);
  grid-template-areas:
    "copy phones"
    "line phones";
  align-items: center;
  gap: 40px 48px;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--ground) 0%,
    rgba(251, 247, 239, .94) 30%,
    rgba(251, 247, 239, .55) 52%,
    rgba(251, 247, 239, 0) 74%
  );
}

.hero-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

/* The poster <img> is in flow, so it paints under the ::after scrim on its own.
   The video has to be taken out of flow to sit on top of the poster. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: 0;
}

.hero-copy { grid-area: copy; position: relative; z-index: 2; }

.hero-copy h1 { margin: 22px 0 0; }

.hero-copy .sub {
  margin-top: 22px;
  max-width: 34ch;
  color: var(--ink-2);
  font-size: 1.16rem;
}

.hero-copy .store-row { margin-top: 26px; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.facts li {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--well);
  color: var(--ink-2);
  font-size: .86rem;
  line-height: 1.3;
}

.hero-phones {
  grid-area: phones;
  position: relative;
  z-index: 2;
  min-height: 640px;
}

.hero-phones .phone { position: absolute; width: 238px; }

.phone-back { left: 56px; top: 28px; transform: rotate(-6deg); }

.phone-front { right: -52px; top: 74px; transform: rotate(5deg); }

.hero-line {
  grid-area: line;
  align-self: end;
  position: relative;
  z-index: 2;
  max-width: 30ch;
  padding: 18px 22px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-2);
  color: var(--ink);
  font-size: 1rem;
}

/* -------------------------------------------------------- phone frames */

.phone {
  padding: 10px;
  border-radius: 44px;
  background: var(--ink);
  box-shadow: var(--sh-2);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
}

/* --------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.step {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-2);
}

.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--well);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 900;
}

.step h3 { margin: 18px 0 8px; }

.step p { margin-bottom: 22px; color: var(--ink-2); font-size: .99rem; }

/* The captures are mostly white UI on a white card, so the tile needs an edge. */
.vignette {
  margin-top: auto;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: var(--r-tile);
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--stroke-field);
}

.vignette img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center -78px;
}

/* Each capture carries a different amount of chrome above its first real row:
   the home screen has a credits pill under the status bar, while the planner
   and grocery screens put their title straight under it. */
.vignette-deep img { object-position: center -96px; }

.vignette-top img { object-position: center -46px; }

.vignette-mid img { object-position: center -64px; }

/* ------------------------------------------------------------ features */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.feature {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-2);
}

.feature .vignette { margin: 0 0 18px; aspect-ratio: 4 / 3; }

.feature h3 { font-size: 1.2rem; }

.feature p { margin-top: 8px; color: var(--ink-2); font-size: .96rem; }

/* Only two of the six cards carry a "Yumo Pro" tag. The slot is reserved on
   all six so the titles of a grid row sit on one baseline. */
.meta {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin-bottom: 10px;
}

.tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--well);
  color: var(--ink-2);
  font-size: .76rem;
  font-weight: 700;
}

/* --------------------------------------------------- generated card art */

/* Every How and Features card carries `data-art="<key>"`. While
   `img/cards/<key>.webp` is missing the card keeps its flat capture crop in
   `.vignette`; once the file lands the crop is replaced in place by
   `<img class="card-art">`, which `order: -1` lifts to the top of the card
   without moving anything else. */
.card-art {
  display: block;
  order: -1;
  width: 100%;
  /* The width/height attributes on the tag are presentational hints that map
     to CSS width and height, and a set height beats `aspect-ratio`. Without
     this the 800x1066 source rendered 333x1066 and the card grew to 1269px. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-tile);
  background: var(--well);
}

.step .card-art { margin: 0 0 20px; }

.feature .card-art { margin: 0 0 18px; }

/* The step paragraph is the last box once the art has moved to the top. */
.step:has(.card-art) p { margin-bottom: 0; }

/* --------------------------------------------------------------- remix */

.remix-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 48px;
  align-items: center;
}

.goals { display: grid; gap: 12px; }

.goal {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-radius: var(--r-tile);
  background: var(--ground);
  box-shadow: var(--sh-1);
}

.goal img { display: block; width: 62px; height: auto; }

.goal h3 { font-size: 1.14rem; }

.goal p { margin-top: 2px; color: var(--ink-2); font-size: .95rem; }

.remix-phone { justify-self: center; width: min(300px, 100%); }

/* ------------------------------------------------------------- sources */

.sources {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.source {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 30px 12px;
  border-radius: var(--r-tile);
  background: var(--card);
  box-shadow: var(--sh-1);
  text-align: center;
}

.source img { display: block; width: 30px; height: 30px; }

.source span { font-weight: 650; font-size: .98rem; }

/* ----------------------------------------------------------------- pro */

.pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.plan {
  padding: 32px;
  border-radius: var(--r-card);
  background: var(--well);
}

.band-well .plan { background: var(--ground); }

.plan-pro,
.band-well .plan-pro { background: var(--card); box-shadow: var(--sh-2); }

.plan-name { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; }

.plan-lede { margin-top: 6px; color: var(--ink-2); font-size: 1.2rem; }

.plan ul { margin-top: 24px; display: grid; gap: 2px; }

.plan li {
  padding: 14px 0;
  border-top: 1px solid var(--stroke-field);
  font-size: 1rem;
}

.plan-pro li { border-top-color: var(--stroke); }

.pro-note { margin-top: 28px; color: var(--ink-2); font-size: .98rem; max-width: 68ch; }

.pro-actions { margin-top: 12px; }

/* ---------------------------------------------------------- statements */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.quote {
  padding: 30px 28px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-2);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.03em;
}

/* ----------------------------------------------------------------- faq */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px 56px;
  align-items: start;
}

.faq-grid .section-head { max-width: none; }

.faq-grid .section-body { margin-top: 0; }

.faq-list { display: grid; gap: 10px; }

.faq-list details {
  border-radius: var(--r-tile);
  background: var(--card);
  box-shadow: var(--sh-1);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 44px;
  padding: 20px 24px;
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -.02em;
  list-style: none;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  flex: none;
  color: var(--ink-2);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list p { padding: 0 24px 22px; color: var(--ink-2); }

/* ----------------------------------------------------------------- cta */

.cta {
  background: var(--basil-deep);
  color: var(--on-brand);
  text-align: center;
}

.cta h2 { color: var(--on-brand); }

.cta .eyebrow { background: var(--well-on-ink); color: var(--brand-on-photo); }

.cta .sub { margin-top: 20px; color: var(--on-ink-2); font-size: 1.16rem; }

.cta .section-head { max-width: 720px; margin-inline: auto; }

.cta .section-head p { margin-inline: auto; }

.cta .store-row { justify-content: center; margin-top: 26px; }

.cta .store-pill { background: var(--well-on-ink); color: var(--on-ink-2); }

.cta :focus-visible { outline-color: var(--brand-on-photo); }

/* --------------------------------------------------------------- decor */

.deco {
  position: absolute;
  z-index: 0;
  width: 190px;
  height: auto;
  pointer-events: none;
}

.deco-tomato { top: 14px; right: -66px; width: 210px; }

.deco-lemon { bottom: 18px; left: -70px; width: 200px; }

.deco-herbs { top: 16px; right: -68px; width: 210px; }

.deco-avocado { bottom: 16px; left: -58px; width: 200px; }

.deco-garlic { top: 16px; right: -52px; width: 170px; }

/* -------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--stroke);
  padding: 44px 0 56px;
}

.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px 40px;
  color: var(--ink-2);
  font-size: .94rem;
}

.foot img { display: block; width: 84px; height: auto; margin-bottom: 12px; }

.foot nav { display: flex; flex-wrap: wrap; gap: 4px 6px; }

.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--r-control);
  color: var(--ink-2);
}

.trademark {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--stroke);
  color: var(--ink-2);
  font-size: .78rem;
}

.trademark span { display: block; max-width: 80ch; }

/* ------------------------------------------- legal, support, 404 pages */

.legal { width: min(760px, calc(100% - var(--gutter) * 2)); margin: 55px auto 100px; }

.legal h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); letter-spacing: -.055em; line-height: 1; }

.legal h2 { margin-top: 42px; font-size: clamp(1.5rem, 3vw, 2rem); }

.legal p, .legal li { color: var(--ink); }

.legal ul { list-style: disc; padding-left: 22px; }

.legal ul li { margin: 8px 0; }

.legal p + p, .legal p + ul, .legal ul + p, .legal address + p { margin-top: 14px; }

.legal .eyebrow + h1 { margin-top: 16px; }

.legal address { font-style: normal; margin-top: 14px; }

.legal .button { margin-top: 20px; }

.notice { background: var(--leaf-soft); padding: 18px 20px; border-radius: var(--r-control); }

.support-box {
  background: var(--card);
  padding: 28px;
  border-radius: var(--r-card);
  box-shadow: var(--sh-2);
}

.support-box h2 { margin-top: 0; }

/* -------------------------------------------------------------- motion */

/* `.reveal` is an inert hook. A scroll-driven `animation-timeline: view()` fade
   was specified here, but Chrome resolves the view progress of an already
   scrolled document as 0 on a fragment load, so opening /#pro (or any other
   anchor) painted the whole section at opacity 0. Verified across the 2026-09-10
   capture sweep: every fragment-navigated frame came back as bare ground.
   Content correctness beats the fade; the floating decorations carry the motion. */
.reveal { opacity: 1; transform: none; }

@keyframes float-y {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

@media (prefers-reduced-motion: no-preference) {
  .deco { animation: float-y 9s ease-in-out infinite alternate; }
  .deco-lemon { animation-duration: 11s; animation-delay: -3s; }
  .deco-herbs { animation-duration: 12s; animation-delay: -6s; }
  .deco-garlic { animation-duration: 10s; animation-delay: -2s; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-video { display: none; }
  .deco { animation: none; }
}

/* --------------------------------------------------------- breakpoints */

@media (max-width: 1100px) {
  :root { --section-y: 84px; }

  .steps, .feature-grid, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero-grid { gap: 32px; }

  .hero-phones { min-height: 540px; }

  .hero-phones .phone { width: 208px; }

  .remix-grid { gap: 32px; }

  .vignette img { object-position: center -112px; }

  .vignette-deep img { object-position: center -138px; }

  .vignette-top img { object-position: center -66px; }

  .vignette-mid img { object-position: center -92px; }
}

@media (max-width: 780px) {
  :root { --gutter: 20px; --section-y: 68px; --hero-y-top: 36px; --hero-y-bottom: 56px; }

  .links { display: none; }

  .hero {
    display: block;
    min-height: 0;
    padding: var(--hero-y-top) 0 var(--hero-y-bottom);
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "media"
      "phones"
      "line";
    gap: 28px;
    align-items: stretch;
  }

  .hero-media {
    grid-area: media;
    position: relative;
    inset: auto;
    border-radius: var(--r-card);
    overflow: hidden;
  }

  .hero-media::after { display: none; }

  .hero-poster { aspect-ratio: 16 / 9; height: auto; object-position: center; }

  .hero-video { object-position: center; }

  .hero-copy .sub { max-width: none; }

  .hero-phones {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, 42%);
    justify-content: center;
    gap: 16px;
  }

  .hero-phones .phone {
    position: static;
    width: 100%;
    transform: none;
    padding: 6px;
    border-radius: 26px;
  }

  .hero-phones .phone img { border-radius: 21px; }

  .hero-line { max-width: none; align-self: auto; }

  .vignette img { object-position: center -64px; }

  .vignette-deep img { object-position: center -79px; }

  .vignette-top img { object-position: center -38px; }

  .vignette-mid img { object-position: center -64px; }

  .steps, .feature-grid, .quotes, .pro-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); }

  .faq-grid { gap: 28px; }

  .faq-grid .section-body { margin-top: 0; }

  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .remix-grid { grid-template-columns: minmax(0, 1fr); }

  .remix-phone { width: min(260px, 78%); }

  .section-body { margin-top: 40px; }

  .plan { padding: 26px; }

  /* A corner sticker has nowhere to go beside a full-width heading at 390.
     The closing band was the one exception, on the theory that centered copy
     leaves room either side — it does not: at 390 the h2 fills the wrap, so
     the garlic landed on "is" and "phone." and the avocado sat under the left
     edge of the App Store badge. Decorations are off at this width, all of
     them. They return at 781 px, where the measured clearances are wide. */
  .deco { display: none; }

  .foot { flex-direction: column; }

  .legal { margin: 36px auto 72px; }
}

@media (max-width: 430px) {
  .sources { grid-template-columns: minmax(0, 1fr); }

  .source { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 18px 20px; text-align: left; }

  .goal { grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 14px 16px; }

  .goal img { width: 52px; }

  .quote { font-size: 1.1rem; padding: 24px 22px; }
}