/*
 * WP Bulk Replace — the shared component layer for the Help Centre and the
 * account portal.
 *
 * ONE STYLESHEET FOR BOTH HOSTS, which is the whole point of it. Before this
 * file, every rule either lived in a `<style>` block inside `help/_shell.html` or
 * in a second `<style>` block inside `account/_shell.html`, and the two had
 * already begun to disagree — the same nav was 14px on one host and 15px on the
 * other. A customer moving from the marketing site to Help to their account
 * should never change visual language, only context, and that is a fact about a
 * stylesheet or it is not a fact at all.
 *
 * THE VISUAL LANGUAGE IS THE MARKETING THEME'S (`bsmaha/wpbulkreplace-site`,
 * `theme/wpbulkreplace/style.css`). THE STRUCTURE IS DATA DRIVEN MAPS'. That
 * division, and every place one of them had nothing to say, is written up in
 * `docs/WPBR-UI-REUSE-AUDIT.md`.
 *
 * NO LITERAL VALUES. Every colour, size, weight, radius, shadow and duration is a
 * token from `wpbr-tokens.css`. `core/tests/test_design_system.py` fails on a hex
 * or an `rgb(`/`hsl(` in this file.
 */

/* ===================================================================
   BASE
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  /* The theme's three-layer ground, tokenised. Content sits on white surfaces
   * above it, the way `.launch-status` does, which is also what keeps body text
   * off the gradient's darkest stop — #006DF5 on #EDF6FF is 4.27:1, and on
   * white it is 4.66:1. */
  background: var(--wpbr-ground);
  /* NOT `background-attachment: fixed`, which was here and was wrong. The theme
   * is one viewport tall so it never had to decide; a Help article is not, and a
   * fixed ground repaints on every scroll frame on a phone and pins the 145deg
   * ramp to the window instead of to the document - so a long page ran out of
   * gradient partway down and finished on flat white. */
  color: var(--wpbr-text);
  font-family: var(--wpbr-font);
  font-size: var(--wpbr-text-base);
  line-height: var(--wpbr-leading-body);
  -webkit-font-smoothing: antialiased;
  /* A SHORT PAGE STILL FILLS THE WINDOW. The body is a column at least as tall
   * as the viewport and `.wpbr-main` takes whatever the masthead and footer
   * leave (below), so the footer sits on the bottom edge. Without this the
   * footer followed the content wherever it ended, and on a page of one panel
   * that was mid-screen with a bare strip of gradient underneath it - the shape
   * of a page that stopped rather than finished. `100vh` first for a browser that
   * does not know `dvh`; `dvh` second so a phone's collapsing address bar does
   * not leave the footer a few pixels short of the edge. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

a { color: var(--wpbr-link); }
a:hover { color: var(--wpbr-link-hover); }

/* ONE FOCUS RING, ON EVERYTHING, and it is `:focus-visible` so a mouse click does
 * not draw it. The shape is the theme's; the colour is opaque because the
 * theme's alpha is 1.36:1 (see the token file). */
:focus-visible {
  outline: var(--wpbr-focus-width) solid var(--wpbr-focus-color);
  outline-offset: var(--wpbr-focus-offset);
  border-radius: var(--wpbr-radius-xs);
}

img, svg { max-width: 100%; }

code, kbd, samp, pre { font-family: var(--wpbr-font-mono); }

/* Not a label treatment — only genuine machine strings: a support reference, a
 * `WPBR-D-` diagnostics code, a path. */
code {
  font-size: .92em;
  background: var(--wpbr-surface-tint);
  padding: .1em .35em;
  border-radius: var(--wpbr-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}

/* ===================================================================
   ACCESSIBILITY PRIMITIVES  (DDM `.ddm-skip`, `.ddm-sr`)
   =================================================================== */

.wpbr-skip {
  position: absolute;
  left: 0;
  top: -100%;
  z-index: 30;
  padding: var(--wpbr-space-2) var(--wpbr-space-3);
  background: var(--wpbr-navy);
  color: var(--wpbr-white);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
}
.wpbr-skip:focus { top: 0; color: var(--wpbr-white); }

.wpbr-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   THE SHELL
   =================================================================== */

.wpbr-shell {
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
}

/* `flex: 1 0 auto` IS THE OTHER HALF OF THE FOOTER FIX. It grows to fill a short
 * page and never shrinks below its content, so a long page behaves exactly as it
 * did. The bottom padding is the least breathing room between content and
 * footer, and it is the same step the narrow tier already used. */
.wpbr-main { flex: 1 0 auto; padding: var(--wpbr-space-7) 0 var(--wpbr-space-8); }

/* ===================================================================
   THE MASTHEAD

   DDM's `.ddm-header--app` arrangement: wordmark, a qualifier naming which
   application you are in, a spacer, then that surface's own actions, with the
   application's destinations on a second row. Both of DDM's app chromes take the
   marketing header's classes unchanged, and that is what makes "never changes
   visual language" true of the stylesheet rather than of two designs that happen
   to agree this week.

   MINUS THE SELL. No utility bar and no call to action: somebody reading a Help
   article with a broken batch is not in the market, and somebody in their account
   has already bought.
   =================================================================== */

.wpbr-masthead {
  position: relative;
  z-index: 20;
  background: var(--wpbr-surface-raised);
  border-bottom: 1px solid var(--wpbr-rule);
  backdrop-filter: blur(6px);
}

.wpbr-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wpbr-space-4);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: var(--wpbr-space-3) var(--wpbr-gutter);
}

.wpbr-bar__spacer { flex: 1 1 auto; }

/* THE LOCKUP IS THE THEME'S, TURNED ON ITS SIDE. The launch page stacks the mark
 * over the wordmark and centres them because it is a hero; a masthead sets them
 * horizontally. Same parts, same values, different axis. */
.wpbr-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  flex: none;
  text-decoration: none;
  color: var(--wpbr-text);
}
.wpbr-lockup__mark {
  display: block;
  width: 30px;
  height: auto;
  filter: drop-shadow(var(--wpbr-shadow-mark));
}
.wpbr-wordmark {
  display: flex;
  align-items: baseline;
  gap: .28em;
  font-size: var(--wpbr-text-wordmark);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
/* `WP` IS THE RECESSIVE HALF OF THE NAME. It is the smaller half and must not
 * visually dominate the product it qualifies — the rule both the theme and the
 * listing banner obey, at the value the theme uses on a light ground. */
.wpbr-wordmark__wp {
  color: var(--wpbr-wordmark-wp);
  font-weight: var(--wpbr-weight-light);
}

/* THE QUALIFIER NAMES THE APPLICATION AND IS NOT A LINK. An anchor on it would be
 * a second route to the page you are already on. */
.wpbr-qualifier {
  flex: none;
  padding-inline-start: var(--wpbr-space-4);
  border-inline-start: 1px solid var(--wpbr-rule);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}

.wpbr-bar__who {
  flex: none;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

/* ===================================================================
   THE SECOND ROW

   `aria-current` IS THE SELECTOR, so the mark cannot exist without the
   announcement. A `.is-current` class lets the two drift apart, and the one that
   goes missing is always the one a screen reader needed. Taken from DDM verbatim.
   =================================================================== */

.wpbr-appnav { border-bottom: 1px solid var(--wpbr-rule); }

.wpbr-appnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--wpbr-space-6);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
  list-style: none;
}

.wpbr-appnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wpbr-target);
  border-bottom: 2px solid transparent;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  transition: color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-appnav a:hover { color: var(--wpbr-link-hover); }
.wpbr-appnav a[aria-current="page"] {
  color: var(--wpbr-text);
  border-bottom-color: var(--wpbr-blue);
}

/* IT WORKS WITH NO JAVASCRIPT. The nav is only hidden behind the button under
 * `.wpbr-js`, which the script sets on itself — so a reader with no script gets
 * the nav and the button is the one thing that does nothing. A disclosure rather
 * than a focus-trapped sheet, because it covers nothing. */
.wpbr-menu-toggle { display: none; }

/* ===================================================================
   PROSE
   =================================================================== */

.wpbr-prose { max-width: var(--wpbr-measure); }

.wpbr-prose > :first-child { margin-top: 0; }
.wpbr-prose > :last-child { margin-bottom: 0; }

.wpbr-prose p,
.wpbr-prose li {
  font-size: var(--wpbr-text-md);
  line-height: var(--wpbr-leading-body);
}
.wpbr-prose p { margin: 0 0 var(--wpbr-space-4); }

.wpbr-prose ul, .wpbr-prose ol { margin: 0 0 var(--wpbr-space-4); padding-inline-start: 1.3em; }
.wpbr-prose li { margin-block-end: var(--wpbr-space-1); }

.wpbr-prose strong { font-weight: var(--wpbr-weight-semi); }

.wpbr-prose pre {
  overflow-x: auto;
  padding: var(--wpbr-space-3);
  background: var(--wpbr-surface-tint);
  border-radius: var(--wpbr-radius-md);
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
}
.wpbr-prose pre code { background: none; padding: 0; }

.wpbr-prose blockquote {
  margin: 0 0 var(--wpbr-space-4);
  padding-inline-start: var(--wpbr-space-4);
  border-inline-start: 3px solid var(--wpbr-ice);
  color: var(--wpbr-text-soft);
}

.wpbr-prose img { height: auto; border-radius: var(--wpbr-radius-md); }

/* Headings keep the theme's tracking and `text-wrap: balance`, stepped down from
 * the hero: 72px above a paragraph of troubleshooting is not the same design used
 * consistently. */
.wpbr-h1, .wpbr-prose h1 {
  margin: 0 0 var(--wpbr-space-4);
  font-size: var(--wpbr-text-h1);
  font-weight: var(--wpbr-weight-display);
  line-height: 1.1;
  letter-spacing: var(--wpbr-tracking-hero);
  text-wrap: balance;
}
.wpbr-prose h2 {
  margin: var(--wpbr-space-7) 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
  text-wrap: balance;
}
.wpbr-prose h3 {
  margin: var(--wpbr-space-6) 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
}

/* The theme's `.launch-copy`: the sentence under a title. */
.wpbr-lede {
  max-width: var(--wpbr-measure);
  margin: 0 0 var(--wpbr-space-6);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-lede);
  line-height: var(--wpbr-leading-body);
  text-wrap: balance;
}

.wpbr-eyebrow {
  display: block;
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}

.wpbr-muted { color: var(--wpbr-text-soft); }
.wpbr-fine { font-size: var(--wpbr-text-xs); letter-spacing: var(--wpbr-tracking-fine); }

/* ===================================================================
   ACTIONS

   THE THEME HAS NO BUTTON — a launch page has one link — so the fill is derived
   from `.contact-link`: its 15px, its 650, its `.16s ease`, and the brand blue
   with `--wpbr-blue-dark` on hover, which is the theme's own link/hover pair.
   =================================================================== */

.wpbr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-3);
  margin: var(--wpbr-space-6) 0 0;
}

.wpbr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  padding: 0 var(--wpbr-space-5);
  border: 1px solid transparent;
  border-radius: var(--wpbr-radius-pill);
  font: inherit;
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease),
              border-color var(--wpbr-dur) var(--wpbr-ease),
              color var(--wpbr-dur) var(--wpbr-ease);
}

.wpbr-btn--primary {
  background: var(--wpbr-blue);
  border-color: var(--wpbr-blue);
  color: var(--wpbr-white);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-btn--primary:hover {
  background: var(--wpbr-blue-dark);
  border-color: var(--wpbr-blue-dark);
  color: var(--wpbr-white);
}

.wpbr-btn--secondary {
  background: var(--wpbr-surface);
  border-color: var(--wpbr-rule);
  color: var(--wpbr-text);
}
.wpbr-btn--secondary:hover { border-color: var(--wpbr-blue); color: var(--wpbr-link-hover); }

/* A button that ends a session or cancels a form is not a second primary action. */
.wpbr-btn--quiet {
  padding: 0;
  min-height: var(--wpbr-target);
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--wpbr-link);
  text-decoration: underline;
}
.wpbr-btn--quiet:hover { color: var(--wpbr-link-hover); }

/* THE THEME'S `.contact-link`, promoted to a component: the arrow slides out on
 * hover because the gap grows. This is WPBR's secondary action, and it is why
 * there is no outlined button beside every primary one. */
.wpbr-actionlink {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  min-height: var(--wpbr-target);
  color: var(--wpbr-link);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
  transition: gap var(--wpbr-dur) var(--wpbr-ease), color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-actionlink:hover,
.wpbr-actionlink:focus-visible {
  gap: var(--wpbr-space-3);
  color: var(--wpbr-link-hover);
}

/* ===================================================================
   THE CHIP

   `.launch-status` is the theme's own badge, and it is taken whole: pill, hairline
   blue border, translucent white, the raised shadow, 13px / 650 / .02em. DDM
   contributes only the idea of a status taxonomy.
   =================================================================== */

.wpbr-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wpbr-space-2);
  padding: 7px var(--wpbr-space-3);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-pill);
  background: var(--wpbr-surface-raised);
  box-shadow: var(--wpbr-shadow-raised);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  white-space: nowrap;
}

/* The dot and its halo, from `.status-dot`. NEVER THE ONLY CARRIER OF THE STATE —
 * the chip always contains the word as well, so a reader who does not see colour
 * loses nothing. */
.wpbr-chip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wpbr-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-blue) 9%, transparent);
  flex: none;
}
.wpbr-chip--ok    { color: var(--wpbr-ok); }
.wpbr-chip--ok    .wpbr-chip__dot { background: var(--wpbr-ok);    box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-ok) 12%, transparent); }
.wpbr-chip--warn  { color: var(--wpbr-warn); }
.wpbr-chip--warn  .wpbr-chip__dot { background: var(--wpbr-warn);  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-warn) 12%, transparent); }
.wpbr-chip--error { color: var(--wpbr-error); }
.wpbr-chip--error .wpbr-chip__dot { background: var(--wpbr-error); box-shadow: 0 0 0 4px color-mix(in srgb, var(--wpbr-error) 12%, transparent); }
.wpbr-chip--muted { color: var(--wpbr-text-soft); }
.wpbr-chip--muted .wpbr-chip__dot { background: var(--wpbr-text-faint); box-shadow: none; }

/* ===================================================================
   PANELS

   DDM's panels are ruled cells with no radius. WPBR's are cards, because
   `.launch-status` is a card and the brand has no square corner — the same
   recipe at a larger scale. They also give Help and Account a white reading
   surface above the page gradient.
   =================================================================== */

.wpbr-panel {
  padding: var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-5);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-panel > :first-child { margin-top: 0; }
.wpbr-panel > :last-child { margin-bottom: 0; }

.wpbr-panel__head {
  margin: 0 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}

/* A SECTION HEADING IS NOT A PANEL HEADING. The Help index reused `__head` for
 * the heading above each area's list, which gave it a panel's zero top margin
 * and sat it directly on the sentence above. Same type, its own spacing. */
.wpbr-section { margin: 0 0 var(--wpbr-space-7); }
.wpbr-section__head {
  margin: var(--wpbr-space-7) 0 var(--wpbr-space-3);
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
.wpbr-section__head a { text-decoration: none; color: var(--wpbr-text); }
.wpbr-section__head a:hover { color: var(--wpbr-link-hover); }

/* A panel describing something nobody can act on yet. Not a disabled control:
 * there is nothing to disable, and a greyed button implies a thing that exists. */
.wpbr-panel--pending { background: var(--wpbr-surface-raised); }
.wpbr-panel--selected { border-color: var(--wpbr-accent, currentColor); box-shadow: 0 0 0 2px var(--wpbr-accent, currentColor); }

.wpbr-panels {
  display: grid;
  gap: var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-5);
}
.wpbr-panels > .wpbr-panel { margin: 0; }
@media (min-width: 601px) { .wpbr-panels--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* THE PRICE LADDER, AND IT GOES TO ONE COLUMN BEFORE IT HAS TO. Three panels
 * across a tablet leaves each one narrower than the sentence inside it, so the
 * three-up only starts where three genuinely fit. `minmax(0, 1fr)` rather than
 * `1fr` because a grid track's default minimum is its content, which is what
 * lets one long word push a whole row wider than the page. */
@media (min-width: 601px)  { .wpbr-panels--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px)  { .wpbr-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The number on a plan panel. Bigger than the body, not a heading: it is the
 * fact somebody is scanning for, and marking it up as an h-anything would put
 * a price in the document outline. */
.wpbr-price {
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-bold);
}

/* A PLAN PANEL, WITH ITS BUTTON AT THE BOTTOM. The tiers do not carry the same
 * amount of text - Agency has a quantity field and a sentence explaining it -
 * so left alone the three Buy buttons sit at three different heights and the
 * row reads as broken rather than as three offers. Pushing the form down makes
 * the buttons line up without anybody hand-tuning a height that the next
 * sentence would undo. */
.wpbr-panel--offer { display: flex; flex-direction: column; }
.wpbr-panel--offer > form,
.wpbr-panel--offer > .wpbr-panel__action { margin-top: auto; }

/* A field whose content is two digits. Full width here would read as an
 * invitation to type a sentence into it. */
.wpbr-input--narrow { width: auto; min-width: 6rem; max-width: 10rem; }

/* The licence key is read and compared by eye, then pasted, so it is never
   allowed to run past the edge of its box. It is a readonly textarea because an
   input cannot wrap: on a phone it breaks across two lines instead of hiding its
   last characters, and from 601px, where the whole key fits, it is one line the
   height of any other field. Monospace because it is literally a machine string
   (the token's own rule), which also keeps `l`, `I`, `1`, `0` and `O` apart. */
.wpbr-input.wpbr-input--key {
  font-family: var(--wpbr-font-mono);
  line-height: var(--wpbr-leading-tight);
  overflow: auto;
  /* `break-all`, not `overflow-wrap`: the key's hyphens are break opportunities
     that would leave short lines and push it to a third one. */
  word-break: break-all;
  resize: none;
}
@media (min-width: 601px) {
  .wpbr-input.wpbr-input--key {
    height: var(--wpbr-target);
    line-height: calc(var(--wpbr-target) - 2px - 2 * var(--wpbr-space-2));
  }
}

/* ===================================================================
   NOTES

   DDM's reasoning, taken as stated: a no-result is an answer, not an error panel,
   so these are prose blocks inside the reading column rather than panels
   competing with the content. The left rule carries the kind, and never alone —
   each one's words say what it is.
   =================================================================== */

.wpbr-note {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-3) var(--wpbr-space-5);
  /* A TOP MARGIN, BECAUSE A NOTE IS SOMETIMES THE FIRST THING AFTER A HEADING.
   * With none, the account screens' "a payment did not go through" banner sat
   * flush against the h1 above it - the heading block has no bottom margin of
   * its own, so nothing separated them. Adjacent vertical margins collapse, so
   * this changes nothing where a note follows a paragraph that already had
   * one. */
  margin: var(--wpbr-space-5) 0;
  border-inline-start: 3px solid var(--wpbr-ice);
  border-radius: 0 var(--wpbr-radius-md) var(--wpbr-radius-md) 0;
  background: var(--wpbr-surface-tint);
  font-size: var(--wpbr-text-base);
}
.wpbr-note > :first-child { margin-top: 0; }
.wpbr-note > :last-child { margin-bottom: 0; }
.wpbr-note p { font-size: var(--wpbr-text-base); margin: 0 0 var(--wpbr-space-2); }

.wpbr-note--info    { border-inline-start-color: var(--wpbr-blue); }
.wpbr-note--warn    { border-inline-start-color: var(--wpbr-warn); }
.wpbr-note--error   { border-inline-start-color: var(--wpbr-error); }
.wpbr-note--error   .wpbr-note__head { color: var(--wpbr-error); }
/* Violet is an accent and never a primary action, which makes "this article
 * describes a superseded version" exactly what it is for. */
.wpbr-note--retired { border-inline-start-color: var(--wpbr-violet); }

.wpbr-note__head {
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}

/* ===================================================================
   RULED LISTS  (DDM `.ddm-hub__row` / `.ddm-rows`)

   The Help index, an area's articles and the search results are all the same
   object: a title, a sentence, a whole-row hover.
   =================================================================== */

.wpbr-list { margin: 0; padding: 0; list-style: none; }

.wpbr-list__item { border-top: 1px solid var(--wpbr-rule-soft); }
.wpbr-list__item:last-child { border-bottom: 1px solid var(--wpbr-rule-soft); }

.wpbr-list__row {
  display: block;
  padding: var(--wpbr-space-4) var(--wpbr-space-3);
  border-radius: var(--wpbr-radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-list__row:hover { background: color-mix(in srgb, var(--wpbr-blue) 4%, transparent); }

.wpbr-list__name {
  display: block;
  color: var(--wpbr-text);
  font-size: var(--wpbr-text-md);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-wordmark);
}
.wpbr-list__row:hover .wpbr-list__name { color: var(--wpbr-link-hover); }

.wpbr-list__line {
  display: block;
  margin-top: var(--wpbr-space-1);
  max-width: var(--wpbr-measure);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-base);
}

.wpbr-list__tags { display: flex; flex-wrap: wrap; gap: var(--wpbr-space-2); margin-top: var(--wpbr-space-2); }

/* ===================================================================
   TABLES  (DDM `.ddm-table`)
   =================================================================== */

/* A TABLE TOO WIDE FOR THE SCREEN SCROLLS INSIDE THIS, AND THE PAGE DOES NOT.
 * `overflow-x: auto` alone is not enough: a `<table>` in a scroll container
 * still reports its width to the root's scrollable area in Chromium, so the
 * Sites screen at 375px scrolled the whole page - masthead, nav and all -
 * 150px sideways while the wrapper itself was correctly clipping at 327px.
 * `contain: paint` is what makes the clip authoritative. Measured, not
 * reasoned about: `document.documentElement.scrollWidth` says 525 without it
 * and 375 with it. */
.wpbr-scroll { max-width: 100%; overflow-x: auto; contain: paint; }

.wpbr-table { width: 100%; border-collapse: collapse; font-size: var(--wpbr-text-base); }
.wpbr-table caption { text-align: left; }
.wpbr-table th, .wpbr-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--wpbr-space-3);
  border-bottom: 1px solid var(--wpbr-rule-soft);
}
.wpbr-table thead th {
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  white-space: nowrap;
}
.wpbr-table tbody a { font-weight: var(--wpbr-weight-semi); text-decoration: none; }
.wpbr-table tbody a:hover { text-decoration: underline; }

/* A TABLE WHOSE LAST COLUMN IS A BUTTON CANNOT JUST SCROLL AWAY ON A PHONE.
 * Sideways scrolling inside `.wpbr-scroll` keeps the page still, but it also
 * puts the one action the screen exists for off the right-hand edge, behind a
 * swipe nobody is told about. Below the theme's 600px breakpoint each row
 * becomes a block and every cell carries its own label, so the action sits
 * under the site it belongs to.
 *
 * THE LABELS COME FROM `data-label` RATHER THAN FROM A SECOND COPY OF THE
 * HEADINGS in the markup. Two copies would be two things to translate and one
 * of them would eventually say something else. */
@media (max-width: 600px) {
  .wpbr-table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .wpbr-table--stack tr {
    display: block;
    padding: var(--wpbr-space-3) 0;
    border-bottom: 1px solid var(--wpbr-rule-soft);
  }
  .wpbr-table--stack tr:last-child { border-bottom: 0; }
  .wpbr-table--stack td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--wpbr-space-3);
    padding: var(--wpbr-space-1) 0;
    border: 0;
  }
  .wpbr-table--stack td::before {
    content: attr(data-label);
    color: var(--wpbr-text-soft);
    font-size: var(--wpbr-text-xs);
    letter-spacing: var(--wpbr-tracking-chip);
    flex: none;
  }
  /* The site's own name is the row's heading, not a labelled field. */
  .wpbr-table--stack td[data-label=""]::before { content: none; }
  .wpbr-table--stack td[data-label=""] { display: block; }
}

/* ===================================================================
   FORMS

   The theme has no control. The field takes `.launch-status`'s geometry — pill
   border weight, white surface, the raised shadow — at the 44px touch floor.
   =================================================================== */

.wpbr-field { margin: 0 0 var(--wpbr-space-5); max-width: var(--wpbr-measure); }

.wpbr-field__label {
  display: block;
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}
.wpbr-field__optional { color: var(--wpbr-text-soft); font-weight: var(--wpbr-weight-light); }

.wpbr-input, .wpbr-textarea, .wpbr-select {
  display: block;
  width: 100%;
  min-height: var(--wpbr-target);
  padding: var(--wpbr-space-2) var(--wpbr-space-3);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
  color: var(--wpbr-text);
  font: inherit;
  font-size: var(--wpbr-text-base);
}
.wpbr-textarea { line-height: var(--wpbr-leading-body); resize: vertical; }
.wpbr-input[type="file"] { box-shadow: none; padding: var(--wpbr-space-2); }

.wpbr-field__hint {
  display: block;
  margin: var(--wpbr-space-2) 0 0;
  max-width: var(--wpbr-measure);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

.wpbr-inline-form { display: flex; flex-wrap: wrap; gap: var(--wpbr-space-3); align-items: flex-end; }
.wpbr-inline-form .wpbr-field { margin: 0; flex: 1 1 15rem; }

.wpbr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-3);
  margin: var(--wpbr-space-4) 0 var(--wpbr-space-6);
}
.wpbr-filters .wpbr-field { margin: 0; flex: 1 1 11rem; max-width: 18rem; }
.wpbr-filters .wpbr-field__label { font-size: var(--wpbr-text-sm); }

/* ===================================================================
   THE PURCHASE COMPONENT  (D102)

   ONE CHECKOUT, SHOWN THREE WAYS: framed in the modal the marketing site and
   `/products/` open, and as the `/start/` page. Everything below styles the
   component itself; the modal's own box is drawn by `wpbr-purchase.js`, which
   carries its styles with it so the marketing site needs no stylesheet change.

   COMPACT BY DESIGN. The decision is four things in order — how many sites,
   which country is billed, what it costs, where the licence goes — and the
   layout is that order top to bottom with nothing between them: the plan, the
   one price it costs, the country (which can change that price, so it sits
   directly under it), the email, and the button. Supporting sentences are a
   size down and a shade lighter, so they are there when read and invisible
   when not.

   STATE IS `data-market` ON THE FORM. The server renders it for the initial
   country and the component's script updates it; the rules below show the
   notes for that state. No `:has()` is needed, so there is no browser in which
   the wrong note shows first.
   =================================================================== */

.wpbr-buy {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: var(--wpbr-space-6) var(--wpbr-space-6) var(--wpbr-space-5);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: 18px;
  /* LIFTED MORE THAN A PANEL, because on its own page it is the only thing the
   * page is for. The same navy, the same recipe, a longer throw. */
  box-shadow: 0 24px 60px color-mix(in srgb, var(--wpbr-navy) 9%, transparent), 0 2px 6px color-mix(in srgb, var(--wpbr-navy) 4%, transparent);
}

.wpbr-buy__head { margin: 0 0 var(--wpbr-space-4); padding-right: var(--wpbr-space-7); }
.wpbr-buy__eyebrow {
  margin: 0 0 2px;
  color: var(--wpbr-blue);
  font-size: var(--wpbr-text-xs);
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.wpbr-buy__title {
  margin: 0;
  font-size: 23px;
  font-weight: var(--wpbr-weight-display);
  letter-spacing: var(--wpbr-tracking-wordmark);
  line-height: 1.2;
}

.wpbr-buy__error {
  margin: 0 0 var(--wpbr-space-4);
  padding: var(--wpbr-space-2) var(--wpbr-space-3);
  border-left: 3px solid var(--wpbr-error);
  border-radius: var(--wpbr-radius-xs);
  background: color-mix(in srgb, var(--wpbr-error) 7%, var(--wpbr-surface));
  font-size: var(--wpbr-text-sm);
}
.wpbr-buy__error p { margin: 0; }

.wpbr-buy__plans { margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---- a segmented control, for plans ---------------------------------
 * THE RADIO IS THE WHOLE SEGMENT, transparent over it, so the click target is
 * the segment and the control is still a real, focusable, required radio that
 * native validation can point at. Selected carries three signals — a raised
 * white chip, the brand colour and a heavier weight — so no one of them has to
 * be seen for the choice to be. */
.wpbr-seg {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  background: var(--wpbr-surface-tint);
  border: 1px solid var(--wpbr-rule);
  border-radius: 12px;
}
.wpbr-seg__opt { position: relative; display: block; min-width: 0; cursor: pointer; }
.wpbr-seg__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wpbr-seg__body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 var(--wpbr-space-2);
  border-radius: 9px;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  white-space: nowrap;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease),
              color var(--wpbr-dur) var(--wpbr-ease),
              box-shadow var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-seg__opt:hover .wpbr-seg__body { color: var(--wpbr-text); }
.wpbr-seg__input:checked + .wpbr-seg__body {
  background: var(--wpbr-surface);
  color: var(--wpbr-blue);
  font-weight: var(--wpbr-weight-bold);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--wpbr-navy) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--wpbr-blue) 35%, transparent);
}
/* The ring the global rule would draw is on a transparent input; draw it on
 * the segment the input covers instead. */
.wpbr-seg__input:focus-visible + .wpbr-seg__body {
  outline: var(--wpbr-focus-width) solid var(--wpbr-focus-color);
  outline-offset: 2px;
}

/* ---- the price ------------------------------------------------------- */
.wpbr-buy__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: var(--wpbr-space-5) 0 0;
  min-height: 44px;
}
.wpbr-buy__amount {
  font-size: 40px;
  font-weight: var(--wpbr-weight-display);
  letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wpbr-buy__amount--muted {
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: 0;
}
.wpbr-buy__per { color: var(--wpbr-text-soft); font-size: var(--wpbr-text-base); font-weight: var(--wpbr-weight-light); }
.wpbr-buy__desc { margin: 2px 0 0; color: var(--wpbr-text-soft); font-size: var(--wpbr-text-sm); }

/* ---- fields ------------------------------------------------------------ */
.wpbr-buy__field { margin: var(--wpbr-space-5) 0 0; }
.wpbr-buy__label {
  display: block;
  margin: 0 0 6px;
  color: var(--wpbr-text);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
}
.wpbr-buy__control {
  display: block;
  width: 100%;
  min-height: var(--wpbr-target);
  padding: 0 var(--wpbr-space-3);
  background: var(--wpbr-surface);
  border: 1px solid color-mix(in srgb, var(--wpbr-navy) 18%, transparent);
  border-radius: 10px;
  color: var(--wpbr-text);
  font: inherit;
  font-size: var(--wpbr-text-base);
  transition: border-color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-buy__control:hover { border-color: color-mix(in srgb, var(--wpbr-blue) 50%, transparent); }
.wpbr-buy__control:focus-visible { outline-offset: 1px; border-color: var(--wpbr-blue); }
.wpbr-buy__control[readonly] { background: var(--wpbr-surface-tint); color: var(--wpbr-text-soft); }
/* A NATIVE SELECT, with the brand's chevron instead of the platform's. Still
 * the browser's own list, keyboard type-ahead and all. The chevron is drawn by
 * the wrapper in the text colour, so no colour is written into an image. */
.wpbr-buy__select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; }
.wpbr-buy__selectwrap { position: relative; display: block; }
.wpbr-buy__selectwrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--wpbr-text);
  border-bottom: 2px solid var(--wpbr-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.wpbr-buy__note { margin: 6px 0 0; color: var(--wpbr-text-soft); font-size: var(--wpbr-text-sm); line-height: 1.5; }
.wpbr-buy__note:empty { display: none; }
.wpbr-buy__note[data-buy-wish] { margin: 0 0 var(--wpbr-space-4); padding-bottom: 12px; border-bottom: 1px solid var(--wpbr-rule-soft); }

/* ---- state: what each billing country says ---------------------------- */
.wpbr-buy [data-show] { display: none; }
.wpbr-buy[data-market="us"] [data-show~="us"],
.wpbr-buy[data-market="international"] [data-show~="international"] { display: revert; }

/* ---- 50-site blocks: one plan, US billing only ------------------------- */
.wpbr-buy__blocks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: 2px var(--wpbr-space-3);
  margin: var(--wpbr-space-4) 0 0;
  padding: var(--wpbr-space-3) var(--wpbr-space-4);
  background: var(--wpbr-surface-tint);
  border-radius: 12px;
}
.wpbr-buy__blocks[hidden] { display: none; }
.wpbr-buy__blocks-label { margin: 0; }
.wpbr-buy__blocks-input { min-height: 40px; text-align: center; }
.wpbr-buy__blocks-hint { grid-column: 1 / -1; margin: 0; }

/* ---- the commitment ---------------------------------------------------- */
.wpbr-buy__foot { margin: var(--wpbr-space-5) 0 0; }
.wpbr-buy__foot .wpbr-fine { margin: 0 0 var(--wpbr-space-3); }
.wpbr-buy__fine {
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-xs);
  line-height: 1.5;
}
.wpbr-buy__submit {
  width: 100%;
  min-height: 52px;
  font-size: var(--wpbr-text-md);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wpbr-blue) 22%, transparent);
}

/* ---- as a page ----------------------------------------------------------
 * `/start/` gives the component a setting and nothing else: the component,
 * centred, and one quiet line for somebody who meant to sign in. */
.wpbr-buy-page { padding: var(--wpbr-space-2) 0 0; }
.wpbr-buy-page__alt {
  margin: var(--wpbr-space-5) 0 0;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
  text-align: center;
}

/* ---- framed ------------------------------------------------------------
 * Inside the modal the dialog is the card, so the component drops its own. */
.wpbr-embed { margin: 0; background: var(--wpbr-surface); }
.wpbr-embed .wpbr-buy {
  max-width: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--wpbr-space-6) var(--wpbr-space-6) var(--wpbr-space-5);
}

/* THE COMPONENT COMPACTS BY ITS OWN WIDTH, NOT THE PAGE'S. Framed in the
 * desktop modal it is 460px wide, and inside a frame a media query measures the
 * frame — so a 600px rule here shrank the plan labels in a modal that had room
 * for them. 440px catches a phone (the page card at 342px, the sheet at 390px)
 * and leaves the desktop modal alone. */
@media (max-width: 440px) {
  .wpbr-buy { padding: var(--wpbr-space-5) var(--wpbr-space-4) var(--wpbr-space-4); border-radius: 16px; }
  .wpbr-embed .wpbr-buy { padding: var(--wpbr-space-5) var(--wpbr-space-4) var(--wpbr-space-4); }
  .wpbr-buy__title { font-size: 21px; }
  .wpbr-buy__price { margin-top: var(--wpbr-space-4); }
  .wpbr-buy__amount { font-size: 36px; }
  .wpbr-buy__field { margin-top: var(--wpbr-space-4); }
  .wpbr-seg__body { font-size: var(--wpbr-text-sm); }
}
@media (max-width: 600px) { .wpbr-buy-page { padding: 0; } }

/* ===================================================================
   THE MASTHEAD SEARCH  (DDM `.ddm-help-search`)

   A REAL GET FORM, so it works with scripting off. A search box that needed a
   script would be the one control a reader with a broken page cannot use.
   =================================================================== */

/* `min-width: 0` IS LOAD-BEARING. A flex item defaults to `min-width: auto`,
 * which refuses to shrink below its own min-content — so at 320px this form
 * measured 345px inside a 320px viewport and took the whole page with it. It
 * is the one flex item here wide enough for that default to matter. */
.wpbr-search {
  display: flex;
  align-items: stretch;
  flex: 1 1 15rem;
  min-width: 0;
  gap: var(--wpbr-space-2);
}
.wpbr-search .wpbr-input {
  min-width: 0;
  width: auto;
  flex: 1 1 auto;
}
.wpbr-search .wpbr-btn { flex: none; padding: 0 var(--wpbr-space-4); }

/* ===================================================================
   BREADCRUMBS  (DDM `.ddm-breadcrumb`)
   =================================================================== */

.wpbr-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  margin: 0 0 var(--wpbr-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--wpbr-text-sm);
}
.wpbr-crumbs li + li::before { content: "›"; margin-inline-end: var(--wpbr-space-2); color: var(--wpbr-text-faint); }
.wpbr-crumbs a { text-decoration: none; font-weight: var(--wpbr-weight-semi); }
.wpbr-crumbs a:hover { text-decoration: underline; }
/* The tail is the page you are on: plain text, not a link, and not
 * `aria-current` — the navigation already announces that, and two claims
 * on one page is one too many. */
.wpbr-crumbs li:last-child { color: var(--wpbr-text-soft); }

/* ===================================================================
   THE HELP ARTICLE

   THE RAIL IS SECOND IN DOM ORDER and is placed with grid, never with `order`: a
   visual order that disagrees with the tab order is the defect that rule exists
   for. Taken from DDM.
   =================================================================== */

.wpbr-article { display: block; }

.wpbr-article__body {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-6);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}

.wpbr-rails { display: grid; gap: var(--wpbr-space-5); margin-block-end: var(--wpbr-space-6); }

.wpbr-rail {
  padding-block-start: var(--wpbr-space-3);
  border-block-start: 1px solid var(--wpbr-rule-soft);
}
.wpbr-rail__head {
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-chip);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}
.wpbr-rail p, .wpbr-rail li { font-size: var(--wpbr-text-sm); line-height: 1.55; }
.wpbr-rail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-2); }

/* Field 10 renders in the rail above the tier and in the header below it, so
 * exactly one of the two exists at any width. */
.wpbr-meta--narrow { display: none; }

.wpbr-toc {
  padding: var(--wpbr-space-3) var(--wpbr-space-4);
  margin: 0 0 var(--wpbr-space-6);
  background: var(--wpbr-surface-tint);
  border-radius: var(--wpbr-radius-md);
}
.wpbr-toc__head { margin: 0 0 var(--wpbr-space-2); font-size: var(--wpbr-text-sm); font-weight: var(--wpbr-weight-semi); }
.wpbr-toc ol { margin: 0; padding-inline-start: 1.2em; }
.wpbr-toc li { margin-block-end: var(--wpbr-space-1); font-size: var(--wpbr-text-base); }

/* Numbered procedure steps. */
.wpbr-steps { list-style: none; margin: 0 0 var(--wpbr-space-5); padding: 0; counter-reset: wpbr-step; }
.wpbr-steps > li {
  position: relative;
  padding-inline-start: var(--wpbr-space-7);
  margin-block-end: var(--wpbr-space-5);
  counter-increment: wpbr-step;
}
.wpbr-steps > li::before {
  content: counter(wpbr-step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wpbr-space-6);
  height: var(--wpbr-space-6);
  border-radius: 50%;
  background: var(--wpbr-surface-tint);
  color: var(--wpbr-blue);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-bold);
}

/* ===================================================================
   THE SUPPORT THREAD
   =================================================================== */

.wpbr-thread { list-style: none; margin: 0 0 var(--wpbr-space-6); padding: 0; }

.wpbr-message {
  padding: var(--wpbr-space-4) var(--wpbr-space-5);
  margin: 0 0 var(--wpbr-space-3);
  background: var(--wpbr-surface);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
}
.wpbr-message--staff { border-inline-start: 3px solid var(--wpbr-blue); }

.wpbr-message__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  align-items: baseline;
  margin: 0 0 var(--wpbr-space-2);
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}
.wpbr-message__who { color: var(--wpbr-text); font-weight: var(--wpbr-weight-semi); }
.wpbr-message__body { font-size: var(--wpbr-text-base); line-height: var(--wpbr-leading-body); }

.wpbr-files { margin: var(--wpbr-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-1); }
.wpbr-files li { font-size: var(--wpbr-text-sm); }

/* ===================================================================
   EMPTY STATES

   A sentence rather than an empty table, which reads as a fault.
   =================================================================== */

.wpbr-empty {
  max-width: var(--wpbr-measure);
  padding: var(--wpbr-space-6);
  background: var(--wpbr-surface-raised);
  border: 1px dashed var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  color: var(--wpbr-text-soft);
}
.wpbr-empty > :first-child { margin-top: 0; }
.wpbr-empty > :last-child { margin-bottom: 0; }

/* ===================================================================
   THE FOOTER
   =================================================================== */

.wpbr-footer {
  /* NO TOP MARGIN, BECAUSE `.wpbr-main` ALREADY ENDS IN ONE. Both carried
   * `space-9`, so every page ended in 140px of gradient before the footer — the
   * same separation twice, which read on a short page like `/start/` as a page
   * that had run out of things to say. */
  margin-top: 0;
  padding: var(--wpbr-space-7) 0 var(--wpbr-space-6);
  background: var(--wpbr-navy);
  color: var(--wpbr-on-navy);
}
.wpbr-footer__inner {
  display: grid;
  gap: var(--wpbr-space-6);
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
}
@media (min-width: 601px) { .wpbr-footer__inner { grid-template-columns: 1.5fr 1fr 1fr; } }

.wpbr-footer .wpbr-wordmark { font-size: var(--wpbr-text-md); color: var(--wpbr-white); }
/* On navy, `WP` recedes in ice rather than in grey — the same rule, the value the
 * listing banner uses on a dark ground. */
.wpbr-footer .wpbr-wordmark__wp { color: var(--wpbr-on-navy-soft); }

.wpbr-footer__tagline {
  margin: var(--wpbr-space-2) 0 0;
  max-width: 34ch;
  color: var(--wpbr-on-navy);
  font-size: var(--wpbr-text-sm);
}
.wpbr-footer__head {
  margin: 0 0 var(--wpbr-space-3);
  color: var(--wpbr-on-navy-soft);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
}
.wpbr-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--wpbr-space-2); }
.wpbr-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--wpbr-target-secondary);
  color: var(--wpbr-on-navy);
  font-size: var(--wpbr-text-sm);
  text-decoration: none;
}
.wpbr-footer a:hover { color: var(--wpbr-white); text-decoration: underline; }

.wpbr-footer__legal {
  width: 100%;
  max-width: var(--wpbr-page-max);
  margin: var(--wpbr-space-5) auto 0;
  padding: var(--wpbr-space-4) var(--wpbr-gutter) 0;
  border-top: 1px solid var(--wpbr-rule-soft);
  color: var(--wpbr-on-navy-soft);
  font-size: var(--wpbr-text-xs);
  letter-spacing: var(--wpbr-tracking-fine);
}
.wpbr-footer__legal p { margin: 0; }

/* ===================================================================
   THE CHROME ON A PHONE

   THE MASTHEAD STAYS ONE ROW. At 390px the lockup, the "Account" qualifier and
   "Help Centre" do not fit, and the flex row wrapped the last of them onto a
   line of its own — a whole row of header for one link. On a phone the
   qualifier goes (the lockup already says where you are) and the link says
   "Help"; the account shell renders both labels and this chooses.

   THE FOOTER HALVES. Three stacked groups at 24px gaps made the footer taller
   than the checkout above it. On a phone the two link groups sit side by side
   under the wordmark and the padding tightens; every link keeps its touch
   target.
   =================================================================== */

.wpbr-bar__short { display: none; }

@media (max-width: 600px) {
  .wpbr-main { padding: var(--wpbr-space-5) 0 var(--wpbr-space-7); }
  .wpbr-bar { gap: var(--wpbr-space-2) var(--wpbr-space-3); padding-block: var(--wpbr-space-2); }
  .wpbr-wordmark { font-size: 21px; }
  .wpbr-lockup__mark { width: 26px; }
  .wpbr-footer { padding: var(--wpbr-space-5) 0 var(--wpbr-space-4); }
  .wpbr-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--wpbr-space-4) var(--wpbr-space-5); }
  .wpbr-footer__inner > :first-child { grid-column: 1 / -1; }
  .wpbr-footer__head { margin-bottom: var(--wpbr-space-1); }
  .wpbr-footer ul { gap: 0; }
  .wpbr-footer__legal { margin-top: var(--wpbr-space-4); padding-top: var(--wpbr-space-3); }
}

@media (max-width: 480px) {
  .wpbr-qualifier { display: none; }
  .wpbr-bar__long { display: none; }
  .wpbr-bar__short { display: inline; }
}

/* ===================================================================
   THE ARTICLE RAIL TIER

   NOT A BRAND TIER. The brand has one breakpoint and it is 600px, below. A 260px
   rail cannot sit beside a 68ch measure at 600px, so the two-column article gets
   a wider tier of its own — a layout constraint, recorded as one.
   =================================================================== */

@media (min-width: 900px) {
  .wpbr-article {
    display: grid;
    max-width: calc(var(--wpbr-measure) + var(--wpbr-rail-width) + var(--wpbr-space-8));
    grid-template-columns: minmax(0, 1fr) var(--wpbr-rail-width);
    column-gap: var(--wpbr-space-8);
    align-items: start;
  }
  .wpbr-article__head,
  .wpbr-toc,
  .wpbr-article__body { grid-column: 1; }
  .wpbr-rails {
    grid-column: 2;
    grid-row: 1 / span 20;
    position: sticky;
    inset-block-start: var(--wpbr-space-5);
  }
}

/* ===================================================================
   THE NARROW TIER — the theme's 600px, and the only brand breakpoint

   The bar wraps, the qualifier loses its divider, search takes the full width,
   and the second row collapses behind a disclosure. A reader who cannot see the
   categories cannot tell whether their question has one, so the button reveals
   them in flow rather than hiding them in a sheet.
   =================================================================== */

@media (max-width: 600px) {
  .wpbr-bar { gap: var(--wpbr-space-3); padding-bottom: var(--wpbr-space-3); }
  .wpbr-qualifier { padding-inline-start: 0; border-inline-start: 0; }
  .wpbr-wordmark { font-size: 22px; }
  .wpbr-search { flex: 1 1 100%; }
  /* THE SIGNED-IN ADDRESS AND SIGN OUT SHARE A ROW. `100%` put each on a row of
   * its own, which made the masthead four rows tall (mark, address, Sign out,
   * Menu) above a page that was often shorter than the masthead. A 12rem basis
   * still wraps to its own row under the mark, and then Sign out fits beside it;
   * a long address breaks inside its own space instead of pushing the button. */
  .wpbr-bar__who { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }

  .wpbr-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wpbr-space-2);
    min-height: var(--wpbr-target);
    margin: 0 var(--wpbr-gutter) var(--wpbr-space-1);
    padding: 0 var(--wpbr-space-3);
    background: var(--wpbr-surface);
    border: 1px solid var(--wpbr-rule);
    border-radius: var(--wpbr-radius-pill);
    font: inherit;
    font-size: var(--wpbr-text-sm);
    font-weight: var(--wpbr-weight-semi);
    cursor: pointer;
  }
  .wpbr-js .wpbr-appnav { display: none; }
  .wpbr-js .wpbr-appnav.is-open { display: block; }
  .wpbr-appnav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .wpbr-appnav li { border-block-start: 1px solid var(--wpbr-rule-soft); }
  .wpbr-appnav a { display: flex; min-height: var(--wpbr-target); }

  .wpbr-main { padding: var(--wpbr-space-6) 0 var(--wpbr-space-8); }
  .wpbr-article__body { padding: var(--wpbr-space-4); }
  .wpbr-panel { padding: var(--wpbr-space-4); }
  .wpbr-prose p, .wpbr-prose li { font-size: var(--wpbr-text-md); line-height: var(--wpbr-leading-tight); }
  .wpbr-lede { font-size: var(--wpbr-text-md); line-height: var(--wpbr-leading-tight); }
  .wpbr-meta--narrow { display: block; }
  .wpbr-rails { margin-block-start: var(--wpbr-space-6); }
  /* A capture keeps a legible scale inside a scrollable region rather than
   * shrinking to unreadability. */
  .wpbr-article figure { overflow-x: auto; }
  .wpbr-article figure img { max-width: none; }
}


/* ===================================================================
   PUBLIC SURFACE HERO REFRESH
   =================================================================== */

.wpbr-surfacehero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: var(--wpbr-space-8);
  align-items: center;
  padding: var(--wpbr-space-6) 0 var(--wpbr-space-8);
}

.wpbr-surfacehero__copy { min-width: 0; }

.wpbr-surfacehero__title {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(42px, 5.7vw, 68px);
  font-weight: var(--wpbr-weight-display);
  line-height: .99;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wpbr-surfacehero__lede {
  max-width: 54ch;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-lede);
  line-height: var(--wpbr-leading-body);
}

.wpbr-surfacehero__fine {
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

.wpbr-surfacehero__art {
  min-width: 0;
  padding: var(--wpbr-space-2);
}

.wpbr-surfacehero__art img {
  display: block;
  width: 100%;
  height: auto;
}

.wpbr-help-hero-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wpbr-space-2);
  max-width: 620px;
  margin-top: var(--wpbr-space-6);
  padding: var(--wpbr-space-2);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-pill);
  background: var(--wpbr-surface);
  box-shadow: var(--wpbr-shadow-raised);
}

.wpbr-help-hero-search .wpbr-input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.wpbr-help-browse { padding: var(--wpbr-space-6) 0 var(--wpbr-space-3); }

.wpbr-surface-sectionhead {
  max-width: 760px;
  margin-bottom: var(--wpbr-space-6);
}

.wpbr-surface-sectionhead h2 {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.wpbr-help-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wpbr-space-5);
  align-items: start;
}

.wpbr-help-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.wpbr-help-card:last-child:nth-child(odd) .wpbr-help-card__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--wpbr-space-7);
}

.wpbr-help-card {
  padding: var(--wpbr-space-5);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  background: var(--wpbr-surface);
  box-shadow: var(--wpbr-shadow-raised);
}

.wpbr-help-card__title {
  margin: 0 0 var(--wpbr-space-4);
  font-size: var(--wpbr-text-h3);
  line-height: 1.2;
}

.wpbr-help-card__title a { text-decoration: none; }
.wpbr-help-card__title a:hover { text-decoration: underline; }

.wpbr-help-card__list {
  display: grid;
  gap: var(--wpbr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpbr-help-card__list a {
  display: block;
  min-height: var(--wpbr-target);
  padding: var(--wpbr-space-2) 0;
  text-decoration: none;
}

.wpbr-help-card__list a > span {
  display: block;
  color: var(--wpbr-text);
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-help-card__list small {
  display: block;
  margin-top: 3px;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
}

.wpbr-help-card__all {
  margin-top: var(--wpbr-space-4);
}

.wpbr-account-signin {
  min-height: 0;
}

.wpbr-signin-card {
  max-width: 520px;
  margin-top: var(--wpbr-space-6);
  padding: var(--wpbr-space-5);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  background: var(--wpbr-surface);
  box-shadow: var(--wpbr-shadow-raised);
}

.wpbr-signin-card .wpbr-btn {
  width: 100%;
  margin-top: var(--wpbr-space-4);
}

.wpbr-signin-card__fine {
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-xs);
  text-align: center;
}

.wpbr-account-alt {
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-text-soft);
  font-size: var(--wpbr-text-sm);
}

.wpbr-signin-confirm {
  max-width: 520px;
  margin-top: var(--wpbr-space-5);
}

/* On wider screens the Help taxonomy may wrap into a deliberate second row.
 * Never turn primary navigation into a horizontally scrollable strip. */
@media (min-width: 601px) {
  .wpbr-appnav ul {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .wpbr-appnav li { flex: none; }
  .wpbr-appnav a { white-space: nowrap; }
}

@media (max-width: 899px) {
  .wpbr-surfacehero {
    grid-template-columns: 1fr;
    gap: var(--wpbr-space-5);
  }

  .wpbr-surfacehero__art {
    max-width: 720px;
    margin: 0 auto;
  }

  .wpbr-account-signin { min-height: 0; }
}

@media (max-width: 600px) {
  .wpbr-surfacehero {
    padding-top: var(--wpbr-space-3);
  }

  .wpbr-surfacehero__title {
    font-size: clamp(38px, 12vw, 52px);
  }

  .wpbr-help-hero-search {
    grid-template-columns: 1fr;
    border-radius: var(--wpbr-radius-md);
  }

  .wpbr-help-grid {
    grid-template-columns: 1fr;
  }

  .wpbr-help-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .wpbr-help-card:last-child:nth-child(odd) .wpbr-help-card__list {
    grid-template-columns: 1fr;
  }
}


/* PUBLIC HEADING + COMPOSITION PASS — 2026-10-07 */

.wpbr-surfacehero {
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: var(--wpbr-space-5) 0 var(--wpbr-space-7);
}

.wpbr-surfacehero__title {
  max-width: 15ch;
  font-size: clamp(42px, 5vw, 60px);
  line-height: 1.02;
  letter-spacing: -.04em;
}

.wpbr-surfacehero__lede {
  max-width: 50ch;
}

.wpbr-surfacehero__art {
  padding: 0;
}

.wpbr-surface-sectionhead {
  margin-bottom: var(--wpbr-space-5);
}

.wpbr-surface-sectionhead h2 {
  max-width: 20ch;
  font-size: clamp(30px, 3.6vw, 42px);
}

.wpbr-help-browse {
  padding-top: var(--wpbr-space-5);
}

.wpbr-help-grid {
  gap: var(--wpbr-space-4);
}

@media (max-width: 899px) {
  .wpbr-surfacehero {
    /* ONE COLUMN BELOW 900px, AGAIN. The earlier narrow-tier rule says so, and the
     * composition pass above redeclared `grid-template-columns` at the same
     * specificity and later in the file, so on a phone the copy stayed in a
     * column beside a 360px-minimum art column and was left about 90px wide: the
     * sign-in headline ran one word to a line and the page scrolled sideways. The
     * collapse has to live in the LAST declaration of the property. */
    grid-template-columns: 1fr;
    gap: var(--wpbr-space-5);
    padding-top: var(--wpbr-space-4);
    padding-bottom: var(--wpbr-space-6);
  }

  .wpbr-surfacehero__title {
    max-width: 16ch;
    font-size: clamp(40px, 9vw, 54px);
  }
}

@media (max-width: 600px) {
  .wpbr-surfacehero__title {
    font-size: clamp(36px, 11vw, 48px);
  }
}


/* HELP GROUPED NAVIGATION — launch acceptance */

/* The masthead carries broad task groups only. Detailed Help categories live
 * on the landing page where there is enough room to explain them. */
.wpbr-help-search-link {
  white-space: nowrap;
}

.wpbr-help-groups {
  display: grid;
  gap: var(--wpbr-space-7);
}

.wpbr-help-group {
  scroll-margin-top: 150px;
}

.wpbr-help-group + .wpbr-help-group {
  padding-top: var(--wpbr-space-6);
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-help-group__title {
  margin: 0 0 var(--wpbr-space-4);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.wpbr-help-group .wpbr-help-card:last-child:nth-child(odd) {
  grid-column: auto;
}

.wpbr-help-group .wpbr-help-card:last-child:nth-child(odd) .wpbr-help-card__list {
  grid-template-columns: 1fr;
}

/* Five broad Help destinations fit as one deliberate row at desktop widths. */
@media (min-width: 900px) {
  .wpbr-appnav ul {
    flex-wrap: nowrap;
    gap: 0 clamp(22px, 2.8vw, 42px);
  }
}

/* Keep the grouped Help landing easy to scan as it collapses. */
@media (max-width: 899px) {
  .wpbr-help-groups {
    gap: var(--wpbr-space-6);
  }

  .wpbr-help-group + .wpbr-help-group {
    padding-top: var(--wpbr-space-5);
  }
}


/* HELP SHELL ACCEPTANCE — persistent navigation and heading rhythm */

.wpbr-qualifier--link {
  text-decoration: none;
}
.wpbr-qualifier--link:hover,
.wpbr-qualifier--link:focus-visible {
  color: var(--wpbr-link-hover);
}

.wpbr-search--compact {
  flex: 0 1 360px;
  max-width: 360px;
}

/* Structural Help headings should read as labels, not break like article copy. */
@media (min-width: 900px) {
  .wpbr-help-browse .wpbr-surface-sectionhead {
    max-width: none;
  }

  .wpbr-help-browse .wpbr-surface-sectionhead h2,
  .wpbr-help-group__title {
    max-width: none;
    text-wrap: nowrap;
  }
}

/* Keep masthead actions usable before the mobile menu tier. */
@media (max-width: 1100px) and (min-width: 601px) {
  .wpbr-search--compact {
    flex-basis: 260px;
    max-width: 260px;
  }

  .wpbr-bar {
    gap: var(--wpbr-space-3);
  }
}




/* ===================================================================
   THE ACCOUNT PORTAL'S VERTICAL RHYTHM

   `_shell.html` wraps every account page's content in `.wpbr-account`, and these
   rules are scoped to it so the Help Centre, which shares this stylesheet, keeps
   the spacing it has.

   THE PROBLEM WAS NOT ANY ONE PAGE. Each component carried a margin of its own
   (a panel 24px below, a note 24px above and below, a section 34px below, an
   action row 28px above) and the page title's own bottom margin was zeroed by
   `.wpbr-prose > :last-child`, so the gap between the title and what followed
   was 0, 12, 24, 28 or 34px depending on which component happened to come next.
   A page was spaced by whatever it was made of.

   SO THE PAGE OWNS THE SPACE BETWEEN ITS BLOCKS. A direct child of `.wpbr-account`
   gives up its own vertical margins, and one `--wpbr-flow` goes between each
   neighbouring pair. A heading that opens a new section is the one exception and
   is given a bigger break above and a smaller one below, so it belongs to what it
   introduces. Inside a section the same idea applies at the next step down.
   =================================================================== */

.wpbr-account { --wpbr-flow: var(--wpbr-space-5); }

.wpbr-account > * { margin-block: 0; }
.wpbr-account > * + * { margin-top: var(--wpbr-flow); }

.wpbr-account > .wpbr-section__head { margin-top: var(--wpbr-space-7); }
.wpbr-account > .wpbr-section__head + * { margin-top: var(--wpbr-space-3); }
/* Small print belongs to the thing above it - the sentence under a button - and
 * keeps the reading measure: a 12px line the width of the window is a hundred
 * characters long. */
.wpbr-account > p.wpbr-fine { margin-top: var(--wpbr-space-3); max-width: var(--wpbr-measure); }

/* A section is a heading and what it is about: its parts sit closer than the
 * sections do. */
.wpbr-account .wpbr-section > * { margin-block: 0; }
.wpbr-account .wpbr-section > * + * { margin-top: var(--wpbr-space-3); }

/* A LIST OF LINKS, NOT A PARAGRAPH PER LINK. Each link is 44px tall for a thumb,
 * and one paragraph apiece added 30px of margin on top of that, so two links
 * were 58px apart and read as unrelated. */
.wpbr-links {
  margin: var(--wpbr-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* A PANEL WITH MORE THAN ONE JOB - the licence on Products is the key and the
 * download, and used to be one tall column of both. The bar carries the name and
 * the state; the groups sit side by side where there is room and stack where
 * there is not, divided by a hairline that turns with them. */
.wpbr-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wpbr-space-2) var(--wpbr-space-3);
  margin: 0 0 var(--wpbr-space-5);
}
.wpbr-panel__bar .wpbr-panel__head { margin: 0; }
.wpbr-panel__term { color: var(--wpbr-text-soft); font-size: var(--wpbr-text-sm); }

.wpbr-panel__groups { display: grid; gap: var(--wpbr-space-5); }
.wpbr-panel__group > * { margin-block: 0; }
.wpbr-panel__group > * + * { margin-top: var(--wpbr-space-3); }
.wpbr-panel__group + .wpbr-panel__group {
  padding-top: var(--wpbr-space-5);
  border-top: 1px solid var(--wpbr-rule-soft);
}
/* 901px, the same width the three-up price ladder waits for: two groups across
 * a tablet leave a licence key narrower than the key. */
@media (min-width: 901px) {
  .wpbr-panel__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wpbr-space-8); }
  .wpbr-panel__group + .wpbr-panel__group {
    padding-top: 0;
    border-top: 0;
    padding-inline-start: var(--wpbr-space-8);
    border-inline-start: 1px solid var(--wpbr-rule-soft);
  }
}

/* The name of a group inside a panel. A label for the field below it, or a
 * heading for the prose below it; the type is the same either way. */
.wpbr-panel__sub {
  display: block;
  margin: 0 0 var(--wpbr-space-2);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-fine);
  color: var(--wpbr-text);
}
.wpbr-panel__group > .wpbr-panel__sub { margin-bottom: 0; }
.wpbr-panel__group > .wpbr-panel__sub + * { margin-top: var(--wpbr-space-2); }

/* The Pro + add-on summary in the purchase component (two purchases, two prices, one total). */
.wpbr-buy__lines { margin: 14px 0 6px; }
.wpbr-buy__havepro { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 8px 0 10px; }
.wpbr-buy__summary { margin: 0; }
.wpbr-buy__summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.wpbr-buy__summary dt, .wpbr-buy__summary dd { margin: 0; }
.wpbr-buy__summary > div:last-child { border-top: 1px solid var(--wpbr-rule-soft); margin-top: 4px; padding-top: 8px; }