/* happ-key.best — тема «ювелирная витрина».

   Предмет сайта — ключ, выложенный как изделие: три одинаковых ключа лежат
   на изумрудном бархате под стеклом, у каждого на нитке бирка с ценой.
   Днём это витрина при дневном свете: слоновая кость, изумруд акцентом,
   шлифованное золото в рамках и клеймах. Ночью страница сама становится
   бархатом, а акцентом — золото.

   Смелость потрачена на три вещи: бархатную витрину с бирками (первый экран
   и «Подбор срока»), клейма-овалы как у пробы на изделии и паспорт ключа.
   Всё остальное — спокойный текст на кости с тонкой золотой отделкой.

   Типографика: заголовки, цены и числа — антиква Cormorant Garamond (как
   гравировка на бирке), текст — Bellota Text. Радиусы 0–4 px; овал есть
   только у клейма, потому что клеймо и есть овал.

   Переменные --bg --card --ink --ink2 --ink3 --line --line2 --acc --acc-ink
   --acc-s --warn --warn-s задаются литеральными HEX: по ним строится тема
   встроенной кассы (happkeybest). */

:root {
  /* зал при дневном свете */
  --bg:       #F5EFE3;   /* слоновая кость */
  --card:     #FFFBF3;   /* светлая кость: карточки, паспорт */
  --ink:      #16231D;   /* изумрудно-чёрный: основной текст */
  --ink2:     #46564E;   /* второстепенный */
  --ink3:     #5E6D64;   /* подписи, сноски */
  --line:     #D8CCB2;   /* золотистая линия */
  --line2:    #E8DFCB;   /* мягкая линия */
  --acc:      #0D5E47;   /* изумруд: ссылки, кнопки, всё про оплату */
  --acc-ink:  #FFF8EA;   /* текст на изумруде */
  --acc-s:    #E1EEE6;   /* изумрудная дымка */
  --warn:     #97323D;   /* гранат: предупреждения */
  --warn-s:   #F6E3E1;

  /* отделка */
  --gold:     #A8844A;   /* шлифованное золото: рамки, нити, клейма */
  --gold-hi:  #D9BE85;   /* блик золота, кнопки на бархате */
  --gold-ink: #7A5B26;   /* золото для мелкого текста на кости */
  --ok:       #1F7A55;
  --ok-s:     #E3F1E8;

  /* бархат витрины: одинаковый в обеих схемах, это предмет, а не фон */
  --velvet:    #0F3A2D;
  --velvet-2:  #0A2A20;
  --velvet-hi: #1A5641;
  --on-vel:    #F3EAD6;
  --on-vel2:   #BFB39A;
  --ftr:       #0F3A2D;

  /* бирка — бумага с золотой нитью, тоже одна на обе схемы */
  --tag:      #FBF5E8;
  --tag-ink:  #1B241F;
  --tag-ink2: #56655C;
  --tag-gold: #7A5B26;
  --tag-acc:  #0D5E47;

  --mk-key:   #0D5E47;
  --mk-tag:   #A8844A;
  --shade:    rgba(22, 35, 29, .16);

  --f-disp: 'CormG', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-body: 'BellotaT', 'Bellota Text', 'Trebuchet MS', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --w: 1180px;
  --r: 2px;
  --r2: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* ночью страница сама становится бархатом, акцент — золото */
    --bg:       #0A1813;
    --card:     #10261E;
    --ink:      #F1E8D6;
    --ink2:     #C7BCA5;
    --ink3:     #97A198;
    --line:     #2B4A3C;
    --line2:    #1B3429;
    --acc:      #D4B26E;
    --acc-ink:  #10231B;
    --acc-s:    #2B3023;
    --warn:     #E0898F;
    --warn-s:   #3A1E22;

    --gold:     #C9A764;
    --gold-hi:  #E8CF95;
    --gold-ink: #D9BD7F;
    --ok:       #7CCBA5;
    --ok-s:     #173328;

    --velvet:    #123D2F;
    --velvet-2:  #0B271E;
    --velvet-hi: #1D5943;
    --on-vel:    #F3EAD6;
    --on-vel2:   #BFB39A;
    --ftr:       #06120E;

    --tag:      #EFE5CF;

    --mk-key:   #E9DDBF;
    --mk-tag:   #D4B26E;
    --shade:    rgba(0, 0, 0, .45);
  }
}

/* --- база ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: var(--acc); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: var(--acc); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
strong, b { font-weight: 700; }
code { font-family: var(--f-code); font-size: .86em; background: var(--acc-s); color: var(--ink); padding: 1px 5px; border-radius: var(--r); overflow-wrap: anywhere; }
pre { font-family: var(--f-code); font-size: 14px; background: var(--card); border: 1px solid var(--line); padding: 14px 16px; overflow-x: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--acc); color: var(--acc-ink); padding: 8px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* бархат: общий материал витрины, подбора, призывов и подвала */
.case, .podbor, .strip, .cta, .side__card, .gobar__in {
  --btn-bg: var(--gold-hi);
  --btn-ink: #1B241F;
  --btn-hover: #F0DCAA;
  color: var(--on-vel);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, var(--velvet-hi) 0%, transparent 62%),
    radial-gradient(110% 80% at 50% 110%, var(--velvet-2) 0%, transparent 70%),
    var(--velvet);
}
.case :focus-visible, .podbor :focus-visible, .strip :focus-visible, .cta :focus-visible,
.side__card :focus-visible, .gobar :focus-visible, .ftr :focus-visible { outline-color: var(--gold-hi); }

/* --- кнопки --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 20px;
  font: 700 15px/1.2 var(--f-body); letter-spacing: .02em;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--r);
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--btn-bg, var(--acc)); color: var(--btn-ink, var(--acc-ink)); }
.btn--go:hover { background: var(--btn-hover, var(--ink)); color: var(--btn-ink, var(--bg)); }
.btn--lg { min-height: 54px; padding: 14px 30px; font-size: 17px; }
.btn--line { background: transparent; color: var(--acc); border-color: var(--acc); }
.btn--line:hover { background: var(--acc); color: var(--acc-ink); }

/* --- шапка: вывеска бутика ------------------------------------------------------- */
.hdr { position: relative; background: var(--bg); border-bottom: 1px solid var(--line); }
.hdr::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
  opacity: .7;
}
.hdr__in {
  max-width: var(--w); margin: 0 auto; padding: 14px 24px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.hdr__l, .hdr__links { display: flex; gap: 26px; align-items: center; }
.hdr__r { display: flex; gap: 22px; align-items: center; justify-content: flex-end; }
.hdr__l a, .hdr__links a {
  color: var(--ink2); text-decoration: none; font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.hdr__l a:hover, .hdr__links a:hover { color: var(--acc); }
.hdr__l a[aria-current], .hdr__links a[aria-current] { color: var(--ink); border-bottom-color: var(--gold); }
.hdr__go { min-height: 38px; padding: 8px 18px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.hdr__go[aria-current] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--gold); }

.brand {
  display: grid; grid-template-columns: auto auto; grid-template-areas: 'mark word' 'mark tag';
  column-gap: 12px; align-items: center; color: var(--ink); text-decoration: none;
}
.brand__mark { grid-area: mark; display: block; width: 40px; height: 40px; }
.mark { display: block; width: 100%; height: 100%; }
.mark__key { fill: var(--mk-key); }
.mark__tag { fill: var(--mk-tag); }
.mark__thread { stroke: var(--mk-tag); }
.brand__word { grid-area: word; display: flex; align-items: baseline; gap: 8px; font: 700 23px/1 var(--f-disp); letter-spacing: .14em; }
.brand__word b { font-weight: 700; }
.brand__word i { font-style: normal; color: var(--gold); }
.brand__word em { font-style: normal; font-weight: 600; letter-spacing: .16em; }
.brand__tag { grid-area: tag; margin-top: 4px; font-size: 9.5px; letter-spacing: .2em; color: var(--ink3); white-space: nowrap; }
.brand:hover .brand__word em { color: var(--acc); }

.burger {
  display: none; min-height: 38px; padding: 6px 12px; background: transparent; color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); font: 700 12px/1 var(--f-body);
  letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.mnav { display: none; border-top: 1px solid var(--line2); background: var(--card); }
.mnav.is-open { display: block; }
.mnav ul { list-style: none; margin: 0 auto; padding: 8px 24px 14px; max-width: var(--w); }
.mnav a { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line2); text-decoration: none; color: var(--ink); }
.mnav a b { font: 700 20px/1.2 var(--f-disp); }
.mnav a span { font-size: 13.5px; color: var(--ink3); }
.mnav a[aria-current] b { color: var(--acc); }

/* --- первый экран ------------------------------------------------------------------ */
.hero { padding: 28px 24px 18px; text-align: center; }
.hero__in { max-width: 1040px; margin: 0 auto; }
.hero__kick {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-ink);
}
.hero__kick::before, .hero__kick::after { content: ''; width: 34px; height: 1px; background: var(--gold); }
.hero h1 {
  margin: 8px 0 0; font: 600 clamp(40px, 6vw, 68px)/1 var(--f-disp); letter-spacing: -.005em; color: var(--ink);
}
.hero__lead { max-width: 42rem; margin: 12px auto 0; font-size: 18.5px; line-height: 1.55; color: var(--ink2); }
.hero__act { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 22px; }
.hero__indep { max-width: 36rem; margin: 14px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink3); }

/* клеймо-ссылка: проба рядом с ценой */
.hallmark {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 142px; height: 60px; padding: 0 20px; border-radius: 50%;
  border: 1.5px solid var(--gold); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--gold);
  color: var(--gold-ink); text-decoration: none; line-height: 1.1;
}
.hallmark b { font: 700 19px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; }
.hallmark span { margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hallmark:hover { color: var(--acc); border-color: var(--acc); box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4px var(--acc); }

/* --- ВИТРИНА: бархат под стеклом ------------------------------------------------------ */
.case {
  position: relative; margin: 24px auto 0; max-width: 1000px; padding: 26px 28px 16px;
  border: 1px solid var(--gold); border-radius: var(--r2);
  box-shadow: inset 0 0 0 6px var(--velvet-2), inset 0 0 0 7px rgba(217, 190, 133, .55), 0 26px 50px -30px var(--shade);
  overflow: hidden;
}
/* блик стекла: косая полоса света, неподвижная и без фильтров */
.case::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 26%, transparent 26.2%, transparent 62%, rgba(255, 255, 255, .03) 62.2%, transparent 74%);
}
.case__row { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.slot { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* ложемент: овальное углубление в бархате, где лежит ключ */
.slot__bed {
  display: grid; place-items: center; width: 100%; height: 84px;
  background: radial-gradient(ellipse 46% 40% at 50% 56%, rgba(0, 0, 0, .42), rgba(0, 0, 0, .12) 62%, transparent 72%);
}
.key { display: block; width: min(196px, 92%); height: auto; filter: drop-shadow(0 7px 5px rgba(0, 0, 0, .5)); }
.slot:nth-child(1) .key { transform: rotate(-5deg); }
.slot:nth-child(2) .key { transform: rotate(3deg); }
.slot:nth-child(3) .key { transform: rotate(-2deg); }
/* нитка: от нижнего края стержня (середина ложемента) до дырочки бирки */
.slot__thread { display: block; width: 24px; height: 50px; margin-top: -40px; fill: none; stroke: var(--gold-hi); stroke-width: 1.3; }
.slot__thread path { vector-effect: non-scaling-stroke; }

/* бирка на нитке: бумага со срезанными углами и дырочкой в золотом кольце */
.tag {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  width: min(196px, 100%); margin-top: -13.5px; padding: 22px 12px 12px;
  color: var(--tag-ink); text-decoration: none; text-align: center;
  transform-origin: 50% 0; transition: transform .25s ease;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .38));
}
.tag::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tag);
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%, 0 18px);
}
.slot:nth-child(1) .tag { transform: rotate(-3.5deg); }
.slot:nth-child(2) .tag { transform: rotate(2.5deg); }
.slot:nth-child(3) .tag { transform: rotate(-1.5deg); }
.slot .tag:hover, .slot .tag:focus-visible { transform: rotate(0) translateY(-3px); }
.tag:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 5px; }
.tag__hole {
  position: absolute; top: 8px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: var(--velvet-2); box-shadow: 0 0 0 2px var(--gold), 0 0 0 3px rgba(122, 91, 38, .35);
}
.tag__term { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tag-gold); }
.tag__price {
  display: flex; align-items: baseline; gap: 4px; margin-top: 4px; padding-bottom: 6px;
  font: 700 44px/1 var(--f-disp); font-variant-numeric: lining-nums; letter-spacing: -.01em; white-space: nowrap;
  border-bottom: 1px solid rgba(168, 132, 74, .55);
}
.tag__price i { font-style: normal; font-size: .52em; font-weight: 600; }
.tag__day { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--tag-acc); }
.tag__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin-top: 2px; font-size: 12.5px; color: var(--tag-ink2); }
.tag__meta span + span::before { content: '·'; margin-right: 6px; }
.tag__off {
  margin-top: 9px; padding: 2px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tag-acc); border: 1px solid rgba(13, 94, 71, .4); border-radius: var(--r);
}
.tag__off--base { color: var(--tag-ink2); border-color: rgba(86, 101, 92, .35); }
.slot__who { max-width: 196px; margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--on-vel2); text-align: center; }
.case__cap {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 42rem; margin: 14px auto 0; font: 600 18px/1.35 var(--f-disp); color: var(--on-vel); text-align: center;
}
.case__cap::before, .case__cap::after { content: ''; flex: 0 0 7px; width: 7px; height: 7px; background: var(--gold-hi); transform: rotate(45deg); }

/* --- главная: разделы ----------------------------------------------------------------- */
.home { max-width: var(--w); margin: 0 auto; padding: 0 24px 72px; }
.hs { margin-top: 76px; }
.hs--podbor { margin-top: 56px; }
.hs__hd { text-align: center; margin-bottom: 30px; }
.hs__cap, .podbor__cap, .ans__cap, .fix__cap, .signs__cap, .also__cap, .side__cap, .payp__cap, .nf__cap, .tw__cap {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink);
}
.hs__cap::before, .hs__cap::after { content: ''; width: 28px; height: 1px; background: var(--gold); }
.hs h2, .podbor__ttl { margin: 8px 0 0; font: 600 clamp(32px, 4.2vw, 46px)/1.08 var(--f-disp); }
.hs__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.hs__txt p { margin: 0 0 16px; font-size: 17.5px; line-height: 1.68; }
.hs--how .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hs--how .step { padding: 22px 20px 20px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); margin: 0; }
.hs--how .step::before { position: static; display: block; margin-bottom: 8px; }
.hs--faq .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
.hs--tail .cta { max-width: 980px; margin: 0 auto; }

/* --- ПОДБОР СРОКА ---------------------------------------------------------------------- */
.podbor {
  position: relative; max-width: 1000px; margin: 0 auto; padding: 36px 34px 30px;
  border: 1px solid var(--gold); border-radius: var(--r2);
  box-shadow: inset 0 0 0 6px var(--velvet-2), inset 0 0 0 7px rgba(217, 190, 133, .5), 0 26px 50px -30px var(--shade);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px 34px;
  grid-template-areas: 'hd hd' 'ctl beds' 'out out' 'fine fine' 'go go';
}
.podbor__hd { grid-area: hd; text-align: center; }
.podbor__cap { color: var(--gold-hi); }
.podbor__ttl { color: var(--on-vel); }
.podbor__lead { max-width: 40rem; margin: 10px auto 0; font-size: 16px; color: var(--on-vel2); }
.podbor__ctl { grid-area: ctl; display: grid; gap: 22px; align-content: start; }
.podbor__grp { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.podbor__lbl { display: block; margin-bottom: 10px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.podbor__val { position: absolute; right: 0; top: -3px; font: 700 21px/1 var(--f-disp); color: var(--on-vel); }
.podbor__people { display: flex; gap: 12px; }

/* камни-переключатели: огранка «изумруд», выбранный — зелёный камень в золоте */
.gem { position: relative; cursor: pointer; }
.gem input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gem span {
  position: relative; isolation: isolate; display: grid; place-items: center; width: 52px; height: 52px;
  font: 700 23px/1 var(--f-disp); color: var(--on-vel2); transition: color .15s;
}
.gem span::before, .gem span::after {
  content: ''; position: absolute; z-index: -1;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.gem span::before { inset: 0; background: linear-gradient(160deg, #F3E0AE, #A8844A 55%, #6F5220); }
.gem span::after { inset: 2px; background: var(--velvet-2); transition: background .15s; }
.gem input:checked + span { color: #FFFBF0; }
.gem input:checked + span::after { background: linear-gradient(145deg, #45C79D 0%, #13805F 45%, #07412F 100%); }
.gem:hover span { color: var(--on-vel); }
.gem input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 4px; }

/* ползунок: золотая цепочка и кабошон-изумруд на ней */
.podbor__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; }
.podbor__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }
.podbor__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #7BE0BF 0%, #139068 42%, #07412F 100%);
  border: 2px solid var(--gold-hi); box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.podbor__range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold-hi), var(--gold)); }
.podbor__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #7BE0BF 0%, #139068 42%, #07412F 100%);
  border: 2px solid var(--gold-hi); box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.podbor__range:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 6px; }
.podbor__ticks { position: relative; height: 18px; margin-top: 2px; font-size: 12px; color: var(--on-vel2); }
.podbor__ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.podbor__ticks span:nth-child(1) { left: 12px; }
.podbor__ticks span:nth-child(2) { left: calc(12px + (100% - 24px) * .1818); }
.podbor__ticks span:nth-child(3) { left: calc(12px + (100% - 24px) * .4545); }
.podbor__ticks span:nth-child(4) { left: calc(12px + (100% - 24px) * .7273); }
.podbor__ticks span:nth-child(5) { left: calc(100% - 12px); }

/* три гнезда: какие сроки легли в подбор и сколько раз */
.podbor__beds { grid-area: beds; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start; }
.bed {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px 12px; border-radius: var(--r2); text-align: center;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(0, 0, 0, .28), transparent 75%), var(--velvet-2);
  border: 1px solid rgba(217, 190, 133, .18); opacity: .55; transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.bed.is-on {
  opacity: 1; border-color: var(--gold-hi);
  background: radial-gradient(ellipse 80% 70% at 50% 30%, rgba(255, 236, 190, .16), transparent 70%), var(--velvet-2);
  box-shadow: 0 0 0 1px rgba(217, 190, 133, .35), 0 0 28px -6px rgba(233, 207, 149, .45);
}
.bed__key { width: 86%; max-width: 120px; height: auto; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.bed__nm { font-size: 13px; font-weight: 700; color: var(--on-vel); }
.bed__n { font: 700 22px/1 var(--f-disp); color: var(--gold-hi); }

/* квитанция: ответ на бумаге с зубчатым краем */
.podbor__out {
  grid-area: out; position: relative; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: 1.35fr repeat(4, minmax(0, 1fr));
  background: var(--tag); color: var(--tag-ink); border-radius: 0 0 var(--r) var(--r);
}
.podbor__out::before {
  content: ''; position: absolute; left: 0; right: 0; top: -7px; height: 7px;
  background:
    linear-gradient(-45deg, var(--tag) 3.5px, transparent 0) 0 0 / 10px 7px repeat-x,
    linear-gradient(45deg, var(--tag) 3.5px, transparent 0) 0 0 / 10px 7px repeat-x;
}
.po { padding: 16px 16px 14px; min-width: 0; }
.po + .po { border-left: 1px dashed rgba(27, 36, 31, .25); }
.po dt { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tag-ink2); }
.po dd { margin: 6px 0 2px; font: 700 27px/1.05 var(--f-disp); font-variant-numeric: lining-nums; color: var(--tag-ink); }
.po--main dd { font-size: 24px; color: var(--tag-acc); }
.po small { display: block; font-size: 12px; line-height: 1.35; color: var(--tag-ink2); }
.podbor__fine { grid-area: fine; margin: 0; min-height: 3em; font-size: 15px; line-height: 1.55; color: var(--on-vel2); }
/* внутри статьи подбор не должен наследовать отбивку и линейку заголовков текста */
.art .podbor { margin: 30px 0 34px; }
.podbor .podbor__ttl { margin: 8px 0 0; }
.podbor .podbor__ttl::before { content: none; }
.podbor .podbor__lead { margin: 10px auto 0; }
.podbor .podbor__fine { margin: 0; }
.art .po { padding: 14px 12px 12px; }
.art .po dd { font-size: 24px; }
.art .po--main dd { font-size: 21px; }
.podbor__go { grid-area: go; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.podbor__who { font-size: 13.5px; color: var(--on-vel2); }

/* --- паспорт ключа ------------------------------------------------------------------------ */
.pass {
  position: relative; padding: 26px 28px 22px; background: var(--card);
  border: 1px solid var(--gold); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--line);
}
.pass::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--line2); pointer-events: none; }
.pass__cap { position: relative; display: block; text-align: center; font: 700 17px/1 var(--f-disp); letter-spacing: .26em; color: var(--gold-ink); }
.pass__rows { position: relative; margin: 18px 0 0; }
.pass__rows div { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px dotted var(--line); }
.pass__rows div:last-child { border-bottom: 0; }
.pass__rows dt { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); padding-top: 3px; }
.pass__rows dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.pass__fine { position: relative; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink3); }

/* --- клейма ---------------------------------------------------------------------------------- */
.marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mk {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  height: 70px; padding: 0 10px; border-radius: 50%; background: var(--card);
  border: 1.5px solid var(--gold); box-shadow: inset 0 0 0 3px var(--card), inset 0 0 0 4px var(--gold);
  color: var(--gold-ink); line-height: 1.1;
}
.mk b { font: 700 21px/1 var(--f-disp); color: var(--ink); }
.mk span { margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* --- шапка статьи и витрина в строку ----------------------------------------------------------- */
.art-hd { max-width: 60rem; margin: 0 auto; padding: 30px 24px 0; text-align: center; }
.crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--ink3); }
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: var(--acc); }
.crumbs i { font-style: normal; font-size: 7px; color: var(--gold); }
.art-hd h1 { margin: 14px auto 0; max-width: 48rem; font: 600 clamp(36px, 5.4vw, 60px)/1.04 var(--f-disp); }
.art-hd__meta { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--ink3); }
.art-hd__lead { max-width: 42rem; margin: 16px auto 0; font-size: 19px; line-height: 1.6; color: var(--ink2); }

.strip {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  max-width: 54rem; margin: 26px auto 0; padding: 14px 18px; text-align: left;
  border: 1px solid var(--gold); border-radius: var(--r2);
  box-shadow: inset 0 0 0 4px var(--velvet-2), inset 0 0 0 5px rgba(217, 190, 133, .45);
}
.strip__cap { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 700; letter-spacing: .22em; color: var(--gold-hi); }
.strip__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center;
  padding: 16px 6px 9px; color: var(--tag-ink); text-decoration: none; text-align: center; line-height: 1.15;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .3)); transition: transform .2s;
}
.mini::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tag);
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%, 0 11px);
}
.mini:hover { transform: translateY(-2px); }
.mini__hole { position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--velvet-2); box-shadow: 0 0 0 1.5px var(--gold); }
.mini b { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--tag-gold); }
.mini__p { margin-top: 3px; font: 700 25px/1 var(--f-disp); white-space: nowrap; }
.mini small { margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--tag-acc); }
.strip__trial {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  width: 118px; height: 58px; border-radius: 50%; color: var(--on-vel); text-decoration: none;
  border: 1.5px solid var(--gold-hi); box-shadow: inset 0 0 0 3px var(--velvet), inset 0 0 0 4px var(--gold-hi); line-height: 1.1;
}
.strip__trial b { font: 700 17px/1 var(--f-disp); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hi); }
.strip__trial span { margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; }
.strip__trial:hover { color: #FFFFFF; }

/* --- статья ------------------------------------------------------------------------------------- */
.art-grid {
  max-width: var(--w); margin: 44px auto 0; padding: 0 24px 76px;
  display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 64px; align-items: start;
}
.art { min-width: 0; max-width: 44rem; font-size: 17.5px; line-height: 1.7; }
.art > h2, .art h2 { margin: 54px 0 14px; font: 600 clamp(28px, 3.2vw, 36px)/1.12 var(--f-disp); }
.art h2::before { content: ''; display: block; width: 46px; height: 1px; margin-bottom: 16px; background: var(--gold); }
.art h3 { margin: 30px 0 8px; font: 700 23px/1.2 var(--f-disp); }
.art p { margin: 0 0 16px; }
.art > :first-child { margin-top: 0; }
.anchor { display: block; position: relative; top: -16px; }

.list { margin: 0 0 18px; padding: 0; list-style: none; }
.list li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.list li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.list--n { counter-reset: n; }
.list--n li { counter-increment: n; }
.list--n li::before { content: counter(n); width: auto; height: auto; top: 0; left: 0; background: none; transform: none; font: 700 19px/1.5 var(--f-disp); color: var(--gold-ink); }

/* шаги: римские цифры, как на циферблате */
.steps { counter-reset: step; list-style: none; margin: 20px 0 26px; padding: 0; }
.step { position: relative; counter-increment: step; padding-left: 58px; margin-bottom: 22px; }
.step::before {
  content: counter(step, upper-roman); position: absolute; left: 0; top: -2px;
  font: 700 26px/1 var(--f-disp); color: var(--gold-ink); letter-spacing: .04em;
}
.step__ttl { display: block; margin-bottom: 4px; font-weight: 700; font-size: 17.5px; }
.step p { margin: 0 0 8px; }
.step ul { margin: 6px 0 8px; padding-left: 18px; }

/* таблицы: прейскурант под стеклом */
.tw { margin: 22px 0 24px; overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.tw__cap { padding: 12px 14px 0; }
.tw table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tw thead th { padding: 12px 14px 10px; text-align: left; vertical-align: bottom; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line); }
.tw tbody th { padding: 12px 14px; text-align: left; vertical-align: top; font: 700 19px/1.2 var(--f-disp); white-space: nowrap; }
.tw td { padding: 12px 14px; vertical-align: top; }
.tw tbody tr + tr > * { border-top: 1px solid var(--line2); }
.tw td strong { color: var(--acc); }

.note { margin: 24px 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.note p { margin: 0 0 8px; } .note p:last-child { margin: 0; }
.note__ttl { display: block; margin-bottom: 6px; font: 700 20px/1.25 var(--f-disp); }
.note--warn { background: var(--warn-s); border-color: var(--warn-s); border-left-color: var(--warn); }
.note--warn .note__ttl { color: var(--warn); }
.note--ok { background: var(--ok-s); border-color: var(--ok-s); border-left-color: var(--ok); }

.faq { margin: 14px 0 8px; }
.faq__i { padding: 18px 0 8px; border-top: 1px solid var(--line); }
.faq__q { position: relative; margin: 0 0 8px; padding-left: 22px; font: 700 21px/1.25 var(--f-disp); }
.faq__q::before { content: ''; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.faq__i p { margin: 0 0 10px; }

/* коротко: прямой ответ в первых строках */
.ans { margin: 0 0 30px; padding: 20px 22px 18px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--acc); }
.ans__hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ans__cap { color: var(--acc); }
.ans__take { padding: 2px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gold-ink); border: 1px solid var(--gold); border-radius: var(--r); }
.ans__txt { margin: 10px 0 0; font-size: 18px; line-height: 1.6; }
.ans__list { margin: 10px 0 0; padding: 0; list-style: none; }
.ans__list li { position: relative; padding-left: 22px; margin-bottom: 6px; }
.ans__list li::before { content: ''; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; background: var(--acc); transform: rotate(45deg); }

/* если что-то пошло не так: три графы */
.fix { margin: 24px 0; }
.fix__list { list-style: none; margin: 10px 0 0; padding: 0; }
.fix__i { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; }
.fix__i > span::before { display: block; margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.fix__sign { font-weight: 700; }
.fix__sign::before { content: 'Что видно'; }
.fix__why { color: var(--ink2); }
.fix__why::before { content: 'Почему'; }
.fix__do::before { content: 'Что сделать'; color: var(--acc) !important; }

/* под лупой: признаки продавца, номер в золотом кольце с ручкой */
.signs { margin: 26px 0; }
.signs__list { counter-reset: sg; list-style: none; margin: 12px 0 0; padding: 0; }
.sg { position: relative; counter-increment: sg; display: grid; gap: 6px; padding: 16px 0 16px 58px; border-top: 1px solid var(--line); }
.sg::before {
  content: counter(sg); position: absolute; left: 0; top: 14px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold);
  font: 700 17px/1 var(--f-disp); color: var(--ink); background: var(--card);
}
.sg::after { content: ''; position: absolute; left: 30px; top: 46px; width: 12px; height: 3px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.sg__sign { font: 700 21px/1.25 var(--f-disp); }
.sg__why { color: var(--ink2); font-size: 16px; }
.sg__here { padding: 9px 12px; font-size: 15.5px; background: var(--acc-s); border-left: 2px solid var(--acc); }
.sg__here b { color: var(--acc); }

.both { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }
.both__col { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); }
.both__col--yes { border-top: 3px solid var(--ok); }
.both__col--no { border-top: 3px solid var(--warn); }
.both__cap { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--ink3); }
.both ul { list-style: none; margin: 0; padding: 0; font-size: 15.5px; line-height: 1.5; }
.both li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.both__col--yes li::before { content: ''; position: absolute; left: 3px; top: .35em; width: 5px; height: 10px; border: solid var(--ok); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.both__col--no li::before { content: ''; position: absolute; left: 1px; top: .72em; width: 11px; height: 2px; background: var(--warn); }

/* бирка одного срока крупно */
.bill { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 14px 24px; align-items: center; margin: 18px 0 16px; padding: 18px; background: var(--card); border: 1px solid var(--line); }
.bill__tag {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 22px 10px 12px;
  color: var(--tag-ink); text-align: center; transform: rotate(-2deg); filter: drop-shadow(0 6px 8px var(--shade));
}
.bill__tag::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--tag); outline: 1px solid var(--gold);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%, 0 15px);
}
.bill__hole { position: absolute; top: 7px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2px var(--gold); }
.bill__term { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tag-gold); }
.bill__sum { font: 700 40px/1 var(--f-disp); white-space: nowrap; margin-top: 4px; }
.bill__sum i { font-style: normal; font-size: .5em; margin-left: 4px; }
.bill__days { font-size: 12.5px; color: var(--tag-ink2); margin-top: 2px; }
.bill__rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bill__rows dt { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.bill__rows dd { margin: 4px 0 0; font: 700 23px/1.1 var(--f-disp); }
.bill__fine { grid-column: 1 / -1; margin: 0 !important; font-size: 15px; color: var(--ink2); }

/* призывы: бархатная плашка в золотой рамке */
.cta {
  position: relative; margin: 36px 0; padding: 30px 30px 26px; border: 1px solid var(--gold); border-radius: var(--r2);
  box-shadow: inset 0 0 0 5px var(--velvet-2), inset 0 0 0 6px rgba(217, 190, 133, .5);
}
.cta__tag { font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--gold-hi); }
.cta__ttl { margin: 8px 0 8px !important; font: 600 clamp(28px, 3.2vw, 36px)/1.1 var(--f-disp); color: var(--on-vel); }
.cta__txt { max-width: 40rem; margin: 0 0 12px !important; font-size: 16.5px; line-height: 1.6; color: var(--on-vel); }
.cta__pts { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; color: var(--on-vel2); }
.cta__pts li { position: relative; padding-left: 14px; }
.cta__pts li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; background: var(--gold-hi); transform: rotate(45deg); }
.cta__row { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.cta__fine { font-size: 13px; color: var(--on-vel2); }

.goto { margin: 30px 0; padding: 20px 22px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); }
.goto__tag { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--gold-ink); }
.goto__txt { margin: 6px 0 14px !important; }

.shot { margin: 22px 0; }
.shot__frame { display: grid; place-items: center; min-height: 180px; background: var(--card); border: 1px dashed var(--line); }
.shot__code { font-family: var(--f-code); font-size: 13px; color: var(--ink3); }
.shot__cap { margin-top: 8px; font-size: 14px; color: var(--ink3); }
.shot img { display: block; max-height: 520px; width: auto; margin: 0 auto; border: 1px solid var(--line); }

/* хвост: смотрите также и оценка */
.also { margin-top: 44px; }
.also__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; }
.also__list a { display: grid; gap: 4px; height: 100%; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); text-decoration: none; color: var(--ink); }
.also__list a b { font: 700 19px/1.2 var(--f-disp); }
.also__list a span { font-size: 13.5px; line-height: 1.4; color: var(--ink3); }
.also__list a:hover b { color: var(--acc); }
.helpful { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; }
.helpful__q { font-weight: 700; }
.helpful__thanks { color: var(--ink3); font-size: 14px; }
.helpful__btns { display: flex; gap: 8px; }
.helpful__btns button { min-height: 36px; min-width: 56px; padding: 4px 14px; font: 700 14px/1 var(--f-body); color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.helpful__btns button:hover { border-color: var(--acc); color: var(--acc); }
.helpful[data-done] .helpful__btns { display: none; }

/* карточка сбоку */
.side { position: sticky; top: 24px; display: grid; gap: 18px; }
.side__card {
  padding: 20px 20px 18px; border: 1px solid var(--gold); border-radius: var(--r2);
  box-shadow: inset 0 0 0 4px var(--velvet-2), inset 0 0 0 5px rgba(217, 190, 133, .45);
}
.side__card .side__cap { color: var(--gold-hi); }
.side__rows { margin: 12px 0 16px; }
.side__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dotted rgba(217, 190, 133, .3); }
.side__rows dt { font-size: 14px; color: var(--on-vel2); }
.side__rows dd { margin: 0; font: 700 21px/1 var(--f-disp); color: var(--on-vel); white-space: nowrap; }
.side__card .btn { width: 100%; }
.side__fine { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--on-vel2); }
.side__nav { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); }
.side__nav ol { list-style: none; margin: 10px 0 0; padding: 0; }
.side__nav a { display: block; padding: 7px 0 7px 16px; position: relative; font-size: 15px; line-height: 1.35; color: var(--ink2); text-decoration: none; border-top: 1px solid var(--line2); }
.side__nav a::before { content: ''; position: absolute; left: 1px; top: 1.05em; width: 5px; height: 5px; background: var(--line); transform: rotate(45deg); }
.side__nav a:hover { color: var(--acc); }
.side__nav a[aria-current] { color: var(--ink); font-weight: 700; }
.side__nav a[aria-current]::before { background: var(--gold); }

/* --- страница оплаты ------------------------------------------------------------------------------ */
.payp__indep { max-width: 38rem; margin: 12px auto 0; font-size: 14px; color: var(--ink3); }
.payp__grid { max-width: var(--w); margin: 30px auto 0; padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 28px; align-items: start; }
.kassa {
  min-width: 0; padding: 18px 14px 12px; background: var(--card);
  border: 1px solid var(--gold); border-radius: var(--r2); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px var(--line), 0 20px 40px -30px var(--shade);
}
.kassa__hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 8px 10px; }
.kassa__cap { font: 700 18px/1 var(--f-disp); letter-spacing: .24em; color: var(--gold-ink); }
.kassa__tag { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--ink3); }
.kassa__box { min-height: 420px; }
.kassa__fb { margin: 0; padding: 24px 12px; font-size: 15px; color: var(--ink2); }
.payp__side { display: grid; gap: 16px; padding: 20px 18px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); }
.payp__flow { counter-reset: fl; list-style: none; margin: 0; padding: 0; }
.payp__flow li { counter-increment: fl; position: relative; display: grid; gap: 1px; padding: 9px 0 9px 36px; border-top: 1px solid var(--line2); font-size: 14.5px; line-height: 1.4; }
.payp__flow li::before { content: counter(fl, upper-roman); position: absolute; left: 0; top: 8px; font: 700 19px/1 var(--f-disp); color: var(--gold-ink); }
.payp__flow span { color: var(--ink3); font-size: 13.5px; }
.art-grid--pay { grid-template-columns: minmax(0, 44rem); justify-content: center; }
.payp__back { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 34px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); }
.payp__back p { margin: 0; }

/* --- подвал: бархатное основание витрины --------------------------------------------------------------- */
.ftr { position: relative; margin-top: 20px; background: var(--ftr); color: var(--on-vel); border-top: 1px solid var(--gold); }
.ftr::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: rgba(217, 190, 133, .45); }
.ftr__in { max-width: var(--w); margin: 0 auto; padding: 44px 24px 26px; }
.ftr__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 44px; align-items: start; padding-bottom: 26px; border-bottom: 1px solid rgba(217, 190, 133, .25); }
.ftr__brand { display: flex; align-items: center; gap: 12px; color: var(--on-vel); text-decoration: none; }
.ftr__brand .brand__mark { width: 36px; height: 36px; }
.ftr .mark__key { fill: #E9DDBF; }
.ftr .mark__tag { fill: var(--gold-hi); }
.ftr .mark__thread { stroke: var(--gold-hi); }
.ftr__brand .brand__word { font-size: 20px; }
.ftr__brand .brand__word i { color: var(--gold-hi); }
.ftr__disc { max-width: 46rem; margin: 0; font-size: 14px; line-height: 1.6; color: var(--on-vel2); }
.ftr__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 26px 0; }
.ftr__ttl { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-hi); }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin-bottom: 7px; font-size: 14.5px; }
.ftr a { color: var(--on-vel); text-decoration-color: rgba(217, 190, 133, .5); }
.ftr a:hover { color: var(--gold-hi); }
.ftr__bar { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(217, 190, 133, .25); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-vel2); }

/* --- нижняя панель для телефона ------------------------------------------------------------------------ */
.gobar { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; transform: translateY(150%); transition: transform .3s ease; }
.gobar.is-on { transform: none; }
.gobar__in { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border: 1px solid var(--gold); border-radius: var(--r2); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); }
.gobar__txt { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.gobar__txt b { font: 700 19px/1.1 var(--f-disp); }
.gobar__txt span { font-size: 12.5px; color: var(--on-vel2); }
.gobar .btn { min-height: 42px; padding: 8px 14px; white-space: nowrap; }
.gobar__x { width: 36px; height: 36px; flex: 0 0 36px; background: transparent; color: var(--on-vel2); border: 1px solid rgba(217, 190, 133, .35); border-radius: var(--r); font-size: 20px; line-height: 1; cursor: pointer; }
body.has-gobar { padding-bottom: 86px; }

/* --- 404: пустое гнездо --------------------------------------------------------------------------------- */
.nf { max-width: 1000px; margin: 0 auto; padding: 44px 24px 72px; text-align: center; }
.nf h1 { margin: 12px 0 0; font: 600 clamp(36px, 5.4vw, 60px)/1.05 var(--f-disp); }
.nf__lead { max-width: 38rem; margin: 14px auto 0; font-size: 18px; color: var(--ink2); }
.nf__pages { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; text-align: left; }
.nf__pages a { display: grid; gap: 4px; height: 100%; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--gold); color: var(--ink); text-decoration: none; }
.nf__pages b { font: 700 19px/1.2 var(--f-disp); }
.nf__pages span { font-size: 13.5px; color: var(--ink3); }

/* --- ширины ------------------------------------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .brand__tag { display: none; }
  .brand { grid-template-areas: 'mark word'; }
  .hdr__l, .hdr__links, .hdr__r { gap: 18px; }
  .hdr__l a, .hdr__links a { font-size: 12px; letter-spacing: .08em; }
}

@media (max-width: 1080px) {
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .art { max-width: 46rem; margin: 0 auto; }
  .side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; width: 100%; margin: 0 auto; align-items: start; }
  .payp__grid { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
  .payp__side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .payp__side .payp__cap { grid-column: 1 / -1; }
  .hs--how .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .hdr__in { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; gap: 12px; }
  .hdr__l, .hdr__links, .brand__tag { display: none; }
  .brand { grid-template-areas: 'mark word'; }
  .brand__mark { width: 34px; height: 34px; }
  .brand__word { font-size: 19px; gap: 6px; letter-spacing: .1em; }
  .burger { display: inline-flex; align-items: center; }
  .hdr__r { gap: 10px; }
  .hs__two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hs--faq .faq { grid-template-columns: minmax(0, 1fr); }
  .podbor { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'hd' 'ctl' 'beds' 'out' 'fine' 'go'; padding: 28px 20px 24px; }
  .podbor__out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .po--main { grid-column: 1 / -1; }
  .po + .po { border-left: 0; }
  .po:nth-child(n + 2) { border-top: 1px dashed rgba(27, 36, 31, .25); }
  .po:nth-child(odd):not(:first-child) { border-left: 1px dashed rgba(27, 36, 31, .25); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .hero { padding: 20px 16px 8px; }
  .hero__kick { display: none; }
  .hero__lead { font-size: 16.5px; margin-top: 10px; }
  .hero__act { margin-top: 18px; gap: 14px; }
  .home { padding: 0 16px 56px; }
  .hs { margin-top: 56px; }
  .case { margin-top: 18px; padding: 18px 8px 12px; }
  .case__row { gap: 6px; }
  .slot__bed { height: 58px; }
  .key { width: 94%; }
  .slot__thread { height: 32px; margin-top: -27px; }
  .tag { padding: 20px 4px 10px; }
  .tag::before { clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }
  .tag__term { font-size: 10px; letter-spacing: .08em; }
  .tag__price { font-size: 31px; }
  .tag__day { font-size: 12.5px; }
  .tag__meta { font-size: 11px; flex-direction: column; }
  .tag__meta span + span::before { content: none; }
  .tag__off { font-size: 9px; letter-spacing: .04em; padding: 2px 5px; }
  .slot__who { display: none; }
  .tag__meta span + span { display: none; }
  .case__cap { font-size: 15.5px; gap: 10px; margin-top: 12px; }
  .hs--how .steps { grid-template-columns: minmax(0, 1fr); }
  .podbor__beds { gap: 6px; }
  .bed { padding: 12px 4px 10px; }
  .bed__nm { font-size: 11.5px; }
  .po { padding: 12px 12px 10px; }
  .po dd { font-size: 23px; }
  .art-hd { padding: 22px 16px 0; }
  .art-hd__lead { font-size: 17px; }
  .strip { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .strip__cap { writing-mode: horizontal-tb; transform: none; text-align: center; }
  .strip__row { gap: 6px; }
  .mini__p { font-size: 21px; }
  .mini small { font-size: 11px; }
  .strip__trial { width: auto; height: 50px; margin: 0 auto; padding: 0 26px; }
  .art-grid { padding: 0 16px 56px; margin-top: 30px; }
  .art { font-size: 16.5px; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .fix__i { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .bill { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .bill__tag { width: 11rem; margin: 0 auto; }
  .bill__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .both { grid-template-columns: minmax(0, 1fr); }
  .cta { padding: 24px 18px 20px; }
  .payp__grid { padding: 0 12px; }
  .payp__side { grid-template-columns: minmax(0, 1fr); }
  .kassa { padding: 14px 6px 8px; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .sg { padding-left: 50px; }
  .tw table { font-size: 14px; }
  .tw tbody th { font-size: 17px; }
}

@media (max-width: 420px) {
  .hdr__in { padding: 10px 12px; gap: 8px; }
  .brand { column-gap: 8px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__word { font-size: 15px; gap: 4px; letter-spacing: .05em; }
  .hdr__r { gap: 6px; }
  .hdr__go { min-height: 36px; padding: 7px 10px; font-size: 11.5px; letter-spacing: .06em; }
  .burger { min-height: 36px; padding: 6px 8px; font-size: 11px; letter-spacing: .08em; }
  .pass { padding: 22px 18px 18px; }
  .pass__rows div { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 38px; }
  .tag__price { font-size: 26px; }
  .tag__off { display: none; }
  .mini__p { font-size: 19px; }
  .gem span { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .slot .tag:hover, .slot .tag:focus-visible, .mini:hover { transform: none; }
}