/* =============================================================================
   lp-difference.css — /lp/knows-the-difference/ (practitioner ad set).
   Loaded after lp.css. Hero continues the LinkedIn creative: display mono
   type with the look-alike image pair inline (display--illustrated pattern).
   ============================================================================= */

/* --- Hero --- */

.lp-diff-hero {
  padding-block: var(--d-16) 0;
  padding-inline: var(--d-4);
}

@media (min-width: 40rem) {
  .lp-diff-hero {
    padding-block-start: 7.5rem;
    padding-inline: var(--d-10);
  }
}

.lp-diff-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--d-8);
}

.lp-diff-hero__title {
  margin: 0;
  --display-art-height: 1.4lh;
}

@media (min-width: 40rem) {
  .lp-diff-hero__title {
    --display-art-height: 1.75lh;
  }
}

.lp-diff-hero__pair {
  flex-wrap: wrap;
  row-gap: var(--d-2);
  margin-block: var(--d-2);
}

.lp-diff-hero__group {
  display: inline-flex;
  align-items: center;
}

.lp-diff-hero__art {
  margin-inline: 0.3em 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  object-fit: cover;
}

/* Crocs leads; the Apple creative links with ?pair=apple (set on <html> in <head>) */
.lp-diff-hero__pair--apple,
:root[data-lp-pair="apple"] .lp-diff-hero__pair--crocs {
  display: none;
}

:root[data-lp-pair="apple"] .lp-diff-hero__pair--apple {
  display: flex;
}

.lp-diff-hero__stop {
  margin-inline-start: -0.15em;
}

.lp-diff-hero__kicker {
  color: var(--text-muted);
}

.lp-diff-hero__payoff {
  max-width: 40rem;
  margin: 0;
}

@media (max-width: 39.99rem) {
  .lp-diff-hero__payoff {
    font-family: var(--font-h3-mono-family);
    font-size: var(--font-h3-mono-size);
    font-weight: var(--font-h3-mono-weight);
    line-height: var(--font-h3-mono-line);
    letter-spacing: var(--font-h3-mono-tracking);
  }
}

.lp-diff-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-3) var(--d-4);
}

.lp-diff-hero__actions [hidden],
.lp-diff-forward__actions [hidden] {
  display: none;
}

.lp-diff-hero__note {
  margin: 0;
}

.lp-diff-hero__inner > .dotted-divider {
  align-self: stretch;
  margin-block-start: var(--d-8);
}

/* --- Proof — two Not a Match examples from the demo workspace --- */

.lp-diff-proof {
  padding: var(--d-16) var(--d-4) 0;
  background: var(--surface);
}

.lp-diff-proof .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
}

.lp-diff-proof__grid {
  display: grid;
  gap: var(--d-10);
}

.lp-diff-proof__caption {
  margin: 0;
}

@media (min-width: 40rem) {
  .lp-diff-proof {
    padding-inline: var(--d-10);
  }
}

@media (min-width: 56.25rem) {
  .lp-diff-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--d-16);
  }
}

/* --- How — 2×2 of what Delve checks --- */

.lp-diff-how {
  padding: calc(var(--d-20) + var(--d-10)) var(--d-4) var(--d-10);
  background: var(--surface);
}

.lp-diff-how .container {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
}

.lp-diff-how__grid {
  display: grid;
  gap: var(--d-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-diff-how__item {
  display: flex;
  flex-direction: column;
  gap: var(--d-3);
  min-width: 0;
}

.lp-diff-how__label,
.lp-diff-how__text {
  margin: 0;
}

.lp-diff-how__cta {
  align-self: flex-start;
}

.lp-diff-how__item .dotted-divider {
  margin-block-end: var(--d-3);
}

@media (min-width: 40rem) {
  .lp-diff-how {
    padding-inline: var(--d-10);
  }

  .lp-diff-how__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--d-12) var(--d-16);
  }
}

/* --- FAQ — shared site-faq accordion; inner layout in faq.css (.lp-faq__*) --- */

.lp-diff-faq {
  padding: var(--d-20) var(--d-4);
  background: var(--surface);
}

@media (min-width: 40rem) {
  .lp-diff-faq {
    padding-inline: var(--d-10);
  }
}

/* --- Forward — a short version for the Head of Comms --- */

.lp-diff-forward {
  padding: var(--d-20) var(--d-4);
  background: var(--surface);
}

.lp-diff-forward__card {
  display: flex;
  flex-direction: column;
  gap: var(--d-10);
  padding: var(--d-8);
  background: var(--color-grey-300);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.lp-diff-forward__lead {
  display: flex;
  flex-direction: column;
  gap: var(--d-4);
  min-width: 0;
}

.lp-diff-forward__title,
.lp-diff-forward__intro {
  margin: 0;
}

.lp-diff-forward__body {
  display: flex;
  flex-direction: column;
  gap: var(--d-6);
  min-width: 0;
}

.lp-diff-forward__list {
  display: flex;
  flex-direction: column;
  gap: var(--d-3);
  margin: 0;
  padding-inline-start: 1.125rem;
  list-style: disc;
}

.lp-diff-forward__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--d-3) var(--d-4);
}

@media (min-width: 40rem) {
  .lp-diff-forward {
    padding-inline: var(--d-10);
  }
}

@media (min-width: 56.25rem) {
  .lp-diff-forward__card {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--d-16);
    padding: var(--d-12);
  }

  .lp-diff-forward__lead,
  .lp-diff-forward__body {
    flex: 1 1 0;
  }
}

/* --- Form steps --- */

.lp-diff-form__steps {
  display: flex;
  flex-direction: column;
  gap: var(--d-2);
  margin: 0;
  padding-inline-start: 1.25rem;
  list-style: decimal;
}