/* ==========================================================================
   bwb-premium.css — site-wide premium design layer
   --------------------------------------------------------------------------
   Loaded on every page next to bwb-fit.css. It is ADDITIVE: it introduces its
   own --pm-* tokens and pm-/is- classes and never redefines the per-page
   tokens (--obsidian, --ind, …) that individual pages already rely on, so a
   section keeps its own accent while gaining the same depth, rhythm and motion
   as the rest of the site.

   Three rules this file keeps to:

   1. Nothing is hidden unless JavaScript is running. Every reveal rule is
      scoped under html.bwb-pm, a class bwb-premium.js adds on boot. If the
      script fails, is blocked, or the browser is old, the page renders exactly
      as it did before rather than as a blank column.
   2. Motion is opacity and transform only — never width, height, top or left —
      so nothing here can shift layout or cost Cumulative Layout Shift, which
      matters for both search ranking and ad viewability.
   3. prefers-reduced-motion switches all of it off, at the bottom of the file.
   ========================================================================== */

:root {
  /* ── depth ─────────────────────────────────────────────────────────────
     A single dark ramp the whole site shares. These match the --obsidian
     family already used on the homepage, so sections that define their own
     backgrounds sit flush against these rather than banding against them. */
  --pm-void:      #04060e;
  --pm-bg:        #070b16;
  --pm-bg-soft:   #0b1120;
  --pm-surface:   rgba(255, 255, 255, .034);
  --pm-surface-2: rgba(255, 255, 255, .055);
  --pm-rim:       rgba(255, 255, 255, .085);
  --pm-rim-2:     rgba(255, 255, 255, .16);
  --pm-rim-lit:   rgba(255, 255, 255, .30);

  /* ── brand spectrum ────────────────────────────────────────────────────
     Violet is the anchor; cyan and pink are the two ends of the sweep used by
     gradient text and glows. Amber stays the "free / reward" colour. */
  --pm-violet:    #6d5ef8;
  --pm-violet-lt: #8b7dff;
  --pm-indigo:    #4f46e5;
  --pm-cyan:      #22d3ee;
  --pm-teal:      #2dd4bf;
  --pm-pink:      #f471b5;
  --pm-amber:     #fbbf24;

  --pm-grad:      linear-gradient(110deg, var(--pm-violet-lt) 0%, var(--pm-cyan) 42%, var(--pm-pink) 78%, var(--pm-violet-lt) 100%);
  --pm-grad-warm: linear-gradient(110deg, var(--pm-amber), var(--pm-pink), var(--pm-violet-lt));

  /* ── ink ───────────────────────────────────────────────────────────── */
  --pm-ink:       #f4f6ff;
  --pm-ink-2:     rgba(233, 238, 255, .74);
  --pm-ink-3:     rgba(206, 216, 245, .52);

  /* ── elevation ─────────────────────────────────────────────────────────
     Two shadows per level: a tight contact shadow and a wide ambient one.
     A single large blur reads as fog; the pair reads as a lifted object. */
  --pm-sh-1: 0 1px 2px rgba(2, 4, 12, .40), 0 4px 14px rgba(2, 4, 12, .34);
  --pm-sh-2: 0 2px 4px rgba(2, 4, 12, .44), 0 12px 34px rgba(2, 4, 12, .46);
  --pm-sh-3: 0 4px 8px rgba(2, 4, 12, .46), 0 26px 64px rgba(2, 4, 12, .56);
  --pm-glow-violet: 0 14px 44px -12px rgba(109, 94, 248, .55);
  --pm-glow-cyan:   0 14px 44px -12px rgba(34, 211, 238, .42);

  /* ── motion ────────────────────────────────────────────────────────────
     One spring-ish curve for entrances, one soft curve for state changes. */
  --pm-ease:    cubic-bezier(.22, 1, .36, 1);
  --pm-ease-io: cubic-bezier(.65, 0, .35, 1);
  --pm-fast:    .22s;
  --pm-mid:     .42s;
  --pm-slow:    .78s;

  --pm-radius:  18px;
  --pm-radius-s: 12px;
  --pm-maxw:    1200px;
}

/* ==========================================================================
   1. Ambient background
   Two fixed, painted-once layers behind everything: a slow aurora and a fine
   grain. Both are pointer-events:none and sit at z-index 0 with no stacking
   context of their own, so page content and ad slots stay exactly where the
   page put them.
   ========================================================================== */

html.bwb-pm body::before,
html.bwb-pm body::after {
  content: "";
  position: fixed;
  /* inset MUST stay at 0. An earlier version bled -20vmax past the viewport to
     give the aurora room to drift, and bwb-fit.js — which measures the document
     for horizontal overflow and reflows the page when it finds any — read that
     bleed as overflow and collapsed the homepage hero's two-column grid into
     one. The drift is done with background-position below instead, which cannot
     overflow anything. */
  inset: 0;
  pointer-events: none;
  /* Behind every piece of page content, without the page having to be touched.
     The first version of this sat at z-index 0 and raised each child of <body>
     to z-index 1 to clear it — which quietly changed the containing block for
     any absolutely positioned descendant, and the homepage hero lost the
     dashboard mock floating beside it. Nothing here may alter where the page
     lays its own elements out. */
  z-index: -1;
}

/* aurora — three soft radial blooms drifting against each other */
html.bwb-pm body::before {
  background:
    radial-gradient(42vmax 42vmax at 14% 6%,  rgba(109, 94, 248, .22), transparent 62%),
    radial-gradient(38vmax 38vmax at 88% 12%, rgba(34, 211, 238, .14), transparent 60%),
    radial-gradient(46vmax 46vmax at 62% 92%, rgba(244, 113, 181, .12), transparent 64%);
  background-repeat: no-repeat;
  background-size: 170% 170%, 160% 160%, 190% 190%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  filter: blur(22px) saturate(118%);
  animation: pm-aurora 38s var(--pm-ease-io) infinite alternate;
  will-change: background-position;
}

/* grain — stops the large flat areas of dark from banding on cheap panels */
html.bwb-pm body::after {
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

@keyframes pm-aurora {
  0%   { background-position:  0%  0%, 100%  0%, 50% 100%; }
  50%  { background-position: 14% 10%,  84% 14%, 38%  86%; }
  100% { background-position:  6% 18%,  92%  6%, 58%  94%; }
}

/* For a z-index:-1 layer on body to be visible at all, body's own background
   must not be painted over it. bwb-premium.js moves whatever background the
   page set on <body> up to <html> once, on boot, and adds this class — so the
   page keeps exactly the backdrop it chose and the aurora sits behind it. */
html.bwb-pm.pm-bg-moved body { background: transparent !important; }

/* ==========================================================================
   2. Reveal on scroll
   pm-rv is applied by the script, so these rules can only ever hide content
   while the script is alive to un-hide it. .is-in is added by the observer.
   ========================================================================== */

html.bwb-pm .pm-rv {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity   var(--pm-slow) var(--pm-ease),
    transform var(--pm-slow) var(--pm-ease);
  transition-delay: var(--pm-d, 0ms);
  will-change: opacity, transform;
}
html.bwb-pm .pm-rv.is-in {
  opacity: 1;
  transform: none;
}
/* once it has arrived, drop the compositor hint again */
html.bwb-pm .pm-rv.is-done { will-change: auto; }

/* directional variants, chosen by the script from the element's role */
html.bwb-pm .pm-rv-l    { transform: translate3d(-34px, 0, 0); }
html.bwb-pm .pm-rv-r    { transform: translate3d(34px, 0, 0); }
html.bwb-pm .pm-rv-zoom { transform: scale(.94); }
html.bwb-pm .pm-rv-blur { filter: blur(9px); transition: opacity var(--pm-slow) var(--pm-ease), transform var(--pm-slow) var(--pm-ease), filter var(--pm-slow) var(--pm-ease); }
html.bwb-pm .pm-rv-blur.is-in { filter: blur(0); }

/* ==========================================================================
   3. Page entrance + route transition
   ========================================================================== */

/* Opacity only — no transform on <body>, ever.
   This animation used to lift the page 8px as it faded in, with
   animation-fill-mode: both. That retains the animated properties after the
   animation finishes, so <body> kept a transform permanently; and ANY transform
   on an ancestor makes that ancestor the containing block for its
   position:fixed descendants. The result was that the chat bubble and the
   subscribe pill stopped floating over the viewport and parked themselves at
   the bottom of the DOCUMENT instead — 13,398px down the homepage. Fading the
   page in costs nothing; moving it costs every fixed element on the site. */
html.bwb-pm body { animation: pm-page-in .5s var(--pm-ease) both; }
@keyframes pm-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* set on <html> just before a same-site navigation */
/* Likewise on the way out: a transform here would break fixed positioning for
   the duration of the fade. */
html.bwb-pm.pm-leaving body {
  opacity: 0;
  transition: opacity .2s ease-in;
  animation: none;
}

/* ==========================================================================
   4. Scroll progress
   ========================================================================== */

.pm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--pm-p, 0));
  background: var(--pm-grad);
  background-size: 260% 100%;
  animation: pm-sweep 7s linear infinite;
  z-index: 2147483000;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(109, 94, 248, .6);
}
@keyframes pm-sweep { to { background-position: 260% 0; } }

/* ==========================================================================
   5. Gradient display type
   Applied by the script to the first heading of a page, and available as a
   class anywhere.
   ========================================================================== */

.pm-gradient-text,
html.bwb-pm .pm-h1-grad {
  background: var(--pm-grad);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: pm-sweep 9s linear infinite;
}
/* A gradient on text kills the browser's own contrast handling, so a readable
   solid colour is kept underneath for anyone whose browser drops the clip. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .pm-gradient-text, html.bwb-pm .pm-h1-grad { color: var(--pm-ink); -webkit-text-fill-color: currentColor; }
}

/* ==========================================================================
   6. Surfaces — glass cards
   Scoped to pm-surface, which the script adds to elements that already look
   like cards, so no page's own layout is overridden blind.
   ========================================================================== */

html.bwb-pm .pm-surface {
  position: relative;
  background: linear-gradient(168deg, var(--pm-surface-2), var(--pm-surface));
  /* The rim is an inset shadow rather than a border on purpose: a 1px border
     adds 2px to the element's box, which reflowed the AI-tools page by 6px.
     An inset shadow draws the same line and costs no layout. */
  border-radius: var(--pm-radius);
  box-shadow: inset 0 0 0 1px var(--pm-rim), var(--pm-sh-1);
  /* No backdrop-filter. It establishes a formatting context, which stops the
     margins of a card's first child collapsing with the card — six cards on the
     how-it-works page each gained 27px and the section grew by 164px. The glass
     here is carried by the gradient, the inset rim and the shadow; a blur of a
     backdrop that is opaque anyway bought nothing. */
  transition:
    transform  var(--pm-mid) var(--pm-ease),
    box-shadow var(--pm-mid) var(--pm-ease);
}

/* pm-lift: for a card that already has its own background and border. It gets
   the motion and the shadow of the design system without having its colour
   replaced, so a section that was deliberately styled stays deliberately
   styled. */
html.bwb-pm .pm-lift {
  position: relative;
  transition:
    transform    var(--pm-mid) var(--pm-ease),
    box-shadow   var(--pm-mid) var(--pm-ease),
    border-color var(--pm-mid) var(--pm-ease),
    filter       var(--pm-mid) var(--pm-ease);
}
html.bwb-pm .pm-lift:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: var(--pm-sh-2), var(--pm-glow-violet);
  filter: brightness(1.06) saturate(108%);
}
html.bwb-pm .pm-lift.pm-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--pm-mid) var(--pm-ease);
  background: radial-gradient(420px circle at var(--pm-mx, 50%) var(--pm-my, 50%),
    rgba(139, 125, 255, .14), transparent 46%);
}
html.bwb-pm .pm-lift.pm-sheen:hover::after { opacity: 1; }

/* the thin lit edge along the top that makes glass read as glass */
html.bwb-pm .pm-surface::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--pm-rim-lit) 22%, var(--pm-rim-lit) 78%, transparent);
  opacity: .7;
  pointer-events: none;
}

html.bwb-pm .pm-surface:hover {
  transform: translate3d(0, -4px, 0);
  box-shadow: inset 0 0 0 1px var(--pm-rim-2), var(--pm-sh-2), var(--pm-glow-violet);
}

/* a cursor-following sheen, positioned by the script via --pm-mx/--pm-my */
html.bwb-pm .pm-surface.pm-sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--pm-mid) var(--pm-ease);
  background: radial-gradient(
    420px circle at var(--pm-mx, 50%) var(--pm-my, 50%),
    rgba(139, 125, 255, .16),
    transparent 46%);
}
html.bwb-pm .pm-surface.pm-sheen:hover::after { opacity: 1; }

/* 3D tilt — the script sets the two angles from pointer position */
html.bwb-pm .pm-tilt {
  transform: perspective(900px)
             rotateX(var(--pm-rx, 0deg))
             rotateY(var(--pm-ry, 0deg))
             translate3d(0, var(--pm-ty, 0), 0);
  transform-style: preserve-3d;
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

html.bwb-pm .pm-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform  var(--pm-fast) var(--pm-ease),
    box-shadow var(--pm-fast) var(--pm-ease),
    filter     var(--pm-fast) var(--pm-ease);
}
html.bwb-pm .pm-btn:hover  { transform: translate3d(0, -2px, 0); filter: brightness(1.07); }
html.bwb-pm .pm-btn:active { transform: translate3d(0, 0, 0)  ; filter: brightness(.97); }

/* the shine that crosses a button on hover */
html.bwb-pm .pm-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  transition: transform .62s var(--pm-ease);
}
html.bwb-pm .pm-btn:hover::after { transform: translateX(130%) skewX(-18deg); }

/* primary actions get the brand glow */
html.bwb-pm .pm-btn-primary:hover { box-shadow: var(--pm-glow-violet); }

/* magnetic pull, driven by the script */
html.bwb-pm .pm-magnet {
  transform: translate3d(var(--pm-mgx, 0), var(--pm-mgy, 0), 0);
  transition: transform .18s var(--pm-ease);
}
html.bwb-pm .pm-magnet.pm-magnet-off { transition: transform .5s var(--pm-ease); }

/* ==========================================================================
   8. Header
   ========================================================================== */

html.bwb-pm .pm-header {
  transition:
    background-color var(--pm-mid) var(--pm-ease),
    box-shadow       var(--pm-mid) var(--pm-ease),
    border-color     var(--pm-mid) var(--pm-ease),
    backdrop-filter  var(--pm-mid) var(--pm-ease);
}
html.bwb-pm .pm-header.pm-stuck {
  background-color: rgba(7, 11, 22, .76) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid var(--pm-rim);
  box-shadow: var(--pm-sh-2);
}

/* underline that grows from the centre on nav links */
html.bwb-pm .pm-navlink { position: relative; }
html.bwb-pm .pm-navlink::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--pm-grad);
  background-size: 260% 100%;
  transform: translateX(-50%);
  transition: width var(--pm-mid) var(--pm-ease);
}
html.bwb-pm .pm-navlink:hover::after,
html.bwb-pm .pm-navlink:focus-visible::after { width: 100%; }

/* ==========================================================================
   9. Floating buttons
   The chat bubble, the subscribe pill and (on lessons) the worksheet tab were
   each positioned independently and overlapped in the bottom-right corner —
   on a lesson page the worksheet tab sat underneath the subscribe pill. They
   are collected into one column here, right to left, bottom up.
   ========================================================================== */

html.bwb-pm .pm-dock {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 2147482000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
}
html.bwb-pm .pm-dock > * {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  pointer-events: auto;
  animation: pm-dock-in .5s var(--pm-ease) both;
}
@keyframes pm-dock-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.94); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   9b. Keep the footer clear of the floating buttons

   The subscribe pill is fixed to the bottom-right corner, and at the very end
   of the page it sat directly on top of the footer's "Terms" and "Help" links —
   they could be seen but not clicked. Reserving room at the foot of the page is
   the fix; moving the pill would only push the problem somewhere else.
   ========================================================================== */

/* A small reserve only. The widgets now tuck themselves away when the footer
   appears (see 9d), so this is just a floor in case the script does not run. */
html.bwb-pm footer { padding-bottom: 28px; }

/* ==========================================================================
   9c. Floating widgets must not block what is underneath them

   #bwb-bite-widget is a 360x297 fixed box, but the only visible thing in it is
   a small bubble — the rest is empty. With pointer-events on the container,
   that empty area swallowed clicks, and seven links in the footer's Company
   column (About Us through Help Centre) could not be clicked at all once you
   scrolled to the bottom. The container now lets clicks through; its children
   take them back.
   ========================================================================== */

html.bwb-pm #bwb-bite-widget,
html.bwb-pm .pm-dock { pointer-events: none; }

html.bwb-pm #bwb-bite-widget > *,
html.bwb-pm #bwb-bite-panel,
html.bwb-pm .pm-dock > * { pointer-events: auto; }

/* ==========================================================================
   9d. Corner widgets that get out of the way

   The subscribe pill and the Bite bubble were pinned to the bottom-right and
   never moved, so they sat over the page the whole time you were reading. They
   now behave like the controls on a well-made app: present when you are
   looking for them, gone when you are not.
   ========================================================================== */

html.bwb-pm #bwb-bite-widget,
html.bwb-pm .bwb-sub-fab {
  transition:
    transform  .34s var(--pm-ease),
    opacity    .28s var(--pm-ease),
    padding    .28s var(--pm-ease),
    box-shadow .28s var(--pm-ease);
  will-change: transform, opacity;
}

/* scrolling down, or the footer is in view: slide off to the right */
html.bwb-pm.pm-fabs-away #bwb-bite-widget,
html.bwb-pm.pm-fabs-away .bwb-sub-fab {
  transform: translate3d(calc(100% + 32px), 0, 0);
  opacity: 0;
  pointer-events: none;
}

/* past the top of the page the pill collapses to its bell */
html.bwb-pm.pm-fabs-compact .bwb-sub-fab {
  padding: 13px;
  gap: 0;
}
html.bwb-pm.pm-fabs-compact .bwb-sub-fab > :not(.bsf-ic):not(.bsf-dot) {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .28s var(--pm-ease), opacity .2s var(--pm-ease);
  display: inline-block;
  white-space: nowrap;
}

/* an open chat must never be yanked off the screen mid-sentence */
html.bwb-pm.pm-chat-open.pm-fabs-away #bwb-bite-widget {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.bwb-pm #bwb-bite-widget,
  html.bwb-pm .bwb-sub-fab { transition: none; }
  html.bwb-pm.pm-fabs-away #bwb-bite-widget,
  html.bwb-pm.pm-fabs-away .bwb-sub-fab { transform: none; opacity: 1; pointer-events: auto; }
}

/* ==========================================================================
   10. Counting numbers
   ========================================================================== */

html.bwb-pm .pm-count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   11. Focus, selection and scrollbar
   Focus is deliberately loud: it is the one state that has to be unmissable.
   ========================================================================== */

html.bwb-pm :focus-visible {
  outline: 2px solid var(--pm-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
html.bwb-pm ::selection { background: rgba(109, 94, 248, .42); color: #fff; }

html.bwb-pm * { scrollbar-width: thin; scrollbar-color: rgba(139, 125, 255, .42) transparent; }
/* Deliberately no width/height here. Changing the scrollbar's width changes
   how much room the content has, which reflows text and moved elements by a
   few pixels on two pages. Colour is free; size is not. */
html.bwb-pm ::-webkit-scrollbar-corner { background: transparent; }
html.bwb-pm ::-webkit-scrollbar-track { background: transparent; }
html.bwb-pm ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(139, 125, 255, .55), rgba(34, 211, 238, .42));
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
html.bwb-pm ::-webkit-scrollbar-thumb:hover { background-clip: padding-box; }

/* ==========================================================================
   12. Images
   ========================================================================== */

html.bwb-pm .pm-img-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s var(--pm-ease);
}
html.bwb-pm .pm-img-reveal.is-in { clip-path: inset(0 0 0 0); }

/* ==========================================================================
   13. Opt-outs and overrides
   A page or a section can switch the whole layer off for its subtree with
   data-pm="off" — used by the games, which run their own full-screen UI.
   ========================================================================== */

[data-pm="off"] .pm-rv,
[data-pm="off"] .pm-surface,
[data-pm="off"] .pm-btn {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* ==========================================================================
   14. Reduced motion and print
   Everything above degrades to a plain, still, fully visible page.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html.bwb-pm body,
  html.bwb-pm body::before,
  html.bwb-pm .pm-progress,
  html.bwb-pm .pm-h1-grad,
  html.bwb-pm .pm-dock > *,
  .pm-gradient-text {
    animation: none !important;
  }
  html.bwb-pm .pm-rv,
  html.bwb-pm .pm-rv-l,
  html.bwb-pm .pm-rv-r,
  html.bwb-pm .pm-rv-zoom,
  html.bwb-pm .pm-rv-blur,
  html.bwb-pm .pm-img-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.bwb-pm .pm-surface:hover,
  html.bwb-pm .pm-btn:hover,
  html.bwb-pm .pm-tilt,
  html.bwb-pm .pm-magnet {
    transform: none !important;
  }
}

@media print {
  html.bwb-pm body::before,
  html.bwb-pm body::after,
  .pm-progress,
  html.bwb-pm .pm-dock { display: none !important; }
  html.bwb-pm .pm-rv { opacity: 1 !important; transform: none !important; }
}