/* ===========================================
   Black Excellence | Angel City FC vs Denver Summit FC
   Friday, September 11 2026 - BMO Stadium
   Self-contained HubSpot-style landing page.
   Design language ported from hubspot/2027Renewals (acfc-rnw-*),
   folded to a permanent dark theme to match the matchup creative.
   =========================================== */

:root {
  --sol-rosa: #f1b1a5;
  --sol-rosa-dark: #e0a094;
  --sol-rosa-soft: rgba(241, 177, 165, 0.18);
  --sol-rosa-glow: rgba(241, 177, 165, 0.30);

  --rnw-dark: #111111;
  --rnw-dark-mid: #1a1a1a;
  --rnw-card-dark: #242424;
  --rnw-card-dark-border: rgba(255, 255, 255, 0.10);

  --rnw-ink: #ffffff;
  --asphalt: #1c1c1c;
  --armour: rgba(255, 255, 255, 0.68);
  --line-white: #ffffff;
  --pitch-black: #000000;

  /* Elevation scale: e1 resting hairline, e2 cards, e3 hero surfaces */
  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-e2: 0 8px 28px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-e3: 0 22px 60px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-e3-rosa: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(241, 177, 165, 0.28);

  --shadow-card: var(--shadow-e2);
  --shadow-card-hover: var(--shadow-e3-rosa);

  --lift-hover: 0 -3px;
  --lift-transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s ease;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --transition: all 0.3s var(--ease-out);
  --be-scroll-offset: 50px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--be-scroll-offset);
}

html:has(.acfc-be-app) {
  overflow-x: hidden;
}

/* HubSpot SR offer bar (sr-offer-bar-01): omit on this landing page only */
html:has(.acfc-be-app) .sr-offer-bar-01 {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .acfc-be-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  color: var(--line-white);
  background: var(--rnw-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

/* ---------- App wrapper ---------- */

.acfc-be-app {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--rnw-dark);
  -webkit-tap-highlight-color: transparent;
}

.acfc-be-app a,
.acfc-be-app button,
.acfc-be-app [role="button"] {
  cursor: pointer;
}

/* ---------- Container ---------- */

.angelcity2026-container {
  max-width: 1340px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

@media (max-width: 600px) {
  .angelcity2026-container {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
  }
}

/* ---------- Scroll reveal ---------- */

.acfc-be-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}

.acfc-be-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delays are listed per transitioned property (opacity, transform, then any
   hover properties) so a staggered card still reacts to hover instantly. */
.acfc-be-reveal-stagger > .acfc-be-reveal:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
.acfc-be-reveal-stagger > .acfc-be-reveal:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s, 0s; }
.acfc-be-reveal-stagger > .acfc-be-reveal:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
.acfc-be-reveal-stagger > .acfc-be-reveal:nth-child(5) { transition-delay: 0.32s, 0.32s, 0s, 0s, 0s; }
.acfc-be-reveal-stagger > .acfc-be-reveal:nth-child(6) { transition-delay: 0.40s, 0.40s, 0s, 0s, 0s; }

/* ---------- Shared typography ---------- */

.acfc-be-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sol-rosa);
  margin: 0 0 12px;
}

.acfc-be-section-head {
  text-align: center;
  margin-bottom: clamp(24px, 4vw, 40px);
}

.acfc-be-section-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--line-white);
  margin: 0 0 8px;
  text-wrap: balance;
}

.acfc-be-section-title em {
  font-style: normal;
  font-weight: 900;
  color: var(--sol-rosa);
}

.acfc-be-section-lead {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: var(--armour);
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.65;
}

/* ============================================
   SIGNATURE SYSTEM - dreamy blur + frosted glass
   ============================================ */

.acfc-be-signature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.acfc-be-signature > .angelcity2026-container {
  position: relative;
  z-index: 1;
}

/* Dreamy blurred photo layer - keeps grit/intensity, never loses the image */
.acfc-be-dreamy {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.acfc-be-dreamy img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  filter: blur(8px) saturate(1.15) contrast(1.06);
}

/* Legibility scrim so copy stays readable over the photo */
.acfc-be-dreamy::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 90% at 16% 0%, rgba(241, 177, 165, 0.2) 0%, transparent 52%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.78) 52%, var(--rnw-dark) 100%);
}

.acfc-be-signature .acfc-be-section-title {
  text-shadow:
    0 0 20px rgba(0, 0, 0, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 2px 8px rgba(0, 0, 0, 0.6);
}

.acfc-be-signature .acfc-be-section-lead {
  color: rgba(255, 255, 255, 0.88);
  text-shadow:
    0 0 16px rgba(0, 0, 0, 0.7),
    0 1px 3px rgba(0, 0, 0, 0.8);
}

.acfc-be-signature .acfc-be-eyebrow {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Frosted-glass surface */
.acfc-be-frost {
  position: relative;
  background: rgba(26, 26, 26, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}

/* Hairline highlight along the top edge reads as polished glass */
.acfc-be-frost::after {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, rgba(241, 177, 165, 0.4), transparent);
  pointer-events: none;
}

/* Solid fallback where backdrop-filter is unsupported */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  .acfc-be-frost { background: rgba(26, 26, 26, 0.95); }
}

/* ---------- Buttons ----------
   Scoped to .acfc-be-app throughout. Other modules on the same HubSpot page
   ship their own unscoped .angelcity2026-btn-secondary (light-page variants
   that paint it --asphalt on white); the extra class keeps ours winning
   regardless of stylesheet order. */

.acfc-be-app .angelcity2026-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  padding: 0.95rem 2rem;
  white-space: nowrap;
  line-height: 1;
  min-height: 48px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.acfc-be-app .angelcity2026-btn-primary {
  background: var(--sol-rosa);
  color: var(--pitch-black);
  border-color: var(--sol-rosa);
}

.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-primary,
.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-primary:hover,
.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-primary:focus-visible {
  color: var(--pitch-black);
}

.acfc-be-app .angelcity2026-btn-primary:hover,
.acfc-be-app .angelcity2026-btn-primary:focus-visible {
  background: var(--sol-rosa-dark);
  border-color: var(--sol-rosa-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--sol-rosa-glow);
}

/* Every surface on this page is near-black, so an outline or translucent
   button disappears. Solid white keeps it as legible as the primary. */
.acfc-be-app .angelcity2026-btn-secondary {
  background: var(--line-white);
  color: var(--pitch-black);
  border-color: var(--line-white);
}

.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-secondary,
.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-secondary:hover,
.acfc-be-app a.angelcity2026-btn.angelcity2026-btn-secondary:focus-visible {
  color: var(--pitch-black);
}

.acfc-be-app .angelcity2026-btn-secondary:hover,
.acfc-be-app .angelcity2026-btn-secondary:focus-visible {
  background: #e6e6e6;
  border-color: #e6e6e6;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.acfc-be-app .angelcity2026-btn:focus-visible {
  outline: 2px solid var(--sol-rosa);
  outline-offset: 3px;
}

/* ---------- Hero: matchup artwork ---------- */

/* HubSpot column wrappers clamp content width; let the hero go full bleed. */
.sr-html .container-fluid:has(.acfc-be-hero-wrap) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container:has(.acfc-be-hero-wrap),
.container-sm:has(.acfc-be-hero-wrap),
.container-md:has(.acfc-be-hero-wrap),
.container-lg:has(.acfc-be-hero-wrap),
.container-xl:has(.acfc-be-hero-wrap) {
  overflow-x: visible !important;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.row:has(.acfc-be-hero-wrap) {
  overflow-x: visible !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0;
}

[class*="col"]:has(.acfc-be-hero-wrap) {
  overflow-x: visible !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.acfc-be-hero-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.acfc-be-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--rnw-dark);
}

/* Blurred, over-scaled copy of the artwork fills the side gutters so the
   frame never sits on flat black once the art is width-capped. */
.acfc-be-hero-backdrop {
  position: absolute;
  inset: -24px;
  z-index: 1;
  background-image: url('https://www.angelcity.com/hubfs/ACFC26_Match-up-Ad_0911vsDEN_Desktop.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) saturate(1.1) brightness(0.55);
  pointer-events: none;
}

.acfc-be-hero-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 3;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.acfc-be-hero-link:focus-visible {
  outline: 3px solid var(--sol-rosa);
  outline-offset: -6px;
  z-index: 10;
}

/* The artwork is a designed ad with type baked in, so the frame carries the
   source aspect ratio exactly and nothing gets cropped. Past 1460px the frame
   stops growing and the blurred backdrop fills the gutters. */
.acfc-be-hero-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1460px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
}

.acfc-be-hero-frame picture {
  display: block;
  width: 100%;
  height: 100%;
}

.acfc-be-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.04);
  animation: acfc-be-hero-settle 2.6s var(--ease-out) both;
}

@keyframes acfc-be-hero-settle {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

/* Feathers the artwork into the match card below it. */
.acfc-be-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to top, var(--rnw-dark) 0%, rgba(17, 17, 17, 0.55) 45%, transparent 100%);
}

@media (max-width: 767px) {
  .acfc-be-hero-frame {
    /* Mobile art is 1:1 */
    aspect-ratio: 1 / 1;
  }

  .acfc-be-hero-backdrop {
    display: none;
  }

  /* The 1:1 artwork has type baked into the bottom third. The desktop
     overlap and the feather gradient both sit on that copy, so neither
     belongs here. */
  .acfc-be-hero::after {
    height: 10%;
    background: linear-gradient(to top, var(--rnw-dark) 0%, transparent 100%);
  }

  .acfc-be-match {
    margin-top: 20px;
  }
}

/* ---------- Match card ---------- */

.acfc-be-match {
  position: relative;
  z-index: 5;
  padding: 0 0 clamp(48px, 7vw, 88px);
  /* Lift the card so it overlaps the artwork's feathered lower edge. */
  margin-top: clamp(-96px, -7vw, -40px);
}

@media (max-width: 767px) {
  /* Must follow the base rule: same specificity, later source order.
     The 1:1 mobile art has type in the bottom third, so the card cannot
     sit on top of it. */
  .acfc-be-match {
    margin-top: 20px;
  }
}

.acfc-be-match-card {
  padding: clamp(24px, 3.4vw, 40px) clamp(20px, 3.2vw, 44px) clamp(28px, 3.6vw, 42px);
  /* Sized to the crest row, the widest thing in here. Wider than this and the
     right side of the panel is empty. */
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-xl);
}

.acfc-be-match-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(16px, 2.2vw, 22px);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--sol-rosa);
  color: var(--pitch-black);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: normal;
  text-align: center;
}

.acfc-be-match-grid {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
}

/* Date block */

/* A hairline rail rather than a bordered panel: boxing the date inside the
   frosted card made it read as a card within a card. */
.acfc-be-datebox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(4px, 1vw, 10px) clamp(16px, 2.2vw, 26px) clamp(4px, 1vw, 10px) 0;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  /* Warm bloom behind the date, echoing the crest glow on the artwork above.
     Painted as a background rather than a pseudo-element so it cannot land
     behind the card's own frosted fill. */
  background: radial-gradient(60% 52% at 42% 40%, rgba(241, 177, 165, 0.13), transparent 100%);
}

.acfc-be-datebox-day {
  display: block;
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(4.2rem, 9.4vw, 6.4rem);
  font-weight: 400;
  line-height: 0.8;
  letter-spacing: 0.01em;
  color: var(--sol-rosa);
  text-shadow: 0 8px 30px rgba(241, 177, 165, 0.25);
}

.acfc-be-datebox-monthwrap {
  margin-top: 12px;
}

.acfc-be-datebox-month {
  display: block;
  font-size: clamp(0.95rem, 1.9vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--line-white);
  line-height: 1.1;
}

.acfc-be-datebox-weekday {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.1;
}

.acfc-be-datebox-rule {
  width: 36px;
  height: 1px;
  margin: 18px 0 16px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(241, 177, 165, 0.75), transparent);
}

.acfc-be-datebox-kickoff-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.2;
}

.acfc-be-datebox-kickoff {
  display: block;
  margin-top: 3px;
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--line-white);
  line-height: 1.15;
}

/* Crest matchup */

/* The content column is centred at every width; the date rail to its left is
   the only thing holding an edge. */
.acfc-be-match-main {
  text-align: center;
}

.acfc-be-crests {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 30px);
  margin-bottom: clamp(18px, 2.6vw, 28px);
}

.acfc-be-crest {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Square box with object-fit. Capped at 64px: the Denver crest is only 64px
   wide at source and goes soft if it is scaled up. */
.acfc-be-crest img {
  width: clamp(52px, 6.6vw, 64px);
  height: clamp(52px, 6.6vw, 64px);
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5));
}

/* The ACFC mark is a portrait shield (roughly 2:3) while Denver's is a square
   badge. In an identical square box `contain` limits the shield by height and
   renders it about a third narrower, so it reads as the smaller of the two.
   A taller box evens out the optical weight. */
.acfc-be-crest img.acfc-be-crest-shield {
  width: clamp(68px, 8.6vw, 86px);
  height: clamp(68px, 8.6vw, 86px);
}

.acfc-be-crest-name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.88rem, 1.8vw, 1.15rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--line-white);
}

.acfc-be-crest-vs {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  letter-spacing: 0.08em;
  color: var(--sol-rosa);
  flex-shrink: 0;
}

/* Copy + CTAs */

/* The artwork above already sets the "Black Excellence" headline at full size,
   so the card carries the h1 for structure only. */
.acfc-be-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.acfc-be-match-lead {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto clamp(16px, 2.2vw, 22px);
  max-width: 44ch;
  line-height: 1.5;
}

.acfc-be-match-venue {
  margin: 0 0 clamp(18px, 2.4vw, 24px);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sol-rosa);
  text-wrap: balance;
}

.acfc-be-match-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 860px) {
  .acfc-be-match-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  /* Stacked layout: the rail turns into a banner across the top of the card,
     so the divider moves from the right edge to the bottom. */
  .acfc-be-datebox {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
    padding: 4px 0 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: radial-gradient(58% 90% at 50% 45%, rgba(241, 177, 165, 0.13), transparent 100%);
  }

  .acfc-be-datebox-day {
    font-size: clamp(3.2rem, 15vw, 4.4rem);
  }

  .acfc-be-datebox-monthwrap {
    margin-top: 0;
    text-align: left;
  }

  .acfc-be-datebox-rule {
    display: none;
  }

  .acfc-be-datebox-kickoffwrap {
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    text-align: left;
  }

}

@media (max-width: 560px) {
  .acfc-be-match-card {
    padding: 22px 18px 26px;
    border-radius: var(--radius-lg);
  }

  .acfc-be-crest {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Buys back just enough room for "Denver Summit FC" to hold one line. */
  .acfc-be-crests {
    gap: 10px;
  }

  .acfc-be-crest-name {
    font-size: 0.8rem;
    letter-spacing: 0.01em;
  }

  .acfc-be-match-ctas .angelcity2026-btn {
    width: 100%;
    white-space: normal;
  }
}

/* ---------- Theme night pillars ---------- */

.acfc-be-pillars {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--rnw-dark);
}

.acfc-be-pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.acfc-be-pillar {
  position: relative;
  padding: 34px 28px 30px;
  overflow: hidden;
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.acfc-be-pillar-kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sol-rosa);
  margin: 0 0 10px;
}

.acfc-be-pillar-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--line-white);
  margin: 0 0 10px;
  line-height: 1.05;
}

.acfc-be-pillar-desc {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.acfc-be-pillar-desc strong {
  color: var(--line-white);
}

@media (max-width: 900px) {
  .acfc-be-pillars-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .acfc-be-pillar {
    padding: 24px 20px;
  }
}

/* ---------- Hype video + mosaic gallery ---------- */

.acfc-be-moments {
  position: relative;
  background: var(--rnw-dark-mid);
  padding: clamp(56px, 8vw, 96px) 0;
  overflow: hidden;
}

.acfc-be-moments::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--sol-rosa-soft) 0%, transparent 70%);
  pointer-events: none;
}

.acfc-be-moments > .angelcity2026-container {
  position: relative;
  z-index: 1;
}

.acfc-be-moments-video {
  position: relative;
  margin: 0 0 clamp(16px, 2.5vw, 24px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Cinematic letterbox: shorter than the source 16:9 so the frame does not
     dominate the section. The video is center-cropped to fill it. */
  aspect-ratio: 21 / 9;
  width: 100%;
  background: var(--rnw-card-dark);
  border: 1px solid rgba(241, 177, 165, 0.35);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
}

.acfc-be-moments-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Reaches higher and darker than a typical caption scrim because the footage
   pans across a near-white wing graphic that the caption would otherwise
   disappear into, most visibly on narrow screens where the copy wraps taller. */
.acfc-be-moments-video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.6) 34%,
    rgba(0, 0, 0, 0.24) 60%,
    transparent 88%
  );
  pointer-events: none;
}

.acfc-be-moments-video-toggle {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.5);
  color: var(--line-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-out);
}

.acfc-be-moments-video-toggle:hover,
.acfc-be-moments-video-toggle:focus-visible {
  background: var(--sol-rosa);
  border-color: var(--sol-rosa);
  color: var(--pitch-black);
  transform: scale(1.06);
  outline: none;
}

.acfc-be-moments-video-toggle:focus-visible {
  outline: 2px solid var(--sol-rosa);
  outline-offset: 3px;
}

/* Mute toggle shares the play/pause button's look, pinned to the opposite corner */
.acfc-be-moments-video-mute {
  top: auto;
  bottom: 16px;
  right: 16px;
}

.acfc-be-moments-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Show pause while playing, play while paused */
.acfc-be-moments-icon--pause { display: none; }
.acfc-be-moments-icon--play { display: block; }
.acfc-be-moments-video.is-playing .acfc-be-moments-icon--pause { display: block; }
.acfc-be-moments-video.is-playing .acfc-be-moments-icon--play { display: none; }

/* Show the muted (crossed-out) glyph by default, sound-wave glyph once unmuted */
.acfc-be-moments-icon--muted { display: block; }
.acfc-be-moments-icon--unmuted { display: none; }
.acfc-be-moments-video.is-unmuted .acfc-be-moments-icon--muted { display: none; }
.acfc-be-moments-video.is-unmuted .acfc-be-moments-icon--unmuted { display: block; }

.acfc-be-moments-video-caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: clamp(18px, 3vw, 28px);
  padding-right: 76px;
}

.acfc-be-moments-video-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sol-rosa);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

.acfc-be-moments-video-title {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(1.2rem, 2.7vw, 1.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--line-white);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* Mosaic grid */
.acfc-be-moments-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, clamp(130px, 14vw, 200px));
  gap: clamp(10px, 1.5vw, 16px);
}

.acfc-be-moments-tile {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

.acfc-be-moments-tile--tall {
  grid-row: span 2;
}

.acfc-be-moments-tile--wide {
  grid-column: span 2;
}

.acfc-be-moments-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35);
  transform: scale(1.01);
  transition: filter 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.acfc-be-moments-tile:hover img,
.acfc-be-moments-tile:focus-within img {
  filter: grayscale(0);
  transform: scale(1.06);
}

@media (max-width: 1024px) {
  /* Spans stop paying off once there are fewer columns than the mosaic
     assumes; fall back to an even grid. */
  .acfc-be-moments-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: clamp(140px, 26vw, 200px);
  }

  .acfc-be-moments-tile--tall,
  .acfc-be-moments-tile--wide {
    grid-row: auto;
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .acfc-be-moments-video {
    aspect-ratio: 16 / 9;
  }

  .acfc-be-moments-video-caption {
    padding-right: 72px;
  }

  /* At this width the default tracking pushes the kicker onto a second line,
     which stacks the caption tall enough to fight the stacked controls. */
  .acfc-be-moments-video-kicker {
    letter-spacing: 0.1em;
  }
}

/* ---------- Closing CTA band ---------- */

.acfc-be-cta-band {
  position: relative;
  padding: clamp(52px, 7vw, 88px) 0;
  text-align: center;
  color: var(--line-white);
  border-bottom: 1px solid var(--sol-rosa);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.74)),
    url('https://angelcityfc-pm.web.app/assets/bmo-stadium-img.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.acfc-be-cta-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
}

.acfc-be-cta-band .angelcity2026-container {
  position: relative;
  z-index: 1;
}

.acfc-be-cta-band-title {
  font-family: 'Anton', 'Inter', sans-serif;
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: var(--line-white);
  margin: 0 0 14px;
  line-height: 0.98;
}

.acfc-be-cta-band-title em {
  display: block;
  font-style: normal;
  color: var(--sol-rosa);
  margin-top: 0.08em;
}

.acfc-be-cta-band-lead {
  font-size: clamp(0.95rem, 1.8vw, 1.05rem);
  color: rgba(255, 255, 255, 0.9);
  max-width: 540px;
  margin: 0 auto 26px;
  line-height: 1.55;
}

.acfc-be-cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 560px) {
  .acfc-be-cta-band-actions {
    flex-direction: column;
    align-items: center;
  }

  .acfc-be-cta-band-actions .angelcity2026-btn {
    width: min(100%, 320px);
    white-space: normal;
  }
}

/* ---------- Floating CTA ---------- */

.acfc-be-notify {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000100;
  padding: 14px 16px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  pointer-events: none;
  display: flex;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s;
}

.acfc-be-notify.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.acfc-be-notify-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: all;
  min-height: 48px;
  /* Asymmetric on purpose: the bold top line far outweighs the small sub line,
     so a geometrically centred block still reads top-heavy. The extra top
     padding drops it ~2.5px to sit on the optical centre. */
  padding: 11px 40px 8px;
  border-radius: var(--radius-full);
  background: var(--sol-rosa);
  color: var(--pitch-black);
  border: none;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 24px rgba(241, 177, 165, 0.45), 0 8px 32px rgba(0, 0, 0, 0.35);
  transition: var(--transition);
}

.acfc-be-notify-btn:hover,
.acfc-be-notify-btn:focus-visible {
  background: var(--sol-rosa-dark);
  transform: translateY(-3px);
}

/* line-height 1 rather than the inherited body 1.65: the label is a single
   line, so the extra leading only skews where it sits inside the pill. */
.acfc-be-notify-main {
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.acfc-be-notify-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  opacity: 0.82;
}

@media (hover: none) {
  .acfc-be-app .angelcity2026-btn:hover,
  .acfc-be-notify-btn:hover {
    translate: none;
    transform: none;
  }
}