/* CommunityLab · Landing of the free assessment built with Divi 5 modules.
   Divi sections carry the "clcm-landing" class plus one role class (clcm-hero, clcm-notice, clcm-band, clcm-sec);
   modules carry clcm-* classes. This file provides the approved design as DEFAULTS:
   typography rules use :where() (zero specificity) so any font, size or color set in the Divi builder wins. */

.clcm-landing,
.clcm-app {
	--clcm-ink: #1c3144;
	--clcm-navy: #173b5c;
	--clcm-muted: #5a6a79;
	--clcm-line: #e2e8ee;
	--clcm-band: #f0f4f6;
	--clcm-green: #2f8f46;
	--clcm-green-d: #236f37;
	--clcm-orange-d: #d9701f;
	font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}
:where(.clcm-landing) :is(h1, h2, h3, h4, h5, h6) {
	/* Inherit Figtree from the section instead of the theme heading font; Divi module fonts still win. */
	font-family: inherit;
}
:where(.clcm-landing .et_pb_module) p { padding-bottom: 0; }
.clcm-landing .clcm-icon { display: block; flex-shrink: 0; }

/* Layout: full-width sections, 1180px content column */
.clcm-landing.et_pb_section,
.clcm-app.et_pb_section { padding: 0; }
/* .et_pb_section prefix: beats Divi's ".et_pb_row:not([class*=et_flex_column])" width whatever the load order (preview loads it last). */
.et_pb_section.clcm-landing .et_pb_row,
.et_pb_section.clcm-app .et_pb_row {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 28px;
	box-sizing: border-box;
}
.et_pb_section.clcm-app .et_pb_row { max-width: none; padding: 0; }
.et_pb_section.clcm-landing,
.et_pb_section.clcm-app { row-gap: 0 !important; }
.et_pb_section.clcm-landing .et_pb_row,
.et_pb_section.clcm-app .et_pb_row { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0; margin-bottom: 0; }
.clcm-landing .et_pb_module { margin-bottom: 0; }

/* The landing hides while the assessment runs (see assessment.js). */
.clcm-flow-active .clcm-landing { display: none !important; }

/* ---------- Hero ---------- */
.clcm-landing.clcm-hero {
	position: relative;
	overflow: hidden;
	color: #fff;
	background-color: #0f3324;
	background-image:
		linear-gradient(90deg, rgba(7, 30, 21, .94) 0%, rgba(9, 38, 26, .82) 42%, rgba(9, 38, 26, .35) 75%, rgba(9, 38, 26, .15) 100%),
		radial-gradient(ellipse 70% 90% at 78% 35%, #4f8a58 0%, #2a5e3f 38%, #143b2a 70%, #0b281c 100%);
	background-size: cover;
	background-position: center right;
	padding: 72px 0 132px;
}
.clcm-landing.clcm-hero::after {
	/* Wave into the notice band */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 120px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,78 C320,122 720,112 1010,46 C1170,10 1310,0 1440,12 L1440,120 Z' fill='%23eef5f0'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%;
	pointer-events: none;
	z-index: 0;
}
.clcm-landing.clcm-hero .et_pb_row { position: relative; z-index: 1; align-items: center; }
:where(.clcm-landing .clcm-hero-title) h1 {
	font-size: 56px;
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -1.6px;
	color: #fff;
	margin: 0 0 22px;
	padding: 0;
	text-wrap: balance;
}
:where(.clcm-landing .clcm-hero-title) h1 em { font-style: normal; color: #a9de7c; }
:where(.clcm-landing .clcm-hero-lead) p {
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
	max-width: 540px;
	margin: 0 0 30px;
	text-wrap: pretty;
}
.clcm-landing .clcm-hero-meta ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 40px;
	margin: 0 0 36px;
	padding: 0;
	list-style: none;
}
:where(.clcm-landing .clcm-hero-meta) li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	padding: 0;
}
.clcm-landing .clcm-hero-meta li::before { display: none; }

/* Buttons: styled in the Divi builder (same outline style as the home page); no overrides here. */

.clcm-landing .clcm-hero-art { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin-left: auto; }
.clcm-landing .clcm-hero-art svg { width: 100%; height: 100%; display: block; }
.clcm-landing .clcm-hero-sprout { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9fdc78; }
.clcm-landing .clcm-hero-sprout svg { width: 42%; height: 42%; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); }

/* Handwritten phrase sits on the wave, bottom right of the hero */
.clcm-landing.clcm-hero .clcm-hand-row,
.clcm-landing.clcm-hero .clcm-hand-row .et_pb_column { position: static; }
.clcm-landing .clcm-hand {
	position: absolute;
	right: 7%;
	bottom: 12px;
	z-index: 2;
	transform: rotate(-8deg);
	text-align: center;
}
:where(.clcm-landing .clcm-hand) p {
	font-family: 'Caveat', cursive;
	font-size: 34px;
	font-weight: 700;
	line-height: .95;
	color: #1f6b3a;
}

/* ---------- Notice band ---------- */
.clcm-landing.clcm-notice { background: #eef5f0; padding: 6px 0 36px; }
.clcm-landing .clcm-notice-text .et_pb_text_inner { display: flex; gap: 14px; align-items: center; }
.clcm-landing .clcm-notice-text .et_pb_text_inner::before {
	content: '';
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #dcebe0 url("../icons/cycle.svg") center / 20px no-repeat;
}
:where(.clcm-landing .clcm-notice-text) p { font-size: 14.5px; line-height: 1.5; color: #4a5d55; max-width: 620px; margin: 0; }

/* ---------- Section headings ---------- */
:where(.clcm-landing .clcm-heading) .clcm-eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--clcm-orange-d);
	margin: 0;
}
:where(.clcm-landing .clcm-heading) h2 {
	font-size: 30px;
	font-weight: 800;
	color: var(--clcm-navy);
	letter-spacing: -.5px;
	line-height: 1.15;
	margin: 6px 0 22px;
	padding: 0;
	text-wrap: balance;
}

/* ---------- Dimensions ---------- */
.clcm-landing.clcm-band { background: var(--clcm-band); padding: 44px 0 48px; }
.clcm-landing .clcm-dimensions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.clcm-landing .clcm-card {
	background: #fff;
	border: 1px solid var(--clcm-line);
	border-radius: 12px;
	padding: 18px 20px;
	display: flex;
	gap: 18px;
	align-items: flex-start;
	box-shadow: 0 1px 2px rgba(20, 40, 60, .04);
}
.clcm-landing .clcm-card-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #eef3f5;
	color: var(--clcm-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.clcm-landing .clcm-card h3 { font-size: 16.5px; font-weight: 700; color: var(--clcm-navy); margin: 0 0 4px; padding: 0; line-height: 1.3; }
.clcm-landing .clcm-card p { font-size: 14.5px; color: var(--clcm-muted); line-height: 1.5; margin: 0; text-wrap: pretty; }

/* ---------- Info / results cards (Divi Blurb modules with clcm-blurb) ---------- */
.clcm-landing.clcm-sec { background: #fbfcfd; padding: 44px 0 56px; }
.et_pb_section.clcm-landing .clcm-cards-row { margin-bottom: 44px; }
.et_pb_section.clcm-landing .clcm-cards-row.clcm-cards-tight { margin-bottom: 16px; }
.clcm-landing .clcm-blurb {
	height: 100%;
	background: #fff;
	border: 1px solid var(--clcm-line);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(20, 40, 60, .04);
	box-sizing: border-box;
}
.clcm-landing .clcm-blurb .et_pb_blurb_content {
	display: flex !important;
	flex-direction: row !important; /* Divi's et_flex_module stacks children vertically */
	gap: 18px;
	align-items: flex-start;
	max-width: none;
	margin: 0;
	text-align: left;
}
.clcm-landing .clcm-blurb .et_pb_main_blurb_image { display: block !important; width: auto !important; margin: 0 !important; flex-shrink: 0; }
.clcm-landing .clcm-blurb .et_pb_main_blurb_image .et_pb_image_wrap {
	width: 46px !important;
	height: 46px;
	margin: 0 !important;
	border-radius: 10px;
	background: var(--clcm-band);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.clcm-landing .clcm-blurb .et_pb_main_blurb_image .et_pb_image_wrap img { width: 22px !important; height: 22px !important; }
.clcm-landing .clcm-blurb .et_pb_blurb_container { display: block !important; padding: 0 !important; }
:where(.clcm-landing .clcm-blurb) :is(.et_pb_module_header, h3, h4) { font-size: 16.5px; font-weight: 700; color: var(--clcm-navy); margin: 0 0 4px; padding: 0; line-height: 1.3; }
:where(.clcm-landing .clcm-blurb) :is(.et_pb_blurb_description, .et_pb_blurb_description p) { font-size: 14.5px; color: var(--clcm-muted); line-height: 1.5; }
.clcm-landing .clcm-end { display: flex; align-items: center; justify-content: center; margin-top: 40px; }

/* ---------- Advanced sales page (price, buyer notice, question count, sample link) ---------- */
.clcm-landing .clcm-price p { margin: 0 0 18px; font-size: 15px; line-height: 1.4; }
:where(.clcm-landing .clcm-price) p { color: #fff; }
:where(.clcm-landing.clcm-sec .clcm-price) p { color: var(--clcm-muted); }
.clcm-landing .clcm-price-amount { display: block; font-family: 'Aleo', Georgia, serif; font-size: 34px; font-weight: 700; line-height: 1.15; }
:where(.clcm-landing.clcm-sec) .clcm-price-amount { color: var(--clcm-navy); }
.clcm-landing .clcm-price-amount del { font-size: .6em; font-weight: 400; opacity: .7; margin-right: 6px; }
.clcm-landing .clcm-price-note { display: inline-block; margin: 6px 0 4px; padding: 3px 10px; border-radius: 999px; background: #f2a33a; color: #1c3144; font-size: 13px; font-weight: 700; }
.clcm-landing .clcm-hero-link p { margin-top: 16px; font-size: 15px; }
:where(.clcm-landing .clcm-hero-link) a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:where(.clcm-landing.clcm-sec .clcm-hero-link) a { color: var(--clcm-green-d); }
.clcm-landing .clcm-account-notice { margin: 18px 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 14.5px; }
.clcm-landing .clcm-account-notice a { color: #fff; font-weight: 700; text-decoration: underline; }
.clcm-landing .clcm-card .clcm-card-meta { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--clcm-green-d); }
.clcm-landing .clcm-end.clcm-end-stack { flex-direction: column; text-align: center; gap: 4px; }

/* ---------- Assessment section ---------- */
.clcm-app.et_pb_section { background: #fbfcfd; }
.clcm-app .et_pb_code { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	/* Divi 5 flex rows keep columns side by side (nowrap) and its column-width CSS is not loaded on this page:
	   stack every landing column full width on tablets and phones. */
	.et_pb_section.clcm-landing .et_pb_row { flex-wrap: wrap; row-gap: 16px; }
	.et_pb_section.clcm-landing .et_pb_row > .et_pb_column { flex: 1 1 100%; width: 100%; max-width: 100%; margin-right: 0; }
	.clcm-landing.clcm-hero { padding-top: 48px; }
	.clcm-landing .clcm-hero-art-col { display: none; }
	:where(.clcm-landing .clcm-hero-title) h1 { font-size: 42px; letter-spacing: -1.2px; }
}
@media (max-width: 680px) {
	.et_pb_section.clcm-landing .et_pb_row { padding: 0 18px; }
	:where(.clcm-landing .clcm-hero-title) h1 { font-size: 34px; }
	.clcm-landing .clcm-dimensions { grid-template-columns: 1fr; }
	.clcm-landing .clcm-hero-meta ul { gap: 14px 24px; }
	.clcm-landing .clcm-hand { right: 5%; }
	:where(.clcm-landing .clcm-hand) p { font-size: 26px; }
	.clcm-landing.clcm-hero { padding-bottom: 110px; }
	.clcm-landing.clcm-hero::after { height: 90px; }
}