/* The full estimator at /estimates (card vsRQJOgH; plan
   docs/ai/2026/10/2026-10-02-estimator-page), over audiences.css, whose
   hero, eyebrow, numbers, chips, icons and contact form it shares, in
   the sellers' colour (--au-accent). The bands run as the audience
   pages' do: the tinted hero, the form on white, what next on the
   sellers' wash, then the contact form.
   No inline style (the CSP). The business type switches Step 2 through
   :has(): every type's form note and line label is in the page, and
   only the checked type's shows */

/* The hero: the words, and the three steps as its card */
.est-trust {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-3);
  margin: var(--po-sp-6) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--po-fs-lg);
  color: var(--po-ink-2);
}

.est-trust li {
  display: flex;
  align-items: center;
  gap: var(--po-sp-3);
}

.est-plan {
  width: min(100%, 540px);
  padding: var(--po-sp-8);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.est-plan-h {
  font-size: var(--po-fs-3xl);
}

.est-plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-2);
  margin: var(--po-sp-5) 0 0;
  padding: 0;
  list-style: none;
}

.est-plan-list a {
  display: flex;
  align-items: center;
  gap: var(--po-sp-4);
  padding: var(--po-sp-3) var(--po-sp-4);
  border: 1px solid var(--po-line);
  border-radius: 12px;
  color: var(--po-body);
}

.est-plan-list a:hover {
  border-color: var(--au-accent);
  background: var(--au-wash);
  text-decoration: none;
}

.est-plan-t {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: var(--po-fs-base);
}

.est-plan-t b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.est-plan-f {
  margin: var(--po-sp-4) 0 0;
  padding-top: var(--po-sp-4);
  border-top: 1px solid var(--po-line);
  font-size: var(--po-fs-md);
  color: var(--po-muted);
}

/* The form beside its result */
.est-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: var(--po-sp-10);
  align-items: start;
}

.est {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-5);
  min-width: 0;
}

.est-card {
  padding: var(--po-sp-6) var(--po-sp-8) var(--po-sp-8);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-1);
  scroll-margin-top: 90px;
}

.est-card-h {
  display: flex;
  align-items: flex-start;
  gap: var(--po-sp-4);
  margin-bottom: var(--po-sp-5);
}

.est-card-h > div {
  flex: 1;
  min-width: 0;
}

.est-card-h h2 {
  font-size: var(--po-fs-2xl);
}

.est-card-h p {
  margin: var(--po-sp-1) 0 0;
  font-size: var(--po-fs-base);
  color: var(--po-muted);
}

.est-grid,
.est-figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--po-sp-5) var(--po-sp-4);
}

.est-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.est-lbl {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.est-lbl small {
  display: block;
  margin-top: 2px;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-sm);
  font-weight: 400;
  color: var(--po-muted);
}

.est-field input,
.est-field select {
  width: 100%;
  height: 50px;
  padding: 0 var(--po-sp-3);
  border: 1px solid #b9c2ca;
  border-radius: 8px;
  background: #fff;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-xl);
  color: var(--po-ink-soft);
}

.est-field input:focus,
.est-field select:focus {
  border-color: var(--po-brand-2);
}

/* A dollar figure: the sign sits inside the box, before the number */
.est-money {
  position: relative;
  display: block;
}

.est-money::before {
  content: "$";
  position: absolute;
  top: 50%;
  left: var(--po-sp-3);
  transform: translateY(-50%);
  font-size: var(--po-fs-xl);
  color: var(--po-muted);
}

.est-money input {
  padding-left: 28px;
  font-variant-numeric: tabular-nums;
}

.est-choice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--po-sp-2);
  margin: 0 0 var(--po-sp-4);
  padding: 0;
  border: 0;
}

.est-choice legend {
  margin-bottom: var(--po-sp-3);
  padding: 0;
  font-size: var(--po-fs-lg);
  color: var(--po-ink-soft);
}

.est-choice-col {
  flex-direction: column;
  margin: 0;
}

/* A radio drawn as a chip; the native control stays for the keyboard */
.est-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--po-sp-2);
  min-height: 46px;
  padding: 0 var(--po-sp-4);
  border: 1px solid var(--po-line-2);
  border-radius: 10px;
  background: #fff;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  font-weight: 500;
  color: var(--po-ink-2);
  cursor: pointer;
}

.est-radio:hover {
  border-color: #cfd5da;
  background: var(--po-bg-2);
}

.est-radio:has(input:checked) {
  border-color: var(--au-accent);
  background: var(--au-wash);
  color: var(--po-ink-soft);
}

.est-radio input {
  margin: 0;
  accent-color: var(--au-accent);
}

.est-form p,
.est-note {
  margin: 0 0 var(--po-sp-3);
  font-size: var(--po-fs-base);
}

.est-note {
  margin: var(--po-sp-5) 0 0;
  padding: var(--po-sp-3) var(--po-sp-4);
  border-radius: 10px;
  background: var(--po-bg-3);
  color: var(--po-ink-2);
}

.est-pic {
  margin: 0 0 var(--po-sp-5);
  font-size: var(--po-fs-base);
}

.est-pic summary {
  font-family: var(--po-font-ui);
  font-weight: 600;
  color: var(--au-accent);
  cursor: pointer;
}

.est-pic img {
  display: block;
  margin-top: var(--po-sp-3);
  border: 1px solid var(--po-line-2);
  border-radius: 10px;
}

/* The switch: hidden until their type is checked */
.est-form,
.est-fig .est-lbl,
.est-fig.is-some {
  display: none;
}

.est:has(#est-type-s-corp:checked) .est-form[data-type="s-corp"],
.est:has(#est-type-c-corp:checked) .est-form[data-type="c-corp"],
.est:has(#est-type-sole-proprietorship:checked)
  .est-form[data-type="sole-proprietorship"],
.est:has(#est-type-partnership:checked)
  .est-form[data-type="partnership"],
.est:has(#est-type-s-corp:checked) .est-lbl[data-type="s-corp"],
.est:has(#est-type-c-corp:checked) .est-lbl[data-type="c-corp"],
.est:has(#est-type-sole-proprietorship:checked)
  .est-lbl[data-type="sole-proprietorship"],
.est:has(#est-type-partnership:checked)
  .est-lbl[data-type="partnership"] {
  display: block;
}

.est:has(#est-type-s-corp:checked) .est-fig[data-types~="s-corp"],
.est:has(#est-type-c-corp:checked) .est-fig[data-types~="c-corp"],
.est:has(#est-type-sole-proprietorship:checked)
  .est-fig[data-types~="sole-proprietorship"],
.est:has(#est-type-partnership:checked)
  .est-fig[data-types~="partnership"] {
  display: flex;
}

.est-go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--po-sp-4);
}

.est-go .btn {
  min-width: 220px;
  height: 52px;
  font-size: var(--po-fs-xl);
  font-weight: 700;
}

.est-go span {
  font-size: var(--po-fs-md);
  color: var(--po-muted);
}

/* Once the form updates as the visitor types (estimator.js marks it
   is-live), the button is only for a narrow screen, where the result
   sits below the form: it points down at it. On a wide screen the result
   beside the form already follows the figures, so the button goes.
   Without script the button stays, the one way to an estimate */
.est.is-live .est-go .btn::after {
  content: "\2193";
  margin-left: var(--po-sp-2);
}

@media (min-width: 1041px) {
  .est.is-live .est-go {
    display: none;
  }
}

/* The result panel, beside the form and kept in view while it scrolls:
   its column runs the form's whole height, so the panel can stick */
.est-side {
  align-self: stretch;
  min-width: 0;
}

.est-result {
  position: sticky;
  top: 94px;
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-4);
  scroll-margin-top: 90px;
}

.est-panel {
  padding: var(--po-sp-6) var(--po-sp-6) var(--po-sp-5);
  border: 1px solid var(--po-line-2);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--po-sh-3);
}

.est-panel .eyebrow {
  color: var(--au-accent);
}

.est-big {
  margin: var(--po-sp-2) 0 0;
  font-family: var(--po-font-ui);
  font-size: clamp(36px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--po-ls-tight);
  color: var(--po-ink-soft);
}

.est-big.is-empty {
  color: var(--po-line-2);
}

.est-lead {
  margin: var(--po-sp-1) 0 0;
  font-size: var(--po-fs-base);
  color: var(--po-body);
}

.est-bar {
  display: block;
  width: 100%;
  height: 12px;
  margin-top: var(--po-sp-5);
  overflow: visible;
}

.est-bar-track {
  fill: var(--po-bg-3);
}

.est-bar-band {
  fill: var(--au-accent);
  opacity: 0.85;
}

.est-bar-mark {
  fill: var(--po-ink-soft);
}

.est-ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--po-sp-2);
  font-size: var(--po-fs-sm);
  color: var(--po-muted);
}

.est-ends b {
  display: block;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-lg);
  color: var(--po-ink-soft);
}

.est-ends span:last-child {
  text-align: right;
}

.est-rows {
  margin: var(--po-sp-5) 0 0;
  border-top: 1px solid var(--po-line);
}

.est-rows div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--po-sp-3);
  padding: var(--po-sp-3) 0;
  border-bottom: 1px solid var(--po-line);
}

.est-rows dt {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  color: var(--po-ink-2);
}

.est-rows dd {
  margin: 0;
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-base);
  font-weight: 600;
  text-align: right;
  color: var(--po-ink-2);
}

.est-rows small {
  display: block;
  font-family: var(--po-font-text);
  font-size: var(--po-fs-sm);
  font-weight: 400;
  color: var(--po-muted);
}

.est-rows .is-final dt,
.est-rows .is-final dd {
  color: var(--po-ink-soft);
}

.est-error {
  margin-top: var(--po-sp-3);
  padding: var(--po-sp-3) var(--po-sp-4);
  border-radius: 10px;
  background: #fbeaea;
  color: var(--po-warn);
  font-size: var(--po-fs-base);
}

.est-next {
  margin: var(--po-sp-4) 0 0;
  padding: var(--po-sp-3) var(--po-sp-4);
  border-radius: 10px;
  background: var(--au-wash);
  font-size: var(--po-fs-base);
  color: var(--po-ink-2);
}

.est-disclaimer {
  margin: var(--po-sp-4) 0 0;
  font-size: var(--po-fs-sm);
  color: var(--po-muted);
}

/* What the seller would take home, locked behind the app's sign-in */
.est-lock {
  padding: var(--po-sp-6);
  border-radius: 18px;
  background: var(--au-wash);
}

.est-lock h3 {
  display: flex;
  align-items: center;
  gap: var(--po-sp-3);
  font-size: var(--po-fs-xl);
}

.est-lock p {
  margin: var(--po-sp-4) 0 0;
  font-size: var(--po-fs-base);
}

.est-lock-rows {
  margin: var(--po-sp-4) 0 0;
}

.est-lock-rows div {
  display: flex;
  justify-content: space-between;
  gap: var(--po-sp-3);
  padding: var(--po-sp-2) 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--au-accent) 30%, #fff);
  font-size: var(--po-fs-base);
}

.est-lock-rows dd {
  margin: 0;
  color: var(--po-faint);
}

.est-lock-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--po-sp-2);
  margin-top: var(--po-sp-4);
}

.est-lock .est-fine {
  font-size: var(--po-fs-sm);
  color: var(--po-muted);
}

/* Then what: three ways on, on the sellers' wash */
.est-next-sec {
  background: var(--au-wash);
  border-top: 1px solid var(--po-line);
}

.est-next-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--po-sp-4);
  margin: var(--po-sp-8) 0 0;
  padding: 0;
  list-style: none;
}

.est-next-list a {
  display: flex;
  flex-direction: column;
  gap: var(--po-sp-2);
  height: 100%;
  padding: var(--po-sp-6);
  border: 1px solid var(--po-line-2);
  border-radius: 14px;
  background: #fff;
  color: var(--po-body);
}

.est-next-list a:hover {
  box-shadow: var(--po-sh-2);
  text-decoration: none;
}

.est-next-list b {
  font-family: var(--po-font-ui);
  font-size: var(--po-fs-xl);
  font-weight: 600;
  color: var(--po-ink-soft);
}

.est-next-list span {
  font-size: var(--po-fs-base);
}

.est-next-list .est-go-to {
  margin-top: auto;
  padding-top: var(--po-sp-2);
  font-family: var(--po-font-ui);
  font-weight: 700;
  color: var(--au-accent);
}

@media (max-width: 1040px) {
  .est-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .est-result {
    position: static;
  }
  .est-next-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .est-grid,
  .est-figs {
    grid-template-columns: minmax(0, 1fr);
  }
  .est-card,
  .est-panel,
  .est-plan {
    padding: var(--po-sp-5);
  }
  .est-card-h .au-chip {
    display: none;
  }
  /* The hero's steps: the "Within ± 40%" chip goes under the words,
     which would otherwise be squeezed to a word a line */
  .est-plan-list a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--po-sp-2) var(--po-sp-3);
  }
  .est-plan-list .au-chip {
    grid-column: 2;
    justify-self: start;
  }
  .est-go .btn {
    width: 100%;
  }
}