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

  .befora-cta {
    padding: var(--s-5, 24px) var(--s-6, 32px);
    border-radius: var(--r-3, 6px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--s-5, 24px);
    row-gap: var(--s-3, 12px);
    align-items: center;
    position: relative;
    overflow: hidden;
    color: var(--bef-ink, #1B1814);
  }

  .befora-cta--contextual {
    background: var(--bef-honey-tint, #EFE2CE);
    border: 1px solid var(--bef-hairline-strong, #B6AE9B);
  }

  .befora-cta--brand {
    background: var(--bef-canvas, #15110D);
    border: 1px solid var(--bef-hairline-strong);
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--s-7, 48px) var(--s-6, 32px);

    .befora-cta-mark {
      justify-content: center;
    }

    .befora-cta-copy {
      align-items: center;
    }

    .befora-cta-body {
      max-width: 52ch;
      margin-inline: auto;
    }

    .befora-cta-actions {
      align-items: center;
    }
  }

  .befora-cta-mark {
    display: flex;
    align-items: center;
  }

  .befora-cta-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--r-3, 6px);
    background: var(--bef-honey);
    color: var(--bef-canvas-raised);
    font-family: var(--bef-display);
    font-style: italic;
    font-size: var(--fs-36);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .befora-cta-copy {
    display: flex;
    flex-direction: column;
    gap: var(--s-2, 8px);
  }

  .befora-cta-headline {
    margin: 0;
    font-family: var(--bef-display);
    font-size: var(--fs-22);
    line-height: 1.3;
    letter-spacing: -0.006em;
    color: var(--bef-ink, #1B1814);
  }

  .befora-cta-body {
    margin: 0;
    max-width: 60ch;
    font-family: var(--bef-body);
    font-size: var(--fs-16);
    line-height: 1.55;
    color: var(--bef-graphite, #494238);
  }

  .befora-cta--brand .befora-cta-headline {
    font-size: var(--fs-44);
    line-height: 1.05;
    letter-spacing: -0.014em;
    max-width: 20ch;
    margin-inline: auto;
  }

  .befora-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  @media (width <= 640px) {
    .befora-cta {
      grid-template-columns: 1fr;
      padding: var(--s-5, 24px);
    }

    .befora-cta-mark {
      justify-content: flex-start;
    }

    .befora-cta--brand .befora-cta-headline {
      font-size: var(--fs-34);
    }
  }

  .befora-cta-corner {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: var(--bef-mono);
    font-size: var(--fs-9);
    letter-spacing: 0.22em;
    color: var(--bef-honey-deep);
    text-transform: uppercase;
    opacity: 0.7;
  }

  .befora-cta-kicker {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.24em;
    color: var(--bef-honey-deep);
    text-transform: uppercase;
    margin: 0;
  }

  .befora-cta-accent {
    font-style: italic;
    color: var(--bef-honey-deep);
  }

  .befora-cta-secondary {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.16em;
    color: var(--bef-honey-deep);
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--dur-2) var(--ease-quiet);
  }

  .befora-cta-secondary:hover {
    color: var(--bef-ember);
  }

  .befora-cta-caption {
    font-family: var(--bef-mono);
    font-size: var(--fs-10);
    letter-spacing: 0.16em;
    color: var(--bef-stone);
    text-transform: uppercase;
    margin: 4px 0 0;
  }

  .befora-on-plate {
    .befora-cta-corner { color: var(--bef-honey); }
    .befora-cta-kicker { color: var(--bef-honey); }
    .befora-cta-accent { color: var(--bef-honey); }
    .befora-cta-secondary { color: var(--bef-honey); }
    .befora-cta-secondary:hover { color: var(--bef-ember); }
    .befora-cta-caption { color: var(--bef-stone); }

    .befora-cta-monogram {
      background: var(--bef-honey);
      color: var(--bef-canvas);
    }

    .befora-cta-button.bef-btn-primary {
      background: var(--bef-honey);
      color: var(--bef-canvas);
      border-color: var(--bef-honey);
    }

    .befora-cta-button.bef-btn-primary:hover {
      background: var(--bef-honey-deep);
      border-color: var(--bef-honey-deep);
    }
  }
}