/* Кнопка-восклицательный знак. Контур: teya-memory/design/EXCLAIM_CANON.md
   Палочка длиннее канона ровно настолько, чтобы сесть надпись.
   Наведение — белая заливка: на чёрном блоке тёмный оранжевый пропадает.
   Файл не подключён к страницам. Высота — --btn-exclaim-h. */

.btn-exclaim {
  --btn-exclaim-h: 64px;
  --btn-exclaim-w: 112;
  position: relative;
  display: inline-block;
  width: calc(var(--btn-exclaim-h) * var(--btn-exclaim-w) / 25);
  height: var(--btn-exclaim-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent, #ff6200);
  cursor: pointer;
  line-height: 0;
  transition:
    color 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-exclaim > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.btn-exclaim__mark {
  fill: currentColor;
}

.btn-exclaim__arrow {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  transition:
    fill 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-exclaim .btn-exclaim__label {
  position: absolute;
  left: calc(16 / 112 * 100%);
  width: calc(68 / 112 * 100%);
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-family: var(--font-body, "Commissioner", sans-serif);
  font-size: calc(var(--btn-exclaim-h) * 6.2 / 25);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-exclaim.btn-exclaim--ink .btn-exclaim__label {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim--ink .btn-exclaim__arrow {
  fill: var(--color-ink, #0a0a0a);
}

.btn-exclaim:hover,
.btn-exclaim:focus-visible {
  color: #fff;
}

.btn-exclaim:hover .btn-exclaim__label,
.btn-exclaim:focus-visible .btn-exclaim__label,
.btn-exclaim--ink:hover .btn-exclaim__label,
.btn-exclaim--ink:focus-visible .btn-exclaim__label {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim:hover .btn-exclaim__arrow,
.btn-exclaim:focus-visible .btn-exclaim__arrow {
  fill: var(--color-ink, #0a0a0a);
  transform: translateX(3px);
}

.btn-exclaim:hover .btn-exclaim__arrow--line,
.btn-exclaim:focus-visible .btn-exclaim__arrow--line {
  transform: none;
}

.btn-exclaim__arrow--line,
.btn-exclaim__arrow--line path {
  fill: none;
  stroke: #fff;
  stroke-width: 0.78;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-exclaim.btn-exclaim--ink .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--ink .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-ink, #0a0a0a);
}

.btn-exclaim:hover .btn-exclaim__arrow--line,
.btn-exclaim:hover .btn-exclaim__arrow--line path,
.btn-exclaim:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-ink, #0a0a0a);
}

.btn-exclaim:active {
  transform: translateY(1px);
}

.btn-exclaim:focus-visible {
  outline: 2px solid var(--color-accent, #ff6200);
  outline-offset: 6px;
}

.btn-exclaim:disabled,
.btn-exclaim[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .btn-exclaim,
  .btn-exclaim__arrow,
  .btn-exclaim__label {
    transition: none;
  }

  .btn-exclaim:hover .btn-exclaim__arrow,
  .btn-exclaim:focus-visible .btn-exclaim__arrow,
  .btn-exclaim:active {
    transform: none;
  }

  .btn-exclaim__arrow-run {
    animation: none;
  }
}

/* Новые варианты наведения. Старые правила выше не меняют. Тонкая стрелка. */
.btn-exclaim.btn-exclaim--hover-paper:hover,
.btn-exclaim.btn-exclaim--hover-paper:focus-visible {
  color: #fff;
}

.btn-exclaim.btn-exclaim--hover-paper:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--hover-paper:focus-visible .btn-exclaim__label {
  color: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--hover-paper:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-paper:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--hover-paper:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-paper:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--hover-ink:hover,
.btn-exclaim.btn-exclaim--hover-ink:focus-visible {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--hover-ink:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--hover-ink:focus-visible .btn-exclaim__label {
  color: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--hover-ink:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-ink:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--hover-ink:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-ink:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-accent, #ff6200);
}

.btn-exclaim__arrow-run {
  animation: btn-exclaim-arrow-loop 1.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-play-state: paused;
}

/* На оранжевом фоне заливка кнопки белая или чёрная, иначе она сливается. */
.btn-exclaim.btn-exclaim--fill-paper {
  color: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-paper .btn-exclaim__label,
.btn-exclaim.btn-exclaim--fill-ink .btn-exclaim__label {
  color: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--fill-paper .btn-exclaim__arrow,
.btn-exclaim.btn-exclaim--fill-ink .btn-exclaim__arrow {
  fill: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--fill-paper .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-paper .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--fill-ink .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--fill-paper:hover,
.btn-exclaim.btn-exclaim--fill-paper:focus-visible {
  color: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink:hover,
.btn-exclaim.btn-exclaim--fill-ink:focus-visible {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-paper:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--fill-paper:focus-visible .btn-exclaim__label {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--fill-ink:focus-visible .btn-exclaim__label {
  color: #fff;
}

.btn-exclaim.btn-exclaim--fill-paper:hover .btn-exclaim__arrow,
.btn-exclaim.btn-exclaim--fill-paper:focus-visible .btn-exclaim__arrow {
  fill: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink:hover .btn-exclaim__arrow,
.btn-exclaim.btn-exclaim--fill-ink:focus-visible .btn-exclaim__arrow {
  fill: #fff;
}

.btn-exclaim.btn-exclaim--fill-paper:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-paper:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--fill-paper:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-paper:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--fill-ink:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #fff;
}

.btn-exclaim.btn-exclaim--fill-paper.btn-exclaim--hover-swap:hover,
.btn-exclaim.btn-exclaim--fill-paper.btn-exclaim--hover-swap:focus-visible {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-swap:hover,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-swap:focus-visible {
  color: #fff;
}

.btn-exclaim.btn-exclaim--hover-swap:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--hover-swap:focus-visible .btn-exclaim__label {
  color: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--hover-swap:hover .btn-exclaim__arrow,
.btn-exclaim.btn-exclaim--hover-swap:focus-visible .btn-exclaim__arrow {
  fill: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--hover-swap:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-swap:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--hover-swap:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--hover-swap:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-accent, #ff6200);
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast .btn-exclaim__label {
  color: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast .btn-exclaim__arrow {
  fill: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:hover,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:focus-visible {
  color: #fff;
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:hover .btn-exclaim__label,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:focus-visible .btn-exclaim__label {
  color: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:hover .btn-exclaim__arrow,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:focus-visible .btn-exclaim__arrow {
  fill: var(--color-ink, #0a0a0a);
}

.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:hover .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:hover .btn-exclaim__arrow--line path,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:focus-visible .btn-exclaim__arrow--line,
.btn-exclaim.btn-exclaim--fill-ink.btn-exclaim--hover-contrast:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: var(--color-ink, #0a0a0a);
}

/* Шапка index: на оранжевом hero — чёрная, после скролла на стекле — оранжевая. */
.site-header .header-cta.btn-exclaim {
  --btn-exclaim-h: calc(var(--text-sm) * 25 / 6.2);
  display: none;
  flex-shrink: 0;
  vertical-align: middle;
}

.site-header .btn-exclaim--header .btn-exclaim__label {
  left: calc(6 * var(--btn-exclaim-h) / 25 + 20px);
  width: max-content;
  text-align: left;
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: normal;
}

/* 768–1024 меню само мельче: 13px. Кнопка повторяет его и чуть ниже. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header .header-cta.btn-exclaim {
    --btn-exclaim-h: calc(0.8125rem * 25 / 6.2);
  }

  .site-header .btn-exclaim--header .btn-exclaim__label {
    font-size: 0.8125rem;
  }
}

/* Почта остаётся. Большой зазор между почтой и кнопкой придвигаем: почта уходит вправо, к кнопке. */
@media (min-width: 820px) {
  .site-header .header-end {
    gap: 16px;
  }

  .site-header .header-cta.btn-exclaim {
    display: inline-block;
  }
}

.site-header:not(.is-past-hero) .btn-exclaim--header {
  color: #0a0a0a;
}

.site-header:not(.is-past-hero) .btn-exclaim--header .btn-exclaim__label {
  color: #fff;
}

.site-header:not(.is-past-hero) .btn-exclaim--header .btn-exclaim__arrow--line,
.site-header:not(.is-past-hero) .btn-exclaim--header .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #fff;
}

.site-header:not(.is-past-hero) .btn-exclaim--header:hover,
.site-header:not(.is-past-hero) .btn-exclaim--header:focus-visible {
  color: #fff;
  outline-color: #0a0a0a;
}

.site-header:not(.is-past-hero) .btn-exclaim--header:hover .btn-exclaim__label,
.site-header:not(.is-past-hero) .btn-exclaim--header:focus-visible .btn-exclaim__label {
  color: #0a0a0a;
}

.site-header:not(.is-past-hero) .btn-exclaim--header:hover .btn-exclaim__arrow--line,
.site-header:not(.is-past-hero) .btn-exclaim--header:hover .btn-exclaim__arrow--line path,
.site-header:not(.is-past-hero) .btn-exclaim--header:focus-visible .btn-exclaim__arrow--line,
.site-header:not(.is-past-hero) .btn-exclaim--header:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #0a0a0a;
}

.site-header.is-past-hero .btn-exclaim--header {
  color: var(--color-accent, #ff6200);
}

.site-header.is-past-hero .btn-exclaim--header .btn-exclaim__label {
  color: #0a0a0a;
}

.site-header.is-past-hero .btn-exclaim--header .btn-exclaim__arrow--line,
.site-header.is-past-hero .btn-exclaim--header .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #0a0a0a;
}

.site-header.is-past-hero .btn-exclaim--header:hover,
.site-header.is-past-hero .btn-exclaim--header:focus-visible {
  color: #0a0a0a;
  outline-color: var(--color-accent, #ff6200);
}

.site-header.is-past-hero .btn-exclaim--header:hover .btn-exclaim__label,
.site-header.is-past-hero .btn-exclaim--header:focus-visible .btn-exclaim__label {
  color: #fff;
}

.site-header.is-past-hero .btn-exclaim--header:hover .btn-exclaim__arrow--line,
.site-header.is-past-hero .btn-exclaim--header:hover .btn-exclaim__arrow--line path,
.site-header.is-past-hero .btn-exclaim--header:focus-visible .btn-exclaim__arrow--line,
.site-header.is-past-hero .btn-exclaim--header:focus-visible .btn-exclaim__arrow--line path {
  fill: none;
  stroke: #fff;
}

@keyframes btn-exclaim-arrow-loop {
  0% { transform: translateX(0); }
  38% { transform: translateX(11px); }
  38.01% { transform: translateX(-11px); }
  100% { transform: translateX(0); }
}