/* =============================================================================
   X3WEB — website management
   -----------------------------------------------------------------------------
     /website-management             the two packages side by side
     /website-maintenance            Service Business Website & Management Package
     /ecommerce-website-management   E-commerce Website & Management Package

   In the Marketing Pack manner of x3.css: flat blocks that touch, hairline
   lists, spaced-capital labels, white square cards and orange pills. These
   pages also use the screenshot frames, splits, lists, callout, call-to-action
   row and lightbox from x3-bm.css; this file adds only the wm-* furniture.

   Every colour, shadow, space and easing comes from the tokens in x3.css.
   Cards rest on --shadow-1 and lift to --shadow-2; framed example pages and
   illustrations sit on --shadow-2; the document and the search illustration
   on --shadow-2/--shadow-3.
   ============================================================================= */


/* ── The package prices, side by side ──────────────────────────────────────── */

/*
 * includes/managed-package-prices.php prints the site's price block
 * (.x3-pkg__plans: setup, PLUS, monthly). On a phone it stacks as on every
 * package card. From 560px the two prices sit side by side with PLUS between
 * them on a vertical hairline, and the two columns share their rows so the
 * labels and the amounts line up.
 */
@media (min-width: 560px) {
  .wm-offer__plans,
  .wm-choose__plans,
  .wm-pkg .x3-pkg__plans {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: repeat(4, auto);
    align-items: start;
    column-gap: clamp(1rem, 0.5rem + 1.5vw, 2.25rem);
    row-gap: 0.35rem;
  }
  .wm-offer__plans .x3-pkg__plan,
  .wm-choose__plans .x3-pkg__plan,
  .wm-pkg .x3-pkg__plans .x3-pkg__plan {
    grid-column: 1;
    grid-row: 1 / span 4;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .wm-offer__plans .x3-pkg__plan:last-child,
  .wm-choose__plans .x3-pkg__plan:last-child,
  .wm-pkg .x3-pkg__plans .x3-pkg__plan:last-child { grid-column: 3; }
  .wm-offer__plans .x3-pkg__or,
  .wm-choose__plans .x3-pkg__or,
  .wm-pkg .x3-pkg__plans .x3-pkg__or {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: stretch;
    flex-direction: column;
    gap: 0.625rem;
  }
  .wm-offer__plans .x3-pkg__or::before,
  .wm-offer__plans .x3-pkg__or::after,
  .wm-choose__plans .x3-pkg__or::before,
  .wm-choose__plans .x3-pkg__or::after,
  .wm-pkg .x3-pkg__plans .x3-pkg__or::before,
  .wm-pkg .x3-pkg__plans .x3-pkg__or::after {
    width: 1px;
    height: auto;
    min-height: 0.75rem;
  }
}


/* ── The offer, directly under the hero ────────────────────────────────────── */

.wm-offer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1100px) {
  .wm-offer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-offer--store .wm-offer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* In the offer block the prices stand on their own, without the card's rules. */
.wm-offer__plans {
  padding: 0;
  border: 0;
}
.wm-offer__plans .x3-pkg__price {
  font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
  letter-spacing: -0.04em;
}

.wm-offer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
}
.wm-offer--store .wm-offer__chips { margin-top: 1.75rem; }
.wm-offer__chips li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.3;
}
.wm-offer__chips svg { flex: none; width: 1rem; height: 1rem; color: var(--accent); }

.wm-offer__who {
  margin-top: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.wm-offer__who strong { color: var(--ink); }

/* The store on a desktop and a phone: a cut-out, so its shadow follows the
   devices rather than a box. */
.wm-offer__media { margin: 0; }
.wm-offer__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 22px 30px rgb(28 28 25 / 0.2)) drop-shadow(0 4px 8px rgb(28 28 25 / 0.08));
}
@media (max-width: 1099.98px) {
  .wm-offer__media { max-width: 40rem; margin-inline: auto; }
}


/* ── Introduction ──────────────────────────────────────────────────────────── */

/* The closing line under the introduction: a statement, the orange words set
   at a size the brand orange reads at. */
.bm-split__copy > .wm-closing {
  margin-top: 1.75rem;
  font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  font-weight: 420;
  line-height: 1.2;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.wm-closing em { font-style: normal; color: var(--accent); }

/* The devices photograph, framed and lifted off the block. */
.wm-devices {
  margin: 0;
  overflow: hidden;
  background: var(--scene);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.wm-devices img { display: block; width: 100%; height: auto; }

/* Three short benefits under the introduction. */
.wm-benefits {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
  margin-top: clamp(2.5rem, 2rem + 1.6vw, 3.5rem);
  list-style: none;
}
@media (min-width: 768px) {
  .wm-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wm-benefits li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.125rem 1.375rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.wm-benefits svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--accent); }


/* ── The page count: one card per page, then the total ─────────────────────── */

.wm-count {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 0.5rem + 0.8vw, 1.125rem);
  align-items: stretch;
}
@media (min-width: 640px) {
  .wm-count { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .wm-count { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; }
}

.wm-count__page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 9rem;
  padding: 1.25rem 1.125rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
a.wm-count__page:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

/* The five service pages read as a stack of five sheets. */
.wm-count__page--stack {
  box-shadow:
    4px -4px 0 -1px var(--card), 4px -4px 0 0 var(--line-strong),
    8px -8px 0 -1px var(--card), 8px -8px 0 0 var(--line-strong),
    var(--shadow-1);
}
a.wm-count__page--stack:hover {
  box-shadow:
    4px -4px 0 -1px var(--card), 4px -4px 0 0 var(--line-strong),
    8px -8px 0 -1px var(--card), 8px -8px 0 0 var(--line-strong),
    var(--shadow-2);
}

.wm-count__n {
  display: inline-flex;
  font-size: clamp(2.25rem, 1.8rem + 1.2vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: lining-nums;
  color: var(--accent);
}
.wm-count__n svg { width: 1.875rem; height: 1.875rem; }
.wm-count__name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.wm-count__name small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-muted);
}

/* The total: an ink cell, the one dark mark in the row. */
.wm-count__total {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-ink);
  text-align: center;
}
@media (min-width: 1180px) {
  .wm-count__total {
    grid-column: auto;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 9.5rem;
  }
}
.wm-count__total strong {
  display: inline-flex;
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--accent);
}
.wm-count__total strong svg { width: 2.5rem; height: 2.5rem; }
.wm-count__total span {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.wm-count__note {
  max-width: 46rem;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}


/* ── One page explained: number, copy, what it includes, the example ───────── */

.wm-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5.5rem);
  align-items: start;
}
.wm-feature__copy,
.wm-feature__media { min-width: 0; }
@media (min-width: 900px) {
  .wm-feature { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .wm-feature--rev { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
  .wm-feature--rev .wm-feature__media { order: -1; }
}
/* The shorter column stays in view while the longer one is read. */
@media (min-width: 1024px) {
  .wm-feature__copy,
  .wm-feature__media {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}

/* "1 ——  HOME PAGE · 1 PAGE" */
.wm-feature__num {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-feature__num b {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.wm-feature__num b::after {
  content: '';
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--accent);
}

.wm-feature__copy > .x3-h2 + * { margin-top: 1.5rem; }
.wm-feature__copy > p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-muted);
}
.wm-feature__copy > p + p { margin-top: 1rem; }
.wm-feature__copy > p.wm-lead {
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  font-weight: 420;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* "What this page includes": a label over two columns of hairline rows. */
.wm-elements { margin-top: 2rem; }
.wm-elements h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-elements h3::before {
  content: '';
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: var(--accent);
}
.wm-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  column-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.wm-tags li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.625rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.wm-tags li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.75rem + 0.75em);
  width: 0.875rem;
  height: 1px;
  background: var(--accent);
}

/* The example page: a browser frame that scrolls through the full page on
   hover (desktop) and under the finger (touch). */
.wm-example { margin: 0; }
.wm-example .bm-frame__screen {
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  background: var(--card);
}
.wm-example .bm-frame__screen img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: initial;
  transform: translateY(0);
  transition: top 7s cubic-bezier(0.45, 0.05, 0.35, 1), transform 7s cubic-bezier(0.45, 0.05, 0.35, 1);
}
.wm-example:hover .bm-frame__screen img,
.wm-example:focus-within .bm-frame__screen img {
  top: 100%;
  transform: translateY(-100%);
}

/* Touch screens have no hover: the frame scrolls under the finger instead. */
@media (hover: none) {
  .wm-example .bm-frame__screen { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .wm-example .bm-frame__screen img { position: static; transition: none; }

  /* The frame carries tabindex="0", so a tap focuses it and :focus-within
     fires. The reveal above would then move the image a full height upwards,
     out of a frame shorter than the image, and leave an empty white box. On
     touch the reveal has no job to do: dragging scrolls the frame and a tap
     opens the lightbox. Both :hover and :focus-within are neutralised,
     because a stylus or a desktop browser in touch emulation can still raise
     :hover. */
  .wm-example:hover .bm-frame__screen img,
  .wm-example:focus-within .bm-frame__screen img {
    top: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wm-example .bm-frame__screen img { transition: none; }
}

/* Landscape examples: the frame takes the image's own shape (--ratio is set
   on the figure) and shows it whole. */
.wm-example--fit .bm-frame__screen { aspect-ratio: var(--ratio, 16 / 10); }
.wm-example--fit .bm-frame__screen img,
.wm-example--fit:hover .bm-frame__screen img,
.wm-example--fit:focus-within .bm-frame__screen img {
  position: static;
  top: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transform: none;
  transition: none;
}
@media (hover: none) {
  .wm-example--fit .bm-frame__screen { overflow: hidden; }
}

/* "Example design", in the browser bar so it never covers the page itself. */
.wm-example__badge {
  position: absolute;
  top: 0.25rem;
  right: 0.75rem;
  z-index: 2;
  padding: 0.2rem 0.625rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Under the frame: the caption, then the hint on the same line where there is
   room. The hint follows the caption in the markup's figure but is not part
   of it, so the lightbox shows the caption alone. */
.wm-example {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}
.wm-example > .bm-frame { flex: 0 0 100%; margin-bottom: 0.75rem; }
.wm-example > figcaption { order: 1; flex: 1 1 auto; margin-top: 0; }
.wm-example__hints {
  order: 2;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.wm-example__hint { font-weight: 500; color: var(--ink); }

/* The hint tells the truth on whichever device is reading it: there is no
   hovering on a phone, and no tapping on a desktop. */
.wm-example__hint--touch { display: none; }
@media (hover: none) {
  .wm-example__hint--pointer { display: none; }
  .wm-example__hint--touch { display: inline; }
}

/* A mega menu, built as real markup so every label reads. */
.wm-mega {
  margin-top: 2rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  text-align: left;
}
.wm-mega__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.375rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--stone);
  color: var(--ink-muted);
  font-size: 0.875rem;
  font-weight: 450;
}
.wm-mega__bar b {
  position: relative;
  font-weight: 550;
  color: var(--ink);
}
.wm-mega__bar b::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3rem;
  height: 1px;
  background: var(--accent);
}
.wm-mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.125rem 1rem;
  padding: 0.875rem;
  list-style: none;
}
@media (min-width: 480px) {
  .wm-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-mega__grid li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 450;
  transition: background-color 0.2s var(--ease);
}
.wm-mega__grid li:hover { background: var(--stone); }
.wm-mega__grid svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--accent); }

/* One page branching into five (or a shop into its catalogue). */
.wm-tree {
  margin-top: 2rem;
  padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.wm-tree__root {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.625rem 1.125rem;
  background: var(--ink);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--shadow-ink);
}
.wm-tree__root svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--accent); }
.wm-tree__kids {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
  list-style: none;
}
.wm-tree__kids li {
  position: relative;
  flex: 1 1 calc((100% - 0.625rem) / 2);
  max-width: calc((100% - 0.625rem) / 2);
  padding: 0.75rem 0.5rem;
  background: var(--stone);
  border: 1px solid var(--line);
  text-align: center;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
}
.wm-tree__kids small {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
}
@media (min-width: 900px) {
  .wm-tree__kids { flex-wrap: nowrap; }
  .wm-tree__kids li { flex: 1 1 0; max-width: none; }
  /* The hairlines that join the root to each page. */
  .wm-tree__kids::before {
    content: '';
    position: absolute;
    top: -0.875rem;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--accent);
  }
  .wm-tree__kids li::before {
    content: '';
    position: absolute;
    top: calc(-0.875rem - 1px);
    left: 50%;
    width: 1px;
    height: 0.875rem;
    background: var(--accent);
  }
}
.wm-tree__note {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* A short note on what is and is not in the package. */
.wm-scope {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  box-shadow: var(--shadow-1);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.wm-scope strong { color: var(--ink); }


/* ── Sections that show their examples under a centred heading ─────────────── */

/* Two examples side by side. */
.wm-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 2.4vw, 2.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .wm-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wm-pair--wide-first { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* One example across the whole width. */
.wm-wide { max-width: 82rem; margin-inline: auto; }

/* Copy in two columns under the examples; the list spans both. */
.wm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem clamp(2rem, 1rem + 3vw, 4rem);
  margin-top: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem);
}
@media (min-width: 900px) {
  .wm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-cols p {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--ink-muted);
}
.wm-cols .wm-elements { grid-column: 1 / -1; margin-top: 0.5rem; }
.wm-cols > .wm-elements:only-child { margin-top: 0; }

/* A photograph that is already a product shot needs no browser bar. */
.wm-photo { margin: 0; }
.wm-photo img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-2);
}
.wm-photo figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* A short journey: steps joined by orange chevrons. */
.wm-journey {
  --wm-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wm-gap);
  list-style: none;
}
@media (min-width: 640px) {
  .wm-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .wm-journey--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wm-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wm-journey--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wm-journey li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem) 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.wm-journey__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: var(--stone-warm);
  color: var(--accent);
}
.wm-journey__icon svg { width: 1.375rem; height: 1.375rem; }
.wm-journey strong {
  display: block;
  font-size: 1.1875rem;
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.wm-journey li > span:not(.wm-journey__icon) {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
/* The chevrons, only while the steps share one row. */
@media (min-width: 900px) {
  .wm-journey--3 li + li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--wm-gap) / -2 - 0.3rem);
    width: 0.625rem;
    height: 0.625rem;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    transform: translateY(-50%) rotate(45deg);
  }
}
@media (min-width: 1100px) {
  .wm-journey li + li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--wm-gap) / -2 - 0.3rem);
    width: 0.625rem;
    height: 0.625rem;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    transform: translateY(-50%) rotate(45deg);
  }
}
/* After the shipping split it needs room from the example above. */
.wm-feature + .wm-journey { margin-top: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }

/* The payment split under the journey. */
.wm-journey + .bm-split { margin-top: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }

/* Three connected screens: the abandoned-cart journey. The middle screen is
   a tall email, so its column is narrower and the row stays even. */
.wm-trio {
  --wm-gap: clamp(1.75rem, 1rem + 2.4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--wm-gap);
  align-items: start;
}
@media (min-width: 900px) {
  .wm-trio { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .wm-trio > figure + figure::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--wm-gap) / -2 - 0.3rem);
    width: 0.625rem;
    height: 0.625rem;
    border-top: 1.5px solid var(--accent);
    border-right: 1.5px solid var(--accent);
    transform: rotate(45deg);
  }
}
.wm-trio > figure { position: relative; min-width: 0; margin: 0; }
/* "1 ——  CART LEFT BEHIND" */
.wm-trio__step {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-trio__step b {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wm-trio__step b::after {
  content: '';
  flex: none;
  width: 2rem;
  height: 1px;
  background: var(--accent);
}


/* ── On-page SEO: search results that lead to their own pages ──────────────── */

.wm-seo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 1.5rem + 3vw, 5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .wm-seo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.wm-seo > * { min-width: 0; }
.wm-seo .bm-split__copy { margin-bottom: 1.75rem; }

/* The search illustration, in the site's own ink rather than a search
   engine's colours. */
.wm-serp {
  padding: clamp(1.125rem, 0.8rem + 1vw, 1.75rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  text-align: left;
}
.wm-serp__search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1);
  color: var(--ink);
  font-size: 0.9375rem;
}
.wm-serp__search svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--ink-muted); }
.wm-serp__results {
  display: grid;
  gap: 0.375rem;
  margin-top: 1.125rem;
  list-style: none;
}
.wm-serp__item { padding: 0.875rem 1rem; }
.wm-serp__item--hit {
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--accent), inset 0 0 0 1px var(--line);
}
.wm-serp__url {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}
.wm-serp__title {
  display: block;
  margin: 0.25rem 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.wm-serp__desc {
  display: block;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.wm-serp__tag {
  display: inline-block;
  margin-top: 0.625rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent-text);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wm-serp__caption {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* What on-page SEO covers: hairline rows, each with an orange tick. */
.wm-seo__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
@media (min-width: 560px) {
  .wm-seo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-seo__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}
.wm-seo__list svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1em; color: var(--accent); }

/* A closing statement under a section. */
.wm-statement,
.wm-message {
  max-width: 56rem;
  margin: clamp(2.75rem, 2rem + 2.4vw, 4.5rem) auto 0;
  text-align: center;
  text-wrap: balance;
  font-weight: 420;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.wm-statement { font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.12; }
.wm-message { font-size: clamp(1.75rem, 1rem + 2.4vw, 3rem); line-height: 1.06; }
.wm-statement em,
.wm-message em { font-style: normal; color: var(--accent); }
.wm-message + .x3-head { margin-top: 1.5rem; }

/* Small print under a section. */
.wm-fine {
  max-width: 46rem;
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}


/* ── Google and Meta: the website in the middle, the platforms around it ───── */

.wm-hub {
  position: relative;
  width: min(100%, 32.5rem);
  aspect-ratio: 1 / 1;
  margin: 1.5rem auto;
}
.wm-hub__rings {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wm-hub__rings circle { fill: none; stroke: var(--line-strong); stroke-width: 0.3; }
.wm-hub__rings line {
  stroke: var(--accent);
  stroke-width: 0.4;
  stroke-dasharray: 1.4 1.6;
  stroke-linecap: round;
}
.wm-hub__core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 0.625rem rgb(255 85 0 / 0.1), var(--shadow-2);
}
.wm-hub__core svg { width: 28%; height: auto; color: var(--accent); }
.wm-hub__core strong {
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.wm-hub__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 33%;
  padding: 0.875rem 0.625rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  transform: translate(-50%, -50%);
}
.wm-hub__node small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-muted);
}
.wm-hub__logo {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  background: var(--stone);
}
.wm-hub__logo svg { width: 1.5rem; height: 1.5rem; }
/* The platforms keep their own logo colours, as the Marketing Pack shows them. */
.wm-hub__node--google .wm-hub__logo svg { color: #4285f4; }
.wm-hub__node--console .wm-hub__logo svg { color: #34a853; }
.wm-hub__node--profile .wm-hub__logo svg { color: #ea4335; }
.wm-hub__node--verify .wm-hub__logo svg { color: #fbbc05; }
.wm-hub__node--facebook .wm-hub__logo svg { color: #1877f2; }
.wm-hub__node--instagram .wm-hub__logo svg { color: #e4405f; }
.wm-hub__node--meta .wm-hub__logo svg { color: #0866ff; }

.wm-hub__node--n  { left: 50%; top: 9%; }
.wm-hub__node--e  { left: 88%; top: 50%; }
.wm-hub__node--s  { left: 50%; top: 91%; }
.wm-hub__node--w  { left: 12%; top: 50%; }
.wm-hub__node--nw { left: 17%; top: 22%; }
.wm-hub__node--ne { left: 83%; top: 22%; }

/* Phones: the hub narrows so the side cards stay inside the column. */
@media (max-width: 639.98px) {
  .wm-hub { width: 88%; margin-block: 2rem; }
  .wm-hub__core { width: 31%; }
  .wm-hub__node { width: 34%; padding: 0.625rem 0.375rem; font-size: 0.8125rem; }
  .wm-hub__node--e { left: 85%; }
  .wm-hub__node--w { left: 15%; }
  .wm-hub__node small { display: none; }
  .wm-hub__logo { width: 2.25rem; height: 2.25rem; }
  .wm-hub__logo svg { width: 1.25rem; height: 1.25rem; }
  .wm-hub__core strong { font-size: 0.8125rem; }
}


/* ── Monthly updates: one document in, an updated website out ──────────────── */

.wm-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  align-items: center;
}
@media (min-width: 900px) {
  .wm-flow { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); }
}
.wm-flow > * { min-width: 0; }

/* The request, as a sheet of paper on a second sheet. */
.wm-doc {
  position: relative;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem) clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow:
    0.5rem 0.5rem 0 -1px var(--card),
    0.5rem 0.5rem 0 0 var(--line-strong),
    var(--shadow-2);
  text-align: left;
  transform: rotate(-1.2deg);
}
.wm-doc__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-strong);
}
.wm-doc__head > svg { flex: none; width: 1.375rem; height: 1.375rem; color: var(--accent); }
.wm-doc__head strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wm-doc__head small { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--ink-muted); }
.wm-doc ol {
  display: grid;
  gap: 0.625rem;
  padding-left: 1.25rem;
  list-style: decimal;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.wm-doc ol li::marker { color: var(--accent); font-weight: 500; }
.wm-doc__foot {
  margin-top: 1.125rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.wm-flow__arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-flow__arrow span {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
  transform: rotate(90deg);
}
.wm-flow__arrow svg { width: 1.375rem; height: 1.375rem; }
@media (min-width: 900px) {
  .wm-flow__arrow { flex-direction: column; }
  .wm-flow__arrow span { width: 4rem; height: 4rem; transform: none; }
}

/* The updated page, with what changed flagged on it. */
.wm-updated { position: relative; margin: 0; }
.wm-updated .bm-frame__screen { aspect-ratio: 16 / 11; }
.wm-updated .bm-frame__screen img { cursor: default; }
.wm-updated__tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.875rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: var(--shadow-ink);
}
.wm-updated__tag svg { flex: none; width: 0.875rem; height: 0.875rem; color: var(--accent); }
.wm-updated__tag--1 { top: 22%; left: 6%; }
.wm-updated__tag--2 { top: 58%; right: 6%; }
.wm-updated__tag--3 { bottom: 9%; left: 30%; }
.wm-updated figcaption { text-align: center; }

/* What the hours can be used for. */
.wm-changes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.625rem, 0.4rem + 0.6vw, 1rem);
  list-style: none;
}
@media (min-width: 640px) {
  .wm-changes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .wm-changes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wm-changes li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.125rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.wm-changes svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.1em; color: var(--accent); }


/* ── Care cards (x3-tile) ──────────────────────────────────────────────────── */

.wm-care {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.375rem);
}
@media (min-width: 640px) {
  .wm-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wm-care { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .wm-care--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.wm-care__card .x3-h3 { margin-top: 0.25rem; }


/* ── Five steps (x3-step) ──────────────────────────────────────────────────── */

/* Wrapping rows stay centred, so a short last row never hangs off the left. */
.wm-steps {
  --wm-gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.375rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wm-gap);
  list-style: none;
}
.wm-step { flex: 0 0 100%; }
@media (min-width: 640px) {
  .wm-step { flex-basis: calc((100% - var(--wm-gap)) / 2); }
}
@media (min-width: 1024px) {
  .wm-step { flex-basis: calc((100% - 2 * var(--wm-gap)) / 3); }
}
@media (min-width: 1280px) {
  .wm-step { flex-basis: calc((100% - 4 * var(--wm-gap)) / 5); }
}
/* The last step is the one that carries on every month. */
.wm-step:last-child { box-shadow: inset 0 3px 0 var(--accent), var(--shadow-1); }
.wm-step__card { display: grid; gap: 0.625rem; }
.wm-step h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wm-step p strong { font-weight: 600; color: var(--ink); }

.wm-steps__foot {
  max-width: 60rem;
  margin: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem) auto 0;
  text-align: center;
  text-wrap: balance;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 450;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}


/* ── Why X3WEB ─────────────────────────────────────────────────────────────── */

.wm-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.875rem, 0.6rem + 0.9vw, 1.25rem);
  min-width: 0;
}
@media (min-width: 560px) {
  .wm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-trust__item {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.wm-trust__item strong {
  display: block;
  font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.3125rem);
  font-weight: 450;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* An orange word under 24px takes the deeper text orange. */
.wm-trust__item strong em { font-style: normal; color: var(--accent-text); }
.wm-trust__item p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-muted);
}


/* ── The one package: the site's price card (.x3-pkg), widened ─────────────── */

.wm-pkg {
  max-width: 65rem;
  margin-inline: auto;
}
.wm-pkg .x3-pkg__head {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
/* The flag sits centred on the card's top edge and may wrap on a phone. */
.wm-pkg .x3-pkg__flag {
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  justify-content: center;
  text-align: center;
}
.wm-pkg .x3-pkg__plans { max-width: 42rem; width: 100%; margin-inline: auto; text-align: center; }
.wm-pkg .x3-pkg__price { font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); }
@media (min-width: 768px) {
  .wm-pkg .x3-pkg__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .wm-pkg--3 .x3-pkg__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.wm-pkg .wm-scope { margin-top: 0; }
.wm-pkg .x3-pkg__cta {
  width: 100%;
  max-width: 26rem;
  margin: 0.5rem auto 0;
}


/* ── The two packages side by side (overview) ──────────────────────────────── */

.wm-choose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .wm-choose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.wm-choose__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.35s var(--ease);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.wm-choose__card:hover { box-shadow: var(--shadow-2); }
.wm-choose__media {
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--scene);
}
.wm-choose__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}
.wm-choose__card:hover .wm-choose__media img { transform: scale(1.02); }
.wm-choose__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
}
/* "—— FOR SERVICE BUSINESSES" */
.wm-choose__for {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-choose__for::before {
  content: '';
  flex: none;
  width: 2.25rem;
  height: 1px;
  background: var(--accent);
}
.wm-choose__for svg { display: none; }
.wm-choose__name {
  margin-top: 1rem;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  font-weight: 420;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--ink);
}
.wm-choose__pitch {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink-muted);
}
.wm-choose__plans { margin-top: 1.75rem; }
.wm-choose__best {
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.wm-choose__best strong { color: var(--ink); }
/* The list inside a card: one column until the card is wide enough for two. */
.wm-choose__card .bm-check {
  grid-template-columns: minmax(0, 1fr);
  margin: 1.5rem 0 0;
}
.wm-choose__card .bm-check li { padding-block: 0.75rem; font-size: 0.9375rem; }
.wm-choose__card .bm-check li::before { top: calc(0.75rem + 0.75em - 0.4rem); }
@media (min-width: 1280px) {
  .wm-choose__card .bm-check { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
}
/* Both buttons sit at the foot of both cards, full width and level. */
.wm-choose__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
}
.wm-choose__actions .x3-btn { width: 100%; }


/* ── Overview: the comparison table ────────────────────────────────────────── */

.wm-compare {
  max-width: 68rem;
  margin-inline: auto;
  overflow-x: auto;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
.wm-compare table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.wm-compare th,
.wm-compare td {
  padding: 0.9375rem 1.375rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.wm-compare tbody tr:last-child th,
.wm-compare tbody tr:last-child td { border-bottom: 0; }
.wm-compare thead th {
  border-bottom: 1px solid var(--line-strong);
  background: var(--stone);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wm-compare thead svg {
  display: inline-block;
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.625rem;
  vertical-align: -0.2em;
  color: var(--accent);
}
.wm-compare tbody th { width: 30%; font-weight: 500; color: var(--ink); }
.wm-compare td { width: 35%; color: var(--ink-muted); }
.wm-compare tbody tr:nth-child(even) { background: var(--panel); }
.wm-compare__yes { display: inline-flex; }
.wm-compare__yes svg { width: 1.375rem; height: 1.375rem; color: var(--accent); }
.wm-compare__no { font-weight: 500; color: var(--ink-muted); }


/* ── Final call to action ──────────────────────────────────────────────────── */

.wm-final { text-align: center; }
.wm-final__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem 0.75rem;
  max-width: 48rem;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink-muted);
}
.wm-final__price strong {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 420;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.wm-final__price b {
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
}
.wm-final__price span { font-size: 0.9375rem; }
.wm-final .x3-btnrow { margin-top: 2.25rem; }
.wm-final__close {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wm-final__close svg { flex: none; width: 1rem; height: 1rem; color: var(--accent); }


/* ── Phones: centred, as the rest of the site ──────────────────────────────── */

/*
 * Below 768px blocks centre their content (x3.css). These pages' own parts
 * follow: rows lose their dash and centre between hairlines, cards stack
 * their contents on the centre line, and the accent of a note moves to its
 * top edge. The illustrations that copy a real screen (the search results,
 * the update document, the mega menu) keep their own left alignment.
 */
@media (max-width: 767.98px) {
  .wm-offer__chips { justify-content: center; }

  .wm-benefits li { justify-content: center; text-align: center; }

  .wm-count__page { align-items: center; text-align: center; }

  .wm-feature__num { justify-content: center; }

  .wm-elements h3 { justify-content: center; gap: 0.75rem; }
  .wm-elements h3::before { width: 1.75rem; }
  .wm-elements h3::after {
    content: '';
    flex: none;
    width: 1.75rem;
    height: 1px;
    background: var(--accent);
  }
  .wm-tags li { padding-inline: 0; text-align: center; }
  .wm-tags li::before { display: none; }

  .wm-example { justify-content: center; }
  .wm-example > figcaption,
  .wm-example__hints { flex-basis: 100%; text-align: center; }

  .wm-scope {
    border-left: 1px solid var(--line);
    border-top: 2px solid var(--accent);
    text-align: center;
  }

  .wm-trio__step { justify-content: center; }

  .wm-seo__list li { justify-content: center; text-align: center; }

  .wm-doc { transform: none; }

  .wm-changes li { flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.875rem 1rem; text-align: center; }

  .wm-trust__item { align-items: center; text-align: center; }

  .wm-choose__body { align-items: center; text-align: center; }
  .wm-choose__for { gap: 0.75rem; }
  .wm-choose__for::before { width: 1.75rem; }
  .wm-choose__for::after {
    content: '';
    flex: none;
    width: 1.75rem;
    height: 1px;
    background: var(--accent);
  }
  .wm-choose__plans,
  .wm-choose__card .bm-check,
  .wm-choose__actions { align-self: stretch; }

  /* A narrow table: its cells wrap rather than scrolling sideways. */
  .wm-compare table { min-width: 0; font-size: 0.875rem; }
  .wm-compare th,
  .wm-compare td { padding: 0.75rem 0.5rem; }
  .wm-compare thead th { font-size: 0.875rem; white-space: normal; }
  .wm-compare thead svg { display: block; margin: 0 0 0.375rem; }
  .wm-compare tbody th,
  .wm-compare thead th:first-child { width: 26%; }
  .wm-compare td,
  .wm-compare thead th + th { width: 37%; }

  /* The flag wraps to two lines here, so the card's copy starts lower. */
  .wm-pkg { padding-top: 3rem; }

  /* The price on three lines: setup, the orange plus, then monthly. */
  .wm-final__price b,
  .wm-final__price span { flex-basis: 100%; }
  .wm-final__close { justify-content: center; letter-spacing: 0.14em; }
}