/**
 * Reusable components: buttons, badges, cards, accordion, stat tiles,
 * mock UI panels, and the constellation particle mark.
 */

/* ---------- Buttons ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	height: 36px;
	padding: var(--space-2xs);
	border-radius: var(--radius-sm);
	font-size: var(--fs-micro);
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	/* No transform/lift on hover here — measured directly against the
	   reference's own buttons (both the filled primary and the outlined
	   secondary): hovering never moves or scales them, only the fill
	   color darkens a step. */
	transition: background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.btn--primary {
	background: var(--color-button-bg);
	color: var(--color-button-text);
}

.btn--primary:hover {
	background: var(--color-button-bg-hover);
}

.btn--secondary {
	background: var(--color-surface);
	color: var(--color-text-primary);
	border-color: var(--color-border-strong);
}

.btn--secondary:hover {
	background: var(--color-border);
}

.btn--lg {
	height: 44px;
	padding-inline: 26px;
	font-size: var(--fs-micro);
}

/* ---------- Badge / pill ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--color-text-secondary);
}

/* Only this chip gets its own pill treatment (border + pill background);
   the icon and description that follow sit directly on the page
   background, no outer box around the whole row. */
.badge__pill {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding-inline: var(--space-2xs);
	border-radius: var(--radius-pill);
	background: var(--color-surface-raised);
	border: 1px solid var(--color-border-strong);
	font-weight: 500;
	color: var(--color-text-primary);
}

.badge__icon {
	/* Color (#a6a09b = --color-text-secondary) measured directly from the
	   reference's dot icon; 6:8 is the single-cluster viewBox ratio. */
	flex: none;
	width: 6px;
	height: 8px;
	color: var(--color-text-secondary);
}

.badge__text {
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--color-text-secondary);
}

.status-dot {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	font-size: var(--fs-micro);
	color: var(--color-text-secondary);
}

.status-dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-accent-green);
	box-shadow: 0 0 0 3px rgba(16, 236, 144, 0.15);
}

.status-dot--pending::before {
	background: #e9a23b;
	box-shadow: 0 0 0 3px rgba(233, 162, 59, 0.15);
}

.status-dot--syncing::before {
	background: var(--color-accent-blue);
	box-shadow: 0 0 0 3px rgba(34, 102, 255, 0.15);
}

.severity {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding-inline: var(--space-2xs);
	border-radius: var(--radius-xs);
	font-size: 11px;
	font-weight: 600;
	background: var(--color-accent-red-soft);
	color: var(--color-accent-red);
}

.severity--low {
	background: var(--color-surface-raised);
	color: var(--color-text-tertiary);
}

.severity--medium {
	background: rgba(233, 162, 59, 0.15);
	color: #e9a23b;
}

/* ---------- Cards ---------- */

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	box-shadow: var(--shadow-card);
}

.card--compact {
	padding: var(--space-sm);
}

.card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
}

.card-row + .card-row {
	border-top: 1px solid var(--color-border);
}

.card-row__title {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--color-text-primary);
}

.card-row__meta {
	font-size: var(--fs-micro);
	color: var(--color-text-tertiary);
}

.careers-role-row {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.careers-role-row__apply {
	font-size: var(--fs-micro);
	font-weight: 600;
	color: var(--color-text-tertiary);
	transition: color var(--duration-fast) var(--ease-standard);
}

.careers-role-row:hover .careers-role-row__apply {
	color: var(--color-accent-blue);
}

/* ---------- Source row (connected-sources ticker: icon + name/stat stack) ---------- */

.source-row {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	padding-block: var(--space-xs);
}

.source-row + .source-row {
	border-top: 1px solid var(--color-border);
}

/* No circle/background here — the reference's own icon wrapper is a
   plain transparent 32px box (confirmed live: border-radius 0, no
   background-color), with the colored mark filling most of it directly. */
.source-row__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.source-row__icon svg {
	width: 28px;
	height: 28px;
}

.source-row__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

/* Name/stat sizing and weights below are copied from the live reference's
   own computed styles (16px/400 name, 11px/500 mono stat line), not
   estimated — matched via devtools inspection, round 22. */
.source-row__name {
	font-size: var(--fs-body);
	line-height: 24px;
	font-weight: 400;
	color: var(--color-text-primary);
}

.source-row__meta {
	display: flex;
	align-items: center;
	gap: var(--space-3xs);
	font-family: var(--font-mono);
	font-size: 11px;
	line-height: 15px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.source-row__stat {
	color: var(--color-accent-green);
}

.source-row__sub,
.source-row__dot {
	color: var(--color-text-quaternary);
}

.source-row--footer {
	justify-content: space-between;
	padding-block: var(--space-xs);
}

.source-row__footer-stats {
	font-size: 11px;
	line-height: 15px;
	font-weight: 500;
	color: var(--color-text-quaternary);
}

.source-row__add {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
}

.source-row__add-label {
	font-size: var(--fs-micro);
	line-height: 16px;
	font-weight: 500;
	color: var(--color-text-tertiary);
}

.source-row__add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-tertiary);
	line-height: 1;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.source-row__add-btn:hover {
	color: var(--color-text-primary);
	border-color: var(--color-text-tertiary);
}

/* ---------- Feature bullets (icon stacked above its line of text) ---------- */

.bullet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2xs);
	flex: 1;
	min-width: 0;
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
}

.bullet__icon {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--color-text-tertiary);
}

.feature-row__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--color-text-primary);
	width: fit-content;
}

.feature-row__link svg {
	width: 14px;
	height: 14px;
	transition: transform var(--duration-fast) var(--ease-standard);
}

.feature-row__link:hover svg {
	transform: translateX(3px);
}

/* ---------- Stat tiles ---------- */

/* 80px — matches the reference's own icon-box/number ratio (measured
   live at this same 1440px width: a 64px icon above a 48px number,
   64/48 ≈ 1.33 — applied to this project's own 60px stat number instead
   of copying 64px outright, since copying the raw px would under-size it
   next to a bigger number than the reference's own). */
.stat-tile__icon-wrap {
	position: relative;
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-bottom: var(--space-sm);
}

/* Rest color matches the reference's own stroke color measured directly
   off its markup (rgb(41,37,36), an exact match for --color-border).
   --icon-stagger (set per-icon on the <svg>) offsets each icon's own
   cycle so the row doesn't move in unison; the actual per-icon motion
   lives on each icon's own moving part below (round 34 — reread from a
   6-column, 34-frame contact sheet built from the user's screen
   recording, which is what finally made the real mechanics legible:
   each icon collapses/vanishes/reforms on its own ~3s loop rather than
   just pulsing color in place). */
.stat-tile__icon {
	width: 100%;
	height: 100%;
	color: var(--color-border);
}

/* "16x": the pill squishes flat (scaleY → ~0) into a thin blue line,
   vanishes, then grows back from nothing with a brief blue fill, before
   settling back to a plain outline. */
.icon-anim-collapse-y {
	transform-box: fill-box;
	transform-origin: center;
	animation: icon-collapse-y 3.2s ease-in-out infinite;
	animation-delay: var(--icon-stagger, 0ms);
}

/* "80%": all 4 lines flatten edge-on (scaleX → ~0) into a thin vertical
   dotted column, vanish, then unfold back out — same collapse mechanic
   as the pill, just on the other axis since these lines are horizontal.
   Each line gets a few ms of its own delay (added in stats-row.php) so
   they don't all flip as one rigid block. */
.icon-anim-collapse-x {
	transform-box: fill-box;
	transform-origin: center;
	animation: icon-collapse-x 3.2s ease-in-out infinite;
	animation-delay: var(--icon-stagger, 0ms);
}

/* "47%"'s side bars — fade in to join the always-visible center bar
   (3 equal bars), then fade back out to just the center one, looping. */
.icon-anim-bar-side {
	transform-box: fill-box;
	transform-origin: center;
	animation: icon-bar-side 3.2s ease-in-out infinite;
}

/* "47%"'s brief rainbow "X" flick — two short diagonal strokes that
   swing out from the center line and back, right before the side bars
   fade in. */
.icon-anim-x-wing {
	transform-box: fill-box;
	transform-origin: center;
	animation: icon-x-wing 3.2s ease-in-out infinite;
	animation-delay: var(--icon-stagger, 0ms);
}

/* "4.2hrs": the arc + needle breathe (dim down, come back) on the same
   3.2s cycle as the other icons. */
.icon-anim-gauge-fade {
	animation: icon-gauge-fade 3.2s ease-in-out infinite;
	animation-delay: var(--icon-stagger, 0ms);
}

/* "4.2hrs"'s small rainbow tick-fan — a separate, much slower, fully
   independent rotation around the arc's own center, so the colored bit
   lands somewhere different each time the arc fades back in (matching
   the reference, where it was never twice in the same spot). */
.icon-anim-tick-orbit {
	transform-origin: 12px 16px;
	animation: icon-tick-orbit 9s linear infinite;
}

.stat-tile__number {
	font-family: var(--font-display);
	font-size: var(--fs-stat);
	line-height: var(--lh-stat);
	letter-spacing: var(--ls-stat);
	font-weight: 700;
	color: var(--color-text-primary);
}

.stat-tile__label {
	margin-top: var(--space-2xs);
	font-size: var(--fs-small);
	color: var(--color-text-tertiary);
}

/* ---------- FAQ accordion ---------- */

/* A thin divider under every row (open or closed) — reference has
   --border-bottom-width:1px on each FAQ row's own wrapper (confirmed via
   devtools), so this sits on the whole item (trigger + panel together),
   not just the trigger, and still lands in the right place once a row
   opens. */
.accordion__item {
	border-bottom: 1px solid var(--color-border);
}

/* Always bold, bright white, open or closed — reference never dims a
   collapsed question (confirmed live: every row renders at the same
   weight/color regardless of state), so there's no .is-open-only rule
   here the way there used to be. */
.accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-sm);
	background: none;
	border: none;
	text-align: left;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-text-primary);
}

/* 5 small dots in a flat row at rest; measured off the reference's own
   markup (plain positioned divs, not an SVG) at 2x2px each, 4px apart.
   On open the middle three dip down into a shallow arc instead of
   switching to an "×" — same live measurement, comparing the row's
   "Neutral" vs "Down" variant. */
.accordion__dots {
	position: relative;
	flex: none;
	width: 18px;
	height: 10px;
}

.accordion__dot {
	position: absolute;
	top: 4px;
	width: 2px;
	height: 2px;
	border-radius: 1px;
	background: var(--color-text-tertiary);
	transition: transform var(--duration-base) var(--ease-standard);
}

.accordion__dot:nth-child(1) {
	left: 0;
}

.accordion__dot:nth-child(2) {
	left: 4px;
}

.accordion__dot:nth-child(3) {
	left: 8px;
}

.accordion__dot:nth-child(4) {
	left: 12px;
}

.accordion__dot:nth-child(5) {
	left: 16px;
}

.accordion__item.is-open .accordion__dot:nth-child(2) {
	transform: translateY(1.5px);
}

.accordion__item.is-open .accordion__dot:nth-child(3) {
	transform: translateY(4px);
}

.accordion__item.is-open .accordion__dot:nth-child(4) {
	transform: translateY(1.5px);
}

.accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--duration-base) var(--ease-standard);
}

.accordion__item.is-open .accordion__panel {
	grid-template-rows: 1fr;
}

.accordion__panel-inner {
	overflow: hidden;
}

.accordion__panel p {
	padding-bottom: var(--space-sm);
	font-size: var(--fs-small);
	max-width: 56ch;
}

/* ---------- Mock UI panel (chat / status widgets) ---------- */

.mock-panel {
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	/* Reserves space for the tallest phase (results: query row + results
	   card with all 3 account rows + footer buttons), measured directly
	   at 657px on the live page. Without this, the panel's own height
	   swings between phases — shortest at idle, tallest at results — and
	   every "problem" section (including this one) reflows on every
	   cycle, visibly shifting the "Cortex" section below it up and down.
	   Re-measure and update this value if the panel's content changes. */
	min-height: 660px;
}

/* initDemoPanel (main.js) hides a few all-or-nothing elements (results
   card, footer actions) via the hidden attribute before fading them in.
   Without this, [hidden]'s UA-stylesheet display:none loses to this
   file's own display:flex rules on the same elements — equal selector
   specificity, but author origin always beats user-agent origin. */
.mock-panel [hidden] {
	display: none !important;
}

/* Generic open/close collapse (height + fade), reused for both the query
   card's +/mic icon row and the idle quick-action row — same technique
   as .accordion__panel (grid-template-rows 0fr/1fr), so both rows
   animate shut instead of snapping away when the demo submits. */
.mock-panel__collapse {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	transition: grid-template-rows var(--duration-base) var(--ease-standard),
		opacity var(--duration-fast) var(--ease-standard);
}

.mock-panel__collapse.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
}

.mock-panel__collapse-inner {
	overflow: hidden;
}

/* ---------- Query card ---------- */

.mock-panel__query {
	border-radius: var(--radius-lg);
}

.mock-panel__query-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--fs-body);
}

.mock-panel__query-text {
	flex: 1;
	min-width: 0;
}

.mock-panel__status-pill {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-strong);
	font-size: var(--fs-small);
	color: var(--color-text-secondary);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}

.mock-panel__status-pill.is-visible {
	opacity: 1;
}

.mock-panel__query-icons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: var(--space-sm);
}

.mock-panel__plus-btn {
	border: none;
	background: none;
	padding: 0;
	font-size: 16px;
	color: var(--color-text-secondary);
	cursor: default;
}

/* Circular button both states: outlined while idle (mic), solid-filled
   once "typed" (send arrow) — confirmed against the live reference, not
   the rounded-square guess from an earlier pass. */
.mock-panel__send-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--color-border-strong);
	color: var(--color-text-secondary);
	transition: background-color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mock-panel__send-icon.is-send {
	background: var(--color-surface-raised);
	border-color: var(--color-border-strong);
	color: var(--color-text-primary);
}

.mock-panel__send-icon svg {
	width: 18px;
	height: 18px;
}

.mock-panel__icon-send {
	display: none;
}

.mock-panel__send-icon.is-send .mock-panel__icon-mic {
	display: none;
}

.mock-panel__send-icon.is-send .mock-panel__icon-send {
	display: block;
}

/* ---------- Idle state: quick-action row ---------- */

.mock-panel__idle-actions {
	display: flex;
	gap: var(--space-3xs);
	flex-wrap: wrap;
}

.mock-panel__idle-actions button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	height: 28px;
	padding-inline: var(--space-2xs);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: none;
	font-size: var(--fs-micro);
	font-weight: 500;
	color: var(--color-text-tertiary);
	cursor: pointer;
}

.mock-panel__idle-actions button svg {
	width: 14px;
	height: 14px;
}

/* ---------- Results card ---------- */

.mock-panel__results {
	border-radius: var(--radius-lg);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.mock-panel__results.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.mock-panel__flagged {
	font-family: var(--font-mono);
	font-size: var(--fs-small);
	color: var(--color-text-tertiary);
	opacity: 1;
	transition: opacity 0.25s var(--ease-standard);
}

/* JS adds .is-fading for ~250ms while swapping the text itself, so one
   status line crossfades into the next instead of snapping — matches
   "Scanning Salesforce" -> "Scoring by churn signal weight" -> "3
   accounts flagged" overlapping slightly in the reference recording. */
.mock-panel__flagged.is-fading {
	opacity: 0;
}

/* Rainbow shimmer across the whole status line while scanning/scoring —
   same brand gradient used for the hero step bars and feature bullets,
   applied as a text fill instead of a background bar. Not used for the
   final "3 accounts flagged" line (JS removes this class there). */
.mock-panel__flagged.is-rainbow {
	background: linear-gradient(90deg, var(--color-accent-blue), var(--color-accent-red), #f5a623, var(--color-accent-green));
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: shimmer-sweep 1.6s linear infinite;
}

.mock-panel__account {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	padding-block: var(--space-sm);
	border-top: 1px solid var(--color-border);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity var(--duration-base) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.mock-panel__account.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.mock-panel__account:first-of-type {
	margin-top: var(--space-sm);
}

.mock-panel__account-icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	color: var(--color-text-tertiary);
}

.mock-panel__account-icon svg {
	width: 18px;
	height: 18px;
	animation: spin 2.5s linear infinite;
}

.mock-panel__account-name {
	flex: 1;
	min-width: 0;
	font-size: var(--fs-body);
	font-weight: 600;
	color: var(--color-text-primary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Export / share row ---------- */

.mock-panel__footer-actions {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}

.mock-panel__footer-actions.is-visible {
	opacity: 1;
}

.mock-panel__footer-actions button {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	height: 40px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-strong);
	background: none;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--color-text-secondary);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.mock-panel__footer-actions button svg {
	width: 16px;
	height: 16px;
}

.mock-panel__footer-actions button:hover {
	color: var(--color-text-primary);
	border-color: var(--color-text-tertiary);
}

/* Dot + label next to the name, not a pill — the colored pill on the
   right is the reason/metric (.severity below), reversed from what this
   panel had before. */
.mock-panel__account-severity {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3xs);
	font-size: var(--fs-micro);
	color: var(--color-text-tertiary);
	white-space: nowrap;
}

.mock-panel__account-severity::before {
	content: '';
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.mock-panel__account-severity--high {
	color: var(--color-accent-red);
}

.mock-panel__account-severity--medium {
	color: #e9a23b;
}

/* ---------- Constellation mark ---------- */

.constellation {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.constellation__strand {
	fill: none;
	stroke: var(--color-text-secondary);
	stroke-width: 0.6;
	stroke-linecap: round;
}

.constellation__dots circle {
	fill: var(--color-text-secondary);
	opacity: 0.55;
}

.hero__art .constellation {
	transform: scale(2.6);
}

/* ---------- Footer nav columns ---------- */

.site-footer h3 {
	font-size: var(--fs-small);
	color: var(--color-text-primary);
	margin-bottom: var(--space-sm);
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.footer-menu a {
	font-size: var(--fs-small);
	color: var(--color-text-tertiary);
	transition: color var(--duration-fast) var(--ease-standard);
}

.footer-menu a:hover {
	color: var(--color-text-primary);
}

.footer__status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	flex: none;
	padding: var(--space-sm) var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
}

.footer__status-sep {
	width: 1px;
	height: 16px;
	background: var(--color-accent-blue);
}

.footer__uptime {
	font-size: var(--fs-micro);
	color: var(--color-text-quaternary);
	font-family: var(--font-mono);
	white-space: nowrap;
}

.footer__updates-text {
	font-size: var(--fs-micro);
	color: var(--color-text-tertiary);
}

/* ---------- Subscribe form ---------- */

.subscribe-form {
	display: flex;
	gap: var(--space-2xs);
}

.subscribe-form input[type='email'] {
	height: 36px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-primary);
	font-size: var(--fs-small);
	min-width: 220px;
}

.subscribe-form input[type='email']::placeholder {
	color: var(--color-text-quaternary);
}

.subscribe-form__success {
	height: 36px;
	display: flex;
	align-items: center;
	color: var(--color-accent-green);
	font-size: var(--fs-small);
}

/* ---------- Integrations directory filters ---------- */

.integrations-filter {
	height: 32px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: none;
	color: var(--color-text-tertiary);
	font-size: var(--fs-small);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.integrations-filter:hover {
	color: var(--color-text-primary);
	border-color: var(--color-border-strong);
}

.integrations-filter.is-active {
	background: var(--color-text-primary);
	color: var(--color-bg);
	border-color: var(--color-text-primary);
}

/* ---------- Pricing page ---------- */

.pricing-toggle {
	display: inline-flex;
	padding: 2px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
}

.pricing-toggle__btn {
	height: 28px;
	padding-inline: var(--space-sm);
	border-radius: var(--radius-pill);
	border: none;
	background: none;
	color: var(--color-text-tertiary);
	font-size: var(--fs-small);
	cursor: pointer;
}

.pricing-toggle__btn.is-active {
	background: var(--color-surface-raised);
	color: var(--color-text-primary);
}

/* ---------- Integrations directory ---------- */

.integrations-search {
	width: 100%;
	height: 40px;
	padding-left: calc(var(--space-sm) * 2 + 16px);
	padding-right: var(--space-sm);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-text-primary);
	font-size: var(--fs-small);
}

.integrations-search::placeholder {
	color: var(--color-text-quaternary);
}

.integrations-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-sm);
	color: #110f0d;
	font-size: var(--fs-small);
	font-weight: 700;
}