@charset "utf-8";

/* Sweet PPM */

.x-style-list,
.x-style-list>li {
	list-style-type: "\2715";
}
.check-mark-style-list,
.check-mark-style-list>li {
	list-style-type: "\2713";
}
.check-mark-ul-with-color li::before {
	content:'✓';
	position: absolute;
	left: 0;
}
.contact-link {
	color: white;
	font-size: 1.1rem;

	&:hover {
		color: white;
		opacity: .75;
	}
	&::after {
		content: ' ›';
	}
}
article {

	section {
		padding: 8em 2em;
		text-align: center;
		font-size: .9375rem;

		.container {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

		h1 {
			font-weight: 700;
			font-size: clamp(2.5rem, 6.5vw, 5.5rem);
			line-height: 1.05;
			letter-spacing: -.03em;

			div {
				font-size: .875rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .1em;
				margin-bottom: 2em;
			}
		}
		h2 {
			font-weight: 700;
			font-size: clamp(2rem, 4.5vw, 3.75rem);
			line-height: 1.15;
			letter-spacing: -.04em;

			div {
				font-size: .875rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .1em;
				margin-bottom: 2em;
			}
		}
		h3 {
			font-weight: 700;
			font-size: 1.5rem;

			div {
				font-size: .875rem;
				font-weight: 700;
				text-transform: uppercase;
				letter-spacing: .1em;
				margin-bottom: 2em;
			}

		}
		.big-overview {
			font-size: clamp(1rem, 1.8vw, 1.25rem);
		}
		.middle-overview {
			font-size: clamp(.9375rem, 1.5vw, 1.125rem);
		}
		a.button.this-page-link {
			background-color: #0066cc;

			&:hover {
				background-color: #444;
			}
		}

		&.black-background {
			background-color: black;
			color: #d1d1d6;

			h1 {
				color: #f5f5f7;

				div {
					color: #86868b;
				}
			}
		}
		&.s-black-background {
			background-image: linear-gradient(160deg,#07101f 0%,#0a1628 50%,#0d1e3a 100%);
			color: #94aabf;

			h2 {
				color: #e8f0fe;

				div {
					color: #7a9cc4;
				}
			}
			h3 {
				color: #e8f0fe;

				div {
					color: #7a9cc4;
				}
			}
			h4 {
				color: #e8f0fe;
			}
		}
		&.white-background {
			background-color: white;
			color: #6e6e73;

			h1 {
				div {
					color: #0066cc;
				}
			}
			h2 {
				div {
					color: #0066cc;
				}
			}
		}
		&.grey-background {
			background-color: #f5f5f7;
			color: #1d1d1f;

			h1 {
				div {
					color: #0066cc;
				}
			}
			h2 {
				div {
					color: #0066cc;
				}
			}
		}
		&.colorful-background {
			background-image: linear-gradient(90deg, #4A90E2 0%, #7B68EE 50%, #9B59B6 100%);
			color: rgba(255,255,255,0.9);

			h2 {
				color: white;
			}
		}
	}
}
#what-is-sweet-ppm {
	.before-after-area {
		margin: 4em auto 0;
		max-width: 680px;
		background-color: #f5f5f7;
		border-radius: 18px;
		padding: 44px 48px;


		.ba-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1em;
			margin-bottom: 2em;

			&>div {
				border-radius: 12px;
				padding: 1em;

				p {
					font-weight: 700;
					letter-spacing: .08em;
					margin-bottom: .5em;
				}
				ul {
					display: grid;
					gap: .5em;
					margin-bottom: 0;
				}
			}
		}
	}
}
.flow-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr 10px);
	gap: 5px;
	margin: 4em 0;

	.flow-tile {
		background-color: white;
		border-radius: 18px;
		padding:28px 18px 24px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		box-shadow: 0 2px 12px rgba(0,0,0,0.07);
		transition: box-shadow .25s,transform .25s;
		cursor: default;
		border-top: 3px solid #0066cc;
		position: relative;

		span {
			color: #0066cc;
			font-weight: 700;
		}

		.ft-icon {
			width: 44px;
			height: 44px;
			margin: 0 auto;
			background-color: #e8f1ff;
			border-radius: 11px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		&:hover {
			box-shadow: 0 8px 28px rgba(0,0,0,0.12);
			transform: translateY(-3px);
		}
	}
	.flow-arrow {
		display: flex;
		align-items: center;

		div {
			width: 10px;
			height: 16px;
			border-top: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-left: 8px solid #0066cc;
		}
	}
}

.story-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 48px;

	.story-card {
		color: #6e6e73;
		font-size: .875rem;
		line-height: 1.5;
		background-color: white;
		border-radius: 18px;
		padding: 1em;
		box-shadow: 0 2px 8px rgba(0,0,0,0.06);
		transition: box-shadow .25s,transform .25s;

		h3 {
			font-size: 1rem;
			font-weight: 700;
			margin: 1em 0;
		}
		div, ul {
			margin-bottom: 1em;
		}

		.s-time-range {
			padding: 4px 12px;
			border-radius: 980px;
			font-weight: 700;
		}
		.story-ul li {
			padding: 5px 0 5px 14px;
			position: relative;
			border-top: 1px solid #d2d2d7;
			line-height: 1.5;
		}
		.story-ul li:first-child {
			border-top-width: 0;
		}
		.story-ul li::before {
			content:'--';
			position: absolute;
			left: 0;
			color: #d2d2d7;
		}
		.story-scene {
			color: #0066cc;
			margin-top: 14px;
			padding: 10px 14px;
			background-color: #e8f1ff;
			border-radius: 8px;
			border-radius: 8px;
			line-height:1.4;
		}
	}
	.story-card:hover{
		box-shadow: 0 8px 28px rgba(0,0,0,0.1);
		transform: translateY(-3px);
	}
}

.feat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 48px;

	.feat-card {
		background-color: rgba(10,22,48,0.7);
		border: 1px solid rgba(100,160,255,0.15);
		border-radius: 18px;
		padding: 30px 26px;
		transition: border-color .25s, background .25s;

		&:hover {
			border-color:rgba(41,151,255,.45);
			background-color:rgba(20,40,80,0.85);
		}

		.feat-icon {
			width: 52px;
			height: 52px;
			line-height: 52px;
			margin: 0 auto;
			border-radius: 12px;
		}
	}

	.feat-card-ul li {
		color: #94aabf;
		padding: 5px 0 5px 16px;
		position: relative;
		border-top: 1px solid rgba(100,160,255,0.1);
	}
	.feat-card-ul li:first-child { border-top-width: 0; }
	.feat-card-ul.check-mark-ul-with-color li::before {
		color: #30d158;
	}
	.feat-card-flow {
		margin-top:12px;border:1px solid rgba(100,160,255,0.15);
		border-radius:10px;overflow:hidden;
	}
	.feat-card-flow-r {
		padding:9px 16px;font-size:.875rem;color:#94aabf;
		border-bottom:1px solid rgba(100,160,255,0.08);
		display:flex;justify-content:space-between;
	}
	.feat-card-flow-r:last-child {
		border-bottom-width: 0;
	}
	.feat-card-flow-r span {
		color: #3a5070;
		font-size: .75rem;
	}
}

.feature-detail-card {
	background-color: rgba(255, 255, 255, 0.04);
	border: 2px solid rgba(100, 160, 255, 0.12);
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	transition: 0.3s;
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0;

	&:hover {
		border-color: rgba(100,160,255,0.35);
		background-color: rgba(255,255,255,0.06);
	}
	h2 {
		color: white;
	}

	&>div:first-child {
		background-image: linear-gradient(135deg,#2c3e50 0%,#34495e 100%);
		padding: 32px 28px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		p {
			margin-bottom: 0;
		}
	}

	&>div:last-child {
		padding: 28px 32px;
		text-align: left;

		span {
			background-color: rgba(41,151,255,0.08);
			border: 1px solid rgba(41,151,255,0.2);
			color: #b8d4f8;
			padding: 6px 14px;
			border-radius: 980px;
			font-size: .8125rem;
		}
	}
}

.external-feature-card {
	background-color: rgba(255,255,255,0.04);
	border: 1px solid rgba(100,160,255,0.12);
	border-radius: 14px;
	padding: 24px 28px;
	margin-bottom: 1em;
	text-align: left;

	&>h4 {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 1em;

		p {
			margin-bottom: 0;
		}
	}
	&>div {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		span {
			padding: 6px 16px;
			border-radius: 980px;
		}
	}
	&.blue {
		span:not(.not-target) {
			background-color: rgba(41,151,255,0.12);
			border: 1px solid rgba(41,151,255,0.28);
			color: #b8d4f8;
		}
	}
	&.green {
		span:not(.not-target) {
			background-color: rgba(48,209,88,0.08);
			border: 1px solid rgba(48,209,88,0.22);
			color: #94c9a4;
		}
	}
}

.before-after-table {
	width: 100%;

	thead>tr {
		&>th:first-child, &>th:last-child {
			width: 49%;
		}
	}
	.gap {
		width: 2%;
	}
	td, th {
		vertical-align: top;
	}

	.ba-head {
		border-radius: 20px 20px 0 0;

		h3 {
			font-size: 20px;
			margin-bottom: 0;
		}
		.ba-illust {
			margin: 1em 0 0;
		}
	}
	.ba-row {
		display: flex;
		gap: 12px;
		align-items: flex-start;
		text-align: left;

		.ba-icon {
			flex-shrink: 0;
			width: 32px;
			height: 32px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 1px;
		}
		h4 {
			margin-bottom: 0;
		}
	}
	.ba-before, .ba-after {
		padding: 14px 20px 14px 16px;
		border-bottom: 1px solid rgba(0,0,0,0.05);
	}
	.ba-before {
		background-color: #fffafa;

		&.ba-head {
			background-color: #fff2f2;

			h3 {
				color: #c0392b;
			}
		}
		.ba-icon {
			background-color: rgba(192,57,43,.1);
		}
	}
	.ba-after {
		background-color: #f8fffa;

		&.ba-head {
			background-color: #e8f8ed;

			h3 {
				color: #1a7f37;
			}
		}
		.ba-icon {
			background-color: rgba(26,127,55,.1);
		}
	}
}

.roi-feature {

	.container {
		max-width: 800px;
		margin: 0 auto;
	}
	.roi-feature-ul {
		position: relative;

		&.check-mark-ul-with-color>li::before {
			color: #0066cc;
		}
	}

	.roi-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
		margin-bottom: 24px;
	}
}

.scalability-feature {

	.scalability-feature-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;
		margin: 3em 0;

		.scalability-feature-card {
			background-color: white;
			border-radius: 16px;
			padding: 1em;
			border: 2px solid #e0e0e0;

			h3 {
				margin-bottom: 0;
				display: flex;

				div {
					width: 48px;
					height: 48px;
					border-radius: 12px;
					text-align: center;
					line-height: 48px;
					margin-bottom: 0;
				}

				span {
					padding: 0 1em;
					line-height: 48px;
				}
			}
			.check-mark-style-list {
				margin-bottom: 0;
				font-weight: 700;

				&>li {
					list-style-position: inside;

					&::before {
						content: ' ';
					}
				}
			}
		}
	}
}

.challenges-section {
	font-size: 1.2rem;
	font-weight: 700;

	.container {
		max-width: 700px;
	}

	.check-mark-style-list {

		&>li {
			list-style-position: inside;

			border-left: 4px solid #0066cc;
			background-color: #f5f5f7;
			border-radius: 8px;
			margin-bottom: 1em;
			padding: 1em;

			&::before {
				content: ' ';
			}
		}
		
	}
}

#feature-detail-dialog {
	width: 95%;
	height: 99vh;
	max-width: 900px;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
	padding: 0;
	border-width: 0;

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.85);
	}
	iframe {
		width: 100%;
		height: 99%;
	}
}
html:has(dialog[open]) {
	overflow: hidden;
}
.guidance-to-inquiries {
	display: flex;
	justify-content: center;
	gap: 1em;

	&>a:last-child {
		display: flex;
		align-items: center;
	}
}
@media (max-width: 768px) {
	#what-is-sweet-ppm {
		.before-after-area {
			.ba-grid {
				grid-template-columns: 1fr;
			}
		}
	}
	.flow-grid  {
		grid-template-columns: 1fr;

		.flow-arrow {
			justify-content: center;
			
			div {
				width: 16px;
				height: 16px;
				border-top: 8px solid #0066cc;
				border-left: 8px solid transparent;
				border-right: 8px solid transparent;
			}
		}
	}

	.story-grid {
		grid-template-columns: 1fr;
	}

	.feat-grid {
		grid-template-columns: 1fr;
	}

	.feature-detail-card {
		grid-template-columns: 1fr;
	}

	.before-after-table {
		.ba-illust {
			display: none;
		}
		.ba-row {
			.ba-icon {
				display: none;
			}
		}
	}
	.roi-feature {
		.roi-grid {
			grid-template-columns: 1fr;
		}
	}

	.scalability-feature {
		.scalability-feature-grid {
			grid-template-columns: 1fr;
		}
	}
	.guidance-to-inquiries {
		flex-wrap: wrap;
	}
}