/* Marketing illustrations (templates/illu/). SVGs carry no colours of their
   own: `.o` is the ink outline, `.f-*` the fills, all driven by these tokens. */
: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: 30px; height: 30px; flex: none; }

/* Snowdrift dividers between sections; colour = the next section's background */
.wave { display: block; width: 100%; height: 44px; fill: currentColor; }
@media (min-width: 768px) { .wave { height: 60px; } }

/* Floating decoration */
.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; } }
/* On screens wider than the 1440px design, decorations keep their spot relative
   to the centred content instead of drifting out to the window edges. --x is the
   percentage the deco uses at 1440px. */
@media (min-width: 1440px) {
    .deco-l { left: calc(50% - 720px + var(--x) * 14.4px) !important; }
    .deco-r { right: calc(50% - 720px + var(--x) * 14.4px) !important; }
}

.icon-tile { width: 72px; height: 72px; }
.icon-tile .il { width: 100%; height: 100%; }

/* Hero: the advent house holding the demo calendar */
.adv-house { position: relative; max-width: 460px; margin: 0 auto; }
@media (min-width: 1024px) { .adv-house { max-width: 620px; margin: 0 0 0 auto; } .adv-house .wall .grid { gap: 9px; } }
.adv-house .wall {
    position: relative;
    padding: 34px 14px 18px;
    border: 2.2px solid var(--il-ink);
    border-radius: 14px;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 26px),
        linear-gradient(180deg, #3f7d55, #2b5d3e);
    box-shadow: inset 0 10px 18px rgba(0, 0, 0, .25), 0 24px 50px rgba(0, 0, 0, .3);
}
/* String of lights along the top edge; the bulbs glow softly in turn */
.adv-house .lights-row { position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none; }
.adv-house .lights-row .lights { display: block; width: 100%; height: 100%; }
.adv-house .bulb {
    position: absolute; top: 7px; width: 10px; height: 13px; margin-left: -5px;
    border: 1.6px solid var(--il-ink); border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    animation: bulbGlow 2.4s ease-in-out infinite;
}
.adv-house .bulb.b-gold { background: var(--il-gold-l); color: var(--il-gold-l); }
.adv-house .bulb.b-red { background: var(--il-red); color: var(--il-red); animation-delay: .8s; }
.adv-house .bulb.b-green { background: var(--il-green-l); color: var(--il-green-l); animation-delay: 1.6s; }
@keyframes bulbGlow { 50% { box-shadow: 0 0 10px 3px currentColor; } }
@media (prefers-reduced-motion: reduce) { .adv-house .bulb { animation: none; } }
.adv-house .wall .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.adv-house .wall .door { aspect-ratio: 5 / 6; }
.adv-house .ground { width: 112%; margin: -14px -6% 0; height: auto; position: relative; z-index: 3; pointer-events: none; }
.adv-house .date-sign {
    display: inline-block;
    margin: 0 auto 10px;
    padding: 3px 14px;
    border: 2px solid var(--il-ink);
    border-radius: 999px;
    background: var(--il-cream);
    color: var(--il-red-d);
    font: 700 14px/1.4 'Fraunces', Georgia, serif;
}

/* Style showcase strip and picker */
.style-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.style-swatch .door { width: 100%; aspect-ratio: 5 / 6; }
.style-wall .style-more { display: none; }
.style-wall.show-all .style-more { display: flex; animation: swatchIn .4s ease both; }
.showcase-item.reveal { animation: swatchIn .4s ease both; }
@keyframes swatchIn { from { opacity: 0; transform: translateY(8px); } }
.style-pick input { position: absolute; opacity: 0; pointer-events: none; }
.style-pick .card { border: 2px solid transparent; border-radius: 14px; padding: 8px; transition: border-color .2s, background .2s; cursor: pointer; }
.style-pick input:checked + .card { border-color: #8B1A1A; background: #fff7f2; }
.style-pick input:focus-visible + .card { outline: 2px solid #D4A843; outline-offset: 2px; }
.style-pick .door { pointer-events: none; width: 100%; aspect-ratio: 5 / 6; }

/* Door colour presets in the editor */
.color-preset { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border-radius: 10px; border: 2px solid transparent; transition: border-color .15s, background .15s; }
.color-preset:not(:disabled):hover { background: #f5f5f4; }
.color-preset[aria-pressed="true"] { border-color: var(--brand, #8B1A1A); background: #fff; }
.color-preset:disabled { cursor: not-allowed; }
.color-preset-door { display: flex; align-items: center; justify-content: center; width: 40px; height: 48px; border-radius: 7px; font-weight: 800; font-size: 17px; font-family: 'Fraunces', Georgia, serif; }
.color-preset-name { font-size: 10px; line-height: 1.2; font-weight: 600; color: #57534e; text-align: center; }

/* Show all / fewer styles toggle: hand drawn arrows on both sides */
.style-toggle .st-arrow { width: 22px; height: 22px; transition: transform .35s ease; }
.style-toggle:hover .st-arrow { animation: stNudge .9s ease-in-out infinite; }
.style-toggle[aria-expanded="true"] .st-arrow { transform: rotate(180deg); }
@keyframes stNudge { 50% { translate: 0 3px; } }
.style-toggle[aria-expanded="true"]:hover .st-arrow { animation-name: stNudgeUp; }
@keyframes stNudgeUp { 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) { .style-toggle .st-arrow { animation: none !important; } }
/* Smaller variant inside the editor */
.style-toggle-sm { font-size: .8125rem; letter-spacing: .01em; }
.style-toggle-sm .st-arrow { width: 15px; height: 15px; }
/* Animation picker in the editor */
.fx-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fx-pick .fx-card { display: block; border: 2px solid #e7e5e4; border-radius: 14px; padding: 6px; background: #fff; cursor: pointer; transition: border-color .2s, background .2s; height: 100%; }
.fx-pick:hover .fx-card { border-color: #d6d3d1; }
.fx-pick input:checked + .fx-card { border-color: #8B1A1A; background: #fff7f2; }
.fx-pick input:focus-visible + .fx-card { outline: 2px solid #D4A843; outline-offset: 2px; }
.fx-stage { position: relative; display: block; height: 76px; border-radius: 9px; overflow: hidden;
  background: radial-gradient(ellipse at 80% 0%, rgba(212,168,67,.18), transparent 60%), linear-gradient(180deg, #0c1530 0%, #1a1f4a 60%, #2a1d44 100%); }
.fx-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-stage .fx-still { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); }

/* How it works: each step card plays a small icon animation on hover */
.how-step .icon-tile { transition: transform .3s ease; }
.how-step .icon-tile > span { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.how-step:hover .icon-tile > span { transform: scale(1.2); }
.how-step .il * { transform-box: fill-box; transform-origin: center; }
/* 1: calendar hops, cells pop one after another, star spins */
.how-1:hover .icon-tile { animation: howHop .6s ease; }
.how-1:hover .a-cell { animation: howPop .45s ease both; }
.how-1:hover .a-cell:nth-of-type(4) { animation-delay: .06s; }
.how-1:hover .a-cell:nth-of-type(5) { animation-delay: .12s; }
.how-1:hover .a-cell:nth-of-type(6) { animation-delay: .18s; }
.how-1:hover .a-cell:nth-of-type(7) { animation-delay: .24s; }
.how-1:hover .a-star { animation: howSpin .8s cubic-bezier(.34,1.56,.64,1); }
/* 2: the plus button gets clicked and sends out a ring */
.how-2:hover .a-plus { animation: howClick .5s ease .1s; }
.how-2 .a-ring { fill: none; stroke: var(--il-green, #2f6b45); stroke-width: 2.5; opacity: 0; }
.how-2:hover .a-ring { animation: howRing .7s ease-out .25s; }
.how-2:hover .a-head { animation: howNod .6s ease .2s; }
/* 2 (Weihnachtslied): the wand swings, sparkles twinkle one after another */
.how-2:hover .a-wand { animation: howSwing .8s ease; transform-origin: 100% 100%; }
.how-2:hover .a-wand ~ .a-spark { animation: howTwinkle .7s ease both; }
.how-2:hover .a-wand ~ .a-spark2 { animation-delay: .2s; }
.how-2:hover .a-wand ~ .a-spark3 { animation-delay: .4s; }
/* 3: gift grows and wiggles, the lid lifts, sparkles twinkle */
.how-3:hover .icon-tile { animation: howWiggle .7s ease; transform: scale(1.12); }
.how-3:hover .a-lid { animation: howLid .7s ease; }
.how-3:hover .a-spark { animation: howTwinkle .7s ease infinite; }
.how-3:hover .a-spark2 { animation-delay: .35s; }
/* 4: phone vibrates, signal waves pulse outwards */
.how-4:hover .a-phone { animation: howBuzz .08s linear 6 alternate; }
.how-4:hover .a-wave { animation: howWave .6s ease-out 2; }
.how-4:hover .a-wave-l { animation-name: howWaveL; }

@keyframes howHop { 40% { transform: translateY(-8px); } 70% { transform: translateY(1px); } }
@keyframes howPop { 50% { transform: scale(1.3); } }
@keyframes howSpin { from { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.5); } to { transform: rotate(360deg) scale(1); } }
@keyframes howClick { 30% { transform: scale(.75); } 65% { transform: scale(1.18); } }
@keyframes howRing { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes howSwing { 25% { transform: rotate(-16deg); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
@keyframes howNod { 40% { transform: translateY(-2px); } }
@keyframes howWiggle {
    0% { transform: scale(1) rotate(0); } 20% { transform: scale(1.12) rotate(-9deg); }
    40% { transform: scale(1.12) rotate(8deg); } 60% { transform: scale(1.12) rotate(-5deg); }
    80% { transform: scale(1.12) rotate(3deg); } 100% { transform: scale(1.12) rotate(0); }
}
@keyframes howLid { 30% { transform: translateY(-6px) rotate(-6deg); } 60% { transform: translateY(-3px) rotate(4deg); } }
@keyframes howTwinkle { 50% { transform: scale(1.6) rotate(45deg); opacity: .4; } }
@keyframes howBuzz { from { transform: translateX(-1.5px) rotate(-3deg); } to { transform: translateX(1.5px) rotate(3deg); } }
@keyframes howWave { from { transform: translateX(0); opacity: 1; } 50% { transform: translateX(3px); opacity: .3; } }
@keyframes howWaveL { from { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-3px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .how-step *, .how-step .icon-tile { animation: none !important; } }

/* Features: each card plays a small icon animation on hover, like How it works */
.feat .il * { transform-box: fill-box; transform-origin: center; }
/* 1: the four tiles pop one after another */
.feat-1:hover .a-tile { animation: howPop .45s ease both; }
.feat-1:hover .a-tile:nth-of-type(2) { animation-delay: .08s; }
.feat-1:hover .a-tile:nth-of-type(3) { animation-delay: .16s; }
.feat-1:hover .a-tile:nth-of-type(4) { animation-delay: .24s; }
/* 2: the palette tilts, the paint dots bounce in turn */
.feat-2:hover .feat-icon { animation: howSwing .8s ease; }
.feat-2:hover .a-dot { animation: howPop .4s ease both; }
.feat-2:hover .a-dot:nth-of-type(2) { animation-delay: .1s; }
.feat-2:hover .a-dot:nth-of-type(3) { animation-delay: .2s; }
.feat-2:hover .a-dot:nth-of-type(4) { animation-delay: .3s; }
/* 3: the paper plane takes off and glides back in, the trail fades */
.feat-3:hover .a-plane { animation: featFly .9s cubic-bezier(.5,0,.3,1); }
.feat-3:hover .a-trail { animation: featTrail .9s ease; }
/* 4: the phone hops next to the screen, the star spins */
.feat-4:hover .a-phone { animation: howHop .6s ease .1s; }
.feat-4:hover .a-star { animation: howSpin .8s cubic-bezier(.34,1.56,.64,1); }
/* 5: the clock hand sweeps a full turn, the crown presses down */
.feat-5 .a-hand { transform-box: view-box; transform-origin: 32px 34px; }
.feat-5:hover .a-hand { animation: featTurn 1s cubic-bezier(.6,0,.3,1); }
.feat-5:hover .a-crown { animation: featPress .3s ease 2; }
.feat-5:hover .a-tick { animation: howTwinkle .5s ease .2s 2; }
/* 6: the bars grow from the baseline one after another */
.feat-6 .a-bar { transform-origin: 50% 100%; }
.feat-6:hover .a-bar { animation: featGrow .6s cubic-bezier(.34,1.56,.64,1) both; }
.feat-6:hover .a-bar:nth-of-type(2) { animation-delay: .1s; }
.feat-6:hover .a-bar:nth-of-type(3) { animation-delay: .2s; }

@keyframes featFly { 35% { transform: translate(14px, -14px) scale(.6); opacity: 0; } 36% { transform: translate(-14px, 14px) scale(.6); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes featTrail { 30% { opacity: 0; } 70% { opacity: 0; } }
@keyframes featTurn { to { transform: rotate(360deg); } }
@keyframes featPress { 50% { transform: translateY(2px); } }
@keyframes featGrow { from { transform: scaleY(.15); } }
@media (prefers-reduced-motion: reduce) { .feat *, .feat .feat-icon { animation: none !important; } }

/* Closing CTA tree + gifts (illu/song/cta_xmas.svg): quiet loop, burst on hover/tap.
   Same motion as the CTA on the song and use case pages. */
.cta-anim { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cta-anim [class*=cx-] { transform-box: fill-box; transform-origin: 50% 50%; }
.cta-anim .cx-star { animation: ctaStar 3.2s ease-in-out infinite; }
.cta-anim .cx-b { animation: ctaBlink 2.6s ease-in-out infinite; }
.cta-anim .cx-b2 { animation-delay: -.9s; } .cta-anim .cx-b3 { animation-delay: -1.7s; }
.cta-anim:hover .cx-tree, .cta-anim.play .cx-tree { transform-origin: 50% 100%; animation: ctaTree .9s ease; }
.cta-anim:hover .cx-star, .cta-anim.play .cx-star { animation: ctaStarSpin .9s cubic-bezier(.34,1.56,.64,1); }
.cta-anim:hover .cx-g2, .cta-anim.play .cx-g2 { transform-origin: 50% 100%; animation: ctaLid .8s cubic-bezier(.34,1.56,.64,1) .08s; }
.cta-anim:hover .cx-g3, .cta-anim.play .cx-g3 { transform-origin: 50% 100%; animation: ctaHop .7s cubic-bezier(.34,1.56,.64,1) .2s; }
.cta-anim:hover .cx-bow, .cta-anim.play .cx-bow { animation: ctaBeat .9s ease .3s; }
.cta-anim:hover .cx-b, .cta-anim.play .cx-b { animation-duration: .5s; }
@keyframes ctaStar { 50% { transform: scale(1.12) rotate(8deg); } }
@keyframes ctaBlink { 50% { opacity: .55; } }
@keyframes ctaTree { 20% { transform: rotate(-3deg); } 45% { transform: rotate(2.5deg); } 70% { transform: rotate(-1.2deg); } }
@keyframes ctaStarSpin { 0% { transform: none; } 60% { transform: scale(1.45) rotate(216deg); } 100% { transform: rotate(360deg); } }
@keyframes ctaLid { 35% { transform: translateY(-14px) rotate(-10deg); } 65% { transform: translateY(1px) rotate(2deg); } }
@keyframes ctaHop { 40% { transform: translateY(-20px) rotate(-14deg) scale(1.15); } 75% { transform: translateY(2px) rotate(4deg); } }
@keyframes ctaBeat { 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.18); } 60% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cta-anim [class*=cx-] { animation: none !important; transform: none !important; } }

/* Hero demo: pixel mouse pointer that clicks a door open */
.demo-cursor {
    position: absolute; left: 0; top: 0; z-index: 30; width: 40px; pointer-events: none;
    opacity: 0; transition: transform 1.25s cubic-bezier(.45,.05,.25,1), opacity .35s ease;
    filter: drop-shadow(2px 3px 0 rgba(0,0,0,.25));
}
.demo-cursor svg { display: block; width: 100%; height: auto; transition: transform .12s ease; transform-origin: 0 0; }
.demo-cursor.on { opacity: 1; }
.demo-cursor.press svg { transform: scale(.82); }
.demo-click {
    position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%;
    border: 3px solid #fff; opacity: 0; transform: scale(.3);
}
.demo-cursor.press .demo-click { animation: demoClick .6s ease-out; }
@keyframes demoClick { 0% { opacity: .95; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@media (min-width: 1024px) { .demo-cursor { width: 46px; } }


/* Hero demo modal: each open door shows one kind of door content */
.dm-demo { max-width: 27rem; }
.dm-demo .dm-body { padding-bottom: 1.6rem; }
.dm-plan {
    display: inline-block;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dm-plan-free { color: #1d5b33; background: #dff1e4; }
.dm-plan-premium { color: #6b4a08; background: linear-gradient(135deg, #f7e2a6, #e8c969); }
.dm-media {
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #1c1917;
    box-shadow: 0 8px 22px -8px rgba(40, 20, 10, .45);
}
img.dm-media { aspect-ratio: 3 / 2; }
.dm-frame { border: 0; }
.dm-coupon {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    border: 2px dashed #d4a843;
    border-radius: 14px;
    background: #fdf6e3;
}
.dm-code { font: 800 1.35rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: #2a1a12; }
.dm-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    font-size: .9rem;
    color: #fff;
    background: #8b1a1a;
    transition: background .2s, transform .2s;
}
.dm-btn:hover { background: #a52525; transform: translateY(-1px); }
.dm-btn-lg { margin-top: 1.1rem; padding: .8rem 1.4rem; font-size: 1rem; }
.dm-rich { margin-top: .9rem; text-align: left; color: #4b3d35; line-height: 1.55; font-size: .95rem; }
.dm-rich h3 { font: 700 1.2rem/1.3 'Fraunces', Georgia, serif; color: #8b1a1a; margin-bottom: .5rem; text-align: center; }
.dm-rich ul { margin: .35rem 0 .7rem; padding-left: 1.2rem; list-style: none; }
.dm-rich li { position: relative; padding: .1rem 0; }
.dm-rich li::before { content: '\2605'; position: absolute; left: -1.15rem; color: #d4a843; font-size: .8rem; top: .25rem; }
.dm-rich strong { color: #2a1a12; }
.dm-question { font: 700 1.15rem/1.4 'Fraunces', Georgia, serif; color: #2a1a12; }
.dm-quiz { margin-top: 1rem; }
.dm-quiz summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    padding: .6rem 1.2rem;
    border-radius: 999px;
    font-weight: 700;
    color: #8b1a1a;
    background: color-mix(in srgb, #8b1a1a 9%, #fff);
    border: 2px dashed color-mix(in srgb, #8b1a1a 35%, #fff);
}
.dm-quiz summary::-webkit-details-marker { display: none; }
.dm-quiz[open] summary { display: none; }
.dm-quiz p {
    padding: .8rem 1rem;
    border-radius: 14px;
    font-weight: 700;
    color: #1d5b33;
    background: #dff1e4;
    animation: dmPop .4s cubic-bezier(.2, 1.3, .4, 1);
}
.dm-yt {
    position: relative;
    display: flex;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .5) 0 1.2px, transparent 1.8px) 0 0 / 22px 22px,
        radial-gradient(120% 90% at 30% 20%, #3b1f4a, #12101c);
    box-shadow: 0 8px 22px -8px rgba(40, 20, 10, .45);
}
.dm-yt-title { position: absolute; left: .9rem; top: .75rem; font-weight: 700; font-size: .9rem; opacity: .9; }
.dm-yt-play {
    width: 4.2rem;
    height: 2.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e62117;
    transition: transform .2s;
}
.dm-yt-play svg { width: 1.6rem; height: 1.6rem; }
.dm-yt:hover .dm-yt-play { transform: scale(1.1); }
.dm-note { margin-top: .4rem; font-size: .75rem; color: #8a7a70; }

/* Homepage: what can go behind a door */
.ct-panel { border-radius: 22px; padding: 1.6rem; }
.ct-free { background: #fff; border: 1px solid #ece6dc; }
.ct-premium {
    color: #fff;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .12) 0 1px, transparent 1.6px) 0 0 / 22px 22px,
        linear-gradient(150deg, #8b1a1a, #5e1111);
    box-shadow: 0 24px 50px -24px rgba(107, 20, 20, .7);
}
.ct-item { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem; border-radius: 14px; transition: background .2s, transform .2s; }
.ct-item:hover { transform: translateX(3px); }
.ct-free .ct-item:hover { background: #faf6ef; }
.ct-premium .ct-item:hover { background: rgba(255, 255, 255, .07); }
.ct-icon {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ct-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ct-free .ct-icon { color: #1d5b33; background: #dff1e4; }
.ct-premium .ct-icon { color: #6b4a08; background: linear-gradient(135deg, #f7e2a6, #e8c969); }
.ct-idea {
    display: inline-block;
    padding: .45rem .95rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    color: #57534e;
    background: #fff;
    border: 1px solid #ece6dc;
    transition: transform .2s, border-color .2s, color .2s;
}
.ct-idea:hover { transform: translateY(-2px) rotate(-1.5deg); border-color: #d4a843; color: #8b1a1a; }
.ct-strip { display: flex; flex-direction: column; gap: .5rem; }
.ct-strip-title { padding: 0 .5rem; }
@media (min-width: 768px) {
    .ct-strip { flex-direction: row; align-items: center; gap: 1.5rem; padding: 1rem 1.6rem; }
    .ct-strip-title { flex: none; width: 13rem; padding: 0; }
}
.ct-soon {
    display: inline-block;
    margin-left: .35rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    vertical-align: .12em;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
}

/* Homepage pricing */
.pr-eyebrow {
    display: inline-block;
    padding: .3rem .9rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b1a1a;
    background: color-mix(in srgb, #8b1a1a 9%, #fff);
}
.pr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 24px;
    background: #fff;
    border: 1px solid #ece6dc;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 32px -18px rgba(28, 25, 23, .18);
    transition: transform .25s, box-shadow .25s;
}
.pr-card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 24px 44px -20px rgba(28, 25, 23, .28); }
.pr-featured {
    color: #fff;
    border: 0;
    background:
        radial-gradient(circle, rgba(255, 255, 255, .1) 0 1px, transparent 1.6px) 0 0 / 22px 22px,
        linear-gradient(155deg, #9b1f1f, #5e1111);
    box-shadow: 0 30px 60px -24px rgba(107, 20, 20, .65), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.pr-featured:hover { box-shadow: 0 36px 70px -24px rgba(107, 20, 20, .75), inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (min-width: 1024px) { .pr-featured { margin: -1rem 0; padding-top: 3rem; padding-bottom: 3rem; } }
.pr-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    color: #3d2a05;
    background: linear-gradient(135deg, #f3d77f, #d4a843);
    box-shadow: 0 6px 16px -6px rgba(120, 80, 10, .6);
}
.pr-price {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: 1.4rem 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0ebe3;
}
.pr-price-dark { border-color: rgba(255, 255, 255, .15); }
.pr-amount { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.pr-check {
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b1a1a;
    background: color-mix(in srgb, #8b1a1a 10%, #fff);
}
.pr-check svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pr-check-dark { color: #3d2a05; background: linear-gradient(135deg, #f3d77f, #d4a843); }
.pr-cta {
    display: block;
    margin-top: 2rem;
    padding: .85rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    transition: background .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.pr-cta:hover { transform: translateY(-1px); }
.pr-cta-ghost { color: #1c1917; border: 1.5px solid #d6d0c6; }
.pr-cta-ghost:hover { border-color: #1c1917; }
.pr-cta-dark { color: #fff; background: #1c1917; }
.pr-cta-dark:hover { background: #292524; }
.pr-cta-gold { color: #2a1a05; background: linear-gradient(90deg, #d4a843, #e8c969); box-shadow: 0 10px 24px -10px rgba(212, 168, 67, .7); }
.pr-cta-gold:hover { box-shadow: 0 14px 30px -10px rgba(212, 168, 67, .85); }

/* Create wizard */
.wz-step {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .9rem .35rem .35rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    color: #a8a29e;
    transition: background .2s, color .2s;
}
.wz-step:not(:disabled) { cursor: pointer; color: #1c1917; }
.wz-step:not(:disabled):not(.is-active):hover { background: #f0ebe3; }
.wz-step:disabled { cursor: default; }
.wz-step-num {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: #a8a29e;
    background: #fff;
    border: 2px solid #e7e5e4;
    transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.wz-step:not(:disabled) .wz-step-num { color: #8b1a1a; border-color: #8b1a1a; }
.wz-step.is-active .wz-step-num { color: #fff; background: #8b1a1a; border-color: #8b1a1a; box-shadow: 0 0 0 5px rgba(139, 26, 26, .12); }
.wz-ok { display: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wz-step.is-done .wz-step-num { color: #fff; background: #8b1a1a; }
.wz-step.is-done .wz-n { display: none; }
.wz-step.is-done .wz-ok { display: block; }
.wz-step-line { position: relative; width: 2.5rem; height: 2px; border-radius: 2px; background: #e7e5e4; overflow: hidden; }
.wz-step-line span { position: absolute; inset: 0 auto 0 0; width: 0; background: #8b1a1a; transition: width .4s; }
@media (min-width: 640px) { .wz-step-line { width: 4rem; } }
@media (max-width: 420px) { .wz-step-label { font-size: .82rem; } .wz-step { gap: .45rem; padding-right: .5rem; } }

.wz-preview {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 22px;
    overflow: hidden;
    background: #0c1530;
    box-shadow: 0 30px 60px -30px rgba(28, 25, 23, .55), 0 0 0 1px rgba(28, 25, 23, .06);
}
.wz-preview-shade { background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45)); }
.wz-preview-tag {
    position: absolute;
    top: .9rem;
    left: .9rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
}
.wz-live-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.wz-shadow { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.wz-mini-doors { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; width: min(100%, 22rem); }
.wz-mini-doors span {
    aspect-ratio: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(3px);
}
@media (max-width: 420px) { .wz-mini-doors { gap: .3rem; } .wz-mini-doors span { font-size: .65rem; border-radius: 6px; } }

.wz-card {
    padding: 1.75rem;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ece6dc;
    box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 18px 40px -24px rgba(28, 25, 23, .25);
}
@media (min-width: 640px) { .wz-card { padding: 2.25rem; } }
.wz-label { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 600; color: #1c1917; }
.wz-input {
    width: 100%;
    padding: .85rem 1rem;
    border-radius: 12px;
    border: 1.5px solid #e7e5e4;
    background: #fafaf8;
    font-size: 1rem;
    outline: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.wz-input:hover { border-color: #d6d3d1; }
.wz-input:focus { border-color: #8b1a1a; background: #fff; box-shadow: 0 0 0 4px rgba(139, 26, 26, .1); }
.wz-premium {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    color: #6b4a08;
    background: linear-gradient(135deg, #f7e2a6, #e8c969);
}
.wz-date {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem .9rem;
    border-radius: 12px;
    border: 1.5px dashed #e7e5e4;
    background: #fafaf8;
}
.wz-date-icon { flex: none; width: 1.3rem; height: 1.3rem; color: #a8a29e; }
.wz-date input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; font-weight: 600; color: #57534e; cursor: not-allowed; }
.wz-date:has(input:enabled) { border-style: solid; background: #fff; }
.wz-date:has(input:enabled):focus-within { border-color: #8B1A1A; }
.wz-date input:enabled { color: #1c1917; cursor: pointer; outline: none; }
.wz-create {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #a52525, #6b1414);
    box-shadow: 0 14px 30px -14px rgba(107, 20, 20, .8);
    transition: transform .2s, box-shadow .2s;
}
.wz-create:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(107, 20, 20, .9); }
.wz-create svg { transition: transform .2s; }
.wz-create:hover svg { transform: translateX(3px); }
@media (max-width: 480px) { .wz-date { padding: .6rem .7rem; gap: .5rem; } .wz-date-icon { display: none; } .wz-date input { font-size: .9rem; } }
@media (max-width: 639px) {
    .wz-preview { aspect-ratio: auto; }
    .wz-mini-doors { grid-template-columns: repeat(8, 1fr); }
}

/* Signup */
.su-ready {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .9rem .4rem .45rem;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    color: #14532d;
    background: #dcfce7;
}
.su-ready svg { width: 1.35rem; height: 1.35rem; padding: .22rem; border-radius: 50%; background: #16a34a; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.su-icon {
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #a52525, #6b1414);
    box-shadow: 0 10px 22px -10px rgba(107, 20, 20, .7);
}
.su-icon svg { width: 1.6rem; height: 1.6rem; }

/* Login */
.li-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.25rem;
    border-radius: 28px;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0, rgba(232, 201, 105, .22), transparent 45%),
        radial-gradient(circle, rgba(255, 255, 255, .1) 0 1px, transparent 1.6px) 0 0 / 22px 22px,
        linear-gradient(155deg, #9b1f1f, #5e1111);
    box-shadow: 0 30px 60px -24px rgba(107, 20, 20, .65), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
@media (min-width: 640px) { .li-promo { padding: 2.75rem; } }
.li-promo-badge {
    padding: .35rem 1rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3d2a05;
    background: linear-gradient(135deg, #f3d77f, #d4a843);
    box-shadow: 0 6px 16px -6px rgba(120, 80, 10, .6);
}
.li-promo-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    color: #f3d77f;
    background: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.li-promo-icon svg { width: 1.3rem; height: 1.3rem; }
.li-promo-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.3rem;
    border-radius: 12px;
    font-weight: 700;
    color: #2a1a05;
    background: linear-gradient(90deg, #d4a843, #e8c969);
    box-shadow: 0 10px 24px -10px rgba(212, 168, 67, .7);
    transition: box-shadow .2s, transform .2s;
}
.li-promo-link:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(212, 168, 67, .85); }

/* Build overlay tree */
.bt-tree { width: 6.5rem; height: auto; margin: 0 auto 1.5rem; overflow: visible; }
.bt-tree .bt-layer { transform-box: fill-box; transform-origin: 50% 100%; animation: bt-grow .6s cubic-bezier(.2, .9, .3, 1.3) both; }
.bt-tree .bt-l2 { animation-delay: .15s; }
.bt-tree .bt-l3 { animation-delay: .3s; }
.bt-tree .bt-star { transform-box: fill-box; transform-origin: 50% 50%; animation: bt-pop .5s .55s cubic-bezier(.2, .9, .3, 1.4) both, bt-spin 3s 1.1s ease-in-out infinite; }
.bt-tree .bt-glow { transform-box: fill-box; transform-origin: 50% 50%; animation: bt-pulse 1.6s 1s ease-in-out infinite; }
.bt-tree .bt-ball { transform-box: fill-box; transform-origin: 50% 50%; animation: bt-pop .35s both, bt-twinkle 1.4s ease-in-out infinite; }
@keyframes bt-grow { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bt-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes bt-spin { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg) scale(1.08); } }
@keyframes bt-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: .8; transform: scale(1.15); } }
@keyframes bt-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bt-tree * { animation: none !important; } }

/* 404 */
.e4-scene { width: 100%; height: auto; overflow: visible; }
.e4-santa { transform-box: fill-box; transform-origin: 60% 100%; animation: e4-search 3.2s ease-in-out infinite; }
.e4-arm { transform-box: fill-box; transform-origin: 85% 10%; animation: e4-sweep 3.2s ease-in-out infinite; }
.e4-glass-glow { animation: e4-pulse 1.6s ease-in-out infinite; }
.e4-q { transform-box: fill-box; transform-origin: 50% 100%; animation: e4-bob 2.4s ease-in-out infinite; }
.e4-lights circle { animation: e4-twinkle 1.4s ease-in-out infinite; }
.e4-lights circle:nth-child(2n) { animation-delay: .7s; }
.e4-flakes circle { animation: e4-fall 7s linear infinite; }
.e4-flakes circle:nth-child(3n) { animation-duration: 9s; animation-delay: -3s; }
.e4-flakes circle:nth-child(3n+1) { animation-delay: -5s; }
@keyframes e4-search { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes e4-sweep { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes e4-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes e4-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes e4-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes e4-fall { from { transform: translateY(-40px); opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(300px); opacity: 0; } }
.e4-eyebrow { display: inline-block; padding: .3rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b1a1a; background: #f6e7e3; }
@media (prefers-reduced-motion: reduce) { .e4-scene * { animation: none !important; } }
.e4-cta { color: #fff; background: linear-gradient(135deg, #a52525, #6b1414); box-shadow: 0 12px 26px -12px rgba(107, 20, 20, .8); transition: transform .15s, box-shadow .15s; }
.e4-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(107, 20, 20, .9); }

/* Wizard: large design viewer */
.wz-lb { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wz-lb[hidden] { display: none; }
.wz-lb-open, .wz-lb-open body { overflow: hidden; }
.wz-lb-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, .82); backdrop-filter: blur(4px); animation: wzLbFade .2s ease; }
.wz-lb-panel { position: relative; width: min(1100px, 100%, calc((100vh - 10rem) * 1.5)); display: flex; flex-direction: column; gap: .9rem; animation: wzLbIn .25s cubic-bezier(.2, .8, .2, 1); }
.wz-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.wz-lb-frame { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: #292524; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); }
.wz-lb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wz-lb-picked { position: absolute; top: .9rem; right: .9rem; width: 2.1rem; height: 2.1rem; border-radius: 999px; background: #8B1A1A; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.wz-lb-picked[hidden] { display: none; }
.wz-lb-picked svg, .wz-lb-close svg, .wz-lb-arrow svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wz-lb-picked svg { width: 1.1rem; height: 1.1rem; color: #fff; }
.wz-lb-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 3rem; height: 3rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1c1917; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .15s, background .15s; }
.wz-lb-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.wz-lb-arrow svg { width: 1.35rem; height: 1.35rem; }
.wz-lb-arrow.is-prev { left: .9rem; }
.wz-lb-arrow.is-next { right: .9rem; }
.wz-lb-close { position: absolute; top: -.4rem; right: -.4rem; z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 999px; background: #fff; color: #1c1917; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.wz-lb-close svg { width: 1.1rem; height: 1.1rem; }
.wz-lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border-radius: 16px; padding: .85rem .85rem .85rem 1.25rem; }
.wz-lb-name { font-weight: 700; color: #1c1917; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-lb-meta { font-size: .8rem; color: #78716c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-lb-go { flex: none; background: #8B1A1A; color: #fff; font-weight: 700; padding: .8rem 2rem; border-radius: 12px; transition: background .15s; }
.wz-lb-go:hover { background: #A52525; }
@keyframes wzLbFade { from { opacity: 0; } }
@keyframes wzLbIn { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 640px) {
    .wz-lb { padding: .6rem; }
    .wz-lb-frame { border-radius: 12px; }
    .wz-lb-arrow { width: 2.4rem; height: 2.4rem; }
    .wz-lb-arrow.is-prev { left: .45rem; }
    .wz-lb-arrow.is-next { right: .45rem; }
    .wz-lb-close { top: -.3rem; right: -.2rem; }
    .wz-lb-bar { flex-direction: column; align-items: stretch; text-align: center; padding: .9rem; }
    .wz-lb-go { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wz-lb-backdrop, .wz-lb-panel { animation: none; } }
.wz-lb-go:focus:not(:focus-visible) { outline: none; }

/* Dashboard */
.db-plan { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.db-plan-free { color: #78716c; background: #f0ece6; }
.db-plan-premium { color: #3d2a05; background: linear-gradient(135deg, #f3d77f, #d4a843); box-shadow: 0 6px 16px -8px rgba(120, 80, 10, .6); }
.db-plan-enterprise { color: #f3d77f; background: linear-gradient(135deg, #292524, #1c1917); box-shadow: 0 6px 16px -8px rgba(28, 25, 23, .7); }
.db-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .95rem; border-radius: 11px; font-size: .9rem; font-weight: 600; transition: background .2s, color .2s, box-shadow .2s, transform .2s; }
.db-btn-ghost { color: #57534e; }
.db-btn-ghost:hover { color: #1c1917; background: #f0ece6; }
.db-btn-primary { color: #fff; background: linear-gradient(135deg, #a52525, #6b1414); box-shadow: 0 8px 18px -10px rgba(107, 20, 20, .8); }
.db-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -10px rgba(107, 20, 20, .9); }
.db-btn-soft { color: #44403c; background: #f5f3ef; box-shadow: inset 0 0 0 1px #ece6dc; }
.db-btn-soft:hover { background: #fff; box-shadow: inset 0 0 0 1px #d6cec2, 0 6px 14px -10px rgba(28, 25, 23, .3); }
.db-btn-icon { padding: .6rem; color: #78716c; }
.db-btn-icon:hover { color: #1c1917; background: #f5f3ef; }
.db-btn-icon svg { width: 1.1rem; height: 1.1rem; }
.db-btn-danger { color: #a8a29e; }
.db-card-body { display: flex; flex-direction: column; flex: 1; }
.db-actions { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.25rem; }
.db-actions .db-btn-icon + .db-btn-icon { margin-left: -.25rem; }
@media (max-width: 480px) { .db-actions .db-btn:not(.db-btn-icon) { padding: .55rem .7rem; font-size: .85rem; } .db-actions .db-btn:not(.db-btn-icon) svg { display: none; } }
.db-btn-danger:hover { color: #dc2626; background: #fef2f2; }
.db-btn-glass { color: #fff; padding: .7rem 1.3rem; border-radius: 12px; font-weight: 700; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.db-btn-glass:hover { background: rgba(255, 255, 255, .18); }
.db-stat { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 20px; background: #fff; border: 1px solid #ece6dc; box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 32px -22px rgba(28, 25, 23, .25); }
.db-stat-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 14px; color: #8b1a1a; background: #f6e7e3; }
.db-stat-icon svg { width: 1.35rem; height: 1.35rem; }
.db-stat-num { font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #1c1917; }
.db-stat-label { font-size: .85rem; color: #78716c; margin-top: .1rem; }
.db-stat-locked { border-style: dashed; border-color: #e0d4c3; background: #fdfbf7; transition: border-color .2s, background .2s; }
.db-stat-locked .db-stat-icon { color: #8a6514; background: #f8edd0; }
.db-stat-locked:hover { border-color: #d4a843; background: #fff; }
.db-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid #ece6dc; box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 12px 32px -18px rgba(28, 25, 23, .18); transition: transform .25s, box-shadow .25s; }
.db-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 24px 44px -20px rgba(28, 25, 23, .28); }
.db-card-media { position: relative; display: block; height: 13.5rem; overflow: hidden; color: #fff; background: linear-gradient(155deg, #9b1f1f, #3b0d0d); }
.db-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.db-card:hover .db-card-media img { transform: scale(1.04); }
.db-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .7) 100%); }
.db-card-title { position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1.1rem; display: flex; flex-direction: column; gap: .3rem; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.db-card-meta { font-size: .82rem; font-weight: 500; color: rgba(255, 255, 255, .85); }
.db-status { align-self: flex-start; margin-top: .25rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #fff; background: rgba(28, 25, 23, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.db-status b { font-weight: 400; opacity: .6; }
.an-key { width: .7rem; height: .7rem; border-radius: .2rem; display: inline-block; }
.an-key-v, .an-bar-v { background: #8B1A1A; }
.an-key-o, .an-bar-o { background: #f3d6cf; }
.an-chart { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 180px; padding-top: 1.1rem; border-bottom: 1px solid #e7e5e4; background: repeating-linear-gradient(to top, transparent 0 44px, #f5f5f4 44px 45px); }
.an-max { position: absolute; top: 0; left: 0; font-size: 11px; color: #a8a29e; }
.an-col { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.an-col:hover { background: rgba(139, 26, 26, .05); }
.an-bar { position: absolute; bottom: 0; border-radius: 3px 3px 0 0; min-height: 0; }
.an-bar-o { width: 100%; }
.an-bar-v { width: 55%; }
.an-rank { display: flex; align-items: center; gap: .75rem; }
.an-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .55rem; background: #8B1A1A; color: #fff; font-weight: 700; font-size: .85rem; }
.an-num-sm { width: 1.6rem; height: 1.6rem; font-size: .75rem; border-radius: .45rem; }
.an-track { height: .4rem; border-radius: 999px; background: #f5f5f4; margin-top: .35rem; overflow: hidden; }
.an-track span { display: block; height: 100%; border-radius: inherit; background: #8B1A1A; }
.an-table { width: 100%; font-size: .85rem; border-collapse: collapse; }
.an-table th { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #a8a29e; padding: 0 0 .5rem; text-align: left; }
.an-table th.text-right { text-align: right; }
.an-table td { padding: .5rem 0; border-top: 1px solid #f5f5f4; vertical-align: middle; }
.an-table td:first-child { display: flex; align-items: center; gap: .6rem; min-width: 0; max-width: 18rem; line-height: 1.25; color: #1c1917; font-weight: 500; }
.an-table td small { color: #a8a29e; font-size: .72rem; font-weight: 400; }
.an-table td + td { padding-left: .75rem; white-space: nowrap; }
.db-fill { margin: 0 0 1.1rem; }
.db-fill-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-size: .85rem; font-weight: 600; color: #44403c; margin-bottom: .4rem; }
.db-fill-label { display: inline-flex; align-items: center; gap: .35rem; }
.db-fill.is-done .db-fill-label { color: #15803d; }
.db-fill-pct { font-size: .78rem; font-weight: 700; color: #a8a29e; font-variant-numeric: tabular-nums; }
.db-fill-bar { height: .5rem; border-radius: 999px; background: #f5f5f4; overflow: hidden; }
.db-fill-bar span { display: block; height: 100%; border-radius: inherit; background: #8B1A1A; transition: width .4s ease; }
.db-fill.is-done .db-fill-bar span { background: #22c55e; }
.db-fill-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .55rem; font-size: .8rem; color: #78716c; }
.db-fill-empty a:not(.db-fill-cta) { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: .45rem; background: #fef2f2; color: #8B1A1A; font-weight: 700; font-size: .75rem; text-decoration: none; }
.db-fill-empty a:not(.db-fill-cta):hover { background: #fee2e2; }
.db-fill-cta { margin-left: auto; font-weight: 700; color: #8B1A1A; text-decoration: none; white-space: nowrap; }
.db-fill-cta:hover { text-decoration: underline; }
.db-status i { width: .45rem; height: .45rem; border-radius: 50%; background: #a8a29e; }
.db-status.is-public i { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.db-link { display: flex; align-items: center; gap: .6rem; padding: .35rem .35rem .35rem .85rem; border-radius: 14px; background: #faf8f5; border: 1px solid #ece6dc; }
.db-link-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; color: #44403c; }
.db-link-url:hover { color: #8b1a1a; }
.db-copy { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .75rem; border-radius: 10px; font-size: .8rem; font-weight: 600; color: #8b1a1a; background: #fff; box-shadow: inset 0 0 0 1px #ece6dc; transition: background .2s, color .2s; }
.db-copy:hover { background: #f6e7e3; }
.db-copy.is-done { color: #15803d; background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; }
@media (max-width: 639px) {
    .db-stat { flex-direction: column; align-items: flex-start; gap: .25rem; padding: .85rem 1rem; border-radius: 16px; }
    .db-stat-icon { display: none; }
    .db-stat-num { font-size: 1.4rem; }
    .db-stat-label { font-size: .75rem; }
    .db-stat-locked .font-semibold { font-size: .8rem; line-height: 1.3; }
}

/* Examples gallery */
.ex-stat { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; background: #fff; color: #57534e; box-shadow: 0 0 0 1px #ece7e1; }
.ex-stat strong { color: #1c1917; font-weight: 700; }
.ex-stat svg { color: #a52525; }
/* 2px padding so the scroll box does not clip the chips' 1px ring; the negative margin keeps alignment */
.ex-filters { display: flex; gap: .5rem; margin: 2.5rem -2px 0; overflow-x: auto; padding: 2px 2px calc(.25rem + 2px); scrollbar-width: none; }
.ex-filters::-webkit-scrollbar { display: none; }
.bg-filters { margin: 0 -2px 1rem; }
.ex-chip { flex: none; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: 999px; background: #fff; color: #44403c; font-weight: 600; font-size: .9rem; box-shadow: 0 0 0 1px #e7e2dc; transition: background .15s, color .15s, box-shadow .15s; }
.ex-chip span { font-size: .75rem; font-weight: 700; color: #a8a29e; }
.ex-chip:hover { box-shadow: 0 0 0 1px #c9c1b8; }
.ex-chip.is-active { background: #1c1917; color: #fff; box-shadow: none; }
.ex-chip.is-active span { color: rgba(255,255,255,.6); }
.ex-card { display: flex; flex-direction: column; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px #efeae4, 0 18px 40px -28px rgba(28,25,23,.45); transition: transform .2s, box-shadow .2s; }
.ex-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #e4ddd5, 0 26px 50px -26px rgba(28,25,23,.5); }
.ex-card[hidden] { display: none; }
.ex-card-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; background: #0c1530; }
.ex-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.ex-card:hover .ex-card-bg { transform: scale(1.05); }
.ex-card-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(8,10,24,.25), rgba(8,10,24,.65)); }
.ex-card-tag { position: absolute; top: .8rem; left: .8rem; padding: .22rem .6rem; border-radius: 999px; background: rgba(245,196,81,.95); color: #3a2400; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ex-card-logo { position: relative; max-width: 66%; max-height: 34%; object-fit: contain; filter: drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.ex-card-brand { position: relative; color: #fff; font-size: 1.9rem; font-weight: 700; text-shadow: 0 4px 18px rgba(0,0,0,.5); }
.ex-card-doors { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: flex; gap: .3rem; }
.ex-card-doors i { width: 1.05rem; height: 1.35rem; border-radius: 3px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); backdrop-filter: blur(4px); }
.ex-card-doors i:nth-child(3) { background: rgba(245,196,81,.85); box-shadow: none; }
.ex-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.ex-card-industry { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #a52525; }
.ex-type { padding: .2rem .55rem; border-radius: 6px; background: #f5f2ee; color: #57534e; font-size: .75rem; font-weight: 600; }
.ex-type-more { background: transparent; color: #a8a29e; }
.ex-card-link { margin-top: auto; padding-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #a52525; }
.ex-card-link:hover { gap: .6rem; }
.ex-tip { padding: 1.6rem; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #efeae4; }
.ex-tip-num { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: #f6e7e3; color: #8b1a1a; font-weight: 700; font-size: 1.15rem; }

/* Templates gallery */
.tpl-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 16px; background: #fbf4f1; box-shadow: 0 0 0 1px #f0e1dc; color: #57534e; font-size: .95rem; line-height: 1.55; }
.tpl-panel[hidden] { display: none; }
.tpl-panel p { flex: 1 1 26rem; }
.tpl-panel a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #a52525; }
.tpl-panel a:hover { gap: .6rem; }
.tpl-card { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px #efeae4, 0 14px 30px -24px rgba(28,25,23,.45); transition: transform .2s, box-shadow .2s; }
.tpl-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #e4ddd5, 0 22px 40px -24px rgba(28,25,23,.5); }
.tpl-card[hidden] { display: none; }
.tpl-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #57534e, #292524); }
.tpl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tpl-card:hover .tpl-card-media img { transform: scale(1.05); }
.tpl-card-use { position: absolute; left: 50%; bottom: .7rem; transform: translate(-50%, .5rem); padding: .4rem .85rem; border-radius: 999px; background: #fff; color: #1c1917; font-size: .78rem; font-weight: 700; white-space: nowrap; opacity: 0; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: opacity .2s, transform .2s; }
.tpl-card:hover .tpl-card-use, .tpl-card:focus-visible .tpl-card-use { opacity: 1; transform: translate(-50%, 0); }
.tpl-card-body { display: flex; flex-direction: column; gap: .4rem; padding: .75rem .9rem .9rem; }
.tpl-card-name { font-weight: 600; font-size: .9rem; color: #1c1917; line-height: 1.3; }
.tpl-card-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tpl-card-tags i { font-style: normal; padding: .12rem .45rem; border-radius: 5px; background: #f5f2ee; color: #78716c; font-size: .7rem; font-weight: 600; }
.tpl-checks { display: grid; gap: .85rem; }
.tpl-checks li { display: flex; gap: .7rem; align-items: flex-start; color: #44403c; line-height: 1.5; }
.tpl-checks svg { flex: none; margin-top: .1rem; color: #a52525; }
.tpl-examples { display: flex; flex-direction: column; padding: 1.6rem; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #efeae4; transition: box-shadow .2s; }
.tpl-examples:hover { box-shadow: 0 0 0 1px #e4ddd5, 0 22px 40px -26px rgba(28,25,23,.5); }
.tpl-examples-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.tpl-examples-thumbs > span { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #0c1530; }
.tpl-examples-thumbs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.tpl-examples-thumbs .tpl-examples-logo { position: relative; inset: auto; width: 78%; height: auto; max-height: 40%; object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.tpl-theme { position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #292524; }
.tpl-theme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tpl-theme:hover img { transform: scale(1.06); }
.tpl-theme-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,10,9,.85), rgba(12,10,9,.05) 65%); }
.tpl-theme-label { position: relative; display: flex; flex-direction: column; padding: .85rem; color: #fff; font-weight: 700; font-size: .88rem; line-height: 1.25; }
.tpl-theme-label small { margin-top: .2rem; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.7); }
.tpl-faq { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #efeae4; }
.tpl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-weight: 600; color: #1c1917; }
.tpl-faq summary::-webkit-details-marker { display: none; }
.tpl-faq summary::after { content: "+"; flex: none; font-size: 1.25rem; line-height: 1; color: #a52525; }
.tpl-faq[open] summary::after { content: "\2212"; }
.tpl-faq p { padding: 0 1.25rem 1.1rem; color: #57534e; line-height: 1.6; }

/* Use-case pages */
.uc-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 999px; background: #8B1A1A; color: #fff; font-weight: 700; box-shadow: 0 14px 30px -16px rgba(139,26,26,.8); transition: background .2s, gap .2s; }
.uc-cta:hover { background: #6B1414; gap: .7rem; }
.uc-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; }
.uc-head > div { max-width: 46rem; }
.uc-more { font-weight: 700; color: #a52525; white-space: nowrap; }
.uc-more:hover { color: #6B1414; }
.uc-idea { display: flex; gap: 1rem; align-items: flex-start; padding: 1.15rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px #efeae4; }
.uc-idea-door { flex: none; display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 10px; background: linear-gradient(145deg, #a52525, #6B1414); color: #fff; font-weight: 700; font-size: 1.1rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }

/* ---------------------------------------------------------------------------
   Blog (articles/ + blog_post.html). Statistics pattern from signature-generator:
   footnote numbers in the text, source register without links at the end.
   --------------------------------------------------------------------------- */
.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 { 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 .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 .src:hover, .blog-article .src:focus-visible { border-color: #d6b9b9; box-shadow: 0 6px 18px -10px rgba(107,20,20,.35); outline: none; }
.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; }
.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; }
button.tag-chip { cursor: pointer; font-size: .85rem; padding: .35rem .9rem; }
button.tag-chip.is-on { background: #6B1414; border-color: #6B1414; color: #fff; }

.author-box { display: flex; gap: 1rem; align-items: flex-start; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid #e7e5e4; }
.author-box 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; }
.author-card img { width: 72px; height: 72px; margin-bottom: .9rem; border-radius: 9999px; object-fit: cover; }
.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; }

/* Blog pictures: flat illustrations on a tinted, dotted ground (partials/blog_thumb.html) */
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: radial-gradient(rgba(255,255,255,.6) 1.4px, transparent 1.6px) 0 0 / 16px 16px, var(--tone); }
.thumb.tone-rose { --tone: #f6dcdc; }
.thumb.tone-mint { --tone: #dcebdd; }
.thumb.tone-amber { --tone: #f8ebc8; }
.thumb.tone-sky { --tone: #dfe6f2; }
.thumb.tone-cream { --tone: #f3eadb; }
.thumb-deco { position: absolute; display: block; }
.thumb-deco svg { display: block; width: 100%; height: auto; fill: #fff; stroke: #fff; opacity: .85; }
.thumb-motif { position: absolute; inset: 9% 14% 5%; transform: rotate(var(--tilt, 0deg)); transition: transform .2s; }
.thumb-motif .il { width: 100%; height: 100%; }
a:hover .thumb-motif { transform: rotate(0deg) scale(1.04); }
.il .f-shadow { fill: rgba(59,29,20,.1); }
.il .f-white { fill: #fff; }
.uc-snow {
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.55), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(255,255,255,.4), transparent),
        radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.5), transparent);
    background-size: 600px 600px, 500px 500px, 400px 400px, 320px 320px, 250px 250px;
    animation: ucSnow 22s linear infinite; opacity: .5;
}
@keyframes ucSnow { to { background-position: 0 600px, 0 500px, 0 400px, 0 320px, 0 250px; } }
@media (prefers-reduced-motion: reduce) { .uc-snow { animation: none; } }
.uc-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); color: rgba(255,255,255,.9); font-size: .875rem; font-weight: 500; }
.uc-chip strong { color: #fff; font-weight: 800; }
.uc-art { position: relative; }
.uc-art::before { content: ""; position: absolute; inset: 6% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,244,224,.22), transparent); }
.uc-art .il { position: relative; width: 100%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.uc-benefit { padding: 1.75rem; border-radius: 20px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 0 0 1px #efeae4; transition: transform .25s, box-shadow .25s; }
.uc-benefit:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(59,29,20,.35), 0 0 0 1px #efeae4; }
.uc-benefit .il { width: 100%; height: 100%; }
.uc-idea2 { position: relative; padding: 1.35rem 1.4rem 1.5rem; border-radius: 18px; background: #fffaf2; box-shadow: 0 16px 34px -22px rgba(0,0,0,.6); transition: transform .25s; }
.uc-idea2:hover { transform: translateY(-4px) rotate(-.4deg); }
.uc-idea2-ic { flex: none; width: 46px; height: 46px; padding: 5px; border-radius: 12px; background: #f6ecdc; }
.uc-idea2-ic .il { width: 100%; height: 100%; }
.uc-idea2-type { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b1a1a; line-height: 1.25; }
.uc-idea2-day { margin-left: auto; flex: none; display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: linear-gradient(145deg, #b3322a, #7d1a14); color: #fff; font-weight: 700; font-size: 1.15rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2), 0 6px 14px -8px rgba(125,26,20,.9); }
.uc-other { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #efeae4; transition: transform .25s, box-shadow .25s; }
.uc-other:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(59,29,20,.35), 0 0 0 1px #efeae4; }
.uc-other-art { display: block; padding: 1rem 1.25rem .5rem; background: linear-gradient(180deg, #7d1a14, #5a1410); }
.uc-other-art .il { width: 100%; height: auto; }
.uc-other-label { display: block; padding: 1rem 1.25rem 1.2rem; font-weight: 700; color: #1c1917; line-height: 1.35; }
.uc-other:hover .uc-other-label { color: #8b1a1a; }

/* Use-case mega menu (desktop) */
.ucnav-btn { display: inline-flex; align-items: center; gap: .3rem; height: 4rem; padding: 0 .25rem; font-size: .875rem; font-weight: 500; color: rgba(255,255,255,.85); transition: color .15s; }
.ucnav-btn svg { transition: transform .2s; }
.ucnav:hover .ucnav-btn, .ucnav.open .ucnav-btn { color: #fff; }
.ucnav:hover .ucnav-btn svg, .ucnav.open .ucnav-btn svg { transform: rotate(180deg); }
.ucnav-panel { position: absolute; left: 0; right: 0; top: 100%; padding-top: .25rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; }
.ucnav:hover .ucnav-panel, .ucnav.open .ucnav-panel, .ucnav:has(:focus-visible) .ucnav-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.ucnav-card { background: #fff; border-radius: 22px; padding: 1.1rem; box-shadow: 0 30px 60px -24px rgba(40,12,8,.55), 0 0 0 1px rgba(0,0,0,.04); }
.ucnav-tile { display: flex; flex-direction: column; border-radius: 16px; padding: .5rem .5rem .8rem; transition: background .15s, transform .2s; }
.ucnav-tile:hover, .ucnav-tile:focus-visible { background: #f7f3ee; transform: translateY(-2px); }
.ucnav-art { display: block; border-radius: 12px; padding: .55rem .7rem .2rem; background: linear-gradient(180deg, #7d1a14, #5a1410); margin-bottom: .7rem; }
.ucnav-art .il { width: 100%; height: auto; display: block; }
.ucnav-label { display: block; font-weight: 700; color: #1c1917; font-size: .95rem; line-height: 1.3; padding: 0 .25rem; }
.ucnav-tile:hover .ucnav-label { color: #8b1a1a; }
.ucnav-blurb { display: block; font-size: .8rem; color: #78716c; line-height: 1.4; margin-top: .2rem; padding: 0 .25rem; }
.ucnav-foot { display: flex; justify-content: flex-end; gap: 1.5rem; border-top: 1px solid #efeae4; margin-top: .9rem; padding: .85rem .5rem 0; font-size: .85rem; font-weight: 600; }
.ucnav-foot a { color: #8b1a1a; }
.ucnav-foot a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .ucnav-panel, .ucnav-tile { transition: none; transform: none; } }

/* Footer payment marks */
.pay-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pay-icons li { width: 3rem; height: 1.85rem; background: #fff; border-radius: .375rem; display: flex; align-items: center; justify-content: center; padding: .2rem .3rem; }
.pay-icons svg { width: 100%; height: 100%; display: block; }

/* Listicle with playable songs (articles/posts/beliebteste_weihnachtslieder.py).
   .yt is a click-to-load facade: nothing is requested from YouTube until the
   reader presses play, then a youtube-nocookie iframe replaces the button. */
.blog-article .song-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.blog-article .song-facts span { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .65rem; border-radius: 999px; background: #f5f3ef; border: 1px solid #e7e5e4; font-size: .8rem; font-weight: 600; line-height: 1.5; color: #57534e; }
.blog-article .song-facts span.hot { background: #fdf3dc; border-color: #f0dca6; color: #6B1414; }
.blog-article .yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; margin: 1.1rem 0 .4rem; padding: 0; overflow: hidden; border: 0; border-radius: 1rem; cursor: pointer; text-align: left; color: #fff;
  background: radial-gradient(rgba(255,255,255,.09) 1.3px, transparent 1.5px) 0 0 / 18px 18px, linear-gradient(135deg, #6B1414 0%, #8B1A1A 55%, #a8402a 100%); box-shadow: 0 18px 40px -26px rgba(59,29,20,.6); }
.blog-article .yt { container-type: inline-size; }
.blog-article .yt-bg { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; pointer-events: none; transform: rotate(-4deg) scale(1.12); }
.blog-article .yt-bg span { display: block; white-space: nowrap; font: 800 6.4cqw/1.02 'Inter', system-ui, sans-serif; text-transform: uppercase; letter-spacing: -.02em; color: rgba(232,201,105,.2); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.blog-article .yt-bg span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(232,201,105,.32); margin-left: -18cqw; }
.blog-article .yt-bg span:nth-child(odd) { margin-left: -4cqw; }
.blog-article .yt-bg i { font-style: normal; display: inline-block; margin: 0 .35em; font-size: .5em; vertical-align: middle; transform: translateY(-.12em); }
.blog-article .yt-bg span:nth-child(1) { opacity: 1; } .blog-article .yt-bg span:nth-child(2) { opacity: .88; } .blog-article .yt-bg span:nth-child(3) { opacity: .76; }
.blog-article .yt-bg span:nth-child(4) { opacity: .64; } .blog-article .yt-bg span:nth-child(5) { opacity: .52; } .blog-article .yt-bg span:nth-child(6) { opacity: .4; }
.blog-article .yt-bg span:nth-child(7) { opacity: .3; } .blog-article .yt-bg span:nth-child(8) { opacity: .2; } .blog-article .yt-bg span:nth-child(9) { opacity: .12; }
.blog-article .yt:hover .yt-bg span:nth-child(odd), .blog-article .yt:focus-visible .yt-bg span:nth-child(odd) { transform: translateX(3cqw); }
.blog-article .yt:hover .yt-bg span:nth-child(even), .blog-article .yt:focus-visible .yt-bg span:nth-child(even) { transform: translateX(-3cqw); }
.blog-article .yt-t, .blog-article .yt-n, .blog-article .yt-notes, .blog-article .yt-play, .blog-article .yt-logo { z-index: 1; }
.blog-article .yt-t { text-shadow: 0 2px 14px rgba(59,12,12,.7); }
@media (prefers-reduced-motion: reduce) { .blog-article .yt-bg span { transition: none; } }
.blog-article .yt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(232,201,105,.35); pointer-events: none; }
.blog-article .yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: linear-gradient(135deg, #D4A843, #E8C969); box-shadow: 0 0 0 10px rgba(232,201,105,.18), 0 12px 30px -8px rgba(0,0,0,.45); display: grid; place-items: center; transition: transform .2s, box-shadow .2s; }
.blog-article .yt-play svg { width: 30px; height: 30px; margin-left: 5px; fill: #3b1d14; }
.blog-article .yt:hover .yt-play, .blog-article .yt:focus-visible .yt-play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(232,201,105,.14), 0 14px 34px -8px rgba(0,0,0,.5); }
.blog-article .yt:focus-visible { outline: 3px solid #D4A843; outline-offset: 3px; }
.blog-article .yt-t { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.05rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
.blog-article .yt-t small { display: block; margin-top: .2rem; font-family: inherit; font-size: .8rem; font-weight: 500; color: rgba(255,255,255,.75); font-family: system-ui, sans-serif; }
.blog-article .yt-n { position: absolute; left: 1.25rem; top: 1rem; font-family: 'Fraunces', Georgia, serif; font-size: 2.6rem; font-weight: 700; line-height: 1; color: #E8C969; opacity: .9; }
.blog-article .yt-notes { position: absolute; right: 1.2rem; top: .9rem; display: flex; gap: .35rem; color: rgba(232,201,105,.75); font-size: 1.25rem; }
.blog-article .yt-notes span { animation: ytNote 2.8s ease-in-out infinite; }
.blog-article .yt-notes span:nth-child(2) { animation-delay: -.9s; } .blog-article .yt-notes span:nth-child(3) { animation-delay: -1.8s; }
@keyframes ytNote { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }
.blog-article .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blog-article .yt.on { cursor: default; }
.blog-article .yt-note { font-size: .78rem; color: #a8a29e; line-height: 1.5; }

/* Editorial promo block for the Christmas song (red and gold like the song landing). */
.blog-article .song-promo { position: relative; clear: both; margin: 2.75rem 0; padding: 2rem 1.5rem 1.75rem; overflow: hidden; border-radius: 1.4rem; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(232,201,105,.22), transparent 55%), linear-gradient(150deg, #8B1A1A 0%, #6B1414 60%, #4f0f0f 100%); box-shadow: 0 30px 60px -34px rgba(59,29,20,.75), inset 0 0 0 1px rgba(232,201,105,.3); }
@media (min-width: 640px) { .blog-article .song-promo { padding: 2.4rem 2.4rem 2.1rem; } }
.blog-article .song-promo .sp-snow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255,255,255,.5) 1.2px, transparent 1.6px) 0 0 / 46px 46px, radial-gradient(rgba(255,255,255,.3) 1px, transparent 1.4px) 23px 17px / 46px 46px; animation: spSnow 14s linear infinite; opacity: .55; }
@keyframes spSnow { to { background-position: 0 460px, 23px 477px; } }
.blog-article .song-promo > *:not(.sp-snow) { position: relative; }
.blog-article .sp-top { display: grid; gap: 1.25rem; align-items: center; }
@media (min-width: 640px) { .blog-article .sp-top { grid-template-columns: minmax(0, 1fr) 11rem; } }
.blog-article .sp-k { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: rgba(232,201,105,.16); border: 1px solid rgba(232,201,105,.45); color: #E8C969; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.blog-article .song-promo .sp-h { margin: .8rem 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: #fff; }
.blog-article .song-promo .sp-h em { font-style: normal; color: #E8C969; }
.blog-article .song-promo .sp-lead { margin-top: .75rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,.86); }
.blog-article .song-promo .sp-art { width: 10rem; justify-self: center; }
.blog-article .song-promo .sp-art .il { width: 100%; height: auto; --il-ink: #2a120c; }
.blog-article .sp-steps { display: grid; gap: .7rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: sp; }
@media (min-width: 640px) { .blog-article .sp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-article .sp-steps li { counter-increment: sp; padding: .9rem 1rem; border-radius: .9rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.82); }
.blog-article .sp-steps li::before { content: counter(sp); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-bottom: .45rem; border-radius: 50%; background: #E8C969; color: #3b1d14; font-weight: 800; font-size: .85rem; }
.blog-article .sp-steps b { display: block; color: #fff; font-weight: 700; }
.blog-article .sp-quotes { display: grid; gap: .7rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .blog-article .sp-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.blog-article .sp-quotes figure { margin: 0; padding: .9rem 1rem; border-radius: .9rem; background: #fff; color: #1c1917; box-shadow: 0 14px 30px -22px rgba(0,0,0,.6); }
.blog-article .sp-quotes .st { color: #D4A843; font-size: .8rem; letter-spacing: .12em; }
.blog-article .sp-quotes blockquote { margin-top: .3rem; font-size: .95rem; line-height: 1.55; }
.blog-article .sp-quotes figcaption { margin-top: .45rem; font-size: .82rem; font-weight: 600; color: #78716c; }
.blog-article .sp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; margin-top: 1.6rem; }
.blog-article .song-promo a.sp-btn { position: relative; display: inline-flex; align-items: center; gap: .5rem; overflow: hidden; padding: .95rem 1.6rem; border-radius: .8rem; background: linear-gradient(90deg, #D4A843, #E8C969); color: #3b1d14; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(232,201,105,.55); transition: transform .2s; }
.blog-article .song-promo a.sp-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); animation: spShine 3.4s ease-in-out infinite; }
@keyframes spShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.blog-article .song-promo a.sp-btn:hover { transform: translateY(-2px) scale(1.02); }
.blog-article .song-promo .sp-small { font-size: .85rem; color: rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .blog-article .song-promo .sp-snow, .blog-article .song-promo a.sp-btn::after, .blog-article .yt-notes span { animation: none; } }
.blog-article .yt-logo { position: absolute; right: 1.25rem; bottom: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem .3rem .45rem; border-radius: 999px; background: rgba(255,255,255,.95); color: #282828; font: 700 .78rem/1 system-ui, -apple-system, sans-serif; letter-spacing: -.01em; box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); }
.blog-article .yt-logo svg { width: 22px; height: 16px; }
@media (max-width: 520px) { .blog-article .yt-logo { top: 1rem; bottom: auto; right: 1rem; } .blog-article .yt-notes { display: none; } }
@media (min-width: 521px) { .blog-article .yt-t { right: 8.5rem; } }

/* Idea articles: illustration per idea, real-product cards, cost estimate (articles/build.py idea_art, picks) */
.blog-article .idea-art { margin: 1.1rem 0 0; overflow: hidden; border-radius: 1rem; border: 1px solid #e7e5e4; }
@media (min-width: 640px) { .blog-article .idea-art { float: right; width: 40%; margin: .35rem 0 .75rem 1.5rem; } }
.blog-article .picks { clear: both; margin: 1.5rem 0 0; padding: 1.1rem 1.2rem; background: #faf8f4; border: 1px solid #e7e5e4; border-radius: 1rem; }
.blog-article .picks-h { margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #78716c; }
.blog-article .picks-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .blog-article .picks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blog-article a.pick { display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem; background: #fff; border: 1px solid #e7e5e4; border-radius: .75rem; color: #44403c; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.blog-article a.pick:hover { border-color: #d6b9b9; box-shadow: 0 6px 18px -10px rgba(107,20,20,.35); }
.blog-article .pick-b { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8B1A1A; }
.blog-article .pick-n { font-size: 1rem; font-weight: 700; line-height: 1.35; color: #1c1917; }
.blog-article .pick-d { font-size: .88rem; line-height: 1.5; color: #57534e; }
.blog-article .pick-p { margin-top: auto; padding-top: .5rem; font-size: .88rem; font-weight: 700; color: #8B1A1A; }
.blog-article .pick-p::after { content: " \2197"; color: #a8a29e; font-weight: 400; }
.blog-article .picks-cost { margin: .85rem 0 0; font-size: .95rem; line-height: 1.6; }
.blog-article .pick-img { display: flex; align-items: center; justify-content: center; height: 11rem; margin: -.85rem -1rem .6rem; padding: .5rem; background: #fff; border-bottom: 1px solid #f0eeec; border-radius: .75rem .75rem 0 0; }
.blog-article .pick-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; margin: 0; border-radius: 0; box-shadow: none; }
.blog-article .picks-note { margin: .6rem 0 0; font-size: .78rem; color: #a8a29e; }
.blog-article .pick-img-cover { padding: 0; overflow: hidden; }
.blog-article .pick-img-cover img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.blog-article .picks-ad { margin-left: .4rem; padding: .1rem .4rem; border: 1px solid #d6d3d1; border-radius: .3rem; font-size: .62rem; letter-spacing: .04em; color: #a8a29e; }

/* Native select with its arrow moved in from the edge */
.select-arrow { -webkit-appearance: none; appearance: none; padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem; }

/* Editor: availability badge inside the calendar address field */
.slug-badge {
    position: absolute; right: .625rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .2rem .55rem .2rem .4rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.2; pointer-events: none;
}
.slug-badge[hidden] { display: none; }
.slug-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.slug-badge.is-free { background: #e7f6ec; color: #17803d; }
.slug-badge.is-taken, .slug-badge.is-invalid { background: #fdecec; color: #c62828; padding: .25rem; }

/* Editor: collapsible setting cards (settings, design, enterprise) */
.ed-card { background: #fff; border: 1px solid #f5f5f4; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); margin-bottom: 2rem; }
.ed-card-head { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.75rem 2rem; border-radius: 1rem; }
.ed-card-head::-webkit-details-marker { display: none; }

/* Editor: done-for-you upsell (red and gold like the song promo) */
.ed-dfy { position: relative; overflow: hidden; margin-bottom: 2rem; padding: 1.75rem 1.5rem; border-radius: 1rem; color: #fff;
  background: radial-gradient(120% 80% at 100% 0%, rgba(232,201,105,.22), transparent 55%), linear-gradient(150deg, #8B1A1A 0%, #6B1414 60%, #4f0f0f 100%); box-shadow: 0 24px 48px -30px rgba(59,29,20,.75), inset 0 0 0 1px rgba(232,201,105,.3); }
@media (min-width: 640px) { .ed-dfy { padding: 2rem 2rem; } }
.ed-dfy-snow { position: absolute; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(rgba(255,255,255,.5) 1.2px, transparent 1.6px) 0 0 / 46px 46px, radial-gradient(rgba(255,255,255,.3) 1px, transparent 1.4px) 23px 17px / 46px 46px; animation: spSnow 14s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ed-dfy-snow { animation: none; } }
.ed-dfy-k { display: inline-block; padding: .25rem .75rem; border-radius: 999px; background: rgba(232,201,105,.16); border: 1px solid rgba(232,201,105,.45); color: #E8C969; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ed-dfy-h { margin: .75rem 0 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.55rem; font-weight: 700; line-height: 1.2; color: #fff; }
.ed-dfy-h em { font-style: normal; color: #E8C969; }
.ed-dfy-lead { margin-top: .6rem; max-width: 52rem; font-size: .98rem; line-height: 1.65; color: rgba(255,255,255,.86); }
.ed-dfy-list { margin-top: 1.1rem; display: grid; gap: .55rem; }
@media (min-width: 640px) { .ed-dfy-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
@media (min-width: 1024px) { .ed-dfy-list-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ed-dfy-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: rgba(255,255,255,.92); }
.ed-dfy-list svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: #E8C969; }
.ed-dfy-bar { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(232,201,105,.3); display: flex; flex-direction: column; align-items: flex-start; }
.ed-dfy-how { font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.78); }
.ed-dfy-price { margin-top: .5rem; display: flex; align-items: baseline; gap: .6rem; font-family: 'Fraunces', Georgia, serif; font-size: 2.2rem; font-weight: 700; line-height: 1.1; color: #E8C969; white-space: nowrap; }
.ed-dfy-price span { font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.ed-dfy-cta { margin-top: .9rem; padding-inline: 1.5rem; text-align: center; }
@media (min-width: 640px) { .ed-dfy-cta { white-space: nowrap; } }
@media (max-width: 639px) { .ed-dfy-cta { align-self: stretch; } }
/* Done-for-you checkout and order page */
.dfy-next { display: flex; gap: .5rem; align-items: center; padding: .7rem .9rem; border-radius: .7rem; background: #fdf6f3; color: #6B1414; font-size: .85rem; font-weight: 500; }
.dfy-next svg { flex: none; width: 1.1rem; height: 1.1rem; }
.dfy-idea { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid #f5f5f4; scroll-margin-top: 1.5rem; }
.dfy-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .dfy-grid { grid-template-columns: minmax(0, 1fr) 22rem; } .dfy-grid .dfy-summary { order: 2; position: sticky; top: 1.5rem; } }
.dfy-summary { margin-bottom: 0; }
.dfy-summary .ed-dfy-h { font-size: 1.35rem; }
.dfy-list-1 { grid-template-columns: 1fr !important; }
.dfy-sum-price { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid rgba(232,201,105,.3); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.dfy-sum-price span { font-size: .85rem; color: rgba(255,255,255,.75); }
.dfy-sum-price strong { font-family: 'Fraunces', Georgia, serif; font-size: 1.9rem; color: #E8C969; line-height: 1; }
.dfy-sum-price em { font-style: normal; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.dfy-opt { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border: 1.5px solid #e7e5e4; border-radius: .8rem; cursor: pointer; transition: border-color .15s, background .15s; }
.dfy-opt:hover { border-color: #d6d3d1; }
.dfy-opt:has(input:checked) { border-color: #8B1A1A; background: #fdf6f3; }
.dfy-opt input { flex: none; width: 1.05rem; height: 1.05rem; accent-color: #8B1A1A; }
.dfy-opt-text { flex: 1; min-width: 0; }
.dfy-opt-icons { flex: none; display: flex; gap: .3rem; }
.dfy-opt-icons svg { width: 2.6rem; height: 1.6rem; padding: .1rem .2rem; border: 1px solid #e7e5e4; border-radius: .35rem; background: #fff; }
.dfy-bank-box { display: none; margin-top: -.75rem; padding: 1rem; border: 1.5px solid #8B1A1A; border-top: 0; border-radius: 0 0 .8rem .8rem; background: #fdf6f3; }
.dfy-opt:has(input:checked) + .dfy-bank-box { display: block; }
.dfy-opt:has(input:checked):has(+ .dfy-bank-box) { border-radius: .8rem .8rem 0 0; }
.dfy-bank-box .dfy-bank { padding: 0; border: 0; font-size: .86rem; }
.dfy-bank { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: .5rem 1rem; font-size: .92rem; padding: 1.25rem; border: 1px solid #e7e5e4; border-radius: .9rem; }
.dfy-bank dt { color: #78716c; font-weight: 600; }
.dfy-bank dd { color: #1c1917; overflow-wrap: anywhere; }
@media (max-width: 520px) { .dfy-bank { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .dfy-bank dd { margin-bottom: .5rem; } }
.ed-card-head:focus-visible { outline: 2px solid var(--brand, #8B1A1A); outline-offset: 2px; }
.ed-card-chev { flex: none; width: 2.25rem; height: 2.25rem; padding: .5rem; border-radius: 999px; background: #f5f5f4; fill: none; stroke: #57534e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s, background .2s; }
.ed-card-head:hover .ed-card-chev { background: #e7e5e4; }
.ed-card[open] > .ed-card-head .ed-card-chev { transform: rotate(180deg); }
.ed-card-body { padding: .25rem 2rem 2rem; }
@media (max-width: 640px) {
    .ed-card-head { padding: 1.25rem; }
    .ed-card-body { padding: .25rem 1.25rem 1.25rem; }
}
.select-arrow.text-sm { background-position: right .75rem center; background-size: 1rem; }

/* Dashboard card: image area opens the editor, "View" button top right */
.db-card-hit { position: absolute; inset: 0; z-index: 2; }
.db-card-hit:focus-visible { outline: 3px solid #f6d48f; outline-offset: -3px; border-radius: 24px 24px 0 0; }
.db-card-title { pointer-events: none; z-index: 1; }
.db-view { position: absolute; top: .9rem; right: .9rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 700; color: #1c1917; background: rgba(255, 255, 255, .94); box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .45); transition: transform .2s, background .2s; }
.db-view svg { width: 1.15rem; height: 1.15rem; color: #8B1A1A; }
.db-view:hover { background: #fff; transform: translateY(-1px); }

/* Analytics suite */
.an2-hero { margin-bottom: 1.75rem; padding: .9rem 0 1.3rem; color: #fff; border-top: 1px solid rgba(255, 255, 255, .08); }
.an2-back { display: inline-block; margin-bottom: .55rem; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.an2-back:hover { color: #fff; }
.an2-kicker { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .2rem; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #f6d48f; }
.an2-kicker svg { width: .95rem; height: .95rem; }
.an2-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .3rem; font-size: .82rem; color: rgba(255, 255, 255, .78); }
.an2-hero-meta b { font-weight: 400; opacity: .5; }
.an2-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #a8a29e; margin-right: .1rem; }
.an2-dot.is-on { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .25); }
.an2-hbtn { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: background .2s; }
.an2-hbtn:hover { background: rgba(255, 255, 255, .2); }
.an2-hbtn-light { color: #1c1917; background: #fff; box-shadow: none; }
.an2-hbtn-light:hover { background: #fdf6ea; }
.an2-card { background: #fff; border: 1px solid #ece6dc; border-radius: 20px; box-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 10px 30px -20px rgba(28, 25, 23, .18); }
.an2-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; }
.an2-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #f1ede6; }
.an2-seg a, .an2-seg button { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: #57534e; white-space: nowrap; transition: background .15s, color .15s; }
.an2-seg a:hover, .an2-seg button:hover { color: #1c1917; background: rgba(255, 255, 255, .6); }
.an2-seg .is-on { color: #8B1A1A; background: #fff; box-shadow: 0 1px 3px rgba(28, 25, 23, .12); }
.an2-seg svg { width: .95rem; height: .95rem; }
.an2-seg-sm a, .an2-seg-sm button { padding: .3rem .65rem; font-size: .78rem; }
.an2-tool-right { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.an2-range-label { font-size: .82rem; font-weight: 600; color: #78716c; font-variant-numeric: tabular-nums; }
.an2-export { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 10px; font-size: .82rem; font-weight: 700; color: #fff; background: #1c1917; }
.an2-export:hover { background: #8B1A1A; }
.an2-export svg { width: 1rem; height: 1rem; }
.an2-export.is-locked { color: #a8a29e; background: #f5f5f4; cursor: not-allowed; }
.an2-export em { font-style: normal; font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 6px; color: #8B1A1A; background: #fbe9e9; }
.an2-custom { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .9rem 1rem; border-radius: 14px; background: #fff; border: 1px solid #ece6dc; }
.an2-custom[hidden] { display: none; }
.an2-custom label { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #78716c; }
.an2-custom input { padding: .45rem .6rem; border: 1px solid #e7e5e4; border-radius: 9px; font-size: .9rem; color: #1c1917; text-transform: none; letter-spacing: 0; }
.an2-custom button { padding: .55rem 1.1rem; border-radius: 9px; font-size: .85rem; font-weight: 700; color: #fff; background: #8B1A1A; }
.an2-kpi { position: relative; overflow: hidden; padding: 1rem 1.1rem 2.2rem; }
.an2-kpi-label { display: flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 700; color: #78716c; }
.an2-kpi-label i { width: .55rem; height: .55rem; border-radius: 3px; background: var(--c); }
.an2-kpi-value { margin-top: .35rem; font-size: 1.9rem; line-height: 1.1; font-weight: 800; color: #1c1917; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.an2-delta { display: inline-block; margin-top: .35rem; padding: .1rem .45rem; border-radius: 6px; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.an2-delta.is-up { color: #166534; background: #dcfce7; }
.an2-delta.is-down { color: #9f1239; background: #ffe4e6; }
.an2-delta.is-flat { color: #78716c; background: #f5f5f4; }
.an2-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 1.9rem; }
.an2-hl { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: #fdf8ef; border: 1px solid #f1e3c8; }
.an2-hl-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; color: #8B1A1A; background: #fff; box-shadow: 0 2px 6px -2px rgba(139, 26, 26, .25); }
.an2-hl-icon svg { width: 1.2rem; height: 1.2rem; }
.an2-hl-label { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #a16207; }
.an2-hl-value { margin-top: .15rem; font-size: 1.05rem; font-weight: 800; color: #1c1917; }
.an2-hl-title { font-weight: 500; color: #78716c; font-size: .85rem; }
.an2-hl-sub { font-size: .8rem; color: #78716c; }
.an2-series { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.an2-series label { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #a8a29e; border: 1px solid #e7e5e4; cursor: pointer; user-select: none; }
.an2-series input { position: absolute; opacity: 0; pointer-events: none; }
.an2-series i { width: .6rem; height: .6rem; border-radius: 3px; background: #d6d3d1; }
.an2-series label:has(input:checked) { color: #1c1917; border-color: var(--c); background: color-mix(in srgb, var(--c) 7%, #fff); }
.an2-series label:has(input:checked) i { background: var(--c); }
.an2-series label:has(input:focus-visible) { outline: 2px solid var(--c); outline-offset: 2px; }
.an2-chart { position: relative; }
.an2-chart svg { display: block; width: 100%; }
.an2-tip { position: absolute; top: 0; z-index: 5; min-width: 10rem; padding: .6rem .75rem; border-radius: 12px; font-size: .78rem; color: #fff; background: rgba(28, 25, 23, .94); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); pointer-events: none; }
.an2-tip b { display: block; font-size: .82rem; }
.an2-tip small { display: block; margin-bottom: .3rem; color: #f6d48f; font-weight: 600; }
.an2-tip span { display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.an2-tip span.is-off { opacity: .45; }
.an2-tip i { width: .5rem; height: .5rem; border-radius: 2px; }
.an2-tip em { margin-left: auto; padding-left: 1rem; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.an2-empty { padding: 1.5rem 0 .5rem; text-align: center; font-size: .88rem; color: #a8a29e; }
.an2-mini { display: flex; align-items: flex-end; gap: 3px; height: 8.5rem; }
.an2-mini span { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px; background: #faf8f5; }
.an2-mini i { display: block; min-height: 2px; border-radius: 4px; background: #e8c9c9; transition: background .15s; }
.an2-mini span.is-peak i, .an2-mini span:hover i { background: #8B1A1A; }
.an2-mini b { position: absolute; top: -1.2rem; left: 0; right: 0; text-align: center; font-size: .7rem; color: #78716c; font-variant-numeric: tabular-nums; }
.an2-mini-7 { gap: 8px; margin-top: 1.4rem; height: 7.1rem; }
.an2-mini-axis { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .7rem; color: #a8a29e; }
.an2-mini-axis-7 span { flex: 1; text-align: center; }
.an2-heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr)); gap: 6px; }
.an2-heat-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, #8B1A1A calc(var(--k) * 100%), #fbf3ef); box-shadow: inset 0 0 0 1px rgba(139, 26, 26, .08); transition: transform .15s; }
.an2-heat-cell:hover { transform: scale(1.06); }
.an2-heat-cell b { font-family: Georgia, serif; font-size: 1.15rem; line-height: 1; }
.an2-heat-cell small { margin-top: .2rem; font-size: .68rem; font-weight: 700; opacity: .8; font-variant-numeric: tabular-nums; }
.an2-heat-cell.is-empty { background: repeating-linear-gradient(45deg, #faf8f5 0 6px, #f3efe9 6px 12px); color: #a8a29e !important; }
.an2-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.an2-search { display: flex; align-items: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid #e7e5e4; border-radius: 10px; color: #a8a29e; }
.an2-search svg { width: 1rem; height: 1rem; }
.an2-search input { width: 9.5rem; border: 0; outline: 0; font-size: .85rem; color: #1c1917; background: transparent; }
.an2-filters select { padding: .45rem 2rem .45rem .65rem; border: 1px solid #e7e5e4; border-radius: 10px; }
.an2-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; color: #57534e; }
.an2-check input { accent-color: #8B1A1A; }
.an2-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .88rem; }
.an2-table th { padding: 0; border-bottom: 1px solid #ece6dc; text-align: left; }
.an2-table th button { display: inline-flex; align-items: center; gap: .3rem; padding: .6rem .75rem; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #a8a29e; }
.an2-table th button::after { content: "\2195"; font-size: .75rem; opacity: .35; }
.an2-table th.is-sorted button { color: #8B1A1A; }
.an2-table th.is-sorted button::after { content: "\2191"; opacity: 1; }
.an2-table th.is-sorted.is-desc button::after { content: "\2193"; }
.an2-table th.num, .an2-table td.num { text-align: right; }
.an2-table th.num button { flex-direction: row-reverse; }
.an2-table td { padding: .6rem .75rem; border-bottom: 1px solid #f5f2ed; vertical-align: middle; font-variant-numeric: tabular-nums; }
.an2-table td:first-child { display: flex; align-items: center; gap: .7rem; min-width: 14rem; }
.an2-table td small { display: block; font-size: .72rem; color: #a8a29e; }
.an2-table tbody tr:hover td { background: #fdfaf5; }
.an2-table tbody tr:target td { background: #fdf3e1; }
.an2-num { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 9px; font-family: Georgia, serif; font-weight: 700; color: #fff; background: #8B1A1A; }
.an2-num.is-empty { color: #a8a29e; background: #f5f5f4; }
.an2-cellbar { display: inline-block; vertical-align: middle; width: 4.5rem; height: .4rem; margin-right: .5rem; border-radius: 99px; background: #f5f2ed; overflow: hidden; }
.an2-cellbar i { display: block; height: 100%; border-radius: 99px; background: #2f6b45; }