@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root{--csm-navy:#1b2a6b;--csm-ink:#172033;--csm-lime:#86c440;--csm-cream:#faf8f3;--csm-muted:#667085;--csm-line:#e5e8ef;--navy:#2b3077;--green:#86c440;--ink:#242950;--soft:#f3f7ec;--cream:#fafaf7;--legacy-primary:#0C2E8A}

/* legacy pages (migrated off their old customized-Bootstrap layouts) use
   Bootstrap's .text-primary utility expecting the exact navy the live
   production site uses (#0C2E8A, confirmed via inspector), not stock
   Bootstrap 5's default blue from the CDN build _LayoutHome loads */
.text-primary{color:var(--legacy-primary) !important}
.bg-primary{background-color:var(--legacy-primary) !important}
.border-primary{border-color:var(--legacy-primary) !important}
.btn-primary{background-color:var(--legacy-primary) !important;border-color:var(--legacy-primary) !important;color:#fff !important}
.btn-primary:hover,.btn-primary:focus{background-color:#092266 !important;border-color:#092266 !important}
body.legacy-type .site-shell{background:#fff}

/* legacy pages use Bootstrap 4's font-weight-* utility class names, which
   Bootstrap 5 (loaded by _LayoutHome) renamed to fw-*; BS5 doesn't define
   the old names at all, so they were silently doing nothing (no bold) */
.font-weight-bold{font-weight:700 !important}
.font-weight-bolder{font-weight:bolder !important}
.font-weight-normal{font-weight:400 !important}
.font-weight-light{font-weight:300 !important}
.font-weight-lighter{font-weight:lighter !important}

/* same story for the rest of Bootstrap 4's utility names that BS5 renamed
   or dropped outright; confirmed none of these exist in the BS5 CDN build */
.text-left{text-align:left !important}
.text-right{text-align:right !important}
.ml-0{margin-left:0 !important}.mr-0{margin-right:0 !important}
.ml-1{margin-left:.25rem !important}.mr-1{margin-right:.25rem !important}
.ml-2{margin-left:.5rem !important}.mr-2{margin-right:.5rem !important}
.ml-3{margin-left:1rem !important}.mr-3{margin-right:1rem !important}
.ml-4{margin-left:1.5rem !important}.mr-4{margin-right:1.5rem !important}
.ml-5{margin-left:3rem !important}.mr-5{margin-right:3rem !important}
.ml-auto{margin-left:auto !important}.mr-auto{margin-right:auto !important}
.pl-0{padding-left:0 !important}.pr-0{padding-right:0 !important}
.pl-1{padding-left:.25rem !important}.pr-1{padding-right:.25rem !important}
.pl-2{padding-left:.5rem !important}.pr-2{padding-right:.5rem !important}
.pl-3{padding-left:1rem !important}.pr-3{padding-right:1rem !important}
.pl-4{padding-left:1.5rem !important}.pr-4{padding-right:1.5rem !important}
.pl-5{padding-left:3rem !important}.pr-5{padding-right:3rem !important}
.form-group{margin-bottom:1rem}
.close{float:right;padding:0;background:transparent;border:0;-webkit-appearance:none;appearance:none;font-size:1.5rem;font-weight:700;line-height:1;color:#000;opacity:.5}
.close:hover{opacity:.75}

html{scroll-behavior:smooth;scroll-padding-top:90px}

body{font:400 1.125rem/1.7 Manrope,sans-serif;color:var(--ink);background:#fff}

h1,h2,h3,h4{font-family:Sora,sans-serif;font-weight:700;line-height:1.18;letter-spacing:0}

/* legacy pages migrated onto this layout were designed around Plus Jakarta
   Sans throughout, not the new home page's Sora/Manrope pairing; keep their
   original look unless a page opts into the new typography explicitly */
body.legacy-type{font-family:Manrope,sans-serif;font-size:1rem}
body.legacy-type h1,body.legacy-type h2,body.legacy-type h3,body.legacy-type h4{font-family:Sora,sans-serif;letter-spacing:-0.02em}
/* ...and fall back to Bootstrap's own (smaller) default heading sizes
   instead of the new home page's large clamp()-based ones */
body.legacy-type h1{font-size:2.5rem}
body.legacy-type h2{font-size:2rem}
body.legacy-type h3{font-size:1.75rem}
body.legacy-type h4{font-size:1.5rem}
body.legacy-type h5{font-family:Sora,sans-serif;font-size:1.25rem;line-height:1.2}
/* .contact-address blocks are often wrapped in a bare .col-md-12 with no
   .row ancestor; Bootstrap 5 only applies grid gutter padding via the
   ".row > *" selector, so without a .row these get zero left/right padding,
   leaving them flush-left of sibling headings that carry pl-3/pr-3 (1rem) */
/* only the standalone pattern (no .row ancestor, so no native BS5 gutter
   padding applies) needs this; the "col-md-12 pt-1 pb-1" pattern already
   sits inside a proper .row and would get double-padded if this applied
   there too, so explicitly exclude anything carrying "pt-1" */
body.legacy-type div.col-md-12:not(.pt-1){padding-left:1rem;padding-right:1rem}

h2{font-size:clamp(2rem,3vw,3.25rem)}

h3{font-size:1.4rem}

p{margin-bottom:0}

a{text-decoration:none}

img{max-width:100%}

.nav-link{color:var(--navy);font-weight:700}

.nav-link:hover{color:#5b9231}

footer img{width:230px}

section[id]{scroll-margin-top:75px}


.navbar .nav-link{font-size:.9rem}



      .utility {
        background: var(--csm-navy);
        color: #e6ebff;
        font-size: 13px;
        line-height: 1.6;
        font-family: 'DM Sans', sans-serif;
        position: relative;
        z-index: 60;
      }


      .utility .wrap {
        width: min(1320px, calc(100% - 48px));
        margin: auto;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding-block: 7px;
      }


      .utility a {
        color: #e6ebff;
        text-decoration: none;
      }


      .utility a + a {
        margin-left: 20px;
      }


      .utility a:hover {
        color: #fff;
      }



      .csm-site-header {
        position: sticky;
        top: 0;
        z-index: 55;
        background: #fff;
        box-shadow: none; /* plain white header, no shadow wash (matches the reference) */
        font-family: 'DM Sans', sans-serif;
        font-size: 17px;
        line-height: 1.6;
        color: var(--csm-ink);
      }


      .csm-site-header .wrap {
        width: min(1320px, calc(100% - 48px));
        margin: auto;
      }


      .csm-site-header .header-main {
        display: flex;
        align-items: center;
        gap: 20px;
        padding-block: 18px;
      }


      .csm-site-header .brand {
        display: inline-flex;
        align-items: center;
      }


      .csm-site-header .brand img {
        width: 220px;
        height: auto;
      }


      .csm-site-header .header-actions {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 12px;
      }


      .csm-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border-radius: 30px;
        padding: 10px 18px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Plus Jakarta Sans', sans-serif;
        line-height: 1.4;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s ease;
      }


      .csm-nav-btn-light {
        background: #fff;
        color: var(--csm-navy);
        border: 1px solid var(--csm-line);
      }


      .csm-nav-btn-light:hover {
        background: #f4f6fa;
        color: var(--csm-navy);
      }


      .csm-nav-btn-lime {
        background: var(--csm-lime);
        color: #14232c;
        border: 1px solid var(--csm-lime);
      }


      .csm-site-header .header-actions .csm-nav-btn {
        padding: 11px 19px;
      }


      .csm-nav-btn-navy {
        background: var(--csm-navy);
        color: #fff;
        border: 1px solid var(--csm-navy);
      }


      .csm-nav-btn-navy:hover {
        background: #232862;
        color: #fff;
      }


      .csm-nav-btn-lime:hover {
        background: #75b332;
      }


      .csm-site-header .search-trigger {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        flex-shrink: 0;
        border: 1px solid var(--csm-line);
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #f7f8fb;
        color: var(--csm-navy);
        cursor: pointer;
      }


      .csm-site-header .search-trigger svg {
        width: 20px;
        height: 20px;
      }


      .csm-site-header .mobile-toggle {
        display: none;
        border: 1px solid var(--csm-line);
        border-radius: 8px;
        background: #fff;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
        font-size: 22px;
        cursor: pointer;
      }


      .csm-site-header .header-app-badges {
        display: flex;
        align-items: center;
        gap: 8px;
      }


      .csm-site-header .header-app-badges img {
        width: 132px;
        height: auto;
        display: block;
      }



      .csm-site-header .navigation {
        border-top: 1px solid var(--csm-line);
        background: #fff;
      }


      .csm-site-header .nav-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
      }


      .csm-site-header .nav-group {
        position: static;
      }


      .csm-site-header .nav-group summary {
        display: flex;
        align-items: center;
        gap: 6px;
        list-style: none;
        cursor: pointer;
        padding: 15px 18px;
        font-weight: 600;
        font-size: 15px;
        font-family: 'Plus Jakarta Sans', sans-serif;
        color: var(--csm-ink);
        border-bottom: 3px solid transparent;
        user-select: none;
        white-space: nowrap;
      }


      .csm-site-header .nav-group summary::-webkit-details-marker {
        display: none;
      }


      .csm-site-header .nav-group summary::marker {
        content: "";
      }


      .csm-site-header .nav-group summary .nav-chevron {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform 0.2s ease;
        opacity: 0.65;
      }


      .csm-site-header .nav-group[open] > summary {
        color: var(--csm-navy);
        border-bottom-color: var(--csm-lime);
        background: #f8faef;
      }


      .csm-site-header .nav-group[open] > summary .nav-chevron {
        transform: translateY(2px) rotate(225deg);
      }



      .csm-site-header .mega-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--csm-line);
        box-shadow: 0 25px 40px rgba(24, 38, 88, 0.133);
        max-height: calc(100dvh - 150px);
        overflow: auto;
        z-index: 100;
      }


      .csm-site-header .mega-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(300px, 1fr);
        gap: 24px;
        padding-block: 30px 34px;
      }


      .csm-site-header .menu-column {
        padding: 0;
        margin: 0;
      }


      .csm-site-header .menu-column h2 {
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--csm-navy);
        margin: 0 0 17px;
        line-height: 1.6;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }


      .csm-site-header .menu-link {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        width: 100%;
        border: 0;
        background: none;
        text-align: left;
        padding: 11px 10px;
        margin-bottom: 3px;
        border-radius: 10px;
        line-height: 1.4;
        color: inherit;
        text-decoration: none;
        cursor: pointer;
        transition: background 0.18s ease, transform 0.18s ease;
      }


      .csm-site-header .menu-link:hover {
        background: var(--csm-cream);
        transform: translateX(2px);
      }


      .csm-site-header .menu-icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(27, 42, 107, 0.08);
        color: var(--csm-navy);
        font-size: 19px;
        transition: background 0.18s, color 0.18s;
      }


      .csm-site-header .menu-link:hover .menu-icon {
        background: var(--csm-navy);
        color: #fff;
      }


      .csm-site-header .menu-copy {
        display: block;
        min-width: 0;
      }


      .csm-site-header .menu-copy strong {
        display: block;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 600;
        color: var(--csm-ink);
        font-family: 'DM Sans', sans-serif;
      }


      .csm-site-header .menu-copy span {
        display: block;
        font-size: 14px;
        line-height: 1.4;
        color: var(--csm-muted);
        margin-top: 4px;
      }


      .csm-site-header .menu-promo {
        border-radius: 18px;
        background: linear-gradient(160deg, var(--csm-navy), #2b3d8f);
        color: #fff;
        padding: 22px;
        box-shadow: 0 6px 20px rgba(27, 42, 107, 0.15);
        display: flex;
        flex-direction: column;
      }


      .csm-site-header .menu-promo > img {
        height: 140px;
        width: 100%;
        object-fit: contain;
        margin: 0 0 18px;
      }


      /* store badges in the promo box: always side by side on one row, up to 132px each (they shrink to fit a narrow box) */
      .csm-site-header .menu-promo .header-app-badges {
        flex-wrap: nowrap; /* both store badges stay on one line */
        gap: 8px;
      }


      .csm-site-header .menu-promo .header-app-badges a {
        flex: 1 1 0;
        min-width: 0;
        max-width: 132px;
      }


      .csm-site-header .menu-promo .header-app-badges img {
        width: 100%;
        max-width: 132px;
        height: auto;
      }


      .csm-site-header .menu-promo h2 {
        font-size: 20px;
        line-height: 1.35;
        color: #fff;
        margin: 0 0 10px;
        letter-spacing: normal;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }


      .csm-site-header .menu-promo p {
        font-size: 14px;
        color: #dbe2fb;
        margin: 4px 0 14px;
        line-height: 1.6;
      }


      .csm-site-header .menu-promo .promo-link {
        align-self: flex-start;
        padding: 10px 14px;
        font-size: 13px;
        border-radius: 8px;
      }


      .csm-site-header .promo-link .menu-icon,
      .csm-site-header .promo-link .menu-copy > span {
        display: none;
      }


      .csm-site-header .promo-link .menu-copy strong {
        font-size: inherit;
        color: inherit;
        font-family: inherit;
        font-weight: inherit;
      }


      .csm-site-header .promo-emblem {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.09);
        color: #b9eb82;
        font-size: 30px;
        margin-bottom: 24px;
      }


      .csm-site-header .menu-download {
        padding: 10px 0 10px 10px;
      }


      .csm-site-header .download-label {
        display: block;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--csm-ink);
      }


      .csm-site-header .menu-promo .download-label {
        color: #fff;
      }


      .csm-site-header .app-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
      }


      .csm-site-header .app-badges a {
        display: block;
        text-decoration: none;
      }


      .csm-site-header .app-badges img {
        width: 125px;
        height: auto;
        object-fit: contain;
      }


      .csm-site-header .deals-trigger {
        border: 0;
        background: #f2f8e9;
        color: #375b12;
        font-weight: 700;
        font-size: 14px;
        padding: 9px 15px;
        border-radius: 24px;
        white-space: nowrap;
        margin-left: auto;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'DM Sans', sans-serif;
      }


      .csm-site-header .mobile-signin {
        display: none;
      }


      /* Reference spec (New Home with Headers / mega-menu.js): on desktop
         the nav row space-betweens its items instead of packing left with
         a dead gap before the deals button. */
      @media (min-width: 1101px) {
        .csm-site-header .nav-wrap {
          gap: 0;
          justify-content: space-between;
        }
        .csm-site-header .nav-group summary {
          padding: 16px 10px;
          font-size: 15px;
          gap: 6px;
          white-space: nowrap;
        }
        .csm-site-header .deals-trigger {
          padding: 10px 13px;
          margin-left: 6px;
          font-size: 14px;
        }
      }



      /* Modals (values copied from the reference header HTML) */
      dialog {
        border: 0;
        border-radius: 22px;
        padding: 0;
        width: min(960px, calc(100% - 32px));
        max-height: calc(100dvh - 40px);
        background: #fff;
        color: var(--csm-ink);
        box-shadow: 0 25px 100px #111b4f55;
        font-family: 'DM Sans', sans-serif;
        font-size: 17px;
        line-height: 1.6;
        overflow: hidden;
      }


      dialog[open] {
        position: fixed;
        inset: 0;
        margin: auto;
      }


      dialog::backdrop {
        background: #111a3cc9;
        backdrop-filter: blur(4px);
      }


      .dialog-content {
        padding: 30px;
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #c9cfdf transparent;
      }


      .dialog-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
      }


      body dialog .dialog-top h2 {
        font-size: 28px;
        line-height: 1.6;
        color: var(--csm-navy);
        margin: 0;
        letter-spacing: normal;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }


      /* small green all-caps label above the dialog title */
      dialog .eyebrow {
        color: #528824;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.6;
        text-transform: uppercase;
        letter-spacing: 0.14em;
      }


      .close-button {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        background: #f2f4f8;
        border: 0;
        border-radius: 50%;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        display: grid;
        place-items: center;
      }


      .dialog-lead {
        color: var(--csm-muted);
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
      }


      p.dialog-lead {
        margin: 1em 0;
      }


      label.dialog-lead {
        display: inline;
      }


      .dialog-note {
        font-size: 13px;
        line-height: 1.6;
        color: var(--csm-muted);
        margin: 1em 0;
      }


      .deal-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin: 24px 0;
      }


      .deal-card {
        border: 1px solid var(--csm-line);
        border-radius: 14px;
        overflow: hidden;
      }


      .deal-card img {
        height: 165px;
        width: 100%;
        object-fit: cover;
      }


      .deal-card div {
        padding: 16px;
      }


      body dialog .deal-card small {
        color: #5a7a36;
        font-weight: 700;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.09em;
      }


      body dialog .deal-card h3 {
        font-size: 18px;
        line-height: 1.6;
        margin: 7px 0;
        font-family: 'Plus Jakarta Sans', sans-serif;
        letter-spacing: normal;
      }


      body dialog .deal-card p {
        font-size: 14px;
        line-height: 1.6;
        color: var(--csm-muted);
        margin: 0;
      }


      .deal-download {
        background: #f1f6e9;
        border-radius: 14px;
        padding: 22px;
      }


      body dialog .deal-download h3 {
        margin: 0 0 8px;
        color: var(--csm-navy);
        font-size: 21px;
        line-height: 1.6;
        letter-spacing: normal;
        font-family: 'Plus Jakarta Sans', sans-serif;
      }


      body dialog .deal-download p {
        margin: 0 0 18px;
        font-size: 15px;
        line-height: 1.6;
      }


      dialog .download-label {
        display: block;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: 10px;
      }


      dialog .app-badges {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 0;
      }


      dialog .app-badges img {
        display: block;
        height: 45px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
      }


      /* sign-in dialog badges (inside .app-download) are fixed 132px wide */
      dialog .app-download .app-badges {
        gap: 8px;
      }

      /* Partner sign-in popup: the store badges line up with the left edge of the text above them (as in the reference) */
      dialog .download-badges .app-badges {
        justify-content: flex-start;
      }


      dialog .app-download .app-badges img {
        width: 132px;
        height: auto;
        aspect-ratio: 812 / 243;
      }


      .app-dialog {
        max-width: 620px;
      }


      .app-dialog .app-illustration {
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 15px 0 25px;
        display: block;
      }


      .search-dialog {
        max-width: 760px;
      }


      .search-field {
        width: 100%;
        border: 1px solid #c9cfdf;
        background: #fafbfc;
        border-radius: 12px;
        padding: 14px 16px;
        margin: 20px 0 10px;
        color: var(--csm-ink);
        font-size: 17px;
      }


      .search-results {
        display: grid;
        gap: 4px;
        max-height: 50vh;
        overflow-y: auto;
      }


      .search-result {
        display: block;
        width: 100%;
        border: 0;
        background: none;
        text-align: left;
        padding: 10px 12px;
        border-radius: 10px;
        line-height: 1.4;
        font-family: inherit;
        cursor: pointer;
      }


      .search-result:hover,
      .search-result:focus-visible {
        background: #f3f6ed;
      }


      .search-result small {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #528824;
        margin-bottom: 2px;
      }


      .search-result strong {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--csm-ink);
      }


      .search-result span {
        display: block;
        font-size: 13px;
        color: var(--csm-muted);
        margin-top: 2px;
      }


      .search-count {
        font-size: 13px;
        line-height: 1.6;
        color: var(--csm-muted);
        margin: 1em 0;
      }


      .signin-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 22px;
      }


      .signin-grid a {
        border: 1px solid var(--csm-line);
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        line-height: 1.6;
        color: var(--csm-ink);
        text-decoration: none;
        font-weight: 400;
        display: block;
      }


      .signin-grid a:hover {
        background: #f3f6ed;
      }


      body.modal-open,
      body.nav-open,
      html:has(body.modal-open),
      html:has(body.nav-open) {
        overflow: hidden;
        height: 100%;
      }



      @media (max-width: 1100px) {
        .csm-site-header .mobile-toggle {
          display: block;
        }
        .csm-site-header .navigation {
          display: none;
          max-height: calc(100dvh - 120px);
          overflow-y: auto;
        }
        .csm-site-header .navigation.mobile-open {
          display: block;
        }
        .csm-site-header .nav-wrap {
          display: block;
          padding-block: 10px;
        }
        .csm-site-header .nav-group summary {
          font-size: 16px;
          padding: 13px 8px;
          justify-content: space-between;
        }
        .csm-site-header .mega-panel {
          position: static;
          max-height: none;
          overflow: visible;
          box-shadow: none;
          border: 0;
        }
        .csm-site-header .mega-grid {
          width: 100%;
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 10px 0 16px;
        }
        .csm-site-header .menu-promo {
          display: none;
        }
        .csm-site-header .deals-trigger {
          margin: 12px 0;
        }
        .csm-site-header .mobile-signin {
          display: flex;
          margin: 10px 0;
        }
      }



      @media (max-width: 800px) {
        .utility {
          display: none;
        }
        .csm-site-header .header-main {
          padding-block: 12px;
          gap: 10px;
        }
        .csm-site-header .brand img {
          width: 170px;
        }
        .csm-site-header .header-actions > .csm-nav-btn {
          display: none;
        }
        .deal-grid {
          grid-template-columns: 1fr;
        }
        .signin-grid {
          grid-template-columns: 1fr;
        }
      }


      img {
        max-width: 100%;
        height: auto;
        display: block;
      }


      :root {
        --radius: 0.625rem;
        --background: oklch(1 0 0);
        --foreground: oklch(0.129 0.042 264.695);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.129 0.042 264.695);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.129 0.042 264.695);
        --primary: oklch(0.208 0.042 265.755);
        --primary-foreground: oklch(0.984 0.003 247.858);
        --secondary: oklch(0.968 0.007 247.896);
        --secondary-foreground: oklch(0.208 0.042 265.755);
        --muted: oklch(0.968 0.007 247.896);
        --muted-foreground: oklch(0.554 0.046 257.417);
        --accent: oklch(0.968 0.007 247.896);
        --accent-foreground: oklch(0.208 0.042 265.755);
        --destructive: oklch(0.577 0.245 27.325);
        --destructive-foreground: oklch(0.984 0.003 247.858);
        --border: oklch(0.929 0.013 255.508);
        --input: oklch(0.929 0.013 255.508);
        --ring: oklch(0.704 0.04 256.788);
        --chart-1: oklch(0.646 0.222 41.116);
        --chart-2: oklch(0.6 0.118 184.704);
        --chart-3: oklch(0.398 0.07 227.392);
        --chart-4: oklch(0.828 0.189 84.429);
        --chart-5: oklch(0.769 0.188 70.08);
        --sidebar: oklch(0.984 0.003 247.858);
        --sidebar-foreground: oklch(0.129 0.042 264.695);
        --sidebar-primary: oklch(0.208 0.042 265.755);
        --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
        --sidebar-accent: oklch(0.968 0.007 247.896);
        --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
        --sidebar-border: oklch(0.929 0.013 255.508);
        --sidebar-ring: oklch(0.704 0.04 256.788);
        --brand-navy: oklch(0.324 0.12 275.4);
        --brand-green: oklch(0.736 0.177 127.8);
        --brand-mint: oklch(0.966 0.035 130.2);
        --brand-ink: #242950;
        --brand-surface: oklch(0.985 0.008 115);
      }



      body {
        margin: 0;
        background: var(--background);
        color: var(--foreground);
        font-family: "Manrope", sans-serif;
        font-size: 1.1rem;
        line-height: 1.65;
      }



      html {
        scroll-behavior: smooth;
      }


      body {
        overflow-x: hidden;
      }


      h1,
      h2,
      h3,
      .kicker,
      .eyebrow {
        font-family: "Sora", sans-serif;
      }


      a {
        color: inherit;
        text-decoration: none;
      }


      img {
        display: block;
        max-width: 100%;
      }


      .site-shell {
        color: var(--brand-ink);
        background: var(--brand-surface);
      }


      .nav-links {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        color: var(--brand-navy);
        font-size: 0.94rem;
        font-weight: 700;
      }


      .nav-links a {
        position: relative;
      }


      .nav-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.5rem;
        width: 100%;
        height: 2px;
        background: var(--brand-green);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s;
      }


      .nav-links a:hover::after {
        transform: scaleX(1);
      }


      .menu-toggle {
        display: none;
        color: var(--brand-navy);
      }



      .menu-toggle {
        border: 0;
        background: transparent;
        box-shadow: none;
      }


/* site footer */
footer {
        padding: 2rem 0;
        background: var(--background);
      }
.footer-inner {
        display: grid;
        grid-template-columns: 190px 1fr auto;
        align-items: center;
        gap: 2rem;
      }
.footer-inner p {
        margin: 0;
        color: var(--muted-foreground);
        font-size: 0.95rem;
      }
.footer-inner a {
        color: var(--brand-navy);
        font-weight: 700;
      }






      @media (max-width: 640px) {
        body {
          font-size: 1.1rem;
        }
        .section-wrap {
          width: min(100% - 2rem, 1180px);
        }
        .hero-grid {
          width: calc(100% - 2rem);
        }
        .section-pad {
          padding: 4.5rem 0;
        }
        .site-header {
          min-height: 72px;
          padding: 0.7rem 1rem;
        }
        .brand img {
          width: 164px;
        }
        .site-nav {
          top: 72px;
        }
        .hero {
          padding-top: 0;
        }
        .hero-grid {
          padding: 3.5rem 0 4.5rem;
        }
        .hero h1 {
          font-size: clamp(2rem, 9.8vw, 2.45rem);
          overflow-wrap: normal;
        }
        .hero-actions {
          flex-direction: column;
          align-items: stretch;
        }
        .hero-visual {
          padding: 0.65rem 0.65rem 0 0;
        }
        .hero-visual::before {
          inset: 0 0 1rem 1rem;
        }
        .merchant-status {
          left: 0.6rem;
          right: 0;
          bottom: -1.8rem;
          width: fit-content;
          max-width: calc(100% - 1rem);
        }
        .hero-proof {
          justify-content: flex-start;
          flex-wrap: wrap;
          padding-block: 1.5rem;
        }
        .hero-proof span {
          width: 100%;
        }
        .editorial-intro {
          gap: 1.5rem;
        }
        .category-grid,
        .journey-grid,
        .fulfillment-grid,
        .opportunity-cards,
        .step-list {
          grid-template-columns: 1fr;
        }
        .step-list {
          gap: 1.1rem;
        }
        .step-list article {
          display: grid;
          grid-template-columns: 78px minmax(0, 1fr);
          align-items: center;
          gap: 1.2rem;
          text-align: left;
        }
        .step-marker {
          width: 72px;
          height: 72px;
          margin: 0;
        }
        .step-marker span {
          font-size: 1.5rem;
        }
        .step-content svg {
          display: none;
        }
        .step-content {
          padding: 0;
        }
        .category-item {
          min-height: 220px;
        }
        .journey-item {
          min-height: 205px;
        }
        .network-tag {
          right: -0.25rem;
          bottom: 1rem;
        }
        .fulfillment-image {
          height: 200px;
        }
        .footer-inner {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .footer-inner img {
          width: 190px;
          margin: auto;
        }
      }



.brand-wordmark {
  display: none;
  height: 37px;
  width: auto;
}

/* Light theme only: the header, popups and page content all use the light design (same as the reference), so browsers must not repaint them in dark mode */
:root, html, body {
  color-scheme: only light;
}


/* Page transition: new page slides up from the bottom on navigation.
   Cross-document View Transitions (Chrome/Edge 126+, Safari 18.2+); other browsers just load normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: csm-slide-up .45s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes csm-slide-up { from { transform: translateY(100vh); } to { transform: translateY(0); } }
}


/* Legacy section heading (centred, navy, uppercase; no green underline bar) */
body.legacy-type .section-padd { padding: 30px 0; }
body.legacy-type .section-header { text-align: center; max-width: 720px; margin: 0 auto 48px; padding-bottom: 12px; }
body.legacy-type .section-header h1,
body.legacy-type .section-header h2 { font-size: 32px; color: #0c2e8a; text-transform: uppercase; font-weight: 700; position: relative; padding-bottom: 20px; margin: 0 0 20px; }


/* Phones: pages sit right under the sticky header, so heroes only need a small top space
   (these used to reserve room for an old fixed header). */
@media (max-width: 640px) {
  .hero .hero-grid { padding-top: 1.5rem !important; }
  .hero .hero-layout { padding-top: 1.5rem !important; }
  .hero .container { padding-top: 1rem !important; }
}

body.legacy-type section#contact { padding-top: 30px; }

/* Keyboard focus (Tab key): green outline on header, utility bar and dialogs, same as the reference header */
.csm-site-header :focus-visible, .utility :focus-visible, dialog :focus-visible { outline: 3px solid #659e28; outline-offset: 4px; }

/* Press and Media is shown but not available yet: greyed out and not clickable */
.menu-link[aria-disabled="true"],.footer-link[aria-disabled="true"]{opacity:.5;cursor:default;pointer-events:none;background:transparent!important}

/* Phone header, same breakpoints as the reference header */
@media (max-width: 1050px) {
  .utility .wrap, .csm-site-header .wrap { width: calc(100% - 32px); }
}
@media (max-width: 800px) {
  .csm-site-header .header-actions { gap: 7px; }
  .csm-site-header .header-badges .header-app-badges img { width: 130px; }
  .csm-site-header .header-badges .header-app-badges { gap: 10px; }
  /* app badges on their own row under the logo / menu / search, as in the reference */
  .csm-site-header .header-main { flex-wrap: wrap; }
  .csm-site-header .header-main .header-actions { display: contents; }
  .csm-site-header .header-main > .brand { margin-right: auto; }
  .csm-site-header .header-badges { flex-basis: 100%; width: 100%; display: flex; justify-content: flex-end; }
}
@media (max-width: 420px) {
  .csm-site-header .search-trigger { width: 35px; height: 35px; min-width: 35px; min-height: 35px; }
}

@media (min-width: 641px) and (max-width: 800px) {
  .csm-site-header .brand img { width: 175px; }
}

/* page behind an open header menu does not scroll */
/* The lock sits on <html>, not <body>: overflow:hidden on <body> made the sticky header scroll away, so with the mobile menu open from the page bottom the header was off screen. */
html.menu-open { overflow: hidden; }
body.menu-open { padding-right: var(--sbw, 0px); }

/* No green underline bar under page headings, even where an old stylesheet (Theme1 style.css) still defines one */
.section-header h1::before, .section-header h2::before { display: none !important; }

/* Pages with scroll animations (AOS fade-left/right start off-screen): never let them widen the page or shift it sideways on phones. `clip` (not hidden) keeps the sticky header working. */
html, body { overflow-x: clip; }

/* Clip each page section so off-screen animated blocks (AOS fade-left/right) and decorative orbs can never widen the page */
body > .site-shell > section, body > .site-shell > header:not(.csm-site-header), body > .site-shell > main, body > .site-shell > main > section, body > section, body > header:not(.csm-site-header), body > main, body > main > section { overflow-x: clip; }

/* Landing-page heroes (Affiliate, Driver, Chamber, ISR) reserved 80-160px for an old fixed header; the header is now sticky, so keep only a small gap under it */
header.hero { padding-top: 3rem !important; }
@media (max-width: 640px) { header.hero { padding-top: 0 !important; } }