:root{
  --paper:#F4F3F0; --card:#FFFFFF; --ink:#24282E; --soft:#5C636D; --faint:#9AA0A8;
  --rule:#E3E1DB; --rule-soft:#EFEDE8;
  --plum:#8A6B75; --plum-deep:#6E5560; --blue:#6E7F8D; --pine:#6F7D6E; --clay:#8E5F63;
  --bad:#9B4B50; --ok:#4A6150;
  --display:"Literata",Georgia,serif;
  --body:"Golos Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding-inline:20px}

/* ── появление блоков ────────────────────────────────────────────────
   Работает только когда скрипт жив: без него класс .js не появляется,
   и всё видно сразу. Страница не должна прятать текст из-за анимации. */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* ── шапка ─────────────────────────────────────────── */
header{padding-block:28px 0}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wordmark{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.22em;
  text-transform:uppercase}
.brand small{color:var(--faint);font-size:12.5px;letter-spacing:.04em}

/* ── герой ─────────────────────────────────────────── */
.hero{padding-block:44px 34px}
h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,7vw,46px);
  line-height:1.1;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.lede{font-size:clamp(17px,2.6vw,19px);color:var(--soft);margin:0 0 28px;max-width:30em}

/* полутоновая полоса: точки из палитры, размер идёт волной */
.tone{position:relative;border-radius:5px;overflow:hidden;border:1px solid var(--rule);
  background:var(--card)}
.tone canvas{display:block;width:100%;height:96px}
.tone-fallback{display:flex;height:96px}
.tone-fallback i{flex:1}
.tone-note{font-size:12.5px;color:var(--faint);margin-top:9px}

/* ── что входит ────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;
  margin-block:30px}
.item{background:var(--card);border:1px solid var(--rule);border-radius:6px;
  padding:18px 18px 16px;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.item:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(36,40,46,.07)}
.item b{display:block;font-family:var(--display);font-size:25px;font-weight:600;
  line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.item span{font-size:14.5px;color:var(--soft);display:block}

.quote{border-left:2px solid var(--plum);padding:4px 0 4px 18px;margin:30px 0;
  font-family:var(--display);font-size:17.5px;line-height:1.5;color:var(--soft)}

h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,4vw,28px);
  line-height:1.2;margin:0 0 14px;text-wrap:balance}
section.block{padding-block:34px;border-top:1px solid var(--rule)}
p{margin:0 0 14px;max-width:34em}
p:last-child{margin-bottom:0}

.tiers{display:grid;gap:12px;margin-top:20px}
.tier{background:var(--card);border:1px solid var(--rule);border-radius:6px;padding:18px;
  transition:border-color .25s var(--ease),transform .35s var(--ease)}
.tier:hover{border-color:var(--plum);transform:translateY(-2px)}
.tier .top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.tier h3{font-family:var(--display);font-size:19px;font-weight:600;margin:0}
.tier .price{font-weight:600;white-space:nowrap}
.tier p{font-size:14.5px;color:var(--soft);margin:8px 0 0}

.cta{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--ink);
  color:#F6F5F2;border:none;border-radius:5px;padding:15px 26px;font-family:var(--body);
  font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;margin-top:8px;
  overflow:hidden;transition:background .25s var(--ease),transform .12s var(--ease)}
.cta::after{content:"";position:absolute;inset:0;background:var(--plum);
  transform:translateY(101%);transition:transform .3s var(--ease);z-index:0}
.cta:hover::after{transform:translateY(0)}
.cta>*,.cta{z-index:1}
.cta span{position:relative;z-index:1}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
.cta[disabled]{opacity:.6;cursor:default}

/* ── анкета ────────────────────────────────────────── */
#anketa{padding-block:40px 70px;border-top:1px solid var(--rule)}
.steps{display:flex;gap:4px;margin-bottom:6px}
.steps i{flex:1;height:6px;border-radius:2px;background:var(--rule);position:relative;
  overflow:hidden}
.steps i::after{content:"";position:absolute;inset:0;background:var(--c,var(--plum));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.steps i.on::after{transform:scaleX(1)}
.stepmeta{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint);
  margin-bottom:22px}

fieldset{border:none;margin:0;padding:0}
fieldset[hidden]{display:none}
fieldset.enter{animation:slide .38s var(--ease) both}
@keyframes slide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
fieldset.enter.back{animation-name:slideBack}
@keyframes slideBack{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}

legend{font-family:var(--display);font-size:clamp(21px,4vw,26px);font-weight:600;
  padding:0;margin-bottom:6px;line-height:1.2}
.sublead{color:var(--soft);font-size:15px;margin:0 0 24px;max-width:34em}

.field{margin-bottom:22px}
.field>label,.qlabel{display:block;font-weight:600;font-size:15.5px;margin-bottom:4px}
.hint{font-size:13.5px;color:var(--faint);margin:0 0 9px;max-width:34em}
.opt{font-weight:400;color:var(--faint);font-size:13.5px}

input[type=text],input[type=number],textarea{width:100%;background:var(--card);
  border:1px solid var(--rule);border-radius:5px;padding:13px 14px;font:inherit;
  font-size:16px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input:focus,textarea:focus{outline:none;border-color:var(--plum);
  box-shadow:0 0 0 3px rgba(138,107,117,.14)}
input.bad,textarea.bad{border-color:var(--bad);animation:nudge .3s}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.choices{display:grid;gap:8px}
.choice{display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--rule);border-radius:5px;padding:13px 15px;cursor:pointer;
  transition:border-color .18s,background .18s,transform .18s var(--ease)}
.choice:hover{border-color:var(--plum);transform:translateX(2px)}
.choice input{margin:3px 0 0;accent-color:var(--plum);width:17px;height:17px;flex:none}
.choice span{font-size:15px;line-height:1.45}
.choice span em{display:block;font-style:normal;color:var(--faint);font-size:13.5px;
  margin-top:2px}
.choice.on{border-color:var(--plum);background:#FBF8F9}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{display:block;background:var(--card);border:1px solid var(--rule);
  border-radius:20px;padding:9px 16px;font-size:14.5px;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .18s var(--ease)}
.chip span:hover{transform:translateY(-1px)}
.chip input:checked+span{background:var(--ink);color:#F6F5F2;border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--plum);outline-offset:2px}

.scale{display:flex;gap:6px}
.scale .chip{flex:1}
.scale .chip span{text-align:center;border-radius:5px;padding:12px 0;
  font-variant-numeric:tabular-nums}
.scale-ends{display:flex;justify-content:space-between;font-size:12.5px;color:var(--faint);
  margin-top:7px;gap:12px}

/* фото */
.drops{display:grid;gap:12px}
.drop{position:relative;background:var(--card);border:1.5px dashed var(--rule);
  border-radius:6px;padding:18px;display:flex;gap:15px;align-items:center;cursor:pointer;
  transition:border-color .2s,background .2s}
.drop:hover,.drop.over{border-color:var(--plum);background:#FBF8F9}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.thumb{width:58px;height:76px;border-radius:4px;background:var(--rule-soft);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;animation:pop .35s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
.thumb svg{opacity:.35}
.drop .t{display:block;font-weight:600;font-size:15px}
.drop .s{display:block;font-size:13.5px;color:var(--faint);margin-top:3px}
.drop.filled{border-style:solid;border-color:var(--pine)}
.drop.filled .s{color:var(--ok)}

.rules{background:var(--card);border:1px solid var(--rule);border-radius:6px;
  padding:18px 20px;margin-bottom:22px}
.rules b{display:block;margin-bottom:8px;font-size:15px}
.rules ol{margin:0 0 10px;padding-left:20px;font-size:14.5px;color:var(--soft)}
.rules li{margin-bottom:5px}
.rules .warn{font-size:14px;color:var(--clay);margin:0}

.nav{display:flex;gap:12px;align-items:center;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--rule)}
.back{background:none;border:none;color:var(--soft);font:inherit;font-size:15px;
  cursor:pointer;padding:12px 4px}
.back:hover{color:var(--ink)}
.nav .cta{margin:0}
.err{color:var(--bad);font-size:14px;margin-top:12px;min-height:1px;max-width:34em}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--soft);
  margin-top:6px}
.consent input{margin-top:3px;accent-color:var(--plum);width:17px;height:17px;flex:none}
.consent a{color:var(--plum)}

.done{text-align:center;padding-block:40px;animation:slide .5s var(--ease) both}
.done h2{margin-bottom:12px}
.done p{margin-inline:auto}

footer{border-top:1px solid var(--rule);padding-block:26px 40px;font-size:13px;
  color:var(--faint)}
footer a{color:var(--faint)}
.ft{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (max-width:480px){
  .tone canvas,.tone-fallback{height:74px}
  .nav{flex-direction:row-reverse;justify-content:space-between}
  .scale-ends{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{animation:none!important;transition:none!important}
  .js .rise{opacity:1;transform:none}
}

/* запасные свотчи, если скрипт не выполнился */
.tone-fallback .s1{background:#EDE7E0}
.tone-fallback .s2{background:#D8D3CB}
.tone-fallback .s3{background:#A9B7C0}
.tone-fallback .s4{background:#6E7F8D}
.tone-fallback .s5{background:#7D8A99}
.tone-fallback .s6{background:#4F5A66}
.tone-fallback .s7{background:#3E4750}
.tone-fallback .s8{background:#6F7D6E}
.tone-fallback .s9{background:#A79C8E}
.tone-fallback .s10{background:#A88B94}
.tone-fallback .s11{background:#8A6B75}
.tone-fallback .s12{background:#8E5F63}
.cta-row{margin-top:22px}
.cta-note{margin-top:10px}