/* /solutions and /solutions/<slug> (v3, 2026-10-08). Every rule is
   scoped under .bz2 (the business page's scoped tokens, PLAN 0.1) or a
   .sol- class, so it is safe next to the site kit's Tailwind. The scene
   islands: modules/solutions/parts/Stage.tsx. */

.bz2.bz2-island {
  min-height: 0;
  background: transparent;
}

/* ── the stage wrapper: the kit slot's own max width, so the case tag and
   the CTA line align with the stage edges ─────────────────────────── */
.bz2 .sol-stage {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: min(
    560px,
    max(
      340px,
      calc((100svh - var(--bzs-phone-band, 76px)) * var(--ar-m-n, 0.65))
    )
  );
}
.bz2 .sol-stage .bzs-slot {
  max-width: none;
}
@media (min-width: 1024px) {
  .bz2 .sol-stage {
    max-width: calc((100vh - var(--bzs-desk-band, 160px)) * var(--ar-d-n, 1.4));
  }
}
.bz2 .sol-stage-pic {
  max-width: none;
}
/* the hero's case line sits on the aurora, where the muted grey fades
   out, so it reads in the darker ink (as on the feature pages) */
.bz2.sol-hero-stage .bzs-case span {
  color: var(--ink2);
}
/* the Pages & QR pane labels: on the aurora in light, inside the white
   card in dark, where the scene's own grey already reads */
.bz2.sol-hero-stage:not([data-theme="dark"]) {
  --ft-legend: var(--ink2);
}
.bz2 .sol-pic {
  position: relative;
  width: 100%;
}
.bz2 .sol-case {
  align-items: center;
}

/* ── pills ─────────────────────────────────────────────────────────── */
.bz2 .sol-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: 1px;
}
.bz2 .sol-pill-pro {
  color: #0a0a0a;
  background: #f2f2f0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.bz2 .sol-pill-live {
  color: #00702a;
  background: rgba(0, 136, 51, 0.1);
}

/* ── the hero stage ─────────────────────────────────────────────────── */
.bz2.sol-hero-stage {
  max-width: 1280px;
  margin: 0 auto;
}

/* a #hash landing (and a stack cell's jump) stops below the header: up
   to 1180px the 60px bar is sticky and slides back on the way up, so
   every anchor keeps 72px clear of the top. Above it the bar scrolls
   away with the page. */
@media (max-width: 1180px) {
  .sol-main [id] {
    scroll-margin-top: 72px;
  }
}

/* the hero headline and lead keep Inter's line breaks while Inter loads:
   a metric matched Arial stands in, so the copy does not gain or lose a
   line when the font swaps in and move the stage (CLS 0.14 at 768,
   B1-18). Each size is measured against Inter on the six pages at 390,
   768, 1024 and 1440. The stage itself holds its ratio from SSR (the kit
   slot's --ar-d/--ar-m). */
@font-face {
  font-family: "Inter Fallback Head";
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.8%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback Lead";
  font-weight: 100 500;
  src: local("Arial"), local("ArialMT");
  size-adjust: 105%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
.sol-hero-c h1 {
  font-family:
    "Inter",
    "Inter Fallback Head",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}
.sol-hero-c h1 + p {
  font-family:
    "Inter",
    "Inter Fallback Lead",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ── the product rows ───────────────────────────────────────────────── */
.bz2 .sol-row .sol-note {
  font-size: 13px;
  color: var(--mute2);
}
.bz2 .sol-feature-link {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.bz2 .sol-feature-link a {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  color: var(--mute);
  transition:
    color 0.2s ease,
    column-gap 0.2s ease;
}
.bz2 .sol-feature-link a:hover {
  color: var(--ink);
  column-gap: 9px;
}

/* the CTA line with the product page link beside it */
.bz2 .sol-cta-row {
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 10px;
}
@media (min-width: 1024px) {
  .bz2 .sol-cta-row {
    justify-content: space-between;
  }
}
.bz2 .sol-feature-a {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--mute);
  transition:
    color 0.2s ease,
    column-gap 0.2s ease;
}
.bz2 .sol-feature-a:hover {
  color: var(--ink);
  column-gap: 9px;
}

/* "Use it for": three or four small hairline cards under a stage */
.bz2 .sol-uses {
  margin-top: 48px;
}
.bz2 .sol-uses-h {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}
.bz2 .sol-uses-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 640px) {
  .bz2 .sol-uses-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .bz2 .sol-uses-grid {
    grid-template-columns: repeat(var(--sol-uses, 3), minmax(0, 1fr));
  }
}
.bz2 .sol-use {
  display: flex;
  align-items: stretch;
  column-gap: 14px;
  height: 100%;
  padding: 18px 18px 18px 20px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition:
    border-color 0.2s ease,
    transform 0.25s ease;
}
.bz2 a.sol-use:hover {
  border-color: var(--line3);
  transform: translateY(-2px);
}
.bz2 .sol-use-main {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.bz2 .sol-use-crop {
  flex: none;
  width: 72px;
  height: 72px;
  align-self: center;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line2);
  background: var(--panel);
  position: relative;
}
.bz2 .sol-use-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--line2);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  flex: none;
}
.bz2 .sol-use-who {
  display: flex;
  align-items: center;
  column-gap: 8px;
  font-size: 14px;
  line-height: 1.3;
}
.bz2 .sol-use-who img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex: none;
  box-shadow: 0 0 0 1px var(--line2);
}
.bz2 .sol-use-who b {
  font-weight: 600;
}
.bz2 .sol-use-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
}
.bz2 .sol-use-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* ── "The stack" row under the hero ─────────────────────────────────── */
.bz2.sol-stack-sec {
  padding: 56px 0 64px;
  border-top: 1px solid var(--line);
}
.bz2 .sol-stack .sol-stack-t {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}
.bz2 .sol-stack-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
@media (min-width: 640px) {
  .bz2 .sol-stack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .bz2 .sol-stack-grid {
    grid-template-columns: repeat(var(--sol-stack, 3), minmax(0, 1fr));
  }
}
.bz2 .sol-stack-grid > li {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.bz2 .sol-stack-cell {
  display: flex;
  flex-direction: column;
  row-gap: 6px;
  height: 100%;
  padding: 18px 20px 20px;
  color: var(--ink);
  transition: background-color 0.2s ease;
}
.bz2 .sol-stack-cell:hover {
  background: var(--panel);
}
.bz2 .sol-stack-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
}
.bz2 .sol-stack-top b {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  column-gap: 8px;
  min-width: 0;
}
.bz2 .sol-stack-n {
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mute2);
}
.bz2 .sol-stack-pills {
  display: inline-flex;
  column-gap: 6px;
  flex: none;
}
.bz2 .sol-dot-live {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mute);
}
.bz2 .sol-dot-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00a03c;
}
.bz2 .sol-stack-line {
  font-size: 14px;
  line-height: 1.45;
  color: var(--mute);
}

/* ── the pointer (agencies, enterprise) ─────────────────────────────── */
.bz2.sol-pointer-sec {
  padding: 0 0 96px;
}
.bz2 .sol-pointers {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}
.bz2 .sol-pointer {
  display: flex;
  flex-direction: column;
  row-gap: 14px;
  padding: 24px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.bz2 .sol-pointer:hover {
  border-color: var(--line3);
}
@media (min-width: 1024px) {
  .bz2 .sol-pointer {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 32px;
  }
}
.bz2 .sol-pointer-copy {
  display: flex;
  flex-direction: column;
  row-gap: 4px;
}
.bz2 .sol-pointer-copy b {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.bz2 .sol-pointer-copy span {
  font-size: 15px;
  color: var(--mute);
}
.bz2 .sol-pointer-cta {
  display: inline-flex;
  align-items: center;
  column-gap: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .bz2.sol-stack-sec {
    padding: 40px 0 48px;
  }
  .bz2 .sol-uses {
    margin-top: 32px;
  }
  .bz2.sol-pointer-sec {
    padding: 0 0 64px;
  }
}

/* ── the hero's chapter chips (the creators hero director) ──────────── */
.bz2 .sol-hero-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
}
.bz2 .sol-hero-chip {
  padding: 0 14px 0 6px;
}
.bz2 .sol-hero-chip img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex: none;
}
.bz2 .sol-hero-chip-n {
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
}
@media (max-width: 1023px) {
  /* .sol-chips: the sports stage's case chips, the same sideways row */
  .bz2 .sol-hero-chips,
  .bz2 .sol-chips {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - 28px),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      #000 0,
      #000 calc(100% - 28px),
      transparent
    );
    padding-bottom: 2px;
  }
  .bz2 .sol-hero-chips::-webkit-scrollbar,
  .bz2 .sol-chips::-webkit-scrollbar {
    display: none;
  }
  .bz2 .sol-hero-chip {
    flex: none;
  }
}

/* phones: a tighter hero so the first screen ends on the stage's phone,
   not on its top edge (site review 2026-10-09: "hero card ends with
   phone mock cropped in half; give the mock room") */
@media (max-width: 600px) {
  .sol-hero-c {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 16px;
  }
  .sol-hero-c h1 {
    font-size: 36px;
    line-height: 1.06;
  }
  .sol-hero-c h1 + p {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* phones and tablets (mobile pass 2026-10-15): the stage's small links
   and 32px chips get a clear tap area of 40px or more, same look. The
   sideways chip rows clip what sticks out, so they make room inside
   (padding) and give it back outside (margin): nothing moves. */
@media (max-width: 980px) {
  .bz2 .bzs-controls .bzs-chip:not(.bzs-chip--case),
  .bz2 .sol-stage .bzs-cta,
  .bz2 .sol-feature-a {
    position: relative;
  }
  .bz2 .bzs-controls .bzs-chip:not(.bzs-chip--case)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    bottom: -5px;
  }
  /* more room above: when the row wraps, the CTA sits 8px below and
     takes the space under this link */
  .bz2 .sol-feature-a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    bottom: -10px;
  }
  /* mostly below: when the row wraps, the CTA sits 8px under the
     "How it works" link and must not take its taps */
  .bz2 .sol-stage .bzs-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    bottom: -15px;
  }
  .bz2 .sol-hero-chips {
    padding-top: 5px;
    margin-top: -5px;
    padding-bottom: 5px;
    margin-bottom: -3px;
  }
  /* the sports and events row sets "padding: 0 2px" inline when it
     scrolls, so its room needs !important (top and bottom only) */
  .bz2 .sol-chips {
    padding-top: 5px !important;
    margin-top: -5px;
    padding-bottom: 5px !important;
    margin-bottom: -5px;
  }
}