/* The house page kit (16 Oct 2026): the page hero (includes/page-hero.html),
   centred section heads, and the motion every page shares with the homepage:
   things cascade in as they scroll into view, a glow follows the pointer
   across cards, numbers count up. Classes start with px-.
   Reduced motion = calmer, not still: big movement stops, fades stay, nothing
   is ever hidden. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/files/oswald-700.woff2) format('woff2'); }

:root { --px-red: #d10a10; --px-red-d: #a50f12; --px-ink: #dfe2e6; --px-dim: #9aa2ac; --px-mute: #6b737e; --px-line: #1c2027;
  --px-panel: #0d0f12; --px-mono: 'JetBrains Mono', ui-monospace, monospace; --px-disp: 'Oswald', 'Space Grotesk', system-ui, sans-serif; }
.px-wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }

/* ── hero: words left, art right, like the homepage ─────────────────── */
.px-hero { position: relative; isolation: isolate; overflow: hidden; padding: 64px 0 56px; border-bottom: 1px solid var(--px-line); margin-bottom: 40px; }
.px-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.px-grid { position: absolute; inset: -2px; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 80% 75% at 62% 40%, #000 25%, transparent 74%);
  mask-image: radial-gradient(ellipse 80% 75% at 62% 40%, #000 25%, transparent 74%); animation: pxGrid 18s linear infinite; }
@keyframes pxGrid { to { background-position: 56px 56px, 56px 56px; } }
.px-glow { position: absolute; right: -160px; top: -220px; width: 860px; height: 860px; border-radius: 50%;
  background: radial-gradient(circle, rgba(209,10,16,.2) 0%, rgba(165,15,18,.07) 38%, transparent 68%); }
.px-scan { position: absolute; left: 0; right: 0; height: 140px; top: -140px; background: linear-gradient(180deg, transparent, rgba(209,10,16,.05), transparent);
  animation: pxScan 8s linear infinite; }
@keyframes pxScan { to { transform: translateY(1000px); } }
.px-hero-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; }
.px-hero-noart .px-hero-in { grid-template-columns: minmax(0, 1fr); }
.px-copy { min-width: 0; text-align: left; }
.px-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font: 600 .72rem/1.4 var(--px-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--px-red); }
.px-eyebrow > span, .px-eyebrow i { white-space: nowrap; }
.px-eyebrow i { font-style: normal; color: var(--px-mute); letter-spacing: .14em; }
.px-dot { width: 8px; height: 8px; border-radius: 50%; background: #3f9e63; animation: pxPing 2s infinite; }
@keyframes pxPing { 0% { box-shadow: 0 0 0 0 rgba(63,158,99,.6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(63,158,99,0); } }
.px-title { margin: 18px 0 18px; font: 700 clamp(2.5rem, 6.4vw, 5.2rem)/.94 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .005em; color: var(--px-ink) !important; }
.px-title span { display: block; }
.px-title .px-red { color: var(--px-red); text-shadow: 0 0 40px rgba(209,10,16,.35); }
.px-lead { max-width: 600px; margin: 0; color: var(--px-dim); line-height: 1.7; font-size: 1.06rem; }
.px-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.px-btn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px; font: 600 .76rem/1 var(--px-mono); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--px-ink); background: #0f1115; border: 1px solid #262b33; transition: transform .18s ease, border-color .18s, background .18s, box-shadow .18s; }
.px-btn:hover { transform: translateY(-2px); border-color: var(--px-red); color: var(--px-ink); }
.px-btn-red { background: var(--px-red-d); border-color: var(--px-red-d); color: #fff; box-shadow: 0 10px 30px -10px rgba(209,10,16,.6); }
.px-btn-red:hover { background: var(--px-red); color: #fff; }
.px-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); max-width: 640px; margin: 30px 0 0; border: 1px solid var(--px-line); background: rgba(13,15,18,.85); }
.px-stats div { padding: 14px 12px; border-right: 1px solid var(--px-line); text-align: center; position: relative; overflow: hidden; }
.px-stats div:last-child { border-right: 0; }
.px-stats div::after { content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--px-red); transition: width 1.2s ease; }
.px-stats.fx-in div::after { width: 100%; }
.px-stats dt { font: 600 .6rem var(--px-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--px-mute); }
.px-stats dd { margin: 6px 0 0; font: 700 1.7rem/1 var(--px-disp); color: var(--px-ink); font-variant-numeric: tabular-nums; }
/* the art: rings, glow, float and chips, like the homepage bear */
.px-art-wrap { display: flex; justify-content: center; }
.px-art { position: relative; width: min(330px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.px-art img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 26px 44px rgba(0,0,0,.6)); animation: pxFloat 6s ease-in-out infinite; }
.px-emoji { position: relative; font-size: clamp(5rem, 11vw, 8.5rem); line-height: 1; animation: pxFloat 6s ease-in-out infinite; filter: drop-shadow(0 18px 34px rgba(209,10,16,.35)); }
.px-art-glow { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(209,10,16,.42), transparent 65%); animation: pxBreathe 4s ease-in-out infinite; }
@keyframes pxBreathe { 50% { opacity: .55; transform: scale(1.08); } }
.px-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(209,10,16,.4); border-top-color: var(--px-red); border-right-color: transparent;
  animation: pxSpin 12s linear infinite; }
.px-ring-2 { inset: 7%; border: 1px dashed rgba(255,255,255,.1); animation-duration: 40s; animation-direction: reverse; }
@keyframes pxSpin { to { transform: rotate(360deg); } }
@keyframes pxFloat { 50% { transform: translateY(-10px); } }
.px-chip { position: absolute; font: 600 .62rem/1 var(--px-mono); letter-spacing: .16em; text-transform: uppercase; padding: 8px 10px; background: #0d0f12; border: 1px solid #2a2f37;
  color: var(--px-ink); white-space: nowrap; animation: pxBob 5s ease-in-out infinite; }
.px-chip::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--px-red); margin-right: 8px; vertical-align: 1px; }
.px-chip-1 { top: 10%; left: -8%; } .px-chip-2 { top: 24%; right: -10%; animation-delay: -1.2s; }
.px-chip-3 { bottom: 18%; left: -12%; animation-delay: -2.4s; } .px-chip-4 { bottom: 6%; right: 0; animation-delay: -3.6s; }
@keyframes pxBob { 50% { transform: translateY(-8px); } }

/* ── centred section heads, for any page ──────────────────────────────── */
.cm-sec-head.px-center, .px-center.cm-sec-head { flex-direction: column; align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.px-center .cm-eyebrow { justify-content: center; }
.px-center p { margin: 12px auto 0 !important; }

/* ── motion every page shares ─────────────────────────────────────────── */
.fx-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fx-reveal.fx-in { opacity: 1; transform: none; }
.fx-glow { position: relative; isolation: isolate; }
.fx-glow::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(209,10,16,.13), transparent 60%); }
.fx-glow:hover::after { opacity: 1; }
.fx-lift { transition: transform .2s ease, border-color .2s ease; }
.fx-lift:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
  .px-hero-in { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .px-art-wrap { order: -1; }
  .px-art { width: min(220px, 58vw); }
  .px-chip { font-size: .56rem; padding: 6px 8px; }
  .px-chip-1, .px-chip-3 { left: -4%; } .px-chip-2 { right: -4%; }
}
@media (max-width: 640px) {
  .px-hero { padding: 30px 0 34px; }
  .px-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-stats div { border-bottom: 1px solid var(--px-line); }
}
@media (prefers-reduced-motion: reduce) {
  .px-scan { display: none; }
  .px-art img, .px-emoji, .px-chip { animation: none; }
  .fx-reveal { transform: none; }
}

/* ── the Software page (/tools) ───────────────────────────────────────── */
.sw-jump { position: sticky; top: 0; z-index: 20; background: rgba(8,9,11,.94); border-bottom: 1px solid var(--px-line); }
.sw-jump-in { display: flex; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; justify-content: center; }
.sw-search { display: flex; align-items: center; gap: 8px; border: 1px solid #262b33; background: #0d0f12; padding: 0 12px; min-width: min(340px, 100%); }
.sw-search span { color: var(--px-red); font-size: 1.1rem; }
.sw-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--px-ink); padding: 11px 0; font: .92rem var(--cub-sans, Inter, sans-serif); }
.sw-search:focus-within { border-color: var(--px-red); }
.sw-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sw-chip { font: 600 .66rem var(--px-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--px-dim); padding: 7px 10px;
  border: 1px solid var(--px-line); background: #0d0f12; transition: color .2s, border-color .2s; }
.sw-chip b { color: var(--px-red); margin-left: 4px; }
.sw-chip:hover { color: var(--px-ink); border-color: var(--px-red-d); }
.sw-cat { scroll-margin-top: 80px; }
/* Fixed-width columns that collapse when empty, centred as a group, so a short
   row of cards sits in the middle instead of hugging the left (16 Oct 2026). */
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: center; gap: 14px; }
.sw-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--px-panel); border: 1px solid var(--px-line); text-decoration: none; min-height: 168px; }
.sw-card:hover { border-color: var(--px-red-d); }
.sw-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sw-name { font: 700 1.05rem var(--cub-sans, Inter, sans-serif); color: var(--px-ink); }
.sw-badge { flex: 0 0 auto; font: 600 .58rem var(--px-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--px-red); border: 1px solid rgba(209,10,16,.4); padding: 4px 7px; }
.sw-card p { margin: 0; color: var(--px-dim); font-size: .9rem; line-height: 1.55; }
.sw-runs { margin-top: auto; font: .66rem var(--px-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--px-mute); }
.sw-runs-browser { color: #3f9e63; } .sw-runs-discord { color: #8b9cff; } .sw-runs-server { color: #e0a020; }
@media (max-width: 640px) { .sw-jump { position: static; } }
.sw-search input, .sw-search input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important; }

/* ── web tool pages: compact hero + the section under the tool ─────────── */
.px-hero-tool { padding: 34px 0 30px; margin-bottom: 26px; }
.px-hero-tool .px-art { width: min(200px, 50vw); }
.px-hero-tool .px-emoji { font-size: clamp(3.6rem, 7vw, 5rem); }
.px-title-tool { font-size: clamp(2.2rem, 5vw, 3.6rem) !important; margin: 12px 0 12px !important; }
.px-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
@media (max-width: 900px) { .px-hero-tool .px-art { width: min(140px, 40vw); } .px-hero-tool .px-emoji { font-size: 3rem; } }
.px-pill { display: inline-flex; align-items: center; gap: 7px; font: 600 .64rem var(--px-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--px-dim); border: 1px solid var(--px-line); background: #0d0f12; padding: 6px 10px; }
.px-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--px-mute); }
.px-pill-browser i { background: #3f9e63; box-shadow: 0 0 8px #3f9e63; } .px-pill-browser { color: #8fd4a8; }
.px-pill-server i { background: #e0a020; } .px-pill-discord i { background: #8b9cff; }
.px-about { padding: 60px 0 70px; margin-top: 40px; border-top: 1px solid var(--px-line); }
.px-about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.px-card { background: var(--px-panel); border: 1px solid var(--px-line); padding: 22px; }
.px-card-h { font: 600 .68rem var(--px-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--px-red); margin-bottom: 14px; }
.px-card-h span { color: var(--px-mute); }
.px-card p { color: var(--px-dim); line-height: 1.65; margin: 0 0 10px; font-size: .93rem; }
.px-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.px-list li { position: relative; padding-left: 22px; color: var(--px-ink); font-size: .93rem; line-height: 1.5; }
.px-list li::before { content: '▸'; position: absolute; left: 0; color: var(--px-red); }
.px-runs-browser b { color: #3f9e63; } .px-runs-server b { color: #e0a020; } .px-runs-discord b { color: #8b9cff; }
.px-runs b { font: 600 .74rem var(--px-mono); letter-spacing: .1em; text-transform: uppercase; }
.px-related { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.px-related a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 8px 10px; border: 1px solid var(--px-line); transition: border-color .2s; }
.px-related a:hover { border-color: var(--px-red-d); }
.px-related b { color: var(--px-ink); font-size: .9rem; }
.px-related span { color: var(--px-mute); font-size: .78rem; line-height: 1.4; }
@media (max-width: 900px) { .px-about-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── legal pages: "On this page" ──────────────────────────────────────── */
.legal-container.has-toc { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 36px; max-width: 1180px !important; align-items: start; }
.px-toc { position: sticky; top: 84px; max-height: calc(100vh - 110px); overflow: auto; border: 1px solid var(--px-line); background: var(--px-panel); padding: 16px 0 10px; }
.px-toc-h { font: 600 .66rem var(--px-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--px-red); padding: 0 16px 10px; border-bottom: 1px solid var(--px-line); margin-bottom: 6px; }
.px-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.px-toc a { display: block; padding: 6px 16px; font-size: .82rem; line-height: 1.35; color: var(--px-dim); text-decoration: none; border-left: 2px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.px-toc a:hover { color: var(--px-ink); }
.px-toc a.on { color: var(--px-ink); border-left-color: var(--px-red); background: rgba(209,10,16,.07); }
.legal-content h2 { scroll-margin-top: 90px; }
@media (max-width: 900px) { .legal-container.has-toc { grid-template-columns: minmax(0, 1fr); } .px-toc { position: static; max-height: 260px; } }

/* Older pages' section heads, centred like the rest of the site. */
.section-label, .section-eyebrow { text-align: center; display: block; }
.section-title, .section-sub, .section-description { text-align: center; margin-left: auto !important; margin-right: auto !important; }

/* ── CUB PROTECTOR's signed-out page: sections in the homepage's type ─── */
.cp-section-header h2, .cp-free-banner h2, .cp-cta h2 { font: 700 clamp(2rem, 4.6vw, 3.4rem)/1 var(--px-disp) !important; text-transform: uppercase;
  letter-spacing: .01em !important; color: var(--px-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; }
.cp-section-header p, .cp-free-banner p, .cp-cta p { color: var(--px-dim) !important; }
.cp-section { border-top: 1px solid var(--px-line); }
.cp-free-banner, .cp-feature, .cp-module-category, .cp-cmd-group, .cp-cta-content { border-radius: 0 !important; background: var(--px-panel) !important; border: 1px solid var(--px-line) !important; box-shadow: none !important; }
.cp-feature, .cp-module-category, .cp-cmd-group { transition: border-color .2s, transform .2s !important; }
.cp-feature:hover, .cp-module-category:hover, .cp-cmd-group:hover { border-color: var(--px-red-d) !important; transform: translateY(-3px); }
.cp-feature-icon { border-radius: 0 !important; }
.cp-module-tag { border-radius: 0 !important; }
.cp-free-check { color: var(--px-ink) !important; }
.cp-cta-buttons a, .cp-cta a.btn-primary, .cp-cta a.btn-secondary { border-radius: 0 !important; font: 600 .76rem/1 var(--px-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; }
.cp-cta { position: relative; isolation: isolate; }
.cp-cta::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(165,15,18,.25), transparent 70%); pointer-events: none; }

/* ── CleanMe templates (cleanme.cubsoftware.site/templates) ──────────── */
.tp-tools { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-bottom: 22px; }
.tp-tools .sw-chips { flex-basis: 100%; }
.sw-chip { cursor: pointer; font-family: var(--px-mono); }
.sw-chip.is-on { color: #fff; border-color: var(--px-red); background: rgba(209,10,16,.12); }
.tp-go { background: var(--px-red-d); color: #fff; border: 0; padding: 8px 12px; font: 600 .66rem var(--px-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.filter-group { display: flex; gap: 8px; }
.tp-select { background: #0d0f12 !important; color: var(--px-ink) !important; border: 1px solid #262b33 !important; border-radius: 0 !important; padding: 10px 12px !important; font: .86rem var(--cub-sans, Inter, sans-serif) !important; }
.tp-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important; justify-content: center !important; gap: 14px !important; }
.tp-card, .tp-grid .server-card { display: flex; flex-direction: column; gap: 10px; padding: 20px !important; background: var(--px-panel) !important; border: 1px solid var(--px-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.tp-card:hover, .tp-grid .server-card:hover { border-color: var(--px-red-d) !important; }
.tp-card[hidden] { display: none; }
.tp-top { display: flex; gap: 12px; align-items: center; }
.tp-emoji { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; font-size: 1.6rem; background: #15181d; border: 1px solid var(--px-line); }
.tp-top h3 { margin: 0; font: 700 1.02rem var(--cub-sans, Inter, sans-serif); color: var(--px-ink); }
.tp-top small { font: 600 .62rem var(--px-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--px-red); }
.tp-card p { margin: 0; color: var(--px-dim); font-size: .9rem; line-height: 1.55; flex: 1; }
.tp-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font: .7rem var(--px-mono); color: var(--px-mute); letter-spacing: .06em; }
.tp-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tp-actions .cm-btn { flex: 1; justify-content: center; cursor: pointer; }
.tp-none, .tp-count { text-align: center; color: var(--px-mute); font: .78rem var(--px-mono); letter-spacing: .08em; }
.tp-none a { color: var(--px-red); }
/* shared servers, drawn by cleanme.js */
.tp-grid .server-card-header { display: flex; gap: 12px; align-items: center; }
.tp-grid .server-icon { width: 46px !important; height: 46px !important; border-radius: 0 !important; object-fit: cover; }
.tp-grid .server-name { margin: 0 !important; font: 700 1.02rem var(--cub-sans, Inter, sans-serif) !important; color: var(--px-ink) !important; }
.tp-grid .server-category { font: 600 .62rem var(--px-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--px-red) !important; }
.tp-grid .server-description { margin: 0; color: var(--px-dim) !important; font-size: .9rem; line-height: 1.55; flex: 1; }
.tp-grid .server-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font: .7rem var(--px-mono) !important; color: var(--px-mute) !important; }
.tp-grid .server-stats .stat { font-size: inherit !important; color: inherit !important; }
.tp-grid .server-card-footer { display: flex; gap: 8px; align-items: stretch; }
.tp-grid .vote-btn { display: inline-flex !important; align-items: center; gap: 6px; padding: 9px 12px !important; border-radius: 0 !important; background: #0f1115 !important;
  border: 1px solid #262b33 !important; color: var(--px-ink) !important; font: 600 .74rem var(--px-mono) !important; cursor: pointer; min-width: 0 !important; height: auto !important; }
.tp-grid .vote-btn svg { width: 14px !important; height: 14px !important; flex: 0 0 14px; }
.tp-grid .vote-btn.voted { border-color: var(--px-red) !important; color: #fff !important; background: rgba(209,10,16,.15) !important; }
.tp-grid .view-btn { flex: 1; display: inline-flex !important; align-items: center; justify-content: center; padding: 9px 12px !important; border-radius: 0 !important;
  background: var(--px-red-d) !important; color: #fff !important; font: 600 .7rem var(--px-mono) !important; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 0 !important; }
.tp-grid .view-btn:hover { background: var(--px-red) !important; }
@media (max-width: 640px) { .filter-group { width: 100%; } .tp-select { flex: 1; } }
/* a premade layout's page */
.pm-cmd { border: 1px solid var(--px-line); border-left: 2px solid var(--px-red); background: var(--px-panel); padding: 20px 22px; max-width: 860px; margin: 0 auto; }
.pm-cmd-h { font: 600 .68rem var(--px-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--px-red); margin-bottom: 12px; }
.pm-cmd-h span { color: var(--px-mute); }
.pm-cmd-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.pm-cmd-row code { flex: 1; min-width: 0; padding: 14px 16px; background: #08090b; border: 1px solid #262b33; font: 600 1.05rem var(--px-mono); color: #fff; overflow-wrap: anywhere; }
.pm-steps { margin: 16px 0 0; padding-left: 20px; color: var(--px-dim); line-height: 1.7; font-size: .93rem; }
.pm-steps b { color: var(--px-ink); } .pm-steps code { font-family: var(--px-mono); font-size: .85em; color: var(--px-ink); background: rgba(255,255,255,.06); padding: 1px 5px; }
.pm-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 14px; }
.pm-cat-h { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: .95rem; color: var(--px-ink); }
.pm-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pm-cat li { display: flex; gap: 8px; align-items: center; color: var(--px-dim); font-size: .9rem; }
.pm-cat li i { width: 18px; font-style: normal; color: var(--px-mute); text-align: center; }
.pm-roles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pm-role { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--px-line); background: var(--px-panel); color: var(--px-ink); font-size: .9rem; }
.pm-role i { width: 10px; height: 10px; border-radius: 50%; }
.pm-role em { font: 600 .58rem var(--px-mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--px-red); border: 1px solid rgba(209,10,16,.4); padding: 1px 5px; }

/* Pages on the kit get the homepage's big headings (owner: every page should look like the homepage). */
.cm-sec-head h2 { font: 700 clamp(2rem, 4.6vw, 3.4rem)/1 var(--px-disp) !important; letter-spacing: .01em !important; text-transform: uppercase; }
.cm-step strong { color: var(--px-ink); }
.tp-grid .server-icon { overflow: hidden; font-size: 0; color: transparent; background: #15181d; }

/* ── CleanMe's server, dashboard, submit and edit pages: house panels ──── */
.server-detail-header, .dashboard-header { position: relative; isolation: isolate; overflow: hidden; border-radius: 0 !important; background: var(--px-panel) !important;
  border: 1px solid var(--px-line) !important; box-shadow: none !important; padding: 28px !important; }
.server-detail-header::before, .dashboard-header::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 20% 30%, #000 20%, transparent 70%); }
.server-detail-header::after, .dashboard-header::after { content: ''; position: absolute; z-index: -1; left: -120px; top: -160px; width: 520px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(209,10,16,.18), transparent 65%); pointer-events: none; }
.server-detail-name, .dashboard-header h1 { font: 700 clamp(2rem, 4.4vw, 3.2rem)/1 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .01em; color: var(--px-ink) !important; }
.server-detail-category { font: 600 .66rem var(--px-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--px-red) !important; background: none !important; padding: 0 !important; }
.server-detail-icon, .dashboard-avatar { border-radius: 0 !important; box-shadow: 0 0 0 1px var(--px-line), 0 16px 34px rgba(0,0,0,.5) !important; }
.requirements-card, .server-preview, .login-required, .server-submit-form, .dashboard-content > section, .server-detail-container > section,
.server-detail-container [class*="-section"], .dashboard-container [class*="-section"], .stat-card, .dashboard-stat { border-radius: 0 !important; background: var(--px-panel) !important;
  border: 1px solid var(--px-line) !important; box-shadow: none !important; }
.vote-btn-large, .edit-template-btn, .submit-new-btn, .submit-btn, .copy-btn, .server-detail-actions button, .server-detail-actions a {
  border-radius: 0 !important; font: 600 .74rem/1 var(--px-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; padding: 12px 16px !important; }
.submit-new-btn, .submit-btn, .copy-btn { background: var(--px-red-d) !important; border: 1px solid var(--px-red-d) !important; color: #fff !important; }
.vote-btn-large, .edit-template-btn { background: #0f1115 !important; border: 1px solid #262b33 !important; color: var(--px-ink) !important; }
.vote-btn-large:hover, .edit-template-btn:hover { border-color: var(--px-red) !important; }
.server-submit-form input, .server-submit-form textarea, .server-submit-form select { border-radius: 0 !important; background: #08090b !important; border: 1px solid #262b33 !important; }
.server-submit-form input:focus, .server-submit-form textarea:focus, .server-submit-form select:focus { border-color: var(--px-red) !important; outline: 0 !important; }

/* ── CUB Radio in the house style ─────────────────────────────────────── */
.radio-page .radio-card { border-radius: 0 !important; background: var(--px-panel) !important; border: 1px solid var(--px-line) !important; box-shadow: none !important; }
.radio-page .player-card { border-left: 2px solid var(--px-red) !important; }
.radio-page .np-title { font: 700 clamp(1.4rem, 3vw, 2.1rem)/1.1 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .01em; }
.radio-page .now-playing-label { display: flex; align-items: center; gap: 8px; font: 600 .66rem var(--px-mono) !important; letter-spacing: .18em; color: var(--px-red) !important; }
.radio-page .play-btn { border-radius: 0 !important; }
.radio-page .req-box, .radio-page .req-row input, .radio-page .req-row button, .radio-page .req-btn, .radio-page .owner-btn { border-radius: 0 !important; }

/* A page's own icon, as a badge on the bear's ring. */
.px-badge { position: absolute; right: 6%; bottom: 6%; width: 27%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); background: #0d0f12; border: 1px solid rgba(209,10,16,.55); box-shadow: 0 0 0 6px #08090b, 0 14px 30px rgba(0,0,0,.6);
  animation: pxFloat 6s ease-in-out infinite; animation-delay: -1.5s; z-index: 2; }
.px-hero-tool .px-badge { font-size: clamp(1.2rem, 2.4vw, 1.8rem); }

/* ── CUB Studio's front page: the download block inside the hero ─────── */
.st-dl { margin-top: 26px; }
.st-dl .dl-ctas, .st-dl .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-start !important; }
.st-dl .dl-ctas-row { display: flex; gap: 10px; flex-wrap: wrap; }
.st-dl .btn-primary, .st-dl .btn-outline { border-radius: 0 !important; font: 600 .76rem/1 var(--px-mono) !important; letter-spacing: .14em !important; text-transform: uppercase;
  padding: 14px 20px !important; display: inline-flex !important; align-items: center; gap: 9px; }
.st-dl .btn-primary { background: var(--px-red-d) !important; border: 1px solid var(--px-red-d) !important; color: #fff !important; box-shadow: 0 10px 30px -10px rgba(209,10,16,.6) !important; }
.st-dl .btn-outline { background: #0f1115 !important; border: 1px solid #262b33 !important; color: var(--px-ink) !important; }
.st-dl .version-info, .st-dl .dl-meta { text-align: left !important; font: .74rem var(--px-mono); letter-spacing: .08em; color: var(--px-mute); margin: 0 0 10px; }
.st-dl .dl-meta { margin-top: 12px; }
.st-dl .code-input { border-radius: 0 !important; }
.st-req { max-width: 1180px; margin: 0 auto 40px; padding: 0 16px; }
.st-req .req-card { border-radius: 0 !important; background: var(--px-panel) !important; border: 1px solid var(--px-line) !important; }
.st-req h3 { text-align: center; font: 600 .7rem var(--px-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--px-red); }
.st-dl .dl-ctas { flex-direction: row !important; align-items: center !important; margin: 0 !important; width: auto !important; }
.st-dl .dl-ctas-row { margin: 0 !important; flex-wrap: nowrap; }
.st-dl .btn-primary, .st-dl .btn-outline { width: auto !important; white-space: nowrap; margin: 0 !important; }
.st-dl .coming-soon-note { text-align: left !important; }


/* ── Card pages (sign-in, verification, membership gate) and personal
   pages (profiles, server pages): the homepage's backdrop and panels. ── */
.auth-page, .ov-login-page, .gate-wrapper, .verify-card, .profile-wrap { position: relative; isolation: isolate; }
.auth-page::before, .ov-login-page::before, body:has(.landing-card)::before, .main-container:has(.verify-card)::before, .main-container:has(.gate-wrapper)::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, #000 25%, transparent 72%);
  animation: pxGrid 18s linear infinite; }
.auth-page::after, .ov-login-page::after, body:has(.landing-card)::after, .main-container:has(.verify-card)::after, .main-container:has(.gate-wrapper)::after {
  content: ''; position: fixed; z-index: -1; left: 50%; top: 0; width: 900px; height: 700px; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(209,10,16,.18), transparent 65%); }
.auth-card, .verify-card, .gate-wrapper, .bot-card, .ov-login-card, .landing-card { border-radius: 0 !important; background: rgba(13,15,18,.94) !important; border: 1px solid var(--px-line) !important;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.9) !important; }
.auth-card-title, .verify-title, .gate-title, .profile-hero-name, .sp-name { font: 700 clamp(2rem, 4.6vw, 3.2rem)/1 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .01em !important; }
.auth-card-logo img { animation: pxFloat 6s ease-in-out infinite; }
.auth-card a[class*="btn"], .auth-card button, .gate-btn, .verify-card a[class*="btn"], .verify-card button { border-radius: 0 !important; font-family: var(--px-mono) !important;
  letter-spacing: .12em !important; text-transform: uppercase; }
.profile-hero-bg, .sp-hero { position: relative; isolation: isolate; }
.sp-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 25%, transparent 72%); }
.sp-icon { border-radius: 50% !important; box-shadow: 0 0 0 4px #08090b, 0 0 0 5px rgba(209,10,16,.5), 0 18px 40px rgba(0,0,0,.6) !important; }
@media (prefers-reduced-motion: reduce) { .auth-card-logo img { animation: none; } }

.ov-login-card h1 { font: 700 clamp(2rem, 4.6vw, 3rem)/1 var(--px-disp) !important; text-transform: uppercase; }

/* Older pages' section headings in the homepage's type, so a page reads as one
   design top to bottom (owner: every page should look like the homepage). */
h2.section-title, h2.cd-section-title, h2.section, h2.sec, h2.apply-title, .main-container section > h2:not([class]) {
  font: 700 clamp(1.9rem, 4.2vw, 3rem)/1.05 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .01em !important;
  color: var(--px-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; }

/* ── Status, Rewards campaigns and app screens: house panels ─────────── */
.status-banner { border-radius: 0 !important; margin: 0 auto 26px !important; max-width: 1180px; font: 600 .78rem var(--px-mono) !important; letter-spacing: .14em; text-transform: uppercase; }
.status-section, .metrics-card, .service-group, .service-item, .status-group { border-radius: 0 !important; }
.metrics-tab { border-radius: 0 !important; font-family: var(--px-mono) !important; }
.wrap .hero:has(.state) { position: relative; isolation: isolate; border-radius: 0 !important; overflow: hidden; }
.wrap .hero:has(.state)::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 30% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse 70% 90% at 30% 20%, #000 20%, transparent 70%); }
.wrap .hero:has(.state) h1 { font: 700 clamp(2.2rem, 5vw, 3.6rem)/1 var(--px-disp) !important; text-transform: uppercase; letter-spacing: .01em; }
@media print { .fx-reveal { opacity: 1 !important; transform: none !important; } .px-hero-bg, .px-art-wrap, .px-chip { display: none !important; } }

/* An affiliate's redirect card (/r/<code>): the card-page look. */
.landing-btn, .landing-feature, .landing-badge { border-radius: 0 !important; }
.landing-btn { font-family: var(--px-mono) !important; letter-spacing: .12em !important; text-transform: uppercase; }
.landing-logo { animation: pxFloat 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .landing-logo { animation: none; } }

/* Decoding headlines: no kerning or ligatures, ever, so the letter-by-letter
   decode and the finished text are exactly the same width and no line wraps
   differently when it ends (16 Oct 2026: the page moved up and down). */
[data-fx-scramble], [data-scramble] { font-kerning: none; font-variant-ligatures: none; }