/* S18 (R247): iwaspjo.com. Palette is R245's only: yellow #FFC72C, black
   #0F0F0F, white #FFFFFF. Arabic RTL by default; lang.js switches to English. */
:root {
  --yellow: #FFC72C;
  --black: #0F0F0F;
  --white: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.16);
  --gutter: 16px;
  --max: 720px;
}

* { box-sizing: border-box; }

html {
  background: var(--black);
  color: var(--white);
  font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }

/* One language shows at a time. Arabic is the default, also without script. */
html:not([data-lang="en"]) .en { display: none !important; }
html[data-lang="en"] .ar { display: none !important; }

a { color: var(--yellow); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

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

header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; font-weight: 700; }
.brand img { width: 36px; height: 36px; }

.lang-toggle {
  font: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--black); background: var(--yellow);
  border: 0; border-radius: 999px; padding: 4px 16px; cursor: pointer;
}

main { flex: 1; padding: 40px 0 56px; }

.hero { text-align: center; padding-top: 24px; }
.hero .mark { width: 160px; height: 160px; }
.hero h1 { font-size: 2.6rem; line-height: 1.3; margin: 16px 0 8px; font-weight: 800; }
.hero .pitch { color: var(--muted); font-size: 1.15rem; margin: 0 auto 32px; max-width: 32ch; }

/* Placeholder until the Play listing is live (R248: the founder uploads). */
.play-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; min-height: 64px; padding: 8px 20px;
  border: 2px dashed var(--yellow); border-radius: 12px;
  color: var(--yellow); font-weight: 700;
}

.page h1 { font-size: 1.9rem; line-height: 1.35; margin: 0 0 16px; }
.page h2 { font-size: 1.2rem; margin: 32px 0 8px; color: var(--yellow); }
.page p, .page li { color: var(--muted); }

.placeholder { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--yellow); direction: ltr; unicode-bidi: isolate; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-list strong { display: block; color: var(--white); }

footer.bottom { border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted); }
footer.bottom .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px; padding-bottom: 28px; }
footer.bottom a { color: var(--muted); }
footer.bottom .copy { flex-basis: 100%; }

@media (max-width: 480px) {
  html { font-size: 16px; }
  .hero .mark { width: 128px; height: 128px; }
  .hero h1 { font-size: 2.1rem; }
}