/*
Theme Name: ClipMogul
Theme URI: https://clipmogul.com
Author: ClipMogul
Author URI: https://clipmogul.com
Description: The ClipMogul marketing site: home, pricing and legal pages in the app's look. Prices, limits, the app's address and the contact email live in site.json.
Requires at least: 6.6
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clipmogul
*/

/* The app's look (web/app/globals.css): night in a sunset city. Near-black with a warm cast, the caption yellow as the
   one action colour, the orange and pink of the horizon as accents, and wide heavy capitals for headings. Colours and
   fonts come from theme.json as --wp--preset--* variables. */

@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial");
	ascent-override: 88.96%;
	descent-override: 21.28%;
	line-gap-override: 0%;
	size-adjust: 98.7%;
}

:root {
	color-scheme: dark;
	--ink: var(--wp--preset--color--ink);
	--panel: var(--wp--preset--color--panel);
	--raised: var(--wp--preset--color--raised);
	--line: var(--wp--preset--color--line);
	--text: var(--wp--preset--color--text);
	--mute: var(--wp--preset--color--mute);
	--dim: var(--wp--preset--color--dim);
	--hype: var(--wp--preset--color--hype);
	--sun: var(--wp--preset--color--sun);
	--hot: var(--wp--preset--color--hot);
	--sunset: linear-gradient(to bottom, var(--hype) 0 33.4%, var(--sun) 33.4% 66.7%, var(--hot) 66.7% 100%);
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: clamp(64px, 9vw, 120px);
	--radius: 20px;
	--header-h: 70px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--wp--preset--font-family--archivo);
	font-size: 1.0625rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
}

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

img,
svg,
video {
	display: block;
	max-width: 100%;
}

/* Spacing comes from each container's gap, never from margins, so WordPress's own flow margins are cleared. */
body .wp-site-blocks > *,
.wp-site-blocks :is(h1, h2, h3, h4, p, ul, ol, figure, details, .wp-block-group, .wp-block-buttons) {
	margin-block: 0;
}

.wp-site-blocks figure {
	margin-inline: 0;
}

a {
	color: var(--hype);
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 3px solid var(--hype);
	outline-offset: 3px;
	border-radius: 6px;
}

strong,
b {
	font-weight: 800;
}

.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
}

.skip-link.screen-reader-text:focus {
	left: 16px;
	top: 16px;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--hype);
	color: var(--ink);
	font-weight: 800;
	text-decoration: none;
}

/* ---------- Building blocks ---------- */

.cm-wrap {
	width: min(100% - 2 * var(--gutter), 1180px);
	margin-inline: auto;
}

.cm-wrap--text {
	max-width: 760px;
}

.cm-display {
	font-stretch: 125%;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 0.95;
	text-wrap: balance;
}

.cm-hl {
	color: var(--hype);
}

.cm-h1 {
	font-size: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
}

.cm-h2 {
	font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
}

.cm-lead {
	max-width: 62ch;
	color: var(--mute);
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
	line-height: 1.5;
	text-wrap: pretty;
}

.cm-note {
	color: var(--mute);
	font-size: 0.9375rem;
}

.cm-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--sun);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cm-kicker::before {
	content: "";
	width: 26px;
	height: 12px;
	border-radius: 3px;
	background: var(--sunset);
}

.cm-section {
	padding-block: var(--section-y);
}

.cm-section--panel {
	background: var(--panel);
}

.cm-section > .cm-wrap {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 5vw, 56px);
}

.cm-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 800px;
}

.cm-sunset-bar {
	height: 6px;
	background: var(--sunset);
}

/* Buttons: the core Button block with class cm-button, or a plain link with class cm-btn. */
.cm-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cm-btn,
.cm-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: 14px;
	background: var(--hype);
	color: var(--ink);
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 12px 32px -14px rgba(255, 232, 26, 0.55);
	transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease;
}

.cm-btn:hover,
.cm-button > .wp-block-button__link:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.cm-button--ghost > .wp-block-button__link {
	background: transparent;
	color: var(--text);
	box-shadow: inset 0 0 0 1.5px var(--line);
}

.cm-button--ghost > .wp-block-button__link:hover {
	background: var(--raised);
	filter: none;
	box-shadow: inset 0 0 0 1.5px var(--dim);
}

.cm-btn--small {
	white-space: nowrap;
	min-height: 42px;
	padding: 0 16px;
	border-radius: 11px;
	font-size: 0.9375rem;
	box-shadow: none;
}

/* ---------- Header ---------- */

.cm-site-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	background: rgba(12, 10, 15, 0.88);
	border-bottom: 1px solid rgba(47, 42, 55, 0.7);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.cm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 64px;
}

.cm-logo {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 10px;
	border-radius: 10px;
	color: var(--text);
	text-decoration: none;
}

.cm-logo__mark {
	width: 32px;
	height: 32px;
}

.cm-logo__word {
	font-size: 1rem;
	font-stretch: 125%;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

.cm-logo__word span {
	color: var(--hype);
}

.cm-nav {
	display: flex;
	align-items: center;
	gap: 2px;
}

.cm-nav__link {
	padding: 10px 10px;
	border-radius: 10px;
	color: var(--text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.cm-nav__link:hover {
	background: var(--raised);
}

.cm-nav__link--wide {
	display: none;
}

.cm-nav .cm-btn {
	margin-left: 6px;
}

@media (min-width: 760px) {
	.cm-nav__link--wide {
		display: block;
	}

	.cm-nav__link {
		padding: 10px 14px;
	}

	.cm-logo__word {
		font-size: 1.25rem;
	}
}

/* ---------- Hero ---------- */

.cm-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(36px, 7vw, 96px) clamp(64px, 8vw, 120px);
}

.cm-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: auto -20% -30% 20%;
	height: 90%;
	background:
		radial-gradient(closest-side, rgba(255, 61, 129, 0.28), transparent 70%) 70% 60% / 70% 80% no-repeat,
		radial-gradient(closest-side, rgba(255, 138, 31, 0.22), transparent 70%) 40% 90% / 60% 60% no-repeat;
	pointer-events: none;
}

.cm-hero__grid {
	display: grid;
	gap: 56px;
	align-items: center;
}

.cm-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.cm-hero__title {
	font-size: clamp(2.75rem, 1.2rem + 6.6vw, 6.25rem);
}

.cm-hero__title .cm-hl {
	display: block;
}

.cm-pill a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--raised);
	color: var(--text);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.cm-pill a:hover {
	border-color: var(--dim);
}

.cm-pill strong {
	flex-shrink: 0;
	padding: 4px 9px;
	border-radius: 999px;
	background: var(--hype);
	color: var(--ink);
	font-size: 0.75rem;
	font-stretch: 125%;
	font-weight: 900;
	letter-spacing: 0.02em;
}

.cm-hero .cm-note {
	margin-top: -8px;
}

.cm-sources {
	color: var(--dim);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cm-sources strong {
	color: var(--mute);
}

.cm-hero__visual {
	position: relative;
	justify-self: center;
	width: min(64vw, 300px);
}

@media (min-width: 960px) {
	.cm-hero__grid {
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
		gap: 40px;
	}

	.cm-hero__visual {
		width: 340px;
	}
}

/* A phone-shaped frame around a 9:16 picture. */
.cm-phone {
	position: relative;
	aspect-ratio: 9 / 16;
	padding: 7px;
	border-radius: 34px;
	background: linear-gradient(160deg, #3a3346, #16131b 60%);
	box-shadow:
		0 0 0 1px #3a3444,
		0 40px 80px -36px rgba(0, 0, 0, 0.9);
}

.cm-phone__screen {
	position: relative;
	height: 100%;
	overflow: hidden;
	border-radius: 28px;
	background: #000;
}

.cm-phone__screen > img,
.cm-phone__screen > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cm-phone--hero {
	box-shadow:
		0 0 0 1px #3a3444,
		0 50px 100px -40px rgba(0, 0, 0, 0.95),
		0 0 140px -30px rgba(255, 61, 129, 0.5);
	transform: rotate(2.5deg);
}

/* The hero clip, drawn the way the engine lays out a stacked clip: camera panel on top (36% of the height), captions
   across the join, the hook line under them in the game. */
.cm-shot {
	container-type: inline-size;
}

.cm-shot__caption {
	position: absolute;
	top: 31.5%;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 9cqw;
	line-height: 1;
}

.cm-shot__caption span:nth-child(2) {
	color: var(--hype);
}

.cm-shot__hook {
	position: absolute;
	top: 43%;
	left: 50%;
	width: 82%;
	padding: 2.4cqw 3.4cqw;
	border-radius: 2cqw;
	background: #fff;
	color: #000;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 5.6cqw;
	font-weight: 800;
	line-height: 1.15;
	text-align: center;
	transform: translateX(-50%);
}

.cm-callouts {
	display: none;
}

@media (min-width: 1280px) {
	.cm-callouts {
		display: block;
		position: absolute;
		inset: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		pointer-events: none;
	}

	.cm-callout {
		position: absolute;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 12px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: rgba(22, 19, 27, 0.92);
		color: var(--text);
		font-size: 0.8125rem;
		font-weight: 700;
		white-space: nowrap;
		box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
	}

	.cm-callout::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--hype);
	}

	.cm-callout--cam {
		top: 12%;
		right: -26%;
	}

	.cm-callout--cap {
		top: 29%;
		left: -52%;
	}

	.cm-callout--hook {
		top: 47%;
		right: -16%;
	}

	.cm-callout--hook::before {
		background: var(--sun);
	}

	.cm-callout--size {
		bottom: 8%;
		left: -18%;
	}

	.cm-callout--size::before {
		background: var(--hot);
	}
}

/* ---------- Caption samples, in the engine's caption fonts ---------- */

.cm-cap {
	paint-order: stroke fill;
	color: #fff;
	white-space: nowrap;
}

.cm-cap--hype {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 800;
	text-transform: uppercase;
	-webkit-text-stroke: 0.16em #000;
}

.cm-cap--hype b {
	color: var(--hype);
}

.cm-cap--clean {
	color: #c9c9c9;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 700;
	-webkit-text-stroke: 0.07em #000;
}

.cm-cap--clean b {
	color: #fff;
}

.cm-cap--punch {
	font-family: var(--wp--preset--font-family--anton);
	font-weight: 400;
	text-transform: uppercase;
	-webkit-text-stroke: 0.12em #000;
}

.cm-cap b {
	font-weight: inherit;
}

/* ---------- Steps ---------- */

.cm-steps {
	display: grid;
	gap: 14px;
	counter-reset: step;
}

.cm-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink);
}

.cm-step::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	margin-bottom: 8px;
	color: transparent;
	font-size: 3.25rem;
	font-stretch: 125%;
	font-weight: 900;
	line-height: 0.9;
	-webkit-text-stroke: 1.5px var(--sun);
}

.cm-step h3 {
	font-size: 1.3125rem;
	font-weight: 800;
	line-height: 1.2;
}

.cm-step p {
	color: var(--mute);
}

@media (min-width: 800px) {
	.cm-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	.cm-step {
		padding: 32px 30px 34px;
	}
}

/* ---------- Showcase ---------- */

.cm-showcase {
	overflow: hidden;
}

.cm-reel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(58vw, 240px);
	gap: 14px;
	margin-inline: calc(-1 * var(--gutter));
	padding: 8px var(--gutter) 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.cm-reel::-webkit-scrollbar {
	display: none;
}

.cm-reel .cm-phone {
	padding: 5px;
	border-radius: 26px;
	scroll-snap-align: start;
}

.cm-reel .cm-phone__screen {
	border-radius: 21px;
}

@media (min-width: 1000px) {
	.cm-reel {
		grid-auto-flow: row;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
		margin: 0;
		padding: 0 0 40px;
		overflow: visible;
	}

	.cm-reel .cm-phone:nth-child(even) {
		transform: translateY(40px);
	}
}

/* ---------- Features ---------- */

.cm-bento {
	display: grid;
	gap: 14px;
}

.cm-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px 24px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--ink);
}

.cm-card h3 {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.2;
}

.cm-card p {
	color: var(--mute);
}

@media (min-width: 720px) {
	.cm-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cm-card--wide {
		grid-column: span 2;
	}
}

@media (min-width: 1040px) {
	.cm-bento {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px;
	}

	.cm-card {
		padding: 30px 28px;
	}
}

.cm-styles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.cm-style {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cm-style__frame {
	container-type: inline-size;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(84px, 16vw, 128px);
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(160deg, #3b2a4a, #1a2833 55%, #2d3b22);
}

/* Sized to the frame, so the longest sample fits at any width. */
.cm-style__frame .cm-cap {
	font-size: min(12cqw, 1.5rem);
}

.cm-style__frame .cm-cap--punch {
	font-size: min(24cqw, 2.6rem);
}

.cm-style figcaption {
	color: var(--text);
	font-size: 0.875rem;
	font-weight: 700;
	text-align: center;
}

/* The facecam explainer: a wide stream with its camera in a corner becomes a vertical clip with the camera on top. */
.cm-stack {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--dim);
}

.cm-stack__source {
	position: relative;
	width: 132px;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	background: linear-gradient(180deg, #4a2a5a, #ff3d81 55%, #ff8a1f 80%, #2a1c30 81%);
}

.cm-stack__cam {
	position: absolute;
	right: 6%;
	bottom: 10%;
	width: 28%;
	aspect-ratio: 4 / 3;
	border: 2px dashed var(--hype);
	border-radius: 4px;
	background: #2a2335;
}

.cm-stack__out {
	display: grid;
	grid-template-rows: 36fr 64fr;
	width: 58px;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 0 0 2px var(--line);
}

.cm-stack__top {
	background: #2a2335;
	border-bottom: 2px solid var(--hype);
}

.cm-stack__bottom {
	background: linear-gradient(180deg, #ff3d81, #ff8a1f 70%, #2a1c30 71%);
}

/* ---------- GTA 6 launch ---------- */

.cm-launch {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border-block: 1px solid var(--line);
	background:
		radial-gradient(60% 80% at 100% 100%, rgba(255, 61, 129, 0.22), transparent 70%),
		radial-gradient(50% 60% at 0% 0%, rgba(255, 138, 31, 0.12), transparent 70%),
		var(--ink);
}

.cm-launch__date {
	display: block;
	margin-top: 0.12em;
	background: linear-gradient(180deg, var(--hype) 0 40%, var(--sun) 40% 66%, var(--hot) 66% 100%);
	/* The three bands repeat on each line of the date. */
	background-size: 100% 1lh;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.1em;
	line-height: 0.95;
}

.cm-section > .cm-launch__grid {
	display: grid;
	gap: 40px;
}

.cm-stats {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cm-stat {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding-block: 18px;
	border-top: 1px solid var(--line);
}

.cm-stat__num {
	flex-shrink: 0;
	min-width: 4.2ch;
	color: var(--text);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
	font-stretch: 125%;
	font-weight: 900;
	line-height: 1;
}

.cm-stat__num small {
	margin-left: 0.2em;
	color: var(--sun);
	font-size: 0.36em;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cm-stat__label {
	color: var(--mute);
}

.cm-stats .cm-actions {
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

@media (min-width: 960px) {
	.cm-section > .cm-launch__grid {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		align-items: center;
		gap: 72px;
	}
}

/* ---------- Plans ---------- */

.cm-plans {
	display: grid;
	gap: 16px;
}

.cm-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px 24px;
	border: 1px solid var(--line);
	border-radius: 24px;
	background: var(--panel);
}

.cm-section--panel .cm-plan {
	background: var(--ink);
}

.cm-plan--featured {
	border-color: rgba(255, 232, 26, 0.55);
	background:
		linear-gradient(180deg, rgba(255, 232, 26, 0.07), transparent 45%),
		var(--panel);
	box-shadow: 0 30px 70px -40px rgba(255, 232, 26, 0.45);
}

.cm-plan__name {
	font-size: 1.5rem;
	font-stretch: 125%;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.cm-plan__price {
	font-size: 3.25rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
}

.cm-plan__price span {
	color: var(--mute);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0;
}

.cm-plan__badge {
	position: absolute;
	top: -13px;
	right: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--hype);
	color: var(--ink);
	font-size: 0.75rem;
	font-stretch: 125%;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cm-ticks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
	color: var(--mute);
}

.cm-ticks li {
	position: relative;
	padding-left: 30px;
}

.cm-ticks li::before {
	content: "";
	position: absolute;
	top: 0.2em;
	left: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 232, 26, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23ffe81a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.cm-ticks strong {
	color: var(--text);
}

.cm-plan .cm-actions {
	margin-top: auto;
}

.cm-plan .wp-block-button {
	flex: 1;
}

.cm-plan .wp-block-button__link {
	width: 100%;
}

.cm-fine {
	color: var(--mute);
	font-size: 0.875rem;
}

.cm-more a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

@media (min-width: 900px) {
	.cm-plans {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 20px;
	}

	.cm-plan {
		padding: 34px 30px;
	}
}

/* ---------- Pricing rules ---------- */

.cm-rules {
	display: grid;
	gap: 1px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--line);
}

.cm-rule {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: var(--ink);
}

.cm-rule h3 {
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.25;
}

.cm-rule p {
	color: var(--mute);
	font-size: 0.9875rem;
}

@media (min-width: 720px) {
	.cm-rules {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.cm-rules {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.cm-rule {
		padding: 28px;
	}
}

.cm-intro {
	padding-bottom: calc(var(--section-y) * 0.8);
}

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

.cm-section > .cm-faq {
	display: grid;
}

.cm-faq__list {
	border-top: 1px solid var(--line);
}

.cm-faq__list .wp-block-details {
	border-bottom: 1px solid var(--line);
}

.cm-faq__list summary {
	position: relative;
	padding: 22px 48px 22px 0;
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.cm-faq__list summary::-webkit-details-marker {
	display: none;
}

.cm-faq__list summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 4px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	border-radius: 50%;
	background:
		linear-gradient(var(--hype), var(--hype)) center / 12px 2px no-repeat,
		linear-gradient(var(--hype), var(--hype)) center / 2px 12px no-repeat,
		var(--raised);
	transition: transform 0.2s ease;
}

.cm-faq__list details[open] summary::after {
	transform: rotate(45deg);
}

.cm-faq__list summary:hover {
	color: var(--hype);
}

.cm-faq__list details > p {
	max-width: 66ch;
	padding-bottom: 24px;
	color: var(--mute);
}

@media (min-width: 960px) {
	.cm-section > .cm-faq {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: 64px;
		align-items: start;
	}

	.cm-faq .cm-head {
		position: sticky;
		top: calc(var(--header-h) + 32px);
	}
}

/* ---------- Final call to action ---------- */

.cm-cta__box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	overflow: hidden;
	padding: clamp(48px, 8vw, 96px) 22px;
	border: 1px solid var(--line);
	border-radius: 32px;
	background:
		radial-gradient(70% 90% at 50% 120%, rgba(255, 61, 129, 0.4), transparent 70%),
		radial-gradient(50% 60% at 50% 115%, rgba(255, 138, 31, 0.45), transparent 70%),
		var(--panel);
	text-align: center;
}

.cm-cta__box::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: var(--sunset);
}

.cm-cta__box .cm-hl {
	display: block;
}

.cm-cta__box .cm-actions {
	justify-content: center;
}

/* ---------- Plain pages (Terms, Privacy, Refund policy) ---------- */

.cm-page {
	padding-block: clamp(48px, 8vw, 96px) clamp(72px, 10vw, 128px);
}

.cm-page > .cm-wrap {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.cm-page__title {
	font-size: clamp(2.25rem, 1.4rem + 4vw, 4rem);
}

.wp-site-blocks .cm-prose > * + * {
	margin-top: 1em;
}

.cm-prose :is(h2, h3) {
	margin-top: 1.6em;
	line-height: 1.2;
}

.cm-prose p,
.cm-prose li {
	color: var(--mute);
}

.cm-placeholder {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	border: 2px dashed var(--dim);
	border-radius: var(--radius);
	color: var(--mute);
}

.cm-placeholder__label {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--hype);
	color: var(--ink);
	font-size: 0.75rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cm-posts .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 0;
	list-style: none;
}

.cm-posts__title a {
	color: var(--text);
	text-decoration: none;
}

/* ---------- Footer ---------- */

.cm-site-footer {
	border-top: 1px solid var(--line);
	background: var(--ink);
}

.cm-footer {
	display: grid;
	gap: 40px;
	padding-block: 56px 36px;
}

.cm-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
	color: var(--mute);
}

.cm-footer__nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
}

.cm-footer__nav h2 {
	margin: 0 0 12px;
	color: var(--dim);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cm-footer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cm-footer__nav a {
	display: inline-block;
	padding-block: 6px;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cm-footer__nav a:hover {
	color: var(--hype);
}

.cm-footer__nav > div:last-child {
	grid-column: 1 / -1;
}

.cm-footer__small {
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--mute);
	font-size: 0.8125rem;
}

@media (min-width: 900px) {
	.cm-footer {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	}

	.cm-footer__nav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cm-footer__nav > div:last-child {
		grid-column: auto;
	}

	.cm-footer__small {
		grid-column: 1 / -1;
	}
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
	/* Each caption word lights up in turn, as the engine burns them in. */
	.cm-shot__caption span {
		animation: cm-word 2.4s steps(1, end) infinite;
	}

	.cm-shot__caption span:nth-child(2) {
		animation-delay: -1.6s;
	}

	.cm-shot__caption span:nth-child(3) {
		animation-delay: -0.8s;
	}
}

@keyframes cm-word {
	0% {
		color: var(--hype);
	}

	33.33% {
		color: #fff;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
	}
}