.guide-hero { color: var(--paper); background: radial-gradient(ellipse at 88% 42%, #33251f, transparent 58%), var(--dark); border-bottom: 3px solid #b66a39; }
.guide-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: clamp(23px, 5vw, 72px); padding-block: clamp(28px, 5.2vw, 78px); }
.guide-hero .eyebrow { display: flex; align-items: center; gap: 11px; color: var(--copper); }
.guide-hero .eyebrow::before { content: ''; width: 22px; height: 2px; background: currentColor; }
.guide-hero h1 { margin: 14px 0 15px; max-width: 19ch; font-size: clamp(35px, 4.7vw, 67px); line-height: 1.05; letter-spacing: -.067em; text-wrap: balance; }
.guide-hero-copy > p:not(.eyebrow) { max-width: 48ch; color: #ddd2c6; font-size: clamp(16px, 1.4vw, 19px); }
.guide-hero-copy > p + p { margin-top: 12px; }
.guide-hero-copy .eyebrow + h1 + p { margin-top: 0; }

.guide-visual { min-width: 0; border: 1px solid #b88a6a65; background: #151617; box-shadow: 0 20px 48px #0004; }
.guide-visual a { display: block; }
.guide-visual img { width: 100%; height: auto; }
.guide-visual--slots .screenshot { aspect-ratio: 2.7; overflow: hidden; }
.guide-visual--slots img { position: absolute; bottom: 0; left: 0; width: 150%; max-width: none; }
.guide-visual figcaption { padding: 11px 14px; border-top: 1px solid #e5bc9633; color: #e3d2c1; font-size: 13px; }

.guide-body { display: grid; grid-template-columns: minmax(170px, .29fr) minmax(0, 1fr); gap: clamp(24px, 5.3vw, 76px); align-items: start; }
.guide-toc { min-width: 0; position: sticky; top: 22px; padding: 16px 0 0; border-top: 2px solid #a96943; }
.guide-toc :is(h2,h3) { font-size: 17px; line-height: 1.3; letter-spacing: -.026em; }
.guide-toc :is(ol,ul) { list-style: none; margin: 8px 0 0; padding: 0; }
.guide-toc a { display: flex; align-items: center; min-height: 43px; padding: 5px 0; text-underline-offset: 4px; font-size: 14px; font-weight: 650; }
.guide-toc a:hover { color: #8a472a; }
.guide-article { min-width: 0; max-width: 75ch; }
.guide-article > :is(section,aside) + :is(section,aside) { margin-top: clamp(26px, 5vw, 55px); }
.guide-article > section { padding-top: 17px; border-top: 1px solid var(--rule); }
.guide-article h2 { margin: 0 0 12px; max-width: 26ch; font-size: clamp(26px, 3.35vw, 44px); }
.guide-article h3 { margin: 16px 0 6px; font-size: clamp(17px, 2vw, 23px); line-height: 1.25; letter-spacing: -.04em; }
.guide-article :is(p,li,dd) { color: #38312c; }
.guide-article p + p { margin-top: 10px; }
.guide-article :is(ul,ol) { padding-inline-start: 1.35em; }
.guide-article li + li { margin-top: 6px; }
.guide-article p a, .guide-article li a { color: #763a22; font-weight: 700; text-underline-offset: 4px; }
.guide-article dl { margin: 14px 0 0; }
.guide-article dt { margin-top: 10px; font-weight: 750; }
.guide-article dd { margin-inline-start: 0; }
.guide-article :is(.guide-compare,.guide-terms) > div { padding-block: 11px; border-top: 1px solid var(--rule); }
.guide-article :is(.guide-compare,.guide-terms) > div dt { margin-top: 0; }
.guide-article .guide-source { color: var(--muted); font-size: 14px; }

.guide-article table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 16px; }
.guide-article table caption { margin-bottom: 8px; color: var(--muted); font-size: 14px; text-align: left; }
.guide-article table :is(th,td) { padding: 10px 9px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.guide-article table thead th { background: var(--stone); }

.guide-article details { border-bottom: 1px solid var(--rule); }
.guide-article summary { padding: 12px 0; font-weight: 750; cursor: pointer; }
.guide-article summary::marker { color: #91532f; }
.guide-article details p { padding-bottom: 12px; }
.guide-article .guide-api-panel { padding: clamp(17px, 4.3vw, 39px); color: var(--paper); background: #231d19; border-top: 2px solid var(--copper); }
.guide-article .guide-api-panel .eyebrow { margin-bottom: 9px; color: var(--copper); }
.guide-article .guide-api-panel p { color: #e3d7cc; }
.guide-article .guide-api-panel p a:not(.button) { color: var(--copper); }
.guide-article .guide-api-panel .button { margin-top: 16px; color: #1d1510; }
.guide-sources { padding-top: 10px; font-size: 14px; }
.guide-sources h2 { font-size: 19px; }
.guide-sources li { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .guide-hero-grid { grid-template-columns: 1fr; }
  .guide-hero h1 { max-width: 20ch; }
  .guide-visual { max-width: 660px; }
}
@media (max-width: 590px) {
  .guide-body { grid-template-columns: 1fr; gap: 24px; }
  .guide-toc { position: static; }
  .guide-toc a { min-height: 44px; }
  .guide-article table :is(th,td) { padding: 8px 5px; font-size: 14px; }
}