/* Guides layer for app sites (calm). Uses live tokens: --bg --bg-raised --border --text --muted --accent-text */


.g-main{padding:72px 24px 144px}
.g-art{max-width:700px;margin:0 auto}
.g-crumbs{display:flex;gap:10px;font-size:14px;color:var(--muted);margin-bottom:28px}
.g-crumbs a{color:var(--muted);text-decoration:none}.g-crumbs a:hover{color:var(--g-acc)}
.g-art h1{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:44px;line-height:1.15;letter-spacing:-.02em;font-weight:700;margin:0 0 24px;text-wrap:balance}
.g-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:15px;margin:0}
.g-also{font-size:14px;color:var(--muted);margin:8px 0 48px}
.g-also a{color:var(--g-acc)}
.g-toc{border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin:0 0 56px}
.g-toc summary{cursor:pointer;font-weight:600;font-size:15px}
.g-toc ol{margin:12px 0 0 20px;font-size:15px;line-height:1.9}
.g-toc a{color:var(--text);text-decoration:none}.g-toc a:hover{color:var(--g-acc)}
.g-body{font-size:17px;line-height:1.75;color:var(--text)}
.g-body p,.g-body ul{margin:0 0 24px;text-wrap:pretty}
.g-body ul{padding-left:22px}.g-body li{margin-bottom:12px}
.g-body h2,.g-faq h2,.g-related h2{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:26px;line-height:1.3;letter-spacing:-.01em;margin:64px 0 18px;scroll-margin-top:120px}
.g-body a{color:var(--g-acc);text-underline-offset:3px}
.g-body code{font-size:.88em;background:var(--g-acc-soft);padding:2px 6px;border-radius:6px;overflow-wrap:anywhere}
.g-faq{margin-top:80px;border-top:1px solid var(--border);padding-top:8px}
.g-faq details{border-bottom:1px solid var(--border);padding:18px 0}
.g-faq summary{cursor:pointer;font-weight:600;font-size:17px}
.g-faq details p{margin:12px 0 0;font-size:16px;line-height:1.7;color:var(--muted)}
.g-cta{display:flex;gap:20px;align-items:flex-start;margin:80px 0 0;padding:32px;border-radius:18px;background:var(--g-acc-soft)}
.g-cta img{flex:none}
.g-cta p{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--muted)}
.g-cta .g-cta-t{font-weight:700;font-size:19px;color:var(--text);margin-bottom:8px}
.g-btn{display:inline-block;padding:12px 20px;border-radius:999px;border:1.5px solid var(--g-acc);color:var(--g-acc);text-decoration:none;font-weight:600;font-size:15px}
.g-btn:hover{background:var(--g-base);border-color:var(--g-base);color:#fff}
.g-related{max-width:1080px;margin:144px auto 0}
.g-related h2{margin-top:0;margin-bottom:28px}
.g-relgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g-rel{display:flex;flex-direction:column;gap:10px;padding:28px;border:1px solid var(--border);border-radius:18px;text-decoration:none;color:var(--text)}
.g-rel:hover{border-color:var(--acc)}
.g-app{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.g-app i{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.g-rel b{font-size:17px;line-height:1.4}
.g-sum{font-size:15px;line-height:1.6;color:var(--muted)}
.g-all{margin-top:28px}.g-all a{color:var(--g-acc);font-weight:600}
.site-footer p,.legal-note{text-wrap:pretty}
@media (max-width:860px){.g-relgrid{grid-template-columns:1fr}}
@media (max-width:600px){.g-main{padding:40px 20px 96px}.g-art h1{font-size:32px}.g-body{font-size:17px}.g-body h2{font-size:22px;margin-top:48px}.g-cta{flex-direction:column;padding:24px}.g-related{margin-top:96px}.g-rel{padding:22px}}
.g-fig{margin:8px 0 32px}
.g-fig img{width:100%;height:auto;border-radius:12px;border:1px solid var(--border);background:#fff}
.g-body ol{margin:0 0 24px;padding-left:24px}.g-body ol li{margin-bottom:10px}
.g-tbl{overflow-x:auto;margin:0 0 28px;border:1px solid var(--border);border-radius:12px}
.g-tbl table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.55}
.g-tbl th,.g-tbl td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--border)}
.g-tbl tr:last-child td{border-bottom:0}
.g-tbl th{font-weight:600}
.g-tbl code{white-space:nowrap}
.g-list{list-style:none;padding:0;margin:40px 0 0}
.g-list li{border-top:1px solid var(--border)}.g-list li:last-child{border-bottom:1px solid var(--border)}
.g-list a{display:block;padding:28px 0;text-decoration:none;color:var(--text)}
.g-list b{display:block;font-size:21px;line-height:1.35;margin-bottom:8px}
.g-list span{display:block;color:var(--muted);font-size:17px;line-height:1.6}
.g-list time{display:block;margin-top:8px;color:var(--muted);font-size:15px}
.g-lead{font-size:19px;line-height:1.6;color:var(--muted);margin:0}