/* Графит расширения на страницах сайта: тот же пиксельный шрифт (только
   24/48 px — на других размерах он мылится), те же серые и ступенчатые углы. */
@font-face {
  font-family: 'Fusion Pixel Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fusion-pixel-mono.woff2) format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #080808; --raise: #1c1c1c; --hover: #303030; --deco: #444444;
  --a1: #626262; --a2: #808080; --a3: #a8a8a8; --hi: #eeeeee;
  --px2: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px),
    0 4px, 2px 4px, 2px 2px, 4px 2px);
  --px1: polygon(2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px), 0 2px, 2px 2px);
}
*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--bg) }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--hi);
  font-family: 'Fusion Pixel Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 24px; line-height: 36px;
  -webkit-font-smoothing: none; font-synthesis: none; font-kerning: none; font-variant-ligatures: none;
}
a { color: var(--hi) }
a:hover { color: var(--a3) }
:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px }

.wrap { width: 100%; max-width: 696px; margin: 0 auto; padding: 48px 16px 24px; flex: 1 }
.head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 36px }
.head img { width: 64px; height: 64px; image-rendering: pixelated; margin-bottom: 24px }
.head .btn { margin-top: 24px }
h1 { margin: 0; font-size: 48px; line-height: 60px; font-weight: 400 }
.lede { margin: 12px 0 0; color: var(--a2) }

.card { background: var(--raise); clip-path: var(--px2); padding: 24px; margin-bottom: 24px }
.card h2 { margin: 0 0 12px; font-size: 24px; line-height: 36px; font-weight: 400 }
.card p { margin: 0 0 24px; color: var(--a3) }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 24px; border: 0; cursor: pointer; text-decoration: none;
  font: inherit; background: var(--hi); color: var(--bg); clip-path: var(--px2);
}
.btn:hover { background: var(--a3); color: var(--bg) }
.btn.wide { width: 100% }
.btn:disabled { background: var(--hover); color: var(--a1); cursor: default }
.btn .ic { width: 18px; height: 18px; fill: currentColor; shape-rendering: crispEdges }

label.field { display: block; color: var(--a2); margin-bottom: 24px }
textarea, input[type=email] {
  display: block; width: 100%; margin-top: 12px; padding: 6px 12px; border: 0; resize: vertical;
  font: inherit; color: var(--hi); background: var(--bg); clip-path: var(--px1);
}
textarea { min-height: 120px }
textarea::placeholder, input::placeholder { color: var(--deco) }

.reasons { display: flex; flex-direction: column; gap: 0; margin: 12px 0 24px; padding: 0; border: 0 }
.reasons legend { padding: 0; margin-bottom: 12px; color: var(--a2) }
.check { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 48px }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px }
.check .box {
  flex: none; width: 24px; height: 24px; background: var(--bg); clip-path: var(--px1);
  display: flex; align-items: center; justify-content: center;
}
.check .box svg { width: 14px; height: 10px; fill: var(--bg); shape-rendering: crispEdges; visibility: hidden }
.check input:checked + .box { background: var(--hi) }
.check input:checked + .box svg { visibility: visible }
.check input:focus-visible + .box { outline: 2px solid var(--hi); outline-offset: 2px }
.check:hover .box { background: var(--hover) }
.check:hover input:checked + .box { background: var(--a3) }

.stars { display: flex; justify-content: center; gap: 12px; margin-bottom: 24px }
.stars .st { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--deco) }
.stars .st.on { color: var(--hi) }
.stars svg { width: 36px; height: 36px; fill: currentColor; shape-rendering: crispEdges }

.err { color: var(--hi); background: var(--hover); clip-path: var(--px1); padding: 6px 12px; margin: 0 0 24px }
.thanks { text-align: center; padding: 48px 24px }
.thanks h2 { font-size: 48px; line-height: 60px; margin-bottom: 12px }
.thanks p { margin: 0 }

.foot {
  width: 100%; max-width: 696px; margin: 0 auto; padding: 24px 16px 36px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; color: var(--a1);
}
.foot nav { display: flex; gap: 24px; flex-wrap: wrap }
.foot a { color: var(--a2); text-decoration: none }
.foot a:hover { color: var(--hi) }

@media (max-width: 480px) {
  .wrap { padding-top: 36px }
  h1 { font-size: 24px; line-height: 36px }
  .thanks h2 { font-size: 24px; line-height: 36px }
  .card { padding: 24px 12px }
}