/* Sirajtec: the one stylesheet.
   Values in :root mirror docs/design-tokens.json (version 4) exactly.
   Colours and font families appear only in :root and @font-face.
   Logical properties only, so the Arabic page needs no mirrored rules. */

/* Fonts: self-hosted, SIL OFL (licences alongside the files). Fontsource 5.3.0 builds. */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/bebas-neue-latin-400-v5.3.0.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-400-v5.3.0.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-500-v5.3.0.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;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-600-v5.3.0.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;
}
/* Metric-matched fallbacks: the system font is scaled so the text lays out like the web font
   before it loads, which removes the layout shift on swap. Overrides come from the woff2
   hhea metrics; size-adjust is calibrated on measured text widths (see docs/decisions.md). */
@font-face {
  font-family: 'Bebas Neue Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 57.41%;
  ascent-override: 156.77%;
  descent-override: 52.26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 400;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 106.25%;
  ascent-override: 91.17%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 500;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 107.97%;
  ascent-override: 89.72%;
  descent-override: 22.34%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 101.2%;
  ascent-override: 95.72%;
  descent-override: 23.83%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tajawal-arabic-400-v5.3.0.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: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/tajawal-latin-400-v5.3.0.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;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/tajawal-arabic-500-v5.3.0.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: 'Tajawal';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/tajawal-latin-500-v5.3.0.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;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/tajawal-arabic-700-v5.3.0.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: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/tajawal-latin-700-v5.3.0.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;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/tajawal-arabic-800-v5.3.0.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: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/tajawal-latin-800-v5.3.0.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;
}

/* Tokens */
:root {
  color-scheme: light;
  /* colour: light values, then the dark palette (used only inside .band--inverse; the device illustrations use the light palette plus --dark-border for the hardware edge, neck and stand) */
  --surface-100: #FAF7F2;
  --surface-200: #F1ECE3;
  --ink: #20212B;
  --ink-muted: #5C5D6B;
  --border: #E2DBCC;
  --brand: #E8A33D;
  --brand-ink: #2B1E07;
  --accent: #1F6F6B;
  --surface-card: #FFFFFF;
  --device-detail: #4A4A4D;
  --dark-surface-100: #15161C;
  --dark-surface-200: #1E1F27;
  --dark-ink: #F4F1EA;
  --dark-ink-muted: #A6A7B5;
  --dark-border: #303241;
  --dark-brand: #F0B35C;
  --dark-brand-ink: #2B1E07;
  --dark-accent: #4FBDB6;
  --dark-surface-card: #1E1F27;
  --dark-device-detail: #4A4A4D;
  --font-display: 'Bebas Neue', 'Bebas Neue Fallback', system-ui, sans-serif;
  --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --font-arabic: 'Tajawal', system-ui, sans-serif;
  --type-display-lg-size: 52px;
  --type-display-lg-line: 54px;
  --type-display-lg-weight: 400;
  --type-display-md-size: 34px;
  --type-display-md-line: 36px;
  --type-display-md-weight: 400;
  --type-display-hero-size: clamp(56px, 5.2vw + 37px, 112px);
  --type-display-hero-line: 0.9;
  --type-display-hero-weight: 400;
  --type-display-section-size: clamp(40px, 2.2vw + 32px, 64px);
  --type-display-section-line: 1;
  --type-display-section-weight: 400;
  --type-display-feature-size: clamp(44px, 3.4vw + 31px, 80px);
  --type-display-feature-line: 0.95;
  --type-display-feature-weight: 400;
  --type-display-contact-size: clamp(44px, 4.2vw + 27.5px, 88px);
  --type-display-contact-line: 0.95;
  --type-display-contact-weight: 400;
  --type-display-numeral-size: 48px;
  --type-display-numeral-line: 1;
  --type-display-numeral-weight: 400;
  --type-display-hero-ar-size: clamp(42px, 3.89vw + 28px, 84px);
  --type-display-hero-ar-line: 1.15;
  --type-display-hero-ar-weight: 800;
  --type-display-section-ar-size: clamp(32px, 1.85vw + 25.3px, 52px);
  --type-display-section-ar-line: 1.25;
  --type-display-section-ar-weight: 800;
  --type-display-feature-ar-size: clamp(36px, 2.59vw + 26.7px, 64px);
  --type-display-feature-ar-line: 1.2;
  --type-display-feature-ar-weight: 800;
  --type-display-contact-ar-size: clamp(36px, 2.96vw + 25.3px, 68px);
  --type-display-contact-ar-line: 1.2;
  --type-display-contact-ar-weight: 800;
  --type-heading-size: 20px;
  --type-heading-line: 28px;
  --type-heading-weight: 600;
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-caption-size: 13px;
  --type-caption-line: 18px;
  --type-caption-weight: 500;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 88px;
  --space-24: 96px;
  --space-30: 120px;
  --radius-xs: 8px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-device: 14px;
  --radius-full: 9999px;
  /* derived from the tokens above, no new values */
  --inverse-bg: var(--ink);
  /* One spacing rule (option C). --section-gap is the visible gap between the content of two plain
     neighbouring sections; every section (hero included) pads its top and bottom by half of it.
     --band-pad is the inner padding (band edge to content) of the dark Process and amber Contact
     bands. A plain-to-band gap is therefore --section-pad + --band-pad, the same on both sides of
     a band. Phones (below 600px) reassign both values in the media query below. */
  --section-gap: var(--space-30);
  --section-pad: calc(var(--section-gap) / 2);
  --band-pad: var(--space-22);
}
@media (max-width: 599px) {
  :root {
    --section-gap: var(--space-24);
    --band-pad: var(--space-16);
  }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: 1.5;
}
:lang(ar) { font-family: var(--font-arabic); }
/* Latin-script link on the Arabic page (the "English" switch) uses the sans face. On the English page this only matches <html>. */
[lang="en"] { font-family: var(--font-sans); }
/* Arabic typography overrides live in the last block of this file (they must come after the components). */
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.8; }
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  opacity: 1;
}
img, svg { display: block; max-width: 100%; }
main:focus { outline: none; }

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-2);
  inset-block-start: calc(-1 * var(--space-16));
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--surface-100);
  border-radius: var(--radius-md);
  font-weight: 600;
}
.skip-link:focus { inset-block-start: var(--space-2); }

/* Layout */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (min-width: 600px) {
  .container { padding-inline: var(--space-8); }
}
/* The one section-spacing rule (coloured bands use it as inner padding too). */
.section-pad { padding-block: var(--section-pad); }
.band--inverse .section-pad,
.band--brand .section-pad { padding-block: var(--band-pad); }
.band { background: var(--surface-100); color: var(--ink); }
.band--alt { background: var(--surface-200); }
.band--brand { background: var(--brand); color: var(--brand-ink); }
.band--inverse {
  /* Re-assign the semantic variables so components reuse the same names. */
  --surface-100: var(--dark-surface-100);
  --surface-200: var(--dark-surface-200);
  --ink: var(--dark-ink);
  --ink-muted: var(--dark-ink-muted);
  --border: var(--dark-border);
  --brand: var(--dark-brand);
  --accent: var(--dark-accent);
  background: var(--inverse-bg);
  color: var(--ink);
}

/* Type */
.eyebrow {
  /* Narrow phones: shrinks (down to 11px) so "Custom automation studio · Oman" stays on one line at 360px. */
  font-size: clamp(11px, 3.4vw, 14px);
  font-weight: 600;
  letter-spacing: clamp(1px, 0.4vw, 1.5px);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.band--inverse .eyebrow { color: var(--brand); }
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
}
.h-hero {
  font-size: var(--type-display-hero-size);
  line-height: var(--type-display-hero-line);
  letter-spacing: 0.5px;
}
.h-section {
  margin-block: var(--space-3) var(--space-10);
  font-size: var(--type-display-section-size);
  line-height: var(--type-display-section-line);
}
.h-feature {
  margin-block: var(--space-3) var(--space-12);
  font-size: var(--type-display-feature-size);
  line-height: var(--type-display-feature-line);
}
.h-contact {
  margin-block-end: var(--space-8);
  max-width: 900px;
  font-size: var(--type-display-contact-size);
  line-height: var(--type-display-contact-line);
}
.verify { color: var(--accent); }
.item-title {
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line);
  font-weight: var(--type-heading-weight);
}
.muted { color: var(--ink-muted); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-md);
  font-size: var(--type-body-size);
  font-weight: 600;
}
.btn--primary { background: var(--brand); color: var(--brand-ink); }
.btn--ink { background: var(--ink); color: var(--surface-100); }
.btn--outline { border: 1.5px solid currentColor; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Header / nav */
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
}
.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}
.logo img { width: 40px; height: 40px; }
.wordmark {
  font-family: var(--font-display);
  font-size: 30px;
  letter-spacing: 1px;
  /* Legacy from the two-word name: harmless now that the name is a single word. */
  word-spacing: calc(-0.16em - 1px);
  line-height: 1;
  text-transform: uppercase;
}
.nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-3);
  font-size: 15px;
  font-weight: 500;
}
.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
}
.nav-list .btn--ink {
  padding-block: var(--space-3);
  padding-inline: var(--space-5);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* Nav on narrow phones: logo + language link on row one, the four section links on row two.
   The header CTA is hidden here (the hero shows the same button right below); links keep a 44px target
   through min-height plus label width and padding. */
@media (max-width: 479px) {
  .site-header .container {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 0;
  }
  .site-header nav,
  .nav-list,
  .nav-list li { display: contents; }
  .nav-list { font-size: 14px; }
  .nav-list a { padding-inline: var(--space-1); min-width: 44px; justify-content: center; }
  .logo { grid-column: 1 / 4; grid-row: 1; justify-self: start; }
  .nav-list a[hreflang] { grid-column: 4; grid-row: 1; justify-self: end; }
  .nav-list .btn--ink { display: none; }
}

/* Nav from 480px up to where the one-row desktop nav fits (940px: logo + six items measured in Chrome):
   row one = logo (inline-start) + "Start a conversation" (inline-end); row two = section links + language link.
   Grid placement uses logical start/end only, so it mirrors in RTL. Below 480px the compact grid above applies. */
@media (min-width: 480px) and (max-width: 939px) {
  .site-header .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 var(--space-2);
  }
  .site-header nav,
  .nav-list,
  .nav-list li { display: contents; }
  .nav-list a { white-space: nowrap; }
  /* order: logo, CTA, line break, links (links keep DOM order among themselves) */
  .logo { order: 1; }
  .nav-list .btn--ink { order: 2; margin-inline-start: auto; }
  .site-header .container::after { content: ""; order: 3; flex-basis: 100%; }
  .nav-list li:not(:last-child) a { order: 4; }
}
/* The five English row-two links need about 440px at 15px; the compact 14px size keeps them on one row at 480-559px.
   Arabic keeps its own 15px size here (override in the Arabic block below) and also fits on one row at 480px (measured). */
@media (min-width: 480px) and (max-width: 559px) {
  .nav-list { font-size: 14px; }
  .nav-list a { padding-inline: var(--space-1); }
}

/* Hero */
/* Top padding is the hero's own (--space-16); bottom padding is the shared --section-pad, so the
   hero-to-Services gap follows the same rule as every other plain section gap, on phones too. */
.hero { padding-block: var(--space-16) var(--section-pad); }
.hero .eyebrow { margin-block-end: var(--space-5); }
.hero-lede {
  margin-block-start: var(--space-7);
  max-width: 560px;
  font-size: 20px;
  color: var(--ink-muted);
}
.hero .btn-row { margin-block-start: 36px; }

/* Services */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
/* 1, then 2+2+2, then 3+3: never an orphan (six cards). Re-check if the card count changes. */
@media (min-width: 580px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 940px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
.card {
  padding: var(--space-7);
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.card .item-title { margin-block-end: var(--space-2); }
.card p { font-size: 15px; color: var(--ink-muted); }
/* Linked card: one link on the title, stretched over the whole card; the focus ring is drawn around the card. */
.card--link { position: relative; }
.card--link .item-title a {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.card--link .item-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.card--link .item-title a:focus-visible { outline: none; }
.card--link .item-title a:focus-visible::after {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-block-end: var(--space-5);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-md);
}
.icon-box svg { width: 24px; height: 24px; }
.services-title { max-width: 760px; }

/* Kiosks */
.split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-14);
}
.split-copy { flex: 1 1 420px; min-width: 0; }
.split-copy .h-section { margin-block-end: var(--space-5); }
.split-copy > p {
  margin-block-end: var(--space-7);
  max-width: 520px;
  font-size: 18px;
  color: var(--ink-muted);
}
.bullets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 520px;
}
.bullets li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 17px;
}
.bullets li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-block-start: 9px;
  border-radius: var(--radius-full);
  background: var(--brand);
}
.bullets strong { font-weight: 600; }

.devices {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-12);
}
.device { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.device-caption { margin-block-start: 14px; font-size: 14px; color: var(--ink-muted); }
.kiosk {
  width: 240px;
  max-width: 100%;
  padding: var(--space-3);
  background: var(--ink);
  border: 3px solid var(--dark-border);
  border-radius: var(--radius-lg);
}
.kiosk-camera {
  width: 6px;
  height: 6px;
  margin-inline: auto;
  margin-block-end: var(--space-2);
  border-radius: var(--radius-full);
  background: var(--device-detail);
}
.kiosk-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
  padding: 14px;
  background: var(--surface-100);
  border-radius: var(--radius-md);
  color: var(--ink);
}
.kiosk-head { display: flex; align-items: baseline; justify-content: space-between; }
.kiosk-title {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 1px;
}
.kiosk-hint { font-size: 11px; color: var(--ink-muted); }
.chips { display: flex; gap: 6px; }
.chip {
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
}
.chip--active {
  padding-block: 5px;
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}
.kiosk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: var(--surface-200);
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 500;
}
.kiosk-add {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--brand);
  color: var(--brand-ink);
}
.kiosk-add svg { width: 14px; height: 14px; }
.kiosk-order {
  margin-block-start: auto;
  padding: 13px var(--space-3);
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.kiosk-neck { width: 34px; height: 84px; background: var(--dark-border); }
.kiosk-base { width: 160px; max-width: 100%; height: 14px; background: var(--ink); border-radius: 7px; }
.wall {
  width: 260px;
  max-width: 100%;
  padding: 10px;
  background: var(--ink);
  border: 3px solid var(--dark-border);
  border-radius: var(--radius-device);
}
.wall-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 170px;
  padding: var(--space-4);
  background: var(--surface-100);
  border-radius: var(--radius-xs);
}
.wall-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wall-number {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--ink);
}
/* Short amber bar under the number: a block pseudo-element, so it starts at inline-start in both languages. */
.wall-number::after {
  content: "";
  display: block;
  width: var(--space-12);
  height: 6px;
  margin-block-start: var(--space-2);
  background: var(--brand);
  border-radius: var(--radius-full);
}
.wall-next {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink-muted);
}
.wall-stand {
  width: 90px;
  height: 8px;
  background: var(--dark-border);
  border-end-start-radius: 4px;
  border-end-end-radius: 4px;
}

/* Process */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--space-8);
}
.step {
  padding-block-start: var(--space-5);
  border-block-start: 2px solid var(--border);
}
.step-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--type-display-numeral-size);
  line-height: var(--type-display-numeral-line);
  color: var(--brand);
}
.step .item-title { margin-block: var(--space-2); font-size: 18px; }
.step p { font-size: 14px; color: var(--ink-muted); }
.step--accent { border-block-start-color: var(--accent); }
.step--accent .step-num { color: var(--accent); }

/* Ownership */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--space-8);
}
.cols .item-title { margin-block-end: var(--space-2); }
.cols p { color: var(--ink-muted); }

/* Footer */
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-8);
  font-size: 14px;
  color: var(--ink-muted);
}

/* Arabic (:lang(ar)) typography overrides. Must stay last. Typography only.
   Display text switches to Tajawal; Arabic never takes letter-spacing or uppercase.
   Deliberately NOT overridden (Latin or digit islands that stay in Bebas Neue): .wordmark, .wall-number, .step-num.
   Tajawal has no 600 weight, so the remaining 600s resolve to 700. */
/* :lang(ar) matches every descendant, so the LTR digit islands inside the Latin-font components must inherit that font explicitly. */
.step-num > span:lang(ar), .wall-number > span:lang(ar) { font-family: inherit; }
body:lang(ar) { line-height: 1.6; }
.eyebrow:lang(ar) {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.display:lang(ar) {
  font-family: var(--font-arabic);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.h-hero:lang(ar) {
  font-size: var(--type-display-hero-ar-size);
  line-height: var(--type-display-hero-ar-line);
  font-weight: var(--type-display-hero-ar-weight);
  letter-spacing: 0;
}
.h-section:lang(ar) {
  font-size: var(--type-display-section-ar-size);
  line-height: var(--type-display-section-ar-line);
  font-weight: var(--type-display-section-ar-weight);
}
.h-feature:lang(ar) {
  font-size: var(--type-display-feature-ar-size);
  line-height: var(--type-display-feature-ar-line);
  font-weight: var(--type-display-feature-ar-weight);
}
.h-contact:lang(ar) {
  font-size: var(--type-display-contact-ar-size);
  line-height: var(--type-display-contact-ar-line);
  font-weight: var(--type-display-contact-ar-weight);
}
.item-title:lang(ar) { font-size: 22px; font-weight: 700; line-height: 1.6; }
.step .item-title:lang(ar) { font-size: 21px; }
.hero-lede:lang(ar) { font-size: 21px; }
.btn:lang(ar) { font-size: 18px; font-weight: 700; }
.nav-list .btn--ink:lang(ar) { font-size: 17px; font-weight: 700; line-height: 1.4; }
/* Tajawal link widths make the Arabic one-row nav about 2px wider than the English one; 1px less gap between the
   six items (5px in total) lets it fit from 940px like EN. The gap is inert below 940px (display: contents). */
.nav-list:lang(ar) { font-size: 17px; column-gap: calc(var(--space-3) - 1px); }
.nav-list a[lang="en"] { font-size: 15px; }
@media (max-width: 559px) {
  .nav-list:lang(ar) { font-size: 15px; }
  .nav-list a[lang="en"] { font-size: 14px; }
}
/* At 360-389px the four row-two links wrap ("الأكشاك والشاشات" breaks) at 15px; 14px keeps them on one line. */
@media (max-width: 479px) {
  .nav-list:lang(ar) { font-size: 14px; }
}
.card p:lang(ar) { font-size: 17px; }
.split-copy > p:lang(ar) { font-size: 20px; }
.bullets li:lang(ar) { font-size: 19px; }
.bullets li:lang(ar)::before { margin-block-start: 12px; }
.bullets strong:lang(ar) { font-weight: 700; }
.device-caption:lang(ar) { font-size: 15px; }
.kiosk-title:lang(ar) {
  font-family: var(--font-arabic);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}
.kiosk-hint:lang(ar), .chip:lang(ar) { font-size: 12px; }
/* Arabic chip labels are wider than the Latin ones; tighter inline padding and gap keep the row inside the 188px kiosk screen (not in the mockup). */
.chips:lang(ar) { gap: 4px; }
.chip:lang(ar) { padding-inline: 7px; }
.chip--active:lang(ar) { font-weight: 700; }
.kiosk-item:lang(ar) { font-size: 14px; }
.kiosk-order:lang(ar) { font-size: 16px; font-weight: 700; }
.wall-label:lang(ar) {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.wall-next:lang(ar) { font-size: 13px; }
.step p:lang(ar) { font-size: 16px; }
.cols p:lang(ar) { font-size: 18px; }
.site-footer .container:lang(ar) { font-size: 15px; }