/* =============================================================================
   City Union Trust - Modern Banking Design System (drop-in overrides)
   Loaded LAST so it wins the cascade over the legacy template.
   ============================================================================= */

:root {
    /* Brand */
    --cc-brand-50:  #f0f7ff;
    --cc-brand-100: #dbecff;
    --cc-brand-500: #2f82ff;
    --cc-brand-600: #1862ed;
    --cc-brand-700: #1450c2;
    --cc-brand-900: #163d7b;

    /* Deep teal/green like the reference's stat band */
    --cc-night-900: #0c2422;
    --cc-night-800: #103632;
    --cc-night-700: #1a4a44;

    /* Ink (text + neutrals) */
    --cc-ink-50:  #f8f8f6;     /* warm off-white background */
    --cc-ink-100: #efefe9;
    --cc-ink-200: #e2e2dc;
    --cc-ink-300: #c9c9c1;
    --cc-ink-500: #6f6f66;
    --cc-ink-700: #2c2c28;
    --cc-ink-900: #111110;

    /* Pastel category card tints */
    --cc-tint-mint:   #cdebd2;
    --cc-tint-lilac:  #e6dbfa;
    --cc-tint-pink:   #f7c6cf;
    --cc-tint-blue:   #cfe3f7;
    --cc-tint-cream:  #efe7d7;
    --cc-tint-lemon:  #ecf18d;
    --cc-tint-peach:  #f6d7be;

    --cc-radius-sm: 10px;
    --cc-radius:    18px;
    --cc-radius-lg: 28px;

    --cc-shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
    --cc-shadow-lift: 0 14px 40px rgba(15,23,42,.14);
    --cc-shadow-glow: 0 30px 80px -20px rgba(15,23,42,.25);

    /* Responsive container widths (driven by viewport) */
    --cc-container-pad: 24px;
    --cc-container-max: 1240px;
}

/* Larger displays - let the layout breathe */
@media (min-width: 1440px) {
    :root {
        --cc-container-max: 1360px;
        --cc-container-pad: 32px;
    }
}
@media (min-width: 1680px) {
    :root {
        --cc-container-max: 1480px;
        --cc-container-pad: 40px;
    }
}
@media (min-width: 1920px) {
    :root {
        --cc-container-max: 1600px;
        --cc-container-pad: 48px;
    }
}

/* ----- Base typography -------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--cc-ink-700);
    background: var(--cc-ink-50) !important;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.sec-title h2,
.big-title h2,
.cc-display {
    font-family: 'Manrope', 'Inter', sans-serif !important;
    letter-spacing: -0.025em;
    color: var(--cc-ink-900);
    font-weight: 800;
}

/* Keyboard focus */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--cc-ink-900);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----- Buttons (universal pill style like the reference) ---------------- */
.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1;
    border: 1px solid transparent;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease, color .15s ease;
    cursor: pointer;
    text-decoration: none !important;
}
.cc-btn-dark { background: var(--cc-ink-900); color: #fff !important; }
.cc-btn-dark:hover { background: var(--cc-ink-700); transform: translateY(-1px); }
.cc-btn-light { background: #fff; color: var(--cc-ink-900) !important; border-color: var(--cc-ink-200); }
.cc-btn-light:hover { background: var(--cc-ink-100); }
.cc-btn-brand { background: var(--cc-brand-600); color: #fff !important; }
.cc-btn-brand:hover { background: var(--cc-brand-700); transform: translateY(-1px); }
.cc-btn-ghost { background: transparent; color: var(--cc-ink-900) !important; }
.cc-btn-ghost:hover { background: rgba(0,0,0,.05); }
.cc-btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.cc-btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.cc-btn .arrow { font-size: 1em; transition: transform .15s ease; }
.cc-btn:hover .arrow { transform: translateX(3px); }

/* Override legacy template buttons in-place */
.btn-one {
    border-radius: 999px !important;
    background: var(--cc-ink-900) !important;
    border: none !important;
    padding: 14px 28px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.btn-one:hover { background: var(--cc-ink-700) !important; transform: translateY(-1px); }
.btn-one .txt { color: #fff !important; }

/* ----- Section spacing & containers ------------------------------------- */
.cc-section { padding: 88px 0; position: relative; }
@media (max-width: 768px) { .cc-section { padding: 56px 0; } }
.cc-container {
    max-width: var(--cc-container-max);
    margin: 0 auto;
    padding: 0 var(--cc-container-pad);
}
.cc-container--narrow { max-width: 1080px; }
.cc-container--wide   { max-width: 1760px; }
.cc-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: 100%;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cc-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 16px;
}
/* Centered headers use auto-margins to center themselves */
.cc-offerings__header .cc-eyebrow,
.cc-how__header .cc-eyebrow,
.cc-testimonials__header .cc-eyebrow,
.cc-trust .cc-eyebrow { margin-left: auto; margin-right: auto; }
.cc-eyebrow.on-dark { color: rgba(255,255,255,.6); }

/* ===== HEADER (top utility + sticky nav) ================================= */
.main-header-style1-top {
    background: var(--cc-ink-900) !important;
    border-bottom: none;
}
.main-header-style1-top .outer-box { padding: 10px 0; }
.main-header-style1-top__left .nearest-branch a,
.main-header-style1-top__right .header-menu-style1 a {
    color: rgba(255,255,255,.78) !important;
    font-weight: 500;
    font-size: 0.85rem;
}
.main-header-style1-top__left .nearest-branch .las {
    color: #fff;
    margin-right: 6px;
    opacity: 0.7;
}

.main-menu.main-menu-style2 {
    background: rgba(248,248,246,.92) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--cc-ink-100);
}
.main-menu__list > li > a {
    font-weight: 600 !important;
    color: var(--cc-ink-700) !important;
    font-size: 0.95rem !important;
    letter-spacing: 0 !important;
}
.main-menu__list > li > a:hover { color: var(--cc-ink-900) !important; }
.main-menu__list > li > a.btn.btn-danger {
    background: var(--cc-ink-900) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    color: #fff !important;
    box-shadow: none !important;
}
.main-menu__list > li > a.btn.btn-danger:hover {
    background: var(--cc-ink-700) !important;
    transform: translateY(-1px);
}
.main-menu .dropdown ul {
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow-lift);
    border: 1px solid var(--cc-ink-100);
    padding: 8px;
    background: #fff;
}
.main-menu .dropdown ul li a {
    border-radius: 10px;
    padding: 10px 14px !important;
    color: var(--cc-ink-700) !important;
    font-weight: 500 !important;
}
.main-menu .dropdown ul li a:hover {
    background: var(--cc-ink-50);
    color: var(--cc-ink-900) !important;
}

/* ===== HERO ============================================================= */
.cc-hero {
    position: relative;
    background: var(--cc-ink-50);
    padding: 40px 0 24px;
}
.cc-hero__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
    background: #fff;
    border-radius: var(--cc-radius-lg);
    overflow: hidden;
    box-shadow: var(--cc-shadow-soft);
}
@media (max-width: 992px) {
    .cc-hero__inner { grid-template-columns: 1fr; }
}
.cc-hero__copy { padding: 64px 56px; }
@media (max-width: 768px) {
    .cc-hero__copy { padding: 40px 24px; }
}
.cc-hero__media {
    position: relative;
    min-height: 460px;
    background-size: cover;
    background-position: center;
}
.cc-hero__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.15));
}
.cc-hero__pill-tabs {
    display: flex;
    width: max-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--cc-ink-100);
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.cc-hero__pill {
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-ink-500);
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
.cc-hero__pill.is-active {
    background: var(--cc-ink-900);
    color: #fff;
}
.cc-hero__pill:not(.is-active):hover { color: var(--cc-ink-900); }
.cc-hero__title {
    font-size: clamp(2.5rem, 4.6vw, 3.75rem);
    line-height: 1.05;
    margin: 0 0 20px;
    max-width: 16ch;
}
.cc-hero__lead {
    font-size: 1.05rem;
    color: var(--cc-ink-500);
    line-height: 1.6;
    max-width: 36rem;
    margin: 0 0 32px;
}
.cc-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-hero__trust {
    margin-top: 36px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--cc-ink-500);
    font-size: 0.85rem;
}
.cc-hero__trust-faces {
    display: flex;
}
.cc-hero__trust-face {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cc-tint-mint), var(--cc-tint-blue));
    border: 2px solid #fff;
    margin-left: -10px;
    box-shadow: 0 0 0 1px var(--cc-ink-100);
}
.cc-hero__trust-face:first-child { margin-left: 0; }
.cc-hero__trust-face:nth-child(2) { background: linear-gradient(135deg, var(--cc-tint-lilac), var(--cc-tint-pink)); }
.cc-hero__trust-face:nth-child(3) { background: linear-gradient(135deg, var(--cc-tint-peach), var(--cc-tint-lemon)); }
.cc-hero__trust-face:nth-child(4) { background: linear-gradient(135deg, var(--cc-brand-100), var(--cc-brand-500)); }

/* ===== STATS BAND ====================================================== */
.cc-stats {
    background: var(--cc-night-900);
    color: #fff;
    padding: 80px 0;
    border-radius: var(--cc-radius-lg);
    margin: 0 24px;
}
.cc-stats__title {
    text-align: center;
    color: #fff !important;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 56px;
}
.cc-stats__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 960px;
    margin: 0 auto;
}
@media (max-width: 768px) { .cc-stats__grid { grid-template-columns: 1fr; gap: 40px; } }
.cc-stat {
    text-align: center;
}
.cc-stat__number {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}
.cc-stat__label {
    color: rgba(255,255,255,.65);
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 22ch;
    margin: 0 auto;
}

/* ===== OFFERINGS GRID ================================================== */
.cc-offerings {
    background: #fff;
    border-radius: var(--cc-radius-lg);
    padding: 88px 56px;
    margin: 0 24px;
    box-shadow: var(--cc-shadow-soft);
}
@media (max-width: 768px) { .cc-offerings { padding: 56px 24px; } }
.cc-offerings__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.cc-offerings__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 14px;
    line-height: 1.1;
}
.cc-offerings__lead {
    color: var(--cc-ink-500);
    font-size: 1.05rem;
    line-height: 1.6;
}
.cc-offerings__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 992px) { .cc-offerings__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cc-offerings__grid { grid-template-columns: 1fr; } }
.cc-offer {
    border-radius: var(--cc-radius);
    padding: 32px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--cc-ink-900);
    text-decoration: none !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .08);
}
.cc-offer:hover {
    transform: translateY(-4px);
    box-shadow: var(--cc-shadow-lift);
    color: var(--cc-ink-900);
    border-color: rgba(15, 23, 42, .14);
}
.cc-offer__icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 56px;
    font-size: 1.8rem;
    line-height: 1;
}
.cc-offer__title {
    font-family: 'Manrope', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.cc-offer__brief {
    color: rgba(0,0,0,0.65);
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 20px;
    flex: 1;
}
.cc-offer__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cc-ink-900);
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
    align-self: flex-start;
}
.cc-offer:hover .cc-offer__cta { background: var(--cc-ink-700); }

.cc-offer--mint   { background: var(--cc-tint-mint); }
.cc-offer--lilac  { background: var(--cc-tint-lilac); }
.cc-offer--pink   { background: var(--cc-tint-pink); }
.cc-offer--blue   { background: var(--cc-tint-blue); }
.cc-offer--cream  { background: var(--cc-tint-cream); }
.cc-offer--lemon  { background: var(--cc-tint-lemon); }

/* ===== ALTERNATING FEATURE BLOCKS ====================================== */
.cc-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
    padding: 88px 0;
}
@media (max-width: 992px) {
    .cc-feature { grid-template-columns: 1fr; gap: 40px; padding: 56px 0; }
    .cc-feature--reverse .cc-feature__media { order: -1; }
}
.cc-feature--reverse .cc-feature__media { order: -1; }
.cc-feature__media {
    border-radius: var(--cc-radius);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--cc-ink-100);
}
.cc-feature__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.cc-feature__title {
    font-size: clamp(1.8rem, 3.6vw, 2.75rem);
    line-height: 1.1;
    margin: 0 0 18px;
}
.cc-feature__lead {
    color: var(--cc-ink-500);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 32rem;
}

/* ===== TRUST BAND (logos / dark CTA) ==================================== */
.cc-trust {
    background: var(--cc-ink-50);
    padding: 72px 0;
    text-align: center;
}
.cc-trust__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: 32px;
    margin-top: 32px;
    opacity: 0.55;
}
.cc-trust__logo {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--cc-ink-700);
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

/* ===== APP / FINAL CTA ================================================== */
.cc-cta {
    background: var(--cc-ink-900);
    color: #fff;
    border-radius: var(--cc-radius-lg);
    padding: 80px 64px;
    margin: 0 24px 80px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 992px) {
    .cc-cta { grid-template-columns: 1fr; padding: 56px 24px; text-align: left; }
}
.cc-cta::before {
    content: '';
    position: absolute;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.05), transparent 70%);
    right: -120px; top: -120px;
}
.cc-cta__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: #fff !important;
    line-height: 1.05;
    margin: 0 0 18px;
}
.cc-cta__lead {
    color: rgba(255,255,255,.75);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 32rem;
}
.cc-cta__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-cta .cc-btn-light { background: #fff; color: var(--cc-ink-900) !important; }
.cc-cta__visual {
    background: rgba(255,255,255,.05);
    border-radius: var(--cc-radius);
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* =============================================================================
   FOOTER v2 — light theme
   ============================================================================= */
.cc-footer {
    background: var(--cc-ink-50);
    color: var(--cc-ink-700);
    border-top: 1px solid var(--cc-ink-100);
    padding: 64px 0 28px;
    position: relative;
}
@media (min-width: 1440px) { .cc-footer { padding: 88px 0 32px; } }
@media (max-width: 768px)  { .cc-footer { padding: 48px 0 24px; } }

/* Subtle brand-accent gradient line at the very top of the footer */
.cc-footer::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(20, 99, 58, .22) 20%,
        rgba(75, 39, 133, .22) 50%,
        rgba(22, 61, 123, .22) 80%,
        transparent 100%);
}

.cc-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--cc-ink-100);
}
@media (min-width: 1440px) { .cc-footer__top { gap: 64px; padding-bottom: 64px; } }
@media (max-width: 1100px) { .cc-footer__top { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 600px)  { .cc-footer__top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; } }

/* Brand column */
.cc-footer__brand { max-width: 38rem; }
.cc-footer__logo {
    display: inline-block;
    margin-bottom: 18px;
}
.cc-footer__logo img { height: 38px; width: auto; }
.cc-footer__about {
    color: var(--cc-ink-500);
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0 0 22px;
    max-width: 36rem;
}

.cc-footer__feature {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--cc-ink-100);
    border-radius: 14px;
    box-shadow: var(--cc-shadow-soft);
    margin-bottom: 24px;
    max-width: 28rem;
}
.cc-footer__feature-title {
    font-weight: 700;
    color: var(--cc-ink-900);
    font-size: 0.92rem;
    line-height: 1.2;
}
.cc-footer__feature-sub {
    font-size: 0.78rem;
    color: var(--cc-ink-500);
    margin-top: 2px;
}

/* Social pills */
.cc-footer__social {
    display: flex;
    gap: 10px;
}
.cc-footer__social a {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--cc-ink-700);
    border: 1px solid var(--cc-ink-100);
    transition: color .15s ease, background .15s ease, transform .15s ease, border-color .15s ease;
}
.cc-footer__social a:hover {
    background: var(--cc-ink-900);
    color: #fff;
    border-color: var(--cc-ink-900);
    transform: translateY(-2px);
}

/* Link columns */
.cc-footer__col { min-width: 0; }
.cc-footer__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--cc-ink-900);
    margin: 0 0 18px;
    letter-spacing: -0.005em;
}
.cc-footer__heading .cc-icon { color: var(--cc-brand-600); }

.cc-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-footer__links li { margin: 0; }
.cc-footer__links a {
    color: var(--cc-ink-700);
    text-decoration: none;
    font-size: 0.92rem;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color .15s ease, transform .15s ease;
}
.cc-footer__links a::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cc-ink-200);
    flex-shrink: 0;
    transition: background .15s ease, transform .15s ease;
}
.cc-footer__links a:hover {
    color: var(--cc-ink-900);
    transform: translateX(2px);
}
.cc-footer__links a:hover::before {
    background: var(--cc-brand-600);
    transform: scale(1.4);
}

/* Contact column */
.cc-footer__contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cc-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.cc-footer__contact-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: #fff;
    color: var(--cc-ink-900);
    border: 1px solid var(--cc-ink-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cc-footer__contact h6 {
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cc-ink-500);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin: 0 0 2px;
}
.cc-footer__contact p {
    color: var(--cc-ink-900);
    font-size: 0.94rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}
.cc-footer__contact p a {
    color: var(--cc-ink-900);
    text-decoration: none;
}
.cc-footer__contact p a:hover { color: var(--cc-brand-700); }
.cc-footer__link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cc-brand-700) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* Bottom row */
.cc-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 24px;
}
.cc-footer__copy {
    margin: 0;
    color: var(--cc-ink-500);
    font-size: 0.84rem;
}
.cc-footer__legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.cc-footer__legal a {
    color: var(--cc-ink-500);
    text-decoration: none;
    font-size: 0.84rem;
    transition: color .15s ease;
}
.cc-footer__legal a:hover { color: var(--cc-ink-900); }
.cc-footer__top-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: #fff;
    color: var(--cc-ink-900) !important;
    border: 1px solid var(--cc-ink-200);
    border-radius: 999px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.84rem;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.cc-footer__top-btn:hover {
    background: var(--cc-ink-900);
    color: #fff !important;
    border-color: var(--cc-ink-900);
    transform: translateY(-1px);
}

/* ===== Inner-page polish (about.php / page.php) ========================= */
.blog-details-area { background: var(--cc-ink-50); padding: 64px 0; }
.blog-details-text-1 { color: var(--cc-ink-700); line-height: 1.7; font-size: 1.02rem; }
.blog-details-text-1 h1,
.blog-details-text-1 h2,
.blog-details-text-1 h3 { margin-top: 32px; margin-bottom: 14px; }
.thm-sidebar-box .single-sidebar-box {
    background: #fff;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-ink-100);
    box-shadow: var(--cc-shadow-soft);
    padding: 24px !important;
}
.sidebar-categories-box li a {
    border-radius: 10px;
    padding: 10px 12px !important;
    display: block;
    color: var(--cc-ink-700) !important;
    transition: background .15s ease, color .15s ease;
    font-weight: 500;
}
.sidebar-categories-box li a:hover {
    background: var(--cc-ink-50);
    color: var(--cc-ink-900) !important;
}
.sidebar-banner-box {
    background: var(--cc-ink-900) !important;
    border-radius: var(--cc-radius) !important;
    padding: 28px !important;
}

/* ===== Apply form (account-reg.php) ===================================== */
.applying-process-area { padding: 88px 0 56px; background: var(--cc-ink-50); }
.applying-process-single-step-box {
    background: var(--cc-ink-900) !important;
    color: #fff !important;
    font-weight: 800;
    border-radius: 14px !important;
    box-shadow: none !important;
}
.apply-form-area { padding: 0 0 88px; background: var(--cc-ink-50); }
.apply-form-box {
    border-radius: var(--cc-radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--cc-shadow-lift);
}
.apply-form-box__content {
    background: #fff;
    padding: 56px 48px !important;
}
@media (max-width: 768px) {
    .apply-form-box__content { padding: 36px 24px !important; }
}
.default-form2 .input-box input,
.default-form2 .input-box select,
.default-form2 .input-box textarea {
    border-radius: 12px !important;
    border: 1px solid var(--cc-ink-200) !important;
    background: #fff !important;
    font-family: inherit !important;
    height: 50px !important;
    padding-left: 44px !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.default-form2 .input-box input:focus,
.default-form2 .input-box select:focus,
.default-form2 .input-box textarea:focus {
    border-color: var(--cc-ink-900) !important;
    box-shadow: 0 0 0 4px rgba(0,0,0,.06) !important;
    outline: none !important;
}
.default-form2 .input-box .icon i { color: var(--cc-ink-500); }

/* Hide a few legacy template bits we are replacing on the home page */
.cc-hide-legacy .service-request-area,
.cc-hide-legacy .individual-corporate-banking-area,
.cc-hide-legacy .main-slider { display: none !important; }

/* Utility */
.cc-pad-x { padding-left: 24px; padding-right: 24px; }
.cc-mt-0 { margin-top: 0 !important; }
.cc-mb-0 { margin-bottom: 0 !important; }

/* =============================================================================
   v2 UPGRADE: icon system, mega-menu nav, large-screen layout, new sections.
   Everything below is additive and overrides earlier rules where needed.
   ============================================================================= */

/* ----- Icon base ------------------------------------------------------- */
.cc-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
}
.cc-icon--inline { vertical-align: -3px; margin-right: 6px; }

/* Pretty icon "chip" used in nav, cards, lists */
.cc-icon-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--cc-ink-100);
    color: var(--cc-ink-900);
    flex-shrink: 0;
}
.cc-icon-chip--sm  { width: 36px; height: 36px; border-radius: 10px; }
.cc-icon-chip--lg  { width: 56px; height: 56px; border-radius: 16px; }
.cc-icon-chip--xl  { width: 72px; height: 72px; border-radius: 20px; }
.cc-icon-chip--mint   { background: var(--cc-tint-mint);  color: #14463a; }
.cc-icon-chip--lilac  { background: var(--cc-tint-lilac); color: #4b2785; }
.cc-icon-chip--pink   { background: var(--cc-tint-pink);  color: #842041; }
.cc-icon-chip--blue   { background: var(--cc-tint-blue);  color: #163d7b; }
.cc-icon-chip--cream  { background: var(--cc-tint-cream); color: #5d3a13; }
.cc-icon-chip--lemon  { background: var(--cc-tint-lemon); color: #423d12; }
.cc-icon-chip--peach  { background: var(--cc-tint-peach); color: #6b3611; }
.cc-icon-chip--ink    { background: var(--cc-ink-900);   color: #fff; }
.cc-icon-chip--brand  { background: var(--cc-brand-100); color: var(--cc-brand-700); }

/* =============================================================================
   v2 NAV - replaces previous header overrides
   ============================================================================= */

/* Hide the legacy template chrome on every page that opts in */
.cc-hide-legacy .main-header,
.cc-hide-legacy .stricky-header { display: none !important; }

/* Skip link */
.cc-skip {
    position: absolute; left: -9999px; top: -9999px;
    background: var(--cc-ink-900); color: #fff;
    padding: 10px 16px; border-radius: 8px;
    z-index: 10000; font-weight: 600;
}
.cc-skip:focus { left: 16px; top: 16px; outline: 2px solid #fff; outline-offset: 2px; }

/* Top utility bar */
.cc-topbar {
    background: var(--cc-ink-900);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.cc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 10px 0;
    font-size: 0.83rem;
}
.cc-topbar__left, .cc-topbar__right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.cc-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.7);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
    font-weight: 500;
}
.cc-topbar__link:hover { color: #fff; background: rgba(255,255,255,.08); }
.cc-topbar__link .cc-icon { color: rgba(255,255,255,.85); }
.cc-topbar__sep { color: rgba(255,255,255,.18); margin: 0 4px; }
@media (max-width: 992px) {
    .cc-topbar__left { display: none; }
    .cc-topbar__right { justify-content: flex-end; width: 100%; }
}

/* Main navbar */
.cc-navbar {
    background: rgba(248,248,246,.92);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--cc-ink-100);
    position: sticky;
    top: 0;
    z-index: 80;
}
.cc-navbar__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 80px;
}
@media (min-width: 1440px) {
    .cc-navbar__inner { height: 88px; gap: 48px; }
}
.cc-navbar__logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.cc-navbar__logo img { height: 36px; width: auto; display: block; }
@media (min-width: 1440px) { .cc-navbar__logo img { height: 42px; } }

.cc-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
@media (max-width: 1024px) { .cc-nav { display: none; } }

.cc-nav__item { position: relative; }

/* Invisible hover-bridge between the nav link and the mega panel.
   Keeps the parent :hover active while the cursor traverses the 12px
   visual gap, so the menu doesn't vanish mid-click. */
.cc-nav__item[data-menu]::after {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: 18px;
    /* No background; sits in the gap below the link. The bridge IS the
       hover mechanism, so it must remain pointer-events: auto. */
}
.cc-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--cc-ink-700);
    font-weight: 600;
    font-size: 0.93rem;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
    line-height: 1;
}
.cc-nav__link:hover,
.cc-nav__item.is-open > .cc-nav__link {
    background: rgba(0,0,0,.05);
    color: var(--cc-ink-900);
}
.cc-nav__link .cc-icon { color: var(--cc-ink-500); transition: color .15s ease, transform .15s ease; }
.cc-nav__link:hover .cc-icon { color: var(--cc-ink-900); }
.cc-nav__link[aria-haspopup="true"] .cc-icon:last-child { margin-left: 2px; }
.cc-nav__item.is-open .cc-nav__link[aria-haspopup="true"] .cc-icon:last-child { transform: rotate(180deg); }

/* Right side actions */
.cc-navbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}
.cc-navbar__icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--cc-ink-200);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cc-ink-700);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    cursor: pointer;
    text-decoration: none;
}
.cc-navbar__icon-btn:hover {
    background: var(--cc-ink-900); color: #fff; border-color: var(--cc-ink-900);
}
.cc-navbar__mobile-toggle {
    display: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--cc-ink-900);
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
@media (max-width: 1024px) {
    .cc-navbar__mobile-toggle { display: inline-flex; }
    .cc-navbar__actions .cc-btn-text { display: none; }
}

/* Mega menu */
.cc-mega {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: max-content;
    max-width: 880px;
    background: #fff;
    border: 1px solid var(--cc-ink-100);
    border-radius: 24px;
    box-shadow: var(--cc-shadow-glow);
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 90;
}
/* Full-width hover bridge spanning the entire mega panel, extending
   upward over the gap to the trigger link. Catches diagonal cursor
   travel from the nav link toward any column in the panel. */
.cc-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.cc-nav__item.is-open > .cc-mega,
.cc-nav__item:hover > .cc-mega {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.cc-mega__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    min-width: 720px;
}
.cc-mega--2col .cc-mega__grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    min-width: 540px;
}
.cc-mega--1col .cc-mega__grid {
    grid-template-columns: 1fr;
    min-width: 280px;
}
.cc-mega__item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 14px;
    text-decoration: none !important;
    color: var(--cc-ink-900) !important;
    transition: background .15s ease, transform .15s ease;
}
.cc-mega__item:hover {
    background: var(--cc-ink-50);
    transform: translateY(-1px);
}
.cc-mega__item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-mega__item-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cc-ink-900);
    line-height: 1.25;
}
.cc-mega__item-desc {
    color: var(--cc-ink-500);
    font-size: 0.82rem;
    line-height: 1.45;
}
.cc-mega__footer {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--cc-ink-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--cc-ink-500);
}

/* Hide mega menu on small screens (mobile nav handles it) */
@media (max-width: 1024px) {
    .cc-mega { display: none; }
}

/* Mobile menu drawer */
.cc-mobile-drawer {
    position: fixed;
    inset: 0;
    background: rgba(17,17,16,.55);
    backdrop-filter: blur(4px);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.cc-mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.cc-mobile-drawer__panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 88vw;
    max-width: 380px;
    background: #fff;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.cc-mobile-drawer.is-open .cc-mobile-drawer__panel { transform: translateX(0); }
.cc-mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--cc-ink-100);
}
.cc-mobile-drawer__body {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cc-mobile-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    color: var(--cc-ink-900) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1rem;
}
.cc-mobile-drawer__link:hover { background: var(--cc-ink-50); }
.cc-mobile-drawer__footer {
    padding: 20px 24px;
    border-top: 1px solid var(--cc-ink-100);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

/* =============================================================================
   v2 HERO - icon chips, side card, larger layout
   ============================================================================= */
.cc-hero {
    padding: 32px 0 48px;
    background:
        radial-gradient(60% 80% at 15% 0%, rgba(207,227,247,.5) 0%, transparent 60%),
        radial-gradient(50% 70% at 100% 10%, rgba(230,219,250,.5) 0%, transparent 65%),
        var(--cc-ink-50);
}
.cc-hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 40px;
    border-radius: 32px;
}
@media (min-width: 1440px) {
    .cc-hero__inner { grid-template-columns: 1.15fr 1fr; gap: 56px; }
    .cc-hero__copy { padding: 80px 72px; }
    .cc-hero__title { font-size: clamp(3rem, 3.9vw, 4.25rem); max-width: 14ch; }
    .cc-hero__media { min-height: 620px; }
}
@media (min-width: 1920px) {
    .cc-hero__inner { grid-template-columns: 1.2fr 1fr; }
    .cc-hero__copy { padding: 96px 88px; }
    .cc-hero__title { font-size: 4.5rem; max-width: 14ch; }
    .cc-hero__media { min-height: 720px; }
}

.cc-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--cc-ink-100);
}
.cc-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--cc-ink-200);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cc-ink-700);
}
.cc-hero__badge .cc-icon { color: var(--cc-brand-600); }

/* Floating cards on hero image */
.cc-hero__media { overflow: hidden; }
.cc-hero__card {
    position: absolute;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 16px 20px;
    box-shadow: var(--cc-shadow-glow);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}
.cc-hero__card--tl { top: 24px; left: 24px; }
.cc-hero__card--br { bottom: 24px; right: 24px; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 220px; }
.cc-hero__card-num {
    font-family: 'Manrope', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--cc-ink-900);
    line-height: 1;
}
.cc-hero__card-label {
    font-size: 0.78rem;
    color: var(--cc-ink-500);
    line-height: 1.3;
}
.cc-hero__card-trend {
    color: #137256;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =============================================================================
   v2 TRUST STRIP (small icons row directly under hero)
   ============================================================================= */
.cc-trust-strip {
    padding: 28px 0;
    background: transparent;
}
.cc-trust-strip__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: stretch;
}
@media (max-width: 768px) { .cc-trust-strip__row { grid-template-columns: repeat(2, 1fr); } }
.cc-trust-strip__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cc-ink-100);
    border-radius: 16px;
}
.cc-trust-strip__title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--cc-ink-900);
    line-height: 1.2;
}
.cc-trust-strip__desc {
    font-size: 0.78rem;
    color: var(--cc-ink-500);
    line-height: 1.4;
    margin-top: 2px;
}

/* =============================================================================
   v2 STATS BAND - icons next to numbers, wider on xl
   ============================================================================= */
.cc-stats {
    padding: 96px 32px;
}
@media (min-width: 1440px) { .cc-stats { padding: 120px 56px; } }
.cc-stats__grid { max-width: 1100px; gap: 48px; }
@media (min-width: 1440px) { .cc-stats__grid { max-width: 1280px; gap: 64px; } }
.cc-stat__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(255,255,255,.1);
}

/* =============================================================================
   v2 OFFERINGS - real SVG icons, denser grid on xl
   ============================================================================= */
.cc-offerings { padding: 96px 56px; }
@media (min-width: 1440px) {
    .cc-offerings { padding: 112px 80px; }
    .cc-offerings__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
@media (min-width: 1920px) {
    .cc-offerings__grid { grid-template-columns: repeat(4, 1fr); }
}
.cc-offer__icon {
    background: rgba(255,255,255,.55);
    margin-bottom: 32px;
    color: var(--cc-ink-900);
    font-size: 0;
}
.cc-offer__icon .cc-icon { width: 28px; height: 28px; }
.cc-offer__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}
.cc-offer__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.6);
    color: var(--cc-ink-700);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
}

/* =============================================================================
   v2 HOW IT WORKS (new section)
   ============================================================================= */
.cc-how {
    padding: 96px 0;
    background: var(--cc-ink-50);
}
.cc-how__header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 56px;
}
.cc-how__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 14px;
    line-height: 1.1;
}
.cc-how__lead { color: var(--cc-ink-500); font-size: 1.05rem; line-height: 1.6; }
.cc-how__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
@media (max-width: 992px) { .cc-how__steps { grid-template-columns: 1fr; } }
.cc-how__step {
    background: #fff;
    border-radius: 24px;
    padding: 36px 32px;
    border: 1px solid var(--cc-ink-100);
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cc-how__step:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-lift); }
.cc-how__step-num {
    position: absolute;
    top: 28px; right: 28px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cc-ink-300);
    letter-spacing: 0.1em;
}
.cc-how__step h3 {
    font-size: 1.25rem;
    margin: 24px 0 10px;
    color: var(--cc-ink-900);
}
.cc-how__step p {
    color: var(--cc-ink-500);
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

/* =============================================================================
   v2 FEATURE BLOCKS - icon list, larger sizing
   ============================================================================= */
@media (min-width: 1440px) {
    .cc-feature { gap: 120px; padding: 112px 0; }
}
.cc-feature__list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.cc-feature__list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.cc-feature__list-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--cc-brand-100);
    color: var(--cc-brand-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.cc-feature__list-text {
    color: var(--cc-ink-700);
    line-height: 1.55;
    font-size: 0.98rem;
}
.cc-feature__list-text strong { color: var(--cc-ink-900); }
.cc-feature__media--tint {
    background: linear-gradient(135deg, var(--cc-tint-mint), var(--cc-tint-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}
.cc-feature__media--tint img { max-height: 80%; max-width: 80%; width: auto; height: auto; }

/* Security-themed gradient — deep ink + soft brand glow for the
   "Bank-grade security" feature card. Pairs with locker-facility.png. */
.cc-feature__media--secure {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(122, 167, 255, .35), transparent 60%),
        radial-gradient(80% 60% at 100% 100%, rgba(48, 130, 255, .25), transparent 65%),
        linear-gradient(160deg, #0f1f3d 0%, #1a2a4a 40%, #243a66 100%);
    position: relative;
    overflow: hidden;
}
/* Subtle grid texture to evoke a security/data feel */
.cc-feature__media--secure::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(closest-side, #000 30%, transparent 80%);
    pointer-events: none;
}
.cc-feature__media--secure img {
    max-height: 78%;
    max-width: 72%;
    filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .45))
            drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
    position: relative;
    z-index: 1;
}
.cc-feature__media-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    z-index: 2;
}
.cc-feature__media-badge .cc-icon { color: var(--cc-tint-mint); }

/* "Always on" / live-data treatment for the Bank-from-anywhere card.
   Photo fills the frame; a soft dark overlay grades the top-left so
   the floating badge stays legible without obscuring the imagery. */
.cc-feature__media--always-on {
    position: relative;
    overflow: hidden;
    background: var(--cc-ink-900);
}
.cc-feature__media--always-on img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s ease;
}
.cc-feature__media--always-on:hover img { transform: scale(1.03); }
.cc-feature__media--always-on::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 31, 61, .55) 0%, rgba(15, 31, 61, 0) 45%);
    pointer-events: none;
}
.cc-feature__media--always-on .cc-feature__media-badge {
    background: rgba(15, 23, 42, .55);
    border-color: rgba(255, 255, 255, .22);
}
.cc-feature__media--always-on .cc-feature__media-badge .cc-icon {
    color: var(--cc-tint-lemon);
}
/* Tiny pulsing dot before the badge label for an "is live" cue */
.cc-feature__media--always-on .cc-feature__media-badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .55);
    animation: cc-pulse-dot 1.8s ease-out infinite;
    margin-right: 2px;
}
@keyframes cc-pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .cc-feature__media--always-on .cc-feature__media-badge::before { animation: none; }
    .cc-feature__media--always-on:hover img { transform: none; }
}

/* =============================================================================
   v2 RATES / PRODUCTS TABLE (new section)
   ============================================================================= */
.cc-rates {
    padding: 96px 0;
    background: #fff;
}
.cc-rates__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.cc-rates__title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    margin: 8px 0 0;
    line-height: 1.1;
}
.cc-rates__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 992px) { .cc-rates__grid { grid-template-columns: 1fr; } }
.cc-rate {
    border: 1px solid var(--cc-ink-100);
    border-radius: 20px;
    padding: 28px;
    background: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .15s ease, transform .2s ease, box-shadow .2s ease;
}
.cc-rate:hover {
    border-color: var(--cc-ink-300);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow-soft);
}
.cc-rate--featured {
    border-color: var(--cc-ink-900);
    background: var(--cc-ink-900);
    color: #fff;
}
.cc-rate--featured .cc-rate__name,
.cc-rate--featured .cc-rate__value { color: #fff; }
.cc-rate--featured .cc-rate__desc { color: rgba(255,255,255,.7); }
.cc-rate--featured .cc-rate__feature { color: rgba(255,255,255,.85); }
.cc-rate--featured .cc-rate__feature .cc-icon { color: var(--cc-tint-lemon); }
.cc-rate__badge {
    position: absolute;
    top: 20px; right: 20px;
    background: var(--cc-tint-lemon);
    color: var(--cc-ink-900);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cc-rate__icon-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.cc-rate__name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--cc-ink-900);
    font-size: 1.1rem;
}
.cc-rate__value {
    font-family: 'Manrope', sans-serif;
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--cc-ink-900);
    line-height: 1;
    margin: 4px 0 6px;
    letter-spacing: -0.02em;
}
.cc-rate__value-unit { font-size: 1rem; font-weight: 600; color: var(--cc-ink-500); margin-left: 4px; }
.cc-rate--featured .cc-rate__value-unit { color: rgba(255,255,255,.65); }

/* Benefit headline (replaces price/value display in rate cards) */
.cc-rate__headline {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 14px;
    padding: 14px 16px;
    background: rgba(15, 23, 42, .04);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .06);
}
.cc-rate__headline-eyebrow {
    font-family: 'Manrope', sans-serif;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-ink-700);
}
.cc-rate__headline-text {
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cc-ink-900);
    letter-spacing: -.01em;
}
.cc-rate--featured .cc-rate__headline {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .12);
}
.cc-rate--featured .cc-rate__headline-eyebrow { color: var(--cc-tint-lemon); }
.cc-rate--featured .cc-rate__headline-text { color: #fff; }

.cc-rate__desc { color: var(--cc-ink-500); font-size: 0.88rem; line-height: 1.5; margin-bottom: 20px; }
.cc-rate__features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cc-rate__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cc-ink-700);
    font-size: 0.9rem;
}
.cc-rate__feature .cc-icon { color: #14a36f; }
.cc-rate__cta {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--cc-ink-900);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none !important;
    transition: background .15s ease;
}
.cc-rate__cta:hover { background: var(--cc-ink-700); }
.cc-rate--featured .cc-rate__cta { background: #fff; color: var(--cc-ink-900) !important; }
.cc-rate--featured .cc-rate__cta:hover { background: var(--cc-tint-lemon); }

/* =============================================================================
   v2 APP DOWNLOAD (new section)
   ============================================================================= */
.cc-app {
    padding: 96px 0 0;
    background: var(--cc-ink-50);
}
.cc-app__inner {
    background: linear-gradient(135deg, var(--cc-tint-lilac) 0%, var(--cc-tint-blue) 100%);
    border-radius: 32px;
    padding: 72px 64px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (min-width: 1440px) { .cc-app__inner { padding: 96px 88px; gap: 72px; } }
@media (max-width: 992px)  { .cc-app__inner { grid-template-columns: 1fr; padding: 48px 28px; } }
.cc-app__title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    margin: 0 0 18px;
}
.cc-app__lead {
    color: var(--cc-ink-700);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 32rem;
}
.cc-app__features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}
.cc-app__feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--cc-ink-900);
    font-size: 0.92rem;
}
.cc-app__buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.cc-app__store {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--cc-ink-900);
    color: #fff !important;
    padding: 12px 22px;
    border-radius: 14px;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease;
}
.cc-app__store:hover { background: var(--cc-ink-700); transform: translateY(-1px); }
.cc-app__store-small { font-size: 0.7rem; opacity: 0.7; line-height: 1; }
.cc-app__store-big { font-size: 1.05rem; font-weight: 700; line-height: 1.2; }

.cc-app__mockup {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cc-app__phone {
    width: 260px;
    max-width: 80%;
    aspect-ratio: 9 / 19;
    background: var(--cc-ink-900);
    border-radius: 36px;
    padding: 12px;
    box-shadow: var(--cc-shadow-glow);
    position: relative;
    z-index: 2;
}
.cc-app__phone-screen {
    background: linear-gradient(180deg, var(--cc-night-900), var(--cc-night-800));
    border-radius: 26px;
    height: 100%;
    padding: 24px 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}
.cc-app__phone-balance {
    background: rgba(255,255,255,.06);
    border-radius: 16px;
    padding: 16px;
}
.cc-app__phone-balance-label { font-size: 0.7rem; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.cc-app__phone-balance-amount { font-family: 'Manrope', sans-serif; font-size: 1.5rem; font-weight: 800; }
.cc-app__phone-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cc-app__phone-action {
    background: rgba(255,255,255,.06);
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    font-size: 0.62rem;
    color: rgba(255,255,255,.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.cc-app__phone-tx {
    background: rgba(255,255,255,.04);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
}
.cc-app__phone-tx-name { color: #fff; font-weight: 600; }
.cc-app__phone-tx-amount { margin-left: auto; font-weight: 700; color: var(--cc-tint-mint); }

/* Floating decorative chips behind the phone */
.cc-app__chip-1, .cc-app__chip-2 {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--cc-shadow-glow);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 3;
}
.cc-app__chip-1 { top: 10%; left: 0; }
.cc-app__chip-2 { bottom: 10%; right: 0; }
.cc-app__chip-text { font-size: 0.78rem; font-weight: 700; color: var(--cc-ink-900); line-height: 1.2; }
.cc-app__chip-sub  { font-size: 0.7rem;  color: var(--cc-ink-500); }

/* =============================================================================
   v2 TESTIMONIALS (new section)
   ============================================================================= */
.cc-testimonials {
    padding: 96px 0;
    background: var(--cc-ink-50);
}
.cc-testimonials__header { text-align: center; margin-bottom: 56px; }
.cc-testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 992px) { .cc-testimonials__grid { grid-template-columns: 1fr; } }
.cc-testimonial {
    background: #fff;
    border: 1px solid var(--cc-ink-100);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cc-testimonial:hover { transform: translateY(-4px); box-shadow: var(--cc-shadow-lift); }
.cc-testimonial__stars { color: #f5b400; display: inline-flex; gap: 2px; }
.cc-testimonial__stars .cc-icon { fill: currentColor; stroke-width: 1; }
.cc-testimonial__quote {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cc-ink-900);
    line-height: 1.45;
    margin: 0;
    letter-spacing: -0.01em;
}
.cc-testimonial__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--cc-ink-100);
}
.cc-testimonial__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cc-tint-mint), var(--cc-tint-blue));
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: #14463a;
    font-size: 0.95rem;
}
.cc-testimonial__name { font-weight: 700; color: var(--cc-ink-900); font-size: 0.92rem; line-height: 1.2; }
.cc-testimonial__role { font-size: 0.78rem; color: var(--cc-ink-500); margin-top: 2px; }

/* =============================================================================
   v2 SAFETY: legacy template's old top bar must NOT show under our new nav
   ============================================================================= */
.cc-hide-legacy .main-header-style1-top { display: none !important; }


/* =============================================================================
   v3 OVERRIDES - cinematic hero, compressed layout, container-aligned cards
   These rules win because they appear last.
   ============================================================================= */

/* ----- Compress section spacing globally ------------------------------- */
.cc-section { padding: 56px 0; }
@media (min-width: 1440px) { .cc-section { padding: 64px 0; } }
@media (max-width: 768px)  { .cc-section { padding: 40px 0; } }

/* Tighten the page background to be a touch warmer */
body { background: #f6f6f3 !important; }


/* =============================================================================
   v3 HERO - full-bleed slideshow + overlay + audience-driven crossfade
   ============================================================================= */
.cc-hero3 {
    position: relative;
    overflow: hidden;
    background: #0a1a18;
    color: #fff;
    isolation: isolate;
    min-height: 620px;
    display: flex;
    align-items: stretch;
}
@media (min-width: 1440px) { .cc-hero3 { min-height: 680px; } }
@media (min-width: 1920px) { .cc-hero3 { min-height: 760px; } }
@media (max-width: 768px)  { .cc-hero3 { min-height: 560px; } }

/* Layered slides */
.cc-hero3__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.cc-hero3__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1100ms ease;
    will-change: opacity, transform;
}
.cc-hero3__slide.is-active {
    opacity: 1;
    /* Slow Ken Burns zoom while active */
    animation: cc-kenburns 9s ease forwards;
}
@keyframes cc-kenburns {
    from { transform: scale(1.08); }
    to   { transform: scale(1.02); }
}

/* Multi-stop overlay so left side is dark for legibility but image breathes on the right */
.cc-hero3__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(95deg,
            rgba(10,26,24,.92) 0%,
            rgba(10,26,24,.78) 28%,
            rgba(10,26,24,.45) 55%,
            rgba(10,26,24,.18) 80%,
            rgba(10,26,24,.05) 100%
        ),
        linear-gradient(180deg,
            rgba(10,26,24,.20) 0%,
            transparent 30%,
            transparent 70%,
            rgba(10,26,24,.40) 100%
        );
}

/* Inner content container */
.cc-hero3__inner {
    position: relative;
    z-index: 2;
    padding-top: 56px;
    padding-bottom: 96px;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 640px) 1fr;
    gap: 64px;
    align-items: center;
}
@media (min-width: 1440px) {
    .cc-hero3__inner { grid-template-columns: minmax(0, 720px) 1fr; padding-top: 72px; padding-bottom: 112px; }
}
@media (min-width: 1920px) {
    .cc-hero3__inner { grid-template-columns: minmax(0, 820px) 1fr; padding-top: 88px; padding-bottom: 128px; }
}
@media (max-width: 1024px) {
    .cc-hero3__inner { grid-template-columns: 1fr; gap: 32px; padding-bottom: 80px; }
}

/* Audience pill tabs - glass on dark */
.cc-hero3__tabs {
    display: inline-flex;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 28px;
    width: max-content;
    max-width: 100%;
}
.cc-hero3__tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.75);
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background .2s ease, color .2s ease;
    text-decoration: none !important;
    font-family: inherit;
    line-height: 1;
}
.cc-hero3__tab:hover { color: #fff; }
.cc-hero3__tab.is-active {
    background: #fff;
    color: var(--cc-ink-900);
}

/* Animated text content (cross-fade between audiences) */
.cc-hero3__content {
    position: relative;
    /* Reserve space so layout doesn't jump while fading */
    min-height: 380px;
}
.cc-hero3__slide-text {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s ease;
    pointer-events: none;
}
.cc-hero3__slide-text.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.cc-hero3 .cc-eyebrow { color: rgba(255,255,255,.65); margin-bottom: 14px; }
.cc-hero3 .cc-eyebrow .cc-icon { color: rgba(255,255,255,.85); }

.cc-hero3__title {
    color: #fff;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    font-size: clamp(2.5rem, 4.6vw, 4rem);
    line-height: 1.04;
    margin: 0 0 18px;
    max-width: 17ch;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
@media (min-width: 1920px) {
    .cc-hero3__title { font-size: 4.5rem; max-width: 15ch; }
}
.cc-hero3__lead {
    color: rgba(255,255,255,.82);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 38rem;
    margin: 0 0 28px;
}
.cc-hero3__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cc-hero3 .cc-btn-dark {
    background: #fff;
    color: var(--cc-ink-900) !important;
}
.cc-hero3 .cc-btn-dark:hover { background: var(--cc-tint-lemon); }
.cc-hero3 .cc-btn-ghost {
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(8px);
}
.cc-hero3 .cc-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* Trust badges below CTAs */
.cc-hero3__trust {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.75);
    font-size: 0.82rem;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.cc-hero3__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}
.cc-hero3__trust-item .cc-icon { color: rgba(255,255,255,.92); }
.cc-hero3__trust-sep { color: rgba(255,255,255,.2); }

/* Floating glass cards on the right */
.cc-hero3__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    justify-self: end;
    max-width: 380px;
}
@media (max-width: 1024px) { .cc-hero3__cards { display: none; } }

.cc-hero3__card {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: 22px;
    padding: 20px 22px;
    box-shadow: 0 30px 80px -20px rgba(0,0,0,.45);
    color: #fff;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cc-hero3__card-row { display: flex; align-items: center; gap: 12px; }
.cc-hero3__card .cc-icon-chip {
    background: rgba(255,255,255,.16);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
}
.cc-hero3__card-label {
    font-size: 0.78rem;
    color: rgba(255,255,255,.68);
    line-height: 1.3;
}
.cc-hero3__card-num {
    font-family: 'Manrope', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.cc-hero3__card-trend {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cc-tint-mint);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cc-hero3__card-bars { display: flex; align-items: flex-end; gap: 6px; height: 44px; }
.cc-hero3__card-bar  {
    flex: 1;
    background: rgba(255,255,255,.4);
    border-radius: 3px;
    min-height: 8px;
}
.cc-hero3__card-bar.is-hi { background: var(--cc-tint-lemon); }

/* Slide progress indicator (bottom) */
.cc-hero3__progress {
    position: absolute;
    z-index: 3;
    bottom: 32px;
    left: var(--cc-container-pad);
    display: flex;
    gap: 8px;
    align-items: center;
}
.cc-hero3__progress-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,.55);
    letter-spacing: 0.16em;
    font-weight: 600;
    margin-right: 8px;
}
.cc-hero3__progress-track {
    width: 56px;
    height: 3px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.cc-hero3__progress-fill {
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: left;
    transform: scaleX(0);
}
.cc-hero3__progress-track.is-active .cc-hero3__progress-fill {
    animation: cc-hero3-progress var(--cc-hero3-duration, 6000ms) linear forwards;
}
.cc-hero3__progress-track.is-done .cc-hero3__progress-fill {
    transform: scaleX(1);
}
@keyframes cc-hero3-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Hide the old (v2) hero when v3 is used */
.cc-hero { display: none; }


/* =============================================================================
   v3 OFFERINGS - align to navbar container, no outer side margins
   ============================================================================= */
.cc-offerings {
    margin: 0;                /* was 0 24px */
    padding: 56px 48px;       /* compressed */
    border-radius: 28px;
}
@media (min-width: 1440px) { .cc-offerings { padding: 72px 64px; } }
@media (max-width: 768px)  { .cc-offerings { padding: 40px 24px; } }
.cc-offerings__header { margin-bottom: 36px; }

/* The offerings grid: keep the same icon-rich cards but trim padding */
.cc-offer { padding: 24px; min-height: 240px; }
.cc-offer__icon { margin-bottom: 24px; }


/* =============================================================================
   v3 CTA - align to navbar container, no outer side margins, compressed
   ============================================================================= */
.cc-cta {
    margin: 0;                /* was 0 24px 80px */
    padding: 56px 48px;       /* was 80px 64px */
    border-radius: 28px;
    grid-template-columns: 1.25fr 1fr;
    gap: 40px;
}
@media (min-width: 1440px) { .cc-cta { padding: 72px 64px; gap: 56px; } }
@media (max-width: 992px)  { .cc-cta { padding: 40px 28px; } }
.cc-cta__title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.cc-cta__visual { aspect-ratio: 16 / 10; border-radius: 22px; }


/* =============================================================================
   v3 COMPRESSED SECTION OVERRIDES
   ============================================================================= */
.cc-how { padding: 64px 0; }
.cc-how__header { margin-bottom: 36px; }
.cc-how__step { padding: 28px 24px; }

.cc-feature { padding: 56px 0; gap: 64px; }
@media (min-width: 1440px) { .cc-feature { gap: 88px; padding: 72px 0; } }
@media (max-width: 992px)  { .cc-feature { gap: 32px; padding: 40px 0; } }
.cc-feature__title { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }

.cc-rates { padding: 64px 0; }
.cc-rates__header { margin-bottom: 32px; }
.cc-rate { padding: 24px; }
.cc-rate__value { font-size: 2.25rem; margin: 4px 0 4px; }

.cc-app { padding: 64px 0 0; }
.cc-app__inner { padding: 56px 48px; gap: 40px; }
@media (min-width: 1440px) { .cc-app__inner { padding: 72px 64px; gap: 56px; } }
.cc-app__title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }

.cc-testimonials { padding: 64px 0; }
.cc-testimonials__header { margin-bottom: 36px; }
.cc-testimonial { padding: 24px; }
.cc-testimonial__quote { font-size: 1rem; }

.cc-trust { padding: 48px 0; }
.cc-trust-strip { padding: 16px 0 0; }

/* The "cc-section" wrappers around offerings/cta no longer need extra padding tweaks */
.cc-section.cc-section--tight { padding: 24px 0; }


/* =============================================================================
   v4 CONTENT PAGES - hero, article/prose, sidebar, modern form, stepper
   ============================================================================= */

/* ----- Hide the legacy slider on every page that opts in via cc-hide-legacy */
.cc-hide-legacy .main-slider { display: none !important; }

/* ----- Page hero (clean modern header for inner pages) ----------------- */
.cc-page-hero {
    position: relative;
    background:
        radial-gradient(60% 80% at 12% 100%, rgba(207,227,247,.55) 0%, transparent 60%),
        radial-gradient(50% 70% at 100% 0%, rgba(230,219,250,.45) 0%, transparent 65%),
        var(--cc-ink-50);
    padding: 56px 0 56px;
    border-bottom: 1px solid var(--cc-ink-100);
    overflow: hidden;
    isolation: isolate;
}
@media (min-width: 1440px) { .cc-page-hero { padding: 72px 0 64px; } }
@media (max-width: 768px)  { .cc-page-hero { padding: 36px 0 40px; } }
.cc-page-hero__container { position: relative; z-index: 2; }

/* Cinematic variant: image background + dark scrim + light text */
.cc-page-hero--media {
    background: #0a1a18;
    color: #fff;
    border-bottom: 0;
    padding: 80px 0 88px;
    min-height: 340px;
}
@media (min-width: 1440px) { .cc-page-hero--media { padding: 104px 0 112px; min-height: 420px; } }
@media (max-width: 768px)  { .cc-page-hero--media { padding: 52px 0 60px; min-height: 0; } }

/* Anchor copy block to the left edge of the container */
.cc-page-hero--media .cc-page-hero__copy { max-width: 720px; }

.cc-page-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: right center; /* keep subject in the imagery on the right */
    background-repeat: no-repeat;
}
@media (max-width: 768px) {
    .cc-page-hero__media { background-position: center; filter: brightness(.85); }
}

/* Multi-layer scrim:
   - strong dark band on the LEFT (where copy lives) for legibility
   - softer fade on the right so the imagery still breathes
   - radial spotlight bottom-left for depth
   - subtle vertical anchors at top and bottom */
.cc-page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(120% 90% at 0% 100%,
            rgba(10,26,24,.55) 0%,
            transparent 55%),
        linear-gradient(92deg,
            rgba(10,26,24,.94) 0%,
            rgba(10,26,24,.82) 32%,
            rgba(10,26,24,.50) 60%,
            rgba(10,26,24,.20) 100%),
        linear-gradient(180deg,
            rgba(10,26,24,.30) 0%,
            transparent 22%,
            transparent 70%,
            rgba(10,26,24,.55) 100%);
}

/* Subtle brand-accent gradient line at the bottom edge */
.cc-page-hero--media::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    z-index: 3;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(205, 235, 210, .35) 20%,
        rgba(186, 161, 230, .35) 50%,
        rgba(166, 192, 230, .35) 80%,
        transparent 100%);
}

/* Tighter inner layout: stack content, push chips to bottom-right */
.cc-page-hero--media .cc-page-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
}

/* Vertical brand accent line above the eyebrow */
.cc-page-hero--media .cc-eyebrow {
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    padding: 7px 14px;
    font-size: .72rem;
    letter-spacing: .14em;
    margin-bottom: 18px;
}
.cc-page-hero--media .cc-eyebrow .cc-icon { color: var(--cc-tint-mint); }

.cc-page-hero--media .cc-page-hero__title {
    color: #fff;
    max-width: 22ch;
    font-size: clamp(1.85rem, 3.8vw, 3.2rem);
    line-height: 1.06;
    text-shadow: 0 1px 24px rgba(0,0,0,.25);
}
.cc-page-hero--media .cc-page-hero__lead {
    color: rgba(255,255,255,.82);
    max-width: 44rem;
    font-size: 1.02rem;
    line-height: 1.6;
    text-shadow: 0 1px 18px rgba(0,0,0,.25);
}

.cc-page-hero--media .cc-breadcrumbs ol { margin-bottom: 22px; }
.cc-page-hero--media .cc-breadcrumbs a,
.cc-page-hero--media .cc-breadcrumbs span { color: rgba(255,255,255,.72); }
.cc-page-hero--media .cc-breadcrumbs a:hover { color: #fff; }
.cc-page-hero--media .cc-breadcrumbs span[aria-current] { color: #fff; font-weight: 600; }
.cc-page-hero--media .cc-breadcrumbs .cc-icon { color: rgba(255,255,255,.35); }

/* Chips moved below text, aligned left, tighter pills */
.cc-page-hero--media .cc-page-hero__aside {
    margin-top: 22px;
    gap: 8px;
    justify-content: flex-start;
}
.cc-page-hero--media .cc-page-hero__chip {
    background: rgba(255,255,255,.10);
    color: #fff;
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    padding: 7px 12px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.cc-page-hero--media .cc-page-hero__chip .cc-icon { color: var(--cc-tint-mint); }

.cc-page-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
}
@media (max-width: 768px) { .cc-page-hero__inner { grid-template-columns: 1fr; } }

.cc-breadcrumbs ol {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .82rem;
}
.cc-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.cc-breadcrumbs a {
    color: var(--cc-ink-500);
    text-decoration: none;
    transition: color .15s ease;
}
.cc-breadcrumbs a:hover { color: var(--cc-ink-900); }
.cc-breadcrumbs span[aria-current] { color: var(--cc-ink-900); font-weight: 600; }
.cc-breadcrumbs .cc-icon { color: var(--cc-ink-300); }

.cc-page-hero__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: clamp(1.85rem, 3.6vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--cc-ink-900);
    margin: 0 0 14px;
    max-width: 24ch;
}
.cc-page-hero__lead {
    color: var(--cc-ink-500);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 42rem;
    margin: 0;
}
.cc-page-hero__aside {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.cc-page-hero__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--cc-ink-200);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--cc-ink-700);
}
.cc-page-hero__chip .cc-icon { color: var(--cc-brand-600); }


/* ----- Article / prose layout ----------------------------------------- */
.cc-article {
    padding: 56px 0 72px;
    background: var(--cc-ink-50);
}
@media (min-width: 1440px) { .cc-article { padding: 64px 0 88px; } }

.cc-article__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
    align-items: start;
}
@media (min-width: 1440px) { .cc-article__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }
@media (max-width: 992px)  { .cc-article__grid { grid-template-columns: 1fr; gap: 28px; } }

.cc-article__main {
    background: #fff;
    border-radius: 24px;
    padding: 40px 44px;
    border: 1px solid var(--cc-ink-100);
    box-shadow: var(--cc-shadow-soft);
}
@media (min-width: 1440px) { .cc-article__main { padding: 56px 64px; } }
@media (max-width: 768px)  { .cc-article__main { padding: 28px 24px; border-radius: 18px; } }

.cc-article__hero-img {
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 0 32px;
    display: block;
}
@media (max-width: 768px) { .cc-article__hero-img { border-radius: 12px; margin-bottom: 24px; } }

/* Prose typography for CMS-rendered content */
.cc-prose {
    color: var(--cc-ink-700);
    font-size: 1.02rem;
    line-height: 1.78;
    max-width: 72ch;
}
.cc-prose > :first-child { margin-top: 0; }
.cc-prose > :last-child  { margin-bottom: 0; }
.cc-prose h1, .cc-prose h2, .cc-prose h3, .cc-prose h4, .cc-prose h5 {
    font-family: 'Manrope', sans-serif;
    color: var(--cc-ink-900);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 36px 0 14px;
}
.cc-prose h1 { font-size: 2rem; }
.cc-prose h2 { font-size: 1.6rem; margin-top: 40px; padding-top: 8px; }
.cc-prose h3 { font-size: 1.25rem; }
.cc-prose h4 { font-size: 1.05rem; }
.cc-prose p  { margin: 0 0 18px; }
.cc-prose strong { color: var(--cc-ink-900); font-weight: 700; }
.cc-prose a {
    color: var(--cc-brand-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.cc-prose a:hover { color: var(--cc-brand-900); }
.cc-prose ul, .cc-prose ol {
    padding-left: 1.25em;
    margin: 0 0 18px;
}
.cc-prose ul li::marker { color: var(--cc-brand-500); }
.cc-prose li { margin-bottom: 6px; }
.cc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin: 24px 0;
    display: block;
}
.cc-prose blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    border-left: 4px solid var(--cc-brand-500);
    background: var(--cc-ink-50);
    border-radius: 0 12px 12px 0;
    color: var(--cc-ink-700);
}
.cc-prose blockquote p:last-child { margin-bottom: 0; }
.cc-prose hr {
    border: 0;
    border-top: 1px solid var(--cc-ink-100);
    margin: 32px 0;
}
.cc-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: .95rem;
}
.cc-prose th, .cc-prose td {
    border: 1px solid var(--cc-ink-100);
    padding: 10px 14px;
    text-align: left;
}
.cc-prose th { background: var(--cc-ink-50); color: var(--cc-ink-900); font-weight: 700; }
.cc-prose code {
    background: var(--cc-ink-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}


/* ----- Inline feature grid (used in about.php "Get More From Your Money") */
.cc-feature-grid {
    margin: 40px 0 12px;
    padding-top: 32px;
    border-top: 1px solid var(--cc-ink-100);
}
.cc-feature-grid__header { margin-bottom: 24px; }
.cc-feature-grid__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    margin: 0 0 6px;
    color: var(--cc-ink-900);
}
.cc-feature-grid__lead {
    color: var(--cc-ink-500);
    font-size: .95rem;
    margin: 0;
}
.cc-feature-grid__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) { .cc-feature-grid__items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cc-feature-grid__items { grid-template-columns: 1fr; } }
.cc-feature-grid__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    background: var(--cc-ink-50);
    border-radius: 16px;
    border: 1px solid var(--cc-ink-100);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cc-feature-grid__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--cc-shadow-soft);
    border-color: var(--cc-ink-200);
}
.cc-feature-grid__item h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--cc-ink-900);
    margin: 0;
}

.cc-prose-cta {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--cc-ink-100);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}


/* ----- Sidebar (used in about.php / page.php) ------------------------- */
.cc-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 110px;
}
.cc-side__card {
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--cc-ink-100);
    padding: 22px;
}
.cc-side__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.98rem;
    margin: 0 0 14px;
    color: var(--cc-ink-900);
    font-weight: 700;
}
.cc-side__title .cc-icon-chip {
    width: 32px; height: 32px;
    border-radius: 9px;
}
.cc-side__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cc-side__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--cc-ink-700) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.92rem;
    transition: background .15s ease, color .15s ease;
}
.cc-side__links a::after {
    content: '';
    width: 14px; height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round'><path d='M9 6l6 6-6 6'/></svg>") center / contain no-repeat;
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity .15s ease, transform .15s ease;
}
.cc-side__links a:hover {
    background: var(--cc-ink-50);
    color: var(--cc-ink-900) !important;
}
.cc-side__links a:hover::after { opacity: 1; transform: translateX(2px); }

/* Dark gradient CTA card in sidebar */
.cc-side__cta {
    background: linear-gradient(155deg, var(--cc-night-800) 0%, var(--cc-night-900) 100%);
    color: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.04);
}
.cc-side__cta::before {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
    border-radius: 50%;
    top: -110px; right: -110px;
}
.cc-side__cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 14px;
}
.cc-side__cta-eyebrow .cc-icon { color: rgba(255,255,255,.7); }
.cc-side__cta h3 {
    color: #fff !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
    position: relative;
}
.cc-side__cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.cc-side__cta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.85);
    font-size: .88rem;
}
.cc-side__cta-list .cc-icon { color: var(--cc-tint-mint); flex-shrink: 0; }
.cc-side__cta .cc-btn { position: relative; width: 100%; justify-content: center; }
.cc-side__cta .cc-btn-light { background: #fff; color: var(--cc-ink-900) !important; }

/* =============================================================================
   v4.1 SIDEBAR · "Open an account" primary CTA card
   ============================================================================= */
.cc-side__open {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 18px;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(122, 167, 255, .10), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}
.cc-side__open::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cc-tint-mint), var(--cc-tint-blue), var(--cc-tint-lemon));
    opacity: .8;
}
.cc-side__open-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.cc-side__open-head .cc-icon-chip {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
}
.cc-side__open-head-text { flex: 1; min-width: 0; }
.cc-side__open-eyebrow {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cc-ink-500);
    margin-bottom: 2px;
}
.cc-side__open-title {
    font-family: 'Manrope', sans-serif;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--cc-ink-900);
    margin: 0;
    line-height: 1.15;
    letter-spacing: -.01em;
}
.cc-side__open-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(205, 235, 210, .55);
    color: #1e6e3e;
    font-family: 'Manrope', sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
}
.cc-side__open-pill .cc-icon { color: currentColor; }
.cc-side__open-lead {
    margin: 0 0 14px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--cc-ink-500);
}
.cc-side__open-tiles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}
.cc-side__open-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    background: var(--cc-ink-50);
    border: 1px solid transparent;
    color: var(--cc-ink-900) !important;
    text-decoration: none !important;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cc-side__open-tile-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--cc-ink-700);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.cc-side__open-tile-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.cc-side__open-tile-name {
    font-family: 'Manrope', sans-serif;
    font-size: .92rem;
    font-weight: 700;
    color: var(--cc-ink-900);
}
.cc-side__open-tile-meta {
    font-size: .72rem;
    color: var(--cc-ink-500);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-side__open-tile-arrow {
    flex-shrink: 0;
    color: var(--cc-ink-500);
    transition: transform .18s ease, color .18s ease;
}
.cc-side__open-tile:hover {
    transform: translateY(-1px);
    background: #fff;
    border-color: rgba(15, 23, 42, .10);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
.cc-side__open-tile:hover .cc-side__open-tile-arrow {
    transform: translateX(3px);
    color: var(--cc-ink-900);
}
.cc-side__open-tile:hover .cc-side__open-tile-icon { transform: scale(1.04); }

/* Tile color accents */
.cc-side__open-tile--blue  { background: rgba(207, 227, 247, .35); }
.cc-side__open-tile--blue  .cc-side__open-tile-icon { color: #1862ed; background: rgba(255, 255, 255, .9); }
.cc-side__open-tile--mint  { background: rgba(205, 235, 210, .40); }
.cc-side__open-tile--mint  .cc-side__open-tile-icon { color: #1e6e3e; background: rgba(255, 255, 255, .9); }
.cc-side__open-tile--lemon { background: rgba(255, 240, 184, .45); }
.cc-side__open-tile--lemon .cc-side__open-tile-icon { color: #8a6b00; background: rgba(255, 255, 255, .9); }

.cc-side__open-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(15, 23, 42, .10);
    color: var(--cc-ink-500);
    font-size: .75rem;
    font-weight: 600;
}
.cc-side__open-trust .cc-icon { color: var(--cc-tint-mint); flex-shrink: 0; }
.cc-side__open-trust span { color: var(--cc-ink-700); }


/* =============================================================================
   v4 MODERN STEPPER (account-reg.php)
   ============================================================================= */
.cc-stepper {
    padding: 0 0 32px;
}
.cc-stepper__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px) { .cc-stepper__list { grid-template-columns: 1fr; } }
.cc-stepper__item {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--cc-ink-100);
    border-radius: 16px;
    align-items: center;
}
.cc-stepper__item--active {
    border-color: var(--cc-ink-900);
    box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}
.cc-stepper__num {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--cc-ink-100);
    color: var(--cc-ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.cc-stepper__item--active .cc-stepper__num {
    background: var(--cc-ink-900);
    color: #fff;
}
.cc-stepper__item--done .cc-stepper__num {
    background: #14a36f;
    color: #fff;
}
.cc-stepper__text { line-height: 1.2; }
.cc-stepper__label {
    font-size: 0.72rem;
    color: var(--cc-ink-500);
    letter-spacing: .12em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.cc-stepper__title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    color: var(--cc-ink-900);
    font-size: 0.98rem;
}


/* =============================================================================
   v4 APPLICATION LAYOUT (account-reg.php) - form + sticky summary card
   ============================================================================= */
.cc-apply {
    padding: 48px 0 80px;
    background: var(--cc-ink-50);
}
.cc-apply__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}
@media (min-width: 1440px) { .cc-apply__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 36px; } }
@media (max-width: 992px)  { .cc-apply__grid { grid-template-columns: 1fr; } }

.cc-apply__form {
    background: #fff;
    border-radius: 24px;
    border: 1px solid var(--cc-ink-100);
    box-shadow: var(--cc-shadow-soft);
    padding: 36px 40px;
}
@media (min-width: 1440px) { .cc-apply__form { padding: 48px 56px; } }
@media (max-width: 768px)  { .cc-apply__form { padding: 24px; } }

.cc-apply__form-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--cc-ink-100);
}
.cc-apply__form-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--cc-ink-900);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
.cc-apply__form-sub {
    color: var(--cc-ink-500);
    font-size: 0.92rem;
    margin: 0;
}

.cc-apply__group-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cc-ink-500);
    margin: 28px 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cc-apply__group-title:first-of-type { margin-top: 0; }
.cc-apply__group-title .cc-icon { color: var(--cc-ink-700); }

/* Summary card (right column on apply page) */
.cc-apply__summary {
    background: linear-gradient(155deg, var(--cc-night-800) 0%, var(--cc-night-900) 100%);
    color: #fff;
    border-radius: 24px;
    padding: 32px 28px;
    position: sticky;
    top: 110px;
    overflow: hidden;
}
.cc-apply__summary::before {
    content: '';
    position: absolute;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 65%);
    border-radius: 50%;
    top: -120px; right: -140px;
}
.cc-apply__summary-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 14px;
}
.cc-apply__summary h3 {
    position: relative;
    color: #fff !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}
.cc-apply__summary-lead {
    position: relative;
    color: rgba(255,255,255,.7);
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 24px;
}
.cc-apply__summary-list {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cc-apply__summary-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255,255,255,.85);
    font-size: 0.92rem;
    line-height: 1.45;
}
.cc-apply__summary-list .cc-icon-chip {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,255,255,.08);
    color: var(--cc-tint-mint);
    border: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.cc-apply__summary-help {
    position: relative;
    padding-top: 22px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.65);
    font-size: 0.82rem;
}
.cc-apply__summary-help a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }


/* =============================================================================
   v4 MODERN FORM (used in apply form + future contact forms)
   ============================================================================= */
.cc-form { display: flex; flex-direction: column; gap: 18px; }
.cc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 768px) { .cc-form-grid { grid-template-columns: 1fr; } }

.cc-field { display: flex; flex-direction: column; gap: 6px; }
.cc-field--full { grid-column: 1 / -1; }

.cc-field__label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cc-ink-700);
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cc-field__label .cc-required {
    color: #d04545;
    font-size: 0.95em;
}

.cc-field__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.cc-field__icon {
    position: absolute;
    left: 14px;
    color: var(--cc-ink-500);
    pointer-events: none;
    z-index: 1;
}
.cc-field input[type="text"],
.cc-field input[type="email"],
.cc-field input[type="tel"],
.cc-field input[type="date"],
.cc-field input[type="number"],
.cc-field input[type="url"],
.cc-field input[type="password"],
.cc-field select,
.cc-field textarea {
    width: 100%;
    height: 48px;
    border: 1px solid var(--cc-ink-200);
    background: #fff;
    border-radius: 12px;
    padding: 0 14px 0 44px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--cc-ink-900);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.cc-field textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 14px 14px 44px;
    resize: vertical;
}
.cc-field input::placeholder,
.cc-field textarea::placeholder { color: var(--cc-ink-500); opacity: 1; }
.cc-field input:focus,
.cc-field select:focus,
.cc-field textarea:focus {
    outline: none;
    border-color: var(--cc-ink-900);
    box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.cc-field--noicon input,
.cc-field--noicon select,
.cc-field--noicon textarea { padding-left: 14px; }
.cc-field__help {
    font-size: .78rem;
    color: var(--cc-ink-500);
    line-height: 1.4;
}

/* Style native select indicator */
.cc-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f6f66' stroke-width='1.75'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 40px;
}


/* ----- Drag-and-drop file upload ------------------------------------- */
.cc-dropzone {
    position: relative;
    border: 2px dashed var(--cc-ink-200);
    border-radius: 14px;
    padding: 28px 24px;
    background: var(--cc-ink-50);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    display: block;
}
.cc-dropzone:hover { border-color: var(--cc-ink-900); background: #fff; }
.cc-dropzone:focus-within {
    border-color: var(--cc-ink-900);
    box-shadow: 0 0 0 4px rgba(0,0,0,.05);
    outline: none;
}
.cc-dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.cc-dropzone__icon-wrap {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: #fff;
    color: var(--cc-ink-900);
    margin: 0 auto 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cc-ink-200);
}
.cc-dropzone__title {
    font-weight: 700;
    color: var(--cc-ink-900);
    margin-bottom: 4px;
    font-size: 0.95rem;
}
.cc-dropzone__sub {
    font-size: .8rem;
    color: var(--cc-ink-500);
}
.cc-dropzone__name {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    color: #14633a;
    font-weight: 700;
    font-size: 0.88rem;
}
.cc-dropzone.has-file {
    border-color: #14a36f;
    background: #f0faf5;
}
.cc-dropzone.has-file .cc-dropzone__name { display: inline-flex; }
.cc-dropzone.has-file .cc-dropzone__icon-wrap { background: #14a36f; color: #fff; border-color: #14a36f; }


/* ----- Alerts (success/error) ---------------------------------------- */
.cc-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: .92rem;
    margin-bottom: 24px;
    line-height: 1.55;
}
.cc-alert--success { background: #e8f7ee; color: #14633a; border: 1px solid #b8e2c5; }
.cc-alert--error   { background: #fdebeb; color: #9b1c1c; border: 1px solid #f5c1c1; }
.cc-alert .cc-icon { flex-shrink: 0; margin-top: 2px; }


/* Submit row */
.cc-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--cc-ink-100);
    flex-wrap: wrap;
}
.cc-form-actions__hint {
    color: var(--cc-ink-500);
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cc-form-actions__hint .cc-icon { color: #14a36f; }