.relayhq-auth-card {
	width: 100%;
	max-width: 480px;
	padding: 32px;
	border: 1px solid #e2e6ea;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(25, 32, 38, 0.08);
}

.relayhq-auth-form {
	display: grid;
	gap: 20px;
}

.relayhq-field {
	display: grid;
	gap: 8px;
}

.relayhq-field label {
	font-weight: 600;
}

.relayhq-field input {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #cbd2d8;
	border-radius: 10px;
	background: #fff;
	font: inherit;
}

.relayhq-field input:focus {
	border-color: #4c5f6f;
	outline: 2px solid rgba(76, 95, 111, 0.16);
	outline-offset: 1px;
}

.relayhq-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
	color: #3f4b55;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
}

.relayhq-checkbox input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #1e2932;
}

.relayhq-button {
	min-height: 48px;
	padding: 11px 18px;
	border: 0;
	border-radius: 10px;
	background: #1e2932;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.relayhq-button:hover,
.relayhq-button:focus {
	background: #10171d;
	color: #fff;
}

.relayhq-auth-link {
	display: inline-block;
	margin-top: 20px;
	font-weight: 600;
}

.relayhq-helper {
	margin: -6px 0 0;
	color: #65717b;
	font-size: 0.92rem;
}

.relayhq-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin: 0 0 24px;
	padding: 16px 18px;
	border: 1px solid transparent;
	border-radius: 12px;
}

.relayhq-notice p {
	margin: 0;
}

.relayhq-notice--success {
	border-color: #b8ddc7;
	background: #edf8f1;
}

.relayhq-notice--warning {
	border-color: #ead39b;
	background: #fff8e7;
}

.relayhq-notice--error {
	border-color: #e2b6b6;
	background: #fff0f0;
}

.relayhq-notice--info {
	border-color: #c8d5df;
	background: #f1f6f9;
}

.relayhq-notice__action {
	flex: 0 0 auto;
	font-weight: 700;
}

@media (max-width: 600px) {
	.relayhq-auth-card {
		padding: 24px 20px;
		border-radius: 14px;
	}

	.relayhq-notice {
		align-items: flex-start;
		flex-direction: column;
	}
}

.relayhq-auth-card h2 {
	margin: 0 0 12px;
}

.relayhq-auth-card h2 + .relayhq-helper {
	margin: 0 0 22px;
}

.relayhq-code-input {
	max-width: 220px;
	font-size: 1.55rem !important;
	font-weight: 700;
	letter-spacing: 0.32em;
	text-align: center;
}

.relayhq-resend {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid #e2e6ea;
}

.relayhq-resend__question {
	margin: 0 0 5px;
	font-size: 0.92rem;
	font-weight: 600;
}

.relayhq-resend__form {
	display: inline;
	margin: 0;
}

.relayhq-resend__button {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.relayhq-resend__button:hover,
.relayhq-resend__button:focus {
	color: #10171d;
}

.relayhq-resend__button:disabled {
	color: #89939b;
	text-decoration: none;
	cursor: not-allowed;
}

.relayhq-resend__countdown {
	display: block;
	margin-top: 5px;
	color: #65717b;
	font-size: 0.8rem;
}

.relayhq-resend__countdown--limited {
	color: #8a6821;
}

.relayhq-auth-link--secondary {
	margin-top: 18px;
	font-size: 0.9rem;
}

/* RelayHQ customer portal content. */
.relayhq-dashboard,
.relayhq-websites,
.relayhq-messages {
	--relayhq-primary: #175046;
	--relayhq-primary-dark: #083025;
	--relayhq-primary-hover: #103f37;
	--relayhq-accent: #b6f37a;
	--relayhq-surface-soft: #f7faf8;
	--relayhq-border: #e3e9e6;
	--relayhq-muted: #66736e;
	--relayhq-muted-strong: #4f5f59;
	width: 100%;
	color: var(--relayhq-primary-dark);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.relayhq-websites,
.relayhq-messages {
	display: block;
	min-height: 0;
	height: auto;
	margin-top: -32px;
}

.relayhq-dashboard {
	margin-top: -32px;
}

.relayhq-websites--editor-preview,
.relayhq-messages--editor-preview,
.relayhq-dashboard--editor-preview {
	margin-top: 0;
}

.relayhq-dashboard *,
.relayhq-dashboard *::before,
.relayhq-dashboard *::after,
.relayhq-websites *,
.relayhq-websites *::before,
.relayhq-websites *::after,
.relayhq-messages *,
.relayhq-messages *::before,
.relayhq-messages *::after {
	box-sizing: border-box;
}

.relayhq-dashboard h1,
.relayhq-dashboard h2,
.relayhq-dashboard h3,
.relayhq-dashboard p,
.relayhq-websites h1,
.relayhq-websites h2,
.relayhq-websites h3,
.relayhq-websites p,
.relayhq-messages h1,
.relayhq-messages h2,
.relayhq-messages h3,
.relayhq-messages p {
	margin-top: 0;
}

.relayhq-dashboard p:last-child,
.relayhq-websites p:last-child,
.relayhq-messages p:last-child {
	margin-bottom: 0;
}

.relayhq-portal-page-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--relayhq-border);
}

.relayhq-portal-page-header__copy {
	min-width: 0;
}

.relayhq-portal-page-header__copy h1 {
	margin-bottom: 5px;
	color: var(--relayhq-primary-dark);
	font-size: clamp(30px, 2.35vw, 36px);
	font-weight: 720;
	line-height: 1.12;
	letter-spacing: -0.035em;
}

.relayhq-portal-page-header__copy p {
	max-width: 720px;
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 16px;
	line-height: 1.5;
}

.relayhq-portal-page-header__action {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: flex-end;
	min-width: 1px;
}

.relayhq-portal-page-header__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 17px;
	border: 1px solid var(--relayhq-primary);
	border-radius: 9px;
	background: var(--relayhq-primary);
	color: #fff;
	font-weight: 720;
	text-decoration: none;
}

.relayhq-portal-page-header__button:hover,
.relayhq-portal-page-header__button:focus-visible {
	background: var(--relayhq-primary-hover);
	color: #fff;
}

.relayhq-dashboard-notifications {
	display: grid;
	gap: 10px;
	margin-top: 20px;
}

.relayhq-dashboard-alert {
	display: grid;
	grid-template-columns: 10px minmax(0, 1fr);
	align-items: flex-start;
	gap: 13px;
	padding: 14px 16px;
	border: 1px solid #eadba8;
	border-radius: 10px;
	background: #fffaf0;
	color: #654e0c;
}

.relayhq-dashboard-alert--critical {
	border-color: #edc7c7;
	background: #fff5f5;
	color: #7b2e2e;
}

.relayhq-dashboard-alert__indicator {
	width: 8px;
	height: 8px;
	margin-top: 7px;
	border-radius: 50%;
	background: #db9c20;
}

.relayhq-dashboard-alert--critical .relayhq-dashboard-alert__indicator {
	background: #c54a4a;
}

.relayhq-dashboard-alert strong {
	display: block;
	margin-bottom: 2px;
	font-size: 15px;
	font-weight: 750;
}

.relayhq-dashboard-alert p {
	margin-bottom: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.45;
}

.relayhq-dashboard-feature,
.relayhq-dashboard-card,
.relayhq-dashboard-editor-message {
	border: 1px solid var(--relayhq-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(8, 48, 37, 0.045);
}

.relayhq-dashboard-feature {
	display: grid;
	grid-template-columns: minmax(250px, 0.78fr) minmax(420px, 1.22fr);
	gap: clamp(28px, 4vw, 52px);
	min-height: 315px;
	margin-top: 20px;
	padding: clamp(25px, 3vw, 36px);
}

.relayhq-dashboard-feature__intro {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.relayhq-dashboard-eyebrow {
	margin-bottom: 7px;
	color: var(--relayhq-primary);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.relayhq-dashboard-feature h2 {
	margin-bottom: 9px;
	color: var(--relayhq-primary-dark);
	font-size: clamp(23px, 2vw, 28px);
	font-weight: 720;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.relayhq-dashboard-feature__description {
	max-width: 560px;
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 15px;
	line-height: 1.55;
}

.relayhq-dashboard-progress,
.relayhq-dashboard-feature__note {
	margin: 18px 0 0;
	color: var(--relayhq-primary);
	font-size: 13px;
	font-weight: 720;
}

.relayhq-dashboard-instruction {
	margin-top: auto;
	padding: 15px 16px;
	border: 1px solid #dce6e2;
	border-radius: 10px;
	background: var(--relayhq-surface-soft);
}

.relayhq-dashboard-instruction strong {
	display: block;
	margin-bottom: 3px;
	color: var(--relayhq-primary-dark);
	font-size: 14px;
}

.relayhq-dashboard-instruction p {
	margin-bottom: 0;
	color: var(--relayhq-muted-strong);
	font-size: 13px;
	line-height: 1.48;
}

.relayhq-onboarding-steps {
	display: grid;
	align-self: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	list-style: none;
	overflow: hidden;
}

.relayhq-onboarding-step {
	display: grid;
	grid-template-columns: 18px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	min-height: 54px;
	padding: 11px 14px;
	background: #fff;
}

.relayhq-onboarding-step + .relayhq-onboarding-step {
	border-top: 1px solid var(--relayhq-border);
}

.relayhq-onboarding-step--current {
	background: #f4f9f6;
}

.relayhq-onboarding-step__marker {
	position: relative;
	width: 12px;
	height: 12px;
	border: 2px solid #a7b2ad;
	border-radius: 50%;
	background: #fff;
}

.relayhq-onboarding-step--complete .relayhq-onboarding-step__marker {
	border-color: var(--relayhq-primary);
	background: var(--relayhq-primary);
}

.relayhq-onboarding-step--complete .relayhq-onboarding-step__marker::after {
	position: absolute;
	top: 1px;
	left: 3px;
	width: 3px;
	height: 6px;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	content: "";
	transform: rotate(45deg);
}

.relayhq-onboarding-step--current .relayhq-onboarding-step__marker {
	border-color: var(--relayhq-primary);
	box-shadow: 0 0 0 4px rgba(182, 243, 122, 0.28);
}

.relayhq-onboarding-step__label {
	min-width: 0;
	color: var(--relayhq-primary-dark);
	font-size: 15px;
	font-weight: 680;
	line-height: 1.35;
}

.relayhq-onboarding-step--future .relayhq-onboarding-step__label {
	color: #77837e;
}

.relayhq-onboarding-step__state {
	color: var(--relayhq-muted);
	font-size: 12px;
	font-weight: 650;
	white-space: nowrap;
}

.relayhq-dashboard-sites {
	display: grid;
	align-content: start;
	gap: 10px;
}

.relayhq-dashboard-site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 66px;
	padding: 13px 15px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: #fff;
}

.relayhq-dashboard-site__copy {
	min-width: 0;
}

.relayhq-dashboard-site__copy strong {
	display: block;
	margin-bottom: 2px;
	color: var(--relayhq-primary-dark);
	font-size: 15px;
	font-weight: 720;
	overflow-wrap: anywhere;
}

.relayhq-dashboard-site__copy p,
.relayhq-dashboard-sites__remainder {
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 13px;
	line-height: 1.4;
}

.relayhq-dashboard-sites__remainder {
	padding: 5px 2px 0;
	font-weight: 650;
}

.relayhq-dashboard-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 20px;
}

.relayhq-dashboard-card {
	display: flex;
	min-width: 0;
	min-height: 180px;
	padding: 22px 23px;
	flex-direction: column;
}

.relayhq-dashboard-card--primary {
	border-color: var(--relayhq-primary);
	background: var(--relayhq-primary);
	color: #fff;
	box-shadow: 0 12px 30px rgba(23, 80, 70, 0.16);
}

.relayhq-dashboard-card__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.relayhq-dashboard-card__topline h3 {
	margin-bottom: 0;
	color: var(--relayhq-primary-dark);
	font-size: 15px;
	font-weight: 720;
	line-height: 1.35;
}

.relayhq-dashboard-card--primary .relayhq-dashboard-card__topline h3,
.relayhq-dashboard-card--primary .relayhq-dashboard-card__metric,
.relayhq-dashboard-card--primary .relayhq-dashboard-card__meta,
.relayhq-dashboard-card--primary .relayhq-dashboard-card__empty {
	color: #fff;
}

.relayhq-dashboard-card__metric {
	margin: auto 0 5px;
	padding-top: 22px;
	color: var(--relayhq-primary-dark);
	font-size: clamp(37px, 3.4vw, 46px);
	font-weight: 740;
	line-height: 0.98;
	letter-spacing: -0.045em;
}

.relayhq-dashboard-card__metric--time {
	font-size: clamp(31px, 2.9vw, 40px);
	letter-spacing: -0.035em;
}

.relayhq-dashboard-card__metric--empty {
	color: #9aa39f;
}

.relayhq-dashboard-card__meta,
.relayhq-dashboard-card__empty {
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 13px;
	line-height: 1.45;
}

.relayhq-dashboard-card__empty {
	margin-top: auto;
	padding-top: 22px;
}

.relayhq-dashboard-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	padding: 4px 9px;
	border-radius: 999px;
	background: #e4f4ec;
	color: #176247;
	font-size: 11px;
	font-weight: 760;
	line-height: 1.2;
	white-space: nowrap;
}

.relayhq-dashboard-status--active,
.relayhq-dashboard-status--ok,
.relayhq-dashboard-status--ready {
	background: #e4f4ec;
	color: #176247;
}

.relayhq-dashboard-status--low,
.relayhq-dashboard-status--attention,
.relayhq-dashboard-status--setup,
.relayhq-dashboard-status--warning {
	background: #fff0c7;
	color: #755500;
}

.relayhq-dashboard-status--empty,
.relayhq-dashboard-status--problem,
.relayhq-dashboard-status--inactive {
	background: #fbe5e5;
	color: #8b3030;
}

.relayhq-dashboard-status--pending,
.relayhq-dashboard-status--unavailable {
	background: #edf1ef;
	color: #56635e;
}

.relayhq-dashboard-card--primary .relayhq-dashboard-status {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.relayhq-dashboard-card--primary .relayhq-dashboard-status--low,
.relayhq-dashboard-card--primary .relayhq-dashboard-status--empty {
	background: var(--relayhq-accent);
	color: var(--relayhq-primary-dark);
}

.relayhq-dashboard-editor-message {
	margin-top: 20px;
	padding: 21px;
	background: var(--relayhq-surface-soft);
}

.relayhq-dashboard-editor-message strong {
	display: block;
	margin-bottom: 4px;
	color: var(--relayhq-primary-dark);
}

.relayhq-dashboard-editor-message p {
	margin-bottom: 0;
	color: var(--relayhq-muted);
}

@media (max-width: 1100px) {
	.relayhq-dashboard-feature {
		grid-template-columns: minmax(220px, 0.72fr) minmax(360px, 1.28fr);
		gap: 28px;
	}

	.relayhq-dashboard-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.relayhq-dashboard-card:last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 780px) {
	.relayhq-dashboard-feature {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.relayhq-dashboard-instruction {
		margin-top: 22px;
	}
}

@media (max-width: 680px) {
	.relayhq-portal-page-header {
		flex-direction: column;
		gap: 14px;
		padding-bottom: 18px;
	}

	.relayhq-portal-page-header__copy h1 {
		font-size: 28px;
	}

	.relayhq-portal-page-header__copy p {
		font-size: 15px;
	}

	.relayhq-portal-page-header__action {
		justify-content: flex-start;
		width: 100%;
	}

	.relayhq-dashboard-feature {
		gap: 22px;
		margin-top: 16px;
		padding: 21px 19px;
	}

	.relayhq-dashboard-feature h2 {
		font-size: 23px;
	}

	.relayhq-dashboard-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 13px;
		margin-top: 14px;
	}

	.relayhq-dashboard-card:last-child {
		grid-column: auto;
	}

	.relayhq-dashboard-card {
		min-height: 160px;
		padding: 20px;
	}

	.relayhq-dashboard-card__metric {
		font-size: 39px;
	}

	.relayhq-dashboard-card__metric--time {
		font-size: 34px;
	}

	.relayhq-dashboard-site {
		align-items: flex-start;
	}

	.relayhq-portal-page-header__button {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.relayhq-onboarding-step {
		grid-template-columns: 18px minmax(0, 1fr);
		gap: 9px;
	}

	.relayhq-onboarding-step__state {
		grid-column: 2;
		white-space: normal;
	}

	.relayhq-dashboard-site {
		flex-direction: column;
		gap: 9px;
	}

	.relayhq-dashboard-status {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
}


/* RelayHQ customer websites overview. */
.relayhq-websites-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 18px;
	border: 1px solid var(--relayhq-border);
	border-radius: 11px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(8, 48, 37, 0.035);
}

.relayhq-websites-summary__count {
	margin: 0;
	color: var(--relayhq-muted-strong);
	font-size: 14px;
}

.relayhq-websites-summary__count strong {
	margin-right: 4px;
	color: var(--relayhq-primary-dark);
	font-size: 18px;
	font-weight: 760;
}

.relayhq-websites-summary__states {
	display: flex;
	align-items: center;
	gap: 18px;
	color: var(--relayhq-muted);
	font-size: 13px;
	white-space: nowrap;
}

.relayhq-websites-summary__states span + span {
	position: relative;
	padding-left: 18px;
}

.relayhq-websites-summary__states span + span::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #a9b4af;
	content: "";
	transform: translateY(-50%);
}

.relayhq-websites-summary__states strong {
	color: var(--relayhq-primary-dark);
	font-weight: 760;
}

.relayhq-websites-summary__states span:first-child strong {
	color: #126d51;
}

.relayhq-websites-list {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

.relayhq-website-row,
.relayhq-websites-empty {
	border: 1px solid var(--relayhq-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(8, 48, 37, 0.04);
}

.relayhq-website-row {
	position: relative;
	min-width: 0;
	overflow: hidden;
}

.relayhq-website-row[open] {
	box-shadow: 0 12px 34px rgba(8, 48, 37, 0.065);
}

.relayhq-website-row__summary {
	display: grid;
	grid-template-columns: 12px minmax(260px, 1fr) minmax(340px, auto) 28px;
	align-items: center;
	gap: 16px;
	min-height: 84px;
	padding: 17px 20px;
	list-style: none;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.relayhq-website-row__summary::-webkit-details-marker {
	display: none;
}

.relayhq-website-row__summary::marker {
	content: "";
}

.relayhq-website-row__summary:hover {
	background: #fbfdfc;
}

.relayhq-website-row__summary:focus-visible {
	outline: 3px solid rgba(23, 80, 70, 0.18);
	outline-offset: -3px;
}

.relayhq-website-row__indicator {
	display: block;
	width: 12px;
	height: 12px;
	border: 0;
	border-radius: 50%;
	background: var(--relayhq-primary);
	box-shadow: 0 0 0 5px rgba(23, 80, 70, 0.1);
}

.relayhq-website-row--active .relayhq-website-row__indicator {
	background: #16815f;
	box-shadow: 0 0 0 5px rgba(22, 129, 95, 0.14);
}

.relayhq-website-row--active .relayhq-website-row__status > span {
	color: #126d51;
}

.relayhq-website-row--setup .relayhq-website-row__indicator,
.relayhq-website-row--warning .relayhq-website-row__indicator {
	border-color: rgba(216, 154, 32, 0.14);
	background: #d89a20;
	box-shadow: 0 0 0 4px rgba(216, 154, 32, 0.1);
}

.relayhq-website-row--problem .relayhq-website-row__indicator,
.relayhq-website-row--inactive .relayhq-website-row__indicator {
	border-color: rgba(197, 74, 74, 0.14);
	background: #c54a4a;
	box-shadow: 0 0 0 4px rgba(197, 74, 74, 0.1);
}

.relayhq-website-row__identity {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.relayhq-website-row__identity strong {
	color: var(--relayhq-primary-dark);
	font-size: 16px;
	font-weight: 740;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.relayhq-website-row__identity span {
	color: var(--relayhq-muted);
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.relayhq-website-row__meta {
	display: grid;
	grid-template-columns: minmax(150px, 1fr) minmax(145px, 1fr);
	align-items: center;
	gap: 24px;
}

.relayhq-website-row__status,
.relayhq-website-row__contact {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.relayhq-website-row__status > span,
.relayhq-website-row__contact strong {
	color: var(--relayhq-primary-dark);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}

.relayhq-website-row__status small,
.relayhq-website-row__contact small {
	color: var(--relayhq-muted);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.35;
}

.relayhq-website-row__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--relayhq-primary);
	transition: background-color 160ms ease, transform 160ms ease;
}

.relayhq-website-row__toggle svg {
	display: block;
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.relayhq-website-row[open] .relayhq-website-row__toggle {
	background: #eef7f2;
	transform: rotate(180deg);
}

.relayhq-website-row__panel {
	padding: 0 20px 20px 48px;
	border-top: 1px solid var(--relayhq-border);
	background: #fbfdfc;
}

.relayhq-website-row__message {
	margin: 18px 0 0;
	padding: 11px 13px;
	border-radius: 8px;
	background: #fff7e8;
	color: #765610;
	font-size: 13px;
	line-height: 1.45;
}

.relayhq-website-row--problem .relayhq-website-row__message,
.relayhq-website-row--inactive .relayhq-website-row__message {
	background: #fff1f1;
	color: #7b2e2e;
}

.relayhq-website-row__details {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px 24px;
	margin: 0;
	padding: 20px 0 0;
}

.relayhq-website-row__details div {
	min-width: 0;
}

.relayhq-website-row__details dt {
	margin-bottom: 4px;
	color: var(--relayhq-muted);
	font-size: 10px;
	font-weight: 740;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.relayhq-website-row__details dd {
	margin: 0;
	color: var(--relayhq-primary-dark);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.relayhq-website-row__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--relayhq-border);
}

.relayhq-website-row__actions .relayhq-button {
	min-height: 38px;
	padding: 9px 14px;
	border: 1px solid var(--relayhq-primary);
	border-radius: 8px;
	background: #fff;
	color: var(--relayhq-primary);
	font-size: 13px;
	line-height: 1.2;
	text-decoration: none;
}

.relayhq-website-row__actions .relayhq-button:hover,
.relayhq-website-row__actions .relayhq-button:focus-visible {
	background: #eef7f2;
	color: var(--relayhq-primary-dark);
}

.relayhq-websites-empty-state {
	display: grid;
	gap: 18px;
	margin-top: 18px;
}

.relayhq-websites-empty {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
	gap: 40px;
	margin: 0;
	padding: 34px;
}

.relayhq-websites-empty__intro {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	min-width: 0;
}

.relayhq-websites-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #eef7f2;
	color: var(--relayhq-primary);
	flex: 0 0 48px;
}

.relayhq-websites-empty__icon svg {
	display: block;
	width: 24px !important;
	height: 24px !important;
	max-width: 24px;
	fill: none !important;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.relayhq-websites-empty h2 {
	margin: 1px 0 8px;
	color: var(--relayhq-primary-dark);
	font-size: 21px;
	font-weight: 740;
	line-height: 1.3;
}

.relayhq-websites-empty p {
	max-width: 520px;
	margin: 0;
	color: var(--relayhq-muted);
	font-size: 14px;
	line-height: 1.6;
}

.relayhq-websites-empty__steps {
	padding: 22px 24px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: #f7faf8;
}

.relayhq-websites-empty__steps h3 {
	margin: 0 0 15px;
	color: var(--relayhq-primary-dark);
	font-size: 14px;
	font-weight: 740;
}

.relayhq-websites-empty__steps ol {
	display: grid;
	gap: 13px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: relayhq-website-step;
}

.relayhq-websites-empty__steps li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	align-items: start;
	gap: 11px;
	color: var(--relayhq-primary-dark);
	font-size: 13px;
	line-height: 1.5;
	counter-increment: relayhq-website-step;
}

.relayhq-websites-empty__steps li::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--relayhq-accent);
	color: var(--relayhq-primary-dark);
	content: counter(relayhq-website-step);
	font-size: 12px;
	font-weight: 780;
}

.relayhq-websites-empty-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.relayhq-websites-empty-action-card {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	column-gap: 16px;
	row-gap: 20px;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--relayhq-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(8, 48, 37, 0.04);
}

.relayhq-websites-empty-action-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #eef7f2;
	color: var(--relayhq-primary);
	grid-row: 1 / span 2;
}

.relayhq-websites-empty-action-card__icon svg {
	display: block;
	width: 23px !important;
	height: 23px !important;
	max-width: 23px;
	fill: none !important;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.relayhq-websites-empty-action-card__content {
	min-width: 0;
}

.relayhq-websites-empty-action-card h3 {
	margin: 0 0 7px;
	color: var(--relayhq-primary-dark);
	font-size: 16px;
	font-weight: 760;
	line-height: 1.35;
}

.relayhq-websites-empty-action-card p {
	margin: 0;
	color: var(--relayhq-muted);
	font-size: 13px;
	line-height: 1.55;
}

.relayhq-websites-empty-action-card .relayhq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	min-height: 42px;
	padding: 9px 15px;
	border: 1px solid var(--relayhq-primary);
	border-radius: 8px;
	background: var(--relayhq-primary);
	color: #fff;
	font-size: 13px;
	font-weight: 730;
	line-height: 1.2;
	text-decoration: none;
	grid-column: 2;
}

.relayhq-websites-empty-action-card .relayhq-button:hover,
.relayhq-websites-empty-action-card .relayhq-button:focus-visible {
	background: var(--relayhq-primary-dark);
	color: #fff;
}

.relayhq-websites-empty-action-card .relayhq-button--secondary {
	background: #fff;
	color: var(--relayhq-primary);
}

.relayhq-websites-empty-action-card .relayhq-button--secondary:hover,
.relayhq-websites-empty-action-card .relayhq-button--secondary:focus-visible {
	background: #eef7f2;
	color: var(--relayhq-primary-dark);
}

@media (max-width: 920px) {
	.relayhq-website-row__summary {
		grid-template-columns: 12px minmax(0, 1fr) 28px;
	}

	.relayhq-website-row__meta {
		grid-column: 2 / 3;
		grid-row: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}

	.relayhq-website-row__toggle {
		grid-column: 3;
		grid-row: 1;
	}

	.relayhq-website-row__details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.relayhq-websites-empty {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.relayhq-websites-empty-actions {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 680px) {
	.relayhq-websites-empty {
		padding: 24px 20px;
	}

	.relayhq-websites-empty__intro {
		gap: 13px;
	}

	.relayhq-websites-empty__steps {
		padding: 18px;
	}

	.relayhq-websites-empty-action-card {
		grid-template-columns: 42px minmax(0, 1fr);
		column-gap: 13px;
		padding: 20px;
	}

	.relayhq-websites-empty-action-card__icon {
		width: 42px;
		height: 42px;
	}

	.relayhq-websites-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.relayhq-websites-summary__states {
		gap: 13px;
		white-space: normal;
	}

	.relayhq-website-row__summary {
		gap: 12px;
		padding: 16px;
	}

	.relayhq-website-row__meta {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.relayhq-website-row__panel {
		padding: 0 16px 18px 40px;
	}

	.relayhq-website-row__details {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	.relayhq-website-row__actions {
		justify-content: stretch;
	}

	.relayhq-website-row__actions .relayhq-button {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.relayhq-website-row__summary {
		grid-template-columns: 10px minmax(0, 1fr) 26px;
		padding: 15px 14px;
	}

	.relayhq-website-row__panel {
		padding: 0 14px 16px 36px;
	}
}

/* RelayHQ website connection authorization. */
.relayhq-connection {
	--relayhq-connection-primary: #175046;
	--relayhq-connection-primary-dark: #083025;
	--relayhq-connection-primary-hover: #103f37;
	--relayhq-connection-border: #e3e9e6;
	--relayhq-connection-muted: #66736e;
	width: 100%;
	max-width: 720px;
	color: var(--relayhq-connection-primary-dark);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.relayhq-connection *,
.relayhq-connection *::before,
.relayhq-connection *::after {
	box-sizing: border-box;
}

.relayhq-connection-card {
	position: relative;
	padding: 32px;
	border: 1px solid var(--relayhq-connection-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(8, 48, 37, 0.07);
}

.relayhq-connection-card h2 {
	margin: 0 0 12px;
	color: var(--relayhq-connection-primary-dark);
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	line-height: 1.2;
}

.relayhq-connection-card__status {
	position: absolute;
	top: 28px;
	right: 28px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #d29b24;
	box-shadow: 0 0 0 5px rgba(210, 155, 36, 0.12);
}

.relayhq-connection-card__status--success {
	background: #27855f;
	box-shadow: 0 0 0 5px rgba(39, 133, 95, 0.12);
}

.relayhq-connection-card__status--neutral {
	background: #8a9691;
	box-shadow: 0 0 0 5px rgba(138, 150, 145, 0.12);
}

.relayhq-connection-card__status--error {
	background: #b84c4c;
	box-shadow: 0 0 0 5px rgba(184, 76, 76, 0.12);
}

.relayhq-connection-card__eyebrow {
	margin: 0 0 8px;
	color: var(--relayhq-connection-primary);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.relayhq-connection-card__intro {
	max-width: 580px;
	margin: 0;
	color: var(--relayhq-connection-muted);
}

.relayhq-connection-site {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 26px 0;
	padding: 18px;
	border: 1px solid var(--relayhq-connection-border);
	border-radius: 14px;
	background: #f7faf8;
}

.relayhq-connection-site__icon {
	display: grid;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	place-items: center;
	border-radius: 12px;
	background: #e8f3ed;
	color: var(--relayhq-connection-primary);
}

.relayhq-connection-site__icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.relayhq-connection-site strong,
.relayhq-connection-site span {
	display: block;
}

.relayhq-connection-site strong {
	margin-bottom: 2px;
	font-size: 1rem;
}

.relayhq-connection-site span {
	color: var(--relayhq-connection-muted);
	font-size: 0.92rem;
	word-break: break-word;
}

.relayhq-connection-card__helper {
	margin: 0 0 24px;
	color: var(--relayhq-connection-muted);
	font-size: 0.92rem;
}

.relayhq-connection-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.relayhq-connection .relayhq-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 11px 18px;
	border: 1px solid var(--relayhq-connection-primary-dark);
	border-radius: 10px;
	background: var(--relayhq-connection-primary-dark);
	color: #fff;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.relayhq-connection .relayhq-button:hover,
.relayhq-connection .relayhq-button:focus {
	border-color: var(--relayhq-connection-primary-hover);
	background: var(--relayhq-connection-primary-hover);
	color: #fff;
}

.relayhq-connection .relayhq-button--secondary {
	border-color: #cfd8d4;
	background: #fff;
	color: var(--relayhq-connection-primary-dark);
}

.relayhq-connection .relayhq-button--secondary:hover,
.relayhq-connection .relayhq-button--secondary:focus {
	border-color: #aebdb6;
	background: #f3f7f5;
	color: var(--relayhq-connection-primary-dark);
}

.relayhq-connection-card__action {
	margin-top: 24px;
}

@media (max-width: 600px) {
	.relayhq-connection-card {
		padding: 26px 20px;
		border-radius: 14px;
	}

	.relayhq-connection-card__status {
		top: 22px;
		right: 20px;
	}

	.relayhq-connection-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.relayhq-connection .relayhq-button {
		width: 100%;
	}
}

/* RelayHQ customer message history. */
.relayhq-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.relayhq-messages-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 0 0 14px;
}

.relayhq-messages__summary {
	flex: 0 0 auto;
	margin: 0;
	color: var(--relayhq-muted);
	font-size: 0.92rem;
}

.relayhq-messages-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	min-width: 0;
}

.relayhq-messages-search select,
.relayhq-messages-search input[type="search"] {
	min-height: 42px;
	border: 1px solid #cfd8d4;
	border-radius: 9px;
	background: #fff;
	color: var(--relayhq-primary-dark);
	font: inherit;
}

.relayhq-messages-search select {
	max-width: 220px;
	padding: 8px 36px 8px 11px;
}

.relayhq-messages-search input[type="search"] {
	width: min(330px, 32vw);
	min-width: 220px;
	padding: 8px 12px;
}

.relayhq-messages-search input[type="search"]::placeholder {
	color: #82918b;
}

.relayhq-messages-search .relayhq-button {
	min-height: 42px;
	padding: 8px 15px;
	border: 1px solid var(--relayhq-primary-dark);
	background: var(--relayhq-primary-dark);
}

.relayhq-messages-search__reset {
	color: var(--relayhq-primary);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.relayhq-messages-search__reset:hover,
.relayhq-messages-search__reset:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.relayhq-messages-list {
	overflow: hidden;
	border: 1px solid var(--relayhq-border);
	border-radius: 14px;
	background: #fff;
}

.relayhq-messages-list__header,
.relayhq-message-row__summary {
	display: grid;
	grid-template-columns: minmax(150px, 1.2fr) minmax(135px, 1fr) minmax(155px, 1.15fr) minmax(120px, 0.9fr) minmax(100px, 0.75fr) minmax(118px, 0.85fr) minmax(100px, 0.75fr) 28px;
	align-items: center;
	gap: 12px;
}

.relayhq-messages-list__header {
	padding: 14px 16px;
	border-bottom: 1px solid var(--relayhq-border);
	background: var(--relayhq-surface-soft);
	color: var(--relayhq-muted-strong);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.relayhq-message-row {
	border-bottom: 1px solid var(--relayhq-border);
}

.relayhq-message-row:last-child {
	border-bottom: 0;
}

.relayhq-message-row[open] {
	background: #fbfdfc;
}

.relayhq-message-row__summary {
	min-height: 68px;
	padding: 13px 16px;
	list-style: none;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.relayhq-message-row__summary::-webkit-details-marker {
	display: none;
}

.relayhq-message-row__summary::marker {
	content: "";
}

.relayhq-message-row__summary:hover {
	background: #fbfdfc;
}

.relayhq-message-row__summary:focus-visible {
	outline: 3px solid rgba(23, 80, 70, 0.18);
	outline-offset: -3px;
}

.relayhq-message-row__summary > span {
	min-width: 0;
	color: var(--relayhq-primary-dark);
	font-size: 14px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.relayhq-message-row__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	color: var(--relayhq-primary);
	transition: background-color 160ms ease, transform 160ms ease;
}

.relayhq-message-row__toggle svg {
	display: block;
	width: 18px !important;
	height: 18px !important;
	fill: none !important;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.relayhq-message-row[open] .relayhq-message-row__toggle {
	background: #eef7f2;
	transform: rotate(180deg);
}

.relayhq-message-row__panel {
	display: grid;
	grid-template-columns: minmax(260px, 1.2fr) minmax(0, 2fr);
	gap: 24px;
	padding: 20px 52px 22px 16px;
	border-top: 1px solid var(--relayhq-border);
	background: #fbfdfc;
}

.relayhq-message-row__content {
	min-width: 0;
	padding: 16px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: #fff;
}

.relayhq-message-row__content h3 {
	margin: 0 0 8px;
	color: var(--relayhq-primary-dark);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.relayhq-message-row__content p {
	margin: 0;
	color: var(--relayhq-primary-dark);
	font-size: 14px;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.relayhq-message-timeline {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}

.relayhq-message-timeline__item {
	position: relative;
	min-width: 0;
	padding: 14px 14px 14px 18px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: #fff;
}

.relayhq-message-timeline__item::before {
	position: absolute;
	top: 15px;
	left: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #9aa7a1;
	content: "";
}

.relayhq-message-timeline__item--success::before {
	background: #16815f;
}

.relayhq-message-timeline__item--pending::before {
	background: #d89a20;
}

.relayhq-message-timeline__item--error::before {
	background: #c54a4a;
}

.relayhq-message-timeline dt {
	margin: 0 0 5px;
	color: var(--relayhq-muted);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.relayhq-message-timeline dd {
	margin: 0;
	color: var(--relayhq-primary-dark);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.relayhq-message-status {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 800;
	white-space: nowrap;
}

.relayhq-message-status--success {
	background: #e8f6ee;
	color: #176445;
}

.relayhq-message-status--pending {
	background: #fff5dc;
	color: #8a6417;
}

.relayhq-message-status--error {
	background: #fff0f0;
	color: #9b3636;
}

.relayhq-messages-pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.relayhq-messages-pagination > span {
	color: var(--relayhq-muted);
	font-size: 13px;
}

.relayhq-messages-pagination > div {
	display: flex;
	gap: 8px;
}

.relayhq-messages-pagination .relayhq-button {
	min-height: 38px;
	padding: 8px 13px;
	font-size: 13px;
}

.relayhq-messages-empty {
	padding: 28px;
	border: 1px solid var(--relayhq-border);
	border-radius: 14px;
	background: #fff;
}

.relayhq-messages-empty h2 {
	margin: 0 0 8px;
	font-size: 1.2rem;
}

.relayhq-messages-empty p {
	margin: 0;
	color: var(--relayhq-muted);
}

@media (max-width: 1100px) {
	.relayhq-messages-list__header,
	.relayhq-message-row__summary {
		grid-template-columns: minmax(140px, 1.15fr) minmax(120px, 0.95fr) minmax(145px, 1.1fr) minmax(110px, 0.85fr) minmax(105px, 0.8fr) minmax(100px, 0.75fr) 28px;
	}

	.relayhq-messages-list__header > span:nth-child(5),
	.relayhq-message-row__summary > span:nth-child(5) {
		display: none;
	}

	.relayhq-message-row__panel {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 820px) {
	.relayhq-messages-toolbar {
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	.relayhq-messages-search {
		justify-content: stretch;
		flex-wrap: wrap;
	}

	.relayhq-messages-search select,
	.relayhq-messages-search input[type="search"] {
		flex: 1 1 220px;
		width: auto;
		max-width: none;
	}

	.relayhq-messages-list {
		overflow: visible;
		border: 0;
		background: transparent;
	}

	.relayhq-messages-list__header {
		display: none;
	}

	.relayhq-message-row {
		margin-bottom: 14px;
		border: 1px solid var(--relayhq-border);
		border-radius: 14px;
		background: #fff;
		overflow: hidden;
	}

	.relayhq-message-row__summary {
		display: grid;
		grid-template-columns: 1fr 28px;
		gap: 0 14px;
		padding: 14px 16px;
	}

	.relayhq-message-row__summary > span:not(.relayhq-message-row__toggle) {
		display: grid;
		grid-column: 1;
		grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
		gap: 12px;
		padding: 7px 0;
		border-bottom: 1px solid var(--relayhq-border);
	}

	.relayhq-message-row__summary > span:not(.relayhq-message-row__toggle)::before {
		content: attr(data-label);
		color: var(--relayhq-muted);
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.relayhq-message-row__summary > span:nth-last-child(2) {
		border-bottom: 0;
	}

	.relayhq-message-row__toggle {
		grid-column: 2;
		grid-row: 1;
	}

	.relayhq-message-row__panel {
		padding: 16px;
	}

	.relayhq-message-timeline {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.relayhq-messages-search select,
	.relayhq-messages-search input[type="search"],
	.relayhq-messages-search .relayhq-button {
		width: 100%;
		flex-basis: 100%;
	}

	.relayhq-messages-search__reset {
		width: 100%;
	}

	.relayhq-message-timeline {
		grid-template-columns: 1fr;
	}

	.relayhq-messages-pagination {
		align-items: stretch;
		flex-direction: column;
	}

	.relayhq-messages-pagination > div,
	.relayhq-messages-pagination .relayhq-button {
		width: 100%;
	}
}

/* RelayHQ customer account and billing profile. */
.relayhq-account {
	--relayhq-primary: #175046;
	--relayhq-primary-dark: #083025;
	--relayhq-primary-hover: #103f37;
	--relayhq-surface-soft: #f7faf8;
	--relayhq-border: #e3e9e6;
	--relayhq-muted: #66736e;
	width: 100%;
	margin-top: -32px;
	color: var(--relayhq-primary-dark);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

.relayhq-account,
.relayhq-account *,
.relayhq-account *::before,
.relayhq-account *::after {
	box-sizing: border-box;
}

.relayhq-account h2,
.relayhq-account p {
	margin-top: 0;
}

.relayhq-account-form {
	display: grid;
	gap: 20px;
}

.relayhq-account-card {
	padding: 24px;
	border: 1px solid var(--relayhq-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(8, 48, 37, 0.04);
}

.relayhq-account-card__header {
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--relayhq-border);
}

.relayhq-account-card__header h2 {
	margin-bottom: 5px;
	font-size: 21px;
	font-weight: 720;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.relayhq-account-card__header p {
	margin-bottom: 0;
	color: var(--relayhq-muted);
}

.relayhq-account-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.relayhq-account-fields--billing {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.relayhq-account-field {
	display: grid;
	gap: 8px;
	min-width: 0;
}

.relayhq-account-field--full,
.relayhq-account-fields--billing .relayhq-account-field:not(.relayhq-account-field--number):not(.relayhq-account-field--addition) {
	grid-column: span 2;
}

.relayhq-account-field--street {
	grid-column: span 2;
}

.relayhq-account-field > span {
	font-size: 14px;
	font-weight: 700;
}

.relayhq-account-field input,
.relayhq-account-field select {
	width: 100%;
	min-height: 48px;
	padding: 10px 13px;
	border: 1px solid #cbd7d2;
	border-radius: 9px;
	background: #fff;
	color: var(--relayhq-primary-dark);
	font: inherit;
}

.relayhq-account-field input:focus,
.relayhq-account-field select:focus {
	border-color: var(--relayhq-primary);
	outline: 3px solid rgba(23, 80, 70, 0.12);
	outline-offset: 1px;
}

.relayhq-account-field small {
	color: var(--relayhq-muted);
	font-size: 13px;
}

.relayhq-account-readonly {
	display: grid;
	gap: 3px;
	margin-top: 20px;
	padding: 15px 16px;
	border: 1px solid var(--relayhq-border);
	border-radius: 9px;
	background: var(--relayhq-surface-soft);
}

.relayhq-account-readonly > span {
	color: var(--relayhq-muted);
	font-size: 13px;
	font-weight: 700;
}

.relayhq-account-readonly strong {
	font-size: 15px;
}

.relayhq-account-readonly p {
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 13px;
}

.relayhq-account-actions {
	display: flex;
	justify-content: flex-end;
}

.relayhq-account-actions .relayhq-button {
	min-width: 180px;
	background: var(--relayhq-primary);
}

.relayhq-account-actions .relayhq-button:hover,
.relayhq-account-actions .relayhq-button:focus-visible {
	background: var(--relayhq-primary-hover);
}

@media (max-width: 820px) {
	.relayhq-account-fields--billing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.relayhq-account {
		margin-top: -20px;
	}

	.relayhq-account-card {
		padding: 20px;
	}

	.relayhq-account-fields,
	.relayhq-account-fields--billing {
		grid-template-columns: minmax(0, 1fr);
	}

	.relayhq-account-field--full,
	.relayhq-account-field--street,
	.relayhq-account-fields--billing .relayhq-account-field:not(.relayhq-account-field--number):not(.relayhq-account-field--addition) {
		grid-column: auto;
	}

	.relayhq-account-actions,
	.relayhq-account-actions .relayhq-button {
		width: 100%;
	}
}

/* Credits purchase page. */
.relayhq-credits-overview,
.relayhq-credit-purchase,
.relayhq-credit-checkout {
	margin-top: 20px;
	border: 1px solid var(--relayhq-border);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 26px rgba(8, 48, 37, 0.045);
}

.relayhq-credits-overview {
	padding: 24px;
}

.relayhq-credits-overview__header,
.relayhq-credit-purchase__header,
.relayhq-credit-checkout__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.relayhq-credits-overview__header h2,
.relayhq-credit-purchase__header h2,
.relayhq-credit-checkout__header h2 {
	margin-bottom: 6px;
	color: var(--relayhq-primary-dark);
	font-size: 24px;
	font-weight: 730;
	line-height: 1.2;
	letter-spacing: -0.025em;
}

.relayhq-credits-overview__header p:last-child,
.relayhq-credit-purchase__header p:last-child,
.relayhq-credit-checkout__header p:last-child {
	max-width: 720px;
	margin-bottom: 0;
	color: var(--relayhq-muted);
	font-size: 14px;
	line-height: 1.5;
}

.relayhq-credits-overview__security {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 32px;
	padding: 6px 11px;
	border-radius: 999px;
	background: #edf6f1;
	color: #176247;
	font-size: 12px;
	font-weight: 730;
	white-space: nowrap;
}

.relayhq-credit-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}

.relayhq-credit-stat {
	display: flex;
	min-width: 0;
	min-height: 122px;
	padding: 16px 17px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: var(--relayhq-surface-soft);
	flex-direction: column;
}

.relayhq-credit-stat--primary {
	border-color: var(--relayhq-primary);
	background: var(--relayhq-primary);
	color: #fff;
}

.relayhq-credit-stat__label {
	color: var(--relayhq-muted-strong);
	font-size: 12px;
	font-weight: 720;
	line-height: 1.35;
}

.relayhq-credit-stat--primary .relayhq-credit-stat__label,
.relayhq-credit-stat--primary .relayhq-credit-stat__value,
.relayhq-credit-stat--primary .relayhq-credit-stat__meta {
	color: #fff;
}

.relayhq-credit-stat__value {
	margin-top: auto;
	padding-top: 12px;
	color: var(--relayhq-primary-dark);
	font-size: 31px;
	font-weight: 760;
	line-height: 1;
	letter-spacing: -0.04em;
}

.relayhq-credit-stat__value--text {
	font-size: 23px;
	letter-spacing: -0.025em;
}

.relayhq-credit-stat__meta {
	margin-top: 6px;
	color: var(--relayhq-muted);
	font-size: 11px;
	line-height: 1.35;
}

.relayhq-credit-purchase,
.relayhq-credit-checkout {
	padding: 24px;
}

.relayhq-credit-bundles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 20px;
}

.relayhq-credit-bundle {
	display: flex;
	min-width: 0;
	min-height: 265px;
	padding: 20px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(8, 48, 37, 0.035);
	flex-direction: column;
}

.relayhq-credit-bundle--featured {
	border-color: #bdd8ce;
	box-shadow: 0 9px 24px rgba(23, 80, 70, 0.09);
}

.relayhq-credit-bundle__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.relayhq-credit-bundle__header h3 {
	margin: 0;
	color: var(--relayhq-primary-dark);
	font-size: 16px;
	font-weight: 760;
	line-height: 1.3;
}

.relayhq-credit-bundle__price {
	display: grid;
	gap: 3px;
	margin-top: 20px;
}

.relayhq-credit-bundle__price strong {
	color: var(--relayhq-primary-dark);
	font-size: clamp(32px, 2.6vw, 40px);
	font-weight: 760;
	line-height: 1;
	letter-spacing: -0.045em;
	white-space: nowrap;
}

.relayhq-credit-bundle__price span {
	color: var(--relayhq-muted);
	font-size: 12px;
}

.relayhq-credit-bundle__details {
	display: grid;
	gap: 8px;
	margin: 18px 0 20px;
}

.relayhq-credit-bundle__details div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-top: 8px;
	border-top: 1px solid var(--relayhq-border);
}

.relayhq-credit-bundle__details dt,
.relayhq-credit-bundle__details dd {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
}

.relayhq-credit-bundle__details dt {
	color: var(--relayhq-muted);
}

.relayhq-credit-bundle__details dd {
	color: var(--relayhq-primary-dark);
	font-weight: 720;
	text-align: right;
}

.relayhq-credit-bundle__button,
.relayhq-credit-checkout__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	margin-top: auto;
	padding: 10px 15px;
	text-align: center;
	text-decoration: none;
}

.relayhq-credit-contact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: var(--relayhq-surface-soft);
}

.relayhq-credit-contact strong {
	display: block;
	margin-bottom: 2px;
	color: var(--relayhq-primary-dark);
	font-size: 14px;
}

.relayhq-credit-contact p {
	margin: 0;
	color: var(--relayhq-muted);
	font-size: 13px;
}

.relayhq-credit-checkout__back {
	flex: 0 0 auto;
	color: var(--relayhq-primary);
	font-size: 13px;
	font-weight: 720;
	text-decoration: none;
}

.relayhq-credit-checkout__back:hover,
.relayhq-credit-checkout__back:focus-visible {
	color: var(--relayhq-primary-hover);
	text-decoration: underline;
}

.relayhq-credit-checkout__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
	gap: 24px;
	margin-top: 22px;
}

.relayhq-credit-checkout__totals {
	margin: 0;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	overflow: hidden;
}

.relayhq-credit-checkout__totals > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 15px;
	background: #fff;
}

.relayhq-credit-checkout__totals > div + div {
	border-top: 1px solid var(--relayhq-border);
}

.relayhq-credit-checkout__totals dt,
.relayhq-credit-checkout__totals dd {
	margin: 0;
}

.relayhq-credit-checkout__totals dt {
	color: var(--relayhq-muted);
	font-size: 13px;
}

.relayhq-credit-checkout__totals dd {
	color: var(--relayhq-primary-dark);
	font-size: 14px;
	font-weight: 730;
	text-align: right;
}

.relayhq-credit-checkout__totals dd small {
	color: var(--relayhq-muted);
	font-size: 11px;
	font-weight: 600;
}

.relayhq-credit-checkout__totals .relayhq-credit-checkout__total {
	background: var(--relayhq-primary);
}

.relayhq-credit-checkout__total dt,
.relayhq-credit-checkout__total dd {
	color: #fff;
}

.relayhq-credit-checkout__form {
	display: flex;
	align-self: start;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--relayhq-border);
	border-radius: 10px;
	background: var(--relayhq-surface-soft);
	flex-direction: column;
}

.relayhq-credit-checkout__form > span {
	color: var(--relayhq-muted);
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

@media (max-width: 980px) {
	.relayhq-credit-stats,
	.relayhq-credit-bundles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.relayhq-credits-overview,
	.relayhq-credit-purchase,
	.relayhq-credit-checkout {
		margin-top: 16px;
		padding: 19px;
	}

	.relayhq-credits-overview__header,
	.relayhq-credit-purchase__header,
	.relayhq-credit-checkout__header {
		flex-direction: column;
		gap: 12px;
	}

	.relayhq-credits-overview__security {
		white-space: normal;
	}

	.relayhq-credit-stats,
	.relayhq-credit-bundles,
	.relayhq-credit-checkout__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.relayhq-credit-stat {
		min-height: 108px;
	}

	.relayhq-credit-bundle {
		min-height: 0;
	}

	.relayhq-credit-bundle__button {
		margin-top: 2px;
	}

	.relayhq-credit-checkout__back {
		align-self: flex-start;
	}
}