/* Yogi's Bliss — landing. Everything shared with the rest of the site (the
   tokens, the sky, the pill, the top bar, the column, the card, the footer)
   lives in theme.css, linked before this file; this sheet is only the hero,
   the three steps and the privacy band. Kept as a separate file so the page
   carries no inline code of any kind: the site is served under script-src
   'self'. Rules: docs/brand/design-system.md. */

.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:min(6vh,54px) 20px 40px;gap:14px;min-height:min(78vh,760px)}
/* cosmic waveform — sized like the app's own #wave (yogis-bliss-demo.html) */
.hero #wave{width:min(720px,92vw);height:130px;display:block}
.hero .tag{color:var(--dim);margin:0;font-size:15px;letter-spacing:.24em;text-transform:lowercase}
.hero h1{font-size:clamp(34px,5.4vw,56px);margin:0;letter-spacing:.06em;line-height:1.1}
.hero .lede{max-width:640px;margin:2px 0 8px;font-size:18.5px;line-height:1.6;color:var(--text)}
.hero .note{color:var(--dim);font-size:13px;margin:4px 0 0}

.how{padding-top:22px;padding-bottom:36px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.card .num{position:absolute;top:16px;right:18px;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--line);display:grid;place-items:center;font-size:12.5px;color:var(--teal);
  box-shadow:0 0 12px rgba(126,232,208,.25);border-color:var(--teal)}
.card h3{margin:0 42px 8px 0;font-size:20px;letter-spacing:.04em}
.card p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}

.privacy{padding:26px 22px 56px;text-align:center}
.privacy .line{max-width:700px;margin:0 auto 12px;font-size:16px;line-height:1.6}
.privacy .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 10px var(--teal);margin:0 10px 2px 0;vertical-align:middle}
.privacy .fine{max-width:620px;margin:0 auto;color:var(--dim);font-size:13.5px;line-height:1.55}

@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .hero{min-height:auto;padding-bottom:30px}
  .hero .lede{font-size:17px}
}
@media (max-width:480px){
  .hero .tag{letter-spacing:.16em;font-size:14px}
}