:root{
  --navy:#182A4C;
  --navy2:#1C2E4A;
  --purple:#7B6BC8;
  --lav:#F7F5FB;
  --lav2:#F3F0FA;
  --blue:#7B6BC8;
  --gold:#E0A92E;
  --text:#182A4C;
  --muted:#5b6b8c;
  --line:#e6e0f0;
  --green:#2f8f4e;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:Nunito,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
.page{min-height:100vh}
.shell{width:min(1180px,calc(100% - 32px));margin:auto}
.nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:200;box-shadow:0 1px 8px rgba(0,0,0,0.06)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;flex-direction:column;cursor:pointer}
.logo-top{display:flex;align-items:center;gap:4px}
.logo-text{font-size:1.45rem;font-weight:900;color:var(--navy);letter-spacing:-0.02em}
.logo-sub{font-size:0.62rem;font-weight:700;color:var(--purple);letter-spacing:0.04em}
.nav-cta{font-family:'Nunito',sans-serif;cursor:pointer;white-space:nowrap;background:linear-gradient(135deg,#E5B85C,#C9963A);color:#1C2E4A;font-size:0.88rem;font-weight:700;padding:10px 22px;border-radius:50px;border:none;box-shadow:0 4px 14px rgba(28,46,74,0.25)}
.btn{border:0;border-radius:999px;padding:14px 24px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--navy);color:#fff}
.btn-purple{background:linear-gradient(90deg,#7050dc,#6137cd);color:white}
.btn-light{background:#fff;border:1px solid #d7ddec;color:var(--navy)}
.btn-wide{width:100%;font-size:18px;padding:17px}
.progress{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 42px}
.progress-item{position:relative;text-align:left;color:var(--navy);font-size:13px}
.progress-item:not(:last-child):after{content:"";position:absolute;height:2px;background:#dfe4f2;top:17px;left:36px;right:0}
.progress-item.active:not(:last-child):after{background:#8da0f2}
.progress-dot{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#f4f5f9;border:1px solid #dfe3ec;font-weight:800;position:relative;z-index:2}
.progress-item.active .progress-dot{background:var(--navy);color:#fff}
.progress-label{display:block;margin-top:7px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px}
.soft-card{background:#fbfbfe;border:1px solid var(--line);border-radius:18px}
.hero-row{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-bottom:8px}
.hero-row h1{font:800 50px/1.05 Poppins,Arial,sans-serif;margin:0 0 16px;letter-spacing:-1px}
.hero-row h1 i{font-style:normal;color:var(--gold)}
.hero-row p{font-size:18px;line-height:1.55;color:#2a3967}
.hero-art{text-align:right}
/* Pushed right and drifting, so the top of the form has some life in it without
   anything moving that the parent is trying to read. */
.hero-art img,.hero-art video{max-width:100%;height:auto;margin-left:auto;
  animation:cloudfloat 7s ease-in-out infinite;
  filter:drop-shadow(0 18px 22px rgba(24,42,76,.13))}
@keyframes cloudfloat{
  0%,100%{transform:translateY(0) rotate(-.5deg)}
  50%{transform:translateY(-18px) rotate(.5deg)}
}
@media(prefers-reduced-motion:reduce){.hero-art img{animation:none}}
@media(max-width:760px){.hero-art{text-align:center}.hero-art img{margin-inline:auto}}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.section-title{font:800 24px Poppins,Arial,sans-serif;margin:0 0 8px}
.section-sub{margin:0;color:var(--muted);line-height:1.5}
.label{display:block;font-weight:800;margin:0 0 8px}
.field{width:100%;border:1px solid #dfe4ee;border-radius:12px;background:#fff;padding:13px 14px;outline:none}
.field:focus{border-color:#6d7ce7;box-shadow:0 0 0 3px rgba(91,102,214,.12)}
textarea.field{min-height:105px;resize:vertical}
.form-card{padding:26px}
.row-3{display:grid;grid-template-columns:1.2fr .55fr .75fr;gap:14px}
.help{font-size:12px;color:var(--muted)}
.people-title{margin-top:28px}
.person-row{display:grid;grid-template-columns:42px 1fr 1fr 40px;gap:10px;align-items:center;margin:10px 0}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f1edff}
.remove{width:36px;height:36px;border-radius:50%;border:1px solid #dfe4ee;background:white;cursor:pointer}
.add{border:1px solid #9aacff;background:#fff;color:#2453d8;border-radius:999px;padding:10px 15px;font-weight:800;cursor:pointer}
.guide-card{padding:24px}
.guide-list{display:grid;gap:12px;margin-top:16px}
.guide-item{position:relative;padding:15px;background:#f8f6fd;border:2px solid #e4dff1;border-radius:14px;transition:border-color .18s,box-shadow .18s;
  --ac:#7B6BC8;--ac-pale:#f2effc}
.guide-item:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(224,169,46,.16)}
.guide-item.filled{border-color:var(--ac)}
.guide-head{display:flex;align-items:center;gap:10px}
.guide-num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;flex-shrink:0}
.guide-hero{width:44px;height:44px;border-radius:12px;background:var(--ac-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.guide-hero img{width:100%;height:100%;object-fit:contain}
.guide-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:var(--ac);color:#fff;display:none;align-items:center;justify-content:center;font-size:13px;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.18);animation:guideTickIn .28s ease}
.guide-item.filled .guide-tick{display:flex}
@keyframes guideTickIn{from{transform:scale(0)}to{transform:scale(1)}}
.suggest-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.suggest-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.s-chip{border:1px solid #d9ddeb;background:#fff;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:#4a567b;cursor:pointer;transition:border-color .15s,color .15s}
.s-chip:hover{border-color:var(--ac);color:var(--ac)}
.optional{margin-left:auto;color:#754fd0;font-weight:800;font-size:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid #d9ddeb;background:#fff;border-radius:999px;padding:7px 13px;font-weight:800;color:#4a567b;cursor:pointer}
.chip.selected{background:#7555d5;color:white;border-color:#7555d5}
.info-card{display:grid;grid-template-columns:170px 1fr;gap:20px;align-items:center;padding:24px;background:linear-gradient(135deg,#f7f4ff,#fff)}
.info-art{font-size:70px;text-align:center}
.info-points{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin-top:20px;font-size:12px;font-weight:700}
.notice{margin-top:10px;padding:12px 14px;border-radius:12px;background:#f4f0ff;color:#5c49b8;font-size:13px}
.role-opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.role-opt{border:2px solid #e6e0f0;background:#fff;border-radius:999px;padding:9px 16px;font-weight:800;font-size:13.5px;color:var(--navy);cursor:pointer;transition:border-color .15s,background .15s}
.role-opt:hover{border-color:#c8bce8}
.role-opt.on{border-color:var(--gold);background:#fdf6e8}
.wish-card{border:2px solid #f0e2b8;background:#fffdf6;border-radius:14px;padding:16px;margin-top:20px}
.wish-card .label{color:#8a6d1f}
.center{text-align:center}
.magic-wrap{width:min(520px,calc(100% - 32px));margin:40px auto}
.magic-card{padding:38px}
.magic-card h1{font:800 36px Poppins,Arial,sans-serif;margin:10px 0}
.checks{display:grid;gap:14px;margin:28px 0}
.check{display:flex;gap:10px;align-items:center;font-weight:700}
.tick{width:22px;height:22px;border-radius:50%;background:#34b45d;color:white;display:grid;place-items:center}
.jobs{display:grid;gap:13px}
.job-row{display:grid;grid-template-columns:34px 1fr 44px;gap:10px;align-items:center}
.track{height:7px;border-radius:999px;background:#eceaf4;overflow:hidden;margin-top:6px}
.bar{height:100%;background:linear-gradient(90deg,#6d45d7,#4268ed);border-radius:999px}
.story-list{display:grid;gap:14px}
.story-card{display:grid;grid-template-columns:95px 1fr auto;gap:18px;align-items:center;padding:14px}
.story-card img{width:95px;height:78px;object-fit:cover;border-radius:10px}
.story-card h3{margin:0 0 5px;font-size:18px}
.story-card p{margin:0;color:var(--muted);font-size:14px}
.lock-row{display:flex;gap:12px;justify-content:space-between;margin-top:16px}
.lock-chip{flex:1;padding:15px;text-align:center;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:800}
.reader{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:18px}
.reader img{width:100%;height:520px;object-fit:cover;border-radius:14px}
.reader-copy{padding:18px}
.reader-copy h1{font:800 30px/1.1 Poppins,Arial,sans-serif}
.reader-copy p{line-height:1.6}
.more-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px}
.mini-story{border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12px}
.mini-story img{width:100%;height:90px;object-fit:cover;border-radius:8px}
.unlock-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:30px}
.unlock-list{display:grid;gap:12px}
.unlock-list-item{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px}
.unlock-list-item img{width:70px;height:62px;object-fit:cover;border-radius:8px}
.checkout-card{padding:34px;text-align:center}
.checkout-card h1{font:800 34px Poppins,Arial,sans-serif}
.checklist{display:grid;gap:10px;text-align:left;margin:25px auto;max-width:300px}
.price-big{font:800 48px Georgia,serif;margin:18px 0}
.audio-card{padding:35px}
.audio-list{display:grid;gap:18px;margin-top:26px}
.audio-row{display:grid;grid-template-columns:46px 160px 1fr 48px;gap:12px;align-items:center}
.wave{height:24px;background:repeating-linear-gradient(90deg,#4168ed 0 2px,transparent 2px 6px);mask:linear-gradient(90deg,#000,transparent);opacity:.9}
.complete{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:45px}
.complete h1{font:800 48px/1.05 Poppins,Arial,sans-serif;margin:0}
.complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.complete img{max-width:100%}
.footer-note{margin:24px 0;text-align:center;color:#67718d;font-size:12px}
@media(max-width:900px){
  .hero-row,.grid-2,.reader,.unlock-layout,.complete{grid-template-columns:1fr}
  .row-3{grid-template-columns:1fr}.progress{margin-bottom:25px}
  .story-card{grid-template-columns:80px 1fr}.story-card .btn{grid-column:1/-1}
  .person-row{grid-template-columns:38px 1fr}.person-row select,.person-row .remove{grid-column:auto}
  .more-strip{grid-template-columns:1fr 1fr}
  .audio-row{grid-template-columns:42px 1fr 55px}.wave{grid-column:2/4}
}
@media(max-width:560px){
  .hero-row h1{font-size:39px}.shell{width:min(100% - 20px,1180px)}
  .grid-2{gap:14px}.form-card,.guide-card{padding:18px}
  .info-card{grid-template-columns:1fr}.info-points{grid-template-columns:1fr;gap:10px}
  .progress-label{font-size:11px}.reader img{height:380px}
  .complete{padding:25px}.complete h1{font-size:38px}
}

.thumb-ph{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,var(--lav2),var(--purple));flex-shrink:0;}
.story-ph{width:100%;height:220px;border-radius:16px;background:linear-gradient(135deg,var(--lav2),var(--purple));margin-bottom:16px;}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;}
.ic.big{width:2em;height:2em;color:var(--purple);}
.av-ic{width:16px;height:16px;color:var(--muted);}

/* --- illustrations ------------------------------------------------------
   The placeholders keep their gradient until real art loads into them, so a
   pack with a missing image still looks deliberate rather than broken. */
.thumb-ph,.story-ph{overflow:hidden}
.story-card .thumb-ph{width:95px;height:78px;border-radius:10px}
.mini-story .thumb-ph{width:100%;height:90px;border-radius:8px}
.reader .story-ph{height:520px;margin-bottom:0}
.sheet-card{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:16px;margin-bottom:16px}
.sheet-card .thumb-ph{width:120px;height:120px;border-radius:14px}
.sheet-card h3{margin:0 0 5px;font-size:18px}
.sheet-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:560px){
  .reader .story-ph{height:380px}
  .sheet-card{grid-template-columns:88px 1fr;gap:13px}
  .sheet-card .thumb-ph{width:88px;height:88px}
}

/* The submit button sits under both columns, not inside the left one. Stacked
   on a phone the old position put "Create My Stories" above the five questions
   it is meant to follow, which read as though the questions came after the job
   was done. */
.submit-row{max-width:560px;margin:22px auto 0}
.submit-row .footer-note{text-align:center}

/* ── name magic ──────────────────────────────────────────────
   Same treatment as the free-story page: sparkles drift up out of the card as
   the name is typed, the field glows, and the name shimmers wherever we echo
   it back. Typing a child's name is the moment the pack stops being a form,
   so it should feel like something. */
@keyframes twSparkleFloat{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  100%{transform:translateY(-60px) rotate(180deg);opacity:0}
}
@keyframes twShimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
@keyframes twNamePop{
  0%{transform:scale(1)} 50%{transform:scale(1.06)} 100%{transform:scale(1)}
}
.tw-sparkle{position:absolute;pointer-events:none;z-index:3;
  animation:twSparkleFloat 1.2s ease-out forwards}

#childName:focus{
  border-color:var(--purple,#7B6BC8);background:#fff;
  box-shadow:0 0 0 4px rgba(123,107,200,.14), 0 0 22px rgba(123,107,200,.18)}

/* the name, wherever we say it back to them */
.tw-name{
  background:linear-gradient(90deg,#7B6BC8,#E0A92E,#7B6BC8);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:twShimmer 2.4s linear infinite;font-weight:900}
.tw-pop{animation:twNamePop .35s cubic-bezier(.175,.885,.32,1.275)}

@media(prefers-reduced-motion:reduce){
  .tw-sparkle{display:none}
  .tw-name{animation:none}
  .tw-pop{animation:none}
}

/* The live name line under the field. Same idea as the free-story page: the
   moment you type a name, the page says it back to you. */
.tw-preview{margin-top:10px;font-style:italic;font-size:14px;color:var(--muted,#6b6880);
  min-height:20px;transition:opacity .25s ease}
.tw-preview:empty{opacity:0}

/* ── creating their character ────────────────────────────────
   The one moment in the flow where the parent watches their child appear.
   The ticks are honest: each one lands as we actually have that part of the
   description, and the final one only when the real drawing has loaded. */
.hero-make{padding:22px}
.hm-head h3{margin:0 0 4px;font-size:1.15rem;font-weight:900}
.hm-body{display:grid;grid-template-columns:210px 1fr;gap:22px;align-items:center;margin-top:16px}
.hm-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hm-list li{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:12px;
  background:#F7F5FB;border:1px solid #ece7f7;font-size:.88rem;font-weight:800;color:#8a83a3;
  transition:color .3s,background .3s,border-color .3s}
.hm-list li.on{color:var(--navy,#182A4C);background:#fff;border-color:#d8cff0}
.hm-tick{width:22px;height:22px;border-radius:50%;border:2px solid #ddd5ef;flex-shrink:0;
  display:grid;place-items:center;transition:all .3s}
.hm-list li.on .hm-tick{background:#3FA86A;border-color:#3FA86A}
.hm-list li.on .hm-tick::after{content:"\2713";color:#fff;font-size:12px;font-weight:900}
.hm-final{border-style:dashed!important}
.hm-canvas{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#cbbdea,#a892dd)}
.hm-art{position:absolute;inset:0;width:100%;height:100%;border-radius:16px}
.hm-wait{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;
  color:#fff;font:800 13px Nunito,Arial,sans-serif;transition:opacity .4s}
.hm-wait.gone{opacity:0;pointer-events:none}
.hm-spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;
  border-radius:50%;animation:hmSpin 1s linear infinite}
@keyframes hmSpin{to{transform:rotate(360deg)}}
@media(max-width:640px){
  .hm-body{grid-template-columns:1fr;gap:16px}
  /* width:100% and justify-self, never margin:0 auto. An auto margin cancels a
     grid item's stretch, and every child in here is absolutely positioned, so
     the box had no content to size against and collapsed to zero on phones. */
  .hm-canvas{aspect-ratio:1/1;max-width:280px;width:100%;justify-self:center}
}
@media(prefers-reduced-motion:reduce){.hm-spin{animation:none}}

.hm-wait.failed{background:rgba(24,42,76,.55);padding:20px;text-align:center;gap:6px}
.hm-wait.failed b{font-size:14px}
.hm-wait.failed span{font-size:12px;font-weight:600;opacity:.85;max-width:22ch;line-height:1.4}
.hm-wait.failed .hm-spin{display:none}
.hm-retry{margin-top:8px;background:#fff;color:#182A4C;border:none;border-radius:50px;
  padding:9px 18px;font-family:inherit;font-weight:800;font-size:12px;cursor:pointer;}
.hm-retry:hover{background:#F3D28A}

/* People rows on a phone. Before this the role dropdown and the remove button
   were squeezed onto a second line at 40px wide, so the dropdown showed its
   arrows and none of its text. Name and remove share the top line; the role
   and the "who are they" box each get a full line underneath. */
@media(max-width:760px){
  .person-row{grid-template-columns:38px 1fr 38px;align-items:center;row-gap:8px}
  .person-row input:not(.person-other){grid-column:2 / 3}
  .person-row .remove{grid-column:3 / 4;justify-self:end}
  .person-row select{grid-column:2 / 4;width:100%}
  .person-row .person-other{grid-column:2 / 4;margin-top:0}
}

/* Some iOS versions overlay a play button when they refuse autoplay. We start
   the video from script instead, so hide the native chrome. */
.hero-vid::-webkit-media-controls,
.hero-vid::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.hero-vid{pointer-events:none}