/* ==========================================================================
   HERITAGE: The Consultation, the letter of introduction, correspondence
   from clients and the comparison. Builds on the tokens in heritage.css.
   ========================================================================== */

.button--light,
.button.button--light {
	background: var(--parchment);
	border-color: var(--parchment);
	color: var(--green-800);
}
.button--light:hover,
.button.button--light:hover {
	background: transparent;
	border-color: var(--parchment);
	color: var(--parchment);
}

/* Primary menu: the desktop bar has room for four labels beside the wordmark; the rest live in the drawer. */
@media (min-width: 1181px) {
	.primary-nav__list .menu-item--drawer { display: none; }
}

/* Consent line shared by the small forms. */
.consent {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 12px;
	align-items: start;
	margin: 20px 0 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	text-align: left;
}
.consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	border: 1px solid var(--stone-dark);
	background: rgba(255, 255, 255, .45);
	display: grid;
	place-content: center;
	cursor: pointer;
	transition: border-color .3s, background-color .3s;
}
.consent input[type="checkbox"]::before {
	content: "";
	width: 9px;
	height: 5px;
	border-left: 1.2px solid var(--parchment);
	border-bottom: 1.2px solid var(--parchment);
	transform: rotate(-45deg) translate(1px, -1px) scale(0);
	transition: transform .25s var(--ease);
}
.consent input[type="checkbox"]:checked { background: var(--green-800); border-color: var(--green-800); }
.consent input[type="checkbox"]:checked::before { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.consent input[type="checkbox"]:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }
.consent label { cursor: pointer; }
.consent a { border-bottom: 1px solid var(--brass); white-space: nowrap; }

.form-status { font-style: italic; font-size: 16px; margin: 14px 0 0; min-height: 1.5em; color: var(--green-800); }
.form-status:empty { min-height: 0; margin: 0; }
.form-status.is-error { color: var(--oxblood); }
.form-status:focus { outline: none; }
[data-engagement-form].is-sent .letters-form,
[data-engagement-form].is-sent .consent { display: none; }

/* --- The Consultation -------------------------------------------------- */

.is-consultation .standard-page .page-body { max-width: 1120px; }
.is-consultation .page-head { padding-bottom: clamp(32px, 4vw, 56px); }

.consultation { scroll-margin-top: calc(var(--header-h) + 24px); }

/* The page body is set as prose; the consultation keeps its own typography. */
.prose .consultation h2,
.prose .consultation h3 { margin-top: 0; }
.prose .consultation a { border-bottom: 0; }
.prose .consultation .link-arrow { border-bottom: 1px solid currentColor; }
.prose .consultation .link-arrow:hover { color: inherit; }
.prose .consultation .consent a { border-bottom: 1px solid var(--brass); }
.prose .consultation ol,
.prose .consultation ul { padding-left: 0; }
.prose .consultation li + li { margin-top: 0; }
.consultation__form { max-width: 920px; margin: 0 auto; }

.consultation__progress {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 10px;
	margin: 0 0 48px;
	padding: 0;
}
.consultation__progress li {
	width: 36px;
	height: 1px;
	background: var(--stone);
	position: relative;
	overflow: hidden;
}
.consultation__progress li::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--green-800);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .7s var(--ease);
}
.consultation__progress li.is-done::after,
.consultation__progress li.is-current::after { transform: scaleX(1); }
.consultation__progress li.is-current::after { background: var(--brass); }

.consultation__step {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
	transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.consultation__step + .consultation__step { margin-top: 88px; }
.consultation.is-enhanced .consultation__step + .consultation__step { margin-top: 0; }
.consultation__step[hidden] { display: none; }
.consultation__step.is-leaving { opacity: 0; transform: translateY(-14px); }
.consultation__step.is-leaving-back { opacity: 0; transform: translateY(14px); }
.consultation__step.is-entering { opacity: 0; transform: translateY(18px); transition: none; }
.consultation__step.is-entering-back { opacity: 0; transform: translateY(-18px); transition: none; }

.consultation__legend {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0 0 40px;
	text-align: center;
}
.consultation__legend .eyebrow { display: block; margin-bottom: 16px; }
.consultation__question {
	display: block;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.1;
	color: var(--ink);
}
.consultation__question:focus { outline: none; }

.consultation__options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.consultation__step[data-step="2"] .consultation__options,
.consultation__step[data-step="3"] .consultation__options { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }

.consultation__option {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 26px 24px 58px;
	border: 1px solid var(--stone);
	background: rgba(255, 255, 255, .22);
	cursor: pointer;
	transition: border-color .35s var(--ease), background-color .35s var(--ease);
}
.consultation__option:hover { border-color: var(--stone-dark); background: rgba(255, 255, 255, .45); }
.consultation__option input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}
.consultation__option-mark {
	position: absolute;
	left: 24px;
	top: 31px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--stone-dark);
	border-radius: 50%;
	transition: border-color .3s;
}
.consultation__option-mark::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--green-800);
	transform: scale(0);
	transition: transform .35s var(--ease);
}
.consultation__option-title { font-family: var(--display); font-size: 26px; line-height: 1.15; color: var(--ink); }
.consultation__option-note { font-style: italic; font-size: 16px; line-height: 1.45; color: var(--ink-soft); }

.consultation__option:has(input:checked) { border-color: var(--green-800); background: rgba(255, 255, 255, .55); }
.consultation__option:has(input:checked) .consultation__option-mark { border-color: var(--green-800); }
.consultation__option:has(input:checked) .consultation__option-mark::after { transform: scale(1); }
.consultation__option:has(input:focus-visible) { outline: 1px solid var(--brass); outline-offset: 3px; }
/* Browsers without :has() still see the native state through the mark. */
.consultation__option input:checked + .consultation__option-mark { border-color: var(--green-800); }
.consultation__option input:checked + .consultation__option-mark::after { transform: scale(1); }
.consultation__option input:focus-visible + .consultation__option-mark { outline: 1px solid var(--brass); outline-offset: 3px; }

.consultation__hint { text-align: center; font-style: italic; color: var(--oxblood); font-size: 16px; min-height: 1.6em; margin: 18px 0 0; }

.consultation__nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin-top: 24px;
}
.consultation.is-enhanced .consultation__nav { justify-content: space-between; }
.consultation__step[data-step="2"] .consultation__nav,
.consultation__step[data-step="3"] .consultation__nav { max-width: 720px; margin-left: auto; margin-right: auto; }
.consultation.is-enhanced .consultation__step[data-step="1"] .consultation__nav { justify-content: flex-end; }
.consultation__nav [hidden] { display: none; }
.consultation__back {
	background: none;
	border: 0;
	padding: 6px 0;
	font-family: var(--label);
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-soft);
	border-bottom: 1px solid transparent;
	cursor: pointer;
	transition: color .3s, border-color .3s;
}
.consultation__back:hover { color: var(--ink); border-color: currentColor; }
.consultation.is-busy .consultation__nav .button { opacity: .5; pointer-events: none; }

/* The result */
.consultation__result { transition: opacity .7s var(--ease), transform .8s var(--ease); }
.consultation__result.is-entering { opacity: 0; transform: translateY(20px); transition: none; }
.consultation__result[hidden] { display: none; }

.prescription { scroll-margin-top: calc(var(--header-h) + 24px); }
.prescription__head { text-align: center; margin-bottom: 56px; }
.prescription__head h2 { font-size: clamp(42px, 5.4vw, 72px); margin-bottom: 14px; }
.prescription__head h2:focus { outline: none; }
.prescription__lede { font-style: italic; color: var(--ink-soft); font-size: 20px; margin: 0; }

.prescription__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 64px);
}
.prescription__item { display: flex; flex-direction: column; }
.prescription__media {
	display: block;
	aspect-ratio: 7 / 9;
	overflow: hidden;
	background: var(--linen);
	margin-bottom: 28px;
}
.prescription__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.prescription__media:hover img { transform: scale(1.025); }
.prescription__body .eyebrow { margin-bottom: 10px; font-size: 10.5px; }
.prescription__name { font-size: clamp(34px, 3.4vw, 46px); margin: 0 0 12px; }
.prescription__tagline { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--green-700); margin: 0 0 12px; }
.prescription__reason { color: var(--ink-soft); font-size: 17px; margin: 0 0 16px; }
.prescription__price { font-size: 20px; margin: 0 0 22px; }

.prescription__discovery {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	margin: clamp(56px, 7vw, 96px) 0 0;
	padding: clamp(32px, 4.4vw, 56px) clamp(28px, 4.4vw, 64px);
	background: var(--green-800);
	color: var(--parchment);
}
.prescription__discovery .eyebrow { color: var(--brass-soft); margin-bottom: 12px; }
.prescription__discovery-line {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 36px);
	line-height: 1.25;
	margin: 0;
	max-width: 30ch;
}
.prescription__discovery-line .amount { white-space: nowrap; }
.prescription__discovery .button { flex: none; }
.prose .consultation .prescription__discovery .button { border: 1px solid var(--parchment); }

.prescription__letter {
	max-width: 620px;
	margin: clamp(64px, 8vw, 112px) auto 0;
	text-align: center;
}
.prescription__letter h3 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 10px; }
.prescription__letter > p { color: var(--ink-soft); font-style: italic; font-size: 17.5px; }
.prescription__form { text-align: left; }
.prescription__form .letters-form { margin-top: 22px; }
.prescription__again { text-align: center; margin: 64px 0 0; }

/* --- Home: consultation teaser ---------------------------------------- */

.site-main > .consultation-teaser {
	max-width: 980px;
	text-align: center;
	padding-top: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(96px, 11vw, 160px);
}
.consultation-teaser__line {
	font-family: var(--display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.3;
	margin: 0 auto 32px;
	max-width: 24ch;
}

/* --- Home: a counter, and the House ----------------------------------- */

.site-main > .comparison { padding-top: clamp(96px, 11vw, 168px); }
.comparison__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	max-width: 1080px;
	margin: 0 auto;
	border-top: 1px solid var(--stone);
	border-bottom: 1px solid var(--stone);
}
.comparison__col { padding: clamp(40px, 5vw, 72px) clamp(24px, 4.4vw, 64px); }
.comparison__col--house { background: var(--linen); }
.comparison__title {
	font-family: var(--label);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .24em;
	text-transform: uppercase;
	line-height: 1.5;
	margin: 0 0 32px;
	color: var(--ink-soft);
}
.comparison__col--house .comparison__title { color: var(--brass); }
.comparison__col ul { list-style: none; }
.comparison__col li {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(23px, 2.1vw, 28px);
	line-height: 1.3;
	padding: 20px 0;
	border-top: 1px solid var(--stone);
}
.comparison__col li:first-child { border-top: 0; padding-top: 0; }
.comparison__col--counter li { color: var(--ink-soft); font-style: italic; }
.comparison__col--house li { color: var(--green-800); }
.comparison__col .link-arrow { margin-top: 28px; }
/* Side by side, each line sits opposite its counterpart. */
@supports (grid-template-rows: subgrid) {
	@media (min-width: 901px) {
		.comparison__grid { grid-template-rows: auto repeat(3, auto) auto; }
		.comparison__col { display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; }
		.comparison__col ul { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
		.comparison__col .link-arrow { justify-self: start; align-self: start; }
	}
}

/* --- Correspondence from clients --------------------------------------- */

.correspondence {
	padding: 0 0 clamp(96px, 11vw, 160px);
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.site-main > .correspondence--home { padding-top: clamp(96px, 11vw, 168px); padding-bottom: 0; }
.correspondence .section-head h2 { font-size: clamp(36px, 4.4vw, 60px); }
.correspondence__lede { flex-basis: 100%; margin: 12px 0 0; font-style: italic; color: var(--ink-soft); }
.correspondence__notice {
	max-width: 620px;
	margin: 0 auto 48px;
	padding: 18px 24px;
	background: var(--linen);
	border-left: 2px solid var(--brass);
	font-style: italic;
}

.letters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(20px, 2.6vw, 40px);
	max-width: 1180px;
	margin: 0 auto;
}
.letters-grid:has(> .letter:only-child) { max-width: 620px; }

.letter {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: clamp(32px, 3.6vw, 48px) clamp(28px, 3.2vw, 44px) clamp(28px, 3vw, 40px);
	background: #fbf8f2;
	border: 1px solid var(--stone);
	box-shadow: 0 1px 0 rgba(30, 34, 30, .03), 0 18px 40px -28px rgba(8, 26, 18, .28);
}
.letter::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(185, 174, 155, .35);
	pointer-events: none;
}
.letter__product { margin-bottom: 14px; font-size: 10.5px; }
.letter__product a { border-bottom: 1px solid transparent; transition: border-color .3s; }
.letter__product a:hover { border-color: currentColor; }
.letter__rating { margin: 0 0 18px; line-height: 1; }
.stars { display: inline-flex; gap: 4px; color: var(--brass); }
.stars__star { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: .9; }
.stars__star.is-on { fill: currentColor; }
.letter__text {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	flex: 1;
	font-family: var(--serif);
	font-style: italic;
	font-size: 19.5px;
	line-height: 1.6;
	color: var(--ink);
	quotes: none;
}
.letter__text p { margin: 0 0 .8em; }
.letter__text p:last-child { margin-bottom: 0; }
.letter__sign {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 6px 18px;
	padding-top: 18px;
	border-top: 1px solid var(--stone);
}
.letter__name { font-family: var(--display); font-size: 22px; color: var(--green-800); }
.letter__meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.letter__verified { display: inline-flex; align-items: center; gap: 6px; color: var(--brass); }
.letter__verified svg { width: 11px; height: 11px; }

/* The review form, restyled from WooCommerce's. */
.correspondence__write {
	max-width: 640px;
	margin: clamp(56px, 7vw, 96px) auto 0;
}
.correspondence__write .comment-respond { margin: 0; }
.correspondence__write .comment-reply-title { display: block; text-align: center; font-size: clamp(30px, 3vw, 40px); margin: 0 0 10px; }
.correspondence__write .comment-reply-title small { display: block; font-size: 14px; margin-top: 8px; }
.correspondence__note { text-align: center; font-style: italic; color: var(--ink-soft); font-size: 17px; margin: 0 0 32px; }
.correspondence__write form { display: grid; gap: 22px; }
.correspondence__write form p { margin: 0; }
.correspondence__write label {
	display: block;
	font-family: var(--label);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 10px;
}
.correspondence__write .required { color: var(--brass); }
.correspondence__write textarea,
.correspondence__write input[type="text"],
.correspondence__write input[type="email"],
.correspondence__write input[type="url"] {
	width: 100%;
	background: rgba(255, 255, 255, .35);
	border: 1px solid var(--stone-dark);
	border-radius: 0;
	padding: 14px 16px;
	font-family: var(--serif);
	font-size: 18px;
	font-style: italic;
	line-height: 1.55;
	color: var(--ink);
	transition: border-color .3s, background-color .3s;
}
.correspondence__write textarea:focus,
.correspondence__write input:focus { outline: none; border-color: var(--green-800); background: rgba(255, 255, 255, .6); }
.correspondence__write .comment-form-cookies-consent { display: flex; gap: 10px; align-items: baseline; font-size: 15px; }
.correspondence__write .comment-form-cookies-consent label { text-transform: none; letter-spacing: 0; font-family: var(--serif); font-size: 15px; }
body.woocommerce .correspondence__write p.stars { margin: 0; }
body.woocommerce .correspondence__write p.stars a { color: var(--brass); width: 1.3em; height: 1.3em; font-size: 18px; }
body.woocommerce .correspondence__write p.stars a:focus-visible { outline: 1px solid var(--brass); outline-offset: 2px; }
.correspondence__write .form-submit { text-align: center; padding-top: 6px; }
.correspondence__write .form-submit .button { min-width: 240px; }

/* --- Letter of introduction ------------------------------------------- */

.has-letter-modal body { overflow: hidden; }
.letter-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: 16px;
	overflow-y: auto;
}
.letter-modal[hidden] { display: none; }
.letter-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(8, 26, 18, .56);
	opacity: 0;
	transition: opacity .5s var(--ease);
}
.letter-modal__dialog {
	position: relative;
	width: min(100%, 540px);
	margin: auto;
	opacity: 0;
	transform: translateY(24px) rotate(-.4deg);
	transform-origin: 50% 0;
	transition: opacity .55s var(--ease), transform .8s var(--ease);
}
.letter-modal__dialog:focus { outline: none; }
.letter-modal.is-open .letter-modal__backdrop { opacity: 1; }
.letter-modal.is-open .letter-modal__dialog { opacity: 1; transform: none; }

/* Parchment folded in thirds: two faint creases and a paper edge. */
.letter-modal__paper {
	position: relative;
	padding: clamp(40px, 7vw, 60px) clamp(24px, 6vw, 56px) clamp(32px, 6vw, 48px);
	text-align: center;
	color: var(--ink);
	background:
		linear-gradient(180deg, rgba(8, 26, 18, 0) 32.9%, rgba(8, 26, 18, .06) 33.3%, rgba(255, 255, 255, .5) 33.6%, rgba(8, 26, 18, 0) 38%),
		linear-gradient(180deg, rgba(8, 26, 18, 0) 65.9%, rgba(8, 26, 18, .06) 66.3%, rgba(255, 255, 255, .5) 66.6%, rgba(8, 26, 18, 0) 71%),
		linear-gradient(170deg, #f8f4ec 0%, var(--parchment) 45%, #efe8db 100%);
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .04);
}
.letter-modal__paper::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(156, 127, 75, .38);
	pointer-events: none;
}
.letter-modal__crest { width: 36px; margin: 0 auto 22px; color: var(--brass); }
.letter-modal__paper .eyebrow { margin-bottom: 12px; }
.letter-modal__title { font-size: clamp(34px, 5vw, 44px); margin-bottom: 16px; }
.letter-modal__text { color: var(--ink-soft); font-size: 17.5px; line-height: 1.6; max-width: 40ch; margin: 0 auto; }
.letter-modal__form { text-align: left; margin-top: 8px; }
.letter-modal__form .form-status { text-align: center; }
.letter-modal__sign { font-family: var(--display); font-style: italic; font-size: 18px; color: var(--green-700); margin: 24px 0 0; }
.letter-modal__small { font-size: 13.5px; font-style: italic; color: var(--ink-soft); margin: 22px 0 0; line-height: 1.5; }
.letter-modal__decline {
	margin: 14px 0 0;
	padding: 8px 2px;
	background: none;
	border: 0;
	border-bottom: 1px solid transparent;
	font-family: var(--label);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ink-soft);
	cursor: pointer;
	transition: color .3s, border-color .3s;
}
.letter-modal__decline:hover { color: var(--ink); border-color: currentColor; }

/* The welcome code, once issued. */
.letter-modal__code {
	margin: 24px 0 0;
	padding: 22px 20px 18px;
	border: 1px solid var(--brass);
	background: rgba(255, 255, 255, .45);
}
.letter-modal__code[hidden] { display: none; }
.letter-modal__code .eyebrow { margin-bottom: 10px; }
.letter-modal__code-value { margin: 0 0 14px; }
.letter-modal__code-value code {
	font-family: var(--display);
	font-size: clamp(20px, 5.6vw, 30px);
	letter-spacing: .1em;
	white-space: nowrap;
	color: var(--green-800);
	user-select: all;
	-webkit-user-select: all;
}
.letter-modal__copy {
	min-height: 44px;
	padding: 0 22px;
	background: var(--green-800);
	border: 1px solid var(--green-800);
	color: var(--parchment);
	font-family: var(--label);
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s;
}
.letter-modal__copy:hover { background: var(--green-950); }
.letter-modal__code-note { font-size: 14.5px; font-style: italic; color: var(--ink-soft); margin: 12px 0 0; min-height: 1.4em; }
.letter-modal__close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 1;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--ink-soft);
	cursor: pointer;
	transition: color .3s;
}
.letter-modal__close:hover { color: var(--ink); }
.letter-modal__close .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.consultation__step,
	.consultation__result,
	.letter-modal__backdrop,
	.letter-modal__dialog { transition: none !important; transform: none !important; }
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 900px) {
	.consultation__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.prescription__discovery { flex-direction: column; align-items: flex-start; }
	.comparison__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	.consultation__progress { margin-bottom: 36px; }
	.consultation__legend { margin-bottom: 28px; }
	.consultation__options,
	.consultation__step[data-step="2"] .consultation__options,
	.consultation__step[data-step="3"] .consultation__options { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.consultation__option { padding: 18px 18px 16px 50px; }
	.consultation__option-mark { left: 18px; top: 22px; }
	.consultation__option-title { font-size: 23px; }
	.consultation__option-note { font-size: 15px; }
	.consultation__nav { gap: 20px; }
	.consultation__nav .button { flex: 1; padding: 0 20px; }
	.prescription__list { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.prescription__media { aspect-ratio: 4 / 5; }
	.prescription__discovery .button { width: 100%; }
	.letter { padding: 30px 24px 26px; }
	.letter__text { font-size: 18.5px; }
	.letter-modal { padding: 12px; align-items: end; }
	.letter-modal__paper::before { inset: 8px; }
	.letter-modal__close { top: 10px; right: 10px; }
	.consent { font-size: 15px; }
}