/* mk-alpha.css: /alpha/ in "the control room at night". Loaded on the alpha page only (slug alpha), after home.css.
   The page is the [pd_alpha_signup] shortcode plus a step rail; the plugin's markup, ids and classes are untouched.
   Every rule is under body.dsd. Visitor task: sign up, so the form is the first thing under the header on desktop
   (right column, top of the page) and directly after the short header on a phone.
   Layout of the shortcode: hero + promise on the left, the form as the one framed surface on the right. */

body.dsd #page-container .dsdm-alpha-main {
	padding-top: 56px !important;
	padding-bottom: var(--dsdh-pad) !important;
}

/* The plugin's own custom properties, remapped to the tokens, recolour every plugin rule that reads them. */
body.dsd #page-container .dsdm-alpha-main .pdas {
	--pdas-bg: var(--dsc-bg);
	--pdas-card: var(--dsc-surface);
	--pdas-line: var(--dsc-line);
	--pdas-text: var(--dsc-text);
	--pdas-muted: var(--dsc-muted-long);
	--pdas-green: var(--dsc-accent);
	--pdas-amber: var(--dsc-muted);
	--pdas-red: var(--dsc-bad);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "hero card" "promise card";
	gap: 32px 64px;
	align-items: start;
	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--dsc-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-alpha-main .pdas-hero { grid-area: hero; }
body.dsd #page-container .dsdm-alpha-main .pdas-promise { grid-area: promise; }
body.dsd #page-container .dsdm-alpha-main .pdas-card { grid-area: card; }

/* ---------- left: the short header ---------- */

body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-kicker {
	margin: 0 0 12px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dsc-accent);
}
body.dsd #page-container .dsdm-alpha-main .pdas h1 {
	margin: 0 0 20px !important;
	font-size: clamp(38px, 4.4vw, 56px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.03em !important;
	text-wrap: balance;
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding: 8px 14px;
	border: 1px solid var(--dsc-line);
	border-radius: 999px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.4;
	color: var(--dsc-text);
}
body.dsd #page-container .dsdm-alpha-main .pdas-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dsc-ok);
	box-shadow: none;
	flex: none;
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-kit {
	margin: 0 0 20px;
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--dsc-muted);
	overflow-wrap: anywhere;
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-lead {
	max-width: 46ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.55;
	color: var(--dsc-muted-long);
	text-wrap: pretty;
}
body.dsd #page-container .dsdm-alpha-main .pdas strong {
	color: var(--dsc-text);
	font-weight: 600;
}

/* ---------- left: what you get, a plain list on the ground ---------- */

body.dsd #page-container .dsdm-alpha-main .pdas-promise {
	margin: 0;
	padding: 24px 0 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--dsc-line);
	border-radius: 0;
}
body.dsd #page-container .dsdm-alpha-main .pdas-promise h2 {
	margin: 0 0 12px !important;
	font-size: 22px !important;
	line-height: 1.25 !important;
	letter-spacing: -0.01em !important;
}
body.dsd #page-container .dsdm-alpha-main .pdas-promise ul {
	margin: 4px 0 16px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--dsc-line);
}
body.dsd #page-container .dsdm-alpha-main .pdas-promise li {
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid var(--dsc-line);
	font-size: 15px;
	line-height: 1.5;
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-note {
	margin: 0;
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.6;
	color: var(--dsc-muted);
}

/* ---------- right: the form as an instrument panel, the page's one framed surface ---------- */

body.dsd #page-container .dsdm-alpha-main .pdas-card {
	margin: 0;
	padding: 32px;
	background: var(--dsc-surface);
	border: 1px solid var(--dsc-line);
	border-radius: var(--dsc-r-card);
	box-shadow: none;
}
body.dsd #page-container .dsdm-alpha-main .pdas-card h2 {
	margin: 0 0 12px !important;
	font-size: clamp(24px, 2.4vw, 30px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-why {
	max-width: 60ch;
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.55;
}
body.dsd #page-container .dsdm-alpha-main .pdas-form { margin-top: 0; }
body.dsd #page-container .dsdm-alpha-main .pdas-group {
	margin: 24px 0 0;
	padding: 20px 0 0;
	border: 0;
	border-top: 1px solid var(--dsc-line);
}
body.dsd #page-container .dsdm-alpha-main .pdas-group legend {
	padding: 0 12px 0 0;
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-muted);
}
body.dsd #page-container .dsdm-alpha-main .pdas-grid { gap: 20px 20px; }

/* mono labels, hairline inputs */
body.dsd #page-container .dsdm-alpha-main .pdas-field {
	gap: 8px;
	font-size: 15px;
}
body.dsd #page-container .dsdm-alpha-main .pdas-field > span {
	font-family: var(--dsc-mono);
	font-size: 12px;
	line-height: 1.45;
	letter-spacing: 0.04em;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-alpha-main .pdas-field > span em {
	margin-left: 8px;
	font-style: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dsc-accent);
}
body.dsd #page-container .dsdm-alpha-main .pdas :is(input[type="text"], input[type="email"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	background: var(--dsc-bg);
	color: var(--dsc-text);
	border: 1px solid var(--dsc-line-strong);
	border-radius: 8px;
	font: 400 16px/1.4 var(--dsc-font);
	box-shadow: none;
}
body.dsd #page-container .dsdm-alpha-main .pdas textarea { min-height: 96px; }
body.dsd #page-container .dsdm-alpha-main .pdas ::placeholder { color: var(--dsc-muted); opacity: 1; }
body.dsd #page-container .dsdm-alpha-main .pdas :is(input, select, textarea):focus {
	border-color: var(--dsc-accent);
	outline: 2px solid var(--dsc-accent);
	outline-offset: 1px;
}
/* error state (the plugin script adds .pdas-invalid to a missing required answer and focuses the first) */
body.dsd #page-container .dsdm-alpha-main .pdas .pdas-invalid,
body.dsd #page-container .dsdm-alpha-main .pdas input.pdas-invalid {
	border-color: var(--dsc-bad);
	background: rgba(239, 83, 80, 0.08);
}
body.dsd #page-container .dsdm-alpha-main .pdas .pdas-consent.pdas-invalid {
	padding: 10px 12px;
	border: 1px solid var(--dsc-bad);
	border-radius: 8px;
}
body.dsd #page-container .dsdm-alpha-main .pdas .pdas-consent.pdas-invalid span { color: var(--dsc-text); }

body.dsd #page-container .dsdm-alpha-main .pdas-checks { gap: 4px 16px; }
body.dsd #page-container .dsdm-alpha-main .pdas-check {
	align-items: flex-start;
	gap: 10px;
	min-height: 32px;
	padding: 4px 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--dsc-muted-long);
}
body.dsd #page-container .dsdm-alpha-main .pdas-check input {
	width: 18px;
	height: 18px;
	margin: 3px 0 0;
	accent-color: var(--dsc-accent);
}
body.dsd #page-container .dsdm-alpha-main .pdas-consent {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--dsc-line);
}
body.dsd #page-container .dsdm-alpha-main .pdas-field-wide { margin-top: 16px; }

/* the page's one teal button */
body.dsd #page-container .dsdm-alpha-main .pdas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 24px;
	padding: 0 28px;
	background: var(--dsc-accent);
	color: var(--dsc-on-accent);
	border: 1px solid var(--dsc-accent);
	border-radius: var(--dsc-r-btn);
	font: 600 16px/1.1 var(--dsc-font);
	filter: none;
	cursor: pointer;
	transition: background-color var(--dsc-dur-1) var(--dsc-ease), border-color var(--dsc-dur-1) var(--dsc-ease);
}
body.dsd #page-container .dsdm-alpha-main .pdas-btn:hover {
	background: var(--dsc-accent-hover);
	border-color: var(--dsc-accent-hover);
	filter: none;
}

/* success and error notices (the plugin prints one above the form, or in place of it once sent) */
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-notice {
	margin: 16px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dsc-text);
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-ok {
	background: rgba(102, 187, 106, 0.1);
	border: 1px solid var(--dsc-ok);
}
body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-err {
	background: rgba(239, 83, 80, 0.1);
	border: 1px solid var(--dsc-bad);
}

/* ---------- under it: what happens next, a three step rail in one framed strip ---------- */

body.dsd #page-container .dsdm-alpha-next { padding-top: var(--dsdh-pad) !important; }
body.dsd #page-container .dsdm-alpha-steps.dsdh-row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
}
body.dsd #page-container .dsdm-alpha-steps > .dsdm-alpha-step { gap: 10px; }
body.dsd #page-container .dsdm-alpha-steps .dsdh-body .et_pb_text_inner p {
	font-size: 15px;
	line-height: 1.55;
}
body.dsd #page-container .dsdm-alpha-next .dsdh-row--foot { display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
	body.dsd #page-container .dsdm-alpha-main .pdas {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "hero" "card" "promise";
		gap: 32px;
	}
}
@media (max-width: 767px) {
	body.dsd #page-container .dsdm-alpha-main { padding-top: 32px !important; }
	body.dsd #page-container .dsdm-alpha-main .pdas-card { padding: 20px; }
	body.dsd #page-container .dsdm-alpha-main .pdas p.pdas-lead { font-size: 17px; }
	body.dsd #page-container .dsdm-alpha-main .pdas-btn { width: 100%; }
	body.dsd #page-container .dsdm-alpha-steps.dsdh-row { grid-template-columns: minmax(0, 1fr); }
	body.dsd #page-container .dsdm-alpha-steps > .dsdh-col + .dsdh-col {
		border-left: 0;
		border-top: 1px solid var(--dsc-line);
	}
}