:root {
	color-scheme: dark;
	--bg: #030507;
	--panel: #0b1016;
	--panel-2: #111820;
	--text: #f6f8fb;
	--muted: #a4adb9;
	--cyan: #37e5df;
	--blue: #237eff;
	--gold: #f3c64f;
	--line: rgba(243, 198, 79, .44);
	--content: 1200px;
	font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); overflow-x: hidden; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.site-header {
	position: absolute;
	z-index: 20;
	top: 0;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(calc(100% - 48px), var(--content));
	height: 72px;
	transform: translateX(-50%);
}

.brand { font-size: 19px; font-weight: 750; letter-spacing: .03em; }
.brand span { font-size: 25px; letter-spacing: -.05em; }
.site-header nav { display: flex; align-items: center; gap: 46px; color: #d3d9e1; font-size: 15px; }
.site-header nav a { transition: color .18s ease; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--cyan); }

.stage {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	padding: 90px 24px 56px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 108%, rgba(23, 137, 255, .17), transparent 34%),
		linear-gradient(180deg, #020406, #05080c 60%, #020406);
}

.stage::before, .stage::after {
	position: absolute;
	top: 8%;
	width: 34%;
	height: 62%;
	content: "";
	pointer-events: none;
	filter: blur(2px);
	opacity: .52;
}

.stage::before { left: -20%; background: radial-gradient(ellipse at right top, rgba(33, 164, 255, .3), transparent 58%); transform: rotate(-12deg); }
.stage::after { right: -20%; background: radial-gradient(ellipse at left top, rgba(33, 164, 255, .3), transparent 58%); transform: rotate(12deg); }
.stage-glow { position: absolute; inset: auto 16% 0; height: 2px; background: linear-gradient(90deg, transparent, #1b9eff, transparent); box-shadow: 0 0 36px 8px rgba(27, 158, 255, .35); }
.stage-inner { position: relative; z-index: 2; width: min(100%, var(--content)); margin: 0 auto; text-align: center; }
.eyebrow { margin: 0 0 18px; color: var(--gold); font-size: 17px; font-weight: 750; letter-spacing: .34em; }
.eyebrow::before, .eyebrow::after { display: inline-block; width: 24px; height: 1px; margin: 0 12px 5px; content: ""; background: linear-gradient(90deg, transparent, var(--gold)); }
.eyebrow::after { background: linear-gradient(90deg, var(--gold), transparent); }
h1, h2 { margin: 0; font-weight: 850; letter-spacing: -.04em; line-height: 1.12; }
h1 { font-size: clamp(40px, 4.15vw, 66px); }
h2 { font-size: clamp(36px, 3.65vw, 58px); }
h1 span, h2 span { color: transparent; background: linear-gradient(100deg, #4b8cff, #4de7dc); background-clip: text; }
.lead { margin: 16px auto 28px; color: #c6ccd4; font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .03em; }

.software-frame {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #070a0f;
	box-shadow: 0 28px 80px rgba(0, 0, 0, .55), 0 0 36px rgba(32, 141, 255, .09);
}

.window-bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; color: #919aa7; background: #0c1118; font-size: 12px; }
.window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #34404d; }
.window-bar i:first-child { background: #f3c64f; }
.window-bar span { margin-left: 6px; }
.software-frame > img { width: 100%; height: auto; }
.hero-software-frame { width: min(930px, 100%); margin: 0 auto; }
.hero-software-frame > img { max-height: 420px; object-fit: contain; background: #080b11; }
.compare-frame.hero-compare { max-width: 930px; }
.hero-compare img { max-height: 370px; }

.hero-actions, .feature-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.primary-cta, .secondary-cta {
	min-height: 56px;
	border-radius: 8px;
	padding: 0 32px;
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
.primary-cta { border: 0; background: linear-gradient(105deg, #1569ff, #20a5f5 54%, #31dfd2); box-shadow: 0 12px 34px rgba(22, 113, 255, .26); }
.primary-cta:hover { filter: brightness(1.09); transform: translateY(-1px); }
.primary-cta:focus-visible, .secondary-cta:focus-visible, .dialog-close:focus-visible, .payment-tabs button:focus-visible { outline: 3px solid rgba(55, 229, 223, .7); outline-offset: 3px; }
.primary-cta strong { font-weight: 750; }
.primary-cta > img, .secondary-cta > img { width: 20px; height: 20px; filter: invert(1); }
.secondary-cta { background: rgba(8, 12, 18, .58); }
.secondary-cta:hover { border-color: var(--cyan); }
.offer-inline { display: flex; align-items: center; gap: 8px; margin: 0 0 0 14px; color: #b7bec8; font-size: 14px; }
.offer-inline s { color: #969da7; text-decoration-color: #ef5c65; text-decoration-thickness: 2px; }
.offer-inline time, [data-dialog-offer-countdown], .offer-pill time { color: var(--gold); font-weight: 800; }

.trust-strip, .benefit-row, .legal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(13, 17, 22, .68); }
.trust-strip article, .benefit-row article, .legal-row article { display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 16px 34px; text-align: left; }
.trust-strip article + article, .benefit-row article + article, .legal-row article + article { border-left: 1px solid rgba(243, 198, 79, .26); }
.trust-strip img, .benefit-row img, .legal-row img { width: 34px; height: 34px; filter: invert(80%) sepia(66%) saturate(612%) hue-rotate(355deg); }
.trust-strip strong, .benefit-row strong, .legal-row strong { display: block; margin-bottom: 4px; font-size: 17px; }
.trust-strip span, .benefit-row span, .legal-row span { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }

.effects-stage { background: radial-gradient(circle at 50% 52%, rgba(13, 52, 82, .22), transparent 46%), #020406; }
.compare-frame { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; max-width: 1040px; margin: 0 auto; border: 1px solid rgba(243, 198, 79, .5); border-radius: 16px; box-shadow: 0 28px 70px rgba(0, 0, 0, .58); }
.compare-frame figure { position: relative; margin: 0; overflow: hidden; background: #070b10; }
.compare-frame figure + figure { border-left: 1px solid rgba(255, 255, 255, .55); }
.compare-frame figure > span { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 7px 14px; border-radius: 999px; color: var(--gold); background: rgba(0, 0, 0, .72); font-size: 13px; font-weight: 700; }
.compare-frame figure + figure > span { right: 18px; left: auto; color: var(--cyan); }
.compare-frame img { width: 100%; height: 370px; object-fit: cover; }
.compare-mark { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; border: 4px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #0b1118; background: #fff; transform: translate(-50%, -50%); font-weight: 900; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.compare-mark img { width: 25px; height: 25px; filter: none; }
.benefit-row { max-width: 1040px; margin: 24px auto 0; background: transparent; border: 0; }
.benefit-row article { justify-content: center; }
.benefit-row-with-cta { grid-template-columns: repeat(3, 1fr) auto; }
.benefit-purchase { display: flex; align-items: center; padding-left: 22px; border-left: 1px solid rgba(243, 198, 79, .26); }
.benefit-purchase .primary-cta { min-height: 50px; padding: 0 22px; font-size: 15px; white-space: nowrap; }

.features-stage { background: radial-gradient(circle at 52% 52%, rgba(16, 88, 116, .18), transparent 47%), #030507; }
.feature-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 34px; align-items: center; max-width: 1060px; margin: 0 auto; }
.feature-list { display: grid; gap: 22px; text-align: left; }
.feature-list article { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 16px; border-left: 1px solid var(--line); }
.feature-list img { width: 43px; height: 43px; padding: 10px; border: 1px solid var(--gold); border-radius: 50%; filter: invert(80%) sepia(66%) saturate(612%) hue-rotate(355deg); }
.feature-list strong { display: block; margin-bottom: 8px; font-size: 19px; }
.feature-list span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.feature-software-frame > img { max-height: 500px; object-fit: contain; }
.feature-actions { max-width: 1060px; margin: 28px auto 0; }
.compatibility { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; border: 1px solid var(--line); border-radius: 8px; color: #dce2e8; font-size: 13px; }
.compatibility img { width: 22px; filter: invert(80%) sepia(66%) saturate(612%) hue-rotate(355deg); }

.pricing-stage { background: radial-gradient(circle at 50% 58%, rgba(16, 87, 136, .2), transparent 42%), #020406; }
.pricing-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 1060px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(243, 198, 79, .64); border-radius: 18px; background: linear-gradient(135deg, rgba(15, 21, 28, .96), rgba(8, 12, 17, .96)); box-shadow: 0 28px 80px rgba(0, 0, 0, .62); text-align: left; }
.pricing-product, .pricing-copy { min-width: 0; padding: 34px 46px; }
.pricing-product { display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(255, 255, 255, .2); text-align: center; }
.pricing-product img { width: 100%; max-height: 290px; object-fit: contain; border: 1px solid rgba(243, 198, 79, .34); border-radius: 10px; background: #080b11; }
.pricing-product h3 { margin: 20px 0 6px; font-size: 25px; }
.pricing-product p { margin: 0; color: var(--muted); }
.pricing-copy { display: flex; flex-direction: column; justify-content: center; }
.price-line { display: flex; align-items: center; gap: 24px; }
.price-line strong, .dialog-price strong { color: transparent; background: linear-gradient(100deg, #4a91ff, #4ce8dd); background-clip: text; font-size: clamp(48px, 5vw, 72px); line-height: 1; }
.price-line s, .dialog-price s { color: #969da7; font-size: 23px; text-decoration-color: #ee5e66; text-decoration-thickness: 3px; }
.offer-pill { align-self: flex-start; margin: 18px 0; padding: 9px 18px; border: 1px solid rgba(255, 255, 255, .19); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.pricing-copy ul, .payment-product ul { padding: 0; margin: 0 0 22px; list-style: none; }
.pricing-copy li, .payment-product li { margin: 13px 0; }
.pricing-copy li::before, .payment-product li::before { display: inline-block; width: 16px; height: 16px; margin-right: 12px; content: ""; background: url("icons/circle-check.svg") center / contain no-repeat; filter: invert(80%) sepia(66%) saturate(612%) hue-rotate(355deg); vertical-align: -2px; }
.primary-cta.wide { width: 100%; }
.pricing-copy > p:last-child { color: #c5cbd3; text-align: center; }
.pricing-copy > p a { color: #3f9cff; }
.legal-row { max-width: 1140px; margin: 30px auto 0; background: transparent; }
.legal-row article { align-items: flex-start; padding: 18px 28px; }
.pricing-stage footer { margin-top: 22px; color: #cbd1d9; letter-spacing: .08em; }
.pricing-stage footer a:hover { color: var(--cyan); }

.purchase-dialog { width: min(820px, calc(100% - 32px)); padding: 0; border: 1px solid rgba(243, 198, 79, .52); border-radius: 18px; color: var(--text); background: #0a0e13; box-shadow: 0 35px 120px rgba(0, 0, 0, .78); }
.purchase-dialog::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(4px); }
.dialog-shell { padding: 22px 28px 0; }
.dialog-shell > header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; }
.dialog-shell h2 { font-size: 22px; letter-spacing: 0; }
.dialog-close { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; color: #dce2e8; background: transparent; cursor: pointer; }
.dialog-close img { width: 24px; height: 24px; filter: invert(1); }
.csrf-source { display: none; }
.payment-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.payment-tabs button { height: 50px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 8px; color: #aeb7c2; background: #0d1218; cursor: pointer; }
.payment-tabs button[aria-selected="true"] { border-color: #2e88ff; color: #52a3ff; background: rgba(28, 117, 255, .1); box-shadow: inset 0 0 0 1px rgba(45, 136, 255, .4); }
.payment-body { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 380px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 12px 12px 0 0; background: linear-gradient(135deg, #121820, #0d1218); }
.payment-product, .payment-action { padding: 24px; }
.payment-product { border-right: 1px solid rgba(255, 255, 255, .12); }
.payment-product > img { width: 100%; height: auto; aspect-ratio: 1.6; object-fit: contain; border: 1px solid rgba(46, 136, 255, .5); border-radius: 8px; background: #080b11; }
.payment-product h3 { margin: 16px 0; text-align: center; }
.payment-product ul { color: #d3d9e0; font-size: 13px; }
.payment-action { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dialog-price { display: flex; align-items: center; gap: 14px; }
.dialog-price strong { font-size: 44px; }
.dialog-price s { font-size: 17px; }
.payment-action > p { margin: 7px 0; color: #b8c0ca; }
.qr-stage { display: grid; place-items: center; width: 184px; height: 184px; margin: 8px 0; border: 2px solid rgba(45, 136, 255, .74); border-radius: 12px; background: #fff; box-shadow: 0 0 20px rgba(45, 136, 255, .32); }
.qr-stage img { width: 172px; height: 172px; object-fit: contain; }
.qr-loading { max-width: 130px; color: #354153; font-size: 13px; line-height: 1.5; }
.payment-hint { color: #f0f4f8 !important; }
[data-qr-countdown] { color: #4b9dff; font-weight: 800; }
.retry-payment { margin-top: 8px; padding: 8px 16px; border: 1px solid #3c8eff; border-radius: 6px; color: #dfeeff; background: transparent; cursor: pointer; }
.dialog-shell > footer { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border: 1px solid rgba(255, 255, 255, .11); border-top: 0; border-radius: 0 0 12px 12px; color: #c6cdd6; }
.dialog-shell > footer a { margin-left: 12px; color: #4a9eff; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #357dff; box-shadow: 0 0 0 5px rgba(53, 125, 255, .15); }

@media (max-width: 900px) {
	.site-header nav { gap: 20px; }
	.stage { min-height: auto; padding-top: 104px; padding-bottom: 72px; }
	.hero-actions, .feature-actions { flex-wrap: wrap; }
	.offer-inline { flex-basis: 100%; justify-content: center; margin: 0; }
	.feature-layout { grid-template-columns: 1fr; }
	.feature-list { grid-template-columns: repeat(3, 1fr); }
	.feature-list article { display: block; text-align: center; border: 0; }
	.feature-list img { margin: 0 auto 12px; }
	.pricing-product, .pricing-copy { padding: 28px; }
}

@media (max-width: 640px) {
	.site-header { width: calc(100% - 32px); height: 64px; }
	.site-header nav a:not(:last-child) { display: none; }
	.site-header nav { gap: 0; font-size: 13px; }
	.brand { font-size: 15px; }
	.brand span { font-size: 20px; }
	.stage { padding: 86px 16px 56px; }
	.eyebrow { font-size: 12px; letter-spacing: .2em; }
	.eyebrow::before, .eyebrow::after { margin: 0 7px; }
	h1 { font-size: 36px; line-height: 1.18; }
	h2 { font-size: 34px; line-height: 1.18; }
	h1 span, h2 span { display: block; }
	.lead { margin-bottom: 22px; font-size: 14px; line-height: 1.7; }
	.window-bar { height: 30px; }
	.hero-software-frame > img, .feature-software-frame > img { max-height: none; }
	.compare-frame img, .hero-compare img { height: auto; max-height: none; aspect-ratio: 1.6; }
	.primary-cta, .secondary-cta { width: 100%; min-height: 52px; }
	.trust-strip, .benefit-row, .legal-row { grid-template-columns: 1fr; }
	.trust-strip article, .benefit-row article, .legal-row article { min-height: 72px; padding: 14px 18px; }
	.trust-strip article + article, .benefit-row article + article, .legal-row article + article { border-top: 1px solid rgba(243, 198, 79, .18); border-left: 0; }
	.benefit-purchase { padding: 14px 18px; border-top: 1px solid rgba(243, 198, 79, .18); border-left: 0; }
	.benefit-purchase .primary-cta { width: 100%; }
	.compare-frame { grid-template-columns: 1fr; }
	.compare-frame figure + figure { border-top: 1px solid rgba(255, 255, 255, .4); border-left: 0; }
	.compare-mark { top: 50%; }
	.feature-list { grid-template-columns: 1fr; gap: 4px; }
	.feature-list article { display: flex; min-height: 76px; padding: 10px 14px; text-align: left; }
	.feature-list img { margin: 0; }
	.compatibility { width: 100%; justify-content: center; }
	.pricing-card { grid-template-columns: 1fr; }
	.pricing-product { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
	.pricing-product, .pricing-copy { padding: 22px 18px; }
	.price-line { justify-content: center; }
	.price-line strong { font-size: 51px; }
	.offer-pill { align-self: center; }
	.purchase-dialog { width: calc(100% - 18px); max-height: calc(100svh - 18px); }
	.dialog-shell { padding: 14px 12px 0; }
	.dialog-shell h2 { font-size: 18px; }
	.payment-tabs button { height: 44px; }
	.payment-body { grid-template-columns: 1fr; max-height: calc(100svh - 210px); overflow-y: auto; }
	.payment-product { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
	.payment-product, .payment-action { padding: 18px; }
	.payment-product > img { max-height: 190px; }
	.dialog-shell > footer { flex-wrap: wrap; padding: 10px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.compact-header { position: absolute; z-index: 2; top: 0; left: 50%; display: flex; align-items: center; justify-content: space-between; width: min(calc(100% - 40px), 1040px); height: 72px; transform: translateX(-50%); }
.compact-header > a:last-child { color: #b7c0cb; font-size: 14px; }
.compact-header > a:last-child:hover { color: var(--cyan); }
.fulfilment-page { position: relative; display: grid; min-height: 100svh; padding: 96px 20px 40px; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(24, 111, 173, .23), transparent 44%), #030507; }
.fulfilment-page::before, .fulfilment-page::after { position: absolute; top: 7%; width: 34%; height: 70%; content: ""; background: radial-gradient(ellipse at center, rgba(28, 141, 222, .2), transparent 62%); transform: rotate(-14deg); }
.fulfilment-page::before { left: -14%; }
.fulfilment-page::after { right: -14%; transform: rotate(14deg); }
.fulfilment-card { position: relative; z-index: 1; width: min(100%, 680px); padding: 1px; border-radius: 18px; background: linear-gradient(135deg, rgba(243, 198, 79, .76), rgba(55, 229, 223, .18), rgba(36, 126, 255, .75)); box-shadow: 0 30px 90px rgba(0, 0, 0, .62); }
.delivery-panel, .query-panel { padding: 42px 48px; border-radius: 17px; background: linear-gradient(145deg, #111820, #080d13); text-align: center; }
.delivery-icon { width: 54px; height: 54px; margin: 0 auto 18px; padding: 13px; border: 1px solid var(--gold); border-radius: 50%; filter: invert(80%) sepia(66%) saturate(612%) hue-rotate(355deg); }
.delivery-panel h1, .query-panel h1 { margin: 0; font-size: clamp(34px, 5vw, 50px); }
.fulfilment-lead { max-width: 520px; margin: 14px auto 28px; color: #b9c2cc; line-height: 1.75; }
.delivery-panel > label { display: block; margin-bottom: 8px; color: var(--gold); font-size: 13px; font-weight: 700; text-align: left; }
.activation-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.activation-row input, .transaction-input { width: 100%; height: 56px; padding: 0 18px; border: 1px solid rgba(55, 229, 223, .45); border-radius: 8px; outline: 0; color: #fff; background: #070b10; font: 700 21px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
.activation-row input:focus, .transaction-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(55, 229, 223, .16); }
.activation-row button { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid #328dff; border-radius: 8px; color: #e6f1ff; background: rgba(33, 111, 217, .16); cursor: pointer; }
.activation-row button img { width: 18px; filter: invert(1); }
.fulfilment-download { width: 100%; margin-top: 18px; }
.fulfilment-download > img { width: 20px; filter: invert(1); }
.installer-integrity { display: grid; gap: 8px; padding: 0; margin: 18px 0 0; text-align: left; }
.installer-integrity > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border: 1px solid rgba(55, 229, 223, .2); border-radius: 8px; background: #070b10; }
.installer-integrity dt { color: var(--gold); font-size: 12px; font-weight: 700; }
.installer-integrity dd { min-width: 0; margin: 0; color: #d9dfe6; }
.installer-integrity code { overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.delivery-notes { display: flex; justify-content: center; gap: 20px; padding: 0; margin: 24px 0; color: #aeb8c3; font-size: 12px; list-style: none; }
.delivery-notes li + li { padding-left: 20px; border-left: 1px solid rgba(243, 198, 79, .25); }
.back-home { display: inline-block; color: #4a9eff; font-size: 14px; }
.channel-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0; margin: 0 0 20px; border: 0; text-align: left; }
.channel-options legend, .transaction-label { margin-bottom: 9px; color: #d9dfe6; font-size: 14px; font-weight: 700; }
.channel-options legend { grid-column: 1 / -1; }
.channel-options label { cursor: pointer; }
.channel-options input { position: absolute; opacity: 0; }
.channel-options span { display: grid; height: 52px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; color: #aeb8c3; background: #0a0f15; place-items: center; }
.channel-options input:checked + span { border-color: #328dff; color: #5fa8ff; background: rgba(33, 111, 217, .14); box-shadow: inset 0 0 0 1px rgba(50, 141, 255, .35); }
.channel-options input:focus-visible + span { outline: 3px solid rgba(55, 229, 223, .7); outline-offset: 3px; }
.transaction-label { display: block; text-align: left; }
.transaction-input { margin-bottom: 16px; font-family: inherit; font-size: 15px; font-weight: 400; letter-spacing: 0; }
.query-error { padding: 12px; border: 1px solid rgba(243, 88, 96, .5); border-radius: 8px; color: #ffb4b8; background: rgba(160, 35, 42, .13); font-size: 13px; line-height: 1.6; }
.query-help { margin: 18px 0 0; color: #8f99a5; font-size: 12px; }

@media (max-width: 640px) {
	.compact-header { height: 64px; }
	.fulfilment-page { padding: 82px 12px 24px; }
	.delivery-panel, .query-panel { padding: 30px 18px; }
	.activation-row { grid-template-columns: 1fr; }
	.activation-row input { font-size: 16px; letter-spacing: .04em; }
	.activation-row button { min-height: 48px; justify-content: center; }
	.delivery-notes { display: grid; gap: 8px; }
	.delivery-notes li + li { padding-left: 0; border-left: 0; }
	.channel-options { grid-template-columns: 1fr; }
}