/* Watercolor-on-parchment, sampled from the app's real tokens
   (constants/theme.ts). BRAND NOTE: the product name is a working
   title (D22) - all name strings live in the HTML, none in here. */

:root {
  --parchment: #F3EBDC;
  --parchment-grain: #EDE2D0;
  --surface: #EFE6D4;
  --surface-elevated: #FBF6EC;
  --sky: #A9CFE0;
  --sky-bloom: #CCE0E7;
  --periwinkle: #8E92C4;
  --blush: #F5D0CF;
  --lavender: #E8D4E1;
  --ink: #0D2A4B;
  --marker: #1A1A1A;
  --text-secondary: #46566B;
  --chip-border: #D8CDB6;
}

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

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
}

.wrap { max-width: 680px; margin: 0 auto; padding: 0 24px; }

header.site { padding: 28px 0 8px; }
.brand { font-weight: 900; font-size: 22px; letter-spacing: -0.3px; }
.brand a { color: var(--ink); text-decoration: none; }

.hero { text-align: center; padding: 44px 0 26px; }
.blob {
  width: 130px; height: 118px; margin: 0 auto 20px;
  background: var(--sky);
  border: 3px solid var(--marker);
  border-radius: 48% 52% 55% 45% / 58% 55% 45% 42%;
  position: relative;
  box-shadow: 0 0 0 14px var(--sky-bloom);
}
.blob .eyes {
  position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; gap: 22px;
}
.blob .eyes i {
  width: 9px; height: 16px; background: var(--marker);
  border-radius: 5px; display: block;
}
h1 {
  font-size: 40px; line-height: 1.12; letter-spacing: -0.6px;
  font-weight: 900; margin-bottom: 14px;
}
.lede { font-size: 22px; color: var(--text-secondary); }

.badge-row { margin: 30px 0 6px; }
.store-badge {
  display: inline-block; background: var(--marker); color: #fff;
  border-radius: 14px; padding: 13px 26px; font-weight: 800;
  font-size: 18px; text-decoration: none;
  box-shadow: 3px 4px 0 rgba(26, 26, 26, 0.25);
}
.badge-note { margin-top: 12px; font-size: 16px; color: var(--text-secondary); }

section { padding: 30px 0; }
h2 { font-size: 26px; font-weight: 900; margin-bottom: 14px; letter-spacing: -0.3px; }
h3 { font-size: 20px; font-weight: 800; margin: 22px 0 6px; }
p + p { margin-top: 12px; }

.cards { display: grid; gap: 16px; margin-top: 8px; }
.card {
  background: var(--surface-elevated);
  border: 1.5px solid var(--chip-border);
  border-radius: 18px; padding: 20px 22px;
  box-shadow: 3px 4px 0 rgba(26, 26, 26, 0.08);
}
.card .stroke {
  width: 46px; height: 7px; border-radius: 5px; margin-bottom: 12px;
}
.card h3 { margin: 0 0 6px; }
.card p { color: var(--text-secondary); font-size: 18px; }

.honest {
  background: var(--surface);
  border-radius: 22px; padding: 26px 26px 30px; margin-top: 6px;
  border: 1.5px solid var(--chip-border);
}
.honest ul { list-style: none; margin-top: 10px; }
.honest li { padding-left: 30px; position: relative; margin-top: 10px; }
.honest li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--blush); border: 2px solid var(--marker);
}

footer.site {
  border-top: 1.5px solid var(--chip-border);
  margin-top: 40px; padding: 26px 0 46px;
  font-size: 16px; color: var(--text-secondary);
}
footer.site a { color: var(--ink); }
footer.site .links { margin-top: 6px; }
footer.site .links a { margin-right: 18px; }

article.legal h2 { margin-top: 30px; }
article.legal { padding-bottom: 20px; }
.updated { color: var(--text-secondary); font-size: 16px; margin-bottom: 20px; }

.faq dt { font-weight: 800; margin-top: 20px; }
.faq dd { margin-top: 6px; color: var(--text-secondary); }

@media (max-width: 480px) {
  body { font-size: 18px; }
  h1 { font-size: 32px; }
  .lede { font-size: 20px; }
}