.connection-page { background: #171c1d; --guide-line: #ffffff21; --guide-muted: #b1bcb6; }
.connection-page .site-header { min-height: 96px; border-bottom: 1px solid var(--guide-line); }
.connection-page .brand img { width: 196px; }
.connection-guide { width: min(100%, 1120px); padding: 48px var(--gutter) 60px; margin-inline: auto; }
.connection-guide :is(section, header, #value) { scroll-margin-top: 30px; }
.guide-breadcrumb { padding: 5px 0; font-size: 12px; color: #aeb9b3; }
.guide-breadcrumb span { margin-left: 14px; color: #718079; }
.guide-breadcrumb:hover { color: var(--orange); }
.guide-heading h1 { margin-top: 21px; font-size: 38px; font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.guide-intro { max-width: 750px; margin-top: 17px; color: var(--guide-muted); font-size: 15px; line-height: 1.95; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 25px; font-size: 12px; color: #c1c9c2; }
.guide-toc a { padding-block: 7px; }
.guide-toc a:hover, .guide-related :is(a,button):hover { color: var(--orange); }
.guide-heading { padding-bottom: 31px; }
.guide-section { display: grid; grid-template-columns: 175px minmax(0, 1fr); gap: 35px; padding-block: 33px; border-top: 1px solid var(--guide-line); }
.guide-section > h2 { font-size: 19px; font-weight: 500; line-height: 1.7; }
.guide-facts { margin: 0; }
.guide-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.guide-facts > div + div { margin-top: 20px; }
.guide-facts dt { color: #e1e5de; font-size: 13px; line-height: 1.95; }
.guide-facts dd { margin: 0; color: var(--guide-muted); font-size: 14px; line-height: 1.95; }
.guide-steps { padding: 0 0 0 24px; margin: 0; }
.guide-steps li { padding-left: 10px; }
.guide-steps li + li { margin-top: 24px; }
.guide-steps li::marker { font: 12px ui-monospace, monospace; color: #cbb9a7; }
.guide-section h3 { font-size: 15px; font-weight: 500; line-height: 1.8; }
.guide-section p { color: var(--guide-muted); font-size: 14px; line-height: 1.95; margin-top: 7px; }
.guide-notes #value { margin-top: 24px; }
.guide-notes a { color: #e2bf9f; text-decoration: underline; text-decoration-color: #e2bf9f66; text-underline-offset: 4px; }
.guide-notes a:hover { color: var(--orange); }
.guide-notes .guide-contact { margin-top: 25px; }
.guide-related { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 26px; border-top: 1px solid var(--guide-line); color: #c1c9c2; font-size: 12px; }
.guide-related button { padding: 0; font-size: inherit; }
.guide-related a span { margin-left: 12px; }
@media (max-width: 900px) {
  .guide-section { grid-template-columns: 140px minmax(0, 1fr); gap: 28px; }
  .guide-facts > div { grid-template-columns: 78px minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 680px) {
  .connection-page .site-header { min-height: 84px; }
  .connection-page .brand img { width: 174px; }
  .connection-guide { padding-block: 29px 45px; }
  .guide-heading h1 { font-size: 29px; margin-top: 15px; }
  .guide-intro { font-size: 14px; margin-top: 14px; }
  .guide-toc { gap: 12px 24px; margin-top: 17px; }
  .guide-heading { padding-bottom: 24px; }
  .guide-section { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 26px; }
  .guide-section > h2 { font-size: 18px; }
  .guide-facts > div { grid-template-columns: 70px minmax(0, 1fr); gap: 15px; }
  .guide-facts dd, .guide-section p { font-size: 13px; }
  .guide-steps { padding-left: 20px; }
  .guide-steps li { padding-left: 7px; }
  .guide-steps li + li { margin-top: 21px; }
  .guide-section h3 { font-size: 14px; }
}