/* ===========================================================================
   PeelBoard marketing site - shared design tokens + base.
   Dark theme, locked. One accent (indigo). One radius system:
   buttons 10px / cards 16px / pills full / inputs 10px.
   Used by index.html. The legal + support pages keep their own inline CSS.
   =========================================================================== */

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

:root {
  /* surfaces */
  --bg:          #0a0a0b;
  --bg-raise:    #101014;
  --bg-card:     #111116;
  --bg-inset:    #08080a;
  --border:      #212127;
  --border-hi:   #2e2e37;

  /* type */
  --text:        #f5f5f7;
  --muted:       #a2a2ae;
  --dim:         #6b6b78;

  /* single accent, locked across the whole page */
  --accent:      #6366f1;
  --accent-hi:   #8b8cf8;
  --accent-soft: rgba(99,102,241,0.12);
  --accent-line: rgba(99,102,241,0.34);

  /* radii */
  --r-btn:  10px;
  --r-card: 16px;
  --r-lg:   22px;

  /* rhythm */
  --pad-x:     24px;
  --sec-y:     120px;
  --maxw:      1180px;
  --maxw-text: 680px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── ambient background system ───────────────────────────────────────────────
   Two fixed, decorative-only layers sit behind (bg-fx) and above (bg-grain)
   the page content. Neither affects layout or scroll width: both are
   position:fixed, clipped by their own overflow:hidden, pointer-events:none,
   and aria-hidden. bg-fx (z-index -1) only shows through sections that don't
   paint their own background (hero/board/features/faq/cta); the raised
   sections (--bg-raise) sit on top of it, which is what gives the page its
   section-to-section depth instead of one flat slab. */
.bg-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* fine line-grid, fades toward every edge so it never reads as a hard tile */
.bg-fx__grid {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(65% 60% at 50% 20%, #000 0%, transparent 85%);
          mask-image: radial-gradient(65% 60% at 50% 20%, #000 0%, transparent 85%);
}

/* two slow-drifting aurora blobs, indigo into deep violet, heavily blurred to
   a soft wash rather than a visible band — this stays an ambient hint, not a
   gradient hero backdrop. Positioned near the top they double as the hero's
   "spotlight that follows scroll" (fixed = stays in the viewport as hero/
   board/features scroll by, until a raised section's opaque background
   covers it again). */
.bg-fx__aurora {
  position: absolute;
  width: 70vw;
  height: 70vw;
  max-width: 980px;
  max-height: 980px;
  border-radius: 50%;
  filter: blur(180px);
  opacity: 0.16;
  will-change: transform;
}
.bg-fx__aurora--a {
  top: -30vw;
  left: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(99,102,241,0.9) 0%, rgba(49,46,129,0.4) 45%, transparent 70%);
  animation: aurora-drift-a 48s ease-in-out infinite;
}
.bg-fx__aurora--b {
  top: 54vh;
  left: 4%;
  width: 52vw;
  height: 52vw;
  background: radial-gradient(circle at 60% 40%, rgba(139,92,246,0.8) 0%, rgba(30,27,75,0.35) 45%, transparent 70%);
  animation: aurora-drift-b 60s ease-in-out infinite;
}
@keyframes aurora-drift-a {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50%      { transform: translate(-46%, 3%) scale(1.06); }
}
@keyframes aurora-drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(3%, -4%) scale(1.08); }
}
/* On a phone these two are the only expensive thing on the page: a 70vw
   blurred layer animating its transform forever, behind everything, on a GPU
   that is also compositing a pinned section. Same look, no running animation
   and a cheaper blur. */
@media (max-width: 900px) {
  .bg-fx__aurora {
    opacity: 0.13;
    filter: blur(110px);
    animation: none;
    will-change: auto;
  }
  .bg-fx__aurora--a { transform: translate(-50%, 0); }
  .bg-fx__grid { background-size: 38px 38px; }
}

/* fine film-grain over the whole page (SVG feTurbulence, no image request).
   A separate top-level fixed layer (not nested in .bg-fx) so it sits above
   every section, raised or not, tying them together. */
.bg-grain {
  position: fixed;
  inset: 0;
  z-index: 150;
  opacity: 0.035;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 300;
  background: var(--accent);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-btn);
  font-size: 14px;
  font-weight: 600;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ── display type ─────────────────────────────────────────────────────────── */
h1, h2, h3, .display {
  font-family: 'Archivo', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text);
  text-wrap: balance;
}

h1 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: clamp(30px, 4.2vw, 50px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; }

.lede {
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--muted);
  line-height: 1.65;
  max-width: var(--maxw-text);
}

/* screen-reader-only text: used where a cell's meaning is carried by a mark
   rather than by words, so the state is never colour- or shape-only. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* tabular figures wherever money or counts appear */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* ── layout ───────────────────────────────────────────────────────────────── */
.section { padding: var(--sec-y) var(--pad-x); position: relative; }
.section--tight { padding-top: calc(var(--sec-y) * 0.6); }
.rule { border-top: 1px solid var(--border); }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap-narrow { max-width: 780px; margin: 0 auto; }
.center { text-align: center; }

.sec-head { margin-bottom: 64px; }
.sec-head .lede { margin-top: 18px; }
.center.sec-head .lede { margin-left: auto; margin-right: auto; }

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 18px;
}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 14px 22px;
  min-height: 46px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              transform .18s var(--ease), box-shadow .22s var(--ease);
}
.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 8px 24px rgba(99,102,241,0.24);
}
.btn--primary:hover { background: #575ae8; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 14px 34px rgba(99,102,241,0.32); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-hi);
}
.btn--ghost:hover { border-color: var(--dim); background: var(--bg-raise); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0); }

.btn--sm { font-size: 14px; padding: 11px 18px; min-height: 44px; }
.btn--lg { font-size: 16px; padding: 16px 28px; min-height: 52px; }

/* ── cards ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover { border-color: var(--border-hi); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent-hi);
}

/* ── app screenshot frame ─────────────────────────────────────────────────── */
.shot {
  border-radius: 14px;
  border: 1px solid var(--border-hi);
  overflow: hidden;
  background: var(--bg-inset);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.8);
}
.shot img { width: 100%; height: auto; }

.shot--phone {
  border-radius: 26px;
  border-width: 6px;
  border-color: #1b1b22;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,0.85);
}

/* ── reveal (GSAP sets the final state; this is the pre-animation rest) ───── */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0); }
html.no-motion .reveal,
html.motion-ready .reveal.is-in { opacity: 1; transform: none; }

/* Anything that never got a ScrollTrigger (JS blocked / GSAP failed to load)
   must still be visible. JS adds .motion-ready only once GSAP is live. */
html:not(.motion-ready):not(.no-motion) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── responsive base ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --sec-y: 84px; --pad-x: 20px; }
}
@media (max-width: 560px) {
  :root { --sec-y: 68px; --pad-x: 16px; }
  body { font-size: 15.5px; }
  .sec-head { margin-bottom: 40px; }
}