@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700;800&display=swap');

/* Cloud-Flow bilingual layer: typography, true RTL layout, and language selector. */
html.lang-ar {
  --sans: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html.lang-ar body {
  direction: rtl;
  text-align: start;
  font-family: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.8;
  font-synthesis: none;
}
html.lang-ar h1,
html.lang-ar h2,
html.lang-ar h3,
html.lang-ar h4,
html.lang-ar p,
html.lang-ar li,
html.lang-ar label,
html.lang-ar summary,
html.lang-ar blockquote,
html.lang-ar figcaption {
  text-align: start;
  letter-spacing: 0;
}
html.lang-ar .nav-inner,
html.lang-ar .nav-links,
html.lang-ar .nav-actions,
html.lang-ar .mobile-menu,
html.lang-ar .sf-grid,
html.lang-ar .sf-bottom,
html.lang-ar .wf-actions,
html.lang-ar .wf-support {
  direction: rtl;
}
html.lang-ar .brand,
html.lang-ar .brand-name,
html.lang-ar .sf-mail,
html.lang-ar [dir="ltr"],
html.lang-ar input[type="email"],
html.lang-ar input[type="url"],
html.lang-ar input[type="tel"],
html.lang-ar a[href^="mailto:"],
html.lang-ar .email-address,
html.lang-ar .phone-number {
  direction: ltr;
  unicode-bidi: isolate;
}
html.lang-ar input,
html.lang-ar select,
html.lang-ar textarea {
  text-align: start;
}
html.lang-ar input[type="email"],
html.lang-ar input[type="url"],
html.lang-ar input[type="tel"] {
  text-align: left;
}
html.lang-ar .chapter-rail {
  left: auto;
  right: 22px;
}
html.lang-ar .chapter-rail a {
  text-align: right;
}
html.lang-ar .nav-links a,
html.lang-ar .mobile-menu a,
html.lang-ar .btn,
html.lang-ar button {
  letter-spacing: 0;
}
html.lang-ar .hero-content,
html.lang-ar .hero h1,
html.lang-ar .hero p,
html.lang-ar .section-heading,
html.lang-ar .section-copy,
html.lang-ar .wf-heading,
html.lang-ar .wx-story-hero,
html.lang-ar .wx-story-chapter,
html.lang-ar .wf-fit-grid,
html.lang-ar .site-footer {
  text-align: start;
}
html.lang-ar .brand-name,
html.lang-ar .brand-logo,
html.lang-ar .lang-toggle svg {
  flex-shrink: 0;
}
html.lang-ar .wf-board {
  direction: ltr;
}
html.lang-ar .wf-board .wf-panel,
html.lang-ar .wf-board .wf-node-heading,
html.lang-ar .wf-board .wx-node-heading,
html.lang-ar .wf-board .wf-controls,
html.lang-ar .wf-board .wf-live {
  direction: rtl;
  text-align: start;
}
html.lang-ar .cf-pos-top-actions {
  direction: rtl;
}
html.lang-ar .cf-pos-top-actions .lang-toggle {
  order: -1;
}
.lang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 999px;
  color: var(--text, #f5f5f7);
  background: color-mix(in srgb, var(--surface, #131318) 86%, transparent);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
  flex-shrink: 0;
}
.lang-toggle:hover {
  border-color: color-mix(in srgb, var(--text, #fff) 42%, transparent);
  background: color-mix(in srgb, var(--surface-2, #1e1e25) 94%, transparent);
  transform: translateY(-1px);
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--brand, #3b9cff);
  outline-offset: 3px;
}
.lang-toggle svg { display: block; flex: 0 0 16px; }
.lang-toggle span { display: inline-block; }
.lang-toggle--menu {
  width: 100%;
  min-height: 46px;
  margin-block: 8px 12px;
  justify-content: center;
}
.lang-toggle--inline { margin-inline: 4px; }
html.lang-ar .lang-toggle { font-family: "IBM Plex Sans Arabic", "Inter", sans-serif; }
@media (max-width: 820px) {
  .lang-toggle--nav { min-height: 38px; padding-inline: 10px; }
  .lang-toggle--nav span { display: inline; }
  html.lang-ar .chapter-rail { right: 10px; }
}
@media (max-width: 520px) {
  .lang-toggle--nav { gap: 6px; padding-inline: 9px; font-size: 11px; }
  .lang-toggle--nav svg { width: 14px; height: 14px; }
}

/* Final bilingual typography and cross-device layout polish. */

html.lang-ar .hero-content,
html.lang-ar .hero h1,
html.lang-ar .hero p,
html.lang-ar .hero .eyebrow,
html.lang-ar .hero .actions-row,
html.lang-ar .page-hero .container,
html.lang-ar .page-hero .page-title,
html.lang-ar .page-hero .lede,
html.lang-ar .page-hero .label {
  text-align: center;
}
html.lang-ar .hero h1,
html.lang-ar .page-title,
html.lang-ar .block h2,
html.lang-ar .section h2,
html.lang-ar .cta h1,
html.lang-ar .wf-heading,
html.lang-ar .wx-story-hero h1 {
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  text-wrap: balance;
}
html.lang-ar .hero h1 .gradient,
html.lang-ar .page-title .gradient,
html.lang-ar .block h2 .gradient {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Keep layouts usable from narrow phones through wide desktop displays. */
*, *::before, *::after { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; overflow-x: clip; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
.container { width: min(100% - 40px, 1240px); margin-inline: auto; }
pre, code { max-width: 100%; overflow-x: auto; }
button, input, select, textarea { max-width: 100%; }
input, select, textarea { min-width: 0; }
.grid, .svc-grid, .sf-grid, .wf-fit-grid, .wx-grid, .workflow-grid,
.bundle-addon-grid, .bundle-live-features, .feature-grid, .card-grid {
  min-width: 0;
}
.card, .panel, .wf-panel, .wx-card, .bundle-controls, .bundle-summary,
.workflow-card, .feature-card { min-width: 0; overflow-wrap: anywhere; }
.hero h1, .page-title, h1, h2, h3 { overflow-wrap: anywhere; }
.table-wrap, .table-responsive, .wf-board, .workflow-board { max-width: 100%; overflow-x: auto; }

@media (max-width: 900px) {
  .container { width: min(100% - 32px, 760px); }
  .hero { min-height: min(82svh, 850px); }
  .hero-content { padding-block: 88px 72px; }
  .hero h1 { font-size: clamp(42px, 8vw, 76px); line-height: 1.08; }
  .page-title, .page-hero h1 { font-size: clamp(38px, 7vw, 68px); }
  .section, .block { padding-block: clamp(64px, 10vw, 100px); }
  .nav-inner { gap: 14px; }
  .nav-links { gap: clamp(10px, 1.8vw, 22px); }
  .nav-actions { gap: 10px; }
  .nav-actions .btn { padding-inline: 14px; }
  .svc-grid, .grid, .sf-grid, .wf-fit-grid, .feature-grid, .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wf-board, .workflow-board { overflow-x: auto; }
}
@media (max-width: 680px) {
  .container { width: calc(100% - 32px); }
  .nav-inner { min-height: 68px; }
  .nav-links { display: none !important; }
  .nav-actions { margin-inline-start: auto; gap: 8px; }
  .nav-actions .btn { display: none; }
  .lang-toggle--nav { min-height: 36px; padding-inline: 9px; font-size: 12px; }
  .hero { min-height: 76svh; }
  .hero-content { padding-block: 76px 60px; }
  .hero h1 { margin-block: 22px 18px; font-size: clamp(36px, 10vw, 58px); line-height: 1.16; }
  .hero p, .lede { font-size: 16px; }
  .actions-row { align-items: stretch; gap: 10px; }
  .actions-row .btn { min-width: min(100%, 210px); }
  .page-title, .page-hero h1 { font-size: clamp(34px, 9vw, 52px); line-height: 1.25; }
  .section, .block { padding-block: 56px; }
  .svc-grid, .grid, .sf-grid, .wf-fit-grid, .feature-grid, .card-grid,
  .bundle-addon-grid, .bundle-live-features { grid-template-columns: minmax(0, 1fr) !important; }
  .sf-bottom, .wf-actions, .wf-support { flex-wrap: wrap; }
  .site-footer, footer { padding-inline: 16px; }
  .chapter-rail { display: none; }
  .marquee { max-width: 100%; overflow: hidden; }
  .workflow-phones, .phone-mockups, .device-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .table-wrap, .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 400px) {
  .container { width: calc(100% - 24px); }
  .brand-name { font-size: 15px; }
  .brand-logo { width: 30px; height: 30px; }
  .lang-toggle--nav { gap: 5px; padding-inline: 7px; }
  .hero h1 { font-size: clamp(32px, 9.5vw, 42px); }
  .hero .eyebrow { max-width: 100%; font-size: 10px; padding: 7px 10px; }
  .btn { white-space: normal; }
}

/* CloudFlow final polish: preserve the English composition in Arabic and make
   navigation/layout fluid across narrow, standard, tablet and ultra-wide viewports. */
html.lang-ar .nav .container.nav-inner,
html.lang-ar .wf-page .nav .container.nav-inner {
  /* Keep grid tracks anchored exactly like the English layout; only text runs RTL. */
  direction: ltr !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
html.lang-ar .nav .brand,
html.lang-ar .wf-page .nav .brand {
  direction: ltr;
  justify-self: start;
}
html.lang-ar .nav .nav-links,
html.lang-ar .wf-page .nav .nav-links {
  direction: rtl;
  justify-self: center;
}
html.lang-ar .nav .nav-actions,
html.lang-ar .wf-page .nav .nav-actions {
  direction: ltr;
  justify-self: end;
  margin-inline: 0 !important;
}
html.lang-ar .mobile-menu,
html.lang-ar .wf-page .mobile-menu {
  direction: rtl;
  text-align: right;
}
html.lang-ar .mobile-menu .lang-toggle--menu { direction: rtl; }

/* Elements intentionally centered in the English design remain centered in Arabic. */
html.lang-ar .center,
html.lang-ar .center *,
html.lang-ar .center > h1,
html.lang-ar .center > h2,
html.lang-ar .center > h3,
html.lang-ar .center > p,
html.lang-ar .center > .eyebrow,
html.lang-ar .center > .lede,
html.lang-ar .cta,
html.lang-ar .cta h1,
html.lang-ar .cta h2,
html.lang-ar .cta h3,
html.lang-ar .cta p,
html.lang-ar .wx-section-heading,
html.lang-ar .wf-work-heading,
html.lang-ar .section-heading,
html.lang-ar .section-heading h1,
html.lang-ar .section-heading h2,
html.lang-ar .section-heading h3,
html.lang-ar .section-heading p,
html.lang-ar .section-copy.is-centered,
html.lang-ar [data-align="center"] {
  text-align: center !important;
}
html.lang-ar .center > h1,
html.lang-ar .center > h2,
html.lang-ar .center > h3,
html.lang-ar .cta h1,
html.lang-ar .cta h2,
html.lang-ar .cta h3,
html.lang-ar .wx-section-heading,
html.lang-ar .wf-work-heading {
  margin-inline: auto;
  text-wrap: balance;
}

/* Fluid sizing: avoid fixed-width overflow and keep consistent gutters. */
html { scroll-padding-top: clamp(76px, 10vw, 120px); }
body { min-width: 320px; }
.container { width: min(calc(100% - clamp(24px, 5vw, 64px)), 1240px); }
.hero-content, .page-hero .container, .section-heading, .section-copy,
.wx-section-heading, .wf-heading, .cta { min-width: 0; }
.hero h1, .page-title, .page-hero h1, .cta h2 {
  max-width: 100%;
  font-size: clamp(2rem, 5.2vw, 5rem);
  line-height: 1.16;
  overflow-wrap: break-word;
  hyphens: none;
}
html.lang-ar .hero h1,
html.lang-ar .page-title,
html.lang-ar .page-hero h1,
html.lang-ar .cta h2 {
  line-height: 1.38;
  letter-spacing: 0;
  font-size: clamp(1.9rem, 4.7vw, 4.5rem);
}
.actions-row { flex-wrap: wrap; justify-content: center; }
.actions-row > * { min-width: 0; max-width: 100%; }
.grid, .svc-grid, .sf-grid, .wf-fit-grid, .wx-grid, .workflow-grid,
.feature-grid, .card-grid, .bundle-addon-grid, .bundle-live-features {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.card, .panel, .wf-panel, .wx-card, .workflow-card, .feature-card,
.bundle-controls, .bundle-summary { overflow-wrap: anywhere; }

@media (min-width: 1600px) {
  .container { width: min(calc(100% - 8vw), 1400px); }
  .nav, .wf-page .nav { width: min(1400px, calc(100% - 64px)) !important; }
  .hero-content { max-width: 1400px; }
}
@media (max-width: 1100px) {
  .nav .container.nav-inner, .wf-page .nav .container.nav-inner {
    padding-inline: 18px !important;
    gap: 12px !important;
  }
  .nav .nav-links, .wf-page .nav .nav-links {
    gap: clamp(4px, .7vw, 9px) !important;
    font-size: clamp(10px, .9vw, 12px);
  }
  .nav .nav-links a, .wf-page .nav .nav-links a { padding-inline: 7px !important; }
  .nav .nav-actions, .wf-page .nav .nav-actions { gap: 7px; }
  .lang-toggle--nav { padding-inline: 9px; }
}
@media (max-width: 940px) {
  html.lang-ar .nav .container.nav-inner,
  html.lang-ar .wf-page .nav .container.nav-inner {
    display: flex !important;
    direction: ltr !important;
    justify-content: space-between !important;
  }
  html.lang-ar .nav .nav-actions,
  html.lang-ar .wf-page .nav .nav-actions { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 520px) {
  .container { width: calc(100% - 28px); }
  .nav, .wf-page .nav { width: calc(100% - 20px) !important; max-width: calc(100vw - 20px) !important; }
  .nav .container.nav-inner, .wf-page .nav .container.nav-inner { padding-inline: 10px !important; gap: 6px !important; }
  .nav .brand, .wf-page .nav .brand { gap: 6px; }
  .nav .brand-name { font-size: clamp(13px, 3.8vw, 16px); }
  .nav .brand-logo { width: clamp(24px, 7vw, 29px); height: clamp(24px, 7vw, 29px); }
  .nav .nav-actions, .wf-page .nav .nav-actions { gap: 5px !important; }
  .lang-toggle--nav { min-height: 35px; padding-inline: 7px; gap: 4px; font-size: 11px; }
  .lang-toggle--nav svg { width: 13px; height: 13px; flex-basis: 13px; }
  .nav .theme-toggle, .nav .menu-toggle { width: 35px; height: 35px; flex-basis: 35px; }
  .hero-content { padding-inline: 0; }
  .hero h1 { font-size: clamp(30px, 8.7vw, 44px); }
  html.lang-ar .hero h1 { font-size: clamp(29px, 8.1vw, 42px); line-height: 1.42; }
  .actions-row > .btn { flex: 1 1 100%; width: 100%; }
  .cta { padding: clamp(28px, 7vw, 48px) 18px; border-radius: 24px; }
}
@media (max-width: 360px) {
  .nav .brand-name { font-size: 12px; }
  .nav .brand-logo { width: 23px; height: 23px; }
  .nav .container.nav-inner, .wf-page .nav .container.nav-inner { padding-inline: 7px !important; }
  .lang-toggle--nav { padding-inline: 5px; }
  .lang-toggle--nav span { font-size: 10px; }
  .nav .theme-toggle, .nav .menu-toggle { width: 32px; height: 32px; flex-basis: 32px; }
  .hero h1 { font-size: 29px; }
  html.lang-ar .hero h1 { font-size: 28px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero-content { padding-block: 110px 48px; }
  .hero h1 { font-size: clamp(28px, 6vh, 52px); }
}

/* Responsive repair pass: stable navigation geometry, clipped viewport artifacts,
   and a language-independent package rail alignment. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body.story {
  isolation: isolate;
  background-color: var(--bg, #050506);
}

body.story #bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  pointer-events: none;
  overflow: clip;
}

/* The nav is a single predictable row at every breakpoint. */
.nav,
.wf-page .nav {
  left: 50% !important;
  right: auto !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box;
}

.nav .container.nav-inner,
.wf-page .nav .container.nav-inner {
  display: flex !important;
  flex-flow: row nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

.nav .brand,
.wf-page .nav .brand {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 48%;
}

.nav .brand-name,
.wf-page .nav .brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav .nav-actions,
.wf-page .nav .nav-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-flow: row nowrap !important;
  margin-inline: 0 !important;
}

@media (max-width: 980px) {
  .nav .nav-links,
  .wf-page .nav .nav-links,
  .nav .nav-actions > .btn,
  .wf-page .nav .nav-actions > .btn {
    display: none !important;
  }
  .nav .menu-toggle,
  .wf-page .nav .menu-toggle {
    display: grid !important;
    flex: 0 0 38px !important;
  }
  .nav .mobile-menu,
  .mobile-menu,
  .wf-page .mobile-menu {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 24px) !important;
    max-width: 520px !important;
    box-sizing: border-box;
    transform: translateX(-50%);
    overflow: hidden;
  }
}

@media (max-width: 520px) {
  .nav,
  .wf-page .nav {
    width: calc(100vw - 16px) !important;
    height: 62px !important;
    top: 8px !important;
    border-radius: 20px !important;
  }
  .nav .container.nav-inner,
  .wf-page .nav .container.nav-inner {
    padding-inline: 10px !important;
    gap: 7px !important;
  }
  .nav .brand,
  .wf-page .nav .brand {
    max-width: calc(100% - 126px);
    gap: 6px !important;
  }
  .nav .brand-name,
  .wf-page .nav .brand-name {
    font-size: clamp(12px, 3.8vw, 15px) !important;
    letter-spacing: 0 !important;
  }
  .nav .brand-logo,
  .wf-page .nav .brand-logo {
    width: 26px !important;
    height: 26px !important;
  }
  .nav .nav-actions,
  .wf-page .nav .nav-actions {
    gap: 5px !important;
  }
  .nav .theme-toggle,
  .nav .menu-toggle,
  .wf-page .nav .theme-toggle,
  .wf-page .nav .menu-toggle {
    width: 35px !important;
    height: 35px !important;
    flex-basis: 35px !important;
    border-radius: 12px !important;
  }
  .nav .lang-toggle--nav,
  .wf-page .nav .lang-toggle--nav {
    min-height: 34px !important;
    padding-inline: 7px !important;
    gap: 4px !important;
    font-size: 11px !important;
  }
  .mobile-menu,
  .wf-page .mobile-menu {
    top: 78px !important;
    width: calc(100vw - 20px) !important;
    max-width: 520px !important;
    padding: 12px !important;
  }
}

@media (max-width: 350px) {
  .nav .brand,
  .wf-page .nav .brand { max-width: calc(100% - 116px); }
  .nav .brand-name,
  .wf-page .nav .brand-name { font-size: 11px !important; }
  .nav .brand-logo,
  .wf-page .nav .brand-logo { width: 22px !important; height: 22px !important; }
  .nav .theme-toggle,
  .nav .menu-toggle,
  .wf-page .nav .theme-toggle,
  .wf-page .nav .menu-toggle { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .nav .lang-toggle--nav,
  .wf-page .nav .lang-toggle--nav { padding-inline: 5px !important; }
}

/* Keep the package rail anchored beside the same cards in both languages. */
#bundleBuilder .bundle-range-wrap {
  direction: ltr !important;
  align-items: stretch;
  --row: 60px;
  --gap: 10px;
}
#bundleBuilder .bundle-range-stops {
  direction: ltr !important;
  min-width: 0;
}
#bundleBuilder .bundle-stop {
  direction: inherit;
  min-width: 0;
  overflow: hidden;
}
html.lang-ar #bundleBuilder .bundle-stop {
  direction: rtl !important;
  text-align: right !important;
}
html.lang-ar #bundleBuilder .bundle-stop > span {
  min-width: 0;
  text-align: right;
}
html.lang-ar #bundleBuilder .bundle-stop-price {
  text-align: left;
  direction: rtl;
}
#bundleBuilder .bundle-rail {
  flex: 0 0 30px;
  min-width: 30px;
  touch-action: none;
}
#bundleBuilder .bundle-rail-dot,
#bundleBuilder .bundle-rail-thumb,
#bundleBuilder .bundle-rail-fill,
#bundleBuilder .bundle-rail::before {
  left: 50% !important;
  right: auto !important;
}
@media (max-width: 520px) {
  #bundleBuilder .bundle-range-wrap {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 10px !important;
    --row: 60px;
    --gap: 10px;
  }
  #bundleBuilder .bundle-stop {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    padding-inline: 10px;
    font-size: .72rem;
  }
  #bundleBuilder .bundle-stop strong { font-size: .88rem; }
  #bundleBuilder .bundle-stop-price { font-size: .7rem; }
}

@media (max-width: 360px) {
  #bundleBuilder .bundle-range-wrap { grid-template-columns: 26px minmax(0, 1fr) !important; gap: 8px !important; }
  #bundleBuilder .bundle-stop { padding-inline: 7px; column-gap: 5px; }
  #bundleBuilder .bundle-stop-price { white-space: normal; max-width: 86px; }
}


/* Final cross-device layout hardening: preserve content while preventing page-level overflow. */
*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; margin-inline: 0; overflow-x: clip; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
.container, .page, main, section, .story-main, .site-footer,
.nav-inner, .sf-grid, .hero-content, .section-inner, .grid,
[class*="-grid"], [class*="-content"] { min-width: 0; }
.container { width: min(1180px, calc(100% - clamp(24px, 5vw, 64px))); }
pre, code, table { max-width: 100%; }
pre { overflow-x: auto; }

/* Stable nav tracks regardless of document language; only link text follows RTL. */
.nav .container.nav-inner,
.wf-page .nav .container.nav-inner {
  direction: ltr !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: clamp(8px, 1.25vw, 20px) !important;
  padding-inline: clamp(10px, 2vw, 28px) !important;
}
.nav .brand { grid-column: 1 !important; justify-self: start !important; min-width: 0; }
.nav .nav-links { grid-column: 2 !important; justify-self: center !important; min-width: 0; }
.nav .nav-actions { grid-column: 3 !important; justify-self: end !important; direction: ltr !important; min-width: 0; }
html.lang-ar .nav .nav-links { direction: rtl !important; }
.nav .brand-name { overflow-wrap: normal; }
.nav .nav-actions > * { flex-shrink: 0; }
.mobile-menu { max-width: calc(100vw - 20px) !important; box-sizing: border-box; }

/* Avoid black gutters caused by animated/fixed background layers extending beyond viewport. */
#bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.story, .story-main, .site-footer { max-width: 100%; }
body.story { isolation: isolate; }

/* Keep the package selector rail in a fixed LTR coordinate system while labels localize. */
#bundleBuilder, #bundleBuilder * { min-width: 0; }
#bundleBuilder .bundle-range-wrap { width: 100%; max-width: 100%; }
#bundleBuilder .bundle-range-stops { width: 100%; }
#bundleBuilder .bundle-stop { overflow-wrap: anywhere; }
#bundleBuilder .bundle-rail { position: relative; align-self: stretch; }

@media (max-width: 1100px) {
  .nav .nav-links,
  .wf-page .nav .nav-links,
  .nav .nav-actions > .btn,
  .wf-page .nav .nav-actions > .btn { display: none !important; }
  .nav .container.nav-inner,
  .wf-page .nav .container.nav-inner {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  .nav .brand { margin-inline-end: auto; }
  .nav .nav-actions { margin-inline-start: auto; display: flex !important; }
  .nav .menu-toggle { display: grid !important; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 32px) !important; }
  .nav, .wf-page .nav { width: calc(100% - 20px) !important; max-width: calc(100vw - 20px) !important; }
  .nav .container.nav-inner { padding-inline: 10px !important; }
  .mobile-menu { width: calc(100vw - 20px) !important; left: 50% !important; right: auto !important; transform: translateX(-50%); }
  .story #epilogue .orbs { padding-inline: 8px; }
  .sf-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sf-links { flex-wrap: wrap; }
  .socials { flex-wrap: wrap; }
  #bundleBuilder .bundle-range-wrap { grid-template-columns: 28px minmax(0, 1fr) !important; }
}
@media (max-width: 420px) {
  .container { width: calc(100% - 24px) !important; }
  .nav, .wf-page .nav { top: 8px !important; height: 62px !important; border-radius: 20px !important; }
  .nav .brand { gap: 6px !important; font-size: 15px !important; }
  .nav .brand-logo { width: 25px !important; height: 25px !important; }
  .nav .theme-toggle, .nav .menu-toggle { width: 35px !important; height: 35px !important; flex-basis: 35px !important; }
  .nav .lang-toggle--nav { min-height: 34px !important; padding-inline: 6px !important; }
  .mobile-menu { top: 78px !important; padding: 12px !important; }
  .section, section { scroll-margin-top: 84px; }
  #bundleBuilder .bundle-range-wrap { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 7px !important; }
  #bundleBuilder .bundle-stop { grid-template-columns: minmax(0, 1fr) auto; padding-inline: 7px; column-gap: 5px; }
}
@media (max-width: 340px) {
  .nav .brand-name { font-size: 12px !important; }
  .nav .brand-logo { width: 22px !important; height: 22px !important; }
  .nav .nav-actions { gap: 4px !important; }
  .nav .theme-toggle, .nav .menu-toggle { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  .nav .lang-toggle--nav { font-size: 10px !important; padding-inline: 4px !important; }
}
@media (min-width: 1600px) {
  .container { width: min(1320px, calc(100% - 8vw)); }
}
@media (prefers-reduced-motion: reduce) {
  #bg-canvas { display: none !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ================================================================
   Final responsive stability pass (all page types / both languages)
   ================================================================ */
:root {
  --cf-gutter: clamp(12px, 3.2vw, 48px);
  --cf-content-max: 1240px;
}
html, body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
}
body { overflow-wrap: break-word; }
.container,
.page > .container,
.story-main > section > .container,
.site-footer > .container {
  width: min(var(--cf-content-max), calc(100% - (var(--cf-gutter) * 2))) !important;
  max-width: var(--cf-content-max);
  margin-inline: auto;
}
main, section, article, header, footer, nav, form, fieldset,
.grid, [class*="-grid"], [class*="-row"], [class*="-content"],
[class*="-inner"], .container > *, .nav-inner > * {
  min-width: 0;
}
img, video, canvas, iframe { max-width: 100%; }
svg { max-width: 100%; }
button, input, select, textarea { max-width: 100%; }
pre, code, table { max-width: 100%; }
pre, .table-wrap, .overflow-auto { overflow-x: auto; }

/* The canvas remains viewport-sized; its artwork must not scale down at a breakpoint. */
body.story #bg-canvas,
#bg-canvas {
  position: fixed !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  pointer-events: none;
  z-index: 0;
}
body.story { background-color: var(--bg, #050506); }
.story-main, .site-footer { position: relative; z-index: 1; }

/* Stable nav: content direction changes, icon/action geometry does not. */
.nav, .wf-page .nav {
  width: min(calc(100% - 16px), 1480px) !important;
  max-width: calc(100vw - 16px) !important;
  box-sizing: border-box;
}
.nav .container.nav-inner, .wf-page .nav .container.nav-inner {
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(6px, 1.5vw, 20px) !important;
  padding-inline: clamp(8px, 1.6vw, 22px) !important;
}
.nav .brand, .wf-page .nav .brand {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(38%, 250px);
  direction: ltr !important;
  flex-shrink: 1 !important;
}
.nav .brand-logo, .wf-page .nav .brand-logo { flex: 0 0 auto !important; }
.nav .brand-name, .wf-page .nav .brand-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav .nav-links, .wf-page .nav .nav-links {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 22px);
}
.nav .nav-actions, .wf-page .nav .nav-actions {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(5px, .8vw, 12px) !important;
  direction: ltr !important;
  margin: 0 !important;
}
.nav .nav-actions > *, .wf-page .nav .nav-actions > * { flex-shrink: 0; }
.mobile-menu, .wf-page .mobile-menu {
  box-sizing: border-box;
  max-width: calc(100vw - 16px) !important;
  overflow-wrap: anywhere;
}

/* Lock footer/social SVGs to LTR so Arabic bidi rules never mirror or reshape them. */
.socials, .story .socials, .site-footer .socials,
html.lang-ar .socials, html.lang-ar .story .socials,
html.lang-ar .site-footer .socials {
  direction: ltr !important;
  writing-mode: horizontal-tb !important;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
}
.soc, html.lang-ar .soc {
  direction: ltr !important;
  writing-mode: horizontal-tb !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  box-sizing: border-box;
  display: grid !important;
  place-items: center !important;
  transform-origin: center;
}
.soc svg, html.lang-ar .soc svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  max-width: none !important;
  flex: 0 0 20px !important;
  direction: ltr !important;
  transform: none;
  transform-origin: center;
  overflow: visible;
}
.story #epilogue .orb, html.lang-ar .story #epilogue .orb {
  direction: ltr !important;
  unicode-bidi: isolate;
}
.story #epilogue .orb-disc, html.lang-ar .story #epilogue .orb-disc {
  direction: ltr !important;
  unicode-bidi: isolate;
  flex-shrink: 0;
}
.story #epilogue .orb-disc svg, html.lang-ar .story #epilogue .orb-disc svg {
  direction: ltr !important;
  transform: none;
  flex-shrink: 0;
}

/* Avoid overflow from long headings, translated buttons, cards and decorative grids. */
h1, h2, h3, h4, p, li, label, a, button, .btn, .lede, .page-title,
.card, .form-card, .feature-card, .service-card, .sf-mail {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hero-content, .page-hero .container, .section-heading, .section-copy,
.actions-row, .cta, .sf-grid, .sf-bottom { max-width: 100%; }
.actions-row, .hero .actions-row, .cta .actions-row { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .nav .nav-links, .wf-page .nav .nav-links,
  .nav .nav-actions > .btn, .wf-page .nav .nav-actions > .btn { display: none !important; }
  .nav .menu-toggle, .wf-page .nav .menu-toggle { display: grid !important; }
  .nav .brand, .wf-page .nav .brand { max-width: calc(100% - 116px); }
  .nav .nav-actions, .wf-page .nav .nav-actions { margin-inline-start: auto !important; }
  .mobile-menu, .wf-page .mobile-menu {
    left: 50% !important; right: auto !important;
    width: calc(100vw - 16px) !important;
    transform: translateX(-50%);
  }
}
@media (max-width: 760px) {
  :root { --cf-gutter: 16px; }
  .container, .page > .container, .story-main > section > .container,
  .site-footer > .container { width: calc(100% - 32px) !important; }
  .sf-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .sf-bottom { flex-wrap: wrap; }
  .socials { flex-wrap: nowrap !important; }
  .story #epilogue .orbs { display: flex; flex-wrap: wrap; justify-content: center; }
  .story #epilogue .orb { flex: 0 1 112px; }
  .grid, .cards-grid, .services-grid, .features-grid,
  [class*="-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-content { padding-inline: 0; }
  .page-hero, .hero { padding-inline: 0; }
  .form-card { padding: clamp(16px, 4vw, 28px); }
}
@media (max-width: 520px) {
  :root { --cf-gutter: 12px; }
  .container, .page > .container, .story-main > section > .container,
  .site-footer > .container { width: calc(100% - 24px) !important; }
  .nav, .wf-page .nav { top: 8px !important; height: 60px !important; border-radius: 18px !important; }
  .nav .container.nav-inner, .wf-page .nav .container.nav-inner { padding-inline: 8px !important; gap: 5px !important; }
  .nav .brand, .wf-page .nav .brand { max-width: calc(100% - 108px); gap: 5px !important; }
  .nav .brand-name, .wf-page .nav .brand-name { font-size: clamp(11px, 3.6vw, 14px) !important; }
  .nav .brand-logo, .wf-page .nav .brand-logo { width: 24px !important; height: 24px !important; }
  .nav .nav-actions, .wf-page .nav .nav-actions { gap: 4px !important; }
  .nav .theme-toggle, .nav .menu-toggle,
  .wf-page .nav .theme-toggle, .wf-page .nav .menu-toggle {
    width: 34px !important; height: 34px !important; flex-basis: 34px !important;
  }
  .nav .lang-toggle--nav, .wf-page .nav .lang-toggle--nav {
    min-height: 32px !important; padding-inline: 5px !important; gap: 3px !important; font-size: 10px !important;
  }
  .mobile-menu, .wf-page .mobile-menu { top: 74px !important; padding: 10px !important; }
  .grid, .cards-grid, .services-grid, .features-grid,
  [class*="-grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  .hero h1, .page-title { font-size: clamp(28px, 8.3vw, 44px) !important; line-height: 1.2 !important; }
  .hero p, .lede { font-size: clamp(14px, 3.9vw, 17px); }
  .block, .section { padding-block: clamp(42px, 10vw, 76px); }
  .story #epilogue .orbs { gap: 22px 14px; }
  .story #epilogue .orb { flex-basis: 100px; }
  .story #epilogue .orb-disc { width: 78px; height: 78px; flex-basis: 78px; }
  .story #epilogue .orb-disc svg { width: 29px; height: 29px; flex-basis: 29px; }
  #bundleBuilder .bundle-range-wrap { grid-template-columns: 24px minmax(0, 1fr) !important; gap: 7px !important; }
  #bundleBuilder .bundle-stop { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 360px) {
  .nav .brand, .wf-page .nav .brand { max-width: calc(100% - 100px); }
  .nav .brand-name, .wf-page .nav .brand-name { font-size: 10px !important; }
  .nav .brand-logo, .wf-page .nav .brand-logo { width: 21px !important; height: 21px !important; }
  .nav .theme-toggle, .nav .menu-toggle,
  .wf-page .nav .theme-toggle, .wf-page .nav .menu-toggle { width: 30px !important; height: 30px !important; flex-basis: 30px !important; }
  .nav .lang-toggle--nav, .wf-page .nav .lang-toggle--nav { font-size: 9px !important; padding-inline: 4px !important; }
  .nav .nav-actions, .wf-page .nav .nav-actions { gap: 3px !important; }
  .story #epilogue .orbs { gap: 18px 8px; }
  .story #epilogue .orb { flex-basis: 90px; }
  .story #epilogue .orb-disc { width: 70px; height: 70px; flex-basis: 70px; }
}
@media (min-width: 1600px) {
  :root { --cf-content-max: 1400px; --cf-gutter: clamp(48px, 5vw, 100px); }
}
@media (prefers-reduced-motion: reduce) {
  .story #epilogue .orb-disc { animation: none !important; }
}

@media (max-width: 320px) {
  .nav, .wf-page .nav { width: calc(100vw - 10px) !important; max-width: calc(100vw - 10px) !important; }
  .nav .container.nav-inner, .wf-page .nav .container.nav-inner { padding-inline: 5px !important; gap: 3px !important; }
  .nav .brand, .wf-page .nav .brand { max-width: calc(100% - 94px); gap: 3px !important; }
  .nav .brand-name, .wf-page .nav .brand-name { font-size: 9px !important; }
  .nav .brand-logo, .wf-page .nav .brand-logo { width: 19px !important; height: 19px !important; }
  .nav .theme-toggle, .nav .menu-toggle, .wf-page .nav .theme-toggle, .wf-page .nav .menu-toggle { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
  .nav .lang-toggle--nav, .wf-page .nav .lang-toggle--nav { min-height: 28px !important; font-size: 8px !important; padding-inline: 3px !important; }
  .nav .nav-actions, .wf-page .nav .nav-actions { gap: 2px !important; }
}

/* Arabic glyphs are taller than Latin ones: give multi-line headings room so lines never touch. */
html.lang-ar h1 { line-height: 1.32 !important; }
html.lang-ar h2 { line-height: 1.36 !important; }