/* ================================================
   AMOTZ — THANK YOU / ORDER RECEIVED  (Figma 778:2)
   ================================================
   Five bands, 1440x3713 total:
     hero      721 · #161411
     video     890 · #FCFCF7
     steps     629 · #FCFCF7
     whatsapp  429 · #EDF7EE
     closing   444 · #F8F4E9

   This page uses a LIGHTER palette than the rest of the site — cream and near-black rather than
   the gold-on-black of the sales pages. That is deliberate in the design: the selling is over, and
   the page is meant to feel calm rather than urgent. Its colours are therefore written out here
   rather than pulled from the shared tokens, which are tuned for the dark sales pages.
   ================================================ */

/* ------------------------------------------------
   1 · HERO
   ------------------------------------------------ */
.azt-hero {
	display: flex;
	justify-content: center;
	padding: 28px var(--az-edge) 112px;
	background-color: #161411;
}

.azt-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	width: 100%;
	max-width: 900px;
	padding-top: 76px;
	text-align: center;
}

/* 94px gold disc with a 6px tick. The stroke weight is unusually heavy — that is what the file
   says, and at 94px it reads as confident rather than clumsy. */
.azt-hero__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 94px;
	height: 94px;
	border-radius: 50%;
	background-color: #D9A64A;
}

.azt-hero__badge svg { width: 40px; height: 31px; }

.azt-hero__eyebrow {
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	color: #D9A64A;
}

.azt-hero__title {
	margin: 0;
	font-size: 52px;
	font-weight: 900;
	line-height: 70px;
	color: #FCFCF7;
}

.azt-hero__lead {
	margin: 0;
	max-width: 900px;
	font-size: 19px;
	font-weight: 500;
	line-height: 26px;
	color: rgba(229, 227, 219, 0.82);
}

.azt-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	margin-top: 6px;
	padding: 14px 28px;
	border-radius: 1000px;
	background-image: var(--az-gradient-gold);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.azt-hero__cta-icon { display: flex; width: 15px; height: 15px; }
.azt-hero__cta-icon svg { width: 15px; height: 15px; }

.azt-hero__fine {
	font-size: 14px;
	font-weight: 500;
	line-height: 19px;
	color: rgba(229, 227, 219, 0.55);
}

/* ------------------------------------------------
   2 · WELCOME VIDEO
   ------------------------------------------------ */
.azt-video {
	display: flex;
	justify-content: center;
	padding: 92px var(--az-edge);
	background-color: #FCFCF7;
}

.azt-video__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	text-align: center;
}

.azt-video__eyebrow { font-size: 15px; font-weight: 600; line-height: 23px; color: #B88029; }

.azt-video__title {
	margin: 0;
	font-size: 34px;
	font-weight: 900;
	line-height: 51px;
	color: #1B1916;
}

.azt-video__body {
	margin: 0;
	max-width: 660px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	color: #524D42;
}

/* 920x518 at r24. `aspect-ratio` rather than a fixed height so the frame keeps its proportion
   when the column narrows — a letterboxed still would read as a broken image. */
.azt-video__frame {
	position: relative;
	display: block;
	width: 100%;
	max-width: 920px;
	margin: 0;
	aspect-ratio: 920 / 518;
	overflow: hidden;
	border-radius: 24px;
}

.az-section .azt-video__still {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.azt-video__scrim {
	position: absolute;
	inset: 0;
	background-color: rgba(27, 25, 22, 0.28);
	pointer-events: none;
}

.azt-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(252, 252, 247, 0.95);
	pointer-events: none;
}

/* Optically centred: a triangle's visual centre sits left of its bounding box. */
.azt-video__play svg { width: 26px; height: 30px; margin-left: 5px; }

/* No video yet — the frame is a <figure>, so nothing here should suggest it can be clicked. */
.azt-video__frame--placeholder { cursor: default; }

/* ------------------------------------------------
   3 · NEXT STEPS
   ------------------------------------------------ */
.azt-steps {
	display: flex;
	justify-content: center;
	padding: 96px var(--az-edge) 88px;
	background-color: #FCFCF7;
}

.azt-steps__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 44px;
	width: 100%;
	max-width: 1200px;
}

.azt-steps__title {
	margin: 0;
	font-size: 34px;
	font-weight: 900;
	line-height: 51px;
	color: #1B1916;
	text-align: center;
}

.azt-steps__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	width: 100%;
}

/* `cross:MAX` on an RTL canvas = flex-start here, which is the right edge. See amotz.css. */
.azt-steps__step {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	text-align: right;
}

.azt-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: #D9A64A;
	font-size: 20px;
	font-weight: 900;
	line-height: 30px;
	color: #1B1916;
}

.azt-steps__steptitle {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 32px;
	color: #1B1916;
}

.azt-steps__stepbody {
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 23px;
	color: #524D42;
}

/* ---- the order summary card ---- */
.azt-steps__order {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 760px;
	padding: 32px 40px;
	border: 1.5px solid #E0D9C7;
	border-radius: 20px;
	background-color: #F7F6F1;
}

.azt-steps__olabel { font-size: 13px; font-weight: 600; line-height: 20px; color: #B88029; }

.azt-steps__orow {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.azt-steps__oname {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 29px;
	color: #1B1916;
}

/* The total is the one number a buyer checks, so it does not shrink. */
.azt-steps__oprice {
	flex: 0 0 auto;
	font-size: 22px;
	font-weight: 900;
	line-height: 33px;
	color: #B88029;
}

.azt-steps__onote {
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	color: rgba(82, 77, 66, 0.75);
}

/* ------------------------------------------------
   4 · WHATSAPP
   ------------------------------------------------
   #25D366 is WhatsApp's own green and is the one colour on this site that is NOT ours. It is
   correct here: a green pill is what people recognise as "this opens WhatsApp". */
.azt-wa {
	display: flex;
	justify-content: center;
	padding: 80px var(--az-edge);
	background-color: #EDF7EE;
}

.azt-wa__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1200px;
	text-align: center;
}

.azt-wa__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background-color: #25D366;
}

.azt-wa__badge svg { width: 28px; height: 28px; }

.azt-wa__title {
	margin: 0;
	font-size: 30px;
	font-weight: 900;
	line-height: 45px;
	color: #1B1916;
}

.azt-wa__body {
	margin: 0;
	max-width: 660px;
	font-size: 18px;
	font-weight: 500;
	line-height: 27px;
	color: #4D4D47;
}

.azt-wa__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 58px;
	padding: 16px 34px;
	border-radius: 40px;
	background-color: #25D366;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	color: #FCFCF7;
	text-decoration: none;
}

/* ------------------------------------------------
   5 · CLOSING
   ------------------------------------------------ */
.azt-close {
	display: flex;
	justify-content: center;
	padding: 84px var(--az-edge) 96px;
	background-color: #F8F4E9;
}

.azt-close__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 1200px;
	text-align: center;
}

.az-section .azt-close__portrait {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}

.azt-close__line {
	margin: 0;
	max-width: 720px;
	font-size: 20px;
	font-weight: 500;
	line-height: 30px;
	color: #4D473D;
}

.azt-close__title {
	margin: 0;
	font-size: 40px;
	font-weight: 900;
	line-height: 60px;
	color: #1B1916;
}

.azt-close__name { font-size: 16px; font-weight: 600; line-height: 24px; color: #B88029; }

/* ------------------------------------------------
   RESPONSIVE
   ------------------------------------------------ */
@media (max-width: 900px) {
	.azt-steps__row { grid-template-columns: 1fr; gap: 32px; }
	.azt-steps__order { padding: 28px 24px; }
	.azt-steps__orow { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 700px) {
	.azt-hero { padding: 20px 20px 72px; }
	.azt-hero__inner { padding-top: 48px; gap: 18px; }
	.azt-hero__badge { width: 72px; height: 72px; }
	.azt-hero__badge svg { width: 30px; height: 24px; }
	.azt-hero__title { font-size: 32px; line-height: 1.2; }
	.azt-hero__lead { font-size: 17px; line-height: 25px; }

	.azt-video,
	.azt-steps,
	.azt-wa,
	.azt-close { padding-left: 20px; padding-right: 20px; }

	.azt-video { padding-top: 64px; padding-bottom: 64px; }
	.azt-video__title,
	.azt-steps__title { font-size: 26px; line-height: 1.3; }
	.azt-video__play { width: 64px; height: 64px; }
	.azt-video__play svg { width: 20px; height: 23px; }

	.azt-wa__title { font-size: 24px; line-height: 1.3; }
	.azt-close__title { font-size: 28px; line-height: 1.25; }
}

/* ------------------------------------------------
   ELEMENTOR VIDEO INSIDE THE WELCOME FRAME
   ------------------------------------------------
   Same arrangement as the course pages: the player is Elementor's Video widget, the frame, its r24
   corners, the scrim and the 86px play badge stay ours. The old markup opened Elementor's lightbox,
   which depends on a site-wide setting — with it off, the button did nothing.

   This frame is already 16:9, so unlike the hero's square frame the player needs no cover trick. */
.azt-video__frame--player {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #1B1916;
}

.az-section .azt-video__player {
	position: absolute;
	inset: 0;
	z-index: 0;
	line-height: 0;
}

.az-section .azt-video__player .elementor-widget-video,
.az-section .azt-video__player .elementor-widget-container,
.az-section .azt-video__player .elementor-wrapper {
	height: 100%;
	margin: 0;
	padding: 0 !important;
}

.az-section .azt-video__player .elementor-wrapper iframe,
.az-section .azt-video__player .elementor-wrapper video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Elementor's overlay is the click target, stretched over the frame so a click anywhere plays.
   Its own <img> must cover, or the still sits at its natural ratio and the frame shows around it —
   the fault that took several passes on the course pages. */
.az-section .azt-video__frame--player .elementor-custom-embed-image-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
	cursor: pointer;
}

.az-section .azt-video__frame--player .elementor-custom-embed-image-overlay img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.az-section .azt-video__frame--player .elementor-custom-embed-play {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	opacity: 1 !important;
	background: transparent !important;
}

/* Elementor's own play ring is hidden; the design's 86px badge is the only mark, and it is inert so
   the click passes through. */
.az-section .azt-video__frame--player .elementor-custom-embed-play i,
.az-section .azt-video__frame--player .elementor-custom-embed-play svg {
	display: none !important;
}

.azt-video__frame--player .azt-video__scrim { z-index: 2; }
.azt-video__frame--player .azt-video__play  { z-index: 3; pointer-events: none; }