/* VARA Cloud landing. One idea: the receipt. Ink ground, a violet field behind one ivory receipt, ivory paper for prices. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/bricolage-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/plex-arabic-400.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(fonts/plex-arabic-600.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E; }

/* Colour, type scale and density come from tokens.css (generated from design/tokens.mjs). Here they only get the landing's own names. */
:root {
  --ink: var(--c-bg);
  --ink-2: var(--c-bg-nav);
  --ink-3: var(--c-bg-card);
  --line: var(--c-line);
  --ivory: var(--c-text);
  --paper: var(--c-paper);
  --text: var(--c-text);
  --muted: var(--c-text-2);
  --violet: var(--c-accent);
  --violet-deep: #5B3FD6;
  --violet-field: #6A44E8;
  --deep: #1B1240;
  --ok: var(--c-ok);
  --no: var(--c-bad);
  --r: var(--r-md);
  --m: clamp(20px, 4.4vw, 56px);
  --w: 1180px;
  --out: var(--ease-out);
  --font: var(--font-ui);
  --code: var(--font-code);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: var(--c-scroll) var(--ink); }
body { margin: 0; background: var(--ink); color: var(--text); font-family: var(--font); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; caret-color: var(--violet); accent-color: var(--violet); font-variant-numeric: tabular-nums; }
:lang(ar) body, :lang(ar) * { letter-spacing: 0 !important; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 4px; }
.pricing :focus-visible, .ledger :focus-visible { outline-color: var(--c-paper-ink); }
.plan.rec :focus-visible, .hero-r :focus-visible, .join :focus-visible { outline-color: #fff; }
.tick a, .open a { color: inherit; }
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--c-scroll); border-radius: 8px; border: 3px solid var(--ink); }
.sec { padding-block: clamp(72px, 9vw, 140px); padding-inline: max(var(--m), calc((100% - var(--w)) / 2)); }
h2 { font-size: clamp(2rem, 1.2rem + 3.2vw, 3.75rem); line-height: 1.04; letter-spacing: -0.03em; font-weight: 640; text-wrap: balance; max-width: 18ch; }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 640; letter-spacing: -0.01em; }
:lang(ar) h1, :lang(ar) h2 { line-height: 1.28; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: min(100svh, 940px); }
.hero-l { padding: 22px var(--m) clamp(40px, 6vw, 80px); display: flex; flex-direction: column; background: var(--ink); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ivory); text-decoration: none; min-height: 44px; }
.brand .word { display: block; }
.brand .cloud { font-size: .9375rem; color: var(--muted); font-weight: 500; }
.links { display: flex; align-items: center; gap: 4px; }
.links a, .lang { color: var(--text); text-decoration: none; font-size: .9375rem; padding: 10px 12px; border-radius: 8px; background: none; border: 0; transition: background .2s; min-height: 44px; display: inline-flex; align-items: center; }
.links a:hover, .lang:hover, .theme:hover { background: var(--c-fill-2); }
.links a.signin { border: 1.5px solid var(--c-line-strong); }
.hero-copy { margin-block: auto; padding-block: 56px 0; display: grid; gap: 28px; justify-items: start; max-width: 40rem; }
h1 { font-size: clamp(2.9rem, 1.2rem + 5.6vw, 5.6rem); line-height: .98; letter-spacing: -0.04em; font-weight: 660; text-wrap: balance; color: var(--ivory); }
.lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--text); max-width: 34rem; opacity: .92; }
.join-f { width: min(100%, 31rem); display: grid; gap: 12px; }
.join-row { display: flex; gap: 8px; flex-wrap: wrap; }
.join-row input { flex: 1 1 14rem; min-width: 0; height: 54px; padding: 0 16px; border-radius: var(--r); border: 1.5px solid var(--c-line-strong); background: var(--ink-2); color: var(--ivory); }
.join-row input::placeholder { color: var(--c-text-3); }
.join-row input:focus-visible { outline: none; border-color: var(--ivory); box-shadow: 0 0 0 4px rgb(122 90 248 / .35); }
.join-row button { height: 54px; padding: 0 24px; border-radius: var(--r); border: 0; background: var(--violet); color: #fff; font-weight: 620; transition: background .2s, transform .15s var(--out); }
.join-row button:hover { background: var(--violet-deep); }
.join-row button:active { transform: scale(.97); }
.join-row button:disabled { opacity: .6; cursor: progress; }
.join-n { font-size: .9375rem; color: var(--muted); }
.join-n.ok { color: var(--ok); } .join-n.bad { color: var(--no); }

.hero-r { background: var(--violet-field); display: grid; place-items: center; padding: 96px var(--m) 56px; position: relative; }
.console { width: min(100%, 27.5rem); display: grid; gap: 18px; }
.jobs { display: flex; gap: 8px; flex-wrap: wrap; }
.jobs button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid rgb(255 255 255 / .7); background: transparent; color: #fff; font-size: .9375rem; font-weight: 540; transition: background .2s, color .2s, border-color .2s; }
.jobs button:hover { background: rgb(255 255 255 / .14); }
.jobs button[aria-selected="true"] { background: #fff; color: var(--deep); border-color: #fff; }
.receipt { position: relative; background: var(--paper); color: var(--c-paper-ink); padding: 24px 24px 40px; border-radius: 6px 6px 0 0; box-shadow: 0 2px 4px rgb(11 9 22 / .18), 0 22px 40px -12px rgb(11 9 22 / .45); -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 20px 100%; }
.r-head { display: flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 600; color: var(--c-paper-muted); padding-bottom: 14px; border-bottom: 1.5px dashed var(--c-paper-line); }
.r-mark { width: 18px; height: 18px; border-radius: 5px; background: var(--violet); position: relative; flex: none; }
.r-mark::after { content: ""; position: absolute; inset: 4px 3px 4px; background: #F4F1FF; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.r-task { font-size: 1.3125rem; line-height: 1.22; font-weight: 640; letter-spacing: -0.02em; margin-top: 16px; text-wrap: balance; }
.r-done { margin-top: 8px; font-size: .9375rem; color: var(--c-paper-muted); }
.r-done span { font-weight: 640; color: var(--c-paper-ink); margin-inline-end: 6px; }
.r-rows { margin-top: 16px; display: grid; }
.r-rows > div { display: grid; grid-template-columns: 7.2rem 1fr; gap: 12px; padding-block: 9px; border-top: 1px dashed var(--c-paper-line); font-size: .9375rem; line-height: 1.4; }
.r-rows dt { color: var(--c-paper-muted); }
.r-rows dd { font-weight: 560; text-align: start; }
.r-rows .r-cost { border-top: 1.5px solid var(--c-paper-ink); margin-top: 4px; padding-top: 12px; font-size: 1.0625rem; }
.r-rows .r-cost dd { font-weight: 700; }
.ex-note { font-size: .875rem; color: #fff; max-width: 30ch; }
/* the receipt prints: each line arrives in order, then holds still */
.receipt.print .r-head, .receipt.print .r-task, .receipt.print .r-done, .receipt.print .r-rows > div { animation: print .6s var(--out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes print { from { opacity: 0; transform: translateY(-6px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }

/* ---------- what it reaches ---------- */
.reach { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);  }
.reach-h { display: grid; gap: 22px; align-content: start; }
.reach-h p { color: var(--muted); max-width: 30rem; }
.reach-l > div { display: grid; grid-template-columns: 11rem 1fr; gap: 18px; padding-block: 18px; border-top: 1px solid var(--line); }
.reach-l > div:last-child { border-bottom: 1px solid var(--line); }
.reach-l dt { font-weight: 640; color: var(--ivory); }
.reach-l dd { color: var(--muted); }

/* ---------- limits ---------- */
.limits { background: var(--ink-2); }
.limits h2 { max-width: none; }
.lim-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(36px, 5vw, 64px); }
.lim-cols h3 { color: var(--ivory); margin-bottom: 12px; }
.lim-cols p { color: var(--muted); max-width: 26rem; }
.ledger { margin-top: clamp(40px, 6vw, 72px); background: var(--paper); color: var(--c-paper-ink); border-radius: 6px; padding: 8px clamp(16px, 3vw, 32px); box-shadow: 0 22px 40px -16px rgb(0 0 0 / .5); }
.led-h, .led-r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; padding-block: 14px; align-items: baseline; }
.led-h { font-size: .875rem; color: var(--c-paper-muted); font-weight: 600; border-bottom: 1.5px solid var(--c-paper-ink); }
.led-r + .led-r { border-top: 1px dashed var(--c-paper-line); }
.led-r code { font-family: var(--code); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.led-r .no { color: var(--c-bad); font-weight: 640; } .led-r .yes { color: var(--c-ok); font-weight: 640; }
.led-r span:last-child { color: var(--c-paper-muted); }

/* ---------- proof ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px);  align-items: start; }
.proof-l { display: grid; gap: 16px; }
.proof-l h3 { margin-top: 22px; color: var(--ivory); }
.tick li, .open li { position: relative; padding-inline-start: 30px; padding-block: 6px; color: var(--text); }
.tick li a, .open li a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.tick li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 16px; height: 9px; border-inline-start: 2.5px solid var(--ok); border-block-end: 2.5px solid var(--ok); transform: rotate(-45deg) scale(.9); transform-origin: 30% 60%; }
.open li { color: var(--muted); }
.open li::before { content: ""; position: absolute; inset-inline-start: 1px; top: .78em; width: 14px; height: 14px; border: 2px dashed var(--c-text-3); border-radius: 50%; }
.proof-r { position: relative; padding-bottom: 12%; }
.shot-main { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 12px; }
.shot-main img { width: 168%; max-width: none; border-radius: 0; outline: 0; box-shadow: none; }
.proof-r img { border-radius: 12px; box-shadow: 0 2px 6px rgb(0 0 0 / .2), 0 30px 60px -20px var(--c-shadow); outline: 1px solid var(--line); }
.shot-phone { position: absolute; inset-inline-end: -2%; bottom: 0; width: 24%; }
.shot-note { margin-top: 18px; font-size: .875rem; color: var(--muted); max-width: 36ch; }

/* ---------- pricing: paper ---------- */
.pricing { background: var(--paper); color: var(--c-paper-ink); }
.pr-h { display: grid; gap: 18px; }
.pricing h2 { color: var(--c-paper-ink); }
.pr-h p { max-width: 40rem; color: var(--c-paper-muted); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(32px, 5vw, 56px); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 18px; padding: clamp(22px, 2.6vw, 34px); border-radius: 14px; border: 1.5px solid var(--c-paper-line); background: var(--c-bg-raised); }
.plan h3 { font-size: 1.25rem; }
.plan .for { color: var(--c-paper-muted); font-weight: 600; margin-top: -8px; }
.plan .value { display: grid; gap: 12px; font-size: .9688rem; padding: 0; margin: 0; list-style: none; }
.plan .value li { padding-inline-start: 22px; position: relative; }
.plan .value li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .48em; width: 9px; height: 9px; border-radius: 2.5px; background: var(--violet); transform: rotate(45deg); }
.plan .spec { margin-block: 4px auto; font-size: .9375rem; }
.plan .spec summary { list-style: none; cursor: pointer; color: var(--c-paper-muted); font-weight: 620; padding-block: 12px; border-top: 1px dashed var(--c-paper-line); display: flex; justify-content: space-between; }
.plan .spec summary::-webkit-details-marker { display: none; }
.plan .spec summary::after { content: "+"; font-weight: 620; }
.plan .spec[open] summary::after { content: "–"; }
.plan .spec dl { margin-block: 2px 12px; }
.pp { display: grid; gap: 4px; }
.pp b { font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; font-weight: 680; }
.pp small { font-size: .9375rem; color: var(--c-paper-muted); }
.plan dl { display: grid; margin-block: 4px auto; }
.plan dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 9px; border-top: 1px dashed var(--c-paper-line); font-size: .9375rem; }
.plan dt { color: var(--c-paper-muted); } .plan dd { font-weight: 600; text-align: end; }
.plan .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: var(--r); background: var(--c-paper-ink); color: var(--c-paper); font-weight: 620; text-decoration: none; transition: background .2s, transform .15s var(--out); }
.plan .btn:hover { background: var(--violet-deep); } .plan .btn:active { transform: scale(.98); }
.plan.rec { background: var(--violet-field); border-color: var(--violet-field); color: #fff; }
.plan.rec .pp small, .plan.rec dt { color: #fff; }
.plan.rec dl > div { border-color: rgb(255 255 255 / .4); }
.plan.rec .value li::before { background: #fff; }
.plan.rec .for, .plan.rec .spec summary { color: rgb(255 255 255 / .8); }
.plan.rec .btn { background: #fff; color: var(--deep); } .plan.rec .btn:hover { background: #fff; }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 6vw, 96px);  }
.faq h2 { max-width: 10ch; }
.faq-l details { border-top: 1px solid var(--line); }
.faq-l details:last-child { border-bottom: 1px solid var(--line); }
.faq-l summary { list-style: none; cursor: pointer; padding-block: 20px; font-size: 1.125rem; font-weight: 600; color: var(--ivory); display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.faq-l summary::-webkit-details-marker { display: none; }
.faq-l summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--violet), var(--violet)) center / 100% 2px no-repeat, linear-gradient(var(--violet), var(--violet)) center / 2px 100% no-repeat; transition: transform .3s var(--out); }
.faq-l details[open] summary::after { transform: rotate(45deg); }
.faq-l details p { padding-bottom: 22px; color: var(--muted); max-width: 40rem; }

/* ---------- final call: violet ---------- */
.join { background: var(--violet-field); display: grid; gap: 22px; justify-items: start; }
.join h2 { font-size: clamp(3rem, 1.4rem + 6vw, 6rem); max-width: 12ch; color: #fff; letter-spacing: -0.04em; }
.join > p { color: #fff; max-width: 32rem; font-size: 1.125rem; }
.join .join-row input { background: var(--c-paper); color: var(--c-paper-ink); border-color: transparent; }
.join .join-row input::placeholder { color: var(--c-paper-muted); }
.join .join-row input:focus-visible { box-shadow: 0 0 0 4px rgb(27 18 64 / .45); outline-color: var(--deep); }
.join .join-row button { background: var(--deep); color: #fff; } .join .join-row button:hover { background: #2a1d63; }
.join .join-n { color: #fff; } .join .join-n.ok, .join .join-n.bad { color: #fff; font-weight: 620; }

.foot { padding: 36px max(var(--m), calc((100% - var(--w)) / 2)) 44px; display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; color: var(--muted); font-size: .9375rem; }
.foot p { max-width: 34rem; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.foot a { color: var(--text); text-decoration: none; padding-block: 6px; display: inline-flex; align-items: center; min-height: 44px; } .foot a:hover { text-decoration: underline; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  /* one calm row: the brand holds its place, the links become a swipeable strip under their own scroll — same gesture language as the example-jobs row. */
  .bar { flex-wrap: nowrap; min-width: 0; }
  .links { flex-wrap: nowrap; overflow-x: auto; overflow-y: auto; scrollbar-width: none; min-width: 0; padding-block: 3px; margin-block: -3px; margin-inline-end: calc(var(--m) * -1); padding-inline-end: var(--m); mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent); }
  .links::-webkit-scrollbar { display: none; }
  .links > a, .links > button, .links > .theme { flex: none; }
  html[dir="rtl"] .links { mask-image: linear-gradient(to left, #000 calc(100% - 20px), transparent); }
}
@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { padding-block: 44px 8px; }
  .hero-r { padding: 44px var(--m) 52px; }
  .reach, .proof, .faq { grid-template-columns: minmax(0, 1fr); }
  .lim-cols { grid-template-columns: 1fr; gap: 28px; }
  .plans { grid-template-columns: 1fr; max-width: 30rem; }
  .led-h { display: none; }
  .led-r { grid-template-columns: 1fr; gap: 4px; padding-block: 16px; }
  .reach-l > div { grid-template-columns: 1fr; gap: 4px; }
  .shot-phone { width: 26%; inset-inline-end: 0; }
}
@media (max-width: 480px) {
  .brand .cloud { display: none; }
  .links a, .lang { white-space: nowrap; padding-inline: 9px; }
  .jobs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--m) * -1); padding-inline: var(--m); scroll-snap-type: x proximity; scroll-padding-inline: var(--m); }
  .jobs::-webkit-scrollbar { display: none; }
  .jobs button { flex: none; scroll-snap-align: start; }
  .hero-copy { padding-block-start: 28px; }
  .r-rows > div { grid-template-columns: 6.2rem 1fr; }
  .join-row button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .receipt.print .r-head, .receipt.print .r-task, .receipt.print .r-done, .receipt.print .r-rows > div { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* theme switch, and the screenshot that matches the theme (a light screenshot on a dark page is a flashlight) */
.theme { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 8px; background: none; color: var(--text); transition: background .2s; }
.theme svg { grid-area: 1 / 1; width: 20px; height: 20px; display: none; }
:root[data-theme="system"] .theme .i-auto, :root[data-theme="light"] .theme .i-sun, :root[data-theme="dark"] .theme .i-moon { display: block; }
.for-light { display: none; }
:root[data-theme="light"] .for-dark { display: none; }
:root[data-theme="light"] .for-light { display: block; }
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .for-dark { display: none; }
  :root[data-theme="system"] .for-light { display: block; }
}

.reach-l .tag { font-size: 12px; font-weight: 500; margin-inline-start: 8px; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, currentColor 10%, transparent); color: var(--muted, inherit); white-space: nowrap; vertical-align: middle; }