.elementor-13471 .elementor-element.elementor-element-a586a1c{--display:flex;}/* Start custom CSS *//* ==========================================================================
   MAX PRODUCTIVE AI - SITE DESIGN TOKENS (one language for the whole site)
   The same values as the review style V7, the blog style P1 and the hub
   styles S1 and C1. render.py puts this block at the top of every site
   component's stylesheet, scoped to that component's wrapper (.mp-site.mp-ht1),
   so the header, the footer and every site page speak the same language
   and nothing leaks into the theme or into the other templates.
   Change a value here only together with the four other templates
   (rules/design-system.md, "Changing a token").
   ========================================================================== */

/* Headline face: the file the review, blog and hub styles already use. */
@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;
}

.mp-site.mp-ht1 {
  --paper: #ffffff;
  --mist: #f6f5fa;          /* tinted panels */
  --ground: #f1eff7;        /* bands behind cards: white cards read as objects on it */
  --ink: #15122b;           /* headings, names, figures: 18.2:1 on white */
  --ink-2: #2b2740;         /* running text: 14.3:1 on white */
  --ink-3: #534e6b;         /* labels and secondary text: 7.9:1 on white, 7.0:1 on the ground band */
  --line: #e8e6ef;
  --line-strong: #cfcadd;
  --violet: #5b21b6;        /* links and actions only: 9.0:1 */
  --violet-deep: #4c1d95;
  --violet-soft: #f1ecfb;
  --citrine: #ffc933;       /* rating stars only */
  --citrine-soft: #fff6d6;
  --pos: #0a7552;
  --pos-soft: #e6f4ee;
  --neg: #b23b0b;
  --on-ink: #ffffff;        /* text on an ink band */
  --on-ink-2: rgba(255, 255, 255, .82);
  --on-ink-3: rgba(255, 255, 255, .7);
  --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: 1280px;
  --pad-x: 40px;
  --header: 72px;           /* the theme header's height on desktop; 64px on phones (below) */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --t: .15s ease;
  --tap: 44px;              /* smallest tap target; never under 40px */
  --shadow-card: 0 1px 2px rgba(21, 18, 43, .05), 0 14px 30px -24px rgba(21, 18, 43, .28);
  --shadow-lift: 0 1px 2px rgba(21, 18, 43, .06), 0 28px 56px -30px rgba(21, 18, 43, .38);
  display: block;
  font-family: var(--sans);
  color: var(--ink-2);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (max-width: 767px) {
  .mp-site.mp-ht1 { --header: 64px; --pad-x: 20px; }
}
.mp-site.mp-ht1 *,
.mp-site.mp-ht1 *::before,
.mp-site.mp-ht1 *::after {
  box-sizing: border-box;
}
.mp-site.mp-ht1 a:focus-visible,
.mp-site.mp-ht1 button:focus-visible,
.mp-site.mp-ht1 summary:focus-visible,
.mp-site.mp-ht1 input:focus-visible,
.mp-site.mp-ht1 select:focus-visible,
.mp-site.mp-ht1 textarea:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .mp-site.mp-ht1 *,
  .mp-site.mp-ht1 *::before,
  .mp-site.mp-ht1 *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* ---- end of tokens: the component's own rules follow ---- */

/* ==========================================================================
   MAX PRODUCTIVE AI - HOW WE TEST (HT1)
   Page CSS for /how-we-test/: Elementor > Page Settings > Advanced > Custom CSS.
   Every rule sits under the page wrapper, so nothing reaches the theme or the
   other templates. Values come from the shared tokens above.
   ========================================================================== */

/* ---- base ---- */
.mp-site.mp-ht1 {
  background: var(--paper);
  font-size: 18px;
  line-height: 1.65;
}
.mp-site.mp-ht1 h1,
.mp-site.mp-ht1 h2,
.mp-site.mp-ht1 h3,
.mp-site.mp-ht1 p,
.mp-site.mp-ht1 ul,
.mp-site.mp-ht1 ol,
.mp-site.mp-ht1 dl,
.mp-site.mp-ht1 dd,
.mp-site.mp-ht1 figure,
.mp-site.mp-ht1 figcaption {
  margin: 0;
  padding: 0;
}
.mp-site.mp-ht1 ul,
.mp-site.mp-ht1 ol {
  list-style: none;
}
.mp-site.mp-ht1 img {
  display: block;
  max-width: 100%;
  height: auto;
}
.mp-site.mp-ht1 a {
  color: var(--violet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.mp-site.mp-ht1 a:hover {
  color: var(--violet-deep);
}
.mp-site.mp-ht1 .mpx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mp-site.mp-ht1 .mpx-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.mp-site.mp-ht1 .mpx-ico {
  flex: 0 0 auto;
}

/* ---- type ---- */
.mp-site.mp-ht1 .mpx-eyebrow {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--violet);
}
.mp-site.mp-ht1 .mpx-h1 {
  margin: 10px 0 18px;
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-dek {
  max-width: 62ch;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
}
.mp-site.mp-ht1 .mpx-meta {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-meta span + span::before {
  content: "\00b7";
  margin: 0 8px;
}
.mp-site.mp-ht1 .mpx-h2 {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.008em;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-lead {
  margin-bottom: 24px;
}
.mp-site.mp-ht1 .mpx-main p + p,
.mp-site.mp-ht1 .mpx-main p + .mpx-note,
.mp-site.mp-ht1 .mpx-main .mpx-note + p {
  margin-top: 14px;
}
.mp-site.mp-ht1 .mpx-sub {
  margin: 32px 0 8px;
}

/* ---- hero ---- */
.mp-site.mp-ht1 .mpx-hero {
  padding: 56px 0 48px;
}

/* ---- the short version ---- */
.mp-site.mp-ht1 .mpx-short {
  padding: 48px 0 56px;
  background: var(--ground);
}
.mp-site.mp-ht1 .mpx-short .mpx-h2 {
  margin-bottom: 6px;
}
.mp-site.mp-ht1 .mpx-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.mp-site.mp-ht1 .mpx-cards li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px 12px;
  align-items: center;
  align-content: start;
  padding: 22px 22px 24px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.mp-site.mp-ht1 .mpx-cards .mpx-ico--ok {
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 50%;
  background: var(--pos-soft);
  color: var(--pos);
}
.mp-site.mp-ht1 .mpx-cards p {
  grid-column: 2;
  font-size: 16px;
  line-height: 1.55;
}

/* ---- body: contents rail and reading column ---- */
.mp-site.mp-ht1 .mpx-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: 72px;
  padding-bottom: 80px;
}
.mp-site.mp-ht1 .mpx-rail {
  position: sticky;
  top: calc(var(--header) + 32px);
  align-self: start;
  padding-top: 56px;
}
.mp-site.mp-ht1 .mpx-rail__title {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-rail a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--line);
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
}
.mp-site.mp-ht1 .mpx-rail a:hover {
  border-left-color: var(--violet);
  color: var(--violet);
}
.mp-site.mp-ht1 .mpx-toc {
  display: none;
}
.mp-site.mp-ht1 .mpx-bands dd {
  margin: 0;
}
.mp-site.mp-ht1 .mpx-sec {
  padding-top: 56px;
  scroll-margin-top: calc(var(--header) + 8px);
}

/* ---- steps ---- */
.mp-site.mp-ht1 .mpx-steps {
  counter-reset: mpx-step;
}
.mp-site.mp-ht1 .mpx-steps li {
  position: relative;
  padding: 0 0 26px 56px;
  counter-increment: mpx-step;
}
.mp-site.mp-ht1 .mpx-steps li::before {
  content: counter(mpx-step);
  position: absolute;
  left: 0;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--violet-soft);
  color: var(--violet-deep);
  font-size: 16px;
  font-weight: 700;
}
.mp-site.mp-ht1 .mpx-steps li::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 40px;
  bottom: 6px;
  width: 2px;
  background: var(--line);
}
.mp-site.mp-ht1 .mpx-steps li:last-child {
  padding-bottom: 0;
}
.mp-site.mp-ht1 .mpx-steps li:last-child::after {
  display: none;
}
.mp-site.mp-ht1 .mpx-steps p {
  margin-top: 4px;
  font-size: 17px;
}

/* ---- the worked example: a review's rating and How we tested box ---- */
.mp-site.mp-ht1 figure.mpx-spec {
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.mp-site.mp-ht1 .mpx-spec__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mp-site.mp-ht1 .mpx-spec__top img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.mp-site.mp-ht1 .mpx-spec__name {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-spec__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 15px;
  line-height: 1.4;
}
.mp-site.mp-ht1 .mpx-score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 7px 11px 8px 10px;
  border-radius: var(--r-sm);
  background: var(--violet-deep);
  color: var(--on-ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.mp-site.mp-ht1 .mpx-score .mpx-ico--star {
  align-self: center;
  margin-right: 2px;
  color: var(--citrine);
}
.mp-site.mp-ht1 .mpx-score__of {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--on-ink-3);
}
.mp-site.mp-ht1 .mpx-spec__label {
  font-weight: 600;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-spec__basis {
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-spec__by {
  margin: 12px 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-spec__box {
  padding: 16px 18px 6px;
  border-radius: var(--r-md);
  background: var(--mist);
}
.mp-site.mp-ht1 .mpx-spec__boxt {
  margin-bottom: 8px;
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-spec__vendor {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-ev {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  border-top: 1px solid var(--line-strong);
}
.mp-site.mp-ht1 .mpx-ev div {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-strong);
}
.mp-site.mp-ht1 .mpx-ev dt {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-ev dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-spec__cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-parts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;
  margin-top: 28px;
}
.mp-site.mp-ht1 .mpx-parts dt {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-parts dd {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.55;
}

/* ---- rating scale ---- */
.mp-site.mp-ht1 .mpx-bands {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.mp-site.mp-ht1 .mpx-bands div {
  display: grid;
  grid-template-columns: 132px 112px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mp-site.mp-ht1 .mpx-bands__range {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mp-site.mp-ht1 .mpx-bands__label {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-bands__text {
  font-size: 16.5px;
  line-height: 1.5;
}
.mp-site.mp-ht1 .mpx-never {
  margin-top: 36px;
  padding: 24px;
  border-radius: var(--r-lg);
  background: var(--mist);
}
.mp-site.mp-ht1 .mpx-never p {
  margin-top: 4px;
  font-size: 16.5px;
}
.mp-site.mp-ht1 .mpx-never ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 14px;
}
.mp-site.mp-ht1 .mpx-never li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-never .mpx-ico--no {
  margin-top: 3px;
  color: var(--neg);
}

/* ---- money, notes, call to action, log ---- */
.mp-site.mp-ht1 .mpx-defs {
  border-top: 1px solid var(--line);
}
.mp-site.mp-ht1 .mpx-defs div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.mp-site.mp-ht1 .mpx-defs dt {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-defs dd {
  font-size: 17px;
}
.mp-site.mp-ht1 .mpx-note {
  padding: 18px 20px;
  border-left: 3px solid var(--violet);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--mist);
}
.mp-site.mp-ht1 .mpx-note strong {
  color: var(--ink);
}
.mp-site.mp-ht1 .mpx-cta {
  margin-top: 22px;
}
.mp-site.mp-ht1 .mpx-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 20px;
  border: 1.5px solid var(--violet);
  border-radius: var(--r-sm);
  color: var(--violet);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--t), color var(--t);
}
.mp-site.mp-ht1 .mpx-btn:hover {
  background: var(--violet-soft);
  color: var(--violet-deep);
}
.mp-site.mp-ht1 .mpx-log {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-3);
}
.mp-site.mp-ht1 .mpx-log .mpx-h3 {
  margin-bottom: 8px;
  font-size: 17px;
}
.mp-site.mp-ht1 .mpx-log dt {
  display: inline;
  font-weight: 600;
  color: var(--ink-2);
}
.mp-site.mp-ht1 .mpx-log dd {
  display: inline;
  margin-left: 8px;
}

/* ---- tablets: contents panel instead of the rail ---- */
@media (max-width: 1023px) {
  .mp-site.mp-ht1 .mpx-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .mp-site.mp-ht1 .mpx-rail {
    display: none;
  }
  .mp-site.mp-ht1 .mpx-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mp-site.mp-ht1 .mpx-toc {
    display: block;
    max-width: 480px;
    margin-top: 28px;
  }
  .mp-site.mp-ht1 .mpx-toc details {
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
  }
  .mp-site.mp-ht1 .mpx-toc summary {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    justify-content: space-between;
    list-style: none;
  }
  .mp-site.mp-ht1 .mpx-toc summary::-webkit-details-marker {
    display: none;
  }
  .mp-site.mp-ht1 .mpx-toc summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: -4px 2px 0 12px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg);
  }
  .mp-site.mp-ht1 .mpx-toc details[open] summary::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }
  .mp-site.mp-ht1 .mpx-toc ol {
    padding: 0 16px 6px;
  }
  .mp-site.mp-ht1 .mpx-toc a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    border-top: 1px solid var(--line);
    font-size: 16px;
    color: var(--ink-2);
    text-decoration: none;
  }
}

/* ---- phones ---- */
@media (max-width: 767px) {
  .mp-site.mp-ht1 {
    font-size: 17px;
  }
  .mp-site.mp-ht1 .mpx-hero {
    padding: 36px 0 32px;
  }
  .mp-site.mp-ht1 .mpx-h1 {
    font-size: 34px;
  }
  .mp-site.mp-ht1 .mpx-dek {
    font-size: 18px;
  }
  .mp-site.mp-ht1 .mpx-h2 {
    font-size: 26px;
  }
  .mp-site.mp-ht1 .mpx-h3 {
    font-size: 18px;
  }
  .mp-site.mp-ht1 .mpx-short {
    padding: 36px 0 40px;
  }
  .mp-site.mp-ht1 .mpx-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .mp-site.mp-ht1 .mpx-cards li {
    padding: 16px 16px 18px;
  }
  .mp-site.mp-ht1 .mpx-sec {
    padding-top: 44px;
  }
  .mp-site.mp-ht1 .mpx-body {
    padding-bottom: 56px;
  }
  .mp-site.mp-ht1 .mpx-steps li {
    padding-left: 50px;
  }
  .mp-site.mp-ht1 .mpx-steps p {
    font-size: 16.5px;
  }
  .mp-site.mp-ht1 figure.mpx-spec {
    padding: 18px;
  }
  .mp-site.mp-ht1 .mpx-spec__box {
    padding: 14px 14px 4px;
  }
  .mp-site.mp-ht1 .mpx-ev {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-site.mp-ht1 .mpx-ev div {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
  }
  .mp-site.mp-ht1 .mpx-parts {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .mp-site.mp-ht1 .mpx-bands div {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 2px 14px;
    align-items: start;
  }
  .mp-site.mp-ht1 .mpx-bands__range {
    grid-row: span 2;
    font-size: 17px;
  }
  .mp-site.mp-ht1 .mpx-bands__text {
    grid-column: 2;
    font-size: 16px;
  }
  .mp-site.mp-ht1 .mpx-never {
    padding: 20px 18px;
  }
  .mp-site.mp-ht1 .mpx-never ul {
    grid-template-columns: minmax(0, 1fr);
  }
  .mp-site.mp-ht1 .mpx-defs div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .mp-site.mp-ht1 .mpx-defs dd {
    font-size: 16.5px;
  }
}/* End custom CSS */