/* ============================================================
   GET STARTED — fork → wizard → live
   Serves /hello/instant_demo (the fork + 5-step wizard) and the
   "your XSYTE is live" payoff page.

   WHY THIS FILE IS IN PIXELS, NOT REM
   The legacy theme sets root font-size to 12px, so the rem-based
   design system (tokens.css / xsyte-ds.css) renders at 75% here and
   needs the html{font-size:16px} + chrome-zoom workaround. The wizard
   has always dodged that by being 100% px, and this rework keeps that
   deal: everything below is px, the file is self-contained, and no DS
   stylesheet is linked on this page. Design values were authored in
   rem — converted at 1rem = 16px.

   THE DOM CONTRACT IS FIXED. js/instant_demo.js drives the wizard and
   selects on these exact names: .demo-step/.active, .theme-card/
   .selected/.suggested, .theme-card-name, .sport-chip/.selected,
   .demo-input/.error, .demo-field-error/.visible, .demo-progress-step/
   .active/.done, .demo-wizard-inner, .acct-server-error, plus the
   #reg_*, #org_name, #domain, #preview-slug, #preview-domain,
   #domain-suffix, #theme-hint*, #step3-summary, #step5-* ids. Restyle
   freely; do NOT rename any of them.

   THEME TRAPS handled below (all cost time on earlier pages):
   - `button:hover{background:#0060ff}` (0,1,1) beats a bare class, so
     every button restates its background on :hover/:focus.
   - theme force-colours <i> bright blue, so .gx-i sets color:inherit.
   - ::placeholder is uppercased by the theme — reset to none.
   - <label> is forced display:block — restated where inline is wanted.
   ============================================================ */

@font-face {
	font-family: 'Francois One';
	src: url('/assets/fonts/francois_one.woff2') format('woff2'),
	     url('/assets/fonts/francois_one.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.gx, .demo-wizard-wrap {
	--ink: #04070f;
	--panel: #0b1120;
	--panel-grad: linear-gradient(165deg, #0a2233, #0b1120);
	--cyan: #00d4ff;
	--blue: #2199e8;
	--green: #3adb76;
	--gold: #ffd66b;
	--line: rgba(255, 255, 255, .14);
	--line-soft: rgba(255, 255, 255, .1);
	--txt: #fff;
	--txt-2: rgba(255, 255, 255, .82);
	--txt-3: rgba(255, 255, 255, .55);
	--txt-4: rgba(255, 255, 255, .35);
	--display: 'Francois One', 'Arial Narrow', sans-serif;
	--ease: cubic-bezier(.22, .61, .36, 1);

	/* HEADER CLEARANCE. The theme header is `position:fixed` (main.css ~1484)
	   with no explicit height -- it sizes off the logo + nav padding, landing
	   around 122px on desktop. Every view here is full-bleed dark, so without
	   an explicit top offset the first element (the hero pill, the wizard
	   progress bar) slides underneath it. 140px is the clearance the old
	   success card already used, kept for consistency. Below 1025px the nav
	   collapses to a push-menu and the header is much shorter. */
	--gx-headpad: 140px;
}
@media (max-width: 1024px) { .gx, .demo-wizard-wrap { --gx-headpad: 92px; } }

/* FontAwesome helper. color:inherit undoes the theme's blue <i> rule. */
.gx-i { font-family: FontAwesome; font-style: normal; color: inherit; line-height: 1; }

/* THEME TRAP — <label> has a FIXED height. main.css ~97 sets
   `label{line-height:1.8rem;height:1.8rem}`, i.e. exactly one line. Any label
   whose text wraps overflows its own box and whatever follows in the flow
   renders on top of it — that is what buried the "(select all that apply)"
   helper under the sport chips. It would also squash the schedule-drop upload
   zone on the live page, since that is a <label> too. Height must be auto for
   every label in these views. */
.gx label,
.demo-wizard-wrap label { height: auto; line-height: 1.4; }

@keyframes gxGlow  { 0%,100%{opacity:.4;transform:scale(1)} 50%{opacity:.8;transform:scale(1.06)} }
@keyframes gxRing  { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
@keyframes gxPulse { 0%,100%{opacity:.5;transform:scale(1)} 50%{opacity:1;transform:scale(1.15)} }
@keyframes gxPop   { 0%{transform:scale(.6);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes gxBar   { 0%{width:6%} 100%{width:100%} }

/* reveal-on-scroll */
.gx-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.gx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.gx-reveal { opacity: 1; transform: none; transition: none; }
	.gx-glow, .gx-livedot, .gx-spin__ring { animation: none !important; }
}

/* ============================================================
   1 · FORK
   ============================================================ */
.gx-fork {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: radial-gradient(circle at 70% 30%, #0d2138, #04070f 64%);
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	box-sizing: border-box;
	padding-top: var(--gx-headpad);
}
.gx-glow {
	position: absolute; border-radius: 50%; pointer-events: none;
	filter: blur(30px); animation: gxGlow 8s ease-in-out infinite;
}
.gx-glow--cyan { bottom: -160px; right: -120px; width: 560px; height: 560px;
	background: radial-gradient(circle, rgba(0,212,255,.24), transparent 62%); }
.gx-glow--gold { top: -120px; left: -100px; width: 420px; height: 420px; animation: none;
	background: radial-gradient(circle, rgba(255,214,107,.14), transparent 64%); filter: blur(26px); }

/* the top offset now comes from --gx-headpad on .gx-fork, so this only needs
   enough breathing room to keep the doors off the fold */
.gx-fork__inner { position: relative; max-width: 1080px; margin: 0 auto; width: 100%;
	padding: clamp(24px, 4vw, 48px) 24px; }
.gx-fork__head { text-align: center; max-width: 704px; margin: 0 auto; }

.gx-pill {
	display: inline-flex; align-items: center; gap: 10px;
	background: rgba(0,212,255,.14); border: 1px solid rgba(0,212,255,.5);
	border-radius: 999px; padding: 7px 14px; color: var(--cyan);
	font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	margin-bottom: 26px;
}
.gx-page .gx-h1, .gx-h1 {
	font-family: var(--display); font-weight: 400; line-height: 1.02;
	font-size: clamp(42px, 6vw, 70px); margin: 0; color: #fff;
}
.gx-fork .gx-sub {
	font-size: clamp(18px, 2vw, 22px); line-height: 1.55; color: rgba(255,255,255,.84);
	margin: 21px auto 0; max-width: 544px;
}

.gx-doors { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center;
	align-items: stretch; margin-top: 45px; }
.gx-door {
	flex: 1 1 380px; max-width: 460px; position: relative; border-radius: 20px;
	padding: clamp(29px, 3vw, 38px); display: flex; flex-direction: column;
}
.gx-door--a { background: var(--panel-grad); border: 1.5px solid rgba(0,212,255,.55);
	box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.gx-door--b { background: var(--panel); border: 1px solid rgba(255,255,255,.14);
	box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.gx-door__ribbon {
	position: absolute; top: -12px; left: 24px; background: var(--cyan); color: #04070f;
	font-family: var(--display); font-size: 12px; letter-spacing: .12em;
	text-transform: uppercase; padding: 5px 13px; border-radius: 999px;
}
.gx-door__ico {
	width: 56px; height: 56px; border-radius: 15px; display: flex;
	align-items: center; justify-content: center; font-size: 24px;
}
.gx-door--a .gx-door__ico { background: rgba(0,212,255,.16); color: var(--cyan); }
.gx-door--b .gx-door__ico { background: rgba(255,255,255,.08); color: #fff; }
.gx-page .gx-door__title, .gx-door__title {
	font-family: var(--display); font-weight: 400; line-height: 1.08;
	font-size: clamp(26px, 3vw, 34px); margin: 18px 0 0; color: #fff;
}
.gx-fork .gx-door__body { font-size: 17px; line-height: 1.6; color: var(--txt-2);
	margin: 14px 0 26px; flex: 1; }
.gx-door__cap { text-align: center; font-size: 13px; color: rgba(255,255,255,.5); margin-top: 13px; }

/* door buttons — background restated on hover to beat the theme */
.gx-btn {
	width: 100%; box-sizing: border-box; cursor: pointer; text-decoration: none;
	font-family: var(--display); font-size: 17px; letter-spacing: .02em;
	text-transform: uppercase; padding: 15px 19px; border-radius: 6px;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	transition: filter .2s, border-color .2s, color .2s, background .2s;
}
.gx-btn--solid { background: var(--cyan); border: none; color: #04070f; }
.gx-btn--solid:hover, .gx-btn--solid:focus { background: var(--cyan); color: #04070f; filter: brightness(1.08); }
.gx-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.gx-btn--ghost:hover, .gx-btn--ghost:focus { background: transparent; border-color: var(--cyan); color: var(--cyan); }

.gx-fork__foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.gx-fork__foot span { color: rgba(255,255,255,.6); font-size: 16px; max-width: 352px; }

/* ============================================================
   2 · WIZARD SHELL
   ============================================================ */
.demo-wizard-wrap {
	min-height: 100vh;
	background: radial-gradient(circle at 50% -10%, #0d2138, #04070f 60%);
	padding: calc(var(--gx-headpad) + clamp(8px, 2vw, 24px)) 24px 64px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
}
.demo-wizard-inner { max-width: 960px; margin: 0 auto; }
.demo-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

/* ---------- progress ---------- */
.demo-progress {
	display: flex; align-items: flex-start; justify-content: center;
	max-width: 640px; margin: 0 auto 42px;
}
.demo-progress-step { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: none; width: 34px; }
.demo-progress-step-dot {
	width: 34px; height: 34px; border-radius: 50%; background: var(--panel);
	border: 2px solid rgba(255,255,255,.2); display: flex; align-items: center;
	justify-content: center; font-family: var(--display); font-size: 15px;
	color: var(--txt-4); transition: all .3s var(--ease); position: relative;
}
.demo-progress-step-done-check { display: none; font-size: 14px; }
.demo-progress-step.active .demo-progress-step-dot {
	background: transparent; border-color: var(--cyan); color: var(--cyan);
	box-shadow: 0 0 0 4px rgba(0,212,255,.15);
}
.demo-progress-step.done .demo-progress-step-dot {
	background: var(--cyan); border-color: var(--cyan); color: #04070f;
}
.demo-progress-step.done .demo-progress-step-num { display: none; }
.demo-progress-step.done .demo-progress-step-done-check { display: block; }
.demo-progress-step-label {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--txt-4); white-space: nowrap; text-align: center; transition: color .3s;
}
.demo-progress-step.active .demo-progress-step-label,
.demo-progress-step.done .demo-progress-step-label { color: rgba(255,255,255,.75); }
.demo-progress-line {
	flex: 1; height: 2px; background: rgba(255,255,255,.12); margin-top: 17px;
	position: relative; overflow: hidden; min-width: 20px;
}
.demo-progress-line::after {
	content: ''; position: absolute; inset: 0; width: 0;
	background: var(--cyan); transition: width .4s var(--ease);
}
.demo-progress-line.done::after { width: 100%; }

/* ---------- steps ---------- */
.demo-step { display: none; }
.demo-step.active { display: block; animation: gxPop .35s var(--ease); }
.demo-step-header { margin-bottom: 32px; }
.demo-step-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--cyan); margin-bottom: 10px;
}
.demo-wizard-wrap .demo-step-title {
	font-family: var(--display); font-weight: 400; line-height: 1.04;
	font-size: clamp(32px, 4.4vw, 46px); margin: 0; color: #fff;
}
.demo-wizard-wrap .demo-step-subtitle {
	font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.78);
	margin: 13px 0 0; max-width: 672px;
}

/* ---------- fields ---------- */
.demo-field-group { margin-top: 29px; }
.demo-wizard-wrap .demo-field-label {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 11px;
	height: auto; line-height: 1.5;
}
/* the "(select all that apply)" / "(optional — ...)" helpers ride on the same
   line as the label text, per the design. Explicit, so nothing upstream can
   promote them to their own block and push them out of the label's box. */
.demo-wizard-wrap .demo-field-label span { display: inline; height: auto; }
.demo-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.demo-field-half { flex: 1 1 200px; }

.demo-wizard-wrap .demo-input,
.demo-wizard-wrap .demo-textarea {
	width: 100%; box-sizing: border-box; background: var(--panel);
	border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
	padding: 16px 18px; font-size: 17px; color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	transition: border-color .2s, box-shadow .2s;
}
.demo-wizard-wrap .demo-textarea { line-height: 1.55; resize: vertical; font-size: 16px; }
.demo-wizard-wrap .demo-input.large { font-size: 18px; }
.demo-wizard-wrap .demo-input:hover,
.demo-wizard-wrap .demo-textarea:hover { background: var(--panel); border-color: rgba(255,255,255,.26); }
.demo-wizard-wrap .demo-input:focus,
.demo-wizard-wrap .demo-textarea:focus {
	background: var(--panel); outline: none; border-color: var(--cyan);
	box-shadow: 0 0 0 3px rgba(0,212,255,.2);
}
.demo-wizard-wrap .demo-input.error { border-color: #cc0000; }
/* the theme uppercases placeholders — undo it */
.demo-wizard-wrap .demo-input::placeholder,
.demo-wizard-wrap .demo-textarea::placeholder {
	color: rgba(255,255,255,.34); text-transform: none; letter-spacing: normal;
}

.demo-field-error {
	display: none; color: #ff6b6b; font-size: 14px; margin-top: 9px;
}
.demo-field-error.visible { display: block; }

/* ---------- sport chips ---------- */
.sport-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sport-chip {
	display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
	background: var(--panel); border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px; padding: 9px 16px; font-size: 15px; color: rgba(255,255,255,.8);
	transition: border-color .2s, color .2s, background .2s;
}
.sport-chip:hover { border-color: rgba(0,212,255,.5); color: #fff; }
.sport-chip-check {
	width: 16px; height: 16px; border-radius: 50%; flex: none;
	border: 2px solid rgba(255,255,255,.3); position: relative; transition: all .2s;
}
.sport-chip.selected { border-color: var(--cyan); color: #fff; background: rgba(0,212,255,.08); }
.sport-chip.selected .sport-chip-check { background: var(--cyan); border-color: var(--cyan); }
.sport-chip.selected .sport-chip-check::after {
	content: '✓'; position: absolute; inset: 0; display: flex; align-items: center;
	justify-content: center; color: #04070f; font-size: 10px; font-weight: 700;
}

.demo-other-sport { margin-top: 22px; display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
/* the theme forces <label> to block; this one must sit inline */
.demo-wizard-wrap .demo-other-sport-label { display: inline; font-size: 14px; color: rgba(255,255,255,.6); }
.demo-wizard-wrap .demo-other-sport-input {
	flex: 1; min-width: 200px; background: var(--panel);
	border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
	padding: 11px 16px; font-size: 16px; color: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.demo-wizard-wrap .demo-other-sport-input:focus {
	background: var(--panel); outline: none; border-color: var(--cyan);
	box-shadow: 0 0 0 3px rgba(0,212,255,.2);
}
.demo-wizard-wrap .demo-other-sport-input::placeholder { color: rgba(255,255,255,.34); text-transform: none; }

/* ---------- theme picker ---------- */
.demo-theme-hint {
	display: inline-flex; align-items: center; gap: 8px; color: var(--cyan);
	font-size: 15px; margin: 22px 0 0;
}
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 16px; margin-top: 19px; }
.theme-card {
	position: relative; height: 150px; border-radius: 12px; overflow: hidden;
	cursor: pointer; border: 2px solid transparent; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.theme-card:hover { transform: translateY(-2px); }
.theme-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.theme-card-tint { position: absolute; inset: 0; }
.theme-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px;
	background: linear-gradient(to top, rgba(4,7,15,.85), transparent); }
.theme-card-name { font-family: var(--display); font-size: 17px; color: #fff; line-height: 1.1; }
.theme-card-accent { display: flex; gap: 5px; margin-top: 8px; }
.theme-card-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.theme-card-check {
	position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
	background: var(--cyan); color: #04070f; display: none; align-items: center;
	justify-content: center; font-size: 14px; font-weight: 700;
}
.theme-card.selected { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.25); }
.theme-card.selected .theme-card-check { display: flex; }
.theme-card-suggested-badge {
	position: absolute; top: 10px; left: 10px; display: none; background: var(--cyan);
	color: #04070f; font-family: var(--display); font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.theme-card.suggested .theme-card-suggested-badge { display: block; }

/* ---------- step 3 · operations ---------- */
.demo-selections-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 19px; }
.demo-selection-pill {
	display: inline-flex; align-items: center; gap: 7px; background: rgba(0,212,255,.12);
	border: 1px solid rgba(0,212,255,.4); border-radius: 999px; padding: 6px 13px;
	font-size: 13px; color: var(--cyan);
}
.demo-ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.demo-ops-card {
	display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
	background: var(--panel); border: 1px solid rgba(255,255,255,.14);
	border-radius: 14px; padding: 19px; transition: border-color .2s, background .2s;
}
.demo-ops-card:hover { border-color: rgba(0,212,255,.45); }
.demo-ops-card.selected { border-color: var(--cyan); background: rgba(0,212,255,.08); }
.demo-ops-card-icon {
	width: 46px; height: 46px; flex: none; border-radius: 12px; font-size: 20px;
	background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center;
}
.demo-ops-card-text { flex: 1; }
.demo-ops-card-title { font-family: var(--display); font-size: 19px; color: #fff; line-height: 1.15; }
.demo-ops-card-desc { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.6); margin-top: 5px; }
.demo-ops-card-check-box {
	width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid rgba(255,255,255,.25);
	display: flex; align-items: center; justify-content: center; font-size: 12px;
	color: transparent; transition: all .2s;
}
.demo-ops-card.selected .demo-ops-card-check-box {
	background: var(--cyan); border-color: var(--cyan); color: #04070f; font-weight: 700;
}

/* ---------- step 4 · url ---------- */
.demo-url-preview {
	background: var(--panel-grad); border: 1px solid rgba(0,212,255,.4);
	border-radius: 14px; padding: 22px; margin-bottom: 24px; text-align: center;
}
.demo-url-preview-label {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--cyan); margin-bottom: 10px;
}
.demo-url-preview-url {
	font-family: var(--display); font-size: clamp(22px, 4vw, 34px); word-break: break-all; line-height: 1.15;
}
.url-user-part { color: var(--cyan); }
.url-domain-part { color: rgba(255,255,255,.85); }
.demo-url-help { font-size: 13px; color: var(--txt-3); margin-top: 10px; }

.demo-url-domain-ext { display: flex; align-items: stretch; }
.demo-url-domain-ext .demo-input { border-radius: 8px 0 0 8px; font-family: var(--display); }
.demo-url-domain-suffix {
	display: flex; align-items: center; padding: 0 16px; background: rgba(0,212,255,.1);
	border: 1px solid rgba(255,255,255,.16); border-left: 1px solid rgba(0,212,255,.4);
	border-radius: 0 8px 8px 0; color: var(--cyan); font-family: var(--display);
	font-size: 16px; white-space: nowrap;
}

/* ---------- step 5 · account ---------- */
.acct-found-banner {
	display: flex; align-items: flex-start; gap: 13px; background: rgba(0,212,255,.08);
	border: 1px solid rgba(0,212,255,.4); border-radius: 12px; padding: 16px; margin-bottom: 22px;
}
.acct-found-icon { color: var(--cyan); font-size: 20px; flex: none; }
.acct-found-text { flex: 1; min-width: 0; }
.acct-found-title { font-family: var(--display); font-size: 17px; color: #fff; }
.acct-found-desc { font-size: 14px; color: rgba(255,255,255,.65); margin-top: 3px; }
.demo-wizard-wrap .acct-toggle-link,
.demo-wizard-wrap .demo-forgot-pw {
	color: var(--cyan); font-size: 14px; text-decoration: none; cursor: pointer; background: none; border: none;
}
.demo-wizard-wrap .acct-toggle-link:hover,
.demo-wizard-wrap .demo-forgot-pw:hover { text-decoration: underline; color: var(--cyan); }
.acct-server-error {
	background: rgba(204,0,0,.12); border: 1px solid rgba(204,0,0,.5); border-radius: 10px;
	padding: 13px 16px; color: #ff9a9a; font-size: 15px; margin-bottom: 19px;
}

/* ---------- nav ---------- */
.demo-nav {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	margin-top: 38px; flex-wrap: wrap;
}
.demo-nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.demo-wizard-wrap .demo-btn {
	cursor: pointer; font-family: var(--display); font-size: 17px; letter-spacing: .02em;
	text-transform: uppercase; padding: 14px 26px; border-radius: 6px;
	display: inline-flex; align-items: center; gap: 10px; transition: filter .2s, border-color .2s, color .2s;
}
.demo-wizard-wrap .demo-btn-next,
.demo-wizard-wrap .demo-btn-submit { background: var(--cyan); border: none; color: #04070f; }
.demo-wizard-wrap .demo-btn-next:hover, .demo-wizard-wrap .demo-btn-next:focus,
.demo-wizard-wrap .demo-btn-submit:hover, .demo-wizard-wrap .demo-btn-submit:focus {
	background: var(--cyan); color: #04070f; filter: brightness(1.08);
}
.demo-wizard-wrap .demo-btn-back { background: var(--panel); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.8); }
.demo-wizard-wrap .demo-btn-back:hover, .demo-wizard-wrap .demo-btn-back:focus {
	background: var(--panel); border-color: rgba(255,255,255,.4); color: #fff;
}
.demo-wizard-wrap .demo-nav-skip {
	background: none; border: none; cursor: pointer; color: var(--txt-3);
	font-size: 15px; text-decoration: underline; padding: 6px;
}
.demo-wizard-wrap .demo-nav-skip:hover { background: none; color: #fff; }

/* persistent anti-anxiety line under every step's nav */
.gx-reassure {
	display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
	margin-top: 26px; padding-top: 19px; border-top: 1px solid rgba(255,255,255,.08);
	font-size: 14px; color: var(--txt-3); text-align: center;
}
.gx-reassure b { color: rgba(255,255,255,.8); font-weight: 700; }
.gx-reassure .gx-i { color: var(--green); }

/* ---------- building overlay ---------- */
.gx-building {
	position: fixed; inset: 0; z-index: 9999; display: none;
	align-items: center; justify-content: center;
	background: rgba(4,7,15,.9); backdrop-filter: blur(6px);
}
.gx-building.is-on { display: flex; }
.gx-building__box { text-align: center; max-width: 420px; padding: 24px; }
.gx-spin { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.gx-spin__ring {
	position: absolute; inset: 0; border-radius: 50%;
	border: 3px solid rgba(0,212,255,.15); border-top-color: var(--cyan);
	animation: gxRing 1s linear infinite;
}
.gx-spin__ico { position: absolute; inset: 0; display: flex; align-items: center;
	justify-content: center; color: var(--cyan); font-size: 32px; }
.gx-building__t { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 26px 0 0; color: #fff; }
.gx-building__s { color: rgba(255,255,255,.7); margin: 10px 0 22px; font-size: 16px; }
.gx-building__s span { color: var(--cyan); }
.gx-building__bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
.gx-building__bar i { display: block; height: 100%; border-radius: 5px;
	background: linear-gradient(90deg, #1276c4, #00d4ff); animation: gxBar 2s ease-out forwards; }

/* ============================================================
   3 · LIVE ("your XSYTE is live")
   ============================================================ */
.gx-live {
	position: relative; min-height: 100vh; overflow: hidden;
	background: radial-gradient(circle at 50% -8%, #0d2138, #04070f 58%);
	padding: calc(var(--gx-headpad) + clamp(8px, 2vw, 24px)) 24px 72px;
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif; color: #fff;
}
.gx-live__glow {
	position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
	width: 640px; height: 420px; pointer-events: none; filter: blur(26px);
	background: radial-gradient(circle, rgba(0,212,255,.24), transparent 65%);
}
.gx-live__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }

.gx-livebadge {
	display: inline-flex; align-items: center; gap: 8px; background: rgba(58,219,118,.14);
	border: 1px solid rgba(58,219,118,.5); border-radius: 999px; padding: 6px 14px;
	font-family: var(--display); font-size: 13px; letter-spacing: .14em;
	text-transform: uppercase; color: var(--green);
}
.gx-livedot { width: 8px; height: 8px; border-radius: 50%; background: var(--green);
	box-shadow: 0 0 8px var(--green); animation: gxPulse 2s ease-in-out infinite; }
.gx-livebadge--amber { background: rgba(255,214,107,.14); border-color: rgba(255,214,107,.5); color: var(--gold); }
.gx-livebadge--amber .gx-livedot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.gx-mark {
	width: 84px; height: 84px; border-radius: 22px; margin: 22px auto 0;
	background: linear-gradient(135deg, #2fb85f, #3adb76); display: flex;
	align-items: center; justify-content: center; color: #04070f; font-size: 38px;
	box-shadow: 0 18px 40px rgba(58,219,118,.35); animation: gxPop .5s var(--ease);
}
.gx-mark--amber { background: linear-gradient(135deg, #d9a326, #ffd66b); box-shadow: 0 18px 40px rgba(255,214,107,.3); }
.gx-live .gx-h1 { margin: 21px 0 0; font-size: clamp(38px, 6vw, 61px); }
.gx-live__sub { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.84); margin: 16px auto 0; max-width: 544px; }

/* ---------- hero action: schedule drop ---------- */
.gx-sched {
	margin-top: 38px; text-align: left; background: var(--panel-grad);
	border: 1.5px solid rgba(0,212,255,.5); border-radius: 18px;
	padding: clamp(24px, 3vw, 32px); box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.gx-sched__badge {
	display: inline-flex; align-items: center; gap: 8px; background: var(--cyan); color: #04070f;
	font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	padding: 5px 13px; border-radius: 999px;
}
.gx-live .gx-sched__t {
	font-family: var(--display); font-weight: 400; font-size: clamp(22px, 3vw, 29px);
	margin: 14px 0 0; color: #fff;
}
.gx-live .gx-sched__b { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 10px 0 19px; }

.gx-drop {
	display: flex; align-items: center; gap: 14px; cursor: pointer;
	background: #04070f; border: 1px dashed rgba(0,212,255,.5); border-radius: 10px;
	padding: 16px 19px; transition: border-color .2s, background .2s;
}
.gx-drop:hover { border-color: var(--cyan); }
.gx-drop.is-over { border-color: var(--cyan); background: rgba(0,212,255,.06); }
.gx-drop__ico {
	width: 42px; height: 42px; flex: none; border-radius: 10px; background: rgba(0,212,255,.14);
	color: var(--cyan); display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.gx-drop__txt { flex: 1; min-width: 0; }
.gx-drop__name { display: block; font-family: var(--display); color: #fff; font-size: 16px;
	overflow: hidden; text-overflow: ellipsis; }
.gx-drop__hint { display: block; font-size: 14px; color: rgba(255,255,255,.5); margin-top: 2px; }

.gx-or { text-align: center; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--txt-4); margin: 16px 0; }
.gx-live .gx-sched__area {
	width: 100%; box-sizing: border-box; background: #04070f;
	border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 16px 18px;
	font-size: 16px; line-height: 1.55; color: #fff; resize: vertical;
	font-family: Arial, Helvetica, sans-serif; transition: border-color .2s, box-shadow .2s;
}
.gx-live .gx-sched__area:hover { background: #04070f; border-color: rgba(255,255,255,.26); }
.gx-live .gx-sched__area:focus {
	background: #04070f; outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.2);
}
.gx-live .gx-sched__area::placeholder { color: rgba(255,255,255,.34); text-transform: none; letter-spacing: normal; }

.gx-sched__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.gx-live .gx-sched__go {
	background: var(--cyan); border: none; color: #04070f; font-family: var(--display);
	font-size: 16px; text-transform: uppercase; letter-spacing: .03em; padding: 14px 24px;
	border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
	transition: filter .2s;
}
.gx-live .gx-sched__go:hover, .gx-live .gx-sched__go:focus { background: var(--cyan); color: #04070f; filter: brightness(1.08); }
.gx-sched__note { font-size: 14px; color: rgba(255,255,255,.5); }
.gx-sched__err {
	display: flex; align-items: center; gap: 9px; background: rgba(204,0,0,.12);
	border: 1px solid rgba(204,0,0,.5); border-radius: 10px; padding: 12px 15px;
	color: #ff9a9a; font-size: 15px; margin-bottom: 16px;
}

/* schedule confirmation */
.gx-schedok { display: flex; align-items: flex-start; gap: 16px; }
.gx-schedok__ico {
	width: 48px; height: 48px; flex: none; border-radius: 12px; background: rgba(58,219,118,.16);
	color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.gx-live .gx-schedok__t { font-family: var(--display); font-weight: 400; font-size: 22px; margin: 0; color: #fff; }
.gx-live .gx-schedok__b { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.78); margin: 10px 0 0; }

/* ---------- visit + summary ---------- */
.gx-visit { margin-top: 26px; }
.gx-sum {
	margin-top: 29px; text-align: left; background: var(--panel);
	border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 22px 26px;
}
.gx-sum__row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
	padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06);
}
.gx-sum__row:last-child { border-bottom: none; }
.gx-sum__k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-4); flex: none; }
.gx-sum__v { color: #fff; font-size: 15px; text-align: right; word-break: break-word; }
.gx-sum__v--muted { color: var(--txt-3); font-style: italic; }

.gx-next { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 29px; }
.gx-live .gx-next a { display: inline-flex; align-items: center; gap: 8px; color: var(--cyan);
	font-size: 15px; text-decoration: none; }
.gx-live .gx-next a:hover { color: var(--cyan); text-decoration: underline; }

.gx-live__reassure { display: inline-flex; align-items: center; gap: 10px; margin-top: 19px;
	color: rgba(255,255,255,.6); font-size: 15px; }
.gx-live__reassure .gx-i { color: var(--green); }
.gx-stamp {
	margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.08);
	font-family: var(--display); letter-spacing: .06em; text-transform: uppercase;
	color: rgba(255,255,255,.45); font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 700px) {
	.demo-progress-step-label { font-size: 9px; letter-spacing: .04em; }
	.demo-progress { margin-bottom: 32px; }
	.demo-nav { gap: 12px; }
	.demo-nav-right { width: 100%; justify-content: flex-end; }
	.demo-wizard-wrap .demo-btn { padding: 13px 20px; font-size: 16px; }
	.gx-doors { gap: 16px; }
	.gx-door { padding: 24px; }
	.gx-fork__foot { flex-direction: column; text-align: center; }
	.demo-url-domain-ext { flex-direction: column; }
	.demo-url-domain-ext .demo-input { border-radius: 8px 8px 0 0; }
	.demo-url-domain-suffix { border-radius: 0 0 8px 8px; border-left: 1px solid rgba(255,255,255,.16);
		border-top: 1px solid rgba(0,212,255,.4); justify-content: center; padding: 11px 16px; }
	.gx-sum__row { flex-direction: column; gap: 4px; }
	.gx-sum__v { text-align: left; }
}