/* Zero Star Apps — Meadow palette, same tokens as the Doot app */
:root {
  --bg: #F4F7F1;
  --card: #FFFFFF;
  --border: #E1E8DC;
  --text: #33392E;
  --muted: #6A7261;
  --primary: #5B7B5A;
  --sky: #52919F;
  --berry: #CF6C56;
  --gold: #B28029;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 48px 20px 64px; }
h1, h2, .brand { font-family: "Fraunces", Georgia, serif; font-weight: 700; letter-spacing: -0.3px; }
h1 { font-size: 40px; line-height: 1.15; margin: 8px 0 12px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
p, li { color: var(--text); }
.lead { font-size: 19px; color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }
a { color: var(--primary); text-underline-offset: 3px; }
nav { display: flex; gap: 18px; align-items: center; font-size: 15px; }
nav .brand { font-size: 20px; color: var(--text); text-decoration: none; margin-right: auto; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px;
  margin: 24px 0;
}
.app-row { display: flex; gap: 18px; align-items: center; text-decoration: none; color: inherit; }
.app-row img { width: 72px; height: 72px; border-radius: 17px; flex-shrink: 0; }
.app-row h2 { margin: 0; }
.dots { display: grid; grid-template-columns: repeat(4, 14px); gap: 6px; }
.dots span { width: 14px; height: 14px; border-radius: 50%; background: var(--border); }
ul.checks { list-style: none; padding: 0; }
ul.checks li { padding-left: 30px; position: relative; margin: 10px 0; }
ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 18px; height: 18px; border-radius: 50%; background: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
}
ul.checks li::after {
  content: ""; position: absolute; left: 5px; top: 10px; width: 8px; height: 5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.button {
  display: inline-block; background: var(--primary); color: #FAF7EF; text-decoration: none;
  font-weight: 600; padding: 14px 28px; border-radius: 999px;
}
footer { margin-top: 56px; font-size: 14px; color: var(--muted); }
@media (max-width: 480px) { h1 { font-size: 32px; } main { padding-top: 32px; } }