/* AI-Genics — Request a Demo page.
   1. LinkedIn card hover (Figma 1439:69653, DISSOLVE 0.3 s). The card itself fades to #0a5eb3 with its own Elementor hover
      (inset box-shadow); the children are recoloured here. Scoped to the marker class ag-request-a-demo-linkedin; relies on the
      card's child order: 1 symbol box, 2 "Connect With", 3 "LinkedIn", 4 body text, 5 arrow.
   2. Contact Form 7 "Request a Demo form" (Figma form state 1439:69523), inserted into the slot .ag-form-request-a-demo;
      CF7 renders <form class="ag-cf7 ag-cf7-request-a-demo">. Sizes: Figma px × --u (1px at 1920, proportional above 1024 px,
      a plain 1px at ≤ 1024 px — the same model as the Elementor page). Undesigned states (typed text, focus, invalid, checked,
      response, sending) are minimal and on-brand: white text, thin ice/beige inner outline, beige tips and tick, ice response. */

/* 1 ─ LinkedIn card hover */
.ag-request-a-demo-linkedin > * { transition: color 0.3s, background-color 0.3s, opacity 0.3s; }
.ag-request-a-demo-linkedin:hover > :nth-child(1) { background-color: #ffffff; color: #0a5eb3; }
.ag-request-a-demo-linkedin:hover > :nth-child(2) { color: #b6d6dd; }
.ag-request-a-demo-linkedin:hover > :nth-child(3) { color: #ffffff; }
.ag-request-a-demo-linkedin:hover > :nth-child(4) { color: #b6d6dd; }
.ag-request-a-demo-linkedin:hover > :nth-child(5) { opacity: 0.2; }

/* 2 ─ the form */
.ag-cf7-request-a-demo { --u: calc(100vw / 1920); position: relative; margin: 0; font-family: var(--ag-body, 'DM Sans'), sans-serif; }
@media (max-width: 1024px) { .ag-cf7-request-a-demo { --u: 1px; } }
.ag-cf7-request-a-demo p { margin: 0; }
.ag-cf7-request-a-demo .ag-cf-field > p, .ag-cf7-request-a-demo .ag-cf-actions > p { display: contents; } /* CF7's automatic <p> */

/* grid: 3 × 290 px columns, 14 px column gap, 17 px row gap; the product select spans columns 2–3 */
.ag-cf7-request-a-demo .ag-cf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(14 * var(--u)); row-gap: calc(17 * var(--u)); }
.ag-cf7-request-a-demo .ag-cf-wide { grid-column: span 2; }
.ag-cf7-request-a-demo .wpcf7-form-control-wrap { display: block; position: relative; }

/* fields: 60 px, ice @ 10 %, radius 10, no border; text DM Sans 20/29 −2 % #b6d6dd at +27 px */
.ag-cf7-request-a-demo input.wpcf7-form-control,
.ag-cf7-request-a-demo select.wpcf7-form-control {
	display: block; box-sizing: border-box; width: 100%; height: calc(60 * var(--u)); margin: 0; padding: 0 calc(27 * var(--u));
	border: 0; border-radius: calc(10 * var(--u)); background-color: rgba(182, 214, 221, 0.1); box-shadow: none; outline: none;
	font-family: inherit; font-weight: 400; font-size: max(13px, calc(20 * var(--u))); line-height: calc(29 * var(--u)); letter-spacing: -0.02em;
	color: var(--ag-white, #fff); transition: box-shadow 0.2s, background-color 0.2s;
}
.ag-cf7-request-a-demo .wpcf7-form-control::placeholder { color: var(--ag-ice, #b6d6dd); opacity: 1; }
/* selects: value shown in #b6d6dd (Figma "Select Country" / "TradeComply") + the 14 × 8 chevron 20 px from the right */
.ag-cf7-request-a-demo select.wpcf7-form-control {
	-webkit-appearance: none; appearance: none; cursor: pointer; padding-right: calc(52 * var(--u)); color: var(--ag-ice, #b6d6dd);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M1 1L7 7L13 1' fill='none' stroke='%23B6D6DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right calc(20 * var(--u)) center; background-size: calc(14 * var(--u)) calc(8 * var(--u));
}
.ag-cf7-request-a-demo select.wpcf7-form-control option { color: #262626; background-color: #ffffff; }
.ag-cf7-request-a-demo input.wpcf7-form-control:focus, .ag-cf7-request-a-demo select.wpcf7-form-control:focus { outline: none; background-color: rgba(182, 214, 221, 0.14); box-shadow: inset 0 0 0 1px rgba(182, 214, 221, 0.5); }
.ag-cf7-request-a-demo input.wpcf7-form-control:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s 0s; }

/* invalid: beige inner outline + the tip UNDER the field, in the flow — a long message (e.g. the company e-mail one) pushes the
   next row down instead of being drawn over it (2026-10-16; it was absolutely positioned in the 17 px row gap) */
.ag-cf7-request-a-demo .wpcf7-form-control.wpcf7-not-valid,
.ag-cf7-request-a-demo .wpcf7-form-control.wpcf7-not-valid:focus { box-shadow: inset 0 0 0 1px var(--ag-beige, #edcdb8); }
.ag-cf7-request-a-demo .wpcf7-not-valid-tip {
	display: block; position: static; margin: calc(6 * var(--u)) 0 0; padding: 0 calc(27 * var(--u));
	font-family: inherit; font-weight: 400; font-size: max(12px, calc(14 * var(--u))); line-height: 1.3; color: var(--ag-beige, #edcdb8);
}

/* last row: newsletter checkbox (34 × 34 at +6 px) + label, Submit Now on the right (285 × 60) */
.ag-cf7-request-a-demo .ag-cf-row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(17 * var(--u)); }
.ag-cf7-request-a-demo .ag-cf-check { padding-top: calc(6 * var(--u)); }
.ag-cf7-request-a-demo .ag-cf-check .wpcf7-list-item { display: block; margin: 0; }
.ag-cf7-request-a-demo .ag-cf-check label { display: flex; align-items: flex-start; gap: calc(11.4 * var(--u)); cursor: pointer; }
.ag-cf7-request-a-demo .ag-cf-check input[type="checkbox"] {
	-webkit-appearance: none; appearance: none; flex-shrink: 0; width: calc(34 * var(--u)); height: calc(34 * var(--u)); margin: 0; border: 0;
	border-radius: calc(10 * var(--u)); background: rgba(182, 214, 221, 0.1) center / calc(18 * var(--u)) calc(14 * var(--u)) no-repeat; cursor: pointer; transition: box-shadow 0.2s;
}
.ag-cf7-request-a-demo .ag-cf-check input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14'%3E%3Cpath d='M2 7.5L6.5 12L16 2' fill='none' stroke='%23EDCDB8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ag-cf7-request-a-demo .ag-cf-check input[type="checkbox"]:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(182, 214, 221, 0.5); }
.ag-cf7-request-a-demo .ag-cf-check .wpcf7-list-item-label {
	display: block; max-width: calc(413 * var(--u)); margin-top: calc(5 * var(--u));
	font-weight: 400; font-size: max(13px, calc(18 * var(--u))); line-height: calc(26 * var(--u)); letter-spacing: -0.02em; color: var(--ag-ice, #b6d6dd);
}
.ag-cf7-request-a-demo .wpcf7-list-item-label::before, .ag-cf7-request-a-demo .wpcf7-list-item-label::after { content: none; }

/* Submit Now: red + inner shadow, radius 15; label Bai Jamjuree Bold 22/22 uppercase + 20 px chevron (gap 5); hover beige + black
   (Figma 1439:45494). Same transition as the site's ag-btn buttons. */
.ag-cf7-request-a-demo .ag-cf-actions { position: relative; flex-shrink: 0; }
.ag-cf7-request-a-demo .ag-cf-submit {
	display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); box-sizing: border-box; width: calc(285 * var(--u)); height: calc(60 * var(--u));
	margin: 0; padding: 0; border: 0; border-radius: calc(15 * var(--u));
	background: var(--ag-red, #a2262d); box-shadow: inset 3px 0 20px 6px rgba(0, 0, 0, 0.2); color: var(--ag-white, #fff);
	font-family: var(--ag-heading, 'Bai Jamjuree'), sans-serif; font-weight: 700; font-size: max(13px, calc(22 * var(--u))); line-height: calc(22 * var(--u));
	letter-spacing: -0.005em; text-transform: uppercase; cursor: pointer; transition: background-color 1.28s, color 1.28s;
}
.ag-cf7-request-a-demo .ag-cf-submit::after {
	content: ""; flex-shrink: 0; width: max(14px, calc(20 * var(--u))); height: max(14px, calc(20 * var(--u))); background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ag-cf7-request-a-demo .ag-cf-submit:hover { background: var(--ag-beige, #edcdb8); color: var(--ag-black, #000); }
.ag-cf7-request-a-demo .ag-cf-submit:focus-visible { outline: 2px solid var(--ag-beige, #edcdb8); outline-offset: 3px; }
.ag-cf7-request-a-demo .wpcf7-spinner { position: absolute; top: 50%; right: calc(16 * var(--u)); margin: -12px 0 0; background-color: rgba(255, 255, 255, 0.3); }

/* response line: centred under the last row, above the consent strip */
.wpcf7 form.ag-cf7-request-a-demo .wpcf7-response-output {
	position: absolute; top: 100%; left: 0; right: 0; margin: calc(20 * var(--u)) 0 0; padding: 0; border: 0; text-align: center;
	font-family: inherit; font-weight: 400; font-size: max(13px, calc(16 * var(--u))); line-height: 1.5; color: var(--ag-ice, #b6d6dd);
}
.wpcf7 form.ag-cf7-request-a-demo.invalid .wpcf7-response-output,
.wpcf7 form.ag-cf7-request-a-demo.failed .wpcf7-response-output,
.wpcf7 form.ag-cf7-request-a-demo.aborted .wpcf7-response-output,
.wpcf7 form.ag-cf7-request-a-demo.spam .wpcf7-response-output { color: var(--ag-beige, #edcdb8); }
/* desktop: room under the form for that line (20 + 24) + the 57 px consent strip, so that when error tips make the form taller
   the panel grows instead of the line running into the strip (no change without tips: 40 + 294 + 109 < the 480 px panel) */
@media (min-width: 1025px) { .wpcf7 form.ag-cf7-request-a-demo { margin-bottom: calc(109 * var(--u)); } }

@media (max-width: 1024px) {
	.ag-cf7-request-a-demo .ag-cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ag-cf7-request-a-demo .ag-cf-wide { grid-column: auto; }
	.ag-cf7-request-a-demo .ag-cf-row { flex-wrap: wrap; gap: 20px; }
	.ag-cf7-request-a-demo .ag-cf-check { flex: 1 1 300px; }
	.wpcf7 form.ag-cf7-request-a-demo .wpcf7-response-output { position: static; margin: 16px 0 0; }
}
@media (max-width: 767px) {
	.ag-cf7-request-a-demo .ag-cf-grid { grid-template-columns: minmax(0, 1fr); }
	.ag-cf7-request-a-demo input.wpcf7-form-control, .ag-cf7-request-a-demo select.wpcf7-form-control { height: 54px; font-size: 17px; padding-left: 18px; }
	.ag-cf7-request-a-demo input.wpcf7-form-control { padding-right: 18px; }
	.ag-cf7-request-a-demo .wpcf7-not-valid-tip { padding: 0 18px; }
	.ag-cf7-request-a-demo .ag-cf-check .wpcf7-list-item-label { font-size: 16px; line-height: 23px; margin-top: 5px; }
	.ag-cf7-request-a-demo .ag-cf-actions { flex: 1 1 100%; }
	.ag-cf7-request-a-demo .ag-cf-submit { width: 100%; }
}

/* (2026-10-19) error messages sit directly UNDER their field, one short line, without pushing the form down (a taller form
   showed the white page behind the hero video) */
.ag-cf7-request-a-demo .wpcf7-form-control-wrap { position: relative; display: block; }
.ag-cf7-request-a-demo .wpcf7-not-valid-tip {
	position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 2; margin: 0; padding: 0 calc(4 * var(--u));
	font-size: max(12px, calc(13 * var(--u))); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: #ffb4b4;
}
@media (max-width: 767px) { .ag-cf7-request-a-demo .wpcf7-not-valid-tip { padding: 0 4px; } }

/* (2026-10-19) a little more room: the message sits 7 px under its field with 6 px space below it (only while it is shown) */
.ag-cf7-request-a-demo .wpcf7-not-valid-tip { position: static; margin: 6px 0 4px; padding: 0 calc(6 * var(--u)); }