/* ============================================================
   PRICING PAGE — loads after styles.css and owners.css
   (reuses .pill, .h-hero, .h-sec, .lead, .btn, .points)
   ============================================================ */

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}

/* shared white "glow" card used by the calculator and the sales form */
.calc,
.sales-form {
  position: relative;
  border: 1px solid #D9EEE0;
  border-radius: 28px;
  background:
    radial-gradient(110% 50% at 50% -8%, rgba(8, 166, 63, .09) 0%, rgba(8, 166, 63, 0) 62%),
    #FFFFFF;
  box-shadow: 0 40px 80px -40px rgba(8, 120, 50, .30), 0 2px 6px rgba(0, 0, 0, .03);
}

/* ============================================================
   HERO — copy left, calculator right
   ============================================================ */
.pr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: var(--frow-gap);
  align-items: center;
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

.pr-hero .pill {
  margin-bottom: 30px
}

.pr-hero .h-hero {
  font-size: clamp(38px, 5.5vw, 76px)
}

.pr-hero .lead {
  max-width: 540px;
  font-size: clamp(17px, 1.38vw, 20px);
  line-height: 1.66;
  color: #4A5056;
  letter-spacing: -0.014em;
}

.pr-ticks {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 14px 34px;
}

.pr-ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.pr-ticks svg,
.inc li::before {
  flex: none
}

.pr-ticks svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--tint);
  stroke: var(--green);
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- calculator ---------- */
.calc {
  padding: 30px 30px 28px
}

.calc-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.calc-ico {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  background: var(--tint);
}

.calc-ico svg {
  width: 24px;
  height: 24px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calc-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2
}

.calc-head p {
  margin: 2px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.4
}

.calc-label {
  display: block;
  margin: 26px 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.calc-input {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.calc-input:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(8, 166, 63, .12);
}

.calc-step {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 13px;
  background: #F3F5F4;
  transition: background .2s ease;
}

.calc-step:hover {
  background: var(--tint)
}

.calc-step svg {
  width: 20px;
  height: 20px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.calc-input input {
  flex: 1;
  min-width: 0;
  width: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-align: right;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-input input::-webkit-outer-spin-button,
.calc-input input::-webkit-inner-spin-button,
.calc-rent input::-webkit-outer-spin-button,
.calc-rent input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.calc-unit {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
}

/* slider with a green fill up to the thumb (--p set from JS) */
.calc-range {
  --p: 7%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 22px 0 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green) var(--p), #E4E9E6 var(--p));
  outline: none;
  cursor: pointer;
}

.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green);
  box-shadow: 0 4px 12px rgba(8, 120, 50, .3);
}

.calc-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--green);
  box-shadow: 0 4px 12px rgba(8, 120, 50, .3);
}

.calc-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(8, 166, 63, .2)
}

.calc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.calc-chips button {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.calc-chips button:hover {
  border-color: var(--green)
}

.calc-chips button.on {
  background: var(--tint);
  border-color: var(--green);
  color: var(--green)
}

.calc-chips button::after {
  content: " beds";
  font-weight: 500;
  color: var(--muted)
}

/* result */
.calc-out {
  margin-top: 22px;
  padding: 20px 22px 16px;
  border: 1px solid #D6ECDD;
  border-radius: 20px;
  background: linear-gradient(180deg, #F3FAF5 0%, #FFFFFF 100%);
}

.calc-main > span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

.calc-main strong {
  display: block;
  margin: 2px 0 2px;
  font-size: clamp(44px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.calc-main small {
  font-size: 14px;
  color: var(--muted)
}

.calc-rows {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1.5px dashed #DDE5E0;
}

.calc-rows div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.35;
}

.calc-rows dt {
  color: #4A5056
}

.calc-rows dd {
  margin: 0;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-rent {
  display: inline-flex;
  align-items: baseline;
  margin-left: 4px;
  color: var(--muted);
  font-size: 13.5px;
}

.calc-rent input {
  width: 64px;
  margin-left: 1px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1.5px dashed #B9C7BF;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.calc-rent input:focus {
  border-bottom-color: var(--green)
}

.calc-sales {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: #FFF8E8;
  border: 1px solid #F6E2B4;
  font-size: 14px;
  line-height: 1.45;
  color: #5B4A1E;
}

.calc-sales a {
  color: var(--green);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px
}

.calc-cta {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.calc-cta .btn {
  flex: 1;
  padding-inline: 16px
}

/* ============================================================
   SECTIONS
   ============================================================ */
.pr-sec {
  padding-block: clamp(56px, 6vw, 100px)
}

.pr-sec-head {
  max-width: 780px;
  margin-bottom: clamp(32px, 3.4vw, 52px);
}

.pr-sec-head .pill,
.sales-copy .pill {
  margin-bottom: 24px
}

.pr-sec .h-sec {
  font-size: clamp(34px, 4.3vw, 58px);
  font-weight: 800;
  letter-spacing: -0.048em;
  line-height: 1.02;
  text-wrap: balance;
}

.pr-sec .lead {
  max-width: 600px;
  margin-top: 20px;
  font-size: clamp(17px, 1.38vw, 20px);
  line-height: 1.66;
  color: #4A5056;
}

/* ---------- everything included ---------- */
.inc {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.inc-col {
  padding: 26px 24px 18px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.inc-col:hover {
  border-color: #CDE9D6;
  box-shadow: 0 24px 48px -30px rgba(8, 120, 50, .35);
}

.inc-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.inc-col h3 svg {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 11px;
  background: var(--tint);
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inc ul {
  list-style: none;
  margin: 0;
  padding: 0
}

.inc li {
  position: relative;
  padding: 11px 0 11px 26px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  letter-spacing: -0.012em;
}

.inc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* ---------- comparison ---------- */
.cmp-hint {
  display: none
}

.cmp-wrap {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.cmp {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.cmp th,
.cmp td {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 15.5px;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: 0
}

.cmp thead th {
  padding-block: 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  background: #FAFBFA;
}

.cmp tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 26%
}

.cmp td {
  color: #4A5056
}

.cmp td.cmp-us,
.cmp th.cmp-us {
  background: rgba(8, 166, 63, .055);
  color: var(--ink);
}

.cmp thead th.cmp-us {
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
  box-shadow: inset 0 3px 0 var(--green);
}

.cmp td b {
  font-weight: 700
}

.cmp .y,
.cmp .n {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: -5px;
}

.cmp .y {
  background: var(--tint)
}

.cmp .n {
  background: #F4F4F5
}

.cmp .y svg,
.cmp .n svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmp .y svg {
  stroke: var(--green)
}

.cmp .n svg {
  stroke: #9CA3AF
}

/* ---------- contact sales: copy left, form right ---------- */
.sales {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: var(--frow-gap);
  align-items: center;
}

.sales-form {
  padding: 30px;
  overflow: hidden
}

.sf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sf {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.sf-full {
  grid-column: 1 / -1
}

.sf span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink)
}

.sf em {
  font-style: normal;
  font-weight: 400;
  color: var(--muted)
}

.sf input,
.sf select,
.sf textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.sf textarea {
  resize: vertical;
  min-height: 84px;
  line-height: 1.5
}

.sf input::placeholder,
.sf textarea::placeholder {
  color: #A3AAB3
}

.sf input:focus,
.sf select:focus,
.sf textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(8, 166, 63, .12);
}

.sf input.bad {
  border-color: #E5484D;
  box-shadow: 0 0 0 4px rgba(229, 72, 77, .1)
}

.sf-err {
  margin: 12px 0 0;
  font-size: 14px;
  color: #C93C40
}

.sf-btn {
  width: 100%;
  margin-top: 20px
}

.sf-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted)
}

.sf-done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  background: #fff;
  border-radius: inherit;
}

.sf-done[hidden] {
  display: none
}

.sf-done-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px var(--tint);
}

.sf-done-ico svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-done h3 {
  margin: 24px 0 8px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.035em
}

.sf-done p {
  margin: 0;
  max-width: 340px;
  font-size: 16px;
  line-height: 1.55;
  color: #4A5056
}

/* ---------- FAQ ---------- */
.pfaq-list {
  max-width: 900px;
  border-top: 1px solid var(--line);
}

.pfaq details {
  border-bottom: 1px solid var(--line)
}

.pfaq summary {
  position: relative;
  padding: 24px 56px 24px 0;
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.pfaq summary::-webkit-details-marker {
  display: none
}

/* plus that turns into a minus */
.pfaq summary::before,
.pfaq summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transition: transform .25s ease;
}

.pfaq summary::after {
  transform: rotate(90deg)
}

.pfaq details[open] summary::after {
  transform: rotate(0deg)
}

.pfaq details p {
  margin: 0;
  padding: 0 56px 24px 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4A5056;
}

.pfaq details p a {
  color: var(--green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}

/* ---------- closing CTA ---------- */
.pr-end {
  padding-bottom: clamp(64px, 7vw, 120px)
}

.pr-end-card {
  padding: clamp(44px, 5vw, 76px) 32px;
  border-radius: 32px;
  text-align: center;
  border: 1px solid #D9EEE0;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(8, 166, 63, .12) 0%, rgba(8, 166, 63, 0) 70%),
    #fff;
}

.pr-end-card h2 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800;
  letter-spacing: -0.048em;
  line-height: 1.04;
}

.pr-end-card p {
  max-width: 520px;
  margin: 16px auto 0;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: #4A5056;
}

.pr-end-cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* ============================================================
   TABLET + PHONE (under 900px)
   ============================================================ */
@media (max-width:899px) {

  .pr-hero,
  .sales {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .pr-hero {
    padding-top: 36px;
    padding-bottom: 40px
  }

  .pr-hero .pill,
  .pr-sec-head .pill,
  .sales-copy .pill {
    margin-bottom: 18px
  }

  .pr-hero .h-hero {
    font-size: clamp(34px, 8vw, 54px)
  }

  .pr-hero .lead {
    margin-top: 16px;
    font-size: clamp(15.5px, 2.2vw, 18px)
  }

  .pr-ticks {
    grid-template-columns: 1fr 1fr;
    gap: 12px 18px;
    margin-top: 24px
  }

  .pr-ticks li {
    font-size: 14.5px;
    align-items: flex-start
  }

  .calc,
  .sales-form {
    padding: 24px 20px 22px;
    border-radius: 24px
  }

  .pr-sec {
    padding-block: 48px
  }

  .pr-sec .h-sec {
    font-size: clamp(28px, 6.4vw, 42px)
  }

  .pr-sec .lead {
    font-size: clamp(15.5px, 2.2vw, 18px);
    margin-top: 14px
  }

  .inc {
    grid-template-columns: 1fr 1fr;
    gap: 14px
  }

  /* comparison table scrolls sideways inside its card, first column pinned */
  .cmp-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .cmp {
    min-width: 620px
  }

  .cmp-hint {
    display: block;
    margin: -14px 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    text-align: right;
  }

  .cmp th,
  .cmp td {
    padding: 14px 14px;
    font-size: 14px
  }

  .cmp tbody th,
  .cmp thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }

  .cmp thead th:first-child {
    background: #FAFBFA
  }

  .pfaq summary {
    padding: 20px 44px 20px 0
  }

  .pfaq details p {
    padding-right: 0;
    font-size: 15.5px
  }

  .pr-end-card {
    padding: 40px 22px;
    border-radius: 26px
  }
}

@media (max-width:599px) {

  .pr-ticks {
    grid-template-columns: 1fr
  }

  .calc-head h2 {
    font-size: 19px
  }

  .calc-head p {
    font-size: 13.5px
  }

  .calc-ico {
    width: 42px;
    height: 42px
  }

  .calc-step {
    width: 46px;
    height: 46px
  }

  .calc-input input {
    font-size: 30px
  }

  .calc-unit {
    font-size: 14.5px
  }

  .calc-out {
    padding: 16px 16px 14px
  }

  .calc-rows div {
    font-size: 13.5px
  }

  .calc-rows dt {
    max-width: 70%
  }

  .calc-cta {
    flex-direction: column
  }

  .calc-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px
  }

  .calc-chips button {
    padding: 8px 0
  }

  .calc-chips button::after {
    content: none
  }

  .inc {
    grid-template-columns: 1fr
  }

  .sf-grid {
    grid-template-columns: 1fr
  }

  .pr-end-cta .btn {
    flex: 1 1 100%
  }
}