/* What every landing page shares: motion, the base, the nav, the footer.
   Every colour, size, radius and shadow is a design-system token
   (web/ds/tokens.css); motion is the system's signature ease on the three
   durations below and nothing else. Transform and opacity only, so it stays
   smooth; everything stands still under prefers-reduced-motion. */
:root{
  --ease-signature:cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:150ms;
  --duration-base:300ms;
  --duration-slow:500ms;
  --gutter:16px;
  --wide:1200px;
  --nav-h:64px;
}
@media (min-width:720px){:root{--gutter:32px}}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:0ms;--duration-base:0ms;--duration-slow:0ms}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--space-6))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--ink);font:var(--type-body);overflow-x:hidden}
[dir="rtl"] body{font:var(--type-ar-body)}
img,svg{display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:calc(var(--wide) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;inset-inline-start:var(--space-4);top:-100px;z-index:60;background:var(--surface);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);box-shadow:var(--shadow-card)}
.skip:focus{top:var(--space-4)}

/* type: the system's styles, fluid at the top end */
.eyebrow{display:block;color:var(--ink-secondary);margin-bottom:var(--space-4)}
.h2{font:var(--type-display-l);letter-spacing:var(--tracking-display-l);font-size:clamp(34px,5vw,56px);line-height:1.07;text-wrap:balance}
.h2:lang(ar){font-family:var(--font-arabic);font-weight:700;letter-spacing:0;line-height:1.4}
.lede{font:var(--type-body-l);color:var(--ink-secondary);text-wrap:pretty}
.lede:lang(ar),.eyebrow:lang(ar),.title-s:lang(ar){font-family:var(--font-arabic)}
.mh-btn{white-space:nowrap}
.mh-btn:lang(ar){font-family:var(--font-arabic);letter-spacing:0}
.mh-btn:active{transform:scale(.97)}

/* reveal on scroll: rises 12px and fades, staggered */
.js [data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity var(--duration-slow) var(--ease-signature),transform var(--duration-slow) var(--ease-signature);
  transition-delay:calc(var(--i, 0) * 60ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* nav: clear over a hero, a surface pill once you scroll (or always, with .solid set) */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding:var(--space-3) var(--gutter);pointer-events:none}
.navin{pointer-events:auto;max-width:var(--wide);margin:0 auto;height:var(--nav-h);display:flex;align-items:center;gap:var(--space-6);
  padding:0 var(--space-3) 0 var(--space-6);border-radius:var(--radius-pill);color:#fff;
  background:transparent;box-shadow:0 0 0 1px transparent;
  transition:background-color var(--duration-base) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature),color var(--duration-base) var(--ease-signature)}
[dir="rtl"] .navin{padding:0 var(--space-6) 0 var(--space-3)}
.nav.solid .navin{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-card)}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;margin-inline-end:auto;flex:none}
.brand img{width:32px;height:32px}
.brand .en{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-0.02em}
.brand .sep{width:1px;height:18px;background:currentColor;opacity:.35}
.brand .ar{font-family:var(--font-arabic);font-weight:600;font-size:20px}
.mk-dark{display:none}
/* in Arabic the lockup mirrors: the stone at the right edge, then المِحَك, then AlMihak */
[dir="rtl"] .brand .ar{order:1}
[dir="rtl"] .brand .sep{order:2}
[dir="rtl"] .brand .en{order:3}
.navlinks{display:flex;gap:var(--space-1)}
/* the pages menu sits in the true centre of the header: equal side columns,
   whatever the width of the logo and the tools */
@media (min-width:960px){
  .navin,[dir="rtl"] .navin{display:grid;grid-template-columns:1fr auto 1fr;padding-inline:var(--space-6)}
  .navtools{justify-self:end;margin-inline-end:calc(var(--space-3) - var(--space-6))}
}
.navlinks a{position:relative;text-decoration:none;font:var(--type-caption);font-size:14px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-pill);
  transition:background-color var(--duration-fast) var(--ease-signature)}
.navlinks a:lang(ar){font-family:var(--font-arabic)}
.navlinks a:hover{background:var(--glass)}
.nav.solid .navlinks a:hover{background:var(--surface-muted)}
.navtools{display:flex;align-items:center;gap:var(--space-2)}
.tool{display:inline-flex;align-items:center;gap:var(--space-2);height:34px;padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);background:transparent;cursor:pointer;
  font:var(--type-caption);transition:background-color var(--duration-fast) var(--ease-signature),transform var(--duration-fast) var(--ease-signature)}
.tool:hover{background:var(--glass)}
.nav.solid .tool:hover{background:var(--surface-muted)}
.tool:active{transform:scale(.97)}
.tool svg{width:16px;height:16px}
/* the caption style is Geist; Arabic labels (داكن، فاتح) are IBM Plex Sans Arabic */
.tool:lang(ar){font-family:var(--font-arabic)}
.tool .lng{font-family:var(--font-arabic);font-weight:600;font-size:14px}
[lang="ar"] .tool .lng{font-family:var(--font-text)}
/* the short label stands in for the full one on a phone; screen readers keep the full one */
.tool .lngs{display:none}
@media (max-width:479px){.tool .lng:not(.lngs){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.tool .lngs{display:inline}}
.nav .mh-btn{transition:background-color var(--duration-base) var(--ease-signature),color var(--duration-base) var(--ease-signature),transform var(--duration-fast) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature)}
.nav.solid .mh-btn--on-blue{background:var(--ink);color:var(--on-ink)}
@media (max-width:959px){.navlinks{display:none}}
@media (max-width:639px){.tool .tlabel{display:none}.navin{gap:var(--space-2)}}
/* on a phone only one name fits: the page's own language */
@media (max-width:479px){.brand .sep,.brand .ar{display:none}[dir="rtl"] .brand .ar{display:inline}[dir="rtl"] .brand .en{display:none}.navin{padding-inline-start:var(--space-4);gap:var(--space-1)}
  .navtools{gap:0}.tool{padding:0 var(--space-2)}.nav .mh-btn--s{padding:0 var(--space-3)}}

/* footer: the name, very large, very quiet */
.foot{margin-top:var(--space-32);padding:var(--space-16) 0 var(--space-8);border-top:1px solid var(--hairline);position:relative;overflow:hidden}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-12)}
@media (max-width:719px){.footgrid{grid-template-columns:1fr 1fr}.footgrid>:first-child{grid-column:1/-1}}
.foot .brand{color:var(--ink);margin-bottom:var(--space-4)}
.foot p,.foot li{color:var(--ink-secondary)}
.foot h4{margin:0 0 var(--space-4);font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--ink-tertiary)}
.foot h4:lang(ar){font-family:var(--font-arabic);letter-spacing:0;font-size:13px}
.foot li+li{margin-top:var(--space-2)}
.foot li a{text-decoration:none;transition:color var(--duration-fast) var(--ease-signature)}
.foot li a:hover,.foot li a[aria-current="page"]{color:var(--ink)}
.foot p:lang(ar),.foot li:lang(ar){font-family:var(--font-arabic)}
.giant{margin-top:var(--space-16);font-family:var(--font-arabic);font-weight:700;font-size:clamp(120px,26vw,360px);line-height:1;text-align:center;color:var(--surface-muted);user-select:none;pointer-events:none;
  letter-spacing:0;white-space:nowrap}
.rights{margin-top:var(--space-6);font:var(--type-caption);color:var(--ink-tertiary)}

/* language change: the page fades out and back in, it does not jump */
main,.navin,.foot{transition:opacity var(--duration-fast) var(--ease-signature)}
.swapping main,.swapping .navin,.swapping .foot{opacity:0}

/* dark: the reversed mark, as the system swaps it */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mk-light{display:none}:root:not([data-theme="light"]) .mk-dark{display:block}}
:root[data-theme="dark"] .mk-light{display:none}
:root[data-theme="dark"] .mk-dark{display:block}
/* over the hero the nav's mark is always the dark stone on blue */
.nav:not(.solid) .mk-light{display:block!important}
.nav:not(.solid) .mk-dark{display:none!important}

/* ---------- hover: buttons answer the pointer ----------
   Mouse only, so a tap never leaves a button stuck in its hover state. Each
   is small and quick: a lift, a sheen that sweeps once, an icon that turns.
   The sheen has no transition on the way back, so it resets unseen and
   sweeps again on the next hover. Pressing always wins over hovering. */
.mh-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--duration-fast) var(--ease-signature),box-shadow var(--duration-base) var(--ease-signature),background-color var(--duration-base) var(--ease-signature),color var(--duration-base) var(--ease-signature)}
.mh-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-110%);
  background:linear-gradient(105deg,transparent 30%,var(--sheen,rgba(255,255,255,.28)) 50%,transparent 70%)}
.mh-btn--on-blue,.mh-btn--secondary{--sheen:rgba(37,117,211,.16)}
.nav.solid .mh-btn--on-blue{--sheen:rgba(255,255,255,.28)}
.mh-btn .go{width:14px;height:14px;flex:none;transition:transform var(--duration-base) var(--ease-signature)}
.mh-btn:active{transform:scale(.97)}

.navlinks a::after{content:"";position:absolute;inset-inline:var(--space-3);bottom:5px;height:1.5px;border-radius:var(--radius-pill);background:currentColor;
  transform:scaleX(0);transition:transform var(--duration-base) var(--ease-signature)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1)}
.tool svg{transition:transform var(--duration-base) var(--ease-signature)}
.foot li a{background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;transition:color var(--duration-fast) var(--ease-signature),background-size var(--duration-base) var(--ease-signature)}
[dir="rtl"] .foot li a{background-position:100% 100%}

@media (hover:hover) and (pointer:fine){
  .mh-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(10,40,90,.18)}
  .mh-btn:hover::after{transform:translateX(110%);transition:transform 700ms var(--ease-signature)}
  .mh-btn:hover .go{transform:translateY(2px)}
  .mh-btn:active{transform:scale(.97);box-shadow:none}
  .navlinks a:hover::after{transform:scaleX(1)}
  .tool:hover svg{transform:rotate(-18deg)}
  .foot li a:hover{background-size:100% 1px}
}