/* Shared styles for Do! edition pages (Premium / Spring Pink / Spring Mint).
   Each page sets --brand and --accent on :root for its own color. */
:root{
  --cream:#f4efe8; --card:#ffffff;
  --ink:#3b3e44; --muted:#8a857c; --line:#e7e0d6;
  --star:#f5b942; --radius:18px; --max:1080px;
  --brand:#3b3e44;   /* vivid brand color (icon bg, accents on dark) */
  --accent:#3b3e44;  /* text-safe accent for labels and links on cream */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

.hero{text-align:center; padding:72px 0 8px}
.hero .app-icon{width:112px; height:112px; border-radius:26px; display:block; margin:0 auto 24px; background:var(--brand); border:1px solid rgba(59,62,68,.08); box-shadow:0 18px 40px -16px rgba(59,62,68,.4), 0 2px 6px rgba(59,62,68,.06)}
.eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 6px}
.hero h1{font-size:clamp(28px,4.6vw,46px); line-height:1.14; letter-spacing:-.03em; margin:6px auto 16px; max-width:18ch; font-weight:800}
.hero p.lead{font-size:clamp(16px,2.1vw,19px); color:#6b675f; max-width:60ch; margin:0 auto 28px}

.badges{display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap}
.badges a{display:inline-block; transition:transform .15s ease}
.badges a:hover{transform:translateY(-2px)}
.badges img{height:54px; width:auto; display:block}

.sec{padding:52px 0}
.sec h2{text-align:center; font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; margin:0 0 6px; font-weight:800}
.sec .sub{text-align:center; color:var(--muted); margin:0 auto 34px; max-width:52ch}

.features{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; box-shadow:0 18px 40px -32px rgba(59,62,68,.5)}
.feature .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; background:color-mix(in srgb, var(--brand) 16%, #fff); color:var(--accent)}
.feature h3{margin:0 0 6px; font-size:17px; letter-spacing:-.01em}
.feature p{margin:0; color:#54514b; font-size:15px}

.family{text-align:center; padding:8px 0 64px}
.family p{color:var(--muted); margin:0 0 6px; font-size:15px}
.family a.home{color:var(--accent); font-weight:700; text-decoration:none}
.family a.home:hover{text-decoration:underline}

footer.site{border-top:1px solid var(--line); padding:30px 0 46px; text-align:center; color:var(--muted); font-size:13px}
footer.site nav{margin-bottom:12px; display:flex; gap:20px; justify-content:center; flex-wrap:wrap}
footer.site nav a{text-decoration:none; color:#6b675f}
footer.site nav a:hover{text-decoration:underline}
.copyright{letter-spacing:.04em}

@media (max-width:760px){
  .features{grid-template-columns:1fr; gap:14px}
}
@media (max-width:560px){
  .hero{padding:52px 0 8px}
  .hero .app-icon{width:92px; height:92px; border-radius:22px; margin-bottom:20px}
  .badges{gap:10px}
  .badges img{height:44px}
}