/* Build Workspace -- the promo: one drawing, T1 C3.1 - Level 1, becoming the
 * place where the work collects. See build-workspace.js for the story and
 * the grammar; the engine's shared rules are in tools/shared/promo.css.
 *
 * Authored at 600x580 design px (mobile 340x740); one design px is
 * var(--u), a share of the container's width, so nothing is scaled with a
 * transform. In the 560px desktop column a design px is 0.933 CSS px, which
 * is why no text is set below 12: 12 x 0.933 = 11.2, the 11px floor.
 *
 * Colours sampled from the HP Build concept deck:
 *   violet   actions, the active rail badge, version nodes, Latest
 *   frame    the deck's light grey panel
 *   change   green added, red removed, yellow modified (the visualizer)
 *   markup   red for vectorized paper markups
 *   toast    dark green "Markup updated"; banner: red, not the latest
 *   pins     amber comment, sage task, purple photo, on a white base
 */

.pm--bw {
  --violet: #442DF1;  --violet-tint: #ECE9FE;  --violet-line: #CBC3FB;
  --ink: #1D1D1F;     --grey: #86868B;         --hair: #ECECEE;   --well: #F5F5F7;
  --add: #6EDA74;     --rem: #E5484D;          --mod: #FBC928;
  --markup: #E5251E;  --toast: #216117;        --banner: #A21A1A;
  --amber: #E0982A;   --sage: #A3B98C;         --purple: #8A6EB2;
  --paper: #FAF8F3;
  --sh:      0 calc(18 * var(--u)) calc(40 * var(--u)) calc(-14 * var(--u)) rgba(24, 24, 40, .16), 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(24, 24, 40, .08);
  --sh-sm:   0 calc(4 * var(--u)) calc(12 * var(--u)) calc(-4 * var(--u)) rgba(24, 24, 40, .16), 0 0 0 calc(.5 * var(--u)) rgba(24, 24, 40, .04);
  --sh-lift: 0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-16 * var(--u)) rgba(24, 24, 40, .26), 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-10 * var(--u)) rgba(24, 24, 40, .12);

  --u: calc(100cqw / 600);
  position: relative; width: 100%; height: calc(580 * var(--u)); flex: none; overflow: hidden;
  background: #EFEFEF; border-radius: calc(32 * var(--u));
  font-family: "SF Pro Text", "SF Pro Display", -apple-system, system-ui, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400; color: var(--ink); line-height: 1.3;
  -webkit-font-smoothing: antialiased; text-align: left;
}
.pm--bw.pm--m { --u: calc(100cqw / 340); height: calc(740 * var(--u)); border-radius: calc(26 * var(--u)); }
.pm--bw .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6;
              stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pm--bw .pm__anim { pointer-events: none; }   /* the story is decoration; the rail stays clickable */
/* The case-study body styles every <p> (.study .body p: a bottom margin, and
   text-wrap: pretty, which also undoes nowrap). The promo's own text is in
   divs so that rule never reaches it; the engine's caption is a <p>. */
.study .body .pm--bw .pm__cap { margin: 0; text-wrap: inherit; }

/* --- rail: the deck's numbered phase badges ----------------------------- */
.pm--bw .bw-rail { position: absolute; left: calc(24 * var(--u)); top: calc(18 * var(--u)); width: calc(500 * var(--u)); height: calc(32 * var(--u));
                   display: flex; align-items: center; }
.pm--bw .pm__node { appearance: none; border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
                    display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--grey); font-size: calc(13 * var(--u)); white-space: nowrap; }
.pm--bw .bw-badge { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(7 * var(--u)); display: grid; place-items: center;
                    box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--violet-line); color: var(--violet); font-weight: 500; font-size: calc(13 * var(--u)); }
.pm--bw .pm__node[aria-current="step"] { color: var(--ink); font-weight: 500; }
.pm--bw .pm__node[aria-current="step"] .bw-badge { background: var(--violet); color: #fff; box-shadow: none; }
.pm--bw .bw-cn { flex: 1; height: calc(2 * var(--u)); margin: 0 calc(10 * var(--u)); border-radius: calc(1 * var(--u));
                 background: var(--violet-line); position: relative; overflow: hidden; }
.pm--bw .bw-cn > i { position: absolute; inset: 0; background: var(--violet); transform-origin: 0 50%; transform: scaleX(0); }
.pm--bw .pm__node:focus-visible, .pm--bw .pm__pp:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 6px; }   /* real px */
.pm--bw .pm__pp { position: absolute; right: calc(20 * var(--u)); top: calc(16 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%;
                  appearance: none; border: 0; padding: 0; background: #fff; color: var(--ink); cursor: pointer;
                  display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); }
.pm--bw .pm__pp .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pm--bw .pm__cap { position: absolute; left: calc(24 * var(--u)); top: calc(62 * var(--u)); font-size: calc(14 * var(--u)); white-space: nowrap; }

/* stage coordinates are frame coordinates */
.pm--bw .pm__stage, .pm--bw .pm__float { position: absolute; left: 0; top: 0; width: calc(600 * var(--u)); height: calc(580 * var(--u)); }
.pm--bw .pm__float { z-index: 3; }
.pm--bw.pm--m .pm__stage, .pm--bw.pm--m .pm__float { width: calc(340 * var(--u)); height: calc(740 * var(--u)); }

/* --- cards -------------------------------------------------------------- */
.pm--bw .c  { position: absolute; background: #fff; border-radius: calc(20 * var(--u)); box-shadow: var(--sh); padding: calc(16 * var(--u)) calc(18 * var(--u)); }
.pm--bw .ch { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.pm--bw .ch__t { font-size: calc(15 * var(--u)); font-weight: 500; flex: 1; white-space: nowrap; }
.pm--bw .ch__x { color: var(--grey); width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pm--bw .bw-k { font-size: calc(12 * var(--u)); color: var(--grey); margin-top: calc(8 * var(--u)); }

/* --- the drawing card --------------------------------------------------- */
.pm--bw .bw-card { position: absolute; background: #fff; border-radius: calc(22 * var(--u)); overflow: hidden; box-shadow: var(--sh); }
.pm--bw .bw-plan { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pm--bw .bw-plan__img { display: block; width: 100%; height: 100%; }
.pm--bw .bw-out { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm--bw .bw-out path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.pm--bw .bw-out__mod { stroke: var(--mod); stroke-width: 33; }
.pm--bw .bw-out__add { stroke: var(--add); stroke-width: 16; stroke-linejoin: round; }

.pm--bw .bw-tools { position: absolute; background: #fff; border-radius: calc(14 * var(--u)); box-shadow: var(--sh-sm);
                    padding: calc(6 * var(--u)) 0; display: flex; flex-direction: column; }
.pm--bw .bw-tool { position: relative; isolation: isolate; height: calc(46 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center;
                   gap: calc(3 * var(--u)); font-size: calc(12 * var(--u)); }
.pm--bw .bw-tool .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.pm--bw .bw-tool__hl { position: absolute; inset: calc(2 * var(--u)) calc(5 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--violet-tint);
                       opacity: 0; z-index: -1; }
.pm--bw.pm--m .bw-tool { height: calc(40 * var(--u)); }

.pm--bw .bw-bar { position: absolute; display: flex; align-items: center; gap: calc(6 * var(--u)); }
.pm--bw .bw-pill { height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: var(--sh-sm);
                   display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(13 * var(--u)); white-space: nowrap; }
.pm--bw .bw-pill .ic { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.pm--bw .bw-latest { position: relative; height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(8 * var(--u)); border-radius: calc(14 * var(--u));
                     background: var(--violet-tint); color: var(--violet); display: inline-flex; align-items: center; gap: calc(4 * var(--u));
                     font-size: calc(12.5 * var(--u)); font-weight: 500; white-space: nowrap; }
.pm--bw .bw-latest .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2.4; }
.pm--bw .bw-latest path { stroke-dasharray: 1; }
.pm--bw.pm--m .bw-pill { height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); gap: calc(4 * var(--u)); }
.pm--bw.pm--m .bw-bar { gap: calc(4 * var(--u)); }
.pm--bw.pm--m .bw-pill { padding: 0 calc(8 * var(--u)); }
.pm--bw.pm--m .bw-sheet .ic { display: none; }   /* three chips across 266px: the chevron goes */
.pm--bw.pm--m .bw-latest { padding: 0 calc(8 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(12 * var(--u)); }
.pm--bw .bw-file { position: absolute; color: var(--ink); }
.pm--bw .bw-file .ic { color: var(--violet); }

/* a soft ring, for the accent pulses and the closing beat */
.pm--bw .bw-ring { position: absolute; inset: calc(-4 * var(--u)); border-radius: inherit; box-shadow: 0 0 0 calc(2 * var(--u)) var(--violet);
                   opacity: 0; pointer-events: none; }

/* --- version control ---------------------------------------------------- */
.pm--bw .bw-hist { position: relative; }
.pm--bw .bw-hist__line { position: absolute; left: calc(6.25 * var(--u)); top: calc(10 * var(--u)); bottom: calc(24 * var(--u)); width: calc(1.5 * var(--u)); background: var(--violet-line); }
.pm--bw .bw-vrow { position: relative; padding: 0 0 calc(14 * var(--u)) calc(26 * var(--u)); }
.pm--bw .bw-vrow:last-child { padding-bottom: 0; }
.pm--bw .bw-node { position: absolute; left: 0; top: calc(2 * var(--u)); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
                   background: #fff; box-shadow: inset 0 0 0 calc(2 * var(--u)) var(--violet); }
.pm--bw .bw-node > i { position: absolute; inset: 0; border-radius: 50%; background: var(--violet); }
.pm--bw .bw-vrow__v { font-size: calc(13.5 * var(--u)); font-weight: 500; }
.pm--bw .bw-vrow__d { font-size: calc(12 * var(--u)); color: var(--grey); margin-top: calc(2 * var(--u)); }
.pm--bw .bw-vrow__t { font-size: calc(12.5 * var(--u)); line-height: 1.35; margin-top: calc(2 * var(--u)); }

/* --- changes visualizer ------------------------------------------------- */
.pm--bw .bw-sub { font-size: calc(12 * var(--u)); color: var(--grey); margin: calc(-6 * var(--u)) 0 calc(12 * var(--u)); }
.pm--bw .bw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.pm--bw .bw-tile { position: relative; background: var(--well); border-radius: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(8 * var(--u)) calc(13 * var(--u)); }
.pm--bw .bw-tile::before, .pm--bw .bw-li::before { content: ""; position: absolute; left: calc(5 * var(--u)); top: calc(9 * var(--u)); bottom: calc(9 * var(--u));
                                                   width: calc(3 * var(--u)); border-radius: calc(2 * var(--u)); }
.pm--bw .bw-tile--add::before, .pm--bw .bw-li--add::before { background: var(--add); }
.pm--bw .bw-tile--rem::before { background: var(--rem); }
.pm--bw .bw-tile--mod::before, .pm--bw .bw-li--mod::before { background: var(--mod); }
.pm--bw .bw-tile__n { font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1.1; }
.pm--bw .bw-tile__l { font-size: calc(12 * var(--u)); color: var(--grey); }
.pm--bw .bw-chips { display: flex; flex-wrap: wrap; gap: calc(5 * var(--u)); margin-top: calc(6 * var(--u)); }
.pm--bw .bw-chips span { display: inline-flex; align-items: center; height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(13 * var(--u));
                         box-shadow: inset 0 0 0 calc(1 * var(--u)) #DCDCE0; font-size: calc(12 * var(--u)); }
.pm--bw .bw-list { margin-top: calc(12 * var(--u)); }
.pm--bw .bw-li { position: relative; font-size: calc(12.5 * var(--u)); padding: calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(14 * var(--u)); border-top: calc(1 * var(--u)) solid var(--hair); }
.pm--bw .bw-li::before { left: 0; }

/* --- pins: a white base holding the kind's icon ------------------------- */
.pm--bw .bw-pin { position: absolute; left: 0; top: 0; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(-15 * var(--u)) 0 0 calc(-15 * var(--u)); border-radius: 50%; }
.pm--bw .bw-pin__b { position: absolute; inset: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-sm); display: grid; place-items: center; }
.pm--bw .bw-pin__i { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); display: grid; place-items: center; color: #fff; }
.pm--bw .bw-pin__i .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 1.9; }
.pm--bw .bw-pin--comment .bw-pin__i { background: var(--amber); }
.pm--bw .bw-pin--task .bw-pin__i { background: var(--sage); }
.pm--bw .bw-pin--photo .bw-pin__i { background: var(--purple); }
.pm--bw .bw-pin__sh { position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); bottom: calc(-6 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
                      background: radial-gradient(closest-side, rgba(24, 24, 40, .28), rgba(24, 24, 40, 0)); }

/* --- the red arrow: tip at 8/196, 60/96 of its box ---------------------- */
.pm--bw .bw-arrow { position: absolute; left: 0; top: 0; width: calc(64 * var(--u)); height: calc(31.35 * var(--u));
                    margin: calc(-19.59 * var(--u)) 0 0 calc(-2.61 * var(--u)); transform-origin: 4.082% 62.5%; }
.pm--bw .bw-arrow__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pm--bw .bw-arrow__svg path { fill: none; stroke: var(--markup); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.pm--bw .bw-arrow .bw-ring { inset: auto; left: calc(4.082% - 18 * var(--u)); top: calc(62.5% - 18 * var(--u)); width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; }

/* --- the task popover ---------------------------------------------------- */
.pm--bw .bw-task { padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); }
.pm--bw .bw-task__k { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--grey); }
.pm--bw .bw-task__k .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); color: var(--sage); stroke-width: 2; }
.pm--bw .bw-task__t { font-size: calc(15 * var(--u)); font-weight: 500; margin: calc(4 * var(--u)) 0 calc(8 * var(--u)); }
.pm--bw .bw-prio { display: inline-flex; align-items: center; height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(12 * var(--u));
                   background: #FBE3E1; color: var(--banner); font-size: calc(12.5 * var(--u)); }
.pm--bw .bw-who { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--u)); }
.pm--bw .bw-av { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--violet-tint); color: var(--violet);
                 display: grid; place-items: center; font-size: calc(12.5 * var(--u)); font-weight: 500; }

/* --- the paper markup scan ---------------------------------------------- */
.pm--bw .bw-thumb { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); }
.pm--bw .bw-scan { position: relative; height: calc(104 * var(--u)); border-radius: calc(8 * var(--u)); overflow: hidden; background: var(--paper);
                   box-shadow: inset 0 0 0 calc(1 * var(--u)) #E7E2D6; }
.pm--bw .bw-scan img { position: absolute; left: calc(-157.5 * var(--u)); top: calc(-105.5 * var(--u)); width: calc(523.8 * var(--u)); max-width: none; mix-blend-mode: multiply; }
.pm--bw .bw-scan__arrow { position: absolute; left: calc(65.2 * var(--u)); top: calc(38.5 * var(--u)); width: calc(44 * var(--u)); height: calc(21.55 * var(--u)); }
.pm--bw .bw-scan__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pm--bw .bw-scan__arrow path { fill: none; stroke: var(--markup); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.pm--bw .bw-thumb__t { font-size: calc(13 * var(--u)); font-weight: 500; margin: calc(8 * var(--u)) calc(2 * var(--u)) 0; }
.pm--bw .bw-thumb__s { font-size: calc(12 * var(--u)); color: var(--grey); margin: calc(2 * var(--u)) calc(2 * var(--u)) 0; }   /* block, not flex: flex would eat the spaces around the dot */
.pm--bw .bw-dot { display: inline-block; vertical-align: calc(1 * var(--u)); width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--markup); margin-right: calc(5 * var(--u)); }

/* --- the printed sheet --------------------------------------------------- */
.pm--bw .bw-paper { position: absolute; background: var(--paper); border-radius: calc(3 * var(--u)); padding: calc(14 * var(--u));
                    box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(24, 24, 40, .10), 0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(24, 24, 40, .24); }
.pm--bw .bw-paper > img { display: block; width: 100%; mix-blend-mode: multiply; }
.pm--bw .bw-paper__t { font-size: calc(12 * var(--u)); color: var(--grey); margin-top: calc(8 * var(--u)); }
.pm--bw .bw-qr { position: absolute; z-index: 2; top: calc(10 * var(--u)); right: calc(10 * var(--u)); width: calc(58 * var(--u)); height: calc(58 * var(--u));
                 padding: calc(7 * var(--u)); background: #fff; border-radius: calc(9 * var(--u)); box-shadow: var(--sh-sm); color: #111; }
.pm--bw .bw-qr svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.pm--bw .bw-scanner { position: absolute; inset: calc(-8 * var(--u)); }
.pm--bw .bw-scanner b { position: absolute; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border: 0 solid var(--violet); }
.pm--bw .bw-scanner b:nth-child(1) { left: 0; top: 0; border-width: calc(3 * var(--u)) 0 0 calc(3 * var(--u)); border-top-left-radius: calc(5 * var(--u)); }
.pm--bw .bw-scanner b:nth-child(2) { right: 0; top: 0; border-width: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; border-top-right-radius: calc(5 * var(--u)); }
.pm--bw .bw-scanner b:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 calc(3 * var(--u)) calc(3 * var(--u)); border-bottom-left-radius: calc(5 * var(--u)); }
.pm--bw .bw-scanner b:nth-child(4) { right: 0; bottom: 0; border-width: 0 calc(3 * var(--u)) calc(3 * var(--u)) 0; border-bottom-right-radius: calc(5 * var(--u)); }
/* the watermark: the print washes out under a paper veil, and says what it is */
.pm--bw .bw-wm { position: absolute; inset: 0; border-radius: inherit; background: rgba(250, 248, 243, .7);
                 display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--u)); z-index: 1; }
.pm--bw .bw-wm__t { font-size: calc(26 * var(--u)); font-weight: 500; color: var(--banner); letter-spacing: -.01em; }
.pm--bw .bw-wm__v { font-size: calc(13 * var(--u)); color: var(--grey); }

/* --- the Logbook phone --------------------------------------------------- */
.pm--bw .bw-phone { position: absolute; height: calc(344 * var(--u)); background: #fff; border-radius: calc(28 * var(--u)); padding: calc(8 * var(--u));
                    box-shadow: inset 0 0 0 calc(1 * var(--u)) #DADADE, var(--sh); display: flex; flex-direction: column; }
.pm--bw.pm--m .bw-phone { height: calc(320 * var(--u)); }
.pm--bw .bw-phone__bar { height: calc(34 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(6 * var(--u));
                         font-size: calc(12 * var(--u)); flex: none; }
.pm--bw .bw-phone__bar span { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); white-space: nowrap; }
.pm--bw .bw-phone__bar .ic { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.pm--bw .bw-vf { position: relative; flex: 1; border-radius: calc(16 * var(--u)); overflow: hidden; }
.pm--bw .bw-vf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pm--bw .bw-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.pm--bw .bw-cats { display: flex; justify-content: center; gap: calc(4 * var(--u)); margin: calc(8 * var(--u)) 0 calc(6 * var(--u)); flex: none; }
.pm--bw .bw-cats > span, .pm--bw .bw-cats .stack > span { display: inline-flex; align-items: center; height: calc(24 * var(--u)); padding: 0 calc(8 * var(--u));
                                                          border-radius: calc(12 * var(--u)); background: var(--well); color: var(--grey); font-size: calc(12 * var(--u)); }
.pm--bw .bw-cats .bw-cat { background: var(--violet); color: #fff; }
.pm--bw .bw-shutter { align-self: center; flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; margin-bottom: calc(2 * var(--u));
                      background: #fff; box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff, inset 0 0 0 calc(4 * var(--u)) #CFCFD4, 0 0 0 calc(2 * var(--u)) #CFCFD4; }
.pm--bw .bw-shot { position: absolute; object-fit: cover; border-radius: calc(16 * var(--u)); }

/* --- toast and banner: one bottom-left slot ----------------------------- */
.pm--bw .bw-slot { position: absolute; }
.pm--bw .bw-toast, .pm--bw .bw-banner { position: absolute; left: 0; bottom: 0; }
.pm--bw .bw-toast { height: calc(44 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--toast); color: #fff;
                    display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); white-space: nowrap; box-shadow: var(--sh); }
.pm--bw .bw-toast__i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #fff; color: var(--toast); display: grid; place-items: center; }
.pm--bw .bw-toast__i .ic { width: calc(14 * var(--u)); height: calc(14 * var(--u)); stroke-width: 2.6; }
/* the banner: the toast's shape, in red, with its one action */
.pm--bw .bw-banner { height: calc(44 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u));
                     background: var(--banner); color: #fff; box-shadow: var(--sh);
                     display: inline-flex; align-items: center; gap: calc(10 * var(--u)); white-space: nowrap; }
.pm--bw .bw-banner__i { display: grid; place-items: center; }
.pm--bw .bw-banner__i .ic { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2; }
.pm--bw .bw-banner__t { font-size: calc(13.5 * var(--u)); }
.pm--bw .bw-banner__b { display: inline-flex; align-items: center; height: calc(32 * var(--u)); margin-left: calc(4 * var(--u)); padding: 0 calc(12 * var(--u));
                        border-radius: calc(8 * var(--u)); background: #fff; color: var(--banner); font-size: calc(12.5 * var(--u)); font-weight: 500; }
/* narrow: the action drops under the message */
.pm--bw.pm--m .bw-banner { height: auto; width: calc(296 * var(--u)); flex-wrap: wrap; white-space: normal; padding: calc(10 * var(--u)) calc(12 * var(--u)); row-gap: calc(8 * var(--u)); }
.pm--bw.pm--m .bw-banner__t { flex: 1 0 calc(220 * var(--u)); }   /* fills the first line, so the button wraps */
.pm--bw.pm--m .bw-banner__b { margin-left: calc(30 * var(--u)); }

/* --- mobile frame: the same story, laid out narrow ---------------------- */
.pm--bw.pm--m .bw-rail { left: calc(14 * var(--u)); top: calc(14 * var(--u)); width: calc(312 * var(--u)); height: calc(46 * var(--u)); align-items: flex-start; }
.pm--bw.pm--m .pm__node { flex-direction: column; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); }
.pm--bw.pm--m .bw-badge { width: calc(24 * var(--u)); height: calc(24 * var(--u)); font-size: calc(12 * var(--u)); }
.pm--bw.pm--m .bw-cn { margin: calc(11 * var(--u)) calc(4 * var(--u)) 0; }
.pm--bw.pm--m .pm__pp { right: calc(12 * var(--u)); top: calc(64 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.pm--bw.pm--m .pm__cap { left: calc(16 * var(--u)); top: calc(72 * var(--u)); font-size: calc(13 * var(--u)); }

/* sticky centring: 580 x 560/600 = 541 tall in the 560px column */
.pmr__vis { --pmr-half: 271px; }

/* --- the prose beside the promo: the four steps, the three decisions ---- */
/* scoped like style.css's .study .body rules, which would otherwise win */
.study .body .pmr__prose > .step-no { margin-top: 3rem; }
.study .body .pmr__prose > h2 + .step-no { margin-top: 0; }
.study .body .pmr__prose > .bw-dec { margin-top: 3rem; }