/* Company pages (About, Help, Contact): rich, motion-led layouts built only from brand tokens. */
:root { --cx-ink: var(--ih-color-brand-ink); --cx-paper: var(--ih-color-brand-paper); --cx-or: var(--ih-color-brand-orange);
  --cx-line: color-mix(in srgb, var(--cx-paper) 14%, transparent); --cx-dim: color-mix(in srgb, var(--cx-paper) 68%, transparent); }
main { overflow-x: clip; }
.cx-sec { padding-block: clamp(56px, 8vw, 104px); position: relative; }
.cx-sec--tint { background: var(--ih-color-orange-50); }
.cx-sec--alt { background: var(--ih-surface-alt); }
.cx-head { display: grid; gap: 12px; max-inline-size: 760px; margin-block-end: clamp(28px, 4vw, 48px); }
.cx-head h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
:lang(ar) .cx-head h2, :lang(ar) .cx-hero h1 { letter-spacing: 0; line-height: 1.25; }
.cx-head p { font-size: clamp(16px, 1.5vw, 19px); color: var(--ih-text-muted); }
.cx-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ih-font-size-xs); font-weight: 800; letter-spacing: var(--ih-font-tracking-label); text-transform: uppercase; color: var(--ih-text-accent); }
:lang(ar) .cx-kicker { letter-spacing: 0; text-transform: none; font-size: var(--ih-font-size-sm); }
.cx-kicker::before { content: ""; inline-size: 22px; block-size: 2px; background: currentColor; border-radius: 2px; }

/* ---------- Dark hero ---------- */
.cx-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--cx-paper); background: var(--cx-ink); padding-block: clamp(56px, 8vw, 112px) clamp(64px, 9vw, 120px); }
.cx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(900px 520px at 82% 18%, color-mix(in srgb, var(--cx-or) 34%, transparent), transparent 62%),
              radial-gradient(700px 420px at 8% 110%, color-mix(in srgb, var(--ih-color-orange-700) 30%, transparent), transparent 60%); }
.cx-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--cx-paper) 16%, transparent) 1px, transparent 1.4px); background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 85%); -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%); }
.cx-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 960px) { .cx-hero-grid { grid-template-columns: 1fr; } }
.cx-badge { display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 7px 14px 7px 10px; border-radius: var(--ih-radius-pill); border: 1px solid var(--cx-line); background: color-mix(in srgb, var(--cx-paper) 6%, transparent); font-size: var(--ih-font-size-sm); font-weight: 700; color: var(--cx-paper); backdrop-filter: blur(6px); }
.cx-badge i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--cx-or); box-shadow: 0 0 0 0 var(--cx-or); animation: cx-ping 2.4s ease-out infinite; }
@keyframes cx-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cx-or) 70%, transparent); } 80%, 100% { box-shadow: 0 0 0 10px transparent; } }
.cx-hero h1 { font-size: clamp(40px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.05em; color: var(--cx-paper); }
.cx-hero h1 .l2 { display: block; background: linear-gradient(90deg, var(--ih-color-orange-300), var(--cx-or) 55%, var(--ih-color-orange-400)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-hero .cx-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--cx-dim); max-inline-size: 44ch; }
.cx-copy { display: grid; gap: 22px; align-content: center; }
.cx-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.cx-ctas .btn { min-block-size: 52px; padding-inline: 22px; font-size: var(--ih-font-size-md); }
.btn--ghost-dark { background: transparent; color: var(--cx-paper); border-color: var(--cx-line); }
.btn--ghost-dark:hover { border-color: var(--cx-paper); background: color-mix(in srgb, var(--cx-paper) 8%, transparent); }
.cx-hero-fan { position: absolute; z-index: -1; inset-block-start: -12%; right: -14%; inline-size: min(62vw, 760px); aspect-ratio: 1; opacity: .07; color: var(--cx-paper); animation: bg-fan-turn 140s linear infinite; pointer-events: none; }
.cx-hero-fan ih-hub { --ih-hub-size: 100%; }

/* Word-by-word heading entrance */
.cx-hero h1 .l2 .w { background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx-words .w { display: inline-block; opacity: 0; transform: translateY(.45em); animation: cx-word 700ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes cx-word { to { opacity: 1; transform: none; } }

/* ---------- About: market network scene ---------- */
.net { position: relative; aspect-ratio: 1 / 1; inline-size: 100%; max-inline-size: 540px; justify-self: center; direction: ltr; }
.net svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.net .ring { fill: none; stroke: var(--cx-line); stroke-width: 1; }
.net .ring--dash { stroke: color-mix(in srgb, var(--cx-or) 45%, transparent); stroke-dasharray: 3 9; transform-origin: 250px 250px; animation: bg-fan-turn 70s linear infinite; }
.net .ring--dash2 { animation-duration: 110s; animation-direction: reverse; stroke-dasharray: 1 14; stroke-width: 2; }
.net .link { fill: none; stroke: color-mix(in srgb, var(--cx-or) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 2 8; animation: cx-flow 1.6s linear infinite; }
@keyframes cx-flow { to { stroke-dashoffset: -20; } }
.net .pkt { fill: var(--cx-or); filter: drop-shadow(0 0 6px var(--cx-or)); }
.net-core { position: absolute; inset: 36%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--ih-color-neutral-800), var(--cx-ink)); box-shadow: 0 0 0 1px var(--cx-line), 0 30px 90px -20px color-mix(in srgb, var(--cx-or) 60%, transparent); }
.net-core::before, .net-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--cx-or) 60%, transparent); animation: cx-pulse 3.6s ease-out infinite; }
.net-core::after { animation-delay: 1.8s; }
@keyframes cx-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(2.3); opacity: 0; } }
.net-core ih-hub { --ih-hub-size: 66%; color: var(--cx-paper); }
.node { position: absolute; transform: translate(-50%, -50%); display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: color-mix(in srgb, var(--cx-ink) 70%, var(--ih-color-neutral-800)); border: 1px solid var(--cx-line); box-shadow: 0 20px 40px -22px black; animation: cx-float 6s ease-in-out infinite; white-space: nowrap; }
.node:nth-of-type(2) { animation-delay: -1.5s; } .node:nth-of-type(3) { animation-delay: -3s; } .node:nth-of-type(4) { animation-delay: -4.5s; }
@keyframes cx-float { 50% { translate: 0 -8px; } }
.node .fl { grid-row: span 2; font-size: 26px; line-height: 1; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--cx-paper) 8%, transparent); }
.node b { font-size: var(--ih-font-size-sm); font-weight: 800; color: var(--cx-paper); }
.node small { font-size: 11px; font-weight: 700; color: var(--ih-color-orange-300); }
.node small.st { color: var(--cx-dim); }
@media (max-width: 520px) { .node { padding: 6px 10px 6px 6px; gap: 2px 8px; } .node .fl { inline-size: 30px; block-size: 30px; font-size: 20px; } .node b { font-size: 12px; } }

/* ---------- Service marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--ih-border); background: var(--ih-surface); padding-block: 18px; mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.marquee-track { display: flex; inline-size: max-content; gap: 0; animation: cx-marq 60s linear infinite; }
[dir="rtl"] .marquee-track { animation-name: cx-marq-rtl; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 18px; padding-inline: 9px; font-weight: 800; font-size: clamp(16px, 1.8vw, 22px); letter-spacing: -0.02em; white-space: nowrap; color: var(--ih-text); }
.marquee span::after { content: ""; inline-size: 9px; block-size: 9px; border-radius: 2px; background: var(--cx-or); transform: rotate(45deg); }
@keyframes cx-marq { to { transform: translateX(-50%); } }
@keyframes cx-marq-rtl { to { transform: translateX(50%); } }

/* ---------- Big numbers ---------- */
.nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ih-border); border-radius: 24px; background: var(--ih-surface); overflow: hidden; }
@media (max-width: 860px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nums > div { padding: clamp(22px, 3vw, 36px); display: grid; gap: 8px; align-content: start; border-inline-end: 1px solid var(--ih-border); position: relative; }
.nums > div:last-child { border-inline-end: 0; }
@media (max-width: 860px) { .nums > div:nth-child(2) { border-inline-end: 0; } .nums > div:nth-child(-n+2) { border-block-end: 1px solid var(--ih-border); } }
.nums b { font-size: clamp(48px, 7vw, 88px); line-height: .9; font-weight: 800; letter-spacing: -0.05em; color: var(--ih-text); font-variant-numeric: tabular-nums; }
.nums b em { font-style: normal; color: var(--cx-or); }
.nums > div > span { color: var(--ih-text-muted); font-weight: 600; font-size: var(--ih-font-size-sm); max-inline-size: 22ch; }

/* ---------- Before / after ---------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .ba { grid-template-columns: 1fr; } }
.ba-card { position: relative; border-radius: 26px; padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; align-content: start; overflow: hidden; }
.ba-card h3 { font-size: var(--ih-font-size-2xl); }
.ba-card p { font-weight: 600; }
.ba-card--old { background: var(--ih-surface); border: 1px dashed var(--ih-color-neutral-300); }
.ba-card--old h3, .ba-card--old p { color: var(--ih-text-muted); }
.ba-card--new { background: var(--cx-ink); color: var(--cx-paper); }
.ba-card--new p { color: var(--cx-dim); }
.ba-stage { position: relative; aspect-ratio: 16 / 11; direction: ltr; }
.ba-stage svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.tangle { fill: none; stroke: var(--ih-color-neutral-300); stroke-width: 1.5; stroke-dasharray: 4 5; }
.chip { position: absolute; translate: -50% -50%; padding: 7px 12px; border-radius: var(--ih-radius-pill); font-size: 12.5px; font-weight: 800; white-space: nowrap; }
@media (max-width: 600px) { .chip { font-size: 10.5px; padding: 5px 9px; white-space: normal; max-inline-size: 34%; text-align: center; line-height: 1.25; } }
.ba-card--old .chip { background: var(--ih-surface-alt); color: var(--ih-text-muted); border: 1px solid var(--ih-border); animation: cx-jitter 3.2s ease-in-out infinite; }
.ba-card--old .chip:nth-child(odd) { animation-duration: 2.6s; animation-delay: -1s; }
.ba-card--old .chip .fee { margin-inline-start: 6px; color: var(--ih-danger); }
@keyframes cx-jitter { 25% { transform: translate(2px, -3px) rotate(-2deg); } 50% { transform: translate(-2px, 2px) rotate(1.5deg); } 75% { transform: translate(1px, 3px) rotate(-1deg); } }
.orbit-set { position: absolute; inset-block: 0; left: 50%; translate: -50% 0; aspect-ratio: 1; animation: bg-fan-turn 40s linear infinite; }
.orbit-set .chip { background: color-mix(in srgb, var(--cx-or) 16%, var(--cx-ink)); color: var(--cx-paper); border: 1px solid color-mix(in srgb, var(--cx-or) 45%, transparent); animation: bg-fan-turn 40s linear infinite reverse; }
.ba-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); block-size: 34%; inline-size: auto; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, var(--ih-color-neutral-800), var(--cx-ink)); border: 2px solid var(--cx-or); box-shadow: 0 0 0 10px color-mix(in srgb, var(--cx-or) 16%, transparent), 0 0 0 22px color-mix(in srgb, var(--cx-or) 7%, transparent), 0 20px 60px -10px color-mix(in srgb, var(--cx-or) 60%, transparent); }
.ba-hub ih-hub { --ih-hub-size: 64%; color: var(--cx-paper); animation: bg-fan-turn 40s linear infinite; } /* turns with the orbit */
.ba-ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--cx-or) 50%, transparent); }

/* ---------- Principle cards with micro-animations ---------- */
.pr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: pr; }
@media (max-width: 1100px) { .pr { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pr { grid-template-columns: 1fr; } }
.pr article { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 24px; background: var(--ih-surface); border: 1px solid var(--ih-border); transition: transform 260ms cubic-bezier(.2,.8,.2,1), box-shadow 260ms ease, border-color 260ms ease; counter-increment: pr; }
.pr article:hover { transform: translateY(-6px); border-color: var(--cx-or); box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--ih-color-orange-700) 60%, transparent); }
.pr article::before { content: "0" counter(pr); position: absolute; inset-block-start: 18px; inset-inline-end: 20px; font-weight: 800; font-size: var(--ih-font-size-sm); color: var(--ih-color-neutral-300); }
.pr h3 { font-size: var(--ih-font-size-xl); }
.pr p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.mini { block-size: 132px; border-radius: 16px; background: var(--ih-bg); border: 1px solid var(--ih-border); padding: 16px; display: grid; gap: 9px; align-content: center; overflow: hidden; }
.mini .row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; block-size: 18px; }
.mini .bar { block-size: 8px; border-radius: 6px; background: var(--ih-color-neutral-200); }
.mini .amt { inline-size: 34px; block-size: 8px; border-radius: 6px; background: var(--ih-color-neutral-300); }
/* 1. receipt lines appear, total lands */
.mini--rcpt .row { opacity: 0; animation: cx-line 7s ease infinite; }
.mini--rcpt .row:nth-child(2) { animation-delay: .5s; } .mini--rcpt .row:nth-child(3) { animation-delay: 1s; }
.mini--rcpt .row.tot { border-block-start: 2px solid var(--ih-text); padding-block-start: 10px; block-size: 28px; animation-delay: 1.6s; }
.mini--rcpt .row.tot .bar { background: var(--ih-text); inline-size: 40%; }
.mini--rcpt .row.tot .amt { background: var(--cx-or); inline-size: 48px; block-size: 12px; }
@keyframes cx-line { 0% { opacity: 0; transform: translateY(6px); } 8%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 2. toggles switch */
.tg { inline-size: 34px; block-size: 20px; border-radius: 20px; background: var(--ih-color-neutral-300); position: relative; animation: cx-tg-bg 6s ease infinite; }
.tg::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--ih-surface); animation: cx-tg 6s ease infinite; }
.mini--tg .row:nth-child(2) .tg, .mini--tg .row:nth-child(2) .tg::after { animation: none; }
.mini--tg .row:nth-child(3) .tg, .mini--tg .row:nth-child(3) .tg::after { animation-delay: 1.2s; }
@keyframes cx-tg-bg { 0%, 15% { background: var(--ih-color-neutral-300); } 25%, 90% { background: var(--cx-or); } 100% { background: var(--ih-color-neutral-300); } }
@keyframes cx-tg { 0%, 15% { translate: 0; } 25%, 90% { translate: 14px; } 100% { translate: 0; } }
[dir="rtl"] .mini--tg .tg { transform: scaleX(-1); }
/* 3. checklist ticks draw */
.ck { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 2px solid var(--ih-color-neutral-300); display: grid; place-items: center; animation: cx-ck-box 6s ease infinite; }
.ck svg { inline-size: 12px; block-size: 12px; }
.ck path { fill: none; stroke: var(--ih-surface); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; animation: cx-ck 6s ease infinite; }
.mini--ck .row:nth-child(2) .ck, .mini--ck .row:nth-child(2) .ck path { animation-delay: .6s; }
.mini--ck .row:nth-child(3) .ck, .mini--ck .row:nth-child(3) .ck path { animation-delay: 1.2s; }
.mini--ck .row { grid-template-columns: auto 1fr; }
@keyframes cx-ck-box { 0%, 10% { background: transparent; border-color: var(--ih-color-neutral-300); } 18%, 88% { background: var(--ih-success); border-color: var(--ih-success); } 100% { background: transparent; } }
@keyframes cx-ck { 0%, 12% { stroke-dashoffset: 16; } 22%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 16; } }
/* 4. refund per item */
.tag { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--ih-radius-pill); white-space: nowrap; }
.tag--done { background: var(--ih-surface-alt); color: var(--ih-text-muted); }
.tag--back { background: var(--ih-color-status-success-bg); color: var(--ih-success); opacity: 0; animation: cx-back 6s ease infinite; }
@keyframes cx-back { 0%, 30% { opacity: 0; transform: scale(.6); } 40%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ---------- How we work: scroll-driven story (sticky device + four promises) ---------- */
.story { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; gap: 20px; } }
.st-stage { position: sticky; inset-block-start: 96px; }
@media (max-width: 900px) { .st-stage { inset-block-start: 68px; z-index: 5; } }
.device { position: relative; border-radius: 28px; background: var(--cx-ink); padding: 14px; box-shadow: 0 50px 90px -50px black, 0 0 0 1px var(--cx-line); overflow: hidden; }
.device::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 85% 0%, color-mix(in srgb, var(--cx-or) 30%, transparent), transparent 70%); pointer-events: none; }
.dv-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; color: var(--cx-paper); font-weight: 800; font-size: var(--ih-font-size-sm); }
.dv-bar ih-hub { --ih-hub-size: 22px; color: var(--cx-paper); }
.dv-bar .ex { margin-inline-start: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--ih-radius-pill); background: color-mix(in srgb, var(--cx-paper) 10%, transparent); color: var(--cx-dim); }
.dv-steps { display: flex; gap: 6px; margin-inline-start: 8px; }
.dv-steps i { inline-size: 18px; block-size: 4px; border-radius: 4px; background: var(--cx-line); transition: background 300ms, inline-size 300ms; }
.dv-steps i.on { background: var(--cx-or); inline-size: 28px; }
.dv-screen { position: relative; border-radius: 18px; background: var(--ih-surface); block-size: clamp(380px, 38vw, 430px); overflow: hidden; }
@media (max-width: 900px) { .dv-screen { block-size: 320px; } .device { padding: 10px; border-radius: 22px; } .dv-bar { padding-block-end: 10px; } .sc { gap: 6px; padding: 14px; } .ln { padding: 7px 10px; font-size: 13px; } .tot b { font-size: var(--ih-font-size-xl); } }
.sc { position: absolute; inset: 0; padding: clamp(14px, 2vw, 20px); display: grid; align-content: start; gap: 8px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.sc.on { opacity: 1; transform: none; pointer-events: auto; }
.sc h4 { font-size: var(--ih-font-size-md); display: flex; align-items: center; gap: 8px; }
.ln { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--ih-bg); font-weight: 700; font-size: var(--ih-font-size-sm); }
.ln small { display: block; color: var(--ih-text-muted); font-weight: 600; font-size: 11.5px; }
.ln .amt2 { font-weight: 800; font-variant-numeric: tabular-nums; }
.sc.on .ln { animation: cx-bub 450ms cubic-bezier(.2,.8,.2,1) both; }
.sc.on .ln:nth-of-type(2) { animation-delay: .15s; } .sc.on .ln:nth-of-type(3) { animation-delay: .3s; } .sc.on .ln:nth-of-type(4) { animation-delay: .45s; } .sc.on .ln:nth-of-type(5) { animation-delay: .6s; }
.tot { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 12px 0; border-block-start: 2px solid var(--ih-text); font-weight: 800; font-size: var(--ih-font-size-lg); }
.tot b { font-size: var(--ih-font-size-2xl); font-variant-numeric: tabular-nums; }
.renew { font-size: 11.5px; color: var(--ih-text-muted); font-weight: 600; padding-inline: 12px; }
.stamp { position: absolute; inset-block-end: 22px; inset-inline-end: 22px; padding: 8px 14px; border: 2.5px solid var(--ih-success); color: var(--ih-success); border-radius: 10px; font-weight: 800; font-size: var(--ih-font-size-sm); text-transform: uppercase; letter-spacing: .06em; rotate: -8deg; opacity: 0; }
:lang(ar) .stamp { text-transform: none; letter-spacing: 0; }
.sc.on .stamp { animation: cx-stamp 600ms cubic-bezier(.2,1.4,.4,1) 1.3s both; }
@keyframes cx-stamp { from { opacity: 0; transform: scale(2.2); } to { opacity: 1; transform: scale(1); } }
.ln .sw { inline-size: 40px; block-size: 24px; border-radius: 24px; background: var(--ih-color-neutral-300); position: relative; transition: background 300ms; flex: none; }
.ln .sw::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--ih-surface); transition: inset-inline-start 300ms cubic-bezier(.2,.8,.2,1); box-shadow: 0 2px 4px rgb(0 0 0 / .2); }
.ln .sw.on { background: var(--cx-or); } .ln .sw.on::after { inset-inline-start: 19px; }
.ln .sreq { font-size: 10.5px; font-weight: 800; color: var(--ih-text-muted); }
.ln.off { opacity: .55; }
.ln .r { display: flex; align-items: center; gap: 10px; }
.scan { position: absolute; inset-inline: 0; block-size: 60px; background: linear-gradient(transparent, color-mix(in srgb, var(--cx-or) 22%, transparent), transparent); inset-block-start: -60px; pointer-events: none; }
.sc.on .scan { animation: cx-scan 2.2s ease-in-out .2s 2; }
@keyframes cx-scan { to { inset-block-start: 100%; } }
.ck2 { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; flex: none; }
.ck2.ok { background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.ck2.warn { background: var(--ih-color-orange-100); color: var(--ih-text-accent); }
.ck2.wait { background: var(--ih-surface-alt); }
.ck2.wait ih-hub { --ih-hub-size: 16px; }
.ln.warn { background: var(--ih-color-orange-50); outline: 1.5px solid var(--ih-color-orange-300); }
.fix { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: var(--cx-or); color: var(--cx-ink); font-weight: 800; font-size: var(--ih-font-size-sm); }
.sc.on .fix { animation: cx-nudge 1.6s ease-in-out 2.4s infinite; }
@keyframes cx-nudge { 50% { transform: translateX(4px); } }
[dir="rtl"] .sc.on .fix { animation-name: cx-nudge-rtl; } @keyframes cx-nudge-rtl { 50% { transform: translateX(-4px); } }
.note { font-size: 12px; color: var(--ih-text-muted); font-weight: 600; }
.ln .st { font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: var(--ih-radius-pill); white-space: nowrap; }
.st.kept { background: var(--ih-surface-alt); color: var(--ih-text-muted); }
.st.decl { background: var(--ih-color-status-danger-bg); color: var(--ih-danger); }
.st.back { background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.mbg2 { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--ih-color-status-success-bg); color: var(--ih-success); font-weight: 800; font-size: var(--ih-font-size-sm); transform-origin: top; }
.mbg2 b { font-size: var(--ih-font-size-xl); font-variant-numeric: tabular-nums; }
.coin { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-success); color: var(--cx-paper); font-size: 13px; }
.sc.on .coin { animation: cx-coin 1.4s cubic-bezier(.2,.8,.2,1) 1.2s both; }
@keyframes cx-coin { 0% { transform: translateY(-40px) scale(.4); opacity: 0; } 60% { transform: translateY(4px) scale(1.1); opacity: 1; } 100% { transform: none; } }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.st-steps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding-block: clamp(40px, 14vh, 140px); padding-inline-end: 4px; opacity: .32; transition: opacity 400ms ease; counter-increment: st; }
.st-steps li:first-child { padding-block-start: 8px; } .st-steps li:last-child { padding-block-end: 40px; }
.st-steps li.on { opacity: 1; }
.st-steps .num { position: relative; inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-surface); border: 2px solid var(--ih-border); transition: border-color 400ms, background 400ms, transform 500ms cubic-bezier(.2,.8,.2,1); }
.st-steps li.on .num { border-color: var(--cx-or); background: var(--ih-color-orange-50); transform: scale(1.08); }
.st-steps .num ih-hub { --ih-hub-size: 30px; }
.st-steps .num::after { content: "0" counter(st); position: absolute; inset-block-start: -8px; inset-inline-end: -10px; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: var(--ih-radius-pill); background: var(--ih-text); color: var(--ih-bg); }
.st-steps h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.025em; margin-block-end: 8px; }
:lang(ar) .st-steps h3 { letter-spacing: 0; }
.st-steps p { color: var(--ih-text-muted); font-size: var(--ih-font-size-md); max-inline-size: 42ch; }
.st-steps li::before { content: ""; position: absolute; inset-inline-start: 27px; inset-block: 0; inline-size: 2px; background: var(--ih-border); z-index: -1; }
.st-steps li.on::before { background: linear-gradient(var(--cx-or), var(--ih-border)); }
@media (max-width: 900px) { .st-steps li { padding-block: 26vh; } .st-steps li:first-child { padding-block-start: 24px; } }

/* ---------- Order journey track: a live order travels through the four stages ---------- */
.trk { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block-start: 64px; }
.trk-line, .trk-fill { position: absolute; z-index: 0; border-radius: 4px; pointer-events: none; }
.trk-line { background: var(--ih-color-neutral-200); }
.trk-fill { background: linear-gradient(var(--trk-dir, 90deg), var(--ih-color-orange-300), var(--cx-or)); box-shadow: 0 0 14px color-mix(in srgb, var(--cx-or) 55%, transparent); transition: width 900ms cubic-bezier(.6,0,.3,1), height 900ms cubic-bezier(.6,0,.3,1), opacity 400ms; }
.trk-run { position: absolute; z-index: 3; inline-size: 30px; block-size: 30px; margin: -15px 0 0 -15px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-or); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cx-or) 22%, transparent), 0 8px 22px -6px var(--ih-color-orange-700); transition: left 900ms cubic-bezier(.6,0,.3,1), top 900ms cubic-bezier(.6,0,.3,1), opacity 400ms, transform 300ms; pointer-events: none; }
.trk-run ih-hub { --ih-hub-size: 18px; color: var(--cx-ink); }
.trk.resting .trk-run, .trk.parked .trk-run { transform: scale(0); }
.trk > div { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 10px; align-content: start; }
.trk .dot { position: relative; inline-size: 64px; block-size: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-surface); border: 2px solid var(--ih-color-neutral-200); transition: border-color 400ms ease, box-shadow 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1), background 400ms; }
.trk .dot ih-hub { --ih-hub-size: 34px; color: var(--ih-color-neutral-300); transition: color 400ms ease; }
.trk b { font-size: var(--ih-font-size-lg); transition: color 300ms; color: var(--ih-text-muted); }
.trk p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); max-inline-size: 24ch; }
.trk .is-active .dot { border-color: var(--cx-or); transform: scale(1.14); box-shadow: 0 0 0 10px color-mix(in srgb, var(--cx-or) 16%, transparent); }
.trk .is-active .dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cx-or); animation: cx-pulse 1.4s ease-out infinite; }
.trk .is-active .dot ih-hub, .trk .is-done .dot ih-hub { color: var(--ih-text); }
.trk .is-active b, .trk .is-done b { color: var(--ih-text); }
.trk .is-done .dot { border-color: var(--cx-or); background: var(--ih-color-orange-50); }
.trk .is-done .dot ih-hub { color: var(--ih-color-orange-700); }
.trk .burst .dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--cx-or); animation: cx-burst 1.2s cubic-bezier(.2,.8,.2,1) 2 both; }
@keyframes cx-burst { from { transform: scale(.8); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.trk-toast { position: absolute; inset-block-start: -58px; left: 50%; translate: -50% 8px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--cx-ink); color: var(--cx-paper); font-size: 12.5px; font-weight: 800; white-space: nowrap; opacity: 0; transition: opacity 300ms, translate 400ms cubic-bezier(.2,.8,.2,1); box-shadow: 0 14px 30px -14px black; pointer-events: none; }
.trk-toast::after { content: ""; position: absolute; inset-block-end: -5px; left: 50%; inline-size: 10px; block-size: 10px; background: var(--cx-ink); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.trk-toast i { inline-size: 18px; block-size: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-color-status-success); color: var(--cx-paper); font-style: normal; font-size: 11px; }
.trk .show-toast .trk-toast { opacity: 1; translate: -50% 0; }
@media (max-width: 760px) {
  .trk { grid-template-columns: 1fr; gap: 26px; padding-block-start: 0; }
  .trk > div { grid-template-columns: 64px 1fr; justify-items: start; text-align: start; column-gap: 16px; row-gap: 2px; }
  .trk .dot { grid-row: span 3; }
  .trk-toast { position: static; translate: 0 6px; margin-block-start: 6px; white-space: normal; }
  .trk-toast::after { display: none; }
  .trk .show-toast .trk-toast { translate: 0 0; }
}

/* Connecting line: each stage draws the segment to the next stage, centre to centre; it fills orange once the stage is done. */
.trk { isolation: isolate; }
.trk > div:not(:last-child)::before { content: ""; position: absolute; z-index: -1; inset-block-start: 30.5px; inset-inline-start: 50%; inline-size: calc(100% + 16px); block-size: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--ih-color-orange-300), var(--cx-or)) no-repeat left / 0% 100%, var(--ih-color-neutral-200); transition: background-size 900ms cubic-bezier(.6, 0, .3, 1); }
[dir="rtl"] .trk > div:not(:last-child)::before { background: linear-gradient(270deg, var(--ih-color-orange-300), var(--cx-or)) no-repeat right / 0% 100%, var(--ih-color-neutral-200); }
.trk > div.is-done:not(:last-child)::before { background-size: 100% 100%, auto; }
.trk-line, .trk-fill, .trk-run { display: none; }
@media (max-width: 760px) {
  .trk > div:not(:last-child)::before { inset-block-start: 32px; inset-inline-start: 30.5px; inline-size: 3px; block-size: calc(100% + 26px);
    background: linear-gradient(180deg, var(--ih-color-orange-300), var(--cx-or)) no-repeat top / 100% 0%, var(--ih-color-neutral-200); }
  [dir="rtl"] .trk > div:not(:last-child)::before { background: linear-gradient(180deg, var(--ih-color-orange-300), var(--cx-or)) no-repeat top / 100% 0%, var(--ih-color-neutral-200); }
  .trk > div.is-done:not(:last-child)::before { background-size: 100% 100%, auto; }
}
@media (prefers-reduced-motion: reduce) { .trk > div::before { transition: none; } }
.rem-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-start: 10px; }
.rem-ch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--ih-radius-pill); font-size: 12px; font-weight: 800; background: var(--ih-surface-alt); color: var(--ih-text-muted); animation: cx-lit 4s ease infinite; }
.rem-ch:nth-child(2) { animation-delay: .18s; } .rem-ch:nth-child(3) { animation-delay: .36s; }
@keyframes cx-lit { 0%, 72% { background: var(--ih-surface-alt); color: var(--ih-text-muted); transform: none; } 78%, 96% { background: var(--cx-or); color: var(--cx-ink); transform: translateY(-2px); } 100% { background: var(--ih-surface-alt); color: var(--ih-text-muted); } }
.rem-when { position: relative; display: inline-grid; padding: 5px 11px; border-radius: var(--ih-radius-pill); font-size: 12px; font-weight: 800; background: var(--ih-color-orange-100); color: var(--ih-text-accent); overflow: hidden; }
.rem-when span { grid-area: 1 / 1; animation: cx-swap 8s ease infinite; }
.rem-when span + span { animation-delay: -4s; }
@keyframes cx-swap { 0%, 45% { opacity: 1; transform: none; } 50%, 95% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: none; } }
.remind { margin-block-start: 40px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 20px; background: var(--ih-surface); border: 1px solid var(--ih-border); }
.bell { inline-size: 48px; block-size: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ih-color-orange-100); color: var(--ih-text-accent); animation: cx-ring 4s ease-in-out infinite; transform-origin: 50% 10%; }
.bell svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cx-ring { 0%, 70%, 100% { rotate: 0deg; } 74% { rotate: 14deg; } 78% { rotate: -12deg; } 82% { rotate: 8deg; } 86% { rotate: -5deg; } 90% { rotate: 0deg; } }
.remind b { display: block; font-size: var(--ih-font-size-md); }
.remind span { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }

/* ---------- Market cards ---------- */
.mk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .mk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mk { grid-template-columns: 1fr; } }
.mk a { position: relative; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 24px; background: var(--ih-surface); border: 1px solid var(--ih-border); color: var(--ih-text); text-decoration: none; transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, box-shadow 260ms ease; }
.mk a:hover { transform: translateY(-6px); border-color: var(--ih-text); box-shadow: 0 30px 60px -40px black; }
.mk .big { position: absolute; inset-block-start: -18px; inset-inline-end: -14px; font-size: 120px; line-height: 1; opacity: .12; filter: saturate(.6); transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 300ms; pointer-events: none; }
.mk a:hover .big { transform: rotate(-8deg) scale(1.08); opacity: .22; }
.mk .fl { font-size: 34px; line-height: 1; }
.mk h3 { font-size: var(--ih-font-size-2xl); }
.pill { justify-self: start; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--ih-radius-pill); background: var(--ih-color-orange-100); color: var(--ih-text-accent); }
.pill--soft { background: var(--ih-surface-alt); color: var(--ih-text-muted); }
.mk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: var(--ih-font-size-sm); color: var(--ih-text-muted); font-weight: 600; }
.mk li { display: flex; gap: 8px; align-items: baseline; }
.mk li::before { content: ""; flex: none; inline-size: 6px; block-size: 6px; border-radius: 2px; transform: rotate(45deg) translateY(-2px); background: var(--cx-or); }
.mk .go { margin-block-start: auto; font-weight: 800; font-size: var(--ih-font-size-sm); color: var(--ih-text-accent); }

/* ---------- Are / are not ---------- */
.isnot { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 26px; overflow: hidden; border: 1px solid var(--ih-border); }
@media (max-width: 760px) { .isnot { grid-template-columns: 1fr; } }
.isnot > div { padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; align-content: start; background: var(--ih-surface); }
.isnot > div + div { background: var(--ih-surface-alt); }
.isnot h3 { font-size: var(--ih-font-size-xl); }
.isnot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.isnot li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; font-weight: 600; }
.isnot li i { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 14px; }
.isnot .y i { background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.isnot .n i { background: var(--ih-color-status-danger-bg); color: var(--ih-danger); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; border-radius: 32px; background: var(--cx-ink); color: var(--cx-paper); padding: clamp(32px, 6vw, 72px); display: grid; gap: 22px; justify-items: start; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 360px at 90% 50%, color-mix(in srgb, var(--cx-or) 40%, transparent), transparent 70%); }
.cta-band h2 { font-size: clamp(30px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.04em; color: var(--cx-paper); max-inline-size: 16ch; }
:lang(ar) .cta-band h2 { letter-spacing: 0; line-height: 1.25; }
.cta-band p { color: var(--cx-dim); max-inline-size: 48ch; }
.cta-fan { position: absolute; z-index: -1; inset-block-start: 50%; right: -8%; translate: 0 -50%; inline-size: min(48vw, 460px); aspect-ratio: 1; color: var(--cx-or); opacity: .9; }
.cta-fan ih-hub { --ih-hub-size: 100%; }
.cta-fan > div { inline-size: 100%; block-size: 100%; animation: bg-fan-turn 30s linear infinite; }
@media (max-width: 760px) { .cta-fan { opacity: .25; right: -30%; } }

/* ---------- Help ---------- */
.hs { position: relative; max-inline-size: 680px; }
.hs input { inline-size: 100%; min-block-size: 64px; border-radius: 18px; border: 1px solid transparent; background: var(--cx-paper); color: var(--cx-ink); font: inherit; font-size: 18px; font-weight: 600; padding-inline: 58px 20px; box-shadow: 0 30px 70px -30px black, 0 0 0 6px color-mix(in srgb, var(--cx-paper) 8%, transparent); transition: box-shadow 200ms ease; }
.hs input:focus { outline: none; box-shadow: 0 30px 70px -30px black, 0 0 0 4px var(--cx-or); }
.hs input::-webkit-search-cancel-button { display: none; }
.hs .ico { position: absolute; inset-inline-start: 20px; inset-block-start: 50%; translate: 0 -50%; inline-size: 24px; block-size: 24px; color: var(--ih-color-neutral-500); pointer-events: none; }
.hs-ph { position: absolute; inset-inline-start: 58px; inset-block-start: 50%; translate: 0 -50%; font-size: 18px; font-weight: 600; color: var(--ih-color-neutral-400); pointer-events: none; white-space: nowrap; overflow: hidden; max-inline-size: calc(100% - 80px); }
.hs-ph::after { content: ""; display: inline-block; inline-size: 2px; block-size: 1.1em; vertical-align: -0.2em; margin-inline-start: 2px; background: var(--cx-or); animation: cx-caret 1s steps(1) infinite; }
@keyframes cx-caret { 50% { opacity: 0; } }
.hs-pop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--ih-font-size-sm); color: var(--cx-dim); font-weight: 700; }
.hs-pop button { font: inherit; font-weight: 700; color: var(--cx-paper); background: color-mix(in srgb, var(--cx-paper) 8%, transparent); border: 1px solid var(--cx-line); border-radius: var(--ih-radius-pill); padding: 6px 12px; cursor: pointer; transition: background 200ms, border-color 200ms; }
.hs-pop button:hover { border-color: var(--cx-or); background: color-mix(in srgb, var(--cx-or) 18%, transparent); }
.hs-count { min-block-size: 1.4em; color: var(--ih-color-orange-300); font-weight: 800; }
.hs-scene { position: relative; aspect-ratio: 1; max-inline-size: 440px; inline-size: 100%; justify-self: center; direction: ltr; }
.hs-scene .q { position: absolute; padding: 12px 16px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--cx-paper) 9%, transparent); border: 1px solid var(--cx-line); color: var(--cx-paper); font-weight: 700; font-size: var(--ih-font-size-sm); white-space: nowrap; backdrop-filter: blur(4px); animation: cx-float 7s ease-in-out infinite; }
.hs-scene .q:nth-child(2) { animation-delay: -2s; } .hs-scene .q:nth-child(3) { animation-delay: -4s; } .hs-scene .q:nth-child(4) { animation-delay: -5.5s; }
.hs-scene .q.a { background: var(--cx-or); color: var(--cx-ink); border-color: transparent; border-radius: 18px 18px 6px 18px; }
.hs-core { position: absolute; inset: 32%; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cx-paper) 5%, transparent); border: 1px solid var(--cx-line); }
.hs-core::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--cx-or) 50%, transparent); animation: bg-fan-turn 50s linear infinite; }
.hs-core ih-hub { --ih-hub-size: 60%; color: var(--cx-paper); }
@media (max-width: 960px) { .hs-scene { display: none; } }
.tp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .tp-grid { grid-template-columns: 1fr; } }
.tp-card { font: inherit; text-align: start; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 18px; border-radius: 20px; background: var(--ih-surface); border: 1.5px solid var(--ih-border); color: var(--ih-text); transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms, box-shadow 220ms; }
.tp-card:hover { transform: translateY(-3px); border-color: var(--ih-text); }
.tp-card[aria-pressed="true"] { border-color: var(--cx-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 16%, transparent); }
.tp-card .tile { inline-size: 48px; block-size: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ih-color-orange-50); color: var(--ih-text); transition: background 220ms, transform 400ms cubic-bezier(.2,.8,.2,1); }
.tp-card:hover .tile, .tp-card[aria-pressed="true"] .tile { background: var(--cx-or); transform: rotate(-6deg); }
.tp-card .tile .ico { inline-size: 24px; block-size: 24px; }
.tp-card b { display: block; font-size: var(--ih-font-size-md); }
.tp-card small { color: var(--ih-text-muted); font-weight: 600; }
.tp-card .n { font-weight: 800; font-size: var(--ih-font-size-sm); inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-surface-alt); }
.faq-wrap { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; } }
.faq-side { position: sticky; inset-block-start: 96px; display: grid; gap: 10px; }
@media (max-width: 900px) { .faq-side { position: static; } }
.faq-side h2 { font-size: var(--ih-font-size-3xl); letter-spacing: -0.03em; }
.faq-side p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.faq-side .clear { justify-self: start; }
.qa-group > h3 .ico { inline-size: 18px; block-size: 18px; flex: none; }
.qa-group + .qa-group { margin-block-start: 28px; }
.qa-group > h3 { display: flex; align-items: center; gap: 10px; font-size: var(--ih-font-size-sm); text-transform: uppercase; letter-spacing: var(--ih-font-tracking-label); color: var(--ih-text-muted); margin-block-end: 8px; }
:lang(ar) .qa-group > h3 { text-transform: none; letter-spacing: 0; }
.qa { border-block-end: 1px solid var(--ih-border); }
.qa-q { all: unset; box-sizing: border-box; cursor: pointer; inline-size: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding-block: 20px; font-weight: 800; font-size: var(--ih-font-size-lg); line-height: 1.35; }
.qa-q:focus-visible { outline: 3px solid var(--ih-focus-ring); outline-offset: 4px; border-radius: 6px; }
.qa-q:hover { color: var(--ih-text-accent); }
.pm { position: relative; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--ih-surface-alt); transition: background 220ms, rotate 300ms cubic-bezier(.2,.8,.2,1); }
.pm::before, .pm::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 12px; block-size: 2px; translate: -50% -50%; background: currentColor; border-radius: 2px; transition: rotate 300ms; }
[dir="rtl"] .pm::before, [dir="rtl"] .pm::after { translate: 50% -50%; }
.pm::after { rotate: 90deg; }
.qa.open .pm { background: var(--cx-or); rotate: 180deg; }
.qa.open .pm::after { rotate: 0deg; }
.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms cubic-bezier(.2,.8,.2,1); }
.qa.open .qa-a { grid-template-rows: 1fr; }
.qa-a > div { overflow: hidden; }
.qa-a p { color: var(--ih-text-muted); font-size: var(--ih-font-size-md); max-inline-size: 70ch; padding-block-end: 14px; }
.qa mark { background: var(--ih-color-orange-100); color: inherit; border-radius: 4px; padding-inline: 2px; }
.helpful { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-block-end: 20px; font-size: var(--ih-font-size-sm); color: var(--ih-text-muted); font-weight: 700; }
.helpful button { font: inherit; font-weight: 700; cursor: pointer; padding: 5px 12px; border-radius: var(--ih-radius-pill); border: 1px solid var(--ih-border); background: var(--ih-surface); color: var(--ih-text); }
.helpful button:hover { border-color: var(--ih-text); }
.helpful .thx { color: var(--ih-success); display: inline-flex; align-items: center; gap: 6px; }
.helpful .thx ih-hub { --ih-hub-size: 18px; }
.empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 40px 20px; border: 1.5px dashed var(--ih-border); border-radius: 24px; }
.empty ih-hub { --ih-hub-size: 48px; }
.empty p { color: var(--ih-text-muted); max-inline-size: 40ch; }

/* ---------- Channels (Help + Contact) ---------- */
.ch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) { .ch { grid-template-columns: 1fr; } }
.ch a { position: relative; overflow: hidden; display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 24px; text-decoration: none; color: var(--ih-text); background: var(--ih-surface); border: 1px solid var(--ih-border); transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms, box-shadow 260ms; }
.ch a:hover { transform: translateY(-6px); border-color: var(--ih-text); box-shadow: 0 30px 60px -40px black; }
.ch .ic { inline-size: 56px; block-size: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--ih-color-orange-50); color: var(--ih-text); transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.ch a:hover .ic { transform: rotate(-8deg) scale(1.06); }
.ch .ic svg { inline-size: 28px; block-size: 28px; }
.ch .ic--wa { background: transparent; }
.ch .ic--wa svg { inline-size: 56px; block-size: 56px; }
.ch b { font-size: var(--ih-font-size-xl); }
.ch p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.ch .val { overflow-wrap: anywhere; font-weight: 800; font-size: var(--ih-font-size-md); }
.ch .go { font-weight: 800; font-size: var(--ih-font-size-sm); color: var(--ih-text-accent); }
.ch .live { position: absolute; inset-block-start: 22px; inset-inline-end: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--ih-success); }
.ch .live i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ih-success); animation: cx-ping-g 2s ease-out infinite; }
@keyframes cx-ping-g { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ih-success) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
.langs { display: flex; flex-wrap: wrap; gap: 8px; }
.langs span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--ih-radius-pill); font-weight: 700; font-size: var(--ih-font-size-sm); background: color-mix(in srgb, var(--cx-paper) 8%, transparent); border: 1px solid var(--cx-line); color: var(--cx-paper); }
.langs--light span { background: var(--ih-surface); border-color: var(--ih-border); color: var(--ih-text); }
.still { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 960px) { .still { grid-template-columns: 1fr; } }
.still .cx-head { margin: 0; }

/* ---------- Contact ---------- */
.chat { position: relative; justify-self: center; inline-size: min(100%, 420px); border-radius: 28px; background: color-mix(in srgb, var(--cx-paper) 6%, transparent); border: 1px solid var(--cx-line); padding: 18px; display: grid; gap: 14px; backdrop-filter: blur(8px); box-shadow: 0 50px 100px -40px black; }
.chat-h { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding-block-end: 14px; border-block-end: 1px solid var(--cx-line); }
.chat-av { inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cx-or); position: relative; }
.chat-av ih-hub { --ih-hub-size: 26px; color: var(--cx-ink); }
.chat-av::after { content: ""; position: absolute; inset-block-end: 1px; inset-inline-end: 1px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--ih-color-status-success); border: 2px solid var(--cx-ink); }
.chat-h b { display: block; color: var(--cx-paper); }
.chat-h small { color: var(--cx-dim); font-weight: 600; }
.chat-body { display: grid; gap: 10px; min-block-size: 250px; align-content: end; }
.bub { max-inline-size: 84%; padding: 11px 14px; border-radius: 18px; font-size: var(--ih-font-size-sm); font-weight: 600; line-height: 1.5; animation: cx-bub 420ms cubic-bezier(.2,.8,.2,1) both; }
.bub.me { justify-self: end; background: var(--cx-or); color: var(--cx-ink); border-end-end-radius: 6px; }
.bub.them { justify-self: start; background: color-mix(in srgb, var(--cx-paper) 12%, transparent); color: var(--cx-paper); border-end-start-radius: 6px; }
.bub.typing { display: inline-flex; align-items: center; gap: 8px; color: var(--cx-dim); }
.bub.typing ih-hub { --ih-hub-size: 18px; color: var(--cx-paper); }
@keyframes cx-bub { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.chat-in { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 8px 8px 16px; border-radius: 16px; background: color-mix(in srgb, var(--cx-paper) 8%, transparent); color: var(--cx-dim); font-size: var(--ih-font-size-sm); font-weight: 600; }
.chat-in i { inline-size: 36px; block-size: 36px; border-radius: 12px; background: var(--cx-or); display: grid; place-items: center; color: var(--cx-ink); font-style: normal; font-weight: 800; }
.cf { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 960px) { .cf { grid-template-columns: 1fr; } }
.next { display: grid; gap: 0; margin-block-start: 8px; }
.next > div { display: grid; grid-template-columns: 52px 1fr; gap: 16px; position: relative; padding-block-end: 26px; }
.next > div:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 25px; inset-block: 52px 0; inline-size: 2px; background: linear-gradient(var(--cx-or), var(--ih-color-neutral-200)); }
.next .dot { inline-size: 52px; block-size: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ih-surface); border: 2px solid var(--cx-or); }
.next .dot ih-hub { --ih-hub-size: 28px; }
.next b { display: block; font-size: var(--ih-font-size-lg); margin-block-start: 4px; }
.next p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.form-card { position: relative; border-radius: 28px; background: var(--ih-surface); border: 1px solid var(--ih-border); padding: clamp(22px, 3.4vw, 40px); display: grid; gap: 18px; box-shadow: 0 40px 80px -60px black; }
.form-card h2 { font-size: var(--ih-font-size-3xl); letter-spacing: -0.03em; }
.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; padding: 0; margin: 0; }
@media (max-width: 560px) { .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topics legend { font-weight: 700; font-size: var(--ih-font-size-sm); margin-block-end: 8px; }
.topics label { position: relative; cursor: pointer; display: grid; gap: 8px; justify-items: start; padding: 14px; border-radius: 16px; border: 1.5px solid var(--ih-border); background: var(--ih-bg); font-weight: 700; font-size: var(--ih-font-size-sm); transition: border-color 200ms, background 200ms, transform 200ms; }
.topics label:hover { border-color: var(--ih-text); }
.topics input { position: absolute; opacity: 0; pointer-events: none; }
.topics label:has(input:checked) { border-color: var(--cx-or); background: var(--ih-color-orange-50); transform: translateY(-2px); }
.topics label:has(input:focus-visible) { outline: 3px solid var(--ih-focus-ring); outline-offset: 2px; }
.topics .ico { inline-size: 24px; block-size: 24px; }
.topics[aria-invalid="true"] label { border-color: var(--ih-danger); }
.fl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .fl2 { grid-template-columns: 1fr; } }
.fld { position: relative; }
.fld input, .fld textarea { inline-size: 100%; font: inherit; font-size: var(--ih-font-size-md); font-weight: 600; color: var(--ih-text); background: var(--ih-bg); border: 1.5px solid var(--ih-border); border-radius: 14px; padding: 24px 14px 10px; transition: border-color 200ms, box-shadow 200ms; resize: vertical; }
.fld textarea { min-block-size: 140px; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--cx-or); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cx-or) 16%, transparent); background: var(--ih-surface); }
.fld label { position: absolute; inset-inline-start: 15px; inset-block-start: 17px; color: var(--ih-text-muted); font-weight: 600; pointer-events: none; transition: all 180ms ease; }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label, .fld textarea:focus + label, .fld textarea:not(:placeholder-shown) + label { inset-block-start: 7px; font-size: 11.5px; font-weight: 800; color: var(--ih-text-accent); }
.fld [aria-invalid="true"] { border-color: var(--ih-danger); }
.fld .cnt { position: absolute; inset-inline-end: 12px; inset-block-end: 10px; font-size: 11px; font-weight: 700; color: var(--ih-text-muted); }
.form-card .btn--primary { min-block-size: 54px; font-size: var(--ih-font-size-md); justify-self: stretch; }
.form-card .err { color: var(--ih-danger); font-weight: 700; font-size: var(--ih-font-size-sm); }
.form-card .hint { font-size: var(--ih-font-size-xs); color: var(--ih-text-muted); }
.done { display: grid; justify-items: center; text-align: center; gap: 14px; padding-block: 24px; }
.done ih-hub { --ih-hub-size: 72px; }
.done h2 { font-size: var(--ih-font-size-3xl); }
.done p { color: var(--ih-text-muted); max-inline-size: 40ch; }

/* Team mailboxes, market mailboxes, mailing address */
.dir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .dir { grid-template-columns: 1fr; } }
.dcard { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: 22px; background: var(--ih-surface); border: 1px solid var(--ih-border); transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms; }
.dcard:hover { transform: translateY(-4px); border-color: var(--ih-text); }
.dcard .ic { inline-size: 46px; block-size: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ih-color-orange-50); margin-block-end: 4px; transition: transform 400ms cubic-bezier(.2,.8,.2,1); }
.dcard:hover .ic { transform: rotate(-8deg); }
.dcard .ic .ico { inline-size: 24px; block-size: 24px; }
.dcard b { font-size: var(--ih-font-size-lg); }
.dcard p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.drow, .mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 6px; }
.drow a, .mrow a { font-weight: 800; font-size: var(--ih-font-size-sm); color: var(--ih-text-accent); text-decoration: none; overflow-wrap: anywhere; }
.drow a:hover, .mrow a:hover { text-decoration: underline; }
.cp { font: inherit; font-size: 11.5px; font-weight: 800; cursor: pointer; padding: 4px 10px; border-radius: var(--ih-radius-pill); border: 1px solid var(--ih-border); background: var(--ih-surface); color: var(--ih-text); transition: background 200ms, color 200ms, border-color 200ms; }
.cp:hover { border-color: var(--ih-text); }
.cp.is-done { background: var(--ih-color-status-success-bg); color: var(--ih-success); border-color: transparent; }
.dir2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-block-start: 14px; }
@media (max-width: 860px) { .dir2 { grid-template-columns: 1fr; } }
.mkm, .addr { padding: 24px; border-radius: 22px; background: var(--ih-surface); border: 1px solid var(--ih-border); }
.mkm { display: grid; gap: 6px; align-content: start; }
.mkm h3, .addr h3 { font-size: var(--ih-font-size-xl); }
.mkm > p, .addr p { color: var(--ih-text-muted); font-size: var(--ih-font-size-sm); }
.mrow { display: grid; grid-template-columns: auto 1fr auto auto; padding-block: 12px; margin: 0; border-block-end: 1px solid var(--ih-border); }
.mrow:last-child { border-block-end: 0; }
.mrow .fl { font-size: 24px; line-height: 1; }
.mrow b { font-size: var(--ih-font-size-sm); }
@media (max-width: 480px) { .mrow { grid-template-columns: auto 1fr auto; } .mrow a { grid-column: 2 / 3; grid-row: 2; } }
.addr { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; background: var(--cx-ink); color: var(--cx-paper); border-color: transparent; }
.addr::before { content: ""; position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--cx-line) 1px, transparent 1px), linear-gradient(90deg, var(--cx-line) 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(circle at 15% 30%, black, transparent 70%); -webkit-mask-image: radial-gradient(circle at 15% 30%, black, transparent 70%); }
.addr > * { position: relative; }
.addr p { color: var(--cx-dim); }
.addr address { font-style: normal; font-weight: 800; font-size: var(--ih-font-size-lg); line-height: 1.5; margin-block: 10px 14px; text-align: start; }
[dir="rtl"] .addr address { text-align: end; }
.addr .cp { background: transparent; color: var(--cx-paper); border-color: var(--cx-line); }
.addr .cp.is-done { background: var(--ih-color-status-success-bg); color: var(--ih-success); }
.pin { inline-size: 64px; block-size: 64px; display: grid; place-items: center; position: relative; }
.pin::before { content: ""; position: absolute; inset-block-end: 4px; inline-size: 26px; block-size: 8px; border-radius: 50%; background: color-mix(in srgb, var(--cx-or) 50%, transparent); animation: cx-shadow 2.4s ease-in-out infinite; }
.pin svg { inline-size: 48px; block-size: 48px; animation: cx-drop 2.4s ease-in-out infinite; }
.pin path { fill: var(--cx-or); } .pin circle { fill: var(--cx-ink); }
@keyframes cx-drop { 50% { transform: translateY(-8px); } }
@keyframes cx-shadow { 50% { transform: scale(.6); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .pin svg, .pin::before { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .cx-hero-fan, .net .ring--dash, .net .link, .net-core::before, .net-core::after, .node, .marquee-track, .ba-card--old .chip, .orbit-set, .orbit-set .chip,
  .mini *, .mini *::after, .ba-hub ih-hub, .sc.on .ln, .sc.on .stamp, .sc.on .scan, .sc.on .fix, .sc.on .coin, .bell, .hs-scene .q, .hs-core::before, .cta-fan > div, .cx-badge i, .ch .live i, .hs-ph::after { animation: none !important; }
  .mini--rcpt .row, .tag--back { opacity: 1; }
  .cx-words .w { animation: none; opacity: 1; transform: none; }
  .rem-ch, .rem-when span, .trk .is-active .dot::after, .trk .burst .dot::before { animation: none !important; }
  .rem-when span + span { display: none; }
  .sc .stamp { opacity: 1; }
  .trk-fill, .trk-run { transition: none; }
}