/* RegNet public site design system — shared by every public page. */
:root {
    --brand-color: #4263eb;
    --brand-dark: #162342;
    --brand-soft: #eef1ff;
    --bg-light: #fff;
    --text-main: #101828;
    --text-muted: #667085;
    --surface-line: #e7ebf2;
    --success: #039855;
}

html { scroll-behavior: smooth; }
body {
    font-family: "DM Sans", "Inter", system-ui, sans-serif !important;
    color: var(--text-main) !important;
    background: #fff !important;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Manrope", "DM Sans", "Inter", system-ui, sans-serif;
    letter-spacing: -.035em;
}

/* Navigation */
.rn-navbar {
    padding: .78rem 0 !important;
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid rgba(16,24,40,.07);
    box-shadow: none !important;
    backdrop-filter: blur(16px);
}
.rn-navbar .navbar-brand img { height: 42px; }
.rn-navbar .nav-link {
    color: #475467 !important;
    font-size: .84rem;
    font-weight: 650;
    border-radius: 8px;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}
.rn-navbar .nav-link:hover, .rn-navbar .nav-link.active {
    color: var(--brand-color) !important;
    background: var(--brand-soft);
}
.rn-navbar .btn-outline-secondary {
    border-color: #d0d5dd;
    color: #344054;
    border-radius: 9px;
    font-weight: 700;
}

/* Shared components */
.btn-brand, .btn-glow {
    background: var(--brand-color) !important;
    border-color: var(--brand-color) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(66,99,235,.18);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.btn-brand:hover, .btn-glow:hover {
    background: #3450cc !important;
    border-color: #3450cc !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(66,99,235,.25) !important;
}
.btn-outline-brand {
    border-color: var(--brand-color) !important;
    color: var(--brand-color) !important;
    border-radius: 10px !important;
    font-weight: 700;
}
.btn-outline-brand:hover { background: var(--brand-color) !important; color:#fff !important; }
.form-control, .form-select {
    border-color: #dfe4ec;
    border-radius: 10px;
    background: #fff;
    padding: .72rem .85rem;
}
.form-control:focus, .form-select:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 .22rem rgba(66,99,235,.12);
}
.modal-content { border-radius: 18px !important; }

/* Existing page structures, normalized into one visual language */
.page-header, .erp-header, .about-header, .legal-header, .lo-header {
    position: relative;
    overflow: hidden;
    background: #fff !important;
    color: var(--ink) !important;
    padding-top: 92px !important;
    padding-bottom: 78px !important;
}
.page-header::after, .erp-header::after, .about-header::after, .legal-header::after, .lo-header::after {
    content: "";
    position: absolute;
    width: 330px; height: 330px; right: -100px; top: -180px;
    border: 42px solid rgba(99,102,241,.07); border-radius: 50%;
}
.hero-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px !important;
    padding-bottom: 95px !important;
    background: #fff !important;
}
.hero-section::before {
    content: ""; position: absolute; z-index: 0; width: 520px; height: 520px;
    right: -190px; top: -270px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.18), rgba(99,102,241,0) 68%);
}
.hero-section .container, .page-header .container, .erp-header .container,
.about-header .container, .legal-header .container, .lo-header .container { position: relative; z-index: 1; }
.hero-title { color: var(--brand-dark) !important; letter-spacing: -.055em; }
.hero-img-wrapper img { border-radius: 18px !important; box-shadow: 0 26px 55px rgba(16,24,40,.15) !important; }

/* One shared page-opening pattern: context, a decisive statement, then the product. */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: .48rem;
    padding: .43rem .78rem;
    color: #3f55c6;
    background: #eef1ff;
    border: 1px solid #dfe5ff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .055em;
}
.hero-kicker-light { color: #3f55c6; background: #eef1ff; border-color: #dfe5ff; }
.public-heading {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
    color: var(--ink) !important;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(2.25rem, 5vw, 4.2rem) !important;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.06em;
}
.public-heading span, .hero-title span {
    color: var(--brand-color) !important;
    position: relative;
    z-index: 0;
}
.public-heading span { color: var(--brand-color) !important; }
.public-heading span::after, .hero-title span::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0; bottom: .02em;
    width: 100%; height: .16em;
    border-radius: 999px;
    background: #c7d2fe;
}
.hero-title { max-width: 670px; font-size: clamp(2.55rem,5vw,4.45rem) !important; font-weight: 800 !important; line-height: 1.06 !important; }
.hero-title span::after { background: #c7d2fe; }
.pos-header {
    position: relative;
    overflow: hidden;
    padding: 92px 0 78px !important;
    text-align: center;
    color: var(--ink);
    background: #fff !important;
}
.pos-header::after { content:""; position:absolute; width:330px; height:330px; right:-100px; top:-180px; border:42px solid rgba(99,102,241,.07); border-radius:50%; }
.pos-header .container { position:relative; z-index:1; }

/* ---------------------------------------------------------------
   Homepage hero: kicker, three pillars and the layered product stage.
   The stage is a faithful reduction of the real product: the admin
   operations panel, the B2B dealer portal and the payment-link card.
----------------------------------------------------------------*/
.hero-kicker-pro {
    margin-bottom: 1.15rem;
    padding: .5rem 1rem;
    font-size: .73rem;
    letter-spacing: .06em;
    background: linear-gradient(90deg, #eef1ff 0%, #f3efff 100%);
    border-color: #dde4ff;
    box-shadow: 0 6px 18px rgba(66, 99, 235, .13);
}
.hero-kicker-pro .hk-dot {
    width: 7px; height: 7px; flex: 0 0 7px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 3px rgba(18, 183, 106, .18);
}
@media (prefers-reduced-motion: no-preference) {
    .hero-kicker-pro .hk-dot { animation: hk-pulse 2.2s ease-in-out infinite; }
    @keyframes hk-pulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
        50%      { box-shadow: 0 0 0 6px rgba(18,183,106,.06); }
    }
}

.hero-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin-top: 1.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid #edf0f6;
}
.hero-pillar > i {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    margin-bottom: .55rem;
    border-radius: 9px;
    background: var(--brand-soft);
    color: var(--brand-color);
    font-size: .85rem;
}
.hero-pillar b { display: block; color: var(--brand-dark); font-size: .83rem; font-weight: 800; letter-spacing: -.01em; }
.hero-pillar span { display: block; margin-top: .22rem; color: var(--text-muted); font-size: .735rem; line-height: 1.45; }

/* ---------------- the stage ---------------- */
.hero-stage {
    --ink: #17324a;
    --line: #e3e9f1;
    --pblue: #1f6fc4;
    --pgreen: #17a673;
    --pamber: #e79a1f;
    --pred: #dc4b4b;
    position: relative;
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    padding-bottom: 309px;
    font-family: "DM Sans", "Inter", system-ui, sans-serif;
}
.hero-stage .c-blue  { color: var(--pblue); }
.hero-stage .c-green { color: var(--pgreen); }
.hero-stage .c-amber { color: var(--pamber); }
.hero-stage .c-red   { color: var(--pred); }
.hero-stage i.blue { color: var(--pblue); } .hero-stage i.green { color: var(--pgreen); }
.hero-stage i.amber { color: var(--pamber); } .hero-stage i.red { color: #ef6f6f; }

/* shared browser chrome */
.hsw-bar { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-bottom: 1px solid #e8edf4; background: #f7f9fc; }
.hsw-dots { display: flex; gap: 3.5px; }
.hsw-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; }
.hsw-dots i:nth-child(2) { background: #febc2e; }
.hsw-dots i:nth-child(3) { background: #28c840; }
.hsw-url { flex: 1; color: #93a0b2; font-size: .58rem; font-weight: 700; text-align: center; }
.hsw-url i { margin-right: .2rem; font-size: .5rem; }
.hsw-user { display: inline-flex; align-items: center; gap: .25rem; color: #67788d; font-size: .55rem; font-weight: 700; }
.hsw-user b { width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--pblue); color: #fff; font-size: .44rem; }

/* ---------------- layer 1: admin panel ---------------- */
.hs-admin {
    position: relative; z-index: 1;
    width: calc(100% - 40px); margin-left: 40px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 30px 66px rgba(16, 24, 40, .16);
}
.hs-admin-body { display: flex; min-height: 300px; }

.hs-side { flex: 0 0 112px; padding: .45rem .3rem .6rem; background: #22456a; }
.hs-side-brand { display: flex; align-items: center; gap: .22rem; padding: .18rem .35rem .45rem; color: rgba(255,255,255,.55); font-size: .5rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hs-side-brand b { color: #fff; }
.hs-side-brand i { color: #7fb2e8; }
.hs-side-cap { display: block; padding: .38rem .35rem .16rem; color: rgba(255,255,255,.42); font-size: .43rem; font-weight: 800; letter-spacing: .06em; }
.hs-side a { display: flex; text-decoration: none; align-items: center; gap: .3rem; padding: .22rem .35rem; border-radius: 5px; color: rgba(255,255,255,.78); font-size: .5rem; font-weight: 600; white-space: nowrap; overflow: hidden; }
.hs-side a i { width: 9px; color: rgba(255,255,255,.55); font-size: .45rem; text-align: center; }
.hs-side a.on { background: rgba(255,255,255,.15); color: #fff; font-weight: 800; }
.hs-side a.on i { color: #9ccbf5; }

.hs-main { flex: 1; min-width: 0; padding: 7px; background: #f1f5f9; }
.hs-kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.hs-kpi { min-width: 0; overflow: hidden; padding: .3rem .35rem .32rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.hs-kpi small { display: flex; align-items: center; justify-content: space-between; gap: .2rem; color: #7b8a9c; font-size: .43rem; font-weight: 700; white-space: nowrap; overflow: hidden; }
.hs-kpi small i { font-size: .45rem; }
.hs-kpi strong { display: block; margin: .14rem 0 .1rem; color: var(--ink); font-family: "Manrope", sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.hs-kpi em { display: block; color: #98a6b6; font-size: .42rem; font-style: normal; }
.hs-kpi em b { color: #5b6b7d; }

.hs-charts { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 5px; margin-top: 5px; }
.hs-card { padding: .35rem .42rem .4rem; border: 1px solid var(--line); border-radius: 7px; background: #fff; min-width: 0; }
.hs-card-t { display: flex; align-items: center; justify-content: space-between; color: #5b6b7d; font-size: .47rem; font-weight: 800; white-space: nowrap; overflow: hidden; }
.hs-card-t i { font-size: .5rem; }
.hs-card > b { display: block; margin: .18rem 0 .04rem; font-family: "Manrope", sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.hs-card > small { display: block; color: #98a6b6; font-size: .43rem; }

.hs-svg { display: block; width: 100%; height: 58px; margin-top: .2rem; }
.hs-svg line { stroke: #edf1f6; stroke-width: 1; vector-effect: non-scaling-stroke; }
.hs-svg .fill { fill: rgba(64, 132, 214, .14); }
.hs-svg .stroke { fill: none; stroke: #4084d6; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hs-xaxis { display: flex; justify-content: space-between; margin-top: .12rem; color: #aab5c3; font-size: .4rem; font-weight: 600; }
.hs-bars { display: block; width: 100%; height: 40px; margin-top: .3rem; }
.hs-bars rect { fill: #b8e6d0; stroke: #2fa77a; stroke-width: .6; vector-effect: non-scaling-stroke; }

.hs-sum-row { display: flex; justify-content: space-between; margin-top: .2rem; padding-top: .18rem; border-top: 1px solid #f1f4f8; color: #8d9bab; font-size: .43rem; }
.hs-sum-row b { color: #4a5b6d; font-weight: 800; }
.hs-rank { margin-top: .26rem; }
.hs-rank > div { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; }
.hs-rank span { color: #4a5b6d; font-size: .44rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-rank em { color: var(--ink); font-size: .44rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.hs-rank i { display: block; height: 2.5px; margin-top: .13rem; border-radius: 99px; background: #4084d6; }
.hs-overdue > b { font-size: .68rem; }

/* ---------------- layer 2: dealer portal ---------------- */
.hs-portal {
    position: absolute; z-index: 2;
    left: 0; bottom: 108px; width: 400px;
    overflow: hidden;
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 26px 54px rgba(16, 24, 40, .22);
}
.hs-firm { display: flex; align-items: center; justify-content: space-between; padding: .3rem .55rem; background: linear-gradient(90deg, #1b5fbf, #2a74d6); color: #fff; font-size: .48rem; font-weight: 600; }
.hs-firm b { margin-right: .2rem; color: rgba(255,255,255,.7); font-size: .42rem; font-weight: 800; letter-spacing: .04em; }
.hs-firm .r b { color: rgba(255,255,255,.75); }
.hs-ptabs { display: flex; gap: .65rem; padding: .35rem .55rem 0; border-bottom: 1px solid #eaeff5; }
.hs-ptabs span { padding-bottom: .28rem; color: #8b98a8; font-size: .47rem; font-weight: 700; white-space: nowrap; }
.hs-ptabs span.on { color: var(--pblue); box-shadow: inset 0 -2px 0 var(--pblue); font-weight: 800; }
.hs-ptable { padding: 0 .3rem .3rem; }
.hs-ptr {
    display: grid;
    grid-template-columns: minmax(0,1.45fr) .78fr .5fr .5fr .5fr 22px;
    align-items: center; gap: .2rem;
    padding: .3rem .25rem;
    border-bottom: 1px solid #f2f5f9;
}
.hs-ptr.hs-pth { padding: .3rem .25rem .22rem; color: #a7b2c0; font-size: .4rem; font-weight: 800; letter-spacing: .04em; }
.hs-ptr.hs-pth span:nth-child(n+3) { text-align: center; }
.hs-ptr.hot { border-radius: 6px; background: #fff7e3; box-shadow: inset 2px 0 0 #f0a92c; }
.hs-ptr .pn b { display: block; color: var(--pblue); font-size: .47rem; font-weight: 800; }
.hs-ptr .pn small { display: block; color: #8b98a8; font-size: .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-ptr .pp b { display: block; color: var(--ink); font-size: .49rem; font-weight: 800; }
.hs-ptr .pp i { display: inline-block; margin-top: .05rem; padding: 0 .2rem; border-radius: 3px; background: #e8f3ff; color: #2a74d6; font-size: .38rem; font-style: normal; font-weight: 800; }
.hs-ptr .ps { color: var(--pgreen); font-size: .47rem; font-weight: 800; text-align: center; }
.hs-ptr .ps.zero { color: #b6c0cc; }
.hs-ptr .pc { display: grid; place-items: center; width: 20px; height: 17px; border-radius: 4px; background: var(--pblue); color: #fff; font-size: .45rem; }

/* ---------------- layer 3: payment link ---------------- */
.hs-pay {
    position: absolute; z-index: 3;
    right: 0; bottom: 0; width: 188px;
    padding: .7rem .75rem .75rem;
    border: 1px solid #e3e9f1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 22px 46px rgba(16, 24, 40, .2);
}
.hs-pay-head { display: flex; align-items: center; gap: .3rem; color: var(--pblue); font-size: .58rem; font-weight: 800; }
.hs-pay > strong { display: block; margin: .15rem 0 .4rem; color: var(--ink); font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -.045em; }
.hs-taksit div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; padding: .28rem .4rem; border: 1px solid #e6ebf2; border-radius: 7px; }
.hs-taksit div.on { border-color: #2a74d6; background: #f2f8ff; }
.hs-taksit b { color: #33475c; font-size: .5rem; font-weight: 800; }
.hs-taksit em { color: #7b8a9c; font-size: .46rem; font-style: normal; font-weight: 700; }
.hs-taksit div.on em { color: #2a74d6; }
.hs-pay-ok { display: inline-flex; align-items: center; gap: .28rem; margin-top: .3rem; padding: .22rem .48rem; border-radius: 999px; background: #eafaf2; color: #0f8f61; font-size: .52rem; font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
    .hs-portal { animation: hs-float-a 8s ease-in-out infinite; }
    .hs-pay    { animation: hs-float-b 9s ease-in-out infinite; }
    @keyframes hs-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    @keyframes hs-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
}

/* ---------------- responsive ---------------- */
/* 992–1199px: Bootstrap's container is fixed at 960px, so the column is always
   432px wide. The stage is designed at 560px, so it is scaled down as one piece
   instead of re-flowing the three windows into each other. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-stage { width: 560px; max-width: none; margin-left: 0; margin-bottom: -151px; transform: scale(.771); transform-origin: top left; }
}
@media (max-width: 991.98px) {
    .hero-stage { margin: 0 auto; }
    .hero-pillars { text-align: center; }
    .hero-pillar > i { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767.98px) {
    .hero-pillars { grid-template-columns: 1fr; gap: .95rem; margin-top: 1.6rem; }
    .hero-pillar { display: grid; grid-template-columns: 34px 1fr; column-gap: .7rem; text-align: left; }
    .hero-pillar > i { grid-row: span 2; margin: 0; }
    .hero-pillar span { margin-top: .1rem; }
}
@media (max-width: 599.98px) {
    .hero-stage { padding-bottom: 0; }
    .hs-admin { width: 100%; margin-left: 0; }
    .hs-side { flex-basis: 96px; }
    .hs-kpi-row { grid-template-columns: 1fr 1fr; }
    .hs-portal, .hs-pay { position: static; width: auto; animation: none; }
    .hs-portal { margin-top: 14px; }
    .hs-pay { margin: 14px auto 0; max-width: 260px; }
}
@media (max-width: 399.98px) {
    .hs-side { display: none; }
}

.feature-card, .feature-block, .erp-card, .about-card, .content-card,
.adv-card, .info-tile, .tech-card, .bank-item, .faq-item {
    border: 1px solid var(--surface-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}
.feature-card:hover, .feature-block:hover, .erp-card:hover, .about-card:hover,
.adv-card:hover, .info-tile:hover, .tech-card:hover, .bank-item:hover, .faq-item:hover {
    transform: translateY(-5px);
    border-color: #b9c5ff !important;
    box-shadow: 0 17px 34px rgba(16,24,40,.08) !important;
}
.feature-card .icon-wrap, .feature-block .icon-wrap, .adv-icon, .feat-icon {
    background: var(--brand-soft) !important;
    color: var(--brand-color) !important;
}
.cta-section, .cta-band, .cta-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(125deg, #263e88, #6242b7) !important;
    border-radius: 24px !important;
}

footer, .footer { background: #101828 !important; }
.qa-stack { right: 22px !important; bottom: 22px !important; }
.qa-btn { width: 48px !important; height: 48px !important; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 10px 24px rgba(16,24,40,.2) !important; }
.qa-top { background: var(--brand-color) !important; }

@media (prefers-reduced-motion: no-preference) {
    main > section, main > header { animation: page-enter .55s ease both; }
    @keyframes page-enter { from { opacity: .01; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 991px) { .rn-navbar .nav-link { padding: .55rem .75rem; } }

/* Working surfaces stay white. Brand color is reserved for heroes, calls to action and status. */
main, main > section:not(.hero):not(.prim-section) { background: #fff; }
.prim-section { background: #fff !important; }
.prim-section .section-title { position:relative; }
.prim-section .section-title::before { content:""; position:absolute; width:180px; height:180px; left:-90px; top:-80px; z-index:-1; border-radius:50%; background:radial-gradient(circle,rgba(66,99,235,.08),rgba(66,99,235,0) 70%); }

/* Admin-inspired commission detail, adapted for the public product story. */
.prim-detail-section { padding:0 0 96px; background:#fff; }.prim-detail-shell { overflow:hidden; border:1px solid #dcefe3; border-radius:20px; background:#fff; box-shadow:0 18px 38px rgba(16,24,40,.06); }.prim-detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; padding:1.5rem 1.65rem; border-bottom:1px solid #edf0f5; }.prim-detail-head h3 { margin:0 0 .45rem; font-family:"DM Sans"; font-size:1.05rem; font-weight:800; letter-spacing:-.025em; }.prim-soft-tags { display:flex; flex-wrap:wrap; gap:.42rem; }.prim-soft-tags span { padding:.25rem .55rem; border-radius:6px; color:#69809e; background:#f1f5fa; font-size:.68rem; font-weight:700; }.prim-soft-tags .green { color:#027a48; background:#ecfdf3; }.prim-outcome { display:flex; align-items:center; gap:.8rem; padding-left:1.2rem; border-left:1px solid #e8ecf3; white-space:nowrap; }.prim-ring { width:52px; height:52px; display:grid; place-items:center; border:6px solid #16a34a; border-left-color:#d1fae5; border-radius:50%; color:#15803d; font-size:.73rem; font-weight:800; }.prim-outcome small { display:block; color:#98a2b3; font-size:.6rem; font-weight:800; letter-spacing:.05em; }.prim-outcome strong { color:#16a34a; font-size:1rem; }.prim-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; padding:1.25rem 1.65rem .8rem; }.prim-kpi small { display:block; color:#98a2b3; font-size:.66rem; font-weight:800; letter-spacing:.04em; }.prim-kpi strong { display:block; color:#17324a; font-family:"Manrope"; font-size:1.08rem; letter-spacing:-.04em; }.prim-kpi em { color:#d92d20; font-size:.64rem; font-style:normal; font-weight:800; }.prim-progress { height:10px; overflow:hidden; margin:0 1.65rem; border-radius:99px; background:#e5f7ec; }.prim-progress span { display:block; width:100%; height:100%; border-radius:99px; background:#16a34a; }.prim-progress-note { margin:.45rem 1.65rem 1.2rem; color:#15803d; font-size:.72rem; font-weight:800; }.prim-system-title { padding:.85rem 1.65rem; border-top:1px solid #edf0f5; color:#8ba0ba; font-size:.7rem; font-weight:800; letter-spacing:.045em; }.prim-system-row { display:grid; grid-template-columns:minmax(210px,1.5fr) repeat(3,1fr) .7fr; align-items:center; gap:1rem; padding:.8rem 1.65rem; border-top:1px solid #f0f2f5; font-size:.76rem; }.prim-system-row .system-name { color:#344054; font-weight:800; }.prim-system-row .pre { margin-left:.38rem; padding:.18rem .4rem; border-radius:5px; color:#a15c00; background:#fff1c7; font-size:.59rem; }.prim-system-row span:not(.pre) { color:#667085; text-align:right; }.prim-system-row strong { color:#ad6500; text-align:right; }.discount-preview { display:grid; grid-template-columns:145px 1fr; gap:1px; margin:1rem 1.65rem 1.5rem; overflow:hidden; border:1px solid #e5eaf6; border-radius:10px; background:#e5eaf6; }.discount-preview > * { padding:.65rem .8rem; background:#fff; font-size:.7rem; }.discount-preview b { color:#3d49a9; background:#f1f4ff; text-transform:uppercase; letter-spacing:.035em; }.discount-chips { display:flex; flex-wrap:wrap; gap:.35rem; }.discount-chips span { border-radius:99px; padding:.2rem .42rem; color:#475467; background:#eff3f8; font-size:.62rem; font-weight:700; }.discount-chips span b { padding:0; color:#344054; background:transparent; font-size:inherit; letter-spacing:0; }
@media (max-width:767px) { .prim-detail-head { display:block; }.prim-outcome { margin-top:1rem; padding:0; border:0; }.prim-kpi-row { grid-template-columns:repeat(2,1fr); gap:.8rem; }.prim-system-row { grid-template-columns:1.3fr 1fr; }.prim-system-row span { display:none; }.discount-preview { grid-template-columns:1fr; } }

/* Homepage operational proof points: integrations, support and customer-facing commerce. */
.ops-showcase { background:#fff; }.ops-showcase h2 { color:#162342; font-size:clamp(2rem,3.4vw,3rem); letter-spacing:-.05em; }.ops-card { padding:1.7rem; border:1px solid #e5eaf2; border-radius:18px; background:#fff; box-shadow:0 14px 34px rgba(16,24,40,.05); }.ops-card h3 { margin:.45rem 0 .65rem; color:#162342; font-size:1.45rem; font-weight:800; }.ops-card p { max-width:610px; color:#667085; font-size:.9rem; }.ops-icon { width:43px; height:43px; display:grid; place-items:center; margin-bottom:1rem; border-radius:12px; background:#eef1ff; color:#4263eb; font-size:1rem; }.ops-overline { display:block; color:#667f9d; font-size:.66rem; font-weight:800; letter-spacing:.08em; }.partner-pills { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.2rem 0; }.partner-pills span { padding:.38rem .6rem; border:1px solid #e4e9f1; border-radius:7px; color:#475467; background:#f9fafb; font-size:.7rem; font-weight:800; }.partner-pills i { width:1px; margin:0 .15rem; background:#d9e0ea; }.ops-flow { display:flex; align-items:center; justify-content:space-between; margin-top:1.3rem; padding:1rem; border-radius:12px; background:#f7f9fc; }.ops-flow div { display:flex; flex-direction:column; align-items:center; gap:.35rem; color:#667085; font-size:.63rem; font-weight:700; text-align:center; }.ops-flow b { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:#4263eb; background:#fff; box-shadow:0 3px 9px rgba(16,24,40,.07); }.ops-flow > span { flex:1; height:1px; margin:0 .5rem; background:linear-gradient(90deg,#cbd5ff,#dfe4ec); }.status-pill { padding:.32rem .55rem; border-radius:999px; color:#027a48; background:#ecfdf3; font-size:.65rem; font-weight:800; }.status-pill i { margin-right:.25rem; font-size:.43rem; }.support-thread { min-height:130px; margin-top:1rem; padding:1rem; border-radius:12px; background-color:#f3efe7; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:16px 16px; }.thread-date { display:block; width:max-content; margin:0 auto .55rem; padding:.18rem .45rem; border-radius:5px; color:#667085; background:#fff; font-size:.57rem; font-weight:700; }.bubble-in,.bubble-out { width:max-content; max-width:85%; margin:.4rem 0; padding:.55rem .65rem; border-radius:9px; color:#344054; background:#fff; box-shadow:0 2px 5px rgba(16,24,40,.06); font-size:.7rem; }.bubble-in b { color:#2873a4; }.bubble-out { margin-left:auto; background:#d9fdd3; }.support-thread small { display:block; margin-top:.18rem; color:#98a2b3; font-size:.54rem; text-align:right; }.trust-strip { display:flex; align-items:flex-start; gap:.85rem; height:100%; padding:1.15rem 1.3rem; border:1px solid #e5eaf2; border-radius:14px; background:#fff; }.trust-strip > i { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border-radius:9px; color:#4263eb; background:#eef1ff; }.trust-strip b,.trust-strip span { display:block; }.trust-strip b { color:#344054; font-size:.83rem; }.trust-strip span { margin-top:.2rem; color:#667085; font-size:.73rem; }
@media(max-width:575px) { .ops-card { padding:1.25rem; }.partner-pills i { display:none; }.ops-flow > span { margin:0 .25rem; } }