@charset "utf-8";

/* Shared styles extracted from page-specific integration stylesheets */
.api-rest-main,
.amocrm-features,
.amocrm-conclusion,
.page-smpp-detail {
	background: #fff;
}

.api-rest-hero {
	background: linear-gradient(135deg, rgba(32, 181, 115, 0.06) 0%, #fff 50%, rgba(34, 49, 63, 0.06) 100%);
}

.api-rest-hero .container,
.api-rest-start .container,
.amocrm-features__container,
.amocrm-install__container,
.amocrm-conclusion__container {
	max-width: 1280px;
	padding-top: 64px;
	padding-bottom: 80px;
}

.api-rest-hero__content h1,
.page-smpp-detail h1 {
	margin: 0 0 16px;
	color: #22313f;
	font-size: 36px;
	line-height: calc(2.5 / 2.25);
	font-weight: 700;
}

.page-smpp-detail__back svg {
	width: 16px;
	height: 16px;
}

.page-smpp-detail__back:hover,
.integration-inline-link:hover {
	color: #20b573;
	text-decoration: underline;
}

.page-smpp-detail__header {
	margin-bottom: 48px;
}

.page-smpp-detail__btn--secondary:hover {
	background: #22313f;
	color: #fff;
}

.page-smpp-detail__btn--primary {
	background: #20b573;
	color: #fff;
}

.page-smpp-detail__btn--primary:hover {
	background: #1a9d63;
}

.amocrm-conclusion p,
.page-smpp-detail__content p {
	margin: 0 0 24px;
	color: #404040;
	font-size: 16px;
	line-height: 1.625;
}

.api-rest-start__inner,
.amocrm-install__inner {
	max-width: 56rem;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.api-rest-hero .container,
	.api-rest-start .container,
	.amocrm-features__container,
	.amocrm-install__container,
	.amocrm-conclusion__container {
		padding-top: 42px;
		padding-bottom: 42px;
	}

	.page-smpp-detail h1 {
		font-size: 30px;
	}

	.api-rest-hero__content p,
	.page-smpp-detail__lead {
		font-size: 18px;
	}

	.page-integrations__card {
		padding: 24px;
	}

	.page-integrations__support {
		align-items: flex-start;
	}
}

/* Shared styles for integration detail pages */
.integration-cta-primary {
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius);
	padding-inline: calc(var(--spacing) * 8);
	padding-block: calc(var(--spacing) * 4);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-semibold);
	font-weight: var(--font-weight-semibold);
	color: var(--color-white);

	--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	background-color: rgb(32, 180, 114);
}

.integration-cta-primary:hover {
	background-color: rgb(26, 157, 99);
}

.integration-cta-outline {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--radius);
	border-style: var(--tw-border-style);
	border-width: 2px;
	border-color: #22313f;
	color: #22313f;
	transition-property: all;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.integration-cta-outline:hover {
	background-color: #22313f;
	color: var(--color-white);
}

.integration-support-link {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	border-radius: var(--radius);
	border-style: var(--tw-border-style);
	border-width: 1px;
	border-color: #20b573;
	padding-inline: calc(var(--spacing) * 4);
	padding-block: calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm-line-height));

	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: #20b573;
	transition-property: all;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.integration-support-link:hover {
	background-color: #20b573;
	color: var(--color-white);
}

.integration-inline-link {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	font-size: var(--text-sm);
	line-height: var(--tw-leading, var(--text-sm-line-height));

	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: #20b573;
}

.integration-video-embed {
	padding-bottom: 56.25%;
}

.page-integrations {
	background: #fff;
	padding: 10px 0 64px;
}

.page-integrations .page-header {
	margin: 56px 0 48px;
}

.page-integrations .page-header h1 {
	font-size: 30px;
	line-height: 1.2;
	color: #22313f;
	font-weight: 600;
	margin-bottom: 12px;
}

.page-integrations .page-header p {
	font-size: 16px;
	line-height: 1.5;
	color: #52525b;
}

.page-integrations__support {
	margin-top: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.page-integrations__support-label {
	color: #5f6974;
	font-size: 14px;
}

.page-integrations__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

@media (max-width: 1100px) {
	.page-integrations__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.page-integrations__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.page-integrations__card {
	border: 1px solid #dce3ea;
	border-radius: 10px;
	background: #fff;
	padding: 32px;
	text-decoration: none;
	display: block;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-integrations__card:hover {
	border-color: #20b573;
	box-shadow: 0 8px 18px rgba(17, 30, 43, 0.06);
}

.page-integrations__logo {
	height: 48px;
	display: flex;
	align-items: center;
	margin-bottom: 24px;
}

.integration-guide {
	display: grid;
	gap: 32px;
}

.integration-guide-step {
	display: grid;
	gap: 20px;
}

.integration-guide-step__content {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.integration-guide-image {
	overflow: hidden;
	border: 1px solid #dce3ea;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 8px 18px rgba(17, 30, 43, 0.06);
}

.integration-guide-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 992px) {
	.integration-guide-step {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
		align-items: start;
	}
}

.page-integrations__logo img {
	max-height: 100%;
	max-width: 140px;
	object-fit: contain;
}

.page-integrations__logo--on-dark {
	display: inline-flex;
	width: fit-content;
	background: #1f2a33;
	border-radius: 8px;
	padding: 6px 10px;
}

.page-integrations__card h3 {
	margin: 0 0 12px;
	color: #22313f;
	font-size: 20px;
	line-height: 1.3;
	transition: color 0.2s ease;
}

.page-integrations__card:hover h3 {
	color: #20b573;
}

.page-integrations__card p {
	margin: 0 0 20px;
	color: #63707c;
	min-height: 64px;
	line-height: 1.6;
	font-size: 14px;
}

.page-integrations__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #20b573;
	font-size: 14px;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.page-integrations__card:hover .page-integrations__more {
	opacity: 1;
	color: #1a9d63;
}

.integration-cta-primary-md {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-radius: var(--radius);
	border-style: solid;
	border-width: 2px;
	border-color: transparent;
	padding-inline: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 3);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
	background-color: #20b573;
}

.integration-cta-primary-md:hover {
	background-color: #1a9d63;
}

.integration-cta-dark {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	border-radius: var(--radius);
	background-color: #22313f;
	padding-inline: calc(var(--spacing) * 8);
	padding-block: calc(var(--spacing) * 4);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-semibold);
	font-weight: var(--font-weight-semibold);
	color: var(--color-white);

	--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.integration-cta-dark:hover,
.integration-cta-dark-md:hover {
	background-color: #1a2630;
}

.integration-cta-dark-md {
	text-decoration: inherit;
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing) * 2);
	border-radius: var(--radius);
	background-color: #22313f;
	padding-inline: calc(var(--spacing) * 6);
	padding-block: calc(var(--spacing) * 3);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-medium);
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
	transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
	transition-duration: var(--tw-duration, var(--default-transition-duration));
}

.integration-logo-badge-on-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: 14px;
	background-color: #22313f;
}

.integration-logo-on-dark {
	max-height: 40px;
	width: auto;
	filter: brightness(0) invert(1) contrast(1.3);
}

/* Shared layout/content aliases for integration pages */
.integration-section {
	margin-inline: auto;
	max-width: var(--container-7xl);
	padding-inline: calc(var(--spacing) * 4);
	padding-block: calc(var(--spacing) * 16);
}

@media (min-width: 640px) {
	.integration-section {
		padding-inline: calc(var(--spacing) * 6);
		padding-block: calc(var(--spacing) * 20);
	}
}

@media (min-width: 1024px) {
	.integration-section {
		padding-inline: calc(var(--spacing) * 8);
	}
}

.integration-content {
	margin-inline: auto;
	max-width: var(--container-4xl);
}

.integration-feature-card,
.integration-panel-card,
.integration-step-card {
	background-color: var(--color-white);
	padding: calc(var(--spacing) * 6);
	border-radius: var(--radius);
	border: 1px solid var(--color-neutral-200);
	transition: all var(--default-transition-duration) var(--default-transition-timing-function);
}

.integration-feature-card:hover,
.integration-panel-card:hover,
.integration-step-card:hover {
	border-color: #20b573;
}

.integration-feature-card:hover {
	--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.integration-feature-title {
	margin-bottom: calc(var(--spacing) * 3);
	font-size: var(--text-base);
	line-height: var(--tw-leading, var(--text-base-line-height));

	--tw-font-weight: var(--font-weight-semibold);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-feature-description {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-neutral-600);
}

.integration-text-lead {
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-neutral-600);
}

.integration-text-lead--center,
.integration-h2--center {
	text-align: center;
}

.integration-h2 {
	margin-bottom: calc(var(--spacing) * 4);
	font-size: var(--text-3xl);
	line-height: var(--text-3xl-line-height);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-h3 {
	margin-bottom: calc(var(--spacing) * 3);
	font-size: var(--text-lg);
	line-height: var(--text-lg-line-height);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-panel-muted {
	padding: calc(var(--spacing) * 6);
	border-radius: var(--radius);
	background: var(--color-neutral-50);
	border: 1px solid var(--color-neutral-200);
}

.integration-section-white {
	background: var(--color-white);
}

.integration-section-muted {
	background: var(--color-neutral-50);
	border-top: 1px solid var(--color-neutral-200);
	border-bottom: 1px solid var(--color-neutral-200);
}

.integration-section-muted-top {
	background: var(--color-neutral-50);
	border-top: 1px solid var(--color-neutral-200);
}

.integration-section-white-divider {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-neutral-200);
}

.integration-mb-12 {
	margin-bottom: calc(var(--spacing) * 12);
}

.integration-mt-12 {
	margin-top: calc(var(--spacing) * 12);
}

.integration-mb-8 {
	margin-bottom: calc(var(--spacing) * 8);
}

.integration-flex-1 {
	flex: 1 1 0%;
}

.integration-h3-lg {
	margin-bottom: calc(var(--spacing) * 4);
	font-size: var(--text-lg);
	line-height: var(--text-lg-line-height);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-h4 {
	margin-bottom: calc(var(--spacing) * 2);
	font-size: var(--text-base);
	line-height: var(--text-base-line-height);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-text-muted-sm {
	font-size: var(--text-sm);
	line-height: var(--text-sm-line-height);
	color: var(--color-neutral-600);
}

.integration-text-sm-neutral-700 {
	font-size: var(--text-sm);
	line-height: var(--text-sm-line-height);
	color: var(--color-neutral-700);
}

.integration-label {
	display: block;
	margin-bottom: calc(var(--spacing) * 2);
	font-size: var(--text-sm);
	line-height: var(--text-sm-line-height);
	font-weight: var(--font-weight-medium);
	color: #22313f;
}

.integration-row-start-2 {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacing) * 2);
}

.integration-row-start-3 {
	display: flex;
	align-items: flex-start;
	gap: calc(var(--spacing) * 3);
}

.integration-logo-h10 {
	height: calc(var(--spacing) * 10);
	width: auto;
	object-fit: contain;
}

.integration-logo-h8 {
	height: calc(var(--spacing) * 8);
	width: auto;
	object-fit: contain;
}

.integration-icon-6 {
	width: calc(var(--spacing) * 6);
	height: calc(var(--spacing) * 6);
	color: #20b573;
}

.integration-icon-4-check {
	width: calc(var(--spacing) * 4);
	height: calc(var(--spacing) * 4);
	color: #20b573;
	flex-shrink: 0;
	margin-top: calc(var(--spacing) * 0.5);
}

.integration-form-control {
	width: 100%;
	padding-inline: calc(var(--spacing) * 4);
	padding-block: calc(var(--spacing) * 3);
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius);
}

.integration-form-control:focus {
	outline: none;
	border-color: transparent;

	--tw-ring-color: #20b573;
	--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
	box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

.integration-card-grid-3 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: calc(var(--spacing) * 6);
}

.integration-grid-1-2,
.integration-grid-1-2-3,
.integration-grid-1-2-3-gap-3,
.integration-grid-1-2-4,
.integration-grid-1-2-gap-4,
.integration-grid-1-2-gap-8 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.integration-grid-1-2,
.integration-grid-1-2-3,
.integration-grid-1-2-4 {
	gap: calc(var(--spacing) * 6);
}

.integration-grid-1-2-gap-4 {
	gap: calc(var(--spacing) * 4);
}

.integration-grid-1-2-gap-8 {
	gap: calc(var(--spacing) * 8);
}

.integration-grid-1-2-3-gap-3 {
	gap: calc(var(--spacing) * 3);
}

@media (min-width: 48rem) {
	.integration-card-grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.integration-grid-1-2,
	.integration-grid-1-2-3,
	.integration-grid-1-2-3-gap-3,
	.integration-grid-1-2-4,
	.integration-grid-1-2-gap-4,
	.integration-grid-1-2-gap-8 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.integration-grid-1-2-3,
	.integration-grid-1-2-3-gap-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

.integration-steps {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing) * 6);
}

.integration-step-row {
	display: flex;
	gap: calc(var(--spacing) * 6);
}

.integration-step-number {
	flex-shrink: 0;
	width: calc(var(--spacing) * 12);
	height: calc(var(--spacing) * 12);
	border-radius: 9999px;
	background-color: #20b573;
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-lg);
	line-height: var(--tw-leading, var(--text-lg-line-height));

	--tw-font-weight: var(--font-weight-bold);
	font-weight: var(--font-weight-bold);
}

.integration-step-title {
	margin-bottom: calc(var(--spacing) * 2);
	font-size: var(--text-lg);
	line-height: var(--tw-leading, var(--text-lg-line-height));

	--tw-font-weight: var(--font-weight-semibold);
	font-weight: var(--font-weight-semibold);
	color: #22313f;
}

.integration-step-description {
	margin-bottom: calc(var(--spacing) * 3);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-neutral-600);
}

.integration-icon-chip {
	padding: calc(var(--spacing) * 3);
	border-radius: var(--radius);
	width: fit-content;
	margin-bottom: calc(var(--spacing) * 4);
	background-color: color-mix(in oklab, #20b573 10%, transparent);
}

.integration-icon-chip svg {
	display: block;
	width: 24px;
	height: 24px;
}

.integration-stats-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: calc(var(--spacing) * 4);
	margin-bottom: calc(var(--spacing) * 6);
}

@media (min-width: 768px) {
	.integration-stats-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.integration-stat-card-white {
	padding: calc(var(--spacing) * 4);
	border-radius: var(--radius);
	border: 1px solid var(--color-neutral-200);
	background-color: var(--color-white);
}

.integration-stat-card-gradient {
	padding: calc(var(--spacing) * 4);
	border-radius: var(--radius);
	border: 1px solid var(--color-neutral-200);
	background-image: linear-gradient(to bottom right in oklab, var(--color-neutral-50), var(--color-neutral-100));
}

.integration-stat-value {
	margin-bottom: calc(var(--spacing) * 1);
	font-size: var(--text-2xl);
	line-height: var(--tw-leading, var(--text-2xl-line-height));

	--tw-font-weight: var(--font-weight-bold);
	font-weight: var(--font-weight-bold);
	color: #20b573;
}

.integration-conclusion-card {
	border-radius: var(--radius);
	border: 1px solid var(--color-neutral-200);
	padding: calc(var(--spacing) * 8);
	background-image: linear-gradient(to bottom right in oklab, var(--color-neutral-50), var(--color-neutral-100));
}

.integration-prose p {
	margin: 0 0 16px;
	color: #404040;
	font-size: 16px;
	line-height: 1.625;
}

.integration-prose p:last-child {
	margin-bottom: 0;
}

.integration-spec-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #dce3ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

.integration-spec-table th,
.integration-spec-table td {
	border: 1px solid #dce3ea;
	padding: 10px 12px;
	color: #4f5c67;
	text-align: left;
}

.integration-spec-table th {
	color: #22313f;
	background: #f5f8fb;
	font-weight: 700;
}