[data-component-id="befora:marketing-quickref-table"] {
  margin: var(--s-7, 48px) 0;

  .befora-quickref-heading {
    margin: 0 0 var(--s-5, 24px);
    font-family: var(--bef-display);
    font-size: var(--fs-34);
    line-height: 1.15;
    letter-spacing: -0.012em;
    color: var(--bef-ink, #1B1814);
  }

  /* The table is wrapped as a data card: raised paper, hairline border,
     clipped corners. border-collapse:separate is required for radius
     clipping to take, and the wrapper handles horizontal overflow on
     narrow viewports. */
  .befora-quickref-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bef-canvas-raised, #FAF8F2);
    border: 1px solid var(--bef-hairline, #D5D0C0);
    border-radius: var(--r-3, 6px);
    overflow: hidden;
    box-shadow: var(--sh-1);
    font-family: var(--bef-mono);
  }

  .befora-quickref-caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--s-3, 12px);
    font-family: var(--bef-body);
    font-size: var(--fs-14);
    color: var(--bef-stone, #6F6557);
  }

  .befora-quickref-table thead {
    background: var(--bef-canvas-sunk, #E9E5DA);
  }

  .befora-quickref-table th {
    padding: var(--s-3, 12px) var(--s-5, 24px);
    text-align: left;
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bef-stone, #6F6557);
    border-bottom: 1px solid var(--bef-hairline, #D5D0C0);
  }

  .befora-quickref-table td {
    padding: var(--s-3, 12px) var(--s-5, 24px);
    text-align: left;
    font-family: var(--bef-mono);
    font-size: var(--fs-14);
    color: var(--bef-ink, #1B1814);
    border-top: 1px solid var(--bef-hairline, #D5D0C0);
  }

  /* First column reads as the "key" — keep ink-strong; remaining columns
     soften to graphite so the eye scans down the lookup key first. */
  .befora-quickref-table td:not(:first-child) {
    color: var(--bef-graphite, #494238);
  }

  /* First body row has no top border because thead's bottom border handles
     the separator. */
  .befora-quickref-table tbody tr:first-child td {
    border-top: none;
  }

  /* Zebra striping — every even row sits on canvas-sunk for scanability. */
  .befora-quickref-table tbody tr:nth-child(even) td {
    background: var(--bef-canvas-sunk, #E9E5DA);
  }

  /* Mobile — let the card overflow horizontally inside a scrolling wrapper.
     Section already establishes a containing block, so we add scroll on the
     table itself via a wrapper effect. */
  @media (width <= 640px) {
    .befora-quickref-table {
      display: block;
      overflow-x: auto;
    }
  }
}