/* Страница «Видит ли Алиса ваш бизнес?». Рамка — kvant.css (копия site.css kvant-lab.com) и блок #demo:
   цвета, шрифты, кнопки и поля оттуда, новых цветов, фонов и теней нет. */

/* то, что на главной привязано к #demo */
main > #alisa:only-child { min-height: 100svh; }
#alisa .try__stage { grid-column: auto; min-height: 0; }
#alisa .seq { grid-column: auto; gap: 32px; }
#alisa .seq h3 { margin: 6px 0 0; }
#alisa .seq li p { margin-top: 4px; }
#alisa .seq li.was::before { background: var(--black); border-color: var(--black); }
.al__col { grid-column: 3; min-width: 0; display: grid; gap: 40px; align-content: start; }
@media (max-width: 960px) { .al__col { grid-column: 1; } }

/* форма: название и город в строку */
.al__form { max-width: none; }
.al__pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.al__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.al__hint { font-size: 14px; line-height: 1.4; color: var(--mut); }
.al__hint a { text-decoration: underline; text-underline-offset: 3px; }
.try__in::placeholder { color: var(--mut); opacity: .7; }
@media (max-width: 700px) { .al__pair { grid-template-columns: 1fr; } .al__go .try__go { width: 100%; justify-content: center; } }

/* итог */
.al__res { display: grid; gap: 0; }
.al__who { font-size: 15px; line-height: 1.45; color: var(--mut); }
.al__who b { font-weight: 500; color: var(--fg); }
.al__who b:empty + span { display: none; }
.al__meta { display: block; }
.al__score { margin-top: 20px; }
.al__num { display: flex; align-items: baseline; gap: 14px; font-family: var(--latin); font-variant-numeric: lining-nums tabular-nums; line-height: .9; }
.al__num b { font-weight: 300; font-size: clamp(96px, 10.5vw, 152px); letter-spacing: -.04em; }
.al__num small { font-weight: 300; font-size: clamp(26px, 2.4vw, 36px); color: var(--mut); }
.al__bar { position: relative; height: 2px; margin-top: 24px; background: var(--ln); overflow: hidden; }
.al__bar i { position: absolute; inset: 0; background: var(--black); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); }
html.motion .al__bar i { transition: transform .8s var(--ease); }
.al__scale { display: flex; justify-content: space-between; margin-top: 10px; font: 400 13px/1.3 var(--latin); color: var(--mut); font-variant-numeric: tabular-nums; }
.al__verdict { margin-top: 32px; font-weight: 300; font-size: var(--h3); line-height: 1.25; max-width: 24em; text-wrap: balance; }
.al__pos { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--mut); }
.al__pos b { font-weight: 500; color: var(--fg); }
.al__pos:empty { display: none; }

.al__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.al__cta .btn, .al__lead .try__go { height: 48px; padding: 0 24px; }
.al__cta .btn--line[aria-pressed="true"] { background: var(--white); }
.al__lead { display: grid; gap: 20px; max-width: 480px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ln); }
.al__lead-say { font-size: 17px; line-height: 1.45; }
.al__lead-say:empty { display: none; }
.al__thanks { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--ln); font-weight: 300; font-size: var(--h3); line-height: 1.25; }
@media (max-width: 700px) { .al__cta .btn, .al__lead .try__go { width: 100%; justify-content: center; } }

.al__part { margin-top: 56px; }
.al__part > .label { color: var(--mut); }
.al__why { margin-top: 16px; border-top: 1px solid var(--ln); }
.al__why li { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; padding: 16px 0; border-bottom: 1px solid var(--ln); font-size: 17px; line-height: 1.45; }
.al__why li .label { padding-top: 4px; color: var(--mut); }

/* конкуренты и «может, это вы?»: карточки одного размера, в ряд по три */
.al__rivals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.al__card { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; min-height: 168px; padding: 20px; background: var(--surf); border: 1px solid var(--ln); text-align: left; }
.al__rivals li { display: grid; }
.al__rivals--rows { grid-template-columns: 1fr; }
.al__rivals--rows .al__card { min-height: 0; grid-template-rows: auto; }
.al__card h3 { font-size: 18px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
.al__card p { font-size: 15px; line-height: 1.4; color: var(--mut); }
.al__card .al__gp { justify-self: start; padding: 4px 8px; border: 1px solid var(--fg); font: 400 12px/1.2 var(--latin); letter-spacing: .04em; text-transform: uppercase; color: var(--fg); }
button.al__card { width: 100%; cursor: pointer; transition: border-color var(--t1) var(--ease); }
button.al__card:hover { border-color: var(--fg); }
button.al__card .al__go-me { font-size: 15px; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) and (min-width: 961px), (max-width: 700px) { .al__rivals { grid-template-columns: 1fr; } .al__card { min-height: 0; grid-template-rows: auto; } }

#alisa .try__reset { justify-self: start; margin-top: 40px; }
.al__fine { max-width: 40em; font-size: 14px; line-height: 1.5; color: var(--mut); }

@media (max-width: 960px) { #alisa .split { gap: 48px; } }
@media (prefers-reduced-motion: reduce) { .al__bar i { transition: none; } }
/* телефон: пока идёт проверка, коробка держит высоту, подвал не поднимается к шагам */
@media (max-width: 960px) { #alisa .al__wait { min-height: 62svh; } }
/* 320: кнопки .btn по умолчанию в одну строку, «Пришлите настоящий ответ Алисы» шире колонки — переносим, колонка не шире экрана */
@media (max-width: 960px) { #alisa .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .al__cta .btn { height: auto; min-height: 48px; padding-block: 12px; white-space: normal; text-align: center; line-height: 1.3; } }