@font-face {
	font-family: "WWWA Cormorant";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-600.woff2") format("woff2");
}

.wwwals-product-summary,
.wwwals-product-story {
	--wwwals-ink: #192227;
	--wwwals-muted: #667177;
	--wwwals-paper: #f5f1e8;
	--wwwals-violet: #5137ff;
	--wwwals-orange: #ff6900;
	box-sizing: border-box;
	color: var(--wwwals-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wwwals-product-summary *,
.wwwals-product-story * {
	box-sizing: border-box;
}

.wwwals-product-summary__lead {
	margin: 0 0 18px;
	color: var(--wwwals-ink);
	font-family: "WWWA Cormorant", Georgia, serif;
	font-size: clamp(24px, 2.5vw, 34px);
	font-weight: 600;
	line-height: 1.08;
}

.wwwals-product-summary ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wwwals-product-summary li::before {
	margin-right: 8px;
	color: var(--wwwals-violet);
	content: "✓";
}

.wwwals-product-story {
	max-width: 1080px;
	margin: 56px auto;
	border: 1px solid #ddd8cc;
	background: #fffdf8;
	box-shadow: 0 28px 80px rgba(25, 34, 39, .09);
}

.wwwals-product-story__hero {
	position: relative;
	min-height: 390px;
	padding: clamp(38px, 7vw, 82px);
	overflow: hidden;
	background:
		radial-gradient(circle at 86% 9%, rgba(81, 55, 255, .44), transparent 30%),
		linear-gradient(125deg, #121b20, #223139);
	color: #fff;
}

.wwwals-product-story__hero::after {
	position: absolute;
	right: -120px;
	bottom: -210px;
	width: 480px;
	height: 480px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	box-shadow: 0 0 0 60px rgba(255, 255, 255, .025), 0 0 0 120px rgba(255, 255, 255, .018);
	content: "";
}

.wwwals-product-story__identity,
.wwwals-product-story__hero h2,
.wwwals-product-story__hero p {
	position: relative;
	z-index: 1;
}

.wwwals-product-story__identity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 72px;
}

.wwwals-product-story__logo {
	display: block;
	width: auto;
	max-width: min(320px, 60%);
	height: 58px;
	object-fit: contain;
	object-position: left center;
}

.wwwals-product-story__wordmark {
	font-family: "WWWA Cormorant", Georgia, serif;
	font-size: 40px;
	font-weight: 600;
}

.wwwals-product-story__kicker {
	color: rgba(255, 255, 255, .65);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.wwwals-product-story__hero h2 {
	max-width: 820px;
	margin: 0;
	color: #fff;
	font-family: "WWWA Cormorant", Georgia, serif;
	font-size: clamp(52px, 8vw, 96px);
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: .88;
}

.wwwals-product-story__hero > p {
	max-width: 720px;
	margin: 28px 0 0;
	color: rgba(255, 255, 255, .74);
	font-size: clamp(17px, 2vw, 22px);
	line-height: 1.65;
}

.wwwals-product-story__section {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 30px;
	padding: clamp(38px, 6vw, 74px);
	border-bottom: 1px solid #ddd8cc;
}

.wwwals-product-story__section--license {
	background: var(--wwwals-paper);
}

.wwwals-product-story__index {
	color: var(--wwwals-orange);
	font-family: "WWWA Cormorant", Georgia, serif;
	font-size: 42px;
	line-height: 1;
}

.wwwals-product-story h3 {
	margin: 0 0 24px;
	color: var(--wwwals-ink);
	font-family: "WWWA Cormorant", Georgia, serif;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 600;
	line-height: 1;
}

.wwwals-product-story__features,
.wwwals-product-story__section ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wwwals-product-story__features li,
.wwwals-product-story__section li {
	position: relative;
	padding: 14px 14px 14px 30px;
	border-top: 1px solid #ddd8cc;
	line-height: 1.6;
}

.wwwals-product-story__features li::before,
.wwwals-product-story__section li::before {
	position: absolute;
	top: 15px;
	left: 7px;
	color: var(--wwwals-violet);
	content: "●";
	font-size: 8px;
}

.wwwals-product-story__compact,
.wwwals-product-story__faq,
.wwwals-product-story__legal {
	padding: clamp(32px, 5vw, 58px) clamp(38px, 7vw, 82px);
	border-bottom: 1px solid #ddd8cc;
}

.wwwals-product-story__compact h3,
.wwwals-product-story__faq h3,
.wwwals-product-story__legal h3 {
	font-size: clamp(27px, 3vw, 38px);
}

.wwwals-product-story__faq details {
	border-top: 1px solid #ddd8cc;
}

.wwwals-product-story__faq details:last-child {
	border-bottom: 1px solid #ddd8cc;
}

.wwwals-product-story__faq summary {
	padding: 20px 3px;
	color: var(--wwwals-ink);
	font-weight: 700;
	cursor: pointer;
}

.wwwals-product-story__faq details p {
	max-width: 780px;
	margin: -4px 0 22px;
	color: var(--wwwals-muted);
	line-height: 1.7;
}

.wwwals-product-story__maker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: 28px clamp(38px, 7vw, 82px);
	background: #fff;
	color: var(--wwwals-muted);
	font-size: 12px;
}

.wwwals-product-story__agency {
	position: relative;
	display: block;
	width: 142px;
	height: 38px;
	overflow: hidden;
}

.wwwals-product-story__agency img {
	position: absolute;
	top: -27px;
	left: 0;
	display: block;
	width: 142px;
	height: auto;
}

@media (max-width: 680px) {
	.wwwals-product-story__identity {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 52px;
	}

	.wwwals-product-story__section {
		grid-template-columns: 1fr;
	}

	.wwwals-product-story__features,
	.wwwals-product-story__section ul {
		grid-template-columns: 1fr;
	}
}