:root{
    --pink: #FF2E88;
    --pink-hot: #FF6FAE;
    --pink-deep: #C41368;
    --berry: #7A0E45;
    --berry-deep: #4F0A2E;
    --purple: #9B5DE5;
    --purple-deep: #6A2FB8;
    --gold: #FFD23F;
    --gold-deep: #F0A500;
    --jungle: #2E6B4F;
    --jungle-deep: #1E4A36;
    --sammy-green: #5C9A2F;
    --sammy-green-deep: #3E6B1E;
    --sammy-cream: #F0F7E4;
    --sammy-cream-deep: #C9E3A0;
    --blue: #3B7DDD;
    --blue-deep: #2857A8;
    --orange: #FF8C42;
    --orange-deep: #E8681C;
    --cream: #FFF1F7;
    --cream-deep: #FFD9EA;
    --ink: #3A1230;
    --white: #FFFFFF;

    --font-display: 'Baloo 2', system-ui, sans-serif;
    --font-body: 'Quicksand', system-ui, sans-serif;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color: inherit; text-decoration:none; }
  h1,h2,h3{ font-family: var(--font-display); }
  .wrap{ max-width: 1140px; margin:0 auto; padding: 0 24px; }
  section{ position:relative; }

  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  }

  /* ---------- Sparkles (signature element) ---------- */
  .sparkle-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
  .sparkle{
    position:absolute; opacity:.5;
    animation: twinkle 2.6s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%, 100%{ opacity:.2; transform: scale(0.7) rotate(0deg); }
    50%{ opacity:1; transform: scale(1.15) rotate(15deg); }
  }
  .sparkle svg{ width:100%; height:100%; display:block; }

  /* ---------- Nav ---------- */
  .nav{
    position: sticky; top:0; z-index: 100;
    background: rgba(255,241,247,0.92);
    backdrop-filter: blur(6px);
    border-bottom: 3px solid var(--cream-deep);
  }
  .nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:8px; padding-bottom:8px;
  }
  .brand{
    font-family: var(--font-display);
    font-weight:800;
    font-size: 1.1rem;
    color: var(--pink-deep);
    display:flex; align-items:center; gap:10px;
  }
  .brand .dot{ color: var(--gold-deep); }
  .brand-mark{ width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0; box-shadow: 0 2px 8px rgba(122,14,69,0.35); border: 2px solid var(--gold); }
  .brand-mark img{ width:100%; height:100%; object-fit:cover; display:block; }
  .brand-name{ line-height:1.05; }
  .nav-links{ display:flex; gap: 26px; list-style:none; }
  .nav-links a{
    font-family: var(--font-body);
    font-weight:700;
    font-size: 0.98rem;
    color: var(--ink);
    padding: 6px 2px;
    border-bottom: 3px solid transparent;
    transition: border-color .2s ease, color .2s ease;
  }
  .nav-links a:hover{ border-color: var(--gold); color: var(--pink-deep); }
  .nav-toggle{ display:none; background:none; border:none; font-size:1.6rem; color:var(--pink-deep); cursor:pointer; }

  @media (max-width: 760px){
    .nav-links{
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; background: var(--cream);
      padding: 12px 24px 20px; gap: 14px;
      border-bottom: 3px solid var(--cream-deep);
      display:none;
    }
    .nav-links.open{ display:flex; }
    .nav-toggle{ display:block; }
  }

  /* ---------- Hero ---------- */
  .hero{
    position: relative;
    min-height: 58vh;
    display:flex; align-items:center;
    background: linear-gradient(160deg, rgba(122,14,69,0.25), rgba(196,19,104,0.6)), url('images/cassie.jpg') center 8%/cover no-repeat;
  }
  .hero .wrap{ position:relative; z-index:2; padding-top: 18px; padding-bottom: 18px; }
  .hero-card{ max-width: 640px; color: var(--white); }
  .eyebrow{
    display:inline-block;
    font-family: var(--font-body); font-weight:700;
    letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem;
    color: var(--pink);
    margin-bottom: 10px;
  }
  .hero h1{
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    line-height: 1.1; font-weight: 800;
    text-shadow: 0 4px 20px rgba(0,0,0,0.45);
    color: var(--white);
  }
  .hero h1 .accent{
    white-space: nowrap;
  }
  .hero-subhead{
    font-family: var(--font-display); font-weight:700;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--white);
    margin-top: 14px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.6);
  }
  .hero-desc{
    font-size: 1.02rem; line-height:1.6;
    color: rgba(255,255,255,0.92);
    max-width: 560px;
    margin-top: 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  }
  @media (max-width: 460px){
    .hero h1{ font-size: clamp(1.5rem, 8vw, 2.2rem); }
  }

  .hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top: 16px; }

  .btn{
    position:relative; overflow:hidden;
    display:inline-flex; align-items:center; gap:8px;
    font-family: var(--font-body); font-weight:700; font-size: 1rem;
    padding: 15px 28px; border-radius: 999px;
    border: none; cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .btn::after{
    content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
  }
  .btn:hover::after{ left: 130%; }
  .btn:hover{ transform: translateY(-2px); }
  .btn-primary{ background: linear-gradient(120deg, var(--pink), var(--pink-deep)); color: var(--white); box-shadow: 0 10px 24px rgba(255,46,136,0.45); }
  .btn-primary:hover{ box-shadow: 0 14px 30px rgba(255,46,136,0.55); }
  .btn-ghost{ background: rgba(255,255,255,0.16); color: var(--white); border: 2px solid rgba(255,255,255,0.75); }
  .btn-ghost:hover{ background: rgba(255,255,255,0.3); }
  .btn-gold{ background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--berry-deep); box-shadow: 0 10px 24px rgba(240,165,0,0.4); }
  .btn-purple{ background: linear-gradient(120deg, var(--purple), var(--purple-deep)); color:var(--white); box-shadow: 0 10px 24px rgba(106,47,184,0.4); }

  /* ---------- Section headers ---------- */
  .section-head{ text-align:center; max-width: 680px; margin: 0 auto 44px; position:relative; z-index:2; }
  .section-eyebrow{
    font-family: var(--font-body); font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    font-size: 0.8rem; color: var(--gold);
  }
  .section-head h2{
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    color: var(--white);
    margin-top: 8px; line-height: 1.1;
    white-space: nowrap;
  }
  .section-head p{ margin-top: 14px; font-size: 1.05rem; color: rgba(255,255,255,0.85); }
  @media (max-width: 640px){
    .section-head h2{ white-space: normal; }
  }

  /* ---------- Music & Videos ---------- */
  .music{
    padding: 100px 0;
    background: linear-gradient(165deg, var(--berry-deep), var(--pink-deep) 70%);
    color: var(--white);
  }
  .music-layout{
    display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items:center;
    position:relative; z-index:2;
  }
  .music-photo{ position:relative; }
  .music-photo img{ border-radius: 26px; box-shadow: 0 24px 55px rgba(0,0,0,0.4); border: 3px solid rgba(255,255,255,0.25); }

  .link-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .link-card{
    background: rgba(255,255,255,0.09);
    border: 1.5px solid rgba(255,255,255,0.28);
    border-radius: 18px;
    padding: 20px;
    display:flex; align-items:center; gap:14px;
    transition: background .2s ease, transform .18s ease, border-color .2s ease;
  }
  .link-card:hover{ background: rgba(255,255,255,0.18); transform: translateY(-3px); border-color: var(--gold); }
  .link-card .icon{
    width:46px; height:46px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--gold), var(--pink-hot)); color: var(--berry-deep); flex-shrink:0;
  }
  .link-card .icon svg{ width:22px; height:22px; }
  .link-card .label{ font-family: var(--font-display); font-weight:700; font-size:1.04rem; }
  .link-card .sub{ font-size: 0.82rem; color: rgba(255,255,255,0.78); margin-top:2px; }

  @media (max-width: 900px){
    .music-layout{ grid-template-columns: 1fr; }
    .music-photo{ order:-1; }
  }
  @media (max-width: 560px){
    .link-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- YouTube spotlight ---------- */
  .youtube{
    padding: 100px 0;
    background: linear-gradient(165deg, var(--purple-deep), var(--purple) 75%);
    color: var(--white);
  }
  .youtube-layout{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items:center;
    position:relative; z-index:2;
  }
  .youtube-copy .section-eyebrow{ text-align:left; }
  .youtube-copy h2{ text-align:left; font-size: clamp(2rem,4vw,2.7rem); color:var(--white); margin: 8px 0 16px; }
  .youtube-copy p{ font-size:1.06rem; line-height:1.65; color: rgba(255,255,255,0.85); margin-bottom: 26px; }
  .youtube-photo{ position:relative; }
  .youtube-photo img{ border-radius: 26px; box-shadow: 0 24px 55px rgba(0,0,0,0.4); border: 3px solid rgba(255,255,255,0.25); }
  .youtube-photo .play-circle{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    width:76px; height:76px; border-radius:50%;
    background: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
  .youtube-photo .play-circle svg{ width:28px; height:28px; color: var(--purple-deep); margin-left:4px; }

  @media (max-width: 900px){
    .youtube-layout{ grid-template-columns: 1fr; }
    .youtube-copy{ text-align:center; }
    .youtube-copy .section-eyebrow, .youtube-copy h2{ text-align:center; }
  }

  /* ---------- Shop coming soon ---------- */
  .shop{
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(30,74,54,0.9), rgba(30,74,54,0.9)), url('images/treehouse.jpg') center/cover no-repeat;
    color: var(--white); text-align:center;
  }
  .shop .wrap{ position:relative; z-index:2; }
  .shop .section-eyebrow{ color: var(--gold); }
  .shop h2{ color: var(--white); font-size: clamp(2rem,4vw,2.7rem); margin: 8px 0 14px; }
  .shop p{ max-width: 560px; margin: 0 auto 28px; color: rgba(255,255,255,0.85); font-size: 1.05rem; line-height:1.6; }
  .coming-soon-pill{
    display:inline-block;
    background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--berry-deep);
    font-family: var(--font-display); font-weight:800;
    padding: 10px 24px; border-radius:999px;
    transform: rotate(-3deg); margin-bottom: 26px;
    font-size: 0.95rem; letter-spacing: 0.04em;
  }

  /* ---------- Welcome to Dino Valley ---------- */
  .welcome{ padding: 90px 0; background: var(--cream); }
  .welcome-layout{
    display:grid; grid-template-columns: 1fr 0.85fr; gap: 56px; align-items:center;
  }
  .welcome-copy .section-eyebrow{ text-align:left; color: var(--pink-deep); }
  .welcome-copy h2{ text-align:left; font-size: clamp(1.7rem,3.4vw,2.3rem); color: var(--pink-deep); margin: 8px 0 16px; line-height:1.25; }
  .welcome-copy p{ font-size: 1.02rem; line-height:1.7; color: #5c2246; margin-bottom: 16px; }
  .welcome-photo img{ border-radius: 26px; box-shadow: 0 20px 50px rgba(122,14,69,0.18); border: 3px solid var(--white); }
  @media (max-width: 860px){
    .welcome-layout{ grid-template-columns: 1fr; }
    .welcome-photo{ order:-1; }
    .welcome-copy .section-eyebrow, .welcome-copy h2{ text-align:center; }
  }

  /* ---------- Pathway cards (Watch / Listen / Learn / Shop) ---------- */
  .pathways{ padding: 90px 0 100px; background: var(--cream-deep); }
  .pathway-grid{
    display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    max-width: 1140px; margin: 0 auto;
  }
  .pathway-card{
    background: var(--white); border-radius: 22px; overflow:hidden;
    box-shadow: 0 14px 34px rgba(122,14,69,0.12);
    border: 2px solid transparent;
    display:flex; flex-direction:column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .pathway-card:hover{ transform: translateY(-5px); box-shadow: 0 20px 44px rgba(122,14,69,0.2); border-color: var(--pink); }
  .pathway-card .thumb{ aspect-ratio: 4/3; overflow:hidden; position:relative; background: var(--cream-deep); }
  .pathway-card .thumb img{ width:100%; height:100%; object-fit:cover; }
  .pathway-card--square .thumb{ aspect-ratio: 1/1; }
  .pathway-card .thumb .status-badge{
    position:absolute; top:12px; left:12px; z-index:2;
    background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--berry-deep);
    font-family: var(--font-display); font-weight:800; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
    padding: 6px 14px; border-radius:999px; box-shadow: 0 6px 14px rgba(240,165,0,0.35);
  }
  .pathway-card .path-info{ padding: 22px 22px 26px; flex:1; display:flex; flex-direction:column; }
  .pathway-card .path-kicker{ font-family: var(--font-display); font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--pink); margin-bottom:6px; }
  .pathway-card h3{ font-size: 1.15rem; color: var(--ink); margin-bottom:8px; }
  .pathway-card p{ font-size: 0.9rem; color: #6b5063; line-height:1.55; margin-bottom:16px; flex:1; }
  .pathway-card .path-link{ font-family: var(--font-display); font-weight:700; color: var(--pink-deep); font-size:0.95rem; }
  .pathway-card .path-link:hover{ text-decoration: underline; }
  @media (max-width: 900px){ .pathway-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .pathway-grid{ grid-template-columns: 1fr; } }

  /* ---------- Meet Cassie & Friends ---------- */
  .friends-section{ padding: 90px 0; background: var(--cream); }
  .friends-intro{ text-align:center; max-width: 680px; margin: 0 auto 44px; }
  .friends-intro .section-eyebrow{ color: var(--pink-deep); }
  .friends-intro h2{ font-size: clamp(1.5rem, 2.5vw, 2.1rem); color: var(--berry); margin: 8px 0 14px; white-space: nowrap; }
  @media (max-width: 640px){
    .friends-intro h2{ white-space: normal; }
  }
  .friends-intro p{ font-size: 1.03rem; line-height:1.65; color: #5c2246; }
  .friends-grid{
    display:grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
    max-width: 1140px; margin: 0 auto;
  }
  .friend-tile{
    background: var(--white); border-radius: 22px; padding: 22px 16px 24px;
    text-align:center; box-shadow: 0 14px 34px rgba(122,14,69,0.1);
    border: 2px solid var(--cream-deep);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .friend-tile:hover{ transform: translateY(-5px); box-shadow: 0 18px 40px rgba(122,14,69,0.18); }
  .friend-tile .portrait-badge{
    width: 132px; height:132px; border-radius:50%; margin: 0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:visible;
  }
  .friend-tile .portrait-badge img{
    width: 128px; height:128px; object-fit:contain;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18));
  }
  .friend-tile.is-cassie .portrait-badge{ background: none; }
  .friend-tile.is-tilly .portrait-badge{ background: none; }
  .friend-tile.is-rexy .portrait-badge{ background: none; }
  .friend-tile.is-pip .portrait-badge{ background: none; }
  .friend-tile.is-sammy .portrait-badge{ background: none; }
  .friend-tile.is-cassie .portrait-badge img{ width:128px; height:128px; border-radius:0; object-fit:contain; }
  .friend-tile h3{ font-size: 1.1rem; color: var(--ink); margin-bottom:2px; }
  .friend-tile .friend-role{ display:block; font-family: var(--font-body); font-weight:700; font-size:0.78rem; color: #6b5063; margin-bottom:10px; }
  .friend-tile p{ font-size: 0.85rem; line-height:1.5; color: #6b5063; }
  @media (max-width: 980px){ .friends-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px){ .friends-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 420px){ .friends-grid{ grid-template-columns: 1fr; } }

  /* ---------- What Can Kids Learn With Cassie ---------- */
  .learn-can{
    padding: 90px 0;
    background: linear-gradient(180deg, rgba(30,74,54,0.92), rgba(30,74,54,0.92)), url('images/lush_landscape.jpg') center/cover no-repeat;
    color: var(--white); text-align:center;
  }
  .learn-can .section-eyebrow{ color: var(--gold); }
  .learn-can h2{ color: var(--white); font-size: clamp(1.8rem,3.6vw,2.4rem); margin: 8px 0 16px; }
  .learn-can > .wrap > p{ max-width: 620px; margin: 0 auto 30px; color: rgba(255,255,255,0.85); font-size: 1.03rem; line-height:1.6; }
  .skill-pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width: 780px; margin: 0 auto 34px; }
  .skill-pill{
    background: rgba(255,255,255,0.14); border: 2px solid rgba(255,255,255,0.35);
    color: var(--white); font-family: var(--font-body); font-weight:600; font-size:0.9rem;
    padding: 9px 18px; border-radius: 999px;
  }

  /* ---------- Featured content ---------- */
  .featured{ padding: 90px 0; background: var(--cream); }
  .featured-grid{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
    max-width: 1080px; margin: 0 auto;
  }
  .featured-card{
    background: var(--white); border: 2px solid var(--cream-deep); border-radius: 20px;
    overflow:hidden; box-shadow: 0 14px 34px rgba(122,14,69,0.1);
    display:block; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .featured-card:hover{ transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 18px 40px rgba(106,47,184,0.18); }
  .featured-card .thumb{ aspect-ratio: 1/1; overflow:hidden; position:relative; }
  .featured-card .thumb img{ width:100%; height:100%; object-fit:cover; }
  button.featured-card{ padding:0; margin:0; text-align:left; cursor:pointer; font-family: var(--font-body); appearance:none; }
  .featured-card .thumb .play-badge{
    position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
    width:56px; height:56px; border-radius:50%;
    background: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35);
  }
  .featured-card .thumb .play-badge svg{ width:22px; height:22px; color: var(--purple-deep); margin-left:3px; }
  .featured-card .feat-info{ padding: 18px 20px 22px; }
  .featured-card .path-kicker{ font-family: var(--font-display); font-weight:700; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase; color: var(--purple-deep); margin-bottom:6px; }
  .featured-card h3{ font-size: 1.05rem; color: var(--ink); }
  @media (max-width: 860px){ .featured-grid{ grid-template-columns: 1fr; max-width: 420px; } }

  /* ---------- Made for Little Learners (parent/teacher) ---------- */
  .parent-section{
    padding: 90px 0;
    background: linear-gradient(160deg, var(--purple-deep), var(--berry-deep) 85%);
    color: var(--white); text-align:center;
  }
  .parent-section h2{ color: var(--white); font-size: clamp(1.8rem,3.6vw,2.4rem); margin: 8px 0 16px; }
  .parent-section .section-eyebrow{ color: var(--gold); }
  .parent-section p{ max-width: 640px; margin: 0 auto 28px; color: rgba(255,255,255,0.88); font-size: 1.03rem; line-height:1.65; }

  /* ---------- Contact ---------- */
  .contact{ padding: 100px 0 110px; background: var(--cream); }
  .contact-grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 50px; }
  .contact-info h2{ font-size: clamp(1.9rem,3.6vw,2.4rem); color: var(--pink-deep); margin-bottom: 16px; }
  .contact-info p{ color:#5c2246; line-height:1.6; margin-bottom: 22px; }
  .social-row{ display:flex; gap:14px; }
  .social-btn{
    width:48px; height:48px; border-radius:14px;
    background: var(--white); border:2px solid var(--cream-deep);
    display:flex; align-items:center; justify-content:center;
    color: var(--pink-deep);
    transition: transform .18s ease, border-color .18s ease;
  }
  .social-btn:hover{ transform: translateY(-3px) scale(1.05); border-color: var(--pink); }
  .social-btn svg{ width:22px; height:22px; }

  form.contact-form{
    background: var(--white);
    border-radius: 24px;
    padding: 36px;
    box-shadow: 0 20px 50px rgba(122,14,69,0.15);
    border: 2px solid var(--cream-deep);
    display:grid; gap: 18px;
  }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
  label{ font-family: var(--font-body); font-weight:700; font-size:0.92rem; color: var(--berry); display:block; margin-bottom:6px; }
  input, textarea{
    width:100%; font-family: var(--font-body); font-size: 1rem;
    border: 2px solid var(--cream-deep); border-radius: 12px;
    padding: 12px 14px; background: var(--cream);
    color: var(--ink);
  }
  input:focus, textarea:focus{ border-color: var(--pink); outline:none; background: var(--white); }
  textarea{ resize: vertical; min-height: 120px; }
  .form-note{ font-size: 0.82rem; color: var(--pink-deep); opacity:0.7; }

  @media (max-width: 900px){
    .contact-grid{ grid-template-columns: 1fr; }
    .form-row{ grid-template-columns: 1fr; }
  }

  /* ---------- Footer ---------- */
  footer{
    position:relative; overflow:hidden;
    background: linear-gradient(135deg, var(--pink-deep), var(--purple-deep));
    color: rgba(255,255,255,0.9);
    padding: 44px 0 32px; text-align:center;
  }
  footer .wrap{ position:relative; z-index:2; }
  footer .brand{ color: var(--white); justify-content:center; margin-bottom: 10px; }
  footer .foot-tagline{
    font-family: var(--font-display); font-weight:800;
    color: var(--gold);
    margin-bottom: 18px;
  }
  footer .foot-links{ display:flex; justify-content:center; gap:22px; margin-bottom:18px; flex-wrap:wrap; font-size:0.9rem; }
  footer .foot-links a:hover{ color: var(--gold); }
  footer .copyright{ font-size: 0.8rem; opacity:0.7; }


/* ============================================================
   Sub-page hero banners (color-coded to match brand sections)
   ============================================================ */
.page-hero{
  padding: 70px 0 60px;
  color: var(--white);
  text-align: center;
  position: relative;
}
.page-hero .wrap{ position:relative; z-index:2; }
.page-hero .section-eyebrow{ justify-content:center; display:flex; gap:6px; }
.page-hero h1{
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  color: var(--white);
  margin-top: 10px;
  line-height: 1.1;
}
.page-hero p{
  max-width: 620px; margin: 16px auto 0;
  font-size: 1.05rem; color: rgba(255,255,255,0.88); line-height: 1.6;
}
.page-hero--purple{ background: linear-gradient(165deg, var(--purple-deep), var(--purple) 80%); }
.page-hero--berry{ background: linear-gradient(165deg, var(--berry-deep), var(--pink-deep) 75%); }
.page-hero--jungle{ background: linear-gradient(165deg, var(--jungle-deep), var(--jungle) 80%); }

.page-body{ padding: 80px 0 100px; background: var(--cream); }

/* ============================================================
   Watch page — video grid
   ============================================================ */
.video-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 880px; margin: 0 auto;
}
.video-card{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display:block; border-radius: 20px; overflow:hidden;
  background: var(--white); border: 2px solid var(--cream-deep);
  box-shadow: 0 14px 34px rgba(122,14,69,0.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  padding:0; margin:0; text-align:left; width:100%; cursor:pointer; font-family: var(--font-body);
}
.video-card:hover{ transform: translateY(-4px); border-color: var(--purple); box-shadow: 0 18px 40px rgba(106,47,184,0.18); }
.video-card .thumb{ position:relative; aspect-ratio: 16/9; overflow:hidden; display:block; }
.video-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card .thumb .play-badge{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  background: rgba(255,255,255,0.92); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.video-card .thumb .play-badge svg{ width:22px; height:22px; color: var(--purple-deep); margin-left:3px; }
.video-card .video-info{ padding: 16px 18px 20px; }
.video-card .video-info h3{ font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); font-weight:700; line-height:1.3; }
.video-card .video-info .tag{ font-size: 0.78rem; color: var(--purple-deep); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; display:block; }

.watch-more-row{ text-align:center; margin-top: 48px; }

@media (max-width: 700px){
  .video-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Listen page — song grid + modal
   ============================================================ */
.song-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 980px; margin: 0 auto;
}
.song-card{
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: var(--white); border: 2px solid var(--cream-deep); border-radius: 20px;
  overflow:hidden; text-align:left; cursor:pointer; padding:0; margin:0; width:100%;
  display:block; font-family: var(--font-body); box-shadow: 0 14px 34px rgba(122,14,69,0.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.song-card:hover{ transform: translateY(-4px); border-color: var(--pink); box-shadow: 0 18px 40px rgba(255,46,136,0.18); }
.song-card .cover{ aspect-ratio: 1/1; overflow:hidden; display:block; }
.song-card .cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.song-card .song-info{ padding: 16px 18px 20px; }
.song-card .song-info h3{ font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); font-weight:700; margin-bottom:4px; }
.song-card .song-info .listen-label{ font-size: 0.85rem; color: var(--pink-deep); font-weight:700; display:inline-flex; align-items:center; gap:5px; }

@media (max-width: 800px){
  .song-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .song-grid{ grid-template-columns: 1fr; }
}

/* Modal */
.modal-overlay{
  position: fixed; inset:0; background: rgba(58,18,48,0.65);
  display:none; align-items:center; justify-content:center; padding: 24px;
  z-index: 1000;
}
.modal-overlay.open{ display:flex; }
.modal-card{
  background: var(--white); border-radius: 26px; max-width: 380px; width:100%;
  padding: 32px 28px; text-align:center; position:relative;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.modal-card .modal-close{
  position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%;
  background: var(--cream); border:none; color: var(--pink-deep); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-card img{ width:120px; height:120px; object-fit:cover; border-radius:18px; margin: 0 auto 16px; box-shadow: 0 10px 24px rgba(122,14,69,0.25); }
.modal-card h3{ font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-bottom: 20px; }
.modal-platforms{ display:grid; gap: 12px; }
.platform-btn{
  display:flex; align-items:center; gap:12px; padding: 13px 18px;
  border-radius: 999px; font-weight:700; font-family: var(--font-body);
  border: 2px solid var(--cream-deep); color: var(--ink);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.platform-btn:hover{ transform: translateY(-2px); border-color: var(--pink); background: var(--cream); }
.platform-btn .icon{ width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; background: var(--cream-deep); flex-shrink:0; }
.platform-btn .icon svg{ width:16px; height:16px; color: var(--pink-deep); }

.listen-more-row{ text-align:center; margin-top: 48px; }
.platform-row-inline{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

/* ============================================================
   Learning Resources page — resource grid
   ============================================================ */
.resource-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 980px; margin: 0 auto;
}
.resource-card{
  background: var(--white); border: 2px solid var(--cream-deep); border-radius: 20px;
  overflow:hidden; box-shadow: 0 14px 34px rgba(122,14,69,0.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.resource-card:hover{ transform: translateY(-4px); border-color: var(--jungle); box-shadow: 0 18px 40px rgba(46,107,79,0.18); }
.resource-card .thumb{ aspect-ratio: 1/1; overflow:hidden; background: var(--cream-deep); }
.resource-card .thumb img{ width:100%; height:100%; object-fit:contain; object-position: center; }
.resource-card .res-info{ padding: 18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.resource-card .age-tag{
  display:inline-block; align-self:flex-start;
  background: var(--jungle); color: var(--white); font-size: 0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.04em; padding: 4px 12px; border-radius:999px; margin-bottom:10px;
}
.resource-card h3{ font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); font-weight:700; margin-bottom:6px; }
.resource-card p{ font-size: 0.9rem; color: #6b5063; line-height:1.5; margin-bottom:16px; flex:1; }
.resource-card .btn{ align-self:flex-start; padding: 10px 20px; font-size: 0.9rem; }

@media (max-width: 800px){
  .resource-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .resource-grid{ grid-template-columns: 1fr; }
}

.resources-note{
  max-width: 680px; margin: 50px auto 0; text-align:center;
  background: var(--white); border: 2px dashed var(--cream-deep); border-radius: 18px;
  padding: 22px 26px; font-size: 0.92rem; color: #6b5063; line-height:1.6;
}

/* ============================================================
   Shop page — product grid
   ============================================================ */
.product-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 1080px; margin: 0 auto;
}
.product-card{
  background: var(--white); border: 2px solid var(--cream-deep); border-radius: 20px;
  overflow:hidden; box-shadow: 0 14px 34px rgba(122,14,69,0.1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-4px); border-color: var(--pink); box-shadow: 0 18px 40px rgba(255,46,136,0.18); }
.product-card .thumb{ aspect-ratio: 1/1; overflow:hidden; background: var(--cream-deep); position:relative; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; object-position: top; }
.product-card .status-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  background: linear-gradient(120deg, var(--gold), var(--gold-deep)); color: var(--berry-deep);
  font-family: var(--font-display); font-weight:800; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
  padding: 6px 14px; border-radius:999px; box-shadow: 0 6px 14px rgba(240,165,0,0.35);
}
.product-card .gallery-dots{
  position:absolute; bottom:10px; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:7px;
}
.product-card .gallery-dot{
  width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.6); border:2px solid rgba(122,14,69,0.25);
  padding:0; cursor:pointer; transition: background .15s ease, transform .15s ease;
}
.product-card .gallery-dot.active{ background: var(--pink); border-color: var(--white); transform: scale(1.15); }
.product-card .prod-info{ padding: 18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.product-card h3{ font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); font-weight:700; margin-bottom:6px; }
.product-card p{ font-size: 0.9rem; color: #6b5063; line-height:1.5; margin-bottom:16px; flex:1; }
.product-card .btn{ align-self:flex-start; padding: 10px 20px; font-size: 0.9rem; }

@media (max-width: 800px){
  .product-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .product-grid{ grid-template-columns: 1fr; }
}

.waitlist-section{
  max-width: 640px; margin: 60px auto 0;
  background: var(--white); border-radius: 24px; padding: 36px;
  box-shadow: 0 20px 50px rgba(122,14,69,0.15); border: 2px solid var(--cream-deep);
  text-align:center;
}
.waitlist-section h2{ color: var(--pink-deep); font-size: clamp(1.5rem,3vw,1.9rem); margin-bottom:10px; }
.waitlist-section p{ color:#5c2246; line-height:1.6; margin-bottom: 22px; }
.waitlist-form{ display:grid; gap:16px; text-align:left; }
.waitlist-form .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.waitlist-form select{
  width:100%; font-family: var(--font-body); font-size: 1rem;
  border: 2px solid var(--cream-deep); border-radius: 12px;
  padding: 12px 14px; background: var(--cream); color: var(--ink);
}
.waitlist-form select:focus{ border-color: var(--pink); outline:none; background: var(--white); }
@media (max-width: 560px){
  .waitlist-form .form-row{ grid-template-columns: 1fr; }
}

/* ============================================================
   Ask Cassie page
   ============================================================ */
.page-hero--blue{ background: linear-gradient(165deg, var(--blue-deep), var(--blue) 80%); }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top: 22px; }
.btn-outline{
  background: var(--white); color: var(--purple-deep);
  border: 2px solid var(--purple); box-shadow: 0 8px 20px rgba(106,47,184,0.18);
}
.btn-outline:hover{ background: var(--cream); }

/* ---------- Search ---------- */
.ask-intro{ max-width: 640px; margin: 0 auto 40px; text-align:center; }
.ask-intro p{ color:#5c2246; line-height:1.6; }
.ask-search{ max-width: 480px; margin: 22px auto 0; position:relative; }
.ask-search input{
  width:100%; font-family: var(--font-body); font-size: 1rem;
  border: 2px solid var(--cream-deep); border-radius: 999px;
  padding: 14px 20px 14px 46px; background: var(--white);
  color: var(--ink); box-shadow: 0 8px 20px rgba(122,14,69,0.08);
}
.ask-search input:focus{ border-color: var(--blue); outline:none; }
.ask-search svg{
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color: var(--pink-deep); opacity:0.6; pointer-events:none;
}
.ask-search-empty{ display:none; text-align:center; color:#6b5063; margin-top:18px; font-size:0.95rem; }
.ask-jump-btn{ margin-top: 18px; }

.category-guide{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:10px;
  max-width: 880px; margin: 0 auto 56px;
}
.category-guide a{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background: var(--white); border: 2px solid var(--cream-deep); border-radius: 999px;
  padding: 11px 20px; font-family: var(--font-display); font-weight:700; font-size: 0.88rem; color: var(--berry);
  box-shadow: 0 6px 16px rgba(122,14,69,0.06);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.category-guide a:hover{ transform: translateY(-2px); border-color: var(--blue); background: var(--cream); box-shadow: 0 10px 22px rgba(59,125,221,0.18); }
@media (max-width: 700px){
  .category-guide{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- FAQ categories & accordion ---------- */
.faq-categories{ max-width: 820px; margin: 0 auto; }
.faq-category{ margin-bottom: 40px; scroll-margin-top: 90px; }
.faq-category-title{
  font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--berry); margin-bottom: 16px;
  display:flex; align-items:center; gap:8px;
}
.faq-list{ display:grid; gap: 14px; }

.faq-item{
  background: var(--white); border: 2px solid var(--cream-deep); border-radius: 18px;
  overflow:hidden; box-shadow: 0 10px 24px rgba(122,14,69,0.07);
  transition: border-color .18s ease;
}
.faq-item[open]{ border-color: var(--blue); }
.faq-item summary{
  list-style:none; cursor:pointer; padding: 18px 54px 18px 22px; position:relative;
  font-family: var(--font-display); font-weight:700; font-size: 1.05rem; color: var(--ink);
  display:flex; align-items:center; min-height: 26px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-icon{
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background: var(--cream-deep); color: var(--pink-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: transform .22s ease, background .18s ease, color .18s ease;
}
.faq-item summary .faq-icon svg{ width:14px; height:14px; }
.faq-item[open] summary .faq-icon{ transform: translateY(-50%) rotate(45deg); background: var(--pink); color: var(--white); }
.faq-item summary:hover .faq-icon{ background: var(--pink-hot); color: var(--white); }

.faq-answer{ padding: 0 22px 24px; }
.faq-block{ margin-bottom: 16px; }
.faq-block:last-child{ margin-bottom: 0; }
.faq-block-label{
  font-family: var(--font-display); font-weight:800; font-size: 0.82rem;
  text-transform:uppercase; letter-spacing:0.05em; margin-bottom:6px; display:block;
}
.faq-block p{ color:#5c2246; line-height:1.6; font-size:0.98rem; }
.faq-block p + p{ margin-top:10px; }
.faq-block--short .faq-block-label{ color: var(--pink-deep); }
.faq-block--why .faq-block-label{ color: var(--purple-deep); }
.faq-word{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--sammy-cream); border: 2px dashed var(--sammy-cream-deep); border-radius:14px;
  padding: 12px 16px;
}
.faq-word-term{ font-family: var(--font-display); font-weight:800; color: var(--sammy-green-deep); font-size:0.98rem; }
.faq-word-def{ color:#3F4A2A; font-size:0.92rem; }
.faq-fact{
  background: linear-gradient(120deg, rgba(255,210,63,0.22), rgba(255,210,63,0.08));
  border: 2px solid var(--gold); border-radius:14px; padding: 14px 16px;
  display:flex; gap:10px; align-items:flex-start;
}
.faq-fact + .faq-fact{ margin-top: 16px; }
.faq-fact-icon{ font-size:1.3rem; line-height:1; flex-shrink:0; }
.faq-fact-label{ font-family: var(--font-display); font-weight:800; color: var(--gold-deep); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.05em; display:block; margin-bottom:4px; }
.faq-fact p{ color:#4F3A00; font-size:0.94rem; line-height:1.55; }

/* ---------- YouTube CTA banner ---------- */
.youtube-cta{
  max-width: 820px; margin: 0 auto 60px;
  background: linear-gradient(120deg, var(--berry-deep), var(--purple-deep));
  border-radius: 24px; padding: 36px; text-align:center; color: var(--white);
  box-shadow: 0 20px 45px rgba(74,14,74,0.25);
}
.youtube-cta h2{ font-size: clamp(1.3rem,2.6vw,1.7rem); margin-bottom:10px; }
.youtube-cta p{ color: rgba(255,255,255,0.88); line-height:1.6; margin-bottom:20px; max-width:520px; margin-left:auto; margin-right:auto; }

/* ---------- Ask form ---------- */
.ask-form-section{ max-width: 640px; margin: 0 auto; }
.ask-form-section .waitlist-section{ margin-top:0; }
.radio-group{ display:grid; gap:10px; }
.radio-option{
  display:flex; align-items:center; gap:10px;
  border: 2px solid var(--cream-deep); border-radius:12px; padding: 10px 14px;
  cursor:pointer; transition: border-color .15s ease, background .15s ease;
  font-size: 0.95rem; color: var(--ink);
}
.radio-option:hover{ border-color: var(--blue); }
.radio-option input{ width:auto; accent-color: var(--pink); flex-shrink:0; }
.radio-option.checked{ border-color: var(--pink); background: var(--cream); }
.video-permissions{
  display:none; background: var(--cream); border: 2px dashed var(--cream-deep); border-radius:14px;
  padding: 16px; margin-top:4px; display:none;
}
.video-permissions.show{ display:grid; gap:14px; }
.video-permissions-title{ font-weight:700; font-size:0.92rem; color: var(--berry); }
.yn-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.yn-row span{ font-size:0.92rem; color: var(--ink); }
.yn-choices{ display:flex; gap:14px; }
.yn-choices label{ display:flex; align-items:center; gap:5px; font-weight:600; font-size:0.88rem; margin-bottom:0; }
.yn-choices input{ width:auto; accent-color: var(--pink); }
.consent-row{ display:flex; gap:10px; align-items:flex-start; }
.consent-row input{ width:auto; margin-top:4px; accent-color: var(--pink); flex-shrink:0; }
.consent-row label{ font-weight:500; font-size: 0.85rem; color:#5c2246; line-height:1.5; margin-bottom:0; }

/* ---------- Grown-ups note ---------- */
.grownups-note{
  max-width: 720px; margin: 50px auto 0; text-align:center;
  background: var(--white); border: 2px dashed var(--cream-deep); border-radius: 18px;
  padding: 24px 28px;
}
.grownups-note h3{ color: var(--blue-deep); font-size:1.05rem; margin-bottom:8px; }
.grownups-note p{ font-size: 0.9rem; color: #6b5063; line-height:1.6; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background: rgba(58,18,48,0.55);
  display:none; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal-card{
  background: var(--white); border-radius:24px; padding: 40px 36px; max-width: 440px; width:100%;
  text-align:center; box-shadow: 0 30px 70px rgba(0,0,0,0.35); position:relative;
  animation: modalPop .25s ease;
}
@keyframes modalPop{ from{ transform: scale(0.9); opacity:0; } to{ transform: scale(1); opacity:1; } }
.modal-card .modal-icon{ width:72px; height:72px; border-radius:50%; margin: 0 auto 14px; display:block; box-shadow: 0 8px 20px rgba(122,14,69,0.25); border: 3px solid var(--gold); }
.modal-card h2{ color: var(--pink-deep); font-size: clamp(1.3rem,2.6vw,1.6rem); margin-bottom:12px; }
.modal-card p{ color:#5c2246; line-height:1.6; margin-bottom:22px; }
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  background: var(--cream); border:none; color: var(--berry); font-size:1.1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background: var(--cream-deep); }

/* ---------- Learning Resources -> Ask Cassie callout ---------- */
.ask-callout{
  max-width: 820px; margin: 50px auto 0;
  background: linear-gradient(120deg, var(--blue-deep), var(--blue));
  border-radius: 22px; padding: 32px 34px; text-align:center; color: var(--white);
  box-shadow: 0 18px 40px rgba(59,125,221,0.28);
}
.ask-callout h3{ font-size: clamp(1.2rem,2.4vw,1.45rem); margin-bottom:8px; }
.ask-callout p{ color: rgba(255,255,255,0.9); line-height:1.6; margin-bottom:18px; max-width:480px; margin-left:auto; margin-right:auto; }

@media (max-width: 560px){
  .yn-row{ flex-direction:column; align-items:flex-start; }
}