/* ---------------------------------------------------------------------------
   portraits.css — Little Wonders, the kids' portrait gift funnel
   (docs/KIDS_PORTRAIT_FUNNEL.md). Joyful by design (owner, 2026-10-08):
   rounded Fredoka headings + Nunito body, emojis, short words, one-word
   buttons, and motion everywhere it helps — cards that lift, squish and
   wiggle, floating stickers, a shine on the main button, confetti on the
   preview. Every animation stops under prefers-reduced-motion.

   Mobile-first for a 45+ audience from Facebook: 18px body, 56px+ tap targets.
   Neutrals come from theme.css tokens; the product's own hued palette lives in
   the --lw-* block below.
   ------------------------------------------------------------------------ */
:root {
  --lw-bg: #fff8ee;
  --lw-bg-soft: #fff0dc;
  --lw-ink: #2b2140;
  --lw-ink-soft: #5b5170;
  --lw-accent: #ff6b4a;
  --lw-accent-hover: #f0522f;
  --lw-accent-soft: #ffe1d8;
  --lw-sun: #ffc53d;
  --lw-mint: #c9f2df;
  --lw-sky: #d4ecff;
  --lw-lilac: #eadcff;
  --lw-peach: #ffe0c7;
  --lw-rose: #ffdbe8;
  --lw-lemon: #fff3b8;
  --lw-xmas: #2f9e5a;
  --lw-radius: 26px;
  --lw-font-fun: 'Fredoka', 'Nunito', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --lw-font-body: 'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lw-bounce: cubic-bezier(.34, 1.56, .64, 1);
}
.lw-body { margin: 0; background: var(--lw-bg); color: var(--lw-ink); font: 600 18px/1.55 var(--lw-font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.lw-body *, .lw-body *::before, .lw-body *::after { box-sizing: border-box; }
.lw-body img { max-width: 100%; height: auto; display: block; }
.lw-body [hidden] { display: none !important; }
.lw-body h1, .lw-body h2, .lw-body h3 { font-family: var(--lw-font-fun); font-weight: 700; line-height: 1.1; margin: 0 0 12px; letter-spacing: -0.01em; color: var(--lw-ink); }
.lw-body h1 { font-size: clamp(34px, 7.5vw, 58px); }
.lw-body h2 { font-size: clamp(28px, 5.5vw, 40px); }
.lw-body h3 { font-size: 22px; }
.lw-body a { color: var(--lw-accent); }
.lw-wrap { max-width: 1120px; margin: 0 auto; padding: 0 18px; position: relative; }
.lw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lw-center { text-align: center; }
.lw-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-page); border-radius: 999px; padding: 8px 16px; font: 600 16px/1.2 var(--lw-font-fun); color: var(--lw-ink); box-shadow: var(--shadow-sm); margin: 0 0 14px; }
.lw-eyebrow { color: var(--lw-accent); font: 600 15px/1.2 var(--lw-font-fun); margin: 0 0 10px; }
.lw-sub { color: var(--lw-ink-soft); font-size: 19px; margin: 0 0 20px; }
.lw-fineprint { color: var(--ink-muted); font-size: 14px; font-weight: 600; line-height: 1.5; margin: 10px 0 0; }
.lw-optional { color: var(--ink-muted); font-weight: 600; font-size: 15px; }
.lw-error { color: var(--status-danger); font-weight: 700; margin: 12px 0 0; }
.lw-success { color: var(--status-success); font-weight: 700; }
.lw-notice { background: var(--lw-lemon); border-radius: 16px; padding: 12px 16px; margin: 0 0 16px; font-weight: 700; }
.lw-hl { position: relative; white-space: nowrap; color: var(--lw-accent); }
.lw-hl::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: 4%; height: 26%; background: var(--lw-sun); border-radius: 999px; z-index: -1; transform-origin: left; animation: lwUnderline .9s .5s var(--lw-bounce) both; }

/* header / footer */
.lw-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; max-width: 1120px; margin: 0 auto; position: relative; z-index: 3; }
.lw-body .lw-logo { font: 700 22px/1 var(--lw-font-fun); color: var(--lw-ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lw-logo-star { display: inline-block; animation: lwSpin 6s linear infinite; }
.lw-body .lw-header-cta { font: 700 17px/1 var(--lw-font-fun); text-decoration: none; color: var(--on-media-ink); background: var(--lw-accent); padding: 12px 20px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 0 var(--lw-accent-hover); transition: transform .15s var(--lw-bounce); }
.lw-body .lw-header-cta:hover { transform: translateY(-2px) rotate(-2deg); }
.lw-footer { background: var(--lw-bg-soft); margin-top: 56px; padding: 36px 0 44px; font-size: 15px; color: var(--lw-ink-soft); border-radius: 32px 32px 0 0; }
.lw-footer-brand { font: 700 22px/1 var(--lw-font-fun); color: var(--lw-ink); margin: 0 0 14px; }
.lw-footer-links { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 14px 0; }
.lw-body .lw-footer-links a { color: var(--lw-ink-soft); font-weight: 700; }
.lw-footer-copy { margin: 0; color: var(--ink-muted); }
.lw-resend { background: var(--surface-page); border-radius: 20px; padding: 16px; margin: 0 0 18px; box-shadow: var(--shadow-sm); }
.lw-resend label { display: block; font-size: 16px; color: var(--lw-ink); margin-bottom: 10px; }
.lw-resend-row { display: flex; gap: 8px; }
.lw-resend-row input { flex: 1; min-width: 0; min-height: 52px; padding: 10px 14px; border: 3px solid var(--lw-peach); border-radius: 16px; font: inherit; background: var(--surface-page); color: var(--lw-ink); }
.lw-resend-row .lw-btn { min-height: 52px; padding: 10px 18px; }

/* buttons */
.lw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 14px 28px; border-radius: 999px; border: 3px solid transparent; font: 700 20px/1.1 var(--lw-font-fun); text-decoration: none; cursor: pointer; position: relative; overflow: hidden; transition: transform .18s var(--lw-bounce), box-shadow .18s ease, background .15s ease; -webkit-tap-highlight-color: transparent; }
.lw-btn:hover { transform: translateY(-2px) scale(1.02); }
.lw-btn:active { transform: translateY(3px) scale(.97); }
.lw-body .lw-btn-primary { background: var(--lw-accent); color: var(--on-media-ink); box-shadow: 0 6px 0 var(--lw-accent-hover), 0 14px 26px rgba(255, 107, 74, 0.28); }
.lw-body .lw-btn-primary:hover { background: var(--lw-accent-hover); }
.lw-body .lw-btn-primary:active { box-shadow: 0 2px 0 var(--lw-accent-hover); }
.lw-body .lw-btn-primary[disabled], .lw-body .lw-btn-primary[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
.lw-body .lw-btn-ghost { background: var(--surface-page); color: var(--lw-ink); border-color: var(--lw-peach); box-shadow: 0 4px 0 var(--lw-peach); }
.lw-body .lw-btn-ghost:hover { background: var(--lw-lemon); }
.lw-btn-block { width: 100%; }
.lw-btn-xl { min-height: 66px; font-size: 24px; padding: 16px 40px; }
.lw-btn-sm { min-height: 46px; font-size: 18px; padding: 10px 20px; }
.lw-btn-shine::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); animation: lwShine 3.2s 1.2s ease-in-out infinite; }

/* hero */
.lw-hero { padding: 10px 0 40px; position: relative; overflow: hidden; }
.lw-hero-grid { display: grid; gap: 30px; align-items: center; }
.lw-hero-copy { position: relative; z-index: 2; }
.lw-lede { font-size: 21px; color: var(--lw-ink-soft); margin: 0 0 24px; max-width: 30em; }
.lw-trust { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lw-trust li { background: var(--surface-page); border-radius: 999px; padding: 8px 14px; font: 600 15px/1.2 var(--lw-font-fun); box-shadow: var(--shadow-sm); }
.lw-hero-art { position: relative; aspect-ratio: 3 / 4; width: min(84%, 400px); margin: 0 auto 20px; }
.lw-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 30px; box-shadow: var(--shadow-lg); border: 6px solid var(--surface-page); }
.lw-hero-art .lw-hero-art-1 { transform: rotate(-3deg); animation: lwFloat 6s ease-in-out infinite; }
.lw-hero-art .lw-hero-art-2 { width: 52%; height: auto; aspect-ratio: 3 / 4; inset: auto -8% -10% auto; transform: rotate(7deg); animation: lwFloat 5s 1s ease-in-out infinite reverse; }
.lw-sticker { position: absolute; font-size: 34px; z-index: 1; pointer-events: none; animation: lwFloat 5s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(43, 33, 64, 0.15)); }
.lw-sticker.s1 { top: 6%; right: 6%; animation-delay: .2s; }
.lw-sticker.s2 { top: 44%; left: 2%; animation-delay: 1.1s; font-size: 30px; }
.lw-sticker.s3 { bottom: 12%; right: 46%; animation-delay: .6s; font-size: 28px; }
.lw-sticker.s4 { top: 2%; left: 44%; animation-delay: 1.6s; font-size: 24px; }
.lw-sticker.s5 { bottom: 4%; left: 8%; animation-delay: 2.2s; font-size: 30px; }

/* sections */
.lw-section { padding: 44px 0; }
.lw-section > .lw-wrap > h2, .lw-section > .lw-wrap > .lw-sub { text-align: center; }
.lw-section-soft { background: var(--lw-bg-soft); border-radius: 40px; margin: 0 8px; }
.lw-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; }
.lw-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-page); border-radius: var(--lw-radius); padding: 10px 10px 14px; box-shadow: 0 6px 0 rgba(43, 33, 64, 0.08), var(--shadow-md); transition: transform .28s var(--lw-bounce), box-shadow .28s ease; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.lw-card:nth-child(odd):hover { transform: translateY(-8px) rotate(-1.5deg); }
.lw-card:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); }
.lw-card:hover { box-shadow: 0 12px 0 rgba(43, 33, 64, 0.08), var(--shadow-lg); }
.lw-card:active, .lw-card.is-pressed { transform: scale(.94) !important; }
.lw-card.is-pop { animation: lwPop .55s var(--lw-bounce); }
.lw-card.tone-0, .lw-card.tone-5 { background: var(--lw-mint); }
.lw-card.tone-1, .lw-card.tone-6 { background: var(--lw-rose); }
.lw-card.tone-2, .lw-card.tone-7 { background: var(--lw-lilac); }
.lw-card.tone-3, .lw-card.tone-8 { background: var(--lw-lemon); }
.lw-card.tone-4, .lw-card.tone-9 { background: var(--lw-sky); }
.lw-card-art { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: var(--surface-page); }
.lw-card-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.lw-card:hover .lw-card-art img { transform: scale(1.06); }
.lw-card-art.no-art img { display: none; }
.lw-card-art.no-art::after { content: "✨"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; }
.lw-card-emoji { position: relative; z-index: 2; width: 56px; height: 56px; margin: -40px auto 2px; border-radius: 50%; background: var(--surface-page); display: grid; place-items: center; font-size: 30px; box-shadow: var(--shadow-md); }
.lw-card:hover .lw-card-emoji { animation: lwWiggle .6s ease-in-out; }
.lw-card-body { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 0 4px; }
.lw-card-title { font: 700 26px/1.05 var(--lw-font-fun); color: var(--lw-ink); }
.lw-card-tag { font-size: 15px; color: var(--lw-ink-soft); margin-bottom: 8px; }
.lw-card .lw-btn-sm { width: 100%; }
.lw-tag { position: absolute; top: 10px; left: 10px; background: var(--lw-xmas); color: var(--on-media-ink); font: 600 14px/1 var(--lw-font-fun); padding: 6px 10px; border-radius: 999px; }
.lw-steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.lw-steps li { background: var(--surface-page); border-radius: 24px; padding: 18px 10px; text-align: center; box-shadow: var(--shadow-sm); }
.lw-steps li span { display: block; font-size: 40px; margin-bottom: 4px; animation: lwFloat 4s ease-in-out infinite; }
.lw-steps li:nth-child(2) span { animation-delay: .4s; }
.lw-steps li:nth-child(3) span { animation-delay: .8s; }
.lw-steps li strong { font: 700 20px/1.1 var(--lw-font-fun); display: block; }
.lw-steps li p { margin: 4px 0 0; color: var(--lw-ink-soft); font-size: 15px; }
.lw-pricing { text-align: center; }
.lw-price-cards { display: grid; gap: 14px; margin: 18px 0 6px; }
.lw-price-card { background: var(--surface-page); border-radius: var(--lw-radius); padding: 22px 18px; box-shadow: var(--shadow-sm); border: 3px solid transparent; transition: transform .25s var(--lw-bounce); }
.lw-price-card:hover { transform: translateY(-4px) rotate(-1deg); }
.lw-price-card.is-main { border-color: var(--lw-accent); }
.lw-price-card p { margin: 0; color: var(--lw-ink-soft); font-size: 16px; }
.lw-price-emoji { font-size: 36px; display: block; }
.lw-body .lw-price { font: 700 42px/1 var(--lw-font-fun); color: var(--lw-ink); margin: 6px 0 6px; }
.lw-faq details { background: var(--surface-page); border-radius: 20px; padding: 16px 18px; margin: 0 0 10px; box-shadow: var(--shadow-sm); transition: transform .2s var(--lw-bounce); }
.lw-faq details:hover { transform: translateX(4px); }
.lw-faq summary { font: 600 19px/1.3 var(--lw-font-fun); cursor: pointer; list-style: none; padding-right: 30px; position: relative; }
.lw-faq summary::-webkit-details-marker { display: none; }
.lw-faq summary::after { content: "+"; position: absolute; right: 0; top: -2px; color: var(--lw-accent); font-size: 28px; line-height: 1; transition: transform .25s var(--lw-bounce); }
.lw-faq details[open] summary::after { transform: rotate(45deg); }
.lw-faq details p { margin: 10px 0 0; color: var(--lw-ink-soft); }

/* flow pages */
.lw-flow { padding-top: 6px; }
.lw-crumbs { font-size: 16px; margin: 0 0 12px; }
.lw-body .lw-crumbs a { color: var(--lw-ink-soft); text-decoration: none; font-weight: 700; }
.lw-flow-head { margin-bottom: 16px; }
.lw-bounce { display: inline-block; animation: lwHop 1.6s ease-in-out infinite; }
.lw-progress { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0; margin: 0 0 20px; font: 600 14px/1.1 var(--lw-font-fun); color: var(--ink-muted); }
.lw-progress li { padding: 10px 4px; border-radius: 16px; text-align: center; background: var(--surface-page); opacity: .6; transition: transform .3s var(--lw-bounce), opacity .3s, background .3s; }
.lw-progress li span { display: block; font-size: 22px; margin-bottom: 2px; }
.lw-progress li.is-done { opacity: 1; background: var(--lw-mint); color: var(--lw-ink); }
.lw-progress li.is-current { opacity: 1; background: var(--lw-lemon); color: var(--lw-ink); transform: scale(1.06); }
.lw-panel { background: var(--surface-page); border-radius: 30px; padding: 22px 18px; box-shadow: var(--shadow-md); animation: lwRise .45s var(--lw-bounce) both; }
.lw-panel[hidden] { display: none !important; }
.lw-split { display: grid; gap: 22px; }
.lw-sample { margin: 0; }
.lw-sample img { border-radius: 22px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transform: rotate(-1.5deg); box-shadow: var(--shadow-md); }
.lw-sample figcaption { font-size: 14px; color: var(--ink-muted); margin-top: 10px; text-align: center; }
.lw-form { display: grid; gap: 12px; }
.lw-form label { font: 600 17px/1.3 var(--lw-font-fun); }
.lw-form input[type="text"], .lw-form input[type="email"] { width: 100%; min-height: 60px; padding: 14px 16px; font: 700 18px/1.2 var(--lw-font-body); border: 3px solid var(--lw-peach); border-radius: 18px; background: var(--surface-page); color: var(--lw-ink); transition: border-color .15s, transform .15s var(--lw-bounce); }
.lw-form input:focus { outline: none; border-color: var(--lw-accent); transform: scale(1.01); }
.lw-check { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font: 600 16px/1.4 var(--lw-font-body) !important; }
.lw-check input { width: 28px; height: 28px; margin: 1px 0 0; accent-color: var(--lw-accent); }
.lw-tips { background: var(--lw-sky); border-radius: 20px; padding: 14px 16px; font-size: 16px; }
.lw-tips strong { font: 600 18px/1.2 var(--lw-font-fun); }
.lw-tip-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.lw-tip-list li { display: flex; gap: 6px; align-items: center; color: var(--lw-ink); }
.lw-drop { display: grid; place-items: center; gap: 6px; min-height: 210px; border: 4px dashed var(--lw-accent); border-radius: 26px; background: var(--lw-accent-soft); text-align: center; cursor: pointer; padding: 16px; position: relative; overflow: hidden; transition: transform .2s var(--lw-bounce), background .2s; }
.lw-drop:hover { transform: scale(1.02); background: var(--lw-peach); }
.lw-drop-icon { font-size: 48px; animation: lwHop 2s ease-in-out infinite; }
.lw-drop-text { font-size: 18px; color: var(--lw-ink-soft); }
.lw-drop-text strong { font-family: var(--lw-font-fun); font-size: 22px; color: var(--lw-ink); }
.lw-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--lw-ink); }
.lw-drop.has-photo { min-height: 320px; border-style: solid; animation: lwPop .5s var(--lw-bounce); }
.lw-drop.has-photo .lw-drop-icon, .lw-drop.has-photo .lw-drop-text { display: none; }
.lw-spinner { width: 58px; height: 58px; border-radius: 50%; border: 6px solid var(--lw-accent-soft); border-top-color: var(--lw-accent); margin: 10px auto 18px; animation: lwSpin .9s linear infinite; }
.lw-paint { display: flex; justify-content: center; gap: 14px; font-size: 44px; margin: 6px 0 14px; }
.lw-paint span { animation: lwHop 1.2s ease-in-out infinite; }
.lw-paint span:nth-child(2) { animation-delay: .2s; }
.lw-paint span:nth-child(3) { animation-delay: .4s; }
.lw-progress-bar { height: 18px; border-radius: 999px; background: var(--lw-accent-soft); overflow: hidden; margin: 10px auto 22px; max-width: 420px; }
.lw-progress-bar span { display: block; height: 100%; width: 3%; border-radius: 999px; background: repeating-linear-gradient(45deg, var(--lw-accent) 0 14px, var(--lw-sun) 14px 28px); background-size: 40px 40px; transition: width .8s ease; animation: lwStripes 1s linear infinite; }
.lw-preview-art img { width: 100%; border-radius: 22px; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: var(--shadow-lg); }
.lw-preview-art img.is-new { animation: lwReveal .8s var(--lw-bounce); }
.lw-versions { display: flex; gap: 10px; margin: 14px 0; overflow-x: auto; padding: 4px 2px 6px; }
.lw-versions button { flex: 0 0 72px; width: 72px; height: 96px; padding: 0; border: 4px solid transparent; border-radius: 14px; overflow: hidden; background: var(--lw-bg-soft); cursor: pointer; transition: transform .2s var(--lw-bounce); }
.lw-versions button:hover { transform: translateY(-3px) rotate(-3deg); }
.lw-versions button img { width: 100%; height: 100%; object-fit: cover; }
.lw-versions button.is-selected { border-color: var(--lw-accent); transform: scale(1.06); }
.lw-regen-left { font-size: 15px; opacity: .75; }
.lw-preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.lw-preview-actions .lw-btn-block { grid-column: 1 / -1; }
.lw-preview-actions .lw-btn { padding-left: 14px; padding-right: 14px; font-size: 18px; }
.lw-name-warn { background: var(--lw-lemon); }
.lw-versions button .lw-vbadge { position: absolute; left: 4px; bottom: 4px; font-size: 14px; line-height: 1; background: var(--surface-page); border-radius: 999px; padding: 2px 4px; }
.lw-versions button { position: relative; }
.lw-includes { list-style: none; padding: 0; margin: 0 0 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 16px; }
.lw-includes li { background: var(--lw-bg-soft); border-radius: 14px; padding: 10px 12px; font-weight: 700; }
.lw-bump { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 14px; border: 3px solid var(--lw-peach); border-radius: 20px; background: var(--lw-bg); font: 600 16px/1.4 var(--lw-font-body) !important; cursor: pointer; transition: transform .2s var(--lw-bounce), background .2s, border-color .2s; }
.lw-bump:hover { transform: translateY(-2px); }
.lw-bump:has(input:checked) { border-color: var(--lw-accent); background: var(--lw-accent-soft); animation: lwPop .4s var(--lw-bounce); }
.lw-bump input { width: 28px; height: 28px; margin: 1px 0 0; accent-color: var(--lw-accent); }
.lw-bump strong { font-family: var(--lw-font-fun); font-weight: 600; font-size: 18px; }
.lw-bump em { font-style: normal; font-weight: 800; color: var(--lw-accent); white-space: nowrap; }
.lw-unlock h2 { font-size: 30px; }
.lw-video { width: 100%; border-radius: 22px; aspect-ratio: 3 / 4; background: var(--lw-ink); margin-bottom: 10px; }
.lw-crosssell { margin-top: 22px; padding: 18px; border-radius: 22px; background: var(--lw-lilac); }
.lw-crosssell h2 { font-size: 26px; }
.lw-legal h2 { font-size: 26px; margin-top: 28px; }
.lw-legal ul { padding-left: 22px; color: var(--lw-ink-soft); }
.lw-legal p { color: var(--lw-ink-soft); }

/* modal */
.lw-modal { position: fixed; inset: 0; z-index: 2147483000; background: var(--scrim); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(4px); }
.lw-modal[hidden] { display: none; }
.lw-modal-card { position: relative; background: var(--surface-overlay); border-radius: 30px; padding: 26px 22px 22px; width: min(460px, 100%); box-shadow: var(--shadow-lg); text-align: center; animation: lwPop .5s var(--lw-bounce); }
.lw-modal-card .lw-form { text-align: left; }
.lw-modal-emoji { font-size: 50px; margin: 0; animation: lwHop 1.6s ease-in-out infinite; }
.lw-modal-close { position: absolute; top: 8px; right: 8px; width: 46px; height: 46px; border: 0; background: transparent; font-size: 32px; cursor: pointer; color: var(--lw-ink-soft); }

/* confetti (public/js/portraits.js → confetti()) */
.lw-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 2147483001; overflow: hidden; }
.lw-confetti span { position: absolute; top: -40px; font-size: 26px; animation: lwFall var(--t, 2.2s) var(--d, 0s) cubic-bezier(.2, .6, .4, 1) forwards; }

/* entrance */
.lw-anim .lw-reveal { opacity: 0; transform: translateY(22px) scale(.97); transition: opacity .55s ease, transform .6s var(--lw-bounce); transition-delay: calc(var(--d, 0) * 70ms); }
.lw-anim .lw-reveal.is-in { opacity: 1; transform: none; }
.lw-anim .lw-card.lw-reveal.is-in:hover { transition-delay: 0s; }

@keyframes lwFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lwHop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-8px) rotate(-6deg); } 60% { transform: translateY(-2px) rotate(4deg); } }
@keyframes lwWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: translateY(-6px) rotate(-14deg); } 50% { transform: rotate(12deg); } 75% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes lwPop { 0% { transform: scale(.92); } 55% { transform: scale(1.05) rotate(-1deg); } 100% { transform: scale(1); } }
@keyframes lwRise { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lwReveal { 0% { opacity: 0; transform: scale(.85) rotate(-3deg); filter: blur(8px); } 100% { opacity: 1; transform: none; filter: none; } }
@keyframes lwSpin { to { transform: rotate(360deg); } }
@keyframes lwShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
@keyframes lwStripes { to { background-position: 40px 0; } }
@keyframes lwUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lwFall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--x, 0px), 110vh) rotate(var(--r, 360deg)); opacity: .9; } }

@media (max-width: 639px) {
  .lw-sticker.s1, .lw-sticker.s3, .lw-sticker.s4 { display: none; }
  .lw-sticker.s2 { top: auto; bottom: 34%; left: 3%; }
  .lw-sticker.s5 { bottom: 4%; left: 5%; }
}
@media (min-width: 640px) {
  .lw-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .lw-price-cards { grid-template-columns: repeat(3, 1fr); }
  .lw-sticker { font-size: 44px; }
}
@media (min-width: 860px) {
  .lw-hero { padding: 30px 0 64px; }
  .lw-hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
  .lw-hero-art { width: min(100%, 420px); margin: 0 auto; }
  .lw-split { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
  .lw-split-preview { grid-template-columns: 1fr 1fr; }
  .lw-panel { padding: 32px; }
}
@media (min-width: 1040px) { .lw-grid { grid-template-columns: repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .lw-body *, .lw-body *::before, .lw-body *::after { animation: none !important; transition: none !important; }
  .lw-anim .lw-reveal { opacity: 1; transform: none; }
  .lw-confetti { display: none; }
}