@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('assets/fonts/ibm-plex-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Serif';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-serif-italic-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:#0A0A0B;font:400 17px/1.62 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:28px}
a{color:#0655FF;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#0444CC;text-decoration-thickness:2px}
p{text-wrap:pretty}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;vertical-align:top;padding:15px 18px;border-bottom:1px solid rgba(10,10,11,0.14);font:400 15.5px/1.5 "IBM Plex Sans",system-ui,sans-serif}
th{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:rgba(10,10,11,0.58);border-bottom:1px solid rgba(10,10,11,0.28)}
summary{cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid #0655FF;outline-offset:3px}
/* Reveal animation is opt-in: content is fully visible by default, and the
   logic class adds .bn-anim to the root element only after confirming the
   document animation timeline advances (frozen in some render environments)
   and reduced motion is off. Frozen, reduced, or scriptless = final state. */
@keyframes bn-stat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bn-fade-in{from{opacity:0}to{opacity:1}}
html.bn-anim [data-anim="stat"]{animation:bn-stat-in .55s cubic-bezier(.2,.7,.2,1) both}
html.bn-anim [data-anim="stat"]:nth-child(1){animation-delay:.5s}
html.bn-anim [data-anim="stat"]:nth-child(2){animation-delay:.67s}
html.bn-anim [data-anim="stat"]:nth-child(3){animation-delay:.84s}
html.bn-anim [data-d1],html.bn-anim [data-d2],html.bn-anim [data-d2l]{animation:bn-fade-in .5s cubic-bezier(.2,.7,.2,1) both}
html.bn-anim [data-d1="0"]{animation-delay:.3s}
html.bn-anim [data-d1="1"]{animation-delay:.48s}
html.bn-anim [data-d1="2"]{animation-delay:.66s}
html.bn-anim [data-d1="3"]{animation-delay:.84s}
html.bn-anim [data-d1="4"]{animation-delay:1.02s}
html.bn-anim [data-d1="5"]{animation-delay:1.2s}
html.bn-anim [data-d1="6"]{animation-delay:1.38s}
html.bn-anim [data-d1="7"]{animation-delay:1.56s}
html.bn-anim [data-d2="1"],html.bn-anim [data-d2l="1"]{animation-delay:.5s}
html.bn-anim [data-d2="2"],html.bn-anim [data-d2l="2"]{animation-delay:.75s}
html.bn-anim [data-d2="3"],html.bn-anim [data-d2l="3"]{animation-delay:1s}
html.bn-anim [data-d2="4"],html.bn-anim [data-d2l="4"]{animation-delay:1.25s}
html.bn-anim [data-d2="5"],html.bn-anim [data-d2l="5"]{animation-delay:1.5s}
html.bn-anim [data-d2="6"],html.bn-anim [data-d2l="6"]{animation-delay:1.75s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}html.bn-anim [data-anim="stat"],html.bn-anim [data-d1],html.bn-anim [data-d2],html.bn-anim [data-d2l]{animation:none;opacity:1;transform:none}}
.idx-head{display:flex;align-items:center;gap:20px;font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.14em;color:rgba(10,10,11,.58);margin-bottom:8px}
.idx-head .rule{flex:1;height:1px;background:rgba(10,10,11,.2)}
.idx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.idx-row{display:flex;align-items:center;gap:22px;padding:20px 22px;border-bottom:1px solid rgba(10,10,11,.1);border-left:2px solid transparent;text-decoration:none;color:#0A0A0B;transition:background .18s cubic-bezier(.2,.7,.2,1),border-color .18s cubic-bezier(.2,.7,.2,1),color .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1)}
.idx-row:hover,.idx-row:focus-visible{background:#fff;border-left-color:#0655FF;color:#0655FF;box-shadow:0 2px 6px rgba(10,10,11,.06);outline:none}
.idx-num{font:500 12px/1 'IBM Plex Mono',ui-monospace,monospace;color:#0655FF;flex:none;width:26px}
.idx-title{font:500 clamp(17px,1.4vw,20px)/1.35 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.012em;flex:1;text-wrap:pretty}
.idx-arrow{font:400 19px/1 'IBM Plex Sans',system-ui,sans-serif;color:#0655FF;flex:none;opacity:0;transform:translateX(-6px);transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
.idx-row:hover .idx-arrow,.idx-row:focus-visible .idx-arrow{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.idx-row,.idx-arrow{transition:none}}
@keyframes bn-fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.qa-wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.qa-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:28px}
.qa-eyebrow{font:500 11px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:rgba(10,10,11,.58);margin:0 0 10px}
.qa-h2{font:500 clamp(30px,3.4vw,52px)/1.02 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.03em;margin:0}
.qa-lede{font:400 16px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:rgba(10,10,11,.62);margin:0;max-width:34ch}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qa-card{position:relative;display:flex;flex-direction:column;gap:10px;border-radius:14px;padding:26px 26px 24px;overflow:hidden;isolation:isolate;transition:transform .24s cubic-bezier(.2,.7,.2,1),box-shadow .24s cubic-bezier(.2,.7,.2,1),border-color .24s cubic-bezier(.2,.7,.2,1),background .24s cubic-bezier(.2,.7,.2,1)}
.qa-card:hover{transform:translateY(-5px)}
.qa-ink{background:#0A0A0B;border:1px solid #2A2A2E;color:#FAFAF8}
.qa-ink:hover{box-shadow:0 26px 52px -28px rgba(10,10,11,.72)}
.qa-blue{background:linear-gradient(115deg,#0858FF,#0A48E0 55%,#0334B8);border:1px solid rgba(255,255,255,.2);color:#fff}
.qa-blue:hover{box-shadow:0 26px 52px -26px rgba(6,85,255,.66)}
.qa-light{background:#FAFAF8;border:1px solid rgba(10,10,11,.14);color:#0A0A0B}
.qa-light:hover{background:#fff;border-color:#0A0A0B;box-shadow:0 22px 44px -28px rgba(10,10,11,.45)}
.qa-tex{position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(120% 130% at 90% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(120% 130% at 90% 0%,#000 20%,transparent 75%)}
.qa-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.qa-q{font:500 11px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;margin:0}
.qa-ink .qa-q,.qa-blue .qa-q{color:#fff}
.qa-light .qa-q{color:#0655FF}
.qa-num{font:500 11px/1 'IBM Plex Mono',ui-monospace,monospace;flex:none;transition:transform .24s cubic-bezier(.2,.7,.2,1)}
.qa-ink .qa-num{color:#B5FF3C}
.qa-blue .qa-num{color:#DCE5FF}
.qa-light .qa-num{color:rgba(10,10,11,.34)}
.qa-card:hover .qa-num{transform:translateX(4px)}
.qa-a{font:500 clamp(20px,1.8vw,25px)/1.2 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.022em;margin:0;text-wrap:pretty}
.qa-ink .qa-a,.qa-blue .qa-a{color:#fff}
.qa-detail{font:400 14.5px/1.5 'IBM Plex Sans',system-ui,sans-serif;margin:0;text-wrap:pretty}
.qa-ink .qa-detail{color:rgba(250,250,248,.82)}
.qa-blue .qa-detail{color:#DCE5FF}
.qa-light .qa-detail{color:rgba(10,10,11,.66)}
.qa-bar{position:absolute;left:0;right:0;bottom:0;height:3px;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.qa-ink .qa-bar{background:#B5FF3C}
.qa-blue .qa-bar{background:#fff}
.qa-light .qa-bar{background:#0655FF}
.qa-card:hover .qa-bar{transform:scaleX(1)}
html.bn-anim .qa-card{animation:bn-fade-up .5s cubic-bezier(.2,.7,.2,1) both}
html.bn-anim .qa-card:nth-child(1){animation-delay:.05s}
html.bn-anim .qa-card:nth-child(2){animation-delay:.14s}
html.bn-anim .qa-card:nth-child(3){animation-delay:.23s}
html.bn-anim .qa-card:nth-child(4){animation-delay:.32s}
@media (max-width:760px){.qa-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.qa-card,.qa-num,.qa-bar{transition:none}html.bn-anim .qa-card{animation:none}}
.ef{margin-top:28px;border:1px solid rgba(10,10,11,.14);border-radius:14px;background:#FAFAF8;overflow:hidden}
.ef-cap{font:500 11px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:rgba(10,10,11,.58);margin:0;padding:18px 24px;border-bottom:1px solid rgba(10,10,11,.14)}
.ef-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(10,10,11,.12);margin:0}
.ef-item{background:#FAFAF8;padding:18px 24px 20px;transition:background .2s cubic-bezier(.2,.7,.2,1)}
.ef-item:hover{background:#fff}
.ef-k{font:500 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.09em;color:rgba(10,10,11,.52);margin:0 0 7px}
.ef-v{font:500 16px/1.35 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.012em;color:#0A0A0B;margin:0;text-wrap:pretty}
.ef-item:nth-child(n+5){grid-row:2}
@media (max-width:1000px){.ef-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ef-item:nth-child(n+5){grid-row:auto}}
@media (max-width:560px){.ef-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ef-item{transition:none}}
.btn,.btn:link,.btn:visited,.btn:hover,.btn:focus{text-decoration:none}
.stk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.stk-col{display:flex;flex-direction:column;gap:12px}
.stk-h{display:flex;align-items:center;gap:10px;font:500 11px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.09em;color:#0655FF;margin:0 0 2px}
.stk-h span{width:7px;height:7px;background:#0655FF;flex:none}
.stk-card{background:#fff;border:1px solid rgba(10,10,11,.14);border-radius:12px;padding:20px 22px;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1),border-color .2s cubic-bezier(.2,.7,.2,1)}
.stk-card:hover{transform:translateY(-3px);border-color:#0A0A0B;box-shadow:0 18px 38px -26px rgba(10,10,11,.42)}
.stk-cat{font:500 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;color:rgba(10,10,11,.5);margin:0 0 9px}
.stk-pick{font:500 17px/1.28 'IBM Plex Sans',system-ui,sans-serif;letter-spacing:-.015em;color:#0A0A0B;margin:0;text-wrap:pretty}
.stk-why{font:400 14px/1.5 'IBM Plex Sans',system-ui,sans-serif;color:rgba(10,10,11,.62);margin:9px 0 0;text-wrap:pretty}
.stk-not{display:inline-block;font:500 10.5px/1.3 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.05em;color:rgba(10,10,11,.5);margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(10,10,11,.1);width:100%}
@media (max-width:900px){.stk-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.stk-card{transition:none}}
@media (max-width:768px){#s02-at-a-glance,#s04-what-gets-tried-before-automation,#s05-how-we-designed-the-reconciliation-pipeline,#s06-the-technology-stack-we-used,#s07-how-does-one-monthly-run-work,#s09-how-we-fixed-each-of-them,#s10-what-changed-after-go-live,#s11-what-is-running-today,#s12-what-would-we-do-differently,#s13-where-else-does-this-pattern-fit,#s14-questions-buyers-usually-ask,#s15-the-services-this-was-built-from{padding-top:64px!important;padding-bottom:64px!important}#s03-why-did-reconciliation-take-days-every-month,#s08-the-four-problems-that-nearly-stopped-us,#s16-other-builds-with-this-shape,#bn-form{padding-top:72px!important;padding-bottom:72px!important}}
@media (max-width:640px){.idx-grid{grid-template-columns:minmax(0,1fr)}.idx-row{padding:16px 14px}.ef-grid{grid-template-columns:minmax(0,1fr)!important}}

.bn-hv-1:hover{border-color:#fff}
.bn-hv-2:hover{background:#FAFAF8;color:#0444CC}
.bn-hv-3:hover{background:#fff}
.bn-hv-4:hover{background:#0444CC}
.bn-hv-5:hover{color:#0655FF}
.bn-hv-6:hover{background:#fff;border-color:#0A0A0B}
.bn-hv-7:hover{border-color:rgba(244,239,230,.44)}
.bn-native-btn:hover{background:#0444CC!important;border-color:#0444CC!important;color:#fff!important;text-decoration:none}
#bn-sticky-dismiss:hover{background:rgba(255,255,255,.24)!important}



.form-row {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}.form-row.single { grid-template-columns: 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; }
.field input, .field select, .field textarea {
     width: 100%;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    padding: 14px 16px;
    font: inherit;
    font-size: 15.5px;
    color: #fff;
    min-height: 48px;
}

input::placeholder,
textarea::placeholder {
   color: #fff;
    opacity: .8;
}
.contact_form_case .btn-primary {
    background: #fff;
    color: var(--ink);
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23bababa' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.req { color: var(--blue); }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.form-fine { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; color: var(--muted-dark); letter-spacing: 0.04em; }

.contact_form_case .btn-primary {
    background: #fff;
    color: var(--ink);
}
.field p {
    margin: 0;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 22px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}