*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:#F7F6F2;color:#14211D}
img,video{max-width:100%}
body{font-family:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif}
html:not([dir=rtl]) [data-l=ar]{display:none!important}
html[dir=rtl] [data-l=en]{display:none!important}
html[dir=rtl] *{letter-spacing:0!important}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{line-height:1.4!important}
html[dir=rtl] p{line-height:1.85!important}
html[dir=rtl] [data-flip]{display:inline-block;transform:scaleX(-1)}
:root{--mono:'IBM Plex Mono','IBM Plex Sans Arabic',monospace}
html[dir=rtl]{--df:-1;--mono:'IBM Plex Sans Arabic',system-ui,sans-serif}
a{color:#1F6F5C;text-decoration:none;transition:color .2s,background .2s,border-color .2s}
a:hover{color:#164F42}
input,select,textarea,button{font:inherit}
input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #1F6F5C;outline-offset:2px}
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] [data-plus]{transform:rotate(45deg)}
[data-tilt]{transform:none}

/* Button & Interactive styles (converting style-hover to real CSS) */
.bf-btn-primary{background:#1F6F5C;color:#FFFFFF!important;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 8px 20px -8px rgba(31,111,92,.6);transition:background .2s,box-shadow .2s}
.bf-btn-primary:hover{background:#164F42!important;color:#FFFFFF!important}
.bf-btn-outline{border:1px solid #14211D;color:#14211D!important;background:transparent;transition:background .2s,color .2s}
.bf-btn-outline:hover{background:#14211D!important;color:#FFFFFF!important}
.bf-btn-light{background:#FFFFFF;color:#10251F!important;transition:background .2s,color .2s}
.bf-btn-light:hover{background:#E3EEEA!important;color:#10251F!important}
.bf-btn-ghost{border:1px solid rgba(255,255,255,.5);color:#FFFFFF!important;background:transparent;transition:background .2s,color .2s}
.bf-btn-ghost:hover{background:rgba(255,255,255,.1)!important;color:#FFFFFF!important}
.bf-btn-lang:hover{background:#EDEBE4!important}
.bf-nav-link:hover{color:#164F42!important}
.bf-nav-pill:hover{border-color:#1F6F5C!important;color:#1F6F5C!important}

/* Cards */
.bf-card{background:#FFFFFF;border:1px solid #DCD8CE;border-radius:14px;box-shadow:0 1px 2px rgba(20,33,29,.04),0 6px 16px -6px rgba(20,33,29,.08),0 22px 44px -24px rgba(20,33,29,.16);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.bf-card:hover{transform:translateY(-4px);border-color:#8FC2B1;box-shadow:0 1px 2px rgba(20,33,29,.04),0 12px 28px -10px rgba(20,33,29,.14),0 36px 64px -30px rgba(31,111,92,.38)}

/* Animations */
@keyframes bfRise{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
html.bf-motion [data-reveal]:not([data-in]),html.bf-motion [data-stagger]:not([data-in])>*{opacity:0}
html.bf-motion [data-reveal][data-in]{animation:bfRise .8s cubic-bezier(.2,.7,.2,1) both}
html.bf-motion [data-stagger][data-in]>*{animation:bfRise .7s cubic-bezier(.2,.7,.2,1) both}
[data-stagger]>*:nth-child(2){animation-delay:.07s}[data-stagger]>*:nth-child(3){animation-delay:.14s}[data-stagger]>*:nth-child(4){animation-delay:.21s}[data-stagger]>*:nth-child(5){animation-delay:.28s}[data-stagger]>*:nth-child(6){animation-delay:.35s}
[data-spy-link][data-current]{color:#164F42!important;background:#E3EEEA!important;border-color:#9CC7B8!important}
[data-spy-link][data-current] [data-dot]{background:#1F6F5C!important;transform:scale(1.4)}
[data-spy-strip]{scrollbar-width:none}[data-spy-strip]::-webkit-scrollbar{display:none}

/* Responsive Media Queries */
@media(max-width:680px){
  [data-stack] table{min-width:0!important}
  [data-stack] thead{display:none}
  [data-stack] tr{display:block;padding:16px 18px;border-bottom:1px solid var(--stack-rule,#E6E2D8)}
  [data-stack] tr:last-child{border-bottom:none}
  [data-stack] th[scope=row]{display:block;padding:0 0 10px!important;border:none!important;font-size:17px}
  [data-stack] td{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:12px;padding:8px 0!important;border:none!important;background:none!important}
  [data-stack] td::before{content:attr(data-label-en);font-size:13px;font-weight:600;color:var(--stack-lbl,#5B6B66)}
  html[dir=rtl] [data-stack] td::before{content:attr(data-label-ar)}
  [data-stack] caption{padding-inline:18px!important}
}
/* Mobile header and menu (audit, Oct 2026) */
/* Start trial is in the menu and the hero: the phone header keeps logo, language and menu. */
@media(max-width:639px){[data-trial-hd]{display:none!important}}
#bf-lang-btn{min-width:44px}
header>div>a:first-child{min-height:44px}
#bf-menu-btn [data-icon-close]{display:none}
#bf-menu-btn[aria-expanded=true] [data-icon-bars]{display:none!important}
#bf-menu-btn[aria-expanded=true] [data-icon-close]{display:block}
/* The open menu lies over the page under the sticky header. The header's backdrop-filter
   makes it the containing block of a fixed child, so the menu is absolute below it and
   sized to the rest of the screen; the page behind does not scroll. */
#bf-mobile-nav{position:absolute;top:100%;inset-inline:0;height:calc(100vh - 64px);height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;background:#F7F6F2;z-index:49;box-shadow:0 12px 24px -12px rgba(20,33,29,.25)}
html.bf-menu-open,html.bf-menu-open body{overflow:hidden}

/* Hero: below 640px the phone stands under the laptop instead of over its screen. */
@media(max-width:639px){
  [data-hero-phone]{position:relative!important;inset:auto!important;width:200px!important;margin:24px auto 0;border-radius:28px!important}
  /* Arabic rows are taller: the product screens grow to their rows instead of cutting the last one. */
  html[dir=rtl] [data-screen]{aspect-ratio:auto!important}
}

/* Phones: tap targets of at least 44px, and no copy under 14px (product mock-ups excepted). */
@media(max-width:639px){
  footer a,[data-spy-link]{min-height:44px!important;display:inline-flex!important;align-items:center}
  main section [data-reveal]>a,main section [data-reveal]>div>a,main a[style*="display:inline-flex"]{min-height:44px;display:inline-flex;align-items:center}
  /* contact links keep wrapping (a long address must not leave its card) */
  main a[href^="mailto:"],main a[href^="tel:"]{display:inline-block;min-height:44px;padding-block:10px}
  input[type=range]{height:44px!important}
  #bf-lang-btn,[data-trial-hd]{font-size:14px!important}
  :is([style*="font-size:13px"],[style*="font-size:12px"],[style*="font-size:11px"],[style*="font-size:11.5px"],[style*="font-size:13.5px"]):not(:is([data-screen],[data-tilt],[aria-hidden=true]) *):not([data-screen],[data-tilt]){font-size:14px!important}
}
@media(max-width:419px){[data-wide]{display:none!important}}
@media(max-width:1149px){[data-hd]{display:none!important}}
@media(min-width:1150px){[data-hm]{display:none!important}}
@media(min-width:420px){[data-narrow]{display:none!important}}
@media(max-width:1023px){[data-desk]{display:none!important}}
@media(min-width:1024px){[data-mob]{display:none!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}