/* Reusable cards, controls, tables, forms, and small content patterns. */

/* Eyebrow chips — V2 stamp: square-ish corners, hairline border, red under-shadow.
   Both fills are light so the navy brand mark reads on either without a plate —
   see the note on .section-header__eyebrow in layout.css. The base is the white
   chip for light sections; .eyebrow--dark is the tint chip for dark ones (named
   for the surface it sits on, not its own colour). */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.45rem 1rem;
	margin-bottom: 1.25rem;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-dark);
	font-family: var(--font-heading);
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: 0.03em;
	box-shadow: var(--shadow-stamp-chip);
}

.eyebrow--dark {
	border-color: rgba(0, 0, 0, 0.10);
	background: var(--color-tint);
	color: var(--color-primary);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

/* Layout's dark-section link color must not override button contrast.
   Both white-stamp styles keep their red label on dark surfaces. */
.section--dark .btn--gradient,
.on-dark .btn--gradient,
.section--dark .btn--gradient:hover,
.on-dark .btn--gradient:hover { color: var(--color-white); }
.section--dark .btn--light,
.on-dark .btn--light,
.section--dark .btn--ghost-dark,
.on-dark .btn--ghost-dark { color: var(--color-primary); }
.section--dark .btn--quiet,
.on-dark .btn--quiet,
.section--dark .btn--quiet:hover,
.on-dark .btn--quiet:hover,
.section--dark .btn--quiet:focus-visible,
.on-dark .btn--quiet:focus-visible { color: var(--color-white); }
.section--dark .btn--light:hover,
.on-dark .btn--light:hover,
.section--dark .btn--light:focus-visible,
.on-dark .btn--light:focus-visible,
.section--dark .btn--ghost-dark:hover,
.on-dark .btn--ghost-dark:hover,
.section--dark .btn--ghost-dark:focus-visible,
.on-dark .btn--ghost-dark:focus-visible { color: var(--color-primary-deep); }

.card-grid { align-items: stretch; }

/* Cards — V2 stamp: hairline border + hard 6px offset shadow, no blur. */
.card,
.feature-card,
.benefit-card,
.integration-card,
.testimonial-card {
	position: relative;
	padding: 1.75rem;
	background: var(--color-card);
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-stamp);
	/* The reveal timings ride along because these cards are also .reveal
	   targets: base.css deliberately keeps its transition at .reveal's
	   specificity so this list wins, which means it has to carry both. */
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--reveal-duration) ease-out var(--reveal-delay, 0s), translate var(--reveal-duration) var(--reveal-ease) var(--reveal-delay, 0s);
}

/* Hover-capable pointers only. On touch, :hover stays true after a tap and
   through scrolling until the next tap elsewhere, which leaves a card stuck
   in its lifted state — and most of these cards are not interactive anyway,
   so the lift communicates nothing there. */
@media (hover: hover) {
	.card:hover,
	.feature-card:hover,
	.benefit-card:hover,
	.integration-card:hover,
	.testimonial-card:hover {
		transform: translate(-3px, -3px);
		border-color: rgba(196, 28, 28, 0.45);
		box-shadow: var(--shadow-stamp-hover);
	}
}

.card h3,
.feature-card h3,
.benefit-card h3,
.integration-card h3 {
	margin-block: 1rem 0.65rem;
	font-size: var(--text-xl);
	color: var(--color-dark);
}

.card p,
.feature-card p,
.benefit-card p { color: var(--color-body-muted); }

/* V2: sketch icons sit bare on cards — the tile is an invisible layout box. */
.icon-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: var(--radius);
	color: var(--color-primary);
}

.icon-tile--dark {
	background: rgba(232, 106, 106, 0.16);
	color: var(--color-accent-on-dark);
}

.section-closing {
	margin-top: 3rem;
	text-align: center;
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--color-dark);
}

/* Full-width slab closing the features grid. Was a 1px hairline over a 3-stop
   wash, which read as a browser default next to the stamped cards above it —
   flat fill and a card-tier offset put it back in the language. */
.message-panel {
	margin-top: 3rem;
	padding: 1.75rem;
	text-align: center;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	background: var(--color-tint);
	box-shadow: var(--shadow-stamp);
}

.message-panel strong { display: block; color: var(--color-dark); font-size: var(--text-xl); }
.message-panel p { margin-top: 0.35rem; color: var(--color-body-muted); }

/* Hero-scale panel: the biggest single box on the pages that carry it, so it
   takes the 8px tier. Its own fill is the dark gradient (.section--dark sits on
   the element), but both hosts are LIGHT bands — .benefits-section and
   .integrations-section — so the shadow lands on light and takes the near-black
   ink. Surface decides the shadow; the box's own fill decides the border, which
   is why the border here is the on-dark hairline and not the black one. */
.cta-panel {
	max-width: 64rem;
	margin: 3.5rem auto 0;
	padding: clamp(2rem, 6vw, 3.5rem);
	border: 2px solid var(--color-border-dark);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-stamp-lg);
	text-align: center;
	overflow: hidden;
}

.cta-panel h3 { font-size: var(--text-3xl); }
.cta-panel p { max-width: 44rem; margin: 0.75rem auto 1.5rem; color: var(--color-on-dark-muted); font-size: var(--text-lg); }
.cta-panel .button-row { justify-content: center; }

.section-action {
	margin-top: 3rem;
	text-align: center;
}

.section-action h3 { font-size: var(--text-2xl); color: var(--color-dark); }
.section-action p { margin: 0.5rem 0 1.5rem; color: var(--color-body-muted); font-size: var(--text-lg); }

.benefit-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.benefit-card__stat {
	font-size: clamp(1.8rem, 4vw, 2.4rem);
	line-height: 1;
	color: var(--color-primary);
}

.table-scroll {
	width: 100%;
	max-width: 64rem;
	min-width: 0;
	margin-inline: auto;
	overflow-x: auto;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-stamp);
}

.comparison-table {
	width: 100%;
	min-width: 42rem;
	border-collapse: collapse;
	background: var(--color-white);
}

.comparison-table thead { background: var(--gradient-dark); color: var(--color-white); }
.comparison-table th,
.comparison-table td { padding: 1.25rem 1.5rem; text-align: center; }
.comparison-table thead th:first-child,
.comparison-table tbody th { text-align: left; }
.comparison-table tbody tr + tr { border-top: 1px solid rgba(196, 28, 28, 0.12); }
.comparison-table tbody tr:hover { background: var(--color-tint); }
.comparison-table tbody th { width: 62%; }
.comparison-table tbody th strong { display: block; color: var(--color-dark); }
.comparison-table tbody th small { display: block; margin-top: 0.2rem; color: var(--color-body-muted); font-weight: 400; }

/* Each row gets its own sketch icon so the table can be scanned by concept
   instead of read line by line. Bare, not tiled: sketch icons sit directly on
   the surface everywhere else in the theme, and eight bordered tiles inside an
   already-stamped table would compete with the verdict chips. */
.comparison-feature { display: flex; align-items: flex-start; gap: 0.9rem; }
.comparison-feature > .sketch-icon { flex-shrink: 0; margin-top: 0.1rem; }
.comparison-feature__text { min-width: 0; }

/* Below 40rem the three columns restack: each row reads as a full-width
   feature title + description with the two verdicts inline underneath as
   labeled chips, instead of a 113px description column wrapping to 6 lines
   next to two 113px columns holding one icon each. The element stays a real
   <table> and Chrome keeps its table/row/cell/columnheader roles through
   these display overrides, so the column names are only *visually* missing —
   hence the chip labels carry an empty a11y alt: the header cells and the
   .visually-hidden "Included"/"Not included" text are still the announced
   content, and a visible label must not be announced twice. */
@media (max-width: 39.99rem) {
	.comparison-table {
		display: block;
		min-width: 0;
	}

	/* Out of the visual flow, still in the a11y tree as the column headers. */
	.comparison-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.comparison-table tbody { display: block; }

	.comparison-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		gap: 0.85rem 0.5rem;
		padding: 1.1rem 1rem;
	}

	.comparison-table tbody th {
		display: block;
		flex: 1 0 100%;
		width: auto;
		padding: 0;
		text-align: left;
	}

	.comparison-table tbody th strong { font-size: var(--text-lg); }

	/* Slightly tighter gap — the row is only 343px wide at 375. */
	.comparison-feature { gap: 0.7rem; }

	.comparison-table tbody td {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		padding: 0.3rem 0.6rem;
		border: 2px solid var(--color-border);
		border-radius: var(--radius-sm);
		font-size: var(--text-sm);
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
	}

	/* Alt-text pair keeps the chip label out of the accessible name; the bare
	   string first so browsers without alt-text support still label the chip. */
	.comparison-table tbody td::before { content: "RebelPSA"; }
	.comparison-table tbody td::before { content: "RebelPSA" / ""; }
	.comparison-table tbody td + td::before { content: "Legacy PSA"; }
	.comparison-table tbody td + td::before { content: "Legacy PSA" / ""; }

	.comparison-table tbody td:has(.status-icon--yes) { border-color: #16703a; background: #dcfce7; color: #14532d; }
	.comparison-table tbody td:has(.status-icon--no) { border-color: #a31717; background: #fee2e2; color: #7f1d1d; }

	/* The row chip already carries the verdict tint and border, so the badge
	   inside it collapses to just the glyph. Plain descendant selectors — the
	   :has() these carried was redundant (the subject was the child, not the
	   parent) and cost engine support for nothing. */
	.comparison-table tbody td .status-icon {
		width: 1.15rem;
		height: 1.15rem;
		border: 0;
		background: none;
	}

	.comparison-table tbody td .status-icon .sketch-icon {
		width: 100%;
		height: 100%;
	}
}

/* The real hexagon mark, white-ink variant — the table head is dark. Was a
   red tile holding the letter "R" as a stand-in for the logo. */
.brand-mark {
	display: inline-block;
	width: 1.75rem;
	height: auto;
	margin-right: 0.4rem;
	vertical-align: -0.45rem;
}

/* Verdict badge — stamp chip holding a Rebel sketch glyph.
   The glyph is the raster sketch check/x in its navy ink, so the green/red
   semantics live in the chip's fill and border rather than in the glyph. That is
   not a compromise: the shape carries the meaning first (a check is a check), the
   tint reinforces it, and the .visually-hidden "Included" / "Not included" text
   is what assistive tech actually reads — so nothing here depends on colour
   alone. `color` now only drives the border, which is why it stays declared. */
.status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 2px solid currentcolor;
	border-radius: var(--radius-sm);
}

.status-icon .sketch-icon { display: block; }

.status-icon--yes { color: #16703a; background: #dcfce7; }
.status-icon--no { color: #a31717; background: #fee2e2; }

.filter-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-bottom: 2.5rem;
}

/* Stamp chips, same treatment as the benefits sub-nav: hairline border, hard
   under-shadow, and a solid red stamp for the selected one. These used to be
   fully-round pills with a faint pink edge, which read as generic next to the
   rest of the V2 language. */
.filter-pills a,
.filter-pills button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem; /* 44px touch target */
	padding: 0.45rem 0.95rem;
	border: 2px solid rgba(0, 0, 0, 0.10);
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-dark);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(26, 13, 13, 0.55);
	transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition);
}

/* Filter pills toggle in place (no navigation), so the hover half is
   hover-capable-only; focus keeps the affordance for keyboards. */
.filter-pills a:focus-visible,
.filter-pills button:focus-visible {
	transform: translateY(-1px);
	border-color: rgba(196, 28, 28, 0.45);
	box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7);
	color: var(--color-primary);
}

@media (hover: hover) {
	.filter-pills a:hover,
	.filter-pills button:hover {
		transform: translateY(-1px);
		border-color: rgba(196, 28, 28, 0.45);
		box-shadow: 0 4px 0 rgba(26, 13, 13, 0.7);
		color: var(--color-primary);
}
}

/* Selected filter: solid red stamp on the dark under-shadow. */
.filter-pills [aria-pressed="true"],
.filter-pills [aria-current="page"] {
	border-color: rgba(0, 0, 0, 0.10);
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 3px 0 var(--color-dark);
}

.filter-pills [aria-pressed="true"]:hover,
.filter-pills [aria-current="page"]:hover { color: var(--color-white); }

.filter-pills a:active,
.filter-pills button:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(26, 13, 13, 0.55);
	transition-duration: var(--transition-press);
}

.integration-card { text-align: center; }
.integration-card .icon-tile { margin-inline: auto; }
.integration-card h3,
.integration-card h4 { font-size: var(--text-base); }
.integration-card p { font-size: var(--text-sm); color: var(--color-body-muted); }
.integration-card[hidden] { display: none; }

/* Roadmap group — integrations that are being built and are not available.
   It sits outside #integration-grid on purpose so the category filter, which is
   single-axis over data-integration-category, cannot hide it: a visitor picking
   "RMM" must not be shown a grid that silently omits what is coming. */
.integration-roadmap { margin-top: 3rem; }
.integration-roadmap__title { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-dark); text-transform: uppercase; letter-spacing: 0.04em; }
.integration-roadmap__lede { margin-top: 0.35rem; margin-bottom: 1.5rem; color: var(--color-body-muted); font-size: var(--text-sm); }

/* Dimmed, but not so far that the name stops being readable — the whole purpose
   of the group is that these names are legible and honestly labelled. The card
   keeps its stamp so it still reads as an object on the page. */
.integration-card--soon { border-style: dashed; background: transparent; box-shadow: none; }
.integration-card--soon .icon-tile { opacity: 0.55; }
.integration-card--soon h4 { color: var(--color-body-muted); }
.integration-card__status { display: inline-block; margin-top: 0.6rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-full); background: rgba(196, 28, 28, 0.10); color: var(--color-primary-deep); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* Request-an-Integration preview. The card is the shared white stamped panel; only
   the preview's disabled state is new. Nothing here is interactive — see
   template-parts/forms/form-request-integration.php for why the whole block is
   aria-hidden rather than merely disabled. */
.integration-request__card { max-width: 52rem; margin-inline: auto; }
.integration-request__badge { display: inline-flex; padding: 0.3rem 0.85rem; border: 2px solid rgba(0, 0, 0, 0.10); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; letter-spacing: 0.03em; box-shadow: 0 4px 0 var(--color-dark); }
.integration-request__notice { margin-top: 1.25rem; padding: 0.9rem 1.1rem; border-left: 4px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-body); }
.integration-request__preview { margin-top: 1.5rem; opacity: 0.55; filter: saturate(0.4); user-select: none; }
.integration-request__preview :disabled { cursor: not-allowed; }
.integration-request__fallback { margin-top: 1.5rem; text-align: center; font-weight: 700; }

/* Standing notice at the top of a document — currently the legal pages' "pending
   review" state. Built on .message-panel's vocabulary (2px hairline, --radius-lg,
   --color-tint, --shadow-stamp) rather than a new one, with a left accent that
   rhymes with .legal-document__intro directly below it. Not .form-status: that
   family is transient submit feedback with :empty hiding and a live region. */
.notice-banner { padding: 1rem 1.25rem; border: 2px solid rgba(0, 0, 0, 0.10); border-left: 4px solid var(--color-primary); border-radius: var(--radius-lg); background: var(--color-tint); box-shadow: var(--shadow-stamp); }
.notice-banner + .legal-document__intro { margin-top: 1.25rem; }
.notice-banner__title { display: block; color: var(--color-dark); font-family: var(--font-heading); font-size: var(--text-lg); letter-spacing: 0.02em; text-transform: uppercase; }
.notice-banner__body { margin-top: 0.35rem; color: var(--color-body); font-size: var(--text-sm); }

.testimonial-card { margin: 0; }
/* The quote mark is raster sketch artwork, so `color` cannot tint it — the
   intended 15% watermark has to come from opacity on the <img> itself. */
.testimonial-card__quote { position: absolute; top: 1.25rem; right: 1.25rem; opacity: 0.15; }
.testimonial-card__stars { display: flex; gap: 0.2rem; margin-bottom: 1rem; color: var(--color-primary); fill: var(--color-primary); }
/* The Lucide star ships fill="none" stroke="currentColor". Filling it is what
   makes a star read as earned, so an EMPTY star is the asset in its own default
   state — the modifier puts the fill back rather than swapping in a second file.
   The outline stays currentColor either way, so an empty star is still visibly a
   star rather than a gap in the row. */
.testimonial-card__stars svg { fill: currentColor; }
.testimonial-card__stars .star--empty { fill: none; }
.testimonial-card blockquote { position: relative; padding-right: 1rem; color: var(--color-body); }
/* One line now — the role/company span went on 2026-08-13, and the column flex
   that stacked it above went with it. */
.testimonial-card figcaption { margin-top: 1.35rem; padding-top: 1rem; border-top: 1px solid rgba(196, 28, 28, 0.16); }
.testimonial-card figcaption strong { color: var(--color-dark); }

/* Forms */
.lead-form { display: grid; gap: 1rem; text-align: left; }
.form-grid { display: grid; gap: 1rem; }

@media (min-width: 40rem) {
	.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form-field { display: grid; gap: 0.35rem; }
.form-field label,
.form-fieldset legend { font-weight: 700; color: var(--color-dark); }
.lead-form--dark .form-field label { color: var(--color-white); }

.form-field input,
.form-field select,
.form-field textarea,
.lead-form input,
.lead-form select,
.lead-form textarea {
	width: 100%;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #8b8b8b;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	color: var(--color-body);
}

.lead-form textarea { min-height: 9rem; resize: vertical; }

/* Fields on the dark CTA card read like the contact-page form: a near-opaque
   light fill, because a translucent field on a translucent red card left the
   boundary at ~1.4:1. 0.96 keeps a hint of the card's tint showing through
   while holding >3:1 against the card's brightest (glow-lit) region, and the
   dark ink + dark hairline stay readable against that fill. The white
   :focus-visible ring still lands on the card, outside the field. */
.lead-form--dark input,
.lead-form--dark select,
.lead-form--dark textarea {
	border-color: rgba(26, 13, 13, 0.45);
	background: rgba(255, 255, 255, 0.96);
	color: var(--color-body);
}

.lead-form--dark select option { color: var(--color-body); background: var(--color-white); }
.lead-form--dark input::placeholder,
.lead-form--dark textarea::placeholder { color: var(--color-body-muted); }

.form-submit { width: 100%; min-height: 3.35rem; }
.form-submit[disabled] { cursor: wait; opacity: 0.7; }

.form-status:empty { display: none; }
/* forms.js scrolls this into view after a submit; the fixed header would
   otherwise cover it. */
.form-status { padding: 0.9rem 1rem; border-radius: var(--radius-sm); scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1.5rem); }
.form-status p { margin-top: 0.25rem; }
.form-status--success { background: #dcfce7; color: #14532d; border: 1px solid #4ade80; }
.form-status--error { background: #fee2e2; color: #7f1d1d; border: 1px solid #f87171; }
.lead-form--dark .form-status--success,
.demo-card > .form-status--success { background: rgba(34, 197, 94, 0.18); color: #eafff0; border-color: rgba(134, 239, 172, 0.65); }
.lead-form--dark .form-status--error,
.demo-card > .form-status--error { background: rgba(239, 68, 68, 0.2); color: #fff1f1; border-color: rgba(252, 165, 165, 0.65); }
.form-error { color: #9b1717; font-size: var(--text-sm); }
.lead-form--dark .form-error { color: #ffd4d4; }
.is-invalid,
.lead-form [aria-invalid="true"] { border-color: #b91c1c !important; box-shadow: 0 0 0 1px #b91c1c; }

.inquiry-toggle {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	border: 0;
	padding: 0;
}

.inquiry-toggle label { display: flex; gap: 0.5rem; align-items: center; padding: 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; }
.inquiry-toggle input { width: 1.1rem; min-height: auto; }
.form-fieldset { display: grid; gap: 1rem; padding: 0; border: 0; }
.form-fieldset[hidden] { display: none; }

/* Embedded form slot. The form is a separate document, so none of this reaches
   inside it — its own styling is configured provider-side. Deliberately no
   background and no padding: each slot sits in a card that already supplies a
   surface, and adding another double-insets the form. --ghl-form-h is set inline
   per slot from a measured height, so the space is reserved before the provider's
   resize script reports the real one. */
.ghl-form { position: relative; min-height: var(--ghl-form-h, 34rem); scroll-margin-top: calc(var(--nav-h) + var(--chrome-top) + 1.5rem); }
.ghl-form iframe { width: 100%; border: 0; }
.ghl-form__fallback { margin-top: 0.9rem; font-size: var(--text-sm); color: var(--color-body-muted); }
.ghl-form__fallback a { color: var(--color-primary); }

/* This line sits low on the demo band, where the gradient has climbed to
   --color-primary and nothing in the accent family clears the contrast bar.
   White + underline was worked out here first; layout.css now applies the same
   answer to every link on a dark section, and --color-link-on-dark carries the
   reasoning. This rule survives only because .ghl-form__fallback a sets
   --color-primary above and has to be overridden. */
.ghl-form--on-dark .ghl-form__fallback { color: var(--color-tint); }
.ghl-form--on-dark .ghl-form__fallback a {
	color: var(--color-link-on-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ghl-form--on-dark .ghl-form__fallback a:hover { text-decoration-thickness: 2px; }

/* An iframe prints as a blank box, and base.css already hides .btn on paper, so
   without this a printed /contact/ or /demo/ offers no way to make contact. */
@media print {
	.ghl-form { min-height: 0; }
	.ghl-form iframe { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.card:hover,
	.feature-card:hover,
	.benefit-card:hover,
	.integration-card:hover,
	.testimonial-card:hover,
	.btn:hover,
	.btn:focus-visible,
	.btn:active,
	.filter-pills a:hover,
	.filter-pills button:hover,
	.filter-pills a:focus-visible,
	.filter-pills button:focus-visible,
	.filter-pills a:active,
	.filter-pills button:active { transform: none; }
}