/* Product guide only. Shared admin, claim, and storefront styles are not changed. */
.guide-page {
  --guide-border: var(--line);
  --guide-muted: var(--muted);
  max-width: 1180px;
  padding-right: 42px;
  padding-left: 42px;
}
.guide-page .site-header { height: auto; min-height: 100px; gap: 25px; padding: 23px 0; border-color: var(--line-soft); }
.guide-page .site-nav { flex-wrap: wrap; justify-content: flex-end; gap: 11px 23px; font-size: 12px; }
.guide-page .site-nav a { white-space: nowrap; }
.guide-page .site-footer { border-top: 1px solid var(--guide-border); padding: 26px 0 30px; font-size: 10px; }
.guide-page .guide-content { padding: 52px 0 55px; }
.guide-page .guide-heading { max-width: 740px; margin-bottom: 43px; }
.guide-page .guide-heading .eyebrow { font-size: 10px; letter-spacing: 2.2px; }
.guide-page .guide-heading h1 { margin: 16px 0 18px; font-size: 39px; font-weight: 500; line-height: 1.4; letter-spacing: -1.2px; }
.guide-page .guide-heading > p { max-width: 620px; font-size: 13px; line-height: 1.9; color: var(--guide-muted); }
.guide-page .guide-heading-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.guide-page .guide-heading-actions .btn { min-height: 43px; font-size: 12px; }
.guide-page .guide-heading-actions .btn span { font-size: 9px; opacity: .65; }
.guide-page .guide-layout { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 50px; align-items: start; }
.guide-page .guide-toc { position: sticky; top: 28px; padding: 20px 0; border-top: 1px solid var(--guide-border); }
.guide-page .guide-toc > span { display: block; margin-bottom: 16px; color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.guide-page .guide-toc ol { display: grid; gap: 2px; padding: 0; margin: 0; list-style: none; counter-reset: guide-toc; }
.guide-page .guide-toc li { counter-increment: guide-toc; }
.guide-page .guide-toc li a { display: flex; align-items: baseline; gap: 13px; padding: 9px 0; color: var(--muted); font-size: 12px; }
.guide-page .guide-toc li a::before { content: counter(guide-toc, decimal-leading-zero); color: var(--dim); font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.guide-page .guide-toc li a:hover { color: var(--gold); }
.guide-page .guide-toc-back { display: inline-flex; gap: 17px; align-items: center; margin-top: 21px; padding-top: 20px; border-top: 1px solid var(--guide-border); color: var(--muted); font-size: 11px; }
.guide-page .guide-articles { min-width: 0; }
.guide-page .guide-section { scroll-margin-top: 28px; padding: 0 0 36px; margin-bottom: 32px; border-bottom: 1px solid var(--guide-border); }
.guide-page .guide-section-label { margin-bottom: 10px; color: var(--dim); font-size: 9px; letter-spacing: 1.7px; }
.guide-page .guide-section h2 { margin-bottom: 17px; font-size: 24px; font-weight: 500; line-height: 1.5; letter-spacing: -.5px; }
.guide-page .guide-section h3 { margin-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 500; }
.guide-page .guide-section p { color: var(--muted); font-size: 12px; line-height: 1.95; }
.guide-page .guide-section p + p { margin-top: 12px; }
.guide-page .guide-section p strong { color: var(--text); font-weight: 500; }
.guide-page .guide-section p a { color: var(--gold); text-decoration: underline; text-decoration-color: #d8b66c55; text-underline-offset: 3px; }
.guide-page .guide-section p a:hover { color: var(--gold-strong); }
.guide-page .guide-section p.guide-note { margin-top: 17px; color: var(--dim); font-size: 10px; }
.guide-page .guide-table-wrap { max-width: 100%; overflow-x: auto; margin-top: 22px; border: 1px solid var(--guide-border); border-radius: 10px; background: var(--surface); }
.guide-page .guide-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.guide-page .guide-table th,
.guide-page .guide-table td { padding: 14px 19px; vertical-align: top; line-height: 1.7; }
.guide-page .guide-table thead th { color: var(--dim); font-size: 10px; font-weight: 400; background: #0b0b0c80; }
.guide-page .guide-table tbody th { color: var(--text); font-weight: 500; }
.guide-page .guide-table td { color: var(--muted); }
.guide-page .guide-table tbody tr { border-top: 1px solid var(--line-soft); }
.guide-page .guide-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.guide-page .guide-channel-grid > article { min-width: 0; }
.guide-page .guide-channel-grid > article + article { padding-left: 22px; border-left: 1px solid var(--guide-border); }
.guide-page .guide-callout { margin-top: 22px; padding: 18px 20px; border-left: 2px solid var(--gold); background: #d8b66c09; border-radius: 0 7px 7px 0; }
.guide-page .guide-callout > strong { display: block; margin-bottom: 5px; color: var(--gold); font-size: 12px; font-weight: 500; }
.guide-page .guide-callout p { font-size: 11px; color: var(--muted); }
.guide-page .guide-steps { display: grid; gap: 23px; list-style: none; padding: 0; margin: 23px 0 0; counter-reset: guide-step; }
.guide-page .guide-steps > li { counter-increment: guide-step; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 13px; align-items: start; }
.guide-page .guide-steps > li::before { content: counter(guide-step, decimal-leading-zero); display: grid; place-items: center; height: 28px; border: 1px solid #d8b66c33; border-radius: 50%; color: var(--gold); font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.guide-page .guide-steps h3 { margin-top: 1px; margin-bottom: 6px; }
.guide-page .guide-definitions { margin: 22px 0 0; }
.guide-page .guide-definitions > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line-soft); }
.guide-page .guide-definitions > div:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-page .guide-definitions dt { color: var(--text); font-size: 11px; line-height: 1.9; }
.guide-page .guide-definitions dd { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.guide-page .guide-faq details { border-top: 1px solid var(--line-soft); padding: 17px 0; }
.guide-page .guide-faq details:last-child { padding-bottom: 0; }
.guide-page .guide-faq summary { cursor: pointer; color: var(--text); font-size: 12px; line-height: 1.8; padding-right: 12px; }
.guide-page .guide-faq summary::marker { color: var(--dim); font-size: 10px; }
.guide-page .guide-faq summary:hover { color: var(--gold); }
.guide-page .guide-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 2px; }
.guide-page .guide-faq details p { margin-top: 13px; padding-left: 15px; font-size: 11px; }
.guide-page .guide-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; }
.guide-page .guide-bottom p { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.guide-page .guide-bottom .text-link { font-size: 12px; }
.guide-page .guide-back-top { margin-left: auto; color: var(--dim); font-size: 11px; }
.guide-page .guide-back-top:hover { color: var(--gold); }
@media (max-width: 1000px) {
  .guide-page { padding-right: 30px; padding-left: 30px; }
  .guide-page .guide-layout { grid-template-columns: 172px minmax(0, 1fr); gap: 30px; }
  .guide-page .site-nav { gap: 10px 16px; font-size: 11px; }
  .guide-page .guide-definitions > div { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 760px) {
  .guide-page .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 31px; }
  .guide-page .guide-heading { margin-bottom: 31px; }
  .guide-page .guide-toc { position: static; padding: 18px 0; border-bottom: 1px solid var(--guide-border); }
  .guide-page .guide-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
  .guide-page .guide-toc li a { padding: 7px 0; }
  .guide-page .guide-toc-back { display: none; }
}
@media (max-width: 600px) {
  .guide-page { padding-right: 22px; padding-left: 22px; }
  .guide-page .site-header { align-items: flex-start; flex-direction: column; gap: 19px; min-height: 0; padding: 23px 0 19px; }
  .guide-page .site-nav { width: 100%; justify-content: flex-start; column-gap: 19px; row-gap: 10px; font-size: 11px; }
  .guide-page .site-nav .desktop-link { display: inline-flex; }
  .guide-page .site-nav .nav-outline { padding: 5px 9px; font-size: 10px; }
  .guide-page .site-footer { gap: 14px; padding: 24px 0 29px; }
  .guide-page .footer-links { flex-wrap: wrap; gap: 12px 19px; }
  .guide-page .guide-content { padding: 34px 0 40px; }
  .guide-page .guide-heading .eyebrow { font-size: 8px; letter-spacing: 1.7px; }
  .guide-page .guide-heading h1 { margin: 14px 0 15px; font-size: 31px; letter-spacing: -.8px; }
  .guide-page .guide-heading > p { font-size: 12px; }
  .guide-page .guide-heading-actions { margin-top: 22px; }
  .guide-page .guide-heading-actions .btn { padding: 11px 14px; font-size: 11px; }
  .guide-page .guide-heading-actions .btn span { font-size: 8px; }
  .guide-page .guide-toc > span { margin-bottom: 10px; font-size: 10px; }
  .guide-page .guide-toc li a { gap: 10px; font-size: 11px; }
  .guide-page .guide-section { padding-bottom: 27px; margin-bottom: 26px; }
  .guide-page .guide-section-label { margin-bottom: 7px; font-size: 8px; }
  .guide-page .guide-section h2 { font-size: 22px; margin-bottom: 14px; }
  .guide-page .guide-section h3 { font-size: 13px; }
  .guide-page .guide-section p { font-size: 11px; }
  .guide-page .guide-table th,
  .guide-page .guide-table td { padding: 12px 11px; font-size: 10px; }
  .guide-page .guide-table thead th { font-size: 9px; }
  .guide-page .guide-channel-grid { grid-template-columns: minmax(0, 1fr); gap: 19px; }
  .guide-page .guide-channel-grid > article + article { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--guide-border); }
  .guide-page .guide-callout { padding: 15px 16px; margin-top: 18px; }
  .guide-page .guide-callout > strong { font-size: 11px; }
  .guide-page .guide-callout p { font-size: 10px; }
  .guide-page .guide-steps { gap: 20px; margin-top: 19px; }
  .guide-page .guide-steps > li { grid-template-columns: 26px minmax(0, 1fr); gap: 11px; }
  .guide-page .guide-steps > li::before { height: 26px; font-size: 9px; }
  .guide-page .guide-definitions > div { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 15px 0; }
  .guide-page .guide-definitions dd { font-size: 10px; }
  .guide-page .guide-faq summary { font-size: 11px; }
  .guide-page .guide-faq details p { font-size: 10px; }
  .guide-page .guide-bottom p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-page *, .guide-page *::before, .guide-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Player recommendations and same-origin connection diagrams. */
.guide-page .guide-player-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.guide-page .guide-player-card{min-width:0;padding:23px;border:1px solid var(--guide-border);border-radius:12px;background:var(--surface)}
.guide-page .guide-player-label{color:var(--gold);font-size:10px;letter-spacing:.4px}
.guide-page .guide-player-card h3{font-size:24px;margin:10px 0 6px;color:var(--text)}
.guide-page .guide-player-card p.guide-player-devices{font-size:11px;color:var(--dim)}
.guide-page .guide-player-card dl{margin:18px 0;font-size:12px;line-height:1.9}
.guide-page .guide-player-card dt{color:var(--gold);margin-top:12px}
.guide-page .guide-player-card dd{margin:4px 0 0;color:var(--muted)}
.guide-page .guide-player-card details{padding:12px 0;border-top:1px solid var(--guide-border);font-size:12px;line-height:1.9}
.guide-page .guide-player-card summary{cursor:pointer;color:var(--text)}
.guide-page .guide-player-card ol{padding-left:20px;margin:12px 0 0;color:var(--muted)}
.guide-page .guide-player-card li+li{margin-top:8px}
.guide-page .guide-source-link{color:var(--gold);font-size:11px;display:inline-block;padding-top:12px}
.guide-page h3.guide-subheading{font-size:18px;margin-top:32px}
.guide-page .guide-diagrams{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:26px 0}
.guide-page .guide-diagrams figure{margin:0;min-width:0}
.guide-page .guide-diagrams img{display:block;width:100%;height:auto;border:1px solid var(--guide-border);border-radius:12px;background:var(--surface)}
.guide-page .guide-diagrams figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:11px;color:var(--muted)}
.guide-page .guide-diagrams figcaption a{color:var(--gold)}
.guide-page .guide-ports{min-width:590px}
.guide-page .guide-ports caption{text-align:left;padding:14px 19px;color:var(--muted);font-size:11px}
.guide-page .guide-section code{overflow-wrap:anywhere;font-size:.95em;color:var(--gold);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.guide-page .guide-player-card summary:focus-visible,.guide-page .guide-diagrams a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media(max-width:600px){.guide-page .guide-player-grid{grid-template-columns:minmax(0,1fr)}.guide-page .guide-player-card{padding:20px}.guide-page .guide-player-card h3{font-size:23px}.guide-page .guide-toc ol{column-gap:12px}.guide-page .guide-toc li a{overflow-wrap:anywhere}}

.guide-page .guide-client-flow{display:block;margin-top:16px}
.guide-page .guide-client-flow img{display:block;width:100%;height:auto;border-radius:9px;border:1px solid var(--guide-border)}

@media(max-width:600px){
.guide-page .guide-ports{min-width:0}
.guide-page .guide-ports thead{display:none}
.guide-page .guide-ports tbody,.guide-page .guide-ports tr{display:block}
.guide-page .guide-ports tbody tr{padding:14px 16px}
.guide-page .guide-ports tbody th{display:block;padding:0 0 9px;font-size:11px}
.guide-page .guide-ports td{display:flex;gap:12px;justify-content:space-between;padding:4px 0;font-size:11px}
.guide-page .guide-ports td::before{content:attr(data-label);color:var(--dim);flex-shrink:0}
.guide-page .guide-ports td:last-child{color:var(--gold)}
}

.guide-page .guide-purchase-notice{margin:0 0 22px;padding:22px;border:1px solid var(--gold);border-left-width:4px;background:#d8b66c12}
.guide-page .guide-purchase-notice>strong{font-size:18px;font-weight:750}
.guide-page .guide-purchase-notice p strong{font-weight:700;color:var(--text)}