.matison-public-course-page {
	margin: 0;
	background: #f3f8fd;
}

.matison-course-detail,
.matison-course-detail * { box-sizing: border-box; }

.matison-course-detail {
	--course-navy: #061a3a;
	--course-blue: #0868e8;
	--course-cyan: #79d8ff;
	--course-ink: #10213d;
	--course-muted: #60708a;
	--course-border: #dce8f3;
	color: var(--course-ink);
	background: #f3f8fd;
	font-family: Manrope, Arial, sans-serif;
}

.matison-course-detail a { text-decoration: none; }

.matison-course-container {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
}

.matison-course-hero {
	position: relative;
	overflow: hidden;
	padding: 105px 0 90px;
	color: #fff;
	background: radial-gradient(circle at 88% 16%, rgba(21, 126, 255, .45), transparent 32%), linear-gradient(125deg, #061a3a 0%, #092e68 58%, #084fab 100%);
}

.matison-course-grid-lines {
	position: absolute;
	inset: 0;
	opacity: .08;
	background-image: linear-gradient(rgba(255,255,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.7) 1px, transparent 1px);
	background-size: 68px 68px;
	mask-image: linear-gradient(90deg, #000, transparent 80%);
}

.matison-course-hero-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(330px, .72fr);
	align-items: center;
	gap: 80px;
}

.matison-course-back {
	width: fit-content;
	margin-bottom: 42px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.64);
	font-size: 12px;
	font-weight: 700;
}

.matison-course-back svg { transform: rotate(180deg); }

.matison-course-kicker,
.matison-course-section-label {
	color: var(--course-cyan);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.matison-course-hero h1 {
	max-width: 760px;
	margin: 17px 0 22px;
	color: #fff;
	font: 800 clamp(44px, 6vw, 76px)/1.03 "Plus Jakarta Sans", Manrope, sans-serif;
	letter-spacing: -.055em;
}

.matison-course-hero-copy > p {
	max-width: 690px;
	margin: 0;
	color: rgba(255,255,255,.67);
	font-size: 17px;
	line-height: 1.75;
}

.matison-course-facts {
	margin: 34px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
}

.matison-course-facts > span {
	min-width: 145px;
	padding: 13px 15px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 13px;
	background: rgba(255,255,255,.055);
}

.matison-course-facts svg { grid-row: 1 / 3; align-self: center; color: var(--course-cyan); }
.matison-course-facts small { color: rgba(255,255,255,.45); font-size: 9px; }
.matison-course-facts strong { color: #fff; font-size: 12px; }

.matison-course-primary {
	min-height: 54px;
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	border-radius: 11px;
	color: #fff;
	background: var(--course-accent, var(--course-blue));
	box-shadow: 0 16px 32px rgba(0, 44, 105, .24);
	font-size: 13px;
	font-weight: 800;
	transition: transform .2s ease, box-shadow .2s ease;
}

.matison-course-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 38px rgba(0, 44, 105, .32); }

.matison-course-visual {
	min-height: 475px;
	padding: 38px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 28px;
	background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.025));
	box-shadow: 0 35px 80px rgba(0,0,0,.22);
	background-position: center;
	background-size: cover;
}

.matison-course-visual.has-image { position: relative; isolation: isolate; }
.matison-course-visual.has-image::before { position: absolute; z-index: -1; inset: 0; border-radius: inherit; content: ""; background: linear-gradient(180deg, rgba(6,26,58,.08), rgba(6,26,58,.92)); }

.matison-course-icon {
	width: 84px;
	height: 84px;
	margin-bottom: auto;
	display: grid;
	place-items: center;
	border-radius: 23px;
	color: var(--course-icon, var(--course-cyan));
	background: rgba(255,255,255,.11);
	backdrop-filter: blur(10px);
}

.matison-course-visual > span { margin-bottom: 9px; color: var(--course-cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.matison-course-visual > strong { max-width: 330px; color: #fff; font: 800 34px/1.14 "Plus Jakarta Sans", Manrope, sans-serif; letter-spacing: -.04em; }

.matison-course-body { padding: 90px 0 120px; }

.matison-course-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	align-items: start;
	gap: 30px;
}

.matison-course-main { display: grid; gap: 25px; }

.matison-course-panel,
.matison-course-enroll-card {
	padding: 38px;
	border: 1px solid var(--course-border);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(20, 57, 93, .055);
}

.matison-course-section-label { color: var(--course-accent, var(--course-blue)); }

.matison-course-panel h2,
.matison-course-enroll-card h2 {
	margin: 12px 0 18px;
	color: var(--course-ink);
	font: 800 clamp(25px, 3vw, 35px)/1.18 "Plus Jakarta Sans", Manrope, sans-serif;
	letter-spacing: -.04em;
}

.matison-course-rich-text,
.matison-course-panel > p,
.matison-course-enroll-card > p {
	color: var(--course-muted);
	font-size: 14px;
	line-height: 1.85;
}

.matison-course-rich-text > *:first-child { margin-top: 0; }
.matison-course-rich-text > *:last-child { margin-bottom: 0; }

.matison-course-check-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.matison-course-check-grid > div {
	padding: 15px;
	display: flex;
	align-items: flex-start;
	gap: 11px;
	border: 1px solid #e4edf6;
	border-radius: 13px;
	background: #f8fbff;
}

.matison-course-check-grid span {
	width: 27px;
	height: 27px;
	flex: 0 0 27px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: var(--course-accent, var(--course-blue));
}

.matison-course-check-grid p { margin: 2px 0 0; color: #425873; font-size: 12px; line-height: 1.55; }

.matison-course-curriculum { display: grid; gap: 9px; }

.matison-course-curriculum > div {
	padding: 15px 17px;
	display: grid;
	grid-template-columns: 42px 1fr auto;
	align-items: center;
	gap: 13px;
	border: 1px solid #e3edf6;
	border-radius: 13px;
	background: #fbfdff;
}

.matison-course-curriculum > div > span {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	color: var(--course-accent, var(--course-blue));
	background: #eaf4ff;
	font-size: 10px;
	font-weight: 800;
}

.matison-course-curriculum small { color: #8b9aab; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.matison-course-curriculum h3 { margin: 3px 0 0; color: var(--course-ink); font-size: 13px; line-height: 1.35; }
.matison-course-curriculum em { color: #7a8ba0; font-size: 10px; font-style: normal; }
.matison-course-empty { padding: 18px; border-radius: 12px; background: #f8fbff; }

.matison-course-two-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.matison-course-two-panels .matison-course-panel { padding: 30px; }
.matison-course-two-panels h2 { font-size: 24px; }
.matison-course-two-panels ul { margin: 0; padding: 0; list-style: none; }
.matison-course-two-panels li { position: relative; margin: 10px 0; padding-left: 19px; color: #52677e; font-size: 12px; line-height: 1.55; }
.matison-course-two-panels li::before { position: absolute; top: .55em; left: 0; width: 6px; height: 6px; border-radius: 50%; content: ""; background: var(--course-accent, var(--course-blue)); }

.matison-course-enroll-card { position: sticky; top: 30px; padding: 30px; }
.matison-course-enroll-icon { width: 58px; height: 58px; margin-bottom: 28px; display: grid; place-items: center; border-radius: 16px; color: var(--course-icon, var(--course-blue)); background: #eaf4ff; }
.matison-course-enroll-card > small { color: var(--course-accent, var(--course-blue)); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.matison-course-enroll-card h2 { font-size: 27px; }
.matison-course-enroll-summary { margin: 25px 0; padding: 4px 0; border-top: 1px solid #e4edf6; border-bottom: 1px solid #e4edf6; }
.matison-course-enroll-summary span { padding: 11px 0; display: flex; justify-content: space-between; gap: 15px; color: #7a8ba0; font-size: 10px; }
.matison-course-enroll-summary strong { max-width: 190px; color: var(--course-ink); text-align: right; }
.matison-course-enroll-card .matison-course-primary { width: 100%; }
.matison-course-login { margin-top: 16px; display: block; color: #60708a; text-align: center; font-size: 11px; font-weight: 700; }

@media (max-width: 960px) {
	.matison-course-hero-grid,
	.matison-course-content-grid { grid-template-columns: 1fr; }
	.matison-course-hero-grid { gap: 45px; }
	.matison-course-visual { min-height: 380px; }
	.matison-course-enroll-card { position: static; }
}

@media (max-width: 640px) {
	.matison-course-container { width: min(100% - 26px, 1180px); }
	.matison-course-hero { padding: 75px 0 58px; }
	.matison-course-back { margin-bottom: 30px; }
	.matison-course-hero h1 { font-size: 42px; }
	.matison-course-hero-copy > p { font-size: 14px; }
	.matison-course-facts { display: grid; grid-template-columns: 1fr; }
	.matison-course-visual { min-height: 315px; padding: 26px; }
	.matison-course-body { padding: 55px 0 75px; }
	.matison-course-panel,
	.matison-course-enroll-card { padding: 25px; border-radius: 17px; }
	.matison-course-check-grid,
	.matison-course-two-panels { grid-template-columns: 1fr; }
	.matison-course-curriculum > div { grid-template-columns: 42px 1fr; }
	.matison-course-curriculum em { grid-column: 2; }
}
