/* Route CSS for /eventbrite-seating-chart/.
   The page borrows the shared eba-* comparison styles; everything here is
   either the two-flow hero diagram that replaced the app screenshot, or a
   correction to a shared rule that assumed a kicker, an eyebrow, or a dark
   band that this page no longer has. eventbrite-alternative.css is owned by
   the alternative page and must not be edited from here. */

.ebs-flows {
  display: grid;
  gap: .9rem;
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border: 1px solid #253044;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .04), rgba(11, 17, 27, .6));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.ebs-flow {
  padding: .95rem 1rem 1.05rem;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(9, 14, 23, .72);
}

.ebs-flow > p {
  display: block;
  margin: 0;
  color: #8f9bae;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.ebs-flow-owned {
  border-color: rgba(244, 183, 64, .38);
  background: linear-gradient(150deg, rgba(244, 183, 64, .1), rgba(9, 14, 23, .72));
}

.ebs-flow-owned > p {
  color: var(--amber-text);
}

.ebs-flow > ol {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .1rem;
  align-items: stretch;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.ebs-flow > ol > li {
  display: flex;
  flex: 1 1 0;
  min-width: 5.6rem;
  padding: .6rem .55rem;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  align-items: center;
  justify-content: center;
  color: #dbe3ef;
  background: rgba(255, 255, 255, .045);
  font-size: .74rem;
  font-weight: 650;
  line-height: 1.32;
  text-align: center;
}

.ebs-flow-owned > ol > li {
  border-color: rgba(244, 183, 64, .3);
  color: #f6f0e3;
}

.ebs-flow > ol > li + li::before {
  flex: 0 0 auto;
  margin: 0 .28rem 0 -.02rem;
  color: #5d6b80;
  content: "→";
  font-size: .78rem;
}

.ebs-flow-owned > ol > li + li::before {
  color: rgba(244, 183, 64, .75);
}

/* The shared note is written for a dark band; here it sits on paper. */
.eba-comparison .eba-migration-note {
  padding: .75rem 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  background: none;
  font-size: .78rem;
}

.eba-integration .eba-source-links {
  margin-top: 1.4rem;
}

.eba-integration .eba-iframe-note {
  margin-top: 1rem;
}

.eba-inline-routes {
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.7;
}

.eba-inline-routes a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(244, 183, 64, .5);
  text-underline-offset: 3px;
}

.eba-inline-routes a:hover {
  color: var(--amber-text);
}

/* No kicker above the H1 any more, and no eyebrow above the closer. */
.eba-hero h1 {
  margin-top: 0;
}

.eba-final h2 {
  margin-top: 0;
}

.eba-final-actions .eba-contact-link {
  margin-top: 0;
}

@media (max-width: 1000px) {
  .ebs-flows {
    width: min(100%, 820px);
  }
}

@media (max-width: 420px) {
  .ebs-flow > ol > li {
    flex: 1 1 100%;
  }

  .ebs-flow > ol > li + li::before {
    display: none;
  }
}

/* This route is a question page, not a pitch deck: the bands are tighter than
   on the competitor-alternative page they borrow from. */
.eba-fit,
.eba-comparison,
.eba-integration,
.eba-switch,
.eba-faq-section,
.eba-final {
  padding: clamp(3rem, 5.2vw, 3.6rem) 0;
}

@media (min-width: 1001px) {
  .eba-hero {
    padding-top: 3.6rem;
    padding-bottom: 3rem;
  }
}

/* Site title scale, not the alternative page's oversized comparison headings. */
.eba-section-head h2,
.eba-integration h2 {
  font-size: var(--sl-title-section);
  line-height: 1.12;
  letter-spacing: -.03em;
}

.eba-final h2 {
  font-size: var(--sl-title-final);
  line-height: 1.08;
}

/* Four steps, four columns — the borrowed three-up grid left one orphan. */
@media (min-width: 761px) {
  .eba-switch-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}