/* ==========================================================================
   demo.css — the estimate generator.

   A long form that must not feel like one. Grouped into five short sections
   with their own headings, two or three fields per row where the fields are
   short, so the whole thing reads as five small decisions rather than
   eighteen boxes.

   The multipliers are printed in the dropdown labels on purpose. A contractor
   handing over their labour rate wants to see what the machine is doing with
   it, and "Emergency (x1.5)" answers that before they have to ask.
   ========================================================================== */

.demopage{padding-block:clamp(26px,4.5vw,52px) clamp(40px,6vw,80px)}
.demopage .wrap{max-width:820px}

.demo__intro{margin-bottom:clamp(20px,3vw,30px)}
.demo__intro h1{
  font-size:clamp(25px,3.6vw,36px);
  line-height:1.16;
  letter-spacing:-.02em;
  margin:12px 0 10px;
}
.demo__intro p{font-size:15px;line-height:1.6;color:var(--soft);margin:0;max-width:58ch}

.demo__sec{margin-top:26px}
.demo__sec:first-of-type{margin-top:0}
.demo__sec h2{
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
}

.demo__row{display:grid;gap:14px}
.demo__row--2{grid-template-columns:1fr 1fr}
.demo__row--3{grid-template-columns:1fr 1fr 1fr}
.demo__row .form__field+.form__field{margin-top:0}
@media (max-width:640px){
  .demo__row--2,.demo__row--3{grid-template-columns:1fr;gap:0}
  .demo__row .form__field+.form__field{margin-top:16px}
}

/* Money fields get a $ so nobody wonders whether to type one. */
.demo__money{position:relative}
.demo__money::before{
  content:"$";
  position:absolute;left:13px;top:34px;
  font-size:14.5px;color:var(--muted);pointer-events:none;
}
.demo__money input{padding-left:26px}

.demo select{
  width:100%;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--bg);
  font-size:14.5px;
  color:var(--ink);
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}
.demo select:focus{
  outline:none;border-color:var(--accent);background-color:var(--surface);
  box-shadow:0 0 0 4px rgba(0,153,255,.12);
}

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

.demo__result{
  margin-top:22px;
  padding:22px 24px;
  border:1px solid var(--accent);
  background:var(--tint);
  border-radius:var(--r-lg);
  display:none;
}
.demo__result.is-on{display:block}
.demo__result .k{
  font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin:0 0 6px;
}
.demo__result .v{
  font-size:clamp(24px,3.6vw,32px);
  font-weight:800;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 8px;line-height:1.1;
}
.demo__result p{margin:0;font-size:14px;line-height:1.55;color:var(--soft)}
.demo__result .ref{
  display:inline-block;margin-top:10px;
  font-size:11.5px;letter-spacing:.06em;color:var(--muted);
}

.demo__note{
  margin-top:16px;font-size:11.5px;line-height:1.6;color:var(--muted);
}