/* GE SHOP — сервисные страницы (/support, /about, /delivery, /logistics, /payment,
   /returns, /bonus-content). Язык тот же, что у сертификатов и юридических страниц:
   строгая ч/б палитра, крупная типографика, тонкие линейки вместо плашек, шаги —
   призрачными цифрами. Разметка и данные страниц не менялись — только оформление. */

#ge-service-page {
  --ges-bg: #0a0a0b;
  --ges-ink: #f4f4f1;
  --ges-ink-2: rgba(244, 244, 241, 0.6);
  --ges-ink-3: rgba(244, 244, 241, 0.32);
  --ges-line: rgba(244, 244, 241, 0.14);
  --ges-pad: clamp(18px, 5vw, 44px);
  --ges-head: "Akrobat", "Cyngle", Arial, sans-serif;
  --ges-body: "Cyngle", "Cygre", "Akrobat", Arial, sans-serif;

  display: block;
  min-height: 100vh;
  padding-bottom: clamp(60px, 10vw, 120px);
  color: var(--ges-ink);
  background: var(--ges-bg);
  font-family: var(--ges-body);
  -webkit-font-smoothing: antialiased;
}

#ge-service-page *,
#ge-service-page *::before,
#ge-service-page *::after {
  box-sizing: border-box;
}

#ge-service-page .ges-container {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 var(--ges-pad);
}

/* ============================ ШАПКА ============================ */
/* Голые SVG одного размера, без кружков и подложек. */

#ge-service-page .ges-sitebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(18px, 3vw, 30px) var(--ges-pad);
}

#ge-service-page .ges-logo {
  display: inline-block;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

#ge-service-page .ges-logo:hover {
  opacity: 0.75;
}

#ge-service-page .ges-logo:active {
  transform: scale(0.96);
}

#ge-service-page .ges-logo img {
  width: clamp(104px, 15vw, 150px);
  height: auto;
  display: block;
}

#ge-service-page .ges-actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 22px);
}

#ge-service-page .ges-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

#ge-service-page .ges-action:hover {
  opacity: 0.72;
}

#ge-service-page .ges-action:active {
  transform: scale(0.9);
  opacity: 1;
}

/* Размеры иконок шапки заданы в global.js — единым правилом на все страницы. */

/* ============================ ГЕРОЙ ============================ */

#ge-service-page .ges-hero {
  padding: clamp(30px, 7vw, 84px) 0 clamp(28px, 5vw, 56px);
}

#ge-service-page .ges-kicker {
  margin-bottom: 18px;
  color: var(--ges-ink-3);
  font: 750 11px/1 var(--ges-head);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#ge-service-page .ges-hero h1 {
  max-width: 15ch;
  margin: 0 0 20px;
  font: 800 clamp(38px, 8.4vw, 96px) / 0.94 var(--ges-head);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

#ge-service-page .ges-lead {
  max-width: 52ch;
  margin: 0;
  color: var(--ges-ink-2);
  font-size: clamp(14px, 1.4vw, 16.5px);
  line-height: 1.55;
}

/* ============================ КАРТОЧКИ-ШАГИ ============================ */
/* Не сетка одинаковых коробочек: разделители — линейки, номер шага — крупной
   призрачной цифрой. Так страница читается как разворот, а не как «плитка». */

#ge-service-page .ges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--ges-line);
}

#ge-service-page .ges-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(26px, 3.2vw, 42px) clamp(20px, 2.6vw, 38px) clamp(26px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--ges-line);
  background: transparent;
}

#ge-service-page .ges-card:nth-child(2n) {
  padding-left: clamp(20px, 2.6vw, 38px);
  border-left: 1px solid var(--ges-line);
}

/* Вариант «is-dark» из скрипта больше не делает карточку отдельной плашкой —
   палитра одна на всю страницу. Класс оставлен, чтобы не трогать разметку. */
#ge-service-page .ges-card.is-dark {
  background: transparent;
}

#ge-service-page .ges-card-number {
  display: block;
  color: var(--ges-ink-3);
  font: 800 clamp(32px, 4.6vw, 54px) / 0.9 var(--ges-head);
  letter-spacing: -0.02em;
}

#ge-service-page .ges-card h2 {
  margin: 0 0 10px;
  font: 800 clamp(16px, 1.9vw, 22px) / 1.14 var(--ges-head);
  text-transform: uppercase;
}

#ge-service-page .ges-card p {
  max-width: 40ch;
  margin: 0;
  color: var(--ges-ink-2);
  font-size: 14.5px;
  line-height: 1.55;
}

/* Ссылка-действие — пилюля в обводке, инверсия при наведении и нажатии. */
#ge-service-page .ges-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 12px 22px;
  border: 1px solid var(--ges-line);
  border-radius: 999px;
  color: var(--ges-ink);
  background: transparent;
  text-decoration: none;
  font: 750 12.5px/1 var(--ges-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

#ge-service-page .ges-link:hover,
#ge-service-page .ges-link:active {
  color: #0a0a0b;
  background: var(--ges-ink);
  border-color: var(--ges-ink);
}

/* ============================ АДАПТИВ ============================ */

@media (max-width: 820px) {
  #ge-service-page .ges-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #ge-service-page .ges-card,
  #ge-service-page .ges-card:nth-child(2n) {
    padding: 24px 0;
    border-left: 0;
  }

  #ge-service-page .ges-link {
    width: 100%;
    justify-content: center;
  }
}