/* Guide pages: AI app pages, the phone page, the OpenClaw comparison and the Chinese security page. */
.guide-page .nav { background: var(--bg); box-shadow: 0 1px 0 var(--line); }
body.guide-page::after { z-index: 40; }
.guide-page .nav nav > a[aria-current="page"] { color: var(--text); }
.guide-page .nav .btn-sm { white-space: nowrap; }
.lang-sw { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.nav nav > a.lang-sw { color: var(--text-2); }
.lang-sw:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) { .nav nav > a.lang-sw { display: inline-block; } }

.guide { max-width: 760px; margin: 0 auto; padding: 116px 22px 0; }
.guide :lang(zh), .guide:lang(zh) { line-break: strict; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; font: 12.5px var(--pixel); color: var(--faint); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }

.g-head h1 { text-wrap: balance; margin: 18px 0 0; font-size: clamp(34px, 5.6vw, 52px); font-weight: 600; line-height: 1.1; letter-spacing: -.025em; color: var(--text); }
.g-lede { margin: 18px 0 0; font-size: 19px; line-height: 1.6; color: var(--text-2); }
.g-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.g-cta .btn { min-height: 44px; padding: 10px 22px; }

.g-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 36px 0 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--line); }
.g-facts div { padding: 14px 16px; background: var(--card); }
.g-facts dt { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.g-facts dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text); }

.g-body { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--text-2); }
.g-body h2 { margin: 2.2em 0 .6em; font-size: 26px; font-weight: 600; line-height: 1.25; letter-spacing: -.015em; color: var(--text); }
.g-body h3 { margin: 1.4em 0 .4em; font-size: 18px; font-weight: 600; color: var(--text); }
.g-body p, .g-body ul, .g-body ol { margin: 0 0 1em; }
.g-body ul, .g-body ol { padding-left: 1.25em; }
.g-body li + li { margin-top: .4em; }
.g-body a { color: var(--text); border-bottom: 1px solid var(--line-2); }
.g-body a:hover { color: var(--accent); border-color: var(--accent); }
.g-body b, .g-body strong { font-weight: 600; color: var(--text); }
.g-body code { padding: 1px 6px; border-radius: 6px; background: var(--bg-alt); font: .88em var(--code); overflow-wrap: anywhere; }
.g-body .g-cmd { display: block; margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; }

.g-steps { list-style: none; counter-reset: s; padding: 0 !important; }
.g-steps > li { counter-increment: s; position: relative; padding: 2px 0 6px 42px; }
.g-steps > li + li { margin-top: 10px; }
.g-steps > li::before { content: counter(s); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-alt); font: 600 13px var(--sans); color: var(--text); }

.g-table { width: 100%; margin: 0 0 1.2em; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.g-table th, .g-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.g-table thead th { font: 11px var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.g-table tbody th { min-width: 5.5em; font-weight: 600; color: var(--text); }
.g-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

.g-note { margin: 0 0 1.2em; padding: 14px 16px; border-radius: 12px; background: var(--bg-alt); font-size: 15px; line-height: 1.6; }
.g-note b { color: var(--text); }

.g-faq { border-top: 1px solid var(--line); }
.g-faq details { border-bottom: 1px solid var(--line); }
.g-faq summary { cursor: pointer; padding: 14px 0; font-size: 16px; font-weight: 600; color: var(--text); list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after { content: "+"; float: right; color: var(--faint); }
.g-faq details[open] summary::after { content: "−"; }
.g-faq details p { margin: 0 0 16px; }

.g-sources { font-size: 14px; color: var(--muted); }
.g-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0 !important; list-style: none; }
.g-related li + li { margin-top: 0; }
.g-related a { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--line) !important; border-radius: 14px; background: var(--card); }
.g-related a:hover { border-color: var(--accent) !important; }
.g-related b { display: block; font-size: 15px; }
.g-related span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }

.g-end { margin-top: 56px; padding: 28px 24px; border-radius: 20px; background: var(--bg-alt); text-align: center; }
.g-end h2 { margin: 0; font-size: 24px; font-weight: 600; color: var(--text); }
.g-end p { margin: 8px 0 18px; color: var(--muted); }

@media (max-width: 640px) {
  .guide { padding-top: 100px; }
  .g-lede { font-size: 17.5px; }
  .g-facts, .g-related { grid-template-columns: 1fr; }
  .g-body { font-size: 16px; }
  .g-body h2 { font-size: 23px; }
  .g-table { font-size: 13.5px; }
  .g-table th, .g-table td { padding: 9px 8px; }
}
.g-body .doc-date { margin: 0 0 1.4em; font: 12.5px var(--pixel); color: var(--faint); }