/* спільні стилі підсторінок (винесено з інлайну 2026-08-14, одразу після main.css): docs/CSS-NOTES.md */
/* only what main.css has no opinion about yet — the prose bits of a service page */
.sub-hero{ position:relative; background:var(--night,#0f1728); color:#fff; padding:76px 24px 64px; }
.sub-hero .in{ max-width:1060px; margin:0 auto; }
.sub-hero h1{ font-size:44px; line-height:1.08; margin:0 0 14px; }
.sub-hero .lead-w{ font-size:19px; color:var(--on-dark,#e8ecf3); max-width:60ch; margin:0 0 24px; }
.sub-hero .hero-trust{ margin-top:26px; }
.sub-hero .hero-split{ grid-template-columns:300px 1fr; gap:40px; align-items:center; }
/* межа 768 — свідомо: sizes портрета (768) на 133 сторінках; портрет у потоці — docs/CSS-NOTES.md */
@media (max-width:768px){
  .sub-hero .hero-split{ display:block; }
  /* a7-067: docs/CSS-NOTES.md */
  .sub-hero .hero-pic{ position:static; width:auto; margin:0 0 16px;
    display:flex; align-items:center; gap:12px; }
  .sub-hero .hero-pic img{ width:76px; height:76px; aspect-ratio:1; border-radius:50%; flex:0 0 auto; }
  .sub-hero .hero-pic figcaption{ display:block; position:static; margin:0; font-size:14px; color:var(--on-dark-2,#aab4c5); }
}
.crumbs-band{ background:var(--wash); } /* a7-084: колір першої секції під смужкою */
/* хлібні крихти — теж nav, скидання шкіри шапки: docs/CSS-NOTES.md */
.crumbs{ position:static; z-index:auto; background:none; backdrop-filter:none; min-height:0;
  max-width:1060px; margin:0 auto; padding:16px 24px 0; font-size:14px; color:var(--muted); }
.crumbs ol{ list-style:none; margin:0; padding:0; }
.crumbs li{ display:inline; }
.crumbs li:not(:first-child)::before{ content:"\203A"; margin:0 7px; color:var(--muted); }
.prose{ max-width:66ch; margin-left:auto; margin-right:auto; text-align:left; }
.prose p{ margin:0 0 14px; }
ul.checks{ list-style:none; padding:0; margin:0 auto; max-width:66ch; text-align:left; }
ul.checks li{ position:relative; padding-left:28px; margin:0 0 10px; }
ul.checks li::before{ content:"\2713"; position:absolute; left:0; color:var(--ok); font-weight:700; }
.pricebox{ max-width:660px; margin:22px auto 0; border:1px solid var(--band-line, var(--line)); border-radius:var(--r-block); background:#fff; padding:20px 22px; text-align:left; }
.pricebox b, .pricebox strong{ color:var(--ink); }
/* таблиці — один компонент .gk-table у main.css (a7-194) */
.faq dt{ font-weight:600; color:var(--ink); margin:16px 0 4px; }
.faq dd{ margin:0 0 10px; color:var(--body); max-width:66ch; }
/* проза, списки й FAQ — ліворуч: docs/CSS-NOTES.md */
dl, dt, dd, ul.checks, ul.checks li, .prose, .prose p, .prose li{ text-align:left; }
/* a7-043: docs/CSS-NOTES.md */
.section > p, .section > .sec-intro{
  max-width:min(66ch, 100%); margin-left:auto; margin-right:auto; text-align:left;
}
/* короткі ліди по центру; .note сюди НЕ входить — docs/CSS-NOTES.md */
.section > p.lead, .section > p.sub{ text-align:center; }
/* клас попереду обов'язковий: .section > * дає 1060px — docs/CSS-NOTES.md */
/* FAQ dl шириною тексту 66ch: docs/CSS-NOTES.md */
.section dl{ max-width:min(66ch, 100%); margin-left:auto; margin-right:auto; }
.section dl dd{ max-width:none; }
/* короткі списки-посилання max-content: docs/CSS-NOTES.md */
.section ul.checks{ width:max-content; max-width:min(66ch, 100%); box-sizing:border-box;
  margin-left:auto; margin-right:auto; }
dt{ font-weight:600; color:var(--ink); margin:18px 0 4px; }
dd{ margin:0 0 10px; color:var(--body); max-width:66ch; }
/* the old skin's button classes died with its stylesheet — re-dress them here */
.cta-row, .endcta .cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }
/* форма a.btn — у main.css поруч із .header-cta-btn: одна на всі кнопки дзвінка (a7-194) */
a.btn-call{ background:var(--gold); color:var(--ink); }
a.btn-call:hover{ filter:brightness(.95); text-decoration:none; }
a.btn-quote{ background:#fff; color:var(--accent); border:1px solid var(--accent); }
a.btn-quote:hover{ background:var(--wash); text-decoration:none; }
.endcta{ text-align:center; }
/* a7-045: docs/CSS-NOTES.md */
.gk-midchat{ max-width:820px; margin:34px auto 0; padding:20px; border:1px solid #dde3ea;
  border-radius:var(--r-card); background:#fff; text-align:center; }
.gk-midchat p{ margin:0; color:var(--body); max-width:66ch; margin-left:auto; margin-right:auto; }
.gk-midchat .cta-row{ margin-top:14px; }
/* .gk-midchat на вузькому телефоні: docs/CSS-NOTES.md */
@media (max-width:480px){ .gk-midchat{ padding:18px 14px; }
  .gk-midchat .cta-row a.btn{ padding:0 16px; font-size:15px; } }
@media (max-width:767px){ .sub-hero{ padding:56px 20px 48px; } .sub-hero h1{ font-size:32px; } }
/* a7-029: docs/CSS-NOTES.md */
.send-me{ max-width:820px; margin:26px auto; padding:20px 22px; border:1px solid #dde3ea;
  border-radius:var(--r-card); background:#fff; text-align:left; }
/* a8-template-hygiene: docs/CSS-NOTES.md */
.send-me :is(h2,h3){ margin:0 0 10px; font-size:1.12em; color:var(--ink);
  font-weight:700; line-height:inherit; letter-spacing:inherit; text-align:inherit; text-wrap:inherit; }
.send-me ol{ margin:0; padding-left:1.2em; color:var(--body); line-height:1.6; }
.send-me ol li{ margin:0 0 7px; }
.send-me .send-me-cta{ margin:14px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:480px){ .send-me{ padding:18px 14px; }
  .send-me .send-me-cta a.btn{ padding:0 16px; font-size:15px; } }
/* a7-088: docs/CSS-NOTES.md */
.gk-tbl-cap{ max-width:min(66ch,100%); margin:12px auto 2px; text-align:left;
  font-size:.92em; color:var(--muted); }
.gk-tbl-hint{ display:none; margin:0 auto 4px; max-width:min(66ch,100%); text-align:left;
  font-size:.85em; color:var(--muted); }
@media (max-width:900px){ .gk-tbl-hint{ display:block; } }
/* a7-194: docs/CSS-NOTES.md */
.section > p.gk-tbl-cap, .section > p.gk-tbl-hint{ max-width:min(820px, 100%); }

/* a7-144: docs/CSS-NOTES.md */
.hub-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:14px 0 6px; }
.hub-grid .mk-row{ flex:0 1 calc((100% - 3*12px)/4); box-sizing:border-box; display:flex;
  flex-direction:column; align-items:center; gap:4px; padding:12px 8px 10px; text-align:center;
  background:#fff; border:1px solid var(--band-line,#dde3ea); border-radius:var(--r-card); }
.hub-grid .mk-brand{ display:flex; flex-direction:column; align-items:center; gap:6px;
  min-height:44px; font-weight:700; font-size:.92rem; line-height:1.3; color:var(--ink); }
.hub-grid .mk-brand:hover{ color:var(--accent); }
.hub-grid .mk-brand img{ width:52px; height:52px; }
.hub-grid .mk-models{ font-size:.85rem; color:var(--muted); line-height:1.45; }
/* hub-grid на ПК — візуальний блок ~1040px: docs/CSS-NOTES.md */
@media (min-width:1024px){
  .prose .hub-grid{ width:min(1040px, calc(100vw - 48px)); margin-left:calc(50% - min(520px, calc(50vw - 24px))); }
  .hub-grid .mk-row{ flex-basis:calc((100% - 5*12px)/6); }
}
@media (max-width:760px){ .hub-grid .mk-row{ flex-basis:calc((100% - 2*12px)/3); } }
@media (max-width:520px){ .hub-grid{ gap:6px; } .hub-grid .mk-row{ flex-basis:calc((100% - 2*6px)/3); padding:10px 4px 8px; }
  .hub-grid .mk-brand{ font-size:.85rem; } .hub-grid .mk-brand img{ width:40px; height:40px; } }

/* a7-146: docs/CSS-NOTES.md */
.gk-topics{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:12px 0 0; }
.gk-topics li{ margin:0; }
.gk-topics a{ display:inline-flex; align-items:center; min-height:44px; padding:8px 16px;
  border:1px solid var(--field-line,#7f8693); border-radius:var(--r-pill); background:#fff;
  color:var(--ink); font-weight:600; font-size:.92rem; }
.gk-topics a:hover{ border-color:var(--accent); color:var(--accent); }
.gk-totop{ margin:18px 0 0; font-size:.92rem; }

/* a7-096 (a7-095, a7-098, a7-194): правила в КІНЦІ файлу свідомо — docs/CSS-NOTES.md */

/* --- фото робіт (.gkjobs): 41 сторінка --- */
.gkjobs{max-width:1040px;margin:8px auto 26px}
/* a8-a11y-small: docs/CSS-NOTES.md */
.gkjobs-h3{text-align:center;font-size:1.45em;color:var(--ink);margin:0 0 4px;padding-top:26px;border-top:1px solid var(--band-line, var(--line));
  font-weight:700;line-height:inherit;letter-spacing:inherit;text-wrap:inherit}
.gkjobs-sub{text-align:center;color:var(--muted);font-size:.92rem;margin:0 auto 16px;max-width:640px}
.gkjobs-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch}
.gkjobs-card{flex:0 0 auto;width:62vw;max-width:250px;scroll-snap-align:center}
/* як .gkv-media на головній — ті самі фото: медіа-плитка = картка (--r-card), фон --wash, без тіні */
.gkjobs-media{width:100%;aspect-ratio:3/4;border-radius:var(--r-card);overflow:hidden;background:var(--wash)}
.gkjobs-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.gkjobs-cap{font-size:.85rem;color:var(--body);font-weight:600;margin:8px 4px 0;line-height:1.3;text-align:center}
/* .gkjobs у .prose — центр підзаголовка й підписів: docs/CSS-NOTES.md */
.gkjobs .gkjobs-sub{text-align:center;margin-left:auto;margin-right:auto}
.gkjobs .gkjobs-cap{text-align:center}
/* .gkjobs-row: одна сітка від 900px: docs/CSS-NOTES.md */
@media (min-width:900px){
  .gkjobs-row{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;overflow:visible;
    width:min(932px, calc(100vw - 48px)); margin-left:calc(50% - min(466px, calc(50vw - 24px)))}
  .gkjobs-card{width:auto;max-width:none}
}

/* --- картки типів ключів: .ktg (41 сторінка) і .ktp (/pricing/) — docs/CSS-NOTES.md --- */
.ktg-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 6px}
.ktp-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:12px 0 8px}
.ktg-card, .ktp-card{box-sizing:border-box;display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--band-line, var(--line));border-radius:var(--r-card);padding:7px 7px 9px;transition:border-color .15s ease}
.ktg-card{flex:0 1 132px}
.ktp-card{flex:0 1 calc((100% - 30px)/4)}
.ktg-card:hover, .ktp-card:hover{border-color:var(--accent)}
/* радіус фокуса карток типів ключів: docs/CSS-NOTES.md */
.ktg-card:focus-visible, .ktp-card:focus-visible{border-color:var(--accent);border-radius:var(--r-card)}
.ktg-card img, .ktp-card img{width:100%;object-fit:contain;border-radius:var(--r-img);display:block;background:var(--wash)}
.ktg-card img{height:70px}
.ktp-card img{height:76px}
.ktg-card span, .ktp-card span{margin-top:6px;font-weight:700;color:var(--accent);font-size:.85em;text-align:center;line-height:1.2}
@media (max-width:600px){ .ktp-card{flex-basis:calc((100% - 20px)/3)} }
@media (max-width:380px){ .ktp-card{flex-basis:calc((100% - 10px)/2)} }

/* --- ключі за роками (.kby): 9 сторінок — docs/CSS-NOTES.md --- */
.kby{list-style:none;padding:0;margin:10px auto 0;max-width:820px;text-align:left}
.kby li{display:flex;flex-wrap:wrap;gap:2px 10px;padding:10px 0;border-top:1px solid var(--band-line, var(--line));line-height:1.55}
.kby li:first-child{border-top:0}
.kby .yr{flex:0 0 210px;font-weight:700;color:var(--ink)}
.kby .kt{flex:1 1 280px;color:var(--body)}
@media (max-width:600px){ .kby .yr{flex:1 1 100%} }
.kby-price{max-width:820px;margin:12px auto 0;font-weight:600;color:var(--ink)}
.kby-note{max-width:820px;margin:6px auto 0;font-size:.92em;color:var(--muted)}

/* --- таблиці ключів за роками: тепер один .gk-table у main.css (a7-194) --- */

/* --- одне відео (.gkv1): 11 сторінок марок і моделей; ті самі правила в blog.css — docs/CSS-NOTES.md --- */
.gkv1{margin:22px auto 4px;max-width:260px;text-align:center}
.gkv1-media{position:relative;width:230px;max-width:100%;margin:0 auto;aspect-ratio:9/16;border-radius:var(--r-card);overflow:hidden;background:#000}
.gkv1-play{margin:0;padding:0;border:0;background:none;cursor:pointer;display:block;width:100%;height:100%}
.gkv1-media img{width:100%;height:100%;object-fit:cover;display:block}
.gkv1-play:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.gkv1-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px}
.gkv1-media iframe{width:100%;height:100%;border:0;display:block}
.gkv1-cap{font-size:.85rem;color:var(--body);font-weight:600;margin:8px 2px 0;line-height:1.3}
/* vis-106: на телефоні підпис під відео не дрібніший за 14px (a7-189); «more on my channel» не рветься навпіл */
@media (max-width:767px){.gkv1-cap{font-size:.875rem}}
.gkv1-cap a{white-space:nowrap}
/* a8-video-player: docs/CSS-NOTES.md */
html:not(.gk-js) .gkv1-media{display:none}
.gkv1-ns{margin:8px 2px 0;font-weight:600;line-height:1.3}

/* a7-084 · A1; межа 768/769 фото і підкладки — свідомо (прелоади в <head>): docs/CSS-NOTES.md */
.sub-hero{ position:relative; isolation:isolate; overflow:hidden;
  background:var(--night,#0f1728) url(/images/hero-shop-large-v2.webp) center/cover no-repeat; }
@media (max-width:1200px){ .sub-hero{ background-image:url(/images/hero-shop-medium.webp); } }
@media (max-width:1200px) and (min-resolution:1.5dppx){ .sub-hero{ background-image:url(/images/hero-shop-large-v2.webp); } }
@media (max-width:768px){ .sub-hero{ background-image:url(/images/hero-shop-small.webp); } }
@media (max-width:768px) and (min-resolution:1.5dppx){ .sub-hero{ background-image:url(/images/hero-shop-medium.webp); } }
.sub-hero::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg, rgba(10,16,30,.95) 0%, rgba(10,16,30,.86) 40%, rgba(10,16,30,.77) 75%, rgba(10,16,30,.68) 100%); }
@media (max-width:768px){
  .sub-hero::before{ background:linear-gradient(180deg, rgba(10,16,30,.90) 0%, rgba(10,16,30,.84) 100%); }
}
/* друк: тло героя знімає main.css (.sub-hero{background:none !important}); тут — лише темна підкладка */
@media print{ .sub-hero::before{ display:none; } }