/* =========================================================================
   Pricing page redesign (pricing2.html). Loaded after gable.css and home2.css,
   whose tokens (.gbl-home2: PayHOA blue scale), price card, calculator, story
   cards and FAQ it reuses. Everything here is scoped under .gbl-pricing2.
   Type: Proxima Nova 400/600; sizes from the site scale (48/40/32/24/20/18/16/14).
   ========================================================================= */

/* the site-wide footer CTA sits outside .gbl-pricing2; cta.css isn't loaded on this page (gable.css covers it) */
.gbl-site-cta .gbl-final-sec { padding-top: 40px; }
@media (max-width: 768px) { .gbl-site-cta .gbl-final-sec { padding-top: 24px; } }
.gbl-pricing2 .gbl-sec { padding: 88px 0; }
.gbl-pricing2 .gbl-sec-tight { padding: 0 0 8px; }

/* ---------- hero: the homepage price card, promoted to the page's H1 ---------- */
.px-hero-card { align-items: start; padding: 72px 64px 64px; }
.gbl .px-h1 { font-size: 48px; line-height: 1.167; color: #fff; }
.px-hero-card .hx-price-copy { padding-top: 16px; gap: 24px; }
/* the shared proof row (tools/partials.mjs, home2.css .hx-rate) sits in the copy column's 24px gap */
.px-hero-card .hx-rate { margin-top: 8px; padding-top: 24px; }

/* the calculator card is the shared full card (tools/partials.mjs @calc, home2.css .hx-calc-full) */

/* ---------- included ---------- */
.px-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.px-group { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px; }
.px-group-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--pb-50); color: var(--pb-700); display: grid; place-items: center; }
.px-group-ico svg { width: 24px; height: 24px; fill: currentColor; }
.gbl .px-group h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.px-group ul, .px-free ul { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.px-group li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: var(--body); }
.px-group li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 5px; height: 10px; border: solid var(--pb-600); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.px-free { margin-top: 20px; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 32px; padding: 28px 40px 28px 32px; border-radius: 24px; background: var(--green-50); border: 1px solid #cdeee2; }
.gbl .px-free h3 { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.4; margin: 0; color: #0a5a47; }
.px-free-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #0a725a; display: grid; place-items: center; }
.px-free-ico svg { width: 22px; height: 22px; fill: currentColor; }
.gbl .px-free ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px; padding-left: 32px; border-left: 1px solid #cdeee2; }
.px-free li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: #0a4a3b; }
.px-free li::before { content: ""; position: absolute; left: 5px; top: 5px; width: 5px; height: 10px; border: solid #0a725a; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ---------- add-ons and convenience fees ---------- */
/* Gable AI: one full-width module (Earl, 2026-10-13): what it does as a 2×2 + Meet Gable on the left, its terms and
   a price for your community size on the right */
.px-fee.px-fee-gable { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 40px; padding: 32px 36px; background: linear-gradient(135deg, #fff 0%, var(--pb-50) 100%); border-color: var(--pb-100); }
.px-fee-gable header { grid-column: 1 / -1; }
.px-gable-what { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.px-gable-price { display: flex; flex-direction: column; gap: 16px; }
.px-fee-gable .px-g-calc { background: #fff; border: 1px solid var(--line); }
.gbl a.px-gable-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 16px; font-weight: 600; color: var(--pb-700); }
.gbl a.px-gable-more:hover { color: var(--pb-800, #1b3a8f); }
.px-gable-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; width: 100%; }
.px-gable-list li { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); font-size: 14px; line-height: 1.43; color: var(--body); }
.px-gable-list li > span:first-child { width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: var(--pb-50); color: var(--pb-700); display: grid; place-items: center; }
.px-gable-list li > span:first-child svg { width: 20px; height: 20px; fill: currentColor; }
.px-gable-list .px-gable-d { display: block; }
.px-gable-list strong { font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink); }

/* Gable across the top; bookkeeping, banking and resale documents (the add-ons) 3-up; then payments and mail (the convenience fees) 2-up */
.px-fees { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.px-fees > .px-fee { grid-column: span 2; }
.px-fees > .px-fee-gable { grid-column: 1 / -1; }
.px-fees > .px-fee-pay, .px-fees > .px-fee-mail { grid-column: span 3; }
.gbl a.px-fee-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--pb-700); }
.gbl a.px-fee-more:hover { color: var(--pb-800, #1b3a8f); }
.gbl .px-resale { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }
.px-resale b { display: inline-block; margin-right: 4px; color: #0a5a47; font-weight: 600; }
.px-eg { margin-top: auto !important; }
.px-fee { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.px-fee header { display: flex; align-items: center; gap: 14px; }
.px-fee-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--ink); display: grid; place-items: center; flex: none; }
.px-fee-ico svg { width: 24px; height: 24px; fill: currentColor; }
.gbl .px-fee h3 { font-size: 20px; line-height: 1.4; margin: 0; }
.px-fee dl { margin: 0; display: flex; flex-direction: column; }
.px-fee dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-2); }
.px-fee dl > div:first-child { border-top: 0; padding-top: 0; }
.gbl .px-fee dt { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--ink); }
.px-fee dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-align: right; white-space: nowrap; }
.px-fee dd b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.gbl .px-who { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--pb-50); font-size: 14px; line-height: 1.43; color: var(--ink); }
.px-who strong { font-weight: 600; }
.px-fee-note { margin: 0; font-size: 14px; line-height: 1.43; color: var(--muted); }
.px-fee-tag { font-size: 14px; font-weight: 600; line-height: 1.43; color: var(--pb-700); background: var(--pb-50); padding: 2px 10px; border-radius: 999px; }
.px-fee-tag.px-free-tag { color: #0a5a47; background: #e3f5ec; }
.gbl .px-gable-terms { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }
/* Gable's price for a community size: same box as the dues example */
.gbl .px-eg.px-g-calc { margin-top: 0 !important; } /* right under its paragraph; the card's spare height goes to the bottom */
.gbl .px-g-num input { width: 64px; padding-top: 6px; padding-bottom: 6px; font-size: 16px; }
.px-g-num span { font-size: 14px; }
.px-g-calc .hx-range { grid-column: 1 / -1; }
.gbl .px-g-calc .px-g-out { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 16px; line-height: 1.5; color: var(--ink); }
.px-g-calc .px-g-out b { font-size: 24px; line-height: 1.33; font-weight: 600; white-space: nowrap; }
.gbl .px-g-calc .px-g-sub { margin-top: -6px; font-size: 14px; line-height: 1.43; color: var(--muted); }
.px-eg { background: var(--bg); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 12px; }
.px-eg label { font-size: 14px; font-weight: 600; line-height: 1.43; color: var(--ink); }
.px-eg-in { display: flex; align-items: center; gap: 2px; background: #fff; border: 1px solid #c3cddb; border-radius: 10px; padding: 0 10px; }
.px-eg-in:focus-within { border-color: var(--pb-600); box-shadow: 0 0 0 3px var(--pb-100); }
.px-eg-in span { color: var(--muted); font-size: 16px; }
.gbl .px-eg-in input { width: 72px; border: 0; background: none; padding: 6px 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; appearance: textfield; }
.px-eg-in input::-webkit-inner-spin-button, .px-eg-in input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.px-eg p { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.43; color: var(--body); }
.px-eg p b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- management companies ---------- */
.px-pmc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.px-pmc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.px-pmc-copy p { margin: 0; font-size: 18px; line-height: 1.56; color: var(--body); max-width: 560px; }
.px-pmc-copy strong { color: var(--ink); font-weight: 600; }
.px-pmc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.px-pmc-list { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.px-pmc-list li { position: relative; padding: 14px 18px 14px 46px; border-radius: 14px; background: var(--bg); font-size: 16px; line-height: 1.5; color: var(--body); }
.px-pmc-list li::before { content: ""; position: absolute; left: 22px; top: 19px; width: 5px; height: 10px; border: solid var(--pb-600); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.px-pmc-list strong { color: var(--ink); font-weight: 600; }

/* ---------- proof ---------- */
.px-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.px-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.px-quotes .hx-story { margin: 0; background: #fff; }
.px-quotes .hx-story blockquote { font-size: 20px; line-height: 1.5; font-weight: 600; }
.px-quotes .hx-more { margin-top: -4px; font-size: 16px; }

/* ---------- phones: sticky bar shows the calculated price ---------- */
.px-sticky .hx-btn-meta { white-space: nowrap; }

@media (max-width: 1100px) {
  .px-hero-card { padding: 56px 40px 40px; }
  .px-hero-card .hx-price-copy { padding-top: 0; }
  .px-groups, .px-fees, .px-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-fees > .px-fee, .px-fees > .px-fee-pay, .px-fees > .px-fee-mail { grid-column: auto; }
  .px-fees > .px-fee-gable, .px-fees > .px-fee.px-fee-resale { grid-column: 1 / -1; }
  .px-fee.px-fee-gable { gap: 24px 32px; padding: 28px; }
  .px-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-nums .hx-num:nth-child(3) { border-left: 1px solid var(--line); }
  .px-nums .hx-num:nth-child(n+3) { border-top: 0; }
  .px-quotes .hx-story:last-child { grid-column: 1 / -1; }
  .px-pmc { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px; }
  .px-free { grid-template-columns: 1fr; gap: 20px; padding: 28px 32px; }
  .gbl .px-free ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 0 0; border-left: 0; border-top: 1px solid #cdeee2; }
}
@media (max-width: 992px) {
  .gbl .px-h1 { font-size: 40px; line-height: 1.2; }
}
@media (max-width: 768px) {
  .gbl-pricing2 .gbl-sec { padding: 64px 0; }
  .px-hero-card { padding: 28px 12px 12px; }
  /* phones: headline, then the calculator, then the included list, so the price is on the first screen */
  .px-hero-card .hx-price-copy { display: contents; }
  .px-hero-card .hx-price-copy > * { margin: 0 6px; }
  .px-hero-card .hx-eyebrow { justify-self: start; order: 1; }
  .px-hero-card .px-h1, .px-hero-card .hx-price-copy > p { order: 2; }
  .px-hero-card .hx-calc { order: 3; }
  .px-hero-card .hx-incl { order: 4; margin-top: 8px; }
  .px-hero-card .hx-rate { order: 5; margin-bottom: 16px; }
  .px-hero-card { gap: 16px; }
  .gbl .px-h1 { font-size: 32px; line-height: 1.25; }
  .px-groups, .px-fees, .px-quotes { grid-template-columns: 1fr; gap: 12px; }
  .px-quotes .hx-story:last-child { grid-column: auto; }
  .px-group, .px-fee { padding: 20px; border-radius: 20px; }
  /* phones: icon beside the group title, tighter lists, so six groups don't run 2,400px */
  .px-group { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px 14px; }
  .px-group-ico { width: 40px; height: 40px; }
  .px-group ul { grid-column: 1 / -1; gap: 6px; }
  .gbl .px-group h3 { font-size: 18px; line-height: 1.56; }
  .px-group li { font-size: 15px; line-height: 1.47; }
  .px-fees .px-fee-resale { gap: 14px; }
  .px-free { padding: 20px; border-radius: 20px; gap: 16px; }
  .gbl .px-free h3 { font-size: 18px; }
  .px-free-ico { width: 40px; height: 40px; }
  .gbl .px-free ul { grid-template-columns: 1fr; gap: 8px; padding-top: 16px; }
  .px-fee.px-fee-gable { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .px-fees > .px-fee-gable, .px-fees > .px-fee.px-fee-resale { grid-column: auto; }
  .px-gable-list { grid-template-columns: 1fr 1fr; gap: 8px; }
  .px-gable-list li { padding: 12px; border-radius: 14px; gap: 0; }
  .px-gable-list li > span:first-child { width: 32px; height: 32px; }
  .px-gable-list strong { font-size: 15px; line-height: 1.33; }
  .px-gable-list .px-gable-d { display: none; }
  /* phones: the six groups become an accordion (pricing2.js adds the buttons) */
  .px-groups.is-acc { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
  .px-groups.is-acc .px-group { border: 0; border-radius: 0; padding: 0; display: block; }
  .px-groups.is-acc .px-group + .px-group { border-top: 1px solid var(--line-2); }
  .px-groups.is-acc .px-group-ico { display: none; }
  .gbl .px-group-q { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 20px; min-height: 56px; text-align: left; font: inherit; font-size: 18px; font-weight: 600; line-height: 1.33; color: var(--ink); background: none; border: 0; }
  .px-group-q small { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--muted); }
  .px-group-q i { position: relative; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--pb-50); }
  .px-group-q i::before, .px-group-q i::after { content: ""; position: absolute; left: 7px; top: 11px; width: 10px; height: 2px; border-radius: 1px; background: var(--pb-700); transition: transform .2s; }
  .px-group-q i::after { transform: rotate(90deg); }
  .px-group.is-open .px-group-q i::after { transform: rotate(0); }
  .gbl .px-group-q:focus-visible { outline: 2px solid var(--pb-600); outline-offset: -2px; }
  .px-groups.is-acc .px-group ul { padding: 0 20px 18px; }
  .px-groups.is-acc .px-group:not(.is-open) ul { display: none; }
  .px-nums { grid-template-columns: 1fr 1fr; }
  .px-nums .hx-num:first-child { grid-column: 1 / -1; }
  .px-nums .hx-num:nth-child(2) { border-left: 0; }
  .px-nums .hx-num:nth-child(n+2) { border-top: 1px solid var(--line); }
  .px-pmc { padding: 32px 20px 20px; border-radius: 28px; }
  .px-pmc-cta { width: 100%; }
  .px-pmc-cta .gbl-btn { flex: 1 1 auto; }
  .px-pmc-list { gap: 0; }
  .px-pmc-list li { padding: 10px 0 10px 26px; background: none; border-radius: 0; font-size: 15px; line-height: 1.47; }
  .px-pmc-list li + li { border-top: 1px solid var(--line-2); }
  .px-pmc-list li::before { left: 4px; top: 15px; }
}