/* Signup form — Figma 21:841 / 36:890. Width 504 on desktop. */
.signup { display: grid; gap: 16px; width: 100%; max-width: 504px; }

.signup__row { display: grid; gap: 16px; }
@media (min-width: 480px) {
	.signup__row { grid-template-columns: 1fr 1fr; }
}

.signup__consent { display: grid; gap: 6px; }

.signup__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	justify-self: start;
	margin-left: 31px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--c-gray);
	opacity: 0.8;
}
button.signup__more:hover { color: var(--c-black); }
.signup__caret { width: 16px; height: 16px; }
.signup__more[aria-expanded="true"] .signup__caret { transform: rotate(180deg); }

.signup__more-panel {
	padding-left: 52px;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--c-gray);
	opacity: 0.8;
}
.signup__more-panel p + p { margin-top: 1em; }
.signup__more-panel a { color: inherit; }
.signup__more-panel a:hover { color: var(--c-black); }

.signup__legal { font-size: 0.75rem; line-height: 1.4; letter-spacing: -0.02em; color: var(--c-gray); }
.signup__legal-link { font-weight: 600; color: var(--c-black); }
a.signup__legal-link:hover { color: var(--c-orange); }

/* Mobile — Figma 69:5787: consent 14/21, CTA 14px, legal 9px. */
.signup .check { font-size: 0.875rem; line-height: 1.5; }
.signup .btn { font-size: 0.875rem; line-height: 16px; }
.signup__legal { font-size: 0.5625rem; line-height: 1.25; }
@media (min-width: 768px) {
	.signup .check { font-size: 1rem; }
	.signup .btn { font-size: 1rem; line-height: 1; }
	.signup__legal { font-size: 0.75rem; line-height: 1.4; }
}

/* Fluent Forms versions of the forms: homepage form #2 (plugin cihla-kit-journey, .ckj-homepage) and the
   lead magnet forms #3–5 (.magnet__aside). Fluent's own CSS (and the plugin's) otherwise wins, so every
   selector here carries two classes. Figma 21:841 / 69:5787 (homepage), 64:983 / 68:2624 (magnet). */
:is(.signup.ckj-homepage, .magnet__aside) .fluentform,
:is(.signup.ckj-homepage, .magnet__aside) form { width: 100%; max-width: 504px; margin: 0; }
/* Fluent wraps every field in one <fieldset>: the 16px rhythm goes there, group margins go. */
:is(.signup.ckj-homepage, .magnet__aside) fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-group { margin-bottom: 0; }
:is(.signup.ckj-homepage, .magnet__aside) .ff-name-field-wrapper > .ff-t-container { display: grid; gap: 16px; }
:is(.signup.ckj-homepage, .magnet__aside) .ff-name-field-wrapper .ff-t-cell { width: auto; min-width: 0; padding: 0; }
@media (min-width: 480px) {
	:is(.signup.ckj-homepage, .magnet__aside) .ff-name-field-wrapper > .ff-t-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* No visible field labels in the design (placeholders only). */
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-input--label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Inputs as .field. */
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-control { height: 56px; padding: 0 24px; background: var(--c-white); border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-drop); font-size: 1rem; line-height: 1; letter-spacing: var(--ls-body); color: var(--c-black); }
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-control::placeholder { color: rgba(31, 39, 44, 0.6); opacity: 1; }
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-control:hover,
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-control:focus { border-color: transparent; box-shadow: var(--shadow-cookies); outline: none; }
/* Checkboxes as .check. */
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-check { margin: 0; padding: 0; }
:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-check-label { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; line-height: 1.5; cursor: pointer; }
:is(.signup.ckj-homepage, .magnet__aside) input[type="checkbox"] {
	appearance: none; flex: 0 0 24px; width: 24px; height: 24px; margin: 0;
	border: 2px solid rgba(216, 181, 171, 0.4); border-radius: var(--radius-sm); background: var(--c-white); box-shadow: var(--shadow-drop); cursor: pointer;
}
:is(.signup.ckj-homepage, .magnet__aside) input[type="checkbox"]:checked {
	background: var(--c-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
	border-color: var(--c-orange);
}
:is(.signup.ckj-homepage, .magnet__aside) input[type="checkbox"]:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; }
/* Submit as .btn: Fluent's per-form CSS keeps the accent colour (!important), we set the shape. */
:is(.signup.ckj-homepage, .magnet__aside) .ff-btn-submit {
	display: flex; align-items: center; justify-content: center; width: 100%; padding: 20px 24px;
	border-width: 4px; border-style: solid; border-radius: var(--radius-md); box-shadow: var(--shadow-drop);
	font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; line-height: 16px; letter-spacing: var(--ls-body); white-space: normal; text-align: center;
}
:is(.signup.ckj-homepage, .magnet__aside) .ff_submit_btn_wrapper { margin: 0; }
/* Homepage legal note. */
.signup.ckj-homepage .signup__legal { font-size: 0.5625rem; line-height: 1.25; letter-spacing: -0.02em; color: var(--c-gray); }
.signup.ckj-homepage .signup__legal a { font-weight: 600; color: var(--c-black); }
.signup.ckj-homepage .signup__legal a:hover { color: var(--c-orange); }
@media (min-width: 768px) {
	:is(.signup.ckj-homepage, .magnet__aside) .ff-el-form-check-label { font-size: 1rem; }
	:is(.signup.ckj-homepage, .magnet__aside) .ff-btn-submit { font-size: 1rem; line-height: 1; }
	.signup.ckj-homepage .signup__legal { font-size: 0.75rem; line-height: 1.4; }
}