/* ==========================================================================
   InjazatHR — post-hero sections. Shares the hero's brand system.
   Scoped under .injazat-sec. RTL-first. Contrast tuned for WCAG AA (§36):
   blue text uses --blue-dark on light and --blue-bright on dark.
   ========================================================================== */

.injazat-sec {
  --blue: #0878E8;
  --blue-light: #1688F5;
  --blue-dark: #005FAE;      /* blue text on light bg (AA) */
  --blue-bright: #4AA6FF;    /* blue text/icons on dark bg */

  --navy: #012754;
  --navy-deep: #001D3D;
  --navy-soft: #063A70;

  --white: #FFFFFF;
  --background: #F7FAFD;
  --background-soft: #F2F7FC;

  --text: #102F50;
  --text-secondary: #566B80; /* slightly darker than spec #60758A for AA */

  --border: #E2EAF2;
  --border-blue: rgba(8,120,232,.20);

  --green: #17C964;
  --red: #EF4444;
  --orange: #F59E0B;
  --gold: #F5A623;

  --shadow-sm: 0 6px 20px rgba(0,40,80,.06);
  --shadow-md: 0 15px 45px rgba(0,40,80,.08);
  --shadow-lg: 0 25px 70px rgba(0,30,70,.14);

  --ff-ar: "Tajawal", "Cairo", Arial, sans-serif;
  --ff-en: "Tajawal", "Cairo", Arial, sans-serif;

  direction: rtl;
  font-family: var(--ff-ar);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding-block: 110px;
  position: relative;

  /* Full-bleed breakout (scrollbar-safe, RTL-safe) so navy bands and showcases
     escape narrow theme content wrappers. Section roots also carry the WP
     `alignfull` class to opt out of block-theme constrained layout. */
  width: calc(100vw - var(--injazat-sbw, 0px));
  max-width: none;
  margin-block: 0;
  margin-inline: calc((100% - (100vw - var(--injazat-sbw, 0px))) / 2);
  overflow-x: clip;          /* overlapping shots must not add page scroll */
}

/* ---- reset (:where => element specificity, never beats components) -------- */
.injazat-sec * { box-sizing: border-box; }
:where(.injazat-sec) h2,
:where(.injazat-sec) h3,
:where(.injazat-sec) h4,
:where(.injazat-sec) p,
:where(.injazat-sec) ul,
:where(.injazat-sec) ol,
:where(.injazat-sec) li,
:where(.injazat-sec) blockquote,
:where(.injazat-sec) figure { margin: 0; padding: 0; list-style: none; font-family: var(--ff-ar); }
:where(.injazat-sec) img { max-width: 100%; height: auto; display: block; border: 0; }

.injazat-sec .ltr { direction: ltr; unicode-bidi: isolate; }

/* ---- one icon system: stroke centralized here so the whole family stays in
   lock-step; per-container sizes below opt into the sm/md/lg size scale. ---- */
:root {
  --injazat-icon-stroke: 1.8;   /* single stroke weight for every icon */
  --injazat-icon-sm: 20px;
  --injazat-icon-md: 24px;
  --injazat-icon-lg: 32px;
}
.injazat-icon {
  width: var(--injazat-icon-md); height: var(--injazat-icon-md); display: block;
  stroke-width: var(--injazat-icon-stroke);   /* overrides the SVG attr → one weight everywhere */
}

/* ---- containers ---------------------------------------------------------- */
.injazat-container      { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.injazat-container-wide { width: min(1360px, calc(100% - 64px)); margin-inline: auto; }

/* ---- backgrounds --------------------------------------------------------- */
.injazat-sec--white { background: var(--white); }
.injazat-sec--light { background: var(--background); }
.injazat-sec--soft  { background: var(--background-soft); }
.injazat-sec--navy {
  background:
    radial-gradient(circle at 30% 40%, rgba(8,120,232,.35), transparent 55%),
    var(--navy);
  color: #EAF3FC;
}

/* ==========================================================================
   TYPOGRAPHY — section header
   ========================================================================== */
.injazat-head { max-width: 720px; margin-bottom: 54px; }
.injazat-head--center { margin-inline: auto; text-align: center; }

/* Section eyebrow = a hero-style badge pill (green status dot + tinted fill).
   Light sections get a light-blue pill with dark-blue text; the navy override
   below mirrors the hero badge exactly (translucent blue + white text). */
.injazat-sec .injazat-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px; border-radius: 20px;
  background: rgba(8, 120, 232, 0.08);
  border: 1px solid var(--border-blue);
  color: var(--blue-dark);
  font-size: 14px; font-weight: 700;
  margin-bottom: 16px;
}
.injazat-sec .injazat-eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--green); display: inline-block; flex: 0 0 auto;
  box-shadow: 0 0 0 3px rgba(23, 201, 100, 0.22);
}
.injazat-head--center .injazat-eyebrow { justify-content: center; }

.injazat-sec .injazat-h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 800; line-height: 1.2;
  color: var(--text); letter-spacing: -0.01em;
}
.injazat-sec .injazat-lead {
  margin-top: 18px;
  font-size: 18px; line-height: 1.8; font-weight: 400;
  color: var(--text-secondary); max-width: 680px;
}
.injazat-head--center .injazat-lead { margin-inline: auto; }

/* dark-section text */
.injazat-sec--navy .injazat-h2 { color: #FFFFFF; }
.injazat-sec--navy .injazat-lead { color: #C9DCEF; }
/* Navy sections: mirror the hero badge (translucent blue fill + white text) */
.injazat-sec--navy .injazat-eyebrow {
  background: rgba(4, 67, 129, 0.55);
  border-color: rgba(54, 148, 239, 0.55);
  color: #FFFFFF;
  backdrop-filter: blur(4px);
}

/* ==========================================================================
   CARD GRIDS (problems, modules)
   ========================================================================== */
.injazat-cards { display: grid; gap: 24px; }
.injazat-cards--4 { grid-template-columns: repeat(4, 1fr); }
.injazat-cards--3 { grid-template-columns: repeat(3, 1fr); }

.injazat-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 30px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.injazat-card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(8,120,232,.10); color: var(--blue);
  display: grid; place-items: center; margin-bottom: 20px;
}
.injazat-sec .injazat-card-title { font-size: 19px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.injazat-sec .injazat-card-text  { font-size: 15.5px; line-height: 1.75; color: var(--text-secondary); }

/* module (level 2) hover */
.injazat-card--module { border-radius: 18px; border-color: var(--border-blue); box-shadow: var(--shadow-sm); position: relative; }
.injazat-card--module .injazat-card-arrow {
  color: var(--blue); margin-top: 18px; display: inline-block;
  transition: transform .3s ease;
}
.injazat-card--module:hover {
  border-color: var(--blue);
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(8,120,232,.14);
}
.injazat-card--module:hover .injazat-card-arrow { transform: translateX(-5px); }

/* ==========================================================================
   PRODUCT SHOWCASE (two-column). Content first in DOM; areas place it.
   ========================================================================== */
.injazat-showcase {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;   /* give the screenshot more room */
  grid-template-areas: "content visual";
  gap: 46px; align-items: center;
}
.injazat-showcase--reverse { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "visual content"; }
.injazat-showcase-content { grid-area: content; }
.injazat-showcase-visual  { grid-area: visual; }
.injazat-showcase .injazat-head { margin-bottom: 28px; }

/* product screenshot — presented in a modern browser window frame (matches the
   hero's Mac frame), on a soft glow stage, click to enlarge. */
.injazat-shot-wrap { position: relative; }
.injazat-shot-glow {
  position: absolute; inset: 10% 4%; z-index: 0;
  background: rgba(8,120,232,.30); filter: blur(70px); border-radius: 50%;
  pointer-events: none;
}
.injazat-shot-wrap--dark .injazat-shot-glow { background: rgba(8,120,232,.45); }

.injazat-shot-frame {
  position: relative; z-index: 1; margin: 0;
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(0,30,70,.08);
  box-shadow: 0 30px 70px rgba(0,25,60,.22), 0 6px 18px rgba(0,25,60,.10);
}
.injazat-shot-bar {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px;
  background: #EDEFF3; border-bottom: 1px solid #DDE2E9;
}
.injazat-shot-bar i { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.injazat-shot-bar i:nth-child(1) { background: #FF5F57; }
.injazat-shot-bar i:nth-child(2) { background: #FEBC2E; }
.injazat-shot-bar i:nth-child(3) { background: #28C840; }
.injazat-shot { display: block; width: 100%; height: auto; }

/* zoom affordance (click to enlarge) */
.injazat-shot.injazat-zoomable { cursor: zoom-in; }
.injazat-shot-zoom {
  position: absolute; inset-block-end: 14px; inset-inline-start: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(8,25,55,.62); color: #fff; backdrop-filter: blur(3px);
  display: grid; place-items: center; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; z-index: 2;
}
.injazat-shot-zoom .injazat-icon { width: 20px; height: 20px; }
.injazat-shot-frame:hover .injazat-shot-zoom { opacity: 1; transform: translateY(0); }
@media (hover: none) { .injazat-shot-zoom { opacity: .9; transform: none; } }

/* Two layered screenshots: primary in front, secondary peeking from behind */
.injazat-shot-wrap--pair { position: relative; padding-top: 46px; padding-inline-start: 26px; }
.injazat-shot-wrap--pair .injazat-shot-frame--front {
  position: relative; z-index: 2; width: 87%; margin-inline-start: auto;
}
.injazat-shot-wrap--pair .injazat-shot-frame--back {
  position: absolute; top: 0; inset-inline-start: 0; z-index: 1; width: 60%;
  transform: rotate(-2.5deg); transform-origin: top left;
  box-shadow: 0 18px 40px rgba(0,25,60,.16);
}

/* feature list (check rows) */
.injazat-features { margin-top: 8px; }
.injazat-feature-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding-block: 14px; border-bottom: 1px solid var(--border);
}
.injazat-feature-row:last-child { border-bottom: 0; }
.injazat-feature-icon {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
}
.injazat-feature-icon .injazat-icon { width: 16px; height: 16px; }
.injazat-sec .injazat-feature-copy { font-size: 16px; line-height: 1.6; color: var(--text); padding-top: 3px; }
.injazat-features--dark .injazat-feature-row { border-color: rgba(255,255,255,.12); }
.injazat-features--dark .injazat-feature-copy { color: #EAF3FC; }

/* benefit rows (icon + title + text) */
.injazat-benefit-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding-block: 18px; border-bottom: 1px solid var(--border);
}
.injazat-benefit-row:last-child { border-bottom: 0; }
.injazat-benefit-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(8,120,232,.10); color: var(--blue);
  display: grid; place-items: center;
}
.injazat-sec .injazat-benefit-title { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.injazat-sec .injazat-benefit-text  { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

/* Benefits as centered value-prop cards (no screenshot) */
.injazat-benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; }
.injazat-benefit-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  padding: 30px 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.injazat-benefit-badge {
  width: 58px; height: 58px; border-radius: 15px; margin: 0 auto 18px;
  background: rgba(8,120,232,.10); color: var(--blue); display: grid; place-items: center;
}
.injazat-benefit-badge .injazat-icon { width: 28px; height: 28px; }
.injazat-benefits-grid .injazat-benefit-title { font-size: 18px; margin-bottom: 8px; }

/* ==========================================================================
   MOBILE APP (dark, overlapping phones)
   ========================================================================== */
.injazat-app-features {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 8px;
}
.injazat-app-feature { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #EAF3FC; }
.injazat-app-feature-icon {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--blue-bright); display: grid; place-items: center;
}
.injazat-app-feature-icon .injazat-icon { width: 20px; height: 20px; }

/* Modern "app trio": a large straight center phone in front, two smaller
   straight phones tucked behind its edges — clean, tap/click any to enlarge. */
.injazat-phones { position: relative; min-height: 540px; }
.injazat-phones .injazat-shot-glow { inset: 8% 6%; background: rgba(8,120,232,.5); }
.injazat-phone {
  position: absolute; border-radius: 30px;
  background: #0F1720; padding: 6px;   /* device bezel around frameless screenshot */
  cursor: zoom-in;
}
.injazat-phone--1 {                       /* behind, right side (RTL) */
  right: 8%; top: 96px; width: 188px; z-index: 1;
  box-shadow: 0 20px 44px rgba(0,10,35,.42);
}
.injazat-phone--3 {                       /* behind, left side */
  left: 8%; top: 96px; width: 188px; z-index: 2;
  box-shadow: 0 20px 44px rgba(0,10,35,.42);
}
.injazat-phone--2 {                       /* front, centered, larger */
  left: 50%; top: 0; width: 262px; transform: translateX(-50%); z-index: 3;
  box-shadow: 0 34px 70px rgba(0,10,35,.55);
}

/* ==========================================================================
   ANALYTICS category chips
   ========================================================================== */
.injazat-cat-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.injazat-cat-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff;
  border: 1px solid var(--border-blue); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.injazat-cat-icon { color: var(--blue); display: grid; place-items: center; }
.injazat-cat-icon .injazat-icon { width: 20px; height: 20px; }
.injazat-sec .injazat-cat-title { font-size: 15px; font-weight: 600; color: var(--text); }

/* ==========================================================================
   PARTNERS (standalone strip)
   ========================================================================== */
.injazat-sec .injazat-partners-title { text-align: center; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 28px; }
.injazat-partners-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.injazat-partner-card {
  background: #fff; border: 1px solid #E7EDF3; border-radius: 10px;
  min-height: 64px; display: grid; place-items: center; padding: 12px 20px;
}
.injazat-partner-card img { max-height: 34px; width: auto; object-fit: contain; }
.injazat-partner-card--placeholder { color: #9FB2C6; font-size: 12px; font-weight: 600; }

/* ==========================================================================
   INTEGRATIONS (dark cards)
   ========================================================================== */
.injazat-integrations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1080px; margin-inline: auto; margin-top: 44px; }
.injazat-integration-card {
  background: #fff; border-radius: 16px; min-height: 140px;
  display: grid; place-items: center; padding: 24px; box-shadow: 0 10px 28px rgba(0,10,35,.28);
}
.injazat-integration-card img { max-height: 72px; max-width: 100%; width: auto; height: auto; object-fit: contain; }
.injazat-integration-card--placeholder { color: #9FB2C6; font-size: 12px; font-weight: 600; }

/* ==========================================================================
   ONBOARDING timeline
   ========================================================================== */
.injazat-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
/* ONE continuous connector line behind all four numbers (from the first circle's
   centre to the last). Each 56px circle hugs the RTL start (right) of its 1fr
   column, so its centre is 28px (half a circle) in from that column's right
   edge: the track's right end sits 28px from the container, its left end one
   column (= (100% - 3*24px gaps)/4) minus 28px in. The circles have a solid fill
   and higher z-index, so they sit on top and the track reads as one unbroken line. */
.injazat-timeline::before {
  content: ""; position: absolute; top: 34px; height: 2px; z-index: 0;
  right: 28px; left: calc((100% - 72px) / 4 - 28px);
  background: linear-gradient(to left, var(--blue), rgba(8,120,232,.45));
}
.injazat-step { position: relative; padding-top: 8px; }
.injazat-step-line { display: none; }   /* desktop uses the continuous ::before */
.injazat-step-no {
  display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 2px solid var(--blue);
  color: var(--blue-dark); font-family: var(--ff-en); font-weight: 800; font-size: 20px;
  position: relative; z-index: 2; margin-bottom: 18px;
}
.injazat-step-icon { color: var(--blue); margin-bottom: 12px; display: block; }
.injazat-sec .injazat-step-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.injazat-sec .injazat-step-text  { font-size: 15px; line-height: 1.7; color: var(--text-secondary); }

/* ==========================================================================
   TESTIMONIAL — single big card, auto-playing slider
   ========================================================================== */
.injazat-tslider {
  position: relative; max-width: 1040px; margin-inline: auto;
  overflow: hidden; padding: 14px 2px;   /* padding gives the card shadow room */
}
/* A horizontal track: one review per view, slides leftward each tick. The track
   runs LTR internally so translateX is predictable; each slide's content stays
   RTL. Without JS the track overflows and only the first review shows. */
.injazat-tslides {
  display: flex; direction: ltr; flex-wrap: nowrap;
  will-change: transform;
}
.injazat-tslide { flex: 0 0 100%; direction: rtl; }

.injazat-testimonial-card {
  display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 24px;
  padding: 44px; box-shadow: none;   /* no shadow on customer-story cards */
  margin: 0;
}
/* media panel now frames the customer's company logo */
.injazat-testimonial-media {
  background: var(--background); border: 1px solid var(--border);
  border-radius: 20px; display: grid; place-items: center;
  padding: 28px; min-height: 210px;
}
.injazat-testimonial-media img { max-height: 130px; max-width: 200px; width: auto; object-fit: contain; }

.injazat-stars { display: flex; gap: 4px; margin: 0 0 16px; }
.injazat-star { width: 20px; height: 20px; color: var(--gold); fill: var(--gold); }
.injazat-sec .injazat-quote { font-size: 24px; line-height: 1.7; font-weight: 600; color: var(--text); }
.injazat-testimonial-person { margin-top: 24px; }
.injazat-testimonial-person strong { display: block; font-size: 17px; color: var(--text); }
.injazat-testimonial-person span { display: block; font-size: 15px; color: var(--text-secondary); }
.injazat-testimonial-person .injazat-tcompany { margin-top: 3px; color: var(--blue-dark); font-weight: 600; }

/* dots (JS only) */
.injazat-tdots { display: none; justify-content: center; gap: 10px; margin-top: 28px; }
html.injazat-js .injazat-tdots { display: flex; }
.injazat-tdot {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: #D3DEEA; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.injazat-tdot:hover { background: #B4C6D8; }
.injazat-tdot.is-active { background: var(--blue); transform: scale(1.3); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.injazat-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: stretch; }
.injazat-plan {
  background: #fff; border: 1px solid var(--border); border-radius: 22px;
  padding: 32px; display: flex; flex-direction: column;
}
.injazat-plan--featured { border: 1.5px solid rgba(8,120,232,.45); box-shadow: 0 24px 60px rgba(8,120,232,.10); }

.injazat-plan-head { display: flex; align-items: flex-start; gap: 16px; flex-direction: row-reverse; text-align: right; margin-bottom: 22px; }
.injazat-plan-icon {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(8,120,232,.10); color: var(--blue); display: grid; place-items: center;
}
.injazat-plan-head > div { flex: 1; }
.injazat-sec .injazat-plan-name { font-size: 21px; font-weight: 800; color: var(--text); }
.injazat-sec .injazat-plan-desc { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin-top: 6px; }

.injazat-plan-features {
  columns: 2; column-gap: 20px; padding: 22px 0; margin: 0 0 4px;
  border-top: 1px solid var(--border);
}
.injazat-plan-features li {
  display: flex; align-items: center; gap: 9px; padding-block: 7px;
  font-size: 14.5px; color: var(--text); break-inside: avoid;
}
.injazat-plan-check { width: 16px; height: 16px; color: var(--blue); flex: 0 0 auto; }
/* Premium's "includes all standard features" row: full width + emphasized */
.injazat-plan-features li.injazat-plan-feature--all {
  column-span: all; font-weight: 700; color: var(--blue-dark);
  padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
}
.injazat-plan-features li.injazat-plan-feature--all .injazat-plan-check {
  color: #fff; background: var(--blue); border-radius: 50%; padding: 3px; box-sizing: border-box;
}

/* pricing table */
/* margin-top:auto pushes the price block to the bottom, so any extra height on
   the shorter card falls as a gap in the MIDDLE (between features and price) and
   the table/scale/CTA line up across both cards. */
.injazat-plan-tablewrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-top: auto; margin-bottom: 16px; }
.injazat-plan-tabletitle { text-align: center; font-size: 14.5px; font-weight: 700; color: var(--text); padding: 12px; }
.injazat-plan-table { width: 100%; border-collapse: collapse; }
.injazat-plan-table th, .injazat-plan-table td { text-align: center; padding: 11px 8px; font-size: 14px; border-top: 1px solid var(--border); }
.injazat-plan-table th { background: #F4F8FC; color: var(--text-secondary); font-weight: 600; }
.injazat-plan-table td { color: var(--text); font-weight: 600; }

/* per-employee scale box */
.injazat-plan-scale { background: #F4F8FD; border: 1px solid var(--border-blue); border-radius: 12px; padding: 16px; text-align: center; margin-bottom: 20px; }
.injazat-plan-scale-title { font-size: 15px; font-weight: 800; color: var(--text); }
.injazat-plan-scale-sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.injazat-plan-scale-price { font-size: 16px; font-weight: 800; color: var(--blue-dark); margin: 10px 0 8px; }
.injazat-plan-scale-note { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.injazat-plan .injazat-btn { margin-top: 0; }
/* Equal head height so both cards' feature lists start at the same line */
.injazat-plan-head { min-height: 96px; }

/* perks strip */
.injazat-perks { margin-top: 40px; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 32px; box-shadow: var(--shadow-sm); }
.injazat-perks-head { text-align: center; margin-bottom: 24px; }
.injazat-sec .injazat-perks-head h3 { font-size: 20px; font-weight: 800; color: var(--text); }
.injazat-sec .injazat-perks-head p { font-size: 15px; color: var(--text-secondary); margin-top: 6px; }
.injazat-perks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.injazat-perk { display: flex; align-items: center; gap: 12px; flex-direction: row; text-align: right; }
.injazat-perk-icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: rgba(8,120,232,.10); color: var(--blue); display: grid; place-items: center; }
.injazat-sec .injazat-perk h4 { font-size: 15px; font-weight: 700; color: var(--text); }
.injazat-sec .injazat-perk p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-top: 2px; }

.injazat-vat-note { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--text-secondary); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.injazat-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px; border-radius: 12px;
  font-family: var(--ff-ar); font-size: 16px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.injazat-btn--primary { background: var(--blue); color: #fff; box-shadow: 0 10px 24px rgba(8,120,232,.28); }
.injazat-btn--primary:hover { background: #006ED8; transform: translateY(-2px); }
.injazat-btn--secondary { background: transparent; color: var(--blue-dark); border-color: var(--blue); }
.injazat-btn--secondary:hover { background: rgba(8,120,232,.06); }
.injazat-btn--block { width: 100%; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
/* Named areas keep both columns in one row and place form LEFT, info RIGHT
   under RTL (first area = right). */
.injazat-contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-areas: "info form";
  gap: 56px; align-items: center;
}
.injazat-contact-form-card { grid-area: form; }
.injazat-contact-info { grid-area: info; }

/* right column: heading + numbered steps (on navy) */
.injazat-contact-info .injazat-h2 { color: #fff; margin-top: 12px; }
.injazat-contact-info .injazat-lead { color: #C9DCEF; }
.injazat-contact-steps { margin-top: 34px; }
.injazat-contact-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  padding-block: 18px; border-top: 1px solid rgba(255,255,255,.12);
}
.injazat-contact-stepno {
  flex: 0 0 auto; font-family: var(--ff-en); font-weight: 800; font-size: 14px;
  color: var(--blue-bright);
}
.injazat-sec--navy .injazat-contact-steps h4 { font-size: 16px; font-weight: 700; color: #fff; }
.injazat-sec--navy .injazat-contact-steps p { font-size: 14px; line-height: 1.7; color: #A9C2DC; margin-top: 4px; }

/* left column: white form card */
.injazat-contact-form-card {
  background: #fff; border-radius: 22px;
  padding: 34px; box-shadow: 0 30px 70px rgba(0,10,35,.28);
}
.injazat-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.injazat-field { margin-bottom: 16px; }
.injazat-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.injazat-field label span { color: var(--red); }
.injazat-input { position: relative; display: flex; align-items: center; }
.injazat-input .injazat-icon { position: absolute; inset-inline-start: 12px; width: 18px; height: 18px; color: #9FB2C6; pointer-events: none; }
.injazat-input input, .injazat-input select {
  width: 100%; border: 1px solid var(--border); border-radius: 12px;
  padding-block: 12px; padding-inline: 40px 14px; font-family: var(--ff-ar); font-size: 14.5px; color: var(--text);
  background: #FBFDFF; transition: border-color .2s ease, box-shadow .2s ease;
}
.injazat-input select { padding-inline: 40px 14px; appearance: none; cursor: pointer; }
.injazat-input input::placeholder { color: #A9B7C6; }
.injazat-input input:focus, .injazat-input select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(8,120,232,.15);
}
.injazat-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-secondary); margin: 4px 0 18px; cursor: pointer; }
.injazat-consent input { margin-top: 2px; flex: 0 0 auto; }
.injazat-consent a { color: var(--blue-dark); }
.injazat-hp { position:absolute; left:auto; right:auto; inset-inline-start:0; top:0; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; opacity:0; pointer-events:none; }
.injazat-form-notice { border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: 15px; }
.injazat-form-notice--ok  { background: rgba(23,201,100,.12); color: #0E7B3E; }
.injazat-form-notice--err { background: rgba(239,68,68,.12); color: #B42318; }

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.injazat-final-cta-box {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #06356B, #012754);
  border: 1px solid rgba(255,255,255,.08); border-radius: 24px;
  padding: 64px 32px; text-align: center;
}
.injazat-final-cta-glow {
  position: absolute; inset: -20% 30% auto 30%; height: 60%;
  background: rgba(8,120,232,.5); filter: blur(90px); pointer-events: none;
}
.injazat-final-cta-box .injazat-h2 { color: #fff; position: relative; }
.injazat-final-cta-box .injazat-lead { color: #C9DCEF; margin-inline: auto; position: relative; }
.injazat-final-cta-box .injazat-btn { margin-top: 26px; position: relative; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1199px) {
  .injazat-sec { padding-block: 92px; }
  .injazat-cards--4 { grid-template-columns: repeat(2, 1fr); }
  .injazat-cards--3 { grid-template-columns: repeat(2, 1fr); }
  .injazat-showcase { gap: 40px; }
  .injazat-phone--2 { width: 232px; }
  .injazat-phone--1, .injazat-phone--3 { width: 168px; }
}

@media (max-width: 991px) {
  .injazat-showcase,
  .injazat-showcase--reverse {
    grid-template-columns: 1fr;
    grid-template-areas: "content" "visual";
    gap: 40px;
  }
  .injazat-showcase .injazat-head--center,
  .injazat-showcase-content { text-align: right; }
  /* contact stacks; show heading/info first, then form */
  .injazat-contact-grid { grid-template-columns: 1fr; grid-template-areas: "info" "form"; gap: 32px; }
  .injazat-testimonial-card { grid-template-columns: 220px 1fr; gap: 32px; padding: 36px; }
  .injazat-app-features { grid-template-columns: 1fr 1fr; }
  .injazat-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  /* tablet: partners 4-up (§5) */
  .injazat-partners-strip { grid-template-columns: repeat(4, 1fr); }
  /* pricing: keep 2 plans side by side on tablet; perks 2-up */
  .injazat-perks-grid { grid-template-columns: repeat(2, 1fr); }
  /* keep the phones overlapping on tablet (§9). The visual grid cell holds only
     absolutely-positioned phones, so it never stretches on its own — pin it to
     the column width, else the phones' max-width:100% collapses them to 0. */
  .injazat-phones { width: 100%; max-width: 500px; margin-inline: auto; }
}

@media (max-width: 767px) {
  .injazat-sec { padding-block: 72px; }
  .injazat-head { text-align: center; margin-inline: auto; }
  .injazat-cards { gap: 16px; }
  .injazat-cards--4, .injazat-cards--3 { grid-template-columns: 1fr; }
  .injazat-integrations-grid { grid-template-columns: repeat(2, 1fr); }
  .injazat-showcase-content { text-align: center; }
  .injazat-features, .injazat-benefit-rows { text-align: right; }
  .injazat-feature-row, .injazat-benefit-row { text-align: right; }

  /* pricing stacks to 1 plan per row; feature list 1 column; form row stacks */
  .injazat-plans { grid-template-columns: 1fr; }
  .injazat-plan-features { columns: 1; }
  .injazat-perks-grid { grid-template-columns: 1fr; }
  .injazat-form-row { grid-template-columns: 1fr; }

  /* partners 2 columns */
  .injazat-partners-strip { grid-template-columns: repeat(2, 1fr); }

  /* timeline becomes vertical */
  .injazat-timeline { grid-template-columns: 1fr; gap: 0; }
  .injazat-timeline::before { display: none; }   /* horizontal track is desktop-only */
  .injazat-step { display: grid; grid-template-columns: 56px 1fr; gap: 4px 18px; padding-bottom: 28px; }
  .injazat-step-no { grid-row: span 3; margin-bottom: 0; }
  .injazat-step-line {
    display: block; position: absolute;
    top: 56px; bottom: -8px; left: auto; right: 27px; width: 2px; height: auto;
    background: linear-gradient(to bottom, var(--blue), rgba(8,120,232,.25));
  }
  .injazat-step:last-child .injazat-step-line { display: none; }
  .injazat-step-icon, .injazat-step-title, .injazat-step-text { grid-column: 2; }

  /* testimonial stacks */
  .injazat-testimonial-card { grid-template-columns: 1fr; text-align: center; }
  .injazat-testimonial-media { max-width: 240px; margin-inline: auto; }
  .injazat-stars { justify-content: center; }
  .injazat-sec .injazat-quote { font-size: 21px; }

  /* mobile phones: large centered lead phone + two smaller peeks behind */
  .injazat-phones { min-height: 440px; }
  .injazat-phone--2 { width: 200px; }
  .injazat-phone--1 { right: 0; top: 70px; width: 140px; }
  .injazat-phone--3 { left: 0;  top: 70px; width: 140px; }

  .injazat-app-features { grid-template-columns: 1fr; }
  .injazat-contact-form-card { padding: 26px; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .injazat-partners-strip { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   SCROLL REVEAL — only when JS is on and motion is welcome. Content is fully
   visible without JS (SEO/no-JS safe). Uses `translate`/`scale` so hover
   `transform` on cards is never clobbered.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.injazat-js .injazat-sec [data-reveal] {
    opacity: 0; translate: 0 24px;
    /* keep hover transitions (transform/shadow/border) so cards still animate */
    transition: opacity .6s ease, translate .6s ease,
                transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  html.injazat-js .injazat-sec [data-reveal].is-visible {
    opacity: 1; translate: 0 0;
  }
}

/* Reduced motion: neutralize our own animations only (not the whole page) */
@media (prefers-reduced-motion: reduce) {
  .injazat-sec *, .injazat-sec *::before, .injazat-sec *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================================
   STARTER FAQ (theme) — accordion via <details>
   ========================================================================== */
.injazat-faq-list { max-width: 1100px; margin-inline: auto; }
.injazat-faq-item {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 0 22px; margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.injazat-faq-item[open] { border-color: var(--border-blue); box-shadow: var(--shadow-sm); }
.injazat-faq-q {
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; list-style: none; padding: 20px 0;
}
.injazat-faq-q::-webkit-details-marker { display: none; }
.injazat-faq-num {
  flex: 0 0 auto; width: 40px; height: 30px; border-radius: 8px;
  background: #EAF2FB; color: var(--blue-dark);
  font-family: var(--ff-en); font-weight: 700; font-size: 13px;
  display: grid; place-items: center;
}
.injazat-sec .injazat-faq-text { flex: 1; font-size: 17px; font-weight: 700; color: var(--text); }
.injazat-faq-chev {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--blue);
  display: grid; place-items: center; transition: transform .25s ease, background .2s ease;
}
.injazat-faq-chev .injazat-icon { width: 18px; height: 18px; }
.injazat-faq-item[open] .injazat-faq-chev { transform: rotate(180deg); background: rgba(8,120,232,.08); }
.injazat-sec .injazat-faq-a {
  padding: 0 56px 22px; font-size: 15.5px; line-height: 1.9; color: var(--text-secondary);
}

/* ==========================================================================
   FOOTER (theme)
   ========================================================================== */
.injazat-footer { --teal: #24C7C0; padding-block: 64px 26px; }
.injazat-footer-cards {
  display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 24px;
  padding-bottom: 34px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.injazat-footer-card {
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 28px; text-align: right;
}
.injazat-sec .injazat-footer-card h3 { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.injazat-footer-links li { padding-block: 7px; }
.injazat-footer-links a { color: #A9C2DC; text-decoration: none; font-size: 15px; transition: color .15s ease; }
.injazat-footer-links a:hover { color: #fff; }
.injazat-footer-links .injazat-footer-lang { color: var(--blue-bright); font-weight: 700; }
.injazat-sec .injazat-footer-addr { color: #A9C2DC; font-size: 15px; line-height: 2; }

/* brand card */
.injazat-footer-card--brand { display: flex; flex-direction: column; align-items: flex-start; }
/* black logo artwork rendered white on the navy footer */
.injazat-footer-logo { width: 155px; height: auto; filter: brightness(0) invert(1); }
.injazat-footer-label { color: #A9C2DC; font-size: 14px; margin: 16px 0 12px; }
.injazat-footer-cta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.injazat-footer-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px;
  background: var(--teal); color: #05343A; border-radius: 12px;
  font-family: var(--ff-ar); font-size: 15px; font-weight: 700; text-decoration: none;
  transition: filter .2s ease, transform .2s ease;
}
.injazat-footer-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.injazat-footer-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--teal); font-weight: 700; font-size: 15px; text-decoration: none; }
.injazat-footer-phone .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

/* bottom bar */
.injazat-footer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-top: 22px; color: #8FA9C4; font-size: 13.5px;
}
.injazat-footer-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.injazat-footer-legal a { color: #8FA9C4; text-decoration: none; transition: color .15s ease; }
.injazat-footer-legal a:hover { color: #fff; }
.injazat-footer-copy { color: #6E88A4; }

@media (max-width: 991px) {
  .injazat-footer-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .injazat-footer-cards { grid-template-columns: 1fr; }
  .injazat-footer-bar { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .injazat-footer-legal { justify-content: center; }
}

/* Floating WhatsApp button — official WhatsApp green */
.injazat-whatsapp {
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 9990;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 10px 28px rgba(37,211,102,.45); transition: transform .2s ease, box-shadow .2s ease;
}
.injazat-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,211,102,.55); }
.injazat-whatsapp-glyph { width: 26px; height: 26px; flex: 0 0 auto; }
/* Icon-only on every screen (label hidden, no name shown) */
.injazat-whatsapp span { display: none; }

/* ==========================================================================
   ZOOM LIGHTBOX for product screenshots
   ========================================================================== */
.injazat-zoomable { cursor: zoom-in; }

.injazat-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: rgba(3, 18, 40, .88);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.injazat-lightbox.is-open { display: flex; animation: injazat-fade .2s ease; }
@keyframes injazat-fade { from { opacity: 0; } to { opacity: 1; } }
.injazat-lightbox__img {
  max-width: 94vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
  cursor: zoom-out;
}
.injazat-lightbox__close {
  position: absolute; top: 18px; left: 18px;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .2s ease;
}
.injazat-lightbox__close:hover { background: rgba(255, 255, 255, .3); }

/* ==========================================================================
   PAYROLL — centered layout (header + centered features + framed screenshot)
   ========================================================================== */
.injazat-payroll .injazat-head { margin-bottom: 32px; }
/* fit-content list centered as a block; icons align on the right (RTL start) */
.injazat-payroll-features { width: fit-content; max-width: 100%; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.injazat-payroll-features li { display: flex; align-items: center; gap: 12px; }
.injazat-payroll-ficon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: rgba(8,120,232,.10); color: var(--blue);
  display: grid; place-items: center;
}
.injazat-payroll-ficon .injazat-icon { width: 19px; height: 19px; }
.injazat-sec .injazat-payroll-ftext { font-size: 16px; font-weight: 500; color: var(--text); }
.injazat-payroll-visual {
  margin: 48px auto 0; max-width: 1180px;
  background: transparent; border-radius: 0; padding: 0;   /* no grey panel — screenshot floats on white */
}
.injazat-payroll-visual .injazat-shot-wrap { margin-inline: auto; max-width: 1180px; } /* larger screenshot */
.injazat-payroll-visual .injazat-shot-glow { display: none; } /* keep it clean on the light section */
@media (max-width: 767px) {
  .injazat-payroll-visual { padding: 0; }
  .injazat-sec .injazat-payroll-ftext { font-size: 15px; }
}

/* ---- divider between the Loans and Payroll sections -------------------------
   a centred, fading brand hairline with a small diamond node, sitting on the
   loans/payroll boundary (mid-way through the white gap between them). */
.injazat-payroll::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100% - 80px)); height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(8,120,232,.28) 22%, rgba(8,120,232,.42) 50%, rgba(8,120,232,.28) 78%, transparent);
}
.injazat-payroll::after {
  content: ""; position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 9px; height: 9px; background: var(--blue); border-radius: 2px;
  box-shadow: 0 0 0 6px var(--white);
}

/* ==========================================================================
   SECONDARY PAGES (About / Contact / Blog / single)
   ========================================================================== */
/* Page hero band (navy) */
.injazat-pagehero { padding-block: 74px 62px; }
.injazat-sec .injazat-pagehero-title { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; color: #fff; line-height: 1.2; }
.injazat-pagehero .injazat-lead { margin-inline: auto; }

/* Readable prose (About paragraphs, page & post content) */
.injazat-prose { max-width: 760px; color: var(--text-secondary); font-size: 17px; line-height: 1.9; }
.injazat-prose--center { margin-inline: auto; text-align: center; }
.injazat-prose p { margin: 0 0 18px; }
.injazat-prose h2, .injazat-prose h3 { color: var(--text); font-weight: 800; line-height: 1.3; margin: 30px 0 12px; }
.injazat-prose h2 { font-size: 26px; }
.injazat-prose h3 { font-size: 20px; }
.injazat-prose a { color: var(--blue-dark); text-decoration: underline; }
.injazat-prose ul, .injazat-prose ol { margin: 0 0 18px; padding-inline-start: 24px; }
.injazat-prose li { margin-bottom: 8px; }
.injazat-prose img { max-width: 100%; height: auto; border-radius: 14px; }

/* Mission / Vision cards */
.injazat-mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.injazat-mv-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-sm); text-align: right; }
.injazat-sec .injazat-mv-title { font-size: 20px; font-weight: 800; color: var(--text); margin: 14px 0 8px; }
.injazat-sec .injazat-mv-text { font-size: 15.5px; line-height: 1.8; color: var(--text-secondary); }

/* Blog card grid */
.injazat-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.injazat-blog-card { background: var(--white); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.injazat-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.injazat-blog-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.injazat-blog-card__thumb { display: block; aspect-ratio: 16 / 9; background: #EEF3F9; overflow: hidden; }
.injazat-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.injazat-blog-card__thumb--empty { display: grid; place-items: center; color: #B7C6D8; }
.injazat-blog-card__thumb--empty .injazat-icon { width: 40px; height: 40px; }
.injazat-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px; flex: 1; text-align: right; }
.injazat-blog-card__date { font-size: 13px; color: var(--blue-dark); font-weight: 700; }
.injazat-sec .injazat-blog-card__title { font-size: 18px; font-weight: 800; color: var(--text); line-height: 1.4; }
.injazat-blog-card__excerpt { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); }
.injazat-blog-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--blue-dark); font-weight: 700; font-size: 14px; }
.injazat-blog-card__more .injazat-icon { width: 16px; height: 16px; }

/* Pagination + empty state */
.injazat-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 40px 0 0; padding: 0; }
.injazat-pagination a, .injazat-pagination span { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); text-decoration: none; font-weight: 700; }
.injazat-pagination .current { background: var(--blue); color: #fff; border-color: var(--blue); }
.injazat-empty { text-align: center; color: var(--text-secondary); font-size: 17px; padding: 30px 0; }

/* Single post */
.injazat-post-thumb { margin: 0 auto 28px; max-width: 900px; }
.injazat-post-thumb img { width: 100%; height: auto; border-radius: 16px; }
.injazat-post-body { margin-inline: auto; }
.injazat-post-back { max-width: 760px; margin: 30px auto 0; }
.injazat-post-back a { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-dark); font-weight: 700; text-decoration: none; }
.injazat-post-back a .injazat-icon { width: 18px; height: 18px; }

@media (max-width: 991px) {
  .injazat-blog-grid { grid-template-columns: repeat(2, 1fr); }
  .injazat-mv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .injazat-blog-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ENGLISH / LTR OVERRIDES
   Activate whenever a section carries dir="ltr". Grid two-column layouts use
   named areas that already follow the writing direction, so they mirror for
   free; here we only flip the hardcoded RTL bits: direction, row-reverse flex,
   text-align:right and the onboarding connector track.
   ========================================================================== */
.injazat-sec[dir="ltr"] { direction: ltr; }

/* Icon-left rows (pricing plan head, perks) mirror to normal row + left text. */
.injazat-sec[dir="ltr"] .injazat-plan-head,
.injazat-sec[dir="ltr"] .injazat-perk { flex-direction: row; text-align: left; }

/* Cards/lists that hardcode right alignment. */
.injazat-sec[dir="ltr"] .injazat-footer-card,
.injazat-sec[dir="ltr"] .injazat-mv-card,
.injazat-sec[dir="ltr"] .injazat-blog-card__body { text-align: left; }

/* Forward arrows (module cards, form submit, "read more") are drawn
   left-pointing for RTL; point them right in English. The "back to blog" arrow
   is intentionally left. */
.injazat-sec[dir="ltr"] .injazat-card-arrow .injazat-icon,
.injazat-sec[dir="ltr"] .injazat-btn .injazat-icon,
.injazat-sec[dir="ltr"] .injazat-blog-card__more .injazat-icon { transform: scaleX(-1); }

/* Testimonial slides hardcode direction:rtl (to restore RTL inside the LTR
   flex track); make them LTR in English so quote punctuation sits correctly. */
.injazat-sec[dir="ltr"] .injazat-tslide { direction: ltr; }

/* Onboarding connector: circles now hug the LEFT of each column, so the
   continuous track runs from the first circle's centre on the left to the
   last on the right — the mirror of the RTL formula. */
.injazat-sec[dir="ltr"] .injazat-timeline::before {
  left: 28px;
  right: calc((100% - 72px) / 4 - 28px);
  background: linear-gradient(to right, var(--blue), rgba(8,120,232,.45));
}

@media (max-width: 991px) {
  .injazat-sec[dir="ltr"] .injazat-showcase .injazat-head--center,
  .injazat-sec[dir="ltr"] .injazat-showcase-content { text-align: left; }
}
@media (max-width: 767px) {
  .injazat-sec[dir="ltr"] .injazat-features,
  .injazat-sec[dir="ltr"] .injazat-benefit-rows,
  .injazat-sec[dir="ltr"] .injazat-feature-row,
  .injazat-sec[dir="ltr"] .injazat-benefit-row { text-align: left; }
  /* vertical timeline: line hangs on the left in LTR */
  .injazat-sec[dir="ltr"] .injazat-step-line { right: auto; left: 27px; }
}

/* ==========================================================================
   SECONDARY PAGES — sticky footer + navy backstop
   Short pages (Contact / About / Blog / single) must not leave a white gap
   under the footer on tall desktop screens. The long landing (body.home) is
   deliberately excluded. The section right before the footer grows so the footer
   sits flush at the viewport bottom; the navy body background is a backstop so
   any residual area reads as the footer's navy instead of white.
   ========================================================================== */
body.page:not(.home), body.single:not(.home), body.blog:not(.home),
body.archive:not(.home), body.search:not(.home), body.error404:not(.home) {
  background: #012754;               /* footer navy (was #fff) — no white gap */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.page:not(.home)     .injazat-sec:has(+ .injazat-footer),
body.single:not(.home)   .injazat-sec:has(+ .injazat-footer),
body.blog:not(.home)     .injazat-sec:has(+ .injazat-footer),
body.archive:not(.home)  .injazat-sec:has(+ .injazat-footer),
body.search:not(.home)   .injazat-sec:has(+ .injazat-footer),
body.error404:not(.home) .injazat-sec:has(+ .injazat-footer) { flex-grow: 1; }

/* v1.20.40 mobile full-bleed fallback: never subtract an emulation-sized
   scrollbar value from a phone/tablet viewport. */
@media (max-width: 1200px) {
  html {
    --injazat-sbw: 0px !important;
  }
  .injazat-sec {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}