/* Guides and comparisons: an article in the site's paper, ink and red. */
.legal.guide { max-width: 780px; }
.g-crumbs { font: 12.5px var(--mono); color: var(--ink-3); margin-bottom: 18px; }
.legal .g-crumbs a { color: var(--ink-3); text-decoration: none; }
.legal .g-crumbs a:hover { color: var(--ink); }
.guide h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.08; }
.guide .upd-at { margin-top: 14px; color: var(--ink-3); }
.g-body { margin-top: 28px; font-size: 17px; }
.g-body h2 { margin-top: 48px; font-size: 26px; scroll-margin-top: 100px; }
.g-body h3 { margin: 28px 0 6px; font: 600 18px var(--sans); color: var(--ink); scroll-margin-top: 100px; }
.g-body p, .g-body li { color: var(--ink-2); }
.g-body strong, .g-body b { color: var(--ink); }
.g-body ul, .g-body ol { padding-left: 22px; }
.g-body li::marker { color: var(--red); }
.g-body blockquote { margin: 24px 0; padding: 16px 20px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, .55); }
.g-body blockquote p { margin: 6px 0; color: var(--ink); }
.g-body code { font: 14px var(--mono); background: var(--paper-2); padding: .12em .4em; border-radius: 6px; overflow-wrap: anywhere; }
.g-body pre { margin: 18px 0; padding: 16px 18px; background: #141414; border-radius: 12px; overflow-x: auto; }
.g-body pre code { background: none; padding: 0; color: #F3EFE6; font-size: 13.5px; overflow-wrap: normal; }
.g-body kbd { font: 13px var(--mono); padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: #fff; }
.g-table { margin: 20px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.g-table table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.g-table th, .g-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.g-table th { font-weight: 600; color: var(--ink); background: rgba(20, 20, 20, .03); }
.g-table tr:last-child td { border-bottom: 0; }
.g-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.g-body a { text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
.g-body a:hover { text-decoration-color: var(--red); }
.g-cta { margin: 56px 0 0; padding: 26px 26px 22px; border-radius: 16px; background: #141414; color: #F3EFE6; }
.legal .g-cta p { color: rgba(243, 239, 230, .78); }
.legal .g-cta .g-cta-t { margin: 0 0 6px; font: 700 24px var(--display); letter-spacing: -.02em; color: #F3EFE6; }
.legal .g-cta .btn { color: #fff; text-decoration: none; }
.legal .g-cta-l { margin-left: 14px; color: #F3EFE6; }
.g-cta .inst { margin: 18px 0 0; text-align: left; }
.g-cta .inst-label { text-align: left; color: #8a857a; }
.g-cta .inst-row { border-color: rgba(243, 239, 230, .14); background: rgba(243, 239, 230, .06); }
.g-cta .inst-row code { color: #F3EFE6; background: none; padding: 0; }
.g-cta .inst-copy { background: #F3EFE6; color: #141414; }
.g-cta .inst-copy:hover { background: var(--red); color: #fff; }
.g-more { margin-top: 40px; }
.g-more-t { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-lead { font-size: 18px; margin-top: 16px !important; }
.g-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 12px; }
.legal .g-list a { display: block; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; background: rgba(255, 255, 255, .5); transition: border-color .15s, transform .15s; }
.legal .g-list a:hover { border-color: var(--red); transform: translateY(-1px); }
.g-list b { display: block; font: 700 19px var(--display); color: var(--ink); letter-spacing: -.01em; }
.g-list span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }