/* ==========================================================================
   Pricing Overview (/pricing-overview/)
   Moved here 10 Aug 2026 from an HTML block inside the page itself, so the
   page can be built from ordinary blocks and edited without touching markup.
   Every class below is applied via the block sidebar "Additional CSS class(es)"
   field, so the design survives text edits.
   Note: Mai wraps flow groups in .wp-block-group__inner-container, so layout
   properties have to go on that child, not on the group itself.
   ========================================================================== */
:root{
	--pcb-blue:#2E6FC8;
	--pcb-blue-light:#4A8FE7;
	--pcb-navy:#0E2A5B;
	--pcb-pale:#E8F0FB;
	--pcb-line:#E1E6EF;
	--pcb-gold-dark:#9C7220;
	--pcb-ink-soft:#4A5161;
}

/* ---------- Hero ---------- */
.pcb-hero-img{
	margin:0;
}
.pcb-hero-img img{
	aspect-ratio:4/3;
	object-fit:cover;
	width:100%;
	height:auto;
	display:block;
}
.pcb-hero-section.has-lg-padding-bottom{
	padding-bottom:calc(var(--padding-lg) - 50px);
}

/* ---------- Section eyebrow label (paragraph block) ---------- */
.pcb-eyebrow{
	display:block;
	width:fit-content;
	font-size:16px;
	font-weight:800;
	letter-spacing:0.18em;
	text-transform:uppercase;
	background:var(--pcb-pale);
	color:var(--pcb-blue);
	padding:8px 18px;
	/* 36px, not 18px: the eyebrow used to be a span inside its own paragraph,
	   so the gap below it was the span margin plus the paragraph margin. This
	   keeps the spacing the page was signed off with. */
	margin:0 0 36px;
	line-height:1.2;
}
.pcb-eyebrow.has-text-align-center{
	margin-left:auto;
	margin-right:auto;
}
.pcb-eyebrow.dark{
	background:rgba(255,255,255,0.14);
	color:#fff;
}
.pcb-eyebrow.gold{
	background:rgba(200,147,46,0.14);
	color:var(--pcb-gold-dark);
}
.pcb-section-title{
	margin-bottom:14px;
}
.pcb-section-intro{
	max-width:640px;
	margin:0 auto 8px;
}

/* ---------- Hero promise bar (flex group of paragraphs) ---------- */
.pcb-promise{
	width:fit-content;
	max-width:100%;
	margin:32px auto 0;
	padding:16px 28px;
	background:#fff;
	border:1px solid var(--pcb-line);
	box-shadow:0 1px 2px rgba(14,42,91,.06),0 6px 18px rgba(14,42,91,.06);
	font-size:16px;
	line-height:1.4;
}
.pcb-promise .pcb-promise-item{
	margin:0;
	font-size:16px;
	font-weight:700;
	color:var(--pcb-navy);
}
.pcb-promise .pcb-promise-item + .pcb-promise-item{
	position:relative;
	padding-left:16px;
}
.pcb-promise .pcb-promise-item + .pcb-promise-item::before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:1px;
	height:16px;
	background:var(--pcb-line);
}

/* The separators only make sense while the three phrases sit on one row. */
@media (max-width:600px){
	.pcb-promise .pcb-promise-item + .pcb-promise-item{
		padding-left:0;
	}
	.pcb-promise .pcb-promise-item + .pcb-promise-item::before{
		display:none;
	}
}

/* ---------- Package cards (grid group of two groups) ---------- */
.pcb-cards{
	max-width:none;
	margin-left:auto;
	margin-right:auto;
}
@media (max-width:880px){
	.wp-block-group.pcb-cards{
		grid-template-columns:1fr;
	}
}
.pcb-card{
	position:relative;
	background:#fff;
	color:#1A1F2E;
	overflow:hidden;
	box-shadow:0 8px 24px rgba(14,42,91,.10),0 24px 48px rgba(14,42,91,.08);
	transition:transform .25s ease,box-shadow .25s ease;
}
.pcb-card:hover{
	transform:translateY(-4px);
	box-shadow:0 12px 32px rgba(14,42,91,.14),0 30px 60px rgba(14,42,91,.12);
}
.pcb-card::before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:6px;
}
.pcb-card-bib::before{
	background:linear-gradient(90deg,#6FA9E7 0%,#2E6FC8 50%,#0E2A5B 100%);
}
.pcb-card-byw::before{
	background:linear-gradient(90deg,#0E2A5B 0%,#1E5BB8 50%,#0A1F44 100%);
}
.pcb-card > .wp-block-group__inner-container{
	display:flex;
	flex-direction:column;
	height:100%;
	padding:38px 36px 36px;
}
.pcb-card .pcb-tier{
	font-size:16px;
	font-weight:800;
	letter-spacing:0.18em;
	text-transform:uppercase;
	margin:0 0 12px;
}
.pcb-card-bib .pcb-tier{
	color:var(--pcb-blue);
}
.pcb-card-byw .pcb-tier{
	color:var(--pcb-gold-dark);
}
.pcb-card h3.pcb-card-title{
	font-size:30px;
	font-weight:800;
	margin:0 0 8px;
	color:var(--pcb-navy);
	line-height:1.15;
}
.pcb-card .pcb-tagline{
	font-size:16px;
	color:var(--pcb-ink-soft);
	margin:0 0 24px;
}
.pcb-card .pcb-price{
	padding-bottom:22px;
	margin:0 0 24px;
	border-bottom:1px dashed var(--pcb-line);
}
.pcb-card .pcb-price.is-layout-flex{
	align-items:baseline;
}
.pcb-card .pcb-price p{
	margin:0;
}
.pcb-card .pcb-price-lbl{
	font-size:16px;
	color:var(--pcb-ink-soft);
	text-transform:uppercase;
	letter-spacing:0.1em;
	font-weight:700;
	align-self:flex-start;
	padding-top:14px;
	margin-right:4px;
}
.pcb-card .pcb-price-amt{
	font-size:46px;
	font-weight:800;
	color:var(--pcb-navy);
	letter-spacing:-0.03em;
	line-height:1;
}
.pcb-card .pcb-price-per{
	font-size:18px;
	color:var(--pcb-ink-soft);
	font-weight:500;
}
/* "Starting at" gets its own line on a phone. Below this it cannot sit beside
   the figure without wrapping mid-label, and the row then overflows the card,
   which clips, so "/month" would disappear. */
@media (max-width:480px){
	.pcb-card .pcb-price.is-layout-flex{
		flex-wrap:wrap;
	}
	.pcb-card .pcb-price-lbl{
		flex:0 0 100%;
		align-self:auto;
		margin:0 0 6px;
		padding-top:0;
	}
}
.pcb-card .pcb-best-label{
	font-size:16px;
	font-weight:800;
	letter-spacing:0.14em;
	text-transform:uppercase;
	color:#1A1F2E;
	margin:0 0 10px;
}
.pcb-card .pcb-best-text{
	font-size:16px;
	color:var(--pcb-ink-soft);
	margin:0 0 22px;
	line-height:1.55;
}
.pcb-card .pcb-features{
	list-style:none;
	padding:0;
	margin:0 0 26px;
	display:flex;
	flex-direction:column;
	gap:11px;
}
/* The tick is positioned, not a flex item. The automated internal linking plugin
   injects <a> tags into these list items, and every one of them would become a
   separate flex item: extra 12px gaps around the link, and each free to shrink
   below its own text, which broke words in half on narrow screens. */
.pcb-card .pcb-features li{
	position:relative;
	margin:0;
	padding-left:30px;
	font-size:16px;
	color:#1A1F2E;
	line-height:1.45;
}
.pcb-card .pcb-features li::before{
	content:'';
	position:absolute;
	left:0;
	top:3px;
	width:18px;
	height:18px;
	background-color:var(--pcb-blue);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/></svg>") no-repeat center/18px;
	mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M16.7 5.3a1 1 0 010 1.4l-8 8a1 1 0 01-1.4 0l-4-4a1 1 0 011.4-1.4L8 12.6l7.3-7.3a1 1 0 011.4 0z'/></svg>") no-repeat center/18px;
}
.pcb-card-byw .pcb-features li::before{
	background-color:var(--pcb-navy);
}
.pcb-card .pcb-card-cta{
	margin-top:auto;
	padding-top:8px;
}

/* ---------- Card buttons (core button block) ---------- */
.wp-block-button.pcb-btn{
	width:100%;
}
.wp-block-button.pcb-btn > .wp-block-button__link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:100%;
	padding:14px 22px;
	border:0;
	border-radius:0;
	font-size:16px;
	font-weight:700;
	letter-spacing:0.01em;
	text-decoration:none;
	transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.wp-block-button.pcb-btn > .wp-block-button__link::after{
	content:"\2192";
	display:inline-block;
	transition:transform .2s ease;
}
.wp-block-button.pcb-btn > .wp-block-button__link:hover::after{
	transform:translateX(3px);
}
/* The arrow is a pointer affordance. On a phone there is no hover to reward,
   the label already wraps, and it only crowds the button. */
@media (max-width:600px){
	.wp-block-button.pcb-btn > .wp-block-button__link::after{
		display:none;
	}
}
.wp-block-button.pcb-btn-bib > .wp-block-button__link{
	background:linear-gradient(135deg,#2E6FC8 0%,#0E2A5B 100%);
	color:#fff;
}
.wp-block-button.pcb-btn-bib > .wp-block-button__link:hover,
.wp-block-button.pcb-btn-bib > .wp-block-button__link:focus{
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(46,111,200,.32);
	color:#fff;
}
.wp-block-button.pcb-btn-byw > .wp-block-button__link{
	background:var(--pcb-navy);
	color:#fff;
}
.wp-block-button.pcb-btn-byw > .wp-block-button__link:hover,
.wp-block-button.pcb-btn-byw > .wp-block-button__link:focus{
	transform:translateY(-1px);
	box-shadow:0 8px 20px rgba(14,42,91,.30);
	background:#0A1F44;
	color:#fff;
}

/* ---------- "Included with both" tiles ---------- */
.pcb-tiles{
	max-width:1040px;
	margin-left:auto;
	margin-right:auto;
}
@media (max-width:760px){
	.wp-block-group.pcb-tiles{
		grid-template-columns:repeat(2,1fr);
	}
}
.pcb-tile{
	background:#fff;
	box-shadow:0 1px 3px rgba(14,42,91,.05),0 6px 14px rgba(14,42,91,.04);
}
.pcb-tile > .wp-block-group__inner-container{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:14px;
	height:100%;
	padding:24px 18px;
	text-align:center;
}
.pcb-tile .mai-icon{
	--icon-color:var(--pcb-blue);
	color:var(--pcb-blue);
}
.pcb-tile .pcb-tile-text{
	margin:0;
	font-size:16px;
	font-weight:600;
	color:var(--pcb-navy);
	line-height:1.3;
}

/* ---------- Comparison table ---------- */
.wp-block-table.pcb-compare{
	max-width:1000px;
	margin:0 auto;
}
.wp-block-table.pcb-compare table{
	border-collapse:collapse;
	width:100%;
	background:#fff;
	box-shadow:0 1px 3px rgba(14,42,91,.06),0 8px 24px rgba(14,42,91,.06);
	border:1px solid var(--pcb-line);
}
.wp-block-table.pcb-compare thead th{
	background:var(--pcb-navy);
	color:#fff;
	text-align:left;
	padding:16px 22px;
	font-weight:700;
	font-size:16px;
	letter-spacing:0.02em;
	border:none;
}
.wp-block-table.pcb-compare tbody td{
	padding:16px 22px;
	border-top:1px solid var(--pcb-line);
	vertical-align:top;
	font-size:16px;
	color:#1A1F2E;
}
.wp-block-table.pcb-compare tbody td:first-child{
	font-weight:700;
	color:var(--pcb-navy);
	width:32%;
}
.wp-block-table.pcb-compare tbody td:nth-child(2){
	background:rgba(74,143,231,0.04);
	width:34%;
}
.wp-block-table.pcb-compare tbody td:nth-child(3){
	border-left:1px solid var(--pcb-line);
}

/* Three columns will not fit a phone, and a table wide enough to need sideways
   scrolling pushes the whole page sideways with it. Below this each row becomes
   a stacked block: the row label as a heading, then one value per package.
   The package names come from data-label, which PCB::renderBlock copies out of
   this table's own header row, so renaming a column renames these too. */
@media (max-width:700px){
	.wp-block-table.pcb-compare table,
	.wp-block-table.pcb-compare tbody,
	.wp-block-table.pcb-compare tbody tr,
	.wp-block-table.pcb-compare tbody td{
		display:block;
		width:auto;
	}
	.wp-block-table.pcb-compare thead{
		display:none;
	}
	.wp-block-table.pcb-compare tbody tr + tr{
		border-top:1px solid var(--pcb-line);
	}
	.wp-block-table.pcb-compare tbody td{
		width:auto;
		border:0;
		padding:0 20px 14px;
	}
	.wp-block-table.pcb-compare tbody td:first-child{
		width:auto;
		padding-top:18px;
		padding-bottom:12px;
		font-size:18px;
	}
	.wp-block-table.pcb-compare tbody td:nth-child(2){
		background:none;
		width:auto;
	}
	.wp-block-table.pcb-compare tbody td[data-label]::before{
		content:attr(data-label);
		display:block;
		margin-bottom:2px;
		font-size:13px;
		font-weight:800;
		letter-spacing:0.12em;
		text-transform:uppercase;
	}
	.wp-block-table.pcb-compare tbody td:nth-child(2)::before{
		color:var(--pcb-blue);
	}
	.wp-block-table.pcb-compare tbody td:nth-child(3)::before{
		color:var(--pcb-gold-dark);
	}
}

/* ---------- Final CTA ---------- */
.pcb-final-cta{
	position:relative;
	overflow:hidden;
}
.pcb-final-cta::before{
	content:'';
	position:absolute;
	inset:0;
	background-image:radial-gradient(circle at 25% 50%,rgba(74,143,231,.18),transparent 50%),radial-gradient(circle at 75% 50%,rgba(74,143,231,.12),transparent 50%);
	pointer-events:none;
}
.pcb-final-cta > *{
	position:relative;
}
.pcb-final-cta .wp-block-button__link{
	text-decoration:none;
}

/* ==========================================================================
   Mai Accordion, styled to match the Genesis accordions used elsewhere on the
   site (grey summary bar, triangle marker on the left). Add the class
   "pcb-accordion" to a Mai Accordion block to get this look.
   ========================================================================== */
.pcb-accordion .mai-accordion-item{
	background:transparent;
	border:0;
	box-shadow:none;
}
.pcb-accordion .mai-accordion-summary{
	min-height:0;
	padding:10px 15px 10px 40px;
	background:#f2f2f2;
	color:#232323;
	font-family:inherit;
	font-size:inherit;
	font-weight:400;
	line-height:inherit;
	letter-spacing:normal;
}
.pcb-accordion .mai-accordion-summary:hover{
	color:#232323;
}
.pcb-accordion .mai-accordion-summary::after{
	left:18px;
	right:auto;
	width:0;
	height:0;
	margin:0;
	background:none;
	-webkit-mask-image:none;
	mask-image:none;
	border-left:6px solid #232323;
	border-top:5px solid transparent;
	border-bottom:5px solid transparent;
	transform:translateY(-50%);
	transition:transform .2s ease;
}
.pcb-accordion .mai-accordion-item[open] > .mai-accordion-summary::after{
	transform:translateY(-50%) rotate(90deg);
}
.pcb-accordion .mai-accordion-content{
	padding:10px 15px;
}