/*
 * Homepage — "Let's Build Something Great Together" / "Get In Touch".
 *
 * Figma 1752:4214 (1212x657 row) sitting on 1752:4006, a single
 * 1440x1317 gradient rectangle that also backs the footer beneath it:
 *   #132c5b 0%  ->  #010816 57.69%  ->  #131313 100%
 * This section occupies the top 857px of that rectangle and the footer
 * the remaining 460px, so the stops are re-mapped onto each element's
 * own height and the footer picks the gradient back up at #040a16
 * (the exact colour the full-height gradient reaches at the seam).
 */

.tp-git {
	position: relative;
	padding: 100px 20px;
	background: linear-gradient(180deg, #132c5b 0%, #010816 88.68%, #040a16 100%);
	overflow: hidden;
}

/* Blue glow — Figma 1825:10979: a 1662x456 #338cff rect at 40% opacity with
   a 158.8px layer blur, sitting 142px below the top of the 1317px band and
   bleeding 111px past each side of the 1440 frame.
   Figma layer blur is twice the CSS equivalent, hence blur(79.4px).
   Width is kept proportional (1662/1440) so the bleed survives any viewport;
   the height stays fixed so the glow doesn't smear down tall mobile stacks. */
.tp-git::before {
	content: '';
	position: absolute;
	top: 142px;
	left: 50%;
	width: 115.417%;
	height: 456px;
	transform: translateX(-50%);
	background: rgba(51, 140, 255, 0.4);
	filter: blur(79.4px);
	pointer-events: none;
	z-index: 0;
}

.tp-git__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 107px;
	width: 100%;
	max-width: 1212px;
	margin: 0 auto;
}

/* Figma 1752:4214 places this 1212 row at x=164 on the 1440 frame — the same
   left gutter every other section gets from .tp2026-container--narrow (1152
   max-width + 20px padding => a 1112 column starting at 164). The row is
   100px wider than that column, so the design lets it overhang on the RIGHT
   (ending at 1376, a 64px gutter) rather than centring it; centring put the
   heading at 114 and broke the left edge it shares with the rest of the page.
   The min() clamps the offset once the viewport can no longer fit gutter +
   1212, so 1120-1279 keeps the row inside its padding instead of overflowing. */
@media (min-width: 1120px) {
	.tp-git__inner {
		margin-right: 0;
		margin-left: max(0px, min((100% - 1112px) / 2, 100% - 1212px));
	}
}

/* ------------------------------------------------------------------ *
 * Left intro column — Figma 1752:4215 (485 wide, 32px gap)
 * ------------------------------------------------------------------ */

.tp-git__intro {
	flex: 0 0 485px;
	width: 485px;
}

.tp-git__title {
	margin: 0;
	font: 600 40px/50.4px var(--tp-font-heading);
	letter-spacing: 0;
	color: #fff;
}

.tp-git__desc {
	margin: 32px 0 0;
	font: 400 20px/34px var(--tp-font-body);
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ *
 * Form card — Figma 1752:4282 (620x657, r20, 42/30 padding)
 * ------------------------------------------------------------------ */

.tp-git__card {
	flex: 0 0 620px;
	width: 620px;
	min-height: 657px;
	padding: 42px 30px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(1, 8, 22, 0.28);
}

.tp-git__card-title {
	margin: 0 0 42px;
	font: 600 28px/34px var(--tp-font-heading);
	color: #131313;
}

.tp-git__form {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.tp-git__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.tp-git__row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.tp-git__row > .tp-mf {
	flex: 0 0 268px;
	width: 268px;
}

/* Figma 2045:5740 lays the "Where Did You Find Us" row out as a single
   268 field on the left. The FRD adds a conditional "adjacent field"
   that fills the empty right half for Google Search / LLM / Other; it
   is hidden until then, so the row still reads as Figma draws it. */

.tp-mf[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Material 3 outlined field — Figma 2045:5762 and siblings
 * 268x56 box, 1px #e3e3e3, r4, floated 12px label notching the border
 * ------------------------------------------------------------------ */

.tp-mf {
	position: relative;
}

.tp-mf--full {
	width: 100%;
}

.tp-mf__control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 56px;
	margin: 0;
	padding: 0 16px;
	font: 400 16px/24px var(--tp-font-body);
	color: #1d1b20;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	outline: none;
	appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tp-mf__control::placeholder {
	color: rgba(29, 27, 32, 0.49);
	opacity: 1;
}

.tp-mf__control:hover {
	border-color: #1d1b20;
}

.tp-mf__control:focus,
.tp-mf__control:focus-visible {
	border-color: #1977f3;
	box-shadow: inset 0 0 0 1px #1977f3;
}

/* Label sits on the top border, its white background cutting the notch.
   Figma: 12px from the left edge, 4px horizontal padding, 12px/16px. */
.tp-mf__label {
	position: absolute;
	top: -8px;
	left: 12px;
	padding: 0 4px;
	font: 400 12px/16px var(--tp-font-body);
	color: #49454f;
	background: #fff;
	pointer-events: none;
	transition: color 0.18s ease;
}

.tp-mf__control:focus ~ .tp-mf__label,
.tp-mf__control:focus-visible ~ .tp-mf__label {
	color: #1977f3;
}

.tp-mf__req {
	color: #fb2c36;
}

/* The FRD's adjacent-field labels are long sentences ("Please specify
   (ChatGPT, Copilot, Claude, etc)") and would overrun a 268px box at
   12px. Drop a point on that one field rather than truncate the text. */
.tp-mf--compact-label .tp-mf__label {
	font-size: 11px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* "supporting-text" slot (Figma 2045:5770) — collapsed until populated. */
.tp-mf__help {
	margin: 0;
	padding: 4px 16px 0;
	font: 400 12px/16px var(--tp-font-body);
	color: #fb2c36;
	min-height: 0;
}

.tp-mf__help:empty {
	display: none;
}

/* ---- Select ---- */

.tp-mf--select .tp-mf__control {
	padding-right: 52px;
	font-weight: 600;
	color: #1d1b20;
	cursor: pointer;
}

.tp-mf__chevron {
	position: absolute;
	top: 16px;
	right: 16px;
	display: block;
	width: 24px;
	height: 24px;
	color: #1d1b20;
	pointer-events: none;
	transition: transform 0.2s ease;
}

.tp-mf--select:hover .tp-mf__chevron {
	transform: translateY(2px);
}

/* ---- Textarea (Figma 1752:4319 — 560x74) ---- */

.tp-mf--textarea .tp-mf__control {
	height: 74px;
	min-height: 74px;
	padding: 15px 16px;
	resize: vertical;
}

/* ------------------------------------------------------------------ *
 * Consent + captcha — Figma 1752:4329 (20px gap)
 * ------------------------------------------------------------------ */

.tp-git__consent {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tp-git__check {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.tp-git__check-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tp-git__check-box {
	flex: 0 0 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	color: transparent;
	background: #f3f3f5;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tp-git__check:hover .tp-git__check-box {
	border-color: rgba(0, 0, 0, 0.28);
}

.tp-git__check-input:checked ~ .tp-git__check-box {
	color: #fff;
	background: #1977f3;
	border-color: #1977f3;
}

.tp-git__check-input:focus-visible ~ .tp-git__check-box {
	box-shadow: 0 0 0 3px rgba(25, 119, 243, 0.28);
}

.tp-git__check-label {
	font: 400 14px/22.75px var(--tp-font-body);
	color: #0a0a0a;
}

.tp-git__check-label a {
	color: #030213;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tp-git__check-label a:hover {
	color: #1977f3;
}

/* Turnstile — Figma 1752:4335 is 341x65. */
.tp-git__captcha {
	width: 341px;
	max-width: 100%;
	min-height: 65px;
}

.tp-git__captcha iframe {
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * Submit — Figma 1752:4336 (162x44, r59, #1977f3, 4/16 padding)
 *
 * Hover runs the signature icon-pill interaction (base.css `.tp-btn--white`,
 * Figma variant set 1588:4150 "Submit Now"): the 36px disc slides from the
 * 4px left inset to the 4px right inset while the label slides the other way
 * to fill the space. Same geometry as every other CTA pill on the page —
 * the disc is absolute so `left` can animate, and the label is carried by
 * animating the button's own padding, which keeps the pill width stable.
 * ------------------------------------------------------------------ */

.tp-git__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	height: 44px;
	padding: 0 16px 0 50px; /* 4 icon inset + 36 icon + 10 gap = 50 */
	font: 700 16px/24px var(--tp-font-body);
	color: #fff;
	background: #1977f3;
	border: 0;
	border-radius: 59px;
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.22s ease, padding var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp-git__submit-icon {
	position: absolute;
	left: 4px;
	top: 4px;
	display: block;
	width: 36px;
	height: 36px;
	/* The Figma icon is a boolean "exclude": a white disc with the arrow
	   punched out, so the arrow reads in the button colour behind it. */
	color: #fff;
	transition: left var(--tp-speed-spring) var(--tp-ease-spring);
}

.tp-git__submit-icon svg {
	display: block;
}

.tp-git__submit:hover,
.tp-git__submit:focus-visible {
	padding: 0 50px 0 16px;
}

.tp-git__submit:hover .tp-git__submit-icon,
.tp-git__submit:focus-visible .tp-git__submit-icon {
	left: calc(100% - 40px); /* 36 icon + 4 inset */
}

.tp-git__submit:active {
	background: #0f63d4;
}

.tp-git__submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.tp-git__submit[disabled] {
	opacity: 0.65;
	cursor: progress;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.tp-git__submit,
	.tp-git__submit-icon {
		transition: none;
	}
}

/* Inline form-level status message. */
.tp-git__status {
	margin: 0;
	font: 500 14px/22px var(--tp-font-body);
	color: #fb2c36;
}

.tp-git__status--ok {
	color: #0f7b3d;
}

/* ------------------------------------------------------------------ *
 * Entrance animation
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.tp-git__intro,
	.tp-git__card {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.tp-git__card {
		transition-delay: 0.12s;
	}

	.tp-git.is-visible .tp-git__intro,
	.tp-git.is-visible .tp-git__card {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 1279px) and (min-width: 1120px) {
	.tp-git__inner {
		gap: 56px;
	}

	.tp-git__intro {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
	}

	.tp-git__card {
		flex: 0 1 620px;
	}
}

@media (max-width: 1119px) {
	.tp-git {
		padding: 72px 20px;
	}

	.tp-git__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		max-width: 620px;
	}

	/* The inner row is a column here, so the base `flex: 0 0 485px` would
	   resolve against the block axis and pad 485px of empty height under
	   the intro copy. Basis has to go back to auto once stacked. */
	.tp-git__intro {
		flex: 0 0 auto;
		width: auto;
	}

	.tp-git__title {
		font-size: 34px;
		line-height: 44px;
	}

	.tp-git__desc {
		font-size: 18px;
		line-height: 30px;
	}

	.tp-git__card {
		flex: 1 1 auto;
		width: 100%;
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------------
   Mobile — Figma 2308:2785 / 2791 / 2325:2907 on the 360 frame:

     band     0,8263  360x1960  #132c5b -> #010816 57.692% -> #131313
     title   20,8313  320x68    28/34 SemiBold white, centred
     desc    20,8397  320x72    14/24 white at 80%, centred
     card    20,8499  320x767   radius 20, 30/20 padding
       title 97,8529  167x34    28/34 SemiBold #021b42, centred
       fields 40,8587 280x649   six fields 18 apart, then 8 / 20 / 32

   The band does not stop with this section — it runs to the bottom of the
   page, so the footer continues the same 1960px ramp from -(this section's
   height). Keep the two in step.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.tp-git {
		/* Card bottom y9266 = the footer's own top edge, so no bottom padding. */
		padding: 50px 20px 0;
		/* The band is supplied as artwork rather than as a CSS ramp: Figma group
		   2619:2077 is the gradient *plus* the ThinkPalm watermark that sits in
		   its bottom 217px, and the two are one picture. Exported at 2x and
		   cropped to the 360 frame (the group itself runs to 406 and overhangs
		   the frame on the right, exactly as the mark is clipped in the design).
		   The gradient below is the fallback if the image cannot be fetched. */
		background-image: url('../images/footer-band-mobile.webp'), linear-gradient(180deg, #132c5b 0%, #010816 57.692%, #131313 100%);
		background-repeat: no-repeat, no-repeat;
		background-size: 100% 1960px, 100% 1960px;
		background-position: left top, left top;
	}

	/* No separate glow rect on the mobile frame — the band is the gradient
	   alone (1825:10979 is a desktop-only layer). */
	.tp-git::before {
		display: none;
	}

	/* The 1119 block caps this at 620 so the stacked form stays a readable
	   column on tablets; on the phone frame the card is the full 320 gutter
	   to gutter, so the cap comes off. */
	.tp-git__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 30px;
		max-width: none;
	}

	.tp-git__intro {
		flex: 0 0 auto;
		width: 100%;
		text-align: center;
	}

	.tp-git__title {
		font-size: 28px;
		line-height: 34px;
	}

	.tp-git__desc {
		margin-top: 16px;
		font-size: 14px;
		line-height: 24px;
	}

	.tp-git__card {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		padding: 30px 20px;
		border-radius: 20px;
	}

	.tp-git__card-title {
		margin-bottom: 24px;
		font-size: 28px;
		line-height: 34px;
		text-align: center;
		color: var(--tp-heading);
	}

	.tp-git__fields {
		gap: 18px;
	}

	/* 2329:3220 puts 8px between the last field and the consent row where the
	   fields themselves are 18 apart, so the shared gap is pulled back here. */
	.tp-git__consent {
		margin-top: -10px;
	}

	/* 2329:3214 — a flat 36px row: 12/18 label over two lines beside the
	   16px box. */
	.tp-git__check-label {
		font: 400 12px/18px var(--tp-font-body);
	}

	.tp-git__row {
		flex-direction: column;
		gap: 18px;
	}

	.tp-git__row > .tp-mf {
		flex: 1 1 auto;
		width: 100%;
	}

	/* 2332:3231 — a plain 280x44 pill with the label centred; the disc that
	   slides across it on desktop is not on the mobile button. */
	.tp-git__submit {
		align-self: stretch;
		justify-content: center;
		width: 100%;
		padding: 0 16px;
	}

	.tp-git__submit:hover,
	.tp-git__submit:focus-visible {
		padding: 0 16px;
	}

	.tp-git__submit-icon {
		display: none;
	}
}

@media (max-width: 340px) {
	.tp-git__check-label {
		font-size: 13px;
		line-height: 20px;
	}
}