/* BankLens — shared styles for the sales page and account pages */
:root{
  --ledger:#1D6A50; --ledger-deep:#14503C; --mint:#E4EFE9; --paper:#FAFBF9; --ink:#17202B;
  --muted:#59656F; --rule:#D5DDD9; --stamp:#A8322D; --stamp-soft:#F6E3E1; --white:#FFFFFF;
  --font:"IBM Plex Sans","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6}
a{color:var(--ledger)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #7FB79F;outline-offset:2px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{line-height:1.18;margin:0;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem);letter-spacing:-.025em}
h2{font-size:clamp(1.6rem,3vw,2.15rem);letter-spacing:-.02em}
h3{font-size:1.08rem}
p{margin:0 0 1em}
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid var(--ledger);background:var(--white);color:var(--ledger);
  font:600 1rem/1 var(--font);padding:14px 22px;border-radius:6px;text-decoration:none;cursor:pointer;min-height:48px}
.btn:hover{background:var(--mint)}
.btn.primary{background:var(--ledger);color:var(--white)}
.btn.primary:hover{background:var(--ledger-deep);border-color:var(--ledger-deep)}
.btn.small{padding:9px 14px;min-height:38px;font-size:.92rem}
.btn[disabled]{opacity:.55;cursor:wait}

/* top bar */
.top{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.1;margin-right:auto}
.brand b{font-size:1.25rem;letter-spacing:-.02em}
.brand b i{font-style:normal;color:var(--ledger)}
.brand span{font-size:.75rem;color:var(--muted)}
.lang{display:flex;border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.lang button{border:0;background:transparent;font:500 .85rem/1 var(--font);padding:8px 10px;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.top .login{color:var(--ink);text-decoration:none;font-weight:500}
@media (max-width:720px){ .top .login{display:none} .top .btn{padding:9px 12px;min-height:40px;font-size:.88rem} .brand span{display:none} }
@media (max-width:480px){ .top .btn{display:none} .top .wrap{gap:10px} }
.lang button{white-space:nowrap}
[id]{scroll-margin-top:84px}

/* hero */
.hero{padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center}
.hero p.lead{font-size:1.18rem;color:#33404B;max-width:34em;margin:22px 0 28px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .fine{font-size:.9rem;color:var(--muted);margin-top:14px}
@media (max-width:900px){ .hero .wrap{grid-template-columns:1fr;gap:40px} .hero{padding:40px 0 56px} }

/* the statement slip in the hero */
.slip{background:var(--white);border:1px solid var(--rule);border-radius:4px;box-shadow:0 1px 0 var(--rule),0 18px 40px -24px rgba(23,32,43,.35);font-size:.86rem}
.slip header{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:2px solid var(--ink)}
.slip header b{font-size:.95rem}
.slip header span{color:var(--muted)}
.slip table{width:100%;border-collapse:collapse}
.slip td{padding:8px 18px;border-bottom:1px dashed var(--rule);white-space:nowrap}
.slip td.d{color:var(--muted);width:3.5em}
.slip td.t{white-space:normal;min-width:11em}
.slip td.a,.slip td.b{text-align:right;font-variant-numeric:tabular-nums}
.slip td.k{width:28px;padding-left:0;text-align:center}
.tick{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--mint);color:var(--ledger);font-size:12px;font-weight:700}
.tick.flag{background:var(--stamp-soft);color:var(--stamp)}
.slip .verdict{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink)}
.slip .verdict div{padding:14px 18px;border-right:1px solid var(--rule)}
.slip .verdict div:last-child{border-right:0}
.slip .verdict small{display:block;color:var(--muted);font-size:.78rem}
.slip .verdict strong{font-size:1.45rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.slip .verdict .ok{color:var(--ledger)}
.slip .note{padding:10px 18px;background:var(--stamp-soft);color:var(--stamp);font-size:.82rem;border-top:1px solid #EBC9C5}
@media (prefers-reduced-motion:no-preference){
  .slip .tick{opacity:0;transform:scale(.6);animation:tick .35s ease-out forwards}
  .slip tr:nth-child(1) .tick{animation-delay:.35s} .slip tr:nth-child(2) .tick{animation-delay:.6s}
  .slip tr:nth-child(3) .tick{animation-delay:.85s} .slip tr:nth-child(4) .tick{animation-delay:1.1s}
  .slip tr:nth-child(5) .tick{animation-delay:1.35s} .slip tr:nth-child(6) .tick{animation-delay:1.6s}
  .slip .verdict,.slip .note{opacity:0;animation:show .5s ease-out 1.9s forwards}
}
@keyframes tick{to{opacity:1;transform:none}}
@keyframes show{to{opacity:1}}
@media (max-width:520px){ .slip td.t{min-width:0} .slip td{padding:7px 8px} .slip{font-size:.8rem} .slip td.d{display:none} .slip .verdict strong{font-size:1.15rem} .slip .verdict div{padding:12px 10px} }

/* sections */
section.band{padding:72px 0;border-top:1px solid var(--rule)}
section.band.tint{background:var(--white)}
.intro{max-width:40em;margin-bottom:36px}
.intro p{color:var(--muted);margin-top:12px}

/* what it checks: a ruled two-column list */
.checks{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink)}
.checks div{padding:22px 28px 22px 0;border-bottom:1px solid var(--rule)}
.checks div:nth-child(odd){padding-right:40px;border-right:1px solid var(--rule)}
.checks div:nth-child(even){padding-left:40px}
.checks h3{margin-bottom:6px}
.checks p{color:var(--muted);margin:0}
@media (max-width:760px){ .checks{grid-template-columns:1fr} .checks div:nth-child(odd){border-right:0;padding-right:0} .checks div:nth-child(even){padding-left:0} }

.banks{display:flex;flex-wrap:wrap;gap:10px 28px;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:30px;font-weight:500}
.banks span{white-space:nowrap}

/* steps (a real sequence) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;counter-reset:s}
.steps li{list-style:none;counter-increment:s;padding-top:18px;border-top:2px solid var(--ledger)}
.steps li::before{content:counter(s);display:block;font-size:2.4rem;font-weight:600;color:var(--ledger);line-height:1;margin-bottom:12px}
.steps p{color:var(--muted);margin:6px 0 0}
.steps{padding:0;margin:0}
@media (max-width:760px){ .steps{grid-template-columns:1fr} }

/* privacy statement */
.privacy{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;max-width:860px}
.privacy .seal{width:72px;height:72px;border:2px solid var(--ledger);border-radius:50%;display:grid;place-items:center;color:var(--ledger);font-weight:700;font-size:.72rem;text-align:center;line-height:1.15}
.privacy p{color:#33404B;font-size:1.06rem}

/* pricing */
.plan{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--white);max-width:880px}
.plan > div{padding:32px 34px}
.plan > div:first-child{border-right:1px solid var(--rule)}
.plan .price{font-size:2.6rem;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.plan ul{margin:0;padding:0;list-style:none}
.plan li{padding:9px 0 9px 28px;border-bottom:1px solid var(--rule);position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--ledger);font-weight:700}
@media (max-width:760px){ .plan{grid-template-columns:1fr} .plan > div:first-child{border-right:0;border-bottom:1px solid var(--rule)} }

/* faq */
.faq{max-width:820px;border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule);padding:4px 0}
.faq summary{cursor:pointer;font-weight:600;padding:14px 32px 14px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:1.3rem;color:var(--ledger)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);margin:0 0 16px}

/* footer */
footer.site{border-top:1px solid var(--rule);padding:36px 0 48px;font-size:.92rem;color:var(--muted)}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
footer.site nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* forms and panels (login, account, admin) */
.page{max-width:460px;margin:48px auto;padding:0 20px}
.page.wide{max-width:980px}
.panel{background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:28px}
.panel + .panel{margin-top:18px}
.tabs{display:flex;border-bottom:1px solid var(--rule);margin:-8px 0 22px}
.tabs button{flex:1;border:0;background:none;font:600 1rem var(--font);padding:12px;color:var(--muted);border-bottom:3px solid transparent;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--ledger)}
label.f{display:block;font-weight:500;font-size:.93rem;margin-bottom:14px}
label.f input{display:block;width:100%;margin-top:6px;font:1rem var(--font);padding:12px;border:1px solid var(--rule);border-radius:6px;background:var(--white);color:var(--ink)}
.msg{padding:12px 14px;border-radius:6px;font-size:.93rem;margin-bottom:16px}
.msg.err{background:var(--stamp-soft);color:var(--stamp)}
.msg.ok{background:var(--mint);color:var(--ledger-deep)}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.85rem;margin:18px 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--rule)}
.gbtn{width:100%;background:var(--white);color:var(--ink);border-color:var(--rule)}
.gbtn svg{width:18px;height:18px}
.status{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin-bottom:6px}
.status strong{font-size:1.5rem}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--mint);color:var(--ledger-deep)}
.pill.bad{background:var(--stamp-soft);color:var(--stamp)}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
table.list{width:100%;border-collapse:collapse;font-size:.9rem}
table.list th,table.list td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
table.list th{color:var(--muted);font-weight:600}
.scroll{overflow-x:auto}
.legal{max-width:760px;margin:40px auto 60px;padding:0 24px}
.legal h1{font-size:2rem;margin-bottom:6px}
.legal h2{font-size:1.2rem;margin:28px 0 8px}
.legal p,.legal li{color:#33404B}
