/* NariYume marketing site — Cooking Mama chunky / sticker aesthetic.
 * Hand-rolled CSS, no framework, one file. Designed to work as
 * Cloudflare Pages static assets. */

:root {
  /* Palette — mirrors NariColors in the iOS app so the site feels
   * like the same product, not a different brand. */
  --cream:    #FFF7EC;
  --pink:     #FFD5DD;
  --pink-deep:#FF7FA6;
  --butter:   #FFE48A;
  --mint:     #B7E4C9;
  --lavender: #D9C8F0;
  --cocoa:    #4A3626;
  --cocoa-soft:#8B7360;
  --white:    #FFFFFF;

  --radius-lg: 22px;
  --radius-md: 16px;
  --chunk:    5px;
}

@font-face {
  font-family: "Fredoka";
  src: url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap");
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--cocoa); text-decoration: none; border-bottom: 2px solid transparent; }
a:hover { border-bottom-color: var(--pink-deep); }

.page {
  max-width: 840px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* ----- Sticker-card base ----- */
.sticker {
  background: var(--white);
  border: 3px solid var(--cocoa);
  border-radius: var(--radius-lg);
  box-shadow: 0 var(--chunk) 0 var(--cocoa);
  padding: 28px 28px;
}

/* ----- Hero ----- */
.hero { text-align: center; padding-top: 32px; }

.hero-sticker {
  display: inline-block;
  background: var(--pink);
  border: 3px solid var(--cocoa);
  border-radius: var(--radius-lg);
  box-shadow: 0 var(--chunk) 0 var(--cocoa);
  padding: 22px 36px;
  margin-bottom: 28px;
}
.hero-sticker--tilt-left { transform: rotate(-2deg); }
.hero-sticker h1 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.hero-tag {
  margin: 6px 0 0;
  color: var(--cocoa-soft);
  font-weight: 600;
}

.hero-lede {
  max-width: 520px;
  margin: 16px auto 28px;
  font-size: 18px;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----- Buttons ----- */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 3px solid var(--cocoa);
  border-radius: 16px;
  box-shadow: 0 var(--chunk) 0 var(--cocoa);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.btn:active { transform: translateY(2px); box-shadow: 0 calc(var(--chunk) - 2px) 0 var(--cocoa); }
.btn:hover { border-bottom-color: var(--cocoa); } /* override default link hover */
.btn--primary { background: var(--pink-deep); color: var(--white); }
.btn--ghost   { background: var(--white); color: var(--cocoa); }

/* ----- Features ----- */
.features {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .features { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
}
.feature-card {
  background: var(--white);
  border: 3px solid var(--cocoa);
  border-radius: var(--radius-md);
  box-shadow: 0 var(--chunk) 0 var(--cocoa);
  padding: 20px 20px 18px;
}
.feature-card--tilt-left  { transform: rotate(-1.2deg); }
.feature-card--tilt-right { transform: rotate(1.2deg); }
.feature-card h2 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.feature-card p  { margin: 0; color: var(--cocoa-soft); font-size: 14px; }

/* ----- Safety section ----- */
.safety {
  background: var(--butter);
  border: 3px solid var(--cocoa);
  border-radius: var(--radius-lg);
  box-shadow: 0 var(--chunk) 0 var(--cocoa);
  padding: 26px 28px;
  margin-top: 52px;
}
.safety h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; }
.safety ul { padding-left: 20px; margin: 0; }
.safety li { margin-bottom: 6px; }

/* ----- Footer ----- */
.site-footer {
  margin-top: 64px;
  text-align: center;
  color: var(--cocoa-soft);
  font-size: 13px;
}
.site-footer nav a { margin: 0 6px; font-weight: 600; }
.site-footer p { margin-top: 10px; }

/* ----- Legal pages shared chrome ----- */
.doc-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 20px 80px;
}
.doc-page h1 {
  font-size: 36px;
  margin: 0 0 6px;
  font-weight: 700;
}
.doc-page .doc-meta {
  color: var(--cocoa-soft);
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 600;
}
.doc-page h2 {
  font-size: 20px;
  margin: 32px 0 8px;
  font-weight: 700;
}
.doc-page h3 {
  font-size: 16px;
  margin: 22px 0 6px;
  font-weight: 700;
}
.doc-page p, .doc-page li { font-size: 15px; }
.doc-page ul, .doc-page ol { padding-left: 22px; }
.doc-page ul li, .doc-page ol li { margin-bottom: 6px; }
.doc-page code { background: var(--pink); padding: 2px 6px; border-radius: 6px; font-size: 13px; }
.doc-page a { font-weight: 600; }
.doc-page .back-link {
  display: inline-block;
  margin-bottom: 28px;
  font-size: 13px;
  color: var(--cocoa-soft);
}
.doc-page .back-link:hover { color: var(--pink-deep); border-bottom-color: var(--pink-deep); }