[data-component-id="befora:marketing-use-cases-item"] {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2, 8px);
  padding: var(--s-5, 24px) var(--s-4, 16px);
  background: var(--bef-canvas-raised, #FAF8F2);
  border: 1px solid var(--bef-hairline, #D5D0C0);
  border-radius: var(--r-3, 6px);
  box-shadow: var(--sh-1);
  counter-increment: usecase;

  &::before {
    content: counter(usecase, decimal-leading-zero);
    display: block;
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.18em;
    color: var(--bef-stone);
    margin-bottom: 8px;
  }

  .befora-use-case-title {
    margin: 0;
    font-family: var(--bef-display);
    font-size: var(--fs-17);
    line-height: 1.2;
    letter-spacing: -0.002em;
    color: var(--bef-ink, #1B1814);
  }

  .befora-use-case-body {
    margin: 0;
    font-family: var(--bef-body);
    font-size: var(--fs-13);
    line-height: 1.55;
    color: var(--bef-graphite, #494238);
  }

  /* Whole-card link variant: hover lift + ember accent on the cta */
  .befora-use-case-link {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-2) var(--ease-quiet),
                box-shadow var(--dur-2) var(--ease-quiet);
  }

  &:has(.befora-use-case-link:hover) {
    transform: translateY(-2px);
    box-shadow: var(--sh-2);
  }

  .befora-use-case-link:focus-visible {
    outline: 2px solid var(--bef-ember);
    outline-offset: 2px;
    border-radius: var(--r-2, 4px);
  }

  .befora-use-case-cta {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.16em;
    color: var(--bef-ember);
    text-transform: uppercase;
  }
}