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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--color-cream);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.55;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 0.5em;
	color: var(--color-text);
}

h1 { font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2.15rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; font-family: var(--font-heading); }

p { margin: 0 0 1em; color: var(--color-text-secondary); }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

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

.ttt-container--wide {
	max-width: var(--container-wide);
}

.ttt-section {
	padding: 56px 0;
}

.ttt-section__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 40px;
}

/* Buttons */
.ttt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: var(--radius-full);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.95rem;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.ttt-btn--primary {
	background: var(--color-primary);
	color: #fff;
}
.ttt-btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }

.ttt-btn--outline {
	background: transparent;
	color: var(--color-primary);
	border: 1.5px solid var(--color-primary);
}
.ttt-btn--outline:hover { background: var(--color-pink-pale); }

.ttt-btn--dark {
	background: var(--color-text);
	color: #fff;
}

.ttt-btn--block { width: 100%; }
.ttt-btn--sm { padding: 9px 18px; font-size: 0.85rem; }
.ttt-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Reveal-on-scroll (replaces Framer Motion in the source app) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }