/* Общий дизайн «Багажная бирка» (23.10.2026) — один на весь сайт: общие страницы, Авито и разделы сервисов.
   Здесь цвета, шрифты, текст, кнопки, таблицы, вопросы, шапка со строкой сервисов, бирки сервисов и подвал (классы hb-*: inc/chrome.php).
   Блоки самих страниц — в assets/style.css общего сайта и в <раздел>/assets/style.css, на тех же переменных. */
:root{
  --bg:#FBF8F3;--surface:#fff;--band:#F2E8D9;--ink:#15232E;--ink2:#2C3B47;--muted:#596875;--line:#E6DDCE;--line2:#CFC3AE;
  --pri:#0B5D8A;--pri-h:#094B70;--pri-l:#E3EEF5;--acc:#D9452C;--acc-btn:#C23A22;--acc-h:#A93019;--gold:#F2B544;--ok:#2E7D4F;--link:#0B5D8A;
  --head:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:16px;--shadow:0 1px 2px rgba(21,35,46,.06),0 14px 30px -24px rgba(21,35,46,.45);
  --gut:clamp(16px,3vw,48px);color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--sans);font-variant-numeric:lining-nums}
p,ul,ol,figure{margin:0}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--acc-btn)}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--head);color:var(--ink)}
h1{font-weight:800;font-size:clamp(30px,3.8vw,56px);line-height:1.1;letter-spacing:-.01em;margin:6px 0 16px}
h2{font-weight:700;font-size:clamp(22px,2vw,30px);line-height:1.2;margin:0 0 20px}
h3{font-weight:700;font-size:19px;line-height:1.35;margin:24px 0 8px}
.wrap,.hb-wrap{position:relative;max-width:1560px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
main{display:block;padding-bottom:8px}
main>section{margin-top:clamp(44px,4.6vw,72px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:100;background:#fff;padding:4px 10px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
[hidden]{display:none!important}

/* текст страницы */
.crumbs{padding-top:18px;font:500 14px/1.5 var(--sans);color:var(--muted)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--pri)}
.crumbs .sep{margin:0 8px;color:var(--line2)}
.page-head{padding-top:8px}
.lead{max-width:62ch;font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--ink2)}
.prose{max-width:46em}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+ol,.prose ol+p{margin-top:16px}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:6px}
.prose li::marker{color:var(--acc)}
.wrap.prose{max-width:1560px}
.wrap.prose>p,.wrap.prose>ul,.wrap.prose>ol{max-width:46em}
.num{font:500 16px/1.5 var(--mono)}
.muted{color:var(--muted)}

/* кнопки: обычная — синий контур, главная и кнопки кодов — коралловая заливка */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 18px;border:1.5px solid var(--pri);border-radius:999px;background:transparent;color:var(--pri);font:600 15px/1.25 var(--sans);text-align:center;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--pri);color:#fff}
.btn-main{min-height:48px;padding:10px 24px;font-size:16px}
.btn-main,.btn-hot{background:var(--acc-btn);border-color:var(--acc-btn);color:#fff}
.btn-main:hover,.btn-hot:hover{background:var(--acc-h);border-color:var(--acc-h);color:#fff}
.stamp{display:inline-block;margin-left:6px;padding:3px 9px;border-radius:999px;background:var(--acc-btn);color:#fff;font:600 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:1px}

/* таблицы в тексте */
.tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.tbl{width:100%;border-collapse:collapse}
.tbl th,.tbl td{padding:12px 16px;text-align:left;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--line)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl th{background:var(--band);font:600 12px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.tbl td:first-child{font-weight:600}

/* вопросы: карточки с номером на жёлтом кружке */
.faq ol{list-style:none;margin:0;padding:0;counter-reset:q;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.faq li{counter-increment:q;position:relative;padding:18px 22px 18px 68px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow)}
.faq li::before{content:counter(q);position:absolute;left:20px;top:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--ink);font:700 14px/1 var(--head)}
.faq b{display:block;font-weight:600;font-size:17px;line-height:1.45}
.faq li p{margin-top:6px;color:var(--ink2)}
.related ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;max-width:1240px}
.related li{padding:12px 0;border-bottom:1px solid var(--line)}
.related a{font-weight:600}

/* шапка: знак и строка сервисов, ниже меню текущего раздела */
.hb-top{background:var(--surface);border-bottom:1px solid var(--line)}
.hb-row{display:flex;align-items:center;gap:12px 28px;padding-top:14px;padding-bottom:14px}
.hb-logo{flex:none;display:inline-flex;align-items:center}
/* знак: синяя багажная бирка с люверсом */
.hb-mark{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 12px;border-radius:6px 14px 14px 6px;background:var(--pri);color:#fff;font:700 15px/1 var(--head);white-space:nowrap}
.hb-mark::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 3px var(--gold)}
.hb-logo:hover .hb-mark{background:var(--pri-h)}
/* строка сервисов не прокручивается вбок: на узком экране переносится, на телефоне — пять ячеек в ряд */
.hb-svc{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.hb-svc-short{display:none}
.hb-svc a{flex:none;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:500 15px/1.3 var(--sans);white-space:nowrap}
.hb-svc a:hover{border-color:var(--pri);color:var(--ink)}
.hb-svc a[aria-current]{border-color:var(--pri);box-shadow:inset 0 0 0 1px var(--pri);background:var(--pri-l)}
.hb-svc img{width:18px;height:18px;flex:none}
.hb-menu-bar{background:var(--bg);border-bottom:1px solid var(--line)}
.hb-menu{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;padding-top:9px;padding-bottom:9px}
.hb-menu b{font:600 13px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hb-menu a{padding:3px 0;border-bottom:2px solid transparent;color:var(--ink);font-weight:500}
.hb-menu a:hover{color:var(--pri)}
.hb-menu a[aria-current]{border-bottom-color:var(--pri)}

/* бирки сервисов: на главной и внизу страниц сервисов. Форма и тень — у ::after и у самой ссылки (drop-shadow повторяет срезанные углы) */
.hb-tags{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;padding:28px;background:var(--band);border-radius:24px}
.hb-tags.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hb-tag{position:relative;z-index:0;display:flex;flex-direction:column;gap:4px;padding:40px 20px 18px;color:var(--ink);filter:drop-shadow(0 6px 10px rgba(21,35,46,.13));transition:transform .15s}
.hb-tag::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--surface);border-radius:10px;clip-path:polygon(18% 0,82% 0,100% 16%,100% 100%,0 100%,0 16%)}
.hb-tag::before{content:"";position:absolute;top:13px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--band);box-shadow:inset 0 0 0 2px var(--gold)}
.hb-tag:nth-child(odd){transform:rotate(-1.2deg)}
.hb-tag:nth-child(even){transform:rotate(1.2deg)}
.hb-tag:hover{transform:translateY(-3px);color:var(--ink)}
.hb-tag-name{display:flex;align-items:center;gap:8px;font:600 16px/1.3 var(--sans)}
.hb-tag-name img{width:20px;height:20px;flex:none}
.hb-tag-val{margin-top:8px;font:800 clamp(24px,2.2vw,34px)/1.05 var(--head);color:var(--acc);white-space:nowrap}
.hb-tag-val small{font:600 14px/1 var(--sans);color:var(--muted)}
.hb-tag-n{color:var(--muted);font-size:15px}
.hb-tag-go{margin-top:auto;padding-top:12px;color:var(--link);font-weight:600;font-size:15px}
.hb-tag:hover .hb-tag-go{color:var(--acc-btn)}
.hb-tag.is-none .hb-tag-val{color:var(--line2)}

/* подвал */
.hb-foot{margin-top:clamp(56px,6vw,96px);padding:44px 0 30px;background:#0B4A70;color:#EAF2F7;font-size:15px;line-height:1.6}
.hb-foot-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 40px}
.hb-foot-h{margin-bottom:12px;font:600 13px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#A9C3D4}
.hb-foot ul{list-style:none;margin:0;padding:0}
.hb-foot li+li{margin-top:6px}
.hb-foot a{color:#EAF2F7}
.hb-foot a:hover{color:var(--gold)}
.hb-foot li img{width:16px;height:16px;margin-right:8px;vertical-align:-3px}
.hb-foot-low{margin-top:32px;padding-top:18px;border-top:1px solid rgba(234,242,247,.18);color:#A9C3D4;font-size:14px}

@media (max-width:1100px){
  .hb-row{flex-wrap:wrap}
  .hb-svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-left:0;width:100%}
  .hb-svc a{justify-content:center;min-height:44px;padding:6px 10px;line-height:1.2;text-align:center;white-space:normal}
  .hb-tags{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hb-foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hb-tags.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body{font-size:16px}
  .hb-svc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%}
  .hb-svc a{flex-direction:column;justify-content:center;gap:4px;min-height:54px;padding:6px 2px;border-radius:12px;font-size:12px;line-height:1.15;text-align:center;white-space:normal}
  .hb-svc img{width:22px;height:22px}
  .hb-svc-full{display:none}
  .hb-svc-short{display:inline}
  .hb-menu{gap:2px 18px}
  .hb-menu b{display:none}
  .hb-menu a{font-size:15px}
  .hb-tags,.hb-tags.is-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px 14px;border-radius:18px}
  .hb-tag{padding:36px 14px 14px}
  .hb-tag-name{display:block;font-size:15px}
  .hb-tag-name img{display:block;margin-bottom:6px}
  .hb-tag-val{font-size:20px;white-space:normal}
  .faq ol,.related ul{grid-template-columns:1fr}
  .faq li{padding:16px 16px 16px 60px}
  .faq li::before{left:14px}
  .tbl th,.tbl td{padding:10px 12px}
}
@media (max-width:520px){
  .hb-foot-in{grid-template-columns:1fr}
}
@media (max-width:360px){
  .hb-svc{gap:3px}
  .hb-svc a{padding:6px 0;font-size:10.5px;letter-spacing:-.01em}
}