/* ==========================================================================
   InstaOrder — instaorder.app
   The brand is `OD-GUIDE` ©2026, the same one the apps and panels carry: Tech
   Blue #3100FF drives every control and every inverted ground, Move Red
   leads the brand: it carries white text at only 4.0:1, so it is wired to
   nothing clickable, but that bars it from the controls and not from the
   page. Red is the mark, the eyebrows, the numerals, the icon chips and the
   commitment blocks — everywhere the page introduces itself, never anywhere
   it asks to be pressed. Typography is Delight (Latin) and Tajarib (Arabic), self-hosted below.
   There are no third-party requests.
   Layout is written with logical properties throughout, so the Arabic pages inherit the
   whole stylesheet under dir="rtl" with no direction-specific overrides.
   ========================================================================== */

/* ---- The brand faces, bundled: neither is on Google Fonts ----
   Delight has no Arabic glyphs, which is what lets one stack serve both
   locales — the browser falls through per glyph, so there is no
   direction-dependent font switch anywhere. Tajarib is declared with a
   unicode-range so an English page never fetches it. Tajarib has no semibold:
   its bold fills 600 and its black fills 700, the same mapping the apps use. */
@font-face { font-family:'Delight'; src:url('/assets/fonts/delight-regular.otf')  format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Delight'; src:url('/assets/fonts/delight-medium.otf')   format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Delight'; src:url('/assets/fonts/delight-semibold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Delight'; src:url('/assets/fonts/delight-bold.otf')     format('opentype'); font-weight:700 900; font-style:normal; font-display:swap; }

@font-face { font-family:'Tajarib'; src:url('/assets/fonts/tajarib-typeface-regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+061C; }
@font-face { font-family:'Tajarib'; src:url('/assets/fonts/tajarib-typeface-medium.otf')  format('opentype'); font-weight:500; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+061C; }
@font-face { font-family:'Tajarib'; src:url('/assets/fonts/tajarib-typeface-bold.otf')    format('opentype'); font-weight:600; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+061C; }
@font-face { font-family:'Tajarib'; src:url('/assets/fonts/tajarib-typeface-black.otf')   format('opentype'); font-weight:700 900; font-style:normal; font-display:swap; unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200F,U+061C; }

:root {
  /* Brand constants — identical in both themes, because they are the brand.
     Dark Blue is the guide's own (p.37) and is where the Tech Blue ramp ends. */
  --blue:        #3100FF;
  --blue-deep:   #2400BF;
  --blue-dark:   #04015C;
  --red:         #FF0004;
  --red-deep:    #CC0003;

  /* Themed surfaces. The greys are the guide's own light steps (#E3E3E3,
     #D8D7DF) over the panels' neutral ramp; the two dark surfaces are the
     panels' #101828 page and #1A2231 card, deliberately not rebranded. */
  --paper:       #F7F7F9;
  --surface:     #FFFFFF;
  --surface-2:   #F1F1F4;
  --ink:         #101828;   /* headings           — 17.8:1 on --surface */
  --body:        #43434A;   /* running text       —  9.8:1 on --surface */
  --muted:       #5E5E66;   /* labels, meta, lede —  5.7:1 on the dimmest
                               ground it sits on (--surface-2). The old
                               #6F6F78 fell to 4.41:1 there, under AA. */
  --rule:        #E3E3E3;
  --rule-soft:   #F1F1F4;

  /* On-brand tokens — the inverted bands, constant across themes. Nothing on
     a blue ground is red: Move Red on Tech Blue is unreadable, so emphasis
     there is white and the quiet text is a pale step of the brand itself. */
  --on-brand:        #FFFFFF;   /* 8.2:1 on Tech Blue */
  --on-brand-quiet:  #E9E5FF;   /* 6.7:1 — the headline's quiet half. It was
                                   #D9D1FF, which put the *largest* text on
                                   the page at the *lowest* contrast of the
                                   three and read as washed out rather than
                                   as a second voice. */
  --on-brand-muted:  #DED8FF;   /* 6.0:1 — was #C6BAFF at 4.61:1: AA by a
                                   hair, and carrying the hero's lede. */
  --on-brand-rule:   color-mix(in srgb, #FFFFFF 22%, transparent);
  --on-brand-label:  #B3A3FF;

  /* Tech Blue is the one core colour that carries white text at AA (8.2:1),
     so it is the link, the focus ring and the filled control. */
  --accent:      #3100FF;
  --accent-hover:#2400BF;
  --amber-ink:   #8A5200;
  --amber-bg:    #FFF3DB;

  /* The mark is Move Red on a light ground and white on a dark one — the same
     swap the apps make with `currentColor` (OD-GUIDE p.29 reverse artwork). */
  --mark:        var(--red);

  /* ---- Move Red, given a job ----
     The brand voice (OD-GUIDE p.35), and the colour every app names
     `secondary`. Full-strength #FF0004 carries white text at 4.0:1 — under AA
     — which is why no button here or in any of the four apps is red. That rule
     bars red from *controls*; it never barred it from the page. --voice is the
     guide's own red-600, which clears AA for text of any size on all three
     light grounds (5.2:1 at worst), so it can carry the eyebrows, the step
     numerals, the icon chips and the commitment blocks. Full strength stays
     the mark's alone. Red never appears on a blue band: it reads at 1.4:1
     there, which is why the hero's eyebrow keeps --on-brand-muted. */
  --voice:       var(--red-deep);
  --voice-bg:    #FFECEC;

  --display: 'Delight', 'Tajarib', 'Segoe UI', system-ui, sans-serif;
  --text:    'Delight', 'Tajarib', 'Segoe UI', system-ui, sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- One type ramp ----
     Every size in this sheet comes from the eleven steps below; nothing is
     set ad hoc. The floor is 12px, so no label is smaller than a label can
     legibly be, and the display steps are fluid, so a phone never gets a
     headline sized for a desktop. */
  --fs-micro:  0.75rem;     /* 12 — footnote, field name, tabular detail */
  --fs-label:  0.8125rem;   /* 13 — every tracked uppercase label        */
  --fs-small:  0.875rem;    /* 14 — nav, chips, small controls           */
  --fs-meta:   0.9375rem;   /* 15 — secondary copy, list items, captions */
  --fs-body:   1.0625rem;   /* 17 — running text                        */
  --fs-lead:   clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);   /* 17 → 20 */
  --fs-h3:     clamp(1.125rem, 1.05rem + 0.35vw, 1.28rem); /* 18 → 20 */
  --fs-h3-lg:  clamp(1.25rem,  1.1rem  + 0.7vw,  1.5rem);  /* 20 → 24 */
  --fs-h2-sm:  clamp(1.4rem,   1.2rem  + 1vw,    1.78rem); /* 22 → 28 */
  --fs-h2:     clamp(1.85rem,  1.35rem + 2.4vw,  2.7rem);  /* 30 → 43 */
  --fs-h1:     clamp(2.45rem,  1.7rem  + 3.9vw,  4rem);    /* 39 → 64 */
  --fs-h1-doc: clamp(2rem,     1.5rem  + 2.6vw,  3rem);    /* 32 → 48 */

  /* Line height falls as the type rises, which is the whole reason a ramp
     exists: one value can serve a 12px label or a 64px headline, not both. */
  --lh-tight: 1.04;
  --lh-snug:  1.16;
  --lh-head:  1.34;
  --lh-ui:    1.45;
  --lh-body:  1.62;

  /* Two tracking values for labels, not the eight this sheet used to carry. */
  --tr-label: .13em;
  --tr-wide:  .18em;
  --tr-h1: -.028em;
  --tr-h2: -.02em;
  --tr-h3: -.008em;

  --wrap: 1140px;
  --radius: 8px;      /* controls */
  --radius-lg: 16px;  /* cards and panels, as the admin panel draws them */
  --shadow-card: 0 1px 2px rgba(16,24,40,.05);

  /* The admin panel's backdrop: a dot grid under a Tech Blue glow, with a
     Move Red one low at the far end. Decoration only. */
  --dots:      #D0D5DD;
  --glow-blue: rgba(49,0,255,.10);
  --glow-red:  rgba(255,0,4,.08);
}

/* The two dark lists must stay in lockstep — a token in one and not the other
   renders one theme's text on the other theme's ground. Tech Blue is a *fill*
   in dark mode and never text: as a foreground it carries 2.1:1 against the
   card, so --accent steps up the ramp there, exactly as the panels do — far
   enough up (#9C88FF, 5.6:1 on the card) that it also clears AA on the
   quietest dark ground, --surface-2, where the old step sat at 4.21:1.
   --voice steps up for the same reason: the guide's red-400 (#FF4A4D) was
   tuned against the card and falls to 4.24:1 on --surface-2. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #101828;
    --surface:     #1A2231;
    --surface-2:   #222C3D;
    --ink:         #F7F7F9;
    --body:        #D8D7DF;
    --muted:       #A2A2AC;
    --rule:        #2B3546;
    --rule-soft:   #222C3D;
    --accent:      #9C88FF;
    --accent-hover:#BDAFFF;
    --amber-ink:   #FFE7B8;
    --amber-bg:    #33240D;
    --mark:        #FFFFFF;
    --voice:       #FF6B6D;
    --voice-bg:    #2B0001;
    --shadow-card: none;
    --dots:        rgba(255,255,255,.08);
    --glow-blue:   rgba(49,0,255,.15);
    --glow-red:    rgba(255,0,4,.06);
  }
}

:root[data-theme="dark"] {
  --paper:       #101828;
  --surface:     #1A2231;
  --surface-2:   #222C3D;
  --ink:         #F7F7F9;
  --body:        #D8D7DF;
  --muted:       #A2A2AC;
  --rule:        #2B3546;
  --rule-soft:   #222C3D;
  --accent:      #9C88FF;
  --accent-hover:#BDAFFF;
  --amber-ink:   #FFE7B8;
  --amber-bg:    #33240D;
  --mark:        #FFFFFF;
  --voice:       #FF6B6D;
  --voice-bg:    #2B0001;
  --shadow-card: none;
  --dots:        rgba(255,255,255,.08);
  --glow-blue:   rgba(49,0,255,.15);
  --glow-red:    rgba(255,0,4,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Pinned to the viewport so the page scrolls over it. Everything laid on it
   is opaque, so the dots only show between the cards, never through them. */
body { isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 36rem at 50% 30%, var(--glow-blue), transparent 70%),
    radial-gradient(circle 28rem at 100% 100%, var(--glow-red), transparent 70%),
    radial-gradient(var(--dots) 1px, transparent 0) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 80%);
}
[dir="rtl"] body::before { transform: scaleX(-1); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* ---------------------------------------------------------------- type --- */

h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); text-wrap: balance; margin: 0; }
h1 { font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-h1); }
h2 { font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug);  letter-spacing: var(--tr-h2); }
h3 { font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-head);  letter-spacing: var(--tr-h3); }
p  { margin: 0; }

.eyebrow {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--voice);
}
.eyebrow-on-brand { color: var(--on-brand-muted); }

.lede { font-size: var(--fs-lead); line-height: var(--lh-ui); color: var(--muted); max-inline-size: 62ch; }

/* Standing copy under a band — the paragraphs that used to carry a font-size
   and a colour inline in the markup. */
.note {
  font-size: var(--fs-meta); line-height: var(--lh-ui);
  color: var(--muted); max-inline-size: 66ch; margin-block-start: 24px;
}
.note-tight { margin-block-start: 14px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px;
}
/* A blue ring is invisible on a blue ground, so the inverted bands ring white. */
.hero a:focus-visible, .capsules a:focus-visible,
.cta a:focus-visible, .site-footer a:focus-visible { outline-color: #FFFFFF; }

strong { font-weight: 700; color: var(--ink); }

/* Marks a value the operator still has to supply before launch. */
.fill {
  font-family: var(--mono); font-size: var(--fs-micro);
  background: var(--amber-bg); color: var(--amber-ink);
  padding: 1px 6px; border-radius: 3px; border: 1px dashed currentColor;
  white-space: nowrap;
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-meta);
  padding: 13px 24px; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary   { background: var(--accent); color: #FFFFFF; }
.btn-primary:hover { background: var(--accent-hover); }
/* Tech Blue on a Tech Blue band would disappear, so the filled button inverts
   inside one: white ground, brand text — still the same affordance. */
.hero .btn-primary, .cta .btn-primary { background: #FFFFFF; color: var(--blue); }
.hero .btn-primary:hover, .cta .btn-primary:hover { background: var(--on-brand-quiet); }
.btn-on-brand  { background: transparent; color: var(--on-brand); border-color: var(--on-brand-rule); }
.btn-on-brand:hover { background: rgba(255,255,255,.12); border-color: #FFFFFF; }
.btn-ghost     { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn svg { inline-size: 17px; block-size: 17px; flex: none; }

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--rule);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 14px;
  block-size: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }

/* ---- the marks ----
   Masked, not <img>-ed: the artwork is a single colour, so a mask lets one
   file be Move Red on a light ground and white on a dark one. An <img> would
   need a second file and would not follow the theme. Both marks are wider
   than they are tall, so they are sized by block-size and given the matching
   inline-size — a square box letterboxes them. */
.mark {
  display: block; flex: none; background-color: var(--mark);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.mark-od { /* 2.63:1, the trademark lockup */
  block-size: 26px; inline-size: 68px;
  -webkit-mask-image: url('/assets/brand/od-mark.svg');
  mask-image: url('/assets/brand/od-mark.svg');
}
.mark-lockup { /* 1.32:1 */
  block-size: 72px; inline-size: 95px;
  -webkit-mask-image: url('/assets/brand/wordmark.svg');
  mask-image: url('/assets/brand/wordmark.svg');
}
.brand span {
  font-family: var(--display); font-weight: 700; font-size: var(--fs-h3);
  color: var(--ink); letter-spacing: var(--tr-h2);
}
.nav { display: none; gap: 26px; margin-inline-start: 26px; }
.nav a {
  font-family: var(--display); font-weight: 500; font-size: var(--fs-meta);
  color: var(--muted); text-decoration: none;
  transition: color .16s ease;
}
.nav a:hover { color: var(--ink); }
.header-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
/* The admin panel's segmented control: both languages on screen, the current
   one under the thumb. Each is a link to the same page in that language. */
.seg {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--rule);
}
.seg a {
  display: grid; place-items: center; min-block-size: 32px; padding-inline: 12px;
  border-radius: 999px; white-space: nowrap;
  font-family: var(--display); font-size: var(--fs-small); font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.seg a:hover { color: var(--ink); }
.seg a[aria-current] {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 2px rgba(16,24,40,.08), 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.seg a:focus-visible { outline-offset: 1px; border-radius: 999px; }
/* A phone has room for the mark or its name beside the switch, not both. */
@media (max-width: 420px) {
  .brand span:not(.mark) {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
.header-end .btn { padding: 9px 17px; font-size: var(--fs-small); }
.header-cta { display: none; }

/* The English nav, the language switch and the sign-in button need about
   1000px side by side; below that the nav folds away rather than wrapping. */
.nav a, .header-end .btn { white-space: nowrap; }
@media (min-width: 1040px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
}

/* ---------------------------------------------------------------- hero --- */

.hero {
  background: var(--blue);
  color: var(--on-brand);
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid var(--blue-deep);
}
/* The backdrop's dot grid, reversed out of the band. */
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 0);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 90% 70% at 78% 18%, #000 5%, transparent 72%);
  pointer-events: none;
}
.hero .wrap { position: relative; padding-block: clamp(64px, 9vw, 112px) clamp(56px, 8vw, 96px); }
.hero h1 { color: var(--on-brand-quiet); max-inline-size: 15ch; margin-block: 22px 24px; }
.hero h1 em { font-style: normal; color: #FFFFFF; }
.hero .lede { color: var(--on-brand-muted); max-inline-size: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 36px; }

.hero-slogan {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  margin-block-start: 44px; padding-block-start: 26px;
  border-block-start: 1px solid var(--on-brand-rule);
  font-family: var(--display); font-size: var(--fs-label); letter-spacing: var(--tr-wide);
  text-transform: uppercase; color: var(--on-brand-muted);
}
.hero-slogan b { color: #FFFFFF; font-weight: 600; }

/* ------------------------------------------------------------ capsules --- */

.capsules {
  background: var(--blue-dark); color: var(--on-brand);
  border-block-end: 1px solid var(--rule);
}
.capsules .wrap {
  display: grid; gap: 1px; margin-block: 0;
  grid-template-columns: repeat(2, 1fr);
  background: var(--on-brand-rule);
  padding-inline: 0;
  max-inline-size: var(--wrap);
}
.capsule { background: var(--blue-dark); padding: 26px 24px; }
.capsule dt {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--on-brand-label); margin-block-end: 9px;
}
.capsule dd {
  margin: 0; font-family: var(--display); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--on-brand);
}
@media (min-width: 860px) { .capsules .wrap { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------------ sections --- */

section.band { padding-block: clamp(64px, 8vw, 104px); }
section.band + section.band { border-block-start: 1px solid var(--rule); }
.band-head { max-inline-size: 66ch; margin-block-end: 48px; display: grid; gap: 16px; }

/* ----------------------------------------------------------- the steps --- */

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--surface); padding: 30px 26px 32px; display: grid; gap: 11px; align-content: start; }
.step .n {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 600;
  color: var(--voice); letter-spacing: var(--tr-label);
}
/* Secondary copy is --body, not --muted: --muted is for labels and ledes.
   Running prose set in the label colour is the grey-on-grey that made this
   page read flat even where the ratios passed. */
.step p { font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--body); }

/* -------------------------------------------------------------- grids ---- */

.cards { display: grid; gap: 20px; }
@media (min-width: 720px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards.c3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 28px 26px;
  display: grid; gap: 11px; align-content: start;
  box-shadow: var(--shadow-card);
  transition: border-color .16s ease;
}
.card:hover { border-color: var(--accent); }
.card .ico {
  inline-size: 40px; block-size: 40px; border-radius: 12px;
  display: grid; place-items: center; background: var(--voice-bg);
  color: var(--voice); margin-block-end: 6px;
}
.card .ico svg { inline-size: 19px; block-size: 19px; }
.card p { font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--body); }

/* -------------------------------------------------------- product rows --- */

.products { display: grid; gap: 20px; }
@media (min-width: 780px) { .products { grid-template-columns: repeat(2, 1fr); } }
.product {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface); padding: 30px 28px; box-shadow: var(--shadow-card);
  display: grid; gap: 13px; align-content: start;
}
.product .tag {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
}
.product ul { margin: 4px 0 0; padding-inline-start: 1.15em; display: grid; gap: 7px; }
.product li { font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--body); }
.product li::marker { color: var(--accent); }
.product .links { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 8px; }
.product .links a {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; padding: 9px 15px;
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
  transition: border-color .16s ease, color .16s ease;
}
.product .links a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------- the price model --- */
/* This was the distance tariff. The delivery fee is now a number the vendor
   enters on the order itself, so the block lists how that works and ends on
   a still of the amount picker the Vendor app actually shows. */

.price-model {
  border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  background: var(--surface); overflow: hidden;
}
.price-row {
  display: grid; gap: 5px 22px; padding: 22px 26px;
  border-block-end: 1px solid var(--rule-soft);
}
.price-row:last-child { border-block-end: none; }
@media (min-width: 700px) { .price-row { grid-template-columns: 220px 1fr; } }
.price-row dt { font-family: var(--display); font-weight: 600; color: var(--ink); font-size: var(--fs-body); }
.price-row dd { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-ui); color: var(--body); }
.price-row code, .note code {
  font-family: var(--mono); font-size: var(--fs-micro); background: var(--surface-2);
  padding: 2px 6px; border-radius: 3px; color: var(--ink);
}

/* ---- the amount picker, held still ----
   Nothing here is interactive, so nothing here is a button: it is a picture
   of a control, drawn in the control's own colours. The selected chip is the
   one place on a light ground where Tech Blue is a fill rather than a line. */
.presets {
  margin: 26px 0 0; padding: 24px 26px;
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-card);
  display: grid; gap: 14px; justify-items: start;
  max-inline-size: 460px;
}
.presets figcaption {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
}
.presets-field { font-size: var(--fs-meta); color: var(--body); }
.presets-row { display: flex; flex-wrap: wrap; gap: 9px; }
.preset {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-body);
  min-inline-size: 76px; padding: 11px 16px; text-align: center;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--surface-2); color: var(--ink);
}
.preset-on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.preset-unit { font-weight: 500; font-size: var(--fs-small); opacity: .82; }

/* ------------------------------------------------------------- cta band --- */

.cta {
  background: var(--blue); color: var(--on-brand);
  border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 62px);
  display: grid; gap: 20px; justify-items: start;
  position: relative; overflow: hidden;
}
.cta::after {
  content: ''; position: absolute;
  inset-block-start: -40%; inset-inline-end: -8%;
  inline-size: 340px; block-size: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  pointer-events: none;
}
.cta h2 { color: #FFFFFF; max-inline-size: 20ch; position: relative; }
.cta p { color: var(--on-brand-muted); max-inline-size: 56ch; position: relative; }
.cta .hero-actions { margin-block-start: 8px; position: relative; }

/* -------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--blue-dark); color: var(--on-brand-muted);
  padding-block: 56px 34px; margin-block-start: 0;
}
.footer-grid { display: grid; gap: 34px; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.footer-grid h4 {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--on-brand-label); margin-block-end: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-grid a {
  color: var(--on-brand-muted); text-decoration: none; font-size: var(--fs-meta);
  transition: color .16s ease;
}
.footer-grid a:hover { color: var(--on-brand); }
.footer-brand .mark { background-color: #FFFFFF; margin-block-end: 16px; }
.footer-brand p { font-size: var(--fs-meta); max-inline-size: 34ch; }
.footer-base {
  margin-block-start: 44px; padding-block-start: 22px;
  border-block-start: 1px solid var(--on-brand-rule);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  font-family: var(--display); font-size: var(--fs-micro); color: var(--on-brand-muted);
}

/* ======================================================= legal document === */

.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; padding-block-end: 90px; }

.legal-head { padding-block: 56px 26px; border-block-end: 2px solid var(--ink); }
.legal-head h1 { font-size: var(--fs-h1-doc); margin-block: 16px 18px; }
.legal-head .lede { margin-block-end: 30px; }
.stamps { display: flex; flex-wrap: wrap; gap: 12px 36px; font-family: var(--display); }
.stamps b {
  display: block; font-weight: 500; font-size: var(--fs-micro); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--voice); margin-block-end: 4px;
}
.stamps span { font-size: var(--fs-meta); color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.legal-rail { display: none; }
@media (min-width: 1080px) {
  .legal { grid-template-columns: 236px minmax(0, 1fr); }
  .legal-head { grid-column: 1 / -1; }
  .legal-rail {
    display: block; grid-column: 1; position: sticky; inset-block-start: 92px;
    align-self: start; padding-block-start: 54px;
  }
  .legal-body { grid-column: 2; }
}
.legal-rail .rail-title {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
  padding-block-end: 12px; border-block-end: 1px solid var(--rule); margin-block-end: 14px;
}
.legal-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legal-rail a {
  display: grid; grid-template-columns: 26px 1fr; gap: 8px;
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  line-height: var(--lh-head); color: var(--muted); text-decoration: none;
  transition: color .16s ease;
}
.legal-rail a::before {
  content: attr(data-n); font-family: var(--display); font-size: var(--fs-micro);
  color: var(--voice); padding-block-start: 2px;
}
.legal-rail a:hover { color: var(--ink); }
.legal-rail a[aria-current="true"] { color: var(--accent); }

.legal-body { max-inline-size: 70ch; padding-block-start: 8px; }
.legal-body section { padding-block-start: 52px; scroll-margin-block-start: 96px; }
.legal-body h2 { font-size: var(--fs-h2-sm); margin-block-end: 18px; position: relative; }
.legal-body h2::before {
  content: attr(data-n); display: block; margin-block-end: 9px;
  font-family: var(--display); font-weight: 500; font-size: var(--fs-micro);
  color: var(--voice); letter-spacing: var(--tr-label);
}
@media (min-width: 1080px) {
  .legal-body h2::before { position: absolute; inset-inline-start: -62px; inset-block-start: .5em; margin: 0; }
}
.legal-body h3 { margin-block: 30px 10px; font-size: var(--fs-h3); }
.legal-body p { margin-block-end: 16px; }
.legal-body ul { margin: 0 0 16px; padding-inline-start: 1.15em; }
.legal-body li { margin-block-end: 9px; }
.legal-body li::marker { color: var(--accent); }

.summary {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 30px 32px; margin-block-start: 48px;
  box-shadow: var(--shadow-card);
}
.summary h2 { font-size: var(--fs-h3-lg); margin-block-end: 14px; }
.summary h2::before { position: static; margin: 0 0 8px; }
.summary ul { margin-block-end: 0; }
.summary li { font-size: var(--fs-meta); }

.commitment {
  background: var(--voice-bg); border-inline-start: 3px solid var(--voice);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px; margin-block: 26px;
}
[dir="rtl"] .commitment { border-radius: var(--radius) 0 0 var(--radius); }
.commitment .label {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--voice); margin-block-end: 10px;
}
.commitment p:last-child { margin-block-end: 0; }

.table-wrap {
  overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--surface); margin-block: 22px 26px;
}
table { inline-size: 100%; min-inline-size: 620px; border-collapse: collapse; font-family: var(--display); font-size: var(--fs-meta); line-height: var(--lh-ui); }
caption {
  caption-side: top; text-align: start;
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
  padding: 15px 18px 13px; border-block-end: 1px solid var(--rule);
}
th {
  text-align: start; font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
  padding: 13px 18px; border-block-end: 1px solid var(--rule); white-space: nowrap;
}
td { padding: 14px 18px; border-block-end: 1px solid var(--rule-soft); vertical-align: top; color: var(--body); }
tr:last-child td { border-block-end: none; }
td:first-child { font-weight: 600; color: var(--ink); min-inline-size: 168px; }
td .field {
  display: block; font-family: var(--mono); font-size: var(--fs-micro);
  font-weight: 400; color: var(--muted); margin-block-start: 5px;
  direction: ltr; unicode-bidi: embed;
}

.contact-box {
  background: var(--surface-2); border-radius: var(--radius-lg);
  padding: 26px 30px; margin-block-start: 24px; font-family: var(--display); font-size: var(--fs-meta);
}
.contact-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; }
.contact-box dt {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted); padding-block-start: 3px;
}
.contact-box dd { margin: 0; color: var(--ink); }

/* Latin runs (emails, package ids, URLs) inside Arabic prose. */
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }

.skip {
  position: absolute; inset-inline-start: -9999px;
  background: var(--accent); color: #FFFFFF; padding: 10px 18px;
  border-radius: var(--radius); font-family: var(--display); font-weight: 600;
}
.skip:focus { inset-inline-start: 12px; inset-block-start: 12px; z-index: 100; }

/* ---------------------------------------------------- Arabic typography --- */
/* Arabic script is cursive: letter-spacing severs the joins between letters,
   which is what turned the product-card tags into "تـطبيق". text-transform:
   uppercase is a no-op on Arabic and only ever costs. Both are stripped
   wherever Arabic can appear.
   The selector is :lang(ar), not [dir="rtl"], because the lone "العربية"
   switcher sits inside the *English* pages — it needs the same treatment
   while everything around it keeps its tracking. */

:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) h4,
:lang(ar) .eyebrow, :lang(ar) .hero-slogan, :lang(ar) .hero-slogan b,
:lang(ar) .capsule dt, :lang(ar) .step .n, :lang(ar) .product .tag,
:lang(ar) .product .links a, :lang(ar) .footer-grid h4, :lang(ar) .footer-base,
:lang(ar) .stamps, :lang(ar) .stamps b, :lang(ar) .rail-title,
:lang(ar) .legal-rail a, :lang(ar) .commitment .label,
:lang(ar) .contact-box dt, :lang(ar) caption, :lang(ar) th,
:lang(ar) td:first-child, :lang(ar) .btn, :lang(ar) .brand span,
:lang(ar) .price-row dt, :lang(ar) .card h3, :lang(ar) .summary h2,
:lang(ar) .presets figcaption, :lang(ar) .preset,
:lang(ar) .seg a, .seg a:lang(ar) {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .legal-body h2::before,
:lang(ar) .legal-rail a::before {
  letter-spacing: 0;
}

/* Latin runs keep their own tracking inside Arabic prose. */
:lang(ar) .ltr { letter-spacing: normal; }

/* Neither brand face carries arrow glyphs (U+2190/2192), so inline read-more
   arrows are drawn rather than typed — and mirrored for RTL. */
.arw { inline-size: .82em; block-size: .82em; vertical-align: -.08em; }
[dir="rtl"] .arw { transform: scaleX(-1); }