/* =========================
   Root & Base
========================= */
:root{
  --pink:#ff3fb5;
  --pink-dark:#e635a6;
  --ink:#222;
  --muted:#6b7280;
  --bg:#d4d4d4;
  --card:#fff;
  --line:#bf3b8c;
  --shadow:0 2px 6px rgba(0,0,0,.08);
  --card-alt:#f8e8f3; /* soft pink card background */
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg); /* lets the page-shell shadow show */
  color:var(--ink);
  line-height:1.55;
  font-family:'Manrope',sans-serif;
}

a{ color:var(--pink); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Page frame */
.page-shell{
  max-width:1240px;
  margin:16px auto;
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 12px 36px rgba(0,0,0,.12),
    0 0 80px rgba(255,63,181,.08); /* gentle pink glow */
  overflow:hidden;
}

.wrap{ max-width:1100px; margin:0 auto; padding:0 16px; }
.wrap-head{ max-width:1100px; margin:0 auto; padding:16px; }

/* =========================
   Buttons (with bounce)
========================= */
.btn{
  font-family: 'Manrope', sans-serif;
  display:inline-block;
  background:#eee;
  color:#222;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, color .2s ease;
  animation: bounceIn .3s ease;
}
.btn:hover{ background:var(--pink); color:#fff; text-decoration:none; transform: translateY(-3px) scale(1.03); }
.btn:active{ transform: translateY(1px) scale(0.97); }
.btn-primary{ background:var(--pink); color:#fff; }
.btn-primary:hover{ background:var(--pink-dark); }

@keyframes bounceIn{
  0%{ transform: scale(0.95); }
  60%{ transform: scale(1.05); }
  100%{ transform: scale(1); }
}

/* =========================
   Cards
========================= */
.card{
  background:var(--card-alt); /* pink background by default */
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
  transition: box-shadow .25s ease, transform .25s ease;
}

/* Default hover: grey glow */
.card:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  transform: translateY(-3px);
}

/* Cards in pink-inline stay white + pink glow */
.pink-inline .card{ background:var(--card); }
.pink-inline .card:hover{
  box-shadow: 0 6px 18px rgba(230,53,166,.45);
  transform: translateY(-3px);
}

.card h3{ margin:0 0 8px; }
.muted{ color:var(--muted); }
.price{ font-size:22px; font-weight:700; margin-top:8px; }
.pill{ display:inline-block; background:#f8e8f3; color:#9b2c79; border-radius:999px; padding:4px 10px; font-size:12px; margin-left:6px; }

/* Lists & inline highlight */
.bullets{ list-style:disc; padding-left:20px; margin:10px 0; }
.bullets li{ margin:6px 0; }
.pink-inline{ background:#f8e8f3; color:var(--ink); }

/* =========================
   Hero & Top Bar
========================= */
.hero{
  background:#fff;
  color:var(--ink);
  padding-bottom:16px;
  text-align:center;
  border-bottom:1px solid var(--line);
  border-top:3px solid var(--line);
}

.wrap-head .brand-logos{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.wrap-head .brand-logos img{ height:60px; object-fit:contain; }

.hero h1{ font-size:40px; margin:8px 0; }
.hero p.tag{ font-size:18px; margin:0 0 20px; }

.cta-row{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:20px;
  row-gap:12px;
}

.subtle{ opacity:.9; font-size:14px; }

section{ padding:48px 0; border-top:1px solid var(--line); }
h2.section-title{ text-align:center; margin:0 0 20px; font-size:28px; }

/* =========================
   Grids
========================= */
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

/* =========================
   Split (Text + Image)
========================= */
.split{
  display:grid;
  gap:24px;
  grid-template-columns: 1.15fr .85fr;
  align-items:start;
}
.split.reverse{ grid-template-columns: .85fr 1.15fr; }

.col-text, .col-media{ display:flex; flex-direction:column; }
.col-text .card{ flex:1; }

.col-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:16px; box-shadow:var(--shadow);
}

/* Family logo: ~150px high, no shadow */
#family .col-media img{
  height:auto; max-height:150px; width:auto; max-width:100%;
  object-fit:contain; box-shadow:none; border-radius:0; background:transparent; margin:0 auto;
}

/* =========================
   Hero two-column
========================= */
.hero .hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:24px;
  align-items:center;
  text-align:left;
  margin-top:10px;
}

.video-embed{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  border-radius:16px;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:#000;
}
.video-embed iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

.hero .hero-right h1{ font-size:40px; margin:8px 0; }
.hero .hero-right p.tag{ font-size:18px; margin:0 0 20px; }
.hero .hero-right .cta-row{ justify-content:flex-start; }

/* =========================
   Responsive
========================= */
@media (max-width:1200px){
  .grid-4{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:1024px){
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:900px){
  .page-shell{ margin:0; border-radius:0; box-shadow:none; }
  .split, .split.reverse{ grid-template-columns:1fr; }
  .hero .hero-grid{ grid-template-columns:1fr; }
  .hero .hero-right{ text-align:center; }
  .hero .hero-right .cta-row{ justify-content:center; }
}
@media (max-width:800px){
  .grid-2{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .grid-4{ grid-template-columns:1fr; }
  .hero h1{ font-size:32px; }
  .wrap-head .brand-logos{
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
  }
  .wrap-head .brand-logos img{ height:44px; }
}