/* Shared service-card surface.
 * Gives every card the same filled, framed and illuminated presence as the
 * homepage Services cards without removing card-specific artwork. */
:root {
  --card-surface: #181511;
  --card-surface-hover: #211d18;
  --card-line: rgba(109, 143, 161, 0.48);
  --card-line-active: rgba(124, 177, 201, 0.72);
  --card-glow-rest:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 46px rgba(4, 12, 18, 0.32),
    0 0 24px rgba(91, 151, 178, 0.22),
    0 0 0 1px rgba(109, 143, 161, 0.18);
  --card-glow-active:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 56px rgba(4, 12, 18, 0.4),
    0 0 38px rgba(91, 151, 178, 0.38),
    0 0 0 2px rgba(109, 143, 161, 0.3);
}

html.light[data-theme="light"] {
  --card-surface: rgba(255, 255, 255, 0.96);
  --card-surface-hover: #ffffff;
  --card-line: rgba(190, 105, 55, 0.34);
  --card-line-active: rgba(207, 116, 61, 0.82);
  --card-glow-rest:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 10px 26px rgba(190, 105, 55, 0.055),
    0 0 14px rgba(207, 116, 61, 0.075);
  --card-glow-active:
    inset 0 1px 0 #ffffff,
    0 14px 32px rgba(190, 105, 55, 0.1),
    0 0 18px rgba(224, 126, 65, 0.16);
}

html body:not(#all-cards-square-a):not(#all-cards-square-b):not(#all-cards-square-c):not(#all-cards-square-d) main#top#top#top#top#top :is(
  .service-package-card,
  .area-card,
  .service-directory-card,
  .service-choice-card,
  .service-info-card,
  .case-card,
  .list-card,
  .article-card,
  .article-card-home,
  .article-directory-card,
  .article-summary-card,
  .insights-card,
  .reason-outcome,
  .reason-item,
  .pricing-decision-card,
  .pricing-format-card,
  .pricing-service-item,
  .pricing-option-row-card,
  .subscription-plan,
  .subscription-benefit,
  .doubt-item,
  .workflow-step-copy,
  .contacts-panel,
  .contacts-row,
  .cta-contact-item,
  .faq-list > details,
  .subscription-faq-list > details,
  .price-list > div,
  .client-logo-row > div,
  .trust-note
) {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--card-line) !important;
  border-radius: 0 !important;
  background-color: var(--card-surface) !important;
  box-shadow: var(--card-glow-rest) !important;
  transition:
    border-color 280ms ease,
    box-shadow 320ms ease,
    filter 280ms ease,
    transform 360ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body:not(#all-cards-square-a):not(#all-cards-square-b):not(#all-cards-square-c):not(#all-cards-square-d) main#top#top#top#top#top :is(
    .service-package-card,
    .area-card,
    .service-directory-card,
    .service-choice-card,
    .service-info-card,
    .case-card,
    .list-card,
    .article-card,
    .article-card-home,
    .article-directory-card,
    .article-summary-card,
    .insights-card,
    .reason-outcome,
    .reason-item,
    .pricing-decision-card,
    .pricing-format-card,
    .pricing-service-item,
    .pricing-option-row-card,
    .subscription-plan,
    .subscription-benefit,
    .doubt-item,
    .workflow-step-copy,
    .contacts-panel,
    .contacts-row,
    .cta-contact-item,
    .faq-list > details,
    .subscription-faq-list > details,
    .price-list > div,
    .client-logo-row > div,
    .trust-note
  ):is(:hover, :focus-visible, :focus-within) {
    border-color: var(--card-line-active) !important;
    background-color: var(--card-surface-hover) !important;
    box-shadow: var(--card-glow-active) !important;
    /* Keep every edge inside its grid cell. Lifting the card used to clip the
       top border and expose a dark shadow between adjacent cards. */
    transform: none !important;
  }
}

/* Workflow cards: keep the number and title as one compact heading, and keep
 * the card fill stable instead of changing its tone on hover or focus. */
html body.home-page main#top#top#top#top#top #workflow .workflow-step-heading {
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 10px !important;
}

html body.home-page main#top#top#top#top#top #workflow .workflow-step-title {
  padding-left: 0 !important;
}

html body.home-page main#top#top#top#top#top #workflow .workflow-step {
  align-items: stretch !important;
}

html body.home-page main#top#top#top#top#top #workflow .workflow-step-copy,
html body.home-page main#top#top#top#top#top #workflow .workflow-step-copy:is(:hover, :focus-visible, :focus-within) {
  height: 100% !important;
  flex: 1 1 auto !important;
  background: var(--card-surface) !important;
  background-image: none !important;
  transform: none !important;
}

/* The outcome strip was previously one transparent rail. Separate it into
 * genuine cards so it follows the same visual system as Services. */
html body.home-page main#top#top#top#top#top #why-pro-lex .reason-outcomes {
  gap: clamp(14px, 1.6vw, 22px) !important;
  border: 0 !important;
}

html body.home-page main#top#top#top#top#top #why-pro-lex .reason-outcome + .reason-outcome,
html body.home-page main#top#top#top#top#top #why-pro-lex .reason-outcome:nth-child(n + 3) {
  border: 1px solid var(--card-line) !important;
}

html body.home-page main#top#top#top#top#top #why-pro-lex .reason-editorial-list {
  gap: clamp(14px, 1.6vw, 22px) !important;
  border: 0 !important;
}

html body.home-page main#top#top#top#top#top #why-pro-lex .reason-editorial-list .reason-item {
  margin-top: 0 !important;
  padding: clamp(20px, 2.2vw, 28px) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body:not(#all-cards-square-a):not(#all-cards-square-b):not(#all-cards-square-c):not(#all-cards-square-d) main#top#top#top#top#top :is(
    .service-package-card,
    .area-card,
    .service-directory-card,
    .service-choice-card,
    .service-info-card,
    .case-card,
    .list-card,
    .article-card,
    .article-card-home,
    .article-directory-card,
    .article-summary-card,
    .insights-card,
    .reason-outcome,
    .reason-item,
    .pricing-decision-card,
    .pricing-format-card,
    .pricing-service-item,
    .pricing-option-row-card,
    .subscription-plan,
    .subscription-benefit,
    .doubt-item,
    .workflow-step-copy,
    .contacts-panel,
    .contacts-row,
    .cta-contact-item,
    .faq-list > details,
    .subscription-faq-list > details,
    .price-list > div,
    .client-logo-row > div,
    .trust-note
  ) {
    transition: none !important;
  }

  html body:not(#all-cards-square-a):not(#all-cards-square-b):not(#all-cards-square-c):not(#all-cards-square-d) main#top#top#top#top#top :is(
    .service-package-card,
    .area-card,
    .service-directory-card,
    .service-choice-card,
    .service-info-card,
    .case-card,
    .list-card,
    .article-card,
    .article-card-home,
    .article-directory-card,
    .article-summary-card,
    .insights-card,
    .reason-outcome,
    .reason-item,
    .pricing-decision-card,
    .pricing-format-card,
    .pricing-service-item,
    .pricing-option-row-card,
    .subscription-plan,
    .subscription-benefit,
    .doubt-item,
    .workflow-step-copy,
    .contacts-panel,
    .contacts-row,
    .cta-contact-item,
    .faq-list > details,
    .subscription-faq-list > details,
    .price-list > div,
    .client-logo-row > div,
    .trust-note
  ):is(:hover, :focus-visible, :focus-within) {
    transform: none !important;
  }
}