.hpg-gate {
	position: relative;
	max-width: 900px;
	margin: 0 auto 2rem;
}

/* Full-page mode: minimal top bar shown instead of the theme's header/nav.
   Fixed to the top of the viewport — body.hpg-fullpage carries the matching
   padding-top so page content doesn't start out hidden underneath it.
   height + box-sizing:border-box means the bar is exactly 70px tall total,
   with the 5px top/bottom padding included in that, not added on top of it. */
.hpg-minimal-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 500;
	box-sizing: border-box;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 5px 1.5rem;
	background: #fff;
	border-bottom: 1px solid #e5e7eb;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

body.hpg-fullpage {
	padding-top: 72px;
}

/* WordPress's own admin toolbar is also fixed at the top for logged-in users
   — sit below it instead of overlapping, matching WP core's own breakpoint
   for the toolbar's shorter mobile height. */
body.admin-bar .hpg-minimal-topbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .hpg-minimal-topbar {
		top: 46px;
	}
}

.hpg-minimal-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	height: 100%;
}

.hpg-minimal-logo img {
	display: block;
	height: 100%;
	max-height: 60px;
	width: auto;
}

.hpg-topbar-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-shrink: 0;
}

@media screen and (max-width: 600px) {
	.hpg-minimal-topbar {
		padding: 5px 1rem;
		gap: 0.5rem;
	}

	.hpg-topbar-actions {
		gap: 0.5rem;
	}

	.hpg-contact-btn {
		padding: 6px 10px;
	}
}

.hpg-contact-btn {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 1.75rem;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 5px;
	background: #3353fe;
	color: #fff;
	border: 1px solid #3353fe;
	padding: 8px 18px;
}

.hpg-contact-btn:hover {
	background: #fff;
	color: #3353fe;
}

.hpg-linkedin-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.hpg-linkedin-link:hover {
	color: #6b7280;
}

.hpg-tile-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.hpg-tile-cat {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #6b7280;
	background: #f3f4f6;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.hpg-viewer-wrap {
	position: relative;
	background: #f4f4f5;
	border-radius: 8px;
	overflow: hidden;
	min-height: 280px;
}

.hpg-cover {
	display: block;
	width: 100%;
	height: auto;
}

.hpg-loading {
	padding: 3rem 1rem;
	text-align: center;
	color: #6b7280;
	font-style: italic;
}

.hpg-pdf-pages {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 12px;
	transition: filter 0.2s ease;
}

.hpg-pdf-pages.hpg-blurred {
	filter: blur(6px);
	pointer-events: none;
	user-select: none;
}

.hpg-page canvas {
	max-width: 100%;
	height: auto;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	background: #fff;
}

.hpg-locked-teaser {
	width: 100%;
	max-width: 700px;
	padding: 2rem 1.5rem;
	text-align: center;
	background: linear-gradient(to bottom, rgba(244, 244, 245, 0), #f4f4f5 60%);
	border-top: 1px dashed #d1d5db;
}

.hpg-locked-teaser p {
	margin: 0 0 1rem;
	color: #4b5563;
}

.hpg-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.75rem;
}

.hpg-zoom-controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.hpg-zoom-controls[hidden] {
	display: none;
}

.hpg-zoom-controls button {
	appearance: none;
	cursor: pointer;
	border: 1px solid #d1d5db;
	background: #fff;
	border-radius: 6px;
	width: 2rem;
	height: 2rem;
	font-size: 1.1rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hpg-zoom-controls button:hover {
	background: #f4f4f5;
}

.hpg-zoom-reset {
	width: auto !important;
	padding: 0 0.75rem;
	font-size: 0.85rem !important;
}

.hpg-zoom-level {
	font-size: 0.85rem;
	color: #6b7280;
	min-width: 3.5em;
	text-align: center;
}

.hpg-download[hidden],
.hpg-click-trigger[hidden],
.hpg-modal[hidden] {
	display: none !important;
}

/* Modal */
.hpg-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hpg-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.6);
}

.hpg-modal-panel {
	position: relative;
	background: #fff;
	border-radius: 5px;
	max-width: 550px;
	width: calc(100% - 2rem);
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	padding: 36px 44px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.23);
}

/* font-size is a fixed px value, not rem: this theme sets the document root
   font-size to an unusually small computed value (its own fluid-typography
   scaling), so 1.35rem here was rendering at roughly 12px instead of the
   intended ~22px. font-family/font-weight are !important because the site's
   saved Custom CSS field can carry an older version of this rule (it isn't
   updated automatically when the plugin is) — making the properties that
   define "is this a real heading" authoritative here means this always
   renders correctly regardless of what's saved in that field, now or later.
   Color is left to Custom CSS since getting that wrong is only cosmetic. */
.hpg-modal-panel h2 {
	margin-top: 0;
	margin-bottom: 16px;
	font-size: 22px;
	font-family: 'rand', sans-serif !important;
	font-weight: 700 !important;
}

.hpg-modal-subheading {
	color: #6b7280;
	margin-top: -0.5rem;
}

.hpg-contact-success {
	margin: 0;
	padding: 1rem 0;
	font-size: 15px;
	color: #101820;
}

.hpg-modal-close {
	position: absolute;
	top: 9px;
	right: 9px;
	background: #fff;
	border: none;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
}

.hpg-modal-close:hover {
	color: #111827;
}

.hpg-hsform-target .hs-form label {
	font-weight: 600;
}

.hpg-hsform-target .hs-button.primary {
	cursor: pointer;
}

.hpg-zoho-iframe {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
	border: 0;
}

/*
 * Zoho form defaults — matched directly to the live computed styles of the
 * Zoho popups already on franklincovey.com.sg (measured from the actual
 * rendered .form-control / .zcwf_* / .btn.btn-blue elements), not guessed,
 * so a form rendered inside this plugin's modal looks the same as the ones
 * elsewhere on the site regardless of what CSS came through in the pasted
 * embed code.
 */
/*
 * Zoho ships a DIFFERENT embedded <style> block with every form template it
 * generates — confirmed directly: some of your forms use a `.form-control`
 * class in a wide stacked layout, others (like this one) use no class at all
 * and rely on Zoho's own "label-left" 30/70 float layout with !important
 * rules baked in. Whichever template gets pasted in, the rules below need to
 * consistently win over it — hence broader selectors (not assuming
 * .form-control is present) and !important on the properties Zoho's own
 * embedded styles are also fighting for.
 */
.hpg-zoho-form,
.hpg-hsform-target [id^="crmWebToEntityForm"] {
	max-width: 100% !important;
	width: 100% !important;
	background: transparent !important;
	padding: 0 !important;
}

.hpg-zoho-form .zcwf_row {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 0 0.85rem !important;
	overflow: visible !important;
}

/* Zoho marks fields it wants hidden (e.g. an internal "Lead Source" field)
   with this class, relying on its own embedded stylesheet's plain
   `display:none` — the !important, forced-visible rule above for .zcwf_row
   in general was winning over that unqualified rule and showing fields Zoho
   never intended visitors to see. Higher specificity here (three classes,
   not two) beats it regardless of source order. */
.hpg-zoho-form .zcwf_row.wfrm_fld_dpNn {
	display: none !important;
}

.hpg-zoho-form .zcwf_col_lab {
	display: block !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 0 4px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}

.hpg-zoho-form .zcwf_privacy_txt {
	font-size: 13px;
	line-height: 22px;
	margin-left: 9px;
}

.hpg-zoho-form .zcwf_col_lab a,
.hpg-zoho-form .zcwf_privacy_txt a {
	text-decoration: underline;
}

.hpg-zoho-form .zcwf_col_fld {
	display: block !important;
	float: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Checkbox/radio rows: Zoho's markup puts the label text in .zcwf_col_lab
   before the checkbox's .zcwf_col_fld, which the block-stacking rules above
   render as text then checkbox on the line below it. For a consent
   checkbox, checkbox-beside-its-text reads better — laying the row out as
   flex and pulling .zcwf_col_fld first with `order` puts the checkbox on
   the left, text beside it, regardless of DOM order. */
.hpg-zoho-form .zcwf_row:has(input[type="checkbox"]),
.hpg-zoho-form .zcwf_row:has(input[type="radio"]) {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px !important;
}

.hpg-zoho-form .zcwf_row:has(input[type="checkbox"]) .zcwf_col_fld,
.hpg-zoho-form .zcwf_row:has(input[type="radio"]) .zcwf_col_fld {
	width: auto !important;
	order: -1 !important;
	margin-top: 2px !important;
}

.hpg-zoho-form .zcwf_row:has(input[type="checkbox"]) .zcwf_col_lab,
.hpg-zoho-form .zcwf_row:has(input[type="radio"]) .zcwf_col_lab {
	width: auto !important;
	flex: 1 !important;
	margin: 0 !important;
}

.hpg-zoho-form input[type="text"],
.hpg-zoho-form input[type="email"],
.hpg-zoho-form input[type="tel"],
.hpg-zoho-form input.form-control,
.hpg-zoho-form select,
.hpg-zoho-form select.zcwf_col_fld_slt,
.hpg-zoho-form textarea {
	display: block !important;
	float: none !important;
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 9px 13px !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	background: #d8d4d7 !important;
	color: #101820 !important;
	margin-bottom: 8px !important;
}

/* Zoho's hidden security-token fields (xnQsjsdp, xmIwtLD, actionType,
   returnURL) are plain <input type="text"> elements hidden only via an
   inline style="display:none" — not type="hidden", so the blanket
   forced-visible rule above was overriding their inline style and showing
   raw token values above the Name field. An external stylesheet's
   !important beats an element's own inline style when that inline style
   has no !important of its own, so re-hiding them needs to happen here,
   after the rule that made them visible in the first place. */
.hpg-zoho-form input[type="text"][style*="display:none"],
.hpg-zoho-form input[type="text"][style*="display: none"] {
	display: none !important;
}

.hpg-zoho-form .zcwf_col_help {
	display: block !important;
	float: none !important;
	max-width: none !important;
	width: 100% !important;
	font-size: 0.78rem;
	color: #b91c1c;
}

/* The theme's own checkbox skin (appearance:none, with a checkmark drawn via
   a ::after pseudo-element once :checked) sizes checkboxes with `2.5rem`
   width/height — but this theme's root font-size computes unusually small,
   and setting width to plain `auto` here (instead of overriding it outright)
   left the checkbox with no usable intrinsic size once appearance:none
   removed native rendering, collapsing it to a ~2px sliver next to the
   label text ("a vertical line"). Fixed pixel values sidestep both the
   rem-scaling quirk and the appearance:none collapse. */
.hpg-zoho-form input[type="checkbox"],
.hpg-zoho-form input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	float: none !important;
}

.hpg-zoho-form input[type="submit"],
.hpg-zoho-form .zcwf_button {
	appearance: none !important;
	cursor: pointer;
	max-width: none !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: initial !important;
	padding: 11px 18px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	background: #3253ff !important;
	color: #fff !important;
	border: 1px solid #3253ff !important;
	border-radius: 999px !important;
}

.hpg-zoho-form input[type="submit"]:hover,
.hpg-zoho-form .zcwf_button:hover {
	background: #fff !important;
	color: #3253ff !important;
}

/* Native form (rendered when a HubSpot Private App token is configured) */
.hpg-native-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.hpg-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.hpg-field label {
	font-weight: 600;
	font-size: 0.9rem;
}

.hpg-field input[type="text"],
.hpg-field input[type="email"],
.hpg-field input[type="tel"],
.hpg-field input[type="number"],
.hpg-field input[type="date"],
.hpg-field select,
.hpg-field textarea {
	padding: 0.6rem 0.75rem;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 1rem;
	font-family: inherit;
	width: 100%;
}

.hpg-field textarea {
	min-height: 6rem;
	resize: vertical;
}

.hpg-radio-option,
.hpg-checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.9rem;
}

.hpg-submit-btn {
	appearance: none;
	border: none;
	cursor: pointer;
	padding: 0.75rem 1.5rem;
	font-size: 1rem;
	background: #111827;
	color: #fff;
	border-radius: 6px;
}

.hpg-submit-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.hpg-form-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: 0.6rem 0.75rem;
	font-size: 0.9rem;
	margin: 0;
}

.hpg-form-error[hidden] {
	display: none;
}

.hpg-consent-text {
	font-size: 0.78rem;
	line-height: 1.5;
	color: #6b7280;
	margin: 0;
}

.hpg-consent-text a {
	text-decoration: underline;
}