/* Power of Translation — site-wide styles.
   Identity: cold starlight platinum. Night ink for the landing, cold paper
   for documents. The signature device is the BILINGUAL PAIR: every heading
   carries its counterpart language as a small marginal note — the site does
   what the product does. No gold anywhere, by decision. */

:root {
	/* ink & paper */
	--ink: #0e1116;
	--ink-2: #151a21;
	--paper: #f4f6f8;
	--paper-2: #ffffff;
	/* platinum & starlight */
	--platinum: #c9d2de;
	--starlight: #e8edf4;
	--muted-night: #8b96a5;
	--muted-day: #5c6672;
	/* the one accent — cold steel / starlight blue */
	--steel: #34618f;
	--star: #a8c7e7;
	/* hairlines */
	--line-night: #232a33;
	--line-day: #d9dfe7;

	--radius: 12px;
	--font-display: 'Alexandria', 'Segoe UI', sans-serif;
	--font-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.9;
	background: var(--paper);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

/* ---- language switching -------------------------------------------------
   Whole blocks appear in one language at a time… */
html[data-lang='ar'] .only-en { display: none !important; }
html[data-lang='en'] .only-ar { display: none !important; }

/* …but the PAIR keeps both languages visible and swaps their roles:
   the current language is the main line, the other is the marginal note. */
.pair { display: block; }
.pair > span { display: block; }
html[data-lang='ar'] .p-en,
html[data-lang='en'] .p-ar {
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--steel);
	opacity: 0.85;
	margin-block-end: 0.3rem;
}
html[data-lang='ar'] .p-ar,
html[data-lang='en'] .p-en {
	font-family: var(--font-display);
	font-weight: 700;
}

/* ---- shared shell -------------------------------------------------------- */
.shell { max-width: 1060px; margin-inline: auto; padding-inline: 22px; }

.site-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 18px;
}
.brand {
	display: flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}
.brand .mark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.06rem;
	letter-spacing: 0.02em;
}
.brand .mark-alt {
	font-family: var(--font-display);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted-day);
}
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a {
	text-decoration: none;
	color: inherit;
	font-size: 0.95rem;
	opacity: 0.85;
}
.site-nav a:hover, .site-nav a[aria-current='page'] { opacity: 1; color: var(--steel); }

.lang-toggle {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	border: 1px solid var(--line-day);
	background: transparent;
	color: inherit;
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
}
.lang-toggle:hover { border-color: var(--steel); color: var(--steel); }

a:focus-visible, button:focus-visible {
	outline: 2px solid var(--steel);
	outline-offset: 3px;
	border-radius: 4px;
}

.site-foot {
	border-top: 1px solid var(--line-day);
	margin-block-start: 72px;
	padding-block: 30px 44px;
	font-size: 0.9rem;
	color: var(--muted-day);
}
.site-foot .cols {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.site-foot a { color: inherit; text-decoration: none; }
.site-foot a:hover { color: var(--steel); }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- night theme (landing) ---------------------------------------------- */
body.night {
	background:
		radial-gradient(1100px 500px at 80% -10%, #18202b 0%, transparent 60%),
		var(--ink);
	color: var(--starlight);
}
body.night .brand .mark-alt,
body.night .site-foot { color: var(--muted-night); }
body.night .lang-toggle { border-color: var(--line-night); }
body.night .site-foot { border-top-color: var(--line-night); }
body.night .site-nav a:hover,
body.night .site-nav a[aria-current='page'],
body.night .lang-toggle:hover { color: var(--star); border-color: var(--star); }
html[data-lang='ar'] body.night .p-en,
html[data-lang='en'] body.night .p-ar { color: var(--star); }

/* faint starfield — two layers of tiny radial dots, pure CSS */
body.night::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.2px 1.2px at 12% 18%, rgba(232,237,244,0.5) 50%, transparent 51%),
		radial-gradient(1px 1px at 34% 6%, rgba(232,237,244,0.35) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 58% 12%, rgba(232,237,244,0.4) 50%, transparent 51%),
		radial-gradient(1px 1px at 78% 26%, rgba(232,237,244,0.3) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 92% 8%, rgba(232,237,244,0.45) 50%, transparent 51%);
	background-repeat: no-repeat;
}

/* ---- landing hero -------------------------------------------------------- */
.hero { padding-block: 56px 30px; }
.hero h1 {
	margin: 0 0 14px;
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	line-height: 1.35;
	max-width: 21ch;
}
.hero .lede {
	max-width: 52ch;
	margin: 0;
	font-size: 1.08rem;
	color: var(--platinum);
}
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-block-start: 26px; }
.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border-radius: 999px;
	padding: 11px 24px;
	border: 1px solid transparent;
}
.btn-primary { background: var(--star); color: var(--ink); }
.btn-primary:hover { background: var(--starlight); }
.btn-ghost { border-color: var(--line-night); color: var(--starlight); }
.btn-ghost:hover { border-color: var(--star); color: var(--star); }
.soon {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	border: 1px solid var(--line-night);
	color: var(--muted-night);
	border-radius: 999px;
	padding: 2px 10px;
	margin-inline-start: 10px;
	vertical-align: middle;
}

/* ---- the demo frame: the product, shown doing its job -------------------- */
.demo {
	margin-block-start: 44px;
	border: 1px solid var(--line-night);
	border-radius: var(--radius);
	background: var(--ink-2);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.demo-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--line-night);
}
.demo-bar i {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--line-night);
}
.demo-bar .url {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	color: var(--muted-night);
	margin-inline-start: 10px;
	direction: ltr;
}
.demo-page { padding: 26px 28px 30px; direction: ltr; text-align: left; }
.demo-nav {
	display: flex;
	gap: 26px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line-night);
	font-size: 0.9rem;
}
.demo-nav .item { color: var(--starlight); white-space: nowrap; }
.demo-nav .item .beside {
	color: var(--star);
	font-size: 0.82em;
	margin-inline-start: 8px;
}
.demo-body { margin-top: 20px; max-width: 58ch; }
.demo-body .src { color: var(--starlight); margin: 0 0 6px; }
.demo-body .tr {
	direction: rtl;
	text-align: right;
	color: var(--star);
	margin: 0 0 18px;
	padding-inline-start: 14px;
	border-inline-end: 2px solid var(--steel);
	padding-inline-end: 10px;
}
/* the arrival moment — translations inject like the extension does.
   Pure CSS on load delays: no JS gate, so the message survives disabled
   scripts, screenshots, and slow devices alike. */
.demo .tr, .demo .beside {
	opacity: 0;
	transform: translateY(4px);
	animation: arrive 0.5s ease forwards;
}
.demo .beside { animation-delay: 0.5s; }
.demo .d1 { animation-delay: 0.9s; }
.demo .d2 { animation-delay: 1.3s; }
@keyframes arrive { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.demo .tr, .demo .beside { opacity: 1; transform: none; animation: none; }
}

/* ---- landing sections ---------------------------------------------------- */
.strip {
	display: flex;
	gap: 12px 34px;
	flex-wrap: wrap;
	padding-block: 26px;
	margin-block-start: 26px;
	border-top: 1px solid var(--line-night);
	border-bottom: 1px solid var(--line-night);
	color: var(--platinum);
	font-size: 0.95rem;
}
.strip b { color: var(--starlight); font-weight: 600; }

.land-section { padding-block: 52px 0; }
.land-section h2 { font-size: 1.5rem; margin: 0 0 20px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tile {
	border: 1px solid var(--line-night);
	border-radius: var(--radius);
	padding: 20px 22px;
	background: rgba(21, 26, 33, 0.6);
}
.tile h3 { margin: 0 0 8px; font-size: 1.02rem; font-family: var(--font-display); }
.tile p { margin: 0; color: var(--platinum); font-size: 0.95rem; }

/* pricing cards (shared with /pricing) */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.plan {
	border: 1px solid var(--line-day);
	border-radius: var(--radius);
	background: var(--paper-2);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
body.night .plan { background: rgba(21, 26, 33, 0.7); border-color: var(--line-night); }
.plan .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.plan .price { font-family: var(--font-mono); font-size: 1.9rem; direction: ltr; }
.plan .price small { font-size: 0.85rem; color: var(--muted-day); }
body.night .plan .price small { color: var(--muted-night); }
.plan .cycle { font-size: 0.85rem; color: var(--muted-day); }
body.night .plan .cycle { color: var(--muted-night); }
.plan ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.93rem; }
.plan li { padding-inline-start: 20px; position: relative; }
.plan li::before {
	content: '✦';
	position: absolute;
	inset-inline-start: 0;
	color: var(--steel);
	font-size: 0.8em;
}
body.night .plan li::before { color: var(--star); }
.plan .tokens { font-family: var(--font-mono); direction: ltr; unicode-bidi: embed; }
.plan.featured { border-color: var(--steel); box-shadow: 0 0 0 1px var(--steel); }
body.night .plan.featured { border-color: var(--star); box-shadow: 0 0 0 1px var(--star); }

/* ---- document pages (cold paper) ----------------------------------------- */
.doc-wrap {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	gap: 48px;
	padding-block-start: 30px;
}
.doc-head { padding-block: 26px 6px; border-bottom: 1px solid var(--line-day); }
.doc-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.doc-head .updated {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--muted-day);
	margin-block-start: 10px;
	direction: ltr;
	unicode-bidi: embed;
	text-align: start;
}

/* the required sidebar: section names, sticky, scroll-spied */
.toc {
	position: sticky;
	top: 24px;
	align-self: start;
	font-size: 0.88rem;
	border-inline-start: 2px solid var(--line-day);
}
.toc a {
	display: block;
	padding: 7px 16px;
	color: var(--muted-day);
	text-decoration: none;
	border-inline-start: 2px solid transparent;
	margin-inline-start: -2px;
	line-height: 1.5;
}
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--steel); border-inline-start-color: var(--steel); font-weight: 600; }

.doc { max-width: 68ch; }
.doc section { padding-block: 26px 4px; }
.doc h2 { font-size: 1.18rem; margin: 0 0 12px; scroll-margin-top: 90px; }
.doc p, .doc li { color: #2a313a; }
.doc ul { padding-inline-start: 22px; }
.doc .note {
	border: 1px solid var(--line-day);
	border-inline-start: 3px solid var(--steel);
	border-radius: 8px;
	background: var(--paper-2);
	padding: 14px 18px;
	font-size: 0.94rem;
}
.doc a { color: var(--steel); }
.doc code, .mono { font-family: var(--font-mono); font-size: 0.9em; direction: ltr; unicode-bidi: embed; }

@media (max-width: 820px) {
	.doc-wrap { grid-template-columns: 1fr; gap: 0; }
	.toc {
		position: static;
		display: flex;
		gap: 4px;
		overflow-x: auto;
		border-inline-start: 0;
		border-bottom: 1px solid var(--line-day);
		padding-block-end: 10px;
		margin-block-end: 10px;
	}
	.toc a { white-space: nowrap; border-inline-start: 0; border-bottom: 2px solid transparent; }
	.toc a.on { border-bottom-color: var(--steel); }
}

/* contact card */
.contact-card {
	border: 1px solid var(--line-day);
	border-radius: var(--radius);
	background: var(--paper-2);
	padding: 26px;
	max-width: 480px;
}
.contact-card .addr {
	font-family: var(--font-mono);
	font-size: 1.05rem;
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
	margin-block: 8px;
}