/* ============================================================================
   itizan.sa — إتزان المنظومة
   Built on the ITIZAN brand system. THE ANGLE (1:9 / 6.3402deg) governs every
   edge; the cyan appears only on a horizon seam.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root{
  --navy-900:#03202C; --navy-800:#052E3D; --navy-700:#073B4F; --navy-600:#0B5570;
  --navy-500:#10708F; --navy-300:#6BB0C7; --navy-200:#A6CEDD; --navy-100:#D3E6EE;
  --sand-50:#FAF9F7; --sand-100:#F1EFEA; --sand-200:#E5E2DC; --sand-300:#D5D1C9;
  --sand-500:#9A958B; --sand-600:#726E66; --sand-700:#53504A;
  --cyan:#41B8EA; --cyan-300:#97D8F4; --cyan-600:#2E9BCB; --cyan-700:#1B7BA6;

  --bg:var(--sand-200); --surface:#FFFFFF; --fg:#062330;
  --fg-2:#53504A; --fg-3:#726E66;
  --line:rgba(7,59,79,.14); --line-2:rgba(7,59,79,.26);

  --ar:'Alexandria',system-ui,-apple-system,'Segoe UI',sans-serif;
  --en:'Archivo',system-ui,sans-serif;
  --bl:'Archivo Black','Archivo',system-ui,sans-serif;

  --angle:6.3402deg;
  --nav-h:78px;
  --r-sm:4px; --r-md:8px; --r-lg:14px; --r-pill:999px;
  --ease:cubic-bezier(.4,0,.2,1);
  --settle:cubic-bezier(.2,.8,.2,1);
  --wrap:1240px;
  --sh-md:0 2px 4px rgba(3,32,44,.04), 0 10px 30px rgba(3,32,44,.07);
  --sh-lg:0 4px 8px rgba(3,32,44,.05), 0 28px 70px rgba(3,32,44,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px);
  -webkit-text-size-adjust:100%;
  /* clip, not hidden: `hidden` on html turns it into a scroll container and can
     break position:sticky/fixed children. The reveal animation rotates elements
     by THE ANGLE, which widens their bounding box past the viewport. */
  overflow-x:clip;
}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:400 17px/1.85 var(--ar);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2.5px solid var(--cyan);outline-offset:3px;border-radius:2px}
::selection{background:var(--cyan);color:#04222E}

.wrap{width:min(var(--wrap),100% - 44px);margin-inline:auto}
@media(max-width:600px){.wrap{width:min(var(--wrap),100% - 30px)}}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.22;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(19px,2vw,23px);line-height:1.4}
p{margin:0}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.95;color:var(--fg-2);max-width:60ch}
.num{font-family:var(--en);font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}

/* the eyebrow — Arabic is never letter-spaced */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:500;color:var(--fg-3);letter-spacing:0;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none}
.on-dark .eyebrow{color:rgba(241,239,234,.62)}

.sec{padding-block:clamp(64px,8vw,116px)}
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4vw,54px)}
.sec-head h2{margin:16px 0 0}
.sec-head .lede{margin-top:18px}

/* the level rule — hairline gaining mass, on THE ANGLE */
.rule{position:relative;height:5px;border:0;margin:26px 0 0;overflow:hidden;max-width:320px}
.rule::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to left,rgba(7,59,79,.13) 0%,rgba(7,59,79,.13) 52%,var(--cyan) 100%);
  clip-path:polygon(0 0,100% 42%,100% 100%,0 62%);
}

/* ------------------------------------------------------------------ nav */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:26px;
  padding-inline:clamp(15px,3vw,34px);
  transition:height .28s var(--ease),background .28s var(--ease),
             box-shadow .28s var(--ease),backdrop-filter .28s var(--ease);
}
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  opacity:0;transition:opacity .28s var(--ease);
}
.nav.is-stuck{height:64px;box-shadow:0 1px 0 var(--line),0 8px 26px rgba(3,32,44,.06)}
.nav.is-stuck::before{opacity:1}
/* Two logo files cross-faded: the navy lockup is invisible on the navy hero,
   and the white one is invisible once the bar picks up its light background. */
.nav__brand{position:relative;display:block;height:32px;transition:height .28s var(--ease)}
.nav.is-stuck .nav__brand{height:27px}
.nav__logo{height:100%;width:auto;transition:opacity .28s var(--ease)}
.nav__logo--dark{position:absolute;inset-block-start:0;inset-inline-start:0;opacity:0}
.nav.is-stuck .nav__logo--light{opacity:0}
.nav.is-stuck .nav__logo--dark{opacity:1}

/* over the hero the bar is transparent, so its own ink must be light */
.nav:not(.is-stuck) .nav__links a{color:rgba(241,239,234,.8)}
.nav:not(.is-stuck) .nav__links a:hover{color:#fff}
.nav:not(.is-stuck) .nav__links a.is-active{color:#fff}
/* must out-specify the rule above (it matches `.nav__links a` too, and an
   equal-specificity CTA rule loses — that painted sand text on a sand button) */
.nav:not(.is-stuck) .nav__links a.nav__cta{background:var(--sand-100);color:var(--navy-900)}
.nav:not(.is-stuck) .nav__links a.nav__cta:hover{background:#fff;color:var(--navy-900)}
.nav:not(.is-stuck) .nav__burger{border-color:rgba(241,239,234,.36)}
.nav:not(.is-stuck) .nav__burger span{background:var(--sand-100)}
.nav__links{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav__links a{
  position:relative;padding:9px 13px;border-radius:var(--r-sm);
  font-size:15px;color:var(--fg-2);transition:color .18s var(--ease);
}
.nav__links a:hover{color:var(--fg)}
.nav__links a.is-active{color:var(--navy-700);font-weight:500}
.nav__links a.is-active::after{
  content:"";position:absolute;inset-inline:11px;bottom:2px;height:2.5px;
  background:var(--cyan);border-radius:2px;
  transform:rotate(calc(var(--angle) * -1));
}
.nav__cta{margin-inline-start:12px}
.nav__burger{
  display:none;margin-inline-start:auto;width:44px;height:44px;border:1px solid var(--line-2);
  background:transparent;border-radius:var(--r-sm);position:relative;
}
.nav__burger span{
  position:absolute;inset-inline:11px;height:2px;background:var(--fg);border-radius:2px;
  transition:transform .3s var(--settle),opacity .2s var(--ease);
}
.nav__burger span:nth-child(1){top:15px}
.nav__burger span:nth-child(2){top:21px}
.nav__burger span:nth-child(3){top:27px}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:980px){
  .nav__burger{display:block}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;padding:14px 18px 26px;background:var(--surface);
    box-shadow:var(--sh-lg);margin:0;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .24s var(--ease),transform .24s var(--settle);
  }
  .nav.is-open .nav__links{opacity:1;transform:none;pointer-events:auto}
  .nav__links a{padding:14px 10px;font-size:17px;border-bottom:1px solid var(--line)}
  .nav__links a.is-active::after{display:none}
  .nav__cta{margin:16px 0 0}
  /* the open panel is a light surface even while the bar is still over the hero */
  .nav:not(.is-stuck).is-open .nav__links a{color:var(--fg-2)}
  .nav:not(.is-stuck).is-open .nav__links a:hover,
  .nav:not(.is-stuck).is-open .nav__links a.is-active{color:var(--navy-700)}
  .nav:not(.is-stuck).is-open .nav__cta{background:var(--navy-700);color:#fff}
}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:50px;padding:0 24px;border-radius:var(--r-sm);border:1.5px solid transparent;
  font-size:16px;font-weight:500;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--settle);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--navy-700);color:#fff}
.btn--primary:hover{background:var(--navy-600)}
.btn--light{background:var(--sand-100);color:var(--navy-900)}
.btn--light:hover{background:#fff}
.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost:hover{border-color:var(--navy-700)}
.on-dark .btn--ghost{border-color:rgba(241,239,234,.34);color:var(--sand-100)}
.on-dark .btn--ghost:hover{border-color:var(--sand-100)}
.btn--wa{background:#25D366;color:#042B12}
.btn--wa:hover{background:#1FBE5A}
.btn--sm{height:42px;padding:0 17px;font-size:15px}
.btn--lg{height:56px;padding:0 30px;font-size:17px}
.btn__i{width:19px;height:19px;flex:none}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy-900);color:var(--sand-100);
  padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));
  padding-bottom:clamp(190px,20vw,280px);
}
.hero__bg{
  position:absolute;inset:0;z-index:0;opacity:.5;
  background:url('../img/03-orbit-field--dark-on-navy.svg') repeat;background-size:1080px 1080px;
}
.hero__mark{
  position:absolute;z-index:0;inset-inline-start:-22%;bottom:-24%;
  width:min(760px,78vw);opacity:.085;pointer-events:none;
}
.hero > .wrap{position:relative;z-index:2}
.hero h1{
  font-size:clamp(35px,6.2vw,80px);line-height:1.1;font-weight:600;
  margin:20px 0 0;max-width:15ch;
}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero .lede{color:rgba(241,239,234,.74);margin:26px 0 0;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:38px}

/* THE HORIZON — the hero's bottom edge is a 1:9 seam, never a flat line */
.hero__cut{
  position:absolute;z-index:3;inset-inline:-24%;bottom:-170px;height:340px;
  background:var(--bg);border-top:3px solid var(--cyan);
  transform:rotate(calc(var(--angle) * -1));transform-origin:50% 50%;
}

.scrollcue{
  position:absolute;z-index:4;inset-inline-end:clamp(18px,4vw,54px);bottom:clamp(150px,17vw,220px);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:12px;color:rgba(241,239,234,.5);
}
.scrollcue i{
  display:block;width:1.5px;height:44px;background:linear-gradient(rgba(241,239,234,.45),transparent);
  animation:cue 2.2s var(--ease) infinite;transform-origin:top;
}
@keyframes cue{0%{transform:scaleY(.25);opacity:0}45%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@media(max-width:800px){.scrollcue{display:none}}

/* the wedge below the seam is dead space — keep it tight on small screens */
@media(max-width:760px){
  .hero{padding-bottom:132px}
  .hero__cut{bottom:-96px;height:200px;inset-inline:-40%}
}

/* ------------------------------------------------------------------ stats */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;   /* UA <dl> margin */
  background:var(--line);border-block:1px solid var(--line);
  overflow:hidden;   /* contains the rotated reveal of its full-bleed children */
}
.stats > div{background:var(--bg);padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px)}
.stats dt{font-size:14px;color:var(--fg-3);margin:0 0 10px}
.stats dd{margin:0;font:600 clamp(30px,4vw,46px)/1 var(--en);font-variant-numeric:tabular-nums;
  color:var(--navy-700);letter-spacing:-.02em}
.stats dd small{font-size:.48em;color:var(--fg-3);margin-inline-start:2px}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.g3,.g4{grid-template-columns:1fr}}

.card{
  position:relative;background:var(--surface);border:1px solid var(--line);
  border-bottom:3.4px solid var(--navy-700);border-radius:var(--r-md);
  padding:26px 24px 28px;min-height:230px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--settle),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-bottom-color:var(--cyan)}
.card__i{width:30px;height:30px;color:var(--navy-700);margin-bottom:auto}
.card__i img{width:100%;height:100%}
.card h3{margin:0}
.card p{color:var(--fg-2);font-size:15.5px;line-height:1.8}
.card__n{
  position:absolute;inset-block-start:20px;inset-inline-end:22px;
  font:600 13px var(--en);color:var(--sand-300);font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------ approach */
.steps{counter-reset:s;display:grid;gap:2px;background:var(--line);
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
.step{
  background:var(--surface);padding:26px clamp(20px,3vw,34px);
  display:grid;grid-template-columns:74px 1fr;gap:22px;align-items:start;
  transition:background .25s var(--ease);
}
.step:hover{background:var(--sand-50)}
.step__n{
  font:600 15px var(--en);color:var(--cyan-700);font-variant-numeric:tabular-nums;
  padding-top:5px;position:relative;
}
.step__n::after{
  content:"";position:absolute;inset-inline-start:0;top:34px;width:34px;height:2.5px;
  background:var(--cyan);transform:rotate(calc(var(--angle) * -1));transform-origin:right center;
}
.step h3{margin:0 0 8px}
.step p{color:var(--fg-2);font-size:15.5px;line-height:1.8;max-width:70ch}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:10px}.step__n::after{display:none}}

/* ------------------------------------------------------------------ dark band */
.band{position:relative;overflow:hidden;isolation:isolate;
  background:var(--navy-700);color:var(--sand-100)}
.band__bg{position:absolute;inset:0;z-index:0;opacity:.6;
  background:url('../img/01-level-field--dark-on-navy.svg') repeat;background-size:864px 192px}
.band > .wrap{position:relative;z-index:2}
.band h2,.band h3{color:#fff}
.band .lede{color:rgba(241,239,234,.72)}
.vm{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
@media(max-width:900px){.vm{grid-template-columns:1fr}}
.vm__item{border-inline-start:3.4px solid rgba(241,239,234,.2);padding-inline-start:22px;
  transition:border-color .3s var(--ease)}
.vm__item + .vm__item{margin-top:22px}
.vm__item:first-child{border-inline-start-color:var(--cyan)}
.vm__item h4{font-size:15px;color:#fff;margin:0 0 7px}
.vm__item p{font-size:15.5px;color:rgba(241,239,234,.72);line-height:1.8}

/* ------------------------------------------------------------------ balance check */
.check{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,44px);box-shadow:var(--sh-md);max-width:840px;margin-inline:auto}
.check__q{display:none}
.check__q.is-on{display:block;animation:qin .42s var(--settle) both}
@keyframes qin{from{opacity:0;transform:translateY(10px) rotate(var(--angle))}to{opacity:1;transform:none}}
.check__bar{height:5px;border-radius:3px;background:var(--sand-200);overflow:hidden;margin-bottom:26px}
.check__bar i{display:block;height:100%;background:var(--cyan);border-radius:3px;
  transition:width .45s var(--settle)}
.check__meta{display:flex;justify-content:space-between;font-size:13px;color:var(--fg-3);margin-bottom:10px}
.check h3{font-size:clamp(19px,2.4vw,26px);margin:0 0 22px;line-height:1.5}
.opts{display:grid;gap:10px}
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:start;
  padding:16px 18px;border:1.5px solid var(--line);background:var(--sand-50);
  border-radius:var(--r-sm);font-size:16px;color:var(--fg);
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .18s var(--settle);
}
.opt:hover{border-color:var(--navy-300);background:#fff;transform:translateX(-3px)}
[dir=rtl] .opt:hover{transform:translateX(3px)}
.opt b{
  flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);
  display:grid;place-items:center;font:600 12px var(--en);color:var(--fg-3);
}
.opt:hover b{border-color:var(--cyan);color:var(--cyan-700)}

.check__result{display:none}
.check__result.is-on{display:block;animation:qin .5s var(--settle) both}
.score{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.score b{font:600 clamp(48px,8vw,74px)/1 var(--en);color:var(--navy-700);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.score span{font-size:17px;color:var(--fg-3)}
.check__result p{color:var(--fg-2);margin:16px 0 0;font-size:16px;line-height:1.85}
.check__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ------------------------------------------------------------------ contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;color:var(--fg-2)}
.field label span{color:var(--cyan-700)}
.input,.textarea,select.input{
  width:100%;padding:14px 16px;font:400 16px var(--ar);color:var(--fg);
  background:var(--surface);border:1.5px solid var(--line);border-bottom-width:2.5px;
  border-radius:var(--r-sm);transition:border-color .18s var(--ease);
}
.textarea{min-height:124px;resize:vertical;line-height:1.75}
.input:focus,.textarea:focus{outline:none;border-color:var(--navy-600);border-bottom-color:var(--cyan)}
.input::placeholder,.textarea::placeholder{color:var(--sand-500)}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:#B23A3A}
.err{font-size:13px;color:#B23A3A;min-height:0}

.ways{display:grid;gap:12px}
.way{
  display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .25s var(--settle),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.way:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--line-2)}
.way__i{flex:none;width:46px;height:46px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--sand-100)}
.way__i svg{width:22px;height:22px}
.way b{display:block;font-size:16px;font-weight:600}
.way span{display:block;font-size:14.5px;color:var(--fg-3);direction:ltr;text-align:start}
[dir=rtl] .way span{text-align:right}
.way--wa .way__i{background:#E7F9EE}
.way--ig .way__i{background:#FCEBF3}

/* ------------------------------------------------------------------ footer */
.foot{position:relative;overflow:hidden;background:var(--navy-900);color:rgba(241,239,234,.62);
  padding-block:clamp(48px,6vw,80px) 28px}
.foot__bg{position:absolute;inset:0;z-index:0;opacity:.55;
  background:url('../img/05-grain--dark-on-navy.svg') repeat;background-size:126px 14px}
.foot > .wrap{position:relative;z-index:2}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.25fr;gap:clamp(22px,3vw,46px)}
@media(max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{color:#fff;font-size:14px;margin:0 0 14px}
.foot a{display:block;padding:6px 0;font-size:15px;transition:color .18s var(--ease)}
.foot a:hover{color:#fff}
.foot__bar{margin-top:clamp(32px,4vw,52px);padding-top:22px;border-top:1px solid rgba(241,239,234,.14);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px}
.foot__soc{display:flex;gap:10px;margin-top:18px}
.foot__soc a{width:40px;height:40px;border-radius:var(--r-sm);border:1px solid rgba(241,239,234,.2);
  display:grid;place-items:center;padding:0;transition:background .2s var(--ease),border-color .2s var(--ease)}
.foot__soc a:hover{background:rgba(241,239,234,.1);border-color:rgba(241,239,234,.4)}
.foot__soc svg{width:18px;height:18px}

/* ------------------------------------------------------------------ float WA */
.wa-float{
  position:fixed;z-index:70;inset-inline-end:20px;bottom:20px;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.42);
  transform:scale(0);transition:transform .34s var(--settle),box-shadow .2s var(--ease);
}
.wa-float.is-on{transform:scale(1)}
.wa-float:hover{box-shadow:0 12px 34px rgba(37,211,102,.55)}
.wa-float svg{width:29px;height:29px}

/* ------------------------------------------------------------------ reveal
   Gated behind .js (stamped by an inline script in <head>). Without JavaScript
   — or if the observer never fires — the content simply renders. Never hide
   real content behind an animation that might not run. */
.js .rv{opacity:0;transform:translateY(18px) rotate(var(--angle));
  transition:opacity .7s var(--settle),transform .7s var(--settle)}
.js .rv.is-in{opacity:1;transform:none}
.js .rv-2{transition-delay:.09s}.js .rv-3{transition-delay:.18s}
.js .rv-4{transition-delay:.27s}.js .rv-5{transition-delay:.36s}.js .rv-6{transition-delay:.45s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .wa-float{transform:scale(1)}
}

/* ------------------------------------------------------------------ misc */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:14px;top:-60px;z-index:100;background:var(--navy-700);
  color:#fff;padding:12px 18px;border-radius:var(--r-sm);transition:top .2s var(--ease)}
.skip:focus{top:14px}
/* physical left/translate — transforms are not direction-aware, so a logical
   inset here would land the toast off-centre in RTL */
.toast{
  position:fixed;z-index:90;left:50%;bottom:26px;max-width:calc(100vw - 32px);
  transform:translate(-50%,90px);
  background:var(--navy-900);color:#fff;padding:14px 22px;border-radius:var(--r-sm);
  font-size:15px;line-height:1.6;box-shadow:var(--sh-lg);opacity:0;pointer-events:none;
  transition:transform .38s var(--settle),opacity .3s var(--ease);
}
.toast.is-on{transform:translate(-50%,0);opacity:1}