/*
 * Project sites: per-section style, Free layout (rows → columns → elements) and the meme kit.
 * Classes and variables come from App\Theme\Page\BlockKit (pj_sx / pj_bbox / pj_be); loaded by PageBuilder::assets()
 * after the theme, for every theme. Reads the --pj-* tokens and only (re)defines them locally on a section or box
 * (accent colour, text colour scheme, corners), never on :root. Runtime: /v2/js/pj-style.js. Version: PageBuilder::STYLE_VERSION.
 */

/* ======================================================================= section style */
.pj-sx { position: relative; isolation: isolate; }
.pj-sx > :not(.pj-sx__bg) { position: relative; z-index: 1; }
.pj-sx__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
html body .pj-s.pj-space--none { padding-top: 0; padding-bottom: 0; }
html body .pj-s.pj-space--huge { padding-top: 150px; padding-bottom: 150px; }
/* own space above / below (Layout tab, BlockKit sets --sx-pt / --sx-pb) */
html body .pj-s.pj-space--custom { padding-top: var(--sx-pt, 64px); padding-bottom: var(--sx-pb, 64px); }
@media (max-width: 760px) { html body .pj-s.pj-space--huge { padding-top: 96px; padding-bottom: 96px; } }
.pj-s.pj-space--none + .pj-s.pj-bg--none { padding-top: 0; }

/* builder widget sections with their own style (PageBuilder::widgetStyle): the wrapper takes the spacing and the width */
html body .pj-s.pj-swidget > :not(.pj-sx__bg) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; }
html body .pj-swidget.pj-sw--narrow .container { max-width: 780px; }
html body .pj-swidget.pj-sw--normal .container { max-width: var(--pj-container-xl, 1140px); }
html body .pj-swidget.pj-sw--wide .container { max-width: 1440px; }
html body .pj-swidget.pj-sw--custom .container { max-width: min(100%, var(--sx-w, 1140px)); }
html body .pj-swidget.pj-sw--full .container { max-width: none; padding-inline: clamp(16px, 4vw, 56px); }

/* own background */
.pj-sbg--color { background: var(--sx-c1); }
.pj-sbg--gradient.pj-sgr--linear { background: linear-gradient(var(--sx-ang, 135deg), var(--sx-c1), var(--sx-c2)); }
.pj-sbg--gradient.pj-sgr--radial { background: radial-gradient(120% 90% at 50% 0%, var(--sx-c1) 0%, var(--sx-c2) 72%); }
.pj-sbg--gradient.pj-sgr--aurora {
    background:
        radial-gradient(60% 70% at 12% 18%, color-mix(in srgb, var(--sx-c2) 85%, transparent) 0%, transparent 62%),
        radial-gradient(55% 60% at 88% 12%, color-mix(in srgb, var(--pj-accent) 60%, transparent) 0%, transparent 60%),
        radial-gradient(70% 70% at 70% 100%, color-mix(in srgb, var(--sx-c2) 55%, transparent) 0%, transparent 65%),
        var(--sx-c1);
}
.pj-sbg--gradient.pj-sgr--conic { background: conic-gradient(from var(--sx-ang, 135deg) at 50% 50%, var(--sx-c1), var(--sx-c2), var(--sx-c1)); }
.pj-sbg--image { background: var(--sx-img) center / cover no-repeat, var(--sx-c1, #000); }
.pj-sbg--fixed { background-attachment: fixed, scroll; }
@media (max-width: 900px), (hover: none) { .pj-sbg--fixed { background-attachment: scroll; } }
.pj-sx__ov { position: absolute; inset: 0; background: color-mix(in srgb, var(--sx-c1, #000) var(--sx-ov, 45%), transparent); }

/* text colour scheme (on a section or a box) */
.pj-stx--light {
    --pj-ink: #fff; --pj-text: rgba(255, 255, 255, .92); --pj-muted: rgba(255, 255, 255, .74);
    --pj-line: rgba(255, 255, 255, .18); --pj-card-line: rgba(255, 255, 255, .18);
    --pj-card: rgba(255, 255, 255, .09); --pj-bg-soft: rgba(255, 255, 255, .06);
    color: var(--pj-text);
}
.pj-stx--dark {
    --pj-ink: #0d1220; --pj-text: #232a3b; --pj-muted: #4b5468;
    --pj-line: rgba(13, 18, 32, .14); --pj-card-line: rgba(13, 18, 32, .14);
    --pj-card: rgba(255, 255, 255, .78); --pj-bg-soft: rgba(255, 255, 255, .55);
    color: var(--pj-text);
}
.pj-stx--light :is(h1, h2, h3, h4), .pj-stx--dark :is(h1, h2, h3, h4) { color: var(--pj-ink); }

/* width, alignment, height */
html body .pj-sw--narrow > .container { max-width: 780px; }
html body .pj-sw--wide > .container { max-width: 1440px; }
html body .pj-sw--custom > .container { max-width: min(100%, var(--sx-w, 1140px)); }
html body .pj-sw--full > .container { max-width: none; padding-inline: clamp(16px, 4vw, 56px); }
.pj-sal--center > .container, .pj-sal--center .pj-section-head { text-align: center; }
.pj-sal--center .pj-lead { margin-inline: auto; }
.pj-sal--center :is(.pj-cta, .pj-socials, .pj-hero__grid) { justify-content: center; }
.pj-sal--left .pj-section-head.is-center { text-align: left; }
.pj-sal--left .pj-section-head .pj-lead { margin-left: 0; }
.pj-smh--tall { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.pj-smh--screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.pj-smh--tall > .container, .pj-smh--screen > .container { width: 100%; }

/* corners inside the section */
.pj-srad--square { --pj-radius: 0px; --pj-radius-sm: 0px; --pj-radius-btn: 0px; }
.pj-srad--soft { --pj-radius: 10px; --pj-radius-sm: 6px; --pj-radius-btn: 8px; }
.pj-srad--round { --pj-radius: 26px; --pj-radius-sm: 16px; --pj-radius-btn: 999px; }

/* shape of the whole section */
.pj-sfr--panel, .pj-sfr--glass, .pj-sfr--glow, .pj-sfr--comic {
    width: min(calc(100% - 32px), var(--pj-container-xxl, 1400px)); margin: 28px auto; border-radius: max(var(--pj-radius, 16px), 22px);
}
.pj-sfr--panel.pj-bg--none { background: var(--pj-card); border: 1px solid var(--pj-card-line, var(--pj-line)); }
.pj-sfr--panel { box-shadow: 0 30px 70px -40px rgba(10, 16, 40, .45); }
.pj-sfr--glass { background: color-mix(in srgb, var(--pj-card) 50%, transparent); border: 1px solid rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.pj-sfr--glass.pj-sbg--gradient, .pj-sfr--glass.pj-sbg--color { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 40px 80px -40px rgba(0, 0, 0, .6); }
.pj-sfr--glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pj-primary) 55%, transparent), 0 0 80px -10px color-mix(in srgb, var(--pj-primary) 55%, transparent); }
.pj-sfr--glow.pj-bg--none { background: var(--pj-card); }
.pj-sfr--comic { border: 4px solid #111; box-shadow: 10px 10px 0 #111; }
.pj-sfr--comic.pj-bg--none { background: #fff; }
.pj-sfr--tilt { transform: skewY(-2.5deg); margin: 48px 0; }
.pj-sfr--tilt > :not(.pj-sx__bg) { transform: skewY(2.5deg); }

/* edges: the shape hangs from the edge in the page colour */
.pj-sx__div { position: absolute; left: 0; right: 0; height: clamp(36px, 6vw, 90px); line-height: 0; }
.pj-sx__div svg { width: 100%; height: 100%; display: block; fill: var(--pj-bg, #fff); }
.pj-sx__div--top { top: -1px; }
.pj-sx__div--bottom { bottom: -1px; transform: scaleY(-1); }
.pj-sx.has-div-top { padding-top: calc(clamp(36px, 6vw, 90px) + 40px); }
.pj-sx.has-div-bottom { padding-bottom: calc(clamp(36px, 6vw, 90px) + 40px); }

/* patterns (follow the text colour) */
.pj-sx__pat { position: absolute; inset: 0; color: inherit; opacity: .12; }
.pj-pat--subtle { opacity: .06; }
.pj-pat--strong { opacity: .22; }
.pj-pat--dots { background: radial-gradient(currentColor 1.6px, transparent 1.8px) 0 0 / 22px 22px; }
.pj-pat--grid { background: linear-gradient(currentColor 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / 44px 44px; }
.pj-pat--lines { background: repeating-linear-gradient(45deg, currentColor 0 2px, transparent 2px 16px); }
.pj-pat--zigzag {
    background:
        linear-gradient(135deg, currentColor 25%, transparent 25%) -14px 0 / 28px 28px,
        linear-gradient(225deg, currentColor 25%, transparent 25%) -14px 0 / 28px 28px,
        linear-gradient(315deg, currentColor 25%, transparent 25%) 0 0 / 28px 28px,
        linear-gradient(45deg, currentColor 25%, transparent 25%) 0 0 / 28px 28px;
}
.pj-pat--halftone {
    background: radial-gradient(currentColor 34%, transparent 36%) 0 0 / 14px 14px;
    -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 75%); mask-image: linear-gradient(135deg, #000 10%, transparent 75%);
}
.pj-pat--halftone.pj-pat--strong { opacity: .35; }
.pj-pat--rays { inset: -60%; background: repeating-conic-gradient(from 0deg at 50% 50%, currentColor 0deg 9deg, transparent 9deg 18deg); }
.pj-pat--rays.pj-pat--strong { opacity: .3; }
.pj-pat--stars {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='20' r='1.4'/%3E%3Ccircle cx='70' cy='8' r='1'/%3E%3Ccircle cx='132' cy='34' r='1.6'/%3E%3Ccircle cx='40' cy='78' r='1'/%3E%3Ccircle cx='104' cy='96' r='1.3'/%3E%3Ccircle cx='150' cy='130' r='1'/%3E%3Ccircle cx='20' cy='140' r='1.5'/%3E%3Ccircle cx='86' cy='150' r='1'/%3E%3Cpath d='M64 52l2.4 6.2 6.2 2.4-6.2 2.4-2.4 6.2-2.4-6.2-6.2-2.4 6.2-2.4z'/%3E%3Cpath d='M130 70l1.6 4 4 1.6-4 1.6-1.6 4-1.6-4-4-1.6 4-1.6z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 160px 160px; opacity: .55;
}
.pj-stx--dark .pj-pat--stars { filter: invert(1); }
.pj-pat--stars.pj-pat--subtle { opacity: .3; }
.pj-pat--stars.pj-pat--strong { opacity: .9; }
.pj-pat--confetti {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect x='14' y='22' width='12' height='5' rx='2' fill='%23ff3fb4' transform='rotate(30 20 24)'/%3E%3Crect x='96' y='12' width='12' height='5' rx='2' fill='%23ffd23f' transform='rotate(-25 102 14)'/%3E%3Ccircle cx='150' cy='46' r='4' fill='%2322d3ee'/%3E%3Crect x='52' y='70' width='12' height='5' rx='2' fill='%2334d399' transform='rotate(60 58 72)'/%3E%3Ccircle cx='120' cy='104' r='3.5' fill='%23ff6b2c'/%3E%3Crect x='20' y='128' width='12' height='5' rx='2' fill='%238b5cf6' transform='rotate(-40 26 130)'/%3E%3Crect x='138' y='150' width='12' height='5' rx='2' fill='%23ff3fb4' transform='rotate(15 144 152)'/%3E%3Ccircle cx='76' cy='160' r='3' fill='%23ffd23f'/%3E%3C/svg%3E");
    background-size: 180px 180px; opacity: .55;
}
.pj-pat--confetti.pj-pat--subtle { opacity: .3; }
.pj-pat--confetti.pj-pat--strong { opacity: .9; }
.pj-pat--noise {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .14; mix-blend-mode: overlay;
}
.pj-pat--emoji { background-image: var(--pat-emoji); background-size: 120px 120px; opacity: .35; }
.pj-pat--emoji.pj-pat--subtle { opacity: .18; }
.pj-pat--emoji.pj-pat--strong { opacity: .7; }
.pj-sx__pat.is-move { animation: pj-pat-drift 40s linear infinite; }
.pj-pat--rays.is-move { animation: pj-spin 90s linear infinite; }
.pj-pat--stars.is-move, .pj-pat--confetti.is-move, .pj-pat--emoji.is-move { animation: pj-pat-fall 30s linear infinite; }
@keyframes pj-pat-drift { to { background-position: 220px 220px, 220px 220px, 220px 220px, 220px 220px; } }
@keyframes pj-pat-fall { to { background-position: 0 720px; } }

/* ======================================================================= fonts + text effects (section headings and elements)
 * A font key sets --bf (+ weight / tracking); one strong rule applies it to the section's headings or the element's
 * texts, above theme rules like ".pj h2" or "body.pj-theme--x .pj h2" (icons keep Font Awesome). */
:is(.pj-shf--heading, .pj-bf--heading) { --bf: var(--pj-font-heading); }
:is(.pj-shf--body, .pj-bf--body) { --bf: var(--pj-font); }
:is(.pj-shf--bangers, .pj-bf--bangers) { --bf: 'Bangers', Impact, sans-serif; --bfw: 400; --bfs: .03em; }
:is(.pj-shf--luckiest, .pj-bf--luckiest) { --bf: 'Luckiest Guy', Impact, sans-serif; --bfw: 400; --bfs: .02em; }
:is(.pj-shf--titan, .pj-bf--titan) { --bf: 'Titan One', Impact, sans-serif; --bfw: 400; }
:is(.pj-shf--chewy, .pj-bf--chewy) { --bf: 'Chewy', cursive; --bfw: 400; }
:is(.pj-shf--marker, .pj-bf--marker) { --bf: 'Permanent Marker', cursive; --bfw: 400; }
:is(.pj-shf--caveat, .pj-bf--caveat) { --bf: 'Caveat', cursive; --bfw: 700; }
:is(.pj-shf--pixel, .pj-bf--pixel) { --bf: 'Press Start 2P', monospace; --bfw: 400; --bfs: 0; }
:is(.pj-shf--rubik, .pj-bf--rubik) { --bf: 'Rubik Mono One', sans-serif; --bfw: 400; }
:is(.pj-shf--bungee, .pj-bf--bungee) { --bf: 'Bungee', Impact, sans-serif; --bfw: 400; }
:is(.pj-shf--monoton, .pj-bf--monoton) { --bf: 'Monoton', sans-serif; --bfw: 400; --bfs: .04em; }
:is(.pj-shf--bebas, .pj-bf--bebas) { --bf: 'Bebas Neue', Impact, sans-serif; --bfw: 400; --bfs: .02em; }
:is(.pj-shf--archivo, .pj-bf--archivo) { --bf: 'Archivo Black', sans-serif; --bfw: 400; }
:is(.pj-shf--playfair, .pj-bf--playfair) { --bf: 'Playfair Display', Georgia, serif; }
:is(.pj-shf--instrument, .pj-bf--instrument) { --bf: 'Instrument Serif', Georgia, serif; --bfw: 400; --bfs: -.01em; }
:is(.pj-shf--grotesk, .pj-bf--grotesk) { --bf: 'Space Grotesk', sans-serif; }
:is(.pj-shf--mono, .pj-bf--mono) { --bf: 'Space Mono', monospace; }
html body .pj-s[class*="pj-shf--"] :is(h1, h2, h3),
.pj-blk .pj-be[class*="pj-bf--"] :is(.pj-be__h, .pj-be__t, .pj-bb, .pj-bbadge, .pj-bsticker, h3, .pj-blist, .pj-bmq, .pj-be__cap, .pj-bprice__label, .pj-bcd__label, .pj-bcd b) {
    font-family: var(--bf);
}
/* display fonts come in one weight: no fake bold, their own tracking */
html body .pj-s:is(.pj-shf--bangers, .pj-shf--luckiest, .pj-shf--titan, .pj-shf--chewy, .pj-shf--marker, .pj-shf--caveat, .pj-shf--pixel, .pj-shf--rubik, .pj-shf--bungee, .pj-shf--monoton, .pj-shf--bebas, .pj-shf--archivo, .pj-shf--instrument) :is(h1, h2, h3),
.pj-blk .pj-be:is(.pj-bf--bangers, .pj-bf--luckiest, .pj-bf--titan, .pj-bf--chewy, .pj-bf--marker, .pj-bf--caveat, .pj-bf--pixel, .pj-bf--rubik, .pj-bf--bungee, .pj-bf--monoton, .pj-bf--bebas, .pj-bf--archivo, .pj-bf--instrument) :is(.pj-be__h, .pj-be__t, .pj-bb, .pj-bbadge, .pj-bsticker, h3, .pj-blist, .pj-bmq, .pj-be__cap, .pj-bcd b) {
    font-weight: var(--bfw); letter-spacing: var(--bfs, normal);
}
.pj-blk .pj-bf--pixel .pj-be__t, .pj-blk .pj-bf--pixel .pj-be__h { font-size: .82em; line-height: 1.4; }
.pj-blk .pj-bf--pixel .pj-be__h .pj-be__t { font-size: 1em; }
html body .pj-s.pj-shf--pixel :is(h1, h2) { line-height: 1.35; }

html body .pj-s.pj-shs--s :is(h1, h2) { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
html body .pj-s.pj-shs--l :is(h1, h2) { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
html body .pj-s.pj-shs--xl :is(h1, h2) { font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1.02; }
html body .pj-s.pj-shs--mega :is(h1, h2) { font-size: clamp(3.2rem, 11vw, 8.5rem); line-height: .95; }

/* effects: --fx-c text colour, --fx-s effect colour */
:is(html body .pj-s.pj-shx--gradient :is(h1, h2), .pj-blk .pj-bx--gradient .pj-be__t) {
    background: linear-gradient(100deg, var(--pj-primary), var(--pj-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
:is(html body .pj-s.pj-shx--rainbow :is(h1, h2), .pj-blk .pj-bx--rainbow .pj-be__t) {
    background: linear-gradient(90deg, #ff3f6c, #ffb800, #3ee67b, #22d3ee, #8b5cf6, #ff3fb4, #ff3f6c) 0 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: pj-rainbow 6s linear infinite;
}
:is(html body .pj-s.pj-shx--outline :is(h1, h2), .pj-blk .pj-bx--outline .pj-be__t) { color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: max(1.5px, .035em) var(--be-c, var(--pj-ink)); }
:is(html body .pj-s.pj-shx--shadow3d :is(h1, h2), .pj-blk .pj-bx--shadow3d .pj-be__t) {
    --fx-s: var(--pj-primary);
    text-shadow: .02em .02em 0 var(--fx-s), .04em .04em 0 var(--fx-s), .06em .06em 0 var(--fx-s), .08em .08em 0 var(--fx-s), .1em .1em .12em rgba(0, 0, 0, .3);
}
:is(html body .pj-s.pj-shx--glow :is(h1, h2), .pj-blk .pj-bx--glow .pj-be__t) { text-shadow: 0 0 .25em color-mix(in srgb, var(--pj-primary) 80%, transparent), 0 0 .9em color-mix(in srgb, var(--pj-primary) 60%, transparent); }
:is(html body .pj-s.pj-shx--neon :is(h1, h2), .pj-blk .pj-bx--neon .pj-be__t) {
    color: #fff; -webkit-text-fill-color: #fff;
    text-shadow: 0 0 .05em #fff, 0 0 .2em var(--pj-primary), 0 0 .5em var(--pj-primary), 0 0 1.1em var(--pj-primary);
    animation: pj-flicker 4s infinite;
}
:is(html body .pj-s.pj-shx--comic :is(h1, h2), .pj-blk .pj-bx--comic .pj-be__t) {
    color: var(--be-c, #fff); -webkit-text-stroke: .055em #111; paint-order: stroke fill; text-shadow: .07em .07em 0 #111;
}
html body .pj-s.pj-shx--comic :is(h1, h2) { color: #fff; }
/* on a dark section (light text) the gradient runs from white, so it stays readable on any background colour */
html body .pj-s.pj-stx--light.pj-shx--gradient :is(h1, h2), .pj-stx--light .pj-blk .pj-bx--gradient .pj-be__t, .pj-blk .pj-stx--light .pj-bx--gradient .pj-be__t {
    background-image: linear-gradient(100deg, #fff 15%, color-mix(in srgb, var(--pj-accent) 70%, #fff));
}
:is(html body .pj-s.pj-shx--highlight :is(h1, h2), .pj-blk .pj-bx--highlight .pj-be__t) {
    background: linear-gradient(transparent 58%, color-mix(in srgb, var(--pj-accent) 70%, transparent) 58%, color-mix(in srgb, var(--pj-accent) 70%, transparent) 92%, transparent 92%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em;
}
html body .pj-s.pj-shx--highlight :is(h1, h2) { display: inline; }
:is(html body .pj-s.pj-shx--glitch :is(h1, h2), .pj-blk .pj-bx--glitch .pj-be__t) { text-shadow: .04em 0 #ff2bd6, -.04em 0 #22e5ff; animation: pj-glitch 2.4s infinite steps(1); }
@keyframes pj-rainbow { to { background-position: 300% 0; } }
@keyframes pj-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes pj-glitch {
    0%, 100% { text-shadow: .04em 0 #ff2bd6, -.04em 0 #22e5ff; transform: none; }
    30% { text-shadow: -.05em .02em #ff2bd6, .05em -.02em #22e5ff; transform: translateX(.01em); }
    32% { transform: translateX(-.02em) skewX(-6deg); }
    34% { transform: none; }
    70% { text-shadow: .06em -.02em #ff2bd6, -.03em .03em #22e5ff; }
}

/* ======================================================================= free layout: rows + columns */
.pj-s--blocks { overflow-x: clip; }
.pj-blk { display: flex; flex-direction: column; gap: 28px; }
.pj-brow { display: grid; grid-template-columns: var(--cols, 1fr); gap: var(--bgap, 28px); align-items: stretch; position: relative; }
.pj-bgap--none { --bgap: 0px; }
.pj-bgap--s { --bgap: 14px; }
.pj-bgap--l { --bgap: 44px; }
.pj-bgap--xl { --bgap: 72px; }
.pj-bva--start { align-items: start; }
.pj-bva--center { align-items: center; }
.pj-bva--end { align-items: end; }
.pj-bcol { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; position: relative; isolation: isolate; }
.pj-cal--left { align-items: flex-start; text-align: left; }
.pj-cal--center { align-items: center; text-align: center; }
.pj-cal--right { align-items: flex-end; text-align: right; }
.pj-sal--center .pj-bcol:not([class*="pj-cal--"]) { align-items: center; text-align: center; }
.pj-cva--center { justify-content: center; }
.pj-cva--bottom { justify-content: flex-end; }
.pj-cva--between { justify-content: space-between; }
.pj-bcol.has-tf { transform: rotate(var(--be-r, 0deg)); }
@media (max-width: 1000px) { .pj-bn--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    .pj-brow { grid-template-columns: 1fr; }
    .pj-bn--4 { grid-template-columns: 1fr 1fr; }
    .pj-brow.is-rev { display: flex; flex-direction: column-reverse; }
}

/* boxes around a row or column */
.pj-box { border-radius: var(--pj-radius, 16px); padding: 24px; }
.pj-box--card { background: var(--bx-bg, var(--pj-card)); border: 1px solid var(--pj-card-line, var(--pj-line)); box-shadow: var(--pj-shadow, 0 18px 40px -28px rgba(10, 16, 40, .35)); }
.pj-box--glass { background: var(--bx-bg, color-mix(in srgb, var(--pj-card) 45%, transparent)); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pj-box--outline { border: 2px solid var(--bx-bg, var(--pj-line)); }
.pj-box--tint { background: var(--bx-bg, color-mix(in srgb, var(--pj-primary) 10%, transparent)); }
.pj-box--color { background: var(--bx-bg, var(--pj-primary)); }
.pj-box--comic { background: var(--bx-bg, #fff); border: 3px solid #111; box-shadow: 7px 7px 0 #111; border-radius: max(var(--pj-radius, 12px), 14px); }
.pj-pad--none { padding: 0; }
.pj-pad--s { padding: 14px; }
.pj-pad--m { padding: 24px; }
.pj-pad--l { padding: clamp(28px, 4vw, 48px); }

/* ======================================================================= elements */
.pj-be { --bz: 1; position: relative; max-width: 100%; }
.pj-bz--xs { --bz: .7; }
.pj-bz--s { --bz: .85; }
.pj-bz--l { --bz: 1.3; }
.pj-bz--xl { --bz: 1.75; }
.pj-bz--xxl { --bz: 2.3; }
.pj-bz--mega { --bz: 3.1; }
@media (max-width: 1000px) {
    .pj-bz--xxl { --bz: 1.95; }
    .pj-bz--mega { --bz: 2.4; }
}
@media (max-width: 760px) {
    .pj-bz--xl { --bz: 1.45; }
    .pj-bz--xxl { --bz: 1.75; }
    .pj-bz--mega { --bz: 2.1; }
}
.pj-be.has-tf { transform: translate(var(--be-x, 0px), var(--be-y, 0px)) rotate(var(--be-r, 0deg)); }
.pj-be.has-w { width: var(--be-w); }
.pj-ba--left { align-self: flex-start; text-align: left; }
.pj-ba--center { align-self: center; text-align: center; }
.pj-ba--right { align-self: flex-end; text-align: right; }
.pj-bzi--front { z-index: 5; }
.pj-bzi--back { z-index: -1; }
.pj-be__in { max-width: 100%; }
.pj-be:is(.pj-be--image, .pj-be--video, .pj-be--widget, .pj-be--card, .pj-be--marquee, .pj-be--divider, .pj-be--spacer, .pj-be--text, .pj-be--countdown, .pj-be--list) { align-self: stretch; }
.pj-be:is(.pj-be--image, .pj-be--video, .pj-be--widget, .pj-be--card, .pj-be--divider, .pj-be--text).has-w { align-self: auto; }
.pj-cal--center > .pj-be.has-w, .pj-ba--center.has-w { align-self: center; }
.pj-be.has-color { color: var(--be-c); }
.pj-be a.pj-be__a { color: inherit; text-decoration: none; display: inline-block; }

/* heading */
.pj-be--heading { --bb: 2.25rem; }
.pj-bl--h1 { --bb: 3rem; }
.pj-bl--h3 { --bb: 1.5rem; }
.pj-bl--h4 { --bb: 1.2rem; }
.pj-bl--p { --bb: 1.05rem; }
.pj-blk .pj-be .pj-be__h { font-size: calc(var(--bb) * var(--bz)); line-height: 1.06; margin: 0; color: var(--be-c, var(--pj-ink)); overflow-wrap: anywhere; }
.pj-blk .pj-bl--p .pj-be__h { line-height: 1.4; font-weight: 600; }
@media (max-width: 760px) { .pj-be--heading { --bb: 1.85rem; } .pj-bl--h1 { --bb: 2.3rem; } }
.pj-bx--glitch .pj-be__t { display: inline-block; }

/* text */
.pj-blk .pj-be--text .pj-be__t { font-size: calc(1.02rem * var(--bz)); color: var(--be-c, var(--pj-text, inherit)); }
.pj-be--text .pj-be__t > :last-child { margin-bottom: 0; }
.pj-blk .pj-be__t :is(p, li) { font-size: inherit; color: inherit; }
.pj-be--text.has-bg .pj-be__in { background: var(--be-bg); padding: 18px 20px; border-radius: var(--pj-radius, 14px); }

/* button */
.pj-blk .pj-be .pj-bb { font-size: calc(1rem * var(--bz)); padding: .85em 1.5em; display: inline-flex; align-items: center; gap: .55em; position: relative; }
.pj-be.has-bg .pj-bb { background: var(--be-bg); border-color: var(--be-bg); }
.pj-be.has-color .pj-bb { color: var(--be-c); }
.pj-bb--ghost { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--be-c, var(--pj-primary)); padding-inline: .2em; text-decoration: underline; text-underline-offset: .25em; }
.pj-bb--gradient { background: linear-gradient(100deg, var(--pj-primary), var(--pj-accent), var(--pj-primary)) 0 0 / 200% 100% !important; border: 0 !important; color: #fff; overflow: hidden; transition: background-position .5s; }
.pj-bb--gradient:hover { background-position: 100% 0 !important; }
.pj-bb--glow { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pj-primary) 60%, transparent); animation: pj-glow 2.2s infinite; }
.pj-bb--comic {
    background: var(--be-bg, #ffd23f) !important; color: var(--be-c, #111) !important; border: 3px solid #111 !important; border-radius: 14px !important;
    box-shadow: 5px 5px 0 #111 !important; font-weight: 800; transition: transform .12s, box-shadow .12s;
}
.pj-bb--comic:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #111 !important; }
.pj-bb--comic:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #111 !important; }
.pj-blk .pj-be .pj-bb--pixel {
    font-family: 'Press Start 2P', monospace; font-size: calc(.72rem * var(--bz)); border-radius: 0 !important; border: 0 !important;
    background: var(--be-bg, var(--pj-primary)) !important; color: var(--be-c, var(--pj-on-primary, #fff)) !important;
    box-shadow: 0 -4px 0 0 #000 inset, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000 !important; padding: 1.1em 1.4em;
}
.pj-bb--pixel:active { box-shadow: 0 4px 0 0 rgba(0, 0, 0, .4) inset, 4px 0 0 #000, -4px 0 0 #000, 0 4px 0 #000, 0 -4px 0 #000 !important; }
@keyframes pj-glow { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pj-primary) 60%, transparent); } 70% { box-shadow: 0 0 0 18px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* badge */
.pj-bbadge {
    display: inline-flex; align-items: center; gap: .45em; font-size: calc(.78rem * var(--bz)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: .45em .95em; border-radius: 999px; background: var(--be-bg, color-mix(in srgb, var(--pj-primary) 14%, transparent)); color: var(--be-c, var(--pj-primary));
}
.pj-stx--light .pj-be:not(.has-color) .pj-bbadge { color: #fff; }
.pj-be--badge .fa-circle { font-size: .6em; color: #ff3b3b; }

/* sticker */
.pj-bsticker { display: inline-block; font-size: calc(4rem * var(--bz)); line-height: 1; filter: drop-shadow(0 .06em 0 rgba(0, 0, 0, .18)); user-select: none; }
.pj-bsticker.is-word, .is-word .pj-bsticker {
    font-size: calc(1.4rem * var(--bz)); font-weight: 900; padding: .25em .6em; background: var(--be-bg, #fff); color: var(--be-c, #111);
    border: .12em solid #111; border-radius: .45em; box-shadow: .18em .18em 0 #111; filter: none; letter-spacing: .03em;
}
.pj-bsticker--img { width: calc(120px * var(--bz)); height: auto; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 14px rgba(0, 0, 0, .28)); }
[data-pj-confetti] { cursor: pointer; }

/* icon */
.pj-bicon { display: inline-grid; place-items: center; font-size: calc(2.4rem * var(--bz)); color: var(--be-c, var(--pj-primary)); line-height: 1; }
.pj-be--icon.has-bg .pj-bicon { background: var(--be-bg); width: 1.9em; height: 1.9em; border-radius: 30%; font-size: calc(1.6rem * var(--bz)); }
.pj-be__cap { display: block; margin-top: 8px; color: var(--pj-muted); font-size: calc(.9rem * var(--bz)); }

/* card */
.pj-bcard { height: 100%; padding: 26px; border-radius: var(--pj-radius, 16px); background: var(--be-bg, var(--pj-card)); border: 1px solid var(--pj-card-line, var(--pj-line)); font-size: calc(1rem * var(--bz)); color: var(--be-c, inherit); }
.pj-blk .pj-bcard h3 { font-size: 1.2em; margin: 0 0 8px; color: var(--be-c, var(--pj-ink)); }
.pj-bcard .pj-prose { color: var(--pj-muted); }
.pj-bcard .pj-prose > :last-child { margin-bottom: 0; }
.pj-bcard__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 16px; font-size: 1.25em; background: color-mix(in srgb, var(--pj-primary) 14%, transparent); color: var(--pj-primary); }
.pj-be--card .pj-be__in, .pj-be--card a.pj-be__a { height: 100%; display: block; }
.pj-be--card { flex: 1 1 auto; }

/* list */
.pj-blist { list-style: none; padding: 0; margin: 0; display: grid; gap: .6em; font-size: calc(1rem * var(--bz)); color: var(--be-c, inherit); }
.pj-blist li { display: flex; gap: .65em; align-items: baseline; }
.pj-blist i { color: var(--pj-primary); flex: 0 0 auto; }
.pj-be--list.has-bg .pj-be__in { background: var(--be-bg); padding: 18px 20px; border-radius: var(--pj-radius, 14px); }

/* live price */
.pj-bprice { font-size: calc(1rem * var(--bz)); }
.pj-bprice__label { display: block; color: var(--pj-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 4px; }
.pj-bprice__row { display: flex; align-items: baseline; gap: .6em; flex-wrap: wrap; }
.pj-bprice__row b { font-size: 2.4em; line-height: 1; color: var(--be-c, var(--pj-ink)); font-variant-numeric: tabular-nums; }
.pj-bprice__ch { font-weight: 800; font-size: .95em; padding: .2em .55em; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.pj-bprice__ch.is-up { color: #16a34a; }
.pj-bprice__ch.is-down { color: #e11d48; }
.pj-stx--light .pj-bprice__ch.is-up { color: #4ade80; }
.pj-stx--light .pj-bprice__ch.is-down { color: #fb7185; }
.pj-be--price.has-bg .pj-be__in { background: var(--be-bg); padding: 18px 22px; border-radius: var(--pj-radius, 16px); }

/* countdown */
.pj-bcd { font-size: calc(1rem * var(--bz)); }
.pj-bcd__label { display: block; color: var(--pj-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 10px; }
.pj-bcd__row { display: inline-flex; gap: .55em; flex-wrap: wrap; }
.pj-cal--center .pj-bcd__row, .pj-ba--center .pj-bcd__row { justify-content: center; }
.pj-bcd__row > span { display: grid; justify-items: center; min-width: 3.6em; padding: .7em .5em .55em; border-radius: var(--pj-radius, 14px); background: var(--be-bg, var(--pj-card)); border: 1px solid var(--pj-card-line, var(--pj-line)); }
.pj-bcd__row b { font-size: 2.2em; line-height: 1; color: var(--be-c, var(--pj-ink)); font-variant-numeric: tabular-nums; }
.pj-bcd__row small { font-size: .72em; text-transform: uppercase; letter-spacing: .08em; color: var(--pj-muted); margin-top: .35em; }
.pj-bcd.is-done .pj-bcd__row { opacity: .6; }
.pj-bx--shadow3d .pj-bcd__row.pj-be__t, .pj-bx--glow .pj-bcd__row.pj-be__t, .pj-bx--neon .pj-bcd__row.pj-be__t { text-shadow: none; animation: none; }
.pj-bx--shadow3d .pj-bcd__row b { text-shadow: .03em .03em 0 var(--pj-primary), .06em .06em 0 var(--pj-primary); }
.pj-bx--glow .pj-bcd__row b, .pj-bx--neon .pj-bcd__row b { text-shadow: 0 0 .3em var(--pj-primary), 0 0 .8em var(--pj-primary); }
.pj-bx--comic .pj-bcd__row.pj-be__t { -webkit-text-stroke: 0; text-shadow: none; }
.pj-bx--comic .pj-bcd__row > span { border: 3px solid #111; box-shadow: 4px 4px 0 #111; background: var(--be-bg, #fff); }
.pj-bx--comic .pj-bcd__row b { color: var(--be-c, #111); }

/* ticker */
.pj-bmq { overflow: hidden; background: var(--be-bg, transparent); padding: .35em 0; font-size: calc(1.3rem * var(--bz)); font-weight: 800; color: var(--be-c, var(--pj-ink)); white-space: nowrap; margin-inline: -4px; }
.pj-be--marquee.has-bg .pj-bmq { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .5); }
.pj-bmq__track { display: inline-flex; animation: pj-marquee 28s linear infinite; }
.pj-bsp--slow .pj-bmq__track { animation-duration: 50s; }
.pj-bsp--fast .pj-bmq__track { animation-duration: 14s; }
.pj-bmq__track > span { padding-right: 1.6em; }
@keyframes pj-marquee { to { transform: translateX(-50%); } }

/* media */
.pj-bimg { display: block; width: 100%; height: auto; border-radius: var(--pj-radius, 16px); }
.pj-bvideo { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--pj-radius, 16px); overflow: hidden; background: #000; }
.pj-bvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
span.pj-bvideo { display: grid; place-items: center; background: var(--pj-bg-soft); color: var(--pj-muted); }
.pj-bwidget { width: 100%; }
.pj-bwidget .pj-token { margin: 0; }
.pj-be--socials .pj-socials { font-size: calc(1rem * var(--bz)); margin: 0; }
.pj-bnote { font-size: .88rem; margin: 0; }

/* divider + spacer */
.pj-bdiv { width: 100%; color: var(--be-c, var(--pj-line)); }
.pj-bdiv--line { border-top: calc(2px * var(--bz)) solid currentColor; }
.pj-bdiv--dashed { border-top: calc(2px * var(--bz)) dashed currentColor; }
.pj-bdiv--dots { height: calc(6px * var(--bz)); background: radial-gradient(currentColor 50%, transparent 52%) 0 50% / calc(14px * var(--bz)) 100% repeat-x; }
.pj-bdiv--zigzag { height: calc(12px * var(--bz)); background: linear-gradient(135deg, currentColor 25%, transparent 25%) -6px 0 / 12px 12px, linear-gradient(225deg, currentColor 25%, transparent 25%) -6px 0 / 12px 12px; background-repeat: repeat-x; }
.pj-bdiv--wave { height: calc(14px * var(--bz)); background: radial-gradient(circle at 10px -4px, transparent 11px, currentColor 12px 14px, transparent 15px) 0 0 / 20px 14px repeat-x; }
.pj-bdiv--stars { text-align: center; font-size: calc(1.2rem * var(--bz)); letter-spacing: .6em; color: var(--be-c, var(--pj-primary)); }
.pj-bspacer { height: var(--be-h, 40px); }

/* corners + shadows of boxy elements */
.pj-br--square :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-bcd__row > span, .pj-token) { border-radius: 0 !important; }
.pj-br--soft :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-bcd__row > span, .pj-token) { border-radius: 10px !important; }
.pj-br--round :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bcd__row > span, .pj-token) { border-radius: 28px !important; }
.pj-br--round :is(.pj-bb, .pj-bbadge) { border-radius: 18px !important; }
.pj-br--pill :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-bcd__row > span, .pj-token) { border-radius: 999px !important; }
.pj-br--circle :is(.pj-bimg, .pj-bcard) { border-radius: 50% !important; aspect-ratio: 1; object-fit: cover; }
.pj-br--circle .pj-bicon { background: var(--be-bg, color-mix(in srgb, var(--pj-primary) 14%, transparent)); width: 1.9em; height: 1.9em; border-radius: 50%; font-size: calc(1.6rem * var(--bz)); }
.pj-bs--soft :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-token, .pj-bcd__row > span, .pj-bwidget > *) { box-shadow: 0 14px 34px -18px rgba(10, 16, 40, .45) !important; }
.pj-bs--deep :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-token, .pj-bcd__row > span, .pj-bwidget > *) { box-shadow: 0 40px 80px -30px rgba(10, 16, 40, .65) !important; }
.pj-bs--hard :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-token, .pj-bcd__row > span, .pj-bwidget > *) { box-shadow: 8px 8px 0 var(--pj-ink) !important; }
.pj-bs--comic :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-token, .pj-bcd__row > span, .pj-bwidget > *) { border: 3px solid #111 !important; box-shadow: 6px 6px 0 #111 !important; }
.pj-bs--glow :is(.pj-bimg, .pj-bvideo, .pj-bcard, .pj-bb, .pj-bbadge, .pj-token, .pj-bcd__row > span, .pj-bwidget > *) { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pj-primary) 50%, transparent), 0 0 50px -6px color-mix(in srgb, var(--pj-primary) 70%, transparent) !important; }
.pj-bs--comic .pj-bsticker:not(.is-word), .pj-bs--hard .pj-bsticker:not(.is-word) { filter: drop-shadow(5px 5px 0 #111); }
.pj-bs--glow .pj-bsticker, .pj-bs--glow .pj-bicon { filter: drop-shadow(0 0 18px var(--pj-primary)); }

/* show on */
@media (max-width: 760px) { .pj-bh--mobile { display: none !important; } }
@media (min-width: 761px) { .pj-bh--desktop { display: none !important; } }

/* ======================================================================= motion */
.pj-be[class*="pj-bm--"] .pj-be__in { display: inline-block; --spd: 1; }
.pj-be[class*="pj-bm--"]:is(.pj-be--image, .pj-be--video, .pj-be--widget, .pj-be--card, .pj-be--marquee, .pj-be--text, .pj-be--countdown, .pj-be--list, .pj-be--price) .pj-be__in { display: block; }
.pj-bsp--slow .pj-be__in { --spd: 1.8; }
.pj-bsp--fast .pj-be__in { --spd: .5; }
.pj-bm--float .pj-be__in { animation: pj-float calc(3.4s * var(--spd)) ease-in-out infinite; }
.pj-bm--bounce .pj-be__in { animation: pj-bounce calc(1.3s * var(--spd)) cubic-bezier(.28, .84, .42, 1) infinite; }
.pj-bm--wiggle .pj-be__in { animation: pj-wiggle calc(1.6s * var(--spd)) ease-in-out infinite; }
.pj-bm--pulse .pj-be__in { animation: pj-pulse calc(1.6s * var(--spd)) ease-in-out infinite; }
.pj-bm--spin .pj-be__in { animation: pj-spin calc(6s * var(--spd)) linear infinite; }
.pj-bm--shake .pj-be__in { animation: pj-shake calc(2.6s * var(--spd)) ease-in-out infinite; }
.pj-bm--tada .pj-be__in { animation: pj-tada calc(2.4s * var(--spd)) ease infinite; }
.pj-bm--jelly .pj-be__in { animation: pj-jelly calc(2.2s * var(--spd)) ease infinite; }
.pj-bm--swing .pj-be__in { animation: pj-swing calc(2.4s * var(--spd)) ease-in-out infinite; transform-origin: top center; }
.pj-bm--heartbeat .pj-be__in { animation: pj-heartbeat calc(1.5s * var(--spd)) ease-in-out infinite; }
@keyframes pj-float { 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes pj-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 10% { transform: scale(1.06, .94); } 40% { transform: translateY(-22px) scale(.96, 1.04); } 60% { transform: translateY(0) scale(1.04, .96); } }
@keyframes pj-wiggle { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes pj-pulse { 50% { transform: scale(1.07); } }
@keyframes pj-spin { to { transform: rotate(360deg); } }
@keyframes pj-shake { 0%, 60%, 100% { transform: none; } 64%, 72%, 80% { transform: translateX(-6px) rotate(-2deg); } 68%, 76% { transform: translateX(6px) rotate(2deg); } }
@keyframes pj-tada { 0%, 40%, 100% { transform: none; } 4%, 8% { transform: scale(.92) rotate(-4deg); } 12%, 20%, 28% { transform: scale(1.12) rotate(4deg); } 16%, 24% { transform: scale(1.12) rotate(-4deg); } }
@keyframes pj-jelly { 0%, 50%, 100% { transform: scale(1, 1); } 10% { transform: scale(1.18, .84); } 20% { transform: scale(.86, 1.14); } 30% { transform: scale(1.08, .94); } 40% { transform: scale(.98, 1.03); } }
@keyframes pj-swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
@keyframes pj-heartbeat { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.14); } 20% { transform: scale(1.02); } }

/* entrance on scroll (pj-style.js adds .is-in); elements use translate/scale so their own transform stays */
.pj-js [data-pj-enter] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1), scale .8s cubic-bezier(.2, .7, .2, 1), rotate .8s cubic-bezier(.2, .7, .2, 1); }
.pj-js .pj-s[data-pj-enter] { transition: none; }
.pj-js .pj-s[data-pj-enter] > :not(.pj-sx__bg) { transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1), scale .9s cubic-bezier(.2, .7, .2, 1), rotate .9s; }
.pj-js :is(.pj-be, .pj-brow, .pj-bcol)[data-pj-enter]:not(.is-in), .pj-js .pj-s[data-pj-enter]:not(.is-in) > :not(.pj-sx__bg) { opacity: 0; }
.pj-js [data-pj-enter="up"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="up"]:not(.is-in) > :not(.pj-sx__bg) { translate: 0 44px; }
.pj-js [data-pj-enter="left"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="left"]:not(.is-in) > :not(.pj-sx__bg) { translate: -60px 0; }
.pj-js [data-pj-enter="right"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="right"]:not(.is-in) > :not(.pj-sx__bg) { translate: 60px 0; }
.pj-js [data-pj-enter="zoom"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="zoom"]:not(.is-in) > :not(.pj-sx__bg) { scale: .86; }
.pj-js [data-pj-enter="pop"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="pop"]:not(.is-in) > :not(.pj-sx__bg) { scale: .5; }
.pj-js [data-pj-enter="pop"].is-in, .pj-js .pj-s[data-pj-enter="pop"].is-in > :not(.pj-sx__bg) { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.pj-js [data-pj-enter="flip"]:not(.is-in):not(.pj-s), .pj-js .pj-s[data-pj-enter="flip"]:not(.is-in) > :not(.pj-sx__bg) { rotate: x 70deg; }

/* confetti pieces (pj-style.js) */
.pj-confetti { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2147483000; font-size: 18px; line-height: 1; will-change: transform, opacity; }
.pj-confetti.is-bit { width: 9px; height: 14px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
    .pj-be__in, .pj-bmq__track, .pj-sx__pat, .pj-be__t, :is(html body .pj-s.pj-shx--rainbow, .pj-shx--neon, .pj-shx--glitch) :is(h1, h2), .pj-bb--glow { animation: none !important; }
    .pj-js [data-pj-enter], .pj-js .pj-s[data-pj-enter] > * { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; transition: none !important; }
}

/* ======================================================================= editor preview only */
.pj-editing .pj-bempty {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 84px; padding: 14px;
    border: 2px dashed color-mix(in srgb, var(--pj-primary) 45%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--pj-primary) 6%, transparent);
    color: var(--pj-primary); font: 600 .9rem/1.2 var(--pj-font, system-ui); cursor: pointer;
}
.pj-editing .pj-bempty:hover { background: color-mix(in srgb, var(--pj-primary) 12%, transparent); }
.pj-editing .pj-bempty.is-row { min-height: 140px; }
.pj-editing [data-pj-el] { cursor: pointer; }
.pj-editing .pj-be:hover { outline: 1px dashed color-mix(in srgb, #3b82f6 70%, transparent); outline-offset: 4px; }
.pj-editing .pj-be.is-pj-el { outline: 2px solid #3b82f6; outline-offset: 4px; }
.pj-editing .pj-bcol.is-pj-el, .pj-editing .pj-brow.is-pj-el { outline: 2px dashed #3b82f6; outline-offset: 6px; }
.pj-editing .pj-bspacer { background: repeating-linear-gradient(45deg, rgba(59, 130, 246, .08) 0 6px, transparent 6px 12px); }
.pj-editing .pj-bmq:hover .pj-bmq__track { animation-play-state: paused; }

/* own margins outside a section (Layout tab › Width & space › Space outside); a boxed background keeps its own side margin */
html body .pj-s.pj-smo--custom { margin-top: var(--sx-mt, 0px); margin-bottom: var(--sx-mb, 0px); }
html body .pj-s.pj-smo--custom:is(.pj-sfr--panel, .pj-sfr--glass, .pj-sfr--glow, .pj-sfr--comic) { width: calc(100% - 2 * var(--sx-ms, 16px)); max-width: none; margin-left: auto; margin-right: auto; }