/* Declared on :root, not on .bmp-pricing. The standalone shortcodes
   ([branch_pricing_sentence], [branch_pricing_pills], [branch_pricing_stat])
   render markup that does NOT carry the .bmp-pricing class, so scoping the
   variables there left var(--bmp-pink) undefined on those elements — the
   declaration became invalid and the colour silently fell back to inherit.
   A theme can still override any of these by redeclaring them on :root or on
   a wrapping element. */
:root{
  --bmp-purple:#602276; --bmp-pink:#b5407f; --bmp-cell:#f7ecf3;
  --bmp-line:#d9bed0; --bmp-ink:#4a4453; --bmp-soft:#6b4a7d;
}
.bmp-pricing{
  background:#fff;border:1px solid var(--bmp-line);border-radius:12px;padding:20px 24px;margin:0 0 24px
}
.bmp-pricing__heading{margin:0 0 14px;font-size:20px;color:var(--bmp-purple)}
.bmp-pricing__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0}
.bmp-pricing__cell{background:var(--bmp-cell);border-radius:8px;padding:16px}
.bmp-pricing__label{display:block;font-size:13px;color:var(--bmp-soft);margin-bottom:4px;font-weight:400;line-height:1.3}
/* Figure carries the colour and the weight; "from" and the unit are set small,
   light and muted so they read as qualifiers rather than competing with it.
   nowrap keeps "per week" on the same line as the figure, not orphaned. */
.bmp-pricing__value{display:block;margin:0;font-size:27px;font-weight:700;color:var(--bmp-pink);line-height:1.15;white-space:nowrap}
.bmp-pricing__from{font-size:.44em;font-weight:400;color:var(--bmp-soft);margin-right:.12em;letter-spacing:.01em}
.bmp-pricing__unit{font-size:.44em;font-weight:400;color:var(--bmp-soft);margin-left:.18em}
.bmp-pricing__effective{margin:12px 0 0;font-size:13px;color:var(--bmp-soft)}
.bmp-pricing .bmp-pricing__note{margin:16px 0 0;font-size:13px;line-height:1.6;color:var(--bmp-ink);border-left:2px solid var(--bmp-pink);padding-left:12px}
.bmp-pricing__star{color:var(--bmp-pink);font-weight:700}
/* On the palettes meant for a coloured hero, the star must follow the text
   colour of the pill it sits in. The global rule above paints it --bmp-pink, which lands at
   1.15:1 on a brand pink hero and 2.01:1 on purple — present in the DOM and
   invisible on screen. currentColor keeps it tied to whatever the chip uses. */
.bmp-pricing__chips--glass .bmp-pricing__star,
.bmp-pricing__chips--smoke .bmp-pricing__star,
.bmp-pricing__chips--purple .bmp-pricing__star,
.bmp-pricing__chips--pink .bmp-pricing__star,
.bmp-pricing__chips--plum .bmp-pricing__star{color:currentColor}
.bmp-pricing-stat__label{display:block;font-size:.8em;opacity:.8}
.bmp-pricing-stat__value{display:block;line-height:1.1}

/* banded — cells and footnote joined into one object */
.bmp-pricing--banded{padding:0;border-radius:12px;overflow:hidden;background:none}
.bmp-pricing--banded .bmp-pricing__heading{padding:16px 20px 0}
.bmp-pricing--banded .bmp-pricing__grid{gap:1px;background:var(--bmp-line)}
.bmp-pricing--banded .bmp-pricing__cell{border-radius:0;padding:20px 16px;text-align:center}
.bmp-pricing--banded .bmp-pricing__value{font-size:30px}
.bmp-pricing--banded .bmp-pricing__band{background:var(--bmp-purple);color:#f2c8e0;padding:16px 22px;display:flex;gap:14px;align-items:center}
.bmp-pricing--banded .bmp-pricing__band svg{flex-shrink:0}
.bmp-pricing--banded .bmp-pricing__band p{margin:0;font-size:13px;line-height:1.6;color:#f4e7f0}

.bmp-pricing--bare{background:none;border:0;border-radius:0;padding:0;margin:0}

/* sentence — prices written as an answer, chips as a scannable summary */
.bmp-pricing--sentence{background:none;border:0;border-radius:0;padding:0}
/* 400 rather than 300. Lato Light at 19px over three lines reads thin against
   the 700 figures inside it, and the jump from 300 to 700 is wide enough that
   the sentence recedes and only the numbers register. */
.bmp-pricing--sentence .bmp-pricing__lede{margin:0 0 16px;font-size:19px;line-height:1.55;font-weight:400;color:var(--bmp-purple);max-width:64ch}
.bmp-pricing--sentence .bmp-pricing__lede b{font-weight:700;color:var(--bmp-pink);white-space:nowrap}
.bmp-pricing--sentence .bmp-pricing__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0;list-style:none}
.bmp-pricing--sentence .bmp-pricing__chip{background:var(--bmp-cell);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--bmp-purple)}
.bmp-pricing--sentence .bmp-pricing__chip b{color:var(--bmp-pink);font-weight:700;white-space:nowrap}
.bmp-pricing--sentence .bmp-pricing__note{margin:0;border:0;padding:0;font-size:12.5px;line-height:1.6;color:var(--bmp-soft);max-width:70ch}

/* plain — every plugin colour and size handed back to the surrounding block */
.bmp-pricing--plain .bmp-pricing__heading{color:inherit;font-size:inherit;margin:0 0 .5em}
.bmp-pricing--plain .bmp-pricing__cell{background:none;padding:0;border-radius:0}
.bmp-pricing--plain .bmp-pricing__label{color:inherit;font-size:inherit}
.bmp-pricing--plain .bmp-pricing__value{color:inherit;font-size:inherit;font-weight:inherit;margin:0}
.bmp-pricing--plain .bmp-pricing__grid{gap:12px;background:none;margin:0}
.bmp-pricing--plain .bmp-pricing__note{color:inherit;border:0;padding:0;font-size:inherit}
.bmp-pricing--plain .bmp-pricing__star{color:inherit}
.bmp-pricing--plain .bmp-pricing__band{background:none;color:inherit;padding:0}
.bmp-pricing--plain .bmp-pricing__band p{color:inherit;font-size:inherit}

/* solo variants — same treatment, no wrapping block */
.bmp-pricing__lede--solo{margin:0 0 12px;font-size:19px;line-height:1.55;font-weight:400;color:var(--bmp-purple);max-width:64ch}
.bmp-pricing__lede--solo b{font-weight:700;color:var(--bmp-pink);white-space:nowrap}
.bmp-pricing__chips--solo{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.bmp-pricing__chips--solo .bmp-pricing__chip{background:var(--bmp-cell);border-radius:999px;padding:7px 15px;font-size:14px;color:var(--bmp-purple)}
.bmp-pricing__chips--solo .bmp-pricing__chip b{color:var(--bmp-pink);font-weight:700;white-space:nowrap}
/* Linked pills. The anchor fills the pill so the whole shape is the target
   rather than just the text, which matters most on touch. Colour is inherited
   so every palette keeps its own contrast rather than reverting to link blue,
   and the focus ring uses currentColor so it stays visible on dark palettes
   too — the default browser outline is near invisible on purple. */
.bmp-pricing__chip-link{display:block;margin:-7px -15px;padding:7px 15px;border-radius:999px;text-decoration:none}
/* Every state pinned to inherit, at three-class specificity. color:inherit on
   the base rule alone loses to a theme link colour like
   .entry-content a:hover{color:...} — which turned the pill text theme purple
   on a purple pill. Anchors need :link, :visited, :hover, :focus and :active
   stated explicitly; setting only the base leaves the rest to the theme. */
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link,
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link:link,
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link:visited,
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link:hover,
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link:focus,
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link:active{color:inherit;background:none}
.bmp-pricing__chips .bmp-pricing__chip .bmp-pricing__chip-link b{color:inherit}
.bmp-pricing__chips--tint .bmp-pricing__chip .bmp-pricing__chip-link b,
.bmp-pricing__chips--outline .bmp-pricing__chip .bmp-pricing__chip-link b,
.bmp-pricing__chips--grey .bmp-pricing__chip .bmp-pricing__chip-link b{color:var(--bmp-pink)}
.bmp-pricing__chips--grey .bmp-pricing__chip .bmp-pricing__chip-link b{color:#8e2a66}
.bmp-pricing__chip-link:hover,.bmp-pricing__chip-link:focus-visible{text-decoration:underline;text-underline-offset:2px}
.bmp-pricing__chip-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.bmp-pricing__chips--outline .bmp-pricing__chip-link{margin:-5.5px -13.5px;padding:5.5px 13.5px}
.bmp-pricing__chips--glass .bmp-pricing__chip-link{margin:-5.5px -13.5px;padding:5.5px 13.5px}
.bmp-pricing__chips--smoke .bmp-pricing__chip-link{margin:-6px -14px;padding:6px 14px}
.bmp-pricing__chips--linked .bmp-pricing__chip{transition:filter .12s ease}
.bmp-pricing__chips--linked .bmp-pricing__chip:hover{filter:brightness(.95)}
.bmp-pricing__chips--center{justify-content:center}
.bmp-pricing__chips--right{justify-content:flex-end}

/* Pill palettes. Every pairing below is checked against WCAG AA at 14px, so the
   label and the figure both clear 4.5:1 on their own background.
   outline and grey assume a light page behind them. */
.bmp-pricing__chips--purple .bmp-pricing__chip{background:var(--bmp-purple);color:#fff}
.bmp-pricing__chips--purple .bmp-pricing__chip b{color:#f2c8e0}
.bmp-pricing__chips--pink .bmp-pricing__chip{background:var(--bmp-pink);color:#fff}
.bmp-pricing__chips--pink .bmp-pricing__chip b{color:#fff}
.bmp-pricing__chips--plum .bmp-pricing__chip{background:#4a1a5c;color:#fff}
.bmp-pricing__chips--plum .bmp-pricing__chip b{color:#f2c8e0}
.bmp-pricing__chips--outline .bmp-pricing__chip{background:transparent;border:1.5px solid var(--bmp-line);color:var(--bmp-purple);padding:5.5px 13.5px}
.bmp-pricing__chips--outline .bmp-pricing__chip b{color:var(--bmp-pink)}
.bmp-pricing__chips--grey .bmp-pricing__chip{background:#f4f2f6;color:var(--bmp-ink)}
.bmp-pricing__chips--grey .bmp-pricing__chip b{color:#8e2a66}

/* For pills sitting ON a coloured hero. Both use bold white text.

   glass — the light, translucent look, achieved WITHOUT a white fill. A white
   veil lightens the pill, and white text on brand pink #bf4a92 is already only
   4.56:1 before any veil at all, so even 1% of white pushes it under AA. The
   pill shape comes from a light white border instead, and backdrop-filter adds
   blur plus a slight darkening, which improves contrast rather than harming it.
   Browsers without backdrop-filter simply get the transparent version, which
   still passes.

   smoke — a black veil, for a more solid pill. White text clears AA on every
   brand colour. The border is decorative here, not load-bearing: the pill
   boundary is not needed to understand the content, so 1.4.11 does not apply
   to it, but it is set as light as it can be while still reading as an edge. */
.bmp-pricing__chips--glass .bmp-pricing__chip{background:transparent;border:1.5px solid rgba(255,255,255,.55);color:#fff;font-weight:700;padding:5.5px 13.5px;-webkit-backdrop-filter:blur(4px) brightness(.88);backdrop-filter:blur(4px) brightness(.88)}
.bmp-pricing__chips--glass .bmp-pricing__chip b{color:#fff;font-weight:700}
.bmp-pricing__chips--smoke .bmp-pricing__chip{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.6);color:#fff;font-weight:700;padding:6px 14px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bmp-pricing__chips--smoke .bmp-pricing__chip b{color:#fff;font-weight:700}
/* flat — for a hero that already has outlined buttons in it. glass and smoke
   both draw a pill border, which gives the price chips the same shape language
   as the CTAs, so the chips read as tappable and the buttons read as labels.
   flat drops the border entirely: the chip becomes a tag, and the outlined-pill
   shape stays reserved for things you can actually click. The black veil is set
   at .28 because that puts white text at 7.5:1 over brand pink #bf4a92, well
   clear of AA, while still reading as a tint rather than a black box. */
.bmp-pricing__chips--flat .bmp-pricing__chip{background:rgba(0,0,0,.28);border:0;color:#fff;font-weight:600;padding:7px 15px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bmp-pricing__chips--flat .bmp-pricing__chip b{color:#fff;font-weight:700}

.bmp-pricing__note--solo{margin:0;border:0;padding:0;font-size:12.5px;line-height:1.6;color:var(--bmp-soft);max-width:70ch}

/* on-dark — the footnote and its star sitting on a coloured hero rather than a
   white page. Pure #fff, not a translucent white: white on brand pink is 4.56:1,
   which clears AA at this size with almost nothing to spare, and dropping even
   to 88% opacity takes it to 3.9:1 and under. The star inherits rather than
   keeping var(--bmp-pink), which on a pink ground is invisible. */
.bmp-pricing__note--on-dark{color:#fff}
.bmp-pricing__note--on-dark .bmp-pricing__star{color:inherit}
span.bmp-pricing__lede--solo{display:inline;font-size:inherit;color:inherit;font-weight:inherit;max-width:none}
.bmp-pricing--inline .bmp-pricing__grid{display:flex;flex-wrap:wrap;gap:20px}
.bmp-pricing--inline .bmp-pricing__cell{background:none;padding:0}

/* Two across rather than one stack. An odd final cell spans the full width so
   the grid never leaves a hole, and the figure steps down at 360px where
   "from £1,150 per week" would otherwise overflow a 144px column. */
@media(max-width:600px){
  .bmp-pricing{padding:16px}
  .bmp-pricing--banded,.bmp-pricing--bare,.bmp-pricing--plain,.bmp-pricing--sentence{padding:0}
  .bmp-pricing--sentence .bmp-pricing__lede,p.bmp-pricing__lede--solo,div.bmp-pricing__lede--solo{font-size:17px}
  .bmp-pricing__grid{grid-template-columns:1fr 1fr}
  .bmp-pricing__cell:last-child:nth-child(odd){grid-column:1 / -1}
  .bmp-pricing__value{font-size:23px}
  .bmp-pricing--banded .bmp-pricing__value{font-size:23px}
  .bmp-pricing--banded .bmp-pricing__cell{padding:16px 10px}
  .bmp-pricing__label{font-size:12px}
  .bmp-pricing--banded .bmp-pricing__band{align-items:flex-start;padding:14px 16px}
  .bmp-pricing--banded .bmp-pricing__band p{font-size:12.5px}
}
@media(max-width:360px){
  .bmp-pricing__value,.bmp-pricing--banded .bmp-pricing__value{font-size:20px}
}