/* HVACB — pricing (core/tabs rebuild), styled to MATCH assets/css/pricing.css.

   Parity target: the custom-HTML pricing section (.hvbpr-root). Same palette,
   fonts, light-purple gradient, centred hero, white cards, orange accents,
   sliding billing toggle, light comparison tables.

   Price detail, check/cross, mode-aware rows, the CRM router and the bundle
   savings breakdown are assembled at runtime by assets/js/pricing-tabs.js from
   the block content (single source of truth) and the shared pricing data. */

.pt {
	--purple-dark:#241C4F; --purple:#453A85; --orange:#E2793D; --orange-dark:#C4622C;
	--ink:#1F1B3D; --muted:#6E6A8A; --line:#E7E4F5; --red:#C1504F;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: 52px 5vw 90px;
	color: #fff;
	font-family: "Inter", sans-serif;
	background:
		radial-gradient(55% 50% at 92% 0%, rgba(233,140,190,.38) 0%, transparent 65%),
		linear-gradient(165deg, #564997 0%, #4B3E8C 45%, #3E3278 100%);
}

.pt * { box-sizing: border-box; }
.pt h2, .pt h3, .pt .pt__h2, .pt .pt__name { font-family: "Sora", sans-serif; }
.pt p, .pt h2, .pt h3, .pt ul { margin: 0; }

.pt .pt__in { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; }

/* ---------- Header ---------- */

.pt .pt__in > .pt__h2, .pt .pt__in > .pt__sub { text-align: center; }

.pt .pt__eyebrow {
	display: flex; width: fit-content; align-items: center; gap: 8px;
	margin: 0 auto 22px; padding: 8px 18px; border-radius: 999px;
	font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
	background: linear-gradient(135deg, rgba(140,110,220,.55), rgba(216,120,190,.45));
	border: 1px solid rgba(255,255,255,.28);
}
.pt .pt__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }

.pt .pt__h2 { margin: 0 0 18px; font-size: clamp(32px, 5.2vw, 58px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.pt .pt__h2 mark { background: transparent; color: var(--orange); }
.pt .pt__sub { max-width: 60ch; margin: 0 auto 30px; font-size: clamp(14px, 1.4vw, 16px); line-height: 1.6; font-weight: 500; color: #D9D4F5; }

/* ---------- Category tabs ---------- */

.pt .wp-block-tabs { margin: 0; }
.pt .wp-block-tab-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1400px; margin: 0 auto 26px; border: 0; }

.pt .wp-block-tab-list button {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1;
	padding: 13px 22px; border-radius: 999px;
	font-family: "Sora", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap;
	color: #EDEAFB; background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.22); cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Suppress the core tab marker (stray underline). Bundle label is set in JS. */
.pt .wp-block-tab-list button::before, .pt .wp-block-tab-list button::after { content: none !important; }
.pt .wp-block-tab-list button:hover { border-color: rgba(255,255,255,.5); }
.pt .wp-block-tab-list button[aria-selected='true'] { background: #fff; border-color: #fff; color: var(--purple-dark); box-shadow: 0 6px 20px rgba(0,0,0,.25); }

.pt .wp-block-tab-list button:last-of-type { border-color: var(--orange); color: #FFC9A0; background: rgba(226,121,61,.10); }
.pt .wp-block-tab-list button:last-of-type:hover { border-color: var(--orange); }
.pt .wp-block-tab-list button:last-of-type[aria-selected='true'] { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); border-color: var(--orange); color: #fff; box-shadow: 0 6px 20px rgba(226,121,61,.45); }

.pt .wp-block-tab-panel { padding: 0; }

/* ---------- Lock line ---------- */
.pt .pt__lock { display: block; max-width: 680px; margin: 0 auto 18px; text-align: center; font-size: 13.5px; color: #D9D4F5; }

/* ---------- Billing toggle ---------- */
.pt .pt__mode { position: relative; display: flex; width: 100%; max-width: 760px; margin: 0 auto 26px; padding: 6px; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; }
.pt .pt__mode-hl { position: absolute; top: 6px; bottom: 6px; left: 6px; width: 0; z-index: 1; pointer-events: none; border-radius: 12px; background: linear-gradient(135deg, var(--orange), var(--orange-dark)); box-shadow: 0 8px 20px rgba(226,121,61,.4); transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1); }
.pt .pt__mode button { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; padding: 14px 16px; border: none; border-radius: 12px; background: transparent; color: #D9D4F5; font-family: "Sora", sans-serif; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: color .2s ease; }
.pt .pt__mode button:hover, .pt .pt__mode button.is-active { color: #fff; }
.pt .pt__mode .pt__mode-tag { margin-left: 6px; padding: 2px 7px; border-radius: 999px; font-family: "Inter", sans-serif; font-weight: 700; font-size: 10.5px; letter-spacing: 0; color: var(--orange); background: rgba(226,121,61,.14); }
.pt .pt__mode button.is-active .pt__mode-tag { color: #FFD9BB; background: rgba(255,255,255,.22); }
.pt .pt__mode button:focus-visible { outline: 2px solid #FFD9BB; outline-offset: 2px; }

.pt .pt__price { display: none; }
.pt .is-mode-monthly .pt__price--monthly, .pt .is-mode-annual .pt__price--annual, .pt .is-mode-lifetime .pt__price--lifetime { display: block; }
.pt .wp-block-tab-panel:not([class*='is-mode-']) .pt__price--monthly { display: block; }

/* ---------- Cards ---------- */
.pt .pt__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; margin-bottom: 14px; }
.pt .pt__card { position: relative; display: flex; flex-direction: column; text-align: left; background: #fff; color: var(--ink); border-radius: 22px; border-top: 5px solid var(--purple); padding: 28px 26px; box-shadow: 0 18px 40px rgba(0,0,0,.26); transition: transform .18s ease, box-shadow .18s ease; }
.pt .pt__card:hover { transform: translateY(-5px); box-shadow: 0 26px 52px rgba(0,0,0,.32); }
.pt .pt__card--pop { border-top-color: var(--orange); background: linear-gradient(180deg, #FFF8F1 0%, #fff 150px); }
.pt .pt__ribbon { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); margin: 0; padding: 4px 13px; border-radius: 999px; background: var(--orange); color: #fff; font-family: "Sora", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .05em; white-space: nowrap; }
.pt .pt__name { margin: 0 0 16px; text-align: center; font-weight: 800; font-size: 22px; color: var(--purple-dark); }

/* ---------- Price ---------- */
.pt .pt__price { margin-bottom: 4px; }
.pt .pt__was { margin: 0 0 3px; font-size: 13px; font-weight: 700; color: var(--red); text-decoration: line-through; }
.pt .pt__now { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 0 0 4px; font-family: "Sora", sans-serif; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.pt .pt__now-main { display: inline-flex; align-items: baseline; font-size: clamp(38px, 5vw, 52px); }
.pt .pt__cur { font-size: .46em; font-weight: 700; margin-right: 1px; }
.pt .pt__per { font-family: "Inter", sans-serif; font-weight: 600; font-size: .28em; letter-spacing: 0; color: var(--muted); margin-left: 3px; }
.pt .pt__disc { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transform: rotate(-4deg); padding: 6px 13px; border-radius: 12px; background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color: #fff; box-shadow: 0 8px 18px rgba(226,121,61,.4); }
.pt .pt__disc b { font-family: "Sora", sans-serif; font-weight: 800; font-size: 18px; }
.pt .pt__disc i { font-style: normal; font-weight: 700; font-size: 9px; letter-spacing: .08em; margin-top: 1px; }
.pt .pt__save { display: block; margin: 7px 0 12px; font-size: 12px; font-weight: 700; color: #1F8A4C; }
.pt .pt__save-amt { color: #1F8A4C; font-weight: 700; font-size: 12px; }
.pt .pt__setup { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; background: #FBF2EA; color: #8A5A2C; }
.pt .pt__setup-tag { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; opacity: .8; }
.pt .pt__setup b { font-size: 13px; font-weight: 800; }
.pt .pt__setup--waived { background: #EAF7EE; color: #1F8A4C; }
.pt .pt__setup--waived b { color: #1F8A4C; }
.pt .pt__lifetime-note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pt .pt__delivery { display: inline-block; margin: 0 0 12px; padding: 7px 10px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--purple); background: #EEEAFB; }

/* ---------- Feature list ---------- */
.pt .pt__list { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.pt .pt__list li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; font-size: 13.5px; color: #3B3660; }
.pt .pt__list li::before { content: "\2713"; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--purple); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(69,58,133,.35); }
.pt .pt__card--pop .pt__list li::before { background: var(--orange); box-shadow: 0 2px 5px rgba(226,121,61,.4); }
.pt .pt__best { margin: 0 0 16px; font-size: 12px; font-style: italic; color: var(--muted); }

/* ---------- CTA ---------- */
.pt .pt__card .wp-block-buttons { margin-top: auto; width: 100%; }
.pt .pt__cta { width: 100%; }
.pt .pt__cta .wp-block-button__link { display: block; width: 100%; text-align: center; padding: 14px; border: none; border-radius: 12px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 14px; color: #fff; background: linear-gradient(135deg, #6C5CE7, var(--purple-dark)); box-shadow: 0 10px 22px rgba(69,58,133,.35); min-height: 0; }
.pt .pt__card--pop .pt__cta .wp-block-button__link { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); box-shadow: 0 10px 22px rgba(226,121,61,.4); }

/* ---------- CRM & Automation router ---------- */
.pt .crm-router { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 760px; margin: 0 auto 22px; }
.pt .crm-route { position: relative; display: flex; gap: 14px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer; padding: 18px 46px 16px 18px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.18); color: #EDEAFB; font-family: "Inter", sans-serif; appearance: none; -webkit-appearance: none; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease; }
.pt .crm-route:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.pt .crm-route:focus-visible { outline: 2px solid #FFD9BB; outline-offset: 2px; }
.pt .crm-route .cr-ico { flex: none; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); }
.pt .crm-route .cr-ico svg { width: 21px; height: 21px; stroke: #EAD9FF; }
.pt .crm-route .cr-body { flex: 1; min-width: 0; }
.pt .crm-route .cr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pt .crm-route .cr-title { font-family: "Sora", sans-serif; font-weight: 700; font-size: 15.5px; color: #fff; }
.pt .crm-route .cr-tag { font-weight: 700; font-size: 10px; color: var(--orange); background: rgba(226,121,61,.16); padding: 2px 8px; border-radius: 999px; }
.pt .crm-route .cr-desc { display: block; font-size: 12.5px; line-height: 1.5; color: #C7C1E8; margin: 0 0 9px; }
.pt .crm-route .cr-from { font-size: 12px; color: #D9D4F5; font-weight: 600; }
.pt .crm-route .cr-from b { font-family: "Sora", sans-serif; font-weight: 800; font-size: 15px; color: #fff; margin: 0 2px; }
.pt .crm-route .cr-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; }
.pt .crm-route .cr-check svg { width: 12px; height: 12px; stroke: #fff; opacity: 0; }
.pt .crm-route.active { background: linear-gradient(135deg, rgba(226,121,61,.22), rgba(196,98,44,.14)); border-color: var(--orange); box-shadow: 0 12px 28px rgba(226,121,61,.28); }
.pt .crm-route.active .cr-ico { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); border-color: transparent; }
.pt .crm-route.active .cr-ico svg { stroke: #fff; }
.pt .crm-route.active .cr-check { background: var(--orange); border-color: var(--orange); }
.pt .crm-route.active .cr-check svg { opacity: 1; }
.pt .pt__crm-view[hidden] { display: none; }

/* ---------- Comparison toggle + table ---------- */
.pt .pt__compare { margin: 16px 0 0; border: 0; background: none; }
.pt .pt__compare > summary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; padding: 15px 26px; border-radius: 14px; border: none; list-style: none; cursor: pointer; font-family: "Sora", sans-serif; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--orange), var(--orange-dark)); box-shadow: 0 10px 26px rgba(226,121,61,.4); }
.pt .pt__compare > summary::-webkit-details-marker { display: none; }
.pt .pt__compare > summary::marker { content: ''; }
.pt .pt__compare > summary::after { content: '\25BE'; }
.pt .pt__compare[open] > summary::after { content: '\25B4'; }

.pt .pt__table { margin: 16px 0 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.pt .pt__preview { margin: 4px 0 0; }
.pt .pt__table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; color: var(--ink); }
.pt .pt__compare .pt__table, .pt .pt__preview { overflow-x: auto; }
.pt .pt__table th, .pt .pt__table td { padding: 10px 14px; text-align: center; border: 0; border-bottom: 1px solid var(--line); }
.pt .pt__table thead th, .pt .pt__table tr:first-child th { font-family: "Sora", sans-serif; font-size: 13px; background: #FAF9FF; color: var(--purple-dark); }
.pt .pt__table td:first-child, .pt .pt__table th:first-child { text-align: left; min-width: 220px; color: #3B3660; font-weight: 500; background: #fff; }
.pt .pt__table th:first-child, .pt .pt__table tr:first-child th:first-child { background: #FAF9FF; }
.pt .pt__table tbody tr:last-child td { border-bottom: none; }

/* Check / cross / quantity (custom colours). */
.pt .pt__table .pt__yes { color: var(--purple); font-weight: 700; font-size: 15px; }
.pt .pt__table .pt__no { color: #D3CFE6; font-weight: 700; font-size: 15px; }
.pt .pt__table .pt__qty { color: var(--orange-dark); font-weight: 700; font-size: 12.5px; }

/* Popular column tint. */
.pt .pt__table td.pt__popcol { background: #FFF6EF; }
.pt .pt__table th.pt__popcol, .pt .pt__table tr:first-child .pt__popcol { background: #FCE9DA; color: var(--orange-dark); }

/* Price rows (mirrors pricing.css standard-tr / price-tr / setup-tr / bestfor-row). */
.pt .pt__table .pt__row-std td { color: var(--red); font-size: 12px; }
.pt .pt__table .pt__row-std td:not(:first-child) { text-decoration: line-through; font-weight: 600; }
.pt .pt__table .pt__row-monthly td, .pt .pt__table .pt__row-annual td, .pt .pt__table .pt__row-lifetime td { background: #F7F5FF; font-weight: 700; }
.pt .pt__table .pt__row-monthly strong, .pt .pt__table .pt__row-annual strong, .pt .pt__table .pt__row-lifetime strong { font-family: "Sora", sans-serif; font-size: 15px; color: var(--purple-dark); }
.pt .pt__table .pt__row-setupm td { color: var(--orange-dark); font-weight: 600; font-size: 12px; }
.pt .pt__table .pt__row-bestfor td { background: var(--purple-dark); color: #EDEAFB; font-size: 12px; font-style: italic; }
.pt .pt__table .pt__row-bestfor td:first-child { background: var(--purple-dark); color: #fff; font-weight: 700; font-style: normal; }
.pt .pt__table .pt__off { color: var(--orange); font-weight: 700; }

/* Show only the price rows for the active billing mode. */
.pt .pt__table .pt__row-monthly, .pt .pt__table .pt__row-annual, .pt .pt__table .pt__row-lifetime, .pt .pt__table .pt__row-setupm { display: none; }
.pt .is-mode-monthly .pt__table .pt__row-monthly, .pt .is-mode-monthly .pt__table .pt__row-setupm, .pt .is-mode-annual .pt__table .pt__row-annual, .pt .is-mode-lifetime .pt__table .pt__row-lifetime { display: table-row; }
.pt .is-mode-lifetime .pt__table .pt__row-std { display: none; }

/* ---------- Bundle savings breakdown ---------- */
.pt .pt__savings-box { margin: 4px 0 0; background: #fff; border-radius: 16px; padding: 20px 22px; color: var(--ink); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.pt .pt__savings-box h4 { margin: 0 0 12px; font-family: "Sora", sans-serif; font-size: 14px; color: var(--purple-dark); }
.pt .pt__savings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pt .savings-col { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.pt .savings-col .tname { margin-bottom: 6px; font-family: "Sora", sans-serif; font-weight: 700; font-size: 12.5px; color: var(--purple); }
.pt .savings-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12px; border-bottom: 1px dashed var(--line); }
.pt .savings-row:last-of-type { border-bottom: none; }
.pt .savings-row .pt__std { color: var(--muted); text-decoration: line-through; font-weight: 600; margin-right: 5px; }
.pt .savings-total { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1.5px solid var(--purple-dark); font-weight: 800; font-size: 13px; color: var(--purple-dark); }

/* ---------- Foot note + responsive ---------- */
.pt .pt__note { margin: 14px auto 0; max-width: 780px; text-align: center; font-size: 11.5px; line-height: 1.55; color: #B8B2DE; }

@media (max-width: 860px) {
	.pt .pt__cards { grid-template-columns: minmax(0, 1fr); }
	.pt .pt__savings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
	.pt .crm-router { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.pt .pt__card, .pt .pt__mode-hl, .pt .pt__mode button, .pt .wp-block-tab-list button, .pt .crm-route { transition: none; }
}

/* ==========================================================
   HVACB pricing-tabs v11 — items 12–14.
   ========================================================== */

/* Item 12 — deeper purple background, consistent with the dark Industry
   Experience section. The light glow top-right is retained (and joined by a
   subtle purple glow) so the white cards sit on stronger contrast. */
.pt{
	background:
		radial-gradient(55% 50% at 92% 0%, rgba(233,140,190,.30) 0%, transparent 63%),
		radial-gradient(48% 44% at 84% 2%, rgba(123,104,238,.20) 0%, transparent 60%),
		linear-gradient(160deg,#2B1E5E 0%,#1E1547 48%,#150C36 100%);
}

/* Item 13 — pricing badge adopts the same gradient language as the other
   section badges (Industry Experience / Working Together / Who We Serve). */
.pt .pt__eyebrow{
	background:linear-gradient(105deg,#3A2C7A 0%,#6B4FB8 42%,#D96A2B 100%);
	border:none;
	box-shadow:0 16px 34px -12px rgba(75,59,143,.6);
}
.pt .pt__eyebrow::before{background:#fff}

/* Item 14 — "Simple pricing." stays white for contrast; "No surprises." takes
   the same gradient accent used on the other section headings. */
.pt .pt__h2 mark{
	background:linear-gradient(104deg,#4B3B8F 0%,#8A5CC4 42%,#D96A2B 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
}