/* Services page: product screens for each service */
.svc-art.scr { display: flex; align-items: center; justify-content: center; padding: 2.2rem 1.6rem 1.6rem; aspect-ratio: auto; min-height: 330px; }
.mw { width: 100%; max-width: 470px; background: #F7F5EF; color: #0F1C33; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(226,189,74,.3); transform: perspective(1400px) rotateY(-5deg) rotateX(2deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.svc.flip .mw { transform: perspective(1400px) rotateY(5deg) rotateX(2deg); }
.svc:hover .mw { transform: none; }
.mw-bar { display: flex; align-items: center; gap: 5px; padding: 8px 11px; background: #E9E6DC; border-bottom: 1px solid #DDD8CA; }
.mw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E5867A; } .mw-bar i:nth-child(2) { background: #E8C35A; } .mw-bar i:nth-child(3) { background: #8FC48A; }
.mw-bar span { margin-left: 8px; font-size: .66rem; font-weight: 600; color: #6B6450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-body { padding: 14px; font-size: .74rem; }
.svc .mw-body > * { opacity: 0; transform: translateY(8px); }
.svc.in .mw-body > * { animation: mwin .55s cubic-bezier(.2,.8,.2,1) forwards; }
.svc.in .mw-body > *:nth-child(2) { animation-delay: .25s } .svc.in .mw-body > *:nth-child(3) { animation-delay: .5s } .svc.in .mw-body > *:nth-child(4) { animation-delay: .75s } .svc.in .mw-body > *:nth-child(5) { animation-delay: 1s } .svc.in .mw-body > *:nth-child(6) { animation-delay: 1.25s }
@keyframes mwin { to { opacity: 1; transform: none; } }
.svc-art.scr .k { display: none; }

/* A: draft under review */
.a-body { display: grid; gap: 10px; }
.a-page { background: #fff; border: 1px solid #E3E0D6; border-radius: 8px; padding: 10px 12px; }
.a-h { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A6D12; margin-bottom: 6px; }
.a-page .ln { height: 6px; border-radius: 3px; background: #E3E6EC; margin: 6px 0; } .a-page .ln.m { width: 80%; } .a-page .ln.s { width: 55%; }
.a-t { font-family: Georgia, serif; font-size: .8rem; margin: 6px 0; line-height: 1.45; }
.a-mk { background: linear-gradient(90deg, rgba(226,189,74,.8), rgba(226,189,74,.8)) no-repeat 0 0 / 0% 100%; color: inherit; }
.svc.in .a-mk { animation: sweep 1.4s ease-out .8s forwards; }
.a-note { background: #0F1C33; color: #fff; border-radius: 8px; padding: 9px 11px; font-size: .72rem; line-height: 1.4; border-left: 3px solid #E2BD4A; }
.a-note b { display: block; color: #E2BD4A; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; }
.a-note small { display: block; color: #AEB9CC; margin-top: 4px; font-size: .62rem; }
.a-prog { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: .62rem; color: #6B6450; }
.a-bar { height: 6px; border-radius: 3px; background: #E3E0D6; overflow: hidden; } .a-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #C9A227, #E2BD4A); }
.svc.in .a-bar i { animation: fillw 2.4s cubic-bezier(.2,.8,.2,1) 1s forwards; } @keyframes fillw { to { width: 100%; } }
.a-prog em { font-style: normal; font-weight: 700; color: #0F1C33; }

/* B: borrower review list */
.b-head, .b-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #E8E4D8; }
.b-head { font-size: .58rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A6D12; padding-top: 0; }
.b-row span { color: #0F1C33; }
.lv { font-style: normal; font-size: .6rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; height: fit-content; white-space: nowrap; }
.lv.h { background: #F6DCD6; color: #9A2E1C; } .lv.m { background: #F6EBC8; color: #7A5B00; } .lv.l { background: #E3E9F1; color: #3B4A63; }
.b-foot { margin-top: 8px; font-size: .62rem; color: #6B6450; }

/* C: group filings dashboard */
.c-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.c-kpi div { background: #fff; border: 1px solid #E3E0D6; border-radius: 8px; padding: 8px 10px; }
.c-kpi b { display: block; font-size: 1.15rem; letter-spacing: -.02em; } .c-kpi span { font-size: .6rem; color: #6B6450; }
.c-kpi .red b { color: #B4432F; } .c-kpi .amb b { color: #A7790A; }
.c-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #E8E4D8; }
.c-row em { font-style: normal; color: #4B5668; font-size: .66rem; }
.c-row .dot { width: 9px; height: 9px; border-radius: 50%; padding: 0; border: 0; } .dot.dg { background: #2E9E6A; } .dot.da { background: #E2BD4A; } .dot.dr { background: #D0573F; animation: blink 1.4s ease-in-out infinite; }

/* D: peer benchmark tracks */
.d-leg { display: flex; gap: 12px; font-size: .6rem; color: #6B6450; margin-bottom: 6px; }
.d-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
i.you { background: #C9A227; } i.med { background: #9AA6BA; } i.best { background: #1C3358; }
.d-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #E8E4D8; }
.d-trk { position: relative; height: 6px; border-radius: 3px; background: #E3E0D6; }
.d-trk i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 2px solid #F7F5EF; transition: left 1.2s cubic-bezier(.2,.8,.2,1); }
.svc.in .d-trk i { left: var(--x); }
.svc.in .d-trk i.you { transition-delay: .6s; }

@media (max-width: 560px) { .mw { transform: none !important; } .svc-art.scr { padding: 2rem .8rem 1rem; } .d-row { grid-template-columns: 96px 1fr; } }
@media (prefers-reduced-motion: reduce) { .svc .mw-body > * { opacity: 1; transform: none; animation: none !important; } .a-mk { background-size: 100% 100%; } .a-bar i { width: 100%; } .d-trk i { left: var(--x); transition: none; } }