/* grrunch.com -- same GRRUNCH DS palette as the app: peach gradient,
   ink text, orange accent, 2px ink borders, Open Sans. */
:root {
  --ink: #111;
  --accent: #ffa955;
  --peach: #ffead4;
  --paper: #fff;
  --muted: #343837;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper) 0%, var(--peach) 520px) var(--peach);
}

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

main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px 20px 56px; }

/* -- Header -- */
.top { width: 100%; max-width: 1040px; margin: 0 auto; padding: 20px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}
.brand-face svg { width: 40px; height: 40px; display: block; }

/* -- Landing -- */
.home main { max-width: 1040px; }
.hero { text-align: center; padding: 24px 0 48px; }
.hero-face svg { width: 180px; height: 180px; display: block; margin: 0 auto 16px; }
h1 {
  font-weight: 800;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.1;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}
.lede { font-size: 18px; max-width: 580px; margin: 0 auto 28px; }
.soon { font-weight: 700; font-size: 18px; margin: 0 0 14px; }
.stores { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.badge { display: block; }
.badge-apple { height: 52px; width: auto; }
/* Google's PNG has built-in clear space (~1/6 of its height top and
   bottom); size it so the visible badge matches Apple's 52px. */
.badge-play { height: 78px; width: auto; margin: -13px -12px; }
/* White banner, ink text and icon (Anabelle, 2026-09-29). */
.info-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}
.info-banner svg { flex: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
/* No fill, dashed ink border (Anabelle, 2026-09-29). */
.card {
  background: transparent;
  border: 2px dashed var(--ink);
  border-radius: 20px;
  padding: 22px;
}
/* Coupon-style scissors cutting along the dashed top edge (Anabelle,
   2026-09-29). Heroicons "scissors" outline, the icon set the app uses.
   The peach fill masks the dashes behind it. */
.card { position: relative; }
.card::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 20px;
  width: 28px;
  height: 28px;
  padding: 0 4px;
  background: var(--peach) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7.848 8.25 1.536.887M7.848 8.25a3 3 0 1 1-5.196-3 3 3 0 0 1 5.196 3Zm1.536.887a2.165 2.165 0 0 1 1.083 1.839c.005.351.054.695.14 1.024M9.384 9.137l2.077 1.199M7.848 15.75l1.536-.887m-1.536.887a3 3 0 1 1-5.196 3 3 3 0 0 1 5.196-3Zm1.536-.887a2.165 2.165 0 0 0 1.083-1.838c.005-.352.054-.695.14-1.025m-1.223 2.863 2.077-1.199m0-3.328a4.323 4.323 0 0 1 2.068-1.379l5.325-1.628a4.5 4.5 0 0 1 2.48-.044l.803.215-7.794 4.5m-2.882-1.664A4.33 4.33 0 0 0 10.607 12m3.736 0 7.794 4.5-.802.215a4.5 4.5 0 0 1-2.48-.043l-5.326-1.629a4.324 4.324 0 0 1-2.068-1.379M14.343 12l-2.882 1.664'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
.card h2 { font-size: 19px; font-weight: 800; margin: 0 0 8px; line-height: 1.25; }
.card p { margin: 0; }

/* -- Documents (privacy, terms, support) -- */
.doc {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: clamp(20px, 5vw, 40px);
}
.doc h1 { font-size: clamp(28px, 5vw, 38px); }
.doc h2 { font-size: 19px; font-weight: 800; margin: 28px 0 8px; line-height: 1.3; }
.doc p, .doc li { overflow-wrap: anywhere; }
.doc ul { padding-left: 22px; }
.doc li { margin: 4px 0; }
.effective { font-weight: 600; color: var(--muted); margin-top: 0; }

.button {
  display: inline-block;
  padding: 14px 24px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.faq { border-top: 1px solid #e6d3bd; padding: 12px 0; }
.faq:last-of-type { border-bottom: 1px solid #e6d3bd; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq p { margin: 8px 0 0; }

.notfound { text-align: center; font-weight: 600; }

/* -- Footer -- */
.foot { width: 100%; max-width: 1040px; margin: 0 auto; padding: 24px 20px 40px; text-align: center; font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-bottom: 8px; font-weight: 600; }
.foot a[aria-current='page'] { text-decoration-thickness: 2px; }
.foot p { margin: 0; color: var(--muted); }