/* KYNVO welcome page (v3.65.1): one flowing page — navy words on white, one illustration, no boxes.
   Who we are + the idea, then the language choice at the bottom (a bar that stays in thumb reach on phones).
   Opens at the start of every visit, over whatever page someone lands on. Motion: opacity / translate only. */
html.splash-open, html.splash-open body { overflow: hidden; }
/* v3.28.1: while the gateway is open, <main> must not be transformed or animated (a transform would trap the fixed gateway inside it). */
html.splash-open main.wrap { animation: none; transform: none; }
/* v3.68: while the welcome page is open, the page under it is not drawn at all. Before, its English headings
   showed under / around the welcome text (full-page captures, very tall windows, the first frames of the fade-in). */
body.has-splash > :not(main):not(script):not(style):not(noscript),
body.has-splash main > :not(.splash):not(script):not(style) { display: none !important; }
body.has-splash main { padding: 0; margin: 0; min-height: 0; }

.splash {
  --sp-navy: #0b2d6b; --sp-navy-soft: #4a5f8a; --sp-teal: #0f766e;
  position: fixed; inset: 0; z-index: 100; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: #fff; color: var(--sp-navy);
  font-family: "Montserrat", "IBM Plex Sans Arabic", system-ui, sans-serif;
  transition: opacity .45s ease, transform .45s ease;
}
.splash-inner {
  width: min(640px, 100%); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 22px 12px;
  text-align: center; flex: 1 0 auto;
}

.sp-logo { display: block; width: min(190px, 46vw); height: auto; margin: 0 auto 6px; }
.sp-art { display: block; width: min(420px, 88%); height: auto; margin: 0 auto 6px; }

.sp-headline .sp-ar { margin: 0; font: 700 clamp(24px, 5vw, 32px)/1.45 "IBM Plex Sans Arabic", system-ui, sans-serif; }
.sp-headline .sp-en { margin: 4px 0 0; font-size: clamp(14px, 2.6vw, 16px); font-weight: 500; color: var(--sp-navy-soft); }

/* The flowing text: small headings, then paragraphs; Arabic first, the English line under it in a softer navy */
.sp-flow { margin-top: 26px; }
.sp-flow h2 {
  margin: 30px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-teal);
}
.sp-flow h2:first-child { margin-top: 0; }
.sp-flow p { margin: 0; }
.sp-flow .sp-ar { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; font-size: 17px; line-height: 1.85; }
.sp-flow .sp-en { margin: 4px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--sp-navy-soft); }
.sp-flow .sp-idea.sp-ar { margin-top: 16px; }
.sp-flow strong { font-weight: 700; }
.sp-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-inline-end: 4px; vertical-align: 2px;
  border-radius: 50%; background: var(--sp-navy); color: #fff; font: 700 12px/1 var(--mono, monospace);
}

/* ---- Language choice at the bottom (sticky = always in thumb reach) ---- */
.sp-cta {
  position: sticky; bottom: 0; z-index: 2; margin-top: 26px;
  padding: 14px 22px max(14px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid #e3e8f1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sp-cta > * { width: min(640px, 100%); margin-inline: auto; }
.sp-prompt { margin: 0 auto 10px; text-align: center; font-weight: 700; font-size: 15px; }
.splash-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.splash-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 56px; padding: 12px 18px; border-radius: 12px; text-decoration: none; font-size: 16.5px; font-weight: 500;
  color: var(--sp-navy); background: #fff; border: 2px solid var(--sp-navy);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.splash-choice strong { font-weight: 800; }
.splash-choice[lang="ar"] { font-family: "IBM Plex Sans Arabic", system-ui, sans-serif; }
.splash-choice.sp-primary { background: var(--sp-navy); color: #fff; }
.splash-choice .arrow { font-size: 20px; line-height: 1; transition: transform .15s ease; }
.splash-choice:hover, .splash-choice:focus-visible { background: #eef2fa; outline: 3px solid rgba(11, 45, 107, .25); outline-offset: 2px; }
.splash-choice.sp-primary:hover, .splash-choice.sp-primary:focus-visible { background: #123d8c; }
.splash-choice:active { transform: scale(.98); }
.splash-choice[dir="rtl"]:hover .arrow { transform: translateX(-4px); }
.splash-choice[dir="ltr"]:hover .arrow { transform: translateX(4px); }
.splash-note { margin: 10px auto 0; text-align: center; font-size: 12.5px; color: var(--sp-navy-soft); }
@media (max-width: 640px) {
  .sp-cta { padding-top: 10px; }
  .sp-prompt { font-size: 13.5px; margin-bottom: 8px; }
  .splash-note { display: none; }
  .splash-choices { grid-template-columns: 1fr; gap: 8px; }
  .splash-choice { min-height: 52px; }
}

/* ---- Entrance (only once JS adds .is-ready; without JS everything is visible) ---- */
.splash [data-sp-in] { opacity: 0; translate: 0 10px; }
.splash.is-ready [data-sp-in] { animation: sp-up .45s ease forwards; }
.splash.is-ready [data-sp-in]:nth-child(2) { animation-delay: .06s; }
.splash.is-ready [data-sp-in]:nth-child(3) { animation-delay: .12s; }
.splash.is-ready [data-sp-in]:nth-child(4) { animation-delay: .18s; }
.splash.is-leaving { opacity: 0; transform: scale(1.02); pointer-events: none; }
@keyframes sp-up { to { opacity: 1; translate: 0 0; } }

/* Night mode visitors still get the white page (it is the brand's welcome), so nothing to override here. */
@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; transition: none !important; }
  .splash [data-sp-in] { opacity: 1 !important; translate: none !important; }
}
/* v3.65.1: night mode must not repaint the welcome page (it is white with navy words in both modes) */
html[data-dark] .splash, html[data-dark] .splash h2, html[data-dark] .splash p, html[data-dark] .splash p strong { color: var(--sp-navy); }
html[data-dark] .splash .sp-flow h2 { color: var(--sp-teal); }
html[data-dark] .splash .sp-en, html[data-dark] .splash .splash-note { color: var(--sp-navy-soft); }
html[data-dark] .splash a.splash-choice { color: var(--sp-navy); background: #fff; }
html[data-dark] .splash a.splash-choice.sp-primary { color: #fff; background: var(--sp-navy); }
/* the illustration fades into the page instead of ending on a hard edge */
.sp-art { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
html[data-dark] .splash a.splash-choice strong { color: inherit; }
/* v3.65.2: the two choices stacked on every screen, English on top, Arabic under it */
.splash-choices { grid-template-columns: 1fr; width: min(460px, 100%); margin-inline: auto; }
/* v3.67.2 (owner's request): the language choice sits at the end of the page, it no longer stays pinned */
.sp-cta { position: static; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 32px; padding-top: 22px; padding-bottom: max(28px, env(safe-area-inset-bottom)); }

/* =============================================================================
   v3.71 — a short welcome: headline + three paper flash cards + language choice.
   Hand-made look on purpose (paper, tape, ruled lines, marker, wobbly doodles),
   but the words stay plain and easy to read.
   ============================================================================= */
.sp-logo { width: min(170px, 42vw); margin-bottom: 18px; }
.sp-headline .sp-ar { font-size: clamp(26px, 6.4vw, 36px); line-height: 1.35; }
.sp-headline .sp-en { margin-top: 2px; }
/* marker highlight, slightly uneven like a real highlighter stroke */
.sp-marker {
  color: inherit; background: none; padding: 0 .12em;
  background-image: linear-gradient(100deg, rgba(242, 179, 61, 0) 1%, rgba(242, 179, 61, .75) 3%, rgba(242, 179, 61, .55) 96%, rgba(242, 179, 61, 0) 99%);
  background-size: 100% .5em; background-repeat: no-repeat; background-position: 0 85%;
  border-radius: .2em .5em .3em .6em;
}

/* the deck: a row you swipe on phones, three cards side by side (slightly fanned) on wider screens */
.sp-deck {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 280px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: 26px -22px 0; padding: 18px 22px 22px; scroll-padding-inline: 22px;
}
.sp-deck::-webkit-scrollbar { display: none; }
@media (min-width: 760px) {
  .splash-inner { width: min(940px, 100%); }
  .sp-deck { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; gap: 26px; }
}

.sp-card {
  --tilt: -2deg; --paper: #fffdf7;
  position: relative; display: block; width: 100%; min-height: 214px; padding: 0; border: 0; margin: 0;
  background: none; color: var(--sp-navy); font: inherit; text-align: center; cursor: pointer;
  scroll-snap-align: center; transform: rotate(var(--tilt)); perspective: 900px;
  transition: transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.sp-card:nth-child(2) { --tilt: 1.6deg; }
.sp-card:nth-child(3) { --tilt: -1deg; }
.sp-card:hover { transform: rotate(0deg) translateY(-3px); }
.sp-card:focus-visible { outline: none; }
.sp-card:focus-visible .sp-face { box-shadow: 0 0 0 3px rgba(11, 45, 107, .45), 0 12px 22px -12px rgba(11, 45, 107, .45); }

.sp-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 26px 16px 18px; border-radius: 3px 4px 3px 5px; background: var(--paper);
  box-shadow: 0 1px 1px rgba(11, 45, 107, .08), 0 2px 3px rgba(11, 45, 107, .06), 0 14px 24px -14px rgba(11, 45, 107, .45);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.3, .7, .2, 1);
}
.sp-back { transform: rotateY(180deg); justify-content: center; gap: 10px; padding-inline: 20px; }
.sp-card[aria-pressed="true"] .sp-front { transform: rotateY(-180deg); }
.sp-card[aria-pressed="true"] .sp-back { transform: rotateY(0deg); }

/* the three papers */
.sp-card-sticky { --paper: #fff1a8; }
.sp-card-sticky .sp-face { border-radius: 2px; background: linear-gradient(170deg, #fff6c2, #ffeb8f 92%); }
.sp-card-ruled .sp-face {
  background-color: #fffdf8;
  background-image:
    linear-gradient(90deg, transparent 30px, rgba(220, 80, 80, .35) 30px, rgba(220, 80, 80, .35) 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(70, 120, 200, .18) 25px 26px);
  background-position: 0 0, 0 30px;
}
html[dir="rtl"] .sp-card-ruled .sp-face { background-image:
    linear-gradient(270deg, transparent 30px, rgba(220, 80, 80, .35) 30px, rgba(220, 80, 80, .35) 31.5px, transparent 31.5px),
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(70, 120, 200, .18) 25px 26px); }
.sp-card-mint .sp-face { background-color: #e3f6ef; background-image: radial-gradient(rgba(15, 118, 110, .22) 1px, transparent 1.4px); background-size: 14px 14px; }

/* a strip of masking tape holding each card */
.sp-tape {
  position: absolute; z-index: 3; top: -11px; left: 50%; width: 86px; height: 24px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(232, 220, 190, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
  mask-image: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent calc(100% - 2px));
  pointer-events: none;
}
.sp-card:nth-child(2) .sp-tape { transform: translateX(-50%) rotate(3deg); background: rgba(160, 214, 205, .7); }
.sp-card:nth-child(3) .sp-tape { transform: translateX(-50%) rotate(-2deg); background: rgba(246, 196, 120, .62); }
.sp-card[aria-pressed="true"] .sp-tape { opacity: 0; transition: opacity .15s; }

/* the number in a hand-drawn circle */
.sp-num {
  position: absolute; top: 12px; inset-inline-start: 14px; width: 26px; height: 26px; display: grid; place-items: center;
  font: 700 14px/1 "Montserrat", system-ui, sans-serif; color: var(--sp-navy);
  border: 2px solid var(--sp-navy); border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; transform: rotate(-8deg);
}
html[dir="rtl"] .sp-num { inset-inline-start: auto; inset-inline-end: 14px; }
.sp-card-ruled .sp-num { inset-inline-start: 40px; }

.sp-doodle { width: 116px; height: auto; overflow: visible; fill: none; stroke: var(--sp-navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.sp-doodle .d-accent { stroke: var(--sp-teal); }
.sp-card-mint .sp-doodle .d-accent { stroke: #c27c0e; }

.sp-front .sp-ar { font: 700 21px/1.35 "IBM Plex Sans Arabic", system-ui, sans-serif; }
.sp-front .sp-en { font-size: 13.5px; font-weight: 600; color: var(--sp-navy-soft); }
.sp-back .sp-ar { font: 600 16.5px/1.75 "IBM Plex Sans Arabic", system-ui, sans-serif; }
.sp-back .sp-en { font-size: 13.5px; line-height: 1.55; color: var(--sp-navy-soft); }

.sp-hint { margin: 2px 0 0; font-size: 13px; color: var(--sp-navy-soft); }
.sp-cta { margin-top: 18px; padding-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .sp-face { transition: none; }
  .sp-card { transform: none; }
}

/* v3.73: the "tap a card" hint is big and bold; on phones the cards stack top to bottom (no side swipe) */
.sp-hint { margin: 6px 0 0; font-size: 16.5px; font-weight: 800; color: var(--sp-navy); }
.sp-hint bdi { white-space: nowrap; }
@media (max-width: 759.98px) {
  .sp-deck { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none;
    width: min(340px, 100%); margin: 22px auto 0; padding: 14px 0 12px; gap: 26px; }
  .sp-card { min-height: 168px; }
  .sp-face { padding: 22px 14px 14px; gap: 4px; }
  .sp-doodle { width: 96px; }
  .sp-front .sp-ar { font-size: 20px; }
  .sp-hint { font-size: 15.5px; }
  .sp-hint bdi { display: block; white-space: normal; }
  .sp-hint bdi + bdi { font-size: 14px; }
}
@media (max-width: 759.98px) { .sp-hint .sp-dot { display: none; } }

/* ---- v3.80: the cards are real 3D cards --------------------------------------------------------------------
   The card is the 3D stage (perspective); .sp-inner holds both faces and turns as one piece.
   At rest it leans 15deg on the Y axis so the two sides read as a card; flipped = 180deg.
   With JS (splash.js) the deck starts flipped (backs showing) and splash.js turns the cards to the front in a wave
   the first time the deck is on screen; without JS (or with reduced motion) they simply rest on the front. */
.sp-card { perspective: 1000px; cursor: pointer; }
.sp-inner {
  --sp-rest: 15deg;
  position: absolute; inset: 0; display: block;
  transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
  transform: rotateY(var(--sp-rest));
  transition: transform .75s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--sp-delay, 0ms);
}
.sp-card[aria-pressed="true"] .sp-inner { transform: rotateY(180deg); }
/* the faces no longer turn by themselves: the wrapper does it */
.sp-card .sp-face, .sp-card[aria-pressed="true"] .sp-front { transform: none; transition: none; }
.sp-card .sp-back, .sp-card[aria-pressed="true"] .sp-back { transform: rotateY(180deg); }
.sp-face {
  box-shadow: 0 1px 1px rgba(11, 45, 107, .08), 0 3px 6px rgba(11, 45, 107, .08),
              0 18px 30px -14px rgba(11, 45, 107, .5), 10px 14px 24px -18px rgba(11, 45, 107, .45);
}
/* intro: splash.js adds .sp-start-flipped at once (backs showing, no transition) and removes it to start the wave */
.sp-deck.sp-start-flipped .sp-inner { transform: rotateY(180deg); transition: none; }
.sp-deck.sp-intro .sp-card { pointer-events: none; } /* taps wait for the wave */

@media (prefers-reduced-motion: reduce) {
  .sp-inner { transition: none; }
  .sp-deck.sp-start-flipped .sp-inner { transform: rotateY(var(--sp-rest)); }
  .sp-card[aria-pressed="true"] .sp-inner { transform: rotateY(180deg); }
}

/* ---- v3.89: springier turn, content that rises in when a side shows, and the auto-flip bar ---- */
.sp-inner { transition: transform .85s cubic-bezier(.34, 1.32, .52, 1); transition-delay: var(--sp-delay, 0ms); }
@keyframes sp-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.sp-card.sp-reveal[aria-pressed="true"] .sp-back > *,
.sp-card.sp-reveal[aria-pressed="false"] .sp-front > * { animation: sp-rise .5s cubic-bezier(.22, 1, .36, 1) both; }
.sp-card.sp-reveal .sp-face > :nth-child(1) { animation-delay: .3s; }
.sp-card.sp-reveal .sp-face > :nth-child(2) { animation-delay: .38s; }
.sp-card.sp-reveal .sp-face > :nth-child(3) { animation-delay: .46s; }
.sp-card.sp-reveal .sp-face > :nth-child(4) { animation-delay: .54s; }
.sp-auto { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px auto 0; max-width: 260px; }
.sp-auto[hidden] { display: none; }
.sp-auto-btn { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(11, 45, 107, .25); background: rgba(255, 255, 255, .8); color: #0b2d6b; cursor: pointer; }
.sp-auto-btn:hover { background: #fff; border-color: rgba(11, 45, 107, .5); }
.sp-auto-btn:focus-visible { outline: 3px solid rgba(11, 45, 107, .5); outline-offset: 2px; }
.sp-auto-btn .i-play, .sp-auto.is-paused .sp-auto-btn .i-pause { display: none; }
.sp-auto.is-paused .sp-auto-btn .i-play { display: block; }
.sp-auto-track { flex: 1; height: 4px; border-radius: 999px; background: rgba(11, 45, 107, .14); overflow: hidden; }
.sp-auto-fill { display: block; height: 100%; background: #14b8a6; transform: scaleX(0); transform-origin: left center; border-radius: inherit; }
html[dir="rtl"] .sp-auto-fill { transform-origin: right center; }
.sp-auto.is-held .sp-auto-fill { background: rgba(11, 45, 107, .35); }
@media (prefers-reduced-motion: reduce) { .sp-card.sp-reveal .sp-face > * { animation: none; } .sp-auto { display: none; } }