/* Guides and explainers (app/guides, app/learn). Builds on hub.css tokens; long-form reading layout. */
.g-head{padding:56px 0 36px;background:radial-gradient(ellipse at 20% 0%,rgba(92,200,255,.12),transparent 60%),radial-gradient(ellipse at 90% 10%,rgba(255,122,89,.10),transparent 55%)}
.g-head h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1}
.g-lede{font-size:1.22rem;color:var(--ink);margin-top:20px!important;max-width:40em}
.g-by{color:var(--quiet);font-size:.95rem;margin-top:16px!important}
.g-body{padding-bottom:72px}
.g-body h2{font-size:clamp(1.7rem,4.2vw,2.4rem);margin:56px 0 16px;scroll-margin-top:88px}
.g-body h3{font-size:1.3rem;margin:32px 0 10px}
.g-body p,.g-body li{color:#e8def4;max-width:44em}
.g-body p+p{margin-top:14px}
.g-body ul,.g-body ol{padding-left:1.3em;margin:14px 0}
.g-body li+li{margin-top:8px}
.g-body strong{color:var(--ink)}
.g-toc{border:1px solid var(--hair);border-radius:16px;padding:18px 22px;background:var(--panel);margin-top:8px}
.g-toc p{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:.82rem;letter-spacing:.08em}
.g-toc ol{margin:10px 0 0;columns:2;column-gap:28px}
.g-toc li{break-inside:avoid;margin:0 0 6px!important}
@media (max-width:640px){.g-toc ol{columns:1}}
.g-steps{counter-reset:gs;list-style:none;padding:0!important}
.g-steps>li{counter-increment:gs;position:relative;padding-left:3.2rem;margin-top:22px!important}
.g-steps>li::before{content:counter(gs);position:absolute;left:0;top:-4px;font-family:var(--font-display);font-size:2.2rem;line-height:1;color:var(--sun);text-shadow:0 3px 0 var(--coral)}
.g-shot{margin:28px 0;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--deep)}
.g-shot img{width:100%;height:auto}
.g-shot figcaption{padding:10px 16px;color:var(--quiet);font-size:.92rem}
.g-shot.port{max-width:360px;margin-left:auto;margin-right:auto}
.g-cta{margin:36px 0;padding:24px;border-radius:18px;background:linear-gradient(135deg,var(--raise),var(--panel));border:1px solid var(--line)}
.g-cta-t{font-family:var(--font-display);font-size:1.5rem;color:var(--sun)}
.g-cta p+p{margin-top:8px}
.g-cta .row{margin-top:18px}
.g-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.98rem}
.g-table th,.g-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
.g-table th{color:var(--muted);font-weight:700}
.g-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.g-faq{margin-top:24px}
.g-qa{border-top:1px solid var(--hair);padding:18px 0}
.g-qa h3{margin:0 0 8px!important;font-family:var(--font-body);font-weight:700;font-size:1.12rem}
.g-qa p{color:var(--muted)}
.g-rel{margin-top:48px}
.g-rel h2{margin-top:0!important}
.g-rel ul{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:10px}
.g-rel li{margin:0!important}
.g-rel a{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--panel);text-decoration:none;font-weight:600}
.g-note{border-left:4px solid var(--world);padding:12px 16px;background:rgba(92,200,255,.08);border-radius:0 12px 12px 0;margin:22px 0}
/* hub index */
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:18px;margin-top:28px;padding:0;list-style:none}
.g-card{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);text-decoration:none;color:var(--ink)!important}
.g-card img{aspect-ratio:1200/630;object-fit:cover;width:100%}
.g-card div{padding:16px 18px 20px}
.g-card h3{font-size:1.35rem}
.g-card p{color:var(--muted);margin-top:8px!important}
.g-card:hover{border-color:var(--sun)}