/* Editorial list for “Why Pro Lex Strategy”. Loaded last so legacy card rules
   cannot turn these rows back into a card grid. */
#why-pro-lex .reasons-panel .reason-editorial-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin-top: clamp(26px, 3.4vw, 48px) !important;
  border-top: 1px solid rgba(var(--text-rgb), 0.24) !important;
}

/* Keep the outcome tiles and the detailed reasons compact and easy to scan. */
#why-pro-lex .reason-outcome {
  gap: 10px !important;
  padding: clamp(12px, 1.35vw, 17px) !important;
}

#why-pro-lex .reason-outcome h3 {
  margin-bottom: 3px !important;
}

#why-pro-lex .reason-outcome p {
  line-height: 1.4 !important;
}

/* Sharpen secondary copy so it stays readable on both theme surfaces. */
#why-pro-lex .reasons-intro,
#why-pro-lex .reason-outcome p,
#why-pro-lex .reason-editorial-list .reason-item p {
  color: rgba(var(--text-muted-rgb), 0.96) !important;
}

html.light[data-theme="light"] body #why-pro-lex .reasons-intro,
html.light[data-theme="light"] body #why-pro-lex .reason-outcome p,
html.light[data-theme="light"] body #why-pro-lex .reason-editorial-list .reason-item p {
  color: #52616a !important;
}

html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item,
html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:hover,
html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:focus-within {
  position: relative !important;
  display: grid !important;
  grid-template-columns: clamp(42px, 5vw, 72px) minmax(250px, 0.92fr) minmax(280px, 1.08fr) !important;
  align-items: start !important;
  column-gap: clamp(18px, 3vw, 54px) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(16px, 2vw, 28px) 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(var(--text-rgb), 0.24) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: none !important;
}

html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item::before,
html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item::after,
html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-list-copy::before {
  display: none !important;
  content: none !important;
}

#why-pro-lex .reason-list-number {
  display: block !important;
  padding-top: 0.35rem;
  color: var(--primary) !important;
  font-family: Manrope, sans-serif;
  font-size: clamp(0.76rem, 0.85vw, 0.9rem);
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1;
}

#why-pro-lex .reason-list-copy {
  display: contents !important;
}

#why-pro-lex .reason-editorial-list .reason-item h3 {
  grid-column: 2 !important;
  max-width: 13ch;
  margin: 0 !important;
  color: var(--text) !important;
  font-family: "Noto Serif", Georgia, serif !important;
  font-size: clamp(1.3rem, 2vw, 2.05rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 0.98 !important;
  text-wrap: balance;
}

#why-pro-lex .reason-editorial-list .reason-item p {
  grid-column: 3 !important;
  max-width: 58ch;
  margin: 0 !important;
  padding-top: 0.18rem;
  color: var(--text-muted) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.45rem;
  font-family: "Noto Serif", Georgia, serif !important;
  font-size: clamp(0.96rem, 1.15vw, 1.08rem) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

#why-pro-lex .reason-list-dash {
  color: var(--primary);
  font-style: normal;
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item {
    transition: padding-inline 220ms ease, background-color 220ms ease !important;
  }

  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:hover,
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:focus-within {
    padding-inline: clamp(12px, 1.5vw, 24px) !important;
    background-color: rgba(var(--text-rgb), 0.035) !important;
  }
}

@media (max-width: 820px) {
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item,
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:hover,
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:focus-within {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    row-gap: 8px !important;
  }

  #why-pro-lex .reason-editorial-list .reason-item h3,
  #why-pro-lex .reason-editorial-list .reason-item p {
    grid-column: 2 !important;
  }

  #why-pro-lex .reason-editorial-list .reason-item h3 {
    max-width: none;
  }
}

@media (max-width: 520px) {
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item,
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:hover,
  html.light[data-theme="light"] body #why-pro-lex .reasons-panel .reason-editorial-list .reason-item:focus-within {
    grid-template-columns: 1fr !important;
  }

  #why-pro-lex .reason-editorial-list .reason-item h3,
  #why-pro-lex .reason-editorial-list .reason-item p {
    grid-column: 1 !important;
  }
}