:root{
    color-scheme:light;
    --gutter:24px;

    --navy:#16256B;
    --pink:#ED2E82;
    --pink-deep:#C01A66;
    --yellow:#FFC72C;
    --yellow-soft:#FCEFC4;
    --peri:#8E9BEF;
    --peri-soft:#E3E7FE;

    --bg:#FAF9FD;
    --bg-blob-a:#EDEBFA;
    --bg-blob-b:#FCF3D8;
    --surface:#FFFFFF;
    --surface-alt:#F2F2FB;
    --ink:#16256B;
    --ink-muted:#5A628E;
    --ink-faint:#9098BC;
    --border:#E8E7F6;
    --border-strong:#D5D4EE;
    --shadow:0 18px 38px -22px rgba(22,37,107,0.38);
    --band-bg:#F1F1FC;

    --m1:#5B8DE0; --t1:#E7EFFF;
    --m2:#E58A57; --t2:#FFECDF;
    --m3:#4FAE7C; --t3:#E2F5EA;
    --m4:#9273DD; --t4:#F1EAFF;
    --m5:#EC6FA5; --t5:#FFE8F2;
  }

  *{box-sizing:border-box;}
  body{
    margin:0; padding-inline:var(--gutter);
    background:var(--bg); color:var(--ink);
    font-family:'Nunito', ui-rounded, system-ui, sans-serif; font-weight:600;
    -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
  }
  body::before, body::after{content:""; position:fixed; z-index:-1; pointer-events:none; border-radius:50% 50% 46% 54% / 52% 48% 52% 48%;}
  body::before{width:520px; height:480px; left:-190px; top:-120px; background:var(--bg-blob-a);}
  body::after{width:460px; height:420px; right:-170px; bottom:-140px; background:var(--bg-blob-b);}

  h1,h2,h3,h4{font-family:'Poppins', ui-rounded, system-ui, sans-serif; color:var(--navy); margin:0; text-wrap:balance; letter-spacing:-0.015em;}
  .hand{font-family:'Patrick Hand', cursive; font-weight:400;}
  .eyebrow{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.76rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-faint);}
  a{color:inherit;}
  button{font:inherit;}
  .wrap{max-width:1180px; margin-inline:auto;}
  img,svg{max-width:100%;}

 

  /* Breadcrumb */
  .crumbs{display:flex; align-items:center; gap:9px; padding-block:22px 4px; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.88rem; color:var(--ink-muted);}
  .crumbs a{text-decoration:none;}
  .crumbs a:hover{color:var(--pink);}
  .crumbs .now{color:var(--navy);}

  /* Hero */
  .hero{
    position:relative; overflow:hidden; margin-top:14px;
    border-radius:34px; padding:40px 44px; background:var(--surface);
    border:1px solid var(--border); box-shadow:var(--shadow);
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:34px; align-items:center;
  }
  .hero::before{content:""; position:absolute; width:320px; height:300px; left:-140px; bottom:-130px; background:var(--peri-soft); border-radius:52% 48% 44% 56% / 48% 52% 48% 52%;}
  .hero > *{position:relative; z-index:1;}
  .topic-eyebrow{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem; color:var(--pink);}
  .hero h1{font-size:clamp(2.2rem, 4.4vw, 3.3rem); font-weight:800; line-height:1.05; margin-top:4px;}
  .hero .tagline{display:block; font-size:1.5rem; color:var(--pink); margin-top:6px;}
  .yellow-bar{display:block; width:110px; height:9px; border-radius:999px; background:var(--yellow); margin:18px 0 16px;}
  .hero p{margin:0; max-width:46ch; color:var(--ink-muted); font-size:1.06rem; line-height:1.65; font-weight:700;}
  .meta-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
  .chip{display:inline-flex; align-items:center; gap:7px; background:var(--surface-alt); border-radius:999px; padding:8px 14px; font-size:0.85rem; font-weight:700; color:var(--ink-muted);}
  .chip svg{color:var(--peri);}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px;}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; border-radius:999px; padding:13px 22px; border:0; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
  .btn-pink{background:var(--pink); color:#fff; box-shadow:0 4px 0 var(--pink-deep);}
  .btn-pink:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--pink-deep);}
  .btn-ghost{background:var(--surface); color:var(--navy); border:2px solid var(--border-strong);}
  .btn-ghost:hover{border-color:var(--peri); color:var(--pink);}
  .cover-shot{
    display:block; width:100%; border-radius:20px;
    box-shadow:0 26px 50px -26px rgba(22,37,107,0.55);
    border:1px solid var(--border);
    transform:rotate(-1.5deg);
  }
  @media (max-width:900px){ .hero{grid-template-columns:1fr; padding:30px 24px; border-radius:26px;} }

  /* Sections */
  section.block{padding-block:56px 0;}
  .section-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin-bottom:24px;}
  .section-head h2{font-size:1.8rem; font-weight:700;}
  .section-head .hand{color:var(--pink); font-size:1.35rem;}

  /* Missions */
  .mission-grid{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px;}
  .mission{
    background:var(--tint); border:1px solid color-mix(in srgb, var(--tone) 24%, #fff);
    border-radius:22px; padding:18px 16px 20px; display:flex; flex-direction:column; gap:7px;
  }
  .mission .top{display:flex; align-items:center; gap:10px;}
  .mission .num{
    width:32px; height:32px; border-radius:50%; background:#fff; color:var(--tone);
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:0.95rem; flex-shrink:0;
  }
  .mission .icon{color:var(--tone); margin-left:auto; opacity:.85;}
  .mission h3{font-size:1.02rem; font-weight:700;}
  .mission .says{font-family:'Patrick Hand',cursive; font-size:1.12rem; color:var(--tone); line-height:1.25;}
  .mission p{margin:2px 0 0; font-size:0.9rem; line-height:1.5; color:var(--ink-muted); font-weight:600;}

  @media (max-width:900px){
    .mission-grid{grid-template-columns:1fr; gap:10px;}
    .mission{
      display:grid; grid-template-columns:auto 1fr;
      grid-template-areas:"num title" "num says";
      align-items:center; column-gap:14px; row-gap:2px; padding:14px 16px;
    }
    .mission .top{grid-area:num;}
    .mission h3{grid-area:title;}
    .mission .says{grid-area:says;}
    .mission .icon{display:none;}
  }
  .mission-note{
    margin-top:18px; display:flex; gap:12px; align-items:flex-start;
    background:var(--yellow-soft); border-radius:18px; padding:16px 18px;
    font-size:0.95rem; font-weight:700; color:var(--navy);
  }
  .mission-note svg{flex-shrink:0; color:#B98705; margin-top:1px;}

  /* Learn */
  .learn-grid{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px;}
  @media (max-width:1000px){ .learn-grid{grid-template-columns:repeat(2, minmax(0, 1fr));} }
  @media (max-width:560px){ .learn-grid{grid-template-columns:1fr;} }
  .learn{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:18px 18px 20px;}
  .learn .tick{flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--yellow-soft); display:flex; align-items:center; justify-content:center; color:#B98705;}
  .learn h4{font-size:1rem; font-weight:700; margin-bottom:5px;}
  .learn p{margin:0; font-size:0.91rem; line-height:1.5; color:var(--ink-muted); font-weight:600;}

  /* Audience choice */
  .choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
  .choice{
    position:relative; text-align:left; cursor:pointer;
    background:var(--surface); border:2px solid var(--border); border-radius:26px;
    padding:24px 26px; display:flex; gap:18px; align-items:flex-start;
    box-shadow:var(--shadow); transition:border-color .18s ease, transform .18s ease;
  }
  .choice:hover{transform:translateY(-4px); border-color:var(--peri);}
  .choice .art{flex-shrink:0; width:60px; height:60px; border-radius:19px; display:flex; align-items:center; justify-content:center;}
  .choice.family .art{background:#FFE4F1; color:var(--pink);}
  .choice.teacher .art{background:var(--peri-soft); color:#3552C4;}
  .choice h3{font-family:'Poppins',sans-serif; font-size:1.28rem; font-weight:700;}
  .choice p{margin:6px 0 0; color:var(--ink-muted); font-size:0.94rem; line-height:1.55; font-weight:600;}
  .choice[aria-pressed="true"]{border-color:var(--navy);}
  .choice[aria-pressed="true"]::after{
    content:"Selected"; position:absolute; top:14px; right:16px;
    font-family:'Poppins',sans-serif; font-size:0.68rem; letter-spacing:0.14em; text-transform:uppercase;
    color:#fff; background:var(--navy); border-radius:999px; padding:5px 11px;
  }
  .same-kit{margin-top:14px; font-size:0.95rem; font-weight:700; color:var(--ink-muted);}
  @media (max-width:760px){ .choice-grid{grid-template-columns:1fr;} }

  /* Resources */
  .res-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:20px;}
  .res-head h2{font-size:1.7rem; font-weight:700;}
  .res-note{font-size:0.95rem; color:var(--ink-muted); font-weight:700;}
  .res-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(284px,1fr)); gap:20px;}
  .res{
    background:var(--surface); border:1px solid var(--border); border-radius:24px;
    overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
    box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease;
  }
  .res:hover{transform:translateY(-5px); border-color:var(--peri);}
  .res-body{padding:22px 22px 24px; display:flex; flex-direction:column; gap:7px; flex:1;}
  .res .ricon{width:54px; height:54px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--tone) 13%, #fff); color:var(--tone); margin-bottom:6px;}
  .res h3{font-family:'Poppins',sans-serif; font-size:1.1rem; font-weight:700;}
  .res .count{font-family:'Poppins',sans-serif; font-size:0.8rem; font-weight:600; color:var(--ink-muted);}
  .res p{margin:0; font-size:0.91rem; line-height:1.55; color:var(--ink-muted); font-weight:600;}
  .res .open{margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:7px; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem; color:var(--navy);}
  .res:hover .open{color:var(--pink);}
  .res.soon{border-style:dashed; border-width:2px; box-shadow:none;}
  .res.soon h3, .res.soon .open{color:var(--ink-muted);}
  .badge-soon{
    align-self:flex-start; background:var(--peri-soft); color:#3552C4;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; border-radius:999px; padding:5px 11px;
  }

  /* How to use */
  .howto{
    margin-top:16px; background:var(--surface); border:1px solid var(--border);
    border-radius:30px; overflow:hidden; box-shadow:var(--shadow);
    display:grid; grid-template-columns:1.05fr 0.95fr; align-items:stretch;
  }
  .howto-text{padding:34px 36px;}
  .howto h2{font-size:1.6rem; font-weight:700;}
  .steps{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .steps li{display:flex; gap:14px; align-items:flex-start;}
  .steps .num{flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem;}
  .steps h4{font-size:1rem; font-weight:700; margin-bottom:3px;}
  .steps p{margin:0; font-size:0.92rem; line-height:1.5; color:var(--ink-muted); font-weight:600;}
  .no-perfect{
    margin-top:24px; background:#FFE9F3; border-radius:18px; padding:16px 18px;
    font-size:0.96rem; font-weight:700; color:var(--pink-deep);
  }
  .howto-photo{position:relative; min-height:300px; background:#F3F1FB;}
  .howto-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;}
  @media (max-width:880px){
    .howto{grid-template-columns:1fr;}
    .howto-text{padding:28px 24px;}
    .howto-photo{min-height:260px; order:-1;}
  }

  /* Talk + guide */
  .talk-wrap{display:grid; grid-template-columns:1.25fr 0.75fr; gap:22px; align-items:start;}
  .talk{background:var(--surface); border:1px solid var(--border); border-radius:26px; padding:26px 28px; box-shadow:var(--shadow);}
  .talk h2{font-size:1.5rem; font-weight:700;}
  .talk > p{margin:6px 0 0; color:var(--ink-muted); font-weight:700; font-size:0.95rem;}
  .qlist{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column;}
  .qlist li{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--border);}
  .qlist li:first-child{border-top:0; padding-top:4px;}
  .qlist .where{
    flex-shrink:0; width:116px; font-family:'Poppins',sans-serif; font-weight:600;
    font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--tone); padding-top:3px;
  }
  .qlist p{margin:0; font-size:0.96rem; line-height:1.5; color:var(--ink); font-weight:700;}
  .guide-card{
    background:var(--surface); border:1px solid var(--border); border-radius:26px;
    padding:26px 24px; text-align:center; box-shadow:var(--shadow);
  }
  .guide-card img{width:132px; height:132px; object-fit:cover; object-position:top center; border-radius:50%; background:var(--yellow-soft); border:4px solid var(--yellow-soft);}
  .guide-card h3{font-size:1.2rem; font-weight:700; margin-top:14px;}
  .guide-card .says{font-family:'Patrick Hand',cursive; font-size:1.2rem; color:var(--peri); margin-top:6px; display:block;}
  .guide-card p{margin:12px 0 0; font-size:0.92rem; line-height:1.55; color:var(--ink-muted); font-weight:600;}
  @media (max-width:860px){ .talk-wrap{grid-template-columns:1fr;} }

  /* Related */
  .related-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:20px;}
  .mini{background:var(--surface); border:1px solid var(--border); border-radius:22px; overflow:hidden; text-decoration:none; box-shadow:var(--shadow); transition:transform .18s ease, border-color .18s ease; display:flex; flex-direction:column;}
  .mini:hover{transform:translateY(-5px); border-color:var(--peri);}
  .mini .scene{display:block; width:100%; height:118px;}
  .mini .mini-body{padding:16px 18px 20px;}
  .mini h3{font-family:'Poppins',sans-serif; font-size:1.05rem; font-weight:700;}
  .mini span{display:block; margin-top:4px; font-size:0.86rem; font-weight:700; color:var(--tone);}




  /* ---------- Section sub-nav ---------- */
  .subnav{
    position:sticky; top:86px; z-index:35; margin-top:18px;
    background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(8px);
    border-block:1px solid var(--border);
  }
  .subnav-row{display:flex; gap:6px; overflow-x:auto; padding-block:10px; scrollbar-width:none;}
  .subnav-row::-webkit-scrollbar{display:none;}
  .subnav a{
    white-space:nowrap; text-decoration:none; padding:8px 15px; border-radius:999px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.88rem; color:var(--ink-muted);
  }
  .subnav a:hover{background:var(--surface-alt); color:var(--navy);}
  .subnav a[aria-current="true"]{background:var(--peri-soft); color:var(--navy);}
  section.block{scroll-margin-top:160px;}

  /* ---------- Audience toggle ---------- */
  .res-head{align-items:center;}
  .aud-seg{display:flex; gap:6px; background:var(--surface-alt); padding:5px; border-radius:999px;}
  .aud-seg button{
    border:0; background:transparent; cursor:pointer; border-radius:999px; padding:10px 18px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem; color:var(--ink-muted);
  }
  .aud-seg button:hover{color:var(--navy);}
  .aud-seg button[aria-pressed="true"]{background:var(--navy); color:#fff;}

  /* ---------- Custom band ---------- */
  .custom-band{
    position:relative; overflow:hidden; border-radius:32px; padding:38px 40px;
    background:linear-gradient(120deg, #FFE9F3 0%, #F1ECFF 55%, #E6EEFF 100%);
    border:1px solid var(--border);
    display:grid; grid-template-columns:1.25fr 0.75fr; gap:28px; align-items:center;
  }
  .custom-band > *{position:relative; z-index:1;}
  .custom-band h2{font-size:1.75rem; font-weight:700; margin-top:6px;}
  .custom-band > div > p{margin:10px 0 0; max-width:48ch; color:var(--ink-muted); font-size:1rem; line-height:1.6; font-weight:700;}
  .who{list-style:none; display:flex; flex-wrap:wrap; gap:9px; margin:20px 0 0; padding:0;}
  .who li{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.75);
    border-radius:999px; padding:9px 15px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.86rem; color:var(--navy);
  }
  .who svg{color:var(--pink);}
  .custom-band .btn{margin-top:24px;}
  .custom-art{display:flex; justify-content:center;}
  @media (max-width:860px){
    .custom-band{grid-template-columns:1fr; padding:30px 24px;}
    .custom-art{display:none;}
  }
  @media (max-width:720px){
    .res-head{align-items:flex-start;}
    .aud-seg{width:100%;}
    .aud-seg button{flex:1;}
    .subnav{top:78px;}
  }

  /* ---------- Books in the modal ---------- */
  .book-item{display:flex; gap:18px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--border);}
  .book-item:first-of-type{border-top:0;}
  .book-item img{width:104px; border-radius:8px; box-shadow:0 14px 26px -16px rgba(22,37,107,.7); flex-shrink:0;}
  .book-item h4{font-size:1.1rem; font-weight:700;}
  .book-item .sub{margin:3px 0 0; font-size:0.92rem; color:var(--ink-muted); font-weight:700; font-style:italic;}
  .book-item .by{margin:9px 0 0; font-size:0.86rem; line-height:1.5; color:var(--ink-faint); font-weight:700;}
  .book-item .btn{margin-top:12px; padding:10px 18px; font-size:0.9rem; width:auto;}

  .field textarea{
    width:100%; border:2px solid var(--border-strong); border-radius:16px; padding:13px 16px;
    font:inherit; font-weight:700; color:var(--ink); background:var(--surface); min-height:96px; resize:vertical;
  }
  .field textarea:focus{outline:0; border-color:var(--peri);}
  .field input[type="text"]{
    width:100%; border:2px solid var(--border-strong); border-radius:16px;
    padding:13px 16px; font:inherit; font-weight:700; color:var(--ink); background:var(--surface);
  }
  .field input[type="text"]:focus{outline:0; border-color:var(--peri);}
  .seg.three button{font-size:0.84rem; padding:10px 6px;}

  /* ---------- Keep the adventure going ---------- */
  .play-wrap{display:grid; grid-template-columns:1.3fr 1fr; gap:22px; align-items:stretch;}
  .panel{
    background:var(--surface); border:1px solid var(--border); border-radius:26px;
    padding:26px 28px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column;
  }
  .panel .plabel{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.72rem;
    letter-spacing:0.16em; text-transform:uppercase; color:var(--tone);
  }
  .panel h3{font-size:1.35rem; font-weight:700; margin-top:6px;}
  .panel > p{margin:8px 0 0; color:var(--ink-muted); font-size:0.95rem; line-height:1.55; font-weight:700;}

  .spark{
    margin-top:18px; border-radius:22px; padding:20px 22px;
    background:var(--spark-tint, #F3F1FF); border:1px solid color-mix(in srgb, var(--spark-tone, #8E9BEF) 22%, #fff);
    min-height:150px; display:flex; flex-direction:column; gap:10px; justify-content:center;
  }
  .spark .where{
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.72rem;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--spark-tone, #8E9BEF);
  }
  .spark p{margin:0; font-size:1.05rem; line-height:1.55; font-weight:700; color:var(--ink);}
  .spark-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .spark-actions .btn{flex:1 1 170px; margin-top:0; padding:12px 18px; font-size:0.94rem;}

  .ladder{
    list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--border);
    display:flex; flex-wrap:wrap; gap:14px 22px;
  }
  .ladder li{display:flex; align-items:center; gap:9px; font-size:0.9rem; font-weight:700; color:var(--ink-muted);}
  .ladder .n{
    width:24px; height:24px; border-radius:50%; background:var(--surface-alt); color:var(--navy);
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.8rem; flex-shrink:0;
  }

  .roles{display:flex; flex-wrap:wrap; gap:9px; margin-top:18px;}
  .role-chip{
    display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:9px 14px;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.85rem;
    background:color-mix(in srgb, var(--c) 14%, #fff); color:color-mix(in srgb, var(--c) 78%, #16256B);
  }
  .need{
    display:flex; align-items:center; gap:9px; margin:20px 0 0;
    background:var(--surface-alt); border-radius:16px; padding:13px 16px;
    font-size:0.9rem; font-weight:700; color:var(--ink-muted);
  }
  .need svg{color:var(--peri); flex-shrink:0;}
  .panel .btn{margin-top:auto; align-self:flex-start; padding:12px 20px; font-size:0.94rem;}
  .rp-steps{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .rp-steps li{display:flex; gap:13px; align-items:flex-start;}
  .rp-steps .n{
    flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem;
  }
  .rp-steps h4{font-size:0.98rem; font-weight:700; margin-bottom:3px;}
  .rp-steps p{margin:0; font-size:0.9rem; line-height:1.5; color:var(--ink-muted); font-weight:600;}
  @media (max-width:900px){ .play-wrap{grid-template-columns:1fr;} }

  /* ---------- Unlock line ---------- */
  .unlock-line{
    margin:18px 2px 0; display:flex; align-items:center; gap:9px;
    font-size:0.93rem; font-weight:700; color:var(--ink-muted);
  }
  .unlock-line svg{color:var(--peri); flex-shrink:0;}

  /* ---------- Modal ---------- */
  .overlay{
    position:fixed; inset:0; z-index:80; display:none;
    background:rgba(22,37,107,0.42); backdrop-filter:blur(3px);
    padding:24px; overflow-y:auto;
  }
  .overlay.open{display:flex; align-items:flex-start; justify-content:center;}
  .modal{
    background:var(--surface); border-radius:28px; width:100%; max-width:520px;
    margin:auto; padding:30px 32px 28px; position:relative;
    box-shadow:0 40px 80px -30px rgba(22,37,107,0.6);
  }
  .modal .close{
    position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
    border:0; background:var(--surface-alt); color:var(--ink-muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .modal .close:hover{background:#FFE4F1; color:var(--pink);}
  .modal .m-icon{
    width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb, var(--tone, var(--pink)) 13%, #fff); color:var(--tone, var(--pink)); margin-bottom:16px;
  }
  .modal h2{font-size:1.45rem; font-weight:700; padding-right:40px;}
  .modal .m-sub{margin:8px 0 0; color:var(--ink-muted); font-size:0.98rem; line-height:1.55; font-weight:700;}
  .included{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
  .included li{display:flex; gap:9px; align-items:center; font-size:0.94rem; font-weight:700; color:var(--ink);}
  .included svg{color:#4FAE7C; flex-shrink:0;}

  .field{margin-top:18px;}
  .field label{display:block; font-family:'Poppins',sans-serif; font-weight:600; font-size:0.85rem; color:var(--ink); margin-bottom:7px;}
  .field input[type="email"]{
    width:100%; border:2px solid var(--border-strong); border-radius:16px;
    padding:13px 16px; font:inherit; font-weight:700; color:var(--ink); background:var(--surface);
  }
  .field input[type="email"]:focus{outline:0; border-color:var(--peri);}
  .field input[type="email"][aria-invalid="true"]{border-color:var(--pink);}
  .err{display:none; margin:7px 0 0; color:var(--pink-deep); font-size:0.86rem; font-weight:700;}
  .err.show{display:block;}

  .seg{display:flex; gap:8px;}
  .seg button{
    flex:1; border:2px solid var(--border-strong); background:var(--surface); color:var(--ink-muted);
    border-radius:14px; padding:11px 10px; cursor:pointer;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.9rem;
  }
  .seg button[aria-pressed="true"]{border-color:var(--navy); background:var(--navy); color:#fff;}

  .consent{display:flex; gap:11px; align-items:flex-start; margin-top:18px;}
  .consent input{width:20px; height:20px; margin:2px 0 0; accent-color:var(--pink); flex-shrink:0;}
  .consent label{font-size:0.9rem; line-height:1.5; color:var(--ink-muted); font-weight:700;}

  .modal .btn{width:100%; margin-top:20px; padding:14px 20px;}
  .fine{margin:14px 0 0; font-size:0.82rem; line-height:1.5; color:var(--ink-faint); font-weight:700; text-align:center;}

  .done-icon{
    width:64px; height:64px; border-radius:50%; background:#E2F5EA; color:#2E9455;
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
  }
  .modal.done{text-align:center;}
  .modal.done h2{padding-right:0;}
  .book-row{display:flex; gap:16px; justify-content:center; margin-top:20px;}
  .book-row img{width:130px; border-radius:8px; box-shadow:0 14px 26px -16px rgba(22,37,107,.7);}
  .store-row{display:flex; gap:10px; margin-top:20px;}
  .store-row .btn{margin-top:0;}
  .player{
    margin-top:20px; aspect-ratio:16/9; border-radius:18px; background:var(--surface-alt);
    display:flex; align-items:center; justify-content:center; color:var(--peri);
    border:2px dashed var(--border-strong);
  }
  .toast{
    position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
    background:var(--navy); color:#fff; border-radius:999px; padding:13px 24px; z-index:90;
    font-family:'Poppins',sans-serif; font-weight:600; font-size:0.92rem;
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  @media (max-width:560px){ .modal{padding:26px 22px 24px; border-radius:22px;} .store-row{flex-direction:column;} }

  @media (max-width:640px){
    :root{--gutter:16px;}
    .hero h1{font-size:2.1rem;}
    .qlist li{flex-direction:column; gap:4px;}
    .qlist .where{width:auto;}
    .footer-hand{text-align:left;}
    .footer-inner{align-items:flex-start;}
  }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important;} }
  
  .card img.scene {
  display: block;
  width: 100%;
  aspect-ratio: 320 / 186;
  object-fit: cover;
  object-position: center;
}

.hero-image {
  width: 100%;
  min-width: 0;
}

.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 400;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
}