/* Форма «Написать», вариант «Станция»: плоская страница, крупная типографика, всё от 16px */
.cf{--line:#34302a;--soft:#b9ae8c;--ease:cubic-bezier(.2,.7,.2,1);--snap:cubic-bezier(.6,0,.2,1);
 position:fixed;inset:0;z-index:9;background:var(--bg);color:var(--ink);overflow:auto;overscroll-behavior:contain;
 opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s;font-family:var(--mono)}
.cf.on{opacity:1;visibility:visible;transition:opacity .5s}
.cf *{box-sizing:border-box}
.cf-in{min-height:100%;display:flex;flex-direction:column;padding:calc(var(--hh) + clamp(16px,4vh,48px)) max(20px,env(safe-area-inset-right,0px)) calc(30px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px))}
.cf-sr,.cf-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.cf [hidden]{display:none!important}
.cf .cf-ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* верхняя строка: шаг + закрыть */
.cf-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(24px,5vh,56px)}
.cf-lbl{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cf-close{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .45s var(--ease)}
.cf-close:hover{background:var(--acc);border-color:var(--acc);color:var(--bg);transform:rotate(90deg)}
.cf-close:active{transform:rotate(90deg) scale(.92)}

/* шаг: слева вопрос, справа ответы */
.cf-form{flex:1}
.cf-step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.cf-done{flex:1;grid-template-columns:1fr}
.cf-h{margin:0;font:500 clamp(36px,4.6vw,64px)/1.05 var(--disp);letter-spacing:-.03em;outline:none;overflow:hidden;padding-bottom:.06em;text-wrap:balance}
.cf-h span{display:block}
.cf-done .cf-h{font-size:clamp(64px,12vw,180px);color:var(--acc)}
.cf-lead{margin:22px 0 0;max-width:42ch;font:400 18px/1.6 var(--mono);color:var(--soft)}
.cf-ref{margin:14px 0 0;font-size:16px;color:var(--dim)}

/* список типов задачи: строки как в архиве, ховер заливает строку слева направо */
.cf-list{margin:0;padding:0;border:0;border-top:1px solid var(--line)}
/* цвет текста меняется сразу, без серого промежутка: заливка идёт слева и сразу накрывает текст, а уходит вправо и открывает его */
.cf-row{position:relative;display:flex;align-items:center;gap:24px;height:76px;padding:0 20px;border-bottom:1px solid var(--line);cursor:pointer;isolation:isolate}
.cf-row input{position:absolute;opacity:0;pointer-events:none}
.cf-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--snap)}
.cf-row:hover::before,.cf-row:has(input:focus-visible)::before,.cf-row:has(input:checked)::before{transform-origin:left}
.cf-row s{width:32px;font:400 16px var(--mono);color:var(--dim);text-decoration:none}
.cf-row b{font:500 clamp(22px,2.2vw,30px) var(--disp);letter-spacing:-.02em;transition:transform .5s var(--ease)}
.cf-row .cf-dot{margin-left:auto;width:10px;height:10px;border-radius:50%;background:var(--acc);transition:transform .35s var(--ease),opacity .2s}
.cf-row .cf-ico{position:absolute;right:20px;width:46px;height:28px;stroke-width:1.5;opacity:0;transform:translateX(-20px);transition:transform .35s var(--ease),opacity .15s}
.cf-row:hover,.cf-row:has(input:focus-visible){color:var(--bg)}
.cf-row:hover::before,.cf-row:has(input:focus-visible)::before{transform:scaleX(1)}
.cf-row:hover s,.cf-row:has(input:focus-visible) s{color:var(--bg)}
.cf-row:hover b{transform:translateX(8px)}
.cf-row:hover .cf-dot,.cf-row:has(input:focus-visible) .cf-dot{transform:scale(0);opacity:0}
.cf-row:hover .cf-ico,.cf-row:has(input:focus-visible) .cf-ico{opacity:1;transform:none;transition-delay:.4s}
/* стрелка выезжает только когда жёлтая заливка дошла до конца строки; уходит сразу */
.cf-row:active b{transform:translateX(8px) scale(.98)}
/* выбранный: строка залита, мигает перед переходом */
.cf-row:has(input:checked){color:var(--bg)}
.cf-row:has(input:checked)::before{transform:scaleX(1);animation:cfPick .42s var(--snap)}
.cf-row:has(input:checked) s{color:var(--bg)}
.cf-row:has(input:checked) .cf-dot{transform:scale(0)}
.cf-row:has(input:checked) .cf-ico{opacity:1;transform:none}
@keyframes cfPick{40%{opacity:.55}}

/* поля: только линия снизу, при фокусе линия заливается жёлтым */
.cf-field{position:relative;display:block;margin:0 0 32px}
.cf-name{display:block;margin-bottom:10px;font:500 16px var(--mono);color:var(--ink);transition:color .3s}
.cf-name small{font-size:14px;font-weight:400;color:var(--dim);margin-left:8px}
.cf-field input,.cf-field textarea{display:block;width:100%;padding:8px 0 14px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:#f3ecd6;font:400 20px/1.5 var(--mono);outline:none;resize:none}
.cf-field textarea{min-height:120px}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:#6d6650}
.cf-line{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--snap)}
.cf-field:focus-within .cf-line{transform:scaleX(1)}
.cf-field:focus-within .cf-name{color:var(--acc)}
.cf-field:hover input,.cf-field:hover textarea{border-bottom-color:var(--dim)}
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.cf-grid .wide{grid-column:1/-1}

/* бюджет: крупные чипсы 48px */
.cf-chips{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:10px}
.cf-chips legend{padding:0;margin-bottom:14px}
.cf-chips label{position:relative;cursor:pointer}
.cf-chips input{position:absolute;opacity:0;pointer-events:none}
.cf-chips span{display:inline-flex;align-items:center;height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font:500 16px var(--mono);transition:background .3s,border-color .3s,color .3s,transform .2s}
.cf-chips label:hover span{border-color:var(--ink)}
.cf-chips label:active span{transform:scale(.96)}
.cf-chips input:checked+span{background:var(--acc);border-color:var(--acc);color:var(--bg)}
.cf-chips input:focus-visible+span{outline:2px solid var(--acc);outline-offset:3px}
.cf-note{margin:8px 0 0;font:400 14px/1.6 var(--mono);color:var(--dim)}
.cf-note a{color:var(--ink);text-underline-offset:4px}.cf-note a:hover{color:var(--acc)}

/* низ: большой номер шага, ошибка, кнопки */
.cf-foot{display:flex;align-items:flex-end;gap:24px;margin-top:40px}
.cf-count{flex:none}
.cf-n{display:block;overflow:hidden;font:500 clamp(72px,10vw,150px)/.85 var(--disp);letter-spacing:-.02em;padding-bottom:.04em}
.cf-n i{display:inline-block;font-style:normal;animation:cfUp .7s var(--snap) both;animation-delay:calc(var(--k)*40ms)}
.cf-cap{display:block;margin-top:14px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.cf-err{flex:1;margin:0 0 12px;font:500 16px/1.5 var(--mono);color:#ffcf8a;text-align:right;min-height:1.5em}
.cf-act{display:flex;gap:12px;flex:none}
.cf-btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:12px 20px;border-radius:999px;font:500 16px/1 var(--mono);cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .2s,opacity .3s}
.cf-btn .cf-ico{width:20px;height:20px;transition:transform .45s var(--ease)}
.cf-btn.primary{background:var(--acc);border:1px solid var(--acc);color:var(--bg)}
.cf-btn.primary:hover{background:#ffdb6b;border-color:#ffdb6b}
.cf-btn.primary:hover .cf-ico{transform:translateX(5px)}
.cf-btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.cf-btn.ghost:hover{border-color:var(--ink)}
.cf-btn.ghost:hover .cf-ico{transform:translateX(-5px)}
.cf-btn:active{transform:scale(.96)}
.cf-btn:disabled{opacity:.35;cursor:default;transform:none}
.cf-btn:focus-visible,.cf-close:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.cf.sending .cf-btn.primary .cf-ico{animation:cfGo .9s var(--ease) infinite}
@keyframes cfGo{50%{transform:translateX(6px)}}

/* появление шага: заголовок выезжает из-под маски, остальное поднимается по очереди */
.cf-step.in .cf-h span{animation:cfUp .8s var(--snap) both}
.cf-step.in .cf-lead,.cf-step.in .cf-ref{animation:cfFade .7s var(--ease) .12s both}
.cf-step.in .cf-row,.cf-step.in .cf-field,.cf-step.in .cf-chips,.cf-step.in .cf-note{animation:cfFade .6s var(--ease) both;animation-delay:calc(.15s + var(--i,0)*55ms)}
.cf-step.out{opacity:0;transform:translateY(-16px);transition:opacity .25s,transform .25s}
@keyframes cfUp{from{transform:translateY(105%)}}
@keyframes cfFade{from{opacity:0;transform:translateY(18px)}}
.cf.shake .cf-err{animation:cfShake .4s}
@keyframes cfShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* пока форма открыта, нижние кнопки сцены не нужны */
body.contact-open .write,body.contact-open .tag{visibility:hidden}

/* телефон: одна колонка, низ прилипает к краю под пальцем */
@media (max-width:760px){
 .cf-step{grid-template-columns:1fr;gap:28px}
 .cf-lead{margin-top:14px;font-size:16px}
 .cf-row{height:64px;gap:16px;padding:0 14px}
 .cf-row s{width:24px;font-size:14px}
 .cf-row .cf-ico{right:14px;width:40px;height:24px}
 .cf-grid{grid-template-columns:1fr}
 .cf-foot{position:sticky;bottom:0;margin:32px calc(-1*max(20px,env(safe-area-inset-left,0px))) calc(-30px - env(safe-area-inset-bottom,0px));padding:24px max(20px,env(safe-area-inset-left,0px)) calc(20px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent);flex-wrap:wrap;align-items:center}
 .cf-n{font-size:44px}.cf-cap{display:none}
 .cf-err{order:-1;flex-basis:100%;text-align:left;margin:0}
 .cf-act{margin-left:auto}
 .cf-done .cf-h{font-size:72px}
}
@media (prefers-reduced-motion:reduce){.cf *,.cf{animation:none!important;transition:none!important}}