/* BADDAB!ng outcomes front page.
   Every rule is scoped under .bbp so nothing leaks into the theme. */

.bbp{
  --paper:#FFFFFF;
  --ink:#000000;
  --pink:#FF007F;
  /* Cyan from the neon logo. Two values: the bright one is for dark grounds
     only, the deep one carries enough contrast for small text on white. */
  --cyan:#00D9F5;
  --cyan-ink:#007A8A;
  --grey:#888888;
  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  /* Full bleed with a 32px gutter, matching the theme's header exactly so the
     logo and the content share a left edge. */
  --gutter:clamp(16px,4vw,32px);
  --wrap:none;
  --bd:3px;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:clamp(14px,.5vw + 12.4px,15.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:block;
}
.bbp *{box-sizing:border-box}
.bbp .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.bbp .wrap-pad{padding-block:clamp(44px,6.5vw,86px)}

.bbp h1,.bbp h2,.bbp h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;
  margin:0;text-wrap:balance;line-height:.98;color:var(--ink);
}
.bbp h1{font-size:clamp(2.7rem,9vw,6rem)}
.bbp h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.bbp h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.bbp p{margin:0}
.bbp a{color:var(--ink);text-decoration:none}
.bbp .pk{color:var(--pink)}

.bbp .lbl{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase}
.bbp .lbl.g{color:var(--grey)}
.bbp .rule{height:var(--bd);background:var(--ink);width:72px;margin-block:14px}

.bbp .block{border-bottom:var(--bd) solid var(--ink)}
.bbp .block > .wrap{padding-block:clamp(44px,6.5vw,86px)}
.bbp .hdr{display:grid;gap:12px;margin-bottom:34px}

/* hero */
.bbp .hero .wrap{padding-block:clamp(40px,6vw,76px) clamp(44px,6vw,80px);display:grid;gap:clamp(26px,3.4vw,38px)}
.bbp .hero-cols{display:grid;gap:clamp(22px,3vw,44px);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.bbp .hero-cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}}
.bbp .lede{font-family:var(--display);font-weight:500;font-size:clamp(1.12rem,1.2vw + .86rem,1.5rem);line-height:1.3;letter-spacing:-.015em;max-width:34ch}
.bbp .specs{border-top:var(--bd) solid var(--ink)}
.bbp .specs div{border-bottom:1px solid var(--ink);padding-block:11px;display:flex;gap:14px;align-items:baseline;font-size:.86rem}
.bbp .specs div:last-child{border-bottom:none}
.bbp .specs b{color:var(--cyan-ink);font-weight:600;flex:0 0 auto}

.bbp .cta{
  display:inline-flex;align-items:center;gap:14px;justify-self:start;
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:.01em;
  text-transform:uppercase;text-decoration:none;
  background:var(--ink);color:var(--paper);
  border:var(--bd) solid var(--ink);padding:15px 26px;
  transition:background .14s linear,color .14s linear,transform .14s ease;
}
.bbp .cta:hover,.bbp .cta:focus-visible{background:var(--pink);color:var(--ink);transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}

/* quotes */
.bbp ul.quotes{display:grid;gap:0;border-top:var(--bd) solid var(--ink);padding:0;margin:0;list-style:none}
@media(min-width:760px){.bbp ul.quotes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bbp .quotes li{
  list-style:none;border-bottom:1px solid var(--ink);
  padding:20px 20px 20px 22px;border-left:var(--bd) solid var(--pink);
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.02rem,1vw + .78rem,1.25rem);line-height:1.3;letter-spacing:-.015em;
}

/* steps */
.bbp .steps{display:grid;gap:0;border-top:var(--bd) solid var(--ink)}
@media(min-width:900px){.bbp .steps{grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ink)}}
.bbp .step{border-bottom:1px solid var(--ink);padding:20px;display:grid;gap:9px;align-content:start}
@media(min-width:900px){.bbp .step{border-right:1px solid var(--ink);border-bottom:var(--bd) solid var(--ink);min-height:230px}}
.bbp .step .n{font-family:var(--mono);font-weight:600;font-size:.76rem;color:var(--cyan-ink);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.bbp .step h3{font-size:1.25rem}
.bbp .step p{color:var(--grey);font-size:.84rem;line-height:1.6}

/* two-column feature */
.bbp .feat{display:grid;gap:clamp(24px,3.4vw,52px);grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.bbp .feat{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.bbp .bp{font-size:.92rem;line-height:1.75;max-width:62ch}
.bbp .bp + .bp{margin-top:16px}
.bbp .pull{
  border:var(--bd) solid var(--ink);background:var(--pink);padding:26px;align-self:start;
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.22rem,1.5vw + .88rem,1.7rem);line-height:1.12;
}

/* price board */
.bbp .tariff{border:var(--bd) solid var(--ink)}
.bbp .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;padding:20px clamp(16px,2vw,24px);border-bottom:1px solid var(--ink);align-items:baseline}
.bbp .row:last-child{border-bottom:none}
.bbp .row .nm{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.02em;text-transform:uppercase}
.bbp .row .fig{font-family:var(--mono);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.35rem);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.bbp .row .dsc{grid-column:1/-1;color:var(--grey);font-size:.86rem;max-width:68ch;line-height:1.65}
.bbp .row .days{grid-column:1/-1;font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--cyan-ink);font-weight:500}
.bbp .row.open{background:var(--pink)}
.bbp .row.open .dsc,.bbp .row.open .days{color:var(--ink)}
.bbp .note{margin-top:20px;font-size:.78rem;line-height:1.7;color:var(--grey);max-width:66ch}
.bbp .note.nt{margin-top:0}

/* six families */
.bbp .grid6{display:grid;gap:0;border-top:var(--bd) solid var(--ink);border-left:1px solid var(--ink)}
@media(min-width:680px){.bbp .grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.bbp .grid6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bbp .fam{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:22px clamp(16px,1.8vw,22px);display:grid;gap:0;align-content:start}
.bbp .fam .q{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);min-height:2.6em}
.bbp .fam h3{margin-top:4px;text-transform:uppercase}
.bbp .fam p{color:var(--ink);font-size:.84rem;line-height:1.62;margin-top:2px}
.bbp .fam .eg{margin-top:16px;padding-top:12px;border-top:1px solid var(--ink);font-size:.74rem;line-height:1.7;color:var(--pink);font-weight:500;text-transform:uppercase;letter-spacing:.04em}

/* inverted section */
.bbp .invert{background:var(--ink);color:var(--paper);border-bottom:var(--bd) solid var(--ink)}
.bbp .invert h2,.bbp .invert h3{color:var(--paper)}
.bbp .invert .lbl.g{color:var(--pink)}
.bbp .invert .rule{background:var(--pink)}
.bbp .invert p{color:#C9C9C9}
.bbp .invert .sp{margin-top:16px}
.bbp .tally{margin-top:28px;border-top:1px solid #3A3A3A}
.bbp .tally div{border-bottom:1px solid #3A3A3A;padding-block:13px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline;font-size:.84rem;color:#C9C9C9}
.bbp .tally b{color:var(--cyan);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.08em}

/* close */
.bbp .close{display:grid;gap:24px;justify-items:start}
.bbp .close p{color:var(--grey);max-width:60ch;font-size:.92rem}
.bbp .contact{border:var(--bd) solid var(--ink);padding:18px 22px;display:grid;gap:8px;font-size:.88rem;width:100%;max-width:520px}
.bbp .contact .k{font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pink);font-weight:500}
.bbp .contact .k.kt{margin-top:6px}
.bbp .contact .v{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.01em;word-break:break-word}
.bbp .contact .v a:hover{color:var(--pink)}

@media (prefers-reduced-motion: reduce){.bbp *{transition:none !important;animation:none !important}}
.bbp :focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* ---------------------------------------------------------------------
   Theme header, scaled up.
   These rules are NOT scoped to .bbp because they target the theme's own
   block header. This stylesheet loads on the front page only, so nothing
   else on the site is affected. Remove this block to leave the theme's
   header at its own size, or set these sizes permanently in Appearance >
   Editor instead.
   --------------------------------------------------------------------- */
.brutal-header .custom-logo{
  width:clamp(44px,4.4vw,64px);
  height:auto;
}
.brutal-header .wp-block-site-title,
.brutal-header .wp-block-site-title a{
  font-size:clamp(1.5rem,2.8vw,2.5rem);
  line-height:1;
  letter-spacing:-.02em;
}
/* The theme's ticker is replaced by ours below, so hide it here. */
.wp-block-group.marquee-ticker{
  display:none !important;
}

/* ---------------------------------------------------------------------
   Our ticker. Sits above the masthead, in place of the theme's.
   The wording is in bbo_ticker() in baddabing-outcomes.php.
   --------------------------------------------------------------------- */
.bbo-ticker{
  background:#FF007F;
  color:#000000;
  border-bottom:3px solid #000000;
  overflow:hidden;
  padding-block:.8rem;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-weight:500;
  font-size:clamp(.8125rem,1.05vw,1rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
}
.bbo-ticker__inner{
  display:inline-flex;
  white-space:nowrap;
  animation:bbo-ticker-scroll 46s linear infinite;
  will-change:transform;
}
.bbo-ticker__set{
  display:inline-flex;
  gap:3rem;
  padding-right:3rem;
}
@keyframes bbo-ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
/* Without animation the strip would simply be clipped, so let it wrap. */
@media (prefers-reduced-motion: reduce){
  .bbo-ticker{overflow:visible;padding-inline:32px}
  .bbo-ticker__inner{display:flex;flex-wrap:wrap;white-space:normal;animation:none}
  .bbo-ticker__set{flex-wrap:wrap;gap:.6rem 2rem;padding-right:0}
  .bbo-ticker__set[aria-hidden="true"]{display:none}
}