:root{--blue:#0071E3;--blue-h:#0077ED;--link:#06c;--ink:#1D1D1F;--grey:#6E6E73;--grey-l:#86868B;--line:#D2D2D7;--hair:#E8E8ED;--panel:#F5F5F7;
--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif}

/* ===== SuperFile Knowledge Base ===== */
.ld{opacity:0;transform:translateY(12px);animation:kbin .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes kbin{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ld{animation:none;opacity:1;transform:none}}

.kb-hero,.kb-body,.kb-art,.kb-more{max-width:980px;margin:0 auto;padding-left:22px;padding-right:22px}

/* hero */
.kb-hero{text-align:center;padding-top:clamp(40px,7vh,78px);padding-bottom:clamp(16px,2.5vh,28px)}
.kb-eyebrow{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--blue);margin:0 0 8px}
.kb-h1{font-size:clamp(38px,5.6vw,58px);font-weight:600;letter-spacing:-.035em;line-height:1.04;color:var(--ink);margin:0}
.kb-lede{font-size:clamp(17px,1.8vw,20px);color:var(--grey);margin:14px auto 0;max-width:38ch;line-height:1.38;letter-spacing:-.01em}
.kb-search{position:relative;max-width:560px;margin:clamp(20px,3.2vh,30px) auto 0}
.kb-search svg{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--grey-l)}
.kb-search input{width:100%;border:1px solid var(--line);border-radius:999px;background:#fff;padding:15px 22px 15px 50px;font-family:var(--sans);font-size:16px;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none}
.kb-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,113,227,.13)}
.kb-search input::placeholder{color:var(--grey-l)}

/* categories */
.kb-cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:clamp(18px,3vh,28px) 0 clamp(20px,3vh,28px)}
.kb-cats button{font-family:var(--sans);font-size:13px;font-weight:500;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 15px;cursor:pointer;color:var(--ink);transition:background .15s,border-color .15s}
.kb-cats button:hover{border-color:var(--grey-l)}
.kb-cats button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* article cards */
.kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.kb-card{display:flex;flex-direction:column;gap:6px;background:var(--panel);border-radius:20px;padding:22px 22px 20px;text-decoration:none;color:var(--ink);transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.kb-card:hover{transform:translateY(-3px);background:#EEEEF0;text-decoration:none;box-shadow:0 12px 26px -14px rgba(0,0,0,.25)}
.kb-card .kc{font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--blue)}
.kb-card .kt{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.28}
.kb-card .ks{font-size:13.5px;color:var(--grey);line-height:1.45;flex:1}
.kb-card .kr{font-size:13.5px;font-weight:500;color:var(--link);margin-top:6px}
.kb-note,.kb-empty{text-align:center;color:var(--grey);font-size:15px;padding:30px 0}
.kb-empty a{color:var(--link)}

/* article */
.kb-art{max-width:720px;padding-top:clamp(30px,5vh,54px)}
.kb-back{display:inline-block;font-size:13.5px;font-weight:500;color:var(--link);text-decoration:none;margin-bottom:20px}
.kb-back:hover{text-decoration:underline}
.kb-cat{font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.kb-art h1{font-size:clamp(29px,4vw,42px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin:0}
.kb-sum{font-size:clamp(17px,1.8vw,19px);color:var(--grey);line-height:1.45;margin:14px 0 0;letter-spacing:-.01em}
.kb-sum a{color:var(--link)}
.kb-prose{margin-top:clamp(22px,3.5vh,32px);border-top:1px solid var(--hair);padding-top:clamp(20px,3vh,28px)}
.kb-prose p{font-size:16.5px;line-height:1.65;color:#2A2A2E;margin:0 0 16px}
.kb-prose h2{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:28px 0 10px}
.kb-prose h3{font-size:17px;font-weight:600;margin:22px 0 8px}
.kb-prose ul,.kb-prose ol{padding-left:22px;margin:0 0 16px}
.kb-prose li{font-size:16.5px;line-height:1.6;color:#2A2A2E;margin:0 0 7px}
.kb-prose a{color:var(--link)}
.kb-prose code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:14px;background:var(--panel);border-radius:6px;padding:2px 6px}
.kb-updated{font-size:12.5px;color:var(--grey-l);margin:26px 0 0}

/* related */
.kb-more{max-width:720px;margin-top:clamp(34px,5vh,48px)}
.kb-more h2{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.kb-morelink{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--panel);border-radius:14px;padding:14px 18px;margin-bottom:8px;text-decoration:none;color:var(--ink);font-size:15px;font-weight:500;transition:background .15s}
.kb-morelink:hover{background:#EAEAEC;text-decoration:none}
.kb-morelink span{color:var(--grey-l)}

/* closing cta */
.kb-cta{margin-top:clamp(50px,8vh,80px);background:var(--panel)}
.kb-cta-in{max-width:720px;margin:0 auto;padding:clamp(44px,7vh,68px) 22px;text-align:center}
.kb-cta-in h2{font-size:clamp(25px,3vw,33px);font-weight:600;letter-spacing:-.02em;margin:0}
.kb-cta-in p{font-size:16px;color:var(--grey);margin:12px auto 24px;max-width:46ch;line-height:1.45}
.kb-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.kb-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--blue);color:#fff;border:0;border-radius:12px;padding:13px 26px;font-size:16px;font-weight:500;cursor:pointer;font-family:var(--sans);text-decoration:none;transition:background .15s}
.kb-btn:hover{background:var(--blue-h);text-decoration:none}
.kb-btn.ghost{background:#fff;color:var(--blue);border:1px solid var(--line)}
.kb-btn.ghost:hover{background:#fff;border-color:var(--blue)}

@media (max-width:600px){
  .kb-grid{grid-template-columns:1fr;gap:11px}
  .kb-card{padding:18px 18px 16px;border-radius:18px}
}