@font-face {
  font-family: "Golos UI";
  src: url("https://www.nalog.gov.ru/html/edo_routing_brief/assets/fonts/Golos-UI-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Golos UI";
  src: url("https://www.nalog.gov.ru/html/edo_routing_brief/assets/fonts/Golos-UI-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Golos UI";
  src: url("https://www.nalog.gov.ru/html/edo_routing_brief/assets/fonts/Golos-UI-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font: "Golos UI", Arial, sans-serif;
  --bg: #f5f7fa;
  --bg-soft: #eeeff2;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-soft: #f5f7fa;
  --text: #292d33;
  --text-soft: #565c66;
  --text-faint: #797f89;
  --line: #dde2eb;
  --line-strong: #cbd2dd;
  --blue: #1b5aeb;
  --blue-hover: #1448c7;
  --blue-soft: #e9eefc;
  --blue-light: #6f96f3;
  --action: #1b5aeb;
  --action-hover: #1448c7;
  --red: #c92c35;
  --red-soft: #fdecee;
  --nav-pill: #f1f2f4;
  --nav-pill-line: #e5e7eb;
  --green: #117d47;
  --green-soft: #dff7eb;
  --amber: #aa6a0a;
  --amber-soft: #fff4de;
  --navy: #173f8f;
  --shadow-sm: 0 8px 28px rgba(25, 67, 113, 0.08);
  --shadow-md: 0 24px 64px rgba(31, 71, 116, 0.14);
  --shadow-blue: 0 14px 30px rgba(27, 90, 235, 0.18);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
  --shell: 1180px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15181d;
  --bg-soft: #1a1e24;
  --surface: #20242b;
  --surface-elevated: #252a32;
  --surface-soft: #1b1f25;
  --text: #f1f5fa;
  --text-soft: #b8c5d5;
  --text-faint: #9aa9ba;
  --line: #363c46;
  --line-strong: #48505d;
  --blue: #84a8ff;
  --blue-hover: #a2bdff;
  --blue-soft: #293654;
  --blue-light: #a2bdff;
  --action: #2d62dc;
  --action-hover: #2355c8;
  --red: #ff7f85;
  --red-soft: #4a2932;
  --nav-pill: #2c3037;
  --nav-pill-line: #414650;
  --green: #6bd79a;
  --green-soft: #183a2a;
  --amber: #ffc96f;
  --amber-soft: #46391f;
  --navy: #101b32;
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 24px 64px rgba(0, 0, 0, 0.26);
  --shadow-blue: 0 14px 30px rgba(0, 0, 0, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -0.035em; line-height: 1.1; }
h2 { margin-bottom: 18px; font-size: clamp(30px, 3.7vw, 46px); }
h3 { font-size: 24px; }
button { touch-action: manipulation; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 75%, white); outline-offset: 4px; }
.shell { width: min(calc(100% - 48px), var(--shell)); margin-inline: auto; }
.section { padding: 96px 0; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px; border-radius: 10px; background: var(--surface); color: var(--blue); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { position: sticky; z-index: 50; top: 0; padding: 14px 0 0; background: transparent; pointer-events: none; }
.header-inner { position: relative; display: flex; width: min(calc(100% - 32px), 1240px); min-height: 70px; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 24px; padding: 8px 10px 8px 14px; background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: 0 12px 38px rgba(25, 67, 113, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; }
[data-theme="dark"] .header-inner { background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: 0 14px 42px rgba(0, 0, 0, 0.24); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.brand-logo { position: relative; display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; }
.logo { position: absolute; max-width: 100%; max-height: 100%; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 16px; letter-spacing: -0.015em; line-height: 1.2; }
.brand-copy small { color: var(--text-soft); font-size: 12px; line-height: 1.25; }
.header-nav { position:relative; display: flex; align-items: center; gap: 4px; isolation:isolate; }
.header-nav a, .footer-links a { color: var(--text-soft); font-size: 14px; text-decoration: none; transition: color 0.2s ease; }
.header-nav a:hover, .footer-links a:hover { color: var(--blue); }
.header-nav a { position:relative; z-index:1; border: 1px solid transparent; border-radius: 999px; padding: 9px 12px; white-space: nowrap; transition: color 0.18s ease; }
.header-nav a:hover { color:var(--text); }
.header-nav a[data-section-link].is-current { border-color:var(--nav-pill-line); background:var(--nav-pill); color:var(--text); }
.header-nav.has-nav-indicator a[data-section-link].is-current { border-color:transparent; background:transparent; }
.nav-indicator { position:absolute; z-index:0; top:0; left:0; width:0; height:0; border:1px solid var(--nav-pill-line); border-radius:999px; background:var(--nav-pill); pointer-events:none; opacity:0; transition:transform .42s cubic-bezier(.22,1,.36,1),width .42s cubic-bezier(.22,1,.36,1),height .2s,opacity .18s; }
.nav-indicator.is-visible { opacity:1; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions .menu-toggle { display: none; }
.icon-button { display: grid; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-soft); color: var(--text); cursor: pointer; place-items: center; transition: transform 0.2s ease, background 0.2s ease; }
.icon-button:hover { background: var(--blue-soft); transform: translateY(-1px); }
.icon-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.system-icon { width:20px; height:20px; flex:0 0 20px; stroke:none !important; }
.theme-control { position: relative; }
.appearance-icon .appearance-half { fill: currentColor; stroke: none; }
.appearance-icon .appearance-bg { fill: currentColor; opacity: 0.12; stroke: none; }
.theme-menu { position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; width: 224px; border: 1px solid color-mix(in srgb, var(--line) 84%, transparent); border-radius: 14px; padding: 6px; background: var(--surface); box-shadow: 0 18px 44px rgba(41, 45, 51, 0.16); }
.theme-menu button, .drawer-theme-options button { display: grid; width: 100%; min-height: 44px; align-items: center; grid-template-columns: 22px 1fr; gap: 9px; border: 0; border-radius: 10px; padding: 0 10px; background: transparent; color: var(--text); font-size: 14px; text-align: left; cursor: pointer; }
.theme-menu button:hover, .drawer-theme-options button:hover { background: var(--surface-soft); }
.theme-menu button[aria-checked="true"], .drawer-theme-options button[aria-checked="true"] { background: var(--blue-soft); color: var(--blue); }
.theme-menu svg, .drawer-theme-options svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.services-control { position: relative; }
.services-toggle { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; border: 0; border-radius: 12px; padding: 0 11px; background: transparent; color: var(--text-soft); font-size: 14px; cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; }
.services-toggle:hover, .services-toggle[aria-expanded="true"] { background: var(--blue-soft); color: var(--blue); }
.services-toggle .icon-mask { width: 20px; height: 20px; }
.services-toggle > svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.services-toggle > svg:first-child { width: 20px; height: 20px; stroke: none; }
.services-menu { position: absolute; z-index: 80; top: calc(100% + 9px); right: 0; display: grid; width: 310px; gap: 3px; border: 1px solid color-mix(in srgb, var(--line) 84%, transparent); border-radius: 16px; padding: 7px; background: var(--surface); box-shadow: 0 18px 44px rgba(41, 45, 51, 0.14); }
.services-menu > p { margin: 3px 11px 4px; color: var(--text-faint); font-size: 10px; font-weight: 500; letter-spacing: 0.055em; text-transform: uppercase; }
.services-menu a, .drawer-services a { display: flex; min-height: 58px; align-items: center; gap: 11px; border-radius: 11px; padding: 10px 11px; color: var(--text); text-decoration: none; transition: background-color 0.16s ease, color 0.16s ease; }
.services-menu a:hover, .services-menu a:focus-visible, .drawer-services a:hover, .drawer-services a:focus-visible { background: var(--blue-soft); color: var(--blue); }
.services-menu a > .icon-mask, .drawer-services a > .icon-mask { width: 24px; height: 24px; }
.services-link-copy, .services-menu a > span:nth-child(2), .drawer-services a > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.services-menu strong, .drawer-services strong { font-size: 13px; font-weight: 500; line-height: 1.3; }
.services-menu small, .drawer-services small { color: var(--text-faint); font-size: 11px; line-height: 1.4; }
.service-external { flex: 0 0 auto; margin-left: auto; color: var(--text-faint); font-size: 15px; }
.drawer-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(25, 31, 40, 0.42); opacity: 0; pointer-events: auto; transition: opacity 0.24s ease; }
.drawer-backdrop:not(.is-open) { pointer-events: none; }
.drawer-backdrop.is-open { opacity: 1; }
.mobile-drawer { position: fixed; z-index: 91; top: 0; right: 0; display: flex; width: min(90vw, 390px); height: 100dvh; overflow-y: auto; flex-direction: column; padding: 22px; background: var(--surface); box-shadow: -24px 0 64px rgba(18, 29, 44, 0.22); pointer-events: auto; transform: translateX(104%); transition: transform 0.24s ease; }
.mobile-drawer.is-open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 30px; }
.drawer-header > div { display: grid; gap: 3px; }
.drawer-header strong { font-size: 23px; }
.drawer-header span { color: var(--text-soft); font-size: 12px; }
.drawer-header .icon-button { flex: 0 0 44px; width: 44px; height: 44px; }
/* A drawer that slides away no longer takes taps: they reach the page under it. */
.mobile-drawer:not(.is-open) { pointer-events: none; }
.drawer-nav { display: grid; margin-bottom: 28px; border-top: 1px solid var(--line); }
.drawer-nav a { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); color: var(--text); font-size: 16px; font-weight: 500; text-decoration: none; }
.drawer-nav a span { color: var(--blue); font-size: 20px; }
.drawer-nav a[data-section-link] { transition: background-color 0.18s ease, color 0.18s ease; }
.drawer-nav a[data-section-link].is-current { margin-inline: -9px; border-color: transparent; border-radius: 12px; padding-inline: 9px; background:var(--nav-pill); color:var(--text); }
.drawer-services { margin-bottom: 28px; }
.drawer-services > h2 { margin: 0 0 10px; color: var(--text-soft); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; line-height: 1.5; text-transform: uppercase; }
.drawer-services > nav { display: grid; gap: 3px; margin-inline: -10px; }
.drawer-theme { margin-bottom: 24px; }
.drawer-theme > strong { display: block; margin-bottom: 10px; color: var(--text-soft); font-size: 12px; letter-spacing: 0.07em; text-transform: uppercase; }
.drawer-theme-options { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 17px; padding: 6px; background: var(--surface-soft); }
.drawer-theme-options button { background: var(--surface); }
.drawer-cta { width: 100%; justify-content: space-between; margin-top: auto; }
.drawer-note { margin: 16px 2px 0; color: var(--text-faint); font-size: 11px; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; border: 1px solid transparent; border-radius: 999px; padding: 0 24px; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease; }
.button:hover { transform: translateY(-2px); }
.button-small { min-height: 42px; padding-inline: 19px; font-size: 14px; }
.button-large { min-height: 58px; padding-inline: 30px; font-size: 17px; }
.button-primary { background: var(--action); box-shadow: var(--shadow-blue); color: #ffffff; }
.button-primary:hover { background: var(--action-hover); }
.button-secondary { border-color: var(--line-strong); background: var(--surface); color: var(--text); }
.button-secondary:hover { border-color: var(--blue); color: var(--blue); }
.button-ghost { border-color: var(--line); background: transparent; color: var(--text-soft); box-shadow: none; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.button-arrow { font-size: 22px; line-height: 1; }
.button svg { width: 20px; height: 20px; flex: 0 0 20px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); color: var(--blue); font-weight: 500; text-decoration: none; }
.text-link:hover { border-color: var(--blue); }
.section-label { display: block; margin-bottom: 14px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }

.icon-tile, .case-icon, .result-icon { display: grid; width: 56px; height: 56px; border-radius: 17px; place-items: center; }
.icon-blue { background: var(--blue-soft); color: var(--blue); }
.icon-red { background: var(--red-soft); color: var(--red); }
.icon-green { background: var(--green-soft); color: var(--green); }
.icon-amber { background: var(--amber-soft); color: var(--amber); }
/* The SVG is a mask over the palette colour, as the UI kit paints its icons with currentColor. A colour
   filter over a background image gave the pale half of two-tone icons a sky-blue cast in Safari. Chrome
   loads no masks from disk, so a page opened from a file (html.from-disk) keeps the filters. */
.icon-mask { display: inline-block; width: 25px; height: 25px; flex: 0 0 auto; background-color: var(--blue); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-red .icon-mask, .icon-mask.icon-red { background-color: var(--red); }
.icon-green .icon-mask { background-color: var(--green); }
.icon-amber .icon-mask { background-color: var(--amber); }
.icon-white .icon-mask { background-color: #fff; }
.from-disk .icon-mask { background: var(--icon) center / contain no-repeat; -webkit-mask: none; mask: none; filter: brightness(0) saturate(100%) invert(31%) sepia(89%) saturate(3163%) hue-rotate(218deg) brightness(95%) contrast(92%); }
.from-disk .icon-red .icon-mask, .from-disk .icon-mask.icon-red { filter: brightness(0) saturate(100%) invert(25%) sepia(80%) saturate(3046%) hue-rotate(340deg) brightness(86%) contrast(91%); }
.from-disk .icon-green .icon-mask { filter: brightness(0) saturate(100%) invert(38%) sepia(33%) saturate(1352%) hue-rotate(103deg) brightness(91%) contrast(91%); }
.from-disk .icon-amber .icon-mask { filter: brightness(0) saturate(100%) invert(50%) sepia(94%) saturate(666%) hue-rotate(359deg) brightness(93%) contrast(88%); }
[data-theme="dark"].from-disk .icon-mask { filter: brightness(0) saturate(100%) invert(69%) sepia(44%) saturate(1128%) hue-rotate(191deg) brightness(102%) contrast(102%); }
[data-theme="dark"].from-disk .icon-red .icon-mask { filter: brightness(0) saturate(100%) invert(70%) sepia(21%) saturate(1635%) hue-rotate(306deg) brightness(100%) contrast(102%); }
[data-theme="dark"].from-disk .icon-green .icon-mask { filter: brightness(0) saturate(100%) invert(79%) sepia(15%) saturate(1198%) hue-rotate(90deg) brightness(94%) contrast(93%); }
.from-disk .icon-white .icon-mask { filter: brightness(0) invert(1); }

.site-footer { padding: 48px 0 26px; border-top: 1px solid var(--line); background: var(--surface); }
.footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand .brand-logo { width: 48px; height: 48px; flex-basis: 48px; }
.footer-brand strong { font-size: 14px; }
.footer-brand p { margin: 3px 0 0; color: var(--text-faint); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 24px; }
.footer-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 20px; color: var(--text-faint); font-size: 11px; }
.footer-bottom p { max-width: 750px; margin-bottom: 0; }

@media (max-width: 1060px) {
  .header-nav, .header-cta, .header-actions .services-control, .theme-control-desktop { display: none; }
  .header-actions .menu-toggle { display: grid; width: 44px; height: 44px; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 95px; }
  .shell { width: min(calc(100% - 32px), var(--shell)); }
  .section { padding: 64px 0; }
  .site-header { padding-top: 10px; }
  .header-inner { width: calc(100% - 20px); min-height: 66px; gap: 10px; border-radius: 20px; padding: 8px 9px 8px 10px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .brand { flex: 1 1 auto; min-width: 0; gap: 9px; }
  .brand-logo { width: 42px; height: 42px; flex-basis: 42px; }
  .brand-copy { min-width: 0; }
  .brand-copy strong { max-width: 224px; font-size: 12px; line-height: 1.25; }
  .brand-copy small { font-size: 9px; line-height: 1.3; }
  .header-actions { flex: 0 0 auto; gap: 6px; }
  .header-actions .icon-button { width: 44px; height: 44px; }
  .theme-control-desktop { display: none; }
  .button-large { width: 100%; }
  .footer-grid, .footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-links { justify-content: flex-start; gap: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}