[data-component-id="befora:related-card"] {
  list-style: none;
  display: flex;

  .befora-related-link {
    flex: 1;
    background: var(--bef-canvas-raised);
    border: 1px solid var(--bef-hairline, #D5D0C0);
    border-radius: var(--r-3, 6px);
    padding: var(--s-5, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--s-3, 12px);
    text-decoration: none;
    color: inherit;
    transition:
      border-color var(--dur-2, 200ms) var(--ease-quiet, ease),
      box-shadow var(--dur-2, 200ms) var(--ease-quiet, ease),
      transform var(--dur-2, 200ms) var(--ease-quiet, ease);
  }

  .befora-related-link:hover,
  .befora-related-link:focus {
    border-color: var(--bef-ink);
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
  }

  .befora-related-path {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bef-stone, #6F6557);
  }

  .befora-related-label {
    font-family: var(--bef-display);
    font-size: var(--fs-22);
    line-height: 1.15;
    color: var(--bef-ink, #1B1814);
  }

  .befora-related-summary {
    font-size: var(--fs-13);
    line-height: 1.5;
    color: var(--bef-graphite, #494238);
  }

  .befora-related-formula {
    font-family: var(--bef-mono);
    font-size: var(--fs-11);
    color: var(--bef-ember);
    background: var(--bef-ember-tint);
    border-radius: var(--r-1, 2px);
    padding: var(--s-2, 8px) var(--s-3, 12px);
    letter-spacing: 0.04em;
    align-self: flex-start;
  }

  .befora-related-cta {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bef-honey-deep);
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1, 4px);
  }
}