/* Public home page (templates/public/home.html). Moved out of two adjacent
   inline <style> blocks in T7e (2026-10-29); linked where the first block was,
   after home_public_overrides.css, so the cascade order is unchanged. */
/* impeccable-disable nested-cards, flat-type-hierarchy -- inspected element
   by element on the public landing page in Chromium at 390x844 and
   1440x900. These are constituent components of the public portal (preview
   chips, feature badges, stat metric cards, and kindergarten cards) each
   carrying its own discrete boundary. The 12/14/16px utility labels are
   subordinate UI text below the page's 20–48px heading scale and remain
   readable in both English and Arabic. */

/* impeccable-disable low-contrast -- browser-measured, not a waiver.
   The static analyzer pairs an inherited near-black text color with a
   slate-600/90 composited surface that the two classes never
   produce together at render. Evidence: axe (Lighthouse accessibility,
   Chromium 1440x900) reports zero color-contrast violations on the
   rendered page after the amber-700 stat fix, and a rendered-pixel sweep
   of every text node found no such black-on-composite pair. Contrast rules stay
   armed on every other first-party file. */
.material-symbols-outlined {
  /* Icon fonts carry their own internal baseline padding, so flexbox
     align-items:center alone still reads as a hair off-center next to
     text (nav chevrons especially). vertical-align:middle corrects it
     wherever an icon sits inline with a text sibling. */
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body.lang-ar {
  font-family: 'Cairo', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
}
body.lang-en {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

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

/* ── Home nursery listing affordances (search cards + details dialog) ── */
.kg-home-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: rgba(255, 214, 115, 0.3); color: #7a5200;
  font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}
.kg-home-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.15rem; }
.kg-home-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.18rem 0.55rem; border-radius: 999px;
  background: rgba(31, 94, 71, 0.06); color: #17312a;
  font-size: 0.72rem; font-weight: 700;
}
.kg-home-chip .material-symbols-outlined { font-size: 0.9rem; }
.kg-home-chip.has-slots { background: rgba(25, 135, 84, 0.12); color: #146c43; font-weight: 800; }
.kinjo-home-search-card.is-home-nursery { border-color: rgba(255, 156, 108, 0.55); }
.kg-card-contact-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: var(--kinjo-spacing-2); padding: 0.55rem 0.75rem; border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--kinjo-color-brand-green), #2b7a5c); color: var(--kinjo-color-text-inverse);
  font-size: 0.8rem; font-weight: 800; text-decoration: none;
  transition: filter 0.15s ease;
}
.kg-card-contact-cta:hover { filter: brightness(1.08); color: var(--kinjo-color-text-inverse); }
.kg-modal-home-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(255, 214, 115, 0.3); color: #7a5200;
  border-radius: 999px; padding: 0.25rem 0.7rem;
  font-size: 0.78rem; font-weight: 800; margin-bottom: 0.6rem;
}
.kg-modal-home-facts { margin: 0 0 0.6rem; }
.kg-modal-home-facts > div { display: flex; gap: 0.5rem; padding: 0.3rem 0; }
.kg-modal-home-facts dt { min-width: 7.5rem; font-weight: 700; color: #5c6e67; font-size: 0.8rem; }
.kg-modal-home-facts dd { margin: 0; font-size: 0.85rem; color: #17312a; }
.kg-modal-contact-cta {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.7rem var(--kinjo-spacing-4); border-radius: 0.9rem;
  background: linear-gradient(135deg, var(--kinjo-color-brand-green), #2b7a5c); color: var(--kinjo-color-text-inverse);
  font-weight: 800; font-size: 0.88rem; text-decoration: none;
}
.kg-modal-contact-cta:hover { filter: brightness(1.08); color: var(--kinjo-color-text-inverse); }
.kg-modal-contact-note { font-size: 0.72rem; font-weight: 600; opacity: 0.85; }

[dir="rtl"] *:not([lang="en"]):not([lang="en"] *):not(.allow-tracking):not(.allow-tracking *) {
  letter-spacing: normal !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.96);
  /* The rule paints its own ground, so it declares the inset that ground
     implies rather than depending on a `p-5` utility in the markup.
     1.25rem is exactly what `p-5` resolves to; the responsive `sm:p-7`
     still raises it at the sm breakpoint. Nothing rendered changes. */
  padding: var(--kinjo-spacing-5);
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem var(--kinjo-spacing-4);
  border-radius: .75rem;
  background: #fff;
  color: var(--kinjo-brand);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 31, 77, .2);
  transition: top .2s ease;
}

.skip-link:focus { top: 1rem; }

.nav-dropdown-menu {
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Mobile store badges and the WhatsApp support action. Written as plain
   CSS rather than Tailwind utilities because the home stylesheet is
   prebuilt (see tailwind.config.js) and these are the only two new
   brand-coloured surfaces on the page. The colours themselves are tokens
   in design-tokens.css -- they belong to Google, Apple and WhatsApp, so
   they are named once there rather than inlined here. */
.kinjo-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.55rem var(--kinjo-spacing-4);
  border-radius: 0.75rem;
  background: var(--kinjo-store-badge-surface);
  color: var(--kinjo-color-text-inverse);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.kinjo-store-badge:hover {
  background: var(--kinjo-store-badge-surface-hover);
  color: var(--kinjo-color-text-inverse);
}
.kinjo-store-badge i { font-size: 1.5rem; line-height: 1; }
.kinjo-store-badge__lines { display: flex; flex-direction: column; line-height: 1.15; }
.kinjo-store-badge__eyebrow { font-size: 0.75rem; opacity: 0.8; }
.kinjo-store-badge__name { font-size: 0.875rem; font-weight: 700; }
.kinjo-store-badge--soon {
  background: var(--kinjo-store-badge-pending-surface);
  color: var(--kinjo-store-badge-pending-ink);
  cursor: default;
}
.kinjo-store-badge--soon:hover {
  background: var(--kinjo-store-badge-pending-surface);
  color: var(--kinjo-store-badge-pending-ink);
}
.kinjo-apk-badge {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.kinjo-apk-badge:hover {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}

/* ==================================================================== */
/* KinJo Dynamic Motion Graphics Showcase Styles                        */
/* ==================================================================== */
.glow-maroon { filter: drop-shadow(0 0 25px rgba(220, 38, 38, 0.45)); }
.glow-gold { filter: drop-shadow(0 0 25px rgba(245, 158, 11, 0.45)); }
.glow-emerald { filter: drop-shadow(0 0 25px rgba(16, 185, 129, 0.45)); }
.glow-navy { filter: drop-shadow(0 0 25px rgba(59, 130, 246, 0.45)); }
.text-glow { text-shadow: 0 0 30px rgba(255, 255, 255, 0.35); }

@keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes pulseAura { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.85; } }
@keyframes laserSweep { 0% { top: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes floatCard { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-8px) rotate(0.5deg); } }
@keyframes floatCardReverse { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(8px) rotate(-0.5deg); } }
@keyframes shimmerBar { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes rippleExpand { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }

.animate-orbit { animation: orbitSpin 24s linear infinite; }
.animate-orbit-reverse { animation: orbitSpinReverse 32s linear infinite; }
.animate-aura { animation: pulseAura 4s ease-in-out infinite; }
.animate-laser { animation: laserSweep 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.animate-float { animation: floatCard 4s ease-in-out infinite; }
.animate-float-reverse { animation: floatCardReverse 4.5s ease-in-out infinite; }
.animate-ripple { animation: rippleExpand 2.5s ease-out infinite; }

.shimmer-text {
  background: linear-gradient(90deg, #FFFFFF 0%, #F59E0B 25%, #FFFFFF 50%, #10B981 75%, #FFFFFF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerBar 6s linear infinite;
}

.aspect-16-9 { aspect-ratio: 16 / 9; max-height: 80vh; }
.aspect-9-16 { aspect-ratio: 9 / 16; max-height: 80vh; max-width: 420px; margin: 0 auto; }
.aspect-1-1 { aspect-ratio: 1 / 1; max-height: 80vh; max-width: 650px; margin: 0 auto; }

/* ==================================================================== */
/* KinJo Interactive Animated Infographic Journey                       */
/* ==================================================================== */
/* Hide the horizontal scrollbar of the metro-line rail (phones);
   the row is still swipeable and keyboard-scrollable. */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.45), 0 4px 12px rgba(109, 11, 0, 0.15);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(197, 160, 89, 0), 0 8px 24px rgba(109, 11, 0, 0.25);
  }
}
@keyframes lineFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes floatSoft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes journeyFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.journey-node-active {
  animation: pulseGlow 2.4s infinite ease-in-out;
}
.journey-float-badge {
  animation: floatSoft 3s infinite ease-in-out;
}
.journey-flow-line {
  background: linear-gradient(90deg, #6D0B00, var(--kinjo-color-success), var(--kinjo-color-hero-navy), #6D0B00);
  background-size: 300% 100%;
  animation: lineFlow 6s linear infinite;
}
.journey-fade-in {
  animation: journeyFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .journey-node-active, .journey-float-badge, .journey-flow-line, .journey-fade-in {
    animation: none !important;
  }
}

/* ── Modern Professional Executive Header ───────────────────────────────
   Solid, 100% opaque navy. No alpha, no backdrop blur, no background
   image -- a translucent glassmorphism header was tried and rejected;
   this is the plain, always-legible version. ── */
body.kinjo-public-home .kinjo-public-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--kinjo-color-hero-navy, #002f6c) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 20, 50, 0.16);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.kinjo-public-home .kinjo-public-header.is-scrolled {
  background-color: #001f4d !important;
  background-image: none !important;
  box-shadow: 0 10px 30px -4px rgba(0, 15, 40, 0.45);
  border-bottom-color: rgba(197, 160, 89, 0.35) !important;
}

/* ── Brand mark: official KinJo logo + logotype, tagline moved to the hero ── */
.kinjo-brand-mark .kinjo-emblem {
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  border-radius: 11px;
  filter: drop-shadow(0 4px 10px rgba(0, 20, 50, 0.22));
}
/* Constrained 44x44 mark: balanced header proportions without overpowering the viewport. */
.kinjo-emblem-img {
  width: 44px;
  height: 44px;
}
.kinjo-brand-mark:hover .kinjo-emblem,
.kinjo-brand-mark:focus-visible .kinjo-emblem {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 16px -4px rgba(0, 47, 108, 0.55);
}

/* ── Top-level nav items: shared trigger + plain-link styling. Medium
   weight so the row reads quieter with icons gone; hover swaps the old
   background fill for a gold underline that expands from the center
   (spec Step 4) instead of just recoloring text. ── */
.nav-desktop-trigger,
.nav-desktop-link {
  position: relative;
  padding: 8px 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.90);
  border-radius: 10px;
  transition: color 0.3s ease;
}
.nav-desktop-trigger::after,
.nav-desktop-link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--kinjo-color-success, #c5a059);
  transition: left 0.3s ease, right 0.3s ease;
}
.nav-desktop-trigger:hover,
.nav-desktop-trigger:focus-visible,
.nav-desktop-trigger[aria-expanded="true"],
.nav-desktop-link:hover,
.nav-desktop-link:focus-visible {
  color: var(--kinjo-color-text-inverse);
}
.nav-desktop-trigger:hover::after,
.nav-desktop-trigger:focus-visible::after,
.nav-desktop-trigger[aria-expanded="true"]::after,
.nav-desktop-link:hover::after,
.nav-desktop-link:focus-visible::after {
  left: 10%;
  right: 10%;
}

/* ── Minimal chevron (spec Step 2): thin stroke, rotates on hover/open
   instead of the heavier Material `expand_more` glyph ── */
/* Explicit size here (not a Tailwind h-3/w-3 utility): tailwind.home.css
   is a prebuilt/purged bundle (see tailwind.config.js), so a class with
   no prior usage in the source at build time never makes it into the
   compiled file and the bare <svg> falls back to intrinsic sizing. */
.kinjo-chevron { width: 12px; height: 12px; transition: transform 0.3s ease; }
.nav-desktop-trigger:hover .kinjo-chevron,
.nav-desktop-trigger[aria-expanded="true"] .kinjo-chevron { transform: rotate(180deg); }
[data-chevron] { transition: transform 0.2s ease; }
[data-chevron].rotate-180 { transform: rotate(180deg); }

/* ── Language switcher (spec Step 3): globe + code, no border/box ── */
.kinjo-lang-switch {
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}
.kinjo-lang-switch:hover, .kinjo-lang-switch:focus-visible { color: var(--kinjo-color-text-inverse); }

/* ── Secondary action: text link with an underline reveal, no fill ── */
.kinjo-nav-link-ghost { position: relative; color: rgba(255, 255, 255, 0.90); transition: color 0.3s ease; }
.kinjo-nav-link-ghost::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(197, 160, 89, 0.85);
  transition: left 0.3s ease, right 0.3s ease;
}
.kinjo-nav-link-ghost:hover, .kinjo-nav-link-ghost:focus-visible { color: var(--kinjo-color-text-inverse); }
.kinjo-nav-link-ghost:hover::after, .kinjo-nav-link-ghost:focus-visible::after { left: 14%; right: 14%; }

/* ── Primary action: pop off the page with a diffused gold shadow and a
   gentle lift on hover, on top of the existing bg-tertiary/text-primary
   pill (spec Step 3) ── */
.kinjo-cta-primary {
  background-color: var(--kinjo-brand-green);
  box-shadow: 0 10px 22px -6px rgba(197, 160, 89, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.kinjo-cta-primary:hover, .kinjo-cta-primary:focus-visible {
  background-color: var(--kinjo-brand-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -6px rgba(197, 160, 89, 0.7);
}

/* ── Dropdown panels (spec Step 3): smooth scale+fade enter animation ── */
.nav-dropdown-menu { transform-origin: top right; }
[dir="ltr"] .nav-dropdown-menu { transform-origin: top left; }
@keyframes kinjoDropdownIn {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.nav-dropdown-menu:not([hidden]) { animation: kinjoDropdownIn 0.18s cubic-bezier(0.2, 0.8, 0.3, 1); }
@media (prefers-reduced-motion: reduce) {
  .nav-dropdown-menu:not([hidden]) { animation: none; }
}

/* ── Sub-menu items (spec Step 4): blue-50 hover tint on every menu item ── */
.nav-dropdown-menu a[role="menuitem"]:hover,
.nav-dropdown-menu button[role="menuitem"]:hover { background: #eff6ff; }

/* ── Governorates mega-menu (spec Step 5): roomier grid, all 12 visible
   without in-panel scrolling; panel width stays ≥400px ── */
#governorates-menu { max-width: calc(100vw - 2rem); }
#governorates-menu .grid { gap: 8px; }
#governorates-menu .grid button:hover { color: #1d4ed8; background: #eff6ff; }

/* ── Mobile app mockup (Section 5). Plain CSS for the same reason as the
   store badges: tailwind.home.css is prebuilt. The screen mirrors the
   real parent dashboard in mobile/ (app bar, child card, the daily-report
   fields meals / nap / activities / mood) so the picture shows what the
   copy beside it promises. Colours are design tokens or rgba() only. ── */
.kinjo-phone-stage { position: relative; display: flex; justify-content: center; padding: 1.5rem 0 2.5rem; }
.kinjo-phone-stage::before {
  content: ""; position: absolute; inset: 8% 12% 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(197, 160, 89, 0.28), rgba(109, 11, 0, 0.10) 60%, transparent);
  filter: blur(8px); z-index: 0;
}
.kinjo-phone-stage::after {
  /* floor shadow: grounds the device instead of letting it float */
  content: ""; position: absolute; bottom: 0.75rem; left: 50%; width: 230px; height: 22px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, 0.28), transparent); z-index: 0;
}
.kinjo-phone {
  position: relative; z-index: 1; width: 304px; height: 640px; padding: 10px;
  border-radius: 46px; background: var(--kinjo-color-text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08) inset, 0 30px 60px -18px rgba(15, 23, 42, 0.45), 0 12px 24px -12px rgba(109, 11, 0, 0.25);
  transform: rotate(-2deg);
}
[dir="rtl"] .kinjo-phone { transform: rotate(2deg); }
.kinjo-phone::after {
  /* glass glare across the screen */
  content: ""; position: absolute; inset: 10px; border-radius: 36px; pointer-events: none;
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 38%);
}
.kinjo-phone__screen {
  position: relative; height: 100%; border-radius: 36px; overflow: hidden;
  background: rgba(248, 249, 252, 1); display: flex; flex-direction: column;
  font-size: 12px; color: var(--kinjo-color-text-primary);
}
.kinjo-phone__island { position: absolute; top: 9px; left: 50%; width: 84px; height: 22px; transform: translateX(-50%); border-radius: 999px; background: var(--kinjo-color-text-primary); z-index: 3; }
.kinjo-phone__appbar { background: linear-gradient(160deg, var(--kinjo-brand), var(--kinjo-color-border-hover)); color: var(--kinjo-color-text-inverse); padding: 12px 16px 34px; }
.kinjo-phone__status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; direction: ltr; padding: 0 6px 14px; }
.kinjo-phone__status .bi { font-size: 12px; }
.kinjo-phone__hello { font-size: 12px; opacity: 0.8; }
.kinjo-phone__title { font-size: 17px; font-weight: 800; margin-top: 2px; }
.kinjo-phone__body { flex: 1; padding: 0 12px; margin-top: -22px; display: flex; flex-direction: column; gap: 9px; }
.kinjo-phone__toast {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.35);
  animation: kinjoPhoneToast 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) 0.4s both;
}
.kinjo-phone__toast-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--kinjo-brand); color: var(--kinjo-color-text-inverse); }
.kinjo-phone__toast-icon .material-symbols-outlined { font-size: 15px; }
.kinjo-phone__toast strong { display: block; font-size: 13px; }
.kinjo-phone__muted { color: var(--kinjo-color-text-muted); font-size: 12px; }
.kinjo-phone__card { background: rgba(255, 255, 255, 1); border-radius: 16px; padding: 10px; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 4px 14px -6px rgba(15, 23, 42, 0.12); }
.kinjo-phone__child { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.kinjo-phone__avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--kinjo-brand); background: var(--kinjo-color-gold-surface-soft); border: 1.5px solid var(--kinjo-color-gold-accent); }
.kinjo-phone__avatar .material-symbols-outlined { font-size: 20px; }
.kinjo-phone__child strong { display: block; font-size: 14px; }
.kinjo-phone__pill { margin-inline-start: auto; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; color: var(--kinjo-color-pill-success-text); background: var(--kinjo-color-pill-success-surface); border: 1px solid var(--kinjo-color-pill-success-border); white-space: nowrap; }
.kinjo-phone__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kinjo-phone__tile { border-radius: 11px; padding: 7px 8px; background: var(--kinjo-color-gold-surface-faint); border: 1px solid rgba(197, 160, 89, 0.22); }
.kinjo-phone__tile .material-symbols-outlined, .kinjo-phone__tile .bi { font-size: 17px; line-height: 1; color: var(--kinjo-brand); }
.kinjo-phone__tile b { display: block; font-size: 13px; margin-top: 2px; }
.kinjo-phone__tile small { display: block; font-size: 12px; color: var(--kinjo-color-text-muted); }
.kinjo-phone__battery { display: inline-block; width: 18px; height: 9px; margin-inline-start: 2px; border-radius: 3px; border: 1.5px solid currentColor; background: linear-gradient(90deg, currentColor 75%, transparent 75%) content-box; padding: 1px; vertical-align: -1px; }
.kinjo-phone__list { padding: 4px 10px; }
.kinjo-phone__row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.kinjo-phone__row + .kinjo-phone__row { border-top: 1px solid rgba(15, 23, 42, 0.06); }
.kinjo-phone__row strong { display: block; font-size: 13px; }
.kinjo-phone__row-icon { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: var(--kinjo-brand); background: rgba(109, 11, 0, 0.07); }
.kinjo-phone__ok { margin-inline-start: auto; font-size: 14px; color: var(--kinjo-color-pill-success-text); }
.kinjo-phone__secure { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--kinjo-color-pill-success-text); }
.kinjo-phone__secure .material-symbols-outlined { font-size: 13px; }
.kinjo-phone__nav { display: flex; justify-content: space-around; padding: 8px 6px 16px; background: rgba(255, 255, 255, 1); border-top: 1px solid rgba(15, 23, 42, 0.06); color: var(--kinjo-color-text-muted); }
.kinjo-phone__nav span.kinjo-phone__tab { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; }
.kinjo-phone__nav .material-symbols-outlined, .kinjo-phone__nav .bi { font-size: 20px; line-height: 1.1; }
.kinjo-phone__nav .is-active { color: var(--kinjo-brand); font-weight: 700; }
.kinjo-phone__home-bar { position: absolute; bottom: 6px; left: 50%; width: 90px; height: 4px; transform: translateX(-50%); border-radius: 999px; background: rgba(15, 23, 42, 0.35); }
@keyframes kinjoPhoneToast {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 380px) { .kinjo-phone, [dir="rtl"] .kinjo-phone { transform: scale(0.92); } }
@media (prefers-reduced-motion: reduce) {
  .kinjo-phone__toast { animation: none; }
}

/* Metallic gold institution cards: one step of the eleven-step scale in
   design-tokens.css per card (--kinjo-gold-1..11), so the grid reads as a
   sequence. Steps 1-7 use dark ink, 8-11 light ink and a softer highlight;
   every pairing is AA at all three gradient stops. The flat fill is the
   fallback where color-mix() is unsupported. */
.sky-institution-card {
  --card-gold: var(--kinjo-gold-1);
  --card-ink: var(--kinjo-gold-ink-dark);
  --card-hi: 60%;
  --card-lo: 90%;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  color: var(--card-ink);
  background: var(--card-gold);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--card-gold) var(--card-hi), rgb(255 255 255)) 0%,
    var(--card-gold) 50%,
    color-mix(in srgb, var(--card-gold) var(--card-lo), rgb(0 0 0)) 100%);
  border: 1px solid color-mix(in srgb, var(--card-gold) 75%, rgb(0 0 0));
  padding: var(--kinjo-spacing-5) 0.875rem;
  text-align: center;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 3px 0 rgba(60, 37, 9, 0.12);
}

.sky-institution-card:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 20px -4px rgba(60, 37, 9, 0.22);
  border-color: color-mix(in srgb, var(--card-gold) 55%, rgb(0 0 0));
}

.sky-institution-card:focus-visible {
  outline: 3px solid var(--kinjo-gold-ink-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--kinjo-gold-chip-bg);
}

/* One step per card, in grid order (light -> deep). */
#trusted-partners .sky-institution-card:nth-child(2)  { --card-gold: var(--kinjo-gold-2); }
#trusted-partners .sky-institution-card:nth-child(3)  { --card-gold: var(--kinjo-gold-3); }
#trusted-partners .sky-institution-card:nth-child(4)  { --card-gold: var(--kinjo-gold-4); }
#trusted-partners .sky-institution-card:nth-child(5)  { --card-gold: var(--kinjo-gold-5); }
#trusted-partners .sky-institution-card:nth-child(6)  { --card-gold: var(--kinjo-gold-6); }
#trusted-partners .sky-institution-card:nth-child(7)  { --card-gold: var(--kinjo-gold-7); }
#trusted-partners .sky-institution-card:nth-child(n+8) {
  --card-ink: var(--kinjo-gold-ink-light);
  --card-hi: 88%;
  --card-lo: 85%;
}
#trusted-partners .sky-institution-card:nth-child(8)  { --card-gold: var(--kinjo-gold-8); }
#trusted-partners .sky-institution-card:nth-child(9)  { --card-gold: var(--kinjo-gold-9); }
#trusted-partners .sky-institution-card:nth-child(10) { --card-gold: var(--kinjo-gold-10); }
#trusted-partners .sky-institution-card:nth-child(11) { --card-gold: var(--kinjo-gold-11); }

/* Full card width, fixed height: most partner logos are wide (Sanad,
   VTC, Civil Defense), so a square box capped them by width at about
   half the height they get here. Logos scale by height instead. */
.sky-institution-card .logo-box {
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255 255 255);
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: var(--kinjo-spacing-3);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 3px rgba(60, 37, 9, 0.18);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sky-institution-card:hover .logo-box {
  box-shadow: 0 4px 10px -2px rgba(60, 37, 9, 0.25);
}

.sky-institution-card img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05));
  transition: transform 0.25s ease;
}

/* Zoom the logo, not the box: a full-width box would be clipped by the
   card's overflow: hidden. */
.sky-institution-card:hover img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .sky-institution-card img { transition: none; }
  .sky-institution-card:hover img { transform: none; }
}

.sky-institution-card .acronym {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kinjo-gold-chip-ink);
  letter-spacing: 0.6px;
  background: var(--kinjo-gold-chip-bg);
  padding: 2px 8px;
  border-radius: 9999px;
  margin-bottom: 0.35rem;
  display: inline-block;
  text-transform: uppercase;
}

.sky-institution-card .full-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--card-ink);
  line-height: 1.35;
  margin-bottom: var(--kinjo-spacing-1);
  min-height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sky-institution-card .mandate-badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--kinjo-gold-chip-ink);
  background: var(--kinjo-gold-chip-bg);
  border: 1px solid rgba(74, 50, 9, 0.18);
  padding: 2px 6px;
  border-radius: 6px;
  margin-top: auto;
  line-height: 1.2;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sky-institution-card[data-institution="vtc"] .mandate-badge {
  white-space: normal;
}

@media (max-width: 768px) {
  .sky-institution-card {
    padding: var(--kinjo-spacing-4) 0.625rem;
    min-height: 180px;
  }

  .sky-institution-card .logo-box {
    height: 60px;
    padding: 6px 10px;
  }

  .sky-institution-card .full-name {
    font-size: 0.75rem;
    min-height: 2.1rem;
  }

  .sky-institution-card .mandate-badge {
    font-size: 0.625rem;
  }
}

@media (max-width: 480px) {
  .sky-institution-card {
    padding: 0.875rem var(--kinjo-spacing-2);
    min-height: 170px;
  }

  .sky-institution-card .logo-box {
    height: 52px;
    padding: 5px 8px;
  }

  .sky-institution-card .acronym {
    font-size: 0.65rem;
  }

  .sky-institution-card .full-name {
    font-size: 0.7rem;
  }
}

/* Partner carousel. The track is a native scroll-snap strip (touch swipe
   for free); the centred card is fully revealed and its neighbours are
   clipped with an inset clip-path that animates open as they arrive. */
.partner-carousel {
  --slide-w: clamp(230px, 26vw, 290px);
  position: relative;
}
.partner-track {
  display: flex;
  gap: var(--kinjo-spacing-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.75rem calc(50% - var(--slide-w) / 2) 1.25rem;
  cursor: grab;
}
.partner-track::-webkit-scrollbar { display: none; }
/* Snap only without JS: it would fight the continuous drift. */
.partner-track.is-live { scroll-snap-type: none; }
.partner-track.is-dragging { cursor: grabbing; }
.partner-track.is-dragging .sky-institution-card { pointer-events: none; }

#trusted-partners .sky-institution-card {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  min-height: 250px;
  padding: var(--kinjo-spacing-5) var(--kinjo-spacing-4);
  font: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  clip-path: inset(7% var(--clip-x, 9%) round 1rem);
  opacity: 0.8;
  transition: clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
#trusted-partners .sky-institution-card.is-active,
#trusted-partners .sky-institution-card:focus-visible {
  clip-path: inset(0 round 1rem);
  opacity: 1;
}
/* Inset outline in the card's own ink, so it shows on every gold step. */
#trusted-partners .sky-institution-card[aria-current="true"] {
  outline: 3px solid var(--card-ink);
  outline-offset: -6px;
}
#trusted-partners .sky-institution-card .logo-box { height: 92px; }
#trusted-partners .sky-institution-card .full-name { font-size: 0.9375rem; }
#trusted-partners .sky-institution-card .mandate-badge { font-size: 0.75rem; }
#trusted-partners .sky-institution-card img { -webkit-user-drag: none; }

.partner-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kinjo-spacing-3);
  margin-top: var(--kinjo-spacing-1);
}
.partner-nav {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kinjo-gold-chip-ink);
  background: var(--kinjo-gold-chip-bg);
  border: 1px solid color-mix(in srgb, var(--kinjo-gold-6) 60%, transparent);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.partner-nav:hover { background: var(--kinjo-gold-2); }
.partner-nav:active { transform: scale(0.94); }
.partner-nav:focus-visible { outline: 3px solid var(--kinjo-gold-ink-dark); outline-offset: 2px; }
.partner-dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; }
.partner-dot {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 9999px;
  border: 0;
  background: transparent;
}
.partner-dot::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--kinjo-gold-8); opacity: 0.5; }
.partner-dot[aria-current="true"]::before { width: 1.5rem; opacity: 1; }
.partner-dot:focus-visible { outline: 2px solid var(--kinjo-gold-ink-dark); outline-offset: 2px; }

/* Detail panel: the chosen body's text arrives word by word from the
   inline end, skewed and blurred, settling in place (Arabic words are
   whole spans, so letters stay joined). */
.partner-detail {
  max-width: 52rem;
  margin: 1.75rem auto 0;
  padding: var(--kinjo-spacing-6) var(--kinjo-spacing-5);
  border-radius: 1.25rem;
  text-align: center;
  background: var(--kinjo-gold-chip-bg);
  border: 1px solid color-mix(in srgb, var(--kinjo-gold-6) 45%, transparent);
  overflow: hidden;
}
.partner-detail__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--kinjo-gold-chip-ink);
  margin-bottom: var(--kinjo-spacing-1);
}
.partner-detail__title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--kinjo-gold-ink-dark);
  margin-bottom: var(--kinjo-spacing-3);
}
.partner-detail__title:empty { display: none; }
.partner-detail__text {
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 700;
  line-height: 1.7;
  color: var(--kinjo-gold-ink-dark);
}
.partner-word {
  display: inline-block;
  opacity: 0;
  --word-from: 3.5rem;
  --word-skew: -18deg;
  transform: translateX(var(--word-from)) skewX(var(--word-skew));
  filter: blur(6px);
  animation: partner-word-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 55ms);
}
[dir="rtl"] .partner-word { --word-from: -3.5rem; --word-skew: 18deg; }
@keyframes partner-word-in {
  to { opacity: 1; transform: none; filter: none; }
}
.partner-detail__hint { font-size: 0.875rem; color: var(--kinjo-gold-chip-ink); }
.partner-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: var(--kinjo-spacing-3);
  font-weight: 700;
  color: var(--kinjo-gold-chip-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partner-detail__note {
  margin-top: var(--kinjo-spacing-4);
  font-size: 0.75rem;
  color: var(--kinjo-gold-chip-ink);
}

@media (max-width: 640px) {
  .partner-carousel { --slide-w: 64vw; --clip-x: 3%; }
}
@media (prefers-reduced-motion: reduce) {
  #trusted-partners .sky-institution-card { transition: none; }
  .partner-word { animation: none; opacity: 1; transform: none; filter: none; }
  .partner-dot { transition: none; }
}

/* Shared public controls keep a 48px target even when their icon is small. */
.kinjo-public-header :is(a, button), #kg-details-modal button, #kinjo-journey-infographic button { min-block-size: 3rem; min-inline-size: 3rem; }
.partner-controls { flex-wrap: wrap; }
@media (max-width: 640px) { .partner-dots { order: 3; flex-basis: 100%; } }

.partner-controls button { min-inline-size: 3rem; min-block-size: 3rem; }