body:has(.voip-guide) { background: #060d20; color: #eaf3ff; }
.voip-guide {
  --v-accent: #5eead4;
  --v-muted: #afc7e2;
  --v-line: #285367;
  width: min(1180px, calc(100% - 2rem));
  margin: auto;
  padding: 1.5rem 0 2.5rem;
  color: #eaf3ff;
  font: 1rem/1.65 'Segoe UI', sans-serif;
}
.voip-guide *, .voip-guide *::before, .voip-guide *::after { box-sizing: border-box; }
.voip-guide [hidden] { display: none !important; }
.voip-guide a { color: #8bd5ff; text-underline-offset: 4px; }
.voip-guide a:hover { color: #5eead4; }
.voip-guide :focus-visible { outline: 3px solid #5eead4; outline-offset: 3px; }
.voip-guide h1, .voip-guide h2, .voip-guide h3 { color: #eaf3ff; line-height: 1.3; font-weight: 700; }
.guide-hero { padding: 1.25rem 1.75rem 1.75rem; border: 1px solid #285367; border-radius: 12px; background: linear-gradient(90deg, rgba(6, 13, 32, 0.98), rgba(6, 13, 32, 0.55)), url('../assets/voipdfk-radio-dusk.webp') center 35% / cover; }
.guide-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.guide-back { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; }
.language-switch { display: inline-flex; padding: 0.2rem; border: 1px solid #36556b; border-radius: 8px; background: #09182a; }
.language-switch button { min-height: 44px; padding: 0.4rem 0.8rem; border: 0; border-radius: 5px; background: transparent; color: #c7ddf5; font: inherit; font-size: 0.85rem; cursor: pointer; }
.language-switch button[aria-pressed='true'] { background: #5eead4; color: #04111f; font-weight: 700; }
.voip-guide .eyebrow { margin: 0 0 0.5rem; color: #8fe9e5; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.guide-hero h1 { margin: 0; font-family: 'Trebuchet MS', 'Segoe UI', sans-serif; font-size: clamp(1.9rem, 3.5vw, 2.7rem); letter-spacing: -0.03em; }
.guide-hero .subtitle { max-width: 680px; margin: 0.7rem 0 0; color: #c7ddf5; font-size: 1rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.v-btn, .copy-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 0.85rem; border: 1px solid #5eead4; border-radius: 6px; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.voip-guide .v-btn { background: #5eead4; color: #04111f; }
.voip-guide .v-btn.alt { background: #0b1c30; color: #d2e8f6; border-color: #36556b; }
.copy-btn { flex-shrink: 0; background: #112b3c; color: #8fe9e5; border-color: #36556b; }
.copy-btn:hover { background: #193b4a; }
.copy-btn[data-copied='true'] { border-color: #5eead4; color: #5eead4; }
.guide-start { margin-top: 1.5rem; scroll-margin-top: 1rem; }
.guide-start h2 { margin: 0 0 0.75rem; font-size: 1.3rem; }
.guide-start__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.guide-start article { padding: 1rem; border: 1px solid #285367; border-radius: 9px; background: #0b1c30; }
.guide-start h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.guide-start p { margin: 0 0 0.5rem; color: #afc7e2; font-size: 0.9rem; }
.guide-start a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.85rem; text-decoration: underline; }
.guide-paths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1rem; }
.guide-paths a { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 52px; padding: 0.75rem; border: 1px solid #285367; border-radius: 7px; background: #0b1c30; color: #d2e8f6; font-size: 0.85rem; text-decoration: none; }
.guide-paths a:hover { border-color: #5eead4; }
.guide-paths span { color: #5eead4; }
.guide-search { margin-top: 1.5rem; }
.guide-search label { display: block; margin-bottom: 0.4rem; color: #c7ddf5; font-size: 0.85rem; font-weight: 600; }
.guide-search > div { display: flex; gap: 0.5rem; }
.guide-search input { flex: 1; min-width: 0; min-height: 48px; padding: 0.6rem 0.85rem; border: 1px solid #36556b; border-radius: 6px; background: #09182a; color: #eaf3ff; font: inherit; font-size: 16px; }
.guide-search input::placeholder { color: #91abc6; }
.guide-search button { min-height: 44px; padding: 0.5rem 0.8rem; border: 1px solid #36556b; border-radius: 6px; background: #112b3c; color: #c7ddf5; font: inherit; font-size: 0.85rem; cursor: pointer; }
.guide-search p { margin: 0.5rem 0 0; color: #afc7e2; font-size: 0.85rem; }
.guide-search p:empty { display: none; }
.guide-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); align-items: start; gap: 1.25rem; margin-top: 1.25rem; }
.guide-layout > * { min-width: 0; }
.toc { position: sticky; top: 1rem; padding: 0.7rem; border: 1px solid #285367; border-radius: 10px; background: #09182a; }
.toc > summary { padding: 0.5rem; min-height: 44px; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.toc ol { display: grid; gap: 0.25rem; padding: 0; margin: 0.4rem 0 0; list-style: none; }
.toc a { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 0.6rem; border-left: 2px solid transparent; color: #afc7e2; font-size: 0.85rem; line-height: 1.4; text-decoration: none; }
.toc a[aria-current='true'], .toc a:hover { border-color: #5eead4; background: #10283a; color: #8fe9e5; }
.card { scroll-margin-top: 1rem; margin-bottom: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid #285367; border-radius: 10px; background: #09182a; }
.card > h2 { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
.card > h3 { margin: 1rem 0 0.5rem; font-size: 1rem; }
.card p { color: #c3d5e8; }
.icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 7px; background: #123041; color: #8fe9e5; font-size: 1rem; }
.steps { display: grid; gap: 0.75rem; }
.step { position: relative; padding: 1rem 1rem 1rem 3.8rem; border: 1px solid #263e55; border-radius: 8px; background: #0c2034; }
.step::before { content: attr(data-step); position: absolute; left: 0.8rem; top: 0.9rem; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #36556b; border-radius: 50%; color: #8fe9e5; font-size: 0.85rem; font-weight: 700; }
.step h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.step p { margin: 0.5rem 0; }
.step ul, .checklist { padding-left: 1.2rem; margin: 0.5rem 0; color: #c3d5e8; }
.step li { margin: 0.35rem 0; }
.node-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.node, .service, .quick, .term { min-width: 0; padding: 0.9rem; border: 1px solid #263e55; border-radius: 8px; background: #0c2034; color: #afc7e2; font-size: 0.9rem; }
.node strong, .quick strong { display: block; color: #eaf3ff; }
.node a { display: inline-block; min-height: 44px; padding-top: 0.5rem; overflow-wrap: anywhere; }
.codebox { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.65rem; margin: 0.75rem 0; padding: 0.65rem 0.75rem; border: 1px solid #36556b; border-left: 3px solid #5eead4; border-radius: 6px; background: #060f1e; }
.codebox code, .code { color: #d6fff6; font: 700 1rem/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.callout { margin: 0.9rem 0; padding: 0.9rem 1rem; border: 1px solid #36556b; border-left: 3px solid #60a5fa; border-radius: 6px; background: #0c2034; }
.callout > strong { display: block; color: #a8d8fb; }
.callout p { margin: 0.3rem 0 0; font-size: 0.92rem; }
.callout.tip { border-left-color: #5eead4; }
.callout.tip > strong { color: #8fe9e5; }
.callout.warning { border-left-color: #e8be66; }
.callout.warning > strong { color: #f1d49a; }
.callout.error { border-left-color: #fb7185; }
.callout.error > strong { color: #fca5b2; }
.extensions { display: grid; gap: 0.5rem; margin-block: 0.9rem; }
.ext { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.75rem; border: 1px solid #263e55; border-radius: 7px; background: #0c2034; line-height: 1.4; }
.ext b { color: #8fe9e5; font: 700 1rem Consolas, monospace; }
.ext > span { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.tag { justify-self: start; padding: 0.2rem 0.5rem; border: 1px solid #36556b; border-radius: 5px; color: #9be6da; font-size: 0.7rem !important; }
.quick-grid, .glossary, .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.term dt { margin-bottom: 0.3rem; color: #eaf3ff; font-weight: 700; }
.term dd { margin: 0; }
.guide-glossary { margin-top: 1rem; }
.guide-glossary > summary { min-height: 44px; padding-block: 0.5rem; color: #8bd5ff; cursor: pointer; }
.guide-glossary dl { margin-block: 0.5rem; }
.service { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: start; }
.service h3 { margin: 0; font-size: 1rem; }
.service p { grid-column: 1 / -1; margin: 0; font-size: 0.9rem; }
.top { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; font-size: 0.85rem; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media(max-width:950px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .node-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:620px) {
  .voip-guide { width: calc(100% - 1rem); padding-top: 0.5rem; }
  .guide-hero { padding: 1rem; }
  .guide-hero__top { margin-bottom: 0.5rem; }
  .guide-hero h1 { font-size: 2rem; }
  .guide-start__grid, .toc ol, .service-grid, .quick-grid, .glossary { grid-template-columns: minmax(0, 1fr); }
  .guide-start article { padding: 0.85rem; }
  .guide-search > div { flex-wrap: wrap; }
  .guide-search input { flex-basis: 200px; }
  .guide-search button { flex-grow: 1; }
  .step { padding: 3.2rem 0.85rem 0.85rem; }
  .ext { grid-template-columns: 55px minmax(0, 1fr); gap: 0.4rem; }
  .ext .tag { grid-column: 2; }
  .service { grid-template-columns: minmax(0, 1fr); }
  .service p { grid-column: 1; }
  .codebox { align-items: stretch; }
  .codebox .copy-btn { min-width: 90px; }
}
@media(prefers-reduced-motion:no-preference) { html:has(.voip-guide) { scroll-behavior: smooth; } }
@media print {
  .site-header, .site-footer, .language-switch, .actions, .guide-search, .guide-paths, .toc, .copy-btn, .top, .guide-back { display: none !important; }
  body:has(.voip-guide) { color: #111; background: white; }
  .voip-guide { width: 100%; color: #111; padding: 0; }
  .voip-guide .guide-hero, .voip-guide .card, .voip-guide .step, .voip-guide .node, .voip-guide .service, .voip-guide .term, .voip-guide .quick, .voip-guide .callout, .voip-guide .codebox, .voip-guide .ext, .voip-guide .guide-start article { color: #111; background: white; border-color: #aaa; box-shadow: none; break-inside: avoid; }
  .voip-guide h1, .voip-guide h2, .voip-guide h3, .voip-guide p, .voip-guide strong, .voip-guide code, .voip-guide .code, .voip-guide dd, .voip-guide li, .voip-guide a { color: #111 !important; }
  .guide-layout { display: block; }
  .guide-start__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}