/* ============ TOKENS ============ */
*,*::before,*::after{box-sizing:border-box}
:root{
  --brand:#15c594; --brand-2:#05a47c; --accent:#0a9b8c; --accent-2:#3fdcb0;
  --r:16px; --r-lg:24px;
  --shell:min(1200px,100% - 2.5rem);
  --ease:cubic-bezier(.22,1,.36,1);
  --sp:clamp(1.5rem,2.6vw,2.625rem);
  --grad:linear-gradient(120deg,var(--brand) 0%,var(--accent-2) 55%,var(--accent) 100%);
}
:root[data-theme=dark]{
  --bg:#07090c; --bg-2:#0b0f15; --bg-3:#10151d;
  --card:rgba(255,255,255,.035); --card-2:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.09); --bd-2:rgba(255,255,255,.16);
  --tx:#e8eef7; --tx-2:#9fb0c4; --tx-3:#6b7d92;
  --shadow:0 30px 70px -25px rgba(0,0,0,.85);
  --glow:0 0 60px -12px rgba(21,197,148,.45);
}
:root[data-theme=light]{
  --bg:#fbfcfe; --bg-2:#f2f5f9; --bg-3:#ffffff;
  --card:#ffffff; --card-2:#ffffff;
  --bd:rgba(10,22,40,.10); --bd-2:rgba(10,22,40,.18);
  --tx:#0a1424; --tx-2:#4a5b71; --tx-3:#71829a;
  --shadow:0 24px 60px -28px rgba(12,26,48,.32);
  --glow:0 0 60px -18px rgba(21,197,148,.4);
}
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{line-height:1.1;margin:0;letter-spacing:-.035em;font-weight:800}
h1{font-size:clamp(2.4rem,1.35rem + 4.4vw,4.4rem)}
h2{font-size:clamp(1.95rem,1.25rem + 2.9vw,3.15rem)}
h3{font-size:clamp(1.12rem,1.05rem + .35vw,1.3rem);letter-spacing:-.02em}
p{margin:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:rgba(21,197,148,.3);color:var(--tx)}
.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:0;inset-inline-start:0;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;
  z-index:999;background:var(--brand);color:#04120a;padding:.7rem 1.1rem;font-weight:700;border-end-end-radius:10px}

/* ============ AMBIENT BACKDROP ============ */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform}
:root[data-theme=light] .aurora i{opacity:.28;filter:blur(80px)}
.aurora i:nth-child(1){width:46vw;height:46vw;background:radial-gradient(circle,#15c594,transparent 65%);top:-14vw;left:-8vw;animation:drift 26s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:40vw;height:40vw;background:radial-gradient(circle,#0a9b8c,transparent 65%);top:34vh;right:-14vw;animation:drift 32s var(--ease) infinite alternate-reverse}
.aurora i:nth-child(3){width:36vw;height:36vw;background:radial-gradient(circle,#3fdcb0,transparent 65%);bottom:-10vw;left:26vw;animation:drift 38s var(--ease) infinite alternate}
@keyframes drift{to{transform:translate3d(7vw,5vh,0) scale(1.22)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.4s var(--ease);padding:.9rem 0}
.nav.stuck{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);border-bottom:1px solid var(--bd);padding:.55rem 0}
.nav .shell{display:flex;align-items:center;gap:1.4rem}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:-.03em;font-size:1.16rem;flex-shrink:0}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--grad);display:grid;place-items:center;box-shadow:var(--glow);flex-shrink:0}
.brand .mark svg{width:19px;height:19px}
.nav-links{display:flex;gap:.15rem;margin-inline:auto}
.nav-links a{padding:.5rem .8rem;border-radius:9px;font-size:.925rem;font-weight:500;color:var(--tx-2);transition:.25s var(--ease)}
.nav-links a:hover{color:var(--tx);background:var(--card-2)}
.nav-act{display:flex;align-items:center;gap:.55rem;flex-shrink:0}
.icon-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--bd);background:var(--card);cursor:pointer;transition:.25s var(--ease)}
.icon-btn:hover{border-color:var(--bd-2);transform:translateY(-1px)}
.icon-btn svg{width:17px;height:17px}
.ghost{padding:.55rem .95rem;border-radius:10px;font-weight:600;font-size:.92rem;color:var(--tx-2);transition:.25s var(--ease)}
.ghost:hover{color:var(--tx)}

/* ============ BUTTONS ============ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:13px;font-weight:700;font-size:.965rem;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,border-color .25s;
  white-space:nowrap;text-align:center;will-change:transform}
.btn svg{width:17px;height:17px;flex-shrink:0}
.btn-1{background:var(--grad);color:#04120a;box-shadow:0 12px 32px -12px rgba(21,197,148,.65)}
.btn-1:hover{transform:translateY(-2px) scale(1.015);box-shadow:0 20px 46px -14px rgba(21,197,148,.8)}
.btn-2{background:var(--card);border-color:var(--bd);color:var(--tx);backdrop-filter:blur(10px)}
.btn-2:hover{border-color:var(--bd-2);transform:translateY(-2px);background:var(--card-2)}
.btn-sm{padding:.62rem 1.05rem;font-size:.9rem;border-radius:11px}
.btn-lg{padding:1.08rem 2rem;font-size:1.04rem;border-radius:15px}
.btn-1::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5),transparent 80%);
  transform:translateX(-130%);transition:transform .85s var(--ease)}
.btn-1:hover::after{transform:translateX(130%)}

/* ============ SECTION FURNITURE ============ */
section{padding-block:var(--sp);position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border-radius:100px;
  border:1px solid var(--bd);background:var(--card);font-size:.79rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx-2);backdrop-filter:blur(10px)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand);flex-shrink:0}
.head{max-width:44rem;margin-inline:auto;text-align:center;display:grid;gap:1.05rem;justify-items:center;margin-bottom:3.6rem}
.head p{color:var(--tx-2);font-size:1.08rem}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-lg);padding:1.7rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.4s var(--ease);position:relative;overflow:hidden}
.card:hover{border-color:var(--bd-2);transform:translateY(-4px);box-shadow:var(--shadow)}
.grid{display:grid;gap:1.15rem}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============ HERO ============ */
.hero{padding-top:clamp(7rem,11vw,9rem);padding-bottom:clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero-copy{display:grid;gap:1.5rem;justify-items:start}
.hero h1{max-width:13ch}
.lede{color:var(--tx-2);font-size:clamp(1.05rem,1rem + .4vw,1.22rem);max-width:36rem}
.sub{font-weight:700;font-size:clamp(1.02rem,.98rem + .3vw,1.15rem);letter-spacing:-.02em}
.sub span{color:var(--tx-3);font-weight:600}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap}
.micro{font-size:.85rem;color:var(--tx-3);display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;margin-top:.3rem;
  padding-top:1.5rem;border-top:1px solid var(--bd)}
.stat b{display:block;font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);font-weight:800;letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-size:.78rem;color:var(--tx-3);line-height:1.4;display:block;margin-top:.15rem}
.fnote{font-size:.75rem;color:var(--tx-3);line-height:1.55;opacity:.85}

/* ============ PHONE ============ */
.phone-wrap{position:relative;display:grid;place-items:center;perspective:1400px}
.phone{position:relative;width:min(330px,84vw);aspect-ratio:9/19.3;background:#0a0d12;border-radius:44px;
  padding:11px;box-shadow:0 50px 90px -30px rgba(0,0,0,.75),0 0 0 1.5px rgba(255,255,255,.14),inset 0 0 0 2px rgba(255,255,255,.06);
  transform:rotateY(-11deg) rotateX(3deg);transition:transform .9s var(--ease)}
.phone-wrap:hover .phone{transform:rotateY(-4deg) rotateX(1deg)}
.phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:34%;height:23px;background:#0a0d12;border-radius:0 0 16px 16px;z-index:5}
.screen{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:#0b141a;display:flex;flex-direction:column}
.wa-top{display:flex;align-items:center;gap:.6rem;padding:2.1rem .8rem .6rem;background:#1f2c33;color:#e9edef;flex-shrink:0}
.wa-av{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:800;font-size:.82rem;color:#04120a;flex-shrink:0}
.wa-top>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.wa-nm{display:block;font-size:.83rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-st{display:block;font-size:.66rem;color:#8fa3ad;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-top .vd{margin-left:auto;display:flex;gap:.75rem;opacity:.65}
.wa-top .vd svg{width:15px;height:15px}
.chat{flex:1;overflow-y:auto;padding:.7rem .6rem 1rem;display:flex;flex-direction:column;gap:.42rem;
  background:#0b141a;scrollbar-width:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23ffffff' fill-opacity='.022'%3E%3Ccircle cx='12' cy='14' r='2.5'/%3E%3Ccircle cx='45' cy='38' r='2'/%3E%3Ccircle cx='28' cy='52' r='1.6'/%3E%3C/g%3E%3C/svg%3E")}
.chat::-webkit-scrollbar{display:none}
.msg{max-width:82%;padding:.44rem .6rem;border-radius:10px;font-size:.735rem;line-height:1.45;color:#e9edef;
  position:relative;animation:pop .34s var(--ease) both;word-wrap:break-word}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.96)}}
.msg.in{background:#1f2c33;align-self:flex-start;border-top-left-radius:3px}
.msg.out{background:#005c4b;align-self:flex-end;border-top-right-radius:3px}
.msg .tm{font-size:.56rem;color:rgba(233,237,239,.5);text-align:right;margin-top:.1rem}
.msg b{font-weight:700}
.typing{display:flex;gap:3px;padding:.55rem .7rem;background:#1f2c33;border-radius:10px;border-top-left-radius:3px;align-self:flex-start;animation:pop .3s var(--ease) both}
.typing i{width:5px;height:5px;border-radius:50%;background:#8fa3ad;animation:bounce 1.3s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.wa-card{background:#1f2c33;border-radius:10px;padding:.5rem;align-self:flex-start;max-width:88%;
  border-top-left-radius:3px;animation:pop .34s var(--ease) both}
.wa-card .ttl{font-size:.7rem;font-weight:800;color:#e9edef;margin-bottom:.4rem;display:flex;align-items:center;gap:.3rem}
.item{display:flex;align-items:center;gap:.45rem;padding:.34rem;border-radius:7px;background:rgba(255,255,255,.045);margin-bottom:.25rem}
.item .ic{width:26px;height:26px;border-radius:6px;background:rgba(21,197,148,.16);display:grid;place-items:center;font-size:.8rem;flex-shrink:0}
.item .nm{font-size:.665rem;color:#e9edef;font-weight:600;line-height:1.3}
.item .pr{font-size:.63rem;color:#15c594;font-weight:700;margin-left:auto;flex-shrink:0}
.wa-btn{display:block;width:100%;text-align:center;padding:.34rem;margin-top:.3rem;border-radius:7px;
  background:rgba(21,197,148,.14);color:#15c594;font-size:.655rem;font-weight:700;border:1px solid rgba(21,197,148,.25)}
.pay{background:linear-gradient(135deg,rgba(21,197,148,.18),rgba(10,155,140,.14));border:1px solid rgba(21,197,148,.3)}
.trk{display:flex;flex-direction:column;gap:.3rem;margin-top:.15rem}
.trk div{display:flex;align-items:center;gap:.35rem;font-size:.645rem;color:#8fa3ad}
.trk div.done{color:#15c594}
.trk .bx{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex-shrink:0;font-size:.5rem}
.trk div.done .bx{background:#15c594;border-color:#15c594;color:#04120a}
.glow-ring{position:absolute;inset:-6%;border-radius:50%;background:var(--grad);filter:blur(80px);opacity:.28;z-index:-1;animation:pulse 5s ease-in-out infinite}
@keyframes pulse{50%{opacity:.42;transform:scale(1.08)}}
/* floating chips */
.chip{position:absolute;background:var(--card);border:1px solid var(--bd);border-radius:13px;padding:.55rem .75rem;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);display:flex;align-items:center;gap:.5rem;
  font-size:.74rem;font-weight:700;z-index:4;animation:float 6s ease-in-out infinite;white-space:nowrap}
.chip .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0}
.chip small{display:block;font-size:.63rem;color:var(--tx-3);font-weight:600}
.chip-1{top:13%;left:-13%;animation-delay:.4s}
.chip-2{bottom:19%;right:-11%;animation-delay:1.7s}
@keyframes float{50%{transform:translateY(-11px)}}
/* ============ TRUST STRIP ============ */
.strip{border-block:1px solid var(--bd);padding-block:1.5rem;background:var(--bg-2)}
.strip .shell{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,4vw,3.4rem);flex-wrap:wrap}
.strip .lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.13em;color:var(--tx-3);font-weight:700}
.trust{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--tx-2);transition:.3s var(--ease)}
.trust:hover{color:var(--tx)}
.trust svg{width:19px;height:19px;color:var(--brand);flex-shrink:0}

/* ============ DEMO ============ */
.demo{background:var(--bg-2);border-block:1px solid var(--bd)}
.demo-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.demo-copy{display:grid;gap:1.3rem;justify-items:start}
.player{display:grid;gap:.85rem;width:100%;max-width:26rem}
.bar{height:5px;border-radius:99px;background:var(--card-2);border:1px solid var(--bd);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .25s linear}
.bar-row{display:flex;align-items:center;gap:.75rem}
.time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--tx-3);font-weight:700;flex-shrink:0}
.ctrls{display:flex;gap:.5rem;flex-wrap:wrap}
.beat{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.beat li{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:11px;font-size:.87rem;
  color:var(--tx-3);transition:.35s var(--ease);border:1px solid transparent;font-weight:600}
.beat li .n{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--bd-2);display:grid;place-items:center;
  font-size:.64rem;font-weight:800;flex-shrink:0;transition:.35s var(--ease)}
.beat li.on{color:var(--tx);background:var(--card);border-color:var(--bd)}
.beat li.on .n{background:var(--grad);border-color:transparent;color:#04120a}
.replay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(6,10,14,.72);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);z-index:8;border-radius:34px;
  opacity:0;pointer-events:none;transition:.4s var(--ease)}
.replay.show{opacity:1;pointer-events:auto}
.replay button{display:grid;gap:.5rem;justify-items:center;background:none;border:0;cursor:pointer;color:#fff}
.replay .circ{width:58px;height:58px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  box-shadow:0 0 40px -6px rgba(21,197,148,.7);transition:.3s var(--ease)}
.replay button:hover .circ{transform:scale(1.09)}
.replay .circ svg{width:23px;height:23px;color:#04120a}
.replay span{font-size:.78rem;font-weight:700}

/* ============ COMPARE / ROI ============ */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:1.15rem;align-items:stretch}
.vs-badge{align-self:center;width:46px;height:46px;border-radius:50%;background:var(--bg-3);border:1px solid var(--bd);
  display:grid;place-items:center;font-weight:800;font-size:.82rem;color:var(--tx-3);flex-shrink:0}
.pane{padding:1.7rem;border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--card);backdrop-filter:blur(14px)}
.pane.bad{border-color:rgba(239,68,68,.22)}
.pane.good{border-color:rgba(21,197,148,.32);background:linear-gradient(160deg,rgba(21,197,148,.07),transparent 60%)}
.pane h3{margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.pane ul{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.pane li{display:flex;gap:.6rem;font-size:.925rem;color:var(--tx-2);line-height:1.5}
.pane li svg{width:17px;height:17px;flex-shrink:0;margin-top:.18rem}
.bad li svg{color:#ef4444}.good li svg{color:var(--brand)}
.tot{margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--bd);text-align:center}
.tot b{display:block;font-size:1.75rem;font-weight:800;letter-spacing:-.04em}
.bad .tot b{color:#ef4444}.good .tot b{color:var(--brand)}
.tot > span{font-size:.78rem;color:var(--tx-3)}

.calc{margin-top:2.6rem;border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--card);
  padding:clamp(1.5rem,3vw,2.4rem);backdrop-filter:blur(14px)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.field{display:grid;gap:.5rem;margin-bottom:1.4rem}
.field label{font-size:.86rem;font-weight:700;display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.field label b{font-size:1.05rem;color:var(--brand);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--card-2);border:1px solid var(--bd);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:21px;height:21px;border-radius:50%;
  background:var(--grad);border:2px solid var(--bg);box-shadow:0 3px 12px rgba(21,197,148,.5);cursor:pointer}
input[type=range]::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--brand);
  border:2px solid var(--bg);box-shadow:0 3px 12px rgba(21,197,148,.5);cursor:pointer;border-width:2px}
.out{text-align:center;padding:1.6rem;border-radius:var(--r);background:var(--bg-3);border:1px solid var(--bd)}
.out .row{display:flex;justify-content:space-between;align-items:baseline;padding:.6rem 0;font-size:.9rem;color:var(--tx-2)}
.out .row b{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx);font-size:1rem}
.out .big{margin-top:.9rem;padding-top:1.1rem;border-top:1px solid var(--bd)}
.out .big b{display:block;font-size:clamp(1.9rem,1.4rem + 2vw,2.7rem);font-weight:800;letter-spacing:-.045em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.out .big span{font-size:.83rem;color:var(--tx-3)}

/* ============ STEPS ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem;position:relative}
.step{position:relative;padding:1.7rem;border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--card);
  backdrop-filter:blur(14px);transition:.4s var(--ease);overflow:hidden}
.step:hover{transform:translateY(-5px);border-color:var(--bd-2);box-shadow:var(--shadow)}
.step .num{font-size:2.5rem;font-weight:800;letter-spacing:-.06em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.85;margin-bottom:.8rem}
.step h3{margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--tx-2);line-height:1.55}
/* step top-bar moved to ::before — see V6 */

/* ============ FEATURES ============ */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1.15rem}
.feat{display:grid;gap:.85rem;align-content:start}
.feat .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(21,197,148,.16),rgba(10,155,140,.12));border:1px solid var(--bd);transition:.4s var(--ease)}
.feat:hover .ic{transform:scale(1.08) rotate(-5deg)}
.feat .ic svg{width:21px;height:21px;color:var(--brand)}
.feat p{font-size:.92rem;color:var(--tx-2);line-height:1.55}
.feat ul{list-style:none;padding:0;margin:.2rem 0 0;display:grid;gap:.42rem}
.feat li{display:flex;gap:.5rem;font-size:.84rem;color:var(--tx-3);align-items:center}
.feat li svg{width:14px;height:14px;color:var(--brand);flex-shrink:0}
.feat.hl{border-color:rgba(10,155,140,.35);background:linear-gradient(155deg,rgba(10,155,140,.09),transparent 62%)}
.tag{position:absolute;top:1.1rem;right:1.1rem;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .58rem;border-radius:99px;background:rgba(10,155,140,.18);color:#5fe0bd;border:1px solid rgba(10,155,140,.3)}

/* ============ JOURNEY ============ */
.jour{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;counter-reset:j}
.jr{padding:1.5rem 1.3rem;border-radius:var(--r);border:1px solid var(--bd);background:var(--card);text-align:center;
  display:grid;gap:.6rem;justify-items:center;transition:.4s var(--ease);backdrop-filter:blur(14px)}
.jr:hover{transform:translateY(-5px);border-color:var(--bd-2)}
.jr .n{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#04120a;display:grid;place-items:center;font-weight:800;font-size:.9rem}
.jr h3{font-size:.97rem}
.jr p{font-size:.83rem;color:var(--tx-3);line-height:1.5}

/* ============ PRICING ============ */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;align-items:start}
.plan{padding:2rem 1.75rem;border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--card);
  backdrop-filter:blur(14px);display:grid;gap:1.2rem;align-content:start;transition:.4s var(--ease);position:relative}
.plan:hover{transform:translateY(-5px);border-color:var(--bd-2);box-shadow:var(--shadow)}
.plan.pop{border-color:rgba(21,197,148,.42);background:linear-gradient(165deg,rgba(21,197,148,.09),transparent 58%);
  box-shadow:0 0 0 1px rgba(21,197,148,.15),var(--shadow)}
.pop-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--grad);color:#04120a;
  font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.3rem .8rem;border-radius:99px;white-space:nowrap}
.plan .nm{font-size:1.15rem;font-weight:800;letter-spacing:-.025em}
.plan .ds{font-size:.85rem;color:var(--tx-3);margin-top:.15rem}
.amt{display:flex;align-items:baseline;gap:.32rem;flex-wrap:wrap}
.amt .cur{font-size:.88rem;font-weight:700;color:var(--tx-3)}
.amt .val{font-size:clamp(2.3rem,1.9rem + 1.5vw,3rem);font-weight:800;letter-spacing:-.05em;line-height:1}
.amt .per{font-size:.85rem;color:var(--tx-3);font-weight:600}
.plan ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.plan li{display:flex;gap:.6rem;font-size:.89rem;color:var(--tx-2);align-items:flex-start;line-height:1.45}
.plan li svg{width:16px;height:16px;color:var(--brand);flex-shrink:0;margin-top:.16rem}
.plan li.fee{font-weight:800;color:var(--tx);padding-top:.6rem;border-top:1px solid var(--bd);margin-top:.15rem}
.plan .note{font-size:.76rem;color:var(--tx-3);text-align:center}
.plan .btn{width:100%}

/* ============ INDUSTRIES ============ */
.ind-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.15rem}
.ind{display:grid;gap:.75rem;align-content:start}
.ind .em{font-size:1.9rem;line-height:1}
.ind p{font-size:.89rem;color:var(--tx-2);line-height:1.55}
.soon{margin-top:1.15rem;padding:1.6rem;border-radius:var(--r-lg);border:1px dashed var(--bd-2);background:var(--card);
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.soon div{display:grid;gap:.25rem}
.soon p{font-size:.88rem;color:var(--tx-3)}

/* ============ SECURITY ============ */
.sec{background:var(--bg-2);border-block:1px solid var(--bd)}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;margin-bottom:1.15rem}
.sec-c{text-align:center;display:grid;gap:.6rem;justify-items:center}
.sec-c .ic{width:50px;height:50px;border-radius:15px;background:linear-gradient(140deg,rgba(21,197,148,.16),rgba(63,220,176,.1));
  border:1px solid var(--bd);display:grid;place-items:center}
.sec-c .ic svg{width:22px;height:22px;color:var(--brand)}
.sec-c p{font-size:.86rem;color:var(--tx-3);line-height:1.5}
.perms{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.85rem;margin-top:.4rem}
.perm{padding:1.1rem 1.2rem;border-radius:var(--r);border:1px solid var(--bd);background:var(--card)}
.perm code{font-size:.79rem;font-weight:700;color:var(--accent-2);font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  display:block;margin-bottom:.35rem;word-break:break-word}
.perm p{font-size:.81rem;color:var(--tx-3);line-height:1.5}

/* ============ FAQ ============ */
.faq{max-width:50rem;margin-inline:auto;display:grid;gap:.7rem}
details{border:1px solid var(--bd);border-radius:var(--r);background:var(--card);overflow:hidden;transition:.3s var(--ease)}
details[open]{border-color:var(--bd-2);background:var(--card-2)}
summary{padding:1.15rem 1.35rem;cursor:pointer;font-weight:700;font-size:.98rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;list-style:none;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary .pm{width:24px;height:24px;border-radius:7px;border:1px solid var(--bd);display:grid;place-items:center;
  flex-shrink:0;transition:.35s var(--ease);color:var(--tx-3)}
summary .pm svg{width:13px;height:13px}
details[open] summary .pm{transform:rotate(45deg);background:var(--grad);border-color:transparent;color:#04120a}
details .ans{padding:0 1.35rem 1.25rem;color:var(--tx-2);font-size:.93rem;line-height:1.65;animation:fade .4s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-5px)}}

/* ============ CTA + FOOTER ============ */
.final{text-align:center;position:relative}
.final-box{padding:clamp(2.5rem,6vw,4.5rem) clamp(1.5rem,4vw,3rem);border-radius:clamp(24px,4vw,36px);
  border:1px solid var(--bd);background:linear-gradient(150deg,rgba(21,197,148,.1),rgba(10,155,140,.07) 55%,transparent);
  backdrop-filter:blur(16px);display:grid;gap:1.5rem;justify-items:center;position:relative;overflow:hidden}
.final-box::before{content:"";position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:65%;aspect-ratio:1;
  background:var(--grad);filter:blur(110px);opacity:.2;pointer-events:none}
.final-box > *{position:relative}
.final-box p{color:var(--tx-2);max-width:38rem}
.perks{display:flex;gap:1.4rem;flex-wrap:wrap;justify-content:center;font-size:.85rem;color:var(--tx-3);font-weight:600}
.perks span{display:flex;align-items:center;gap:.4rem}
.perks svg{width:15px;height:15px;color:var(--brand)}
footer{border-top:1px solid var(--bd);padding-block:3.2rem 2rem;background:var(--bg-2);margin-top:var(--sp)}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2.2rem;margin-bottom:2.4rem}
.foot h4{font-size:.79rem;text-transform:uppercase;letter-spacing:.13em;color:var(--tx-3);margin-bottom:.9rem;font-weight:800}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.foot a{font-size:.9rem;color:var(--tx-2);transition:.25s var(--ease)}
.foot a:hover{color:var(--brand)}
.foot .about{font-size:.88rem;color:var(--tx-3);line-height:1.6;max-width:30rem;margin-top:.9rem}
.foot .brand{margin-bottom:0}
.legal{border-top:1px solid var(--bd);padding-top:1.6rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--tx-3)}
.legal address{font-style:normal;max-width:34rem}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .hero-grid,.demo-grid{grid-template-columns:1fr;gap:3rem}
  .demo-copy{order:-1}
  .hero-copy{justify-items:center;text-align:center}
  .hero h1{max-width:none}
  .lede{margin-inline:auto}
  .player{max-width:none;margin-inline:auto;width:100%}
  .chip-1{left:-4%}.chip-2{right:-3%}
  .steps{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr;max-width:32rem;margin-inline:auto}
  .foot{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:grid}
  .calc-grid{grid-template-columns:1fr;gap:2rem}
  .vs{grid-template-columns:1fr}
  .vs-badge{justify-self:center}
  .sec-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
  :root{--shell:min(1200px,100% - 2.4rem)}
  html{scroll-padding-top:74px}
  .steps{grid-template-columns:1fr}
  .stats{gap:.4rem}
  .stat b{font-size:1.4rem}
  .stat span{font-size:.68rem}
  .hero-cta{width:100%;flex-direction:column}
  .hero-cta .btn{width:100%}
  .chip{display:none}
  .card,.plan,.pane{padding:1.4rem}
  .foot{grid-template-columns:1fr;gap:1.6rem}
  .legal{flex-direction:column;text-align:center;align-items:center}
  .soon{flex-direction:column;text-align:center;align-items:center}
  .ctrls .btn{flex:1}
  summary{padding:1rem 1.1rem;font-size:.93rem}
  details .ans{padding:0 1.1rem 1.1rem}
}
@media(max-width:380px){
  .stats{grid-template-columns:1fr;text-align:left}
  .stat{display:flex;align-items:baseline;gap:.6rem}
  .stat span{margin-top:0}
}

/* ============ MOBILE MENU ============ */

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

/* ==================================================================
   ARABIC / RTL LAYER
   Loaded by every page; only applies when dir="rtl".
   Arabic is a connected script — negative letter-spacing breaks the
   joins, so it is reset everywhere, and line-height is opened up
   because Arabic glyphs carry taller ascenders/descenders.
   ================================================================== */
[lang=ar]{
  --font-ar:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;
}
[lang=ar] body,
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4,
[lang=ar] .btn,[lang=ar] .eyebrow,[lang=ar] .brand,
[lang=ar] summary,[lang=ar] .amt,[lang=ar] .stat b,
[lang=ar] .msg,[lang=ar] .wa-card,[lang=ar] .foot h4{
  font-family:var(--font-ar);
  letter-spacing:normal;
}
[lang=ar] body{line-height:1.85}
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,[lang=ar] h4{line-height:1.35}
[lang=ar] h1{font-size:clamp(2.1rem,1.25rem + 3.9vw,3.9rem)}
[lang=ar] h2{font-size:clamp(1.8rem,1.2rem + 2.6vw,2.9rem)}
[lang=ar] .eyebrow{letter-spacing:normal;font-size:.83rem}
[lang=ar] .foot h4{letter-spacing:normal;font-size:.86rem}
[lang=ar] .lede,[lang=ar] .pane li,[lang=ar] .feat p{line-height:1.9}
/* Latin fragments inside Arabic text keep the Latin face + tabular digits */
[lang=ar] code,[lang=ar] .amt .val,[lang=ar] .out b,[lang=ar] .time,[lang=ar] .field label b{
  font-family:'Plus Jakarta Sans',ui-monospace,system-ui,sans-serif;
  font-variant-numeric:tabular-nums;
  direction:ltr;
  unicode-bidi:isolate;
}
[lang=ar] .perm code{text-align:left}

/* ---- mirrored positioning ---- */
[dir=rtl] .chip-1{left:auto;right:-13%}
[dir=rtl] .chip-2{right:auto;left:-11%}
[dir=rtl] .step::after{transform-origin:right}
[dir=rtl] .wa-top .vd{margin-left:0;margin-inline-start:auto}
[dir=rtl] .item .pr{margin-left:0;margin-inline-start:auto}
[dir=rtl] .msg .tm{text-align:left}
/* chat bubble tails flip: in RTL the incoming bubble sits on the right */
[dir=rtl] .msg.in,[dir=rtl] .wa-card,[dir=rtl] .typing{
  border-top-left-radius:10px;border-top-right-radius:3px}
[dir=rtl] .msg.out{border-top-right-radius:10px;border-top-left-radius:3px}
/* the phone tilts the other way so it still leans into the page */
[dir=rtl] .phone{transform:rotateY(11deg) rotateX(3deg)}
[dir=rtl] .phone-wrap:hover .phone{transform:rotateY(4deg) rotateX(1deg)}
[dir=rtl] .btn-1::after{transform:translateX(130%)}
[dir=rtl] .btn-1:hover::after{transform:translateX(-130%)}
[dir=rtl] .bar i{transform-origin:right}
@media(prefers-reduced-motion:reduce){[dir=rtl] .phone{transform:none}}
@media(max-width:1080px){[dir=rtl] .chip-1{right:-4%}[dir=rtl] .chip-2{left:-3%}}

/* ==================================================================
   REFINEMENT PASS — spacing rhythm, mobile nav fit, optical margins
   ================================================================== */

/* --- nav no longer overflows on small phones ---------------------
   Below 760px the "Login" link drops (it is in the drawer); below
   620px the header CTA drops too — both still reachable from the
   drawer, which is what the burger is for. */

/* --- vertical rhythm -------------------------------------------
   Section padding was a single clamp everywhere, which left the
   band sections (demo / security) feeling tighter than the plain
   ones because their borders read as edges. Nudge them out. */
.demo,.sec{padding-block:calc(var(--sp) * 1.25)}
.head{margin-bottom:clamp(1.9rem,3.4vw,2.6rem)}
.hero{padding-bottom:clamp(4.75rem,7vw,6rem)}

/* the footnote sat too close to the stat row it qualifies */
.fnote{margin-top:.35rem}
.hero-copy .fnote{max-width:38rem}

/* calculator: the disclaimer was crowding the output panel */
.calc{margin-top:clamp(2rem,4vw,3.2rem)}
.calc .fnote{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--bd)}

/* pricing: the note under each button hugged it too tightly */
.plan .note{margin-top:-.45rem}
/* popular plan needs headroom so its ribbon never clips the card above */
.plan.pop{margin-top:.7rem}
@media(max-width:1080px){ .plan.pop{margin-top:1.1rem} }

/* trust strip read as cramped against the hero */
.strip{padding-block:1.75rem}
.strip .shell{row-gap:1rem}

/* FAQ answers needed a touch more separation from the question */
details .ans{padding-top:.15rem}
/* stop the summary text colliding with the +/- control on narrow screens */
summary{gap:.9rem;align-items:flex-start}
summary .pm{margin-top:.1rem}

/* industries "coming soon" panel */
.soon{margin-top:1.4rem}

/* --- mobile optical fixes -------------------------------------- */
@media(max-width:620px){
  /* hero was bottom-heavy: tighten the gap stack, open the top */
  .hero{padding-top:clamp(6.5rem,20vw,8rem)}
  .hero-copy{gap:1.25rem}
  .stats{margin-top:.6rem;padding-top:1.25rem}
  /* full-bleed buttons looked cramped against the screen edge */
  .hero-cta{gap:.65rem}
  /* section heads: less air above the eyebrow, more below the title */
  .head{gap:.85rem}
  /* the VS badge stacked awkwardly between the two panes */
  .vs{gap:.85rem}
  .vs-badge{width:40px;height:40px;font-size:.76rem}
  /* calculator output panel */
  .out{padding:1.25rem}
  .out .row{font-size:.85rem}
  /* footer breathing room above the legal line */
  .legal{padding-top:1.4rem;gap:.75rem}
  footer{padding-block:2.6rem 1.75rem}
  .foot{margin-bottom:2rem}
}
@media(max-width:400px){
  /* keep the phone from touching the viewport edges */
  .phone{width:min(300px,88vw)}
  .plan .amt .val{font-size:2.6rem}
}

/* --- Arabic: rhythm differs because the script is taller -------- */
[lang=ar] .head{margin-bottom:clamp(2.05rem,3.7vw,2.85rem)}
[lang=ar] .beat li{line-height:1.6;padding-block:.6rem}
[lang=ar] .plan li,[lang=ar] .pane li{line-height:1.75}
[lang=ar] .micro,[lang=ar] .fnote{line-height:1.8}
[lang=ar] .eyebrow{padding-block:.5rem}
/* Arabic labels are longer — let the calculator label wrap gracefully */
[lang=ar] .field label{align-items:center;gap:.6rem}
[lang=ar] .out .row{gap:.9rem;text-align:start}

/* ==================================================================
   LIVE WHATSAPP DEMO
   ================================================================== */
.live{background:var(--bg-2);border-block:1px solid var(--bd)}
.live-box{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  padding:clamp(1.6rem,3.5vw,2.75rem);border-radius:var(--r-lg);border:1px solid rgba(21,197,148,.3);
  background:linear-gradient(140deg,rgba(21,197,148,.1),transparent 62%);backdrop-filter:blur(14px);position:relative;overflow:hidden}
.live-box::before{content:"";position:absolute;top:-60%;inset-inline-start:-10%;width:55%;aspect-ratio:1;
  background:var(--grad);filter:blur(110px);opacity:.16;pointer-events:none}
.live-copy{display:grid;gap:1rem;justify-items:start;position:relative}
.live-copy h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.35rem)}
.live-copy p{color:var(--tx-2);max-width:34rem}
.live-act{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.wa-num{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.95rem;font-weight:700;
  padding:.7rem 1rem;border-radius:11px;border:1px dashed var(--bd-2);background:var(--card);
  direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.live-steps{list-style:none;padding:0;margin:0;display:grid;gap:.65rem;position:relative}
.live-steps li{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--tx-2);line-height:1.5}
.live-steps .n{width:24px;height:24px;border-radius:50%;background:var(--grad);color:#04120a;
  display:grid;place-items:center;font-size:.72rem;font-weight:800;flex-shrink:0;margin-top:.05rem}
.live-note{font-size:.78rem;color:var(--tx-3);line-height:1.6;margin-top:.2rem}
@media(max-width:900px){ .live-box{grid-template-columns:1fr;gap:1.75rem} }

/* ==================================================================
   CURRENCY SWITCHER
   ================================================================== */
.cur-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:.3rem}
.cur-bar .lbl{font-size:.8rem;color:var(--tx-3);font-weight:600}
.cur-pills{display:inline-flex;gap:.2rem;padding:.25rem;border-radius:12px;border:1px solid var(--bd);background:var(--card)}
.cur-pills button{padding:.4rem .7rem;border-radius:9px;border:0;background:none;cursor:pointer;
  font-size:.82rem;font-weight:700;color:var(--tx-3);transition:.25s var(--ease);letter-spacing:.01em}
.cur-pills button:hover{color:var(--tx)}
.cur-pills button.on{background:var(--grad);color:#04120a}
.fx-note{font-size:.76rem;color:var(--tx-3);text-align:center;margin-top:.85rem}

/* ==================================================================
   PRICING OBJECTIONS
   ================================================================== */
.obj{margin-top:clamp(1.75rem,3.5vw,2.6rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.85rem}
.obj details{background:var(--card);border:1px solid var(--bd);border-radius:var(--r)}
.obj summary{padding:.95rem 1.1rem;font-size:.91rem;gap:.7rem}
.obj summary .pm{width:21px;height:21px}
.obj summary .pm svg{width:11px;height:11px}
.obj .ans{padding:0 1.1rem 1.05rem;font-size:.87rem;line-height:1.65}

/* ==================================================================
   INSIGHTS / ARTICLES
   ================================================================== */
.post-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.15rem}
.post{display:grid;gap:.7rem;align-content:start;text-decoration:none}
.post .kicker{font-size:.73rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.post h3{font-size:1.12rem;line-height:1.3}
.post p{font-size:.9rem;color:var(--tx-2);line-height:1.6}
.post .meta{font-size:.78rem;color:var(--tx-3);margin-top:.15rem}
.post .more{font-size:.86rem;font-weight:700;color:var(--brand);display:flex;align-items:center;gap:.35rem}
.post:hover .more{gap:.6rem}

.article{max-width:44rem;margin-inline:auto}
.crumb{font-size:.82rem;color:var(--tx-3);margin-bottom:1.2rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.crumb a:hover{color:var(--brand)}
.article h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,2.9rem);margin-bottom:1rem}
.article .meta{color:var(--tx-3);font-size:.86rem;margin-bottom:2.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--bd)}
.article h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.7rem);margin:2.4rem 0 .8rem}
.article h3{font-size:1.1rem;margin:1.7rem 0 .55rem}
.article p{margin-bottom:1.1rem;color:var(--tx-2);line-height:1.8}
.article ul,.article ol{margin:0 0 1.2rem;padding-inline-start:1.3rem;color:var(--tx-2);line-height:1.8}
.article li{margin-bottom:.5rem}
.article strong{color:var(--tx);font-weight:700}
.article a:not(.btn){color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.article table{width:100%;border-collapse:collapse;margin-bottom:1.4rem;font-size:.9rem}
.article th,.article td{padding:.7rem .8rem;border:1px solid var(--bd);text-align:start}
.article th{background:var(--card-2);font-weight:700;font-size:.85rem}
.article td{color:var(--tx-2)}
.tablewrap{overflow-x:auto;margin-bottom:1.4rem}
.tablewrap table{margin-bottom:0}
.callout{padding:1.2rem 1.35rem;border-radius:var(--r);border:1px solid rgba(21,197,148,.3);
  background:rgba(21,197,148,.07);margin:1.6rem 0}
.callout p{margin:0;color:var(--tx)}
.article-cta{margin-top:2.6rem;padding:1.75rem;border-radius:var(--r-lg);border:1px solid var(--bd);
  background:var(--card);text-align:center;display:grid;gap:.9rem;justify-items:center}
.article-cta p{margin:0;color:var(--tx-2)}
[lang=ar] .article p,[lang=ar] .article li{line-height:2.05}
[lang=ar] .article h1,[lang=ar] .article h2,[lang=ar] .article h3{line-height:1.45}

/* ==================================================================
   HEADER FIXES + HEADER CURRENCY SELECTOR
   ================================================================== */
/* the burger only ever belonged on small screens; it had no base rule
   and so rendered at every width next to the full nav */
.burger{display:none}
/* labels must never break mid-phrase ("How It / Works") */
.nav-links a{white-space:nowrap}
.nav .shell{flex-wrap:nowrap}
.nav-links{gap:.1rem;flex-wrap:nowrap}
.nav-links a{padding:.5rem .62rem;font-size:.9rem}

/* currency picker lives in the header so it is set before any price is seen */
.cur-sel{position:relative;display:inline-flex;align-items:center}
.cur-sel select{
  appearance:none;-webkit-appearance:none;
  padding:.5rem 1.7rem .5rem .7rem;border-radius:10px;
  border:1px solid var(--bd);background:var(--card);color:var(--tx);
  font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;line-height:1.2;
  transition:.25s var(--ease)}
.cur-sel select:hover{border-color:var(--bd-2)}
.cur-sel::after{content:"";position:absolute;inset-inline-end:.62rem;top:50%;
  width:0;height:0;margin-top:-1px;pointer-events:none;
  border-inline:4px solid transparent;border-top:5px solid var(--tx-3)}
.cur-sel select option{background:var(--bg-2);color:var(--tx)}
[dir=rtl] .cur-sel select{padding:.5rem .7rem .5rem 1.7rem}

@media(max-width:620px){
  .nav .shell{gap:.55rem}
  .cur-sel select{padding:.45rem 1.5rem .45rem .55rem;font-size:.8rem}
}

/* ==================================================================
   V2 — MOBILE HEADER, DRAWER, INTERACTIVE DEMO
   ================================================================== */

/* ---------- header: mobile carries logo + language + burger only --- */
.nav .shell{gap:1rem}
.lang-btn{width:auto;padding:0 .7rem;font-weight:700;font-size:.85rem;white-space:nowrap}
.burger{display:none;position:relative}
.burger-ic{display:grid;gap:4px;width:17px}
.burger-ic i{display:block;height:2px;border-radius:2px;background:currentColor;transition:.38s var(--ease)}
.burger[aria-expanded=true] .burger-ic i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] .burger-ic i:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger[aria-expanded=true] .burger-ic i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.cur-sel{position:relative;display:inline-flex}
.cur-pick{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:.5rem 1.65rem .5rem .75rem;border-radius:10px;border:1px solid var(--bd);
  background:var(--card);color:var(--tx);font:inherit;font-size:.85rem;font-weight:700;
  transition:.25s var(--ease)}
.cur-pick:hover{border-color:var(--bd-2)}
.cur-sel::after{content:"";position:absolute;inset-inline-end:.6rem;top:50%;width:6px;height:6px;
  border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);
  transform:translateY(-70%) rotate(45deg);pointer-events:none}
.cur-pick option{background:var(--bg-2);color:var(--tx)}

@media(max-width:1120px){
  .nav-links a{padding:.5rem .5rem;font-size:.86rem}
  .nav-act{gap:.4rem}
}
/* One collapse point for the whole header: below this the bar carries
   only logo + language + menu, and everything else lives in the drawer.
   Raised from 1080px: with nine items in the bar, the English header's
   "Try the live bot" button ran up to 67px off-screen between 1081 and
   1160px (iPad landscape is 1180px) and cleared by 1px up to 1240px. */
@media(max-width:1240px){
  .nav-links{display:none}
  .burger{display:grid}
  .desk-only{display:none!important}
  .nav .shell{gap:.6rem}
  .nav-act{margin-inline-start:auto}
}

/* ---------- scrim ---------- */
.scrim{position:fixed;inset:0;z-index:190;background:rgba(4,8,12,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .38s var(--ease)}
.scrim.on{opacity:1;pointer-events:auto}
body.locked{overflow:hidden}

/* ---------- drawer: a real side panel ---------- */
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:200;
  width:min(360px,88vw);display:flex;flex-direction:column;gap:.25rem;
  padding:1rem 1.15rem 1.35rem;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-2);border-inline-start:1px solid var(--bd);
  box-shadow:-30px 0 80px -30px rgba(0,0,0,.6);
  transform:translateX(102%);visibility:hidden;
  transition:transform .46s var(--ease),visibility 0s linear .46s}
[dir=rtl] .drawer{transform:translateX(-102%);box-shadow:30px 0 80px -30px rgba(0,0,0,.6)}
.drawer.open{transform:none;visibility:visible;transition:transform .46s var(--ease),visibility 0s}
.drawer-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--bd);margin-bottom:.5rem}
.drawer-top .brand{font-size:1.05rem}
.drawer-nav{display:grid;gap:.1rem;padding-block:.35rem}
.drawer-nav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.78rem .7rem;border-radius:12px;font-size:1rem;font-weight:600;color:var(--tx-2);
  transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)}
.drawer-nav a svg{width:15px;height:15px;opacity:.4;transition:.25s var(--ease)}
[dir=rtl] .drawer-nav a svg{transform:scaleX(-1)}
.drawer-nav a:hover,.drawer-nav a:focus-visible{background:var(--card-2);color:var(--tx)}
.drawer-nav a:hover svg{opacity:.9;transform:translateX(3px)}
[dir=rtl] .drawer-nav a:hover svg{transform:translateX(-3px) scaleX(-1)}
.drawer.open .drawer-nav a{animation:drawerIn .45s var(--ease) both;animation-delay:calc(60ms + var(--i) * 28ms)}
@keyframes drawerIn{from{opacity:0;transform:translateX(14px)}}
[dir=rtl] .drawer.open .drawer-nav a{animation-name:drawerInR}
@keyframes drawerInR{from{opacity:0;transform:translateX(-14px)}}
.drawer-rows{display:grid;gap:.5rem;margin-top:.7rem;padding-top:.9rem;border-top:1px solid var(--bd)}
.drawer-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.2rem .7rem}
.drawer-row .lbl{font-size:.88rem;font-weight:600;color:var(--tx-3)}
.drawer-foot{display:grid;gap:.55rem;margin-top:auto;padding-top:1.1rem}
.drawer-foot .btn{width:100%}
@media(prefers-reduced-motion:reduce){
  .drawer{transition:none}
  .drawer.open .drawer-nav a{animation:none}
}

/* ---------- demo: mode tabs ---------- */
.mode-tabs{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:14px;
  border:1px solid var(--bd);background:var(--card);backdrop-filter:blur(10px)}
.mode-tabs button{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  padding:.6rem 1rem;border-radius:11px;border:0;background:none;
  font-size:.9rem;font-weight:700;color:var(--tx-3);transition:.3s var(--ease);white-space:nowrap}
.mode-tabs button svg{width:15px;height:15px}
.mode-tabs button:hover{color:var(--tx)}
.mode-tabs button.on{background:var(--grad);color:#04120a;box-shadow:0 6px 18px -8px rgba(21,197,148,.7)}

/* ---------- beats become seekable ---------- */
.beat li{cursor:pointer;user-select:none;position:relative}
.beat li:hover{color:var(--tx);background:var(--card-2)}
.beat li:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.beat li.on .n{box-shadow:0 0 0 4px rgba(21,197,148,.16)}

/* ---------- phone: tappable thread ---------- */
.screen{position:relative}
.item.tap,.wa-btn.tap{cursor:pointer;font:inherit;border:0;width:100%;text-align:inherit}
.item.tap{background:rgba(255,255,255,.055);border:1px solid transparent;transition:.2s var(--ease)}
.item.tap:hover{background:rgba(21,197,148,.14);border-color:rgba(21,197,148,.32);transform:translateY(-1px)}
.item.tap:active{transform:scale(.985)}
.item.tot{background:rgba(21,197,148,.1);border:1px solid rgba(21,197,148,.22);margin-top:.3rem}
.item.tot .nm{font-weight:800}
.wa-btn{cursor:default;transition:.2s var(--ease)}
.wa-btn.tap:hover{background:rgba(21,197,148,.26);transform:translateY(-1px)}
.wa-btn.tap:active{transform:scale(.985)}
.wa-btn.primary{background:var(--grad);color:#04120a;border-color:transparent;font-weight:800}
.wa-btn.primary:hover{filter:brightness(1.06)}
.wa-btn.spent,.item.tap.spent{opacity:.42;pointer-events:none;filter:grayscale(.3)}
.pay-q{font-size:.66rem;color:#8fa3ad;margin:.45rem 0 .1rem;text-align:center}

/* ---------- composer ---------- */
.wa-input{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;flex-shrink:0;
  background:#1f2c33;border-top:1px solid rgba(255,255,255,.06)}
.wa-input .ci{font-size:.85rem;opacity:.7;flex-shrink:0}
.wa-input .ct{flex:1;font-size:.72rem;color:#8fa3ad;background:#2a3942;border-radius:99px;
  padding:.4rem .7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wa-input.armed .ct{color:#e9edef}
.wa-input .cs{width:28px;height:28px;flex-shrink:0;border:0;border-radius:50%;cursor:pointer;
  background:#2a3942;color:#8fa3ad;display:grid;place-items:center;transition:.28s var(--ease)}
.wa-input .cs svg{width:13px;height:13px}
[dir=rtl] .wa-input .cs svg{transform:scaleX(-1)}
.wa-input.armed .cs{background:var(--brand);color:#04120a;animation:sendPulse 2.4s ease-in-out infinite}
.wa-input.armed{cursor:pointer}
@keyframes sendPulse{0%,100%{box-shadow:0 0 0 0 rgba(21,197,148,.55)}50%{box-shadow:0 0 0 7px rgba(21,197,148,0)}}
.demo-stage[data-mode=watch] .wa-input{display:none}
.demo-stage[data-mode=live] .replay{display:none}
@media(prefers-reduced-motion:reduce){.wa-input.armed .cs{animation:none}}

/* ---------- phone parallax (desktop pointer only) ---------- */
@media(hover:hover) and (pointer:fine){
  .phone{transform:rotateY(calc(-11deg + var(--px,0deg))) rotateX(calc(3deg + var(--py,0deg)));
    transition:transform .5s var(--ease)}
  [dir=rtl] .phone{transform:rotateY(calc(11deg + var(--px,0deg))) rotateX(calc(3deg + var(--py,0deg)))}
}
@media(prefers-reduced-motion:reduce){.phone{transform:none!important}}

/* ==================================================================
   RESPONSIVE SWEEP
   ================================================================== */
@media(max-width:1080px){
  .mode-tabs{align-self:center}
}
@media(max-width:620px){
  .mode-tabs{width:100%}
  .mode-tabs button{flex:1;justify-content:center;padding:.6rem .5rem;font-size:.85rem}
  .beat li{font-size:.84rem;padding:.55rem .6rem}
  .ctrls{width:100%}
  .ctrls .btn{flex:1}
  .drawer{width:min(340px,92vw)}
}
@media(max-width:400px){
  .nav .shell{gap:.45rem}
  .brand{font-size:1rem;gap:.45rem}
  .brand .mark{width:30px;height:30px;border-radius:9px}
  .brand .mark svg{width:16px;height:16px}
  .lang-btn{padding:0 .55rem;font-size:.8rem}
  .icon-btn{width:35px;height:35px}
}
@media(max-width:340px){
  .brand span:not(.mark){display:none}
}

/* watch-only controls follow the demo mode, set on the section */
#demo[data-mode=live] .watch-only{display:none}

/* ==================================================================
   V3 — MOTION SYSTEM
   One easing/duration scale everything else references, so the whole
   page moves with a single personality instead of per-component guesses.
   ================================================================== */
:root{
  --e-out:cubic-bezier(.22,1,.36,1);      /* decelerate: things arriving   */
  --e-io:cubic-bezier(.65,0,.35,1);       /* symmetric: things moving      */
  --e-spring:cubic-bezier(.34,1.4,.64,1); /* slight overshoot: confirmations */
  --d-xs:.16s; --d-sm:.26s; --d-md:.4s; --d-lg:.62s; --d-xl:.9s;
  --stagger:70ms;
}

/* ---------- reveal: rise + settle, with a stagger hook ---------- */
.rv{opacity:0;transform:translate3d(0,22px,0) scale(.988);
  transition:opacity var(--d-lg) var(--e-out),transform var(--d-lg) var(--e-out);
  will-change:opacity,transform}
.rv.in{opacity:1;transform:none;will-change:auto}
/* directional variants for side-by-side blocks */
.rv-l{transform:translate3d(-26px,0,0)}
.rv-r{transform:translate3d(26px,0,0)}
[dir=rtl] .rv-l{transform:translate3d(26px,0,0)}
[dir=rtl] .rv-r{transform:translate3d(-26px,0,0)}

/* cards lift a touch more, so grids feel layered rather than flat */
.card.rv,.plan.rv,.step.rv{transform:translate3d(0,26px,0) scale(.985)}

/* ---------- consistent interactive feedback ---------- */
.btn,.icon-btn,.mode-tabs button,.beat li,.drawer-nav a,.cur-pick{
  transition:transform var(--d-sm) var(--e-out),background var(--d-sm) var(--e-out),
             border-color var(--d-sm) var(--e-out),color var(--d-sm) var(--e-out),
             box-shadow var(--d-sm) var(--e-out),opacity var(--d-sm) var(--e-out)}
.btn:active,.icon-btn:active,.mode-tabs button:active{transform:scale(.97)}

/* ==================================================================
   SIGNATURE MOMENT — the hero conversation writes itself on load
   ================================================================== */
.hero .phone{animation:phoneWake 1.1s var(--e-out) both}
@keyframes phoneWake{
  from{opacity:0;transform:rotateY(-18deg) rotateX(7deg) translateY(26px) scale(.94)}
}
[dir=rtl] .hero .phone{animation-name:phoneWakeR}
@keyframes phoneWakeR{
  from{opacity:0;transform:rotateY(18deg) rotateX(7deg) translateY(26px) scale(.94)}
}
/* a light sweeps across the screen as it comes alive */
.hero .screen::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%);
  transform:translateX(-120%);animation:sweep 1.5s var(--e-io) .55s both}
@keyframes sweep{to{transform:translateX(120%)}}
/* then each bubble lands in sequence, like the thread is live */
.hero .chat > *{animation:bubbleIn .5s var(--e-spring) both;
  animation-delay:calc(.75s + var(--n,0) * .42s)}
@keyframes bubbleIn{from{opacity:0;transform:translateY(12px) scale(.92)}}
.hero .chat .msg.out{transform-origin:100% 100%}
.hero .chat .msg.in,.hero .chat .wa-card{transform-origin:0 100%}
[dir=rtl] .hero .chat .msg.out{transform-origin:0 100%}
[dir=rtl] .hero .chat .msg.in,[dir=rtl] .hero .chat .wa-card{transform-origin:100% 100%}
/* the floating chips arrive after the conversation settles */
@keyframes chipIn{from{opacity:0;transform:translateY(10px) scale(.9)}}

@media(prefers-reduced-motion:reduce){
  .hero .phone,.hero .chat > *,.hero .chip-1,.hero .chip-2{animation:none;opacity:1}
  .hero .screen::after{display:none}
}

/* ==================================================================
   SCROLL PROGRESS RAIL
   ================================================================== */
.rail{position:fixed;top:50%;inset-inline-end:clamp(.9rem,1.7vw,1.9rem);z-index:80;
  transform:translateY(-50%);display:none;flex-direction:column;gap:.95rem;
  padding:.55rem .3rem;animation:railIn .7s var(--e-out) 1.1s both}
@keyframes railIn{from{opacity:0;transform:translateY(-50%) translateX(12px)}}
@media(min-width:1180px){ .rail{display:flex} }
.rail-track{position:absolute;inset-inline-start:50%;top:.2rem;bottom:.2rem;width:2px;
  transform:translateX(-50%);background:var(--bd);border-radius:2px;overflow:hidden}
.rail-fill{display:block;width:100%;height:100%;background:var(--grad);
  transform-origin:top;transform:scaleY(0)}
/* buttery progress with zero JS where the browser supports it */
@supports (animation-timeline: scroll()){
  .rail-fill{animation:railGrow linear both;animation-timeline:scroll(root block)}
  @keyframes railGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
.rail a{position:relative;display:flex;align-items:center;gap:.6rem;justify-content:flex-end;
  text-decoration:none}
[dir=rtl] .rail a{justify-content:flex-start;flex-direction:row-reverse}
.rail .dot{width:9px;height:9px;border-radius:50%;background:var(--bd-2);flex-shrink:0;
  position:relative;z-index:1;transition:transform var(--d-sm) var(--e-spring),background var(--d-sm)}
.rail .lbl{position:absolute;inset-inline-end:1.5rem;white-space:nowrap;font-size:.74rem;
  font-weight:700;letter-spacing:.02em;color:var(--tx-2);
  padding:.28rem .6rem;border-radius:8px;background:var(--card);border:1px solid var(--bd);
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity var(--d-sm) var(--e-out),transform var(--d-sm) var(--e-out)}
[dir=rtl] .rail .lbl{inset-inline-end:auto;inset-inline-start:1.5rem;transform:translateX(-8px)}
.rail a:hover .lbl,.rail a:focus-visible .lbl{opacity:1;transform:none}
.rail a:hover .dot{transform:scale(1.35);background:var(--tx-2)}
.rail a.on .dot{background:var(--grad);transform:scale(1.45);
  box-shadow:0 0 0 4px rgba(21,197,148,.18)}
@media(prefers-reduced-motion:reduce){ .rail{animation:none;opacity:1} }

/* ==================================================================
   SOUND TOGGLE
   ================================================================== */
.tabs-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.sfx .w1,.sfx .w2{transition:opacity var(--d-sm) var(--e-out)}
.sfx .mute{opacity:1;transition:opacity var(--d-sm) var(--e-out)}
.sfx[aria-pressed=true]{border-color:rgba(21,197,148,.45);color:var(--brand)}
.sfx[aria-pressed=true] .mute{opacity:0}
.sfx[aria-pressed=false] .w1,.sfx[aria-pressed=false] .w2{opacity:.25}
.sfx svg{width:17px;height:17px}
@media(max-width:620px){ .tabs-row{width:100%} .tabs-row .mode-tabs{flex:1} }

/* ==================================================================
   VIEW TRANSITIONS — the page morphs when switching language
   ================================================================== */
@view-transition{ navigation:auto }
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;
    animation-timing-function:cubic-bezier(.22,1,.36,1)}
  /* these persist across the navigation and slide to their mirrored side */
  .nav .brand{view-transition-name:brand}
  .hero .phone-wrap{view-transition-name:heroPhone}
  .nav .lang-btn{view-transition-name:langBtn}
  ::view-transition-group(brand),
  ::view-transition-group(heroPhone),
  ::view-transition-group(langBtn){animation-duration:.55s;
    animation-timing-function:cubic-bezier(.65,0,.35,1)}
}

/* ==================================================================
   V4 — SMALLER PHONE, AUTHENTIC WHATSAPP THREAD, SLOWER HERO CASCADE
   ================================================================== */

/* ---------- phone: shorter, so the composer sits above the fold ---------- */
.phone{width:min(288px,78vw);aspect-ratio:9/17.1;padding:9px;border-radius:38px}
.phone::before{height:19px;width:32%}
.screen{border-radius:30px}
@media(max-width:1080px){ .phone{width:min(300px,80vw)} }
@media(max-width:400px){ .phone{width:min(272px,86vw)} }

/* ---------- WhatsApp chrome ---------- */
.wa-top{padding:1.6rem .65rem .5rem}
.wa-av{width:28px;height:28px;font-size:.74rem}
.wa-nm{font-size:.78rem}
.wa-st{font-size:.62rem}
.wa-top .vd svg{width:14px;height:14px}
.chat{padding:.6rem .5rem .8rem;gap:.3rem}

/* ---------- bubbles ---------- */
.msg{max-width:80%;padding:.4rem .55rem;font-size:.715rem;line-height:1.42;border-radius:8px}
.msg.in{border-top-left-radius:2px}
.msg.out{border-top-right-radius:2px}
[dir=rtl] .msg.in{border-top-left-radius:8px;border-top-right-radius:2px}
[dir=rtl] .msg.out{border-top-right-radius:8px;border-top-left-radius:2px}
.msg .tm{font-size:.54rem;margin-top:.12rem;opacity:.75}

/* ---------- list / interactive cards: flat rows, hairline dividers ------- */
.wa-card{background:#1f2c33;border-radius:8px;padding:0;overflow:hidden;
  max-width:84%;align-self:flex-start;border-top-left-radius:2px}
[dir=rtl] .wa-card{border-top-left-radius:8px;border-top-right-radius:2px}
.wa-card .ttl{padding:.5rem .6rem .35rem;margin:0;font-size:.685rem;font-weight:700;
  color:#e9edef;letter-spacing:.01em;display:block}
.wa-card.pay{background:#1f2c33;border:0}

.item{display:flex;align-items:center;gap:.5rem;margin:0;border-radius:0;
  padding:.4rem .6rem;background:none;border:0;border-top:1px solid rgba(255,255,255,.055);
  width:100%;text-align:start}
.item .ic{width:22px;height:22px;border-radius:5px;font-size:.72rem;
  background:rgba(255,255,255,.06);flex-shrink:0}
.item .nm{font-size:.685rem;font-weight:500;color:#e9edef;line-height:1.35;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.item .pr{font-size:.665rem;font-weight:600;color:#a7b8c2;flex-shrink:0;
  font-variant-numeric:tabular-nums;margin-inline-start:auto}
.item.tap:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.055);transform:none}
.item.tap:active{background:rgba(255,255,255,.08);transform:none}
.item.tot{background:rgba(255,255,255,.035);border-top:1px solid rgba(255,255,255,.1)}
.item.tot .nm{font-weight:700}
.item.tot .pr{color:#e9edef;font-weight:800}

/* ---------- reply buttons: WhatsApp renders these as full-width rows ----- */
.wa-btn{display:block;width:100%;margin:0;padding:.5rem .55rem;border-radius:0;
  border:0;border-top:1px solid rgba(255,255,255,.09);background:none;
  color:#53bdeb;font-size:.68rem;font-weight:600;text-align:center;letter-spacing:.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-btn.tap:hover{background:rgba(83,189,235,.09);transform:none}
.wa-btn.tap:active{background:rgba(83,189,235,.16);transform:none}
.wa-btn.primary{background:none;color:#53bdeb;font-weight:700}
.wa-btn.primary:hover{filter:none;background:rgba(83,189,235,.09)}
.wa-btn.spent,.item.tap.spent{opacity:.38;filter:none}
/* quick replies that sit inside a normal bubble read as pills instead */
.msg .wa-btn{margin-top:.3rem;border-radius:6px;border:1px solid rgba(83,189,235,.28);
  background:rgba(83,189,235,.07);padding:.36rem .5rem;font-size:.665rem}
.msg .wa-btn:first-of-type{margin-top:.42rem}
.pay-q{font-size:.63rem;color:#8fa3ad;padding:.45rem .6rem .1rem;margin:0;text-align:center}

/* ---------- tracking list ---------- */
.trk{padding:.15rem .6rem .55rem;gap:.28rem}
.trk div{font-size:.635rem}
.trk .bx{width:11px;height:11px;font-size:.46rem}

/* ---------- composer ---------- */
.wa-input{padding:.4rem .5rem}
.wa-input .ct{font-size:.685rem;padding:.38rem .65rem}
.wa-input .cs{width:26px;height:26px}
.wa-input .cs svg{width:12px;height:12px}

/* ==================================================================
   HERO CASCADE — paced so each message can actually be read
   ================================================================== */
.hero .chat > *{animation-delay:calc(.9s + var(--n,0) * 1.4s)}
/* The chips announce events in the thread, so they must land AFTER those
   events, not before. Cascade is .9s + n * 1.4s with a .5s settle:
   n=4 "Chicken Shawarma x2" settles at 7.0s  -> "New order received"
   n=5 the paid order card settles at 8.4s    -> "Payment confirmed"     */
.hero .chip-1{animation:float 6s ease-in-out 7s infinite,chipIn .6s var(--e-spring) 7s both}
.hero .chip-2{animation:float 6s ease-in-out 8.4s infinite,chipIn .6s var(--e-spring) 8.4s both}

/* ==================================================================
   INDUSTRIES — the "coming soon" panel was crowding the cards above
   ================================================================== */
.soon{margin-top:clamp(1.6rem,2.6vw,2.2rem);padding:clamp(1.4rem,2.4vw,1.85rem)}
.soon h3{margin-bottom:.15rem}
@media(max-width:620px){ .soon{gap:1rem} }

/* ==================================================================
   V5 — CHAT SCROLLING
   The replay overlay covered the whole screen with pointer-events:auto,
   so once the 30s demo finished you could not scroll back through the
   conversation underneath it. Only its button needs to be clickable.
   ================================================================== */
.replay{pointer-events:none}
.replay.show{pointer-events:none}
.replay button{pointer-events:auto}

/* flexbox hygiene: without min-height:0 a flex child refuses to shrink
   below its content, so overflow gets clipped instead of scrolling */
.chat{min-height:0}

/* a slim scrollbar so it is discoverable that the thread scrolls */
.chat{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.chat::-webkit-scrollbar{display:block;width:4px}
.chat::-webkit-scrollbar-track{background:transparent}
.chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:4px}
.chat:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}

/* The chat is a column flexbox, so its children were shrinking to fit the
   available height — cards were squashed (a 181px card rendering at 70px)
   and the thread never overflowed, which is why it never scrolled. */
.chat > *{flex:0 0 auto}

/* ==================================================================
   V6 — BUTTON TYPE BUG, PHONE SIZES, HERO SPACING, PREMIUM PASS
   ================================================================== */

/* `font: inherit` on the tappable variants was pulling the page's 16px
   through and beating the .wa-btn size rule on specificity, so only the
   clickable rows rendered huge. Inherit the family, not the whole font. */
.item.tap, .wa-btn.tap{font:unset;font-family:inherit;font-weight:inherit;
  letter-spacing:inherit;line-height:inherit}
.wa-btn, .wa-btn.tap, .wa-btn.primary{font-size:.68rem;line-height:1.35}
.msg .wa-btn, .msg .wa-btn.tap{font-size:.665rem}
.item.tap{font-size:.685rem}
.item.tap .nm{font-size:.685rem}
.item.tap .pr{font-size:.665rem}

/* ---------- phone sizes: hero stays the showpiece, demo fits on screen --- */
.hero .phone{width:min(330px,84vw);aspect-ratio:9/19;padding:11px;border-radius:44px}
.hero .phone::before{height:23px;width:34%}
.hero .screen{border-radius:34px}
/* (removed: the hero phone now carries id="demo", so this ID rule was
   overriding every .hero .phone size below it) */
@media(max-width:1080px){ .hero .phone{width:min(320px,82vw)} }
@media(max-width:400px){ .hero .phone{width:min(288px,88vw)} }

/* ---------- hero: too much dead air under the fixed header ---------- */
.hero{padding-top:clamp(5.6rem,7.6vw,7rem)}
@media(max-width:620px){ .hero{padding-top:clamp(5.2rem,17vw,6.4rem)} }

/* ==================================================================
   PREMIUM PASS
   ================================================================== */

/* 1. a soft light follows the pointer across the hero */
.hero{position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .6s var(--e-out);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),
    rgba(21,197,148,.10), rgba(10,155,140,.06) 40%, transparent 68%)}
.hero.lit::before{opacity:1}
@media(hover:none){ .hero::before{display:none} }

/* 2. cards get a gradient hairline that lights on hover */
.card,.plan,.step,.pane,.calc,.live-box,.perm,.soon{position:relative}
.card::after,.plan::after,.step::after,.feat::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  padding:1px;background:linear-gradient(140deg,rgba(21,197,148,.55),rgba(10,155,140,.35) 45%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:0;transition:opacity .45s var(--e-out)}
.card:hover::after,.plan:hover::after,.step:hover::after{opacity:1}
.plan.pop::after{opacity:.55}
.plan.pop:hover::after{opacity:1}
/* the step rule already used ::after for its top bar — keep that on top */
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:1;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e-out)}
[dir=rtl] .step::before{transform-origin:right}
.step:hover::before{transform:scaleX(1)}

/* 3. hairline gradient rules between sections, so the page reads as chapters */
section + section:not(.demo):not(.sec):not(.live)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1200px,92%);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--bd) 22%,var(--bd) 78%,transparent)}

/* 4. headline shine — a slow sweep across the gradient words */
.grad{background-size:200% 100%;animation:shine 9s linear infinite}
@keyframes shine{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){ .grad{animation:none} }

/* 5. eyebrow pills feel more deliberate */
.eyebrow{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.eyebrow .dot{animation:dotPulse 2.6s ease-in-out infinite}
@keyframes dotPulse{50%{transform:scale(1.35);opacity:.75}}
@media(prefers-reduced-motion:reduce){ .eyebrow .dot{animation:none} }

/* ---------- the two "try" entry points must not look identical ---------- */
.try-note{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;
  color:var(--tx-3);font-weight:600}
.try-note svg{width:14px;height:14px;flex-shrink:0}
.try-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.badge-real{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(21,197,148,.14);color:var(--brand);
  border:1px solid rgba(21,197,148,.34)}
.badge-sim{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;
  border-radius:99px;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:var(--card-2);color:var(--tx-3);
  border:1px solid var(--bd)}

/* ==================================================================
   V7 — LIGHT MODE WITH ITS OWN CHARACTER
   Not an inverted dark theme: warm paper, ink-brown text, a deeper
   green that actually holds contrast on a light ground.
   ================================================================== */
:root[data-theme=light]{
  --bg:#faf7f1; --bg-2:#f3ede3; --bg-3:#fffdf9;
  --card:#fffdf9; --card-2:#fbf6ee;
  --bd:rgba(61,47,32,.13); --bd-2:rgba(61,47,32,.24);
  --tx:#1c1512; --tx-2:#5a4e44; --tx-3:#8b7d6f;
  --brand:#04936f; --brand-2:#037a5d; --accent:#067f73; --accent-2:#19ad8a;
  --shadow:0 22px 50px -26px rgba(74,56,36,.30);
  --glow:0 0 48px -20px rgba(4,147,111,.42);
  --grad:linear-gradient(120deg,var(--brand) 0%,var(--accent-2) 55%,var(--accent) 100%);
}
/* paper grain reads as texture rather than noise */
:root[data-theme=light] .grain{opacity:.12;mix-blend-mode:multiply}
:root[data-theme=light] .aurora i:nth-child(1){background:radial-gradient(circle,#e8c98a,transparent 65%)}
:root[data-theme=light] .aurora i:nth-child(2){background:radial-gradient(circle,#a9e6d3,transparent 65%)}
:root[data-theme=light] .aurora i:nth-child(3){background:radial-gradient(circle,#9fd8c4,transparent 65%)}
:root[data-theme=light] .aurora i{opacity:.42;filter:blur(90px)}
/* cards sit on the paper rather than glowing out of it */
:root[data-theme=light] .card,
:root[data-theme=light] .plan,
:root[data-theme=light] .step,
:root[data-theme=light] .pane,
:root[data-theme=light] .calc,
:root[data-theme=light] .perm{box-shadow:0 1px 2px rgba(74,56,36,.05),0 10px 24px -18px rgba(74,56,36,.30)}
:root[data-theme=light] .nav.stuck{background:color-mix(in srgb,var(--bg) 86%,transparent)}
:root[data-theme=light] .btn-1{color:#fffdf9}
:root[data-theme=light] .mode-tabs button.on,
:root[data-theme=light] .cur-pills button.on{color:#fffdf9}
:root[data-theme=light] .brand .mark svg{stroke:#fffdf9}
:root[data-theme=light] .replay{background:rgba(28,21,18,.55)}
:root[data-theme=light] .badge-real{background:rgba(4,147,111,.12)}
/* the phone stays dark — it is WhatsApp, not our chrome */

/* ==================================================================
   INDUSTRY ICONS — a consistent line set instead of emoji
   ================================================================== */
.ind .em{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:linear-gradient(140deg,rgba(21,197,148,.14),rgba(10,155,140,.10));
  border:1px solid var(--bd);transition:transform var(--d-md) var(--e-spring)}
.ind:hover .em{transform:translateY(-2px) rotate(-4deg)}
.ind .em svg{width:21px;height:21px;color:var(--brand)}

/* ==================================================================
   "WHERE THE MONEY GOES" — the comparison as a graphic, not a list
   ================================================================== */
.split{margin-top:clamp(1.8rem,3.4vw,2.8rem);padding:clamp(1.5rem,3vw,2.3rem);
  border-radius:var(--r-lg);border:1px solid var(--bd);background:var(--card);
  backdrop-filter:blur(14px)}
.split h3{margin-bottom:.35rem}
.split > p{color:var(--tx-2);font-size:.92rem;margin-bottom:1.5rem}
.split-row{display:grid;grid-template-columns:132px 1fr;gap:1rem;align-items:center;margin-bottom:.9rem}
.split-lbl{font-size:.9rem;font-weight:700;display:flex;flex-direction:column;gap:.1rem}
.split-lbl small{font-size:.74rem;font-weight:600;color:var(--tx-3)}
.split-bar{display:flex;height:42px;border-radius:11px;overflow:hidden;border:1px solid var(--bd)}
.split-bar i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:.82rem;font-weight:800;letter-spacing:.01em;
  transform-origin:left;animation:barGrow 1s var(--e-out) both}
[dir=rtl] .split-bar i{transform-origin:right}
@keyframes barGrow{from{transform:scaleX(.001)}}
.split-bar .them{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;min-width:3.4rem}
.split-bar .them.ok{background:var(--grad);color:#04120a;min-width:2.8rem}
.split-bar .you{background:var(--card-2);color:var(--tx-2);flex:1;border-inline-start:1px solid var(--bd)}
.split-note{font-size:.8rem;color:var(--tx-3);line-height:1.6;margin-top:.9rem;
  padding-top:.9rem;border-top:1px solid var(--bd)}
@media(prefers-reduced-motion:reduce){ .split-bar i{animation:none} }
@media(max-width:620px){
  .split-row{grid-template-columns:1fr;gap:.45rem;margin-bottom:1.2rem}
  .split-bar{height:38px}
  .split-bar i{font-size:.76rem}
}

/* ==================================================================
   PRICING — editorial treatment
   ================================================================== */
.price-grid{align-items:stretch}
.plan.pop{transform:scale(1.03);z-index:2}
.plan.pop:hover{transform:scale(1.03) translateY(-5px)}
@media(max-width:1080px){ .plan.pop,.plan.pop:hover{transform:none} }
.plan .nm{display:flex;align-items:center;gap:.5rem}
.plan .idx{font-size:.7rem;font-weight:800;color:var(--tx-3);letter-spacing:.12em}

.crossover{margin-top:clamp(1.5rem,3vw,2.2rem);display:flex;gap:1.1rem;align-items:flex-start;
  padding:clamp(1.2rem,2.4vw,1.7rem);border-radius:var(--r-lg);
  border:1px solid rgba(21,197,148,.30);
  background:linear-gradient(135deg,rgba(21,197,148,.09),transparent 62%)}
.crossover .x-ic{width:40px;height:40px;flex-shrink:0;border-radius:12px;display:grid;place-items:center;
  background:var(--grad);color:#04120a}
.crossover .x-ic svg{width:19px;height:19px}
.crossover b{display:block;font-size:1.02rem;letter-spacing:-.02em;margin-bottom:.3rem}
.crossover p{font-size:.9rem;color:var(--tx-2);line-height:1.65;margin:0}
@media(max-width:620px){ .crossover{flex-direction:column;gap:.85rem} }

/* the pricing objections read as a deliberate block, not stray FAQ cards */
.obj-head{margin-top:clamp(2rem,4vw,3rem);margin-bottom:1.1rem;text-align:center;display:grid;gap:.35rem}
.obj-head h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)}
.obj-head p{font-size:.9rem;color:var(--tx-3)}
/* the split now follows the calculator, so it needs its own separation */
.split{margin-top:clamp(1.4rem,2.6vw,2rem)}
.split h3{font-size:clamp(1.15rem,1.05rem + .6vw,1.5rem)}
.split-bar i{transition:flex-basis .5s var(--e-out)}

/* ==================================================================
   V8 — LANGUAGE BUTTON + PAGE TRANSITION FALLBACK
   ================================================================== */

/* The English page loads a Latin-only face, so the Arabic label fell back
   to a system font whose metrics clipped inside a fixed 38px grid cell.
   Give it a real Arabic stack, its own line-height and room to breathe. */
.lang-btn{display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:auto;min-height:38px;padding:.36rem .78rem;
  font-family:"Segoe UI","Noto Sans Arabic","Geeza Pro","Tahoma","IBM Plex Sans Arabic",sans-serif;
  font-size:.9rem;font-weight:700;line-height:1.5;letter-spacing:normal;white-space:nowrap}
[lang=ar] .lang-btn{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-size:.85rem}
.drawer a[hreflang]{font-family:"Segoe UI","Noto Sans Arabic","Geeza Pro","Tahoma",sans-serif}

/* A cross-fade for browsers without cross-document view transitions, so
   the language switch never looks like a hard reload. */
body{opacity:1;transition:opacity .22s var(--e-out)}
body.leaving{opacity:0}
html.no-vt body{animation:pageIn .34s var(--e-out) both}
@keyframes pageIn{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){
  body,body.leaving{transition:none;opacity:1}
  html.no-vt body{animation:none}
}

/* Make the supported transition actually readable: the layout mirrors,
   so slide the old page out the way the text direction is going. */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .42s var(--e-io) both}
  ::view-transition-new(root){animation:vtIn .42s var(--e-io) both}
  @keyframes vtOut{to{opacity:0;transform:translateX(-3%) scale(.99)}}
  @keyframes vtIn{from{opacity:0;transform:translateX(3%) scale(.99)}}
}

/* ==================================================================
   BACK TO TOP
   ================================================================== */
.to-top{position:fixed;z-index:95;
  bottom:clamp(1rem,2.2vw,1.6rem);right:clamp(1rem,2.2vw,1.6rem);
  inset-block-end:clamp(1rem,2.2vw,1.6rem);
  inset-inline-end:clamp(1rem,2.2vw,1.6rem);
  width:46px;height:46px;border-radius:50%;border:0;
  background:#15c594;color:#04120a;
  box-shadow:0 10px 26px -8px rgba(21,197,148,.65),0 2px 6px rgba(0,0,0,.3);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;pointer-events:none;transform:translateY(14px) scale(.9);
  transition:opacity .32s var(--e-out),transform .32s var(--e-spring),background .25s}
.to-top svg{width:19px;height:19px}
.to-top.on{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:#10b083;transform:translateY(-3px);box-shadow:0 16px 34px -10px rgba(21,197,148,.8),0 2px 6px rgba(0,0,0,.3)}
.to-top:active{transform:scale(.94)}
/* keep clear of the section rail on wide screens */
@media(min-width:1180px){ .to-top{right:clamp(3.4rem,4.6vw,5rem);inset-inline-end:clamp(3.4rem,4.6vw,5rem)} }
@media(prefers-reduced-motion:reduce){ .to-top{transition:opacity .2s linear} }

/* ==================================================================
   PRICING CAROUSEL — phones only
   Three stacked plans made the page enormous on a vertical screen.
   Below 720px they become a snap-scrolling rail instead.
   ================================================================== */
@media(max-width:720px){
  /* the 1fr template column from the desktop layout was still in force,
     so the FIRST card sat in it (187px) while the rest used auto-columns
     (271px). Clearing the template makes every card the same width. */
  .price-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;
    gap:.85rem;max-width:none;margin-inline:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:1rem;
    padding-inline:.2rem;padding-block:.7rem 1rem;
    scrollbar-width:none}
  .price-grid::-webkit-scrollbar{display:none}
  .price-grid > .plan{scroll-snap-align:center;margin-top:0}
  .plan.pop,.plan.pop:hover{transform:none}
  .plan .note{margin-top:-.2rem}
}
/* dots under the rail */
.plan-dots{display:none}
@media(max-width:720px){
  .plan-dots{display:flex;justify-content:center;gap:.45rem;margin-top:.2rem}
  .plan-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;
    background:var(--bd-2);transition:.3s var(--e-out)}
  .plan-dots button.on{background:var(--grad);width:22px;border-radius:99px}
  .swipe-hint{display:flex;align-items:center;justify-content:center;gap:.4rem;
    font-size:.78rem;color:var(--tx-3);font-weight:600;margin-top:.6rem}
  .swipe-hint svg{width:14px;height:14px;animation:nudge 2.2s ease-in-out infinite}
  @keyframes nudge{50%{transform:translateX(4px)}}
}
.swipe-hint{display:none}
@media(prefers-reduced-motion:reduce){ .swipe-hint svg{animation:none} }

/* ==================================================================
   INDUSTRY TILES — two-up and more compact on phones
   ================================================================== */
@media(max-width:720px){
  .ind-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .ind{padding:1.05rem .9rem;gap:.55rem}
  .ind .em{width:34px;height:34px;border-radius:10px}
  .ind .em svg{width:17px;height:17px}
  .ind h3{font-size:.93rem;line-height:1.25}
  .ind p{font-size:.79rem;line-height:1.5}
  /* copy must never be clipped by the card's rounded overflow */
  .card.ind{overflow:visible}
  .soon{margin-top:1.15rem;padding:1.15rem 1rem}
  .soon h3{font-size:1rem}
  .soon p{font-size:.82rem}
}
@media(max-width:360px){
  .ind-grid{grid-template-columns:1fr}
}

/* the fee amount moved to the row label, so the bar only carries a % */
.split-bar i{padding-inline:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.split-bar .them{min-width:3.1rem}
.split-bar .them.ok{min-width:3.1rem}
.split-lbl small{line-height:1.45}
@media(max-width:620px){ .split-bar .them,.split-bar .them.ok{min-width:2.8rem} }

/* the WhatsApp number must not force the row wider than a small phone */
@media(max-width:380px){
  .wa-num{white-space:normal;word-break:break-word;font-size:.85rem;padding:.5rem .7rem}
  .live-act{width:100%}
  .live-act .btn{width:100%}
}
/* keep the floating chips inside the frame on tablets */
@media(max-width:1360px){
  .chip-1{inset-inline-start:0;left:auto;right:auto}
  .chip-2{inset-inline-end:0;left:auto;right:auto}
  [dir=rtl] .chip-1,[dir=rtl] .chip-2{left:auto;right:auto}
}

/* buttons may wrap on very small phones rather than force a wider page */
@media(max-width:380px){
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .live-act .btn{padding-inline:1rem}
}

/* ==================================================================
   HERO PHONE — give it real depth so the tilt reads as an object
   rather than a flat sheet: a side wall, an edge highlight, a rim
   light along the top and a contact shadow cast on the ground.
   ================================================================== */
.hero .phone-wrap{perspective:1500px}
.hero .phone{
  transform-style:preserve-3d;
  background:linear-gradient(150deg,#1b2027 0%,#0a0d12 42%,#05070a 100%);
  box-shadow:
    /* thin bright edge where the light catches the chassis */
    0 0 0 1px rgba(255,255,255,.10),
    /* the side wall of the body, giving it thickness */
    -10px 0 0 -4px rgba(255,255,255,.045),
    /* inner bevel around the screen */
    inset 0 0 0 1.5px rgba(255,255,255,.07),
    inset 0 1px 1px rgba(255,255,255,.14),
    /* ambient occlusion tight to the body */
    0 10px 24px -8px rgba(0,0,0,.7),
    /* the long cast shadow on the page */
    36px 54px 90px -34px rgba(0,0,0,.85),
    18px 26px 46px -26px rgba(0,0,0,.6)}
[dir=rtl] .hero .phone{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10),
    10px 0 0 -4px rgba(255,255,255,.045),
    inset 0 0 0 1.5px rgba(255,255,255,.07),
    inset 0 1px 1px rgba(255,255,255,.14),
    0 10px 24px -8px rgba(0,0,0,.7),
    -36px 54px 90px -34px rgba(0,0,0,.85),
    -18px 26px 46px -26px rgba(0,0,0,.6)}
/* a soft contact shadow pooled under the device */
.hero .phone-wrap::after{content:"";position:absolute;z-index:-1;
  left:50%;bottom:-2%;width:74%;height:32px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62),transparent 70%);
  filter:blur(14px);pointer-events:none}
/* specular sheen across the glass, following the tilt */
.hero .screen::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.03) 22%,
    transparent 46%,transparent 78%,rgba(255,255,255,.035) 100%)}
:root[data-theme=light] .hero .phone-wrap::after{
  background:radial-gradient(ellipse at center,rgba(74,56,36,.38),transparent 70%)}

/* plan rows are flex, so a bare money span became its own flex item and the
   row gap opened up inside the sentence — keep the phrase as one item */
.plan li .t{flex:1;min-width:0}

/* RTL fallback for browsers without logical inset support */
[dir=rtl] .to-top{right:auto;left:clamp(1rem,2.2vw,1.6rem)}
@media(min-width:1180px){ [dir=rtl] .to-top{right:auto;left:clamp(3.4rem,4.6vw,5rem)} }

/* Industry cards: slack at the foot so any font substitution on a phone
   cannot push the copy into the panel below. */
@media(max-width:720px){
  .ind{padding-bottom:1.35rem}
  .ind p{overflow-wrap:anywhere}
  .soon{margin-top:1.6rem}
}

/* ==================================================================
   HEADLINE NUMBERS — the figures are the argument, so size them like it
   ================================================================== */
.tot b{font-size:clamp(2rem,1.5rem + 1.7vw,2.7rem);line-height:1.1}
.tot b span[data-kwd]{font-size:inherit;font-weight:inherit;color:inherit;
  letter-spacing:inherit;font-variant-numeric:tabular-nums}
.stat b{font-size:clamp(2rem,1.55rem + 1.7vw,2.75rem);line-height:1.05}
.stat span{font-size:.82rem}
.out .big b{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.1rem)}
@media(max-width:620px){
  .stat b{font-size:1.95rem}
  .stat span{font-size:.74rem}
  .tot b{font-size:2rem}
}
@media(max-width:400px){
  .stats{grid-template-columns:1fr;gap:.9rem;text-align:start}
  .stat{display:flex;align-items:baseline;gap:.7rem}
  .stat b{font-size:1.9rem}
  .stat span{margin-top:0;font-size:.8rem}
}

/* ==================================================================
   FLEX WHITESPACE
   A flex container discards whitespace-only text between items, so
   "KWD 21,199 stays with you" lost its space, and the slider label's
   "(", currency and ")" were pushed apart by space-between.
   ================================================================== */
.split-bar i{gap:.32em}
.field label .lt{display:inline;white-space:nowrap}
.field label{gap:.8rem}

/* ==================================================================
   V16 — ONE PHONE. The hero phone is now the demo: it plays the
   30-second story, then hands the visitor the wheel from inside its
   own screen. The separate #demo section is gone, so the page no
   longer tells the same story twice.
   ================================================================== */

/* messages are injected by JS now, so the scripted per-bubble cascade
   delay (which keyed off a hard-coded --n) must not hold them hidden */
.hero .chat > *{animation:bubbleIn .42s var(--e-spring) both;animation-delay:0s}

/* the chips announce real events, so JS reveals them when the event
   actually happens in the thread rather than on a fixed timer */
.hero .chip-1,.hero .chip-2{opacity:0;animation:none;pointer-events:none}
.hero .chip-1.show,.hero .chip-2.show{opacity:1;
  animation:chipIn .55s var(--e-spring) both,float 6s ease-in-out .55s infinite}
/* the deck sits below the phone, so anchor both chips from the top */
.chip-1{top:10%}
.chip-2{top:60%;bottom:auto}

/* ---------- the control deck under the phone ---------- */
.stage-deck{width:100%;max-width:min(360px,90vw);margin-top:1.05rem;
  display:grid;gap:.55rem;justify-items:center;text-align:center}
.deck-head{margin:0;font-size:.78rem;font-weight:650;color:var(--tx-2);line-height:1.5}

/* the five beats become the progress bar itself: five segments that
   fill as the story advances, each one a seek target. Five list rows
   of prose was the single biggest source of crowding on mobile. */
.stage-deck .beat{display:flex;gap:4px;width:100%;margin:0;padding:0;list-style:none}
.stage-deck .beat li{flex:1;position:relative;display:block;height:4px;padding:0;border:0;
  border-radius:99px;background:var(--bd-2);cursor:pointer;font-size:0;overflow:visible}
.stage-deck .beat li .n,.stage-deck .beat li .bt{position:absolute;width:1px;height:1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* a 4px bar is not a tap target; this gives it 22px without moving it */
.stage-deck .beat li::before{content:"";position:absolute;inset:-9px 0}
.stage-deck .beat li::after{content:"";position:absolute;inset:0;border-radius:99px;
  background:var(--grad);transform:scaleX(var(--f,0));transform-origin:left;
  transition:transform .14s linear}
[dir=rtl] .stage-deck .beat li::after{transform-origin:right}
.stage-deck .beat li:focus-visible{outline:2px solid var(--brand);outline-offset:4px}

/* one caption line, swapped as playback advances */
.beat-now{margin:0;min-height:1.35em;font-size:.82rem;font-weight:650;color:var(--tx-2);
  display:flex;align-items:center;justify-content:center;gap:.45rem;line-height:1.4}
.beat-now i{font-style:normal;flex-shrink:0;width:17px;height:17px;border-radius:50%;
  background:var(--grad);color:#04120a;display:inline-grid;place-items:center;
  font-size:.6rem;font-weight:800}

.deck-row{display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap}
.deck-row .icon-btn{width:34px;height:34px}
.deck-row .icon-btn svg{width:15px;height:15px}

/* the quiet escape hatch — available the whole way through, so an
   impatient visitor is never held hostage by a 30-second video */
/* NB: .skip is already the visually-hidden "Skip to content" landmark
   link at the top of this file — this control needs its own name. */
.try-skip{background:none;border:0;cursor:pointer;font:inherit;font-size:.8rem;font-weight:650;white-space:nowrap;
  color:var(--tx-2);padding:.5rem .35rem;border-radius:8px;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .22s var(--ease),text-decoration-color .22s var(--ease)}
.try-skip .ts-t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bd-2);
  transition:text-decoration-color .22s var(--ease)}
.try-skip .ts-ic{width:13px;height:13px;flex-shrink:0}
.try-skip .ts-re{display:none}
.try-skip.is-back .ts-hand{display:none}
.try-skip.is-back .ts-re{display:block}
.try-skip:hover{color:var(--brand)}
.try-skip:hover .ts-t{text-decoration-color:var(--brand)}
.try-skip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.deck-note{margin:0;font-size:.68rem;line-height:1.55;color:var(--tx-3);max-width:30rem}

/* ---------- venue picker: the demo becomes *their* venue ---------- */

/* ---------- the hand-off, inside the screen ---------- */
.invite{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:1.1rem;
  background:rgba(6,10,14,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--e-out)}
.invite.show{opacity:1;pointer-events:auto}
.inv-card{display:grid;gap:.45rem;justify-items:center;text-align:center;max-width:15.5rem}
.inv-card b{font-size:.95rem;line-height:1.3;color:#fff;letter-spacing:-.01em}
.inv-card p{margin:0;font-size:.715rem;line-height:1.5;color:rgba(233,237,239,.8)}
.inv-card .btn{margin-top:.25rem}
.inv-card .btn svg{width:14px;height:14px}
.inv-alt{background:none;border:0;cursor:pointer;font:inherit;font-size:.7rem;font-weight:650;
  color:rgba(233,237,239,.7);display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .5rem;
  transition:color .2s var(--ease)}
.inv-alt svg{width:12px;height:12px}
.inv-alt:hover{color:#fff}
.demo-stage[data-mode=live] .invite{display:none}
@media(prefers-reduced-motion:reduce){ .invite{transition:none} }

/* On a short laptop the full-size phone pushes the deck under the fold,
   so cap it by viewport height as well. Tall screens still get 330px. */
.hero .phone{width:min(330px,84vw,31vh)}
@media(min-width:901px) and (max-width:1080px){ .hero .phone{width:min(320px,82vw,31vh)} }
/* short desktops (a 1280x800 laptop) need a harder cap than 31vh */
@media(min-width:901px) and (max-height:860px){
  .hero .phone{width:min(330px,84vw,28vh)}
  .stage-deck{margin-top:.72rem;gap:.42rem}
}

/* ---------- mobile: phone and headline on the same screen ----------
   The old layout stacked a full column of copy above the phone, which
   is what forced the choice between reading and watching. Unwrapping
   .hero-copy lets the phone sit directly under the headline.          */
@media(max-width:900px){
  :root{--phone-gap:1.15rem}
  .hero-copy{display:contents}
  .hero-grid{gap:1.15rem;justify-items:center;text-align:center}
  /* display:contents changes box generation, not selector matching, so
     these must still be addressed through their real DOM parent */
  /* display:contents changes box generation, not selector matching, so
     these must still be addressed through their real DOM parent.
     The headline and the phone come first; everything that used to sit
     between them is pushed below, which is what frees the screen. */
  .hero-copy > h1{order:1;margin:0}
  .hero-grid > .demo-stage{order:2;margin-block:.2rem}
  .hero-copy > .hero-cta{order:3;width:100%}
  .hero-copy > .micro{order:4}
  .hero-copy > .sub{order:5}
  .hero-copy > .lede{order:6}
  .hero-copy > .eyebrow{order:7}
  .hero-copy > .stats{order:8}
  .hero-copy > .try-note{order:9}
  .hero-copy > .fnote{order:10}
  /* reclaim the dead air above the headline */
  .hero{padding-top:clamp(4.4rem,13vw,5.4rem)}
  /* cap by viewport height as well, or the phone alone fills the screen */
  .hero .phone{width:min(272px,66vw,29vh)}
  /* the live caption and the control must clear the fold with the phone;
     the standing context and the disclaimer can sit below it */
  .stage-deck{display:flex;flex-direction:column;align-items:center;gap:.5rem}
  .stage-deck .beat{order:1}
  .beat-now{order:2}
  .deck-row{order:3}
  .deck-head{order:5}
  .deck-note{order:6}
  .deck-head{font-size:.74rem}
  .beat-now{font-size:.79rem}
  .deck-note{font-size:.645rem}
}
@supports(height:1svh){
  @media(max-width:900px){ .hero .phone{width:min(272px,66vw,31svh)} }
}
@media(max-width:400px){ .hero .phone{width:min(258px,72vw,29vh)} }

/* ==================================================================
   V18 — DESKTOP QR. The button sends a desktop visitor to WhatsApp
   Web, where most restaurant owners are not signed in; the funnel
   dies there. The code lets them use the phone that already has it.
   ================================================================== */
.wa-qr{display:none}
@media(min-width:901px){
  .wa-qr{display:flex;align-items:center;gap:.9rem;margin-top:1.1rem;
    padding:.8rem .95rem;border-radius:var(--r-lg);
    border:1px solid var(--bd);background:var(--card-2)}
  .qr-box{flex-shrink:0;width:84px;height:84px;padding:5px;border-radius:9px;
    background:#fff;line-height:0}
  .qr-box svg{width:100%;height:100%;display:block}
  .qr-cap{display:grid;gap:.16rem}
  .qr-cap b{font-size:.84rem;letter-spacing:-.01em}
  .qr-cap span{font-size:.73rem;line-height:1.5;color:var(--tx-3)}
}

/* ==================================================================
   V18 — MOBILE LENGTH. Stacking every card grid made the page 19
   screens tall. The card sections become swipe rails, the same
   pattern the pricing plans already use.
   ================================================================== */
@media(max-width:720px){
  .feat-grid,.sec-grid,.steps{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;
    align-items:stretch;gap:.85rem;max-width:none;margin-inline:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:1rem;
    padding-inline:.2rem;padding-block:.6rem .9rem;
    scrollbar-width:none}
  .feat-grid::-webkit-scrollbar,.sec-grid::-webkit-scrollbar,.steps::-webkit-scrollbar{display:none}
  .feat-grid > *,.sec-grid > *,.steps > *{scroll-snap-align:center;margin-top:0}
  /* the step connector is a horizontal-flow artefact; it has no meaning
     once the steps are a rail */
  .steps::before,.steps::after{display:none}
  .sec-grid{margin-bottom:.6rem}

  /* a rail needs less air around it than a stack did */
  section{padding-block:calc(var(--sp) * .82)}
  .head{margin-bottom:1.5rem}
  .head p{font-size:.97rem}

  /* the footer was a full screen of stacked link columns */
  .foot{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .foot > div:first-child{grid-column:1 / -1}
}

/* more rails, and a shared indicator so a rail reads as a rail */
@media(max-width:720px){
  .vs,.perms,.ind-grid{
    display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:86%;
    align-items:stretch;gap:.85rem;max-width:none;margin-inline:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:1rem;
    padding-inline:.2rem;padding-block:.6rem .9rem;scrollbar-width:none}
  .vs::-webkit-scrollbar,.perms::-webkit-scrollbar,.ind-grid::-webkit-scrollbar{display:none}
  .vs > *,.perms > *,.ind-grid > *{scroll-snap-align:center;margin-top:0}
  .vs-badge{display:none}          /* a divider has no job in a rail */
  .perms{grid-auto-columns:78%}
  .soon{padding:1.1rem;margin-top:1rem}
  /* six collapsed rows were carrying a stacked card's worth of padding */
  .obj details > summary{padding-block:.62rem}
  .obj{gap:.5rem}
}
.rail-dots{display:none}
@media(max-width:720px){
  .rail-dots{display:flex;justify-content:center;gap:.45rem;margin-top:.1rem}
  .rail-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;cursor:pointer;
    background:var(--bd-2);transition:width .25s var(--e-out),background .25s var(--ease)}
  .rail-dots button.on{background:var(--grad);width:22px;border-radius:99px}
}

/* the amount and the words it belongs to are separate flex items in
   .micro, so they wrapped apart ("AED 192" / "free WhatsApp credit") */
.micro .mw{display:inline-flex;align-items:center;gap:.32em;white-space:nowrap}

/* the phone's glow bled 17px past the body on narrow screens; keep the
   vertical bleed, drop the horizontal one */
@media(max-width:900px){ .glow-ring{inset:-6% 0} }

/* ==================================================================
   V19 — MOBILE PASS
   ================================================================== */

/* The end-of-demo card was unclickable: .replay sits at z-index 8 with
   .replay button{pointer-events:auto}, so the *invisible* poster button
   opted back into hit-testing above the invite (z-index 6) and swallowed
   the tap, restarting playback. A hidden overlay must never be a target. */
.invite{z-index:9}
.replay:not(.show){pointer-events:none}
.replay:not(.show) button{pointer-events:none}
.replay.show button{pointer-events:auto}

/* Menu names were ellipsised to "Chicken Sh…" inside a 245px phone.
   Two short lines read better than one truncated one. */
.item .nm{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:900px){
  .item .nm{font-size:.715rem;line-height:1.3}
  .item .pr{font-size:.695rem}
  .item .ic{width:24px;height:24px;font-size:.78rem}
  .wa-card .ttl{font-size:.7rem}
  .msg{font-size:.755rem;line-height:1.5}
}

/* ---------- the floating bubbles, on the phone ----------
   They were display:none below 620px, so the one thing that actually
   narrates what is happening was missing on the device where visitors
   need it most. Over the screen they read as WhatsApp notifications. */
@media(max-width:900px){
  /* NB: inset-inline must be reset BEFORE left, or it maps back onto
     left and undoes the centring. */
  .chip{display:flex;position:absolute;z-index:7;
    inset-inline:auto;right:auto;left:50%;
    top:54px;                      /* clear of the WhatsApp header bar */
    width:max-content;max-width:min(60vw,232px);
    padding:.5rem .68rem;border-radius:12px;
    box-shadow:0 14px 30px -14px rgba(0,0,0,.6);
    opacity:0;pointer-events:none;animation:none!important;
    transform:translate(-50%,-12px) scale(.96);
    transition:opacity .3s var(--e-out),transform .38s var(--e-spring)}
  .chip.show{opacity:1;transform:translate(-50%,0) scale(1)}
  [dir=rtl] .chip-1,[dir=rtl] .chip-2,[dir=rtl] .chip-3{inset-inline:auto;right:auto;left:50%}
  .chip small{font-size:.66rem}
}
@media(max-width:620px){ .chip{display:flex} }   /* was display:none */

/* desktop keeps them as a composition around the frame */
/* chip-3 must stay over the frame: the wrap now includes the deck, so a
   percentage past ~66% lands on the controls instead of the phone */
@media(min-width:901px){
  .chip-3{top:46%;left:-13%;right:auto}
  /* this MUST stay inside the query: unscoped it beat the mobile
     centring rule and shoved the bubble off the phone in Arabic */
  [dir=rtl] .chip-3{left:auto;right:-13%}
}
/* the same tablet clamp the other two already use */
@media(min-width:901px) and (max-width:1360px){
  .chip-3{inset-inline-start:0;left:auto;right:auto}
  [dir=rtl] .chip-3{left:auto;right:auto}
}

/* ---------- the tagline explains the idea, so it animates ---------- */
.sub b{font-weight:inherit;color:var(--tx-3);display:inline-block;
  animation:subLit 8s var(--e-out) infinite both}
.sub .w1{animation-delay:0s}
.sub .w2{animation-delay:1.15s}
.sub .w3{animation-delay:2.3s}
.sub .w4{animation-delay:3.45s}
.sub .w5{animation-delay:4.6s}
@keyframes subLit{
  0%{color:var(--tx-3);transform:none}
  4%,13%{color:var(--tx);transform:translateY(-2px)}
  24%,100%{color:var(--tx-3);transform:none}
}
@media(prefers-reduced-motion:reduce){ .sub b{animation:none;color:var(--tx-2)} }

/* ---------- mobile hero: the idea, then the proof ----------
   The tagline moves directly under the headline so the page explains
   itself before the phone, and the deck slipping just past the fold is
   the cue to keep scrolling. */
@media(max-width:900px){
  .hero-copy > h1{order:1}
  .hero-copy > .sub{order:2;margin:0}
  /* the air above and below the phone is driven by one value so the
     frame sits centred rather than shunted upward */
  .hero-grid > .demo-stage{order:3;margin-block:0}
  .stage-deck{margin-top:var(--phone-gap)}
  .hero-copy > .hero-cta{order:4;width:100%}
  .hero-copy > .micro{order:5}
  .hero-copy > .lede{order:6}
  .hero-copy > .eyebrow{order:7}
  .hero-copy > .stats{order:8}
  .hero-copy > .fnote{order:9}
  .hero .phone{width:min(272px,66vw,28vh)}

  /* the deck had six controls and two paragraphs stacked under a phone.
     One text action, two icons, and the picker. */
  .deck-head{display:none}
  #play{width:42px;height:42px;padding:0;border-radius:13px;justify-content:center;flex-shrink:0}
  #play #playLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .deck-row{gap:.5rem}
  .try-skip{font-size:.84rem}
  .deck-row .icon-btn{width:38px;height:38px;border-radius:12px}
  .deck-note{font-size:.62rem;max-width:25rem;opacity:.85}
}
@supports(height:1svh){
  @media(max-width:900px){ .hero .phone{width:min(272px,66vw,30svh)} }
}
@media(max-width:400px){ .hero .phone{width:min(258px,72vw,28vh)} }

.chip .ct{font-weight:inherit;font-size:inherit;display:block}

/* In Arabic the scroll rail sits on the left, so its hover labels were
   anchored with inset-inline-end and ran off the left edge of the page.
   They must open toward the middle of the page instead. */
[dir=rtl] .rail .lbl{inset-inline-end:auto;inset-inline-start:auto;left:1.5rem;right:auto}

/* ==================================================================
   V21 — ONE SAVINGS CARD. Sliders on one side, a single comparison on
   the other: what each party takes out of the same revenue, and what
   that difference is worth. Nothing is stated twice.
   ================================================================== */
.calc-h{margin-bottom:.35rem}
.calc-sub{color:var(--tx-2);font-size:.92rem;margin-bottom:1.5rem}
.out .rev{display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap}
.out .rev span{font-size:.88rem;color:var(--tx-2)}
.out .rev b{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.out .rev small{font-size:.76rem;color:var(--tx-3)}

.cmp{margin-top:1.25rem;padding-top:1.15rem;border-top:1px solid var(--bd)}
.cmp-axis{margin:0 0 .85rem;font-size:.77rem;font-weight:650;color:var(--tx-3)}
.cmp-row{display:grid;grid-template-columns:8.4rem 1fr auto;gap:.85rem;
  align-items:center;margin-bottom:.8rem}
.cmp-row:last-child{margin-bottom:0}
.cmp-lbl{display:flex;flex-direction:column;gap:.1rem;font-size:.9rem;font-weight:700;line-height:1.25}
.cmp-lbl small{font-size:.72rem;font-weight:600;color:var(--tx-3)}
.cmp-lbl small b{font-weight:700;color:var(--tx-2)}
.cmp-track{display:block;height:13px;border-radius:99px;background:var(--bg-2);
  border:1px solid var(--bd);overflow:hidden}
.cmp-track i{display:block;height:100%;border-radius:99px;width:2.5%;
  transition:width .3s var(--e-out)}
.cmp-track i.bad{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.cmp-track i.good{background:var(--grad)}
.cmp-amt{font-variant-numeric:tabular-nums;font-weight:800;font-size:1rem;white-space:nowrap}
.cmp-amt.bad{color:#ef4444}
.cmp-amt.good{color:var(--brand)}
@media(prefers-reduced-motion:reduce){ .cmp-track i{transition:none} }

.keep{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--bd);text-align:center}
.keep b{display:block;font-size:clamp(2rem,1.5rem + 2.2vw,2.9rem);font-weight:800;
  letter-spacing:-.045em;line-height:1.05;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.keep span{display:block;margin-top:.3rem;font-size:.85rem;color:var(--tx-3)}
.calc-note{margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--bd);text-align:center}

/* narrow: the bar drops to its own row so the label and amount stay legible */
@media(max-width:620px){
  .cmp-row{grid-template-columns:1fr auto;gap:.35rem .7rem}
  .cmp-lbl{order:1}
  .cmp-amt{order:2}
  .cmp-track{order:3;grid-column:1 / -1;margin-top:.15rem}
  .cmp-row{margin-bottom:1rem}
}

/* ---------- mobile deck: fewer controls ----------
   The venue picker sat below the fold, where it cost clutter for the
   people who scrolled and gave nothing to those who did not. Pause is
   gone too — the phone itself is the pause target now. */
@media(max-width:900px){
  #play{display:none}
  .deck-row{gap:.6rem}
}

/* ==================================================================
   V22 — NARROW PHONES (iPhone 13 mini and smaller)
   ================================================================== */

/* A long item name could overrun its box and print underneath the price.
   overflow:visible (added to stop the old ellipsis) let it spill instead
   of wrap, and on iOS the glyphs run a shade wider than in Chrome.
   Breaking inside the word is the safety net; the real fix is giving the
   name room. */
.item .nm{overflow-wrap:anywhere;word-break:break-word}

@media(max-width:900px){
  /* the menu card was 84% of an already narrow screen, leaving the name
     ~53px — less than the word "Lemonade" needs */
  .wa-card{max-width:96%}
  .item{padding:.4rem .5rem;gap:.5rem}
  .item .ic{width:21px;height:21px;font-size:.72rem}
  .item .nm{font-size:.7rem}
  .item .pr{font-size:.685rem}
}

/* The eye measures from the glyphs, not the box: the tagline's line box
   adds ~4px below the text, so matching box gaps looked lopsided. */
@media(max-width:900px){ .stage-deck{margin-top:calc(var(--phone-gap) + 6px)} }

/* On a short, narrow screen (iPhone SE) the viewport-height cap shrank the
   frame to ~159px and the item name column to 18px. A floor keeps the
   thread legible; the deck slipping further below the fold is the lesser
   evil on a device that small. */
@media(max-width:900px){
  .hero .phone{width:max(212px, min(272px,66vw,28vh))}
}
@supports(height:1svh){
  @media(max-width:900px){ .hero .phone{width:max(212px, min(272px,66vw,30svh))} }
}
@media(max-width:400px){ .hero .phone{width:max(206px, min(258px,72vw,28vh))} }

/* The mobile hero centres its children, and that inherited straight into
   the phone — the whole WhatsApp thread was centre-aligned. Messages,
   card titles and item names all read from the start edge. */
.demo-stage .screen{text-align:start}
.demo-stage .inv-card,.demo-stage .replay{text-align:center}

/* ==================================================================
   V23 — DECK, RHYTHM, ALIGNMENT
   ================================================================== */

/* the security band carried 1.25x the vertical padding of every other
   section, which broke the page's rhythm */
.demo,.sec{padding-block:var(--sp)}
@media(max-width:720px){ .sec{padding-block:calc(var(--sp) * .82)} }

/* the hero centres its copy on a phone; the stat row was the one block
   still reading from the left edge */
@media(max-width:620px){ .stats{text-align:center} }

/* ---------- sticky CTA: the page is ~10,000px and the only way to
   message the bot lived at the very top and the very bottom ---------- */
.sticky-cta{position:fixed;z-index:92;inset-inline:0;bottom:0;left:0;right:0;
  display:none;align-items:center;gap:.55rem;
  padding:.65rem 1.2rem calc(.65rem + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--bd);
  transform:translateY(120%);transition:transform .36s var(--e-out)}
@media(max-width:900px){ .sticky-cta{display:flex} }
.sticky-cta.on{transform:none}
.sticky-cta .btn{flex:1;justify-content:center;padding-block:.72rem}
.sticky-cta .btn svg{width:17px;height:17px}
.sc-x{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;
  border-radius:11px;border:1px solid var(--bd);background:var(--card);
  color:var(--tx-3);cursor:pointer}
.sc-x svg{width:15px;height:15px}
.sc-x:hover{color:var(--tx)}
/* keep the back-to-top button clear of the bar */
html.has-cta .to-top{bottom:calc(clamp(1rem,2.2vw,1.6rem) + 62px);
  inset-block-end:calc(clamp(1rem,2.2vw,1.6rem) + 62px)}
@media(prefers-reduced-motion:reduce){ .sticky-cta{transition:none} }

/* .card.rv / .plan.rv / .step.rv sets a deeper lift, but it is declared
   AFTER .rv.in and carries the same specificity — so revealed cards kept
   translate3d(0,26px,0) scale(.985) forever. They sat 26px low and 1.5%
   small on every screen, which is what made grids look subtly misaligned. */
.card.rv.in,.plan.rv.in,.step.rv.in{transform:none}

/* ---------- order tracking ticks off step by step ---------- */
.trk div{transition:color .3s var(--ease)}
.trk div[data-trk] .bx{color:transparent}
.trk div[data-trk].done .bx{color:#04120a}
.trk div[data-trk].done .bx{animation:trkPop .36s var(--e-spring) both}
@keyframes trkPop{0%{transform:scale(.45)}62%{transform:scale(1.2)}100%{transform:scale(1)}}
/* the step currently in progress */
.trk div.now{color:#c8d6de}
.trk div.now .bx{animation:trkPulse 1.3s ease-in-out infinite}
@keyframes trkPulse{50%{box-shadow:0 0 0 3.5px rgba(21,197,148,.20);border-color:#15c594}}
@media(prefers-reduced-motion:reduce){
  .trk div[data-trk].done .bx,.trk div.now .bx{animation:none}
}

/* ==================================================================
   V26 — MICRO LINE SEPARATORS
   .micro is a flex row, so every text run is its own flex item and the
   items wrap independently. A literal " · " between them therefore became
   an item that could start a wrapped line ("· Live in under 30 minutes").
     cannot fix that — it only binds text *inside* one item. So each
   segment is now its own element and owns the separator that follows it.
   ================================================================== */
.micro > *:not(:last-child)::after{content:"·";margin-inline-start:.45rem}

/* ==================================================================
   V27 — WATCH / TRY CONTROL + MICRO LINE
   ================================================================== */

/* The demo's two paths, offered from the first frame instead of only
   after the story ends. This is now the deck's only pill group — the venue
   picker that shared its shape has been removed. */
.mode-pick{display:inline-flex;gap:.28rem;padding:.26rem;border-radius:13px;
  border:1px solid var(--bd);background:var(--card-2)}
.mode-pick button{display:inline-flex;align-items:center;gap:.36rem;cursor:pointer;
  font:inherit;font-size:.74rem;font-weight:700;color:var(--tx-3);white-space:nowrap;
  padding:.42rem .72rem;border:0;border-radius:10px;background:none;
  transition:color .2s var(--ease),background .2s var(--ease)}
.mode-pick button svg{width:13px;height:13px;flex-shrink:0}
.mode-pick button:hover{color:var(--tx)}
.mode-pick button.on{background:var(--grad);color:#04120a;
  box-shadow:0 5px 14px -7px rgba(21,197,148,.7)}
.mode-pick button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(max-width:560px){
  .mode-pick button{font-size:.76rem;padding:.44rem .8rem}
  .mode-pick button svg{width:14px;height:14px}
}

/* .micro was a flex row, so each segment was a flex item: they wrapped as
   whole units (one phrase per line) and the separator sat in its own margin,
   drifting away from the text it belongs to. As normal inline text the line
   fills the available width, and a no-break space welds each "·" to the
   phrase before it so no wrapped line can ever begin with one. */
.micro{display:block;gap:0}
.micro > *:not(:last-child)::after{content:"\00A0\00B7";margin-inline-start:0}

/* .mw was inline-flex purely to stop the money value wrapping away from the
   words after it (flex discards the whitespace text node, hence the gap).
   As plain inline text with nowrap the real space does that job, and the
   separator above no longer inherits the flex gap and drifts off. */
.micro .mw{display:inline;white-space:nowrap;gap:0}

/* The industry tiles kept the tight side padding written for the old two-up
   phone layout. They became a full-width snap rail later, the same shape and
   width as the feature and security cards, so their copy sat 8px closer to
   the card edge than every other card on the page. Match .card again; the
   extra foot padding above is still wanted. */
@media(max-width:720px){ .ind{padding-inline:1.7rem} }
@media(max-width:620px){ .ind{padding-inline:1.4rem} }

/* The permission scopes are Latin identifiers, so they keep direction:ltr —
   without it the underscores and word order render wrongly. But that also
   made text-align resolve to the LEFT of an RTL card, stranding each scope
   on the opposite side from the Arabic sentence describing it (measured
   20–180px adrift, worst on catalog_management at 768px). Pin the box back
   to the card's start edge; the characters inside still read left-to-right.
   Physical "right" is correct here precisely because the element's own
   direction is ltr, so "end" would resolve the wrong way. */
[lang=ar] .perm code{text-align:right}

/* ==================================================================
   V28 — CARD RAILS: CENTRED, FULL-BLEED, WITH EDGE FADES
   Snapping to the start edge aligned the first card with the section
   heading but gave the rail only a right-hand peek, so nothing said
   "there is more to the left". The rails now run edge to edge, each card
   sits centred with a neighbour showing on BOTH sides, and a fade marks
   whichever side still has cards. Centring necessarily insets the card
   from the heading: a peek cannot exist without it.
   ================================================================== */
@property --fl{syntax:"<length>";inherits:false;initial-value:0px}
@property --fr{syntax:"<length>";inherits:false;initial-value:0px}

@media(max-width:720px){
  .steps,.feat-grid,.ind-grid,.sec-grid,.price-grid,.perms{
    width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw);
    /* vw, not %, because a percentage column resolves against the content
       box — which the padding below has already shrunk */
    grid-auto-columns:78vw;
    padding-inline:11vw;scroll-padding-inline:0;
    --fl:0px;--fr:0px;
    transition:--fl .22s var(--e-out),--fr .22s var(--e-out);
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),
      #000 calc(100% - var(--fr)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),
      #000 calc(100% - var(--fr)),transparent 100%)}
  .steps > *,.feat-grid > *,.ind-grid > *,
  .sec-grid > *,.price-grid > *,.perms > *{scroll-snap-align:center}
  /* set from measured rects, so this is direction-agnostic */
  .rail-l{--fl:11vw}
  .rail-r{--fr:11vw}
}
@media(prefers-reduced-motion:reduce){
  .steps,.feat-grid,.ind-grid,.sec-grid,.price-grid,.perms{transition:none}
}

/* ==================================================================
   V29 — HERO STATS CENTRING + HERO FOOT
   ================================================================== */

/* Stacked stats were set to text-align:center, but .stat is a flex row —
   text-align does not position flex items, so each "98% / Message open
   rate" pair stayed packed against the start edge while every other line
   in the mobile hero was centred (measured up to 153px off-centre).
   justify-content is the property that actually moves them. Same trap as
   the .micro separators: alignment set on a flex container's text rather
   than on its items. */
@media(max-width:400px){
  .stat{justify-content:center}
}

/* The hero carried 76px of bottom padding against the 20px every other
   section uses, so the hero->strip text gap was 106px — the largest on
   the page, against a ~80px median — which read as a void under the
   footnote. 3rem brings it to ~78px, in line with the rest. It cannot go
   as tight as the 21px above the stats without colliding with the strip:
   that space sits INSIDE the container, this one separates two sections. */
@media(max-width:620px){
  .hero{padding-bottom:3rem}
}

/* ==================================================================
   V30 — FLEX ROWS INSIDE CENTRED BLOCKS
   text-align:center states the intent but does NOT move flex items;
   only justify-content does. Every container below declares centred text
   and lays its children out with flex, so its contents packed to the
   start edge while everything around them was centred. Found by sweeping
   320–1440px in 10px steps rather than at device widths, because each
   one only shows in the band where its items stop filling the row.
   ================================================================== */

/* the hero's two buttons: .hero-copy centres its items from 1080px down,
   but .hero-cta is given width:100% and packed left — visible from 630px
   (below that the buttons go full-width and column) up to 900px */
@media(max-width:1080px){
  .hero-cta{justify-content:center}
  .hero-copy .eyebrow{justify-content:center}
}

/* "Your delivery revenue / AED 192 / every month" sat left inside the
   centred .out panel */
.out .rev{justify-content:center}

/* a section eyebrow that wraps to two lines left-packed its second line */
.head .eyebrow,.final .eyebrow{justify-content:center}

/* The eyebrow pill was inline-flex with the dot as its own flex item, so
   when the label wrapped to two lines align-items:center floated the dot
   at the far left, vertically centred against the whole block instead of
   sitting beside the first line. As an inline-block the dot flows inside
   the text, both lines centre, and the pill keeps its shape (an inline
   box would break its border across lines). Single-line pills render
   identically to before. */
.eyebrow{display:inline-block;text-align:center}
.eyebrow .dot{display:inline-block;vertical-align:middle;
  margin-inline-end:.5rem;position:relative;top:-1px}

/* Below ~360px the Arabic label in the final CTA wrapped to two lines and
   the decorative arrow — its own flex item — floated beside the block
   instead of the first line. The arrow carries no meaning the label does
   not, so it stands down and the label fits on one line again. */
@media(max-width:360px){ .final .btn-lg > svg{display:none} }

/* ==================================================================
   V31 — BRAND LOGO · COMMERCE PRICING · FAQ GROUPS
   ================================================================== */

/* ---------- the supplied logo replaces the old mark + typed name.
   Two renditions of the same artwork: white wordmark for the dark
   theme (logo 2), dark wordmark for the light theme (logo 3). ---------- */
.brand{gap:0}
.brand .logo{display:block;height:28px;width:auto;max-width:none}
.brand .logo-l{display:none}
:root[data-theme=light] .brand .logo-d{display:none}
:root[data-theme=light] .brand .logo-l{display:block}
.foot .brand .logo{height:32px}
.drawer-top .brand .logo{height:24px}
@media(max-width:620px){ .brand .logo{height:24px} .foot .brand .logo{height:28px} }
@media(max-width:360px){ .brand .logo,.drawer-top .brand .logo{height:21px} }

/* ---------- Commerce: one plan and one optional service ---------- */
.pg-2 .plan{display:flex;flex-direction:column;gap:1.05rem}
.pg-2 .plan.pop{transform:none;margin-top:0}
.pg-2 .plan.pop:hover{transform:translateY(-5px)}
/* the two cards differ in length; pushing each button to the foot keeps
   them on one line however much copy sits above */
.pg-2 .plan > .btn{margin-top:auto}
@media(min-width:721px){
  .price-grid.pg-2{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);max-width:64rem;
    margin-inline:auto;align-items:stretch}
}
@media(min-width:721px) and (max-width:899px){
  .price-grid.pg-2{grid-template-columns:1fr;max-width:36rem}
}

.bill{display:inline-flex;align-self:flex-start;gap:.25rem;padding:.25rem;border-radius:12px;
  border:1px solid var(--bd);background:var(--card-2)}
.bill button{font:inherit;font-size:.78rem;font-weight:700;color:var(--tx-3);border:0;background:none;
  cursor:pointer;padding:.42rem .8rem;border-radius:9px;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease)}
.bill button em{font-style:normal;font-weight:800;color:var(--brand);margin-inline-start:.2rem}
.bill button:hover{color:var(--tx)}
.bill button[aria-pressed=true],.bill button[aria-pressed=true]:hover{background:var(--grad);color:#04120a}
.bill button[aria-pressed=true] em{color:inherit;opacity:.75}
.bill button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.pl-sub{font-size:.84rem;color:var(--tx-2);line-height:1.5;margin:-.5rem 0 0}
.pl-approx{font-size:.76rem;color:var(--tx-3);margin:-.65rem 0 0}
.pl-approx[hidden]{display:none}
.plan ul.pl-costs{gap:.5rem;padding-block:.9rem;border-block:1px solid var(--bd)}
.plan .pl-costs li{display:block;font-size:.86rem;color:var(--tx-2)}
.pl-costs b{color:var(--tx);font-weight:800}
.pl-lab{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);margin:0 0 -.4rem}
.pl-kick{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.4rem}
@media(min-width:900px){ #commerce .pl-incl{grid-template-columns:1fr 1fr;column-gap:1.3rem} }
.pl-foot{text-align:center;margin:2rem auto 0;max-width:46rem}
.pl-foot a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- one FAQ, in two labelled groups ---------- */
.faq-grp{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tx-3);margin:1.7rem 0 .15rem;text-align:start}
.faq-grp:first-child{margin-top:0}

/* letter-spacing tears Arabic letters out of their joins */
[lang=ar] .faq-grp,[lang=ar] .pl-lab,[lang=ar] .pl-kick{letter-spacing:0;font-size:.84rem}
[lang=ar] .bill button{font-size:.84rem}
.pl-more{display:grid;gap:.45rem;padding-top:.95rem;border-top:1px solid var(--bd)}
.pl-more .pl-lab{margin:0 0 .1rem}
.pl-more p:not(.pl-lab){font-size:.84rem;color:var(--tx-2);line-height:1.5;margin:0}
.pl-more b{color:var(--tx);font-weight:800}
/* uppercase is a Latin convention; inside an Arabic label it only shouted
   the embedded product name ("مشمول في COMMERCE") */
[lang=ar] .pl-lab,[lang=ar] .pl-kick,[lang=ar] .faq-grp{text-transform:none}

/* ==================================================================
   V32 — SIX FEATURE CARDS
   auto-fit at 275px gave four columns on desktop, which would leave two
   cards orphaned on the second row; six read as an even 3 × 2.
   ================================================================== */
@media(min-width:961px){ .feat-grid{grid-template-columns:repeat(3,1fr)} }
@media(min-width:721px) and (max-width:960px){ .feat-grid{grid-template-columns:repeat(2,1fr)} }

/* ==================================================================
   V33 — SCROLL RAIL: TALLER, QUIETER
   It sat as a ~140px cluster mid-screen and read as interface noise. It
   now spans most of the viewport height, so its fill reads plainly as
   "how far down the page you are", and it stays faint until hovered.
   Kept on the reading-end edge (right in English, left in Arabic), beside
   the scrollbar it echoes and away from the edge where headings start.
   ================================================================== */
.rail{height:min(62vh,560px);gap:0;justify-content:space-between;padding-block:.35rem}
.rail-track{opacity:.4;transition:opacity .3s var(--e-out)}
.rail .dot{width:7px;height:7px;opacity:.4;
  transition:transform var(--d-sm) var(--e-spring),background var(--d-sm),opacity .3s var(--e-out)}
.rail a.on .dot{opacity:.85;box-shadow:0 0 0 3px rgba(21,197,148,.14)}
.rail:hover .rail-track,.rail:focus-within .rail-track{opacity:.85}
.rail:hover .dot,.rail:focus-within .dot{opacity:1}

/* The security cards are stretched to equal height, and with no
   align-content their grid rows shared out the spare height — so a card
   with a two-line description lifted its title 7px above its neighbours.
   Pinning the content to the top keeps icons and titles on one line. */
.sec-c{align-content:start}

/* The "Included" tag was pinned with a physical right:, which in Arabic is
   the corner the card's icon starts from, so the tag sat on the icon.
   inset-inline-end puts it opposite the icon in both directions; Arabic
   also drops the Latin uppercase tracking, which breaks letter joins. */
.tag{right:auto;inset-inline-end:1.1rem}
[lang=ar] .tag{letter-spacing:0;text-transform:none;font-size:.7rem}

/* ==================================================================
   V35 — FAQ: TWO TOPICS, ONE AT A TIME
   ================================================================== */
.faq-tabs{display:flex;justify-self:center;gap:.25rem;padding:.25rem;margin-bottom:.5rem;
  border-radius:13px;border:1px solid var(--bd);background:var(--card-2)}
.faq-tabs button{font:inherit;font-size:.86rem;font-weight:700;color:var(--tx-3);border:0;background:none;
  cursor:pointer;padding:.55rem 1.1rem;border-radius:10px;white-space:nowrap;
  transition:color .2s var(--ease),background .2s var(--ease)}
.faq-tabs button:hover{color:var(--tx)}
.faq-tabs button[aria-selected=true],.faq-tabs button[aria-selected=true]:hover{background:var(--grad);color:#04120a}
:root[data-theme=light] .faq-tabs button[aria-selected=true]{color:#ffffff}
.faq-tabs button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.faq-panel{display:grid;gap:.7rem}
.faq-panel[hidden]{display:none}
@media(max-width:620px){
  .faq-tabs{justify-self:stretch}
  .faq-tabs button{flex:1;padding-inline:.6rem}
  /* a touch tighter, so a topic fits in about one screen */
  .faq summary{padding:.85rem 1rem;font-size:.9rem}
  .faq details .ans{padding:0 1rem .95rem}
}
[lang=ar] .faq-tabs button{font-size:.9rem}

/* ==================================================================
   V36 — DEVICE-MATRIX FIXES
   ================================================================== */
/* The asterisk's <sup> stretched its line, so "Message open rate" sat
   ~5px below the other two stat labels. A zero line-height sup is still
   raised but no longer pushes the line box. */
.stat sup,.fnote sup{line-height:0;position:relative;top:-.45em;vertical-align:baseline}
/* touch targets: the menu button (35px), the billing toggle (34px) and
   the in-phone "Replay" link (29px) were under a comfortable fingertip */
@media(pointer:coarse){
  .nav-act .icon-btn{min-width:40px;min-height:40px}
  .bill button{min-height:40px}
  .inv-alt{min-height:38px}
}
/* buttons inside a zoomed phone get scaled back up to a full fingertip */
@media(pointer:coarse){
  .phone-wrap .invite .btn{min-height:calc(42px / var(--pz,1))}
  .phone-wrap .inv-alt{min-height:calc(38px / var(--pz,1))}
}
/* articles end with the calculator and a demo, side by side (stacked on phones) */
.article-cta-btns{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
@media(max-width:520px){ .article-cta-btns{flex-direction:column} .article-cta-btns .btn{width:100%} }

/* ==================================================================
   V34 — LIGHT THEME: COOL WHITE
   The cream / tan / gold neutrals were tuned to the old WhatsApp green.
   Beside the cooler logo mint they read yellow and turned every green
   wash a muddy grey-green. These neutrals are near-white with a trace of
   the brand mint, and the text is the same green-black as the logo's
   dark wordmark, so the light theme matches logo 3 (which sits on white).
   ================================================================== */
:root[data-theme=light]{
  --bg:#f6f9f8; --bg-2:#edf3f1; --bg-3:#ffffff;
  --card:#ffffff; --card-2:#f3f7f6;
  --bd:rgba(15,40,33,.10); --bd-2:rgba(15,40,33,.19);
  --tx:#0f1a17; --tx-2:#465752; --tx-3:#5f6e68;
  /* greens one step deeper than dark mode's, for contrast on white:
     small green text 5.0:1, white button text 5.3:1, and the lightest
     gradient stop still 3.35:1 on the headline sizes it is used at */
  --brand:#027a5c; --brand-2:#01664c; --accent:#067f73; --accent-2:#0e9a79;
  --shadow:0 22px 50px -26px rgba(16,42,35,.24);
  --glow:0 0 48px -20px rgba(4,147,111,.38);
}
/* mint glows instead of gold and lilac */
:root[data-theme=light] .aurora i:nth-child(1){background:radial-gradient(circle,#bfeedd,transparent 65%)}
:root[data-theme=light] .aurora i:nth-child(2){background:radial-gradient(circle,#cdeeea,transparent 65%)}
:root[data-theme=light] .aurora i:nth-child(3){background:radial-gradient(circle,#dff3ec,transparent 65%)}
:root[data-theme=light] .aurora i{opacity:.55}
:root[data-theme=light] .grain{opacity:.07}
/* cool shadows: the brown ones looked like stains on a white ground */
:root[data-theme=light] .card,
:root[data-theme=light] .plan,
:root[data-theme=light] .step,
:root[data-theme=light] .pane,
:root[data-theme=light] .calc{box-shadow:0 1px 2px rgba(16,42,35,.05),0 10px 24px -18px rgba(16,42,35,.22)}
:root[data-theme=light] .hero .phone-wrap::after{
  background:radial-gradient(ellipse at center,rgba(16,42,35,.32),transparent 70%)}
:root[data-theme=light] .btn-1,
:root[data-theme=light] .cur-pills button.on{color:#ffffff}
:root[data-theme=light] .replay{background:rgba(15,26,23,.55)}

/* ==================================================================
   V37 — ONE PLAN, LAUNCH ASSIST UNDER IT AS AN ADD-ON
   Side by side, the $400 service read as a second plan of equal weight.
   It now sits beneath the plan as a lighter, dashed add-on row, and the
   pricing section no longer needs a swipe rail on phones.
   ================================================================== */
.plan-solo{max-width:46rem;margin-inline:auto}
.plan-solo .plan{display:flex;flex-direction:column;gap:1.05rem}
.plan-solo .plan.pop,.plan-solo .plan.pop:hover{transform:none;margin-top:0}
@media(hover:hover){ .plan-solo .plan.pop:hover{transform:translateY(-4px)} }

.addon{max-width:46rem;margin:1rem auto 0;padding:1.3rem 1.5rem;border-radius:var(--r-lg);
  border:1px dashed var(--bd-2);background:color-mix(in srgb,var(--card) 55%,transparent);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.6rem;align-items:start}
.ao-kick{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.ao-kick svg{width:11px;height:11px}
.ao-name{font-size:1.05rem;margin:.35rem 0 .2rem}
.ao-desc{font-size:.84rem;color:var(--tx-2);margin:0 0 .8rem;line-height:1.55}
.ao-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.1rem}
.ao-list li{display:flex;gap:.5rem;font-size:.82rem;color:var(--tx-2);line-height:1.45}
.ao-list li svg{width:14px;height:14px;color:var(--brand);flex-shrink:0;margin-top:.15rem}
.ao-side{display:grid;gap:.7rem;justify-items:end;text-align:end;padding-top:.15rem}
.addon .amt .val{font-size:1.75rem}
.addon .amt .cur,.addon .amt .per{font-size:.78rem}
.ao-side .btn{white-space:nowrap}
.ao-more{grid-column:1/-1;margin:0;padding-top:.85rem;border-top:1px solid var(--bd);
  font-size:.78rem;color:var(--tx-3);line-height:1.6}
.ao-more b{color:var(--tx-2);font-weight:700}
@media(max-width:620px){
  .addon{grid-template-columns:1fr;padding:1.15rem 1.2rem}
  .ao-list{grid-template-columns:1fr}
  .ao-side{grid-auto-flow:column;justify-content:space-between;align-items:center;
    justify-items:start;text-align:start;padding-top:.2rem;border-top:1px solid var(--bd);padding-block:.85rem 0}
}
[lang=ar] .ao-kick{letter-spacing:0;text-transform:none;font-size:.8rem}

/* ==================================================================
   V38 — HERO DESCRIPTION ABOVE THE PHONE (phones and tablets)
   The one sentence that says what AudienceJet does sat under the phone,
   the buttons and the micro line — below the fold on every phone. It now
   follows the headline, and is set a step smaller so the phone still
   starts on the first screen.
   ================================================================== */
@media(max-width:900px){
  .hero-copy > .lede{order:2}
}
@media(max-width:620px){
  .hero .lede{font-size:1rem;line-height:1.55;margin-block:-.15rem 0}
  [lang=ar] .hero .lede{line-height:1.75}
}

/* The bar grows by the iPhone home-indicator area (viewport-fit=cover),
   but back-to-top was lifted a fixed 62px, so on a real iPhone the round
   button sat on top of the bar's corner. Clear the bar's real height. */
html.has-cta .to-top{bottom:calc(84px + env(safe-area-inset-bottom,0px));
  inset-block-end:calc(84px + env(safe-area-inset-bottom,0px))}
/* The tagline overran a 393px phone by 17px, leaving "Repeat." alone on a
   second line. English scales to fit one line (never under 14.5px); where it
   must still wrap — Arabic, the smallest phones — the two lines are balanced
   instead of leaving one word stranded. */
.hero .sub{text-wrap:balance}
@media(max-width:430px){
  [lang=en] .hero .sub{font-size:clamp(14.5px,calc((100vw - 2.4rem) / 22.8),17px)}
}
/* on phones the price and the button no longer fit side by side, so the
   price sits on its own line and the button takes the full width */
@media(max-width:620px){
  .ao-side{grid-auto-flow:row;justify-content:stretch;justify-items:stretch;gap:.75rem}
  .ao-side .btn{width:100%}
}
.ao-more bdi,.ao-more b{white-space:nowrap}
.ao-more b{white-space:normal}

/* ==================================================================
   V39 — DEMO BUBBLES: HIDDEN UNTIL THEIR EVENT, ONE SIDE EACH
   The rule that keeps the bubbles hidden until the thread reaches them
   only named chip-1 and chip-2, so "Out for delivery" sat on screen from
   page load — before any order existed — on every desktop and tablet.
   Layout now follows the order of events: new order top-left, payment
   upper-right, delivery lower-right (mirrored in Arabic).
   ================================================================== */
.hero .chip-3{opacity:0;animation:none;pointer-events:none}
.hero .chip-3.show{opacity:1;animation:chipIn .55s var(--e-spring) both,float 6s ease-in-out .55s infinite}
@media(min-width:901px){
  .chip-2{top:32%;bottom:auto}
  .chip-3{top:60%;left:auto;right:-11%}
  [dir=rtl] .chip-3{right:auto;left:-11%}
}
/* the tablet clamp, written physical-first so the logical value wins */
@media(min-width:901px) and (max-width:1360px){
  .chip-2,.chip-3{left:auto;right:auto;inset-inline-start:auto;inset-inline-end:0}
  [dir=rtl] .chip-2,[dir=rtl] .chip-3{left:auto;right:auto;inset-inline-start:auto;inset-inline-end:0}
}
@media(prefers-reduced-motion:reduce){ .hero .chip-3.show{animation:none} }

/* ==================================================================
   V40 — BILLING TOGGLE, ADD-ON ALIGNMENT, BROADCASTING
   ================================================================== */

/* the quarterly / yearly choice sets the price, so it reads as the first
   decision on the card: full width, full size, with the saving shown as a
   badge that stays visible whichever side is selected */
#commerce .bill{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;gap:.3rem;
  padding:.32rem;border-radius:15px;border:1px solid var(--bd-2);background:var(--bg-3)}
#commerce .bill button{font-size:.98rem;font-weight:800;color:var(--tx-2);padding:.8rem 1rem;
  border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:50px}
#commerce .bill button em{font-size:.7rem;font-weight:800;letter-spacing:.02em;margin:0;
  padding:.22rem .5rem;border-radius:99px;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 14%,transparent);border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
#commerce .bill button[aria-pressed=true]{box-shadow:0 8px 22px -10px color-mix(in srgb,var(--brand) 75%,transparent)}
#commerce .bill button[aria-pressed=true] em{opacity:1;color:#04120a;background:rgba(255,255,255,.55);border-color:transparent}
:root[data-theme=light] #commerce .bill button[aria-pressed=true]{color:#fff}
:root[data-theme=light] #commerce .bill button[aria-pressed=true] em{color:var(--brand-2);background:#fff}
@media(max-width:380px){ #commerce .bill button{font-size:.9rem;padding-inline:.5rem;gap:.4rem} }

/* add-on: the price and its button form one action column, centred
   against the description, with a rule separating it from the details */
@media(min-width:621px){
  .addon{grid-template-columns:minmax(0,1fr) 15rem;align-items:center}
  .ao-side{align-self:stretch;align-content:center;justify-items:stretch;text-align:center;
    padding:0 0 0 1.6rem;border-inline-start:1px solid var(--bd);gap:.8rem}
  [dir=rtl] .ao-side{padding:0 1.6rem 0 0}
  .ao-side .amt{justify-content:center}
  .ao-side .btn{width:100%}
}

/* broadcasting — included in Commerce, shown with an example campaign */
.bcast{max-width:46rem;margin:1.6rem auto 0;padding:1.7rem;border-radius:var(--r-lg);
  border:1px solid var(--bd);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.6rem;align-items:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%),var(--card)}
.bc-kick{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand)}
.bc-kick svg{width:14px;height:14px}
.bc-h{font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);line-height:1.15;margin:.55rem 0 .45rem}
.bc-lede{font-size:.92rem;color:var(--tx-2);margin:0 0 1rem;line-height:1.55}
.bc-steps{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.6rem}
.bc-steps li{display:flex;gap:.65rem;align-items:flex-start;font-size:.88rem;color:var(--tx);line-height:1.45}
.bc-steps .n{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:#04120a;background:var(--grad);margin-top:.02rem}
.bc-fine{font-size:.74rem;color:var(--tx-3);margin:0;line-height:1.55}
.bc-demo{margin:0;display:grid;gap:.55rem;justify-items:center}
.bc-tag{font-size:.68rem;font-weight:700;color:var(--tx-3);letter-spacing:.04em}
/* a WhatsApp chat, dark in both themes like the hero phone */
.bc-phone{width:100%;max-width:300px;border-radius:20px;overflow:hidden;background:#0b141a;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 50px -26px rgba(0,0,0,.7)}
.bc-head{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;background:#202c33}
.bc-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.68rem;font-weight:800;
  color:#04120a;background:var(--grad);flex-shrink:0}
.bc-who{display:grid;line-height:1.2}
.bc-who b{font-size:.8rem;color:#e9edef}
.bc-who small{font-size:.62rem;color:#8696a0}
.bc-thread{padding:.9rem .8rem 1rem;display:grid;gap:.3rem;
  background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px);background-size:14px 14px}
.bc-msg{background:#202c33;color:#e9edef;border-radius:0 10px 10px 10px;padding:.6rem .7rem .4rem;max-width:92%;position:relative}
[dir=rtl] .bc-msg{border-radius:10px 0 10px 10px}
.bc-msg b{display:block;font-size:.82rem;margin-bottom:.25rem}
.bc-msg p{font-size:.76rem;line-height:1.45;margin:0;color:#d1d7db}
.bc-msg code{font-family:inherit;font-weight:800;color:#e9edef;background:rgba(255,255,255,.08);padding:0 .25rem;border-radius:4px}
.bc-time{display:block;text-align:end;font-size:.58rem;color:#8696a0;margin-top:.2rem}
.bc-btns{display:grid;gap:.3rem;max-width:92%}
.bc-btns span{display:flex;align-items:center;justify-content:center;gap:.35rem;background:#202c33;color:#53bdeb;
  border-radius:8px;padding:.42rem .5rem;font-size:.74rem;font-weight:600}
.bc-btns svg{width:12px;height:12px}
[dir=rtl] .bc-btns svg{transform:scaleX(-1)}
.bc-demo figcaption{font-size:.7rem;color:var(--tx-3);text-align:center;max-width:300px;line-height:1.5}
@media(max-width:720px){
  .bcast{grid-template-columns:1fr;padding:1.35rem 1.2rem;gap:1.3rem}
}
[lang=ar] .bc-kick{letter-spacing:0;text-transform:none;font-size:.8rem}
[lang=ar] .bc-steps li,[lang=ar] .bc-lede{line-height:1.75}
/* the #commerce-scoped colour above outranked the old selected-state rule,
   leaving "Yearly" green-on-green; restate the selected colours at the
   same specificity */
#commerce .bill button[aria-pressed=true],#commerce .bill button[aria-pressed=true]:hover{background:var(--grad);color:#04120a}
:root[data-theme=light] #commerce .bill button[aria-pressed=true]{color:#fff}
#commerce .bill button:not([aria-pressed=true]):hover{color:var(--tx);background:var(--card-2)}

/* ==================================================================
   V41 — BRANCH SELECTOR
   Sits between the billing choice and the price it changes, so the
   card reads top to bottom as: how often you pay → how many branches →
   what that costs.
   ================================================================== */
.branches{display:grid;gap:.55rem;padding:1rem 1.1rem;border-radius:14px;
  border:1px solid var(--bd);background:var(--card-2)}
.br-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.br-lab{font-size:.95rem;font-weight:800;color:var(--tx)}
.br-step{display:inline-flex;align-items:center;gap:.4rem}
.br-btn{width:44px;height:44px;border-radius:11px;border:1px solid var(--bd-2);background:var(--bg-3);
  color:var(--tx);font:inherit;font-size:1.3rem;font-weight:700;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s var(--ease),border-color .2s var(--ease),opacity .2s}
.br-btn:hover:not(:disabled){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,var(--bg-3))}
.br-btn:disabled{opacity:.35;cursor:not-allowed}
.br-btn:focus-visible,#brN:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#brN{width:4.2rem;height:44px;border-radius:11px;border:1px solid var(--bd-2);background:var(--bg-3);
  color:var(--tx);font:inherit;font-size:1.1rem;font-weight:800;text-align:center;
  -moz-appearance:textfield;appearance:textfield}
#brN::-webkit-outer-spin-button,#brN::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.br-help{margin:0;font-size:.8rem;color:var(--tx-3);line-height:1.55}
.pl-break{margin:-.55rem 0 0;font-size:.82rem;color:var(--tx-2)}
.pl-break[hidden]{display:none}
#commerce .bill button em[hidden]{display:none}
@media(max-width:420px){
  .branches{padding:.9rem}
  .br-row{flex-direction:column;align-items:stretch;gap:.6rem}
  .br-step{justify-content:space-between}
  #brN{flex:1}
}


/* audiencejet.com: one QR code per bot; only the visitor's is shown. */
.qr-box[hidden] { display: none !important; }