/* ============================================================
   Schola website — custom overrides on top of the Cross theme
   ============================================================ */

/* --- Announcement bar (super-admin toggled, sits above the header) --- */
.schola-announce {
    background: #047857;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 9px 12px;
    line-height: 1.4;
}
.schola-announce .container { padding: 0 15px; }
.schola-announce-text { opacity: .96; }
.schola-announce-link {
    color: #fff !important;
    font-weight: 700;
    margin-left: 10px;
    white-space: nowrap;
    text-decoration: underline;
}
.schola-announce-link:hover { color: #d1fae5 !important; }
.schola-announce-link i { text-decoration: none; }

/* --- Header ---------------------------------------------------------
   The header (top bar + middle contact block + menuzord nav) is rendered
   as the original Cross theme / schola.cm. The only addition is a logo in
   the MOBILE nav bar so visitors can always tap back to home. */
.mobile-nav-brand { display: none; }
@media (max-width: 767px) {
    /* Show the nav logo on mobile only (desktop keeps the header-middle logo) */
    .mobile-nav-brand { display: block !important; float: left; margin: 6px 10px 6px 15px; }
    .mobile-nav-brand img { height: 34px; width: auto; }
    /* Keep the Get Started button beside the logo, left of the hamburger */
    .header-nav .menuzord > .pull-right { margin-right: 4px; }
    .header-nav .menuzord > .pull-right .btn { margin: 8px 0 !important; padding: 8px 14px; }
}
/* If the logo + Get Started + hamburger can't all fit (very narrow phones),
   drop Get Started and keep the logo so users can still tap back home. */
@media (max-width: 340px) {
    .header-nav .menuzord > .pull-right { display: none !important; }
}

/* --- Modern helpers used by the redesigned pages ------------------- */
.section-lead { max-width: 720px; margin: 0 auto 40px; }

.stat-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 28px 20px;
    text-align: center;
    height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,.08); }
.stat-card .stat-value { font-size: 40px; font-weight: 700; line-height: 1; }
.stat-card .stat-label { color: #6b7280; font-size: 14px; margin-top: 8px; text-transform: uppercase; letter-spacing: .04em; }

.feature-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    padding: 30px 26px;
    height: 100%;
    min-height: 232px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
/* Equalize card rows so BS3 floats don't stagger */
@media (min-width: 768px) {
    .row-equal { display: flex; flex-wrap: wrap; }
    .row-equal > [class*="col-"] { display: flex; }
    .row-equal > [class*="col-"] > * { width: 100%; }
}
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.feature-card .feature-ico {
    width: 62px; height: 62px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff; margin-bottom: 18px;
}
.feature-card h4 { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.feature-card p { color: #6b7280; margin: 0; font-size: 14.5px; line-height: 1.6; }

.step-badge {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; color: #fff;
}

/* --- Service cards (image + title + text, equal heights) ----------- */
.service-card {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.service-thumb { width: 100%; aspect-ratio: 16 / 10; background: #eef0f3; overflow: hidden; }
@supports not (aspect-ratio: 16 / 10) { .service-thumb { height: 180px; } }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-body { padding: 20px 22px; flex: 1 1 auto; display: flex; flex-direction: column; }
.service-body h4 { font-size: 17px; font-weight: 600; color: #101828; }
.service-title-link { color: #101828; }
.service-title-link:hover { color: #10b981; }
.service-body p { color: #6b7280; margin: 0 0 14px; font-size: 14px; line-height: 1.6; flex: 1 1 auto; }
.service-thumb { display: block; }
.service-readmore {
    align-self: flex-start;
    font-size: 13.5px; font-weight: 600; color: #10b981;
    text-decoration: none;
}
.service-readmore i { transition: transform .2s ease; margin-left: 3px; }
.service-readmore:hover { color: #0e9f6e; }
.service-readmore:hover i { transform: translateX(4px); }

/* --- Blog cards (homepage "latest news") --------------------------- */
.blog-card {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #eef0f3; border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.blog-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; background: #eef0f3; overflow: hidden; }
@supports not (aspect-ratio: 16 / 10) { .blog-thumb { height: 190px; } }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-date {
    position: absolute; left: 14px; bottom: 14px;
    background: #10b981; color: #fff; border-radius: 8px;
    padding: 7px 11px; text-align: center; line-height: 1;
    font-weight: 700; font-size: 16px;
    box-shadow: 0 6px 14px rgba(16,185,129,.35);
}
.blog-date small { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; margin-top: 2px; }
.blog-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.blog-meta { font-size: 12px; color: #98a2b3; margin-bottom: 8px; }
.blog-meta span { margin-right: 12px; white-space: nowrap; }
.blog-meta i { margin-right: 4px; color: #10b981; }
.blog-title { font-size: 16px; font-weight: 600; margin: 0 0 8px; line-height: 1.35; }
.blog-title a { color: #101828; }
.blog-title a:hover { color: #10b981; }
.blog-body p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 14px; flex: 1 1 auto; }

/* CMS body (service / content-block detail pages) */
.cms-body { font-size: 15.5px; line-height: 1.85; }
.cms-body p { margin: 0 0 16px; }
.cms-body ul, .cms-body ol { margin: 0 0 16px 20px; }
.cms-body li { margin-bottom: 8px; }
.cms-body h1, .cms-body h2, .cms-body h3, .cms-body h4 { margin: 24px 0 12px; color: #101828; }
.cms-body img { max-width: 100%; height: auto; border-radius: 10px; }

.rounded-img { border-radius: 16px; overflow: hidden; }
.rounded-img img { width: 100%; height: 100%; object-fit: cover; }

/* Prevent distortion on fixed-height theme images */
img[style*="height: 350px"], img[style*="height:350px"],
img[style*="height: 300px"], img[style*="height:300px"],
img[style*="height: 230px"], img[style*="height: 200px"],
.team-thumb img, .latest-posts .post-thumb img { object-fit: cover; }

.pointer-none { pointer-events: none; }
.soft-shadow { box-shadow: 0 18px 40px rgba(16,24,40,.10); }

/* --- Team cards (names/roles always visible, aspect-ratio preserved) --- */
/* Row/col that fits the whole core team (<= 6) on one line on large screens.
   --team-cols is set inline from the member count. */
.team-row { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -12px; }
.team-col { display: flex; width: 50%; padding: 0 12px; margin-bottom: 24px; }
@media (min-width: 576px) { .team-col { width: 33.333%; } }
@media (min-width: 992px) { .team-col { width: calc(100% / var(--team-cols, 4)); } }

.team-card {
    width: 100%;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(16,24,40,.10); }
.team-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;      /* consistent square keeps the grid tidy */
    background: #eef0f3;
}
/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    .team-photo { height: 0; padding-bottom: 100%; }
    .team-photo img { position: absolute; top: 0; left: 0; }
}
.team-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* never stretch/distort */
    object-position: center 20%; /* bias toward faces so heads aren't cropped */
    display: block;
}
/* Brand-coloured initials shown when a member has no photo (or it fails to load) */
.team-initials {
    position: absolute; inset: 0; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 700; letter-spacing: 1px;
    color: #10b981; background: #eafaf3;
}
.team-card-body { padding: 16px 10px 18px; text-align: center; }
/* Names stay on ONE line (overridden smaller than theme default) */
.team-name {
    margin: 0 0 3px; font-weight: 600; color: #101828; text-transform: none;
    font-size: 13.5px; letter-spacing: 0; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.team-role { display: block; font-size: 12.5px; color: #6b7280; line-height: 1.4; }
/* The Cross theme hides .team-social (opacity:0, position:absolute) for its
   hover-reveal effect. Override so the icons sit in normal flow, below the
   role, always visible — plain icons, NO background, all on one line. */
.team-social {
    list-style: none; padding: 0; margin: 14px 0 2px;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
    width: auto !important;
    background: none !important;   /* kill the theme's green bar */
    text-align: center;
    white-space: nowrap;          /* keep all icons on one line */
    line-height: 1;
}
.team-social li { display: inline-block; float: none; margin: 0 7px; background: none !important; }
.team-social a,
.team-social a i {
    display: inline-block;
    background: none !important;
    border: 0 !important;
    width: auto; height: auto; border-radius: 0;
    color: #667085 !important;    /* override the theme's white glyphs */
    font-size: 16px;
    transition: color .2s ease, transform .2s ease;
}
.team-social a:hover,
.team-social a:hover i { color: #10b981 !important; transform: translateY(-2px); }

/* --- Testimonial / review cards ------------------------------------ */
.review-card {
    position: relative;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    padding: 30px 26px 26px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,24,40,.10); }
.review-quote { position: absolute; top: 22px; right: 24px; font-size: 30px; color: #e6f4ef; }
.review-stars { color: #f5b638; font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.review-text { color: #475467; font-size: 15px; line-height: 1.7; margin: 0 0 22px; flex: 1 1 auto; }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-author img {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; flex: 0 0 52px; background: #eef0f3;
}
.review-author-meta h6 { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: #101828; }
.review-author-meta span { font-size: 13px; color: #6b7280; }

/* Large, high-visibility prev / next pager */
.review-pager {
    display: flex; align-items: center; justify-content: center;
    gap: 18px; margin-top: 24px;
}
.review-pager-btn {
    display: inline-flex; align-items: center; gap: 8px;
    min-width: 140px; justify-content: center;
    padding: 12px 26px; border-radius: 30px;
    background: #10b981; color: #fff !important;
    font-size: 15px; font-weight: 600; text-decoration: none;
    box-shadow: 0 8px 18px rgba(16,185,129,.28);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.review-pager-btn:hover { background: #0e9f6e; transform: translateY(-2px); box-shadow: 0 12px 24px rgba(16,185,129,.34); }
.review-pager-btn.disabled {
    background: #eef0f3; color: #98a2b3 !important;
    box-shadow: none; cursor: default; pointer-events: none;
}
.review-pager-btn i { font-size: 18px; }
.review-pager-info { font-size: 15px; font-weight: 600; color: #475467; min-width: 54px; text-align: center; }
@media (max-width: 480px) {
    .review-pager-btn { min-width: 0; padding: 11px 20px; }
}

/* --- FAQ: search + category filter + accordion --------------------- */
.faq-toolbar { margin-bottom: 26px; }
.faq-search { position: relative; max-width: 560px; margin: 0 auto 18px; }
.faq-search i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #98a2b3; }
.faq-search input {
    width: 100%; height: 50px; padding: 0 18px 0 44px;
    border: 1px solid #e4e7ec; border-radius: 30px;
    font-size: 15px; outline: none; background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-search input:focus { border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.faq-pills { text-align: center; }
.faq-pill {
    display: inline-block; margin: 4px; padding: 7px 16px;
    border: 1px solid #e4e7ec; border-radius: 30px;
    background: #fff; color: #475467; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all .2s ease;
}
.faq-pill:hover { border-color: #10b981; color: #10b981; }
.faq-pill.active { background: #10b981; border-color: #10b981; color: #fff; }

.faq-item {
    border: 1px solid #eef0f3; border-radius: 12px;
    margin-bottom: 12px; background: #fff; overflow: hidden;
    transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item.open { border-color: #cdeee1; box-shadow: 0 10px 26px rgba(16,24,40,.06); }
.faq-q {
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 18px 22px; display: flex; align-items: center; gap: 14px;
    font-size: 15.5px; font-weight: 600; color: #101828; cursor: pointer; outline: none;
}
.faq-q-text { flex: 1 1 auto; }
.faq-cat-badge {
    flex: 0 0 auto; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: #10b981; background: #eafaf3;
    padding: 3px 10px; border-radius: 20px;
}
.faq-chevron { flex: 0 0 auto; color: #98a2b3; transition: transform .25s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a-inner { padding: 0 22px 20px; color: #475467; font-size: 14.5px; line-height: 1.7; }
.faq-empty { padding: 30px 0; font-size: 15px; }
@media (max-width: 575px) {
    .faq-cat-badge { display: none; }
}

/* ============================================================
   Footer: wider layout + Schola Apps column
   ============================================================ */
/* Widen the footer content beyond the default ~1170px container
   (fuller screen use) while keeping side gutters — not edge-to-edge. */
#footer .container {
    width: 92%;
    max-width: 1560px;
}

/* Keep the top widget row on a single line on desktop. Flex avoids the
   float-height wrapping that pushed the last widget onto a second row. */
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
}
.footer-widgets > [class*="col-"] {
    float: none;
}

/* Schola Apps: two side-by-side lists so ~12 apps stay compact and fill the
   widget width evenly (theme's .list-border fights CSS multi-column, so we
   split the collection into two real lists instead). */
.footer-apps-cols {
    display: flex;
    gap: 22px;
}
.footer-apps-cols > ul {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}
@media (max-width: 991px) {
    .footer-apps-cols { flex-direction: column; gap: 0; }
}

.footer-apps .footer-app { color: inherit; }
.footer-apps .footer-app.disabled { color: #7c7f8a; cursor: default; }

/* Badges reuse Bootstrap's .badge pill, recoloured, so they read as
   distinct chips next to the app name. */
.footer-apps .footer-app-badge {
    margin-left: 6px;
    padding: 2px 7px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.footer-app-badge.badge-new { background: #38D39F; color: #06101c; }
.footer-app-badge.badge-soon { background: #3a3d4a; color: #b8bcc6; }

/* ============================================================
   Home page v2 — modern hero, modules, steps, outcomes
   Brand accent #38D39F, deep navy #0b1f3a, muted #6b7280
   ============================================================ */

/* ---- Hero ---- */
.hero-v2 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 78% -8%, rgba(56,211,159,.22), transparent 60%),
        radial-gradient(760px 460px at 8% 108%, rgba(37,99,235,.20), transparent 55%),
        linear-gradient(160deg, #0b1f3a 0%, #0a1830 55%, #081324 100%);
    color: #fff;
    padding: 92px 0 96px;
}
.hero-v2::before {  /* faint grid texture */
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(circle at 60% 40%, #000 30%, transparent 78%);
    pointer-events: none;
}
.hero-v2 .container { position: relative; z-index: 2; }
.hero-v2 .hero-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(56,211,159,.14); border: 1px solid rgba(56,211,159,.34);
    color: #9ff0cf; font-size: 12.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
}
.hero-v2 h1 { color: #fff; font-size: 48px; font-weight: 700; line-height: 1.1; margin: 20px 0 16px; letter-spacing: -.5px; }
.hero-v2 h1 .hl { color: #38D39F; }
.hero-v2 .hero-lead { color: #cdd7e6; font-size: 18px; line-height: 1.7; max-width: 560px; }
.hero-v2 .hero-actions { margin: 28px 0 14px; }
.hero-v2 .hero-actions .btn { border-radius: 10px; }
.hero-v2 .btn-ghost {
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.34);
}
.hero-v2 .btn-ghost:hover { background: rgba(255,255,255,.10); color: #fff; }
.hero-v2 .hero-nocard { font-size: 13px; color: #9fb0c6; }
.hero-v2 .hero-nocard i { color: #38D39F; margin-right: 5px; }
.hero-v2 .hero-rating { margin-top: 22px; font-size: 13.5px; color: #cdd7e6; }
.hero-v2 .hero-rating .stars { color: #ffc93c; letter-spacing: 2px; margin-right: 8px; }

/* Hero illustration + floating chips */
.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 60px rgba(2,8,20,.5)); }
.hero-chip {
    position: absolute; z-index: 3;
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: #0b1f3a;
    padding: 9px 13px; border-radius: 12px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 14px 34px rgba(2,8,20,.32);
}
.hero-chip i { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.hero-chip.chip-green i { background: #10b981; }
.hero-chip.chip-blue i { background: #2563eb; }
.hero-chip-tl { top: 12%; left: -14px; }
.hero-chip-br { bottom: 12%; right: -8px; }
@media (max-width: 991px) {
    .hero-v2 { padding: 70px 0 72px; text-align: center; }
    .hero-v2 .hero-lead { margin-left: auto; margin-right: auto; }
    .hero-art { margin-top: 44px; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) { .hero-v2 h1 { font-size: 33px; } .hero-chip { display: none; } }

/* ---- Trust strip ---- */
.trust-strip { background: #fff; border-bottom: 1px solid #eef0f3; }
.trust-strip .trust-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 26px; padding: 20px 0; text-align: center;
}
.trust-strip .stars { color: #ffc93c; letter-spacing: 2px; font-size: 15px; }
.trust-strip .trust-title { color: #101828; font-weight: 600; font-size: 15px; }
.trust-strip .trust-platforms { color: #6b7280; font-size: 13.5px; }
.trust-strip .trust-platforms i { color: #10b981; margin: 0 4px 0 10px; }

/* ---- Module grid (SVG icons) ---- */
.module-card {
    background: #fff; border: 1px solid #eef0f3; border-radius: 16px;
    padding: 26px 22px; height: 100%;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.module-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(16,24,40,.10); border-color: #d7f5e8; }
.module-ico {
    width: 52px; height: 52px; border-radius: 13px; margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(56,211,159,.16), rgba(37,99,235,.12));
    color: #0e9f6e;
}
.module-ico svg { width: 26px; height: 26px; }
.module-card h4 { font-size: 16.5px; font-weight: 600; color: #101828; margin: 0 0 7px; }
.module-card p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0; }

/* ---- How it works (steps) ---- */
.steps-wrap { position: relative; }
@media (min-width: 768px) {
    .steps-wrap::before {   /* connecting line behind the tiles */
        content: ""; position: absolute; top: 50px; left: 16%; right: 16%;
        border-top: 2px dashed #d7deea; z-index: 0;
    }
}
.step-tile { position: relative; z-index: 1; text-align: center; padding: 0 14px; }
.step-art {
    width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid #eef0f3;
    box-shadow: 0 12px 30px rgba(16,24,40,.08);
    color: #10b981; position: relative;
}
.step-art svg { width: 46px; height: 46px; }
.step-num {
    position: absolute; top: -10px; right: -10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: #38D39F; color: #06231a; font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 3px solid #f6f8fb;
}
.step-tile h4 { font-size: 18px; font-weight: 600; color: #101828; margin: 0 0 8px; }
.step-tile p { color: #6b7280; font-size: 14.5px; line-height: 1.65; max-width: 300px; margin: 0 auto; }

/* ---- Outcomes band ---- */
.outcomes-band {
    background:
        radial-gradient(700px 340px at 88% 0%, rgba(56,211,159,.16), transparent 60%),
        linear-gradient(160deg, #0b1f3a, #081324);
    color: #fff;
}
.outcome-item { text-align: center; padding: 14px 12px; }
.outcome-ico {
    width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(56,211,159,.14); border: 1px solid rgba(56,211,159,.3);
    color: #38D39F;
}
.outcome-ico svg { width: 28px; height: 28px; }
.outcome-item h4 { color: #fff; font-size: 17px; font-weight: 600; margin: 0 0 7px; }
.outcome-item p { color: #aebbcd; font-size: 14px; line-height: 1.6; margin: 0; }