/* The Compound Gym — website pages (/login, /join, /update-password, /message …) in the brand:
   volt (#DAFF31) and white on near-black. Loaded on every Frappe web page via web_include_css.
   The landing page itself is served by the Cloudflare Worker and has its own stylesheet. */

:root {
	--tcg-bg: #0b0b0c;
	--tcg-bg-2: #111113;
	--tcg-panel: #141416;
	--tcg-field: #0f0f11;
	--tcg-line: rgba(255, 255, 255, 0.09);
	--tcg-line-2: rgba(255, 255, 255, 0.16);
	--tcg-fg: #f5f5f4;
	--tcg-muted: #a1a1aa;
	--tcg-volt: #daff31;
	--tcg-volt-ink: #0b0b0c;
	--tcg-display: "Unbounded", "Inter", system-ui, sans-serif;
	--tcg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

body {
	background: var(--tcg-bg) !important;
	color: var(--tcg-fg);
	min-height: 100vh;
}
body .page-content-wrapper { padding-top: 0; }
.page-breadcrumbs, .page-header-wrapper { display: none; }

/* navbar + footer on any web page that still shows them (message pages, 404) */
.navbar.navbar-light { background: rgba(11, 11, 12, 0.8) !important; border-bottom: 1px solid var(--tcg-line); backdrop-filter: blur(12px); }
.navbar .navbar-brand img { height: 26px; width: auto; }
.navbar .nav-link, .navbar .navbar-brand, .navbar .navbar-brand span { color: var(--tcg-fg) !important; }
.navbar .nav-link:hover { color: var(--tcg-volt) !important; }
.navbar-toggler { border-color: var(--tcg-line-2); }
.web-footer, footer.web-footer { background: transparent; border-top: 1px solid var(--tcg-line); color: var(--tcg-muted); }
.web-footer a { color: var(--tcg-muted); }
.page-content-wrapper h1, .page-content-wrapper h2, .page-content-wrapper h3 { color: var(--tcg-fg); }
.page-content-wrapper, .page-content-wrapper p { color: var(--tcg-fg); }
.text-muted { color: var(--tcg-muted) !important; }

/* ==========================================================================================
   Shared form language (login card family + join form)
   ========================================================================================== */
.page-card input.form-control, .page-card .form-control,
.tcg-join .form-control {
	background: var(--tcg-field) !important;
	border: 1px solid var(--tcg-line-2) !important;
	color: var(--tcg-fg) !important;
	border-radius: 12px !important;
	height: 3rem !important;
	padding: 0 1rem !important;
	font-size: 0.95rem !important;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.page-card .form-control:focus, .tcg-join .form-control:focus {
	border-color: var(--tcg-volt) !important;
	box-shadow: 0 0 0 3px rgba(218, 255, 49, 0.16) !important;
	outline: none !important;
}
.page-card ::placeholder, .tcg-join ::placeholder { color: #55555d !important; opacity: 1; }
.page-card input:-webkit-autofill, .tcg-join input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--tcg-field) inset !important;
	-webkit-text-fill-color: var(--tcg-fg) !important;
	caret-color: var(--tcg-fg);
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

.es-button[data-variant="solid"], .page-card .btn-primary, .tcg-join .btn-primary {
	background: var(--tcg-volt) !important;
	color: var(--tcg-volt-ink) !important;
	border: 0 !important;
	border-radius: 999px !important;
	min-height: 3rem;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	letter-spacing: 0.01em;
	box-shadow: none !important;
	transition: transform 0.2s var(--tcg-ease), box-shadow 0.2s;
}
.es-button[data-variant="solid"]:hover, .page-card .btn-primary:hover, .tcg-join .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 30px -10px rgba(218, 255, 49, 0.55) !important;
	background: #e3ff5c !important;
	color: var(--tcg-volt-ink) !important;
}
.es-button.btn-login-option, .page-card .btn-default, .btn-secondary {
	background: transparent !important; color: var(--tcg-fg) !important;
	border: 1px solid var(--tcg-line-2) !important; border-radius: 999px !important;
}
.es-button.btn-login-option:hover { border-color: var(--tcg-volt) !important; color: var(--tcg-volt) !important; }

/* brand side-panel shared by login and join */
.tcg-side {
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background:
		radial-gradient(70% 50% at 80% 0%, rgba(218, 255, 49, 0.16), transparent 70%),
		linear-gradient(160deg, #131315, #0a0a0b 65%);
	border-right: 1px solid var(--tcg-line);
	overflow: hidden; isolation: isolate;
}
.tcg-side::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none;
	background-image: linear-gradient(var(--tcg-line) 1px, transparent 1px), linear-gradient(90deg, var(--tcg-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
}
.tcg-side .eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tcg-volt);
}
.tcg-side .eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tcg-volt); box-shadow: 0 0 0 4px rgba(218, 255, 49, 0.14); }
.tcg-side h1 {
	margin: 0; font-family: var(--tcg-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--tcg-fg);
}
.tcg-side h1 em { font-style: normal; color: var(--tcg-volt); }
.tcg-side .lead { margin: 1.25rem 0 0; color: var(--tcg-muted); font-size: 1rem; max-width: 26rem; line-height: 1.65; }
.tcg-logo-link img { height: 28px; width: auto; display: block; }

/* ==========================================================================================
   /login — two panels: brand left, card right
   ========================================================================================== */
.tcg-login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100svh; }
.tcg-login-brand { composes: none; }
.tcg-login-brand { /* same recipe as .tcg-side */
	position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background:
		radial-gradient(70% 50% at 80% 0%, rgba(218, 255, 49, 0.16), transparent 70%),
		linear-gradient(160deg, #131315, #0a0a0b 65%);
	border-right: 1px solid var(--tcg-line);
	overflow: hidden; isolation: isolate;
}
.tcg-login-brand::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none;
	background-image: linear-gradient(var(--tcg-line) 1px, transparent 1px), linear-gradient(90deg, var(--tcg-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
}
.tcg-login-logo img { height: 28px; width: auto; display: block; }
.tcg-login-logo.mobile { display: none; }
.tcg-login-hero .eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tcg-volt);
}
.tcg-login-hero .eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tcg-volt); box-shadow: 0 0 0 4px rgba(218, 255, 49, 0.14); }
.tcg-login-hero h1 {
	margin: 0; font-family: var(--tcg-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(2.6rem, 4vw, 4rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--tcg-fg);
}
.tcg-login-hero h1 em { font-style: normal; color: var(--tcg-volt); }
.tcg-login-hero .lead { margin: 1.25rem 0 0; color: var(--tcg-muted); font-size: 1rem; max-width: 26rem; line-height: 1.65; }
.tcg-login-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tcg-muted); }
.tcg-login-foot a { color: var(--tcg-fg); font-weight: 600; }

.tcg-login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem; }
.tcg-login-panel section { width: 100%; display: flex; justify-content: center; }
.tcg-login .page-card {
	width: min(100%, 25.5rem) !important; max-width: 25.5rem !important;
	background: var(--tcg-panel) !important;
	border: 1px solid var(--tcg-line-2) !important;
	border-radius: 22px !important;
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
	padding: 2rem !important;
	margin: 0 !important;
}
.tcg-login .page-card-head img.app-logo { width: 52px !important; height: 52px !important; max-height: 52px !important; border-radius: 13px; }
.tcg-login .page-card h4 { color: var(--tcg-fg) !important; font-family: var(--tcg-display); font-weight: 700 !important; letter-spacing: -0.01em; }
.tcg-login .page-card-subtitle, .tcg-login .page-card label, .tcg-login .text-ink-gray-5, .tcg-login .text-ink-gray-6 { color: var(--tcg-muted) !important; }
.tcg-login .page-card label { font-size: 0.78rem !important; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600 !important; }
.tcg-login .page-card a { color: var(--tcg-volt) !important; }
.tcg-login .page-card a:hover { color: #eaff85 !important; }
.tcg-login .toggle-password, .tcg-login .toggle-password use { color: var(--tcg-muted) !important; stroke: var(--tcg-muted); }
.tcg-login .field-error, .tcg-login .text-ink-red-8 { color: #ff8585 !important; }
.tcg-login .es-alert[data-theme="red"] { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.4); color: #fca5a5; border-radius: 12px; }
.tcg-login .es-alert[data-theme="green"] { background: rgba(218, 255, 49, 0.08); border: 1px solid rgba(218, 255, 49, 0.35); color: var(--tcg-volt); border-radius: 12px; }

@media (max-width: 991px) {
	.tcg-login { grid-template-columns: 1fr; }
	.tcg-login-brand { display: none; }
	.tcg-login-logo.mobile { display: block; margin: 0 0 2rem; }
	.tcg-login-panel { justify-content: flex-start; padding-top: 2.5rem; min-height: 100svh; }
}

/* ==========================================================================================
   /join — brand rail left, numbered form right
   ========================================================================================== */
.tcg-join { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); min-height: 100svh; align-items: stretch; }
.tcg-join-side {
	position: sticky; top: 0; align-self: start; height: 100svh;
	display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
	padding: clamp(1.75rem, 3.5vw, 3rem);
	background:
		radial-gradient(70% 50% at 80% 0%, rgba(218, 255, 49, 0.16), transparent 70%),
		linear-gradient(160deg, #131315, #0a0a0b 65%);
	border-right: 1px solid var(--tcg-line);
	overflow: hidden; isolation: isolate;
}
.tcg-join-side::before {
	content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5; pointer-events: none;
	background-image: linear-gradient(var(--tcg-line) 1px, transparent 1px), linear-gradient(90deg, var(--tcg-line) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 30%, #000 20%, transparent 100%);
}
.tcg-join-logo img { height: 28px; width: auto; display: block; }
.tcg-join-logo.mobile { display: none; }
.tcg-join-side-body .eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
	font-size: 0.74rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tcg-volt);
}
.tcg-join-side-body .eyebrow::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--tcg-volt); box-shadow: 0 0 0 4px rgba(218, 255, 49, 0.14); }
.tcg-join-side-body h1 {
	margin: 0; font-family: var(--tcg-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(2.2rem, 3.4vw, 3.4rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--tcg-fg);
}
.tcg-join-side-body .lead { margin: 1.25rem 0 0; color: var(--tcg-muted); font-size: 0.98rem; max-width: 26rem; line-height: 1.65; }
.tcg-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; max-width: 26rem; }
.tcg-steps li { display: flex; align-items: flex-start; gap: 0.8rem; color: var(--tcg-fg); font-size: 0.92rem; line-height: 1.5; }
.tcg-steps b {
	flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; background: rgba(218, 255, 49, 0.12); border: 1px solid rgba(218, 255, 49, 0.4);
	color: var(--tcg-volt); font-size: 0.78rem; font-weight: 700;
}
.tcg-join-side-foot { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--tcg-muted); }
.tcg-join-side-foot a { color: var(--tcg-fg); font-weight: 600; width: fit-content; }
.tcg-join-side-foot a:hover { color: var(--tcg-volt); }

.tcg-join-main { padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 4rem); max-width: 46rem; width: 100%; margin: 0 auto; }
.tcg-block {
	background: var(--tcg-panel); border: 1px solid var(--tcg-line); border-radius: 20px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem); margin-bottom: 1rem;
}
.tcg-block header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.1rem; }
.tcg-block header .num {
	width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	border-radius: 999px; background: var(--tcg-volt); color: var(--tcg-volt-ink); font-weight: 800; font-size: 0.85rem;
}
.tcg-block h2 { margin: 0; font-family: var(--tcg-display); font-size: 1.05rem; font-weight: 700; color: var(--tcg-fg); }
.tcg-block .note { margin: 1rem 0 0; font-size: 0.84rem; color: var(--tcg-muted); }

.tcg-plans { display: flex; flex-direction: column; gap: 0.5rem; max-height: 23.5rem; overflow: auto; padding-right: 0.25rem; scrollbar-width: thin; scrollbar-color: var(--tcg-line-2) transparent; }
.tcg-plan-opt {
	position: relative; /* the hidden radio is absolute: without this it anchors to the document and stretches the page */
	display: flex; align-items: center; gap: 0.85rem; margin: 0; cursor: pointer;
	padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--tcg-line-2); background: var(--tcg-field);
	transition: border-color 0.15s, background 0.15s, transform 0.15s var(--tcg-ease);
}
.tcg-plan-opt:hover { border-color: rgba(218, 255, 49, 0.45); transform: translateX(2px); }
.tcg-plan-opt input { position: absolute; opacity: 0; pointer-events: none; }
.tcg-plan-opt .radio {
	flex-shrink: 0; width: 1.15rem; height: 1.15rem; border-radius: 999px;
	border: 2px solid var(--tcg-line-2); background: transparent; position: relative; transition: border-color 0.15s;
}
.tcg-plan-opt .radio::after {
	content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--tcg-volt);
	transform: scale(0); transition: transform 0.18s var(--tcg-ease);
}
.tcg-plan-opt:has(input:checked) { border-color: var(--tcg-volt); background: linear-gradient(170deg, rgba(218, 255, 49, 0.09), var(--tcg-field) 60%); box-shadow: 0 0 0 3px rgba(218, 255, 49, 0.14); }
.tcg-plan-opt:has(input:checked) .radio { border-color: var(--tcg-volt); }
.tcg-plan-opt:has(input:checked) .radio::after { transform: scale(1); }
.tcg-plan-opt:has(input:focus-visible) { outline: 2px solid var(--tcg-volt); outline-offset: 2px; }
.tcg-plan-opt .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.tcg-plan-opt .name { font-weight: 600; color: var(--tcg-fg); font-size: 0.92rem; }
.tcg-plan-opt .meta { color: var(--tcg-muted); font-size: 0.78rem; }
.tcg-plan-opt .price { font-family: var(--tcg-display); font-weight: 700; color: var(--tcg-volt); font-size: 0.98rem; white-space: nowrap; }

.tcg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tcg-fields .f { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.tcg-fields .span-2 { grid-column: span 2; }
.tcg-fields label { margin: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tcg-muted); }
.tcg-fields label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: #6b6b74; }
.tcg-join .was-validated .form-control:invalid { border-color: #ff8585 !important; }

.tcg-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.tcg-submit .btn-lg { padding: 0 1.75rem !important; }
#tcg-join-status { color: var(--tcg-muted); font-size: 0.88rem; }

.tcg-block.done { border-color: rgba(218, 255, 49, 0.5); background: linear-gradient(170deg, rgba(218, 255, 49, 0.1), var(--tcg-panel) 55%); }
.tcg-block.done h2 { color: var(--tcg-volt); font-family: var(--tcg-display); font-size: 1.3rem; margin-bottom: 0.5rem; }
.tcg-block.done p { color: var(--tcg-fg); }
.tcg-block.done code { color: var(--tcg-fg); background: var(--tcg-field); border: 1px solid var(--tcg-line-2); border-radius: 8px; padding: 0.15rem 0.5rem; }
.tcg-block.done .btn { margin-top: 0.75rem; }
.tcg-block.done a { color: var(--tcg-volt); }

@media (max-width: 991px) {
	.tcg-join { grid-template-columns: 1fr; }
	.tcg-join-side { display: none; }
	.tcg-join-logo.mobile { display: block; margin-bottom: 1.5rem; }
	.tcg-fields { grid-template-columns: 1fr; }
	.tcg-fields .span-2 { grid-column: span 1; }
	.tcg-plans { max-height: none; }
	.tcg-submit .btn-lg { width: 100%; }
}

/* two-step sign-in (rendered into the login card by login.js / www/login.html) */
.tcg-login #twofactor_div .form-verify { display: flex; flex-direction: column; gap: 1rem; }
.tcg-otp-head { display: flex; gap: .85rem; align-items: flex-start; }
.tcg-otp-badge { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: rgba(218, 255, 49, .12); border: 1px solid rgba(218, 255, 49, .35); color: var(--tcg-volt); }
.tcg-otp-head h4 { margin: 0 0 .25rem; font-family: var(--tcg-display); font-size: 1.15rem; font-weight: 700; color: var(--tcg-fg); }
.tcg-otp-head p { margin: 0; font-size: .86rem; color: var(--tcg-muted); line-height: 1.55; }
.tcg-otp-enrol { display: flex; gap: 1rem; align-items: center; padding: .9rem; border-radius: 14px; background: var(--tcg-field); border: 1px solid var(--tcg-line-2); }
.tcg-otp-enrol img { width: 150px; height: 150px; border-radius: 10px; background: #fff; padding: 6px; flex-shrink: 0; }
.tcg-otp-steps p { margin: 0 0 .45rem; font-size: .8rem; color: var(--tcg-muted); line-height: 1.45; }
.tcg-otp-steps b { display: inline-flex; width: 1.2rem; height: 1.2rem; border-radius: 999px; align-items: center; justify-content: center; margin-right: .35rem; font-size: .68rem; background: rgba(218, 255, 49, .14); color: var(--tcg-volt); }
.tcg-otp-key { display: block; font-size: .78rem; letter-spacing: .08em; color: var(--tcg-fg); background: #000; border: 1px dashed var(--tcg-line-2); border-radius: 8px; padding: .4rem .55rem; word-break: break-all; }
.tcg-otp-note { color: #fca5a5; font-size: .86rem; margin: 0; }
.tcg-login #login_token { font-size: 1.35rem !important; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .tcg-otp-enrol { flex-direction: column; } }

/* login: full-bleed (no top gap), brand rail fits the viewport, readable error + autofill */
body:has(.tcg-login), body:has(.tcg-join) { margin: 0 !important; border: 0 !important; }
body:has(.tcg-login) .page-content-wrapper, body:has(.tcg-join) .page-content-wrapper { margin: 0; padding: 0 !important; min-height: 0; }
body:has(.tcg-login) .page-content-wrapper > main, body:has(.tcg-join) .page-content-wrapper > main, body:has(.tcg-login) .page_content, body:has(.tcg-join) .page_content { padding: 0 !important; margin: 0 !important; min-height: 0 !important; }
.tcg-login { min-height: 100svh; }
.tcg-login-brand { position: sticky; top: 0; height: 100svh; }
.tcg-login-foot { line-height: 1.6; }
.tcg-login .es-alert, .tcg-login .es-alert .es-alert__title, .tcg-login .login-error-banner .es-alert__title { color: #fecaca !important; }
.tcg-login .login-success-banner .es-alert__title { color: var(--tcg-volt) !important; }
.tcg-login .es-alert svg { color: #f87171; }
.page-card input:-webkit-autofill, .page-card input:-webkit-autofill:hover, .page-card input:-webkit-autofill:focus, .page-card input:-webkit-autofill:active,
.tcg-join input:-webkit-autofill, .tcg-join input:-webkit-autofill:hover, .tcg-join input:-webkit-autofill:focus, .tcg-join input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px var(--tcg-field) inset !important;
	box-shadow: 0 0 0 1000px var(--tcg-field) inset !important;
	-webkit-text-fill-color: var(--tcg-fg) !important;
	caret-color: var(--tcg-fg);
	transition: background-color 600000s 0s, color 600000s 0s;
}
.page-card input:-webkit-autofill:focus { box-shadow: 0 0 0 1000px var(--tcg-field) inset, 0 0 0 3px rgba(218, 255, 49, .16) !important; }

/* 2FA enrolment: a wider, airier card so the QR, the steps and the key never feel cramped */
.tcg-login .page-card:has(.tcg-otp-enrol) { width: min(100%, 34rem) !important; max-width: 34rem !important; padding: 2.5rem 2.5rem 2.25rem !important; }
.tcg-login #twofactor_div .form-verify { gap: 1.4rem; }
.tcg-otp-head { gap: 1rem; }
.tcg-otp-head h4 { font-size: 1.3rem; margin-bottom: .4rem; }
.tcg-otp-enrol { gap: 1.5rem; padding: 1.4rem; align-items: center; }
.tcg-otp-enrol img { width: 176px; height: 176px; padding: 10px; border-radius: 14px; }
.tcg-otp-steps { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.tcg-otp-steps p { display: flex; gap: .55rem; align-items: flex-start; margin: 0; font-size: .86rem; line-height: 1.5; }
.tcg-otp-steps b { flex-shrink: 0; margin: .05rem 0 0; width: 1.35rem; height: 1.35rem; font-size: .72rem; }
.tcg-otp-key { margin-top: .1rem; padding: .6rem .75rem; font-size: .9rem; letter-spacing: .14em; line-height: 1.6; word-break: normal; overflow-wrap: anywhere; }
.tcg-login #login_token { height: 3.6rem !important; font-size: 1.6rem !important; }
.tcg-login #verify_token { min-height: 3.4rem; font-size: 1rem !important; }
@media (max-width: 560px) {
	.tcg-login .page-card:has(.tcg-otp-enrol) { padding: 1.6rem 1.25rem !important; }
	.tcg-otp-enrol { flex-direction: column; text-align: left; }
	.tcg-otp-enrol img { width: 200px; height: 200px; }
}

/* join: breathing room at the top of the form, and the plan list sits under the sticky brand rail */
.tcg-join-main { padding-top: clamp(2rem, 5vw, 3.5rem) !important; }
.tcg-plan-opt .meta { line-height: 1.45; }