/* The site's fonts, served from the site itself (no request to Google): Archivo for Latin text and Alexandria
   for Arabic, both under the SIL Open Font License (tools/site-static/assets/fonts/OFL-*.txt).
   Made by a one-off download of Google Fonts; only the ranges the pages use. */
/* Alexandria normal, arabic */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/alexandria-normal-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
/* Alexandria normal, latin-ext */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/alexandria-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Alexandria normal, latin */
@font-face{font-family:'Alexandria';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/alexandria-normal-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}
/* Archivo italic, latin-ext */
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Archivo italic, latin */
@font-face{font-family:'Archivo';font-style:italic;font-weight:400 900;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-italic-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}
/* Archivo normal, latin-ext */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-normal-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
/* Archivo normal, latin */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-stretch:100% 125%;font-display:swap;src:url(/assets/fonts/archivo-normal-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}

/*
 * Fursan site layer, shared by every page (added at export, see tools/export-site.mjs):
 * the header with its centred menu and mega menus, the phone menu, the back-to-top button, cookie consent, the hero
 * entrance, section reveals and the animated Lucide icons. Uses the brand tokens each page defines, with the same
 * values as fallbacks.
 */

/* ---------- Header: the main menu sits in the middle of the bar ---------- */
@media (min-width:1101px){
  /* the menu sits centred in the space between the logo and the buttons */
  .site-header .header-row{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:16px}
  .site-header .header-row>.brand{justify-self:start}
  .site-header .header-row>.nav{justify-self:center}
  .site-header .header-row>.header-actions{justify-self:end;margin-inline-start:0}
}
.site-header .nav-link{position:relative}
.site-header .nav-link::after{content:"";position:absolute;inset-inline:12px;bottom:-5px;height:3px;border-radius:2px;background:var(--lime,#BAEF52);opacity:0;transition:opacity .15s}
.site-header .nav-link.cur::after,.site-header .has-menu.open>.nav-link::after,.site-header .has-menu:hover>.nav-link::after{opacity:1}
.site-header .nav-link.cur{box-shadow:none;border-radius:8px}
.site-header .nav-link>svg{transition:rotate .2s ease}
.site-header .has-menu.open>.nav-link>svg,.site-header .has-menu:hover>.nav-link>svg{rotate:180deg}
.fx-talk{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid rgba(245,247,244,.8);border-radius:10px;
  color:var(--soft,#F5F7F4);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.fx-talk:hover{background:var(--graphite-2,#282E2A);border-color:var(--soft,#F5F7F4)}
@media (max-width:1279px){.fx-talk{display:none}}
/* below 1500px the bar is tight (six menus, search, the light/dark switch, the language switch and two buttons):
   narrower padding, the underline kept to the label */
@media (min-width:1101px) and (max-width:1499px){
  .site-header .nav-link{padding-inline:8px}
  .site-header .nav-link::after{inset-inline:8px}
  .site-header .header-actions{gap:8px}
  .site-header .lang-btn{padding-inline:8px}
  .fx-talk{padding:0 13px}
}
@media (min-width:1101px) and (max-width:1279px){
  .site-header .nav-link{padding-inline:6px}
  .site-header .nav-link::after{inset-inline:6px}
}

/* ---------- Mega menus: a light panel under the header, one per section ---------- */
.site-header .has-menu{position:static}
.site-header .menu.fx-mega{position:absolute;inset:auto;top:calc(100% + 8px);left:50%;translate:-50% 0;width:min(1200px,calc(100vw - 48px));min-width:0;
  max-height:calc(100vh - 96px);overflow:auto;padding:22px;gap:20px;grid-template-columns:minmax(0,1fr) 290px;align-items:stretch;
  background:var(--soft,#F5F7F4);color:var(--graphite,#202522);border:1px solid rgba(32,37,34,.08);border-radius:18px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.6);font-size:14px;line-height:1.45;animation:fx-mega-in .22s ease both}
html[lang="ar"] .site-header .menu.fx-mega{line-height:1.6}
.site-header .menu.fx-mega::before{top:-34px;height:34px}
@keyframes fx-mega-in{from{opacity:0;translate:-50% -6px}}
.site-header .nav:hover .has-menu.open:not(:hover)>.menu{display:none}
.site-header .menu.fx-mega-features{grid-template-columns:minmax(0,1fr);padding-bottom:0;overflow:hidden}
.site-header .menu.fx-mega-solutions{width:min(1000px,calc(100vw - 48px));grid-template-columns:minmax(0,1fr) 260px}
.site-header .menu.fx-mega-company{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
/* dim the page while a menu is open */
.site-header::after{content:"";position:fixed;inset:64px 0 0;z-index:-1;background:rgba(14,17,15,.45);opacity:0;pointer-events:none;transition:opacity .2s}
.site-header:has(.has-menu.open,.has-menu:hover)::after{opacity:1}
@media (max-width:1100px){.site-header::after{display:none}}

.fx-mega .fx-main{min-width:0;display:flex;flex-direction:column}
.fx-mega .fx-mh{margin:0 0 16px;font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--graphite,#202522)}
html[lang="ar"] .fx-mega .fx-mh{letter-spacing:0;line-height:1.35}
.fx-mega .fx-grid{display:grid;gap:10px}
.fx-mega .fx-g-prod,.fx-mega .fx-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-mega .fx-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fx-mega .fx-g1{grid-template-columns:minmax(0,1fr)}
.fx-mega .fx-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--lime,#BAEF52);color:var(--graphite,#202522)}
.fx-mega .fx-ic svg.i{width:20px;height:20px}
/* (the pages style their old dark menus' links; reset that inside the panels) */
.site-header .fx-mega a{display:block;padding:0;border-radius:0;font-size:inherit;color:var(--graphite,#202522);background:none}
.site-header .fx-mega a:hover{background:none}
.fx-mega b{display:block;font-weight:800;color:var(--graphite,#202522)}
.site-header .fx-mega small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-2,#56635C)}
.fx-mega a:focus-visible{outline:2px solid var(--graphite,#202522);outline-offset:2px}

/* a row: icon, name and line, chevron (Features, Solutions, Company) */
.site-header .fx-mega a.fx-row{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:11px 12px;
  border:1px solid rgba(32,37,34,.1);border-radius:12px;background:var(--white,#fff);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.site-header .fx-mega a.fx-row:hover,.site-header .fx-mega a.fx-row[aria-current]{background:var(--white,#fff);border-color:rgba(32,37,34,.3);box-shadow:0 10px 24px -14px rgba(32,37,34,.35)}
.fx-mega .fx-row b{font-size:15px;line-height:1.3}
.fx-mega .fx-chev{width:16px;height:16px;color:var(--ink-2,#56635C)}
.site-header .fx-mega-company a.fx-row{grid-template-columns:48px minmax(0,1fr) 16px;gap:14px;padding:16px 18px}
.site-header .fx-mega-company .fx-row .fx-ic{width:48px;height:48px;border-radius:12px}
.site-header .fx-mega-company .fx-row .fx-ic svg.i{width:24px;height:24px}
.site-header .fx-mega-company .fx-row b{font-size:17px}
.site-header .fx-mega-company .fx-row small{font-size:14px}

/* a product card: icon and status, name, where it runs, what it does */
.fx-mega .fx-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px;border:1px solid rgba(32,37,34,.1);
  border-radius:12px;background:var(--white,#fff);transition:border-color .15s,box-shadow .15s}
.fx-mega .fx-card:hover,.fx-mega .fx-card:has([aria-current]){border-color:rgba(32,37,34,.3);box-shadow:0 10px 24px -14px rgba(32,37,34,.35)}
.fx-mega .fx-card .fx-ic{margin-bottom:10px}
.site-header .fx-mega a.fx-card-a{display:block;padding:0;text-decoration:none;background:none}
.fx-mega .fx-card-a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.fx-mega .fx-card b{font-size:15.5px;line-height:1.25}
.fx-mega .fx-plat{font-size:12.5px;font-weight:600;color:var(--ink-2,#56635C)}
.fx-mega .fx-card small{margin-top:4px}
.fx-mega .fx-badge{position:absolute;top:12px;inset-inline-end:12px;padding:2px 8px;border-radius:6px;background:rgba(186,239,82,.45);font-size:12px;font-weight:700;color:var(--graphite,#202522)}
/* "Soon" and "Coming soon": the same outlined pill as on the pages */
.fx-mega .fx-soon .fx-badge,.fx-mega .fx-tile .fx-badge{background:none;box-shadow:inset 0 0 0 1px currentColor;color:var(--fx-text,#202522)}
.site-header .fx-mega a.fx-notify{position:relative;z-index:1;align-self:flex-end;margin-top:6px;padding:0;font-size:13.5px;font-weight:700;text-decoration:underline;text-underline-offset:3px;background:none}

/* a resource tile */
.site-header .fx-mega a.fx-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:16px;border:1px solid rgba(32,37,34,.1);
  border-radius:12px;background:var(--white,#fff);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.site-header .fx-mega a.fx-tile:hover,.site-header .fx-mega a.fx-tile[aria-current]{background:var(--white,#fff);border-color:rgba(32,37,34,.3);box-shadow:0 10px 24px -14px rgba(32,37,34,.35)}
.fx-mega .fx-tile .fx-ic{width:44px;height:44px;margin-bottom:10px}
.fx-mega .fx-tile b{font-size:17px}
.fx-mega .fx-tile small{font-size:13.5px}

/* "See the platform overview", "Browse Resources" */
.site-header .fx-mega a.fx-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:14px;padding:12px 0 0;
  border-top:1px solid rgba(32,37,34,.12);border-radius:0;font-size:14.5px;font-weight:800;color:var(--ink-2,#56635C);text-decoration:none;background:none}
.site-header .fx-mega-products a.fx-more{align-self:stretch;margin-top:auto}
.fx-mega-products .fx-g-prod{margin-bottom:18px}
.site-header .fx-mega a.fx-more:hover{background:none;color:var(--graphite,#202522)}
.fx-mega .fx-arr{width:16px;height:16px}

/* the dark side card */
.fx-mega .fx-promo{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:22px;
  border-radius:14px;background:var(--graphite,#202522);color:var(--soft,#F5F7F4)}
.fx-mega .fx-ph{position:relative;margin:0;font-size:1.5rem;font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--soft,#F5F7F4)}
html[lang="ar"] .fx-mega .fx-ph{letter-spacing:0;line-height:1.35}
.fx-mega .fx-ph em{font-style:normal;color:var(--lime,#BAEF52)}
.fx-mega .fx-pp{position:relative;margin:-4px 0 0;font-size:14.5px;color:var(--mist,#C5CFC8)}
.fx-mega-company .fx-promo{justify-content:center}
.site-header .fx-mega a.fx-b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:10px;
  font-size:14.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s}
.site-header .fx-mega a.fx-b-lime{background:var(--lime,#BAEF52);color:var(--graphite,#202522)}
.site-header .fx-mega a.fx-b-lime:hover{background:var(--lime-hover,#CDF77E)}
.site-header .fx-mega a.fx-b-line{border:1.5px solid var(--soft,#F5F7F4);color:var(--soft,#F5F7F4);background:none}
.site-header .fx-mega a.fx-b-line:hover{background:var(--graphite-2,#282E2A)}
.fx-mega .fx-b-wide{width:100%}
.fx-mega .fx-stack{display:grid;gap:10px}
.fx-mega .fx-pair{position:relative;display:flex;flex-wrap:wrap;gap:10px}
.fx-mega .fx-promo .fx-arr{color:currentColor}
/* the brand mark, quiet, behind the card's text */
.fx-mega .fx-mark{position:absolute;inset-inline-end:-24px;top:22px;display:grid;gap:9px;width:150px;transform:skewX(-20deg);opacity:.5;pointer-events:none}
html[dir="rtl"] .fx-mega .fx-mark{transform:skewX(20deg)}
.fx-mega .fx-mark i{display:block;height:26px;border-radius:18px 8px;background:#3E4A44}
.fx-mega .fx-mark i:nth-child(2){width:78%;margin-inline-start:-6%}
.fx-mega .fx-mark i:nth-child(3){width:56%;margin-inline-start:-12%}
.fx-mega-solutions .fx-mark{position:relative;inset:auto;margin:6px auto 4px;width:70%}
/* a laptop and phone, drawn small */
.fx-mega .fx-devices{position:relative;display:block;height:160px;margin:0;zoom:.8}
.fx-mega .fx-lap{position:absolute;inset-inline-start:4px;top:6px;width:76%;height:124px;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:7px;
  padding:12px 10px 10px calc(30% + 8px);border:6px solid #3b433e;border-bottom-width:8px;border-radius:10px 10px 4px 4px;
  background:linear-gradient(90deg,#E9EDE8 0 30%,#F8F9F7 30%)}
html[dir="rtl"] .fx-mega .fx-lap{padding:12px calc(30% + 8px) 10px 10px;background:linear-gradient(270deg,#E9EDE8 0 30%,#F8F9F7 30%)}
.fx-mega .fx-lap::after{content:"";position:absolute;inset-inline:-22px;bottom:-16px;height:8px;border-radius:0 0 10px 10px;background:#4a534d}
.fx-mega .fx-lap i{display:block;height:44px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(32,37,34,.08);
  background:linear-gradient(var(--lime,#BAEF52),var(--lime,#BAEF52)) 8px 8px/14px 14px no-repeat,linear-gradient(#D7DDD8,#D7DDD8) 8px 30px/60% 4px no-repeat,#fff}
html[dir="rtl"] .fx-mega .fx-lap i{background-position:calc(100% - 8px) 8px,calc(100% - 8px) 30px,0 0}
.fx-mega .fx-ph-dev{position:absolute;inset-inline-end:4px;bottom:0;width:27%;height:150px;display:grid;gap:7px;align-content:start;
  padding:24px 7px 8px;border:5px solid #3b433e;border-radius:18px;background:#F8F9F7}
.fx-mega .fx-ph-dev::before{content:"";position:absolute;top:6px;left:50%;translate:-50% 0;width:34%;height:7px;border-radius:4px;background:#3b433e}
.fx-mega .fx-ph-dev i{display:block;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(32,37,34,.08);
  background:linear-gradient(var(--lime,#BAEF52),var(--lime,#BAEF52)) 6px 50%/12px 12px no-repeat,linear-gradient(#D7DDD8,#D7DDD8) 24px 50%/40% 4px no-repeat,#fff}
html[dir="rtl"] .fx-mega .fx-ph-dev i{background-position:calc(100% - 6px) 50%,calc(100% - 24px) 50%,0 0}

/* the dark strip under Features */
.fx-mega .fx-strip{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:4px -22px 0;padding:14px 24px;background:var(--graphite,#202522)}
.site-header .fx-mega .fx-strip a{display:inline-flex;align-items:center;gap:8px;padding:0;font-size:15.5px;font-weight:700;color:var(--soft,#F5F7F4);text-decoration:none;background:none}
.site-header .fx-mega .fx-strip a:hover{background:none;text-decoration:underline;text-underline-offset:4px}
.site-header .fx-mega .fx-strip a.fx-strip-demo{padding-inline-start:28px;border-inline-start:1px solid rgba(197,207,200,.3);color:var(--lime,#BAEF52)}

@media (max-width:1240px){
  .site-header .menu.fx-mega{padding:20px;grid-template-columns:minmax(0,1fr) 250px}
  .fx-mega .fx-g-prod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-mega .fx-strip{margin-inline:-20px}
}

/* ---------- Phone menu: each section folds open ---------- */
.m-panel .fx-mp{display:grid}
.m-panel .fx-mg summary,.m-panel a.fx-ml{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-dark,rgba(197,207,200,.16));
  font-size:17px;font-weight:600;list-style:none;cursor:pointer;color:var(--soft,#F5F7F4);text-decoration:none}
.m-panel .fx-mg summary::-webkit-details-marker{display:none}
.m-panel .fx-dn{width:12px;height:12px;opacity:.8;transition:rotate .2s}
.m-panel .fx-mg[open] .fx-dn{rotate:180deg}
.m-panel .fx-mg ul{padding:6px 0 12px;border-bottom:1px solid var(--line-dark,rgba(197,207,200,.16))}
.m-panel .fx-mg a{display:flex;align-items:center;min-height:44px;padding:0;border:0;font-size:15.5px;font-weight:500;color:var(--mist,#C5CFC8)}
.m-panel .fx-mg a[aria-current]{color:var(--lime,#BAEF52)}
.m-panel .fx-mcta{display:grid;gap:10px;margin-top:24px}
.m-panel a.fx-b{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;border:1.5px solid transparent;font-size:16px;font-weight:700}
.m-panel a.fx-b-lime{background:var(--lime,#BAEF52);color:var(--graphite,#202522)}
.m-panel a.fx-b-line{border-color:var(--soft,#F5F7F4);color:var(--soft,#F5F7F4)}
.m-panel .fx-b .fx-arr{width:18px;height:18px}
body:has(#menuBtn[aria-expanded="true"]) .sticky-cta{display:none}

/* ---------- Back to top ---------- */
.fx-top{position:fixed;inset-inline-end:20px;bottom:calc(20px + var(--fx-lift, 0px));z-index:58;width:50px;height:50px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:var(--graphite,#202522);color:var(--lime,#BAEF52);cursor:pointer;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.55);opacity:0;visibility:hidden;translate:0 14px;
  transition:opacity .25s ease,translate .25s ease,visibility 0s linear .25s,background-color .15s}
.fx-top.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .25s ease,translate .25s ease,background-color .15s}
.fx-top:hover{background:var(--graphite-2,#282E2A)}
.fx-top:focus-visible{outline:2px solid var(--lime,#BAEF52);outline-offset:3px}
.fx-top svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg;pointer-events:none}
.fx-top .trk{fill:none;stroke:rgba(197,207,200,.22);stroke-width:2}
.fx-top .bar{fill:none;stroke:var(--lime,#BAEF52);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--fx-p,1)}
.fx-top .arr{position:relative;width:20px;height:20px;rotate:0deg;transition:translate .2s ease}
.fx-top:hover .arr{translate:0 -2px}
body:has(#menuBtn[aria-expanded="true"]) .fx-top,body.fx-cb-open .fx-top{opacity:0;visibility:hidden}
@media (max-width:600px){.fx-top{inset-inline-end:14px;bottom:calc(14px + var(--fx-lift, 0px));width:46px;height:46px}}

/* ---------- Cookie consent: the first-visit notice ---------- */
.fx-cb{position:fixed;inset-inline:20px;bottom:20px;z-index:70;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 28px;
  max-width:1180px;margin-inline:auto;padding:18px 24px;border-radius:16px;background:var(--soft,#F5F7F4);color:var(--graphite,#202522);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.65);font-size:14.5px;line-height:1.5;animation:fx-cb-in .45s cubic-bezier(.2,.7,.2,1) both}
html[lang="ar"] .fx-cb{line-height:1.8}
.fx-cb h2{margin:0 0 4px;font-size:1.25rem;line-height:1.2;font-weight:800;letter-spacing:-.02em;color:var(--graphite,#202522)}
html[lang="ar"] .fx-cb h2{letter-spacing:0;line-height:1.35}
.fx-cb p{margin:0;max-width:62ch;color:#33403A}
.fx-cb a{display:inline-block;margin-top:4px;color:var(--ink-2,#56635C);text-decoration:underline;text-underline-offset:3px}
.fx-cb a:hover{color:var(--graphite,#202522)}
.fx-cb-b{display:flex;flex-wrap:wrap;gap:8px}
body:has(.fx-cd[open]) .fx-cb{visibility:hidden}
@keyframes fx-cb-in{from{opacity:0;translate:0 18px}}
@media (max-width:900px){
  .fx-cb{grid-template-columns:minmax(0,1fr);inset-inline:12px;bottom:12px;padding:16px;font-size:14px}
  .fx-cb-b .fx-btn{flex:1 1 30%}
}
@media (max-width:480px){.fx-cb-b .fx-btn{flex:1 1 100%}.fx-cb{max-height:calc(100dvh - 24px);overflow:auto}}

.fx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:1.5px solid transparent;border-radius:10px;
  font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.fx-btn.fx-dark{background:var(--graphite,#202522);color:var(--soft,#F5F7F4)}
.fx-btn.fx-dark:hover{background:var(--graphite-3,#343B36)}
.fx-btn.fx-line{background:none;border-color:var(--graphite,#202522);color:var(--graphite,#202522)}
.fx-btn.fx-line:hover{background:rgba(32,37,34,.06)}
.fx-btn.fx-lime{background:var(--lime,#BAEF52);color:var(--graphite,#202522)}
.fx-btn.fx-lime:hover{background:var(--lime-hover,#CDF77E)}
.fx-btn:focus-visible,.fx-cd :focus-visible,.fx-cb :focus-visible{outline:2px solid var(--graphite,#202522);outline-offset:3px}

/* ---------- Cookie settings dialog ---------- */
.fx-cd{width:min(540px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:22px;border:0;border-radius:18px;
  background:var(--soft,#F5F7F4);color:var(--graphite,#202522);box-shadow:0 40px 90px -20px rgba(0,0,0,.7);font-size:14.5px;line-height:1.5;overflow:auto}
html[lang="ar"] .fx-cd{line-height:1.75}
.fx-cd[open]{animation:fx-cd-in .3s cubic-bezier(.2,.7,.2,1)}
.fx-cd::backdrop{background:rgba(14,17,15,.6)}
@keyframes fx-cd-in{from{opacity:0;translate:0 14px}}
.fx-cd-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:16px}
.fx-cd-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:var(--lime,#BAEF52);color:var(--graphite,#202522)}
.fx-cd-ic svg{width:26px;height:26px}
.fx-cd h2{margin:0;font-size:1.375rem;font-weight:800;line-height:1.15;letter-spacing:-.02em}
html[lang="ar"] .fx-cd h2{letter-spacing:0;line-height:1.35}
.fx-cd-h p{margin:1px 0 0;font-size:14.5px;color:var(--ink-2,#56635C)}
.fx-cd-x{align-self:start;display:grid;place-items:center;width:40px;height:40px;margin:-8px;border:0;border-radius:10px;background:none;color:var(--graphite,#202522);cursor:pointer}
.fx-cd-x:hover{background:rgba(32,37,34,.08)}
.fx-cd-x svg{width:20px;height:20px}
.fx-cd ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.fx-cd li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(32,37,34,.12);border-radius:12px;background:var(--white,#fff)}
.fx-cat-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#EEF1EC;color:var(--graphite,#202522)}
.fx-cat-ic svg{width:20px;height:20px}
.fx-cat-t b{display:block;font-size:15.5px;font-weight:800}
.fx-cat-t span{display:block;font-size:13.5px;color:#33403A}
.fx-st{padding-inline-start:12px;border-inline-start:1px solid rgba(32,37,34,.15);font-size:13.5px;font-weight:600;color:var(--ink-2,#56635C);white-space:nowrap}
.fx-st-on{color:#4E7A12}
.fx-sw{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:46px;height:26px;margin:0;border-radius:99px;
  background:#C9D0CB;cursor:pointer;transition:background-color .2s}
.fx-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:translate .2s}
.fx-sw:checked{background:#7FB82E}
.fx-sw:checked::after{translate:20px 0}
html[dir="rtl"] .fx-sw:checked::after{translate:-20px 0}
.fx-sw:focus-visible{outline:2px solid var(--graphite,#202522);outline-offset:3px}
.fx-sw-fixed{display:grid;align-items:center;justify-items:start;padding-inline-start:7px;background:#7FB82E;color:#fff;cursor:default}
.fx-sw-fixed svg{width:13px;height:13px}
.fx-sw-fixed::after{inset-inline-start:auto;inset-inline-end:3px}
.fx-cd-n{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 2px 16px;font-size:14px}
.fx-cd-n span{color:rgba(32,37,34,.35)}
.fx-cd-n a{color:var(--ink-2,#56635C);text-decoration:underline;text-underline-offset:3px}
.fx-cd-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fx-cd-f .fx-lime{grid-column:1/-1}
.fx-saved{position:fixed;inset-inline-start:50%;bottom:24px;z-index:71;translate:-50% 0;padding:10px 16px;border-radius:10px;
  background:var(--graphite,#202522);color:var(--soft,#F5F7F4);font-weight:700;font-size:14.5px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  animation:fx-fade .3s ease both}
html[dir="rtl"] .fx-saved{translate:50% 0}
@keyframes fx-fade{from{opacity:0}}
@media (max-width:600px){
  .fx-cd{padding:22px 18px}
  .fx-cd-ic{width:54px;height:54px}
  .fx-cd li{grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px;padding:14px}
  .fx-cd li .fx-st{grid-column:2;grid-row:2;padding:0;border:0}
  .fx-cd li .fx-sw{grid-column:3;grid-row:1/3}
  .fx-cd-f{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Hero entrance: the first section's text rises in order, then its picture settles ---------- */
/* (zero specificity, and off once site.js marks the entrance done, so nothing replays it later) */
:where(html:not(.fx-done) main>:first-child :has(>h1))>*{animation:fx-rise .6s cubic-bezier(.2,.7,.2,1) both}
:where(html:not(.fx-done) main>:first-child :has(>h1))>:nth-child(2){animation-delay:.08s}
:where(html:not(.fx-done) main>:first-child :has(>h1))>:nth-child(3){animation-delay:.16s}
:where(html:not(.fx-done) main>:first-child :has(>h1))>:nth-child(4){animation-delay:.24s}
:where(html:not(.fx-done) main>:first-child :has(>h1))>:nth-child(5){animation-delay:.32s}
:where(html:not(.fx-done) main>:first-child :has(>h1))>:nth-child(n+6){animation-delay:.4s}
:where(html:not(.fx-done) main>:first-child :has(>h1)~*){animation:fx-settle 1s cubic-bezier(.2,.7,.2,1) .3s both}
:where(html:not(.fx-done) main>:first-child :has(>h1) svg.i){animation:fx-draw .9s ease .55s both}
@keyframes fx-rise{from{opacity:0;translate:0 12px}}
@keyframes fx-settle{from{opacity:0;translate:0 10px}}

/* ---------- Section reveals (site.js adds these only to blocks below the first screen) ---------- */
.fx-r{opacity:0;translate:0 12px}
.fx-r.fx-in{opacity:1;translate:none;transition:opacity .45s cubic-bezier(.2,.7,.2,1) var(--fx-d,0s),translate .45s cubic-bezier(.2,.7,.2,1) var(--fx-d,0s)}
.fx-r svg.i.fx-big{stroke-dasharray:1;stroke-dashoffset:1}
.fx-r.fx-in svg.i.fx-big{animation:fx-draw .9s ease calc(var(--fx-d,0s) + .2s) both}
@media print{.fx-r{opacity:1!important;translate:none!important}}

/* ---------- Animated icons: Lucide icons draw themselves in and move when their card or link is pointed at ---------- */
@keyframes fx-draw{0%{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}12%{opacity:1}100%{stroke-dasharray:1;stroke-dashoffset:0;opacity:1}}
@keyframes fx-go{50%{translate:calc(var(--fx-x,1) * 3px) calc(var(--fx-y,0) * 3px)}}
@keyframes fx-ring{20%{rotate:14deg}40%{rotate:-11deg}60%{rotate:7deg}80%{rotate:-4deg}}
@keyframes fx-spin{to{rotate:var(--fx-turn,360deg)}}
@keyframes fx-pop{40%{scale:1.2}70%{scale:.95}}
@keyframes fx-shake{20%{rotate:-9deg}40%{rotate:8deg}60%{rotate:-5deg}80%{rotate:3deg}}
svg.i.fx-hv-draw{animation:fx-draw .7s ease}
svg.i.fx-hv-go{animation:fx-go .5s ease}
svg.i.fx-hv-ring{animation:fx-ring .8s ease;transform-origin:50% 12%}
svg.i.fx-hv-spin{animation:fx-spin .7s cubic-bezier(.4,0,.2,1)}
svg.i.fx-hv-pop{animation:fx-pop .5s ease}
svg.i.fx-hv-shake{animation:fx-shake .5s ease}
html[dir="rtl"] svg.i.flip{--fx-flip:-1}
svg.i{--fx-x:calc(var(--fx-flip,1) * var(--fx-bx,1))}

@media (prefers-reduced-motion:reduce){
  .fx-top,.fx-top .arr,.fx-sw,.fx-sw::after,.site-header .nav-link>svg{transition:none}
  .fx-cb,.fx-cd[open],.fx-saved,.site-header .menu.fx-mega,main>:first-child :has(>h1)>*,main>:first-child :has(>h1)~*,main>:first-child :has(>h1) svg.i{animation:none!important}
  .fx-r{opacity:1;translate:none}
}

/* ---------- Phone "Book a demo" bar (site.js sets fx-off while it would only repeat what's on screen) ---------- */
.sticky-cta{transition:translate .25s ease,opacity .25s ease}
.sticky-cta.fx-off{translate:0 calc(100% + 24px);opacity:0;pointer-events:none}
/* phones: long rows of cards show the first few, with a button for the rest (site.js) */
.fx-more-hidden{display:none!important}
.fx-more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:12px;padding:0 18px;
  border:1.5px solid currentColor;border-radius:10px;background:none;color:inherit;font:inherit;font-size:15px;font-weight:700;cursor:pointer}

/*
 * Fursan design scale: one set of type and spacing sizes for every page (added at export with site.css).
 * The 31 pages were built one chapter at a time and grew their own sizes; this brings headings, text, section
 * spacing, buttons, cards and forms back onto one scale, and tunes it for phones and for Arabic.
 *
 *   type (desktop → phone)   page title 48 → 32, closing headline 40 → 28, section heading 36 → 26,
 *                            sub-heading 28 → 22, card title 20 → 18, big number 48 → 36, intro text 18 → 17, body 16
 *   spacing                  4 8 12 16 24 32 48 64 80; sections 80 → 56
 *   controls                 buttons 44 (header 38), fields 44, tap targets 44 on phones
 * Arabic headings run about 6% smaller than English: Alexandria is a wide face.
 */
:root{
  --fx-h1:clamp(2rem, 1.35rem + 1.8vw, 3rem);
  --fx-h2xl:clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  --fx-h2:clamp(1.625rem, 1.2rem + 1.15vw, 2.25rem);
  --fx-h2s:clamp(1.375rem, 1.1rem + .8vw, 1.75rem);
  --fx-h3:clamp(1.125rem, 1rem + .35vw, 1.25rem);
  --fx-stat:clamp(2.25rem, 1.6rem + 1.6vw, 3rem);
  --fx-lede:clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fx-sec:clamp(56px, 44px + 2.5vw, 80px);
  /* surfaces for the site layer's own light components (menus, dialogs, search, prompts); visual.css redefines
     them for dark mode, so new components should use these rather than fixed colours */
  --fx-surface:#F5F7F4;
  --fx-card:#FFFFFF;
  --fx-text:#202522;
  --fx-muted:#56635C;
  --fx-line:rgba(32,37,34,.12);
}
html[lang="ar"]{
  --fx-h1:clamp(1.875rem, 1.27rem + 1.69vw, 2.8125rem);
  --fx-h2xl:clamp(1.65rem, 1.13rem + 1.5vw, 2.35rem);
  --fx-h2:clamp(1.525rem, 1.13rem + 1.08vw, 2.125rem);
  --fx-h2s:clamp(1.3rem, 1.03rem + .75vw, 1.65rem);
  --fx-h3:clamp(1.0625rem, .95rem + .33vw, 1.1875rem);
  --fx-stat:clamp(2.125rem, 1.5rem + 1.5vw, 2.8rem);
}

/* ---------- Type ---------- */
body{font-size:16px}
html[lang="ar"] body{font-size:16px;line-height:1.7}
main h1{font-size:var(--fx-h1)!important;line-height:1.08!important;letter-spacing:-.022em}
html[lang="ar"] main h1{line-height:1.3!important;letter-spacing:0}
main .display:not(h1){font-size:var(--fx-h2xl)!important;line-height:1.1!important}
main .h2{font-size:var(--fx-h2)!important;line-height:1.15!important;letter-spacing:-.018em}
main h2.lp-h{font-size:var(--fx-h2s)!important;line-height:1.2!important}
html[lang="ar"] main :is(.display,.h2,h2.lp-h){line-height:1.35!important;letter-spacing:0}
main :is(.lede,.sec-head p,p.lp-sub,p.sp-lead){font-size:var(--fx-lede)!important;line-height:1.55}
html[lang="ar"] main :is(.lede,.sec-head p,p.lp-sub,p.sp-lead){line-height:1.75}
.eyebrow{font-size:12.5px;margin-bottom:10px}
html[lang="ar"] .eyebrow{font-size:13.5px}

/* ---------- Spacing ---------- */
html{scroll-padding-top:76px}
/* decorative shapes never push the page sideways (clip, unlike hidden, keeps sticky parts working) */
main > section{overflow-x:clip}
.sec{padding:var(--fx-sec) 0}
.sec-head{gap:12px;margin-bottom:32px}
.sec-head.split>div{gap:12px}
.hero{padding:clamp(32px, 20px + 2.5vw, 56px) 0 32px}
.closing{padding:clamp(56px, 40px + 3.4vw, 88px) 0 32px}
.closing .lede,.hero .lede{margin:16px 0 24px}
.crumbs{margin-bottom:20px}
main :is(.pclose,.cb-close,.mf-close,.mw-close,.sp-close,.ap-close){padding-block:clamp(56px, 44px + 2vw, 72px)!important}
main .sec:is(.fq-g){padding-block:clamp(48px, 36px + 2vw, 64px)!important}
main .sec:is(.gd-gsec,.gd-tsec){padding-bottom:var(--fx-sec)!important}
main .sec.gd-tsec{padding-top:var(--fx-sec)!important}
main .sec.lp-body{padding-bottom:var(--fx-sec)!important}

/* ---------- Buttons ---------- */
.btn{min-height:44px;padding:0 20px;gap:8px;font-size:15.5px}
.btn-sm{min-height:38px;padding:0 16px;font-size:14.5px}
html[lang="ar"] .btn{font-size:15px}
html[lang="ar"] .btn-sm{font-size:14px}
.btn .i{width:17px;height:17px}

/* ---------- Header and footer ---------- */
.site-header .header-row{height:64px}
.site-header .logo{width:144px;height:40px}
body .m-panel{inset-block-start:64px}
.f-cta{display:none}
.footer{padding-top:48px}
.f-col h3{font-size:15px;margin-bottom:12px}
.footer .logo{width:144px;height:40px}

/* Card titles: one size, except the small list labels some sections use (and the FAQ questions) */
main h3:not(:is([aria-hidden="true"],.checkout,.bpoints,.jobs,.mf-src,.pi-pm,.ly-c4) h3, .fq-qh){font-size:var(--fx-h3)!important;line-height:1.3!important}

/* ---------- Big numbers ---------- */
main :is(.stat,.dstat,.ob-big,.ab-tag,.ly-eqt,[class*="-stats"]) b{font-size:var(--fx-stat)!important;line-height:1.05!important}
main :is(.ab-tag,.ct-tag,.gd-tag) span{font-size:clamp(1.25rem, 1rem + .7vw, 1.75rem)!important}

/* ---------- Contrast: small grey labels darkened to at least 4.5:1 ---------- */
main .rs-lv .mf-vh{color:var(--ink-2,#56635C)}
main .pi-stamp small{color:#7A5200}

/* ---------- Hero: the product pictures take less room, most of all on phones ---------- */
:where(main>:first-child :has(>h1)~*){zoom:.9}
@media (max-width:760px){
  :where(main>:first-child :has(>h1)~*){zoom:.74}
  main>:first-child :has(>h1) :is(.btn){width:100%}
}

/* ---------- Phones: everything you tap is at least 44px ---------- */
@media (max-width:760px){
  .f-legal a,.f-lang button{display:inline-flex;align-items:center;min-height:44px}
  .crumbs a,main a.link,main a.fq-more,main a.ly-link{padding-block:11px;margin-block:-11px}
  main a[class*="-tab"],.lp-tabs a{min-height:44px;display:inline-flex;align-items:center}
  main form label:has(>input[type="checkbox"],>input[type="radio"]){min-height:44px;display:flex;align-items:center}
  .sticky-cta{min-height:46px}
}

/* ---------- Focus: a dark ring with a lime halo, visible on light and dark ---------- */
:focus-visible{outline:2px solid var(--graphite,#202522)!important;outline-offset:2px!important;box-shadow:0 0 0 5px var(--lime,#BAEF52)!important}

/*
 * Fursan navigation layer (bundled after scale.css): the "On this page" bar, the search button and dialog, copy-link
 * buttons on section headings, "Keep exploring" and the site map page. Light surfaces use the --fx-* tokens from
 * scale.css (visual.css redefines them for dark mode); lime and graphite are the brand accents.
 */
.nx-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Search button in the header ---------- */
.nx-sbtn{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:none;color:var(--soft,#F5F7F4);cursor:pointer}
.nx-sbtn:hover{background:var(--graphite-2,#282E2A)}
.nx-sbtn svg,.nx-sd svg,.nx-cl svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nx-sbtn svg{width:20px;height:20px}
@media (max-width:760px){.nx-sbtn{width:44px;height:44px}}

/* ---------- On this page ---------- */
html.nx-otp-page{scroll-padding-top:calc(var(--nx-top, 64px) + var(--nx-otp-h, 48px) + 12px)}
.nx-otp{position:fixed;inset-inline:0;top:var(--nx-top, 64px);z-index:45;
  background:color-mix(in srgb, var(--fx-card, #fff) 94%, transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--fx-line);box-shadow:0 10px 24px -18px rgba(32,37,34,.45);
  translate:0 -100%;opacity:0;pointer-events:none;transition:translate .22s ease,opacity .22s ease}
.nx-otp.nx-on,.nx-otp:focus-within{translate:0 0;opacity:1;pointer-events:auto}
.nx-otp-in{display:flex;align-items:center;gap:8px}
.nx-otp-h{flex:none;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--fx-muted)}
html[lang="ar"] .nx-otp-h{letter-spacing:0;font-size:13.5px}
.nx-otp-l{display:flex;flex:1;min-width:0;gap:2px;margin:0;padding:2px 12px;list-style:none;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);mask-image:linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent)}
.nx-otp-l::-webkit-scrollbar{display:none}
.nx-otp-l li{flex:none}
/* 44px to tap, a 32px pill to see */
.nx-otp-l a{position:relative;z-index:0;display:inline-flex;align-items:center;min-height:44px;padding:0 13px;font-size:14px;font-weight:600;line-height:1;
  color:var(--fx-muted);text-decoration:none;white-space:nowrap}
.nx-otp-l a::before{content:"";position:absolute;inset:6px 0;z-index:-1;border-radius:999px;transition:background-color .15s ease}
.nx-otp-l a:hover{color:var(--fx-text)}
.nx-otp-l a:hover::before{background:var(--fx-surface)}
.nx-otp-l a[aria-current]{color:var(--graphite,#202522)}
.nx-otp-l a[aria-current]::before{background:var(--lime,#BAEF52)}
.nx-otp-l a:focus-visible{outline:none!important;box-shadow:none!important}
.nx-otp-l a:focus-visible::before{box-shadow:inset 0 0 0 2px var(--graphite,#202522),0 0 0 3px var(--lime,#BAEF52)}
html[lang="ar"] .nx-otp-l a{font-size:14.5px}
@media (max-width:760px){
  .nx-otp-in{padding-inline:0}
  .nx-otp-h{display:none}
  .nx-otp-l{padding-inline:10px}
}

/* ---------- Copy link on section headings ---------- */
.nx-cl{display:inline-grid;place-items:center;width:32px;height:32px;margin-inline-start:8px;padding:0;vertical-align:middle;translate:0 -.06em;
  border:0;border-radius:8px;background:none;color:inherit;cursor:pointer;opacity:0;transition:opacity .15s ease,background-color .15s ease}
.nx-cl svg{width:18px;height:18px}
h2:hover>.nx-cl,.nx-cl:focus-visible,.nx-cl.nx-done{opacity:.7}
.nx-cl:hover{opacity:1;background:color-mix(in srgb, currentColor 10%, transparent)}
.nx-cl.nx-done{opacity:1}
@media (hover:none){.nx-cl{opacity:.45;width:40px;height:40px;margin-inline-start:2px}}
/* a section reached from search takes the keyboard focus without a ring around the whole section */
[data-nx-focus]:focus,[data-nx-focus]:focus-visible{outline:none!important;box-shadow:none!important}

/* the short "Link copied" message */
.nx-note{position:fixed;inset-inline-start:50%;bottom:calc(20px + var(--fx-lift, 0px));z-index:72;margin:0;padding:10px 16px;border-radius:10px;
  background:var(--graphite,#202522);color:var(--soft,#F5F7F4);font-weight:700;font-size:14.5px;box-shadow:0 14px 30px -10px rgba(0,0,0,.45);
  translate:-50% 8px;opacity:0;pointer-events:none;transition:opacity .2s ease,translate .2s ease}
html[dir="rtl"] .nx-note{translate:50% 8px}
.nx-note.nx-on:not(:empty){opacity:1;translate:-50% 0}
html[dir="rtl"] .nx-note.nx-on:not(:empty){translate:50% 0}

/* ---------- Keep exploring ---------- */
.nx-kx{padding:clamp(48px, 40px + 2vw, 64px) 0;background:var(--fx-surface);color:var(--fx-text);border-top:1px solid var(--fx-line)}
.nx-kx-h{margin:0 0 24px;font-size:var(--fx-h2s);line-height:1.2;letter-spacing:-.015em;color:var(--fx-text)}
html[lang="ar"] .nx-kx-h{letter-spacing:0;line-height:1.35}
.nx-ar{width:18px;height:18px;flex:none;transition:translate .2s ease}
html[dir="rtl"] .nx-ar{scale:-1 1}
.nx-back{scale:-1 1}
html[dir="rtl"] .nx-back{scale:1 1}
.nx-pn{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-bottom:32px}
.nx-pn-a{display:grid;align-content:start;gap:6px;padding:18px 20px;border:1px solid var(--fx-line);border-radius:14px;background:var(--fx-card);color:var(--fx-text);
  text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.nx-next{grid-column:2;justify-items:end;text-align:end}
.nx-pn-l{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--fx-muted)}
.nx-pn-a b{font-size:var(--fx-h3);line-height:1.3;font-weight:800}
.nx-rel-h{margin:0 0 12px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--fx-muted)}
html[lang="ar"] .nx-rel-h{letter-spacing:0;font-size:13.5px}
.nx-rel ul{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;margin:0;padding:0;list-style:none}
.nx-card{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-content:start;column-gap:12px;row-gap:4px;height:100%;box-sizing:border-box;padding:18px 20px;
  border:1px solid var(--fx-line);border-radius:14px;background:var(--fx-card);color:var(--fx-text);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease}
.nx-card b{grid-column:1;font-size:16.5px;font-weight:800;line-height:1.35}
.nx-card small{grid-column:1;font-size:14.5px;line-height:1.5;color:var(--fx-muted)}
.nx-card .nx-ar{grid-column:2;grid-row:1 / span 2;align-self:center}
.nx-pn-a:hover,.nx-card:hover{border-color:var(--fx-text);box-shadow:inset 0 -3px 0 var(--lime,#BAEF52)}
.nx-card:hover .nx-ar,.nx-pn-a:hover .nx-ar:not(.nx-back){translate:4px 0}
.nx-pn-a:hover .nx-back,html[dir="rtl"] .nx-card:hover .nx-ar,html[dir="rtl"] .nx-pn-a:hover .nx-ar:not(.nx-back){translate:-4px 0}
html[dir="rtl"] .nx-pn-a:hover .nx-back{translate:4px 0}
@media (max-width:760px){
  .nx-pn{grid-template-columns:minmax(0, 1fr);gap:12px;margin-bottom:28px}
  .nx-next{grid-column:auto}
  .nx-rel ul{grid-template-columns:minmax(0, 1fr);gap:12px}
}

/* ---------- Search dialog ---------- */
html.nx-lock{overflow:hidden}
.nx-sd{box-sizing:border-box;width:min(640px, calc(100% - 32px));max-width:none;max-height:min(620px, calc(100dvh - 112px));margin:80px auto auto;padding:0;
  border:1px solid var(--fx-line);border-radius:16px;background:var(--fx-card);color:var(--fx-text);box-shadow:0 30px 70px -24px rgba(15,18,16,.5);overflow:hidden}
.nx-sd[open]{display:flex;flex-direction:column;animation:nx-in .18s ease both}
.nx-sd::backdrop{background:rgba(20,24,22,.55)}
@keyframes nx-in{from{opacity:0;translate:0 -8px}}
.nx-sd-box{display:flex;flex-direction:column;flex:1;min-height:0}
.nx-sd-bar{display:flex;align-items:center;gap:10px;padding-inline:18px 8px;border-bottom:1px solid var(--fx-line)}
.nx-sd-bar:focus-within{box-shadow:inset 0 -2px 0 var(--lime,#BAEF52)}
.nx-sd-bar>svg{flex:none;width:20px;height:20px;color:var(--fx-muted)}
#nx-q{flex:1;min-width:0;height:60px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:17px;outline:none;-webkit-appearance:none;appearance:none}
#nx-q::-webkit-search-cancel-button{display:none}
#nx-q::placeholder{color:var(--fx-muted);opacity:.9}
#nx-q:focus-visible{outline:none!important;box-shadow:none!important}
.nx-sd-x{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:none;color:var(--fx-muted);cursor:pointer}
.nx-sd-x:hover{background:var(--fx-surface);color:var(--fx-text)}
.nx-sd-x svg{width:20px;height:20px}
.nx-sd-hint{margin:0;padding:14px 20px 2px;font-size:13px;font-weight:600;line-height:1.5;color:var(--fx-muted)}
.nx-sd-hint b{display:block;margin-bottom:2px;font-size:15px;color:var(--fx-text)}
.nx-sd-hint:empty{display:none}
.nx-sd-res{flex:1;min-height:0;margin:0;padding:8px;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.nx-sd-res:empty{display:none}
.nx-o a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;color:inherit;text-decoration:none}
.nx-o[aria-selected="true"] a{background:var(--fx-surface);box-shadow:inset 3px 0 0 var(--lime,#BAEF52)}
html[dir="rtl"] .nx-o[aria-selected="true"] a{box-shadow:inset -3px 0 0 var(--lime,#BAEF52)}
.nx-o-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid var(--fx-line);border-radius:9px;background:var(--fx-surface);color:var(--fx-muted)}
.nx-o[aria-selected="true"] .nx-o-ic{border-color:transparent;background:var(--graphite,#202522);color:var(--lime,#BAEF52)}
.nx-o-ic svg{width:18px;height:18px;stroke-width:1.8}
.nx-o-tx{display:grid;gap:2px;min-width:0}
.nx-o-k{overflow:hidden;font-size:12px;font-weight:700;color:var(--fx-muted);white-space:nowrap;text-overflow:ellipsis}
.nx-o-t{font-size:15.5px;font-weight:700;line-height:1.35}
.nx-o-s{display:-webkit-box;overflow:hidden;font-size:13.5px;line-height:1.5;color:var(--fx-muted);-webkit-line-clamp:2;-webkit-box-orient:vertical}
html[lang="ar"] .nx-o-s{line-height:1.65}
.nx-sd mark{padding:0;border-radius:2px;background:color-mix(in srgb, var(--lime, #BAEF52) 60%, transparent);color:inherit}
.nx-sd-ft{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:10px 18px;border-top:1px solid var(--fx-line);font-size:12.5px;color:var(--fx-muted)}
.nx-sd-ft kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;box-sizing:border-box;margin-inline-end:3px;padding:0 5px;border:1px solid var(--fx-line);border-bottom-width:2px;
  border-radius:6px;background:var(--fx-surface);color:var(--fx-text);font:inherit;font-size:11.5px;font-weight:700}
.nx-sd-ft i{font-style:normal}
@media (hover:none){.nx-sd-ft{display:none}}
@media (max-width:600px){
  .nx-sd{width:100%;height:100%;max-height:none;margin:0;border:0;border-radius:0}
  .nx-sd-ft{display:none}
}

/* ---------- Site map page ---------- */
.nx-map{padding:var(--fx-sec) 0;background:var(--fx-surface);color:var(--fx-text)}
.nx-map-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:40px 32px}
.nx-map-g h2{margin:0 0 16px;font-size:var(--fx-h3);line-height:1.3;color:var(--fx-text)}
.nx-map-g h2::before{content:"";display:block;width:28px;height:4px;margin-bottom:12px;border-radius:2px;background:var(--lime,#BAEF52)}
.nx-map-g ul{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.nx-map-g a{font-weight:700;color:var(--fx-text);text-decoration:underline;text-decoration-color:var(--fx-line);text-underline-offset:4px}
.nx-map-g a:hover{text-decoration-color:currentColor}
.nx-map-g small{display:block;margin-top:2px;font-size:14px;line-height:1.5;color:var(--fx-muted)}
@media (max-width:760px){.nx-map-g a{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px}}

@media (prefers-reduced-motion:reduce){
  .nx-otp,.nx-note,.nx-ar,.nx-cl,.nx-otp-l a::before{transition:none}
  .nx-sd[open]{animation:none}
}

/*
 * Fursan site layer: styles for forms.js and lang.js. Light surfaces use the scale.css tokens (--fx-surface, --fx-card,
 * --fx-text, --fx-muted, --fx-line); text placed inside a page's own form inherits that form's colours.
 */

/* ---------- Email hint (under an email field) ---------- */
.fx-mailhint{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;margin:4px 0 0;font-size:14px;line-height:1.5;color:inherit}
.fx-mailhint button{min-height:32px;padding:0 2px;border:0;background:none;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fx-mailhint button:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:4px}

/* ---------- Coming soon: one label everywhere ---------- */
.fx-soon-badge{display:inline-flex!important;align-items:center;width:auto!important;margin-block:0!important;padding:1px 9px!important;border:1.5px solid currentColor!important;border-radius:999px!important;
  background:transparent!important;box-shadow:none!important;font-size:12.5px!important;font-weight:700!important;line-height:1.5!important;letter-spacing:0!important;
  text-transform:none!important;white-space:nowrap;color:inherit!important;vertical-align:middle}
html[lang="ar"] .fx-soon-badge{font-size:13px!important}
/* the list item keeps its place in the list; the link inside it carries the label's look */
li.fx-soon-badge.fx-soon-li{padding:0!important;border:0!important}
li.fx-soon-li > .fx-soon-link{padding:1px 9px;border:1.5px solid currentColor;border-radius:999px}
.fx-soon-link{display:inline-flex;align-items:center;color:inherit;text-decoration:none;border-radius:999px;vertical-align:middle}
.fx-soon-link:hover .fx-soon-badge,li.fx-soon-li > .fx-soon-link:hover,a:hover > .fx-soon-badge{background:color-mix(in srgb,currentColor 14%,transparent)!important}
.fx-soon-link:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (pointer:coarse){.fx-soon-link{min-height:32px}}

/* ---------- Was this helpful? (FAQ answers) ---------- */
.fx-help{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:16px;padding-top:14px;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:15px}
.fx-help-q{font-weight:700}
.fx-help-b{display:inline-flex;flex-wrap:wrap;gap:8px}
.fx-help button{min-height:36px;padding:0 16px;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;background:transparent;font:inherit;font-size:14.5px;font-weight:700;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.fx-help button:hover{border-color:currentColor}
.fx-help button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.fx-help .fx-help-send{border-color:var(--fx-text);background:var(--fx-text);color:var(--fx-card)}
.fx-help .fx-help-send[aria-busy="true"]{opacity:.75;cursor:progress}
.fx-help-l{flex-basis:100%;font-weight:700}
.fx-help textarea{flex-basis:100%;min-height:96px;padding:10px 12px;border:1.5px solid color-mix(in srgb,var(--fx-text) 45%,transparent);border-radius:10px;background:var(--fx-card);
  font:inherit;font-size:15px;color:var(--fx-text);resize:vertical}
.fx-help textarea:focus-visible{outline:2px solid var(--fx-text);outline-offset:1px}
.fx-help-done,.fx-help-err{display:flex;align-items:center;gap:8px;margin:0;font-weight:600}
.fx-help-done:focus{outline:none}
.fx-help-done:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:6px}
.fx-help-err{flex-basis:100%;color:#C42B1F}
.fx-help svg:not(.fx-spin),.fx-gbox svg:not(.fx-spin){flex:none;width:18px;height:18px}
@media (pointer:coarse){.fx-help button{min-height:44px}}

/* ---------- Resources: get the guides when they're out ---------- */
.fx-gbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:start;gap:16px 32px;margin:0 0 32px;padding:24px;border:1px solid var(--fx-line);border-radius:18px;
  background:var(--fx-card);color:var(--fx-text)}
.fx-gtext h3{margin:0 0 6px;font-size:var(--fx-h3);line-height:1.3}
.fx-gtext p{margin:0;font-size:15px;line-height:1.6;color:var(--fx-muted)}
.fx-gform{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px 12px;margin:0}
.fx-gf{display:grid;gap:6px;min-width:0}
.fx-gf > label{font-size:14px;font-weight:700}
.fx-gf input[type="email"]{width:100%;height:44px;padding:0 12px;border:1.5px solid color-mix(in srgb,var(--fx-text) 45%,transparent);border-radius:10px;background:var(--fx-card);
  font:inherit;font-size:15px;color:var(--fx-text)}
.fx-gf input[type="email"]:focus-visible{outline:2px solid var(--fx-text);outline-offset:1px}
.fx-gf input[aria-invalid="true"]{border-color:#C42B1F;box-shadow:0 0 0 .5px #C42B1F}
.fx-gagree{grid-column:1 / -1;font-size:14px;line-height:1.55}
.fx-gagree label{display:flex;align-items:flex-start;gap:10px;font-weight:500;cursor:pointer}
.fx-gagree input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--fx-text)}
.fx-gagree a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fx-gerr{display:flex;align-items:flex-start;gap:6px;margin:0;font-size:14px;font-weight:600;color:#C42B1F}
.fx-gerr svg{margin-top:2px}
.fx-gform .fx-gbtn{grid-row:1;grid-column:2;align-self:start;margin-top:27px;min-height:44px;gap:8px}
.fx-gbtn[aria-busy="true"]{cursor:progress;opacity:.85}
.fx-gtrap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fx-gban{grid-column:1 / -1;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,#C42B1F 9%,var(--fx-card));color:var(--fx-text);font-size:14.5px}
.fx-gban svg{color:#C42B1F;margin-top:2px}
.fx-gban p{margin:0}
.fx-gdone{grid-column:1 / -1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 12px;outline:none}
.fx-gdone .fx-gok{grid-row:span 2;width:28px;height:28px;color:var(--fx-text)}
.fx-gdone b{font-size:var(--fx-h3)}
.fx-gdone span{color:var(--fx-muted)}
.fx-gdone:focus-visible{outline:2px solid var(--fx-text);outline-offset:6px;border-radius:8px}
@media (max-width:900px){
  .fx-gbox{grid-template-columns:minmax(0,1fr);padding:20px}
}
@media (max-width:560px){
  .fx-gform{grid-template-columns:minmax(0,1fr)}
  .fx-gform .fx-gbtn{grid-row:auto;grid-column:1;margin-top:0;width:100%}
}

/* ---------- Language suggestion ---------- */
.fx-lp{position:fixed;inset-block-start:76px;z-index:49;width:min(380px,calc(100vw - 32px));padding:14px 48px 14px 16px;border:1px solid var(--fx-line);border-radius:14px;
  background:var(--fx-card);color:var(--fx-text);box-shadow:0 12px 32px rgba(14,17,15,.18);font-size:15px;line-height:1.5;animation:fx-lp-in .25s ease-out}
.fx-lp[dir="rtl"]{padding:14px 16px 14px 48px}
/* on the page's end side, whatever the note's own direction */
html[dir="rtl"] .fx-lp{left:16px}
html:not([dir="rtl"]) .fx-lp{right:16px}
.fx-lp p{margin:0 0 10px;font-weight:600}
.fx-lp-b{display:flex;flex-wrap:wrap;gap:8px}
.fx-lp button{font:inherit;cursor:pointer}
.fx-lp-go,.fx-lp-stay{min-height:38px;padding:0 14px;border-radius:10px;font-size:14.5px;font-weight:700}
.fx-lp-go{border:1.5px solid var(--fx-text);background:var(--fx-text);color:var(--fx-card)}
.fx-lp-stay{border:1.5px solid color-mix(in srgb,var(--fx-text) 35%,transparent);background:transparent;color:var(--fx-text)}
.fx-lp-x{position:absolute;inset-block-start:8px;inset-inline-end:8px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--fx-muted)}
.fx-lp-x svg{width:18px;height:18px}
.fx-lp-x:hover{background:var(--fx-surface);color:var(--fx-text)}
.fx-lp button:focus-visible{outline:2px solid var(--fx-text);outline-offset:2px}
/* the note speaks the other language: it takes that language's face */
.fx-lp:lang(ar){font-family:var(--font-arabic,"Alexandria"),system-ui,sans-serif}
.fx-lp:lang(en){font-family:var(--font-latin,"Archivo"),system-ui,sans-serif}
@media (pointer:coarse){.fx-lp-go,.fx-lp-stay,.fx-lp-x{min-height:44px}.fx-lp-x{width:44px;height:44px;inset-block-start:4px;inset-inline-end:4px}}
@keyframes fx-lp-in{from{opacity:0;translate:0 -8px}}

/* ---------- Hijri date beside a full date ---------- */
.fx-hijri{unicode-bidi:isolate;font-size:.94em;color:inherit;opacity:.8}

/* ---------- Spinners ---------- */
.fx-spin{flex:none;width:18px;height:18px;animation:fx-spin .8s linear infinite}
@keyframes fx-spin{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){
  .fx-spin{animation:none}
  .fx-lp{animation:none}
}

/*
 * Fursan visual layer (loads last, after site.css, scale.css, nav.css and forms.css):
 *   1. one style for every product mockup: device frames, app windows, and the "Illustrative · Sample data" pills
 *   2. hover and press feedback on things you can click only: one hover per kind, a small press, no lift on cards
 *      that aren't links (all movement off with reduced motion)
 *   3. a calmer page rhythm: one hairline between neighbouring sections of the same colour, and lime bands as
 *      rounded panels instead of full-width stripes
 *   4. dark mode, on when <html> has .fx-dark (the visitor's choice from the light/dark switch, otherwise the system
 *      setting): light sections, cards, text and borders turn dark; the site layer's light parts (mega menus,
 *      cookie notice and dialog, the --fx-* surfaces) follow; product mockups stay light, like screenshots.
 *      visual.js covers what CSS can't see (parts with fixed light colours, and text that would fall under 4.5:1)
 *      and adds the switch: a sun/moon button in the header, a "Dark mode" row in the phone menu.
 * The light sections are the page sections that aren't dark or lime: .sec (soft), .sec.white, .a-close, .pp-close,
 * .in-band, .proof (visual.js marks any other light section it finds with .fx-lt).
 */

/* ======================================================================================================== */
/* 1. Mockups                                                                                               */
/* ======================================================================================================== */
:root{
  --fx-frame-ring:0 0 0 1px rgba(197,207,200,.28);
  --fx-frame-drop:0 30px 60px -20px rgba(0,0,0,.55);
}
/* on light sections the shadow is lighter and the ring dark */
main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt){
  --fx-frame-ring:0 0 0 1px rgba(32,37,34,.14);
  --fx-frame-drop:0 28px 56px -26px rgba(32,37,34,.42);
}
/* device frames: phones, the desk monitor and the tablet share one bezel, ring and shadow (their sizes and corner
   radii stay, since the screens inside are cut to them) */
main :is(div.phone,.mon-screen,.mf-tablet):not(#fx){background:var(--graphite-3,#343B36);box-shadow:var(--fx-frame-ring),var(--fx-frame-drop)}
/* app windows shown on their own: one corner radius, ring and shadow */
main :is(.adm.big,.pq-scr,.bwin .adm):not(#fx){border-radius:12px;box-shadow:var(--fx-frame-ring),var(--fx-frame-drop)}

/* the "Illustrative screens · Sample data" pills (and the pills that sit beside them): one size, weight, border */
main :is(.mf-pills,.cb-pills,.mw-pills,.sp-pills)>*:not(#fx),
main :is([data-i18n^="illus"],[data-i18n="wb_pill"],[data-i18n="concept"],[data-i18n="rp_illus"],[data-i18n="br_cap"],[data-i18n="big_pill"]):not(#fx){
  display:inline-flex;align-items:center;gap:6px;width:auto;max-width:100%;min-height:0;margin:0;padding:5px 14px;
  border:1px solid color-mix(in srgb,currentColor 38%,transparent);border-radius:999px;background:none;
  font-size:13px;font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;white-space:normal;text-align:center}
main :is(.mf-pills,.cb-pills,.mw-pills,.sp-pills)>* svg.i{width:14px;height:14px}
/* a pill inside a pill keeps to the outer one */
main :is(.mf-pills,.cb-pills,.mw-pills,.sp-pills)>* [data-i18n]:not(#fx){display:inline;padding:0;border:0;font:inherit}
/* the caption paragraphs that hold a pill don't add their own size */
main :is(.pill-note,.pp-note,.ap-note){font-size:13px}
html[lang="ar"] main :is(.mf-pills,.cb-pills,.mw-pills,.sp-pills)>*:not(#fx),
html[lang="ar"] main :is([data-i18n^="illus"],[data-i18n="wb_pill"],[data-i18n="concept"],[data-i18n="rp_illus"],[data-i18n="br_cap"],[data-i18n="big_pill"]):not(#fx){line-height:1.6;padding-block:3px}
/* "Try it" hints under a demo: plain text, one size (two pages had them as pills) */
main :is(p.mf-try,p.cb-try,p.sp-try){font-size:13.5px;line-height:1.5}
main :is(.cap,.mw-note)>span:not([data-i18n^="illus"]):not(#fx){display:inline;padding:0;border:0;border-radius:0;font-size:13.5px;line-height:1.5}
/* breadcrumb separators on the dark heroes were 3.5:1 */
.crumbs span[aria-hidden]{color:#8D9A93}
/* the separator in the cookie settings dialog was 2.1:1 */
.fx-cd-n span{color:#5F6B65}

/* ======================================================================================================== */
/* 2. Hover and press                                                                                       */
/* ======================================================================================================== */
/* buttons: colour changes on hover (one per kind), and a 1px press */
.btn,.fx-btn,.fx-more-btn,.fx-talk,.site-header .fx-mega a.fx-b,.m-panel a.fx-b-lime,.m-panel a.fx-b-line,main .pp-lbtn{
  transition:background-color .15s,border-color .15s,box-shadow .15s,translate .12s}
.btn:active,.fx-btn:active,.fx-more-btn:active,.fx-talk:active,.site-header .fx-mega a.fx-b:active,main .pp-lbtn:not(:disabled):active,.sticky-cta:active{translate:0 1px}
/* outline buttons on dark: a light tint and a solid edge (ghost and white-line were two different hovers) */
.btn-ghost:hover,.btn-wline:hover{background:rgba(245,247,244,.08);border-color:var(--soft,#F5F7F4)}
/* outline buttons on light */
.btn-line:hover,main .pp-lbtn:not(:disabled):hover{background:rgba(32,37,34,.07)}
.fx-more-btn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}

/* cards that are links: a ring, a 2px lift and a soft shadow; pressing settles them */
main a:is(.fcard,.sol,.prow2,.pi-tile,.ly-mod,.ps-mod){transition:box-shadow .18s,translate .18s}
main a:is(.fcard,.sol,.prow2,.pi-tile,.ly-mod,.ps-mod):hover{translate:0 -2px;box-shadow:0 0 0 1.5px var(--graphite,#202522),0 20px 40px -28px rgba(32,37,34,.5)}
main a:is(.fcard,.sol,.prow2,.pi-tile,.ly-mod,.ps-mod):active{translate:0 0;box-shadow:0 0 0 1.5px var(--graphite,#202522)}
/* cards that aren't links don't react to the pointer */
main div.fcard:hover{box-shadow:0 0 0 1px var(--line-light,rgba(32,37,34,.12))}

/* menu rows and cards in the mega menus: the same press */
.site-header .fx-mega :is(a.fx-row,a.fx-tile,.fx-card):active{translate:0 1px}
.site-header .fx-mega :is(a.fx-row,a.fx-tile,.fx-card){transition:border-color .15s,box-shadow .15s,translate .12s}

/* chips and tabs outside the mockups */
.lp-tabs a:active,main a[class*="-tab"]:active{translate:0 1px}

@media (prefers-reduced-motion:reduce){
  .btn:active,.fx-btn:active,.fx-more-btn:active,.fx-talk:active,.sticky-cta:active,main .pp-lbtn:active,
  .site-header .fx-mega :is(a.fx-row,a.fx-tile,.fx-card,a.fx-b):active,.lp-tabs a:active,main a[class*="-tab"]:active,
  main a:is(.fcard,.sol,.prow2,.pi-tile,.ly-mod,.ps-mod):is(:hover,:active){translate:none}
}

/* ======================================================================================================== */
/* 3. Page rhythm                                                                                           */
/* ======================================================================================================== */
/* neighbouring sections of the same colour get one hairline between them */
main>:is(.sec:not(.dark):not(.lime):not(.white),.a-close,.pp-close)+:is(.sec:not(.dark):not(.lime):not(.white),.a-close,.pp-close),
main>:is(.sec.white,.in-band,.proof)+:is(.sec.white,.in-band,.proof){border-top:1px solid var(--line-light,rgba(32,37,34,.12))}
/* lime bands (the closing call to action, and the home page's numbers) become rounded panels, so the page doesn't
   end on a full-width stripe */
main>:is(.sec.lime,.mf-close,.in-close,.pclose,.ps-close){
  margin:clamp(12px,1.6vw,20px) clamp(12px,2vw,24px);border-radius:clamp(20px,2vw,28px);overflow:clip}
main>:is(.mf-close,.in-close,.pclose,.ps-close):last-child{margin-bottom:clamp(16px,2.4vw,28px)}

/* ======================================================================================================== */
/* 4. Dark mode                                                                                             */
/* ======================================================================================================== */
/* Dark mode is on when <html> has .fx-dark: set before the page paints from the visitor's choice (the switch in
   the header, kept in localStorage "fursan-theme") or, without one, the system setting; see visual.js. */
:root:where(.fx-dark){
  color-scheme:dark;
  --fx-surface:#1B201D;
  --fx-card:#232925;
  --fx-text:#E9EEEA;
  --fx-muted:#A9B5AD;
  --fx-line:rgba(197,207,200,.16);
}
html:where(.fx-dark),:where(html.fx-dark) body{background:#151916}

/* light sections: page colours swap to dark; the brand's dark sections, heroes and lime panels are unchanged */
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt){
  --soft:#151916;
  --white:#1B201D;
  --graphite:#E9EEEA;
  --ink-2:#A9B5AD;
  --stone:#93A098;
  --line-light:rgba(197,207,200,.15);
  --fx-frame-ring:0 0 0 1px rgba(197,207,200,.28);
  --fx-frame-drop:0 30px 60px -20px rgba(0,0,0,.55);
  color:var(--graphite);
}
/* sections side by side are close in tone in the dark, so every boundary gets a faint line */
:where(html.fx-dark) main>*+*{border-top:1px solid rgba(197,207,200,.08)}
:where(html.fx-dark) main>:is(.sec.lime,.mf-close,.in-close,.pclose,.ps-close),:where(html.fx-dark) main>:is(.sec.lime,.mf-close,.in-close,.pclose,.ps-close)+*{border-top:0}

/* product mockups (and anything visual.js finds with a fixed light colour) keep their light colours */
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt)
  :is(.phone,.screen,.adm,.aw,.mon-screen,.mf-tablet,.mf-desk,.pq-scr,.pi-doc,.pp-desk,.ly-desk,.sp-lap,.bwin,.devices,.mf-scr,.cb-scr,.win,.bw,.thumb,.invoice,.ps-sale,.ps-slip,.pi-pc,.ca-br,.ca-tab,.pp-node,.mw-mc,.mw-sc),
:where(html.fx-dark) .fx-keep-light{
  --soft:#F5F7F4;
  --white:#FFFFFF;
  --graphite:#202522;
  --ink-2:#56635C;
  --stone:#6C7A73;
  --line-light:rgba(32,37,34,.12);
  color-scheme:light;
}
/* their text starts from the light-mode colour too (a part's own colour still wins) */
:where(html.fx-dark) :where(main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt)
  :is(.phone,.screen,.adm,.aw,.mon-screen,.mf-tablet,.mf-desk,.pq-scr,.pi-doc,.pp-desk,.ly-desk,.sp-lap,.bwin,.devices,.mf-scr,.cb-scr,.win,.bw,.thumb,.invoice,.ps-sale,.ps-slip,.pi-pc,.ca-br,.ca-tab,.pp-node,.mw-mc,.mw-sc)),
:where(html.fx-dark) :where(.fx-keep-light){color:var(--graphite)}
:where(html.fx-dark) .fx-ink-dark{color:#202522}
/* pale cards and notes with a fixed colour (visual.js): a dark version of their tint, with a fine edge */
:where(html.fx-dark) .fx-dk{background-color:color-mix(in srgb,var(--fx-tint) 13%,#1B201D)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fx-tint) 28%,transparent)!important}
:where(html.fx-dark) .fx-dk.fx-dk-n{background-color:#1B201D!important;box-shadow:inset 0 0 0 1px rgba(197,207,200,.15)!important}

/* dark buttons on a light section become light buttons */
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt) .btn-dark:not(.fx-keep-light .btn-dark){background:#E9EEEA;color:#151916}
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt) .btn-dark:not(.fx-keep-light .btn-dark):hover{background:#FFFFFF}
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt) :is(.btn-line:hover,.pp-lbtn:not(:disabled):hover){background:rgba(233,238,234,.1)}
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt) a:is(.fcard,.sol,.prow2,.pi-tile,.ly-mod,.ps-mod):hover{box-shadow:0 0 0 1.5px var(--graphite),0 20px 40px -26px rgba(0,0,0,.7)}

/* form fields on light sections (not the ones inside mockups) */
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),select,textarea):not(.fx-keep-light *):not(:is(.phone,.screen,.adm,.aw,.mon-screen,.mf-tablet,.mf-desk,.pq-scr,.pi-doc,.pp-desk,.ly-desk,.sp-lap,.bwin,.devices,.mf-scr,.cb-scr,.win,.bw,.thumb,.invoice,.ps-sale,.ps-slip,.pi-pc,.ca-br,.ca-tab,.pp-node,.mw-mc,.mw-sc) *){
  background-color:#1B201D;color:#E9EEEA;border-color:rgba(197,207,200,.32)}
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.a-close,.pp-close,.in-band,.proof,.fx-lt) :is(input,textarea):not(.fx-keep-light *)::placeholder{color:#93A098}

/* hover and current states that the pages paint a fixed light colour */
:where(html.fx-dark) main :is(.in-row,.lp-toc ol a,.pi-pr):not(.fx-keep-light):not(.fx-keep-light *):hover{background:rgba(233,238,234,.08)}
:where(html.fx-dark) main .lp-toc ol a[aria-current]{color:#202522}
:where(html.fx-dark) main :is(.sec:not(.dark):not(.lime),.fx-lt) .fq-it:not(.open):hover{box-shadow:0 0 0 1px rgba(233,238,234,.32)}

/* ---------- Mega menus ---------- */
:where(html.fx-dark) .site-header .menu.fx-mega{
  --soft:#1B201D;--white:#232925;--graphite:#E9EEEA;--ink-2:#A9B5AD;
  border-color:rgba(197,207,200,.14);box-shadow:0 40px 80px -24px rgba(0,0,0,.85)}
:where(html.fx-dark) .site-header .fx-mega :is(a.fx-row,.fx-card,a.fx-tile){border-color:rgba(197,207,200,.14)}
:where(html.fx-dark) .site-header .fx-mega :is(a.fx-row:hover,a.fx-row[aria-current],a.fx-tile:hover,a.fx-tile[aria-current]),
:where(html.fx-dark) .fx-mega .fx-card:is(:hover,:has([aria-current])){border-color:rgba(197,207,200,.42);box-shadow:0 10px 24px -14px rgba(0,0,0,.7)}
:where(html.fx-dark) .site-header .fx-mega :is(a.fx-row,a.fx-tile):hover{background:var(--white)}
:where(html.fx-dark) .fx-mega .fx-ic,:where(html.fx-dark) .fx-mega .fx-badge,:where(html.fx-dark) .fx-mega .fx-tile .fx-badge,:where(html.fx-dark) .site-header .fx-mega a.fx-b-lime{--graphite:#202522}
:where(html.fx-dark) .fx-mega .fx-badge,:where(html.fx-dark) .fx-mega .fx-tile .fx-badge{background:var(--lime,#BAEF52);color:#202522}
:where(html.fx-dark) .fx-mega .fx-soon .fx-badge{background:rgba(197,207,200,.16);color:#E9EEEA}
:where(html.fx-dark) .site-header .fx-mega a.fx-more{border-top-color:rgba(197,207,200,.16)}
:where(html.fx-dark) .fx-mega :is(.fx-promo,.fx-strip){--graphite:#202522;--soft:#F5F7F4;--graphite-2:#282E2A;background:#0F1311}
:where(html.fx-dark) .fx-mega .fx-promo{box-shadow:inset 0 0 0 1px rgba(197,207,200,.12)}

/* ---------- Cookie notice and settings ---------- */
:where(html.fx-dark) .fx-cb,:where(html.fx-dark) .fx-cd{--soft:#1B201D;--white:#232925;--graphite:#E9EEEA;--graphite-3:#FFFFFF;--ink-2:#A9B5AD}
:where(html.fx-dark) .fx-cb{box-shadow:0 0 0 1px rgba(197,207,200,.14),0 30px 70px -20px rgba(0,0,0,.85)}
:where(html.fx-dark) .fx-cd{box-shadow:0 0 0 1px rgba(197,207,200,.14),0 40px 90px -20px rgba(0,0,0,.85)}
:where(html.fx-dark) .fx-cd::backdrop{background:rgba(6,8,7,.72)}
:where(html.fx-dark) .fx-cb p,:where(html.fx-dark) .fx-cat-t span{color:#C9D2CC}
:where(html.fx-dark) .fx-btn.fx-line:hover,:where(html.fx-dark) .fx-cd-x:hover{background:rgba(233,238,234,.1)}
:where(html.fx-dark) .fx-btn.fx-lime,:where(html.fx-dark) .fx-cd-ic{color:#202522}
:where(html.fx-dark) .fx-cd li{border-color:rgba(197,207,200,.14)}
:where(html.fx-dark) .fx-cat-ic{background:#2E3530}
:where(html.fx-dark) .fx-st{border-inline-start-color:rgba(197,207,200,.2)}
:where(html.fx-dark) .fx-st-on{color:var(--lime,#BAEF52)}
:where(html.fx-dark) .fx-sw{background:#59645D}
:where(html.fx-dark) .fx-sw:checked,:where(html.fx-dark) .fx-sw-fixed{background:#7FB82E}
:where(html.fx-dark) .fx-cd-n span{color:#8F9A93}
:where(html.fx-dark) .fx-saved{box-shadow:0 0 0 1px rgba(197,207,200,.2),0 14px 30px -10px rgba(0,0,0,.7)}

/* ---------- The light/dark switch (visual.js adds it) ---------- */
/* in the header, beside search; on phones the header has no room, so the switch is a row in the phone menu */
.fx-thm{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:8px;background:none;color:var(--soft,#F5F7F4);cursor:pointer}
.fx-thm:hover{background:var(--graphite-2,#282E2A)}
.fx-thm svg,.fx-thm-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fx-thm .fx-sun,:where(html.fx-dark) .fx-thm .fx-moon{display:none}
:where(html.fx-dark) .fx-thm .fx-sun{display:block}
@media (max-width:760px){.site-header .fx-thm{display:none}}
/* beside the full menu, search and the switch sit as one compact pair */
@media (min-width:1101px){
  .site-header :is(.nx-sbtn,.fx-thm){width:36px}
  .site-header .nx-sbtn+.fx-thm{margin-inline-start:-4px}
}
.m-panel .fx-thm-row{display:flex;align-items:center;gap:12px;width:100%;padding:15px 0;border:0;border-bottom:1px solid var(--line-dark,rgba(197,207,200,.16));
  background:none;font:inherit;font-size:17px;font-weight:600;color:var(--soft,#F5F7F4);text-align:start;cursor:pointer}
.m-panel .fx-thm-row>span:first-of-type{flex:1}
.fx-thm-sw{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:#59645D;transition:background-color .2s}
.fx-thm-sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#F5F7F4;transition:translate .2s}
.fx-thm-row[aria-checked="true"] .fx-thm-sw{background:#7FB82E}
.fx-thm-row[aria-checked="true"] .fx-thm-sw::after{translate:18px}
[dir="rtl"] .fx-thm-row[aria-checked="true"] .fx-thm-sw::after{translate:-18px}
@media (prefers-reduced-motion:reduce){.fx-thm-sw,.fx-thm-sw::after{transition:none}}
/* switching crossfades the page where the browser can (View Transitions), never for reduced motion */
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}