/* One reading area, with a persistent local catalogue and a network-specific footer. */
.service-page {
  --service-surface: #181818;
  --service-field: #ffffff05;
  --service-ink: #eee;
  --service-muted: #aaa;
  --service-line: #ffffff24;
}
.service-page .service-main.service-workspace { --service-left-edge: calc(max(var(--site-header-gutter),calc((100% - 1720px)/2)) + 8px); display: grid; grid-template-columns: 258px minmax(0,1fr); align-items: start; gap: 28px; width: min(1480px,calc(100% - var(--service-left-edge) - var(--site-header-gutter))); margin-inline: var(--service-left-edge) auto; padding-block: 32px 72px; }
.service-sidebar { position: sticky; top: calc(var(--site-header-height) + 24px); min-width: 0; max-height: calc(100vh - var(--site-header-height) - 48px); max-height: calc(100dvh - var(--site-header-height) - 48px); overflow-y: auto; scrollbar-width: thin; }
.service-catalog-disclosure { border: 1px solid var(--service-line); border-radius: 20px; background: var(--service-surface); }
.service-catalog-disclosure>summary { display: none; }
.service-sidebar-body { padding: 22px 16px 16px; }
.service-page .service-sidebar-home { display: inline-block; margin: 0 6px 22px; font-size: 12px; color: var(--service-muted); }
.service-page .service-sidebar h2 { margin: 0 6px 18px; font: 600 24px/1.15 Arial,Helvetica,sans-serif; letter-spacing: -.035em; }
.service-page #service-filters { display: grid; gap: 14px; margin-bottom: 18px; }
.service-page #service-search { width: 100%; min-width: 0; min-height: 42px; padding: 11px 12px; border: 1px solid var(--service-line); border-radius: 9px; background: var(--service-field); color: var(--service-ink); font-size: 13px; }
.service-kind-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.service-page .service-kind-filters button { border: 1px solid var(--service-line); border-radius: 7px; padding: 7px 9px; background: transparent; color: var(--service-muted); font-size: 11px; line-height: 1.2; }
.service-page .service-kind-filters button[aria-pressed=true] { color: var(--service-ink); border-color: #888; background: #88888812; }
.service-page #service-navigation { display: grid; gap: 7px; }
.service-page .service-nav-item { --nav-rgb: 12,201,130; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 11px; min-height: 54px; padding: 12px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--service-muted); font-size: 13px; line-height: 1.4; }
.service-page .service-nav-item[data-kind=exchange] { --nav-rgb: 235,66,76; }
.service-page .service-nav-item[data-kind=setup] { --nav-rgb: 240,240,240; }
.service-page .service-nav-item[aria-current=page] { color: var(--service-ink); border-color: rgba(var(--nav-rgb),.45); background: rgba(var(--nav-rgb),.05); }
.service-page .service-nav-item:hover { color: var(--service-ink); border-color: var(--service-line); }
.service-nav-icon { width: 24px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); opacity: .75; }
.service-page .service-list-count { padding: 16px 6px 2px; color: var(--service-muted); font-size: 11px; }
.service-list-empty { padding: 18px 8px; color: var(--service-muted); font-size: 13px; }
.service-page .service-list-empty button { margin-top: 15px; padding: 8px 10px; border: 1px solid var(--service-line); border-radius: 8px; background: transparent; color: var(--service-ink); font-size: 12px; }
.service-content { min-width: 0; }
.service-network-toolbar { position: sticky; top: calc(var(--site-header-height) + 12px); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--service-line); border-radius: 16px; background: var(--service-surface); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.service-page .service-network-toolbar label { display: grid; flex: 1; min-width: 0; max-width: 420px; gap: 8px; color: var(--service-ink); font-size: 15px; font-weight: 700; }
.service-page #service-network { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(var(--service-rgb),.5); border-radius: 9px; background: var(--service-field); color: var(--service-ink); font-size: 14px; font-weight: 500; }
.service-page #service-network:hover { border-color: var(--service-accent); }
.service-network-brand { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--service-muted); font-size: 12px; }
.service-network-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 80px; width: 80px; height: 34px; padding: 5px 7px; border: 1px solid #17211d10; border-radius: 7px; background: #f4f4f2; }
.service-network-logo img { width: 100%; height: 100%; object-fit: contain; }
.service-network-logo[data-partner="ассоль"] { background: #292929; border-color: #ffffff20; }
.service-page .service-workspace .service-panel { padding: 32px 38px; text-align: left; }
.service-page .service-network-scope { margin: 0 0 20px; color: var(--service-muted); font-size: 12px; }
.service-page .service-workspace .service-heading { padding-right: 0; }
.service-page .service-workspace .service-heading h1 { min-width: 0; overflow-wrap: anywhere; font-size: clamp(34px,3.2vw,52px); }
.service-page .service-workspace .service-heading img { width: 86px; height: 110px; }
.service-page .service-workspace .service-copy { width: 100%; max-width: none; text-align: left; font-size: 16px; }
.service-page .service-workspace .service-copy>p:first-child { font-size: 19px; }
.service-page .service-copy-notice { margin: 0 0 26px; padding: 14px 16px; border-left: 2px solid var(--service-accent); border-radius: 0 8px 8px 0; background: var(--service-field); color: var(--service-muted); font-size: 13px; line-height: 1.6; }
.service-device-label { white-space: nowrap; }
.service-device-label svg { width: 1em; height: 1em; margin-inline-end: .3em; vertical-align: -.12em; fill: none; stroke: var(--service-accent); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.service-unavailable { display: grid; justify-items: start; gap: 12px; }
.service-unavailable h1 { color: var(--service-ink); font-size: clamp(24px,3vw,40px); line-height: 1.12; }
.service-unavailable p { color: var(--service-muted); }
.service-unavailable-mascot { width: 76px; height: 54px; object-fit: contain; }
.service-alternatives { margin-top: 28px; }
.service-alternatives h2 { margin-bottom: 12px; font-size: 20px; }
.service-alternatives-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 5px 5px 12px; margin-inline: -5px; }
.service-alternative { flex: 0 0 min(220px,85%); display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px; scroll-snap-align: start; border: 1px solid var(--service-line); border-radius: 10px; background: var(--service-field); color: var(--service-ink); font-size: 14px; }
.service-alternative:hover { border-color: var(--service-accent); }
.service-page :is(.service-faq,.service-documents) { margin-top: 38px; padding-top: 28px; border-top: 1px solid var(--service-line); }
.service-page :is(.service-faq h2,.service-documents h2) { margin: 0 0 18px; color: var(--service-ink); font: 600 24px/1.2 Arial,Helvetica,sans-serif; letter-spacing: -.035em; }
.service-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; }
.service-section-heading>span { color: var(--service-muted); font-size: 12px; }
.service-section-empty { padding: 18px 20px; border: 1px dashed var(--service-line); border-radius: 12px; background: var(--service-field); }
.service-section-empty p { color: var(--service-muted); font-size: 14px; line-height: 1.6; }
.service-section-empty a { display: inline-flex; margin-top: 12px; color: var(--service-accent); font-size: 13px; font-weight: 500; }
.service-faq-list { display: grid; gap: 8px; }
.service-faq-list>details { border: 1px solid var(--service-line); border-radius: 12px; background: var(--service-field); }
.service-page .service-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 18px; color: var(--service-ink); font-size: 14px; font-weight: 500; line-height: 1.4; list-style: none; cursor: pointer; }
.service-page .service-faq-list summary::-webkit-details-marker { display: none; }
.service-page .service-faq-list summary>span { font-size: 20px; font-weight: 400; color: var(--service-muted); }
.service-page .service-faq-list details[open]>summary>span { transform: rotate(45deg); }
.service-faq-answer { padding: 0 18px 18px; color: var(--service-muted); font-size: 14px; line-height: 1.7; }
.service-page :is(.service-sidebar,.service-network-toolbar,.service-faq,.service-documents) :is(a,button,input,select,summary):focus-visible { outline: 2px solid var(--service-accent); outline-offset: 3px; }
html[data-theme=light] .service-page { --service-surface: #fff; --service-field: #f6f7f5; --service-ink: #17211d; --service-muted: #59645e; --service-line: #17211d24; }
html[data-theme=light] .service-page .service-nav-item { --nav-rgb: 8,124,81; }
html[data-theme=light] .service-page .service-nav-item[data-kind=exchange] { --nav-rgb: 191,48,56; }
html[data-theme=light] .service-page .service-nav-item[data-kind=setup] { --nav-rgb: 82,96,90; }
html[data-theme=light] .service-page .service-nav-icon { filter: brightness(0); }
html[data-theme=light] .service-page .service-network-logo[data-partner="ассоль"] { background: #f4f4f2; border-color: #17211d10; }
html[data-theme=light] .service-page .service-network-logo[data-partner="ассоль"] img { filter: brightness(0); }
@media(max-width:1200px) {
  .service-page .service-main.service-workspace { grid-template-columns: 226px minmax(0,1fr); gap: 22px; }
  .service-page .service-workspace .service-panel { padding: 28px; }
  .service-network-brand>span:last-child { display: none; }
  .service-network-toolbar { padding: 15px; gap: 15px; }
}
@media(max-width:900px) {
  .service-page .service-main.service-workspace { grid-template-columns: 1fr; gap: 18px; padding-top: 24px; }
  .service-sidebar { position: static; max-height: none; overflow: visible; }
  .service-catalog-disclosure>summary { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; color: var(--service-ink); font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; }
  .service-catalog-disclosure>summary::-webkit-details-marker { display: none; }
  .service-sidebar-body { padding-top: 4px; }
  .service-sidebar h2,.service-sidebar-home { display: none; }
  .service-page #service-navigation { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-network-toolbar { position: static; }
  .service-network-brand>span:last-child { display: inline; }
}
@media(max-width:650px) {
  .service-page .service-main.service-workspace { padding-block: 18px 40px; }
  .service-page .service-workspace .service-panel { padding: 24px 22px; }
  .service-page .service-workspace .service-heading img { width: 68px; height: 84px; }
  .service-page .service-workspace .service-copy { font-size: 15px; }
  .service-page .service-workspace .service-copy>p:first-child { font-size: 17px; }
  .service-network-brand>span:last-child { display: none; }
  .service-network-logo { width: 64px; flex-basis: 64px; height: 30px; }
  .service-network-toolbar { gap: 12px; padding: 14px; }
  .service-page :is(.service-faq h2,.service-documents h2) { font-size: 22px; }
  .service-section-empty { padding: 16px; }
}
@media(max-width:550px) { .service-page #service-navigation { grid-template-columns: 1fr; } }
@media print {
  .service-page .service-main.service-workspace { display: block; width: 100%; margin-inline: 0; padding: 0; }
  .service-sidebar,.service-network-toolbar { display: none; }
  .service-page .service-workspace .service-panel { padding: 0; }
}

.service-contract-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.service-page .service-contract-link { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; color: var(--service-accent); font-size: 15px; line-height: 1.5; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(var(--service-rgb),.35); }
.service-page .service-contract-link:hover { text-decoration-color: var(--service-accent); }
.service-contract-link>span { font-size: 13px; }

.service-page .service-directory-main { width: min(1320px,calc(100% - 64px)); margin-inline: auto; }
.service-directory-back { color: var(--service-muted); font-size: 13px; }
.service-directory-back:hover { color: var(--service-ink); }
.service-directory-heading { margin-block: 20px 32px; }
.service-directory-heading h1 { margin-bottom: 12px; color: var(--service-ink); font-size: clamp(34px,4vw,54px); line-height: 1.08; letter-spacing: -.04em; }
.service-directory-heading p { color: var(--service-muted); line-height: 1.6; }
.service-directory-layout { display: grid; grid-template-columns: minmax(220px,265px) minmax(0,1fr); gap: 24px; align-items: start; }
.service-directory-filters {
  display: grid;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--service-line);
  border-radius: 16px;
  background: var(--service-surface);
}
.service-directory-filters label { display: grid; gap: 7px; min-width: 0; color: var(--service-muted); font-size: 13px; }
.service-directory-filters :is(input,select,button) {
  min-height: 44px;
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--service-line);
  border-radius: 9px;
  background: var(--service-field);
  color: var(--service-ink);
  font-size: 14px;
}
.service-directory-filters button { text-align: left; }
.service-directory-filters button:hover { border-color: var(--service-accent); }
#service-directory-count { margin: 0 0 13px; color: var(--service-muted); font-size: 13px; }
.service-directory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.service-directory-grid > .service-section-empty { grid-column: 1 / -1; }
.service-directory-card {
  --directory-rgb: var(--service-rgb);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 19px;
  border: 1px solid rgba(var(--directory-rgb),.35);
  border-radius: 16px;
  background: var(--service-surface);
}
.service-directory-card[data-kind=exchange] { --directory-rgb: 235,66,76; }
.service-directory-card[data-kind=setup] { --directory-rgb: 170,170,170; }
.service-directory-card-head { display: flex; align-items: center; gap: 14px; }
.service-directory-icon { flex: none; width: 42px; height: 48px; object-fit: contain; }
html[data-theme=light] .service-directory-icon { filter: brightness(0); }
.service-directory-card h2 { color: var(--service-ink); font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.service-directory-card .service-directory-kind { margin-bottom: 4px; color: var(--service-muted); font-size: 11px; }
.service-directory-card > p { color: var(--service-muted); font-size: 14px; line-height: 1.5; }
.service-directory-card .service-directory-networks { font-size: 12px; }
.service-directory-card > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  margin-top: auto;
  padding: 8px 11px;
  border: 1px solid rgba(var(--directory-rgb),.32);
  border-radius: 9px;
  background: rgba(var(--directory-rgb),.06);
  color: var(--service-ink);
  font-size: 13px;
}
.service-directory-card > a:hover { border-color: rgba(var(--directory-rgb),.8); }
.service-directory :is(input,select,button,a):focus-visible { outline: 2px solid var(--service-accent); outline-offset: 3px; }
@media (max-width: 900px) {
  .service-directory-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .service-directory-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-directory-filters button { width: fit-content; }
}
@media (max-width: 540px) {
  .service-page .service-directory-main { width: calc(100% - 36px); }
  .service-directory-grid, .service-directory-filters { grid-template-columns: minmax(0,1fr); }
}