: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); }
.il .f-white { fill: #fff; }
.il .f-shadow { fill: rgba(0,0,0,.28); }

.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); }
.nav-cta { border-radius: .5rem; box-shadow: 0 8px 18px -10px rgba(212, 168, 67, .7); }
.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;
    /* night sky, also the placeholder until the player has mounted */
    background: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 78% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 46%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 30% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(2px 2px at 60% 84%, rgba(255,255,255,.45) 50%, transparent 51%),
        linear-gradient(180deg, #121624 0%, #1c2238 55%, #262d4b 100%); 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-cc { font-weight: 800; letter-spacing: .04em; border: 1.5px solid rgba(255,255,255,.75); padding: .2rem .4rem; }
.sp-cc.off { text-decoration: none; border-color: rgba(255,255,255,.35); }
.sp-seek { position: relative; flex: 1; padding: .7rem 0; cursor: pointer; touch-action: none; }
.sp-track { position: relative; height: 7px; border-radius: 99px; background: rgba(255,255,255,.22); overflow: hidden; transition: height .15s; }
.sp-seek:hover .sp-track { height: 10px; }
.sp-knob { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%;
    background: #F4D98A; box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
.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; }
/* big play button centred over the poster frame */
.sp-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: .7rem;
    padding-bottom: 0; background: radial-gradient(ellipse at 50% 50%, rgba(20,12,10,0), rgba(20,12,10,.45)); cursor: pointer; border: 0; width: 100%; color: #fff; }
.sp-start .ring { width: clamp(60px, 13vw, 132px); height: clamp(60px, 13vw, 132px); border-radius: 50%; transition: transform .2s;
    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 .ring svg { width: 46%; height: 46%; margin-left: 6%; }
.sp-start:hover .ring { transform: scale(1.06); }
.sp-start .lbl { display: none; font-weight: 700; font-size: clamp(1rem, 2vw, 1.35rem); background: rgba(20,12,10,.6);
    padding: .3em 1em; border-radius: 99px; }
@media (min-width: 640px) { .sp-start .lbl { display: inline-block; } }
.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; }

/* homepage trailer: sound pill top right, call-to-action over the closing shot */
.sp-sound { position: absolute; top: .7rem; right: .7rem; display: inline-flex; align-items: center; gap: .4rem; border: 0; cursor: pointer;
    background: rgba(20,24,40,.72); color: #fff; font-weight: 700; font-size: clamp(.78rem, 1.6vw, 1rem); padding: .55em .95em; border-radius: 99px;
    backdrop-filter: blur(4px); animation: stepIn .5s ease both; }
.sp-sound:hover { background: rgba(20,24,40,.9); }
.sp-cta { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.sp-cta.show { opacity: 1; }
.sp-cta.show a { pointer-events: auto; }  /* only the button takes clicks, the control bar below stays usable */

/* 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; }
/* paused, not started or finished: the picture freezes */
.sp-paused .sp-svg * { animation-play-state: paused !important; }
.sp-wrap:focus { outline: none; }
.sp-wrap:focus-visible { outline: 3px solid #E8C969; outline-offset: 3px; }

/* ---------- 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; }
.pay-opt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff;
    border: 2px solid #ece6dc; border-radius: 1.4rem; padding: 2rem 1.5rem 1.6rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pay-opt:hover { border-color: #d6c9b8; box-shadow: 0 18px 40px -24px rgba(28, 25, 23, .4); transform: translateY(-2px); }
.pay-opt.rec { border-color: #8B1A1A; box-shadow: 0 22px 48px -26px rgba(139, 26, 26, .55); }
.pay-opt .pay-badge { left: 50%; transform: translateX(-50%); top: -.8rem; font-size: .75rem; padding: .2rem .8rem; white-space: nowrap; }
.pay-opt { width: 100%; }
@media (min-width: 768px) { .pay-opt { width: calc((100% - 2.5rem) / 3); } }
.rc-card { width: 100%; }
@media (min-width: 640px) { .rc-card { width: calc((100% - 1.25rem) / 2); } }
@media (min-width: 1024px) { .rc-card { width: calc((100% - 2.5rem) / 3); } }
.pay-ic { width: 3.5rem; height: 3.5rem; border-radius: 99px; background: #f6f1ea; display: grid; place-items: center; font-size: 1.6rem; }
.pay-name { font-weight: 700; color: #1c1917; font-size: 1.05rem; margin-top: .9rem; min-height: 2.6em; display: flex; align-items: center; }
.pay-price { font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 2rem; color: #8B1A1A; margin-top: .2rem; }
.pay-feat { margin: .9rem 0 1.4rem; font-size: .875rem; color: #78716c; display: grid; gap: .35rem; }
.pay-feat .ok { color: #15803d; font-weight: 600; }
.pay-opt.pp { border-color: #003087; box-shadow: 0 22px 48px -26px rgba(0, 48, 135, .45); }
.btn-paypal { background: #003087; color: #fff; box-shadow: 0 10px 24px -12px rgba(0, 48, 135, .7); transition: background .15s, transform .15s; }
.pay-feat .bolt { display: inline-block; width: .95em; height: .95em; margin-right: .3em; vertical-align: -.1em; }
.lock-sm { width: 1rem; height: 1rem; flex-shrink: 0; }
/* checkout framed like the homepage questionnaire */
.pay-frame { position: relative; background: #F5F3EF; border-radius: 2rem; box-shadow: inset 0 0 0 1px rgba(214, 211, 209, .7); padding: 2.5rem 1rem 1.25rem; }
@media (min-width: 640px) { .pay-frame { padding: 3rem 2rem 2rem; } }
@media (min-width: 1024px) { .pay-frame { padding: 3.5rem 3rem 2.5rem; } }
/* small playful hover on the icons themselves */
.pay-ic, .trust-ic, .story-art { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.pay-ic:hover, .trust-ic:hover, .story-art:hover { transform: scale(1.08) rotate(-4deg); }
.pay-ic:hover .il, .trust-ic:hover .il, .story-art:hover .il { animation: ic-wiggle .6s ease-in-out; }
@keyframes ic-wiggle { 25% { transform: rotate(-7deg); } 60% { transform: rotate(6deg); } 85% { transform: rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .pay-ic:hover, .trust-ic:hover, .story-art:hover { transform: none; } .pay-ic:hover .il, .trust-ic:hover .il, .story-art:hover .il { animation: none; } }
.pay-opt.pp .pay-badge { background: #003087; }
.pay-ic .il { width: 2.4rem; height: 2.4rem; }

/* trust strip on the order page */
.trust-ic { flex-shrink: 0; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: #fbf3e4; display: grid; place-items: center; padding: .35rem; }
.trust-ic .il { width: 100%; height: 100%; }
.trust-cell p { overflow-wrap: anywhere; }
.trust-cell + .trust-cell { border-top: 1px solid #f1ece4; }
@media (min-width: 640px) {
    .trust-cell + .trust-cell { border-top: 0; }
    .trust-cell:nth-child(n+3) { border-top: 1px solid #f1ece4; }
    .trust-cell:nth-child(even) { border-left: 1px solid #f1ece4; }
}

/* "what the full video contains": numbered path, cream panel */
.story-panel { position: relative; background: #fbf3e4; border-radius: 2rem; padding: 3rem 1rem 3.25rem;
    background-image: radial-gradient(#f1dfbd 1.2px, transparent 1.3px); background-size: 22px 22px; }
@media (min-width: 640px) { .story-panel { padding: 3.5rem 2.5rem; } }
.story { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; gap: 1.5rem; }
.story::before { content: ''; position: absolute; top: 1.5rem; bottom: 1.5rem; left: 1.5rem; border-left: 3px dashed #d9b77a; }
.story-item { position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: .6rem; align-items: center; }
.story-num { position: relative; z-index: 1; width: 3rem; height: 3rem; border-radius: 99px; background: #8B1A1A; color: #fff;
    font-family: Fraunces, Georgia, serif; font-weight: 700; font-size: 1.35rem; display: grid; place-items: center;
    box-shadow: 0 0 0 5px #fbf3e4, 0 8px 18px -8px rgba(139, 26, 26, .7); }
.story-card { display: flex; align-items: center; gap: .8rem; background: #fff; border-radius: 1.25rem; padding: 1rem 1.1rem;
    box-shadow: 0 14px 30px -22px rgba(59, 29, 20, .45); border: 1px solid #efe3cf; transition: transform .2s; }
.story-card:hover { transform: translateY(-2px) rotate(-.4deg); }
.story-art { flex-shrink: 0; width: 3.4rem; height: 3.4rem; border-radius: 1rem; background: #fbf3e4; padding: .4rem; }
@media (min-width: 768px) {
    .story { gap: 0; }
    .story-item + .story-item { margin-top: .5rem; }
    .story::before { left: 50%; transform: translateX(-50%); }
    .story-item { grid-template-columns: 1fr 3.5rem 1fr; gap: 1.5rem; }
    .story-art { width: 4.5rem; height: 4.5rem; }
    .story-num { grid-column: 2; grid-row: 1; width: 3.5rem; height: 3.5rem; font-size: 1.5rem; }
    .story-card { grid-column: 1; grid-row: 1; padding: 1.3rem 1.5rem; }
    .story-item.r .story-card { grid-column: 3; }
    .story-item:not(.r) .story-card { flex-direction: row-reverse; text-align: right; }
}

/* closing CTA band */
.unlock-band { position: relative; overflow: hidden; text-align: center; border-radius: 2rem; padding: 3rem 1.5rem;
    background: radial-gradient(120% 140% at 50% 0%, #a3262a 0%, #7d1a14 60%, #5e130f 100%); }
.unlock-band .deco .il { width: 100%; }

.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); }
.pm-badge { transition: transform .2s ease, box-shadow .2s ease; }
.pm-badge:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px -6px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: reduce) { .pm-badge, .pm-badge:hover { transition: none; transform: none; } }

/* 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; } }

/* ---------- "how it works" step illustrations ---------- */
.how-card { position: relative; }
.how-num { position: absolute; top: -.6rem; left: -.6rem; width: 2rem; height: 2rem; border-radius: 9999px; background: #8B1A1A; color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 3px #fff; font-family: 'Fraunces', Georgia, serif; }
.feat-svg .fx-check { stroke-dasharray: 16; stroke-dashoffset: 0; }
.feat:hover .fx-check, .feat.play .fx-check { animation: fxDraw .45s ease-out both; }
.feat:hover .fx-check.c2, .feat.play .fx-check.c2 { animation-delay: .35s; }
.feat:hover .fx-check.c3, .feat.play .fx-check.c3 { animation-delay: .7s; }
.feat:hover .fx-pencil, .feat.play .fx-pencil { animation: fxScribble 1.2s ease-in-out; }
.feat:hover .fx-board, .feat.play .fx-board { animation: fxTilt 1.2s ease-in-out; }
@keyframes fxDraw { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }
@keyframes fxScribble { 0%, 100% { transform: translate(0, 0) rotate(0); } 20% { transform: translate(-8px, -30px) rotate(-6deg); } 45% { transform: translate(-6px, -15px) rotate(4deg); } 70% { transform: translate(-7px, 0) rotate(-4deg); } }
.feat:hover .fx-play, .feat.play .fx-play { animation: fxPulse .5s ease-in-out 3; }
.feat:hover .fx-screen, .feat.play .fx-screen { animation: fxGlow 1.5s ease-in-out; }
@keyframes fxPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
@keyframes fxGlow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(226, 181, 74, .8)); } }
.feat-svg .fx-hearts > * { opacity: 0; }
.feat:hover .fx-hearts > *, .feat.play .fx-hearts > * { animation: fxFloat 1.4s ease-out forwards; }
.feat:hover .fx-hearts > :nth-child(2), .feat.play .fx-hearts > :nth-child(2) { animation-delay: .25s; }
.feat:hover .fx-hearts > :nth-child(3), .feat.play .fx-hearts > :nth-child(3) { animation-delay: .5s; }
.feat:hover .fx-shackle, .feat.play .fx-shackle { animation: fxUnlock 1.4s ease-in-out forwards; }
.feat:hover .fx-phone, .feat.play .fx-phone { animation: fxTilt 1.4s ease-in-out; }
@keyframes fxFloat { 0% { opacity: 0; transform: translateY(14px) scale(.4); } 40% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 1; transform: translateY(-4px) scale(1); } }
@keyframes fxUnlock { 0% { transform: translateY(0); } 40%, 100% { transform: translateY(-5px); } }

/* ---------- quiz / wizard question blocks ---------- */
.q-block { padding-top: 1.75rem; margin-top: 1.75rem; border-top: 1px solid rgba(0, 0, 0, .07); }
.step > .q-block:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.q-title { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: #1c1917; }
.q-help { color: #78716c; margin-top: .25rem; font-size: .95rem; }
.how-card .feat-art { width: 8rem; height: 8rem; border-radius: 1.75rem; padding: .7rem; }

/* ---------- picture answer tiles ---------- */
.pic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
@media (min-width: 640px) { .pic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pic-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: .9rem .6rem .8rem; border: 1.6px solid #e7e0d6; border-radius: 1rem; background: #fff; cursor: pointer; font-weight: 600; font-size: .9rem; line-height: 1.2; color: #44403c; text-align: center; transition: transform .2s, border-color .2s, background .2s, box-shadow .2s; }
.pic-opt:hover { transform: translateY(-3px); border-color: #d6c9b8; box-shadow: 0 8px 18px -12px rgba(60, 30, 20, .35); }
.pic-opt .pic-svg { width: 3.4rem; height: 3.4rem; transform-box: fill-box; transform-origin: 50% 90%; }
.pic-opt.on { border-color: #8B1A1A; background: #fdf1ef; color: #6B1414; }
.pic-opt.on::after { content: '✓'; position: absolute; top: .4rem; right: .5rem; width: 1.3rem; height: 1.3rem; border-radius: 9999px; background: #8B1A1A; color: #fff; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }

/* ---------- hand-drawn age numbers (templates/_age_tile.html) ---------- */
.age-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 640px) { .age-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; } }
.age-opt { padding: .55rem .4rem; }
.age-opt .age-svg { width: 100%; max-width: 8rem; height: auto; overflow: visible; transform-box: fill-box; transform-origin: 50% 60%; }
.age-opt:hover .age-svg, .age-opt.play .age-svg { animation: ageWiggle .55s ease-in-out; }
@keyframes ageWiggle { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-7deg) scale(1.1); } 65% { transform: rotate(5deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .age-opt:hover .age-svg, .age-opt.on .age-svg, .pic-opt:hover .pic-svg, .pic-opt.on .pic-svg { animation: none; } }

.btn-quiz { display: block; width: 100%; text-align: center; padding: 1.15rem 1rem; font-size: 1.3rem; }
@media (min-width: 640px) { .btn-quiz { width: 60%; margin: 0 auto; } }

/* ---------- picture answer icons: one custom animation each, once on hover, replayed on select (.play) ---------- */
.pic-svg [class*="a-"] { transform-box: fill-box; transform-origin: 50% 50%; }
.pic-svg .a-cone, .pic-svg .a-tooth, .pic-svg .a-house, .pic-svg .a-box, .pic-svg .a-base, .pic-svg .a-broc, .pic-svg .a-carrot, .pic-svg .a-small { transform-origin: 50% 100%; }
.pic-svg .a-page { transform-origin: 0% 50%; }
.pic-svg .a-broom { transform-box: view-box; transform-origin: 34px 4px; }
.pic-svg .a-hand { transform-box: view-box; transform-origin: 36px 32px; }
.pic-svg .a-moon { transform-origin: 60% 50%; }
.pic-svg .a-w1, .pic-svg .a-w2 { transform-origin: 100% 50%; }
.pic-svg .a-scrib, .pic-svg [class*="a-arc"] { stroke-dasharray: 100; stroke-dashoffset: 0; }
.pic-svg .a-star { opacity: 0; }
.pic-opt.rs * { animation: none !important; }
.pic-opt:hover .pic-svg .a-bike, .pic-opt.play .pic-svg .a-bike { animation: icRide 1.1s ease-in-out; }
.pic-opt:hover .pic-svg .a-wheel, .pic-opt.play .pic-svg .a-wheel { animation: icSpin 1.1s ease-in-out; }
.pic-opt:hover .pic-svg .a-cone, .pic-opt.play .pic-svg .a-cone { animation: icWiggle .8s ease-in-out; }
.pic-opt:hover .pic-svg .a-star, .pic-opt.play .pic-svg .a-star { animation: icStarUp 1s ease-out; }
.pic-opt:hover .pic-svg .a-drop, .pic-opt.play .pic-svg .a-drop { animation: icDrop .8s cubic-bezier(.3,.7,.4,1); }
.pic-opt:hover .pic-svg .a-base, .pic-opt.play .pic-svg .a-base { animation: icSquash .8s ease-out; }
.pic-opt:hover .pic-svg .a-ring, .pic-opt.play .pic-svg .a-ring { animation: icBob 1.2s ease-in-out; }
.pic-opt:hover .pic-svg .a-waves, .pic-opt.play .pic-svg .a-waves { animation: icWaves 1.2s linear; }
.pic-opt:hover .pic-svg .a-page, .pic-opt.play .pic-svg .a-page { animation: icFlip .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-scrib, .pic-opt.play .pic-svg .a-scrib { animation: icDraw 1s ease-out; }
.pic-opt:hover .pic-svg .a-pen, .pic-opt.play .pic-svg .a-pen { animation: icScribble 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-broom, .pic-opt.play .pic-svg .a-broom { animation: icSweep 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-heart, .pic-opt.play .pic-svg .a-heart { animation: icPop .9s ease-out; }
.pic-opt:hover .pic-svg .a-band, .pic-opt.play .pic-svg .a-band { animation: icSlap .6s ease-out; }
.pic-opt:hover .pic-svg .a-big, .pic-opt.play .pic-svg .a-big { animation: icTilt .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-small, .pic-opt.play .pic-svg .a-small { animation: icHop .7s ease-in-out .15s; }
.pic-opt:hover .pic-svg .a-ball, .pic-opt.play .pic-svg .a-ball { animation: icBounce 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-notes, .pic-opt.play .pic-svg .a-notes { animation: icSway 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-fly, .pic-opt.play .pic-svg .a-fly { animation: icFloat 1.1s ease-out; }
.pic-opt:hover .pic-svg .a-h1, .pic-opt.play .pic-svg .a-h1 { animation: icBeat .8s ease-in-out; }
.pic-opt:hover .pic-svg .a-h2, .pic-opt.play .pic-svg .a-h2 { animation: icBeat .8s ease-in-out .2s; }
.pic-opt:hover .pic-svg .a-tooth, .pic-opt.play .pic-svg .a-tooth { animation: icWiggle .8s ease-in-out; }
.pic-opt:hover .pic-svg .a-spark, .pic-opt.play .pic-svg .a-spark { animation: icTwinkle .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-spark2, .pic-opt.play .pic-svg .a-spark2 { animation: icTwinkle .9s ease-in-out .3s; }
.pic-opt:hover .pic-svg .a-house, .pic-opt.play .pic-svg .a-house { animation: icSquash .7s ease-out; }
.pic-opt:hover .pic-svg .a-win, .pic-opt.play .pic-svg .a-win { animation: icLight .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-t1, .pic-opt.play .pic-svg .a-t1 { animation: icDrop .6s cubic-bezier(.3,.7,.4,1); }
.pic-opt:hover .pic-svg .a-t2, .pic-opt.play .pic-svg .a-t2 { animation: icDrop .6s cubic-bezier(.3,.7,.4,1) .15s; }
.pic-opt:hover .pic-svg .a-t3, .pic-opt.play .pic-svg .a-t3 { animation: icDrop .6s cubic-bezier(.3,.7,.4,1) .3s; }
.pic-opt:hover .pic-svg .a-box, .pic-opt.play .pic-svg .a-box { animation: icSquash .6s ease-out .3s; }
.pic-opt:hover .pic-svg .a-moon, .pic-opt.play .pic-svg .a-moon { animation: icRock 1.2s ease-in-out; }
.pic-opt:hover .pic-svg .a-twinkle, .pic-opt.play .pic-svg .a-twinkle { animation: icTwinkle .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-twinkle2, .pic-opt.play .pic-svg .a-twinkle2 { animation: icTwinkle .9s ease-in-out .3s; }
.pic-opt:hover .pic-svg .a-z, .pic-opt.play .pic-svg .a-z { animation: icFloat 1.2s ease-out; }
.pic-opt:hover .pic-svg .a-left, .pic-opt.play .pic-svg .a-left { animation: icSplitL 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-right, .pic-opt.play .pic-svg .a-right { animation: icSplitR 1s ease-in-out; }
.pic-opt:hover .pic-svg .a-brush, .pic-opt.play .pic-svg .a-brush { animation: icScrub .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-bub, .pic-opt.play .pic-svg .a-bub { animation: icFloat 1s ease-out; }
.pic-opt:hover .pic-svg .a-bub2, .pic-opt.play .pic-svg .a-bub2 { animation: icFloat 1s ease-out .2s; }
.pic-opt:hover .pic-svg .a-bub3, .pic-opt.play .pic-svg .a-bub3 { animation: icFloat 1s ease-out .4s; }
.pic-opt:hover .pic-svg .a-ear, .pic-opt.play .pic-svg .a-ear { animation: icTilt .9s ease-in-out; }
.pic-opt:hover .pic-svg .a-w1, .pic-opt.play .pic-svg .a-w1 { animation: icWave .8s ease-out; }
.pic-opt:hover .pic-svg .a-w2, .pic-opt.play .pic-svg .a-w2 { animation: icWave .8s ease-out .2s; }
.pic-opt:hover .pic-svg .a-carrot, .pic-opt.play .pic-svg .a-carrot { animation: icHop .6s ease-in-out; }
.pic-opt:hover .pic-svg .a-broc, .pic-opt.play .pic-svg .a-broc { animation: icHop .6s ease-in-out .2s; }
.pic-opt:hover .pic-svg .a-screen, .pic-opt.play .pic-svg .a-screen { animation: icDim 1.2s ease-in-out; }
.pic-opt:hover .pic-svg .a-hand, .pic-opt.play .pic-svg .a-hand { animation: icSpin 1.2s ease-in-out; }
.pic-opt:hover .pic-svg .a-clock, .pic-opt.play .pic-svg .a-clock { animation: icPulse .6s ease-in-out .6s; }
.pic-opt:hover .pic-svg .a-arc1, .pic-opt.play .pic-svg .a-arc1 { animation: icDraw .5s ease-out; }
.pic-opt:hover .pic-svg .a-arc2, .pic-opt.play .pic-svg .a-arc2 { animation: icDraw .5s ease-out .2s; }
.pic-opt:hover .pic-svg .a-arc3, .pic-opt.play .pic-svg .a-arc3 { animation: icDraw .5s ease-out .4s; }
.pic-opt:hover .pic-svg .a-c1, .pic-opt.play .pic-svg .a-c1 { animation: icPulse .4s ease-out .6s; }
.pic-opt:hover .pic-svg .a-c2, .pic-opt.play .pic-svg .a-c2 { animation: icPulse .4s ease-out .7s; }
@keyframes icRide { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes icSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes icWiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-5deg); } }
@keyframes icStarUp { 0% { opacity: 0; transform: translateY(8px) scale(.3); } 45% { opacity: 1; transform: translateY(-3px) scale(1.25) rotate(40deg); } 100% { opacity: 0; transform: translateY(-9px) scale(.8) rotate(90deg); } }
@keyframes icDrop { 0% { transform: translateY(-16px); opacity: 0; } 15% { opacity: 1; } 60% { transform: translateY(0); } 78% { transform: translateY(-3px); } 100% { transform: translateY(0); } }
@keyframes icSquash { 0%, 55%, 100% { transform: scale(1, 1); } 68% { transform: scale(1.08, .9); } 84% { transform: scale(.97, 1.03); } }
@keyframes icBob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-5px) rotate(-12deg); } 65% { transform: translateY(2px) rotate(8deg); } }
@keyframes icWaves { from { transform: translateX(0); } to { transform: translateX(-10px); } }
@keyframes icFlip { 0% { opacity: 1; transform: scaleX(1); } 75% { opacity: 1; transform: scaleX(-1); } 100% { opacity: 0; transform: scaleX(-1); } }
@keyframes icDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes icScribble { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-16px, -8px); } 40% { transform: translate(-6px, -9px); } 60% { transform: translate(-16px, 0); } 80% { transform: translate(-9px, -1px); } }
@keyframes icSweep { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-16deg); } 55% { transform: rotate(12deg); } 80% { transform: rotate(-6deg); } }
@keyframes icPop { 0% { transform: scale(1); } 35% { transform: translateY(-6px) scale(1.5); } 65% { transform: translateY(-2px) scale(.9); } 100% { transform: scale(1); } }
@keyframes icSlap { 0% { transform: scale(1.6) rotate(-25deg); opacity: .2; } 55% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes icTilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } }
@keyframes icHop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.1, .88); } 45% { transform: translateY(-9px) scale(.95, 1.06); } 75% { transform: translateY(0) scale(1.06, .94); } }
@keyframes icBounce { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(130deg); } 60% { transform: translateY(0) rotate(250deg); } 80% { transform: translateY(-3px) rotate(330deg); } 99% { transform: translateY(0) rotate(360deg); } }
@keyframes icSway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
@keyframes icFloat { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px) scale(1.1); } }
@keyframes icBeat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.25); } 45% { transform: scale(.95); } 65% { transform: scale(1.15); } }
@keyframes icTwinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: 1; transform: scale(1.8) rotate(90deg); } }
@keyframes icLight { 0%, 100% { filter: none; } 40%, 70% { fill: #f6d77a; } }
@keyframes icRock { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(9deg); } }
@keyframes icSplitL { 0%, 100% { transform: translateX(0); } 35%, 65% { transform: translateX(-5px) rotate(-8deg); } }
@keyframes icSplitR { 0%, 100% { transform: translateX(0); } 35%, 65% { transform: translateX(5px) rotate(8deg); } }
@keyframes icScrub { 0%, 100% { transform: translateX(0); } 15%, 55% { transform: translateX(-5px); } 35%, 75% { transform: translateX(4px); } }
@keyframes icWave { 0% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(1.5) translateX(-3px); } 100% { opacity: 1; transform: scale(1); } }
@keyframes icDim { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes icPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .pic-svg * { animation: none !important; } }

/* smooth jump to #start / #how */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.faq-body { overflow: hidden; }

/* hero sleigh scene: idle bob, hover/tap = take off, loop round, land back */
.hero-scene { cursor: pointer; border-radius: 1.75rem; box-shadow: 0 30px 60px -28px rgba(0,0,0,.6); outline: none; }
.hero-scene:focus-visible { box-shadow: 0 0 0 3px #E8C969, 0 30px 60px -28px rgba(0,0,0,.6); }
.hero-sleigh { display: block; width: 100%; height: auto; }
.hero-sleigh g { transform-box: view-box; }
.hs-bob { animation: hsBob 3.2s ease-in-out infinite; }
@keyframes hsBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hs-leg { transform-box: fill-box !important; transform-origin: 50% 0; animation: hsGallop .9s ease-in-out infinite alternate; }
.hs-leg.f { animation-delay: -.45s; }
@keyframes hsGallop { from { transform: rotate(-16deg); } to { transform: rotate(18deg); } }
.hs-nose-glow { animation: hsGlow 1.6s ease-in-out infinite; }
@keyframes hsGlow { 0%, 100% { opacity: .15; } 50% { opacity: .5; } }
.hs-tw { animation: hsTw 2.6s ease-in-out infinite; }
.hs-tw.d2 { animation-delay: -.9s; } .hs-tw.d3 { animation-delay: -1.7s; }
@keyframes hsTw { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hs-trail { opacity: 0; }
.hs-team { transform-origin: 240px 190px; }
.hero-scene.fly .hs-team { animation: hsTakeoff 2.8s cubic-bezier(.45,.05,.4,1); }
.hero-scene.fly .hs-trail { animation: hsTrail 2.8s linear; }
.hero-scene.fly .hs-leg { animation-duration: .28s; }
@keyframes hsTakeoff {
    0%   { transform: translate(0, 0) rotate(0); }
    12%  { transform: translate(-14px, 8px) rotate(3deg); }
    42%  { transform: translate(560px, -260px) rotate(-16deg); }
    42.1% { transform: translate(-620px, 40px) rotate(-6deg); }
    80%  { transform: translate(10px, -4px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0); }
}
@keyframes hsTrail { 0%, 12% { opacity: 0; } 20%, 40% { opacity: 1; } 42%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hs-bob, .hs-leg, .hs-nose-glow, .hs-tw, .hero-scene.fly .hs-team, .hero-scene.fly .hs-trail { animation: none; }
}

/* ===================================================== blog (pattern from adventcalendarmaker) */
.blog-article { color: #44403c; font-size: 1.075rem; line-height: 1.8; }
.blog-article > p, .blog-article > ul, .blog-article > ol { margin-top: 1.1rem; }
.blog-article h2 { margin-top: 3rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.7rem; line-height: 1.3; font-weight: 700; color: #1c1917; scroll-margin-top: 24px; clear: both; }
.blog-article h3 { margin-top: 2rem; font-size: 1.2rem; line-height: 1.4; font-weight: 700; color: #1c1917; scroll-margin-top: 24px; }
.blog-article h3 + p { margin-top: .5rem; }
.blog-article a { color: #6B1414; text-decoration: underline; text-underline-offset: 2px; }
.blog-article strong { color: #1c1917; }
.blog-article sup { line-height: 0; }
.blog-article a.fn { margin-left: 1px; font-size: .75em; font-weight: 800; color: #8B1A1A; text-decoration: none; }
.blog-article a.fn:hover { text-decoration: underline; }
.blog-article > ul > li { position: relative; padding-left: 1.6rem; margin-top: .45rem; }
.blog-article > ul > li::before { content: ""; position: absolute; left: .1rem; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: #8B1A1A; }
.blog-article .tbl { clear: both; overflow-x: auto; margin: 1.5rem 0; }
.blog-article table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e7e5e4; border-radius: .5rem; overflow: hidden; font-size: .92rem; }
.blog-article th { background: #f5f3ef; padding: .7rem 1rem; text-align: left; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #78716c; border-bottom: 1px solid #e7e5e4; }
.blog-article td { padding: .7rem 1rem; border-bottom: 1px solid #f5f5f4; vertical-align: top; }
.blog-article tbody tr:last-child td { border-bottom: none; }
.blog-article .info-box { margin: 1.75rem 0; padding: 1.15rem 1.4rem; background: #faf8f4; border: 1px solid #e7e5e4; border-left: 4px solid #8B1A1A; border-radius: .5rem; font-size: .97rem; line-height: 1.65; }
.blog-article .info-box ul { margin-top: .4rem; }
.blog-article .info-box li { margin-top: .2rem; }
.blog-article .info-box a { color: #1c1917; text-decoration: none; } .blog-article .info-box a:hover { text-decoration: underline; }
.blog-article .key-stats { clear: both; margin: 2rem 0; padding: 1.4rem; background: #6B1414; border-radius: 1rem; color: #fff; }
.blog-article .ks-h { margin: 0 0 1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #E8C969; }
.blog-article .ks-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
@media (min-width: 640px) { .blog-article .ks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blog-article .ks { display: flex; flex-direction: column; gap: .3rem; }
.blog-article .ks-n { font-family: 'Fraunces', Georgia, serif; font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #fff; }
.blog-article .ks-t { font-size: .85rem; line-height: 1.45; color: rgba(255,255,255,.8); }
.blog-article .key-stats a.fn { color: #E8C969; }
.blog-article .source-register { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.blog-article .source-register li { scroll-margin-top: 24px; }
.blog-article a.src { position: relative; display: flex; align-items: center; gap: .9rem; padding: .8rem 1.1rem; background: #fff; border: 1px solid #e7e5e4; border-radius: .5rem; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.blog-article a.src:hover, .blog-article a.src:focus-visible { border-color: #d6b9b9; box-shadow: 0 6px 18px -10px rgba(107,20,20,.35); outline: none; }
.blog-article a.src:hover .src-t strong { text-decoration: underline; text-underline-offset: 2px; }
.blog-article .source-register li:target .src { border-color: #8B1A1A; box-shadow: 0 0 0 2px #f5e6e6; }
.blog-article .src-n { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0; border-radius: .45rem; background: #6B1414; color: #fff; font-weight: 700; font-size: .9rem; line-height: 1; }
.blog-article .src-t { flex: 1; min-width: 0; font-size: 1em; line-height: 1.5; color: #1c1917; }
.blog-article .src-t span { color: #78716c; }
.blog-article .cite-box { margin: 2.75rem 0; padding: 1.5rem 1.5rem 1.25rem; border: 2px solid #6B1414; border-radius: 1rem; background: #faf8f4; }
.blog-article .cite-h { margin: 0 0 .35rem; font-size: 1.15rem; font-weight: 800; color: #1c1917; }
.blog-article .cite-sub { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.6; color: #57534e; }
.blog-article .cite-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .3rem; }
.blog-article .cite-top span { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6B1414; }
.blog-article .cite-top button { font-size: .75rem; font-weight: 600; color: #6B1414; background: #fff; border: 1px solid #6B1414; border-radius: .4rem; padding: .3rem .7rem; cursor: pointer; }
.blog-article .cite-text { margin: 0; padding: .75rem .9rem; background: #fff; border: 1px solid #e7e5e4; border-radius: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.5; color: #44403c; word-break: break-all; }

.tag-chip { display: inline-block; border-radius: 999px; background: #f5f3ef; color: #57534e; font-size: .75rem; font-weight: 600; padding: .2rem .7rem; line-height: 1.4; border: 1px solid #e7e5e4; }
a.tag-chip:hover, button.tag-chip:hover { background: #ece8e1; }
.blog-article > ol { list-style: decimal; padding-left: 1.4rem; } .blog-article > ol > li { margin-top: .45rem; padding-left: .3rem; }
.blog-article .addr { margin: 1.25rem 0; padding: 1.1rem 1.4rem; background: #fff; border: 1px dashed #b3322a; border-radius: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .98rem; line-height: 1.6; color: #1c1917; }
.blog-article .addr-grid { display: grid; gap: 1rem; margin: 1.5rem 0; } @media (min-width: 640px) { .blog-article .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-article .addr-grid .addr { margin: 0; } .blog-article .addr b { display: block; margin-bottom: .35rem; font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #8B1A1A; }
.blog-article .my-take { margin-top: 1.1rem; padding: 1.4rem 1.6rem; background: #fff; border: 1px solid #e7e5e4; border-left: 4px solid #D4A843; border-radius: 1rem; font-size: 1.1rem; line-height: 1.75; color: #292524; }
.blog-article .my-take p + p { margin-top: .8rem; }
.blog-article .take-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; font-size: .85rem; font-weight: 700; color: #1c1917; }
.blog-article .take-head img { width: 40px; height: 40px; border-radius: 9999px; object-fit: cover; }
/* One illustration per H2 (idea_art in articles/build.py): night sky like the blog pictures */
.blog-article .idea-art { margin: 1.1rem 0 0; overflow: hidden; border-radius: 1rem; }
@media (min-width: 640px) { .blog-article .idea-art { float: right; width: 40%; margin: .35rem 0 .75rem 1.5rem; } }
.blog-article .idea-art .thumb { background: radial-gradient(rgba(255,255,255,.55) 1.1px, transparent 1.4px) 0 0 / 22px 22px, linear-gradient(#101a36, #2b3d66); }
.blog-article .idea-art .thumb-motif { inset: 9% 12% 5%; transform: rotate(var(--tilt, 0deg)); }
.blog-article .idea-art .il { width: 100%; height: 100%; }
.blog-article h3[id^="stat-"] { scroll-margin-top: 24px; }
.blog-article .tip { margin: 1.5rem 0; padding: 1rem 1.3rem; background: #fdf6e3; border-left: 4px solid #D4A843; border-radius: .5rem; font-size: .98rem; }

.author-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 9999px; background: #f5e6e6; font-size: 14px; line-height: 1; }
.author-dot.lg { width: 64px; height: 64px; flex-shrink: 0; font-size: 34px; }
.author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid #e7e5e4; clear: both; }
.author-k { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #a8a29e; }
.author-n { margin-top: .1rem; font-size: 1.05rem; font-weight: 700; color: #1c1917; }
.author-b { margin-top: .35rem; font-size: .92rem; line-height: 1.65; color: #57534e; }
.side-cta { padding: 1.4rem; background: linear-gradient(160deg, #22304f, #101a36); border-radius: 1rem; }

/* Blog pictures: night sky + snow hill, motif in the middle (partials/blog_thumb.html) */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(#101a36, #2b3d66); }
.thumb-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.thumb-motif { position: absolute; inset: 10% 18% 8%; transition: transform .2s; }
.thumb-motif svg { width: 100%; height: 100%; }
a:hover .thumb-motif { transform: scale(1.04); }
.author-img { width: 72px; height: 72px; flex-shrink: 0; border-radius: 9999px; object-fit: cover; }
.author-card { padding: 1.4rem; background: #fff; border: 1px solid #e7e5e4; border-radius: .75rem; }
.blog-article .addr { position: relative; padding-right: 6.5rem; }
.addr-copy { position: absolute; top: .8rem; right: .8rem; font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 600; color: #6B1414; background: #fff; border: 1px solid #6B1414; border-radius: .45rem; padding: .3rem .7rem; cursor: pointer; transition: background .15s, color .15s; }
.addr-copy:hover { background: #6B1414; color: #fff; }
.addr-copy.ok { background: #2f7a4a; border-color: #2f7a4a; color: #fff; }

/* Blog widget: Weihnachtsmann/Christkind tile map */
.gb-map { margin: 1.8rem 0; padding: 1.2rem; background: #fffaf0; border: 1px solid #ecdcc0; border-radius: 1rem; }
.gb-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-family: 'Inter', sans-serif; font-size: .85rem; margin-bottom: .9rem; }
.gb-legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: .25rem; margin-right: .35rem; vertical-align: -2px; }
.gb-legend i.wm, .gb-tile.wm { background: #c8402f; }
.gb-legend i.ck, .gb-tile.ck { background: #D4A843; }
.gb-legend i.mix, .gb-tile.mix { background: #e07b39; }
.gb-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 64px; gap: 6px; max-width: 340px; margin: 0 auto; }
.gb-tile { border: 0; border-radius: .55rem; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; line-height: 1.1; padding: 2px; transition: transform .12s, box-shadow .12s; }
.gb-tile b { font-size: 1.05rem; }
.gb-tile span { font-size: .55rem; opacity: .9; margin-top: 2px; }
.gb-tile.ck { color: #3b1d14; }
.gb-tile:hover, .gb-tile.on { transform: scale(1.06); box-shadow: 0 0 0 3px #3b1d14; }
.gb-info { margin: 1rem auto 0; max-width: 520px; min-height: 3.6rem; padding: .7rem 1rem; background: #fff; border-radius: .6rem; border: 1px solid #ecdcc0; font-size: .95rem; }
.gb-info strong { display: block; color: #6B1414; }
.gb-map figcaption { margin-top: .8rem; font-size: .8rem; color: #7a6a5a; text-align: center; }
@media (max-width: 480px) { .gb-grid { grid-auto-rows: 54px; gap: 4px; } .gb-tile span { display: none; } }

/* Blog widget: Santa tracker */
.sx-track { margin: 1.8rem 0; padding: 1.3rem; background: #14213d; color: #fff; border-radius: 1rem; }
.sx-head { display: flex; align-items: center; gap: .5rem; font-family: 'Inter', sans-serif; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #E8C969; }
.sx-dot { width: .6rem; height: .6rem; border-radius: 50%; background: #E8C969; }
.sx-track.live .sx-dot { background: #4ade80; animation: sxpulse 1.4s infinite; }
@keyframes sxpulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.sx-main { margin: .8rem 0 1rem; }
.sx-big { font-family: 'Inter', sans-serif; font-size: 1.7rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sx-sub { margin-top: .3rem; color: #cbd5e1; font-size: .95rem; }
.sx-bar { height: 6px; background: rgba(255, 255, 255, .15); border-radius: 3px; overflow: hidden; }
.sx-bar i { display: block; height: 100%; width: 0; background: #E8C969; transition: width .5s; }
.sx-list { list-style: none; margin: 1rem 0 0; padding: 0; columns: 2; column-gap: 1.4rem; font-size: .85rem; }
.sx-list li { display: flex; justify-content: space-between; gap: .6rem; padding: .28rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); break-inside: avoid; margin: 0; }
.sx-list li b { font-weight: 600; color: #E8C969; white-space: nowrap; }
.sx-list li.past { opacity: .45; }
.sx-list li.now { color: #4ade80; font-weight: 700; }
.sx-track figcaption { margin-top: .9rem; font-size: .8rem; color: #94a3b8; }
@media (max-width: 560px) { .sx-list { columns: 1; } .sx-big { font-size: 1.35rem; } }
.sx-km { margin-left: auto; color: #cbd5e1; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sx-map { margin: .9rem -.4rem 0; border-radius: .7rem; overflow: hidden; background: #0f1a33; }
.sx-map svg { display: block; width: 100%; height: auto; }
.sx-route { fill: none; stroke: rgba(232, 201, 105, .28); stroke-width: 1.2; stroke-dasharray: 3 4; }
.sx-trail { fill: none; stroke: #E8C969; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sx-stop { fill: #0f1a33; stroke: rgba(232, 201, 105, .6); stroke-width: 1.4; }
.sx-stop.on { fill: #E8C969; stroke: #E8C969; }
.sx-pole circle { fill: #fff; } .sx-pole text { fill: #cbd5e1; font: 600 11px Inter, sans-serif; }
.sx-glow { fill: rgba(232, 201, 105, .22); }
.sx-track.live .sx-glow { animation: sxglow 1.6s infinite; }
@keyframes sxglow { 50% { fill: rgba(232, 201, 105, .05); } }
.sx-rd { fill: #a8683a; } .sx-rein { stroke: #E8C969; stroke-width: 1; }
.sx-body { fill: #b3322a; } .sx-run { fill: none; stroke: #E8C969; stroke-width: 1.6; stroke-linecap: round; }
.sx-santa { fill: #fff; }
.sx-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-play { margin-top: .9rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid #E8C969; background: transparent;
  color: #E8C969; font: 600 .9rem Inter, sans-serif; cursor: pointer; }
.sx-play:hover, .sx-track.preview .sx-play { background: #E8C969; color: #14213d; }
.sx-nojs { margin-top: .6rem; font-size: .85rem; color: #cbd5e1; }
@media (max-width: 560px) { .sx-track { padding: 1rem; } .sx-map { margin: .8rem -.5rem 0; } .sx-head { flex-wrap: wrap; } .sx-status { flex: 1 1 0; min-width: 0; } .sx-km { flex-basis: 100%; margin: .2rem 0 0 1.1rem; } }

/* Blog widget: table filter */
.nm-filter { margin: 1.2rem 0 .4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; font-family: 'Inter', sans-serif; font-size: .9rem; }
.nm-filter input { flex: 1 1 220px; padding: .55rem .8rem; border: 1px solid #d6c6aa; border-radius: .5rem; font-size: 1rem; }
.author-img.author-img-sm { width: 64px; height: 64px; }