/* ---------------------------------------------------------------------------
   Eduversity tenant landing. Figma "Landing — Apolo" 153:10 (EN) / 153:97 (AR).
   Same tokens and type ramp as the platform theme, so the landing and the
   interior read as one product.
   Fonts are self-hosted: fonts.googleapis.com is slow or unreachable on some
   Sudanese networks, and a blocked font request leaves the page waiting.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter var';
  src: url('/brand/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic var';
  src: url('/brand/fonts/noto-sans-arabic-arabic-400.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --ink: #121a26;
  --muted: #73819a;
  --line: #dfe4ec;
  --canvas: #f4f6f9;
  --page: #f5f7fa;
  --surface: #ffffff;
  --pill-bg: #e9edf4;
  --toggle-bg: #f1f4f8;
  --radius-card: 9px;
  --radius-control: 6px;
  --gutter: 80px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: 'Inter var', 'Noto Sans Arabic var', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px; line-height: 20px;
  -webkit-font-smoothing: antialiased;
}
/* Arabic is cursive: no tracking anywhere, and the ramp is a step larger
   because at the same nominal size Arabic reads smaller than Latin. */
body.is-rtl {
  font-family: 'Noto Sans Arabic var', 'Inter var', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px; line-height: 22px;
  letter-spacing: 0;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
.muted { color: var(--muted); }

.wrap { max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }

/* --- header ---------------------------------------------------------------- */
.hdr { background: var(--surface); border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: 77px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__logo { width: 29px; height: 40px; object-fit: contain; }
.brand__name { font-size: 16px; line-height: 22px; font-weight: 600; }
.is-rtl .brand__name { font-size: 17px; line-height: 24px; }
.nav { display: flex; align-items: center; gap: 22px; margin-inline-start: 28px; }
.nav__link { font-size: 14px; line-height: 20px; color: var(--ink); }
.is-rtl .nav__link { font-size: 15px; line-height: 22px; }
.langtoggle {
  margin-inline-start: auto;
  background: var(--toggle-bg); border-radius: 13px;
  padding: 6px 12px; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: .6px;
}
.is-rtl .langtoggle { font-size: 12px; line-height: 17px; letter-spacing: 0; }

/* --- hero ------------------------------------------------------------------ */
.hero { background: var(--surface); }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: 56px; align-items: center; padding-block: 72px;
}
.pill {
  display: inline-block; background: var(--pill-bg); border-radius: 12px;
  padding: 5px 10px; font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: .6px;
  color: var(--accent);
}
.is-rtl .pill { font-size: 12px; line-height: 17px; letter-spacing: 0; }
.hero__title { margin: 18px 0 0; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.2px; }
.is-rtl .hero__title { font-size: 27px; line-height: 34px; letter-spacing: 0; }
.hero__tag { margin: 12px 0 0; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--muted); }
.is-rtl .hero__tag { font-size: 17px; line-height: 24px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 265px)); gap: 14px; margin-top: 28px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 15px 17px;
}
.stat__n { display: block; font-size: 26px; line-height: 32px; font-weight: 600; }
.is-rtl .stat__n { font-size: 27px; line-height: 34px; }
.stat__l { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.is-rtl .stat__l { font-size: 14px; line-height: 20px; }

/* --- sign-in card ---------------------------------------------------------- */
.login {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 23px; width: 400px; max-width: 100%;
}
.login__title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; }
.is-rtl .login__title { font-size: 27px; line-height: 34px; }
.login__hint { margin: 10px 0 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.is-rtl .login__hint { font-size: 14px; line-height: 20px; }
.field { display: block; margin-top: 18px; }
.field__label {
  display: block; margin-bottom: 8px;
  font-size: 11.5px; line-height: 14px; font-weight: 600; letter-spacing: .6px; color: var(--muted);
}
.is-rtl .field__label { font-size: 12px; line-height: 17px; letter-spacing: 0; }
.field__input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--canvas); border: 1px solid var(--line); border-radius: var(--radius-control);
  font: inherit; font-size: 14px; color: var(--ink);
}
.is-rtl .field__input { font-size: 15px; }
.field__input::placeholder { color: var(--muted); }
.field__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 123, 195, .15); }
.btn {
  width: 100%; height: 48px; margin-top: 22px;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius-control);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.is-rtl .btn { font-size: 17px; }
.btn:hover { filter: brightness(1.08); }
.login__foot {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 14px;
  font-size: 13px; line-height: 18px;
}
.is-rtl .login__foot { font-size: 14px; line-height: 20px; }
.login__foot a { color: var(--accent); }

/* --- info strip ------------------------------------------------------------ */
.info { background: var(--canvas); padding-block: 52px; }
.eyebrow {
  display: block; margin-bottom: 18px;
  font-size: 11.5px; line-height: 16px; font-weight: 600; letter-spacing: .6px; color: var(--muted);
  text-transform: uppercase;
}
.is-rtl .eyebrow { font-size: 12px; line-height: 17px; letter-spacing: 0; text-transform: none; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 19px;
}
.card__title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.is-rtl .card__title { font-size: 17px; line-height: 24px; }
.card__body { margin: 8px 0 14px; font-size: 13px; line-height: 18px; color: var(--muted); min-height: 36px; }
.is-rtl .card__body { font-size: 14px; line-height: 20px; min-height: 40px; }
.card__img { width: 100%; height: 104px; object-fit: cover; border-radius: var(--radius-control); }

/* --- footer ---------------------------------------------------------------- */
.foot { background: var(--surface); border-top: 1px solid var(--line); }
.foot__in { display: grid; grid-template-columns: repeat(4, minmax(0, 272px)); gap: 64px; padding-block: 45px; }
.foot__col { display: flex; flex-direction: column; gap: 9px; }
.foot__name { font-size: 15px; line-height: 22px; font-weight: 600; }
.is-rtl .foot__name { font-size: 17px; line-height: 24px; }
.foot__text { margin: 0; font-size: 13px; line-height: 19px; color: var(--muted); }
.is-rtl .foot__text { font-size: 14px; line-height: 20px; }
.foot__link { font-size: 13px; line-height: 19px; color: var(--ink); }
.is-rtl .foot__link { font-size: 14px; line-height: 20px; }
.foot .eyebrow { margin-bottom: 4px; }

.platformbar {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-top: 1px solid var(--line);
}
.platformbar__name { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--accent); }
.platformbar__by { font-size: 13px; line-height: 18px; color: var(--muted); }

/* --- responsive. The Figma mobile frames use a 16px gutter, stack everything,
       and make the primary action full width. --------------------------------- */
@media (max-width: 1199px) {
  :root { --gutter: 32px; }
  .hero__in { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .login { width: 360px; }
  .foot__in { gap: 32px; }
}
@media (max-width: 991px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .login { width: 100%; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  :root { --gutter: 16px; }
  .hdr__in { height: auto; flex-wrap: wrap; gap: 12px; padding-block: 12px; }
  .nav { order: 3; width: 100%; margin-inline-start: 0; gap: 16px; flex-wrap: wrap; }
  .langtoggle { margin-inline-start: auto; }
  .hero__in { padding-block: 28px; gap: 24px; }
  .hero__title { font-size: 20px; line-height: 26px; }
  .is-rtl .hero__title { font-size: 21px; line-height: 28px; }
  .hero__tag { font-size: 14px; line-height: 20px; }
  .is-rtl .hero__tag { font-size: 15px; line-height: 22px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 11px 12px; }
  .stat__n { font-size: 20px; line-height: 26px; }
  .login { padding: 18px; border-radius: var(--radius-card); }
  .login__title { font-size: 20px; line-height: 26px; }
  .is-rtl .login__title { font-size: 21px; line-height: 28px; }
  .btn { height: 50px; }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card__body { min-height: 0; }
  .foot__in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 28px; }
  .platformbar { flex-direction: column; gap: 2px; height: auto; padding-block: 12px; }
  /* Below 16px iOS Safari zooms the viewport on focus, and a zoomed page is
     not the design either. */
  .field__input { font-size: 16px; }
}

.login__err{margin:0 0 14px;padding:10px 12px;border-radius:var(--radius-control);background:#fdecec;border:1px solid #f0c4c4;color:#8a1f1f;font-size:13px;line-height:18px}

/* ---------------------------------------------------------------------------
   RECOVERED SECTIONS — institution information, faculties, registration.
   Added 6 Nov 2026 from the old theme-editor home page the new landing
   replaced. Ibn Sina only; a tenant with no $EXTRA entry emits no markup here,
   so these rules simply never match on Apolo.

   Everything uses the tokens already declared at the top of this file, and
   logical properties (padding-inline, text-align: start) so the Arabic page
   mirrors without a second rule.
   --------------------------------------------------------------------------- */

.sect { padding-block: 56px; border-top: 1px solid var(--line); }
.sect--about { background: var(--surface); }
.sect--facs  { background: var(--page); }

.sect__title {
  margin: 10px 0 0; font-size: 26px; line-height: 32px; font-weight: 700;
  letter-spacing: -.2px; color: var(--ink); text-align: start;
}
body.is-rtl .sect__title { font-size: 27px; line-height: 36px; letter-spacing: 0; }

.sect__lead {
  margin: 14px 0 0; max-width: 72ch; font-size: 15px; line-height: 24px;
  color: var(--muted); text-align: start;
}
body.is-rtl .sect__lead { font-size: 16px; line-height: 28px; }

/* --- vision / mission / values -------------------------------------------- */
.vm {
  margin-top: 28px; display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vm__item {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 20px 22px;
  /* The accent edge is on the INLINE start so it flips with the language. */
  border-inline-start: 3px solid var(--accent);
}
.vm__h {
  margin: 0; font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--accent);
  text-align: start;
}
body.is-rtl .vm__h { letter-spacing: 0; text-transform: none; font-size: 15px; }
.vm__b {
  margin: 8px 0 0; font-size: 14px; line-height: 22px; color: var(--ink);
  text-align: start;
}
body.is-rtl .vm__b { font-size: 15px; line-height: 26px; }

/* --- faculties ------------------------------------------------------------ */
.facs {
  margin: 26px 0 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.fac { display: flex; }
.fac__in {
  flex: 1; display: block;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-control); padding: 14px 16px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink);
  text-align: start;
}
body.is-rtl .fac__in { font-size: 15px; line-height: 24px; }
/* Only the anchor form is interactive — a signed-out visitor gets a span, so
   there is no hover affordance on something that cannot be opened. */
a.fac__in:hover { border-color: var(--accent); color: var(--accent); }
.facs__note { margin: 16px 0 0; font-size: 13px; line-height: 20px; text-align: start; }

/* --- registration band ---------------------------------------------------- */
.join { background: var(--accent); color: #fff; }
.join__in {
  padding-block: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.join__copy { flex: 1 1 420px; }
.join__eyebrow {
  display: inline-block; font-size: 11.5px; line-height: 16px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.82);
}
body.is-rtl .join__eyebrow { letter-spacing: 0; text-transform: none; font-size: 13px; }
.join__title {
  margin: 10px 0 0; font-size: 26px; line-height: 32px; font-weight: 700;
  letter-spacing: -.2px; color: #fff; text-align: start;
}
body.is-rtl .join__title { font-size: 27px; line-height: 36px; letter-spacing: 0; }
.join__body {
  margin: 10px 0 0; max-width: 62ch; font-size: 15px; line-height: 24px;
  color: rgba(255,255,255,.88); text-align: start;
}
body.is-rtl .join__body { font-size: 16px; line-height: 28px; }

/* The button inverts: white on the accent band, so it stays the strongest
   element on the page without introducing a second brand colour. */
.join__btn {
  /* .btn is the login submit: width:100%, height:48px, margin-top:22px. All
     three are wrong on this band, so each is reset explicitly rather than
     relying on source order. */
  flex: 0 0 auto;
  width: auto; height: auto; margin-top: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent);
  border: 1px solid #fff; border-radius: var(--radius-control);
  padding: 14px 32px; font-size: 15px; line-height: 20px; font-weight: 700;
  white-space: nowrap;
}
.is-rtl .join__btn { font-size: 16px; }
.join__btn:hover { background: rgba(255,255,255,.9); color: var(--accent); }

/* --- narrow screens ------------------------------------------------------- */
@media (max-width: 1100px) {
  .vm, .facs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sect { padding-block: 36px; }
  .vm, .facs { grid-template-columns: 1fr; }
  .sect__title, .join__title { font-size: 22px; line-height: 28px; }
  .join__in { padding-block: 32px; }
  .join__btn { width: 100%; text-align: center; }
}

/* --- getting started: how-to videos --------------------------------------
   Apolo only. These are LINKS, not embeds: one of the school's two original
   videos refuses anonymous playback, and an embed that silently fails looks
   like a broken page, whereas a link that opens YouTube does not. */
.sect--help { background: var(--surface); }

.vids {
  margin: 26px 0 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vid { display: flex; }
.vid__in {
  flex: 1; display: flex; align-items: center; gap: 14px;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px 18px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink);
  text-align: start;
}
body.is-rtl .vid__in { font-size: 15px; line-height: 24px; }
.vid__in:hover { border-color: var(--accent); color: var(--accent); }
.vid__play {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
/* The glyph is a right-pointing triangle; on an RTL page it must still point
   the way video plays, so the icon is mirrored back. */
body.is-rtl .vid__play { transform: scaleX(-1); }
.vid__t { flex: 1; }

@media (max-width: 720px) { .vids { grid-template-columns: 1fr; } }

/* --- practical lines, no pictures ------------------------------------------
   The photographs moved to the About cards, so these four items read as a
   compact row. Same content as the old picture boxes, less furniture. */
.facts {
  margin: 20px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fact {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px 18px;
}
.fact__t { margin: 0; font-size: 15px; line-height: 20px; font-weight: 700; text-align: start; }
.fact__b { margin: 6px 0 0; font-size: 13px; line-height: 19px; color: var(--muted); text-align: start; }
body.is-rtl .fact__t { font-size: 16px; }
body.is-rtl .fact__b { font-size: 14px; line-height: 23px; }

/* --- About, carried by the pictures ---------------------------------------- */
.acards {
  margin: 26px 0 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.acard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 0 0 18px; overflow: hidden;
  display: flex; flex-direction: column;
}
.acard__img {
  width: 100%; height: 132px; object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.acard__t {
  margin: 16px 18px 0; font-size: 16px; line-height: 22px; font-weight: 700;
  color: var(--ink); text-align: start;
}
body.is-rtl .acard__t { font-size: 17px; line-height: 26px; }
.acard__b {
  margin: 8px 18px 0; font-size: 13.5px; line-height: 21px; color: var(--muted);
  text-align: start;
}
body.is-rtl .acard__b { font-size: 14.5px; line-height: 25px; }

/* Native <details>: opens with no JavaScript, which matters on 1 Mbps links
   where a script that has not arrived yet is a card that will not open. */
.acard__d { margin: 12px 18px 0; }
.acard__s {
  cursor: pointer; list-style: none;
  font-size: 12.5px; line-height: 18px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent); text-transform: uppercase; text-align: start;
  display: inline-flex; align-items: center; gap: 6px;
}
body.is-rtl .acard__s { text-transform: none; letter-spacing: 0; font-size: 14px; }
.acard__s::-webkit-details-marker { display: none; }
.acard__s::after {
  content: '\203A'; font-size: 15px; line-height: 1;
  transform: rotate(90deg); transition: transform .15s ease;
}
body.is-rtl .acard__s::after { content: '\2039'; }
.acard__d[open] .acard__s::after { transform: rotate(-90deg); }
.acard__s:hover { text-decoration: underline; }
.acard__m {
  margin: 10px 0 0; font-size: 13px; line-height: 21px; color: var(--ink);
  text-align: start;
}
body.is-rtl .acard__m { font-size: 14px; line-height: 25px; }

/* values + the university's own site, both carried over from the old page */
.vals {
  margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.vals__l {
  font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: .6px;
  color: var(--accent);
}
body.is-rtl .vals__l { letter-spacing: 0; font-size: 13px; }
.vals__v { font-size: 14px; line-height: 22px; color: var(--ink); }
body.is-rtl .vals__v { font-size: 15px; line-height: 26px; }

.sitelink { margin: 14px 0 0; font-size: 14px; }
.sitelink a { color: var(--accent); font-weight: 600; }
.sitelink a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .facts  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .facts, .acards { grid-template-columns: 1fr; }
  .acard__img { height: 150px; }
}

/* --- the university's nine objectives -------------------------------------
   Carried by the old portal and missing from the first version of this page.
   An expander, because nine numbered items would otherwise dominate the
   section; native <details> again, so no JavaScript is required. */
.objs { margin: 22px 0 0; }
.objs__s {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; line-height: 19px; font-weight: 700; letter-spacing: .4px;
  color: var(--accent); text-transform: uppercase; text-align: start;
}
body.is-rtl .objs__s { text-transform: none; letter-spacing: 0; font-size: 14.5px; }
.objs__s::-webkit-details-marker { display: none; }
.objs__s::after { content: '\203A'; font-size: 15px; transform: rotate(90deg); transition: transform .15s ease; }
body.is-rtl .objs__s::after { content: '\2039'; }
.objs[open] .objs__s::after { transform: rotate(-90deg); }
.objs__s:hover { text-decoration: underline; }
.objs__l {
  margin: 14px 0 0; padding-inline-start: 22px; max-width: 86ch;
  display: grid; gap: 8px;
}
.objs__l li { font-size: 14px; line-height: 22px; color: var(--ink); text-align: start; }
body.is-rtl .objs__l li { font-size: 15px; line-height: 26px; }
.objs__n { margin: 12px 0 0; font-size: 12.5px; line-height: 18px; color: var(--muted); text-align: start; }

/* --- live rooms ------------------------------------------------------------
   Shown to everyone so parents know the room exists, but only an anchor once
   signed in: apolo runs forcelogin=1, so a public link would land a parent on
   a login form rather than in the room. Same pattern as the faculty list. */
.rooms { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room { display: flex; }
.room__in {
  flex: 1; display: flex; align-items: center; gap: 12px;
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 16px 18px;
  font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink);
  text-align: start;
}
body.is-rtl .room__in { font-size: 15px; line-height: 24px; }
a.room__in:hover { border-color: var(--accent); color: var(--accent); }
.room__in--off { color: var(--muted); }
/* A live-room marker rather than a play triangle: this is a meeting, not a
   recording, and the two should not look like the same thing. */
.room__dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.room__in--off .room__dot { background: var(--muted); box-shadow: 0 0 0 4px rgba(115,129,154,.16); }
.room__t { flex: 1; }
.rooms__note { margin: 12px 0 0; font-size: 13px; line-height: 20px; text-align: start; }
@media (max-width: 720px) { .rooms { grid-template-columns: 1fr; } }

/* ===========================================================================
   POLISH PASS — 6 Nov 2026
   =========================================================================== */

/* --- 1. the logo was being squashed ---------------------------------------
   The markup used to force width:29/height:40 on every tenant. Apolo's logo is
   58x80 (ratio .725) so it fitted; Ibn Sina's is landscape and was compressed
   about 36% horizontally. The width attribute is now per tenant, and this makes
   the real aspect authoritative so an attribute can never squash it again. */
.brand__logo { width: auto !important; height: 40px; object-fit: contain; }

/* --- 2. eyebrows and pills were too small, and wrongly tracked in Arabic ---
   The file's own rule is "Arabic is cursive: no tracking anywhere", but these
   two carried letter-spacing in both languages and never got the one-step-up
   Arabic ramp the body text gets. Both fixed, and the eyebrow now carries the
   brand colour with a short rule on its inline-start so it reads as a label
   rather than faint grey text. */
.eyebrow {
  font-size: 12.5px; line-height: 18px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--accent); opacity: .55; flex: 0 0 auto;
}
body.is-rtl .eyebrow {
  font-size: 15px; line-height: 22px; letter-spacing: 0; text-transform: none;
}

.pill {
  padding: 8px 18px; font-size: 12.5px; line-height: 18px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
body.is-rtl .pill {
  font-size: 15px; line-height: 22px; letter-spacing: 0; text-transform: none;
  padding: 8px 20px;
}

/* --- 3. tighter rhythm between sections ----------------------------------- */
.info { padding-block: 38px; }
.sect { padding-block: 42px; }
.hero__in { padding-block: 56px; }

/* --- 4. header and footer in brand blue ----------------------------------
   The logo is a white octagon badge rather than a transparent cutout, so it
   sits on blue without a knockout variant. Every link colour has to be set
   explicitly here: the global `a:hover { color: var(--accent) }` would
   otherwise turn links blue-on-blue and make them vanish. */
.hdr { background: var(--accent); border-bottom: 0; }
.brand__name { color: #fff; }
.brand:hover .brand__name { color: #fff; }
.nav__link { color: rgba(255,255,255,.90); }
.nav__link:hover { color: #fff; text-decoration: underline; }
.langtoggle { background: rgba(255,255,255,.18); color: #fff; }
.langtoggle:hover { background: rgba(255,255,255,.28); color: #fff; }

.foot { background: var(--accent); border-top: 0; color: #fff; }
.foot__name { color: #fff; }
.foot__text { color: rgba(255,255,255,.82); }
.foot__link { color: rgba(255,255,255,.90); }
.foot__link:hover { color: #fff; text-decoration: underline; }
.foot .eyebrow { color: rgba(255,255,255,.72); }
.foot .eyebrow::before { background: rgba(255,255,255,.6); }
.platformbar { border-top: 1px solid rgba(255,255,255,.22); }
.platformbar__name { color: #fff; }
.platformbar__by { color: rgba(255,255,255,.75); }

/* --- 5. phone sizing -------------------------------------------------------
   At 375px the header wrapped into two rows and the label text was the same
   size as on a desktop, which reads small on a handset held at arm's length. */
@media (max-width: 720px) {
  .hdr__in { gap: 10px; padding-block: 10px; }
  .brand__logo { height: 34px; }
  .brand__name { font-size: 15px; }
  body.is-rtl .brand__name { font-size: 16px; }
  .nav { gap: 16px; margin-inline-start: 0; flex-wrap: wrap; }
  .eyebrow { font-size: 12px; }
  body.is-rtl .eyebrow { font-size: 14px; }
  .info { padding-block: 28px; }
  .sect { padding-block: 30px; }
  .hero__in { padding-block: 26px; }
}

/* A 40px mark in a 77px bar read as an afterthought; 46px gives the brand
   presence without crowding the nav. Phone keeps the smaller mark. */
.brand__logo { height: 46px; }
@media (max-width: 720px) { .brand__logo { height: 36px; } }

/* --- the logo sits on a white tile ----------------------------------------
   Both marks are largely transparent - Ibn Sina 46%, Apolo 54% - and Ibn
   Sina's octagon has a TRANSPARENT fill, so on the blue header the blue showed
   through it and its black Arabic lettering lost all contrast. The tile gives
   back the white surround each logo was drawn against, and lifts it off the
   bar. The gradient is very shallow on purpose: enough to read as a physical
   chip, not enough to compete with the mark itself. */
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
  box-shadow:
    0 3px 9px rgba(3, 22, 43, .26),      /* the under-shadow */
    0 1px 2px rgba(3, 22, 43, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: box-shadow .16s ease, transform .16s ease;
}
.brand:hover .brand__mark {
  box-shadow:
    0 5px 14px rgba(3, 22, 43, .32),
    0 1px 2px rgba(3, 22, 43, .2),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transform: translateY(-1px);
}
/* inside the tile the mark can be smaller: the tile carries the presence */
.brand__mark .brand__logo { height: 34px; }

@media (max-width: 720px) {
  .brand__mark { padding: 5px 7px; border-radius: 10px; }
  .brand__mark .brand__logo { height: 28px; }
}