/* No pure black: shadows and darks are tinted green-black (#0C1410). */

/* Literata, the app's own copy (SIL Open Font License, fonts/OFL.txt), served
   from this site so no page asks another company's server for anything.
   build.sh copies the files from the app. Literata is only ever set at 600
   and 700, so those are the only two weights here. */
@font-face { font-family: "Literata"; src: url("fonts/Literata-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/Literata-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* ------------------------------------------------------------------
   One Step: public site.
   The app's scrapbook on the web: forest bands, cream paper pages, white
   scraps with torn edges, masking tape, and Freddie in a few places.
   Colours are the app's Theme.swift. Light only, like the app.
   ------------------------------------------------------------------ */

:root {
  --forest: #1E4D33;
  --forest-deep: #143324;
  --cream: #F4EFE3;
  --paper: #FFFFFF;
  --rim: #FBF8F1;
  --scrap: #FBF8F1;
  --kraft: #E9E2D0;
  --scrapbook: #EEE5D1;
  --lime: #A4C43A;
  --lime-pale: #DCE8B5;
  --ink: #16211B;
  --ink-2: #5C6660;
  --on-forest: #F4EFE3;
  --on-forest-2: #C8D2C3;
  --pencil: #B3A78F;
  --tape: rgba(232, 218, 176, 0.88);
  /* The current page's underline: a pencil stroke, as in the app's PencilLine. */
  --pencil-lime: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1.0 3.58 L5.9 3.71 L10.8 3.22 L15.8 2.40 L20.7 2.12 L25.6 2.20 L30.5 1.98 L35.4 2.24 L40.3 2.20 L45.2 2.80 L50.2 3.62 L55.1 3.66 L60.0 3.13 L64.9 2.42 L69.8 2.32 L74.8 2.81 L79.7 3.13 L84.6 2.56 L89.5 2.80 L94.4 2.52 L99.3 2.78 L104.2 2.91 L109.2 2.88 L114.1 3.36 L119.0 3.96 L119.0 4.46 L114.1 4.49 L109.2 4.80 L104.2 5.49 L99.3 4.80 L94.4 4.94 L89.5 5.00 L84.6 4.44 L79.7 4.82 L74.8 4.93 L69.8 4.73 L64.9 5.17 L60.0 4.89 L55.1 5.67 L50.2 5.28 L45.2 4.96 L40.3 5.12 L35.4 4.15 L30.5 4.73 L25.6 3.93 L20.7 4.33 L15.8 4.71 L10.8 4.91 L5.9 4.39 L1.0 4.03Z%27 fill=%27%23A4C43A%27 fill-opacity=%270.95%27/%3E%3Cpath d=%27M1.0 4.68 L5.9 4.59 L10.8 4.08 L15.8 4.07 L20.7 3.84 L25.6 3.81 L30.5 3.51 L35.4 3.49 L40.3 3.60 L45.2 3.37 L50.2 3.48 L55.1 4.22 L60.0 3.62 L64.9 4.26 L69.8 4.48 L74.8 4.68 L79.7 4.74 L84.6 4.29 L89.5 4.42 L94.4 4.42 L99.3 4.55 L104.2 4.76 L109.2 4.45 L114.1 4.09 L119.0 4.30 L119.0 4.47 L114.1 4.40 L109.2 5.08 L104.2 5.17 L99.3 5.04 L94.4 4.93 L89.5 5.47 L84.6 5.13 L79.7 5.90 L74.8 5.75 L69.8 5.12 L64.9 4.97 L60.0 4.60 L55.1 4.96 L50.2 4.47 L45.2 4.20 L40.3 4.06 L35.4 4.35 L30.5 4.17 L25.6 4.43 L20.7 4.45 L15.8 4.58 L10.8 5.04 L5.9 4.91 L1.0 4.94Z%27 fill=%27%23A4C43A%27 fill-opacity=%270.65%27/%3E%3C/svg%3E");
  --pencil-lime-soft: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 120 8%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M1.0 3.58 L5.9 3.71 L10.8 3.22 L15.8 2.40 L20.7 2.12 L25.6 2.20 L30.5 1.98 L35.4 2.24 L40.3 2.20 L45.2 2.80 L50.2 3.62 L55.1 3.66 L60.0 3.13 L64.9 2.42 L69.8 2.32 L74.8 2.81 L79.7 3.13 L84.6 2.56 L89.5 2.80 L94.4 2.52 L99.3 2.78 L104.2 2.91 L109.2 2.88 L114.1 3.36 L119.0 3.96 L119.0 4.46 L114.1 4.49 L109.2 4.80 L104.2 5.49 L99.3 4.80 L94.4 4.94 L89.5 5.00 L84.6 4.44 L79.7 4.82 L74.8 4.93 L69.8 4.73 L64.9 5.17 L60.0 4.89 L55.1 5.67 L50.2 5.28 L45.2 4.96 L40.3 5.12 L35.4 4.15 L30.5 4.73 L25.6 3.93 L20.7 4.33 L15.8 4.71 L10.8 4.91 L5.9 4.39 L1.0 4.03Z%27 fill=%27%23A4C43A%27 fill-opacity=%270.5%27/%3E%3Cpath d=%27M1.0 4.68 L5.9 4.59 L10.8 4.08 L15.8 4.07 L20.7 3.84 L25.6 3.81 L30.5 3.51 L35.4 3.49 L40.3 3.60 L45.2 3.37 L50.2 3.48 L55.1 4.22 L60.0 3.62 L64.9 4.26 L69.8 4.48 L74.8 4.68 L79.7 4.74 L84.6 4.29 L89.5 4.42 L94.4 4.42 L99.3 4.55 L104.2 4.76 L109.2 4.45 L114.1 4.09 L119.0 4.30 L119.0 4.47 L114.1 4.40 L109.2 5.08 L104.2 5.17 L99.3 5.04 L94.4 4.93 L89.5 5.47 L84.6 5.13 L79.7 5.90 L74.8 5.75 L69.8 5.12 L64.9 4.97 L60.0 4.60 L55.1 4.96 L50.2 4.47 L45.2 4.20 L40.3 4.06 L35.4 4.35 L30.5 4.17 L25.6 4.43 L20.7 4.45 L15.8 4.58 L10.8 5.04 L5.9 4.91 L1.0 4.94Z%27 fill=%27%23A4C43A%27 fill-opacity=%270.3%27/%3E%3C/svg%3E");

  /* Verdicts: small tags only. */
  --leave: #2F6B47;
  --watch: #9A6510;
  --contain: #2B5F8A;
  --dont: #A33124;
  --emergency: #8B1E1E;
  --dont-paper: #F6E2DC;
  --dont-ink: #7A261C;
  --shelter: #7A5A2E;

  --display: "Literata", "Iowan Old Style", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --max: 1200px;

  /* Paper grain: dark flecks on the light pages, as in PaperGrain. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.25 0 0 0 1.15 -0.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* On forest the same flecks, a little lighter and fewer. */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 1.3 -0.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--cream);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 18px; } }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5.1rem); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: clamp(2rem, 1.25rem + 2.9vw, 3.5rem); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.006em; }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 3px; }
.on-forest :focus-visible, .on-forest:focus-visible { outline-color: var(--lime); }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }
.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;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--lime); color: var(--forest-deep); padding: 8px 14px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

.lead { font-size: 1.12em; line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.center .lead { margin-inline: auto; }

/* ---------- Paper ----------
   ::before is the pale fibre along a tear, ::after the sheet's colour,
   both clipped by polygons from paper.js. Content sits on top, unclipped. */

.paper { position: relative; isolation: isolate; }
.paper::before, .paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.paper::before { z-index: -2; background: var(--rim); clip-path: var(--rim-clip, inset(0)); }
.paper::after {
  z-index: -1;
  background-color: var(--fill, var(--paper));
  background-image: var(--fill-image, none);
  background-size: var(--fill-size, auto);
  background-position: var(--fill-position, 0 0);
  clip-path: var(--sheet-clip, inset(0));
}
.paper { --fill-image: none; }
.paper.no-rim::before { display: none; }
.lift { filter: drop-shadow(0 1.5px 2.5px rgba(52, 40, 18, 0.2)); }
.lift-more { filter: drop-shadow(0 10px 18px rgba(30, 30, 16, 0.18)) drop-shadow(0 1.5px 2px rgba(52, 40, 18, 0.18)); }

.paper.grain { --fill-image: var(--grain); }
.paper.grain-dark { --fill-image: var(--grain-dark); }

/* Masking tape: translucent, torn at the ends, never quite straight. */
.tape {
  position: absolute;
  z-index: 3;
  width: 104px;
  height: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%),
    var(--tape);
  pointer-events: none;
}

/* A label on a strip of paper, like PaperTag. */
.tag {
  display: inline-block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.2;
  letter-spacing: 0.012em;
  color: #fff;
  padding: 6px 16px 7px;
  --fill: var(--forest);
  transform: rotate(-1.5deg);
}
.tag--lime { --fill: var(--lime); color: var(--forest-deep); }
.tag--cream { --fill: var(--on-forest); color: var(--forest); }
.tag--leave { --fill: var(--leave); }
.tag--watch { --fill: var(--watch); }
.tag--contain { --fill: var(--contain); }
.tag--dont { --fill: var(--dont); }

/* Pencil line, like the app's PencilLine. */
.pencil { display: block; width: 100%; height: 10px; color: var(--pencil); }
.pencil path { stroke: currentColor; stroke-width: 1.4; fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Buttons are paper too. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 26px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  text-decoration: none;
  color: #fff;
  --fill: var(--forest);
  transition: transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lime { --fill: var(--lime); color: var(--forest-deep); }
.btn--kraft { --fill: var(--kraft); color: var(--forest); }
.btn--cream { --fill: var(--on-forest); color: var(--forest); }
.btn--small { min-height: 40px; padding: 8px 18px; font-size: 15px; }

/* The App Store badge, and the Instagram and TikTok glyphs: Apple's badge
   unaltered, the glyphs white on forest only, all three the same height on
   one line. Apple asks for clear space of a quarter of the badge's height. */
.badge, .social { display: block; line-height: 0; flex: none; }
.badge img, .social img { height: var(--mark-h, 40px); width: auto; }
.badge { transition: transform 0.15s ease; }
.badge:hover { transform: translateY(-1px); }
.social:hover img { opacity: 0.85; }
.badge--big { --mark-h: 52px; }
.socials { display: flex; align-items: center; gap: var(--mark-gap, 10px); }

.textlink {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: var(--lime);
}
.textlink:hover { text-decoration-color: currentColor; }

/* Reveal: scraps come up from below. Only when the script runs and motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(22px) rotate(var(--r, 0deg)); transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.25, 1); }
  .js .rise.in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
  .js .rise.d1 { transition-delay: 0.08s; }
  .js .rise.d2 { transition-delay: 0.16s; }
  .js .rise.d3 { transition-delay: 0.24s; }
  .js .rise.d4 { transition-delay: 0.32s; }
}

/* ---------- Phone ---------- */

.phone {
  position: relative;
  width: var(--pw, 300px);
  padding: calc(var(--pw, 300px) * 0.028);
  border-radius: calc(var(--pw, 300px) * 0.165);
  background: #0C1410;
  box-shadow:
    inset 0 0 0 1.5px #2C3630,
    0 1px 0 1px rgba(12, 20, 16, 0.25),
    0 26px 50px -18px rgba(12, 20, 16, 0.55);
}
.phone img {
  width: 100%;
  aspect-ratio: 1206 / 2622;
  border-radius: calc(var(--pw, 300px) * 0.138);
  background: var(--cream);
}

/* ---------- Nav ----------
   A solid forest band: wordmark left, links in the middle, the badge and
   the socials on the right. On a phone the links drop to a second row. */

.nav { background: var(--forest); color: var(--on-forest); position: relative; z-index: 5; }
.nav-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand end" "links links";
  align-items: center;
  gap: 10px 12px;
  padding-block: 12px 0;
}
.wordmark {
  grid-area: brand;
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--on-forest);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  justify-self: start;
}
.nav-end { grid-area: end; display: flex; align-items: center; gap: var(--mark-gap); justify-self: end; --mark-h: 40px; --mark-gap: 10px; }
.nav-links {
  grid-area: links;
  display: flex;
  justify-content: center;
  gap: 4px 26px;
  border-top: 1px solid rgba(244, 239, 227, 0.16);
  padding-block: 4px;
}
.nav-links a {
  color: var(--on-forest);
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  padding: 10px 2px 13px;
  background: no-repeat left bottom / 100% 9px;
}
.nav-links a:hover { background-image: var(--pencil-lime-soft); }
.nav-links a[aria-current="page"] { background-image: var(--pencil-lime); }
@media (max-width: 399px) { .wordmark { font-size: 22px; } }
@media (min-width: 760px) {
  .nav-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand links end"; padding-block: 0; height: 72px; gap: 20px; }
  .nav-links { border-top: 0; padding: 0; gap: 22px; }
}
@media (min-width: 900px) {
  .nav-in { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); height: 76px; gap: 24px; }
  .wordmark { font-size: 27px; }
  .nav-links { gap: 34px; }
  .nav-links a { font-size: 16px; }
  .nav-end { --mark-h: 44px; --mark-gap: 18px; }
}

/* ---------- Hero ----------
   The phone stands on the foot of the hero and runs down past the torn
   edge onto the white sheet below, by --hero-overlap. */

:root { --hero-gap: 40px; --hero-overlap: 8px; --hero-pad: 36px; --hero-col-gap: 36px; }
@media (min-width: 760px) { :root { --hero-gap: 48px; --hero-overlap: 140px; --hero-pad: 160px; --hero-col-gap: 40px; } }
@media (min-width: 900px) { :root { --hero-gap: 56px; --hero-overlap: 170px; --hero-pad: 160px; --hero-col-gap: 48px; } }
@media (min-width: 1100px) { :root { --hero-pad: 156px; } }

.hero {
  --pw: 200px;
  --fw: calc(var(--pw) * 0.92);
  position: relative;
  background-color: var(--forest);
  background-image: var(--grain-dark);
  color: var(--on-forest);
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hero-col-gap);
  padding-top: 40px;
  padding-bottom: var(--hero-pad);
}
.hero h1 { max-width: 11.5em; }
.hero h1 .lime { color: var(--lime); }
.hero-copy .sub { margin-top: 22px; font-size: 1.2em; line-height: 1.5; color: var(--on-forest-2); max-width: 26em; }
.hero .badge--big, .cta .badge--big { --mark-h: 60px; }
@media (min-width: 760px) { .hero .badge--big, .cta .badge--big { --mark-h: 70px; } }
@media (min-width: 900px) { .hero .badge--big, .cta .badge--big { --mark-h: 80px; } }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.hero-actions .textlink { color: var(--on-forest); }

.hero-phone {
  position: relative;
  z-index: 3;
  align-self: end;
  justify-self: end;
  margin-right: 6px;
  margin-bottom: calc(-1 * (var(--hero-gap) + var(--hero-overlap) + var(--hero-pad)));
}
.hero-phone .phone { transform: rotate(2deg); }
.hero-phone .tape--a { top: -12px; left: 50%; margin-left: -52px; transform: rotate(-4deg); }
.hero-phone .tape--b { bottom: 30px; right: -18px; transform: rotate(-50deg); width: 84px; }

/* The page's torn top, laid over the hero's foot and over Freddie. */
.hero-tear {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 30px;
  z-index: 2;
  --fill: var(--cream);
}
/* Freddie holds the phone up. Layers, bottom to top: the forest, Freddie,
   the torn cream edge, the phone. He stands just left of the phone, his
   lower body cropped at the hero's foot and hidden under the tear, and the
   phone covers the outer seventh of him, so his raised paw (at 78-98% of
   his width) goes under the phone's straight left edge. */
.hero-phone { z-index: 3; }
.holder {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: var(--fw);
  height: calc(var(--fw) * 1.452 * 0.7);
  left: calc(100% - var(--gutter) - 6px - var(--pw) - var(--fw) * 0.86);
  overflow: hidden;
  pointer-events: none;
}
.holder img { width: 100%; filter: drop-shadow(0 4px 8px rgba(12, 20, 16, 0.32)); }
@media (min-width: 760px) {
  .holder {
    left: calc(var(--gutter)
      + (100% - 2 * var(--gutter) - var(--hero-col-gap)) * 0.625 + var(--hero-col-gap)
      + ((100% - 2 * var(--gutter) - var(--hero-col-gap)) * 0.375 - var(--pw)) / 2
      - var(--fw) * 0.86);
  }
}

/* On the other pages Freddie peeks over the band's torn edge. */
.peek {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.peek img { width: 100%; filter: drop-shadow(0 2px 3px rgba(12, 20, 16, 0.3)); }

@media (min-width: 760px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); padding-top: 60px; }
  .hero { --pw: 250px; }
  .hero-phone { justify-self: center; margin-right: 0; }
}
@media (min-width: 900px) {
  .hero-grid { padding-top: 72px; }
  .hero { --pw: 304px; }
}
@media (min-width: 1240px) { .hero { --pw: 322px; } }

/* ---------- Sections ---------- */

.section { padding-block: clamp(72px, 9vw, 136px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.section--flush-top { padding-top: 0; }
.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; }
.section-head .tag { margin-bottom: 18px; }
.section-head h2 + .lead { margin-top: 18px; }

/* What do you see? : a white sheet the hero phone sits on. */
.see { margin-top: var(--hero-gap); }
.sheet {
  --fill: var(--paper);
  padding: 34px 20px 30px;
}
.sheet-head { max-width: 560px; }
.sheet-head h2 { margin-top: 16px; }
.sheet-head .lead { margin-top: 14px; font-size: 1.05em; }
.snaps {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px 14px;
}
.snaps > li { width: calc(50% - 7px); }
@media (min-width: 700px) { .snaps { gap: 30px 22px; flex-wrap: nowrap; } .snaps > li { width: auto; flex: 1 1 0; min-width: 0; } }
.snap { position: relative; }
.snap:nth-child(1) { --tilt: -2deg; }
.snap:nth-child(2) { --tilt: 1.6deg; }
.snap:nth-child(3) { --tilt: -1deg; }
.snap:nth-child(4) { --tilt: 2deg; }
.snap:nth-child(5) { --tilt: -1.4deg; }
.snap .polaroid { --fill: var(--paper); padding: 9px 9px 14px; transform: rotate(var(--tilt, 0deg)); }
.snap .polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.snap .tape { top: -13px; left: 50%; margin-left: -40px; width: 80px; height: 24px; transform: rotate(3deg); }
.snap:nth-child(even) .tape { transform: rotate(-4deg); }
.snap .tag { position: absolute; left: 4px; margin-top: -24px; font-size: 14px; padding: 5px 12px 6px; white-space: nowrap; }
@media (max-width: 400px) { .snap .tag { font-size: 13px; padding: 5px 10px 6px; } }
.snap p { margin-top: 26px; font-size: 15px; line-height: 1.4; color: var(--ink); padding-inline: 2px; }

@media (min-width: 700px) {
  .sheet { padding: 36px 36px 36px; }
}
@media (min-width: 760px) {
  .sheet { padding: 56px 40px 40px; }
  .sheet-top { min-height: calc(var(--hero-overlap) - 30px); padding-right: 40%; }
}
@media (min-width: 900px) {
  .sheet { padding: 64px 56px 44px; }
  .snaps { gap: 32px; margin-top: 40px; }
  .snap p { font-size: 15.5px; }
}

/* The arches: the map, How it works and Volunteer. On a phone they are
   plain full-width bands, torn along the top and bottom like the others.
   From 700px they are arches, and from 1000px flatter arches that run wider
   than the text column. paper.js reads --tear (in place of data-tear) and
   --arch-rise (the curve's height as a share of the width). */
.arch-wrap {
  container-type: inline-size;
  position: relative;
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
}
.arch { width: 100%; --tear: top bottom; }
.arch [data-tear] { --tear: initial; }
@media (min-width: 700px) {
  .arch-wrap { width: min(1320px, 100vw - 48px); margin-inline: calc(50% - min(660px, 50vw - 24px)); }
  .arch { --tear: initial; --arch-rise: 0.32; }
}

/* The map: on a phone, cropped to the pins around Manhattan at a size
   where they read; on wider screens, the whole map. */
.map-section .arch-wrap { margin-top: 40px; }
.arch--map { height: clamp(440px, 128cqw, 560px); }
.arch--map::after { background: url("map-nyc.webp") 56% 50% / auto 100% no-repeat; }
@media (min-width: 700px) {
  .map-section .arch-wrap { margin-top: 48px; }
  .arch--map { height: 66cqw; }
  .arch--map::after { background-size: cover; background-position: 50% 25%; }
}

.nearest {
  position: absolute;
  left: var(--gutter);
  bottom: -44px;
  width: min(320px, 84%);
  padding: 18px 20px 20px;
  --fill: var(--scrap);
  text-align: left;
}
.nearest .label { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 16px; }
.nearest .name { font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1.15; margin-top: 4px; letter-spacing: -0.01em; }
.nearest .meta { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.nearest .tape { top: -12px; left: 26px; width: 86px; transform: rotate(-5deg); }

.key {
  --fill: var(--scrap);
  list-style: none;
  margin: 84px auto 0;
  padding: 14px 18px 14px 14px;
  font-size: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  width: fit-content;
  max-width: 100%;
  transform: rotate(-1deg);
}
.key li { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.pin {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: #fff;
}
.pin svg { width: 17px; height: 17px; }
.pin--wild { --fill: var(--forest); }
.pin--vet { --fill: var(--contain); }
.pin--shelter { --fill: var(--shelter); }

.stamp {
  position: absolute;
  width: 74px; height: 74px;
  display: grid; place-items: center; align-content: center; gap: 0;
  color: var(--on-forest);
  --fill: var(--forest);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  transform: rotate(-7deg);
}
.stamp svg { width: 20px; height: 20px; }
.stamp .ring { position: absolute; inset: 7px; border-radius: 50%; border: 1.3px dashed rgba(244, 239, 227, 0.5); }
.arch--map .stamp { display: none; }

@media (min-width: 700px) {
  .key { margin-top: 56px; }
  .nearest { left: 3.5%; bottom: -14px; width: min(360px, 44%); padding: 24px 28px 28px; }
  .nearest .name { font-size: 28px; }
  .arch--map .stamp { display: grid; left: calc(3.5% + min(300px, 37%)); bottom: 120px; width: 84px; height: 84px; font-size: 14.5px; }
}
@media (min-width: 1000px) {
  .nearest { width: 380px; }
  .arch--map .stamp { left: calc(3.5% + 320px); bottom: 130px; }
}
/* The key goes on the map only where it clears Queens and the curve. */
@media (min-width: 1280px) {
  .key { position: absolute; z-index: 2; right: 3%; top: 38%; margin: 0; display: grid; gap: 8px; transform: rotate(1.5deg); }
}

/* Three things. */
.three {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 44px;
}
.three li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 22px;
  max-width: 36em;
}
.three .disc { grid-row: 1 / 3; }
.three h3 { margin-top: 4px; }
.three p { margin-top: 8px; color: var(--ink-2); }
.disc {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  --fill: var(--lime-pale);
  color: var(--forest);
}
.disc svg { width: 28px; height: 28px; }
@media (min-width: 700px) and (max-width: 1099px) {
  .three { gap: 36px; justify-items: center; }
  .three li { width: min(36em, 100%); }
}
@media (min-width: 1100px) {
  .three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
  .three li { display: block; }
  .three h3 { margin-top: 20px; }
}

/* How it works: a cream arch on a forest band. */
.band {
  --fill: var(--forest);
  color: var(--on-forest);
  padding-block: clamp(64px, 8vw, 120px);
}
/* On a phone the cream sheet sits between two torn strips of forest. */
.how { padding-block: 30px; }
.how .arch-wrap { position: relative; z-index: 1; }
.how .arch {
  --fill: var(--cream);
  color: var(--ink);
  padding: 64px var(--gutter) 60px;
}
.how .section-head { max-width: 640px; margin-inline: auto; }
.steps {
  list-style: none;
  counter-reset: step;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
.step {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.step .phone { --pw: 132px; }
@media (max-width: 400px) { .step { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } .step .phone { --pw: 112px; } }
.step:nth-child(1) .phone { transform: rotate(-2deg); }
.step:nth-child(2) .phone { transform: rotate(1.5deg); }
.step:nth-child(3) .phone { transform: rotate(-1deg); }
.step .tape { top: -10px; left: 50%; margin-left: -34px; width: 68px; height: 22px; transform: rotate(-3deg); }
.step:nth-child(2) .tape { transform: rotate(4deg); }
.step-phone { position: relative; }
.step-text { padding-top: 6px; }
.num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--forest); color: #fff;
  font-weight: 700; font-size: 14.5px;
  margin-bottom: 12px;
}
.step h3 { font-size: 1.25rem; }
.step p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }

@media (min-width: 700px) {
  .how { padding-block: clamp(64px, 8vw, 120px) 0; }
  .how .arch-wrap { margin-bottom: -28px; }
  .how .arch { padding: 12cqw 32px 72px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
  .step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 26px; }
  .step .phone { --pw: 176px; }
  .step-text { max-width: 19em; padding-top: 0; }
}
@media (min-width: 820px) { .step .phone { --pw: 196px; } }
@media (min-width: 1000px) {
  .how .arch { padding: 11cqw 64px 84px; }
  .steps { gap: 40px; margin-top: 56px; }
  .step { gap: 30px; }
  .step .phone { --pw: 236px; }
}
@media (min-width: 1240px) { .step .phone { --pw: 270px; } }

.worse {
  display: grid;
  gap: 26px;
}
.worse .body { display: grid; gap: 16px; color: var(--ink); }
.worse .body p:last-child { font-family: var(--display); font-weight: 600; color: var(--forest); font-size: 1.15em; }
@media (min-width: 900px) {
  .worse { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
}

/* Volunteer: a forest arch with the 200+ card, Freddie, and one button.
   On a phone the card and Freddie sit side by side over the text; from
   1000px the card and text are on the left and Freddie on the right. */
.work .arch { --fill: var(--forest); color: var(--on-forest); }
.help-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  grid-template-areas: "fact freddie" "text text";
  align-items: end;
  gap: 40px 18px;
  padding: 72px var(--gutter) 76px;
}
.help-grid .fact {
  grid-area: fact;
  justify-self: start;
  width: 100%;
  max-width: 480px;
  padding: 26px 22px 24px;
  --fill: var(--paper);
  color: var(--ink);
  --r: -2.5deg;
  transform: rotate(-2.5deg);
}
.fact .big { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 1.6rem + 7vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; color: var(--forest); }
.fact .plus { font-family: var(--body); font-weight: 800; font-size: 0.62em; vertical-align: 0.3em; margin-left: 0.03em; }
.fact p:not(.big) { margin-top: 10px; font-size: clamp(15px, 0.85rem + 0.5vw, 19px); line-height: 1.4; }
.fact .tape { top: -13px; left: 50%; margin-left: -50px; width: 100px; transform: rotate(3deg); }
.help-grid .freddie {
  grid-area: freddie;
  justify-self: center;
  width: 100%;
  max-width: 300px;
  --r: 4deg;
  transform: rotate(4deg);
  filter: drop-shadow(0 10px 14px rgba(12, 20, 16, 0.38));
}
.help-text { grid-area: text; }
.help-text p { margin-top: 16px; color: var(--on-forest-2); font-size: 1.1em; max-width: 30em; }
.help-text .btn { margin-top: 30px; }
@media (min-width: 700px) {
  /* Card and text on the left, Freddie on the right, below where the
     curve narrows. */
  .help-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    grid-template-areas: "fact freddie" "text freddie";
    align-items: start;
    padding: 17cqw 11cqw 9cqw 9cqw;
    gap: 40px 40px;
  }
  .help-grid .freddie { align-self: center; max-width: 250px; }
}
@media (min-width: 1000px) {
  .help-grid { padding: 14cqw 12cqw 9cqw 10cqw; gap: 56px 64px; }
  .help-grid .freddie { max-width: 300px; }
}

/* A pale red note, like the app's "don't" scraps: for the 911 line. */
.dont {
  --fill: var(--dont-paper);
  color: var(--dont-ink);
  padding: 14px 16px 15px 16px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
}
.dont svg { width: 16px; height: 16px; margin-top: 5px; color: var(--dont); }
.dont strong { color: var(--dont-ink); }

/* Get One Step: forest band with the Guide on a phone. */
.cta {
  --fill: var(--forest);
  color: var(--on-forest);
  margin-top: clamp(40px, 5vw, 72px);
}
.cta-grid { display: grid; gap: 48px; align-items: center; padding-block: 72px 100px; }
.cta h2 { color: var(--on-forest); font-size: clamp(2.3rem, 1.4rem + 3.4vw, 4.2rem); }
.cta .sub { margin-top: 16px; color: var(--on-forest-2); font-size: 1.12em; }
.cta-phone { --pw: 210px; justify-self: center; position: relative; }
.cta-phone .phone { transform: rotate(-2.5deg); }
.cta-phone .tape { top: -12px; left: 50%; margin-left: -50px; transform: rotate(5deg); }
@media (min-width: 900px) {
  .cta { margin-top: clamp(150px, 12vw, 190px); }
  .cta-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); padding-block: 0 104px; align-items: start; }
  .cta-phone { --pw: 270px; margin-top: -130px; }
  .cta-copy { padding-top: 120px; }
}

/* ---------- Footer ----------
   A solid band, deeper than the forest above it, torn along its top:
   wordmark, Legal, Company, then the badge and the socials. */

.foot {
  --fill: var(--forest-deep);
  color: var(--on-forest);
  padding-block: 92px 40px;
  font-size: 16px;
  margin-top: clamp(56px, 7vw, 96px);
}
.home .foot { margin-top: -30px; }
.foot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "brand brand" "legal company" "end end";
  gap: 30px 24px;
}
.foot .wordmark { grid-area: brand; font-size: 34px; }
.foot-legal { grid-area: legal; }
.foot-company { grid-area: company; }
.foot-end { grid-area: end; display: flex; align-items: center; gap: var(--mark-gap); --mark-h: 60px; --mark-gap: 14px; }
@media (min-width: 900px) { .foot-end { --mark-gap: 20px; } }
.foot h2 { font-family: var(--body); font-size: 16.5px; font-weight: 700; letter-spacing: 0; color: var(--on-forest); }
.foot ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.foot ul a { text-decoration: none; color: var(--on-forest); font-weight: 400; }
.foot ul a { padding-bottom: 6px; background: no-repeat left bottom / 100% 7px; }
.foot ul a:hover { background-image: var(--pencil-lime-soft); }
.foot ul a[aria-current="page"] { background-image: var(--pencil-lime); }
.foot .pencil { color: rgba(244, 239, 227, 0.28); margin-block: 40px 18px; }
.foot-small {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--on-forest-2);
}
.foot-small .warn { color: var(--on-forest); font-weight: 600; }
.foot-small a { color: inherit; text-underline-offset: 2px; }
@media (min-width: 900px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "brand legal company end";
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
  .foot-end { justify-self: end; }
  .foot-small { justify-content: space-between; }
}

/* ---------- Legal pages ---------- */

.legal-head {
  position: relative;
  background-color: var(--forest);
  background-image: var(--grain-dark);
  color: var(--on-forest);
  padding: 40px 0 78px;
}
.legal-head h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); }
.legal-head .wrap { position: relative; }
.legal-head.has-peek { --peek-w: 260px; padding-bottom: calc(var(--peek-w) * 0.5 + 24px); }
.legal-head .peek {
  right: max(var(--gutter), calc((100% - var(--max)) / 2));
  bottom: 0;
  width: var(--peek-w);
  height: calc(var(--peek-w) * 0.5);
}
@media (min-width: 760px) {
  .legal-head.has-peek { --peek-w: 340px; padding-bottom: 78px; min-height: calc(var(--peek-w) * 0.5 + 40px); }
  .legal-head.has-peek .wrap { padding-right: calc(var(--peek-w) + 24px); }
}
@media (min-width: 1100px) { .legal-head.has-peek { --peek-w: 420px; } }
.legal-head .lead { color: var(--on-forest-2); margin-top: 14px; max-width: 32em; }
.legal-head p { margin-top: 10px; color: var(--on-forest-2); }
.legal {
  max-width: calc(1000px + 2 * var(--gutter));
  margin: 30px auto 0;
  position: relative;
  z-index: 3;
  padding-inline: var(--gutter);
}
.legal .sheet-body {
  --fill: var(--paper);
  padding: 40px 22px 44px;
}
@media (min-width: 700px) { .legal .sheet-body { padding: 64px 72px 72px; } }
.legal .prose { max-width: 68ch; margin-inline: auto; }
.legal-head:not(.has-peek) { padding-bottom: 60px; }
.legal .sheet-body .tape { top: -13px; left: 50%; margin-left: -52px; transform: rotate(-3deg); }
.prose { font-size: 17px; line-height: 1.65; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: 1.45rem; line-height: 1.25; margin-top: 40px; letter-spacing: -0.01em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--forest); }
.prose .updated { color: var(--ink-2); font-size: 15.5px; }
.prose .ph { background: #FFF3C4; padding: 0 4px; border-radius: 3px; }
.prose a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
.legal-foot-note { margin-top: 28px; text-align: center; color: var(--ink-2); font-size: 15px; }

/* A page whose sheet starts below the band, so Freddie's peek shows. */
.page-body { max-width: 820px; margin: 40px auto 0; padding-inline: var(--gutter); position: relative; z-index: 3; }
.page-body .sheet-body { --fill: var(--paper); padding: 40px 22px 44px; }
@media (min-width: 700px) { .page-body .sheet-body { padding: 56px 60px 60px; } }
.page-body .sheet-body .tape { top: -13px; left: 50%; margin-left: -52px; transform: rotate(-3deg); }

/* FAQ */
.qa { display: grid; gap: 30px; }
.qa h2 { font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.qa p { margin-top: 8px; color: var(--ink); }
.qa .dont { margin-top: 12px; }
.qa .pencil { margin-block: 4px 0; }
.btn-row { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; }
.prose .contact-socials { list-style: none; padding: 0; display: flex; gap: 24px; }
.prose .contact-socials li { margin: 0; }
.contact-socials a { color: var(--forest); font-weight: 600; }
.prose .dont { margin-top: 32px; }
.prose .dont p { margin: 0; }
.prose .btn { color: #fff; font-weight: 700; text-decoration: none; }

/* ---------- FAQ: a collage of taped scraps ---------- */
.collage-wrap { max-width: var(--max); margin: 44px auto 0; padding-inline: var(--gutter); position: relative; z-index: 3; }
.collage-wrap > .dont { max-width: 760px; margin: 0 auto 40px; font-size: 17px; }
.collage-wrap > .dont p { margin: 0; }
.collage-wrap > .dont h2 { font-size: 1.3rem; color: var(--dont-ink); margin-bottom: 4px; }
.collage { columns: 1; column-gap: 30px; }
@media (min-width: 700px) { .collage { columns: 2; } }
@media (min-width: 1100px) { .collage { columns: 3; } }
.scrap {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 18px 0 34px;
  padding: 30px 24px 26px;
  --fill: var(--paper);
  transform: rotate(var(--tilt, 0deg));
}
.scrap:nth-child(3n+1) { --tilt: -1.2deg; }
.scrap:nth-child(3n+2) { --tilt: 0.9deg; }
.scrap:nth-child(3n) { --tilt: -0.5deg; }
.scrap:nth-child(4n+1) .tape { left: 18%; transform: rotate(-5deg); }
.scrap:nth-child(4n+2) .tape { left: 50%; margin-left: -46px; transform: rotate(3deg); }
.scrap:nth-child(4n+3) .tape { right: 14%; transform: rotate(6deg); }
.scrap:nth-child(4n) .tape { left: 8%; transform: rotate(-2deg); }
.scrap .tape { top: -13px; width: 92px; }
.scrap h2 { font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.01em; }
.scrap p { margin-top: 10px; font-size: 16.5px; line-height: 1.6; }
.scrap a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
.scrap .tag { margin-bottom: 14px; font-size: 14px; }
.scrap--red { --fill: var(--dont-paper); color: var(--dont-ink); }
.scrap--red h2 { color: var(--dont-ink); }

/* ---------- Freddie and his speech bubble ---------- */
.talk { display: grid; justify-items: center; align-content: start; gap: 0; }
.talk-freddie { width: var(--talk-w, 184px); filter: drop-shadow(0 6px 10px rgba(40, 30, 10, 0.25)); position: relative; z-index: 1; }
.bubble {
  --fill: var(--paper);
  margin-top: 40px;
  width: 100%;
  max-width: 420px;
  padding: 26px 24px 24px;
}
/* The tail rises from the bubble's top edge to just below Freddie. */
.bubble .tail {
  position: absolute;
  z-index: 0;
  top: -40px;
  left: 50%;
  width: 58px;
  height: 50px;
  margin-left: -29px;
  background: var(--paper);
  clip-path: polygon(52% 0, 58% 14%, 66% 33%, 75% 55%, 86% 78%, 100% 100%, 0 100%, 12% 80%, 24% 58%, 34% 36%, 44% 15%);
}
.bubble ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; position: relative; z-index: 1; }
.bubble li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--ink);
}
.bubble li::before { content: ""; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--forest) inset; }
@media (min-width: 900px) { .talk { --talk-w: 320px; position: sticky; top: 24px; } }

/* ---------- Pages with a form ---------- */
.form-page { max-width: var(--max); margin: 44px auto 0; padding-inline: var(--gutter); position: relative; z-index: 3; }
.cards3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
@media (min-width: 760px) { .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards3 .tag { margin-bottom: 12px; font-size: 13.5px; padding: 4px 12px 5px; }
.cards3 > li:nth-child(4) { transform: rotate(0.7deg); }
.cards3 > li { padding: 30px 22px 24px; --fill: var(--paper); }
.cards3 > li:nth-child(1) { transform: rotate(-0.8deg); }
.cards3 > li:nth-child(2) { transform: rotate(0.6deg); }
.cards3 > li:nth-child(3) { transform: rotate(-0.4deg); }
.cards3 .tape { top: -13px; left: 50%; margin-left: -44px; width: 88px; transform: rotate(-3deg); }
.cards3 > li:nth-child(2) .tape { transform: rotate(4deg); }
.cards3 h2 { font-size: 1.22rem; line-height: 1.25; }
.cards3 p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.cards3 a { color: var(--forest); font-weight: 600; text-underline-offset: 3px; }
.form-row { display: grid; gap: 44px; margin-top: 56px; align-items: start; }
@media (min-width: 900px) { .form-row { grid-template-columns: 360px minmax(0, 1fr); gap: 56px; } }

.form-sheet { --fill: var(--paper); padding: 40px 22px 36px; }
@media (min-width: 700px) { .form-sheet { padding: 52px 52px 48px; } }
.form-sheet .tape { top: -13px; transform: rotate(-4deg); left: 12%; }
.form-sheet .tape + .tape { left: auto; right: 12%; transform: rotate(5deg); }
.form-sheet > h2 { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.form-sheet > .lead { margin-top: 10px; font-size: 1.02em; }
.form-sheet .dont { margin-top: 22px; }
.form-sheet .dont p { margin: 0; }
form { margin: 0; }
.field { margin-top: 26px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend {
  display: block;
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.field .opt { font-family: var(--body); font-weight: 400; font-size: 15px; color: var(--ink-2); }
.field .hint { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.input {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 13px 14px 11px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--scrap);
  border: 0;
  border-bottom: 2px solid var(--pencil);
  border-radius: 2px 2px 0 0;
  box-shadow: inset 0 1px 3px rgba(60, 45, 20, 0.14);
  -webkit-appearance: none;
  appearance: none;
}
textarea.input { min-height: 150px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: #A39E92; }
.input:focus { outline: 3px solid var(--forest); outline-offset: 2px; border-bottom-color: var(--forest); }
.choices { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 560px) { .choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  background: var(--scrap);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #E6DFCF;
  font-size: 16.5px;
  line-height: 1.3;
  cursor: pointer;
}
.choice:has(input:checked) { box-shadow: inset 0 0 0 2px var(--forest); background: #F3F6EA; }
.choice input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: 2px solid #B9AF9A;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.choice input[type="radio"] { border-radius: 50%; }
.choice input:checked { background: var(--forest); border-color: var(--forest); }
.choice input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 18px; background-position: center; background-repeat: no-repeat;
}
.choice input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }
.choice input:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.field-error {
  display: none;
  margin-top: 10px;
  padding: 10px 14px 11px;
  background: var(--dont-paper);
  color: var(--dont-ink);
  font-size: 15px;
  font-weight: 600;
  border-radius: 2px;
}
.field:has(.input:user-invalid) .field-error,
.field:has(input:user-invalid) .field-error,
.field.invalid .field-error { display: block; }
.field:has(.input:user-invalid) .input { border-bottom-color: var(--dont); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-sheet .btn { margin-top: 30px; border: 0; cursor: pointer; font-family: var(--body); min-height: 56px; padding-inline: 34px; font-size: 18px; }
.form-note { margin-top: 14px; font-size: 14.5px; color: var(--ink-2); }
.form-note a { color: var(--forest); font-weight: 600; }
.band-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
.band-contact a.mail { color: var(--on-forest); font-weight: 700; font-size: 18px; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.band-contact .socials { --mark-h: 40px; --mark-gap: 14px; }
.js .age-note:not(.show) { display: none; }
.age-note { margin-top: 10px; }
.choice:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.choice input:disabled { cursor: not-allowed; }

/* Phones: no Freddie or bubble on Volunteer and Contact; the cards lead
   straight into the form. */
@media (max-width: 699px) {
  .talk { display: none; }
}

/* 4. Get One Step, in one centred column until there is room for two. */
@media (max-width: 899px) {
  .cta-copy { text-align: center; }
  .cta .sub { margin-inline: auto; }
  .cta .hero-actions { justify-content: center; }
}

/* ---------- Phone header and menu ----------
   Under 700px, with the menu script, the header is the wordmark and a menu
   button; the links, badge and glyphs move into a torn forest sheet that
   rises from the bottom. Without the script the links stay in the header. */
.menu-btn {
  display: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-forest);
  cursor: pointer;
}
.menu-btn svg, .menu-close svg { width: 30px; height: 30px; }
.menu-btn:focus-visible, .menu-close:focus-visible { outline: 3px solid var(--lime); outline-offset: 0; }
@media (max-width: 699px) {
  .js .nav-in { display: flex; align-items: center; justify-content: space-between; height: 64px; padding-block: 0; }
  .js .nav-links, .js .nav-end { display: none; }
  .js .menu-btn { display: grid; }
}
.menu { position: fixed; inset: 0; z-index: 100; }
.menu[hidden] { display: none; }
.menu-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 20, 16, 0.55);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.menu-sheet.paper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 40px);
  overflow-y: auto;
  --fill: var(--forest);
  color: var(--on-forest);
  padding: 44px var(--gutter) calc(30px + env(safe-area-inset-bottom));
  transform: translateY(104%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.menu.is-open .menu-scrim { opacity: 1; }
.menu.is-open .menu-sheet { transform: none; }
@media (prefers-reduced-motion: reduce) { .menu-scrim, .menu-sheet.paper { transition: none; } }
.menu-close {
  position: absolute;
  top: 22px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--on-forest);
  cursor: pointer;
}
.menu nav { display: grid; justify-items: start; gap: 4px; }
.menu nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-forest);
  text-decoration: none;
  padding: 8px 2px 14px;
  background: no-repeat left bottom / 100% 10px;
}
.menu nav a[aria-current="page"] { background-image: var(--pencil-lime); }
.menu-marks { display: flex; align-items: center; gap: 14px; margin-top: 30px; --mark-h: 52px; --mark-gap: 14px; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* How it works, step 4: no screen to show, so a taped note under the phones. */
.step--note { grid-template-columns: minmax(0, 1fr); }
.step-note {
  --fill: var(--paper);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
  padding: 28px 22px 24px;
  text-align: left;
  transform: rotate(-0.6deg);
}
.step-note .num { margin: 0; }
.step-note h3 { font-size: 1.25rem; }
.step-note p { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.step-note .tape { top: -12px; left: 50%; margin-left: -42px; width: 84px; transform: rotate(-2deg); }
@media (min-width: 700px) {
  .step--note { grid-column: 1 / -1; justify-items: center; margin-top: 8px; }
  .step-note { width: min(620px, 100%); padding: 30px 30px 26px; }
}

/* ---------- Legal pages: tables, capitals, subheads ---------- */
.prose h3 { font-size: 1.12rem; line-height: 1.3; margin-top: 28px; }
.prose .caps { font-size: 14.5px; line-height: 1.6; letter-spacing: 0.01em; }
.table-wrap { overflow-x: auto; margin-inline: -4px; padding-inline: 4px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid #E6DFCF; }
.prose thead th { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--forest); border-bottom: 2px solid var(--pencil); }
.prose tbody th { font-weight: 700; width: 26%; }
@media (max-width: 559px) {
  /* On a phone each row becomes a small card: the label, then the rest. */
  .prose thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table, .prose tbody, .prose tr, .prose th, .prose td { display: block; width: auto; }
  .prose tbody tr { padding: 12px 0; border-bottom: 1px solid #E6DFCF; }
  .prose tbody th, .prose tbody td { border: 0; padding: 2px 0; width: auto; }
  .prose tbody td + td { margin-top: 6px; color: var(--ink-2); }
}

/* ---------- /download/: for links from Instagram and the app ---------- */
.dl { padding-block: 34px 0; text-align: center; }
.dl .wrap { max-width: calc(560px + 2 * var(--gutter)); display: grid; justify-items: center; }
.dl-title {
  font-size: clamp(2.4rem, 1rem + 6.8vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--forest);
  max-width: 10.5em;
  padding-inline: 14px;
  text-wrap: balance;
}
.dl-accent { color: #5A7F1C; }
.dl-badge { margin-top: 26px; --mark-h: 76px; }
.dl-phone { position: relative; margin-top: 34px; --pw: min(85vw, 400px); }
.dl-phone .phone { transform: rotate(-1.5deg); }
.dl-phone .tape--a { top: -12px; left: 50%; margin-left: -52px; transform: rotate(-4deg); }
.dl-phone .tape--b { bottom: 40px; right: -26px; transform: rotate(-50deg); width: 90px; }
.download .foot { margin-top: 64px; }

/* ---------- /deleting/ ---------- */
.field--first { margin-top: 0; }
.file { display: block; margin-top: 12px; font: inherit; font-size: 15.5px; color: var(--ink-2); max-width: 100%; }
.file::file-selector-button {
  margin-right: 14px;
  padding: 10px 18px;
  border: 0;
  border-radius: 2px;
  background: var(--kraft);
  color: var(--forest);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.file:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.btn--wide { display: flex; width: 100%; }