/* Graphican for Business — /business/ (markup: .github/scripts/apps.py business_page, text: content/business.json) */
.bz-hero, .bz-sec { max-width:1180px; margin:0 auto; padding:0 20px; }
.bz-hero { padding-top:clamp(24px, 6vw, 72px); padding-bottom:clamp(40px, 7vw, 88px); }
.bz-eyebrow { display:inline-block; margin-bottom:18px; font-size:12px; font-weight:700; letter-spacing:.18em; color:#a497ff; }
.bz-hero h1 { margin:0; max-width:15ch; font:700 clamp(28px, 8.4vw, 84px)/1.04 'Inter Tight', Inter, sans-serif; letter-spacing:-.03em; text-wrap:balance; }
.bz-lead { max-width:640px; margin:24px 0 0; font-size:clamp(16px, 1.6vw, 19px); line-height:1.6; color:rgba(255,255,255,.72); }
.bz-btns { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.bz-sec { padding-top:clamp(40px, 6vw, 80px); padding-bottom:clamp(8px, 2vw, 20px); }
.bz-sec h2 { margin:0 0 22px; font:700 clamp(26px, 3.4vw, 40px)/1.15 'Inter Tight', Inter, sans-serif; letter-spacing:-.02em; }
.bz-sec p { color:rgba(255,255,255,.68); line-height:1.6; }
.bz-svcs, .bz-steps { list-style:none; margin:0; padding:0; }
.bz-svcs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.bz-svc { position:relative; padding:24px 22px 22px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.035); }
.bz-svc b { display:block; margin-top:28px; font:700 21px/1.2 'Inter Tight', Inter, sans-serif; }
.bz-svc p { margin:8px 0 0; font-size:15px; }
.bz-n { position:absolute; top:20px; left:22px; font:700 13px/1 'Inter Tight', Inter, sans-serif; letter-spacing:.08em; color:#a497ff; }
.bz-steps { display:grid; gap:10px; counter-reset:bz; }
.bz-steps li { counter-increment:bz; display:grid; grid-template-columns:56px minmax(0, 1fr); column-gap:16px; padding:20px 22px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.025); }
.bz-steps li::before { content:counter(bz, decimal-leading-zero); grid-row:span 2; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid rgba(164,151,255,.45); color:#a497ff; font:700 14px/1 'Inter Tight', Inter, sans-serif; }
.bz-steps b { font:700 18px/1.3 'Inter Tight', Inter, sans-serif; align-self:end; }
.bz-steps p { margin:4px 0 0; font-size:15px; }
.bz-lines { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.bz-line { padding:26px; border-radius:18px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(160deg, rgba(123,100,255,.14), rgba(255,255,255,.02)); }
.bz-line b { font:700 22px/1.2 'Inter Tight', Inter, sans-serif; }
.bz-line p { margin:10px 0 0; }
.bz-eq { margin:18px 0 0; font:600 clamp(15px, 1.8vw, 19px)/1.4 'Inter Tight', Inter, sans-serif; color:#fff !important; letter-spacing:-.01em; }
.bz-contact { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(20px, 4vw, 56px); align-items:start; }
.bz-direct a { color:#a497ff; }
.bz-form { display:grid; gap:14px; padding:24px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(255,255,255,.04); }
.bz-form label { display:grid; gap:6px; font-size:13.5px; font-weight:600; color:rgba(255,255,255,.8); }
.bz-form small { font-weight:400; color:rgba(255,255,255,.5); }
.bz-form input:not([type=radio]), .bz-form textarea { width:100%; min-height:46px; padding:11px 13px; border-radius:11px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.25); color:#fff; font:inherit; font-size:16px; font-weight:400; }
.bz-form textarea { resize:vertical; }
.bz-form input:focus, .bz-form textarea:focus { outline:none; border-color:#a497ff; }
.bz-form [aria-invalid="true"] { border-color:#fca5a5 !important; }
.bz-two { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.bz-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.bz-go { justify-self:start; }
.bz-msg { margin:0; min-height:1.4em; font-size:14px; }
.bz-msg.bad { color:#fca5a5 !important; }
.bz-done b { display:block; font:700 22px/1.3 'Inter Tight', Inter, sans-serif; color:#fff; }
.bz-done p { margin:8px 0 0; }
.bz-faq { max-width:860px; padding-bottom:clamp(40px, 6vw, 80px); }
/* how a member uses it: three steps under the hero */
.bz-how { list-style:none; margin:clamp(36px, 5vw, 56px) 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; counter-reset:hw; max-width:980px; }
.bz-how li { counter-increment:hw; position:relative; padding:18px 18px 16px 62px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(10,8,20,.55); backdrop-filter:blur(6px); }
.bz-how li::before { content:counter(hw); position:absolute; left:16px; top:16px; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#7b64ff; color:#fff; font:700 14px/1 'Inter Tight', Inter, sans-serif; }
.bz-how b { display:block; font:700 16px/1.3 'Inter Tight', Inter, sans-serif; color:#fff; }
.bz-how p { margin:4px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.65); }
/* why: the reasons */
.bz-whys { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.bz-why { padding:22px 20px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.035); }
.bz-why svg { width:28px; height:28px; fill:none; stroke:#a497ff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bz-why b { display:block; margin-top:14px; font:700 18px/1.25 'Inter Tight', Inter, sans-serif; }
.bz-why p { margin:8px 0 0; font-size:14.5px; }
.bz-why:nth-child(-n+2) { border-color:rgba(164,151,255,.4); background:linear-gradient(165deg, rgba(123,100,255,.16), rgba(255,255,255,.02)); }
/* compare */
.bz-cmpw { border:1px solid rgba(255,255,255,.1); border-radius:18px; overflow:hidden; }
.bz-cmp { width:100%; border-collapse:collapse; font-size:15px; }
.bz-cmp th, .bz-cmp td { padding:16px 20px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.08); }
.bz-cmp tbody tr:last-child th, .bz-cmp tbody tr:last-child td { border-bottom:0; }
.bz-cmp thead th { font-size:13px; font-weight:700; color:rgba(255,255,255,.6); background:rgba(255,255,255,.03); }
.bz-cmp thead th:last-child { color:#c4b5ff; }
.bz-cmp tbody th { width:24%; font-weight:600; color:#fff; }
.bz-cmp td { color:rgba(255,255,255,.6); }
.bz-cmp td:last-child { color:#fff; font-weight:600; background:rgba(123,100,255,.08); }
@media (max-width:1100px) { .bz-whys { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:900px) {
  .bz-how { grid-template-columns:minmax(0, 1fr); }
  .bz-svcs { grid-template-columns:minmax(0, 1fr); }
  .bz-lines, .bz-contact { grid-template-columns:minmax(0, 1fr); }
}
@media (min-width:600px) and (max-width:900px) { .bz-svcs { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:640px) {
  .bz-whys { grid-template-columns:minmax(0, 1fr); }
  .bz-cmp thead { display:none; }
  .bz-cmp, .bz-cmp tbody, .bz-cmp tr, .bz-cmp th, .bz-cmp td { display:block; width:auto; }
  .bz-cmp tr { padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
  .bz-cmp tbody tr:last-child { border-bottom:0; }
  .bz-cmp th, .bz-cmp td { padding:0; border:0; }
  .bz-cmp tbody th { width:auto; margin-bottom:8px; }
  .bz-cmp td { padding:8px 10px; border-radius:10px; font-size:14px; }
  .bz-cmp td::before { content:attr(data-h); display:block; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:rgba(255,255,255,.45); margin-bottom:2px; }
  .bz-cmp td:last-child { margin-top:6px; }
}
@media (max-width:520px) {
  .bz-two { grid-template-columns:minmax(0, 1fr); }
  .bz-steps li { grid-template-columns:40px minmax(0, 1fr); padding:16px; column-gap:12px; }
  .bz-steps li::before { width:36px; height:36px; font-size:12.5px; }
  .bz-form { padding:18px; }
}