/* TRILAXY calculators — layout shell on trilaxy-site.css + trilaxy-site-dark.css */

.tlx-page.tlx-dark.calc-page {
	--violet: var(--accent);
	--navy: var(--ink);
	--sky: #7dd3fc;
	--cyan: #22d3ee;
	--calc-surface: var(--paper-3);
	--calc-surface-soft: var(--paper-2);
	--calc-surface-muted: rgba(20, 20, 27, .62);
	--calc-inset: rgba(244, 242, 238, .04);
	--calc-inset-strong: rgba(244, 242, 238, .07);
	--calc-input-bg: #101015;
	--calc-shadow: 0 18px 50px rgba(0, 0, 0, .38);
	--layout-max: var(--content-max);
	--layout-gutter: var(--pad);
	--header-h: 76px;
}

.calc-page .container {
	width: min(var(--layout-max), 100%);
	margin: 0 auto;
	padding: 0 var(--layout-gutter);
}

.calc-page .section {
	padding: clamp(48px, 7vw, 88px) 0;
}

/* Compact tool hero — matches tlx-tools-intro typography */

.calc-page .rc-hero-simple,
.calc-page .pb-hero-simple,
.calc-page .ci-hero-simple {
	padding: clamp(48px, 8vh, 72px) 0 clamp(24px, 4vh, 36px);
	background: transparent;
	border-bottom: var(--rule);
}

.calc-page .rc-hero-simple-inner,
.calc-page .pb-hero-simple-inner,
.calc-page .ci-hero-simple-inner {
	max-width: 52ch;
}

.calc-page .rc-hero-simple .tlx-section-label,
.calc-page .pb-hero-simple .tlx-section-label,
.calc-page .ci-hero-simple .tlx-section-label {
	margin-bottom: 12px;
}

.calc-page .rc-hero-simple h1,
.calc-page .pb-hero-simple h1,
.calc-page .ci-hero-simple h1 {
	margin: 0;
	max-width: none;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--ink);
}

.calc-page .rc-hero-lead,
.calc-page .pb-hero-lead,
.calc-page .ci-hero-lead {
	margin: 14px 0 0;
	max-width: 52ch;
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.65;
	color: var(--muted);
}

/* Buttons (print etc.) */

.calc-page .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: .88rem;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.calc-page .btn.secondary {
	color: var(--ink);
	border-color: var(--line-strong);
	background: transparent;
}

.calc-page .btn.secondary:hover {
	border-color: var(--accent);
	color: var(--accent);
	transform: translateY(-1px);
}

.tlx-page.tlx-dark.calc-page .rc-main,
.tlx-page.tlx-dark.calc-page .pb-main,
.tlx-page.tlx-dark.calc-page .ci-main {
	background: var(--paper);
}