/* Apex Flow — Client Dashboard (Version 1, de-identified). Brand: navy / teal / white. */
:root{
  --navy:#0A1628; --navy-2:#13233b; --teal:#00C2A8; --teal-deep:#03a08b;
  --ink:#0A1628; --muted:#5b6b7e; --line:#e6ebf1; --bg:#f4f7fb; --white:#fff;
  --danger:#e2574c; --amber:#e8a33d; --good:#1f9d6b;
  --shadow:0 1px 3px rgba(10,22,40,.06), 0 8px 24px rgba(10,22,40,.06);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}

/* ---------- login ---------- */
#login{
  position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%, #15294a 0%, var(--navy) 60%);
  padding:24px;
}
.login-card{
  width:100%; max-width:380px; background:var(--white); border-radius:18px;
  padding:34px 30px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-card .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--navy);margin-bottom:4px}
.login-card .brand .dot{width:14px;height:14px;border-radius:4px;background:var(--teal);transform:rotate(45deg)}
.login-card p.sub{color:var(--muted);margin:.2rem 0 22px;font-size:14px}
.login-card label{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px}
.login-card input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.login-card input:focus{outline:none;border-color:var(--teal)}
.btn{
  display:inline-block;width:100%;margin-top:20px;padding:13px 16px;border:0;border-radius:10px;
  background:var(--teal);color:#04241f;font-weight:800;font-size:15px;cursor:pointer;
}
.btn:hover{background:var(--teal-deep);color:#fff}
.login-note{margin-top:16px;font-size:12px;color:var(--muted);text-align:center}

/* ---------- shell ---------- */
header.top{
  background:var(--navy); color:#dfe8f3; position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; padding:14px 22px;
}
header.top .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:17px}
header.top .brand .dot{width:13px;height:13px;border-radius:4px;background:var(--teal);transform:rotate(45deg)}
header.top .who{display:flex;align-items:center;gap:14px;font-size:14px}
header.top .who .practice{font-weight:700;color:#fff}
header.top .logout{color:#9fb3cc;cursor:pointer;font-size:13px}
header.top .logout:hover{color:#fff}

.wrap{max-width:1060px;margin:0 auto;padding:26px 22px 60px}
.sample-banner{
  background:#fff7e6;border:1px solid #f0d79a;color:#8a6a1f;border-radius:10px;
  padding:10px 14px;font-size:13px;margin-bottom:22px;display:flex;gap:8px;align-items:center
}
h1.page{font-size:24px;margin:6px 0 2px;letter-spacing:-.01em}
.period{color:var(--muted);font-size:14px;margin-bottom:20px}

section{margin:30px 0}
section > h2{
  font-size:13px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:800;margin:0 0 14px;border-left:3px solid var(--teal);padding-left:10px
}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- hero stats ---------- */
.hero{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{padding:22px 22px 20px}
.stat .v{font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--navy);line-height:1.1}
.stat .v.teal{color:var(--teal-deep)}
.stat .l{font-size:13px;font-weight:700;color:var(--ink);margin-top:6px}
.stat .s{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- two-column ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{padding:20px 22px}
.panel h3{margin:0 0 4px;font-size:16px}
.panel .cap{color:var(--muted);font-size:13px;margin:0 0 16px}

/* bars */
.bar-row{display:grid;grid-template-columns:74px 1fr 90px;align-items:center;gap:10px;margin:9px 0}
.bar-row .k{font-size:13px;color:var(--ink);font-weight:600}
.bar-track{background:#eef2f7;border-radius:8px;height:18px;overflow:hidden}
.bar-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--teal),var(--teal-deep))}
.bar-fill.danger{background:linear-gradient(90deg,#f0857b,var(--danger))}
.bar-row .amt{font-size:13px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.danger-tag{color:var(--danger);font-weight:700;font-size:11px;margin-left:6px}
.danger-note{margin-top:14px;font-size:12.5px;color:var(--muted)}
.danger-note b{color:var(--danger)}

/* ---------- turn the tide ---------- */
.tide{display:grid;gap:14px}
.tide .pat{padding:18px 20px}
.tide .pat .head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tide .pat .carc{font-weight:800;color:var(--navy)}
.tide .pat .nm{color:var(--muted);font-size:13.5px;font-weight:500}
.tide .pat .stake{font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;white-space:nowrap}
.tide .pat .meta{font-size:12px;color:var(--muted);margin-top:2px}
.act{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.act .box{background:#f7fafc;border:1px solid var(--line);border-radius:10px;padding:12px 13px}
.act .box .t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.act .box.recover .t{color:var(--teal-deep)}
.act .box.prevent .t{color:var(--navy)}
.act .box p{margin:0;font-size:13px;color:var(--ink)}
.est{margin-top:12px;font-size:12px;color:var(--muted)}
.est .pill{background:#eef7f5;color:var(--teal-deep);border-radius:20px;padding:2px 9px;font-weight:700;margin-right:6px}

/* ---------- proof ---------- */
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.proof .pc{padding:16px 18px}
.proof .pc .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.proof .pc .ref{font-weight:800;color:var(--navy)}
.proof .pc .carc{font-size:12px;background:#eef2f7;border-radius:6px;padding:2px 8px;color:var(--muted);font-weight:700}
.proof .pc .act-t{font-size:13px;color:var(--ink);margin:0 0 10px}
.proof .pc .res{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--good);font-size:14px}
.proof .pc .res .amt{margin-left:auto;color:var(--navy)}
.proof .note{grid-column:1/-1;color:var(--muted);font-size:12.5px;margin-top:-2px}

/* ---------- benchmarks ---------- */
.bm{padding:6px 22px 16px}
.bm .intro{color:var(--muted);font-size:13px;margin:14px 0}
.bm .row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.bm .row .val{font-size:26px;font-weight:800;color:var(--teal-deep);min-width:84px;font-variant-numeric:tabular-nums}
.bm .row .meat .lab{font-weight:700;font-size:14px}
.bm .row .meat .scope{color:var(--muted);font-size:12px;margin-top:2px}
.bm .row .meat .src{font-size:11.5px;margin-top:3px}
.bm .row .kicker{margin-left:auto;color:var(--navy);font-weight:700;font-size:13px;max-width:220px;text-align:right}

/* ---------- prevent + trust ---------- */
.prevent{padding:18px 22px}
.prevent ul{margin:8px 0 0;padding-left:0;list-style:none}
.prevent li{display:flex;gap:10px;padding:8px 0;font-size:14px}
.prevent li .sh{color:var(--teal-deep);font-weight:800}
.trust{margin-top:34px;padding:18px 20px;background:var(--navy);color:#cfe0f0;border-radius:var(--radius)}
.trust h4{margin:0 0 10px;color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.trust li{list-style:none;padding:5px 0;font-size:13px;display:flex;gap:9px}
.trust li .ck{color:var(--teal)}
.trust ul{margin:0;padding:0}
footer.foot{color:var(--muted);font-size:12px;text-align:center;margin-top:26px}

/* animated bars — the graph "grows" on load */
.bar-fill{transition:width 1.1s cubic-bezier(.4,0,.2,1)}

/* leakage flow — the per-practice animated "video" (autoplay + loop) */
.flowcard{padding:18px 20px}
.flowtitle{font-size:15px;font-weight:800;color:var(--navy);margin:0 0 4px}
.flowsvg{width:100%;height:auto;display:block;max-height:240px}
.flowsvg .pipe{fill:none;stroke-linecap:round;stroke-dasharray:9 11;animation:flow 1s linear infinite}
.flowsvg .pipe.teal{stroke:var(--teal-deep)}
.flowsvg .pipe.tealL{stroke:#86d9cd}
.flowsvg .pipe.red{stroke:var(--danger)}
@keyframes flow{to{stroke-dashoffset:-20}}
.flowsvg .src rect{fill:var(--navy)}
.flowsvg .srcv{fill:#fff;font-weight:800;font-size:16px;text-anchor:middle}
.flowsvg .srcl{fill:#9fb3cc;font-size:10.5px;text-anchor:middle}
.flowsvg .fv{font-weight:800;font-size:15px;fill:var(--navy)}
.flowsvg .fl{font-size:11px;fill:var(--muted)}
.flowsvg .dot.teal{fill:var(--teal-deep)}
.flowsvg .dot.tealL{fill:#86d9cd}
.flowsvg .dot.red{fill:var(--danger)}
.flowcap{color:var(--muted);font-size:12.5px;margin-top:8px}
@media(prefers-reduced-motion:reduce){.flowsvg .pipe{animation:none} .bar-fill{transition:none}}

@media(max-width:820px){
  .hero,.proof{grid-template-columns:1fr}
  .cols,.act{grid-template-columns:1fr}
  .bm .row .kicker{display:none}
}