html {
	scroll-behavior: smooth;
}

.gradient-text {
	background: linear-gradient(to right, #0087cd, #36a852);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.bg-pattern {
	background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
	background-size: 20px 20px;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #36a852;
	margin: 0 auto;
}

/* Safety fallback in case the Tailwind Play CDN build in use predates
   core line-clamp support (v3.3+). Harmless no-op once utilities load. */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* Scroll offset so anchor jumps land below the fixed header instead of
   tucking the section title underneath it. */
#reasons,
#equipment,
#faq,
#company,
#contact {
	scroll-margin-top: 5rem;
}

/* --- Responsive fixes not covered by the original CodePen markup --- */

/* Company info table: collapse to a stacked key/value layout on narrow
   screens instead of relying on horizontal scroll alone. */
@media (max-width: 639px) {
	#company table th,
	#company table td {
		display: block;
		width: 100%;
	}

	#company table th {
		padding-bottom: 0.5rem;
	}

	#company table td {
		padding-top: 0.5rem;
	}
}

/* Prevent the emphasized inline label in the "worries" callout from
   overflowing narrow viewports. */
@media (max-width: 400px) {
	#reasons ~ * .text-yellow-300,
	.triangle-down + div .text-yellow-300 {
		display: inline-block;
		margin: 0.25rem 0 0;
	}
}

/* Minimal article typography for single-news / page content, since the
   Tailwind Typography plugin classes ("prose") are loaded from the CDN
   but keeping local fallback rules avoids a flash of unstyled content
   if that request is ever blocked. */
.prose :where(p) {
	margin-top: 1em;
	margin-bottom: 1em;
	line-height: 1.75;
}

.prose :where(h1, h2, h3) {
	font-weight: 700;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

/* Contact Form 7 restyle: the plugin renders its own <input>/<textarea>
   markup, so its default look is reskinned here to match the rest of the
   site instead of using Tailwind utility classes (CF7 form-tag options
   can't carry classes containing ":" such as "focus:border-primary"). */
.subsupo-cf7-wrap .wpcf7-form p {
	margin: 0 0 1.5rem;
}

.subsupo-cf7-wrap .wpcf7-form > p:last-child {
	margin-bottom: 0;
}

/* Target both our own marker class AND Contact Form 7's default classes
   (.wpcf7-form-control / .wpcf7-submit), since manual edits made through
   the CF7 form editor's tag generator can regenerate a tag without
   preserving a custom "class:" option. */
.subsupo-cf7-input,
.subsupo-cf7-wrap .wpcf7-form-control:not(.wpcf7-submit) {
	display: block;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.375rem;
	border: 1px solid #d1d5db;
	background-color: #f9fafb;
	outline: none;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.subsupo-cf7-input:focus,
.subsupo-cf7-wrap .wpcf7-form-control:not(.wpcf7-submit):focus {
	border-color: #0087cd;
	box-shadow: 0 0 0 3px rgba(0, 135, 205, 0.2);
}

textarea.subsupo-cf7-input,
.subsupo-cf7-wrap textarea.wpcf7-form-control {
	min-height: 6rem;
	resize: vertical;
}

.subsupo-cf7-submit,
.subsupo-cf7-wrap .wpcf7-submit {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem 3rem;
	border: none;
	border-radius: 0.375rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	background-color: #ff7a00;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.subsupo-cf7-submit:hover,
.subsupo-cf7-wrap .wpcf7-submit:hover {
	background-color: #e56e00;
}

@media (min-width: 768px) {
	.subsupo-cf7-submit,
	.subsupo-cf7-wrap .wpcf7-submit {
		width: auto;
	}
}

/* The loading spinner CF7 inserts next to the submit button takes up
   layout space even at rest, which visually throws off the button's
   centering. Hide it — the button's own disabled/opacity state during
   submission is enough of a busy indicator. */
.subsupo-cf7-wrap .wpcf7-spinner {
	display: none !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: #dc2626;
}

.wpcf7-response-output {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: 0.375rem;
	text-align: center;
	font-weight: 500;
}

.wpcf7-mail-sent-ok {
	background-color: #f0fdf4;
	border: 1px solid #bbf7d0;
	color: #36a852;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng,
.wpcf7-spam-blocked,
.wpcf7-aborted {
	background-color: #fef2f2;
	border: 1px solid #fecaca;
	color: #dc2626;
}