/*
 * Taxonomy Machine Category Styles (100% Aligned with Codex Static styles.css)
 * For route: /machines/{category-slug}/
 * Covering: .page-hero.compact-hero, .dense-section, .number-title,
 * .decision-grid, .grid.three, .category-comparison, .feature-tile,
 * .panel, .data-table, .project-form, .btn.lime, section.cta
 */

/* =========================================================
   1. HERO (.page-hero.compact-hero)
   ========================================================= */
.page-hero.compact-hero {
	padding-top: 62px;
	padding-bottom: 62px;
	text-align: center;
	background: var(--cream);
	max-width: none;
	padding-left: clamp(20px, 5vw, 72px);
	padding-right: clamp(20px, 5vw, 72px);
}

.page-hero .eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 900;
	color: #52780c;
	margin-bottom: 12px;
}

.page-hero h1 {
	font-size: clamp(42px, 6vw, 70px);
	letter-spacing: -0.045em;
	line-height: 1.1;
	margin: 0 auto 16px;
	color: var(--ink);
	max-width: 900px;
}

.page-hero .lead {
	color: var(--muted);
	font-size: 18px;
	max-width: 760px;
	margin: 0 auto;
	line-height: 1.6;
}

/* =========================================================
   2. DENSE SECTIONS & NUMBER TITLE
   ========================================================= */
.dense-section {
	padding-top: 64px;
	padding-bottom: 64px;
}

.dense-section.alt {
	max-width: none;
	background: #f5f8f4;
}

.dense-section > * {
	max-width: 1256px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
	box-sizing: border-box;
}

.number-title {
	display: flex;
	gap: 16px;
	align-items: baseline;
	margin-bottom: 28px;
}

.number-title b {
	font-size: 28px;
	color: #6a972a;
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
}

.number-title .eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 11px;
	font-weight: 900;
	color: #638c1a;
	margin-bottom: 4px;
}

.number-title h2 {
	font-size: clamp(26px, 3.2vw, 38px);
	letter-spacing: -0.04em;
	line-height: 1.15;
	margin: 0;
	color: var(--ink);
}

.number-title p {
	color: var(--muted);
	margin: 8px 0 0;
	font-size: 15px;
	max-width: 800px;
}

/* =========================================================
   3. DECISION GRID (02 Quick Selection Guide)
   ========================================================= */
.decision-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.decision-grid > div {
	border: 1px solid var(--line);
	background: #fff;
	padding: 24px;
	border-radius: 12px;
	box-sizing: border-box;
}

.decision-grid h3 {
	margin: 0 0 8px;
	font-size: 18px;
	color: var(--ink);
	letter-spacing: -0.02em;
}

.decision-grid p {
	margin: 0;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.55;
}

/* =========================================================
   4. SIDE-BY-SIDE REVIEW (04 Comparison Table)
   ========================================================= */
.category-comparison {
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow-x: auto;
	background: #fff;
}

.category-comparison > div {
	display: grid;
	grid-template-columns: minmax(210px, 1.1fr) minmax(320px, 1.7fr) minmax(230px, 1.1fr) 90px;
	min-width: 900px;
	border-bottom: 1px solid var(--line);
	align-items: center;
}

.category-comparison > div:last-child {
	border-bottom: 0;
}

.category-comparison .thead {
	background: #eef5ef;
	font-weight: 850;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ink);
}

.category-comparison span,
.category-comparison strong,
.category-comparison a {
	padding: 13px 15px;
	font-size: 14px;
}

.category-comparison strong {
	color: var(--ink);
	font-weight: 700;
}

.category-comparison span {
	color: #3f5547;
	line-height: 1.45;
}

.category-comparison a {
	color: var(--forest);
	font-weight: 900;
	text-decoration: none;
}

.category-comparison a:hover {
	text-decoration: underline;
}

/* =========================================================
   5. SELECTION LOGIC (05 Feature Tiles)
   ========================================================= */
.feature-tile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border: 1px solid var(--line);
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-sizing: border-box;
}

.feature-tile > span {
	display: grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #e7f5d2;
	color: #4c7800;
	font-weight: 900;
	font-size: 14px;
	flex-shrink: 0;
}

.feature-tile strong {
	display: block;
	font-size: 16px;
	color: var(--ink);
	margin-bottom: 4px;
}

.feature-tile p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.5;
}

/* =========================================================
   6. APPLICATIONS (06 Panels)
   ========================================================= */
.panel {
	background: var(--cream);
	padding: 30px;
	border-radius: 14px;
	box-sizing: border-box;
}

.panel h3 {
	margin: 0 0 10px;
	font-size: 19px;
	color: var(--ink);
}

.panel p {
	margin: 0;
	font-size: 14px;
	color: #435b4c;
	line-height: 1.6;
}

/* =========================================================
   7. TECHNICAL FACTORS (07 Data Table)
   ========================================================= */
.data-table {
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.data-table > div {
	display: grid;
	grid-template-columns: 0.65fr 1.35fr;
	border-bottom: 1px solid var(--line);
}

.data-table > div:last-child {
	border-bottom: 0;
}

.data-table strong,
.data-table span {
	padding: 12px 18px;
	font-size: 14px;
}

.data-table strong {
	background: #eef5ef;
	color: var(--ink);
	font-weight: 750;
}

.data-table span {
	color: #375040;
}

/* =========================================================
   8. FAQ (.dense-section.faq)
   ========================================================= */
.dense-section.faq details {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	padding: 16px 20px;
	margin-bottom: 12px;
	box-sizing: border-box;
}

.dense-section.faq summary {
	font-weight: 800;
	font-size: 16px;
	color: var(--ink);
	cursor: pointer;
	user-select: none;
}

.dense-section.faq p {
	margin: 12px 0 0;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.6;
}

/* =========================================================
   9. INQUIRY FORM (.project-form)
   ========================================================= */
.project-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	background: #fff;
	padding: 36px;
	border-radius: 14px;
	border: 1px solid var(--line);
	box-sizing: border-box;
}

.project-form label {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 800;
	color: var(--ink);
	gap: 6px;
}

.project-form input,
.project-form textarea,
.project-form select {
	font: inherit;
	font-size: 14px;
	padding: 11px 14px;
	border: 1px solid #c9d7cc;
	border-radius: 8px;
	outline: none;
	background: #fafcfa;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.project-form input:focus,
.project-form textarea:focus,
.project-form select:focus {
	border-color: #679626;
	box-shadow: 0 0 0 3px rgba(103, 150, 38, 0.15);
	background: #fff;
}

.project-form label:has(textarea),
.project-form .consent,
.project-form button,
.project-form .form-note {
	grid-column: 1 / -1;
}

.project-form textarea {
	min-height: 100px;
	resize: vertical;
}

.project-form .consent {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
}

.project-form .form-note {
	margin: 0;
	font-size: 12px;
	color: var(--muted);
	line-height: 1.5;
}

/* Responsive Overrides */
@media (max-width: 1050px) {
	.decision-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.decision-grid {
		grid-template-columns: 1fr;
	}
	.project-form {
		grid-template-columns: 1fr;
		padding: 24px;
	}
}