/* BowlBrain suite footer: a plain-CSS port of the shared BowlBrainFooter component used on
   theballroom.app (bowling-arsenal-app/components/landing/BowlBrainFooter.tsx), copied from the
   LaneLens site so every BowlBrain product ends the same way. Self-contained: every rule is scoped
   under .bbf. The markup is firebase/hosting/bowlbrain-footer.html, the same on every page.

   BowlMe's copy differs in three places, each marked "BowlMe:" here or below:
   - BowlMe: Cinzel is not loaded. The CSP allows nothing from another host (the site's promise, held
     by the hosting tests), so the display face falls back to Georgia unless the visitor has Cinzel.
   - Six cards rather than five, so the wide grid is three across, then six on a wide screen.
   - The bottom bar's mark is BowlMe's icon (/icon.svg), an <img> rather than an inline <svg>. */
.bbf{
  --bb-copper:#B8884A; --bb-copper-deep:#956E34; --bb-almond:#E8DCB0; --bb-forest:#1F3328; --bb-forest-dark:#0F1F18;
  --bb-cinzel:"Cinzel",Georgia,serif;
  --bb-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  position:relative; z-index:1;
  background:linear-gradient(to bottom,#0c0a09,#000); color:#a8a29e; border-top:1px solid #292524;
  font-family:var(--bb-sans); font-size:16px; line-height:1.5; text-align:left;
  -webkit-font-smoothing:antialiased;
}
.bbf *,.bbf *::before,.bbf *::after{box-sizing:border-box;}
.bbf a{color:inherit; text-decoration:none;}
.bbf a:focus-visible{outline:2px solid var(--bb-almond); outline-offset:3px; border-radius:4px;}
.bbf svg{display:block; flex:none;}
.bbf .bbf-top{border-bottom:1px solid rgba(41,37,36,.7);}
.bbf .bbf-in{max-width:1280px; margin:0 auto; padding:48px 16px;}
@media(min-width:640px){.bbf .bbf-in{padding:64px 24px;}}

.bbf .bbf-head{text-align:center; margin-bottom:40px;}
.bbf .bbf-eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0 0 16px; padding:4px 12px; border-radius:999px;
  background:rgba(184,136,74,.15); color:var(--bb-almond); border:1px solid rgba(184,136,74,.3);
  font-family:var(--bb-cinzel); font-size:11px; font-weight:600; letter-spacing:.35em; text-transform:uppercase; line-height:1.6;}
.bbf .bbf-eyebrow span{font-size:16px; letter-spacing:0;}
@media(max-width:400px){.bbf .bbf-eyebrow{letter-spacing:.22em; gap:6px;}}
.bbf h2{margin:0; font-family:var(--bb-cinzel); font-weight:700; color:#fff; font-size:24px; line-height:1.25; letter-spacing:-.025em; text-wrap:balance;}
@media(min-width:640px){.bbf h2{font-size:36px;}}
.bbf .bbf-lede{margin:12px auto 0; max-width:42rem; color:#a8a29e; font-size:14px; line-height:1.625;}
@media(min-width:640px){.bbf .bbf-lede{font-size:16px;}}
.bbf .bbf-lede a{font-weight:600; color:var(--bb-almond); text-underline-offset:4px;}
.bbf .bbf-lede a:hover{color:#fff; text-decoration:underline;}
.bbf .bbf-visit{margin-top:24px;}
.bbf .bbf-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:6px; background:var(--bb-copper); color:#1a1206;
  font-size:14px; font-weight:700; box-shadow:0 20px 25px -5px rgba(69,26,3,.4),0 8px 10px -6px rgba(69,26,3,.4); transition:background-color .15s;}
.bbf .bbf-btn:hover{background:var(--bb-copper-deep);}

.bbf .bbf-grid{display:grid; grid-template-columns:1fr; gap:12px;}
@media(min-width:640px){.bbf .bbf-grid{grid-template-columns:repeat(2,1fr); gap:16px;}}
/* BowlMe: six cards. */
@media(min-width:900px){.bbf .bbf-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1200px){.bbf .bbf-grid{grid-template-columns:repeat(6,1fr);}}
.bbf .bbf-card{position:relative; display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:12px; border:1px solid #292524;
  background:rgba(28,25,23,.6); transition:all .15s;}
.bbf .bbf-card:hover{border-color:rgba(184,136,74,.4); background:#1c1917;}
.bbf .bbf-card.is-here{background:linear-gradient(to bottom right,rgba(31,51,40,.8),rgba(15,31,24,.8)); border-color:rgba(184,136,74,.5);
  box-shadow:0 10px 15px -3px rgba(69,26,3,.3),0 4px 6px -4px rgba(69,26,3,.3);}
.bbf .bbf-chiprow{display:flex; justify-content:flex-end;}
.bbf .bbf-chip{padding:2px 6px; border-radius:999px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; line-height:1.5;}
.bbf .bbf-chip.here{background:var(--bb-almond); color:var(--bb-forest);}
.bbf .bbf-chip.live{background:rgba(6,78,59,.4); color:#6ee7b7; border:1px solid rgba(4,120,87,.4);}
.bbf .bbf-name{display:flex; align-items:center; gap:8px;}
.bbf .bbf-ico{width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; background:#292524; color:#d6d3d1; border:1px solid #44403c;}
.bbf .is-here .bbf-ico{background:rgba(184,136,74,.3); color:var(--bb-almond); border-color:rgba(184,136,74,.4);}
.bbf .bbf-ico svg{width:16px; height:16px;}
.bbf h3{margin:0; font-family:var(--bb-cinzel); font-size:14px; line-height:1.4; font-weight:700; color:#f5f5f4; letter-spacing:normal; text-wrap:wrap;}
.bbf .is-here h3{color:var(--bb-almond);}
.bbf .bbf-card p{margin:0; font-size:12px; line-height:1.625; color:#a8a29e;}
.bbf .is-here p{color:#d6d3d1;}
.bbf .bbf-this{margin-top:4px; font-size:11px; font-weight:600; color:var(--bb-copper);}
.bbf .bbf-out{margin-top:4px; display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--bb-copper);}
.bbf .bbf-out:hover{color:var(--bb-almond);}
.bbf .bbf-out svg{width:12px; height:12px;}

.bbf .bbf-soon{margin-top:24px; display:flex; flex-direction:column; align-items:center; gap:12px;}
.bbf .bbf-label{margin:0; font-size:11px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:#78716c;}
.bbf .bbf-pills{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.bbf .bbf-pill{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:999px; background:rgba(28,25,23,.6);
  border:1px solid #292524; color:#d6d3d1; font-size:14px; transition:color .15s,border-color .15s;}
.bbf .bbf-pill:hover{border-color:rgba(184,136,74,.4); color:#fff;}
.bbf .bbf-pill svg{width:16px; height:16px; color:#78716c;}
.bbf .bbf-pill b{font-family:var(--bb-cinzel); font-weight:600; color:inherit;}

.bbf .bbf-lanes{margin-top:40px; padding-top:32px; border-top:1px solid rgba(41,37,36,.7); display:flex; flex-direction:column; align-items:center; text-align:center;}
.bbf .bbf-lanes .bbf-label{color:var(--bb-almond); margin-bottom:12px;}
.bbf .bbf-ghost{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border-radius:6px; border:1px solid rgba(184,136,74,.45);
  color:var(--bb-almond); font-size:14px; font-weight:600; transition:background-color .15s,color .15s;}
.bbf .bbf-ghost:hover{background:rgba(184,136,74,.15); color:#fff;}
.bbf .bbf-ghost svg{width:16px; height:16px;}

.bbf .bbf-bottom{max-width:1280px; margin:0 auto; padding:32px 16px; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:16px;}
@media(min-width:640px){.bbf .bbf-bottom{flex-direction:row; padding:32px 24px;}}
.bbf .bbf-brand{display:flex; align-items:center; gap:10px;}
.bbf .bbf-brand svg{width:32px; height:32px;}
/* BowlMe: the pin, at the height of the suite's 32px marks. */
.bbf .bbf-brand img{display:block; width:32px; height:32px;}
.bbf .bbf-brand strong{font-family:var(--bb-cinzel); font-weight:700; color:#e7e5e4;}
.bbf .bbf-brand .bbf-sep,.bbf .bbf-brand .bbf-tag{display:none;}
@media(min-width:640px){.bbf .bbf-brand .bbf-sep{display:inline; color:#57534e;} .bbf .bbf-brand .bbf-tag{display:inline; font-size:11px; color:#78716c; text-transform:uppercase; letter-spacing:.1em;}}
.bbf .bbf-nav{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:16px; font-size:14px;}
@media(min-width:640px){.bbf .bbf-nav{column-gap:24px;}}
.bbf .bbf-nav a{display:inline-flex; align-items:center; gap:4px; min-height:44px;}
.bbf .bbf-nav a:hover{color:#fff;}
.bbf .bbf-nav svg{width:12px; height:12px;}
.bbf .bbf-copy{margin:0; font-size:12px; color:#78716c;}