/* brand2026.css - 6 Nov 2026. Brings the blog in line with xenaxcloud.com so a visitor never feels they left the
   site: Outfit headings, ink/navy hero band with blue-violet glow, gradient pill buttons, plan boxes styled like the
   main site's plan rows. Loaded last; delete this file (and its enqueue line) to undo. Article body stays white. */
:root {
	--x26-ink: #060814;
	--x26-navy: #0e123e;
	--x26-blue: #267ef6;
	--x26-violet: #5b3af2;
	--x26-cyan: #00f0ff;
	--x26-grad: linear-gradient(90deg, #267ef6 0%, #5b3af2 100%);
	--x26-grad-cyan: linear-gradient(90deg, #00c6ff 0%, #267ef6 100%);
	--x26-soft: #c3cbe8;
}

/* type: same families as the main site */
h1, h2, h3, h4, .xb-hero__title, .xb-section__head h2, .xb-card__title, .entry-title, .xb-post__title {
	font-family: 'Outfit', 'Inter', system-ui, sans-serif;
	letter-spacing: -0.01em;
}
.xb-gradient-text {
	background: var(--x26-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* buttons: gradient pills like "Order Now" / "Portal" on the main site */
.xb-btn--primary, .xseo-plan__btn, .xseo-pt__btn {
	background: var(--x26-grad) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow: 0 10px 26px -12px rgba(91, 58, 242, 0.65);
	transition: filter 0.15s ease, transform 0.15s ease;
}
.xb-btn--primary:hover, .xseo-plan__btn:hover, .xseo-pt__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.xb-header__cta { background: var(--x26-grad-cyan) !important; }

/* header menu: the "Offers" item gets the main site's amber dot */
.xb-nav__link[href*="/offers/"]::before, .xb-drawer a[href*="/offers/"]::before {
	content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f5b400;
	margin-right: 7px; vertical-align: middle; box-shadow: 0 0 8px rgba(245, 180, 0, 0.8);
}

/* blog home hero: the dark band of the main site */
.xb-hero {
	position: relative;
	overflow: hidden;
	color: #e8ecff;
	background:
		radial-gradient(900px 420px at 88% -10%, rgba(91, 58, 242, 0.38), transparent 62%),
		radial-gradient(760px 380px at -5% 0%, rgba(38, 126, 246, 0.32), transparent 60%),
		linear-gradient(180deg, var(--x26-ink) 0%, var(--x26-navy) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.xb-hero::before {            /* faint grid, as on the main site's hero */
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background-image: linear-gradient(rgba(120, 170, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 255, 0.07) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.xb-hero__inner { position: relative; }
.xb-hero .xb-eyebrow { color: #7fb2ff; background: rgba(38, 126, 246, 0.12); border: 1px solid rgba(38, 126, 246, 0.35); border-radius: 999px; padding: 0.3rem 0.75rem; }
.xb-hero .xb-eyebrow__dot { background: var(--x26-cyan); box-shadow: 0 0 8px var(--x26-cyan); }
.xb-hero__title { color: #fff; }
.xb-hero__lede { color: var(--x26-soft); }
.xb-hero__hint { color: #9aa6c4; }
.xb-hero .xb-chip { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #dbe3ff; border-radius: 999px; }
.xb-hero .xb-chip:hover { border-color: rgba(127, 178, 255, 0.6); color: #fff; }
.xb-hero__offer { color: var(--x26-soft); }
.xb-hero__offer a { color: #7fb2ff; text-decoration-color: rgba(127, 178, 255, 0.5); }
.xb-hero .xb-searchform { background: #fff; border: 0; border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); overflow: hidden; }
.xb-hero .xb-searchform .xb-btn--primary { border-radius: 10px !important; margin: 4px; }

/* plan boxes: white cards with a gradient edge, like the main site's plan rows */
.xseo-plan {
	border: 1px solid #e3e8f7 !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 14px 34px -22px rgba(14, 18, 62, 0.45);
	position: relative;
	overflow: hidden;
}
.xseo-plan::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--x26-grad); }
.xseo-plan__amount { font-family: 'Inter', system-ui, sans-serif; font-weight: 800; color: var(--x26-navy); }

/* price tables */
.xseo-pt table { border-radius: 14px; overflow: hidden; }
.xseo-pt thead th { background: var(--x26-navy) !important; color: #fff !important; }

@media (max-width: 640px) {
	.xb-hero::before { background-size: 32px 32px; }
}