/* ============================================================
 * dubaitopupdesk.org — main.css
 * style pack : arabic-modern + bold-color-block
 * class prefix: xk-  (seed 8K97ROK85A)
 * ============================================================ */

/* ================== TOKENS ================== */
:root{
	--xk-ink:#14102a;
	--xk-indigo:#1e1a36;
	--xk-indigo-2:#2a2447;
	--xk-crimson:#cf2b3d;
	--xk-crimson-2:#b52535;
	--xk-gold:#d0a955;
	--xk-teal:#0e6f65;
	--xk-paper:#efeff4;
	--xk-paper-2:#e4e3ea;
	--xk-ivory:#fbfaf7;
	--xk-line:#161226;

	--xk-ff-d:"Space Grotesk","Segoe UI",system-ui,sans-serif;
	--xk-ff-t:"Inter","Segoe UI",system-ui,sans-serif;
	--xk-ff-a:"Cairo","Segoe UI",system-ui,sans-serif;
	--xk-ff-m:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
	--xk-ff-s:"Iowan Old Style", Georgia, "Times New Roman", serif;

	--xk-r-0:0;
	--xk-r-pill:999px;

	--xk-bw:2px;
	--xk-bw-2:3px;

	--xk-shd-n1: 6px 6px 0 var(--xk-ink);
	--xk-shd-n2: 10px 10px 0 var(--xk-ink);
	--xk-shd-soft: 0 2px 0 rgba(20,16,42,.08), 0 14px 34px -20px rgba(20,16,42,.35);

	--xk-t-1: 180ms cubic-bezier(.2,.7,.2,1);
	--xk-t-2: 320ms cubic-bezier(.2,.7,.2,1);

	--xk-wrap:min(1180px, calc(100% - 40px));
	--xk-wrap-narrow:min(880px, calc(100% - 40px));
}

/* ================== RESET ================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
	margin:0;
	background:var(--xk-paper);
	color:var(--xk-ink);
	font-family:var(--xk-ff-t);
	font-size:16px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:hidden;
}
body.xk-noscroll{overflow:hidden}

img,svg{max-width:100%;display:block}
a{color:var(--xk-crimson);text-decoration:none}
a:hover{color:var(--xk-crimson-2)}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--xk-ff-d);color:var(--xk-indigo);margin:0 0 .35em;letter-spacing:-.01em;line-height:1.15}
h1{font-weight:900;font-size:clamp(2.3rem,5.5vw,4.2rem)}
h2{font-weight:900;font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem)}
h4{font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em}
p{margin:0 0 1em;max-width:75ch}
p.xk-lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:#2a2549}

::selection{background:var(--xk-crimson);color:#fff}

/* thin-black contrast helper */
.xk-thin{font-weight:200;font-style:italic;color:var(--xk-crimson);font-family:var(--xk-ff-d)}

/* wavy underline links inside prose */
.xk-prose a{text-decoration:underline wavy var(--xk-crimson);text-underline-offset:4px;text-decoration-thickness:1.5px}

/* focus */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
	outline:3px solid var(--xk-gold);
	outline-offset:2px;
}

/* skip link */
.xk-skip{position:absolute;left:-999px;top:0;background:var(--xk-indigo);color:#fff;padding:12px 16px;z-index:100}
.xk-skip:focus{left:12px;top:12px}

/* ================== LAYOUT HELPERS ================== */
.xk-wrap{width:var(--xk-wrap);margin-inline:auto}
.xk-wrap-n{width:var(--xk-wrap-narrow);margin-inline:auto}
.xk-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.xk-grid{display:grid;gap:24px}
.xk-mt-2{margin-top:8px}.xk-mt-3{margin-top:12px}.xk-mt-4{margin-top:16px}.xk-mt-6{margin-top:24px}.xk-mt-8{margin-top:32px}
.xk-tc{text-align:center}
.xk-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.95em;letter-spacing:.02em}

/* ================== ANNOUNCEMENT (announce=false, kept as SR link only) ================== */
.xk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ================== HEADER (split_logo_in_middle + sticky-hide-on-down) ================== */
.xk-hdr-wrap{position:sticky;top:0;z-index:60;background:transparent;transition:transform var(--xk-t-2), background var(--xk-t-1)}
.xk-hdr-wrap.xk-hdr-hide{transform:translateY(-100%)}
.xk-hdr-wrap.xk-hdr-solid{background:var(--xk-ivory);border-bottom:var(--xk-bw) solid var(--xk-indigo)}

.xk-hdr{
	width:var(--xk-wrap);margin-inline:auto;
	display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
	padding:14px 0;
}
.xk-nav-l,.xk-nav-r{display:flex;align-items:center;gap:6px}
.xk-nav-r{justify-content:flex-end}
.xk-nav-l a, .xk-nav-r a{
	color:var(--xk-indigo);font-weight:600;font-size:.95rem;
	padding:8px 12px;border:var(--xk-bw) solid transparent;
	transition:var(--xk-t-1);
}
.xk-nav-l a:hover, .xk-nav-r a:hover{border-color:var(--xk-indigo);color:var(--xk-indigo)}
.xk-nav-l a[aria-current="page"], .xk-nav-r a[aria-current="page"]{border-color:var(--xk-crimson);color:var(--xk-crimson)}

.xk-brand{
	display:flex;align-items:center;gap:10px;
	color:var(--xk-indigo);text-decoration:none;
}
.xk-brand svg{width:44px;height:44px}
.xk-brand-word{font-family:var(--xk-ff-d);font-weight:900;font-size:1.1rem;letter-spacing:-.02em}
.xk-brand-word em{font-style:normal;font-weight:200;color:var(--xk-crimson);font-family:var(--xk-ff-d)}

.xk-hburg{
	display:none;
	width:44px;height:44px;background:transparent;border:var(--xk-bw) solid var(--xk-indigo);
	cursor:pointer;
}
.xk-hburg svg{width:22px;height:22px;margin:auto}

.xk-lang{
	display:inline-flex;align-items:center;gap:4px;
	border:var(--xk-bw) solid var(--xk-indigo);
	padding:6px 10px;background:transparent;color:var(--xk-indigo);
	font-family:var(--xk-ff-d);font-weight:700;letter-spacing:.02em;font-size:.85rem;
	cursor:pointer;position:relative;
}
.xk-lang > summary{list-style:none;cursor:pointer}
.xk-lang > summary::-webkit-details-marker{display:none}
.xk-lang[open]{background:var(--xk-indigo);color:var(--xk-ivory)}
.xk-lang-menu{
	position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:180px;
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	display:flex;flex-direction:column;padding:6px;z-index:20;
	box-shadow:var(--xk-shd-n1);
}
.xk-lang-menu a{padding:8px 10px;color:var(--xk-indigo);font-weight:600}
.xk-lang-menu a[aria-current="true"]{background:var(--xk-crimson);color:#fff}

/* ================== MOBILE DRAWER (CSS-only) ================== */
.xk-drawer-back{
	position:fixed;inset:0;background:rgba(20,16,42,.55);
	visibility:hidden;opacity:0;transition:opacity var(--xk-t-1), visibility 0s linear var(--xk-t-1);
	z-index:80;
}
.xk-drawer{
	position:fixed;top:0;inset-inline-end:0;height:100dvh;width:min(360px,86vw);
	background:var(--xk-ivory);border-inline-start:var(--xk-bw-2) solid var(--xk-indigo);
	transform:translateX(100%);
	transition:transform var(--xk-t-2), visibility 0s linear var(--xk-t-2);
	visibility:hidden;z-index:90;padding:24px 22px;overflow-y:auto;
	display:flex;flex-direction:column;gap:8px;
}
html[dir="rtl"] .xk-drawer{transform:translateX(-100%);border-inline-start:none;border-inline-end:var(--xk-bw-2) solid var(--xk-indigo)}
.xk-drawer nav{display:flex;flex-direction:column;gap:2px;margin-top:18px}
.xk-drawer nav a{
	padding:12px 8px;color:var(--xk-indigo);font-family:var(--xk-ff-d);font-weight:700;
	border-bottom:1px dashed rgba(20,16,42,.15);
}
.xk-drawer nav a:hover{color:var(--xk-crimson)}
.xk-drawer-close{
	align-self:flex-end;background:transparent;border:var(--xk-bw) solid var(--xk-indigo);
	padding:6px 12px;cursor:pointer;font-weight:700;font-family:var(--xk-ff-d);
}
body.xk-drawer-on .xk-drawer-back{visibility:visible;opacity:1;transition-delay:0s}
body.xk-drawer-on .xk-drawer{transform:translateX(0);visibility:visible;transition-delay:0s}

/* ================== HERO (dual CTA · no image · split colour) ================== */
.xk-hero{
	position:relative;overflow:hidden;
	background:var(--xk-paper);
	padding:56px 0 96px;
	border-bottom:var(--xk-bw-2) solid var(--xk-indigo);
}
.xk-hero::before{
	content:"";position:absolute;inset:0;
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"><g fill="none" stroke="%231e1a36" stroke-opacity="0.06" stroke-width="1"><path d="M40 4 L76 40 L40 76 L4 40 Z"/><path d="M40 20 L60 40 L40 60 L20 40 Z"/><circle cx="40" cy="40" r="3"/></g></svg>');
	background-size:80px 80px;pointer-events:none;z-index:0;
}
.xk-hero::after{
	content:"";position:absolute;top:0;bottom:0;inset-inline-end:0;width:38%;
	background:linear-gradient(180deg,var(--xk-indigo),var(--xk-indigo-2));
	z-index:0;
	clip-path:polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width:900px){.xk-hero::after{display:none}}

.xk-hero > .xk-wrap{position:relative;z-index:2}
.xk-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end}
@media (max-width:900px){.xk-hero-grid{grid-template-columns:1fr;gap:32px}}

.xk-eyebrow{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--xk-crimson);color:#fff;
	padding:6px 12px;font-family:var(--xk-ff-d);font-weight:700;font-size:.8rem;
	letter-spacing:.14em;text-transform:uppercase;
	clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
	padding-inline-end:22px;
}
.xk-eyebrow--ink{background:var(--xk-indigo);color:var(--xk-ivory)}
.xk-eyebrow--gold{background:var(--xk-gold);color:var(--xk-indigo)}

.xk-hero-copy h1{margin-top:14px}
.xk-hero-copy h1 em{font-style:italic;font-weight:200;color:var(--xk-crimson);font-family:var(--xk-ff-d)}
.xk-hero-sub{font-size:clamp(1.05rem,1.3vw,1.15rem);margin-top:12px;max-width:60ch}

.xk-kpi{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0}
.xk-kpi li{
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	padding:8px 12px;font-family:var(--xk-ff-d);font-size:.9rem;
	box-shadow:var(--xk-shd-n1);
}
.xk-kpi b{color:var(--xk-crimson);font-weight:900}

.xk-hero-need{
	background:var(--xk-ivory);border:var(--xk-bw-2) solid var(--xk-ink);
	padding:26px;box-shadow:var(--xk-shd-n2);
	position:relative;
}
.xk-hero-need h2{font-size:clamp(1.35rem,2vw,1.7rem);margin-top:12px;color:var(--xk-indigo)}
.xk-need{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:14px}
.xk-need > li{display:flex;gap:12px;align-items:flex-start}
.xk-need b.n{
	flex:0 0 34px;height:34px;background:var(--xk-crimson);color:#fff;
	display:grid;place-items:center;font-family:var(--xk-ff-d);font-weight:900;font-size:.95rem;
}
.xk-need small{display:block;color:#48416c;font-size:.9rem;margin-top:2px}

/* trust strip (star rating) */
.xk-trust{
	margin-top:22px;display:inline-flex;align-items:center;gap:10px;
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);padding:8px 14px;
	box-shadow:var(--xk-shd-n1);
}
.xk-trust svg{width:16px;height:16px;fill:var(--xk-gold)}
.xk-trust small{color:var(--xk-indigo);font-family:var(--xk-ff-d);font-weight:700;font-size:.85rem}

/* ================== BUTTONS ================== */
.xk-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:10px;
	padding:14px 22px;min-height:48px;
	font-family:var(--xk-ff-d);font-weight:800;font-size:.95rem;letter-spacing:.02em;
	border-radius:var(--xk-r-pill);
	border:var(--xk-bw-2) solid var(--xk-ink);
	background:var(--xk-ivory);color:var(--xk-ink);
	cursor:pointer;text-decoration:none;
	box-shadow:var(--xk-shd-n1);
	transition:transform var(--xk-t-1), box-shadow var(--xk-t-1), background var(--xk-t-1);
}
.xk-btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--xk-ink)}
.xk-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--xk-ink)}
.xk-btn--pri{background:var(--xk-crimson);color:#fff;border-color:var(--xk-ink)}
.xk-btn--pri:hover{background:var(--xk-crimson-2);color:#fff}
.xk-btn--ink{background:var(--xk-indigo);color:var(--xk-ivory);border-color:var(--xk-ink)}
.xk-btn--ink:hover{background:var(--xk-indigo-2);color:var(--xk-ivory)}
.xk-btn--outline{background:transparent;color:var(--xk-indigo);border-color:var(--xk-indigo);box-shadow:none}
.xk-btn--outline:hover{background:var(--xk-indigo);color:var(--xk-ivory);box-shadow:var(--xk-shd-n1)}
.xk-btn--full{width:100%}
.xk-btn--sm{padding:10px 16px;min-height:40px;font-size:.85rem;border-width:var(--xk-bw)}
.xk-btn--icon{padding:12px;min-height:44px;width:44px}

/* WhatsApp button pill */
.xk-wa{
	display:inline-flex;align-items:center;gap:10px;
	background:#128c3c;color:#fff;padding:12px 20px;border-radius:var(--xk-r-pill);
	border:var(--xk-bw-2) solid var(--xk-ink);box-shadow:var(--xk-shd-n1);
	font-family:var(--xk-ff-d);font-weight:800;
}
.xk-wa:hover{color:#fff;background:#0f7b34;transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--xk-ink)}
.xk-wa svg{width:20px;height:20px;fill:currentColor}

/* Apple-pay style block (facet apple_pay_btn=true) */
.xk-apay{
	display:inline-flex;align-items:center;gap:8px;background:#000;color:#fff;
	padding:12px 20px;border-radius:var(--xk-r-pill);
	border:var(--xk-bw-2) solid var(--xk-ink);box-shadow:var(--xk-shd-n1);
	font-family:var(--xk-ff-d);font-weight:800;
}
.xk-apay svg{width:22px;height:22px;fill:currentColor}

/* ================== SECTION ================== */
.xk-sec{padding:80px 0;position:relative}
.xk-sec--ink{background:var(--xk-indigo);color:var(--xk-ivory)}
.xk-sec--ink h1,.xk-sec--ink h2,.xk-sec--ink h3,.xk-sec--ink h4{color:var(--xk-ivory)}
.xk-sec--ink p{color:#d6d3e6}
.xk-sec--paper2{background:var(--xk-paper-2)}
.xk-sec--gold{background:var(--xk-gold);color:var(--xk-indigo)}
.xk-sec--gold h2,.xk-sec--gold h3{color:var(--xk-indigo)}
.xk-sec-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}
.xk-sec-h{margin-top:8px}

/* wave divider between sections */
.xk-wave{display:block;width:100%;height:32px;color:var(--xk-indigo)}
.xk-wave svg{width:100%;height:100%}

/* ribbon strip (accent_pattern: ribbon_strip) */
.xk-ribbon{
	position:relative;display:inline-block;padding:8px 18px;background:var(--xk-crimson);color:#fff;
	font-family:var(--xk-ff-d);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
}
.xk-ribbon::before,.xk-ribbon::after{
	content:"";position:absolute;top:0;bottom:0;width:10px;background:var(--xk-crimson);
}
.xk-ribbon::before{left:-10px;clip-path:polygon(100% 0, 0 50%, 100% 100%)}
.xk-ribbon::after{right:-10px;clip-path:polygon(0 0, 100% 50%, 0 100%)}

/* ================== CARDS (postage_stamp) ================== */
.xk-card{
	background:var(--xk-ivory);color:var(--xk-ink);
	border:var(--xk-bw) solid var(--xk-indigo);
	padding:24px;
	box-shadow:var(--xk-shd-soft);
	position:relative;
}
.xk-card--stamp{
	--dot:8px;
	background:
		radial-gradient(circle at var(--dot) var(--dot), transparent 4px, var(--xk-ivory) 4.5px) 0 0 / 16px 16px,
		var(--xk-ivory);
	padding:28px 26px;
}
@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)){
	.xk-card--stamp{
		-webkit-mask:
			radial-gradient(circle at 0 50%, transparent 6px, #000 6.5px) -6px 0/12px 12px repeat-y,
			radial-gradient(circle at 100% 50%, transparent 6px, #000 6.5px) calc(100% + 6px) 0/12px 12px repeat-y,
			linear-gradient(#000,#000);
		-webkit-mask-composite: source-in;
		        mask-composite: intersect;
		border-inline:none;
	}
}
.xk-card--ink{background:var(--xk-indigo);color:var(--xk-ivory);border-color:var(--xk-ink)}
.xk-card--ink h3,.xk-card--ink h4{color:var(--xk-ivory)}
.xk-card--gold{background:var(--xk-gold);color:var(--xk-indigo);border-color:var(--xk-ink)}
.xk-card--gold h3,.xk-card--gold h4{color:var(--xk-indigo)}

/* ================== GRID PATTERNS ================== */
.xk-3col{grid-template-columns:repeat(3,1fr)}
.xk-4col{grid-template-columns:repeat(4,1fr)}
.xk-2col{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.xk-3col,.xk-4col,.xk-2col{grid-template-columns:1fr}}

/* newspaper grid for coverage/glossary */
.xk-newsp{columns:3 220px;column-gap:32px;column-rule:1px dashed rgba(20,16,42,.25)}
.xk-newsp > *{break-inside:avoid;margin:0 0 12px}

/* ================== STEPS ================== */
.xk-steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px;grid-template-columns:1fr;counter-reset:xk-step}
@media (min-width:760px){
	.xk-steps--3{grid-template-columns:repeat(3,1fr)}
	.xk-steps--2{grid-template-columns:repeat(2,1fr)}
}
.xk-step{
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	padding:22px 24px 22px 78px;position:relative;box-shadow:var(--xk-shd-n1);
	counter-increment:xk-step;
	min-width:0;
}
.xk-step h4{margin:0 0 6px}
.xk-step p{margin:0}
.xk-step::before{
	content:counter(xk-step, upper-roman);
	position:absolute;left:16px;top:20px;
	width:44px;height:44px;background:var(--xk-crimson);color:#fff;
	display:grid;place-items:center;font-family:var(--xk-ff-d);font-weight:900;font-size:1.05rem;
}
@media (max-width:520px){
	.xk-step{padding:18px 18px 18px 66px}
	.xk-step::before{width:38px;height:38px;left:14px;top:16px;font-size:.95rem}
}
html[dir="rtl"] .xk-step{padding:22px 78px 22px 24px}
html[dir="rtl"] .xk-step::before{left:auto;right:16px}
@media (max-width:520px){
	html[dir="rtl"] .xk-step{padding:18px 66px 18px 18px}
	html[dir="rtl"] .xk-step::before{right:14px}
}

/* ================== FORMS (recharge) ================== */
.xk-form{background:var(--xk-ivory);border:var(--xk-bw-2) solid var(--xk-ink);padding:32px;box-shadow:var(--xk-shd-n2)}
.xk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.xk-field label{font-family:var(--xk-ff-d);font-weight:700;color:var(--xk-indigo);font-size:.95rem}
.xk-field input,.xk-field select,.xk-field textarea{
	width:100%;padding:12px 14px;border:var(--xk-bw) solid var(--xk-indigo);
	background:#fff;color:var(--xk-ink);
	font:inherit;font-size:1rem;border-radius:0;transition:var(--xk-t-1);
}
.xk-field input:focus,.xk-field select:focus,.xk-field textarea:focus{border-color:var(--xk-crimson);outline:none;box-shadow:4px 4px 0 var(--xk-ink)}
.xk-field .xk-hint{color:#48416c;font-size:.85rem;margin-top:2px}
.xk-field .xk-err{color:var(--xk-crimson-2);font-size:.85rem;font-weight:700;display:none}
.xk-field.xk-invalid .xk-err{display:block}
.xk-field.xk-invalid input,.xk-field.xk-invalid select{border-color:var(--xk-crimson)}

/* amount chips */
.xk-amounts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:520px){.xk-amounts{grid-template-columns:repeat(2,1fr)}}
.xk-amount{
	display:block;position:relative;
}
.xk-amount input{position:absolute;opacity:0;pointer-events:none}
.xk-amount span{
	display:flex;align-items:center;justify-content:center;
	min-height:56px;padding:8px 12px;
	border:var(--xk-bw) solid var(--xk-indigo);background:#fff;color:var(--xk-indigo);
	font-family:var(--xk-ff-d);font-weight:800;font-size:1.05rem;letter-spacing:.02em;
	cursor:pointer;transition:var(--xk-t-1);
}
.xk-amount span::after{content:" AED";font-weight:500;font-size:.8em;color:#48416c;margin-inline-start:6px}
.xk-amount:hover span{background:var(--xk-paper-2)}
.xk-amount.is-on span,
.xk-amount:has(input:checked) span{
	background:var(--xk-crimson);color:#fff;border-color:var(--xk-ink);box-shadow:4px 4px 0 var(--xk-ink);
	transform:translate(-2px,-2px);
}
.xk-amount.is-on span::after,
.xk-amount:has(input:checked) span::after{color:rgba(255,255,255,.85)}

.xk-custom{
	margin-top:12px;display:flex;align-items:stretch;
	border:var(--xk-bw) solid var(--xk-indigo);
}
.xk-custom label{
	padding:14px 16px;background:var(--xk-indigo);color:var(--xk-ivory);
	font-family:var(--xk-ff-d);font-weight:800;letter-spacing:.02em;
}
.xk-custom input{border:0;padding:14px;flex:1;font:inherit;font-size:1rem;outline:none;background:#fff}
.xk-custom small{padding:14px 16px;color:#48416c;font-size:.9rem;background:var(--xk-paper-2)}

/* honeypot */
.xk-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}

/* ================== FAQ ================== */
.xk-faq{display:grid;gap:12px}
.xk-faq details{
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	padding:0 22px;box-shadow:var(--xk-shd-n1);
}
.xk-faq summary{
	list-style:none;cursor:pointer;padding:18px 0;
	font-family:var(--xk-ff-d);font-weight:800;color:var(--xk-indigo);
	display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.xk-faq summary::-webkit-details-marker{display:none}
.xk-faq summary::after{
	content:"+";font-family:var(--xk-ff-d);font-size:1.6rem;font-weight:200;color:var(--xk-crimson);
	transition:var(--xk-t-1);
}
.xk-faq details[open] summary::after{transform:rotate(45deg)}
.xk-faq details > div{padding:0 0 20px;color:#2a2549}

/* ================== FOOTER ================== */
.xk-ftr{background:var(--xk-indigo);color:var(--xk-ivory);border-top:var(--xk-bw-2) solid var(--xk-ink);padding:64px 0 24px;position:relative}
.xk-ftr::before{
	content:"";position:absolute;top:0;left:0;right:0;height:6px;
	background:repeating-linear-gradient(90deg, var(--xk-crimson) 0 16px, var(--xk-gold) 16px 32px, var(--xk-teal) 32px 48px);
}
.xk-ftr h4{color:var(--xk-ivory);font-family:var(--xk-ff-d);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin:0 0 14px}
.xk-ftr a{color:var(--xk-ivory);text-decoration:none}
.xk-ftr a:hover{color:var(--xk-gold)}
.xk-ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;align-items:flex-start}
@media (max-width:860px){.xk-ftr-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (max-width:520px){.xk-ftr-grid{grid-template-columns:1fr}}
.xk-ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.xk-ftr-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.xk-ftr-brand svg{width:40px;height:40px}
.xk-ftr-brand b{font-family:var(--xk-ff-d);font-weight:900;font-size:1.05rem}
.xk-ftr-mono{font-family:var(--xk-ff-d);font-size:.85rem;color:#c9c5df;line-height:1.9}
.xk-ftr-bot{
	margin-top:36px;padding-top:20px;border-top:1px dashed rgba(255,255,255,.18);
	display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
	font-size:.82rem;color:#c9c5df;
}
.xk-flag{display:inline-flex;gap:6px;align-items:center}
.xk-flag svg{width:22px;height:16px}
.xk-social{display:flex;gap:10px;flex-wrap:wrap}
.xk-social a{
	display:inline-flex;align-items:center;gap:8px;
	border:1px solid rgba(255,255,255,.22);padding:8px 12px;
	font-size:.85rem;font-family:var(--xk-ff-d);font-weight:700;
}
.xk-social a:hover{background:rgba(255,255,255,.08)}
.xk-visitors{display:inline-flex;gap:6px;font-family:var(--xk-ff-d);font-size:.8rem;color:#c9c5df}
.xk-visitors b{color:var(--xk-gold)}

.xk-ftr-news{display:flex;gap:8px;margin-top:6px}
.xk-ftr-news input{
	flex:1;padding:10px 12px;background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;
}
.xk-ftr-news input::placeholder{color:rgba(255,255,255,.55)}
.xk-ftr-news button{
	padding:10px 14px;background:var(--xk-crimson);color:#fff;border:1px solid var(--xk-crimson);
	font-family:var(--xk-ff-d);font-weight:800;cursor:pointer;border-radius:var(--xk-r-pill);
}
.xk-ftr-news button:hover{background:var(--xk-crimson-2);border-color:var(--xk-crimson-2)}

.xk-cur{display:inline-flex;gap:6px;align-items:center;color:#c9c5df;font-family:var(--xk-ff-d);font-size:.8rem}

/* ================== MODAL (thanks / redirect) ================== */
.xk-mod-back{
	position:fixed;inset:0;background:rgba(20,16,42,.7);
	visibility:hidden;opacity:0;transition:opacity var(--xk-t-1), visibility 0s linear var(--xk-t-1);
	z-index:110;display:grid;place-items:center;
}
.xk-mod-back.on{visibility:visible;opacity:1;transition-delay:0s}
.xk-mod{
	background:var(--xk-ivory);border:var(--xk-bw-2) solid var(--xk-ink);
	max-width:520px;width:calc(100% - 40px);padding:32px;
	box-shadow:12px 12px 0 var(--xk-crimson);
	transform:translateY(20px);transition:transform var(--xk-t-2);
	position:relative;
}
.xk-mod-back.on .xk-mod{transform:translateY(0)}
.xk-mod h3{margin-top:0}
.xk-mod-close{
	position:absolute;top:12px;inset-inline-end:12px;background:transparent;
	border:var(--xk-bw) solid var(--xk-indigo);width:36px;height:36px;cursor:pointer;
	display:grid;place-items:center;font-family:var(--xk-ff-d);font-weight:900;
}

/* ================== SPINNER ================== */
.xk-spin{
	display:inline-block;width:26px;height:26px;
	border:3px solid rgba(20,16,42,.15);border-top-color:var(--xk-crimson);
	border-radius:50%;animation:xk-rot 900ms linear infinite;
}
@keyframes xk-rot{to{transform:rotate(360deg)}}

/* ================== TESTIMONIALS ================== */
.xk-quote{
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	padding:22px;position:relative;box-shadow:var(--xk-shd-soft);
}
.xk-quote::before{
	content:"";position:absolute;top:-14px;inset-inline-start:20px;height:22px;width:60px;
	background:rgba(208,169,85,.55);border:1px dashed rgba(20,16,42,.3);
	transform:rotate(-4deg);
}
.xk-quote p{margin:0;color:#2a2549;font-size:.98rem}
.xk-quote footer{margin-top:14px;font-family:var(--xk-ff-d);font-weight:800;color:var(--xk-indigo);font-size:.9rem}
.xk-quote-city{color:#48416c;font-weight:500}

/* ================== BREADCRUMBS ================== */
.xk-bc{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 22px}
.xk-bc li{
	background:var(--xk-ivory);border:1px solid var(--xk-indigo);
	padding:4px 10px;font-family:var(--xk-ff-d);font-size:.78rem;font-weight:700;
}
.xk-bc li[aria-current="page"]{background:var(--xk-crimson);color:#fff;border-color:var(--xk-ink)}
.xk-bc a{color:var(--xk-indigo)}

/* ================== COUNTER STATS ================== */
.xk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:24px}
@media (max-width:800px){.xk-stats{grid-template-columns:repeat(2,1fr)}}
.xk-stat{
	background:var(--xk-ivory);border:var(--xk-bw) solid var(--xk-indigo);
	padding:20px;box-shadow:var(--xk-shd-n1);
}
.xk-stat b{display:block;font-family:var(--xk-ff-d);font-weight:900;font-size:2.4rem;color:var(--xk-crimson);line-height:1}
.xk-stat span{display:block;margin-top:4px;color:var(--xk-indigo);font-family:var(--xk-ff-d);font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}

/* ================== SHARE (floating sidebar) ================== */
.xk-share{
	position:fixed;top:35%;inset-inline-start:0;z-index:40;
	display:flex;flex-direction:column;gap:4px;
	background:var(--xk-indigo);color:#fff;padding:8px 6px;
}
.xk-share a{
	color:#fff;width:36px;height:36px;display:grid;place-items:center;
	border:1px solid rgba(255,255,255,.18);
}
.xk-share a:hover{background:var(--xk-crimson)}
@media (max-width:900px){.xk-share{display:none}}

/* ================== SMALL UI ================== */
.xk-tag{
	display:inline-block;background:var(--xk-paper-2);color:var(--xk-indigo);
	border:1px dashed var(--xk-indigo);padding:2px 10px;font-size:.75rem;font-family:var(--xk-ff-d);font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;
}
.xk-callout{
	background:var(--xk-gold);color:var(--xk-indigo);
	border:var(--xk-bw) solid var(--xk-ink);padding:22px 24px;box-shadow:var(--xk-shd-n1);
}
.xk-callout h4{margin-top:0}

.xk-hr{border:0;height:0;border-top:2px dashed rgba(20,16,42,.2);margin:32px 0}

/* ================== NOTES FROM THE COUNTER (long-form) ================== */
.xk-notes{
	display:grid;grid-template-columns:.4fr .6fr;gap:56px;align-items:start;
	color:#e9e6f5;
}
@media (max-width:900px){.xk-notes{grid-template-columns:1fr;gap:28px}}
.xk-notes-side{position:sticky;top:96px}
@media (max-width:900px){.xk-notes-side{position:static}}
.xk-notes-h{
	font-family:var(--xk-ff-d);font-weight:900;font-size:clamp(2rem,3.6vw,3rem);
	line-height:1.05;margin:14px 0 12px;color:#fbfaf7;letter-spacing:-.01em;
}
.xk-notes-h em{font-style:italic;font-weight:200;color:var(--xk-gold);font-family:var(--xk-ff-d)}
.xk-notes-meta{
	font-family:var(--xk-ff-m);font-size:.85rem;color:#a9a3c8;
	border-top:2px solid rgba(208,169,85,.3);padding-top:12px;margin:0;
	text-transform:uppercase;letter-spacing:.14em;
}
.xk-notes-body{
	font-family:var(--xk-ff-s);font-size:1.02rem;line-height:1.75;
	column-count:1;
}
.xk-notes-body p{margin:0 0 18px;color:#dcd7ec}
.xk-notes-body p:last-child{margin-bottom:0}
.xk-drop b{
	float:inline-start;font-family:var(--xk-ff-d);font-weight:900;
	font-size:4.2rem;line-height:.85;padding:6px 12px 2px 0;
	color:var(--xk-gold);
}
html[dir="rtl"] .xk-drop b{padding:6px 0 2px 12px}

/* ================== RESPONSIVE HEADER ================== */
@media (max-width:900px){
	.xk-nav-l a, .xk-nav-r > .xk-lang{display:none}
	.xk-hdr{grid-template-columns:auto 1fr auto}
	.xk-nav-r{gap:8px}
	.xk-nav-r > a.xk-btn{display:none}
	.xk-hburg{display:inline-flex}
}

/* ================== RESPONSIVE PADDING ================== */
@media (max-width:640px){
	.xk-sec{padding:44px 0}
	.xk-hero{padding:28px 0 48px}
	.xk-callout{padding:24px}
	.xk-hero-need{padding:20px}
}
@media (max-width:420px){
	.xk-sec{padding:36px 0}
}

/* ================== MOTION ================== */
@media (prefers-reduced-motion: reduce){
	*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}
}

/* reveal on scroll */
.xk-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s, transform .5s}
.xk-reveal.on{opacity:1;transform:translateY(0)}

/* Toast */
.xk-toast{
	position:fixed;bottom:20px;inset-inline-end:20px;z-index:120;
	background:var(--xk-indigo);color:#fff;padding:12px 16px;border:var(--xk-bw) solid var(--xk-ink);
	box-shadow:var(--xk-shd-n1);font-family:var(--xk-ff-d);font-weight:700;font-size:.9rem;
	transform:translateY(20px);opacity:0;transition:var(--xk-t-2);pointer-events:none;
}
.xk-toast.on{transform:translateY(0);opacity:1;pointer-events:auto}

/* prose block for legal pages */
.xk-prose{max-width:75ch}
.xk-prose h2{margin-top:2em}
.xk-prose h3{margin-top:1.5em}
.xk-prose p, .xk-prose li{color:#2a2549}
.xk-prose ul, .xk-prose ol{padding-inline-start:1.4em}
.xk-prose ol{list-style:upper-roman}
.xk-prose blockquote{
	margin:24px 0;padding:16px 22px;background:var(--xk-ivory);
	border-inline-start:4px solid var(--xk-crimson);
	position:relative;
}
.xk-prose blockquote::before{
	content:"";position:absolute;top:-10px;inset-inline-start:30px;height:18px;width:60px;
	background:rgba(208,169,85,.55);transform:rotate(-3deg);
}

/* ================== INTRO ANIMATION (glitch — very subtle) ================== */
@keyframes xk-glitch{
	0%,100%{clip-path:inset(0);transform:none}
	20%{clip-path:inset(8% 0 82% 0);transform:translate(-1px,0)}
	40%{clip-path:inset(60% 0 22% 0);transform:translate(1px,0)}
	60%{clip-path:inset(0)}
}
.xk-hero-copy h1{position:relative}
.xk-hero-copy h1::before{
	content:attr(data-glitch);
	position:absolute;inset:0;color:var(--xk-crimson);opacity:.6;mix-blend-mode:multiply;
	pointer-events:none;animation:xk-glitch 3s steps(2, jump-none) 1;
}
@media (prefers-reduced-motion: reduce){.xk-hero-copy h1::before{display:none}}

/* ================== PRINT ================== */
@media print{
	.xk-hdr-wrap,.xk-drawer,.xk-drawer-back,.xk-share,.xk-ftr-news{display:none}
	body{background:#fff;color:#000}
}
