:root {
    --il-ink: #3b1d14;
    --il-red: #b3322a;
    --il-red-d: #7d1a14;
    --il-green: #2f6b45;
    --il-green-l: #5c9a63;
    --il-gold: #e2b54a;
    --il-gold-l: #f4d98a;
    --il-cream: #fff4e0;
    --il-snow: #fff;
    --il-sky: #22304f;
    --il-wood: #a8683a;
}
.il { display: block; overflow: visible; }
.il .o { fill: none; stroke: var(--il-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.il .f-red { fill: var(--il-red); }
.il .f-red-d { fill: var(--il-red-d); }
.il .f-green { fill: var(--il-green); }
.il .f-green-l { fill: var(--il-green-l); }
.il .f-gold { fill: var(--il-gold); }
.il .f-gold-l { fill: var(--il-gold-l); }
.il .f-cream { fill: var(--il-cream); }
.il .f-snow { fill: var(--il-snow); }
.il .f-sky { fill: var(--il-sky); }
.il .f-wood { fill: var(--il-wood); }
.il .f-ink { fill: var(--il-ink); }

.logo-mark { width: 32px; height: 32px; flex: none; }

.wave { display: block; width: 100%; height: 44px; fill: currentColor; }
@media (min-width: 768px) { .wave { height: 60px; } }

.deco { position: absolute; pointer-events: none; opacity: .5; }
.deco-float { animation: decoFloat 3.5s ease-in-out infinite; }
.deco-float.slow { animation-duration: 5s; animation-direction: alternate-reverse; }
@keyframes decoFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-20px) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) { .deco-float { animation: none; } }
/* decorations hang just outside the content column, not at the screen edge */
/* Sit fully outside the text column (container padding is 2rem) and only
   show when the viewport leaves room for them, so they never cover text. */
.deco-l, .deco-r { display: none; }
.deco-l { right: calc(100% - 1rem); }
.deco-r { left: calc(100% - 1rem); }
@media (min-width: 1380px) { .deco-l, .deco-r { display: block; } }

.hero-snow {
    background-image:
        radial-gradient(3px 3px at 55% 88%, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.2px 2.2px at 73% 17%, rgba(255,255,255,0.45), transparent),
        radial-gradient(3px 3px at 12% 69%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.6px 2.6px at 16% 60%, rgba(255,255,255,0.45), transparent),
        radial-gradient(3.4px 3.4px at 35% 16%, rgba(255,255,255,0.45), transparent),
        radial-gradient(2.8px 2.8px at 12% 77%, rgba(255,255,255,0.7), transparent),
        radial-gradient(2.2px 2.2px at 85% 85%, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.8px 2.8px at 78% 79%, rgba(255,255,255,0.45), transparent),
        radial-gradient(3.4px 3.4px at 33% 10%, rgba(255,255,255,0.45), transparent),
        radial-gradient(2.8px 2.8px at 42% 58%, rgba(255,255,255,0.55), transparent),
        radial-gradient(2.6px 2.6px at 20% 78%, rgba(255,255,255,0.8), transparent),
        radial-gradient(3px 3px at 92% 28%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.2px 2.2px at 78% 86%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2.6px 2.6px at 17% 75%, rgba(255,255,255,0.6), transparent),
        radial-gradient(2.4px 2.4px at 77% 12%, rgba(255,255,255,0.45), transparent);
    background-size: 640px 640px, 600px 600px, 560px 560px, 520px 520px, 480px 480px, 440px 440px, 400px 400px, 380px 380px, 360px 360px, 340px 340px, 320px 320px, 300px 300px, 280px 280px, 260px 260px, 240px 240px;
    animation: heroSnow 24s linear infinite;
    opacity: .75;
}
@keyframes heroSnow {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 640px, 0 600px, 0 560px, 0 520px, 0 480px, 0 440px, 0 400px, 0 380px, 0 360px, 0 340px, 0 320px, 0 300px, 0 280px, 0 260px, 0 240px; }
}
@media (prefers-reduced-motion: reduce) { .hero-snow { animation: none; } }

.btn-gold {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(90deg, #D4A843, #E8C969); color: #1C1917;
    font-weight: 700; border-radius: .75rem; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 14px 28px -12px rgba(212, 168, 67, .6);
}
.btn-gold:hover { transform: translateY(-1px) scale(1.02); }
.btn-red {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: linear-gradient(135deg, #a52525, #6b1414); color: #fff; font-weight: 700;
    border-radius: .75rem; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 10px 22px -10px rgba(107, 20, 20, .8);
}
.btn-red:hover { transform: translateY(-1px); }
.btn-red:disabled, .btn-gold:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- wizard ---------- */
.chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 999px;
    border: 1.6px solid #e7e0d6; background: #fff; font-size: .92rem; font-weight: 500; color: #44403c;
    cursor: pointer; transition: all .15s; user-select: none;
}
.chip:hover { border-color: #d6c9b8; }
.chip.on { border-color: #8B1A1A; background: #fdf1ef; color: #6B1414; }
.chip.on::before { content: '✓'; font-weight: 700; }
.field {
    width: 100%; border: 1.6px solid #e7e0d6; border-radius: .8rem; padding: .8rem 1rem; font-size: 1rem;
    background: #fff; transition: border-color .15s, box-shadow .15s; color: #1c1917;
}
.field:focus { outline: none; border-color: #8B1A1A; box-shadow: 0 0 0 4px rgba(139, 26, 26, .1); }
.field.err { border-color: #dc2626; }
.opt-card {
    border: 1.6px solid #e7e0d6; border-radius: .9rem; padding: .85rem 1rem; background: #fff; cursor: pointer;
    text-align: center; font-weight: 600; color: #44403c; transition: all .15s;
}
.opt-card.on { border-color: #8B1A1A; background: #fdf1ef; color: #6B1414; }
.step { animation: stepIn .35s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- player ---------- */
.sp-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #1a1220; border-radius: 1.1rem; overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); user-select: none; }
.sp-wrap:fullscreen { border-radius: 0; }
.sp-wrap svg.sp-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sp-sub { position: absolute; left: 6%; right: 6%; bottom: 13%; text-align: center; pointer-events: none; }
.sp-sub span {
    display: inline; background: rgba(20, 12, 10, .72); color: #fff; padding: .18em .5em; line-height: 1.55;
    border-radius: .35em; font-weight: 600; font-size: clamp(.78rem, 2.3vw, 1.45rem);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: .55rem .8rem; display: flex; align-items: center; gap: .6rem;
    background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,0)); color: #fff; font-size: .8rem; }
.sp-btn { background: rgba(255,255,255,.12); border: 0; color: #fff; border-radius: .5rem; padding: .3rem .55rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: .78rem; }
.sp-btn:hover { background: rgba(255,255,255,.22); }
.sp-btn.off { opacity: .5; text-decoration: line-through; }
.sp-track { position: relative; flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; }
.sp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #E8C969, #D4A843); border-radius: 99px; }
.sp-lock { position: absolute; top: 0; bottom: 0; right: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 5px, rgba(255,255,255,.05) 5px 10px); }
.sp-time { font-variant-numeric: tabular-nums; opacity: .85; min-width: 4.6em; text-align: right; }
.sp-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .8rem;
    background: radial-gradient(ellipse at center, rgba(20,12,10,.15), rgba(20,12,10,.55)); cursor: pointer; border: 0; width: 100%; color: #fff; }
.sp-start .ring { width: clamp(64px, 12vw, 96px); height: clamp(64px, 12vw, 96px); border-radius: 50%;
    background: linear-gradient(135deg, #E8C969, #D4A843); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 10px rgba(232, 201, 105, .25); animation: pulseRing 2s ease-in-out infinite; }
@keyframes pulseRing { 50% { box-shadow: 0 0 0 18px rgba(232, 201, 105, .08); } }
.sp-start .lbl { font-weight: 700; font-size: clamp(.9rem, 2vw, 1.15rem); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.sp-locked { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 1.2rem;
    background: rgba(28, 12, 12, .72); backdrop-filter: blur(3px); color: #fff; }
.sp-locked.show { display: flex; animation: stepIn .5s ease both; }

/* fire, twinkle (inside svg) */
.sp-fire { transform-box: fill-box; transform-origin: 50% 100%; animation: fire .5s ease-in-out infinite alternate; }
.sp-fire.b { animation-duration: .38s; animation-delay: -.2s; }
@keyframes fire { from { transform: scale(1, .92) skewX(-2deg); } to { transform: scale(.95, 1.08) skewX(3deg); } }
.sp-tw { animation: tw 1.6s ease-in-out infinite; }
.sp-tw.d1 { animation-delay: -.5s; } .sp-tw.d2 { animation-delay: -1s; } .sp-tw.d3 { animation-delay: -1.3s; }
@keyframes tw { 50% { opacity: .25; } }
.sp-pop { transform-box: fill-box; transform-origin: center; animation: pop .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
.sp-drop { animation: drop .7s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes drop { from { transform: translateY(-420px); } }
.sp-fade { transition: opacity .8s ease; }

/* ---------- wait ---------- */
.wait-star { animation: spinSlow 6s linear infinite; transform-origin: center; transform-box: fill-box; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.wait-bar { height: 8px; border-radius: 99px; background: #f0e9df; overflow: hidden; }
.wait-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #a52525, #D4A843); border-radius: 99px; transition: width .8s ease; }
.wait-quill { animation: quill 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 10% 90%; }
@keyframes quill { 50% { transform: rotate(-8deg) translateX(6px); } }

/* ---------- payment cards (speech-generator layout) ---------- */
.pay-card { border: 2px solid #ece6dc; border-radius: 1rem; background: #fff; padding: 1.1rem; transition: border-color .15s, box-shadow .15s; position: relative; }
.pay-card:hover { border-color: #d6c9b8; box-shadow: 0 12px 30px -18px rgba(28, 25, 23, .35); }
.pay-card.rec { border-color: #8B1A1A; }
.pay-badge { position: absolute; top: -.7rem; left: 1rem; background: #8B1A1A; color: #fff; font-size: .7rem; font-weight: 700;
    padding: .15rem .6rem; border-radius: 99px; letter-spacing: .02em; }
.pm-icons img, .pm-icons svg { height: 22px; width: auto; }

.prose-legal h2 { font-weight: 700; font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: #1c1917; }
.prose-legal p { margin: .4rem 0; line-height: 1.65; color: #44403c; }
.prose-legal a { color: #8B1A1A; text-decoration: underline; }

/* ---------- illustrated features + kid picker (hover / tap animations) ---------- */
.il .f-skin { fill: #f6cfae; }
.il .f-cheek { fill: #f19b8e; opacity: .7; }
.il .f-hair { fill: #8a5a34; }
.feat-svg, .kid-svg { width: 100%; height: 100%; }
.feat-svg *, .kid-svg * { transform-box: fill-box; }

.feat { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.feat-art { width: 5.5rem; height: 5.5rem; border-radius: 1.25rem; background: #fbf3e4; display: grid; place-items: center; padding: .55rem; transition: transform .25s, background .25s; }
.feat:hover .feat-art, .feat.play .feat-art { transform: rotate(-3deg) scale(1.06); background: #f8e9cc; }

/* greeting: santa waves, pompom swings */
.fx-hand { transform-origin: 50% 100%; }
.fx-pom { transform-origin: 50% 0; }
.fx-head { transform-origin: 50% 90%; }
.feat:hover .fx-hand, .feat.play .fx-hand { animation: fxWave .9s ease-in-out 2; }
.feat:hover .fx-head, .feat.play .fx-head { animation: fxTilt 1.8s ease-in-out; }
.feat:hover .fx-pom, .feat.play .fx-pom { animation: fxBounce .45s ease-in-out 4; }
@keyframes fxWave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(16deg); } }
@keyframes fxTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } }
@keyframes fxBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* book: page turns, sparkles appear */
.fx-page { transform-origin: 0 50%; transition: transform .7s cubic-bezier(.5, 0, .3, 1); }
.feat:hover .fx-page, .feat.play .fx-page { transform: scaleX(-1); }
.fx-spark path { transform-origin: 50% 50%; transform: scale(0); transition: transform .35s .45s; }
.fx-spark path:nth-child(2) { transition-delay: .6s; }
.fx-spark path:nth-child(3) { transition-delay: .75s; }
.feat:hover .fx-spark path, .feat.play .fx-spark path { transform: scale(1); }

/* year in review: medal swings, star spins, confetti */
.fx-medal { transform-origin: 50% 0; }
.fx-star { transform-origin: 50% 55%; }
.feat:hover .fx-medal, .feat.play .fx-medal { animation: fxSwing 1.4s ease-in-out; }
.feat:hover .fx-star, .feat.play .fx-star { animation: fxSpin 1s ease-in-out; }
.fx-confetti > * { opacity: 0; transform-origin: 50% 50%; }
.feat:hover .fx-confetti > *, .feat.play .fx-confetti > * { animation: fxConfetti 1.2s ease-out forwards; }
.fx-confetti > :nth-child(2n) { animation-delay: .12s !important; }
@keyframes fxSwing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 55% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }
@keyframes fxSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } to { transform: rotate(360deg) scale(1); } }
@keyframes fxConfetti { 0% { opacity: 0; transform: translateY(8px) rotate(0); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(-6px) rotate(140deg); } }

/* gift: lid pops, stars fly out */
.fx-lid { transform-origin: 0 100%; }
.fx-box { transform-origin: 50% 100%; }
.fx-pop > * { opacity: 0; transform-origin: 50% 50%; }
.feat:hover .fx-lid, .feat.play .fx-lid { animation: fxLid 1.1s cubic-bezier(.3, 1.4, .5, 1); }
.feat:hover .fx-box, .feat.play .fx-box { animation: fxSquash 1.1s ease-out; }
.feat:hover .fx-pop > *, .feat.play .fx-pop > * { animation: fxPop 1.1s ease-out .2s forwards; }
@keyframes fxLid { 0%, 100% { transform: translate(0, 0) rotate(0); } 15% { transform: translate(0, 2px); } 45% { transform: translate(-2px, -14px) rotate(-14deg); } 75% { transform: translate(0, -3px) rotate(-3deg); } }
@keyframes fxSquash { 0%, 100% { transform: scale(1, 1); } 15% { transform: scale(1.06, .92); } 40% { transform: scale(.97, 1.04); } }
@keyframes fxPop { 0% { opacity: 0; transform: translateY(16px) scale(.3); } 50% { opacity: 1; transform: translateY(-4px) scale(1.15); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* candle: gentle flicker, brighter on hover */
.fx-flame { transform-origin: 50% 100%; animation: fxFlicker 2.4s ease-in-out infinite; }
.fx-glow { opacity: .25; transform-origin: 50% 50%; transition: opacity .4s, transform .4s; }
.feat:hover .fx-flame, .feat.play .fx-flame { animation-duration: .5s; }
.feat:hover .fx-glow, .feat.play .fx-glow { opacity: .55; transform: scale(1.25); }
@keyframes fxFlicker { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.94, 1.06) rotate(-3deg); } 60% { transform: scale(1.04, .95) rotate(2deg); } }

/* sleigh: takes off past the moon and comes back */
.fx-trail > * { opacity: 0; transform-origin: 50% 50%; }
.feat:hover .fx-sleigh, .feat.play .fx-sleigh { animation: fxFly 1.8s ease-in-out; }
.feat:hover .fx-trail > *, .feat.play .fx-trail > * { animation: fxTwinkle 1.8s ease-in-out; }
@keyframes fxFly {
    0%, 100% { transform: translate(0, 0) rotate(0); opacity: 1; }
    40% { transform: translate(20px, -24px) rotate(-12deg); opacity: 1; }
    55% { transform: translate(40px, -36px) rotate(-14deg); opacity: 0; }
    56% { transform: translate(-40px, 10px) rotate(0); opacity: 0; }
    75% { opacity: 1; }
}
@keyframes fxTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }

/* kid picker (home quiz + wizard step 1) */
.kid-opt { transition: transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.kid-opt:hover { transform: translateY(-3px); }
.kid-art { width: 4.5rem; height: 4.5rem; margin: 0 auto; }
.fx-kid { transform-origin: 50% 100%; }
.fx-bobble { transform-origin: 50% 100%; }
.kid-opt:hover .fx-kid, .kid-opt.on .fx-kid, .kid-opt:focus-visible .fx-kid { animation: fxHop .7s ease-in-out; }
.kid-opt:hover .fx-bobble { animation: fxWave .6s ease-in-out 2; }
@keyframes fxHop { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-6px) rotate(-5deg); } 70% { transform: translateY(0) rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
    .feat-svg *, .kid-svg * { animation: none !important; transition: none !important; }
}

/* payment badges */
.pm-badge { height: 1.75rem; width: 2.7rem; flex: none; border-radius: .35rem; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* 404 snowman */
.s4 { display: block; width: 100%; height: auto; overflow: visible; }
.s4 .s4-man { transform-box: fill-box; transform-origin: 50% 100%; animation: s4Sway 4s ease-in-out infinite; }
.s4 .s4-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: s4Wave 1.6s ease-in-out infinite; }
.s4 .s4-scarf { transform-box: fill-box; transform-origin: 30% 0%; animation: s4Scarf 2.2s ease-in-out infinite; }
.s4 .s4-bulb { animation: s4Blink 1.8s ease-in-out infinite; }
.s4 .s4-bulb.b2 { animation-delay: .6s; } .s4 .s4-bulb.b3 { animation-delay: 1.2s; }
.s4 .s4-flake { animation: s4Fall 7s linear infinite; }
.s4 .s4-flake.f2 { animation-delay: -2s; animation-duration: 8s; } .s4 .s4-flake.f3 { animation-delay: -4.5s; animation-duration: 6.5s; } .s4 .s4-flake.f4 { animation-delay: -1s; animation-duration: 9s; }
.s4 .s4-drip { animation: s4Drip 2.4s ease-in infinite; } .s4 .s4-drip.d2 { animation-delay: 1.2s; }
@keyframes s4Sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes s4Wave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes s4Scarf { 0%,100% { transform: skewX(0); } 50% { transform: skewX(-10deg); } }
@keyframes s4Blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes s4Fall { from { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(310px); opacity: 0; } }
@keyframes s4Drip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .s4 * { animation: none !important; } }