@charset "UTF-8";
/* ============================================================
   Arctrack — UI Kit Tokens
   Field-grounded · Plex Sans + Plex Sans Arabic · Light + Dark
   ============================================================ */


:root,
[data-theme="light"] {
  /* ---------- Surfaces (warm paper) ---------- */
  --bg:        #f5f1e8;        /* paper */
  --surface:   #fbf8f1;        /* card on paper */
  --surface-2: #efe9db;        /* recessed */
  --surface-3: #e8e1cf;        /* tinted */
  --overlay:   rgba(29, 36, 51, 0.55);

  /* ---------- Ink ---------- */
  --ink:       #1d2433;
  --ink-2:     #3a4358;
  --ink-3:     #6b7388;
  --ink-4:     #9a9f8c;        /* on tinted paper */

  /* ---------- Rules / strokes ---------- */
  --rule:      #d8d1bd;
  --rule-2:    #c9c0aa;
  --rule-strong: #1d2433;

  /* ---------- Brand accent: terracotta ---------- */
  --accent:        #c95a3a;    /* clay */
  --accent-press:  #a8472b;
  --accent-soft:   #e6b39d;
  --accent-tint:   #f4dccd;
  --accent-ink:    #fbf8f1;    /* text on accent */

  /* ---------- On-inverse (text + lines on tiles where bg = --ink) ----------
     In light theme, --ink is dark navy → labels are paper-tinted (RGB of --bg).
     In dark theme, --ink flips to cream → labels need to flip to ink-tinted.
     One token, one flip, every existing alpha preserved. */
  --on-inverse-rgb: 245, 241, 232;

  /* ---------- Semantic ---------- */
  --positive:      #4a7a4a;
  --positive-tint: #d6e2cf;
  --warn:          #c98a3a;
  --warn-tint:     #f0dcb6;
  --danger:        #b03a3a;
  --danger-tint:   #ecc6c1;
  --info:          #3a6a8a;
  --info-tint:     #cad8e2;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 0 rgba(40,30,10,.04), 0 1px 2px rgba(40,30,10,.06);
  --shadow-2: 0 1px 0 rgba(40,30,10,.04), 0 4px 12px rgba(40,30,10,.08);
  --shadow-3: 0 2px 0 rgba(40,30,10,.04), 0 12px 28px rgba(40,30,10,.12);

  /* ---------- Focus ring ---------- */
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

[data-theme="dark"] {
  --bg:        #14171f;
  --surface:   #1c2030;
  --surface-2: #232838;
  --surface-3: #2c3144;
  --overlay:   rgba(0, 0, 0, 0.65);

  --ink:       #f0ece1;
  --ink-2:     #c9c5b8;
  --ink-3:     #8e8a7c;
  --ink-4:     #5e5b51;

  --rule:      #2e3346;
  --rule-2:    #3c425a;
  --rule-strong: #f0ece1;

  --accent:        #e07555;
  --accent-press:  #c45a3a;
  --accent-soft:   #6b3422;
  --accent-tint:   #3a1f15;
  --accent-ink:    #14171f;

  --on-inverse-rgb: 29, 36, 51;

  --positive:      #7eaa6c;
  --positive-tint: #2a3a26;
  --warn:          #d9a767;
  --warn-tint:     #3a2e18;
  --danger:        #d97070;
  --danger-tint:   #3a1f1f;
  --info:          #6fa3c0;
  --info-tint:     #1d2c38;

  --shadow-1: 0 1px 0 rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 1px 0 rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.5);
  --shadow-3: 0 2px 0 rgba(0,0,0,.3), 0 12px 28px rgba(0,0,0,.6);

  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ---------- Type ---------- */
:root {
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;
  --font-ar:   "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Compact density scale */
  --t-xxs: 10px;
  --t-xs:  11px;
  --t-sm:  12px;
  --t-md:  13px;
  --t-base:14px;
  --t-lg:  16px;
  --t-xl:  18px;
  --t-2xl: 22px;
  --t-3xl: 28px;
  --t-4xl: 36px;
  --t-5xl: 48px;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.45;

  /* Spacing scale (4-step compact) */
  --s-1:  2px;
  --s-2:  4px;
  --s-3:  6px;
  --s-4:  8px;
  --s-5:  10px;
  --s-6:  12px;
  --s-7:  14px;
  --s-8:  16px;
  --s-10: 20px;
  --s-12: 24px;
  --s-14: 28px;
  --s-16: 32px;
  --s-20: 40px;

  /* Radii */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 12px;
  --r-6: 16px;
  --r-pill: 999px;

  /* Touch targets */
  --tap: 44px;          /* hit target floor */
  --tap-comfort: 48px;
}

[dir="rtl"] {
  font-family: var(--font-ar);
}

/* Numerals — keep latin tabular for money */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Arctrack Engineer Spine — phone-screen styles
   Tokens come from kit/tokens.css */


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #14171f;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Phone frame — 390 × 844 (iPhone 14 logical)
   ============================================================ */

.ph-frame {
  width: 390px;
  height: 844px;
  background: var(--bg);
  color: var(--ink);
  border-radius: 48px;
  padding: 6px;
  position: relative;
  box-shadow:
    0 0 0 2px #2a2f42,
    0 30px 60px rgba(0,0,0,.4);
  font-size: var(--t-base);
  line-height: var(--lh-body);
}

.ph-screen {
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.ph-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 32px;
  background: #000;
  border-radius: 18px;
  z-index: 20;
}

.ph-status {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex-shrink: 0;
}
.ph-status-right { display: inline-flex; gap: 5px; align-items: center; color: var(--ink); }
.ph-status-right svg { display: block; }

/* ============================================================
   App bar
   ============================================================ */

.ph-appbar {
  padding: 8px 16px 12px;
  background: var(--bg);
  flex-shrink: 0;
}
.ph-appbar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ph-appbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph-appbar-title {
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.ph-appbar-sub {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.ph-appbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.ph-iconbtn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
}
.ph-iconbtn .ic { width: 18px; height: 18px; }

/* ============================================================
   Tab bar (bottom)
   ============================================================ */

.ph-tabbar {
  display: flex;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  padding: 6px 4px 24px;  /* home indicator gap */
  flex-shrink: 0;
}
.ph-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 0;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
}
.ph-tab .ic {
  width: 22px; height: 22px;
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph-tab.active { color: var(--accent); }

/* ============================================================
   FAB
   ============================================================ */

/* ============================================================
   Generic ic
   ============================================================ */

svg.ic, .ic {
  stroke: currentColor;
  stroke-width: 1.75;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Sync pill
   ============================================================ */

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 9px;
}
.sync-pill .sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.sync-pill.state-synced .sync-dot { background: var(--positive); }
.sync-pill.state-syncing .sync-dot { background: var(--info); animation: pulse 1.4s infinite; }
.sync-pill.state-pending .sync-dot { background: var(--warn); }
.sync-pill.state-offline .sync-dot { background: var(--danger); }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ============================================================
   Money
   ============================================================ */

.tabular {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.tabular .cur { font-size: 0.78em; color: var(--ink-3); margin-inline-start: 1px; }

/* ============================================================
   Scrollable body
   ============================================================ */

.ph-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ph-body::-webkit-scrollbar { width: 0; }

/* ============================================================
   Section headers
   ============================================================ */

.sec-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 4px;
}
.sec-h-title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 500;
}
.sec-h-action {
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}

/* ============================================================
   Cards / surfaces
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px;
}

/* ============================================================
   KPI tiles (Home)
   ============================================================ */
/* In dark mode the .featured tile bg flips to cream, so the green has to darken. */
[data-theme="dark"] .kpi-c.featured .delta.pos { color: #3e6b3e; }

/* ============================================================
   Project card (compact)
   ============================================================ */

/* ============================================================
   Chip
   ============================================================ */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.accent { background: var(--accent-tint); border-color: var(--accent-soft); color: var(--accent-press); }
.chip.solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip.pos { background: var(--positive-tint); border-color: var(--positive); color: var(--positive); }

/* ============================================================
   Transaction row
   ============================================================ */

/* ============================================================
   Filter chips bar
   ============================================================ */

/* ============================================================
   Date group header
   ============================================================ */

/* ============================================================
   Search bar
   ============================================================ */

/* ============================================================
   Project header (overview screen)
   ============================================================ */

/* ============================================================
   Phase row
   ============================================================ */

.phase {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phase-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--ink-2);
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.phase-progress { display: flex; align-items: center; gap: 8px; }
.phase-progress .bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.phase-progress .bar > i { display: block; height: 100%; background: var(--accent); }
.phase-progress .pct { font-family: var(--font-mono); font-size: 11px; font-weight: 600; min-width: 32px; text-align: end; }

/* ============================================================
   Transaction create form
   ============================================================ */

/* type selector (income/expense) */

/* form rows */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
}
.form-row:last-child { border-bottom: none; }
.form-row .ic-lead {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.form-row .ic-lead .ic { width: 16px; height: 16px; }
.form-row .lbl { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 500; }
.form-row .val { font-size: 14px; font-weight: 500; color: var(--ink); margin-top: 1px; line-height: 1.25; }
.form-row .grow { flex: 1; min-width: 0; }

/* attachments */

/* CTA bar */

/* ============================================================
   Receipt preview screen
   ============================================================ */
[data-theme="dark"] .receipt-page {
  box-shadow: 0 0 0 1px var(--rule), 0 8px 24px rgba(0,0,0,.3);
}

/* ============================================================
   Bottom action sheet (receipt page)
   ============================================================ */

/* ============================================================
   Activity feed (small)
   ============================================================ */

.activity {
  display: flex;
  flex-direction: column;
}

/* ============================================================
   Numpad keyboard (transaction create)
   ============================================================ */

/* ============================================================
   Header back button
   ============================================================ */
.back-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  color: var(--ink-2);
}
.back-btn .ic { width: 18px; height: 18px; }

/* RTL flips chevrons */
[dir="rtl"] .back-btn .ic { transform: scaleX(-1); }
[dir="rtl"] .form-row .chev .ic { transform: scaleX(-1); }

/* ============================================================
   AI prefill mark (per-field) + soft banner
   ============================================================ */

/* ============================================================
   Empty-state for activity feed (calm prompt)
   ============================================================ */

/* ============================================================
   Inbox rows
   ============================================================ */

/* ============================================================
   Claim hero (claimed vs measured)
   ============================================================ */

.claim-hero {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin-top: 4px;
}
.claim-col {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 14px;
  text-align: start;
}
.claim-col.measured {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.claim-col.measured .claim-lbl { color: rgba(var(--on-inverse-rgb), .6); }
.claim-col.measured .claim-amt { color: rgba(var(--on-inverse-rgb), .85); }
.claim-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 500;
}
.claim-val {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -.03em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  line-height: 1;
}
.claim-val .unit { font-size: 14px; color: var(--ink-3); margin-inline-start: 3px; font-weight: 500; }
.claim-col.measured .claim-val .unit { color: rgba(var(--on-inverse-rgb), .6); }
.claim-amt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.claim-vs {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.claim-delta {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--warn-tint);
  border: 1px solid var(--warn);
  border-radius: 12px;
  padding: 10px 12px;
}
.claim-delta .dt-icn { color: var(--warn); flex-shrink: 0; margin-top: 1px; }
.claim-delta .dt-icn .ic { width: 16px; height: 16px; }
.claim-delta .dt-ttl { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.claim-delta .dt-sub { font-size: 11px; color: var(--ink-2); margin-top: 2px; font-family: var(--font-mono); }

.claim-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ca-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  cursor: pointer;
}
.ca-btn .ic { width: 16px; height: 16px; }
.ca-btn.approve {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.ca-btn.small { justify-content: center; height: 40px; font-size: 12px; }

/* ============================================================
   Rate toggle (P&L)
   ============================================================ */

.rate-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.rate-toggle button {
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 9px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  text-align: start;
}
.rate-toggle button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.rate-toggle .rate-num {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0;
}
.rate-toggle button.on .rate-num { color: var(--ink-2); }

/* ============================================================
   P&L hero
   ============================================================ */

.pnl-hero { display: flex; flex-direction: column; gap: 8px; }
.pnl-row { display: flex; justify-content: space-between; align-items: baseline; }
.pnl-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  font-weight: 500;
}
.pnl-val { font-family: var(--font-mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pnl-val.neg { color: var(--accent-press); }
.pnl-val.pos { color: var(--positive); font-size: 22px; }
.pnl-row.total { padding-top: 8px; border-top: 1px solid var(--rule); margin-top: 2px; }
.pnl-conv {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.pnl-conv-meta { color: var(--ink-3); }

/* ============================================================
   P&L phase rows
   ============================================================ */

.pnl-phase {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pnl-phase:last-child { border-bottom: none; }
.pnl-phase-head { display: flex; align-items: center; gap: 8px; }
.pnl-phase-name { font-size: 13px; font-weight: 600; flex: 1; }
.pnl-phase-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}


/* ============================================================
   ONBOARDING — splash, signup, workspace, first project, day-1
   ============================================================ */

/* Language pick rows */

/* Phone field with country code */

/* Mode selector (solo / team) */

/* Demo data banner */

/* Day-1 welcome card */

/* Day-1 step rows */

[dir="rtl"] .ob-step .chev .ic,
[dir="rtl"] .ob-demo span:last-child { transform: scaleX(-1); }


/* ============================================================
   ONBOARDING — compact inline CTA (sign-up, workspace, first project)
   ============================================================ */
[dir="rtl"] .ob-cta-arr { transform: scaleX(-1); display: inline-block; }


/* ============================================================
   CLIENT PORTAL — desktop web surface
   Lighter brand presence, more whitespace, two-tone neutral
   ============================================================ */

/* Top bar */

/* Body */

/* Side rail */

/* Content area */

/* Eyebrow + headers */

/* Buttons */

/* Section title */

/* Hero — claim awaiting card */

/* Project cards grid */

/* Activity rows */

/* ===========================================================
   PROJECT ROOM
   =========================================================== */

/* Tabs */

/* Phase timeline */

/* Photos grid */

/* Side rail cards */

/* ===========================================================
   CLAIM REVIEW
   =========================================================== */

/* Line items table */

/* Claim foot — decision area */

/* ===========================================================
   DOCUMENTS
   =========================================================== */

/* ===========================================================
   PHONE FALLBACK (CP5)
   =========================================================== */


/* ============================================================
   CLIENT MODE — invite-only mobile (screens 15-20)
   ============================================================ */

/* Invite landing (web, pre-install) */

/* Engineer strip on project view */

/* Client tab bar dot */
.ph-tab { position: relative; }

/* Bell button */

/* Approval banner — dark hero */
[dir="rtl"] .cl-ab-arr .ic { transform: scaleX(-1); }

/* Project card on home */
[dir="rtl"] .cl-proj-arr .ic { transform: scaleX(-1); }

/* Project header meta line */

/* KPI grid (4-up) */

/* Pending-approval card (inline CTA on project) */
[dir="rtl"] .cl-pending-arr .ic { transform: scaleX(-1); }

/* Phase compact timeline */
/* spine */

/* Photo strip */

/* Claim review hero */

/* Disputed banner */

/* Comments thread */
[dir="rtl"] .cl-msg-send .ic { transform: scaleX(-1); }

/* Decision bar (sticky bottom on claim review) */

/* Document categories */
[dir="rtl"] .cl-doc-row .chev .ic { transform: scaleX(-1); }

/* Approvals tab */
[dir="rtl"] .cl-appr-arr .ic { transform: scaleX(-1); }

/* History row */


/* ============================================================
   PHASE A — Engineer-side client surface (screens 21-23)
   ============================================================ */

/* Project tabs strip */

/* Client identity card */

/* Stat trio */

/* Activity timeline */

/* Permissions card */

/* Invite — role grid */

/* Invite — channel grid */

/* Invite — preview */

/* Inbox lens chips */

/* Inbox event row */
[dir="rtl"] .pa-ev-arr .ic { transform: scaleX(-1); }
[dir="rtl"] .pa-act-btn .ic { transform: none; }

/* Form card reused on invite */
[dir="rtl"] .form-card .chev .ic { transform: scaleX(-1); }


/* ============================================================
   PHASE B — Variations / VOs (screens 24-27)
   ============================================================ */

/* Hero block on Create VO */

/* Cost line items */

/* Evidence row */

/* VO list — rollup */

/* VO list rows */

/* FAB on VO list */
[dir="rtl"] .vo-fab { right: auto; left: 18px; }

/* VO review reason card */

/* Contract value hero */

/* Bar viz */

/* Pending impact note */

/* History timeline */

/* Bottom CTA on contract value */


/* ============================================================
   PHASE C — Retention + Mark-as-paid + Receipt (screens 28-30)
   ============================================================ */

/* Retention hero */
.rt-hero-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(251,249,244,.6);
  font-weight: 500;
}

/* DLP progress */
.rt-prog-bar {
  height: 6px;
  background: rgba(251,249,244,.12);
  border-radius: 3px;
  overflow: hidden;
}
.rt-prog-bar .elapsed {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Next reminder card */

/* Held lines */

/* DLP rules */

/* Defect hold flag */
[dir="rtl"] .rt-claim-now .chev .ic { transform: scaleX(-1); }

/* PAY screen */
[dir="rtl"] .pay-proof-tick { right: auto; left: -3px; }

/* Apply against */

/* Receipt sends note */

/* RECEIPT paper */

/* Distribution status */


/* ============================================================
   PHASE D — Subs · Push spec · Empty states (screens 31-35)
   ============================================================ */

/* Sub row */

/* Sub scope card (dark hero, scoped) */

/* Sub claim stack */

/* ============================================================
   PUSH NOTIFICATION SPEC PAGE
   ============================================================ */

/* ============================================================
   EMPTY STATES SAMPLER
   ============================================================ */


/* ============================================================
   PHASE E — Contracts + Defects (screens 36-39)
   ============================================================ */

/* Contract type cards */

/* Linked contract docs */

/* BoQ table */

.sec-h-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* DEFECTS */
[dir="rtl"] .def-arr .ic { transform: scaleX(-1); }


/* ============================================================
   PHASE F — Settings · Reports · Export · Photos (40-43)
   ============================================================ */

/* SETTINGS */
[dir="rtl"] .set-row-chev .ic { transform: scaleX(-1); }

/* Plan card */

/* REPORTS */

/* EXPORT */
[dir="rtl"] .exp-card.on::after { right: auto; left: 8px; }

/* PHOTOS */
[dir="rtl"] .photo-tag { left: auto; right: 6px; }
[dir="rtl"] .photo-time { right: auto; left: 6px; }
[dir="rtl"] .photo-fab { right: auto; left: 18px; }


/* ============================================================
   PHASE G — Documents · Cash · Time · Annotation (44-47)
   ============================================================ */

/* DOC VAULT */
[dir="rtl"] .dv-chev .ic { transform: scaleX(-1); }

/* CASH */

/* TIME ENTRY */

/* ANNOTATION */


/* ============================================================
   PHASE H — Sync · Conflict · Backup · Audit (48-51)
   ============================================================ */

/* SYNC */
.sy-banner {
  background: var(--ink);
  color: #FBF9F4;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sy-banner-ic {
  width: 36px; height: 36px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sy-banner-ic .ic { width: 18px; height: 18px; }
.sy-banner-ttl { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.sy-banner-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(251,249,244,.6);
  margin-top: 4px;
  letter-spacing: .02em;
  line-height: 1.5;
}

.sy-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0 14px;
}
.sy-list.synced { opacity: 0.6; }
.sy-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.sy-row:last-child { border-bottom: none; }
.sy-ic {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink-2);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sy-row.ok .sy-ic { background: color-mix(in oklch, #2d6a4f, transparent 85%); color: #2d6a4f; }
.sy-ic .ic { width: 14px; height: 14px; }
.sy-ttl { font-size: 13px; font-weight: 500; color: var(--ink); }
.sy-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; letter-spacing: .02em; }
.sy-amt { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
.sy-pulse {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--accent);
  flex-shrink: 0;
}

.sy-storage {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.sy-storage > div:first-child { flex: 1; }
.sy-clear {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.sy-clear .ic { width: 14px; height: 14px; }

/* CONFLICT */

/* BACKUP */

/* AUDIT */


/* ============================================================
   PHASE I — Marketing · Email · RTL · Handover (52-55)
   ============================================================ */

/* MARKETING LANDING */

/* EMAIL TEMPLATES */

/* RTL SHOWCASE */

/* ENGINEERING HANDOVER */


/* ============================================================
   PHASE J — Pitch · App Store · Press (56-58)
   ============================================================ */

/* PITCH DECK */

/* Cover slide */

/* Solution / features */

/* Market rings */

/* Why now */

/* Traction */

/* Business model */

/* Competition */

/* Team */

/* Ask */

/* APP STORE */

/* PRESS */

/* arctrack.net — the landing page's own styles.
 *
 * This is the \3c style> block of the Claude Design prototype ("Arctrack Landing Page v2.html"),
 * verbatim, on top of tokens.css + spine.css. The build concatenates the three and purges
 * against the prerendered HTML, so a rule only survives if the markup uses it.
 *
 * What differs from the prototype is commented in place and falls into two groups. The port
 * itself: the language pill is links not buttons, the QR is an inline <svg>, the App Store
 * badge is a dimmed placeholder, and the reveal animation is gated on <html class="js">. Then
 * the review of the shipped site, which the prototype's canvas never had to pass: contrast —
 * the design's greys and clay fall short of 4.5:1 at body size on paper, so those values are
 * the same hue darkened only as far as the ratio needs; phones — the header, footer, badges
 * and proof strip did not fit 360px; Arabic — mono labels have no Arabic glyphs and letter-
 * spacing pulls joined letters apart; and a11y — a skip link, no motion for people who asked
 * for none, and a FAQ glyph that is not read aloud. Then the polish pass on the critique:
 * Arabic inside the phone mocks, the floats stacked under the phones instead of hidden, small
 * text lifted to the 11px floor, 44px tap targets, and the "Coming soon" badge demoted to an
 * outline so Google Play is the one action. And the review of that pass: the floats anchored
 * to the phone's edge and sliding in on narrow desktops, the Arabic currency face page-wide,
 * and the language pill's 44px hit area without its 44px pill. Everything else stays as
 * designed — fix the design source, not this file.
 */

html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
/* Contrast: var(--accent) #c95a3a on paper is 3.72:1 (the 404 page's links). #b54f32 is the
   same hue at 4.51:1 and still lighter than the --accent-press hover. */
a{color:#b54f32;text-decoration:none;}
a:hover{color:var(--accent-press);}
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;}
[dir="rtl"] .latin{font-family:var(--font-sans);}
/* Money on the page itself — the hero float, the AI toast and voice chip, the bridge and Odoo
   rows, the scan mock's receipt — goes through `Money` so /ar/ shows ر.س and ج.م where the
   design had literal SAR/EGP beside them. spine.css styles `Money`'s `.tabular` as the app's
   mono with a smaller grey currency; these figures were set in the page's sans with the code
   at full size, and keep that — only the hero float ever had a small grey code, and gets it back. */
.latin .tabular{font-family:inherit;}
.latin .tabular .cur{font-size:inherit;color:inherit;margin:0;}
.float .fv .cur{font-size:12px;color:var(--ink-3);}

.nav{position:sticky;top:0;z-index:50;background:rgba(29,36,51,.92);backdrop-filter:blur(10px);border-bottom:1px solid rgba(245,241,232,.08);}
.nav .wrap{display:flex;align-items:center;gap:28px;height:66px;}
.nav .brand{display:flex;align-items:center;gap:11px;color:#fbf8f1;font-size:19px;font-weight:600;letter-spacing:-.01em;}
.nav .brand i{color:#e0714f;font-style:normal;}
.nav .links{display:flex;gap:26px;margin-inline-start:auto;}
.nav .links a{color:rgba(245,241,232,.72);font-size:13.5px;font-weight:500;}
.nav .links a:hover{color:#fbf8f1;}
.nav .langs{display:flex;border:1px solid rgba(245,241,232,.25);border-radius:999px;}
/* The pill is two <a> links (/ and /ar/), not <button>s: each language is its own prerendered
   page, so there is no client-side state to toggle. Same declarations, retargeted. */
/* A 44px thumb target without a 44px pill: the link keeps the design's 30px height and a
   `::before` with no paint reaches 7px above and below it (generated content is part of the
   anchor's hit area). Making the link itself 44px tall drew a 46px pill beside a 36px primary
   CTA, and the language switch read as the larger control. The pill's `overflow:hidden` had
   to go for the pseudo-element to be clickable outside the link, so each link rounds its own
   outer corners instead, and the highlighted half-pill looks as it did. */
.nav .langs a{position:relative;background:none;border:none;color:rgba(245,241,232,.65);font-family:var(--font-sans);font-size:12px;font-weight:600;display:inline-flex;align-items:center;padding:6px 14px;cursor:pointer;}
.nav .langs a::before{content:"";position:absolute;inset:calc((100% - 44px) / 2) 0;}
.nav .langs a:first-child{border-start-start-radius:999px;border-end-start-radius:999px;}
.nav .langs a:last-child{border-start-end-radius:999px;border-end-end-radius:999px;}
.nav .langs a.on{background:#fbf8f1;color:#1d2433;}
/* The Arabic pill label is Arabic on both pages; the link's Plex Sans has no Arabic glyphs.
   Same for the Arabic words the English copy carries in a `<bdi lang="ar">` — "مستخلص" in a
   mini card and a step, "العربية" in the proof strip's mono — which the OS font drew. */
.nav .langs a[lang="ar"],bdi[lang="ar"]{font-family:var(--font-ar);}
/* `main[id]` is the skip link's target; without the margin the sticky header would sit on it. */
section[id],div[id],main[id]{scroll-margin-top:72px;}
/* Contrast: paper on var(--accent) is 3.95:1; #bb5233 is the same clay at 4.53:1. The hover
   stays --accent-press, which is darker still. Same pair for .step .snum, .ve-ok, .cta-band. */
.nav .cta{white-space:nowrap;background:#bb5233;color:#fbf8f1;font-size:13.5px;font-weight:600;padding:9px 18px;border-radius:999px;}
.nav .cta:hover{background:var(--accent-press);color:#fbf8f1;}
/* The skip link is the page's first tab stop. Parked off-screen inside the sticky header (its
   containing block), it slides in only on focus, so sighted mouse users never see it. */
.skip{position:absolute;top:12px;inset-inline-start:-999px;z-index:60;background:#fbf8f1;color:#1d2433;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:999px;}
.skip:focus{inset-inline-start:12px;}

.hero{background:#1d2433;color:#fbf8f1;overflow:hidden;position:relative;}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 78% 30%,rgba(224,113,79,.14),transparent 70%);pointer-events:none;}
/* The grid columns flip under dir="rtl" but a gradient position is physical: without this the
   glow sits behind the headline on /ar/ and the phone stage is unlit. */
[dir="rtl"] .hero::before{background:radial-gradient(700px 500px at 22% 30%,rgba(224,113,79,.14),transparent 70%);}
.hero .wrap{display:grid;grid-template-columns:1fr .95fr;gap:40px;align-items:center;position:relative;}
.hero-copy{padding:88px 0 88px;}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#e0714f;}
/* Contrast: #e0714f on paper is 2.80:1 — it was chosen for the navy hero, where it passes.
   On the light sections the same hue has to drop to #be4622 to reach 4.5:1; the hero and AI
   band keep the original. */
.sec:not(.ai) .eyebrow{color:#be4622;}
/* Arabic in the mono stack: IBM Plex Mono has no Arabic glyphs, so the browser substitutes
   whatever system font does — a different face from the rest of the page — and the tracking
   meant for uppercase Latin pulls the joined letters apart. The design already did this for
   .float .fl, .b-lab, .dk-lbl, .ai-trust and .o-partner; these are the labels it missed. */
[dir="rtl"] .eyebrow:not(.latin){font-family:var(--font-ar);letter-spacing:0;}
[dir="rtl"] .eyebrow.latin{font-family:var(--font-mono);letter-spacing:.04em;}
.hero h1{margin:18px 0 0;font-size:50px;line-height:1.08;font-weight:700;letter-spacing:-.025em;text-wrap:balance;}
[dir="rtl"] .hero h1{letter-spacing:0;line-height:1.28;font-size:44px;}
.hero h1 em{font-style:normal;color:#e0714f;}
.hero .sub{margin:22px 0 0;font-size:17px;line-height:1.65;color:rgba(245,241,232,.78);max-width:52ch;}
.badges{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.badge{display:flex;align-items:center;gap:11px;background:#fbf8f1;color:#1d2433;border-radius:12px;padding:10px 18px 10px 15px;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .15s ease;}
[dir="rtl"] .badge{padding:10px 15px 10px 18px;}
.badge:hover{transform:translateY(-2px);color:#1d2433;}
.badge svg{width:26px;height:26px;flex:none;}
.badge .bt{line-height:1.15;}
/* Contrast: #6b7388 (--ink-3) on the badge's paper is 4.47:1; #676e82 is the same grey at
   4.79:1 (4.51:1 on the darker page paper). The same value replaces --ink-3 wherever this file
   sets body-size text on paper or a card — the float cards are on white and pass as they are. */
.badge .bt small{display:block;font-size:11px;font-weight:500;color:#676e82;letter-spacing:.04em;text-transform:uppercase;}
[dir="rtl"] .badge .bt small{letter-spacing:0;}
.badge .bt b{font-size:16.5px;font-weight:600;letter-spacing:-.01em;}
/* iOS is not shipping: the App Store badge is a non-link <span> that reads "Coming soon". It
   was the same paper badge dimmed to .55, which read as a second, broken download button; now
   it is an outline on the band it sits on, so Google Play is THE action and this is a note.
   The Apple glyph carries `fill` as an attribute, which a `fill` declaration outranks. */
.badge.soon{background:transparent;border:1px solid rgba(251,248,241,.35);color:#fbf8f1;box-shadow:none;opacity:1;cursor:default;padding:9px 17px 9px 14px;}
[dir="rtl"] .badge.soon{padding:9px 14px 9px 17px;}
.badge.soon:hover{transform:none;color:#fbf8f1;}
.badge.soon .bt b{color:#fbf8f1;}
/* Contrast: .72 paper on navy is 8.1:1. */
.badge.soon .bt small{color:rgba(251,248,241,.72);}
.badge.soon svg{fill:#fbf8f1;}
/* Contrast: .45 paper on navy is 3.94:1; .5 is 4.52:1. */
.hero-note{margin-top:18px;font-family:var(--font-mono);font-size:12px;color:rgba(245,241,232,.5);text-wrap:balance;}
[dir="rtl"] .hero-note{font-family:var(--font-ar);}
/* At 360px the English line no longer fits: balanced, it breaks at a middot into two even
   lines instead of leaving "offline" alone on the second; each phrase is a no-wrap span so
   the break cannot fall at the hyphen in "Arabic-native". */
.hero-note span{white-space:nowrap;}
.qr{display:flex;align-items:center;gap:14px;background:rgba(251,248,241,.06);border:1px solid rgba(245,241,232,.16);border-radius:14px;padding:11px 16px;margin-top:20px;width:max-content;}
.qr .qbox{width:76px;height:76px;background:#fbf8f1;border-radius:8px;display:grid;place-items:center;flex:none;}
/* The QR is an inline <svg> baked at build time (the prototype's qrcodejs drew an <img>/<canvas>);
   without this the viewBox-only svg has no size and the 76px box cannot contain it. */
.qr .qbox img,.qr .qbox svg{width:64px;height:64px;display:block;}
.qr .qt{font-size:12px;line-height:1.5;color:rgba(245,241,232,.7);max-width:130px;}

.stage{align-self:center;display:flex;justify-content:center;padding:64px 0;position:relative;}
.stage-phone{position:relative;}
/* The mocks are pictures. spine.css gives every .ph-body a live scroller (the app's own
   behaviour), so the sync-queue mock, whose list is taller than its screen, captured wheel and
   touch scrolling on the page and showed a scrollbar in Firefox. Scoped to the landing-page
   scaler so spine.css stays verbatim. */
.ph-scaler .ph-body{overflow:hidden;}
/* Contrast: the app's --ink-3 (#6b7388) is 4.47:1 on its card surface and 4.2:1 on its paper —
   every small label in the five mocks. #676e82 is the grey this file already uses for the
   page's own body-size text (4.79:1 and 4.51:1); one token, scoped to the scaler, gives the
   mocks the same value without touching spine.css. Indistinguishable by eye. On the frame,
   not the scaler: tokens.css re-declares the palette on `[data-theme="light"]`, which the
   frame carries, so an ancestor's value would be overridden on the way down. */
.ph-scaler .ph-frame{--ink-3:#676e82;}
/* Arabic inside the mocks. spine.css sets the app's mono face and a tracking meant for uppercase
   Latin on some 330 labels and never zeroes either under RTL, so on /ar/ every label in the five
   screens rendered in a fallback face with its joined letters pulled apart. One rule, scoped to
   the scaler, for every label class the five screens draw; `.tabular` is excluded so a figure
   that shares a class (the sync mock's `07:14 → 09:18`) keeps the mono it has. */
[dir="rtl"] .ph-scaler :is(.ph-appbar-title,.ph-appbar-sub,.sec-h-title,.sec-h-action,.pnl-lbl,.pnl-conv,.pnl-conv-meta,.pnl-phase-name,.claim-lbl,.claim-vs,.claim-amt,.form-row .lbl,.form-row .val,.sync-pill,.rt-hero-lbl,.sy-banner-ttl,.sy-banner-sub,.sy-meta,.sy-ttl,.sy-clear,.rate-toggle button,.ca-btn,.chip,.dk-sub,.dt-ttl,.dt-sub,.vf-cap,.ph-tab span):not(.tabular){font-family:var(--font-ar);letter-spacing:0;}
/* Money's currency symbol is Arabic on /ar/ and sits inside the mono `.tabular`, so it takes
   the Arabic face alone — the digits beside it stay Western and mono, the app's own policy.
   Page-wide, not scoped to the mocks: the hero float, AI toast, voice chip, bridge and Odoo
   rows hold their amounts in `.latin` (Plex Sans, no Arabic glyphs), and scoped to the scaler
   this rule left those seven ر.س / ج.م to the OS font while the mocks' were Plex Arabic. */
[dir="rtl"] .cur{font-family:var(--font-ar);}
/* Pillar 02's claim screen (site/screens/claim.jsx) is not a design screen, and leans on two
   things spine.css never drew. Its hero columns hold money where the design's held a 3-digit
   quantity with a unit: a six-digit figure fills the 32px column, so `Money`'s currency drops
   under the digits at the label size instead of pushing past the card. And its status row is
   good news — sent, awaiting approval — so `.claim-delta`, which spine.css only tints for a
   warning, gets the positive pair. */
.ph-scaler .claim-val .tabular{display:inline-block;letter-spacing:inherit;}
.ph-scaler .claim-val .cur{display:block;font-size:11px;letter-spacing:0;margin:6px 0 0;font-weight:500;text-align:start;}
[dir="rtl"] .ph-scaler .claim-val .cur{text-align:right;}
.ph-scaler .claim-col.measured .claim-val .cur{color:rgba(var(--on-inverse-rgb),.6);}
.ph-scaler .claim-delta.pos{background:var(--positive-tint);border-color:var(--positive);}
.ph-scaler .claim-delta.pos .dt-icn{color:var(--positive);}
.float{position:absolute;background:#fff;color:var(--ink);border:1px solid var(--rule);border-radius:14px;box-shadow:0 16px 38px rgba(29,36,51,.22);padding:13px 16px;direction:ltr;z-index:3;animation:bob 5.5s ease-in-out infinite;}
[dir="rtl"] .float{direction:rtl;}
/* Where a float sits, sideways. `.stage-phone` is the phone's own box, so a card that hangs
   off the START side is placed by its END edge, `--fl-in` inside the phone's start edge, and
   the other way round for the END side: the card overlaps the frame by that constant whatever
   its copy measures, in either language. 10px reaches the bezel and the screen's own padding
   and never a label — the nearest text starts ~13px in (frame 6 + body 16, at the pillars'
   0.58 scale) — where the per-card, per-language pixel offsets tuned before either covered a
   figure (the SYNCED header lost its S, a toast sat on the sparkline's tip) or floated clear
   of the phone. `top`/`bottom` stay inline on each card. `width:max-content` because an
   absolute box placed by its far edge shrinks to fit the sliver of containing block left
   past that edge — 10px — and the hero cards, whose lines may wrap, folded to 99px. */
.stage-phone{--fl-in:10px;}
.float{width:max-content;}
.float.hang-start{inset-inline-end:calc(100% - var(--fl-in));}
.float.hang-end{inset-inline-start:calc(100% - var(--fl-in));}
/* Between 961 and ~1230px the wrap is narrower than a card hung this way needs, and a card
   past the viewport's edge is a horizontal scrollbar (`.sec` does not clip; the hero does, and
   cut the card instead). Rather than a breakpoint that snaps every card 100px in, each slides
   in by exactly its shortfall: `--fl-room` is the distance from the phone's edge to the
   viewport's, from the grid maths — wrap padding 40, the column's share of the wrap (.9 of
   two-fr for the pillars, .95 of 1.95 for the hero, 1 of 2.05 for the AI band), the phone's
   scaled width — as the larger of its two regimes, the wrap growing with the viewport up to
   1180px and centred beyond it; 12px under the true value, because `vw` counts a scrollbar
   the layout does not. The tuck is the card's width past that room, or nothing, so at 1280
   and above nothing moves. On `translate`, not `transform`: `bob` animates the latter. */
.hero .stage-phone{--fl-room:max(24.36vw - 142px, 50vw - 444px);}
.pillar .stage-phone{--fl-room:max(22.5vw - 117px, 50vw - 442px);}
.ai .stage-phone{--fl-room:max(24.4vw - 128px, 50vw - 430px);}
.float{--fl-tuck:max(0px, 100% - var(--fl-in) - var(--fl-room, 9999px));}
.float.hang-start{translate:var(--fl-tuck) 0;}
.float.hang-end{translate:calc(-1 * var(--fl-tuck)) 0;}
[dir="rtl"] .float.hang-start{translate:calc(-1 * var(--fl-tuck)) 0;}
[dir="rtl"] .float.hang-end{translate:var(--fl-tuck) 0;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.float:nth-child(3){animation-delay:1.4s;}
.float:nth-child(4){animation-delay:2.8s;}
@media (prefers-reduced-motion:reduce){.float{animation:none;}}
.float .fl{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
[dir="rtl"] .float .fl{letter-spacing:0;font-family:var(--font-ar);}
.float .fv{margin-top:5px;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.float .fs{margin-top:3px;font-size:11px;color:var(--ink-3);}
.float .bars{display:flex;gap:5px;margin-top:8px;align-items:flex-end;height:26px;}
.float .bars i{width:16px;border-radius:3px 3px 0 0;background:var(--accent-tint);}
.float .bars i.hot{background:var(--accent);}
.float .track{width:150px;height:6px;border-radius:3px;background:var(--surface-3);margin-top:8px;position:relative;overflow:hidden;}
.float .track i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:3px;background:var(--accent);}
.float .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);}
.float.toast{display:flex;align-items:center;gap:10px;}
.float .wa{width:34px;height:34px;border-radius:50%;background:#25d366;display:grid;place-items:center;flex:none;}
.float .wa svg{width:18px;height:18px;fill:#fff;}
.float .ok{width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent-press);display:grid;place-items:center;flex:none;font-size:16px;font-weight:700;}
.float .tt{font-size:12.5px;font-weight:600;line-height:1.35;white-space:nowrap;}
.float .ts{font-size:11px;color:var(--ink-3);white-space:nowrap;}

.strip{background:var(--surface-3);border-bottom:1px solid var(--rule);}
.strip .wrap{display:flex;gap:12px 34px;align-items:center;justify-content:center;padding:16px 40px;flex-wrap:wrap;}
.strip span{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:8px;}
[dir="rtl"] .strip span{font-family:var(--font-ar);}
.strip i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}

.sec{padding:96px 0 30px;}
.sec-intro{max-width:640px;margin:0 auto;text-align:center;}
/* The 404 page's heading is its <h1>; it wears the same size as the section h2s. */
.sec-intro h1,.sec-intro h2{margin:14px 0 0;font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
[dir="rtl"] .sec-intro h1,[dir="rtl"] .sec-intro h2{letter-spacing:0;line-height:1.35;}
.sec-intro p{margin:14px 0 0;font-size:16px;line-height:1.65;color:#676e82;}

.pillar{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;padding:74px 0;}
.pillar+.pillar{border-top:1px solid var(--rule);}
.pillar .stagebox{display:flex;justify-content:center;position:relative;padding:30px 0;}
.pillar-copy .fnum{font-family:var(--font-mono);font-size:12px;color:#b54f32;letter-spacing:.12em;}
.pillar-copy h3{margin:12px 0 0;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
[dir="rtl"] .pillar-copy h3{letter-spacing:0;line-height:1.35;}
.pillar-copy>p{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink-2);max-width:52ch;}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;}
.mini{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;}
.mini b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;}
.mini span{display:block;margin-top:6px;font-size:12.5px;line-height:1.55;color:#676e82;}

.how{background:var(--surface);border-block:1px solid var(--rule);}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;padding:56px 0 90px;}
.step{background:var(--bg);border:1px solid var(--rule);border-radius:18px;padding:28px;box-shadow:var(--shadow-1);}
.step .snum{width:40px;height:40px;border-radius:12px;background:#bb5233;color:#fbf8f1;display:grid;place-items:center;font-family:var(--font-mono);font-size:16px;font-weight:600;}
/* The step titles are <h3>: they sit under the section's <h2>, and an <h4> skipped a level. */
.step h3{margin:18px 0 0;font-size:18.5px;font-weight:600;letter-spacing:-.01em;}
.step p{margin:9px 0 0;font-size:14px;line-height:1.65;color:#676e82;}


.faq{max-width:760px;margin:0 auto;padding:50px 0 96px;display:flex;flex-direction:column;gap:12px;}
.faq details{background:var(--surface);border:1px solid var(--rule);border-radius:14px;overflow:hidden;}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 24px;font-size:15.5px;font-weight:600;}
.faq summary::-webkit-details-marker{display:none;}
/* The glyph is generated content, which screen readers announce ("plus", "minus") after every
   question. The `/ ""` form gives it empty alt text; the plain form first is for engines that
   cannot parse the slash and would otherwise drop the declaration and the glyph with it. */
.faq summary::after{content:"+";content:"+" / "";font-size:20px;color:var(--accent);font-weight:500;flex:none;}
.faq details[open] summary::after{content:"−";content:"−" / "";}
.faq details p{margin:0;padding:0 24px 20px;font-size:14.5px;line-height:1.7;color:var(--ink-2);}

.cta-band{background:#bb5233;color:#fbf8f1;overflow:hidden;position:relative;}
.cta-band .wrap{display:flex;align-items:center;gap:50px;padding-block:72px;position:relative;}
/* The tile is the same clay as the band; the 1px paper ring is what separates them. */
.cta-band .bigicon{width:150px;height:150px;border-radius:34px;overflow:hidden;box-shadow:0 0 0 1px rgba(251,248,241,.28),0 20px 44px rgba(40,30,10,.3);flex:none;}
.cta-band h2{margin:0;font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance;}
[dir="rtl"] .cta-band h2{letter-spacing:0;line-height:1.35;}
/* Contrast: at .85 the paragraph was 3.29:1 on the band; full paper on the darkened band is
   4.53:1, and nothing short of full reaches 4.5. */
.cta-band p{margin:12px 0 0;font-size:15.5px;color:#fbf8f1;}
.cta-band .badges{margin-top:26px;}
.cta-band .badge{box-shadow:0 8px 22px rgba(40,30,10,.28);}
/* Contrast: on the clay band nothing short of full paper reaches 4.5:1 (see .cta-band p), so
   the small line is full paper here; the outline steps up to .5 against the warmer ground. */
.cta-band .badge.soon{border-color:rgba(251,248,241,.5);box-shadow:none;}
.cta-band .badge.soon .bt small{color:#fbf8f1;}

.foot{background:#1d2433;color:rgba(245,241,232,.6);}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:38px;flex-wrap:wrap;}
.foot .brand{display:flex;align-items:center;gap:10px;color:#fbf8f1;font-size:16px;font-weight:600;}
.foot .brand i{color:#e0714f;font-style:normal;}
/* Six links (the port added "Delete account") no longer fit one row on a phone: the row wraps
   between links, and a link never breaks inside its own label. */
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px;}
/* 44px tall for the thumb; the row gap it replaces is inside the link's own height now. */
.foot nav a{color:rgba(245,241,232,.6);font-size:13px;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;}
.foot nav a:hover{color:#fbf8f1;}
.foot .fine{font-family:var(--font-mono);font-size:11px;}

.icon{border-radius:23%;overflow:hidden;display:block;flex:none;}
.icon svg{display:block;width:100%;height:100%;}
/* Reveal-on-scroll is gated on the `js` class that site.js stamps on <html>: the page is static
   HTML, so with scripts blocked or slow nothing may start hidden. The reduced-motion override
   carries the same prefix, or it would lose on specificity to the hidden state it exists to undo. */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease;}
html.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none;}}

/* AI band */
.ai{background:#1d2433;color:#fbf8f1;}
.ai .sec-intro p{color:rgba(245,241,232,.72);}
.ai-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center;padding:56px 0 30px;}
.ai-col{display:flex;flex-direction:column;gap:18px;}
.vcard,.acard{background:rgba(251,248,241,.05);border:1px solid rgba(245,241,232,.14);border-radius:16px;padding:20px 22px;}
.vc-h{display:flex;align-items:center;gap:12px;}
.vc-h b{font-size:15px;font-weight:600;}
.vc-h svg{width:18px;height:18px;flex:none;color:#e0714f;}
.wave{display:flex;gap:3px;align-items:center;height:20px;margin-inline-start:auto;}
.wave i{width:3px;border-radius:2px;background:#e0714f;height:6px;animation:wv 1.1s ease-in-out infinite;}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}.wave i:nth-child(6){animation-delay:.75s}
@keyframes wv{0%,100%{height:5px}50%{height:18px}}
.vc-q{margin-top:12px;font-size:15px;line-height:1.6;color:rgba(245,241,232,.85);}
.ve{margin-top:14px;background:#fbf8f1;color:var(--ink);border-radius:12px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.ve-chip{font-size:12px;font-weight:500;border:1px solid #ddd6c6;border-radius:999px;padding:4px 11px;white-space:nowrap;}
.ve-chip.hot{background:var(--accent-tint);border-color:transparent;color:#a6462a;font-weight:600;}
.ve-ok{margin-inline-start:auto;background:#bb5233;color:#fbf8f1;font-size:12px;font-weight:600;border-radius:999px;padding:5px 14px;}
.acards{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.acard b{display:block;font-size:14px;font-weight:600;}
.acard span{display:block;margin-top:7px;font-size:12.5px;line-height:1.6;color:rgba(245,241,232,.62);}
/* Tracking .06em on a sentence, not a label, spaced the words apart; .02em keeps the mono's air. */
.ai-trust{text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:rgba(245,241,232,.5);padding:26px 0 80px;}
[dir="rtl"] .ai-trust{font-family:var(--font-ar);letter-spacing:0;}
.vf{flex:1;margin:14px 16px 0;border-radius:16px;background:#171c26;position:relative;overflow:hidden;}
.vf-guide{position:absolute;inset:12%;border:1.5px dashed rgba(251,248,241,.3);border-radius:12px;}
.vf .doc{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .8s ease;}
.vf .doc.on{opacity:1;}
.scanline{position:absolute;left:9%;right:9%;height:2px;background:linear-gradient(90deg,transparent,#e0714f,transparent);animation:scn 3s ease-in-out infinite;}
@keyframes scn{0%,100%{top:16%}50%{top:82%}}
/* Every motion source stops here: the scan line, the voice wave, the "reading" pulse, and the
   smooth anchor scroll, which is animation too. site.js checks the same query for its own work. */
.rcpt{width:180px;background:#fff;border-radius:6px;padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.45);color:var(--ink);}
.rcpt>b{font-size:12px;font-weight:600;display:block;}
.rcpt>i{display:block;height:7px;border-radius:3px;background:#e7e1d3;margin-top:9px;}
.rcpt .rt{margin-top:12px;border-top:1px dashed #d8d1bf;padding-top:9px;display:flex;justify-content:space-between;align-items:baseline;font-size:11px;}
.rcpt .rt b{font-size:13px;}
.xfer{width:195px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45);color:var(--ink);}
.xh{background:#1f8a4c;color:#fff;padding:9px 13px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:7px;}
.xb{padding:14px;display:flex;flex-direction:column;gap:9px;}
.xb b{font-size:19px;letter-spacing:-.01em;}
.xb i{display:block;height:7px;border-radius:3px;background:#eee;}
.vf-cap{display:flex;align-items:center;gap:8px;justify-content:center;padding:13px;font-size:12px;color:#676e82;}
.vf-cap .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pl 1.2s ease-in-out infinite;}
  /* After every rule it overrides: at equal specificity the later declaration wins. */
  @media (prefers-reduced-motion:reduce){.scanline,.wave i,.vf-cap .pulse{animation:none;}html,body{scroll-behavior:auto;}}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.25}}

/* Odoo bridge */
.odoo{border-top:1px solid var(--rule);}
.bridge{display:grid;grid-template-columns:1fr 120px 1fr;gap:24px;align-items:center;padding:56px 0 8px;max-width:980px;margin:0 auto;}
.b-lab{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#676e82;margin-bottom:12px;}
/* No uppercase either: "في ARCTRACK" / "في ODOO" — a shouted Latin token inside an Arabic label. */
[dir="rtl"] .b-lab{letter-spacing:0;font-family:var(--font-ar);text-transform:none;}
.b-app{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:15px 17px;box-shadow:var(--shadow-1);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.b-app>span:first-child{display:block;min-width:0;flex:1;}
.b-amt{flex:none;}
.b-app+.b-app{margin-top:13px;}
.b-app b{display:block;font-size:13.5px;font-weight:600;}
.b-app small{display:block;margin-top:4px;font-size:12px;color:#676e82;}
.b-amt{font-size:14px;font-weight:700;white-space:nowrap;}
.b-flow{display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;color:#676e82;text-align:center;}
[dir="rtl"] .b-flow{font-family:var(--font-ar);}
[dir="rtl"] .b-flow svg{transform:scaleX(-1);}
.o-card{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);}
.o-card+.o-card{margin-top:13px;}
.o-head{background:#714B67;color:#fff;font-size:12px;font-weight:600;padding:7px 14px;display:flex;justify-content:space-between;align-items:center;}
/* Contrast: white on the .22 pill over Odoo purple is 4.21:1; at .19 it is 4.52:1. The pill
   is a state label, so it sits on the 11px floor, not under it. */
.o-draft{background:rgba(255,255,255,.19);border-radius:999px;padding:1.5px 9px;font-size:11px;letter-spacing:.08em;}
[dir="rtl"] .o-draft{letter-spacing:0;}
.o-body{padding:11px 14px;}
.o-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2);padding:4.5px 0;}
.o-row b{font-weight:600;color:var(--ink);}
.o-points{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:42px 0 0;max-width:980px;margin:0 auto;}
.o-pt{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:16px 18px;}
.o-pt b{display:block;font-size:13.5px;font-weight:600;}
.o-pt span{display:block;margin-top:6px;font-size:12px;line-height:1.55;color:#676e82;}
.o-partner{text-align:center;font-family:var(--font-mono);font-size:12px;color:#676e82;padding:44px 0 88px;max-width:640px;margin:0 auto;line-height:1.7;}
[dir="rtl"] .o-partner{font-family:var(--font-ar);}

/* dashboard mock screen */
.dk-body{flex:1;overflow:hidden;padding:14px 16px 0;display:flex;flex-direction:column;gap:12px;background:var(--bg);}
.dk-card{background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-1);}
.dk-lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#676e82;display:flex;justify-content:space-between;align-items:center;}
[dir="rtl"] .dk-lbl{letter-spacing:0;font-family:var(--font-ar);}
.dk-big{margin-top:8px;font-size:30px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.dk-chip{font-size:12px;font-weight:600;background:var(--accent-tint);color:#a6462a;border-radius:999px;padding:3px 10px;}
.dk-sub{margin-top:6px;font-size:11.5px;color:#676e82;}
.dk-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.dk-mid{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-top:8px;}
.dk-spark{margin-top:12px;}
.dk-proj{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 0;border-top:1px solid var(--rule);font-size:13px;}
.dk-proj:first-of-type{border-top:none;}
.dk-proj b{font-weight:600;}
.dk-proj .m{font-size:12px;font-weight:600;color:#a6462a;background:var(--accent-tint);border-radius:999px;padding:2px 9px;}

@media (max-width:960px){
  .hero .wrap{grid-template-columns:1fr;gap:0;}
  .stage{padding:0 0 70px;}
  /* One column reads heading first: the number, title and paragraph, then the phone, then the
     mini cards — where the two-column grid stacked the whole copy block under the phone. The
     copy wrapper dissolves (`display:contents`) so its children can be ordered around the
     stage; `direction` is inherited, so the wrapper's inline RTL/LTR still reaches them and the
     alternating desktop layout above 960px is untouched. */
  .pillar{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .pillar-copy{display:contents;}
  .pillar-copy .fnum,.pillar-copy h3,.pillar-copy>p{order:-1;}
  .stagebox{order:0;}
  .minis{order:1;}
  /* One column: every phone is centred in the wrap, so the room beside it is the same sum
     for all three stages — half the viewport less half the widest phone (281) and the 40px
     padding, less the 12px scrollbar allowance. */
  .hero .stage-phone,.pillar .stage-phone,.ai .stage-phone{--fl-room:calc(50vw - 155px);}
  .ai-grid{grid-template-columns:1fr;gap:20px;}
  .acards{grid-template-columns:1fr;}
  .bridge{grid-template-columns:1fr;gap:20px;}
  .b-flow{padding:28px 0;}
  .b-flow svg{transform:rotate(90deg);margin-block:40px;}
  [dir="rtl"] .b-flow svg{transform:rotate(90deg);}
  .o-points{grid-template-columns:1fr 1fr;}
  .nav .links{display:none;}
  .cta-band .wrap{flex-direction:column;text-align:center;}
  .cta-band .badges{justify-content:center;}
  .qr{display:none;}
}
@media (max-width:640px){
  .wrap{padding:0 20px;}
  /* .strip .wrap sets its own padding at higher specificity than .wrap, so the strip kept 40px
     sides on phones and its edges sat 20px inside every other section's. */
  .strip .wrap{padding:16px 20px;}
  /* The header's three items cannot shrink (nowrap CTA, unbreakable pill and word-mark) and
     overflowed every phone width, cutting the CTA off and giving the page a horizontal scroll.
     The word-mark goes off-screen but stays in the accessibility tree — the brand is not a
     link, so there is nothing to put an aria-label on. Room check at 360px (320px inside the
     padding): icon 34 + pill ~100 + CTA ~104 (Arabic) + two 14px gaps = ~266px. */
  .nav .wrap{gap:14px;}
  .nav .brand .latin{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .nav .cta{padding:8px 13px;font-size:12.5px;}
  .hero-copy{padding:64px 0 48px;}
  .hero h1{font-size:37px;}
  [dir="rtl"] .hero h1{font-size:33px;}
  .hero .sub{font-size:15.5px;}
  /* Content-sized and unshrinkable: a badge that does not fit beside its sibling drops to its
     own row (the container wraps) instead of breaking "Google Play" across two lines. */
  .badge{flex:1 0 auto;justify-content:center;}
  .sec{padding:64px 0 20px;}
  .sec-intro h1,.sec-intro h2{font-size:28px;}
  .pillar{padding:48px 0;}
  .pillar-copy h3{font-size:25px;}
  .minis{grid-template-columns:1fr;}
  .o-points{grid-template-columns:1fr;}
  .steps{padding-bottom:64px;}
  .faq{padding-bottom:64px;}
  .cta-band .bigicon{width:110px;height:110px;}
  .cta-band h2{font-size:27px;}
  .stage{padding:0 0 56px;}
  /* The floats were hidden on phones (they hung past the viewport when absolute). They are the
     payoff of each phone — the hero's receivables and burn, the AI section's four extractions
     — so instead they stack under the phone as a list of static cards, the phone's width, with
     the bob animation and the desktop offsets dropped. Toast text may wrap here: the cards are
     narrower than the desktop floats and an Arabic line would otherwise run past the edge. */
  .stage-phone{display:flex;flex-direction:column;align-items:center;gap:10px;}
  /* `--fl-tuck:0` too: the desktop tuck is a translate, and a static box still moves. */
  .float{position:static;animation:none;transform:none;width:min(100%,320px);--fl-tuck:0px;}
  .float .tt,.float .ts{white-space:normal;}
  /* The Play badge keeps its own row; "Coming soon" shrinks beside it rather than matching it. */
  .badge.soon{flex:0 1 auto;}
  .foot .wrap{justify-content:center;text-align:center;}
  .foot nav{flex-basis:100%;justify-content:center;}
}