/* Оформление adatka.hu.
 *
 * Вынесено из `index.html` 2026.09.22 (находка `Фронтенд-N7`). Причина не в
 * красоте: строгая `Content-Security-Policy` запрещает стиль и код прямо в
 * файле, а политика, ослабленная до `unsafe-inline`, защищает ровно от
 * ничего. Пока стиль жил внутри страницы, заголовок нельзя было поставить.
 */
/* Play — заголовки, Roboto — интерфейс. Самохостинг: обращений к внешним службам шрифтов нет. */
  @font-face{font-family:'Play';src:url('/fonts/Play-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Play';src:url('/fonts/Play-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Play';src:url('/fonts/Play-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Play';src:url('/fonts/Play-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Roboto';src:url('/fonts/Roboto-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Roboto';src:url('/fonts/Roboto-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  @font-face{font-family:'Roboto';src:url('/fonts/Roboto-Italic-latin.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:'Roboto';src:url('/fonts/Roboto-Italic-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
  :root{
    --bg:#f4f6f8; --card:#fff; --ink:#1a1f2b; --muted:#6b7280;
    --line:#e4e7ec; --accent:#2563eb; --accent-soft:#eff4ff; --brand:#ef4741; --brand-dark:#d63b35;
    /* Граница поля ввода в покое — одна на все поля (поиск на главной и на
       «Címkiegészítés», e-mail окна заявки, рисунки полей `.al-mezo`): не
       меньше 3:1 к фону под полем — WCAG 1.4.11, `Фронтенд-N39`. В фокусе
       рамка — `--accent`. `--line` (1,2:1 на белом) — разделители и карточки,
       не поля. Цвет не задавать по месту: правило одно. */
    --field-line:#6b7280;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --sans:'Roboto',system-ui,-apple-system,"Segoe UI",sans-serif;
    --head:'Play',var(--sans);
  }
  *{box-sizing:border-box}
  /* фон: белый вверху (шапка+hero), серый начинается с секции «Mit tud» */
  body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
  a{color:inherit}

  /* верхняя навигация */
  /* Без линии под шапкой, как у dadata.ru (`Фронтенд-N21`, владелец 2026.09.24:
     «нужно убрать эту полоску между верхним меню и словом Ajánlások»). */
  .nav{background:#fff;position:relative}
  .nav-in{max-width:1120px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:30px}
  .nav .logo-link{display:inline-flex;align-items:center;line-height:0;flex:0 0 auto}
  .nav .logo{height:44px;width:auto;display:block}
  .nav-menu{display:flex;align-items:center;gap:24px;margin-left:auto}
  /* Шапка набрана Roboto, как у dadata.ru (`Фронтенд-N21`, владелец
     2026.09.24: «верхушка должна быть в таком же фонте как у Дадаты»);
     Play остаётся заголовкам (Типографика § 8.1). */
  .nav-menu a,.nav-products,.nav-megold{font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.1px;color:#374151;text-decoration:none;background:none;border:0;margin:0;cursor:pointer;line-height:1;padding:0 0 4px;border-bottom:1px solid transparent;transition:color .15s ease}
  .nav-menu a{border-bottom-color:var(--line)}
  .nav-menu a:hover{color:#0b0f17;border-bottom-color:#9aa2ae}
  .nav-products,.nav-megold{display:inline-flex;align-items:center;gap:7px}
  .nav-products:hover,.nav-megold:hover{color:#0b0f17}
  .nav-products .chev,.nav-megold .chev{width:11px;height:11px;display:block;color:currentColor;transition:transform .2s ease}
  .nav-products.open .chev{transform:rotate(180deg)}
  .nav.open .nav-products .chev,.nav.megold-open .nav-megold .chev{transform:rotate(180deg)}

  /* мега-меню Termékek: цельная непрозрачная карточка, тень, углы 4px */
  .megamenu{position:absolute;top:100%;left:50%;transform:translateX(-50%);width:1072px;max-width:calc(100vw - 48px);background:#fff;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);overflow:hidden;display:none;z-index:110}
  .nav.open .megamenu{display:block}
  .mm-dark{background:#3D424D;padding:24px 32px 16px}
  .mm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 36px}
  .mm-item{display:block;text-decoration:none}
  .mm-item .h{font-family:var(--sans);font-weight:900;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  a.mm-item:hover .h{color:#c0c5cc}
  .mm-item.soon .h{color:#fff}
  .mm-badge{display:inline-block;margin-left:8px;vertical-align:middle;font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.01em;color:#fff;background:#9CB964;border-radius:3px;padding:2px 7px;text-decoration:none;white-space:nowrap}
  /* `.mm-soon` — строка «Készül: …» в мега-меню. Убрана вместе с разметкой
     2026.09.22; правило снято, чтобы не копить стили без хозяина. */
  .mm-item p{font-family:var(--sans);font-size:13px;line-height:1.5;color:#fff;margin:6px 0 0}
  /* Нижний блок меню тоже тёмный: белая полоса под тремя услугами разрезала
     меню пополам и выглядела как ошибка вёрстки. */
  .mm-cols{background:#3D424D;padding:4px 32px 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .mm-col .ch{font-family:var(--sans);font-weight:700;font-size:16px;color:#bec4cf;margin:0 0 8px}
  .mm-col a{display:block;font-family:var(--sans);font-size:16px;color:#dfe3e9;text-decoration:none;padding:4px 0}
  .mm-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}

  /* Гамбургер: виден только на узком экране, прячет и раскрывает выдвижное меню */
  .burger{display:none;flex:0 0 auto;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;padding:0}
  .burger span{display:block;position:relative;width:19px;height:1.6px;background:#374151;border-radius:2px;transition:background .15s ease}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.6px;background:#374151;border-radius:2px;transition:transform .2s ease,top .2s ease}
  .burger span::before{top:-6px}
  .burger span::after{top:6px}
  .burger[aria-expanded="true"] span{background:transparent}
  .burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* Выдвижное меню. Отдельные имена классов, а не повтор `.nav-menu`:
     страница проверяется на то, что навигация ровно одна (check_pages.py). */
  .tel-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 12px 28px rgba(16,24,40,.12);z-index:120;max-height:calc(100vh - 72px);overflow-y:auto}
  .nav.tel-open .tel-menu{display:block}
  /* Открытое меню телефона — во весь экран, как у dadata.ru (`Фронтенд-N19`,
     решение владельца 2026.09.24): страница под ним не видна и не
     прокручивается, сверху остаётся шапка с крестиком. Раньше меню свисало
     от шапки, и окно заявки открывалось под ним. */
  .nav.tel-open .tel-menu{position:fixed;top:0;left:0;right:0;bottom:0;max-height:none;padding-top:72px;box-shadow:none;border-bottom:0}
  .nav.tel-open .nav-in{position:relative;z-index:130;background:#fff;box-shadow:0 1px 0 var(--line)}
  html.menu-nyitva,html.menu-nyitva body{overflow:hidden}
  .tel-in{padding:8px 24px 22px}
  .tel-ch{font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);margin:18px 0 6px}
  .tel-menu a{display:block;font-family:var(--sans);font-weight:500;font-size:16px;color:#1a1f2b;text-decoration:none;padding:11px 0;border-bottom:1px solid var(--line)}
  .tel-menu a.sub{font-family:var(--sans);font-weight:400;font-size:15px;color:#4b5563;padding:9px 0}
  .tel-menu a:active{color:var(--accent)}
  .tel-menu .tel-btn{display:block;margin-top:18px;text-align:center;border:0;background:var(--brand);color:#fff;border-radius:9px;padding:13px 18px;font-family:var(--sans);font-weight:500;font-size:15px;width:100%;cursor:pointer}

  /* Кнопка справа в шапке. Была `Bejelentkezés` — убрана 2026.09.22: кабинета
     нет. На её месте единственное действие, которое сейчас работает. */
  .nav-cta{flex:0 0 auto;display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none;font-family:var(--sans);font-weight:500;font-size:14.5px;line-height:1;white-space:nowrap;transition:background .15s ease}
  .nav-cta:hover{background:var(--brand-dark,#d63b35)}
  .nav-cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .login{position:relative;display:inline-block;width:150px;height:44px;flex:0 0 auto;text-decoration:none;transform:translateY(-2px);background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
  .login-shape{position:absolute;inset:0;width:100%;height:100%;display:block}
  .login-shape path{fill:#fff;stroke:#c9ced6;stroke-width:1.3;transition:stroke .15s ease}
  .login-label{position:absolute;left:0;top:0;bottom:0;right:0;transform:translateX(-4px);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:15px;color:#111;transition:color .15s ease}
  .login:hover .login-shape path{stroke:#aeb4bd}
  .login:hover .login-label{color:#c0c5cc}
  .nav-menu a:focus-visible,.nav-products:focus-visible,.nav-megold:focus-visible,.login:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  .btn{font-family:var(--sans);font-size:14px;font-weight:500;color:#fff;background:var(--accent);border:0;border-radius:9px;padding:9px 18px;cursor:pointer;text-decoration:none;display:inline-block}
  .btn:hover{background:#1d4ed8}
  .btn.brand{background:var(--brand)}
  .btn.brand:hover{background:#d93b35}
  /* Второстепенное действие не спорит с главным: контур вместо заливки.
     Синяя кнопка «Szóljanak, ha elindul» рядом с красной «Hozzáférést kérek»
     тянула взгляд на себя, хотя ведёт в очередь ожидания, а не к доступу. */
  .btn.halk{background:#fff;color:#374151;border:1px solid #cfd5dd}
  .btn.halk:hover{background:var(--bg);color:var(--ink);border-color:#aeb4bd}

  /* белая зона шапка+hero (серый начнётся ниже) */
  .hero-wrap{background:#fff;padding-bottom:20px}
  .wrap{max-width:1120px;margin:0 auto;padding:30px 24px 0}

  /* hero в две колонки */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:56px;align-items:start}
  .hero{font-family:var(--head);font-size:clamp(32px,3.4vw,46px);font-weight:400;line-height:1.1;letter-spacing:-.022em;color:var(--ink);margin:0 0 16px}
  .lead{font-size:17px;color:var(--ink);margin:0 0 26px;line-height:1.62;max-width:46ch}
  .hero-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  /* На телефоне обе кнопки во всю ширину и в столбик; на широком экране
     рядом и по центру — первый экран там центрирован. */
  .hero-cta .btn.nagy{flex:1 1 100%}
  @media(min-width:761px){.hero-cta .btn.nagy{flex:0 0 auto}}
  @media(min-width:901px){.hero-cta{justify-content:center}}
  .hero-note{font-size:13px;color:var(--muted)}

  /* Опорные точки под призывом. Ничего нового не обещают: это те же четыре
     услуги, что стоят в меню и в разделе «Mit tud az Adatka?», и те же три
     источника, что названы ниже. Они здесь затем, чтобы первый экран не
     обрывался пустотой на полувысоте. */
  .hero-pont{margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
  .hero-pont .ch{font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#9aa2ae;margin:0 0 12px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none}
  .chips li{font-size:13px;color:#374151;background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:5px 13px;line-height:1.35}
  .forras-sor{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:12.5px;color:var(--muted);margin:0}
  .forras-sor b{font-weight:700;color:#374151}

  .search{position:relative}
  .search input{width:100%;font-size:18px;padding:15px 16px;border:1.5px solid var(--field-line);border-radius:10px;background:#fff;outline:none;font-family:var(--sans);color:var(--ink)}
  .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .drop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 30px rgba(20,30,50,.10);overflow:hidden;z-index:5;display:none}
  .drop.open{display:block}
  .drop .hint{padding:9px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);background:#fafbfc}
  .opt{padding:11px 16px;cursor:pointer;border-bottom:1px solid #f2f4f7}
  .opt:last-child{border-bottom:0}
  .opt:hover,.opt.active{background:var(--accent-soft)}
  /* Выбранный стрелками вариант — не только бледным фоном (1,1:1 к белому,
     `Фронтенд-N38`): синяя полоса слева, 5,2:1. Тенью, а не рамкой — текст
     не сдвигается. В режиме высокой контрастности тени нет — там рамка. */
  .opt.active{box-shadow:inset 3px 0 0 var(--accent)}
  @media (forced-colors:active){.opt.active{outline:2px solid Highlight;outline-offset:-2px}}
  .opt .name{font-size:15px}
  .opt .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
  /* Подсвечивается то, что человек набрал, а не то, что мы дописали.
     Так видно, за что зацепился поиск, и сразу заметно, когда он зацепился
     не за то: например, набрано «1», а предложен дом «12». */
  .opt .mk{color:var(--accent)}
  .hint-row{font-size:13px;color:var(--muted);margin-top:10px}
  .hint-row .ex{color:var(--ink);opacity:.55}

  .card{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;min-height:356px}
  /* Место карточки не пустеет, пока человек набирает: иначе правый столбец
     складывается и вся страница подскакивает под курсором. */
  .card.varakozik{grid-template-columns:1fr;place-items:end center;text-align:center;background:var(--bg);border-style:dashed}
  .card.varakozik p{font-size:14px;color:var(--muted);margin:0;padding:24px;max-width:34ch;line-height:1.55}
  .col{padding:18px 20px}
  .col + .col{border-left:1px solid var(--line)}
  .col h3{font-family:var(--head);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 14px;font-weight:700}
  .row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-bottom:1px solid #f4f6f8}
  .row:last-child{border-bottom:0}
  .row .k{font-size:13px;color:var(--muted);white-space:nowrap}
  /* Значения карточки — текст, не код: Roboto, цифры одной ширины, чтобы
     индекс и координаты стояли в колонку (`Фронтенд-N20`, 2026.09.24;
     Типографика § 3.2, § 8.1). Моноширинный — только коду: JSON, запросы. */
  .row .v{font-size:14px;text-align:right;font-family:var(--sans);font-variant-numeric:tabular-nums}
  .row .v.empty{color:var(--muted)}
  .row.hl .v{color:var(--accent);font-weight:600}
  .foot-demo{margin-top:12px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
  .src{font-size:12px;color:var(--muted)}
  .jsonbtn{font-size:12px;color:var(--accent);background:none;border:1px solid var(--line);border-radius:7px;padding:6px 11px;cursor:pointer;font-family:var(--sans)}
  pre.json{display:none;margin-top:12px;background:#0f1524;color:#c7d2e6;font-family:var(--mono);font-size:12.5px;padding:16px;border-radius:10px;overflow:auto;line-height:1.55}
  pre.json.open{display:block}

  /* секции: базовые — на сером фоне страницы; .alt — белые полосы */
  /* Переход по ссылке-якорю ставит раздел ровно к верху окна. Прежние
     80 px отступа были под прилипшую шапку, а шапка не прилипает — раздел
     останавливался ниже (`Фронтенд-N21`, замечание владельца 2026.09.24). */
  section{max-width:1120px;margin:0 auto;padding:68px 24px;scroll-margin-top:0}
  section:not(.alt){background:var(--bg);max-width:none}
  section:not(.alt) > *{max-width:1120px;margin-left:auto;margin-right:auto}
  section.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
  section.alt .inner{max-width:1120px;margin:0 auto}
  .h2{font-family:var(--head);font-size:clamp(24px,2.1vw,31px);font-weight:400;letter-spacing:-.015em;margin:0 0 10px}
  .h2-sub{font-size:16px;color:var(--ink);margin:0 0 32px;max-width:72ch;line-height:1.6}
  .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .cards4{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .lista{margin:0;padding:0;list-style:none;max-width:70ch}
  .lista li{position:relative;padding:0 0 0 22px;margin:0 0 10px;font-size:15px;color:var(--muted);line-height:1.55}
  .lista li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
  .fonto{font-size:13px;color:var(--muted);margin:10px 0 0}
  .feat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
  section.alt .feat{background:var(--bg)}
  .feat h3{font-family:var(--sans);font-size:17px;font-weight:500;margin:0 0 8px;line-height:1.3}
  .feat p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}
  .feat .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--accent);flex:0 0 auto}
  .feat .ic svg{width:21px;height:21px;display:block}

  .api{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
  .endpoint{font-family:var(--mono);font-size:13px;background:#0f1524;color:#c7d2e6;border-radius:10px;padding:16px;line-height:1.7}
  .endpoint .m{color:#7dd3fc}
  .badge{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:3px 12px;vertical-align:middle}

  /* Тарифы. Прежде это был один абзац по центру пустого белого поля: раздел
     назывался «Béta-hozzáférés és árak», а показать ему было нечего. Цены
     по-прежнему не названы — их нет, — но то, что известно сейчас, разложено
     на две карточки, и видно, где мы находимся. */
  .arak-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;align-items:stretch;margin:0 0 26px}
  .arak{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;display:flex;flex-direction:column}
  .arak.most{border-color:#cdd9f5;box-shadow:0 1px 0 rgba(37,99,235,.06),0 10px 28px rgba(37,99,235,.07)}
  .arak .cim{font-family:var(--sans);font-size:18px;font-weight:500;margin:0 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .arak .ar{font-family:var(--head);font-size:30px;font-weight:700;letter-spacing:-.02em;margin:12px 0 2px}
  .arak .ar small{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);letter-spacing:0;display:block;margin-top:4px}
  .arak ul{list-style:none;margin:18px 0 22px;padding:0}
  .arak li{position:relative;padding:0 0 0 24px;margin:0 0 9px;font-size:14px;color:var(--muted);line-height:1.5}
  .arak li::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .arak li.nincs::before{border-color:var(--muted);transform:none;top:9px;height:0;width:10px;border-left:0;border-bottom:2px solid var(--muted)}
  .arak .also{margin-top:auto}
  .arak .also .btn{width:100%;text-align:center}
  .arak .jegyzet{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}

  /* ---- Тарифы после правки 2026.09.22 (`Фронтенд-N13`) ----------------
     Раздел показывает УСТРОЙСТВО тарифа, а не цены: цен ещё нет. Отсюда
     три блока вместо двух столбцов — «что сейчас», «как считаем», «какие
     уровни» — и полоса «ваше предложение» четвёртым вариантом. */

  /* Что сейчас: бета. Широкая полоса — единственное, чем можно
     воспользоваться сегодня, и она не должна стоять наравне с пустыми. */
  .arak-most{background:#fff;border:1px solid #cdd9f5;border-radius:14px;padding:26px;margin:0 0 30px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:center;box-shadow:0 1px 0 rgba(37,99,235,.06),0 10px 28px rgba(37,99,235,.07)}
  .arak-most .cim{font-family:var(--sans);font-size:18px;font-weight:500;margin:0 0 4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .arak-most ul{list-style:none;margin:18px 0 0;padding:0}
  .arak-most li{position:relative;padding:0 0 0 24px;margin:0 0 9px;font-size:14px;color:var(--muted);line-height:1.5}
  .arak-most li::before{content:"";position:absolute;left:2px;top:6px;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
  .arak-most .jegyzet{font-size:12.5px;color:var(--muted);margin:12px 0 0;line-height:1.5}
  .arak-most .btn{width:100%;text-align:center}

  /* Заголовок над блоком. */
  .szint-ch{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#5f6673;margin:0 0 14px}

  /* Как считаем: T1, T7, T6. Главный ответ покупателю. */
  .szamolas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 32px}
  .szam-kartya{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
  .szam-kartya .cim{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);margin:0 0 8px}
  .szam-kartya p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}

  /* Четыре уровня. Ценники пустые намеренно. */
  .arak-grid.arak-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:22px}
  .arak-4 .arak{padding:22px 20px 20px}
  .arak-4 .ar{font-size:26px;color:var(--ink)}

  /* Четвёртый вариант — предложение клиента. Полосой, а не столбцом:
     он не стоит в ряду уровней, он рядом с ними. */
  .egyedi{background:#fff;border:1px dashed #b9c2cf;border-radius:14px;padding:22px 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:0 0 22px}
  .egyedi .cim{font-family:var(--sans);font-weight:500;font-size:16px;color:var(--ink);margin:0 0 6px}
  .egyedi p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
  .egyedi .btn{white-space:nowrap}

  /* Кому бесплатно навсегда. */
  .ingyen-jegyzet{border-left:3px solid var(--accent);background:#fff;border-radius:0 12px 12px 0;padding:18px 22px;margin:0 0 20px}
  .ingyen-jegyzet .cim{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--ink);margin:0 0 8px}
  .ingyen-jegyzet p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 8px}
  .ingyen-jegyzet p:last-child{margin-bottom:0}

  @media(max-width:1060px){
    .arak-grid.arak-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media(max-width:860px){
    .arak-most,.egyedi{grid-template-columns:1fr;gap:20px}
    .szamolas{grid-template-columns:1fr}
  }
  @media(max-width:560px){
    .arak-grid.arak-4{grid-template-columns:1fr}
  }

  /* Окно за кнопкой входа: кабинета ещё нет, и вместо пустой страницы
     человек получает объяснение, что делать дальше. */
  .modal-bg{position:fixed;inset:0;background:rgba(15,21,36,.45);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
  .modal-bg.open{display:flex}
  .modal{background:#fff;border-radius:14px;max-width:440px;width:100%;padding:26px 26px 22px;box-shadow:0 20px 60px rgba(15,21,36,.3)}
  .modal h2{font-family:var(--head);font-size:20px;font-weight:400;margin:0 0 10px}
  .modal p{font-size:15px;color:var(--muted);line-height:1.6;margin:0 0 14px}
  .modal .modal-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
  .modal .zar{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--muted);background:none;border:0;cursor:pointer;padding:9px 6px}
  .modal .zar:hover{color:var(--ink)}

  footer{border-top:1px solid var(--line);background:#fff}
  /* Подвал был в две тонкие строки на всю ширину — внизу страницы оставалась
     белая полоса ни с чем. Те же ссылки разложены в колонки. */
  .foot-cols{max-width:1120px;margin:0 auto;padding:44px 24px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
  .foot-col a:focus-visible,.foot-col button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
  .foot-in{max-width:1120px;margin:0 auto;padding:30px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--muted)}
  .foot-jog{border-top:1px solid var(--line);padding-top:18px;padding-bottom:26px;align-items:flex-start}
  .foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
  .foot-links a,.foot-links button{color:var(--muted);text-decoration:none;font-size:13px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
  .foot-links a:hover,.foot-links button:hover{color:var(--ink);text-decoration:underline}
  .foot-links a:focus-visible,.foot-links button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

  /* Промежуточная ширина: полоса сужается раньше, чем ломается раскладка,
     иначе на 1024 колонки первого экрана становятся по 430 px и заголовок
     рвётся на три строки. */
  @media(max-width:1060px){
    .hero-grid{gap:40px}
    .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  }
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .lead{max-width:none}
    .arak-grid{grid-template-columns:1fr}
  }
  @media(max-width:760px){
    .cards3,.cards4{grid-template-columns:1fr}
    .api{grid-template-columns:1fr}
    section{padding:52px 20px}
    .wrap{padding:22px 20px 0}
    .nav-in{padding:0 20px;gap:14px}
    .foot-in,.foot-cols{padding-left:20px;padding-right:20px}
    /* Верхнее меню на телефоне не исчезает молча: его место занимает
       гамбургер, за которым лежат те же пункты и весь состав мега-меню. */
    .nav-menu{display:none}
    .megamenu{display:none}
    .login,.nav-cta{display:none}
    .burger{display:flex}
    .mm-grid{grid-template-columns:1fr}
    .mm-cols{grid-template-columns:1fr}
    .nav .logo{height:36px}
    .foot-cols{grid-template-columns:1fr;gap:4px;padding-top:34px}
    .foot-col .ch{margin-top:20px}
  }
  @media(max-width:640px){
    .card{grid-template-columns:1fr;min-height:0}
    .col + .col{border-left:0;border-top:1px solid var(--line)}
    .card.varakozik{min-height:150px}
  }
  @media(prefers-reduced-motion:reduce){*{transition:none!important}}
  /* ================================================================
     РИТМ СТРАНИЦЫ ПО ОБРАЗЦУ (2026.09.22)
     Образец — мобильная страница dadata.ru. Взят порядок подачи, а не
     содержание: раздел = заголовок → вводный абзац → наглядный пример →
     список подпунктов → широкая кнопка. Тексты, данные, рисунки и краски
     свои (§ 9.2 Устава — приёмы интерфейса; § 9.3 — чужая форма не берётся).
     ================================================================ */

  /* Первый экран в одну колонку: живое демо переехало в свой раздел. */
  .hero-in{max-width:640px}
  .hero-in .lead{margin:0 0 18px}
  .hero-in .lead:last-of-type{margin-bottom:26px}

  /* Широкая кнопка. На телефоне во всю ширину, как у образца. */
  .btn.nagy{display:block;width:100%;text-align:center;padding:16px 20px;font-size:16px;border-radius:10px}
  @media(min-width:761px){.btn.nagy{display:inline-block;width:auto;padding:13px 28px}}

  /* Заголовок раздела со знаком услуги. */
  .szakasz-fej{display:flex;align-items:center;gap:14px;margin:0 0 10px}
  .szakasz-fej .h2{margin:0}

  /* Наглядный пример: светло-синяя подложка. */
  .demo-doboz{background:#e8f0fb;border:1px solid #d3e0f2;border-radius:14px;padding:22px;margin:0 0 26px;position:relative}
  .demo-cim{font-family:var(--sans);font-weight:500;font-size:16px;margin:0 0 12px;color:var(--ink)}
  .demo-sugo{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.5}
  /* Примеры-кнопки в подсказке демо и в карточках (`Фронтенд-N31`): текст как
     был, только нажимается; без сценария — просто текст. */
  .pelda-gomb{font:inherit;font-weight:700;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dotted currentColor}
  .pelda-gomb:hover,.pelda-gomb:focus-visible{color:var(--brand)}
  .pelda-jel:empty{display:none}
  .demo-doboz .card{background:#fff}
  /* Рамка поля в демонстрации — общая `--field-line` из `.search input`, своего
     цвета у места нет (`Фронтенд-N39`; до 2026.10.03 здесь стояло `#c9d8ee`,
     1,26:1, и из-за веса 0-3-1 этому правилу приходилось повторять и подсветку
     фокуса — найдено 2026.09.22 по снимку: машинная проверка мерила
     состояние, человек смотрит на вид). Теперь фокус — общее `.search input:focus`. */

  /* Метка «пример». Неподвижный рисунок, а не живой ответ, обязан это
     говорить: иначе нарисованная строка читается как настоящая выдача. */
  .demo-doboz.mintas{padding-top:40px}
  .minta-cimke{position:absolute;top:10px;right:12px;font-family:var(--head);font-weight:700;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8b93a1;background:rgba(255,255,255,.75);border-radius:4px;padding:3px 8px}

  /* Подпункты раздела: ссылка и объяснение под ней. */
  .alpontok{margin:0 0 26px}
  .alpont{margin:0 0 18px}
  .alpont > a,.alpont > span.cim{display:inline-block;font-size:16px;color:var(--accent);text-decoration:none;border-bottom:1px dashed #9fc0f2;padding-bottom:1px;font-weight:400}
  .alpont > a:hover{border-bottom-style:solid}
  .alpont p{font-size:14.5px;color:var(--muted);line-height:1.6;margin:6px 0 0;max-width:62ch}
  .alpont .keszul{display:inline-block;margin-left:8px;font-size:11px;font-family:var(--sans);color:#5f6673;background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:2px 7px;vertical-align:middle}

  /* Обогащение: плашка ключа и карточка ответа. */
  .kulcs-pill{display:inline-block;font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:14px;color:#fff;background:#8ba85a;border-radius:6px;padding:7px 14px;margin:0 0 12px}
  .adat-kartya{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:18px 20px}
  .adat-kartya .nev{font-family:var(--sans);font-weight:500;font-size:17px;margin:0 0 10px}
  .adat-kartya .mezo{margin:0 0 12px}
  .adat-kartya .mezo:last-child{margin-bottom:0}
  .adat-kartya .mezo .k{font-size:12.5px;color:#9aa2ae;display:block;margin-bottom:2px}
  .adat-kartya .mezo .v{font-size:15px;color:var(--ink)}
  .tile-racs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
  .tile{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:14px 16px}
  .tile .k{font-size:12.5px;color:#9aa2ae;display:block;margin-bottom:3px}
  .tile .v{font-size:14px;font-family:var(--sans);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:break-word}

  /* Нормализация: грязная строка → разобранные поля. */
  .piszkos{background:#3D424D;color:#e6eaf0;border-radius:10px;padding:18px 20px;font-size:15px;line-height:1.6;font-family:var(--sans)}
  .piszkos .rossz{color:#ff8a82;font-weight:700}
  .nyil{display:flex;justify-content:center;color:#9aa2ae;padding:8px 0}
  .nyil svg{width:22px;height:22px;display:block}
  .tiszta{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:16px 20px}
  .tiszta .sor{display:flex;gap:16px;align-items:baseline;padding:8px 0;border-bottom:1px solid #eef2f7}
  .tiszta .sor:last-child{border-bottom:0}
  .tiszta .sor .k{flex:0 0 118px;font-size:13px;color:#9aa2ae}
  .tiszta .sor .v{font-size:15px;color:var(--ink)}
  .tiszta .ok{color:#5d8a2f;font-weight:700}
  .tiszta .fig{color:#b8791b;font-weight:700}
  .tiszta .megj{font-size:12.5px;color:var(--muted);margin:4px 0 0;line-height:1.45}
  @media(max-width:520px){
    .tiszta .sor{flex-direction:column;gap:2px}
    .tiszta .sor .k{flex:none}
  }

  /* Геокодирование: адреса → координаты → схема. */
  .geo-kartya{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:16px 20px}
  .geo-kartya .cim{font-family:var(--sans);font-weight:500;font-size:15px;margin:0 0 10px}
  .geo-kartya p{margin:0 0 8px;font-size:14.5px;line-height:1.5}
  .geo-kartya p:last-child{margin-bottom:0}
  .geo-kartya .koord{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:14px}
  .geo-kartya .szint{font-size:12.5px;color:var(--muted)}
  /* Схема, а не карта: настоящая подложка — это запрос к чужой службе, а
     страница не делает ни одного стороннего запроса. Рисунок свой. */
  .terkep{background:#fff;border:1px solid #d3e0f2;border-radius:10px;overflow:hidden}
  .terkep svg{display:block;width:100%;height:auto}

  /* Уровни точности: один и тот же запрос на трёх глубинах. */
  .szint-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .szint-kartya{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:16px 18px}
  .szint-kartya .cim{font-size:15px;color:var(--ink);margin:0 0 11px;line-height:1.4}
  .szint-jel{display:inline-block;font-family:var(--head);font-weight:700;font-size:12px;border-radius:20px;padding:4px 12px}
  .szint-jel.haz{background:#e9f2dc;color:#4e7327}
  .szint-jel.utca{background:#e3edfc;color:#2557b8}
  .szint-jel.telep{background:#eceff3;color:#6b7280}
  .szint-kartya .koord{font-family:var(--sans);font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted);margin:11px 0 0}
  .szint-kartya .forras{font-size:12.5px;color:#9aa2ae;margin:4px 0 0}

  /* Что мы получаем и чего не получаем. */
  .mi-racs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .mi-oszlop{background:#fff;border:1px solid #d3e0f2;border-radius:10px;padding:18px 20px}
  .mi-oszlop .ch{font-family:var(--sans);font-weight:500;font-size:14.5px;margin:0 0 14px}
  .mi-oszlop ul{list-style:none;margin:0;padding:0}
  .mi-oszlop li{position:relative;padding:0 0 0 26px;margin:0 0 10px;font-size:14.5px;color:#374151;line-height:1.45}
  .mi-oszlop li:last-child{margin-bottom:0}
  .mi-oszlop li::before{content:"";position:absolute;left:3px;top:6px;width:10px;height:6px;border-left:2px solid #6f9a3c;border-bottom:2px solid #6f9a3c;transform:rotate(-45deg)}
  .mi-oszlop.nem li{color:var(--muted)}
  .mi-oszlop.nem li::before{top:10px;width:11px;height:0;border-left:0;border-bottom:2px solid var(--muted);transform:none}

  /* Кому пригодится. */
  .kek-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0 0 26px}
  .kek-kartya{background:#e8f0fb;border-radius:12px;padding:22px 24px}
  .kek-kartya .cim{font-size:17px;color:var(--accent);border-bottom:1px dashed #9fc0f2;display:inline-block;margin:0 0 14px;font-family:var(--sans)}
  .kek-kartya p{font-size:14.5px;color:#374151;line-height:1.55;margin:0 0 12px}
  .kek-kartya p:last-child{margin-bottom:0}
  .es-meg .ch{font-family:var(--sans);font-weight:500;font-size:15px;margin:0 0 10px}
  .es-meg a{display:inline-block;font-size:15px;color:var(--accent);text-decoration:none;border-bottom:1px dashed #9fc0f2;margin:0 18px 10px 0}

  /* ---- Заготовка раздела, которого ещё нет -------------------------
     Владелец просил: если раздела у нас нет или он другой, поставить
     образец, чтобы вид был понятен, а клиенту можно было объяснить, что
     это в работе. Правило к такому блоку одно и жёсткое: он обязан сам
     говорить, что он заготовка. Иначе это выдумка, выданная за факт
     (§ 14.1 Устава). Сторож проверяет, что метка на месте. */
  .eloke{position:relative;border:1.5px dashed #c6ccd6;border-radius:14px;padding:26px 24px 24px;background:repeating-linear-gradient(135deg,#fafbfc,#fafbfc 12px,#f4f6f8 12px,#f4f6f8 24px)}
  .eloke-cimke{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#5f6673;background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 13px;margin:0 0 16px}
  .eloke-cimke::before{content:"";width:7px;height:7px;border-radius:50%;background:#c9a227;flex:0 0 auto}
  .eloke-magyarazat{font-size:13.5px;color:var(--muted);line-height:1.6;margin:18px 0 0;max-width:68ch}

  .logo-hely{border:1px dashed #cfd5dd;border-radius:9px;background:#fff;height:66px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;color:#aab1bb;padding:8px;line-height:1.35}
  .logo-hely.hivo{border-style:solid;border-color:#e7b4b1;color:var(--brand)}

  /* ---- Тёмный подвал по образцу ------------------------------------
     Цвет тот же, что у мега-меню: #3D424D. Своя краска, не чужая. */
  footer{border-top:0;background:#3D424D;color:#cdd3dc}
  .foot-cols{max-width:1120px;margin:0 auto;padding:48px 24px 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
  .foot-col .ch{font-family:var(--sans);font-weight:700;font-size:16px;color:#bec4cf;margin:0 0 14px}
  .foot-col a,.foot-col button{display:table;font-size:16px;line-height:1.3;color:#bec4cf;text-decoration:none;padding:0;margin:0 0 14px;background:none;border:0;border-bottom:1px solid rgba(190,196,207,.3);cursor:pointer;font-family:inherit;text-align:left}
  .foot-col a:hover,.foot-col button:hover{color:#fff;border-bottom-color:#fff}
  .foot-col a:focus-visible,.foot-col button:focus-visible{outline:2px solid #8fb4f5;outline-offset:2px;border-radius:3px}
  .foot-col .csoport{margin-top:16px}
  .foot-in{max-width:1120px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:#98a1ae;border-top:1px solid rgba(255,255,255,.1)}
  .foot-in a{color:#cdd3dc;text-decoration:none;border-bottom:1px solid rgba(205,211,220,.35)}
  .foot-in a:hover{color:#fff;border-bottom-color:#fff}
  .foot-in a:focus-visible{outline:2px solid #8fb4f5;outline-offset:2px;border-radius:3px}
  .foot-jog{padding-top:18px;padding-bottom:30px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.1)}
  .foot-links a,.foot-links button{color:#98a1ae}
  .foot-links a:hover,.foot-links button:hover{color:#fff}
  .foot-links a:focus-visible,.foot-links button:focus-visible{outline:3px solid #8fb4f5}

  /* Первый экран на широком экране. Живое демо ушло в свой раздел, и
     колонка текста оставляла справа 480 px пустоты. Текст встаёт по центру:
     это осознанная раскладка, а не обрезанная пополам двухколонка. */
  @media(min-width:901px){
    .hero-in{max-width:790px;margin:0 auto;text-align:center}
    .hero-in .lead{margin-left:auto;margin-right:auto}
    .hero-in .lead:first-of-type{max-width:62ch}
    .wrap{padding-top:26px;padding-bottom:16px}
  }
  @media(max-width:1060px){
    .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  }
  @media(max-width:900px){
    .kek-racs{grid-template-columns:1fr}
    .szint-racs{grid-template-columns:1fr}
    .mi-racs{grid-template-columns:1fr}
  }
  @media(max-width:760px){
    /* Подвал в одну колонку. Правило стоит здесь, а не выше: там его
       перебивала новая четырёхколонная раскладка, стоящая дальше по файлу. */
    .foot-cols{grid-template-columns:1fr;gap:0;padding:34px 20px 8px}
    .foot-col .ch{margin-top:24px}
    .foot-col a{margin:0 0 16px;overflow-wrap:break-word}
    .foot-in,.foot-jog{padding-left:20px;padding-right:20px}
    .demo-doboz{padding:16px;border-radius:12px}
    .demo-doboz.mintas{padding-top:38px}
    .szakasz-fej{gap:11px}
    .eloke{padding:20px 16px}
    .adat-kartya,.tiszta,.geo-kartya,.piszkos{padding:15px 16px}
  }

/* Классы вместо четырёх атрибутов `style=` в разметке. Строгая CSP запрещает
   и их тоже: `style-src 'self'` не делает исключения для встроенного
   оформления. Правка механическая, но без неё политику не включить. */
.hero-note-alul{display:block;margin-top:14px}
.api-jegyzet{font-size:14px;color:var(--muted);margin:0}
.eloke-gomb{margin:20px 0 0}

/* Страницы услуг (`Фронтенд-N15`, решение владельца 2026.09.23): у каждой
   услуги своя страница — /ajanlasok/, /adatgazdagitas/, /egysegesites/ (до 2026.09.23 —
   /normalizalas/),
   /geokodolas/. Раздел на главной остаётся витриной и ведёт на страницу
   второй кнопкой; подробности живут только на странице услуги, чтобы один и
   тот же текст не пришлось править в двух местах. */
.gombsor{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.gombsor .btn.nagy{flex:1 1 100%}
@media(min-width:761px){.gombsor .btn.nagy{flex:0 0 auto}}
.tobbi-racs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tobbi-kartya{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px;text-decoration:none}
.tobbi-kartya:hover{border-color:#9fc0f2}
.tobbi-kartya .h{display:inline-block;font-size:17px;color:var(--accent);border-bottom:1px dashed #9fc0f2;margin:0 0 10px}
.tobbi-kartya p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:900px){.tobbi-racs{grid-template-columns:1fr}}
/* На странице услуги подпункты — главное содержание, а не приложение к
   примеру: в один столбец они оставляли правую половину экрана пустой. */
#mit-tud .alpontok{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin:0}
@media(max-width:760px){#mit-tud .alpontok{grid-template-columns:1fr}}

/* Первый экран главной в две колонки, по образцу (2026.09.23). Заголовок —
   тонким начертанием и крупно: у образца он читается как знак, а не как
   строка текста. */
.hero-ket{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start;padding:44px 0 36px}
.hero-ket .hero{font-size:clamp(40px,5vw,70px);font-weight:400;line-height:1.08;letter-spacing:-.01em;margin:0}
.hero-ket .lead{font-size:20px;line-height:1.5;color:var(--ink);max-width:none;margin:0 0 18px}
.hero-ket .lead:last-of-type{margin-bottom:28px}
.hero-ket .hero-cta{justify-content:flex-start}
@media(max-width:900px){
  .hero-ket{grid-template-columns:1fr;gap:18px;padding:12px 0 14px}
  .hero-ket .lead{font-size:17px}
}

/* Три карточки «Ajánlások» по образцу (2026.09.23): живая посередине и
   выше, две нарисованные по бокам — ниже и срезаны снизу. На узком экране
   остаётся только живая: рисунки там заняли бы весь экран до поля ввода. */
.harom{position:relative;display:grid;grid-template-columns:1fr 1.25fr 1fr;align-items:start;margin:8px 0 0;border-bottom:1px solid var(--line)}
.harom-k{border-radius:14px;padding:22px 24px;height:300px;overflow:hidden}
.harom-k.bal{background:#e6eddc;margin:44px -28px 0 0;position:relative;z-index:1}
.harom-k.jobb{background:#dfe3ea;margin:44px 0 0 -28px;position:relative;z-index:1}
.harom-k.kozep{height:auto;min-height:344px;margin:0;position:relative;z-index:2;border-bottom-left-radius:0;border-bottom-right-radius:0;overflow:visible}
.al-mezo{background:#fff;border:1.5px solid var(--field-line);border-radius:10px;padding:13px 16px;font-size:18px;color:var(--ink)}
.al-lista{background:#fff;border:1px solid var(--line);border-radius:10px;margin-top:6px;padding:0 0 6px}
.al-lista .fej{font-size:12px;color:var(--muted);padding:9px 16px;margin:0 0 4px;border-bottom:1px solid var(--line);background:#fafbfc}
.al-lista .nev{font-size:15px;color:var(--ink);margin:0;padding:6px 16px 0}
.al-lista .sub{font-size:12.5px;color:var(--muted);margin:0;padding:0 16px 6px}
.al-lista .mk{color:var(--accent)}
.harom-alairas{font-size:13px;color:var(--muted);margin:10px 0 22px}
@media(max-width:900px){
  .harom{display:block;border-bottom:0}
  .harom-k.bal,.harom-k.jobb{display:none}
  /* Подпись говорит о двух крайних карточках — на узком экране их нет
     (сверка сорок девятой, A11), и подпись уходит вместе с ними; её нижний
     отступ остаётся у карточки, иначе она слипается с демо ниже. */
  .harom-alairas{display:none}
  .harom{margin-bottom:22px}
  .harom-k.kozep{min-height:0;border-radius:14px}
}
/* Боковая карточка заходит под среднюю на 28 px — на столько же отступ
   текста с той стороны, иначе средняя съедает первую букву заголовка. */
.harom-k.bal{padding-right:52px}
.harom-k.jobb{padding-left:52px}

/* Мега-меню: четыре услуги в ряд и ряд заготовок под ними (2026.09.23).
   Заготовка приглушена и несёт метку — её видно, но с работающей услугой
   её не спутать. */
.mm-grid{grid-template-columns:repeat(4,1fr)}
.mm-eloke{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.mm-item.eloke-item .h{color:#c9ced6;font-weight:400;text-decoration:none}
.mm-item.eloke-item .mm-badge{background:transparent;border:1px solid #7d8591;color:#c9ced6;margin-left:0;margin-top:6px;display:table}
.tel-menu a.sub.eloke-item{color:#9aa2ae}
@media(max-width:760px){.mm-grid{grid-template-columns:1fr}}

/* Кнопка «Bejelentkezés» — теперь `<button>`, а не ссылка (2026.09.23). */
button.nav-cta{border:0;cursor:pointer}

/* Окно заявки на доступ по образцу dadata.ru: знак сверху, линия, поле,
   согласие, широкая кнопка. Одно поле вместо трёх — кабинета нет.
   Слой 200 — выше меню телефона (120–130) и мега-меню (110): окно всегда
   поверх всего, кроме полосы куки (`Фронтенд-N19`). */
.belepes-hatter{position:fixed;inset:0;background:rgba(20,24,32,.72);z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow-y:auto}
.belepes{position:relative;background:#fff;border-radius:10px;width:100%;max-width:560px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.belepes-x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:30px;line-height:1;color:#8a9099;cursor:pointer;padding:4px 8px}
.belepes-x:hover{color:var(--ink)}
.belepes-fej{text-align:center;padding:34px 40px 22px;border-bottom:1px solid var(--line)}
.belepes-fej img{height:44px;width:auto;display:inline-block}
.belepes-fej #belepes-cim{font-family:var(--head);font-weight:400;font-size:21px;margin:16px 0 6px;color:var(--ink)}
.belepes-magyarazat{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}
.belepes-urlap{padding:26px 48px 30px}
.belepes-mezo{display:block;border:1.5px solid var(--field-line);border-radius:6px;padding:8px 12px 6px}
.belepes-mezo:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.belepes-mezo span{display:block;font-size:13px;color:var(--muted)}
.belepes-mezo input{width:100%;border:0;outline:none;font-size:18px;padding:4px 0;font-family:var(--sans);color:var(--ink);background:transparent}
.belepes-sugo{font-size:13px;color:var(--muted);margin:6px 0 20px}
.belepes-pipa{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:#374151;cursor:pointer}
.belepes-pipa input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto}
.belepes-kuld{width:100%;margin-top:24px;border:0;cursor:pointer}
/* Имя для писем о новых функциях — под флажком, с отступом его текста (галочка 20px + зазор 10px); скрыто атрибутом hidden, поэтому display здесь не задаётся (`Кабинет-N7`). */
.belepes-nev{margin:14px 0 0 30px}
.belepes-nev .belepes-sugo{margin-bottom:0}
.belepes-hiba{color:#b42318;font-size:13.5px;margin:8px 0 0;min-height:1em}
.belepes-jog{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.5;text-align:center}
.belepes-jog a,.belepes-kesz a{color:var(--accent)}
.belepes-kesz{font-size:15px;line-height:1.6;margin:0;color:var(--ink)}
/* Фокус на текст ставит сценарий после отправки — это не элемент управления. */
.belepes-kesz:focus{outline:none}
@media(max-width:560px){.belepes-fej{padding:28px 20px 18px}.belepes-urlap{padding:22px 20px 24px}}

/* Страница «Egységesítés» (2026.09.23), первый экран по образцу
   dadata.ru/clean: имя крупно, строки «как ввели» гаснут кверху, стрелка
   ведёт к примеру. */
.hero.kozep-nagy{font-size:clamp(40px,5.4vw,76px);font-weight:400;letter-spacing:-.01em}
.nyers-sorok{margin:34px 0 4px;text-align:center}
.nyers-sorok p{font-size:clamp(22px,2.6vw,36px);font-style:italic;color:var(--ink);margin:0 0 6px;line-height:1.3}
.nyers-sorok p.halvany{color:#c3c8cf}
.le-nyil{display:block;width:52px;margin:6px auto 26px;color:#c3c8cf}
.le-nyil:hover{color:var(--muted)}
.le-nyil svg{width:52px;height:52px;display:block}
.negyes{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;margin:0 0 20px}
.h2.masodik{margin-top:26px}
.hero-in .lead a{color:var(--accent);text-decoration:none;border-bottom:1px dashed #9fc0f2}
@media(max-width:900px){.negyes{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.negyes{grid-template-columns:1fr}}
.belepes .btn.belepes-kuld{display:block;width:100%}
.belepes-mezo input::placeholder{color:#b3b9c2;opacity:1}

/* Страница «Ajánlások» по мотивам dadata.ru/suggestions (2026.09.23).
   План — docs/отчёты/План_страницы_Ajanlasok_2026-09-23.md. */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* картинка-пример: вся — ссылка к живому демо; при наведении накладка
   «Próbálja ki a saját címével». Только CSS — встроенный код запрещён CSP. */
a.minta-kep{display:block;max-width:1000px;margin:10px auto 22px;color:inherit;text-decoration:none;overflow:hidden}
a.minta-kep:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.minta-kep .fedo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:rgba(61,66,77,.88);color:#fff;font-family:var(--head);font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.01em;opacity:0;transition:opacity .18s ease}
.minta-kep .fedo svg{width:1em;height:1em;flex:0 0 auto}
.minta-kep:hover .fedo,.minta-kep:focus-visible .fedo{opacity:1}
/* на телефоне наведения нет — надпись видна всегда, полосой под картинкой */
@media(hover:none){.minta-kep .fedo{position:static;opacity:1;margin-top:14px;border-radius:9px;padding:12px 16px;font-size:17px}}
.kep-racs{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);gap:18px;align-items:start}
.kep-nyil{align-self:center;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}
.kep-nyil svg{width:44px;height:44px;display:block;margin:0 auto 8px;color:#9aa2ae}
.mezo-racs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.kep-alcim{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.kep-megj{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
@media(max-width:900px){.kep-racs{grid-template-columns:1fr}.kep-nyil svg{transform:rotate(90deg)}}
@media(max-width:760px){.kep-nyil,.kep-jobb{display:none}}
/* тёмная полоса живого демо; цвет свой — как подвал и мега-меню */
section.sotet:not(.alt){background:#3D424D;color:#e6eaf0}
/* белая рамка демо на тёмной полосе — свой тёмный текст: иначе светлый цвет
   полосы наследуется в список и карточку (контраст 1,2:1 — проверка 2026.09.24) */
.sotet .demo-doboz{color:var(--ink)}
/* подсказка на голубом фоне демо: --muted даёт там 4,2:1, мало для 13 px */
.demo-doboz .demo-sugo{color:#5f6673}
.sotet .h2{color:#fff}
.sotet .h2-sub{color:#c9ced6}
/* активная вкладка на тёмном — белая: зелёная с белым текстом ниже AA */
.demo-lab{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;font-size:13px;line-height:1.5}
.demo-lab p{margin:0}
.sotet .demo-lab{color:#c9ced6}
.sotet .demo-lab a{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.5)}
/* карточка ответа: уровень находки плашкой, пометки серым */
.row .v .szint-jel{font-size:11.5px;padding:3px 10px}
/* Пометка — под строкой своего поля и в своём столбце (`Фронтенд-N29`,
   2026.09.29); прежде — полосой под обоими столбцами, поперёк разделителя.
   Черта строки уходит под пометку: поле и его пометка читаются одним. */
.row.megjes{border-bottom:0;padding-bottom:2px}
.mezo-megj{padding:0 0 8px;border-bottom:1px solid #f4f6f8}
.mezo-megj p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.mezo-megj p + p{margin-top:2px}
.mezo-megj:last-child{border-bottom:0}
/* Источники плашками с окошком (`Фронтенд-N28`, 2026.09.29). Окошко
   открывается вверх: карточка обрезает всё, что выходит за её край
   (`overflow:hidden`), а над строкой «Forrás» места хватает всегда. */
/* Не помещаются рядом с подписью (узкий экран) — плашки уходят строкой
   ниже целиком, а не по одной: иначе последняя висит одна. */
.row.kartya-forras{flex-wrap:wrap;row-gap:6px}
.row .v.forras-v{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px 6px;margin-left:auto}
.forras-hely{position:relative;display:inline-block}
.forras-jel{font:inherit;font-size:12px;line-height:1;min-height:24px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;background:#f7f8fa;color:var(--ink);cursor:pointer}
.forras-jel:hover,.forras-jel:focus-visible,.forras-hely.nyitva .forras-jel{background:#eef2f7;border-color:#c9d3e0}
.forras-ablak{display:none;position:absolute;right:0;bottom:calc(100% + 6px);z-index:5;width:max-content;max-width:260px;padding:9px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 20px rgba(26,31,43,.12);font-size:12.5px;line-height:1.45;color:var(--muted);text-align:left;white-space:normal}
.forras-ablak b{display:block;color:var(--ink);font-weight:500;margin-bottom:2px}
.forras-ablak a{color:var(--accent);text-decoration:none}
.forras-hely:hover .forras-ablak,.forras-jel:focus-visible + .forras-ablak,.forras-hely.nyitva .forras-ablak{display:block}
/* Окошко достаётся и мышью, и клавиатурой (`Фронтенд-N33`, 2026.10.02).
   Мост — невидимая полоса от низа окошка до плашки: курсор, идущий от
   плашки к ссылке «Források és licencek», больше не падает в зазор 6 px и
   не теряет наведения. Клавиатура: окно держится, пока фокус внутри
   обёртки, — Tab с плашки на ссылку его не прячет. (`:has(:focus-visible)`
   проверен в Chromium и не годится: на переходе фокуса окно успевает
   скрыться, и фокус падает на страницу.) Мышь фокус на плашку не ставит —
   `app.js`, иначе после клика окно держал бы фокус и второй клик его не
   закрыл бы. */
.forras-ablak::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.forras-hely:focus-within .forras-ablak{display:block}
.api-jegyzet + .api-jegyzet{margin-top:10px}
/* «Fejlesztés alatt» — заготовки страницы услуги одним блоком внизу
   (`Фронтенд-N22`, п. 4). Стоит серой полосой после такой же серой, поэтому
   отделён линией; отступы меньше обычного раздела — блок короткий. */
section.fejlesztes{border-top:1px solid var(--line);padding-top:44px;padding-bottom:44px}
section.fejlesztes .lista{margin-top:14px}
section.fejlesztes .lista li b{color:var(--ink);font-weight:500}
.fejlesztes-megj{font-size:13.5px;color:#5f6673;margin:4px 0 0;line-height:1.5}

/* Бета и пилотные партнёры — тексты редакции владельца 2026.09.25 (`Фронтенд-N22`). */
.arak-most .bekezdes{font-size:14px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.arak-most .bekezdes + ul{margin-top:8px}
.pilot-lista{margin:0 0 14px;padding:0 0 0 20px;color:var(--muted);font-size:15px;line-height:1.7}
.pilot-jegyzet{font-size:14px;color:var(--muted);margin:0}

/* Отметка о существенной правке ÁSZF на главной (ÁSZF п. 8.4; пакет сорок девятой,
   Право-1). Стоит сразу после шапки, до первого экрана; висит с публикации до
   30-го дня после вступления в силу. Без кнопки «скрыть»: куки и localStorage
   на сайте нет. Класс, а не style= — CSP. */
.aszf-jelzes{max-width:1072px;margin:40px auto 48px;padding:14px 20px;border-left:3px solid var(--brand);
  background:#fff6f5;border-radius:0 8px 8px 0;font-size:15px;line-height:1.55;color:var(--ink)}
.aszf-jelzes p{margin:6px 0}
.aszf-jelzes ul{margin:6px 0;padding-left:22px}
.aszf-jelzes li{margin:4px 0}
.aszf-jelzes a{color:var(--accent)}
.aszf-jelzes a:focus-visible,.aszf-jelzes summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.aszf-jelzes summary{cursor:pointer;color:var(--accent);margin:6px 0}
@media(max-width:1120px){.aszf-jelzes{margin:40px 24px 40px}}
@media(max-width:600px){.aszf-jelzes{margin:32px 16px 32px;padding:12px 14px}}
/* Под меню (вариант 2 после вступления ÁSZF в силу: ÁSZF 8.4 «a kezdőoldal tetején», Фронтенд-N45) — прежние отступы шапки. */
nav + .aszf-jelzes{margin:16px auto 0}
@media(max-width:1120px){nav + .aszf-jelzes{margin:16px 24px 0}}
@media(max-width:600px){nav + .aszf-jelzes{margin:12px 16px 0}}

/* Ссылка «к содержимому» и области (`Фронтенд-N38`, 2026.10.03). Первое, что
   берёт фокус на каждой странице: Tab — ссылка видна в левом верхнем углу,
   Enter — переход в <main id="tartalom"> мимо меню. Без фокуса её не видно.
   `.sr-only` — текст для диктора без места на экране (живая область списка). */
.ugras{position:absolute;left:12px;top:-200px;z-index:300;background:#fff;color:var(--accent);font-size:15px;font-weight:500;padding:10px 16px;border-radius:6px;box-shadow:0 4px 16px rgba(20,30,50,.18);text-decoration:none}
.ugras:focus{top:12px;outline:3px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ДОКУМЕНТЫ — начало. Страницы-документы: памятка «Как подключить ключ API»
   (/api-kulcs-ru/, `Фронтенд-N40`, 2026.10.04) и документация API
   (/api-dokumentacio/, `Рост-N5`, 2026.10.04). Обе собираются сценариями
   (`scripts/build_client_guide.py`, `scripts/build_api_docs.py`, общая часть
   — `scripts/doc_pages.py`); правила отсюда сценарий памятки ещё и вставляет
   в файл для клиента, поэтому всё, что им нужно, — между «начало» и
   «конец», и каждое правило начинается с `utm-`. Цвета — переменные сайта:
   номера шагов — синий акцент, знак «!» последнего раздела — красный бренд
   (владелец 2026.10.04: бордовый «!» рядом с красными номерами путал). Код
   — тёмный, как `.endpoint` главной; кнопка копирования — прозрачная на
   тёмном, после копирования — голубая, как `.endpoint .m`. */
.utm-al{color:var(--muted);margin:2px 0 20px}
.utm-kartya{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px 24px;margin:16px 0}
.utm-kartya > :last-child{margin-bottom:0}
.utm-tart ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 16px}
.utm-tart li{margin:0}
.utm-tart a{display:flex;align-items:center;gap:10px;text-decoration:none}
.utm-tart a:hover .utm-pont{text-decoration:underline}
.utm-szam{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font:600 16px/1 var(--sans)}
.utm-tart .utm-szam{width:24px;height:24px;font-size:13px}
/* «!» — крупно и жирно: белое на красном бренде — 3,6:1, а это годится
   только для крупного текста (WCAG 1.4.3: от 14 pt жирного). */
.utm-szam.utm-figyelem{background:var(--brand);font-size:20px;font-weight:700}
.utm-tart .utm-szam.utm-figyelem{font-size:19px}
.utm-lepes{scroll-margin-top:16px}
.utm-lepes h2{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.utm-lepes h3{margin:22px 0 8px}
.utm-kod{margin:12px 0 14px;border-radius:10px;overflow:hidden;background:#0f1524}
.utm-kod-fej{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1b2436;color:#c7d2e6;padding:8px 10px 8px 16px;font-size:14px;line-height:1.4}
.utm-masol{flex:0 0 auto;font:500 14px/1 var(--sans);color:#fff;background:transparent;border:1px solid rgba(199,210,230,.5);border-radius:8px;padding:8px 14px;min-height:34px;cursor:pointer}
.utm-masol:hover{background:rgba(255,255,255,.08);border-color:#c7d2e6}
.utm-masol:focus-visible{outline:3px solid #7dd3fc;outline-offset:2px}
.utm-masol.kesz{background:#7dd3fc;border-color:#7dd3fc;color:#0f1524}
.utm-kod pre{margin:0;padding:14px 16px;color:#c7d2e6;font:13.5px/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:break-word;overflow-x:auto;tab-size:4}
.utm-kod pre.utm-forras{white-space:pre;overflow-wrap:normal}
.utm-kod pre.utm-forras:focus-visible{outline:3px solid #7dd3fc;outline-offset:-3px}  /* рамка с фокусом — листается клавишами */
.utm-kod pre code{background:none;padding:0;border-radius:0;font:inherit;color:inherit}
.utm-nw{white-space:nowrap}
.utm-var{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:8px 12px;margin:-4px 0 14px}
.utm-cimke{display:inline-block;background:var(--accent);color:#fff;font-size:12px;font-weight:600;border-radius:4px;padding:1px 7px;margin-right:6px;text-transform:uppercase;letter-spacing:.03em}
.utm-megj{border-radius:0 8px 8px 0;padding:12px 16px;margin:14px 0}
.utm-megj.utm-tilos{border-left:3px solid var(--brand);background:#fff6f5}
.utm-megj.utm-info{border-left:3px solid var(--accent);background:var(--accent-soft)}
.utm-megj p{margin:0}
.utm-megj .utm-megj-cim{font-weight:600;margin-bottom:4px}
.utm-kicsi{font-size:14px;color:var(--muted)}
.utm-allapot{position:absolute;left:-9999px;top:0}
@media(max-width:600px){.utm-kartya{padding:16px}.utm-kod-fej{flex-direction:column;align-items:stretch}.utm-masol{width:100%}.utm-kod pre{font-size:12.5px}}
@media print{.utm-masol,.utm-tart{display:none}.utm-kod{background:#f5f5f5}.utm-kod pre{color:#111}.utm-kod-fej{background:#eee;color:#111}}
/* Путь точки в заголовке раздела документации — мельче заголовка: кегль
   кода по умолчанию (14 px) рядом с заголовком 21 px читался бы сноской. */
.utm-lepes h2 code{font-size:.85em}
/* Таблицы документации на узком экране — карточками (`build_api_docs.py`,
   2026.10.04): таблицей на 390 px шире рамки были 5 из 12, на 320 px — 10 из
   12. Строка — карточка, подпись столбца — из `data-label` над ячейкой;
   строка заголовков скрыта только с экрана — диктор её читает, а подпись
   помечена пустым замещающим текстом («/ ""»), чтобы не звучала дважды
   (где эта запись не понята, остаётся первое правило `content`). */
@media(max-width:600px){
  .utm-tabla table,.utm-tabla tbody,.utm-tabla tr,.utm-tabla td{display:block;width:auto}
  .utm-tabla tr:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .utm-tabla tr{border:1px solid var(--line);border-radius:8px;background:#fff;margin:0 0 10px;padding:6px 0}
  main .utm-tabla td{border:0;padding:5px 12px}
  .utm-tabla td:first-child{font-weight:600}  /* первая ячейка — заголовок карточки */
  .utm-tabla td::before{content:attr(data-label);content:attr(data-label) / "";display:block;font-size:13px;font-weight:600;color:var(--muted)}
  .utm-tabla code{overflow-wrap:anywhere}
}
/* ДОКУМЕНТЫ — конец */

/* ================================================================
   ОТРАСЛИ: пункт «Megoldások» и страница «Webáruházaknak» (`Рост-N5`,
   решение владельца 2026.10.04 «да на 1–5; имена карточек во
   множественном; Megoldások выпадающий»). План и источники текстов —
   docs/отчёты/План_страницы_Webaruhazaknak_2026-10-04.md.
   ================================================================ */
/* Панель «Megoldások» — узкая карточка под своей кнопкой, вид — как у
   мега-меню. Обёртка высотой с шапку, чтобы панель вставала ровно под ней,
   как мега-меню. Панель лежит внутри `.nav-menu`, поэтому правила ссылок
   шапки (кегль, линия снизу, межстрочный 1) здесь сняты. */
.nav-drop{position:relative;height:72px;display:flex;align-items:center}
.megold-menu{position:absolute;top:100%;left:-32px;width:400px;background:#3D424D;border-radius:4px;box-shadow:0 8px 24px rgba(0,0,0,.25);padding:24px 32px 20px;display:none;z-index:110;text-align:left;line-height:1.5}
.nav.megold-open .megold-menu{display:block}
.nav-menu .megold-menu a{font-weight:400;font-size:inherit;letter-spacing:normal;line-height:inherit;padding:0;border-bottom:0;color:#dfe3e9}
.nav-menu .megold-menu a:hover{color:#fff;border-bottom:0}
/* фокус на тёмной панели — светло-синий, как в подвале: синий сайта там ниже 3:1 */
.nav-menu .megold-menu a:focus-visible{outline:2px solid #8fb4f5;outline-offset:3px;border-radius:2px}
.megold-masik{margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--sans);font-size:13px;color:#c9ced6}
.nav-menu .megold-masik a{text-decoration:underline;text-underline-offset:2px}

/* Карточка отрасли со своей страницей — ссылка целиком (главная, «Kinek
   hasznos»). Рамка при наведении — тенью внутрь: размер карточки не
   меняется, соседние карточки не сдвигаются. */
.kek-kartya.kek-link{display:block;text-decoration:none;color:inherit}
.kek-kartya.kek-link:hover{box-shadow:inset 0 0 0 1px #9fc0f2}
.kek-kartya.kek-link:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.kek-kartya .kek-tovabb{margin-top:16px;color:var(--accent);font-weight:500}
.kek-kartya.kek-link:hover .kek-tovabb{text-decoration:underline;text-underline-offset:3px}

/* Страница отрасли: две карточки «что меняется» */
.kek-racs.ketto{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.kek-racs.ketto{grid-template-columns:1fr}}
.feladat-szoveg{font-size:17px;line-height:1.65;color:var(--ink);max-width:72ch;margin:0}

/* Примеры «набрано — возвращено» на тёмной полосе: белые карточки, поле
   набора — как рисунок поля `.al-mezo`, уровень — плашкой, как в карточке
   ответа живого демо. Ответы — из рабочей службы, дата на странице. */
.pelda-racs{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pelda-kartya{background:#fff;color:var(--ink);border-radius:12px;padding:22px 24px}
.pelda-cimke{font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.pelda-be{background:#fff;border:1.5px solid var(--field-line);border-radius:10px;padding:11px 14px;font-size:16px;color:var(--ink);margin:0 0 16px;overflow-wrap:anywhere}
button.pelda-be{font:inherit;width:100%;text-align:left;cursor:pointer;font-family:var(--sans)}
button.pelda-be:hover,button.pelda-be:focus-visible{border-color:var(--brand)}
.pelda-ki{font-family:var(--sans);font-weight:500;font-size:17px;line-height:1.45;margin:0 0 8px;overflow-wrap:anywhere;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
/* плашка уровня, перенесённая на узком экране, встаёт к левому краю, без отступа */
.pelda-jel{font-size:14px;line-height:1.5;color:#8a5a12;background:#fdf3e1;border-radius:8px;padding:8px 12px;margin:0 0 8px}
.pelda-forras{font-size:13px;color:var(--muted);margin:0}
.pelda-mit{font-size:14.5px;line-height:1.55;color:#374151;margin:14px 0 0;padding-top:14px;border-top:1px solid #eef2f7}
.sotet .h2-sub a{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.5)}
@media(max-width:900px){.pelda-racs{grid-template-columns:1fr}}
@media(max-width:560px){.pelda-kartya{padding:16px}}
/* пометка без предупреждения: этаж и дверь — сведение, не ошибка */
.pelda-jel.semleges{color:#374151;background:#eef2f7}
/* Шапка с двумя выпадающими пунктами шире прежней: логотип, меню и кнопка
   помещаются в поля шапки только от 907 px (замер 2026.10.04, `Рост-N5`;
   прежняя шапка — от 782 px). До 960 px, с запасом, — гамбургер, как на
   телефоне: иначе на 761–906 px шапка вылезает за край экрана или наезжает
   на поле. Держит проверка `scripts/a11y_check.py` («шапка в полях»). */
@media(max-width:960px){.nav-menu,.megamenu,.login,.nav-cta{display:none}.burger{display:flex}}
/* Блок запросов: длинная строка запроса на узком экране переносится внутри,
   а не раздвигает столбец и страницу (на 320 px строка «GET /suggest?q=…»
   страницы отрасли шире поля на 24 px; на «Címkiegészítés» — на 8 px, её
   прятал отступ раздела). Где строка помещается, ничего не меняется. */
.endpoint{overflow-wrap:anywhere}
/* Заголовок из одного длинного слова («Webáruházaknak») кеглем 40 px шире
   телефона 320 px: на экранах до 400 px кегль идёт от ширины экрана. */
@media(max-width:400px){.hero.kozep-nagy.hero-hosszu{font-size:clamp(30px,10.5vw,40px)}}