/*
 * WP Bulk Replace — marketing refresh layer.
 *
 * Reusable page-hero, feature-card, and conversion components introduced
 * during final launch acceptance. This file intentionally sits after site.css.
 */

/* Strong, reusable page hero for every marketing page except the homepage. */
.wpbr-pagehero {
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 34%, rgba(74, 163, 255, .14), transparent 34%),
    linear-gradient(180deg, var(--wpbr-white) 0%, var(--wpbr-ground) 100%);
  padding: clamp(42px, 6vw, 84px) 0 clamp(48px, 7vw, 92px);
}

.wpbr-pagehero__inner {
  max-width: var(--wpbr-page-max-wide);
  margin: 0 auto;
  padding: 0 var(--wpbr-gutter);
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}

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

.wpbr-pagehero .wpbr-crumbs {
  margin: 0 0 var(--wpbr-space-4);
}

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

.wpbr-pagehero h1 {
  margin: 0;
  max-width: 12ch;
  color: var(--wpbr-text);
  font-size: clamp(46px, 5.8vw, 76px);
  font-weight: var(--wpbr-weight-bold);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.wpbr-pagehero__lede {
  max-width: 58ch;
  margin: var(--wpbr-space-5) 0 0;
  color: var(--wpbr-muted-type);
  font-size: clamp(18px, 1.7vw, 21px);
  line-height: 1.62;
}

.wpbr-pagehero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wpbr-space-4);
  margin-top: var(--wpbr-space-6);
}

.wpbr-pagehero__actions .wpbr-btn {
  padding: 13px 26px;
  border-radius: var(--wpbr-radius-pill);
  box-shadow: 0 14px 30px rgba(0, 109, 245, .18);
}

.wpbr-pagehero__fine {
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
  font-size: 13px;
  line-height: 1.6;
}

.wpbr-pagehero__art {
  position: relative;
  min-width: 0;
}

.wpbr-pagehero__art::before {
  content: "";
  position: absolute;
  inset: 12% 6%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48, 159, 253, .18), transparent 68%);
  filter: blur(18px);
}

.wpbr-pagehero__art picture,
.wpbr-pagehero__art img {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

.wpbr-act__head--center {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wpbr-act__head--center h2,
.wpbr-act__head--center .wpbr-act__lede {
  margin-left: auto;
  margin-right: auto;
}

.wpbr-act__head--center h2 {
  max-width: 22ch;
  font-size: clamp(38px, 4.6vw, 58px);
}

.wpbr-featuregrid {
  display: grid;
  gap: var(--wpbr-space-5);
}

.wpbr-featuregrid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wpbr-featuregrid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.wpbr-featurecard {
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: 22px;
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 18px 46px rgba(18, 59, 105, .07);
}

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

.wpbr-featurecard__icon {
  display: block;
  width: 82px;
  height: 82px;
  margin: 0 0 var(--wpbr-space-4);
}

.wpbr-featurecard h3 {
  margin: 0;
  color: var(--wpbr-text);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.wpbr-featurecard p {
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-muted-type);
  font-size: 16px;
  line-height: 1.7;
}

.wpbr-featurecard .wpbr-actionlink {
  display: inline-flex;
  margin-top: var(--wpbr-space-4);
}

.wpbr-featurecard--large {
  min-height: 100%;
  padding: clamp(30px, 4vw, 44px);
}

.wpbr-pro-example__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
}

.wpbr-pro-example h2 {
  max-width: 17ch;
  font-size: clamp(40px, 5vw, 62px);
}

.wpbr-ruleexamples {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpbr-ruleexample {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
}

.wpbr-ruleexample code {
  overflow-wrap: anywhere;
  color: var(--wpbr-on-navy);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.45);
}

.wpbr-ruleexample strong {
  color: var(--wpbr-white);
  font-size: 17px;
}

.wpbr-ruleexamples > p {
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-on-navy-soft);
}

.wpbr-pro-band {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

.wpbr-pro-band__icon {
  display: block;
  width: 150px;
  height: 150px;
}

.wpbr-pro-band h2 {
  max-width: 18ch;
  font-size: clamp(38px, 4.5vw, 56px);
}

.wpbr-pro-close {
  background: var(--wpbr-white);
}

.wpbr-pro-close__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wpbr-space-7);
  align-items: center;
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--wpbr-rule);
  border-radius: 24px;
  background: linear-gradient(135deg, var(--wpbr-surface-tint), var(--wpbr-white));
  box-shadow: 0 20px 56px rgba(18, 59, 105, .08);
}

.wpbr-pro-close__panel h2 {
  max-width: 15ch;
  font-size: clamp(38px, 4.5vw, 56px);
}

.wpbr-pro-close__panel p:not(.wpbr-eyebrow--act) {
  max-width: 58ch;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
  font-size: 17px;
  line-height: 1.65;
}

.wpbr-pro-close__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpbr-space-3);
  min-width: 170px;
}

@media (max-width: 899px) {
  .wpbr-pagehero__inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .wpbr-pagehero h1 {
    max-width: 14ch;
    font-size: clamp(42px, 10vw, 62px);
  }

  .wpbr-pagehero__art {
    max-width: 760px;
    margin: 0 auto;
  }

  .wpbr-featuregrid--three,
  .wpbr-featuregrid--two {
    grid-template-columns: 1fr 1fr;
  }

  .wpbr-featuregrid--three .wpbr-featurecard:last-child {
    grid-column: 1 / -1;
  }

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

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

@media (max-width: 599px) {
  .wpbr-pagehero {
    padding-top: 28px;
  }

  .wpbr-pagehero__inner {
    gap: 24px;
  }

  .wpbr-pagehero h1 {
    font-size: clamp(40px, 13vw, 54px);
  }

  .wpbr-pagehero__art {
    width: 112%;
    margin-left: -6%;
  }

  .wpbr-featuregrid--three,
  .wpbr-featuregrid--two {
    grid-template-columns: 1fr;
  }

  .wpbr-featuregrid--three .wpbr-featurecard:last-child {
    grid-column: auto;
  }

  .wpbr-featurecard {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .wpbr-featurecard__icon {
    grid-row: 1 / span 3;
    width: 58px;
    height: 58px;
    margin: 0;
  }

  .wpbr-featurecard h3 {
    font-size: 21px;
  }

  .wpbr-featurecard p,
  .wpbr-featurecard .wpbr-actionlink {
    grid-column: 2;
  }

  .wpbr-ruleexample {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .wpbr-ruleexample > span {
    transform: rotate(90deg);
    justify-self: start;
  }

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

  .wpbr-pro-band__icon {
    width: 100px;
    height: 100px;
  }
}


/* Pricing refresh. */
.wpbr-plans--refresh {
  align-items: stretch;
  gap: var(--wpbr-space-5);
}

.wpbr-plan--refresh {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: 22px;
  padding: clamp(26px, 3.2vw, 36px);
  box-shadow: 0 18px 46px rgba(18, 59, 105, .08);
}

.wpbr-plan--refresh .wpbr-price-slot {
  margin-block: var(--wpbr-space-5);
}

.wpbr-plan--refresh .wpbr-plan__purpose {
  min-height: 3.4em;
}

.wpbr-plan__includes {
  margin: var(--wpbr-space-5) 0 var(--wpbr-space-6);
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--wpbr-text);
  font-size: 14px;
  line-height: 1.5;
}

.wpbr-plan__includes li {
  position: relative;
  padding-left: 25px;
}

.wpbr-plan__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #138a52;
  font-weight: 800;
}

.wpbr-plan--refresh > .wpbr-btn {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.wpbr-pricing__terms {
  display: grid;
  gap: 7px;
  margin-top: var(--wpbr-space-5);
  color: var(--wpbr-muted-type);
  font-size: 13px;
  line-height: 1.55;
}

.wpbr-pricing__terms p { margin: 0; }

.wpbr-freeband {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wpbr-space-7);
  align-items: center;
}

.wpbr-freeband h2 {
  max-width: 19ch;
  font-size: clamp(38px, 4.6vw, 56px);
}

.wpbr-freeband__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpbr-space-3);
  min-width: 190px;
}

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

@media (max-width: 599px) {
  .wpbr-plans--refresh { grid-template-columns: 1fr; }
  .wpbr-plan--refresh .wpbr-plan__purpose { min-height: auto; }
}


/* Features refresh. */
.wpbr-featuregrid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wpbr-featurecard__step {
  margin: 0 0 6px !important;
  color: var(--wpbr-blue-type) !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .12em;
}

.wpbr-features-review__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
  gap: var(--wpbr-space-7);
  align-items: end;
  margin-bottom: var(--wpbr-space-7);
}

.wpbr-features-review__head h2 {
  max-width: 16ch;
  font-size: clamp(40px, 5vw, 62px);
}

.wpbr-featurefacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--wpbr-space-5);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(255,255,255,.16);
}

.wpbr-featurefacts > div {
  padding: 18px;
  background: rgba(255,255,255,.06);
}

.wpbr-featurefacts strong,
.wpbr-featurefacts span {
  display: block;
}

.wpbr-featurefacts strong {
  color: var(--wpbr-white);
  font-size: 16px;
}

.wpbr-featurefacts span {
  margin-top: 5px;
  color: var(--wpbr-on-navy-soft);
  font-size: 13px;
  line-height: 1.5;
}

.wpbr-featureproof {
  margin-top: var(--wpbr-space-7);
}

.wpbr-prosplit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(42px, 7vw, 92px);
  align-items: center;
}

.wpbr-prosplit > div:first-child > .wpbr-btn {
  margin-top: var(--wpbr-space-6);
}

.wpbr-prosplit__cards {
  display: grid;
  gap: 14px;
}

.wpbr-prosplit__cards article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: var(--wpbr-space-4);
  align-items: center;
  padding: 20px;
  border: 1px solid var(--wpbr-rule);
  border-radius: 18px;
  background: var(--wpbr-surface-tint);
}

.wpbr-prosplit__cards img {
  width: 82px;
  height: 82px;
}

.wpbr-prosplit__cards h3 {
  margin: 0;
  color: var(--wpbr-text);
  font-size: 21px;
  line-height: 1.2;
}

.wpbr-prosplit__cards p {
  margin: 7px 0 0;
  color: var(--wpbr-muted-type);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1099px) {
  .wpbr-featuregrid--four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  .wpbr-features-review__head,
  .wpbr-prosplit { grid-template-columns: 1fr; }

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

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

  .wpbr-prosplit__cards article {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .wpbr-prosplit__cards img {
    width: 62px;
    height: 62px;
  }
}


/* Download Free refresh. */
.wpbr-installflow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wpbr-space-5);
  max-width: 1000px;
  margin: 0 auto;
}

.wpbr-installflow article {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--wpbr-rule);
  border-radius: 20px;
  background: var(--wpbr-white);
  box-shadow: 0 16px 40px rgba(18, 59, 105, .06);
}

.wpbr-installflow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--wpbr-space-4);
  border-radius: 50%;
  background: var(--wpbr-blue);
  color: var(--wpbr-white);
  font-weight: 800;
}

.wpbr-installflow h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

.wpbr-installflow p {
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-muted-type);
  line-height: 1.65;
}

.wpbr-download-primary {
  display: flex;
  justify-content: center;
  margin-top: var(--wpbr-space-6);
}

.wpbr-download-requirements {
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
  font-size: 13px;
  text-align: center;
}

.wpbr-freeincludes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wpbr-space-4);
}

.wpbr-freeincludes > div {
  padding: var(--wpbr-space-5);
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-freeincludes strong,
.wpbr-freeincludes span {
  display: block;
}

.wpbr-freeincludes strong {
  font-size: 20px;
  color: var(--wpbr-text);
}

.wpbr-freeincludes span {
  max-width: 48ch;
  margin-top: 7px;
  color: var(--wpbr-muted-type);
  line-height: 1.65;
}

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

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


/* Homepage polish below the existing animated hero. */
.wpbr-card--withicon {
  position: relative;
  padding-top: clamp(26px, 3vw, 34px);
}

.wpbr-card__icon {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 0 var(--wpbr-space-4);
}

.wpbr-act--ink .wpbr-act__action .wpbr-btn {
  box-shadow: 0 14px 34px rgba(48, 159, 253, .2);
}

.wpbr-audience__lead {
  box-shadow: 0 20px 46px rgba(18, 59, 105, .1);
}

@media (max-width: 599px) {
  .wpbr-card__icon {
    width: 58px;
    height: 58px;
  }
}


/* FAQ, Support, and Guides finishing pass. */
.wpbr-support-note {
  max-width: 72ch;
  margin: var(--wpbr-space-6) auto 0;
  color: var(--wpbr-muted-type);
  font-size: 14px;
  line-height: 1.65;
  text-align: center;
}

.wpbr-guidehero-art {
  position: relative;
  min-height: 410px;
}

.wpbr-guidehero-art img {
  position: absolute;
  width: clamp(120px, 15vw, 190px);
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(18, 59, 105, .12));
}

.wpbr-guidehero-art img:nth-child(1) {
  left: 8%;
  top: 17%;
  transform: rotate(-7deg);
}

.wpbr-guidehero-art img:nth-child(2) {
  right: 9%;
  top: 7%;
  transform: rotate(8deg);
}

.wpbr-guidehero-art img:nth-child(3) {
  left: 34%;
  bottom: 5%;
  transform: rotate(2deg);
}

@media (max-width: 899px) {
  .wpbr-guidehero-art {
    min-height: 300px;
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 599px) {
  .wpbr-guidehero-art { min-height: 230px; }
}


/* FINAL COMPOSITION PASS — launch acceptance 2026-10-07 */

/* The approved components were sound; the page-level problem was weight and
 * empty space. These rules compose the existing content without changing copy,
 * artwork, pricing authority, or the homepage hero. */
.wpbr-pagehero {
  padding-block: clamp(36px, 4.8vw, 68px);
}

.wpbr-pagehero__inner {
  grid-template-columns: minmax(0, .82fr) minmax(430px, 1.18fr);
  gap: clamp(28px, 4vw, 58px);
}

.wpbr-pagehero__art {
  width: 108%;
  margin-left: -4%;
}

.wpbr-pagehero__actions {
  margin-top: var(--wpbr-space-5);
}

.wpbr-act__head {
  margin-bottom: clamp(28px, 4vw, 52px);
}

/* Homepage: turn the content acts into relationships rather than a vertical
 * stack of headline -> component -> closing sentence. */
@media (min-width: 900px) {
  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
    gap: clamp(42px, 7vw, 92px);
    align-items: start;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__head {
    margin: 0;
    position: sticky;
    top: 112px;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-matchlines {
    max-width: none;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__close {
    grid-column: 1 / -1;
    max-width: 760px;
    margin-top: var(--wpbr-space-5);
  }

  body.home section[aria-labelledby="wpbr-references"] .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    gap: clamp(40px, 6vw, 82px);
    align-items: start;
  }

  body.home section[aria-labelledby="wpbr-references"] .wpbr-act__head {
    margin: 0;
  }

  body.home section[aria-labelledby="wpbr-references"] .wpbr-cards {
    margin: 0;
  }

  body.home section[aria-labelledby="wpbr-references"] .wpbr-act__close {
    grid-column: 2;
    margin-top: var(--wpbr-space-4);
  }

  body.home section[aria-labelledby="wpbr-who"] .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }

  body.home section[aria-labelledby="wpbr-who"] .wpbr-act__head {
    margin: 0;
  }

  body.home section[aria-labelledby="wpbr-who"] .wpbr-act__close {
    grid-column: 1 / -1;
  }
}

/* Pro: the first act was three cards dropped under a centred headline. Make
 * the explanation and the evidence share the same horizontal composition. */
@media (min-width: 1000px) {
  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(260px, .68fr) minmax(0, 1.62fr);
    gap: clamp(42px, 6vw, 82px);
    align-items: start;
  }

  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-act__head--center {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-act__head--center h2,
  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-act__head--center .wpbr-act__lede {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-featuregrid--three {
    gap: var(--wpbr-space-4);
  }

  body.page-template-page-pro .wpbr-pagehero--pro + .wpbr-demo + .wpbr-act .wpbr-featurecard {
    padding: clamp(22px, 2.2vw, 30px);
  }
}

/* Pricing: keep equal tiers, but stop floating them in the middle of a huge
 * pale field. The headline anchors the section and the cards carry the width. */
body.page-template-page-pricing .wpbr-pricing .wpbr-act__head--center {
  max-width: 760px;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

body.page-template-page-pricing .wpbr-pricing .wpbr-act__head--center h2,
body.page-template-page-pricing .wpbr-pricing .wpbr-act__head--center .wpbr-act__lede {
  margin-left: 0;
  margin-right: 0;
}

body.page-template-page-pricing .wpbr-pricing .wpbr-plans--refresh {
  gap: clamp(18px, 2.2vw, 30px);
}

body.page-template-page-pricing .wpbr-pricing .wpbr-plan--refresh {
  padding: clamp(28px, 3vw, 40px);
}

/* Features: the four-step workflow reads as a composed 2x2 field beside its
 * premise instead of four identical cards under another centred title. */
@media (min-width: 1000px) {
  body.page-template-page-features .wpbr-pagehero--features + .wpbr-act .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(260px, .66fr) minmax(0, 1.54fr);
    gap: clamp(44px, 6vw, 84px);
    align-items: start;
  }

  body.page-template-page-features .wpbr-pagehero--features + .wpbr-act .wpbr-act__head--center {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  body.page-template-page-features .wpbr-pagehero--features + .wpbr-act .wpbr-act__head--center h2,
  body.page-template-page-features .wpbr-pagehero--features + .wpbr-act .wpbr-act__head--center .wpbr-act__lede {
    margin-left: 0;
    margin-right: 0;
  }

  body.page-template-page-features .wpbr-pagehero--features + .wpbr-act .wpbr-featuregrid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wpbr-space-4);
  }
}

/* Support is more readable as a substantial 2x2 field than four narrow,
 * visually identical columns. */
@media (min-width: 900px) {
  body.page-template-page-support .wpbr-featuregrid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 980px;
  }

  body.page-template-page-support .wpbr-act__head--center {
    max-width: 760px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
  }

  body.page-template-page-support .wpbr-act__head--center h2,
  body.page-template-page-support .wpbr-act__head--center .wpbr-act__lede {
    margin-left: 0;
    margin-right: 0;
  }
}

/* FAQ copy should use the canvas without becoming a full-width wall of text. */
body.page-template-page-faq .wpbr-faqbody {
  max-width: 860px;
}

/* Preserve clean stacking and prevent the desktop art enlargement from causing
 * horizontal overflow on tablets and phones. */
@media (max-width: 899px) {
  .wpbr-pagehero {
    padding-block: clamp(30px, 7vw, 52px);
  }

  .wpbr-pagehero__art {
    width: 100%;
    margin-left: 0;
  }

  /* ONE COLUMN, RESTATED HERE. The unconditional two-column rule above
   * (`minmax(430px, 1.18fr)`) comes after the first ≤899px block that set one
   * column, so it won at every width: on a phone the copy got a 0px track and
   * wrapped one word per line under a 430px illustration, on every page that
   * uses this hero. */
  .wpbr-pagehero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wpbr-space-5);
  }
}

@media (max-width: 599px) {
  .wpbr-pagehero {
    padding-top: 28px;
    padding-bottom: 40px;
  }

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


/* FAQ + SUPPORT FINAL ACCEPTANCE — 2026-10-07 */

/* FAQ is deliberately prose-led. Pull the answer column toward the hero and
 * let the closing support band provide the visual change of pace. */
body.page-template-page-faq #wpbr-faq-body {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(52px, 7vw, 88px);
}

body.page-template-page-faq #wpbr-faq-body .wpbr-act__inner {
  max-width: var(--wpbr-page-max-wide);
}

body.page-template-page-faq .wpbr-faqbody {
  margin-left: 0;
  margin-right: auto;
}

/* Support: use the wide field intentionally. The route explanation anchors the
 * left rail while the four destinations form a substantial 2x2 working area.
 * This removes the empty right-hand quadrant without turning the page into
 * another centred-heading/card stack. */
@media (min-width: 1000px) {
  body.page-template-page-support section[aria-labelledby="wpbr-support-paths"] .wpbr-act__inner {
    display: grid;
    grid-template-columns: minmax(250px, .58fr) minmax(0, 1.42fr);
    gap: clamp(42px, 6vw, 82px);
    align-items: start;
  }

  body.page-template-page-support section[aria-labelledby="wpbr-support-paths"] .wpbr-act__head--center {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  body.page-template-page-support section[aria-labelledby="wpbr-support-paths"] .wpbr-featuregrid--four {
    max-width: none;
    margin: 0;
  }

  body.page-template-page-support .wpbr-support-note {
    grid-column: 2;
    max-width: 72ch;
    margin: var(--wpbr-space-5) 0 0;
    text-align: left;
  }
}

@media (max-width: 999px) {
  body.page-template-page-support section[aria-labelledby="wpbr-support-paths"] .wpbr-featuregrid--four {
    max-width: none;
  }
}

@media (max-width: 599px) {
  body.page-template-page-support .wpbr-support-note {
    margin-top: var(--wpbr-space-5);
    text-align: left;
  }

  body.page-template-page-faq #wpbr-faq-body {
    padding-top: 40px;
    padding-bottom: 52px;
  }
}


/* HEADING + COMPOSITION PASS — benchmarked launch copy */

/* Mature WordPress product pages do not need every heading to behave like a
 * poster. Shorter, descriptive headings get a calmer scale and more room for
 * the product art and UI to carry the page. */
.wpbr-pagehero h1 {
  max-width: 15ch;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.01;
  letter-spacing: -.045em;
}

.wpbr-pagehero__art {
  width: 104%;
  margin-left: -2%;
}

.wpbr-act {
  padding-block: clamp(56px, 6.5vw, 84px);
}

.wpbr-act--heavy {
  padding-block: clamp(64px, 7vw, 92px);
}

.wpbr-act__head--center h2 {
  font-size: clamp(34px, 4vw, 50px);
  max-width: 24ch;
}

.wpbr-featurecard {
  padding: clamp(22px, 2.5vw, 30px);
}

.wpbr-featurecard h3 {
  font-size: clamp(20px, 1.8vw, 25px);
}

/* Homepage: keep the left premise and right evidence together instead of
 * creating a second full-width row just for the closing paragraph. */
@media (min-width: 900px) {
  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__inner {
    grid-template-rows: auto auto;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__head {
    position: static;
    grid-column: 1;
    grid-row: 1;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-matchlines {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  body.home section[aria-labelledby="wpbr-matching"] .wpbr-act__close {
    grid-column: 1;
    grid-row: 2;
    max-width: 38ch;
    margin-top: var(--wpbr-space-4);
  }

  body.home section[aria-labelledby="wpbr-who"] .wpbr-audience {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  body.home section[aria-labelledby="wpbr-who"] .wpbr-act__close {
    grid-column: 1;
    grid-row: 2;
    max-width: 38ch;
    margin-top: var(--wpbr-space-4);
  }
}

/* Pricing cards should feel like the main object in the section rather than
 * three small cards floating inside a large tinted field. */
@media (min-width: 1000px) {
  body.page-template-page-pricing .wpbr-pricing .wpbr-plans--refresh {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-template-page-pricing .wpbr-pricing .wpbr-plan--refresh {
    min-height: 390px;
  }
}

/* The shorter Help/FAQ/Support-style titles do not need an oversized art block
 * on medium screens. */
@media (max-width: 1100px) and (min-width: 900px) {
  .wpbr-pagehero__inner {
    grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  }

  .wpbr-pagehero__art {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 899px) {
  .wpbr-pagehero h1 {
    max-width: 16ch;
    font-size: clamp(40px, 9vw, 56px);
  }

  .wpbr-act {
    padding-block: clamp(48px, 8vw, 68px);
  }
}

@media (max-width: 599px) {
  .wpbr-pagehero h1 {
    font-size: clamp(38px, 11vw, 50px);
    line-height: 1.04;
  }

  .wpbr-act__head--center h2 {
    font-size: clamp(30px, 9vw, 40px);
  }
}


/* GUIDES EDITORIAL REDESIGN — launch acceptance 2026-10-07 */

/* The Guides hero is an editorial/product illustration rather than three
 * unrelated floating file icons. It uses the same surfaces and blue hierarchy
 * as the product UI without pretending to be a screenshot. */
.wpbr-pagehero--guides .wpbr-pagehero__inner {
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
}

.wpbr-guidehero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpbr-guidehero::before {
  content: "";
  position: absolute;
  inset: 10% 3% 5%;
  background: radial-gradient(circle at center, rgba(48,159,253,.2), transparent 67%);
  filter: blur(12px);
}

.wpbr-guidehero__window {
  position: relative;
  width: min(100%, 660px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wpbr-blue) 15%, var(--wpbr-rule));
  border-radius: 24px;
  background: var(--wpbr-white);
  box-shadow: 0 30px 70px rgba(18,59,105,.14), 0 4px 14px rgba(18,59,105,.06);
  transform: rotate(-1.25deg);
}

.wpbr-guidehero__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 22px;
  border-bottom: 1px solid var(--wpbr-rule);
  background: color-mix(in srgb, var(--wpbr-surface-tint) 70%, white);
  color: var(--wpbr-text);
  font-size: 14px;
}

.wpbr-guidehero__dots {
  display: flex;
  gap: 6px;
}

.wpbr-guidehero__dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--wpbr-blue) 28%, white);
}

.wpbr-guidehero__dots i:nth-child(2) { background: color-mix(in srgb, var(--wpbr-blue) 45%, white); }
.wpbr-guidehero__dots i:nth-child(3) { background: var(--wpbr-blue); }

.wpbr-guidehero__body {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  min-height: 300px;
}

.wpbr-guidehero__nav {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 24px 16px;
  border-right: 1px solid var(--wpbr-rule);
  background: var(--wpbr-surface-tint);
}

.wpbr-guidehero__nav span {
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--wpbr-muted-type);
  font-size: 13px;
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-guidehero__nav .is-active {
  background: var(--wpbr-white);
  color: var(--wpbr-blue-type);
  box-shadow: 0 5px 14px rgba(18,59,105,.06);
}

.wpbr-guidehero__feature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 36px;
}

.wpbr-guidehero__eyebrow {
  margin-bottom: 10px;
  color: var(--wpbr-blue-type);
  font-size: 12px;
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wpbr-guidehero__feature > strong {
  max-width: 18ch;
  color: var(--wpbr-text);
  font-size: clamp(22px, 2.4vw, 31px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.wpbr-guidehero__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
}

.wpbr-guidehero__steps span {
  padding: 8px 10px;
  border: 1px solid var(--wpbr-rule);
  border-radius: 9px;
  background: var(--wpbr-surface-tint);
  color: var(--wpbr-text);
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-guidehero__steps b {
  color: var(--wpbr-blue);
  font-size: 15px;
}

.wpbr-guidehero__stat {
  position: absolute;
  right: -2%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--wpbr-blue) 18%, var(--wpbr-rule));
  border-radius: 18px;
  background: var(--wpbr-white);
  box-shadow: 0 18px 40px rgba(18,59,105,.12);
  transform: rotate(2deg);
}

.wpbr-guidehero__stat strong {
  color: var(--wpbr-text);
  font-size: 32px;
  line-height: 1;
}

.wpbr-guidehero__stat span {
  margin-top: 5px;
  color: var(--wpbr-muted-type);
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
}

/* Editorial section heading: premise on the left, explanation on the right. */
.wpbr-guides-intro {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(320px, 1.2fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: end;
  margin-bottom: clamp(30px, 4.5vw, 54px);
}

.wpbr-guides-intro h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.03;
  letter-spacing: -.04em;
}

.wpbr-guides-intro > p {
  max-width: 64ch;
  margin: 0;
  color: var(--wpbr-muted-type);
  font-size: 18px;
  line-height: 1.7;
}

.wpbr-guide-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.5vw, 30px);
}

.wpbr-guide-featured__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(26px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--wpbr-rule);
  border-radius: 22px;
  background: var(--wpbr-white);
  box-shadow: 0 16px 42px rgba(18,59,105,.07);
}

.wpbr-guide-featured__card::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -60px;
  top: -65px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48,159,253,.16), transparent 68%);
}

.wpbr-guide-featured__meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--wpbr-blue-type);
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .02em;
}

.wpbr-guide-featured__card h3 {
  margin: var(--wpbr-space-4) 0 0;
  font-size: clamp(23px, 2.2vw, 29px);
  line-height: 1.16;
  letter-spacing: -.025em;
}

.wpbr-guide-featured__card h3 a {
  color: var(--wpbr-text);
  text-decoration: none;
}

.wpbr-guide-featured__card h3 a:hover { text-decoration: underline; }

.wpbr-guide-featured__card > p {
  flex: 1;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
  line-height: 1.7;
}

.wpbr-guide-featured__card .wpbr-actionlink {
  margin-top: var(--wpbr-space-5);
}

/* A directory, not a second card wall. Each row answers: what is this topic,
 * where do I start, and what else is inside it. */
.wpbr-guide-directory {
  overflow: hidden;
  border: 1px solid var(--wpbr-rule);
  border-radius: 24px;
  background: var(--wpbr-white);
  box-shadow: 0 18px 50px rgba(18,59,105,.06);
}

.wpbr-guide-directory__row {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 80px);
  padding: clamp(28px, 4vw, 44px);
}

.wpbr-guide-directory__row + .wpbr-guide-directory__row {
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-guide-directory__count {
  margin: 0 0 8px;
  color: var(--wpbr-blue-type);
  font-size: 12px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wpbr-guide-directory__topic h3 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.wpbr-guide-directory__topic h3 a {
  color: var(--wpbr-text);
  text-decoration: none;
}

.wpbr-guide-directory__topic h3 a:hover { text-decoration: underline; }

.wpbr-guide-directory__topic > p:last-child {
  max-width: 52ch;
  margin: var(--wpbr-space-3) 0 0;
  color: var(--wpbr-muted-type);
  line-height: 1.65;
}

.wpbr-guide-directory__links {
  min-width: 0;
}

.wpbr-guide-directory__start {
  margin: 0;
  padding-bottom: var(--wpbr-space-4);
  border-bottom: 1px solid var(--wpbr-rule);
}

.wpbr-guide-directory__start span {
  display: block;
  margin-bottom: 6px;
  color: var(--wpbr-blue-type);
  font-size: 11px;
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wpbr-guide-directory__start a {
  color: var(--wpbr-text);
  font-size: 17px;
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.45;
}

.wpbr-guide-directory__links ul {
  display: grid;
  gap: 9px;
  margin: var(--wpbr-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.wpbr-guide-directory__links li a {
  color: var(--wpbr-muted-type);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
}

.wpbr-guide-directory__links li a:hover {
  color: var(--wpbr-blue-type);
  text-decoration: underline;
}

.wpbr-guide-directory__links .wpbr-actionlink {
  margin-top: var(--wpbr-space-4);
}

.wpbr-guides-close__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
}

.wpbr-guides-close h2 {
  max-width: 17ch;
  margin: 0;
  font-size: clamp(38px, 4.7vw, 58px);
}

.wpbr-guides-close p:not(.wpbr-eyebrow--act) {
  max-width: 60ch;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-on-navy-soft);
  font-size: 17px;
  line-height: 1.65;
}

.wpbr-guides-close__actions {
  display: flex;
  min-width: 190px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpbr-space-3);
}

/* Guide article: wide editorial head, comfortable reading measure, purposeful
 * sticky rail, then related reading as its own closing act. */
.wpbr-article {
  padding: clamp(36px, 5vw, 64px) 0 clamp(64px, 8vw, 104px);
  background:
    radial-gradient(circle at 86% 14%, rgba(48,159,253,.08), transparent 30%),
    var(--wpbr-ground);
}

.wpbr-article__inner {
  width: 100%;
  max-width: var(--wpbr-page-max-wide);
  margin: 0 auto;
  /* One shrinkable column on narrow screens: an implicit `auto` column grows to the widest
     unbreakable content (a long code line or table) and pushes the page past a 320px viewport. */
  grid-template-columns: minmax(0, 1fr);
}

.wpbr-article__head {
  max-width: 980px;
  margin-bottom: clamp(30px, 4.5vw, 52px);
}

.wpbr-article__headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpbr-space-4);
  margin-bottom: var(--wpbr-space-4);
}

.wpbr-article__head .wpbr-chip {
  margin: 0;
}

.wpbr-article__allguides {
  color: var(--wpbr-blue-type);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  text-decoration: none;
}

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

.wpbr-article__head h1 {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wpbr-article__dek {
  max-width: 66ch;
  font-size: 20px;
  line-height: 1.65;
}

.wpbr-article__body {
  max-width: 780px;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--wpbr-rule);
  border-radius: 22px;
  background: var(--wpbr-white);
  box-shadow: 0 18px 50px rgba(18,59,105,.06);
}

.wpbr-article__body.wpbr-prose {
  font-size: 17px;
}

.wpbr-article__body.wpbr-prose p,
.wpbr-article__body.wpbr-prose li {
  line-height: 1.78;
}

.wpbr-article__body.wpbr-prose h2 {
  scroll-margin-top: 120px;
  margin-top: clamp(44px, 6vw, 66px);
  font-size: clamp(28px, 3.1vw, 36px);
  line-height: 1.15;
}

.wpbr-article__body.wpbr-prose h3 {
  margin-top: var(--wpbr-space-6);
  font-size: 22px;
  line-height: 1.25;
}

.wpbr-quickanswer {
  margin: 0 0 clamp(36px, 5vw, 52px);
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid color-mix(in srgb, var(--wpbr-blue) 18%, var(--wpbr-rule));
  border-left: 4px solid var(--wpbr-blue);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--wpbr-surface-tint), var(--wpbr-white));
}

.wpbr-rail {
  font-size: 14px;
}

.wpbr-toc,
.wpbr-article-navcard,
.wpbr-aside {
  border: 1px solid var(--wpbr-rule);
  border-radius: 16px;
  background: var(--wpbr-white);
  box-shadow: 0 12px 34px rgba(18,59,105,.06);
}

.wpbr-toc {
  padding: 18px 20px;
}

.wpbr-toc summary {
  color: var(--wpbr-text);
  font-size: 14px;
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-toc ul {
  margin-top: var(--wpbr-space-3);
}

.wpbr-toc a {
  color: var(--wpbr-blue-type);
  line-height: 1.45;
}

.wpbr-article-navcard {
  padding: 20px;
}

.wpbr-article-navcard > strong {
  display: block;
  color: var(--wpbr-text);
  font-size: 17px;
  line-height: 1.3;
}

.wpbr-article-navcard .wpbr-actionlink {
  margin-top: var(--wpbr-space-3);
}

.wpbr-article-next {
  grid-column: 1 / -1;
  margin-top: clamp(54px, 7vw, 84px);
  padding-top: clamp(38px, 5vw, 56px);
  border-top: 1px solid var(--wpbr-rule);
}

.wpbr-article-next__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--wpbr-space-5);
  margin-bottom: var(--wpbr-space-5);
}

.wpbr-article-next__head h2 {
  margin: 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
}

.wpbr-article-next__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wpbr-space-4);
}

.wpbr-related-card {
  padding: var(--wpbr-space-5);
  border: 1px solid var(--wpbr-rule);
  border-radius: 18px;
  background: var(--wpbr-white);
  box-shadow: 0 12px 34px rgba(18,59,105,.05);
}

.wpbr-related-card > p {
  margin: 0;
  color: var(--wpbr-blue-type);
  font-size: 11px;
  font-weight: var(--wpbr-weight-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wpbr-related-card h3 {
  margin: var(--wpbr-space-3) 0 0;
  font-size: 20px;
  line-height: 1.3;
}

.wpbr-related-card h3 a {
  color: var(--wpbr-text);
  text-decoration: none;
}

.wpbr-related-card h3 a:hover { text-decoration: underline; }

.wpbr-related-card > span {
  display: block;
  margin-top: var(--wpbr-space-4);
  color: var(--wpbr-muted-type);
  font-size: 12px;
}

@media (min-width: 900px) {
  .wpbr-article__inner {
    display: grid;
    grid-template-columns: minmax(0, 780px) minmax(260px, 300px);
    column-gap: clamp(34px, 5vw, 64px);
    justify-content: center;
    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-4);
  }
}

@media (max-width: 999px) {
  .wpbr-guide-featured {
    grid-template-columns: 1fr 1fr;
  }

  .wpbr-guide-featured__card:last-child {
    grid-column: 1 / -1;
  }

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

@media (max-width: 899px) {
  .wpbr-pagehero--guides .wpbr-pagehero__inner,
  .wpbr-guides-intro,
  .wpbr-guide-directory__row {
    grid-template-columns: 1fr;
  }

  .wpbr-guidehero {
    min-height: 340px;
    max-width: 660px;
    margin: 0 auto;
  }

  .wpbr-guidehero__stat {
    right: 3%;
  }

  .wpbr-article__inner {
    padding: 0 var(--wpbr-gutter);
  }

  .wpbr-rail {
    display: grid;
    gap: var(--wpbr-space-4);
    margin-top: var(--wpbr-space-5);
  }

  .wpbr-toc {
    margin: 0;
  }

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

  .wpbr-related-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 599px) {
  .wpbr-guidehero {
    min-height: 290px;
  }

  .wpbr-guidehero__body {
    grid-template-columns: 1fr;
    min-height: 240px;
  }

  .wpbr-guidehero__nav {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--wpbr-rule);
    padding: 12px;
  }

  .wpbr-guidehero__feature {
    padding: 24px;
  }

  .wpbr-guidehero__steps b {
    display: none;
  }

  .wpbr-guidehero__stat {
    min-width: 120px;
    padding: 12px 16px;
  }

  .wpbr-guide-featured,
  .wpbr-article-next__grid {
    grid-template-columns: 1fr;
  }

  .wpbr-guide-featured__card:last-child,
  .wpbr-related-card:last-child {
    grid-column: auto;
  }

  .wpbr-guide-directory__row {
    padding: 24px 20px;
  }

  .wpbr-article__headrow,
  .wpbr-article-next__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .wpbr-article__head h1 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .wpbr-article__body {
    padding: 24px 20px;
    border-radius: 16px;
  }
}


/* GUIDES HERO ART + CONVERSION CLOSE — final visual integration */

.wpbr-pagehero__art--guides {
  width: 108%;
  margin-left: -4%;
}

.wpbr-pagehero__art--guides::before {
  inset: 8% 4%;
}

.wpbr-pagehero__art--guides picture,
.wpbr-pagehero__art--guides img {
  display: block;
  width: 100%;
  height: auto;
}

/* The Guides close should advance commercial intent, not create a second dark
 * footer or make Free the dominant next action. */
.wpbr-guides-close {
  background: var(--wpbr-white);
  padding-block: clamp(54px, 6vw, 78px);
}

.wpbr-guides-close__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(30px, 6vw, 80px);
  align-items: center;
  padding: clamp(30px, 4.5vw, 50px);
  border: 1px solid var(--wpbr-rule);
  border-radius: 24px;
  background:
    radial-gradient(circle at 86% 22%, rgba(48,159,253,.12), transparent 33%),
    linear-gradient(135deg, var(--wpbr-surface-tint), var(--wpbr-white));
  box-shadow: 0 20px 54px rgba(18,59,105,.08);
}

.wpbr-guides-close h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--wpbr-text);
  font-size: clamp(36px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -.035em;
}

.wpbr-guides-close p:not(.wpbr-eyebrow--act) {
  max-width: 62ch;
  margin: var(--wpbr-space-4) 0 0;
  color: var(--wpbr-muted-type);
  font-size: 17px;
  line-height: 1.65;
}

.wpbr-guides-close__actions {
  display: flex;
  min-width: 190px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpbr-space-3);
}

.wpbr-guides-close__actions .wpbr-actionlink {
  color: var(--wpbr-blue-type);
}

/* The new Pricing art is intentionally taller and tells the ROI story. Let it
 * breathe without making the copy column smaller. */
.wpbr-pagehero--pricing .wpbr-pagehero__art {
  width: 112%;
  margin-left: -6%;
}

@media (max-width: 999px) {
  .wpbr-guides-close__panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 899px) {
  .wpbr-pagehero__art--guides,
  .wpbr-pagehero--pricing .wpbr-pagehero__art {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 599px) {
  .wpbr-guides-close__panel {
    padding: 26px 22px;
    border-radius: 18px;
  }
}


/* ===================================================================
   DOWNLOAD — the Free edition page (page-download.php)
   ===================================================================
 *
 * Built from the approved design packet (docs/design/free-download/) on the
 * site's own components: the page hero, act grounds and section heads come
 * from above; only what the page has that no other page has is here — the
 * screenshot crops, the video player, the workflow rows, the download panel
 * and the viewer.
 *
 * IN THIS FILE, NOT A FILE OF ITS OWN. It shipped first as download.css; a
 * deploy that did not carry that one file left the page as bare HTML with
 * every screenshot at full size. Every marketing page loads this layer.
 */

.wpbr-dl-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* -- Screenshot crops ---------------------------------------------------
 * The frame is the crop rectangle's aspect ratio; the full image sits inside
 * at natural proportions, scaled and shifted by percentages (custom properties
 * written by template-parts/crop.php). Desktop and phone have different rects,
 * chosen so text stays legible. */

.wpbr-crop {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wpbr-space-3);
  min-width: 0;
}

.wpbr-crop__open {
  --ar: var(--d-ar);
  --iw: var(--d-iw);
  --ml: var(--d-ml);
  --mt: var(--d-mt);
  display: block;
  overflow: hidden;
  border: 1px solid var(--wpbr-rule);
  border-radius: 16px;
  background: var(--wpbr-white);
  box-shadow: 0 24px 60px rgba(18, 39, 70, .10), 0 2px 6px rgba(18, 39, 70, .05);
  text-decoration: none;
  cursor: zoom-in;
  transition: border-color var(--wpbr-dur) var(--wpbr-ease);
}

.wpbr-crop__open:hover { border-color: var(--wpbr-blue); }

.wpbr-crop__view {
  display: block;
  aspect-ratio: var(--ar);
  overflow: hidden;
}

.wpbr-crop__view img {
  display: block;
  width: var(--iw);
  max-width: none;
  height: auto;
  margin-left: var(--ml);
  margin-top: var(--mt);
}

.wpbr-crop__chip {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  background: var(--wpbr-navy);
  color: var(--wpbr-white);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-crop__caption {
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
  color: var(--wpbr-muted-type);
  max-width: 80ch;
}

/* -- Video ------------------------------------------------------------- */

.wpbr-dl-video .wpbr-act__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wpbr-space-7);
}

.wpbr-dl-video__head { text-align: center; max-width: 640px; }
.wpbr-dl-video__head h2 { margin-inline: auto; }
.wpbr-dl-video__head .wpbr-act__lede { margin-inline: auto; }

.wpbr-dl-player {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(141, 201, 253, .35);
  background: #0B1B33;
}

.wpbr-dl-player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0B1B33;
}

.wpbr-dl-player__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--wpbr-white);
  background: linear-gradient(180deg, rgba(18, 39, 70, .10), rgba(18, 39, 70, .68));
}
.wpbr-dl-player__play[hidden] { display: none; }

.wpbr-dl-player__disc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 88px;
  height: 88px;
  border-radius: var(--wpbr-radius-pill);
  border: 3px solid var(--wpbr-ice);
  background: var(--wpbr-blue);
  font-size: 28px;
  padding-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--wpbr-dur) var(--wpbr-ease);
}
.wpbr-dl-player__play:hover .wpbr-dl-player__disc { background: var(--wpbr-blue-dark); }

.wpbr-dl-player__bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wpbr-space-3);
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}

.wpbr-dl-player__time {
  font-size: var(--wpbr-text-sm);
  border: 1px solid var(--wpbr-ice);
  border-radius: 6px;
  padding: 3px 8px;
}

.wpbr-dl-video__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wpbr-space-2) var(--wpbr-space-6);
  margin: 0;
}
.wpbr-dl-video .wpbr-actionlink { color: var(--wpbr-ice); }

/* -- B–C — Workflow ------------------------------------------------------- */

.wpbr-dl-flow .wpbr-act__inner { display: flex; flex-direction: column; gap: 56px; }

.wpbr-dl-flow__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wpbr-space-8);
  align-items: end;
}
.wpbr-dl-flow__head h2 { max-width: 20ch; }
.wpbr-dl-flow__head .wpbr-act__lede { margin: 0; }

.wpbr-dl-rail {
  display: grid;
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
  align-items: center;
  gap: var(--wpbr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
}
.wpbr-dl-rail::before {
  content: "";
  position: absolute;
  left: 17px;
  right: 17px;
  top: 50%;
  border-top: 2px solid var(--wpbr-rule);
}
.wpbr-dl-rail li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  background: var(--wpbr-white);
}
.wpbr-dl-rail li:last-child { padding-right: 0; padding-left: 12px; }

.wpbr-dl-rail span,
.wpbr-dl-steps-compact span,
.wpbr-dl-numbered li::before {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--wpbr-radius-pill);
  background: var(--wpbr-blue);
  color: var(--wpbr-white);
  font-weight: var(--wpbr-weight-semi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wpbr-dl-steps-compact { display: none; }

.wpbr-dl-steps--pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wpbr-space-8);
  align-items: start;
}

.wpbr-dl-steps--shot {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--wpbr-space-8);
  align-items: center;
}
.wpbr-dl-steps__stack { display: flex; flex-direction: column; gap: var(--wpbr-space-7); }

.wpbr-dl-step h3 {
  margin: 0 0 var(--wpbr-space-3);
  font-size: 22px;
  font-weight: var(--wpbr-weight-semi);
  letter-spacing: -.015em;
}
.wpbr-dl-step__n { color: var(--wpbr-blue-type); }
.wpbr-dl-step p {
  margin: 0;
  font-size: var(--wpbr-text-md);
  line-height: 1.7;
  color: var(--wpbr-muted-type);
}

.wpbr-dl-step__aside {
  align-self: center;
  margin: 0;
  font-size: var(--wpbr-text-md);
  line-height: 1.7;
  color: var(--wpbr-muted-type);
}

.wpbr-dl-slidelink {
  font-weight: var(--wpbr-weight-semi);
  color: var(--wpbr-blue-type);
  text-underline-offset: .12em;
}

.wpbr-dl-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  margin: var(--wpbr-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.wpbr-dl-files li {
  font-family: var(--wpbr-font-mono);
  font-size: var(--wpbr-text-sm);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--wpbr-mist);
  overflow-wrap: anywhere;
}

.wpbr-dl-matches {
  width: 100%;
  margin: var(--wpbr-space-4) 0 0;
  border-collapse: collapse;
  font-size: var(--wpbr-text-sm);
}
.wpbr-dl-matches td {
  padding: 7px 0;
  border-bottom: 1px solid var(--wpbr-rule-soft);
  vertical-align: middle;
}
.wpbr-dl-matches td + td { padding-left: var(--wpbr-space-3); }
.wpbr-dl-matches td:nth-child(2) { font-weight: var(--wpbr-weight-semi); }
.wpbr-dl-matches td:last-child { text-align: right; white-space: nowrap; }
.wpbr-dl-matches code { font-size: var(--wpbr-text-sm); overflow-wrap: anywhere; }

.wpbr-dl-score { font-weight: var(--wpbr-weight-semi); }
.wpbr-dl-score::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: var(--wpbr-radius-pill);
  background: currentColor;
}
.wpbr-dl-score--high { color: var(--wpbr-ok); }
.wpbr-dl-score--medium { color: var(--wpbr-warn); }
.wpbr-dl-score--low { color: var(--wpbr-error); }

.wpbr-dl-note {
  margin: var(--wpbr-space-3) 0 0;
  font-size: var(--wpbr-text-sm);
  line-height: 1.5;
  color: var(--wpbr-muted-type);
}

.wpbr-dl-mobile-only { display: none; }

/* -- F — Safety ------------------------------------------------------- */

.wpbr-dl-safety__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: start;
}
.wpbr-dl-safety__intro { display: flex; flex-direction: column; gap: 0; }
.wpbr-dl-safety__intro .wpbr-act__lede { max-width: 44ch; }
.wpbr-dl-safety__intro .wpbr-crop { margin-top: var(--wpbr-space-6); }

.wpbr-dl-ruled { margin: 0; border-top: 1px solid rgba(18, 39, 70, .18); }
.wpbr-dl-ruled > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--wpbr-space-5);
  padding: 22px 0;
  border-bottom: 1px solid rgba(18, 39, 70, .18);
}
.wpbr-dl-ruled dt { font-size: var(--wpbr-text-md); font-weight: var(--wpbr-weight-semi); }
.wpbr-dl-ruled dd { margin: 0; font-size: var(--wpbr-text-base); line-height: 1.65; color: var(--wpbr-muted-type); }

/* -- G — Free and Pro ------------------------------------------------- */

.wpbr-dl-editions h2 { max-width: 30ch; }

.wpbr-dl-editions__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  margin-top: var(--wpbr-space-7);
}
.wpbr-dl-editions h3 { margin: 0 0 var(--wpbr-space-4); font-size: var(--wpbr-text-md); font-weight: var(--wpbr-weight-semi); }

.wpbr-dl-checks,
.wpbr-dl-plain {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wpbr-text-base);
}
.wpbr-dl-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--wpbr-space-6); }
.wpbr-dl-checks li,
.wpbr-dl-plain li {
  padding: 10px 0;
  border-bottom: 1px solid var(--wpbr-rule-soft);
}
.wpbr-dl-checks li::before {
  content: "\2713";
  color: var(--wpbr-ok);
  font-weight: var(--wpbr-weight-bold);
  margin-right: 10px;
}
.wpbr-dl-plain { margin-bottom: var(--wpbr-space-5); }

/* -- H — Download ------------------------------------------------------- */

.wpbr-dl-get__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--wpbr-space-8);
  padding: var(--wpbr-space-8);
  background: var(--wpbr-white);
  border: 1px solid var(--wpbr-rule);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(18, 39, 70, .08);
}

.wpbr-dl-get__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wpbr-space-4); min-width: 0; }
.wpbr-dl-get__main .wpbr-dl-note { margin: 0; }

.wpbr-dl-facts {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: var(--wpbr-space-3) 0 0;
  font-size: var(--wpbr-text-base);
}
.wpbr-dl-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: var(--wpbr-space-3); }
.wpbr-dl-facts dt { color: var(--wpbr-muted-type); font-weight: var(--wpbr-weight-semi); }
.wpbr-dl-facts dd { margin: 0; min-width: 0; }
.wpbr-dl-hash { font-size: var(--wpbr-text-sm); overflow-wrap: anywhere; }

.wpbr-dl-get__install {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wpbr-space-4);
  padding: var(--wpbr-space-6);
  border-radius: 12px;
  background: var(--wpbr-mist);
}
.wpbr-dl-get__install h3 { margin: 0; font-size: 20px; font-weight: var(--wpbr-weight-semi); }

.wpbr-dl-numbered {
  counter-reset: wpbr-step;
  display: flex;
  flex-direction: column;
  gap: var(--wpbr-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--wpbr-text-base);
}
.wpbr-dl-numbered li {
  counter-increment: wpbr-step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--wpbr-space-3);
  align-items: start;
  line-height: 1.55;
}
.wpbr-dl-numbered li::before {
  content: counter(wpbr-step);
  width: 28px;
  height: 28px;
  font-size: var(--wpbr-text-sm);
}

.wpbr-dl-warn {
  margin: 0;
  padding: var(--wpbr-space-3) var(--wpbr-space-4);
  border-left: 3px solid var(--wpbr-warn);
  background: var(--wpbr-white);
  color: var(--wpbr-warn);
  font-size: var(--wpbr-text-sm);
  font-weight: var(--wpbr-weight-semi);
  line-height: 1.5;
}

/* -- I–J — Support ------------------------------------------------------- */

.wpbr-dl-support__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
}

.wpbr-dl-links { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(18, 39, 70, .18); }
.wpbr-dl-links a {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: var(--wpbr-space-4);
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(18, 39, 70, .18);
  color: var(--wpbr-text);
  text-decoration: none;
}
.wpbr-dl-links strong { color: var(--wpbr-blue-type); font-weight: var(--wpbr-weight-semi); }
.wpbr-dl-links span { font-size: var(--wpbr-text-base); color: var(--wpbr-muted-type); }
.wpbr-dl-links .wpbr-dl-links__arrow { color: var(--wpbr-blue-type); transition: transform var(--wpbr-dur) var(--wpbr-ease); }
.wpbr-dl-links a:hover strong { text-decoration: underline; }
.wpbr-dl-links a:hover .wpbr-dl-links__arrow { transform: translateX(4px); }

.wpbr-dl-status {
  margin: var(--wpbr-space-8) 0 0;
  max-width: 90ch;
  font-size: var(--wpbr-text-sm);
  line-height: 1.6;
  color: var(--wpbr-muted-type);
}

/* -- The viewer --------------------------------------------------------- */

.wpbr-lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0B1B33;
  color: var(--wpbr-white);
}
.wpbr-lightbox[open] { display: flex; flex-direction: column; }
.wpbr-lightbox::backdrop { background: rgba(11, 27, 51, .6); }

.wpbr-lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--wpbr-space-4);
  padding: 10px var(--wpbr-space-5);
  background: var(--wpbr-navy);
}
.wpbr-lightbox__title { margin: 0; font-size: var(--wpbr-text-md); font-weight: var(--wpbr-weight-semi); color: var(--wpbr-white); }
.wpbr-lightbox__count { margin: 0 auto 0 0; font-size: var(--wpbr-text-base); color: var(--wpbr-ice); }

.wpbr-lightbox button {
  min-height: var(--wpbr-target);
  min-width: var(--wpbr-target);
  padding: 0 var(--wpbr-space-4);
  border: 1px solid rgba(141, 201, 253, .5);
  border-radius: var(--wpbr-radius-pill);
  background: transparent;
  color: var(--wpbr-white);
  font: inherit;
  font-size: var(--wpbr-text-base);
  font-weight: var(--wpbr-weight-semi);
  cursor: pointer;
}
.wpbr-lightbox button:hover { border-color: var(--wpbr-white); }
.wpbr-lightbox button:focus-visible { outline: var(--wpbr-focus-width) solid var(--wpbr-azure); outline-offset: 3px; }

.wpbr-lightbox__stage {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wpbr-space-3);
  padding: var(--wpbr-space-4);
}

.wpbr-lightbox__figure {
  margin: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wpbr-space-3);
  overflow: auto;
}
.wpbr-lightbox__img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100% - 3em);
  width: auto;
  height: auto;
  object-fit: contain;
  background: var(--wpbr-white);
  border-radius: 6px;
}
.wpbr-lightbox--wide .wpbr-lightbox__img { max-height: none; width: 100%; }
.wpbr-lightbox__caption { font-size: var(--wpbr-text-base); color: var(--wpbr-ice); text-align: center; max-width: 80ch; }

/* -- Below the desktop grid -------------------------------------------- */

@media (max-width: 899px) {
  .wpbr-dl-flow__head,
  .wpbr-dl-steps--pair,
  .wpbr-dl-steps--shot,
  .wpbr-dl-safety__grid,
  .wpbr-dl-editions__grid,
  .wpbr-dl-get__panel,
  .wpbr-dl-support__grid { grid-template-columns: minmax(0, 1fr); }
  .wpbr-dl-flow__head { align-items: start; gap: var(--wpbr-space-4); }
  .wpbr-dl-rail { display: none; }
  .wpbr-dl-steps-compact {
    display: flex;
    flex-direction: column;
    gap: var(--wpbr-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .wpbr-dl-steps-compact li { display: grid; grid-template-columns: 34px 1fr; gap: var(--wpbr-space-3); }
  .wpbr-dl-steps-compact p { margin: 0; padding-top: 4px; font-size: var(--wpbr-text-md); line-height: 1.55; }
  .wpbr-dl-steps-compact strong { font-weight: var(--wpbr-weight-semi); }
  .wpbr-dl-flow .wpbr-act__inner { gap: var(--wpbr-space-7); }
}

/* -- Phone: the packet's mobile artboard ----------------------------- */

@media (max-width: 599px) {
  .wpbr-dl-flow .wpbr-crop__caption { display: none; }
  .wpbr-crop__open {
    --ar: var(--m-ar);
    --iw: var(--m-iw);
    --ml: var(--m-ml);
    --mt: var(--m-mt);
    border-radius: 12px;
  }
  .wpbr-crop--desktop-only { display: none; }


  .wpbr-dl-video .wpbr-act__inner { align-items: stretch; gap: var(--wpbr-space-5); }
  .wpbr-dl-player { border-radius: 12px; }
  .wpbr-dl-player__disc { width: 64px; height: 64px; font-size: 22px; padding-left: 4px; }
  .wpbr-dl-player__bar { left: auto; right: 10px; bottom: 10px; }
  .wpbr-dl-player__bar > span:first-child { display: none; }
  .wpbr-dl-video__links { flex-direction: column; justify-content: flex-start; }
  .wpbr-dl-video__links .wpbr-actionlink { min-height: var(--wpbr-target); }

  /* The packet's mobile "How it works": the short list, then the two crops. */
  .wpbr-dl-flow__head .wpbr-eyebrow--act,
  .wpbr-dl-flow__head .wpbr-act__lede,
  .wpbr-dl-steps--pair,
  .wpbr-dl-steps__stack { display: none; }
  .wpbr-dl-flow .wpbr-act__inner { gap: var(--wpbr-space-5); }
  .wpbr-dl-mobile-only { display: block; margin: 0; }
  .wpbr-dl-mobile-only .wpbr-dl-slidelink { display: inline-flex; align-items: center; min-height: var(--wpbr-target); }

  .wpbr-dl-ruled > div { grid-template-columns: minmax(0, 1fr); gap: var(--wpbr-space-2); }
  .wpbr-dl-checks { grid-template-columns: minmax(0, 1fr); }
  .wpbr-dl-get__panel { padding: 0; border: 0; box-shadow: none; background: transparent; }
  .wpbr-dl-get__main { align-items: stretch; }
  .wpbr-dl-facts > div { grid-template-columns: 80px minmax(0, 1fr); }
  .wpbr-dl-links a { grid-template-columns: minmax(0, 1fr) auto; }
  .wpbr-dl-links a > span:not(.wpbr-dl-links__arrow) { grid-column: 1; }
  .wpbr-dl-links .wpbr-dl-links__arrow { grid-row: 1 / span 2; grid-column: 2; }

  .wpbr-lightbox__bar { flex-wrap: wrap; gap: var(--wpbr-space-2); padding: 8px var(--wpbr-space-3); }
  .wpbr-lightbox__title { flex-basis: 100%; }
  .wpbr-lightbox__stage { gap: var(--wpbr-space-1); padding: var(--wpbr-space-2); }
  .wpbr-lightbox__nav { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wpbr-crop__open,
  .wpbr-dl-player__disc,
  .wpbr-dl-links .wpbr-dl-links__arrow { transition: none; }
}

/* The Review screen in the page hero's art column. The hero's own art rule
 * sizes an <img> to the column, which is right for an illustration and wrong
 * for a crop, so the crop's sizing wins here. */
.wpbr-pagehero--download .wpbr-pagehero__art::before { display: none; }
.wpbr-pagehero__art .wpbr-crop__view img {
  width: var(--iw);
  max-width: none;
  margin-left: var(--ml);
  margin-top: var(--mt);
}

.wpbr-dl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wpbr-space-2);
  margin: var(--wpbr-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.wpbr-dl-meta li {
  font-family: var(--wpbr-font-mono);
  font-size: var(--wpbr-text-sm);
  padding: 3px 9px;
  border: 1px solid var(--wpbr-rule);
  border-radius: 6px;
  background: var(--wpbr-white);
}

/* Section heads at the site's section scale (as .wpbr-act__head--center h2),
 * including the left-aligned ones the packet lays out beside their copy. */
.wpbr-dl-flow h2,
.wpbr-dl-safety h2,
.wpbr-dl-editions h2,
.wpbr-dl-get h2,
.wpbr-dl-support h2 { font-size: clamp(34px, 4vw, 50px); }

@media (max-width: 599px) {
  .wpbr-dl-flow h2,
  .wpbr-dl-safety h2,
  .wpbr-dl-editions h2,
  .wpbr-dl-get h2,
  .wpbr-dl-support h2 { font-size: clamp(30px, 9vw, 40px); }
}