.brief{display:grid;grid-template-columns:calc(453px * var(--s)) 1fr;gap:calc(60px * var(--s));align-items:start}
.brief__aside{position:sticky;top:calc(100px * var(--s));display:flex;flex-direction:column;gap:calc(24px * var(--s))}
.brief__count{display:flex;align-items:baseline;line-height:1;margin-top:calc(20px * var(--s))}
.brief__count .t-outline{-webkit-text-stroke:1px rgba(35,39,57,.6);font-size:.55em;margin-left:.08em}
.brief__label{margin-top:calc(-10px * var(--s))}
.brief__steps{display:flex;flex-direction:column;gap:calc(8px * var(--s));border-top:1px solid var(--t-line);padding-top:calc(20px * var(--s));counter-reset:st}
.brief__steps li{display:flex;gap:calc(12px * var(--s));align-items:baseline;color:var(--t-text);transition:color .5s var(--ease)}
.brief__steps li::before{counter-increment:st;content:"0" counter(st);font-size:var(--fs-xs);letter-spacing:var(--tr-xs);color:var(--c-accent);width:calc(26px * var(--s))}
.brief__steps li.is-cur{color:var(--t-head)}
.brief__steps li.is-done{color:var(--t-head)}
.brief__steps li.is-done::after{content:"";width:calc(8px * var(--s));height:calc(8px * var(--s));border-radius:50%;background:var(--c-accent);margin-left:auto}

.brief__form{position:relative;border:1px solid var(--t-line);padding:calc(60px * var(--s)) calc(60px * var(--s)) calc(48px * var(--s));background:var(--c-white);min-height:calc(560px * var(--s))}
.brief__progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--t-line)}
.brief__progress span{display:block;height:100%;width:20%;background:var(--c-accent);transition:width .8s var(--ease)}
.brief__step{gap:calc(28px * var(--s));padding-bottom:calc(48px * var(--s));border-bottom:1px solid var(--t-line);margin-bottom:calc(48px * var(--s))}
.brief__step:last-of-type{border-bottom:0;margin-bottom:0}
.brief__q{color:var(--t-head);padding:0;margin-bottom:calc(8px * var(--s));max-width:calc(690px * var(--s));text-wrap:balance}
.brief__step .f{max-width:calc(560px * var(--s))}
.brief__step .form__grid .f{max-width:none}
.brief__nav{display:flex;flex-wrap:wrap;gap:calc(16px * var(--s));align-items:center;margin-top:calc(8px * var(--s))}
.brief__nav .brief__back{margin-right:auto}
.brief__chips{display:flex;flex-wrap:wrap;gap:calc(10px * var(--s));margin-top:calc(8px * var(--s))}
.brief__chips .chip-t{font-size:var(--fs-ui);letter-spacing:var(--tr-ui)}
html.js .brief__step select[data-chips]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
html.js .brief__step .f:has(select[data-chips]) > label{margin-bottom:calc(6px * var(--s))}
.brief__suggest{display:flex;flex-wrap:wrap;gap:calc(8px * var(--s));margin-top:calc(10px * var(--s))}
.brief__suggest .chip-t{font-size:var(--fs-xs);letter-spacing:var(--tr-xs);text-transform:uppercase;padding:calc(8px * var(--s)) calc(12px * var(--s))}

.brief__sum{display:grid;grid-template-columns:calc(180px * var(--s)) 1fr;gap:calc(10px * var(--s)) var(--gut);border:1px solid var(--t-line);padding:calc(24px * var(--s));margin:0 0 calc(28px * var(--s));background:var(--c-paper)}
.brief__sum dt{color:var(--t-text);text-transform:uppercase;font-size:var(--fs-xs);letter-spacing:var(--tr-xs);padding-top:calc(4px * var(--s))}
.brief__sum dd{margin:0;color:var(--t-head);font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:400}
.brief__sum dd.is-empty{color:var(--c-accent)}
.brief__sum dd button{font:inherit;color:var(--c-accent);text-decoration:underline;text-underline-offset:3px;margin-left:calc(10px * var(--s));font-size:var(--fs-ui)}

html.js .brief__form.is-steps .brief__step{display:none;border-bottom:0;margin-bottom:0;padding-bottom:calc(20px * var(--s))}
html.js .brief__form.is-steps .brief__step.is-cur{display:flex;animation:brief-in .8s var(--ease) both}
@keyframes brief-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
html.js .brief__form.is-steps .brief__submit{display:none}
html.js .brief__form.is-steps.is-last .brief__submit{display:inline-flex}
html.js .brief__form.is-steps.is-last .brief__next{display:none}

.pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--t-line)}
.pair__i{padding:calc(48px * var(--s));display:flex;flex-direction:column;gap:calc(20px * var(--s));position:relative;min-height:calc(420px * var(--s))}
.pair__i+.pair__i{border-left:1px solid var(--t-line)}
.pair__no{position:absolute;right:calc(32px * var(--s));top:calc(16px * var(--s));font-size:calc(200px * var(--s));line-height:1;-webkit-text-stroke:1px var(--t-line);color:transparent;pointer-events:none}
.pair__i .t-h3{max-width:calc(453px * var(--s));position:relative}
.pair__i .t-read{max-width:calc(453px * var(--s))}

@media (prefers-reduced-motion:reduce){
  html.js .brief__form.is-steps .brief__step.is-cur{animation:none}
  .brief__progress span{transition:none}
}
@media (max-width:980px){
  .brief{grid-template-columns:1fr;gap:calc(32px * var(--s))}
  .brief__aside{position:static}
  .brief__aside .t-read,.brief__aside .t-cap,.brief__steps{display:none}
  .brief__form{padding:calc(32px * var(--s)) calc(20px * var(--s))}
  .pair{grid-template-columns:1fr}
  .pair__i+.pair__i{border-left:0;border-top:1px solid var(--t-line)}
  .pair__i{min-height:0}
  .pair__no{font-size:calc(120px * var(--s))}
  .brief__sum{grid-template-columns:1fr}
}