/* ================================================
   AMOTZ — PRICING  "מה ההשקעה שלכם?"  (Figma 570:639)
   ================================================
   band      1440x961 · #0C0C0C · padding 80/60 · gap 90
   headline  Polin Bold 54/1.2 · tracking 1 · white
   shell     rgba(246,244,238,.1) · radius 48 · padding 32 · gap 32
   list      308px · struck prices against their labels, divided by a hairline
   card      581x582 · the shared botanical background · radius 24 · padding 40/24
   ================================================ */

.az-pricing {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 90px;
	padding: 80px var(--az-edge);
	overflow: hidden;
	background-color: var(--az-ink);
}

.az-pricing__glow {
	position: absolute;
	top: 187px; /* the design's 107.5px inside a column that starts 80px down */
	left: calc(50% + 19.5px); /* the design offsets it slightly right of centre */
	transform: translateX(-50%);
	z-index: 0;
	width: 379px;
	max-width: 100%;
	height: 651px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
}

.az-pricing__title {
	position: relative;
	z-index: 1;
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1px;
	color: #FFFFFF;
	text-align: center;
}

/* THE CREAM CARD IS ON THE RIGHT AND IS WRITTEN FIRST. Figma lists the summary list first
   because it is the LEFT column on an LTR canvas; under dir="rtl" the first flex child lands
   on the right. */
.az-pricing__shell {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 32px;
	overflow: hidden;
	background-color: rgba(246, 244, 238, 0.1);
	border-radius: 48px;
}

/* ------------------------------------------------
   THE OFFER CARD
   ------------------------------------------------ */
.az-pricing__card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 44px;
	width: 581px;
	max-width: 100%;
	min-height: 582px;
	padding: 40px 24px;
	overflow: hidden;
	background-color: var(--az-cream);
	border-radius: 24px;
	text-align: right;
}

.az-section .az-pricing__card-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.az-pricing__card > *:not(.az-pricing__card-bg) {
	position: relative;
	z-index: 1;
	width: 100%;
}

.az-pricing__badge {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--az-brown);
}

.az-pricing__card-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--az-brown);
}

/* `line-through` with `skip-ink: none`, matching the design — the rule runs unbroken through
   descenders rather than hopping over them. */
.az-pricing__struck {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: line-through;
	text-decoration-skip-ink: none;
	color: var(--az-brown);
}

/* The bonus row. Its label is written FIRST and its struck price LAST with space-between, so
   under dir="rtl" the label sits at the right and the price at the left — the design's
   arrangement, where the price is the second child on an LTR canvas. */
.az-pricing__bonus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 18px 20px;
	background-color: rgba(221, 168, 51, 0.3);
	border: 1px solid rgba(221, 168, 51, 0.2);
	border-radius: 14px;
}

.az-pricing__bonus-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: #15130F;
}

.az-pricing__bonus-price {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: line-through;
	text-decoration-skip-ink: none;
	color: var(--az-brown);
	white-space: nowrap;
}

.az-pricing__terms {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.az-pricing__instalments {
	font-size: 24px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--az-brown);
}

.az-pricing__total {
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 1px;
	color: var(--az-brown);
}

.az-pricing__cta-col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	width: 330px;
	max-width: 100%;
}

.az-pricing__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 14px 28px;
	border-radius: 1000px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.az-pricing__cta:hover,
.az-pricing__cta:focus-visible {
	filter: brightness(1.06);
	transform: translateY(-1px);
	color: #FFFFFF;
}

.az-pricing__fineprint {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.16px;
	color: #8C8578;
	white-space: nowrap;
}

/* ------------------------------------------------
   THE SUMMARY LIST
   ------------------------------------------------ */
.az-pricing__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 50px;
	width: 308px;
	max-width: 100%;
	text-align: right;
}

.az-pricing__list-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #E8BF5A;
	width: 100%;
}

.az-pricing__lines {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

/* Label first, struck price last — under RTL that puts the label at the right and the price
   at the left, as the design has them. */
.az-pricing__line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: rgba(245, 242, 234, 0.75);
}

.az-pricing__line-price {
	flex-shrink: 0;
	line-height: 1.2;
	text-decoration: line-through;
	text-decoration-skip-ink: none;
	color: #9A8E7E;
	white-space: nowrap;
}

/* The hairline between the two lines (570:653) — a 1px rule, drawn in CSS rather than shipped
   as the design's one-pixel SVG. */
.az-pricing__divider {
	width: 100%;
	height: 1px;
	background-color: #E8BF5A;
	border: 0;
	margin: 0;
}

.az-pricing__free {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	padding: 4px 12px;
	background-color: rgba(221, 168, 51, 0.15);
	border: 1px solid rgba(221, 168, 51, 0.3);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: #E8BF5A;
	white-space: nowrap;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 1024px) {
	.az-pricing {
		padding: 72px 32px;
		gap: 56px;
	}

	.az-pricing__shell {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding: 24px;
		border-radius: 32px;
	}

	/* Card first in source means it stays first once stacked — the offer is the point of the
	   section and the summary list is supporting detail. */
	.az-pricing__card,
	.az-pricing__list {
		width: 100%;
		min-height: 0;
	}

	.az-pricing__list {
		gap: 28px;
	}
}

@media (max-width: 640px) {
	.az-pricing {
		padding: 56px 20px;
	}

	.az-pricing__card {
		padding: 28px 20px;
		gap: 28px;
	}

	.az-pricing__cta-col {
		width: 100%;
		align-items: stretch;
	}

	.az-pricing__cta {
		width: 100%;
	}

	.az-pricing__fineprint {
		white-space: normal;
		text-align: center;
	}

	.az-pricing__bonus {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* See the !important note in amotz-announcement-bar.css. */
	.az-pricing__title {
		font-size: clamp(26px, 6.5vw, 34px) !important;
		letter-spacing: 0 !important;
	}

	.az-pricing__card-title {
		font-size: clamp(20px, 5.5vw, 26px) !important;
	}

	.az-pricing__instalments,
	.az-pricing__total {
		font-size: 19px !important;
	}
}