/* ==========================================================================
   GKQuizz License Manager - signup/checkout page
   Design identity: an official school ledger / subscription form, with a
   specimen "license certificate" as the signature element. Ruled paper,
   a double-hairline rule between sections, and a wax-stamp-style seal
   drawn in SVG (no image assets needed).
   ========================================================================== */

.glm-page {
	--glm-ink: #16213e;
	--glm-ink-soft: #4b5468;
	--glm-paper: #f3f4ec;
	--glm-card: #ffffff;
	--glm-rule: #dadec8;
	--glm-rule-strong: #c7cbb2;
	--glm-stamp: #1f3c88;
	--glm-stamp-soft: #e8ecf9;
	--glm-margin: #b23a2e;
	--glm-margin-soft: #f6e6e3;

	--glm-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--glm-font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	--glm-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

	background-color: var(--glm-paper);
	background-image: repeating-linear-gradient(to bottom, transparent 0 27px, var(--glm-rule) 27px 28px);
	padding: 40px 16px;
	font-family: var(--glm-font-body);
	color: var(--glm-ink);
}

.glm-page, .glm-page * { box-sizing: border-box; }

.glm-wrap.glm-signup-wrap {
	position: relative;
	max-width: 840px;
	margin: 0 auto;
	background: var(--glm-card);
	border: 1px solid var(--glm-rule-strong);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(22, 33, 62, 0.04), 0 18px 40px -24px rgba(22, 33, 62, 0.35);
	padding: 44px 40px 36px 96px;
	overflow: hidden;
}

.glm-wrap.glm-signup-wrap::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 64px;
	width: 1.5px;
	background: var(--glm-margin);
	opacity: 0.4;
}

@media (max-width: 700px) {
	.glm-wrap.glm-signup-wrap { padding: 32px 20px 28px; }
	.glm-wrap.glm-signup-wrap::before { display: none; }
}

/* ---------------- Letterhead / hero ---------------- */
.glm-letterhead { display: flex; gap: 24px; align-items: flex-start; }
.glm-seal { flex: 0 0 auto; width: 76px; height: 76px; color: var(--glm-stamp); margin-top: 2px; }
.glm-seal-svg { width: 100%; height: 100%; }

.glm-eyebrow {
	font-family: var(--glm-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--glm-margin);
	margin: 0 0 10px;
}

.glm-hero-title {
	font-family: var(--glm-font-display);
	font-weight: 700;
	font-size: clamp(26px, 4vw, 34px);
	line-height: 1.18;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
	color: var(--glm-ink);
}

.glm-hero-sub {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--glm-ink-soft);
	max-width: 54ch;
	margin: 0 0 20px;
}

.glm-hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 560px) {
	.glm-letterhead { flex-direction: column; }
	.glm-seal { width: 60px; height: 60px; }
}

/* ---------------- Rules / section rhythm ---------------- */
.glm-rule-double {
	height: 5px;
	margin: 32px 0;
	border-top: 1px solid var(--glm-rule-strong);
	border-bottom: 1px solid var(--glm-rule-strong);
}

.glm-section { margin: 0; }

.glm-section-title {
	font-family: var(--glm-font-display);
	font-weight: 600;
	font-size: 21px;
	margin: 0 0 16px;
	color: var(--glm-ink);
}

.glm-muted { color: var(--glm-ink-soft); font-size: 0.94em; }

/* ---------------- Checklist ---------------- */
.glm-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 24px;
}
.glm-checklist li {
	position: relative;
	padding-left: 30px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--glm-ink);
}
.glm-checklist li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	top: -1px;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--glm-stamp);
	background: var(--glm-stamp-soft);
	border: 1px solid var(--glm-stamp);
	border-radius: 3px;
}
@media (max-width: 560px) {
	.glm-checklist { grid-template-columns: 1fr; }
}

/* ---------------- Pricing ---------------- */
.glm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.glm-plan-card {
	position: relative;
	border: 1px solid var(--glm-rule-strong);
	border-radius: 6px;
	padding: 22px 20px;
	background: var(--glm-paper);
}
.glm-plan-card--best {
	background: var(--glm-stamp-soft);
	border-color: var(--glm-stamp);
}
.glm-plan-badge {
	position: absolute;
	top: -11px;
	right: 16px;
	background: var(--glm-stamp);
	color: #fff;
	font-family: var(--glm-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 999px;
}
.glm-plan-name {
	font-family: var(--glm-font-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--glm-ink-soft);
	margin: 0 0 8px;
}
.glm-plan-price {
	font-family: var(--glm-font-display);
	font-weight: 700;
	font-size: 32px;
	color: var(--glm-ink);
	margin: 0 0 8px;
}
.glm-plan-price span { font-family: var(--glm-font-body); font-weight: 400; font-size: 14px; color: var(--glm-ink-soft); }
.glm-plan-note { margin: 0; font-size: 13px; color: var(--glm-ink-soft); }
.glm-plan-footnote { font-size: 13.5px; color: var(--glm-ink-soft); margin: 0; }
.glm-plan-footnote a { color: var(--glm-stamp); font-weight: 600; }

@media (max-width: 560px) {
	.glm-plans { grid-template-columns: 1fr; }
}

/* ---------------- Specimen certificate (signature element) ---------------- */
.glm-certificate {
	position: relative;
	border: 3px double var(--glm-stamp);
	border-radius: 4px;
	padding: 28px 28px 24px;
	background: linear-gradient(180deg, #fdfdfb 0%, var(--glm-card) 100%);
}
.glm-stamp {
	position: absolute;
	top: 16px;
	right: 20px;
	width: 84px;
	height: 84px;
	color: var(--glm-margin);
	opacity: 0.9;
	transform: rotate(-11deg);
}
.glm-stamp-svg { width: 100%; height: 100%; }
.glm-cert-eyebrow {
	font-family: var(--glm-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--glm-stamp);
	margin: 0 0 18px;
	max-width: 70%;
}
.glm-cert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 24px;
	margin-bottom: 18px;
}
.glm-cert-grid div { border-bottom: 1px solid var(--glm-rule-strong); padding-bottom: 8px; }
.glm-cert-grid span {
	display: block;
	font-family: var(--glm-font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--glm-ink-soft);
	margin-bottom: 4px;
}
.glm-cert-grid strong { font-size: 15px; font-weight: 600; color: var(--glm-ink); }
.glm-mono { font-family: var(--glm-font-mono) !important; letter-spacing: 0.02em; }
.glm-cert-note { margin: 0; font-size: 13px; color: var(--glm-ink-soft); max-width: 62ch; }

@media (max-width: 560px) {
	.glm-cert-grid { grid-template-columns: 1fr; }
	.glm-stamp { width: 64px; height: 64px; top: 14px; right: 14px; }
	.glm-cert-eyebrow { max-width: 100%; padding-right: 70px; }
}

/* ---------------- Notices ---------------- */
.glm-notice { padding: 12px 16px; border-radius: 6px; margin: 0 0 20px; background: var(--glm-stamp-soft); border: 1px solid var(--glm-stamp); font-size: 14px; }
.glm-notice-success { background: #eafaf0; border-color: #b7e4c7; color: #1b5e20; }
.glm-notice-error { background: var(--glm-margin-soft); border-color: var(--glm-margin); color: #7a2318; }
.glm-notice-text { margin: 0 0 10px; }
.glm-notice .glm-download-cta { display: inline-block; margin: 2px 0 0; }

/* ---------------- Payment cards ---------------- */
.glm-pay-tabs { display: flex; gap: 6px; margin: 18px 0 20px; border-bottom: 1px solid var(--glm-rule-strong); }
.glm-pay-tab {
	appearance: none;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 4px;
	margin-right: 18px;
	font-family: var(--glm-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--glm-ink-soft);
	cursor: pointer;
}
.glm-pay-tab.is-active { color: var(--glm-stamp); border-bottom-color: var(--glm-stamp); }
.glm-pay-tab:hover { color: var(--glm-ink); }

.glm-qr-card { border: 1px solid var(--glm-rule-strong); border-radius: 6px; padding: 20px; text-align: center; background: var(--glm-paper); max-width: 340px; }
.glm-upi-apps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.glm-upi-app-chip {
	font-family: var(--glm-font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 5px 10px;
	border: 1px solid var(--glm-rule-strong);
	border-radius: 999px;
	color: var(--glm-ink-soft);
	background: #fff;
}

.glm-pay-options { display: flex; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.glm-pay-card { flex: 1; min-width: 230px; border: 1px solid var(--glm-rule-strong); border-radius: 6px; padding: 18px; text-align: center; background: var(--glm-paper); }
.glm-pay-card h4 { margin: 0 0 4px; font-family: var(--glm-font-display); font-size: 16px; font-weight: 600; }
.glm-qr-box { display: flex; justify-content: center; margin: 0 0 14px; min-height: 180px; }
.glm-qr-box img, .glm-qr-box canvas { border: 6px solid #fff; box-shadow: 0 0 0 1px var(--glm-rule-strong); border-radius: 4px; }
.glm-bank-table { width: 100%; text-align: left; font-size: 13.5px; margin-top: 10px; }
.glm-bank-table td { padding: 4px 0; }
.glm-bank-table td:first-child { color: var(--glm-ink-soft); padding-right: 8px; white-space: nowrap; }

.glm-card-icon { vertical-align: -2px; margin-right: 6px; }

.glm-steps { padding-left: 22px; line-height: 1.8; font-size: 14px; color: var(--glm-ink); margin: 20px 0; }
.glm-steps li::marker { font-family: var(--glm-font-mono); color: var(--glm-margin); font-weight: 600; }

/* ---------------- Forms ---------------- */
.glm-form { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.glm-field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--glm-ink); }
.glm-field-label { font-size: 13.5px; font-weight: 600; }
.glm-form input[type="text"],
.glm-form input[type="email"] {
	padding: 11px 13px;
	border: 1px solid var(--glm-rule-strong);
	border-radius: 5px;
	font-weight: 400;
	font-size: 14.5px;
	font-family: var(--glm-font-body);
	background: #fff;
	color: var(--glm-ink);
}

.glm-plan-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.glm-plan-pill { position: relative; cursor: pointer; }
.glm-plan-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.glm-plan-pill span {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--glm-rule-strong);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--glm-ink-soft);
	background: var(--glm-paper);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.glm-plan-pill input:checked + span {
	background: var(--glm-stamp);
	border-color: var(--glm-stamp);
	color: #fff;
}
.glm-plan-pill input:focus-visible + span {
	outline: 2px solid var(--glm-stamp);
	outline-offset: 2px;
}

/* ---------------- Buttons ---------------- */
.glm-btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 5px;
	border: 1px solid transparent;
	font-size: 14.5px;
	font-weight: 600;
	font-family: var(--glm-font-body);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.glm-btn-primary { background: var(--glm-stamp); color: #fff; }
.glm-btn-primary:hover { background: #17306e; }
.glm-btn-ghost { background: transparent; color: var(--glm-ink); border-color: var(--glm-rule-strong); }
.glm-btn-ghost:hover { border-color: var(--glm-stamp); color: var(--glm-stamp); }
.glm-btn-secondary { background: #fff; color: var(--glm-ink); border: 1px solid var(--glm-rule-strong); margin: 6px 0; }
.glm-btn-secondary:hover { border-color: var(--glm-stamp); color: var(--glm-stamp); }
.glm-btn-block { width: 100%; }
.glm-btn:active { transform: translateY(1px); }
.glm-btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.glm-btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid var(--glm-stamp);
	outline-offset: 2px;
}

/* ---------------- Footer ---------------- */
.glm-footer { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--glm-rule); }
.glm-footer p { font-size: 12.5px; color: var(--glm-ink-soft); margin: 0; }
.glm-footer a { color: var(--glm-stamp); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.glm-btn, .glm-plan-pill span { transition: none !important; }
}