/* ─── Fonts ──────────────────────────────────────────────────────── */

@font-face {
  font-family: "Candy Beans";
  src: url("fonts/CandyBeans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Knewave&display=swap");

/* ─── Tokens ─────────────────────────────────────────────────────── */

:root {
  --bg: #FEF5E2;
  --card: #FEF8EE;
  --card-border: #FDE6C2;
  --heading: #001E06;
  --green-deep: #1F4D2C;
  --green: #6BAA2C;
  --yellow: #F4B21A;
  --red: #D6290B;
  --text: #1B1B1B;
  --text-muted: #5C5A52;
  --text-soft: #7A7568;
  --max: 1100px;
}

/* ─── Reset ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Comic Neue", "Helvetica Neue", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── Typography ─────────────────────────────────────────────────── */

.candy { font-family: "Candy Beans", "Comic Neue", cursive; font-style: italic; }
.knewave { font-family: "Knewave", "Comic Neue", cursive; }

h1, h2, h3 {
  font-family: "Candy Beans", cursive;
  font-style: italic;
  color: var(--heading);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}
h1 { font-size: clamp(38px, 6vw, 64px); }
h2 { font-size: clamp(28px, 4.5vw, 44px); }
h3 { font-size: clamp(20px, 2.5vw, 26px); }
p  { margin: 0 0 1em; color: var(--text); }
.lead { font-size: clamp(16px, 2vw, 20px); color: var(--text-muted); max-width: 60ch; }

/* ─── Layout ─────────────────────────────────────────────────────── */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

section {
  padding: clamp(56px, 9vw, 120px) 0;
  position: relative;
}

/* ─── Wavy section dividers ──────────────────────────────────── */

.wave-divider {
  position: absolute;
  left: 0;
  width: 100%;
  height: 60px;
  display: block;
  pointer-events: none;
}
.wave-down { bottom: -1px; }
.wave-up   { top: -1px; transform: scaleY(-1); }

/* ─── Brush underline (handwritten yellow swoosh) ────────────── */

.brush {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.brush::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -6px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2 8 Q50 2 100 7 T198 6' stroke='%23F4B21A' stroke-width='6' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
  background-size: 100% 100%;
  z-index: -1;
  opacity: .9;
}

/* ─── Tilted sticky-note pillar cards ────────────────────────── */

.tilt-1 { transform: rotate(-1.2deg); }
.tilt-2 { transform: rotate(0.8deg); }
.tilt-3 { transform: rotate(-0.5deg); }
.tilt-1:hover, .tilt-2:hover, .tilt-3:hover {
  transform: rotate(0deg) translateY(-6px);
}

/* ─── Privacy tags (plain dot-separated list, no boxes) ──────── */

.privacy-tags {
  text-align: center;
  font-family: "Comic Neue", "Helvetica Neue", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--text-muted);
  margin: 0;
}

/* ─── Header ─────────────────────────────────────────────────────── */

.site-header {
  padding: 18px 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--card-border); }
.nav { display: flex; align-items: center; justify-content: space-between; }
.nav-wordmark img { height: 36px; }
.nav-links { display: flex; gap: 22px; }
.nav-links a {
  font-family: "Candy Beans", cursive;
  font-style: italic;
  font-size: 16px;
  color: var(--heading);
}
.nav-links a:hover { color: var(--green); text-decoration: none; }

/* ─── Hero ───────────────────────────────────────────────────────── */

.hero {
  padding: clamp(48px, 8vw, 100px) 0 clamp(40px, 6vw, 80px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-mascot {
  width: clamp(180px, 28vw, 280px);
  margin: 0 auto 24px;
}
.hero h1 { margin-bottom: 12px; }
.hero .tagline {
  font-family: "Candy Beans", cursive;
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--green-deep);
  margin: 0 0 28px;
}
.hero .lead { margin: 0 auto 32px; }

/* ─── CTAs ───────────────────────────────────────────────────────── */

.cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.btn {
  display: inline-block;
  font-family: "Candy Beans", cursive;
  font-style: italic;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary {
  background: var(--heading);
  color: #FFF;
}
.btn-primary:hover { transform: translateY(-2px); text-decoration: none; }
.btn-ghost {
  background: transparent;
  color: var(--heading);
  border: 2px solid var(--card-border);
}
.btn-ghost:hover { background: var(--card); text-decoration: none; }

.appstore-badge {
  height: 56px;
  display: inline-block;
  background: var(--heading);
  color: #FFF;
  border-radius: 14px;
  padding: 10px 22px;
  font-family: "Comic Neue", sans-serif;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 15px;
}
.appstore-badge .small { font-size: 11px; opacity: .8; font-weight: 400; display: block; }
.appstore-badge:hover { text-decoration: none; }
.appstore-badge.placeholder { opacity: .65; cursor: default; }

/* ─── Sections ───────────────────────────────────────────────────── */

.section-intro { text-align: center; margin: 0 auto 56px; max-width: 700px; }
.section-intro h2 { margin-bottom: 14px; }

/* Pillars grid */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 18px; } }

.pillar-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,30,6,.06); }
.pillar-card img { width: 110px; margin: 0 auto 14px; }
.pillar-card h3 { margin-bottom: 8px; }
.pillar-card p { color: var(--text-muted); margin: 0; font-size: 15px; }

/* How-it-works steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

.step {
  text-align: center;
  position: relative;
  padding-top: 24px;
}
.step .num {
  display: inline-block;
  font-family: "Candy Beans", cursive;
  font-style: italic;
  font-size: 28px;
  color: #FFF;
  background: var(--heading);
  width: 56px; height: 56px;
  line-height: 56px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 6px; }
.step p { color: var(--text-muted); font-size: 15px; max-width: 28ch; margin: 0 auto; }


/* Section bg variants */
.bg-card { background: var(--card); }

/* ─── Footer ─────────────────────────────────────────────────────── */

.site-footer {
  padding: 48px 0 64px;
  border-top: 1px solid var(--card-border);
  margin-top: 40px;
}
.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}
.footer-wordmark img { height: 30px; opacity: .85; }
.footer-links {
  display: flex; gap: 22px; flex-wrap: wrap; justify-content: center;
}
.footer-links a {
  font-family: "Candy Beans", cursive;
  font-style: italic;
  color: var(--heading);
  font-size: 15px;
}
.footer-fineprint { color: var(--text-soft); font-size: 13px; }

/* ─── Inner page styling (Privacy, Terms, Support) ───────────────── */

.page-hero {
  text-align: center;
  padding: 60px 0 24px;
}
.page-hero h1 { font-size: clamp(38px, 6vw, 56px); }
.page-hero .lead { margin: 12px auto 0; }

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  margin-top: 36px;
  margin-bottom: 80px;
}
.prose h2 {
  font-family: "Candy Beans", cursive;
  font-style: italic;
  font-size: 24px;
  color: var(--heading);
  margin: 28px 0 12px;
}
.prose h2:first-of-type { margin-top: 12px; }
.prose p { color: var(--text); font-size: 15px; line-height: 1.7; }
.prose a:not(.btn) { font-weight: 700; color: var(--heading); text-decoration: underline; }
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: #FFF; }

/* ─── Decorative squiggle (under headings) ───────────────────────── */

.squiggle {
  display: block;
  margin: 6px auto 18px;
  width: 120px;
  height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'><path d='M0 5 Q15 0 30 5 T60 5 T90 5 T120 5' stroke='%23F4B21A' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat center;
}