/* the comparison table and the survey form */

.roof-table { display: none; }

.roof-table-mobile-wrap { display: block; margin-top: 1.5rem; }
.roof-table-mobile-wrap .h3-home {
  margin: 1.75rem 0 0.75rem;
  color: var(--text-color--secondary-light);
}
.roof-table-mobile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-top: 1px solid var(--line-color--hairline);
}
.roof-table-mobile-cell {
  padding: 0.6875rem 0.25rem;
  border-bottom: 1px solid #1a1c1f;
  font-size: 0.875rem;
  color: var(--text-color--secondary);
}
.roof-table-mobile-cell:nth-child(2n) { text-align: right; color: var(--text-color--primary); }
.roof-table-mobile-cell.is-white { color: var(--accent--green); }
.is-mobile-price { margin-top: 1.75rem; width: 100%; }
.table-note { margin-top: 1.5rem; font-size: 0.8125rem; max-width: 46rem; }

.panel-quote-wrap {
  border: 1px solid #1f2124;
  border-radius: var(--radius--card);
  background: linear-gradient(180deg, #131416 0%, #0d0e10 100%);
  padding: 1.75rem 1.25rem 2rem;
  scroll-margin-top: 5rem;
}
.quote-intro .h2-home { margin-bottom: 0.75rem; }
.quote-intro p { max-width: 30rem; font-size: 0.9375rem; }
.quote-contact {
  margin: 1.5rem 0 2rem;
  padding-top: 1.125rem;
  border-top: 1px solid #2a2d31;
  font-size: 0.875rem;
}
.quote-contact dt {
  font-family: var(--font--display);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color--secondary);
  margin-top: 0.875rem;
}
.quote-contact dd { margin: 0.125rem 0 0; }

.quote-body { min-width: 0; }
.quote-form { display: block; }

.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.form-field { min-width: 0; }
.form-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--font--display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color--secondary);
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: #0c0d0f;
  border: 1px solid #2c2f33;
  border-radius: 0.5rem;
  color: var(--text-color--primary);
  font-family: var(--font--body);
  font-size: 1rem;
}
.form-textarea { resize: vertical; min-height: 6.5rem; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--accent--green); }
.form-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9ba1a8 50%), linear-gradient(135deg, #9ba1a8 50%, transparent 50%); background-position: calc(100% - 1.125rem) 1.25rem, calc(100% - 0.75rem) 1.25rem; background-size: 0.375rem 0.375rem, 0.375rem 0.375rem; background-repeat: no-repeat; }

.is-hidden-field { position: absolute; left: -6000px; width: 1px; height: 1px; overflow: hidden; }

.form-consent { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.625rem; }
.form-check { width: 1.125rem; height: 1.125rem; margin: 0.1875rem 0 0; accent-color: var(--accent--green); flex: 0 0 auto; }
.form-consent-label { flex: 1 1 12rem; font-size: 0.8125rem; color: var(--text-color--secondary-light); line-height: 1.5; }
.form-consent-label a { color: var(--accent--green); text-decoration: underline; }
.form-consent .form-note { flex: 1 1 100%; }

.form-note { display: none; font-style: normal; font-size: 0.8125rem; color: #ef7f74; margin-top: 0.375rem; }
.form-field.has-error .form-note { display: block; }
.form-field.has-error .form-input,
.form-field.has-error .form-textarea,
.form-field.has-error .form-check { border-color: #ef7f74; }

.form-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; margin-top: 0.5rem; }
#quote-submit[disabled] { opacity: 0.6; cursor: progress; }

.quote-thanks {
  border: 1px solid var(--accent--green-dim);
  border-radius: var(--radius--card);
  background: #0d1512;
  padding: 1.5rem 1.25rem;
}
.quote-thanks h3 { margin-bottom: 0.625rem; }
.quote-thanks p { font-size: 0.9375rem; color: var(--text-color--secondary-light); margin-bottom: 0.5rem; }
.quote-thanks a { color: var(--accent--green); }
.quote-ref { font-size: 0.8125rem; }
.quote-ref strong { font-family: var(--font--display); letter-spacing: 0.04em; color: #fff; }

@media screen and (min-width: 40rem) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
  .form-field.is-wide { grid-column: 1 / -1; }
  .form-actions { flex-direction: row; align-items: center; gap: 1.25rem; }
  .form-actions .button { flex: 0 0 auto; }
  .panel-quote-wrap { padding: 2.25rem 2rem 2.5rem; }
  .quote-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.25rem; }
  .quote-contact dt { margin-top: 0; grid-row: 1; }
  .quote-contact dd { grid-row: 2; }
}

@media screen and (min-width: 64rem) {
  .roof-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 1rem;
  }
  .roof-table-mobile-wrap { display: none; }
  .aff-thead .roof-th {
    padding: 1.25rem 1.25rem 1.5rem;
    vertical-align: bottom;
    text-align: left;
    font-family: var(--font--display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color--primary);
    border-bottom: 1px solid #2a2d31;
  }
  .roof-th.is-1 { width: 22%; color: var(--text-color--secondary); }
  .svg-roof-mark { color: var(--accent--green); margin-bottom: 0.75rem; }
  .img-roof-table-cards {
    width: 100%;
    max-width: 11rem;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.625rem;
    margin-bottom: 0.875rem;
    background: #1d1f22;
  }
  .roof-td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #1a1c1f;
    font-size: 0.9375rem;
    color: var(--text-color--secondary-light);
    vertical-align: top;
  }
  .roof-td.is-first-column {
    color: var(--text-color--secondary);
    font-family: var(--font--display);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .roof-td.is-white { color: #fff; }
  .roof-td.has-green-border { border-top: 1px solid var(--accent--green-dim); border-bottom: 1px solid var(--accent--green-dim); background: rgba(79, 208, 122, .05); }
  .roof-td.is-bottom-left { border-bottom: 0; }
  .roof-tr:last-child .roof-td { border-bottom: 0; padding-top: 1.5rem; }
  .panel-quote-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3.5rem; padding: 3rem 2.75rem 3.25rem; }
  .quote-contact { display: block; }
  .quote-contact dt { margin-top: 1rem; }
  .quote-thanks { padding: 2rem 1.75rem; }
}