/* /pricing (views/pricing-v4.ejs). Amar's content and section order, AK Oct 30 data.
   Nov 2 (A10 round 2, AK: "round 1 too subtle"): one rewrite of the UI layer, same words, same order.
   - Hero: the "Pricing for" select is a two-option switch with a sliding thumb.
   - Three ways to buy: one panel split by hairlines (not three floating cards); plan and pack rows are aligned price lines;
     Hybrid shows its idea as a split bar; the facts and the Duane Weber quote are the panel's mist footer (no ink card over the logos).
   - What Each Plan Includes: one connected price sheet, Growth lifted out of it on a gold ring; denser, calmer lists; lavender
     "Coming soon" chips with ink text. Phones and tablets: the three plans sit in a swipe row with dots (far shorter page).
   - Credit Packs: the ladder cells carry a rate bar, so "bigger packs, lower rate" is visible at a glance; the rate card sits
     beside its heading (no card inside a card).
   - Estimator: the inputs flow in two columns grouped by product (about half the height), result card stays sticky.
   - Quotes: quiet pull quotes (portrait, words, name) instead of five identical ink bars.
   Brand tokens only. Rollback: 04-build/backups/nov02/C/ (and nov01-round/A10-pricing for the round-1 file). */
body.pz { --ink: #110A33; --violet: #341D99; --gold: #FFC61E; --gold3: #FFE8A5; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478;
  --line: rgba(17, 10, 51, .09); --disp: "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif;
  --sh: 0 12px 32px -12px rgba(17, 10, 51, .22); --sh-lg: 0 32px 64px -24px rgba(17, 10, 51, .30); --eo: cubic-bezier(.23, 1, .32, 1);
  margin: 0; background: #fff; color: var(--ink); font-family: Manrope, "Manrope Fallback", Arial, sans-serif; overflow-x: clip; }
.pz *, .pz *::before, .pz *::after { box-sizing: border-box; }
.pz [hidden] { display: none !important; }
.pz-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
body.hai .pz-h2 { margin: 0 0 12px; text-align: center; font: 700 clamp(30px, 3.2vw, 42px)/1.1 var(--disp); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.pz-sub { max-width: 640px; margin: 0 auto 40px; text-align: center; font-size: 17px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.pz-sec { padding: 72px 0; }
.pz a:focus-visible, .pz button:focus-visible, .pz select:focus-visible, .pz input:focus-visible, .pz-plan:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pz-step button, .pz-seg button, .pz-aud button, .pz-dots button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pz-btn:active, .pz-more:active, .pz-aud button:active, .pz-step button:active, .pz-seg button:active { transform: scale(.96); }

/* hero */
.pz-hero { padding: 148px 0 48px; background: linear-gradient(#FFF4D2, #fff); text-align: center; }
body.hai .pz-hero h1 { margin: 0 0 16px; font: 700 clamp(40px, 5vw, 60px)/1.05 var(--disp); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.pz-lead { max-width: 620px; margin: 0 auto 32px; font-size: 18px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }
.pz-for { display: inline-flex; align-items: center; gap: 14px; }
.pz-for__l { font-size: 14px; font-weight: 700; color: var(--slate); }
.pz-aud { --i: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--lav), var(--sh); }
.pz-aud button { position: relative; z-index: 1; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: none; color: var(--slate); font: 800 15px/1 Manrope, Arial, sans-serif; white-space: nowrap; cursor: pointer; transition: color .2s ease, transform .16s var(--eo); }
.pz-aud button[aria-checked="true"] { color: #fff; }
.pz-aud__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ink); transform: translateX(calc(var(--i) * 100%)); transition: transform .26s var(--eo); }
@media (hover: hover) and (pointer: fine) { .pz-aud button[aria-checked="false"]:hover { color: var(--ink); } }

/* the three ways to buy: one panel, three columns on hairlines, a mist footer */
.pz-wrap:has(> .pz-buy) { padding-bottom: 40px; }
.pz-buy { position: relative; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh-lg); }
.pz-ways { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); }
.pz-way { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 32px; }
.pz-way + .pz-way { box-shadow: inset 1px 0 0 var(--line); }
.pz-way > :nth-last-child(2) { margin-bottom: calc(var(--cta-gap, 28px) - 16px); }
body.hai .pz-way h2 { margin: 0; font: 700 26px/1.1 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.pz-way__for { max-width: 36ch; margin: 0; font-size: 15px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.pz-way__note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.pz-plans, .pz-packs, .pz-ticks { list-style: none; margin: 0; padding: 0; display: grid; }
/* license plans: price lines */
.pz-plans { margin: 0 -12px; }
.pz-plan { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px; border-radius: 16px; cursor: default; transition: background-color .15s ease; }
.pz-plan + .pz-plan::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: var(--line); }
.pz-plan:hover, .pz-plan:focus, .pz-plan:focus-within { background: var(--mist); }
.pz-plan:hover::before, .pz-plan:hover + .pz-plan::before, .pz-plan:focus-within::before, .pz-plan:focus-within + .pz-plan::before { opacity: 0; }
.pz-plan__n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pz-plan__n b { font: 700 19px/1.2 var(--disp); }
.pz-plan__n small { font-size: 13px; line-height: 1.4; color: var(--slate); text-wrap: pretty; }
.pz-plan__p { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.pz-plan__p b { font: 700 26px/1 var(--disp); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pz-plan__p small { margin-top: 4px; font-size: 12px; color: var(--slate); white-space: nowrap; }
.pz-plan__p a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color .15s ease; }
.pz-plan__p a:hover { background: var(--violet); }
/* the hover card: what the plan includes, at a glance */
.pz-hc { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 10px); width: min(300px, 86vw); display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 16px; background: var(--ink); color: #fff; box-shadow: 0 20px 40px -12px rgba(17, 10, 51, .45); font-size: 13px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transform-origin: 50% 100%; transition: opacity .16s ease, transform .18s var(--eo), visibility .16s; pointer-events: none; text-align: left; }
.pz-hc::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px; border: 7px solid transparent; border-top-color: var(--ink); }
.pz-hc b { font: 700 17px/1.2 var(--disp); color: var(--gold); }
.pz-hc em { font-style: normal; font-weight: 700; color: #fff; }
.pz-hc span { position: relative; padding-left: 16px; color: var(--lav); }
.pz-hc span::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.pz-hc small { color: rgba(221, 214, 255, .82); font-size: 12px; }
.pz-plan:hover .pz-hc, .pz-plan:focus .pz-hc, .pz-plan:focus-within .pz-hc { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* credit packs: aligned price | credits | rate lines */
.pz-packs li { display: grid; grid-template-columns: minmax(0, 5.6em) minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pz-packs li:last-child { border-bottom: 1px solid var(--line); }
.pz-packs b { font: 700 20px/1.1 var(--disp); font-variant-numeric: tabular-nums; }
.pz-packs span { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pz-packs em { font-style: normal; font-size: 13px; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* hybrid: the idea as a picture, one account split between the two ways to buy */
.pz-split { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
.pz-split span { display: grid; place-items: center; min-height: 40px; padding: 0 12px; border-radius: 12px; font: 800 13px/1 Manrope, Arial, sans-serif; white-space: nowrap; }
.pz-split__a { flex: 1.15; background: var(--ink); color: #fff; }
.pz-split__b { flex: 1; background: var(--gold); color: var(--ink); }
.pz-ticks { gap: 10px; }
.pz-ticks li { position: relative; padding-left: 28px; font-size: 15px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }
.pz-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* one button voice in the panel: outline pill, arrow nudges on hover */
.pz-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; align-self: flex-start; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease, transform .16s var(--eo); }
.pz-more svg { transition: transform .2s var(--eo); }
.pz-more:hover { background: var(--ink); color: #fff; }
@media (hover: hover) and (pointer: fine) { .pz-more:hover svg { transform: translateX(3px); } }
/* the panel footer: the four facts and the quote */
.pz-after { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 24px 32px; border-radius: 0 0 28px 28px; background: var(--mist); box-shadow: inset 0 1px 0 var(--lav); }
.pz-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 28px; }
.pz-facts li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 700; line-height: 1.4; }
.pz-facts li::before { content: ""; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pz-after .pq { padding-left: 32px; box-shadow: inset 1px 0 0 var(--lav); }

/* customer quotes, inside the flow: quiet pull quotes */
.pq { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; margin: 0; }
.pq img { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--gold); }
.pq blockquote { margin: 0; font: 700 19px/1.3 var(--disp); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.pq figcaption { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--slate); }
.pq figcaption b { margin-right: 6px; color: var(--ink); }
.pq--center { width: fit-content; max-width: 720px; margin: 48px auto 0; }

/* proof badges, right under the logos: the marks themselves, no tiles */
.pr-badges { background: #fff; padding: 4px 16px 0; }
.pr-badges ul { list-style: none; margin: 0 auto; padding: 0; display: flex; justify-content: center; align-items: center; gap: 40px; flex-wrap: wrap; max-width: 640px; }
.pr-badges li { display: grid; place-items: center; }
.pr-badges img { width: 68px; height: 68px; object-fit: contain; }

/* buttons */
.pz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 800; text-decoration: none; text-align: center; white-space: nowrap; transition: background-color .18s ease, color .18s ease, transform .16s var(--eo); }
.pz-btn--ink { background: var(--ink); color: #fff; } .pz-btn--ink:hover { background: var(--violet); }
.pz-btn--gold { background: var(--gold); color: var(--ink); } .pz-btn--gold:hover { background: #F2B800; }
.pz-btn--line { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .pz-btn--line:hover { background: var(--ink); color: #fff; }
.pz-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 800; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.pz-textlink--light { display: flex; justify-content: center; margin-top: 4px; color: #fff; }
.pz-fine { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 13px; line-height: 1.55; color: var(--slate); text-wrap: pretty; }

/* what each plan includes: one connected price sheet, Growth lifted out of it */
.pz-inc { background: var(--mist); scroll-margin-top: 80px; }
.pz-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; margin-top: 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
.pz-col { position: relative; min-width: 0; padding: 28px 32px 32px; }
.pz-col + .pz-col { box-shadow: inset 1px 0 0 var(--line); }
.pz-col.is-mid { z-index: 1; margin: -16px 0; padding-top: 44px; padding-bottom: 48px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 2px var(--gold), var(--sh-lg); }
.pz-col.is-mid + .pz-col { box-shadow: none; }
.pz-col header { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
body.hai .pz-col h3 { margin: 0; font: 700 28px/1.1 var(--disp); letter-spacing: -.01em; color: var(--ink); }
.pz-col__for { min-height: 2.9em; margin: 0; font-size: 14px; line-height: 1.45; color: var(--slate); text-wrap: pretty; }
.pz-col__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-height: 56px; margin: 8px 0 0; }
.pz-col__price b { font: 700 48px/1 var(--disp); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pz-col__price b.is-custom { font-size: 40px; }
.pz-col__price span { font-size: 13px; line-height: 1.35; color: var(--slate); }
.pz-col__note { min-height: 1.5em; margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.pz-col header .pz-btn { width: 100%; margin-top: calc(var(--cta-gap, 28px) - 6px); }
.pz-col__base { margin: 0 0 4px; font-size: 14px; font-weight: 800; color: var(--ink); }
.pz-col__g + .pz-col__g { margin-top: 16px; }
.pz-col__gh { margin: 0 0 6px; font-size: 13px; font-weight: 800; color: var(--slate); }
.pz-col__g ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pz-col__g li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; text-wrap: pretty; }
.pz-col__g li::before { content: ""; position: absolute; left: 0; top: 1.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23110A33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.pz-col__g em { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: var(--lav); font-style: normal; font-size: 12px; line-height: 1.35; font-weight: 800; color: var(--ink); white-space: nowrap; vertical-align: 1px; }
.pz-inc .pq--center { margin-top: 56px; }
.pz-dots { display: none; }

/* credit packs: the ladder, each cell with its rate bar */
.pz-packsec { scroll-margin-top: 80px; }
.pz-pk { list-style: none; margin: 0 auto; padding: 8px; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); max-width: 1120px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
.pz-pk li { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 18px; border-radius: 20px; }
.pz-pk li + li::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 1px; background: var(--line); }
.pz-pk li.is-pop { box-shadow: 0 0 0 2px var(--gold), 0 16px 32px -18px rgba(17, 10, 51, .35); }
.pz-pk li.is-pop::before, .pz-pk li.is-pop + li::before { display: none; }
.pz-pk small { font-size: 12px; font-weight: 800; color: var(--slate); }
.pz-pk b { margin-top: 8px; font: 700 clamp(22px, 2.1vw, 28px)/1 var(--disp); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pz-pk span { margin-top: 4px; font-size: 13px; color: var(--slate); }
.pz-pk strong { margin-top: 16px; font: 800 20px/1 Manrope, Arial, sans-serif; font-variant-numeric: tabular-nums; }
.pz-pk__bar { display: block; width: calc(var(--r, 1) * 100%); height: 6px; margin: 14px 0 8px; border-radius: 99px; background: var(--lav); }
.pz-pk li.is-pop .pz-pk__bar { background: var(--gold); }
.pz-pk em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-pk__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: calc(var(--cta-gap, 28px) + 4px); }
/* credits per action: a normal section heading (same as "Estimate Your Cost"), the table, then the BYOM note */
.pz-rate { max-width: 920px; margin: 96px auto 0; }
.pz-rate__head .pz-sub { margin-bottom: 32px; }
.pz-tablewrap { overflow-x: auto; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
.pz-soon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin: 24px 0 0; font-size: 15px; line-height: 1.4; color: var(--ink); text-align: center; }
.pz-soon em { padding: 2px 10px; border-radius: 999px; background: var(--lav); font-style: normal; font-size: 12px; line-height: 1.5; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pz-soon b { color: var(--ink); }
.pz-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pz-table th, .pz-table td { padding: 9px 20px; text-align: right; border-bottom: 1px solid var(--line); }
.pz-table th:first-child, .pz-table td:first-child { text-align: left; }
.pz-table th { font-size: 15px; font-weight: 800; background: var(--mist); vertical-align: bottom; }
.pz-table th small { display: block; max-width: 22ch; margin-left: auto; font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--slate); }
.pz-table td { font-variant-numeric: tabular-nums; }
.pz-table tbody tr:not(.grp):hover td { background: var(--mist); }
.pz-table tr.grp td { padding-top: 16px; padding-bottom: 6px; font-size: 13px; font-weight: 800; color: var(--slate); background: #fff; }
.pz-table tr:last-child td { border-bottom: 0; }

/* estimator */
.pz-est { background: var(--mist); scroll-margin-top: 80px; }
.pz-est__grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 24px; align-items: stretch; }
.pz-est__in { container-type: inline-size; padding: 24px 28px 28px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
/* the inputs sit on one grid: People across the top (2 x 2), Account beside HumanMail + Visitor ID, Refreshes (and Users) along the bottom */
.pz-est__groups { display: grid; grid-template-columns: minmax(0, 1fr); }
.pz-stack { display: contents; }
.pz-grp { min-width: 0; padding-bottom: 8px; }
@container (min-width: 600px) {
  .pz-est__groups { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
  .pz-grp--g0, .pz-grp--ref { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
  .pz-grp--g0 .pz-est__g, .pz-grp--ref .pz-est__g { grid-column: 1 / -1; }
  .pz-grp--g0 .pz-row:nth-last-child(-n + 2), .pz-grp--ref .pz-row:nth-last-child(-n + 2) { border-bottom: 0; }
  .pz-grp--g1 { grid-column: 1; grid-row: 2; }
  .pz-stack { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
  .pz-grp--ref, .pz-grp--usr { grid-row: 3; }
  .pz-est__groups:has(> .pz-grp--usr:not([hidden])) .pz-grp--ref { grid-column: 1; display: block; }
  .pz-est__groups:has(> .pz-grp--usr:not([hidden])) .pz-grp--ref .pz-row:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .pz-est__groups:has(> .pz-grp--usr:not([hidden])) .pz-grp--ref .pz-row:last-child { border-bottom: 0; }
  .pz-grp--usr { grid-column: 2; }
}
.pz-est__g { margin: 0; padding: 20px 0 6px; font-size: 13px; font-weight: 800; color: var(--slate); }
.pz-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pz-grp .pz-row:last-child { border-bottom: 0; }
.pz-row label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pz-row label b { font-size: 15px; line-height: 1.3; text-wrap: pretty; }
.pz-row label small { font-size: 12px; line-height: 1.35; color: var(--slate); }
.pz-row--model { padding: 4px 0 8px; border-bottom: 1px solid var(--line); }
.pz-est__groups > .pz-grp--g0 .pz-est__g { padding-top: 12px; }
.pz-row--model > b { font-size: 15px; }
.pz-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
.pz-seg button { min-height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--slate); font: 800 14px/1 Manrope, Arial, sans-serif; cursor: pointer; transition: background-color .18s ease, color .18s ease, transform .16s var(--eo); }
.pz-seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pz-step { display: inline-flex; align-items: center; flex: none; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); }
.pz-step button { width: 34px; height: 40px; border: 0; border-radius: 999px; background: transparent; font-size: 18px; font-weight: 700; color: var(--slate); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .16s var(--eo); }
.pz-step button:hover { background: var(--lav); color: var(--ink); }
.pz-step input { width: 58px; height: 40px; border: 0; background: transparent; text-align: center; font: 800 15px/1 Manrope, Arial, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; }
.pz-rsel-w { position: relative; flex: none; }
.pz-rsel-w::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -5px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.pz-rsel { appearance: none; min-height: 40px; padding: 0 36px 0 16px; border: 0; border-radius: 999px; background: var(--mist); box-shadow: inset 0 0 0 1px var(--lav); font: 700 14px/1 Manrope, Arial, sans-serif; color: var(--ink); cursor: pointer; }
.pz-sum { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 32px 28px; border-radius: 28px; background: var(--ink); color: #fff; box-shadow: var(--sh-lg); }
.pz-sum p { margin: 0; }
.pz-sum__top, .pz-sum__mid, .pz-sum__bot { display: flex; flex-direction: column; gap: 10px; }
.pz-sum__k { font-size: 14px; font-weight: 800; color: var(--lav); }
.pz-sum__total { font: 700 64px/1 var(--disp); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.pz-sum__mo { font-size: 14px; color: var(--lav); }
.pz-sum__lines { display: grid; gap: 14px; margin: 8px 0 4px; padding: 20px 0; border-top: 1px solid rgba(221, 214, 255, .2); border-bottom: 1px solid rgba(221, 214, 255, .2); }
.pz-sum__lines p { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; line-height: 1.4; }
.pz-sum__lines span { color: var(--lav); }
.pz-sum__lines b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pz-sum__plan { margin-bottom: calc(var(--cta-gap, 28px) - 10px) !important; font-size: 14px; color: var(--lav); }
.pz-sum__plan b { color: var(--gold); }
.pz-sum__hint { padding: 10px 12px; border-radius: 12px; background: rgba(255, 198, 30, .14); font-size: 13px; color: var(--cream); }
/* Show the math (AK Nov 7): a full-width panel under the estimate; the table beside the CRO video, stacked on phones */
.pz-math { grid-column: 1 / -1; }
.pz-math summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font: 800 14px/1 Manrope, Arial, sans-serif; cursor: pointer; list-style: none; transition: background-color .18s ease, color .18s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.pz-math summary::-webkit-details-marker { display: none; }
.pz-math summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.pz-math[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.pz-math summary:active { transform: scale(.96); }
.pz-math summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .pz-math summary:hover { background: var(--ink); color: #fff; } }
.pz-math__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 12px; padding: 20px 28px 24px; border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
.pz-math table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pz-math td { padding: 6px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: top; }
.pz-math td small { display: inline-block; margin-left: 8px; font-size: 12px; color: var(--slate); }
.pz-math td + td { text-align: right; font-variant-numeric: tabular-nums; }
.pz-math tr.t td { font-weight: 800; border-bottom: 0; }
.pz-math__vid { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pz-math__vid .hxv { border-radius: 20px; box-shadow: var(--sh); }
.pz-math__vid .hxv-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.pz-math__vid figcaption { display: flex; flex-direction: column; gap: 4px; }
.pz-math__vid figcaption b { font-size: 15px; line-height: 1.3; text-wrap: balance; }
.pz-math__vid figcaption span { font-size: 13px; line-height: 1.45; color: var(--slate); text-wrap: pretty; }
@media (max-width: 767px) { .pz-math__body { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 12px 16px 20px; border-radius: 24px; } }

/* laptops: same layout, a little tighter */
@media (max-width: 1279px) {
  .pz-way, .pz-col { padding-left: 28px; padding-right: 28px; }
  .pz-col__price b { font-size: 44px; }
}
/* tablets and phones */
@media (max-width: 999px) {
  .pz-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pz-way--third { grid-column: 1 / -1; box-shadow: inset 0 1px 0 var(--line) !important; }
  .pz-after { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pz-after .pq { padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--lav); }
  /* plans: a swipe row, the next plan peeks in */
  .pz-cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(82%, 400px); gap: 16px; align-items: start; margin: 8px -24px 0; padding: 16px 24px 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; overscroll-behavior-x: contain; scrollbar-width: none; background: none; box-shadow: none; border-radius: 0; }
  .pz-cols::-webkit-scrollbar { display: none; }
  .pz-col, .pz-col + .pz-col, .pz-col.is-mid + .pz-col { scroll-snap-align: start; padding: 28px 24px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--lav), var(--sh); }
  .pz-col.is-mid { margin: 0; padding: 28px 24px; box-shadow: 0 0 0 2px var(--gold), var(--sh); }
  .pz-dots { display: flex; justify-content: center; gap: 0; margin: -4px 0 -12px; }
  .pz-dots button { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
  .pz-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: var(--lav); transition: transform .2s var(--eo), background-color .2s ease; }
  .pz-dots button[aria-current="true"]::before { background: var(--ink); transform: scaleX(2.5); }
  .pz-inc .pq--center { margin-top: 40px; }
  .pz-pk { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .pz-pk li:nth-child(3n + 1)::before { display: none; }
  .pz-rate { margin-top: 72px; }
  .pz-est__grid { grid-template-columns: minmax(0, 1fr); }
  .pz-sum { margin-top: 0; }
}
@media (max-width: 767px) {
  .pz-wrap { padding: 0 16px; }
  .pz-wrap:has(> .pz-buy) { padding-bottom: 32px; }
  .pz-col__price { min-height: 0; }
  .pz-sec { padding: 56px 0; }
  .pz-sub { margin-bottom: 28px; font-size: 16px; }
  .pz-hero { padding: 108px 0 32px; }
  body.hai .pz-hero h1 { font-size: clamp(34px, 9.6vw, 44px); }
  .pz-lead { font-size: 16px; margin-bottom: 24px; }
  .pz-for { flex-direction: column; gap: 8px; }
  .pz-buy { border-radius: 24px; }
  .pz-ways { grid-template-columns: minmax(0, 1fr); }
  .pz-way { padding: 24px 20px; }
  .pz-way + .pz-way { box-shadow: inset 0 1px 0 var(--line); }
  .pz-way > :nth-last-child(2) { margin-bottom: calc(var(--cta-gap, 24px) - 16px); }
  .pz-plan__n b { font-size: 18px; }
  .pz-plan__p b { font-size: 24px; }
  .pz-after { padding: 20px; border-radius: 0 0 24px 24px; }
  .pz-facts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pq blockquote { font-size: 17px; }
  .pq--center { margin-top: 36px; }
  .pz-cols { margin: 4px -16px 0; padding: 16px 16px 16px; scroll-padding-inline: 16px; grid-auto-columns: 86%; }
  .pz-col, .pz-col + .pz-col, .pz-col.is-mid + .pz-col, .pz-col.is-mid { padding: 24px 20px; }
  .pz-col__price b { font-size: 40px; }
  .pz-pk { padding: 6px; border-radius: 24px; }
  .pz-pk:not([data-n="3"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pz-pk li { padding: 16px 14px; }
  .pz-pk:not([data-n="3"]) li:nth-child(3n + 1)::before { display: block; }
  .pz-pk:not([data-n="3"]) li:nth-child(odd)::before { display: none; }
  .pz-pk b { font-size: 24px; }
  .pz-pk__cta { flex-direction: column; align-items: stretch; }
  .pz-pk__cta .pz-btn { width: 100%; }
  .pz-pk__cta .pz-textlink { align-self: center; }
  .pz-table { font-size: 13px; }
  .pz-table th, .pz-table td { padding: 9px 8px; }
  .pz-table th:first-child, .pz-table td:first-child { width: 44%; padding-left: 14px; }
  .pz-table th small { max-width: none; }
  .pz-table th:last-child, .pz-table td:last-child { padding-right: 14px; }
  .pz-table th { font-size: 14px; }
  .pz-table th small { font-size: 12px; }
  .pz-est__in { padding: 12px 16px 16px; border-radius: 24px; }
  .pz-row--model { flex-wrap: wrap; }
  .pz-step button { width: 34px; }
  .pz-step input { width: 60px; }
  .pz-sum { padding: 24px; border-radius: 24px; }
  .pz-sum__total { font-size: 44px; }
  .pr-badges ul { gap: 24px; } .pr-badges img { width: 60px; height: 60px; }
  .pz-hc { left: 0; transform: translate(0, 6px); }
  .pz-hc::after { left: 40px; }
  .pz-plan:hover .pz-hc, .pz-plan:focus .pz-hc, .pz-plan:focus-within .pz-hc { transform: none; }
}
/* three packs on a phone: one pack per row (price on the right, rate bar beneath) instead of a lone card on a second row */
@media (max-width: 599px) {
  .pz-pk[data-n="3"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .pz-pk[data-n="3"] li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: end; padding: 18px 16px; }
  .pz-pk[data-n="3"] li::before { display: none !important; }
  .pz-pk[data-n="3"] li + li::after { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; background: var(--line); }
  .pz-pk[data-n="3"] li.is-pop::after, .pz-pk[data-n="3"] li.is-pop + li::after { display: none; }
  .pz-pk[data-n="3"] small { grid-column: 1; grid-row: 1; }
  .pz-pk[data-n="3"] b { grid-column: 1; grid-row: 2; }
  .pz-pk[data-n="3"] span { grid-column: 1; grid-row: 3; }
  .pz-pk[data-n="3"] strong { grid-column: 2; grid-row: 2 / 4; align-self: end; margin: 0; font-size: 24px; }
  .pz-pk[data-n="3"] .pz-pk__bar { grid-column: 1 / -1; grid-row: 4; margin: 14px 0 8px; }
  .pz-pk[data-n="3"] em { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 419px) {
  .pr-badges ul { gap: 16px; } .pr-badges img { width: 56px; height: 56px; }
}
@media (max-width: 359px) {
  .pz-aud button { padding: 0 14px; font-size: 14px; }
  .pz-way { padding: 20px 16px; }
  .pz-plan { flex-wrap: wrap; }
  .pz-packs li { grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; }
  .pz-packs span { white-space: nowrap; text-align: right; }
  .pz-packs em { grid-column: 1 / -1; font-size: 12px; }
  .pz-split span { padding: 0 8px; font-size: 12px; }
  .pz-row label b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-hc, .pz-plan, .pz-aud__thumb, .pz-aud button, .pz-more, .pz-more svg, .pz-btn, .pz-dots button::before { transition: none; }
  .pz-btn:active, .pz-more:active, .pz-aud button:active, .pz-step button:active, .pz-seg button:active { transform: none; }
}

/* AK Nov 7 (Amar): "Plan and fees" in the estimator, under refreshes and users: the plan picker, the platform fee and the one-time setup and training. */
.pz-fee-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pz-fee-l b { font-size: 15px; line-height: 1.3; }
.pz-fee-l small { font-size: 12px; line-height: 1.35; color: var(--slate); }
.pz-fee-v { font-size: 15px; white-space: nowrap; color: var(--ink); }
.pz-grp--fee .pz-row--model { padding: 12px 0; }
@media (min-width: 900px) {
  /* AK Nov 7: the plan switch was wider than its column and ran into Platform fee. The plan gets its own full-width row; the two fees sit
     side by side under it, in the same 2-column rhythm (36px gap) as the other estimator groups. */
  .pz-grp--fee { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
  .pz-grp--fee .pz-est__g { grid-column: 1 / -1; }
  .pz-grp--fee .pz-row--model { grid-column: 1 / -1; justify-content: flex-start; gap: 24px; border-bottom: 1px solid var(--line); }
  .pz-grp--fee .pz-row:not(.pz-row--model) { border-bottom: 0; align-items: flex-start; }
  .pz-grp--fee .pz-fee-v { padding-top: 1px; }
}

/* AK Nov 7 (Amar): how each action is counted, a small line under its name in the rate card */
.pz-table td .pz-cnt { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--slate); }
@media (max-width: 400px) { .pz-seg { max-width: 100%; } .pz-seg button { padding: 0 12px; } }