.trial-extension-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--op-space-2x-large);

  .trial-extension-page__container {
    display: flex;
    flex-direction: column;
    gap: var(--op-space-2x-large);
    max-width: calc(var(--op-size-unit) * 140);
    width: 100%;
  }

  .trial-extension-page__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--op-space-small);
  }

  .trial-extension-page__eyebrow {
    font-size: var(--op-font-small);
    font-weight: var(--op-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--op-color-primary-base);
  }

  .trial-extension-page__title {
    font-size: var(--op-font-3x-large);
    font-weight: var(--op-font-weight-normal);
    line-height: var(--op-line-height-denser);
    color: var(--op-color-neutral-on-plus-max);
  }

  .trial-extension-page__subtitle {
    font-size: var(--op-font-medium);
    color: var(--op-color-neutral-on-plus-five);
    max-width: calc(var(--op-size-unit) * 180);
    margin-inline: auto;
    line-height: var(--op-line-height-loose);
  }

  .trial-extension-card {
    --_card-border-color: var(--op-color-neutral-plus-three);

    display: flex;
    flex-direction: column;
    gap: var(--op-space-medium);
    padding: var(--op-space-2x-large);
    border-radius: var(--op-radius-large);
    border: 1px solid var(--_card-border-color);
    background-color: var(--op-color-neutral-plus-max);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      border-color: var(--op-color-primary-plus-two);
      box-shadow: 0 0 0 3px var(--op-color-primary-plus-four);
    }

    &.trial-extension-card--featured {
      --_card-border-color: var(--op-color-primary-base);

      background: linear-gradient(
        135deg,
        var(--op-color-primary-plus-five) 0%,
        var(--op-color-neutral-plus-max) 60%
      );

      &:hover {
        box-shadow: 0 0 0 3px var(--op-color-primary-plus-three);
      }
    }
  }

  .trial-extension-card__icon {
    font-size: calc(var(--op-font-scale-unit) * 2.8);
    color: var(--op-color-primary-base);
    line-height: 1;
  }

  .trial-extension-card__title {
    font-size: var(--op-font-large);
    font-weight: var(--op-font-weight-semibold);
    color: var(--op-color-neutral-on-plus-max);
  }

  .trial-extension-card__description {
    font-size: var(--op-font-small);
    color: var(--op-color-neutral-on-plus-five);
    line-height: var(--op-line-height-loose);
    flex: 1;
  }

  .trial-extension-page__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--op-space-medium);
    flex-wrap: wrap;
  }
}