/* ==========================================================================
   brief.css — the discovery brief, on top of the site's tokens
   ========================================================================== */

.briefpage{padding-block:clamp(36px,6vw,72px) clamp(60px,8vw,100px)}

.brief__intro{max-width:640px;margin-bottom:clamp(28px,4vw,40px)}
.brief__intro h1{
  font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.05em;
  margin:18px 0 16px;
}

.brief{
  max-width:640px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--shadow);
  padding:clamp(24px,3.4vw,38px);
}

.brief__bar{height:4px;border-radius:2px;background:var(--tint);overflow:hidden}
.brief__bar i{
  display:block;height:100%;border-radius:2px;background:var(--accent);
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.brief__step{
  margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-deep);
}

.brief h2{
  font-size:clamp(21px,2.6vw,27px);letter-spacing:-.035em;line-height:1.15;
  margin:14px 0 22px;
}
.brief h3{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-deep);margin:28px 0 12px;
}
.brief .note{font-size:14px;line-height:1.6;color:var(--soft);margin:-10px 0 22px}

/* ------------------------------------------------------------- fields -- */

.field{margin-bottom:26px}
.field:last-child{margin-bottom:0}

.field .q{
  font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.015em;
  margin-bottom:11px;line-height:1.4;
}
.field .opt{
  font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em;margin-left:6px;
}

.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt-btn{
  padding:11px 16px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--surface);font:inherit;font-size:14px;font-weight:600;
  color:var(--ink);cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease,transform .12s ease;
}
.opt-btn:hover{border-color:var(--accent);background:var(--tint)}
.opt-btn:active{transform:translateY(1px)}
.opt-btn[aria-pressed="true"]{
  background:var(--ink);border-color:var(--ink);color:#fff;
}

.field input,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg);font:inherit;font-size:15px;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.field textarea{resize:vertical;min-height:84px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 4px rgba(0,153,255,.12);
}

.money{position:relative;display:flex;align-items:center}
.money span{
  position:absolute;left:15px;font-size:15px;font-weight:700;color:var(--muted);
  pointer-events:none;
}
.money input{padding-left:30px}

/* ---------------------------------------------------------------- nav -- */

.brief__nav{display:flex;gap:12px;align-items:center;margin-top:30px}
.brief__nav .btn--accent{margin-left:auto}
.brief__saved{margin-top:14px;font-size:12.5px;color:var(--muted);min-height:1.2em}

/* -------------------------------------------------------------- result -- */

.result h2{margin-top:6px}
.result ul{margin:0 0 4px;padding-left:20px}
.result li{font-size:14.5px;line-height:1.6;color:var(--soft);margin-bottom:9px}

.pricebox{
  background:var(--tint);border-radius:var(--r-md);padding:20px 22px;margin:8px 0 6px;
}
.pricebox h3{margin:0 0 12px;color:var(--accent-deep)}
.price-line{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-size:15px;color:var(--soft);padding:6px 0;
}
.price-line b{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.price-note{font-size:14px;color:var(--soft);padding:4px 0}

.result__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

@media (max-width:520px){
  .brief__nav{flex-direction:column-reverse;align-items:stretch}
  .brief__nav .btn{width:100%;margin-left:0}
  .result__cta .btn{width:100%}
}