/* PopAutomate marketing site: homepage, /en, /tools (tools.css builds on these tokens).
   Spec: docs/homepage/DESIGN.md + mockup.html. Logical properties only, so one file serves RTL and LTR;
   physical values appear only inside transforms or an explicit direction:ltr island (commented). */

/* ===================== TOKENS ===================== */
:root{
  color-scheme:dark;
  --s-bg:#161616;--s-bg-alt:#111111;--s-bg-glow:#1F1E1E;--s-surface:#1E1E1F;--s-surface-2:#262729;--s-card:#0C0D0D;
  --s-line:#2A2B2D;--s-line-strong:#6E7378;
  --t-1:#FFFFFF;--t-2:#C4C9CE;--t-3:#9AA0A6;
  --mint:#B4F1E8;--mint-hover:#CFF7F1;--mint-active:#9FE6DB;--mint-ink:#0B1F1C;
  --mint-soft:rgba(180,241,232,.12);--mint-line:rgba(180,241,232,.32);
  --teal:#0B7A6C;--dot:#6BCB5A;--dot-glow:rgba(107,203,90,.35);--amber:#FFC978;
  --w-bg:#FFFFFF;--w-ink:#111111;--w-ink-2:#4A4F55;--w-btn:#171717;--w-line:#111111;
  --focus:#B4F1E8;--focus-on-light:#0B7A6C;
  --ring:0 0 0 2px var(--s-bg),0 0 0 4px var(--focus);
  --ring-light:0 0 0 2px #fff,0 0 0 4px var(--focus-on-light);
  --font:"Tajawal","Tajawal Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fw-regular:400;--fw-medium:500;--fw-bold:700;--fw-heavy:800;
  --fs-h1:clamp(1.875rem,1.27rem + 2.48vw,3rem);
  --fs-h2:clamp(1.625rem,1.17rem + 1.86vw,2.5rem);
  --fs-h3:clamp(1.1875rem,1.08rem + .43vw,1.375rem);
  --fs-lead:clamp(1.0625rem,.99rem + .31vw,1.25rem);
  --fs-body:clamp(1rem,.97rem + .12vw,1.0625rem);
  --fs-sm:.9375rem;--fs-xs:.8125rem;
  --fs-stat:clamp(2rem,1.5rem + 2vw,3.25rem);
  --lh-tight:1.3;--lh-snug:1.45;--lh-body:1.8;--lh-ui:1.2;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;
  --section-y:clamp(64px,40px + 6vw,128px);
  --gutter:clamp(16px,8px + 2vw,32px);
  --r-xs:6px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-2xl:32px;--r-pill:999px;
  --sh-pill:0 10px 30px rgba(0,0,0,.35);
  --sh-card:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px rgba(0,0,0,.35);
  --sh-pop:0 20px 60px rgba(0,0,0,.45);
  --sh-shot:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  --w-max:1280px;--w-wide:1440px;--w-text:720px;--header-h:72px;
  --d-fast:150ms;--d-base:250ms;--d-slow:450ms;--d-marquee:40s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-header:40;--z-float:44;--z-sticky:45;--z-drawer:60;
  --grid-bg:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 40px);
}
@media (prefers-reduced-motion:reduce){
  :root{--d-fast:0ms;--d-base:0ms;--d-slow:0ms}
  *,*::before,*::after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;scroll-behavior:auto!important}
}

/* ===================== BASE ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--s-bg);color:var(--t-1);font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
.container{width:100%;max-width:calc(var(--w-max) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr-only{position:absolute!important;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:16px;top:-100px;z-index:100;background:var(--mint);color:var(--mint-ink);padding:12px 16px;border-radius:var(--r-sm);font-weight:700}
.skip:focus{top:16px}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
/* digits only: never put an Arabic unit ("9:00 م", "120 ر.س") inside .num, direction:ltr would show the unit first */
.num{font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate}
/* forward arrows: the icon points left (RTL forward); flip it on LTR pages */
[dir=ltr] .fwd,[dir=ltr] .arrow{transform:scaleX(-1)}

/* ===================== BUTTONS ===================== */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r-md);border:1px solid transparent;font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:var(--lh-ui);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--d-fast) var(--ease),border-color var(--d-fast) var(--ease),color var(--d-fast) var(--ease),transform var(--d-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--lg{--h:56px;padding:0 26px;font-size:1rem;border-radius:var(--r-lg)}
.btn--sm{--h:44px;padding:0 18px}
.btn--primary{background:var(--mint);color:var(--mint-ink)}
.btn--primary:hover{background:var(--mint-hover)}
.btn--primary:active{background:var(--mint-active)}
.btn--secondary{background:transparent;color:var(--t-1);border-color:var(--s-line-strong)}
.btn--secondary:hover{border-color:var(--t-1);background:rgba(255,255,255,.04)}
.btn--white{background:#fff;color:var(--w-ink)}
.btn--white:hover{background:#EDEFF1}
.btn--dark{background:var(--w-btn);color:#fff}
.btn--dark:hover{background:#2B2B2B}
.btn--outline-dark{background:#fff;color:var(--w-ink);border-color:var(--w-line)}
.btn--outline-dark:hover{background:#F2F3F4}
.on-light :focus-visible,.btn--white:focus-visible,.btn--platform:focus-visible{box-shadow:var(--ring-light)}
.btn--platform{--h:56px;background:#fff;color:var(--w-ink);border-radius:var(--r-lg);padding:0 20px 0 22px;padding-inline:22px 20px;font-size:1rem;gap:12px}
.btn--platform:hover{background:#F1FBF9;box-shadow:0 0 0 1px var(--mint) inset}
.btn--platform picture{flex:none}
.btn--platform .logo-salla{height:28px;width:auto}
.btn--platform .logo-zid{height:40px;width:auto;margin-block:-6px}
.btn--platform .arrow{width:16px;height:16px;color:var(--w-ink-2);transition:transform var(--d-fast) var(--ease)}
.btn--platform:hover .arrow{transform:translateX(-3px)} /* RTL forward = left */
[dir=ltr] .btn--platform:hover .arrow{transform:scaleX(-1) translateX(-3px)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md);border:1px solid var(--s-line);background:transparent;color:var(--t-1);cursor:pointer}
.icon-btn svg{width:18px;height:18px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--mint);font-weight:700;text-decoration:none}
.link-arrow svg{width:14px;height:14px}
.link-arrow:hover{text-decoration:underline}

/* ===================== HEADINGS ===================== */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--t-2);line-height:var(--lh-ui)}
.eyebrow::before{content:"";width:18px;height:8px;border-radius:var(--r-pill);background:var(--dot);box-shadow:0 0 12px var(--dot-glow)}
.sec-head{display:grid;gap:var(--sp-4);max-width:760px;margin-bottom:var(--sp-12)}
.sec-head h2{font-size:var(--fs-h2);font-weight:var(--fw-heavy);line-height:var(--lh-tight);text-wrap:balance}
.sec-head p{font-size:var(--fs-lead);color:var(--t-2);line-height:var(--lh-body);max-width:var(--w-text)}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head--flush{margin:0}
.section{padding-block:var(--section-y)}
.center-cta{display:flex;justify-content:center;margin-top:var(--sp-12)}

/* section reveal: only once site.js marks the page (content stays visible without JS) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--d-slow) var(--ease),transform var(--d-slow) var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ===================== HEADER ===================== */
.site-header{position:sticky;top:16px;z-index:var(--z-header);padding-inline:var(--gutter);margin-top:16px}
.pill{max-width:var(--w-max);margin-inline:auto;height:var(--header-h);background:var(--w-bg);color:var(--w-ink);border-radius:var(--r-lg);display:flex;align-items:center;gap:clamp(12px,-20px + 3vw,32px);padding-inline:var(--sp-6);transition:box-shadow var(--d-base) var(--ease)}
.site-header.is-scrolled .pill{box-shadow:var(--sh-pill)}
.pill__brand{display:flex;align-items:center;min-height:44px;flex:none}
.pill__brand img{width:120px;height:auto}
.pill__nav{display:flex;gap:var(--sp-1)}
.pill__nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 clamp(6px,-10px + 1.5vw,12px);border-radius:var(--r-sm);font-weight:var(--fw-bold);font-size:clamp(.9375rem,.75rem + .3vw,1.0625rem);white-space:nowrap;text-decoration:none;color:var(--w-ink)}
.pill__nav a:hover{background:#F2F3F4}
.pill__actions{display:flex;align-items:center;gap:var(--sp-3);margin-inline-start:auto}
/* system font: the pill is the only Latin-700 text above the fold on Arabic pages (Arabic-700 on /en); no font swap, no CLS */
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding-inline:8px;border-radius:var(--r-sm);background:var(--w-btn);color:#fff;font-size:var(--fs-xs);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;letter-spacing:.04em;text-decoration:none}
.lang[lang=ar]{letter-spacing:0;font-size:var(--fs-sm)}
.lang:hover{background:#2B2B2B}
.pill .hide-lt-1280{display:none}
@media (min-width:1280px){.pill .hide-lt-1280{display:block}}
@media (max-width:1023.98px){.pill{display:none}.site-header{position:static;margin:0;padding:0}}
/* "حساب جديد" popover (native <details>, works without JS) */
.reg{position:relative}
.reg summary{list-style:none}
.reg summary::-webkit-details-marker{display:none}
.reg__chev{width:12px!important;height:12px!important;transition:transform var(--d-fast) var(--ease)}
.reg[open] .reg__chev{transform:rotate(180deg)}
.reg__pop{position:absolute;top:calc(100% + 12px);inset-inline-end:0;display:grid;gap:var(--sp-2);min-width:260px;padding:var(--sp-3);background:#fff;border:1px solid #E3E6E8;border-radius:var(--r-lg);box-shadow:var(--sh-pop)}
.reg__pop .btn--platform{justify-content:flex-start;box-shadow:0 0 0 1px #D5DADF inset}
.reg__pop .btn--platform .arrow{margin-inline-start:auto}
/* mobile edge tab (02) + drawer */
.edge-tab{display:none}
@media (max-width:1023.98px){
  .edge-tab{display:flex;position:fixed;top:max(16px,env(safe-area-inset-top));inset-inline-end:12px;z-index:var(--z-header);width:44px;height:64px;align-items:center;justify-content:center;border:0;border-radius:var(--r-md);background:#fff;color:var(--w-ink);box-shadow:var(--sh-pill);cursor:pointer}
  .edge-tab svg{width:24px;height:24px}
  .edge-tab:focus-visible{box-shadow:var(--ring-light),var(--sh-pill)}
}
[dir=ltr] .edge-tab svg{transform:scaleX(-1)}
.drawer{position:fixed;inset-block:0;inset-inline-end:0;inset-inline-start:auto;margin:0;height:100dvh;max-height:none;width:min(88vw,380px);max-width:none;padding:0;border:0;background:var(--s-surface);color:var(--t-1);box-shadow:var(--sh-pop)}
.drawer::backdrop{background:rgba(0,0,0,.6)}
.drawer[open]{animation:drawer-in var(--d-base) var(--ease)}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}} /* RTL: drawer on the left (inline-end) */
[dir=ltr] .drawer[open]{animation-name:drawer-in-ltr}
@keyframes drawer-in-ltr{from{transform:translateX(100%)}to{transform:none}}
.drawer__in{display:flex;flex-direction:column;gap:var(--sp-6);min-height:100%;padding:max(20px,env(safe-area-inset-top)) var(--sp-6) max(24px,env(safe-area-inset-bottom))}
.drawer__top{display:flex;align-items:center;justify-content:space-between}
.drawer__top img{width:112px}
.drawer nav{display:grid}
.drawer nav a{display:flex;align-items:center;min-height:56px;font-size:1.25rem;font-weight:700;text-decoration:none;border-bottom:1px solid var(--s-line)}
.drawer__cta{display:grid;gap:var(--sp-3);margin-top:auto}
.drawer__row{display:flex;gap:var(--sp-3)}
.drawer__row .btn{flex:1}
body:has(.drawer[open]){overflow:hidden}

/* ===================== HERO ===================== */
.hero{position:relative;z-index:1;padding-top:clamp(88px,40px + 8vw,120px);padding-bottom:clamp(40px,20px + 4vw,64px);isolation:isolate}
.hero::before{content:"";position:absolute;inset:-120px 0 auto;height:720px;z-index:-1;background:radial-gradient(60% 50% at 30% 20%,var(--s-bg-glow),transparent 70%),radial-gradient(40% 40% at 50% 10%,rgba(180,241,232,.06),transparent 70%);pointer-events:none}
@media (min-width:1024px){.hero{padding-top:56px}}
.hero__brand{display:grid;justify-items:center;gap:var(--sp-4);margin-bottom:clamp(32px,20px + 3vw,48px)}
.hero__robot{width:clamp(104px,88px + 3.4vw,136px);height:auto;aspect-ratio:276/222}
.hero__wordmark{width:clamp(148px,128px + 4vw,184px);height:auto}
.hero__body{max-width:860px;margin-inline:auto;display:grid;gap:var(--sp-5);justify-items:start}
@media (min-width:1024px){.hero__body{margin-inline:auto 18%}}
.hero h1{font-size:var(--fs-h1);font-weight:var(--fw-heavy);line-height:var(--lh-tight);text-wrap:balance}
.hero__sub{font-size:var(--fs-lead);color:var(--t-2);max-width:680px}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2)}
.hero__trust{font-size:var(--fs-sm);color:var(--t-3);line-height:1.6;max-width:600px}
@media (max-width:767.98px){
  .hero__body{justify-items:stretch;text-align:start}
  .hero__cta{display:grid;grid-template-columns:1fr 1fr}
  .hero__cta .btn--platform{padding:0 10px;justify-content:center;gap:8px;font-size:.9375rem;min-width:0}
  .hero__cta .btn--platform .arrow{display:none}
  .hero__more{grid-column:1/-1}
  /* Compact brand block (about 60px shorter) so the install row clears the fold at 360x740 (mobile audit M7). */
  .hero{padding-top:72px}
  .hero__brand{gap:var(--sp-2);margin-bottom:20px}
  .hero__robot{width:80px}
  .hero__wordmark{width:128px}
}
@media (max-width:374.98px){.hero__cta .btn--platform{font-size:.875rem;gap:6px;padding:0 8px}.hero__cta .btn--platform .logo-salla{height:22px}.hero__cta .btn--platform .logo-zid{height:32px;margin-block:-4px}}

/* ===================== TILTED DASHBOARD ===================== */
.shot{position:relative;margin-top:min(0px,calc(80px - 10vw));padding-bottom:var(--section-y);overflow:clip}
.shot__stage{max-width:var(--w-wide);margin-inline:auto;padding-inline:var(--gutter);perspective:2200px;perspective-origin:50% 0}
.shot__frame{position:relative;margin-inline:auto;max-width:1120px;border-radius:var(--r-xl);padding:10px;background:linear-gradient(180deg,#2A2B2D,#151616);box-shadow:var(--sh-shot);transform-origin:50% 0;transform:rotateX(34deg) rotateZ(-12deg) rotateY(6deg) scale(.96);transition:transform var(--d-slow) var(--ease)}
.shot__frame img{width:100%;border-radius:calc(var(--r-xl) - 8px)}
.shot__frame::after{content:"";position:absolute;inset:auto 0 -2px;height:45%;border-radius:0 0 var(--r-xl) var(--r-xl);background:linear-gradient(180deg,transparent,var(--s-bg) 92%);pointer-events:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1024px){
    .shot__frame{animation:shot-flatten linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes shot-flatten{from{transform:rotateX(34deg) rotateZ(-12deg) rotateY(6deg) scale(.96)}to{transform:rotateX(12deg) rotateZ(-4deg) rotateY(2deg) scale(1)}}
  }
}
.shot__phone{display:none}
@media (max-width:767.98px){
  .shot{margin-top:0}
  .shot__desk{display:none}
  .shot__phone{display:block;width:min(78vw,300px);margin-inline:auto;border-radius:36px;padding:8px;background:linear-gradient(180deg,#2A2B2D,#121313);box-shadow:var(--sh-shot);transform:perspective(1200px) rotateX(8deg) rotateZ(-3deg)}
  .shot__phone img{border-radius:28px}
}
.shot__cap{position:relative;max-width:var(--w-text);margin:clamp(24px,4vw,72px) auto 0;text-align:center;color:var(--t-3);font-size:var(--fs-sm)}

/* ===================== PROOF MARQUEE ===================== */
.proof{position:relative;border-block:1px solid var(--s-line);background:var(--s-bg-alt);padding-block:var(--sp-6)}
.proof__viewport{overflow:hidden}
/* the track is an LTR island so translateX(-50%) loops cleanly; each set takes the page direction */
.marquee{display:flex;width:max-content;direction:ltr;animation:marquee var(--d-marquee) linear infinite}
.proof:hover .marquee,.proof:focus-within .marquee,.proof.is-paused .marquee{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;gap:var(--sp-12);padding-inline-end:var(--sp-12);margin:0}
[dir=rtl] .marquee__set{direction:rtl}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.stat{display:flex;align-items:baseline;gap:var(--sp-3);white-space:nowrap}
.stat b{font-size:var(--fs-stat);font-weight:var(--fw-heavy);color:var(--mint);line-height:1}
.stat span{font-size:var(--fs-lead);color:var(--t-2)}
.season-pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-pill);border:1px solid var(--s-line);color:var(--t-1);font-weight:700;white-space:nowrap}
.season-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber)}
.marquee-toggle{position:absolute;inset-inline-end:var(--gutter);inset-block-end:-22px;background:var(--s-bg-alt);color:var(--t-2);border-color:var(--s-line-strong);border-radius:50%;z-index:1}
.marquee-toggle[aria-pressed=true]{color:var(--mint);border-color:var(--mint-line)}
@media (prefers-reduced-motion:reduce){
  .marquee{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .marquee__set[aria-hidden="true"]{display:none}
  .marquee__set{flex-wrap:wrap;justify-content:center;row-gap:var(--sp-4);padding-inline:var(--gutter)}
  .marquee-toggle{display:none}
}

/* ===================== INTRO + FEATURE CARDS ===================== */
.intro{display:grid;gap:var(--sp-8);align-items:start;margin-bottom:var(--sp-12)}
@media (min-width:1024px){.intro{grid-template-columns:1fr 1fr;gap:var(--sp-16)}}
.intro>p{color:var(--t-2);font-size:var(--fs-body)}
.cards-3{display:grid;gap:var(--sp-6)}
@media (min-width:768px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.fcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:var(--sp-6);border-radius:var(--r-2xl);background:var(--s-card);border:1px solid var(--s-line);overflow:hidden;box-shadow:var(--sh-card)}
.fcard__art{position:absolute;inset:0 0 40%;display:grid;place-items:center;background:linear-gradient(var(--s-card),transparent 30%,transparent 70%,var(--s-card)),var(--grid-bg)}
.fcard__art .iso{display:flex;gap:12px;transform:rotateX(55deg) rotateZ(-35deg);transform-style:preserve-3d}
.tile{width:84px;height:84px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#2A2C2E,#141516);border:1px solid #34373A;color:#D9DEE2;box-shadow:8px 10px 0 #070808}
.tile svg,.tile img{width:32px;height:32px;transform:rotateZ(35deg)}
.tile img{width:auto;height:auto;max-width:46px;max-height:40px}
.tile--mint{background:linear-gradient(145deg,#CFF7F1,#8FDCD0);color:var(--mint-ink);border-color:#BDF3EB}
.tile--white{background:#fff;border-color:#fff}
.tile--text{font-weight:800;font-size:15px;letter-spacing:.04em}
.tile--text{transform:none}
.fcard h3{position:relative;font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug);margin-bottom:var(--sp-2)}
.fcard p{position:relative;color:var(--t-2);font-size:var(--fs-sm);line-height:1.75}
.fcard:hover{border-color:#3A3C3F}
@media (max-width:767.98px){.fcard{min-height:300px}}

/* ===================== SEASON RULER ===================== */
.seasons{background:var(--s-bg-alt);overflow:clip}
.ruler{position:relative;display:grid;gap:var(--sp-5);padding-inline-start:56px}
.ruler::before{content:"";position:absolute;inset-block:0;inset-inline-start:14px;width:22px;opacity:.55;
  background:repeating-linear-gradient(180deg,#BFC4C0 0 3px,transparent 3px 12px) 0 0/10px 100% no-repeat,repeating-linear-gradient(180deg,#BFC4C0 0 3px,transparent 3px 60px) 0 0/22px 100% no-repeat}
.ruler-stage{padding-inline:var(--gutter);max-width:calc(var(--w-max) + 2*var(--gutter));margin-inline:auto}
.ruler li{position:relative;max-width:640px}
.ruler__date{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-sm);background:#2E3033;color:#fff;font-weight:800;font-size:var(--fs-sm);box-shadow:0 6px 16px rgba(0,0,0,.4);white-space:nowrap}
.ruler__date svg{width:13px;height:13px}
.ruler__date--hijri{background:var(--s-surface);border:1px dashed #6E7378;color:var(--t-2);font-weight:500}
.ruler__date--hijri svg{width:14px;height:14px;color:var(--amber)}
.ruler li::before{content:"";position:absolute;inset-inline-start:-48px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--s-bg-alt);border:3px solid var(--mint)}
.ruler__card{margin-top:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);background:linear-gradient(180deg,#36393C,#2A2C2F);border:1px solid #44474B}
.ruler__card h3{font-size:1.0625rem;font-weight:800;line-height:var(--lh-snug)}
.ruler__card p{font-size:var(--fs-sm);color:var(--t-2);line-height:1.7;margin-top:4px}
.ruler__card .ruler__when{font-size:var(--fs-xs);color:var(--amber);margin-top:2px}
@media (min-width:1280px){
  .ruler-stage{max-width:var(--w-wide);padding:72px calc(var(--gutter) + 72px) 96px;transform:rotate(5deg);transform-origin:50% 50%}
  [dir=ltr] .ruler-stage{transform:rotate(-5deg)}
  .ruler{display:flex;gap:0;padding:0;height:600px}
  .ruler::before{inset-inline:-14vw;inset-block:auto;top:50%;height:72px;width:auto;transform:translateY(-36px);opacity:.7;
    background:repeating-linear-gradient(90deg,#C9CEC9 0 5px,transparent 5px 22px) 0 0/100% 40px no-repeat,repeating-linear-gradient(90deg,#C9CEC9 0 5px,transparent 5px 110px) 0 0/100% 72px no-repeat}
  .ruler li{flex:1 1 0;min-width:0;max-width:none;display:grid;grid-template-rows:1fr 40px 1fr;justify-items:center}
  .ruler li::before{display:none}
  .ruler__date{grid-row:2;align-self:center;position:relative;z-index:1}
  .ruler__card{grid-row:1;align-self:end;width:clamp(200px,8px + 15vw,224px);margin:0 0 56px;position:relative;transition:transform var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
  .ruler li:nth-child(even) .ruler__card{grid-row:3;align-self:start;margin:56px 0 0}
  .ruler__card::after{content:"";position:absolute;inset-inline-start:50%;top:100%;width:2px;height:56px;background:rgba(255,255,255,.5)}
  .ruler li:nth-child(even) .ruler__card::after{top:auto;bottom:100%}
  .ruler li:hover .ruler__card{transform:translateY(-4px);border-color:var(--mint-line)}
  .ruler li:nth-child(even):hover .ruler__card{transform:translateY(4px)}
}
.seasons__note{margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--t-3);max-width:var(--w-text)}
.seasons__link{margin-top:var(--sp-4)}

/* ===================== BENTO ===================== */
.bento{display:grid;gap:var(--sp-6)}
@media (min-width:768px){.bento{grid-template-columns:1fr 1fr}.bento__tile--discounts,.bento__tile:last-child{grid-column:1/-1}}
@media (min-width:1280px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .bento__tile{grid-column:span 4}
  .bento__tile--discounts{grid-column:span 7;min-height:420px}
  .bento__tile--visibility{grid-column:span 5;min-height:420px}
  .bento__tile:last-child{grid-column:span 4}
}
.bento__tile{position:relative;display:flex;flex-direction:column;min-height:320px;padding:28px;border-radius:var(--r-2xl);background:var(--s-card);border:1px solid var(--s-line);box-shadow:var(--sh-card);overflow:hidden;transition:border-color var(--d-base) var(--ease)}
@media (min-width:1280px){.bento__tile{min-height:360px}}
.bento__tile:hover{border-color:#3A3C3F}
.bento__icon{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);background:var(--mint-soft);color:var(--mint);margin-bottom:var(--sp-4)}
.bento__icon svg{width:18px;height:18px}
.bento__tile h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug);margin-bottom:var(--sp-2)}
.bento__tile h3 a{text-decoration:none}
.bento__tile h3 a:hover{color:var(--mint);text-decoration:underline}
.bento__tile>p{font-size:var(--fs-sm);color:var(--t-2);line-height:1.75;max-width:520px}
.bento__art{position:relative;margin-top:auto;padding-top:var(--sp-6);min-height:180px;display:grid;align-content:end;font-size:var(--fs-sm);transition:transform var(--d-base) var(--ease)}
.bento__tile:hover .bento__art{transform:translateY(-4px)}
.bento__art svg{width:16px;height:16px;flex:none}
.sk{display:block;height:8px;border-radius:4px;background:#2C2E31}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
/* discounts: stacked schedule cards */
.art-stack{min-height:210px;perspective:1200px}
.art-stack__card{position:absolute;inset-inline-start:0;bottom:0;width:min(360px,100%);min-height:96px;padding:16px 18px;border-radius:var(--r-lg);background:var(--s-surface);border:1px solid var(--s-line);display:flex;gap:12px;align-items:flex-start;transform:rotate(-6deg);transform-origin:50% 100%}
.art-stack__card b{font-weight:800}
.art-stack__card div{display:grid;gap:2px}
.art-stack__card span{color:var(--t-2)}
.art-stack__card small{color:var(--t-3);font-size:var(--fs-xs)}
.art-stack__card--3{opacity:.5;translate:56px -72px}
.art-stack__card--2{opacity:.75;translate:28px -36px}
[dir=rtl] .art-stack__card--3{translate:-56px -72px}
[dir=rtl] .art-stack__card--2{translate:-28px -36px}
.art-green{color:var(--dot)}
.art-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--dot);color:#0B1F0A;flex:none}
.art-check svg{width:12px;height:12px}
.art-stack__card--1{z-index:3;box-shadow:var(--sh-pop)}.art-stack__card--2{z-index:2}.art-stack__card--3{z-index:1}
/* visibility: menu mock */
.art-menu{min-height:200px;justify-items:center}
.art-menu__ghost{position:absolute;inset:40px 10% 0;border-radius:var(--r-lg);background:var(--s-surface);border:1px solid var(--s-line);filter:blur(2px);opacity:.6}
.art-menu__pop{position:relative;width:min(260px,100%);padding:8px;border-radius:var(--r-md);background:var(--s-surface-2);box-shadow:var(--sh-pop);display:grid;gap:2px}
.art-menu__pop li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--t-2);font-weight:500}
.art-menu__pop li.is-on{background:var(--mint-soft);color:var(--mint);font-weight:700}
/* excel: file chip + table */
.art-file{gap:10px;justify-items:start}
.art-file__chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-sm);background:var(--s-surface);border:1px solid var(--s-line);color:var(--t-1);font-weight:700;font-size:var(--fs-xs)}
.art-file__chip svg{color:var(--mint)}
.art-table{width:100%;border-radius:var(--r-sm);border:1px solid var(--s-line);overflow:hidden}
.art-table__head,.art-table__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px;padding:8px 12px;align-items:center}
.art-table__head{background:var(--s-surface);color:var(--t-3);font-size:var(--fs-xs);font-weight:700}
.art-table__row i{height:8px;border-radius:4px;background:#2C2E31}
.art-table__row i:last-child{background:var(--mint-line)}
.art-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill);background:var(--mint);color:var(--mint-ink);font-weight:700;font-size:var(--fs-xs)}
.art-pill svg{width:11px;height:11px}
/* calendar: real screenshot */
.art-shot{min-height:190px;padding-top:var(--sp-5)}
.art-shot picture{display:block;height:190px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--s-line);-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.art-shot img{width:100%;height:100%;object-fit:cover;object-position:top right}
/* restore: price flow */
.art-restore{gap:18px}
.art-restore__flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:800;font-size:1rem}
.art-restore__flow>svg{color:var(--t-3)}
.art-restore__sale s{color:var(--t-3);font-weight:500}
.art-restore__sale b{color:var(--mint)}
.art-restore__undo{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mint-soft);color:var(--mint)}
.art-restore__bar{position:relative;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--mint-line),var(--mint));margin-bottom:22px}
.art-restore__bar i{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--mint);inset-inline-start:0}
.art-restore__bar i+i{inset-inline-start:auto;inset-inline-end:0}
.art-restore__bar span{position:absolute;top:12px;inset-inline-end:0;color:var(--t-3);font-size:var(--fs-xs)}
/* log rows */
.art-log{gap:8px}
.art-log__row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--s-surface);font-size:var(--fs-xs);color:var(--t-2)}
.art-log__row .sk{flex:1;max-width:120px}
.art-log__row small{margin-inline-start:auto;color:var(--t-3)}
.art-log__row--warn .dot{background:var(--amber)}
.art-chip{padding:2px 10px;border-radius:var(--r-pill);border:1px solid var(--amber);color:var(--amber);font-weight:700}
/* alerts: email card */
.art-mail__card{display:grid;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--s-surface);border:1px solid var(--s-line)}
.art-mail__head{display:flex;align-items:center;gap:10px}
.art-mail__head svg{color:var(--mint)}
.sk--80{width:80%}.sk--60{width:60%}
/* permits */
.art-permit{justify-items:start;gap:0}
.art-permit__chip{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-lg);background:var(--s-surface);border:1px solid var(--mint-line)}
.art-permit__chip svg{color:var(--mint);width:20px;height:20px}
.art-permit__chip div{display:grid;font-size:var(--fs-xs);color:var(--t-3)}
.art-permit__chip b{color:var(--t-1);font-size:var(--fs-sm)}
.art-permit__chip i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--t-3);margin-inline-start:3px}
.art-permit__line{width:0;height:28px;border-inline-start:2px dashed var(--s-line-strong);margin-inline-start:28px}
.art-permit__sched{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:var(--s-surface-2);font-weight:700;font-size:var(--fs-xs)}
@media (max-width:767.98px){.art-stack__card--3{display:none}.art-menu__ghost{display:none}.art-restore__flow{gap:6px;font-size:.875rem}}

/* ===================== HOW IT WORKS ===================== */
.how__grid{display:grid;gap:var(--sp-12);align-items:center}
@media (min-width:1024px){.how__grid{grid-template-columns:5fr 7fr;gap:var(--sp-16)}}
.steps{display:grid;gap:var(--sp-8);margin-bottom:var(--sp-8)}
.step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:var(--sp-4)}
.step:not(:last-child)::after{content:"";position:absolute;inset-inline-start:19px;top:48px;bottom:calc(-1*var(--sp-8) + 8px);width:2px;background:var(--s-line)}
.step__num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--mint-soft);color:var(--mint);font-weight:800}
.step:first-child .step__num{box-shadow:0 0 0 3px var(--s-bg),0 0 0 5px var(--dot)}
.step h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug);margin-bottom:4px}
.step p{color:var(--t-2)}
.how__shot{border-radius:var(--r-xl);padding:10px;background:linear-gradient(180deg,#2A2B2D,#151616);box-shadow:var(--sh-shot);transition:transform var(--d-slow) var(--ease)}
.how__shot img{width:100%;border-radius:calc(var(--r-xl) - 8px)}
@media (min-width:1024px){.how__shot{transform:perspective(1600px) rotateY(8deg)}.how__shot:hover{transform:perspective(1600px) rotateY(3deg)}[dir=ltr] .how__shot{transform:perspective(1600px) rotateY(-8deg)}}
@media (max-width:767.98px){.how__cta{width:100%}}

/* ===================== TOOLS TEASER ===================== */
.tcard{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);min-height:220px;padding:var(--sp-6);border-radius:var(--r-xl);background:var(--s-surface);border:1px solid var(--s-line);transition:background-color var(--d-base) var(--ease),border-color var(--d-base) var(--ease)}
.tcard:hover{background:var(--s-surface-2);border-color:var(--mint-line)}
.tcard:has(a:focus-visible){box-shadow:var(--ring)}
.tcard__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mint-soft);color:var(--mint)}
.tcard__icon svg{width:22px;height:22px}
.tcard h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.tcard h3 a{text-decoration:none}
.tcard h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.tcard h3 a:focus-visible{box-shadow:none}
.tcard p{font-size:var(--fs-sm);color:var(--t-2);line-height:1.7}
.tcard__cta{display:inline-flex;align-items:center;gap:8px;margin-top:auto;color:var(--mint);font-weight:700;font-size:var(--fs-sm)}
.tcard__cta svg,.bcard__read svg{width:14px;height:14px;transition:transform var(--d-fast) var(--ease)}

/* ===================== BLOG ===================== */
.blog__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-12)}
.blog__note{color:var(--t-3);font-size:var(--fs-sm)}
.bcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--s-card);border:1px solid var(--s-line);overflow:hidden}
.bcard:has(a:focus-visible){box-shadow:var(--ring)}
.bcard__media{aspect-ratio:16/9;background:var(--s-surface);overflow:hidden;display:grid;place-items:center}
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-slow) var(--ease)}
.bcard:hover .bcard__media img{transform:scale(1.03)}
.bcard__robot{width:64px;height:auto}
.bcard__body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);flex:1}
.bcard time{font-size:var(--fs-xs);color:var(--t-3)}
.bcard h3{font-size:1.1875rem;font-weight:700;line-height:var(--lh-snug);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard h3 a{text-decoration:none}
.bcard h3 a::after{content:"";position:absolute;inset:0}
.bcard h3 a:focus-visible{box-shadow:none}
.bcard:hover h3{color:var(--mint)}
.bcard__read{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:var(--sp-2);color:var(--mint);font-weight:700;font-size:var(--fs-sm)}
.tcard:hover .tcard__cta svg,.bcard:hover .bcard__read svg{transform:translateX(-3px)}
[dir=ltr] .tcard:hover .tcard__cta svg,[dir=ltr] .bcard:hover .bcard__read svg{transform:scaleX(-1) translateX(-3px)}
@media (max-width:767.98px){.blog__head{display:block}.blog__all{display:flex;margin-top:var(--sp-6);width:100%;order:2}.blog .cards-3{margin-bottom:0}}

/* ===================== FAQ ===================== */
.faq__wrap{max-width:calc(880px + 2*var(--gutter))}
.faq__list{border-top:1px solid var(--s-line)}
.faq__item{border-bottom:1px solid var(--s-line)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:64px;padding-block:18px;cursor:pointer;list-style:none;border-radius:var(--r-sm)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary h3{font-size:1.125rem;font-weight:700;line-height:var(--lh-snug)}
.faq__item summary:hover h3{color:var(--mint)}
.faq__chev{width:16px;height:16px;color:var(--t-3);flex:none;transition:transform var(--d-base) var(--ease)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__a{padding-bottom:var(--sp-5);color:var(--t-2);font-size:var(--fs-body);max-width:var(--w-text)}
.faq__more{display:flex;justify-content:center;margin-top:var(--sp-8)}
.faq__more a,.final__help{display:inline-flex;align-items:center;gap:10px;color:var(--mint);font-weight:700;text-decoration:none}
.faq__more a:hover,.final__help:hover{text-decoration:underline}
.faq__more svg,.final__help svg{width:20px;height:20px}
@media (max-width:767.98px){.faq__item summary{min-height:56px}.faq__item summary h3{font-size:1.0625rem}}

/* ===================== FINAL CTA ===================== */
.final__card{position:relative;display:grid;justify-items:center;gap:var(--sp-5);text-align:center;padding:var(--sp-16);border-radius:var(--r-2xl);border:1px solid var(--mint-line);overflow:hidden;
  background:radial-gradient(50% 80% at 50% 0,rgba(180,241,232,.14),transparent 70%),linear-gradient(var(--s-surface),var(--s-surface))}
.final__card::before{content:"";position:absolute;inset:0;background:var(--grid-bg);opacity:.85;pointer-events:none}
.final__card>*{position:relative}
.final__robot{width:88px;height:auto}
.final__card h2{font-size:var(--fs-h2);font-weight:var(--fw-heavy);line-height:var(--lh-tight);text-wrap:balance;max-width:820px}
.final__sub{font-size:var(--fs-lead);color:var(--t-2);max-width:620px}
.final__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.final__help{color:var(--t-2);font-weight:500;font-size:var(--fs-sm)}
.final__help svg{color:#25D366}
@media (max-width:767.98px){.final__card{padding:var(--sp-8) var(--sp-5);border-radius:var(--r-xl)}.final__robot{width:72px}.final__cta{display:grid;width:100%;justify-content:stretch}}

/* ===================== FOOTER ===================== */
.site-footer{background:var(--s-bg-alt);border-radius:48px 48px 0 0;padding:var(--sp-16) 0 var(--sp-8);margin-top:var(--sp-8);border-top:1px solid var(--s-line)}
.footer__grid{display:grid;gap:var(--sp-10);grid-template-columns:1fr 1fr}
.footer__brand{grid-column:1/-1;display:grid;gap:var(--sp-4);align-content:start}
.footer__brand img{width:160px}
.footer__tagline{font-size:var(--fs-sm);color:var(--t-3);max-width:280px}
.footer__col{display:grid;align-content:start;gap:var(--sp-2)}
.footer__label{font-size:var(--fs-xs);font-weight:700;color:var(--t-3);margin-bottom:var(--sp-1)}
.footer__col a{display:flex;align-items:center;min-height:36px;color:var(--t-2);text-decoration:none;font-size:1rem}
.footer__col a:hover{color:var(--t-1)}
@media (min-width:768px){.footer__grid{grid-template-columns:4fr 1fr repeat(3,2fr)}.footer__brand{grid-column:auto}.footer__col:first-of-type{grid-column:3}}
.footer__bottom{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);margin-top:var(--sp-12);padding-top:var(--sp-6);padding-inline-end:calc(var(--gutter) + 64px);font-size:.875rem;color:var(--t-3)}
.footer__bottom::before{content:"";position:absolute;top:0;inset-inline:var(--gutter);border-top:1px solid var(--s-line)}
.footer__bottom a{text-decoration:none}
.footer__bottom a:hover{color:var(--t-1);text-decoration:underline}
@media (max-width:767.98px){.site-footer{border-radius:32px 32px 0 0;padding-bottom:calc(var(--sp-8) + 80px)}.footer__bottom{flex-direction:column}}

/* ===================== FLOATING PIECES ===================== */
.sticky-cta{position:fixed;inset:auto 0 0;z-index:var(--z-sticky);display:none;gap:var(--sp-2);padding:10px var(--gutter) max(10px,env(safe-area-inset-bottom));background:rgba(17,17,17,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--s-line);transform:translateY(110%);transition:transform var(--d-base) var(--ease)}
.sticky-cta .btn{flex:1;--h:48px;font-size:.9375rem;padding:0 10px;gap:8px;min-width:0}
.sticky-cta .btn .logo-salla{height:22px}
.sticky-cta .btn .logo-zid{height:32px;margin-block:-4px}
.sticky-cta.is-on{transform:none}
@media (max-width:767.98px){.sticky-cta{display:flex}}
.wa-float{position:fixed;inset-inline-end:16px;bottom:max(16px,env(safe-area-inset-bottom));z-index:var(--z-float);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--s-surface);border:1px solid var(--s-line);color:#25D366;box-shadow:var(--sh-pop);text-decoration:none;transition:bottom var(--d-base) var(--ease)}
.wa-float svg{width:26px;height:26px}
.wa-float:focus-visible{border-radius:50%}
.wa-float__label{position:absolute;inset-inline-end:calc(100% + 10px);padding:6px 12px;border-radius:var(--r-sm);background:var(--s-surface-2);color:var(--t-1);font-size:var(--fs-sm);font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--d-fast) var(--ease)}
@media (hover:hover) and (min-width:1024px){.wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{opacity:1}}
/* Phones: on pages with the sticky install bar the float waits for that bar, so it never sits on the hero CTAs or a tool's inputs (mobile audit M2).
   visibility (not only opacity) keeps the hidden float out of the tab order. Contact stays in the drawer. */
@media (max-width:767.98px){
  body:has(.sticky-cta) .wa-float{opacity:0;visibility:hidden;transition:opacity var(--d-fast) var(--ease),visibility 0s linear var(--d-fast)}
  body:has(.sticky-cta.is-on) .wa-float{opacity:1;visibility:visible;bottom:88px;transition:opacity var(--d-fast) var(--ease)}
}
body:has(.drawer[open]) .wa-float{display:none}