/* Reusable template for public "Key Success Element" content pages
   (psp-*.htm — e.g. the 12 items linked from the homepage's Success System
   grid). Colors reuse the same --mb-olive/--mb-green variables every
   public-themes/style{N}.css already defines, so this re-themes per tenant
   automatically — no page-specific color code needed. */

.cp-eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding: 12px 0 0 0;
}

.cp-hero {
    padding: 16px 0 20px 0;
}

.cp-badge {
    display: inline-block;
    background: var(--mb-olive, #53ae00);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.cp-headline {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    color: #1a1a2e;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}

.cp-intro {
    font-size: 0.98rem;
    color: #444;
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 520px;
}

.cp-cta-btn {
    display: inline-block;
    background: var(--mb-olive, #53ae00);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.cp-cta-btn:hover {
    background: var(--mb-olive-dark, #469300);
    color: #fff;
}
.cp-cta-btn-dark {
    background: #1a1a2e;
}
.cp-cta-btn-dark:hover {
    background: #12121f;
}

.cp-video-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #2b2b33;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.cp-video-thumb video {
    width: 100%;
    display: block;
}

.cp-section {
    padding: 26px 0;
}

.cp-section-heading {
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    color: #1a1a2e;
    margin: 0 0 8px 0;
}
.cp-section-heading .accent {
    color: var(--mb-olive, #53ae00);
}
.cp-section-sub {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin: 0 0 22px 0;
}

/* Numbered vertical timeline */
.cp-timeline {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    padding-left: 56px;
}
.cp-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: var(--mb-olive-bg, #e8f5e0);
}
.cp-timeline-item {
    position: relative;
    padding-bottom: 28px;
}
.cp-timeline-item:last-child {
    padding-bottom: 0;
}
.cp-timeline-num {
    position: absolute;
    left: -56px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--mb-olive, #53ae00);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-timeline-item h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 6px 0 6px 0;
}
.cp-timeline-item p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.cp-why {
    max-width: 720px;
    margin: 0 auto 20px auto;
    text-align: center;
}
.cp-why h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
}
.cp-why p {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.6;
}

.cp-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 0 22px 0;
}
.cp-stat {
    flex: 1 1 240px;
    max-width: 300px;
    background: var(--mb-olive-bg, #f0f2e8);
    border-radius: 8px;
    padding: 22px 20px;
    text-align: center;
}
.cp-stat-num {
    font-size: 2rem;
    font-weight: 800;
    color: var(--mb-olive, #53ae00);
    display: block;
}
.cp-stat-label {
    font-size: 0.82rem;
    color: #444;
    margin-top: 4px;
}

.cp-callout {
    max-width: 900px;
    margin: 0 auto 20px auto;
    background: var(--mb-olive-bg, #f0f2e8);
    border-left: 4px solid var(--mb-olive, #53ae00);
    border-radius: 4px;
    padding: 24px 28px;
}
.cp-callout h4 {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: #1a1a2e;
    margin: 0 0 8px 0;
}
.cp-callout p {
    font-size: 0.92rem;
    color: #333;
    line-height: 1.6;
    margin: 0;
}

.cp-final-cta {
    text-align: center;
    padding: 0 0 8px 0;
}
.cp-final-cta p {
    color: #555;
    margin-bottom: 14px;
}
.cp-final-cta .cp-cta-btn {
    margin: 0 8px 10px 8px;
}

.cp-pagination {
    background: #1a1a2e;
    color: #fff;
    padding: 22px 0;
}
.cp-pagination-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}
.cp-pagination-progress {
    grid-column: 2;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}
.cp-pagination-prev,
.cp-pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.cp-pagination-prev {
    grid-column: 1;
    justify-self: start;
}
.cp-pagination-next {
    grid-column: 3;
    justify-self: end;
}
.cp-pagination-prev:hover,
.cp-pagination-next:hover {
    background: var(--mb-olive, #53ae00);
    border-color: var(--mb-olive, #53ae00);
    color: #fff;
}
.cp-pagination-prev-label,
.cp-pagination-next-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.65;
}
.cp-pagination-prev-title,
.cp-pagination-next-title {
    font-size: 0.9rem;
    font-weight: 700;
}
.cp-pagination-prev .fa,
.cp-pagination-next .fa {
    font-size: 0.85rem;
}

@media (max-width: 575px) {
    .cp-pagination-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .cp-pagination-prev, .cp-pagination-next { grid-column: 1; justify-self: center; }
    .cp-pagination-prev-title, .cp-pagination-next-title { display: none; }
}

/* Legacy class kept so any not-yet-migrated page (using the old flat markup)
   still renders reasonably instead of breaking. */
.cp-pagination .cp-page-label {
    display: block;
    font-size: 0.68rem;
    opacity: 0.6;
    text-transform: uppercase;
}
.cp-pagination > .container > a {
    color: #fff;
    text-decoration: none;
    display: block;
    text-align: right;
}

@media (max-width: 767px) {
    .cp-headline { font-size: 1.5rem; }
    .cp-timeline { padding-left: 48px; }
    .cp-timeline-num { left: -48px; width: 34px; height: 34px; font-size: 0.85rem; }
}

/* Plain legal-document typography (Privacy Policy / Terms and Conditions).
   BodyText for these pages comes from the legacy _ContentItems template, which
   wraps itself in .pageheader/.content divs — style those directly so no
   markup changes are needed if the DB content is ever edited again. */
.legal-content {
    padding: 28px 0 50px 0;
}
.legal-title {
    font-size: 1.9rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 20px 0;
}
.legal-content .pageheader {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 16px 0;
}
.legal-content .content p {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.7;
    margin: 0 0 16px 0;
}
.legal-content .content strong {
    color: #1a1a2e;
}
.legal-content .content a {
    color: var(--mb-olive, #53ae00);
}