/* Dip Studio dip-site: free tooling estimator (the sanctioned heavy-green
   dark page). Sticky live-updating result panel, lead-gate unlock. */

.est-hero { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); padding-bottom: var(--section-y); }
.est-hero .container { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1024px) {
  .est-hero .container { grid-template-columns: 0.9fr 1.1fr; column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}

.est-intro { display: grid; gap: 1.3rem; align-content: start; }
@media (min-width: 1024px) { .est-intro { position: sticky; top: calc(var(--header-h) + 2rem); } }
.est-kicker {
  font-family: var(--font-display); font-size: var(--fs-label);
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--accent);
}
.est-intro h1 { color: var(--on-dark); max-width: 15ch; text-wrap: balance; }
.est-intro .lead { color: var(--on-dark-muted); max-width: 40ch; }
.est-points { display: grid; gap: 0.55rem; margin-top: 0.4rem; order: 10; }
.est-points li { position: relative; padding-left: 1.4rem; color: var(--on-dark); }
.est-points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55rem; height: 2px; background: var(--accent); }

/* result panel */
.est-result {
  margin-top: 0.4rem;
  border: 1px solid var(--hairline-dark); border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid; gap: 0.7rem;
  background: var(--dark-2);
}
.est-result__label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--on-dark-muted); }
.est-result__value {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--accent); display: grid; gap: 0.08em; font-variant-numeric: tabular-nums;
  transition: filter 0.4s var(--ease-out);
}
.est-result.is-locked .est-result__value { filter: blur(14px); }
.est-result__to { font-size: 0.72em; color: var(--on-dark); }
/* under 1024 the page stacks and the live panel follows the form it reacts
   to. The intro dissolves into the container grid (display: contents) so the
   panel takes its place after the form with order alone: no DOM move by
   script, so nothing shifts while the JS is still loading. The gaps reproduce
   the old spacing: intro to form = container gap, form to panel = gap + 1.6rem. */
@media (max-width: 1023.98px) {
  .est-hero .container { gap: 1.3rem; }
  .est-intro { display: contents; }
  .est-form { order: 20; margin-top: calc(clamp(2.5rem, 6vw, 5rem) - 1.3rem); }
  .est-result { order: 30; margin-top: calc(clamp(2.5rem, 6vw, 5rem) + 0.3rem); }
}
.est-result__note { color: var(--on-dark-muted); font-size: 0.98rem; }
.est-result__hint { color: var(--on-dark); font-size: 0.9rem; font-weight: 500; }
.est-result:not(.is-locked) .est-result__hint { display: none; }
.est-result__cta { margin-top: 0.6rem; display: none; }
.est-result.is-unlocked .est-result__cta { display: inline-flex; }

/* form column */
.est-form { display: grid; gap: 1.1rem; align-content: start; }
.est-field { display: grid; gap: 0.45rem; }
.est-field > span { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--on-dark-muted); }
.est-form .form__row--split { display: grid; gap: 1.1rem; }
@media (min-width: 700px) { .est-form .form__row--split { grid-template-columns: 1fr 1fr; } }
.est-form input, .est-form select {
  width: 100%;
  font-family: var(--font-body); font-size: 1rem;
  color: var(--on-dark); background: transparent;
  border: 1px solid rgba(244, 243, 239, 0.4); border-radius: var(--radius-pill);
  padding: 0.95rem 1.25rem;
  transition: border-color 0.25s var(--ease-out);
  appearance: none; -webkit-appearance: none;
}
.est-field { position: relative; }
.est-field--select::after {
  content: ""; position: absolute; right: 1.2rem; bottom: 1.45rem;
  width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--on-dark-muted); border-bottom: 2px solid var(--on-dark-muted);
  transform: rotate(45deg); pointer-events: none;
}
.est-form select option { color: var(--ink); background: var(--paper); }
.est-form ::placeholder { color: var(--on-dark-muted); opacity: 1; }
.est-form input:focus-visible, .est-form select:focus-visible { outline: none; border-color: var(--accent); }
.est-submit {
  width: 100%;
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  color: var(--accent); background: transparent;
  padding: 1.1rem 1.5rem; font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.est-submit:hover, .est-submit:focus-visible { background: var(--accent); color: var(--accent-ink); }
.est-form.is-unlocked .est-submit { display: none; }