.guides-index-hero,.guide-hero{background:radial-gradient(circle at 88% 18%, #2d6c8857, transparent 34rem), linear-gradient(145deg, var(--night-deep), var(--night));color:var(--white);position:relative;overflow:hidden}.guides-index-hero:before,.guide-hero:before{content:"";pointer-events:none;background-image:linear-gradient(#85c3dc09 1px,#0000 1px),linear-gradient(90deg,#85c3dc09 1px,#0000 1px);background-size:5rem 5rem;position:absolute;inset:0}.guides-index-hero-inner,.guide-hero-inner{z-index:2;padding-block:var(--space-section-standard);position:relative}.guides-index-hero-inner h1{max-width:18ch;font-size:var(--type-page-title)}.guides-index-hero-inner .lead,.guide-summary{color:#d9e2e5;max-width:60ch}.guides-index-grid{gap:var(--space-layout-tight);grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));margin:0;padding:0;list-style:none;display:grid}.guide-card{height:100%;padding:var(--space-card);border:1px solid var(--line);border-radius:var(--radius-feature);background:var(--surface-raised);box-shadow:var(--shadow-raised);flex-direction:column;gap:.65rem;display:flex}.guide-card-category{color:var(--blue);font-family:var(--font-accent);font-size:var(--type-label);font-weight:var(--weight-regular);letter-spacing:var(--tracking-accent-label);line-height:var(--leading-label);text-transform:uppercase;margin:0}.guide-card h3{font-size:var(--type-card-title);line-height:var(--leading-display-small);margin:0}.guide-card h3 a{color:var(--blue-dark);text-decoration:none}.guide-card h3 a:hover{text-decoration:underline}.guide-card-summary{color:var(--ink-soft);margin:0;line-height:1.5}.guide-card-meta{color:var(--ink-soft);font-family:var(--font-accent);font-size:var(--type-meta);font-synthesis:none;font-weight:var(--weight-regular);letter-spacing:var(--tracking-accent-meta);line-height:var(--leading-meta);align-items:center;gap:.6rem;margin:.15rem 0 .35rem;display:flex}.guide-card .text-link{margin-top:auto}.guide-draft-badge{color:var(--blue-dark);font-family:var(--font-accent);font-size:var(--type-compact-control);font-synthesis:none;font-weight:var(--weight-regular);line-height:var(--leading-meta);letter-spacing:var(--tracking-accent-meta);text-transform:uppercase;background:#174a621f;border-radius:999px;align-items:center;padding:.15rem .5rem;display:inline-flex}.guides-index-empty{color:var(--ink-soft);font-size:var(--type-lead)}.guide-breadcrumb{color:#aebfc6;font-family:var(--font-accent);font-size:var(--type-label);font-weight:var(--weight-regular);letter-spacing:var(--tracking-accent-label);line-height:var(--leading-label);text-transform:uppercase;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.guide-breadcrumb a{color:var(--blue-light);text-decoration:none}.guide-breadcrumb a:hover{text-decoration:underline}.guide-hero-inner h1{max-width:22ch;font-size:var(--type-guide-title)}.guide-meta{color:#c4d1d6;font-family:var(--font-accent);font-size:var(--type-meta);font-synthesis:none;font-weight:var(--weight-regular);letter-spacing:var(--tracking-accent-meta);line-height:var(--leading-meta);flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;margin-top:1.25rem;display:flex}.guide-body-inner{max-width:46rem}.guide-section{margin-bottom:var(--space-layout-medium)}.guide-section h2{color:var(--blue-dark);font-size:var(--type-heading-small);margin:0 0 .85rem}.guide-section p{color:var(--ink-soft);font-size:var(--type-body);line-height:var(--leading-body-relaxed);margin:0 0 1rem}.guide-section ul{color:var(--ink-soft);line-height:var(--leading-body-relaxed);margin:0 0 1rem;padding-left:1.2rem}.guide-section li{margin-bottom:.4rem}.guide-back{margin-top:1.5rem}.guide-related-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr));gap:clamp(1rem,2vw,1.5rem);margin:1.25rem 0 0;padding:0;list-style:none;display:grid}.guide-related-grid li{border:1px solid var(--line);border-radius:var(--radius-detail);background:var(--paper-bright);padding:1.25rem}.guide-related-grid h3{font-size:var(--type-card-title);line-height:var(--leading-display-small);margin:.3rem 0}.guide-related-grid h3 a{color:var(--blue-dark);text-decoration:none}.guide-related-grid h3 a:hover{text-decoration:underline}.guide-related-grid p{color:var(--ink-soft);font-size:var(--type-body-small);line-height:var(--leading-body);margin:0}
@media (max-width:640px){.guides-index-hero-inner h1,.guide-hero-inner h1{font-size:var(--type-guide-title-mobile)}.guide-meta{gap:.3rem .85rem}.guide-section p{line-height:1.7}}