/*
 * The add-ons marketing redesign.
 *
 * SOURCE: the approved design packet (`docs/design/WPBR Add-ons Marketing
 * Handoff Packet`, boards 3a–3k). ADDITIVE: every selector is `wpbr-rd-*`,
 * `wpbr-chip*`, `wpbr-submenu*` or `wpbr-sitenav__caret/chev`; nothing that
 * exists is overridden, and every colour that has a token uses it. The few
 * literals below (Beta amber, the soft greens) are status colours the design
 * names and the token set does not carry; they are not added to `tokens.css`,
 * which `tests/provenance.php` pins to the platform's copy.
 *
 * Loaded on every full-mode page (the masthead's Pro menu is on all of them).
 */

/* ------------------------------------------------------------------ */
/* Status chips: Add-on · Beta · Coming soon · Works with Pro          */
/* ------------------------------------------------------------------ */
.wpbr-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--wpbr-radius-pill);
  font-size: var(--wpbr-text-xs);
  font-weight: var(--wpbr-weight-bold);
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
  vertical-align: middle;
}
.wpbr-chip--addon, .wpbr-chip--ink { background: var(--wpbr-navy); color: var(--wpbr-white); }
.wpbr-chip--beta  { background: #FFD66B; color: #4A2E00; }
.wpbr-chip--soon  { background: #E9EDF2; color: var(--wpbr-muted-type); }
.wpbr-chip--pro   { background: var(--wpbr-mist); color: var(--wpbr-blue-type); }
.wpbr-chip--ask   { background: var(--wpbr-mist); color: var(--wpbr-blue-type); }

.wpbr-btn--disabled,
.wpbr-btn--disabled:hover {
  background: #E9EDF2;
  color: var(--wpbr-muted-type);
  border-color: transparent;
  box-shadow: none;
  cursor: not-allowed;
}
.wpbr-btn--onclose { background: var(--wpbr-white); color: var(--wpbr-navy); }
.wpbr-btn--onclose:hover { background: var(--wpbr-mist); color: var(--wpbr-navy); }
.wpbr-btn--onclose.wpbr-btn--disabled { background: rgba(255, 255, 255, .22); color: var(--wpbr-white); }

/* ------------------------------------------------------------------ */
/* The masthead's Pro menu                                             */
/* ------------------------------------------------------------------ */
.wpbr-sitenav__item--menu { position: relative; display: flex; align-items: center; }
.wpbr-sitenav__caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--wpbr-target-secondary);
  min-height: var(--wpbr-target);
  padding: 0 4px;
  margin-left: 2px;
  background: transparent;
  border: 0;
  color: var(--wpbr-text);
  cursor: pointer;
}
.wpbr-sitenav__chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-sitenav__caret[aria-expanded="true"] .wpbr-sitenav__chev { transform: translateY(1px) rotate(-135deg); }
.is-section > .wpbr-sitenav__link { color: var(--wpbr-blue-type); }

.wpbr-submenu {
  list-style: none;
  margin: 0;
  padding: var(--wpbr-space-2);
  min-width: 290px;
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-lg);
  box-shadow: var(--wpbr-shadow-screen);
}
.wpbr-submenu a {
  display: block;
  padding: 10px var(--wpbr-space-3);
  border-radius: var(--wpbr-radius-md);
  color: var(--wpbr-text);
  text-decoration: none;
}
.wpbr-submenu a:hover,
.wpbr-submenu a:focus-visible { background: var(--wpbr-mist); }
.wpbr-submenu a[aria-current="page"] { background: var(--wpbr-mist); box-shadow: inset 3px 0 0 var(--wpbr-blue); }
.wpbr-submenu__t { display: flex; align-items: center; gap: var(--wpbr-space-2); font-weight: var(--wpbr-weight-semi); }
.wpbr-submenu__d { display: block; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-submenu__item--l1 a { padding-left: calc(var(--wpbr-space-3) + 16px); }

@media (min-width: 900px) {
  .wpbr-submenu {
    position: absolute;
    top: 100%;
    left: -12px;
    z-index: 60;
    display: none;
  }
  /* SCRIPT OFF: hover and keyboard focus still open it. SCRIPT ON: the button
   * and Escape do, and `is-open` is the single source for the visible state. */
  .wpbr-sitenav__item--menu:hover > .wpbr-submenu,
  .wpbr-sitenav__item--menu:focus-within > .wpbr-submenu,
  .wpbr-sitenav__item--menu.is-open > .wpbr-submenu { display: block; }
  .js .wpbr-sitenav__item--menu:not(.is-open):hover > .wpbr-submenu,
  .js .wpbr-sitenav__item--menu:not(.is-open):focus-within > .wpbr-submenu { display: none; }
  .js .wpbr-sitenav__item--menu.is-open > .wpbr-submenu { display: block; }
}
@media (max-width: 899px) {
  .wpbr-sitenav__item--menu { flex-wrap: wrap; }
  .wpbr-sitenav__item--menu > .wpbr-sitenav__link { flex: 1 1 0; width: auto; }
  .wpbr-sitenav__caret { min-width: var(--wpbr-target); border-bottom: 1px solid var(--wpbr-rule); }
  .wpbr-submenu {
    flex: 0 0 100%;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 0 var(--wpbr-space-3);
  }
  .wpbr-submenu__d { display: none; }
  .wpbr-submenu a { border-bottom: 1px solid var(--wpbr-rule); border-radius: 0; padding: 12px 0; min-height: var(--wpbr-target); }
  .wpbr-submenu__item--l1 a { padding-left: 14px; }
  /* Script on: collapsed until the button is pressed. Script off: always open. */
  .js .wpbr-sitenav__item--menu:not(.is-open) > .wpbr-submenu { display: none; }
}

/* Five footer columns once the Add-ons column exists. */
@media (min-width: 900px) {
  .wpbr-footer__inner:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ */
/* Page frame                                                          */
/* ------------------------------------------------------------------ */
.wpbr-rd-wrap { max-width: var(--wpbr-page-max-wide); margin: 0 auto; padding: 0 var(--wpbr-gutter); }
.wpbr-rd-sec { padding: clamp(36px, 5vw, 64px) 0; }
.wpbr-rd-sec--tight { padding: clamp(10px, 2vw, 20px) 0 clamp(28px, 4vw, 44px); }
.wpbr-rd-sec--close { padding-bottom: clamp(48px, 6vw, 88px); }
.wpbr-rd-sec h2, .wpbr-rd-hero h1 { margin: 0; color: var(--wpbr-text); letter-spacing: -.03em; }
.wpbr-rd-sec h2 { font-size: var(--wpbr-text-act); line-height: 1.12; font-weight: var(--wpbr-weight-display); }
.wpbr-rd-sec h3 { margin: 0; color: var(--wpbr-text); font-size: 19px; line-height: 1.25; font-weight: var(--wpbr-weight-semi); }
:where(.wpbr-rd-sec) p { color: var(--wpbr-muted-type); line-height: var(--wpbr-leading-body); }
.wpbr-rd-kicker {
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-blue-type);
  font-size: var(--wpbr-text-xs);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wpbr-rd-kicker--onink { color: var(--wpbr-ice); }
.wpbr-rd-center { text-align: center; }
.wpbr-rd-narrow { max-width: 22em; }
.wpbr-rd-two { display: grid; gap: var(--wpbr-space-6); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; }
.wpbr-rd-two--even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }

/* Hero */
.wpbr-rd-hero {
  background: linear-gradient(180deg, var(--wpbr-mist) 0%, var(--wpbr-ground-mid) 70%, var(--wpbr-white) 100%);
  padding: var(--wpbr-space-6) 0 clamp(28px, 4vw, 56px);
}
.wpbr-rd-hero--cloud-storage { background: linear-gradient(180deg, #DCEEFF 0%, var(--wpbr-ground-mid) 75%, var(--wpbr-white) 100%); }
.wpbr-rd-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--wpbr-space-8); align-items: center; }
.wpbr-rd-hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.02; font-weight: var(--wpbr-weight-display); letter-spacing: -.045em; }
.wpbr-rd-hero .wpbr-crumbs { margin-bottom: var(--wpbr-space-5); }
.wpbr-rd-chips { display: flex; flex-wrap: wrap; gap: var(--wpbr-space-2); margin: 0 0 var(--wpbr-space-4); }
.wpbr-rd-lede { margin: var(--wpbr-space-4) 0 0; max-width: 34em; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-lede); line-height: 1.6; }
.wpbr-rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wpbr-space-4); margin-top: var(--wpbr-space-6); }
.wpbr-rd-meta { margin: var(--wpbr-space-4) 0 0; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-rd-hero__art { min-width: 0; }
.wpbr-rd-art { display: block; }
.wpbr-rd-art img { display: block; width: 100%; height: auto; }

/* Cards */
.wpbr-rd-cards { list-style: none; margin: var(--wpbr-space-6) 0 0; padding: 0; display: grid; gap: var(--wpbr-space-5); }
.wpbr-rd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpbr-rd-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpbr-rd-cards > li { padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: #F4F8FD; }
.wpbr-rd-cards > li p { margin: var(--wpbr-space-2) 0 0; }
.wpbr-rd-cards--line > li { background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-rd-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin-bottom: var(--wpbr-space-4);
  border-radius: 8px; background: var(--wpbr-blue); color: var(--wpbr-white);
  font-size: 15px; font-weight: var(--wpbr-weight-bold);
}
.wpbr-rd-cards--navy .wpbr-rd-num { background: var(--wpbr-navy); }
.wpbr-rd-num--round { border-radius: 50%; width: 28px; height: 28px; margin: 0; flex: none; font-size: 13px; }

.wpbr-rd-problem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--wpbr-space-8); align-items: start; }
.wpbr-rd-problem p { margin: 0; font-size: var(--wpbr-text-md); }

/* Steps (numbered rows) */
.wpbr-rd-steps { list-style: none; margin: var(--wpbr-space-5) 0 0; padding: 0; display: grid; gap: var(--wpbr-space-3); }
.wpbr-rd-steps li { display: flex; gap: var(--wpbr-space-3); align-items: flex-start; color: var(--wpbr-muted-type); line-height: 1.5; }
.wpbr-rd-steps strong { color: var(--wpbr-text); }
.wpbr-rd-steps--onink li, .wpbr-rd-steps--onink strong { color: var(--wpbr-on-navy); }
.wpbr-rd-steps--boxed li { padding: 12px var(--wpbr-space-3); border-radius: 10px; background: #F4F8FD; align-items: center; }
.wpbr-rd-steps--onblue li { background: rgba(255, 255, 255, .16); color: var(--wpbr-white); }
.wpbr-rd-steps--onblue .wpbr-rd-num { background: var(--wpbr-white); color: var(--wpbr-blue-type); }
.wpbr-rd-steps--row { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--wpbr-space-6); }

/* Ink panel with a figure (Multisite) */
.wpbr-rd-ink { padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--wpbr-navy); color: var(--wpbr-on-navy); }
.wpbr-rd-ink h2 { color: var(--wpbr-white); }
.wpbr-rd-netcard { margin: 0; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); color: var(--wpbr-text); }
.wpbr-rd-netcard table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: var(--wpbr-text-sm); }
.wpbr-rd-netcard caption { display: flex; justify-content: space-between; padding: 0 4px 6px; text-align: left; font-weight: var(--wpbr-weight-bold); caption-side: top; }
.wpbr-rd-netcard__count { color: var(--wpbr-blue-type); }
.wpbr-rd-netcard th, .wpbr-rd-netcard td { padding: 9px 12px; background: #F4F8FD; text-align: left; font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-netcard td { color: var(--wpbr-muted-type); font-weight: normal; }
.wpbr-rd-netcard th:first-child { border-radius: 8px 0 0 8px; }
.wpbr-rd-netcard td:last-child { border-radius: 0 8px 8px 0; }
.wpbr-rd-st { font-weight: var(--wpbr-weight-bold) !important; }
.wpbr-rd-st--ok { color: #0B6B43 !important; }
.wpbr-rd-st--warn { color: #7A4B00 !important; }
.wpbr-rd-netcard figcaption { margin-top: var(--wpbr-space-2); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-xs); }

/* Panels */
.wpbr-rd-panel { padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-rd-panel--safe { background: #E3F6EE; border-color: transparent; }
.wpbr-rd-panel--safe .wpbr-rd-kicker { color: #0B6B43; }
.wpbr-rd-panel--safe p { color: #1B3B2D; margin: 0; }
.wpbr-rd-panel--flow { background: #F4F8FD; border-color: transparent; }
.wpbr-rd-panel--outline { background: var(--wpbr-white); }
.wpbr-rd-list { margin: var(--wpbr-space-3) 0 0; padding-left: 1.2em; color: var(--wpbr-text); line-height: 1.7; }

/* Cloud lanes */
.wpbr-rd-lane { padding: var(--wpbr-space-6); border-radius: 22px; background: #F4F8FD; }
.wpbr-rd-lane .wpbr-rd-steps li { background: var(--wpbr-white); padding: 12px var(--wpbr-space-3); border-radius: 10px; align-items: center; }
.wpbr-rd-lane__sub { margin: var(--wpbr-space-2) 0 0; }

/* Enterprise */
.wpbr-rd-offer { padding: var(--wpbr-space-6); border-radius: 22px; background: #FFF6DF; align-self: stretch; }
.wpbr-rd-offer .wpbr-rd-kicker { color: #7A4B00; }
.wpbr-rd-offer h2 { font-size: 26px; }
.wpbr-rd-platforms { padding: var(--wpbr-space-6); border-radius: 22px; background: #F4F8FD; align-self: stretch; }
.wpbr-rd-platforms ul { list-style: none; margin: var(--wpbr-space-3) 0 0; padding: 0; display: grid; gap: var(--wpbr-space-2); }
.wpbr-rd-platforms li { display: flex; justify-content: space-between; align-items: center; padding: 12px var(--wpbr-space-4); border-radius: 10px; background: var(--wpbr-white); font-weight: var(--wpbr-weight-semi); color: var(--wpbr-text); }
.wpbr-rd-keys { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--wpbr-rule); border-radius: 22px; background: var(--wpbr-white); }
.wpbr-rd-keys__row { list-style: none; margin: var(--wpbr-space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wpbr-space-6); position: relative; }
.wpbr-rd-keys__row > li { position: relative; padding: var(--wpbr-space-5); border: 1px solid var(--wpbr-rule); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); }
.wpbr-rd-keys__row > li.is-key { border: 2px solid var(--wpbr-blue); background: var(--wpbr-mist); }
.wpbr-rd-keys__row > li:last-child { background: #F4F8FD; }
.wpbr-rd-keys__row > li:not(:last-child)::after { content: "\2192"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--wpbr-blue); font-weight: var(--wpbr-weight-bold); }
.wpbr-rd-keys__row p { margin: var(--wpbr-space-2) 0 0; }
.wpbr-rd-keys__row p.wpbr-rd-kicker { margin: 0 0 var(--wpbr-space-1); }

/* API + MCP */
.wpbr-rd-progress { list-style: none; margin: var(--wpbr-space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--wpbr-space-3); }
.wpbr-rd-progress li { padding: 8px 18px; border-radius: var(--wpbr-radius-pill); font-weight: var(--wpbr-weight-semi); font-size: var(--wpbr-text-sm); }
.wpbr-rd-progress li:not(:first-child)::before { content: "\2192"; margin-right: var(--wpbr-space-3); }
.wpbr-rd-progress .is-0 { background: #F0F2F6; color: var(--wpbr-muted-type); }
.wpbr-rd-progress .is-1 { background: var(--wpbr-white); color: var(--wpbr-blue-type); border: 2px solid var(--wpbr-blue); }
.wpbr-rd-progress .is-2 { background: var(--wpbr-blue); color: var(--wpbr-white); border: 2px solid var(--wpbr-blue); }
.wpbr-rd-upgrade { margin-top: var(--wpbr-space-6); }
.wpbr-rd-card { padding: var(--wpbr-space-6); border-radius: 22px; }
.wpbr-rd-card--pro { background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-rd-card--agent { background: var(--wpbr-blue); box-shadow: 0 18px 40px rgba(0, 109, 245, .25); }
.wpbr-rd-card--agent h3 { color: var(--wpbr-white); }
.wpbr-rd-card h3 { font-size: 22px; }
.wpbr-rd-flow { list-style: none; margin: var(--wpbr-space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wpbr-space-6); }
.wpbr-rd-flow li { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-rd-flow li strong { color: var(--wpbr-text); font-size: 16px; }
.wpbr-rd-flow li.is-key { background: var(--wpbr-blue); color: var(--wpbr-white); }
.wpbr-rd-flow li.is-key strong, .wpbr-rd-flow li.is-key .wpbr-rd-kicker { color: var(--wpbr-white); }
.wpbr-rd-flow li.is-ok { background: #E3F6EE; color: #1B3B2D; }
.wpbr-rd-flow li.is-ok strong { color: #0F3D2A; }
.wpbr-rd-flow li:not(:last-child)::after { content: "\2192"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--wpbr-blue); font-weight: var(--wpbr-weight-bold); }
.wpbr-rd-flow .wpbr-rd-kicker { margin: 0; font-size: 11px; }
.wpbr-rd-minis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wpbr-space-3); }
.wpbr-rd-minis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--wpbr-space-5); }
.wpbr-rd-minis li { display: flex; flex-direction: column; gap: 4px; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-rd-minis--4 li { background: #F4F8FD; }
.wpbr-rd-minis li strong { color: var(--wpbr-text); font-size: 15px; }

/* Fit + price strip */
.wpbr-rd-fit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wpbr-space-5); padding: var(--wpbr-space-6); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-mist); }
.wpbr-rd-fit h2 { font-size: 20px; letter-spacing: -.01em; }
.wpbr-rd-fit p { margin: var(--wpbr-space-1) 0 0; font-size: var(--wpbr-text-base); }
.wpbr-rd-fit .wpbr-rd-fit__offer { color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-prices { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wpbr-space-3); }
.wpbr-rd-prices li { min-width: 108px; padding: 10px var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); }
.wpbr-rd-prices__n { display: block; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-rd-prices strong { color: var(--wpbr-text); font-size: 26px; letter-spacing: -.02em; }
.wpbr-rd-prices small { color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); font-weight: normal; }

/* Closing band */
.wpbr-rd-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wpbr-space-5); padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: var(--wpbr-blue); }
.wpbr-rd-close h2 { max-width: 16em; color: var(--wpbr-white); font-size: clamp(28px, 3.6vw, 40px); }
.wpbr-rd-close--beta, .wpbr-rd-close--navy { background: var(--wpbr-navy); }
.wpbr-rd-close--beta .wpbr-btn { background: #FFD66B; color: var(--wpbr-navy); }

/* ------------------------------------------------------------------ */
/* Hub: ladder, tiles, "not sure"                                      */
/* ------------------------------------------------------------------ */
.wpbr-rd-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpbr-space-4); }
.wpbr-rd-ladder li { padding: var(--wpbr-space-5); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-rd-ladder li.is-pro { background: var(--wpbr-blue); border-color: transparent; }
.wpbr-rd-ladder li.is-addons { background: var(--wpbr-mist); border-color: rgba(0, 109, 245, .3); }
.wpbr-rd-ladder h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.wpbr-rd-ladder p { margin: var(--wpbr-space-2) 0 0; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-base); }
.wpbr-rd-ladder .wpbr-rd-kicker { margin: 0; }
.wpbr-rd-ladder .is-pro h2, .wpbr-rd-ladder .is-pro p, .wpbr-rd-ladder .is-pro .wpbr-rd-kicker { color: var(--wpbr-white); }

.wpbr-rd-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpbr-space-5); }
.wpbr-rd-tiles--hub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpbr-rd-tiles--home, .wpbr-rd-tiles--features, .wpbr-rd-tiles--pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wpbr-rd-tile { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--wpbr-rule); border-radius: 22px; background: var(--wpbr-white); }
.wpbr-rd-tiles--home .wpbr-rd-tile, .wpbr-rd-tiles--features .wpbr-rd-tile, .wpbr-rd-tiles--pro .wpbr-rd-tile { background: var(--wpbr-mist); border-color: transparent; }
.wpbr-rd-tile__img { padding: var(--wpbr-space-5) var(--wpbr-space-7) 0; background: #E4F1FF; }
.wpbr-rd-tile__img .wpbr-rd-art img { max-height: 200px; width: auto; margin: 0 auto; }
.wpbr-rd-tile__body { display: flex; flex-direction: column; flex: 1; padding: var(--wpbr-space-6); }
.wpbr-rd-tile__top { display: flex; justify-content: space-between; align-items: center; gap: var(--wpbr-space-3); margin: 0 0 var(--wpbr-space-3); }
.wpbr-rd-tile__name { color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-tile h3 { font-size: 22px; letter-spacing: -.02em; }
.wpbr-rd-tile__text { margin: var(--wpbr-space-3) 0 0; }
.wpbr-rd-tile__from { margin: var(--wpbr-space-3) 0 var(--wpbr-space-4); color: var(--wpbr-text) !important; font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-tile .wpbr-actionlink { margin-top: auto; padding-top: var(--wpbr-space-4); align-self: flex-start; color: var(--wpbr-blue-type); }
.wpbr-rd-needone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wpbr-space-5); }
.wpbr-rd-needone h2 { font-size: 22px; letter-spacing: -.01em; }
.wpbr-rd-needone p { margin: var(--wpbr-space-2) 0 0; max-width: 40em; }

/* ------------------------------------------------------------------ */
/* Pricing tiles (four add-ons, equal weight)                          */
/* ------------------------------------------------------------------ */
.wpbr-rd-ptiles { list-style: none; margin: var(--wpbr-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wpbr-space-4); }
.wpbr-rd-ptile { display: flex; flex-direction: column; padding: var(--wpbr-space-5); border: 1px solid var(--wpbr-rule); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); }
.wpbr-rd-ptile h3 { margin: var(--wpbr-space-3) 0 0; font-size: 22px; }
.wpbr-rd-ptile > p:not(.wpbr-rd-ptile__chip) { margin: var(--wpbr-space-2) 0 var(--wpbr-space-4); min-height: 4.8em; color: var(--wpbr-muted-type); font-size: var(--wpbr-text-base); line-height: 1.5; }
.wpbr-rd-ptile dl { margin: 0 0 var(--wpbr-space-4); }
.wpbr-rd-ptile dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--wpbr-rule); }
.wpbr-rd-ptile dt { color: var(--wpbr-muted-type); font-size: var(--wpbr-text-sm); }
.wpbr-rd-ptile dd { margin: 0; color: var(--wpbr-text); font-size: 20px; font-weight: var(--wpbr-weight-bold); }
.wpbr-rd-ptile dd small { color: var(--wpbr-muted-type); font-size: var(--wpbr-text-xs); font-weight: normal; }
.wpbr-rd-ptile .wpbr-btn { margin-top: auto; width: 100%; justify-content: center; }
.wpbr-rd-ptile--beta .wpbr-btn { background: #FFD66B; color: var(--wpbr-navy); }

/* Features: "Included, Pro, and add-ons" */
.wpbr-rd-glance { list-style: none; margin: var(--wpbr-space-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wpbr-space-4); }
.wpbr-rd-glance li { padding: var(--wpbr-space-5); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); border: 1px solid var(--wpbr-rule); }
.wpbr-rd-glance h3 { margin: 0 0 var(--wpbr-space-2); }
.wpbr-rd-glance p { margin: 0; }

/* ------------------------------------------------------------------ */
/* Homepage                                                            */
/* ------------------------------------------------------------------ */
.wpbr-rd-reassure { list-style: none; margin: 0; padding: var(--wpbr-space-5) var(--wpbr-gutter); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wpbr-space-3) var(--wpbr-space-8); border-bottom: 1px solid var(--wpbr-rule); background: var(--wpbr-white); }
.wpbr-rd-reassure li { display: flex; align-items: center; gap: var(--wpbr-space-2); color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); font-size: var(--wpbr-text-base); }
.wpbr-rd-reassure li::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #E3F6EE; color: #0B6B43; font-size: 13px; font-weight: var(--wpbr-weight-bold); }

.wpbr-rd-oldnew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wpbr-space-5); }
.wpbr-rd-oldnew > div { padding: var(--wpbr-space-7); border-radius: 22px; border: 1px solid var(--wpbr-rule); background: var(--wpbr-white); }
.wpbr-rd-oldnew .is-new { background: var(--wpbr-blue); border-color: transparent; }
.wpbr-rd-oldnew h2 { font-size: clamp(24px, 3vw, 32px); margin-top: var(--wpbr-space-2); }
.wpbr-rd-oldnew .is-new h2, .wpbr-rd-oldnew .is-new li, .wpbr-rd-oldnew .is-new .wpbr-rd-kicker { color: var(--wpbr-white); }
.wpbr-rd-oldnew ul { margin: var(--wpbr-space-4) 0 0; padding-left: 1.2em; color: var(--wpbr-muted-type); line-height: 1.8; }

.wpbr-rd-workflow { padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: #F4F8FD; }
.wpbr-rd-workflow h2 { margin: 0 auto; max-width: 18em; text-align: center; }
.wpbr-rd-workflow .wpbr-rd-kicker { text-align: center; }
.wpbr-rd-flow4 { list-style: none; margin: var(--wpbr-space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wpbr-space-5); position: relative; counter-reset: wf; }
.wpbr-rd-flow4::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 14px; height: 2px; background: var(--wpbr-blue); }
.wpbr-rd-flow4 > li { position: relative; padding-top: 44px; }
.wpbr-rd-flow4 .wpbr-rd-num { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin: 0; z-index: 1; }
.wpbr-rd-flow4 .is-last .wpbr-rd-num { background: #2E9E6B; }
.wpbr-rd-flow4__card { height: 100%; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); box-shadow: var(--wpbr-shadow-raised); }
.wpbr-rd-flow4 .is-last .wpbr-rd-flow4__card { background: #E3F6EE; }
.wpbr-rd-flow4__rows { list-style: none; margin: 0 0 var(--wpbr-space-3); padding: 0; display: grid; gap: 6px; }
.wpbr-rd-flow4__rows li { display: flex; justify-content: space-between; gap: var(--wpbr-space-2); padding: 7px 10px; border-radius: 8px; background: #F4F8FD; color: var(--wpbr-text); font-size: 12px; font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-flow4__rows li.is-ok { background: #E3F6EE; color: #0B6B43; }
.wpbr-rd-flow4__rows li.is-info { background: var(--wpbr-mist); color: var(--wpbr-blue-type); }
.wpbr-rd-flow4__rows li.is-held { background: #FFF8E5; color: #7A4B00; border: 1px dashed #C99A2E; }
.wpbr-rd-flow4__rows li.is-done { background: var(--wpbr-white); color: #0B6B43; }
.wpbr-rd-flow4 h3 { font-size: 17px; }
.wpbr-rd-flow4 p { margin: 4px 0 0; font-size: var(--wpbr-text-sm); }
.wpbr-rd-outcome { margin: var(--wpbr-space-6) 0 0; padding: var(--wpbr-space-4); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); text-align: center; color: var(--wpbr-text); }
.wpbr-rd-outcome strong { color: var(--wpbr-blue-type); }

.wpbr-rd-trust3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wpbr-space-6); }
.wpbr-rd-trust3 li { padding-top: var(--wpbr-space-4); border-top: 3px solid var(--wpbr-blue); }
.wpbr-rd-trust3 h3 { font-size: 20px; }
.wpbr-rd-trust3 p { margin: var(--wpbr-space-2) 0 0; }
.wpbr-rd-homeclose { padding: clamp(36px, 6vw, 72px) var(--wpbr-gutter); border-radius: 24px; background: linear-gradient(180deg, #DCEEFF, var(--wpbr-mist)); text-align: center; }
.wpbr-rd-homeclose h2 { max-width: 14em; margin: 0 auto; }
.wpbr-rd-homeclose .wpbr-rd-actions { justify-content: center; }
.wpbr-rd-sechead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--wpbr-space-5); margin-bottom: var(--wpbr-space-6); }
.wpbr-rd-proband { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--wpbr-space-8); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 24px; background: var(--wpbr-mist); }
.wpbr-rd-proband .wpbr-rd-alias { padding: var(--wpbr-space-5); border-radius: var(--wpbr-radius-lg); background: var(--wpbr-white); }
.wpbr-rd-alias__row { display: flex; align-items: center; gap: var(--wpbr-space-3); margin: 0; padding: 10px 14px; border-radius: 8px; background: #F4F8FD; color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-rd-alias__row span:first-child { color: var(--wpbr-muted-type); text-decoration: line-through; }
.wpbr-rd-proband .wpbr-rd-alias small { display: block; margin-top: 8px; color: var(--wpbr-blue-type); }

/* ------------------------------------------------------------------ */
/* Tablet and mobile                                                   */
/* ------------------------------------------------------------------ */
@media (max-width: 899px) {
  .wpbr-rd-hero__grid, .wpbr-rd-two, .wpbr-rd-problem, .wpbr-rd-proband { grid-template-columns: minmax(0, 1fr); gap: var(--wpbr-space-6); }
  .wpbr-rd-two--even { grid-template-columns: minmax(0, 1fr); }
  .wpbr-rd-hero__art { order: 2; }
  .wpbr-rd-cards--3, .wpbr-rd-trust3, .wpbr-rd-glance { grid-template-columns: minmax(0, 1fr); }
  .wpbr-rd-ptiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpbr-rd-tiles--hub, .wpbr-rd-tiles--home, .wpbr-rd-tiles--features, .wpbr-rd-tiles--pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wpbr-rd-keys__row, .wpbr-rd-flow, .wpbr-rd-steps--row, .wpbr-rd-minis--4, .wpbr-rd-minis { grid-template-columns: minmax(0, 1fr); }
  .wpbr-rd-keys__row > li:not(:last-child)::after, .wpbr-rd-flow li:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -22px; transform: translateX(-50%); }
  .wpbr-rd-keys__row, .wpbr-rd-flow { gap: var(--wpbr-space-7); }
  .wpbr-rd-oldnew { grid-template-columns: minmax(0, 1fr); }
  /* The workflow becomes a vertical track. */
  .wpbr-rd-flow4 { grid-template-columns: minmax(0, 1fr); gap: var(--wpbr-space-4); }
  .wpbr-rd-flow4::before { left: 14px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .wpbr-rd-flow4 > li { padding: 0 0 0 48px; }
  .wpbr-rd-flow4 .wpbr-rd-num { left: 0; transform: none; }
}
@media (max-width: 640px) {
  .wpbr-rd-ptiles, .wpbr-rd-tiles--hub, .wpbr-rd-tiles--home, .wpbr-rd-tiles--features, .wpbr-rd-tiles--pro { grid-template-columns: minmax(0, 1fr); }
  .wpbr-rd-cards--2 { grid-template-columns: minmax(0, 1fr); }
  .wpbr-rd-actions .wpbr-btn { width: 100%; justify-content: center; }
  .wpbr-rd-close .wpbr-btn, .wpbr-rd-needone .wpbr-btn { width: 100%; justify-content: center; }
  .wpbr-rd-prices li { flex: 1 1 30%; min-width: 0; }
  .wpbr-rd-reassure { justify-content: flex-start; }
}
.wpbr-addons-band .wpbr-rd-tiles { margin-top: var(--wpbr-space-6); }

/* The Review & Resolve capture beside its copy: a 4:3 window onto the table. */
.wpbr-rd-approve .wpbr-shot { margin: 0; }
.wpbr-rd-approve .wpbr-shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.wpbr-rd-ptile__chip { margin: 0; }

/* Contrast on the tinted and blue grounds (axe, 4.5:1). */
.wpbr-rd-proband .wpbr-actionlink, .wpbr-rd-tile .wpbr-actionlink { color: var(--wpbr-blue-type); }
.wpbr-rd-card--agent .wpbr-rd-kicker { color: var(--wpbr-white); }
.wpbr-rd-steps--onblue li { background: rgba(0, 40, 110, .38); }

/* The network figure never forces the page wider. */
.wpbr-rd-ink > * { min-width: 0; }
.wpbr-rd-netcard table { table-layout: fixed; }
.wpbr-rd-netcard th { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .wpbr-rd-ink { padding: 20px 14px; border-radius: 18px; }
  .wpbr-rd-netcard { padding: var(--wpbr-space-3) var(--wpbr-space-2); }
  .wpbr-rd-netcard th, .wpbr-rd-netcard td { padding: 8px 6px; font-size: 12px; }
}
.wpbr-rd-netcard caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--wpbr-space-3); }
.wpbr-rd-netcard caption > span { flex: 0 0 auto; }
.wpbr-rd-netcard th[scope="row"] { width: 46%; }
.wpbr-rd-netcard td:nth-child(2) { width: 24%; }
@media (max-width: 480px) {
  .wpbr-rd-netcard th, .wpbr-rd-netcard td { font-size: 11.5px; padding: 8px 4px; }
  .wpbr-rd-netcard th[scope="row"] { overflow-wrap: normal; word-break: normal; }
}
.wpbr-addons-band.wpbr-act--tint .wpbr-rd-tile { background: var(--wpbr-white); border-color: var(--wpbr-rule); }

/* API + MCP interim art: a plain text flow, no illustration (see wpbr_addon_art). */
.wpbr-rd-artflow { list-style: none; margin: 0; padding: var(--wpbr-space-5); display: grid; gap: 22px; border-radius: 22px; background: #E4F1FF; }
.wpbr-rd-artflow li { position: relative; padding: 12px var(--wpbr-space-4); border-radius: var(--wpbr-radius-md); background: var(--wpbr-white); color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); text-align: center; }
.wpbr-rd-artflow li.is-key { background: var(--wpbr-blue); color: var(--wpbr-white); }
.wpbr-rd-artflow li:not(:last-child)::after { content: "\2193"; position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%); color: var(--wpbr-blue-type); font-size: 16px; font-weight: var(--wpbr-weight-bold); line-height: 1; }
.wpbr-rd-tile .wpbr-rd-artflow { padding: var(--wpbr-space-3); gap: 18px; background: transparent; }
.wpbr-rd-tile .wpbr-rd-artflow li { padding: 6px 10px; font-size: var(--wpbr-text-sm); }
.wpbr-rd-tile .wpbr-rd-artflow li:not(:last-child)::after { bottom: -17px; font-size: 13px; }

.wpbr-rd-fit .wpbr-rd-fit__pro { margin-top: var(--wpbr-space-3); max-width: 46em; font-size: var(--wpbr-text-sm); }
.wpbr-rd-fit .wpbr-rd-fit__pro .wpbr-actionlink { color: var(--wpbr-blue-type); }

/* ------------------------------------------------------------------ */
/* Contrast: two defects on pages the AI design touches (axe 4.3 / 4.19 :1) */
/* ------------------------------------------------------------------ */
.wpbr-featurefacts > div > span { color: var(--wpbr-mist); }
.wpbr-featurecard .wpbr-actionlink { color: var(--wpbr-blue-type); }

/* The WordPress.org directory edition, a secondary route on /download/. */
.wpbr-dl-alt { margin: var(--wpbr-space-3) 0 0; font-size: var(--wpbr-text-sm); line-height: 1.5; }
.wpbr-dl-alt .wpbr-actionlink { color: var(--wpbr-blue-type); }