/* Every page is one sheet of a bilingual quotation: three inks (paper, black, stamp violet) and
   grey rules. If a new element needs a fourth colour, it does not belong on the document. */

@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("fonts/readex-pro-arabic-wght-normal.woff2") format("woff2-variations");
  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: "Readex Pro";
  font-style: normal;
  font-display: swap;
  font-weight: 160 700;
  src: url("fonts/readex-pro-latin-wght-normal.woff2") format("woff2-variations");
  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 {
  --paper: #fbfbf9;
  --ink: #15171c;
  --ink-2: #4a4f59;
  --rule: #c8ccd3;
  --field: #8a8f99;
  --violet: #4b2fbf;
  --violet-wash: rgba(75, 47, 191, 0.07);
  --label-col: 24%;
  --pad: clamp(16px, 2.6vw, 36px);
  --sans: "Readex Pro", "Segoe UI", Tahoma, system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  scrollbar-color: var(--ink-2) var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  caret-color: var(--violet);
}
html[lang="ar"] body { line-height: 1.75; }

/* Long prose is written in both languages in the page; only the active one is shown. */
html[lang="ar"] [data-lang="en"], html:not([lang="ar"]) [data-lang="ar"] { display: none; }

::selection { background: var(--violet); color: var(--paper); }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--violet); }

:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The sheet. Side rules mark its edges on wide screens, like the margins of a printed form. */
.document {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  min-height: 100vh;
  margin-inline: auto;
  border-inline: 1px solid var(--rule);
  animation: sheet-in 320ms var(--ease-out) both;
}
.document main { flex: 1; }

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Letterhead */
.letterhead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 32px;
  padding: 18px var(--pad);
  border-block-end: 2px solid var(--ink);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.15rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}
.brand img { display: block; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-inline-end: auto; }
.site-nav a {
  padding-block: 4px;
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
  border-block-end: 2px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.site-nav a:hover { color: var(--ink); border-block-end-color: var(--rule); }
.site-nav a[aria-current="page"] { color: var(--ink); border-block-end-color: var(--ink); }

.lang { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 2px; }
.lang-button {
  padding: 5px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 0.9rem/1.4 var(--sans);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lang-button + .lang-button { border-inline-start: 1.5px solid var(--ink); }
.lang-button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lang-button:not([aria-pressed="true"]):hover { background: var(--violet-wash); }
.lang-button:focus-visible { outline-offset: -4px; outline-color: var(--paper); box-shadow: inset 0 0 0 2px var(--violet); }

/* Title row: the document's bilingual heading, current language first. */
.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 30px var(--pad) 26px;
  border-block-end: 1px solid var(--rule);
}
.doc-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.doc-title-other { font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }

.lead { max-width: 64ch; margin: 0; padding: 26px var(--pad) 28px; font-size: 1.15rem; color: var(--ink); }
.note { max-width: 70ch; margin: 0; padding: 18px var(--pad); color: var(--ink-2); font-size: 0.95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 28px var(--pad) 44px; }

/* Ledger: a ruled list of label and value, the document's basic row. */
.ledger { margin: 0; border-block-start: 1px solid var(--rule); }
.ledger > div {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  border-block-end: 1px solid var(--rule);
}
.ledger dt, .ledger dd { padding: 16px var(--pad); }
.ledger dt { font-size: 0.95rem; font-weight: 500; color: var(--ink-2); }
.ledger dd { margin: 0; border-inline-start: 1px solid var(--rule); }
.ledger dd a:not(:only-child) { margin-inline-start: 8px; }
.ledger dd a { color: var(--ink-2); white-space: nowrap; }
.ledger dd a:hover { color: var(--violet); }

/* Tables: the pricing quotation and the products specification share one rule system. */
.quote, .ledger-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-variant-numeric: tabular-nums lining-nums;
}
.quote th, .quote td, .ledger-table th, .ledger-table td {
  padding: 18px var(--pad);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--rule);
}
.quote td + td, .quote th + td, .quote td + th, .quote th + th,
.ledger-table th + td, .ledger-table th + th { border-inline-start: 1px solid var(--rule); }

.quote .label-col, .ledger-table thead th:first-child { width: var(--label-col); }
.ledger-table thead th:first-child { width: 34%; }

.quote tbody th { font-weight: 500; font-size: 0.95rem; color: var(--ink-2); }
.ledger-table th small { display: block; font-weight: 400; font-size: 0.85rem; color: var(--ink-2); }

.quote thead th, .ledger-table thead th {
  padding-block: 22px 14px;
  font-size: 1.375rem;
  font-weight: 700;
  border-block-end: 2px solid var(--ink);
}
.ledger-table thead th { font-size: 0.95rem; font-weight: 600; color: var(--ink-2); }
.ledger-table tbody th { font-weight: 600; }

.row-price th, .row-price td { padding-block: 26px 28px; }
.row-price td .button { margin-block-start: 16px; }

.amount {
  margin: 0;
  font-size: clamp(2.6rem, 4.4vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}
html[lang="ar"] .amount { letter-spacing: 0; }
/* The riyal sign stands on the baseline at the height of the figures, as the central bank's guidelines ask. */
.money { white-space: nowrap; }
.riyal { width: 0.645em; height: 0.72em; fill: currentColor; vertical-align: baseline; }
/* A paid amount carries the riyal sign and "/year" on one line, so it runs a size smaller than "Free". */
.amount.paid { font-size: clamp(2.2rem, 3.2vw, 3.25rem); }
.price-line { white-space: nowrap; }
.amount .per { margin-inline-start: 0.3em; font-size: 0.36em; font-weight: 600; letter-spacing: 0; color: var(--ink-2); unicode-bidi: isolate; }
.amount .usd { display: block; margin-block-start: 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.name-other { display: block; margin-block-start: 2px; font-size: 0.9rem; font-weight: 400; color: var(--ink-2); }
.discount { margin: 14px 0 0; font-size: 0.92rem; font-weight: 500; color: var(--violet); }

.updates-value { font-weight: 600; }
.fixes-value { font-weight: 600; }

/* Buttons: rectangular ink, never pills, never taller than wide. */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font: 600 0.95rem/1.3 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.button:hover { color: var(--violet); border-color: var(--violet); }
.button.primary { background: var(--ink); color: var(--paper); }
.button.primary:hover { background: var(--violet); border-color: var(--violet); color: var(--paper); }
.button:disabled { opacity: 0.55; cursor: progress; }

/* Phones: the pricing quotation becomes one plan after another. */
.plans { display: none; }
.plan { padding: 22px var(--pad) 26px; border-block-end: 1px solid var(--rule); }
.plan-name { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; }
.amount-label { margin: 0 0 10px; font-size: 0.88rem; font-weight: 500; color: var(--ink-2); }
.plan .amount + .button { margin-block-start: 16px; }
.plan dl { margin: 20px 0 0; display: grid; gap: 12px; }
.plan dt { font-size: 0.88rem; font-weight: 500; color: var(--ink-2); }
.plan dd { margin: 2px 0 0; }

.load-error { margin: 0; padding: 24px var(--pad); color: var(--violet); font-weight: 600; }
.load-error[hidden] { display: none; }

/* Prose pages (About, Terms, Privacy): numbered clauses on ruled lines. */
.prose > p { max-width: 70ch; margin: 0; padding: 22px var(--pad) 0; }
.prose > p:first-child { padding-block-start: 28px; font-size: 1.1rem; }
.prose > .ledger { margin-block-start: 28px; }
.prose > .note { padding-block: 18px 36px; }
.clauses section {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  border-block-end: 1px solid var(--rule);
}
.clauses h2 { margin: 0; padding: 20px var(--pad); font-size: 1rem; font-weight: 600; line-height: 1.4; }
.clauses section p { max-width: 70ch; margin: 0; padding: 20px var(--pad); border-inline-start: 1px solid var(--rule); }
.clauses section:last-child { border-block-end: 0; }

/* A gap the owner still has to fill: stamp ink, outlined, impossible to miss. */
mark.confirm {
  display: inline;
  padding: 1px 6px;
  border: 1px dashed var(--violet);
  border-radius: 2px;
  background: var(--violet-wash);
  color: var(--violet);
  font-weight: 500;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* The rubber stamp: marks a draft page, pressed once on load. A clean ink mark; a faked grain
   read as neither ink nor print. */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 6px 18px 5px;
  border: 4px double var(--violet);
  border-radius: 4px;
  color: var(--violet);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.25;
  white-space: nowrap;
  transform: rotate(-6deg);
  animation: stamp-press 420ms var(--ease-out) 260ms both;
}
html[dir="rtl"] .stamp { transform: rotate(6deg); animation-name: stamp-press-rtl; }
.stamp span:lang(en) { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.85rem; }
.stamp span + span:not(.visually-hidden) { padding-block-start: 2px; border-block-start: 1.5px solid currentColor; }

@keyframes stamp-press {
  from { opacity: 0; transform: rotate(-6deg) scale(1.22); }
  55% { opacity: 1; }
  to { opacity: 1; transform: rotate(-6deg) scale(1); }
}
@keyframes stamp-press-rtl {
  from { opacity: 0; transform: rotate(6deg) scale(1.22); }
  55% { opacity: 1; }
  to { opacity: 1; transform: rotate(6deg) scale(1); }
}

/* Contact: the request block. */
.request { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); }
.request-head { padding: 28px var(--pad); }
.request-head p { margin: 0; color: var(--ink-2); font-size: 0.95rem; }

.request-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  max-width: 820px;
  padding: 28px var(--pad) 44px;
  border-inline-start: 1px solid var(--rule);
}

.field { display: grid; gap: 6px; align-content: start; }
.field:has(textarea), .field-submit, #field-plan { grid-column: 1 / -1; }
#field-plan { max-width: calc(50% - 12px); }

.field label { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); transition: color 200ms var(--ease-out); }

input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--field);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font: 400 1rem/1.45 var(--sans);
  transition: border-color 160ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px var(--violet); }
[aria-invalid="true"] { border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); }
textarea { resize: vertical; min-height: 10rem; }

select {
  appearance: none;
  padding-inline-end: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315171c' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
html[dir="rtl"] select { background-position: left 14px center; }

/* Arriving from a plan's Contact us: the topic line takes the stamp ink for a moment. */
#field-plan.stamped label { color: var(--violet); }
#field-plan.stamped select { animation: plan-ink 1100ms var(--ease-out); }
@keyframes plan-ink {
  from { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-wash), inset 0 0 0 1px var(--violet); }
}

.trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* The bot check (Cloudflare Turnstile) draws a 65px frame. The space is held from the start so the
   Send button does not jump when it arrives, and the frame eases in once drawn. */
.field-check { grid-column: 1 / -1; max-width: calc(50% - 12px); }
.field-check .field-label { font-size: 0.9rem; font-weight: 500; color: var(--ink-2); }
.check-box { min-height: 65px; }
.check-box.drawn { animation: status-in 260ms var(--ease-out); }

.field-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-status { margin: 0; min-height: 1.5em; font-size: 0.95rem; font-weight: 500; }
.form-status.shown { animation: status-in 260ms var(--ease-out); }
.form-status.error { color: var(--violet); }
@keyframes status-in { from { opacity: 0; transform: translateY(4px); } }

/* Foot of the sheet: closes the document with a double rule. */
.document-foot {
  padding: 18px var(--pad) 22px;
  border-block-start: 4px double var(--ink);
  font-size: 0.9rem;
}
.document-foot nav { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.document-foot a { color: var(--ink-2); }
.document-foot a[aria-current="page"] { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .document { border-inline: 0; }
  .quote { display: none; }
  .plans { display: block; }
  .site-nav { order: 3; width: 100%; margin-inline-end: 0; }
  .lang { margin-inline-start: auto; }
  .ledger > div, .clauses section, .request { grid-template-columns: 1fr; }
  .ledger dd, .clauses section p { border-inline-start: 0; padding-block-start: 0; }
  .ledger dt, .clauses h2 { padding-block-end: 6px; }
  .ledger-table thead th:first-child { width: 42%; }
  .request-head { padding-block-end: 0; }
  .request-form { grid-template-columns: 1fr; border-inline-start: 0; }
  #field-plan, .field-check { max-width: none; }
}

@media (max-width: 420px) {
  .brand { gap: 8px; font-size: 1rem; }
  .brand img { width: 26px; height: 26px; }
  .lang-button { padding: 5px 10px; }
  .site-nav { gap: 4px 20px; }
  .ledger-table, .ledger-table thead, .ledger-table tbody, .ledger-table tr, .ledger-table th, .ledger-table td { display: block; width: auto; }
  .ledger-table thead { display: none; }
  .ledger-table tr { border-block-end: 1px solid var(--rule); }
  .ledger-table th, .ledger-table td { border: 0; }
  .ledger-table tbody th { padding-block-end: 4px; }
  .ledger-table td { padding-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .document, .stamp, .form-status.shown, #field-plan.stamped select, .check-box.drawn { animation: none; }
  * { transition-duration: 0s !important; }
}