/* Aroha marketing site — shared styles.
   Palette + type mirror the app (Color.kt / Type.kt):
   cream #FFFDF9 · paper #F0EEE9 · ink #1A1A1A · peach #FEF3ED ·
   coral #E8785A · brick #A83D20 · Caveat (headings) + Architects
   Daughter (body). */

:root {
  --cream: #fffdf9;
  --paper: #f0eee9;
  --ink: #1a1a1a;
  --ink-soft: rgba(26, 26, 26, 0.7);
  --ink-faint: rgba(26, 26, 26, 0.2);
  --peach: #fef3ed;
  --coral: #e8785a;
  --brick: #a83d20;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Architects Daughter", "Comic Sans MS", cursive, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .wordmark {
  font-family: "Caveat", cursive;
  font-weight: 700;
  line-height: 1.15;
}

a { color: var(--brick); }

.container { max-width: 880px; margin: 0 auto; padding: 0 22px; }

/* ─── Header ─── */
header {
  background: var(--cream);
  border-bottom: 1px solid var(--ink-faint);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}
.wordmark {
  font-size: 34px;
  color: var(--ink);
  text-decoration: none;
}
.wordmark span { color: var(--coral); }
.nav-links a {
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: none;
  margin-left: 18px;
}
.nav-links a:hover { color: var(--ink); text-decoration: underline; }

/* ─── Hero ─── */
.hero { text-align: center; padding: 64px 0 40px; }
.hero h1 { font-size: clamp(44px, 8vw, 72px); }
.hero .tagline {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 12px auto 0;
}
.hero .cta {
  display: inline-block;
  margin-top: 28px;
  background: var(--ink);
  color: var(--cream);
  font-family: "Caveat", cursive;
  font-size: 24px;
  text-decoration: none;
  padding: 12px 34px;
  border-radius: 30px;
}
.hero .cta-sub {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ─── Feature blurbs ─── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 26px 0 10px;
}
.feature {
  background: var(--cream);
  border: 1px solid var(--ink-faint);
  border-radius: 16px;
  padding: 18px;
}
.feature h3 { font-size: 26px; margin-bottom: 4px; }
.feature p { font-size: 14.5px; color: var(--ink-soft); }
.feature .dot { color: var(--coral); }

/* ─── Screenshot placeholders (swap for real captures later) ─── */
.shots {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 36px 0 30px;
}
.shot {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 5px 0 rgba(26, 26, 26, 0.12);
  width: 218px;
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: rotate(-1.2deg);
}
.shot:nth-child(2) { transform: rotate(0.8deg); }
.shot:nth-child(3) { transform: rotate(-0.4deg); }
.shot .frame {
  width: 84%;
  height: 78%;
  border: 1.5px dashed var(--ink-faint);
  border-radius: 14px;
  background: var(--peach);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 14px;
  text-align: center;
  padding: 12px;
}
.shot .caption {
  font-family: "Caveat", cursive;
  font-size: 21px;
}

/* ─── Article pages (terms / privacy / support) ─── */
.article { background: var(--cream); border-radius: 18px; border: 1px solid var(--ink-faint); padding: 34px; margin: 34px 0; }
.article h1 { font-size: 44px; margin-bottom: 4px; }
.article .updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; }
.article h2 { font-size: 30px; margin: 26px 0 6px; }
.article p, .article li { font-size: 15px; color: rgba(26, 26, 26, 0.85); margin-bottom: 10px; }
.article ul { padding-left: 22px; margin-bottom: 12px; }
.notice {
  background: var(--peach);
  border: 1px solid rgba(168, 61, 32, 0.4);
  color: var(--brick);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  margin: 18px 0;
}

/* ─── Footer ─── */
footer {
  border-top: 1px solid var(--ink-faint);
  margin-top: 40px;
  padding: 26px 0 40px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-soft);
}
footer a { color: var(--ink-soft); margin: 0 8px; }
footer .heart { color: var(--coral); }

@media (max-width: 560px) {
  .hero { padding: 44px 0 28px; }
  .article { padding: 22px; }
  .shot { width: 180px; height: 380px; }
}