/* Satr wa Salfah · company site · direction B1 "The Ruled Page"
   Tokens come from the Brand Guideline v1.1. Logical properties only, so Arabic (rtl) and English (ltr) share one file. */

@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("../fonts/IBMPlexSansArabic-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("../fonts/IBMPlexSans-Variable.ttf") format("truetype"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  /* colour */
  --paper: #F7F2E7;
  --sand: #E9E1CF;
  --ink: #121C33;
  --muted: #444F6B;
  --coral: #EE6A50;
  --coral-ink: #B3361F;      /* coral dark enough for text on paper (4.5:1+) */
  --rule: #9DBBE0;
  --rule-soft: #D6E0EF;
  --sage: #3F7A5E;
  --card: #FFFFFF;
  --focus: #121C33;
  --ph-bg: #FFF1B8;          /* visible placeholder highlight */
  --ph-ink: #5B4300;
  /* type */
  --font-ar: "Plex Arabic", "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "Plex Sans", "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* scale */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem);
  --step-3: clamp(2.1rem, 1.5rem + 3vw, 3.8rem);
  --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; --space-5: 4rem; --space-6: 6rem;
  --radius: 16px;
  --gutter: clamp(1rem, 5vw, 2rem);
  --max: 70rem;
  --margin-line: 2.25rem;     /* distance of the coral margin from the inline-start edge (right in Arabic, left in English, like a notebook) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0C1426; --sand: #151F38; --ink: #F4EFE3; --muted: #BCC5DA; --coral: #FF8A70; --coral-ink: #FF9C85;
    --rule: #86A6D1; --rule-soft: #22345A; --sage: #8FBF9B; --card: #151F38; --focus: #F4EFE3;
    --ph-bg: #4A3A00; --ph-ink: #FFE9A0;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ar); font-size: var(--step-0); line-height: 1.8; min-block-size: 100vh; display: flex; flex-direction: column; }
html[lang="en"] body { font-family: var(--font-en); line-height: 1.65; }
img, svg { max-inline-size: 100%; block-size: auto; }
h1, h2, h3 { line-height: 1.3; margin-block: 0 var(--space-2); font-weight: 700; text-wrap: balance; }
p { margin-block: 0 var(--space-2); text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; inset-inline-start: var(--space-2); inset-block-start: -4rem; background: var(--ink); color: var(--paper); padding: 0.6rem 1rem; border-radius: 8px; z-index: 10; }
.skip:focus { inset-block-start: var(--space-2); }
.wrap { inline-size: 100%; max-inline-size: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.latin { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; }
.mute { color: var(--muted); }
.ph { background: var(--ph-bg); color: var(--ph-ink); padding: 0.05em 0.4em; border-radius: 6px; border: 1px dashed currentColor; font-size: 0.95em; white-space: nowrap; }

/* ---------- header ---------- */
.site-header { background: var(--paper); border-block-end: 2px solid var(--ink); position: relative; z-index: 2; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-block: 0.75rem; }
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand img { block-size: 2.75rem; inline-size: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem var(--space-3); align-items: center; }
.site-nav a { text-decoration: none; padding: 0.4rem 0.2rem; font-weight: 700; border-block-end: 3px solid transparent; }
.site-nav a:hover { border-block-end-color: var(--coral); }
.site-nav a[aria-current="page"] { border-block-end-color: var(--coral); }
.lang-switch { font-family: var(--font-en); font-weight: 600; font-size: var(--step--1); border: 2px solid var(--ink); border-radius: 999px; padding: 0.2rem 0.8rem !important; border-block-end-width: 2px !important; }

/* ---------- ruled page motif ---------- */
.ruled { position: relative; background: var(--sand); border-block-end: 3px solid var(--ink); }
.ruled > .wrap { position: relative; }

/* ---------- hero ---------- */
.hero { padding-block: var(--space-5) var(--space-5); overflow: clip; }
.hero .wrap { display: grid; gap: var(--space-4); align-items: center; }
.hero h1 { font-size: var(--step-3); margin-block-end: var(--space-3); }
.hero h1 .line { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
.hero p.lead { font-size: var(--step-1); max-inline-size: 34ch; color: var(--ink); }
.hero .mark { inline-size: min(60%, 15rem); margin-inline: auto; }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-3); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: 3rem; padding: 0.6rem 1.5rem; border-radius: 999px; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; transition: transform 0.15s ease, background-color 0.15s ease; }
.btn:hover { transform: translateY(-2px); background: var(--coral-ink); border-color: var(--coral-ink); color: #fff; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--sand); color: var(--ink); border-color: var(--ink); }

/* ---------- sections ---------- */
.section { padding-block: var(--space-5); }
.section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; margin-block-end: var(--space-3); }
.section-title h2 { font-size: var(--step-2); margin: 0; }
.section-title .sub { color: var(--muted); }
.cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); }
.card { background: var(--card); border: 2px solid var(--ink); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: 0.5rem; position: relative; }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { margin: 0; color: var(--muted); }
.app-card .tile { inline-size: 5.5rem; block-size: 5.5rem; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 2px var(--ink); flex: none; }
.app-card .tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.app-card .top { display: flex; align-items: center; gap: var(--space-2); }
.app-card .name-en { font-family: var(--font-en); font-size: var(--step--1); color: var(--muted); direction: ltr; text-align: start; margin: 0; }
.app-card .more { margin-block-start: auto; font-weight: 700; }
.pill { display: inline-block; align-self: flex-start; padding: 0.1rem 0.8rem; border-radius: 999px; font-size: var(--step--1); font-weight: 700; border: 2px solid var(--ink); background: var(--sand); }
.pill.soon { background: var(--sand); }
.pill.live { background: var(--sage); color: #fff; border-color: var(--sage); }
.values { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); counter-reset: v; }
.values li { padding-block: var(--space-2); border-block-start: 3px solid var(--ink); counter-increment: v; }
.values li::before { content: counter(v); display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--coral); color: #1a0d09; font-weight: 700; margin-block-end: 0.5rem; font-family: var(--font-en); }
.values h3 { margin: 0 0 0.25rem; font-size: var(--step-1); }
.values p { margin: 0; color: var(--muted); }
.story { background: var(--sand); border-block: 2px solid var(--ink); }
.story blockquote { margin: 0; font-size: var(--step-1); max-inline-size: 40ch; line-height: 1.9; }
.story .attrib { margin-block-start: var(--space-2); color: var(--muted); }

/* ---------- footer ---------- */
.site-footer { margin-block-start: auto; border-block-start: 2px solid var(--ink); background: var(--paper); padding-block: var(--space-4) var(--space-3); }
.footer-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); align-items: start; }
.footer-brand img { block-size: 3.2rem; inline-size: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-3); }
.footer-links a { font-weight: 700; }
.pronounce { font-family: var(--font-en); direction: ltr; color: var(--muted); font-size: var(--step--1); margin-block: var(--space-2) 0; text-align: start; }
.legal { color: var(--muted); font-size: var(--step--1); border-block-start: 1px solid var(--rule); padding-block-start: var(--space-2); margin-block-start: var(--space-3); }

/* ---------- stub / generic ---------- */
.page-head { padding-block: var(--space-5) var(--space-4); }
.page-head h1 { font-size: var(--step-3); margin: 0 0 var(--space-2); }
.prose { max-inline-size: 42rem; }
.prose h2 { font-size: var(--step-2); margin-block: var(--space-4) var(--space-2); }

/* ---------- app pages ---------- */
.app-hero { display: grid; gap: var(--space-3); align-items: center; }
.tile.big { inline-size: 8rem; block-size: 8rem; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 3px var(--ink); }
.tile.big img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.app-hero .lead { font-size: var(--step-1); max-inline-size: 34ch; }
.app-hero .name-en { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--step--1); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.cards.three .card { border-inline-start-width: 8px; border-inline-start-color: var(--coral); }
.shots { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.shot { aspect-ratio: 9 / 16; border: 2px dashed var(--muted); border-radius: var(--radius); display: grid; place-items: center; text-align: center; padding: var(--space-2); color: var(--muted); background: repeating-linear-gradient(to bottom, transparent 0, transparent 1.6rem, var(--rule-soft) 1.6rem, var(--rule-soft) calc(1.6rem + 2px)); }
.store-buttons { margin-block-start: var(--space-2); }
/* ---------- larger screens ---------- */
@media (min-width: 48rem) {
  :root { --margin-line: 3.5rem; }
  .hero .wrap { grid-template-columns: 1.4fr 1fr; }
  .hero .mark { inline-size: min(100%, 20rem); }
  .app-hero { grid-template-columns: auto 1fr; gap: var(--space-4); }
  .shots { max-inline-size: 40rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .site-header, .site-nav, .cta-row, .skip { display: none; } .ruled::after { display: none; } }

/* ================= v2 home: "السالفة" — big, friendly, coloured ================= */
:root { --ink-fixed: #121C33; --paper-fixed: #F7F2E7; --hero: #EE6A50; }
.hero2 { background: var(--hero); color: var(--ink-fixed); border-block-end: 3px solid var(--ink-fixed); overflow: clip; }
.hero2 .wrap { display: grid; gap: var(--space-4); padding-block: var(--space-5); align-items: center; }
.hero2 h1 { font-size: clamp(2.6rem, 1.6rem + 6vw, 6rem); line-height: 1.15; margin: 0 0 var(--space-3); letter-spacing: -0.01em; }
/* «سطر» in its dark box: padding from the measured ink of the bold word (advance 1.832em, ink x -0.060..1.8025em, ink y +0.74..-0.24em from the baseline,
   line-height 1 puts the baseline 0.835em from the top), so the ink has the same gap g on all four sides and the ر tail sits fully inside. */
:root { --sat-g: 0.2em; --sat-pl: calc(var(--sat-g) + 0.06em); --sat-pr: calc(var(--sat-g) - 0.0295em); --sat-pt: calc(var(--sat-g) - 0.095em); --sat-pb: calc(var(--sat-g) + 0.075em); }
.hero2 .hl { background: var(--ink-fixed); color: var(--paper-fixed); display: inline-block; line-height: 1; padding: var(--sat-pt) var(--sat-pr) var(--sat-pb) var(--sat-pl); border-radius: 0.22em; transform: rotate(-2deg); }
html[lang="en"] .hero2 .hl { line-height: inherit; padding: 0 0.25em; }
.hero2 .lead { font-size: var(--step-1); max-inline-size: 30ch; margin-block-end: var(--space-3); }
.btn.dark { background: var(--ink-fixed); color: var(--paper-fixed); border-color: var(--ink-fixed); }
.btn.dark:hover { background: var(--paper-fixed); color: var(--ink-fixed); }
.btn.light { background: var(--paper-fixed); color: var(--ink-fixed); border-color: var(--ink-fixed); }
.btn.light:hover { background: var(--ink-fixed); color: var(--paper-fixed); }
.h-art { position: relative; min-block-size: 22rem; }
.bubble { position: absolute; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1.1rem 0.6rem 0.6rem; background: var(--paper-fixed); color: var(--ink-fixed); border: 3px solid var(--ink-fixed); border-radius: 2rem; text-decoration: none; font-weight: 700; box-shadow: 6px 6px 0 var(--ink-fixed); animation: bob 5s ease-in-out infinite; }
.bubble .tile { inline-size: 3.6rem; block-size: 3.6rem; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 2px var(--ink-fixed); flex: none; }
.bubble .tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bubble .bn { font-size: var(--step-1); padding-inline-end: 0.4rem; }
.bubble:hover { animation-play-state: paused; transform: scale(1.06) rotate(-2deg); }
.b1 { inset-block-start: 0; inset-inline-start: 4%; --r: -3deg; animation-delay: 0s; }
.b2 { inset-block-start: 22%; inset-inline-end: 0; --r: 3deg; animation-delay: -1.2s; }
.b3 { inset-block-start: 50%; inset-inline-start: 0; --r: 2deg; animation-delay: -2.4s; }
.b4 { inset-block-start: 74%; inset-inline-end: 6%; --r: -2deg; animation-delay: -3.6s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-0.7rem) rotate(var(--r, 0deg)); } }
.marquee { background: var(--ink-fixed); color: var(--paper-fixed); overflow: hidden; border-block-end: 3px solid var(--ink-fixed); padding-block: 0.9rem; }
.marquee .track { display: flex; inline-size: max-content; gap: 1.5rem; animation: slide 40s linear infinite; font-weight: 700; font-size: var(--step-1); white-space: nowrap; }
.marquee i { color: var(--hero); font-style: normal; }
[dir="rtl"] .marquee .track { animation-name: slide-rtl; }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes slide-rtl { to { transform: translateX(50%); } }
.sec { padding-block: var(--space-6); }
.sec .big { font-size: var(--step-3); margin-block-end: var(--space-1); }
.sec .sub { font-size: var(--step-1); color: var(--muted); margin-block-end: var(--space-4); }
.wrap.narrow { max-inline-size: 44rem; }
.appgrid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.appc { display: flex; flex-direction: column; gap: 0.35rem; block-size: 100%; padding: var(--space-3); background: var(--bg); color: var(--fg); border: 3px solid var(--ink-fixed); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink-fixed); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; transform: rotate(var(--tilt, 0deg)); }
.appc.r0 { --tilt: -1.2deg; } .appc.r1 { --tilt: 1.2deg; }
.appc:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 12px 12px 0 var(--ink-fixed); }
.appc .tile { inline-size: 6rem; block-size: 6rem; border-radius: 22%; overflow: hidden; box-shadow: 0 0 0 3px var(--ink-fixed); margin-block-end: var(--space-1); }
.appc .tile img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.appc .nm { font-size: var(--step-2); font-weight: 700; line-height: 1.2; }
.appc .en-name { font-family: var(--font-en); direction: ltr; text-align: start; opacity: 0.85; font-size: var(--step--1); }
.appc .one { opacity: 0.95; flex: 1; }
.appc .pill-soon { align-self: flex-start; margin-block-start: var(--space-1); background: var(--paper-fixed); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 0.1rem 0.9rem; font-weight: 700; font-size: var(--step--1); }
.story2 { background: var(--sand); border-block: 3px solid var(--ink); }
.chat { display: flex; flex-direction: column; gap: 0.7rem; margin-block-start: var(--space-4); }
.msg { display: flex; }
.msg.me { justify-content: flex-start; }
.msg.family { justify-content: flex-end; }
.bub { max-inline-size: 85%; padding: 0.7rem 1.1rem; border-radius: 1.4rem; border: 3px solid var(--ink-fixed); font-size: var(--step-0); line-height: 1.7; }
.msg.me .bub { background: var(--paper-fixed); color: var(--ink-fixed); border-start-start-radius: 0.4rem; }
.msg.family .bub { background: var(--hero); color: var(--ink-fixed); font-weight: 700; border-start-end-radius: 0.4rem; }
.stickers { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); margin-block-start: var(--space-4); }
.stk { background: var(--c); color: var(--ink-fixed); border: 3px solid var(--ink-fixed); border-radius: 24px; padding: var(--space-3); transform: rotate(var(--rot)); box-shadow: 5px 5px 0 var(--ink-fixed); }
.stk b { display: inline-grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; background: var(--ink-fixed); color: var(--paper-fixed); font-family: var(--font-en); margin-block-end: 0.5rem; }
.stk h3 { font-size: var(--step-1); margin-block-end: 0.25rem; }
.stk p { margin: 0; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
.js .appc.reveal.in { transform: rotate(var(--tilt, 0deg)); }
@media (min-width: 48rem) {
  .hero2 .wrap { grid-template-columns: 1.1fr 1fr; }
  .h-art { min-block-size: 30rem; }
}
@media (max-width: 47.99rem) {
  .h-art { min-block-size: 24rem; }
  .bubble { padding: 0.4rem 0.9rem 0.4rem 0.4rem; } .bubble .tile { inline-size: 2.8rem; block-size: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble, .marquee .track { animation: none !important; }
  .marquee .track { flex-wrap: wrap; inline-size: auto; white-space: normal; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .appc.reveal { transform: rotate(var(--tilt, 0deg)); }
}

.stickers.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-block-start: 0; }
.page-head .lead { font-size: var(--step-1); max-inline-size: 36ch; }
.page-head.ruled { background: var(--hero); color: var(--ink-fixed); }
.page-head.ruled h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); }

/* ================= round 2 fixes ================= */
/* bubble tail: a clean triangle instead of a diamond */
.bubble::before { content: ""; position: absolute; inset-inline-start: 1.8rem; inset-block-end: -0.95rem; border-style: solid; border-width: 0.95rem 0.7rem 0 0.7rem; border-color: var(--ink-fixed) transparent transparent transparent; }
.bubble::after { content: ""; position: absolute; inset-inline-start: calc(1.8rem + 0.18rem); inset-block-end: -0.62rem; border-style: solid; border-width: 0.67rem 0.52rem 0 0.52rem; border-color: var(--paper-fixed) transparent transparent transparent; }
.bubble .tile { border-radius: 22%; }

/* drawn logo */
:root { --m-paper: #F7F2E7; --m-ink: #121C33; --m-rule: #9DBBE0; --m-coral: #EE6A50; --m-shadow: #EE6A50; }
@media (prefers-color-scheme: dark) { :root { --m-paper: #F4EFE3; --m-ink: #0C1426; --m-rule: #86A6D1; --m-coral: #FF8A70; --m-shadow: #FF8A70; } }
.brand { line-height: normal; text-decoration: none; }
.brand2 { display: inline-flex; align-items: center; gap: 0.8rem; }
.brand2 .mk { inline-size: 3.4rem; block-size: 3.4rem; overflow: visible; transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); }
.brand2.big .mk { inline-size: 4.6rem; block-size: 4.6rem; }
.brand2:hover .mk { transform: rotate(-6deg) scale(1.06); }
.mk-shadow { fill: var(--m-shadow); }
.mk-body { fill: var(--m-paper); stroke: var(--m-ink); stroke-width: 5; stroke-linejoin: round; }
.mk-rules { stroke: var(--m-rule); stroke-width: 3.5; stroke-linecap: round; fill: none; animation: fadein 0.8s 0.2s both; }
.mk-margin { stroke: var(--m-coral); stroke-width: 3.5; stroke-linecap: round; fill: none; stroke-dasharray: 70; stroke-dashoffset: 70; animation: write 0.7s 0.1s ease forwards; }
.mk-bar { stroke: var(--m-ink); stroke-width: 7; stroke-linecap: round; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; }
.mk-bar.b1 { animation: write 0.8s 0.5s ease forwards; }
.mk-bar.b2 { animation: write 0.7s 1s ease forwards; }
.mk-tail { fill: var(--m-coral); transform-box: fill-box; transform-origin: 30% 0; animation: wiggle 5s 2s ease-in-out infinite; }
.brand2:hover .mk-tail { animation: wiggle 0.6s ease-in-out 2; }
.bw { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.15; color: var(--ink); }
.bw-ar { font-family: var(--font-ar); font-size: 1.9rem; font-weight: 400; }
.bw-ar .sat { font-weight: 700; position: relative; display: inline-block; }
.bw-ar .sat::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -0.08em; block-size: 0.09em; background: var(--coral); border-radius: 2px; transform-origin: right center; animation: draw 0.7s 0.9s cubic-bezier(.3,1.3,.5,1) both; }
[dir="ltr"] .bw-ar .sat::after { transform-origin: left center; }
.bw-en { font-family: var(--font-en); font-size: 0.85rem; direction: ltr; text-align: start; letter-spacing: 0.04em; color: var(--muted); }
.bw-en b { color: var(--ink); } .bw-en i { color: var(--coral-ink); font-style: normal; font-weight: 600; }
.brand2.big .bw-ar { font-size: 2.4rem; } .brand2.big .bw-en { font-size: 1rem; }
@keyframes write { to { stroke-dashoffset: 0; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes wiggle { 0%, 88%, 100% { transform: rotate(0); } 92% { transform: rotate(-9deg); } 96% { transform: rotate(6deg); } }
.site-header .wrap { padding-block: 0.9rem; }

/* readable text on coral and on coloured heads */
.page-head.ruled, .page-head.ruled * { color: var(--ink-fixed); }
.page-head.ruled .btn { color: var(--ink-fixed); border-color: var(--ink-fixed); background: transparent; }
.page-head.ruled .btn:hover { background: var(--ink-fixed); color: var(--paper-fixed); }
.page-head.ruled .lead { opacity: 1; }
.app-head { background: var(--bg); color: var(--fg); border-block-end: 3px solid var(--ink-fixed); }
.app-head .name-en, .app-head .soon-note { color: inherit; opacity: 0.9; }

/* page heads: animated like the home */
.page-head.ruled, .app-head { position: relative; overflow: clip; }
.page-head.ruled::before, .page-head.ruled::after, .app-head::before, .app-head::after { content: ""; position: absolute; pointer-events: none; }
.page-head.ruled::before, .app-head::before { inline-size: 9rem; block-size: 9rem; border-radius: 50%; border: 3px solid currentColor; opacity: 0.18; inset-block-start: -2.5rem; inset-inline-end: 8%; animation: floaty 9s ease-in-out infinite; }
.page-head.ruled::after, .app-head::after { inline-size: 5rem; block-size: 2.2rem; border-radius: 999px; background: currentColor; opacity: 0.14; inset-block-end: 1.2rem; inset-inline-end: 22%; animation: floaty 7s -2s ease-in-out infinite reverse; }
.page-head h1, .page-head .lead { animation: rise 0.7s cubic-bezier(.2,.8,.3,1) both; }
.page-head .lead { animation-delay: 0.12s; }
.page-head .pill-soon, .page-head .soon-note { animation: rise 0.7s 0.22s cubic-bezier(.2,.8,.3,1) both; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(1rem) rotate(8deg); } }
@keyframes rise { from { transform: translateY(24px); } to { transform: none; } }
.app-hero .tile.big { animation: pop 0.8s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(0.6) rotate(-12deg); } to { transform: none; } }
.app-head .pill-soon { display: inline-block; background: var(--paper-fixed); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 0.1rem 0.9rem; font-weight: 700; font-size: var(--step--1); }
.app-head h1 { font-size: clamp(2.6rem, 1.6rem + 5vw, 5rem); margin: 0 0 var(--space-1); }
.app-head .lead { font-size: var(--step-1); max-inline-size: 34ch; }
.big.small { font-size: var(--step-2); margin-block-end: var(--space-3); }
.btn.dark2 { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.dark2:hover { background: var(--coral-ink); color: #fff; border-color: var(--coral-ink); }
.cards.three .card { box-shadow: 5px 5px 0 var(--ink); }
.shot { background-color: var(--card); }
.appgrid { margin-block-start: 0; }
@media (prefers-reduced-motion: reduce) {
  .mk-margin, .mk-bar { animation: none; stroke-dashoffset: 0; } .mk-rules, .mk-tail, .bw-ar .sat::after { animation: none; }
  .page-head::before, .page-head::after, .page-head h1, .page-head .lead, .page-head .pill-soon, .page-head .soon-note, .app-hero .tile.big { animation: none !important; }
}

.app-head .name-en { direction: rtl; text-align: start; display: block; }
[dir="ltr"] .app-head .name-en { direction: ltr; }

/* ===== logo, round 3: sticker mark + the «سطر» pill from the hero ===== */
.site-header .wrap { padding-block: 0.8rem; }
.brand2 { gap: 0.9rem; }
.brand2 .mk { inline-size: 4.3rem; block-size: 4.3rem; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.08)); }
.brand2.big .mk { inline-size: 5.6rem; block-size: 5.6rem; }
.mk-body { stroke-width: 6.5; }
.bw-ar { font-size: 2.15rem; display: inline-flex; align-items: center; gap: 0.25em; }
.brand2.big .bw-ar { font-size: 2.8rem; }
.bw-ar .sat { background: var(--ink-fixed); color: var(--paper-fixed); line-height: 1; padding: var(--sat-pt) var(--sat-pr) var(--sat-pb) var(--sat-pl); border-radius: 0.28em; transform: rotate(-3deg); transition: transform 0.3s cubic-bezier(.3,1.6,.5,1); animation: pillin 0.7s 0.6s cubic-bezier(.3,1.5,.5,1) both; }
.bw-ar .sat::after { display: none; }
.brand2:hover .sat { transform: rotate(2deg) scale(1.06); }
@media (prefers-color-scheme: dark) { .bw-ar .sat { background: var(--hero); color: var(--ink-fixed); } }
.bw-en { font-size: 0.95rem; letter-spacing: 0.08em; padding-inline-start: 0.2rem; }
.bw-en i { font-size: 0.9em; }
@keyframes pillin { from { transform: rotate(-14deg) scale(0.7); } to { transform: rotate(-3deg); } }
@media (max-width: 30rem) { .brand2 .mk { inline-size: 3.4rem; block-size: 3.4rem; } .bw-ar { font-size: 1.7rem; } .bw-en { font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .bw-ar .sat { animation: none; } }

/* ===== per-app animated banner themes ===== */
.app-head .wrap { position: relative; z-index: 1; }
.app-head::before, .app-head::after { display: none; }
.app-head { min-block-size: 20rem; }
.theme, .theme-edge { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.ti { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); inline-size: var(--s); display: block; line-height: 0; transform: rotate(var(--r, 0deg)); animation-duration: var(--d); animation-delay: var(--dl); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.ti img, .ti svg { inline-size: 100%; block-size: auto; display: block; }
/* Qaddi: groceries bobbing like a shopping basket in motion */
.theme-qaddi .ti { opacity: 0.92; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.18)); animation-name: tfloat; }
@keyframes tfloat { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-1.1rem) rotate(calc(var(--r, 0deg) + 8deg)); } }
/* Safratna: planes crossing the sky with a dashed trail, clouds drifting */
.theme-safratna { background: linear-gradient(to bottom, rgba(255,255,255,0.0), rgba(255,255,255,0.0)); }
[dir="rtl"] [dir="rtl"] .theme-safratna .drift { opacity: 0.7; animation-name: tdrift; animation-timing-function: linear; }
@keyframes tdrift { from { transform: translateX(-3rem); } 50% { transform: translateX(3rem); } to { transform: translateX(-3rem); } }
.theme-safratna .bob { animation-name: tbob; }
@keyframes tbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8rem); } }
/* Game: Arabic letter tiles floating, stars twinkling, lanterns swinging */
.theme-kalima-wa-hikaya .float { animation-name: tfloat; }
.tile-letter { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22%; background: rgba(255,224,138,0.92); color: #222A66; border: 3px solid #121C33; font-size: 1.7rem; font-weight: 700; line-height: 1; font-family: var(--font-ar); box-shadow: 3px 3px 0 #121C33; }
.theme-kalima-wa-hikaya .twinkle { animation-name: ttwinkle; }
@keyframes ttwinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
.theme-kalima-wa-hikaya .swing { transform-origin: 50% 0; animation-name: tswing; }
@keyframes tswing { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
/* Fidwa: bubbles rising, moon and stars bobbing, hearts pulsing, leaves swaying */
.theme-fidwa .rise { animation-name: trise; opacity: 0.8; }
.bubble-orb { display: block; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0.1)); border: 2px solid rgba(18,28,51,0.5); }
@keyframes trise { 0% { transform: translateY(2rem) scale(0.9); } 50% { transform: translateY(-1rem) scale(1.05); } 100% { transform: translateY(2rem) scale(0.9); } }
.theme-fidwa .bob { animation-name: tbob; }
.theme-fidwa .pulse { animation-name: tpulse; }
@keyframes tpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.theme-fidwa .sway { transform-origin: 50% 100%; animation-name: tsway; }
@keyframes tsway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@media (max-width: 47.99rem) { .ti:nth-child(n+11) { display: none; } .tile-letter { font-size: 1.3rem; } }
@media (prefers-reduced-motion: reduce) { .ti { animation: none !important; } .theme-safratna .fly { inset-inline-start: 20%; } }

/* planes cross the banner using physical left, so direction is explicit and robust */
.theme-safratna .fly { inset-inline-start: auto; left: -15%; opacity: 0.95; animation-name: tfly-ltr; animation-timing-function: linear; }
.theme-safratna .fly::after { content: ""; position: absolute; inset-block-start: 55%; inline-size: 7rem; border-block-start: 3px dashed rgba(18,28,51,0.45); right: 100%; }
@keyframes tfly-ltr { from { left: -15%; } to { left: 110%; } }
[dir="rtl"] .theme-safratna .fly { animation-name: tfly-rtl; left: 110%; }
[dir="rtl"] .theme-safratna .fly svg { transform: scaleX(-1); }
[dir="rtl"] .theme-safratna .fly::after { right: auto; left: 100%; }
@keyframes tfly-rtl { from { left: 110%; } to { left: -15%; } }
@media (prefers-reduced-motion: reduce) { .theme-safratna .fly { left: 40% !important; } }

/* ===== round 4: Safratna travel scene and game word-wheel ===== */
.theme-safratna { background: linear-gradient(to bottom, rgba(255,255,255,0) 40%, rgba(255,150,70,0.38)); }
.theme-safratna .sun { position: absolute; inset-inline-end: auto; left: 14%; inset-block-end: -9rem; inline-size: 18rem; block-size: 18rem; border-radius: 50%; background: radial-gradient(circle, #FF9A4D 0%, #FFB84D 55%, rgba(255,210,63,0) 72%); opacity: 0.9; animation: sunpulse 8s ease-in-out infinite; }
@keyframes sunpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.theme-safratna .drift { opacity: 0.95; }
.theme-safratna .route { position: absolute; left: 3%; inset-block-start: 14%; inline-size: min(40rem, 58%); overflow: visible; }
.theme-safratna .pin { transform-box: fill-box; transform-origin: 50% 100%; animation: pinpop 12s infinite backwards; }

@keyframes pinpop { 0% { transform: scale(0.2); opacity: 0; } 4% { transform: scale(1.2); opacity: 1; } 7%, 100% { transform: scale(1); opacity: 1; } }
.theme-safratna .pin.p1 { animation-name: pinpop1; } .theme-safratna .pin.p2 { animation-name: pinpop2; } .theme-safratna .pin.p3 { animation-name: pinpop3; }
@keyframes pinpop1 { 0%, 1% { transform: scale(0.2); opacity: 0; } 5% { transform: scale(1.2); opacity: 1; } 8%, 100% { transform: scale(1); opacity: 1; } }
@keyframes pinpop2 { 0%, 28% { transform: scale(0.2); opacity: 0; } 33% { transform: scale(1.2); opacity: 1; } 36%, 100% { transform: scale(1); opacity: 1; } }
@keyframes pinpop3 { 0%, 60% { transform: scale(0.2); opacity: 0; } 65% { transform: scale(1.2); opacity: 1; } 68%, 100% { transform: scale(1); opacity: 1; } }
.theme-safratna .plane-s { display: none; }
@media (max-width: 47.99rem) { .theme-safratna .route { inline-size: 100%; left: 0; opacity: 0.35; } .theme-safratna .sun { left: 40%; } }
@media (prefers-reduced-motion: reduce) { .theme-safratna .plane-m { display: none; } .theme-safratna .plane-s { display: block; } .theme-safratna .pin { animation: none; opacity: 1; } .theme-safratna .sun { animation: none; } }
/* game */
.theme-kalima-wa-hikaya { background: radial-gradient(ellipse at 20% 100%, rgba(255,200,90,0.22), rgba(34,42,102,0) 60%), radial-gradient(ellipse at 90% 0%, rgba(120,110,220,0.35), rgba(34,42,102,0) 55%); }
.gmoon { position: absolute; inset-block-start: 1.2rem; left: 33%; inline-size: 3rem; block-size: 3rem; border-radius: 50%; box-shadow: inset 0.75rem 0.2rem 0 0 #FFE9A8; filter: drop-shadow(0 0 14px rgba(255,233,168,0.7)); transform: rotate(20deg); }
.wheel { position: absolute; left: 2%; inset-block-start: 50%; transform: translateY(-50%); inline-size: 16rem; overflow: visible; }
.wr { fill: rgba(255,255,255,0.07); stroke: #F2B84B; stroke-width: 3; }
.wd { fill: rgba(242,184,75,0.0); transition: none; }
.wl { font-family: var(--font-ar); font-weight: 700; font-size: 36px; fill: #FFE9A8; text-anchor: middle; dominant-baseline: central; }
.wp { fill: none; stroke: #F2B84B; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 460; stroke-dashoffset: 460; filter: drop-shadow(0 0 6px rgba(242,184,75,0.8)); animation: wdraw 9s ease-in-out infinite; }
@keyframes wdraw { 0% { stroke-dashoffset: 460; opacity: 1; } 38% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 460; opacity: 0; } }
.wd { animation: wdot 9s infinite; }
.wd.d0 { animation-delay: 0s; } .wd.d1 { animation-delay: 0.9s; } .wd.d2 { animation-delay: 1.8s; } .wd.d3 { animation-delay: 2.7s; }
@keyframes wdot { 0% { fill: rgba(242,184,75,0); } 6% { fill: rgba(242,184,75,0.85); } 84% { fill: rgba(242,184,75,0.85); } 94%, 100% { fill: rgba(242,184,75,0); } }
.wtiles { position: absolute; left: calc(2% + 17.5rem); inset-block-start: 50%; transform: translateY(-50%); display: flex; gap: 0.6rem; direction: rtl; }
.wt { display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; border-radius: 22%; border: 3px solid #121C33; background: rgba(255,255,255,0.12); color: transparent; font-size: 1.9rem; line-height: 1; box-shadow: 3px 3px 0 #121C33; font-family: var(--font-ar); animation: tfill 9s infinite; }
.wt.t0 { animation-delay: 0.5s; } .wt.t1 { animation-delay: 1.4s; } .wt.t2 { animation-delay: 2.3s; } .wt.t3 { animation-delay: 3.2s; }
@keyframes tfill { 0% { background: rgba(255,255,255,0.12); color: transparent; transform: scale(1); } 4% { background: #FFE08A; color: #222A66; transform: scale(1.2); } 8%, 84% { background: #FFE08A; color: #222A66; transform: scale(1); } 94%, 100% { background: rgba(255,255,255,0.12); color: transparent; transform: scale(1); } }
.theme-kalima-wa-hikaya .twinkle { animation-name: ttwinkle; }
@media (max-width: 47.99rem) { .wheel, .wtiles { opacity: 0.25; } .wtiles { display: none; } .wheel { inline-size: 12rem; left: -2rem; } }
@media (prefers-reduced-motion: reduce) { .wp, .wd, .wt { animation: none !important; } .wp { stroke-dashoffset: 0; } .wt { background: #FFE08A; color: #222A66; } }

/* theme art never sits on the text: fade it out towards the text side (right in Arabic, left in English) */
@media (min-width: 48rem) {
  [dir="rtl"] .theme { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 46%, transparent 60%); mask-image: linear-gradient(to right, #000 0%, #000 46%, transparent 60%); }
  [dir="ltr"] .theme { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 46%, transparent 60%); mask-image: linear-gradient(to left, #000 0%, #000 46%, transparent 60%); }
}
@media (max-width: 47.99rem) { .theme { opacity: 0.4; } .theme-safratna .route { opacity: 0.5; } }
.app-head .wrap { z-index: 2; }

/* Qaddi mascot (the tick, "Sah") waves, then celebrates, and hops */
.mascot { position: absolute; left: 14%; inset-block-end: 0.4rem; inline-size: 15rem; aspect-ratio: 1; z-index: 1; transform-origin: 50% 100%; animation: mhop 2.4s ease-in-out infinite; }
.mascot img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.mascot .m-wave { animation: mshow 8s infinite; }
.mascot .m-cel { animation: mshow 8s -4s infinite; opacity: 0; }
@keyframes mshow { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mhop { 0%, 100% { transform: translateY(0) rotate(-2deg); } 40% { transform: translateY(-1.1rem) rotate(2deg); } 55% { transform: translateY(0) rotate(0); } }
@media (max-width: 47.99rem) { .mascot { display: none; } }
@media (prefers-reduced-motion: reduce) { .mascot, .mascot .m-wave, .mascot .m-cel { animation: none !important; } .mascot .m-cel { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .theme-safratna .route .rt-wrap { opacity: 1; } .theme-safratna .route .plane-m { display: none; } }

/* lanterns hang from the top edge over the whole banner (not faded like the rest of the art) */
.theme-top { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.theme-top .swing { transform-origin: 50% 0; animation-name: tswing; }
@media (max-width: 47.99rem) { .theme-top { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .theme-top .ti { animation: none !important; } }

/* edge art: lives in the margins and the top and bottom strips, so the right side is never empty and never under the text */
.theme-edge .ti { opacity: 0.9; }
.theme-fidwa.theme-edge .rise { animation-name: trise; } .theme-fidwa.theme-edge .pulse { animation-name: tpulse; } .theme-fidwa.theme-edge .sway { transform-origin: 50% 100%; animation-name: tsway; } .theme-fidwa.theme-edge .bob { animation-name: tbob; }
@media (max-width: 47.99rem) { .theme-edge { opacity: 0.45; } }

/* Fidwa's character blinks */
.blinkwrap { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.blinkwrap img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.blinkwrap .lid { position: absolute; background: #fff; border-radius: 48% 48% 52% 52%; transform-origin: 50% 0; transform: scaleY(0); animation: blink 5.5s infinite; }
.blinkwrap .lid::after { content: ""; position: absolute; inset-inline: 8%; inset-block-end: 28%; block-size: 14%; min-block-size: 1.5px; border-radius: 99px; background: #1B2A4A; }
@keyframes blink { 0%, 86% { transform: scaleY(0); } 89%, 91% { transform: scaleY(1); } 94% { transform: scaleY(0); } 96% { transform: scaleY(1); } 98%, 100% { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .blinkwrap .lid { animation: none; } }

/* Qaddi: the real logo as the title */
.logo-h1 { margin: 0 0 var(--space-1); line-height: 0; }
.logo-h1 img { block-size: clamp(5rem, 3rem + 7vw, 8.5rem); inline-size: auto; display: block; }
/* legibility: art fades out well before the text, and the text gets a soft halo in the banner colour */
@media (min-width: 48rem) {
  [dir="rtl"] .theme { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 42%); mask-image: linear-gradient(to right, #000 0%, #000 30%, transparent 42%); }
  [dir="ltr"] .theme { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 42%); mask-image: linear-gradient(to left, #000 0%, #000 30%, transparent 42%); }
}
.app-head .lead, .app-head .soon-note, .app-head h1, .app-head .name-en { text-shadow: 0 0 8px var(--bg), 0 0 3px var(--bg); }
.app-head .wrap { position: relative; z-index: 3; }

/* scattered, non-overlapping items use physical percentages */
.ti.scat { inset-inline-start: auto; inset-inline-end: auto; left: var(--x); top: var(--y); inset-block-start: var(--y); }
@media (min-width: 48rem) {
  .theme-fidwa.theme, .theme-qaddi.theme, .theme-kalima-wa-hikaya.theme { -webkit-mask-image: none !important; mask-image: none !important; }
}
@media (max-width: 47.99rem) { .ti.scat { opacity: 0.55; } }

.app-head { padding-block-end: 3.5rem; }
.wordmark-sub img { block-size: 1.9rem; inline-size: auto; display: block; }
.logo-h1.en-logo img { block-size: clamp(3.5rem, 2rem + 5vw, 6rem); }

/* all app banners share one height (the game's), content centred */
@media (min-width: 48rem) {
  .app-head { block-size: 22.5rem; min-block-size: 22.5rem; padding-block: 0; display: flex; align-items: center; }
  .app-head .wrap { inline-size: 100%; }
  .logo-h1 img { block-size: clamp(4.5rem, 2.5rem + 4vw, 6.2rem); }
  .app-head h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); }
  .app-head .lead { margin-block-end: 0.6rem; }
}

/* Qaddi: the earlier, liked layout: groceries across the banner, fading out before the text */
@media (min-width: 48rem) {
  [dir="rtl"] .theme-qaddi.theme { -webkit-mask-image: linear-gradient(to right, #000 0%, #000 44%, transparent 56%); mask-image: linear-gradient(to right, #000 0%, #000 44%, transparent 56%); }
  [dir="ltr"] .theme-qaddi.theme { -webkit-mask-image: linear-gradient(to left, #000 0%, #000 44%, transparent 56%); mask-image: linear-gradient(to left, #000 0%, #000 44%, transparent 56%); }
}

/* ===== support and legal pages ===== */
.prose { max-inline-size: 46rem; }
.prose h2 { font-size: var(--step-2); margin-block: var(--space-4) var(--space-1); }
.prose ul, .prose ol { padding-inline-start: 1.4rem; margin-block: 0 var(--space-2); list-style: revert; }
.prose li { margin-block-end: 0.35rem; }
.draft-note { background: var(--ph-bg); color: var(--ph-ink); border: 2px dashed currentColor; border-radius: 12px; padding: 0.6rem 1rem; font-weight: 700; margin-block-end: var(--space-3); }
.legal-doc .ph { white-space: normal; }
.mail { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; font-weight: 700; font-size: 1.05rem; word-break: normal; overflow-wrap: anywhere; }
.faq { border: 2px solid var(--ink); border-radius: 14px; background: var(--card); margin-block-end: 0.7rem; padding: 0.2rem 1rem; }
.faq summary { cursor: pointer; font-weight: 700; padding: 0.7rem 0; min-block-size: 2.75rem; display: flex; align-items: center; }
.faq p { margin-block: 0 0.8rem; color: var(--muted); }
.mailform { border: 3px solid var(--ink); border-radius: 24px; background: var(--sand); padding: var(--space-3); margin-block-start: var(--space-4); box-shadow: 6px 6px 0 var(--ink); }
.mailform label { display: block; margin-block: var(--space-2); font-weight: 700; }
.mailform select, .mailform textarea { display: block; inline-size: 100%; margin-block-start: 0.3rem; padding: 0.7rem 0.9rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; }
.small { font-size: var(--step--1); }
/* 404 */
.lost .wrap { position: relative; padding-block: var(--space-5); }
.lostbub { position: absolute; inset-inline-end: 8%; inset-block-start: 10%; display: grid; place-items: center; inline-size: 7rem; block-size: 7rem; border-radius: 50% 50% 50% 8%; background: var(--paper-fixed); border: 4px solid var(--ink-fixed); font-size: 4rem; font-weight: 700; animation: bob404 3s ease-in-out infinite; }
@keyframes bob404 { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-0.8rem) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .lostbub { animation: none; } }

.prose .cards.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }

/* Qaddi: Arabic logo and Latin wordmark side by side, same height */
.logo-h1.pair { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.8rem); }
.logo-h1.pair img { block-size: clamp(4.2rem, 2.4rem + 3.6vw, 5.6rem); inline-size: auto; }

/* matched visual size: the Latin wordmarks are drawn on a taller canvas, so they are set smaller than the Arabic logos */
.logo-h1.pair { --H: clamp(4.2rem, 2.4rem + 3.6vw, 5.6rem); }
.logo-h1.pair img { block-size: var(--H); }
.logo-h1.pair img.latin-logo { block-size: calc(var(--H) * 0.6); }
.fidwa-pair img.latin-logo { block-size: calc(var(--H) * 0.6); }
.fidwa-pair { gap: clamp(1rem, 2.4vw, 2rem); }

/* grid decoration (Qaddi, Fidwa): small float around each icon's own spot, soft shadow, slight tilt */
.theme[data-grid] { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; }
.theme .pool { display: none; }
.gi { position: absolute; display: block; line-height: 0; rotate: var(--r, 0deg); filter: drop-shadow(0 3px 3px rgba(0,0,0,0.22)); animation: gfloat 6s ease-in-out infinite alternate; will-change: translate; }
.gi img, .gi svg { inline-size: 100%; block-size: auto; display: block; }
.gi .bubble-orb { inline-size: 100%; }
@keyframes gfloat { from { translate: 0 0; } to { translate: var(--fx, 4px) var(--fy, 4px); } }
.theme-fidwa .gi.k-heart { animation-name: gfloat, gpulse; animation-timing-function: ease-in-out; }
@keyframes gpulse { 0%, 100% { scale: 1; } 50% { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { .gi { animation: none !important; } }

/* phones: a taller banner so there is a real field of icons above and below the text */
@media (max-width: 47.99rem) { .app-head { padding-block: 7rem !important; } }

/* Qaddi's tick: draws itself, pops, glints, then fades and repeats */
.blinkwrap .tk { position: absolute; overflow: visible; }
.blinkwrap .tkp { stroke-dasharray: 100; stroke-dashoffset: 100; transform-box: fill-box; transform-origin: 30% 80%; animation: tkdraw 5s ease-in-out infinite; }
@keyframes tkdraw { 0% { stroke-dashoffset: 100; opacity: 1; transform: scale(1); } 14% { stroke-dashoffset: 0; transform: scale(1); } 20% { transform: scale(1.28) rotate(-6deg); } 26% { transform: scale(1) rotate(0); } 80% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .blinkwrap .tkp { animation: none; stroke-dashoffset: 0; } }

.safratna-pair img.latin-logo { block-size: calc(var(--H) * 0.4); }
.logo-h1.game-logo img { block-size: clamp(6rem, 3rem + 7vw, 8.4rem); inline-size: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
/* Fidwa: white text on the (slightly deeper) blue banner, 4.5:1 contrast or better */
.app-head .name-en, .app-head .soon-note { color: inherit; }


.theme[data-grid]:not(.ready) { opacity: 0 !important; }

/* Safratna: the little red plane hovers, tilts and glides a few pixels */
.blinkwrap .plane-i { position: absolute; display: block; transform-origin: 50% 55%; animation: planefly 8s linear infinite; }
/* the plane flies nose-first: the nose points along the direction of travel in every frame. It takes off in a gentle arc (the nose swings up as it climbs), leaves the icon, then comes
   back in from the lower right on a curve that flattens out into its resting heading, and lands. All steps are generated from the heading, so the rotation always follows the path (see tools note in docs). */
@keyframes planefly {
  0% { transform: translate(0.0%, 0.0%) rotate(0.0deg); opacity: 1; }
  36% { transform: translate(0.0%, 0.0%) rotate(0.0deg); opacity: 1; }
  39.5% { transform: translate(0.0%, 0.0%) rotate(-2.0deg); opacity: 1; }
  40.4062% { transform: translate(-3.45%, -1.22%) rotate(-1.5deg); opacity: 1; }
  41.3125% { transform: translate(-7.13%, -2.59%) rotate(-0.6deg); opacity: 1; }
  42.2188% { transform: translate(-11.21%, -4.19%) rotate(0.5deg); opacity: 1; }
  43.125% { transform: translate(-15.82%, -6.12%) rotate(1.7deg); opacity: 1; }
  44.0312% { transform: translate(-21.12%, -8.49%) rotate(3.1deg); opacity: 1; }
  44.9375% { transform: translate(-27.24%, -11.42%) rotate(4.6deg); opacity: 1; }
  45.8438% { transform: translate(-34.32%, -15.05%) rotate(6.2deg); opacity: 1; }
  46.75% { transform: translate(-42.46%, -19.52%) rotate(7.9deg); opacity: 1; }
  47.6562% { transform: translate(-51.76%, -25.02%) rotate(9.6deg); opacity: 1; }
  48.5625% { transform: translate(-62.31%, -31.73%) rotate(11.5deg); opacity: 1; }
  49.4688% { transform: translate(-74.18%, -39.84%) rotate(13.4deg); opacity: 1; }
  50.375% { transform: translate(-87.41%, -49.59%) rotate(15.4deg); opacity: 1; }
  51.2812% { transform: translate(-102.04%, -61.18%) rotate(17.4deg); opacity: 1; }
  52.1875% { transform: translate(-118.06%, -74.88%) rotate(19.6deg); opacity: 1; }
  53.0938% { transform: translate(-135.44%, -90.94%) rotate(21.8deg); opacity: 1; }
  54% { transform: translate(-154.15%, -109.62%) rotate(24.0deg); opacity: 1; }
  54.1% { transform: translate(342.96%, 221.02%) rotate(20.0deg); opacity: 0; }
  59.9% { transform: translate(342.96%, 221.02%) rotate(20.0deg); opacity: 0; }
  60% { transform: translate(342.96%, 221.02%) rotate(20.0deg); opacity: 1; }
  61.1818% { transform: translate(320.01%, 201.08%) rotate(18.9deg); opacity: 1; }
  62.3636% { transform: translate(297.54%, 182.31%) rotate(17.8deg); opacity: 1; }
  63.5455% { transform: translate(275.6%, 164.66%) rotate(16.8deg); opacity: 1; }
  64.7273% { transform: translate(254.22%, 148.1%) rotate(15.7deg); opacity: 1; }
  65.9091% { transform: translate(233.43%, 132.62%) rotate(14.7deg); opacity: 1; }
  67.0909% { transform: translate(213.28%, 118.16%) rotate(13.6deg); opacity: 1; }
  68.2727% { transform: translate(193.8%, 104.71%) rotate(12.6deg); opacity: 1; }
  69.4545% { transform: translate(175.01%, 92.23%) rotate(11.6deg); opacity: 1; }
  70.6364% { transform: translate(156.95%, 80.68%) rotate(10.6deg); opacity: 1; }
  71.8182% { transform: translate(139.65%, 70.03%) rotate(9.7deg); opacity: 1; }
  73% { transform: translate(123.13%, 60.25%) rotate(8.7deg); opacity: 1; }
  74.1818% { transform: translate(107.42%, 51.3%) rotate(7.8deg); opacity: 1; }
  75.3636% { transform: translate(92.56%, 43.15%) rotate(6.8deg); opacity: 1; }
  76.5455% { transform: translate(78.55%, 35.76%) rotate(5.9deg); opacity: 1; }
  77.7273% { transform: translate(65.43%, 29.1%) rotate(5.1deg); opacity: 1; }
  78.9091% { transform: translate(53.21%, 23.13%) rotate(4.2deg); opacity: 1; }
  80.0909% { transform: translate(41.93%, 17.82%) rotate(3.4deg); opacity: 1; }
  81.2727% { transform: translate(31.58%, 13.14%) rotate(2.6deg); opacity: 1; }
  82.4545% { transform: translate(22.2%, 9.05%) rotate(1.8deg); opacity: 1; }
  83.6364% { transform: translate(13.8%, 5.52%) rotate(1.1deg); opacity: 1; }
  84.8182% { transform: translate(6.4%, 2.51%) rotate(0.5deg); opacity: 1; }
  86% { transform: translate(0.0%, 0.0%) rotate(0.0deg); opacity: 1; }
  92% { transform: translate(0.0%, 0.0%) rotate(0.0deg); opacity: 1; }
  100% { transform: translate(0.0%, 0.0%) rotate(0.0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .blinkwrap .plane-i { animation: none; } }
/* Safratna title: the chosen "final" wordmark (drawn in the stamp's stroke), sized to fit and wrap instead of being cut off */
.safratna-pair { flex-wrap: wrap; row-gap: 0.4rem; }
.logo-h1.pair.safratna-pair img { block-size: calc(var(--H) * 0.95); max-inline-size: 100%; }
.logo-h1.pair.safratna-pair img.latin-logo { block-size: calc(var(--H) * 0.36); }

/* game icon: the lantern sways from its ring, its glow breathes, the flame flickers a touch; same gentle, slow feel as the tick, plane and blink */
.blinkwrap .gl-glow, .blinkwrap .gl-lantern { position: absolute; inset: 0; pointer-events: none; }
.blinkwrap .gl-glow { transform-origin: 22.7% 64.5%; animation: glbreathe 3.6s ease-in-out infinite; }
.blinkwrap .gl-lantern { transform-origin: 22.7% 15%; animation: glsway 4.6s ease-in-out infinite, glflicker 2.3s ease-in-out infinite; }
@keyframes glsway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes glbreathe { 0%, 100% { opacity: 0.72; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes glflicker { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.07); } 55% { filter: brightness(0.98); } 78% { filter: brightness(1.05); } }
@media (prefers-reduced-motion: reduce) { .blinkwrap .gl-glow, .blinkwrap .gl-lantern { animation: none; } }

/* phone header: the links fold into a menu behind a three-line button; the bar is fixed and shrinks to a compact strip once the page is scrolled.
   Only with JS (the .js class); without it the links stay inline as before. Desktop and tablet (from 48rem) are unchanged. */
.nav-toggle { display: none; }
@media (max-width: 47.99rem) {
  .js .site-header { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50; transition: box-shadow 0.25s ease; }
  .js body { padding-block-start: var(--hh, 5.6rem); }
  .js .site-header .wrap { flex-wrap: nowrap; position: static; transition: padding 0.25s ease; }
  .js .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; inline-size: 2.9rem; block-size: 2.9rem; flex: none; padding: 0; background: var(--paper); border: 2px solid var(--ink); border-radius: 0.9rem; cursor: pointer; box-shadow: 2px 2px 0 var(--coral); }
  .js .nav-toggle span { display: block; inline-size: 1.3rem; block-size: 3px; border-radius: 3px; background: var(--ink); transition: transform 0.25s cubic-bezier(.3,1.2,.5,1), opacity 0.15s ease; }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .js .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .js .nav-toggle:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
  .js .site-nav { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--paper); border-block-end: 2px solid var(--ink); box-shadow: 0 14px 24px rgba(0,0,0,0.12);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(.3,1.2,.5,1), visibility 0s 0.25s; }
  .js .site-nav.open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; padding: 0.4rem var(--gutter) 1rem; }
  .js .site-nav li + li { border-block-start: 1px solid var(--line, rgba(127,127,127,0.3)); }
  .js .site-nav a { display: block; padding: 0.95rem 0.25rem; font-size: 1.2rem; border-block-end: 0; border-inline-start: 4px solid transparent; padding-inline-start: 0.8rem; }
  .js .site-nav a[aria-current="page"] { border-inline-start-color: var(--coral); }
  .js .site-nav a.lang-switch { display: inline-block; margin-block-start: 0.6rem; padding: 0.4rem 1rem !important; border-inline-start-width: 2px; }
  .js .site-header .brand2 .mk, .js .site-header .bw-ar, .js .site-header .bw-en { transition: all 0.25s ease; }
  .js .site-header.shrunk { box-shadow: 0 6px 18px rgba(0,0,0,0.14); }
  .js .site-header.shrunk .wrap { padding-block: 0.4rem; }
  .js .site-header.shrunk .brand2 .mk { inline-size: 2.5rem; block-size: 2.5rem; }
  .js .site-header.shrunk .bw-ar { font-size: 1.3rem; }
  .js .site-header.shrunk .bw-en { display: none; }
  .js .site-header.shrunk .nav-toggle { inline-size: 2.4rem; block-size: 2.4rem; border-radius: 0.75rem; gap: 4px; }
  .js .site-header.shrunk .nav-toggle span { inline-size: 1.1rem; }
  .js .site-header.shrunk .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .js .site-header.shrunk .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) { .js .site-nav, .js .nav-toggle span, .js .site-header, .js .site-header .wrap, .js .site-header .brand2 .mk, .js .site-header .bw-ar { transition: none !important; } }

/* phone: the banner art was fading to 40%; it reads better stronger (the grid keeps it off the text) */
@media (max-width: 47.99rem) {
  .theme-safratna.theme { opacity: 0.95; }
  .theme-safratna .route { opacity: 0.9; }
  .theme-kalima-wa-hikaya.theme { opacity: 0.85; }
  .theme-kalima-wa-hikaya .wheel { opacity: 0.5; }
  .theme-top { opacity: 0.8; }
}

/* game banner on phones: the four letter boxes play along the bottom, like the wheel and boxes on a wide screen */
@media (max-width: 47.99rem) {
  .theme-kalima-wa-hikaya .wtiles { display: flex; opacity: 1; inset-block-start: auto; inset-block-end: 1.2rem; left: 50%; transform: translateX(-50%); gap: 0.5rem; }
  .theme-kalima-wa-hikaya .wt { inline-size: 2.8rem; block-size: 2.8rem; font-size: 1.55rem; border-width: 2.5px; box-shadow: 2px 2px 0 #121C33; }
  .theme-kalima-wa-hikaya .wheel { opacity: 0.6; }
}

/* game banner: the letter wheel echoes the app's own wheel (a soft translucent disc, a rim, letters on it, a shuffle button in the middle; chosen letters turn gold and a round line runs through them).
   The wheel spells «حكاية» and the five boxes fill in the same order. */
.wheel { filter: drop-shadow(0 8px 14px rgba(0,0,0,0.22)); }
.wr { fill: rgba(255,255,255,0.09); stroke: rgba(255,255,255,0.42); stroke-width: 2.5; }
.wd { fill: rgba(242,184,75,0); animation: wdot 9s infinite; }
.wd.d0 { animation-delay: 0s; } .wd.d1 { animation-delay: 0.85s; } .wd.d2 { animation-delay: 1.7s; } .wd.d3 { animation-delay: 2.55s; } .wd.d4 { animation-delay: 3.4s; }
.wl { fill: #FFE9A8; font-size: 40px; filter: drop-shadow(0 0 3px rgba(255,200,90,0.55)); animation: wlfade 9s infinite; }
.wlk { font-family: var(--font-ar); font-weight: 700; font-size: 40px; fill: #222A66; text-anchor: middle; dominant-baseline: central; opacity: 0; animation: wlon 9s infinite; }
.wl.d0, .wlk.d0 { animation-delay: 0s; } .wl.d1, .wlk.d1 { animation-delay: 0.85s; } .wl.d2, .wlk.d2 { animation-delay: 1.7s; } .wl.d3, .wlk.d3 { animation-delay: 2.55s; } .wl.d4, .wlk.d4 { animation-delay: 3.4s; }
@keyframes wlfade { 0% { opacity: 1; } 2% { opacity: 0; } 84% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes wlon { 0% { opacity: 0; } 2% { opacity: 1; } 84% { opacity: 1; } 94%, 100% { opacity: 0; } }
.wp { stroke: rgba(242,184,75,0.6); stroke-width: 17; filter: none; animation: wdraw5 9s ease-in-out infinite; }
@keyframes wdraw5 { 0% { stroke-dashoffset: 781; opacity: 1; } 38% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 781; opacity: 0; } }
.wsh circle { fill: rgba(255,255,255,0.16); } .wsh path { fill: none; stroke: rgba(255,255,255,0.8); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wt.t0 { animation-delay: 0.35s; } .wt.t1 { animation-delay: 1.2s; } .wt.t2 { animation-delay: 2.05s; } .wt.t3 { animation-delay: 2.9s; } .wt.t4 { animation-delay: 3.75s; }
@media (prefers-reduced-motion: reduce) { .wd { fill: rgba(242,184,75,0.9); } .wl { opacity: 0; } .wlk { opacity: 1; } .wp { stroke-dashoffset: 0 !important; } }

/* app cards: each card carries its own theme as soft single-colour silhouettes (placed by site.js with the banner grid method), drifting gently */
.appc { position: relative; isolation: isolate; overflow: hidden; }
.appc > :not(.sil) { position: relative; z-index: 1; }
.sil { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; color: var(--sil, transparent); opacity: 0; transition: opacity 0.5s ease; }
.sil.ready { opacity: 1; }
.sil .gi { position: absolute; display: block; line-height: 0; filter: none; will-change: auto; rotate: var(--r, 0deg); animation: gfloat 6s ease-in-out infinite alternate; animation-play-state: paused; }
.appc.in .sil .gi, .appc:not(.reveal) .sil .gi { animation-play-state: running; }
.sil .gi svg { inline-size: 100%; block-size: auto; display: block; }
.sil .gi svg path, .sil .gi svg circle { fill: currentColor; stroke: none; }
.sil .gi svg .ln { fill: none; stroke: currentColor; }
.sil .sm { display: block; inline-size: 100%; aspect-ratio: 1; background-color: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.sil .lt { display: block; font-family: var(--font-ar); font-weight: 700; font-size: var(--w, 2.4rem); line-height: 1; text-align: center; }
@media (prefers-reduced-motion: reduce) { .sil .gi { animation: none !important; } }

/* Easter egg: the shadda in marketing text is drawn as the gold tick from Qaddi's logo. The real shadda stays in the text (transparent), so copy, search and screen readers read the right word. */
:root { --tick: #8A5400; }
@media (prefers-color-scheme: dark) { :root { --tick: #F3B960; } }
.hero2, .page-head:not(.app-head), .msg .bub, .stk, .pill-soon, .btn.light { --tick: #6B3F00; }
.sh { position: relative; }
.sd { font-size: 0; }
.sh::after { content: ""; position: absolute; left: 50%; top: 0.2em; inline-size: 0.5em; block-size: 0.39em; transform: translateX(-50%); background: var(--tick); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 58'%3E%3Cpath d='M10 32 L28 49 L66 9' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 58'%3E%3Cpath d='M10 32 L28 49 L66 9' fill='none' stroke='%23000' stroke-width='15' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sh.t::after { top: 0.02em; }
.appc .en-name { align-self: flex-start; margin-block-start: -0.25rem; }

/* Fidwa icon, built from the app's own icon art as separate layers (teal ground, two leaves, the head with cheeks and smile, two eyes; stacked they equal the icon). */
.blinkwrap.fid { background: #2FA8C0; }
.blinkwrap.fid img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.fid .fl { transform-box: view-box; }
.fid .fl-l { transform-origin: 46.1% 32.2%; animation: fsway-a 4.4s ease-in-out infinite alternate; will-change: transform; }
.fid .fl-r { transform-origin: 53.9% 32.2%; animation: fsway-b 3.9s ease-in-out -1.7s infinite alternate; will-change: transform; }
@keyframes fsway-a { from { transform: translate(-1.1%, 0.8%) rotate(-7deg); } to { transform: translate(1.2%, -0.9%) rotate(6deg); } }
@keyframes fsway-b { from { transform: translate(1.0%, 0.6%) rotate(6.5deg); } to { transform: translate(-1.2%, -0.8%) rotate(-7deg); } }
/* blink: a soft quick squash of each eye (about 160 ms), every 3 to 5 seconds, with one double blink per loop of 14.6 s */
.fid .fe-l { transform-origin: 38.2% 56%; animation: fblink 14.6s linear infinite; }
.fid .fe-r { transform-origin: 61.7% 56%; animation: fblink 14.6s linear infinite; }
@keyframes fblink {
  0.0% { transform: scale(1.000, 1); }
  19.856% { transform: scale(1.000, 1); }
  20.24% { transform: scale(1.032, 0.08); }
  20.342% { transform: scale(1.032, 0.08); }
  20.959% { transform: scale(1.000, 1); }
  46.568% { transform: scale(1.000, 1); }
  46.952% { transform: scale(1.032, 0.08); }
  47.055% { transform: scale(1.032, 0.08); }
  47.671% { transform: scale(1.000, 1); }
  48.966% { transform: scale(1.000, 1); }
  49.349% { transform: scale(1.032, 0.08); }
  49.452% { transform: scale(1.032, 0.08); }
  50.068% { transform: scale(1.000, 1); }
  78.075% { transform: scale(1.000, 1); }
  78.459% { transform: scale(1.032, 0.08); }
  78.562% { transform: scale(1.032, 0.08); }
  79.178% { transform: scale(1.000, 1); }
  100.0% { transform: scale(1.000, 1); }
}
@media (prefers-reduced-motion: reduce) { .fid .fl, .fid .fe { animation: none; } }

/* About: why the name */
.name-story { display: grid; gap: var(--space-4); align-items: center; }
.name-story .ns-mark img { inline-size: min(100%, 11rem); block-size: auto; display: block; margin-inline: auto; transform: rotate(-4deg); }
@media (min-width: 48rem) { .name-story { grid-template-columns: auto 1fr; } .wrap.narrow.name-story { max-inline-size: 52rem; } }

/* contrast: white text on the Fidwa card/banner teal passes 4.5:1 only at full opacity */
.appc .one, .appc .en-name { opacity: 1; }
.app-head .soon-note { opacity: 1; }