/* VertixApps brochure (Phase I, I4) — A4 pages printed to PDF by tools/brochure/build-brochure.js.
   One stylesheet for both editions; the Arabic edition sets dir="rtl" and its own font. */
@page { size: A4; margin: 0; }
:root {
  --ink: #1d1b2f;
  --muted: #5d5a73;
  --line: #e7e4f2;
  --soft: #f6f4fd;
  --brand: #4a00e0;
  --brand-2: #8e2de2;
  --brand-ink: #3a0fa8;
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: var(--ink); font-family: var(--font); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body { font-size: 10.5pt; line-height: 1.55; }

.page { width: 210mm; height: 297mm; padding: 22mm 20mm 18mm; position: relative; overflow: hidden; page-break-after: always; break-after: page; }
.page:last-child { page-break-after: auto; break-after: auto; }
.page::after { /* page footer */
  content: 'VertixApps · Business Solutions'; position: absolute; bottom: 9mm; inset-inline-start: 20mm; font-size: 8pt; color: #a29fb8; letter-spacing: .02em;
}
.cover::after { content: none; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
h2 { font-size: 22pt; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 11.5pt; font-weight: 700; }
h4 { font-size: 11pt; font-weight: 700; }
p { margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 8.5pt; font-weight: 700; color: var(--brand); margin-bottom: 3mm; }
.mt { margin-top: 9mm; margin-bottom: 4mm; font-size: 17pt; }

/* Cover */
.cover { color: #fff; background: linear-gradient(140deg, #2b0a7a 0%, var(--brand) 45%, var(--brand-2) 100%); display: flex; flex-direction: column; padding: 24mm 22mm; }
.cover .brand { color: #fff; }
.cover-body { margin-top: auto; margin-bottom: 14mm; }
.cover .eyebrow { color: #d9c9ff; }
.cover h1 { font-size: 34pt; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; max-width: 150mm; margin-bottom: 7mm; }
.cover .lead { font-size: 13pt; line-height: 1.55; color: #ece4ff; max-width: 150mm; }
.cover-apps { display: flex; flex-wrap: wrap; gap: 2.5mm; }
.cover-apps span { display: inline-flex; align-items: center; gap: 2mm; padding: 2mm 3.5mm; border-radius: 99px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); font-size: 9.5pt; font-weight: 500; }
.brand { display: inline-flex; align-items: center; gap: 3mm; font-weight: 800; font-size: 15pt; letter-spacing: -.01em; color: var(--ink); }
.brand-mark { width: 9mm; height: 9mm; border-radius: 2.5mm; display: inline-flex; align-items: center; justify-content: center; font-size: 13pt;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.cover .brand-mark { background: rgba(255,255,255,.18); }

/* Content pages */
.page-head { margin-bottom: 8mm; }
.intro { font-size: 12pt; color: var(--muted); margin-bottom: 10mm; max-width: 165mm; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm 9mm; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5mm; }
.feature { display: flex; gap: 4mm; align-items: flex-start; }
.feature > i { flex: 0 0 auto; width: 10mm; height: 10mm; border-radius: 3mm; background: var(--soft); color: var(--brand); display: inline-flex;
  align-items: center; justify-content: center; font-size: 13pt; }
.feature h3 { margin-bottom: 1.5mm; }
.feature p { color: var(--muted); }
.small-cards .feature p { font-size: 9.5pt; }

.layer { margin-bottom: 7mm; }
.layer-title { font-size: 9pt; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 3mm; }
.app-card { border: 1px solid var(--line); border-radius: 4mm; padding: 5mm; background: #fff; }
.app-card > i { font-size: 15pt; color: var(--brand); }
.app-card h4 { margin: 2mm 0 1.5mm; }
.app-card p { color: var(--muted); font-size: 9.5pt; }
.foundation .app-card { background: var(--soft); border-color: transparent; }

/* App pages */
.app-head { display: flex; gap: 6mm; align-items: center; margin-bottom: 7mm; }
.app-icon { flex: 0 0 auto; width: 20mm; height: 20mm; border-radius: 6mm; display: inline-flex; align-items: center; justify-content: center; font-size: 24pt;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.app-head h2 { font-size: 26pt; }
.app-head .eyebrow { margin-bottom: 1mm; }
.purpose { font-size: 13pt; color: var(--muted); margin-top: 1.5mm; }
.who { padding: 3.5mm 5mm; background: var(--soft); border-radius: 3mm; margin-bottom: 7mm; }
.who strong { color: var(--brand-ink); margin-inline-end: 1.5mm; }
ul.checks { list-style: none; padding: 0; margin: 0; }
ul.checks li { position: relative; padding-inline-start: 7mm; margin-bottom: 3.6mm; }
ul.checks li::before { content: '\F26E'; font-family: 'bootstrap-icons'; position: absolute; inset-inline-start: 0; top: .05em; color: var(--brand); font-size: 11pt; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm 9mm; }
.cols h3 { margin-bottom: 3mm; color: var(--brand-ink); }
.cols ul.checks li { margin-bottom: 2.4mm; }
.works { position: absolute; bottom: 20mm; inset-inline: 20mm; padding-top: 5mm; border-top: 1px solid var(--line); color: var(--muted); display: flex; gap: 2.5mm; align-items: baseline; }
.works i { color: var(--brand); }
.works strong { color: var(--ink); }
.split { display: flex; flex-direction: column; gap: 10mm; }
.split .half + .half { padding-top: 10mm; border-top: 1px solid var(--line); }
.trio { display: grid; grid-template-columns: 1fr; gap: 6mm; }
.box { border: 1px solid var(--line); border-radius: 4mm; padding: 6mm 7mm; }
.box h3 { display: flex; gap: 3mm; align-items: center; margin-bottom: 4mm; font-size: 13pt; }
.box h3 i { color: var(--brand); }
.box ul.checks { columns: 2; column-gap: 8mm; }
.box ul.checks li { break-inside: avoid; margin-bottom: 2.4mm; }

/* Getting started */
ol.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; }
ol.steps li { display: flex; flex-direction: column; gap: 3mm; }
ol.steps span { width: 9mm; height: 9mm; border-radius: 50%; background: var(--brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
ol.steps p { color: var(--muted); font-size: 9.5pt; }
.contact { position: absolute; bottom: 20mm; inset-inline: 20mm; padding: 7mm; border-radius: 4mm; background: linear-gradient(135deg, #2b0a7a, var(--brand) 60%, var(--brand-2)); color: #fff; }
.contact .brand { color: #fff; margin-bottom: 3mm; }
.contact .brand-mark { background: rgba(255,255,255,.18); }
.contact-lines { margin-top: 2mm; font-weight: 600; letter-spacing: .02em; }

/* Arabic edition */
[dir="rtl"] body, [dir="rtl"] { --font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; }
[dir="rtl"] .eyebrow, [dir="rtl"] .layer-title { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }

/* Reading size on the app pages: the lists are the page. */
.app-page { font-size: 12.5pt; line-height: 1.6; }
.app-page ul.checks li { margin-bottom: 5.5mm; padding-inline-start: 8mm; }
.app-page ul.checks li::before { font-size: 12.5pt; }
.app-page .who { font-size: 11.5pt; margin-bottom: 9mm; }
.app-page .cols { gap: 9mm 10mm; }
.app-page .cols ul.checks li { margin-bottom: 3.5mm; }
.app-page .cols h3 { font-size: 13pt; margin-bottom: 4mm; }
.app-page .works { font-size: 11pt; }
.app-page .box { padding: 8mm; }
.app-page .box ul.checks li { margin-bottom: 3.5mm; font-size: 11.5pt; }
.app-page .trio { gap: 8mm; }
.split .app-head h2 { font-size: 22pt; }
.split .app-icon { width: 16mm; height: 16mm; font-size: 19pt; }
.split ul.checks li { margin-bottom: 3.8mm; }
ol.steps h3 { margin-bottom: 1.5mm; }
.page > .grid-2 .feature p, .page > .intro { font-size: 11.5pt; }
.page > .grid-2 { gap: 10mm 10mm; }
.works strong { white-space: nowrap; }

/* The logo (assets/logo.png, transparent) in a white tile: it keeps its colours on the purple cover and contact panel. */
.brand-mark { background: #fff !important; padding: 1.2mm; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cover .brand-mark { width: 13mm; height: 13mm; border-radius: 3.5mm; }
.cover .brand { font-size: 18pt; gap: 4mm; }
.contact .brand-mark { width: 11mm; height: 11mm; }
.contact a { color: #fff; text-decoration: none; }
/* Page footer: the logo before the line. */
.page::before { content: ''; position: absolute; bottom: 8.4mm; inset-inline-start: 20mm; width: 4.2mm; height: 3mm;
  background: url('logo.png') center / contain no-repeat; }
.page::after { inset-inline-start: 25.5mm; }
.cover::before { content: none; }

/* Opened in a browser: the pages centred on a grey desk, like a document viewer. Printing / the PDF is unchanged. */
@media screen {
  html, body { background: #e9e7f0; }
  body { padding: 10mm 0; }
  .page:not(.cover) { background: #fff; }
  .page { margin: 0 auto 10mm; box-shadow: 0 2px 18px rgba(30, 20, 60, .18); border-radius: 1.5mm; }
}

/* Arabic edition (K1): the page footer in Arabic; Latin words (the name, the addresses) keep Inter, left-to-right. */
[dir="rtl"] .page::after { content: "VertixApps · حلول الأعمال"; }
.latin { font-family: "Inter", "Segoe UI", sans-serif; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .feature p, [dir="rtl"] .app-card p, [dir="rtl"] ul.checks li { line-height: 1.7; }
[dir="rtl"] .who strong { margin-inline-end: 1mm; }
[dir="rtl"] .cover::after { content: none; }