/* ================================================
   AMOTZ — BENEFITS GRID  (Figma 566:9891)
   ================================================
   band      1440x835 · #EDE9DF · padding 100/60/80 · gap 32
   column    1184px · gap 80 between headline and grid
   headline  Polin Bold 54/1.2 · tracking -1.8 · #152114 · centred
   grid      2 rows x 3 cards · 384px each · 16px gaps · 206px tall
   card      #F6F4EE · radius 16 · padding 24 · gap 20
   badge     40x40 · #472D00 · radius 12 · Polin Black 18/28 · #EBC55B
   title     Polin Semibold 20/1.2 · #15130F
   body      Polin Medium 14/1.4 · #4A4540
   pill      156x50 · rgba(221,168,51,.18) on 1px #815F0C · Polin Semibold 14 · tracking .88
   ================================================ */

.az-benefits {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 100px var(--az-edge) 80px;
	overflow: hidden; /* clips the decoration layer at the band edges, as the design does */
	background-color: #EDE9DF;
}

/* ------------------------------------------------
   THE DECORATION  (566:9894)
   ------------------------------------------------
   Thirteen tan circles and two long arcs, scattered behind the grid.

   THIS IS ONE FLATTENED IMAGE, NOT THIRTEEN ELEMENTS, and that is a deliberate trade.

   In Figma each piece is absolutely positioned by percentage inside a rotated group, then
   sized with `hypot(Xcqw, Ycqh)` container-query expressions and rotated 80.59deg. Rebuilding
   that faithfully means deriving roughly forty numbers from percentages of a container whose
   own size is itself expressed as percentages of its parent — and the group's reported origin
   is a rotated bounding box, so it cannot even be read off directly. The result would be a
   wall of magic numbers that nobody could safely change.

   The whole layer is decorative and unchanging, so it ships as a single 18 KB WebP with an
   alpha channel instead. If the design's decoration changes, re-export node 566:9894 with
   `contentsOnly` and drop the file in — no arithmetic.

   PLACEMENT IS MEASURED, NOT ASSUMED: the exported layer and a render of the whole band were
   compared column by column, and the layer's first opaque row matches the band's first
   non-background row at top: 0, left: 0 (within one pixel of antialiasing). */
.az-benefits__deco {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 0;
	/* Fixed at the design's own dimensions and centred, rather than stretched to the viewport.
	   The shapes are circles — scaling the layer to a wider band would turn them into ellipses,
	   which is more wrong than letting the composition sit centred in its designed width. */
	width: 1440px;
	height: 801px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 1440px 801px;
	pointer-events: none;
}

.az-benefits__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
	width: 100%;
	max-width: 1184px; /* the design's content column */
}

.az-benefits__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: #152114;
	text-align: center;
}

/* ------------------------------------------------
   THE GRID
   ------------------------------------------------
   Two flex rows in the design; a 3-column grid here.

   Grid rather than flex because the cards are a fixed 384px in a 1184px column
   (3 x 384 + 2 x 16 = 1184 exactly), and `1fr` reproduces that while also letting the whole
   thing reflow to 2 and then 1 column without a second set of row wrappers.

   THE CARD ORDER IS 1..6 IN SOURCE and that is already correct. In the Figma tree the first
   row reads 3, 2, 1 left-to-right — which, on an LTR canvas, means card 1 is the RIGHTMOST.
   Under dir="rtl" the grid fills right-to-left, so writing them 1, 2, 3 puts card 1 on the
   right where the design has it. This is one of the rare cases where the design's own reading
   order and the markup order agree and nothing needs reversing. */
.az-benefits__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	width: 100%;
}

.az-benefits__card {
	display: flex;
	flex-direction: column;
	/* The badge sits at the card's top-RIGHT. The design says `items-end`, which is the right
	   edge on Figma's LTR canvas; under dir="rtl" flex-END is the LEFT, so this must be
	   flex-start. Same inversion as the hero card. */
	align-items: flex-start;
	gap: 20px;
	min-height: 206px;
	padding: 24px;
	background-color: var(--az-cream);
	/* The design's border is rgba(246,244,238,0.1) — a 10% wash of the card's OWN background
	   colour, which is invisible against it. Carried as written rather than "corrected" to
	   something visible: it is almost certainly a leftover, and inventing a border here would
	   be a visible change to the design, not a fix. It still contributes its 1px to the box. */
	border: 1px solid rgba(246, 244, 238, 0.1);
	border-radius: 16px;
}

.az-benefits__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background-color: var(--az-brown);
	border-radius: 12px;
	font-size: 18px;
	font-weight: 900; /* Polin Black */
	line-height: 28px;
	color: var(--az-yellow);
}

.az-benefits__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: right;
}

.az-benefits__card-title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	color: #15130F;
}

.az-benefits__card-body {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: #4A4540;
}

/* ------------------------------------------------
   PILL  (566:9982)
   ------------------------------------------------ */
.az-benefits__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 156px;
	height: 50px;
	padding: 6px 12px;
	background-color: rgba(221, 168, 51, 0.18);
	border: 1px solid #815F0C;
	border-radius: 1000px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.88px;
	color: #815F0C;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.az-benefits__pill:hover,
.az-benefits__pill:focus-visible {
	background-color: rgba(221, 168, 51, 0.32);
	color: #815F0C;
}

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------
   1184px of grid inside 60px gutters needs 1304px. Below that the columns shrink until the
   14px body copy starts breaking badly, then the grid steps down to 2 and finally 1 column.

   Inferred, not transcribed — the design file has no tablet or phone frame. */
@media (max-width: 1024px) {
	.az-benefits {
		padding: 72px 32px 56px;
		gap: 28px;
	}

	.az-benefits__inner {
		gap: 48px;
	}

	.az-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

	.az-benefits__grid {
		grid-template-columns: 1fr;
	}

	.az-benefits__card {
		min-height: 0; /* a 206px floor leaves dead space once a card is full width */
	}

	/* The decoration is composed for a 1440px band. On a phone the visible slice is the middle
	   third — a couple of part-circles and no arc — which reads as smudges rather than as
	   pattern. Hidden rather than scaled, since scaling would distort the circles. */
	.az-benefits__deco {
		display: none;
	}

	/* See the !important note in amotz-announcement-bar.css — Elementor bakes this widget's
	   typography defaults into the page stylesheet at (0,3,0) with no media query. */
	.az-benefits__title {
		font-size: clamp(28px, 7vw, 38px) !important;
		letter-spacing: -0.03em !important;
	}
}