/* Blackbeard page styles. Type, spacing and container come from loot-brand.css (site: app/globals.css). */

.bb-page { overflow-x: hidden; }
.bb-nowrap { white-space: nowrap; }
.bb-highlight {
  background: linear-gradient(transparent 58%, var(--color-lt-green) 58%, var(--color-lt-green) 92%, transparent 92%);
  padding: 0 4px;
}
.bb-muted { color: var(--color-lt-dark-grey); }

/* Icon circles (icons are fixed px, so circles are too) */
.bb-icon-circle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--loot-green-tint);
  color: var(--color-lt-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-icon-circle_md { width: 44px; height: 44px; background: var(--color-lt-green); }
.bb-icon-circle_lg { width: 56px; height: 56px; }

/* Label with optional leading icon (site: SectionLabel) */
.bb-eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Section label with orbiting squares (site: components/ui/SectionLabel.tsx) */
.bb-section-label {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.bb-label-icon {
  position: relative;
  flex-shrink: 0;
  width: .75rem;
  height: .75rem;
}
.bb-label-icon span {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  background: currentColor;
  animation: bbOrbitA 2.204s infinite;
}
.bb-label-icon span + span { animation-name: bbOrbitB; }
@keyframes bbOrbitA {
  0%      { transform: translate(0, 0);       animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  24.917% { transform: translate(100%, 0);    animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  49.834% { transform: translate(100%, 100%); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  74.751% { transform: translate(0, 100%);    animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  99.668%, 100% { transform: translate(0, 0); }
}
@keyframes bbOrbitB {
  0%      { transform: translate(100%, 100%); animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  24.917% { transform: translate(0, 100%);    animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  49.834% { transform: translate(0, 0);       animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  74.751% { transform: translate(100%, 0);    animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
  99.668%, 100% { transform: translate(100%, 100%); }
}

/* Centered section heading block */
.bb-section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 38rem;
  margin: 0 auto 3rem;
  text-align: center;
}
.bb-section-head .label { margin-bottom: 1.5rem; }
.bb-section-head h2 { margin-bottom: 1rem; }
.bb-section-head h2:last-child { margin-bottom: 0; }
.bb-section-head p { max-width: 41.25rem; }

/* ---------- Header (site: .site_header) ---------- */
.bb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #FFFFFF;
}
.bb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  position: relative;
}
/* Bottom rule spans the content width, inside the container's side padding */
.bb-nav::after {
  content: '';
  position: absolute;
  right: 2rem;
  bottom: 0;
  left: 2rem;
  height: 1px;
  background: var(--color-lt-stroke);
}
.bb-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--color-lt-black);
}
.bb-logo:hover { color: var(--color-lt-black); }
.bb-logo-avatar {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.bb-logo-name {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}
.bb-logo-by {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding-left: .5rem;
  border-left: 1px solid var(--color-lt-stroke);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-lt-dark-grey);
}
.bb-logo-by img {
  width: 1.4rem;
  height: 1.4rem;
  object-fit: contain;
}
@media (min-width: 640px) {
  .bb-logo { gap: .625rem; }
  .bb-logo-by { padding-left: .625rem; }
  .bb-logo-avatar { width: 2.5rem; height: 2.5rem; }
  .bb-logo-name { font-size: 1.5rem; }
  .bb-logo-by { font-size: .8125rem; }
  .bb-logo-by img { width: 1rem; height: 1rem; }
}

/* site: .main_nav */
.bb-menu { display: none; }
@media (min-width: 1024px) { .bb-menu { display: flex; align-items: center; gap: 1rem; } }
/* Menu sits on the right, next to the header button */
@media (min-width: 1024px) { .bb-menu { margin-left: auto; margin-right: 1.5rem; } }
@media (min-width: 1536px) { .bb-menu { margin-right: 2rem; } }
@media (min-width: 1280px) { .bb-menu { gap: 1.5rem; } }
@media (min-width: 1536px) { .bb-menu { gap: 2.5rem; } }
.bb-menu a {
  position: relative;
  display: block;
  padding-bottom: .25rem;
  font-size: 1rem;
  line-height: 1.25;
  text-transform: uppercase;
}
.bb-menu a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: .125rem;
  background: var(--color-lt-green);
  transform: translateX(-50%);
  transition: width .3s ease-in-out;
}
.bb-menu a:hover { color: var(--color-lt-black); }
.bb-menu a:hover::after { width: 100%; }

.bb-header-cta { padding: .625rem 1rem; font-size: 1.2rem; }
@media (min-width: 640px) { .bb-header-cta { padding: .5rem 1.5rem; font-size: 1rem; } }

/* ---------- Hero ---------- */
.bb-hero { padding: 3.5rem 0 3rem; background: #FFFFFF; }
.bb-hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 3rem 4rem;
}
.bb-hero-copy {
  flex: 1 1 560px;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.bb-hero-copy h1 { text-wrap: balance; }
.bb-hero-copy p { max-width: 640px; text-wrap: pretty; }
.bb-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border-radius: 9999px;
  background: var(--loot-green-tint);
  color: var(--color-lt-black);
}
.bb-pill-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #2BB45A;
}
.bb-cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
}

/* Phone panels keep the mockup's original 16px context */
.bb-hero-visual,
.bb-feature-visual {
  background: var(--color-lt-grey);
  border-radius: 1rem;
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
  box-sizing: border-box;
}
/* Mascot beside the phone, 700px tall so the whole phone (624px) shows */
.bb-hero-visual,
.bb-feature-visual {
  min-height: 700px;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  overflow: hidden;
}
.bb-hero-visual { flex: 0 1 560px; }
/* Takes whatever width is left beside the phone, up to 250px */
.bb-scene-mascot {
  flex: 0 1 250px;
  min-width: 0;
  aspect-ratio: 396 / 664;
}
.bb-scene-mascot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}
/* image-slot tints its frame grey; let the transparent image sit on the panel */
.bb-scene-mascot image-slot::part(frame) { background: transparent; }
.bb-scene-phone { flex-shrink: 0; }
/* Small screens: shrink the fixed-size phone so the mascot stays beside it */
@media (max-width: 639px) {
  .bb-hero-visual,
  .bb-feature-visual { min-height: 0; gap: 12px; }
  .bb-scene-mascot { flex-grow: 1; }
  .bb-scene-phone { zoom: .6; }
}
@media (min-width: 480px) and (max-width: 639px) {
  .bb-scene-phone { zoom: .72; }
}

/* ---------- Crews marquee ---------- */
.bb-crews { padding: 1rem 0 0; background: #FFFFFF; }
.bb-crews > .label { margin-bottom: 1.5rem; justify-content: center; }
.bb-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.bb-marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: lootMarquee 48s linear infinite;
}
.bb-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1.5rem .75rem .75rem;
  border: 1px solid var(--color-lt-stroke);
  border-radius: 9999px;
  background: #FFFFFF;
}
.bb-chip-text { display: flex; flex-direction: column; gap: 2px; }
.bb-chip-trade { font-size: 1.3rem; color: var(--color-lt-dark-grey); }
.bb-chip-win { font-size: 1.5rem; font-weight: 600; white-space: nowrap; }
@media (min-width: 640px) {
  .bb-chip-trade { font-size: .8125rem; }
  .bb-chip-win { font-size: 1rem; }
}

/* ---------- Features ---------- */
.bb-features { background: #FFFFFF; }
.bb-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.5rem 5rem;
  padding-bottom: 2.5rem;
}
.bb-feature:last-child { padding-bottom: 0; }
.bb-feature_reverse { flex-direction: row-reverse; }
.bb-feature-visual {
  flex: 1 1 420px;
  max-width: 560px;
}
.bb-feature-copy {
  flex: 1 1 340px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bb-feature-copy .bb-eyebrow { margin-bottom: .5rem; }
.bb-feature-copy p { text-wrap: pretty; }

/* ---------- Recap ---------- */
.bb-recap { background: var(--color-lt-grey); }
.bb-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .bb-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bb-card-grid { grid-template-columns: repeat(4, 1fr); } }
.bb-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bb-card-title { font-weight: 500; line-height: 1.2; }
@media (min-width: 640px) { .bb-card { gap: 2rem; } }

/* ---------- How it works ---------- */
.bb-how { background: #FFFFFF; }
.bb-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.5rem;
}
.bb-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.5rem;
  border: 1px solid var(--color-lt-stroke);
  border-radius: 1rem;
}
.bb-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-lt-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.625rem;
  font-weight: 500;
}
.bb-step-title { margin-top: .5rem; line-height: 1.1; }

/* ---------- Safety ---------- */
.bb-safety { background: #FFFFFF; }
.bb-safety-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5rem 4rem;
  padding: 2.5rem;
  border-radius: 1rem;
  background-image: var(--lt-gradient);
  color: var(--color-lt-black);
  box-sizing: border-box;
}
@media (min-width: 768px) { .bb-safety-panel { padding: 4.5rem; } }
.bb-safety-intro {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.bb-safety-intro h2 { text-wrap: balance; }
.bb-safety-badge {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-safety-badge img { width: 84px; height: 84px; object-fit: contain; }
.bb-safety-grid {
  flex: 1.4 1 420px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .bb-safety-grid { grid-template-columns: repeat(2, 1fr); } }
.bb-safety-card {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .4);
}
.bb-safety-card .bb-icon-circle { color: var(--color-lt-black); }
.bb-safety-title { font-weight: 500; line-height: 1.25; }

/* ---------- Quote (site: no-draw-fee-restaurants/NodrawfeeTestimonial.tsx) ---------- */
/* .bb-quote { background: var(--color-lt-grey); } */
.bb-quote-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bb-quote-inner > .label { margin-bottom: 3rem; }
.bb-quote-card {
  position: relative;
  width: 100%;
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 2.75rem 1.5rem 1.5rem;
  border-radius: 1rem;
  background-image: var(--lt-gradient);
  box-sizing: border-box;
}
@media (min-width: 768px) { .bb-quote-card { padding: 3rem; } }
.bb-placeholder-tag {
  position: absolute;
  top: 0;
  left: 1.5rem;
  transform: translateY(-50%);
  padding: .3rem .875rem;
  border: 1px dashed var(--loot-purple);
  border-radius: 9999px;
  background: #FFFFFF;
  color: var(--color-lt-dark-grey);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (min-width: 768px) { .bb-placeholder-tag { left: 3rem; } }
.bb-stars { display: flex; gap: 4px; color: var(--loot-gold); }
.bb-quote-text { max-width: 45rem; }
.bb-quote-caption {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.bb-quote-caption img { display: none; }
.bb-quote-author { display: flex; flex-direction: column; gap: 2px; }
.bb-quote-name { font-weight: 600; }

/* ---------- Final CTA (site: components/home/UnlockTheFunds.tsx) ---------- */
.bb-cta {
  position: relative;
  background: var(--color-lt-grey);
}
.bb-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.bb-cta-inner .label { margin-bottom: 1.5rem; }
.bb-cta-inner h2 { margin-bottom: 2rem; text-wrap: balance; }
.bb-cta-inner .bb-cta-group { align-items: center; }
.bb-cta-video {
  position: relative;
  width: calc(100% + 4rem);
  max-width: 71.25rem;
  margin: 4rem -2rem 0;
  aspect-ratio: 359 / 180;
  overflow: hidden;
}
@media (min-width: 640px) {
  .bb-cta-video { width: 100%; margin: 0 auto; aspect-ratio: 359 / 161; }
}
.bb-cta-video video {
  display: block;
  width: 100%;
  height: auto;
  object-position: top;
  mix-blend-mode: darken;
}
.bb-cta-treasure {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: 27.5vw;
  max-width: 25.75rem;
  height: auto;
  transform: translateX(-50%);
}
/* White notched edge that opens into the footer card */
.bb-cta-curve {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
}
.bb-cta-curve svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
  /* border-bottom: 20px solid #FFFFFF; */
  border-radius: 1rem 1rem 0 0;
  box-sizing: content-box;
}

/* ---------- Footer (site: components/layout/Footer.tsx) ---------- */
.bb-footer { background: var(--color-lt-grey); }
.bb-footer-card { background: #FFFFFF; }
.bb-footer-inner {
  max-width: 83rem;
  margin: 0 auto;
  padding: 2.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  box-sizing: border-box;
}
.bb-footer-brand { display: flex; align-items: center; gap: .625rem; }
.bb-footer-brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.bb-footer-brand span { font-weight: 500; }
.bb-footer-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
@media (min-width: 640px) {
  .bb-footer-brand img { width: 1.75rem; height: 1.75rem; }
}