/**
 * Interactive controls for the Atlas call-centre interview guide.
 * Scoped to the article so no other Careerfy component inherits these styles.
 */
.me-callcenter-guide {
	--me-cc-navy: #102743;
	--me-cc-green: #0fa967;
	--me-cc-green-dark: #087c4c;
	--me-cc-green-soft: #eaf8f1;
	--me-cc-coral-soft: #fff0ec;
	--me-cc-line: #dce5e9;
	--me-cc-muted: #607286;
}

/* Dedicated full-page shell matching the approved Atlas prototype. */
.me-callcenter-special {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 28px 20px 90px;
	background: #f2f6f7;
	color: #102743;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.68;
}

.me-callcenter-special *,
.me-callcenter-special *::before,
.me-callcenter-special *::after { box-sizing: border-box; }

.me-callcenter-special .career-article {
	overflow: hidden;
	width: min(1180px, 100%);
	margin: 0 auto;
	border: 1px solid #dbe5e8;
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(16, 39, 67, .07);
}

.me-callcenter-special .article-header {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 56px;
	overflow: hidden;
	padding: 70px 72px 58px;
	background: #102743;
	color: #fff;
}

.me-callcenter-special .article-header::after {
	content: "";
	position: absolute;
	right: -130px;
	bottom: -200px;
	width: 460px;
	height: 460px;
	border: 70px solid rgba(15, 169, 103, .12);
	border-radius: 50%;
}

.me-callcenter-special .article-header__copy,
.me-callcenter-special .article-header__summary { position: relative; z-index: 1; }

.me-callcenter-special .article-category {
	margin: 0 0 14px;
	color: #6ce0a7;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.me-callcenter-special .article-header h1 {
	margin: 0;
	max-width: 790px;
	color: #fff;
	font-size: clamp(39px, 5vw, 64px);
	line-height: 1.04;
	letter-spacing: -.052em;
}

.me-callcenter-special .article-deck {
	max-width: 740px;
	margin: 25px 0;
	color: #d5e0e9;
	font-size: 20px;
	line-height: 1.56;
}

.me-callcenter-special .article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 7px 22px;
	color: #9fb1c2;
	font-size: 13px;
}

.me-callcenter-special .article-header__summary {
	align-self: end;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 17px;
	background: rgba(255, 255, 255, .06);
}

.me-callcenter-special .article-header__summary > span {
	color: #6ce0a7;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.me-callcenter-special .article-header__summary ol {
	margin: 13px 0 0;
	padding-left: 20px;
	color: #e4ebf1;
	font-size: 14px;
}

.me-callcenter-special .article-header__summary ol li {
	color: #e4ebf1 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.68 !important;
}

.me-callcenter-special .article-header__summary li + li { margin-top: 8px !important; }

.me-callcenter-special .article-layout {
	display: grid;
	grid-template-columns: minmax(0, 780px) 220px;
	justify-content: center;
	gap: 60px;
	padding: 18px 54px 76px;
}

.me-callcenter-special .article-body,
.me-callcenter-special .me-article-content {
	min-width: 0;
	max-width: none;
	width: 100%;
}

.me-callcenter-special .me-article-content {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #34495d;
	font-family: inherit;
	font-size: 17px;
	line-height: 1.68;
}

.me-callcenter-special .article-aside { padding-top: 38px; }

.me-callcenter-special .aside-card {
	display: grid;
	gap: 9px;
	margin-bottom: 16px;
	padding: 19px;
	border: 1px solid #dbe5e8;
	border-radius: 15px;
	background: #fbfcfc;
}

.me-callcenter-special .aside-card--sticky { position: sticky; top: 20px; }
.me-callcenter-special .aside-card > span { color: #087c4c; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.me-callcenter-special .aside-card > strong { color: #102743; font-size: 15px; line-height: 1.4; }
.me-callcenter-special .aside-card ul { margin: 2px 0 0; padding-left: 18px; }
.me-callcenter-special .aside-card li,
.me-callcenter-special .aside-card a { color: #34495d; font-size: 12px; }
.me-callcenter-special .aside-card a { font-weight: 750; }

.me-callcenter-guide > .lead {
	margin: 38px 0 18px;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 21px;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.62;
}

.me-callcenter-guide > p:not(.lead) {
	margin: 17px 0;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 17px;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.68;
}

.me-callcenter-guide > section {
	margin-top: 68px;
	scroll-margin-top: 24px;
}

.me-callcenter-guide > section > h2,
.me-callcenter-guide .practice-lab h2 {
	margin-bottom: 17px;
	color: var(--me-cc-navy);
	font-size: 34px;
	line-height: 1.18;
	letter-spacing: -.035em;
}

.me-callcenter-guide blockquote {
	margin: 18px 0;
	padding: 18px 20px;
	border-left: 4px solid var(--me-cc-green);
	border-radius: 0 14px 14px 0;
	background: var(--me-cc-green-soft);
	color: var(--me-cc-navy);
}

.me-callcenter-guide .section-kicker {
	margin: 0 0 14px;
	color: #19a166 !important;
	font-family: inherit !important;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em !important;
	line-height: 1.68;
	text-transform: uppercase;
}

.me-callcenter-guide .method-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 26px 0 0;
}

.me-callcenter-guide .method-grid > div {
	position: relative;
	padding: 24px 19px 19px;
	border: 1px solid var(--me-cc-line);
	border-radius: 16px;
	background: #fbfcfc;
}

.me-callcenter-guide .method-grid span {
	position: absolute;
	top: -15px;
	display: grid;
	width: 31px;
	height: 31px;
	place-items: center;
	border-radius: 50%;
	background: var(--me-cc-green);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
}

.me-callcenter-guide .method-grid strong { display: block; color: var(--me-cc-navy); font-size: 15px; }
.me-callcenter-guide .method-grid p {
	margin: 7px 0 0;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 13px;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.5;
}

.me-callcenter-guide .practice-lab {
	margin: 68px 0 0;
	padding: 30px;
	border: 1px solid #b8d9c6;
	border-radius: 22px;
	background: linear-gradient(135deg, #f0fbf6, #fff);
}

.me-callcenter-guide .practice-lab__heading {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.me-callcenter-guide .practice-lab h2 { margin-bottom: 8px; }

.me-callcenter-guide .practice-lab__heading > div > p:last-child {
	margin: 0;
	color: #102743 !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.68 !important;
}

.me-callcenter-guide .practice-progress {
	align-self: start;
	flex: 0 0 auto;
	padding: 8px 11px;
	border-radius: 999px;
	background: var(--me-cc-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 850;
}

.me-callcenter-guide .practice-card {
	margin-top: 23px;
	padding: 24px;
	border-radius: 17px;
	background: var(--me-cc-navy);
	color: #fff;
}

.me-callcenter-guide .practice-card > span {
	color: #6ce0a7;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.me-callcenter-guide .practice-card > strong {
	display: block;
	margin-top: 7px;
	color: #fff !important;
	font-size: clamp(22px, 4vw, 31px);
	line-height: 1.25;
}

.me-callcenter-guide .practice-card > p {
	margin: 14px 0;
	color: #c5d1dc !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.68 !important;
}
.me-callcenter-guide .practice-timer { display: flex; align-items: baseline; gap: 12px; margin-top: 19px; }
.me-callcenter-guide .practice-timer b { color: #fff !important; font-size: 33px; font-variant-numeric: tabular-nums; }
.me-callcenter-guide .practice-timer span { color: #b9c6d1; font-size: 12px; }
.me-callcenter-guide .practice-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }

.me-callcenter-guide .me-callcenter-button,
.me-callcenter-guide .prepare-button {
	min-height: 44px;
	padding: 9px 15px;
	border: 1px solid var(--me-cc-green);
	border-radius: 10px;
	background: var(--me-cc-green);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
}

.me-callcenter-guide .me-callcenter-button--ghost {
	border-color: rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
}

.me-callcenter-guide button:focus-visible,
.me-callcenter-guide input:focus-visible,
.me-callcenter-guide summary:focus-visible {
	outline: 3px solid rgba(15, 169, 103, .35);
	outline-offset: 3px;
}

.me-callcenter-guide .question-tools { display: grid; gap: 14px; margin-top: 24px; }
.me-callcenter-guide .question-search { display: grid; gap: 7px; }
.me-callcenter-guide .question-search span { color: var(--me-cc-navy); font-size: 12px; font-weight: 850; }
.me-callcenter-guide .question-search input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #b9c6cf;
	border-radius: 12px;
	color: var(--me-cc-navy);
	font-size: 16px;
}
.me-callcenter-guide .question-search input:focus { border-color: var(--me-cc-green); }
.me-callcenter-guide .question-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.me-callcenter-guide .question-filters button {
	min-height: 42px;
	padding: 8px 13px;
	border: 1px solid #b9c6cf;
	border-radius: 999px;
	background: #fff;
	color: var(--me-cc-navy);
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
}
.me-callcenter-guide .question-filters button[aria-pressed="true"] { border-color: var(--me-cc-green); background: var(--me-cc-green); color: #fff; }
.me-callcenter-guide .filter-result {
	margin: 12px 0 10px;
	color: #6c7c8b !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: normal !important;
}
.me-callcenter-guide .question-list { display: grid; gap: 10px; }
.me-callcenter-guide .question[hidden] { display: none; }
.me-callcenter-guide .question { overflow: hidden; border: 1px solid var(--me-cc-line); border-radius: 14px; background: #fff; }
.me-callcenter-guide .question[open] { border-color: #add6c0; box-shadow: 0 15px 32px rgba(16, 39, 67, .07); }
.me-callcenter-guide .question summary {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-height: 68px;
	padding: 12px 17px;
	cursor: pointer;
	list-style: none;
}
.me-callcenter-guide .question summary::-webkit-details-marker { display: none; }
.me-callcenter-guide .question summary::after { content: "+"; grid-column: 3; grid-row: 1; align-self: end; color: var(--me-cc-green-dark); font-size: 22px; }
.me-callcenter-guide .question[open] summary::after { content: "−"; }
.me-callcenter-guide .question summary > span {
	grid-row: 1 / span 2;
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 10px;
	background: var(--me-cc-green-soft);
	color: var(--me-cc-green-dark);
	font-size: 12px;
	font-weight: 900;
}
.me-callcenter-guide .question summary strong {
	padding-right: 26px;
	color: #102743 !important;
	font-family: inherit !important;
	font-size: 16px;
	line-height: 1.35;
}
.me-callcenter-guide .question summary em { grid-column: 2; color: #6c7c8b !important; font-size: 10px; font-style: normal; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.me-callcenter-guide .question__body { padding: 5px 22px 23px 72px; border-top: 1px solid #edf1f2; }
.me-callcenter-guide .question__body p,
.me-callcenter-guide .question__body blockquote { font-size: 15px; line-height: 1.68; }
.me-callcenter-guide .question__body p {
	margin: 13px 0 0;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 15px;
	font-weight: 400 !important;
	letter-spacing: normal !important;
}
.me-callcenter-guide .question__body .avoid { padding: 12px 14px; border-radius: 10px; background: var(--me-cc-coral-soft); color: #78433b; }

.me-callcenter-guide .question-library > .section-kicker {
	margin: 0 0 14px;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 900 !important;
	letter-spacing: .12em !important;
	line-height: 1.68 !important;
}

.me-callcenter-guide .question-library > p:not(.section-kicker):not(.filter-result),
.me-callcenter-guide #end-title + p,
.me-callcenter-guide .conclusion > p {
	margin: 17px 0;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.68 !important;
}
.me-callcenter-guide .prepare-button {
	margin-top: 12px;
	padding: 9px 14px;
	background: #fff;
	color: var(--me-cc-green-dark);
	font-weight: 850;
}
.me-callcenter-guide .prepare-button[aria-pressed="true"] { border-color: var(--me-cc-green); background: var(--me-cc-green); color: #fff; }

.me-callcenter-guide .interactive-checklist { display: grid; gap: 9px; }
.me-callcenter-guide .interactive-checklist button {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 54px;
	padding: 10px 14px;
	border: 1px solid var(--me-cc-line);
	border-radius: 12px;
	background: #fff;
	color: var(--me-cc-navy);
	font-family: inherit;
	font-size: 16px;
	text-align: left;
	font-weight: 750;
	cursor: pointer;
}
.me-callcenter-guide .interactive-checklist button span { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; border: 1px solid #b6c5cf; border-radius: 50%; color: transparent; }
.me-callcenter-guide .interactive-checklist button[aria-pressed="true"] { border-color: #a4d2b9; background: var(--me-cc-green-soft); }
.me-callcenter-guide .interactive-checklist button[aria-pressed="true"] span { border-color: var(--me-cc-green); background: var(--me-cc-green); color: #fff; }
.me-callcenter-guide [data-checklist-result] { color: var(--me-cc-green-dark); font-size: 13px; font-weight: 850; }

.me-callcenter-guide .end-questions {
	counter-reset: ending;
	display: block;
	padding: 0;
	list-style: none;
}

.me-callcenter-guide .end-questions li {
	position: relative;
	display: block;
	min-height: 56px;
	margin: 0;
	padding: 15px 18px 15px 55px;
	border: 1px solid var(--me-cc-line);
	border-radius: 12px;
	background: #fbfcfc;
	color: #34495d !important;
	font-family: inherit !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	line-height: 1.68 !important;
	list-style: none !important;
}

.me-callcenter-guide .end-questions li + li { margin-top: 7px; }

.me-callcenter-guide .end-questions li::marker {
	content: "" !important;
}

.me-callcenter-guide .end-questions li::before {
	counter-increment: ending;
	content: counter(ending);
	position: absolute;
	left: 16px;
	top: 14px;
	display: grid;
	width: 28px;
	height: 28px;
	place-items: center;
	border-radius: 50%;
	background: var(--me-cc-navy);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
}

.me-callcenter-guide .article-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 30px;
	padding: 25px;
	border-radius: 17px;
	background: var(--me-cc-navy);
	color: #fff;
}

.me-callcenter-special .me-atlas-story {
	margin: 38px -28px 0;
	border-radius: 22px;
	box-shadow: 0 20px 55px rgba(13, 36, 66, .09);
}

.me-callcenter-special .me-atlas-story__direction {
	padding: 24px 28px;
}

.me-callcenter-special .me-atlas-story figcaption {
	padding: 24px 28px 28px;
}

.me-callcenter-special .me-atlas-story figcaption > strong {
	font-size: 20px;
}

.me-callcenter-special .me-atlas-story--closing .me-atlas-story__route b {
	font-size: 0;
}

.me-callcenter-special .me-atlas-story--closing .me-atlas-story__route b::before {
	content: "·";
	font-size: 18px;
}

.me-callcenter-guide .article-cta div { display: grid; }
.me-callcenter-guide .article-cta strong { color: #fff; font-size: 18px; }
.me-callcenter-guide .article-cta span { color: #c0cad3; font-size: 14px; }
.me-callcenter-guide .article-cta a {
	flex: 0 0 auto;
	padding: 12px 17px;
	border-radius: 10px;
	background: var(--me-cc-green);
	color: #fff;
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}

@media (max-width: 980px) {
	.me-callcenter-special .article-header { grid-template-columns: 1fr; gap: 30px; padding: 58px 54px 48px; }
	.me-callcenter-special .article-header__summary { max-width: 520px; }
	.me-callcenter-special .article-layout { grid-template-columns: minmax(0, 760px); padding-inline: 54px; }
	.me-callcenter-special .article-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 0; }
	.me-callcenter-special .aside-card--sticky { position: static; }
}

@media (max-width: 720px) {
	.me-callcenter-special { padding: 13px 9px 60px; }
	.me-callcenter-special .career-article { border-radius: 19px; }
	.me-callcenter-special .article-header { padding: 42px 24px 35px; }
	.me-callcenter-special .article-header h1 { font-size: clamp(34px, 10vw, 46px); }
	.me-callcenter-special .article-deck { font-size: 17px; }
	.me-callcenter-special .article-header__summary { padding: 18px; }
	.me-callcenter-special .article-layout { padding: 4px 22px 48px; }
	.me-callcenter-special .article-aside { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 0; }
	.me-callcenter-special .aside-card--sticky { position: static; }
	.me-callcenter-guide > .lead { font-size: 19px; }
	.me-callcenter-guide > section { margin-top: 58px; }
	.me-callcenter-guide > section > h2,
	.me-callcenter-guide .practice-lab h2 { font-size: 29px; }
	.me-callcenter-guide .method-grid { grid-template-columns: 1fr; gap: 23px; }
	.me-callcenter-guide .practice-lab { margin-top: 58px; padding: 22px 18px; }
	.me-callcenter-special .me-atlas-story { margin-inline: -13px; border-radius: 18px; }
	.me-callcenter-special .me-atlas-story__direction,
	.me-callcenter-special .me-atlas-story figcaption { padding: 20px; }
	.me-callcenter-special .me-atlas-story__direction > strong,
	.me-callcenter-special .me-atlas-story figcaption > strong { font-size: 18px; }
	.me-callcenter-guide .practice-lab__heading { display: grid; }
	.me-callcenter-guide .practice-progress { justify-self: start; }
	.me-callcenter-guide .practice-actions .me-callcenter-button { flex: 1 1 46%; }
	.me-callcenter-guide .question-filters { display: grid; grid-template-columns: repeat(2, 1fr); }
	.me-callcenter-guide .question summary { grid-template-columns: 36px minmax(0, 1fr) auto; padding-inline: 13px; }
	.me-callcenter-guide .question__body { padding: 5px 17px 20px; }
	.me-callcenter-guide .article-cta { align-items: stretch; flex-direction: column; }
	.me-callcenter-guide .article-cta a { text-align: center; }
}

@media (max-width: 430px) {
	.me-callcenter-special .article-layout { padding-inline: 18px; }
	.me-callcenter-guide .question-filters { grid-template-columns: 1fr; }
	.me-callcenter-guide .practice-actions .me-callcenter-button { flex-basis: 100%; }
	.me-callcenter-guide .question summary strong { font-size: 16px; }
}