/* Positive landing page (phase 0), in the app's design, "The Paper Garden". One stylesheet for /, /a/, /b/ and
   privacy.html. The tokens are the proposal's (proposal/src/tokens.mjs): white paper, one deep ink for text and
   for everything you can press, whole sheets of colour that end in a hand-cut edge, and night paper when the
   phone asks for dark. Positive Display (Londrina Solid) sets titles and what Pip says; Figtree sets the rest.
   Nothing casts a shadow, nothing has a gradient, and no hairline divides anything. */

@font-face {
  font-family: "Positive Display";
  src: url("fonts/positive-display.d9a8aa29f4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.d467933db0.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --paper: #FFFDF8; --paper2: #F4F0E6;
  --ink: #241E4A;           /* titles, strong text, and anything you can press */
  --ink2: #4B4470;          /* body text on paper */
  --ink3: #655E88;
  --ink-press: #3A3368;
  --outline: #8A83A8;       /* the edge of a field or an unticked choice: 3:1 on paper */
  --on-ink: #FFFDF8;
  --sky: #BDE0F8; --morning: #FFE2A8; --blush: #FBD5DE; --dusk: #CFC9F0;   /* the four scene sheets */
  --hill-back: #A9DD8C; --hill-front: #6FC06A; --cloud: #FFFFFF; --sun: #FFC53D; --tuft: #4FA862;
  --stem: #2F8F5B; --leaf: #4FB06A; --leaf-light: #8AD68F; --soil: #9A6B4B; --soil-deep: #6E4A33;
  --center: #FFC53D; --water: #5BA8F0;
  --pip-body: #A79AF0; --pip-deep: #8777E0; --pip-light: #CFC8FA; --pip-belly: #F3EFFF; --pip-cheek: #FF9DB5;
  --pip-boot: #FFC53D; --pip-boot-cuff: #FFE08A; --pip-boot-deep: #E89B1C; --pip-ink: #241E4A;
  --pip-blanket: #7FB2EE; --pip-blanket-dot: #C3DCF9;
  --jar-glass: #DDF0FA; --jar-shine: #F4FBFF; --jar-lid: #E89B1C;
  --warn-tint: #FFE6D3; --warn-text: #9A430B;
  --display: "Positive Display", "Figtree", system-ui, sans-serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Night: the same garden on night paper. Petals and Pip keep their colour; ink turns to a pale lilac. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121A30; --paper2: #1C2542;
    --ink: #F3F1FF; --ink2: #CFCBE8; --ink3: #A7A2C8; --ink-press: #DAD6F5;
    --outline: #8580AE; --on-ink: #121A30;
    --sky: #25337A; --morning: #2E2C6E; --blush: #3B2A63; --dusk: #2B2A5C;
    --hill-back: #24594F; --hill-front: #1B443F; --cloud: #3A4A94; --sun: #FBE9A8; --tuft: #2F7360;
    --stem: #3E9E6A; --leaf: #4FAE6C; --leaf-light: #7CC98A; --soil: #7B5740; --soil-deep: #5A3D2B;
    --water: #7DBBF5;
    --pip-belly: #E4DDFB; --pip-cheek: #F58FA8;
    --pip-blanket: #6C9EE0; --pip-blanket-dot: #A9C8F2;
    --jar-glass: #2C4470; --jar-shine: #3E5C8F; --jar-lid: #D08A1A;
    --warn-tint: #4A2A14; --warn-text: #FFB98A;
  }
}

/* The six virtue papers: petal, light and deep for the drawings; a tint and its text colour for badges. */
.v-wisdom { --petal: #5B9BF0; --petal-lite: #A5CAF9; --petal-deep: #2F6BD0; --tint: #DCEAFD; --vtext: #1F4FA8; }
.v-courage { --petal: #FF8A3D; --petal-lite: #FFB988; --petal-deep: #E0601A; --tint: #FFE6D3; --vtext: #9A430B; }
.v-humanity { --petal: #F5769E; --petal-lite: #FBB3C9; --petal-deep: #D94878; --tint: #FDE2EA; --vtext: #A82656; }
.v-justice { --petal: #F7BE2E; --petal-lite: #FBDB7C; --petal-deep: #D99A06; --tint: #FCF0C4; --vtext: #735300; }
.v-temperance { --petal: #3FBFA8; --petal-lite: #8FDDCD; --petal-deep: #1E9682; --tint: #D8F3EC; --vtext: #12665A; }
.v-transcendence { --petal: #B872E0; --petal-lite: #D9B0F0; --petal-deep: #9247C4; --tint: #F0E1FA; --vtext: #6F33A3; }
@media (prefers-color-scheme: dark) {
  .v-wisdom { --tint: #1B2F5E; --vtext: #A9CBFF; }
  .v-courage { --tint: #4A2A14; --vtext: #FFB98A; }
  .v-humanity { --tint: #4A1F33; --vtext: #FFAEC6; }
  .v-justice { --tint: #40340F; --vtext: #F9D675; }
  .v-temperance { --tint: #123D38; --vtext: #8FE0CF; }
  .v-transcendence { --tint: #3A2356; --vtext: #DDB4F7; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink2);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  caret-color: var(--ink);
}
::selection { background: #FFC53D; color: #241E4A; }
a { color: var(--ink); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
svg { display: block; }
h1, h2, h3, p { margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* The drawings' own papers */
.sun { fill: var(--sun); }
.hill-back { fill: var(--hill-back); }
.hill-front { fill: var(--hill-front); }
.tuft { fill: var(--tuft); }
.tint-disc { fill: var(--tint); }
.soil-line { fill: none; stroke: var(--soil); stroke-width: 4; stroke-linecap: round; }

/* What Pip says: Pip's own lettering, on a slip of paper with a tail. */
.say { color: var(--ink); font: 400 1.25rem/1.2 var(--display); letter-spacing: 0.015em; }
.bubble { position: relative; background: var(--paper); border-radius: 22px 18px 24px 16px; padding: 12px 16px 13px; }
.bubble::after { content: ""; position: absolute; width: 18px; height: 18px; background: inherit; border-radius: 3px; transform: rotate(45deg); }

/* The hand-cut edge where one sheet ends and the next begins. */
.edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 46px; fill: var(--paper); pointer-events: none; }
.edge--top { top: -1px; bottom: auto; transform: scaleY(-1); }

/* ---------- Brand row, on the day sky ---------- */
.top { background: var(--sky); }
.top .wrap { display: flex; align-items: center; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font: 400 1.75rem/1 var(--display); letter-spacing: 0.01em; text-decoration: none; }
.brand__icon { width: 36px; height: 36px; border-radius: 11px; overflow: hidden; flex: none; }

/* ---------- Hero. On a phone the first screen is the garden itself: the headline in the sky, Pip watering on the
   hills, and the button on the front hill. The subhead and the three points follow on paper.
   Only the headline, subhead and points differ between A and B; the rest of the page is shared. ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.copy { display: contents; }
[data-variant="a"] .copy[data-for="b"],
[data-variant="b"] .copy[data-for="a"] { display: none; }

.hero h1 {
  grid-row: 1;
  padding: 2px 16px 0;
  background: var(--sky);
  color: var(--ink);
  font: 400 clamp(2.875rem, 1.6rem + 5.2vw, 5.25rem)/0.96 var(--display);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.scene {
  grid-row: 2;
  position: relative;
  overflow: hidden;
  container-type: size;
  height: clamp(300px, calc(100vh - 372px), 470px);
  height: clamp(300px, calc(100svh - 372px), 470px);
  background: var(--sky);
}
.scene__art { position: absolute; inset: 0; }
.scene__phone { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scene__wide { display: none; }
.scene__say { position: absolute; right: max(10px, calc(50% - 185px)); bottom: 218px; bottom: min(218px, 53cqh); max-width: 214px; }
.scene__say::after { right: 40px; bottom: -7px; }
/* Pip itself is a button, as in the app: tap it and it answers in the bubble. Shown only when JavaScript runs. */
.pip-tap { position: absolute; right: max(0px, calc(50% - 195px)); bottom: 0; width: 196px; height: min(196px, 48cqh); padding: 0; border: 0; border-radius: 46% 46% 40% 40%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pip-tap:focus-visible { outline-offset: -6px; border-radius: 46% 46% 40% 40%; }

.cta { grid-row: 3; grid-column: 1; background: var(--hill-front); padding: 4px 16px 66px; }
.cta .btn { margin-top: 0; }
.cta__note { margin-top: 10px; color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-align: center; }
/* The cut edge is an ordinary grid item laid over the foot of the button's row. */
.hero__edge { position: relative; grid-row: 3; grid-column: 1; align-self: end; bottom: auto; margin-bottom: -1px; z-index: 2; }

.sub { grid-row: 4; padding: 24px 16px 0; color: var(--ink2); font-size: 1.1875rem; line-height: 1.5; text-wrap: pretty; }
.points { grid-row: 5; list-style: none; margin: 0; padding: 26px 16px 0; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 14px; align-items: center; color: var(--ink); line-height: 1.5; text-wrap: pretty; }
.badge { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tint); }
.badge svg { width: 78%; height: 78%; }

/* ---------- Shared sections ---------- */
h2 { color: var(--ink); font: 400 clamp(2.375rem, 1.75rem + 2.7vw, 3.75rem)/1 var(--display); letter-spacing: 0.005em; text-wrap: balance; }
.band__head { margin-bottom: 28px; }
.band__head p { margin-top: 10px; font-size: 1.125rem; }
.band { position: relative; margin-top: 72px; padding: 92px 0 104px; color: var(--ink); }
.band--dusk { background: var(--dusk); }
.band--blush { background: var(--blush); }
.band--morning { background: var(--morning); }

/* The app screens: a swipeable row on phones, four across on wide screens. The row scrolls inside itself. */
.shots {
  list-style: none;
  margin: 0 -16px;
  padding: 4px 16px 14px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(224px, 66%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ink) transparent;
}
.shots:focus-visible { outline-offset: -3px; border-radius: 30px; }
.shot { scroll-snap-align: start; }
.shot figure { margin: 0; }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 540 / 1169; border-radius: 34px 30px 36px 28px; background: var(--paper); }
.shot figcaption { margin-top: 14px; padding: 0 4px; color: var(--ink); font-size: 1rem; line-height: 1.45; text-wrap: pretty; }
.shot figcaption strong { display: block; margin-bottom: 3px; color: var(--ink); font: 400 1.5rem/1.1 var(--display); letter-spacing: 0.01em; }

/* How it works: three drawn steps on one ground line, the way the app draws growth. */
.how { padding: 72px 0 8px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.step__art { width: min(100%, 340px); height: auto; aspect-ratio: 300 / 190; margin-bottom: 18px; overflow: visible; }
.step h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--ink); font: 400 1.75rem/1.08 var(--display); letter-spacing: 0.01em; text-wrap: balance; }
.step h3 b { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 44%; background: var(--tint); color: var(--vtext); font: 800 1rem/1 var(--body); letter-spacing: 0; }
.step p { max-width: 34em; text-wrap: pretty; }

/* Kind by design: what is true of the first release, with Pip under a blanket. */
.kind__pip { display: flex; align-items: center; gap: 6px; margin: -8px 0 22px -10px; }
.kind__art { width: 168px; height: auto; aspect-ratio: 240 / 216; flex: none; }
.kind__say { flex: 0 1 190px; }
.kind__say::after { left: -7px; top: 50%; margin-top: -9px; }
.promises { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 20px; }
.promises li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.promises h3 { margin: 2px 0 3px; color: var(--ink); font: 700 1.125rem/1.3 var(--body); }
.promises p { text-wrap: pretty; }
.disc { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--ink); }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.grounding { position: relative; margin-top: 30px; padding-left: 28px; color: var(--ink); font-weight: 700; line-height: 1.5; text-wrap: pretty; max-width: 34em; }
.grounding::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 14px; height: 14px; border-radius: 50% 50% 50% 2px; background: var(--leaf); transform: rotate(-20deg); }

/* The sign-up, on the morning sheet: Pip stands on the form with a seed packet. */
.join { scroll-margin-top: 0; padding-bottom: 118px; }
.join__intro p { margin-top: 10px; font-size: 1.125rem; max-width: 26em; }
.join__art { width: 236px; height: auto; aspect-ratio: 280 / 190; margin: 10px 0 -6px 4px; position: relative; z-index: 1; overflow: visible; }
.join__art .soil-line { display: none; }
.sheet { background: var(--paper); border-radius: 30px 24px 32px 22px; padding: 26px 20px 24px; color: var(--ink2); }
.signup { scroll-margin-top: 16px; }

/* ---------- The waitlist form ---------- */
.field + .field { margin-top: 22px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.label, legend { display: block; margin: 0 0 10px; padding: 0; color: var(--ink); font: 700 1rem/1.4 var(--body); }

.input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 18px;
  border: 0;
  border-radius: 22px 18px 24px 16px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--outline);
  color: var(--ink);
  font: 400 1.0625rem/1.4 var(--body);   /* 17px, so phones don't zoom on focus */
  -webkit-appearance: none;
  appearance: none;
}
.input:focus, .input:focus-visible { outline: none; box-shadow: inset 0 0 0 2.5px var(--ink); }

/* Radio choices as pills: the native input stays in place (invisible) so taps, keyboard and screen readers work.
   Chosen is an ink pill with a tick and a heavier label. */
.choices { display: grid; gap: 8px; }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice { position: relative; display: block; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px var(--ink);
  color: var(--ink);
  font: 700 0.9375rem/1.25 var(--body);
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease;
}
.choice input:checked + span { background: var(--ink); color: var(--on-ink); font-weight: 800; }
.choice input:checked + span::before {
  content: "";
  width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: var(--tick) center / contain no-repeat;
          mask: var(--tick) center / contain no-repeat;
}
.choice input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .choice:hover input:not(:checked) + span { background: var(--paper2); } }

/* Checkboxes: the whole row is the label, at least 48 high. */
.check { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 11px 0; color: var(--ink); line-height: 1.45; cursor: pointer; }
.check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  margin: 0;
  border-radius: 10px 8px 10px 7px;
  box-shadow: inset 0 0 0 2px var(--outline);
  cursor: pointer;
}
.check input::before { content: ""; width: 18px; height: 18px; background: var(--on-ink); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; opacity: 0; }
.check input:checked { background: var(--ink); box-shadow: none; }
.check input:checked::before { opacity: 1; }
.check input:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.checks { margin-top: 12px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* decoy field for form bots, never stored */
.consent-link { display: inline-flex; align-items: center; min-height: 44px; margin: -4px 0 0 40px; font-size: 0.9375rem; }

.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 18px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-ink);
  font: 700 1.0625rem/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 160ms ease;
}
.btn:hover { background: var(--ink-press); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }

.note { margin-top: 16px; padding: 12px 16px; border-radius: 22px 18px 24px 16px; background: var(--paper2); color: var(--ink); font: 600 0.9375rem/1.45 var(--body); }
.note:empty { display: none; }
.note--warn { background: var(--warn-tint); color: var(--warn-text); }

/* Thank-you: shown by :target, so it works the same with JavaScript (the adapter sets the #hash)
   and without it (the Worker redirects to the page with #thanks or #thanks-chat). */
.thanks { display: none; text-align: center; padding: 0 2px 6px; scroll-margin-top: 16px; }
.thanks:target { display: block; }
.thanks:target ~ .waitlist,
.thanks:target ~ .step2 { display: none; }
.thanks:focus { outline: none; }
.thanks__art { width: 220px; height: 150px; margin: 0 auto 10px; overflow: visible; }
.thanks h3 { margin-bottom: 8px; color: var(--ink); font: 400 2.5rem/1 var(--display); letter-spacing: 0.01em; }
.thanks p { margin: 0 auto; max-width: 30em; }
.thanks p + p { margin-top: 14px; }
.thanks .chat { display: inline-block; padding: 10px 16px; border-radius: 22px 18px 24px 16px; background: var(--paper2); color: var(--ink); font-weight: 700; }
.nw { white-space: nowrap; }

.dry { margin: 0 0 16px; text-align: left; }
.dry dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; margin: 8px 0 0; font-weight: 500; }
.dry dl + p { margin-top: 10px; }
.dry dt { font-weight: 800; }
.dry dd { margin: 0; overflow-wrap: anywhere; }

/* Step 2: the optional questions, shown once the email is in. */
.step2 h3 { margin-bottom: 6px; color: var(--ink); font: 400 2.125rem/1.05 var(--display); letter-spacing: 0.01em; }
.step2 h3:focus { outline: none; }
.step2__lead { margin-bottom: 20px; }
.skip {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 48px; margin-top: 6px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ink); font: 700 0.9375rem/1.3 var(--body);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  cursor: pointer;
}
.skip:hover { text-decoration-thickness: 3px; }

/* ---------- Footer: the front hill, where the page ends ---------- */
.foot { position: relative; background: var(--hill-front); color: var(--ink); font-size: 0.9375rem; line-height: 1.55; padding: 6px 0 34px; }
.foot .edge { bottom: 100%; margin-bottom: -1px; fill: var(--hill-front); }
.foot p { margin-bottom: 8px; max-width: 46em; }
.foot--notice { margin-top: 110px; }

/* ---------- Privacy notice ---------- */
.notice-head { position: relative; background: var(--sky); color: var(--ink); padding: 14px 0 76px; overflow: hidden; }
.notice-head h1 { color: var(--ink); font: 400 clamp(2.75rem, 2rem + 3.4vw, 4.5rem)/0.98 var(--display); letter-spacing: 0.005em; text-wrap: balance; max-width: 9em; }
.notice-head .lede { margin-top: 14px; font-size: 1.1875rem; line-height: 1.5; max-width: 30em; }
.notice-head__art { width: 210px; height: auto; aspect-ratio: 250 / 160; margin: 18px 0 -34px auto; overflow: visible; }
.notice { max-width: 44em; padding-top: 22px; }
.notice h2 { margin: 36px 0 8px; font-size: 1.875rem; line-height: 1.1; letter-spacing: 0.01em; }
.notice p, .notice li { line-height: 1.65; }
.notice p + p { margin-top: 12px; }
.notice ul { margin: 0; padding-left: 0; list-style: none; }
.notice li { position: relative; padding-left: 28px; }
.notice li::before { content: ""; position: absolute; left: 2px; top: 0.52em; width: 12px; height: 12px; border-radius: 50% 50% 50% 2px; background: var(--leaf); transform: rotate(-20deg); }
.notice li + li { margin-top: 6px; }
.notice ul + p { margin-top: 12px; }
.todo { padding: 1px 7px; border-radius: 8px 6px 9px 5px; background: var(--warn-tint); color: var(--warn-text); font-weight: 700; }

/* ---------- Wider screens ---------- */
@media (min-width: 560px) {
  .wrap { padding: 0 24px; }
  .hero h1, .sub, .points { padding-left: 24px; padding-right: 24px; }
  .cta { padding-left: 24px; padding-right: 24px; }
  .cta .btn, .cta__note { max-width: 26rem; margin-left: auto; margin-right: auto; }
  .sub, .points { max-width: 40rem; }
  .sheet { padding: 30px 28px 28px; }
  .choices--wrap { display: flex; flex-wrap: wrap; }
  .choices--wrap .choice span { padding-left: 22px; padding-right: 22px; }
  .shots { margin: 0 -24px; padding-left: 24px; padding-right: 24px; scroll-padding: 0 24px; grid-auto-columns: minmax(224px, 40%); }
  .edge { height: 60px; }
}
@media (min-width: 960px) {
  .wrap { padding: 0 40px; }
  .top .wrap { min-height: 76px; }
  .brand { font-size: 2rem; }
  .brand__icon { width: 42px; height: 42px; border-radius: 13px; }

  /* The garden runs the full width behind the words; Pip stands at the right. */
  .hero {
    grid-template-columns: minmax(40px, 1fr) minmax(0, 560px) minmax(0, 560px) minmax(40px, 1fr);
    grid-template-rows: auto auto auto auto;
  }
  .hero::before { content: ""; grid-row: 1 / 4; grid-column: 1 / -1; background: var(--sky); }
  .hero h1 { grid-row: 1; grid-column: 2; z-index: 2; padding: 8px 0 0; background: none; }
  .sub { grid-row: 2; grid-column: 2; z-index: 2; max-width: none; padding: 20px 40px 0 0; color: var(--ink); font-size: 1.3125rem; }
  .cta { grid-row: 3; grid-column: 2; z-index: 2; padding: 26px 0 240px; background: none; }
  .cta .btn { margin-left: 0; }
  .cta .btn, .cta__note { max-width: 22rem; margin-left: 0; margin-right: 0; }
  .scene { grid-row: 1 / 4; grid-column: 1 / -1; z-index: 1; height: auto; background: none; container-type: normal; }
  .scene__phone { display: none; }
  .scene__wide { display: block; position: absolute; left: 50%; bottom: 0; width: 1440px; height: 760px; margin-left: -720px; overflow: visible; }
  .scene__say { right: max(24px, calc(50% - 548px)); bottom: 404px; max-width: 250px; font-size: 1.5rem; padding: 14px 20px 15px; }
  .scene__say::after { right: auto; left: 44px; }
  .pip-tap { right: auto; left: calc(50% + 100px); bottom: 92px; width: 310px; height: 300px; }
  .hero__edge { grid-row: 3; grid-column: 1 / -1; z-index: 2; height: 70px; }
  .points { grid-row: 4; grid-column: 2 / 4; max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; padding: 44px 0 0; }
  .points li { grid-template-columns: minmax(0, 1fr); row-gap: 14px; align-items: start; font-size: 1.125rem; }
  .badge { width: 64px; height: 64px; }

  .edge { height: 70px; }
  .band { margin-top: 112px; padding: 132px 0 148px; }
  .band__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
  .band__head p { margin: 0 0 6px; font-size: 1.25rem; text-align: right; }
  .shots { margin: 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; overflow: visible; }
  .shot figcaption { font-size: 1.0625rem; }

  .how { padding: 112px 0 8px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
  .step__art { width: 100%; max-width: 340px; }
  .step h3 { font-size: 2rem; align-items: flex-start; }
  .step h3 b { margin-top: 1px; }

  .kind__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: center; }
  .kind__pip { flex-direction: column-reverse; align-items: flex-start; gap: 20px; margin: 0; padding-left: 40px; }
  .kind__art { width: 340px; }
  .kind__say { flex: none; margin-left: 150px; font-size: 1.625rem; padding: 14px 20px 15px; max-width: 250px; }
  .kind__say::after { left: 40px; top: auto; bottom: -7px; margin: 0; }
  .promises { margin-top: 32px; gap: 24px; }
  .promises p { font-size: 1.125rem; }
  .grounding { margin-top: 36px; font-size: 1.125rem; }

  .join { padding-bottom: 170px; }
  .join__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 64px; align-items: center; }
  .join__intro p { font-size: 1.25rem; }
  .join__art { width: 360px; margin: 28px 0 0 20px; }
  .join__art .soil-line { display: inline; }
  .sheet { padding: 40px 40px 36px; }

  .foot { padding-bottom: 44px; }
  .notice-head { padding: 28px 0 100px; }
  .notice-head .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: end; }
  .notice-head__art { grid-column: 2; grid-row: 1 / 3; width: 330px; margin: 0 40px -58px 0; }
  .notice-head .lede { font-size: 1.3125rem; }
  .notice { padding-top: 30px; }
  .notice h2 { font-size: 2.125rem; margin-top: 44px; }
}

/* ---------- Motion: the garden is alive, slowly. Stems sway from the soil, Pip bobs as it waters, the drops
   fall, the clouds drift, the sparkles blink. All of it stops when reduced motion is asked. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 2.6s ease-in-out infinite alternate; }
  .sway--2 { animation-duration: 2.3s; animation-delay: -0.7s; }
  .sway--3 { animation-duration: 2.9s; animation-delay: -1.5s; }
  .drift { animation: drift 11s ease-in-out infinite alternate; }
  .drift--2 { animation-duration: 14s; animation-delay: -5s; }
  .bob { transform-box: fill-box; transform-origin: 60% 100%; animation: bob 1.5s ease-in-out infinite alternate; }
  .bob.hop { animation: hop 560ms cubic-bezier(0.2, 0.8, 0.2, 1), bob 1.5s ease-in-out 560ms infinite alternate; }
  .drops { animation: drip 1.3s ease-in infinite; }
  .twinkle { transform-box: fill-box; transform-origin: 50% 50%; animation: twinkle 2.4s ease-in-out infinite alternate; }
  .twinkle--2 { animation-delay: -0.8s; }
  .twinkle--3 { animation-delay: -1.6s; }
  /* The other drawings, in the same hand. `.at` turns around a point of the picture, given inline. */
  .at { transform-box: view-box; }
  .bob--slow { animation-duration: 2.4s; }
  .bounce { animation: bounce 1.5s ease-in-out infinite alternate; }
  .blink { animation: blink 5.2s ease-in-out infinite; }
  .blink--sleepy { animation: blink-sleepy 6.8s ease-in-out infinite; }
  .rise { animation: rise 3.9s ease-in-out infinite; }
  .rise--2 { animation-delay: 0.45s; }
  .rise--3 { animation-delay: 0.9s; }
  .float { animation: float 2.9s ease-in-out infinite alternate; }
  .float--2 { animation-duration: 3.4s; animation-delay: -1.2s; }
  .float--3 { animation-duration: 2.6s; animation-delay: -2s; }
  .grow { animation: grow 5.2s ease-in-out infinite alternate; }
  .steam { animation: steam 3.4s ease-in-out infinite; }
  .steam--2 { animation-delay: -1.5s; }
  .breathe { animation: breathe 3.6s ease-in-out infinite alternate; }
  .away * { animation-play-state: paused; }
}
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(16px); } }
@keyframes bob { from { transform: rotate(0deg); } to { transform: rotate(-1.6deg) translateY(-2px); } }
@keyframes hop { 0% { transform: translateY(0) scale(1, 1); } 22% { transform: translateY(2px) scale(1.04, 0.94); } 55% { transform: translateY(-18px) scale(0.98, 1.03); } 82% { transform: translateY(0) scale(1.03, 0.97); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes drip { 0% { transform: translateY(-7px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(12px); opacity: 0; } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes blink-sleepy { 0%, 84%, 100% { transform: scaleY(1); } 89%, 94% { transform: scaleY(0.12); } }
@keyframes rise { 0% { transform: translate(-2px, 5px); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translate(1px, -5px); opacity: 0; } }
@keyframes float { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
@keyframes grow { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes steam { 0% { transform: translateY(3px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-7px); opacity: 0; } }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.014, 1.022); } }
@keyframes twinkle { from { opacity: 0.35; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }