/* Review uses the preview as its board: the score, chosen check and fix all
   describe the same saved design. These rules never style the merchant app. */
.pe-editor [data-popup-review] { background: #292826; color: #efefec; }
.pe-editor [data-popup-review-content] { padding: 20px 18px 24px; font: 14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.pe-editor[data-mode='review'] .pe-rail { background: #292826; }
.pe-editor[data-mode='review'] .pe-mode-row { background: #242321; border-color: #41403d; }
.pe-editor[data-mode='review'] .pe-mode-toggle { background: #353431; border-color: #464541; }
.pe-editor[data-mode='review'] .pe-mode-button { color: #c7c7c1; }
.pe-editor[data-mode='review'] .pe-mode-button[aria-pressed='true'] { background: #504f49; color: #fff; box-shadow: 0 1px 3px #0005; }
.pe-editor [data-popup-eval] { transition: opacity 180ms; }
.pe-editor[data-mode='edit'] [data-popup-eval] { visibility: hidden; }
.pe-editor .pe-eval-track { background: #33322e; border: 1px solid #aaa9a3; border-radius: 3px; overflow: hidden; }
.pe-editor [data-popup-eval-fill] { background: #fffefa; transition: height 500ms cubic-bezier(.2,.8,.2,1); }
.pe-editor .pe-eval-value { font-variant-numeric: tabular-nums; }
.pe-editor .pr-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #a7a79f; }
.pe-editor .pr-local { font-size: 10px; font-weight: 500; letter-spacing: 0; color: #bcbcb4; }
.pe-editor .pr-scores { display: grid; grid-template-columns: .8fr 1.2fr .8fr; gap: 10px; margin: 20px 0 0; text-align: center; }
.pe-editor .pr-scores > div { display: flex; flex-direction: column; gap: 5px; justify-content: end; }
.pe-editor .pr-scores span { color: #adada5; font-size: 11px; }
.pe-editor .pr-scores strong { color: #bfbfb7; font-size: 28px; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pe-editor .pr-scores .pr-score-now strong { color: #f8f8f4; font-size: 44px; letter-spacing: -.035em; }
.pe-editor .pr-score-now small { color: #aaa99f; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.pe-editor .pr-scores .pr-gain strong { color: #97cf64; font-size: 24px; }
.pe-editor .pr-scores .pr-loss strong { color: #f0a36d; }
.pe-editor .pr-history { margin: 20px 0 18px; padding: 12px 0 0; border-top: 1px solid #44433f; }
.pe-editor .pr-history > span { display: block; margin-bottom: 7px; color: #999a91; font-size: 10px; }
.pe-editor .pr-history svg { display: block; width: 100%; height: 52px; overflow: visible; }
.pe-editor .pr-grid { fill: none; stroke: #4b4a45; stroke-width: 1; }
.pe-editor .pr-graph-line { fill: none; stroke: #a7cf73; stroke-width: 2; stroke-linejoin: round; }
.pe-editor .pr-history circle { fill: #b2dc7c; }
.pe-editor .pr-coach { display: flex; align-items: center; gap: 12px; min-height: 74px; padding: 14px 12px; background: #393834; border: 1px solid #4a4942; border-radius: 9px; }
.pe-editor .pr-grade-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 50%; background: #e2ac48; color: #fff; font-size: 23px; font-weight: 850; letter-spacing: -.05em; box-shadow: 0 2px 0 #0003; }
.pe-editor .pr-grade-name { display: block; color: #f0be5b; font-size: 11px; font-weight: 750; margin-bottom: 3px; }
.pe-editor .pr-coach h3 { margin: 0; color: #f4f3ee; font: 650 16px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.015em; }
.pe-editor .pr-coach[data-grade='brilliant'] .pr-grade-icon { background: #26b5ad; }
.pe-editor .pr-coach[data-grade='brilliant'] .pr-grade-name { color: #5bddd3; }
.pe-editor .pr-coach[data-grade='good'] .pr-grade-icon { background: #81aa4e; }
.pe-editor .pr-coach[data-grade='good'] .pr-grade-name { color: #b6d789; }
.pe-editor .pr-coach[data-grade='mistake'] .pr-grade-icon { background: #d9773c; }
.pe-editor .pr-coach[data-grade='mistake'] .pr-grade-name { color: #f0a36d; }
.pe-editor .pr-detail { margin: 14px 0; color: #d2d1ca; font-size: 13px; line-height: 1.6; }
.pe-editor .pr-change-preview { padding: 11px 12px; border-left: 3px solid #67665c; background: #22211f; border-radius: 0 5px 5px 0; }
.pe-editor .pr-change-preview > span { display: block; color: #9e9e93; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.pe-editor .pr-change-preview summary { color: #c9cbbc; font-size: 12px; cursor: pointer; }
.pe-editor .pr-change-preview p { margin: 7px 0 0; display: grid; gap: 2px; color: #dfdfd7; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.pe-editor .pr-change-preview p span { font-size: 10px; color: #9d9e92; }
.pe-editor .pr-change-preview strong { display: block; color: #e8e9df; font-size: 12px; font-weight: 550; }
.pe-editor .pr-fix-slot { margin-top: 15px; }
.pe-editor .pr-apply { display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 11px 12px; background: #89b94f; color: #14220a; border: 1px solid #91c953; border-radius: 6px; box-shadow: 0 3px 0 #48682c; font: 750 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; }
.pe-editor .pr-apply:hover { background: #9acb5e; }
.pe-editor .pr-apply:active { transform: translateY(2px); box-shadow: 0 1px 0 #48682c; }
.pe-editor .pr-apply.pr-keep { background: #45473c; border-color: #69704e; color: #dbe6c3; box-shadow: 0 3px 0 #1b2017; }
.pe-editor .pr-feedback { min-height: 19px; margin: 10px 0 12px; color: #addeb1; font-size: 11px; line-height: 1.5; }
.pe-editor .pr-move-list { display: grid; border: 1px solid #44433d; border-radius: 6px; overflow: hidden; }
.pe-editor .pr-move-list button { display: grid; grid-template-columns: 17px minmax(0,1fr) 34px 24px; align-items: center; gap: 7px; min-height: 40px; padding: 8px 10px; background: #302f2c; border: 0; border-bottom: 1px solid #42413b; color: #d3d3cb; text-align: left; font: 500 12px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; }
.pe-editor .pr-move-list button:last-child { border-bottom: 0; }
.pe-editor .pr-move-list button:hover { background: #44433d; }
.pe-editor .pr-move-list button[aria-pressed='true'] { background: #4b4b40; box-shadow: inset 3px 0 #a5c778; }
.pe-editor .pr-list-number { color: #96958b; font-size: 10px; }
.pe-editor .pr-list-score { color: #c4c4b7; font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.pe-editor .pr-mini-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d5a344; color: #fff; font-size: 13px; font-weight: 800; }
.pe-editor .pr-mini-badge[data-grade='brilliant'], .pe-editor [data-popup-move-badge][data-grade='brilliant'] { background: #26b5ad; }
.pe-editor .pr-mini-badge[data-grade='good'], .pe-editor [data-popup-move-badge][data-grade='good'] { background: #81aa4e; }
.pe-editor .pr-mini-badge[data-grade='mistake'], .pe-editor [data-popup-move-badge][data-grade='mistake'] { background: #d9773c; }
.pe-editor .pr-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 13px; padding: 7px 0; background: #292826; }
.pe-editor .pr-nav button { display: grid; place-items: center; width: 44px; height: 36px; background: #45443d; border: 1px solid #57564d; border-radius: 5px; color: #e8e8dc; cursor: pointer; }
.pe-editor .pr-nav span { color: #bdbcb0; font-size: 11px; }
.pe-editor .pr-rubric { margin-top: 9px; padding-top: 10px; border-top: 1px solid #45443d; }
.pe-editor .pr-rubric summary { color: #b5b5a9; font-size: 11px; cursor: pointer; }
.pe-editor .pr-rubric p { color: #b5b5a9; font-size: 11px; line-height: 1.6; margin: 8px 0; }
.pe-editor .pr-install { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 43px; margin-top: 17px; padding: 8px 10px; border: 1px solid #747f58; background: transparent; color: #d5e3b8; border-radius: 5px; font-size: 12px; font-weight: 650; text-decoration: none; box-shadow: none; }
.pe-editor .pr-install:hover { background: #3d4531; }
.pe-editor .pr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 8px; }
.pe-editor .pr-loading > img { margin-bottom: 22px; }
.pe-editor .pr-loading h3 { margin: 0; color: #f0f0e8; font: 650 20px/1.35 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.02em; text-align: center; }
.pe-editor .pr-loading > p { color: #a8a99b; font-size: 12px; min-height: 20px; margin: 12px 0 22px; }
.pe-editor .pr-progress { position: relative; height: 9px; width: 100%; border-radius: 5px; background: #151611; overflow: hidden; }
.pe-editor .pr-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #99c763; transition: width 300ms ease-out; }
.pe-editor .pr-loading ol { list-style: none; display: grid; gap: 16px; width: 100%; margin: 28px 0; padding: 0; }
.pe-editor .pr-loading li { display: flex; align-items: center; gap: 10px; color: #96988a; font-size: 12px; transition: color 150ms; }
.pe-editor .pr-loading li > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #56584b; border-radius: 50%; font-size: 10px; }
.pe-editor .pr-loading li b { margin-left: auto; color: #a8d775; opacity: 0; }
.pe-editor .pr-loading li.done { color: #eff1df; }
.pe-editor .pr-loading li.done > span { border-color: #8ea866; background: #495a31; }
.pe-editor .pr-loading li.done b { opacity: 1; }
.pe-editor .pr-loading > button { background: none; border: 0; padding: 12px; color: #bdcbaa; font-size: 12px; text-decoration: underline; cursor: pointer; }
.pe-editor .pr-target { outline: 2px solid #27bcb1; outline-offset: 4px; }
.pe-editor [data-popup-canvas].pr-target { outline-offset: -3px; }
.pe-editor [data-popup-move-badge] { position: absolute; z-index: 4; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #d5a344; color: #fff; box-shadow: 0 3px 10px #0003; font: 800 22px/1 -apple-system,BlinkMacSystemFont,sans-serif; pointer-events: none; }
.pe-editor.pr-celebrate [data-popup-move-badge], .pe-editor.pr-celebrate .pr-grade-icon { animation: pr-badge-pop 550ms cubic-bezier(.2,.9,.2,1.4); }
.pe-editor.pr-celebrate .pr-score-now strong { animation: pr-score-pop 550ms ease-out; }
.pe-editor[data-review-state='scanning'] .pe-eval-track { box-shadow: 0 0 0 2px #aed28355; }
.pe-editor [data-popup-review] button:focus-visible, .pe-editor [data-popup-review] a:focus-visible { outline: 2px solid #a8dd70; outline-offset: 3px; }
@keyframes pr-badge-pop { 0% { transform: scale(.65); opacity: .3; } 55% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes pr-score-pop { 0% { color: #83e2c6; transform: translateY(5px); } 100% { color: #f8f8f4; transform: translateY(0); } }
@container pe-editor (max-width: 520px) {
  .pe-editor [data-popup-review-content] { padding: 14px 14px 20px; }
  .pe-editor .pr-scores { margin-top: 12px; }
  .pe-editor .pr-history { margin: 12px 0; padding-top: 8px; }
  .pe-editor .pr-history > span { display: none; }
  .pe-editor .pr-history svg { height: 30px; }
  .pe-editor .pr-coach { min-height: 64px; padding: 10px; }
  .pe-editor .pr-detail { margin: 12px 0; }
  .pe-editor .pr-move-list button { min-height: 44px; }
  .pe-editor .pr-nav button { height: 44px; }
  .pe-editor .pr-rubric summary { min-height: 44px; padding-block: 12px; font-size: 13px; }
  .pe-editor .pr-rubric p { font-size: 13px; }
  .pe-editor .pr-install,.pe-editor .pr-loading > button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-editor [data-popup-eval-fill], .pe-editor .pr-progress > span, .pe-editor [data-popup-eval], .pe-editor .pr-loading li { transition: none; }
  .pe-editor.pr-celebrate [data-popup-move-badge], .pe-editor.pr-celebrate .pr-grade-icon, .pe-editor.pr-celebrate .pr-score-now strong { animation: none; }
}

/* The makeover fits the existing preview. Only the right rail may scroll. */
.pe-editor[data-makeover] {
  --pm-ink: #223c31;
  --pm-muted: #6c796f;
  --pm-line: #dde4d9;
  --pm-paper: #fbfcf8;
  --pm-green: #287343;
}
.pe-editor[data-popup-demo='true'] .pe-rail,
.pe-editor[data-popup-demo='true'] [data-popup-review],
.pe-editor[data-makeover] .pe-rail,
.pe-editor[data-makeover] [data-popup-review] { background: var(--pm-paper); color: var(--pm-ink); }
.pe-editor[data-makeover] .pe-mode-row { background: #fff; border-color: #e1e7df; }
.pe-editor[data-makeover] .pe-mode-toggle { background: #f0f2ed; border-color: #e1e6dc; }
.pe-editor[data-makeover] .pe-mode-button { color: #727b70; }
.pe-editor[data-makeover] .pe-mode-button[aria-pressed='true'] { background: #fff; color: #2b6746; box-shadow: 0 1px 4px #263d2614; }
.pe-editor[data-makeover] [data-popup-review-content] { padding: 18px; }
.pe-editor[data-makeover] .pe-eval { display: none; }
.pe-editor .pm-stage-transport { display: none; }
.pe-editor[data-popup-scroll='page'][data-makeover] .pe-frame { height: var(--pm-frame-height); }
.pe-editor[data-makeover] :is(.pe-chrome,.pe-preview-footer,.pm-stage-transport) { flex-shrink: 0; }
.pe-editor[data-popup-scroll='page'][data-makeover] .pe-pagebox { min-height: 0; padding-left: 12px; }
.pe-editor[data-makeover] .pe-canvas {
  min-height: 0;
  padding: 26px 18px 80px;
  background: #eef0e9;
  transition: background 650ms ease;
}
.pe-editor[data-makeover] .pe-popup-card {
  position: absolute;
  left: 50%;
  top: var(--pm-card-y, 50%);
  width: var(--pm-card-width, 100%);
  min-height: var(--pm-card-height, 0px);
  transform: translate(-50%, -50%) scale(var(--pm-card-scale, 1));
  transition: background-color 650ms ease, color 650ms ease, box-shadow 650ms ease;
}
.pe-editor[data-makeover] .pe-popup-card[data-layout='simple'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  border-radius: 18px;
  box-shadow: 0 18px 44px -22px #23331f52, 0 0 0 1px #31442e12;
}
/* Off-flow copies measure the whole edit sequence once, never on each letter. */
.pe-editor .pm-measure-card { position: absolute !important; left: 0; top: 0; visibility: hidden !important; pointer-events: none; height: auto !important; min-height: 0 !important; transform: none !important; }
.pe-editor .pm-measure-card, .pe-editor .pm-measure-card * { transition: none !important; animation: none !important; }
.pe-editor[data-makeover] .pe-popup-card .pe-card-copy { padding: 24px; }
.pe-section .pe-editor[data-makeover] .pe-popup-brand { margin-bottom: 14px; }
.pe-editor[data-makeover] .pe-popup-card[data-layout='simple'] .pe-card-heading { letter-spacing: -.035em; line-height: 1.07; }
.pe-section .pe-editor[data-makeover] .pe-card-description { margin: 0 0 14px; }
.pe-editor[data-makeover] .pe-popup-submit { transition: background-color 650ms ease, color 650ms ease, box-shadow 450ms ease; }
.pe-editor[data-makeover] .pe-popup-card[data-layout='simple'] .pe-popup-submit { border-radius: 7px; box-shadow: 0 2px 0 #102a3c; }
.pe-editor[data-makeover] .pm-target { outline: 2px solid #2a9cd0; outline-offset: 5px; border-radius: 3px; transition: outline-color 160ms ease; }
.pe-editor[data-makeover] .pm-target-selected { background: #89caf17a; box-shadow: 0 0 0 3px #89caf17a; border-radius: 1px; }
.pe-editor[data-makeover] .pm-removing { opacity: 0; transform: translateX(-12px) scale(.98); transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.8,.3,1); }
.pe-editor[data-makeover-action='celebrate'] .pm-target { outline-color: #65a371; }

/* The arrow and caret use canvas-relative coordinates from the controller. */
.pe-editor .pm-pointer,
.pe-editor .pm-selection,
.pe-editor .pm-caret,
.pe-editor .pm-piece,
.pe-editor .pm-actor,
.pe-editor .pm-audience { position: absolute; z-index: 6; pointer-events: none; }
.pe-editor .pm-pointer { width: 25px; height: 29px; left: 20px; top: 20px; filter: drop-shadow(0 2px 2px #153d5124); transition: left 650ms cubic-bezier(.3,0,.15,1), top 650ms cubic-bezier(.3,0,.15,1), opacity 180ms; }
.pe-editor .pm-pointer > svg { display: block; }
.pe-editor .pm-pointer > span { display: block; position: absolute; left: 20px; top: 22px; padding: 4px 8px; border: 1px solid #fff9; border-radius: 4px 10px 10px 10px; background: #1586b5; color: #fff; font: 700 10px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space: nowrap; box-shadow: 0 2px 3px #234c5422; }
.pe-editor .pm-pointer > i { position: absolute; left: -11px; top: -11px; width: 27px; height: 27px; border: 2px solid #1ba3d7; border-radius: 50%; opacity: 0; }
.pe-editor[data-makeover-action='apply'] .pm-pointer > i { animation: pm-click-ring 540ms ease-out; }
.pe-editor .pm-selection { border-radius: 2px; background: #75bdec59; box-shadow: 0 0 0 1px #65b9e45c; }
.pe-editor .pm-caret { width: 2px; min-height: 14px; background: #168cbf; border-radius: 1px; box-shadow: 0 0 0 1px #fff5; }
.pe-editor[data-makeover-action='type'] .pm-caret { animation: pm-caret-blink 800ms step-end infinite; }
.pe-editor .pm-audience { top: 8px; left: 50%; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px); transform: translateX(-50%); color: #4a694c; font: 650 10px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space: nowrap; }
.pe-editor .pm-audience > svg { flex-shrink: 0; }
.pe-editor .pm-actor { left: 14px; bottom: 6px; display: flex; align-items: center; gap: 7px; width: calc(100% - 28px); max-width: 355px; height: 70px; }
.pe-editor .pm-bot-art { width: 62px; height: 70px; overflow: visible; flex: 0 0 62px; }
.pe-editor .pm-bot-head { transform-origin: 70px 75px; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.pe-editor .pm-bot-body { transform-origin: 70px 140px; transition: transform 420ms cubic-bezier(.2,.7,.2,1); }
.pe-editor .pm-bot-arm-left { transform-origin: 45px 93px; transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
.pe-editor .pm-bot-arm-right { transform-origin: 95px 93px; transition: transform 450ms cubic-bezier(.2,.7,.2,1); }
.pe-editor[data-makeover-action='point'] .pm-bot-head,
.pe-editor[data-makeover-action='select'] .pm-bot-head { transform: rotate(8deg) translateY(-1px); }
.pe-editor[data-makeover-action='point'] .pm-bot-arm-right,
.pe-editor[data-makeover-action='select'] .pm-bot-arm-right { transform: rotate(-25deg); }
.pe-editor[data-makeover-action='type'] .pm-bot-head { transform: rotate(5deg); }
.pe-editor[data-makeover-action='type'] .pm-bot-arm-right { animation: pm-bot-work 520ms ease-in-out 3; }
.pe-editor[data-makeover-action='apply'] .pm-bot-body { transform: rotate(3deg); }
.pe-editor[data-makeover-action='apply'] .pm-bot-arm-left { transform: rotate(15deg); }
.pe-editor[data-makeover-action='celebrate'] .pm-bot-body { animation: pm-bot-nod 600ms cubic-bezier(.2,.8,.3,1); }
.pe-editor[data-makeover-action='celebrate'] .pm-bot-arm-right { transform: rotate(-35deg); }
.pe-editor[data-makeover-action='celebrate'] .pm-bot-light { fill: #a0e25b; }
.pe-editor .pm-speech { position: relative; flex: 1; min-width: 0; padding: 8px 12px; background: #fffef9; border: 1px solid #d3decf; border-radius: 12px 12px 12px 3px; box-shadow: 0 2px 0 #dbe2d666; }
.pe-editor .pm-speech::before { content: ''; position: absolute; left: -5px; top: 50%; width: 8px; height: 8px; border-left: 1px solid #d3decf; border-bottom: 1px solid #d3decf; background: #fffef9; transform: rotate(45deg); }
.pe-editor .pm-speech-name { display: block; margin-bottom: 4px; color: #377088; font: 750 8px/1.1 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: .1em; }
.pe-editor .pm-speech p { margin: 0; color: #314936; font: 600 12px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; overflow-wrap: anywhere; }
.pe-editor .pm-thinking { display: none; }
.pe-editor .pm-piece { padding: 7px 13px; border: 1px solid #a2cfe2; border-radius: 7px; background: #fff; color: #33728a; box-shadow: 0 5px 15px #20455826; font: 650 12px/1.4 Arial,sans-serif; }
.pe-editor .pm-piece[hidden] { display: none; }
.pe-editor[data-makeover='paused'] .pm-speech { border-style: dashed; }

/* Keep an example's actual changes distinct from a named outside experiment. */
.pe-editor[data-popup-demo] { --pm-ink: #223c31; --pm-muted: #6c796f; --pm-line: #dde4d9; --pm-paper: #fbfcf8; --pm-green: #287343; }
.pe-editor .pm-panel { min-width: 0; font: 14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color: var(--pm-ink); }
.pe-editor .pm-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pe-editor .pm-maker-mark { display: flex; align-items: center; gap: 8px; }
.pe-editor .pm-maker-mark > img { display: block; flex-shrink: 0; }
.pe-editor .pm-maker-mark > strong { font-size: 15px; font-weight: 750; letter-spacing: -.025em; }
.pe-editor .pm-current-step { margin: 23px 0 20px; }
.pe-editor .pm-step-label { flex: none; margin: 0; font-size: 10px; font-weight: 650; letter-spacing: .06em; color: #74817b; }
.pe-editor .pm-current-step h3 { margin: 0 0 16px; color: #243d34; font: 720 23px/1.15 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.035em; }
/* Reserve the TALLEST case so switching chapters cannot shove the panel.
   Measured across all four: the comparison block runs 66px, except Offer at
   85px (its "after" wraps to two lines), and the step heading runs one line
   except Timing's, which wraps. Without these floors every chapter change
   moved the impact card and everything under it by up to 27px. */
.pe-editor .pm-current-step h3 { min-height: 53px; }
.pe-editor .pm-edit-comparison { display: grid; gap: 10px; align-content: start; }
.pe-editor .pm-edit-comparison > div { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: baseline; gap: 11px; }
.pe-editor .pm-edit-comparison > div > span { color: #748079; font-size: 10px; font-weight: 650; line-height: 1.5; }
/* "After this change" wraps to two lines in the 48px label column while
   "After" does not; the row must not change height when the label swaps. */
.pe-editor .pm-edit-comparison > div > span { min-height: 30px; }
.pe-editor .pm-edit-comparison p { margin: 0; color: #6c766f; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* Reserve TWO lines on each value. Flooring the container in px was brittle —
   it is the wrapping that varies, and it varies with panel width. 13px at
   1.45 makes two lines 38px, so the row holds its height whether the value is
   "0 seconds" or "Your free skincare guide. / Send me the guide". */
.pe-editor .pm-edit-comparison p { min-height: 38px; }
.pe-editor .pm-edit-comparison > div:last-child p { color: #254e3b; font-weight: 650; }
.pe-editor .pm-edit-comparison > div:last-child { padding: 9px 10px; margin-inline: -10px; border-radius: 7px; background: #edf4ee; }

.pe-editor .pm-impact { padding: 18px; border: 1px solid #d3e4d7; border-radius: 13px; background: #f0f7ee; color: #285b3b; box-shadow: none; }
.pe-editor .pm-impact[data-kind='research'] { border-color: #d0e3e9; background: #eef6f9; color: #1c5874; box-shadow: none; }
.pe-editor .pm-impact-kind { margin: 0 0 9px; font-size: 10px; line-height: 1.5; font-weight: 750; letter-spacing: .055em; }
.pe-editor .pm-impact[data-kind='research'] .pm-impact-kind { color: #386782; margin-bottom: 4px; }
.pe-editor .pm-impact-owner { margin: 13px 0 0; color: #496b7c; font-size: 10px; line-height: 1.4; font-weight: 650; }
.pe-editor .pm-impact-number { margin: 13px 0 10px; }
.pe-editor .pm-impact-number > strong { display: block; font-size: clamp(48px,4.8cqi,58px); font-weight: 760; line-height: 1; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.pe-editor .pm-impact[data-format='words'] .pm-impact-number > strong { max-width: 230px; font-size: 32px; line-height: 1.1; letter-spacing: -.04em; }
.pe-editor .pm-impact-number > span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
.pe-editor .pm-impact-comparison { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 13px; border-top: 1px solid #b7cdbb66; }
.pe-editor .pm-impact-comparison small { display: block; margin-bottom: 3px; font-size: 10px; opacity: .8; }
.pe-editor .pm-impact-comparison strong { display: block; font-size: 13px; line-height: 1.35; font-weight: 650; }
.pe-editor .pm-impact-comparison > span { opacity: .6; }
.pe-editor .pm-impact-context { margin: 12px 0 0; color: #4a6351; font-size: 12px; line-height: 1.5; }
.pe-editor .pm-impact[data-kind='research'] .pm-impact-context { color: #39596c; }
.pe-editor .pm-impact[data-comparison='false'] .pm-impact-comparison { display: none; }
.pe-editor .pm-impact-scope { margin: 4px 0 0; color: #4d6b7a; font-size: 11px; line-height: 1.45; font-weight: 400; }
.pe-editor .pm-ready { padding-block: 40px; }
.pe-editor .pm-ready-eyebrow { margin: 0 0 16px; font-size: 9px; line-height: 1.5; letter-spacing: .1em; font-weight: 750; color: #6c8062; }
.pe-editor .pm-ready h3 { margin: 0; color: #233e2c; font: 730 35px/1.08 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing: -.05em; }
.pe-editor .pm-ready-copy { margin: 17px 0 28px; color: #63725d; font-size: 13px; line-height: 1.6; }
.pe-editor .pm-ready-comparison { padding: 20px; background: #edf4e6; border: 1px solid #d5e1cc; border-radius: 12px; }
.pe-editor .pm-ready-comparison > span { display: block; color: #65805c; font-size: 9px; letter-spacing: .08em; font-weight: 700; }
.pe-editor .pm-ready-comparison p { margin: 5px 0 0; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.025em; }
.pe-editor .pm-ready-comparison p:first-of-type { color: #809078; }
.pe-editor .pm-ready-comparison .pm-ready-arrow { margin: 13px 0; font-size: 20px; line-height: 1; }
.pe-editor .pm-ready-footnote { margin: 19px 0 0; color: #77866e; font-size: 11px; line-height: 1.5; }
.pe-editor .pm-evidence { margin-top: 12px; border-top: 1px solid #b7cdbb66; color: inherit; }
.pe-editor .pm-impact[data-kind='research'] .pm-evidence { border-color: #c8dfe8; }
.pe-editor .pm-evidence > summary { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 40px; padding: 11px 0 0; cursor: pointer; list-style: none; }
.pe-editor .pm-evidence > summary::-webkit-details-marker { display: none; }
.pe-editor .pm-evidence summary strong { display: block; font-size: 12px; font-weight: 650; }
.pe-editor .pm-evidence summary i { font-size: 19px; font-style: normal; line-height: 1; }
.pe-editor .pm-evidence[open] summary i { transform: rotate(45deg); }
.pe-editor .pm-evidence-body { padding-top: 10px; }
.pe-editor .pm-evidence-body p { margin: 0 0 8px; color: #4b6571; font-size: 12px; line-height: 1.55; }
.pe-editor .pm-evidence-body a { display: block; width: fit-content; max-width: 100%; padding-block: 5px; color: #126e98; font-size: 11px; line-height: 1.4; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pe-editor .pm-evidence-links { display: flex; flex-wrap: wrap; gap: 0 14px; }
.pe-editor .pm-evidence summary:focus-visible,
.pe-editor .pm-evidence a:focus-visible,
.pe-editor .pm-change-list button:focus-visible { outline: 2px solid #198bbe; outline-offset: 3px; }
.pe-editor .pm-change-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; margin: 20px 0 0; padding: 0; border-bottom: 1px solid #dce4de; list-style: none; }
.pe-editor .pm-change-list > li { min-width: 0; color: #829087; }
.pe-editor .pm-change-list button { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 43px; padding: 10px 2px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pe-editor .pm-change-list button:disabled { cursor: default; }
.pe-editor .pm-change-list button::after { content: ''; position: absolute; bottom: -1px; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: transparent; }
.pe-editor .pm-change-list button:not(:disabled):hover { color: #1c698b; background: #eff6f7; }
.pe-editor .pm-change-list button[aria-pressed='true'] { color: #146c94; font-weight: 700; }
.pe-editor .pm-change-list button[aria-pressed='true']::after { background: #199bd1; }
.pe-editor .pm-step-icon { font-size: 9px; line-height: 1; font-weight: 650; font-variant-numeric: tabular-nums; opacity: .75; }
.pe-editor .pm-step-text { font-size: 11px; line-height: 1.2; font-weight: 650; }
.pe-editor .pm-change-list > li[data-state='done'] { color: #526b5d; }
.pe-editor .pm-change-list > li[data-state='active'] button { color: #146c94; }
.pe-editor .pm-evidence-body .pm-impact-math { padding: 10px; border-radius: 6px; background: #ffffffb0; color: #284f64; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.pe-editor .pm-playback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: 10px; }
.pe-editor .pm-playback > button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 7px 0; border: 0; border-radius: 5px; background: transparent; color: #5b7050; font: 650 11px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; }
.pe-editor .pm-playback > button:hover { color: #243e21; text-decoration: underline; text-underline-offset: 3px; }
.pe-editor .pm-edit-result { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 45px; margin-top: 10px; padding: 11px 14px; border: 1px solid #315e35; border-radius: 7px; background: #365d38; color: #fff; box-shadow: 0 2px 0 #244027; font: 700 12px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; cursor: pointer; }
.pe-editor .pm-edit-result:hover { background: #294c2b; }
.pe-editor .pm-panel button:focus-visible { outline: 3px solid #75b8d6; outline-offset: 3px; }
.pe-editor [data-makeover-pointer][hidden], .pe-editor [data-makeover-selection][hidden], .pe-editor [data-makeover-caret][hidden], .pe-editor [data-makeover-robot][hidden], .pe-editor [data-makeover-audience][hidden], .pe-editor .pm-panel [hidden] { display: none; }
.pe-editor[data-makeover='paused'] :is(.pm-bot-arm-right,.pm-bot-body,.pm-caret,.pm-pointer > i) { animation-play-state: paused; }

@keyframes pm-swap-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
/* Re-triggered from showImpact on every chapter change: the panel updates
   text in place, so without this the content simply blinks to new values. */
.pe-editor .pm-swapping { animation: pm-swap-in 260ms cubic-bezier(.22,1,.36,1) both; }

@keyframes pm-click-ring { 0% { opacity: .55; transform: scale(.45); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes pm-caret-blink { 0%, 45% { opacity: 1; } 46%, 95% { opacity: 0; } }
@keyframes pm-bot-work { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(-22deg); } }
@keyframes pm-bot-nod { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-4px) rotate(-2deg); } 70% { transform: translateY(1px); } }
@keyframes pm-points-rise { 0% { transform: translateY(7px); opacity: .3; } 60% { transform: translateY(-2px); opacity: 1; } 100% { transform: translateY(0); } }
@container pe-editor (min-width: 861px) {
  .pe-editor[data-popup-demo='true'] .pe-frame { height: 620px; }
}
@container pe-editor (max-width: 760px) {
  /* Keep the toolbar in the edit layout so review measures its full footprint. */
  .pe-editor .pm-stage-transport { display: flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 8px; min-height: 57px; padding: 6px 10px; border-bottom: 1px solid #dce4d4; background: #f7faef; color: #36573e; font: 600 13px/1.4 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
  .pe-editor .pm-stage-transport small { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; color: #687a64; }
  .pe-editor .pm-stage-transport b { font-variant-numeric: tabular-nums; }
  .pe-editor .pm-stage-transport button { flex-shrink: 0; padding: 7px 12px; min-height: 44px; border: 1px solid #cbd9c2; border-radius: 6px; color: #335935; background: #fff; font: inherit; cursor: pointer; }
  .pe-editor .pm-stage-transport button[hidden] { display: none; }
  .pe-editor[data-makeover] .pe-canvas { padding: 26px 12px 80px; }
  .pe-editor[data-makeover] [data-popup-review-content] { padding: 18px; }
}
@container pe-editor (max-width: 520px) {
  .pe-editor[data-makeover] .pe-pagebox { padding-inline: 7px; }
  .pe-editor[data-makeover] .pe-canvas { padding: 26px 10px 80px; }
  .pe-editor[data-makeover] .pe-card-image { height: 72px; }
  .pe-section .pe-editor[data-makeover] .pe-card-heading { font-size: min(var(--pe-popup-heading-size), 29px); }
  .pe-editor[data-makeover] .pe-popup-card .pe-card-copy { padding: 21px 20px 18px; }
  .pe-editor[data-makeover] .pe-popup-brand { margin-bottom: 14px; }
  .pe-section .pe-editor[data-makeover] .pe-card-description { font-size: 16px; margin-bottom: 14px; }
  .pe-editor .pm-actor { left: 8px; width: calc(100% - 16px); gap: 3px; }
  .pe-editor .pm-speech { padding: 10px; border-radius: 10px 10px 10px 2px; }
  .pe-editor .pm-speech p { font-size: 11px; line-height: 1.4; }
  .pe-editor .pm-speech-name { font-size: 7px; }
  .pe-editor .pm-audience { font-size: 9px; gap: 4px; }
  .pe-editor[data-makeover] [data-popup-review-content] { padding: 18px 12px; }
  .pe-editor .pm-stage-transport { flex-wrap: wrap; }
  .pe-editor .pm-stage-transport > div { min-width: 0; flex: 1; }
  .pe-editor .pm-stage-transport button { min-height: 44px; font-size: 13px; }
  .pe-editor .pm-score-block { align-items: center; }
  .pe-editor .pm-change-list { margin-top: 16px; }
  .pe-editor .pm-change-list button { min-height: 52px; }
  .pe-editor .pm-step-text { font-size: 11px; }
  .pe-editor .pm-playback > button { min-height: 44px; padding-inline: 4px; font-size: 12px; }
  .pe-editor .pm-impact { padding: 14px; }
  .pe-editor :is(.pm-impact-context,.pm-impact-scope) { font-size: 13px; }
  .pe-editor .pm-evidence > summary { min-height: 44px; }
  .pe-editor .pm-evidence summary strong { font-size: 13px; }
  .pe-editor .pm-evidence-body p { font-size: 14px; }
  .pe-editor .pm-evidence-links { flex-direction: column; }
  .pe-editor .pm-evidence-body a { display: flex; align-items: center; min-height: 44px; padding-block: 10px; font-size: 13px; }
  .pe-editor .pm-ready { padding-block: 24px; }
  .pe-editor .pm-ready h3 { font-size: 30px; }
}
@container pe-editor (max-width: 360px) {
  .pe-editor .pm-change-list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pe-editor .pm-swapping { animation: none; }
  .pe-editor[data-makeover] :is(.pe-canvas,.pe-popup-card,.pe-popup-submit,.pm-target,.pm-removing,.pm-pointer,.pm-bot-head,.pm-bot-body,.pm-bot-arm-left,.pm-bot-arm-right,.pm-score-track > span,.pm-step-points,.pm-change-list > li) { transition: none; }
  .pe-editor[data-makeover] :is(.pm-pointer > i,.pm-caret,.pm-bot-body,.pm-bot-arm-right,.pm-score-gain) { animation: none; }
}