:root {
      --blue:        #00548b;
      --blue-dark:   #003d6b;
      --blue-deeper: #002a4d;
      --blue-light:  #e6f0f8;
      --green:       #82C341;
      --green-dark:  #6aa535;
      --gray:        #808285;
      --gray-light:  #DADFE1;
      --teal:        #5AB6B2;
      --white:       #ffffff;
      --text:        #1a1a1a;
      --text-mid:    #444444;
      --bg-soft:     #f7f9fb;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', Arial, sans-serif; color: var(--text); line-height: 1.6; background: #fff; -webkit-font-smoothing: antialiased; }
    sup { font-size: 0.65em; vertical-align: super; }

    .feat-table {
        border-collapse:separate;
        border-spacing: 0 4px
    }

    .feat-table tbody tr {
        vertical-align: top;
    }

    .feat-table tr td:nth-child(odd) {
        width: 100px;
        text-wrap: balance;
    }

    .feat-table tr td:nth-child(even) {
        text-align: right;
        width: 100px;
        text-wrap: balance;
    }

   /* HERO */
    .promo-hero {
    background:
        linear-gradient(
        100deg,
        rgba(0,42,77,0.94) 0%,
        rgba(0,61,107,0.85) 38%,
        rgba(0,61,107,0.40) 65%,
        rgba(0,42,77,0.15) 100%
        ),
        url('/themes/custom/csb/dist/img/hero-coffee.png') center top / cover no-repeat;
    color: #fff;
    padding: 80px 24px 72px;
    position: relative;
    overflow: hidden;
    min-height: 500px;
    display: flex;
    align-items: center;
    }
    .promo-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(130,195,65,.04) 0, rgba(130,195,65,.04) 1px, transparent 1px, transparent 44px),
        repeating-linear-gradient(90deg, rgba(130,195,65,.04) 0, rgba(130,195,65,.04) 1px, transparent 1px, transparent 44px);
    pointer-events: none;
    z-index: 1;
    }
    .promo-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    }

    .promo-hero h1.promo-hero__title {
    font-size: clamp(32px, 5.5vw, 56px);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 14px;
    letter-spacing: -.5px;
    max-width: 600px;
    }
    .promo-hero h1.promo-hero__title .accent { 
        color: var(--green); 
    }
    .promo-hero__subtitle {
    font-size: clamp(15px, 2vw, 19px);
    color: rgba(255,255,255,.82);
    font-weight: 400;
    margin-bottom: 8px;
    max-width: 480px;
    }
    .promo-hero-exp {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin-bottom: 36px;
    }
    .promo-hero__cta {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 32px;
    }
    /* HERO — Single primary CTA */
    .promo-hero__cta a {
    background: var(--green);
    color: #1a1a1a;
    border: none;
    padding: 16px 36px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .15s, transform .1s;
    letter-spacing: -.1px;
    min-height: 44px;
    }

    .promo-hero__cta a:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
    }
    .promo-hero__cta-qualifier {
    width: 100%;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin-top: 10px;
    line-height: 1.5;
    }

    /* Mobile: darken more uniformly so text stays readable regardless of image */
    @media (max-width: 1019px) {
    .promo-hero {
        background:
        linear-gradient(
            180deg,
            rgba(0,42,77,0.92) 0%,
            rgba(0,42,77,0.80) 100%
        ),
        url('hero-bg.jpg') center top / cover no-repeat;
        padding: 56px 20px 52px;
        min-height: auto;
    }
    .promo-hero h1.promo-hero__title { max-width: 100%; }
    .promo-hero p.promo-hero__subtitle { max-width: 100%; }
    }

        /* PRIMARY CTA — CSB BLUE */
    /* =========================================================
    PRIMARY CTA — WHITE ON CSB BLUE
    ========================================================= */
    .btn-solid {
    background: var(--blue);
    color: #ffffff;
    border: none;
    padding: 15px 32px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background .15s, transform .1s;
    }

    .btn-solid:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
    }
    /* =========================================================
    SECONDARY CTA — BLUE ON WHITE
    ========================================================= */

    /* =========================================================
    EXISTING CUSTOMER CALLOUT STRIP
    Placed: Between Hero and Promo Highlights
    ========================================================= */
    .existing-cta-strip {
    background: var(--blue-light);
    border-bottom: 1px solid rgba(0,84,139,0.12);
    padding: 28px 24px;
    text-align: center;
    }

    .existing-cta-strip__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    }

    .existing-cta-strip__text {
    font-size: 16px;
    color: var(--blue-dark);
    font-weight: 500;
    line-height: 1.6;
    margin: 0;
    }

    .existing-cta-strip__link {
    display: inline-block;
    background: var(--blue);
    color: #ffffff;
    padding: 13px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, transform .1s;
    min-height: 44px;
    }

    .existing-cta-strip__link:hover {
        background: var(--blue-dark);
        transform: translateY(-1px);
        text-decoration: none;
        color: #ffffff;
    }

        
    /* =========================================================
    CHECKING — SHARED QUALIFICATIONS BLOCK
    ========================================================= */
    .checking-qualify-block {
    background: var(--bg-soft);
    border: 1.5px solid rgba(0,84,139,0.15);
    border-radius: 16px;
    padding: 32px;
    margin-top: 32px;
    }

    .cq-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 24px;
    }

    .cq-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    }

    @media (min-width: 920px) {
    .cq-columns {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    }

    .cq-col-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0,84,139,0.15);
    }

    .cq-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }

    .cq-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.65;
    }

    .cq-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 3px;
    }

    /* ---------- Outer qualify container: softer + card-like ---------- */
    .checking-qualify-block,
    .sav-qualify-block {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
    border: 1.5px solid rgba(0, 84, 139, 0.14);
    border-radius: 16px;
    padding: 26px 24px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04); /* aligns w/ promo card shadow */
    }

    @media (max-width: 600px) {
    .checking-qualify-block,
    .sav-qualify-block {
        padding: 20px 16px;
    }
    }

    /* ---------- Title: tighten and align to section rhythm ---------- */
    .checking-qualify-block .cq-title,
    .sav-qualify-block .cq-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--blue);
    margin-bottom: 14px;
    letter-spacing: -0.2px;
    }

    /* Optional: slightly reduce visual dominance in the savings block */
    .sav-qualify-block .cq-title {
    margin-bottom: 12px;
    }

    /* ---------- Columns become "soft info cards" (NOT promo cards) ---------- */
    .cq-columns {
    gap: 16px; /* tighter + more modern */
    }

    .cq-col {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 18px 18px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
    }

    /* Make columns feel like your promo system labels (not big headers) */
    .cq-col-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gray);
    padding-bottom: 10px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    line-height: 1.35;
    }

    /* ---------- List items: create scan-friendly "requirement tiles" ---------- */
    .cq-list {
    gap: 10px;
    }

    .cq-list li {
    background: #fafbfc; /* same vibe as .ph-split-row */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 12px 12px;
    gap: 12px;
    }

    /* Subtle hover/focus (informational, not clickable CTA) */
    .cq-list li:hover {
    border-color: rgba(0,84,139,0.14);
    background: #f7f9fb;
    }

    /* ---------- Checkmarks: soften so they don’t feel harsh ---------- */
    .cq-check {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(0, 84, 139, 0.10);
    color: var(--blue);
    border: 1px solid rgba(0, 84, 139, 0.18);
    font-size: 10px;
    font-weight: 900;
    }

    /* ---------- Biggest visual win: promote <strong> as “primary line” ---------- */
    /* Your markup is: <span><strong>Requirement</strong> — clarifier...</span> */
    .cq-list li span strong {
    display: block;           /* turns it into its own line */
    font-weight: 900;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.32;
    }

    /* Secondary line (the rest of the sentence) */
    .cq-list li span {
    color: var(--text-mid);
    font-size: 14.5px;
    line-height: 1.6;
    }

    /* ---------- Savings block: keep consistent, but slightly “new money” serious ---------- */
    .sav-qualify-block .cq-list li {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    }

    /* ---------- Desktop spacing polish ---------- */
    @media (min-width: 920px) {
    .checking-qualify-block {
        padding: 28px 28px;
    }
    .cq-col {
        padding: 20px 20px;
    }
    }



    /* Open Both link */
    .btn-open-both {
    display: block;
    text-align: center;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    margin-top: 12px;
    padding: 6px 0;
    border-top: 1px solid rgba(0,84,139,0.12);
    transition: color .15s;
    }

    .btn-open-both:hover {
    text-decoration: underline;
    }

        /* SECTIONS */
        .section { padding:60px 24px; }
        .sec-inner { max-width:1100px; margin:0 auto; }
        .sec-bg { background:var(--bg-soft); }
        .eyebrow { display:block; font-size:11.5px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--green); margin-bottom:8px; }
        .sec-title { font-size:clamp(26px,3.2vw,38px); font-weight:800; color:var(--blue); line-height:1.2; margin-bottom:12px; letter-spacing:-.3px; }
        .sec-sub { font-size:16px; color:var(--gray); max-width:580px; margin-bottom:44px; line-height:1.65; }

    /* =========================================================
    PROMOTION HIGHLIGHTS
    ========================================================= */

    .promo-highlights {
    background: #fff;
    }

    /* Grid: stacked on mobile, 2-up on desktop */
    .ph-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 10px;
    }

    /* Card base — single consolidated rule */
    .ph-card {
    background: #fff;
    border: 1.5px solid var(--gray-light);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    }

    .ph-card--checking {
    border-color: rgba(0,84,139,0.25);
    }

    /* Labels + numbers */
    .ph-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 8px;
    }

    .ph-amt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    }

    .ph-up {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray);
    }

    .ph-num {
    font-size: 34px;
    font-weight: 900;
    line-height: 1.05;
    color: var(--blue);
    }

    /* Divider */
    .ph-divider {
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 14px 0 12px;
    }

    .ph-subtitle {
    font-size: 13px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
    }

    /* Checking split rows */
    .ph-split {
    display: grid;
    gap: 10px;
    }

    .ph-split-row {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 12px;
    background: #fafbfc;
    }

    .ph-split-left {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    }

    .ph-split-num {
    font-size: 20px;
    font-weight: 900;
    color: var(--green);
    line-height: 1.1;
    }

    .ph-split-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    }

    .ph-split-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.45;
    }

    /* Buttons */
    .btn-ph {
    display: block;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 16px;
    min-height: 44px;
    margin-top: auto;
    }

    .btn-ph--primary {
    background: var(--blue);
    color: #fff;
    }

    .btn-ph--primary:hover {
    background: var(--blue-dark);
    }

    /* Desktop */
    @media (min-width: 920px) {
    .ph-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: stretch;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
    }

    /* CHECKING CARDS */
        .cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
        .pcard { background:#fff; border:2px solid var(--gray-light); border-radius:16px; overflow:hidden; transition:box-shadow .2s,transform .2s; }
        .pcard:hover { box-shadow:0 10px 36px rgba(0,84,139,.12); transform:translateY(-3px); }
        .pcard { background:#fff; border:2px solid var(--gray-light); border-radius:16px; overflow:hidden; transition:box-shadow .2s,transform .2s; }
    .pcard:hover { box-shadow:0 10px 36px rgba(0,84,139,.12); transform:translateY(-3px); }

    .pcard {
    display: flex;
    flex-direction: column;
    }

    .pcard .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    }

    .pcard .btn-card {
    margin-top: auto;
    }

    .pcard.featured { border-color:var(--blue); }
    .pcard.top-pick { border-color:var(--green); }
    .pcard.featured { border-color:var(--blue); }
        .pcard.top-pick { border-color:var(--green); }
        .card-badge { padding:9px 16px; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; text-align:center; }
        .badge-subtle { background:var(--blue-light); color:var(--blue); }
        .badge-blue   { background:var(--blue); color:#fff; }
        .badge-green  { background:var(--green); color:#1a1a1a; }
        .card-body { padding:24px; }
        .card-name { font-size:22px; font-weight:800; color:var(--blue); margin-bottom:4px; }
        .card-tagline { font-size:14px; color:var(--gray); margin-bottom:20px; line-height:1.5; }
        .feat-list { list-style:none; margin-bottom:24px; }
        .feat-list li { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:var(--text-mid); padding:6px 0; border-bottom:1px solid #f0f1f2; }
        .feat-list li:last-child { border-bottom:none; }
        .feat-check { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; flex-shrink:0; margin-top:2px; }
        .fcheck-green { background:var(--green); color:#1a1a1a; }
        .fcheck-gray  { background:var(--gray-light); color:var(--gray); }
        .btn-card { display:block; width:100%; padding:14px; border:none; border-radius:6px; font-size:15px; font-weight:800; cursor:pointer; text-align:center; text-decoration:none; transition:opacity .15s,transform .1s; }
        .btn-card:hover { opacity:.88; transform:translateY(-1px); }
        .btn-card-blue  { background:var(--blue);  color:#fff; }
    /* Normalize card buttons to CSB blue */
    .btn-card-green {
    background: var(--blue);
    color: #ffffff;
    }
        .card-disc { font-size:11px; color:var(--gray); text-align:center; margin-top:9px; line-height:1.5; }

        /* =========================================================
    CHECKING CARDS — DESKTOP DEFAULT
    (This is the baseline layout)
    ========================================================= */
    .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
    }
    /* SAVINGS (Base layout stays the same) */
    /* =========================================================
    SAVINGS — REDESIGNED
    ========================================================= */
    .sav-feature-card {
    background: #fff;
    border: 2px solid #00548b;
    border-radius: 16px;
    padding: 32px;
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    }

    .sav-bonus-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
    }

    .sav-bonus-up {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    .sav-bonus-amt {
    font-size: 38px;
    font-weight: 900;
    color: var(--blue);
    line-height: 1;
    }

    .sav-desc {
    font-size: 15px;
    color: var(--text);
    line-height: 1.65;
    }

    .sav-highlights {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    }

    .sav-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.65;
    }

    .sav-rate-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
    border-bottom: 2px solid rgba(0,84,139,0.25);
    padding-bottom: 2px;
    display: inline-block;
    }

    .sav-rate-link:hover {
    border-color: var(--blue);
    }

    .sav-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
    align-items: flex-start;
    }

    /* Savings qualify block */
    .sav-qualify-block {
    background: var(--bg-soft);
    border: 1.5px solid rgba(0,84,139,0.15);
    border-radius: 16px;
    padding: 32px;
    margin-top: 32px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    }



        /* A BANK WORTH SWITCHING TO */
        .why-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; max-width:900px; margin:40px auto 0; }
        .why-item { text-align:center; }
        
    /* WHY CSB ICONS — image-based */
    .why-icon {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    object-fit: contain;
    }

    @media (min-width: 921px) {
    .why-icon {
        width: 52px;
        height: 52px;
    }
    }


        .why-title { font-size:17px; font-weight:800; color:var(--blue); margin-bottom:10px; line-height:1.3; }
        .why-desc  { font-size:14px; color:var(--text-mid); line-height:1.75; }

        /* QUOTE STRIP */
        .quote-strip { background:var(--blue); padding:56px 24px; text-align:center; }
        .quote-strip blockquote,
    .quote-strip .quote-text { font-size:clamp(18px,2.4vw,24px); font-style:italic; color:rgba(255,255,255,.92); line-height:1.65; font-weight:400; max-width:740px; margin:0 auto; }


        /* FAQ */
        .faq-list  { max-width:760px; margin:0 auto; }
        .faq-item  { background:#fff; border:1.5px solid var(--gray-light); border-radius:10px; margin-bottom:10px; overflow:hidden; }
        .faq-q { padding:18px 22px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:15px; font-weight:700; color:var(--blue); gap:12px; user-select:none; }
        .faq-q:hover { background:var(--blue-light); }
        .faq-toggle { width:28px; height:28px; border-radius:50%; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:300; flex-shrink:0; transition:background .2s,transform .2s; }
        .faq-item.open .faq-toggle { background:var(--blue); color:#fff; transform:rotate(45deg); }
        .faq-a { display:none; padding:0 22px 18px; font-size:14px; color:var(--text-mid); line-height:1.75; }
        .faq-item.open .faq-a { display:block; }

        

        
    /* CONTACT */
        .contact-strip { background:var(--blue); color:#fff; padding:44px 24px; text-align:center; }
        .contact-strip h2 { font-size:26px; font-weight:800; margin-bottom:8px; }
        .contact-strip p  { color:rgba(255,255,255,.78); margin-bottom:30px; font-size:16px; }
        .contact-opts { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
        .copt { background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:18px 26px; text-align:center; min-width:160px; text-decoration:none; color:#fff; transition:background .15s; }
        .copt:hover { background:rgba(255,255,255,.2); }
        .copt-icon { font-size:26px; display:block; margin-bottom:6px; }
        .copt-lbl  { font-size:14px; font-weight:700; }
        .copt-det  { font-size:12px; color:rgba(255,255,255,.65); margin-top:2px; }

        /* FOOTER */
        footer { background:#161616; color:rgba(255,255,255,.65); padding:44px 24px 32px; }
        .footer-inner { max-width:1100px; margin:0 auto; }
        .footer-badges { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
        .f-badge { background:#fff; color:#1a1a1a; font-size:11px; font-weight:800; padding:5px 12px; border-radius:4px; letter-spacing:.4px; }
        .footer-links { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
        .footer-links a { color:rgba(255,255,255,.5); font-size:12px; text-decoration:none; }
        .footer-links a:hover { color:#fff; }
        .footer-legal { font-size:11px; color:rgba(255,255,255,.42); line-height:1.85; }
        .footer-legal strong { color:rgba(255,255,255,.62); }
        .footer-legal p { margin-bottom:10px; }
        .footer-copy { font-size:12px; color:rgba(255,255,255,.3); margin-top:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); }

        /* MODALS */
        .overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; align-items:center; justify-content:center; padding:20px; }
        .overlay.active { display:flex; }
        .modal { background:#fff; border-radius:18px; max-width:580px; width:100%; max-height:90vh; overflow-y:auto; position:relative; animation:modalIn .22s ease; }
        @keyframes modalIn { from{opacity:0;transform:scale(.97) translateY(10px)} to{opacity:1;transform:none} }
        .modal-hd { background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; padding:24px 26px 20px; border-radius:18px 18px 0 0; position:relative; }
        .modal-hd h3 { font-size:19px; font-weight:800; margin-bottom:5px; line-height:1.3; padding-right:38px; }
        .modal-hd p  { font-size:13.5px; color:rgba(255,255,255,.78); padding-right:38px; }
        .modal-x { position:absolute; top:14px; right:14px; width:32px; height:32px; background:rgba(255,255,255,.18); border:none; border-radius:50%; color:#fff; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .modal-x:hover { background:rgba(255,255,255,.3); }
        .modal-bd { padding:22px 26px; }
        .modal-preview { background:var(--blue-light); border:1px solid rgba(0,84,139,.15); border-radius:12px; padding:12px 16px; margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
        .mp-name  { font-size:14px; font-weight:800; color:var(--blue); }
        .mp-req   { font-size:12px; color:var(--gray); margin-top:2px; line-height:1.4; }
        .mp-bonus { font-size:20px; font-weight:900; color:var(--blue); white-space:nowrap; }
        .modal-q  { font-size:16px; font-weight:800; color:var(--text); margin-bottom:6px; }
        .modal-qs { font-size:13.5px; color:var(--gray); margin-bottom:16px; line-height:1.6; }
        .add-box { background:#f5fbef; border:1.5px solid rgba(130,195,65,.35); border-radius:12px; padding:14px 16px; margin-bottom:18px; }
        .add-box-name  { font-size:13px; font-weight:800; color:var(--text); margin-bottom:3px; }
        .add-box-bonus { font-size:22px; font-weight:900; color:var(--blue); }
        .add-box-req   { font-size:12px; color:var(--gray); margin-top:3px; line-height:1.4; }
        .modal-btns { display:flex; flex-direction:column; gap:10px; }
        .btn-myes {
    background: var(--blue);
    color: #ffffff;
    }
    .btn-myes:hover {
    background: var(--blue-dark);
    }
        .btn-mno  { background:#fff; color:var(--blue); border:2px solid var(--blue); padding:12px 22px; border-radius:8px; font-size:13.5px; font-weight:700; cursor:pointer; text-align:center; }
        .btn-mno:hover { background:var(--blue-light); }
        .m-check-cards { display:flex; flex-direction:column; gap:9px; margin-bottom:6px; }
        .m-ccard { border:2px solid var(--gray-light); border-radius:10px; padding:12px 14px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; transition:border-color .15s,background .15s; flex-wrap:wrap; }
        .m-ccard:hover { border-color:var(--blue); background:var(--blue-light); }
        .m-ccard.rec { border-color:var(--green); background:#f5fbef; }
        .mcc-name  { font-size:14px; font-weight:800; color:var(--blue); }
        .mcc-note  { font-size:12px; color:var(--gray); margin-top:2px; }
        .mcc-bonus { font-size:17px; font-weight:900; color:var(--blue); white-space:nowrap; }
        .mcc-tag { font-size:10px; font-weight:800; background:var(--green); color:#1a1a1a; padding:2px 8px; border-radius:10px; text-transform:uppercase; letter-spacing:.5px; display:inline-block; margin-top:3px; }
        .skip-link { text-align:center; margin-top:10px; }
        .skip-link a { font-size:13px; color:var(--gray); text-decoration:underline; cursor:pointer; }
        .confirm-row { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; flex-wrap:wrap; gap:8px; border-bottom:1.5px solid var(--gray-light); }
        .confirm-row-name  { font-size:13px; font-weight:800; color:var(--blue); }
        .confirm-row-type  { font-size:12px; color:var(--gray); }
        .confirm-row-bonus { font-size:17px; font-weight:900; color:var(--blue); }
        .confirm-total-row { background:var(--blue); display:flex; justify-content:space-between; align-items:center; padding:14px 16px; flex-wrap:wrap; gap:8px; }
        .confirm-total-lbl   { font-size:14px; font-weight:800; color:#fff; }
        .confirm-total-bonus { font-size:24px; font-weight:900; color:var(--green); }

    
    /* =========================================================
    ACCESSIBILITY & BRAND POLISH PATCH
    Scope: global (no layout or copy changes)
    Purpose: WCAG-friendly focus, motion, tap targets, legibility
    ========================================================= */

    /* ---------- 1) Keyboard focus (visible, brand-aligned) ---------- */
    :focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
    }

    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible {
    border-radius: 4px;
    }

    /* Remove default focus for mouse users only */
    :focus:not(:focus-visible) {
    outline: none;
    }

    /* ---------- 2) Mobile-first tap targets ---------- */
    button,
    .btn-solid,
    .btn-ghost,
    .btn-card,
    .btn-nav,
    .faq-q {
    min-height: 44px;              /* WCAG-friendly target size */
    }

    /* Ensure inline links remain tappable */
    a {
    padding-top: 2px;
    padding-bottom: 2px;
    }

    /* ---------- 3) Reduced motion (respects user preference) ---------- */
    @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    }

    /* ---------- 4) Text legibility on dark backgrounds ---------- */
    /* Use for small helper text on gradients or dark panels */
    .text-on-dark {
    color: rgba(255,255,255,0.85);
    }

    /* ---------- 5) Slightly improve small-text readability ---------- */
    body {
    line-height: 1.65; /* safer default for mobile */
    }

    /* Legal and helper text */
    small,
    .faq-a,
    .footer-legal {
    line-height: 1.7;
    }
    /* =========================================================
    END ACCESSIBILITY & BRAND POLISH PATCH
    ========================================================= */

    /* =========================================================
    HOW IT WORKS — RESTORE STYLES (Override)
    ========================================================= */
    .how-bg { background: var(--blue-light); }

    .steps-wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
    }

    .steps-wrap::before {
    content: '';
    position: absolute;
    top: 27px;
    left: calc(12.5% + 14px);
    right: calc(12.5% + 14px);
    height: 2px;
    background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
    z-index: 0;
    }

    .step {
    text-align: center;
    position: relative;
    z-index: 1;
    }

    .step-num {
    width: 54px;
    height: 54px;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
    border: 4px solid var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    margin: 0 auto 16px;
    }

    .step-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 6px;
    }

    .step-desc {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.6;
    }
    /* =========================================================
    WHY CSB — DESKTOP LAYOUT (Authoritative)
    ========================================================= */
    @media (min-width: 921px) {
    .why-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }
    }

    /* RESPONSIVE */
        /* WHY CSB — mobile-first base */
    .why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
    }

    .why-item {
    max-width: 480px;
    margin: 0 auto;
    }/* WHY CSB — desktop enhancement */
    @media (min-width: 920px) {
    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }

    .why-item {
        max-width: none;
    }
    /* HOW IT WORKS — mobile-first base */
    .steps-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    }

    .step {
    max-width: 420px;
    margin: 0 auto;
    }

    /* HOW IT WORKS — desktop enhancement */
    @media (min-width: 920px) {
    .steps-wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .step {
        max-width: none;
        margin: 0;
    }
    }
    /* CHECKING CARDS — mobile-first base */
    .cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 480px;
    margin: 0 auto;
    }
    /* CHECKING CARDS — desktop enhancement */
    @media (min-width: 920px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        max-width: 100%;
        margin: 0;
    }
    }

    }@media (max-width:920px) {
        .cards-grid   { grid-template-columns:1fr; max-width:480px; margin:0 auto; }
        .savings-card { grid-template-columns:1fr; }
        .sav-right    { border-left:none; border-top:1px solid rgba(255,255,255,.1); padding:32px 36px; }
        .steps-wrap   { grid-template-columns:repeat(2,1fr); }
        .steps-wrap::before { display:none; }
        .why-grid     { grid-template-columns:1fr; gap:32px; }
        .nav-links    { display:none; }
        .rate-cards   { grid-template-columns:1fr; }
        }
        @media (max-width:640px) {
        .overlay      { padding:0; align-items:flex-end; }
        .modal        { border-radius:20px 20px 0 0; max-height:88vh; width:100%; max-width:100%; animation:modalSlideUp .22s ease; }
        @keyframes modalSlideUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
        .modal-hd     { border-radius:20px 20px 0 0; padding:20px 18px 16px; }
        .modal-hd h3  { font-size:16px; }
        .modal-hd p   { font-size:13px; }
        .modal-bd     { padding:16px 18px 28px; }
        .modal-preview { flex-direction:column; align-items:flex-start; gap:6px; }
        .mp-bonus     { font-size:18px; }
        .m-ccard      { flex-direction:column; align-items:flex-start; gap:6px; }
        .offer-grid   { grid-template-columns:1fr; grid-template-rows:auto; }
        .offer-checking-card { grid-row:auto; }
        }
        @media (max-width:600px) {
        .promo-hero         { padding:44px 16px 40px; }
        .section      { padding:44px 16px; }
        .sav-left, .sav-right { padding:28px 20px; }
        .nav          { padding:0 16px; }
        }
    
    /* =========================================================
    ALREADY A CSB CUSTOMER — SECTION
    ========================================================= */
    .csb-customer {
    background: var(--bg-soft);
    }

    .csb-customer-wrap {
    max-width: 860px;
    margin: 0 auto;
    }

    .csb-customer-intro {
    font-size: 16px;
    color: var(--text-mid);
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 620px;
    }

    /* Desktop-first: 3 columns by default */
    .csb-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    }

    /* Stack only on small screens */
    @media (max-width: 720px) {
    .csb-scenario-grid {
        grid-template-columns: 1fr;
    }
    }

    /* Unified card — same style across all three */
    .csb-scenario-card,
    .csb-scenario-card--eligible,
    .csb-scenario-card--partial,
    .csb-scenario-card--ineligible {
    background: #fff;
    border: 2px solid var(--gray-light);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 12px rgba(0,0,0,.04);
    transition: box-shadow .2s, transform .2s;
    }

    .csb-scenario-card--partial    { border-color: var(--gray-light); }
    .csb-scenario-card--eligible   { border-color: var(--green); }
    .csb-scenario-card--ineligible { border-color: var(--blue); }


    .csb-scenario-card:hover,
    .csb-scenario-card--eligible:hover,
    .csb-scenario-card--partial:hover,
    .csb-scenario-card--ineligible:hover {
    box-shadow: 0 10px 36px rgba(0,84,139,.12);
    transform: translateY(-3px);
    }

    .csb-scenario-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--gray);
    margin-bottom: 10px;
    }

    .csb-scenario-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.3;
    margin-bottom: 16px;
    }

    .csb-scenario-bonus-box {
    background: var(--blue-light);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    }

    .csb-scenario-bonus {
    display: block;
    font-size: 28px;
    font-weight: 900;
    color: var(--green);
    line-height: 1;
    margin-bottom: 3px;
    }

    .csb-scenario-bonus-sub {
    font-size: 12px;
    color: var(--text-mid);
    line-height: 1.5;
    }

    .csb-scenario-desc {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.65;
    flex: 1;
    margin-bottom: 20px;
    }

    .csb-scenario-cta {
    display: block;
    text-align: center;
    background: var(--blue);
    color: #ffffff;
    padding: 13px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    margin-top: auto;
    min-height: 44px;
    border-bottom: none;
    transition: background .15s, transform .1s;
    }

    .csb-scenario-cta:hover {
    background: var(--blue-dark);
    transform: translateY(-1px);
    }

    .csb-customer-note {
    background: #fff;
    border: 1.5px solid var(--gray-light);
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.65;
    max-width: 860px;
    margin: 0 auto;
    }

    .csb-customer-note strong {
    color: var(--blue);
    }


    /* =========================================================
    QUALIFY SECTIONS — PREMIUM / AIRY VARIANT
    Goal: calmer, more premium spacing and readability
    Works with existing markup in Thursday 1041 WIP Landing.html
    ========================================================= */

    /* ---------- Outer container: more breathing room + softer elevation ---------- */
    .checking-qualify-block,
    .sav-qualify-block {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
    border: 1.5px solid rgba(0, 84, 139, 0.12);
    border-radius: 18px;
    padding: 36px 34px;
    margin-top: 34px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.06);
    }

    /* Keep savings block aligned with the feature card width you already use */
    .sav-qualify-block {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    }

    /* Mobile: still airy, but not wasteful */
    @media (max-width: 600px) {
    .checking-qualify-block,
    .sav-qualify-block {
        padding: 26px 18px;
        border-radius: 16px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.05);
    }
    }

    /* ---------- Title: premium hierarchy (less blocky, more refined) ---------- */
    .checking-qualify-block .cq-title,
    .sav-qualify-block .cq-title {
    font-size: 21px;
    font-weight: 900;
    color: var(--blue);
    margin-bottom: 18px;
    letter-spacing: -0.25px;
    line-height: 1.25;
    }

    /* ---------- Columns: larger cards with gentle separation ---------- */
    .cq-columns {
    gap: 22px; /* more space between the two bonus cards */
    }

    @media (min-width: 920px) {
    .cq-columns {
        gap: 26px;
    }
    }

    .cq-col {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 22px 22px;
    box-shadow: 0 10px 22px rgba(0,0,0,0.04);
    }

    /* ---------- Column headings: label-style like promo highlights, but quieter ---------- */
    .cq-col-title {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.35px;
    text-transform: uppercase;
    color: var(--gray);
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    line-height: 1.4;
    }

    /* ---------- List: airy tiles (more padding, more line-height) ---------- */
    .cq-list {
    gap: 14px;
    }

    .cq-list li {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 16px 16px;
    gap: 14px;
    align-items: flex-start;
    }

    /* Gentle hover: premium “lift” instead of a sharp color change */
    .cq-list li:hover {
    border-color: rgba(0,84,139,0.14);
    box-shadow: 0 10px 22px rgba(0,0,0,0.04);
    transform: translateY(-1px);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
    .cq-list li:hover {
        transform: none;
        transition: none;
    }
    }

    /* ---------- Checkmark: softer + slightly larger for premium spacing ---------- */
    .cq-check {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgba(0, 84, 139, 0.09);
    border: 1px solid rgba(0, 84, 139, 0.16);
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    flex-shrink: 0;
    }

    /* ---------- Key readability trick: treat <strong> as primary line ---------- */
    /* Your markup is: <span><strong>Requirement</strong> — clarifier...</span> */
    .cq-list li span strong {
    display: block;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.35;
    letter-spacing: -0.1px;
    }

    /* Secondary line (the remainder of the sentence) */
    .cq-list li span {
    color: var(--text-mid);
    font-size: 15px;
    line-height: 1.75;
    }

    /* ---------- Savings block: subtly distinct (signals “new money” seriousness) ---------- */
    .sav-qualify-block .cq-list li {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    }

    /* ---------- Optional: subtle accent rail (premium, not shouty) ---------- */
    .cq-col {
    position: relative;
    overflow: hidden;
    }

    .cq-col::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: rgba(0, 84, 139, 0.28);
    }

    /* Debit column gets a green rail */
    .checking-qualify-block .cq-col:nth-child(2)::before {
    background: rgba(130, 195, 65, 0.40);
    }

    /* ---------- Mobile: keep tiles comfortable, not huge ---------- */
    @media (max-width: 420px) {
    .cq-list li {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .cq-col {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .feat-table tr {
        vertical-align: top;
    }
}