.zg-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;}

/*
	Zozo Graph Mailform
	Fully scoped under .zozo-graph so it won't affect other site styling.
*/
.zozo-graph{
	--zg-bg:#ffffff;
	--zg-surface:#ffffff;
	--zg-border:#e5e7eb;
	--zg-text:#111827;
	--zg-muted:#6b7280;
	--zg-primary:#0ea5a4;
	--zg-primary-dark:#0b7f7f;
	--zg-danger:#dc2626;
	--zg-success:#16a34a;
	--zg-ring:rgba(14,165,164,.25);
	--zg-font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
	--zg-font-size:16px;
	--zg-line-height:1.5;

	color:var(--zg-text);
	font-family:var(--zg-font);
	font-size:var(--zg-font-size);
	line-height:var(--zg-line-height);
	text-align:left;
	-webkit-text-size-adjust:100%;
}

.zozo-graph,
.zozo-graph *{
	box-sizing:border-box;
}

.zozo-graph .zg-form{
	width:100%;
	max-width:680px;
	margin:12px auto;
	padding:20px;
	background:var(--zg-surface);
	border:1px solid var(--zg-border);
	border-radius:14px;
	box-shadow:0 10px 25px rgba(17,24,39,.06);
}

.zozo-graph .zg-row{
	display:grid;
	grid-template-columns:1fr;
	gap:14px;
}

.zozo-graph .zg-field{
	margin:0 0 14px 0;
}

.zozo-graph .zg-label{
	display:block;
	font-size:14px;
	font-weight:600;
	color:var(--zg-text);
	margin:0 0 6px 0;
}

.zozo-graph .zg-input,
.zozo-graph .zg-textarea,
.zozo-graph .zg-select{
	width:100%;
	padding:12px 14px;
	border:1px solid var(--zg-border);
	border-radius:12px;
	background:var(--zg-bg);
	color:var(--zg-text);
	font:inherit;
	outline:none;
	transition:border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.zozo-graph .zg-textarea{
	min-height:140px;
	resize:vertical;
}

.zozo-graph .zg-input::placeholder,
.zozo-graph .zg-textarea::placeholder{
	color:var(--zg-muted);
}

.zozo-graph .zg-input:focus,
.zozo-graph .zg-textarea:focus,
.zozo-graph .zg-select:focus{
	border-color:var(--zg-primary);
	box-shadow:0 0 0 4px var(--zg-ring);
}

.zozo-graph .zg-select{
	appearance:none;
	background-image:linear-gradient(45deg,transparent 50%, var(--zg-muted) 50%), linear-gradient(135deg, var(--zg-muted) 50%, transparent 50%);
	background-position:calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px);
	background-size:5px 5px, 5px 5px;
	background-repeat:no-repeat;
	padding-right:42px;
}

.zozo-graph .zg-actions{
	margin-top:4px;
	display:flex;
	justify-content:flex-end;
}

.zozo-graph .zg-btn{
	appearance:none;
	border:0;
	border-radius:12px;
	padding:12px 16px;
	font:inherit;
	font-weight:700;
	cursor:pointer;
	background:linear-gradient(135deg,var(--zg-primary),var(--zg-primary-dark));
	color:#fff;
	box-shadow:0 10px 18px rgba(14,165,164,.25);
	transition:transform .06s ease, filter .15s ease;
}

.zozo-graph .zg-btn:hover{
	filter:brightness(1.02);
}

.zozo-graph .zg-btn:active{
	transform:translateY(1px);
}

.zozo-graph .zg-alert{
	max-width:680px;
	margin:0 auto 12px auto;
	padding:12px 14px;
	border-radius:12px;
	border:1px solid var(--zg-border);
	background:#f9fafb;
	font-size:14px;
}

.zozo-graph .zg-alert--success{
	border-color:rgba(22,163,74,.25);
	background:rgba(22,163,74,.08);
	color:var(--zg-success);
}

.zozo-graph .zg-alert--error{
	border-color:rgba(220,38,38,.25);
	background:rgba(220,38,38,.08);
	color:var(--zg-danger);
}

@media (max-width:520px){
	.zozo-graph .zg-form{
		padding:16px;
		border-radius:12px;
	}
}
