﻿#mcx { --bg: #114c64; --text: #f5f7f8; --muted: #eeeeed; --field-bg: #ffffff; --field-text: #1a1f21; --field-border: #d6dadd; --field-focus: #2aa6bf; --btn: #ff3600; --btn-text: #ffffff; --btn-hover: #b92700; --success: #49ff52; --error: #ff3600; background: var(--bg); border-top: 3px solid var(--btn); color: var(--text); padding: 48px 16px 56px; }
#mcx-inner {max-width: 840px; display:flex; justify-content:flex-start; margin: auto; flex-direction:column;}
	#mcx h2 { margin: 0 0 20px; font-size: clamp(22px, 3.2vw, 44px); line-height: 1.2; font-weight: 400; color:var(--muted);}

	#mcx .mcx-row { margin: 0 auto 12px; gap: 12px; align-items: center; display:flex; width:100%; justify-content:flex-start;}

	#mcx label { display: none; }

	#mcx #mcx-email { width: 100%; height: 54px; padding: 0 18px; background: var(--field-bg); color: var(--field-text); border: 1px solid var(--field-border); font-size: 18px; outline: none; max-width:none; }

		#mcx #mcx-email:focus-visible { border-color: var(--field-focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--field-focus), transparent 70%); }

	#mcx #mcx-submit { height: 56px; padding: 0 22px; background: var(--btn); color: var(--btn-text); border: 0; font-size: 16px; font-weight: 700; cursor: pointer; white-space: nowrap; }

		#mcx #mcx-submit:hover { background: var(--btn-hover); }
		#mcx #mcx-submit:active { transform: translateY(1px); }
		#mcx #mcx-submit:focus-visible { outline: 3px solid color-mix(in oklab, var(--btn), white 50%); outline-offset: 2px; }

	#mcx .mcx-check { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 15px; }

		#mcx .mcx-check input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--btn); }

		#mcx .mcx-check a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

	#mcx #mcx-msg { grid-column: 1 / -1; margin-top: 8px; font-size: 18px; min-height: 22px; }

		#mcx #mcx-msg[data-state="ok"] { color: var(--success); }
		#mcx #mcx-msg[data-state="err"] { color: var(--error); }

@media (max-width: 600px) {
	#mcx {padding: 30px 10px;}
	#mcx #mcx-email { height: 40px; padding: 0 9px; font-size: 14px; }
	#mcx #mcx-submit {height: 40px; font-size: 12px; }
}
