.elementor-13333 .elementor-element.elementor-element-93cd276{--display:flex;}/* Start custom CSS *//* ==========================================================================
   MAX PRODUCTIVE AI - BLOG POST TEMPLATE, STYLE P1.0
   Same visual system as the review style V7: Newsreader for headlines and
   scores, Inter for reading and interface, the same ink, violet, green, red
   and citrine. Separate wrapper and class names, so the two never touch.
   Every rule starts with .mp-post.mp-p1, so nothing reaches the theme and
   the theme's global heading and link styles cannot win a tie.
   Components use the mpp- prefix.
   ========================================================================== */

/* ---- 0. Headline face ---------------------------------------------------
   Upload mpr-newsreader-600.woff2 once to the media library and check that
   the URL below matches. If the file is missing, headlines fall
   back to Georgia and the page still works. */
@font-face {
  font-family: "MPR Newsreader";
  src: url("https://max-productive.ai/wp-content/uploads/2026/10/mpr-newsreader-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 1. Tokens and base ------------------------------------------------- */
.mp-post.mp-p1 {
  --paper: #ffffff;
  --mist: #f6f5fa;          /* tinted panels */
  --ink: #15122b;           /* headings, strong text: 18.2:1 */
  --ink-2: #2b2740;         /* running text: 14.3:1 on white, 13.2:1 on mist */
  --ink-3: #534e6b;         /* secondary text: 7.9:1 on white, 7.3:1 on mist */
  --line: #e8e6ef;
  --line-strong: #d4d0e0;
  --violet: #5b21b6;        /* links and actions: 9.0:1 */
  --violet-deep: #4c1d95;
  --violet-soft: #f1ecfb;
  --violet-line: rgba(91, 33, 182, .38);
  --citrine: #ffc933;
  --pos: #0a7552;
  --neg: #b23b0b;
  --on-ink-2: rgba(255, 255, 255, .82);
  --on-ink-3: rgba(255, 255, 255, .64);
  --on-ink-line: rgba(255, 255, 255, .16);
  --serif: "MPR Newsreader", "Newsreader", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --container: 1200px;
  --pad-x: 40px;
  --measure: 704px;
  --prose: 34.5em;          /* about 68 characters a line */
  --rail: 288px;
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --header: 72px;           /* height of the theme's fixed header; change it here only */
  --t: .15s ease;
  --shadow-lift: 0 1px 2px rgba(21, 18, 43, .06), 0 28px 56px -30px rgba(21, 18, 43, .38);
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffc933' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E");
  --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --i-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E");
  --i-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L16 8M9 8h7v7'/%3E%3C/svg%3E");
  display: block;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: normal;
  color: var(--ink-2);
  background: var(--paper);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
.mp-post.mp-p1 *,
.mp-post.mp-p1 *::before,
.mp-post.mp-p1 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.mp-post.mp-p1 h1,
.mp-post.mp-p1 h2,
.mp-post.mp-p1 h3,
.mp-post.mp-p1 p,
.mp-post.mp-p1 li,
.mp-post.mp-p1 dt,
.mp-post.mp-p1 dd,
.mp-post.mp-p1 th,
.mp-post.mp-p1 td,
.mp-post.mp-p1 caption,
.mp-post.mp-p1 figcaption,
.mp-post.mp-p1 summary,
.mp-post.mp-p1 time,
.mp-post.mp-p1 span,
.mp-post.mp-p1 strong {
  font-family: inherit;
  font-style: normal;
  text-transform: none;
  letter-spacing: inherit;
}
.mp-post.mp-p1 h1,
.mp-post.mp-p1 h2,
.mp-post.mp-p1 h3 {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.2;
}
.mp-post.mp-p1 p,
.mp-post.mp-p1 li,
.mp-post.mp-p1 dd {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.mp-post.mp-p1 strong {
  font-weight: 600;
  color: var(--ink);
}
.mp-post.mp-p1 ul,
.mp-post.mp-p1 ol {
  list-style: none;
}
.mp-post.mp-p1 img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mp-post.mp-p1 table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
}
.mp-post.mp-p1 th,
.mp-post.mp-p1 td {
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}
.mp-post.mp-p1 button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}
/* Links inside prose: underlined, because colour alone does not separate
   violet from the body ink. The underline is quiet until hover. */
.mp-post.mp-p1 a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: var(--violet);
  text-decoration: underline;
  text-decoration-color: var(--violet-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  box-shadow: none;
  transition: color var(--t), text-decoration-color var(--t);
}
.mp-post.mp-p1 a:hover {
  color: var(--violet-deep);
  text-decoration-color: currentColor;
}
.mp-post.mp-p1 a:focus-visible,
.mp-post.mp-p1 button:focus-visible,
.mp-post.mp-p1 summary:focus-visible,
.mp-post.mp-p1 .mpp-table-wrap:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}
.mp-post.mp-p1 .mpp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 2. Type and shared pieces ------------------------------------------ */
.mp-post.mp-p1 .mpp-wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.mp-post.mp-p1 .mpp-h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.08;
  text-wrap: balance;
}
.mp-post.mp-p1 .mpp-h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
  margin-bottom: 20px;
  text-wrap: balance;
}
.mp-post.mp-p1 .mpp-h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.35;
}
.mp-post.mp-p1 .mpp-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 30px;
}
.mp-post.mp-p1 .mpp-note {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}
/* Running text stays narrower than the tables and screenshots beside it */
.mp-post.mp-p1 .mpp-intro p,
.mp-post.mp-p1 .mpp-body p {
  max-width: var(--prose);
}
.mp-post.mp-p1 .mpp-section {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header) + 4px);
}
.mp-post.mp-p1 .mpp-section--first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  scroll-margin-top: calc(var(--header) + 24px);
}
.mp-post.mp-p1 .mpp-section > p + p {
  margin-top: 20px;
}
.mp-post.mp-p1 .mpp-section > p + .mpp-h3 {
  margin-top: 20px;
}
.mp-post.mp-p1 .mpp-section > .mpp-h3 {
  margin-top: 44px;
  margin-bottom: 12px;
}
/* The verdict paragraph is the most read text on the page: one step up. */
.mp-post.mp-p1 .mpp-section--first > p:first-of-type {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--r-xs);
  background: var(--mist);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  white-space: nowrap;
}
.mp-post.mp-p1 .mpp-tag--on {
  background: var(--violet-soft);
  color: var(--violet-deep);
}

/* Score mark: the one recurring signature. Serif numerals on ink, citrine star. */
.mp-post.mp-p1 .mpp-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 10px 6px 9px;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.mp-post.mp-p1 .mpp-score::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 12px;
  height: 12px;
  margin-right: 2px;
  background: var(--i-star) center / contain no-repeat;
}
/* "4.4 / 5": the spaces are real, so no reader and no machine takes it for 4.45. */
.mp-post.mp-p1 .mpp-score__of {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--on-ink-3);
  word-spacing: -.1em;
}

/* ---- 3. Buttons --------------------------------------------------------- */
.mp-post.mp-p1 .mpp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.mp-post.mp-p1 .mpp-btn--primary {
  background: var(--ink);
  color: #fff;
  -webkit-font-smoothing: antialiased;
}
.mp-post.mp-p1 .mpp-btn--primary:hover {
  background: var(--violet-deep);
  color: #fff;
}
.mp-post.mp-p1 .mpp-btn--outline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}
.mp-post.mp-p1 .mpp-btn--outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-btn--signal {
  background: var(--citrine);
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-btn--signal:hover {
  background: #fff;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-btn--sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
}
.mp-post.mp-p1 .mpp-btn--block {
  display: flex;
  width: 100%;
}

/* ---- 4. Hero ------------------------------------------------------------ */
.mp-post.mp-p1 .mpp-hero {
  /* The theme header is fixed and overlaps the first 35px or so of the page. */
  padding: calc(var(--header) - 8px) 0 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-bottom: 56px;
}
.mp-post.mp-p1 .mpp-crumbs {
  margin-bottom: 26px;
}
.mp-post.mp-p1 .mpp-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-crumbs li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--line-strong);
}
.mp-post.mp-p1 .mpp-crumbs a {
  display: inline-block;
  padding: 10px 0;
  margin: -6px 0;
  color: var(--ink-3);
  text-decoration: none;
}
.mp-post.mp-p1 .mpp-crumbs a:hover {
  color: var(--violet);
  text-decoration: underline;
}
/* No image: the hero runs as one column of text. */
.mp-post.mp-p1 .mpp-hero__grid--solo {
  grid-template-columns: minmax(0, 46em);
}
.mp-post.mp-p1 .mpp-dek {
  max-width: 33em;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.mp-post.mp-p1 .mpp-byline {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
  margin-bottom: 28px;
}
.mp-post.mp-p1 .mpp-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.mp-post.mp-p1 .mpp-cta__note {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 19em;
}
.mp-post.mp-p1 .mpp-disclosure {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 36em;
}

/* Hero image: the one raised object on the page. */
.mp-post.mp-p1 .mpp-hero__shot {
  min-width: 0;
}
.mp-post.mp-p1 .mpp-hero__shot .mpp-shot__zoom {
  box-shadow: var(--shadow-lift);
}

.mp-post.mp-p1 .mpp-hero__main,
.mp-post.mp-p1 .mpp-bottom__text,
.mp-post.mp-p1 .mpp-alt__body {
  min-width: 0;
}

/* ---- 5. Layout: article column and rail --------------------------------- */
.mp-post.mp-p1 .mpp-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) var(--rail);
  justify-content: space-between;
  column-gap: 64px;
  padding-top: 60px;
  padding-bottom: 104px;
}
.mp-post.mp-p1 .mpp-intro {
  grid-column: 1;
  grid-row: 1;
}
.mp-post.mp-p1 .mpp-body {
  grid-column: 1;
  grid-row: 2;
}
.mp-post.mp-p1 .mpp-rail {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.mp-post.mp-p1 .mpp-rail__sticky {
  position: sticky;
  top: calc(var(--header) + 28px);
  max-height: calc(100vh - var(--header) - 52px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.mp-post.mp-p1 .mpp-toc__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 8px;
}
.mp-post.mp-p1 .mpp-toc__list a {
  display: block;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
}
.mp-post.mp-p1 .mpp-toc__list a:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-toc__list a.is-active {
  border-left-color: var(--violet);
  color: var(--ink);
  font-weight: 600;
}
.mp-post.mp-p1 .mpp-railcard {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.mp-post.mp-p1 .mpp-railcard__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-railcard__name img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-railcard__name .mpp-score {
  margin-left: auto;
}
.mp-post.mp-p1 .mpp-railcard__price {
  margin: 12px 0 16px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-2);
}
.mp-post.mp-p1 .mpp-railcard__compare {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-railcard__compare a {
  font-weight: 600;
}

/* ---- 6. Verdict and testing --------------------------------------------- */
/* One decision panel in two halves: the case for, with the link to the tool,
   and the case against, with the way to the alternatives. */
.mp-post.mp-p1 .mpp-fork {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.mp-post.mp-p1 .mpp-fork__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 28px;
  border-top: 3px solid var(--pos);
}
.mp-post.mp-p1 .mpp-fork__col--no {
  border-top-color: var(--neg);
  border-left: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-fork__title {
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.3;
  margin-bottom: 16px;
}
.mp-post.mp-p1 .mpp-fork__list {
  width: 100%;
}
.mp-post.mp-p1 .mpp-fork__list li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-fork__list li + li {
  margin-top: 12px;
}
.mp-post.mp-p1 .mpp-fork__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  background: var(--pos);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.mp-post.mp-p1 .mpp-fork__col--no .mpp-fork__list li::before {
  background: var(--neg);
  -webkit-mask-image: var(--i-minus);
  mask-image: var(--i-minus);
}
.mp-post.mp-p1 .mpp-fork__fit {
  width: 100%;
  margin: 20px 0 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.6;
}
.mp-post.mp-p1 .mpp-fork__col .mpp-btn {
  margin-top: auto;
  min-height: 46px;
  padding: 0 20px;
}
.mp-post.mp-p1 .mpp-fork__more {
  margin-top: 16px;
  font-size: 15.5px;
}
/* How we tested: the evidence record, the same four lines on every post. */
.mp-post.mp-p1 .mpp-testing {
  margin-top: 44px;
  padding: 30px 32px 32px;
  border-radius: var(--r-lg);
  background: var(--mist);
  scroll-margin-top: calc(var(--header) + 16px);
}
.mp-post.mp-p1 .mpp-testing__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.mp-post.mp-p1 .mpp-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 16px 0 20px;
  border-top: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-evidence__row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-evidence__row dt {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.mp-post.mp-p1 .mpp-evidence__row dd {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-testing p {
  font-size: 17px;
  line-height: 1.65;
}
/* What changed: dated lines, newest first. */
.mp-post.mp-p1 .mpp-changes {
  margin-top: 40px;
  scroll-margin-top: calc(var(--header) + 16px);
}
.mp-post.mp-p1 .mpp-changes__title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.008em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.mp-post.mp-p1 .mpp-changes__list {
  border-top: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-changes__row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-changes__row dt {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mp-post.mp-p1 .mpp-changes__row dd {
  font-size: 16.5px;
  line-height: 1.6;
}
.mp-post.mp-p1 .mpp-testing p + p {
  margin-top: 12px;
}

/* ---- 7. Images that open full size --------------------------------------- */

.mp-post.mp-p1 .mpp-section {
  counter-reset: mpp-step;
}
.mp-post.mp-p1 .mpp-shot__zoom {
  position: relative;
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  cursor: zoom-in;
}
.mp-post.mp-p1 .mpp-shot__zoom img {
  width: 100%;
}
.mp-post.mp-p1 .mpp-shot__zoom::after {
  content: "View full size";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 11px 6px 30px;
  border-radius: var(--r-sm);
  background: rgba(21, 18, 43, .9) var(--i-zoom) 10px center / 14px no-repeat;
  color: #fff;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
/* With a mouse the label waits for the pointer; on touch it is always there. */
@media (hover: hover) {
  .mp-post.mp-p1 .mpp-shot__zoom::after {
    opacity: 0;
    transition: opacity var(--t);
  }
  .mp-post.mp-p1 .mpp-shot__zoom:hover::after,
  .mp-post.mp-p1 .mpp-shot__zoom:focus-visible::after {
    opacity: 1;
  }
}
.mp-post.mp-p1 .mpp-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
}
.mp-post.mp-p1 .mpp-inline-cta p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-inline-cta--tight {
  margin: 22px 0 30px;
  background: var(--mist);
  border-color: transparent;
}

/* ---- 8. Features and steps ---------------------------------------------- */
.mp-post.mp-p1 .mpp-features {
  border-top: 1px solid var(--line-strong);
  margin-bottom: 32px;
}
.mp-post.mp-p1 .mpp-feature {
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-feature > p {
  font-size: 17px;
  line-height: 1.68;
}
.mp-post.mp-p1 .mpp-feature__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}
.mp-post.mp-p1 .mpp-step {
  position: relative;
  counter-increment: mpp-step;
  padding: 0 0 28px 48px;
}
.mp-post.mp-p1 .mpp-step::before {
  content: counter(mpp-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
.mp-post.mp-p1 .mpp-step .mpp-h3 {
  margin-bottom: 6px;
}

/* ---- 9. Tables ---------------------------------------------------------- */
.mp-post.mp-p1 .mpp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  /* Edge shadows that appear only when there is more to scroll. */
  background:
    linear-gradient(to right, var(--paper) 40%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
    linear-gradient(to right, rgba(21, 18, 43, .13), rgba(21, 18, 43, 0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(to left, rgba(21, 18, 43, .13), rgba(21, 18, 43, 0)) right center / 16px 100% no-repeat scroll,
    var(--paper);
}
.mp-post.mp-p1 .mpp-table {
  min-width: 100%;
  font-size: 15px;
  line-height: 1.5;
}
.mp-post.mp-p1 .mpp-table th,
.mp-post.mp-p1 .mpp-table td {
  min-width: 104px;
  padding: 15px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.mp-post.mp-p1 .mpp-table tbody tr:last-child th,
.mp-post.mp-p1 .mpp-table tbody tr:last-child td {
  border-bottom: 0;
}
.mp-post.mp-p1 .mpp-table thead th,
.mp-post.mp-p1 .mpp-table thead td {
  padding-top: 16px;
  border-bottom: 1px solid var(--line-strong);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  vertical-align: bottom;
  background: var(--mist);
}
.mp-post.mp-p1 .mpp-table thead .mpp-tag {
  display: table;
  margin-top: 5px;
  background: var(--violet-soft);
}
.mp-post.mp-p1 .mpp-table thead a {
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-table thead a:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-table tbody th {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
/* First column stays put while the rest scrolls. */
.mp-post.mp-p1 .mpp-table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 136px;
  max-width: 156px;
  background: var(--paper);
  box-shadow: 1px 0 0 var(--line);
}
.mp-post.mp-p1 .mpp-table thead tr > :first-child {
  background: var(--mist);
}
.mp-post.mp-p1 .mpp-table-hint {
  display: none;
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-table-wrap + .mpp-table-hint + .mpp-note,
.mp-post.mp-p1 .mpp-table-wrap + .mpp-table-hint + p {
  margin-top: 14px;
}
.mp-post.mp-p1 .mpp-table-wrap + .mpp-table-hint + .mpp-note + p {
  margin-top: 22px;
}

/* ---- 10. Pros and cons -------------------------------------------------- */
.mp-post.mp-p1 .mpp-pc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 44px;
}
.mp-post.mp-p1 .mpp-pc__col .mpp-h3 {
  padding-bottom: 12px;
  border-bottom: 3px solid var(--pos);
}
.mp-post.mp-p1 .mpp-pc__col--cons .mpp-h3 {
  border-bottom-color: var(--neg);
}
.mp-post.mp-p1 .mpp-pc__item {
  position: relative;
  padding: 18px 0 18px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.62;
}
.mp-post.mp-p1 .mpp-pc__item:last-child {
  border-bottom: 0;
}
.mp-post.mp-p1 .mpp-pc__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 21px;
  width: 19px;
  height: 19px;
  background: var(--pos);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.mp-post.mp-p1 .mpp-pc__col--cons .mpp-pc__item::before {
  background: var(--neg);
  -webkit-mask-image: var(--i-minus);
  mask-image: var(--i-minus);
}
.mp-post.mp-p1 .mpp-pc__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.38;
  color: var(--ink);
  letter-spacing: -.008em;
  margin-bottom: 5px;
}

/* ---- 11. Alternatives --------------------------------------------------- */
.mp-post.mp-p1 .mpp-alts {
  border-top: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-alt {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16.5px;
  line-height: 1.62;
}
.mp-post.mp-p1 .mpp-alt__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  object-fit: cover;
}
.mp-post.mp-p1 .mpp-alt__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 8px;
}
.mp-post.mp-p1 .mpp-alt__body p + p {
  margin-top: 8px;
}
.mp-post.mp-p1 .mpp-alt__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: 15.5px;
  font-weight: 600;
}
.mp-post.mp-p1 .mpp-alt__body .mpp-alt__links {
  margin-top: 6px;
}
.mp-post.mp-p1 .mpp-alt__links a {
  padding: 10px 0;
}
.mp-post.mp-p1 .mpp-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  text-decoration-color: var(--line-strong);
}
.mp-post.mp-p1 .mpp-out::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--i-out) center / contain no-repeat;
  mask: var(--i-out) center / contain no-repeat;
}

/* ---- 12. FAQ ------------------------------------------------------------ */
.mp-post.mp-p1 .mpp-faq,
.mp-post.mp-p1 .mpp-folds {
  border-top: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-folds {
  margin-top: 36px;
}
.mp-post.mp-p1 .mpp-faq__item,
.mp-post.mp-p1 .mpp-fold {
  border-bottom: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-faq__summary,
.mp-post.mp-p1 .mpp-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 0;
  cursor: pointer;
  list-style: none;
}
.mp-post.mp-p1 .mpp-faq__summary::-webkit-details-marker,
.mp-post.mp-p1 .mpp-fold__summary::-webkit-details-marker {
  display: none;
}
.mp-post.mp-p1 .mpp-faq__summary::after,
.mp-post.mp-p1 .mpp-fold__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--ink-3);
  -webkit-mask: var(--i-plus) center / contain no-repeat;
  mask: var(--i-plus) center / contain no-repeat;
  transition: transform var(--t), background-color var(--t);
}
.mp-post.mp-p1 .mpp-faq__item[open] .mpp-faq__summary::after,
.mp-post.mp-p1 .mpp-fold[open] .mpp-fold__summary::after {
  transform: rotate(45deg);
  background: var(--violet);
}
.mp-post.mp-p1 .mpp-faq__q,
.mp-post.mp-p1 .mpp-fold__title {
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.4;
  transition: color var(--t);
}
.mp-post.mp-p1 .mpp-faq__summary:hover .mpp-faq__q,
.mp-post.mp-p1 .mpp-fold__summary:hover .mpp-fold__title {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-faq__a {
  padding: 0 40px 24px 0;
  font-size: 17px;
  line-height: 1.68;
}
.mp-post.mp-p1 .mpp-fold__summary {
  padding: 17px 0;
}
.mp-post.mp-p1 .mpp-fold__title {
  font-size: 17.5px;
}
.mp-post.mp-p1 .mpp-fold__body {
  padding: 0 0 22px;
  font-size: 17px;
  line-height: 1.68;
}
.mp-post.mp-p1 .mpp-fold__body p + p {
  margin-top: 14px;
}

/* ---- 13. Bottom line ---------------------------------------------------- */
.mp-post.mp-p1 .mpp-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 44px;
  align-items: start;
  margin-top: 80px;
  padding: 48px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink-2);
  -webkit-font-smoothing: antialiased;
  scroll-margin-top: calc(var(--header) + 20px);
}
.mp-post.mp-p1 .mpp-bottom__title {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 18px;
}
.mp-post.mp-p1 .mpp-bottom p {
  font-size: 17px;
  line-height: 1.68;
  color: var(--on-ink-2);
}
.mp-post.mp-p1 .mpp-bottom strong {
  color: #fff;
}
.mp-post.mp-p1 .mpp-bottom__rec {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--on-ink-line);
}
.mp-post.mp-p1 .mpp-bottom__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 30px;
}
.mp-post.mp-p1 .mpp-bottom .mpp-bottom__alt {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--on-ink-3);
  text-underline-offset: 4px;
}
.mp-post.mp-p1 .mpp-bottom .mpp-bottom__alt:hover {
  color: var(--citrine);
  text-decoration-color: var(--citrine);
}
.mp-post.mp-p1 .mpp-bottom__score {
  min-width: 148px;
  padding: 24px 22px 22px;
  border: 1px solid var(--on-ink-line);
  border-radius: var(--r-md);
  text-align: center;
}
.mp-post.mp-p1 .mpp-bottom .mpp-bottom__num {
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  font-variant-numeric: lining-nums tabular-nums;
}
.mp-post.mp-p1 .mpp-bottom__of {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--on-ink-3);
  white-space: pre;
}
.mp-post.mp-p1 .mpp-bottom .mpp-bottom__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.mp-post.mp-p1 .mpp-bottom__label::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--i-star) center / contain no-repeat;
}

/* ---- 14. Related and about ---------------------------------------------- */
.mp-post.mp-p1 .mpp-related__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 40px;
}
/* Guides alone: they take the full width, two to a row. */
.mp-post.mp-p1 .mpp-related__grid > div:only-child {
  grid-column: 1 / -1;
}
.mp-post.mp-p1 .mpp-related__grid > div:only-child .mpp-rel-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 40px;
}
.mp-post.mp-p1 .mpp-related__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-rel-list li {
  border-bottom: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-rel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
.mp-post.mp-p1 .mpp-rel img {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  object-fit: cover;
}
.mp-post.mp-p1 .mpp-rel__name {
  flex: 1 1 auto;
  min-width: 0;
}
.mp-post.mp-p1 .mpp-rel:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-rel:hover .mpp-score {
  background: var(--violet-deep);
}
.mp-post.mp-p1 .mpp-rel-list--text a {
  display: block;
  padding: 14px 0;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.mp-post.mp-p1 .mpp-rel-list--text a:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-related__more {
  margin-top: 16px;
  font-size: 15.5px;
  font-weight: 600;
}
.mp-post.mp-p1 .mpp-about {
  margin-top: 60px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  scroll-margin-top: calc(var(--header) + 16px);
}
.mp-post.mp-p1 .mpp-about__title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.mp-post.mp-p1 .mpp-about p + p {
  margin-top: 8px;
}
.mp-post.mp-p1 .mpp-about .mpp-about__sub {
  margin-top: 14px;
  font-weight: 600;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-sources {
  margin: 4px 0 12px;
}
.mp-post.mp-p1 .mpp-sources li {
  position: relative;
  padding-left: 16px;
  max-width: var(--prose);
}
.mp-post.mp-p1 .mpp-sources li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}
.mp-post.mp-p1 .mpp-sources strong {
  font-weight: 600;
}

/* ---- 15. Sticky bar (phones and tablets) -------------------------------- */
.mp-post.mp-p1 .mpp-sticky {
  display: none;
}

/* ---- 16. Responsive ----------------------------------------------------- */
@media (min-width: 1100px) and (max-height: 779px) {
  /* Short laptop screens: the rail gives up its price line to stay in view. */
  .mp-post.mp-p1 .mpp-railcard {
    margin-top: 18px;
    padding: 16px;
  }
  .mp-post.mp-p1 .mpp-railcard__price {
    display: none;
  }
  .mp-post.mp-p1 .mpp-railcard__name {
    margin-bottom: 14px;
  }
  .mp-post.mp-p1 .mpp-toc__list a {
    padding: 4px 0 4px 14px;
    font-size: 14px;
  }
}
@media (max-width: 1099px) {
  .mp-post.mp-p1 .mpp-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    padding-bottom: 38px;
  }
  /* One column: the hero lines up with the article below it. */
  .mp-post.mp-p1 .mpp-hero > .mpp-wrap {
    max-width: calc(var(--measure) + var(--pad-x) * 2);
  }
  .mp-post.mp-p1 .mpp-hero__shot .mpp-shot__zoom {
    box-shadow: 0 1px 2px rgba(21, 18, 43, .06), 0 20px 40px -24px rgba(21, 18, 43, .34);
  }
  .mp-post.mp-p1 .mpp-layout {
    display: block;
    max-width: calc(var(--measure) + var(--pad-x) * 2);
    padding-top: 48px;
    padding-bottom: 80px;
  }
  .mp-post.mp-p1 .mpp-rail {
    margin-top: 40px;
  }
  .mp-post.mp-p1 .mpp-rail__sticky {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .mp-post.mp-p1 .mpp-toc {
    padding: 20px 22px 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
  }
  .mp-post.mp-p1 .mpp-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
  }
  .mp-post.mp-p1 .mpp-toc__list a {
    padding: 10px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .mp-post.mp-p1 .mpp-toc__list a.is-active {
    font-weight: 400;
    color: var(--ink-3);
  }
  .mp-post.mp-p1 .mpp-railcard {
    display: none;
  }
  .mp-post.mp-p1 .mpp-table-hint {
    display: block;
  }
  /* While the bottom bar runs, it is the navigation and the inline list steps aside. */
  .mp-post.mp-p1.mpp-has-bar .mpp-rail {
    display: none;
  }
  /* Bottom bar: contents on the left, the link to the tool on the right. */
  .mp-post.mp-p1 .mpp-sticky {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)) 12px;
    background: var(--paper);
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -8px 24px rgba(21, 18, 43, .08);
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .22s ease, visibility 0s linear .22s;
  }
  .mp-post.mp-p1 .mpp-sticky.is-on {
    visibility: visible;
    transform: none;
    transition: transform .22s ease;
  }
  .mp-post.mp-p1 .mpp-jump {
    margin-right: auto;
  }
  .mp-post.mp-p1 .mpp-jump__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px 0 13px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    list-style: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mp-post.mp-p1 .mpp-jump__btn::-webkit-details-marker {
    display: none;
  }
  .mp-post.mp-p1 .mpp-jump__btn::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--ink);
    -webkit-mask: var(--i-list) center / contain no-repeat;
    mask: var(--i-list) center / contain no-repeat;
  }
  .mp-post.mp-p1 .mpp-jump[open] .mpp-jump__btn {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .mp-post.mp-p1 .mpp-jump[open] .mpp-jump__btn::before {
    background: #fff;
  }
  .mp-post.mp-p1 .mpp-jump__panel {
    position: absolute;
    left: 12px;
    bottom: calc(100% + 8px);
    width: min(340px, calc(100vw - 24px));
    max-height: min(70vh, 540px);
    overflow-y: auto;
    padding: 6px 18px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-lg);
    background: var(--paper);
    box-shadow: 0 20px 44px -16px rgba(21, 18, 43, .38);
  }
  .mp-post.mp-p1 .mpp-jump__panel a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink-2);
    text-decoration: none;
  }
  .mp-post.mp-p1 .mpp-jump__panel li:last-child a {
    border-bottom: 0;
  }
  .mp-post.mp-p1 .mpp-jump__panel a.is-active {
    color: var(--ink);
    font-weight: 600;
  }
  .mp-post.mp-p1 .mpp-sticky__score {
    display: none;
  }
  /* Closed by the reader: the link goes, the contents button stays as a small floating control. */
  .mp-post.mp-p1 .mpp-sticky.is-min {
    left: 12px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .mp-post.mp-p1 .mpp-sticky.is-min > :not(.mpp-jump) {
    display: none;
  }
  .mp-post.mp-p1 .mpp-sticky.is-min .mpp-jump__btn {
    background: var(--paper);
    box-shadow: 0 8px 22px -8px rgba(21, 18, 43, .45);
  }
  .mp-post.mp-p1 .mpp-sticky.is-min .mpp-jump[open] .mpp-jump__btn {
    background: var(--ink);
  }
  .mp-post.mp-p1 .mpp-sticky.is-min .mpp-jump__panel {
    left: 0;
  }
  .mp-post.mp-p1 .mpp-sticky__close {
    flex: 0 0 auto;
    width: 40px;
    height: 44px;
    background: var(--ink-3);
    -webkit-mask: var(--i-close) center / 18px no-repeat;
    mask: var(--i-close) center / 18px no-repeat;
  }
}
@media (min-width: 480px) and (max-width: 1099px) {
  .mp-post.mp-p1 .mpp-sticky__score {
    display: inline-flex;
  }
}
@media (max-width: 767px) {
  .mp-post.mp-p1 {
    --pad-x: 20px;
    font-size: 17px;
    line-height: 1.66;
  }
  .mp-post.mp-p1 .mpp-hero {
    padding-top: calc(var(--header) - 16px);
  }
  /* Phones show one crumb: the way back to the category. */
  .mp-post.mp-p1 .mpp-crumbs {
    margin-bottom: 16px;
  }
  .mp-post.mp-p1 .mpp-crumbs li {
    display: none;
  }
  .mp-post.mp-p1 .mpp-crumbs li:last-child {
    display: flex;
    align-items: center;
  }
  .mp-post.mp-p1 .mpp-crumbs li:last-child::before {
    content: "";
    width: 14px;
    height: 14px;
    margin-right: 4px;
    background: var(--ink-3);
    -webkit-mask: var(--i-back) center / contain no-repeat;
    mask: var(--i-back) center / contain no-repeat;
  }
  .mp-post.mp-p1 .mpp-h1 {
    font-size: 31px;
    line-height: 1.12;
    letter-spacing: -.01em;
  }
  .mp-post.mp-p1 .mpp-dek,
  .mp-post.mp-p1 .mpp-lead,
  .mp-post.mp-p1 .mpp-section--first > p:first-of-type {
    font-size: 18px;
    line-height: 1.58;
  }
  .mp-post.mp-p1 .mpp-byline {
    margin-bottom: 24px;
  }
  .mp-post.mp-p1 .mpp-hero__grid {
    gap: 28px;
    padding-bottom: 30px;
  }
  .mp-post.mp-p1 .mpp-evidence {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-post.mp-p1 .mpp-evidence__row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
  }
  .mp-post.mp-p1 .mpp-evidence__row dt {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 0;
  }
  .mp-post.mp-p1 .mpp-evidence__row dd {
    line-height: 1.45;
  }
  .mp-post.mp-p1 .mpp-changes__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .mp-post.mp-p1 .mpp-shot__zoom::after {
    right: 8px;
    bottom: 8px;
  }
  .mp-post.mp-p1 .mpp-fork {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 26px;
  }
  .mp-post.mp-p1 .mpp-fork__col {
    padding: 22px 20px 24px;
  }
  .mp-post.mp-p1 .mpp-fork__col--no {
    border-left: 0;
  }
  .mp-post.mp-p1 .mpp-fork__col .mpp-btn {
    width: 100%;
  }
  .mp-post.mp-p1 .mpp-h2 {
    font-size: 26px;
    line-height: 1.16;
    margin-bottom: 16px;
  }
  .mp-post.mp-p1 .mpp-testing__title,
  .mp-post.mp-p1 .mpp-changes__title {
    font-size: 23px;
  }
  .mp-post.mp-p1 .mpp-section {
    margin-top: 44px;
    padding-top: 36px;
  }
  .mp-post.mp-p1 .mpp-section--first {
    margin-top: 0;
    padding-top: 0;
  }
  .mp-post.mp-p1 .mpp-section > .mpp-h3 {
    margin-top: 36px;
  }
  .mp-post.mp-p1 .mpp-pc,
  .mp-post.mp-p1 .mpp-related__grid,
  .mp-post.mp-p1 .mpp-related__grid > div:only-child .mpp-rel-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-post.mp-p1 .mpp-pc__col + .mpp-pc__col {
    margin-top: 36px;
  }
  .mp-post.mp-p1 .mpp-testing {
    margin-top: 36px;
    padding: 24px 20px;
    border-radius: var(--r-md);
  }
  .mp-post.mp-p1 .mpp-testing p {
    font-size: 16.5px;
  }
  .mp-post.mp-p1 .mpp-shot__zoom {
    border-radius: 10px;
  }
  .mp-post.mp-p1 .mpp-inline-cta {
    padding: 18px 20px;
  }
  .mp-post.mp-p1 .mpp-inline-cta .mpp-btn {
    width: 100%;
  }
  .mp-post.mp-p1 .mpp-feature > p,
  .mp-post.mp-p1 .mpp-faq__a,
  .mp-post.mp-p1 .mpp-fold__body {
    font-size: 16.5px;
  }
  .mp-post.mp-p1 .mpp-faq__q {
    font-size: 17.5px;
  }
  .mp-post.mp-p1 .mpp-faq__a {
    padding-right: 0;
  }
  .mp-post.mp-p1 .mpp-alt {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
  }
  .mp-post.mp-p1 .mpp-alt__logo {
    width: 44px;
    height: 44px;
  }
  .mp-post.mp-p1 .mpp-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-top: 60px;
    padding: 32px 22px;
  }
  .mp-post.mp-p1 .mpp-bottom__title {
    font-size: 29px;
  }
  .mp-post.mp-p1 .mpp-bottom p {
    font-size: 16.5px;
  }
  .mp-post.mp-p1 .mpp-bottom__score {
    order: -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--on-ink-line);
    border-radius: 0;
    text-align: left;
  }
  .mp-post.mp-p1 .mpp-bottom .mpp-bottom__num {
    font-size: 52px;
  }
  .mp-post.mp-p1 .mpp-bottom .mpp-bottom__label {
    margin-top: 0;
  }
  .mp-post.mp-p1 .mpp-bottom .mpp-btn {
    width: 100%;
  }
  .mp-post.mp-p1 .mpp-bottom__actions {
    justify-content: center;
  }
  .mp-post.mp-p1 .mpp-table th,
  .mp-post.mp-p1 .mpp-table td {
    min-width: 112px;
  }
  .mp-post.mp-p1 .mpp-table tr > :first-child {
    min-width: 108px;
    max-width: 124px;
  }
}
@media (max-width: 420px) {
  .mp-post.mp-p1 .mpp-cta .mpp-btn {
    width: 100%;
  }
}
/* ---- 17. Blog blocks ------------------------------------------------------ */
/* Rhythm: a block that follows another gets one line of space. :where() keeps
   this rule weaker than every component rule, so a component that sets its
   own margin always wins, whatever the order of blocks in a post. */
.mp-post.mp-p1 :where(.mpp-section > * + *, .mpp-entry__body > * + *) {
  margin-top: 20px;
}
/* The wrapper itself, and any anchor target without a rule of its own. */
.mp-post.mp-p1 {
  box-sizing: border-box;
}
.mp-post.mp-p1 :where([id]) {
  scroll-margin-top: calc(var(--header) + 16px);
}
.mp-post.mp-p1 .mpp-section > .mpp-table-wrap,
.mp-post.mp-p1 .mpp-section > .mpp-features,
.mp-post.mp-p1 .mpp-section > .mpp-alts {
  margin-top: 24px;
}
.mp-post.mp-p1 .mpp-section > .mpp-steps {
  margin-top: 28px;
}
.mp-post.mp-p1 .mpp-steps .mpp-step:last-child {
  padding-bottom: 0;
}
.mp-post.mp-p1 .mpp-step p {
  font-size: 17px;
  line-height: 1.68;
}
.mp-post.mp-p1 .mpp-table tbody th a {
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-table tbody th .mpp-tag {
  display: table;
  margin-top: 5px;
}

/* Hero: topic, headline, standfirst, byline, disclosure. */
.mp-post.mp-p1 .mpp-kicker {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0 10px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--violet);
  text-decoration: none;
}
.mp-post.mp-p1 .mpp-kicker:hover {
  text-decoration: underline;
}
.mp-post.mp-p1 .mpp-hero .mpp-h1 {
  margin-bottom: 20px;
}
.mp-post.mp-p1 .mpp-hero .mpp-byline {
  margin-bottom: 8px;
}
.mp-post.mp-p1 .mpp-byline a {
  color: var(--ink-3);
  text-decoration-color: var(--line-strong);
}
.mp-post.mp-p1 .mpp-byline a:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-hero .mpp-disclosure {
  margin-top: 0;
}
.mp-post.mp-p1 .mpp-hero .mpp-cta {
  margin-top: 26px;
}
/* Hero picture at its own proportions: nothing is cropped, whatever its shape. */
.mp-post.mp-p1 .mpp-hero__frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
  box-shadow: var(--shadow-lift);
}
.mp-post.mp-p1 .mpp-hero__frame img {
  width: 100%;
}
.mp-post.mp-p1 .mpp-hero__cap {
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Figures. Elementor zeroes figure margins with a strong rule, so the space
   above is padding on the figure and the space below is a margin on whatever
   follows it. The page then looks the same with or without the theme. */
.mp-post.mp-p1 figure.mpp-fig {
  margin: 0;
  padding-top: 32px;
}
.mp-post.mp-p1 .mpp-h2 + figure.mpp-fig,
.mp-post.mp-p1 .mpp-h3 + figure.mpp-fig {
  padding-top: 6px;
}
.mp-post.mp-p1 .mpp-section > .mpp-fig + * {
  margin-top: 30px;
}
.mp-post.mp-p1 .mpp-fig__cap {
  max-width: var(--prose);
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
/* A picture with nothing to open: a plain frame, no link. */
.mp-post.mp-p1 .mpp-fig__frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--mist);
}
.mp-post.mp-p1 .mpp-fig__frame img {
  width: 100%;
}

/* On touch screens the "View full size" label would sit on top of the picture,
   so the caption says it instead. */
@media (hover: none) {
  .mp-post.mp-p1 .mpp-fig .mpp-shot__zoom::after {
    display: none;
  }
  .mp-post.mp-p1 .mpp-fig:has(.mpp-shot__zoom) .mpp-fig__cap::after {
    content: " Tap the picture to see it full size.";
  }
}

/* Key takeaways: three to five facts that stand on their own. */
.mp-post.mp-p1 .mpp-takeaways {
  margin-top: 32px;
  padding: 26px 28px 28px;
  border-radius: var(--r-lg);
  background: var(--mist);
}
.mp-post.mp-p1 .mpp-takeaways__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 14px;
}
.mp-post.mp-p1 .mpp-takeaways__list li {
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-takeaways__list li + li {
  margin-top: 12px;
}
.mp-post.mp-p1 .mpp-takeaways__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* Text inside these blocks takes the block's width, not the reading measure. */
.mp-post.mp-p1 .mpp-picks p,
.mp-post.mp-p1 .mpp-vs p,
.mp-post.mp-p1 .mpp-entry__head p,
.mp-post.mp-p1 .mpp-edge {
  max-width: none;
}

/* Quick picks: the answer to a roundup in a few rows, each linked to its entry. */
.mp-post.mp-p1 .mpp-picks {
  margin-top: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.mp-post.mp-p1 .mpp-picks__title {
  padding: 15px 22px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--mist);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-pick {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-pick:last-child {
  border-bottom: 0;
}
.mp-post.mp-p1 .mpp-pick__for {
  grid-row: 1 / span 2;
  padding-top: 5px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-pick__tool {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-pick__tool img {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-pick__tool a {
  padding: 9px 0;
  margin: -9px 0;
  color: var(--ink);
  text-decoration-color: var(--line-strong);
}
.mp-post.mp-p1 .mpp-pick__tool a:hover {
  color: var(--violet);
}
.mp-post.mp-p1 .mpp-pick__tool .mpp-score {
  margin-left: auto;
}
.mp-post.mp-p1 .mpp-pick__why {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Ranked entry: one tool in a roundup. Logo, name, score, three facts, text. */
.mp-post.mp-p1 .mpp-entry__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: start;
}
.mp-post.mp-p1 .mpp-entry__logo {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  object-fit: cover;
}
.mp-post.mp-p1 .mpp-entry__head .mpp-h2 {
  margin-bottom: 6px;
}
.mp-post.mp-p1 .mpp-entry__head .mpp-score {
  margin-top: 6px;
}
.mp-post.mp-p1 .mpp-entry__for {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mp-post.mp-p1 .mpp-entry__for .mpp-tag {
  margin-right: 6px;
}
.mp-post.mp-p1 .mpp-entry__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-entry__fact {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-strong);
}
.mp-post.mp-p1 .mpp-entry__fact dt {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.mp-post.mp-p1 .mpp-entry__fact dd {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-entry__body {
  margin-top: 24px;
}
.mp-post.mp-p1 .mpp-entry .mpp-entry__body > p {
  font-size: 17px;
  line-height: 1.68;
}
.mp-post.mp-p1 .mpp-entry__body .mpp-pc {
  margin-top: 28px;
}
.mp-post.mp-p1 .mpp-entry__body .mpp-alt__links {
  margin-top: 16px;
}

/* Head to head: two tools side by side, each with the case for choosing it. */
.mp-post.mp-p1 .mpp-vs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.mp-post.mp-p1 .mpp-vs__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 26px 28px;
  border-top: 3px solid var(--ink);
}
.mp-post.mp-p1 .mpp-vs__col + .mpp-vs__col {
  border-left: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-vs__name {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.3;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-vs__name img {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.mp-post.mp-p1 .mpp-vs__name .mpp-score {
  margin-left: auto;
}
.mp-post.mp-p1 .mpp-vs__price {
  width: 100%;
  margin-top: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mp-post.mp-p1 .mpp-vs__title {
  margin: 18px 0 12px;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.3;
}
.mp-post.mp-p1 .mpp-vs__list {
  width: 100%;
  margin-bottom: 22px;
}
.mp-post.mp-p1 .mpp-vs__list li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-vs__list li + li {
  margin-top: 10px;
}
.mp-post.mp-p1 .mpp-vs__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
}
.mp-post.mp-p1 .mpp-vs__col .mpp-btn {
  margin-top: auto;
  min-height: 46px;
  padding: 0 20px;
}
.mp-post.mp-p1 .mpp-vs__more {
  margin-top: 12px;
  font-size: 15px;
}
.mp-post.mp-p1 .mpp-vs__more a {
  display: inline-block;
  padding: 8px 0;
  margin: -8px 0;
}

/* Edge: the one-line result of a comparison round. */
.mp-post.mp-p1 .mpp-edge {
  padding: 14px 18px;
  border-left: 3px solid var(--ink);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--mist);
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}

/* Callout: a tip, a definition or a warning. One quiet style. */
.mp-post.mp-p1 .mpp-callout {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: 16.5px;
  line-height: 1.6;
}
.mp-post.mp-p1 .mpp-callout__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 4px;
}
.mp-post.mp-p1 .mpp-callout--warn {
  border-left: 3px solid var(--neg);
}
.mp-post.mp-p1 .mpp-callout p + p {
  margin-top: 10px;
}

/* Advert: labelled, with its height held so the text below does not jump.
   When Google reports the slot empty, the whole block steps aside. */
.mp-post.mp-p1 .mpp-ad {
  margin-top: 44px;
  min-height: 300px;
  text-align: center;
}
.mp-post.mp-p1 .mpp-ad__label {
  max-width: none;
  margin-bottom: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-ad:has(ins[data-ad-status="unfilled"]) {
  display: none;
}

/* Tools named in the post, each with its score and a link to its review. */
.mp-post.mp-p1 .mpp-related .mpp-rel .mpp-score {
  flex: 0 0 auto;
}
.mp-post.mp-p1 .mpp-about .mpp-sources a {
  overflow-wrap: anywhere;
}
/* A bar with no link to a tool is just the floating contents button. */
.mp-post.mp-p1 .mpp-sticky--nav > :not(.mpp-jump) {
  display: none;
}

@media (max-width: 1099px) {
  .mp-post.mp-p1 .mpp-hero__shot {
    max-width: 560px;
  }
  .mp-post.mp-p1 .mpp-sticky--nav {
    left: 12px;
    right: auto;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .mp-post.mp-p1 .mpp-sticky--nav .mpp-jump__btn {
    background: var(--paper);
    box-shadow: 0 8px 22px -8px rgba(21, 18, 43, .45);
  }
  .mp-post.mp-p1 .mpp-sticky--nav .mpp-jump[open] .mpp-jump__btn {
    background: var(--ink);
  }
  .mp-post.mp-p1 .mpp-sticky--nav .mpp-jump__panel {
    left: 0;
  }
}
@media (max-width: 767px) {
  .mp-post.mp-p1 .mpp-kicker {
    margin-bottom: 6px;
  }
  .mp-post.mp-p1 .mpp-hero .mpp-h1 {
    margin-bottom: 14px;
  }
  .mp-post.mp-p1 .mpp-hero__cap {
    margin-top: 10px;
  }
  .mp-post.mp-p1 figure.mpp-fig {
    padding-top: 26px;
  }
  .mp-post.mp-p1 .mpp-section > .mpp-fig + * {
    margin-top: 24px;
  }
  .mp-post.mp-p1 .mpp-fig__frame {
    border-radius: 10px;
  }
  .mp-post.mp-p1 .mpp-takeaways {
    margin-top: 26px;
    padding: 22px 20px 24px;
    border-radius: var(--r-md);
  }
  .mp-post.mp-p1 .mpp-takeaways__list li,
  .mp-post.mp-p1 .mpp-step p,
  .mp-post.mp-p1 .mpp-callout,
  .mp-post.mp-p1 .mpp-edge {
    font-size: 16.5px;
  }
  .mp-post.mp-p1 .mpp-picks {
    margin-top: 26px;
  }
  .mp-post.mp-p1 .mpp-picks__title {
    padding: 14px 18px;
  }
  .mp-post.mp-p1 .mpp-pick {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 16px 18px;
  }
  .mp-post.mp-p1 .mpp-pick__for {
    grid-row: auto;
    padding-top: 0;
  }
  .mp-post.mp-p1 .mpp-entry__head {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .mp-post.mp-p1 .mpp-entry__logo {
    width: 44px;
    height: 44px;
  }
  .mp-post.mp-p1 .mpp-entry__head .mpp-score {
    grid-column: 2;
    justify-self: start;
    margin-top: 8px;
  }
  .mp-post.mp-p1 .mpp-entry__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-post.mp-p1 .mpp-entry__fact {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
  }
  .mp-post.mp-p1 .mpp-entry__fact dt {
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 0;
  }
  .mp-post.mp-p1 .mpp-vs {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 26px;
  }
  .mp-post.mp-p1 .mpp-vs__col {
    padding: 22px 20px 24px;
  }
  .mp-post.mp-p1 .mpp-vs__col + .mpp-vs__col {
    border-left: 0;
  }
  .mp-post.mp-p1 .mpp-vs__col .mpp-btn {
    width: 100%;
  }
  .mp-post.mp-p1 .mpp-ad {
    margin-top: 36px;
  }
  /* Three-column tables fit a phone without sideways scrolling. */
  .mp-post.mp-p1 .mpp-table th,
  .mp-post.mp-p1 .mpp-table td {
    min-width: 90px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 389px) {
  .mp-post.mp-p1 .mpp-table,
  .mp-post.mp-p1 .mpp-table thead th,
  .mp-post.mp-p1 .mpp-table tbody th {
    font-size: 14px;
  }
}

/* ---- 18. Sources under a table, and small type refinements --------------
   A one-line disclosure: where the numbers come from and when they were
   checked, with the links one tap away. Anything the reader must see (a
   conflict between two pages, our own arithmetic) stays in a .mpp-note. */
.mp-post.mp-p1 .mpp-src {
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-post.mp-p1 .mpp-note + .mpp-src {
  margin-top: 2px;
}
.mp-post.mp-p1 .mpp-src__sum {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
  list-style: none;
  transition: color var(--t);
}
.mp-post.mp-p1 .mpp-src__sum::-webkit-details-marker {
  display: none;
}
.mp-post.mp-p1 .mpp-src__sum::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-plus) center / contain no-repeat;
  mask: var(--i-plus) center / contain no-repeat;
  transition: transform var(--t);
}
.mp-post.mp-p1 .mpp-src[open] .mpp-src__sum::before {
  transform: rotate(45deg);
}
.mp-post.mp-p1 .mpp-src__sum:hover,
.mp-post.mp-p1 .mpp-src[open] .mpp-src__sum {
  color: var(--ink);
}
.mp-post.mp-p1 .mpp-src__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 22px;
  margin: 0;
  padding: 0 0 4px 22px;
}
.mp-post.mp-p1 .mpp-src__list li {
  max-width: none;
  padding: 9px 0;
}
.mp-post.mp-p1 .mpp-src + * {
  margin-top: 22px;
}
/* Figures line up in tables; paragraphs avoid a lone last word. */
.mp-post.mp-p1 .mpp-table {
  font-variant-numeric: tabular-nums;
}
.mp-post.mp-p1 :where(p, li, dd, figcaption) {
  text-wrap: pretty;
}
@media print {
  .mp-post.mp-p1 .mpp-src__sum::before {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mp-post.mp-p1 *,
  .mp-post.mp-p1 *::before,
  .mp-post.mp-p1 *::after {
    transition: none !important;
  }
}
@media print {
  .mp-post.mp-p1 .mpp-sticky,
  .mp-post.mp-p1 .mpp-rail,
  .mp-post.mp-p1 .mpp-ad,
  .mp-post.mp-p1 .mpp-table-hint {
    display: none;
  }
}/* End custom CSS */