/* Homepage: the two order buttons (index-order-buttons.php) - try a month for free = the main one with its note under it,
   the paid order next to it. Sizes in px: the homepage changes the root font size per breakpoint (16px desktop .. 9-10px phones). */

.wb-order-ctas { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 12px 14px; margin-top: 35px; }
.wb-order-ctas .btn { text-transform: none; letter-spacing: normal; line-height: 1.2; }

/* the trial button + its note as one block */
.wb-order-cta-main { flex: 1 1 280px; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; }
.wb-order-cta-trial {
    padding: 16px 26px; border-radius: 999px;
    font-size: 21px; font-weight: 800; box-shadow: 0 6px 18px -8px rgba(40, 167, 69, .7);
}
.wb-order-cta-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; margin-top: 8px; font-size: 13px; color: #5c5547; }
.wb-order-cta-note span { white-space: nowrap; }
.wb-order-cta-note i { color: #28a745; font-size: 11px; margin-right: 2px; }

/* the paid order: smaller, vertically centred on the trial button */
.wb-order-cta-paid {
    flex: 0 1 auto; margin-top: 5px; padding: 13px 21px; border-radius: 999px;
    font-size: 16px; font-weight: 700; color: #1e7e34; background: #fff; border: 2px solid #28a745;
}
.wb-order-cta-paid:hover, .wb-order-cta-paid:focus { color: #fff; background: #28a745; }

@media (max-width: 575px) {
    .wb-order-ctas { margin-top: 24px; }
    .wb-order-cta-main, .wb-order-cta-paid { flex-basis: 100%; max-width: none; }
    .wb-order-cta-trial { font-size: 18px; padding: 14px 20px; }
    .wb-order-cta-paid { margin-top: 4px; }
}