/* ============================================================================
   Boop - shared design system for sub-pages (support, press).
   ----------------------------------------------------------------------------
   index.html deliberately keeps its own inline CSS: it is one heavily
   art-directed page and inlining saves it a render-blocking request on a
   connection that is often a phone in a car park. Everything AFTER the landing
   page shares this file instead, so a new page is a <link> away from being
   on-brand.

   Tokens match index.html exactly. If you change a colour there, change it
   here, or the site starts drifting into two brands.

   MOTION POLICY
   Every animation here is opacity/transform only, so it runs on the compositor
   and cannot cause layout thrash. Anything that moves is wrapped in a
   prefers-reduced-motion guard at the bottom of this file - not per-rule,
   which is how one gets forgotten.
   ========================================================================= */

:root {
  --paper: #FBF0E1;
  --paper-deep: #F6E0CC;
  --ink: #292118;
  --ink-soft: rgba(41, 33, 24, 0.62);
  --ink-faint: rgba(41, 33, 24, 0.10);
  --cream: #F7EEDA;
  --card: rgba(255, 255, 255, 0.62);
  --card-solid: #FFFFFF;
  --accent1: #F98C33;
  --accent2: #F55C8C;
  --gold1: #FFD973;
  --gold2: #E8A11F;
  --teal: #12B8A6;
  --radius: 22px;
  --shadow-s: 0 4px 12px rgba(41, 33, 24, .10);
  --shadow-m: 0 10px 26px rgba(41, 33, 24, .16);
  --shadow-l: 0 24px 54px rgba(41, 33, 24, .26);
  --ease-spring: cubic-bezier(.24, 1.5, .4, 1);
  --ease-out: cubic-bezier(.22, .9, .26, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: ui-rounded, -apple-system, "SF Pro Rounded", "Nunito", system-ui, sans-serif;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

/* ---------- nav ---------- */
nav.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; max-width: 1060px; margin: 0 auto;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 1.35rem; text-decoration: none;
}
.nav-brand img {
  width: 38px; height: 38px; border-radius: 10px;
  box-shadow: 0 3px 10px rgba(41, 33, 24, .18);
}

/* ---------- buttons ---------- */
.pill {
  display: inline-block; background: var(--ink); color: var(--cream);
  font-weight: 800; text-decoration: none; border-radius: 999px;
  padding: 12px 22px; font-size: 0.95rem; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(41, 33, 24, .25);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  font-family: inherit;
}
.pill:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-m); }
/* Tactility: the press is what makes a web button feel like a native one.
   Faster than the release, exactly like a physical key. */
.pill:active { transform: translateY(0) scale(.97); transition-duration: .07s; }
.pill.ghost {
  background: rgba(255, 255, 255, .65); color: var(--ink);
  box-shadow: 0 4px 12px rgba(41, 33, 24, .10);
}
.pill.gold {
  background: linear-gradient(135deg, var(--gold1), var(--gold2));
  color: #3A2A08; box-shadow: 0 8px 22px rgba(232, 161, 31, .38);
}
.pill.lg { padding: 15px 28px; font-size: 1.05rem; }

/* ---------- type ---------- */
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 900; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent2); margin-bottom: 10px;
}
h1 { font-size: clamp(2rem, 6.4vw, 3.2rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 4.6vw, 2.2rem); font-weight: 900; line-height: 1.18; margin-bottom: 10px; }
h3 { font-size: 1.12rem; font-weight: 900; margin-bottom: 6px; }
.lead { color: var(--ink-soft); font-weight: 600; font-size: 1.06rem; line-height: 1.6; max-width: 38rem; }
p { line-height: 1.62; }
section { padding: 56px 0 8px; }

/* ---------- cards ---------- */
.card {
  background: var(--card); backdrop-filter: blur(6px);
  border: 1px solid var(--ink-faint); border-radius: var(--radius);
  padding: 22px 24px; box-shadow: var(--shadow-s);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.grid { display: grid; gap: 16px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }

/* ---------- footer ---------- */
footer.site {
  margin-top: 72px; padding: 34px 22px 46px;
  border-top: 1px solid var(--ink-faint);
  color: var(--ink-soft); font-size: .92rem; text-align: center;
}
footer.site a { font-weight: 700; }
footer.site .links {
  display: flex; gap: 18px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 14px;
}

/* ---------- scroll reveal ----------
   The base state is the HIDDEN one, applied only once .js-motion is on <html>.
   Without that guard a visitor with JavaScript disabled would get a page of
   invisible sections, which is the classic way scroll-reveal breaks a site. */
.js-motion .reveal { opacity: 0; transform: translateY(24px); }
.js-motion .reveal.in {
  opacity: 1; transform: none;
  transition: opacity .66s var(--ease-out), transform .66s var(--ease-out);
}
/* Children stagger behind their revealed parent. The delay ladder is short on
   purpose: past ~450ms total it stops reading as craft and starts reading as
   a slow website. */
.js-motion .stagger > * { opacity: 0; transform: translateY(18px); }
.js-motion .stagger.in > * {
  opacity: 1; transform: none;
  transition: opacity .58s var(--ease-out), transform .58s var(--ease-out);
}
.js-motion .stagger.in > :nth-child(1) { transition-delay: .00s; }
.js-motion .stagger.in > :nth-child(2) { transition-delay: .06s; }
.js-motion .stagger.in > :nth-child(3) { transition-delay: .12s; }
.js-motion .stagger.in > :nth-child(4) { transition-delay: .18s; }
.js-motion .stagger.in > :nth-child(5) { transition-delay: .24s; }
.js-motion .stagger.in > :nth-child(6) { transition-delay: .30s; }
.js-motion .stagger.in > :nth-child(7) { transition-delay: .36s; }
.js-motion .stagger.in > :nth-child(8) { transition-delay: .42s; }

/* ---------- sticker shine ----------
   The same gesture as tapping a sticker in the app: a diagonal specular sweep.
   Used on the App Store badge and the donate tiers so the website and the
   product share one signature move. */
.shine { position: relative; overflow: hidden; isolation: isolate; }
.shine::after {
  content: ""; position: absolute; inset: -140% -40%;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, .58) 50%, transparent 58%);
  transform: translateX(-120%) rotate(8deg);
  pointer-events: none;
}
.shine:hover::after, .shine.sweep::after {
  animation: sheen 1.05s var(--ease-out);
}
@keyframes sheen {
  from { transform: translateX(-120%) rotate(8deg); }
  to   { transform: translateX(120%) rotate(8deg); }
}

/* ---------- the App Store lockup ----------
   ⚠ APPLE BRAND RULES, and the reason this is CSS and not an image.
   Apple's Marketing Resources guidelines do NOT permit the "Download on the
   App Store" badge for an app that is not downloadable yet, and the badge
   artwork must never be recreated by hand. The permitted pre-launch treatment
   is the WORDING "Coming soon to the App Store", which is what this renders.

   At launch: download the official badge from
   https://developer.apple.com/app-store/marketing/guidelines/
   drop it in site/assets/, and follow the swap note in support.html /
   index.html. Do not colour-match your way to a lookalike. */
.store-lockup { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: var(--cream);
  border: 0; cursor: pointer; font-family: inherit;
  border-radius: 13px; padding: 11px 19px 11px 17px;
  text-decoration: none; box-shadow: var(--shadow-m);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-l); }
.store-badge:active { transform: translateY(0) scale(.98); transition-duration: .07s; }
.store-badge .glyph { font-size: 1.62rem; line-height: 1; }
.store-badge .txt { display: flex; flex-direction: column; text-align: left; }
.store-badge .txt small {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; opacity: .72;
}
.store-badge .txt strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }

/* ---------- count-up numerals ---------- */
.tally { font-variant-numeric: tabular-nums; font-weight: 900; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .grid.three { grid-template-columns: 1fr; }
  .grid.two { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* ---------- one motion switch ----------
   Every moving thing in this file is disabled here, so a reader who has asked
   their OS for less motion gets a complete, static page rather than a
   half-animated one. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-motion .reveal,
  .js-motion .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pill:hover, .pill:active,
  .card.lift:hover,
  .store-badge:hover, .store-badge:active { transform: none; }
  .shine::after { display: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}