/* BRANDBIT — growth diagnosis brief (ID-052) */
#brief[data-v2]{position:relative}
.bf-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}
.bf-dots{display:flex;gap:6px;flex:1;max-width:340px}
.bf-dots i{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.12);transition:background .4s}
.bf-dots i.on{background:linear-gradient(90deg,#5b43f1,#d6ff38)}
.bf-count{font-size:12px;letter-spacing:.14em;color:#b7abff;font-variant-numeric:tabular-nums}

.bf-bit{display:flex;align-items:center;gap:12px;margin:0 0 24px;min-height:44px}
.bf-bit img{width:40px;height:40px;flex:none;filter:drop-shadow(0 6px 10px #0007)}
.bf-bit-line{margin:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:15px;line-height:1.4;color:#f5f7ef;opacity:0;transform:translateY(6px)}
.bf-bit-line.is-on{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}

.bf-step{border:0;padding:0;margin:0 0 30px;min-width:0;min-height:300px}
.bf-step[hidden]{display:none!important}
.bf-step legend{font-size:clamp(30px,3.2vw,50px);line-height:1.02;letter-spacing:-.04em;font-weight:500;margin-bottom:26px;padding:0}
.bf-step legend em{font-style:normal;color:#d6ff38}
.bf-in-r{animation:bf-in-r .5s cubic-bezier(.16,1,.3,1)}
.bf-in-l{animation:bf-in-l .5s cubic-bezier(.16,1,.3,1)}
@keyframes bf-in-r{from{opacity:0;transform:translateX(40px)}}
@keyframes bf-in-l{from{opacity:0;transform:translateX(-40px)}}

.bf-field{display:block;margin:0 0 16px}
.bf-field span{display:block;font-size:13px;letter-spacing:.06em;color:#a4adbd;margin-bottom:8px}
.bf-field span small{color:#6f7686;letter-spacing:0}
.bf-field input,.bf-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:18px;color:#f5f7ef;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:15px 16px;transition:border-color .25s,background .25s}
.bf-field input:focus,.bf-field textarea:focus{outline:0;border-color:#d6ff38;background:rgba(214,255,56,.05)}
.bf-field textarea{min-height:110px;resize:vertical}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bf-icon{position:relative}
.bf-icon input{padding-left:50px}
.bf-icon b{position:absolute;left:14px;bottom:14px;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;color:#0e1218;background:#d6ff38}

.bf-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.bf-chips.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.bf-chip{position:relative;display:block;cursor:pointer}
.bf-chip input{position:absolute;opacity:0;pointer-events:none}
.bf-chip span{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:16px;line-height:1.25;transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,background .25s}
.bf-chip span small{font-size:12px;color:#8e93a8}
.bf-chip:hover span{border-color:rgba(214,255,56,.45);transform:translateY(-2px)}
.bf-chip input:checked+span{background:#d6ff38;border-color:#d6ff38;color:#0e1218;transform:scale(1.03)}
.bf-chip input:checked+span small{color:#3b4250}
.bf-chip input:focus-visible+span{outline:2px solid #d6ff38;outline-offset:3px}
.bf-meter-chip span{position:relative;overflow:hidden}
.bf-shake{animation:bf-shake .42s}
@keyframes bf-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.bf-controls{display:flex;gap:14px;align-items:center;justify-content:space-between}
.bf-controls button{font:inherit;font-size:17px;cursor:pointer;padding:15px 24px;border-radius:100px;background:#d6ff38;color:#0e1218;border:0;font-weight:600;transition:transform .25s}
.bf-controls button:hover{transform:translateY(-2px)}
.bf-controls #brief-back{background:transparent;color:#f5f7ef;padding-left:0;font-weight:400}
.bf-controls [hidden]{display:none!important}
.bf-hint{font-size:13px;color:#6f7686;margin:14px 0 0}

.bf-burst{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.bf-burst i{position:absolute;width:8px;height:8px;border-radius:2px;background:#d6ff38;animation:bf-pop 1s cubic-bezier(.16,1,.3,1) forwards}
.bf-burst i:nth-child(3n){background:#998aff}
.bf-burst i:nth-child(4n){background:#f5f7ef;border-radius:50%}
@keyframes bf-pop{from{transform:translate(0,0) scale(.3);opacity:1}to{transform:translate(var(--x),var(--y)) scale(1) rotate(200deg);opacity:0}}

/* the live brief card */
.project-conversation .brief-preview.bf-card{transform:rotate(1.5deg);border-radius:26px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(155deg,rgba(91,67,241,.28),rgba(255,255,255,.03) 55%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:30px}
.bf-card dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:22px 0 0;font-size:15px}
.bf-card dt{font-size:11px;letter-spacing:.12em;color:#8e93a8;padding-top:3px}
.bf-card dd{margin:0;overflow-wrap:anywhere}
.bf-card #preview-goal{white-space:pre-wrap;font-size:16px;line-height:1.5;margin:18px 0 0;color:#c9ccd2}
#bf-meter{--p:0%;margin-top:26px}
#bf-meter .bar{height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
#bf-meter .bar i{display:block;height:100%;width:var(--p);background:linear-gradient(90deg,#5b43f1,#d6ff38);transition:width .6s cubic-bezier(.16,1,.3,1)}
#bf-meter p{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:#b7abff;margin:0 0 8px}
#bf-meter p b{color:#d6ff38;font-size:14px;letter-spacing:0}

@media(max-width:700px){
  .bf-row{grid-template-columns:1fr}
  .bf-chips{grid-template-columns:1fr 1fr}
  .bf-chips.wide{grid-template-columns:1fr}
  .bf-step{min-height:0}
  .project-conversation .brief-preview.bf-card{transform:none}
}
@media(prefers-reduced-motion:reduce){.bf-in-r,.bf-in-l,.bf-shake,.bf-burst i{animation:none}}

.bf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bf-sent{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:22px 0 0}
.bf-sent[hidden]{display:none!important}
.bf-wa{display:inline-flex;align-items:center;gap:10px;background:#25d366;color:#0e1218;font-weight:600;border-radius:100px;padding:15px 24px;font-size:17px}
.bf-wa[hidden]{display:none}
.bf-download{font:inherit;font-size:15px;background:transparent;color:#b7abff;border:0;border-bottom:1px solid currentColor;padding:8px 0;cursor:pointer}
