/* ThinkTankPro — страницы опросников (/brief/flex-brick.html, /brief/other-product.html).
   Идентификаторы и классы разметки шагов задаёт app.js — их не переименовывать. */

.q-main{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(72px,9vw,128px)}
.q-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px);align-items:start}
.q-intro{position:sticky;top:calc(var(--header-h) + 24px)}
.q-intro .kicker{margin-bottom:22px}
.q-title{font-weight:600;font-size:clamp(40px,4.8vw,76px);line-height:.95;letter-spacing:-.05em;margin-bottom:22px}
.q-title em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.q-copy{color:var(--ink-2);font-size:17px;max-width:42ch}
.q-art{margin:28px 0 8px;border:1px solid var(--rule);border-radius:16px;background:var(--paper-hi);padding:14px}
.q-art svg{width:100%;height:auto}
.q-art figcaption{margin-top:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.q-path{margin-top:26px;border-top:1px solid var(--rule)}
.q-path li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:14px 0;border-bottom:1px solid var(--rule-2)}
.q-path li>span{font-family:var(--font-mono);font-size:11px;color:var(--signal-ink);padding-top:3px}
.q-path strong{display:block;font-size:15.5px;letter-spacing:-.01em}
.q-path small{display:block;color:var(--ink-2);font-size:14px;line-height:1.45;margin-top:2px}
.q-method{margin-top:18px;font-size:13.5px;color:var(--ink-3);max-width:46ch}

/* ---------- Карточка опросника ---------- */
.quiz-card{position:relative;padding:clamp(22px,3.2vw,44px);border:1px solid var(--rule);border-radius:24px;background:var(--paper-hi);box-shadow:0 50px 90px -60px rgba(18,18,17,.45)}
.quiz-card::before{content:"";position:absolute;left:clamp(22px,3.2vw,44px);right:clamp(22px,3.2vw,44px);top:0;height:3px;background:linear-gradient(90deg,var(--signal) 0 18%,transparent 18%);border-radius:0 0 3px 3px}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border:1px solid var(--rule);border-radius:999px;font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal)}
.counter{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
.progress{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin-bottom:clamp(24px,3vw,36px)}
.progress span{position:relative;height:6px;border-radius:2px;background:var(--rule-2);overflow:hidden}
.progress span::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.progress span.done::after{transform:none}
.progress span.current::after{transform:none;background:var(--signal)}

.eyebrow{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-ink)}
.step-heading{margin-bottom:22px}
.step-heading h2,#result h2{margin:10px 0 8px;font-size:clamp(28px,3vw,42px);font-weight:600;line-height:1.05;letter-spacing:-.04em}
.step-heading p{color:var(--ink-2);font-size:16px;max-width:56ch}
#step-fields{margin:0;padding:0;border:0;min-width:0}
#step-fields>*{animation:stepIn .45s var(--ease-out)}
@keyframes stepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;z-index:1;left:16px;top:17px;width:20px;height:20px;margin:0;appearance:none;-webkit-appearance:none;border:1.5px solid var(--ink-3);border-radius:50%;background:var(--paper-hi);cursor:pointer;transition:border-color .2s,background-color .2s,box-shadow .2s}
.choice input[type="checkbox"]{border-radius:5px}
.choice input:checked{border-color:var(--signal);background:var(--signal);box-shadow:inset 0 0 0 4px var(--paper-hi)}
.choice input[type="checkbox"]:checked{box-shadow:none;background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.choice input:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.choice-text{display:block;min-height:56px;padding:15px 16px 15px 50px;border:1px solid var(--rule);border-radius:14px;background:var(--paper);font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.005em;transition:border-color .2s,background-color .2s,transform .2s var(--ease-out)}
.choice-text small{display:block;margin-top:4px;font-weight:400;font-size:13px;color:var(--ink-2)}
.choice:hover .choice-text{border-color:var(--ink-3)}
.choice input:checked+.choice-text{border-color:var(--ink);background:var(--paper-hi);box-shadow:0 10px 24px -18px rgba(18,18,17,.5)}
.choice:active .choice-text{transform:scale(.99)}

.field{margin-top:18px}
.field:first-child{margin-top:0}
.choices+.field,.choices+.branch,.branch .field{margin-top:18px}
.field-label{display:block;margin-bottom:8px;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.optional{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.03em;color:var(--ink-3)}
.input,.quiz-card textarea,.quiz-card select{width:100%;padding:13px 14px;border:1px solid var(--rule);border-radius:12px;background:var(--paper);font-size:16px;line-height:1.45;color:var(--ink);transition:border-color .2s,box-shadow .2s,background-color .2s}
.quiz-card textarea{min-height:104px;resize:vertical}
.input::placeholder,.quiz-card textarea::placeholder{color:var(--ink-3)}
.input:focus,.quiz-card textarea:focus,.quiz-card select:focus{outline:none;border-color:var(--ink);background:var(--paper-hi);box-shadow:0 0 0 4px var(--signal-soft)}
.quiz-card select{appearance:none;-webkit-appearance:none;padding-right:38px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23121211' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center/16px no-repeat}
.quantity-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:10px}
.help{margin-top:7px;font-size:13px;color:var(--ink-3);line-height:1.45}
.branch[hidden]{display:none}

.extended-services,.market-options{margin-top:18px;border:1px dashed var(--rule);border-radius:14px;background:var(--paper);overflow:hidden}
.extended-services[open],.market-options[open]{border-style:solid;border-color:var(--ink-3)}
.extended-services summary,.market-options summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 46px 14px 16px;cursor:pointer;list-style:none;font-weight:600;font-size:15px}
.extended-services summary::-webkit-details-marker,.market-options summary::-webkit-details-marker{display:none}
.extended-services summary::after,.market-options summary::after{content:"+";position:absolute;right:14px;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:400 16px/1 var(--font-mono);transition:transform .3s var(--ease-out),background-color .3s}
.extended-services[open] summary::after,.market-options[open] summary::after{transform:rotate(45deg);background:var(--signal)}
.market-options summary span{font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--ink-3)}
.extended-services>p,.extended-services>.choices,.market-options>p,.market-options>.choices,.market-options>.tier-label{margin-left:16px;margin-right:16px}
.extended-services>p{margin-top:0;margin-bottom:12px;font-size:13.5px;color:var(--ink-2)}
.extended-services>.choices,.market-options>.choices:last-child{margin-bottom:16px}
.extended-services .choice-text,.market-options .choice-text{background:var(--paper-hi)}
.market-options>.help{margin:0 16px 12px}
.tier-label{margin-top:16px}

.navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:clamp(24px,3vw,36px);padding-top:20px;border-top:1px solid var(--rule)}
.nav-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);text-align:center}
.quiz-card .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);font-weight:600;font-size:16px;letter-spacing:-.01em;transition:background-color .25s,color .25s,border-color .25s,transform .3s var(--ease-out),opacity .2s}
.quiz-card .button.primary{background:var(--ink);color:var(--paper)}
.quiz-card .button.primary:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.quiz-card .button.secondary{background:transparent;color:var(--ink)}
.quiz-card .button.secondary:hover{background:var(--paper)}
.quiz-card .button:disabled{opacity:.38;cursor:default}
.quiz-card .button:active:not(:disabled){transform:scale(.98)}

#result{animation:stepIn .5s var(--ease-out)}
.result-intro{color:var(--ink-2);margin-bottom:18px}
.summary{width:100%;min-height:420px;padding:18px 18px 18px 22px;border:1px solid var(--rule);border-radius:14px;background:var(--paper) repeating-linear-gradient(transparent 0 27px,var(--rule-2) 27px 28px);background-attachment:local;font-family:var(--font-mono);font-size:13.5px;line-height:28px;color:var(--ink);resize:vertical}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.copy-status{min-height:1.5em;margin-top:10px;font-size:14px;color:var(--green)}
.text-button{margin-top:6px;padding:8px 0;border:0;background:none;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.text-button:hover{color:var(--signal-ink)}
.small-note{font-size:13px;color:var(--ink-3)}
.privacy{display:flex;gap:12px;margin-top:26px;padding-top:18px;border-top:1px dashed var(--rule);font-size:13.5px;color:var(--ink-2);line-height:1.5}
.privacy-icon{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:14px}
.privacy strong{color:var(--ink)}
.noscript{margin-top:16px;padding:14px;border:1px solid var(--signal);border-radius:12px}

/* ---------- Каталог опросников ---------- */
.cat-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:24px;align-items:end;margin-bottom:clamp(32px,5vw,64px)}
.cat-head h1{font-weight:600;font-size:clamp(44px,6.4vw,104px);line-height:.92;letter-spacing:-.055em}
.cat-head h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--ink)}
.cat-head p{color:var(--ink-2);max-width:44ch}
.cat-privacy{display:flex;gap:14px;margin-top:22px;padding:18px 20px;border:1px solid var(--rule);border-radius:16px;background:var(--paper-hi);color:var(--ink-2);font-size:14.5px}
.cat-privacy strong{color:var(--ink)}
.cat-list{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.cat-list li{padding:4px 10px;border:1px solid var(--rule);border-radius:999px;font-family:var(--font-mono);font-size:11px;color:var(--ink-2)}

.ftr--compact{padding-top:48px}
.ftr--compact .ftr-grid{padding-bottom:36px}

@media (max-width:1000px){
  .q-layout{display:flex;flex-direction:column;gap:0}
  .q-intro{display:contents}
  .q-intro>.kicker,.q-intro>.q-title,.q-intro>.q-copy{order:1}
  .q-intro>.q-copy{margin-bottom:6px}
  .quiz-card{order:2;width:100%;margin-top:22px}
  .q-path{order:3;width:100%;margin-top:36px}
  .q-method{order:4}
  .q-art{display:none}
  .cat-head{grid-template-columns:1fr}
}
@media (max-width:620px){
  .choices{grid-template-columns:1fr}
  .quantity-row{grid-template-columns:1fr}
  .quiz-card{border-radius:18px;margin-inline:-6px}
  .navigation{flex-wrap:wrap}
  .nav-note{order:3;width:100%}
  .quiz-card .button{min-height:50px;padding:0 20px}
  .summary{min-height:360px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  #step-fields>*,#result{animation:none}
}

/* Иллюстрации в колонке опросника */
.q-art .qa-bricks rect{fill:var(--paper-lo);stroke:var(--ink);stroke-width:1}
.q-art .qa-bricks rect.alt{fill:var(--signal-soft)}
.q-art .qa-bricks rect.hot{fill:var(--signal);stroke:var(--signal)}
.q-art .qa-line{fill:none;stroke:var(--ink);stroke-width:1.4}
.q-art .qa-fill{fill:var(--ink)}
.q-art .qa-wave1{fill:none;stroke:var(--ink);stroke-width:18;stroke-linecap:round;stroke-dasharray:16 5}
.q-art .qa-wave2{fill:none;stroke:var(--paper-hi);stroke-width:12;stroke-linecap:round;stroke-dasharray:16 9}
.q-art .qa-face{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.q-art .qa-top{fill:var(--paper-lo);stroke:var(--ink);stroke-width:1.4}
.q-art .qa-hole{fill:none;stroke:var(--signal);stroke-width:2}
.q-art .qa-doc{fill:var(--paper-hi);stroke:var(--ink);stroke-width:1.4}
.q-art .qa-text{fill:none;stroke:var(--ink-3);stroke-width:5;stroke-linecap:round}

/* Панель заявки внутри итога опросника (ui/lead.js) и подпись к «биржевому» копированию */
.quiz-card .ttp-lead{--lead-bg:var(--paper);--lead-field:var(--paper-hi);margin:26px 0 0}
.result-alt-k{margin:26px 0 10px;font-size:11px;color:var(--ink-3)}
.q-art .qa-dot{fill:none;stroke:var(--ink-3);stroke-width:2}
.cat-head .kicker{max-width:none}

/* Условные образцы цвета для гибкого кирпича: зерно и швы нарисованы CSS, без картинок и внешних запросов */
.swatches{margin:0 0 18px;padding:0;border:0;min-width:0}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:10px}
.swatch{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.swatch input{position:absolute;opacity:0;inset:0;z-index:1;cursor:pointer}
.swatch-chip{display:block;aspect-ratio:3/2;border:1px solid var(--rule);border-radius:10px;background:
  repeating-linear-gradient(0deg,transparent 0 22px,rgba(18,18,17,.62) 22px 26px),
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(18,18,17,.62) 46px 50px),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),var(--sw);transition:transform .25s var(--ease-out),box-shadow .25s,border-color .25s}
.swatch-chip.is-other{background:repeating-linear-gradient(45deg,var(--paper-lo) 0 8px,var(--paper-hi) 8px 16px);border-style:dashed}
.swatch-name{font-size:13px;line-height:1.3;color:var(--ink-2)}
.swatch:hover .swatch-chip{transform:translateY(-2px)}
.swatch input:checked+.swatch-chip{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper-hi),0 0 0 4px var(--ink)}
.swatch input:checked~.swatch-name{color:var(--ink);font-weight:600}
.swatch input:focus-visible+.swatch-chip{outline:2px solid var(--signal);outline-offset:3px}