/* Echips — приём устройства в ремонт. Вариант A «Бумага». Форма клиента (компьютер + телефон). */
:root{
--paper:#F6F2EA; --panel:#FFFFFF; --panel-2:#FBF8F2;
--ink:#221C15; --ink-2:#4A4038; --ink-3:#6B6155; --line:#E4DDCF; --line-strong:#D3C9B7;
--amber:#FFB224; --amber-deep:#8A5A00; --amber-ink:#1A1100; --amber-soft:#FFF0D2; --amber-line:#F0C766;
--done:#2F7A4F; --done-soft:#E4F3EA;
--mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
--grotesk:'Geologica','Golos Text',system-ui,sans-serif;
--font:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--font)}
h1,h2{font-family:var(--grotesk);margin:0}
p{margin:0}
button{font:inherit;cursor:pointer}
[hidden]{display:none!important}
.page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 600px}
.intro{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:64px 40px 56px 96px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{display:block;height:64px;width:auto}
.brand span{font-size:14px;color:var(--ink-3)}
.hero{display:flex;flex-direction:column;gap:16px;max-width:600px}
.eyebrow{font:400 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-deep)}
.hero h1{font-weight:700;font-size:52px;line-height:1.08;letter-spacing:-.01em;text-wrap:balance}
.hero p{font-size:17px;color:var(--ink-2);max-width:520px}
.contact{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.contact b{font:600 15px var(--font);color:var(--ink)}
.contact span{font-size:14px;color:var(--ink-3)}
.phone-link{color:var(--amber-deep);font-weight:700;text-decoration:none}
.phone-link:hover{text-decoration:underline}
.status-link{margin-top:10px;font:600 14px var(--font);color:var(--amber-deep);text-decoration:none;width:fit-content}
.status-link:hover{text-decoration:underline}
.intro-end{min-height:1px}
.panel{display:flex;align-items:center;justify-content:center;padding:40px 96px 40px 24px}
.card{width:100%;max-width:480px;background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(34,28,21,.04),0 18px 40px rgba(34,28,21,.06)}
.card-head{padding:26px 32px 18px;background:var(--amber-soft);border-bottom:1px solid var(--amber-line)}
.card-head b{display:block;font:700 18px var(--grotesk)}
.card-head span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
form{padding:24px 32px 28px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
form>div{min-width:0;max-width:100%;overflow:hidden}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row2>div{min-width:0;max-width:100%;overflow:hidden}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
input,textarea{width:100%;min-width:0;max-width:100%;min-height:48px;font:400 16px var(--font);padding:12px 14px;border-radius:11px;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--ink);outline:none;box-sizing:border-box}
input[type="date"]{-webkit-appearance:none;appearance:none}
input[type="file"]{padding:9px 12px;font-size:13.5px;color:var(--ink-2)}
input[type="file"]::file-selector-button{margin-right:12px;min-height:32px;padding:0 14px;border:0;border-radius:8px;background:var(--amber-soft);color:var(--amber-deep);font:600 13px var(--font);cursor:pointer}
input[type="file"]::file-selector-button:hover{background:var(--amber-line)}
.file-hint{display:block;margin-top:6px;font-size:12px;line-height:1.45;color:var(--ink-3)}
input::placeholder,textarea::placeholder{color:#7A7064}
input:focus,textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
textarea{resize:none;height:96px}
.submit{margin-top:4px;min-height:52px;background:var(--amber);color:var(--amber-ink);border:0;border-radius:12px;font:700 16px var(--grotesk)}
.submit:hover{background:#F5A50E}
.submit:focus-visible,.again:focus-visible{outline:2px solid #B87F0B;outline-offset:2px}
.consent{font-size:12px;line-height:1.5;color:var(--ink-3);text-align:center}
.err{font-size:13px;color:var(--err);background:#FBEAE7;border-radius:9px;padding:10px 12px}
.done{padding:72px 32px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.done .ic{width:60px;height:60px;border-radius:50%;background:var(--done-soft);color:var(--done);display:grid;place-items:center}
.done h2{font-size:22px}
.done p{font-size:15px;color:var(--ink-2)}
.done p b{font:600 15px var(--mono);color:var(--ink)}
.again{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:10px;padding:0 20px;background:var(--panel);color:var(--ink-2);border:1px solid var(--line-strong);border-radius:10px;font:600 14px var(--font);text-decoration:none}
.again:hover{border-color:var(--amber)}
/* Телефон и небольшой планшет */
@media (max-width:960px){
.page{grid-template-columns:1fr}
.intro{padding:24px 20px 8px;gap:24px}
.brand img{height:52px}
.hero{gap:10px}
.hero h1{font-size:30px;line-height:1.12}
.hero p{font-size:15px}
.panel{padding:16px 20px 32px}
.card{max-width:560px;border-radius:18px}
.card-head{padding:20px 20px 14px}
form{padding:22px 20px 24px}
.intro-end{display:none}
.phone-link{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:8px 14px;border-radius:99px;background:var(--amber-soft);font-size:15px}
.phone-link::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat;-webkit-mask-repeat:no-repeat;mask:url('data:image/svg+xml;utf8,') center/contain no-repeat}
}
/* Узкий телефон: input type=date у Safari не сжимается до половины ширины — раскладываем в один столбец */
@media (max-width:480px){
.row2{grid-template-columns:1fr}
}