@import url('/components/primary-button/primary-button.css');

plan-cta { display: block; }
plan-cta[hidden] { display: none; }

.plan-cta {
  align-items: center;
  background: #f8b63f;
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
  margin-top: 28px;
  padding: 26px 30px;
  width: 100%;
}

.plan-cta__icon {
  align-items: center;
  background: rgba(255, 255, 255, .55);
  border-radius: 50%;
  color: #072a5e;
  display: flex;
  flex: none;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.plan-cta__icon svg {
  fill: none;
  height: 26px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 26px;
}

.plan-cta__copy { flex: 1; }
.plan-cta h2 {
  color: #072a5e;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
}
.plan-cta p { color: #6a4e1c; font-size: 14px; margin: 0; }
.plan-cta__action { text-align: center; }
.plan-cta__button {
  font: 700 14px var(--font-body);
}
.plan-cta__action small { color: #6a4e1c; display: block; font-size: 12px; margin-top: 8px; }

@media (max-width: 860px) {
  .plan-cta { align-items: flex-start; flex-direction: column; }
  .plan-cta__action { text-align: left; width: 100%; }
  .plan-cta__button { width: 100%; }
}