/**
 * Section: pricing (Figma Pricing / 1 plan 10543:3740 and 3 plans
 * 10597:96588): yellow hatched hero with the ticket-shaped price card between
 * two stickers, the Free / Pro comparison behind a disclosure, then the
 * money-back row.
 */

.hb-section.hb-section--pricing {
	position: relative;
	margin-top: 0;
	/* Block padding only: the inline padding is the site gutter. */
	padding-top: calc(var(--hb-header-overlap) + 1.75rem);
	padding-bottom: 12.125rem;
	overflow-x: clip;
	/* Figma image-bg 10548:65738: the yellow hatching, 1775.5px wide, centred,
	 * and as wide as the screen beyond that. */
	background-position: 50% 2px;
	background-repeat: no-repeat;
	background-size: max(1775.5px, 100%) auto;
}

.hb-section.hb-section--pricing > * {
	margin-block: 0;
}

.hb-pricing__head.hb-pricing__head {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	max-width: 40.25rem;
	margin-top: var(--wp--preset--spacing--30) !important;
	text-align: center;
}

.hb-pricing__head.hb-pricing__head > * {
	margin: 0;
}

.hb-pricing__title.hb-pricing__title {
	letter-spacing: -0.042em;
	line-height: 1;
}

.hb-pricing__head p {
	letter-spacing: -0.04em;
	line-height: 1.3;
}

/* Stage: the card, with the stickers on either side. Figma: the card's top
 * cap 44px under the introduction, the body 78px lower. */
.hb-pricing__stage.hb-pricing__stage {
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: calc(var(--wp--preset--spacing--70) + 4.625rem) !important;
}

.hb-pricing__stage.hb-pricing__stage > * {
	margin: 0;
}

.hb-pricing__sticker.hb-pricing__sticker {
	position: absolute;
	z-index: 1;
}

.hb-pricing__sticker--seopress.hb-pricing__sticker--seopress {
	--hb-sticker-rotate: -10deg;
	top: 8.4125rem;
	left: calc(50% - 30.6rem);
}

.hb-pricing__sticker--trusted.hb-pricing__sticker--trusted {
	--hb-sticker-rotate: 4deg;
	top: 7.8125rem;
	left: calc(50% + 17.85rem);
}

/* Price card: a white ticket whose top and bottom caps are the Figma tab. */
.hb-price-card.hb-price-card {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	width: min(26.375rem, 100%);
	padding: 0 var(--wp--preset--spacing--60) 2px;
	background-color: var(--wp--preset--color--base);
	filter: drop-shadow(40px 64px 32px rgb(173 173 173 / 0.16));
}

.hb-price-card.hb-price-card > * {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

.hb-price-card::before,
.hb-price-card::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	aspect-ratio: 422 / 79;
	background: url("../../images/pricing/card-cap.svg") center / 100% 100% no-repeat;
}

.hb-price-card::before {
	bottom: calc(100% - 1px);
}

.hb-price-card::after {
	top: calc(100% - 1px);
	transform: rotate(180deg);
}

.hb-price-card__row.hb-price-card__row {
	padding-block: var(--wp--preset--spacing--30);
}

/* Figma: 16px between the price and the offer, and between the button and
 * the note; 24px elsewhere. */
.hb-price-card.hb-price-card > :is(.hb-limited, .hb-price-card__note) {
	margin-top: calc(var(--wp--preset--spacing--40) - var(--wp--preset--spacing--50));
}

.hb-price-card__row.hb-price-card__row > * {
	margin: 0;
}

.hb-price.hb-price {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	white-space: nowrap;
}

/* 96px at 1440 (Figma), 64px on phones. */
.hb-price__now {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(4rem, 3.2956rem + 3.0047vw, 6rem);
	font-weight: 400;
	letter-spacing: -0.0417em;
	line-height: 0.75;
}

/* Figma: a 66px column, centred on the 72px price line. */
.hb-price__meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	height: 4.125rem;
	color: var(--hb-text-subtle);
}

.hb-price__was {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--headline-1);
	font-weight: 400;
	letter-spacing: -0.042em;
	line-height: 1;
}

.hb-price__period {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.7143;
}

.hb-price-card__currency.hb-price-card__currency {
	flex: none;
	width: auto;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--sm);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.7143;
}

/* Limited offer ticket with its promo sticker and perforation. */
.hb-limited.hb-limited {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	box-sizing: border-box;
	min-height: 6rem;
	padding: 0.875rem var(--wp--preset--spacing--40) 0.875rem 5.75rem;
	background: url("../../images/pricing/limited-ticket.svg") center / 100% 100% no-repeat;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-limited.hb-limited > * {
	margin: 0;
}

/* Figma progress 10548:64397: 8px track, the sold share in brown. */
.hb-limited__bar {
	position: relative;
	display: block;
	height: 0.5rem;
	overflow: hidden;
	border-radius: 30px;
	background-color: var(--wp--preset--color--surface-strong);
}

.hb-limited__bar > span {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 30px;
	background-color: #30211a;
}

.hb-limited__spots.hb-limited__spots {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.7143;
}

.hb-limited::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 3.1rem;
	height: 3.1rem;
	background:
		url("../../images/pricing/fire.svg") center / 1.8rem no-repeat,
		url("../../images/pricing/badge-promo.svg") center / contain no-repeat;
	transform: translateY(-50%);
}

@media (prefers-reduced-motion: no-preference) {
	.hb-limited::before {
		animation: hb-wiggle 3s ease-in-out infinite;
	}

	@keyframes hb-wiggle {
		0%, 100% { transform: translateY(-50%) rotate(0deg); }
		50% { transform: translateY(-50%) rotate(-8deg); }
	}
}

.hb-limited::after {
	content: "";
	position: absolute;
	top: 1.3rem;
	bottom: 1.3rem;
	left: 4.95rem;
	border-left: 1px dashed var(--wp--preset--color--muted);
}

.hb-price-card__features.hb-price-card__features {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
}

.hb-price-card__features li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-height: 2rem;
	margin: 0;
}

.hb-price-card__features li::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("../../icons/check-double-line.svg") center / contain no-repeat;
	mask: url("../../icons/check-double-line.svg") center / contain no-repeat;
}

/* Two-line button (Figma Secondary-Desc). */
.hb-button-desc .wp-block-button__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 0.5rem;
}

.hb-button-desc__note {
	margin-top: -2px;
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-price-card__note.hb-price-card__note {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

/* Three plans (Figma Pricing / 3 plans 10597:96595): the licence plans on
 * the tab bar at the top of the card, one panel per plan. */
.hb-section.hb-section--pricing.hb-pricing--plans {
	padding-bottom: 12.5rem;
}

.hb-plans.hb-plans {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

/* Figma: a 54px bar, the 36px buttons centred in it. */
.hb-plans .hb-tablist {
	padding-block: 0.5625rem;
}

/* The plan names are the product's own (its variation attribute): a long
 * one ("Unlimited websites") wraps inside its tab instead of overflowing. */
.hb-plans .hb-tab {
	height: auto;
	min-height: 2.25rem;
	padding-inline: var(--wp--preset--spacing--30);
	line-height: 1.1;
	text-align: center;
	white-space: normal;
}

.hb-plan.hb-plan {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.hb-plan.hb-plan > * {
	margin: 0;
}

/* Without JavaScript the plans follow one another down the card. */
.hb-plans:not(.hb-tabs--enhanced) > .hb-plan + .hb-plan {
	margin-top: 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px dashed var(--wp--preset--color--muted);
}

/* Complete features list: a disclosure styled as an outline button, 48px
 * under the card's bottom cap (78px below its body). */
.hb-pricing__details.hb-pricing__details {
	margin-top: calc(var(--wp--preset--spacing--70) + 4.875rem) !important;
}

.hb-pricing__details > summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	width: max-content;
	margin-inline: auto;
	padding: calc(var(--wp--preset--spacing--40) - 1px) calc(var(--wp--preset--spacing--50) - 1px);
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.25;
	list-style: none;
	cursor: pointer;
}

.hb-pricing__details > summary::-webkit-details-marker {
	display: none;
}

.hb-pricing__details > summary::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background-color: currentColor;
	-webkit-mask: url("../../icons/arrow-down-s-line.svg") center / contain no-repeat;
	mask: url("../../icons/arrow-down-s-line.svg") center / contain no-repeat;
	transition: transform var(--wp--custom--transition);
}

.hb-pricing__details[open] > summary::after {
	transform: rotate(180deg);
}

.hb-compare-table.hb-compare-table {
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	overflow-x: auto;
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--base);
	box-shadow: var(--hb-shadow-drop);
}

.hb-compare-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.05rem;
	line-height: 1.25;
}

.hb-compare-table th,
.hb-compare-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	text-align: left;
	vertical-align: top;
}

.hb-compare-table th {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	letter-spacing: 0;
}

.hb-compare-table tr > :nth-child(1) {
	width: 50%;
}

.hb-compare-table tbody tr:last-child td {
	border-bottom: 0;
}

/* The white row: it pulls up over the hatching so the notches show it
 * (Figma: its top 73px under the features list button). */
.hb-scalloped.hb-pricing-row {
	margin-top: -7.5625rem;
}

/* The FAQ ends the row: the lower band follows it directly. */
.hb-pricing-row > .hb-section--faq.hb-section--faq:last-child {
	padding-bottom: 0;
}

.hb-pricing-row > .hb-section--why.hb-section--why {
	padding-top: var(--wp--preset--spacing--90);
}

/* Money-back guarantee row. */
.hb-section.hb-section--money-back {
	margin-top: 0;
}

.hb-money-back.hb-money-back {
	display: grid;
	grid-template-columns: minmax(0, 603fr) minmax(0, 422fr);
	align-items: center;
	gap: var(--wp--preset--spacing--80);
}

.hb-money-back.hb-money-back > * {
	margin: 0;
}

.hb-money-back__media.hb-money-back__media {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.hb-money-back__media img {
	display: block;
	width: 100%;
	height: auto;
}

.hb-money-back__text.hb-money-back__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.hb-money-back__text.hb-money-back__text > * {
	margin: 0;
}

.hb-money-back__text h2 {
	letter-spacing: -0.025em;
	line-height: 1;
}

.hb-money-back__text p {
	letter-spacing: -0.04em;
	line-height: 1.3;
}

@media (max-width: 1199.98px) {
	.hb-pricing__sticker.hb-pricing__sticker {
		display: none;
	}
}

@media (max-width: 1023.98px) {
	.hb-money-back.hb-money-back {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

@media (max-width: 599.98px) {
	.hb-price-card.hb-price-card {
		padding-inline: var(--wp--preset--spacing--50);
	}

	.hb-limited.hb-limited {
		padding-left: 5.25rem;
	}

	/* The plan names keep their width and wrap rather than overflow. */
	.hb-plans .hb-tablist {
		gap: var(--wp--preset--spacing--10);
		padding-inline: 0.25rem;
	}

	.hb-plans .hb-tab {
		flex: 1 0 auto;
		height: auto;
		min-height: 2rem;
		padding: 0.25rem 0.5rem;
		font-size: var(--wp--preset--font-size--small);
		line-height: 1.25;
	}

	.hb-compare-table.hb-compare-table {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.hb-compare-table th,
	.hb-compare-table td {
		padding-inline: var(--wp--preset--spacing--20);
	}
}

/* The currency drops under the price when both no longer fit. */
@media (max-width: 399.98px) {
	.hb-price-card__row.hb-price-card__row {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}
}