@layer components {
  .dig-cta-strip {
    background: var(--dig-color-primary);
    color: var(--dig-color-white);
  }

  .dig-cta-strip__inner {
    display: grid;
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(18rem, 0.5fr);
    align-items: end;
    gap: clamp(2.5rem, 6vw, 6rem);

    padding-block: clamp(4rem, 7vw, 6rem);
  }

  .dig-cta-strip__copy {
    max-width: 62rem;
  }

  .dig-cta-strip__eyebrow {
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);

    color: color-mix(in srgb, var(--dig-color-white) 65%, transparent);

    font-family: var(--dig-font-mono);
    font-size: var(--dig-font-size-xs);
    font-weight: var(--dig-font-weight-semibold);
    letter-spacing: var(--dig-letter-spacing-mono);
    text-transform: uppercase;
  }

  .dig-cta-strip__title {
    max-width: 54rem;
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);

    color: var(--dig-color-white);

    font-size: clamp(2rem, 3.6vw, 3.75rem);
    font-weight: var(--dig-font-weight-bold);
    line-height: var(--dig-line-height-tight);
    letter-spacing: var(--dig-letter-spacing-tight);
    text-wrap: balance;
  }

  .dig-cta-strip__subtitle {
    max-width: 48rem;
    margin: 0;

    color: color-mix(in srgb, var(--dig-color-white) 72%, transparent);

    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
    line-height: var(--dig-line-height-body);
  }

  .dig-cta-strip__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dig-spacing-sm);
  }

  .dig-cta-strip__actions .dig-btn {
    min-width: 11rem;
  }

  

  

  @media (max-width: 48rem) {
    .dig-cta-strip__inner {
      grid-template-columns: 1fr;
      align-items: start;
      gap: clamp(2rem, 8vw, 3rem);

      padding-block: clamp(3.5rem, 12vw, 5rem);
    }

    .dig-cta-strip__actions {
      width: 100%;
    }

    .dig-cta-strip__actions .dig-btn {
      width: 100%;
    }
  }
}

/* Contextual primary action: its surface must contrast with the primary strip.
   Keep this bridge unlayered so the Websites foreground stabilization cannot
   override the component's on-primary surface / primary text pairing. */
.dig-cta-strip .dig-cta-strip__actions :is(.dig-btn--primary, .dig-btn-primary) {
  --btn-bg: var(--dig-color-on-primary, var(--dig-color-text-light));
  --btn-border: var(--dig-color-on-primary, var(--dig-color-text-light));
  --btn-fg: var(--dig-color-primary);
  --btn-bg-hover: color-mix(in srgb, var(--dig-color-on-primary, var(--dig-color-text-light)) 92%, var(--dig-color-primary));
  --btn-border-hover: var(--btn-bg-hover);
}

.dig-cta-strip .dig-cta-strip__actions :is(.dig-btn--primary, .dig-btn-primary):focus-visible {
  outline: 2px solid var(--dig-color-on-primary, var(--dig-color-text-light));
  outline-offset: 3px;
}