/* ==========================================================================
   DiceX Connect for WordPress — landing page
   --------------------------------------------------------------------------
   Colours and type are taken from dicex.me and nooti.dicex.me so this page
   reads as part of the same family: the HeroUI blue #006FEE, near-black
   #11181C text, Ravi for Persian.

   Everything here uses logical properties (inline-start/end, not left/right)
   because the same stylesheet serves Persian and Arabic right-to-left and
   English and German left-to-right.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Vazirmatn is the face of this page, bundled in assets/fonts/ under
   the SIL Open Font License 1.1 (OFL.txt sits beside it). One variable file
   carries every weight, which is smaller than the four static cuts it replaces
   and lets headings sit at 800 without another download.

   It covers Latin, Persian and Arabic in one family, so all four languages are
   set in the same voice instead of Persian quietly falling through to whatever
   the reader's machine happens to have — on Windows that is Tahoma, which is a
   poor face to read Persian in.

   Ravi, the brand face used on dicex.me, stays in the stack behind it. Drop its
   woff2 files into assets/fonts/ and it takes over; nothing else changes.
   -------------------------------------------------------------------------- */

@font-face {
	font-family: Vazirmatn;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/vazirmatn-variable.woff2") format("woff2-variations"),
		url("../fonts/vazirmatn-variable.woff2") format("woff2");
}

@font-face {
	font-family: Ravi;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Ravi-Regular.woff2") format("woff2");
}

@font-face {
	font-family: Ravi;
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Ravi-Medium.woff2") format("woff2");
}

@font-face {
	font-family: Ravi;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/Ravi-Bold.woff2") format("woff2");
}

@font-face {
	font-family: Ravi;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/Ravi-Black.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
	--accent: #006fee;
	--brand: #006fee;
	--brand-strong: #005bc4;
	--brand-soft: #e6f1fe;
	--brand-ring: rgba(0 111 238 / 35%);

	--ink: #11181c;
	--ink-2: #3f3f46;
	--ink-3: #71717a;
	--ink-4: #a1a1aa;

	--surface: #ffffff;
	--surface-2: #f7f8fa;
	--surface-3: #eef0f4;
	--line: #e4e4e7;

	--ok: #17c964;
	--warn: #f5a524;

	--radius: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgb(17 24 28 / 5%), 0 1px 3px rgb(17 24 28 / 6%);
	--shadow-2: 0 8px 30px rgb(17 24 28 / 8%);
	--shadow-3: 0 24px 60px rgb(0 91 196 / 14%);

	--maxw: 1120px;
	--gutter: clamp(20px, 5vw, 40px);

	--font: Vazirmatn, Ravi, "IRANSans", -apple-system, BlinkMacSystemFont,
		"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;

	color-scheme: light;
}

html[data-theme="dark"] {
	--brand: #4d97f5;
	--brand-strong: #7bb3f8;
	--brand-soft: #10243c;
	--brand-ring: rgba(77 151 245 / 40%);

	--ink: #ecedee;
	--ink-2: #c3c6c9;
	--ink-3: #9ba1a6;
	--ink-4: #71767b;

	--surface: #0b0f13;
	--surface-2: #11161c;
	--surface-3: #182029;
	--line: #232c36;

	--shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
	--shadow-2: 0 8px 30px rgb(0 0 0 / 45%);
	--shadow-3: 0 24px 60px rgb(0 0 0 / 55%);

	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--brand: #4d97f5;
		--brand-strong: #7bb3f8;
		--brand-soft: #10243c;
		--brand-ring: rgba(77 151 245 / 40%);

		--ink: #ecedee;
		--ink-2: #c3c6c9;
		--ink-3: #9ba1a6;
		--ink-4: #71767b;

		--surface: #0b0f13;
		--surface-2: #11161c;
		--surface-3: #182029;
		--line: #232c36;

		--shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
		--shadow-2: 0 8px 30px rgb(0 0 0 / 45%);
		--shadow-3: 0 24px 60px rgb(0 0 0 / 55%);

		color-scheme: dark;
	}
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.85;
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

:where(html[lang="en"], html[lang="de"]) body {
	line-height: 1.7;
}

h1,
h2,
h3 {
	margin: 0;
	line-height: 1.35;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 {
	font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
}

h2 {
	font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem);
}

h3 {
	font-size: 1.1rem;
	font-weight: 700;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: var(--brand-strong);
	text-decoration-color: rgb(0 91 196 / 30%);
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-color: currentColor;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--brand-soft);
	color: var(--brand-strong);
}

/* Latin numerals and code tokens read left-to-right inside RTL prose. */
.ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

code,
.mono {
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	direction: ltr;
	unicode-bidi: isolate;
}

.skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--brand);
	color: #fff;
	border-radius: 0 0 var(--radius) var(--radius);
	font-weight: 700;
	text-decoration: none;
}

.skip-link:focus {
	inset-inline-start: 12px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

section {
	padding-block: clamp(56px, 8vw, 104px);
	scroll-margin-top: 88px;
}

.section-head {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	margin-block-end: clamp(32px, 5vw, 56px);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 14px;
	padding: 5px 14px;
	border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
	border-radius: var(--radius-pill);
	background: var(--brand-soft);
	color: var(--brand-strong);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.lede {
	margin-block-start: 16px;
	color: var(--ink-3);
	font-size: 1.05rem;
}

.alt {
	background: var(--surface-2);
	border-block: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--surface) 88%, transparent);
	backdrop-filter: blur(14px);
	border-block-end: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 68px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 900;
	font-size: 1.05rem;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}

.brand img {
	width: 30px;
	height: 30px;
}

.brand span {
	color: var(--ink-3);
	font-weight: 500;
	font-size: 0.9rem;
}

.header-spacer {
	flex: 1 1 auto;
	min-width: 0;
}

.header-tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
	background: var(--surface-3);
	border-color: var(--ink-4);
	color: var(--ink);
}

/* --------------------------------------------------------------------------
   Language switcher — a plain list, so it works with JavaScript switched off
   -------------------------------------------------------------------------- */

.lang {
	position: relative;
}

.lang-list {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 8px);
	margin: 0;
	padding: 6px;
	list-style: none;
	min-width: 168px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-2);
}

.lang-list a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: 10px;
	color: var(--ink);
	font-size: 0.92rem;
	text-decoration: none;
}

.lang-list a:hover {
	background: var(--surface-3);
}

.lang-list a[aria-current="true"] {
	color: var(--brand-strong);
	font-weight: 700;
}

.lang-list .tag {
	margin-inline-start: auto;
	color: var(--ink-4);
	font-size: 0.78rem;
}

/*
 * A flag is a picture, so it keeps its own orientation on an RTL page — only
 * the space around it flips, which the inline-start margin above handles.
 * The hairline matters: three of the four have white at an edge and would
 * otherwise bleed into the menu.
 */
.flag {
	flex: none;
	width: 21px;
	height: 16px;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgb(17 24 28 / 14%);
}

html[data-theme="dark"] .flag {
	box-shadow: 0 0 0 1px rgb(255 255 255 / 22%);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .flag {
		box-shadow: 0 0 0 1px rgb(255 255 255 / 22%);
	}
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font: inherit;
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	background: var(--brand);
	color: #fff;
	box-shadow: 0 6px 18px var(--brand-ring);
}

.btn-primary:hover {
	background: var(--brand-strong);
	box-shadow: 0 10px 26px var(--brand-ring);
}

.btn-ghost {
	background: var(--surface);
	border-color: var(--line);
	color: var(--ink);
}

.btn-ghost:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
	background: var(--surface);
}

.btn-lg {
	padding: 16px 32px;
	font-size: 1.05rem;
}

.btn svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	padding-block: clamp(56px, 9vw, 116px) clamp(48px, 7vw, 88px);
	overflow: hidden;
}

.hero::before {
	content: "";
	position: absolute;
	inset-block-start: -280px;
	inset-inline-start: 50%;
	translate: -50% 0;
	width: min(1000px, 130vw);
	height: 640px;
	background: radial-gradient(
		closest-side,
		color-mix(in srgb, var(--brand) 16%, transparent),
		transparent
	);
	pointer-events: none;
	z-index: -1;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.hero-mark {
	justify-self: center;
	width: min(320px, 78vw);
	height: auto;
	filter: drop-shadow(0 26px 50px var(--brand-ring));
}

.hero h1 .accent {
	background: linear-gradient(
		100deg,
		var(--brand) 0%,
		color-mix(in srgb, var(--brand) 55%, #22d3ee) 55%,
		var(--brand-strong) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Safari has shipped -webkit-background-clip for years, but a browser without
   either property would paint the headline in transparent. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.hero h1 .accent {
		color: var(--brand);
	}
}

.hero-lede {
	margin-block-start: 22px;
	max-width: 46ch;
	font-size: 1.1rem;
	color: var(--ink-2);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 30px;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-block-start: 26px;
	color: var(--ink-3);
	font-size: 0.9rem;
}

.hero-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.hero-meta svg {
	width: 16px;
	height: 16px;
	color: var(--ok);
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Channel chips
   -------------------------------------------------------------------------- */

.chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Each channel carries its own mark and its own accent, set per item by the
 * build as --accent. Bale Bot and Safir deliberately share a mark and an accent
 * while keeping their own names — two services, one brand behind them.
 */
.chan {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 18px 9px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	box-shadow: var(--shadow-1);
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

[dir="rtl"] .chan {
	padding: 9px 10px 9px 18px;
}

.chan:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}

.chan-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--accent) 14%, var(--surface));
	color: var(--accent);
}

.chan-mark svg {
	width: 18px;
	height: 18px;
}

.chan-mark img {
	width: 19px;
	height: 19px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.card {
	position: relative;
	padding: 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-1);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* A hairline of the card's own accent along the top edge, drawn in on hover. */
.card::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: linear-gradient(
		to right,
		var(--accent),
		color-mix(in srgb, var(--accent) 25%, transparent)
	);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.card:hover {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
	box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 18%, transparent);
	transform: translateY(-3px);
}

.card:hover::before {
	opacity: 1;
}

.card h3 {
	margin-block-end: 10px;
}

.card p {
	color: var(--ink-3);
	font-size: 0.96rem;
}

.card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-block-end: 16px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--accent) 13%, var(--surface));
	color: var(--accent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.card-icon svg {
	width: 23px;
	height: 23px;
}

.card-icon img {
	width: 26px;
	height: 26px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Feature rows
   -------------------------------------------------------------------------- */

.feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}

.feature + .feature {
	margin-block-start: clamp(48px, 7vw, 88px);
}

.feature h2 {
	font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.95rem);
}

.feature p {
	margin-block-start: 16px;
	color: var(--ink-3);
}

.checklist {
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.checklist li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--ink-2);
	font-size: 0.97rem;
}

.checklist svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-block-start: 3px;
	color: var(--brand);
}

/* A small illustrative panel that stands in for a screenshot. */
.panel {
	padding: 22px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-2);
}

.panel-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-block-end: 16px;
	color: var(--ink-3);
	font-size: 0.85rem;
	font-weight: 700;
}

.panel-title::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ok);
	flex: 0 0 auto;
}

.chain {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
	counter-reset: step;
}

.chain li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 14px;
	font-size: 0.94rem;
	color: var(--ink-2);
}

.chain li::before {
	counter-increment: step;
	content: counter(step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand-strong);
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}

.chain li .state {
	margin-inline-start: auto;
	color: var(--ink-4);
	font-size: 0.82rem;
}

.chain li.is-sent {
	border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
}

.chain li.is-sent .state {
	color: var(--ok);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */

.steps {
	counter-reset: n;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.steps li {
	position: relative;
	padding: 28px 26px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

.steps li::before {
	counter-increment: n;
	content: counter(n);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-block-end: 14px;
	border-radius: 12px;
	background: var(--brand);
	color: #fff;
	font-weight: 900;
	font-variant-numeric: tabular-nums;
}

.steps h3 {
	margin-block-end: 8px;
}

.steps p {
	color: var(--ink-3);
	font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Download banner
   -------------------------------------------------------------------------- */

.banner {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 5vw, 60px);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #0b2a5b 0%, #005bc4 55%, #006fee 100%);
	color: #fff;
	box-shadow: var(--shadow-3);
}

.banner::after {
	content: "";
	position: absolute;
	inset-block-start: -120px;
	inset-inline-end: -80px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 16%), transparent);
	pointer-events: none;
}

.banner h2 {
	color: #fff;
	max-width: 20ch;
}

.banner p {
	margin-block-start: 14px;
	max-width: 56ch;
	color: rgb(255 255 255 / 82%);
}

.banner .btn-primary {
	background: #fff;
	color: #00408c;
	box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
}

.banner .btn-primary:hover {
	background: #eaf2ff;
	color: #00306b;
}

.banner .btn-ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 45%);
	color: #fff;
}

.banner .btn-ghost:hover {
	background: rgb(255 255 255 / 12%);
	border-color: #fff;
	color: #fff;
}

.banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 28px;
	position: relative;
}

.banner-note {
	margin-block-start: 18px;
	font-size: 0.86rem;
	color: rgb(255 255 255 / 70%);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
	max-width: 820px;
	margin-inline: auto;
	display: grid;
	gap: 12px;
}

.faq details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.faq details[open] {
	border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	color: var(--ink);
}

.faq summary::-webkit-details-marker {
	display: none;
}

/* Physical borders on purpose: a logical border-inline-end flips in Persian and
   Arabic and the chevron ends up pointing sideways instead of down. */
.faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-block-end: 4px;
	border-right: 2px solid var(--ink-4);
	border-bottom: 2px solid var(--ink-4);
	rotate: 45deg;
	transition: rotate 0.18s ease;
}

.faq details[open] summary::after {
	rotate: -135deg;
}

.faq .answer {
	padding: 0 22px 20px;
	color: var(--ink-3);
	font-size: 0.97rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
	padding-block: clamp(40px, 6vw, 64px) 32px;
	background: var(--surface-2);
	border-block-start: 1px solid var(--line);
	color: var(--ink-3);
	font-size: 0.93rem;
}

/*
 * Four columns, stated. The previous rule mixed a fixed 1.4fr track with
 * repeat(auto-fit, minmax(160px, 1fr)), and auto-fit keeps generating tracks
 * for whatever width is left — so on a wide screen the footer grew more columns
 * than it had content, and the three link lists were stretched across the
 * leftovers. auto-fit belongs in a grid of unknown length; a footer has exactly
 * four blocks.
 */
.footer-grid {
	display: grid;
	gap: clamp(28px, 4vw, 56px);
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	margin-block-end: 40px;
}

@media (max-width: 900px) {
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-grid > :first-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.footer-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The blurb reads badly at full footer width whatever the column does. */
.footer-grid > :first-child p {
	max-width: 40ch;
}

.site-footer h3 {
	margin-block-end: 14px;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-4);
}

.site-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.site-footer a {
	color: var(--ink-2);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--brand-strong);
	text-decoration: underline;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--line);
	color: var(--ink-4);
	font-size: 0.86rem;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.hero-grid,
	.feature {
		grid-template-columns: 1fr;
	}

	.hero-mark {
		order: -1;
		width: min(210px, 52vw);
	}

	.feature .panel {
		order: 2;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 16px;
	}

	.brand span {
		display: none;
	}

	.hero-actions .btn,
	.banner-actions .btn {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   Depth

   The page was correct but flat — six full-width bands of near-identical
   colour, one after another. These rules add light and separation without
   adding weight: no images, no script, nothing that shifts the layout.
   -------------------------------------------------------------------------- */

/*
 * Two soft brand-coloured pools of light behind the hero. The gradients are
 * transparent at their edges, so they read as glow rather than as shapes, and
 * they sit behind everything the hero draws.
 */
.hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset-block-start: -20%;
	inset-inline-end: -10%;
	width: min(760px, 90vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(
		circle at center,
		color-mix(in srgb, var(--brand) 16%, transparent) 0%,
		transparent 68%
	);
	pointer-events: none;
}

.hero > .wrap {
	position: relative;
	z-index: 1;
}

/*
 * The alternating sections were separated by a 1px line and a barely different
 * grey. A gradient that fades out towards the middle of the band gives the eye
 * an edge to catch without drawing an actual divider.
 */
.alt {
	position: relative;
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--brand) 4%, var(--surface-2)) 0%,
			var(--surface-2) 42%,
			var(--surface-2) 100%
		);
}

/*
 * A hairline that is brand-coloured in the middle and invisible at both ends,
 * which is a far quieter join than a full-width border.
 */
.alt::before {
	content: "";
	position: absolute;
	inset-block-start: -1px;
	inset-inline: 0;
	height: 1px;
	background: linear-gradient(
		to right,
		transparent,
		color-mix(in srgb, var(--brand) 40%, transparent),
		transparent
	);
}

/* The mark in the hero breathes on its own, slowly, and not at all for anyone
   who has asked their system for less motion (handled by the global
   prefers-reduced-motion block at the end of this file). */
.hero-mark {
	animation: float 9s ease-in-out infinite;
}

@keyframes float {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 -12px;
	}
}

/*
 * Sections arrive as they come into view, driven by the CSS scroll-driven
 * animation API — no observer and no script.
 *
 * It animates position only, never opacity, and that is deliberate. An element
 * near the end of the document can enter the viewport and still never finish
 * its entry range, because the page runs out of scroll first; on a tall
 * viewport that is most of the last screen. Fading from zero meant those
 * elements stayed at opacity 0 for good — three feature rows and half the steps
 * were invisible at the bottom of this page before this was changed. A reveal
 * is decoration and must never be the thing that decides whether copy can be
 * read, so the worst case here is a paragraph sitting 22px low.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.card,
		.steps li,
		.feature,
		.chan {
			animation: rise linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}
}

@keyframes rise {
	from {
		translate: 0 22px;
	}

	to {
		translate: 0 0;
	}
}

/* The download banner is the one place worth a strong ground of its own. */
.banner {
	position: relative;
	overflow: hidden;
}

.banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(
			ellipse 70% 120% at 20% 0%,
			color-mix(in srgb, var(--brand) 13%, transparent),
			transparent 70%
		),
		radial-gradient(
			ellipse 60% 110% at 85% 100%,
			color-mix(in srgb, var(--brand) 10%, transparent),
			transparent 70%
		);
	pointer-events: none;
}

/*
 * The numbered steps read as a sequence, so the counter is worth showing as
 * one: a tinted disc rather than a bare digit.
 */
.steps li::before {
	background: linear-gradient(
		135deg,
		var(--brand),
		color-mix(in srgb, var(--brand) 60%, #22d3ee)
	);
	color: #fff;
	box-shadow: 0 6px 16px var(--brand-ring);
}

@media print {
	.site-header,
	.banner-actions,
	.hero-actions {
		display: none;
	}
}