/* GENERATED FILE. Do not edit by hand.
   Source:    agency/scripts/bp_advertorial/template.py  (DESIGN_CSS)
   Generator: agency/scripts/bp_advertorial/build_plugin_css.py
   Editing this file instead of the source makes the WordPress editor show a
   design the published page does not have. */

/* ===========================================================================
   BioProfile advertorial, the design Jesse approved on 2026-07-30, expressed
   as a WordPress design system.

   Everything is scoped to `.bp-adv`, so nothing here can reach the rest of
   bioprofile.com, and core blocks are styled BY ELEMENT so a heading, a
   paragraph, a quote, a list, an image or a button inserted by hand inside the
   advertorial comes out on-design with no class to remember.

   Jesse's design feedback, 2026-07-29 23:38, point by point:
   1. the light green and the dark green are the preferred colours; grey may be
      used but the page must NOT open grey;
   2. more colour and variation across sections, e.g. a colour block on the left
      or the right side of a section, without overdesign;
   3. ONE H1, plain text on white; everything else H2 or H3; an H2 may carry its
      own background colour so the page can be read from the headings alone; an
      H3 keeps its section background and gets a bigger font size;
   4. reuse the results page design feel;
   5. Written by / Verified by, the placeholder blocks and noindex stay.

   COLOUR PROVENANCE. Not one hex is invented.
   - #b7cb32  LIGHT GREEN, brand manual "colours rejuvenation protocol"
              (R183 G203 B51). Same value as --bp-lime in
              brands/bioprofile/brand/tokens.md.
   - #006b62  DARK GREEN, brand manual, nourish the cells (R0 G107 B98).
   - #005859  brand manual primary teal, the value the brand is built on.
   - #228a62  brand manual, challenge the body (R34 G138 B98).
   - #7ca64c  brand manual, calm the mind (R124 G166 B76).
   - #dbd4cd  brand manual "additional color", the warm neutral.
   - #B7CB3329 is the brand token --bp-lime-soft (light green at 16 percent).
   - the gradients are the brand token layer's own, copied verbatim.

   SPECIFICITY NOTE. Elementor's global kit emits `.elementor-kit-6 h2` style
   rules at (0,1,1). Element rules below are written `.bp-adv h2`, also (0,1,1),
   and win on source order because this sheet is inline in the body while the
   kit is a <link> in the head. Component rules that MUST NOT lose carry two
   classes, e.g. `.bp-adv .wp-block-button__link`.

   LAYOUT NOTE. Vertical rhythm uses `margin-block` and never the `margin`
   shorthand, so the measure rule `.bp-adv-sec > * { margin-inline: auto }` can
   centre a block without being outranked by its own element rule.
   =========================================================================== */

.bp-adv {
  --bp-ink: #212527;
  --bp-teal: #005859;
  --bp-forest: #006B62;
  --bp-emerald: #228A62;
  --bp-olive: #7CA64C;
  --bp-lime: #B7CB33;
  --bp-lime-soft: #B7CB3329;
  --bp-sand: #DBD4CB;
  --bp-white: #FFFFFF;
  --bp-foot: #6b6b6b;
  --bp-grad-dark: linear-gradient(237deg, rgba(0,88,89,0.00) 62.94%, #005859 100%), linear-gradient(90deg, rgba(34,138,98,0.00) 40%, #228A62 100%), #006B62;
  --bp-grad-lime: linear-gradient(110deg, rgba(183,203,51,0.00) 36.06%, rgba(183,203,51,0.25) 97.65%), #FFFFFF;
  --bp-font: 'Poppins','Segoe UI',Arial,sans-serif;
  --bp-fs-h1: 44px; --bp-fs-h2: 31px; --bp-fs-h3: 24px; --bp-fs-pre: 15px;
  --bp-fs-body: 17px; --bp-fs-small: 14px; --bp-fs-foot: 13px; --bp-fs-btn: 17px;
  --bp-lh-body: 1.75;
  --bp-s-1: 4px; --bp-s-2: 8px; --bp-s-3: 12px; --bp-s-4: 16px;
  --bp-s-5: 24px; --bp-s-6: 32px; --bp-s-7: 44px; --bp-s-8: 72px;
  --bp-measure: 760px; --bp-side: 40px;
  --bp-radius-photo: 16px; --bp-radius-btn: 10px; --bp-radius-card: 20px;
  --bp-shadow: 0 10px 30px rgba(0,88,89,0.10);
  font-family: var(--bp-font);
  font-size: var(--bp-fs-body);
  line-height: var(--bp-lh-body);
  color: var(--bp-ink);
  background: var(--bp-white);
  -webkit-font-smoothing: antialiased;
}
.bp-adv, .bp-adv * { box-sizing: border-box; }
.bp-adv p, .bp-adv li, .bp-adv h1, .bp-adv h2, .bp-adv h3, .bp-adv blockquote,
.bp-adv a, .bp-adv cite, .bp-adv span { overflow-wrap: break-word; min-width: 0; }

/* THE TOGGLE. One word in the block's own "Additional CSS class(es)" field
   hides an optional component on the front end without deleting anything. */
.bp-adv .bp-off { display: none !important; }

/* the page opens on green, never on grey (his point 1) */
.bp-adv .bp-adv-rule {
  height: 6px; border: 0; margin-block: 0; max-width: none;
  background: linear-gradient(90deg, #005859 0%, #006B62 38%, #228A62 66%, #B7CB33 100%);
}

/* --- section surfaces ------------------------------------------------------ */
.bp-adv-sec { position: relative; background: var(--bp-white);
  padding: var(--bp-s-8) var(--bp-side); margin-block: 0; }
/* the measure: every direct child of a section is the 760px text column */
.bp-adv-sec > * { max-width: var(--bp-measure); margin-inline: auto; }
.bp-adv-sec > *:last-child { margin-block-end: 0; }
.bp-adv-sec--wash  { background: linear-gradient(180deg, #B7CB331F 0%, #B7CB3312 100%), #FFFFFF; }
.bp-adv-sec--dark  { background: var(--bp-grad-dark); color: var(--bp-white); }
.bp-adv-sec--dark p, .bp-adv-sec--dark cite, .bp-adv-sec--dark li { color: var(--bp-white); }
.bp-adv-sec--offer { background: var(--bp-grad-lime); text-align: center; }
.bp-adv-sec--hero  { padding-block-start: var(--bp-s-6); }
.bp-adv-sec--disclosure { padding-block: var(--bp-s-6);
  border-top: 1px solid var(--bp-sand); }

/* --- the side accent bar, his own example ("a colour block on the left or the
       right side of a section"), design rev 3: a slim vertical bar hugging the
       text column rather than a wide margin panel. Below 1100px the margin is
       gone, so it becomes a slim top edge. ---------------------------------- */
.bp-adv-rail { overflow: hidden; }
.bp-adv-rail::before {
  content: ""; position: absolute; top: var(--bp-s-7); bottom: var(--bp-s-7);
  width: 6px; border-radius: 3px;
  background: linear-gradient(180deg, var(--bp-forest) 0%, var(--bp-lime) 100%);
}
.bp-adv-rail--left::before  { left: calc((100% - var(--bp-measure)) / 2 - 34px); }
.bp-adv-rail--right::before { right: calc((100% - var(--bp-measure)) / 2 - 34px); }
@media (max-width: 1099px) {
  .bp-adv-rail::before { left: 0; right: 0; width: auto; bottom: auto; top: 0;
    height: 4px; border-radius: 0; background: var(--bp-lime); }
}

/* --- CORE BLOCKS, styled by element. This is the part that makes an inserted
       block come out on-design with no class. --------------------------------- */
.bp-adv p { font-size: var(--bp-fs-body); line-height: var(--bp-lh-body);
  margin-block: 0 var(--bp-s-5); }
.bp-adv h1 { font-size: var(--bp-fs-h1); font-weight: 700; line-height: 1.22;
  margin-block: 0 var(--bp-s-4); }
/* an H2 is its own colour band, so the page can be read from the headings
   alone (his point 3). Dark green on light sections, light green on the dark
   one, so a heading always wins against its own background. */
.bp-adv h2 {
  font-size: var(--bp-fs-h2); font-weight: 700; line-height: 1.28;
  margin-block: 0 var(--bp-s-5);
  background: var(--bp-grad-dark); color: var(--bp-white);
  padding: var(--bp-s-4) var(--bp-s-5);
  border-radius: var(--bp-radius-btn);
  border-left: 6px solid var(--bp-lime);
}
.bp-adv-sec--dark h2 { background: var(--bp-lime); color: var(--bp-ink);
  border-left-color: var(--bp-forest); }
/* H3: same background as its section, bigger font (his point 3, verbatim) */
.bp-adv h3 { font-size: var(--bp-fs-h3); font-weight: 700; line-height: 1.35;
  color: var(--bp-forest); background: transparent; margin-block: 0 var(--bp-s-3); }
.bp-adv-sec--dark h3 { color: var(--bp-lime); }
.bp-adv ul, .bp-adv ol { font-size: var(--bp-fs-body); line-height: var(--bp-lh-body);
  margin-block: 0 var(--bp-s-5); padding-left: var(--bp-s-5); }
.bp-adv li { margin-block-end: var(--bp-s-2); }
.bp-adv a { color: var(--bp-teal); text-decoration: underline; }
.bp-adv a:hover { color: var(--bp-olive); }
.bp-adv-sec--dark a, .bp-adv-sec--dark strong { color: var(--bp-lime); }
.bp-adv strong { font-weight: 700; }
/* the highlight pill. Colours ride on the inline style core writes, so only
   the shape lives here and any <mark> in the article picks it up. */
.bp-adv mark {
  padding: 0 10px; border-radius: 10px; display: inline;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* figures match the approved page exactly: card radius plus the soft shadow,
   and a left-aligned caption rather than core's centred one */
.bp-adv .wp-block-image { margin-block: var(--bp-s-5); margin-inline: auto; }
.bp-adv .wp-block-image img { display: block; width: 100%; height: auto;
  border-radius: var(--bp-radius-card); box-shadow: var(--bp-shadow); }
.bp-adv .wp-block-image figcaption { font-size: var(--bp-fs-foot); line-height: 1.55;
  color: var(--bp-foot); text-align: left; margin-block: var(--bp-s-2) 0; }
.bp-adv .wp-block-embed, .bp-adv .wp-block-video { margin-block: var(--bp-s-5); }
.bp-adv .wp-block-embed iframe, .bp-adv .wp-block-video video {
  width: 100%; border-radius: var(--bp-radius-photo); }
.bp-adv .wp-block-separator:not(.bp-adv-rule) { border: 0; border-top: 1px solid var(--bp-sand);
  margin-block: var(--bp-s-5); }

/* quotes: core pullquote and core quote both land on the lime rule. The
   font-size reset undoes core's own 1.5em on the figure, which would otherwise
   leak into anything inside the quote that has no size of its own. */
/* margin-inline is load bearing, and it must be `auto` rather than `0`.
   `blockquote` and `figure` carry a 40px side margin in the browser's own
   default stylesheet, which indents the quote inside its rule and makes the
   copy wrap early on a phone. But these blocks are direct children of a
   section, so zeroing the side margin also defeats the measure rule
   `.bp-adv-sec > * { margin-inline: auto }` and pins them to the left edge. */
.bp-adv .wp-block-pullquote, .bp-adv .wp-block-quote {
  border: 0; border-left: 5px solid var(--bp-lime); background: transparent;
  padding: var(--bp-s-2) 0 var(--bp-s-2) var(--bp-s-5);
  margin-block: var(--bp-s-5); margin-inline: auto;
  text-align: left; font-size: var(--bp-fs-body);
}
.bp-adv .wp-block-pullquote blockquote { border: 0; margin: 0; padding: 0; }
.bp-adv .wp-block-pullquote p, .bp-adv .wp-block-quote p {
  font-size: 24px; line-height: 1.45; font-weight: 600;
  margin-block: 0 var(--bp-s-2); color: var(--bp-forest); }
.bp-adv .wp-block-pullquote cite, .bp-adv .wp-block-quote cite {
  display: block; margin: 0; font-size: var(--bp-fs-small); color: var(--bp-foot);
  font-style: normal; text-transform: none; }

/* buttons: two classes so core's own .wp-block-button__link cannot win */
.bp-adv .wp-block-buttons { display: flex; justify-content: center;
  margin-block: 0 var(--bp-s-4); }
.bp-adv .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  background: var(--bp-teal); color: var(--bp-white); font-size: var(--bp-fs-btn);
  font-weight: 700; line-height: 1.2; border-radius: var(--bp-radius-btn);
  padding: 15px 44px; text-decoration: none; transition: background 250ms ease;
  box-shadow: var(--bp-shadow);
}
.bp-adv .wp-block-button__link:hover { background: var(--bp-olive); color: var(--bp-white); }

/* --- slot 1: pre-headline, headline, sub-headline (Jesse's headline skill) --- */
.bp-adv .bp-adv-preheadline {
  color: var(--bp-forest); font-size: var(--bp-fs-pre); font-weight: 600; line-height: 1.5;
  border-left: 4px solid var(--bp-lime); padding-left: var(--bp-s-3);
  margin-block: 0 var(--bp-s-4);
}
.bp-adv .bp-adv-subheadline { font-size: 21px; line-height: 1.5; font-weight: 600;
  color: var(--bp-forest); margin-block: 0 var(--bp-s-5); }
.bp-adv .bp-adv-standfirst { font-size: 19px; line-height: 1.65;
  margin-block: 0 var(--bp-s-5); }
.bp-adv .bp-adv-byline { font-size: var(--bp-fs-small); color: var(--bp-foot);
  line-height: 1.6; margin-block: 0 var(--bp-s-5); }
.bp-adv .bp-adv-socialproof { font-size: var(--bp-fs-small); color: var(--bp-foot);
  margin-block: 0 var(--bp-s-5); }
/* the offer headline above the CTA. Jesse asked for a second H1 here; the brand
   doc's accessibility rule is one h1 per page, so it is rendered at H1 size and
   stays an h2 element. Named in the close as the one design conflict. */
.bp-adv h2.bp-adv-offerhead {
  font-size: var(--bp-fs-h1); font-weight: 700; line-height: 1.22;
  margin-block: 0 var(--bp-s-4); text-align: center; color: var(--bp-ink);
  background: none; padding: 0; border: 0; border-radius: 0;
}

/* --- Written by + Verified by. The avatar is the first child and spans the
       three text rows, so the whole box is four ordinary paragraphs and stays
       editable without nested columns. ---------------------------------------- */
.bp-adv .bp-adv-authors {
  background: var(--bp-white); border: 1px solid var(--bp-sand);
  border-top: 4px solid var(--bp-lime); border-radius: var(--bp-radius-card);
  box-shadow: var(--bp-shadow); padding: var(--bp-s-5);
  margin-block: 0 var(--bp-s-4);
  /* auto-fit, so switching the verified box off leaves one full-width author
     rather than a half-empty card */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--bp-s-5); align-items: start;
}
.bp-adv .bp-adv-author {
  display: grid; grid-template-columns: 62px 1fr; gap: 0 var(--bp-s-3);
  align-items: start; min-width: 0;
}
.bp-adv .bp-adv-avatar {
  grid-row: 1 / span 3; width: 62px; height: 62px; border-radius: 50%;
  background: #B7CB331F; border: 2px dashed var(--bp-olive);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--bp-forest);
  margin-block: 0;
}
.bp-adv .bp-adv-author.is-placeholder .bp-adv-avatar {
  border-color: var(--bp-sand); background: #fff; color: var(--bp-foot); }
.bp-adv .bp-adv-author-role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bp-forest); line-height: 1.6; margin-block: 0; }
.bp-adv .bp-adv-author.is-placeholder .bp-adv-author-role { color: var(--bp-foot); }
.bp-adv .bp-adv-author-name { font-size: 17px; font-weight: 700; line-height: 1.35;
  margin-block: 0; }
.bp-adv .bp-adv-author-cred { font-size: var(--bp-fs-foot); color: var(--bp-foot);
  line-height: 1.55; margin-block: 0; }
/* the optional wrapper must not break the two-column grid of the box */
.bp-adv .bp-adv-authors > .bp-optional { display: contents; }
.bp-adv .bp-adv-authors > .bp-optional.bp-off { display: none !important; }

/* --- placeholders: image slot, video slot ---------------------------------- */
.bp-adv .bp-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 180px; padding: var(--bp-s-4); margin-block: var(--bp-s-5) 0;
  border: 2px dashed var(--bp-olive); border-radius: var(--bp-radius-photo);
  background: #B7CB331F; color: var(--bp-forest);
}
.bp-adv .bp-slot p { font-size: var(--bp-fs-small); font-weight: 700; margin-block: 0; }
.bp-adv .bp-slot--video { min-height: 260px; }

/* --- mid-article CTA band --------------------------------------------------- */
.bp-adv .bp-adv-midcta {
  background: var(--bp-grad-lime); border: 1px solid var(--bp-lime);
  border-radius: var(--bp-radius-card); padding: var(--bp-s-5) var(--bp-s-4);
  margin-block: var(--bp-s-6); text-align: center;
}
.bp-adv .bp-adv-midcta .wp-block-buttons { margin-block-end: var(--bp-s-2); }
.bp-adv .bp-adv-midcta .bp-adv-foot { margin-block: 0; }

/* the closing CTA is one named unit in List View, so it moves and toggles as a
   whole. It carries no box of its own: the spacing must read exactly as it does
   on the approved page, where the three parts are plain siblings. */
.bp-adv .bp-adv-ctablock { margin-block: 0 var(--bp-s-5); }
.bp-adv .bp-adv-ctablock .wp-block-buttons { margin-block-end: var(--bp-s-4); }
.bp-adv .bp-adv-ctablock .bp-adv-foot { margin-block: 0; }

/* --- the condition, slot 8: the results page reference-card shape ----------- */
.bp-adv .bp-adv-condition {
  background: var(--bp-white); border: 1px solid var(--bp-sand);
  border-left: 5px solid var(--bp-lime); border-radius: var(--bp-radius-btn);
  padding: var(--bp-s-4) var(--bp-s-5); font-weight: 600; box-shadow: var(--bp-shadow);
}

/* --- the numbers card: the results page focus panel, same gradient, same
       radius, same lime figures ("use more of that design") ------------------ */
.bp-adv .bp-adv-numcard {
  background: linear-gradient(135deg, var(--bp-teal) 0%, var(--bp-forest) 100%);
  border-radius: var(--bp-radius-card);
  padding: var(--bp-s-6) var(--bp-s-5) var(--bp-s-5);
  box-shadow: var(--bp-shadow); margin-block: var(--bp-s-5) 0;
  position: relative; overflow: hidden;
}
.bp-adv .bp-adv-numcard::after {
  content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px;
  border-radius: 50%; background: rgba(255,255,255,0.05); pointer-events: none;
}
.bp-adv .bp-adv-numcard .wp-block-columns {
  position: relative; z-index: 1; gap: var(--bp-s-5); margin-block: 0; }
.bp-adv .bp-adv-numcard .wp-block-column { min-width: 0; }
.bp-adv .bp-adv-num-v { font-size: 44px; font-weight: 700; line-height: 1.12;
  color: var(--bp-lime); text-align: center; margin-block: 0 var(--bp-s-2); }
.bp-adv .bp-adv-num-l { font-size: var(--bp-fs-small); line-height: 1.5;
  color: rgba(255,255,255,0.92); text-align: center; margin-block: 0; }
.bp-adv .bp-adv-numsrc { margin-block: var(--bp-s-5) 0; }

/* --- the proof slot: a dashed card until a consented quote exists. The quote
       inside loses its own vertical margins, otherwise the card is one full
       block of spacing taller than the approved page. --------------------- */
.bp-adv .bp-adv-testimonial {
  border: 1px dashed var(--bp-sand); border-left: 5px dashed var(--bp-sand);
  background: var(--bp-white); border-radius: var(--bp-radius-card);
  padding: var(--bp-s-5); margin-block: var(--bp-s-5);
}
/* the card IS the quote frame, so the quote inside it carries no rule and no
   indent of its own; otherwise the copy is indented twice and wraps early */
.bp-adv .bp-adv-testimonial .wp-block-quote {
  border: 0; padding: 0; margin-block: 0; }
.bp-adv .bp-adv-testimonial .wp-block-quote p {
  font-size: 17px; font-weight: 500; color: var(--bp-foot); }

/* --- steps, footnotes, disclosure ------------------------------------------- */
.bp-adv .bp-adv-steps {
  max-width: 520px; margin-block: 0 var(--bp-s-5); margin-inline: auto;
  padding-left: 0; list-style: none; counter-reset: bpstep; text-align: left;
}
.bp-adv .bp-adv-steps li { position: relative; padding-left: 40px;
  margin-block-end: var(--bp-s-3); counter-increment: bpstep; }
.bp-adv .bp-adv-steps li::before {
  content: counter(bpstep); position: absolute; left: 0; top: 4px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bp-forest); color: var(--bp-white);
  font-size: var(--bp-fs-small); font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.bp-adv .bp-adv-foot { font-size: var(--bp-fs-foot); color: var(--bp-foot); line-height: 1.6; }
.bp-adv-sec--dark .bp-adv-foot { color: rgba(255,255,255,0.82); }
/* Jesse's mandatory CTA subtext, 2026-07-30 15:59: directly under the button,
   one notch above the microline in weight so it reads as part of the ask */
.bp-adv .bp-adv-ctasub {
  margin-block: calc(var(--bp-s-4) * -0.5) var(--bp-s-2); margin-inline: auto;
  max-width: 460px; font-size: 15px; line-height: 1.5; font-weight: 600;
  color: var(--bp-teal); text-align: center;
}
.bp-adv .bp-adv-disclosure { font-size: var(--bp-fs-foot); color: var(--bp-foot);
  line-height: 1.6; }
.bp-adv .bp-adv-sources { margin-block-start: var(--bp-s-5); }
.bp-adv .bp-adv-srclist { font-size: var(--bp-fs-foot); color: var(--bp-foot);
  line-height: 1.6; padding-left: 20px; margin-block: 0; }
.bp-adv .bp-adv-srclist li { margin-block-end: var(--bp-s-1); }
.bp-adv .bp-h--center { text-align: center; }

@media (max-width: 767px) {
  .bp-adv {
    --bp-fs-h1: 30px; --bp-fs-h2: 24px; --bp-fs-h3: 20px; --bp-fs-body: 16px;
    --bp-fs-btn: 16px; --bp-fs-pre: 14px; --bp-side: 20px;
    --bp-s-8: 44px; --bp-s-7: 32px;
  }
  .bp-adv .bp-adv-subheadline { font-size: 18px; }
  .bp-adv .bp-adv-standfirst { font-size: 17px; }
  .bp-adv .wp-block-pullquote p, .bp-adv .wp-block-quote p { font-size: 20px; }
  .bp-adv h2 { padding: var(--bp-s-3) var(--bp-s-4); }
  .bp-adv .bp-adv-num-v { font-size: 36px; }
  .bp-adv .bp-adv-authors { grid-template-columns: 1fr; gap: var(--bp-s-5); }
  /* the button is full width on mobile. Core wraps the link in .wp-block-button,
     which is shrink-to-fit, so widening only the link leaves it content-sized. */
  .bp-adv .wp-block-button { width: 100%; }
  .bp-adv .wp-block-button__link { padding: 15px 24px; width: 100%; }
  .bp-adv .bp-adv-numcard .wp-block-columns { gap: var(--bp-s-4); }
}
@media (prefers-reduced-motion: reduce) { .bp-adv * { transition-duration: 0ms; } }

/* ===========================================================================
   EDITOR ONLY. Everything above this line is what a reader sees; everything
   below applies only inside the WordPress block editor, which loads this file
   into its canvas.
   =========================================================================== */

/* a component switched off is hidden from readers but must stay visible to the
   editor, otherwise it could never be switched back on */
.editor-styles-wrapper .bp-adv .bp-off { display: block !important; }

/* and it must LOOK off, so nobody mistakes it for live copy */
.editor-styles-wrapper .bp-editor-off {
  opacity: 0.42;
  outline: 2px dashed #B7CB33;
  outline-offset: 4px;
  position: relative;
}
.editor-styles-wrapper .bp-editor-off::after {
  content: "STAAT UIT op de pagina";
  position: absolute; top: 0; right: 0; z-index: 5;
  background: #B7CB33; color: #212527;
  font: 700 10px/1 'Poppins', Arial, sans-serif; letter-spacing: 0.08em;
  padding: 5px 8px; border-radius: 0 0 0 6px; pointer-events: none;
}

/* the editor canvas is narrower than the page, so the full-bleed section
   surfaces are allowed to run to the edge of the canvas instead */
.editor-styles-wrapper .bp-adv .bp-adv-sec { padding-inline: 24px; }