*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --pb-bg: #080808;
  --pb-s1: #0e0e0e;
  --pb-s2: #141414;
  --pb-green: #00C800;
  --pb-text: #f0f0f0;
  --pb-t2: #888;
  --pb-t3: #8a9199; /* PHASE C quick win (a11y audit): was #3e3e3e (~1.9:1, unreadable); now ≥4.5:1 on the dark bg while staying clearly muted */
  --pb-border: rgba(255,255,255,0.07);
  --pb-border-green: rgba(0,200,0,0.2);
  --pb-glass-bg: rgba(14,14,14,0.52);
  --pb-glass-blur: blur(22px) saturate(1.15);
  --pb-glass-shine: rgba(255,255,255,0.055);
  --pb-glass-edge: rgba(255,255,255,0.07);
  --pb-glass-depth: 0 8px 32px rgba(0,0,0,0.45);
  --pb-fh: "Barlow Condensed", sans-serif;
  --pb-fb: "Plus Jakarta Sans", sans-serif;
  --pb-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
}

html {
  background: var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--pb-bg);
  color: var(--pb-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1c1c1c; border-radius: 4px; }

a {
  color: inherit;
  text-decoration: none;
}

button, a {
  -webkit-tap-highlight-color: transparent;
}

#pb-page-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
}

.pb-page {
  min-height: 100vh;
  padding-top: 62px;
  position: relative;
  z-index: 1;
}

.pb-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  background: rgba(8,8,8,0.62);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border-bottom: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 1px 0 rgba(0,0,0,.3);
  transition: background .3s ease;
}

.pb-nav.is-solid {
  background: rgba(8,8,8,0.82);
}

.pb-nav-logo img {
  height: 21px;
  width: auto;
  display: block;
}

.pb-nav-right {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.pb-nav .pb-nav-btn {
  box-sizing: border-box;
  height: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 19px;
  border-radius: 0;
  font-family: var(--pb-fb);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}

.pb-nav .pb-nav-btn.login-btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.pb-nav .pb-nav-btn:hover {
  text-decoration: none;
}

.pb-nav .pb-nav-btn-outline {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.095);
  color: rgba(240,240,240,.55);
}

.pb-nav .pb-nav-btn-outline:hover {
  color: #f0f0f0;
  background: rgba(255,255,255,0.055);
  border-color: rgba(255,255,255,0.13);
}

.pb-nav .pb-nav-btn-primary {
  padding: 0 25px;
  background: var(--pb-green);
  border: 0;
  color: #0a0a0a;
  font-weight: 800;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-nav .pb-nav-btn-primary:hover {
  color: #0a0a0a;
  opacity: .85;
}

.pb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-family: var(--pb-fb);
  line-height: 1;
  transition: opacity .15s ease, transform .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
}

.pb-btn:hover {
  transform: translateY(-1px);
}

.pb-btn-green {
  background: var(--pb-green);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 20px;
  letter-spacing: .01em;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-btn-green:hover {
  opacity: .85;
}

.pb-btn-ghost {
  background: var(--pb-glass-bg);
  color: var(--pb-t2);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
}

.pb-btn-ghost:hover {
  color: var(--pb-text);
  border-color: rgba(255,255,255,.14);
  background: rgba(24,24,24,0.7);
}

.pb-btn-outline {
  background: var(--pb-glass-bg);
  color: var(--pb-t2);
  font-size: 15px;
  font-weight: 500;
  padding: 13px 32px;
  border: 1px solid var(--pb-glass-edge);
  border-radius: 5px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
}

.pb-btn-outline:hover {
  color: var(--pb-text);
  border-color: rgba(255,255,255,.22);
}

.pb-btn-lg {
  min-height: 45px;
  font-size: 15px;
  padding: 13px 32px;
}

.pb-btn-lg.pb-btn-green {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ─────────────────────────────────────────────────────────────
   Phase 13 — live stat ticker (seamless drag-scroll marquee).
   Motion is a JS-driven translateX on .pb-ticker-track, whose content
   is duplicated, so the loop is perfectly seamless (no choppy restart)
   and still grab/drag-able with mouse + touch.
   Dark-glass strip · green up · red down · neutral gray.
   ───────────────────────────────────────────────────────────── */
.pb-ticker {
  position: relative;
  height: 38px;
  background: linear-gradient(180deg, rgba(15,17,15,0.94), rgba(7,8,7,0.94));
  border-bottom: 1px solid var(--pb-border);
  box-shadow: inset 0 1px 0 rgba(0,200,90,0.05), inset 0 -1px 0 rgba(0,0,0,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;          /* clips the track — never widens the page */
  max-width: 100vw;
}

/* soft edge fades so items melt into the strip on both sides */
.pb-ticker::before,
.pb-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;      /* never block drag */
}
.pb-ticker::before { left: 0;  background: linear-gradient(90deg,  rgba(7,8,7,0.97), rgba(7,8,7,0)); }
.pb-ticker::after  { right: 0; background: linear-gradient(270deg, rgba(7,8,7,0.97), rgba(7,8,7,0)); }

/* grabbable viewport — clips the moving track */
.pb-ticker-viewport {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;                 /* page scrolls vertically; JS handles horizontal drag */
  user-select: none;
  -webkit-user-select: none;
}
.pb-ticker.is-dragging .pb-ticker-viewport { cursor: grabbing; }

/* the moving row (transform set by JS) */
.pb-ticker-track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
  transform: translateX(0);
}

/* one item; thin divider + small type-accent dot */
.pb-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 15px;
  font-size: 12px;
  line-height: 1;
  color: var(--pb-t2);
  text-decoration: none;
}

/* soft "| LABEL" section divider — so the category isn't repeated per item */
.pb-ticker-sep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 16px 0 22px;
}
.pb-sep-bar {
  width: 2px;
  height: 13px;
  border-radius: 1px;
  background: var(--pb-green);
  opacity: 0.9;
  box-shadow: 0 0 7px rgba(0,200,90,0.55);
}
.pb-sep-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(233,238,233,0.72);
  white-space: nowrap;
}

/* middot between the label and its value, market-ticker style */
.pb-ti-value::before {
  content: "·";
  margin: 0 6px 0 2px;
  color: var(--pb-t2);
  opacity: 0.7;
  font-weight: 400;
}

.pb-ti-label {
  color: var(--pb-t2);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.pb-ti-value,
.pb-ticker-item b {
  color: var(--pb-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pb-ti-change,
.pb-ticker-item em {
  font-style: normal;
  font-weight: 700;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* direction colors */
.pb-ticker-up      { color: var(--pb-green); }
.pb-ticker-down    { color: #e05252; }
.pb-ticker-neutral { color: var(--pb-t2); }

/* clickable items (rendered as <a> only when a safe URL exists) */
.pb-ti-link { cursor: pointer; transition: color .15s ease; }
.pb-ticker-item.pb-ti-link:hover .pb-ti-label { color: var(--pb-text); }
.pb-ticker.is-dragging .pb-ti-link { cursor: grabbing; }

/* subtle fade while the static fallback is on screen before live data swaps in */
.pb-ticker.is-loading .pb-ticker-item { opacity: 0.6; }

@media (max-width: 640px) {
  .pb-ticker { height: 34px; }
  .pb-ticker-item { padding: 0 15px; font-size: 11.5px; }
  .pb-ticker::before,
  .pb-ticker::after { width: 30px; }
}

.pb-hero {
  position: relative;
  min-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 5% 120px;
  overflow: hidden;
  isolation: isolate;
}

.pb-hero::before,
.pb-hero::after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  z-index: 2;
  pointer-events: none;
}

.pb-hero::before {
  top: 32px;
  left: 5%;
  background: linear-gradient(90deg, var(--pb-green), transparent);
}

.pb-hero::after {
  right: 5%;
  bottom: 48px;
  background: linear-gradient(270deg, var(--pb-green), transparent);
}

.pb-hero-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.pb-glass {
  background: var(--pb-glass-bg);
  backdrop-filter: var(--pb-glass-blur);
  -webkit-backdrop-filter: var(--pb-glass-blur);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), var(--pb-glass-depth);
}

.pb-hero-badge,
.pb-hero-title,
.pb-slash,
.pb-hero-copy,
.pb-hero-actions,
.pb-scroll-cue {
  position: relative;
  z-index: 2;
}

.pb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(14,14,14,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--pb-glass-edge);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine);
  padding: 6px 14px;
  color: var(--pb-t2);
  font-size: 12px;
  letter-spacing: .03em;
  margin-bottom: 24px;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

.pb-hero-badge span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pb-green);
  box-shadow: 0 0 8px rgba(0,200,0,.9);
  animation: pb-bpulse 2s infinite;
}

@keyframes pb-bpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .2; }
}

.pb-hero-title {
  max-width: 860px;
  margin-bottom: 34px;
  font-family: var(--pb-fh);
  font-size: 52px;
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.pb-hero-title span,
.pb-hero-title strong {
  display: block;
  font: inherit;
}

.pb-hero-title span {
  background-image: var(--pb-noise), linear-gradient(160deg, #f5f5f5 0%, #f0f0f0 40%, #d8d8d8 70%, #ebebeb 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-hero-title strong {
  background-image: var(--pb-noise), linear-gradient(160deg, #00d966 0%, #00C800 45%, #00b020 70%, #00d044 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-slash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.pb-slash i {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pb-green));
}

.pb-slash i:last-child {
  background: linear-gradient(90deg, var(--pb-green), transparent);
}

.pb-slash b {
  color: var(--pb-green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
}

.pb-hero-copy {
  max-width: 480px;
  margin-bottom: 40px;
  color: var(--pb-t2);
  font-size: clamp(14.5px,1.6vw,17px);
  line-height: 1.7;
  text-wrap: pretty;
}

.pb-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pb-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--pb-t3);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pb-scroll-cue span {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--pb-t3), transparent);
}

.pb-scroll-cue em {
  font-style: normal;
}

.pb-proof {
  padding: 0 5% 72px;
}

.pb-proof-bar {
  display: flex;
  max-width: 680px;
  margin: 0 auto;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.pb-stat {
  flex: 1;
  padding: 26px 16px;
  text-align: center;
  border-right: 1px solid var(--pb-border);
}

.pb-stat:last-child {
  border-right: 0;
}

.pb-stat strong {
  display: block;
  font-family: var(--pb-fh);
  font-size: 38px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.01em;
  background-image: var(--pb-noise), linear-gradient(160deg, #00d966 0%, #00C800 45%, #00b020 70%, #00d044 100%);
  background-size: 200px 200px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pb-stat span {
  display: block;
  margin-top: 5px;
  color: var(--pb-t3);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pb-divider {
  height: 1px;
  margin: 0 5%;
  background: var(--pb-border);
}

.pb-section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 5%;
}

.pb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pb-green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pb-eyebrow::before {
  content: "//";
  opacity: .7;
  font-size: 13px;
  letter-spacing: -.05em;
}

.pb-section-title,
.pb-cta-box h2 {
  font-family: var(--pb-fh);
  font-size: clamp(36px,5vw,62px);
  font-weight: 900;
  font-style: italic;
  line-height: .96;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 14px;
  background-image: var(--pb-noise), linear-gradient(155deg, #f5f5f5 0%, #efefef 40%, #d6d6d6 70%, #e8e8e8 100%);
  background-size: 220px 220px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-blend-mode: soft-light, normal;
}

.pb-section-sub {
  max-width: 480px;
  margin-bottom: 44px;
  color: var(--pb-t2);
  font-size: 15.5px;
  line-height: 1.7;
}

.pb-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pb-card {
  position: relative;
  overflow: hidden;
  transition: border-color .22s ease, transform .2s ease, box-shadow .22s ease;
}

.pb-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,200,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,0,.06);
}

.pb-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0,200,0,.35) transparent transparent;
}

.pb-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,.03), transparent);
  pointer-events: none;
}

.pb-step {
  padding: 28px 24px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

/* Whole-tile clickable link (stretched over the card). Keeps card markup and
   styling intact; the ".pb-shimmer > *" rule would force position:relative, so
   this scoped rule restores absolute so the link covers the full card. */
.pb-step .pb-step-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  font-size: 0;
  cursor: pointer;
}

.pb-step .pb-step-link:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: -3px;
}

.pb-step span {
  display: block;
  margin-bottom: 12px;
  color: var(--pb-green);
  opacity: .18;
  font-family: var(--pb-fh);
  font-size: 48px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
}

.pb-step h3 {
  margin-bottom: 10px;
  font-family: var(--pb-fh);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.pb-step p,
.pb-creator-bio {
  color: var(--pb-t2);
  font-size: 13px;
  line-height: 1.65;
}

.pb-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 28px;
}

.pb-filter {
  padding: 6px 16px;
  background: var(--pb-glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--pb-border);
  border-radius: 3px;
  color: var(--pb-t2);
  cursor: pointer;
  font-family: var(--pb-fb);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: all .15s ease;
}

.pb-filter:hover {
  border-color: rgba(255,255,255,.14);
  color: var(--pb-text);
}

.pb-filter.is-active {
  background: rgba(0,200,0,.1);
  border-color: var(--pb-border-green);
  color: var(--pb-green);
  box-shadow: inset 0 1px 0 rgba(0,200,0,.1);
}

.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  transition: opacity .16s ease;
}

.pb-creator-grid.is-loading {
  opacity: .45;
  pointer-events: none;
}

.pb-filter.is-loading {
  cursor: wait;
}

.pb-creator {
  width: 100%;
  min-height: 226px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

.pb-creator::before {
  border-width: 0 16px 16px 0;
  border-color: transparent rgba(0,200,0,.28) transparent transparent;
}

.pb-creator:hover::before {
  border-color: transparent rgba(0,200,0,.5) transparent transparent;
}

.pb-creator-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.pb-creator-top > div:last-child {
  min-width: 0;
}

.pb-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-size: 14px;
  font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px));
}

.pb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pb-creator h3 {
  font-family: var(--pb-fh);
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: .01em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-creator-top p {
  margin-top: 2px;
  color: var(--pb-t3);
  font-size: 11.5px;
}

.pb-creator-bio {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.6;
}

.pb-home-booki-bio {
  min-height: calc(12px * 1.6 * 3);
  max-height: calc(12px * 1.6 * 3);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.pb-creator-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-creator-foot span {
  padding: 2px 9px;
  background: rgba(255,255,255,.04);
  color: var(--pb-t3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  clip-path: polygon(4px 0,100% 0,100% 100%,0 100%,0 4px);
}

.pb-creator-foot b {
  color: var(--pb-green);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.pb-featured-empty {
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid rgba(0,200,0,.18);
  background: rgba(255,255,255,.035);
  color: var(--pb-t2);
  font-size: 13px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-center {
  margin-top: 28px;
  text-align: center;
}

.pb-cta {
  padding: 0 0 72px;
}

.pb-cta-box {
  margin: 0 5%;
  padding: 44px 5%;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

/* Keep the decorative glow out of layout flow. The global ".pb-shimmer > *"
   rule was forcing it to position:relative, so it occupied ~220px of real
   vertical space at the top of the box and pushed the content down. Scoped
   override restores its intended absolute (decorative) positioning. */
.pb-cta-box .pb-cta-glow {
  position: absolute;
}

.pb-cta-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  width: 480px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(0,200,0,.09), transparent 70%);
  pointer-events: none;
}

.pb-cta-box::before {
  border-width: 0 40px 40px 0;
  border-color: transparent rgba(0,200,0,.18) transparent transparent;
}

.pb-cta-box h2 {
  font-size: clamp(30px,4vw,52px);
  margin-bottom: 28px;
}

.pb-cta-box p {
  max-width: 440px;
  margin: 0 auto 32px;
  color: var(--pb-t2);
  font-size: 15.5px;
  line-height: 1.7;
}

.pb-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 20px;
}

.pb-trust-row span {
  color: var(--pb-t3);
  font-size: 12px;
  letter-spacing: .03em;
}

.pb-footer {
  padding: 34px 5%;
  border-top: 1px solid var(--pb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.pb-footer img {
  height: 17px;
  opacity: .4;
}

.pb-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.pb-footer a,
.pb-footer p {
  color: var(--pb-t3);
  font-size: 12px;
  transition: color .15s ease;
}

.pb-footer a:hover {
  color: var(--pb-t2);
}

.pb-auth-page {
  min-height: calc(100vh - 62px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 5%;
  background:
    radial-gradient(circle at 22% 18%, rgba(0,200,0,.09), transparent 28%),
    radial-gradient(circle at 78% 80%, rgba(0,200,0,.06), transparent 26%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
}

.pb-auth-shell {
  width: min(100%, 480px);
  position: relative;
}

.pb-auth-brand {
  margin-bottom: 26px;
  text-align: center;
}

.pb-auth-brand .pb-section-title {
  margin-bottom: 10px;
  font-size: clamp(42px, 7vw, 66px);
}

.pb-auth-brand .pb-section-sub {
  margin: 0 auto;
  max-width: 360px;
}

.pb-auth-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.pb-auth-page .pb-auth-card,
.pb-auth-modal .pb-auth-card {
  width: 100% !important;
  max-width: none !important;
}

.pb-auth-card::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 34px 34px 0;
  border-color: transparent rgba(0,200,0,.34) transparent transparent;
  z-index: 2;
}

.pb-auth-card-inner {
  position: relative;
  z-index: 1;
  padding: 30px;
}

.pb-auth-form,
.pb-social-stack {
  display: grid;
  gap: 12px;
}

.pb-social-stack {
  margin-bottom: 12px;
}

.pb-social-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 14px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--pb-border);
  color: rgba(240,240,240,.78);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pb-social-btn:hover {
  color: var(--pb-text);
  background: rgba(255,255,255,.055);
  border-color: rgba(0,200,0,.22);
}

.pb-social-btn img {
  display: block;
}

.pb-auth-or {
  display: block;
  margin: 15px 0;
  color: rgba(240,240,240,.34);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

.pb-auth-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0 16px;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pb-auth-field:focus-within {
  border-color: rgba(0,200,0,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(0,200,0,.08), 0 0 22px rgba(0,200,0,.055);
}

.pb-auth-field span,
.pb-password-toggle {
  color: rgba(240,240,240,.42);
  flex: 0 0 auto;
}

.pb-auth-field input {
  width: 100%;
  min-height: 44px;
  min-width: 0;
  flex: 1;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fb) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.pb-auth-field input::placeholder {
  color: rgba(240,240,240,.28);
}

.pb-auth-field input:-webkit-autofill,
.pb-auth-field input:-webkit-autofill:hover,
.pb-auth-field input:-webkit-autofill:focus,
.pb-auth-field input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--pb-text);
  caret-color: var(--pb-text);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px #0a0a0a inset !important;
}

.pb-password-toggle {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.pb-auth-check {
  margin: 2px 0 4px;
  color: rgba(240,240,240,.62);
  font-size: 12px;
  line-height: 1.5;
}

/* Sponzy styles.css forces .custom-control-label to .875rem (14px) via
   `.custom-checkbox .custom-control-input ~ .custom-control-label`;
   scoped down so auth checkbox labels (Remember me / GDPR) read smaller */
.pb-auth-check.custom-checkbox .custom-control-input ~ .custom-control-label,
.pb-auth-check .custom-control-label {
  font-size: 13px;
}

.pb-auth-check a,
.pb-auth-recaptcha a,
.pb-auth-links a {
  color: var(--pb-green);
  text-decoration: none;
}

.pb-auth-check a:hover,
.pb-auth-recaptcha a:hover,
.pb-auth-links a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pb-auth-submit {
  width: 100%;
  margin-top: 8px;
}

.pb-auth-inline-links {
  margin-top: -2px;
}

.pb-auth-inline-links a {
  color: rgba(240,240,240,.58);
  font-size: 12px;
  text-decoration: none;
}

.pb-auth-inline-links a:hover {
  color: var(--pb-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pb-auth-alert {
  background: rgba(220,53,69,.12);
  border: 1px solid rgba(220,53,69,.28);
  color: #f4c8ce;
  font-size: 13px;
}

.pb-auth-card .alert-success {
  background: rgba(0,200,0,.10);
  border-color: rgba(0,200,0,.24);
  color: #a7f5a7;
}

.pb-auth-card .alert ul,
.pb-auth-card .alert ol {
  margin-bottom: 0;
}

.pb-auth-recaptcha {
  display: block;
  margin-top: 16px;
  color: rgba(240,240,240,.42);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.pb-auth-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.pb-auth-links.is-centered {
  justify-content: center;
}

.pb-auth-links a {
  color: rgba(240,240,240,.62);
  font-size: 12px;
}

.pb-auth-cancel {
  width: max-content;
  margin: 2px auto 0;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: rgba(240,240,240,.52);
  font-family: var(--pb-fb);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.pb-auth-cancel:hover {
  color: var(--pb-green);
}

.pb-auth-modal {
  z-index: 2050;
}

.pb-auth-modal .modal-dialog {
  width: min(calc(100% - 28px), 460px);
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.pb-auth-modal .pb-auth-modal-content,
.pb-auth-modal .modal-body {
  overflow: visible;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.pb-auth-modal .pb-auth-modal-card {
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(10,10,10,.92);
  border: 1px solid rgba(0,200,0,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.62), 0 0 38px rgba(0,200,0,.08);
  opacity: 1;
}

.pb-auth-modal .pb-auth-card-inner {
  padding: 28px;
}

.pb-auth-modal-brand {
  margin-bottom: 18px;
}

.pb-auth-modal-title {
  margin: 0;
  color: var(--pb-text);
  font-family: var(--pb-fh);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
  line-height: .92;
  text-transform: uppercase;
}

.pb-auth-switch {
  margin-top: 16px;
}

.pb-auth-modal .pb-auth-links a {
  color: var(--pb-green);
}

.pb-auth-modal .display-none {
  display: none;
}

body.modal-open .modal-backdrop {
  background-color: #000;
  opacity: .58 !important;
}

body:has(.pb-auth-page) {
  background: var(--pb-bg) !important;
}

body:has(.pb-auth-page) .playbooki-footer,
body:has(.pb-auth-page) main > .text-center.py-3.px-3 {
  display: none !important;
}

.pb-directory-page,
.pb-explore-page {
  background:
    radial-gradient(circle at 18% 14%, rgba(0,200,0,.08), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(0,200,0,.055), transparent 24%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
}

.pb-directory-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 46px 5% 84px;
}

.pb-directory-head {
  max-width: 780px;
  margin-bottom: 42px;
}

.pb-directory-head .pb-section-title {
  margin-bottom: 10px;
}

.pb-directory-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.pb-search-form {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 5px 5px 16px;
  flex: 1 1 320px;
  max-width: 520px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.pb-search-form i {
  color: var(--pb-green);
  opacity: .85;
}

.pb-search-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent !important;
  color: var(--pb-text) !important;
  font-family: var(--pb-fb);
  font-size: 14px;
  box-shadow: none !important;
}

.pb-search-form input::placeholder {
  color: var(--pb-t3);
}

.pb-search-form .pb-btn {
  min-height: 36px;
}

.pb-directory-grid {
  display: grid;
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.pb-directory-sidebar {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 14px;
}

.pb-directory-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pb-side-panel {
  padding: 16px;
  display: grid;
  gap: 8px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-side-title {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  color: var(--pb-green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pb-filter-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--pb-border);
  color: var(--pb-t2);
  font-size: 12px;
  font-weight: 700;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-filter-link:hover,
.pb-filter-link.is-active {
  color: var(--pb-green);
  border-color: var(--pb-border-green);
  background: rgba(0,200,0,.075);
}

.pb-filter-icon,
.pb-title-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 3px;
}

.pb-title-icon {
  width: 34px;
  height: 34px;
  vertical-align: .05em;
  margin-right: 8px;
}

.pb-filter-toggle {
  width: 100%;
  min-height: 42px;
  margin-bottom: 12px;
}

.pb-modal-glass {
  background: transparent;
  border: 0;
}

.pb-field,
.pb-select {
  min-height: 42px;
  background: rgba(14,14,14,.72) !important;
  border: 1px solid var(--pb-border) !important;
  color: var(--pb-text) !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.pb-field:focus,
.pb-select:focus {
  border-color: var(--pb-border-green) !important;
  box-shadow: 0 0 0 1px rgba(0,200,0,.12) !important;
}

.pb-creator {
  color: inherit;
  text-decoration: none !important;
}

.pb-creator:hover {
  color: inherit;
}

.pb-verified,
.pb-featured {
  color: var(--pb-green);
  font-size: 12px;
  vertical-align: .08em;
}

.pb-featured {
  color: #d6d6d6;
}

.pb-creator-tags {
  min-height: 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.pb-creator-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(255,255,255,.035);
  color: var(--pb-t3);
  font-size: 10.5px;
  font-weight: 700;
  clip-path: polygon(4px 0,100% 0,100% 100%,0 100%,0 4px);
}

.pb-empty-state {
  padding: 64px 24px;
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.pb-empty-state span {
  color: var(--pb-green);
  font-size: 30px;
  opacity: .7;
}

.pb-empty-state h2 {
  margin-top: 14px;
  font-family: var(--pb-fh);
  font-size: 34px;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
}

.pb-explore-page {
  padding-bottom: 56px;
}

.pb-explore-toolbar {
  padding: 0 !important;
  gap: 12px;
}

.pb-explore-sticky {
  top: 86px;
  z-index: 10 !important;
}

.pb-explore-toolbar .pb-search-form {
  max-width: none;
}

.pb-explore-toolbar .pb-search-form .btn-search {
  position: static !important;
  width: auto;
  height: auto;
  pointer-events: none;
}

.pb-explore-creators {
  padding: 16px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}

.pb-explore-creators-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.pb-explore-creators-head h6 {
  margin: 0;
  color: var(--pb-green);
  font-family: var(--pb-fh);
  font-size: 22px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
}

.pb-explore-creators-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pb-explore-creators-actions a {
  color: var(--pb-t2);
  font-size: 14px;
}

.pb-explore-creators-actions a:hover {
  color: var(--pb-green);
}

.pb-mini-creator-list {
  display: grid;
  gap: 8px;
}

.pb-mini-creator-empty {
  padding: 14px 12px;
  color: rgba(240,240,240,.48);
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(88,255,72,.08);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.pb-mini-creator {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,.025);
  border: 1px solid var(--pb-border);
  color: inherit;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.pb-mini-creator .pb-avatar {
  width: 38px;
  height: 38px;
}

.pb-mini-creator-copy {
  min-width: 0;
  flex: 1;
}

.pb-mini-creator-copy h6 {
  margin: 0;
  color: var(--pb-text);
  font-family: var(--pb-fh);
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-mini-creator-copy span {
  display: block;
  color: var(--pb-t3);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-mini-creator em {
  color: var(--pb-green);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.pb-directory-main,
.pb-directory-results {
  min-width: 0;
  overflow: visible;
}

.pb-directory-results {
  align-items: stretch;
  grid-auto-flow: row;
  grid-auto-rows: auto;
  gap: 14px;
  width: 100%;
}

.pb-directory-results .pb-creator {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 258px;
  padding: 18px;
  overflow: visible;
  clip-path: none;
  border-color: rgba(255,255,255,.085);
  background:
    linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01) 38%, rgba(0,200,0,.025)),
    rgba(14,14,14,.62);
  transform: none;
  will-change: auto;
  isolation: isolate;
}

.pb-directory-results .pb-creator:hover {
  transform: none;
  border-color: rgba(0,200,0,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 42px rgba(0,0,0,.48), 0 0 0 1px rgba(0,200,0,.08), 0 0 28px rgba(0,200,0,.06);
}

.pb-directory-results .pb-creator::before {
  top: -1px;
  right: -1px;
  border-width: 0 26px 26px 0;
  border-color: transparent rgba(0,200,0,.48) transparent transparent;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(0,200,0,.18));
}

.pb-directory-results .pb-creator::after {
  height: 58%;
  border-top: 1px solid rgba(255,255,255,.03);
  background: linear-gradient(150deg, rgba(255,255,255,.045), transparent 56%);
  z-index: 0;
}

.pb-directory-results .pb-creator > * {
  position: relative;
  z-index: 1;
}

.pb-directory-results .pb-creator-top {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
  padding-right: 14px;
}

.pb-directory-results .pb-avatar {
  width: 46px;
  height: 46px;
  font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.28);
}

.pb-creator-identity {
  min-width: 0;
}

.pb-directory-results .pb-creator h3 {
  max-width: 100%;
  margin: 0;
  color: var(--pb-text);
  font-size: 19px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-top p {
  margin: 5px 0 0;
  color: rgba(240,240,240,.38);
  font-size: 12px;
}

.pb-directory-results .pb-creator-bio {
  flex: 1 1 auto;
  min-height: 64px;
  margin-bottom: 14px;
  color: rgba(240,240,240,.58);
  font-size: 12.5px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}

.pb-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
  width: 100%;
}

.pb-creator-stats span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 32px;
  padding: 6px 5px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.055);
  text-align: center;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-creator-stats strong {
  color: var(--pb-green);
  font-family: var(--pb-fb);
  font-size: 13.5px;
  font-weight: 750;
  font-style: normal;
  letter-spacing: .01em;
  line-height: 1;
  flex: 0 1 auto;
  min-width: max-content;
}

.pb-creator-stats i {
  color: rgba(240,240,240,.36);
  font-size: 10.5px;
  line-height: 1;
  flex: 0 0 auto;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

.pb-price-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px !important;
  color: #050505 !important;
  background: var(--pb-green) !important;
  border: 1px solid rgba(0,200,0,.6);
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  white-space: nowrap;
  clip-path: polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px) !important;
}

.pb-price-pill.is-paid {
  color: var(--pb-text) !important;
  background: rgba(0,200,0,.13) !important;
  border-color: rgba(0,200,0,.34);
}

.pb-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  padding: 0;
  color: var(--pb-green) !important;
  background: transparent;
  border: 0;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: .02em;
  white-space: nowrap;
  clip-path: none;
  text-align: right;
  text-shadow: 0 0 10px rgba(0,200,0,.18);
}

.pb-directory-results .pb-creator:hover .pb-card-cta {
  color: #27ff27 !important;
  text-shadow: 0 0 14px rgba(0,200,0,.28);
}

.pb-explore-creators .pb-mini-creator {
  overflow: visible;
  transform: none;
}

.pb-explore-creators .pb-mini-creator:hover {
  transform: none;
  border-color: rgba(0,200,0,.24);
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(0,200,0,.06);
}

.pb-mini-creator-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.pb-mini-creator-stats small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 5px;
  background: rgba(255,255,255,.035);
  color: rgba(240,240,240,.45);
  font-size: 9px;
  font-weight: 650;
  text-transform: uppercase;
}

.pb-directory-results.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.pb-directory-results > .col-md-6,
.pb-directory-results > .col-md-4,
.pb-directory-results > .col-lg-4 {
  display: contents;
}

.pb-directory-results > .btn-block,
.pb-directory-results > .loadMoreMsgSpinner {
  grid-column: 1 / -1;
}

.pb-directory-results .pb-creator {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 18px;
  overflow: hidden;
  clip-path: none;
}

.pb-directory-results .pb-creator-identity,
.pb-directory-results .pb-creator-top,
.pb-directory-results .pb-creator-bio,
.pb-directory-results .pb-creator-foot {
  min-width: 0;
}

.pb-directory-results .pb-creator-bio {
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pb-directory-results .pb-price-pill {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-card-cta {
  flex: 0 0 auto;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

.pb-directory-results.pb-creator-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 16px;
  width: 100%;
  min-width: 0;
  align-items: stretch;
}

.pb-directory-results .pb-creator {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 262px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  padding: 18px;
  overflow: hidden;
  clip-path: none;
  border-color: rgba(255,255,255,.08);
  background:
    linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.015) 45%, rgba(0,200,0,.028)),
    rgba(12,12,12,.74);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 12px 34px rgba(0,0,0,.36);
}

.pb-directory-results .pb-creator:hover {
  border-color: rgba(0,200,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(0,200,0,.06), 0 0 24px rgba(0,200,0,.055);
}

.pb-directory-results .pb-creator::before {
  border-width: 0 26px 26px 0;
  border-color: transparent rgba(0,200,0,.48) transparent transparent;
}

.pb-directory-results .pb-creator-top {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
  padding-right: 16px;
}

.pb-directory-results .pb-avatar {
  width: 56px;
  height: 56px;
  font-size: 18px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.32);
}

.pb-directory-results .pb-creator-identity {
  min-width: 0;
}

.pb-directory-results .pb-creator h3 {
  max-width: 100%;
  margin: 0;
  color: var(--pb-text);
  font-size: 20px;
  line-height: 1.02;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-top p {
  max-width: 100%;
  margin: 5px 0 0;
  color: rgba(240,240,240,.42);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pb-directory-results .pb-creator-bio {
  --pb-bio-lines: 3;
  --pb-bio-line-height: 1.6;
  flex: 0 0 auto;
  min-height: calc(12.5px * var(--pb-bio-line-height) * var(--pb-bio-lines));
  max-height: calc(12.5px * var(--pb-bio-line-height) * var(--pb-bio-lines));
  margin: 0 0 15px;
  color: rgba(240,240,240,.62);
  font-size: 12.5px;
  line-height: var(--pb-bio-line-height);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pb-bio-lines);
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
}

.pb-directory-results .pb-creator-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: 100%;
  margin: 0 0 16px;
}

.pb-directory-results .pb-creator-stats span {
  height: 40px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  background: rgba(255,255,255,.032);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.pb-directory-results .pb-creator-stats strong {
  color: var(--pb-green);
  font-family: var(--pb-fb);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  min-width: 0;
}

.pb-directory-results .pb-creator-stats i {
  color: rgba(240,240,240,.34);
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
}

.pb-directory-results .pb-creator-foot {
  margin-top: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pb-directory-results .pb-price-pill {
  min-height: 29px;
  max-width: 60%;
  flex: 0 1 auto;
  padding: 6px 10px !important;
  color: rgba(245,255,245,.94) !important;
  background: rgba(0,200,0,.12) !important;
  border: 1px solid rgba(0,200,0,.34);
  font-family: var(--pb-fb);
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-directory-results .pb-price-pill.is-free {
  color: #041004 !important;
  background: var(--pb-green) !important;
  border-color: rgba(0,200,0,.7);
}

.pb-directory-results .pb-card-cta {
  flex: 0 0 auto;
  padding: 0;
  color: var(--pb-green) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(0,200,0,.16);
}

.pb-directory-results .pb-creator:hover .pb-card-cta {
  color: #25ff25 !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .pb-directory-results .pb-creator {
    min-height: 258px;
  }

  .pb-directory-results .pb-creator-bio {
    --pb-bio-lines: 2;
  }
}

.pb-shimmer {
  position: relative;
}

.pb-shimmer > * {
  position: relative;
  z-index: 1;
}

.pb-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.04) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pb-shimmer 4s ease-in-out infinite;
}

@keyframes pb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (max-width: 1024px) {
  .pb-creator-grid { grid-template-columns: repeat(2, 1fr); }
  .pb-directory-results,
  .pb-directory-results.pb-creator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-directory-grid { grid-template-columns: minmax(190px, 230px) minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pb-nav { padding: 0 14px; }
  .pb-nav-logo img { height: 19px; }
  .pb-nav-right { gap: .55rem; }
  .pb-nav .pb-nav-btn-outline { display: none; }
  .pb-nav .pb-nav-btn-primary { height: 34px; min-height: 34px; padding: 0 16px; font-size: 13px; }
  .pb-nav .pb-btn-ghost:first-child { display: none; }
  .pb-btn { white-space: nowrap; }
  .pb-hero { padding: 64px 5% 96px; }
  .pb-hero-title { font-size: 42px; }
  .pb-proof-bar,
  .pb-steps {
    grid-template-columns: 1fr;
  }
  .pb-proof-bar {
    display: block;
  }
  .pb-stat {
    border-right: 0;
    border-bottom: 1px solid var(--pb-border);
  }
  .pb-stat:last-child { border-bottom: 0; }
  .pb-creator-grid { grid-template-columns: 1fr; }
  .pb-directory-shell { padding: 48px 16px 64px; }
  .pb-directory-grid { grid-template-columns: 1fr; }
  .pb-directory-sidebar { position: static; }
  .pb-directory-results,
  .pb-directory-results.pb-creator-grid { grid-template-columns: 1fr; }
  .pb-search-form {
    flex-basis: 100%;
    max-width: none;
  }
  .pb-directory-actions .pb-btn-outline {
    width: 100%;
  }
  .pb-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .pb-auth-page {
    padding: 48px 16px;
  }
  .pb-auth-card-inner {
    padding: 24px 18px;
  }
  .pb-auth-links {
    align-items: flex-start;
    flex-direction: column;
  }
  .pb-auth-links.is-centered {
    align-items: center;
  }
}

body:has(.pb-home-live) {
  padding-top: 0 !important;
  background: var(--pb-bg) !important;
  color: var(--pb-text) !important;
}

body:has(.pb-home-live) > header,
body:has(.pb-home-live) .playbooki-nav,
body:has(.pb-home-live) .playbooki-footer {
  display: none !important;
}

body:has(.pb-home-live) main {
  background: var(--pb-bg);
}

/* Logged-in Sponzey feed shell: visual-only styles for original markup. */
/* Calmer background: two large, soft, blurred green glow blobs over a dark
   base. background-attachment: fixed keeps it smooth across the whole
   scrollable page. A background paint never blocks clicks. */
body.pb-authenticated {
  /* Near-true-black base with only a whisper of green undertone, so the
     glow blobs (not a green wash) provide the color and pop against it. */
  background-color: #030303 !important;
  background-image:
    radial-gradient(68% 58% at 20% 12%, rgba(0, 220, 0, .15), rgba(0, 220, 0, 0) 58%),
    radial-gradient(62% 54% at 88% 88%, rgba(0, 210, 0, .10), rgba(0, 210, 0, 0) 58%),
    linear-gradient(180deg, #040504 0%, #050605 55%, #030303 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed, fixed, fixed !important;
  background-size: cover, cover, cover !important;
  color: var(--pb-text) !important;
}

/* Remove the leftover inert particle canvas: no dots, and it can't catch clicks. */
body.pb-authenticated .pb-app-particles,
body.pb-authenticated #pb-app-particles {
  display: none !important;
}

body.pb-authenticated .section.section-sm {
  background: transparent !important;
  color: var(--pb-text);
}

body.pb-authenticated .container-lg-3 {
  position: relative;
  z-index: 1;
}

body.pb-authenticated > header {
  pointer-events: auto !important;
  overflow: visible !important;
  height: auto !important;
  z-index: 1200 !important;
}

body.pb-authenticated .navbar.navbar-inverse.fixed-top.p-nav {
  background: rgba(8, 8, 8, .68) !important;
  border-bottom: 1px solid rgba(88, 255, 72, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 12px 32px rgba(0, 0, 0, .42) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  z-index: 1200;
}

body.pb-authenticated .navbar.navbar-inverse.fixed-top.p-nav .dropdown-menu {
  z-index: 1300;
}

/* PHASE 10 RESTORE — Navbar icon green hover + post action buttons
   moved to public/css/playbooki.css so they also load on the creator
   profile page (which does NOT include playbooki-redesign.css). */

body.pb-authenticated .menu-left-home {
  top: 86px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.pb-authenticated .menu-left-home li + li {
  margin-top: 8px;
}

body.pb-authenticated .menu-left-home a {
  min-height: 40px;
  display: flex;
  align-items: center;
  color: var(--pb-t2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(8, 14, 10, .48);
  border: 1px solid rgba(88, 255, 72, .07);
  border-radius: 14px;
  backdrop-filter: blur(12px) saturate(1.18);
  -webkit-backdrop-filter: blur(12px) saturate(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 10px 26px rgba(0, 0, 0, .20);
}

body.pb-authenticated .menu-left-home a:hover,
body.pb-authenticated .menu-left-home a.active {
  color: var(--pb-green);
  background: rgba(0, 200, 0, .09);
  border-color: rgba(0, 200, 0, .24);
}

body.pb-authenticated .menu-left-home i,
body.pb-authenticated .menu-left-home svg {
  color: var(--pb-green);
}

body.pb-authenticated .wrap-post,
body.pb-authenticated .wrap-post .grid-updates {
  position: relative;
  z-index: 1;
  overflow: visible;
}

body.pb-authenticated .wrap-post .card,
body.pb-authenticated .wrap-post .card-updates,
body.pb-authenticated .wrap-post .panel,
body.pb-authenticated .wrap-post .panel-default,
body.pb-authenticated .wrap-post #stories,
body.pb-authenticated .wrap-post #formUpdateCreate > .card {
  background: rgba(8, 14, 10, .68) !important;
  color: var(--pb-text) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 42px rgba(0, 0, 0, .38), 0 0 20px rgba(0, 200, 0, .025) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  clip-path: none !important;
}

body.pb-authenticated .wrap-post .card-footer.bg-white,
body.pb-authenticated .wrap-post .card-footer.rounded-large,
body.pb-authenticated .wrap-post #formUpdateCreate .card-footer {
  background: rgba(4, 7, 5, .46) !important;
  color: var(--pb-t2) !important;
  border-top: 1px solid rgba(88, 255, 72, .075) !important;
  border-radius: 0 0 22px 22px !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

body.pb-authenticated .wrap-post .text-muted,
body.pb-authenticated .wrap-post small,
body.pb-authenticated .wrap-post .small {
  color: var(--pb-t3) !important;
}


body.pb-authenticated .col-md-4 > .sticky-top,
body.pb-authenticated .col-md-4 .navbar-collapse.sticky-top {
  top: 86px;
}

@media (min-width: 992px) {
  /* Center the whole logged-in app and give it breathing room on both edges. */
  body.pb-authenticated .container-lg-3 {
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3-column row: clean gaps instead of Bootstrap gutters, columns aligned to top. */
  body.pb-authenticated .container-lg-3 > .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 28px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Left sidebar: fixed width. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-2 {
    display: block !important;
    flex: 0 0 200px !important;
    max-width: 200px !important;
    width: 200px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 1 !important;
  }

  /* Center feed: takes the remaining space. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-6.wrap-post {
    flex: 1 1 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 2 !important;
  }

  /* Right Explore Bookis sidebar: fixed width, always visible on desktop. */
  body.pb-authenticated .container-lg-3 > .row > .col-md-4.d-lg-block.d-none {
    display: block !important;
    flex: 0 0 330px !important;
    max-width: 330px !important;
    width: 330px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    order: 3 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    z-index: 1 !important;
  }

  body.pb-authenticated .container-lg-3 > .row > .col-md-4 .navbar-collapse.collapse.d-lg-block {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
}

body.pb-authenticated .col-md-4 > .sticky-top > .mb-2,
body.pb-authenticated .col-md-4 .navbar-collapse.sticky-top > .mb-2 {
  padding: 16px;
  background: rgba(8, 14, 10, .62);
  border: 1px solid rgba(88, 255, 72, .08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 38px rgba(0, 0, 0, .30);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

/* ============================================================
   PHASE 10 — Explore Bookis right-rail widget (logged-in home)
   Scoped to .pb-explore-bookis-widget inside the right column.
   Premium Playbooki 2.0 liquid-glass recommendation module.
   ============================================================ */

/* --- Outer widget panel: add a subtle branded green glow --- */
body.pb-authenticated .pb-explore-bookis-widget.mb-2 {
  border-color: rgba(0, 200, 0, .14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    0 0 0 1px rgba(0, 200, 0, .05),
    0 18px 40px rgba(0, 0, 0, .40),
    0 0 30px rgba(0, 200, 0, .05) !important;
}

/* --- Title row: branded condensed heading --- */
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer {
  color: var(--pb-green) !important;
  font-family: 'Barlow Condensed', var(--pb-fb), sans-serif;
  font-weight: 800 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin-bottom: 14px !important;
}

/* --- Refresh / tag icons: muted, hover Playbooki green --- */
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer a.refresh_creators {
  color: rgba(235, 235, 235, .50) !important;
  font-size: .95rem !important;
  text-decoration: none !important;
  transition: color .2s ease, transform .2s ease;
}
body.pb-authenticated .pb-explore-bookis-widget .filter-explorer a.refresh_creators:hover {
  color: var(--pb-green) !important;
  transform: translateY(-1px);
}

/* --- Reset old per-row overrides so the card alone owns its look --- */
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators .list-group-item {
  background: transparent !important;
  border: 0 !important;
}

/* Spacing between the three cards (cards never resize the widget). */
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a {
  display: block;
  margin-bottom: 12px;
}
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:last-child {
  margin-bottom: 0;
}
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a,
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:hover,
body.pb-authenticated .pb-explore-bookis-widget .containerRefreshCreators > a:focus {
  text-decoration: none !important;
}

/* --- Booki card: rounded tinted-glass cover card --- */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 138px;
  border-radius: 14px !important;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  will-change: transform;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 6px 18px rgba(0, 0, 0, .35);
  transition: box-shadow .3s ease, transform .3s ease;
}

body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card > * {
  position: relative;
  z-index: 1;
}

/* Two-layer overlay: a flat dark veil normalizes every cover to the SAME
   resting darkness, plus a bottom gradient for text readability.
   This is what keeps all 3 cards visually consistent regardless of how
   bright/dark the underlying cover image is. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      transparent 28%,
      rgba(2, 4, 3, .55) 68%,
      rgba(1, 3, 2, .94) 100%
    ),
    rgba(4, 8, 5, .46);
}

/* Cover region flexes to fill the top so info pins to the bottom. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-cover {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 56px;
}

/* FREE / price pill — small premium glass pill, parked inside the info
   band and vertically centred so it reads with the name/username. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-badge.badge-free {
  top: 50%;
  right: 12px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(0, 200, 0, .16) !important;
  color: #b6ffac !important;
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* Reserve space on the right so long names never slide under the pill. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info:has(.badge-free) .media-body {
  padding-right: 54px;
}

/* Info row — transparent, sits over the gradient; relative so the FREE
   pill anchors to this band rather than the top of the cover. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info {
  position: relative;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 10px 12px 12px !important;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info .media {
  align-items: center;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info .media-heading {
  font-size: 1rem;
  line-height: 1.15;
  margin-bottom: 2px !important;
}

/* Avatar — slightly larger, polished ring. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-avatar {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .85) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 4px 10px rgba(0, 0, 0, .5);
  transition: border-color .3s ease, box-shadow .3s ease;
}

/* Creator name — strong white, green on hover, never underlined. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name:hover,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name:focus {
  color: #f4f4f4 !important;
  text-decoration: none !important;
  transition: color .22s ease, text-shadow .22s ease;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-name strong {
  font-weight: 800;
  letter-spacing: .01em;
}

/* Username — readable but secondary. */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-username {
  color: rgba(235, 235, 235, .60) !important;
  font-size: .78rem;
  font-weight: 500;
  transition: color .22s ease;
}

/* Subtle shimmer sweep on hover (gentler than the CTA button). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, .10) 50%,
    transparent 65%
  );
  background-size: 220% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: background-position .6s ease, opacity .25s ease;
}

/* --- Hover / focus: subtle lift/pop + green glow. NO brightness change,
   so the base tint stays identical resting vs hovered. Transform only,
   so there is no reflow, resize or content jump. --- */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(0, 200, 0, .55),
    0 0 26px rgba(0, 200, 0, .20),
    0 14px 30px rgba(0, 0, 0, .48);
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover::after,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within::after {
  background-position: -120% 0;
  opacity: .7;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-name,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-name {
  color: var(--pb-green) !important;
  text-shadow: 0 0 12px rgba(0, 200, 0, .25);
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-username,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-username {
  color: rgba(120, 230, 110, .80) !important;
}
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:hover .pb-explore-booki-avatar,
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card:focus-within .pb-explore-booki-avatar {
  border-color: rgba(0, 200, 0, .90) !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .45), 0 0 14px rgba(0, 200, 0, .40);
}

@media (prefers-reduced-motion: reduce) {
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card,
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-card::after,
  body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-avatar {
    transition: none;
  }
}

body.pb-authenticated .col-md-4 .card.bg-transparent {
  padding: 12px;
  background: rgba(8, 14, 10, .36) !important;
  border: 1px solid rgba(88, 255, 72, .06) !important;
  border-radius: 16px;
}

body.pb-authenticated .footer-tiny {
  color: rgba(240, 240, 240, .48) !important;
}

body.pb-authenticated .footer-tiny:hover {
  color: var(--pb-green) !important;
}

/* ------------------------------------------------------------------
   Modal / backdrop layering fix (logged-in feed)
   playbooki.css sets `body > * { position: relative; z-index: 1; }`,
   which turns <main> into a stacking context at z-index 1. The feed
   modals (schedule, livestream, share, tip) live inside <main>, so
   their z-index (2050) was trapped below the modal-backdrop (2040)
   that Bootstrap appends to <body>. While a modal is open, drop
   <main>'s stacking context so the modal layers above the backdrop,
   the dialog is clickable, and closing removes the overlay normally.
   ------------------------------------------------------------------ */
body.pb-authenticated.modal-open main {
  z-index: auto !important;
}

body.pb-authenticated .modal {
  z-index: 2050 !important;
}

body.pb-authenticated .modal-backdrop {
  z-index: 2040 !important;
}

/* Never let a leftover/duplicate backdrop linger above page content. */
body.pb-authenticated:not(.modal-open) .modal-backdrop {
  display: none !important;
}

/* ------------------------------------------------------------------
   Composer dropdown layering (logged-in feed)
   The composer card uses backdrop-filter, which makes it a stacking
   context. The post cards below are later sibling stacking contexts,
   so the composer's dropdowns (emoji, GIF, more-options / upload /
   zip / epub) were painted UNDER the posts. Raise the composer's
   stacking context above the posts so its dropdowns/popovers appear
   on top and stay clickable. Scoped to the composer only, so post
   markup, sidebar, and layout are untouched.
   ------------------------------------------------------------------ */
body.pb-authenticated .wrap-post #formUpdateCreate {
  position: relative;
  z-index: 30;
}

body.pb-authenticated .wrap-post #formUpdateCreate .dropdown-menu {
  z-index: 1090 !important;
}

/* Keep the dropdown menus from being clipped by any rounded card overflow. */
body.pb-authenticated .wrap-post #formUpdateCreate,
body.pb-authenticated .wrap-post #formUpdateCreate .card {
  overflow: visible !important;
}

/* ------------------------------------------------------------------
   Post comment form (logged-in feed) — surgical fix
   The original Sponzy markup overlays the GIF/sticker/emoji icons
   (absolutely positioned) on the right of the comment input. Two
   global redesign rules broke it:
   1) playbooki.css forces `.form-control { padding: 11px 14px !important }`,
      which overrode the inline `padding-right:95px`, so the input filled
      the whole pill (text overlapping the icons and covering them).
   2) The input then sat on top of the icons, so clicks never reached
      the GIF/sticker/emoji buttons.
   Fix is CSS-only and scoped to the comment form: restore room for the
   icons, lift the icon rail above the input so the buttons are clickable,
   and raise the GIF/emoji/sticker popups above the post cards. No markup,
   JS hooks, IDs, classes, data-attributes, or backend touched.
   ------------------------------------------------------------------ */
/* Reserve room on the right of the pill for the 3 tool buttons so typed
   text never runs under them. */
body.pb-authenticated .wrap-post .comments-form .inputComment {
  padding-right: 104px !important;
}

/* Turn the (originally absolutely-positioned) icon group into a clean, evenly
   spaced rail, vertically centered inside the pill and lifted above the input.
   We override the inline absolute positioning but keep the markup/JS hooks. */
body.pb-authenticated .wrap-post .comments-form > .position-absolute {
  top: auto !important;
  bottom: 8px !important;
  right: 10px !important;
  left: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center;
  gap: 2px;
  z-index: 6;
}

body.pb-authenticated .wrap-post .comments-form > .position-absolute > .dropdown {
  position: relative !important;   /* keep as the dropdown-menu's positioning context */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Fixed 30px slot so opening the menu (absolute) can't collapse the wrapper. */
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 7;
}

/* Each tool button: reset inline absolute positioning, make a 30px circular,
   centered, clickable target. Default soft gray. */
body.pb-authenticated .wrap-post .comments-form .triggerGif,
body.pb-authenticated .wrap-post .comments-form .triggerSticker,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji {
  /* Layout is fully locked with !important so NO state (hover/focus/active/open)
     can change size, position, spacing, or display and shift the rail. Only
     color / background / box-shadow change for feedback. */
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important; /* reserve border space; never resizes */
  border-radius: 50% !important;
  transform: none !important;
  outline: none !important;
  color: var(--pb-t2);
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
  transition: background-color .2s ease, box-shadow .2s ease;
}

body.pb-authenticated .wrap-post .comments-form .triggerGif > i,
body.pb-authenticated .wrap-post .comments-form .triggerSticker > i,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji > i {
  font-size: 17px !important;
  line-height: 1;
}

/* Hover: fade to Playbooki green with a subtle circular glow. */
body.pb-authenticated .wrap-post .comments-form .triggerGif:hover,
body.pb-authenticated .wrap-post .comments-form .triggerSticker:hover,
body.pb-authenticated .wrap-post .comments-form .triggerEmoji:hover {
  color: var(--pb-green);
  background-color: rgba(0, 200, 0, .10);
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .18), 0 0 10px rgba(0, 200, 0, .12);
}

/* Active / open: while the picker dropdown is open, Bootstrap sets
   aria-expanded="true" on the trigger — keep it Playbooki green. */
body.pb-authenticated .wrap-post .comments-form .triggerGif[aria-expanded="true"],
body.pb-authenticated .wrap-post .comments-form .triggerSticker[aria-expanded="true"],
body.pb-authenticated .wrap-post .comments-form .triggerEmoji[aria-expanded="true"] {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* Same green active state via the parent .dropdown.show, as a robust fallback. */
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerGif,
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerSticker,
body.pb-authenticated .wrap-post .comments-form .dropdown.show > .triggerEmoji {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* GIF / emoji / sticker popups: above the post/comment area, not clipped. */
body.pb-authenticated .wrap-post .comments-form .dropdown-menu {
  z-index: 1400 !important;
}

/* Each post card is its own backdrop-filter stacking context, so a popup that
   opens downward would be painted under the NEXT post. While a comment popup is
   open, give ONLY that post card a small positive z-index (still within the
   1-10 "posts" band) so it paints above the following cards and the popup shows.
   Reverts the moment the popup closes. */
body.pb-authenticated .wrap-post .grid-updates .card-updates:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

/* ==================================================================
   PLAYBOOKI ACCOUNT / MY PAGE / SETTINGS PAGES
   Scoped to pages that render the settings menu (.card-settings) only,
   so the feed, explore, home, login, and modals are never affected.
   CSS-only: no markup, form, hook, route, or backend changes.
   ================================================================== */

/* Page shell — let the app's dark liquid background show through, tidy the
   oversized centred title block. */
body.pb-authenticated .section:has(.card-settings) {
  background: transparent !important;
  color: var(--pb-text);
}
body.pb-authenticated .section:has(.card-settings) > .container {
  max-width: 1100px;
}
body.pb-authenticated .section:has(.card-settings) .row.justify-content-center .col-lg-8.py-5 {
  padding-top: 1.6rem !important;
  padding-bottom: 1.1rem !important;
}
body.pb-authenticated .section:has(.card-settings) h2 {
  color: var(--pb-text);
  font-weight: 800;
  letter-spacing: .2px;
}
body.pb-authenticated .section:has(.card-settings) h2 i { color: var(--pb-green); }
body.pb-authenticated .section:has(.card-settings) .lead.text-muted { color: var(--pb-t2) !important; }

/* ---- Left settings menu (glass) ---- */
body.pb-authenticated .card-settings {
  background: rgba(8, 14, 10, .62) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 38px rgba(0, 0, 0, .30) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  overflow: hidden;
}
body.pb-authenticated .card-settings .list-group,
body.pb-authenticated .card-settings .list-group-item {
  background: transparent !important;
  border-color: rgba(88, 255, 72, .07) !important;
  color: var(--pb-t2) !important;
}
body.pb-authenticated .card-settings small.text-muted { color: var(--pb-t3) !important; }
body.pb-authenticated .card-settings .list-group-item i,
body.pb-authenticated .card-settings .list-group-item svg { color: var(--pb-green); opacity: .85; }
body.pb-authenticated .card-settings .list-group-item:hover {
  background: rgba(0, 200, 0, .07) !important;
  color: var(--pb-text) !important;
}
body.pb-authenticated .card-settings .list-group-item.active {
  background: rgba(0, 200, 0, .12) !important;
  color: #fff !important;
  border-color: rgba(0, 200, 0, .22) !important;
}
body.pb-authenticated .card-settings .list-group-item.active i { opacity: 1; }

/* ---- Content cards / panels (glass) ---- */
body.pb-authenticated .section:has(.card-settings) .col-lg-9 .card,
body.pb-authenticated .section:has(.card-settings) .col-md-6.col-lg-9 .card {
  background: rgba(8, 14, 10, .62) !important;
  border: 1px solid rgba(88, 255, 72, .08) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 16px 42px rgba(0, 0, 0, .38) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--pb-text) !important;
}
body.pb-authenticated .section:has(.card-settings) .card-header,
body.pb-authenticated .section:has(.card-settings) .card-footer {
  background: transparent !important;
  border-color: rgba(88, 255, 72, .08) !important;
  color: var(--pb-text) !important;
}

/* ---- Labels & help text ---- */
body.pb-authenticated .section:has(.card-settings) label,
body.pb-authenticated .section:has(.card-settings) .control-label {
  color: var(--pb-text) !important;
}

/* =========================================================================
   PHASE 12 — Logged-out Password Reset page (scoped)
   Reuses the pb-auth-* system from the login/register redesign and adds a
   few reset-specific refinements. All selectors are scoped to
   .pb-auth-reset-* so logged-in pages are never affected.
   ========================================================================= */

/* Tighten the brand block spacing for the single-field reset form */
.pb-auth-reset-page .pb-auth-brand {
  margin-bottom: 22px;
}

.pb-auth-reset-page .pb-auth-brand .pb-section-sub {
  max-width: 340px;
}

/* Reset card: a touch more breathing room around the lone email field */
.pb-auth-reset-card .pb-auth-card-inner {
  padding: 32px 30px;
}

.pb-auth-reset-form {
  gap: 14px;
}

/* Invalid email state mirrors the focus accent in red */
.pb-auth-reset-input.is-invalid {
  border-color: rgba(220, 53, 69, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 0 0 1px rgba(220,53,69,.12) !important;
}

/* "Go back" rendered as an integrated secondary glass link, not plain text */
.pb-auth-reset-actions {
  margin-top: 20px;
}

.pb-auth-reset-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--pb-border);
  color: rgba(240,240,240,.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.pb-auth-reset-actions a:hover {
  color: var(--pb-text);
  background: rgba(255,255,255,.06);
  border-color: rgba(0,200,0,.28);
}

.pb-auth-reset-actions a i {
  font-size: 11px;
  color: var(--pb-green);
}

@media (max-width: 575.98px) {
  .pb-auth-reset-card .pb-auth-card-inner {
    padding: 24px 20px;
  }
}--pb-text);
  font-weight: 600;
}
body.pb-authenticated .section:has(.card-settings) .form-text,
body.pb-authenticated .section:has(.card-settings) .col-lg-9 .text-muted,
body.pb-authenticated .section:has(.card-settings) .col-lg-9 small {
  color: var(--pb-t3) !important;
}

/* ---- Inputs ---- */
body.pb-authenticated .section:has(.card-settings) .form-control,
body.pb-authenticated .section:has(.card-settings) .custom-select,
body.pb-authenticated .section:has(.card-settings) textarea,
body.pb-authenticated .section:has(.card-settings) select {
  background: rgba(4, 7, 5, .55) !important;
  border: 1px solid rgba(88, 255, 72, .14) !important;
  color: var(--pb-text) !important;
  border-radius: 12px !important;
}
body.pb-authenticated .section:has(.card-settings) .form-control::placeholder { color: rgba(240, 240, 240, .40) !important; }
body.pb-authenticated .section:has(.card-settings) .form-control:focus,
body.pb-authenticated .section:has(.card-settings) .custom-select:focus,
body.pb-authenticated .section:has(.card-settings) textarea:focus {
  border-color: rgba(0, 200, 0, .45) !important;
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .12) !important;
  outline: none !important;
}

/* =========================================================================
   PHASE 16 — Logged-out LEGAL PAGES (Privacy / Terms / Cookies)
   Shared template: resources/views/pages/show.blade.php (CMS-driven content).
   All selectors are scoped under .pb-legal-page so the feed, profiles, admin,
   settings, and other CMS pages are never affected. CSS-only, no backend.
   ========================================================================= */

.pb-legal-page {
  position: relative;
  background:
    radial-gradient(900px 460px at 50% -120px, rgba(0, 200, 0, .14), transparent 70%),
    radial-gradient(700px 520px at 85% 6%, rgba(0, 200, 0, .06), transparent 65%),
    #0a0d0a;
  padding: clamp(72px, 9vw, 116px) 18px clamp(72px, 10vw, 130px);
  overflow: hidden;
}

/* faint grid/vignette under the glow, matching the homepage's depth */
.pb-legal-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Hero / title ---- */
.pb-legal-hero {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto clamp(26px, 4vw, 44px);
  text-align: center;
}
.pb-legal-eyebrow {
  display: inline-block;
  font-family: "Barlow Condensed", "Plus Jakarta Sans", sans-serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--pb-green, #00C800);
  margin-bottom: 14px;
  opacity: .9;
}
.pb-legal-title {
  margin: 0;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.08;
  font-size: clamp(30px, 5.2vw, 50px);
  text-shadow: 0 2px 26px rgba(0, 200, 0, .12);
}

/* ---- Glass content card ---- */
.pb-legal-wrap {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}
.pb-legal-card {
  display: block;
  background: rgba(8, 14, 10, .60);
  border: 1px solid rgba(88, 255, 72, .10);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .045),
    0 24px 60px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(0, 0, 0, .15);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  padding: clamp(26px, 4.4vw, 56px) clamp(22px, 4.4vw, 60px);
}

/* ---- Legal document body (raw CMS HTML) ---- */
.pb-legal-content {
  color: rgba(238, 240, 238, .82);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .005em;
  word-break: break-word;
}
.pb-legal-content > *:first-child { margin-top: 0; }
.pb-legal-content > *:last-child { margin-bottom: 0; }

.pb-legal-content h1,
.pb-legal-content h2,
.pb-legal-content h3,
.pb-legal-content h4,
.pb-legal-content h5,
.pb-legal-content h6 {
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  margin: 2em 0 .7em;
  letter-spacing: -.005em;
}
.pb-legal-content h1 { font-size: clamp(22px, 3.2vw, 28px); }
.pb-legal-content h2 {
  font-size: clamp(19px, 2.6vw, 23px);
  padding-bottom: .45em;
  border-bottom: 1px solid rgba(88, 255, 72, .12);
}
.pb-legal-content h3 { font-size: clamp(17px, 2.1vw, 19px); color: rgba(255, 255, 255, .94); }
.pb-legal-content h4,
.pb-legal-content h5,
.pb-legal-content h6 { font-size: 16px; color: rgba(255, 255, 255, .90); }

.pb-legal-content p { margin: 0 0 1.1em; }

.pb-legal-content a {
  color: var(--pb-green, #00C800);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 200, 0, .28);
  transition: color .15s ease, border-color .15s ease;
}
.pb-legal-content a:hover {
  color: #5dff48;
  border-bottom-color: #5dff48;
}

.pb-legal-content strong,
.pb-legal-content b { color: #fff; font-weight: 700; }

.pb-legal-content ul,
.pb-legal-content ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.pb-legal-content li { margin: 0 0 .55em; padding-left: .2em; }
.pb-legal-content ul li::marker { color: var(--pb-green, #00C800); }
.pb-legal-content ol li::marker { color: rgba(0, 200, 0, .85); font-weight: 700; }

.pb-legal-content hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(88, 255, 72, .22), transparent);
  margin: 2em 0;
}

.pb-legal-content blockquote {
  margin: 1.4em 0;
  padding: .6em 1.2em;
  border-left: 3px solid var(--pb-green, #00C800);
  background: rgba(0, 200, 0, .05);
  border-radius: 0 10px 10px 0;
  color: rgba(238, 240, 238, .9);
}

.pb-legal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 15px;
}
.pb-legal-content th,
.pb-legal-content td {
  border: 1px solid rgba(88, 255, 72, .12);
  padding: .6em .8em;
  text-align: left;
}
.pb-legal-content th { color: #fff; background: rgba(0, 200, 0, .07); font-weight: 700; }

.pb-legal-content img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- Responsive ---- */
@media (max-width: 575.98px) {
  .pb-legal-content { font-size: 15px; line-height: 1.75; }
  .pb-legal-card { border-radius: 18px; }
}

/* =========================================================================
   PHASE 16b — Logged-out LEGAL PAGES: navbar layering + footer fix
   The shared .playbooki-footer has NO active styling on these pages (its
   polished styles are scoped to home/auth, which both HIDE it), so it fell
   back to a raw stacked list with a full-resolution 2032x603 logo. These
   rules are scoped with body:has(.pb-legal-page) so ONLY the 3 legal pages
   are affected — homepage, auth, logged-in and admin are untouched.
   ========================================================================= */

/* ---- Navbar safety: keep the fixed logged-out nav above everything ---- */
body:has(.pb-legal-page) { overflow-x: hidden; }            /* kill any sideways scroll from stray wide children */
body:has(.pb-legal-page) .playbooki-nav { z-index: 99990 !important; }  /* stays on top of page graphics */
/* The legal hero/glow must never paint over the fixed navbar */
body:has(.pb-legal-page) .pb-legal-page,
body:has(.pb-legal-page) .pb-legal-page::before { z-index: 0; }
body:has(.pb-legal-page) .pb-legal-hero,
body:has(.pb-legal-page) .pb-legal-wrap { z-index: 1; }

/* ===================== Legal-page footer (polished) ===================== */
body:has(.pb-legal-page) .playbooki-footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: clamp(40px, 5vw, 60px) 20px clamp(28px, 3.5vw, 40px);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(0, 200, 0, .06), transparent 70%),
    rgba(6, 10, 7, .92);
  border-top: 1px solid rgba(88, 255, 72, .12);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  text-align: center;
  overflow: hidden;
}

/* Logo + tagline */
body:has(.pb-legal-page) .playbooki-footer .flogo-wrap {
  margin: 0 auto 22px;
}
body:has(.pb-legal-page) .playbooki-footer .flogo {
  width: auto !important;
  height: 30px !important;
  max-width: 180px;
  object-fit: contain;
  opacity: .95;
}
body:has(.pb-legal-page) .playbooki-footer .ftag {
  margin-top: 8px;
  color: var(--pb-t3, rgba(170, 175, 170, .75));
  font-size: 13px;
  letter-spacing: .01em;
}

/* Social row */
body:has(.pb-legal-page) .playbooki-footer .fsocial {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 28px;
}
body:has(.pb-legal-page) .playbooki-footer .fsoc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .10);
  color: rgba(225, 228, 225, .8);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body:has(.pb-legal-page) .playbooki-footer .fsoc-link:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .38);
  background: rgba(0, 200, 0, .08);
}

/* Link columns */
body:has(.pb-legal-page) .playbooki-footer .fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
body:has(.pb-legal-page) .playbooki-footer .fcol { min-width: 0; }
body:has(.pb-legal-page) .playbooki-footer .fhead {
  color: var(--pb-green, #00C800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body:has(.pb-legal-page) .playbooki-footer .fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body:has(.pb-legal-page) .playbooki-footer .fcol li { margin: 0 0 9px; }
body:has(.pb-legal-page) .playbooki-footer .fcol a,
body:has(.pb-legal-page) .playbooki-footer .flan-toggle {
  color: rgba(190, 195, 190, .78);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease;
}
body:has(.pb-legal-page) .playbooki-footer .fcol a:hover,
body:has(.pb-legal-page) .playbooki-footer .flan-toggle:hover {
  color: var(--pb-green, #00C800);
}

/* Install button (if shown) */
body:has(.pb-legal-page) .playbooki-footer .btn-ghost {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .12);
  color: rgba(220, 224, 220, .82);
  font-size: 13px;
  font-weight: 700;
}
body:has(.pb-legal-page) .playbooki-footer .btn-ghost:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .3);
}

/* Copyright bar */
body:has(.pb-legal-page) .playbooki-footer .fcopy {
  max-width: 880px;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--pb-t3, rgba(160, 165, 160, .7));
  font-size: 13px;
  text-align: center;
}

/* Dropdown menu (language) on dark footer */
body:has(.pb-legal-page) .playbooki-footer .dropdown-menu {
  background: rgba(10, 14, 11, .98);
  border: 1px solid rgba(88, 255, 72, .14);
}
body:has(.pb-legal-page) .playbooki-footer .dropdown-item {
  color: rgba(200, 205, 200, .82);
}
body:has(.pb-legal-page) .playbooki-footer .dropdown-item:hover,
body:has(.pb-legal-page) .playbooki-footer .dropdown-item.active {
  background: rgba(0, 200, 0, .12);
  color: #fff;
}

/* ---- Footer responsive ---- */
@media (max-width: 575.98px) {
  body:has(.pb-legal-page) .playbooki-footer .fgrid {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: center;
    max-width: 360px;
  }
}

/* ─────────────────────────────────────────────────────────────
   PHASE 15b — Logged-out homepage CTA button polish.
   Scoped to .pb-hero-actions only (hero + bottom CTA box).
   Fixes: Bootstrap a:hover underline/blue-green text bleed,
   green-button opacity fade on hover. Adds the navbar .btn-cta
   shimmer sweep (same 105deg gradient) to all 4 CTA buttons.
   No size/shape/layout changes — hover uses existing translateY
   transform only.
   ───────────────────────────────────────────────────────────── */
.pb-hero-actions .pb-btn,
.pb-hero-actions .pb-btn:hover,
.pb-hero-actions .pb-btn:focus,
.pb-hero-actions .pb-btn:active {
  text-decoration: none !important;
}

.pb-hero-actions .pb-btn {
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep — mirrors navbar .btn-cta::after in playbooki.css */
.pb-hero-actions .pb-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position .5s ease;
  pointer-events: none;
}

.pb-hero-actions .pb-btn:hover::after,
.pb-hero-actions .pb-btn:focus-visible::after {
  background-position: -200% 0;
}

/* Green CTAs — no opacity fade, white text on hover, deeper green
   under it so the white pops, soft green glow */
.pb-hero-actions .pb-btn-green:hover,
.pb-hero-actions .pb-btn-green:focus {
  opacity: 1;
  color: #fff;
  background: #00a800;
  box-shadow: 0 0 26px rgba(0, 200, 0, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Outline CTAs — soft gray by default (existing), brighten to white
   on hover with a crisper glass edge and faint green underglow */
.pb-hero-actions .pb-btn-outline:hover,
.pb-hero-actions .pb-btn-outline:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(26, 28, 26, .78);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 0 18px rgba(0, 200, 0, .10);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16 — Logged-out /creators hover polish.
   Scoped to .pb-directory-actions (Join now button) and
   .pb-directory-results (Booki tiles) only. Mirrors the
   PHASE 15b CTA shimmer sweep. No size/layout changes.
   ───────────────────────────────────────────────────────────── */

/* Join now — kill Bootstrap a:hover underline */
.pb-directory-actions .pb-btn-outline,
.pb-directory-actions .pb-btn-outline:hover,
.pb-directory-actions .pb-btn-outline:focus,
.pb-directory-actions .pb-btn-outline:active {
  text-decoration: none !important;
}

.pb-directory-actions .pb-btn-outline {
  position: relative;
  overflow: hidden;
  transition: color .25s ease, border-color .25s ease,
              background .25s ease, box-shadow .25s ease;
}

/* Shimmer sweep — same 105deg gradient as PHASE 15b CTAs */
.pb-directory-actions .pb-btn-outline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  transition: background-position .5s ease;
  pointer-events: none;
}

.pb-directory-actions .pb-btn-outline:hover::after,
.pb-directory-actions .pb-btn-outline:focus-visible::after {
  background-position: -200% 0;
}

/* Premium hover — white text, crisper glass edge, faint green
   underglow (mirrors .pb-hero-actions .pb-btn-outline:hover) */
.pb-directory-actions .pb-btn-outline:hover,
.pb-directory-actions .pb-btn-outline:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(26, 28, 26, .78);
  box-shadow: inset 0 1px 0 var(--pb-glass-shine), 0 0 18px rgba(0, 200, 0, .10);
}

/* Booki tiles — no underline anywhere in the card, clickable cursor */
.pb-directory-results .pb-creator,
.pb-directory-results .pb-creator:hover,
.pb-directory-results .pb-creator *,
.pb-directory-results .pb-creator:hover * {
  text-decoration: none !important;
}

.pb-directory-results .pb-creator {
  cursor: pointer;
}

/* Tile shimmer: retask the ambient .pb-shimmer::after into a
   hover-triggered, green-tinted sweep — directory tiles only.
   ::before stays the corner triangle; no layout impact. */
.pb-directory-results .pb-creator.pb-shimmer::after {
  background: linear-gradient(105deg, transparent 30%, rgba(140,255,140,.05) 45%, rgba(255,255,255,.06) 52%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: none;
  transition: background-position .8s ease;
}

.pb-directory-results .pb-creator.pb-shimmer:hover::after {
  background-position: -200% 0;
}

/* Slightly richer (still soft) border glow on hover */
.pb-directory-results .pb-creator:hover {
  border-color: rgba(0, 200, 0, .32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 16px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(0,200,0,.09), 0 0 26px rgba(0,200,0,.09);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16b — /creators tile bevel + stats row polish.
   Scoped to .pb-directory-results only.

   Bevel: restore the .pb-step "How it works" clipped top-right
   corner (the directory block had reset clip-path to none, so
   the green ::before triangle sat on a square corner). clip-path
   clips outer box-shadows, so depth + hover glow move to
   drop-shadow filters, which follow the clipped shape.
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .30));
  transition: border-color .25s ease, filter .25s ease;
}

.pb-directory-results .pb-creator:hover {
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .38)) drop-shadow(0 0 10px rgba(0, 200, 0, .14));
}

/* Green accent tucked into the clipped corner — mirrors .pb-step::before */
.pb-directory-results .pb-creator::before {
  top: -1px;
  right: -1px;
  border-width: 0 20px 20px 0;
  border-color: transparent rgba(0, 200, 0, .35) transparent transparent;
  filter: none;
}

/* ─────────────────────────────────────────────────────────────
   Stats row — echo the homepage .pb-proof-bar language: dark
   glass mini-panels, green number on top, muted icon below,
   centered, evenly spaced. Same 40px box height (no card
   growth); stacking frees the width that cramped "53.4k ♥".
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator-stats {
  gap: 8px;
}

.pb-directory-results .pb-creator-stats span {
  height: 40px;
  flex-direction: column;
  gap: 3px;
  padding: 5px 4px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018) 60%),
    rgba(10, 10, 10, .45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}

.pb-directory-results .pb-creator-stats strong {
  font-size: 14px;
  font-weight: 750;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pb-directory-results .pb-creator-stats i {
  font-size: 10px;
  color: rgba(240, 240, 240, .30);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16c — /creators stats: one continuous bar.
   Replaces the 3 detached mini boxes with a single glass panel
   split into 3 cells by vertical dividers — the homepage
   .pb-proof-bar language scaled down into the tile. Same 40px
   height and data; scoped to .pb-directory-results only.
   ───────────────────────────────────────────────────────────── */
.pb-directory-results .pb-creator-stats {
  display: flex;
  gap: 0;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.018) 60%),
    rgba(10, 10, 10, .45);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  border-radius: 6px;
  clip-path: none; /* 16d: soft rounded rectangle, no bevel on the bar */
  overflow: hidden; /* keep dividers/cells inside the rounded corners */
}

.pb-directory-results .pb-creator-stats span {
  flex: 1 1 0;
  height: 38px; /* + bar borders ≈ 40px total, same as before */
  padding: 4px;
  flex-direction: column-reverse; /* 16d: markup is number-then-icon → icon renders on top */
  background: none;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, .07);
  box-shadow: none;
  clip-path: none;
}

.pb-directory-results .pb-creator-stats span:last-child {
  border-right: 0;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16e — /creators price badges + circular avatars.
   Scoped to .pb-directory-results only.
   ───────────────────────────────────────────────────────────── */

/* Price badges: base .pb-price-pill clips corners with !important —
   neutralize it here and use a soft rounded rectangle instead. */
.pb-directory-results .pb-price-pill {
  clip-path: none !important;
  border-radius: 6px;
}

/* Avatars: keep the base .pb-avatar clipped-square look (16e
   briefly made these circles; reverted by user request). */

/* ─────────────────────────────────────────────────────────────
   PHASE 16f — /creators sidebar: Filter by + Categories widgets.
   Scoped to .pb-directory-sidebar only (both widgets live in it).
   ───────────────────────────────────────────────────────────── */

/* No underline on hover/focus/active (Bootstrap a:hover adds it) */
.pb-directory-sidebar .pb-filter-link,
.pb-directory-sidebar .pb-filter-link:hover,
.pb-directory-sidebar .pb-filter-link:focus,
.pb-directory-sidebar .pb-filter-link:active,
.pb-directory-sidebar .pb-filter-link.is-active {
  text-decoration: none !important;
}

/* Item boxes: sharp angular rectangles — drop the diagonal clip */
.pb-directory-sidebar .pb-filter-link {
  clip-path: none;
  border-radius: 0;
}

/* Category icons: muted by default, Playbooki green on hover.
   Icons are <img>, so the green is a filter tint (brightness(0)
   flattens the art, then the chain dials in ~#00c800). */
.pb-directory-sidebar .pb-filter-icon {
  transition: filter .15s ease, opacity .15s ease;
}

.pb-directory-sidebar .pb-filter-link:hover .pb-filter-icon,
.pb-directory-sidebar .pb-filter-link.is-active .pb-filter-icon {
  filter: brightness(0) saturate(100%) invert(50%) sepia(97%) saturate(2700%) hue-rotate(95deg) brightness(103%) contrast(102%);
}

/* ─────────────────────────────────────────────────────────────
   PHASE 16h — /creators + /category/*: fixed navbar buried.
   playbooki.css sets `body > * { position: relative; z-index: 1 }`,
   so <header> (which contains the fixed .playbooki-nav) and <main>
   share z:1 and the later <main> paints on top of the nav. Raise
   the header on directory pages only: above main (1), below
   Bootstrap modals (1040+) and the body-level login modal.
   ───────────────────────────────────────────────────────────── */
body:has(.pb-directory-page) > header {
  z-index: 1030;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 18 — Logged-in compact footer (settings pages).
   includes/footer.blade.php renders <footer class="playbooki-footer
   pb-compact-footer"> on every authenticated page, but its polished
   styles were only ever scoped to the legal pages (PHASE 16b), so on
   /settings/subscription (and every other settings page) it fell back
   to a raw stacked list with the full-resolution 2032x603 logo.
   These rules mirror the PHASE 16b legal footer, scoped to
   body.pb-authenticated .pb-compact-footer only — logged-out pages,
   home, auth and legal pages are untouched. CSS only: no Blade,
   markup, form or payment logic changed.
   ───────────────────────────────────────────────────────────── */
body.pb-authenticated .playbooki-footer.pb-compact-footer {
  position: relative;
  z-index: 2;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(34px, 4.5vw, 52px) 20px clamp(24px, 3vw, 36px);
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(0, 200, 0, .06), transparent 70%),
    rgba(6, 10, 7, .92);
  border-top: 1px solid rgba(88, 255, 72, .12);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  text-align: center;
  overflow: hidden;
}

/* Logo + tagline */
body.pb-authenticated .playbooki-footer.pb-compact-footer .flogo-wrap {
  margin: 0 auto 20px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .flogo {
  width: auto !important;
  height: 28px !important;
  max-width: 180px;
  object-fit: contain;
  opacity: .95;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .ftag {
  margin-top: 8px;
  color: var(--pb-t3, rgba(170, 175, 170, .75));
  font-size: 13px;
  letter-spacing: .01em;
}

/* Social row */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsocial {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 auto 26px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsoc-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .10);
  color: rgba(225, 228, 225, .8);
  font-size: 15px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fsoc-link:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .38);
  background: rgba(0, 200, 0, .08);
}

/* Link columns */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 24px;
  max-width: 880px;
  margin: 0 auto;
  text-align: left;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol { min-width: 0; }
body.pb-authenticated .playbooki-footer.pb-compact-footer .fhead {
  color: var(--pb-green, #00C800);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol li { margin: 0 0 9px; }
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol a,
body.pb-authenticated .playbooki-footer.pb-compact-footer .flan-toggle {
  color: rgba(190, 195, 190, .78);
  font-size: 14px;
  text-decoration: none;
  transition: color .15s ease;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcol a:hover,
body.pb-authenticated .playbooki-footer.pb-compact-footer .flan-toggle:hover {
  color: var(--pb-green, #00C800);
  text-decoration: none;
}

/* Install button (if shown) */
body.pb-authenticated .playbooki-footer.pb-compact-footer .btn-ghost {
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(88, 255, 72, .12);
  color: rgba(220, 224, 220, .82);
  font-size: 13px;
  font-weight: 700;
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .btn-ghost:hover {
  color: var(--pb-green, #00C800);
  border-color: rgba(0, 200, 0, .3);
}

/* Copyright bar */
body.pb-authenticated .playbooki-footer.pb-compact-footer .fcopy {
  max-width: 880px;
  margin: clamp(24px, 3.5vw, 36px) auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  color: var(--pb-t3, rgba(160, 165, 160, .7));
  font-size: 13px;
  text-align: center;
}

/* Language dropdown on dark footer (rare when logged in, but safe) */
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-menu {
  background: rgba(10, 14, 11, .98);
  border: 1px solid rgba(88, 255, 72, .14);
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item {
  color: rgba(200, 205, 200, .82);
}
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item:hover,
body.pb-authenticated .playbooki-footer.pb-compact-footer .dropdown-item.active {
  background: rgba(0, 200, 0, .12);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 18B — Marketing & Promotions settings block.
   Scoped to .pb-promotions on /settings/subscription only.
   The glass cards themselves inherit the existing
   `.section:has(.card-settings) .col-lg-9 .card` styling;
   these rules only add headings/notes/disabled polish.
   ───────────────────────────────────────────────────────────── */
.pb-promotions .pb-promo-title {
  color: #f0f0f0;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.pb-promotions .pb-promo-title i { color: var(--pb-green, #00C800); }

.pb-promotions .pb-promo-head {
  color: var(--pb-green, #00C800);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.pb-promotions .pb-promo-note {
  color: rgba(170, 175, 170, .75);
  font-size: 13px;
  line-height: 1.5;
}

.pb-promotions .pb-promo-optional {
  color: rgba(170, 175, 170, .6);
  font-weight: 400;
  text-transform: none;
}

/* % suffix chip on discount inputs — match the $ prefix chips */
.pb-promotions .input-group-text {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  color: rgba(240, 240, 240, .7);
}

/* Native date picker indicator is invisible on dark glass */
.pb-promotions input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.6);
  cursor: pointer;
}

/* Locked (Free account / no paid plan): dim the whole block */
.pb-promotions fieldset:disabled {
  opacity: .45;
  pointer-events: none;
}
/* ============================================================
   PHASE 18C.6 — "Subs on Trial" private creator management page
   Scoped to .pb-trials-page only. Dark glass + green accents.
   ============================================================ */
.pb-trials-page .pb-trials-help {
  color: #9aa4ad;
  font-size: .9rem;
  margin-bottom: 1rem;
}

.pb-trials-page .pb-trials-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pb-trials-page .pb-trials-filter {
  display: inline-block;
  padding: .38rem .85rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: #c7ced4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none;
  transition: all .15s ease;
}
.pb-trials-page .pb-trials-filter:hover {
  border-color: rgba(0, 200, 0, .5);
  color: #fff;
}
.pb-trials-page .pb-trials-filter.is-active {
  color: #00c800;
  border-color: rgba(0, 200, 0, .65);
  background: rgba(0, 200, 0, .10);
  box-shadow: 0 0 10px rgba(0, 200, 0, .12);
}

.pb-trials-page .pb-trials-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.pb-trials-page .pb-trial-card {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 24, 22, .85), rgba(12, 15, 14, .9));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .15s ease, transform .15s ease;
}
.pb-trials-page .pb-trial-card:hover {
  border-color: rgba(0, 200, 0, .35);
}

.pb-trials-page .pb-trial-user {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .75rem;
}
.pb-trials-page .pb-trial-userlink {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  min-width: 0;
}
.pb-trials-page .pb-trial-avatar {
  object-fit: cover;
  border: 1px solid rgba(0, 200, 0, .35);
  flex: 0 0 auto;
}
.pb-trials-page .pb-trial-name {
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pb-trials-page .pb-trial-userlink:hover .pb-trial-name { color: #00c800; }

.pb-trials-page .pb-trial-status {
  margin-left: auto;
  flex: 0 0 auto;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pb-trials-page .pb-trial-status.is-trialing {
  color: #00c800;
  background: rgba(0, 200, 0, .12);
  border: 1px solid rgba(0, 200, 0, .4);
}
.pb-trials-page .pb-trial-status.is-ending {
  color: #ffb020;
  background: rgba(255, 176, 32, .12);
  border: 1px solid rgba(255, 176, 32, .45);
}

.pb-trials-page .pb-trial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .85rem;
}
.pb-trials-page .pb-trial-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 8px;
  font-size: .78rem;
  color: #c7ced4;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}
.pb-trials-page .pb-trial-gw-stripe { color: #a5b4ff; border-color: rgba(120, 130, 255, .3); }
.pb-trials-page .pb-trial-gw-wallet { color: #66d9a0; border-color: rgba(0, 200, 0, .3); }
.pb-trials-page .pb-trial-code {
  color: #00c800;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(0, 200, 0, .08);
  border-color: rgba(0, 200, 0, .35);
}

.pb-trials-page .pb-trial-dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.pb-trials-page .pb-trial-date { display: flex; flex-direction: column; }
.pb-trials-page .pb-trial-date-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d868e;
}
.pb-trials-page .pb-trial-date-val { font-size: .88rem; color: #e6eaed; font-weight: 600; }
.pb-trials-page .pb-trial-daysleft {
  margin-left: auto;
  align-items: flex-end;
  text-align: right;
}
.pb-trials-page .pb-trial-days-num {
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
  color: #00c800;
}
.pb-trials-page .pb-trial-days-lbl {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7d868e;
}

/* Empty state */
.pb-trials-page .pb-trials-empty {
  text-align: center;
  padding: 3.5rem 1rem;
  background: linear-gradient(180deg, rgba(20, 24, 22, .6), rgba(12, 15, 14, .7));
  border: 1px dashed rgba(255, 255, 255, .12);
  border-radius: 16px;
}
.pb-trials-page .pb-trials-empty-icon {
  font-size: 2.6rem;
  color: rgba(0, 200, 0, .55);
  margin-bottom: .75rem;
}
.pb-trials-page .pb-trials-empty-title { color: #fff; font-weight: 700; margin-bottom: .35rem; }
.pb-trials-page .pb-trials-empty-sub { color: #9aa4ad; font-size: .9rem; margin: 0; }

/* Mobile */
@media (max-width: 575.98px) {
  .pb-trials-page .pb-trial-status { margin-left: 0; }
  .pb-trials-page .pb-trial-user { flex-wrap: wrap; }
  .pb-trials-page .pb-trial-dates { gap: .85rem 1.1rem; }
  .pb-trials-page .pb-trial-daysleft { margin-left: 0; }
}

/* ============================================================
   PHASE 18D — Public promo display: profile banner, card badges,
   crossed-out pricing, countdown, and /creators offer filters.
   ============================================================ */

/* --- Profile public offer banner --- */
.pb-public-offer {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  margin: 0 auto .85rem;
  padding: .7rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(0,200,0,.10), rgba(0,200,0,.03));
  border: 1px solid rgba(0,200,0,.35);
  box-shadow: 0 0 18px rgba(0,200,0,.10);
  max-width: 420px;
}
.pb-public-offer--trial {
  background: linear-gradient(180deg, rgba(0,200,0,.12), rgba(0,120,255,.04));
}
.pb-public-offer-top { display: flex; align-items: center; gap: .55rem; }
.pb-public-offer .pb-promo-price {
  display: flex; align-items: baseline; gap: .5rem; justify-content: center;
}
.pb-public-offer .pb-promo-original {
  color: #8a929a; text-decoration: line-through; font-size: 1rem;
}
.pb-public-offer .pb-promo-discounted {
  color: #00e000; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em;
}
.pb-public-offer .pb-promo-per { color: #aab2b9; font-size: .85rem; }
.pb-public-offer .pb-promo-card-note {
  color: #b8c0c7; font-size: .78rem; text-align: center; line-height: 1.35;
}

/* --- Shared badge --- */
.pb-promo-badge {
  display: inline-block;
  padding: .28rem .6rem;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #001a00;
  background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 12px rgba(0,200,0,.35);
  white-space: nowrap;
}
/* PHASE 18D.X.2 — trial badges join the green family (blue removed sitewide). */
.pb-promo-badge--trial {
  color: #001a00;
  background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 12px rgba(0,200,0,.35);
}
.pb-promo-countdown {
  display: inline-flex; align-items: center;
  padding: .24rem .55rem;
  border-radius: 999px;
  font-size: .72rem; font-weight: 700;
  color: #ffb020;
  background: rgba(255,176,32,.12);
  border: 1px solid rgba(255,176,32,.4);
  white-space: nowrap;
}

/* --- Creator card badge (listing-creators) ---
   PHASE 22B ROOT CAUSE: the rule below intends `position: absolute`, but two
   earlier stacking rules also match this element and BEAT it on specificity:
     .pb-directory-results .pb-creator > *   (0,2,0)
     .pb-shimmer > *                         (0,1,0 + later source order)
   both declaring `position: relative; z-index: 1`. So the badge silently
   stayed in normal flow as the first child of the card column, pushing the
   avatar/name/bio/stats down ~24px on badged cards only — which is why one
   card's badge appeared to knock the whole row out of alignment. The
   `top/right` values then applied as *relative* nudges, which is what made it
   look randomly placed next to the name.
   The card markup no longer renders .pb-card-promo (the offer moved into the
   footer), but the specificity is corrected here so the class behaves as
   intended if it is ever reused. */
.pb-creator { position: relative; }
.pb-directory-results .pb-creator > .pb-card-promo,
.pb-creator.pb-card > .pb-card-promo,
.pb-card-promo {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: .3rem;
  z-index: 2;
}
/* PHASE 18D.X.2 — on cards the badge is a premium dark-glass tag, not a
   solid "coupon sticker". Applies to BOTH discount and trial variants. */
.pb-card-promo .pb-promo-badge,
.pb-card-promo .pb-promo-badge--trial {
  font-size: .64rem; padding: .22rem .55rem;
  color: #9dffa0;
  background: rgba(6, 20, 8, .72);
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 0 8px rgba(0,200,0,.25);
}
.pb-card-promo .pb-promo-badge-ends {
  font-size: .6rem; font-weight: 700; color: #ffb020;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,176,32,.5);
  padding: .12rem .4rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}

/* --- Crossed price pill on cards --- */
.pb-price-pill.pb-price-offer {
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.pb-price-pill.pb-price-offer .pb-promo-original {
  color: #8a929a; text-decoration: line-through; font-size: .78rem; font-weight: 600;
}
.pb-price-pill.pb-price-offer .pb-promo-discounted { color: #00e000; font-weight: 800; }
.pb-price-pill.pb-price-offer .pb-promo-original-sm { color: #aab2b9; font-size: .72rem; }

/* --- Explore right-rail widget badge --- */
.pb-explore-promo-badge {
  top: 6px; right: 6px; left: auto;
  font-size: .58rem; font-weight: 800; letter-spacing: .03em;
  color: #001a00; background: linear-gradient(180deg,#00ff5a,#00c800);
  box-shadow: 0 0 8px rgba(0,200,0,.4); z-index: 3;
}
.pb-explore-promo-badge--trial { color:#001a00; background: linear-gradient(180deg,#00ff5a,#00c800); } /* 18D.X.2: green, not blue */

/* --- Offer filters in the /creators sidebar --- */
.pb-filter-sublabel {
  display: block; margin: .6rem 0 .2rem; padding-left: .1rem;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #7d868e;
}
.pb-creator-filter-promo.is-active { color:#00c800; }

/* PHASE 18D — card offer pill: stack so trial/discount text never truncates */
.pb-creator-foot .pb-price-pill.pb-price-offer {
  flex-direction: column; align-items: flex-start; gap: .05rem;
  white-space: nowrap; max-width: none; overflow: visible;
  line-height: 1.15; padding: .28rem .55rem;
}
.pb-price-pill.pb-price-offer .pb-promo-original-sm { font-size: .66rem; }

/* ============================================================
   PHASE 18D.X — Explore offer polish (display only)
   1) /creators offer cards: boxed pill replaced by a clean
      typographic price block + offer-focused CTA.
   2) Logged-in Explore Bookis widget: offer pills restyled into
      the FREE-pill glass family.
   No pricing/promo/checkout logic involved.
   ============================================================ */

/* Neutralize the legacy `.pb-creator-foot span` banding (the faint strip
   that painted behind each price line — the "glitch"). */
.pb-creator-foot .pb-offer-price,
.pb-creator-foot .pb-offer-price span,
.pb-creator-foot .pb-offer-price s {
  background: none;
  padding: 0;
  clip-path: none;
}

/* Offer price block — transparent, typographic, no box fighting the CTA. */
.pb-creator-foot .pb-offer-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
  white-space: nowrap;
}
.pb-creator-foot .pb-offer-price--discount {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.pb-offer-price .pb-offer-old {
  color: #78818a;
  font-size: 11px;
  font-weight: 600;
  text-decoration: line-through;
}
.pb-offer-price .pb-offer-new {
  color: #00e000;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  text-shadow: 0 0 12px rgba(0,200,0,.22);
}
.pb-offer-price .pb-offer-then {
  color: #9aa4ad;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* PHASE 22B — countdown moved out of the removed top-right pill and into the
   footer offer stack, so no offer information was lost. Amber keeps it read
   as urgency rather than price. It sits on its own line in both variants. */
/* The discount block is a baseline row ("$26.99  $21.59/mo"). At the 239px
   card width real two-price strings don't fit beside the CTA and were
   overrunning "Claim Offer →". Allow it to wrap: short prices still share one
   baseline, longer ones stack instead of colliding, and the countdown always
   takes its own line. */
.pb-creator-foot .pb-offer-price--discount {
  flex-wrap: wrap;
}
.pb-offer-price .pb-offer-ends {
  flex: 0 0 100%;
  margin-top: 1px;
  color: #ffb020;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Offer CTA replaces "Go to Page →" on offer cards. Same family as
   .pb-card-cta, so the existing card-hover brighten applies unchanged. */
.pb-creator-foot .pb-card-cta.pb-offer-cta {
  text-transform: uppercase;
  font-size: 10.5px !important;
  letter-spacing: .05em;
}

/* --- Logged-in Explore Bookis widget: offer pills in the FREE-pill family
   (glass pill, vertically centred in the info band, no loud gradient/glow). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-promo-badge {
  top: 50%;
  right: 12px;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
  z-index: 3;
  color: #b6ffac;
  background: rgba(0, 200, 0, .16);
  border: 1px solid rgba(0, 200, 0, .45);
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: none;
  white-space: nowrap;
}
/* 18D.X.2 — trial pill uses the SAME green glass as FREE/discount; the
   label text is the differentiator (no blue anywhere). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-promo-badge--trial {
  color: #b6ffac;
  background: rgba(0, 200, 0, .16);
  border-color: rgba(0, 200, 0, .45);
}
/* Reserve room so names never slide under the pill (mirrors the FREE rule). */
body.pb-authenticated .pb-explore-bookis-widget .pb-explore-booki-info:has(.pb-explore-promo-badge) .media-body {
  padding-right: 84px;
}

/* ==================================================================
   PHASE 23 — INDIVIDUAL POST DETAIL PAGE  (/{username}/post/{id})
   ------------------------------------------------------------------
   The detail page renders the SAME partial as the feed
   (resources/views/includes/updates.blade.php), but its Blade view
   (users/post-detail.blade.php) never loaded this stylesheet, so every
   Playbooki 2.0 rule above — which is scoped to
   `body.pb-authenticated .wrap-post ...` — was missing and the page fell
   back to raw Bootstrap/Sponzy. Loading the stylesheet fixes ~90% of it
   (card glass, header, media, action row, comment composer, GIF/emoji
   rail). This block only handles what is specific to a single-post page:
   page shell, back link, centred column, popup stacking, and mobile.

   CSS-only. No markup/JS hooks, no payment/subscription/promo/tip code.
   ================================================================== */

/* Page shell — same soft green radial wash used by the explore/feed pages,
   so the detail page sits on the identical near-black background. */
.pb-post-detail-page {
  background:
    radial-gradient(circle at 18% 14%, rgba(0,200,0,.08), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(0,200,0,.055), transparent 24%),
    var(--pb-bg);
  color: var(--pb-text);
  font-family: var(--pb-fb);
  padding-bottom: 56px;
}

/* Give the page room at the bottom so a GIF/emoji popup opening downward
   from the comment composer is never cut off by the end of the document. */
body.pb-authenticated .pb-post-detail-page {
  min-height: calc(100vh - 62px);
}

/* ---- Back-to-creator breadcrumb -------------------------------- */
body.pb-authenticated .pb-post-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 7px 14px 7px 11px;
  color: var(--pb-t2);
  background: rgba(8, 14, 10, .58);
  border: 1px solid rgba(88, 255, 72, .10);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none !important;
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

body.pb-authenticated .pb-post-detail-back i {
  font-size: 14px;
  line-height: 1;
  color: var(--pb-green);
  transition: transform .2s ease;
}

body.pb-authenticated .pb-post-detail-back:hover {
  color: var(--pb-text);
  background: rgba(0, 200, 0, .10);
  border-color: rgba(0, 200, 0, .26);
}

body.pb-authenticated .pb-post-detail-back:hover i {
  transform: translateX(-2px);
}

body.pb-authenticated .pb-post-detail-back:focus-visible {
  outline: 2px solid var(--pb-green);
  outline-offset: 2px;
}

/* ---- Single-post column ---------------------------------------- */
/* The feed column is col-md-6 inside a 3-column grid; the detail page has
   no left rail, so cap the reading width to keep the card the same size
   as a feed card instead of stretching it across col-md-8. */
body.pb-authenticated .pb-post-detail-main {
  max-width: 640px;
}

/* The single card carries the page's whole weight — drop the feed's
   inter-card bottom margin and keep overflow visible so the comment
   composer popups are never clipped by the rounded card. */
body.pb-authenticated .pb-post-detail-single > .card:last-child,
body.pb-authenticated .pb-post-detail-single > .card-updates:last-child {
  margin-bottom: 0 !important;
}

body.pb-authenticated .pb-post-detail-single,
body.pb-authenticated .pb-post-detail-single .card,
body.pb-authenticated .pb-post-detail-single .card-updates,
body.pb-authenticated .pb-post-detail-single .card-footer {
  overflow: visible !important;
}

/* Feed parity: the feed raises the card that owns an open comment popup so
   it paints above the following cards. That rule is keyed on `.grid-updates`,
   which the single-post page does not render — mirror it here. */
body.pb-authenticated .pb-post-detail-single:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

body.pb-authenticated .pb-post-detail-single .card-updates:has(.comments-form .dropdown-menu.show),
body.pb-authenticated .pb-post-detail-single .card:has(.comments-form .dropdown-menu.show) {
  position: relative;
  z-index: 5;
}

/* ---- GIF / sticker / emoji buttons ----------------------------- */
/* app-functions.js removes the .triggerGif / .triggerSticker class from the
   button after its first successful fetch (so the list is only loaded once).
   The feed's button styling above is keyed on those classes, so after one use
   the button lost its 30px circular target. Re-apply the same treatment via
   the structural selector, which never changes. Layout only — the JS hooks,
   ids, data-attributes and the Bootstrap toggle are untouched. */
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  flex: 0 0 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  border: 1px solid transparent !important;
  border-radius: 50% !important;
  transform: none !important;
  outline: none !important;
  color: var(--pb-t2);
  cursor: pointer;
  pointer-events: auto;
  z-index: 7;
  transition: background-color .2s ease, box-shadow .2s ease;
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span > i {
  font-size: 17px !important;
  line-height: 1;
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span:hover {
  color: var(--pb-green);
  background-color: rgba(0, 200, 0, .10);
  box-shadow: 0 0 0 1px rgba(0, 200, 0, .18), 0 0 10px rgba(0, 200, 0, .12);
}

body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown.show > span,
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown > span[aria-expanded="true"] {
  color: var(--pb-green) !important;
  background-color: rgba(0, 200, 0, .14) !important;
}

/* ---- GIF / sticker / emoji pickers ----------------------------- */
/* On a single-post page the composer is the LAST thing in the document, so
   Popper had nowhere to flip to and the picker hung past the bottom of the
   viewport. Pin all three pickers above the composer pill, right-aligned to
   their button, with their own scroll. Scoped to .pb-post-detail-main so the
   feed's (already working) picker placement is untouched. */
body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute .dropdown-menu {
  position: absolute !important;
  inset: auto 0 calc(100% + 14px) auto !important;   /* above the icon rail */
  transform: none !important;
  margin: 0 !important;
  max-height: min(300px, 44vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

/* Hidden "load more posts" skeleton from the shared partial: never on a
   single-post page (it can add a stray empty card / extra scroll). */
body.pb-authenticated .pb-post-detail-single .loadMoreSpin {
  display: none !important;
}

body.pb-authenticated .pb-post-detail-empty {
  padding: 34px 22px;
  color: var(--pb-t2);
  text-align: center;
  background: rgba(8, 14, 10, .62);
  border: 1px solid rgba(88, 255, 72, .08);
  border-radius: 22px;
}

/* ---- Right rail ------------------------------------------------ */
/* Match the feed: sticky under the fixed navbar, never overlapping the
   footer, and hidden below the lg breakpoint (mobile gets the post only). */
body.pb-authenticated .pb-post-detail-aside .pb-explore-sticky {
  top: 86px;
  z-index: 10 !important;
}

/* ---- Mobile ---------------------------------------------------- */
@media (max-width: 991.98px) {
  body.pb-authenticated .pb-post-detail-main {
    max-width: 100%;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body.pb-authenticated .pb-post-detail-page,
  body.pb-authenticated .pb-post-detail-page .container {
    overflow-x: clip;           /* no horizontal scroll from the glass cards */
  }

  body.pb-authenticated .pb-post-detail-aside {
    padding-top: 8px;
  }

  body.pb-authenticated .pb-post-detail-aside .pb-explore-sticky {
    position: static !important;  /* stop the rail sticking over the footer */
  }

  body.pb-authenticated .pb-post-detail-back {
    margin-top: 4px;
  }
}

/* Comment tool rail: on touch screens give the GIF / sticker / emoji
   buttons a 34px target and keep them centred in the composer pill. */
@media (max-width: 575.98px) {
  body.pb-authenticated .pb-post-detail-main .comments-form .inputComment {
    padding-right: 112px !important;
  }

  body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute {
    gap: 4px;
  }

  /* Popups are a fixed 350px, right-anchored to their own 30px button, so on a
     narrow viewport the GIF/sticker popups ran off the LEFT edge (the GIF
     button is ~64px further left than the emoji one). Drop the per-button
     positioning context so all three popups anchor to the icon RAIL — i.e. the
     right edge of the composer pill — and clamp the width to fit the screen.
     Layout of the buttons themselves is untouched (they stay flex 30px slots). */
  body.pb-authenticated .pb-post-detail-main .comments-form > .position-absolute > .dropdown {
    position: static !important;
  }

  body.pb-authenticated .pb-post-detail-main .comments-form .dropdown-menu {
    max-width: calc(100vw - 60px) !important;
    min-width: 0 !important;
  }
}

/* ==================================================================
   PHASE 23B — LOCKED / PAYWALLED CONTENT PANEL  (universal)
   ------------------------------------------------------------------
   The locked placeholder is ONE shared block in
   resources/views/includes/updates.blade.php (~line 377), rendered
   with `.content-locked`. Its only styling came from old Sponzy CSS:
     public/css/styles.css            -> .content-locked { background:#ececec }
     includes/css_general.blade.php   -> .content-locked { background:#444444 }
   i.e. a flat white (or flat dark-grey) rectangle with a 60px grey lock
   and a full-width green slab button. The creator profile page already
   had a Playbooki treatment (playbooki-profile.css `.pb-profile-content
   .content-locked`) but the feed, explore, bookmarks and the individual
   post page had nothing.

   These rules are UNSCOPED to any single page on purpose: this stylesheet
   only loads on redesigned pages, so styling `.content-locked` here fixes
   the locked state everywhere it appears at once — feed, explore,
   bookmarks and post detail — from the same shared markup.

   Presentation ONLY. No paywall condition, price, PPV modal hook,
   subscription check, or hidden content is touched.
   ================================================================== */

/* ---- PHASE 23C: root layout fix ------------------------------------
   The panel looked "off-centre" because `.card-updates` is a Bootstrap
   `.card`, i.e. `display:flex; flex-direction:column`, and the panel
   carries Bootstrap's `.btn-block { width:100% }`. In a flex column,
   `width:100%` resolves against the card's FULL content box and the
   horizontal margins are then added OUTSIDE that width — so the panel
   measured 608px inside a 610px card plus 14px margins each side, and
   overflowed the card's right edge by ~14px. That overflow is what read
   as a left/right imbalance.
   Root fix: drop the 100% width and let flex stretch size it, so the
   panel is exactly card-width minus its own margins. No negative
   margins, no transforms.
   The panel is also its own flex column so the lock, title, body, CTA
   and chips share one centre axis instead of relying on `w-100` /
   auto side-margins to fake centring.                                  */
.content-locked,
.pb-locked-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;

  width: auto !important;      /* kill .btn-block width:100% (the overflow) */
  max-width: none !important;
  align-self: stretch;         /* fill the flex card minus our own margins */
  flex: 0 0 auto;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin: 2px 14px 14px !important;          /* inset from the card edges */
  padding: 30px 20px 26px !important;        /* was 96px 16px (pt-lg/pb-lg) */
  background-color: rgba(6, 11, 8, .88) !important;
  color: var(--pb-text) !important;
  border: 1px solid rgba(0, 200, 0, .13) !important;
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 14px 34px rgba(0, 0, 0, .34),
    0 0 18px rgba(0, 200, 0, .035) !important;
  background-size: cover;
  background-position: center;
}

/* Green wash + a very subtle diagonal shimmer, so it reads as "premium
   content behind a wall" rather than an empty grey box. */
.content-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(0, 200, 0, .085), rgba(0, 200, 0, 0) 58%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .014) 0px,
      rgba(255, 255, 255, .014) 1px,
      rgba(255, 255, 255, 0) 1px,
      rgba(255, 255, 255, 0) 14px
    );
}

/* Locked MEDIA posts get a blurred teaser image as an inline background.
   Keep the teaser, but lay a dark veil over it so the lock, copy and CTA
   stay readable and the panel still matches the un-teased variant. */
.content-locked[style*="url"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 8, 5, .58) 0%, rgba(3, 8, 5, .80) 100%);
}

/* Every direct child is a centred flex item on one axis. Their own widths
   are content-sized so nothing can drift left or right. */
.content-locked > * {
  position: relative;
  z-index: 1;
  width: auto !important;      /* neutralise .btn-block / .w-100 children */
  max-width: 100%;
  margin: 0 !important;        /* spacing comes from the panel's gap */
  flex: 0 0 auto;
}

/* ---- Lock mark: green-glass ring ----------------------------------- */
.content-locked > .pb-locked-icon,
.content-locked > span.btn-block:first-of-type {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important;
  height: 58px;
  border-radius: 50%;
  background: rgba(0, 200, 0, .075);
  border: 1px solid rgba(0, 200, 0, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 7px rgba(0, 200, 0, .032),
    0 0 18px rgba(0, 200, 0, .12);
}

/* styles.css sizes .ico-no-result as its own 150x150 bordered circle with
   line-height:150px !important — that box spilled out of our 66px mark and
   pushed the glyph above it. Collapse it back to a plain 26px glyph. */
.content-locked .ico-no-result {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  font-size: 26px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--pb-green) !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}

/* ---- Copy ---------------------------------------------------------- */
/* The title/sub pair is one tight block, so the gap reads as
   icon → copy → CTA → chips rather than five loose rows. */
.content-locked .pb-locked-title {
  margin: 2px 0 0 !important;
  font-family: var(--pb-fh, "Barlow Condensed"), var(--pb-fb), sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: .045em;      /* opens up the uppercase so it isn't crowded */
  text-transform: uppercase;
  text-align: center;
  color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0, 200, 0, .14);
}

.content-locked .pb-locked-sub {
  max-width: 290px;
  margin: -4px 0 2px !important;   /* pulls the helper line up under the title */
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--pb-t2) !important;
}

/* ---- CTA: a real action button, content-sized ---------------------- */
/* Was `.w-100` + max-width:300px, which still rendered as a 300px green
   slab. Now it hugs its label (with a sane min/max) so it reads as a
   button, not a warning banner. */
.content-locked .btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  min-width: 168px;
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  padding: 11px 26px !important;
  background: linear-gradient(180deg, #12de12 0%, var(--pb-green) 100%) !important;
  border: none !important;
  border-radius: 999px !important;
  color: #05140a !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  letter-spacing: .015em;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 6px 18px rgba(0, 200, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.content-locked .btn-primary i {
  font-size: 14px;
  line-height: 1;
}

/* Premium sheen that sweeps across on hover. Decorative only. */
.content-locked .btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .42) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
}

.content-locked .btn-primary:hover:not(.disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 10px 24px rgba(0, 200, 0, .30);
}

.content-locked .btn-primary:hover:not(.disabled)::after {
  opacity: 1;
  animation: pbLockedSheen .75s ease-out;
}

@keyframes pbLockedSheen {
  from { left: -60%; }
  to   { left: 115%; }
}

@media (prefers-reduced-motion: reduce) {
  .content-locked .btn-primary,
  .content-locked .btn-primary::after {
    transition: none;
    animation: none !important;
  }
  .content-locked .btn-primary:hover:not(.disabled) { transform: none; }
}

.content-locked .btn-primary:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* "Subscription not available" — same shape, muted so it doesn't shout. */
.content-locked .btn-primary.disabled {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--pb-t2) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  box-shadow: none;
  cursor: not-allowed;
}

.content-locked .btn-primary.disabled::after { display: none; }

/* ---- "what's inside" chips (Text / 3 images / 1 video / file size) --- */
.content-locked .list-inline {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 2px 0 0 !important;
  padding: 0;
  list-style: none;
}

.content-locked .list-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 999px;
  color: var(--pb-t3) !important;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.6;
}

.content-locked .list-inline-item i,
.content-locked .list-inline-item svg {
  color: var(--pb-green);
  opacity: .85;
  font-size: 11px;
}

.content-locked .list-inline-item .quality-video {
  color: var(--pb-green);
  font-weight: 700;
}

/* The old CSS forced white text when a teaser image is present; our veil
   already guarantees contrast, so keep the type on the Playbooki scale. */
.content-locked.text-white .pb-locked-sub,
.content-locked.text-white .list-inline-item {
  color: var(--pb-t2) !important;
}

/* ---- Mobile -------------------------------------------------------- */
@media (max-width: 575.98px) {
  .content-locked {
    margin: 2px 10px 10px !important;
    padding: 26px 14px 22px !important;
    border-radius: 16px !important;
    gap: 10px;
  }

  .content-locked > .pb-locked-icon,
  .content-locked > span.btn-block:first-of-type {
    width: 52px !important;
    height: 52px;
  }

  .content-locked .ico-no-result { font-size: 23px !important; }
  .content-locked .pb-locked-title { font-size: 19px; }
  .content-locked .pb-locked-sub { font-size: 12.5px; max-width: 250px; }

  /* Stay a button, never a full-bleed bar — cap it well inside the panel. */
  .content-locked .btn-primary {
    min-width: 0;
    max-width: 100% !important;
    padding: 10px 22px !important;
    font-size: 13px !important;
    white-space: normal;
  }
}

/* ==================================================================
   PHASE 24 — Report modal (.modalReport)
   Layering is handled in playbooki-redesign.js (the modal node is moved
   to <body> on open, escaping the post card's backdrop-filter trap).
   Everything below is presentation only, scoped to .modalReport so no
   other modal — subscribe, tip, message, share — is affected.
   ================================================================== */

/* Belt-and-braces: keep the report modal above the backdrop even on
   pages that don't carry the .pb-authenticated body class. */
.modal.modalReport {
  z-index: 2060 !important;
}

/* Centre the dialog in the viewport instead of hugging the top. */
.modalReport .modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 3.5rem);
  max-width: 420px;
  margin: 1.75rem auto;
}

.modalReport .modal-content {
  width: 100%;
  background: linear-gradient(180deg, rgba(20, 24, 20, .96), rgba(10, 12, 10, .98));
  border: 1px solid rgba(0, 200, 0, .28);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  overflow: hidden;
  color: #e9efe9;
}

.modalReport .modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 16px 20px;
  align-items: center;
}

.modalReport .modal-header .modal-title {
  font-weight: 700 !important;
  letter-spacing: .3px;
  font-size: 15px;
  color: #fff;
  margin: 0;
}

.modalReport .modal-header .modal-title i {
  color: var(--pb-green, #00c800);
}

/* Close button — visible on dark, not a faint grey blob. */
.modalReport .modal-header .close {
  opacity: 1;
  color: #b9c4b9;
  text-shadow: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 0;
  line-height: 28px;
  font-size: 13px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.modalReport .modal-header .close:hover,
.modalReport .modal-header .close:focus {
  color: var(--pb-green, #00c800);
  border-color: rgba(0, 200, 0, .5);
  background: rgba(0, 200, 0, .1);
  opacity: 1;
}

.modalReport .modal-body {
  padding: 18px 20px 6px;
}

.modalReport .modal-body label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #9fb09f;
  margin-bottom: 8px;
}

.modalReport .modal-body .form-control,
.modalReport .modal-body select.custom-select {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  color: #eaf2ea !important;
  font-size: 14px;
  padding: 10px 12px;
  height: auto;
  box-shadow: none !important;
}

.modalReport .modal-body .form-control::placeholder {
  color: #7f8c7f;
}

.modalReport .modal-body .form-control:focus,
.modalReport .modal-body select.custom-select:focus {
  border-color: rgba(0, 200, 0, .55) !important;
  box-shadow: 0 0 0 3px rgba(0, 200, 0, .14) !important;
  outline: none;
}

.modalReport .modal-body select.custom-select option {
  background: #101410;
  color: #eaf2ea;
}

.modalReport .modal-body textarea.form-control {
  min-height: 84px;
  resize: vertical;
}

.modalReport .modal-footer {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 14px 20px 18px;
  gap: 10px;
}

/* Cancel — quiet ghost button. */
.modalReport .modal-footer .btn[data-dismiss="modal"] {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #d3ddd3 !important;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
}

.modalReport .modal-footer .btn[data-dismiss="modal"]:hover {
  border-color: rgba(255, 255, 255, .35) !important;
  color: #fff !important;
}

/* Submit — Playbooki green. */
.modalReport .modal-footer .sendReport {
  background: var(--pb-green, #00c800) !important;
  border: 1px solid var(--pb-green, #00c800) !important;
  color: #06180a !important;
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(0, 200, 0, .22);
  transition: filter .15s ease, box-shadow .15s ease;
}

.modalReport .modal-footer .sendReport:hover,
.modalReport .modal-footer .sendReport:focus {
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(0, 200, 0, .3);
}

/* Mobile */
@media (max-width: 575.98px) {
  .modalReport .modal-dialog {
    max-width: none;
    margin: 1rem;
    min-height: calc(100% - 2rem);
  }

  .modalReport .modal-footer {
    flex-wrap: nowrap;
  }

  .modalReport .modal-footer .btn {
    flex: 1 1 auto;
  }
}

/* ==================================================================
   PHASE 30 / CTA-01 — logged-out homepage navbar, MOBILE ONLY.
   Desktop is deliberately untouched: it keeps Explore / Login / Get Started.
   At <=720px `.pb-nav-btn-outline` is already hidden (line ~2320), which left
   only the green "Get Started" — duplicating the hero's "Get Started Free".
   On phones we instead show LOGIN wearing the green primary treatment, so the
   hierarchy reads: navbar = returning users, hero = new users.
   Presentation only. No markup, route, modal or JS behaviour is changed;
   both links keep their existing hrefs and data-toggle attributes.
   ================================================================== */
@media (max-width: 720px) {
  /* signup CTA steps aside on phones (hero already carries it) */
  nav.pb-site-nav .pb-nav-btn-primary.toggleRegister { display: none !important; }

  /* Login takes its place, restyled to the primary green treatment
     (mirrors .pb-nav .pb-nav-btn-primary at line 147 + its 720px sizing) */
  nav.pb-site-nav .pb-nav-btn-outline.login-btn {
    display: inline-flex !important;
    height: 34px;
    min-height: 34px;
    padding: 0 16px;
    font-size: 13px;
    background: var(--pb-green);
    border: 0;
    color: #0a0a0a;
    font-weight: 800;
    box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
  }
  nav.pb-site-nav .pb-nav-btn-outline.login-btn:hover {
    color: #0a0a0a;
    opacity: .85;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PLAYBOOKI v2.1.3 — LOGGED-OUT HOMEPAGE POLISH
   Every rule below is scoped to `.pb-home-live` (the wrapper that only
   `index/home.blade.php` renders), so no logged-in page, admin screen or
   other guest page is affected.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. The clipped "?" in "Why sit on the sidelines?" ─────────────────────
   Cause (measured, not guessed): `.pb-cta-box h2` and `.pb-hero-title` paint
   their text with `-webkit-background-clip: text`, so the gradient is only
   painted inside the element's own border box. Both sit in a centring flex
   column (`.pb-cta-box` / `.pb-hero` are `display:flex; align-items:center`),
   which makes the heading shrink-wrap to the width of its widest line. Italic
   Barlow Condensed glyphs overhang their advance width, so at 1440px the "?"
   ink ended 1.83px past the box — that sliver got no gradient and, because the
   text colour is `transparent`, it simply vanished.
   Fix: widen the *painting area* with a small symmetric inline padding. Font
   size, weight, line-height, letter-spacing and centring are all untouched. */
.pb-home-live .pb-cta-box h2,
.pb-home-live .pb-hero-title > span,
.pb-home-live .pb-hero-title > strong {
  padding-inline: .16em;
}
/* (The hero lines only had ~1.9px of clearance, so they get the same guard.
   The two full-width `.pb-section-title` headings were measured at every test
   width and never overhang their box, so they are deliberately left alone.) */

/* ── 2. One continuous ambient background for the whole page ───────────────
   Previously the only green in the page came from `#pb-hero-canvas`, which is
   sized to `.pb-hero` and clipped by its `overflow:hidden`. The drifting glow
   blobs were therefore sliced off in a dead-straight horizontal line right
   above the stats bar. This single page-level layer spans the full document
   instead of any one section, so there is no seam to see, and it carries the
   CTA/hero colour language from the top of the page to the bottom.
   One element, one static paint, no animation, no repeat — cheap on mobile.
   `rgba(0,200,0,0)` (not `transparent`) is used for the stops so the fade does
   not run through premultiplied black and grey out. */
.pb-home-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;              /* behind every child of .pb-page, above <body> */
  pointer-events: none;
  background:
    /* hero — strongest */
    radial-gradient(60% 22% at 16% 2%,  rgba(0,200,0,.070), rgba(0,200,0,0) 70%),
    radial-gradient(50% 18% at 86% 10%, rgba(0,200,0,.052), rgba(0,200,0,0) 72%),
    /* hand-off under the fold, so the hero glow bleeds past the stats bar */
    radial-gradient(86% 14% at 46% 25%, rgba(0,200,0,.062), rgba(0,200,0,0) 76%),
    /* mid page — deliberately calmer */
    radial-gradient(58% 13% at 22% 45%, rgba(0,200,0,.036), rgba(0,200,0,0) 78%),
    radial-gradient(58% 13% at 80% 61%, rgba(0,200,0,.032), rgba(0,200,0,0) 78%),
    /* CTA — second peak */
    radial-gradient(76% 16% at 50% 87%, rgba(0,200,0,.105), rgba(0,200,0,0) 72%),
    radial-gradient(48% 11% at 20% 95%, rgba(0,200,0,.05),  rgba(0,200,0,0) 76%);
}

/* Fade the hero canvas out before it reaches the hero's bottom edge, so the
   drifting orbs dissolve into the page wash instead of being guillotined by
   the section boundary. Static mask = no extra animation work. */
.pb-home-live .pb-hero-canvas {
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,1) 58%, rgba(0,0,0,.45) 82%, rgba(0,0,0,0) 100%);
}

/* The full-bleed hairlines read as hard section rules against a continuous
   background. Same 1px, but faded at both ends so nothing draws a rectangle. */
.pb-home-live .pb-divider {
  background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.045) 16%,
      rgba(0,200,0,.15) 50%,
      rgba(255,255,255,.045) 84%,
      rgba(255,255,255,0) 100%);
}

/* ── 3. Passive card shimmer, ~50% slower ─────────────────────────────────
   Base sweep is `pb-shimmer 4s` (playbooki-redesign.css). 4s → 6s on every
   public-home card that already uses the treatment: the stats bar, the three
   How-It-Works steps, the featured Booki cards and the CTA box. Scoped so the
   logged-in feed and the /creators tiles keep their own timing. */
.pb-home-live .pb-shimmer::after {
  animation-duration: 6s;
}

@media (prefers-reduced-motion: reduce) {
  .pb-home-live .pb-shimmer::after {
    animation: none;
    background-image: none;
  }
}