.guide { padding-top: var(--gap); }
.part { max-width: 920px; margin-bottom: var(--gap); }
.part:nth-child(even) { margin-left: auto; }
.part-h { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.part > p { max-width: 72ch; }
.part .go { max-width: 72ch; }
.home-guide .part { max-width: 100%; }
.home-guide .part > p { max-width: 72ch; }
.home-guide .part:nth-child(even) { margin-left: 12%; }
.pair { display: grid; grid-template-columns: 1fr 1.18fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.opt { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 2rem; position: relative; }
.opt::before { content: ""; position: absolute; left: -1px; top: 24px; width: 4px; height: 24px; background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
.opt h3 { color: var(--txt); }
.opt .go { width: 100%; justify-content: space-between; }
.feature { display: grid; grid-template-columns: 1.15fr .8fr; gap: 3rem; align-items: center; }
.path-art { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2rem; border: 1px solid var(--grid); border-radius: 8px; }
.path-art span { border: 1px solid var(--line); border-radius: 8px; min-width: 12rem; text-align: center; padding: .75rem; color: var(--cyan); }
.path-art span:nth-of-type(2) { border-color: var(--blue); margin-left: 2rem; }
.path-art i { display: block; height: 32px; width: 1px; background: var(--line); }
.ask { border-left: 1px solid var(--cyan); border-radius: 0 8px 8px 0; background: rgba(0,128,255,.07); padding: 1.25rem 1.5rem; margin-top: 2rem; max-width: 72ch; }
.ask .tag { color: var(--cyan); margin-bottom: .5rem; }
.ask p:last-child { color: var(--txt); margin: 0; }
.ls { max-width: 68ch; padding-left: 1.2rem; margin-bottom: 1.5rem; }
.ls li { padding: .6rem 0 .6rem .5rem; }
.ls li::marker { color: var(--cyan); }
.alert { padding: 2rem; border: 1px solid var(--grid); border-left: 2px solid var(--red); border-radius: 8px; background: rgba(255,0,0,.025); }
.alert .tick { color: var(--red); }
.alert .part-h { margin-bottom: 1.25rem; }
.cmp { max-width: 100%; margin-bottom: 2rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 1rem; }
caption { padding: 1rem 1.5rem; text-align: left; color: var(--muted); background: rgba(0,255,255,.035); border-bottom: 1px solid var(--grid); }
th, td { text-align: left; vertical-align: top; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--grid); overflow-wrap: anywhere; }
thead th { color: var(--cyan); font-weight: 500; }
th:first-child { width: 33%; }
tbody th { font-weight: 500; color: var(--txt); }
tbody td { color: var(--txt); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) {
  .home-guide .part:nth-child(even) { margin-left: 0; }
  .opt { padding: 1.5rem; }
  .feature { gap: 1.5rem; }
}
@media (max-width: 640px) {
  .pair, .feature { grid-template-columns: 1fr; }
  .part { max-width: 100%; }
  .part-h { gap: .65rem; }
  .opt, .alert { padding: 1.5rem; }
  .ask { padding: 1rem 1.25rem; }
  thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  tbody, tr, th, td { display: block; width: 100%; }
  tbody tr { border-bottom: 1px solid var(--grid); padding: 1rem 1.25rem; }
  tbody tr:last-child { border: 0; }
  tbody th:first-child { width: 100%; }
  th, td { padding: 0; border: 0; overflow-wrap: normal; }
  tbody th { color: var(--cyan); margin-bottom: .75rem; }
  td::before { content: attr(data-label); color: var(--muted); display: block; margin-bottom: .25rem; }
  caption { padding: 1rem 1.25rem; }
}