/*
 * LC Médical — Comptoir : Espace Pro landing page.
 * A flat navy band with the cabinet photo (unframed), then the way in (three steps),
 * what a pro account gives (plain row heads, no icon cards) and the study request. Tokens only, logical properties only.
 */

body.lc-pro-ctx {
	--lcc-r: 16px; /* the home card radius */
	--lcc-card: 0 1px 2px rgb(20 36 107 / 0.1), 0 2px 10px -3px rgb(20 36 107 / 0.14);
}


.lc-pl {
	padding-block-end: var(--lc-s-9);
}

/* ---------- Hero band ---------- */
.lc-pl__hero {
	position: relative;
	background: var(--lc-navy-800);
	color: #fff;
	overflow: clip;
}

.lc-pl__hero-in {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lc-s-6);
	align-items: center;
	inline-size: min(100% - 2 * var(--lc-gutter), var(--lc-container));
	margin-inline: auto;
	padding-block: var(--lc-s-7);
}

@media (min-width: 1000px) {
	.lc-pl__hero-in {
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		column-gap: var(--lc-s-8);
		padding-block: var(--lc-s-8);
	}
}

.lc-pl__title {
	margin: 0 0 var(--lc-s-4);
	max-inline-size: 16ch;
	font-size: var(--lc-fs-h1);
	color: #fff;
}

.lc-pl__lead {
	margin: 0 0 var(--lc-s-6);
	max-inline-size: 46ch;
	font-size: var(--lc-fs-md);
	color: var(--lc-navy-100);
}

.lc-pl__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-s-3) var(--lc-s-5);
}

.lc-pl__login {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--lc-tap);
	color: #fff;
	font-weight: 700;
}

.lc-pl__login:hover {
	color: #fff;
	text-decoration: underline;
}

/* The photo is plain, no caption. */
.lc-pl__photo {
	margin: 0;
}

.lc-pl__photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--lc-r-label);
	box-shadow: 0 18px 28px -12px rgb(7 13 43 / 0.5), 0 6px 10px -4px rgb(7 13 43 / 0.35);
}

/* ---------- Body ---------- */
.lc-pl__body {
	display: grid;
	gap: var(--lc-s-9);
	padding-block-start: var(--lc-s-9);
}

.lc-pl__h2 {
	margin: 0 0 var(--lc-s-6);
	font-family: var(--lc-font-label);
	font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--lc-navy-900);
	text-wrap: balance;
}

.lc-pl__h3 {
	margin: 0 0 var(--lc-s-2);
	font-size: var(--lc-fs-h3);
}

/* Steps: a numbered sequence on a hairline, the order carries the information. */
.lc-pl__steplist {
	display: grid;
	gap: var(--lc-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: lc-pl;
}

@media (min-width: 800px) {
	.lc-pl__steplist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--lc-s-6);
	}
}

.lc-pl__steplist li {
	position: relative;
	display: grid;
	gap: var(--lc-s-1);
	align-content: start;
	padding-block-start: calc(36px + var(--lc-s-3));
	counter-increment: lc-pl;
	color: var(--lc-ink-2);
}

/* Number tag: a hairline square on paper, in front of the rule. */
.lc-pl__steplist li::before {
	content: counter(lc-pl);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: 50%;
	background: var(--lc-navy-800);
	color: #fff;
	font-family: var(--lc-font-label);
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
}

.lc-pl__steplist li::after {
	content: '';
	position: absolute;
	inset-block-start: 17px;
	inset-inline: 44px 0;
	block-size: 2px;
	border-radius: 1px;
	background: var(--lc-line);
}

.lc-pl__steplist strong {
	font-family: var(--lc-font-label);
	font-size: var(--lc-fs-h4);
	font-weight: 700;
	line-height: 1.2;
	color: var(--lc-navy-900);
}

/* What a pro account gives: plain head + sentence, separated by hairlines. */
.lc-pl__rows {
	margin: 0;
	border-block-start: 1px solid var(--lc-line-strong);
}

.lc-pl__row {
	display: grid;
	gap: var(--lc-s-3);
	padding-block: var(--lc-s-5);
	border-block-end: 1px solid var(--lc-line-strong);
}

@media (min-width: 800px) {
	.lc-pl__row {
		grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr);
		column-gap: var(--lc-s-7);
		align-items: center;
	}
}

.lc-pl__row dt {
	margin: 0;
	font-family: var(--lc-font-label);
	font-size: var(--lc-fs-h4);
	font-weight: 700;
	line-height: 1.2;
	color: var(--lc-ink);
}

.lc-pl__row dd {
	margin: 0;
	max-inline-size: 60ch;
	font-size: var(--lc-fs-md);
	color: var(--lc-ink-2);
}

.lc-pl__content {
	max-inline-size: var(--lc-measure);
}

/* Study request: paper sheet pulled slightly forward. */
.lc-pl__study {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lc-s-5);
	padding: var(--lc-s-6);
	background: var(--lc-paper);
	border-radius: var(--lcc-r);
	box-shadow: var(--lcc-card);
}

.lc-pl__study p {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--lc-ink-2);
}