/* ============================================================
   For Parents — page-scoped styles (.fp-).
   Ported from design_reference/for-parents.html. All keyframes
   namespaced fp*; base style.css owns the reduced-motion kill.
   ============================================================ */

@keyframes fpFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes fpBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes fpAvoWave{ 0%{ transform:rotate(-5deg); } 25%{ transform:rotate(4deg); } 50%{ transform:rotate(-5deg); } 75%{ transform:rotate(3deg); } 100%{ transform:rotate(-5deg); } }
@keyframes fpArmWave{ 0%,100%{ transform:rotate(-7deg); } 50%{ transform:rotate(13deg); } }
@keyframes fpPulseG{ 0%,100%{ box-shadow:0 12px 26px rgba(76,160,90,.28); } 50%{ box-shadow:0 16px 38px rgba(76,160,90,.46); } }
@keyframes fpDown{ 0%{ top:2%; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ top:98%; opacity:0; } }
@keyframes fpGlow{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* ---------- Hero: the "Meet Avo" moment ---------- */
.fp-hero{ position:relative; overflow:hidden; padding:50px 0 20px; }
.fp-hero-grid{ position:relative; z-index:1; display:flex; align-items:center; gap:48px; }
.fp-hero-copy{ flex:1; min-width:0; }
.fp-hero-copy h1{ font-size:clamp(34px,5.4vw,58px); line-height:1.04; letter-spacing:-.4px; margin:0; }
.fp-hero-copy h1 em{ color:var(--sage2); }
.fp-pill{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--sage-c1); color:var(--sage-d);
  padding:7px 15px; border-radius:var(--r-pill);
  font:700 12.5px var(--font-b); letter-spacing:.02em; margin-bottom:20px;
}
.fp-pill-dot{ width:7px; height:7px; border-radius:50%; background:var(--sage2); }

.fp-hero-art{ position:relative; flex:none; width:300px; height:280px; display:flex; align-items:center; justify-content:center; }
.fp-float{ position:absolute; border-radius:50%; }
.fp-float-a{ width:30px; height:30px; background:var(--butter-c); top:6%; left:8%; animation:fpBob 7s ease-in-out infinite; }
.fp-float-b{ width:20px; height:20px; background:var(--lav-c); bottom:10%; right:8%; animation:fpBob 9s ease-in-out infinite; }
.fp-meet{ position:absolute; top:-4%; left:-13%; text-align:center; transform:rotate(-8deg); z-index:2; }
.fp-meet-txt{
  display:block; font:italic 600 26px/0.92 var(--font-d); color:#E08A3C;
}
.fp-meet svg{ display:block; margin:2px auto 0; overflow:visible; }

/* Waving Avo — body + arm layers; the arm waves on a loop */
.fp-avo{ position:relative; }
.fp-avo img{ width:100%; height:100%; object-fit:contain; display:block; }
.fp-avo-hero{ width:270px; height:270px; transform-origin:70% 92%; animation:fpAvoWave 2.2s ease-in-out infinite; }
.fp-avo .fp-avo-arm{
  position:absolute; inset:0; width:100%; height:100%;
  transform-origin:17.5% 46%;
  animation:fpArmWave 1.5s ease-in-out infinite;
}

/* ---------- Journey timeline ---------- */
.fp-journey{ max-width:760px; margin:0 auto; padding:36px 22px 30px; }
.fp-strip-head{ text-align:center; margin-bottom:34px; }
.fp-strip-head h2{ font-size:clamp(27px,4.2vw,38px); margin:0 0 8px; line-height:1.1; }
.fp-strip-head h2 em{ color:var(--sage2); }
.fp-head-sub{ font:400 14.5px/1.5 var(--font-b); color:var(--ink3); margin:0 auto; max-width:440px; }

.fp-tl{ position:relative; padding-left:6px; }
.fp-tl-line{
  position:absolute; left:30px; top:18px; bottom:18px; width:2px;
  background:repeating-linear-gradient(#DCE8CC,#DCE8CC 6px,transparent 6px,transparent 13px);
}
.fp-tl-leaf{ position:absolute; left:50%; transform:translate(-50%,-50%); width:24px; height:24px; animation:fpDown 6s linear infinite; }
.fp-node{ position:relative; padding:0 0 30px 78px; min-height:78px; }
.fp-node-last{ padding-bottom:4px; }
.fp-node-disc{
  position:absolute; left:8px; top:0; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.fp-disc-butter{ background:var(--butter-c); }
.fp-disc-lav{ background:var(--lav-c); }
.fp-disc-peach{ background:var(--peach-c); }
.fp-disc-sage{ background:var(--sage-c1); }
.fp-disc-glow{ animation:fpGlow 3s ease-in-out infinite; }
.fp-kicker{
  font:700 11.5px var(--font-b); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:4px; padding-top:4px;
}
.fp-node-title{ font:600 21px var(--font-d); color:var(--ink); margin-bottom:5px; }
.fp-node p{ font:400 14px/1.55 var(--font-b); color:var(--ink3); margin:0; max-width:420px; }

/* ---------- Pickup Point handover — peach band ---------- */
.fp-handover{ background:#F9EBE1; padding:54px 22px; }
.fp-handover-in{ max-width:1000px; margin:0 auto; }
.fp-handover-in h2{ font-size:clamp(26px,4vw,36px); margin:0 0 30px; text-align:center; line-height:1.1; }
.fp-handover-in h2 em{ color:var(--peach); }
.fp-handover-row{ display:flex; align-items:flex-start; gap:18px; }
.fp-hand-col{ flex:1; min-width:0; text-align:center; padding:0 12px; }
.fp-hand-n{
  width:54px; height:54px; border-radius:50%; background:var(--peach-c);
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  color:var(--peach); font:600 22px var(--font-d);
}
.fp-hand-t{ font:600 19px var(--font-d); color:var(--ink); margin-bottom:6px; }
.fp-hand-col p{ font:400 13.5px/1.55 var(--font-b); color:#7C7060; margin:0 auto; max-width:240px; }

/* ---------- Why 9 p.m. — butter band, centered ---------- */
.fp-why{ background:#FBF4DC; padding:50px 22px; text-align:center; }
.fp-why-inner{ max-width:660px; margin:0 auto; }
.fp-why-icon{
  width:64px; height:64px; border-radius:50%; background:#F2E4A6;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 18px; animation:fpBob 5s ease-in-out infinite;
}
.fp-why-inner h2{ font-size:clamp(23px,3.6vw,32px); margin:0 0 10px; line-height:1.15; }
.fp-why-inner h2 em{ color:var(--butter-d); }
.fp-why-inner p{ font:400 15px/1.6 var(--font-b); color:#8a7a52; margin:0 auto; max-width:560px; }

/* ---------- FAQ — rounded cards, +/− disc flips to sage ---------- */
.fp-faq-sec{ padding:54px 0 40px; }
.fp-faq-in{ max-width:760px; margin:0 auto; padding:0 22px; }
.fp-faq-head{ font-size:clamp(26px,4vw,36px); margin:0 0 26px; text-align:center; line-height:1.1; }
.fp-faq{ display:grid; gap:12px; }
.fp-faq details{
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-card); padding:0 22px;
  transition:box-shadow .2s ease;
}
.fp-faq details[open]{ box-shadow:var(--shadow-lift); }
.fp-faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; font:600 18px/1.35 var(--font-d); color:var(--ink);
  transition:background .15s ease;
}
.fp-faq summary::-webkit-details-marker{ display:none; }
.fp-faq-disc{
  flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--sage-c1); color:var(--sage2);
  display:flex; align-items:center; justify-content:center;
  font:600 18px/1 var(--font-b);
  transition:background .2s ease, color .2s ease;
}
.fp-faq-disc::before{ content:"+"; }
.fp-faq details[open] .fp-faq-disc{ background:var(--sage); color:var(--cream); }
.fp-faq details[open] .fp-faq-disc::before{ content:"−"; }
.fp-faq .fp-a{
  padding:0 44px 22px 0; font:400 14.5px/1.6 var(--font-b); color:var(--ink3);
  max-width:600px; animation:fpFade .25s ease;
}
.fp-faq .fp-a .arrow-link{ font-size:14.5px; }

/* Closing sign-off mascot */
.fp-wink{ width:90px; margin:0 auto 18px; }

/* ---------- Mobile (prototype's `narrow` = 760px) ---------- */
@media (max-width:760px){
  .fp-hero{ padding:26px 0 8px; }
  .fp-hero-grid{ flex-direction:column-reverse; gap:22px; align-items:center; text-align:center; }
  .fp-hero-art{ width:200px; height:170px; }
  .fp-avo-hero{ width:195px; height:195px; }
  .fp-meet{ top:-12%; left:-22%; }
  .fp-handover-row{ flex-direction:column; gap:30px; }
  .fp-faq details{ padding:0 16px; }
  .fp-faq summary{ font-size:16px; }
  .fp-faq .fp-a{ padding-right:0; }
}