/* ==========================================================================
   Homepage section blocks (CC_ATP_Home_Blocks) - ported from sample_website/index.html.
   Self-contained under .cc-hs so block previews render the same inside the editor, where
   cc-theme's stylesheet isn't loaded; every token falls back to its design-system.md value.
   ========================================================================== */

.cc-hs {
	--hs-blue: var(--kk-blue, #1115e4);
	--hs-teal: var(--kk-teal, #00cccc);
	--hs-aqua: var(--kk-aqua, #00ffff);
	--hs-red: var(--kk-red, #eb1b13);
	--hs-amber: var(--kk-amber, #ffb020);
	--hs-dark: var(--kk-dark, #0a0a1a);
	--hs-gray-50: var(--kk-gray-50, #f7f8fa);
	--hs-gray-100: var(--kk-gray-100, #eef0f4);
	--hs-gray-500: var(--kk-gray-500, #8a8f9c);
	--hs-gray-700: var(--kk-gray-700, #4a4e5a);
	--hs-gray-900: var(--kk-gray-900, #1a1a1a);
	--hs-gradient: var(--kk-gradient, linear-gradient(135deg, #0a0a1a 0%, #1115e4 45%, #00cccc 80%, #00ffff 100%));
	--hs-font-head: var(--kk-font-head, 'Maven Pro', sans-serif);
	--hs-font-body: var(--kk-font-body, 'Fira Sans', sans-serif);
	--hs-wedge: 72px;

	box-sizing: border-box;
	padding: 80px 0;
	font-family: var(--hs-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--hs-gray-900);
}

.cc-hs *, .cc-hs *::before, .cc-hs *::after {
	box-sizing: border-box;
}

.cc-hs h1, .cc-hs h2, .cc-hs h3, .cc-hs h4 {
	font-family: var(--hs-font-head);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
	color: inherit;
}

.cc-hs h2 { font-size: 32px; }
.cc-hs h3 { font-size: 22px; }
.cc-hs h4 { font-size: 18px; font-family: var(--hs-font-body); }
.cc-hs p { margin: 0 0 16px; }
.cc-hs img { max-width: 100%; height: auto; display: block; }

.cc-hs__wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
	position: relative;
}

/* ---------- Backgrounds ---------- */
.cc-hs--white { background: #fff; }
.cc-hs--gray { background: var(--hs-gray-50); }
.cc-hs--blue { background: var(--hs-blue); color: #fff; }
.cc-hs--dark { background: var(--hs-dark); color: #fff; }
.cc-hs--gradient { background: var(--hs-gradient); color: #fff; }
.cc-hs--compact { padding: 56px 0; }

/* ---------- Diagonal edges ----------
   Same technique as the sample site: complementary clip-paths on neighbouring sections, the
   lower one pulled up by the wedge height, so each keeps its own real background up to the cut. */
.cc-hs--cut-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hs-wedge)), 0 100%);
	padding-bottom: calc(80px + var(--hs-wedge) / 2);
}
.cc-hs--cut-top {
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 var(--hs-wedge));
	margin-top: calc(-1 * var(--hs-wedge));
	padding-top: calc(80px + var(--hs-wedge));
	position: relative;
}
.cc-hs--cut-both {
	clip-path: polygon(0 var(--hs-wedge), 100% 0, 100% calc(100% - var(--hs-wedge)), 0 100%);
	margin-top: calc(-1 * var(--hs-wedge));
	padding-top: calc(80px + var(--hs-wedge));
	padding-bottom: calc(80px + var(--hs-wedge) / 2);
	position: relative;
}
/* the editor stacks blocks inside its own wrappers - interlocking would overlap the block toolbar */
.cc-hs--preview.cc-hs--cut-top, .cc-hs--preview.cc-hs--cut-both { margin-top: 0; }

/* ---------- Typography ---------- */
.cc-hs__eyebrow {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hs-blue);
	margin-bottom: 12px;
}
.cc-hs--gradient .cc-hs__eyebrow,
.cc-hs--blue .cc-hs__eyebrow,
.cc-hs--dark .cc-hs__eyebrow { color: var(--hs-aqua); }

.cc-hs__display {
	font-weight: 800 !important;
	font-size: clamp(36px, 5vw, 60px) !important;
	line-height: 1.12 !important;
	letter-spacing: -0.01em;
}

.cc-hs__lead {
	font-size: 19px;
	line-height: 1.6;
	color: var(--hs-gray-700);
	max-width: 640px;
}
.cc-hs--gradient .cc-hs__lead,
.cc-hs--blue .cc-hs__lead,
.cc-hs--dark .cc-hs__lead { color: rgba(255, 255, 255, 0.86); }

.cc-hs__head { max-width: 720px; margin-bottom: 32px; }
.cc-hs__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.cc-hs__head--center .cc-hs__lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.cc-hs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }
.cc-hs__actions--center { justify-content: center; }

.cc-hs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 24px;
	font-family: var(--hs-font-body);
	font-weight: 500;
	font-size: 16px;
	border-radius: 8px;
	border: 2px solid transparent;
	text-decoration: none !important;
	white-space: nowrap;
	transition: transform 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}
.cc-hs__btn:active { transform: scale(0.98); }
.cc-hs__btn:focus-visible { outline: 2px solid var(--kk-sky, #0d86ff); outline-offset: 2px; }

.cc-hs__btn--primary { background: var(--hs-blue); color: #fff !important; }
.cc-hs__btn--primary:hover { background: #0d0fbd; }
.cc-hs__btn--secondary { background: transparent; color: var(--hs-blue) !important; border-color: var(--hs-blue); }
.cc-hs__btn--secondary:hover { background: rgba(17, 21, 228, 0.06); }
.cc-hs__btn--ghost { background: rgba(10, 10, 26, 0.2); color: #fff !important; border-color: #fff; }
.cc-hs__btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.cc-hs__btn--white {
	height: 56px;
	padding: 0 32px;
	font-size: 18px;
	font-weight: 700;
	border-radius: 999px;
}
.cc-hs__btn--white { background: #fff; color: var(--hs-blue) !important; }
.cc-hs__btn--white:hover { background: var(--hs-gray-50); }
/* Gradient pill - exactly the newsletter button (cc-theme .thm-btn--gradient / .btn-cta):
   same size and type, no shadow, hover = crossfade to the reversed gradient. */
.cc-hs__btn--cta {
	position: relative;
	z-index: 0;
	overflow: hidden;
	height: 52px;
	padding: 0 26px;
	font-size: 16px;
	font-weight: 500;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--hs-blue) 0%, var(--hs-teal) 100%);
	color: #fff !important;
}
.cc-hs__btn--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(270deg, var(--hs-blue) 0%, var(--hs-teal) 100%);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.cc-hs__btn--cta:hover::before,
.cc-hs__btn--cta:focus-visible::before { opacity: 1; }

/* ---------- Grids ---------- */
.cc-hs__grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; align-items: center; }
.cc-hs__grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* Numbers: up to 4 per row, always centred whatever the count (a fixed 4-column grid left-aligned 3 items). */
.cc-hs__grid-4 { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.cc-hs__grid-4 > * { flex: 0 1 calc((100% - 3 * 24px) / 4); }

/* ---------- Hero ---------- */
.cc-hs--cc-home-hero { padding-top: 120px; }
.cc-hs__hero-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 32px;
	column-gap: 56px;
	row-gap: 0;
	align-items: stretch;
}
.cc-hs__hero-grid h1 { color: #fff; }
/* Eyebrow sits above both columns, so the illustration card starts level with the heading
   and ends with the checklist (same height as the text column). */
.cc-hs__hero-eyebrow { grid-column: 1 / -1; }
.cc-hs__hero-illu {
	position: relative;
	min-height: 360px;
	background: #fff;
	border-radius: 20px;
}
.cc-hs__hero-illu img {
	position: absolute;
	inset: 20px;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	object-fit: contain;
}
.cc-hs__checklist {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}
.cc-hs__checklist li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.cc-hs__checklist i { color: var(--hs-aqua); }
.cc-hs__hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 56px; }
.cc-hs__hero-stats .cc-hs__stat-num { font-family: var(--hs-font-head); font-weight: 800; font-size: 32px; color: #fff; }
.cc-hs__hero-stats .cc-hs__stat-label { font-size: 14px; color: rgba(255, 255, 255, 0.72); }

/* ---------- Feature cards ---------- */
.cc-hs__feature {
	background: #fff;
	border: 1px solid var(--hs-gray-100);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(10, 10, 26, 0.06);
}
.cc-hs__feature-icon {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: rgba(17, 21, 228, 0.08);
	color: var(--hs-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 16px;
}
.cc-hs__feature p { margin-bottom: 0; color: var(--hs-gray-700); }
.cc-hs__note { display: block; margin-top: 8px; font-size: 13px; color: var(--hs-gray-500); }

/* ---------- Numbers ---------- */
.cc-hs__stat-card { text-align: center; }
.cc-hs__stat-card .cc-hs__stat-num {
	font-family: var(--hs-font-head);
	font-weight: 800;
	font-size: clamp(36px, 4vw, 52px);
	line-height: 1;
	margin-bottom: 8px;
	color: #fff;
}
.cc-hs__stat-card .cc-hs__stat-label { color: rgba(255, 255, 255, 0.78); font-size: 15px; }

/* ---------- Steps ---------- */
.cc-hs__steps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cc-hs__steps-illu img { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.cc-hs__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 32px; }
.cc-hs__step { display: flex; gap: 16px; }
.cc-hs__step-num {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	background: var(--hs-blue);
	color: #fff;
	font-family: var(--hs-font-head);
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cc-hs__step h4 { margin-bottom: 4px; }
.cc-hs__step p { margin: 0; color: var(--hs-gray-700); }

/* ---------- Callout ---------- */
.cc-hs__callout {
	--callout: var(--hs-blue);
	--callout-bg: rgba(17, 21, 228, 0.06);
	border-left: 4px solid var(--callout);
	background: var(--callout-bg);
	border-radius: 0 8px 8px 0;
	padding: 24px;
	display: flex;
	gap: 16px;
}
.cc-hs__callout--danger { --callout: var(--hs-red); --callout-bg: rgba(235, 27, 19, 0.06); }
.cc-hs__callout--warn { --callout: var(--hs-amber); --callout-bg: rgba(255, 176, 32, 0.08); }
.cc-hs__callout--tip { --callout: var(--hs-teal); --callout-bg: rgba(0, 204, 204, 0.06); }
.cc-hs__callout > i { color: var(--callout); font-size: 20px; margin-top: 2px; }
.cc-hs__callout h4 { margin-bottom: 4px; }
.cc-hs__callout p { margin: 0; }

/* ---------- News carousel ---------- */
.cc-hs__carousel {
	--per-view: 3;
	--gap: 24px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}
.cc-hs__carousel-track {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	flex: 1;
	min-width: 0;
	display: flex;
	gap: var(--gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.cc-hs__carousel-track::-webkit-scrollbar { display: none; }
.cc-hs__news {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
	scroll-snap-align: start;
	display: flex;
}
.cc-hs__news-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	/* Dark glass, not light: on the aqua end of the gradient white text needs a dark backing. */
	background: rgba(10, 10, 26, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	overflow: hidden;
	color: #fff !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cc-hs__news-link:hover {
	background: rgba(10, 10, 26, 0.45);
	border-color: rgba(0, 255, 255, 0.5);
	transform: translateY(-2px);
}
.cc-hs__news-link:focus-visible { outline: 2px solid var(--hs-aqua); outline-offset: 2px; }
.cc-hs__news-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cc-hs__news-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.cc-hs__news-body h3 { font-size: 19px; color: #fff; margin-bottom: 8px; }
.cc-hs__news-body p { font-size: 15px; color: rgba(255, 255, 255, 0.8); flex: 1; }
.cc-hs__news-more { font-size: 14px; font-weight: 700; color: var(--hs-aqua); margin-top: auto; }
.cc-hs__news-more i { font-size: 12px; margin-left: 4px; }

.cc-hs__carousel-btn {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}
.cc-hs__carousel-btn:hover { background: rgba(255, 255, 255, 0.14); }
.cc-hs__carousel-btn:focus-visible { outline: 2px solid var(--hs-aqua); outline-offset: 2px; }
.cc-hs__carousel-btn:disabled { opacity: 0.3; cursor: default; background: transparent; }
.cc-hs__carousel.is-static .cc-hs__carousel-btn { display: none; }

/* News cards on a white background: solid cards with dark text instead of translucent ones. */
.cc-hs--white .cc-hs__news-link {
	background: #fff;
	border-color: var(--hs-gray-100);
	color: var(--hs-gray-900) !important;
	box-shadow: 0 2px 8px rgba(10, 10, 26, 0.06);
}
.cc-hs--white .cc-hs__news-link:hover { background: #fff; border-color: var(--hs-blue); }
.cc-hs--white .cc-hs__news-body h3 { color: var(--hs-gray-900); }
.cc-hs--white .cc-hs__news-body p { color: var(--hs-gray-700); }
.cc-hs--white .cc-hs__news-more { color: var(--hs-blue); }
.cc-hs--white .cc-hs__carousel-btn { border-color: var(--hs-gray-300, #d0d3dc); color: var(--hs-gray-900); }
.cc-hs--white .cc-hs__carousel-btn:hover { background: var(--hs-gray-50); }

/* ---------- Logo strip ---------- */
.cc-hs__logos-caption { text-align: center; color: var(--hs-gray-500); font-size: 14px; margin-bottom: 32px !important; }
.cc-hs__logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	opacity: 0.7;
}
.cc-hs__logos span { font-family: var(--hs-font-head); font-weight: 800; font-size: 18px; color: var(--hs-gray-500); letter-spacing: -0.02em; }
.cc-hs__logos img { max-height: 40px; width: auto; filter: grayscale(1); }

/* ---------- Testimonials ---------- */
.cc-hs__testimonial {
	margin: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 24px;
	display: flex;
	flex-direction: column;
}
.cc-hs__quote-mark { font-family: var(--hs-font-head); font-size: 48px; color: var(--hs-aqua); line-height: 1; margin-bottom: 8px; }
.cc-hs__testimonial blockquote {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	font-size: 17px;
	font-style: normal;
	color: rgba(255, 255, 255, 0.92);
	flex: 1;
}
.cc-hs__person { display: flex; align-items: center; gap: 12px; }
.cc-hs__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--hs-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--hs-font-head);
	font-weight: 700;
}
.cc-hs__person-name { display: block; font-weight: 700; font-size: 14px; color: #fff; }
.cc-hs__person-role { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); }

/* ---------- CTA ---------- */
.cc-hs--cta { padding: 88px 0; }
.cc-hs__cta-form { max-width: 520px; margin: 32px auto 0; }

/* ---------- Page hero (About: Hero) ----------
   Centred text runs across the whole gradient, including its bright KK Aqua end where white text
   loses contrast - a Near-black veil over the gradient keeps it readable everywhere. */
.cc-hs--page-hero {
	background: linear-gradient(rgba(10, 10, 26, 0.45), rgba(10, 10, 26, 0.45)), var(--hs-gradient);
	padding-top: 120px;
}
.cc-hs__page-hero { max-width: 860px; text-align: center; }
.cc-hs__page-hero h1 {
	color: #fff;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.15;
	text-shadow: 0 2px 16px rgba(10, 10, 26, 0.35);
}
.cc-hs__page-hero .cc-hs__lead {
	color: #fff;
	margin: 0 auto;
	text-shadow: 0 1px 10px rgba(10, 10, 26, 0.35);
}
.cc-hs--page-hero .cc-hs__eyebrow { color: var(--hs-aqua); }

/* ---------- Mission ---------- */
.cc-hs__text { color: var(--hs-gray-700); }
/* Eyebrow above both columns; the illustration fills (cover-crops into) a box running from the
   heading to the button, i.e. the height of the text column. */
.cc-hs__mission-grid { align-items: stretch; row-gap: 0; }
.cc-hs__mission-eyebrow { grid-column: 1 / -1; }
.cc-hs__mission-illu { position: relative; min-height: 320px; }
.cc-hs__mission-illu img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
@media (max-width: 720px) {
	.cc-hs__mission-illu { min-height: 0; aspect-ratio: 3 / 2; margin-top: 32px; }
}
.cc-hs__grid-2--top { align-items: start; }

/* ---------- Values (on KK Blue) ---------- */
.cc-hs__value {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 24px;
}
.cc-hs__value-icon {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin-bottom: 16px;
}
.cc-hs__value h4 { color: #fff; }
.cc-hs__value p { color: rgba(255, 255, 255, 0.8); margin: 0; }

/* ---------- Timeline ---------- */
.cc-hs__timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--hs-gray-100);
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.cc-hs__timeline-item { position: relative; }
.cc-hs__timeline-item::before {
	content: "";
	position: absolute;
	left: -40px;
	top: 4px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--hs-blue);
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px var(--hs-blue);
}
.cc-hs__timeline-year { font-family: var(--hs-font-head); font-weight: 800; color: var(--hs-blue); font-size: 14px; margin-bottom: 2px; }
.cc-hs__timeline-item h4 { margin-bottom: 4px; }
.cc-hs__timeline-item p { color: var(--hs-gray-700); margin: 0; }

/* ---------- Team (on KK Blue) ---------- */
.cc-hs__member { text-align: center; }
.cc-hs__member-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	margin: 0 auto 16px;
	object-fit: cover;
	display: block;
}
.cc-hs__member-photo--initials {
	background: var(--hs-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--hs-font-head);
	font-weight: 800;
	font-size: 28px;
}
.cc-hs__member h4 { color: #fff; margin-bottom: 2px; }
.cc-hs__member-role { font-size: 14px; color: var(--hs-aqua); font-weight: 500; margin-bottom: 8px; }
.cc-hs__member p { font-size: 14px; color: rgba(255, 255, 255, 0.75); }

/* ---------- Training: intro, packages, featured, add-ons, FAQ ---------- */
/* Intro: left-aligned copy (lead + body, ~75ch lines) beside an illustration and a pull-quote. */
.cc-hs__intro { max-width: 820px; }
.cc-hs__intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; }
.cc-hs__intro-body { max-width: 68ch; }
.cc-hs__intro-body .cc-hs__lead { font-size: 21px; margin-bottom: 24px; }
.cc-hs__intro-body .cc-hs__text { font-size: 17px; line-height: 1.7; }
.cc-hs__intro-illu {
	width: 100%;
	max-width: 280px;
	margin: 0 auto 24px;
	/* the square scene illustrations carry ~16% empty space above and below the drawing -
	   a 4:3 frame (centred crop) removes only that, never the drawing itself */
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}
/* Training intro sits right under the page hero: the standard 80px top padding (+ wedge) left a
   big empty band between the hero's cut and the content. */
.cc-hs--cc-training-intro.cc-hs--cut-top,
.cc-hs--cc-training-intro.cc-hs--cut-both { padding-top: calc(24px + var(--hs-wedge)); }
.cc-hs__pull-quote {
	position: relative;
	margin: 0;
	padding: 28px 0 0 0;
	border: 0;
	font-family: var(--hs-font-head);
	font-weight: 700;
	font-style: normal;
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.3;
	color: var(--hs-blue);
}
.cc-hs__pull-quote::before {
	content: "\201C";
	position: absolute;
	top: -24px;
	left: -6px;
	font-size: 96px;
	line-height: 1;
	color: var(--hs-teal);
}
@media (max-width: 900px) {
	.cc-hs__intro-grid { grid-template-columns: 1fr; gap: 40px; }
}
.cc-hs__small-print { text-align: center; color: var(--hs-gray-500); font-size: 14px; margin-top: 24px; }
.cc-hs__checklist--stacked { flex-direction: column; gap: 12px; }
.cc-hs__checklist--stacked li { align-items: flex-start; font-size: 16px; color: #fff; }
.cc-hs__checklist--stacked i { margin-top: 4px; }
.cc-hs__price { margin-top: 16px !important; font-weight: 700; color: var(--hs-blue) !important; }
.cc-hs__faq-wrap { max-width: 800px; }
.cc-hs__faq { background: #fff; border-radius: 12px; padding: 8px 32px; color: var(--hs-gray-900); }
.cc-hs__faq-item { border-bottom: 1px solid var(--hs-gray-100); padding: 24px 0; }
.cc-hs__faq-item:last-child { border-bottom: 0; }
.cc-hs__faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-weight: 700;
	font-size: 17px;
}
.cc-hs__faq-item summary::-webkit-details-marker { display: none; }
.cc-hs__faq-item summary i { color: var(--hs-blue); transition: transform 0.2s ease; flex: none; }
.cc-hs__faq-item[open] summary i { transform: rotate(45deg); }
.cc-hs__faq-item p { margin: 12px 0 0; color: var(--hs-gray-700); }
@media (max-width: 720px) {
	.cc-hs__faq { padding: 4px 16px; }
}

/* ---------- Contact: form card + contact details ---------- */
.cc-hs__contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cc-hs__form-card {
	background: #fff;
	border: 1px solid var(--hs-gray-100);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(10, 10, 26, 0.06);
	padding: 40px;
}
.cc-hs__form-card h2 { margin-bottom: 8px; }
.cc-hs__form-card .cc-hs__text { margin-bottom: 32px; }
.cc-hs__contact-grid > div > h2 { margin-bottom: 24px; }
.cc-hs__contact-item { display: flex; gap: 16px; margin-bottom: 24px; }
.cc-hs__contact-icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: rgba(17, 21, 228, 0.08);
	color: var(--hs-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.cc-hs__contact-item h4 { margin-bottom: 2px; }
.cc-hs__contact-item p { margin: 0; color: var(--hs-gray-700); }
.cc-hs__contact-item a { color: var(--hs-blue); text-decoration: none; }
.cc-hs__contact-grid .cc-hs__callout { margin-top: 32px; }
@media (max-width: 900px) {
	.cc-hs__contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
	.cc-hs__form-card { padding: 24px 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.cc-hs__hero-grid, .cc-hs__steps-grid { grid-template-columns: 1fr; }
	.cc-hs__hero-illu { display: none; }
	.cc-hs__steps-grid { gap: 32px; }
	.cc-hs__steps-illu img { max-width: 220px; }
	.cc-hs__grid-3 { grid-template-columns: repeat(2, 1fr); }
	.cc-hs__grid-4 > * { flex-basis: calc((100% - 24px) / 2); }
	.cc-hs__carousel { --per-view: 2; }
}

@media (max-width: 720px) {
	.cc-hs { --hs-wedge: 36px; padding: 48px 0; }
	.cc-hs--cut-top, .cc-hs--cut-both { padding-top: calc(48px + var(--hs-wedge)); }
	.cc-hs--cut-bottom, .cc-hs--cut-both { padding-bottom: calc(48px + var(--hs-wedge) / 2); }
	.cc-hs--cc-home-hero { padding-top: 72px; }
	.cc-hs__wrap { padding: 0 16px; }
	.cc-hs h2 { font-size: 26px; }
	.cc-hs__lead { font-size: 17px; }
	.cc-hs__grid-2, .cc-hs__grid-3 { grid-template-columns: 1fr; }
	.cc-hs__grid-4 > * { flex-basis: 100%; }
	.cc-hs__carousel { --per-view: 1; --gap: 16px; gap: 8px; }
	.cc-hs__carousel-btn { width: 36px; height: 36px; font-size: 14px; }
	.cc-hs__btn { white-space: normal; text-align: center; }
	.cc-hs__actions { justify-content: center; }
}

/* ---------- Client portal hero (CC_Mentee_Portal_Hero): level chip + "Did you know?" card ---------- */
.cc-portal-hero__level {
	display: inline-block;
	margin: 20px 0 0;
	padding: 6px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-family: var(--kk-font-head);
	font-weight: 700;
	font-size: 0.9rem;
}
.cc-portal-tip {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 720px;
	margin: 32px auto 0;
	padding: 20px 24px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.25);
	text-align: left;
	color: #fff;
}
.cc-portal-tip__icon {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kk-green, #13eb60);
	color: var(--kk-blue, #1115e4);
	font-size: 18px;
}
.cc-portal-tip__body { flex: 1; min-width: 0; }
/* .cc-portal-tip prefix: outranks .cc-hs h2 (26-32px headline size) - this is a small eyebrow label */
.cc-portal-tip .cc-portal-tip__title {
	margin: 0 0 4px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.cc-portal-tip .cc-portal-tip__text { margin: 0; color: #fff; font-size: 1rem; line-height: 1.5; }
/* look: .btn .btn-ghost .btn-sm (design-system.md §5); only placement here */
.cc-portal-tip__next {
	flex: none;
	align-self: center;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.cc-portal-tip { flex-wrap: wrap; padding: 16px; }
	/* flex:1's 0 basis let the text shrink to one word per line beside the button - take the
	   whole row next to the icon instead, so the button wraps below it */
	.cc-portal-tip__body { flex-basis: calc(100% - 56px); }
	.cc-portal-tip__next { margin-left: 56px; align-self: flex-start; }
}

@media (max-width: 900px) {
	.cc-hs--cc-training-intro.cc-hs--cut-top,
	.cc-hs--cc-training-intro.cc-hs--cut-both { padding-top: calc(24px + var(--hs-wedge)); }
}

/* Two neighbouring sections with the same background: the diagonal cut between them is
   invisible, so it is dropped there - no wedge clip, no overlap (the lower section's negative
   margin used to cover the last lines of the upper one) and a normal gap instead of the big
   empty band. Each section keeps its cut on its other edge. */
:is(.cc-hs--white:has(+ .cc-hs--white), .cc-hs--gray:has(+ .cc-hs--gray), .cc-hs--blue:has(+ .cc-hs--blue), .cc-hs--dark:has(+ .cc-hs--dark)) {
	padding-bottom: 40px;
}
:is(.cc-hs--white:has(+ .cc-hs--white), .cc-hs--gray:has(+ .cc-hs--gray), .cc-hs--blue:has(+ .cc-hs--blue), .cc-hs--dark:has(+ .cc-hs--dark)).cc-hs--cut-bottom { clip-path: none; }
:is(.cc-hs--white:has(+ .cc-hs--white), .cc-hs--gray:has(+ .cc-hs--gray), .cc-hs--blue:has(+ .cc-hs--blue), .cc-hs--dark:has(+ .cc-hs--dark)).cc-hs--cut-both {
	clip-path: polygon(0 var(--hs-wedge), 100% 0, 100% 100%, 0 100%);
}
:is(.cc-hs--white + .cc-hs--white, .cc-hs--gray + .cc-hs--gray, .cc-hs--blue + .cc-hs--blue, .cc-hs--dark + .cc-hs--dark) {
	margin-top: 0;
	padding-top: 40px;
}
:is(.cc-hs--white + .cc-hs--white, .cc-hs--gray + .cc-hs--gray, .cc-hs--blue + .cc-hs--blue, .cc-hs--dark + .cc-hs--dark).cc-hs--cut-top { clip-path: none; }
:is(.cc-hs--white + .cc-hs--white, .cc-hs--gray + .cc-hs--gray, .cc-hs--blue + .cc-hs--blue, .cc-hs--dark + .cc-hs--dark).cc-hs--cut-both {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--hs-wedge)), 0 100%);
}

/* ==========================================================================
   Background choice per section (Kiber Kontroll > <page> > <section> > Background).
   Components were designed for one background; these keep them readable on the other:
   ".cc-hs--on-dark" = KK Blue / Near-black / Kiber Gradient, "light" = White / Light gray.
   White cards (feature, FAQ, form card) always keep their own dark text.
   ========================================================================== */

/* White cards: dark text whatever the section colour. */
.cc-hs__feature,
.cc-hs__form-card { color: var(--hs-gray-900); }

/* --- on a dark section --- */
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) :is(.cc-hs__text, .cc-hs__step p, .cc-hs__timeline-item p, .cc-hs__contact-item p, .cc-hs__small-print, .cc-hs__logos-caption) { color: rgba(255, 255, 255, 0.82); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__form-card .cc-hs__text { color: var(--hs-gray-700); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) :is(.cc-hs__timeline-year, .cc-hs__contact-item a, .cc-hs__pull-quote) { color: var(--hs-aqua); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__logos span { color: rgba(255, 255, 255, 0.7); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__logos img { filter: grayscale(1) brightness(0) invert(1); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__step-num { background: #fff; color: var(--hs-blue); }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__timeline-item::before { background: var(--hs-aqua); box-shadow: 0 0 0 2px var(--hs-aqua); border-color: transparent; }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__contact-icon { background: rgba(255, 255, 255, 0.14); color: #fff; }
:is(.cc-hs--blue, .cc-hs--dark, .cc-hs--gradient) .cc-hs__callout { --callout-bg: rgba(255, 255, 255, 0.08); }

/* --- on a light section --- */
:is(.cc-hs--white, .cc-hs--gray) :is(.cc-hs__value, .cc-hs__testimonial) {
	background: var(--hs-gray-50);
	border-color: var(--hs-gray-100);
}
.cc-hs--gray :is(.cc-hs__value, .cc-hs__testimonial) { background: #fff; }
:is(.cc-hs--white, .cc-hs--gray) :is(.cc-hs__value h4, .cc-hs__member h4, .cc-hs__person-name, .cc-hs__checklist li) { color: var(--hs-gray-900); }
:is(.cc-hs--white, .cc-hs--gray) :is(.cc-hs__value p, .cc-hs__member p, .cc-hs__testimonial blockquote, .cc-hs__stat-card .cc-hs__stat-label) { color: var(--hs-gray-700); }
:is(.cc-hs--white, .cc-hs--gray) .cc-hs__person-role { color: var(--hs-gray-500); }
:is(.cc-hs--white, .cc-hs--gray) :is(.cc-hs__stat-card .cc-hs__stat-num, .cc-hs__member-role) { color: var(--hs-blue); }
:is(.cc-hs--white, .cc-hs--gray) .cc-hs__value-icon { background: rgba(17, 21, 228, 0.08); color: var(--hs-blue); }
:is(.cc-hs--white, .cc-hs--gray) .cc-hs__quote-mark { color: var(--hs-teal); }
.cc-hs--white .cc-hs__faq { border: 1px solid var(--hs-gray-100); box-shadow: 0 2px 8px rgba(10, 10, 26, 0.06); }
.cc-hs--gray .cc-hs__news-link { background: #fff; border-color: var(--hs-gray-100); }
.cc-hs--gray .cc-hs__news-body h3 { color: var(--hs-gray-900); }
.cc-hs--gray .cc-hs__news-body p { color: var(--hs-gray-700); }
.cc-hs--gray .cc-hs__news-more { color: var(--hs-blue); }
.cc-hs--gray .cc-hs__carousel-btn { border-color: var(--hs-gray-300, #d0d3dc); color: var(--hs-gray-900); }