/* =====================================================================
   WARAH — HR & Workforce Platform
   Minimal / premium · flat (no shadows) · Bootstrap 5 grid + utilities
   Palette: White · Picton Blue · Raisin Black  (subtle brand hints)
   Type: Inter Tight (400/500/600) · Icons: Lucide
   ===================================================================== */


/* ---------------------------------------------------------------------
   SELF-HOSTED TYPE
   Inter Tight, latin + latin-ext only. Removes the fonts.googleapis.com
   round trip (DNS + TLS + a 544ms CSS fetch) from the critical path.
   --------------------------------------------------------------------- */
/* One variable font file per subset covers every weight the sheet uses
   (400-600), so each subset is declared once with the full weight range. */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Noto Sans Arabic, self-hosted variable font (100–900). The unicode-range
   means English visitors never download it: the browser only fetches it once
   Arabic text is on the page. WOFF2 first (360KB), the original TTF as fallback. */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/noto-sans-arabic-var.woff2') format('woff2'),
       url('../fonts/NotoSansArabic-VariableFont_wdth,wght.ttf') format('truetype');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
  /* Brand — Picton Blue accent scale (unchanged hue, extended for depth) */
  --blue:        #5FA8D3;   /* Picton Blue (brand) */
  --blue-600:    #3E8FC4;
  --blue-700:    #2876AA;   /* accent / links / icons — 4.5:1 on white and on the grey band */
  --blue-800:    #215F87;
  --blue-900:    #16405C;   /* deep brand blue for dark-surface accents */
  --blue-050:    #EFF6FC;   /* tint surface */
  --blue-100:    #DBEDF9;
  --blue-200:    #C1E0F3;

  /* Ink — cool near-black, layered for premium depth */
  --ink:         #171A1F;   /* text / headings (Raisin Black, cooled) */
  --ink-2:       #39434F;   /* secondary text */
  --ink-surface:   #12161C; /* large dark surfaces */
  --ink-surface-2: #191F27; /* raised dark surface */
  --black:       #000000;
  --white:       #FFFFFF;

  /* Subtle hint accents */
  /* Type scale. Every static font-size in the sheet snaps to one of these;
     anything outside the scale is a clamp() that scales with the viewport. */
  --fs-3xs:   0.68rem;
  --fs-2xs:   0.74rem;
  --fs-xs:    0.8rem;
  --fs-sm:    0.86rem;
  --fs-base:  0.94rem;
  --fs-md:    1.0rem;
  --fs-lg:    1.12rem;
  --fs-xl:    1.28rem;
  --green:       #7FC98A;
  /* Status colours. Both are checked against white: error text 6.54:1,
     white on the success fill 6.15:1 — AA at any size. */
  --red-600:     #B3261E;
  --red-050:     #FDF2F1;
  --green-600:   #12703F;
  --orange:      #FF9F1C;
  --yellow:      #FFE135;

  /* Neutrals — cool, refined ladder */
  --grey-50:     #F5F8FB;
  --grey-100:    #EFF3F8;
  --grey-200:    #E7ECF2;
  --grey-300:    #D6DDE7;
  --grey-500:    #66717E;   /* small labels — 4.5:1 on white AND on the grey band */
  --grey-600:    #515B6A;

  /* Semantic */
  --bg:          #FFFFFF;   /* pure white ground; hairlines and type carry the hierarchy */
  --text:        var(--ink);
  --muted:       #58616F;
  --line:        #E8EDF3;   /* hairline */
  --line-2:      #DCE2EB;

  --radius:      16px;
  --radius-sm:   12px;
  --radius-xs:   10px;
  --radius-2xs:  5px;
  --radius-lg:   28px;
  --radius-pill: 999px;
  --radius-btn:  8px;     /* every clickable button */

  --container:   1180px;
  --ease:        cubic-bezier(.22,.61,.36,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);

  --ff:          'Inter Tight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;  /* body / UI */
  --ff-display:  'Inter Tight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;  /* headings / display */

  /* Weight scale — regular / medium / semibold only */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
}


/* ---------------------------------------------------------------------
   UTILITIES
   --------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-md);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); color: var(--ink); line-height: 1.08; letter-spacing: -.028em; margin: 0 0 .5em; font-weight: 600; }
strong, b { font-weight: 600; }
p { margin: 0 0 1rem; }
a { color: var(--blue-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--blue-800); }
img { max-width: 100%; height: auto; display: block; } /* responsive by default; prevents CLS with width/height attrs */
svg { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 3px; border-radius: var(--radius-2xs); }
/* Containers focused only to move the reading position (skip link, in-page
   anchors) are not controls, so they take no ring. */
[tabindex="-1"]:focus { outline: none; }

/* Icon defaults — inline <use> sprite; these are inherited by the symbol */
.ico {
  width: 20px; height: 20px; vertical-align: middle; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.container-x { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(54px, 6.4vw, 100px) 0; position: relative; }
.section--tight { padding: clamp(34px, 4vw, 52px) 0; }
.bg-tint  { background: #fff; }
.bg-ink   { background: var(--ink-surface); color: #fff; }
.bg-grey  { background: #fff; }
.hr-line  { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Typography scale ---------- */
.display {
  /* Sentence case: all-caps at this size loses word shape and reads slowly */
  font-weight: 600;
  font-size: clamp(2.4rem, 5.8vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.032em;
  text-transform: none;
  text-wrap: balance;
  margin-bottom: .42em;
}
.h-xl { font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 600; letter-spacing: -.03em; }
.h-lg { font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 600; letter-spacing: -.028em; }
.h-md { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
.lead { font-size: clamp(1.06rem, 1.35vw, 1.24rem); color: var(--muted); font-weight: 500; line-height: 1.6; letter-spacing: -.008em; }
.eyebrow {
  display: inline-flex; align-items: center; font-family: var(--ff-display);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue-700);
}
.eyebrow.center-eb { justify-content: center; }
.text-muted-2 { color: var(--muted); }
.text-blue { color: var(--blue-700); }
.grad-text { color: var(--blue); }

/* ---------- Buttons (flat) ---------- */
.btn {
  --btn-bg: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--ff); font-weight: 600; font-size: var(--fs-md); line-height: 1; letter-spacing: -.01em;
  padding: 15px 26px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .3s var(--ease-out), background .22s var(--ease), color .22s, border-color .22s;
  white-space: nowrap; text-decoration: none;
}
.btn svg { transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn, .nav-link, .tab-btn, .faq-q, .lang-toggle, .nav-toggle, .to-top, .socials a { touch-action: manipulation; }

/* Brand blue fill. Ink text, not white: white on #5FA8D3 is 2.6:1, ink is 6.7:1. */
.btn-primary { background: var(--blue); color: var(--ink); }
.btn-primary:hover { background: var(--blue-600); color: var(--ink); }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn-light { background: #fff; color: var(--ink); }
.btn-light:hover { color: var(--blue-800); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.btn-lg { padding: 18px 34px; font-size: 1.06rem; }
.btn-sm { padding: 11px 18px; font-size: .9rem; }
.btn-block { width: 100%; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue-700); }
.link-arrow svg { transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ---------- Announcement bar ---------- */
.topbar {
  background: var(--ink-surface); color: #fff; text-align: center;
  font-size: .9rem; font-weight: 600; padding: 9px 16px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.topbar .pill { background: var(--blue); color: var(--ink); font-weight: 600; font-size: var(--fs-2xs);
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-pill); }
.topbar a { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: var(--blue); }
.topbar a svg { width: 15px; height: 15px; }

/* ---------- Header / Nav ---------- */
.header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; }
.header.is-stuck { border-color: var(--line); background: #fff; }
.nav { display: flex; align-items: center; gap: 28px; height: 74px; flex-wrap: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Wordmark lockup — a transparent black PNG, tinted per surface with a filter */
.brand .brand-logo { height: 30px; width: auto; display: block; }
[dir="rtl"] .brand .brand-logo { height: 34px; }
.footer .brand .brand-logo { filter: invert(1); }   /* black art -> white on the dark footer */
.mobile-menu .brand .brand-logo { height: 28px; }

.nav-menu { display: flex; align-items: center; gap: 2px; margin: 0 auto 0 12px; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px;
  /* Products and Company are <button>s, which take the browser's own font,
     spacing and line height instead of the page's; these keep all five items
     identical. */
  font-family: var(--ff); letter-spacing: inherit; line-height: inherit; text-rendering: inherit;
  font-weight: 600; font-size: var(--fs-md); color: var(--ink); border-radius: var(--radius-xs); cursor: pointer; background: none; border: 0; }
.nav-link:hover { color: var(--blue-700); background: var(--blue-050); }
.nav-link.active { color: var(--blue-800); }
.nav-link.active::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background: var(--blue); border-radius:2px; }
.nav-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.has-mega:hover .nav-link svg, .has-mega.is-open .nav-link svg { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Mega dropdown */
.has-mega { position: relative; }
.mega {
  /* Anchored to the trigger's leading edge, not centred on it: a centred menu
     this wide runs off the left of the viewport on narrow desktop widths. */
  position: absolute; top: calc(100% + 12px); left: 0; transform: translateY(10px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-width: 460px; max-width: calc(100vw - 32px);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; z-index: 1200;
}
[dir="rtl"] .mega { left: auto; right: 0; }
.has-mega:hover .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.mega-item { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-sm); transition: background .18s; align-items:flex-start; }
.mega-item:hover { background: var(--blue-050); }
.mega-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-700); border: 1px solid var(--blue-100); }
.mega-ico svg { width: 20px; height: 20px; }
.mega-item .mega-title { display:block; margin: 0 0 2px; font-size: var(--fs-base); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.mega-item p { margin: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }

/* Compact mega: two columns of single-line entries, split into groups by a
   full-width rule, with an optional link across the bottom. */
.mega-compact { min-width: 566px; padding: 12px; gap: 2px 8px; align-items: start; }
.mega-compact .mega-item { align-items: center; gap: 11px; padding: 10px 12px; }
.mega-compact .mega-ico {
  width: 30px; height: 30px; border-radius: var(--radius-xs);
  background: transparent; border: 0; color: var(--blue-700);
}
.mega-compact .mega-ico svg { width: 19px; height: 19px; }
.mega-compact .mega-title { margin: 0; font-size: var(--fs-base); font-weight: 500; }
.mega-compact .mega-item:hover .mega-title { color: var(--blue-800); }
.mega-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 12px; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 600; color: var(--blue-700);
}
.mega-foot svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.mega-foot:hover svg { transform: translateX(3px); }
[dir="rtl"] .mega-foot svg { transform: scaleX(-1); }
[dir="rtl"] .mega-foot:hover svg { transform: scaleX(-1) translateX(3px); }

.nav-toggle { display: none; background: none; border: 0; padding: 9px; cursor: pointer; color: var(--ink); width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(52px, 7vw, 98px) 0 clamp(68px, 7vw, 104px); overflow: hidden; }
/* Hero ground: a faint line grid that fades out towards the edges. Drawn
   in CSS behind the content, so it costs no request and never catches a
   click. */
.hero::before { content: ""; position: absolute; pointer-events: none; z-index: 0; }
.hero::before {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(95,168,211,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,168,211,.10) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 30%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 58% at 50% 30%, #000 25%, transparent 78%);
}
.hero > .container-x { position: relative; z-index: 1; }

.hero-inner { text-align: center; max-width: 900px; margin-inline: auto; }
.hero .display { margin: 20px 0 22px; }
.hero .lead { max-width: 620px; margin: 0 auto 32px; }
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-note { color: var(--muted); font-weight: 600; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: 8px; }
.hero-note svg { color: var(--blue-700); width: 18px; height: 18px; }
.chip { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 500; font-size: var(--fs-sm); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(150,224,114,.22); }

.hero-rotator {
  font-weight: 600; font-size: clamp(1rem, 1.9vw, 1.32rem); color: var(--muted); margin: 22px 0 26px; }
.hero-rotator .rot { display: inline-block; color: var(--blue-700); background: var(--blue-050);
  border: 1px solid var(--blue-100); padding: 5px 16px; border-radius: var(--radius-pill);
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.hero-rotator .rot.swap { opacity: 0; transform: translateY(6px); }

/* Hero app mock */
.hero-app { margin-top: clamp(40px, 5vw, 66px); position: relative; }
/* A soft pool of the brand blue under the lower half of the dashboard, so it
   sits on light rather than floating on flat white. Behind the dashboard,
   never over it. */
.hero-app::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* Centred on the dashboard's bottom edge so the colour shows below it, and
     ending inside the hero's bottom padding so the hero's overflow clip never
     cuts the fade off in a hard line. */
  left: 50%; bottom: -92px; width: 118%; height: 240px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(95,168,211,.36), rgba(95,168,211,.14) 55%, transparent);
}
/* Phones have less padding under the hero, so the pool is shallower. */
@media (max-width: 640px) { .hero-app::before { bottom: -60px; height: 150px; width: 130%; } }

/* ---------- Trusted by ----------
   A still wall rather than a ticker. At this count a moving strip would be a
   loop of ten logos chasing itself; standing still, the row reads in one pass
   and costs no compositing at all.

   Two hairlines close the band top and bottom, giving the logos an edge to sit
   against instead of floating in the page. Every mark is pre-flattened to one
   ink and one height by the folder's build script, so the row keeps a single
   optical baseline whatever shape each logo is. */
.trusted { padding-block: clamp(44px, 5.4vw, 76px); }
.trusted-title {
  margin: 0 0 clamp(30px, 3.4vw, 46px);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey-500); text-align: center;
}
/* One line, with the slack between logos rather than at the ends, so the row
   fills the measure at any width instead of pooling in the middle. */
.trusted-wall {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: nowrap; gap: clamp(12px, 1.5vw, 18px);
  padding-block: clamp(30px, 3.6vw, 50px);
  border-block: 1px solid var(--line);
}
/* Each file is written onto a canvas of one height with the mark scaled to its
   optical size inside it, so one CSS height here means one apparent size. */
/* The height sets how much of the line the marks take, and space-between
   hands whatever is left to the gaps. Dropping it a few pixels buys a lot of
   air between logos without the row ever leaving one line. */
.logo-cell { height: clamp(24px, 3vw, 36px); flex-shrink: 0; display: flex; align-items: center; }
.logo-img {
  height: 100%; width: auto; max-width: none; display: block;
  /* The files themselves are solid black (build-logos.py), so no filter.
     Static: no hover state, so the wall reads as one even row of marks. */
}
/* Two marks carry little ink for their box (a fine-line emblem, a thin
   script) and still read smaller than the wordmarks at the shared height.
   A visual scale evens them out without moving the grid. */
.logo-img[src*="yardek"]    { transform: scale(1.32); }
.logo-img[src*="mates"]     { transform: scale(1.18); }
/* Wordmark fallback, shown only until the real logos load. */
.logo-word {
  font-weight: 600; font-size: var(--fs-sm); color: #000;
  letter-spacing: -.01em; white-space: nowrap;
}
/* Below this one line would shrink the marks past reading size, so the wall
   becomes an even two-column grid. Every logo keeps the same height and its
   own width: the files are already optically balanced at a shared height,
   so capping widths (as before) shrank only the wide wordmarks. */
@media (max-width: 680px) {
  .trusted-wall {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(26px, 7vw, 34px) 16px; justify-items: center; align-items: center;
  }
  .logo-cell { height: 36px; width: 100%; justify-content: center; }
  .logo-img { max-width: 100%; object-fit: contain; }
}

/* ---------- Section head ---------- */
.section-head { max-width: 720px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head .lead { margin-top: 12px; }

/* ---------- Feature tabs ----------
   A rail of labels on a hairline rather than a pill inside a pill: the
   underline says which one is open and nothing else is drawn. */
.tabs-nav {
  display: flex; gap: clamp(18px, 2.6vw, 38px); flex-wrap: nowrap;
  margin: clamp(30px, 4vw, 48px) auto 0; width: max-content; max-width: 100%;
  border-bottom: 1px solid var(--line);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  position: relative; border: 0; background: transparent; cursor: pointer;
  font-family: var(--ff); font-weight: 600; font-size: var(--fs-base);
  color: var(--grey-500); padding: 0 0 15px; white-space: nowrap; flex-shrink: 0;
  transition: color .22s var(--ease);
}
/* The indicator is a pseudo-element so switching tabs moves colour, not layout. */
.tab-btn::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
  background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .28s var(--ease-out);
}
.tab-btn[aria-selected="true"] { color: var(--ink); }
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }
.tab-btn:hover:not([aria-selected="true"]) { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .tab-btn::after { transition: none; } }

/* Panels. Only the active one is in the flow; `hidden` keeps the rest out of
   the a11y tree and out of tab order. */
.tab-panels { margin-top: 44px; }
.tab-panel[hidden] { display: none; }
.tab-panel.is-active { animation: fadeUp .5s var(--ease); }

.feature-split { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(28px,4vw,64px); align-items: center; }
.feature-copy h3 { font-size: clamp(1.7rem,3vw,2.45rem); margin-bottom: 16px; }
.feature-list { margin: 22px 0 28px; display: grid; gap: 12px; }
.feature-list li { display: flex; gap: 12px; align-items: center; font-weight: 600; color: var(--ink-2); }
.feature-list .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--blue-050); color: var(--blue-700); display: grid; place-items: center; border: 1px solid var(--blue-100); }
.feature-list .ck svg { width: 14px; height: 14px; }
.feature-visual { position: relative; }
/* One height for every panel's mock, so switching tabs never jumps the page. */

@media (prefers-reduced-motion: reduce) { .tab-panel.is-active { animation: none; } }

/* ---------- Stats (light, Homebase-style) ---------- */
.stats-head { text-align:center; max-width: 640px; margin: 0 auto 44px; }
.stats-grid { display:grid; grid-template-columns: repeat(3,1fr); }
.stat { padding: 10px clamp(20px,3vw,40px); border-left: 1px solid var(--line); text-align:center; }
.stat:first-child { border-left: 0; }
.stat .s-num { font-family: var(--ff-display); font-size: clamp(2.8rem,6vw,4.4rem); font-weight: 600; letter-spacing:-.045em; line-height:1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: var(--blue); display:inline-block; }
.stat .s-lab { font-weight:600; font-size:1.08rem; margin: 12px 0 8px; color: var(--ink); }
.stat .s-desc { color: var(--muted); font-size: var(--fs-base); margin:0; }
.eco-ico .ico { width: 22px; height: 22px; stroke-width: 1.75; }/* Quiet outline badge — a solid black pill shouted louder than the card */

/* ---------- Why / bento grid ----------
   One surface, one layout, one accent. Every tile is the same column —
   icon at the top, copy on the baseline — so the grid does the composing
   and the tiles stay quiet. */



/* quote block */
.quote-band { text-align:center; }
.quote-band .q { font-size: clamp(1.5rem,3.3vw,2.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.22; max-width: 900px; margin: 16px auto 0; }

/* ---------- Migration steps ---------- */


/* ---------- Split feature (experience/access) ---------- */
.split2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.panel { border-radius: var(--radius-lg); padding: clamp(30px,4vw,52px); position:relative; overflow:hidden; }
.panel.dark { background: var(--ink-surface); color:#fff; }
/* Brand blue plate: ink type, as on the closing CTA band, so it stays legible. */
.panel.blue { background: var(--blue); color: var(--ink); }
.panel.blue h3 { color: var(--ink); }
.panel.blue p { color: rgba(23,26,31,.8); }
.panel.blue .eyebrow { color: var(--ink); }
.panel.blue .p-list .ck { background: rgba(23,26,31,.12); }
.panel h3 { color:#fff; font-size: clamp(1.5rem,2.6vw,2.1rem); }
.panel p { color: rgba(255,255,255,.82); }
.panel .p-list { margin-top:20px; display:grid; gap:12px; }
.panel .p-list li { display:flex; gap:10px; align-items:center; font-weight:500; }
.panel .p-list .ck { width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;flex-shrink:0; }
.panel .p-list .ck svg { width:13px; height:13px; }

/* =====================================================================
   COMPANY
   Three sections that used to be three grids of bordered cards. The page
   argues one thing at a time now: a claim with its evidence listed under it,
   a sequence, and the people. Hairlines carry the structure, so nothing is
   boxed and nothing lifts on hover.
   ===================================================================== */
.co-eb {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700);
}
.co-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--blue-200);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .co-rule { transform-origin: right center; }
.js [data-reveal]:not(.in) .co-rule { transform: scaleX(0); }
.wy-eb, .mg-eb, .ld-eb { }
.co-top {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(22px, 3.6vw, 64px); align-items: end;
}
.co-top h2 {
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-size: clamp(1.75rem, 3.4vw, 2.8rem);
  font-weight: 600; letter-spacing: -.038em; line-height: 1.06; text-wrap: balance;
}
.co-lead {
  margin: 0 0 clamp(2px, .6vw, 7px);
  font-size: var(--fs-md); font-weight: 500; line-height: 1.62; color: var(--muted);
}

/* Why Warah: the three constants as a strip, then the reasons as an index. */
.wy-strip {
  margin-top: clamp(34px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 40px);
}
.wy-fact {
  padding-top: clamp(14px, 1.6vw, 18px); border-top: 1px solid var(--ink);
  font-family: var(--ff-display); font-size: clamp(1rem, 1.5vw, 1.22rem);
  font-weight: 600; letter-spacing: -.028em; color: var(--ink);
}
.wy-list { margin-top: clamp(34px, 4.4vw, 62px); border-top: 1px solid var(--line-2); }
.wy-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(14px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(17px, 1.9vw, 24px) 0; border-bottom: 1px solid var(--line);
}
.wy-n, .mg-n {
  font-family: var(--ff-display); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: .14em; color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.wy-row h3 {
  margin: 0; font-size: clamp(1.08rem, 1.8vw, 1.42rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.15; text-wrap: balance;
}
.wy-row p { margin: 0; color: var(--muted); font-weight: 500; font-size: var(--fs-sm); line-height: 1.55; }

/* Migration: a sequence, so the three sit on one rule and read across. */
.mg-steps {
  margin-top: clamp(34px, 4.4vw, 62px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 56px);
}
.mg-step { padding-top: clamp(16px, 1.8vw, 22px); border-top: 1px solid var(--ink); display: grid; gap: 9px; align-content: start; }
.mg-step h3 { margin: 0; font-size: clamp(1.08rem, 1.6vw, 1.3rem); font-weight: 600; letter-spacing: -.028em; }
.mg-step p { margin: 0; color: var(--muted); font-weight: 500; font-size: var(--fs-sm); line-height: 1.55; }
.mg-note {
  margin: clamp(30px, 3.4vw, 48px) 0 0; max-width: 62ch;
  font-size: var(--fs-base); font-weight: 600; color: var(--grey-500);
}

/* Leadership: portraits on the page, not in cards. */
/* Rows sit further apart than columns. With equal gaps the grid reads as a
   field of tiles; with the rows opened up it reads as rows of people, and the
   caption stays attached to the portrait above it rather than floating between
   two of them. */
.ld-grid {
  margin-top: clamp(34px, 4.4vw, 62px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(30px, 3.8vw, 52px);
}
.ld-person { margin: 0; display: grid; gap: clamp(12px, 1.1vw, 16px); }
.ld-person img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center;
  display: block; border-radius: clamp(10px, 1vw, 14px); background: var(--grey-100);
}
/* Name and role on one side, the profile link on the other. The glyph is bare
   rather than ringed: a circle round it would put a box back on a page that
   just lost all of them. */
/* Aligned to the name, not to the centre of the pair: centred, the glyph
   floated in the gap between the two lines and belonged to neither. */
.ld-person figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ld-id { display: grid; gap: 3px; min-width: 0; }
.ld-name { font-family: var(--ff-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.022em; color: var(--ink); }
.ld-role { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.ld-in {
  flex-shrink: 0; line-height: 0; color: var(--grey-500);
  /* 18px glyph, 44px hit area: the padding is cancelled by the margin so
     the icon stays exactly where it was. */
  padding: 13px; margin: -10px -13px -13px;
  transition: color .25s var(--ease);
}
.ld-in .ico { width: 17px; height: 17px; }   /* solid LinkedIn mark (.ico-brand), as in the footer */
.ld-in:hover { color: var(--blue-700); }

@media (max-width: 980px) {
  .co-top { grid-template-columns: 1fr; align-items: start; gap: clamp(18px, 3vw, 26px); }
  .ld-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .wy-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px; }
  .wy-row p { grid-column: 2; }
  .wy-strip, .mg-steps { grid-template-columns: 1fr; gap: 0; }
  .wy-fact, .mg-step { border-top: 1px solid var(--line-2); padding-block: clamp(14px, 3vw, 18px); }
  .wy-fact:first-child, .mg-step:first-child { border-top-color: var(--ink); }
  .ld-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .co-rule { transition: none; transform: none; } }

/* ---------- Closing CTA band ----------
   One plate of brand blue, no frame around it. The brand mark is cropped hard
   against two edges of the plate, which reads as deliberate where shaving one
   edge reads as an accident.

   Everything that moves here moves on transform or opacity, and leans on the
   two house easing curves rather than a browser default. */
.ctafin-sec { padding-block: clamp(64px, 8vw, 128px); }

.ctafin { border-radius: var(--ctafin-r, 34px); }
.ctafin-core {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--ctafin-r, 34px);
  background: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4.4vw, 68px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 4vw, 64px); flex-wrap: wrap;
}

/* The mark stands on the plate's bottom edge and runs off the trailing one. */
.ctafin-mark {
  position: absolute; z-index: -1; bottom: -1px; inset-inline-end: -11%;
  width: min(36%, 340px); height: auto; display: block;
  fill: #fff; opacity: .17; pointer-events: none;
}
[dir="rtl"] .ctafin-mark { transform: scaleX(-1); }

.ctafin-copy { display: grid; gap: 18px; justify-items: start; min-width: 0; }
/* The same rule-and-label eyebrow the module heroes use, so the band reads as
   part of the system rather than a component borrowed from somewhere else.
   The rule draws itself in as the block arrives, which is the only thing in
   here that announces the section. */
.ctafin-eb {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display);
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(23,26,31,.86);
}
.ctafin-eb-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: rgba(23,26,31,.34);
  transform-origin: left center;
  transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .ctafin-eb-rule { transform-origin: right center; }
/* Collapsed only while the reveal is pending, so with no JS it is simply there. */
.js .ctafin-copy[data-reveal]:not(.in) .ctafin-eb-rule { transform: scaleX(0); }
.ctafin h2 {
  color: var(--ink); margin: 0; max-width: 15ch;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 600; letter-spacing: -.042em; line-height: 1.02;
  text-wrap: balance;
}

/* The target: a white pill whose arrow lives in its own disc, flush with the
   pill's inner padding. On hover the pill lifts and the disc drifts along the
   reading direction, so the two move as one piece under tension. */
.ctafin-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 28px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-family: var(--ff-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: -.012em; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow: 0 1px 2px rgba(10,30,45,.16), 0 10px 26px -12px rgba(10,30,45,.5);
}
[dir="rtl"] .ctafin-go { padding: 9px 28px 9px 9px; }
.ctafin-go:hover {
  color: #fff; transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(10,30,45,.18), 0 20px 40px -16px rgba(10,30,45,.62);
}
.ctafin-go:active { transform: translateY(-1px) scale(.985); }
.ctafin-go-ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff;
  transition: transform .5s var(--ease-out), background .35s var(--ease);
}
.ctafin-go-ico .ico { width: 19px; height: 19px; stroke-width: 2.1; }
.ctafin-go:hover .ctafin-go-ico { background: rgba(255,255,255,.24); transform: translateX(3px) scale(1.06); }
[dir="rtl"] .ctafin-go:hover .ctafin-go-ico { transform: translateX(-3px) scale(1.06); }
[dir="rtl"] .ctafin-go .ico { transform: scaleX(-1); }

/* Stacked, the plate keeps its proportions but the mark would sit under the
   button, so it drops back to a faint field behind the whole block. */
@media (max-width: 820px) {
  .ctafin { --ctafin-r: 28px; }
  .ctafin-core { align-items: flex-start; flex-direction: column; }
  .ctafin h2 { max-width: 100%; }
  .ctafin-mark { width: 54%; opacity: .14; }
}
@media (max-width: 460px) {
  .ctafin-go { width: 100%; justify-content: space-between; }
}
/* The lift and the drift are decoration; the colour change is not. */
@media (prefers-reduced-motion: reduce) {
  .ctafin-eb-rule { transition: none; transform: none; }
  .ctafin-go, .ctafin-go-ico { transition: background .2s linear; }
  .ctafin-go:hover, .ctafin-go:active, .ctafin-go:hover .ctafin-go-ico { transform: none; }
}

.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin-inline:auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width:100%; text-align:start; background:none; border:0; padding-block: 24px; padding-inline: 0 44px; font-family:var(--ff); font-weight:600; font-size: clamp(1.05rem,1.6vw,1.22rem); color: var(--ink); cursor:pointer; position:relative; letter-spacing:-.01em; }
.faq-q::after { content:"+"; position:absolute; inset-inline-end:6px; top:50%; transform: translateY(-50%); font-size:1.6rem; font-weight:400; color: var(--blue-700); transition: transform .3s var(--ease); }
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.faq-a-inner { padding: 0 0 24px; color: var(--muted); font-size: var(--fs-md); }
.faq-a-inner p:last-child { margin-bottom:0; }

/* Two sticky bars on a short screen leave almost nothing for the page, so
   below this height the sub-nav scrolls away and only the header stays. */
@media (max-height: 640px) {
  .subnav { position: static; }
}

/* ---------- Pricing opening ----------
   One plan, so the page states it and shows it: the promise on the left, the
   plan itself as a single dark card on the right. The card carries what used
   to be a strip of facts (billed per employee, all eight modules, no add-ons,
   one-day reply), so nothing is said twice.
   ===================================================================== */
.pricehero { padding: clamp(14px, 2vw, 28px) 0 clamp(56px, 7vw, 104px); }
.ph-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(32px, 6vw, 110px); align-items: center; justify-content: space-between;
}
.ph-head { max-width: 34rem; }
.ph-eb {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2.4vw, 30px);
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700);
}
.ph-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--blue-200);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .ph-rule { transform-origin: right center; }
.js .ph-head[data-reveal]:not(.in) .ph-rule { transform: scaleX(0); }
.pricehero h1 {
  margin: 0; max-width: 9ch; font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 600; letter-spacing: -.05em; line-height: .98; text-wrap: balance;
}
[dir="rtl"] .pricehero h1 { max-width: 12ch; letter-spacing: 0; line-height: 1.15; }
.ph-lead {
  margin: clamp(20px, 2.6vw, 32px) 0 0; max-width: 46ch;
  font-size: clamp(1rem, 1.25vw, 1.12rem); font-weight: 500; line-height: 1.6; color: var(--muted);
}
.ph-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; margin-top: clamp(28px, 3.4vw, 44px); }
.ph-call { margin: 0; font-size: var(--fs-base); font-weight: 500; color: var(--muted); }
.ph-call a { margin-inline-start: 6px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.ph-call a:hover { color: var(--blue-700); }

.ph-go {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 26px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-lg);
  letter-spacing: -.012em; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[dir="rtl"] .ph-go { padding: 8px 26px 8px 8px; }
.ph-go:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(10,30,45,.6); }
.ph-go:active { transform: translateY(-1px) scale(.985); }
.ph-go-ico {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff;
  transition: transform .5s var(--ease-out), background .35s var(--ease);
}
.ph-go-ico .ico { width: 18px; height: 18px; }
.ph-go:hover .ph-go-ico { background: rgba(255,255,255,.24); transform: translateX(3px) scale(1.06); }
[dir="rtl"] .ph-go:hover .ph-go-ico { transform: translateX(-3px) scale(1.06); }
[dir="rtl"] .ph-go .ico { transform: scaleX(-1); }

/* The plan card */
.pcard {
  background: var(--ink-surface); color: #fff;
  border-radius: clamp(20px, 2vw, 26px);
  padding: clamp(24px, 2.6vw, 34px);
  box-shadow: 0 32px 64px -40px rgba(16, 32, 48, .4);
}
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pc-name { font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: -.02em; }
.pc-tag {
  padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid rgba(95,168,211,.55);
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
[dir="rtl"] .pc-tag { letter-spacing: 0; }
.pc-price { margin: clamp(20px, 2.2vw, 28px) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pc-big {
  font-family: var(--ff-display); font-weight: 600; color: #fff;
  font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -.04em; line-height: 1;
}
[dir="rtl"] .pc-big { letter-spacing: 0; }
.pc-per { font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 500; color: rgba(255,255,255,.5); letter-spacing: -.02em; }
.pc-sub { margin: 10px 0 0; font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,.66); }
.pc-label {
  margin: clamp(20px, 2.2vw, 26px) 0 14px;
  padding-top: clamp(20px, 2.2vw, 26px); border-top: 1px solid rgba(255,255,255,.1);
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55);
}
[dir="rtl"] .pc-label { letter-spacing: 0; }
.pc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 18px; }
.pc-list li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,.92); }
.pc-ck { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(95,168,211,.18); }
.pc-ck .ico { width: 10px; height: 10px; color: var(--blue); stroke-width: 3; }
.pc-foot {
  margin: clamp(20px, 2.2vw, 26px) 0 0; padding-top: clamp(16px, 1.8vw, 20px);
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  font-size: var(--fs-xs); font-weight: 500; color: rgba(255,255,255,.55);
}
.pc-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); }

@media (max-width: 960px) {
  .ph-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 7vw, 56px); }
  .pcard { max-width: 520px; }
  .ph-head { max-width: 40rem; }
}
@media (max-width: 520px) {
  .ph-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .ph-go { width: 100%; justify-content: space-between; }
  .ph-call { text-align: center; }
  .pc-list { grid-template-columns: 1fr; gap: 12px; }
  .pc-top { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-rule { transition: none; transform: none; }
  .ph-go, .ph-go-ico { transition: background .2s linear; }
  .ph-go:hover, .ph-go:active, .ph-go:hover .ph-go-ico { transform: none; }
}

/* ---------- 404 ----------
   A dead end should still be useful, so the page offers the six places people
   actually want instead of a single "back to home". */
.notfound { padding: clamp(46px, 6vw, 92px) 0 clamp(54px, 7vw, 104px); }
/* Copy leads, illustration balances it. The artwork carries the "404", so
   nothing in the text has to repeat it. */
.nf-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(26px, 4.5vw, 68px); align-items: center;
}
.nf-art { display: block; width: 100%; height: auto; }
.notfound h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.1; margin: 0 0 12px; text-wrap: balance;
}
.notfound .lead { max-width: 46ch; margin: 0; }
.nf-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3vw, 34px); }

.nf-links {
  margin-top: clamp(44px, 5.4vw, 76px);
  padding-top: clamp(22px, 2.6vw, 30px); border-top: 1px solid var(--line);
}
.nf-links-title {
  display: block; margin-bottom: clamp(16px, 1.8vw, 22px);
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-500);
}
.nf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nf-card {
  position: relative; display: grid; gap: 4px; align-content: start;
  padding: clamp(16px, 1.8vw, 22px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color .22s var(--ease), background .22s var(--ease);
}
.nf-card:hover { border-color: var(--line-2); background: var(--grey-50); }
.nf-ico {
  width: 34px; height: 34px; margin-bottom: 8px; display: grid; place-items: center;
  border-radius: var(--radius-xs); background: var(--blue-050);
  border: 1px solid var(--blue-100);
}
.nf-ico .ico { width: 17px; height: 17px; color: var(--blue-700); }
.nf-t { font-weight: 600; font-size: var(--fs-md); letter-spacing: -.02em; }
.nf-d { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; font-weight: 500; }
.nf-go {
  position: absolute; top: clamp(16px, 1.8vw, 22px); inset-inline-end: clamp(16px, 1.8vw, 22px);
  width: 16px; height: 16px; color: var(--grey-300);
  transition: transform .26s var(--ease-out), color .22s var(--ease);
}
.nf-card:hover .nf-go { color: var(--blue-700); transform: translateX(3px); }
[dir="rtl"] .nf-go { transform: scaleX(-1); }
[dir="rtl"] .nf-card:hover .nf-go { transform: scaleX(-1) translateX(3px); }

@media (max-width: 900px) {
  .nf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Stacked, the artwork introduces the page rather than trailing it. */
  .nf-head { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 32px); }
  .nf-art { order: -1; max-width: 440px; }
}
@media (max-width: 560px) { .nf-grid { grid-template-columns: 1fr; } }

/* ---------- Breadcrumbs ----------
   Quiet by design: orientation, not navigation furniture. The separator is a
   pseudo-element so it is never read out as content. */
.crumbs { margin-bottom: clamp(18px, 2.2vw, 30px); }
.crumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  font-size: var(--fs-xs); font-weight: 600;
}
.crumbs li { display: flex; align-items: center; min-width: 0; }
.crumbs li + li::before {
  content: "/"; margin-inline: 9px; color: var(--grey-300); font-weight: 500;
}
.crumbs a { color: var(--grey-500); display: inline-block; padding-block: 4px; }
.crumbs a:hover { color: var(--blue-700); }
.crumbs [aria-current="page"] {
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The hero on a module page carries the trail too, above its own grid. */
.mhero .crumbs { margin-bottom: clamp(22px, 2.6vw, 34px); }

/* ---------- Footer ---------- */
/* Skipped entirely until it is near the viewport: on a page this long the
   footer is four columns of links the browser otherwise styles and lays out
   on every pass. The intrinsic size keeps the scrollbar honest. */
.footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;   /* measured at desktop width */ background: var(--ink-surface); color: rgba(255,255,255,.72); padding: clamp(52px,6vw,84px) 0 34px; }
/* Four link columns of four, with the brand and the two ways to reach us in
   the first. Nothing runs longer than four, so the columns bottom out together
   instead of one trailing half a screen below the rest. */
.footer-top {
  display:grid; grid-template-columns: 1.55fr repeat(4, 1fr);
  column-gap: clamp(22px, 2.6vw, 40px); row-gap: clamp(34px, 4vw, 52px);
}

/* One step between every row in the footer, links and contact details alike.
   It was coming from two places at once before, a margin on the item and
   padding on the link, so the contact list sat on a different rhythm from the
   columns beside it and the step changed again at one breakpoint. The padding
   is the tap target; this gap is what is left over. */
.footer { --row-step: 4px; }
.footer-about { max-width: 320px; margin: 18px 0 22px; font-size: var(--fs-base); color: rgba(255,255,255,.6); }
.footer .footer-col-title { color:#fff; font-size: var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:600; line-height:1.2; margin:0 0 18px; }
.footer-links { display:grid; gap: var(--row-step); align-content:start; }
.footer-links li { margin-bottom:0; }
.footer-links a { color: rgba(255,255,255,.66); font-weight:600; font-size: var(--fs-base); line-height:1.4; }
.footer-links a:hover { color:#fff; }
.footer-contact { display:grid; gap: var(--row-step); }
.footer-contact li { display:flex; align-items:center; gap:10px; margin-bottom:0; padding-block:7px; font-size: var(--fs-base); line-height:1.4; color: rgba(255,255,255,.72); }
.footer-contact svg { color: var(--blue); flex-shrink:0; width:18px; height:18px; }
.footer-contact a { color: rgba(255,255,255,.82); }
.footer-contact a:hover { color: #fff; }
.socials { display:flex; gap:10px; margin-top: 8px; }
.socials a { width:44px;height:44px;border-radius: var(--radius-sm);display:grid;place-items:center;background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.1); transition: background .2s, transform .2s, border-color .2s; }
.socials a svg { width:18px; height:18px; }
.socials a:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); transform: translateY(-3px); }

/* ---------- Footer bar: app badges, Ask AI, socials ----------
   One rail between the link columns and the legal line. The brand marks in it
   are solid artwork, not the stroked Lucide set, so they get their own class. */
.ico-brand { fill: currentColor; stroke: none; }

.footer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;
  margin-top: clamp(38px, 4.4vw, 56px); padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid rgba(255,255,255,.1);
}

.footer-apps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The store badges are fixed artwork, not controls the page styles: no hover
   state, so they sit the same whether the pointer is on them or not. Keyboard
   focus still shows, through the global :focus-visible ring. */
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 9px 16px 9px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.04);
  color: #fff; line-height: 1.1;
}
.store-badge:hover { color: #fff; }
.store-badge .store-mark { width: 24px; height: 24px; }
.store-text { display: flex; flex-direction: column; gap: 2px; }
.store-text small {
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.store-text strong { font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; }

.ask-ai { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ask-ai-label { font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.72); }
.ask-ai-chips { display: flex; align-items: center; gap: 10px; }
/* Round, unfilled and evenly weighted, so five different brand marks sit
   together as one set instead of five logos competing. */
.ask-ai-chip, .ai-chip {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.76);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.ai-chip .ico { width: 19px; height: 19px; }
.ai-chip:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; transform: translateY(-2px); }

.footer-bar .socials { margin-top: 0; }
.footer-bar .socials a { width: 42px; height: 42px; border-radius: 50%; }

@media (max-width: 900px){
  .footer-bar { justify-content: center; text-align: center; }
  .ask-ai { justify-content: center; }
}
@media (max-width: 560px){
  .ask-ai { flex-direction: column; gap: 12px; }
}

.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top: 48px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-sm); color: rgba(255,255,255,.5); }
.footer-bottom a { color: rgba(255,255,255,.6); } .footer-bottom a:hover{ color:#fff; }

/* ---------- Scroll reveal ---------- */
/* Scoped to .js: if the script fails to load, 60+ elements must not be
   left at opacity 0 — the page would render blank. */
.js [data-reveal] { opacity:0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal].in { opacity:1; transform:none; }
.js [data-reveal][data-delay="1"]{ transition-delay:.08s; }
.js [data-reveal][data-delay="2"]{ transition-delay:.16s; }
.js [data-reveal][data-delay="3"]{ transition-delay:.24s; }
.js [data-reveal][data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .js [data-reveal]{ opacity:1 !important; transform:none !important; } }

@keyframes fadeUp { from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none;} }
/* Floating hero tags sit still — the bobbing loop pulled focus off the headline. */

/* ---------- Mobile menu ----------
   A full-height drawer: brand and close on one row, the sections as large
   rows on hairlines, the two product groups as accordions, and the account
   actions pinned to the foot. The page behind is locked by the script. */
.mobile-menu {
  position: fixed; inset: 0 0 0 auto; z-index: 2000;
  width: min(100%, 400px); height: 100%; height: 100dvh;
  background: #fff; border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column;
  padding: 0 20px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { transform: translateX(0); }
/* Rows never shrink to fit the drawer: the drawer scrolls instead. Without
   this, an open submenu (overflow hidden) was squeezed to the space left on
   short screens and its last links were cut off. */
.mobile-menu > * { flex-shrink: 0; }
/* The head matches the site header's height, so the drawer's close button
   lands where the burger was. */
.mm-head {
  position: sticky; top: 0; z-index: 1; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 66px; margin: 0 -20px 8px; padding: 0 12px 0 20px;
  background: #fff; border-bottom: 1px solid var(--line);
}
.mm-close {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink);
  border-radius: var(--radius-xs); transition: background .2s var(--ease);
}
.mm-close:hover { background: var(--grey-50); }
.mm-close svg { width: 24px; height: 24px; }
.mm-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 0 4px; font-weight: 600; font-size: var(--fs-lg);
  color: var(--ink); border-bottom: 1px solid var(--line);
}
.mm-link:hover { color: var(--ink); }
.mm-link.active { color: var(--ink); }
.mm-link.active > span { box-shadow: inset 0 -2px 0 var(--blue); }
.mm-link svg { width: 18px; height: 18px; color: var(--grey-500); transition: transform .3s var(--ease); }
.mm-link.open svg { transform: rotate(180deg); color: var(--ink); }
.mm-link.open { border-bottom-color: transparent; }
.mm-sub { border-bottom: 1px solid var(--line); }
.mm-sub a {
  display: flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 4px 0 14px; border-inline-start: 2px solid var(--line);
  color: var(--ink-2); font-weight: 500; font-size: var(--fs-base);
}
.mm-sub a:last-child { margin-bottom: 12px; }
.mm-sub a:hover { color: var(--ink); border-inline-start-color: var(--grey-300); }
.mm-sub a[aria-current="page"] { color: var(--ink); font-weight: 600; border-inline-start-color: var(--blue); }
.mobile-menu .mm-sub .mega-soon { margin: 0; }
.mm-actions { margin-top: auto; padding-top: 24px; display: grid; gap: 10px; flex-shrink: 0; }
.mm-actions .btn { min-height: 50px; }
.mm-lang { justify-content: center; min-height: 50px; }
.overlay { position: fixed; inset:0; background: rgba(18,22,28,.45); z-index: 1900; opacity:0; visibility:hidden; transition: opacity .3s, visibility 0s linear .3s; }
.overlay.show { opacity:1; visibility:visible; transition: opacity .3s, visibility 0s; }
@media (max-width: 440px) { .mobile-menu { border-left: 0; } }
@media (min-width: 1081px) { .mobile-menu, .overlay { display: none; } }

/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 22px; bottom: 22px; width: 48px; height:48px; border-radius:50%; background: var(--ink-surface); color:#fff; border:0; display:grid; place-items:center; cursor:pointer; z-index: 1500; opacity:0; visibility:hidden; transform: translateY(12px); transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease), background .2s; }
.to-top svg { width:20px; height:20px; }
.to-top.show { opacity:1; visibility:visible; transform:none; }
.to-top:hover { background: var(--blue); color: var(--ink); transform: translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .nav-menu { display:none; }
  /* Once the desktop menu is gone, push the whole action cluster (CTA +
     burger) to the trailing edge instead of letting it sit next to the logo */
  .nav-actions { margin-inline-start: auto; }
  .nav-toggle { display:inline-flex; margin-inline-start:0; }
  .nav-actions .btn-signin { display:none; }
}
@media (max-width: 860px){
  .feature-split { grid-template-columns: 1fr; }
  .feature-visual { order:-1; }
  .stats-grid { grid-template-columns: 1fr; gap: 0; max-width: 420px; margin-inline:auto; }
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 26px 10px; }
  .stat:first-child { border-top: 0; }
  .split2 { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px){
  .container-x { padding-inline: 18px; }
  .section { padding: clamp(46px, 10vw, 62px) 0; }
  .tabs-nav { width:100%; overflow-x:auto; justify-content:flex-start; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; border-radius: var(--radius); }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width:100%; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width:100%; }
  .footer-bottom { flex-direction: column; text-align:center; }
  .display { font-size: clamp(2.1rem, 9.5vw, 3rem); line-height: 1.06; }
}

/* =====================================================================
   LANGUAGE TOGGLE
   ===================================================================== */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ff); font-weight: 600; font-size: var(--fs-base); color: var(--ink);
  background: transparent; border: 1.5px solid var(--line-2); border-radius: var(--radius-pill);
  padding: 10px 16px; cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.lang-toggle:hover { border-color: var(--ink); color: var(--blue-700); }
/* Sign in and the language switch carry a black outline wherever they
   appear: header, mobile drawer and the login pages. */
.lang-toggle, .btn-signin, .mm-actions .btn-ghost { border-color: var(--ink); }
.lang-toggle svg { width: 17px; height: 17px; }

/* =====================================================================
   MOBILE NAV REFINEMENTS
   Keep the burger + Request demo cluster tight and right-aligned.
   ===================================================================== */
@media (max-width: 1080px){
  .nav { gap: 12px; }
  .nav-actions { gap: 8px; }
  .lang-toggle.desk-only { display: none; }         /* moved into the drawer */
}
@media (max-width: 560px){
  .nav { height: 66px; gap: 8px; }
  .brand .brand-logo { height: 25px; }
  [dir="rtl"] .brand .brand-logo { height: 29px; }
  .nav-actions .btn-primary { padding: 11px 15px; font-size: var(--fs-sm); }
  .nav-toggle { padding: 6px; margin-inline-start: 0; }
  .nav-toggle svg { width: 24px; height: 24px; }
}
@media (max-width: 360px){
  .nav-actions .btn-primary { padding: 10px 13px; font-size: var(--fs-xs); }
}

/* =====================================================================
   RTL SUPPORT
   Arabic typography + mirrored layout. Bootstrap 5.3 grid is direction
   aware; these rules mirror the custom components.
   ===================================================================== */
[lang="ar"] body,
[dir="rtl"] body { font-family: 'Noto Sans Arabic', 'Inter Tight', system-ui, sans-serif; }
/* Components set their own font through these two variables, so the Arabic
   face has to lead them too. Before this, buttons, eyebrows, tabs and FAQ
   questions skipped Noto (Inter Tight has no Arabic) and fell to Arial.
   Noto's unicode-range covers Arabic only, so Latin words stay in Inter. */
[dir="rtl"] {
  --ff: 'Noto Sans Arabic', 'Inter Tight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-display: 'Noto Sans Arabic', 'Inter Tight', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5,
[dir="rtl"] .display { font-family: 'Noto Sans Arabic', 'Inter Tight', sans-serif; letter-spacing: 0; }
[dir="rtl"] .display { text-transform: none; line-height: 1.12; }
[dir="rtl"] .eyebrow { letter-spacing: .04em; }

[dir="rtl"] .nav-menu { margin: 0 12px 0 auto; }
[dir="rtl"] .mega { text-align: right; }
[dir="rtl"] .section-head:not(.center) { text-align: right; }

/* Directional arrows flip */
[dir="rtl"] .btn svg,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .topbar a svg { transform: scaleX(-1); }
[dir="rtl"] .btn-primary:hover svg,
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }

/* Stats dividers mirror */
[dir="rtl"] .stat { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .stat:first-child { border-right: 0; }

/* Floating tags + back-to-top mirror */
[dir="rtl"] .to-top { right: auto; left: 22px; }

/* Mock sidebar sits on the right */

/* Mobile drawer slides in from the left in RTL */
[dir="rtl"] .mobile-menu { inset: 0 auto 0 0; transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .mm-head { padding: 0 20px 0 12px; }
[dir="rtl"] .mobile-menu.open { transform: translateX(0); }

/* Marquee scrolls the other way */

/* Feature list / panel checks keep natural RTL flow (flex handles it) */
[dir="rtl"] .stat .s-num { direction: ltr; }


/* =====================================================================
   MOBILE REFINEMENTS
   Small-screen fixes found by auditing the page at 360 / 390 / 430px.
   ===================================================================== */

/* Anchors must clear the sticky header when jumping between sections */
:is(section, [id]) { scroll-margin-top: 84px; }

@media (max-width: 680px){


  /* Centre the trusted-by label over the centred logo strip */


  /* One-line reassurance note, centred as a block rather than an inline run */
  /* Let the shield icon sit in the text flow so it leads line 1 instead of
     floating beside a two-line block */
  .hero-note { display: block; text-align: center; max-width: 32ch; margin-inline: auto; }
  .hero-note svg { display: inline; vertical-align: -4px; margin-inline-end: 6px; }
}

@media (max-width: 560px){
  /* Scrollable tab rail: fade the edges so it reads as swipeable,
     and snap so a tab never rests half-cut. */
  .tabs-nav {
    padding: 6px 10px; scroll-padding-inline: 10px; scroll-snap-type: x mandatory;
  }
  .tab-btn { scroll-snap-align: start; padding: 11px 16px; font-size: .9rem; }
  .tab-panels { margin-top: 30px; }

  /* Comfortable tap targets everywhere */
  .faq-q { padding: 20px 40px 20px 0; }
  .to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }

  /* The hero headline carries the page — give it room, not the wrapper */
  .hero .display { margin-top: 8px; }
  .hero .lead { margin-bottom: 26px; }
}

@media (max-width: 400px){
  /* At 360px the brand, CTA and burger otherwise collide */
  .nav { gap: 6px; }
  .brand .brand-logo { height: 23px; }
  [dir="rtl"] .brand .brand-logo { height: 27px; }
  .nav-actions .btn-primary { padding: 10px 12px; font-size: var(--fs-xs); }
  .container-x { padding-inline: 16px; }
  .topbar { font-size: var(--fs-xs); }
}

/* =====================================================================
   REFINEMENT LAYER
   Material quality pass: a restrained elevation system, calmer motion,
   optical typography and hover detail. No new visual language — the
   flat/minimal direction stays, it just stops reading as unfinished.
   ===================================================================== */

:root {
  /* One expressive curve for everything that moves */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
}

::selection { background: var(--blue-200); color: var(--ink); }
body { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline-offset: 4px; }

/* ---------- Optical typography ---------- */
h1, h2, h3 { text-wrap: balance; }
.lead, .section-head p { text-wrap: pretty; }
.stat .s-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Eyebrow: shorter rule, finer type — it should whisper, not announce */

/* ---------- Buttons ---------- */
.btn { transition: transform .35s var(--ease-out), background .22s var(--ease), color .22s, border-color .22s; }
.btn:hover { transform: translateY(-1px); }
.btn-ghost { background: #fff; }

/* Arrow-link underline grows from the leading edge */
.link-arrow { position: relative; }
.link-arrow::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -3px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out);
}
[dir="rtl"] .link-arrow::after { transform-origin: right; }
.link-arrow:hover::after { transform: scaleX(1); }

/* ---------- Header ---------- */
.header { background: #fff; }
.header.is-stuck {
  background: #fff;
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line);
}
/* Nav underline slides in rather than snapping */
.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--blue); border-radius: 2px;
  transform: scaleX(0); transform-origin: center; transition: transform .4s var(--ease-out);
}
.nav-link.active::after { transform: scaleX(1); }


/* ---------- Motion ---------- */
/* Shorter travel, longer settle: the page arrives rather than slides in */
[data-reveal] { transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal][data-delay="1"]{ transition-delay: .07s; }
.js [data-reveal][data-delay="2"]{ transition-delay: .14s; }
.js [data-reveal][data-delay="3"]{ transition-delay: .21s; }
.js [data-reveal][data-delay="4"]{ transition-delay: .28s; }

/* ---------- Rhythm ---------- */
@media (min-width: 1081px){
  .section { padding: clamp(76px, 6.4vw, 100px) 0; }
}

/* =====================================================================
   PRODUCT SHOWCASE CAROUSEL
   Full-bleed snap rail of square product cards. The card nearest the
   viewport centre is the hero; neighbours sit back so the eye has one
   clear focal point.
   ===================================================================== */
.showcase { overflow: hidden; }
/* ---------- Customers opening ----------
   The page opens on one statement and the people who stand behind it, with
   nothing between them. The lead sits off to the side on its own baseline
   rather than under the headline, so the eye reads the claim first and the
   qualification second, and the logos close the block as a quiet rail.
   ===================================================================== */
.chero { padding: clamp(18px, 2.4vw, 36px) 0 0; }
.chero-in {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px); align-items: end;
  padding-bottom: clamp(44px, 5.4vw, 80px);
}
.chero-eb {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700);
}
.chero-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--blue-200);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .chero-rule { transform-origin: right center; }
.js .chero-in[data-reveal]:not(.in) .chero-rule { transform: scaleX(0); }
.chero h1 {
  margin: 0; max-width: 15ch;
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1.02; text-wrap: balance;
}
.chero-lead {
  margin: 0 0 clamp(2px, .6vw, 8px); max-width: 42ch;
  font-size: var(--fs-md); font-weight: 500; line-height: 1.6; color: var(--muted);
}

/* On the Customers page the caption lines up with the headline above it. */
.chero-trust .trusted-title { text-align: start; }

@media (max-width: 900px) {
  .chero-in { grid-template-columns: 1fr; align-items: start; gap: clamp(16px, 3vw, 24px); }
  .chero h1 { max-width: 100%; }
}

/* ---------- Industries ----------
   A list, not a grid of cards. Twelve boxes would turn a plain enumeration
   into visual noise; a hairline over each entry is enough to separate them and
   leaves the type to do the work. The rule above each item is what carries the
   grid, so the columns stay legible without any vertical lines at all. */
/* The heading holds its place while the list runs past it: twelve rows is
   long enough that the claim would otherwise scroll away before the evidence
   for it finished. */
.industries-in {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr);
  gap: clamp(28px, 4.6vw, 86px); align-items: start;
}
.ind-head { max-width: 420px; position: sticky; top: calc(var(--header-offset, 75px) + 28px); }
.ind-eb {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700);
}
.ind-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--blue-200);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .ind-rule { transform-origin: right center; }
.js .ind-head[data-reveal]:not(.in) .ind-rule { transform: scaleX(0); }

/* An index, not twelve cards. One rule between entries, the sector set large
   on the left and what it gets held in a quiet column on the right: the eye
   runs down the names and only stops where it wants the detail. */
.ind-list { border-top: 1px solid var(--line); }
.ind-row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(14px, 2.4vw, 40px); align-items: baseline;
  padding: clamp(17px, 1.9vw, 24px) 0;
  border-bottom: 1px solid var(--line);
}
.ind-n {
  font-family: var(--ff-display); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: .14em; color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.ind-row h3 {
  margin: 0; font-size: clamp(1.12rem, 1.9vw, 1.55rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.15; text-wrap: balance;
}
.ind-row p {
  margin: 0; color: var(--muted); font-weight: 500;
  font-size: var(--fs-sm); line-height: 1.55;
}

@media (max-width: 1000px) {
  .industries-in { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .ind-head { position: static; max-width: 640px; }
}
@media (max-width: 760px) {
  /* The line belongs to the sector above it, so it tucks under the name
     rather than keeping a column of its own. */
  .ind-row {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 6px clamp(12px, 3vw, 18px); row-gap: 6px;
  }
  .ind-row p { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .ind-rule { transition: none; transform: none; } }

/* ---------- Customer story + films ----------
   The clip of a customer talking is the page's one piece of first-hand
   evidence, so it is given a side of its own rather than a cell in a grid of
   four. What it amounts to sits opposite at display size; the two films come
   after as a pair, held to one height so they read as a single object. */
.vbento { display: grid; gap: clamp(40px, 5.6vw, 92px); }

.cstory {
  display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr);
  gap: clamp(26px, 4.4vw, 72px); align-items: center;
}
.cstory-say { display: grid; justify-items: start; gap: clamp(16px, 1.8vw, 24px); }

/* The rule-and-label eyebrow the module heroes use, drawing itself in. */
.cstory-eb {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--grey-500);
}
.cstory-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--line-2);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .cstory-rule { transform-origin: right center; }
.js .cstory[data-reveal]:not(.in) .cstory-rule { transform: scaleX(0); }

.cstory h2 {
  margin: 0; max-width: 20ch;
  font-size: clamp(1.6rem, 2.9vw, 2.5rem);
  font-weight: 600; letter-spacing: -.034em; line-height: 1.12; text-wrap: balance;
}
.cstory-by { margin: 0; display: grid; gap: 2px; }
.cstory-name { font-weight: 600; font-size: var(--fs-base); letter-spacing: -.015em; color: var(--ink); }
.cstory-role { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }

/* Same island button as the closing band, in the light-surface register. */
.cstory-go {
  margin-top: clamp(4px, 1vw, 12px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 7px 7px 24px; border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-md);
  letter-spacing: -.012em; white-space: nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
[dir="rtl"] .cstory-go { padding: 7px 24px 7px 7px; }
.cstory-go:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(10,30,45,.6); }
.cstory-go:active { transform: translateY(-1px) scale(.985); }
.cstory-go-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14); color: #fff;
  transition: transform .5s var(--ease-out), background .35s var(--ease);
}
.cstory-go-ico .ico { width: 17px; height: 17px; }
.cstory-go:hover .cstory-go-ico { background: rgba(255,255,255,.24); transform: translateX(3px) scale(1.06); }
[dir="rtl"] .cstory-go:hover .cstory-go-ico { transform: translateX(-3px) scale(1.06); }
[dir="rtl"] .cstory-go .ico { transform: scaleX(-1); }

.vcell {
  position: relative; margin: 0; overflow: hidden;
  border-radius: clamp(16px, 1.6vw, 22px);
  background: var(--grey-100);
}
.vmedia {
  display: block; width: 100%; height: 100%;
  object-fit: cover; background: var(--grey-100);
}
/* The clip is shot 9:16. At that ratio it stands a long way taller than the
   words beside it and the row fills with dead air, so it crops to a squarer
   portrait and the two sides come out closer in height. */
.cstory .vmedia { aspect-ratio: 3 / 4; }

/* The clip carries its own burned-in name card at the foot of the frame, so
   the sound control sits out of its way at the bottom corner. */
.vcell--story .vsound { top: auto; bottom: 12px; }

/* The one clip with someone speaking gets a sound control; the rest stay mute. */
.vsound[hidden] { display: none; }   /* clip failed to load: nothing to unmute */
.vsound {
  position: absolute; z-index: 3; top: 7px; inset-inline-end: 7px;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: #fff;
}
/* The visible circle is 34px; the button around it is 44 so it is comfortable
   to hit on a phone without looking heavier. */
.vsound::before {
  content: ""; position: absolute; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 16, 22, .42); backdrop-filter: blur(6px);
  transition: background .2s var(--ease);
}
.vsound .ico { position: relative; }
.vsound:hover::before { background: rgba(10, 16, 22, .62); }
.vsound .ico { width: 16px; height: 16px; }
.vsound .i-off { display: none; }
.vsound[aria-pressed="true"] .i-on { display: none; }
.vsound[aria-pressed="true"] .i-off { display: block; }

@media (max-width: 900px) {
  /* Stacked, the clip leads and the statement follows it, which is the order
     the two are read in anyway. A portrait clip at full width would run most
     of a screen tall, so it is capped and crops instead. */
  .cstory { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
  .cstory .vcell--story { max-height: 68vh; }
  /* The clip carries a burned-in name card near its foot; cropping from the
     top keeps it in frame instead of slicing it in half. */
  .cstory .vmedia { aspect-ratio: 4 / 5; object-position: center 78%; }
  .cstory h2 { max-width: 100%; font-size: clamp(1.5rem, 4.6vw, 2.1rem); }
}
@media (prefers-reduced-motion: reduce) {
  .cstory-rule { transition: none; transform: none; }
  .cstory-go, .cstory-go-ico { transition: background .2s linear; }
  .cstory-go:hover, .cstory-go:active, .cstory-go:hover .cstory-go-ico { transform: none; }
}

/* =====================================================================
   NAV ACTION BAR
   One height for every control in the header cluster. Padding-driven
   sizing drifted (the globe pill ran 8px taller than the buttons).
   ===================================================================== */
/* Height only — never `display`, or this would undo the rules that hide
   Sign in and the language pill once the drawer takes over. */
.nav-actions > .btn,
.nav-actions > .lang-toggle {
  height: 44px; padding-block: 0; line-height: 1; align-items: center;
}
.nav-actions > .btn-sm { padding-inline: 20px; }
.nav-actions > .lang-toggle { padding-inline: 16px; }
.nav-toggle { width: 44px; height: 44px; }

@media (max-width: 560px){
  .nav-actions > .btn, .nav-actions > .lang-toggle, .nav-toggle { height: 40px; }
  .nav-actions > .btn-primary { padding-inline: 16px; font-size: var(--fs-sm); }
}
@media (max-width: 400px){
  .nav-actions > .btn, .nav-actions > .lang-toggle, .nav-toggle { height: 38px; }
  .nav-actions > .btn-primary { padding-inline: 13px; font-size: var(--fs-xs); }
}

/* =====================================================================
   SECTION DIVISION
   The page read as one continuous scroll. Each section now states where
   it begins: a hairline at the seam, a firmer alternating band, and a
   chapter chip instead of a floating label.
   ===================================================================== */
main > .section + .section,
main > .section + .section--tight,
main > .section--tight + .section { border-top: 1px solid var(--line); }

/* Alternating band, a step firmer than before and crisply bounded */
.bg-grey {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.bg-tint {
  border-top: 1px solid var(--blue-100);
  border-bottom: 1px solid var(--blue-100);
}

/* ---------------------------------------------------------------------
   EYEBROWS
   Two treatments from one base. Section headers are chapter markers with
   an auto-numbered tile; everything else — feature copy, dark and blue
   panels, the quote band — gets a compact dot that inherits its colour,
   Text only — no dot, no rule. Colour is inherited so a white-on-dark
   eyebrow on the blue/ink panels still works.
   --------------------------------------------------------------------- */

/* Eyebrow: text alone — no dot, no rule */
.eyebrow { font-size: var(--fs-2xs); letter-spacing: .19em; gap: 0; }
.eyebrow::before, .eyebrow::after { content: none; }
.section-head .eyebrow:not([style]) { color: var(--blue-700); letter-spacing: .2em; }

.section-head { margin-bottom: 6px; }
.section-head .h-xl { margin-top: 20px; }


/* =====================================================================
   RUNTIME PERFORMANCE
   Paint cost, not payload: the page was compositing work it never showed.
   ===================================================================== */

/* Backdrop blur is the most expensive thing on a scrolling page. The header
   is transparent over a near-white hero anyway, so the blur only buys
   anything once content is passing underneath it. */
.header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.header.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }


/* Decorative art should never be a hit-test or paint target */
.icon-sprite { pointer-events: none; }


/* =====================================================================
   ACCESSIBILITY FIXES
   ===================================================================== */

/* Skip link — the header alone is 30+ tab stops before the content */
.skip-link {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 3000;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: var(--fs-base);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; color: #fff; }

/* The closed drawer was translated off-screen but still rendered, so 20
   links stayed in the tab order and aria-hidden sat on focusable content. */
.mobile-menu { visibility: hidden; transition: transform .35s var(--ease), visibility 0s linear .35s; }
.mobile-menu.open { visibility: visible; transition: transform .35s var(--ease), visibility 0s; }

/* Target size: these all measured under 24px tall */
.footer-links a { display: block; padding-block: 7px; }
.mega-item { min-height: 44px; }
.link-arrow { padding-block: 6px; }
.topbar a { padding-block: 6px; display: inline-flex; }
.footer-bottom a { display: inline-block; padding-block: 5px; }
.socials a { min-width: 40px; min-height: 40px; }

/* ---------- Language switch loader ----------
   One small loader for every language change. On a switch it covers the
   page while text and direction change underneath, then lifts, so the page
   never shows half-translated or mid-flip. On a page opened in Arabic the
   head script adds .lang-pending: the page stays hidden (not blank-white
   flashing English) for the moment before the script swaps the text. */
.lang-loader {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  background: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--ease), visibility 0s linear .18s;
}
.lang-loader.show { opacity: 1; visibility: visible; transition: opacity .14s var(--ease), visibility 0s; }
.lang-loader-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line-2); border-top-color: var(--blue);
  animation: lang-spin .7s linear infinite;
}
/* Only for the instant between parsing and the text swap on a page opened in
   Arabic; the script lifts it in the same task, so it is never seen. */
html.lang-pending body { visibility: hidden; }
@keyframes lang-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lang-loader-spin { animation-duration: 1.6s !important; } }

/* Honour reduced motion across everything added since */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   MODULE PAGES
   One page per product module. Editorial, left-aligned and typographic,
   built from the same tokens as the rest of the site: flat surfaces,
   hairline borders, no shadows.
   ===================================================================== */

/* ---------- Module hero ---------- */
.mhero { padding: clamp(52px, 7vw, 92px) 0 clamp(20px, 2.5vw, 34px); position: relative; overflow: hidden; }
.mhero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.mhero-eyebrow { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.mhero-eyebrow .m-n {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  color: var(--blue-700); letter-spacing: .12em; font-variant-numeric: tabular-nums;
}
.mhero-eyebrow .m-rule { width: 28px; height: 1px; background: var(--blue-200); align-self: center; }
.mhero-eyebrow .m-lab {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .19em; text-transform: uppercase; color: var(--grey-500);
}
.mhero h1 {
  font-size: clamp(2.15rem, 4.6vw, 3.55rem); font-weight: 600;
  letter-spacing: -.034em; line-height: 1.05; margin: 0 0 20px; text-wrap: balance;
}
.mhero .lead { max-width: 46ch; }
.mhero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }.mhero-visual { position: relative; }
/* Product tile from the showcase set. It brings its own blue ground, so the
   wash behind it is dropped and the radius is clipped here — the corners are
   rounded in the artwork against black, not transparency. */
.mhero-shot { margin: 0; }
.mhero-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: clamp(18px, 2vw, 28px);
}


/* ---------- Platform: every module hero in sequence ----------
   Each module gets a ruled band carrying its number and name, then a two-up
   of copy and product tile. The tile alternates sides so the eye zig-zags
   down the page instead of running down one gutter. */
.pmods-list { display: grid; }
.pmod { position: relative; padding-block: clamp(40px, 5vw, 76px); }
.pmod:first-child { padding-top: clamp(24px, 3vw, 40px); }

.pmod-rule {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: clamp(26px, 3.2vw, 44px);
}
.pmod-n {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.pmod-line { flex: 1; height: 1px; background: var(--line); min-width: 20px; }
.pmod-label {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grey-500);
}
.pmod-soon {
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .02em;
  color: var(--blue-700); background: var(--blue-050);
  border: 1px solid var(--blue-100); border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.pmod-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px); align-items: center;
}
/* Odd rows put the tile second, even rows first. */
.pmod:nth-child(even) .pmod-shot { order: -1; }

.pmod-copy h3 {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem); font-weight: 600;
  letter-spacing: -.032em; line-height: 1.14; margin: 0 0 14px;
  text-wrap: balance;
}
.pmod-copy > p {
  margin: 0; max-width: 44ch; color: var(--muted);
  font-size: var(--fs-md); line-height: 1.6; font-weight: 500;
}
.pmod-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
}
.pmod-tags li {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 6px 14px;
}
.pmod-go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 26px;
  font-weight: 600; font-size: var(--fs-base); color: var(--blue-800);
}
.pmod-go .ico { width: 17px; height: 17px; transition: transform .28s var(--ease-out); }
.pmod-go:hover .ico { transform: translateX(4px); }
[dir="rtl"] .pmod-go .ico { transform: scaleX(-1); }
[dir="rtl"] .pmod-go:hover .ico { transform: scaleX(-1) translateX(4px); }

/* The tile brings its own blue ground; the corners are rounded in the artwork
   against black, so the radius has to be clipped here. */
.pmod-shot { margin: 0; }
.pmod-shot img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: clamp(18px, 2vw, 28px);
}

@media (max-width: 860px) {
  .pmod-grid { grid-template-columns: 1fr; gap: 28px; }
  /* Stacked, the copy always leads — alternating would just look random. */
  .pmod:nth-child(even) .pmod-shot { order: 0; }
  .pmod-shot img { max-width: 460px; }
}

/* ---------- Capabilities ----------
   Four short entries, so hairline columns rather than four bordered cards.
   The rule under the heading gives the block its edge instead. */
.mcaps-title {
  margin: 0 0 clamp(26px, 3vw, 40px); padding-bottom: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(1.4rem, 2.4vw, 1.95rem); font-weight: 600; letter-spacing: -.032em;
}
.mcaps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.mcap { padding: 0; }
.mcap .c-n {
  display: block; margin-bottom: 14px;
  font-family: var(--ff-display); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: .14em; color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.mcap h3 { font-size: var(--fs-md); font-weight: 600; margin: 0 0 7px; letter-spacing: -.018em; }
.mcap p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; font-weight: 500; }

/* ---------- Outcome ----------
   A pause between the detail above and the way out below: one statement, one
   supporting line, and nothing drawn around them. */
.moutcome { padding: clamp(52px, 7vw, 104px) 0; }
.moutcome-in { max-width: min(52rem, 100%); }
.moutcome .o-say {
  margin: 0 0 clamp(14px, 1.6vw, 20px); font-family: var(--ff-display);
  font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -.03em;
  line-height: 1.14; color: var(--ink); text-wrap: balance;
}
.moutcome .o-side {
  margin: 0; max-width: 46ch; font-size: var(--fs-md);
  font-weight: 500; line-height: 1.6; color: var(--muted);
}/* "Coming soon" modules read as planned, not shipped */
.m-soon {
  display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-800); background: var(--blue-050);
  border: 1px solid var(--blue-100); border-radius: var(--radius-pill);
  padding: 4px 10px; margin-bottom: 18px;
}

@media (max-width: 860px) {
  .mhero-grid { grid-template-columns: 1fr; }
  /* Title first: on a module page the visitor needs to know what this is
     before being shown a screenshot of it. */
  .mhero-visual { order: 0; margin-top: 30px; }
  .moutcome-grid { grid-template-columns: 1fr; }
}

/* ---------- Page head (inner pages) ----------
   Gives the split-out pages the <h1> the home page used to carry for them. */
.pagehead { padding: clamp(48px, 6.5vw, 86px) 0 clamp(8px, 1.5vw, 18px); position: relative; }
/* Crumbs with no heading under them: the trail sits closer to the header and
   the section below keeps its own top padding, instead of the two stacking
   into a band of empty page. */
.pagehead--crumbs { padding: clamp(26px, 3.2vw, 40px) 0 0; }
.pagehead--crumbs .crumbs { margin-bottom: 0; }
.pagehead-in { max-width: 760px; }
.pagehead h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.3rem); font-weight: 600;
  letter-spacing: -.034em; line-height: 1.06; margin: 18px 0 18px; text-wrap: balance;
}
.pagehead .lead { max-width: 54ch; }

/* ---------- Ecosystem diagram ---------- */
.ecodiag { margin: 0; }
.ecodiag-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ecodiag-scroll::-webkit-scrollbar { display: none; }
.ecodiag svg { width: 100%; min-width: 760px; height: auto; display: block; }
.ecodiag figcaption {
  margin-top: 18px; font-size: var(--fs-sm); color: var(--grey-500);
  font-weight: 500; text-align: center;
}
.ecodiag .d-node rect { fill: #fff; stroke: var(--line-2); stroke-width: 1; }
.ecodiag .d-num {
  fill: var(--blue-700); font-family: var(--ff-display); font-size: 13px;
  font-weight: 600; letter-spacing: .1em;
}
.ecodiag .d-name { fill: var(--ink); font-family: var(--ff); font-size: 15px; font-weight: 600; }
.ecodiag .d-link { fill: none; stroke: var(--blue-200); stroke-width: 1.5; }
.ecodiag .d-hub rect { fill: var(--ink-surface); stroke: none; }
.ecodiag .d-hub-l {
  fill: var(--blue); font-family: var(--ff-display); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-anchor: middle;
}
.ecodiag .d-hub-t {
  fill: #fff; font-family: var(--ff-display); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; text-anchor: middle;
}
/* The drawing reads left-to-right as a data flow; keep it that way in Arabic. */
[dir="rtl"] .ecodiag svg { direction: ltr; }

/* ---------- Module index ---------- */
.mindex { border-top: 1px solid var(--line); }
.mindex a {
  display: grid; grid-template-columns: 62px 1.05fr 1.35fr auto; gap: 22px; align-items: center;
  padding: 26px 8px; border-bottom: 1px solid var(--line); color: var(--ink);
  transition: background-color .2s var(--ease), padding .2s var(--ease);
}
.mindex a:hover { background: var(--blue-050); padding-inline: 18px; }
.mindex .i-n {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  color: var(--blue-700); letter-spacing: .1em; font-variant-numeric: tabular-nums;
}
.mindex h3 { font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; margin: 0; letter-spacing: -.022em; }
.mindex p { margin: 0; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; font-weight: 500; }
.mindex .i-go { width: 18px; height: 18px; color: var(--grey-500); transition: transform .2s var(--ease); }
.mindex a:hover .i-go { transform: translateX(4px); color: var(--blue-700); }
[dir="rtl"] .mindex .i-go { transform: scaleX(-1); }
[dir="rtl"] .mindex a:hover .i-go { transform: scaleX(-1) translateX(4px); }
.mindex .i-soon {
  display: inline-block; margin-inline-start: 10px; font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--blue-800);
  background: var(--blue-050); border: 1px solid var(--blue-100);
  border-radius: var(--radius-pill); padding: 3px 8px; vertical-align: middle;
}
@media (max-width: 860px) {
  .mindex a { grid-template-columns: 48px 1fr auto; gap: 14px; padding: 20px 4px; }
  .mindex p { grid-column: 2 / -1; }
}

/* ---------- Contact form ---------- */
.formwrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 60px); align-items: start; }
.cform { display: grid; gap: 16px; }
.cform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font-family: var(--ff); font-size: var(--fs-base); font-weight: 500; color: var(--ink);
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 13px 15px; width: 100%; box-sizing: border-box;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--grey-500); font-weight: 500; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey-300); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-700); background: var(--blue-050);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; }
/* The required marker is a pseudo-element, not a child: the language switch
   rewrites label textContent, which would otherwise delete it. */
/* --- Validation and submit states --- */
.field-err {
  margin: 0; font-size: var(--fs-xs); font-weight: 600; color: var(--red-600);
  display: flex; align-items: center; gap: 6px;
}
.field-err::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--red-600); flex-shrink: 0;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--red-600); background: var(--red-050); }
.consent.has-err input { border-color: var(--red-600); }
.consent.has-err { align-items: flex-start; }
.consent .field-err { margin-top: 5px; }

.cform .note[data-tone="bad"] { color: var(--red-600); font-weight: 600; }
.cform button[type="submit"][disabled] { opacity: .6; pointer-events: none; }

/* Replaces the form once it has been sent, so the page confirms rather than
   leaving the visitor guessing whether anything happened. */
.form-done {
  display: grid; justify-items: start; gap: 10px;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff;
}
.form-done:focus { outline: none; }
.form-done .ico {
  width: 34px; height: 34px; padding: 8px; box-sizing: border-box;
  border-radius: 50%; color: #fff; background: var(--green-600); stroke-width: 3;
}
.form-done h3 { margin: 6px 0 0; font-size: 1.22rem; font-weight: 600; letter-spacing: -.02em; }
.form-done p { margin: 0; color: var(--muted); font-weight: 500; line-height: 1.6; max-width: 46ch; }

.cform label[data-req]::after { content: " *"; color: var(--blue-700); font-weight: 600; }
.cform .note { font-size: var(--fs-xs); color: var(--grey-500); font-weight: 500; margin: 0; }
.cform button { justify-self: start; }
.cside { display: grid; gap: 12px; }
.cside-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; display: flex; gap: 14px; align-items: flex-start;
}
.cside-card svg { width: 20px; height: 20px; color: var(--blue-700); flex-shrink: 0; margin-top: 2px; }
.cside-card .cs-l { display: block; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: 5px; }
.cside-card a, .cside-card span.cs-v { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.cside-card a:hover { color: var(--blue-700); }
@media (max-width: 860px) { .formwrap, .cform .row2 { grid-template-columns: 1fr; } }

/* ---------- Request a demo ----------
   Form leads, context follows: the visitor came here to fill something in.
   The groups are numbered and ruled like the rest of the site rather than
   boxed, so a long form still reads as one column of work. */
.demo-sec { padding-top: clamp(22px, 2.8vw, 40px); }
/* Button and its reply-time note read as one unit, not two stops apart. */
.dform-send { display: grid; gap: 14px; justify-items: start; }
.demowrap {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 76px); align-items: start;
}

.dform { gap: clamp(28px, 3.2vw, 38px); }
.dgroup { border: 0; padding: 0; margin: 0; display: grid; gap: 18px; }
.dgroup-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.dg-n {
  font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .14em;
  color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.dg-t { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -.02em; }
.dform .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* The one control that is not a text box gets the same height as the rest. */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-inline-end: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23596273' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 17px;
  background-position: right 14px center;
}
[dir="rtl"] .field select { background-position: left 14px center; }

.consent { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.consent input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin: 2px 0 0;
  border: 1px solid var(--grey-300); border-radius: var(--radius-2xs); background: #fff;
  cursor: pointer; transition: background-color .18s var(--ease), border-color .18s var(--ease);
}
.consent input:checked {
  background: var(--blue); border-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px; background-repeat: no-repeat; background-position: center;
}
.consent input:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }
.consent span { font-size: .9rem; font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.consent a { font-weight: 600; }

/* Context column: rides along on a long form rather than scrolling away. */
.dside { position: sticky; top: calc(var(--header-offset, 75px) + 28px); display: grid; gap: 26px; }
.dside-title {
  margin: 0 0 20px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-500);
}
.dsteps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.dsteps li { display: flex; gap: 14px; }
.ds-n {
  flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--blue-100); border-radius: 50%; background: var(--blue-050);
  font-size: var(--fs-3xs); font-weight: 600; color: var(--blue-800);
  font-variant-numeric: tabular-nums;
}
.dsteps h3 { margin: 3px 0 5px; font-size: var(--fs-base); font-weight: 600; letter-spacing: -.015em; }
.dsteps p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); font-weight: 500; }

.dside-foot { padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.dside-foot p {
  margin: 0 0 6px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--grey-500);
}
.dside-foot a { font-size: var(--fs-base); font-weight: 600; color: var(--ink); width: max-content; }
.dside-foot a:hover { color: var(--blue-700); }

@media (max-width: 1000px) {
  .demowrap { grid-template-columns: 1fr; }
  /* Stacked, the context belongs before the form, not after it. */
  .dside { position: static; order: -1; }
  .dsteps ol { grid-template-columns: repeat(3, 1fr); display: grid; gap: 18px; }
}
@media (max-width: 720px) {
  .dform .row3 { grid-template-columns: 1fr; }
  .dsteps ol { grid-template-columns: 1fr; }
}

/* Unreleased modules are labelled wherever they are listed, not only on their page */
.mega-soon {
  margin-left: 8px; font-size: .58rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue-800); background: var(--blue-050);
  border: 1px solid var(--blue-100); border-radius: var(--radius-pill);
  padding: 3px 7px; vertical-align: middle; white-space: nowrap;
}
[dir="rtl"] .mega-soon { margin-left: 0; margin-right: 8px; }

/* ---------- Cross-document view transitions ----------
   Multi-page navigation that does not blink. Progressive: browsers without
   support just navigate normally. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .24s; }
.header { view-transition-name: site-header; }

/* ---------- In-page sub-nav ----------
   Only on the long pages, where landing on a deep link leaves you with no
   sense of where you are in the document. */
.subnav {
  /* Sits directly under the sticky header (74px nav bar), not beneath it. */
  position: sticky; top: var(--header-offset, 75px); z-index: 900;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav-in { display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav-in::-webkit-scrollbar { display: none; }
.subnav a {
  position: relative; padding: 15px 14px; font-size: var(--fs-sm); font-weight: 600;
  color: var(--grey-600); white-space: nowrap; flex-shrink: 0;
  transition: color .2s var(--ease);
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); }
.subnav a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
  height: 2px; background: var(--blue); border-radius: 2px;
}
@media (max-width: 560px) { .subnav a { padding: 13px 11px; font-size: var(--fs-sm); } }

/* =====================================================================
   LOGIN
   Split screen: brand panel on one side, the domain form on the other.
   Standalone page — no site header or footer.
   ===================================================================== */
.login-body { min-height: 100vh; min-height: 100dvh; }
.login { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }

/* ---------- Brand panel ----------
   Three bands on one baseline: mark, artwork, statement. The rule above the
   statement is the only drawn element, and it runs the full width so the
   panel has an actual structure rather than three floating pieces. */
.login-brand {
  position: relative; overflow: hidden;
  /* minmax(0,…) so the artwork gives way on a short viewport rather than
     pushing the statement out of the panel. */
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(32px, 3.4vw, 52px) clamp(28px, 3.4vw, 56px) clamp(30px, 3.2vw, 44px);
  /* The artwork is transparent, so the panel can carry a tonal shift: light
     at the mark, a little deeper under the type. Ink holds 5.45:1 on the
     darkest stop, so the statement stays readable the whole way down. */
  background: var(--blue);
  color: var(--ink);
}
.lb-logo { grid-row: 1; position: relative; z-index: 2; display: inline-flex; width: max-content; align-self: start; }
.lb-logo img { height: 30px; width: auto; }

/* Centred in the space the other two bands leave, bleeding past the side
   padding so it reads as artwork rather than a placed picture. */
.lb-art {
  /* No overflow clip here: the panel does the clipping, and hiding it on this
     box cropped the bleed back to the padding box. */
  grid-row: 2; align-self: center; min-height: 0;
  display: grid; place-items: center;
}


.lb-copy {
  grid-row: 3; position: relative; z-index: 2; align-self: end;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: 12px clamp(20px, 2.6vw, 40px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(23, 26, 31, .24);
}
.lb-say { max-width: min(27rem, 100%); }
.lb-copy h2 {
  color: var(--ink); font-size: clamp(1.6rem, 2.5vw, 2.25rem); font-weight: 600;
  letter-spacing: -.035em; line-height: 1.13; margin: 0 0 11px; text-wrap: balance;
}
.lb-copy p {
  /* Solid rather than translucent: a tint of ink over the darkest stop
     falls below 4.5:1 and stops being readable body text. 4.82:1 here. */
  margin: 0; max-width: 32ch; color: #20252C;
  font-size: var(--fs-base); line-height: 1.6; font-weight: 500;
}
/* Sits on the rule at the trailing edge and balances the statement. It is
   small text, so it takes a solid ink rather than a tint: 4.82:1. */
.lb-meta {
  align-self: start; white-space: nowrap;
  font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: #20252C;
}

/* ---------- Form panel ---------- */
.login-panel {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(32px, 4vw, 56px) clamp(20px, 4vw, 40px); background: #fff;
}
.lp-inner { width: 100%; max-width: 396px; }
.lp-logo { display: none; margin-bottom: 30px; }
.lp-logo img { height: 32px; width: auto; }
.lp-inner h1 { font-size: clamp(1.8rem, 2.6vw, 2.2rem); font-weight: 600; letter-spacing: -.03em; margin: 0 0 10px; }
.lp-sub { margin: 0 0 30px; color: var(--muted); font-weight: 500; line-height: 1.55; }
.lp-inner label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }

/* Domain entry: icon, free-text subdomain, fixed suffix, as one control */
.domain-field {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: #fff; padding: 0 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.domain-field:hover { border-color: var(--grey-300); }
.domain-field:focus-within { border-color: var(--blue-700); background: var(--blue-050); }
.domain-field svg { width: 17px; height: 17px; color: var(--grey-500); flex-shrink: 0; }
.domain-field input {
  /* width:0 + flex:1: the input's default ~20-character width otherwise sets
     the panel's minimum and pushes it past a 360px screen. */
  flex: 1; width: 0; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--ff); font-size: var(--fs-md); font-weight: 500; color: var(--ink);
  padding: 15px 10px;
}
.domain-field input::placeholder { color: var(--grey-500); font-weight: 500; }
.domain-field .df-suffix {
  font-size: var(--fs-md); font-weight: 600; color: var(--grey-600); flex-shrink: 0;
  /* the suffix is part of the address, so keep it LTR even in Arabic */
  direction: ltr; unicode-bidi: isolate;
}
/* A domain is always written left-to-right, so the control keeps LTR order
   even in Arabic; only its label above flips. */
[dir="rtl"] .domain-field { direction: ltr; }
[dir="rtl"] .domain-field input { text-align: left; }

.lp-submit { margin-top: 18px; }
.lp-help { display: inline-block; margin-top: 16px; font-size: var(--fs-base); font-weight: 600; }
.lp-rule { border: 0; border-top: 1px solid var(--line); margin: 30px 0 26px; }
.lp-alt { display: grid; gap: 10px; margin: 0 0 30px; }
.lp-alt p { margin: 0; font-size: var(--fs-base); color: var(--muted); font-weight: 500; }
.lp-alt a { font-weight: 600; }
.lp-alt svg { width: 14px; height: 14px; vertical-align: -2px; margin-inline-start: 3px; }
[dir="rtl"] .lp-alt svg { transform: scaleX(-1); }
.lp-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
  padding-top: 24px; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--grey-500); font-weight: 500;
}
.lp-foot a { color: var(--grey-500); }
.lp-foot a:hover { color: var(--blue-700); }
.lp-foot .lang-toggle { margin-inline-start: auto; padding: 7px 13px; font-size: var(--fs-xs); }

@media (max-width: 900px) {
  /* Stacked: the banner takes only what it needs, the form gets the rest.
     Without this the grid stretches both rows to fill the viewport. */
  .login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  /* The art panel becomes a compact banner; the form is what matters here. */
  /* Stacked, the panel becomes a header strip: mark and statement only. */
  .login-brand { min-height: 0; padding: 26px clamp(20px, 5vw, 32px) 30px; }
  .lb-art { display: none; }
  .lb-copy { max-width: none; align-self: start; padding-block: 18px 0; }
  .lb-copy h2 { font-size: 1.32rem; margin-bottom: 8px; }
  .lb-copy p { font-size: var(--fs-base); max-width: 46ch; }
  .login-panel { padding-block: clamp(36px, 8vw, 56px); }
}
@media (max-width: 560px) {
  .login-brand { display: none; }   /* below this, lead with the form */
  .lp-logo { display: block; }
}

/* ---------- Workspace sign-in (step 2) ---------- */
/* Which workspace you are signing in to, shown before anything is typed */
.ws-id {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; margin-bottom: 30px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--grey-50);
}
.ws-mark {
  width: 38px; height: 38px; border-radius: var(--radius-xs); flex-shrink: 0;
  display: grid; place-items: center; background: var(--ink-surface); color: #fff;
  font-family: var(--ff-display); font-weight: 600; font-size: var(--fs-md); letter-spacing: -.02em;
}
.ws-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.ws-meta { min-width: 0; display: grid; gap: 1px; }
.ws-name { font-size: var(--fs-base); font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.ws-host {
  font-size: var(--fs-xs); color: var(--grey-500); font-weight: 500;
  direction: ltr; unicode-bidi: isolate; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-switch { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 600; flex-shrink: 0; }

/* Federated sign-in */
.sso { display: grid; gap: 10px; }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; width: 100%;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff;
  font-family: var(--ff); font-size: var(--fs-base); font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.sso-btn:hover { border-color: var(--grey-300); background: var(--grey-50); }
.sso-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.or-rule {
  display: flex; align-items: center; gap: 14px;
  margin: 26px 0; color: var(--grey-500); font-size: var(--fs-xs); font-weight: 600;
}
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Icon-prefixed inputs, same control as the domain field */
.lp-field { display: grid; gap: 8px; margin-bottom: 18px; }
.lp-field label { margin: 0; }
.input-icon {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; padding: 0 14px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.input-icon:hover { border-color: var(--grey-300); }
.input-icon:focus-within { border-color: var(--blue-700); background: var(--blue-050); }
.input-icon > svg { width: 17px; height: 17px; color: var(--grey-500); flex-shrink: 0; }
.input-icon input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font-family: var(--ff); font-size: var(--fs-md); font-weight: 500; color: var(--ink); padding: 15px 10px;
}
.input-icon input::placeholder { color: var(--grey-500); font-weight: 500; }
.pw-toggle {
  border: 0; background: transparent; padding: 6px; cursor: pointer; flex-shrink: 0;
  color: var(--grey-500); display: grid; place-items: center; border-radius: var(--radius-xs);
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle svg { width: 18px; height: 18px; }
.lp-forgot { display: flex; justify-content: flex-end; margin: -4px 0 22px; }
.lp-forgot a { font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Legal pages ---------- */
.legal { max-width: 68ch; }
.legal-note {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--blue-100); background: var(--blue-050);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 40px;
}
.legal-note svg { width: 18px; height: 18px; color: var(--blue-700); flex-shrink: 0; margin-top: 2px; }
.legal-note p { margin: 0; font-size: var(--fs-base); line-height: 1.6; color: var(--ink-2); font-weight: 500; }
.legal h2 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin: 38px 0 10px; letter-spacing: -.022em; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { margin: 0 0 14px; color: var(--muted); line-height: 1.7; font-weight: 500; }
.legal .legal-meta { font-size: var(--fs-sm); color: var(--grey-500); margin-bottom: 34px; }

/* =====================================================================
   PRICING SCHEDULE
   ===================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}/* Only the selected plan's figures are shown */
[data-plan-scope] [data-plan="installment"] { display: none; }
[data-plan-scope].show-installment [data-plan="advance"] { display: none; }
[data-plan-scope].show-installment [data-plan="installment"] { display: inline; }

/* Table */
/* ---------- What's included ----------
   Eighteen ticks beside eighteen lines is noise: when the heading says every
   package has the lot, the ticks only repeat it. The groups are plain ruled
   lists instead, which reads faster and lets the three columns line up on a
   shared baseline grid. */
.inc-head { max-width: 640px; }
.inc-eb {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-display); font-size: var(--fs-2xs); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--blue-700);
}
.inc-rule {
  width: 36px; height: 1px; flex-shrink: 0; background: var(--blue-200);
  transform-origin: left center; transition: transform .9s var(--ease-out) .12s;
}
[dir="rtl"] .inc-rule { transform-origin: right center; }
.js .inc-head[data-reveal]:not(.in) .inc-rule { transform: scaleX(0); }
.included h2 {
  margin: 14px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600; letter-spacing: -.036em; line-height: 1.08; text-wrap: balance;
}
.included .lead { margin-top: 16px; max-width: 54ch; }

/* All eight products, each with what it does. Type and space only: no
   icons, no bullets, no boxes. A rule above each row of four, the number
   and name as the heading, the capabilities as a quiet list beneath. */
.ip-grid {
  margin-top: clamp(40px, 5vw, 68px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 48px);
}
.ip {
  padding: clamp(22px, 2.4vw, 30px) 0 clamp(34px, 3.6vw, 48px);
  border-top: 1px solid var(--line-2);
}
/* The first row sits on a firmer rule, the way the section opens */
.ip:nth-child(-n + 4) { border-top-color: var(--ink); }
.ip-head { display: grid; gap: 8px; color: var(--ink); }
.ip-n {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ff-display); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: .14em; color: var(--grey-500); font-variant-numeric: tabular-nums; line-height: 1;
}
.ip-n { height: 12px; }   /* fixed, so a badge never pushes its column down */
.ip-n .mega-soon { margin: 0; letter-spacing: .1em; padding-block: 2px; }
.ip-name {
  font-weight: 600; font-size: var(--fs-lg); letter-spacing: -.024em; line-height: 1.2;
  transition: color .2s var(--ease);
}
.ip-head:hover .ip-name { color: var(--blue-700); }
.ip-caps { margin-top: clamp(14px, 1.6vw, 18px); display: grid; gap: 8px; }
.ip-caps li { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); line-height: 1.45; }

/* The service that comes with every package, as one quiet line */
.ip-extra {
  margin-top: clamp(8px, 1vw, 12px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line-2);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 28px;
}
.ip-extra-l { font-size: var(--fs-3xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-500); }
[dir="rtl"] .ip-extra-l { letter-spacing: 0; }
.ip-extra ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; }
.ip-extra li { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.ip-extra li + li::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 3px; height: 3px; margin-inline: 12px; border-radius: 50%; background: var(--grey-300);
}

@media (max-width: 1000px) {
  .ip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip:nth-child(-n + 4) { border-top-color: var(--line-2); }
  .ip:nth-child(-n + 2) { border-top-color: var(--ink); }
}
@media (max-width: 600px) {
  .ip-grid { grid-template-columns: 1fr; }
  .ip:nth-child(-n + 2) { border-top-color: var(--line-2); }
  .ip:first-child { border-top-color: var(--ink); }
  .ip { padding-bottom: clamp(26px, 6vw, 32px); }
  .ip-extra { display: grid; gap: 12px; }
  .ip-extra ul { display: grid; gap: 6px; }
  .ip-extra li + li::before { content: none; }
}
@media (prefers-reduced-motion: reduce) { .inc-rule { transition: none; transform: none; } }/* Below the table's comfortable width, each row becomes its own card. */
@media (max-width: 760px) {
}/* =====================================================================
   WIDE CTA BAND
   Full-bleed close: statement on one side, the Warah peak on the other,
   lit by the same soft glow used on the hero and product mocks.
   ===================================================================== */
.ctaband {
  position: relative; overflow: hidden;
  background: var(--ink-surface);
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-block: clamp(58px, 7.5vw, 112px);
}
.ctaband > .container-x { position: relative; z-index: 2; }
.ctaband-in { position: relative; z-index: 2; max-width: min(54%, 620px); }
.ctaband-eb { color: var(--blue); margin-bottom: 18px; }
.ctaband h2 {
  color: #fff; font-size: clamp(2.3rem, 5vw, 3.9rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1; margin: 0 0 34px; text-wrap: balance;
}
.ctaband-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ctaband-note {
  margin: 0; font-size: var(--fs-base); font-weight: 500; line-height: 1.6;
  color: rgba(255,255,255,.6); max-width: 40ch;
}
.btn-accent { background: var(--blue); color: var(--ink); border: 1px solid var(--blue); }
.btn-accent:hover { background: var(--blue-600); border-color: var(--blue-600); color: var(--ink); }

/* The mark is the graphic, not an ornament: it stands on the band's bottom
   edge at full height and runs off the trailing edge. Cropping hard against
   two edges reads as deliberate; shaving one edge reads as a mistake. */
.ctaband-mark {
  position: absolute; z-index: 1; bottom: 0; inset-inline-end: -4%;
  width: min(52%, 660px); line-height: 0; pointer-events: none;
  opacity: .8;
}
.ctaband-art { display: block; width: 100%; height: auto; }
.ctaband-art g { fill: var(--blue); }

@media (max-width: 900px) {
  .ctaband-in { max-width: 100%; }
  /* Stacked, the mark sits behind the copy, so it drops back to a field. */
  .ctaband-mark { width: 74%; inset-inline-end: -14%; opacity: .16; }
}

/* =====================================================================
   TESTIMONIALS
   Three tall cards: two customer portraits with the quote set on the photo,
   and a brand-blue card between them carrying a quote on its own. Flat
   surfaces only: the portraits are darkened with a solid scrim, not a fade.

   Each portrait card takes its photo from an inline background-image. With
   no photo set (or the file missing) the card falls back to the ink
   surface, so it never shows a broken image.
   ===================================================================== */
.tm-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(30px, 4vw, 52px);
}
.tm-title { max-width: 640px; }
.tm-nav { display: flex; gap: 10px; flex-shrink: 0; }
.tm-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ink); border: 1px solid var(--line-2); cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s;
}
.tm-btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.tm-btn:disabled { opacity: .35; cursor: default; }
.tm-btn .ico { width: 19px; height: 19px; }
.tm-btn[data-tm-prev] .ico { transform: scaleX(-1); }
[dir="rtl"] .tm-btn[data-tm-prev] .ico { transform: none; }
[dir="rtl"] .tm-btn[data-tm-next] .ico { transform: scaleX(-1); }
.tm-head h2 {
  margin: 14px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600; letter-spacing: -.036em; line-height: 1.08; text-wrap: balance;
}
/* One row that scrolls sideways at every width: three cards in view on
   desktop, two on tablet, one and a peek of the next on phones. The cards
   overflow the grid and the rail is the scroll container. */
/* Edge to edge: the rail sits outside the page container and spans the
   full width. Its padding lines the first card up with the heading above,
   and the cards after it run off the screen edge. --tm-gut matches the
   container's side padding at each breakpoint. */
.tm-rail {
  --tm-gap: clamp(14px, 1.8vw, 24px);
  --tm-gut: 24px;
  --tm-edge: max(var(--tm-gut), calc((100% - var(--container)) / 2 + var(--tm-gut)));
  padding-inline: var(--tm-edge); scroll-padding-inline: var(--tm-edge);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.tm-rail::-webkit-scrollbar { display: none; }
.tm-rail:focus-visible { outline-offset: 6px; }
.tm-grid {
  display: grid; grid-auto-flow: column; gap: var(--tm-gap);
  grid-auto-columns: calc((100% - 2 * var(--tm-gap)) / 3);
}
.tm-card { scroll-snap-align: start; }
.tm-card {
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  aspect-ratio: 3 / 4; border-radius: clamp(20px, 2vw, 28px);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  color: #fff; background: var(--ink-surface);
}
/* Portrait: the photo, then a flat scrim so white type holds on any image */
.tm-card--photo {
  /* The photo comes from the card's own background-image (set in the page,
     so its path resolves from the page); the ink shows until one is added. */
  background-color: var(--ink-surface);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.tm-card--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(10, 16, 22, .42);
}
.tm-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tm-who { display: grid; gap: 4px; min-width: 0; }
.tm-name { font-weight: 600; font-size: var(--fs-md); letter-spacing: -.015em; }
.tm-role { font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,.82); }
/* Partner logos are dark artwork; flattened to white on the photo cards */
.tm-logo { height: clamp(26px, 2.6vw, 34px); width: auto; max-width: 42%; object-fit: contain; filter: brightness(0) invert(1); flex-shrink: 0; }
.tm-quote {
  margin: 0; font-size: clamp(1.12rem, 1.7vw, 1.42rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.3; text-wrap: pretty;
}

/* Feature card: brand blue, centred, ink type (white on #5FA8D3 is 2.6:1) */
.tm-card--brand { background: var(--blue); color: var(--ink); text-align: center; align-items: center; }
.tm-card--brand .tm-logo { filter: brightness(0); opacity: .78; max-width: 55%; }
.tm-mid { display: grid; justify-items: center; gap: clamp(16px, 2vw, 26px); }
.tm-mark { width: clamp(38px, 3.6vw, 52px); height: auto; fill: rgba(23,26,31,.28); }
.tm-card--brand .tm-quote { font-size: clamp(1.18rem, 1.9vw, 1.6rem); }
.tm-card--brand .tm-who { justify-items: center; }
.tm-card--brand .tm-role { color: rgba(23,26,31,.88); }

@media (max-width: 1000px) {
  .tm-grid { grid-auto-columns: calc((100% - var(--tm-gap)) / 2); }
}
/* Phones: the rail runs to the screen edges so the next card peeks in,
   which is what tells people the row can be swiped. */
@media (max-width: 640px) {
  .tm-grid { grid-auto-columns: 82%; }
  .tm-card { aspect-ratio: 4 / 5; }
  .tm-nav { display: none; }
}
@media (max-width: 560px) { .tm-rail { --tm-gut: 18px; } }
@media (max-width: 400px) { .tm-rail { --tm-gut: 16px; } }
@media (prefers-reduced-motion: reduce) { .tm-rail { scroll-behavior: auto; } }

/* =====================================================================
   HERO DASHBOARD
   A pastel illustration of the product rather than a screenshot: app bar,
   icon sidebar, then a grid of cards. Skeleton bars stand in for text, so
   it reads as "the product" at a glance without asking to be read, and it
   needs no translation. Flat fills only.
   ===================================================================== */
.dash {
  /* Calm palette: one strong blue, everything else stays close to white,
     so the eye lands on the product's shape instead of its details. */
  --d-bg: #F8FAFC;          /* app canvas */
  --d-line: #EEF2F6;
  --d-sk: #EBEFF4;          /* light skeleton */
  --d-ink: #A9B4C2;         /* heading skeleton */
  --d-icon: #A3AEBC;
  --d-soft: #DCEBF5;        /* pastel brand blue */
  --d-r: clamp(12px, 1.2vw, 16px);
  background: #fff; border: 1px solid #E9EEF3;
  border-radius: var(--radius-lg); overflow: hidden; text-align: start;
  box-shadow: 0 1px 2px rgba(16, 32, 48, .04), 0 40px 80px -40px rgba(16, 32, 48, .16);
}
.dash .ico { width: 17px; height: 17px; color: var(--d-icon); stroke-width: 1.6; }

/* Skeleton line. --w sets its length. */
.sk { display: block; height: 6px; width: var(--w, 60%); max-width: 100%; border-radius: 99px; background: var(--d-sk); flex-shrink: 1; min-width: 0; }
.sk-ink { background: var(--d-ink); height: 7px; }
.sk-lg { height: 11px; background: #8F9BAB; }
.sk-white { background: rgba(255,255,255,.9); }
.sk-blue { background: var(--blue); }
.sk-end { margin-inline-start: auto; flex-shrink: 0; }

/* App bar */
.dash-top {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  padding: clamp(10px, 1.2vw, 14px) clamp(14px, 2vw, 26px);
  border-bottom: 1px solid var(--d-line); background: #fff;
}
.dash-logo { width: clamp(30px, 3vw, 40px); height: auto; fill: var(--blue); flex-shrink: 0; }
.dash-search {
  flex: 0 1 380px; margin-inline: auto; display: flex; align-items: center; gap: 10px;
  height: clamp(32px, 3vw, 40px); padding-inline: 14px;
  border: 1px solid var(--d-line); border-radius: 99px; background: #fff;
}
.dash-acts { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 18px); flex-shrink: 0; }
.dash-bell { position: relative; display: grid; }
.dash-bell::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }
.dash-globe { display: grid; }
.dash-me { display: flex; align-items: center; gap: 6px; }
.dash-me .ico { width: 14px; height: 14px; }

.dash-av { display: block; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; }
.dash-av-sm { width: clamp(30px, 2.8vw, 38px); height: clamp(30px, 2.8vw, 38px); }
.dash-av-lg { width: clamp(52px, 5.4vw, 68px); height: clamp(52px, 5.4vw, 68px); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--d-line); }

/* Body: sidebar + canvas */
.dash-body { display: grid; grid-template-columns: clamp(150px, 15vw, 190px) minmax(0, 1fr); }
.dash-side { display: grid; align-content: start; gap: 4px; padding: 16px 12px; border-inline-end: 1px solid var(--d-line); background: #fff; }
.dash-nav { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.dash-nav .sk { height: 5px; }
.dash-nav.is-on { background: #F0F6FB; }
.dash-nav.is-on .ico { color: var(--blue); }
.dash-nav.is-on .sk { background: var(--d-soft); }

.dash-main { background: var(--d-bg); padding: clamp(16px, 2.2vw, 30px); display: grid; gap: clamp(14px, 1.7vw, 22px); }
.dash-hello { display: flex; align-items: center; gap: 16px; }
.dash-lines { display: grid; gap: 9px; flex: 1; min-width: 0; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(12px, 1.5vw, 20px); }
.dash-card {
  display: grid; align-content: start; gap: 16px; min-width: 0;
  background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-r);
  padding: clamp(14px, 1.7vw, 22px);
}
.dash-card-head { display: flex; align-items: center; gap: 10px; }
.dash-more { margin-inline-start: auto; display: grid; opacity: .6; }
.dash-team { grid-column: 1 / -1; }

/* Quick actions */
.dash-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dash-tile { display: grid; gap: 8px; padding: 14px 12px; border-radius: 12px; background: #FAFBFD; border: 1px solid var(--d-line); }
.dash-tile .sk { height: 5px; }
.dash-tile-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; }
.dash-tile-ico .ico { width: 17px; height: 17px; }
.t-blue  { background: #EAF3FA; } .t-blue .ico  { color: var(--blue); }
.t-green { background: #E8F6EE; } .t-green .ico { color: #5DBB8A; stroke-width: 2; }
.t-amber { background: #FBF0DD; } .t-amber .ico { color: #D9A04E; }
.dash-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  height: clamp(36px, 3.4vw, 42px); border-radius: 12px; background: var(--blue);
}
.dash-btn .ico { color: #fff; }

/* Lists */
.dash-list { display: grid; }
.dash-row { display: flex; align-items: center; gap: 12px; padding-block: 11px; border-top: 1px solid #F3F6F9; }
.dash-row:first-child { border-top: 0; padding-top: 2px; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.d-a { background: var(--blue); } .d-b { background: var(--d-soft); } .d-c { background: #B4D6EB; }
.dash-ring { width: 24px; height: 24px; border-radius: 50%; background: #F0F5F9; flex-shrink: 0; }
.dash-pill { width: 48px; height: 12px; border-radius: 99px; margin-inline-start: auto; flex-shrink: 0; }
.p-green { background: #DCF2E5; } .p-amber { background: #FBEBCB; } .p-red { background: #F8DDDD; }

/* Team */
.dash-people { display: flex; align-items: center; gap: clamp(12px, 2vw, 26px); }
.dash-person { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.dash-person .dash-lines { gap: 7px; }
.dash-outline {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  height: 34px; padding-inline: 14px; border-radius: 99px; border: 1px solid var(--d-soft);
}
.dash-outline .ico { color: var(--blue); }

/* Chart */
.dash-chart-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.dash-bars { display: flex; align-items: flex-end; gap: 10px; height: clamp(80px, 8vw, 104px); padding-bottom: 4px; border-bottom: 1px solid var(--d-line); }
.dash-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; transform-origin: bottom; transition: transform .9s var(--ease-out); }
.dash-bars .b-soft { background: var(--d-soft); }
.dash-bars .b-solid { background: var(--blue); }
.dash-bars i:nth-child(2) { transition-delay: .06s; } .dash-bars i:nth-child(3) { transition-delay: .12s; }
.dash-bars i:nth-child(4) { transition-delay: .18s; } .dash-bars i:nth-child(5) { transition-delay: .24s; }
.dash-bars i:nth-child(6) { transition-delay: .30s; }
.js [data-reveal]:not(.in) .dash-bars i { transform: scaleY(0); }
.dash-chart .dash-list { align-self: center; }
.dash-chart .dash-row { border-top: 0; padding-block: 6px; }

/* Tablet: the sidebar goes, the cards keep two columns */
@media (max-width: 860px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); }
  .dash-side { display: none; }
  .dash-people .dash-person:nth-child(4) { display: none; }
}
/* Phone: one column, and only the details that still read at this size */
@media (max-width: 640px) {
  .dash { border-radius: 20px; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-globe { display: none; }
  .dash-search { flex-basis: auto; flex-grow: 1; margin-inline: 0; }
  .dash-hello .sk-lg { --w: 70% !important; }
  .dash-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .dash-people .dash-person:nth-child(4) { display: flex; }
  .dash-outline { grid-column: 1 / -1; justify-content: center; }
  .dash-tile { padding: 10px 8px; }
  .dash-tile .sk:last-child { display: none; }
  .dash-chart, .dash-news, .dash-att .dash-row:nth-child(3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dash-bars i { transition: none; transform: none !important; } }

/* ---------- Feature-tab panels ----------
   The same dashboard language as the hero, cut down to one screen of one
   module: app bar, then a couple of cards. No sidebar and no address bar. */
/* Flat: no shadow or glow behind the tab panels, only the hairline border. */
.dash--mini { box-shadow: none; }
.dash--mini .dash-acts { margin-inline-start: auto; }
/* Compact spacing inside the tab panels, so they sit level with the copy
   beside them instead of towering over it. */
.dash--mini .dash-main { padding: clamp(14px, 1.6vw, 20px); gap: 12px; }
.dash--mini .dash-card { padding: clamp(12px, 1.3vw, 16px); gap: 10px; }
.dash--mini .dash-row { padding-block: 8px; }
.dash--mini .dash-row:first-child { padding-top: 0; }
.dash--mini .dash-tile { padding: 12px; }
.dash--mini .dash-bars { height: clamp(70px, 7vw, 92px); }
/* One fixed height for every panel, so switching tabs never jumps the page */
.feature-visual .dash-main { height: var(--tab-h, 322px); align-content: start; overflow: hidden; }

.dash-av-row { width: 34px; height: 34px; }
.dash-row .dash-lines { gap: 7px; }
.dash-row .dash-lines .sk { height: 5px; }
.dash-row .dash-lines .sk-ink { height: 6px; }

.dash-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-kpi { background: #fff; padding: 14px; gap: 9px; }
.sk-num { height: 12px; background: #8F9BAB; }

.dash-chip { display: inline-flex; padding: 5px 9px; border-radius: 99px; background: #EEF5FA; }
.dash-chip .sk { height: 5px; background: var(--blue); }

.dash-payout { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-payout .dash-lines { gap: 10px; }
.dash-btn-sm { height: 36px; padding-inline: 18px; flex-shrink: 0; }

@media (max-width: 860px) { .feature-visual .dash-main { height: var(--tab-h-m, 299px); } }
@media (max-width: 640px) {
  .dash--mini .dash-chart { display: grid; }
  .dash--mini .dash-tiles .dash-kpi:nth-child(3) { display: none; }
  .dash--mini .dash-tiles:not(.dash-tiles-2) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   PRODUCT TILES
   Brand-blue square with the module's headline and a phone rising off the
   bottom edge, its screen drawn in the same calm dashboard language as the
   homepage. Built in markup rather than shipped as images, so it is sharp
   at any size and translates with the page.

   Every length is in cqw (a percentage of the tile's own width), so the tile
   is one fixed composition that scales as a whole: a 300px tile on a phone
   is an exact miniature of the 560px one on desktop.
   ===================================================================== */
.pshot {
  /* Same calm palette as the homepage dashboard (.dash) */
  --d-line: #EEF2F6; --d-sk: #EBEFF4; --d-ink: #A9B4C2; --d-icon: #A3AEBC; --d-soft: #DCEBF5;
  container-type: inline-size;
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: 1 / 1; width: 100%;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--blue);
  display: flex; flex-direction: column; align-items: center;
  /* No padding here: cqw measures this box's content area, so padding on the
     tile itself would shrink every unit inside it. Spacing lives on children. */
  padding: 0; text-align: center;
}
.pshot-say {
  margin: 9cqw 8cqw 0; max-width: 76cqw; color: var(--ink);
  font-family: var(--ff-display); font-weight: 600;
  font-size: 6cqw; line-height: 1.12; letter-spacing: -.03em; text-wrap: balance;
}
[dir="rtl"] .pshot-say { letter-spacing: 0; line-height: 1.3; }

/* Phone: dark bezel, white screen, cropped by the tile's bottom edge */
.phone {
  position: absolute; left: 50%; top: 34cqw; transform: translateX(-50%);
  width: 52cqw; height: 104cqw; padding: 1.5cqw;
  border-radius: 8.4cqw; background: #1A1F26;
  box-shadow: 0 0 0 .35cqw rgba(255,255,255,.18) inset;
}
.phone-screen {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 7cqw; background: #F8FAFC; text-align: start;
}
.phone-bar {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  height: 8.6cqw; padding: 0 5.2cqw; background: #fff;
}
.phone-time { height: 1.3cqw !important; }
.phone-island {
  position: absolute; left: 50%; top: 1.7cqw; transform: translateX(-50%);
  width: 14cqw; height: 4cqw; border-radius: 99px; background: #1A1F26;
}
.phone-sig { display: flex; align-items: flex-end; gap: .45cqw; }
.phone-sig i { width: .8cqw; border-radius: .3cqw; background: var(--d-ink, #A9B4C2); }
.phone-sig i:nth-child(1) { height: 1cqw; } .phone-sig i:nth-child(2) { height: 1.5cqw; } .phone-sig i:nth-child(3) { height: 2cqw; }

.phone-app { display: grid; align-content: start; gap: 2.4cqw; padding: 2.6cqw 3.2cqw; }

/* Screen pieces. The skeleton bars and pastel tokens come from .dash. */
.pshot .sk { height: 1cqw; }
.pshot .sk-ink { height: 1.2cqw; }
.pshot .sk-num { height: 1.9cqw; background: #8F9BAB; }
.pshot .sk-big { height: 2.8cqw; }
.pshot .sk-title { height: 1.7cqw; background: #8F9BAB; }
.pshot .ico { width: 2.7cqw; height: 2.7cqw; stroke-width: 1.9; color: #A3AEBC; }

.ps-head { display: flex; align-items: center; justify-content: space-between; padding: .6cqw .4cqw 0; }
.ps-round { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #EEF2F6; }
.ps-card {
  display: grid; gap: 2cqw; padding: 2.6cqw;
  background: #fff; border: 1px solid #EEF2F6; border-radius: 3cqw;
}
.ps-row { display: flex; align-items: center; gap: 2.2cqw; }
.ps-row + .ps-row { padding-top: 2cqw; border-top: 1px solid #F3F6F9; }
.ps-lines { display: grid; gap: 1.1cqw; flex: 1; min-width: 0; }
.ps-center { justify-items: center; }
.ps-av { width: 5.6cqw; height: 5.6cqw; border-radius: 50%; flex-shrink: 0; display: block; }
.ps-av-lg { width: 8.4cqw; height: 8.4cqw; }
.ps-me { display: flex; align-items: center; gap: 2.6cqw; }
.ps-pill { width: 7cqw; height: 2.2cqw; border-radius: 99px; flex-shrink: 0; }
.pshot .dash-dot { width: 1.7cqw; height: 1.7cqw; }

.ps-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; }
.ps-tile { display: grid; gap: 1.3cqw; padding: 2.4cqw; background: #fff; border: 1px solid #EEF2F6; border-radius: 3cqw; }
.pshot .dash-tile-ico { width: 5.4cqw; height: 5.4cqw; border-radius: 1.6cqw; margin-bottom: .6cqw; }
.pshot .dash-tile-ico .ico { width: 2.7cqw; height: 2.7cqw; }
.pshot .t-blue .ico { color: var(--blue); } .pshot .t-green .ico { color: #5DBB8A; } .pshot .t-amber .ico { color: #D9A04E; }

.ps-btn {
  display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  height: 6.4cqw; border-radius: 2cqw; background: var(--blue);
}
.ps-btn .ico { color: #fff; }

/* Attendance: a clock face over the clock-in button */
.ps-clockcard { justify-items: center; gap: 2.4cqw; padding-block: 3.4cqw; }
.ps-clockcard .ps-btn { width: 100%; }
.ps-clock { position: relative; width: 14cqw; height: 14cqw; border-radius: 50%; border: .5cqw solid #DCEBF5; }
.ps-hand { position: absolute; left: 50%; bottom: 50%; width: .5cqw; border-radius: 99px; background: #56647A; transform-origin: bottom center; }
.ps-hand.h1 { height: 4cqw; transform: translateX(-50%) rotate(-40deg); }
.ps-hand.h2 { height: 5.4cqw; background: var(--blue); transform: translateX(-50%) rotate(70deg); }

/* Payroll and indemnity: one figure, then the lines that make it up */
.ps-totalcard { position: relative; }
.ps-total { display: grid; gap: 1.4cqw; }
.ps-money { width: 5.6cqw; height: 5.6cqw; border-radius: 1.6cqw; display: grid; place-items: center; background: #EAF3FA; flex-shrink: 0; }
.ps-money .ico { color: var(--blue); }
.ps-check { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; display: grid; place-items: center; background: #DCF2E5; flex-shrink: 0; }
.ps-check .ico { width: 2.2cqw; height: 2.2cqw; color: #4FAE7C; stroke-width: 2.6; }
.ps-badge { position: absolute; top: 2.6cqw; inset-inline-end: 2.6cqw; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; display: grid; place-items: center; background: #EAF3FA; }
.ps-badge .ico { color: var(--blue); }

/* Communication: a featured announcement */
.ps-annc { grid-template-columns: auto 1fr; align-items: center; gap: 2.4cqw; }
.ps-banner { width: 7cqw; height: 7cqw; border-radius: 2cqw; display: grid; place-items: center; background: #EAF3FA; }
.ps-banner .ico { color: var(--blue); }

/* Talent: pipeline stages and candidate scores */
.ps-pipe { gap: 1.8cqw; }
.ps-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; }
.ps-steps i { height: 1.2cqw; border-radius: 99px; background: #EBEFF4; }
.ps-steps i.on { background: var(--blue); }
.ps-score { width: 8cqw; height: 1.2cqw; border-radius: 99px; background: #EBEFF4; overflow: hidden; flex-shrink: 0; }
.ps-score i { display: block; height: 100%; width: var(--s); background: #8EC3E3; border-radius: inherit; }

/* Analytics: a small bar chart */
.ps-chartcard { gap: 2.4cqw; }
.ps-bars { display: flex; align-items: flex-end; gap: 1.4cqw; height: 13cqw; border-bottom: 1px solid #EEF2F6; }
.ps-bars i { flex: 1; height: var(--h); border-radius: .9cqw .9cqw .3cqw .3cqw; }
.ps-bars .b-soft { background: #DCEBF5; } .ps-bars .b-solid { background: var(--blue); }

@media (max-width: 860px) { .pmod-shot.pshot { max-width: 460px; } }

/* ---------- How pricing works ----------
   Three steps on one line. No circles, shadows or colour: a single hairline
   runs across all three, with the number, title and line beneath it. */
.pw-head h2 {
  margin: 14px 0 0; font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 600; letter-spacing: -.036em; line-height: 1.08; text-wrap: balance;
}
.pw-steps {
  list-style: none; margin: clamp(34px, 4.4vw, 60px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 48px);
}
.pw-step { position: relative; display: grid; align-content: start; gap: 10px; padding-top: clamp(26px, 2.8vw, 34px); }
/* One plain shared hairline across the three steps */
.pw-step::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--line-2);
}
.pw-n {
  font-family: var(--ff-display); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .12em; color: var(--blue-700); font-variant-numeric: tabular-nums;
}
.pw-step h3 { margin: 4px 0 0; font-size: clamp(1.12rem, 1.7vw, 1.36rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.2; }
.pw-step p { margin: 0; max-width: 34ch; color: var(--muted); font-weight: 500; font-size: var(--fs-base); line-height: 1.6; }

@media (max-width: 760px) {
  .pw-steps { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 36px); }
}

/* ---------- Sign-in illustration ----------
   The product in the house style: an app window with a phone over its
   corner, drawn with the same pieces as the product tiles. Everything is in
   cqw of the scene (the window) or of the phone's own wrapper (the phone), so
   the composition scales as one object. Its width is capped by the viewport
   height, so on a short screen it shrinks instead of pushing the copy out. */
.lb-scene {
  position: relative; display: block; overflow: visible;
  aspect-ratio: 1.18; padding: 0; background: none; border-radius: 0;
  width: min(100%, calc((100dvh - 330px) * 1.18)); margin-inline: auto;
  direction: ltr;              /* a picture, not text: it does not mirror */
  text-align: start;           /* .pshot centres its headline; this is a window */
}
.lb-win {
  position: absolute; left: 0; top: 0; width: 84cqw; height: 70cqw;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 3.2cqw;
  box-shadow: 0 2.4cqw 7cqw -3cqw rgba(16, 32, 48, .28);
}
.lb-bar {
  flex-shrink: 0; height: 7.4cqw; padding: 0 3cqw;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #EEF2F6;
}
.lb-mark { width: 5cqw; height: auto; fill: var(--blue); }
.lb-main { display: grid; align-content: start; gap: 2.2cqw; padding: 2.8cqw 3cqw; background: #F8FAFC; }


/* Minimal variant: one window, centred, no sidebar and no phone. */
.lb-scene--min { aspect-ratio: 1.3; width: min(100%, calc((100dvh - 330px) * 1.3)); }
.lb-scene--min .lb-win { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78cqw; height: auto; }
.lb-scene--min .lb-bar .ps-av { width: 4.8cqw; height: 4.8cqw; }
.lb-scene--min .lb-main { gap: 3cqw; padding: 4cqw; }

/* ---------- Contact: address card with a small map ----------
   The address reads first; the map sits under it as a compact strip in the
   card's own corners, in full colour and static: no hover change. */
.cside-addr { flex-wrap: wrap; }
.cside-addr > span { flex: 1; min-width: 0; }
.cs-addr { display: block; font-style: normal; font-size: var(--fs-base); font-weight: 600; line-height: 1.5; color: var(--ink); }
.cs-dir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--blue-700);
}
.cside-card .cs-dir { font-size: var(--fs-sm); color: var(--blue-700); }
.cs-dir .ico { width: 14px; height: 14px; color: currentColor; margin: 0; transition: transform .25s var(--ease); }
.cs-dir:hover .ico { transform: translateX(3px); }
[dir="rtl"] .cs-dir .ico { transform: scaleX(-1); }
[dir="rtl"] .cs-dir:hover .ico { transform: scaleX(-1) translateX(3px); }
.cs-map {
  flex-basis: 100%; height: 170px; margin-top: 4px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--grey-50);
}
.cs-map iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* ---------- Illustration text ----------
   The dashboards, tab panels, product tiles and sign-in window show realistic
   sample data. These are the text roles that took the place of the skeleton
   bars, sized to the same footprint so no layout moves. In the dashboards
   they are in px; inside the cqw-scaled tiles they are in cqw, so the text
   scales with the drawing. Long values truncate rather than wrap. */
.dash .tx, .pshot .tx {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--ff); font-weight: 500; color: #636F84; line-height: 1.3; letter-spacing: -.005em;
}
.dash .tx-b, .pshot .tx-b { color: #3A4556; font-weight: 600; }
.dash .tx-n, .pshot .tx-n { color: #1F2733; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash .tx-w, .pshot .tx-w { color: #fff; font-weight: 600; }
.dash .tx-blue, .pshot .tx-blue { color: var(--blue); font-weight: 600; }
.dash .tl, .pshot .tl { display: grid; gap: 2px; flex: 1; min-width: 0; }
.dash .tx-r, .pshot .tx-r { margin-inline-start: auto; flex-shrink: 0; }
/* Pills now carry a word, so they size to it */
.dash .pill, .pshot .pill {
  flex-shrink: 0; margin-inline-start: auto; display: inline-flex; align-items: center;
  border-radius: 99px; font-weight: 600; white-space: nowrap; line-height: 1;
}
.pill.p-green { background: #DCF2E5; color: #2A744C; }
.pill.p-amber { background: #FBEBCB; color: #8A5E12; }
.pill.p-red   { background: #F8DDDD; color: #A33A3A; }
.pill.p-blue  { background: #EAF3FA; color: #2876AA; }

/* Sizes in the px dashboards (hero + tab panels) */
.dash .tx { font-size: 11px; }
.dash .tx-b { font-size: 12.5px; }
.dash .tx-n { font-size: 19px; line-height: 1.15; }
.dash .tx-h { font-size: 13px; color: #3A4556; font-weight: 600; }
.dash .tx-hello { font-size: 17px; color: #1F2733; font-weight: 600; letter-spacing: -.02em; }
.dash .tx-search { font-size: 12px; color: #A3AEBC; font-weight: 500; }
.dash .pill { font-size: 10.5px; padding: 4px 9px; }
.dash .dash-nav .tx { font-size: 12.5px; color: #6B788A; }
.dash .dash-nav.is-on .tx { color: var(--blue-700); font-weight: 600; }
.dash .dash-btn .tx-w, .dash .dash-outline .tx-blue { font-size: 12.5px; }
.dash .dash-tile .tx-n { font-size: 15px; }
.dash .dash-kpi .tx-n { font-size: 20px; }
.dash .dash-chip { padding: 3px 9px; }
.dash .dash-chip .tx { font-size: 10.5px; color: var(--blue-700); font-weight: 600; }
.dash .dash-payout .tx-n { font-size: 22px; }

/* Sizes inside the cqw tiles (product tiles + sign-in window) */
.pshot .tx { font-size: 1.85cqw; }
.pshot .tx-b { font-size: 2.15cqw; }
.pshot .tx-n { font-size: 3.1cqw; line-height: 1.15; }
.pshot .tx-big { font-size: 4.4cqw; line-height: 1.1; }
.pshot .tx-h { font-size: 2.5cqw; color: #1F2733; font-weight: 600; letter-spacing: -.02em; }
.pshot .tx-time { font-size: 1.9cqw; color: #1F2733; font-weight: 600; }
.pshot .pill { font-size: 1.6cqw; padding: .6cqw 1.3cqw; }
.pshot .ps-btn .tx-w { font-size: 2.1cqw; }
.pshot .ps-tile .tx-n { font-size: 2.7cqw; }
.pshot .ps-clockcard .tx-big { font-size: 5.6cqw; letter-spacing: -.03em; }

/* ---------- "What's my domain?" dialog ----------
   A native <dialog>: the browser handles the modal layer, Esc and keeping
   focus inside it. The address bar is drawn, not a screenshot, so it stays
   sharp and matches the rest of the sign-in page. */
.dhelp {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  margin: auto; padding: clamp(28px, 5vw, 40px) clamp(22px, 5vw, 40px) clamp(24px, 4vw, 32px);
  border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink);
  text-align: center; box-shadow: 0 40px 90px -30px rgba(16, 32, 48, .45);
}
.dhelp::backdrop { background: rgba(18, 22, 28, .5); }
.dhelp[open] { animation: dhelp-in .28s var(--ease-out); }
.dhelp[open]::backdrop { animation: dhelp-fade .28s var(--ease-out); }
@keyframes dhelp-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes dhelp-fade { from { opacity: 0; } }
.dhelp-x {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent;
  color: var(--grey-500); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.dhelp-x:hover { background: var(--grey-50); color: var(--ink); }
.dhelp-x .ico { width: 20px; height: 20px; }
.dhelp-logo { height: 28px; width: auto; margin: 0 auto; }
[dir="rtl"] .dhelp-logo { height: 32px; }
.dhelp-title { margin: 22px 0 0; font-size: clamp(1.3rem, 3.4vw, 1.55rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }

/* The drawn address bar */
.dhelp-art { direction: ltr; margin: 26px auto 0; width: max-content; max-width: 100%; }
.dhelp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  background: var(--grey-50); font-size: clamp(.95rem, 2.8vw, 1.08rem); font-weight: 500;
}
.dhelp-bar .ico { width: 18px; height: 18px; color: var(--grey-500); }
.dhelp-url { display: inline-flex; align-items: center; white-space: nowrap; }
.dhelp-muted { color: var(--grey-500); }
.dhelp-domain {
  margin: 0 2px; padding: 2px 8px; border-radius: 6px;
  background: #fff; color: var(--ink); font-weight: 700;
  box-shadow: 0 0 0 2px var(--blue);
}
/* The pointer sits under "company": the first column is the width of the
   globe + "https://" so the line lands on the highlighted word. */
.dhelp-pointer { display: flex; flex-direction: column; align-items: flex-start; padding-left: calc(14px + 18px + 10px + 3.9em); font-size: clamp(.95rem, 2.8vw, 1.08rem); }
.dhelp-line { width: 2px; height: 16px; margin-left: 1.6em; background: var(--blue); border-radius: 2px; position: relative; }
.dhelp-line::before { content: ""; position: absolute; top: -2px; left: 50%; width: 8px; height: 8px; border-top: 2px solid var(--blue); border-left: 2px solid var(--blue); transform: translateX(-50%) rotate(45deg); }
.dhelp-tag {
  margin-top: 4px; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--blue); color: var(--ink); font-size: var(--fs-xs); font-weight: 600; letter-spacing: -.005em;
}
.dhelp-text { margin: 24px auto 0; max-width: 36ch; font-size: var(--fs-md); line-height: 1.6; color: var(--muted); font-weight: 500; }
.dhelp-ok { margin-top: 26px; min-width: 190px; }
.dhelp-alt { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--grey-500); font-weight: 500; }
.dhelp-alt a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .dhelp[open], .dhelp[open]::backdrop { animation: none; } }

/* Testimonial cards: company set as type, and the illustrated portrait used
   while there is no photo. The portrait sits under the card's flat scrim,
   large and anchored to the top-end corner, so the quote keeps its contrast. */
.tm-co {
  flex-shrink: 0; font-family: var(--ff-display); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: -.01em; line-height: 1.2;
  max-width: 48%; text-align: end; color: rgba(255,255,255,.92);
}
.tm-card--brand .tm-co { max-width: 80%; text-align: center; color: var(--ink); font-size: var(--fs-md); }
.tm-art {
  position: absolute; z-index: -2; pointer-events: none;
  width: 78%; height: auto; inset-inline-end: -8%; top: 14%;
  opacity: .9;
}

/* Real customer photo cards: the photo fills the card under the same flat
   scrim, framed on the people (upper middle). The caption is a plain line,
   not a quote, until the customer approves one. */
.tm-photo {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
/* No tint over the photo itself: the sign in each shot already names the
   business, so the text sits in one solid band along the bottom instead,
   clear of the faces and the signage. */
.tm-card--real { padding: 0; gap: 0; justify-content: flex-end; }
.tm-card--real::before { content: none; }
.tm-card--real .tm-top, .tm-card--real .tm-caption {
  background: rgba(10, 16, 22, .72);
  padding-inline: clamp(18px, 2vw, 26px);
}
.tm-card--real .tm-top { padding-top: clamp(14px, 1.6vw, 18px); }
.tm-card--real .tm-caption {
  padding-top: 8px; padding-bottom: clamp(14px, 1.6vw, 18px);
  font-size: var(--fs-sm); font-weight: 500; color: rgba(255,255,255,.78);
}

/* The customer story with a photograph in place of the clip: the image keeps
   its own 3:2 frame (both people stay in shot) instead of the clip's portrait
   crop, and the block centres the statement against it. */
.cstory .vcell--photo { align-self: center; }
.vphoto { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 900px) { .cstory .vcell--photo { max-height: none; } }

/* ---------- Button corners ----------
   One radius for every clickable button. Tags, status pills, chips and the
   round icon-only controls keep their own shapes. The arrow tile inside the
   larger CTAs follows at a slightly smaller radius so it nests. */
.btn, .lang-toggle, .ctafin-go, .ph-go, .cstory-go, .store-badge, .sso-btn { border-radius: var(--radius-btn); }
.ctafin-go-ico, .ph-go-ico, .cstory-go-ico { border-radius: 6px; }

/* =====================================================================
   ARABIC TYPOGRAPHY
   Two script-level rules for Arabic mode, written once instead of in every
   component.
   1. No letter-spacing. Arabic is a joined script: tracking pulls the
      connections between letters apart and negative tracking crushes them.
      The Latin tracking used across the site (tight headings, spaced
      uppercase labels) therefore does not apply. !important because it has
      to win over every component's own value; it is a property of the
      script, not of any one component.
   2. Taller line height on headings and display text. Arabic letters
      reach further above and below the line than Latin, so the 1.0-1.15
      used for English headings crowds the dots and marks on two-line Arabic.
   ===================================================================== */
[dir="rtl"] body, [dir="rtl"] body * { letter-spacing: 0 !important; }
[dir="rtl"] body :is(h1, h2, h3, h4, h5, h6, .display, .o-say, .tm-quote, .pc-big, .ph-val, .pricehero h1, .cstory h2, .ctafin h2, .ctaband h2, .mcaps-title, .pagehead h1, .mhero h1, .chero h1) { line-height: 1.35; }
[dir="rtl"] body :is(.display) { line-height: 1.3; }

/* Arabic line breaks: the pricing statement keeps «كل شيء» together, and the
   customer story, which runs longer in Arabic, steps down a size so it does
   not stand five lines tall beside the photo. */
[dir="rtl"] .pricehero h1 { max-width: 14ch; }
[dir="rtl"] .cstory h2 { font-size: clamp(1.4rem, 2.3vw, 2rem); max-width: 26ch; }

/* Footer social links: the same outline circle, weight and hover as the
   "Ask AI" chips beside them, with solid brand marks (LinkedIn, X,
   Instagram) instead of the old outline glyphs, so the rail reads as one set. */
.footer-bar .socials a {
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.76);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.footer-bar .socials a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; transform: translateY(-2px); }
.footer-bar .socials .ico { width: 17px; height: 17px; }

/* Shop logo on a real customer's photo: a small white badge in the top
   corner, clear of the faces and of the name band along the bottom. The
   logo keeps its own colours. */
.tm-shop {
  position: absolute; z-index: 2; top: 14px; inset-inline-end: 14px;
  display: grid; place-items: center;
  height: 40px; min-width: 56px; max-width: 46%; padding: 6px 12px;
  background: #fff; border-radius: 10px;
  box-shadow: 0 6px 18px -10px rgba(10, 16, 22, .45);
}
.tm-shop img { display: block; max-height: 26px; max-width: 100%; width: auto; height: auto; object-fit: contain; }

/* Each shop's badge sits on its own brand ground: Mismis on its cream, and
   Gwaisha's pale logo on the green of its storefront, the way it reads on the
   sign (on white it would all but disappear). */
.tm-shop { height: 48px; padding: 6px 12px; }
.tm-shop img { max-height: 34px; }
.tm-shop--mismis { background: #F2EBE1; padding: 4px 10px; }
.tm-shop--mismis img { max-height: 38px; }
.tm-shop--gwaisha { background: #23463B; }
.tm-shop--al-hamra { padding: 4px 10px; }
.tm-shop--al-hamra img { max-height: 40px; }
.tm-shop--lcg { background: #2E302C; }
.tm-shop--desert-blooms { padding: 4px; min-width: 0; }
.tm-shop--desert-blooms img { max-height: 40px; }
.tm-shop--challenge { padding: 4px; min-width: 0; }
.tm-shop--challenge img { max-height: 40px; }
.tm-shop--fiorito { background: #C7BCA8; padding: 6px 14px; }
.tm-shop--fiorito img { max-height: 30px; }
.tm-shop--yuehlia { padding: 4px 12px; }
.tm-shop--yuehlia img { max-height: 40px; }
.tm-shop--ghk { padding: 5px 12px; }
.tm-shop--ghk img { max-height: 38px; }

/* "Soon" marker on a tab, in the same quiet style as the menu's badge */
.tab-soon {
  margin-inline-start: 6px; padding: 2px 7px; border-radius: 99px; vertical-align: 1px;
  font-size: .62rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue-800); background: var(--blue-050); border: 1px solid var(--blue-100);
}

/* Eight products don't fit one line beside each other on desktop, and a rail
   that hides some of them in a scroll is easy to miss. Above phone width the
   tabs wrap into centred rows instead; each tab carries its own hairline, so
   the active underline still sits on a line. Phones keep the swipe rail. */
@media (min-width: 561px) {
  .tabs-nav {
    flex-wrap: wrap; justify-content: center; width: 100%; overflow: visible;
    gap: 16px clamp(20px, 2.4vw, 34px); border-bottom: 0;
  }
  .tab-btn { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
}

/* ---------- Scroll indicator ----------
   Under a sideways-scrolling row (the tab rail on phones, the testimonial
   rail): a short grey track with a brand-blue thumb. Flat, no fades. */
.scroll-ind {
  position: relative; width: min(120px, 36%); height: 3px; margin: 14px auto 0;
  border-radius: 99px; background: var(--line-2); overflow: hidden;
}
.scroll-ind[hidden] { display: none; }
.scroll-ind-thumb {
  position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 30%;
  border-radius: inherit; background: var(--blue);
  transition: transform .12s linear;
  will-change: transform;
}
.tm-rail + .scroll-ind { margin-top: clamp(18px, 2.4vw, 26px); }
@media (prefers-reduced-motion: reduce) { .scroll-ind-thumb { transition: none; } }

/* Footer "Ask AI" and social icons: rounded squares (10px), not circles */
.ask-ai-chip, .ai-chip, .footer-bar .socials a { border-radius: 10px; }

/* Customers: testimonial photo cards as a static grid (no rail). Flex rather
   than grid so a short last row sits centred. */
.tm-wall {
  --tm-gap: clamp(14px, 1.8vw, 24px);
  --tm-cols: 3;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tm-gap);
}
.tm-wall > .tm-card { flex: 0 0 calc((100% - (var(--tm-cols) - 1) * var(--tm-gap)) / var(--tm-cols)); }
@media (max-width: 1000px) { .tm-wall { --tm-cols: 2; } }
@media (max-width: 640px)  { .tm-wall { --tm-cols: 1; } }

/* Customer logos: one treatment for every card. White on transparent, sitting
   at the end of the name row in the dark band, same height for all. */
.tm-card--real .tm-top { align-items: center; }
.tm-brand {
  flex-shrink: 0; display: block;
  height: var(--lh, 30px); width: auto; max-width: 42%; object-fit: contain;  /* --lh is set per logo so wide and square marks carry similar weight */
  object-position: right center; opacity: .92;
}
[dir="rtl"] .tm-brand { object-position: left center; }

/* Legal pages (privacy, terms): contents in a sticky side column that tracks
   the section being read; the text keeps its reading width. */
.legal-layout {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px); align-items: start;
}
.legal-side { position: sticky; top: calc(var(--header-offset, 75px) + 28px); max-height: calc(100vh - var(--header-offset, 75px) - 56px); overflow-y: auto; }
.legal-toc-t {
  margin: 0 0 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grey-500);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--line); counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; gap: 10px; padding: 7px 0 7px 16px; margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; color: var(--muted);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
[dir="rtl"] .legal-toc a { padding: 7px 16px 7px 0; }
.legal-toc a::before { content: counter(toc) "."; min-width: 1.6em; color: var(--grey-500); font-variant-numeric: tabular-nums; }
.legal-toc a:hover { color: var(--ink); }
.legal-toc a[aria-current="true"] { color: var(--blue-700); border-color: var(--blue); font-weight: 600; }
.legal-toc a[aria-current="true"]::before { color: var(--blue-700); }
.legal h2 { scroll-margin-top: calc(var(--header-offset, 75px) + 24px); }
.legal ul { list-style: disc; margin: 0 0 16px; padding-inline-start: 20px; color: var(--muted); line-height: 1.7; font-weight: 500; }
.legal li { margin-bottom: 4px; }
.legal li::marker { color: var(--blue); }
.legal a { color: var(--blue-700); font-weight: 600; }
.legal .legal-n { color: var(--ink); font-weight: 600; }
.legal .legal-lead { color: var(--ink-2); font-size: var(--fs-sm); letter-spacing: .01em; }
.legal-contact {
  display: grid; gap: 4px; margin: 6px 0 0; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 14px;
  font-style: normal; color: var(--muted); font-weight: 500; line-height: 1.6;
}
.legal-contact strong { color: var(--ink); font-weight: 600; }
/* Below tablet width the contents sit above the text instead of beside it */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal-side { position: static; max-height: none; overflow: visible; padding: 20px; border: 1px solid var(--line); border-radius: 14px; }
}

/* A phone number never breaks across lines */
a[href^="tel:"] { white-space: nowrap; }

/* Links inside running text are underlined, not told apart by colour alone */
.lead a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Illustration buttons on brand blue use ink, like the real primary buttons
   (white on #5FA8D3 is only 2.6:1) */
.dash .dash-btn .tx-w, .pshot .ps-btn .tx-w, .dash-btn .ico, .ps-btn .ico { color: var(--ink); }