/* ═══════════════════════════════════════════════════════════
   WhatsApp Job Alert landing page — reuses the site's existing
   .psk-detail-card / .psk-faq-new / .psk-cta-strip / .psk-btn-primary /
   .psk-btn-whatsapp / .psk-apply-form classes (psk-services-detail.css,
   loaded sitewide) for everything except the two-column plan comparison
   below, which has no existing sitewide equivalent.
   ═══════════════════════════════════════════════════════════ */

.psk-ja-hero {
    position: relative;
    background: linear-gradient(135deg, #0a1f14 0%, #04140c 60%, #020a06 100%);
    padding: 64px 0 56px;
}
.psk-ja-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25d366;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.psk-ja-hero h1 {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 16px;
    max-width: 720px;
}
.psk-ja-hero__sub {
    color: rgba(255, 255, 255, 0.72);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 640px;
    margin-bottom: 26px;
}
.psk-ja-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}
.psk-ja-hero__trust span { display: flex; align-items: center; gap: 6px; }
.psk-ja-hero__trust .fa { color: #25d366; }

/* Plan comparison */
.psk-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 767px) {
    .psk-plan-grid { grid-template-columns: 1fr; }
}
.psk-plan-card {
    position: relative;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
}
.psk-plan-card--featured {
    border: 2px solid #25d366;
    box-shadow: 0 12px 32px rgba(37,211,102,0.16);
}
.psk-plan-card__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: #25d366;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 5px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.psk-plan-card__name {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 10px;
}
.psk-plan-card__price {
    font-size: 2.4rem;
    font-weight: 800;
    color: #040e26;
    line-height: 1;
}
.psk-plan-card__price span {
    font-size: 0.95rem;
    font-weight: 600;
    color: #9ca3af;
}
.psk-plan-card__per-month {
    font-size: 0.82rem;
    color: #25d366;
    font-weight: 700;
    margin: 6px 0 18px;
}
.psk-plan-card__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    flex: 1;
}
.psk-plan-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.88rem;
    color: #333;
    padding: 7px 0;
}
.psk-plan-card__list .fa { color: #25d366; margin-top: 3px; flex-shrink: 0; }

.psk-plan-card__form .psk-form-group { margin-bottom: 12px; }
.psk-plan-card__form label { font-size: 0.78rem; }

/* What you get */
.psk-ja-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.psk-ja-benefit {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #14532d;
}
.psk-ja-benefit .fa { color: #25d366; margin-top: 2px; flex-shrink: 0; }

/* How it works */
.psk-ja-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 767px) {
    .psk-ja-steps { grid-template-columns: 1fr; }
}
.psk-ja-step {
    text-align: center;
    padding: 20px 16px;
}
.psk-ja-step__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 1.1rem;
}
.psk-ja-step h4 { font-size: 1rem; font-weight: 700; color: #040e26; margin-bottom: 6px; }
.psk-ja-step p { font-size: 0.85rem; color: #666; margin: 0; }

/* Informational (not an error) notice under the WhatsApp number field —
   shown when that number already has an active subscription, so a
   renewal doesn't come as a surprise after paying. */
.psk-field-info {
    margin-top: 6px;
    padding: 8px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 0.76rem;
    line-height: 1.4;
    color: #1e40af;
}

/* Premium input styling for the subscribe forms — plain Bootstrap
   .form-control defaults read as thin/generic against the rest of this
   page's design. */
.psk-plan-card__form label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 6px;
    display: block;
}
.psk-plan-card__form .form-control {
    height: auto;
    padding: 12px 16px;
    font-size: 0.95rem;
    border: 1.5px solid #e2e6ea;
    border-radius: 10px;
    background: #fbfbfd;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.psk-plan-card__form .form-control::placeholder { color: #aab0bb; }
.psk-plan-card__form .form-control:focus {
    border-color: #fc5e28;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(252, 94, 40, 0.12);
    outline: none;
}
.psk-plan-card--featured .psk-plan-card__form .form-control:focus {
    border-color: #25d366;
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14);
}
.psk-plan-card__form .form-control.is-invalid {
    border-color: #e11d48;
    background: #fff8f8;
}
.psk-plan-card__form .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.12);
}