/* ============================================================
   GOTCHA — content pages (pricing, the app, photo evidence,
   privacy, terms, delete account).

   Loaded after home.css, which already owns the tokens, the nav,
   the buttons and the footer, so every page shares one header and
   one footer instead of each keeping a copy. This file adds only
   what a page of prose needs: a sky header like the home hero, and
   a readable column on white below it. No 3D here — these pages are
   for reading, and several of them are what the stores link to.
   ============================================================ */

.page-head {
  margin-top: -68px;               /* sit under the transparent nav */
  padding: calc(68px + clamp(40px, 7vh, 80px)) 0 clamp(36px, 6vh, 64px);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 70%, var(--paper) 100%);
}
.page-in { max-width: 760px; margin-inline: auto; padding-inline: var(--gut); }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.06; }
.page-head .legal-meta { margin-top: 16px; font-size: 1.02rem; color: var(--muted); }

/* ---------- prose ---------- */
.prose { padding-bottom: clamp(60px, 10vh, 110px); font-size: 1.05rem; line-height: 1.7; }
.prose h2 {
  margin: 52px 0 14px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 30px 0 10px; }
.prose h2 .num {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; margin-right: 12px; padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-soft); color: var(--blue-ink);
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0;
  vertical-align: 0.2em;
}
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 24px; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--blue); font-weight: 700; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose a { color: var(--blue-ink); text-underline-offset: 3px; }
.prose code {
  padding: 1px 6px; border-radius: 6px;
  background: var(--tint); color: var(--ink);
  font-size: 0.92em;
}
.prose hr { margin: 48px 0 24px; border: 0; border-top: 1px solid var(--line); }
.prose .legal-meta { color: var(--muted); font-size: 0.95rem; }

.prose table {
  width: 100%; margin-top: 18px;
  border-collapse: separate; border-spacing: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 0.96rem;
}
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose th { background: var(--tint); color: var(--ink); font-weight: 650; }
.prose tr:last-child th, .prose tr:last-child td { border-bottom: 0; }
.prose td { background: var(--paper); }

/* the boxed "in short" notes in privacy and terms */
.legal-note {
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
}
.legal-note p { color: var(--ink); }

.legal-foot {
  margin-top: 56px; padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 0.9rem;
}

@media (max-width: 560px) {
  .prose { font-size: 1rem; }
  .prose table { display: block; overflow-x: auto; }
}