/* Suitly Docs — layout + article styles (extends styles.css tokens) */

.docs-hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
@media(max-width:960px){.docs-hub-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.docs-hub-grid{grid-template-columns:1fr}}
.docs-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-decoration:none;color:var(--ink);display:block;transition:box-shadow .18s,transform .18s,border-color .18s}
.docs-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#d9defc}
.docs-card .dc-ico{width:42px;height:42px;border-radius:12px;background:var(--soft-blue);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.docs-card .dc-ico svg{width:22px;height:22px;stroke:var(--blue)}
.docs-card h3{font-family:'Sora',sans-serif;font-size:1.05rem;margin-bottom:6px}
.docs-card p{color:var(--muted);font-size:.9rem;line-height:1.55}
.docs-card .dc-count{display:inline-block;margin-top:12px;font-size:.78rem;font-weight:600;color:var(--blue)}

.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;padding:48px 0 80px}
@media(max-width:900px){.docs-layout{grid-template-columns:1fr;gap:24px}}

.docs-side{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
@media(max-width:900px){.docs-side{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:var(--white)}}
.docs-side h4{font-family:'Sora',sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:18px 0 8px}
.docs-side h4:first-child{margin-top:0}
.docs-side ul{list-style:none;margin:0;padding:0}
.docs-side li a{display:block;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--ink-2);font-size:.88rem;line-height:1.4}
.docs-side li a:hover{background:var(--soft);color:var(--ink)}
.docs-side li a.on{background:var(--soft-blue);color:var(--blue);font-weight:600}

.docs-article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:44px 48px}
@media(max-width:640px){.docs-article{padding:28px 20px}}
.docs-article>h1{font-family:'Sora',sans-serif;font-size:1.7rem;margin-bottom:8px}
.docs-article .doc-intro{color:var(--muted);font-size:1rem;margin-bottom:8px}
.docs-article h2{font-family:'Sora',sans-serif;font-size:1.18rem;margin:40px 0 12px;padding-top:24px;border-top:1px solid var(--line-2);scroll-margin-top:96px}
.docs-article h3{font-family:'Sora',sans-serif;font-size:.98rem;margin:22px 0 8px}
.docs-article p{color:var(--ink-2);font-size:.94rem;margin-bottom:10px}
.docs-article ul,.docs-article ol{margin:0 0 14px 22px;color:var(--ink-2);font-size:.94rem}
.docs-article li{margin-bottom:5px}
.docs-article code{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.85em}
.docs-article .doc-note{background:var(--soft-blue);border:1px solid #dbe3ff;border-radius:12px;padding:14px 18px;font-size:.9rem;color:var(--ink-2);margin:14px 0}
.docs-article .doc-note strong{color:var(--ink)}
.docs-next{display:flex;justify-content:space-between;gap:12px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line-2)}
.docs-next a{text-decoration:none;color:var(--blue);font-weight:600;font-size:.92rem}