/* ============================================================
   for-parents.css — Guardian app page
   ============================================================ */

/* Hero with phone */
.fp-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
.fp-hero__art { display: grid; place-items: center; position: relative; }
@media (max-width: 900px){ .fp-hero__grid { grid-template-columns: 1fr; text-align: center; } .fp-hero__art { order: -1; } .fp-hero .hero__actions { justify-content: center; } }

/* Three-phone showcase */
.phones-row {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(0.5rem, 2vw, 1.5rem); flex-wrap: wrap;
}
.phones-row .phone { width: 230px; }
.phones-row .phone:nth-child(2) { transform: translateY(-22px); }
.phone-cap { text-align: center; margin-top: 1rem; }
.phone-cap h3 { font-size: 1.05rem; }
.phone-cap p { font-size: var(--fs-sm); margin-inline: auto; max-width: 24ch; }
.phone-wrap { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 820px){ .phones-row .phone:nth-child(2){ transform:none; } }

/* App screen variants */
.appscreen--list .appcard { display:flex; align-items:center; gap:10px; }
.appscreen__avatar { width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7c5cfc,#9b7bff);flex:none; }
.chatbubble { background:var(--lavender-100); border-radius:14px; padding:10px 12px; font-size:0.76rem; color:var(--ink); margin-bottom:8px; }
.chatbubble.me { background:var(--purple-600); color:#fff; margin-left:auto; max-width:80%; }
.chatbubble.them { max-width:85%; }

/* 3 steps */
.steps-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter); counter-reset: s; }
@media (max-width:760px){ .steps-3 { grid-template-columns:1fr; } }
.step3 { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:2.2rem 1.6rem 1.6rem; }
.step3__n {
  position:absolute; top:-22px; left:1.6rem;
  width:48px;height:48px;border-radius:14px; display:grid;place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:#fff;
  background:linear-gradient(135deg,var(--purple-600),var(--purple-400));
  box-shadow:var(--shadow-brand);
}
.step3 h3 { margin-top:0.6rem; font-size:1.2rem; }

/* Feature grid */
.fp-feats { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter); }
@media (max-width:680px){ .fp-feats { grid-template-columns:1fr; } }
.fp-feat { display:flex; gap:1rem; align-items:flex-start; }
.fp-feat__ic { flex:none; width:54px;height:54px;border-radius:15px;display:grid;place-items:center; }
.fp-feat__ic svg { width:28px;height:28px; }
.fp-feat h3 { font-size:1.1rem;margin-bottom:0.25rem; }
.fp-feat p { font-size:var(--fs-sm); }

/* (Store badge styles are shared — see components.css) */