/* Сайт добавляет к стилю приложения ровно то, чего в приложении нет:
 * первый экран, поля формы и кнопку показа пароля. Всё остальное —
 * оттуда, поэтому вёрстка не может разъехаться.
 */

/* Атрибут hidden обязан скрывать: у листов задан свой display, а он
   перебивает правило браузера. */
[hidden] { display: none !important; }

.hero__h {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 6px 0 12px;
}

.hero__p {
    margin: 0 0 26px;
    color: var(--bone-2);
    font-size: 15px;
    line-height: 1.6;
}

/* Ссылки в шапке вместо приветствия. */
.masthead__sub { display: flex; gap: 14px; }
.masthead__sub a { color: var(--bone-3); text-decoration: none; }
.masthead__sub a:hover { color: var(--bone); }

/* Поля формы */
.field { margin-bottom: 12px; }

.flabel {
    display: block;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone-3);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    padding: 13px 14px;
    background: var(--ink);
    border: 1px solid var(--line-lit);
    border-radius: 10px;
    font-family: var(--ui);
    font-size: 15px;
    color: var(--bone);
}
.field input:focus { outline: none; border-color: var(--bone); }

/* Поле пароля с кнопкой показа: набранное вслепую нечем проверить. */
.pwd { position: relative; }
.pwd input { padding-right: 96px; }
.pwd__eye {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 7px 11px;
    border: none;
    border-radius: 999px;
    background: var(--ink-4);
    color: var(--bone-2);
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
}
.pwd__eye:hover { color: var(--bone); }

/* Карточка подписки в списке: та же панель, но с заголовком вида. */
.sub__kind {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--bone-3);
    margin-bottom: 10px;
}