/* Mafhoom · مفهوم — the /flyer page: the A5 flyer PDF (assets/files/mafhoom-flyer-ar.pdf) rebuilt as two real pages of text.
   Every size inside a sheet is in cqw (1cqw = 1% of the sheet's width), measured from the PDF, so each page scales exactly like
   the PDF does and never reflows. A sheet is a printed page: it stays light in dark mode. Works in LTR (English) and RTL (Arabic)
   through logical properties. */

.fl-viewer { background: var(--surface-sunken); padding-block: clamp(24px, 5vw, 56px) clamp(40px, 7vw, 88px); }
.fl-viewer__inner { display: grid; justify-items: center; gap: clamp(16px, 3vw, 28px); }
.fl-toolbar { width: min(100%, 680px); display: flex; justify-content: flex-end; }

.fl-sheet {
  --fl-blue: #0b5bd8; --fl-blue-dark: #0a39ae; --fl-mint: #00e8a2; --fl-ink: #0e2342; --fl-tint: #e4effd;
  container-type: inline-size; position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, 680px); aspect-ratio: 437.04 / 612; background: #fff; color: var(--fl-ink);
  box-shadow: 0 1px 2px rgba(10, 30, 70, .12), 0 12px 40px rgba(10, 30, 70, .16);
  font-size: 2.4cqw; line-height: 1.5;
}
.fl-sheet > * { position: absolute; margin: 0; }
.fl-sheet h1, .fl-sheet h2, .fl-sheet h3, .fl-sheet p { letter-spacing: 0; }
.fl-sheet .ic { stroke-width: 1.7; }
.fl-accent { color: var(--fl-mint); }

/* ---------- Page 1: cover ---------- */
.fl-sheet--cover { background: linear-gradient(176deg, #0a7cf0 0%, #0b56d9 45%, #0a39ae 100%); color: #fff; }
.fl-cover__arc { inset-block-start: -57.7cqw; inset-inline-start: -107.3cqw; width: 128cqw; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .2); z-index: 0; }
.fl-cover__disc { inset-inline-end: -61cqw; inset-block-start: 123.9cqw; width: 137.6cqw; aspect-ratio: 1; border-radius: 50%; background: var(--fl-mint); z-index: 0; }
.fl-cover__logo { inset-block-start: 10.3cqw; inset-inline-start: 8.9cqw; width: 21.6cqw; height: auto; z-index: 1; }
.fl-wave {
  inset-inline: 0; inset-block-start: 37.5cqw; height: 8.6cqw; z-index: 1;
  background: url("../img/flyer/flyer-wave-hero.svg?v=4aade6b4d3") repeat-x center / 11.3cqw auto;
}
[dir="rtl"] .fl-wave { -webkit-mask-image: linear-gradient(to left, #000 20%, rgba(0,0,0,.25) 98%); mask-image: linear-gradient(to left, #000 20%, rgba(0,0,0,.25) 98%); }
[dir="ltr"] .fl-wave { -webkit-mask-image: linear-gradient(to right, #000 20%, rgba(0,0,0,.25) 98%); mask-image: linear-gradient(to right, #000 20%, rgba(0,0,0,.25) 98%); transform: scaleX(-1); }
.fl-cover__title { inset-block-start: 50cqw; inset-inline: 9cqw; font-size: 8cqw; font-weight: 700; line-height: 1.3; z-index: 1; }
.fl-cover__lead { inset-block-start: 73.3cqw; inset-inline: 9cqw; max-inline-size: 64cqw; font-size: 2.6cqw; line-height: 1.82; font-weight: 400; z-index: 1; }
html[lang="en"] .fl-cover__title { font-size: 6.2cqw; font-weight: 500; line-height: 1.2; }
html[lang="en"] .fl-cover__lead { inset-block-start: 76cqw; line-height: 1.65; font-size: 2.45cqw; }
.fl-stats { inset-block-start: 102.4cqw; inset-inline: 9cqw; height: 15.9cqw; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.1cqw; z-index: 1; }
.fl-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; text-align: center; border-radius: 2.8cqw; background: rgba(255, 255, 255, .15); }
.fl-stat .ic { width: 2.6cqw; height: 2.6cqw; color: rgba(255, 255, 255, .85); }
.fl-stat__num { font-size: 4.4cqw; font-weight: 700; line-height: 1.2; color: var(--fl-mint); unicode-bidi: isolate; }
.fl-stat__label { font-size: 1.8cqw; line-height: 1.3; padding-inline: 1cqw; }
.fl-cover__site { inset-block-end: 8.6cqw; inset-inline-start: 9cqw; font-size: 2.7cqw; font-weight: 700; z-index: 1; }
[dir="rtl"] .fl-cover__site { text-align: right; }

/* ---------- Page 2 ---------- */
.fl-band { inset: 0 0 auto 0; height: 5.7cqw; background: url("../img/flyer/flyer-wave-band.svg?v=42ae9d23a4") repeat-x top / 10.4cqw auto; }
.fl-sheet--inner > :not(.fl-band) { inset-inline: 9cqw; }
.fl-h { color: var(--fl-blue); font-size: 3.9cqw; font-weight: 700; line-height: 1.3; }
.fl-sheet--inner > .fl-h:nth-of-type(1) { inset-block-start: 9.4cqw; }
.fl-intro { inset-block-start: 15cqw; font-size: 2.45cqw; line-height: 1.58; }
.fl-feats { inset-block-start: 27.5cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 2.1cqw; }
.fl-feat { display: block; margin: 0; padding: 1.1cqw; background: var(--fl-tint); border-radius: 3cqw; }
.fl-feat img { display: block; width: 100%; height: auto; aspect-ratio: 495 / 275; object-fit: cover; border-radius: 1.7cqw; }
.fl-feat figcaption { padding: 1.3cqw 1.2cqw .9cqw; }
.fl-feat h3 { color: var(--fl-blue); font-size: 2.3cqw; font-weight: 700; line-height: 1.3; }
.fl-feat p { margin-block-start: .3cqw; font-size: 1.8cqw; line-height: 1.5; }
.fl-sheet--inner > .fl-h:nth-of-type(2) { inset-block-start: 62.2cqw; }
.fl-prods { inset-block-start: 67.7cqw; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.3cqw 1.6cqw; }
.fl-prod { display: flex; align-items: center; gap: 1.3cqw; padding: .8cqw 1.4cqw; background: var(--fl-tint); border-radius: 2.2cqw; border-inline-end: .55cqw solid var(--fl-mint); }
.fl-prod__ic { flex: none; display: grid; place-items: center; width: 4.8cqw; height: 4.8cqw; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0b52cf, #0d86ea); }
.fl-prod__ic .ic { width: 2.4cqw; height: 2.4cqw; }
.fl-prod h3 { color: var(--fl-blue); font-size: 2.1cqw; font-weight: 700; line-height: 1.3; }
.fl-prod p { font-size: 1.7cqw; line-height: 1.5; }
.fl-closing { inset-block-start: 97.2cqw; color: var(--fl-blue); font-size: 2.1cqw; font-weight: 700; }
.fl-sheet--inner > .fl-h:nth-of-type(3) { inset-block-start: 102cqw; }
.fl-partners { inset-block-start: 107.2cqw; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5cqw; }
.fl-partners li { display: grid; place-items: center; height: 5.8cqw; padding: .8cqw 1.2cqw; background: #fff; border: .18cqw solid #cfe0f7; border-radius: 1.5cqw; }
.fl-partners img { max-width: 100%; max-height: 3.6cqw; width: auto; height: auto; }
.fl-foot { inset-block-start: 118.3cqw; display: flex; align-items: center; justify-content: flex-start; gap: 2cqw; padding-block-start: 2cqw; border-block-start: .12cqw solid var(--fl-mint); }
.fl-foot__qr { width: 11cqw; height: 11cqw; image-rendering: pixelated; }
.fl-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .7cqw; font-size: 2.4cqw; }
.fl-contact li { display: flex; align-items: center; gap: 1.2cqw; }
.fl-contact a { color: inherit; text-decoration: none; unicode-bidi: isolate; }
.fl-contact__ic { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #0b52cf, #0d86ea); }
.fl-contact__ic .ic { width: 1.7cqw; height: 1.7cqw; }
.fl-foot__logo { margin-inline-start: auto; width: 9cqw; height: auto; }

/* English copy is longer than the Arabic the pages were measured from, so its text is a little smaller. */
html[lang="en"] .fl-intro { font-size: 2cqw; line-height: 1.5; }
html[lang="en"] .fl-feat h3 { font-size: 2.1cqw; }
html[lang="en"] .fl-feat p { font-size: 1.55cqw; line-height: 1.45; }
html[lang="en"] .fl-prod h3 { font-size: 1.95cqw; }
html[lang="en"] .fl-prod p { font-size: 1.5cqw; line-height: 1.4; }
html[lang="en"] .fl-prod { padding-block: .6cqw; }
html[lang="en"] .fl-closing { font-size: 1.95cqw; }
html[lang="en"] .fl-stat__label { font-size: 1.6cqw; }

@media print {
  .fl-viewer { background: none; padding: 0; }
  .fl-toolbar { display: none; }
  .fl-sheet { box-shadow: none; break-after: page; width: 148mm; }
}