/* ==========================================================================
   Andy's Junior party builder with its steps, review and final screen.

   Numbers here are measured out of the 1440px designs - sizes and widths from
   `Step 1.pdf`, positions and colours off the `Frame 155` / `Step 4` exports.
   Coordinates below are relative to the top of the section:

     card             x 280 - 1160 (880 wide), y 64, padding 24, radius 24
     label            16px/24 at y 88, #eb5a37, body face
     h1               32px/40 at y 112, Futura New Demi, no gap under the label
     step block       832 wide, radius 24, #efeae5, 8px apart
       head           88 tall, padding 24, circle 40, title 20px Futura Demi
       divider        1px #f7f4f1
       body           padding 23/24/24
       option row     388 x 48, radius 12, #f7f4f1, text 16px at x+16
       price          14px #7a7677, 16 from the circle
       radio          20px across in total, 1.5px ring #e8e0d8 inside it,
                      dot 10px, 16 from the row's right edge
       picked row     2px #eb5a37 inside the row, ring and dot the same red
       child / group  18px/24 label in the body face, 24 above and below
       next button    784 x 48, pill

   The pending steps and both idle buttons are the same #eb5a37 / #efeae5 at
   50% opacity, which is why they are done with `opacity` and not a tint.

   Watch out for common.css handing every *__title class to Futura - the two
   18px labels here are set in the body face and say so explicitly.
   ========================================================================== */

/* Inter stands in for the design's Cera Round and sets ~3.9% wider, which on
   mobile costs a whole word per line. -0.02em brings it back to within half a
   percent; Futura measures right as it is and opts out below. */
.aj-wiz {
	position: relative;
	overflow: hidden;
	padding-block: 64px;
	letter-spacing: -0.02em;
	background: linear-gradient(360deg, #f7f4f1 0%, #dcd2c8 100%);
}

.aj-wiz__title,
.aj-wstep__num,
.aj-wstep__name,
.aj-wpack__name,
.aj-wpack__price,
.aj-rev__sum,
.aj-rev__notice b,
.aj-fin__title {
	letter-spacing: normal;
}

/* The same stars at the same opacity as the hero */
.aj-wiz__sparkles {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .2;
	background-image: url("../img/stars.png");
	background-repeat: repeat;
	background-position: top center;
	background-size: auto;
}

.aj-wiz__card {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	padding: 24px;
	background: var(--aj-white);
	border-radius: 24px;
}

.aj-wiz__label {
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	color: var(--aj-red);
}

/* No gap under the label: the design puts the 40px line box straight at 112 */
.aj-wiz__title {
	margin-top: 0;
	margin-bottom: 24px;
	font-family: var(--aj-font-title);
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	color: var(--aj-ink);
}

/* Hidden CF7 form, the builder fills it in and submits it */
.aj-wiz__cf7 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ============================================================= Step ===== */

.aj-wstep {
	border-radius: 24px;
	background: var(--aj-sand);
	transition: opacity .2s;
}

/* A step nobody has reached yet sits at half strength, block and all */
.aj-wstep:not(.is-active):not(.is-done) {
	opacity: .5;
}

.aj-wstep + .aj-wstep {
	margin-top: 8px;
}

.aj-wstep__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px;
}

/* The rule under the head, only while the step is open */
.aj-wstep.is-active .aj-wstep__head {
	border-bottom: 1px solid var(--aj-cream);
}

.aj-wstep__num {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var(--aj-font-title);
	font-size: 20px;
	line-height: 1;
	font-weight: 600;
	color: var(--aj-white);
	background: var(--aj-red);
	border-radius: 50%;
}

/* A finished step shows the tick instead of its number */
.aj-wstep__digit {
	font-style: normal;
}

.aj-wstep__tick {
	display: none;
}

.aj-wstep.is-done:not(.is-active) .aj-wstep__digit {
	display: none;
}

.aj-wstep.is-done:not(.is-active) .aj-wstep__tick {
	display: block;
}

/* 24 + 16 fills the circle's 40px exactly, so a finished step keeps its 88 */
.aj-wstep__ttl {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.aj-wstep__name {
	font-family: var(--aj-font-title);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: var(--aj-ink);
}

.aj-wstep__sum {
	font-size: 14px;
	line-height: 16px;
	color: var(--aj-ink-soft);
	overflow-wrap: anywhere;
}

.aj-wstep.is-active .aj-wstep__sum,
.aj-wstep__sum:empty {
	display: none;
}

.aj-wstep__edit {
	flex: 0 0 auto;
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--aj-ink);
	background: var(--aj-white);
	border-radius: 50%;
	transition: color .2s, background-color .2s;
}

.aj-wstep.is-done:not(.is-active) .aj-wstep__edit {
	display: flex;
}

.aj-wstep__edit:hover {
	color: var(--aj-white);
	background: var(--aj-red);
}

.aj-wstep__body {
	display: none;
	padding: 23px 24px 24px;
}

.aj-wstep.is-active .aj-wstep__body {
	display: block;
}

/* ========================================================= Options ====== */

.aj-wopts {
	display: grid;
	gap: 8px;
}

.aj-wopts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aj-wopts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aj-wopt__input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.aj-wopt__label {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	height: 100%;
	padding: 0 16px;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
	background: var(--aj-cream);
	border-radius: 12px;
	transition: background-color .2s, box-shadow .2s;
}

.aj-wopt__label:hover {
	background: var(--aj-white);
}

.aj-wopt__input:checked + .aj-wopt__label {
	box-shadow: inset 0 0 0 2px var(--aj-red);
}

.aj-wopt__input:focus-visible + .aj-wopt__label {
	outline: 2px solid var(--aj-red);
	outline-offset: 2px;
}

.aj-wopt__ico {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--aj-red);
}

.aj-wopt__text {
	flex: 1;
	min-width: 0;
}

.aj-wopt__price {
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--aj-ink-soft);
}

/* 20px across in total, with the 1.5px ring inside it. The extra margin puts
   16px between the price and the circle, 8 of them from the gap. */
.aj-wopt__radio,
.aj-wopt__check {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	background: var(--aj-white);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	transition: box-shadow .2s;
}

/* Step 4 picks several services at once, so it gets a rounded square instead
   of the circle, with a paler ring, filled solid the moment it is ticked.
   Radius 8 is the closest fit to the corner profile measured off the design. */
.aj-wopt__check {
	border-radius: 8px;
	box-shadow: inset 0 0 0 1.5px var(--aj-beige);
}

/* Matched on the tag, not on .aj-wopt__label: a package row labels itself
   .aj-wpack__head and would otherwise never light its circle up. */
.aj-wopt__input:checked + label .aj-wopt__radio {
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

.aj-wopt__input:checked + label .aj-wopt__check {
	background: var(--aj-red);
	box-shadow: none;
}

/* Both marks are centred by the flex parent, never by offsets, so they stay
   put when the card lands on a half pixel. */
.aj-wopt__input:checked + label .aj-wopt__radio::after {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--aj-red);
	border-radius: 50%;
}

/* A tick is heavier below its own box centre, hence the lift */
.aj-wopt__input:checked + label .aj-wopt__check::after {
	content: "";
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--aj-white);
	border-bottom: 2px solid var(--aj-white);
	transform: translate(-.5px, -1px) rotate(-45deg);
}

/* The service already comes with the chosen package, so it cannot be picked */
.aj-wopt.is-locked .aj-wopt__label {
	cursor: default;
	opacity: .45;
	box-shadow: none;
}

.aj-wopt.is-locked .aj-wopt__label:hover {
	background: var(--aj-cream);
}

/* ---------------------------------------------------- Format details --- */

.aj-wchild {
	margin-top: 24px;
}

/* «Выберите Мастер-класс» - 18px, 24 above it and 24 down to the first row.
   The family is spelled out because common.css hands every *__title class to
   Futura, and this label is set in the body face. */
.aj-wchild__title {
	display: block;
	margin-bottom: 24px;
	font-family: var(--aj-font-text);
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: var(--aj-ink);
}

.aj-wchild__text {
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 24px;
	color: var(--aj-ink-soft);
}

/* ========================================== Fields and counters ========= */

.aj-wfields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.aj-wfields--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aj-wfield {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aj-wfield--full {
	margin-top: 24px;
}

.aj-wfield__label {
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: var(--aj-ink);
}

.aj-wfield__label i {
	font-style: normal;
	color: var(--aj-red);
}

/* Same fill and ring the design gives the comment box on step 4 */
.aj-winput,
.aj-wtextarea {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	font: inherit;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	background: var(--aj-cream);
	border: 0;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	transition: box-shadow .2s;
}

.aj-winput::placeholder,
.aj-wtextarea::placeholder {
	color: #a09c9c;
}

.aj-wtextarea {
	height: auto;
	padding: 12px 16px;
	resize: vertical;
	min-height: 100px;
}

/* The browser's own date picker button is hidden, ours sits on top of it */
.aj-wdate {
	position: relative;
	display: block;
}

.aj-wdate__ico {
	position: absolute;
	top: 50%;
	right: 16px;
	display: flex;
	color: var(--aj-ink);
	transform: translateY(-50%);
	pointer-events: none;
}

.aj-wdate__input {
	padding-right: 48px;
}

.aj-wdate__input::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	color: transparent;
	background: transparent;
	cursor: pointer;
}

.aj-winput:focus,
.aj-wtextarea:focus {
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

.aj-winput.has-error,
.aj-wtextarea.has-error,
.has-error + .aj-wconsent__box {
	box-shadow: inset 0 0 0 1.5px var(--aj-red), 0 0 0 3px rgba(235, 90, 55, .16);
}

.aj-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	height: 48px;
	padding: 0 8px;
	background: var(--aj-cream);
	border-radius: 12px;
}

.aj-stepper__btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--aj-ink);
	border-radius: 8px;
	transition: color .2s, background-color .2s, opacity .2s;
}

.aj-stepper__btn:hover:not(:disabled) {
	color: var(--aj-white);
	background: var(--aj-red);
}

/* Minus is dimmed while the counter sits at its minimum */
.aj-stepper__btn:disabled {
	opacity: .35;
	cursor: default;
}

.aj-stepper__val {
	flex: 1;
	min-width: 0;
	padding: 0;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	color: var(--aj-ink);
	background: none;
	border: 0;
	-moz-appearance: textfield;
}

.aj-stepper__val::-webkit-outer-spin-button,
.aj-stepper__val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Measured off `Phone Inputs.png`: 48 tall, the country segment 122 wide and
   cut off by a 1.5px rule, the number starting 16 past it. */
.aj-wphone {
	display: flex;
	align-items: stretch;
	height: 48px;
	background: var(--aj-cream);
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	border-radius: 12px;
}

.aj-wphone__country {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	border-right: 1.5px solid var(--aj-sand-line);
}

.aj-wphone__flag {
	flex: 0 0 auto;
}

.aj-wphone__code {
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	white-space: nowrap;
}

/* The caret is drawn pointing up, here it has to point down */
.aj-wphone__caret {
	flex: 0 0 auto;
	color: var(--aj-ink);
	transform: rotate(180deg);
}

.aj-wphone__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	background: none;
	box-shadow: none;
}

.aj-wphone__input:focus {
	box-shadow: none;
}

.aj-wphone:focus-within {
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

/* ========================================== Step 3 modes and packages === */

/* No margin below: the 24 down to whatever follows comes from .aj-wchild or
   from the next button, and an inline-flex button never collapses margins. */
.aj-wmodes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.aj-wmode__label {
	font-size: 14px;
}

.aj-wmode__ico {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--aj-red);
}

.aj-wpacks {
	display: grid;
	gap: 8px;
}

/* Measured off `Package Card - Expanded.png`, a 1:1 crop of one 784px card:
   head 56 tall, the white sheet inset 16 and 32 clear of the bottom, its
   rows 36 apart with no rules between them. */
.aj-wpack {
	background: var(--aj-cream);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1.5px transparent;
	transition: box-shadow .2s;
}

/* Same 2px the picked option row gets. Browsers without :has() still show the
   circle filled in, so the choice stays readable. */
.aj-wpack:has(.aj-wopt__input:checked) {
	box-shadow: inset 0 0 0 2px var(--aj-red);
}

.aj-wpack__head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 0 16px;
	cursor: pointer;
}

.aj-wpack__ico {
	display: inline-flex;
	color: var(--aj-red);
}

.aj-wpack__name {
	font-family: var(--aj-font-title);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
}

.aj-wpack__badge {
	padding: 4px 12px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 500;
	color: var(--aj-red);
	background: #fbe3db;
	border-radius: 100px;
	white-space: nowrap;
}

.aj-wpack__price {
	margin-left: auto;
	font-family: var(--aj-font-title);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: var(--aj-ink-soft);
	white-space: nowrap;
}

/* The white sheet the details live on */
.aj-wpack__more {
	overflow: hidden;
	margin: 0 16px 32px;
	background: var(--aj-white);
	border-radius: 12px;
}

.aj-wpack__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
}

/* The caret is drawn pointing up, so it is the closed state that flips */
.aj-wpack__chev {
	flex: 0 0 auto;
	transform: rotate(180deg);
	transition: transform .25s;
}

.aj-wpack__more .is-open .aj-wpack__chev {
	transform: rotate(0);
}

.aj-wpack__rows {
	padding: 0 16px;
}

/* 24 of line plus 6 either side puts the rows 36 apart, as in the design */
.aj-wpack__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 14px;
	line-height: 24px;
}

.aj-wpack__row dt {
	color: var(--aj-ink-soft);
}

.aj-wpack__row dd {
	margin: 0;
	font-weight: 400;
	text-align: right;
}

/* ===================================================== Step 4 hint ====== */

.aj-wnote {
	margin-bottom: 24px;
	padding: 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	background: var(--aj-cream);
	border-radius: 12px;
}

.aj-wnote:empty {
	display: none;
}

.aj-wgroup + .aj-wgroup {
	margin-top: 24px;
}

/* «Ресторан», «Игровые зоны» - same 18px label as the format's child block */
.aj-wgroup__title {
	display: block;
	margin-bottom: 24px;
	font-family: var(--aj-font-text);
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	color: var(--aj-ink);
}

.aj-winfo {
	padding: 16px;
	background: var(--aj-cream);
	border-radius: 12px;
}

.aj-winfo__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--aj-font-text);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
}

.aj-winfo__title svg {
	color: var(--aj-red);
}

.aj-winfo__text {
	margin-top: 4px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink-soft);
}

/* ================================================== Consent and submit == */

.aj-wconsent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	font-size: 14px;
	line-height: 20px;
	color: var(--aj-ink-soft);
	cursor: pointer;
}

.aj-wconsent input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.aj-wconsent__box {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: var(--aj-white);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1.5px var(--aj-sand-line);
	transition: box-shadow .2s;
}

.aj-wconsent input:checked + .aj-wconsent__box {
	box-shadow: inset 0 0 0 1.5px var(--aj-red);
}

.aj-wconsent input:checked + .aj-wconsent__box::after {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--aj-red);
	border-bottom: 2px solid var(--aj-red);
	transform: translate(-.5px, -2px) rotate(-45deg);
}

.aj-wconsent__text a {
	color: var(--aj-red);
	text-decoration: underline;
}

/* 784 x 48 in the design, so the full body width and a pill */
.aj-wnext {
	width: 100%;
	height: 48px;
	margin-top: 24px;
	padding-block: 0;
}

/* Every next button idles at the 50% the design shows, until builder.js sees
   the step's required fields filled in */
.aj-wnext:disabled {
	opacity: .5;
	cursor: default;
}

.aj-wnext:disabled:hover {
	background: var(--aj-red);
	transform: none;
}

.aj-wstub--admin {
	max-width: 880px;
	margin: 16px auto 0;
	color: var(--aj-red);
	border-color: rgba(235, 90, 55, .4);
}

/* ========================================================= Review ======= */

/* Measured off `Steps.png` (880 wide, the card at 1:1): every row 40 tall on
   #f7f4f1, the group strips a shade darker, and a white hairline between the
   rows instead of a beige one. */
.aj-rev__box {
	overflow: hidden;
	border-radius: 24px;
	background: var(--aj-cream);
}

.aj-rev__group {
	padding: 8px 24px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	background: var(--aj-sand);
}

/* The reset in common.css leaves dl alone, and its default margin would push
   the first row of every group down by a line */
.aj-rev__rows {
	margin: 0;
}

.aj-rev__rows:empty {
	display: none;
}

.aj-rev__row {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 8px 24px;
	font-size: 16px;
	line-height: 24px;
	border-bottom: 1px solid var(--aj-white);
}

.aj-rev__row:last-child {
	border-bottom: 0;
}

/* 251 plus the gap puts the calculation column at x 315, as in the design */
.aj-rev__row dt {
	flex: 0 0 auto;
	min-width: 251px;
	color: var(--aj-ink-soft);
}

.aj-rev__row dd {
	margin: 0 0 0 auto;
	font-weight: 400;
	color: var(--aj-ink);
	text-align: right;
}

/* Two-part values run on one line here; the mobile block drops the tail to
   its own line and hides the separator. */
.aj-rev__sep {
	font-style: normal;
}

/* A service row reads the same as any other: the name and the calculation
   muted, only the amount on the right in full ink. */
.aj-rev__note {
	flex: 1;
	font-size: 16px;
	color: var(--aj-ink-soft);
}

.aj-rev__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px;
	background: var(--aj-sand);
}

/* 24 of title plus 20 of note fill the block's 92 exactly */
.aj-rev__total-copy {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.aj-rev__total-copy b {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--aj-ink);
}

.aj-rev__total-copy small {
	font-size: 12px;
	line-height: 20px;
	color: var(--aj-ink-soft);
}

.aj-rev__sum {
	font-family: var(--aj-font-title);
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
	white-space: nowrap;
}

/* Three 24px lines of copy fill the block's 108 with 18 either side */
.aj-rev__notice {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 24px;
	padding: 18px 24px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	background: #fff8e2;
	border-radius: 24px;
}

/* The one place the design goes darker than the usual ink */
.aj-rev__notice b {
	display: block;
	font-family: var(--aj-font-title);
	font-size: 20px;
	line-height: 24px;
	font-weight: 600;
	color: #2a2729;
}

/* The mark is dark on the yellow puck, not white */
.aj-rev__notice-ico {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	color: var(--aj-ink);
	background: var(--aj-yellow);
	border-radius: 50%;
}

.aj-rev__actions {
	display: flex;
	gap: 8px;
	margin-top: 24px;
}

.aj-rev__actions .aj-btn {
	height: 48px;
	padding-block: 0;
}

/* ==================================================== Final screen ====== */

.aj-fin {
	text-align: center;
}

.aj-fin__media {
	overflow: hidden;
	border-radius: 24px;
	background: var(--aj-beige);
}

.aj-fin__img {
	width: 100%;
	aspect-ratio: 104 / 25;
	object-fit: cover;
}

.aj-fin__num {
	display: inline-block;
	margin-top: 32px;
	padding: 6px 12px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink);
	background: var(--aj-cream);
	border-radius: 100px;
}

.aj-fin__num b {
	font-weight: 400;
	color: var(--aj-red);
}

.aj-fin__title {
	margin-top: 20px;
	font-family: var(--aj-font-title);
	font-size: 32px;
	line-height: 40px;
	font-weight: 600;
}

/* The paragraph has to break on the same four lines as the design, whose
   longest measures 623px; 624 keeps "вы" down on the last line where Inter
   would otherwise pull it up. */
.aj-fin__text {
	margin: 12px auto 0;
	max-width: 624px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink-soft);
}

.aj-fin__note {
	margin-top: 24px;
	font-size: 16px;
	line-height: 24px;
	color: var(--aj-ink-soft);
}

.aj-fin__note a {
	color: var(--aj-red);
	text-decoration: underline;
}

.aj-fin__actions {
	display: flex;
	gap: 8px;
	margin-top: 32px;
}

.aj-fin__actions .aj-btn {
	height: 48px;
	padding-block: 0;
}

/* ======================================================= Responsive ===== */

@media (max-width: 1024px) {
	.aj-wiz {
		padding-block: 48px;
	}

	.aj-wiz__title,
	.aj-fin__title,
	.aj-rev__sum {
		font-size: 28px;
		line-height: 36px;
	}
}

@media (max-width: 860px) {
	.aj-wfields {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-wmodes {
		grid-template-columns: minmax(0, 1fr);
	}

	.aj-wopts--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------- 390 ---
   Mobile is its own layout, measured off the `step-N-mobile` exports (390
   wide). The card goes full bleed there, so the section gradient never shows
   and the steps sit on plain white with a 12px gutter. */
@media (max-width: 640px) {
	.aj-wiz {
		padding-block: 0;
	}

	.aj-wiz > .aj-container {
		padding-inline: 0;
	}

	.aj-wiz__card {
		padding: 32px 12px;
		border-radius: 0;
	}

	.aj-wiz__label,
	.aj-wiz__title {
		text-align: center;
	}

	.aj-wiz__label {
		font-size: 14px;
		line-height: 20px;
	}

	/* The h1 keeps its desktop 32/40 here - only the label drops to 14 */
	.aj-wiz__title {
		margin-bottom: 18px;
	}

	.aj-fin__title,
	.aj-rev__sum {
		font-size: 24px;
		line-height: 32px;
	}

	.aj-wstep + .aj-wstep {
		margin-top: 20px;
	}

	.aj-wstep__head {
		gap: 16px;
		padding: 16px;
	}

	.aj-wstep__num,
	.aj-wstep__edit {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	/* The tick shrinks with the circle, otherwise it touches the edge */
	.aj-wstep.is-done:not(.is-active) .aj-wstep__num::before {
		width: 13px;
		height: 7px;
		transform: translate(0, -2.5px) rotate(-45deg);
	}

	.aj-wstep__body {
		padding: 15px 16px 16px;
	}

	/* Steps 1-4 are inset 16 on mobile, the contact step 24 - that is how the
	   `step-N-mobile` exports have it. */
	[data-wstep="5"] .aj-wstep__body {
		padding: 23px 24px 24px;
	}

	.aj-wopts--2,
	.aj-wopts--4,
	.aj-wfields--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Stacked, the 16px column gap would read as 44 between a field and the
	   next label; the design leaves 40. */
	.aj-wfields {
		gap: 12px;
	}

	/* One line with an ellipsis, the way the design cuts the date summary -
	   wrapping it would push a finished head past its 72. */
	.aj-wstep__sum {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* The card splits in two: name, badge and the circle on one line, price on
	   its own below. 16 + 24 + 8 + 24 + 16 is the 88 the design gives the head. */
	.aj-wpack__head {
		flex-wrap: wrap;
		min-height: 0;
		padding: 16px;
	}

	.aj-wpack__head .aj-wopt__radio {
		margin-left: auto;
	}

	.aj-wpack__badge {
		padding: 2px 12px;
	}

	.aj-wpack__price {
		order: 1;
		width: 100%;
		margin-left: 0;
	}

	.aj-wpack__more {
		margin-bottom: 16px;
	}

	/* The mode's icon moves to the top right corner and doubles in size, with
	   the title wrapping alongside it */
	.aj-winfo__title {
		align-items: flex-start;
	}

	.aj-winfo__title svg {
		order: 1;
		flex: 0 0 auto;
		width: 32px;
		height: 32px;
		margin-left: auto;
	}

	/* --- Review screen, measured off `price-mobile.png` --------------- */

	/* The export starts this card 8 higher than the other two */
	.aj-rev {
		padding-top: 24px;
	}

	.aj-rev__group {
		padding: 10px 16px;
	}

	/* 12 either side of a 24px line makes the 48 the design gives a row; a
	   value that needs two lines grows it to 72 on its own. */
	.aj-rev__row {
		gap: 12px;
		padding: 12px 16px 11px;
	}

	.aj-rev__row dt {
		min-width: 0;
	}

	/* Weekday with the day number on one line, month and year under it; the
	   phone number over its messenger the same way. */
	.aj-rev__sep {
		display: none;
	}

	.aj-rev__tail {
		display: block;
	}

	/* A service row stacks: name, then the calculation under it, with the
	   amount held in the middle of both. */
	.aj-rev__row--price {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		row-gap: 0;
		column-gap: 12px;
	}

	.aj-rev__row--price dt {
		grid-area: 1 / 1;
	}

	.aj-rev__row--price .aj-rev__note {
		grid-area: 2 / 1;
		font-size: 12px;
		line-height: 14px;
	}

	.aj-rev__row--price dd {
		grid-area: 1 / 2 / span 2;
	}

	.aj-rev__total {
		padding: 13px 16px;
	}

	.aj-rev__total-copy b {
		font-size: 14px;
	}

	.aj-rev__total-copy small {
		line-height: 18px;
	}

	.aj-rev__sum {
		font-size: 24px;
		line-height: 32px;
	}

	.aj-rev__notice {
		gap: 16px;
		margin-top: 16px;
		padding: 15px 16px;
		font-size: 13px;
		line-height: 18px;
	}

	/* At this size the design sets the heading in the body face, not Futura */
	.aj-rev__notice b {
		font-family: var(--aj-font-text);
		font-size: 14px;
		line-height: 24px;
	}

	.aj-rev__notice-ico {
		width: 36px;
		height: 36px;
	}

	.aj-rev__actions,
	.aj-fin__actions {
		flex-direction: column;
		margin-top: 16px;
		gap: 8px;
	}

	/* Stacked, `flex: 1` from .aj-btn--grow measures along the column and its
	   zero basis flattens the buttons, so hand the height back. */
	.aj-rev__actions .aj-btn,
	.aj-fin__actions .aj-btn {
		flex: 0 0 48px;
	}

	/* Send goes on top on mobile, back below it */
	[data-review-send] {
		order: -1;
	}

	/* --- Final screen, measured off `final-mobile.png` ---------------- */

	/* The one card the design insets by 16 rather than 12 */
	.aj-fin {
		padding-inline: 16px;
	}

	.aj-fin__media {
		border-radius: 20px;
	}

	/* 358 x 140 here, so the banner is cropped to the middle rather than
	   squashed down to the 40px its desktop ratio would leave. */
	.aj-fin__img {
		aspect-ratio: 179 / 70;
	}

	.aj-fin__num,
	.aj-fin__title,
	.aj-fin__note,
	.aj-fin__actions {
		margin-top: 24px;
	}

	.aj-fin__text {
		margin-top: 16px;
	}

	.aj-fin__note a {
		font-weight: 600;
		text-decoration: none;
	}

	/* The design swaps the fills here: making another party is the red one */
	.aj-fin__actions .aj-btn--yellow {
		color: var(--aj-white);
		background: var(--aj-red);
	}

	.aj-fin__actions .aj-btn--yellow:hover {
		background: var(--aj-red-dark);
	}

	.aj-fin__actions .aj-btn--red {
		color: var(--aj-ink);
		background: var(--aj-yellow);
	}

	.aj-fin__actions .aj-btn--red:hover {
		background: #f0c02c;
	}
}