/* Plans & Pricing page styling */

:root {
	/* PRIMITIVES */
	--bb-white: #ffffff;
	--bb-gray-50: #f8fafc;
	--bb-gray-100: #f1f5f9;
	--bb-gray-200: #e2e8f0;
	--bb-gray-300: #cbd5e1;
	--bb-gray-500: #64748b;
	--bb-gray-700: #334155;
	--bb-gray-900: #0f172a;

	--bb-blue: #1976D2;
	--bb-blue-dark: #0A2540;
	--bb-green: #25a249;
	--bb-purple: #B347A3;
	--bb-hosting-bg: #eff6ff;
	--bb-stats-bg: #f7f0ff;

	--bb-radius-sm: 6px;
	--bb-radius-md: 12px;
	--bb-radius-lg: 16px;
	--bb-radius-full: 9999px;

	--bb-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--bb-shadow-md: 0 4px 12px rgba(15, 23, 42, .10);
	--bb-shadow-lg: 0 12px 32px rgba(15, 23, 42, .16);

	--bb-font: inherit;

	/* TYPE SCALE */
	--bb-fs-hero: 2.5rem;                              /* 40 */
	--bb-fs-price: 2.5rem;                             /* 40 */
	--bb-fs-h2: 2rem;                                  /* 32 */
	--bb-fs-name: 1.5rem;                              /* 24 */
	--bb-fs-faq: 1.25rem;                              /* 20 */
	--bb-fs-body: 1.125rem;                            /* 18 */
	--bb-fs-btn: 0.9375rem;                            /* 15 */
	--bb-fs-sm: 0.875rem;                              /* 14 */
	--bb-fs-xs: 0.75rem;                               /* 12 */

	--bb-lh-tight: 1.1;
	--bb-lh-snug: 1.3;
	--bb-lh-body: 1.5;

	/* SPACING - 4px base */
	--bb-space-3xs: .25rem;  /* 4 */
	--bb-space-2xs: .5rem;   /* 8 */
	--bb-space-xs: .75rem;   /* 12 */
	--bb-space-s: 1rem;      /* 16 */
	--bb-space-m: 1.5rem;    /* 24 */
	--bb-space-l: 2rem;      /* 32 */
	--bb-space-xl: 3rem;     /* 48 */
	--bb-space-2xl: 4rem;    /* 64 */
	--bb-space-3xl: 6rem;    /* 96 */

	/* SEMANTICS */
	--bb-color-text: var(--bb-gray-900);
	--bb-color-text-muted: var(--bb-gray-500);
	--bb-color-surface: var(--bb-white);
	--bb-color-border: var(--bb-gray-200);
	--bb-color-accent: var(--bb-blue);
	--bb-card-radius: var(--bb-radius-lg);
	--bb-card-shadow: var(--bb-shadow-md);
	--bb-card-padding: var(--bb-space-l);
}

@media (min-width: 768px) {
	:root {
		--bb-fs-hero: 3.5rem;  /* 56 */
		--bb-fs-h2: 3rem;      /* 48 */
	}
}

/* SHARED COMPONENTS */

.bb-bg-hosting { background-color: var(--bb-hosting-bg); }

.bb-bg-stats { background-color: var(--bb-stats-bg); }

/* A11Y UTILITIES */

.bb-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bb-btn:focus-visible,
.bb-plan-card__link:focus-visible,
.bb-faq__q:focus-visible {
	outline: 2px solid var(--bb-blue-dark);
	outline-offset: 2px;
}

/* button - hero CTAs + card CTAs */
.bb-btn {
	display: inline-block;
	padding: 14px 30px;
	font-size: 16px;
	line-height: 1.4;
	font-weight: 700;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	border: 2px solid var(--bb-blue);
	border-radius: var(--bb-radius-sm);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bb-btn--solid,
.bb-btn--solid:visited {
	background-color: var(--bb-blue);
	color: var(--bb-white);
}

.bb-btn--solid:hover {
	background-color: var(--bb-blue-dark);
	border-color: var(--bb-blue-dark);
	color: var(--bb-white);
	text-decoration: none;
}

.bb-btn--outline,
.bb-btn--outline:visited {
	background-color: var(--bb-white);
	color: var(--bb-blue);
}

.bb-btn--outline:hover {
	background-color: var(--bb-blue);
	color: var(--bb-white);
	text-decoration: none;
}

/* pill - Save 10%, Most Popular badge */
.bb-pill {
	display: inline-block;
	padding: 3px 12px;
	font-size: var(--bb-fs-sm);
	font-weight: 700;
	color: var(--bb-white);
	background-color: var(--bb-purple);
	border-radius: var(--bb-radius-md);
	white-space: nowrap;
}

.bb-pill--popular {
	background-color: var(--bb-blue-dark);
	letter-spacing: .5px;
	padding: 4px 16px;
}

.bb-pill--monthly { background-color: var(--bb-gray-500); }

.bb-hero__ctas { gap: var(--bb-space-s); }

/* HERO TOGGLE */

.bb-toggle-label { font-weight: 700; }

.bb-toggle-label--monthly { margin-right: 2.75rem; }

.bb-toggle-label--annual { margin-left: -0.75rem; }

/* HERO */

.front-page-heading {
	font-size: var(--bb-fs-hero);
	line-height: var(--bb-lh-tight);
}

.bb-hero__subtitle {
	margin: 0;
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	line-height: var(--bb-lh-snug);
}

/* PRICING CARDS */

@media (min-width: 1200px) {
	.bb-pricing-grid { row-gap: var(--bb-space-l); }
}

.bb-plan-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	position: relative;
	padding: var(--bb-space-l) var(--bb-space-m) var(--bb-space-m);
	background-color: var(--bb-color-surface);
	border: 1px solid var(--bb-color-border);
	border-radius: var(--bb-card-radius);
	box-shadow: var(--bb-card-shadow);
	transition: box-shadow .25s ease, transform .25s ease;
}

.bb-plan-card:hover,
.bb-plan-card:focus-within {
	transform: translateY(-6px) scale(1.02);
	box-shadow: var(--bb-shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
	.bb-plan-card:hover,
	.bb-plan-card:focus-within { transform: none; }
	.bb-plan-card--popular:hover::before { animation: none; }
}

.bb-plan-card--popular { border: 3px solid var(--bb-blue-dark); }

.bb-plan-card__badges {
	position: absolute;
	top: -14px;
	left: 50%;
	display: flex;
	gap: var(--bb-space-2xs);
	transform: translateX(-50%);
	z-index: 1;
}

.bb-plan-card__badge--monthly { display: none; }

.bb-plan-card--annual .bb-plan-card__badge--monthly { display: inline-block; }

.bb-plan-card__name {
	margin: 0;
	min-height: 36px;
	text-align: center;
	font-size: var(--bb-fs-name);
	font-weight: 700;
}

.bb-plan-card__tagline {
	margin: 0;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	line-height: var(--bb-lh-snug);
}

.bb-plan-card__divider {
	width: 100%;
	margin: var(--bb-space-2xs) 0 var(--bb-space-s);
	border: 0;
	border-top: 1px solid var(--bb-color-border);
}

.bb-plan-card__price {
	min-height: 48px;
	margin: var(--bb-space-2xs) 0 var(--bb-space-s);
	text-align: center;
}

.bb-plan-card__price-prefix {
	display: block;
	min-height: 1.4em;
	font-size: var(--bb-fs-sm);
	font-weight: 600;
	color: var(--bb-color-text-muted);
}

.bb-plan-card__price-amount {
	font-size: var(--bb-fs-price);
	font-weight: 700;
}

.bb-plan-card__price-period {
	font-size: var(--bb-fs-body);
	color: var(--bb-color-text-muted);
}

.bb-plan-card__cta-wrap {
	margin-bottom: var(--bb-space-s);
	text-align: center;
}

.bb-plan-card__desc {
	margin-bottom: var(--bb-space-m);
	text-align: center;
	font-size: var(--bb-fs-body);
	line-height: var(--bb-lh-body);
}

.bb-plan-card__desc strong,
.bb-plan-card__feature strong { font-weight: 600; }

.bb-plan-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bb-plan-card__feature {
	display: flex;
	align-items: flex-start;
	margin-bottom: var(--bb-space-2xs);
	font-size: var(--bb-fs-body);
	line-height: var(--bb-lh-snug);
}

.bb-plan-card__check {
	flex-shrink: 0;
	margin-right: var(--bb-space-2xs);
	margin-top: 3px;
}

.bb-plan-card__check path {
	fill: none;
	stroke: var(--bb-green);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-plan-card__link {
	display: block;
	margin-top: auto;
	padding-top: var(--bb-space-s);
	text-align: center;
	font-size: var(--bb-fs-sm);
	font-weight: 600;
	color: var(--bb-blue);
}

.bb-plan-card__link:hover, .bb-plan-card__link:visited { color: var(--bb-blue); }

/* rotating-gradient border, revealed on hover of the popular card */
@property --bb-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

.bb-plan-card--popular::before {
	content: '';
	position: absolute;
	inset: -3px;
	padding: 3px;
	border-radius: inherit;
	background: conic-gradient(from var(--bb-angle), var(--bb-blue), var(--bb-purple), var(--bb-green), var(--bb-blue));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}

.bb-plan-card--popular:hover::before {
	opacity: 1;
	animation: bb-rotate 4s linear infinite;
}

@keyframes bb-rotate { to { --bb-angle: 360deg; } }

/* SECTION HEADING */

.bb-section-heading {
	margin: 0 0 var(--bb-space-xl);
	text-align: center;
	font-size: var(--bb-fs-h2);
	font-weight: 700;
	color: var(--bb-color-text);
}

/* COMPARISON MATRIX */

.bb-compare-wrap {
	padding: var(--bb-space-l) var(--bb-space-m);
	background-color: var(--bb-color-surface);
	border-radius: var(--bb-card-radius);
	box-shadow: var(--bb-card-shadow);
	overflow-x: auto;
}

.bb-compare {
	width: 100%;
	border-collapse: collapse;
}

/* floor the table so narrow screens scroll the wrap instead of crushing columns */
#hosting-features .bb-compare { min-width: 680px; }

#stats-features .bb-compare { min-width: 520px; }

.bb-compare th,
.bb-compare td {
	padding: var(--bb-space-s) var(--bb-space-xs);
	font-size: var(--bb-fs-sm);
	text-align: center;
	vertical-align: middle;
}

.bb-compare thead th {
	font-size: var(--bb-fs-body);
	font-weight: 700;
	color: var(--bb-color-text);
	border-bottom: 2px solid var(--bb-color-border);
	white-space: nowrap;
}

.bb-compare__feature {
	text-align: left;
	font-weight: 600;
	color: var(--bb-color-text);
}

.bb-compare tbody td { color: var(--bb-color-text); }

.bb-compare tbody tr:nth-child(odd) { background-color: var(--bb-gray-50); }

.bb-compare__star { color: #b7791f; }

.bb-compare__check { display: inline-block; vertical-align: middle; }

.bb-compare__check circle,
.bb-compare__check path {
	fill: none;
	stroke: var(--bb-blue);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bb-compare__dash { color: var(--bb-gray-500); }

/* HOSTING THAT MAKES SENSE */

.bb-hosting {
	padding: var(--bb-space-xl) var(--bb-space-s);
}

.bb-hosting .bb-section-heading { margin-bottom: var(--bb-space-2xs); }

.bb-hosting__subtitle {
	margin: 0 0 var(--bb-space-s);
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-hosting__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bb-space-l);
	align-items: center;
}

@media (min-width: 768px) {
	.bb-hosting__grid { grid-template-columns: 1fr 1fr; }
}

.bb-hosting__intro {
	margin: 0 0 var(--bb-space-l);
	text-align: left;
	font-size: var(--bb-fs-body);
	line-height: var(--bb-lh-body);
	color: var(--bb-color-text);
}

.bb-hosting-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--bb-color-surface);
	border-radius: var(--bb-card-radius);
	overflow: hidden;
	box-shadow: var(--bb-card-shadow);
}

.bb-hosting-table th,
.bb-hosting-table td {
	padding: var(--bb-space-s) var(--bb-space-m);
	text-align: left;
	font-size: var(--bb-fs-body);
	color: var(--bb-color-text);
}

.bb-hosting-table thead th {
	font-weight: 700;
	border-bottom: 2px solid var(--bb-color-border);
}

.bb-hosting-table tbody tr:nth-child(odd) { background-color: var(--bb-gray-50); }

.bb-hosting__closing {
	margin: var(--bb-space-l) 0 0;
	text-align: left;
	font-size: var(--bb-fs-body);
	color: var(--bb-color-text);
}

/* ADD-ONS */

.bb-addons { padding: var(--bb-space-xl) var(--bb-space-s); }

.bb-addons__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--bb-space-l);
}

@media (min-width: 768px) {
	.bb-addons__grid { grid-template-columns: 1fr 1fr; }
}

.bb-addon-card {
	display: flex;
	align-items: stretch;
	background-color: var(--bb-color-surface);
	border-radius: var(--bb-card-radius);
	box-shadow: var(--bb-card-shadow);
	overflow: hidden;
	transition: box-shadow .2s ease;
}

.bb-addon-card:hover { box-shadow: var(--bb-shadow-lg); }

.bb-addon-card__media {
	flex-shrink: 0;
	width: 150px;
	align-self: stretch;
	overflow: hidden;
}

.bb-addon-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-addon-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: var(--bb-space-m) var(--bb-space-l);
}

.bb-addon-card__title {
	margin: 0 0 var(--bb-space-2xs);
	font-size: var(--bb-fs-faq);
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-addon-card__desc {
	margin: 0 0 var(--bb-space-s);
	font-size: var(--bb-fs-sm);
	line-height: var(--bb-lh-body);
	color: var(--bb-gray-700);
}

.bb-addon-card__cta {
	padding: 8px 20px;
	font-size: var(--bb-fs-btn);
}

/* PODCAST STATISTICS */

.bb-stats {
	padding-top: var(--bb-space-xl);
	padding-bottom: var(--bb-space-xl);
}

.bb-stats .bb-section-heading { margin-bottom: var(--bb-space-2xs); }

.bb-stats__subtitle {
	margin: 0 0 var(--bb-space-2xl);
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-stat-card__price { margin-bottom: var(--bb-space-2xs); }

.bb-stat-card__included {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 111px;
	font-size: var(--bb-fs-faq);
	font-weight: 700;
	line-height: var(--bb-lh-snug);
	color: var(--bb-color-text);
}

.bb-stat-card__hosting {
	margin: 0 0 var(--bb-space-m);
	text-align: center;
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-stat-card__desc { text-align: left; }

.bb-stat-card__footnote {
	margin: var(--bb-space-s) 0 0;
	font-size: var(--bb-fs-xs);
	color: var(--bb-color-text-muted);
}

.bb-stats__iab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-space-m);
	margin-top: var(--bb-space-2xs);
}

.bb-stats__iab-badge {
	flex-shrink: 0;
	width: 56px;
	height: auto;
}

.bb-stats__iab-text {
	margin: 0;
	font-weight: 700;
	color: var(--bb-color-text);
}

.bb-stats .bb-stats__compare-heading {
	margin-top: var(--bb-space-2xl);
	margin-bottom: var(--bb-space-l);
}

.bb-stats__compare-note {
	max-width: 900px;
	margin: var(--bb-space-l) auto 0;
	text-align: center;
	font-size: var(--bb-fs-body);
	font-weight: 700;
	color: var(--bb-color-text);
}

/* FAQ */

.bb-faq { padding: var(--bb-space-xl) var(--bb-space-s); }

.bb-faq__list {
	max-width: 820px;
	margin: 0 auto;
}

.bb-faq__item {
	margin-bottom: var(--bb-space-s);
	background-color: var(--bb-color-surface);
	border-radius: var(--bb-radius-md);
	box-shadow: var(--bb-shadow-sm);
}

.bb-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-space-m);
	padding: var(--bb-space-m);
	font-size: var(--bb-fs-faq);
	font-weight: 700;
	color: var(--bb-color-text);
	cursor: pointer;
	list-style: none;
}

.bb-faq__q::-webkit-details-marker { display: none; }

.bb-faq__q::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--bb-color-text-muted);
}

.bb-faq__item[open] .bb-faq__q::after { content: '\2212'; }

.bb-faq__item::details-content {
	content-visibility: unset;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s ease-in-out;
}

.bb-faq__item[open]::details-content { grid-template-rows: 1fr; }

.bb-faq__a-wrap {
	overflow: hidden;
}

.bb-faq__a {
	padding: 0 var(--bb-space-m) var(--bb-space-m);
	font-size: var(--bb-fs-body);
	line-height: var(--bb-lh-body);
	color: var(--bb-color-text);
}

.bb-faq__cta {
	margin-top: var(--bb-space-xl);
	text-align: center;
}

/* HOSTING FEATURES */

.bb-features-head { margin-bottom: var(--bb-space-l); }

/* SMALL SCREENS - wordpress 600px step */

@media (max-width: 599px) {
	.bb-hero__ctas {
		flex-direction: column;
		padding: 0 var(--bb-space-s);
	}

	.bb-hero__ctas .bb-btn { width: 100%; }

	/* narrow cards go tall+skinny under stretch, square it instead */
	.bb-addon-card__media {
		width: 120px;
		aspect-ratio: 1;
		align-self: center;
		margin-left: var(--bb-space-m);
	}

	.bb-addon-card__body { padding: var(--bb-space-s) var(--bb-space-m); }
}

/* FOOTER */

.blubrry-footer-homepage { background-color: #eeeeee; }

.blubrry-footer-homepage-icon {
	width: 20%;
	left: 40%;
}
</content>
</invoke>