.a2a-info-page {
padding: 0;
}
/* ---------- Intro ---------- */
.a2a-intro-card {
background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
border: 1px solid #DBEAFE;
border-radius: 20px;
padding: 32px;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 28px;
}
.a2a-intro-icon {
width: 74px;
height: 74px;
border-radius: 20px;
background: #1a73e8;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
flex-shrink: 0;
box-shadow: 0 10px 24px rgba(26,115,232,.25);
}
.a2a-intro-title {
font-size: 22px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.a2a-intro-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
}
/* ---------- Section heading ---------- */
.a2a-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
.a2a-section {
margin-bottom: 32px;
}
/* ---------- How it works (steps) ---------- */
.a2a-steps-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
}
.a2a-step-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
position: relative;
}
.a2a-step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: #1a73e8;
color: #fff;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--HeadingFont);
margin-bottom: 14px;
}
.a2a-step-title {
font-size: 15px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.a2a-step-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
@@media (min-width: 900px) {
.a2a-steps-row {
grid-template-columns: repeat(4, 1fr);
}
}
/* ---------- Benefits grid ---------- */
.a2a-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.a2a-benefit-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.a2a-benefit-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.a2a-benefit-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.a2a-benefit-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.a2a-benefit-icon.green {
background: #ECFDF5;
color: #057A55;
}
.a2a-benefit-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.a2a-benefit-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.a2a-benefit-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ---------- Transfer speed comparison ---------- */
.a2a-speed-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.a2a-speed-info-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
}
.a2a-speed-info-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.a2a-speed-info-title {
font-size: 15.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.a2a-fee-tag {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: 12px;
}
.a2a-fee-free {
background: #D1FAE5;
color: #057A55;
}
.a2a-fee-paid {
background: #FEF3C7;
color: #92400E;
}
.a2a-speed-info-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
margin-bottom: 12px;
}
.a2a-speed-info-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.a2a-speed-info-list li {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #374151;
font-family: var(--HeadingFont);
}
.a2a-speed-info-list i {
font-size: 15px;
color: #057A55;
}
/* ---------- Security note ---------- */
.a2a-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.a2a-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.a2a-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.a2a-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/********************domestic & cross border css ****************/
.dcbt-page {
padding: 0;
}
/* ================= HERO ================= */
.dcbt-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
align-items: center;
background: linear-gradient(135deg, #0F2A5C 0%, #1a44a3 55%, #1a73e8 100%);
border-radius: 22px;
padding: 40px 44px;
margin-bottom: 28px;
overflow: hidden;
position: relative;
}
@@media (max-width: 900px) {
.dcbt-hero {
grid-template-columns: 1fr;
padding: 32px;
}
}
.dcbt-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #BFDBFE;
font-family: var(--HeadingFont);
background: rgba(255,255,255,.1);
border: 1px solid rgba(255,255,255,.18);
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.dcbt-hero-title {
font-size: 30px;
font-weight: 700;
color: #fff;
font-family: var(--HeadingFont);
line-height: 1.2;
margin-bottom: 12px;
}
.dcbt-hero-body {
font-size: 15px;
color: #DBEAFE;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 480px;
}
.dcbt-hero-graphic {
width: 100%;
height: auto;
}
/* ================= SECTION HEADING ================= */
.dcbt-section {
margin-bottom: 32px;
}
.dcbt-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ================= TIMELINE (How it works) ================= */
.dcbt-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
@@media (max-width: 900px) {
.dcbt-timeline {
grid-template-columns: 1fr;
gap: 18px;
}
.dcbt-timeline-connector {
display: none;
}
}
.dcbt-timeline-item {
position: relative;
padding: 0 16px;
text-align: center;
}
.dcbt-timeline-item:first-child {
padding-left: 0;
}
.dcbt-timeline-item:last-child {
padding-right: 0;
}
.dcbt-timeline-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: #1a73e8;
color: #fff;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--HeadingFont);
margin: 0 auto 14px;
position: relative;
z-index: 2;
box-shadow: 0 0 0 6px #fff;
}
.dcbt-timeline-connector {
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: #DBEAFE;
z-index: 1;
}
.dcbt-timeline-item:last-child .dcbt-timeline-connector {
display: none;
}
.dcbt-timeline-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.dcbt-timeline-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/* ================= TABS (Domestic / Cross-Border) ================= */
.dcbt-tabs {
display: inline-flex;
gap: 6px;
background: #F3F4F6;
border-radius: 12px;
padding: 5px;
margin-bottom: 20px;
}
.dcbt-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: 9px;
border: none;
background: transparent;
color: #6B7280;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: var(--HeadingFont);
transition: all .15s;
}
.dcbt-tab:hover {
color: #111827;
}
.dcbt-tab.active {
background: #fff;
color: #1a73e8;
box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.dcbt-tab-panel {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 26px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
@@media (max-width: 800px) {
.dcbt-tab-panel {
grid-template-columns: 1fr;
}
}
.dcbt-tab-panel-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.dcbt-tab-panel-icon {
width: 48px;
height: 48px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.dcbt-tab-panel-icon.domestic {
background: #EFF6FF;
color: #1a73e8;
}
.dcbt-tab-panel-icon.crossborder {
background: #F3E8FF;
color: #7E22CE;
}
.dcbt-tab-panel-title {
font-size: 17px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.dcbt-tab-panel-body {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.6;
}
.dcbt-tab-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
align-content: start;
}
.dcbt-tab-stat {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 14px 16px;
}
.dcbt-tab-stat-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.dcbt-tab-stat-value {
font-size: 15px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
/* ================= BENEFITS ================= */
.dcbt-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.dcbt-benefit-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.dcbt-benefit-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.dcbt-benefit-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.dcbt-benefit-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.dcbt-benefit-icon.green {
background: #ECFDF5;
color: #057A55;
}
.dcbt-benefit-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.dcbt-benefit-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.dcbt-benefit-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= COVERAGE STRIP ================= */
.dcbt-coverage-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.dcbt-coverage-cell {
padding: 22px 18px;
text-align: center;
border-right: 1px solid #E5E7EB;
background: #fff;
}
.dcbt-coverage-cell:last-child {
border-right: none;
}
.dcbt-coverage-value {
font-size: 24px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.dcbt-coverage-label {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= SECURITY NOTE ================= */
.dcbt-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.dcbt-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.dcbt-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.dcbt-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************* wallet balance manager *************/
.wbm-page {
padding: 0;
}
/* ================= HERO ================= */
.wbm-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 36px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.wbm-hero {
grid-template-columns: 1fr;
}
}
.wbm-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.wbm-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.wbm-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
}
/* ---------- Stacked balance cards ---------- */
.wbm-card-stack {
position: relative;
height: 220px;
}
.wbm-balance-card {
position: absolute;
left: 0;
right: 0;
border-radius: 16px;
padding: 18px 22px;
font-family: var(--HeadingFont);
box-shadow: 0 10px 24px rgba(17,24,39,.08);
}
.wbm-card-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
opacity: .85;
margin-bottom: 6px;
}
.wbm-card-value {
font-size: 22px;
font-weight: 700;
}
.wbm-card-reserve {
top: 0;
background: #ECFDF5;
color: #057A55;
border: 1px solid #A7F3D0;
transform: scale(0.92);
z-index: 1;
}
.wbm-card-float {
top: 46px;
background: #F3E8FF;
color: #7E22CE;
border: 1px solid #E9D5FF;
transform: scale(0.96);
z-index: 2;
}
.wbm-card-payout {
top: 92px;
background: #1a73e8;
color: #fff;
border: 1px solid #1558b0;
z-index: 3;
}
.wbm-card-payout .wbm-card-label {
color: #DBEAFE;
}
.wbm-card-chip {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
font-size: 12px;
font-weight: 700;
background: rgba(255,255,255,.18);
padding: 4px 10px;
border-radius: 20px;
}
/* ================= SECTION HEADING ================= */
.wbm-section {
margin-bottom: 32px;
}
.wbm-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ================= ACCORDION ================= */
.wbm-accordion {
display: flex;
flex-direction: column;
gap: 10px;
}
.wbm-accordion-item {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
overflow: hidden;
transition: border-color .15s;
}
.wbm-accordion-item.expanded {
border-color: #1a73e8;
}
.wbm-accordion-head {
width: 100%;
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.wbm-accordion-icon {
width: 40px;
height: 40px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.wbm-accordion-title-wrap {
flex: 1;
min-width: 0;
}
.wbm-accordion-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.wbm-accordion-subtitle {
font-size: 12.5px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-top: 1px;
}
.wbm-accordion-chevron {
font-size: 22px;
color: #9CA3AF;
flex-shrink: 0;
}
.wbm-accordion-body {
padding: 0 18px 20px 72px;
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.6;
}
/* ================= FUNDS FLOW ================= */
.wbm-flow {
display: flex;
align-items: center;
gap: 18px;
}
@media (max-width: 900px) {
.wbm-flow {
flex-direction: column;
align-items: stretch;
}
.wbm-flow-arrow {
transform: rotate(90deg);
align-self: center;
}
}
.wbm-flow-step {
flex: 1;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.wbm-flow-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.wbm-flow-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.wbm-flow-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
.wbm-flow-arrow {
font-size: 22px;
color: #C7D2FE;
flex-shrink: 0;
}
/* ================= BENEFITS (horizontal list) ================= */
.wbm-benefit-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.wbm-benefit-row {
display: flex;
align-items: flex-start;
gap: 16px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 16px 20px;
}
.wbm-benefit-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.wbm-benefit-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.wbm-benefit-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.wbm-benefit-icon.green {
background: #ECFDF5;
color: #057A55;
}
.wbm-benefit-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.wbm-benefit-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 3px;
}
.wbm-benefit-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= SECURITY NOTE ================= */
.wbm-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.wbm-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.wbm-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.wbm-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/********************* Settlement reconciliation css ****************************/
.sr-page {
padding: 0;
}
/* ================= HERO ================= */
.sr-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.sr-hero {
grid-template-columns: 1fr;
}
}
.sr-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.sr-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.sr-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
}
.sr-hero-graphic {
width: 100%;
height: auto;
}
/* ================= SECTION HEADING ================= */
.sr-section {
margin-bottom: 32px;
}
.sr-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.sr-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
}
/* ================= SETTLEMENT CYCLE ================= */
.sr-cycle-wrap {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 20px;
margin-bottom: 18px;
display: flex;
justify-content: center;
}
.sr-cycle-graphic {
width: 100%;
max-width: 460px;
height: auto;
display: block;
}
.sr-cycle-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.sr-cycle-step {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 16px 18px;
}
.sr-cycle-step-num {
width: 26px;
height: 26px;
border-radius: 50%;
background: #EFF6FF;
color: #1a73e8;
font-size: 12.5px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--HeadingFont);
margin-bottom: 10px;
}
.sr-cycle-step-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.sr-cycle-step-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= EXAMPLE RECONCILIATION TABLE ================= */
.sr-example-table-wrap {
overflow-x: auto;
border: 1px solid #E5E7EB;
border-radius: 14px;
}
table.sr-example-table {
width: 100%;
border-collapse: collapse;
font-family: var(--HeadingFont);
}
table.sr-example-table thead th {
background: #F9FAFB;
text-align: left;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: #6B7280;
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
white-space: nowrap;
}
table.sr-example-table tbody td {
padding: 12px 16px;
font-size: 14px;
color: #111827;
border-bottom: 1px solid #F3F4F6;
background:#fff;
}
table.sr-example-table tbody tr:last-child td {
border-bottom: none;
}
.sr-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.sr-pill i {
font-size: 13px;
}
.sr-pill-matched {
background: #D1FAE5;
color: #057A55;
}
.sr-pill-pending {
background: #F3F4F6;
color: #6B7280;
}
.sr-pill-exception {
background: #FEE2E2;
color: #B42318;
}
/* ================= BENEFITS CHECKLIST ================= */
.sr-checklist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px 28px;
}
.sr-checklist-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.sr-checklist-icon {
font-size: 20px;
color: #10B981;
flex-shrink: 0;
margin-top: 1px;
}
.sr-checklist-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 2px;
}
.sr-checklist-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= SECURITY NOTE ================= */
.sr-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.sr-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.sr-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.sr-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************** Reporting and Auditing css******************/
.ra-page {
padding: 0;
}
/* ---------- Inline heading (not dependent on PageDescriptor component) ---------- */
.ra-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.ra-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ra-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ra-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.ra-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ---------- HERO with report/dashboard mockup ---------- */
.ra-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@@media (max-width: 900px) {
.ra-hero {
grid-template-columns: 1fr;
}
}
.ra-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.ra-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.ra-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
/* Report mockup card */
.ra-mock-report {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
box-shadow: 0 16px 40px rgba(17,24,39,.08);
padding: 22px;
}
.ra-mock-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.ra-mock-title {
font-size: 13.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.ra-mock-badge {
font-size: 10.5px;
font-weight: 700;
color: #057A55;
background: #D1FAE5;
padding: 3px 9px;
border-radius: 10px;
}
.ra-mock-chart {
display: flex;
align-items: flex-end;
gap: 10px;
height: 110px;
margin-bottom: 16px;
padding: 0 4px;
}
.ra-mock-bar {
flex: 1;
background: linear-gradient(180deg, #60A5FA 0%, #1a73e8 100%);
border-radius: 6px 6px 0 0;
}
.ra-mock-bar.light {
background: #DBEAFE;
}
.ra-mock-rows {
display: flex;
flex-direction: column;
gap: 8px;
}
.ra-mock-row {
display: flex;
align-items: center;
gap: 10px;
}
.ra-mock-row-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
}
.ra-mock-row-bar {
height: 7px;
border-radius: 4px;
background: #F3F4F6;
flex: 1;
}
.ra-mock-row-bar.fill {
background: #DBEAFE;
}
/* ---------- Section heading ---------- */
.ra-section {
margin-bottom: 32px;
}
.ra-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ---------- Report type filter chips ---------- */
.ra-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.ra-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #E5E7EB;
background: #fff;
color: #6B7280;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: var(--HeadingFont);
transition: all .15s;
}
.ra-chip:hover {
border-color: #1a73e8;
color: #1a73e8;
}
.ra-chip.active {
background: #1a73e8;
border-color: #1a73e8;
color: #fff;
}
.ra-report-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.ra-report-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.ra-report-icon {
width: 40px;
height: 40px;
border-radius: 11px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
margin-bottom: 12px;
}
.ra-report-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.ra-report-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
margin-bottom: 12px;
}
.ra-report-formats {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.ra-format-tag {
font-size: 11px;
font-weight: 700;
color: #6B7280;
background: #F3F4F6;
padding: 3px 9px;
border-radius: 8px;
}
/* ---------- Vertical audit trail ---------- */
.ra-audit-trail {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 26px 26px 10px;
}
.ra-audit-item {
position: relative;
padding-left: 30px;
padding-bottom: 22px;
border-left: 2px solid #E5E7EB;
margin-left: 8px;
}
.ra-audit-item:last-child {
border-left-color: transparent;
padding-bottom: 4px;
}
.ra-audit-dot {
position: absolute;
left: -8px;
top: 0;
width: 14px;
height: 14px;
border-radius: 50%;
background: #1a73e8;
border: 3px solid #EFF6FF;
}
.ra-audit-time {
font-size: 12px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-bottom: 3px;
}
.ra-audit-action {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 2px;
}
.ra-audit-detail {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.ra-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ---------- Benefits strip ---------- */
.ra-benefit-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.ra-benefit-cell {
padding: 20px;
border-right: 1px solid #E5E7EB;
background: #fff;
}
.ra-benefit-cell:last-child {
border-right: none;
}
.ra-benefit-icon {
font-size: 20px;
color: #1a73e8;
margin-bottom: 8px;
}
.ra-benefit-title {
font-size: 13.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.ra-benefit-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ---------- Security note ---------- */
.ra-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.ra-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.ra-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.ra-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/*********************** BanksCreditUnions css ************************/
.bcu-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.bcu-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.bcu-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.bcu-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.bcu-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.bcu-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.bcu-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.bcu-hero {
grid-template-columns: 1fr;
}
}
.bcu-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.bcu-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.bcu-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 480px;
}
/* Institution-type badge cluster */
.bcu-badge-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.bcu-badge-tile {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px 16px;
text-align: center;
transition: border-color .15s, transform .15s;
}
.bcu-badge-tile:hover {
border-color: #1a73e8;
transform: translateY(-2px);
}
.bcu-badge-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
margin: 0 auto 10px;
}
.bcu-badge-label {
font-size: 13px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
/* ================= SECTION HEADING ================= */
.bcu-section {
margin-bottom: 32px;
}
.bcu-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.bcu-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= PROBLEM -> SOLUTION PAIRED LIST ================= */
.bcu-pair-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.bcu-pair-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 14px 18px;
}
@media (max-width: 800px) {
.bcu-pair-row {
grid-template-columns: 1fr;
gap: 10px;
}
.bcu-pair-arrow {
transform: rotate(90deg);
justify-self: center;
}
}
.bcu-pair-problem,
.bcu-pair-solution {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
font-family: var(--HeadingFont);
line-height: 1.4;
}
.bcu-pair-problem {
color: #6B7280;
}
.bcu-pair-solution {
color: #111827;
font-weight: 600;
}
.bcu-pair-icon {
font-size: 18px;
flex-shrink: 0;
}
.bcu-pair-icon.problem {
color: #B42318;
}
.bcu-pair-icon.solution {
color: #057A55;
}
.bcu-pair-arrow {
font-size: 18px;
color: #C7D2FE;
flex-shrink: 0;
}
/* ================= INTEGRATIONS STRIP ================= */
.bcu-integration-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.bcu-integration-item {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
text-align: center;
}
.bcu-integration-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #F3E8FF;
color: #7E22CE;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 auto 12px;
}
.bcu-integration-name {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.bcu-integration-desc {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= STATS ================= */
.bcu-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.bcu-stat-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
text-align: center;
}
.bcu-stat-ring {
width: 84px;
height: 84px;
border-radius: 50%;
border: 3px solid #EFF6FF;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 auto 12px;
}
.bcu-stat-label {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= SECURITY NOTE ================= */
.bcu-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.bcu-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.bcu-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.bcu-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************************ Government authorities css ***************/
.ga-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.ga-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.ga-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ga-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ga-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.ga-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.ga-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.ga-hero {
grid-template-columns: 1fr;
}
}
.ga-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.ga-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.ga-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
.ga-hero-graphic {
width: 100%;
max-width: 420px;
height: auto;
display: block;
margin: 0 auto;
}
/* ================= SECTION HEADING ================= */
.ga-section {
margin-bottom: 32px;
}
.ga-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
/* ================= WHO WE SERVE ================= */
.ga-agency-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.ga-agency-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.ga-agency-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ga-agency-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.ga-agency-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= DISBURSEMENT TYPES ================= */
.ga-type-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px 28px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
}
.ga-type-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
.ga-type-icon {
font-size: 21px;
color: #7E22CE;
flex-shrink: 0;
margin-top: 1px;
}
.ga-type-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 3px;
}
.ga-type-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= COMPLIANCE BADGES ================= */
.ga-compliance-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ga-compliance-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #F0FDF4;
border: 1px solid #BBF7D0;
color: #057A55;
padding: 10px 18px;
border-radius: 12px;
font-size: 13.5px;
font-weight: 700;
font-family: var(--HeadingFont);
}
.ga-compliance-badge i {
font-size: 17px;
}
/* ================= SECURITY NOTE ================= */
.ga-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.ga-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.ga-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.ga-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************** Legal & Trust Accounts css ***************/
.lta-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.lta-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.lta-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.lta-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.lta-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.lta-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.lta-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.lta-hero {
grid-template-columns: 1fr;
}
}
.lta-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.lta-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.lta-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
/* Trust account segmented balance card */
.lta-trust-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
box-shadow: 0 16px 40px rgba(17,24,39,.08);
padding: 24px;
}
.lta-trust-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 16px;
}
.lta-trust-label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #9CA3AF;
font-family: var(--HeadingFont);
}
.lta-trust-total {
font-size: 20px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.lta-segment-bar {
display: flex;
width: 100%;
height: 26px;
border-radius: 8px;
overflow: hidden;
margin-bottom: 16px;
}
.lta-segment {
height: 100%;
}
.seg-1 {
background: #1a73e8;
}
.seg-2 {
background: #7E22CE;
}
.seg-3 {
background: #10B981;
}
.seg-4 {
background: #F59E0B;
}
.seg-5 {
background: #EC4899;
}
.lta-segment-legend {
display: flex;
flex-direction: column;
gap: 8px;
}
.lta-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
color: #374151;
font-family: var(--HeadingFont);
}
.lta-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
/* ================= SECTION HEADING ================= */
.lta-section {
margin-bottom: 32px;
}
.lta-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.lta-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= THREE-WAY RECONCILIATION ================= */
.lta-recon-row {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
flex-wrap: wrap;
}
.lta-recon-card {
flex: 1;
min-width: 160px;
text-align: center;
padding: 12px;
}
.lta-recon-icon {
width: 40px;
height: 40px;
border-radius: 11px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
margin: 0 auto 10px;
}
.lta-recon-label {
font-size: 12px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.lta-recon-value {
font-size: 16px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.lta-recon-equals {
font-size: 20px;
color: #D1D5DB;
flex-shrink: 0;
}
.lta-recon-check {
display: flex;
align-items: center;
gap: 6px;
background: #D1FAE5;
color: #057A55;
font-size: 13px;
font-weight: 700;
font-family: var(--HeadingFont);
padding: 8px 16px;
border-radius: 20px;
flex-shrink: 0;
margin-left: auto;
}
@media (max-width: 700px) {
.lta-recon-row {
justify-content: center;
}
.lta-recon-check {
margin-left: 0;
width: 100%;
justify-content: center;
}
}
/* ================= EXAMPLE TABLE ================= */
.lta-table-wrap {
overflow-x: auto;
border: 1px solid #E5E7EB;
border-radius: 14px;
}
table.lta-table {
width: 100%;
border-collapse: collapse;
font-family: var(--HeadingFont);
background:#fff;
}
table.lta-table thead th {
background: #F9FAFB;
text-align: left;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: #6B7280;
padding: 12px 16px;
border-bottom: 1px solid #E5E7EB;
white-space: nowrap;
}
table.lta-table tbody td {
padding: 12px 16px;
font-size: 14px;
color: #111827;
border-bottom: 1px solid #F3F4F6;
}
table.lta-table tbody tr:last-child td {
border-bottom: none;
}
table.lta-table tbody tr:hover {
background: #FAFAFA;
}
/* ================= COMPLIANCE SEALS ================= */
.lta-seal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.lta-seal-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
text-align: center;
}
.lta-seal-icon {
width: 46px;
height: 46px;
border-radius: 50%;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
margin: 0 auto 12px;
}
.lta-seal-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.lta-seal-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= SECURITY NOTE ================= */
.lta-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.lta-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.lta-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.lta-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************************* Payment Platforms css *********************/
.pp-page {
padding: 0;
background:inherit !important;
}
/* ---------- Inline heading ---------- */
.pp-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.pp-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.pp-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.pp-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.pp-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.pp-hero {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.pp-hero {
grid-template-columns: 1fr;
}
}
.pp-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.pp-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.pp-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
/* ---------- Code mockup ---------- */
.pp-code-mockup {
background: #0B1220;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 48px rgba(11,18,32,.35);
}
.pp-code-head {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 16px;
background: #131B2E;
border-bottom: 1px solid #1F2A40;
}
.pp-code-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.pp-code-dot.red {
background: #EF4444;
}
.pp-code-dot.amber {
background: #F59E0B;
}
.pp-code-dot.green {
background: #10B981;
}
.pp-code-filename {
margin-left: 10px;
font-size: 12px;
color: #6B7A99;
font-family: 'Courier New', monospace;
}
.pp-code-body {
margin: 0;
padding: 18px 20px 22px;
font-family: 'Courier New', monospace;
font-size: 13px;
line-height: 1.7;
color: #CBD5E1;
overflow-x: auto;
white-space: pre;
}
.pp-code-comment {
color: #64748B;
}
.pp-code-method {
color: #F472B6;
font-weight: 700;
}
.pp-code-path {
color: #93C5FD;
}
.pp-code-brace {
color: #64748B;
}
.pp-code-key {
color: #7DD3FC;
}
.pp-code-string {
color: #86EFAC;
}
.pp-code-number {
color: #FCD34D;
}
.pp-code-status {
color: #4ADE80;
font-weight: 700;
}
/* ================= SECTION HEADING ================= */
.pp-section {
margin-bottom: 32px;
}
.pp-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.pp-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= FEATURE GRID ================= */
.pp-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.pp-feature-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.pp-feature-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.pp-feature-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.pp-feature-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= REQUEST / WEBHOOK LOOP ================= */
.pp-loop {
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 26px;
}
@media (max-width: 900px) {
.pp-loop {
flex-direction: column;
align-items: stretch;
}
.pp-loop-arrow {
flex-direction: row !important;
justify-content: center;
}
.pp-loop-arrow.back i {
transform: none !important;
}
}
.pp-loop-node {
flex: 1;
text-align: center;
padding: 8px;
}
.pp-loop-icon {
width: 46px;
height: 46px;
border-radius: 13px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
margin: 0 auto 12px;
}
.pp-loop-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.pp-loop-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.pp-loop-arrow {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
color: #93C5FD;
}
.pp-loop-arrow i {
font-size: 20px;
}
.pp-loop-arrow span {
font-size: 10.5px;
font-weight: 700;
color: #9CA3AF;
font-family: var(--HeadingFont);
white-space: nowrap;
}
/* ================= STAT BAND (dark, matches code mockup) ================= */
.pp-stat-band {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
background: #0B1220;
border-radius: 16px;
overflow: hidden;
}
.pp-stat-cell {
padding: 24px 18px;
text-align: center;
border-right: 1px solid #1F2A40;
}
.pp-stat-cell:last-child {
border-right: none;
}
.pp-stat-value {
font-size: 22px;
font-weight: 700;
color: #7DD3FC;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.pp-stat-label {
font-size: 12.5px;
color: #94A3B8;
font-family: var(--HeadingFont);
}
/* ================= SECURITY NOTE ================= */
.pp-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.pp-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.pp-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.pp-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/***************** Enterprise Finance Teams css *****************/
/* ===========================================================
Enterprise Finance Teams — "Ledger" design system
Fonts: Fraunces (display, hero only) / Inter (body/UI) / IBM Plex Mono (figures)
Load once in your root layout , e.g.:
=========================================================== */
.eft-page {
--eft-paper: #F5F7FA;
--eft-paper-card: #FFFFFF;
--eft-ink: #101B2D;
--eft-ink-soft: #52627A;
--eft-blue: #1D4ED8;
--eft-blue-dark: #14318C;
--eft-navy: #0B1B33;
--eft-accent: #D98E2B;
--eft-accent-soft: #F3C77A;
--eft-rule: #D8DEE7;
--eft-red: #C0392B;
--eft-status-ok: #1D4ED8;
color: var(--eft-ink);
font-family: var(--HeadingFont);
}
.eft-page .eft-mono {
font-family: var(--HeadingFont);
letter-spacing: -0.01em;
}
/* ---------------- Hero ---------------- */
.eft-hero {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 56px;
align-items: center;
padding:20px 0px 20px;
border-bottom: 1px solid var(--eft-rule);
}
.eft-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--eft-blue);
padding: 6px 14px;
border: 1px solid var(--eft-blue);
border-radius: 999px;
margin-bottom: 22px;
}
.eft-hero-title {
font-family: var(--HeadingFont);
font-optical-sizing: auto;
font-size: 44px;
line-height: 1.12;
letter-spacing: -0.01em;
margin: 0 0 20px;
color: var(--eft-ink);
}
.eft-hero-body {
font-size: 17px;
line-height: 1.6;
color: var(--eft-ink-soft);
max-width: 46ch;
margin: 0 0 32px;
}
.eft-hero-actions {
display: flex;
gap: 14px;
margin-bottom: 28px;
}
.eft-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
padding: 13px 22px;
border-radius: 6px;
text-decoration: none;
transition: transform 0.15s ease, background 0.15s ease;
}
.eft-btn-primary {
background: var(--eft-blue);
color: var(--eft-paper);
}
.eft-btn-primary:hover {
background: var(--eft-blue-dark);
}
.eft-btn-secondary {
background: transparent;
color: var(--eft-ink);
border: 1px solid var(--eft-rule);
}
.eft-btn-secondary:hover {
border-color: var(--eft-ink);
}
.eft-hero-trust {
font-size: 14px;
color: var(--eft-ink-soft);
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.eft-hero-trust-figure {
font-family: var(--HeadingFont);
color: var(--eft-accent);
}
/* ---------------- Signature ledger card ---------------- */
.eft-ledger-card {
position: relative;
background: var(--eft-paper-card);
border: 1px solid var(--eft-rule);
border-radius: 10px;
padding: 22px 24px 26px;
box-shadow: 0 18px 40px -24px rgba(22, 35, 31, 0.35);
}
.eft-ledger-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--eft-ink-soft);
padding-bottom: 14px;
margin-bottom: 6px;
border-bottom: 2px solid var(--eft-blue);
}
.eft-ledger-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--eft-blue);
}
.eft-ledger-row {
display: grid;
grid-template-columns: 1.5fr 1fr 0.8fr;
align-items: center;
padding: 11px 0;
border-bottom: 1px solid var(--eft-rule);
font-size: 14px;
}
.eft-ledger-row-head {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--eft-ink-soft);
border-bottom: none;
padding-top: 0;
}
.eft-ledger-row-highlight {
background: rgba(217, 142, 43, 0.08);
margin: 0 -12px;
padding: 11px 12px;
border-radius: 4px;
border-bottom-color: transparent;
}
.eft-status {
font-size: 12px;
font-weight: 600;
justify-self: start;
padding: 3px 9px;
border-radius: 999px;
}
.eft-status-cleared {
color: var(--eft-blue);
background: rgba(29, 78, 216, 0.1);
}
.eft-status-pending {
color: var(--eft-accent);
background: rgba(217, 142, 43, 0.14);
}
.eft-ledger-total {
display: flex;
justify-content: space-between;
padding-top: 14px;
margin-top: 4px;
font-size: 15px;
font-weight: 600;
}
.eft-stamp {
position: absolute;
top: -14px;
right: -10px;
font-family: var(--HeadingFont);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--eft-accent);
border: 2px solid var(--eft-accent);
border-radius: 8px;
padding: 6px 12px;
transform: rotate(6deg);
background: var(--eft-paper-card);
}
/* ---------------- Section heading ---------------- */
.eft-section {
padding: 30px 0;
border-bottom: 1px solid var(--eft-rule);
}
.eft-section-heading {
font-family: var(--HeadingFont);
font-size: 26px;
margin-bottom: 36px;
display: flex;
align-items: center;
gap: 12px;
}
.eft-example-tag {
font-family: var(--HeadingFont);
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--eft-ink-soft);
border: 1px solid var(--eft-rule);
border-radius: 999px;
padding: 4px 10px;
}
/* ---------------- Workflow — ruled ledger timeline ---------------- */
.eft-workflow {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.eft-workflow-line {
position: absolute;
top: 44px;
left: 4%;
right: 4%;
height: 1px;
background: var(--eft-rule);
}
.eft-workflow-step {
position: relative;
background: var(--eft-paper-card);
border: 1px solid var(--eft-rule);
border-radius: 8px;
padding: 20px 16px 18px;
}
.eft-workflow-marker {
font-family: var(--HeadingFont);
font-size: 12px;
color: var(--eft-accent);
margin-bottom: 10px;
}
.eft-workflow-icon {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 7px;
background: var(--eft-blue);
color: var(--eft-paper);
font-size: 18px;
margin-bottom: 14px;
}
.eft-workflow-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 6px;
}
.eft-workflow-desc {
font-size: 13px;
line-height: 1.5;
color: var(--eft-ink-soft);
}
/* ---------------- Feature grid ---------------- */
.eft-feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.eft-feature-card {
background: var(--eft-paper-card);
border: 1px solid var(--eft-rule);
border-left: 3px solid var(--eft-blue);
border-radius: 6px;
padding: 22px 20px;
}
.eft-feature-icon {
font-size: 22px;
color: var(--eft-blue);
margin-bottom: 14px;
display: block;
}
.eft-feature-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 8px;
}
.eft-feature-desc {
font-size: 13.5px;
line-height: 1.55;
color: var(--eft-ink-soft);
}
/* ---------------- Integrations strip ---------------- */
.eft-integration-strip {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.eft-integration-item {
border: 1px solid var(--eft-rule);
border-radius: 999px;
padding: 12px 24px;
font-weight: 600;
font-size: 14px;
background: var(--eft-paper-card);
}
/* ---------------- Metrics — ledger bar meters ---------------- */
.eft-metric-list {
display: flex;
flex-direction: column;
gap: 22px;
}
.eft-metric-row {
display: grid;
grid-template-columns: 260px 1fr 60px;
align-items: center;
gap: 18px;
}
.eft-metric-label {
font-size: 14px;
color: var(--eft-ink-soft);
}
.eft-metric-track {
height: 8px;
border-radius: 999px;
background: rgba(199, 205, 191, 0.5);
overflow: hidden;
}
.eft-metric-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--eft-blue), var(--eft-accent));
}
.eft-metric-value {
font-size: 14px;
text-align: right;
}
/* ---------------- Compliance band ---------------- */
.eft-compliance {
background: var(--eft-navy);
color: var(--eft-paper);
border-radius: 12px;
padding: 44px 48px;
margin: 64px 0;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 36px;
align-items: center;
}
.eft-compliance-title {
font-family: var(--HeadingFont);
font-size: 24px;
margin-bottom: 12px;
}
.eft-compliance-body {
font-size: 14.5px;
line-height: 1.6;
color: rgba(241, 243, 239, 0.8);
max-width: 46ch;
}
.eft-compliance-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-start;
}
.eft-chip {
font-size: 13px;
font-weight: 600;
color: var(--eft-accent-soft);
border: 1.5px solid var(--eft-accent-soft);
border-radius: 999px;
padding: 8px 16px;
}
/* ---------------- Closing CTA ---------------- */
.eft-cta {
padding-top: 64px;
text-align: center;
}
.eft-cta-title {
font-family: var(--HeadingFont);
font-size: 28px;
margin-bottom: 26px;
}
.eft-cta-actions {
display: flex;
justify-content: center;
gap: 14px;
}
/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
.eft-page {
padding: 40px 20px 72px;
}
.eft-hero {
grid-template-columns: 1fr;
}
.eft-workflow {
grid-template-columns: repeat(2, 1fr);
}
.eft-workflow-line {
display: none;
}
.eft-feature-grid {
grid-template-columns: 1fr 1fr;
}
.eft-compliance {
grid-template-columns: 1fr;
}
.eft-metric-row {
grid-template-columns: 1fr;
gap: 6px;
}
.eft-metric-value {
text-align: left;
}
.eft-hero-title {
font-size: 32px;
}
}
@media (max-width: 560px) {
.eft-feature-grid {
grid-template-columns: 1fr;
}
.eft-workflow {
grid-template-columns: 1fr;
}
}
/* ---------------- Reduced motion / accessibility ---------------- */
@media (prefers-reduced-motion: reduce) {
.eft-btn {
transition: none;
}
}
.eft-page a.eft-btn:focus-visible {
outline: 2px solid var(--eft-accent);
outline-offset: 2px;
}
/***************** About us css *************/
.abt-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.abt-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.abt-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.abt-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.abt-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.abt-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= MISSION STATEMENT ================= */
.abt-mission {
background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
border: 1px solid #DBEAFE;
border-radius: 20px;
padding: 40px 44px;
margin-bottom: 24px;
text-align: center;
}
@media (max-width: 700px) {
.abt-mission {
padding: 30px 24px;
}
}
.abt-mission-eyebrow {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 14px;
}
.abt-mission-statement {
font-size: 22px;
font-weight: 500;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.55;
max-width: 780px;
margin: 0 auto;
}
/* ================= STAT BANNER ================= */
.abt-stat-banner {
display: flex;
align-items: center;
gap: 24px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 28px 36px;
margin-bottom: 32px;
}
@media (max-width: 600px) {
.abt-stat-banner {
flex-direction: column;
text-align: center;
gap: 10px;
}
}
.abt-stat-number {
font-size: 48px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
line-height: 1;
flex-shrink: 0;
}
.abt-stat-text {
font-size: 15px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.5;
max-width: 460px;
}
/* ================= SECTION HEADING ================= */
.abt-section {
margin-bottom: 32px;
}
.abt-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ================= VALUES GRID ================= */
.abt-values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
}
.abt-value-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 24px;
}
.abt-value-icon {
width: 46px;
height: 46px;
border-radius: 13px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
margin-bottom: 14px;
}
.abt-value-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.abt-value-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.abt-value-icon.green {
background: #ECFDF5;
color: #057A55;
}
.abt-value-title {
font-size: 17px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 8px;
}
.abt-value-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.6;
}
/* ================= CONTACT CARD ================= */
.abt-contact-card {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 28px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 30px 34px;
align-items: center;
}
@media (max-width: 700px) {
.abt-contact-card {
grid-template-columns: 1fr;
}
.abt-contact-divider {
width: 100%;
height: 1px;
}
}
.abt-contact-left {
display: flex;
flex-direction: column;
gap: 14px;
}
.abt-contact-note {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.6;
}
.abt-contact-email {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
padding: 10px 18px;
border-radius: 10px;
background: #1a73e8;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
font-family: var(--HeadingFont);
transition: background .15s;
}
.abt-contact-email:hover {
background: #1558b0;
}
.abt-contact-email i {
font-size: 17px;
}
.abt-contact-divider {
width: 1px;
height: 100%;
min-height: 90px;
background: #E5E7EB;
}
.abt-contact-right {
display: flex;
flex-direction: column;
gap: 4px;
}
.abt-legal-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.abt-legal-name {
font-size: 16px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.abt-legal-sub {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
font-style: italic;
margin-bottom: 10px;
}
.abt-legal-address {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13.5px;
color: #374151;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.abt-legal-address i {
font-size: 17px;
color: #9CA3AF;
margin-top: 1px;
flex-shrink: 0;
}
/*************** blog css ***************/
.blog-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.blog-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.blog-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.blog-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.blog-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.blog-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= FEATURED POST ================= */
.blog-featured {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 20px;
overflow: hidden;
margin-bottom: 32px;
}
@media (max-width: 800px) {
.blog-featured {
grid-template-columns: 1fr;
}
}
.blog-featured-image {
background: linear-gradient(135deg, #1a44a3 0%, #1a73e8 60%, #60A5FA 100%);
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
.blog-featured-image i {
font-size: 64px;
color: rgba(255,255,255,.85);
}
.blog-featured-body {
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
}
.blog-featured-title {
font-size: 22px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.3;
}
.blog-featured-excerpt {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.6;
}
.blog-featured-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #9CA3AF;
font-family: var(--HeadingFont);
}
.blog-meta-dot {
color: #D1D5DB;
}
/* ================= TAGS ================= */
.blog-tag {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 4px 12px;
border-radius: 20px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
}
.blog-tag.product {
background: #EFF6FF;
color: #1a73e8;
}
.blog-tag.compliance {
background: #FEF3C7;
color: #92400E;
}
.blog-tag.industry {
background: #F3E8FF;
color: #7E22CE;
}
.blog-tag.company {
background: #ECFDF5;
color: #057A55;
}
/* ================= SECTION / CHIPS ================= */
.blog-section {
margin-bottom: 32px;
}
.blog-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.blog-chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #E5E7EB;
background: #fff;
color: #6B7280;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: var(--HeadingFont);
transition: all .15s;
}
.blog-chip:hover {
border-color: #1a73e8;
color: #1a73e8;
}
.blog-chip.active {
background: #1a73e8;
border-color: #1a73e8;
color: #fff;
}
/* ================= GRID / CARDS ================= */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.blog-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
transition: border-color .15s, transform .15s;
}
.blog-card:hover {
border-color: #1a73e8;
transform: translateY(-2px);
}
.blog-card-image {
height: 100px;
background: #F3F4F6;
display: flex;
align-items: center;
justify-content: center;
}
.blog-card-image i {
font-size: 34px;
color: #9CA3AF;
}
.blog-card-body {
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
.blog-card-title {
font-size: 15px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.4;
}
.blog-card-excerpt {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
.blog-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-top: 2px;
}
.blog-empty-state {
text-align: center;
padding: 40px 20px;
color: #9CA3AF;
font-family: var(--HeadingFont);
}
/* ================= NEWSLETTER ================= */
.blog-newsletter {
display: flex;
align-items: center;
gap: 20px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 26px 30px;
flex-wrap: wrap;
}
.blog-newsletter-icon {
width: 46px;
height: 46px;
border-radius: 13px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
flex-shrink: 0;
}
.blog-newsletter-text {
flex: 1;
min-width: 200px;
}
.blog-newsletter-title {
font-size: 15.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 3px;
}
.blog-newsletter-sub {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
}
.blog-newsletter-form {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.blog-newsletter-input {
border: 1px solid #D1D5DB;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
font-family: var(--HeadingFont);
color: #111827;
background: #fff;
min-width: 220px;
}
.blog-newsletter-input:focus {
outline: none;
border-color: #1a73e8;
box-shadow: 0 0 0 3px rgba(26,115,232,.12);
}
.blog-newsletter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 22px;
border-radius: 10px;
border: none;
background: #1a73e8;
color: #fff;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: var(--HeadingFont);
transition: background .15s;
white-space: nowrap;
}
.blog-newsletter-btn:hover {
background: #1558b0;
}
.blog-newsletter-btn:disabled {
background: #9CA3AF;
cursor: not-allowed;
}
.blog-newsletter-error {
font-size: 13px;
color: #DC2626;
font-family: var(--HeadingFont);
margin-top: 8px;
}
/*************** Leadership css *******************/
.ldr-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.ldr-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.ldr-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.ldr-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ldr-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.ldr-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= PLACEHOLDER NOTICE ================= */
.ldr-placeholder-note {
display: flex;
align-items: flex-start;
gap: 10px;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: 12px;
padding: 12px 16px;
font-size: 13px;
color: #92400E;
font-family: var(--HeadingFont);
line-height: 1.5;
margin-bottom: 24px;
}
.ldr-placeholder-note i {
font-size: 18px;
flex-shrink: 0;
margin-top: 1px;
}
/* ================= INTRO ================= */
.ldr-intro {
font-size: 16px;
color: #374151;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 760px;
margin-bottom: 32px;
}
/* ================= SECTION HEADING ================= */
.ldr-section {
margin-bottom: 36px;
}
.ldr-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 16px;
}
/* ================= EXECUTIVE GRID ================= */
.ldr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
.ldr-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ldr-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 700;
font-family: var(--HeadingFont);
margin-bottom: 14px;
}
.ldr-name {
font-size: 16px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.ldr-title {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
margin-bottom: 8px;
}
.ldr-tag {
display: inline-flex;
font-size: 11px;
font-weight: 700;
color: #1a73e8;
background: #EFF6FF;
padding: 3px 10px;
border-radius: 10px;
margin-bottom: 12px;
}
.ldr-bio {
font-size: 13px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.6;
margin-bottom: 16px;
}
.ldr-linkedin {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: #1a73e8;
text-decoration: none;
font-family: var(--HeadingFont);
}
.ldr-linkedin:hover {
text-decoration: underline;
}
.ldr-linkedin i {
font-size: 15px;
}
/* ================= ADVISORY BOARD ================= */
.ldr-advisor-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.ldr-advisor-card {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 14px 16px;
}
.ldr-advisor-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
font-family: var(--HeadingFont);
flex-shrink: 0;
}
.ldr-advisor-name {
font-size: 13.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.ldr-advisor-title {
font-size: 12px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/******************* career page css ***************/
.car-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.car-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.car-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.car-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.car-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.car-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= PLACEHOLDER NOTICE ================= */
.car-placeholder-note {
display: flex;
align-items: flex-start;
gap: 10px;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: 12px;
padding: 12px 16px;
font-size: 13px;
color: #92400E;
font-family: var(--HeadingFont);
line-height: 1.5;
margin-bottom: 24px;
}
.car-placeholder-note i {
font-size: 18px;
flex-shrink: 0;
margin-top: 1px;
}
/* ================= STAT STRIP ================= */
.car-stat-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
margin-bottom: 32px;
}
.car-stat-cell {
padding: 22px 18px;
text-align: center;
border-right: 1px solid #E5E7EB;
background: #fff;
}
.car-stat-cell:last-child {
border-right: none;
}
.car-stat-value {
font-size: 20px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.car-stat-label {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= SECTION HEADING ================= */
.car-section {
margin-bottom: 32px;
}
.car-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 16px;
}
/* ================= BENEFITS GRID ================= */
.car-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.car-benefit-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.car-benefit-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.car-benefit-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.car-benefit-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.car-benefit-icon.green {
background: #ECFDF5;
color: #057A55;
}
.car-benefit-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.car-benefit-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.car-benefit-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= CHIPS ================= */
.car-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.car-chip {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 20px;
border: 1px solid #E5E7EB;
background: #fff;
color: #6B7280;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
font-family: var(--HeadingFont);
transition: all .15s;
}
.car-chip:hover {
border-color: #1a73e8;
color: #1a73e8;
}
.car-chip.active {
background: #1a73e8;
border-color: #1a73e8;
color: #fff;
}
/* ================= JOB LIST (rows, not cards) ================= */
.car-job-list {
border: 1px solid #E5E7EB;
border-radius: 14px;
overflow: hidden;
}
.car-job-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
background: #fff;
border-bottom: 1px solid #F3F4F6;
transition: background .15s;
}
.car-job-row:last-child {
border-bottom: none;
}
.car-job-row:hover {
background: #FAFAFA;
}
.car-job-title {
font-size: 15px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.car-job-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
flex-wrap: wrap;
}
.car-meta-dot {
color: #D1D5DB;
}
.car-job-dept {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .3px;
padding: 2px 9px;
border-radius: 10px;
}
.car-job-dept.engineering {
background: #EFF6FF;
color: #1a73e8;
}
.car-job-dept.compliance {
background: #FEF3C7;
color: #92400E;
}
.car-job-dept.operations {
background: #ECFDF5;
color: #057A55;
}
.car-job-dept.sales {
background: #F3E8FF;
color: #7E22CE;
}
.car-apply-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 18px;
border-radius: 9px;
border: 1px solid #1a73e8;
background: #EFF6FF;
color: #1a73e8;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
font-family: var(--HeadingFont);
transition: all .15s;
flex-shrink: 0;
}
.car-apply-btn:hover {
background: #1a73e8;
color: #fff;
}
.car-apply-btn i {
font-size: 15px;
}
.car-empty-state {
text-align: center;
padding: 32px 20px;
color: #9CA3AF;
font-family: var(--HeadingFont);
font-size: 14px;
}
/* ================= CATCH-ALL CTA ================= */
.car-cta {
display: flex;
align-items: center;
gap: 20px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 26px 30px;
flex-wrap: wrap;
}
.car-cta-icon {
width: 46px;
height: 46px;
border-radius: 13px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
flex-shrink: 0;
}
.car-cta-text {
flex: 1;
min-width: 220px;
}
.car-cta-title {
font-size: 15.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 3px;
}
.car-cta-sub {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
}
.car-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 22px;
border-radius: 10px;
background: #1a73e8;
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
font-family: var(--HeadingFont);
transition: background .15s;
white-space: nowrap;
}
.car-cta-btn:hover {
background: #1558b0;
}
/********************** Banking-as-a-Service css *************/
.baas-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.baas-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.baas-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.baas-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.baas-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.baas-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.baas-hero {
display: grid;
grid-template-columns: 1fr 0.9fr;
gap: 36px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.baas-hero {
grid-template-columns: 1fr;
}
}
.baas-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.baas-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.baas-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
/* ---------- Layered architecture stack ---------- */
.baas-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.baas-stack-layer {
display: flex;
align-items: center;
gap: 14px;
border-radius: 14px;
padding: 16px 20px;
}
.layer-user {
background: #F3F4F6;
border: 1px solid #E5E7EB;
}
.layer-platform {
background: #EFF6FF;
border: 1px solid #BFDBFE;
}
.layer-baas {
background: #DBEAFE;
border: 1px solid #93C5FD;
}
.layer-bank {
background: #1a73e8;
border: 1px solid #1558b0;
}
.layer-bank .baas-stack-title,
.layer-bank .baas-stack-sub {
color: #fff;
}
.layer-bank .baas-stack-icon {
background: rgba(255,255,255,.2);
color: #fff;
}
.baas-stack-icon {
width: 40px;
height: 40px;
border-radius: 11px;
background: #fff;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.baas-stack-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.baas-stack-sub {
font-size: 12px;
color: #6B7280;
font-family: var(--HeadingFont);
margin-top: 2px;
}
.baas-stack-arrow {
display: flex;
justify-content: center;
padding: 4px 0;
color: #93C5FD;
}
.baas-stack-arrow i {
font-size: 18px;
}
/* ================= SECTION HEADING ================= */
.baas-section {
margin-bottom: 32px;
}
.baas-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ================= CAPABILITY GRID ================= */
.baas-capability-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.baas-capability-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.baas-capability-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.baas-capability-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.baas-capability-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.baas-capability-icon.green {
background: #ECFDF5;
color: #057A55;
}
.baas-capability-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.baas-capability-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.baas-capability-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= USE CASE ROW ================= */
.baas-usecase-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px 28px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 24px;
}
.baas-usecase-item {
text-align: left;
}
.baas-usecase-icon {
font-size: 24px;
color: #7E22CE;
margin-bottom: 10px;
display: block;
}
.baas-usecase-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.baas-usecase-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
/* ================= RESPONSIBILITY SPLIT ================= */
.baas-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 800px) {
.baas-split {
grid-template-columns: 1fr;
}
}
.baas-split-col {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
}
.baas-split-col.itspaid {
border-top: 3px solid #1a73e8;
}
.baas-split-col.platform {
border-top: 3px solid #7E22CE;
}
.baas-split-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 14px;
}
.baas-split-head i {
font-size: 19px;
color: #1a73e8;
}
.baas-split-col.platform .baas-split-head i {
color: #7E22CE;
}
.baas-split-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.baas-split-list li {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 13.5px;
color: #374151;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.baas-split-list li i {
font-size: 16px;
color: #10B981;
margin-top: 1px;
flex-shrink: 0;
}
/* ================= SECURITY NOTE ================= */
.baas-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.baas-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.baas-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.baas-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************************** Payment_Processing css **********************/
.payproc-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.payproc-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.payproc-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.payproc-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.payproc-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.payproc-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.payproc-hero {
margin-bottom: 32px;
}
.payproc-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.payproc-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.payproc-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 640px;
margin-bottom: 28px;
}
/* ---------- Timed lifecycle pipeline ---------- */
.payproc-lifecycle {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: wrap;
}
.payproc-stage {
flex: 1;
min-width: 180px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
text-align: center;
}
.payproc-stage-icon {
width: 44px;
height: 44px;
border-radius: 13px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
margin: 0 auto 12px;
}
.payproc-stage-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.payproc-stage-time {
display: inline-block;
font-size: 12px;
font-weight: 700;
color: #057A55;
background: #ECFDF5;
padding: 2px 10px;
border-radius: 10px;
margin-bottom: 8px;
}
.payproc-stage-desc {
font-size: 12px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.payproc-stage-arrow {
display: flex;
align-items: center;
font-size: 18px;
color: #C7D2FE;
flex-shrink: 0;
}
@media (max-width: 900px) {
.payproc-lifecycle {
flex-direction: column;
}
.payproc-stage-arrow {
transform: rotate(90deg);
align-self: center;
}
}
/* ================= SECTION HEADING ================= */
.payproc-section {
margin-bottom: 32px;
}
.payproc-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.payproc-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= PAYMENT METHOD GRID ================= */
.payproc-method-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.payproc-method-tile {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px;
text-align: center;
transition: border-color .15s, transform .15s;
}
.payproc-method-tile:hover {
border-color: #1a73e8;
transform: translateY(-2px);
}
.payproc-method-icon {
width: 42px;
height: 42px;
border-radius: 12px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin: 0 auto 10px;
}
.payproc-method-name {
font-size: 13.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
/* ================= SMART ROUTING ================= */
.payproc-routing-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 28px;
align-items: center;
}
@media (max-width: 800px) {
.payproc-routing-card {
grid-template-columns: 1fr;
}
}
.payproc-routing-title {
font-size: 16px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.4;
margin-bottom: 10px;
}
.payproc-routing-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.6;
}
.payproc-routing-diagram {
display: flex;
align-items: center;
gap: 14px;
}
.payproc-routing-source {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 14px;
padding: 16px;
font-size: 12px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
}
.payproc-routing-source i {
font-size: 22px;
}
.payproc-routing-paths {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.payproc-route {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #E5E7EB;
font-family: var(--HeadingFont);
}
.payproc-route-label {
font-size: 13px;
font-weight: 700;
color: #6B7280;
}
.payproc-route-tag {
font-size: 11px;
color: #9CA3AF;
}
.payproc-route.selected {
background: #ECFDF5;
border-color: #6EE7B7;
}
.payproc-route.selected .payproc-route-label {
color: #057A55;
}
.payproc-route.selected .payproc-route-tag {
color: #057A55;
font-weight: 700;
}
.payproc-route.rejected {
opacity: .6;
}
/* ================= RISK SCREENING STRIP ================= */
.payproc-risk-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.payproc-risk-cell {
padding: 22px 16px;
text-align: center;
border-right: 1px solid #E5E7EB;
background: #fff;
}
.payproc-risk-cell:last-child {
border-right: none;
}
.payproc-risk-value {
font-size: 16px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.payproc-risk-label {
font-size: 12px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.4;
}
/* ================= SECURITY NOTE ================= */
.payproc-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.payproc-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.payproc-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.payproc-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/******************* Network Connectivity css ****************/
.netconn-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.netconn-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.netconn-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.netconn-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.netconn-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.netconn-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.netconn-hero {
margin-bottom: 32px;
}
.netconn-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.netconn-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.netconn-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 640px;
margin-bottom: 26px;
}
/* ---------- Live network status dashboard ---------- */
.netconn-status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
}
.netconn-status-card {
display: flex;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 14px 18px;
}
.netconn-status-dot {
width: 11px;
height: 11px;
border-radius: 50%;
background: #10B981;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(16,185,129,.15);
animation: netconn-pulse 2s ease-in-out infinite;
}
@keyframes netconn-pulse {
0%, 100% {
box-shadow: 0 0 0 4px rgba(16,185,129,.15);
}
50% {
box-shadow: 0 0 0 7px rgba(16,185,129,.08);
}
}
.netconn-status-name {
font-size: 13.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
}
.netconn-status-type {
font-size: 11.5px;
color: #6B7280;
font-family: var(--HeadingFont);
margin-top: 1px;
}
/* ================= SECTION HEADING ================= */
.netconn-section {
margin-bottom: 32px;
}
.netconn-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.netconn-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= REDUNDANCY DIAGRAM ================= */
.netconn-redundancy-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 28px;
}
.netconn-redundancy-title {
font-size: 16px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 8px;
}
.netconn-redundancy-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.6;
max-width: 620px;
margin-bottom: 24px;
}
.netconn-redundancy-diagram {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 18px;
}
.netconn-redundancy-path {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 16px 18px;
font-family: var(--HeadingFont);
font-size: 13px;
font-weight: 700;
color: #374151;
min-width: 150px;
}
.netconn-redundancy-path i {
font-size: 22px;
color: #9CA3AF;
}
.netconn-redundancy-path.primary {
border-color: #6EE7B7;
background: #ECFDF5;
}
.netconn-redundancy-path.primary i {
color: #057A55;
}
.netconn-redundancy-badge {
font-size: 10.5px;
font-weight: 700;
padding: 2px 10px;
border-radius: 10px;
}
.netconn-redundancy-badge.active {
background: #D1FAE5;
color: #057A55;
}
.netconn-redundancy-badge.standby {
background: #F3F4F6;
color: #6B7280;
}
.netconn-redundancy-network {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: #EFF6FF;
border: 1px solid #BFDBFE;
border-radius: 50%;
width: 90px;
height: 90px;
justify-content: center;
font-family: var(--HeadingFont);
font-size: 12px;
font-weight: 700;
color: #1a73e8;
flex-shrink: 0;
}
.netconn-redundancy-network i {
font-size: 24px;
}
.netconn-redundancy-arrow {
font-size: 18px;
color: #C7D2FE;
flex-shrink: 0;
}
.netconn-redundancy-arrow.reverse {
color: #D1D5DB;
}
@media (max-width: 700px) {
.netconn-redundancy-diagram {
flex-direction: column;
}
.netconn-redundancy-arrow {
transform: rotate(90deg);
}
}
.netconn-failover-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
border-radius: 10px;
padding: 10px 16px;
font-family: var(--HeadingFont);
}
.netconn-failover-note i {
font-size: 17px;
}
/* ================= STATS GRID ================= */
.netconn-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.netconn-stat-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
text-align: center;
}
.netconn-stat-value {
font-size: 22px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.netconn-stat-label {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= SECURITY NOTE ================= */
.netconn-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.netconn-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.netconn-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.netconn-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/********************* ComplianceAndRisk css *************/
.cr-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.cr-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.cr-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.cr-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cr-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.cr-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.cr-hero {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.cr-hero {
grid-template-columns: 1fr;
}
}
.cr-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.cr-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.cr-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
}
/* ---------- Risk gauge ---------- */
.cr-gauge-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 18px;
padding: 24px;
text-align: center;
}
.cr-gauge {
width: 100%;
max-width: 260px;
height: auto;
margin: 0 auto;
display: block;
}
.cr-gauge-score {
font-size: 30px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-top: 8px;
}
.cr-gauge-score span {
font-size: 16px;
font-weight: 600;
color: #9CA3AF;
}
.cr-gauge-label {
display: inline-block;
font-size: 12.5px;
font-weight: 700;
padding: 3px 12px;
border-radius: 12px;
margin-top: 6px;
}
.cr-gauge-label.low {
background: #D1FAE5;
color: #057A55;
}
.cr-gauge-caption {
font-size: 12px;
color: #9CA3AF;
font-family: var(--HeadingFont);
margin-top: 10px;
}
/* ================= SECTION HEADING ================= */
.cr-section {
margin-bottom: 32px;
}
.cr-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
display: flex;
align-items: center;
}
.cr-example-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
color: #92400E;
background: #FEF3C7;
border: 1px solid #FDE68A;
padding: 2px 9px;
border-radius: 10px;
margin-left: 10px;
}
/* ================= COMPLIANCE PYRAMID ================= */
.cr-pyramid {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.cr-pyramid-tier {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--HeadingFont);
font-size: 13.5px;
font-weight: 700;
padding: 16px;
border-radius: 8px;
text-align: center;
}
.tier-1 {
width: 40%;
background: #93C5FD;
}
.tier-2 {
width: 58%;
background: #60A5FA;
}
.tier-3 {
width: 76%;
background: #3B82F6;
}
.tier-4 {
width: 94%;
background: #1a73e8;
}
.cr-pyramid-caption {
text-align: center;
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
margin-top: 14px;
}
/* ================= CASE MANAGEMENT FLOW ================= */
.cr-case-flow {
display: flex;
align-items: stretch;
gap: 10px;
flex-wrap: wrap;
}
.cr-case-step {
flex: 1;
min-width: 180px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
}
.cr-case-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.cr-case-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.cr-case-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.cr-case-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.cr-case-icon.green {
background: #ECFDF5;
color: #057A55;
}
.cr-case-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.cr-case-body {
font-size: 12.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
}
.cr-case-arrow {
display: flex;
align-items: center;
font-size: 18px;
color: #C7D2FE;
flex-shrink: 0;
}
@media (max-width: 900px) {
.cr-case-flow {
flex-direction: column;
}
.cr-case-arrow {
transform: rotate(90deg);
align-self: center;
}
}
/* ================= REGULATORY TAGS ================= */
.cr-reg-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cr-reg-tag {
display: inline-flex;
align-items: center;
padding: 8px 16px;
border-radius: 20px;
background: #F3F4F6;
color: #374151;
font-size: 13px;
font-weight: 700;
font-family: var(--HeadingFont);
border: 1px solid #E5E7EB;
}
/* ================= SECURITY NOTE ================= */
.cr-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.cr-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.cr-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.cr-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/**************** API overview css **************/
.apiov-page {
padding: 0;
}
/* ---------- Inline heading ---------- */
.apiov-heading {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 0 20px;
margin-bottom: 8px;
border-bottom: 1px solid #EEF0F2;
}
.apiov-heading-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #EFF6FF;
color: #1a73e8;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.apiov-heading-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.apiov-heading-title {
font-size: 22px;
font-weight: 400;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
}
.apiov-heading-subtitle {
font-size: 14px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= HERO ================= */
.apiov-hero {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 32px;
align-items: center;
margin-bottom: 32px;
}
@media (max-width: 900px) {
.apiov-hero {
grid-template-columns: 1fr;
}
}
.apiov-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
background: #EFF6FF;
border: 1px solid #DBEAFE;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 16px;
}
.apiov-hero-title {
font-size: 28px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
line-height: 1.25;
margin-bottom: 12px;
}
.apiov-hero-body {
font-size: 14.5px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
max-width: 460px;
margin-bottom: 18px;
}
.apiov-base-url {
display: flex;
align-items: center;
gap: 10px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 10px 16px;
width: fit-content;
}
.apiov-base-url-label {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: #9CA3AF;
font-family: var(--HeadingFont);
}
.apiov-base-url code {
font-size: 13px;
font-family: 'Courier New', monospace;
color: #1a73e8;
font-weight: 700;
}
/* ---------- Light-themed reference card ---------- */
.apiov-ref-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(17,24,39,.06);
}
.apiov-ref-tabs {
display: flex;
gap: 4px;
padding: 10px 14px 0;
border-bottom: 1px solid #E5E7EB;
background: #F9FAFB;
}
.apiov-ref-tab {
font-size: 12.5px;
font-weight: 700;
color: #9CA3AF;
font-family: var(--HeadingFont);
padding: 8px 14px;
border-bottom: 2px solid transparent;
}
.apiov-ref-tab.active {
color: #1a73e8;
border-bottom-color: #1a73e8;
}
.apiov-ref-code {
margin: 0;
padding: 18px 20px 22px;
font-family: 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.7;
color: #374151;
overflow-x: auto;
white-space: pre;
background: #fff;
}
.apiov-c-method {
color: #7E22CE;
font-weight: 700;
}
.apiov-c-path {
color: #1a73e8;
}
.apiov-c-header {
color: #6B7280;
}
.apiov-c-string {
color: #057A55;
}
.apiov-c-comment {
color: #9CA3AF;
}
.apiov-c-brace {
color: #9CA3AF;
}
.apiov-c-key {
color: #B45309;
}
.apiov-c-number {
color: #DC2626;
}
.apiov-c-status {
color: #057A55;
font-weight: 700;
}
/* ================= SECTION HEADING ================= */
.apiov-section {
margin-bottom: 32px;
}
.apiov-section-heading {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: #1a73e8;
font-family: var(--HeadingFont);
margin: 0 0 14px;
}
/* ================= AUTHENTICATION ================= */
.apiov-auth-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 22px;
}
.apiov-auth-text {
font-size: 14px;
color: #4B5563;
font-family: var(--HeadingFont);
line-height: 1.65;
margin-bottom: 16px;
}
.apiov-auth-text code {
background: #F3F4F6;
padding: 1px 6px;
border-radius: 5px;
font-family: 'Courier New', monospace;
font-size: 13px;
color: #1a73e8;
}
.apiov-auth-snippet {
background: #111827;
border-radius: 10px;
padding: 12px 16px;
}
.apiov-auth-snippet code {
font-family: 'Courier New', monospace;
font-size: 13px;
color: #86EFAC;
}
/* ================= ENDPOINT GRID ================= */
.apiov-endpoint-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px;
}
.apiov-endpoint-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px;
transition: border-color .15s, transform .15s;
}
.apiov-endpoint-card:hover {
border-color: #1a73e8;
transform: translateY(-2px);
}
.apiov-endpoint-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 12px;
}
.apiov-endpoint-icon.blue {
background: #EFF6FF;
color: #1a73e8;
}
.apiov-endpoint-icon.purple {
background: #F3E8FF;
color: #7E22CE;
}
.apiov-endpoint-icon.green {
background: #ECFDF5;
color: #057A55;
}
.apiov-endpoint-icon.amber {
background: #FEF3C7;
color: #92400E;
}
.apiov-endpoint-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 6px;
}
.apiov-endpoint-body {
font-size: 13px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.5;
margin-bottom: 12px;
}
.apiov-endpoint-badge {
display: inline-flex;
font-size: 11px;
font-weight: 700;
color: #6B7280;
background: #F3F4F6;
padding: 3px 10px;
border-radius: 10px;
}
/* ================= INFO STRIP ================= */
.apiov-info-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
border: 1px solid #E5E7EB;
border-radius: 16px;
overflow: hidden;
}
.apiov-info-cell {
padding: 20px 16px;
text-align: center;
border-right: 1px solid #E5E7EB;
background: #fff;
}
.apiov-info-cell:last-child {
border-right: none;
}
.apiov-info-value {
font-size: 16px;
font-weight: 700;
color: #1a73e8;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.apiov-info-label {
font-size: 12px;
color: #6B7280;
font-family: var(--HeadingFont);
}
/* ================= SDK ROW ================= */
.apiov-sdk-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.apiov-sdk-tile {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 12px 20px;
font-size: 13.5px;
font-weight: 700;
color: #374151;
font-family: var(--HeadingFont);
}
.apiov-sdk-tile i {
font-size: 18px;
color: #1a73e8;
}
/* ================= SECURITY NOTE ================= */
.apiov-security-note {
display: flex;
align-items: flex-start;
gap: 14px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 20px 22px;
}
.apiov-security-icon {
width: 38px;
height: 38px;
border-radius: 10px;
background: #ECFDF5;
color: #057A55;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
flex-shrink: 0;
}
.apiov-security-title {
font-size: 14px;
font-weight: 700;
color: #111827;
font-family: var(--HeadingFont);
margin-bottom: 4px;
}
.apiov-security-body {
font-size: 13.5px;
color: #6B7280;
font-family: var(--HeadingFont);
line-height: 1.55;
}
/************* Qucikstart css ***************/
/* Quickstart page — uses the same palette as KYC / Send Money:
blue #185fa5 (primary), indigo #6366F1 (accent), green #16A34A (done),
amber #D97706 (in progress), neutral grays for text/borders. */
.qs-page {
font-family: inherit;
color: #111827;
}
.qs-heading {
margin-bottom: 28px;
}
.qs-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4338CA;
background: #EEF2FF;
border: 1px solid #C7D2FE;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 14px;
}
.qs-title {
font-size: 28px;
font-weight: 800;
letter-spacing: -0.01em;
margin: 0 0 8px;
color: #111827;
}
.qs-sub {
font-size: 14px;
color: #6B7280;
line-height: 1.6;
max-width: 560px;
margin: 0;
}
/* ================= RAIL PANEL ================= */
.qs-rail-panel {
background: linear-gradient(135deg, #185fa5, #0C447C);
border-radius: 16px;
padding: 26px 28px 20px;
margin-bottom: 32px;
}
.qs-rail-panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 22px;
flex-wrap: wrap;
gap: 8px;
}
.qs-rail-panel-title {
color: #fff;
font-weight: 700;
font-size: 14px;
}
.qs-rail-panel-status {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: #FDE68A;
letter-spacing: 0.02em;
}
.qs-pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #FBBF24;
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.6);
animation: qs-pulse 1.8s infinite;
}
@keyframes qs-pulse {
0% {
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.5);
}
70% {
box-shadow: 0 0 0 7px rgba(251, 191, 36, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
}
}
.qs-track {
position: relative;
padding: 4px 4px 0;
}
.qs-track-line {
position: absolute;
top: 24px;
left: 24px;
right: 24px;
height: 3px;
background: rgba(255, 255, 255, 0.18);
border-radius: 2px;
z-index: 0;
}
.qs-track-line-fill {
height: 100%;
background: #34D399;
border-radius: 2px;
transition: width 0.3s ease;
}
.qs-stations {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
}
.qs-station {
display: flex;
flex-direction: column;
align-items: center;
width: 108px;
}
.qs-dot {
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
border: 2px solid rgba(255, 255, 255, 0.35);
background: #0C447C;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 8px;
}
.qs-station.qs-done .qs-dot {
background: #16A34A;
border-color: #16A34A;
color: #fff;
}
.qs-station.qs-current .qs-dot {
background: #F59E0B;
border-color: #FDE68A;
color: #3A2705;
box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.22);
}
.qs-st-code {
font-size: 10px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.qs-station.qs-done .qs-st-code,
.qs-station.qs-current .qs-st-code {
color: rgba(255, 255, 255, 0.85);
}
.qs-st-name {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
text-align: center;
line-height: 1.3;
}
.qs-station.qs-done .qs-st-name,
.qs-station.qs-current .qs-st-name {
color: #fff;
font-weight: 600;
}
/* ================= STOP CARDS ================= */
.qs-stops {
display: flex;
flex-direction: column;
gap: 14px;
}
.qs-stop-card {
display: flex;
gap: 16px;
background: #fff;
border: 1.5px solid #E5E7EB;
border-radius: 12px;
padding: 18px 20px;
}
.qs-stop-card.qs-current {
border-color: #FDE68A;
background: #FFFBEB;
}
.qs-stop-card.qs-done {
border-color: #BBF7D0;
background: #F0FDF4;
}
.qs-stop-marker {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #E5E7EB;
color: #6B7280;
font-weight: 700;
font-size: 13px;
}
.qs-stop-card.qs-done .qs-stop-marker {
background: #16A34A;
color: #fff;
}
.qs-stop-card.qs-current .qs-stop-marker {
background: #F59E0B;
color: #fff;
}
.qs-stop-body {
flex: 1;
}
.qs-stop-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
gap: 10px;
flex-wrap: wrap;
}
.qs-stop-title {
font-weight: 700;
font-size: 15px;
color: #111827;
}
.qs-stop-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 10px;
white-space: nowrap;
}
.qs-tag-done {
background: #DCFCE7;
color: #166534;
}
.qs-tag-current {
background: #FEF3C7;
color: #92400E;
}
.qs-stop-desc {
font-size: 13px;
color: #6B7280;
line-height: 1.55;
margin: 0 0 10px;
}
.qs-stop-cta {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 700;
color: #185fa5;
text-decoration: none;
border-bottom: 1px solid #185fa5;
padding-bottom: 1px;
}
.qs-stop-cta:hover {
color: #0C447C;
border-color: #0C447C;
}
.qs-code-block {
margin-top: 10px;
background: #111827;
border-radius: 8px;
padding: 12px 14px;
font-family: 'Courier New', monospace;
font-size: 12px;
color: #A7F3D0;
line-height: 1.6;
overflow-x: auto;
}
.qs-code-cmt {
color: #9CA3AF;
}
@media (max-width: 640px) {
.qs-stations {
flex-wrap: wrap;
row-gap: 20px;
}
.qs-track-line {
display: none;
}
.qs-station {
width: 33%;
}
}
/******************* Webhooks css *****************/
/* Webhooks page — matches the /api-overview and /banking-as-a-service
conventions: light hero with a reference card, rzi icon font, colored
capability grids, dark code blocks. */
.wh-page {
width: 100%;
color: #111827;
font-family: var(--HeadingFont);
box-sizing: border-box;
}
/* ================= Heading ================= */
.wh-heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.wh-heading-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #EEF2FF;
color: #4338CA;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.wh-heading-title {
display: block;
font-size: 22px;
font-weight: 800;
color: #111827;
}
.wh-heading-subtitle {
display: block;
font-size: 13px;
color: #6B7280;
margin-top: 2px;
}
/* ================= Hero ================= */
.wh-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: center;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 16px;
padding: 32px;
margin-bottom: 32px;
}
.wh-hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #185fa5;
background: #E6F1FB;
border: 1px solid #B5D4F4;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 14px;
}
.wh-hero-title {
font-size: 24px;
font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 10px;
color: #111827;
}
.wh-hero-body {
font-size: 14px;
color: #4B5563;
line-height: 1.65;
margin-bottom: 16px;
}
.wh-base-url {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 10px 14px;
font-size: 12px;
}
.wh-base-url-label {
color: #9CA3AF;
white-space: nowrap;
}
.wh-base-url code {
color: #185fa5;
font-weight: 600;
word-break: break-all;
}
.wh-ref-card {
background: #111827;
border-radius: 12px;
overflow: hidden;
}
.wh-ref-tabs {
display: flex;
gap: 4px;
padding: 10px 12px 0;
}
.wh-ref-tab {
font-size: 12px;
color: #9CA3AF;
padding: 6px 12px;
border-radius: 6px 6px 0 0;
}
.wh-ref-tab.active {
color: #fff;
background: #1F2937;
font-weight: 600;
}
.wh-ref-code {
margin: 0;
padding: 14px 16px 18px;
font-family: 'Courier New', monospace;
font-size: 12.5px;
line-height: 1.7;
color: #E5E7EB;
overflow-x: auto;
}
.wh-c-comment {
color: #6B7280;
}
.wh-c-brace {
color: #9CA3AF;
}
.wh-c-key {
color: #93C5FD;
}
.wh-c-string {
color: #A7F3D0;
}
.wh-c-number {
color: #FCA5A5;
}
.wh-c-status {
color: #FDE68A;
}
/* ================= Sections ================= */
.wh-section {
margin-bottom: 36px;
}
.wh-section-heading {
font-size: 15px;
font-weight: 700;
color: #111827;
margin-bottom: 16px;
}
/* ================= Event grid ================= */
.wh-event-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.wh-event-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 16px;
}
.wh-event-icon {
width: 34px;
height: 34px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
margin-bottom: 10px;
}
.wh-event-icon.blue {
background: #E6F1FB;
color: #185fa5;
}
.wh-event-icon.purple {
background: #EEF2FF;
color: #6366F1;
}
.wh-event-icon.green {
background: #F0FDF4;
color: #16A34A;
}
.wh-event-icon.amber {
background: #FFFBEB;
color: #D97706;
}
.wh-event-icon.red {
background: #FEF2F2;
color: #DC2626;
}
.wh-event-name code {
font-size: 13px;
font-weight: 700;
color: #111827;
background: none;
}
.wh-event-body {
font-size: 12.5px;
color: #6B7280;
line-height: 1.5;
margin-top: 4px;
}
/* ================= Delivery row ================= */
.wh-delivery-row {
display: flex;
align-items: flex-start;
gap: 8px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px 16px;
}
.wh-delivery-step {
flex: 1;
min-width: 0;
}
.wh-delivery-num {
width: 24px;
height: 24px;
border-radius: 50%;
background: #185fa5;
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8px;
}
.wh-delivery-title {
font-size: 13px;
font-weight: 700;
color: #111827;
margin-bottom: 3px;
}
.wh-delivery-body {
font-size: 12px;
color: #6B7280;
line-height: 1.45;
}
.wh-delivery-arrow {
font-size: 16px;
color: #C7D0DA;
margin-top: 6px;
flex-shrink: 0;
}
/* ================= Auth / signature card ================= */
.wh-auth-card {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px;
}
.wh-auth-text {
font-size: 13.5px;
color: #374151;
line-height: 1.65;
margin-bottom: 14px;
}
.wh-auth-text code {
background: #EEF2FF;
color: #4338CA;
padding: 1px 6px;
border-radius: 4px;
font-size: 12.5px;
}
.wh-auth-snippet {
background: #111827;
border-radius: 8px;
padding: 12px 14px;
}
.wh-auth-snippet code {
color: #A7F3D0;
font-family: 'Courier New', monospace;
font-size: 12px;
word-break: break-all;
}
/* ================= Endpoint manager ================= */
.wh-endpoint-manager {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
}
.wh-endpoint-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid #F3F4F6;
gap: 12px;
}
.wh-endpoint-row-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.wh-status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.wh-status-dot.live {
background: #16A34A;
}
.wh-status-dot.failing {
background: #DC2626;
}
.wh-endpoint-url {
font-size: 13px;
font-weight: 600;
color: #111827;
word-break: break-all;
}
.wh-endpoint-meta {
font-size: 11.5px;
color: #9CA3AF;
margin-top: 2px;
}
.wh-endpoint-badge {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 12px;
white-space: nowrap;
}
.wh-endpoint-badge.live {
background: #DCFCE7;
color: #166534;
}
.wh-endpoint-badge.failing {
background: #FEF2F2;
color: #991B1B;
}
.wh-add-endpoint {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
justify-content: center;
padding: 12px;
background: none;
border: none;
color: #185fa5;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.wh-add-endpoint:hover {
background: #F9FAFB;
}
/* ================= Security note ================= */
.wh-security-note {
display: flex;
gap: 14px;
align-items: flex-start;
background: #EEF2FF;
border: 1px solid #C7D2FE;
border-radius: 12px;
padding: 18px 20px;
margin-top: 8px;
}
.wh-security-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: #fff;
color: #4338CA;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.wh-security-title {
font-size: 13.5px;
font-weight: 700;
color: #3730A3;
margin-bottom: 3px;
}
.wh-security-body {
font-size: 12.5px;
color: #4338CA;
line-height: 1.55;
}
@media (max-width: 768px) {
.wh-hero {
grid-template-columns: 1fr;
}
.wh-event-grid {
grid-template-columns: repeat(2, 1fr);
}
.wh-delivery-row {
flex-direction: column;
}
.wh-delivery-arrow {
display: none;
}
}
@media (max-width: 480px) {
.wh-event-grid {
grid-template-columns: 1fr;
}
}
/************** API Status css ***********/
/* API Status page — matches the /api-overview, /webhooks, and
/banking-as-a-service conventions: rzi icon font, blue/green/amber/red
status coding, dark code accents where relevant. */
.aps-page {
width: 100%;
color: #111827;
font-family: var(--HeadingFont);
box-sizing: border-box;
}
/* ================= Heading ================= */
.aps-heading {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
}
.aps-heading-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: #EEF2FF;
color: #4338CA;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.aps-heading-title {
display: block;
font-size: 22px;
font-weight: 800;
}
.aps-heading-subtitle {
display: block;
font-size: 13px;
color: #6B7280;
margin-top: 2px;
}
/* ================= Hero status banner ================= */
.aps-hero {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
background: #F0FDF4;
border: 1px solid #BBF7D0;
border-radius: 16px;
padding: 24px 28px;
margin-bottom: 32px;
}
.aps-status-pill {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 800;
color: #166534;
}
.aps-status-pill .aps-status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #16A34A;
box-shadow: 0 0 0 0 rgba(22,163,74,0.5);
animation: aps-pulse 1.8s infinite;
}
@keyframes aps-pulse {
0% {
box-shadow: 0 0 0 0 rgba(22,163,74,0.45);
}
70% {
box-shadow: 0 0 0 7px rgba(22,163,74,0);
}
100% {
box-shadow: 0 0 0 0 rgba(22,163,74,0);
}
}
.aps-hero-sub {
font-size: 12.5px;
color: #4B7A5C;
margin-top: 6px;
}
.aps-hero-stats {
display: flex;
gap: 28px;
}
.aps-hero-stat-value {
font-size: 20px;
font-weight: 800;
color: #111827;
text-align: right;
}
.aps-hero-stat-label {
font-size: 11px;
color: #6B7280;
text-align: right;
margin-top: 2px;
}
/* ================= Sections ================= */
.aps-section {
margin-bottom: 36px;
}
.aps-section-heading {
font-size: 15px;
font-weight: 700;
margin-bottom: 16px;
}
/* ================= Service list ================= */
.aps-service-list {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
overflow: hidden;
}
.aps-service-row {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
border-bottom: 1px solid #F3F4F6;
}
.aps-service-row:last-child {
border-bottom: none;
}
.aps-service-main {
display: flex;
align-items: center;
gap: 10px;
width: 210px;
flex-shrink: 0;
}
.aps-status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.aps-status-dot.operational {
background: #16A34A;
}
.aps-status-dot.degraded {
background: #D97706;
}
.aps-status-dot.outage {
background: #DC2626;
}
.aps-service-name {
font-size: 13.5px;
font-weight: 600;
color: #111827;
}
.aps-uptime-bars {
flex: 1;
display: flex;
gap: 2px;
min-width: 0;
}
.aps-bar {
flex: 1;
height: 22px;
border-radius: 2px;
background: #E5E7EB;
}
.aps-bar.ok {
background: #86EFAC;
}
.aps-bar.degraded {
background: #FCD34D;
}
.aps-bar.outage {
background: #FCA5A5;
}
.aps-service-uptime {
width: 60px;
text-align: right;
font-size: 12.5px;
font-weight: 700;
color: #166534;
flex-shrink: 0;
}
.aps-legend {
display: flex;
align-items: center;
gap: 18px;
margin-top: 10px;
font-size: 11.5px;
color: #6B7280;
}
.aps-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.aps-legend .aps-bar {
width: 12px;
height: 12px;
flex: none;
}
.aps-legend-range {
margin-left: auto;
color: #9CA3AF;
}
/* ================= Incident history ================= */
.aps-incident-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.aps-incident-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 16px 20px;
}
.aps-incident-top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 4px;
}
.aps-incident-title {
font-size: 13.5px;
font-weight: 700;
color: #111827;
}
.aps-incident-tag {
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 10px;
border-radius: 12px;
white-space: nowrap;
}
.aps-incident-tag.resolved {
background: #DCFCE7;
color: #166534;
}
.aps-incident-date {
font-size: 11.5px;
color: #9CA3AF;
margin-bottom: 8px;
}
.aps-incident-body {
font-size: 12.5px;
color: #4B5563;
line-height: 1.6;
margin: 0;
}
.aps-incident-body code {
background: #EEF2FF;
color: #4338CA;
padding: 1px 5px;
border-radius: 4px;
font-size: 11.5px;
}
/* ================= Subscribe ================= */
.aps-subscribe {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 24px;
}
.aps-subscribe-title {
font-size: 14px;
font-weight: 700;
color: #111827;
}
.aps-subscribe-body {
font-size: 12.5px;
color: #6B7280;
margin-top: 2px;
}
.aps-subscribe-form {
display: flex;
gap: 8px;
}
.aps-subscribe-input {
padding: 9px 12px;
border: 1px solid #D1D5DB;
border-radius: 8px;
font-size: 13px;
width: 220px;
}
.aps-subscribe-btn {
padding: 9px 18px;
background: #185fa5;
color: #fff;
border: none;
border-radius: 8px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
.aps-subscribe-btn:hover {
background: #0C447C;
}
/* ================= Monitoring note ================= */
.aps-monitoring-note {
display: flex;
gap: 14px;
align-items: flex-start;
background: #EEF2FF;
border: 1px solid #C7D2FE;
border-radius: 12px;
padding: 18px 20px;
}
.aps-monitoring-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: #fff;
color: #4338CA;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.aps-monitoring-title {
font-size: 13.5px;
font-weight: 700;
color: #3730A3;
margin-bottom: 3px;
}
.aps-monitoring-body {
font-size: 12.5px;
color: #4338CA;
line-height: 1.55;
}
@media (max-width: 700px) {
.aps-service-main {
width: 140px;
}
.aps-uptime-bars {
display: none;
}
.aps-hero-stats {
gap: 18px;
}
.aps-subscribe {
flex-direction: column;
align-items: flex-start;
}
.aps-subscribe-input {
width: 100%;
}
}
/********************* help css *****************/
.help-hero {
text-align: center;
padding: 36px 24px 32px;
border-radius: 16px;
background: #EFF6FF;
border: 1px solid #DDD6FE;
margin-bottom: 28px;
}
.help-hero-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: radial-gradient(circle, #2e77f2, #59c7fa);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.help-hero-title {
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0 0 10px;
}
.help-hero-desc {
font-size: 14px;
color: #4B5563;
line-height: 1.7;
max-width: 560px;
margin: 0 auto;
}
.help-section-label {
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .07em;
margin: 0 0 14px;
}
.help-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 14px;
margin-bottom: 28px;
}
.help-feature-card {
padding: 18px 16px;
border-radius: 12px;
border: 1px solid #E5E7EB;
background: #fff;
}
.help-feature-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
font-size: 18px;
}
.help-feature-icon span {
font-size: 24px !important;
}
.help-feature-title {
font-size: 16px;
font-weight: 700;
color: #111827;
margin-bottom: 5px;
}
.help-feature-desc {
font-size: 14px;
color: #6B7280;
line-height: 1.55;
}
.help-contact-card {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
padding: 22px 24px;
border-radius: 14px;
background: #fff;
border: 1px solid #E5E7EB;
}
.help-contact-left {
display: flex;
align-items: center;
gap: 16px;
}
.help-contact-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: radial-gradient(circle, #2e77f2, #59c7fa);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 20px;
}
.help-contact-title {
font-size: 14px;
font-weight: 700;
color: #111827;
margin-bottom: 3px;
}
.help-contact-sub {
font-size: 14px;
color: #6B7280;
}
.help-info-row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px;
border-radius: 12px;
background: #FAFAFA;
border: 1px solid #E5E7EB;
margin-bottom: 28px;
}
.help-info-item {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #374151;
line-height: 1.5;
}
.help-info-item span.material-symbols-outlined {
font-size: 17px;
color: #3f97f5;
margin-top: 1px;
flex-shrink: 0;
}
/********* FAQ css ************/
.faq-hero {
text-align: center;
padding: 40px 24px 34px;
border-radius: 16px;
background: #EFF6FF;
border: 1px solid #DDD6FE;
margin-bottom: 26px;
}
.faq-hero-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: radial-gradient(circle, #2e77f2, #59c7fa);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
.faq-hero-title {
font-size: 22px;
font-weight: 700;
color: #111827;
margin: 0 0 8px;
}
.faq-hero-desc {
font-size: 14px;
color: #4B5563;
max-width: 500px;
margin: 0 auto 22px;
line-height: 1.6;
}
.faq-search-wrap {
position: relative;
max-width: 520px;
margin: 0 auto;
}
.faq-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.faq-search-wrap .rz-textbox {
height: 46px !important;
border-radius: 12px !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.faq-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 20px auto 0;
max-width: 680px;
}
.faq-pill {
border: 1px solid #E5E7EB;
background: #fff;
color: #374151;
font-size: 12.5px;
font-weight: 600;
padding: 7px 14px;
border-radius: 20px;
cursor: pointer;
}
.faq-pill:hover {
border-color: #B5D4F4;
}
.faq-pill--active {
background: #185fa5;
border-color: #185fa5;
color: #fff;
}
.faq-group {
margin-bottom: 26px;
}
.faq-group-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.faq-group-icon {
width: 30px;
height: 30px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-group-icon--blue {
background: #E6F1FB;
color: #185fa5;
}
.faq-group-icon--teal {
background: #F0FDFA;
color: #0F766E;
}
.faq-group-icon--amber {
background: #FFFBEB;
color: #D97706;
}
.faq-group-icon--purple {
background: #EEF2FF;
color: #6366F1;
}
.faq-group-icon--green {
background: #F0FDF4;
color: #16A34A;
}
.faq-group-icon--coral {
background: #FEF2F2;
color: #DC2626;
}
.faq-group-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
}
.faq-group-count {
font-size: 12px;
color: #9CA3AF;
margin-left: 4px;
}
.faq-accordion .rz-accordion-header {
font-size: 13.5px !important;
font-weight: 600 !important;
}
.faq-answer {
font-size: 13.5px;
color: #4B5563;
line-height: 1.65;
padding: 2px 2px 6px;
}
.faq-no-results {
text-align: center;
padding: 40px 20px;
border: 1px dashed #E5E7EB;
border-radius: 12px;
background: #FAFAFA;
}
.faq-legal-accordion {
margin-top: 6px;
}
.faq-content {
padding: 4px 2px;
}
/****************** privacy policy css *****************/
/* Privacy Policy page — matches the site's blue/purple/green/amber/coral
palette used on Help, FAQ, Webhooks, and Contact Us. Separate stylesheet
per request; link it from the .razor file at css/privacy-policy.css. */
.pp-page {
font-family: var(--HeadingFont);
color: #111827;
box-sizing: border-box;
}
.pp-page * {
box-sizing: border-box;
}
/* ================= HERO =================
Deliberately an explicit horizontal row (not a centered stack) — this is
far more resistant to being squashed or re-flowed by a parent container's
own flex/grid rules than a "text-align:center" block layout is. */
.pp-hero {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap;
gap: 18px;
padding: 22px 26px;
border-radius: 16px;
background: #EFF6FF;
border: 1px solid #DDD6FE;
margin-bottom: 22px;
width: 100%;
}
.pp-hero-icon {
width: 52px;
height: 52px;
border-radius: 50%;
background: radial-gradient(circle, #2e77f2, #59c7fa);
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pp-hero-text {
flex: 1 1 300px;
min-width: 0;
text-align: left !important;
}
.pp-hero-title {
font-size: 20px;
font-weight: 700;
color: #111827;
margin: 0 0 4px;
line-height: 1.3;
}
.pp-hero-sub {
font-size: 13px;
color: #4B5563;
line-height: 1.5;
margin: 0;
}
.pp-hero-badge {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
color: #185fa5;
background: #fff;
border: 1px solid #B5D4F4;
padding: 6px 14px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
/* ================= QUICK NAV ================= */
.pp-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 30px;
}
.pp-nav a {
font-size: 12px;
font-weight: 600;
color: #374151;
background: #fff;
border: 1px solid #E5E7EB;
padding: 6px 13px;
border-radius: 20px;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.pp-nav a:hover {
border-color: #185fa5;
color: #185fa5;
}
/* ================= SECTION CARDS ================= */
.pp-section {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 14px;
scroll-margin-top: 24px;
}
.pp-section-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.pp-section-icon {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.pp-section-icon.blue {
background: #E6F1FB;
color: #185fa5;
}
.pp-section-icon.purple {
background: #EEF2FF;
color: #6366F1;
}
.pp-section-icon.green {
background: #F0FDF4;
color: #16A34A;
}
.pp-section-icon.amber {
background: #FFFBEB;
color: #D97706;
}
.pp-section-icon.coral {
background: #FEF2F2;
color: #DC2626;
}
.pp-section-title {
font-size: 15px;
font-weight: 700;
color: #111827;
}
.pp-body {
font-size: 13.5px;
color: #4B5563;
line-height: 1.7;
}
.pp-body p {
margin: 0 0 10px;
}
.pp-body p:last-child {
margin-bottom: 0;
}
.pp-list {
margin: 6px 0 10px;
padding-left: 20px;
color: #4B5563;
}
.pp-list li {
margin-bottom: 5px;
}
/* ================= CONTACT CARD ================= */
.pp-contact-card {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px 24px;
margin-top: 6px;
}
.pp-contact-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
font-size: 13.5px;
color: #374151;
}
.pp-contact-row:last-child {
margin-bottom: 0;
}
.pp-contact-row .material-icons {
font-size: 17px;
color: #185fa5;
margin-top: 1px;
flex-shrink: 0;
}
.pp-contact-row a {
color: #185fa5;
font-weight: 600;
text-decoration: none;
}
.pp-contact-row a:hover {
text-decoration: underline;
}
/* ================= FOOTER NOTE ================= */
.pp-updated-note {
text-align: center;
font-size: 11.5px;
color: #9CA3AF;
margin-top: 24px;
}
@media (max-width: 560px) {
.pp-hero {
flex-direction: column !important;
text-align: center;
}
.pp-hero-text {
text-align: center !important;
}
}
/************** terms of use css *************/
/* Terms of Service page — full width (no max-width container, per request),
dark gradient hero (distinct from Privacy Policy's light hero), and a
responsive card grid instead of a single stacked column. */
.tos-page {
width: 100%;
font-family: var(--HeadingFont);
padding: 28px 40px 60px;
color: #111827;
box-sizing: border-box;
}
.tos-page * {
box-sizing: border-box;
}
/* ================= HERO ================= */
.tos-hero {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap;
gap: 18px;
padding: 26px 30px;
border-radius: 16px;
background: linear-gradient(135deg, #1E3A8A, #3B82F6);
color: #fff;
margin-bottom: 22px;
width: 100%;
}
.tos-hero-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.15);
display: flex !important;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tos-hero-text {
flex: 1 1 320px;
min-width: 0;
text-align: left !important;
}
.tos-hero-title {
font-size: 20px;
font-weight: 800;
margin: 0 0 4px;
line-height: 1.3;
}
.tos-hero-sub {
font-size: 13px;
opacity: 0.88;
line-height: 1.5;
margin: 0;
max-width: 560px;
}
.tos-hero-badge {
display: inline-flex !important;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
color: #1E3A8A;
background: #fff;
padding: 6px 14px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
}
/* ================= QUICK NAV ================= */
.tos-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 26px;
}
.tos-nav a {
font-size: 12px;
font-weight: 600;
color: #374151;
background: #fff;
border: 1px solid #E5E7EB;
padding: 6px 13px;
border-radius: 20px;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.tos-nav a:hover {
border-color: #1E3A8A;
color: #1E3A8A;
}
/* ================= TERMS GRID ================= */
.tos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 14px;
margin-bottom: 22px;
}
.tos-card {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px 22px;
scroll-margin-top: 24px;
}
.tos-card--wide {
grid-column: 1 / -1;
}
.tos-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.tos-card-icon {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.tos-card-icon.blue {
background: #E6F1FB;
color: #185fa5;
}
.tos-card-icon.purple {
background: #EEF2FF;
color: #6366F1;
}
.tos-card-icon.green {
background: #F0FDF4;
color: #16A34A;
}
.tos-card-icon.amber {
background: #FFFBEB;
color: #D97706;
}
.tos-card-icon.coral {
background: #FEF2F2;
color: #DC2626;
}
.tos-card-title {
font-size: 14.5px;
font-weight: 700;
color: #111827;
}
.tos-body {
font-size: 13.5px;
color: #4B5563;
line-height: 1.65;
}
.tos-body p {
margin: 0 0 8px;
}
.tos-body p:last-child {
margin-bottom: 0;
}
.tos-list {
margin: 4px 0 0;
padding-left: 20px;
color: #4B5563;
}
.tos-list li {
margin-bottom: 5px;
}
/* ================= CONTACT SECTION ================= */
.tos-section {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 22px 24px;
margin-bottom: 14px;
scroll-margin-top: 24px;
}
.tos-contact-card {
background: #F9FAFB;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px 24px;
}
.tos-contact-row {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 8px;
font-size: 13.5px;
color: #374151;
}
.tos-contact-row:last-child {
margin-bottom: 0;
}
.tos-contact-row .material-icons {
font-size: 17px;
color: #1E3A8A;
margin-top: 1px;
flex-shrink: 0;
}
.tos-contact-row a {
color: #1E3A8A;
font-weight: 600;
text-decoration: none;
}
.tos-contact-row a:hover {
text-decoration: underline;
}
/* ================= FOOTER NOTE ================= */
.tos-updated-note {
text-align: center;
font-size: 11.5px;
color: #9CA3AF;
margin-top: 24px;
}
@media (max-width: 560px) {
.tos-hero {
flex-direction: column !important;
text-align: center;
}
.tos-hero-text {
text-align: center !important;
}
}
/************* cookies page css *********************/
/* Cookie Policy page — purely informational, matching the same section-card
+ quick-nav family as Privacy Policy and Terms of Service. Indigo accent
keeps it visually distinct from those two while staying in the same
brand palette. */
.cp-page {
font-family: var(--HeadingFont);
color: #111827;
box-sizing: border-box;
}
.cp-page * {
box-sizing: border-box;
}
/* ================= HERO ================= */
.cp-hero {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 14px;
padding: 20px 24px;
border-radius: 16px;
background: #EEF2FF;
border: 1px solid #C7D2FE;
margin-bottom: 20px;
}
.cp-hero-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: radial-gradient(circle, #7C6FF0, #6366F1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cp-hero-text {
text-align: left !important;
}
.cp-hero-title {
font-size: 19px;
font-weight: 800;
color: #111827;
line-height: 1.3;
}
.cp-hero-sub {
font-size: 12.5px;
color: #4338CA;
margin-top: 2px;
}
/* ================= QUICK NAV ================= */
.cp-nav {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 22px;
}
.cp-nav a {
font-size: 12px;
font-weight: 600;
color: #374151;
background: #fff;
border: 1px solid #E5E7EB;
padding: 6px 13px;
border-radius: 20px;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.cp-nav a:hover {
border-color: #6366F1;
color: #6366F1;
}
/* ================= SECTIONS ================= */
.cp-section {
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 14px;
padding: 20px 24px;
margin-bottom: 14px;
scroll-margin-top: 24px;
}
.cp-section-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.cp-section-icon {
width: 32px;
height: 32px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.cp-section-icon.indigo {
background: #EEF2FF;
color: #6366F1;
}
.cp-section-title {
font-size: 15px;
font-weight: 700;
color: #111827;
}
.cp-always-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: #16A34A;
background: #F0FDF4;
border: 1px solid #BBF7D0;
padding: 2px 9px;
border-radius: 10px;
margin-left: auto;
}
.cp-body {
font-size: 13.5px;
color: #4B5563;
line-height: 1.65;
margin-bottom: 12px;
}
.cp-body p {
margin: 0;
}
/* ================= COOKIE TABLE ================= */
.cp-cookie-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
background: #FAFAFB;
border: 1px solid #E5E7EB;
border-radius: 8px;
overflow: hidden;
}
.cp-cookie-table th {
text-align: left;
padding: 9px 12px;
background: #F3F4F6;
color: #6B7280;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10.5px;
}
.cp-cookie-table td {
padding: 9px 12px;
color: #374151;
border-top: 1px solid #E5E7EB;
}
.cp-mono {
font-family: 'Courier New', monospace;
font-size: 12px;
color: #4338CA;
}
/* ================= FOOTER NOTE ================= */
.cp-updated-note {
text-align: center;
font-size: 11.5px;
color: #9CA3AF;
margin-top: 22px;
}
@media (max-width: 560px) {
.cp-hero {
flex-direction: column !important;
text-align: center;
}
.cp-hero-text {
text-align: center !important;
}
.cp-cookie-table {
font-size: 11.5px;
}
.cp-cookie-table th,
.cp-cookie-table td {
padding: 7px 8px;
}
}