/* Pricing page in the approved three-card layout (documents/pricing-doorloop-style-preview, Variant 1):
   Free, a deep purple Prime and Scale side by side, the estimate below them, one fees strip and a short FAQ. */
#pricing-preview.pxc { --pxc-purple: var(--brand-purple, #5220b4); --pxc-lime: var(--ink-purple-lime, #84d828); --pxc-soft: var(--ai-bg, #f5f3ff); --pxc-line: var(--border, #e2e8f0); --pxc-muted: var(--text-muted, #64748b); }

/* Hero */
#pricing-preview .pxc-hero { padding: 48px 0 8px; background: linear-gradient(180deg, var(--pxc-soft), var(--surface) 85%); text-align: center; }
#pricing-preview .pxc-hero h1 { margin: 0; }
#pricing-preview .pxc-hero .px-intro { max-width: 620px; margin: 14px auto 0; color: var(--pxc-muted); font-size: 17px; line-height: 1.5; }
#pricing-preview .pxc-hero .px-link { display: inline-block; margin-bottom: 12px; font-weight: 600; }
#pricing-preview .pxc-toggle-row { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 28px; }
#pricing-preview .pxc-toggle-row .px-price-toggle { display: inline-flex; gap: 0; padding: 4px; border: 1px solid var(--pxc-line); border-radius: 999px; background: var(--surface); }
#pricing-preview .pxc-toggle-row .px-price-toggle button { min-height: 36px; padding: 6px 18px; border: 0; border-radius: 999px; background: none; color: var(--text); font: 600 14px/1.4 "Open Sans", Arial, sans-serif; cursor: pointer; }
#pricing-preview .pxc-toggle-row .px-price-toggle button[aria-pressed="true"] { background: var(--pxc-purple); color: #fff; }
#pricing-preview .pxc-toggle-row small { font-size: 13px; color: var(--pxc-muted); }

/* Plan cards */
#pricing-preview .pxc-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; padding-top: 16px; }
#pricing-preview .pxc-plan { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 30px 26px 22px; border: 1px solid var(--pxc-line); border-radius: 20px; background: var(--surface); color: var(--text); box-shadow: 0 22px 40px -28px rgba(27, 10, 60, .45); }
#pricing-preview .pxc-tier { display: inline-block; align-self: flex-start; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--pxc-soft); color: var(--pxc-purple); font: 700 12px/1.3 "Open Sans", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#pricing-preview .pxc-free .pxc-tier { background: #eef2f7; color: #334155; }
#pricing-preview .pxc-price { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0; }
#pricing-preview .pxc-price strong { font: 700 46px/1 "Poppins", "Open Sans", Arial, sans-serif; letter-spacing: -1px; }
#pricing-preview .pxc-price span { font-size: 14px; color: var(--pxc-muted); }
#pricing-preview .pxc-under { margin: 6px 0 0; font-size: 13px; color: var(--pxc-muted); }
#pricing-preview .pxc-blurb { margin: 16px 0 18px; min-height: 68px; font-size: 15px; line-height: 1.5; }
#pricing-preview .pxc-label { margin: 22px 0 10px; font-size: 14px; font-weight: 700; }
#pricing-preview .pxc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.45; }
#pricing-preview .pxc-list li { display: flex; gap: 10px; align-items: flex-start; }
#pricing-preview .pxc-list li::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; background: currentColor; color: var(--pxc-purple); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
#pricing-preview .pxc-free .pxc-list li::before { color: #556274; }
#pricing-preview .pxc-foot { margin: auto 0 0; padding-top: 18px; border-top: 1px solid var(--pxc-line); font-size: 13px; color: var(--pxc-muted); text-align: center; }
#pricing-preview .pxc-foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#pricing-preview .pxc-plan .pxc-btn { width: 100%; }

/* Prime: the deep purple card. */
#pricing-preview .pxc-prime { color: #fff; border-color: #2a1457; background: linear-gradient(165deg, #2a1457, var(--pxc-purple)); box-shadow: 0 28px 48px -26px rgba(42, 20, 87, .75); }
#pricing-preview .pxc-prime .pxc-tier { background: rgba(255, 255, 255, .14); color: #e9ddff; }
#pricing-preview .pxc-prime .pxc-price span, #pricing-preview .pxc-prime .pxc-under, #pricing-preview .pxc-prime .pxc-foot { color: #cdbdf5; }
#pricing-preview .pxc-prime .pxc-foot { border-color: rgba(255, 255, 255, .18); }
#pricing-preview .pxc-prime .pxc-list li::before { color: #b5fc4f; }
#pricing-preview .pxc-scale { background: linear-gradient(180deg, #f6f3ff, var(--surface) 40%); }
#pricing-preview .pxc-scale .pxc-tier { background: #e9ddff; }

/* Buttons: green primary pill, purple outline pill. */
#pricing-preview .pxc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border: 0; border-radius: 999px; font: 700 15px/1.3 "Open Sans", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: color .4s ease, background .2s ease; }
#pricing-preview .pxc-btn-primary { background: var(--btn-primary-bg, #00c434); color: var(--btn-primary-fg, #1b1c1a); box-shadow: inset 0 0 0 3px var(--btn-primary-ring, #84d828); }
#pricing-preview .pxc-btn-primary:is(:hover, :focus-visible) { color: #1b1c1a; }
#pricing-preview .pxc-btn-outline { background: var(--surface); color: #6b48e0; border: 2px solid #6b48e0; box-shadow: inset 0 0 0 3px var(--btn-secondary-ring, #ddd6fe); }
#pricing-preview .pxc-btn-outline:is(:hover, :focus-visible) { background: #6b48e0; color: #fff; }
#pricing-preview .pxc-btn[disabled], #pricing-preview .pxc-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
#pricing-preview .pxc-btn:focus-visible { outline: 2px solid var(--pxc-purple); outline-offset: 3px; }
#pricing-preview .pxc-prime .pxc-btn:focus-visible { outline-color: #fff; }

/* Estimate */
#pricing-preview .pxc-estimate { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; align-items: center; margin-top: 28px; }
#pricing-preview .pxc-estimate h2 { margin: 0 0 6px; font: 600 24px/1.3 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .pxc-estimate-copy p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pxc-muted); }
#pricing-preview .pxc-calc { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; align-items: start; padding: 18px 22px; border: 1px solid #e4dcff; border-radius: 16px; background: var(--pxc-soft); }
#pricing-preview .pxc-calc-units { display: grid; gap: 6px; }
#pricing-preview .pxc-calc-units label { font-size: 14px; font-weight: 600; }
#pricing-preview .pxc-calc .px-unit-control { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid #cbd5e1; border-radius: 10px; background: var(--surface); }
#pricing-preview .pxc-calc .px-unit-control button { width: 40px; height: 40px; border: 0; border-radius: 8px; background: var(--pxc-soft); color: var(--pxc-purple); font-size: 22px; line-height: 1; cursor: pointer; }
#pricing-preview .pxc-calc .px-unit-control button:disabled { opacity: .4; cursor: default; }
#pricing-preview .pxc-calc .px-unit-control input { width: 72px; min-height: 40px; border: 0; background: none; text-align: center; font: 600 18px/1 "Open Sans", Arial, sans-serif; color: var(--text); }
#pricing-preview .pxc-calc-price { display: flex; align-items: baseline; gap: 8px; margin: 0; }
#pricing-preview .pxc-calc-price strong { font: 700 32px/1 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .pxc-calc-price span { color: var(--pxc-muted); font-size: 14px; }
#pricing-preview .pxc-calc-line { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--pxc-muted); }
#pricing-preview .pxc-calc-line strong { color: var(--text); font-weight: 600; }
#pricing-preview .pxc-calc-cta { grid-column: 1 / -1; justify-self: start; }

/* Compare */
#pricing-preview .px-full-compare { padding-top: 48px; text-align: center; }
#pricing-preview .px-full-heading h2 { margin: 0; font: 600 30px/1.2 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .px-full-heading p { margin: 10px 0 18px; color: var(--pxc-muted); }

/* Fees strip */
#pricing-preview .pxc-fees { margin-top: 40px; }
#pricing-preview .pxc-fees-head { text-align: center; margin-bottom: 18px; }
#pricing-preview .pxc-fees-head h2 { margin: 0; font: 600 30px/1.2 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .pxc-fees-head p { margin: 8px 0 0; color: var(--pxc-muted); }
#pricing-preview .pxc-fees-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--pxc-line); border-radius: 20px; overflow: hidden; background: var(--surface); box-shadow: 0 22px 40px -30px rgba(27, 10, 60, .45); }
#pricing-preview .pxc-fee { display: grid; gap: 4px; align-content: start; padding: 26px 24px; border-left: 1px solid var(--pxc-line); }
#pricing-preview .pxc-fee:first-child { border-left: 0; }
#pricing-preview .pxc-fee-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 12px; background: var(--pxc-soft); color: var(--pxc-purple); }
#pricing-preview .pxc-fee-ico svg { width: 22px; height: 22px; }
#pricing-preview .pxc-fee > strong { font: 700 32px/1.1 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .pxc-fee-cap { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pxc-purple); }
#pricing-preview .pxc-fee p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #334155; }
#pricing-preview .pxc-fee-provider { display: inline-block; height: 14px; width: auto; vertical-align: -2px; margin: 0 2px; }
#pricing-preview .pxc-fee-note { color: var(--pxc-muted); font-size: 13px; }
#pricing-preview .pxc-fee-links { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
#pricing-preview .pxc-fee-links a { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; }
#pricing-preview .pxc-fees-note { max-width: 820px; margin: 14px auto 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--pxc-muted); }

/* Proof, Concierge and FAQ */
#pricing-preview .px-plan-proof { margin-top: 32px; }
#pricing-preview .pxc-concierge { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 24px; padding: 26px; border: 1px solid var(--pxc-line); border-radius: 20px; background: linear-gradient(135deg, #f3eeff, #e9f9d6); }
#pricing-preview .pxc-eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pxc-purple); }
#pricing-preview .pxc-concierge h2 { margin: 0 0 10px; font: 600 22px/1.3 "Poppins", "Open Sans", Arial, sans-serif; }
#pricing-preview .pxc-concierge p:last-child { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; }
#pricing-preview .pxc-concierge-cta { white-space: nowrap; flex: 0 0 auto; }
#pricing-preview .px-faq-more { border-bottom: 1px solid var(--pxc-line); }
#pricing-preview .px-faq-more > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--brand-purple-ink, #6b48e0); }
#pricing-preview .px-faq-more > summary::-webkit-details-marker { display: none; }
#pricing-preview .px-faq-more[open] > summary .px-faq-plus:after { transform: rotate(90deg); }
#pricing-preview .px-closing { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
#pricing-preview .pxc-closing-cta { flex: 0 0 auto; }


/* Plan name pills: one color per plan, and a deep blue Scale card. */
#pricing-preview .pxc-plan .pxc-tier { align-self: center; padding: 8px 16px; font-size: 13px; letter-spacing: .06em; }
#pricing-preview .pxc-free .pxc-tier { background: #2563eb; color: #fff; }
#pricing-preview .pxc-scale { color: #fff; border-color: #0b2a4a; background: linear-gradient(165deg, #0b2a4a, #1d4ed8 65%, #2f7cf0); box-shadow: 0 28px 48px -26px rgba(11, 42, 74, .7); }
#pricing-preview .pxc-scale .pxc-tier { background: #fff; color: #0b2a4a; }
#pricing-preview .pxc-scale .pxc-price span, #pricing-preview .pxc-scale .pxc-under, #pricing-preview .pxc-scale .pxc-foot { color: #cfe2ff; }
#pricing-preview .pxc-scale .pxc-foot { border-color: rgba(255, 255, 255, .2); }
#pricing-preview .pxc-scale .pxc-list li::before { color: #9fdcff; }
#pricing-preview .pxc-scale .pxc-btn:focus-visible { outline-color: #fff; }
#pricing-preview .pxc-prime .pxc-tier { background: #b5fc4f; color: #2a1457; }

@media (max-width: 1100px) {
  #pricing-preview .pxc-plans { gap: 14px; }
  #pricing-preview .pxc-plan { padding: 26px 20px 20px; }
  #pricing-preview .pxc-price strong { font-size: 40px; }
}
@media (max-width: 760px) {
  #pricing-preview .pxc-hero { padding-top: 32px; }
  #pricing-preview .pxc-toggle-row { justify-content: center; flex-wrap: wrap; }
  #pricing-preview .pxc-plans { grid-template-columns: 1fr; gap: 24px; padding-top: 20px; }
  #pricing-preview .pxc-prime { order: -1; }
  #pricing-preview .pxc-blurb { min-height: 0; }
  #pricing-preview .pxc-estimate { grid-template-columns: 1fr; }
  #pricing-preview .pxc-calc { grid-template-columns: 1fr; }
  #pricing-preview .pxc-calc-cta { width: 100%; }
  #pricing-preview .pxc-fees-grid { grid-template-columns: 1fr; }
  #pricing-preview .pxc-fee { border-left: 0; border-top: 1px solid var(--pxc-line); }
  #pricing-preview .pxc-fee:first-child { border-top: 0; }
  #pricing-preview .pxc-concierge { flex-direction: column; align-items: flex-start; }
  #pricing-preview .px-closing { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #pricing-preview .pxc-btn { transition: none; }
}

/* Original unit counter bar, placed under the hero intro. */
#pricing-preview .pxc-calculator { margin: 28px auto 0; text-align: left; }