/* Guide index and article masthead share the website's type and color roles. */
.guides-heading, .guide-list { max-width:1120px; }
.guides-heading { padding-top:64px; padding-bottom:36px; }
.guides-heading h1 {
  margin:0; font-size:var(--site-type-section); line-height:var(--site-leading-heading);
  font-weight:600; letter-spacing:-.035em;
}
.guide-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding-bottom:96px; }
.guide-row { min-width:0; }
.guide-card {
  display:flex; flex-direction:column; height:100%; padding:28px 32px;
  border:1px solid var(--line); border-radius:16px; background:var(--paper);
  transition:border-color .18s ease, background .18s ease;
}
.guide-card:hover { border-color:var(--accent); background:var(--soft); }
.guide-card:focus-visible { border-radius:16px; }
.guide-topic { color:var(--accent-ink); font-size:var(--site-type-label); line-height:var(--site-leading-label); font-weight:500; }
.guide-card h2 { margin:16px 0 12px; font-size:24px; line-height:1.45; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }
.guide-card p { margin:0 0 28px; font-size:var(--site-type-body); color:var(--muted); line-height:var(--site-leading-body); text-wrap:balance; }
.guide-card-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; color:var(--subtle); font-size:var(--site-type-label); }
.guide-card-arrow { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:var(--accent-ink); }
.guide-card-arrow svg { width:18px; height:18px; }
.guide-card:is(:hover,:focus-visible) .guide-card-arrow { background:var(--accent-soft); }

/* One reading column. A heading stays below the site header only while its
   section is being read; section boundaries also work without JavaScript. */
.guide-article { --guide-sticky-top:64px; padding-top:48px; padding-bottom:70px; }
.guide-intro, .guide-layout { max-width:760px; margin-inline:auto; }
.guide-intro { margin-bottom:40px; }
.guide-back { display:inline-flex; align-items:center; gap:8px; margin-bottom:28px; min-height:32px; font-size:var(--site-type-label); color:var(--muted); line-height:var(--site-leading-label); }
.guide-back:hover { color:var(--accent-ink); }
.guide-back > span { display:flex; }
.guide-back svg { width:16px; height:16px; transform:rotate(180deg); }
.guide-heading { min-width:0; padding-bottom:32px; border-bottom:1px solid var(--line); }
.guide-heading h1 { font-size:clamp(30px,3.4vw,44px); line-height:1.3; letter-spacing:-.035em; margin:16px 0 20px; font-weight:600; text-wrap:balance; }
.guide-description { font-size:var(--site-type-lead); line-height:var(--site-leading-body); color:var(--muted); margin:0; }
.guide-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:24px 0 0; font-size:var(--site-type-label); line-height:var(--site-leading-label); color:var(--subtle); }
.guide-meta > span + span { border-left:1px solid var(--line); padding-left:16px; }
.guide-prose { min-width:0; font-size:17px; line-height:1.95; color:#222b40; overflow-wrap:anywhere; }
.guide-prose p { margin:0 0 22px; }
.guide-section { display:flow-root; padding-block:16px 8px; }
.guide-section > h2 { position:sticky; top:var(--guide-sticky-top); z-index:2; background:var(--paper); padding-block:12px; border-bottom:1px solid var(--line); font-size:25px; line-height:1.5; letter-spacing:-.02em; margin:0 0 18px; font-weight:600; }
.guide-prose a { color:var(--blue); text-underline-offset:4px; }
.guide-prose ul, .guide-prose ol { padding-left:25px; }
.guide-prose li { margin-bottom:12px; }
.guide-table { max-width:100%; margin:26px 0; }
.guide-table table { border-collapse:collapse; width:100%; font-size:15px; line-height:1.75; table-layout:fixed; }
.guide-table th, .guide-table td { text-align:left; padding:14px 16px; border-bottom:1px solid #e2e5ee; vertical-align:top; overflow-wrap:anywhere; }
.guide-table th { background:#f5f6fb; font-weight:600; }
.guide-table th:first-child, .guide-table td:first-child { width:29%; }
.guide-editorial { padding-top:24px; border-top:1px solid #e2e5ee; font-size:14px; color:#596174; }
.guide-related { max-width:760px; margin:65px auto 0; padding-top:26px; border-top:1px solid #e2e5ee; }
.guide-related h2 { font-size:21px; font-weight:600; }
.guide-related ul { list-style:none; padding:0; }
.guide-related li { margin:18px 0; }
.guide-related a { display:flex; justify-content:space-between; align-items:center; gap:20px; color:#222b40; text-decoration:none; line-height:1.6; }
.guide-related a:hover { color:var(--blue); }
.guide-related svg { width:22px; height:22px; flex-shrink:0; }
.guide-product { max-width:760px; margin:45px auto 0; background:#f5f6fb; padding:30px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-radius:12px; }
.guide-product h2 { font-size:21px; line-height:1.5; margin:0 0 10px; font-weight:600; }
.guide-product p { font-size:15px; line-height:1.7; color:#596174; margin:0; }
.guide-product .button { white-space:nowrap; }
body[data-page="guides"] .site-footer, body[data-page="guide"] .site-footer { border-top:1px solid #e2e5ee; }

@media (max-width:860px) {
  .guide-article { --guide-sticky-top:56px; }
}
@media (max-width:800px) {
  .guides-heading { padding-top:40px; padding-bottom:28px; }
  .guide-list { grid-template-columns:1fr; gap:16px; padding-bottom:60px; }
  .guide-card { padding:24px; }
  .guide-card h2 { font-size:22px; margin-top:12px; }
  .guide-card p { margin-bottom:20px; }
  .guide-article { padding-top:28px; }
  .guide-intro { margin-bottom:28px; }
  .guide-back { margin-bottom:24px; }
  .guide-heading { padding-bottom:24px; }
  .guide-heading h1 { font-size:30px; margin:12px 0 16px; }
  .guide-meta { margin-top:20px; }
  .guide-description { font-size:var(--site-type-body); }
  .guide-prose { font-size:16px; line-height:1.9; }
  .guide-section > h2 { font-size:23px; }
  .guide-table th, .guide-table td { padding:12px 10px; }
  .guide-table table { font-size:14px; }
  .guide-product { display:block; padding:24px; }
  .guide-product .button { margin-top:20px; }
  .guide-related { margin-top:42px; }
}
@media (max-width:365px) {
  .guide-card { padding:20px; }
}
@media print {
  .guide-section > h2 { position:static; break-after:avoid; }
}