/* ==========================================================================
   SETLAB - PLANS PAGE
   Plan cards, plus the site look for two pieces printed by WPCode snippets:
   the price ([setlab_price]) and the trial block ([setlab_trial]).
   Shared pieces (cards, badges, FAQ, buttons) are in blocks.css.
   ========================================================================== */

/* ---------- Plan cards ---------- */

.sl-page .sl-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding-top: 14px; /* room for the badges that sit on the top edge */
}

.sl-page .sl-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 34px 22px 24px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .015));
    text-align: center;
    transition: border-color var(--sl-transition), transform var(--sl-transition);
}

.sl-page .sl-plan:hover {
    border-color: var(--sl-accent-border);
    transform: translateY(-3px);
}

.sl-page .sl-plan h3 {
    font-size: 18px;
}

.sl-page .sl-plan-featured {
    border-color: var(--sl-accent-border);
    background: linear-gradient(180deg, var(--sl-accent-soft), rgba(255, 255, 255, .015));
    box-shadow: 0 24px 60px rgba(38, 208, 206, .1);
}

/* badge sits on the top edge of the card */
.sl-page .sl-plan p.sl-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    background: var(--sl-bg);
    transform: translateX(-50%);
    white-space: nowrap;
}

.sl-page .sl-plan .wp-block-buttons {
    width: 100%;
    margin-top: auto;
}

.sl-page .sl-plan .wp-block-button {
    width: 100%;
}

.sl-page .sl-plan .wp-block-button__link {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* ---------- Price (the snippet prints inline styles, so we override them) ---------- */

.sl-page .sl-plan-price > div {
    margin: 0 !important;
    font-family: inherit !important;
}

.sl-page .sl-plan-price > div > span:first-child {
    color: var(--sl-text) !important;
    font-size: clamp(30px, 3vw, 38px) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
    text-shadow: none !important;
}

.sl-page .sl-plan-price > div > span:last-child {
    margin-top: 10px !important;
    color: var(--sl-muted) !important;
    font-size: 14px !important;
}

.sl-page .sl-plan-featured .sl-plan-price > div > span:first-child {
    color: var(--sl-accent) !important;
}

/* ---------- What every plan includes ---------- */

.sl-page .sl-included {
    max-width: 880px;
    margin-inline: auto;
    text-align: center;
}

.sl-page .sl-included .sl-kicker {
    margin: 0 0 6px;
}

.sl-page .sl-included .sl-checks {
    align-items: center;
}

/* ---------- Trial block ([setlab_trial]) in the site look ---------- */

.sl-page .sl-trial-slot:not(:has(.sl-trial)) {
    display: none;
}

.sl-page .sl-trial {
    --sl-trial-accent: var(--sl-accent);
    width: 100%;
    margin: 0;
    border: 1px solid var(--sl-accent-border);
    border-radius: var(--sl-radius-xl);
    background: linear-gradient(180deg, var(--sl-accent-soft), rgba(255, 255, 255, .015));
    box-shadow: none;
}

.sl-page .sl-trial-glow {
    display: none;
}

.sl-page .sl-trial-content {
    padding: clamp(28px, 4vw, 44px);
}

.sl-page .sl-trial-eyebrow {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
}

.sl-page .sl-trial h2 {
    margin-top: 10px;
    font-family: inherit;
    font-size: clamp(24px, 3vw, 34px);
}

.sl-page .sl-trial-description,
.sl-page .sl-trial-points span,
.sl-page .sl-trial-note {
    font-family: inherit;
}

.sl-page .sl-trial-description {
    color: var(--sl-muted);
}

.sl-page .sl-trial-points i {
    background: var(--sl-accent-soft);
}

.sl-page .sl-trial-button {
    border-color: var(--sl-accent-border);
    border-radius: var(--sl-radius-md);
    background: var(--sl-accent);
    box-shadow: none;
    font-family: inherit;
}

.sl-page .sl-trial-button:hover {
    background: var(--sl-accent-hover);
    box-shadow: 0 12px 30px rgba(38, 208, 206, .18);
}

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
    .sl-page .sl-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .sl-page .sl-plans { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .sl-page .sl-plan { transition: none; }
    .sl-page .sl-plan:hover { transform: none; }
}