/* ==========================================================================
   MUSNAD — "Technical Instrument" design system
   Single stylesheet, no build step. Tokens, primitives, components, page
   compositions, responsive, motion. Brand colours were sampled from the
   supplied logo artwork (#1B45D8 royal blue on #F6F5F1 off-white).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* brand */
  --blue:        #1B45D8;
  --blue-deep:   #132F92;
  --blue-fade:   #EDF1FD;
  --blue-line:   #C6D2F7;
  --navy:        #0B1B3A;
  --navy-soft:   #33415C;
  --blueprint:   #5A7BC8;

  /* ground */
  --paper:       #FFFFFF;
  --wash:        #F6F5F1;
  --wash-cool:   #EEF1F7;
  --line:        #DFE3EC;
  --line-strong: #C3CAD9;

  /* semantic */
  --ok:          #10714A;
  --ok-fade:     #E8F4EE;
  --warn:        #8A5A00;
  --warn-fade:   #FBF2E0;
  --error:       #B3261E;
  --error-fade:  #FCEFEE;

  /* UAE accents — markers only, never decoration */
  --uae-red:     #CE1126;
  --uae-green:   #009739;
  --uae-black:   #111111;

  /* legacy aliases: templates and inline styles still reference these */
  --ink:           var(--navy);
  --ink-muted:     var(--navy-soft);
  --primary:       var(--blue);
  --primary-hover: var(--blue-deep);
  --primary-fade:  var(--blue-fade);
  --border:        var(--line);
  --border-strong: var(--line-strong);
  --success:       var(--ok);
  --client-accent: var(--blue);

  /* type */
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --arabic: 'IBM Plex Sans Arabic', var(--sans);

  /* spacing — 4px scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 80px;

  /* radii — deliberately tight; rounded startup cards fight the direction */
  --r-chip: 2px;
  --r-ctl:  4px;
  --r-card: 6px;

  --bw: 1px;

  /* motion */
  --t-micro: 140ms;
  --t-std:   220ms;
  --t-enter: 380ms;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* layout */
  --w-page:   1180px;
  --w-narrow: 620px;
  /* Height of the sticky header: 12px padding x2 + 48px lockup + 1px border.
     Dark heroes slide under it by exactly this much, and in-page anchors
     offset by it, so it must stay in step with .brand-lockup at every
     breakpoint (see the 720px override). */
  --header-h: 73px;

  /* z-index scale */
  --z-bg: 0; --z-content: 1; --z-header: 40; --z-overlay: 60;

  /* swappable asset hooks */
  --uae-flag: url('/static/brand/uae-flag.svg');
}

/* --- 2. Reset + base ---------------------------------------------------- */

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

html, body { margin: 0; padding: 0; background: var(--wash); color: var(--navy); }

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; min-height: 100vh;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-weight: 600; letter-spacing: -0.021em; color: var(--navy);
  margin: 0 0 var(--s3); line-height: 1.22;
}
h1 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.028em; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

p { margin: 0 0 var(--s4); }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
hr { border: 0; border-top: var(--bw) solid var(--line); margin: var(--s7) 0; }
img { max-width: 100%; height: auto; }

code, .mono, kbd, samp {
  font-family: var(--mono); font-size: .9em; font-variant-numeric: tabular-nums;
}

::selection { background: var(--blue); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Page fade-in (dashboard + admin feel less blank on cold load) --- */

main { animation: page-fade-in var(--t-enter) var(--ease); }
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  main { animation: none; }
}

/* Tool-card click feedback: visually acknowledge navigation before
   the next page finishes loading (Render cold-start hides the fact
   that anything is happening). */
.tool-card { position: relative; }
.tool-card.is-opening {
  pointer-events: none;
  opacity: 0.65;
}
.tool-card.is-opening::after {
  content: "Opening…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: inherit;
}

/* Inline spinner used by polling code. */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}
.visually-hidden:focus {
  position: fixed; top: var(--s3); left: var(--s3);
  width: auto; height: auto; clip: auto; margin: 0;
  padding: var(--s2) var(--s4); background: var(--navy); color: #fff;
  border-radius: var(--r-ctl); z-index: var(--z-overlay);
}

/* --- 3. Layout ---------------------------------------------------------- */

.container { width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s6); }
.container.narrow { max-width: var(--w-narrow); }

main > .container { padding-top: var(--s7); padding-bottom: var(--s9); }
main > .hero + .container { padding-top: var(--s8); }

.row-between {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
}

.section-rule { border: 0; border-top: var(--bw) solid var(--line); margin: var(--s7) 0; }
.fade { color: var(--navy-soft); }
.mono { font-family: var(--mono); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--s2); } .mt-2 { margin-top: var(--s4); } .mt-3 { margin-top: var(--s6); }

/* --- 4. Technical detail vocabulary ------------------------------------- */

.tlabel {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-soft);
  display: inline-flex; align-items: center; gap: var(--s2);
}
.tlabel.accent { color: var(--blue); }

.sindex { font-family: var(--mono); font-size: 11px; color: var(--blue); letter-spacing: .08em; }

.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--line-strong); border-style: solid;
}
.brackets::before { top: -1px; left: -1px; border-width: var(--bw) 0 0 var(--bw); }
.brackets::after  { bottom: -1px; right: -1px; border-width: 0 var(--bw) var(--bw) 0; }

.dot { width: 6px; height: 6px; flex: 0 0 6px; display: inline-block; background: var(--navy-soft); border-radius: 1px; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); }
.dot.error { background: var(--error); } .dot.busy { background: var(--blue); }

/* --- 5. Header + navigation --------------------------------------------- */

/* Dark navy, sticky. Over a dark hero it starts transparent and gains blur +
   a hairline border once scrolled (body.is-scrolled, set by the header script).
   On light pages it is solid from the outset so nav text keeps its contrast. */
header.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(11,27,58,.92);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: var(--bw) solid rgba(255,255,255,.12);
  transition: background var(--t-std) var(--ease), border-color var(--t-std) var(--ease);
}
body.hero-dark:not(.is-scrolled) header.site-header {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* With the mobile menu open the header must be solid: a transparent header
   lets the hero copy show through the strip above the menu panel. Matches
   the specificity of the rule above and wins on source order. */
body.hero-dark.nav-open header.site-header,
body.nav-open header.site-header {
  background: #0B1B3A;
  border-bottom-color: rgba(255,255,255,.14);
}
.site-header-inner {
  max-width: var(--w-page); margin: 0 auto; padding: var(--s3) var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  color: #fff; font-weight: 600; text-decoration: none;
}
.brand:hover { color: #fff; }
.brand-mark { width: 22px; height: 23px; color: var(--blue); flex: 0 0 auto; transition: transform var(--t-std) var(--ease); }
.brand:hover .brand-mark { transform: translateY(-1px); }
.brand-word { letter-spacing: .15em; text-transform: uppercase; font-size: 13.5px; font-weight: 600; }
.brand-lockup {
  display: block;
  height: 48px;
  width: auto;
  flex: 0 0 auto;
  transition: transform var(--t-std) var(--ease);
}
.brand:hover .brand-lockup { transform: translateY(-1px); }
@media (max-width: 720px) {
  .brand-lockup { height: 40px; }
  :root { --header-h: 65px; }
}
.brand-sub {
  font-family: var(--mono); font-size: 11px; font-weight: 400; color: #9FB6F0;
  letter-spacing: .04em; padding-left: var(--s3); border-left: var(--bw) solid rgba(255,255,255,.2);
}

.site-nav { display: flex; align-items: center; gap: var(--s6); }
.site-nav a {
  position: relative; font-size: 13.5px; color: #C4D2F0; white-space: nowrap;
  padding: var(--s1) 0; transition: color var(--t-micro) var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: #6E8CE0; transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-std) var(--ease);
}
.site-nav a:hover { color: #fff; }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a:focus-visible { outline: 2px solid #9FB6F0; outline-offset: 4px; }

/* Sign-in call to action. Reads as a button, still a link to /login. */
.site-nav a.nav-cta {
  background: var(--blue); color: #fff; border: var(--bw) solid var(--blue);
  border-radius: var(--r-ctl); padding: 9px var(--s5); font-weight: 500;
  transition: background var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.site-nav a.nav-cta:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.site-nav a.nav-cta::after { display: none; }

/* Hamburger. Hidden until the nav collapses at 1080px. */
.nav-toggle {
  display: none; background: transparent; border: var(--bw) solid rgba(255,255,255,.24);
  border-radius: var(--r-ctl); padding: 0; width: 44px; height: 44px; min-height: 44px;
  align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.nav-toggle-bars { display: block; width: 18px; }
.nav-toggle-bars i {
  display: block; height: 1.5px; background: #fff; border-radius: 1px;
  transition: transform var(--t-std) var(--ease), opacity var(--t-micro) var(--ease);
}
.nav-toggle-bars i + i { margin-top: 4px; }
body.nav-open .nav-toggle-bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .nav-toggle-bars i:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.client-accent-stripe { height: 2px; background: var(--client-accent); }

/* --- 6. Buttons --------------------------------------------------------- */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 11px var(--s5); min-height: 44px;
  color: #fff; background: var(--blue); border: var(--bw) solid var(--blue);
  border-radius: var(--r-ctl); cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-micro) var(--ease),
              border-color var(--t-micro) var(--ease),
              transform var(--t-micro) var(--ease);
}
button:hover, .btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

button.ghost, .btn.ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
button.ghost:hover, .btn.ghost:hover { background: var(--wash-cool); color: var(--navy); border-color: var(--blue); }

button.danger, .btn.danger { background: var(--error); border-color: var(--error); }
button.danger:hover, .btn.danger:hover { background: #8E1D17; border-color: #8E1D17; }

button:disabled, .btn:disabled, button[disabled], .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn-lg { min-height: 48px; padding: 14px var(--s6); font-size: 14.5px; }

/* --- 7. Forms ----------------------------------------------------------- */

form { margin: 0; }
.field { margin-bottom: var(--s5); }

label { display: block; font-size: 12.5px; font-weight: 500; color: var(--navy); margin-bottom: var(--s2); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], input[type=tel], input[type=url],
select, textarea {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--navy);
  background: var(--paper); border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-ctl); padding: 11px var(--s3); min-height: 44px;
  transition: border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
input::placeholder, textarea::placeholder { color: #929BAD; }
input:hover, select:hover, textarea:hover { border-color: var(--blueprint); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-fade);
}
textarea { font-family: var(--mono); font-size: 13px; min-height: 96px; resize: vertical; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy-soft) 50%),
                    linear-gradient(135deg, var(--navy-soft) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--s8);
}
input[type=file] {
  width: 100%; font-size: 13px; padding: var(--s3); background: var(--wash-cool);
  border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); cursor: pointer;
  transition: border-color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
input[type=file]:hover { border-color: var(--blue); background: var(--blue-fade); }
input[type=checkbox], input[type=radio] { accent-color: var(--blue); width: 16px; height: 16px; min-height: 0; }

.hint { font-size: 12px; color: var(--navy-soft); margin-top: var(--s2); }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 66px; }
.pw-toggle {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  min-height: 32px; padding: 0 var(--s3); font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--navy-soft); border: var(--bw) solid var(--line);
}
.pw-toggle:hover { background: var(--wash-cool); color: var(--navy); border-color: var(--line-strong); transform: translateY(-50%); }
.pw-toggle:active { transform: translateY(-50%); }

/* --- 8. Panels + cards -------------------------------------------------- */

.panel {
  background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: var(--s6); margin-bottom: var(--s6);
}
.panel > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: var(--bw) solid var(--line);
}
.panel > header h2, .panel > header h3 { margin: 0; }
.panel-meta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--navy-soft); white-space: nowrap;
}

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: var(--s4); margin: var(--s6) 0; }
.stat {
  background: var(--paper); border: var(--bw) solid var(--line); border-top: 2px solid var(--blue);
  border-radius: var(--r-card); padding: var(--s4) var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
}
.stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--navy-soft); display: block; }
.stat-value { font-size: 21px; font-weight: 600; color: var(--navy); letter-spacing: -0.02em; line-height: 1.15; }

/* Some tool templates reuse .stat as a form-field group. Those are inputs,
   not metrics, so drop the metric accent bar and the label styling there. */
.stat:has(input), .stat:has(select), .stat:has(textarea) {
  border-top: var(--bw) solid var(--line);
  gap: var(--s1);
}
.stat:has(input) label, .stat:has(select) label, .stat:has(textarea) label {
  font-family: var(--sans); font-size: 12.5px; letter-spacing: normal;
  text-transform: none; color: var(--navy);
}

/* --- 9. Tool records ---------------------------------------------------- */

.tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s4); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--s4); }

.tool-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: var(--s5);
  text-decoration: none; color: inherit;
  transition: border-color var(--t-std) var(--ease), transform var(--t-std) var(--ease), box-shadow var(--t-std) var(--ease);
}
a.tool-card:hover {
  border-color: var(--blue); transform: translateY(-2px);
  box-shadow: 0 6px 20px -12px rgba(11,27,58,.28); color: inherit;
}
a.tool-card:hover h3 { color: var(--blue); }
.tool-key { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-soft); margin-bottom: var(--s3); }
.tool-icon {
  font-family: var(--mono); font-size: 12px; color: var(--blue);
  background: var(--blue-fade); border: var(--bw) solid var(--blue-line);
  border-radius: var(--r-chip); padding: 3px var(--s2); align-self: flex-start; margin-bottom: var(--s3);
}
.tool-card h3 { margin: 0 0 var(--s2); transition: color var(--t-micro) var(--ease); }
.tool-blurb { font-size: 13.5px; color: var(--navy-soft); margin: 0 0 var(--s5); flex: 1; }

.tool-card.upsell { border-style: dashed; background: transparent; }
.tool-card.upsell h3, .tool-card.upsell .tool-blurb { opacity: .82; }
.upsell-tag {
  /* Logical inset, so in RTL the tag moves to the left edge instead of
     landing on top of the tool key. */
  position: absolute; top: var(--s4); inset-inline-end: var(--s4);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy-soft); border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-chip); padding: 2px 6px;
}

.usage { margin-top: auto; }
.usage-meta {
  display: flex; justify-content: space-between; gap: var(--s3);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--navy-soft); margin-bottom: var(--s2);
}
.usage-bar { height: 4px; background: var(--wash-cool); border-radius: 2px; overflow: hidden; }
.usage-bar > span { display: block; height: 100%; background: var(--blue); transition: width var(--t-enter) var(--ease); }
.usage-bar.over > span { background: var(--error); }

/* --- 10. Tables --------------------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.log { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.log th {
  position: sticky; top: 0; z-index: 2; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--navy-soft); background: var(--wash-cool);
  padding: var(--s3) var(--s4); white-space: nowrap; border-bottom: var(--bw) solid var(--line);
}
table.log td { padding: var(--s3) var(--s4); border-bottom: var(--bw) solid var(--line); color: var(--navy); vertical-align: middle; }
table.log tr:last-child td { border-bottom: 0; }
table.log tr:hover td { background: var(--wash-cool); }
table.log td.mono, table.log .mono { font-family: var(--mono); font-size: 12px; }

.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px var(--s2); border-radius: var(--r-chip);
  border: var(--bw) solid var(--line-strong); color: var(--navy-soft);
  background: var(--paper); white-space: nowrap;
}
.status.ok    { color: var(--ok);    border-color: #9FCDBA; background: var(--ok-fade); }
.status.error { color: var(--error); border-color: #E9B3AF; background: var(--error-fade); }
.status.warn  { color: var(--warn);  border-color: #E0C68A; background: var(--warn-fade); }
.status.used, .status.limit { color: var(--blue); border-color: var(--blue-line); background: var(--blue-fade); }

.stamp { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--navy-soft); }

/* --- 11. Callouts + empty states ---------------------------------------- */

.callout {
  border: var(--bw) solid var(--line-strong); border-left: 3px solid var(--navy-soft);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0; background: var(--paper);
  padding: var(--s4) var(--s5); font-size: 13.5px; margin-bottom: var(--s5);
}
.callout.error { border-left-color: var(--error); background: var(--error-fade); color: #7C1F19; border-color: #E9B3AF; }
.callout.warn  { border-left-color: var(--warn);  background: var(--warn-fade);  color: #6B4600; border-color: #E0C68A; }
.callout.ok    { border-left-color: var(--ok);    background: var(--ok-fade);    color: #0B5638; border-color: #9FCDBA; }
.callout.info  { border-left-color: var(--blue);  background: var(--blue-fade);  color: var(--blue-deep); border-color: var(--blue-line); }

.empty {
  text-align: center; padding: var(--s9) var(--s5);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: var(--paper);
}
.empty .brand-mark { width: 30px; height: 32px; color: var(--line-strong); margin-bottom: var(--s4); }
.empty-lockup { width: 132px; height: auto; opacity: .5; margin-bottom: var(--s5); }

/* --- 12. Marketing hero ------------------------------------------------- */

/* Two columns: copy left, product preview right. The header sits over this
   plate, so the top padding clears it. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy); color: #fff;
  padding: calc(var(--s10) + var(--s7)) 0 var(--s10);
  margin-top: calc(var(--header-h) * -1);   /* slide under the sticky header */
}
.hero::before {                       /* skyline */
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* The supplied artwork (2400x959) carries the MUSNAD wordmark across
     34-60% of its width and the Etihad Towers across 57-95%. At 250% scale
     the container shows 40% of the image, so pinning it right frames the
     towers and crops the wordmark out completely. Do not reduce the scale
     below ~240% or the wordmark ghosts back through the headline. */
  background-image: url('/static/brand/skyline.jpg');
  background-size: 250% auto; background-position: 100% 45%; opacity: .62;
  mask-image: linear-gradient(100deg, transparent 8%, rgba(0,0,0,.34) 34%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 8%, rgba(0,0,0,.34) 34%, #000 62%, #000 100%);
}
.hero::after {                        /* navy wash */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(98deg, #0B1B3A 22%, rgba(11,27,58,.86) 48%, rgba(11,27,58,.52) 78%, rgba(19,47,146,.30) 100%),
    linear-gradient(to bottom, transparent 78%, rgba(11,27,58,.92) 100%);
}
.hero-ribbon {                        /* restrained UAE detail, low and right */
  position: absolute; z-index: 1; pointer-events: none;
  right: -4%; bottom: -4%; width: 52%;
  aspect-ratio: 1200 / 320;
  background-image: var(--uae-flag);
  background-size: contain; background-repeat: no-repeat; background-position: right bottom;
  opacity: .22;
  mask-image: linear-gradient(288deg, #000 14%, rgba(0,0,0,.35) 58%, transparent 92%);
  -webkit-mask-image: linear-gradient(288deg, #000 14%, rgba(0,0,0,.35) 58%, transparent 92%);
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s6);
}
/* Copy-only hero. Constrained so the headline and lead do not stretch the
   full page width, and so the skyline on the right stays visible. */
.hero-copy { max-width: 46rem; }

.hero h1 {
  color: #fff; font-size: clamp(34px, 4.6vw, 56px);
  letter-spacing: -0.032em; line-height: 1.06; margin: 0 0 var(--s5);
}
.hero .lead { font-size: 16px; line-height: 1.7; color: #C4D2F0; max-width: 54ch; margin-bottom: var(--s7); }
.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-actions .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.04);
}
.hero-actions .btn-ghost:hover { background: rgba(255,255,255,.11); border-color: #fff; color: #fff; }
.hero-actions .btn-ghost svg { width: 15px; height: 15px; }

/* Eyebrow with the engineering rule mark. */
.tag-rule {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #9FB6F0; margin-bottom: var(--s4);
}
.tag-rule::before { content: ""; width: 26px; height: 1px; background: #6E8CE0; flex: 0 0 26px; }

.hero-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4);
  margin: var(--s8) 0 0; padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-meta dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #8FA6DF; margin-bottom: 3px;
}
.hero-meta dd { margin: 0; font-size: 13.5px; font-weight: 500; color: #EAF0FC; line-height: 1.35; }

.feature { position: relative; background: var(--paper); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: var(--s6); }
.feature-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); }
.feature-head h2 { margin: 0; }
.feature p { margin: 0; color: var(--navy-soft); font-size: 14px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* --- How-it-works numbered visual flow --- */
.how-it-works { margin-top: var(--s6); }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  position: relative;
}
.how-step {
  background: var(--paper);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s6);
  position: relative;
}
.how-step .how-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--blue);
  letter-spacing: 0.15em;
  margin-bottom: var(--s3);
}
.how-step .how-icon {
  width: 48px;
  height: 48px;
  color: var(--blue);
  margin-bottom: var(--s3);
}
.how-step h3 {
  font-size: 15px;
  margin: 0 0 var(--s2);
  color: var(--navy);
}
.how-step p {
  margin: 0;
  color: var(--navy-soft);
  font-size: 14px;
  line-height: 1.55;
}
/* Chevron between steps (desktop only). */
.how-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(var(--s5) / -2 - 4px);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 16px;
  color: var(--line-strong);
  z-index: 1;
}

/* --- 12b. About plate --------------------------------------------------- */

/* Full-bleed brand plate. The supplied artwork already carries the wordmark
   and the UAE ribbon, so the copy sits to its left and the plate is washed
   back with a gradient so text contrast holds. */
.about-plate {
  position: relative; overflow: hidden;
  background: var(--wash);
  padding: var(--s10) 0 var(--s9);
  border-bottom: var(--bw) solid var(--line);
  isolation: isolate;
}
.about-plate::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/static/brand/about-plate.jpg');
  background-size: cover; background-position: 76% 54%;
  opacity: .92;
}
.about-plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, var(--wash) 4%, rgba(246,245,241,.94) 32%, rgba(246,245,241,.44) 62%, rgba(246,245,241,.04) 100%);
}
.about-plate > .container { position: relative; z-index: 2; }
.about-plate h1 { max-width: 17ch; }
.about-plate p { max-width: 56ch; }

.about-ar {
  font-family: var(--arabic); font-size: 1.15em; font-weight: 500;
  color: var(--blue); line-height: 1.9;
}

/* --- 12c. Contact section ----------------------------------------------- */

/* Full-bleed dark plate: skyline blended behind a navy gradient, blueprint
   lattice over it, UAE ribbon flowing along the bottom, glass form panel. */
.contact {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  padding: var(--s10) 0 calc(var(--s10) + var(--s6));
  margin-top: 0;
  scroll-margin-top: calc(var(--header-h) + var(--s2));
}
/* skyline */
.contact::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Same crop discipline as the hero: >=240% scale pinned right, so the
     wordmark baked into the middle of the artwork never shows through. */
  background-image: url('/static/brand/skyline.jpg');
  background-size: 260% auto; background-position: 100% 40%;
  opacity: .40;
  mask-image: linear-gradient(105deg, transparent 2%, #000 42%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(105deg, transparent 2%, #000 42%, #000 78%, transparent 100%);
}
/* navy wash */
.contact::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(104deg, rgba(11,27,58,.94) 16%, rgba(15,35,86,.80) 52%, rgba(19,47,146,.44) 100%);
}

.contact-inner {
  position: relative; z-index: 2;
  max-width: var(--w-page); margin: 0 auto; padding: 0 var(--s6);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s10); align-items: center;
}

/* UAE ribbon along the bottom edge. Its own element on layer 1 (above the
   skyline + wash, below the content) - a negative z-index here punches out
   of the section's stacking context and blanks the whole plate. */
.contact-ribbon {
  position: absolute; z-index: 1; pointer-events: none;
  left: -8%; width: 74%; bottom: -3%;
  aspect-ratio: 1200 / 320;
  background-image: var(--uae-flag);
  background-size: contain; background-repeat: no-repeat; background-position: left bottom;
  opacity: .34;
  mask-image: linear-gradient(78deg, #000 22%, rgba(0,0,0,.42) 64%, transparent 96%);
  -webkit-mask-image: linear-gradient(78deg, #000 22%, rgba(0,0,0,.42) 64%, transparent 96%);
}

/* --- left column --- */
.contact-lockup { width: 232px; height: auto; margin-bottom: var(--s9); display: block; }

.contact-eyebrow {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: #9FB6F0; margin-bottom: var(--s4);
}
.contact-eyebrow::before { content: ""; width: 26px; height: 1px; background: #6E8CE0; flex: 0 0 26px; }

.contact h2 {
  color: #fff; font-size: clamp(34px, 4.2vw, 52px);
  letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 var(--s5);
}
.contact-lead {
  color: #C4D2F0; font-size: 15.5px; line-height: 1.68;
  max-width: 46ch; margin: 0 0 var(--s8);
}

.contact-details {
  list-style: none; margin: 0; padding: var(--s6) 0 0;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: var(--s8) var(--s7);
}
.contact-details li { display: flex; align-items: flex-start; gap: var(--s3); }
.contact-ico {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%;
  display: grid; place-items: center; color: #BFCFF6;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
}
.contact-ico svg { width: 17px; height: 17px; }
.contact-k {
  display: block; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase; color: #8FA6DF; margin-bottom: 5px;
}
.contact-details a, .contact-static {
  display: block; color: #EAF0FC; font-size: 14px; line-height: 1.55;
  text-decoration: none; word-break: break-word;
}
.contact-details a:hover { color: #fff; text-decoration: underline; }
.contact-details a:focus-visible { outline: 2px solid #9FB6F0; outline-offset: 3px; border-radius: 2px; }

/* --- right column: glass panel --- */
.contact-panel {
  /* Solid-enough base so the panel is readable with no backdrop-filter at
     all; the glass effect is layered on top only where supported. */
  background: rgba(13,28,62,.62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: var(--s8);
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.65);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .contact-panel {
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(14px) saturate(1.25);
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
  }
}
.contact-panel h3 { color: #fff; font-size: 21px; margin: 0 0 var(--s2); }
.contact-panel-sub { color: #A9BCE6; font-size: 13.5px; margin: 0 0 var(--s6); }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.contact-panel .field { margin-bottom: var(--s4); }
.contact-panel label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #93A9DE; margin-bottom: var(--s2);
}
.contact-panel input,
.contact-panel textarea {
  background: rgba(9,20,44,.55);
  border: 1px solid rgba(255,255,255,.16);
  color: #EDF2FD; font-family: var(--sans); font-size: 14px;
  border-radius: var(--r-ctl);
}
.contact-panel textarea { min-height: 116px; line-height: 1.6; }
.contact-panel input::placeholder,
.contact-panel textarea::placeholder { color: #7286B4; }
.contact-panel input:hover,
.contact-panel textarea:hover { border-color: rgba(255,255,255,.3); }
.contact-panel input:focus-visible,
.contact-panel textarea:focus-visible {
  outline: none; border-color: #6E8CE0; background: rgba(9,20,44,.78);
  box-shadow: 0 0 0 3px rgba(110,140,224,.26);
}
.contact-panel input[aria-invalid="true"],
.contact-panel textarea[aria-invalid="true"] { border-color: #E5837C; }
.contact-panel .field-error { color: #F2ADA7; font-size: 12px; margin-top: 6px; display: block; }

.contact-submit {
  width: 100%; margin-top: var(--s2);
  background: var(--blue); border-color: var(--blue);
}
.contact-submit:hover { background: #2C57E8; border-color: #2C57E8; }
.contact-submit svg { width: 16px; height: 16px; }

.contact-fine {
  display: flex; align-items: flex-start; justify-content: center; gap: var(--s2);
  color: #8FA6DF; font-size: 11.5px; line-height: 1.55; margin: var(--s5) 0 0; text-align: center;
}
.contact-fine svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }
.contact-fine a { color: #C4D2F0; text-decoration: underline; text-underline-offset: 2px; }
.contact-fine a:hover { color: #fff; }

.contact-note {
  border-radius: var(--r-ctl); padding: var(--s3) var(--s4);
  font-size: 13px; line-height: 1.55; margin-bottom: var(--s5);
  border: 1px solid transparent;
}
.contact-note a { color: #fff; text-decoration: underline; }
.contact-note.ok    { background: rgba(16,113,74,.24);  border-color: rgba(120,214,175,.45); color: #C9F0DE; }
.contact-note.warn  { background: rgba(138,90,0,.24);   border-color: rgba(224,198,138,.45); color: #F3E2BE; }
.contact-note.error { background: rgba(179,38,30,.22);  border-color: rgba(229,131,124,.45); color: #F4C9C5; }

/* --- 13. Login ---------------------------------------------------------- */

.auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: calc(100vh - 124px); }

.auth-visual {
  position: relative; overflow: hidden; background: var(--navy); color: #fff;
  padding: var(--s9) var(--s8);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s7);
  isolation: isolate;
}
.auth-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url('/static/brand/skyline.jpg');
  background-size: 300% auto; background-position: 99% 64%; opacity: .58;
  mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,.55) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 18%, rgba(0,0,0,.55) 78%, transparent 100%);
}
.auth-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(165deg, rgba(11,27,58,.82) 8%, rgba(19,47,146,.46) 96%),
    linear-gradient(to right, transparent 72%, rgba(11,27,58,.5) 100%);
}
.auth-visual > * { position: relative; z-index: 2; }

.auth-lockup { max-width: 252px; width: 100%; height: auto; margin-bottom: var(--s6); }
.auth-visual h2 { color: #fff; font-size: 25px; max-width: 15ch; margin-bottom: var(--s3); }
.auth-visual p { color: #C4D2F0; font-size: 14.5px; max-width: 40ch; margin: 0; }

.auth-marks { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); }
.auth-marks .tlabel { color: #93A9DE; }
.auth-flag {
  width: 74px; opacity: .5; flex: 0 0 auto;
  mask-image: linear-gradient(to right, #000 42%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 42%, transparent 100%);
}

.auth-form {
  background: var(--paper); padding: var(--s9) var(--s8);
  display: flex; flex-direction: column; justify-content: center;
  border-left: var(--bw) solid var(--line);
}
.auth-form-inner { width: 100%; max-width: 372px; margin: 0 auto; }
.auth-form h1 { font-size: 27px; margin-bottom: var(--s2); }
.auth-intro { color: var(--navy-soft); font-size: 14px; margin-bottom: var(--s7); }
.auth-foot { margin-top: var(--s7); padding-top: var(--s5); border-top: var(--bw) solid var(--line); font-size: 12.5px; color: var(--navy-soft); }

/* --- 14. Post-login reveal ---------------------------------------------- */

.welcome {
  position: relative; overflow: hidden; background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--r-card);
  padding: var(--s7); margin-bottom: var(--s6); isolation: isolate;
}
/* UAE flag faded into the background at 8%, gradient-masked, no white box */
.welcome::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -9%; top: 50%; transform: translateY(-50%) rotate(-1.5deg);
  width: min(64%, 660px); aspect-ratio: 1200 / 320;
  background-image: var(--uae-flag);
  background-size: contain; background-repeat: no-repeat; background-position: left center;
  opacity: .085; filter: blur(1.1px);
  /* fades out toward the page edge, so the red hoist stays legible */
  mask-image: linear-gradient(to right, #000 14%, rgba(0,0,0,.5) 62%, transparent 98%);
  -webkit-mask-image: linear-gradient(to right, #000 14%, rgba(0,0,0,.5) 62%, transparent 98%);
}
/* blueprint lattice integrated with it */
.welcome::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(90,123,200,.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(90,123,200,.16) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
}
.welcome > * { position: relative; z-index: 1; }
.welcome h1 { margin-bottom: var(--s2); font-size: clamp(24px, 2.6vw, 32px); }
.welcome-sub { color: var(--navy-soft); font-size: 14.5px; margin: 0; }
.welcome-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }
.welcome-lockup { width: 154px; height: auto; flex: 0 0 auto; opacity: .95; }

/* --- 15. Footer --------------------------------------------------------- */

footer.site-footer {
  flex-shrink: 0; background: var(--navy); color: #A9BCE6;
  border-top: var(--bw) solid rgba(255,255,255,.1); margin-top: 0;
}
.footer-grid {
  max-width: var(--w-page); margin: 0 auto; padding: var(--s10) var(--s6) var(--s8);
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: var(--s9) var(--s7);
}

.footer-lockup { width: 148px; height: auto; display: block; margin-bottom: var(--s5); }
.footer-brand p { color: #A9BCE6; font-size: 13.5px; line-height: 1.7; margin: 0 0 var(--s4); max-width: 34ch; }
.footer-loc {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 13px; color: #C4D2F0;
}
.footer-loc svg { width: 15px; height: 15px; color: #6E8CE0; flex: 0 0 auto; }

.footer-h {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: #8FA6DF; margin: 0 0 var(--s5);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--s3); }
.footer-col a { color: #C4D2F0; font-size: 13.5px; transition: color var(--t-micro) var(--ease); }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-contact li { display: flex; align-items: center; gap: var(--s3); }
.footer-contact svg { width: 15px; height: 15px; color: #6E8CE0; flex: 0 0 auto; }
.footer-contact a { overflow-wrap: anywhere; }

.footer-bar {
  max-width: var(--w-page); margin: 0 auto; padding: var(--s5) var(--s6);
  border-top: var(--bw) solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; font-size: 12.5px;
}
.footer-copy { color: #8FA6DF; }
.footer-legal { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.footer-legal .tlabel { color: #7286B4; }
.footer-legal a { color: #C4D2F0; }
.footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-flag { width: 30px; opacity: .6; flex: 0 0 auto; }

/* --- 16. Motion --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  main > * { animation: rise var(--t-enter) var(--ease) both; }
  .tool-grid > *, .stat-row > * { animation: rise var(--t-enter) var(--ease) both; }
  .tool-grid > *:nth-child(1), .stat-row > *:nth-child(1) { animation-delay: 40ms; }
  .tool-grid > *:nth-child(2), .stat-row > *:nth-child(2) { animation-delay: 100ms; }
  .tool-grid > *:nth-child(3), .stat-row > *:nth-child(3) { animation-delay: 160ms; }
  .tool-grid > *:nth-child(4), .stat-row > *:nth-child(4) { animation-delay: 220ms; }
  .tool-grid > *:nth-child(n+5) { animation-delay: 280ms; }
}

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

/* --- 17. Responsive ----------------------------------------------------- */

@media (max-width: 980px) {
  .contact-inner { grid-template-columns: 1fr; gap: var(--s9); }
  .contact-ribbon { width: 96%; opacity: .24; }
  .feature-grid { grid-template-columns: 1fr; }
  .how-grid { grid-template-columns: 1fr; }
  .how-step:not(:last-child)::after {
    content: "↓";
    top: auto; bottom: calc(var(--s5) / -2 - 4px);
    right: 50%; left: 50%; transform: translateX(-50%);
  }
}

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth-visual { padding: var(--s7) var(--s6); min-height: 262px; }
  .auth-visual h2 { font-size: 21px; }
  .auth-form { border-left: 0; border-top: var(--bw) solid var(--line); padding: var(--s8) var(--s6); }
  .welcome::before { width: 84%; opacity: .06; }
}

@media (max-width: 640px) {
  :root { --s7: 24px; --s8: 30px; --s9: 40px; --s10: 56px; }
  .container { padding: 0 var(--s4); }
  .site-header-inner { padding: var(--s3) var(--s4); gap: var(--s3); }
  .brand-sub { display: none; }
  .site-nav { gap: var(--s4); }
  .site-nav a { font-size: 13px; }
  .panel { padding: var(--s5); }
  .welcome { padding: var(--s6) var(--s5); }
  .welcome-lockup { display: none; }
  .contact { padding: var(--s9) 0 var(--s10); }
  .contact::before { background-image: url('/static/brand/skyline-sm.jpg'); background-size: 300% auto; }
  .contact-inner { padding: 0 var(--s4); }
  .contact-lockup { width: 178px; margin-bottom: var(--s7); }
  .contact-details { flex-direction: column; gap: var(--s5); }
  .contact-panel { padding: var(--s6) var(--s5); }
  .contact-row { grid-template-columns: 1fr; gap: 0; }
  .about-plate::before { background-image: url('/static/brand/about-plate-sm.jpg'); background-position: 72% 60%; opacity: .34; }
  .about-plate::after { background: linear-gradient(180deg, rgba(246,245,241,.68) 0%, rgba(246,245,241,.92) 100%); }
  .auth-visual::before { background-image: url('/static/brand/skyline-sm.jpg'); }
  .tool-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }

  /* tables become stacked records rather than shrinking to illegibility */
  table.log thead { display: none; }
  table.log, table.log tbody, table.log tr, table.log td { display: block; width: 100%; }
  table.log tr {
    border: var(--bw) solid var(--line); border-radius: var(--r-ctl);
    padding: var(--s3) var(--s4); margin-bottom: var(--s3); background: var(--paper);
  }
  table.log tr:hover td { background: transparent; }
  table.log td { border: 0; padding: var(--s1) 0; display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
  table.log td::before {
    content: attr(data-label); font-family: var(--mono); font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--navy-soft); flex: 0 0 auto;
  }
}

@media (max-width: 460px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* --- 18. RTL / Arabic --------------------------------------------------- */

[dir="rtl"] { text-align: right; }
[dir="rtl"] .brand-sub { padding-left: 0; padding-right: var(--s3); border-left: 0; border-right: var(--bw) solid var(--line); }
[dir="rtl"] .callout { border-left: var(--bw) solid var(--line-strong); border-right: 3px solid var(--navy-soft); border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
[dir="rtl"] table.log th, [dir="rtl"] table.log td { text-align: right; }
:lang(ar), [dir="rtl"] { font-family: var(--arabic); line-height: 1.85; letter-spacing: normal; }

/* --- 19. Print ---------------------------------------------------------- */

@media print {
  header.site-header, footer.site-footer { display: none; }
  .hero::before, .hero::after, .welcome::before, .welcome::after { display: none; }
  body { background: #fff; }
  .panel, .tool-card { border-color: #999; break-inside: avoid; }
}

/* --- 20. Feature components (upload progress, run failures) ------------- */
/* Upload progress bar (JS-driven, shown while a multipart form is in flight). */
.upload-progress {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--wash);
}
.upload-progress.visible { display: block; }
.upload-progress .upload-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.upload-progress .upload-progress-track {
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.upload-progress .upload-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--primary);
  transition: width 0.15s ease-out;
}
.upload-progress.processing .upload-progress-fill {
  background: repeating-linear-gradient(
    45deg,
    var(--primary),
    var(--primary) 8px,
    var(--primary-hover) 8px,
    var(--primary-hover) 16px
  );
  width: 100% !important;
  animation: progress-stripe 1.2s linear infinite;
}
@keyframes progress-stripe {
  from { background-position: 0 0; }
  to { background-position: 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .upload-progress.processing .upload-progress-fill { animation: none; }
}

/* Inline failure detail shown under the row status. */
.run-failure-detail {
  font-size: 12px;
  color: var(--error);
  font-family: var(--mono);
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--error-fade);
  border-radius: 4px;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Skip-link accessibility */
.visually-hidden {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.visually-hidden:focus {
  position: fixed; left: 8px; top: 8px; width: auto; height: auto;
  padding: 8px 12px; background: var(--primary); color: var(--paper);
  border-radius: 6px; z-index: 100;
}

/* ============================================================
   Print stylesheet
   ============================================================
   Strips interactive chrome and lays out panels + tables cleanly
   on paper (or PDF export). Use case: an operator captures the
   admin dashboard, an audit log, or a client detail page to
   include in a records folder.
*/
@media print {
  /* Reset any dark/tinted background - printers dislike them */
  html, body, main, .container, .panel, .stat, .tool-card, .welcome {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Hide interactive chrome */
  header.site-header,
  footer.site-footer,
  .site-nav,
  .btn,
  button,
  form,
  .upload-progress,
  .brand-lockup,
  .brand-sub,
  nav[aria-label="Admin sections"],
  .js-delete-form,
  .js-delete-btn,
  script { display: none !important; }

  /* Add page-title context in place of the hidden header */
  main::before {
    content: "Musnad. Printed record.";
    display: block;
    font-size: 10px;
    color: #666;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  /* Tables: never break a row across pages */
  table.log { break-inside: avoid; }
  table.log tr, .panel, .stat { break-inside: avoid; }

  /* Force ink-friendly borders */
  .panel, .stat, .tool-card, table.log th, table.log td {
    border-color: #999 !important;
  }

  /* Links: show the href inline so paper readers can follow them */
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " [" attr(href) "]";
    font-size: 10px;
    color: #666;
    font-family: var(--mono);
  }
  /* But not on anchors inside tables (would explode row width) */
  table.log a::after { content: ""; }

  /* Give panels room to breathe */
  .panel { margin-bottom: 20px; padding: 12px 16px; }

  /* No fade animations on print */
  main { animation: none !important; }
}

/* --- 17. Legal pages (privacy policy) ------------------------------------
   A full-dark page. `theme-dark` is set on <body> by the template, so every
   override below is scoped to it and no other page can be affected. The plate
   treatment (skyline, blueprint lattice, UAE ribbon) is the same vocabulary as
   the contact section so the two read as one system.
   ------------------------------------------------------------------------ */

body.theme-dark { background: var(--navy); color: #C4D2F0; }

/* The header sits over the hero plate rather than on a white bar. */
body.theme-dark header.site-header {
  background: rgba(11,27,58,.72);
  border-bottom-color: rgba(255,255,255,.12);
}
body.theme-dark .brand { color: #fff; }
body.theme-dark .brand-sub { color: #9FB6F0; border-left-color: rgba(255,255,255,.18); }
body.theme-dark .site-nav a { color: #A9BCE6; }
body.theme-dark .site-nav a:hover { color: #fff; }
body.theme-dark .site-nav a::after { background: #6E8CE0; }

body.theme-dark .site-footer { background: transparent; border-top-color: rgba(255,255,255,.12); }
body.theme-dark .site-footer .foot-brand,
body.theme-dark .site-footer .tlabel { color: #8FA6DF; }
body.theme-dark .foot-link { color: #C4D2F0; }

body.theme-dark :focus-visible { outline-color: #9FB6F0; }

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

.legal-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy);
  padding: var(--s10) 0 calc(var(--s10) + var(--s4));
  margin-top: -1px;               /* meet the sticky header with no seam */
}
.legal-hero::before {             /* skyline */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url('/static/brand/skyline.jpg');
  background-size: 150% auto; background-position: 82% 30%;
  opacity: .40;
  mask-image: linear-gradient(268deg, #000 6%, rgba(0,0,0,.55) 46%, transparent 84%);
  -webkit-mask-image: linear-gradient(268deg, #000 6%, rgba(0,0,0,.55) 46%, transparent 84%);
}
.legal-hero::after {              /* navy wash + blueprint lattice */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(90,123,200,.10) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(to bottom, rgba(90,123,200,.10) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(76deg, rgba(11,27,58,.97) 30%, rgba(15,35,86,.74) 66%, rgba(19,47,146,.36) 100%);
}
/* UAE ribbon. Own element on layer 1: a negative z-index here would punch out
   of the isolated stacking context and blank the whole plate. */
.legal-ribbon {
  position: absolute; z-index: 1; pointer-events: none;
  right: -6%; width: 66%; bottom: -6%;
  aspect-ratio: 1200 / 320;
  background-image: var(--uae-flag);
  background-size: contain; background-repeat: no-repeat; background-position: right bottom;
  opacity: .30;
  mask-image: linear-gradient(282deg, #000 18%, rgba(0,0,0,.4) 62%, transparent 94%);
  -webkit-mask-image: linear-gradient(282deg, #000 18%, rgba(0,0,0,.4) 62%, transparent 94%);
}
.legal-hero-inner { position: relative; z-index: 2; }

.legal-hero h1 {
  color: #fff; font-size: clamp(38px, 5.4vw, 62px);
  letter-spacing: -0.033em; line-height: 1.02; margin: 0 0 var(--s5);
}
.legal-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13.5px; color: #A9BCE6; margin: 0 0 var(--s6);
}
.legal-intro { color: #C4D2F0; font-size: 15.5px; line-height: 1.7; max-width: 52ch; margin: 0; }

/* --- body --- */

/* Specificity note: the generic `main > .container` rule is (0,1,1), so a bare
   `.legal` would lose the padding fight. Match it on the parent too. */
main > .container.legal-wrap {
  padding-top: var(--s9); padding-bottom: var(--s10);
  display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s10);
  align-items: start;
}
.legal p { color: #B9C9EC; font-size: 15px; line-height: 1.75; max-width: 68ch; }
.legal a { color: #9FB6F0; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #fff; }
.legal strong { color: #E7EEFC; font-weight: 600; }
.legal code {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-chip); padding: 1px 5px; color: #C9D6F3;
}

.legal-h {
  color: #fff; font-size: 22px; letter-spacing: -0.02em;
  margin: var(--s10) 0 var(--s5); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.13);
}
.legal-h:first-of-type { margin-top: var(--s8); }
.legal-sub { color: #E7EEFC; font-size: 15.5px; margin: var(--s7) 0 var(--s3); }

.legal-note {
  border-left: 2px solid var(--blue);
  padding: var(--s1) 0 var(--s1) var(--s5);
  color: #A9BCE6; font-size: 14px;
}

/* --- short-version callout --- */

.legal-callout {
  display: flex; gap: var(--s5); align-items: flex-start;
  border: 1px solid rgba(110,140,224,.42); border-radius: var(--r-card);
  background: rgba(27,69,216,.13);
  padding: var(--s6) var(--s7);
}
.legal-callout-ico {
  flex: 0 0 46px; width: 46px; height: 46px;
  display: grid; place-items: center; color: #9FB6F0;
  border: 1px solid rgba(110,140,224,.45); border-radius: var(--r-ctl);
  background: rgba(11,27,58,.5);
}
.legal-callout-ico svg { width: 22px; height: 22px; }
.legal-callout p { margin: 0; font-size: 14.5px; }

/* --- controller / processor split --- */

.legal-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s6); }
.legal-role {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card);
  background: rgba(255,255,255,.035); padding: var(--s6);
}
.legal-role h3 { color: #fff; font-size: 16px; margin: var(--s3) 0 var(--s2); }
.legal-role p { font-size: 14px; margin: 0; }
.legal-role-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: #9FB6F0; border: 1px solid rgba(110,140,224,.4); border-radius: var(--r-chip);
  padding: 3px 7px; display: inline-block;
}
.legal-role-tag.alt { color: #8FD4B0; border-color: rgba(143,212,176,.4); }

/* --- data tables --- */

.legal-table-wrap {
  margin-top: var(--s6); overflow-x: auto;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card);
  background: rgba(255,255,255,.03);
}
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.legal-table th {
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: #8FA6DF;
  padding: var(--s4) var(--s5); border-bottom: 1px solid rgba(255,255,255,.14);
  white-space: nowrap;
}
.legal-table td {
  padding: var(--s5); vertical-align: top; color: #B9C9EC; line-height: 1.62;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.legal-table tbody tr:last-child td { border-bottom: 0; }
.legal-table tbody tr:hover { background: rgba(255,255,255,.028); }
.legal-table td:first-child { width: 24%; min-width: 168px; }
.legal-table.two td:first-child { width: 34%; }
.legal-table.two td:last-child { color: #A9BCE6; }

.lt-ico {
  display: inline-flex; width: 30px; height: 30px; margin-bottom: var(--s2);
  align-items: center; justify-content: center; color: #7E9BEA;
  border: 1px solid rgba(110,140,224,.34); border-radius: var(--r-ctl);
  background: rgba(27,69,216,.14);
}
.lt-ico svg { width: 16px; height: 16px; }
.lt-name { display: block; color: #E7EEFC; font-weight: 500; font-size: 14px; }

/* --- lists --- */

.legal-list { list-style: none; padding: 0; margin: var(--s5) 0 0; max-width: 68ch; }
.legal-list li {
  position: relative; padding-left: var(--s6); margin-bottom: var(--s4);
  color: #B9C9EC; font-size: 14.5px; line-height: 1.7;
}
.legal-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 1px; background: var(--blue);
}
.legal-list.neg li::before {
  width: 9px; height: 9px; top: 8px; border-radius: 1px;
  background: none; border: 1px solid #6E8CE0;
}

/* --- numbered document lifecycle --- */

.legal-steps { list-style: none; padding: 0; margin: var(--s6) 0 var(--s6); counter-reset: none; }
.legal-steps li {
  display: flex; gap: var(--s5); align-items: flex-start;
  padding: var(--s5) 0; border-top: 1px solid rgba(255,255,255,.1);
}
.legal-steps li:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.legal-step-n {
  flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  color: #7E9BEA; padding-top: 2px;
}
.legal-steps h3 { color: #fff; font-size: 15.5px; margin: 0 0 var(--s2); }
.legal-steps p { margin: 0; font-size: 14px; }

/* --- sub-processors --- */

.legal-vendors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin: var(--s6) 0; }
.legal-vendor {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card);
  background: rgba(255,255,255,.035); padding: var(--s5) var(--s6);
}
.legal-vendor h3 { color: #fff; font-size: 15.5px; margin: 0 0 var(--s1); }
.legal-vendor-role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: #8FA6DF; display: block; margin-bottom: var(--s3);
}
.legal-vendor p { margin: 0; font-size: 13.5px; line-height: 1.68; }

/* --- closing promise cards --- */

/* minmax(0,...) not 1fr: the contact card holds an email address, which is one
   unbreakable token and would otherwise push that column past its equal share. */
.legal-cards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s7);
}
.legal-card {
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card);
  background: rgba(255,255,255,.04); padding: var(--s6);
  transition: border-color var(--t-std) var(--ease), background var(--t-std) var(--ease);
}
.legal-card:hover { border-color: rgba(110,140,224,.5); background: rgba(27,69,216,.1); }
.legal-card-ico {
  display: inline-flex; width: 38px; height: 38px; margin-bottom: var(--s4);
  align-items: center; justify-content: center; color: #7E9BEA;
  border: 1px solid rgba(110,140,224,.36); border-radius: var(--r-ctl);
  background: rgba(27,69,216,.15);
}
.legal-card-ico svg { width: 19px; height: 19px; }
.legal-card h3 { color: #fff; font-size: 14.5px; margin: 0 0 var(--s2); }
.legal-card p { margin: 0; font-size: 13px; line-height: 1.62; color: #A9BCE6; overflow-wrap: anywhere; }

/* --- responsive --- */

@media (max-width: 980px) {
  .legal-split, .legal-vendors { grid-template-columns: 1fr; }
  .legal-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .legal-hero { padding: var(--s9) 0 var(--s9); }
  .legal-ribbon { width: 104%; right: -12%; bottom: -3%; opacity: .24; }
  .legal { padding-top: var(--s7); }
  .legal-cards { grid-template-columns: 1fr; }
  .legal-callout { flex-direction: column; gap: var(--s4); padding: var(--s5); }
  .legal-h { font-size: 19px; margin-top: var(--s8); }

  /* Tables become stacked cards: a 3-column grid cannot survive 375px. */
  .legal-table-wrap { border: 0; background: none; overflow-x: visible; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: 100%; }
  .legal-table thead { display: none; }
  .legal-table tr {
    border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-card);
    background: rgba(255,255,255,.035); padding: var(--s5); margin-bottom: var(--s4);
  }
  .legal-table td, .legal-table.two td:first-child { padding: 0; border: 0; width: auto; min-width: 0; }
  .legal-table td + td { margin-top: var(--s4); }
  .legal-table td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block;
    font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; color: #8FA6DF; margin-bottom: 4px;
  }
  .legal-steps li { flex-direction: column; gap: var(--s2); }
}

@media (prefers-reduced-motion: reduce) {
  .legal-card { transition: none; }
}

/* --- 21. Marketing bands, capability cards, steps, trust ------------------
   The public homepage after the hero. Alternating off-white / cool-wash
   bands, each introduced by a mono eyebrow. Everything here is hairline
   borders and tight radii on purpose: rounded, shadowed cards read as
   generic SaaS, which this deliberately is not.
   ------------------------------------------------------------------------ */

.band { padding: var(--s10) 0; background: var(--wash); scroll-margin-top: calc(var(--header-h) + var(--s2)); }
.band.alt { background: var(--wash-cool); border-top: var(--bw) solid var(--line); border-bottom: var(--bw) solid var(--line); }
.band > .container { padding-top: 0; padding-bottom: 0; }

.band-head { max-width: 60ch; margin-bottom: var(--s9); }
.band-head h2 {
  font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.026em;
  line-height: 1.16; margin: var(--s3) 0 0; color: var(--navy);
}
.band-sub { color: var(--navy-soft); font-size: 15px; line-height: 1.7; margin: var(--s4) 0 0; }

/* --- capability cards --- */

.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.cap {
  position: relative; background: var(--paper);
  border: var(--bw) solid var(--line); border-radius: var(--r-card);
  padding: var(--s6);
  transition: transform var(--t-std) var(--ease),
              border-color var(--t-std) var(--ease),
              box-shadow var(--t-std) var(--ease);
}
.cap:hover {
  transform: translateY(-3px);
  border-color: var(--blue-line);
  box-shadow: 0 6px 20px -12px rgba(11,27,58,.34);
}
.cap-ix {
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: var(--s5);
}
.cap-ico {
  display: flex; width: 44px; height: 44px; margin-bottom: var(--s5);
  align-items: center; justify-content: center; color: var(--blue);
  border: var(--bw) solid var(--blue-line); border-radius: var(--r-ctl);
  background: var(--blue-fade);
}
.cap-ico svg { width: 22px; height: 22px; }
.cap h3 { font-size: 15.5px; margin: 0 0 var(--s2); color: var(--navy); }
.cap p { margin: 0; font-size: 13.5px; line-height: 1.66; color: var(--navy-soft); }

/* --- the two shipped tools --- */

.tool-strip {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-top: var(--s7); padding-top: var(--s7);
  border-top: var(--bw) solid var(--line);
}
.tool-item h3 { font-size: 17px; margin: var(--s2) 0 var(--s2); }
.tool-item p { margin: 0; font-size: 14px; color: var(--navy-soft); line-height: 1.68; max-width: 46ch; }

/* --- how it works --- */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6);
  position: relative;
}
.step { position: relative; display: flex; flex-direction: column; gap: var(--s5); }

/* Connector between steps. Sits behind the cards, drawn only where there is
   a following step. */
.step:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: 21px; left: calc(100% + 4px); width: calc(var(--s6) - 8px); height: 1px;
  background: linear-gradient(to right, var(--blue-line), var(--line));
}
.step-head { display: flex; gap: var(--s4); align-items: flex-start; }
.step-n {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--blue); border: var(--bw) solid var(--blue-line);
  background: var(--blue-fade); border-radius: var(--r-chip);
  padding: 5px var(--s2); line-height: 1;
}
.step-head h3 { font-size: 16px; margin: 0 0 var(--s2); }
.step-head p { margin: 0; font-size: 13.5px; line-height: 1.66; color: var(--navy-soft); }

.step-ui {
  position: relative; z-index: 1; flex: 1 1 auto;
  background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
}

/* --- trust --- */

.trust-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4);
}
.trust {
  background: var(--paper); border: var(--bw) solid var(--line);
  border-radius: var(--r-card); padding: var(--s6);
}
.trust > svg {
  width: 22px; height: 22px; color: var(--blue); display: block; margin-bottom: var(--s4);
}
.trust h3 { font-size: 15px; margin: 0 0 var(--s2); }
.trust p { margin: 0; font-size: 13.5px; line-height: 1.66; color: var(--navy-soft); }

/* --- 22. Product interface previews --------------------------------------
   Used by the How It Works steps. Built from real DOM rather than
   screenshots so they stay crisp, scale responsively, and carry no invented
   client or project data.

   The hero window that also lived here was removed at the owner's request;
   the parts below are the ones .step-ui still composes with.
   ------------------------------------------------------------------------ */

.ui-clause {
  border-left: 2px solid var(--blue);
  background: rgba(27,69,216,.12);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: var(--s3) var(--s4);
}
.ui-clause.tight { padding: var(--s3); }
.ui-clause p { margin: 0 0 var(--s2); font-size: 12.5px; line-height: 1.6; color: #D6E1F8; }
.ui-clause mark { background: rgba(110,140,224,.34); color: #fff; padding: 0 3px; border-radius: 2px; }
.ui-cite { font-family: var(--mono); font-size: 10px; color: #9FB6F0; }

.ui-row-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s3);
  align-items: center; padding: var(--s2) var(--s1);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #8FA6DF;
  border-bottom: var(--bw) solid rgba(255,255,255,.12); padding-bottom: var(--s2);
}

.ui-pill {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  border-radius: var(--r-chip); padding: 3px 6px; white-space: nowrap;
}
.ui-pill.ok   { color: #8FD4B0; background: rgba(16,113,74,.24); border: var(--bw) solid rgba(143,212,176,.34); }
.ui-pill.wait { color: #E8C88A; background: rgba(138,90,0,.24);  border: var(--bw) solid rgba(232,200,138,.32); }

/* --- light-ground preview parts, used inside .step-ui --- */

.ui-drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  border: 1px dashed var(--line-strong); border-radius: var(--r-ctl);
  background: var(--wash); padding: var(--s5) var(--s4);
  color: var(--navy-soft); font-size: 12px;
}
.ui-drop svg { width: 20px; height: 20px; color: var(--blue); }

.ui-thin {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  border: var(--bw) solid var(--line); border-radius: var(--r-ctl);
  padding: var(--s2) var(--s3); font-size: 12px; color: var(--navy);
}
.ui-thin.dim { color: var(--navy-soft); }
.ui-thin .mono { font-size: 10.5px; color: var(--navy-soft); }

.ui-progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.ui-progress span { display: block; height: 100%; width: 62%; background: var(--blue); border-radius: 2px; }

.ui-scan {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; color: var(--navy-soft);
  border-bottom: var(--bw) solid var(--line); padding-bottom: var(--s2);
}

.step-ui .ui-clause { background: var(--blue-fade); }
.step-ui .ui-clause p { color: var(--navy); }
.step-ui .ui-clause mark { background: rgba(27,69,216,.18); color: var(--navy); }
.step-ui .ui-clause .ui-cite { color: var(--blue); }
.step-ui .ui-row-head { color: var(--navy-soft); border-bottom-color: var(--line); }
.step-ui .ui-pill.ok { color: var(--ok); background: var(--ok-fade); border-color: rgba(16,113,74,.28); }
.step-ui .ui-pill.wait { color: var(--warn); background: var(--warn-fade); border-color: rgba(138,90,0,.26); }

.ui-export {
  display: flex; align-items: center; gap: var(--s3); margin-top: auto;
  border: var(--bw) solid var(--blue-line); border-radius: var(--r-ctl);
  background: var(--blue-fade); padding: var(--s3);
  font-size: 11.5px; color: var(--blue-deep);
}
.ui-export svg { width: 16px; height: 16px; color: var(--blue); flex: 0 0 auto; }

/* --- 23. Public site responsive ------------------------------------------ */

@media (max-width: 1080px) {
  /* Nav collapses into a disclosure panel. */
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto; z-index: var(--z-overlay);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #0B1B3A;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--bw) solid rgba(255,255,255,.14);
    padding: var(--s4) var(--s6) var(--s6);
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease),
                visibility var(--t-std) var(--ease);
  }
  body.nav-open .site-nav { transform: none; opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
  .site-nav a {
    padding: var(--s4) 0; font-size: 15px; color: #E7EEFC;
    border-bottom: var(--bw) solid rgba(255,255,255,.09);
  }
  .site-nav a::after { display: none; }
  .site-nav a.nav-cta {
    margin-top: var(--s5); text-align: center; border-bottom: 0;
    padding: var(--s4) var(--s5); font-size: 14px;
  }
}

@media (max-width: 1024px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: var(--s7); }
  .step:not(:last-child)::after {   /* connector turns vertical */
    top: auto; left: 21px; bottom: calc(var(--s7) / -1 + 6px);
    width: 1px; height: calc(var(--s7) - 12px);
    background: linear-gradient(to bottom, var(--blue-line), var(--line));
  }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s6); }
}

@media (max-width: 720px) {
  .hero { padding: var(--s10) 0 var(--s9); }
  .hero-meta { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .tool-strip { grid-template-columns: 1fr; gap: var(--s6); }
  .band { padding: var(--s9) 0; }
  .band-head { margin-bottom: var(--s7); }
}

@media (max-width: 560px) {
  .cap-grid, .trust-grid { grid-template-columns: 1fr; }
  /* Once the eyebrow wraps, the leading rule is stranded alone on line 1. */
  .tag-rule { display: block; font-size: 9.5px; letter-spacing: .13em; }
  .tag-rule::before { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s9) var(--s4) var(--s6); }
  .footer-bar { padding: var(--s5) var(--s4); flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .footer-legal { gap: var(--s3); }
  .hero::before { background-image: url('/static/brand/skyline-sm.jpg'); background-size: 280% auto; }
  .hero-ribbon { width: 88%; opacity: .18; }
}

/* --- 24. Motion for the public site -------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* The connector draws itself once, rather than looping forever. */
  .step:not(:last-child)::after { animation: draw-x var(--t-enter) var(--ease) both; }
  @keyframes draw-x { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
  .ui-progress span { animation: fill-bar 1.6s var(--ease) both; }
  @keyframes fill-bar { from { width: 8%; } to { width: 62%; } }
}
@media (prefers-reduced-motion: reduce) {
  .cap, .cap:hover { transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --- 25. Legal page: sticky section nav + back to top --------------------- */

.legal-toc {
  position: sticky; top: calc(var(--header-h) + var(--s5));
  max-height: calc(100dvh - var(--header-h) - var(--s8)); overflow-y: auto;
  border-left: var(--bw) solid rgba(255,255,255,.14);
  padding-left: var(--s5);
}
.legal-toc-h {
  font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: #8FA6DF; margin: 0 0 var(--s4);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: var(--s3); padding: 7px 0;
  font-size: 12.5px; line-height: 1.45; color: #A9BCE6; text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono); font-size: 10px; color: #6E8CE0; flex: 0 0 auto; padding-top: 1px;
}
.legal-toc a:hover { color: #fff; }

/* Back to top. Fixed, and only once the reader is far enough down to want it. */
.to-top {
  position: fixed; right: var(--s6); bottom: var(--s6); z-index: var(--z-overlay);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: var(--bw) solid rgba(255,255,255,.2); border-radius: var(--r-ctl);
  background: rgba(11,27,58,.9); color: #C4D2F0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--t-std) var(--ease), transform var(--t-std) var(--ease),
              visibility var(--t-std) var(--ease), border-color var(--t-micro) var(--ease);
}
body.is-deep .to-top { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: #fff; border-color: rgba(255,255,255,.45); }
.to-top svg { width: 18px; height: 18px; }

.legal-lockup { width: 168px; height: auto; display: block; margin-bottom: var(--s7); }

@media (max-width: 980px) {
  main > .container.legal-wrap { grid-template-columns: 1fr; gap: var(--s7); }
  /* Unpin: a sticky rail with nothing beside it just eats the viewport. */
  .legal-toc {
    position: static; max-height: none; border-left: 0; padding-left: 0;
    border: var(--bw) solid rgba(255,255,255,.14); border-radius: var(--r-card);
    padding: var(--s5); background: rgba(255,255,255,.03);
  }
  .legal-toc ol { columns: 2; column-gap: var(--s6); }
}
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
  .to-top { right: var(--s4); bottom: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* --- 26. Focus rings on dark surfaces ------------------------------------
   The global ring is --blue (#1B45D8), which measures only 2.34:1 against
   the navy ground. WCAG 2.2 wants >= 3:1 for a focus indicator, so every
   dark section switches to the light blue, which measures 8.45:1.
   ------------------------------------------------------------------------ */

.site-footer :focus-visible,
.hero :focus-visible,
.contact :focus-visible,
.legal-hero :focus-visible,
header.site-header :focus-visible,
body.theme-dark :focus-visible {
  outline: 2px solid #9FB6F0;
  outline-offset: 3px;
  border-radius: 2px;
}
/* The primary CTA is royal blue on navy; its ring needs to clear the button
   itself, not just the section behind it. */
.hero-actions .btn:focus-visible,
.site-nav a.nav-cta:focus-visible,
.contact-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* --- 27. Language switcher ------------------------------------------------
   Two-segment control. Deliberately small and quiet: it is a preference, not
   a call to action, so it should never compete with the sign-in button.
   ------------------------------------------------------------------------ */

/* Trailing group: nav links then the language switcher, so the switcher sits
   at the edge of the bar rather than floating between logo and nav. */
.header-right { display: flex; align-items: center; gap: var(--s6); }
.header-tail { display: flex; align-items: center; gap: var(--s3); }

.lang {
  display: inline-flex; align-items: stretch;
  border: var(--bw) solid rgba(255,255,255,.22);
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}
.lang-opt {
  display: flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 0 var(--s2); height: 30px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: #A9BCE6; text-decoration: none; white-space: nowrap;
  transition: background var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.lang-opt[lang="ar"] {
  /* The Arabic glyph needs its own stack and a touch more size to sit on the
     same optical baseline as the Latin "EN". */
  font-family: var(--arabic); font-size: 13px; letter-spacing: 0;
  padding-bottom: 2px;
}
.lang-opt + .lang-opt { border-inline-start: var(--bw) solid rgba(255,255,255,.18); }
.lang-opt:hover { background: rgba(255,255,255,.09); color: #fff; }
.lang-opt.is-on { background: var(--blue); color: #fff; }
.lang-opt.is-on:hover { background: var(--blue-deep); }
.lang-opt:focus-visible { outline: 2px solid #9FB6F0; outline-offset: 2px; }

/* The signed-in nav puts the switcher inline with the other links, where it
   needs a little breathing room before the sign-out button. */
.site-nav .lang { margin-inline-start: var(--s2); }

@media (max-width: 1080px) {
  /* Stays in the header bar rather than inside the collapsed menu: changing
     language is a top-level action and should not need two taps. */
  .header-tail { gap: var(--s2); }
  /* Bigger touch target on phones. 24px clears WCAG 2.2 AA, but a language
     toggle next to a hamburger wants more room than the bare minimum. */
  .lang-opt { min-width: 38px; height: 36px; }
}

/* The upsell card places a tag at the trailing edge; reserve room so the
   tool key never runs under it in either direction. */
.tool-card.upsell .tool-key { padding-inline-end: 72px; }

/* --- 28. RTL -------------------------------------------------------------
   The layout is built with flex/grid and logical properties, so most of it
   mirrors for free once dir="rtl" is set. These are the places that hardcode
   a physical side and therefore need an explicit flip.
   ------------------------------------------------------------------------ */

[dir="rtl"] body,
[dir="rtl"] .lead,
[dir="rtl"] p { letter-spacing: normal; }

/* Headings and body copy in Arabic need more leading than the Latin scale. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.35; letter-spacing: 0; }
[dir="rtl"] .hero h1 { line-height: 1.3; }
[dir="rtl"] .lead, [dir="rtl"] .band-sub, [dir="rtl"] .contact-lead { line-height: 1.85; }

/* Eyebrow rule sits before the label; in RTL "before" is the right edge and
   flex already handles it, but the mono tracking has to go. */
[dir="rtl"] .tag-rule,
[dir="rtl"] .contact-eyebrow,
[dir="rtl"] .tlabel,
[dir="rtl"] .footer-h,
[dir="rtl"] .cap-ix,
[dir="rtl"] .legal-toc-h { letter-spacing: .04em; }

/* Accent bars and left borders are physical; mirror them. */
[dir="rtl"] .ui-clause {
  border-left: 0; border-right: 2px solid var(--blue);
  border-radius: var(--r-ctl) 0 0 var(--r-ctl);
}
[dir="rtl"] .legal-note { border-left: 0; border-right: 2px solid var(--blue); padding: var(--s1) var(--s5) var(--s1) 0; }
[dir="rtl"] .legal-toc { border-left: 0; border-right: var(--bw) solid rgba(255,255,255,.14); padding-left: 0; padding-right: var(--s5); }
[dir="rtl"] .contact-note { border-left-width: var(--bw); }

/* Corner brackets: swap which corners are drawn so the marks stay on the
   leading and trailing edges rather than jumping inside. */
[dir="rtl"] .brackets::before { left: auto; right: -1px; border-width: var(--bw) var(--bw) 0 0; }
[dir="rtl"] .brackets::after  { right: auto; left: -1px; border-width: 0 0 var(--bw) var(--bw); }

/* Directional glyphs. The submit arrow and the "see how it works" chevron
   point along the reading direction, so the horizontal one must flip. */
[dir="rtl"] .contact-submit svg { transform: scaleX(-1); }

/* Plates. In LTR the copy sits left and the skyline fills the right. RTL
   moves the copy to the right, so the artwork has to move with it or the
   headline (and the logo in the header) end up on top of the bright towers.
   Mirroring the background layer is the only way to shift the crop, because
   background-position cannot place a right-hand slice on the left.

   The UAE ribbon is a separate element and is NOT mirrored: it carries the
   real flag, and a mirrored flag puts the red hoist bar on the wrong side.
   It is repositioned instead. */
[dir="rtl"] .hero::before,
[dir="rtl"] .hero::after,
[dir="rtl"] .contact::before,
[dir="rtl"] .contact::after,
[dir="rtl"] .legal-hero::before,
[dir="rtl"] .legal-hero::after { transform: scaleX(-1); }

/* Mirroring also flips the UAE flag baked into the right-hand end of the
   artwork, which would put the red hoist bar on the wrong side. Pull the crop
   back so the flag falls outside the visible window in RTL; the towers, which
   are the point of the image, still fill it.

   Window maths: at background-size S and container width W the visible slice
   is W/(S*W) of the image, and background-position p maps to an offset of
   p*(S-1)*W. 83% on a 250% crop shows image fraction 0.50-0.90; the flag sits
   at roughly 0.90-0.94. */
[dir="rtl"] .hero::before    { background-position: 83% 45%; }
[dir="rtl"] .contact::before { background-position: 84% 40%; }

[dir="rtl"] .hero-ribbon,
[dir="rtl"] .contact-ribbon,
[dir="rtl"] .legal-ribbon {
  right: auto; left: -4%;
  background-position: left bottom;
  mask-image: linear-gradient(72deg, #000 14%, rgba(0,0,0,.35) 58%, transparent 92%);
  -webkit-mask-image: linear-gradient(72deg, #000 14%, rgba(0,0,0,.35) 58%, transparent 92%);
}

/* The step connector runs left-to-right; in RTL it must run the other way. */
[dir="rtl"] .step:not(:last-child)::after {
  left: auto; right: calc(100% + 4px);
  background: linear-gradient(to left, var(--blue-line), var(--line));
}
@media (max-width: 1024px) {
  [dir="rtl"] .step:not(:last-child)::after { right: 21px; left: auto; }
}

/* Mono runs of Latin text (emails, phone numbers, file names) must stay LTR
   inside an RTL paragraph or the punctuation reorders. */
[dir="rtl"] .mono,
[dir="rtl"] .contact-details a,
[dir="rtl"] .footer-contact a,
[dir="rtl"] code { direction: ltr; unicode-bidi: embed; text-align: start; }

[dir="rtl"] .to-top { right: auto; left: var(--s6); }
@media (max-width: 560px) {
  [dir="rtl"] .to-top { left: var(--s4); right: auto; }
}

/* --- 29. Tool run progress ------------------------------------------------
   Shown under the status chip while a run is in flight. Reading a full
   specification takes minutes, and a bare "processing" chip for that long
   reads as a hang.
   ------------------------------------------------------------------------ */

.run-progress {
  display: flex; flex-direction: column; gap: 5px;
  margin-top: var(--s2); max-width: 260px;
}
.run-progress-bar {
  display: block; height: 3px; width: 100%;
  background: var(--line); border-radius: 2px; overflow: hidden;
}
.run-progress-bar > span {
  display: block; height: 100%; width: 0;
  background: var(--blue); border-radius: 2px;
  transition: width var(--t-std) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .run-progress-bar > span { transition: none; }
}
.run-progress-text {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--navy-soft); overflow-wrap: anywhere;
}