:root {
.page-selector{margin-top:28px;padding:28px;border:1px solid var(--line);border-radius:14px;background:#f8faf9}.page-selector-value{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.page-selector-value strong{font:700 clamp(2rem,6vw,3.4rem) Georgia,serif;color:var(--forest);line-height:1}.page-selector-value>span{font-weight:700;color:var(--peach);font-size:1.2rem}.page-selector-controls{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:15px}.page-selector-controls button{width:44px;height:44px;border:1px solid #b9cac2;border-radius:9px;background:#fff;color:var(--forest);font-size:1.5rem;cursor:pointer}.page-selector-controls button:disabled{opacity:.35;cursor:not-allowed}.page-selector-controls input[type="range"]{padding:0;border:0;box-shadow:none;accent-color:var(--forest)}.page-selector-scale{display:flex;justify-content:space-between;margin:8px 60px 0;color:#75867f;font-size:.75rem}.price-note{margin:12px 0 0!important;font-size:.78rem}.status-order-summary{display:flex;justify-content:center;gap:10px;margin:24px 0}.status-order-summary span{padding:9px 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:#687a74;font-size:.76rem}.status-order-summary b{color:var(--forest)}@media(max-width:520px){.page-selector{padding:22px 16px}.page-selector-value{align-items:flex-start;flex-direction:column;gap:8px}.page-selector-controls{grid-template-columns:40px 1fr 40px;gap:8px}.page-selector-controls button{width:40px;height:40px}.page-selector-scale{margin-left:48px;margin-right:48px}.status-order-summary{flex-direction:column}}
  --ink: #213f3a;
  --forest: #1f5148;
  --sage: #88a57a;
  --cream: #fff9ef;
  --paper: #fffdf8;
  --peach: #e99070;
  --gold: #e8b758;
  --mist: #eaf2e5;
  --line: #d9e2d7;
  --shadow: 0 22px 60px rgba(44, 69, 59, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--cream);
  font-family: "DM Sans", sans-serif; font-size: 16px; line-height: 1.6;
}
a { color: inherit; }
h1, h2, h3 { font-family: "Fraunces", serif; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(3.25rem, 6.4vw, 6.6rem); letter-spacing: -.045em; }
h2 { font-size: clamp(2.2rem, 4vw, 4.25rem); letter-spacing: -.035em; }
p { color: #59706b; }
.site-header {
  max-width: 1280px; height: 94px; margin: auto; padding: 0 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.55rem "Fraunces"; }
.brand-mark {
  width: 35px; height: 35px; border-radius: 55% 45% 48% 52%;
  color: white; background: var(--peach); display: grid; place-items: center;
  transform: rotate(-5deg); font-size: 1.1rem;
}
nav { display: flex; align-items: center; gap: 32px; }
nav > a { font-weight: 600; text-decoration: none; font-size: .92rem; }
.button {
  border: 0; border-radius: 999px; background: var(--forest); color: white;
  display: inline-flex; justify-content: center; align-items: center; gap: 18px;
  padding: 16px 25px; text-decoration: none; font: 700 .95rem "DM Sans";
  cursor: pointer; box-shadow: 0 8px 20px rgba(31,81,72,.15);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(31,81,72,.22); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-small { padding: 11px 19px; color: white; }
.eyebrow {
  color: var(--peach); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; font-size: .72rem;
}
.hero {
  min-height: 710px; max-width: 1280px; padding: 50px 36px 95px; margin: auto;
  display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 70px;
}
.hero-copy h1 { margin: 20px 0 25px; }
.hero-copy h1 em { color: var(--peach); font-style: normal; display: block; }
.hero-copy > p { max-width: 570px; font-size: 1.14rem; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin: 34px 0; }
.text-link { font-weight: 700; text-decoration: none; }
.trust-row { display: flex; gap: 23px; padding: 0; list-style: none; color: #6c7d78; font-size: .78rem; }
.trust-row span { color: var(--sage); }
.hero-art { position: relative; min-height: 550px; display: grid; place-items: center; }
.hero-art::before {
  content: ""; width: 480px; height: 480px; position: absolute; border-radius: 50%;
  background: #e6eee0; border: 1px dashed #b7c7ae;
}
.book {
  width: 330px; height: 455px; padding: 10px; z-index: 2; border-radius: 8px 15px 15px 8px;
  background: #f2d9a7; transform: rotate(4deg); box-shadow: 18px 25px 35px rgba(54,72,60,.22);
}
.book-page {
  height: 100%; border: 2px solid rgba(31,81,72,.18); border-radius: 5px 12px 12px 5px;
  background: #fff4d9; display: flex; flex-direction: column; align-items: center;
  padding: 23px; text-align: center; overflow: hidden; position: relative;
}
.book-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.book h2 { font-size: 2.05rem; margin-top: 8px; color: var(--forest); }
.book-subline { margin-top: 9px; font-size: .65rem; }
.character { height: 210px; width: 190px; position: relative; margin-top: 16px; }
.head { width: 90px; height: 100px; border-radius: 48%; background: #9c633e; margin: auto; position: relative; border: 4px solid #49392e; }
.head::before { content: ""; position: absolute; inset: -12px -15px 35px; border-radius: 50%; background: #553a28; z-index: -1; }
.head span, .head i { position: absolute; width: 7px; height: 8px; top: 48px; border-radius: 50%; background: #272727; }
.head span { left: 24px; } .head i { right: 24px; }
.body { width: 100px; height: 105px; margin: -4px auto 0; border-radius: 35px 35px 10px 10px; background: var(--sage); border: 4px solid #49392e; }
.cape { position: absolute; width: 130px; height: 130px; background: var(--peach); top: 88px; left: 29px; z-index: -1; clip-path: polygon(34% 0, 70% 0, 100% 100%, 0 100%); }
.doodle, .sparkle { position: absolute; color: var(--gold); font-size: 2.5rem; }
.doodle-star { top: 45px; left: 20px; } .doodle-heart { right: 0; top: 110px; color: var(--peach); transform: rotate(15deg); }
.sparkle { right: 32px; bottom: 75px; color: var(--sage); }
.pencil { position: absolute; width: 12px; height: 130px; border-radius: 7px; background: var(--peach); z-index: 3; }
.pencil-one { left: 45px; bottom: 35px; transform: rotate(47deg); }
.pencil-two { left: 78px; bottom: 18px; transform: rotate(57deg); background: var(--gold); }
.how { background: var(--paper); padding: 100px 36px 115px; }
.section-heading { max-width: 700px; text-align: center; margin: auto; }
.section-heading h2 { margin-top: 14px; }
.steps { max-width: 1120px; margin: 65px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.steps article { text-align: center; position: relative; padding: 0 28px; }
.step-number { color: #e3e9e0; font: 700 3.5rem "Fraunces"; position: absolute; right: 30px; top: -18px; }
.step-icon { width: 86px; height: 86px; margin: auto auto 24px; border-radius: 42% 58% 52% 48%; background: var(--mist); color: var(--forest); display: grid; place-items: center; font-size: 2rem; transform: rotate(-4deg); }
.steps article:nth-child(2) .step-icon { background: #fae6dc; color: var(--peach); transform: rotate(5deg); }
.steps article:nth-child(3) .step-icon { background: #fff0cd; color: #bf8630; }
.steps h3 { font-size: 1.45rem; }
.steps p { font-size: .9rem; }
.preview { max-width: 1120px; margin: auto; padding: 125px 36px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.preview-art { min-height: 490px; position: relative; }
.page-stack { width: 330px; height: 445px; position: absolute; left: 50%; top: 50%; background: white; border: 1px solid #d8ded5; box-shadow: var(--shadow); }
.page-back { transform: translate(-47%,-51%) rotate(8deg); background: #f3dfb6; }
.page-front { transform: translate(-53%,-49%) rotate(-3deg); padding: 35px; text-align: center; overflow: hidden; }
.sun { font-size: 2rem; position: absolute; right: 32px; }
.mountains { margin-top: 70px; font-size: 2.6rem; color: #81987b; }
.line-character { margin: 15px auto; width: 100px; height: 135px; border: 3px solid var(--ink); border-radius: 46%; display: grid; place-items: center; font-size: 2rem; }
.page-front p { font: 600 1.05rem "Fraunces"; color: var(--ink); }
.preview-copy h2 { margin: 15px 0 24px; }
.feature-list { display: flex; list-style: none; padding: 0; margin: 32px 0; gap: 32px; }
.feature-list li { display: flex; flex-direction: column; }
.feature-list b { font: 700 1.8rem "Fraunces"; color: var(--peach); }
.feature-list span { font-size: .73rem; color: #6d7b77; max-width: 100px; }
.button-outline { color: var(--forest); background: transparent; border: 1px solid var(--forest); box-shadow: none; }
.privacy { max-width: 1120px; margin: 0 auto 115px; border-radius: 24px; background: #e9f1e5; padding: 45px 55px; display: grid; grid-template-columns: auto 1.2fr 1fr; align-items: center; gap: 30px; }
.privacy-icon { width: 72px; height: 72px; border-radius: 50%; background: white; display: grid; place-items: center; font-size: 2rem; }
.privacy h2 { font-size: 1.7rem; margin-top: 8px; }
.privacy p { font-size: .85rem; }
.final-cta { position: relative; overflow: hidden; background: var(--forest); color: white; text-align: center; padding: 95px 25px; }
.final-cta h2 { max-width: 650px; margin: auto; }
.final-cta p { color: #cbd9d2; }
.final-cta .doodle { left: 13%; top: 30%; }
.button-light { color: var(--forest); background: white; margin-top: 15px; }
footer { background: #173d37; color: #c6d4cf; padding: 38px max(35px, calc((100vw - 1200px)/2)); display: flex; justify-content: space-between; align-items: center; font-size: .8rem; }
footer p { color: #9bb1aa; } footer div { display: flex; gap: 25px; } .footer-brand { color: white; }

.wizard-shell, .status-shell { max-width: 770px; min-height: calc(100vh - 94px); margin: auto; padding: 40px 35px 100px; }
.wizard-top { display: flex; justify-content: space-between; font-size: .82rem; }
.back-link { text-decoration: none; font-weight: 700; }
.wizard-count { color: #71807b; }
.progress { height: 5px; margin: 20px 0 65px; background: #e3e9e1; border-radius: 5px; overflow: hidden; }
.progress span { display: block; width: 33%; height: 100%; background: var(--peach); transition: width .3s; }
.wizard-step { display: none; }
.wizard-step.is-active { display: block; animation: appear .35s ease; }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
.wizard-step h1, .status-shell h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); margin: 13px 0 12px; }
.wizard-step > p { margin-bottom: 36px; }
.field { display: grid; gap: 9px; margin: 25px 0; font-weight: 700; font-size: .86rem; }
.field span small { font-weight: 400; color: #75847f; }
input, textarea {
  width: 100%; border: 1px solid var(--line); background: white; color: var(--ink);
  border-radius: 13px; padding: 16px; font: inherit; outline: none;
}
input:focus, textarea:focus { border-color: var(--sage); box-shadow: 0 0 0 3px rgba(136,165,122,.16); }
textarea { min-height: 100px; resize: vertical; }
.upload-zone { height: 265px; border: 2px dashed #bdcbbb; border-radius: 20px; background: rgba(255,255,255,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; position: relative; }
.upload-zone input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload-zone strong { margin: 12px 0 3px; } .upload-zone small { color: #74827d; }
.upload-icon { width: 55px; height: 55px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; color: var(--forest); font-size: 1.5rem; }
.upload-zone img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upload-zone.has-preview::after { content: ""; position: absolute; inset: 65% 0 0; background: linear-gradient(transparent, rgba(20,35,30,.75)); }
.upload-zone.has-preview strong, .upload-zone.has-preview small { z-index: 2; color: white; transform: translateY(85px); }
.upload-zone.has-preview .upload-icon { display: none; }
.photo-tip, .privacy-note { margin-top: 22px; display: flex; gap: 15px; border-radius: 14px; background: #f2ead7; padding: 17px; font-size: .79rem; }
.photo-tip > span, .privacy-note > span { font-size: 1.4rem; color: var(--gold); }
.photo-tip p, .privacy-note p { margin: 3px 0 0; font-size: .78rem; }
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.theme-grid input { position: absolute; opacity: 0; }
.theme-grid label > span { min-height: 145px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: white; display: flex; flex-direction: column; cursor: pointer; transition: .2s; }
.theme-grid input:checked + span { border: 2px solid var(--forest); background: var(--mist); transform: translateY(-2px); }
.theme-grid i { font-style: normal; color: var(--peach); font-size: 1.5rem; }
.theme-grid b { margin-top: 8px; font-family: "Fraunces"; font-size: 1.2rem; }
.theme-grid small { color: #71807b; }
.summary-card { display: grid; grid-template-columns: 140px 1fr; gap: 25px; background: white; padding: 18px; border-radius: 18px; border: 1px solid var(--line); }
.summary-avatar { height: 150px; border-radius: 12px; overflow: hidden; background: var(--mist); }
.summary-avatar img { width: 100%; height: 100%; object-fit: cover; }
.summary-card dl, .summary-card dd { margin: 0; }
.summary-card dl { display: grid; gap: 10px; }
.summary-card dl div { border-bottom: 1px solid #edf0ec; padding-bottom: 7px; }
.summary-card dt { color: #7c8a85; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.summary-card dd { font-weight: 700; }
.consent { display: flex; align-items: flex-start; gap: 13px; margin: 25px 0; font-size: .82rem; cursor: pointer; }
.consent input { width: 19px; height: 19px; flex: 0 0 auto; accent-color: var(--forest); }
.wizard-actions { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 25px; margin-top: 35px; }
.button-ghost { color: var(--forest); background: transparent; box-shadow: none; }
.is-hidden { display: none !important; }
.form-error { color: #a54431; font-weight: 700; font-size: .85rem; margin-top: 18px; }
.status-shell { text-align: center; max-width: 650px; }
.status-illustration { width: 120px; height: 120px; margin: 20px auto 30px; border-radius: 50%; background: var(--mist); display: grid; place-items: center; position: relative; }
.status-book { width: 52px; height: 68px; background: var(--peach); color: white; display: grid; place-items: center; border-radius: 4px 8px 8px 4px; font: 700 1.5rem "Fraunces"; }
.orbit { position: absolute; right: 8px; top: 5px; color: var(--gold); font-size: 1.7rem; }
.status-list { text-align: left; list-style: none; padding: 0; margin: 45px auto 25px; max-width: 480px; }
.status-list li { display: flex; gap: 18px; opacity: .42; position: relative; padding-bottom: 27px; }
.status-list li::after { content: ""; position: absolute; left: 17px; top: 38px; bottom: 3px; width: 2px; background: var(--line); }
.status-list li:last-child::after { display: none; }
.status-list li > span { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 700; background: var(--cream); }
.status-list li div { display: flex; flex-direction: column; }
.status-list li small { color: #6d7d78; }
.status-list .is-done, .status-list .is-current { opacity: 1; }
.status-list .is-done > span { background: var(--sage); border-color: var(--sage); color: white; }
.status-list .is-current > span { border-color: var(--peach); color: var(--peach); box-shadow: 0 0 0 5px rgba(233,144,112,.13); }
.status-message { border-radius: 12px; background: white; border: 1px solid var(--line); padding: 14px; font-weight: 600; font-size: .85rem; }

@media (max-width: 800px) {
  nav > a:not(.button) { display: none; }
  .site-header { height: 78px; padding: 0 20px; }
  .hero { grid-template-columns: 1fr; padding: 55px 24px 75px; gap: 35px; }
  .hero-art { min-height: 465px; } .hero-art::before { width: 390px; height: 390px; }
  .book { width: 275px; height: 385px; }
  .character { transform: scale(.78); transform-origin: top center; height: 160px; }
  .steps { grid-template-columns: 1fr; gap: 55px; }
  .preview { grid-template-columns: 1fr; gap: 45px; padding: 85px 24px; }
  .preview-art { min-height: 440px; }
  .privacy { margin: 0 24px 80px; grid-template-columns: auto 1fr; padding: 30px; }
  .privacy > p { grid-column: 1 / -1; }
  footer { flex-direction: column; gap: 10px; }
}
@media (max-width: 520px) {
  h1 { font-size: 3.05rem; }
  .hero-actions { align-items: stretch; flex-direction: column; text-align: center; }
  .trust-row { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-art::before { width: 320px; height: 320px; }
  .book { width: 240px; height: 340px; }
  .feature-list { gap: 15px; }
  .privacy { grid-template-columns: 1fr; text-align: center; }
  .privacy-icon { margin: auto; }
  .wizard-shell { padding: 24px 20px 80px; }
  .progress { margin-bottom: 45px; }
  .theme-grid { grid-template-columns: 1fr; }
  .summary-card { grid-template-columns: 95px 1fr; gap: 15px; }
  .summary-avatar { height: 125px; }
}

/* Drawlino brand refresh — 2026 */
:root {
  --ink: #30235f;
  --forest: #6848eb;
  --sage: #b8ee7d;
  --cream: #fffaf3;
  --paper: #ffffff;
  --peach: #ff765e;
  --gold: #ffc84a;
  --mist: #f0ebff;
  --line: #e6def8;
  --purple: #7657ff;
  --purple-dark: #4d30c9;
  --lime: #dfff9f;
  --pink: #ff9fc7;
  --sky: #8edaf3;
  --shadow: 0 24px 70px rgba(67, 43, 137, .15);
}
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 13%, rgba(255,159,199,.2), transparent 23rem),
    radial-gradient(circle at 92% 20%, rgba(142,218,243,.2), transparent 22rem),
    var(--cream);
  font-family: Inter, ui-rounded, "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, sans-serif; }
p { color: #675e85; }
.site-header {
  height: 88px; max-width: 1240px; margin-top: 12px; padding: 0 24px;
  position: relative; z-index: 20;
}
.brand { gap: 9px; font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif; }
.brand-mark { width: 44px; height: 44px; border-radius: 0; background: none; transform: rotate(-3deg); filter: drop-shadow(0 7px 10px rgba(78,48,201,.18)); }
.brand-word { font-size: 1.65rem; letter-spacing: -.065em; color: var(--ink); }
.brand-spark { color: var(--peach); font-size: .8rem; transform: translate(-5px,-14px) rotate(10deg); }
nav { gap: 30px; }
nav > a:not(.button) { color: #574d77; position: relative; }
nav > a:not(.button)::after { content: ""; position: absolute; height: 3px; border-radius: 3px; left: 0; right: 100%; bottom: -7px; background: var(--peach); transition: right .2s; }
nav > a:not(.button):hover::after { right: 0; }
.button {
  background: linear-gradient(135deg, #805fff, #6543e8); border: 2px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 0 #4d30c9, 0 17px 28px rgba(80,51,190,.22);
  letter-spacing: -.01em; padding: 15px 25px;
}
.button:hover { transform: translateY(-3px) rotate(-.5deg); box-shadow: 0 12px 0 #4d30c9, 0 20px 32px rgba(80,51,190,.26); }
.button:active { transform: translateY(5px); box-shadow: 0 5px 0 #4d30c9; }
.button-small { padding: 10px 18px; box-shadow: 0 6px 0 #4d30c9, 0 12px 22px rgba(80,51,190,.18); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: var(--purple-dark);
  background: var(--lime); border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px;
  box-shadow: 3px 3px 0 var(--ink); letter-spacing: .11em; font-size: .68rem;
}
.hero { min-height: 720px; max-width: 1240px; padding: 60px 28px 105px; gap: 40px; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy h1 { max-width: 690px; margin: 27px 0 24px; font-size: clamp(3.7rem, 6.4vw, 6.25rem); line-height: .96; letter-spacing: -.07em; }
.hero-copy h1 em { color: var(--purple); display: inline; text-decoration: none; background: linear-gradient(transparent 76%, var(--lime) 0); }
.hero-copy > p { max-width: 590px; font-size: 1.13rem; line-height: 1.75; }
.hero-actions { margin: 36px 0 39px; }
.text-link { color: var(--purple-dark); border-bottom: 2px solid var(--purple); padding: 8px 0 5px; }
.trust-row { gap: 10px; flex-wrap: wrap; }
.trust-row li { background: white; border: 1px solid var(--line); border-radius: 999px; padding: 7px 11px; color: #625979; box-shadow: 0 7px 20px rgba(60,42,110,.06); }
.trust-row span { color: var(--purple); font-weight: 900; }
.hero-art { min-height: 570px; }
.hero-art::before { width: 500px; height: 500px; border: 0; background: var(--lime); border-radius: 43% 57% 51% 49% / 52% 44% 56% 48%; transform: rotate(-5deg); box-shadow: inset 0 0 0 2px rgba(48,35,95,.08); }
.hero-art::after { content: ""; position: absolute; width: 510px; height: 510px; border: 2px dashed var(--purple); border-radius: 46% 54% 44% 56%; transform: rotate(10deg); opacity: .35; }
.book { width: 335px; height: 465px; padding: 10px; background: var(--purple); border-radius: 10px 22px 22px 10px; transform: rotate(5deg); box-shadow: 21px 25px 0 rgba(48,35,95,.13), 21px 34px 50px rgba(48,35,95,.22); }
.book-page { border: 2px solid rgba(48,35,95,.15); background: #fff8df; border-radius: 7px 16px 16px 7px; }
.book-label { color: var(--purple); }
.book h2 { color: var(--ink); }
.character { filter: drop-shadow(0 8px 0 rgba(48,35,95,.1)); }
.cape { background: var(--peach); }
.hero-badge { position: absolute; z-index: 6; right: 1%; top: 4%; width: 116px; height: 116px; border-radius: 50%; background: var(--peach); color: white; display: grid; place-content: center; text-align: center; transform: rotate(9deg); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); line-height: 1; }
.hero-badge b { font-size: 2.25rem; font-family: "Arial Rounded MT Bold", sans-serif; }
.hero-badge span { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.doodle, .sparkle { font-family: sans-serif; font-weight: 900; }
.doodle-star { color: var(--purple); font-size: 4rem; animation: floaty 4s ease-in-out infinite; }
.doodle-heart { color: var(--peach); font-size: 4rem; }
.sparkle { color: var(--purple); animation: spin 9s linear infinite; }
.pencil { border: 2px solid var(--ink); }
.magic-strip { margin-top: -24px; overflow: hidden; background: var(--ink); color: white; transform: rotate(-1.2deg); position: relative; z-index: 10; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.magic-strip div { min-width: max-content; display: flex; justify-content: center; gap: 54px; padding: 16px 30px; font-weight: 800; letter-spacing: -.01em; }
.magic-strip span:nth-child(even) { color: var(--lime); }
.how { background: #fff; padding-top: 125px; }
.section-heading h2 { margin-top: 21px; }
.steps { gap: 24px; }
.steps article { min-height: 300px; padding: 34px 27px 26px; background: #f7f4ff; border: 2px solid var(--ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); transition: transform .2s, box-shadow .2s; }
.steps article:hover { transform: translate(-2px,-4px) rotate(-.5deg); box-shadow: 11px 13px 0 var(--ink); }
.steps article:nth-child(2) { background: #fff0ea; transform: rotate(1.3deg); }
.steps article:nth-child(3) { background: #efffcf; transform: rotate(-1deg); }
.step-number { color: rgba(48,35,95,.11); right: 23px; top: 7px; }
.step-icon { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: white; }
.steps article:nth-child(2) .step-icon, .steps article:nth-child(3) .step-icon { background: white; }
.preview { max-width: 1180px; }
.preview-art::before { content: "WOW!"; position: absolute; left: 3%; top: 4%; color: var(--peach); font: 900 2rem "Arial Rounded MT Bold", sans-serif; transform: rotate(-12deg); }
.page-stack { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 12px 12px 0 var(--ink); }
.page-back { background: var(--pink); }
.page-front { background: white; }
.preview-copy h2 { margin-top: 21px; }
.feature-list li { padding: 13px 14px; border-radius: 16px; background: white; border: 1px solid var(--line); }
.feature-list b { color: var(--purple); }
.button-outline { color: white; border-color: transparent; }
.privacy { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: #efffcf; border-radius: 28px; }
.privacy-icon { border: 2px solid var(--ink); color: var(--purple); }
.final-cta { background: var(--purple); border-top: 2px solid var(--ink); }
.final-cta::before, .final-cta::after { content: ""; position: absolute; border-radius: 50%; background: var(--lime); opacity: .16; }
.final-cta::before { width: 330px; height: 330px; left: -120px; top: -190px; }
.final-cta::after { width: 260px; height: 260px; right: -80px; bottom: -160px; }
.button-light { color: var(--purple-dark); background: var(--lime); border-color: var(--ink); box-shadow: 0 9px 0 var(--ink); }
footer { background: var(--ink); }
.footer-brand .brand-word { color: white; }

/* playful configurator */
.wizard-shell { max-width: 840px; position: relative; isolation: isolate; }
.wizard-glow { position: fixed; z-index: -1; border-radius: 50%; filter: blur(2px); opacity: .55; }
.wizard-glow-one { width: 340px; height: 340px; background: var(--pink); left: -170px; top: 20%; }
.wizard-glow-two { width: 280px; height: 280px; background: var(--lime); right: -150px; bottom: 3%; }
.wizard-top { align-items: center; }
.wizard-count { background: white; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px; box-shadow: 3px 3px 0 var(--ink); }
.wizard-count i { display: inline-block; width: 7px; height: 7px; background: var(--peach); border-radius: 50%; margin-right: 5px; }
.progress { height: 8px; background: #e8e1f5; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.progress span { background: linear-gradient(90deg, var(--purple), var(--peach)); }
.wizard-step { background: rgba(255,255,255,.8); backdrop-filter: blur(12px); border: 2px solid var(--ink); border-radius: 32px; padding: 38px; box-shadow: 10px 10px 0 var(--ink); }
.wizard-step h1 { margin-top: 23px; letter-spacing: -.055em; }
input, textarea { border: 2px solid #dcd3ee; border-radius: 16px; box-shadow: 0 5px 0 #eee8f7; }
input:focus, textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 4px rgba(118,87,255,.14), 0 5px 0 #dcd3ee; }
.upload-zone { border: 2px dashed var(--purple); background: #f7f4ff; border-radius: 24px; }
.upload-zone:hover { background: #f0ebff; transform: rotate(-.25deg); }
.upload-icon { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.photo-tip, .privacy-note { border: 1.5px solid var(--ink); background: #fff2ad; box-shadow: 4px 4px 0 var(--ink); }
.theme-grid label > span { border: 2px solid #ded6ee; border-radius: 22px; box-shadow: 0 5px 0 #eee8f7; }
.theme-grid label > span:hover { transform: translateY(-3px); border-color: var(--purple); }
.theme-grid input:checked + span { border: 2px solid var(--ink); background: var(--lime); box-shadow: 5px 5px 0 var(--ink); }
.theme-grid i { color: var(--purple); font-size: 2rem; }
.summary-card { border: 2px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); }
.wizard-actions { border: 0; }
.button-ghost { background: white; color: var(--purple-dark); border-color: var(--line); box-shadow: 0 6px 0 #d7ccec; }
.status-illustration { background: var(--lime); border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
.status-book { background: var(--purple); }
.status-message { border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
@keyframes floaty { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-12px) rotate(5deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (max-width: 800px) {
  .site-header { margin-top: 0; }
  .hero { padding-top: 42px; }
  .hero-copy h1 { font-size: clamp(3.2rem, 12vw, 5.2rem); }
  .hero-badge { right: 2%; width: 96px; height: 96px; }
  .steps article:nth-child(2), .steps article:nth-child(3) { transform: none; }
  .magic-strip div { justify-content: flex-start; overflow: hidden; }
  .wizard-step { padding: 29px; }
}
@media (max-width: 520px) {
  .brand-mark { width: 40px; height: 40px; }
  .brand-word { font-size: 1.45rem; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero-copy h1 { font-size: 3.25rem; }
  .hero-art::after { width: 325px; height: 325px; }
  .hero-badge { top: 1%; right: -2%; }
  .magic-strip div { gap: 28px; font-size: .82rem; }
  .wizard-step { padding: 24px 18px; border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
  .wizard-shell { padding-left: 14px; padding-right: 20px; }
}


/* Professional brand direction — 2026-09 */
:root{--ink:#183b35;--forest:#24564d;--sage:#9db7a8;--cream:#f8f5ef;--paper:#fff;--peach:#dc795f;--gold:#d9a94f;--mist:#eaf1ed;--line:#dce5df;--shadow:0 28px 70px rgba(24,59,53,.14)}
body{color:var(--ink);background:var(--cream);font-family:Inter,"Segoe UI",system-ui,sans-serif}h1,h2,h3{font-family:Georgia,"Times New Roman",serif}p{color:#60746e}.site-header{height:88px;max-width:1200px;margin:0 auto;padding:0 28px}.brand{gap:10px;font-family:Georgia,serif}.brand-mark{width:42px;height:42px;filter:none;transform:none}.brand-word{color:var(--ink);font-size:1.55rem;letter-spacing:-.04em}nav{gap:28px}nav>a:not(.button){color:#45615b;font-size:.9rem}nav>a:not(.button)::after{display:none}.button{background:var(--forest);border:1px solid var(--forest);border-radius:10px;box-shadow:0 8px 18px rgba(36,86,77,.16);padding:15px 23px}.button:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(36,86,77,.22)}.button:active{transform:none;box-shadow:0 6px 14px rgba(36,86,77,.18)}.button-small{padding:10px 17px;box-shadow:none}.eyebrow{padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--peach);font-size:.7rem;letter-spacing:.16em}
.hero{min-height:690px;max-width:1200px;padding:64px 28px 104px;grid-template-columns:1.02fr .98fr;gap:60px}.hero-copy h1{max-width:650px;margin:22px 0 24px;font-size:clamp(3.35rem,5.5vw,5.55rem);line-height:1.02;letter-spacing:-.052em}.hero-copy h1 em{display:block;color:var(--peach);background:none;font-style:italic;font-weight:500}.hero-copy>p{max-width:590px;font-size:1.08rem;line-height:1.75}.hero-actions{margin:32px 0 34px}.text-link{color:var(--forest);border:0;text-decoration:underline;text-decoration-color:#a9beb7;text-underline-offset:5px}.trust-row{gap:20px}.trust-row li{padding:0;border:0;background:none;box-shadow:none;color:#657872}.trust-row span{color:var(--forest)}
.hero-art{min-height:560px;display:block}.hero-art::before{content:"";position:absolute;width:470px;height:470px;right:15px;top:38px;border:0;border-radius:50%;background:#e6eee9;box-shadow:none;transform:none}.hero-art::after{display:none}.inside-page,.book-cover{position:absolute;overflow:hidden;background:#fff}.inside-page{width:310px;height:438px;right:4px;top:73px;padding:24px 22px 18px 42px;color:#274640;border:1px solid #cfd9d4;border-radius:4px 12px 12px 4px;box-shadow:0 18px 45px rgba(30,61,54,.16);transform:rotate(5deg)}.inside-page::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:#e4e9e6;box-shadow:6px 0 10px rgba(27,54,48,.06)}.inside-page svg{width:100%;height:350px;margin-top:4px}.page-kicker{font-size:.58rem;letter-spacing:.14em;color:#879791}.page-caption{display:block;text-align:center;font:italic .7rem Georgia,serif;color:#63766f}
.book-cover{z-index:3;width:305px;height:442px;left:5px;top:53px;padding:29px 31px;color:#fff;border-radius:7px 15px 15px 7px;background:var(--forest);box-shadow:17px 24px 45px rgba(24,59,53,.27);transform:rotate(-5deg);text-align:center}.book-cover::before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.28);border-radius:4px 11px 11px 4px}.cover-kicker{position:relative;z-index:1;font-size:.56rem;letter-spacing:.16em;opacity:.86}.cover-illustration{position:relative;width:177px;height:183px;margin:20px auto 13px;border-radius:50% 50% 45% 45%;background:#dbe7dc;overflow:hidden}.cover-illustration::before,.cover-illustration::after{content:"";position:absolute;left:-12px;right:-12px;bottom:-5px;height:69px;border-radius:50% 50% 0 0;background:#729985}.cover-illustration::after{left:65px;right:-25px;bottom:-14px;height:61px;background:#9fbaa7}.cover-moon{position:absolute;width:42px;height:42px;left:27px;top:25px;border-radius:50%;background:var(--gold);box-shadow:9px -6px 0 #dbe7dc}.cover-star{position:absolute;color:#fff;font-size:.8rem}.star-a{right:31px;top:31px}.star-b{right:53px;top:60px;font-size:.55rem}.cover-child{position:absolute;z-index:3;width:62px;height:90px;left:58px;bottom:15px;border-radius:24px 24px 8px 8px;background:var(--peach)}.cover-child::before{content:"";position:absolute;width:48px;height:50px;left:7px;top:-37px;border-radius:48%;background:#a56a47;border:5px solid #5b4031}.cover-child::after{content:"";position:absolute;width:52px;height:29px;left:5px;top:-43px;border-radius:50% 50% 35% 35%;background:#503729}.cover-child span::before,.cover-child span::after{content:"";position:absolute;width:6px;height:7px;top:-17px;border-radius:50%;background:#263832;z-index:2}.cover-child span::before{left:20px}.cover-child span::after{right:20px}.book-cover h2{position:relative;z-index:2;color:#fff;font-size:1.65rem;line-height:1.08;letter-spacing:-.025em}.cover-subline{position:relative;z-index:2;display:block;margin-top:10px;font:italic .7rem Georgia,serif;color:#d9e7e1}.quality-badge{position:absolute;z-index:5;right:8px;bottom:4px;display:flex;align-items:center;gap:9px;padding:12px 16px;background:#fff;border:1px solid #d5dfda;border-radius:9px;box-shadow:0 12px 30px rgba(24,59,53,.16);color:var(--forest)}.quality-badge strong{font:700 1.6rem Georgia,serif}.quality-badge span{font-size:.61rem;line-height:1.25;text-transform:uppercase;letter-spacing:.07em}
.trust-strip{border-top:1px solid #d8e1dc;border-bottom:1px solid #d8e1dc;background:#f0f4f1}.trust-strip div{max-width:1120px;margin:auto;padding:18px 28px;display:flex;justify-content:space-between;gap:24px;color:#536a63;font-size:.76rem;font-weight:700;letter-spacing:.03em}.trust-strip span::before{content:"✓";margin-right:9px;color:var(--peach)}.how{background:#fff;padding:108px 36px 118px}.section-heading h2{margin-top:15px}.steps{gap:22px;margin-top:58px}.steps article,.steps article:nth-child(2),.steps article:nth-child(3){min-height:275px;padding:32px 27px 26px;background:#fbfcfb;border:1px solid var(--line);border-radius:14px;box-shadow:none;transform:none;text-align:left}.steps article:hover{transform:translateY(-3px);box-shadow:0 15px 30px rgba(24,59,53,.08)}.step-number{top:22px;right:23px;color:#dce6e1;font-size:2.5rem}.step-icon,.steps article:nth-child(2) .step-icon,.steps article:nth-child(3) .step-icon{width:62px;height:62px;margin:0 0 24px;border:0;border-radius:12px;box-shadow:none;transform:none;background:var(--mist);color:var(--forest);font-size:1.45rem}.steps article:nth-child(2) .step-icon{background:#f7e7e2;color:var(--peach)}.steps article:nth-child(3) .step-icon{background:#f4ecd9;color:#a87828}
.preview{max-width:1140px;gap:92px;padding:120px 36px}.preview-art{min-height:515px}.preview-art::before{display:none}.coloring-page{position:absolute;width:300px;height:430px;padding:20px 23px 17px;background:#fff;border:1px solid #d6deda;border-radius:3px;box-shadow:var(--shadow);color:#243e39;text-align:center}.coloring-page>span{position:absolute;right:16px;top:13px;font-size:.55rem;color:#98a49f}.coloring-page img{display:block;width:100%;height:365px;object-fit:cover;object-position:center 40%}.coloring-page small{display:block;padding-top:5px;border-top:1px solid #e0e5e2;font:italic .68rem Georgia,serif;color:#667972}.coloring-page-back{left:4%;top:13%;transform:rotate(-7deg)}.coloring-page-front{right:2%;top:3%;transform:rotate(4deg)}.preview-copy h2{margin:15px 0 24px}.feature-list{gap:12px}.feature-list li{min-width:106px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:#fff}.feature-list b{color:var(--forest)}.button-outline{color:var(--forest);background:transparent;border-color:var(--forest);box-shadow:none}.privacy{border:1px solid #cad9d1;box-shadow:none;background:#eaf1ed;border-radius:15px}.privacy-icon{border:0;color:var(--forest)}.final-cta{background:#173d37;border:0}.final-cta::before,.final-cta::after{display:none}.button-light{color:#173d37;background:#fff;border-color:#fff;box-shadow:none}footer{background:#102f2a}.footer-brand .brand-word{color:#fff}
.wizard-shell{max-width:800px}.wizard-glow{display:none}.wizard-count{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 12px;box-shadow:none}.progress{height:5px;border:0;box-shadow:none;background:#dfe7e2}.progress span{background:var(--peach)}.wizard-step{padding:38px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 48px rgba(24,59,53,.08);backdrop-filter:none}.wizard-step h1{letter-spacing:-.04em}input,textarea{border:1px solid #cfdad4;border-radius:9px;box-shadow:none}input:focus,textarea:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(36,86,77,.12)}.upload-zone{border:1.5px dashed #91aaa0;background:#f7faf8;border-radius:12px}.upload-zone:hover{background:#f0f5f2;transform:none}.upload-icon{background:var(--mist);color:var(--forest);border:0;box-shadow:none}.photo-tip,.privacy-note{border:0;background:#f6f0e3;box-shadow:none}.theme-grid label>span{border:1px solid var(--line);border-radius:10px;box-shadow:none}.theme-grid label>span:hover{transform:translateY(-2px);border-color:#91aaa0}.theme-grid input:checked+span{border:1.5px solid var(--forest);background:var(--mist);box-shadow:none}.theme-grid i{color:var(--peach);font-size:1.65rem}.summary-card{border:1px solid var(--line);border-radius:12px;box-shadow:none}.button-ghost{background:transparent;color:var(--forest);border-color:transparent;box-shadow:none}.status-illustration{background:var(--mist);border:0;box-shadow:none}.status-book{background:var(--forest)}.status-message{border:1px solid var(--line);box-shadow:none}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:42px;padding-top:46px}.hero-copy h1{font-size:clamp(3.1rem,11vw,4.8rem)}.hero-art{min-height:535px;max-width:560px;width:100%;margin:auto}.trust-strip div{flex-wrap:wrap;justify-content:center}.steps article{text-align:center}.step-icon{margin-left:auto!important;margin-right:auto!important}.preview{grid-template-columns:1fr;gap:52px}.preview-art{max-width:560px;width:100%;margin:auto}.wizard-step{padding:30px}}
@media(max-width:520px){.site-header{height:76px;padding:0 18px}.brand-mark{width:38px;height:38px}.brand-word{font-size:1.4rem}.hero{padding:42px 20px 70px}.hero-copy h1{font-size:2.85rem}.hero-actions{align-items:stretch}.trust-row{grid-template-columns:1fr}.hero-art{min-height:440px;transform:scale(.84);transform-origin:top center;margin-bottom:-65px}.book-cover{left:0}.inside-page{right:-20px}.quality-badge{right:-15px}.trust-strip div{align-items:flex-start;flex-direction:column;padding-left:25px}.coloring-page{width:245px;height:365px}.coloring-page img{height:305px}.preview-art{min-height:420px}.coloring-page-back{left:0}.coloring-page-front{right:0}.feature-list{flex-wrap:wrap}.wizard-step{padding:25px 19px;border-radius:12px}}
.upload-quality{min-height:1.6rem;margin-top:9px;color:var(--forest);font-size:.82rem;font-weight:700;text-align:center}.upload-quality:not(:empty)::before{content:"✓";margin-right:7px}.upload-zone:focus-visible{outline:3px solid rgba(36,86,77,.22);outline-offset:4px}.status-download{margin-top:24px}

/* V1 creator controls */
select{width:100%;border:1px solid #cfdad4;background:#fff;color:var(--ink);border-radius:9px;padding:16px;font:inherit;outline:none}select:focus{border-color:var(--forest);box-shadow:0 0 0 3px rgba(36,86,77,.12)}.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.format-grid input{position:absolute;opacity:0}.format-grid label>span{min-height:150px;padding:25px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:.2s}.format-grid input:checked+span{border:2px solid var(--forest);background:var(--mist)}.format-grid b{font:700 2rem Georgia,serif;color:var(--forest)}.format-grid small{margin-top:6px;color:#60746e}.format-grid em{margin-top:15px;color:#7a8c86;font-size:.78rem;font-style:normal}.photo-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.photo-previews figure{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}.photo-previews img,.heic-placeholder{display:grid;width:100%;height:115px;place-items:center;object-fit:cover;background:var(--mist);color:var(--forest);font-weight:800}.photo-previews figcaption{padding:8px;font-size:.68rem;color:#60746e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-photo-count{min-height:150px;border-radius:10px;background:var(--mist);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--forest)}.summary-photo-count strong{font:700 2.3rem Georgia,serif}.summary-photo-count span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.upload-zone.has-files{background:#eef5f1;border-style:solid}.theme-grid{max-height:430px;overflow:auto;padding:3px}@media(max-width:520px){.format-grid{grid-template-columns:1fr}.photo-previews{grid-template-columns:repeat(2,1fr)}.summary-card{grid-template-columns:90px 1fr}.summary-photo-count{min-height:125px}.theme-grid{max-height:none}}