/* Guides: long reads on the site's black, built on the legal page column (legal.css) */
.gd { gap: 56px; }
.gd__head { display: grid; gap: 18px; }
.gd__head h1 { margin: 0; font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.gd__lede { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.2rem) !important; color: #c9c9ce !important; line-height: 1.6; max-width: 62ch; }
.gd__meta { margin: 0; color: var(--dim) !important; font-size: 13px !important; }
.gd__figure { margin: 0; border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); background: #0b0b0c; }
.gd__figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.gd__figure figcaption { padding: 12px 18px; font-size: 13px; color: var(--dim); }
.gd section { display: grid; gap: 14px; }
.gd ol { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.gd ol li { color: #b9b9bf; font-size: 15px; line-height: 1.65; }
.gd__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.gd__table th, .gd__table td { text-align: left; vertical-align: top; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--hair); }
.gd__table th { width: 38%; color: var(--dim); font-weight: 500; font-size: 13px; }
.gd__table td { color: var(--text); }
.gd__cta {
  display: grid; gap: 14px; padding: 28px; border-radius: 26px;
  background: linear-gradient(160deg, #141416, #0a0a0b); box-shadow: inset 0 0 0 1px var(--hair-2);
}
.gd__cta h2 { margin: 0 !important; }
.gd__cta p { margin: 0; }
.gd__cta .btn { justify-self: start; }
.gd__faq { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.gd__faq details { border-bottom: 1px solid var(--hair); padding: 16px 0; }
.gd__faq summary { cursor: pointer; font-weight: 600; font-size: 15px; color: var(--text); list-style: none; }
.gd__faq summary::-webkit-details-marker { display: none; }
.gd__faq details p { margin-top: 10px; }
.gd__more { display: flex; flex-wrap: wrap; gap: 10px; }
.gd__more a { padding: 10px 16px; border-radius: 999px; font-size: 14px; color: var(--text) !important; text-decoration: none; box-shadow: inset 0 0 0 1px var(--hair-2); }
.lg__bar .btn { height: 40px; padding: 0 18px; font-size: 14px; }
.lg .btn--light { color: #000; text-decoration: none; }
.lg__bar .btn { padding: 0 8px 0 18px; }
.lg__bar .btn .btn__icon { width: 28px; height: 28px; }
