*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* font-family is the ONE token from landing/partials/type.blade.php: --font-body is
'Roboto',system-ui,sans-serif on an English page and the Arabic stack on an Arabic
one, so this rule is the whole language switch for every element that does not name
a face of its own. The literal fallback is not decoration -- this stylesheet is also
linked by errors/forsa.blade.php with a static ?v=, so if it is ever served without
that partial the English stack still resolves rather than collapsing to the UA font. */
body{margin:0;background:#F2F5F9;color:#022040;font-family:var(--font-body,'Roboto',system-ui,sans-serif);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#012F6A;text-decoration:none}
a:hover{color:#22ACBB}
::selection{background:#7BC6FF;color:#022040}
[data-appphone]{transform-origin:top center}
@media (max-width:460px){[data-appphone]{transform:scale(.95);margin-bottom:-42px}}
@media (max-width:410px){[data-appphone]{transform:scale(.86);margin-bottom:-117px}}
@media (max-width:370px){[data-appphone]{transform:scale(.77);margin-bottom:-192px}}
@media (max-width:335px){[data-appphone]{transform:scale(.66);margin-bottom:-283px}}
[dir="rtl"] [data-disp]{letter-spacing:0!important;line-height:1.5!important}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4{letter-spacing:0!important;line-height:1.5!important}
[dir="rtl"] p,[dir="rtl"] li,[dir="rtl"] label{line-height:1.75!important}
[dir="rtl"] *{letter-spacing:normal!important}
[dir="rtl"] [style*="nowrap"]{white-space:normal!important}
[dir="rtl"] [style*="ellipsis"]{white-space:nowrap!important}
[dir="rtl"] [style*="line-through"]{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] [data-cd],[dir="rtl"] [data-count],[dir="rtl"] time{direction:ltr!important;unicode-bidi:isolate!important;display:inline-block}
[dir="rtl"] [style*="margin-left:auto"],[dir="rtl"] [style*="margin-left: auto"]{margin-left:0!important;margin-right:auto!important}
[dir="rtl"] [style*="text-align:left"],[dir="rtl"] [style*="text-align: left"]{text-align:right!important}
[dir="rtl"] [style*="text-align:right"],[dir="rtl"] [style*="text-align: right"]{text-align:left!important}
[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{text-align:right}
[dir="rtl"] input[placeholder*="+962"],[dir="rtl"] input[type="email"]{direction:ltr;text-align:left}
[dir="rtl"] [data-g="how"][data-role="dot"][data-i="0"]{left:90%!important}
[dir="rtl"] [data-g="how"][data-role="dot"][data-i="1"]{left:70%!important}
[dir="rtl"] [data-g="how"][data-role="dot"][data-i="2"]{left:50%!important}
[dir="rtl"] [data-g="how"][data-role="dot"][data-i="3"]{left:30%!important}
[dir="rtl"] [data-g="how"][data-role="dot"][data-i="4"]{left:10%!important}
[data-jchip]:hover{border-color:#012F6A!important;color:#012F6A!important}
[data-onboard]>div{padding-inline-start:28px}
[data-onboard]>div:nth-child(4n+1){padding-inline-start:0}
@media (max-width:1000px){[data-onboard]{grid-template-columns:repeat(2,minmax(0,1fr))!important}[data-onboard]>div{padding-inline-start:28px}[data-onboard]>div:nth-child(2n+1){padding-inline-start:0}}
@media (max-width:560px){[data-onboard]{grid-template-columns:minmax(0,1fr)!important}[data-onboard]>div{padding-inline-start:0}}
[data-jcard]:hover{transform:translateY(-5px);border-color:rgba(1,47,106,.2)!important;box-shadow:0 30px 54px -30px rgba(1,47,106,.34)}
[data-jcard]:hover [data-jarrow]{background:#012F6A!important;border-color:#012F6A!important;color:#fff!important;transform:translateX(3px)}
[dir="rtl"] [data-jcard]:hover [data-jarrow]{transform:translateX(-3px)}
[dir="rtl"] [data-jcard] [data-jarrow]{margin-left:0!important;margin-right:auto!important}
[data-jthumb] image-slot{font-size:9px}
[data-irscroll]{scrollbar-width:none;-ms-overflow-style:none}
[data-irscroll]::-webkit-scrollbar{width:0;height:0;display:none}
html{color-scheme:light;scrollbar-width:thin;scrollbar-color:#22ACBB #EAF1F6}
html::-webkit-scrollbar{width:10px;height:10px;background:#EAF1F6}
html::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important}
html::-webkit-scrollbar-track,html::-webkit-scrollbar-track-piece{background:#EAF1F6}
html::-webkit-scrollbar-thumb{background:#22ACBB;border-radius:99px;border:2px solid transparent;background-clip:content-box;min-height:48px}
html::-webkit-scrollbar-thumb:hover{background:#7BC6FF;border:2px solid transparent;background-clip:content-box}
html::-webkit-scrollbar-thumb:active{background:#012F6A;border:2px solid transparent;background-clip:content-box}
html::-webkit-scrollbar-corner{background:transparent}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font:inherit}
@keyframes fx-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fx-marqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes fx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes fx-bob{0%,100%{transform:translateY(0) rotate(-2.5deg)}50%{transform:translateY(-12px) rotate(2.5deg)}}
@keyframes fx-ping{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
@keyframes fx-beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.75}}
@keyframes fx-swap{0%,44%{opacity:1;transform:translateY(0)}50%{opacity:0;transform:translateY(-8px)}56%,100%{opacity:1;transform:translateY(0)}}
@keyframes fx-sweep{from{transform:translateX(-100%)}to{transform:translateX(220%)}}
/* ---- hoisted from the design's 157 style-hover attributes ----
support.js injected these as per-element pseudo-classes at render time.
!important because each one overrides an inline style on the same node. */
.fh1:hover{background:#022040 !important;color:#fff !important;transform:translateY(-2px) !important}
.fh2:hover{border-color:#012F6A !important;background:#fff !important}
.fh3:hover{background:#012F6A !important}
.fh4:hover{background:#22ACBB !important}
.fh5:hover{box-shadow:inset 0 0 0 1.5px rgb(97,186,187) !important}
.fh6:hover{box-shadow:0 8px 20px rgba(1,47,106,.16) !important}
.fh7:hover{color:#012F6A !important}
.fh8:hover{color:#7BC6FF !important}
.fh9:hover{color:#22ACBB !important}
.fh10:hover{transform:translateY(-6px) !important;box-shadow:0 30px 56px -30px rgba(1,47,106,.35) !important}
.fh11:hover{border-color:#012F6A !important}
.fh12:hover{transform:translateY(-2px) !important;opacity:.85 !important}
.fh13:hover{gap:16px !important;border-color:#22ACBB !important;color:#22ACBB !important}
.fh14:hover{background:#22ACBB !important;color:#fff !important}
.fh15:hover{background:#012F6A !important;color:#fff !important}
.fh16:hover{border-color:#22ACBB !important;color:#22ACBB !important}
.fh17:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important}
.fh18:hover{background:#7BC6FF !important;color:#012F6A !important}
.fh19:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important;color:#fff !important}
.fh20:hover{background:#022040 !important;color:#fff !important}
.fh21:hover{background:#22ACBB !important;color:#fff !important;transform:translateY(-2px) !important}
.fh22:hover{transform:translateY(-4px) !important;border-color:#22ACBB !important;background:#fff !important}
.fh23:hover{border-color:#012F6A !important;background:rgba(1,47,106,.04) !important}
.fh24:hover{color:#22ACBB !important;gap:15px !important}
.fh25:hover{color:#22ACBB !important;gap:14px !important}
.fh26:hover{border-color:#012F6A !important;background:rgba(1,47,106,.05) !important}
.fh27:hover{background:rgba(1,47,106,.07) !important}
[data-modal][hidden]{display:none!important}
/* ========================================================== responsive nav
The nav is one 84px flex row — logo, six links, a language pill, a "More"
dropdown and a CTA — and it never collapsed. It needs roughly 800px, so on a
phone the links, the dropdown and the CTA sat outside the viewport, and
body{overflow-x:hidden} at the top of this file meant they were CUT OFF
rather than reachable: no scrollbar, no menu, no way to get to them.
landing.js injects [data-navburger] and [data-navdrawer]. Every rule below is
scoped to :has([data-navburger]) so that if that script never runs the nav is
left exactly as it is today rather than hidden with nothing to open it.
!important throughout, for the same reason as the .fh* rules above: each one
overrides an inline style on the same node. */
@media (max-width:900px){
[data-nav]:has([data-navburger]){height:64px!important;gap:10px!important;padding:0 16px!important}
[data-nav]:has([data-navburger]) [data-navlogo]{height:24px!important}
/* the six-link row and the More dropdown move into the drawer */
[data-nav]:has([data-navburger]) > div:has(> [data-navlink]){display:none!important}
[data-nav]:has([data-navburger]) > div > div:has(> [data-act="toggleMore"]){display:none!important}
[data-navburger]{display:inline-flex!important}
}
/* Below this the bar cannot hold the CTA as well; it is the first entry in the
drawer instead, so nothing is lost. */
@media (max-width:460px){
[data-nav]:has([data-navburger]) [data-navcta]{display:none!important}
}
/* The button itself: 44px, which is the smallest comfortable touch target. */
[data-navburger]{display:none;width:44px;height:44px;flex:0 0 44px;flex-direction:column;
align-items:center;justify-content:center;
border-radius:999px;border:1px solid rgba(1,47,106,.16);background:#fff;color:#012F6A;padding:0}
[data-navburger]:hover{border-color:#22ACBB;color:#22ACBB}
[data-navburger] span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;
transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s}
[data-navburger] span+span{margin-top:4px}
[data-navburger][aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
[data-navburger][aria-expanded="true"] span:nth-child(2){opacity:0}
[data-navburger][aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* the flex row above would lay the three bars out side by side */
[data-navburger] span{flex:0 0 auto}
/* The drawer. JS sets `top` from the bar's real height, so it stays correct
whatever that height animates to on scroll. */
[data-navdrawer]{position:fixed;left:0;right:0;z-index:109;display:flex;flex-direction:column;gap:2px;
padding:10px 12px calc(14px + env(safe-area-inset-bottom));background:#fff;
border-bottom:1px solid rgba(1,47,106,.10);box-shadow:0 30px 54px -30px rgba(1,47,106,.34);
overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
[data-navdrawer][hidden]{display:none!important}
/* Motion. `hidden` is kept for the resting state so the drawer is out of the
tab order, but it cannot be transitioned — so the script lifts it first and
flips [data-open] on the next frame, and on close waits for this transition
before putting it back. */
[data-navdrawer]{opacity:0;transform:translateY(-10px);
transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1)}
[data-navdrawer][data-open]{opacity:1;transform:translateY(0)}
/* Each row arrives just after the one above it. The delay is only on the way
in: closing should feel immediate, not like waiting for a queue to drain. */
[data-navdrawer] > *{opacity:0;transform:translateY(-6px);
transition:opacity .001s,transform .001s}
[data-navdrawer][data-open] > *{opacity:1;transform:translateY(0);
transition:opacity .34s ease,transform .42s cubic-bezier(.16,1,.3,1)}
[data-navdrawer][data-open] > :nth-child(1){transition-delay:.02s}
[data-navdrawer][data-open] > :nth-child(2){transition-delay:.05s}
[data-navdrawer][data-open] > :nth-child(3){transition-delay:.08s}
[data-navdrawer][data-open] > :nth-child(4){transition-delay:.11s}
[data-navdrawer][data-open] > :nth-child(5){transition-delay:.14s}
[data-navdrawer][data-open] > :nth-child(6){transition-delay:.17s}
[data-navdrawer][data-open] > :nth-child(7){transition-delay:.20s}
[data-navdrawer][data-open] > :nth-child(8){transition-delay:.23s}
[data-navdrawer][data-open] > :nth-child(n+9){transition-delay:.26s}
/* the page you are on, so the menu says where you are */
[data-navdrawer] a[aria-current="page"]{background:rgba(1,47,106,.06);font-weight:700}
[data-navdrawer] a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:99px;
background:#22ACBB;margin-inline-start:auto}
[data-navdrawer] a,[data-navdrawer] button{display:flex;align-items:center;width:100%;min-height:48px;
padding:12px 14px;border-radius:12px;font-size:16px;font-weight:500;color:#012F6A;background:transparent;
border:0;text-align:start}
[data-navdrawer] a:hover,[data-navdrawer] button:hover{background:rgba(1,47,106,.07)}
[data-navdrawer] hr{width:100%;height:1px;border:0;margin:8px 0;background:rgba(1,47,106,.10)}
[data-navdrawer] [data-navdrawercta]{justify-content:center;background:#012F6A;color:#fff;font-weight:700;margin-top:4px}
[data-navdrawer] [data-navdrawercta]:hover{background:#022040;color:#fff}
[data-navbackdrop]{position:fixed;inset:0;z-index:108;background:rgba(2,32,64,.38);border:0;padding:0}
[data-navbackdrop][hidden]{display:none!important}
[data-navbackdrop]{opacity:0;transition:opacity .26s ease;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
[data-navbackdrop][data-open]{opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* while the drawer is open the page behind it must not scroll */
body[data-navopen]{overflow:hidden!important}
@media (min-width:901px){
[data-navburger],[data-navdrawer],[data-navbackdrop]{display:none!important}
}
/* ------------------------------------------------- form fields on a phone
The design sets 14.5px on every input, textarea and select. iOS Safari zooms
the page in whenever a field smaller than 16px takes focus, and it does not
zoom back out: the visitor taps "Your email" and the whole site is suddenly
magnified and scrolled sideways, which is one of the things that reads as
"the mobile site is broken". 16px is the threshold, and it applies only
where the zoom happens — the desktop design keeps its 14.5px. */
@media (max-width:900px){
input,textarea,select{font-size:16px!important}
}
/* ===================================================== mobile section layouts
Four sections were laid out with EXPLICIT track counts, so unlike the
auto-fit grids above they could never collapse: repeat(5,1fr) for the steps,
a 12-column grid for the four cards, and a 190px+1fr pair for the surplus
story. At 390px that gave 70px columns with one word per line.
landing.js tags each one (nothing is hand-edited into the generated blades)
and these rules restructure them below 900px only. Desktop is untouched. */
/* -- 01 Five steps: a swipeable deck ------------------------------------
Five steps stacked would be a very long scroll, so on a phone they become
one card at a time. The section already HAS a dot rail with a marker that
slides between the five positions, so that is the pagination — swiping
moves it, and tapping a dot brings its card. No new furniture. */
@media (max-width:900px){
[data-fx-steps]{
display:flex!important;grid-template-columns:none!important;
gap:12px!important;align-items:stretch!important;
overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;
margin:0 -20px!important;padding:4px 20px 12px!important;
scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
[data-fx-steps]::-webkit-scrollbar{width:0;height:0;display:none}
[data-fx-steps] > *{
flex:0 0 84%!important;scroll-snap-align:center;scroll-snap-stop:always;
margin-top:0!important; /* the desktop stagger */
transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .45s}
/* The card off-centre sits back a little, so the deck reads as one-at-a-time.
OPACITY ONLY: pick() writes an inline transform on the active panel to lift
it, and an inline transform beats a stylesheet — a scale here would either
be ignored or fight it. The lift IS the active treatment, so this only has
to say "not this one". */
[data-fx-steps] > *{opacity:.68}
[data-fx-steps] > *[data-fx-near]{opacity:1}
/* the rail becomes a control rather than decoration */
[data-fx-rail] [data-role="dot"]{cursor:pointer}
[data-fx-rail]{touch-action:manipulation}
}
/* -- 02 Four ways to save: one card per row -----------------------------
A 12-column grid put two content-heavy cards per row at 165px each, which
broke every display heading one word per line and clipped the live
countdown mid-digit. */
@media (max-width:900px){
[data-find-grid]{grid-template-columns:minmax(0,1fr)!important}
[data-find-grid] > *{grid-column:1/-1!important}
}
/* -- 06 Surplus: stacked, story first -----------------------------------
A 190px rail beside a ~150px column. Stacked in source order the timeline
would come before the headline it belongs to, so the story is ordered
first and the rail follows it. */
@media (max-width:900px){
[data-fx-surplus]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
[data-fx-surplus] > :nth-child(1){order:2}
[data-fx-surplus] > :nth-child(2){order:1}
}
/* -- Legal tabs: one row that scrolls ------------------------------------
Three pills inside a pill-shaped container wrapped onto two lines, which
left the container an awkward shape. One row that scrolls sideways keeps
the shape and never wraps a label, in either language. */
@media (max-width:900px){
[data-fx-legaltabs]{
flex-wrap:nowrap!important;width:100%!important;max-width:100%;
overflow-x:auto;scroll-snap-type:x proximity;
scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
[data-fx-legaltabs]::-webkit-scrollbar{width:0;height:0;display:none}
[data-fx-legaltabs] > *{flex:0 0 auto;white-space:nowrap;scroll-snap-align:center}
}
/* Anyone who has asked for less motion gets the same menu without the travel. */
@media (prefers-reduced-motion:reduce){
[data-navdrawer],[data-navdrawer] > *,[data-navbackdrop],
[data-navburger] span,[data-fx-steps] > *{
transition-duration:.01ms!important;transition-delay:0s!important;
animation-duration:.01ms!important}
[data-navdrawer],[data-navdrawer] > *{transform:none!important}
[data-fx-steps]{scroll-behavior:auto!important}
}