/*
 * BudBuddies Page Experience — shared, dependency-free presentation layer.
 * The source document remains the product: this file only gives it a frame.
 */
@font-face {
	font-family: "BB Space Grotesk";
	src: url("../fonts/space-grotesk.woff2") format("woff2-variations");
	font-display: swap;
	font-weight: 300 700;
}

body.bbx-full-bleed-page { container-type: inline-size; overflow-x: clip; }
body.bbx-rendered-page .page-hero { display: none !important; }
/* Only vertical padding is removed (it would open a cream gap above the
 * hero). Horizontal width/margins/padding of .page-content are left alone:
 * the experience breaks out to full bleed on its own via negative margins,
 * while theme blocks rendered as SIBLINGS inside the same .page-content
 * (e.g. the "Recently viewed" strip) keep their normal centring. */
body.bbx-rendered-page .page-content { padding-block: 0 !important; }
body.bbx-rendered-page :where(.site-content, .content-area, .content, .entry-content, .inside-article, article.page, .elementor, .elementor-section-wrap, .elementor-widget-wrap, .elementor-widget-container):has(> .bbx-page) {
	width: 100% !important; max-width: none !important;
	margin-inline: 0 !important; padding-inline: 0 !important;
}
body.bbx-full-bleed-page .bbx-page {
	width: 100vw; width: 100cqw; max-width: none;
	margin-left: calc(50% - 50vw); margin-left: calc(50% - 50cqw);
	margin-right: calc(50% - 50vw); margin-right: calc(50% - 50cqw);
}
.bbx-page {
	--bbx-ink: #17252d; --bbx-paper: #f3ecdc; --bbx-surface: #fffaf1;
	--bbx-night: #211027; --bbx-plum: #422156; --bbx-line: #dbcbb9;
	--bbx-accent: #b9e447; --bbx-warm: #edb83f; --bbx-alert: #ef715e;
	--bbx-measure: 92ch; --bbx-radius: 12px; --bbx-motion: 1;
	color: var(--bbx-ink); background: var(--bbx-paper);
	font-family: "BB Space Grotesk", "Trebuchet MS", sans-serif;
	position: relative; width: 100%; max-width: none;
	overflow: clip; isolation: isolate;
}
.bbx-page *, .bbx-page *::before, .bbx-page *::after { box-sizing: border-box; }
.bbx-page :where(p,li,td,th,a,button,input,select,textarea) {
	font-family: "Trebuchet MS", ui-sans-serif, sans-serif !important;
}
.bbx-page :where(h1,h2,h3,h4,h5,h6,.bbx-kicker,.bbx-toc-title,.bbx-meta) {
	font-family: "BB Space Grotesk", sans-serif !important;
}
/*
 * Heading isolation: some themes/plugins append broad, !important heading
 * rules after this stylesheet. Keep the reset scoped to our rendered
 * experience, then re-assert the editorial hierarchy below.
 */
.bbx-page .bbx-hero h1,
.bbx-page .bbx-source h2,
.bbx-page .bbx-source h3,
.bbx-page .bbx-source h4,
.bbx-page .bbx-source h5,
.bbx-page .bbx-source h6 {
	font-family: "BB Space Grotesk", sans-serif !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--bbx-plum) !important;
	background: transparent !important;
	background-image: none !important;
	-webkit-text-stroke: 0 transparent !important;
	text-shadow: none !important;
	transform: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.bbx-shell { width: min(1680px, calc(100% - 72px)); margin-inline: auto; }
.bbx-hero { position: relative; min-height: clamp(390px, 54vw, 620px); display: grid; align-items: center; overflow: hidden; color: var(--bbx-paper); background: var(--bbx-night); }
.bbx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/pattern.webp") center / 420px; opacity: .08; }
.bbx-hero-inner { width: min(1680px, calc(100% - 72px)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bbx-kicker { color: var(--bbx-accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bbx-page .bbx-hero h1 { max-width: 760px; margin: 14px 0 18px !important; color: #fff8ed !important; font-size: clamp(44px, 8vw, 100px); line-height: .94; letter-spacing: -.055em !important; text-wrap: balance; }
.bbx-hero p { max-width: 60ch; color: #fff8ed; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; }
/* Top padding keeps the mascot's head clear of collapsing sticky bars
 * (theme heat-warning banner) and gives the float animation headroom. */
.bbx-art { position: relative; min-height: 320px; display: grid; place-items: center; padding-top: 34px; }
.bbx-art img { position: relative; z-index: 1; width: min(100%, 390px); max-height: 400px; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(0,0,0,.27)); }
.bbx-orbits { position: absolute; width: min(100%, 430px); aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--bbx-accent) 60%, transparent); border-radius: 50%; transform: rotate(-17deg); }
.bbx-orbits::before, .bbx-orbits::after { content: ""; position: absolute; inset: 12% -8%; border: 1px solid color-mix(in srgb, var(--bbx-paper) 35%, transparent); border-radius: 50%; transform: rotate(31deg); }
.bbx-orbits::after { inset: auto 12% 18% auto; width: 12px; height: 12px; background: var(--bbx-warm); border: 0; box-shadow: 0 0 0 8px color-mix(in srgb, var(--bbx-warm) 18%, transparent); }
.bbx-stars { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--bbx-accent) 0 2px, transparent 2.5px); background-size: 83px 97px; opacity: .4; }
.bbx-progress { position: sticky; top: 0; z-index: 5; height: 4px; background: color-mix(in srgb, var(--bbx-line) 70%, transparent); }
.bbx-progress::after { content: ""; display: block; width: var(--bbx-progress, 0%); height: 100%; background: var(--bbx-accent); transform-origin: left; }
.bbx-layout { width: min(1680px, calc(100% - 72px)); margin: 0 auto; padding: 72px 0 100px; display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, var(--bbx-measure)); gap: clamp(44px, 5vw, 96px); align-items: start; justify-content: start; }
/* A hidden rail (document without any h2/h3 headings) must also collapse to
 * one column, or the document gets squeezed into the narrow rail track. */
.bbx-layout:not(:has(.bbx-toc:not([hidden]))) { grid-template-columns: minmax(0, var(--bbx-measure)); justify-content: center; }
/*
 * The sticky rail itself must never trap the reader's wheel/touch scrolling:
 * no overscroll-behavior here (a non-scrollable or fully-scrolled rail would
 * otherwise swallow page scrolling whenever the pointer rests over it). Only
 * the inner list scrolls, and page scroll chains through it naturally.
 */
/* Sticky offset accounts for the live theme's sticky header (and the
 * admin bar for logged-in users) so the first entries are never hidden
 * behind it when the rail pins. */
.bbx-toc { position: sticky; top: 118px; border-left: 2px solid var(--bbx-warm); padding: 4px 0 4px 20px; }
.admin-bar .bbx-toc { top: 150px; }
@media (min-width: 761px) {
	.bbx-toc .bbx-toc-list { max-height: calc(100dvh - 175px); overflow: auto; scrollbar-width: thin; }
	.admin-bar .bbx-toc .bbx-toc-list { max-height: calc(100dvh - 207px); }
}
.bbx-toc-disclosure { display: block; }
.bbx-toc-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; color: var(--bbx-plum); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; list-style: none; cursor: default; }
.bbx-toc-title::-webkit-details-marker { display: none; }
.bbx-toc-summary-state { display: none; }
.bbx-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: bbx-section; }
.bbx-toc-item { position: relative; margin: 0 0 13px; padding: 0 0 0 34px; counter-increment: bbx-section; }
.bbx-toc-item::before { content: counter(bbx-section, decimal-leading-zero); position: absolute; left: 0; top: 3px; color: #9c7125; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.bbx-toc-item::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: -8px; width: 1px; background: color-mix(in srgb, var(--bbx-warm) 40%, transparent); }
.bbx-toc-item:last-child::after { display: none; }
.bbx-toc a { display: block; color: var(--bbx-plum); font-size: 14px; font-weight: 700; line-height: 1.45; text-decoration: none; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bbx-toc a:hover { color: #8d5d16; text-decoration: underline; text-decoration-thickness: 2px; }
.bbx-toc a[aria-current="location"] { color: #8d5d16; font-weight: 800; }
.bbx-toc a[aria-current="location"]::after { content: " — current"; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Auto-fit: long documents densify, then collapse sub-entries so the whole
 * rail stays visible without a scrollbar. Applied by JS on desktop only. */
.bbx-toc-list::-webkit-scrollbar { width: 5px; }
.bbx-toc-list::-webkit-scrollbar-track { background: transparent; }
.bbx-toc-list::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bbx-warm) 45%, transparent); border-radius: 999px; }
@media (min-width: 761px) {
	.bbx-toc .bbx-toc-list { scrollbar-color: color-mix(in srgb, var(--bbx-warm) 45%, transparent) transparent; }
	.bbx-toc-compact .bbx-toc-title { margin-bottom: 10px; }
	.bbx-toc-compact .bbx-toc-item { margin-bottom: 7px; padding-left: 27px; }
	.bbx-toc-compact .bbx-toc-item::before { font-size: 11px; top: 2px; }
	.bbx-toc-compact .bbx-toc-item::after { left: 10px; top: 20px; bottom: -4px; }
	.bbx-toc-compact a { font-size: 13px; line-height: 1.35; }
}
.bbx-document { min-width: 0; width: 100%; max-width: var(--bbx-measure); }
.bbx-source { font-size: 18px; line-height: 1.75; }
.bbx-source :where(.elementor, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-widget-container, .wp-block-group, .wp-block-columns) { width: 100% !important; max-width: none !important; min-width: 0 !important; margin-inline: 0 !important; }
.bbx-source :where(.elementor-container, .elementor-row) { display: block !important; }
.bbx-source :where(.elementor-column, .wp-block-column) { flex: 1 1 100% !important; }
.bbx-source > :first-child { margin-top: 0; }
/* Anchor landing offset: the live theme keeps a sticky header on screen
 * while scrolling, so anchored headings need generous clearance to land
 * fully visible below it (plus the admin bar when logged in). */
.bbx-source :where(h2,h3,h4) { scroll-margin-top: 200px; color: var(--bbx-plum); line-height: 1.08; letter-spacing: -.025em; }
.admin-bar .bbx-source :where(h2,h3,h4) { scroll-margin-top: 232px; }
.bbx-page .bbx-source h2 { margin: 64px 0 18px !important; font-size: clamp(28px, 4vw, 48px); }
.bbx-page .bbx-source h3 { margin: 38px 0 12px !important; font-size: clamp(21px, 3vw, 30px); }
.bbx-page .bbx-source h4 { margin: 28px 0 8px !important; font-size: 19px; }
.bbx-page .bbx-source h5 { margin: 22px 0 7px !important; font-size: 17px; line-height: 1.18; }
.bbx-page .bbx-source h6 { margin: 18px 0 6px !important; font-size: 15px; line-height: 1.22; }
.bbx-source p, .bbx-source ul, .bbx-source ol, .bbx-source figure, .bbx-source blockquote { margin: 0 0 1.2em; }
.bbx-source a { color: var(--bbx-plum); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bbx-source a[href*="t.me"], .bbx-source a[href^="mailto:"],
.bbx-source a[href*="reddit.com"], .bbx-source a[href*="x.com/"],
.bbx-source a[href*="instagram.com"] {
	display: inline-flex; min-height: 44px; align-items: center; padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--bbx-warm) 55%, transparent);
	border-radius: 8px; background: color-mix(in srgb, var(--bbx-warm) 8%, transparent);
	transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.bbx-page .bbx-source a[href*="instagram"] {
display: inline-flex !important; min-height: 44px !important; align-items: center;
}
.bbx-source a[href*="t.me"]:hover, .bbx-source a[href^="mailto:"]:hover,
.bbx-source a[href*="t.me"]:focus-visible, .bbx-source a[href^="mailto:"]:focus-visible {
	color: #7a4f0c; border-color: #c99d3a; background: color-mix(in srgb, #c99d3a 18%, var(--bbx-surface));
	text-decoration-thickness: 2px; transform: translateY(-1px);
}
.bbx-source hr { margin: 48px 0; border: 0; border-top: 1px solid var(--bbx-line); }
.bbx-source table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: .93em; table-layout: fixed; }
.bbx-source th, .bbx-source td { padding: 12px 14px; border: 1px solid var(--bbx-line); text-align: left; vertical-align: top; }
.bbx-source :where(th,td) { overflow-wrap: anywhere; word-break: normal; }
.bbx-source th { color: var(--bbx-plum); background: color-mix(in srgb, var(--bbx-lavender, #d8c8ee) 35%, var(--bbx-surface)); }
.bbx-source figure { max-width: 100%; overflow-x: auto; }
.bbx-source > table { display: block; overflow-x: auto; }
.bbx-source blockquote { border-left: 4px solid var(--bbx-accent); padding: 8px 22px; color: #544454; }
.bbx-backtop { display: inline-flex; min-height: 44px; align-items: center; margin-top: 30px; padding: 0 16px; border: 1px solid var(--bbx-plum); border-radius: 999px; color: var(--bbx-plum); background: transparent; font-weight: 700; cursor: pointer; }
.bbx-backtop:hover { background: var(--bbx-plum); color: var(--bbx-paper); }
.bbx-page :focus-visible { outline: 3px solid var(--bbx-accent); outline-offset: 3px; }

/* Profiles: same contract, different editorial temperature. */
.bbx-profile-origin { --bbx-accent: #b9e447; --bbx-warm: #edb83f; }
.bbx-profile-origin .bbx-hero { background: #422156; }
.bbx-profile-origin .bbx-source h2 { border-left: 7px solid var(--bbx-accent) !important; padding-left: 18px !important; }
.bbx-profile-lab { --bbx-accent: #8ec7bd; --bbx-warm: #e49a55; --bbx-line: #b9cfc8; }
.bbx-profile-lab .bbx-hero { background: #193a42; }
.bbx-profile-lab .bbx-source h2 { border-bottom: 2px solid var(--bbx-accent) !important; padding-bottom: 12px !important; }
.bbx-profile-vault, .bbx-profile-charter { --bbx-accent: #8eafc0; --bbx-warm: #c99d65; --bbx-measure: 86ch; }
.bbx-profile-vault .bbx-hero, .bbx-profile-charter .bbx-hero { min-height: 360px; background: #28343b; }
.bbx-profile-vault .bbx-source, .bbx-profile-charter .bbx-source { font-size: 18px; line-height: 1.84; }
.bbx-profile-vault .bbx-source h2, .bbx-profile-charter .bbx-source h2 { font-size: clamp(25px, 3vw, 38px); border-top: 1px solid var(--bbx-line) !important; padding-top: 22px !important; }
.bbx-profile-charter { --bbx-accent: #c69b67; --bbx-warm: #8eafc0; }
.bbx-profile-charter .bbx-hero { background: #302b2b; }
.bbx-profile-charter .bbx-source { font-family: Georgia, serif; }
.bbx-profile-signal { --bbx-accent: #ef715e; --bbx-warm: #b9e447; }
.bbx-profile-signal .bbx-hero { background: #183b42; }
.bbx-profile-signal .bbx-source h3 { color: #22606a !important; }
.bbx-profile-return-path { --bbx-accent: #f0a36d; --bbx-warm: #b9e447; }
.bbx-profile-return-path .bbx-hero { background: #542d3e; }
.bbx-profile-return-path .bbx-source h2 { position: relative; padding-left: 22px !important; }
.bbx-profile-return-path .bbx-source h2::before { content: ""; position: absolute; left: 0; top: .2em; width: 8px; height: 8px; border: 2px solid var(--bbx-accent); border-radius: 50%; }
.bbx-profile-launchpad, .bbx-profile-constellation, .bbx-profile-rewards { --bbx-accent: #b9e447; --bbx-warm: #edb83f; }
.bbx-profile-launchpad .bbx-hero { background: #2d2050; }
.bbx-profile-launchpad .bbx-source h2 { color: #6b3c7b !important; }
.bbx-profile-constellation .bbx-hero { background: #234553; }
.bbx-profile-constellation .bbx-source h2 { color: #246477 !important; }
/* Campaigns & Rewards: the hero must read as the SAME surface as the page's
 * own dark content, down to the small details. The content wrapper (.bb-rw)
 * paints radial-gradient(1200px 700px at 50% -8%, #3a2350 0%, #2B1B38 38%,
 * #1A0F24 80%) in Poppins with gold #F9C70C / green #82C341 accents. The hero
 * therefore paints the EXACT mirrored gradient (same size, same stops, centre
 * just below its bottom edge), drops the pattern/aurora overlays the content
 * does not have, fades its star field out before the seam, adopts the
 * content's own accent palette for orbit decorations, and sets the title in
 * Poppins + the content's cream. Result: one continuous surface — glow meets
 * glow at the centre, #1A0F24 meets #1A0F24 at the edges, same type voice. */
.bbx-profile-rewards { --bbx-accent: #82C341; --bbx-warm: #F9C70C; }
.bbx-profile-rewards .bbx-hero { background: radial-gradient(1200px 700px at 50% 108%, #3a2350 0%, #2B1B38 38%, #1A0F24 80%), #1A0F24; }
.bbx-profile-rewards .bbx-hero::before, .bbx-profile-rewards .bbx-hero::after { display: none; }
.bbx-profile-rewards .bbx-stars, .bbx-profile-rewards .bbx-orbits { -webkit-mask-image: linear-gradient(#000 55%, transparent 90%); mask-image: linear-gradient(#000 55%, transparent 90%); }
.bbx-page.bbx-profile-rewards .bbx-hero h1 { font-family: "Poppins", "BB Space Grotesk", sans-serif !important; color: #F7F5EB !important; }
.bbx-profile-rewards .bbx-layout { padding-top: 0; padding-bottom: 0; width: 100%; }
.bbx-profile-rewards .bbx-source > :first-child { margin-top: 0; }
.bbx-profile-rewards .bbx-source h2 { border-bottom: 4px solid var(--bbx-accent) !important; padding-bottom: 8px !important; }
.bbx-profile-field-notes { --bbx-accent: #e2a24f; --bbx-warm: #b9e447; --bbx-line: #d7bea0; }
.bbx-profile-field-notes .bbx-hero { background: #4b352d; }
.bbx-profile-field-notes .bbx-source { background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(66,33,86,.06) 32px); }
.bbx-profile-field-notes .bbx-source h2 { color: #663d35 !important; transform: rotate(-.4deg) !important; }
/* The handbook source is almost entirely bullet lists with no headings:
 * give it editorial rhythm — card-style entries, warm markers, a bold
 * lead-in — so it reads as field notes rather than a plain list dump. */
.bbx-profile-field-notes .bbx-source > ul, .bbx-profile-field-notes .bbx-source > ol { margin: 0 0 26px; padding: 0; list-style: none; }
.bbx-profile-field-notes .bbx-source > ul > li, .bbx-profile-field-notes .bbx-source > ol > li { position: relative; margin: 0 0 14px; padding: 16px 20px 16px 52px; background: rgba(255,250,241,.86); border: 1px solid var(--bbx-line); border-left: 5px solid var(--bbx-accent); border-radius: 10px; box-shadow: 0 6px 16px rgba(75,53,45,.08); }
.bbx-profile-field-notes .bbx-source > ul > li::before, .bbx-profile-field-notes .bbx-source > ol > li::before { content: "✦"; position: absolute; left: 20px; top: 15px; color: #b0641f; font-size: 17px; }
.bbx-profile-field-notes .bbx-source > ul > li:nth-child(3n) { border-left-color: var(--bbx-warm); }
.bbx-profile-field-notes .bbx-source > ul > li:nth-child(3n)::before { color: #6a8a1a; }
.bbx-profile-field-notes .bbx-source > ul > li:nth-child(3n+2) { border-left-color: #c46a4a; }
.bbx-profile-field-notes .bbx-source > ul > li:nth-child(3n+2)::before { color: #c46a4a; }
.bbx-profile-field-notes .bbx-source > ul > li > strong:first-child, .bbx-profile-field-notes .bbx-source > ul > li > b:first-child { display: block; margin-bottom: 4px; color: #663d35; font-family: "BB Space Grotesk", sans-serif; font-size: 1.06em; letter-spacing: -.01em; }
.bbx-profile-field-notes .bbx-source > ul > li ul { margin: 10px 0 0; padding-left: 18px; list-style: disc; }
.bbx-profile-field-notes .bbx-source > ul > li ul li { margin: 6px 0; }
.bbx-profile-field-notes .bbx-source > p:first-of-type { font-size: 1.12em; font-weight: 600; color: #4b352d; }

/* ═════════════════════════ Hero choreography ═════════════════════════
 * Motion starts automatically, loops forever, and is bespoke to every page:
 * each profile stages its own scene, tuned to what the mascot is actually
 * doing in the artwork. Grounded poses (standing / perched figures) never
 * levitate — they breathe, sway and cast a live contact shadow — while
 * weightless poses drift. data-motion only sets the tempo: "expressive"
 * pages run the same scene faster; "off" disables it entirely. */
.bbx-page { --bbx-tempo: 1; }
.bbx-page[data-motion="expressive"] { --bbx-tempo: .7; }
@keyframes bbx-art-drift { 0%,100% { transform: translate3d(0,0,0) rotate(-2deg); } 50% { transform: translate3d(0,-22px,0) rotate(2deg); } }
@keyframes bbx-orbit-revolve { 0% { transform: rotate(-17deg); } 100% { transform: rotate(343deg); } }
@keyframes bbx-stars-pulse { 0%,100% { opacity: .18; transform: translate3d(0,0,0); } 50% { opacity: .85; transform: translate3d(-22px,-16px,0); } }
@keyframes bbx-pattern-drift { 0% { background-position: 0 0; } 100% { background-position: 420px 420px; } }
@keyframes bbx-aurora-breathe { 0%,100% { opacity: .26; transform: translate3d(-5%,0,0) scale(1); } 50% { opacity: .78; transform: translate3d(5%,-4%,0) scale(1.16); } }
.bbx-hero::after { content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; background: radial-gradient(42% 55% at 24% 38%, color-mix(in srgb, var(--bbx-accent) 34%, transparent) 0%, transparent 70%), radial-gradient(36% 48% at 78% 62%, color-mix(in srgb, var(--bbx-warm) 30%, transparent) 0%, transparent 70%); opacity: .4; }
/* Base scene — also the safety net for any future profile. */
.bbx-page .bbx-hero::before { animation: bbx-pattern-drift calc(38s * var(--bbx-tempo)) linear infinite; }
.bbx-page .bbx-hero::after { animation: bbx-aurora-breathe calc(8.5s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-page .bbx-art img { animation: bbx-art-drift calc(6.5s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-page .bbx-orbits { animation: bbx-orbit-revolve calc(28s * var(--bbx-tempo)) linear infinite; }
.bbx-page .bbx-stars { animation: bbx-stars-pulse calc(6s * var(--bbx-tempo)) ease-in-out infinite; }
/* Grounded poses: live contact shadow under the figure. */
@keyframes bbx-shadow-breathe { 0%,100% { opacity: .5; transform: translateX(-50%) scaleX(1); } 50% { opacity: .3; transform: translateX(-50%) scaleX(.92); } }
.bbx-page[data-grounded="true"] .bbx-art::after { content: ""; position: absolute; left: 50%; bottom: 5%; z-index: 0; width: 44%; height: 24px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.34), transparent 72%); filter: blur(2px); animation: bbx-shadow-breathe calc(5.5s * var(--bbx-tempo)) ease-in-out infinite; }
/* origin (About Us) — deep-space reverie: a wide weightless arc. */
@keyframes bbx-origin-drift { 0%,100% { transform: translate3d(-12px,8px,0) rotate(-5deg); } 50% { transform: translate3d(14px,-24px,0) rotate(3.6deg); } }
.bbx-profile-origin .bbx-art img { width: min(100%, 450px); max-height: 440px; animation: bbx-origin-drift calc(9s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-origin .bbx-orbits { animation-duration: calc(32s * var(--bbx-tempo)); }
/* lab (Quality Assurance) — the rocket rider flies a gentle test loop while
 * lab bubbles rise through the tank. */
@keyframes bbx-lab-flight { 0%,100% { transform: translate3d(-14px,9px,0) rotate(-3.4deg); } 50% { transform: translate3d(12px,-15px,0) rotate(2.6deg); } }
@keyframes bbx-lab-bubbles { 0% { transform: translateY(26px); opacity: .12; } 50% { opacity: .7; } 100% { transform: translateY(-34px); opacity: .08; } }
.bbx-profile-lab .bbx-art img { animation: bbx-lab-flight calc(5.2s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-lab .bbx-stars { background-image: radial-gradient(circle, #9fe0d0 0 2px, transparent 2.6px); background-size: 71px 89px; animation: bbx-lab-bubbles calc(7s * var(--bbx-tempo)) linear infinite; }
.bbx-profile-lab .bbx-orbits { animation: bbx-orbit-revolve calc(21s * var(--bbx-tempo)) linear infinite reverse; }
/* vault (Privacy) — the guard stands post: steady breathing, a dashed radar
 * ring on slow sweep, sentinel lights blinking in watch rhythm. */
@keyframes bbx-vault-breathe { 0%,100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(.5deg) scale(1.016); } }
@keyframes bbx-vault-blink { 0%,64%,100% { opacity: 1; } 72%,86% { opacity: .25; } }
.bbx-profile-vault .bbx-art img { transform-origin: 50% 100%; animation: bbx-vault-breathe calc(5.5s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-vault .bbx-orbits { border-style: dashed; animation-duration: calc(40s * var(--bbx-tempo)); }
.bbx-profile-vault .bbx-orbits::after { animation: bbx-vault-blink calc(2.8s * var(--bbx-tempo)) linear infinite; }
.bbx-profile-vault .bbx-stars { animation-duration: calc(4.4s * var(--bbx-tempo)); }
/* charter (Terms of Service) — stately: a dignified slow levitation over an
 * almost ceremonial orbit. */
@keyframes bbx-charter-levitate { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-13px) rotate(.8deg); } }
.bbx-profile-charter .bbx-art img { animation: bbx-charter-levitate calc(9s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-charter .bbx-orbits { animation-duration: calc(48s * var(--bbx-tempo)); }
/* signal (Contact Us) — the support mascot bobs on its cloud while the ring
 * pings outward like a call going out. */
@keyframes bbx-signal-bob { 0%,100% { transform: translateY(5px) rotate(-1.1deg); } 50% { transform: translateY(-11px) rotate(1.3deg); } }
@keyframes bbx-signal-ping { 0% { transform: scale(.84); opacity: .9; } 70% { opacity: .25; } 100% { transform: scale(1.16); opacity: 0; } }
.bbx-profile-signal .bbx-art img { animation: bbx-signal-bob calc(5.2s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-signal .bbx-orbits { animation: bbx-signal-ping calc(3.6s * var(--bbx-tempo)) ease-out infinite; }
/* return-path (Refund) — a calm grounded sway, with the dashed orbit slowly
 * winding BACK (reverse): the return journey. */
@keyframes bbx-return-sway { 0%,100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.bbx-profile-return-path .bbx-art img { transform-origin: 50% 100%; animation: bbx-return-sway calc(6s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-return-path .bbx-orbits { border-style: dashed; animation: bbx-orbit-revolve calc(30s * var(--bbx-tempo)) linear infinite reverse; }
/* launchpad (BudCash guide) — pre-launch hover: thruster glow pulsing under
 * the mascot, star field streaming downward past the ship. */
@keyframes bbx-launch-hover { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(-14px); } }
@keyframes bbx-launch-thrust { 0%,100% { opacity: .22; transform: translateX(-50%) scaleY(.85); } 50% { opacity: .8; transform: translateX(-50%) scaleY(1.18); } }
@keyframes bbx-launch-streaks { 0% { transform: translateY(-24px); opacity: .55; } 100% { transform: translateY(24px); opacity: .12; } }
.bbx-profile-launchpad .bbx-art img { animation: bbx-launch-hover calc(4.8s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-launchpad .bbx-art::before { content: ""; position: absolute; left: 50%; bottom: 3%; z-index: 0; width: 34%; height: 42px; transform: translateX(-50%); background: radial-gradient(50% 62% at 50% 30%, color-mix(in srgb, var(--bbx-warm) 62%, transparent), transparent 75%); filter: blur(3px); animation: bbx-launch-thrust calc(2.4s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-launchpad .bbx-stars { animation: bbx-launch-streaks calc(6s * var(--bbx-tempo)) linear infinite; }
/* constellation (BudPoints guide) — a two-layer star field twinkling at
 * offset rhythms while the mascot drifts between the points. */
@keyframes bbx-constellation-twinkle { 0%,100% { opacity: .25; } 30% { opacity: .9; } 60% { opacity: .45; } 80% { opacity: .8; } }
@keyframes bbx-constellation-drift { 0%,100% { transform: translate3d(-9px,5px,0) rotate(-1.8deg); } 50% { transform: translate3d(11px,-15px,0) rotate(2.1deg); } }
.bbx-profile-constellation .bbx-stars { background-image: radial-gradient(circle, var(--bbx-warm) 0 2px, transparent 3px), radial-gradient(circle, var(--bbx-accent) 0 1.6px, transparent 2.2px); background-size: 118px 131px, 67px 79px; animation: bbx-constellation-twinkle calc(4.8s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-constellation .bbx-art img { animation: bbx-constellation-drift calc(7.4s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-constellation .bbx-orbits { border-style: dashed; }
/* rewards (Campaigns & Rewards) — true weightlessness: a long zero-gravity
 * tumble matching the free-floating astronaut. */
@keyframes bbx-rewards-weightless { 0%,100% { transform: translate3d(-7px,9px,0) rotate(-4.2deg); } 50% { transform: translate3d(11px,-21px,0) rotate(3deg); } }
.bbx-profile-rewards .bbx-art img { animation: bbx-rewards-weightless calc(8.5s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-rewards .bbx-orbits { animation-duration: calc(34s * var(--bbx-tempo)); }
/* field-notes (Hustle Handbook) — the writer stays planted in the dust puff:
 * a storyteller's sway with warm paper motes drifting sideways. */
@keyframes bbx-notes-sway { 0%,100% { transform: rotate(-1.2deg); } 40% { transform: rotate(1deg) translateY(-2px); } 70% { transform: rotate(.4deg); } }
@keyframes bbx-notes-motes { 0% { transform: translateX(-16px); opacity: .3; } 50% { opacity: .7; } 100% { transform: translateX(16px); opacity: .3; } }
.bbx-profile-field-notes .bbx-art img { transform-origin: 50% 100%; animation: bbx-notes-sway calc(5.6s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-profile-field-notes .bbx-stars { background-image: radial-gradient(circle, #d9b98c 0 1.8px, transparent 2.4px); background-size: 91px 107px; animation: bbx-notes-motes calc(9s * var(--bbx-tempo)) ease-in-out infinite; }
/* Affiliate Terms shares the charter profile but stars the thumbs-up mascot:
 * a confident grounded stance with quick sparkle glints instead of a float. */
@keyframes bbx-thumbs-confident { 0%,100% { transform: rotate(-1.1deg) scale(1); } 30% { transform: rotate(.6deg) scale(1.02); } 60% { transform: rotate(1.2deg) scale(1.008); } }
@keyframes bbx-sparkle-glint { 0%,100% { opacity: .15; } 20% { opacity: .9; } 40% { opacity: .3; } 55% { opacity: .75; } 75% { opacity: .2; } }
.bbx-page[data-illustration="mascot-thumbs"] .bbx-art img { transform-origin: 50% 100%; animation: bbx-thumbs-confident calc(4.8s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-page[data-illustration="mascot-thumbs"] .bbx-stars { animation: bbx-sparkle-glint calc(3.8s * var(--bbx-tempo)) ease-in-out infinite; }
.bbx-page[data-motion="off"] *, .bbx-page[data-motion="off"] *::before, .bbx-page[data-motion="off"] *::after { animation: none !important; }

/* Email cards: every address becomes a press-to-email card with a copy
 * button (built by JS; plain mailto links remain the no-JS fallback). */
.bbx-email-card { display: inline-flex; align-items: stretch; vertical-align: middle; margin: 2px 3px; border: 1px solid var(--bbx-line); border-radius: 10px; background: var(--bbx-surface); box-shadow: 0 3px 10px rgba(23,37,45,.09); overflow: hidden; font-style: normal; line-height: 1.2; }
.bbx-page a.bbx-email-open { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--bbx-plum) !important; font-weight: 700; text-decoration: none !important; }
.bbx-page a.bbx-email-open:hover, .bbx-page a.bbx-email-open:focus-visible { background: color-mix(in srgb, var(--bbx-accent) 20%, transparent); }
.bbx-email-open svg { flex: none; color: #6a8a1a; }
.bbx-email-addr { overflow-wrap: anywhere; }
.bbx-page .bbx-email-copy { border: 0; border-left: 1px solid var(--bbx-line); padding: 8px 12px; background: transparent; color: #5c4a2f; font-size: .82em; font-weight: 700; letter-spacing: .02em; cursor: pointer; }
.bbx-page .bbx-email-copy:hover, .bbx-page .bbx-email-copy:focus-visible { background: color-mix(in srgb, var(--bbx-warm) 24%, transparent); color: #3c2f1c; }
.bbx-page .bbx-email-copy.bbx-email-copied { color: #3d6b12; }

@media (max-width: 1024px) {
	.bbx-layout { width: min(100% - 48px, 900px); grid-template-columns: 230px minmax(0, 1fr); gap: 42px; }
	.bbx-source { font-size: 17px; }
}
@media (max-width: 760px) {
	.bbx-shell, .bbx-hero-inner, .bbx-layout { width: min(100% - 28px, 640px); }
	.bbx-hero { min-height: 600px; }
	.bbx-hero-inner { display: block; padding-top: 58px; }
	.bbx-art { min-height: 280px; margin-top: 15px; }
	.bbx-art img { width: min(76vw, 300px); max-height: 310px; }
	.bbx-orbits { width: min(82vw, 330px); }
	.bbx-motion-toggle { right: 14px; bottom: 14px; }
	.bbx-layout { display: block; padding-top: 42px; }
	.bbx-toc { position: sticky; top: 4px; z-index: 4; max-height: none; overflow: visible; margin-bottom: 34px; padding: 0; border: 1px solid var(--bbx-line); border-radius: 12px; background: rgba(255,250,241,.96); box-shadow: 0 12px 30px rgba(46,26,52,.12); backdrop-filter: blur(12px); }
	.bbx-toc-title { min-height: 48px; margin: 0; padding: 0 14px; cursor: pointer; }
	.bbx-toc-summary-state { display: block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
	.bbx-toc-disclosure[open] .bbx-toc-summary-state { transform: rotate(225deg) translate(-2px,-2px); }
	.bbx-toc-list { max-height: min(58vh, 430px); overflow: auto; padding: 4px 14px 14px; border-top: 1px solid var(--bbx-line); }
	.bbx-toc-item { margin: 12px 0; }
	.bbx-source :where(h2,h3,h4) { scroll-margin-top: 150px; }
	.admin-bar .bbx-source :where(h2,h3,h4) { scroll-margin-top: 196px; }
	.bbx-source { font-size: 15px; }
}
@media (max-width: 420px) {
.bbx-page .bbx-hero h1 { font-size: clamp(39px, 14vw, 57px); }
	.bbx-source table { font-size: .88em; }
	.bbx-source th, .bbx-source td { padding: 9px 8px; }
	.bbx-source figure, .bbx-source > table { max-width: 100%; overflow-x: auto; }
}
/* Hero motion intentionally runs regardless of the OS reduced-motion
 * setting (explicit site-owner decision: the ambient scenes are part of the
 * brand and loop continuously). The animations are slow, small-amplitude
 * drifts confined to the decorative hero artwork. */
@media (forced-colors: active) {
	.bbx-page { background: Canvas; color: CanvasText; }
	.bbx-hero { background: Canvas; color: CanvasText; border-block: 1px solid CanvasText; }
	.bbx-page .bbx-hero h1, .bbx-page .bbx-hero p { color: CanvasText !important; }
	.bbx-source a, .bbx-toc a, .bbx-backtop { color: LinkText; }
	.bbx-source th, .bbx-source td, .bbx-toc { border-color: CanvasText; }
}
@media print {
	.bbx-page { width: auto; margin: 0; background: #fff; color: #000; }
	.bbx-hero { min-height: 0; padding: 24px 0; background: none; color: #000; }
	.bbx-page .bbx-hero h1, .bbx-page .bbx-hero p { color: #000 !important; }
	.bbx-art, .bbx-progress, .bbx-toc, .bbx-backtop { display: none !important; }
	.bbx-layout { display: block; width: auto; padding: 0; }
	.bbx-document { max-width: none; }
	.bbx-source a { color: #000; text-decoration: underline; }
}