/*
 * Add-ons: the hub, the three pages, and the bands that point at them.
 *
 * ADDITIVE. Every rule here is namespaced `wpbr-addon*` and reuses the tokens,
 * `.wpbr-featurecard`, `.wpbr-table` and the act rhythm that already exist; no
 * existing selector is overridden. Loaded only when an add-on is visible.
 * Colours come from tokens (`--wpbr-warn` carries the Beta badge).
 */
.wpbr-addon__badge {
  display: inline-block;
  margin-left: var(--wpbr-space-2);
  padding: 2px 10px;
  border-radius: var(--wpbr-radius-pill);
  background: var(--wpbr-navy);
  color: var(--wpbr-white);
  font-size: var(--wpbr-text-xs);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.wpbr-addon__badge--beta { background: var(--wpbr-surface-tint); color: var(--wpbr-text); border: 1px solid var(--wpbr-warn); }

.wpbr-addon__from { margin: var(--wpbr-space-3) 0 0; color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-addon__from small { color: var(--wpbr-muted-type); font-weight: normal; }

.wpbr-addon__note {
  margin: var(--wpbr-space-5) auto 0;
  max-width: var(--wpbr-measure);
  color: var(--wpbr-muted-type);
  font-size: var(--wpbr-text-sm);
  line-height: var(--wpbr-leading-body);
}
.wpbr-addon__note--center { text-align: center; }

.wpbr-addon__beta {
  margin: var(--wpbr-space-5) 0 0;
  padding: var(--wpbr-space-4) var(--wpbr-space-5);
  border: 1px solid var(--wpbr-warn);
  border-left-width: 6px;
  border-radius: var(--wpbr-radius-md);
  background: var(--wpbr-white);
  color: var(--wpbr-text);
}
.wpbr-addon__beta strong { display: block; margin-bottom: var(--wpbr-space-1); }

/* Illustration figures: always captioned as illustrations, never screenshots. */
.wpbr-addon__figure {
  margin: var(--wpbr-space-6) auto 0;
  padding: clamp(18px, 3vw, 32px);
  border: 1px solid var(--wpbr-rule);
  border-radius: 22px;
  background: var(--wpbr-white);
  box-shadow: 0 18px 46px rgba(18, 59, 105, .07);
}
.wpbr-addon__figure figcaption { margin-top: var(--wpbr-space-4); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }

.wpbr-flow { display: flex; gap: var(--wpbr-space-3); align-items: stretch; margin: 0; padding: 0; list-style: none; }
.wpbr-flow > li {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--wpbr-space-4);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  background: var(--wpbr-surface-tint);
}
.wpbr-flow > li.wpbr-flow__key { border: 2px solid var(--wpbr-blue); }
.wpbr-flow > li.wpbr-flow__ok { border-color: var(--wpbr-ok); }
.wpbr-flow__tag { display: block; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-xs); font-weight: var(--wpbr-weight-bold); letter-spacing: .06em; text-transform: uppercase; }
.wpbr-flow__title { display: block; margin-top: var(--wpbr-space-1); color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-flow__body { display: block; margin-top: var(--wpbr-space-1); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); line-height: var(--wpbr-leading-body); }

.wpbr-addon__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wpbr-space-6); }
.wpbr-addon__list { margin: var(--wpbr-space-3) 0 0; padding-left: 1.2em; color: var(--wpbr-text); line-height: var(--wpbr-leading-body); }
.wpbr-addon__list li + li { margin-top: var(--wpbr-space-2); }

/* Pro page: how the licences fit together. Bars are proportional to sites. */
.wpbr-alloc { margin: var(--wpbr-space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-3); }
.wpbr-alloc li { display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: center; gap: var(--wpbr-space-3); }
.wpbr-alloc__bar { display: block; height: 14px; border-radius: var(--wpbr-radius-pill); background: var(--wpbr-blue); }
.wpbr-alloc li:not(:first-child) .wpbr-alloc__bar { background: var(--wpbr-azure); }
.wpbr-alloc__sites { color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }

.wpbr-addon__table { margin-top: var(--wpbr-space-5); }
.wpbr-addon__table th[scope="row"] { text-align: left; }

@media (max-width: 760px) {
  .wpbr-flow { flex-direction: column; }
  .wpbr-addon__cols { grid-template-columns: 1fr; }
  .wpbr-alloc li { grid-template-columns: 1fr; gap: var(--wpbr-space-1); }
}

.wpbr-pagehero__inner--single { grid-template-columns: minmax(0, 1fr); }
.wpbr-pagehero__inner--single .wpbr-pagehero__copy { max-width: 62ch; }

.wpbr-addon__subhead { margin: var(--wpbr-space-7) 0 0; color: var(--wpbr-text); }

/* The cards sit on a tinted ground here; the link blue misses 4.5:1 on it, so
 * the type-safe blue token carries the link. */
.wpbr-addons-band .wpbr-featurecard .wpbr-actionlink,
#wpbr-addons-pricing .wpbr-featurecard .wpbr-actionlink { color: var(--wpbr-blue-type); }