/* Cairo, self-hosted so no visitor request ever leaves this origin — the page
   promises no third-party scripts, and a Google Fonts link would break that.
   Variable weight 400-900 covers every weight the design uses. The subsets are
   only fetched on the Arabic page, since nothing else asks for the family. */
@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/cairo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* One knob for vertical rhythm between sections. Each section owns the space
     *above* it, so gaps never stack. */
  --section-gap: 80px;
  color-scheme: light;
  --ink: #111318;
  --muted: #667085;
  --soft: #f5f7fb;
  --paper: #ffffff;
  --line: #e4e8ef;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --green: #18a058;
  --orange: #f97316;
  --shadow: 0 24px 80px rgba(17, 24, 39, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8fb 42%, #ffffff 100%);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

/* Arabic only. Cairo's ascenders and diacritics need more room than the Latin
   display line-heights allow, so the tight heading leading is relaxed too. */
html[lang="ar"] body {
  font-family:
    Cairo, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

html[lang="ar"] h1 {
  line-height: 1.16;
}

html[lang="ar"] h2 {
  line-height: 1.22;
}

html[lang="ar"] .selected-copy {
  line-height: 1.35;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px clamp(18px, 5vw, 64px);
  border-bottom: 1px solid rgba(228, 232, 239, 0.82);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px);
}

.brand,
nav,
.hero-actions,
.install-line,
.frame-top,
.menu-title,
.preview-head,
.preview-actions,
.security,
footer,
footer div {
  display: flex;
  align-items: center;
}

.brand {
  gap: 11px;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -0.015em;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.final-cta img,
footer .brand img {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.16);
}

nav {
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  background: var(--paper);
  box-shadow: 0 8px 24px rgba(17, 24, 39, 0.04);
}

nav a {
  border-radius: 999px;
  padding: 8px 12px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 650;
}

nav a:hover {
  background: var(--soft);
  color: var(--ink);
}

.header-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.nav-cta {
  border: 1px solid var(--ink);
  border-radius: 8px;
  padding: 9px 14px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 760;
  white-space: nowrap;
}

/* Language switcher */
.lang-switch {
  position: relative;
}

.lang-switch summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 11px;
  background: var(--paper);
  color: #4b5563;
  cursor: pointer;
  font-size: 14px;
  font-weight: 680;
  list-style: none;
  white-space: nowrap;
}

.lang-switch summary::-webkit-details-marker {
  display: none;
}

.lang-switch summary:hover {
  background: var(--soft);
  color: var(--ink);
}

.lang-switch summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.lang-switch summary svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.lang-switch summary span {
  max-width: 128px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 30;
  width: min(92vw, 460px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: var(--paper);
  box-shadow: 0 24px 60px rgba(17, 24, 39, 0.16);
}

.lang-list {
  display: grid;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}

.lang-list button {
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: transparent;
  color: #4b5563;
  cursor: pointer;
  font-size: 14px;
  font-weight: 620;
  text-align: start;
}

.lang-list button:hover {
  background: var(--soft);
  color: var(--ink);
}

.lang-list button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.lang-list button.active {
  background: var(--blue-soft);
  color: #1d4ed8;
  font-weight: 780;
}

.hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 86px 22px 34px;
  text-align: center;
}

.badge,
.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #cddcff;
  border-radius: 999px;
  padding: 0 13px;
  background: var(--blue-soft);
  color: #1d4ed8;
  text-transform: none;
  letter-spacing: 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 980px;
  margin: 22px auto 18px;
  font-size: clamp(44px, 7vw, 82px);
  line-height: 0.98;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.04;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 9px;
  font-size: 19px;
  line-height: 1.2;
}

.hero-text {
  max-width: 690px;
  margin: 0 auto 28px;
  color: #475467;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
}

.hero-actions {
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 18px;
  font-weight: 780;
}

.button.primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.18);
}

.button.secondary {
  border: 1px solid var(--line);
  background: var(--paper);
  color: #344054;
}

.install-line {
  justify-content: center;
  gap: 10px;
  margin: 17px auto 34px;
  color: var(--muted);
  font-size: 14px;
}

code,
kbd {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

code {
  padding: 9px 12px;
  font-size: 13px;
}

kbd {
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.menu-card button kbd {
  flex: 0 0 auto;
}

.hero-product {
  position: relative;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(24, 160, 88, 0.08)),
    #fff;
  box-shadow: var(--shadow);
}

.app-frame {
  overflow: hidden;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 8px;
  background: #f3f5f9;
  text-align: start;
}

.frame-top {
  justify-content: space-between;
  height: 42px;
  border-bottom: 1px solid var(--line);
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.traffic {
  display: flex;
  gap: 7px;
}

.traffic i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}

.traffic i:nth-child(2) {
  background: #ffbd2e;
}

.traffic i:nth-child(3) {
  background: #28c840;
}

.workspace {
  display: grid;
  grid-template-columns: 220px minmax(260px, 1fr) 360px;
  gap: 16px;
  padding: 18px;
}

.menu-card,
.document-card,
.preview-card,
.steps article,
.feature-grid article,
.final-cta {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.05);
}

.menu-card,
.document-card,
.preview-card {
  min-height: 310px;
  padding: 14px;
}

.menu-title {
  gap: 9px;
  margin-bottom: 14px;
}

.menu-title img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.menu-card button,
.preview-actions button {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #475467;
  cursor: default;
  font-size: 13px;
  font-weight: 720;
}

.menu-card button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  cursor: pointer;
  gap: 10px;
  text-align: start;
  transition: background 0.15s ease, color 0.15s ease;
}

.menu-card button:hover {
  background: #f2f4f7;
  color: #1f2937;
}

.menu-card button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.menu-card button.active,
.menu-card button.active:hover {
  background: var(--blue-soft);
  color: #1d4ed8;
}

.label {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.selected-copy {
  border-inline-start: 4px solid var(--blue);
  margin: 0;
  padding-inline-start: 16px;
  color: #202938;
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1.14;
}

.preview-card {
  display: flex;
  flex-direction: column;
}

.preview-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.preview-head .label {
  margin-bottom: 3px;
}

.preview-head span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #ecfdf3;
  color: #087443;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.preview-card.is-working .preview-head span {
  background: #fff6e5;
  color: #96631a;
}

.preview-card .diff article.rewrite {
  transition: opacity 0.18s ease;
}

.preview-card.is-working .diff article.rewrite {
  opacity: 0.35;
}

.diff {
  display: grid;
  gap: 10px;
}

.diff article {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfe;
}

.diff article.rewrite {
  border-color: #b7ebc8;
  background: #f3fff7;
}

.diff span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.diff p {
  margin: 0;
  color: #344054;
  line-height: 1.46;
}

.preview-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.preview-actions button {
  width: auto;
  border: 1px solid var(--line);
  padding: 0 13px;
  background: #fff;
}

.preview-actions button.apply {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.logo-strip {
  position: relative;
  max-width: 1120px;
  overflow: hidden;
  margin: 30px auto 0;
  padding: 18px 0;
  /* The marquee is a fixed left-to-right animation, and its track is wider
     than this box. On an RTL page an RTL container would anchor that overflow
     to the left and push the track out of view, so pin the whole strip to LTR. */
  direction: ltr;
}

.logo-strip::before,
.logo-strip::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 96px;
  content: "";
  pointer-events: none;
}

.logo-strip::before {
  left: 0;
  background: linear-gradient(90deg, #f6f8fb, rgba(246, 248, 251, 0));
}

.logo-strip::after {
  right: 0;
  background: linear-gradient(270deg, #f6f8fb, rgba(246, 248, 251, 0));
}

.logo-track {
  display: flex;
  width: max-content;
  /* The marquee always scrolls the same way, including on RTL pages. */
  direction: ltr;
  animation: logo-marquee 32s linear infinite;
}

.logo-strip:hover .logo-track {
  animation-play-state: paused;
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 7px;
}

.logo-pill {
  display: inline-flex;
  min-width: 168px;
  min-height: 62px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(228, 232, 239, 0.86);
  border-radius: 8px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.04);
  color: #475467;
  font-size: 15px;
  font-weight: 780;
  white-space: nowrap;
}

.logo-pill img {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  object-fit: contain;
}

@keyframes logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--section-gap) 22px 0;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 26px;
}

.section-heading .eyebrow {
  margin-bottom: 12px;
}

.section-heading p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.steps,
.feature-grid {
  display: grid;
  gap: 14px;
}

.steps {
  grid-template-columns: repeat(3, 1fr);
}

.steps article,
.feature-grid article {
  padding: 22px;
}

.steps span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 26px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 850;
}

.steps p,
.feature-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.feature-grid {
  grid-template-columns: repeat(3, 1fr);
}

.icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-bottom: 22px;
  background: #f0fdf4;
  color: var(--green);
  font-weight: 900;
}

.feature-grid article:nth-child(2n) .icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.feature-grid article:nth-child(3n) .icon {
  background: #fff7ed;
  color: var(--orange);
}

/* Standalone pages (/buy) reuse the hero shell at a calmer scale. */
.simple-page {
  max-width: 720px;
  padding-top: 72px;
}

.simple-page h1 {
  font-size: clamp(32px, 4.4vw, 54px);
  line-height: 1.06;
}

.site-header.compact {
  grid-template-columns: 1fr auto;
}

.simple-mark {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin: 0 auto 26px;
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.18);
}

.simple-note {
  margin-top: 26px;
}

/* Pricing — a full-bleed band so the one commercial section reads as its own
   surface, with the content still aligned to the same 1120px column. */
.pricing {
  /* The band's own padding is the gap — no margin, or it doubles up. */
  padding: var(--section-gap) 0;
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(37, 99, 235, 0.05), rgba(24, 160, 88, 0.04)),
    var(--paper);
}

.pricing-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}

/* The band already supplied most of the trailing space; top up to one gap
   rather than adding a second full one. */
.pricing + .section {
  padding-top: 24px;
}

.price-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px 56px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 34px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.price-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
}

.price-amount {
  font-size: clamp(44px, 6vw, 62px);
  font-weight: 850;
  letter-spacing: -0.02em;
  line-height: 1;
}

.price-note {
  color: var(--muted);
  font-size: 15px;
  font-weight: 650;
}

.price-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.price-list li {
  position: relative;
  padding-inline-start: 30px;
  margin-bottom: 13px;
  color: #475467;
  line-height: 1.5;
}

.price-list li:last-child {
  margin-bottom: 0;
}

/* Checkmark drawn in CSS so the list needs no icon font or SVG per row. */
.price-list li::before {
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ecfdf3;
  color: #087443;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
}

.price-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.price-fineprint {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .price-panel {
    grid-template-columns: 1fr;
  }
}

.security {
  justify-content: space-between;
  gap: 32px;
}

.security div {
  max-width: 560px;
}

.security .eyebrow {
  margin-bottom: 12px;
}

.security ul {
  width: min(100%, 420px);
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--paper);
  list-style: none;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.05);
}

.security li {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  color: #475467;
  font-weight: 650;
}

.security li:last-child {
  border-bottom: 0;
}

/* This one is a padded card, so its own padding counts toward the gap. */
.final-cta {
  max-width: 1120px;
  margin: calc(var(--section-gap) - 32px) auto 0;
  padding: 48px 22px;
  text-align: center;
}

.final-cta img {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  margin-bottom: 18px;
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.18);
}

.final-cta p {
  max-width: 560px;
  margin: 14px auto 24px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

footer {
  justify-content: space-between;
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 22px 44px;
  color: var(--muted);
  font-size: 14px;
}

footer div {
  gap: 18px;
}

@media (max-width: 1040px) {
  .workspace {
    grid-template-columns: 210px 1fr;
  }

  .preview-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  nav {
    display: none;
  }

  .lang-list {
    grid-template-columns: 1fr;
  }

  .workspace,
  .steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .menu-card,
  .document-card,
  .preview-card {
    min-height: auto;
  }

  .logo-strip::before,
  .logo-strip::after {
    width: 48px;
  }

  .security {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  :root {
    --section-gap: 56px;
  }

  .site-header,
  .hero,
  .section,
  .final-cta,
  footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  h1 {
    font-size: 42px;
  }

  .lang-switch summary span {
    display: none;
  }

  .lang-switch summary {
    padding: 0 9px;
  }

  /* Anchored to the button, the panel would hang off the left edge here, so
     pin it to the viewport instead. */
  .lang-menu {
    position: fixed;
    top: 68px;
    inset-inline: 12px;
    width: auto;
  }

  .hero-product {
    padding: 10px;
  }

  .install-line,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }

  code {
    width: 100%;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .logo-track {
    animation: none;
    transform: none;
  }

  .logo-strip {
    overflow-x: auto;
  }
}