/* ----------------------------------------------------------------
 * UnfoldCRO - Screenage Media Child — base CSS tokens + reset
 * Extracted from Elementor Kit (post id 7) on 19/05/2026.
 * Pixel-match baseline; redesign builds on top of this layer.
 * -------------------------------------------------------------- */

:root {
	/* Brand colors */
	--tsm-primary:        #615DA9;
	--tsm-secondary:      #FBAF1A;
	--tsm-text:           #231F20;
	--tsm-accent:         #05B8A4;
	--tsm-shadow:         #F47621;
	--tsm-white:          #FFFFFF;
	--tsm-black:          #000000;
	--tsm-outline:        #ECECEC;
	--tsm-outline-soft:   rgba( 229, 229, 229, 0.18 );

	/* Typography */
	--tsm-font-base:      'Poppins', sans-serif;
	--tsm-weight-light:   300;
	--tsm-weight-regular: 400;
	--tsm-weight-medium:  500;
	--tsm-weight-bold:    600;

	/* Sizing */
	--tsm-container:      1300px;
	--tsm-gap:            15px;
	--tsm-radius-pill:    25px;
	--tsm-radius-card:    24px;
}

/* ----------------------------------------------------------------
 * Base body + headings (pixel-match Elementor Kit defaults)
 * -------------------------------------------------------------- */

body {
	font-family: var( --tsm-font-base );
	font-weight: var( --tsm-weight-light );
	font-size: 15px;
	color: var( --tsm-text );
	background: var( --tsm-white );
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media ( max-width: 768px ) {
	body { font-size: 18px; }
}

h1, .tsm-h1 {
	font-family: var( --tsm-font-base );
	font-weight: var( --tsm-weight-medium );
	font-size: 5rem;
	line-height: 1.1;
	letter-spacing: -2px;
	color: var( --tsm-text );
	margin: 0 0 0.5em;
}
@media ( max-width: 768px ) {
	h1, .tsm-h1 { font-size: 30px; }
}

h2, .tsm-h2 {
	font-family: var( --tsm-font-base );
	font-weight: var( --tsm-weight-regular );
	font-size: 2rem;
	line-height: 1.2;
	margin: 0 0 0.5em;
}
@media ( max-width: 768px ) {
	h2, .tsm-h2 { font-size: 24px; }
}

h3, h4, h5, h6 {
	font-family: var( --tsm-font-base );
	font-weight: var( --tsm-weight-medium );
	margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; transition: color 0.3s; }
a:hover { color: var( --tsm-accent ); }

img { max-width: 100%; height: auto; display: block; }

/* ----------------------------------------------------------------
 * Layout helpers
 * -------------------------------------------------------------- */

.tsm-container {
	max-width: var( --tsm-container );
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

.tsm-section {
	padding-top: 80px;
	padding-bottom: 80px;
}

@media ( max-width: 768px ) {
	.tsm-section { padding-top: 48px; padding-bottom: 48px; }
}

/* ----------------------------------------------------------------
 * Button (Kit "button" style: yellow → teal hover, pill 25px)
 * -------------------------------------------------------------- */

.tsm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var( --tsm-font-base );
	font-weight: var( --tsm-weight-bold );
	font-size: 14px;
	padding: 16px 32px;
	border-radius: var( --tsm-radius-pill );
	background: var( --tsm-secondary );
	color: var( --tsm-white );
	border: 0;
	cursor: pointer;
	transition: background 0.3s, color 0.3s, transform 0.2s;
	text-decoration: none;
	line-height: 1;
}
.tsm-btn:hover {
	background: var( --tsm-accent );
	color: var( --tsm-white );
}
.tsm-btn--outline {
	background: transparent;
	color: var( --tsm-text );
	border: 2px solid var( --tsm-text );
}
.tsm-btn--outline:hover {
	background: var( --tsm-text );
	color: var( --tsm-white );
}

/* ----------------------------------------------------------------
 * Card (24px radius, soft outline)
 * -------------------------------------------------------------- */

.tsm-card {
	border-radius: var( --tsm-radius-card );
	border: 2px solid var( --tsm-outline-soft );
	background: var( --tsm-white );
	overflow: hidden;
	transition: border-color 0.3s, transform 0.3s;
}
.tsm-card:hover {
	border-color: var( --tsm-accent );
}

/* ----------------------------------------------------------------
 * Utility
 * -------------------------------------------------------------- */

.tsm-text-center { text-align: center; }
.tsm-text-primary { color: var( --tsm-primary ); }
.tsm-text-accent { color: var( --tsm-accent ); }
.tsm-bg-dark { background: var( --tsm-black ); color: var( --tsm-white ); }
.tsm-bg-light { background: var( --tsm-outline ); }
.tsm-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}