/*
 * WP Bulk Replace — the marketing layer.
 *
 * WHAT IS AND IS NOT IN HERE. `ui.css` beside this file is the platform's
 * component layer, copied byte for byte and never edited here (see
 * PROVENANCE.md). This file holds only what a marketing surface has and Help
 * and Account do not: an act rhythm, a hero, a screenshot frame, a pricing
 * plan, a comparison table, a disclosure list, an article rail. Ten components,
 * named in `docs/MARKETING-SITE-DESIGN-SPEC.md` §6.
 *
 * NO LITERAL VALUES, for the same reason the platform file says so: a colour
 * spelled in a component is a colour nobody can find when the palette changes.
 * The one exception is inside `@media`, which cannot read a custom property —
 * every breakpoint here is 600px, 900px or 1200px and matches a token in
 * `tokens.css` whose comment says so.
 *
 * TWO GROUNDS PER PAGE, AT MOST (spec §5). White, plus the mist tint, plus one
 * ink act. No page places two tinted acts adjacently; no page carries more than
 * one ink act above the footer; the gradient appears on the homepage hero
 * alone. `.wpbr-act--tint + .wpbr-act--tint` is a selector at the end of this
 * file that makes the first of those visible in the browser rather than in a
 * review.
 */

/* ===================================================================
   ACT — a page section, and the page's rhythm
   =================================================================== */

/* THE RHYTHM IS WHITE -> TINT -> WHITE -> INK. An act states its own ground;
 * nothing inherits one. */
.wpbr-act {
  padding: var(--wpbr-act-y) 0;
  background: var(--wpbr-white);
}

.wpbr-act--tint { background: var(--wpbr-surface-tint); }

/* The one ink act a page may carry above the footer. Type and one action, and
 * nothing raised: a card on ink reads as a second page. */
.wpbr-act--ink {
  background: var(--wpbr-navy);
  color: var(--wpbr-on-navy);
}

.wpbr-act--ink h2,
.wpbr-act--ink h3 { color: var(--wpbr-white); }

.wpbr-act--ink .wpbr-lede,
.wpbr-act--ink .wpbr-muted { color: var(--wpbr-on-navy-soft); }

/* On ink the action link is azure — 5.34:1 — not brand blue, which is 2.5:1
 * there. A component that can appear on two grounds ships two variants; it
 * never relies on the cascade. */
.wpbr-act--ink .wpbr-actionlink { color: var(--wpbr-azure); }

.wpbr-act--ink .wpbr-btn--secondary {
  border: 1px solid var(--wpbr-white);
  color: var(--wpbr-on-navy);
  background: transparent;
}

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

.wpbr-act__inner--wide { max-width: var(--wpbr-page-max-wide); }

.wpbr-act__head { margin: 0 0 var(--wpbr-space-7); }

/* §2: act h2 at its own size. 24ch and balanced, so a two-line heading breaks
 * where a person would break it. */
.wpbr-act h2 {
  font-size: var(--wpbr-text-act);
  font-weight: var(--wpbr-weight-bold);
  line-height: 1.10;
  letter-spacing: -.03em;
  max-width: 24ch;
  text-wrap: balance;
  margin: 0;
}

.wpbr-act__lede {
  font-size: var(--wpbr-text-md);
  line-height: 1.70;
  max-width: 58ch;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
}

.wpbr-act--ink .wpbr-act__lede { color: var(--wpbr-on-navy); }

/* §2: tracked uppercase sans. NEVER monospace — monospace means a literal
 * machine string, which is the rule Help and Account already carry. */
.wpbr-eyebrow--act {
  font-size: var(--wpbr-text-eyebrow);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpbr-blue-type);
  margin: 0 0 var(--wpbr-space-3);
}

.wpbr-act--ink .wpbr-eyebrow--act { color: var(--wpbr-ice); }

@media (min-width: 900px) {
  .wpbr-act__inner { padding: 0 var(--wpbr-space-7); }
}

/* ===================================================================
   MASTHEAD — the site header
   =================================================================== */

/* THE ONLY STICKY ELEMENT ON THE SITE. Nothing pins to the bottom of a phone
 * viewport, because a bottom bar on a marketing page is a conversion device
 * that eats the reader's screen. */
.wpbr-masthead--site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wpbr-white);
  border-bottom: 1px solid var(--wpbr-rule);
}

.wpbr-masthead--site .wpbr-bar {
  max-width: var(--wpbr-page-max-wide);
  margin: 0 auto;
  padding: var(--wpbr-space-4) var(--wpbr-gutter);
  display: flex;
  align-items: center;
  gap: var(--wpbr-space-5);
  flex-wrap: wrap;
  transition: padding var(--wpbr-dur) var(--wpbr-ease);
}

/* The condensed state. ONE CLASS TOGGLED BY ONE PASSIVE LISTENER — never a
 * per-frame layout read (spec §11). */
.wpbr-masthead--site.is-condensed .wpbr-bar {
  padding-top: var(--wpbr-space-2);
  padding-bottom: var(--wpbr-space-2);
}

.wpbr-sitenav {
  display: flex;
  align-items: center;
  gap: var(--wpbr-space-5);
  margin-left: auto;
}

.wpbr-sitenav__list {
  display: flex;
  align-items: center;
  gap: var(--wpbr-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.wpbr-sitenav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--wpbr-target);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  color: var(--wpbr-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--wpbr-dur) var(--wpbr-ease);
}

.wpbr-sitenav__link:hover { color: var(--wpbr-blue-type); }

/* 1.4.1: the current page carries an UNDERLINE as well as a colour. Colour
 * alone is not a state. */
.wpbr-sitenav__link[aria-current="page"] {
  color: var(--wpbr-blue-type);
  border-bottom-color: var(--wpbr-blue);
}

/* IT WORKS WITH SCRIPT OFF. The toggle is hidden until script shows it, and the
 * panel is in the DOM either way — so with no script the nav is simply a row.
 * The inverse (panel hidden by CSS, revealed by script) ships a site whose
 * navigation is missing for anyone the script fails for. */
.wpbr-navtoggle { display: none; }

@media (max-width: 899px) {
  .wpbr-sitenav { width: 100%; margin-left: 0; }

  .js .wpbr-navtoggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wpbr-space-2);
    min-height: var(--wpbr-target);
    margin-left: auto;
    padding: 0 var(--wpbr-space-3);
    background: transparent;
    border: 1px solid var(--wpbr-rule);
    border-radius: var(--wpbr-radius-md);
    font: inherit;
    font-size: var(--wpbr-text-base);
    font-weight: var(--wpbr-weight-semi);
    color: var(--wpbr-text);
    cursor: pointer;
  }

  /* IN FLOW, NOT A SHEET. A focus-trapped overlay is a modal, and a modal needs
   * an escape contract, a return-focus contract and an inert background. A
   * disclosure that pushes the page down needs none of them. */
  .js .wpbr-sitenav[hidden] { display: none; }

  .wpbr-sitenav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .wpbr-sitenav__link {
    width: 100%;
    min-height: var(--wpbr-target);
    padding: var(--wpbr-space-3) 0;
    border-bottom: 1px solid var(--wpbr-rule);
  }

  .wpbr-sitenav__link[aria-current="page"] {
    border-bottom-color: var(--wpbr-blue);
  }

  /* THE OPEN PANEL IS A COLUMN, AND IT WAS NOT.
   *
   * `.wpbr-sitenav` is a flex ROW at every width, and only its `__list` was
   * ever given `flex-direction: column`. So the panel below 900px was a row
   * holding [the whole link list] beside [the action], and the list — already
   * a column — was squeezed into whatever was left: measured at 390px it was
   * **93px wide** while the button took 129px beside it. The rule under this
   * one says "Download is the first row inside the panel, not a stranded
   * button", which is what it was always meant to be and never was; nothing
   * made the panel stack for it to be a row IN.
   *
   * Found by adding a third child to the masthead and measuring the open state
   * at 320, 390 and 700 — which is the only way to see it, because a squeezed
   * column of links still looks like a column of links in a screenshot. */
  .wpbr-sitenav {
    flex-direction: column;
    align-items: stretch;
    gap: var(--wpbr-space-3);
  }

  /* Each action is its own full-width row, in the panel's reading order. */
  .wpbr-sitenav .wpbr-btn { width: 100%; justify-content: center; }
  .wpbr-sitenav .wpbr-actionlink { width: 100%; justify-content: center; }
}

@media (min-width: 900px) {
  .wpbr-sitenav[hidden] { display: flex; }
}

/* 2.4.11: a keyboard-focused element is never covered by the sticky header.
 * The value is the condensed bar's height. */
:target,
h1[id], h2[id], h3[id], .wpbr-anchor { scroll-margin-top: 88px; }

/* ===================================================================
   HERO
   =================================================================== */

/* THE ARTBOARD'S HERO IS ONE CENTRED COLUMN AND IT SAYS SO. `WPBR Marketing
 * Pages.dc.html`, Homepage artboard, carries a designer note reading "Hero right
 * side — left empty, on purpose". The version this replaces had invented a
 * `7fr 5fr` grid and put the search module in the narrow column at 460px, which
 * is the defect `docs/DESIGN-FIDELITY-AUDIT.md` §2 and §4 record: the module is
 * the payoff of the hero, not an illustration beside it.
 *
 * Every number below is the artboard's. */
.wpbr-hero {
  position: relative;
  overflow: hidden;
  background: var(--wpbr-ground);
  padding: 56px var(--wpbr-gutter) 64px;
}

/* THE AMBIENT LAYER, BEHIND EVERYTHING, spanning the whole hero. Clipped by the
 * hero's own overflow so a file never escapes the act. */
.wpbr-hero__stream {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* `left:0` IS THE RESTING POSITION, NOT `-18%`, and the difference is the whole
 * reduced-motion frame. The keyframes drive `left` from -18% to 118%; parking
 * the icons at the start of that travel means a reader with
 * `prefers-reduced-motion` — or no script — sees an empty hero where the
 * artboard shows the stream composed in place. The hero README says so too:
 * "icons can render statically in place, or be omitted", and the artboard
 * renders them in place. */
.wpbr-hero__file {
  position: absolute;
  left: 0;
  opacity: var(--wpbr-o);
  color: var(--wpbr-ice);
}

/* BLUE ON ENTRY, MINT PAST THE SEARCH BAR, and nearly transparent while it is
 * behind the column — a file at full opacity under the bar would compete with
 * the text the bar exists to show. */
@keyframes wpbrFileDrift {
  0%   { left: -18%; transform: translateY(0);    opacity: var(--wpbr-o);             color: var(--wpbr-ice); }
  18%  { left: 6%;   transform: translateY(-8px); opacity: var(--wpbr-o);             color: var(--wpbr-azure); }
  28%  { left: 20%;  transform: translateY(0);    opacity: calc(var(--wpbr-o) * .1);  color: var(--wpbr-blue); }
  50%  { left: 50%;  transform: translateY(8px);  opacity: calc(var(--wpbr-o) * .1);  color: var(--wpbr-hero-mint); }
  72%  { left: 80%;  transform: translateY(0);    opacity: var(--wpbr-o);             color: var(--wpbr-hero-teal); }
  100% { left: 118%; transform: translateY(0);    opacity: var(--wpbr-o);             color: var(--wpbr-hero-teal); }
}

/* THE ANIMATION IS ADDED BY A CLASS THE SCRIPT SETS, not by this rule. With no
 * script the files sit where the markup put them — still a composed image, and
 * no animation the reader cannot stop. */
.wpbr-hero.is-animating .wpbr-hero__file {
  animation: wpbrFileDrift 26s linear var(--wpbr-delay) infinite;
}

.wpbr-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* clamp(34px,4.6vw,50px) is the artboard's. The version this replaces ran to
 * 72px, which is where the "materially diverges" reading of the production
 * preview came from before anything else was measured. */
.wpbr-hero h1 {
  margin: 0;
  width: min(900px, calc(100vw - 32px));
  font-size: clamp(34px, 4.6vw, 50px);
  line-height: 1.08;
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: -.03em;
  color: var(--wpbr-text);
}

.wpbr-hero__lede {
  margin: 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wpbr-muted-type);
}

.wpbr-hero .wpbr-fine { margin: 0; }

.wpbr-actions--hero {
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}

/* ===================================================================
   HERO SEARCH MODULE

   The focal point, at the artboard's widths: min(600px,94%) for the bar and
   min(560px,90%) for the answer beneath it.
   =================================================================== */

/* MINT AND TEAL ARE NOT BRAND COLOURS AND ARE SCOPED SO THEY CANNOT BECOME ONE.
 * The palette is blue, navy and one violet accent — there is no green in it, and
 * `palette.json`'s rule that violet never carries a surface exists because a
 * brand with a fourth hue stops being a brand. These two are the far end of a
 * gradient a file passes through, on a stroke a hundredth of an opacity thick,
 * and they exist to say that something happened to the file in the middle. */
.wpbr-hero,
.wpbr-heroshow {
  --wpbr-hero-mint: #4FDBA8;
  --wpbr-hero-teal: #22C08A;
}

.wpbr-heroshow {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.wpbr-heroshow__barwrap {
  position: relative;
  width: min(600px, 94%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpbr-heroshow__glow {
  position: absolute;
  width: 175%;
  height: 150%;
  background: radial-gradient(ellipse, rgba(48, 159, 253, .16), rgba(141, 201, 253, .07) 45%, transparent 72%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}

.wpbr-heroshow__bar {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--wpbr-space-3);
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-pill);
  padding: 17px 26px;
  box-shadow: var(--wpbr-shadow-raised);
  color: var(--wpbr-muted);
  font-size: 17px;
  text-align: left;
  transition: box-shadow var(--wpbr-dur) var(--wpbr-ease), transform var(--wpbr-dur) var(--wpbr-ease);
}

/* The one beat between the question landing and the answer arriving. */
.wpbr-heroshow__bar.is-thinking {
  transform: scale(.985);
  box-shadow: 0 10px 34px rgba(0, 109, 245, .18);
}

.wpbr-heroshow__glass { flex: none; color: var(--wpbr-azure); }

.wpbr-heroshow__typed {
  flex: 1;
  min-width: 0;
  color: var(--wpbr-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .45s var(--wpbr-ease);
}

.wpbr-heroshow__typed.is-fading { opacity: 0; }

.wpbr-heroshow__cursor {
  flex: none;
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--wpbr-violet);
  opacity: 0;
}

.wpbr-hero.is-animating .wpbr-heroshow__cursor.is-on {
  opacity: 1;
  animation: wpbrCursorBlink 1s steps(2, start) infinite;
}

@keyframes wpbrCursorBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* THE ANSWERS STACK IN ONE BOX. Three absolutely positioned lines in a box
 * sized by the tallest of them: the words replace each other in place rather
 * than the column growing by a line three times. `min-height` is in `em` as the
 * artboard has it, so the box tracks the type rather than a guessed pixel. */
.wpbr-heroshow__answers {
  position: relative;
  width: min(560px, 90%);
  min-height: 5.2em;
}

.wpbr-heroshow__answer {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s var(--wpbr-ease), transform .45s var(--wpbr-ease);
}

.wpbr-heroshow__answer.is-current { opacity: 1; transform: translateY(0); }
.wpbr-heroshow__answer.is-past { opacity: 0; transform: translateY(-5px); }

/* THE THIRD STEP LANDS DIFFERENTLY, on purpose: a small overshoot and the brand
 * blue mark it as the payoff rather than a third caption. */
.wpbr-heroshow__answer[data-wpbr-hero-step="3"] {
  transition: opacity .5s cubic-bezier(.34, 1.56, .64, 1), transform .5s cubic-bezier(.34, 1.56, .64, 1);
}

.wpbr-heroshow__answer[data-wpbr-hero-step="3"] .wpbr-heroshow__word { color: var(--wpbr-blue); }

/* §2 of the spec, and the thing the superseded reference got wrong: this is a
 * real payoff, not a caption. 18px would read as a label under a search bar. */
.wpbr-heroshow__word {
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: var(--wpbr-weight-bold);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--wpbr-text);
}

.wpbr-heroshow__context {
  font-size: 14px;
  line-height: 1.5;
  max-width: 44ch;
  color: var(--wpbr-muted-type);
}

/* No progress ticks. The timing carries the sequence — the reference version's
 * three dots were a second, redundant clock. */

@media (max-width: 599px) {
  .wpbr-hero { padding: 34px var(--wpbr-gutter) 48px; }
  .wpbr-heroshow__bar { padding: 13px 18px; font-size: 15px; }
  .wpbr-heroshow__answers { min-height: 6.4em; }
}

@media (prefers-reduced-motion: reduce) {
  /* The final frame, which is also the no-script frame: question typed, third
   * answer showing, files composed and still. */
  .wpbr-hero__file { animation: none; }
  .wpbr-heroshow__cursor { display: none; }
}

/* ===================================================================
   SHOT — the screenshot frame
   =================================================================== */

/* NO DEVICE MOCKUP: a phone bezel misstates where a wp-admin screen lives. One
 * shot and only one carries browser chrome — the homepage anchor, which the
 * artboard frames in a dark title bar whose breadcrumb names the screen. */
.wpbr-shot {
  margin: 0;
  border-radius: var(--wpbr-radius-lg);
  border: 1px solid var(--wpbr-rule);
  box-shadow: var(--wpbr-shadow-screen);
  background: var(--wpbr-white);
  overflow: hidden;
}

/* The 1px white inner edge, so the frame reads as a window rather than a box. */
.wpbr-shot__frame {
  display: block;
  padding: 1px;
  background: var(--wpbr-white);
  border-radius: var(--wpbr-radius-lg);
  overflow: hidden;
}

.wpbr-shot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 720px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
}

/* An optional strip carrying the screen's name when the crop loses it. */
.wpbr-shot__label {
  background: var(--wpbr-navy);
  color: var(--wpbr-on-navy);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  padding: var(--wpbr-space-2) var(--wpbr-space-4);
  min-height: 28px;
  display: flex;
  align-items: center;
}

/* CAPTION AND ALT SAY DIFFERENT THINGS. The caption says what to look at; the
 * alt is a text equivalent. A caption that repeats the alt has wasted both. */
.wpbr-shot__caption {
  display: block;
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
  max-width: 60ch;
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-muted);
}

.wpbr-act--tint .wpbr-shot__caption { color: var(--wpbr-muted-type); }

@media (max-width: 599px) {
  /* Fixed-aspect box, cropped from the top-left, tap to open the full image.
   * Never a pinch-zoom-only shrunken full screen. */
  .wpbr-shot img { aspect-ratio: 4 / 3; }
}

/* ===================================================================
   PLAN and PRICE — the pricing cards and the amount slot
   =================================================================== */

.wpbr-plans {
  display: grid;
  gap: var(--wpbr-space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpbr-plan {
  display: flex;
  flex-direction: column;
  gap: var(--wpbr-space-3);
  background: var(--wpbr-surface-raised);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
  padding: var(--wpbr-space-6);
}

.wpbr-plan__name {
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.35;
  margin: 0;
}

.wpbr-plan__capacity {
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: var(--wpbr-tracking-chip);
  color: var(--wpbr-muted-type);
  margin: 0;
}

.wpbr-plan__purpose {
  font-size: var(--wpbr-text-base);
  line-height: 1.55;
  color: var(--wpbr-muted-type);
  margin: 0;
}

.wpbr-plan .wpbr-btn { margin-top: auto; }

/* THE SLOT. Three states, and the box is the same height in all three — a late
 * value must not move the page (B2, and 4.1.3). */
.wpbr-price {
  display: flex;
  align-items: baseline;
  gap: var(--wpbr-space-2);
  min-height: calc(var(--wpbr-text-price) + var(--wpbr-space-2));
  margin: 0;
}

.wpbr-price__amount {
  font-size: var(--wpbr-text-price);
  font-weight: var(--wpbr-weight-bold);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--wpbr-text);
}

.wpbr-price__cadence {
  font-size: var(--wpbr-text-base);
  color: var(--wpbr-muted-type);
}

.wpbr-price__billed {
  font-size: var(--wpbr-text-sm);
  color: var(--wpbr-muted-type);
  margin: 0;
}

/* Loading: a skeleton at the numeral's exact box. `aria-busy` on the slot does
 * the announcing; the shimmer is decoration and stops under reduced motion. */
.wpbr-price--loading .wpbr-price__amount {
  display: inline-block;
  width: 5ch;
  height: var(--wpbr-text-price);
  border-radius: var(--wpbr-radius-xs);
  background: var(--wpbr-rule-soft);
  animation: wpbrShimmer 1.4s ease-in-out infinite;
}

@keyframes wpbrShimmer {
  0%   { opacity: .5 }
  50%  { opacity: .95 }
  100% { opacity: .5 }
}

/* Unavailable: WORDS, and the card still renders its name, capacity, purpose
 * and action. A plan with no amount is still a plan somebody can read about. */
.wpbr-price--unavailable {
  font-size: var(--wpbr-text-base);
  line-height: 1.55;
  color: var(--wpbr-muted-type);
  display: block;
}

/* ===================================================================
   COMPARE — the Free/Pro table
   =================================================================== */

.wpbr-compare { width: 100%; }

.wpbr-compare__yes { color: var(--wpbr-ok); font-weight: var(--wpbr-weight-semi); }

.wpbr-compare__no { color: var(--wpbr-muted-type); }

@media (max-width: 599px) {
  /* TRANSPOSES, AND STAYS A REAL TABLE. A horizontal scroller hides half the
   * comparison behind a gesture nobody discovers, and a stack of divs loses the
   * row headers a screen reader needs (B6). */
  .wpbr-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wpbr-compare tbody tr {
    display: block;
    border: 1px solid var(--wpbr-rule);
    border-radius: var(--wpbr-radius-md);
    padding: var(--wpbr-space-4);
    margin: 0 0 var(--wpbr-space-3);
    background: var(--wpbr-white);
  }
  .wpbr-compare tbody th { display: block; padding: 0 0 var(--wpbr-space-2); }
  .wpbr-compare tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--wpbr-space-3);
    padding: var(--wpbr-space-1) 0;
    border: 0;
  }
  .wpbr-compare tbody td::before {
    content: attr(data-label);
    font-size: var(--wpbr-text-sm);
    font-weight: var(--wpbr-weight-semi);
    color: var(--wpbr-muted-type);
  }
}

/* ===================================================================
   FAQ — a disclosure list
   =================================================================== */

/* `<details>` KEEPS THE ANSWER IN THE DOM WHEN CLOSED, which is why the schema
 * and the visible page cannot drift: `FAQPage` is minted over exactly these
 * pairs. A script-driven accordion that removes the answer would make the
 * schema a claim about content that is not there. */
.wpbr-faq { border-top: 1px solid var(--wpbr-rule); }

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

.wpbr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpbr-space-4);
  min-height: var(--wpbr-target);
  padding: var(--wpbr-space-3) 0;
  font-size: var(--wpbr-text-md);
  font-weight: var(--wpbr-weight-semi);
  cursor: pointer;
  list-style: none;
}

.wpbr-faq__q::-webkit-details-marker { display: none; }

.wpbr-faq__q::after {
  content: "+";
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-light);
  color: var(--wpbr-blue-type);
  flex: none;
}

.wpbr-faq__item[open] .wpbr-faq__q::after { content: "\2212"; }

.wpbr-faq__a {
  max-width: var(--wpbr-measure);
  padding: 0 0 var(--wpbr-space-5);
  line-height: 1.70;
  color: var(--wpbr-muted-type);
}

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

/* ===================================================================
   ARTICLE — the rail, the aside, related reading
   =================================================================== */

.wpbr-article { padding: var(--wpbr-space-8) 0 var(--wpbr-space-10); }

.wpbr-article__inner {
  max-width: var(--wpbr-page-max);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
  display: grid;
  gap: var(--wpbr-space-7);
}

.wpbr-article__body {
  max-width: var(--wpbr-measure);
  font-size: var(--wpbr-text-prose);
  line-height: 1.75;
}

.wpbr-article__body h2 {
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.30;
  letter-spacing: -.015em;
  margin: var(--wpbr-space-8) 0 var(--wpbr-space-4);
}

.wpbr-article__body h3 {
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.35;
  margin: var(--wpbr-space-7) 0 var(--wpbr-space-3);
}

/* UNDERLINED, because colour alone is not a link affordance in prose. */
.wpbr-article__body a {
  color: var(--wpbr-blue-type);
  text-decoration: underline;
  text-underline-offset: .12em;
}

.wpbr-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wpbr-space-3);
  font-size: var(--wpbr-text-sm);
  color: var(--wpbr-muted-type);
  margin: var(--wpbr-space-4) 0 0;
}

.wpbr-article__dek {
  font-size: var(--wpbr-text-lede);
  line-height: var(--wpbr-leading-body);
  max-width: 620px;
  color: var(--wpbr-muted-type);
  margin: var(--wpbr-space-4) 0 0;
  text-wrap: balance;
}

/* THE QUICK ANSWER IS THE VISIBLE FIRST SECTION, not a second copy of the dek.
 * The repeated-summary defect (UI audit §5.3 item 6) is why this is stated as a
 * component rather than left to an editor. */
.wpbr-quickanswer {
  background: var(--wpbr-surface-tint);
  border-left: 3px solid var(--wpbr-blue);
  border-radius: 0 var(--wpbr-radius-md) var(--wpbr-radius-md) 0;
  padding: var(--wpbr-space-5) var(--wpbr-space-6);
  margin: var(--wpbr-space-7) 0;
  max-width: var(--wpbr-measure);
}

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

.wpbr-quickanswer__label {
  font-size: var(--wpbr-text-eyebrow);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpbr-blue-type);
  margin: 0 0 var(--wpbr-space-2);
}

/* ONE SENTENCE, ONE ACTION LINK, and never an interstitial band in the prose. */
.wpbr-aside {
  background: var(--wpbr-surface-raised);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  box-shadow: var(--wpbr-shadow-raised);
  padding: var(--wpbr-space-5);
  font-size: var(--wpbr-text-base);
  line-height: 1.55;
}

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

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

.wpbr-related__item {
  padding: var(--wpbr-space-4) 0;
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-related__link {
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
}

.wpbr-related__link:hover { text-decoration: underline; }

.wpbr-rail { font-size: var(--wpbr-text-base); }

@media (min-width: 900px) {
  /* TWO STYLESHEETS BOTH LAID OUT THE ARTICLE, AND THE PLATFORM'S WON.
   *
   * `ui.css` makes `.wpbr-article` itself the two-column grid — measure plus a
   * 260px rail, with `.wpbr-rails` in column 2. That is right for a Help
   * article, which has no page wrapper. This theme puts the grid one level in,
   * on `.wpbr-article__inner`, because a marketing page also has to centre
   * against `--wpbr-page-max`.
   *
   * With both rules live, `__inner` became a grid ITEM of the platform's grid
   * and was sized to its content: the prose measured 205px on a 1440px screen,
   * on all 49 corpus pages. `.wpbr-rails` is used nowhere in this theme, so the
   * platform's rule could never place anything — it could only squeeze.
   *
   * `ui.css` is byte-identical to the platform's and is never edited, so the
   * correction is here, at equal specificity and later in the cascade.
   * `tests/provenance.php` is what keeps that true. */
  .wpbr-article {
    display: block;
    max-width: none;
    grid-template-columns: none;
    column-gap: normal;
  }

  /* THE RAIL IS SECOND IN DOM ORDER AND PLACED WITH GRID, never with `order`.
   * `order` moves the box and leaves the tab sequence behind it, which is the
   * 2.4.3 failure this rule exists to avoid. */
  .wpbr-article__inner {
    grid-template-columns: minmax(0, 1fr) var(--wpbr-rail-width);
    align-items: start;
    padding: 0 var(--wpbr-space-7);
  }

  .wpbr-article__head { grid-column: 1 / -1; }

  .wpbr-rail {
    position: sticky;
    top: 108px;
    display: grid;
    gap: var(--wpbr-space-5);
  }
}

@media (max-width: 899px) {
  /* Below the rail tier the TOC is a closed `<details>` above the body, and the
   * aside falls inline. Both stay in the same DOM position. */
  .wpbr-rail { display: contents; }
  .wpbr-toc { order: unset; margin: 0 0 var(--wpbr-space-5); }
}

/* ===================================================================
   ARCHIVE
   =================================================================== */

.wpbr-archive__intro {
  max-width: var(--wpbr-measure);
  font-size: var(--wpbr-text-md);
  line-height: 1.70;
  color: var(--wpbr-muted-type);
  margin: var(--wpbr-space-5) 0 0;
}

/* THE INTRO SLOT IS REQUIRED. An archive with no intro copy is not indexable
 * under the content plan, so an empty slot renders as a visible publication
 * blocker to an editor rather than collapsing silently into a tidy page. */
.wpbr-archive__intro--missing {
  background: var(--wpbr-surface-tint);
  border-left: 3px solid var(--wpbr-warn);
  padding: var(--wpbr-space-4) var(--wpbr-space-5);
  color: var(--wpbr-warn);
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-postrow {
  padding: var(--wpbr-space-6) 0;
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-postrow__title {
  font-size: var(--wpbr-text-h2);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.30;
  letter-spacing: -.015em;
  margin: 0;
}

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

.wpbr-postrow__summary {
  max-width: var(--wpbr-measure);
  line-height: 1.70;
  color: var(--wpbr-muted-type);
  margin: var(--wpbr-space-2) 0 0;
}

.wpbr-postrow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-3);
  font-size: var(--wpbr-text-sm);
  color: var(--wpbr-muted-type);
  margin: var(--wpbr-space-3) 0 0;
}

/* The pillar is promoted rather than sorted to the top and left to look like an
 * accident of date. Archives are not reverse-chronological card walls. */
.wpbr-postrow--pillar {
  background: var(--wpbr-surface-tint);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  padding: var(--wpbr-space-6);
  margin: 0 0 var(--wpbr-space-5);
}

@media (max-width: 599px) {
  .wpbr-postrow__summary { display: none; }
}

/* ===================================================================
   CARDS — the generic three-up act
   =================================================================== */

.wpbr-cards {
  display: grid;
  gap: var(--wpbr-space-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

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

/* PERFORMANCE EXCEPTION (spec §6). Translucency over a three-layer gradient
 * composites per card and is measurable on low-end Android. Over this ground
 * the two are indistinguishable, and one is free. */
.wpbr-cards--many .wpbr-card { background: var(--wpbr-white); }

/* SIX CARDS WANT THREE COLUMNS, NOT FOUR AND A GAP.
 *
 * `auto-fit` with a 260px minimum fits four across a wide act, which leaves a
 * six-item set as a row of four and an orphan row of two — a shape that reads
 * as "we ran out" rather than as a deliberate grid. Three columns divide six
 * exactly, and the same rule gives two columns on a tablet and one on a phone,
 * where six of anything is a list regardless. */
@media (min-width: 900px) {
  .wpbr-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 601px) and (max-width: 899px) {
  .wpbr-cards--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wpbr-card__title {
  font-size: var(--wpbr-text-h3);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.35;
  margin: 0 0 var(--wpbr-space-2);
}

/* A CARD IS NEVER WHOLLY CLICKABLE. Its title is the link, so the target is
 * named and a reader can select the text inside it. */
.wpbr-card__title a { text-decoration: none; }
.wpbr-card__title a:hover { text-decoration: underline; }

.wpbr-card__body {
  font-size: var(--wpbr-text-base);
  line-height: 1.55;
  color: var(--wpbr-muted-type);
  margin: 0;
}

/* ===================================================================
   GROUND BUDGET — enforced where it can be seen
   =================================================================== */

/* Two tinted acts in a row is the rhythm failing. This does not repair it; it
 * makes it visible in the browser rather than in a review three weeks later.
 * `tests/provenance.php` fails on it too,
 * before anybody opens a browser. */
.wpbr-act--tint + .wpbr-act--tint { outline: 3px dashed var(--wpbr-error); }

/* ===================================================================
   MOTION
   =================================================================== */

/* 2.3.3. Every transition off, the action link's arrow stops sliding, the price
 * skeleton stops shimmering, and the hero plays its final frame. There is no
 * scroll-triggered motion anywhere to disable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   SHOT VARIANTS — the homepage anchor
   =================================================================== */

/* FULL WIDTH, because the artboard's anchor is not a card inside a column: it
 * is the screen behind every answer the hero just gave, and it is given the
 * page's whole width to say so. */
.wpbr-shot--bleed {
  width: 100%;
  max-width: var(--wpbr-page-max-wide);
  margin: 32px auto 0;
  border-radius: var(--wpbr-radius-lg);
  box-shadow: 0 30px 70px rgba(18, 39, 70, .14);
}

/* THE NAVY IS THE FRAME'S, NOT THE FIGURE'S. The artboard puts it on the inner
 * frame only; the caption sits on the page ground below. Painting the whole
 * figure navy left a 13px muted caption on ink at 3.05:1 — which is what the
 * accessibility pass caught, and is why the caption is not inside the frame. */
.wpbr-shot--chrome .wpbr-shot__frame {
  background: var(--wpbr-navy);
}

.wpbr-shot--chrome { background: transparent; border-color: transparent; }

.wpbr-shot__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 var(--wpbr-space-5);
}

.wpbr-shot__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--wpbr-radius-pill);
  opacity: .5;
  flex: none;
}

.wpbr-shot__dot--a { background: var(--wpbr-danger, #B3261E); }
.wpbr-shot__dot--b { background: var(--wpbr-warn, #8A5A00); }
.wpbr-shot__dot--c { background: var(--wpbr-ok, #1F7A4D); }

.wpbr-shot__crumb {
  margin-left: 10px;
  min-width: 0;
  font-family: var(--wpbr-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12px;
  color: var(--wpbr-ice);
  /* A title bar is one line. Wrapping it doubles the chrome's height and the
   * frame stops reading as a window. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpbr-shot--bleed .wpbr-shot__caption {
  padding: 17px var(--wpbr-gutter);
  max-width: 900px;
  color: var(--wpbr-muted-type);
}

/* ===================================================================
   ACT PARTS — eyebrow, lead title, close, action
   =================================================================== */

/* THE EYEBROW IS A SECTION'S CATEGORY, not a heading. It is not an <h*> because
 * it names the act rather than titling it, and a screen reader walking headings
 * should hear the sentence, not the label above it. */
.wpbr-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpbr-blue-type);
}

.wpbr-eyebrow--onink { color: var(--wpbr-ice); }

/* The lead act's headline carries the argument, so it is set larger and to a
 * tighter measure than an ordinary act title. */
.wpbr-act__title--lead {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -.03em;
  max-width: 26ch;
  text-wrap: balance;
}

.wpbr-act__title--sub {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: -.02em;
}

/* HERO WEIGHT, and the artboard asks for it by name: the Pro act is the one
 * place below the hero where a headline runs at the hero's own scale. */
.wpbr-act__title--hero {
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.wpbr-act__close {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  max-width: 70ch;
  color: var(--wpbr-text);
}

.wpbr-act__close--onink { color: var(--wpbr-ice); font-size: 16px; line-height: 1.6; }

.wpbr-act__action { margin: 0; }

.wpbr-act__tail {
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 70ch;
  padding-top: 48px;
}

.wpbr-act__tail p { margin: 0; font-size: 17px; line-height: 1.7; }

/* 96px where the neighbours get 80: the Pro act is heavier than what surrounds
 * it, which is how the artboard marks it as the page's second anchor. */
.wpbr-act--heavy { padding-block: clamp(64px, 8vw, 96px); }

.wpbr-act__inner--mid { max-width: 1000px; }

/* ===================================================================
   MATCH LINES — a filename, a confidence, a destination
   =================================================================== */

.wpbr-matchlines {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 760px;
}

.wpbr-matchline {
  display: flex;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(18, 39, 70, .10);
}

.wpbr-matchline__file {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--wpbr-mist);
  border: 1px solid rgba(0, 109, 245, .20);
  border-radius: var(--wpbr-radius-sm, 10px);
  padding: 12px 16px;
  font-family: var(--wpbr-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 14px;
  color: var(--wpbr-text);
}

/* The dashes are the scoring, drawn: a relationship proposed rather than an
 * equals sign asserted. */
.wpbr-matchline__link {
  flex: 0 0 40px;
  height: 2px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, var(--wpbr-blue) 0 7px, transparent 7px 12px);
}

.wpbr-matchline__dot {
  width: 11px;
  height: 11px;
  border-radius: var(--wpbr-radius-pill);
  flex: none;
  margin-right: 10px;
}

.wpbr-matchline__dot--ok { background: var(--wpbr-ok, #1F7A4D); }
.wpbr-matchline__dot--warn { background: var(--wpbr-warn, #8A5A00); }

.wpbr-matchline__dest {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-sm, 10px);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: var(--wpbr-weight-semi);
  box-shadow: 0 4px 20px rgba(18, 39, 70, .04);
}

/* THE TAUGHT VARIANT, on the Pro page's ink act.
 *
 * SAME MOTIF, OPPOSITE CLAIM. The homepage's two match lines carry a
 * confidence dot because that act is about scoring; here the filename is
 * struck through and an arrow points at the destination, because the point is
 * that the question is settled and stays settled. The rule between rows has to
 * be redrawn for ink — the light-ground value is rgba(18,39,70,.10), which is
 * invisible on navy — and the destination chip is the artboard's translucent
 * blue rather than the white card it is on white. */
.wpbr-act--ink .wpbr-matchline { border-bottom-color: rgba(255, 255, 255, .14); }

.wpbr-matchlines--taught .wpbr-matchline__file {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.wpbr-matchline__arrow {
  flex: none;
  margin: 0 14px;
  font-size: 17px;
  line-height: 1;
  color: var(--wpbr-blue);
}

.wpbr-act--ink .wpbr-matchline__arrow { color: var(--wpbr-azure); }

.wpbr-act--ink .wpbr-matchlines--taught .wpbr-matchline__file {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: var(--wpbr-on-navy-soft);
}

.wpbr-act--ink .wpbr-matchlines--taught .wpbr-matchline__dest {
  background: rgba(0, 109, 245, .22);
  border-color: rgba(141, 201, 253, .34);
  color: var(--wpbr-white);
  box-shadow: none;
}

/* ===================================================================
   THE PRO EXTENSION PANEL, AND THE LIMITATION PANEL
   =================================================================== */

/* WHERE A CAPABILITY HAS A PRO EXTENSION, THE EXTENSION SITS BESIDE IT.
 *
 * NOT A CARD, ON PURPOSE. A card is a peer of the cards next to it; this is a
 * continuation of the paragraph above it, so it is inset from the left by a
 * blue rule and reads as a widening of the same thought rather than a separate
 * offer. An upsell box the reader can visually skip is an upsell box the
 * reader does skip.
 *
 * `--note` IS THE SAME COMPONENT IN THE OPPOSITE ROLE — the PDF-combine
 * limitation — and it is deliberately the same weight. A site that gives its
 * good news a designed box and its bad news a footnote has told you which one
 * it wants read. */
.wpbr-panel--more,
.wpbr-panel--note {
  background: var(--wpbr-mist);
  border: 1px solid rgba(0, 109, 245, .18);
  border-left-width: 3px;
  border-left-color: var(--wpbr-blue);
  box-shadow: none;
  margin-top: var(--wpbr-space-5);
}

.wpbr-panel--note {
  background: var(--wpbr-surface-raised);
  border-color: var(--wpbr-rule);
  border-left-color: var(--wpbr-warn, #8A5A00);
}

.wpbr-panel__eyebrow {
  margin: 0 0 var(--wpbr-space-2);
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wpbr-blue-type);
}

.wpbr-panel--note .wpbr-panel__eyebrow { color: var(--wpbr-warn, #8A5A00); }

.wpbr-panel--more p,
.wpbr-panel--note p { font-size: 16px; line-height: 1.6; }

.wpbr-panel--more .wpbr-actionlink { margin-top: var(--wpbr-space-3); }

/* ===================================================================
   THE CONFIDENCE BANDS, under the Features ink anchor
   =================================================================== */

/* CALLED OUT BENEATH THE SCREENSHOT RATHER THAN BOXED IN A SMALL CARD, which
 * is the artboard's Product-proof note in as many words. They are three
 * statements about one image, so they are typographic and share its ground
 * instead of becoming three little panels floating on ink. */
.wpbr-bands {
  list-style: none;
  margin: var(--wpbr-space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--wpbr-space-5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.wpbr-band { border-top: 2px solid rgba(141, 201, 253, .38); padding-top: var(--wpbr-space-3); }

.wpbr-band__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.3;
}

.wpbr-band__body { margin: 0; font-size: 15px; line-height: 1.55; }

.wpbr-act--ink .wpbr-band__body { color: var(--wpbr-on-navy-soft); }

/* ===================================================================
   THE FOUR-STATE TRACK
   =================================================================== */

.wpbr-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.wpbr-track__step {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
}

.wpbr-track__step:not(:first-child)::before {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 2px;
  background: var(--wpbr-blue);
}

/* THE LAST RULE IS FAINT AND THE LAST PILL IS OUTLINED, because "Replaced" is
 * the state the reader has not reached: the track shows where they are, not
 * four equal steps. */
.wpbr-track__step--last::before { background: rgba(18, 39, 70, .18); }

.wpbr-track__pill {
  font-size: 13px;
  font-weight: var(--wpbr-weight-semi);
  color: var(--wpbr-white);
  background: var(--wpbr-blue);
  border: 1px solid transparent;
  border-radius: var(--wpbr-radius-pill);
  padding: 7px 16px;
  white-space: nowrap;
}

.wpbr-track__step--last .wpbr-track__pill {
  color: #4C6280;
  background: var(--wpbr-white);
  border-color: rgba(18, 39, 70, .16);
}

/* Four short facts, genuinely parallel — which is what a card grid is for. */
.wpbr-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 13px;
}

.wpbr-fact {
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  padding: 17px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wpbr-text);
}

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

.wpbr-alias {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  max-width: 720px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(141, 201, 253, .25);
  border-radius: var(--wpbr-radius-md);
  padding: 20px 24px;
}

.wpbr-alias__from {
  font-family: var(--wpbr-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 14px;
  color: var(--wpbr-ice);
  text-decoration: line-through;
}

.wpbr-alias__arrow { color: var(--wpbr-azure); margin: 0 13px; }

.wpbr-alias__to {
  font-family: var(--wpbr-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 14px;
  font-weight: var(--wpbr-weight-semi);
  color: var(--wpbr-white);
  background: rgba(0, 109, 245, .25);
  padding: 3px 9px;
  border-radius: var(--wpbr-radius-xs);
}

.wpbr-alias__note {
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wpbr-ice);
  background: rgba(141, 201, 253, .14);
  border-radius: var(--wpbr-radius-pill);
  padding: 3px 9px;
  margin-left: 13px;
}

/* ===================================================================
   THE AUDIENCE GRID — asymmetric on purpose
   =================================================================== */

/* THE ARTBOARD RESERVES CARD GRIDS FOR "genuinely parallel low-stakes facts
 * only", and these five are not parallel: Agencies carries the argument, the
 * other four are the list beside it. A uniform grid would say they weigh the
 * same. */
.wpbr-audience {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 17px;
}

.wpbr-audience__lead {
  grid-row: span 2;
  background: var(--wpbr-navy);
  border-radius: var(--wpbr-radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpbr-audience__lead h3 { margin: 0; font-size: 20px; font-weight: var(--wpbr-weight-semi); color: var(--wpbr-white); }
.wpbr-audience__lead p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--wpbr-ice); }

.wpbr-audience__item {
  background: var(--wpbr-mist);
  border-radius: var(--wpbr-radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wpbr-audience__item h3 { margin: 0; font-size: 16px; font-weight: var(--wpbr-weight-semi); }
.wpbr-audience__item p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wpbr-muted-type); }

/* ===================================================================
   THE CLOSING ROW
   =================================================================== */

/* A ROW, NOT A STACK, AND NO HEADING. The artboard closes on one sentence, one
 * aside and one button, which is the whole act. */
.wpbr-closerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
}

.wpbr-act--close { padding-block: clamp(48px, 6vw, 70px); }

.wpbr-closerow__copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 56ch;
}

.wpbr-closerow__copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--wpbr-text); }

.wpbr-closerow__aside { font-size: 13px; line-height: 1.6; }

/* ===================================================================
   BUTTON RADIUS — the artboard's vocabulary, not one shape for everything
   =================================================================== */

/* `999px` IS THE HERO'S, NOT THE SITE'S. The artboard uses the pill for the
 * search bar, the hero's primary CTA, and status pills, dots and chips — and
 * `12px` for the header CTA and every section CTA. Shipping one radius for all
 * of them erased a distinction the design makes deliberately. `ui.css` is a
 * byte-for-byte copy of the platform's file and is not edited; the override
 * belongs here, which is the same rule §4 of the spec applies to grounds. */
.wpbr-masthead .wpbr-btn,
.wpbr-act .wpbr-btn,
.wpbr-closerow .wpbr-btn {
  border-radius: var(--wpbr-radius-md);
}

/* The hero keeps the pill, and gains the artboard's lift. */
.wpbr-actions--hero .wpbr-btn--primary {
  border-radius: var(--wpbr-radius-pill);
  padding: 13px 26px;
}

.wpbr-btn--lift { box-shadow: 0 14px 28px rgba(0, 109, 245, .16); }

/* THE MASTHEAD'S SECONDARY ACTION — an action link with no arrow.
 *
 * The arrow on `.wpbr-actionlink` means "this goes somewhere", and a download
 * does not go somewhere; it also slides on hover, which is a nice gesture in a
 * page body and a twitch in a sticky bar. `white-space: nowrap` because the
 * masthead is the one place a two-word action wrapping to two lines changes
 * the height of the whole header. */
.wpbr-actionlink--bare { white-space: nowrap; }

/* ===================================================================
   NARROW STATES for everything above
   =================================================================== */

@media (max-width: 899px) {
  .wpbr-facts { grid-template-columns: repeat(2, 1fr); }

  .wpbr-audience { grid-template-columns: 1fr 1fr; }
  .wpbr-audience__lead { grid-row: auto; grid-column: span 2; }
}

@media (max-width: 599px) {
  .wpbr-facts,
  .wpbr-audience { grid-template-columns: 1fr; }

  .wpbr-audience__lead { grid-column: auto; }

  /* THE MATCH LINE STACKS RATHER THAN SQUEEZING. Two 14px mono strings either
   * side of a 40px connector inside 320px is three illegible columns. */
  .wpbr-matchline { flex-wrap: wrap; gap: 8px; }
  .wpbr-matchline__file,
  .wpbr-matchline__dest { flex: 1 1 100%; }
  .wpbr-matchline__link { flex: 0 0 24px; margin: 0 8px 0 0; }

  .wpbr-track { gap: 8px; }
  .wpbr-track__step { flex: 0 0 auto; }
  .wpbr-track__step:not(:first-child)::before { min-width: 12px; }

  .wpbr-alias { gap: 8px; }
  .wpbr-alias__note { margin-left: 0; }

  /* The artboard's mobile anchor is a 4:3 crop held to the top-left, so the row
   * detail stays legible where a 16:9 letterbox would lose it. */
  .wpbr-shot img { aspect-ratio: 4 / 3; }
}

/* THE SAME DEFECT THE FIRST ACCESSIBILITY PASS FOUND, IN A THIRD PLACE. The
 * table of contents sits on the mist ground, and `--wpbr-blue` on mist measures
 * 4.19:1 — under AA for 15px body text. It was invisible until an article with
 * three headings existed to render a TOC at all, which the fidelity pass
 * finally seeded.
 *
 * The fix is the design spec's own §4 rule, applied a third time: a component
 * that appears on two grounds ships two explicit variants, and type on mist uses
 * `--wpbr-blue-type`. `ui.css` stays untouched. */
/* 2.5.8, AND IT ONLY BECAME REACHABLE WHEN THE CONTENTS LIST FILLED UP.
 * The rail builds itself from the article's `h2`s. While the corpus was
 * seeded as raw Markdown there were no headings to find, so the list was
 * empty and axe had nothing to measure. With real headings the first entry is
 * a 91x17px link with 23px of clear space — just under the 24px floor.
 * A block box with symmetrical padding takes every entry past it. */
.wpbr-toc a {
  color: var(--wpbr-blue-type);
  display: block;
  min-height: 24px;
  padding-block: 4px;
}

.wpbr-toc li { margin-block-end: 0; }

/* ===================================================================
   CHROME EXTENSIONS — what the marketing surface adds to ui.css
   =================================================================== */

/* The platform's footer is three columns because Help and Account have three
 * groups of links. Marketing has four, and the fourth is Legal — which is not
 * a column to drop on a narrow screen. */
@media (min-width: 900px) {
  .wpbr-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
}

/* A CTA AND THE LINE THAT SAYS WHERE IT GOES, as one unit. D88 is only legible
 * if the origin travels with the button rather than sitting under the pair. */
.wpbr-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* The lockup is a link on every page but the one it points at. */
.wpbr-masthead--site .wpbr-lockup { text-decoration: none; color: inherit; }

/* `.wpbr-main` carries its own top padding on Help and Account, where every
 * page starts with a breadcrumb. A marketing act states its own rhythm, so the
 * padding would be a gap above the hero that nothing fills. */
.wpbr-main { padding: 0; }

/* ===================================================================
   THE TINT GROUND'S TWO VARIANTS
   =================================================================== */

/* FOUND BY RUNNING AXE AGAINST THE BUILT CSS, which is why the QA checklist
 * says to measure the cascade rather than the token table. `ui.css` gives
 * `.wpbr-muted` the fill token `--wpbr-muted` and `.wpbr-actionlink` the fill
 * token `--wpbr-blue`, and both are correct on Help and Account — those hosts
 * have white and ink and nothing in between. The marketing surface introduced
 * a third ground, and on mist the two measure 4.39:1 and 4.19:1.
 *
 * THIS IS THE SPEC'S OWN RULE, APPLIED: a component that can appear on two
 * grounds ships two explicit variants and never relies on the cascade. The
 * `-type` tokens exist for exactly this pair of failures — `#45566C` at 6.74:1
 * and `#0057C7` at 5.92:1 on mist — and this is the rule that reaches for them.
 *
 * `ui.css` IS NOT EDITED TO FIX THIS. The platform file is right for the
 * platform; the marketing layer is where a marketing ground is accounted for.
 */
.wpbr-act--tint .wpbr-muted,
.wpbr-act--tint .wpbr-fine,
.wpbr-quickanswer .wpbr-muted,
.wpbr-postrow--pillar .wpbr-muted { color: var(--wpbr-muted-type); }

/* `--wpbr-blue` IS 4.19:1 ON MIST AND THE FLOOR IS 4.5. Every ground that is
 * mist rather than white takes `--wpbr-blue-type` for its type, which is the
 * whole reason that token exists. The Pro-extension panel joined this list the
 * moment it was drawn on mist — axe caught it on Features at 1280 before this
 * pass merged, which is what that check is for. */
.wpbr-act--tint .wpbr-actionlink,
.wpbr-panel--more .wpbr-actionlink,
.wpbr-quickanswer .wpbr-actionlink,
.wpbr-postrow--pillar .wpbr-actionlink { color: var(--wpbr-blue-type); }

/* The same for a plain link and for the chip, which also travel across grounds. */
.wpbr-act--tint a:not(.wpbr-btn):not(.wpbr-sitenav__link) { color: var(--wpbr-blue-type); }
.wpbr-act--tint .wpbr-chip--muted { color: var(--wpbr-text-chip); }

/* ===================================================================
   THE PAGE HEAD — the first act on a page whose opening is a title
   =================================================================== */

/* THE DEFECT WAS COMPOSITION, NOT COPY. Features, Pro, Pricing and FAQ all
 * open with breadcrumb, title and standfirst inside an ordinary act — and an
 * act states a FULL rhythm, up to 96px top and bottom, because it is built to
 * sit between other acts. At the very top of a page that produced a long empty
 * band above a breadcrumb that then floated on its own, with the title a
 * further gap below it. Three elements that are one unit read as three
 * unrelated things stacked in a lot of air.
 *
 * TIGHTER AT THE TOP, NOT PADDED FURTHER. The obvious fix — give the head a
 * generous hero padding so it looks deliberate — is the wrong one on a page
 * whose first useful sentence is the standfirst: it pushes the one thing a
 * reader came for further down. The head keeps roughly half an act's air above
 * it and a normal act's rhythm below, so the page starts where the reader's
 * eye already is.
 *
 * THE BREADCRUMB BELONGS TO THE TITLE. `ui.css` spaces it for Help and
 * Account, where a breadcrumb opens a documentation page and is a navigation
 * element in its own right. Here it is a label on the title underneath it, so
 * it sits close enough to read as one.
 *
 * SCOPED BY POSITION RATHER THAN BY A NEW CLASS, so no template changes and no
 * template can forget it. The homepage is untouched: its opening is
 * `.wpbr-hero`, which is not an act. */
.wpbr-main > .wpbr-act:first-child {
  padding-top: clamp(24px, 3.5vw, 44px);
  padding-bottom: clamp(30px, 4.5vw, 56px);
}

.wpbr-main > .wpbr-act:first-child .wpbr-crumbs {
  margin: 0 0 var(--wpbr-space-3);
}

/* BALANCED, AND WIDE ENOUGH TO STAY IN TWO LINES. 20ch was the first attempt
 * and it was wrong at this type size: a 40-character title broke into three
 * short lines stacked down the left of a 1280px act, which is the ragged,
 * half-empty composition this whole block exists to fix. 28ch lets a title of
 * that length settle into two, and `balance` decides where. */
.wpbr-main > .wpbr-act:first-child h1 {
  margin: 0;
  max-width: 28ch;
  text-wrap: balance;
}

.wpbr-main > .wpbr-act:first-child .wpbr-article__dek {
  margin-top: var(--wpbr-space-4);
}

/* AND THE ACT AFTER THE HEAD DOES NOT DOUBLE UP. Two full act paddings meeting
 * across a ground change is the widest gap on the page, in the one place that
 * should read as continuous — the head and the first thing it introduces. */
.wpbr-main > .wpbr-act:first-child + .wpbr-act {
  padding-top: clamp(36px, 5vw, 72px);
}

/* ===================================================================
   THE GUIDES HUB — six clusters, each with a door and a starting point

   TWO COLUMNS, NOT SIX ROWS. Six topic blocks stacked down a 1280px act is
   four screens of scrolling to see what the site covers, which defeats the
   point of a hub: the reader is here to choose a topic, and choosing needs
   the options visible at once.

   RAISED ON THE TINT, like `.wpbr-cards--many .wpbr-card` — the act's ground
   is tinted, so a tinted block on it has no edge.
   =================================================================== */

.wpbr-cluster {
  background: var(--wpbr-surface-raised);
  border: 1px solid var(--wpbr-rule);
  border-radius: var(--wpbr-radius-md);
  padding: var(--wpbr-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--wpbr-space-3);
}

/* `.wpbr-act h2` SETS 40px AND IT HAS TO BE OUT-SPECIFIED, not worked around.
 * That rule is right for an act's one heading; six of them in a grid at 40px is
 * a page of headlines with the guides underneath as footnotes. This is the
 * sub-title scale the rest of the site uses for a heading inside an act. */
.wpbr-act .wpbr-cluster__title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: -.02em;
  line-height: 1.3;
  max-width: none;
  margin: 0;
}

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

.wpbr-cluster__intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--wpbr-muted-type);
  max-width: var(--wpbr-measure);
}

/* THE PILLAR IS THE ONE THING IN THE BLOCK THAT IS NOT A LIST ITEM. A reader
 * who does not know the subject needs to be told which of nine articles
 * explains the rest, and a link that looks like the other five does not tell
 * them. The eyebrow above it is the label, the rule below separates it from
 * the sample. */
.wpbr-cluster__start {
  margin: 0;
  padding-bottom: var(--wpbr-space-4);
  border-bottom: 1px solid var(--wpbr-rule);
  font-size: 17px;
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.5;
}

.wpbr-cluster__start .wpbr-eyebrow { margin-bottom: 6px; }

.wpbr-cluster__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 24px MINIMUM, WCAG 2.5.8. A column of links at their natural height is a
 * stack of 20px targets with 10px between them, which is the same failure the
 * article's table of contents had.
 *
 * NO UNDERLINE UNTIL HOVER, like `.wpbr-card__title a` and the archive rows.
 * These are standalone titles in a list rather than links inside a sentence, so
 * the list is what distinguishes them; underlining all six turns a card into a
 * wall of rules. */
.wpbr-cluster__list a {
  display: block;
  min-height: 24px;
  padding-block: 2px;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}

.wpbr-cluster__list a:hover { text-decoration: underline; }

/* EACH BLOCK IS ITS OWN HEIGHT. Stretching them to match, with the action link
 * pushed to the foot, aligned the six footers and left the three-article topic
 * with 150px of nothing above its link. A row of cards that are honestly
 * different lengths reads better than a row padded to the longest one. */
.wpbr-cluster .wpbr-actionlink { padding-top: var(--wpbr-space-3); }

/* THE NOTE UNDER THE DEK TAKES THE DEK'S MEASURE. Left to itself it ran the
 * full 1280px while the sentence above it wrapped at 620, which reads as two
 * unrelated paragraphs rather than a dek and its footnote. */
.wpbr-guides-note { max-width: 620px; }

/* ONE COLUMN UNTIL THERE IS ROOM FOR TWO. At 899px a two-column grid of blocks
 * containing five link titles each gives every title three lines. */
.wpbr-guides-grid {
  display: grid;
  gap: var(--wpbr-space-5);
  align-items: start;
}

@media (min-width: 900px) {
  .wpbr-guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}