/* ============================================================
   SmileTrue base shell
   ------------------------------------------------------------
   Body bg, base font stack, .frame baseline.
   All section-specific rules live in widgets.css (plugin).
   ============================================================ */

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	font-family: var(--sans);
	font-size: var(--font-size-body-md);
	line-height: var(--line-height-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* === Page shell ===
   Source used fixed-width .frame { width: 1440px }. We make it fluid with the
   1440px cap so mobile renders correctly without a horizontal scrollbar. */
.frame {
	width: 100%;
	max-width: var(--container-max-width);
	margin: 0 auto;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--sans);
	overflow-x: hidden;
}

/* === Type primitives (preserve source class names) === */
.display {
	font-family: var(--serif);
	font-weight: var(--font-weight-regular);
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-tight);
	text-wrap: balance;
	margin: 0;
}

.display em {
	font-style: italic;
	font-weight: var(--font-weight-regular);
	color: var(--color-primary-deep);
}

.lede {
	font-family: var(--sans);
	font-size: var(--font-size-body-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-soft);
	text-wrap: pretty;
	max-width: var(--lede-max-width);
	font-weight: var(--font-weight-regular);
	margin: 0;
}

/* === Logo === */
.logo {
	font-family: var(--serif);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-tight);
	display: inline-flex;
	align-items: baseline;
	line-height: 1;
}

.logo .smile { color: var(--color-primary); }
.logo .true  { color: var(--color-primary-mid); font-style: italic; font-weight: var(--font-weight-medium); }
.logo .mark  {
	width: 0.45em;
	height: 0.45em;
	background: var(--color-accent);
	margin-left: 0.2em;
	display: inline-block;
	transform: rotate(45deg) translateY(-0.4em);
}

.logo.on-dark .smile { color: var(--white); }
.logo.on-dark .true  { color: var(--color-accent-soft); }

/* === Eyebrow === */
.eyebrow {
	font-family: var(--mono);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-widest);
	text-transform: uppercase;
	color: var(--color-primary-deep);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--color-accent);
	display: inline-block;
	/* transform/transition handled in animations.css */
}

.eyebrow.on-dark {
	color: var(--color-accent-soft);
}

.eyebrow.on-dark::before {
	background: var(--color-accent);
}

/* === Button primitives — source: styles.css :80-89 (verbatim) ===
   Used by every CTA widget. .btn.primary is the dominant variant; others
   (.gold, .outline, .outline-light, .lg) are kept here so all future widgets
   share one source-faithful definition. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--sans);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.005em;
	padding: 14px 22px;
	border-radius: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;            /* defensive — neutralize <a class="btn"> */
}

.btn.primary       { background: var(--teal-800); color: var(--white); }
.btn.gold          { background: var(--gold);     color: var(--teal-900); border-color: var(--gold-deep); }
.btn.outline       { background: transparent;     color: var(--ink);      border-color: var(--ink); }
.btn.outline-light { background: transparent;     color: var(--white);    border-color: rgba(255, 255, 255, 0.5); }
.btn.lg            { padding: 17px 28px;          font-size: 14.5px; }

/* Reveal pre-state, eyebrow underline transition, and prefers-reduced-motion
   live in animations.css (loaded after this file). */