/* ====================================================
   SELECT20 — CareerPass Stylesheet (UI/UX Refined)
   ==================================================== */

/* Containers and Spacing System */
.cp-container {
    max-width: 95%;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    box-sizing: border-box;
}

.cp-container-wide {
    max-width: 95%;
    margin: 0 auto;
    padding: 0;
    width: 95%;
    box-sizing: border-box;
}

.page-hero.cp-hero {
    padding-top: 150px;
    padding-bottom: 90px;
    min-height: auto;
    background: #ffffff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
}

.page-hero.cp-hero::before {
    background-image: linear-gradient(rgba(27, 69, 192, 0.02) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(27, 69, 192, 0.02) 1px, transparent 1px) !important;
}

.cp-hero-container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}

.cp-hero-left {
    /* Fluid width matching grid container */
}

.cp-hero-left .breadcrumb {
    margin-bottom: 20px;
    color: #64748b !important;
}

.cp-hero-left .breadcrumb a {
    color: var(--cobalt) !important;
}

.cp-hero-left .breadcrumb span {
    color: var(--electric) !important;
}

.cp-hero-left .hero-badge {
    margin-bottom: 24px;
    padding: 8px 16px;
    display: inline-block;
    background: rgba(27, 69, 192, 0.06) !important;
    border: 1px solid rgba(27, 69, 192, 0.15) !important;
    color: var(--cobalt) !important;
}

.cp-hero-left h1 {
    margin-bottom: 16px;
    line-height: 1.25;
    font-size: clamp(1.8rem, 3.8vw, 2.8rem) !important;
    color: var(--cobalt) !important;
}

.cp-hero-desc {
    margin-bottom: 20px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink) !important;
}

.cp-hero-alert-box {
    margin-bottom: 28px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink) !important;
    padding: 20px;
    background: rgba(27, 69, 192, 0.05) !important;
    border-left: 4px solid var(--cobalt) !important;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(27, 69, 192, 0.06) !important;
}

.cp-hero-alert-box strong {
    color: var(--cobalt) !important;
}

.cp-hero-image-container {
    position: relative;
    border-radius: 24px;
    overflow: visible;
    aspect-ratio: 1.1 / 1;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 24px 60px rgba(13,30,72,0.12);
}

.cp-hero-image-container img {
    border-radius: 24px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Hero Floating Cards */
.cp-hero-float {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 12px 20px;
    box-shadow: 0 12px 32px rgba(13,30,72,0.08);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    animation: cpFloatCard 3.5s ease-in-out infinite;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.8);
}

.cp-float-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(27,69,192,0.1);
    color: var(--cobalt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.cp-float-1 { bottom: 40px; left: -30px; animation-delay: 0s; }
.cp-float-2 { top: 60px; right: -30px; animation-delay: 0.7s; }
.cp-float-3 { bottom: 120px; right: -20px; animation-delay: 1.4s; }
.cp-float-4 { top: 160px; left: -20px; animation-delay: 2.1s; }

@keyframes cpFloatCard {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

/* Secondary Button Customization inside cp-hero */
.cp-hero .btn-secondary {
    border-color: var(--cobalt) !important;
    color: var(--cobalt) !important;
}

.cp-hero .btn-secondary:hover {
    background: var(--cobalt) !important;
    color: white !important;
    border-color: var(--cobalt) !important;
}

/* Pricing Highlights */
.cp-pricing-card {
    background: white;
    border-radius: 24px;
    padding: 44px 40px;
    border: 2px solid rgba(27,69,192,0.12);
    box-shadow: 0 20px 45px rgba(13,30,72,0.06);
    max-width: 520px;
    margin: 40px auto 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cp-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cobalt), var(--electric));
}

.cp-price-mrp {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 1.3rem;
    margin-right: 12px;
    font-weight: 500;
}

.cp-price-offer {
    color: var(--cobalt);
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1px;
}

.cp-price-badge {
    display: inline-block;
    background: rgba(224,48,40,0.08);
    color: var(--red);
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: 800;
    font-size: .78rem;
    margin-top: 12px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(224,48,40,0.15);
    animation: cpPulse 2s infinite ease-in-out;
}

@keyframes cpPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,48,40,0.2); }
    70% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(224,48,40,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(224,48,40,0); }
}

/* Benefit Cards Grid Layout */
.cp-benefit-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(27,69,192,0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.cp-benefit-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27,69,192,0.1);
    border-color: rgba(27,69,192,0.18);
}

.cp-benefit-icon-wrapper {
    width: 60px;
    height: 60px;
    background: rgba(27,69,192,0.05);
    color: var(--cobalt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 24px;
    transition: background-color 0.3s, transform 0.3s;
}

.cp-benefit-card:hover .cp-benefit-icon-wrapper {
    background: rgba(27,69,192,0.1);
    transform: scale(1.05);
}

/* Horizontal Benefit Cards (Process waivers, etc) */
.cp-horizontal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}

.cp-horizontal-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    background: white;
    border-radius: 20px;
    padding: 28px 32px;
    border: 1px solid rgba(27,69,192,0.08);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    box-sizing: border-box;
}

.cp-horizontal-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(27,69,192,0.08);
    border-color: rgba(27,69,192,0.15);
}

.cp-horizontal-card .cp-benefit-icon-wrapper {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* 2-Column Logo Grid inside Split Content */
.cp-logo-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.cp-logo-row-card {
    background: #FFFFFF;
    border: 1px solid rgba(27,69,192,0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 12px rgba(13,30,72,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.cp-logo-row-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(27,69,192,0.06);
    border-color: rgba(27,69,192,0.15);
}

.cp-logo-span-all {
    grid-column: span 2;
    max-width: calc(50% - 8px);
    margin: 0 auto;
    width: 100%;
}

.cp-logo-img-wrapper {
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.cp-logo-img-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.cp-logo-desc {
    font-size: 0.68rem;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.2;
}

/* Checkmarks layout */
.cp-check-list {
    list-style: none;
    padding: 0;
    margin: 32px auto;
    max-width: 600px;
}

.cp-check-list li {
    font-size: 1.05rem;
    color: var(--ink);
    padding: 12px 0;
    border-bottom: 1px solid rgba(27,69,192,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 500;
}

.cp-check-list li:last-child {
    border-bottom: none;
}

.cp-check-list li::before {
    content: "✓";
    color: #FFFFFF;
    background: #1A8050;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Accordion Terms style */
.cp-accordion-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1200px;
    margin: 40px auto 0;
}

.cp-accordion-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cp-accordion-item {
    border: 1px solid rgba(27,69,192,0.08);
    border-radius: 12px;
    margin-bottom: 0; /* Handled by column gap */
    background: white;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(13,30,72,0.01);
}

.cp-accordion-header {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 20px 24px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s;
    box-sizing: border-box;
}

.cp-accordion-header:hover {
    background-color: #F8FBFF;
}

.cp-accordion-header::after {
    content: "+";
    font-size: 1.4rem;
    color: var(--cobalt);
    font-weight: 400;
    transition: transform .25s ease;
}

.cp-accordion-item.active .cp-accordion-header::after {
    transform: rotate(45deg);
}

.cp-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(0, 1, 0, 1);
    background: #FAFCFF;
}

.cp-accordion-item.active .cp-accordion-content {
    max-height: 1000px;
    transition: max-height .3s cubic-bezier(0.9, 0, 0.8, 0.2);
}

.cp-accordion-body {
    padding: 24px;
    font-size: .93rem;
    color: #4A5A78;
    line-height: 1.7;
    border-top: 1px solid rgba(27,69,192,0.05);
}

/* Blue Final CTA Section Styling */
.cp-sec-blue {
    background: linear-gradient(135deg, var(--ink) 0%, var(--violet) 100%);
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    text-align: center;
}

.cp-sec-blue::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.6;
}

.cp-sec-blue h2 {
    color: white;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
}

.cp-sec-blue p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.cp-sec-blue .cta-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}

.cp-sec-blue .btn-primary {
    background: white !important;
    color: var(--cobalt) !important;
    border: 1px solid white;
}

.cp-sec-blue .btn-primary:hover {
    background: rgba(255,255,255,0.9) !important;
    color: var(--violet) !important;
}

.cp-sec-blue .btn-secondary {
    border-color: rgba(255,255,255,0.4);
    color: white;
}

.cp-sec-blue .btn-secondary:hover {
    border-color: white;
    background: rgba(255,255,255,0.08);
}

/* Modal and price breakdown overrides */
.enrollment-modal-overlay {
    background: rgba(13, 30, 72, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.enrollment-modal.cp-wide-modal {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    box-shadow: 0 10px 40px -10px rgba(27,69,192,0.06),
                0 30px 80px -15px rgba(13,30,72,0.12) !important;
    overflow: hidden !important;
}

/* Accent top glowing stripe */
.enrollment-modal.cp-wide-modal::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cobalt) 0%, var(--electric) 100%);
    z-index: 10;
}

/* Stepper Pill Indicators */
.cp-modal-steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 8px;
    width: 100%;
}
.cp-modal-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.3s ease;
}
.cp-modal-step.active {
    color: var(--cobalt);
}
.cp-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
}
.cp-modal-step.active .cp-step-number {
    background: var(--cobalt);
    color: #ffffff;
}
.cp-modal-step-line {
    flex: 1;
    max-width: 80px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}
.cp-step-title {
    white-space: nowrap;
}

.cp-modal-price-breakdown {
    background: linear-gradient(180deg, rgba(27, 69, 192, 0.02) 0%, rgba(27, 69, 192, 0.04) 100%) !important;
    border: 1px solid rgba(27, 69, 192, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 16px 0 !important;
    box-shadow: 0 4px 20px rgba(13,30,72,0.01) !important;
}

.cp-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-weight: 500;
}

.cp-price-row:last-child {
    margin-bottom: 0;
}

.cp-price-row.discount {
    color: #10b981 !important;
    font-weight: 700;
}

.cp-price-row.total {
    border-top: 1.5px dashed rgba(27, 69, 192, 0.12) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--cobalt) !important;
}

.cp-hero-logo-wrapper {
    display: inline-block;
    max-width: 100%;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 28px;
}
.cp-hero-logo-wrapper img {
    max-width: 280px;
    height: auto;
    display: block;
}
@media (max-width: 768px) {
    .cp-hero-logo-wrapper {
        padding: 8px 16px;
        border-radius: 12px;
        margin: 0 auto 20px;
        display: table;
    }
    .cp-hero-logo-wrapper img {
        max-width: 200px;
        margin: 0 auto;
    }
}

/* Premium Inputs, Icon wrappers and focus states */
.cp-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cp-input-wrapper .cp-input-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.enrollment-modal.cp-wide-modal input[type="text"],
.enrollment-modal.cp-wide-modal input[type="number"],
.enrollment-modal.cp-wide-modal input[type="tel"],
.enrollment-modal.cp-wide-modal select,
.enrollment-modal.cp-wide-modal input[type="email"] {
    width: 100% !important;
    padding: 12px 16px 12px 48px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.01) !important;
    box-sizing: border-box !important;
}

.enrollment-modal.cp-wide-modal input:focus,
.enrollment-modal.cp-wide-modal select:focus {
    background: #ffffff !important;
    border-color: var(--cobalt) !important;
    box-shadow: 0 0 0 4px rgba(27, 69, 192, 0.08), inset 0 1px 2px rgba(0,0,0,0.01) !important;
    outline: none !important;
}

.enrollment-modal.cp-wide-modal input:focus + .cp-input-icon,
.enrollment-modal.cp-wide-modal select:focus + .cp-input-icon {
    color: var(--cobalt);
    transform: scale(1.05);
}

.enrollment-modal.cp-wide-modal select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
    padding-right: 44px !important;
}

.enrollment-modal.cp-wide-modal select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231B45C0%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

.cp-modal-coupon-section {
    background: #f8fafc;
    border: 1.5px dashed rgba(27, 69, 192, 0.15);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
}
.cp-coupon-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.cp-coupon-input-row {
    display: flex;
    gap: 12px;
}
.btn-coupon-apply {
    padding: 0 20px !important;
    border-radius: 10px !important;
    background: var(--cobalt) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(27, 69, 192, 0.15);
    transition: background-color 0.2s, transform 0.2s;
}
.btn-coupon-apply:hover {
    background: var(--electric) !important;
    transform: translateY(-1px);
}
.btn-coupon-apply:active {
    transform: translateY(0);
}
.btn-coupon-remove {
    background-color: var(--red) !important;
}
.btn-coupon-remove:hover {
    background-color: #d32f2f !important;
}

.cp-coupon-msg {
    font-size: .8rem;
    margin-top: 6px;
    margin-bottom: 12px;
    display: none;
}

.cp-coupon-msg.success {
    color: #10b981;
    display: block;
    font-weight: 600;
}

.cp-coupon-msg.error {
    color: var(--red);
    display: block;
    font-weight: 600;
}

.cp-consent-label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    cursor: pointer;
}

.cp-consent-label input {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    cursor: pointer;
    accent-color: var(--cobalt);
}

/* ======= NEW SECTION LAYOUT COMPONENTS ======= */

/* Section Padding */
.cp-section-padding {
    padding: 60px 0;
}

.section-headline {
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    margin-bottom: 12px;
}

/* Section Header */
.cp-section-header {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cp-section-header .section-tag {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
}

.cp-section-header .section-headline {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.cp-section-header .section-sub {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Split Layout (Text + Image) */
.cp-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.cp-split-content .section-headline {
    text-align: left;
}

.cp-split-content .section-tag {
    text-align: left;
    display: inline-block;
}

.cp-split-content .section-sub {
    text-align: left;
}

.cp-split-subhead {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 12px;
}

.cp-split-desc {
    font-size: 0.95rem;
    color: #4A5A78;
    line-height: 1.6;
}

.cp-split-image {
    position: relative;
}

/* Image Cards */
.cp-image-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(13,30,72,0.1);
    transition: transform 0.3s ease;
}

.cp-image-card:hover {
    transform: scale(1.02);
}

.cp-image-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Value Stats Strip */
.cp-value-strip {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    padding: 24px 0;
    border-top: 1px solid rgba(27,69,192,0.08);
    border-bottom: 1px solid rgba(27,69,192,0.08);
}

.cp-value-item {
    display: flex;
    flex-direction: column;
}

.cp-value-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cobalt);
    line-height: 1.2;
}

.cp-value-label {
    font-size: 0.78rem;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Numbered Benefit Cards */
.cp-benefits-numbered {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.cp-benefit-numbered-card {
    background: white;
    border-radius: 20px;
    padding: 36px 32px;
    border: 1px solid rgba(27,69,192,0.08);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-top: 4px solid rgba(27,69,192,0.15);
}

.cp-benefit-numbered-card:nth-child(1) { border-top-color: #ff6b6b; }
.cp-benefit-numbered-card:nth-child(2) { border-top-color: #20c997; }
.cp-benefit-numbered-card:nth-child(3) { border-top-color: #845ef7; }
.cp-benefit-numbered-card:nth-child(4) { border-top-color: #fab005; }

.cp-benefit-numbered-card:nth-child(1) .cp-benefit-icon-wrapper { background: rgba(255,107,107,0.1); }
.cp-benefit-numbered-card:nth-child(2) .cp-benefit-icon-wrapper { background: rgba(32,201,151,0.1); }
.cp-benefit-numbered-card:nth-child(3) .cp-benefit-icon-wrapper { background: rgba(132,94,247,0.1); }
.cp-benefit-numbered-card:nth-child(4) .cp-benefit-icon-wrapper { background: rgba(250,176,5,0.1); }

.cp-benefit-numbered-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(27,69,192,0.1);
}

.cp-benefit-number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 3rem;
    font-weight: 900;
    color: rgba(27,69,192,0.06);
    line-height: 1;
    pointer-events: none;
}

.cp-benefit-numbered-card:nth-child(1) .cp-benefit-number { color: rgba(255,107,107,0.12); }
.cp-benefit-numbered-card:nth-child(2) .cp-benefit-number { color: rgba(32,201,151,0.12); }
.cp-benefit-numbered-card:nth-child(3) .cp-benefit-number { color: rgba(132,94,247,0.12); }
.cp-benefit-numbered-card:nth-child(4) .cp-benefit-number { color: rgba(250,176,5,0.12); }

/* Visual Strip (Full-width Image with Overlay) */
.cp-visual-strip {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 56px;
    height: 280px;
    box-shadow: 0 20px 60px rgba(13,30,72,0.1);
}

.cp-visual-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-visual-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,30,72,0.75) 0%, rgba(27,69,192,0.65) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
}

.cp-visual-strip-overlay h3 {
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.cp-visual-strip-overlay p {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    max-width: 500px;
}

/* Floating Pricing Card */
.cp-pricing-floating {
    position: relative;
    margin-top: 24px;
}

/* Partner Note */
.cp-partner-note {
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
    margin: 16px 0 0;
}

/* ======= FINAL CTA WITH BACKGROUND IMAGE ======= */
.cp-final-cta {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cp-final-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13,30,72,0.88) 0%, rgba(26,48,128,0.92) 100%);
    z-index: 1;
}

.cp-final-cta-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.cp-cta-headline {
    color: white;
    font-size: 2.4rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cp-cta-headline span {
    color: var(--electric);
    display: block;
}

.cp-cta-sub {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 16px;
    line-height: 1.6;
}

.cp-cta-contact {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 0.95rem;
}

.cp-cta-contact a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: color 0.2s;
}

.cp-cta-contact a:hover {
    color: white;
}

.cp-cta-contact span {
    color: rgba(255,255,255,0.3);
}

.cp-final-cta .btn-primary {
    background: white !important;
    color: var(--cobalt) !important;
    border: 1px solid white;
}

.cp-final-cta .btn-primary:hover {
    background: rgba(255,255,255,0.9) !important;
    color: var(--violet) !important;
}

.cp-final-cta .btn-secondary:hover {
    border-color: white;
    background: rgba(255,255,255,0.08);
}

/* Mobile Sticky CTA Bar */
.cp-mobile-sticky-bar {
    position: fixed;
    bottom: -100px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(27,69,192,0.12);
    box-shadow: 0 -8px 30px rgba(13,30,72,0.1);
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.cp-mobile-sticky-bar.active {
    bottom: 0;
}

.cp-sticky-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cp-sticky-mrp {
    text-decoration: line-through;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.cp-sticky-offer {
    color: var(--cobalt);
    font-size: 1.4rem;
    font-weight: 800;
}

.cp-mobile-sticky-bar .careerpass-buy-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 50px;
    height: auto;
    margin: 0;
}

/* ======= COLORFUL SECTION BACKGROUNDS ======= */

/* Who Is CareerPass For - Dark gradient with floating orbs */
.cp-audience-section {
    background: linear-gradient(135deg, #0d1e48 0%, #1a3080 40%, #2d1b69 100%);
    position: relative;
    overflow: hidden;
}

.cp-audience-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    pointer-events: none;
}

.cp-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: cpOrbFloat 8s ease-in-out infinite;
}

.cp-orb-2 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, #845ef7 0%, transparent 70%);
    bottom: -80px;
    left: -80px;
    animation: cpOrbFloat 10s ease-in-out infinite reverse;
}

@keyframes cpOrbFloat {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, -20px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Audience Cards Grid */
.cp-audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.cp-audience-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 32px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cp-audience-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
}

.cp-audience-coral::before { background: linear-gradient(90deg, #ff6b6b, #ee5a24); }
.cp-audience-teal::before { background: linear-gradient(90deg, #20c997, #0ca678); }
.cp-audience-violet::before { background: linear-gradient(90deg, #845ef7, #7048e8); }
.cp-audience-amber::before { background: linear-gradient(90deg, #fab005, #f59f00); }

.cp-audience-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.25);
}

.cp-audience-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 20px;
}

.cp-audience-coral .cp-audience-icon { background: rgba(255,107,107,0.15); }
.cp-audience-teal .cp-audience-icon { background: rgba(32,201,151,0.15); }
.cp-audience-violet .cp-audience-icon { background: rgba(132,94,247,0.15); }
.cp-audience-amber .cp-audience-icon { background: rgba(250,176,5,0.15); }

.cp-audience-card h3 {
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.cp-audience-card p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* Savings Breakdown Strip */
.cp-savings-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 56px;
}

.cp-savings-item {
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.cp-savings-item:hover {
    transform: translateY(-4px);
}

.cp-savings-coral { background: linear-gradient(135deg, rgba(255,107,107,0.15), rgba(238,90,36,0.1)); border: 1px solid rgba(255,107,107,0.2); }
.cp-savings-teal { background: linear-gradient(135deg, rgba(32,201,151,0.15), rgba(12,166,120,0.1)); border: 1px solid rgba(32,201,151,0.2); }
.cp-savings-violet { background: linear-gradient(135deg, rgba(132,94,247,0.15), rgba(112,72,232,0.1)); border: 1px solid rgba(132,94,247,0.2); }
.cp-savings-amber { background: linear-gradient(135deg, rgba(250,176,5,0.15), rgba(245,159,0,0.1)); border: 1px solid rgba(250,176,5,0.2); }

.cp-savings-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 6px;
}

.cp-savings-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Why Section - Gradient Background */
.cp-why-section {
    background: linear-gradient(180deg, #f0f4ff 0%, #e8ecf8 50%, #f5f0ff 100%);
}

/* Enhanced Pricing Card Shimmer */
.cp-pricing-floating {
    position: relative;
    margin-top: 24px;
    animation: cpPricingGlow 3s ease-in-out infinite;
}

@keyframes cpPricingGlow {
    0% { box-shadow: 0 20px 45px rgba(27,69,192,0.06); }
    50% { box-shadow: 0 20px 60px rgba(27,69,192,0.15), 0 0 30px rgba(132,94,247,0.08); }
    100% { box-shadow: 0 20px 45px rgba(27,69,192,0.06); }
}

/* Colorful horizontal benefit cards */
.cp-horizontal-card:nth-child(1) { border-left: 4px solid #ff6b6b; }
.cp-horizontal-card:nth-child(2) { border-left: 4px solid #20c997; }
.cp-horizontal-card:nth-child(3) { border-left: 4px solid #845ef7; }
.cp-horizontal-card:nth-child(4) { border-left: 4px solid #fab005; }

/* Mobile & Tablet Overrides */
@media (max-width: 768px) {
    .cp-audience-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .cp-savings-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .cp-audience-orb { display: none; }
    .page-hero.cp-hero {
        padding-top: 110px;
        padding-bottom: 50px;
    }
    .cp-hero-float {
        display: none !important;
    }
    body.cp-has-sticky-bar {
        padding-bottom: 80px;
    }
    .cp-section-padding {
        padding: 48px 0;
    }
    .cp-split-layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .cp-reverse-mobile > .cp-split-image {
        order: -1;
    }
    .cp-benefits-numbered {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .cp-visual-strip {
        height: auto;
        min-height: 200px;
        margin-top: 40px;
    }
    .cp-visual-strip-overlay {
        padding: 24px;
    }
    .cp-visual-strip-overlay h3 {
        font-size: 1.4rem;
    }
    .cp-visual-strip-overlay p {
        font-size: 0.95rem;
    }
    .cp-cta-headline {
        font-size: 1.8rem;
    }
    .cp-horizontal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cp-logo-span-all {
        grid-column: auto;
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 600px) {
    .cp-accordion-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .cp-horizontal-card {
        flex-direction: column;
        gap: 16px;
        padding: 24px;
    }
    .cp-benefit-card {
        padding: 24px;
    }
    .cp-pricing-card {
        padding: 30px 20px;
    }
    .cp-hero-alert-box {
        padding: 16px;
        margin-bottom: 20px;
        font-size: 0.88rem;
    }
    .cp-audience-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .cp-savings-strip {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cp-savings-num {
        font-size: 1.3rem;
    }
    .cp-audience-card {
        padding: 24px 20px;
    }
}

@media (min-width: 769px) {
    .cp-mobile-sticky-bar {
        display: none !important;
    }

    /* CareerPass Wide Modal adjustments */
    .enrollment-modal.cp-wide-modal {
        width: 75vw !important;
        max-width: 75vw !important;
        max-height: 80vh !important;
        padding: 32px 40px !important;
        overflow-x: hidden !important; /* Hide horizontal scrollbar */
        overflow-y: auto !important;   /* Scroll vertically if content exceeds viewport */
        display: flex;
        flex-direction: column;
    }
    
    .enrollment-modal.cp-wide-modal .enrollment-modal-header {
        margin-bottom: 20px !important;
    }
    
    .cp-modal-split-form {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 36px;
        align-items: start;
        overflow: visible !important;
    }
    
    .cp-modal-form-left, .cp-modal-form-right {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    /* Make inputs slightly more compact in the modal */
    .enrollment-modal.cp-wide-modal .form-group {
        margin-bottom: 12px !important;
    }
    .enrollment-modal.cp-wide-modal label {
        margin-bottom: 6px !important;
        font-size: 0.82rem;
        font-weight: 600;
        color: #475569;
    }
    .enrollment-modal.cp-wide-modal input[type="text"],
    .enrollment-modal.cp-wide-modal input[type="number"],
    .enrollment-modal.cp-wide-modal input[type="tel"],
    .enrollment-modal.cp-wide-modal select,
    .enrollment-modal.cp-wide-modal input[type="email"] {
        padding: 10px 14px 10px 44px !important;
        font-size: 0.9rem !important;
    }
    
    .cp-modal-price-breakdown {
        padding: 14px 18px !important;
        margin-top: 0 !important;
    }
    .cp-price-row {
        margin-bottom: 6px !important;
        font-size: 0.82rem !important;
    }
    .cp-price-row.total {
        margin-top: 10px !important;
        padding-top: 10px !important;
        font-size: 1.05rem !important;
    }
    
    .cp-consent-label {
        font-size: 0.76rem !important;
        margin-bottom: 0 !important;
    }
    
    .enrollment-form-footer {
        margin-top: 6px !important;
    }
    
    .btn-full {
        padding: 12px 24px !important;
        font-size: 0.95rem !important;
    }
}

/* For smaller desktop screens or general mobile fallbacks, let's keep vertical scrollable */
@media (max-width: 768px) {
    .page-hero.cp-hero {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
    }
    .cp-hero-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .cp-hero-left {
        max-width: 100% !important;
    }
    .cp-hero-logo-wrapper {
        margin: 0 0 20px !important;
        display: block !important;
    }
    .cp-hero-logo-wrapper img {
        max-width: 240px !important;
        margin: 0 !important;
    }
    .enrollment-modal.cp-wide-modal {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .cp-modal-split-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        overflow-x: hidden !important;
    }
}

/* Glassmorphism background for key info boxes */
.cp-light-blue-glass {
    background: rgba(48, 134, 212, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(48, 134, 212, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px 0 rgba(13, 30, 72, 0.03) !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
}

@media (min-width: 769px) {
    /* Set container view widths to 85vw on desktop */
    .cp-container, .cp-container-wide {
        max-width: 85vw !important;
        width: 85vw !important;
        padding: 0 !important;
    }

    /* Set section view height to 80vh and align vertically centered on desktop */
    .page-hero.cp-hero,
    section.cp-section-padding,
    section.cp-audience-section,
    section.cp-why-section,
    section.cp-final-cta,
    section#terms-section {
        min-height: 80vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}

/* ====================================================
   Redesigned Partner Benefits Section (90vh / 80vh Grid Layout)
   ==================================================== */
@media (min-width: 992px) {
    .cp-partner-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .cp-partner-container {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 56px !important;
        align-items: center !important;
    }
    
    .cp-partner-benefits-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

@media (max-width: 991px) {
    .cp-partner-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }
    
    .cp-partner-benefits-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
}

.cp-logo-compact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 24px;
}

.cp-logo-compact-card {
    background: #ffffff;
    border: 1px solid rgba(27, 69, 192, 0.08);
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    box-shadow: 0 4px 10px rgba(13, 30, 72, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.cp-logo-compact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(27, 69, 192, 0.06);
    border-color: rgba(27, 69, 192, 0.15);
}

.cp-logo-compact-card img {
    max-height: 32px;
    max-width: 110px;
    object-fit: contain;
}

.cp-partner-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.cp-partner-note-inline {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
}

/* Compact Partner Benefit Cards */
.cp-partner-benefit-card {
    display: flex;
    gap: 16px;
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 20px;
    border: 1px solid rgba(27, 69, 192, 0.06);
    box-shadow: 0 4px 12px rgba(13, 30, 72, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
    text-align: left;
}

.cp-partner-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 69, 192, 0.05);
    border-color: rgba(27, 69, 192, 0.12);
}

.cp-partner-benefit-icon {
    font-size: 1.4rem;
    width: 44px;
    height: 44px;
    background: rgba(27, 69, 192, 0.04);
    color: var(--cobalt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-partner-benefit-info h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--ink);
    line-height: 1.3;
}

.cp-partner-benefit-info p {
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.45;
    margin: 0;
}
/* ====================================================
   Redesigned "What You Get" Section (Split Grid Layout)
   ==================================================== */
@media (min-width: 992px) {
    .cp-whatyouget-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .cp-whatyouget-container {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 56px !important;
        align-items: center !important;
    }
}

@media (max-width: 991px) {
    .cp-whatyouget-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }
}

.cp-whatyouget-left .section-headline {
    text-align: left;
}

.cp-whatyouget-left .section-tag {
    text-align: left;
    display: inline-block;
}

.cp-whatyouget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cp-wyg-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 18px;
    border: 1px solid rgba(27, 69, 192, 0.06);
    box-shadow: 0 4px 12px rgba(13, 30, 72, 0.02);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cp-wyg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(27, 69, 192, 0.08);
}

.cp-wyg-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
}

.cp-wyg-coral::before { background: linear-gradient(90deg, #ff6b6b, #ee5a24); }
.cp-wyg-teal::before { background: linear-gradient(90deg, #20c997, #0ca678); }
.cp-wyg-violet::before { background: linear-gradient(90deg, #845ef7, #7048e8); }
.cp-wyg-amber::before { background: linear-gradient(90deg, #fab005, #f59f00); }

.cp-wyg-number {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 2.2rem;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.cp-wyg-coral .cp-wyg-number { color: rgba(255,107,107,0.1); }
.cp-wyg-teal .cp-wyg-number { color: rgba(32,201,151,0.1); }
.cp-wyg-violet .cp-wyg-number { color: rgba(132,94,247,0.1); }
.cp-wyg-amber .cp-wyg-number { color: rgba(250,176,5,0.1); }

.cp-wyg-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.cp-wyg-coral .cp-wyg-icon { background: rgba(255,107,107,0.1); }
.cp-wyg-teal .cp-wyg-icon { background: rgba(32,201,151,0.1); }
.cp-wyg-violet .cp-wyg-icon { background: rgba(132,94,247,0.1); }
.cp-wyg-amber .cp-wyg-icon { background: rgba(250,176,5,0.1); }

.cp-wyg-card h4 {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.cp-wyg-card p {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.cp-wyg-value {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 20px;
}

.cp-wyg-coral .cp-wyg-value { background: rgba(255,107,107,0.08); color: #ff6b6b; }
.cp-wyg-teal .cp-wyg-value { background: rgba(32,201,151,0.08); color: #0ca678; }
.cp-wyg-violet .cp-wyg-value { background: rgba(132,94,247,0.08); color: #845ef7; }
.cp-wyg-amber .cp-wyg-value { background: rgba(250,176,5,0.08); color: #e8a500; }

@media (max-width: 600px) {
    .cp-whatyouget-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* ====================================================
   Redesigned Counselling Section (Split Grid Layout)
   ==================================================== */
.cp-counselling-section {
    background: linear-gradient(180deg, #f5f8ff 0%, #eef2fb 50%, #f0f4ff 100%);
}

@media (min-width: 992px) {
    .cp-counselling-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .cp-counselling-container {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 56px !important;
        align-items: center !important;
    }
}

@media (max-width: 991px) {
    .cp-counselling-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }
}

.cp-counselling-left .section-headline {
    text-align: left;
}

.cp-counselling-left .section-tag {
    text-align: left;
    display: inline-block;
}

.cp-counselling-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.cp-counsel-feat {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(255,255,255,0.7);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(27, 69, 192, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cp-counsel-feat:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(27, 69, 192, 0.06);
}

.cp-counsel-feat-icon {
    width: 40px;
    height: 40px;
    background: rgba(27, 69, 192, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.cp-counsel-feat strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.cp-counsel-feat span {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}

.cp-counselling-right .cp-image-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(13, 30, 72, 0.1);
}

.cp-counselling-right .cp-image-card img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ====================================================
   Redesigned "Who Is It For" Section (Split Grid Layout)
   ==================================================== */
@media (min-width: 992px) {
    .cp-audience-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .cp-audience-container {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 56px !important;
        align-items: center !important;
    }
}

@media (max-width: 991px) {
    .cp-audience-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }
}

.cp-audience-left .section-headline {
    text-align: left;
}

.cp-audience-left .section-tag {
    text-align: left;
    display: inline-block;
}

/* Savings strip inside the audience left column */
.cp-audience-savings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

/* Audience cards as horizontal rows (icon + info side-by-side) */
.cp-audience-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cp-audience-cards-stack .cp-audience-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-align: left;
    padding: 18px 20px;
    border-radius: 16px;
}

.cp-audience-cards-stack .cp-audience-icon {
    margin: 0;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    font-size: 1.4rem;
}

.cp-audience-card-info h3 {
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.cp-audience-card-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}


.cp-modal-step-indicator {
    display: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--electric);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    text-align: center;
}

.cp-modal-step-nav {
    display: none;
}

@media (max-width: 768px) {
    .cp-modal-step-indicator {
        display: block;
    }
    
    .cp-modal-step-nav {
        display: flex;
    }
    
    /* Default step state on mobile */
    #cpFormLeftCol {
        display: block !important;
    }
    #cpFormRightCol {
        display: none !important;
    }
    
    /* Active/inactive overrides */
    #cpFormLeftCol.step-inactive {
        display: none !important;
    }
    #cpFormRightCol.step-active {
        display: block !important;
    }
}

/* ====================================================
   Redesigned "Why Choose CareerPass" Section (Split Grid Layout)
   ==================================================== */
@media (min-width: 992px) {
    .cp-why-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .cp-why-container {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important;
        gap: 56px !important;
        align-items: center !important;
    }
}

@media (max-width: 991px) {
    .cp-why-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 36px !important;
    }
}

.cp-why-left .section-headline {
    text-align: left;
}

.cp-why-left .section-tag {
    text-align: left;
    display: inline-block;
}

.cp-why-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 24px;
}

.cp-why-feat-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(27, 69, 192, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-align: left;
    box-sizing: border-box;
}

.cp-why-feat-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(27, 69, 192, 0.06);
    border-color: rgba(27, 69, 192, 0.12);
}

.cp-why-feat-icon {
    width: 40px;
    height: 40px;
    background: rgba(27, 69, 192, 0.06);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.cp-why-feat-info strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 2px;
}

.cp-why-feat-info span {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}

/* Consolidated Pricing Card for Right Column */
.cp-why-pricing-card {
    width: 100%;
    max-width: 390px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(13, 30, 72, 0.08);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cp-why-pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(27, 69, 192, 0.12);
}

.cp-why-image-wrapper {
    width: 100%;
    height: 160px;
    overflow: hidden;
    position: relative;
}

.cp-why-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-why-pricing-details {
    padding: 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.cp-why-membership-tag {
    font-size: 0.85rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--electric);
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.cp-why-pricing-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cp-why-mrp {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 1.25rem;
    font-weight: 500;
}

.cp-why-offer {
    color: var(--cobalt);
    font-size: 2.1rem;
    font-weight: 800;
}

.cp-why-coupon-wrapper {
    margin-bottom: 14px;
}

.cp-why-coupon-badge {
    background: rgba(32, 201, 151, 0.08);
    color: #10b981;
    border: 1px solid rgba(32, 201, 151, 0.15);
    font-size: 0.72rem;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 700;
    letter-spacing: 0.2px;
    display: inline-block;
}

.cp-why-pricing-desc {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0 0 20px 0;
    text-align: center;
}

.cp-why-pricing-details .careerpass-buy-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(27, 69, 192, 0.15) !important;
}

@media (max-width: 991px) {
    .cp-why-pricing-card {
        max-width: 420px;
    }
}

/* Styled dropdown select elements in enrollment modal */
.enrollment-modal select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(27, 69, 192, 0.15);
    border-radius: 10px;
    background-color: #ffffff;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink);
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231B45C0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px !important;
}

.enrollment-modal select:focus {
    outline: none;
    border-color: var(--cobalt);
    box-shadow: 0 0 0 3px rgba(27, 69, 192, 0.1);
}

.enrollment-modal select:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    border-color: rgba(27, 69, 192, 0.08);
    cursor: not-allowed;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
}

/* ====================================================
   PREMIUM MODAL & FORM CONTROLS (MODERN REFINED UI)
   ==================================================== */

/* Modal Glowing Accent Top border and Soft blur backdrop override */
.enrollment-modal-overlay {
    background: rgba(13, 30, 72, 0.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.enrollment-modal.cp-wide-modal {
    background: #ffffff !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    position: relative !important;
    box-shadow: 0 10px 40px -10px rgba(27,69,192,0.06),
                0 30px 80px -15px rgba(13,30,72,0.12) !important;
    overflow: hidden !important;
}

/* Accent top glowing stripe */
.enrollment-modal.cp-wide-modal::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--cobalt) 0%, var(--electric) 100%);
    z-index: 10;
}

/* Stepper Pill Indicators */
.cp-modal-steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 20px 0 8px;
    width: 100%;
}
.cp-modal-step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.3s ease;
}
.cp-modal-step.active {
    color: var(--cobalt);
}
.cp-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background-color 0.3s, color 0.3s;
}
.cp-modal-step.active .cp-step-number {
    background: var(--cobalt);
    color: #ffffff;
}
.cp-modal-step-line {
    flex: 1;
    max-width: 80px;
    height: 2px;
    background: #e2e8f0;
    border-radius: 2px;
}
.cp-step-title {
    white-space: nowrap;
}

/* Input Fields & Icon Prefixes */
.cp-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.cp-input-wrapper .cp-input-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.enrollment-modal.cp-wide-modal input[type="text"],
.enrollment-modal.cp-wide-modal input[type="number"],
.enrollment-modal.cp-wide-modal input[type="tel"],
.enrollment-modal.cp-wide-modal select,
.enrollment-modal.cp-wide-modal input[type="email"] {
    width: 100% !important;
    padding: 12px 16px 12px 48px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    transition: border-color 0.25s, box-shadow 0.25s, background-color 0.25s !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.01) !important;
    box-sizing: border-box !important;
}

.enrollment-modal.cp-wide-modal input:focus,
.enrollment-modal.cp-wide-modal select:focus {
    background: #ffffff !important;
    border-color: var(--cobalt) !important;
    box-shadow: 0 0 0 4px rgba(27, 69, 192, 0.08), inset 0 1px 2px rgba(0,0,0,0.01) !important;
    outline: none !important;
}

.enrollment-modal.cp-wide-modal input:focus + .cp-input-icon,
.enrollment-modal.cp-wide-modal select:focus + .cp-input-icon {
    color: var(--cobalt);
    transform: scale(1.05);
}

.enrollment-modal.cp-wide-modal select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px !important;
    padding-right: 44px !important;
}

.enrollment-modal.cp-wide-modal select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3D%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%231B45C0%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E") !important;
}

/* Coupon section premium integration */
.cp-modal-coupon-section {
    background: #f8fafc;
    border: 1px dashed rgba(27, 69, 192, 0.15);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}
.cp-coupon-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.cp-coupon-input-row {
    display: flex;
    gap: 12px;
}
.btn-coupon-apply {
    padding: 0 20px !important;
    border-radius: 10px !important;
    background: var(--cobalt) !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(27, 69, 192, 0.15);
    transition: background-color 0.2s, transform 0.2s;
}
.btn-coupon-apply:hover {
    background: var(--electric) !important;
    transform: translateY(-1px);
}
.btn-coupon-apply:active {
    transform: translateY(0);
}

/* Price Breakdown Receipt styling */
.cp-modal-price-breakdown {
    background: linear-gradient(180deg, rgba(27, 69, 192, 0.02) 0%, rgba(27, 69, 192, 0.04) 100%) !important;
    border: 1px solid rgba(27, 69, 192, 0.08) !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin: 16px 0 !important;
    box-shadow: 0 4px 20px rgba(13,30,72,0.01) !important;
}
.cp-price-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    font-weight: 500;
}
.cp-price-row.discount {
    color: #10b981 !important;
    font-weight: 700;
}
.cp-price-row.total {
    border-top: 1.5px dashed rgba(27, 69, 192, 0.12) !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--cobalt) !important;
}

/* Checkbox Toggle */
.cp-consent-label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.78rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    cursor: pointer;
}
.cp-consent-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    cursor: pointer;
    accent-color: var(--cobalt);
}

/* Proceed to Payment Button */
.enrollment-modal.cp-wide-modal .btn-full {
    background: linear-gradient(135deg, var(--cobalt) 0%, var(--electric) 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 24px rgba(27, 69, 192, 0.2) !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.enrollment-modal.cp-wide-modal .btn-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(27, 69, 192, 0.3) !important;
}
.enrollment-modal.cp-wide-modal .btn-full:active {
    transform: translateY(0);
}

/* Field errors overlay */
.enroll-field-error {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--red) !important;
    margin-top: 4px !important;
    min-height: 16px !important;
}

/* ═══════════════════════════════════════════════════════
   FORM COMPACTION & ALIGNMENT OVERRIDES (NEW - SCALED)
   ═══════════════════════════════════════════════════════ */

/* 1. Hide stepper progress indicators and mobile steps */
.cp-modal-steps-container,
.cp-modal-step-indicator {
  display: none !important;
}

/* 2. Compact Modal Header & Columns Padding */
.enrollment-modal.cp-wide-modal .enrollment-modal-header {
  padding: 20px 28px 10px !important;
}
.cp-modal-form-left,
.cp-modal-form-right {
  padding: 20px 28px !important;
}
.cp-modal-form-left, .cp-modal-form-right {
  gap: 12px !important;
}

/* 3. Standardize and scale down heights/sizing of all fields in the modal */
.enrollment-modal.cp-wide-modal input[type="text"],
.enrollment-modal.cp-wide-modal input[type="number"],
.enrollment-modal.cp-wide-modal input[type="tel"],
.enrollment-modal.cp-wide-modal select,
.enrollment-modal.cp-wide-modal input[type="email"] {
  height: 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 12px 8px 40px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(27,69,192,0.18) !important;
  border-radius: 10px !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

/* Center standard icons inside compact inputs */
.enrollment-modal.cp-wide-modal .cp-input-icon {
  left: 12px !important;
  width: 15px !important;
  height: 15px !important;
}

.enrollment-modal.cp-wide-modal input[type="text"]:focus,
.enrollment-modal.cp-wide-modal input[type="number"]:focus,
.enrollment-modal.cp-wide-modal input[type="tel"]:focus,
.enrollment-modal.cp-wide-modal select:focus,
.enrollment-modal.cp-wide-modal input[type="email"]:focus {
  border-color: var(--cobalt) !important;
  box-shadow: 0 0 0 3px rgba(27, 69, 192, 0.08) !important;
}

/* Compact form groups and errors */
.enrollment-modal.cp-wide-modal .form-group {
  margin-bottom: 10px !important;
}
.enrollment-modal.cp-wide-modal .enrollment-form-row {
  gap: 12px !important;
}
.enrollment-modal.cp-wide-modal .enroll-field-error {
  font-size: 0.72rem !important;
  min-height: 14px !important;
  margin-top: 2px !important;
}

/* 4. Align and style coupon code row to match other fields in height and style */
.cp-coupon-input-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
}

.cp-coupon-input-row .cp-input-wrapper {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.cp-coupon-input-row input {
  height: 40px !important;
  padding: 8px 12px 8px 40px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(27,69,192,0.18) !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.25s, box-shadow 0.25s !important;
}

.cp-coupon-input-row input:focus {
  border-color: var(--cobalt) !important;
  box-shadow: 0 0 0 3px rgba(27, 69, 192, 0.08) !important;
}

.btn-coupon-apply {
  height: 40px !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  background: var(--cobalt) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(27, 69, 192, 0.15) !important;
  transition: background-color 0.2s, transform 0.2s !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-coupon-apply:hover {
  background: var(--electric) !important;
  transform: translateY(-1px) !important;
}

/* Compact Coupon Section Wrapper */
.cp-modal-coupon-section {
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  border-radius: 12px !important;
}

/* Compact Price Breakdown */
.cp-modal-price-breakdown {
  padding: 10px 14px !important;
  margin-top: 0 !important;
  border-radius: 12px !important;
}
.cp-price-row {
  margin-bottom: 4px !important;
  font-size: 0.78rem !important;
}
.cp-price-row.total {
  margin-top: 8px !important;
  padding-top: 8px !important;
  font-size: 0.95rem !important;
}

/* Compact Consent & Footer */
.cp-consent-label {
  font-size: 0.78rem !important;
  gap: 6px !important;
}
.enrollment-form-footer {
  margin-top: 8px !important;
}
.enrollment-form-footer .btn-full {
  padding: 10px 20px !important;
  font-size: 0.92rem !important;
  border-radius: 10px !important;
}

/* 5. Standardize labels for consistent sizing and alignment */
.enrollment-modal.cp-wide-modal label:not(.cp-consent-label),
.enrollment-modal.cp-wide-modal .cp-coupon-label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin-bottom: 4px !important;
  display: block !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: left !important;
}

/* Custom spacing for the first visible section after removing the hero */
.cp-first-section {
  padding-top: clamp(100px, 12vw, 150px) !important;
  padding-bottom: var(--section-padding-block, 60px) !important;
}

/* ====================================================
   SELECT20 — Recreated Responsive Layouts (Mobile/Tablet)
   ==================================================== */

:root {
  --section-padding-block: clamp(2.5rem, 5vw, 5rem);
  --section-padding-inline: clamp(1rem, 4vw, 2rem);
  --card-radius: 1.25rem;
  --gap-section: clamp(2rem, 4vw, 4rem);
  --gap-card: clamp(1rem, 2vw, 1.5rem);
  --heading-xl: clamp(2rem, 5vw, 3.5rem);
  --heading-lg: clamp(1.6rem, 4vw, 2.5rem);
  --body: clamp(0.95rem, 1.1vw, 1.05rem);
}

/* Base resets to prevent horizontal overflow */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 1. Spacing System Standardization */
.cp-container, .cp-container-wide {
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Spacing and container widths */
@media (min-width: 1025px) {
  .cp-container, .cp-container-wide {
    max-width: 85vw !important;
    width: 85vw !important;
    padding: 0 !important;
  }
}

@media (max-width: 1024px) {
  .cp-container, .cp-container-wide {
    padding: 0 var(--section-padding-inline) !important;
  }
}

.cp-section-padding {
  padding: var(--section-padding-block) 0 !important;
}

.section-headline {
  font-size: var(--heading-lg) !important;
  line-height: 1.25 !important;
}

/* Wide Modal Desktop & Base Overrides */
.enrollment-modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  box-sizing: border-box !important;
}

.enrollment-modal-overlay.open {
  display: flex !important;
}

.enrollment-modal.cp-wide-modal {
  width: 100% !important;
  max-width: 820px !important;
  max-height: 90vh !important;
  border-radius: var(--card-radius) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.enrollment-modal.cp-wide-modal form {
  display: flex !important;
  flex-direction: column !important;
  max-height: 100% !important;
  overflow: hidden !important;
  width: 100% !important;
}

.enrollment-modal.cp-wide-modal .enrollment-modal-header {
  padding: 1.5rem !important;
  border-bottom: 1px solid rgba(27,69,192,0.08) !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.enrollment-modal.cp-wide-modal .cp-modal-split-form {
  overflow-y: auto !important;
  flex-grow: 1 !important;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  gap: 32px !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
}

.cp-modal-form-left, .cp-modal-form-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}
/* ====================================================
   TABLET VIEW (max-width: 1024px)
   ==================================================== */
@media (max-width: 1024px) {
  /* Reduce section padding for a premium compact look */
  :root {
    --section-padding-block: 3.5rem;
    --gap-section: 2.5rem;
  }

  /* Hero Section: Stack early if cramped */
  .cp-split-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    text-align: center !important;
  }
  
  .cp-split-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .cp-split-content .section-headline,
  .cp-split-content .section-sub,
  .cp-split-content .section-tag {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Put hero image / card second */
  .cp-reverse-mobile > .cp-split-image {
    order: 1 !important;
  }

  /* Pricing / Why Section split view */
  .cp-why-container {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
  }
  
  .cp-why-right {
    max-width: 500px !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Benefit Cards: Clean 2-column grid */
  .cp-benefits-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--gap-card) !important;
  }

  /* Partner Logos */
  .cp-partner-logos-row {
    gap: 1.5rem !important;
  }
  
  .cp-partner-logo-item img {
    max-width: 120px !important;
  }

  /* Wide Checkout Modal layout on tablet */
  .enrollment-modal.cp-wide-modal {
    max-width: 680px !important;
  }
  
  .enrollment-modal.cp-wide-modal .cp-modal-split-form {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 20px !important;
  }
}

/* ====================================================
   MOBILE VIEW (max-width: 768px)
   ==================================================== */
@media (max-width: 768px) {
  :root {
    --section-padding-block: 2.5rem;
    --gap-section: 2rem;
  }

  /* Typography fluid sizing */
  .section-headline {
    font-size: clamp(1.6rem, 5vw, 2rem) !important;
  }
  
  .cp-split-subhead {
    font-size: 1.1rem !important;
  }

  /* Hero: Center aligned content and stacked elements */
  .cp-split-content .careerpass-buy-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .cp-split-content .cp-know-more-btn {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .cp-value-strip {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }

  /* Benefit Cards: Stack one per row */
  .cp-benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .cp-benefits-cta-band {
    flex-direction: column !important;
    gap: 1rem !important;
    text-align: center !important;
    padding: 1.5rem 1.25rem !important;
  }

  .cp-benefits-cta-band button {
    width: 100% !important;
  }

  /* Test Prep / Partner Logos wrapping */
  .cp-partner-logos-row {
    gap: 1.25rem !important;
    justify-content: center !important;
  }

  .cp-partner-logo-item img {
    max-width: 100px !important;
  }

  /* Pricing Details Box stacking */
  .cp-why-pricing-details {
    padding: 1.5rem !important;
  }
  
  .cp-why-pricing-details .careerpass-buy-btn {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Checkout Modal full-screen behavior on mobile */
  .enrollment-modal-overlay {
    padding: 0 !important;
  }

  .enrollment-modal.cp-wide-modal {
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }

  .enrollment-modal.cp-wide-modal .enrollment-modal-header {
    padding: 1.25rem 1rem !important;
  }

  .enrollment-modal.cp-wide-modal .cp-modal-split-form {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 1.25rem 1rem !important;
  }

  /* Form inputs stack */
  .enrollment-form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .cp-coupon-input-row {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .btn-coupon-apply {
    width: 100% !important;
  }

  /* Know More Modal full screen styling on mobile */
  .cp-km-backdrop {
    padding: 0 !important;
  }
  
  .cp-km-window {
    border-radius: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  .cp-km-header {
    padding: 1.25rem 1rem !important;
  }
  
  .cp-km-body {
    padding: 1.25rem 1rem !important;
  }

  /* Common Benefit Details Modal full screen styling on mobile */
  .cp-modal-backdrop {
    padding: 0 !important;
  }
  
  .cp-modal-window {
    border-radius: 0 !important;
    max-height: 100% !important;
    height: 100% !important;
    width: 100% !important;
  }
  
  .cp-modal-header {
    padding: 1.25rem 1rem !important;
  }
  
  .cp-modal-body {
    padding: 1.25rem 1rem !important;
  }
  
  .cp-modal-footer {
    padding: 1.25rem 1rem !important;
  }
}

/* ====================================================
   SMALL MOBILE VIEW (max-width: 420px)
   ==================================================== */
@media (max-width: 420px) {
  /* Reduce heading sizes to prevent breaks */
  .section-headline {
    font-size: 1.5rem !important;
  }
  
  .section-headline span {
    white-space: normal !important;
  }

  .cp-split-desc {
    font-size: 0.88rem !important;
  }

  .cp-value-strip {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;
  }

  /* Tighten padding further for small mobile screen size */
  .cp-section-padding {
    padding: 2rem 0 !important;
  }

  .enrollment-modal.cp-wide-modal .enrollment-modal-header h3 {
    font-size: 1.1rem !important;
  }

  /* Make sure coupon text input is easily readable */
  .cp-coupon-input-row input {
    font-size: 0.8rem !important;
  }
}