.k-bg{position:fixed;inset:0;z-index:0;background:#0a0a0d;pointer-events:none}
/* Mahdi 21:5x: the header rules sit in the body, after the header, so on load the full menu flashed before them; the hidden menu and centred logo are set here in head */header.k-top .wrap{position:relative}header.k-top .k-brand{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}header.k-top{border-bottom:0}header.k-top .nav{opacity:0;pointer-events:none}

@font-face{font-family:"Estedad";src:url("/l/estedad.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#0A0A0D;--surface:#151619;--screen:#1C1D21;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);--ctl:rgba(255,255,255,.42);
  --text:#FEFEFE;--muted:#D2D4D8;--dim:#CBCED3;
  --coral:#FF9A90;--btn:#C8402F;--btn2:#B0372A;
  --paper:#F4F0E8;--paper2:#EAE4D9;--card:#FFFFFF;--paperink:#16171A;--papermuted:#4A4D53;--paperline:rgba(0,0,0,.1);
  --you:#2B1B1B;--youline:rgba(255,154,144,.35);
  --m:#FFC4BD;--b:#A6E3DE;--okink:#14552D;--okbg:#DDF2E4;
  --r:16px;--wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--text);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:Estedad,Tahoma,system-ui,sans-serif;font-size:16px;line-height:1.8;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ltr{direction:ltr;unicode-bidi:isolate}
.num{font-variant-numeric:tabular-nums}
h2{font-size:26px;line-height:1.45;font-weight:800;letter-spacing:0}
.lead{color:var(--muted);margin-top:8px;font-size:16px;max-width:40ch}
section{padding-block:56px 8px}

/* header */
header.top{position:sticky;top:0;z-index:20;background:rgba(10,10,13,.84);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.wm{height:22px;width:auto}
.login{display:inline-flex;align-items:center;min-height:44px;padding-inline:14px;border:1px solid var(--ctl);border-radius:10px;font-size:15px;color:var(--muted)}
.login:hover{color:var(--text);border-color:rgba(255,255,255,.3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding-inline:24px;border-radius:12px;background:var(--btn);color:#fff;font-weight:700;font-size:16px;transition:background .15s,transform .15s}
.btn:hover{background:var(--btn2)}
.btn:active{transform:scale(.98)}
.under{font-size:14px;color:var(--dim);margin-top:10px}

/* hero */
.hero{padding-block:32px 0}
h1{font-size:32px;line-height:1.4;font-weight:800;letter-spacing:0}
.hero .sub{margin-top:12px;color:var(--muted);font-size:17px;max-width:36ch}
.hero .cta{margin-top:22px}
.hero .cta .btn{width:100%}

/* the group card */
.group{margin-top:28px;background:var(--surface);border:1px solid var(--line2);border-radius:22px;overflow:hidden;position:relative}
.gh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 14px;border-bottom:1px solid var(--line)}
.gh .ttl b{display:block;font-size:15px;line-height:1.4}
.gh .ttl span{display:block;font-size:12px;color:var(--dim);line-height:1.5}
.mems{display:flex;gap:6px}
.mem{position:relative;display:grid;place-items:center}
.face{display:block;border-radius:50%;background:#333 center/cover no-repeat;flex:none}
.f-m{background-image:url("/l/28a6ddd6bc.jpg")}.f-b{background-image:url("/l/dee9206815.jpg")}
.mem .face{width:34px;height:34px;border:2px solid var(--surface);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tile{display:grid;place-items:center;border-radius:50%;background:#4A3836;color:#F3D9D4;font-size:0;line-height:1;flex:none}
.tile::before{content:"";width:58%;height:58%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274.2%27/%3E%3Cpath d=%27M3.5 21c.6-4.4 4.2-7 8.5-7s7.9 2.6 8.5 7z%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274.2%27/%3E%3Cpath d=%27M3.5 21c.6-4.4 4.2-7 8.5-7s7.9 2.6 8.5 7z%27/%3E%3C/svg%3E") center/contain no-repeat}
.mem .tile{width:34px;height:34px;border:2px solid var(--surface)}
.mem .me{position:absolute;top:100%;margin-top:4px;font-size:12px;font-weight:800;color:var(--ink);background:var(--text);border-radius:999px;padding:0 7px;line-height:1.7;opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s;white-space:nowrap;pointer-events:none}
.group.hand[data-who=m] .mem.m .face,.group.hand[data-who=b] .mem.b .face{transform:translateY(-3px);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--coral)}
.group.hand[data-who=m] .mem.m .me,.group.hand[data-who=b] .mem.b .me{opacity:1;transform:none}

.stage{position:relative;padding:18px 14px 10px;min-height:460px}
.jp{position:absolute;inset:18px 14px 10px;display:none;flex-direction:column;gap:12px;align-content:start}
.jp.on{display:flex}
.msg{display:grid;gap:8px;align-items:end;max-width:92%}
.msg.you{grid-template-columns:30px auto;justify-self:start}
.msg.you .tile{width:30px;height:30px}
.msg.them{grid-template-columns:1fr 30px;justify-self:end;max-width:100%}
.msg.them .face{width:30px;height:30px;order:2}
.who{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:3px;display:flex;gap:6px;align-items:baseline}
.who b{color:var(--text);font-weight:700;font-size:13px}
.msg.them .who{justify-content:flex-end}
.jp[data-who=m] .who b.c{color:var(--m)}.jp[data-who=b] .who b.c{color:var(--b)}
.bub{border-radius:16px;padding:10px 13px;font-size:15px;line-height:1.7}
.you .bub{background:var(--you);border:1px solid var(--youline);color:var(--text);border-start-end-radius:5px;width:fit-content;max-width:100%}
.them .bub{background:var(--paper);color:var(--paperink);border-start-start-radius:5px}
.them .bub .t{display:block}
.slot{position:relative}
.typing{position:absolute;inset-inline-end:0;top:0;display:inline-flex;gap:5px;align-items:center;background:var(--paper);border-radius:16px;border-start-start-radius:5px;padding:14px 16px;opacity:0;visibility:hidden}
.typing i{width:7px;height:7px;border-radius:50%;background:#8a8580;display:block}
/* exact inputs */
.att{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.att .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;letter-spacing:0;flex:none}
.att .ic.xlsx{background:#1D6F42}.att .ic.pdf{background:#C8402F}
.att .nm{display:block;font-size:13px;color:var(--text);line-height:1.5}
.att .sz{display:block;font-size:12px;color:var(--dim);line-height:1.5}
.photo{width:176px;max-width:100%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;margin-bottom:8px;background:#222}
.photo svg{width:100%;height:100%}
.voice{display:flex;align-items:center;gap:10px;min-width:220px}
.voice .play{width:40px;height:40px;border-radius:50%;background:var(--coral);display:grid;place-items:center;color:var(--ink);flex:none}
.voice .play svg{width:16px;height:16px}
.voice .wave{display:flex;align-items:center;gap:2px;height:28px;flex:1}
.voice .wave i{width:3px;border-radius:2px;background:rgba(255,255,255,.75);display:block}
.voice .dur{font-size:12px;color:var(--dim);white-space:nowrap}
.trans{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:13px;color:var(--muted);line-height:1.6}
.trans svg{width:14px;height:14px;flex:none;margin-top:4px}
.link{margin-top:8px;border-inline-start:3px solid var(--coral);padding:4px 10px;border-radius:4px;background:rgba(255,255,255,.05);display:grid;grid-template-columns:1fr 54px;gap:10px;align-items:center}
.link .src{display:block;font-size:12px;color:var(--m);font-weight:700;line-height:1.5}
.link .ti{display:block;font-size:13px;color:var(--text);line-height:1.5}
.link .pr{display:block;font-size:12px;color:var(--dim);line-height:1.5}
.link .th{width:54px;height:54px;border-radius:8px;overflow:hidden;background:#fff}
.link .th svg{width:100%;height:100%}
.url{display:block;font-size:12px;color:var(--dim);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}

/* what is handed back: a card inside the colleague's bubble */
.thing{margin-top:8px;background:var(--card);border:1px solid var(--paperline);border-radius:12px;padding:10px 12px;color:var(--paperink)}
.cap{font-size:12px;color:var(--papermuted);line-height:1.6;margin-bottom:6px}
.tbl{width:100%;border-collapse:collapse;font-size:13px;line-height:1.6}
.tbl td{padding:4px 0;border-bottom:1px solid var(--paperline);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n{text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tr.sum td{font-weight:700;border-top:1px solid rgba(0,0,0,.2);border-bottom:0;padding-top:6px}
.tbl tr.hi td{color:#A3301F;font-weight:700}
.tbl td.b{width:38%;padding-inline:8px}
.bar{height:6px;border-radius:3px;background:var(--btn)}
.site{background:var(--card);border:1px solid var(--paperline);border-radius:12px;overflow:hidden;margin-top:8px}
.site .ub{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--paper2);border-bottom:1px solid var(--paperline);font-size:12px;color:var(--papermuted)}
.site .ub i{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.18);flex:none}
.site .ub span{margin-inline-start:auto;direction:ltr;unicode-bidi:isolate}
.prod{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px;align-items:center}
.prod .pic{width:72px;height:72px;border-radius:9px;overflow:hidden;background:#eee}
.prod .pic svg{width:100%;height:100%}
.prod h4{font-size:14px;font-weight:700;line-height:1.5}
.prod .price{font-size:16px;font-weight:800;margin-top:1px;font-variant-numeric:tabular-nums}
.prod .meta{font-size:12px;color:var(--papermuted);line-height:1.5;margin-top:1px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:0 8px;border-radius:999px;line-height:1.8;border:1px solid var(--paperline);color:var(--papermuted)}
.badge.ok{background:var(--okbg);color:var(--okink);border-color:transparent}
.badge.out{color:#A3301F;border-color:rgba(163,48,31,.35)}
.specs{list-style:none;display:flex;flex-wrap:wrap;gap:4px 10px;padding:0 10px 10px;font-size:12px;color:var(--papermuted)}
.specs li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--btn);margin-inline-end:5px;vertical-align:middle}
.act{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.yes{min-width:76px;min-height:42px;padding-inline:18px;border-radius:11px;background:var(--btn);color:#fff;font-weight:800;font-size:15px}
.yes:hover{background:var(--btn2)}
.wait{font-size:13px;color:var(--papermuted)}
.done{display:none;align-items:center;gap:6px;font-weight:700;color:var(--okink);font-size:14px}
.done svg{width:16px;height:16px}
.jp.ok .act .yes,.jp.ok .act .wait{display:none}.jp.ok .done{display:inline-flex}
.jp.ok .badge.draft{display:none}.jp .badge.pub{display:none}.jp.ok .badge.pub{display:inline-block}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.pair figure{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:1;background:#ddd}
.pair svg{width:100%;height:100%}
.pair figcaption{position:absolute;bottom:6px;inset-inline-start:6px;font-size:11px;background:rgba(0,0,0,.6);color:#fff;padding:0 7px;border-radius:6px;line-height:1.8}
.paperdoc{margin-top:8px;background:var(--card);border-radius:4px;padding:10px 12px;box-shadow:0 1px 0 rgba(0,0,0,.15),0 8px 18px -12px rgba(0,0,0,.5);position:relative;color:var(--paperink)}
.paperdoc .tag{position:absolute;top:8px;inset-inline-end:10px;font-size:10px;font-weight:800;color:#fff;background:#C8402F;border-radius:5px;padding:0 6px;line-height:1.8}
.paperdoc h5{font-size:13px;font-weight:800;line-height:1.5}
.big{font-size:26px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.big small{display:block;font-size:12px;font-weight:500;color:var(--papermuted);margin-top:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.wk{background:var(--paper2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;justify-content:end;min-height:92px;position:relative;overflow:hidden}
.wk b{font-size:15px;font-variant-numeric:tabular-nums;position:relative}
.wk span{font-size:12px;color:var(--papermuted);position:relative}
.wk i{position:absolute;inset-inline:0;bottom:0;background:rgba(200,64,47,.18);display:block}
.wk.now i{background:rgba(200,64,47,.42)}
.rc{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:13px;margin-top:4px}
.rc dt{color:var(--papermuted)}.rc dd{font-weight:600;font-variant-numeric:tabular-nums}
.file{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--card);border:1px solid var(--paperline)}
.file .ic{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none}
.file .ic.xlsx{background:#1D6F42}
.file .nm{display:block;font-size:13px;line-height:1.5}
.file .sz{display:block;font-size:12px;color:var(--papermuted);line-height:1.5}

/* hero control row */
.ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px 12px;border-top:1px solid var(--line)}
.dots{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.28);position:relative;overflow:hidden;transition:width .3s;padding:0;min-width:0}
.dot.on{width:26px;background:rgba(255,255,255,.22)}
.dot.on::after{content:"";position:absolute;inset:0;background:var(--coral);transform-origin:right;transform:scaleX(0)}
.group.run .dot.on::after{animation:fill var(--dur) linear forwards}
.group.paused .dot.on::after{animation-play-state:paused}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.dot:focus-visible{outline-offset:2px}
.kb{display:flex;gap:6px}
.kb button{min-width:44px;min-height:40px;border-radius:10px;border:1px solid var(--ctl);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding-inline:12px;font-size:14px}
.kb button svg{width:16px;height:16px}
.kb button:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.kb .play .i-pause{display:none}.group.run:not(.paused) .kb .play .i-pause{display:block}.group.run:not(.paused) .kb .play .i-play{display:none}

/* hero motion inside a panel */
.jp .you,.jp .them,.jp .typing{opacity:0}
.jp.on .you{animation:arriveR .4s cubic-bezier(.2,.8,.2,1) .15s both}
.jp.on .typing{animation:typing 1.25s ease .9s both}
.jp.on .typing i{animation:dot 1s ease infinite}
.jp.on .typing i:nth-child(2){animation-delay:.15s}.jp.on .typing i:nth-child(3){animation-delay:.3s}
.jp.on .them{animation:arriveL .45s cubic-bezier(.2,.8,.2,1) 2.15s both}
.jp.on.now .you,.jp.on.now .them{animation:none;opacity:1}
.jp.on.now .typing{animation:none;opacity:0;visibility:hidden}
@keyframes arriveR{from{opacity:0;transform:translate(10px,6px)}to{opacity:1;transform:none}}
@keyframes arriveL{from{opacity:0;transform:translate(-10px,6px)}to{opacity:1;transform:none}}
@keyframes typing{0%{opacity:0;visibility:visible}15%{opacity:1}85%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes dot{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* colleagues */
.cols{display:grid;gap:14px;margin-top:20px}
.col{background:var(--surface);border:1px solid var(--line2);border-radius:20px;padding:16px}
.col .head{display:flex;gap:12px;align-items:center}
.col .head .face{width:60px;height:60px}
.col .head b{font-size:19px;display:block;line-height:1.3}
.col .head small{display:block;color:var(--muted);font-size:14px;line-height:1.5}
.col .hd{font-size:13px;color:var(--dim);margin:16px 0 8px}
.asks{display:grid;gap:8px}
.ask{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:start}
.ask .tile{width:26px;height:26px;margin-top:6px}
.ask .bub{background:var(--you);border:1px solid var(--youline);border-start-end-radius:5px;font-size:14px;padding:8px 11px}
.ask .att{margin-top:6px;padding:6px 8px}.ask .att .ic{width:30px;height:30px;font-size:9px}
.ask .voice{min-width:0}.ask .voice .play{width:32px;height:32px}.ask .voice .wave{height:22px}
.ask .link{grid-template-columns:1fr 40px}.ask .link .th{width:40px;height:40px}
.ask .photo{max-width:150px;aspect-ratio:3/2}
.col .gets{margin-top:14px;font-size:14px;color:var(--muted);line-height:1.7}
.col .gets b{color:var(--text)}
.col[data-who=m] .head b{color:var(--m)}.col[data-who=b] .head b{color:var(--b)}

/* safety */
.safe{display:grid;gap:14px;margin-top:20px}
.sgroup{background:var(--surface);border:1px solid var(--line2);border-radius:22px;padding:14px}
.sgroup .msg{margin-bottom:10px}
.sgroup .msg:last-child{margin-bottom:0}
.s-own,.s-prev,.s-yes,.s-done{visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.safe.st1 .s-own,.safe.st2 .s-prev,.safe.st3 .s-yes,.safe.st5 .s-done{visibility:visible;opacity:1;transform:none}
.s-yes .bub{display:inline-block;padding:8px 18px;font-weight:800}
.safe.st3 .s-yes .bub{animation:pop .35s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
.pchip{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-variant-numeric:tabular-nums}
.pchip s{color:var(--papermuted)}
.pchip b{position:relative;display:inline-block;padding:0 8px;border-radius:7px;background:var(--paper2)}
.safe.st4 .pchip b,.safe.st5 .pchip b{background:transparent}
.flyer{position:fixed;z-index:50;pointer-events:none;font-weight:800;color:var(--paperink);background:var(--paper2);border-radius:7px;padding:0 8px;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:transform .75s cubic-bezier(.3,.9,.3,1),opacity .2s .6s}
/* your site, a small browser window */
.sitewin{background:var(--card);border-radius:14px;overflow:hidden;color:var(--paperink);box-shadow:0 1px 0 rgba(0,0,0,.4),0 18px 40px -24px rgba(0,0,0,.9)}
.sitewin .ub{display:flex;align-items:center;gap:6px;padding:7px 12px;background:var(--paper2);font-size:12px;color:var(--papermuted)}
.sitewin .ub i{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.18);flex:none}
.sitewin .ub span{margin-inline-start:auto;direction:ltr;unicode-bidi:isolate}
.sitewin .row{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:12px;align-items:center}
.sitewin .pic{width:104px;height:104px;border-radius:10px;overflow:hidden;background:#EFE9DF;position:relative}
.sitewin .pic svg{width:100%;height:100%}
.sitewin h4{font-size:15px;font-weight:700;line-height:1.5}
.sitewin .meta{font-size:12px;color:var(--papermuted);line-height:1.5}
.sitewin .sprice{margin-top:6px}
.cartbtn{margin:0 12px 12px;background:var(--paperink);color:#fff;border-radius:10px;text-align:center;font-size:13px;font-weight:700;line-height:2.8}
.sprice{font-size:20px;font-weight:800;display:inline-flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
.sprice .u{font-size:13px;font-weight:500;color:var(--papermuted);margin-inline-start:5px}
.digit{display:inline-block;height:1.3em;overflow:hidden;vertical-align:bottom;line-height:1.3}
.digit span{display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.digit span i{display:block;height:1.3em;font-style:normal}
.pub{position:absolute;top:6px;inset-inline-start:6px;font-size:12px;font-weight:700;color:var(--okink);background:var(--okbg);border-radius:999px;padding:0 10px;line-height:1.9;opacity:0;transform:scale(.6)}
.safe.st4 .pub,.safe.st5 .pub{opacity:1;transform:none;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.safe.st4 .sitewin{animation:edge .7s ease}
@keyframes edge{0%{box-shadow:0 0 0 0 rgba(255,154,144,0)}30%{box-shadow:0 0 0 4px rgba(255,154,144,.8)}100%{box-shadow:0 0 0 0 rgba(255,154,144,0)}}
.slabel{font-size:12px;color:var(--dim);text-align:center;margin-top:8px;min-height:1.6em}
.replay{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted);font-size:14px;border:1px solid var(--ctl);border-radius:10px;padding-inline:14px;margin-top:4px}
.replay svg{width:15px;height:15px}
.rules{display:grid;gap:10px;margin-top:4px}
.rule{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.7}
.rule i{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--coral);color:var(--text);display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800;margin-top:5px}
.rule.no i{border-color:var(--ctl);color:var(--muted)}
.rule small{display:block;color:var(--muted);font-size:14px}

/* voices */
.tms{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 12px;margin-top:20px;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
.tms::-webkit-scrollbar{display:none}
.tm{flex:0 0 80%;scroll-snap-align:center;background:var(--surface);border:1px solid var(--line2);border-radius:20px;padding:16px;min-height:200px;display:flex;flex-direction:column}
.tm .q{flex:1;display:grid;gap:9px;align-content:start;padding-top:4px}
.tm .q i{display:block;height:12px;border-radius:6px;background:rgba(255,255,255,.1)}
.tm .q i:nth-child(1){width:92%}.tm .q i:nth-child(2){width:78%}.tm .q i:nth-child(3){width:60%}
.tm .shop{margin-top:16px;display:flex;align-items:center;gap:10px}
.tm .logo{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:14px;font-weight:800;flex:none}
.tm .shop b{display:block;font-size:17px;line-height:1.3}
.tm .shop small{display:block;color:var(--dim);font-size:13px;line-height:1.5}
.tm .pend{font-size:12px;color:var(--dim);margin-top:4px}

/* steps */
.steps{display:grid;gap:18px;margin-top:20px}
.step{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start}
.step i{width:36px;height:36px;border-radius:50%;background:var(--coral);color:var(--ink);display:grid;place-items:center;font-style:normal;font-weight:800;font-size:16px}
.step b{display:block;font-size:17px;line-height:1.5}
.step small{display:block;color:var(--muted);font-size:14px;line-height:1.7}
.mini{margin-top:10px;max-width:280px}
.field{display:flex;gap:8px}
.field span{flex:1;min-height:44px;border:1px solid var(--ctl);border-radius:10px;display:flex;align-items:center;padding-inline:12px;font-size:15px;color:var(--dim);direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.field span b{color:var(--text);font-weight:500}
.field em{min-height:44px;padding-inline:14px;border-radius:10px;background:var(--btn);color:#fff;font-style:normal;font-weight:700;display:flex;align-items:center;font-size:14px}
.join{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:8px 10px;font-size:13px;color:var(--muted)}
.join .face{width:26px;height:26px}.join .tile{width:26px;height:26px;font-size:10px;border-radius:7px}
.join .fs{display:flex}.join .fs>*{margin-inline-start:-6px}.join .fs>*:first-child{margin:0}
.step .ask{max-width:280px}

/* faq */
.faq{margin-top:12px;border-top:1px solid var(--line2);max-width:720px}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:700;font-size:16px;cursor:pointer;line-height:1.5;min-height:52px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;color:var(--dim);transition:transform .2s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq p{padding:0 0 16px;color:var(--muted);max-width:58ch;font-size:15px}

/* close */
.close{padding-block:56px 24px;border-top:1px solid var(--line);margin-top:48px;text-align:center}
.close h2{font-size:28px}
.close .btn{margin-top:20px;min-width:260px}
footer.sfoot{border-top:1px solid var(--line);padding-block:18px 110px;font-size:14px;color:var(--dim);margin-top:40px}
footer.sfoot .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
footer.sfoot a:hover{color:var(--text)}
footer.sfoot .c{margin-inline-start:auto}

/* sticky bar on phones */
.bar-cta{position:fixed;bottom:0;inset-inline:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,13,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
.bar-cta.show{transform:none}
.bar-cta .btn{width:100%}

/* reduced motion: every story shows its final frame */
@media (prefers-reduced-motion:reduce){
  .jp.on .you,.jp.on .them{animation:none;opacity:1}
  .jp.on .typing{animation:none;opacity:0;visibility:hidden}
  .group.run .dot.on::after{animation:none;transform:scaleX(1)}
  .mem .face,.mem .me,.dot,.digit span,.bar-cta,.faq summary svg{transition:none}
  .safe.st3 .s-yes .bub,.safe.st4 .sitewin{animation:none}
  .s-own,.s-prev,.s-yes,.s-done,.pub{transition:none}
}

/* desktop */
@media (min-width:900px){
  .wrap{padding-inline:32px}
  header.top .wrap{min-height:64px}
  .wm{height:24px}
  section{padding-block:80px 8px}
  h2{font-size:32px}
  .lead{font-size:17px}
  .hero{padding-block:56px 0;display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
  h1{font-size:46px;line-height:1.3}
  .hero .sub{font-size:19px}
  .hero .cta .btn{width:auto;min-width:250px}
  .group{margin-top:0}
  .stage{min-height:480px}
  .cols{grid-template-columns:repeat(3,1fr);gap:20px}
  .safe{grid-template-columns:1fr 1fr;gap:32px 40px;align-items:start}
  .safe .sgroup{grid-row:1 / 3}.safe .rules{margin-top:4px}
  .tms{overflow:visible;display:grid;grid-template-columns:repeat(4,1fr);margin-inline:0;padding-inline:0}
  .tm{flex:none}
  .steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .close{padding-block:88px 40px}
  .close h2{font-size:38px}
  footer.sfoot{padding-bottom:28px}
  .bar-cta{display:none}
}

/* ===== r14 additions ===== */
:root{--s:#E2C4F0;--shop:#6B4A2B;--shop2:#F6EFE4;--shopink:#2A1F16;--y:#F6D58A;--lgc:#B8D4FF}
.f-s{background-image:url("/l/829380afb6.jpg")}
.jp[data-who=s] .who b.c,.col[data-who=s] .head b,.rcard[data-who=s] b.nm{color:var(--s)}
.group.hand[data-who=s] .mem.s .face{transform:translateY(-3px);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--coral)}
.group.hand[data-who=s] .mem.s .me{opacity:1;transform:none}
[hidden]{display:none!important}
main{flex:1}

/* markers */
.ph,.lg{display:inline-block;font-size:12px;font-weight:700;line-height:1.7;padding:0 7px;border-radius:6px;vertical-align:middle;margin-inline-start:4px;white-space:normal}
.ph{background:var(--y);color:#16171A}
.lg{background:var(--lgc);color:#0A1430}
.ytag{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.6;margin-top:10px}
.ytag .ph{flex:none;margin:3px 0 0}

/* header nav */
header.top .nav{display:flex;align-items:center;gap:6px}
header.top .nav a.lnk{display:none;min-height:44px;align-items:center;padding-inline:12px;font-size:15px;color:var(--muted)}
header.top .nav a.lnk:hover{color:var(--text)}

/* hero: three faces in one row */
.trio{display:flex;gap:14px;margin-bottom:18px}
.trio div{display:grid;justify-items:center;gap:4px;text-align:center}
.trio .face{width:52px;height:52px;border:2px solid var(--line2)}
.trio b{font-size:13px;line-height:1.3}
.trio small{font-size:12px;color:var(--dim);line-height:1.3}
.trio div:nth-child(1) b{color:var(--s)}.trio div:nth-child(2) b{color:var(--m)}.trio div:nth-child(3) b{color:var(--b)}
h1 .hl{display:block;color:var(--coral);margin-top:6px}
.gh .ttl span{white-space:nowrap}
.mems{gap:4px}

/* site chat card inside a hero job */
.chatcard{margin-top:8px;background:var(--card);border:1px solid var(--paperline);border-radius:12px;overflow:hidden;color:var(--paperink)}
.chatcard .ch{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--shop);color:#fff;font-size:12px}
.chatcard .ch b{font-weight:700;font-size:12px}
.chatcard .ch .wb{margin-inline-start:auto;font-size:10px;font-weight:700;background:rgba(255,255,255,.18);border-radius:999px;padding:0 7px;line-height:1.8}
.chatcard .ln{display:flex;gap:6px;padding:8px 10px 0;font-size:13px;line-height:1.6}
.chatcard .ln:last-child{padding-bottom:8px}
.chatcard .ln span{border-radius:10px;padding:5px 9px;max-width:88%}
.chatcard .ln.q span{background:var(--paper2)}
.chatcard .ln.a{justify-content:flex-end}
.chatcard .ln.a span{background:#EFE3F7}
.chatcard .ln.sys{justify-content:center;padding-bottom:8px}
.chatcard .ln.sys span{background:var(--okbg);color:var(--okink);font-size:12px;font-weight:700}
.chatcard .ts{font-size:11px;color:var(--papermuted);align-self:flex-end;white-space:nowrap}

/* proof strip */
.proof{border-block:1px solid var(--line);margin-top:40px;padding-block:22px 18px}
.proof .att{display:block;background:none;border:0;padding:0;margin:0 0 12px;font-size:15px;color:var(--muted)}
.proof .att b{color:var(--text);font-weight:700}
.proof ul{list-style:none;display:grid;gap:14px}
.proof li b{display:block;font-size:26px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.proof li span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.proof .src{font-size:12px;color:var(--dim);margin-top:12px}

/* Shirin's demo: two beats */
.beats{display:grid;gap:22px;margin-top:20px}
.beat{display:grid;gap:8px;align-content:start}
.blabel{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:8px}
.blabel i{width:8px;height:8px;border-radius:50%;background:var(--coral);display:inline-block;font-style:normal}
.shopwin{background:var(--shop2);border-radius:14px;overflow:hidden;color:var(--shopink);box-shadow:0 1px 0 rgba(0,0,0,.4),0 18px 40px -24px rgba(0,0,0,.9)}
.shopwin .ub{display:flex;align-items:center;gap:6px;padding:7px 12px;background:#E9E0D2;font-size:12px;color:#4A4036}
.shopwin .ub i{width:8px;height:8px;border-radius:50%;background:rgba(0,0,0,.15);flex:none}
.shopwin .ub span{margin-inline-start:auto;direction:ltr;unicode-bidi:isolate}
.shopbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--shop);color:#fff}
.shopbar b{font-size:15px;letter-spacing:0}
.shopbar span{font-size:11px;opacity:.8}
.shopprod{display:grid;grid-template-columns:84px 1fr;gap:12px;padding:12px 14px;align-items:center;border-bottom:1px solid rgba(0,0,0,.07)}
.shopprod .pic{width:84px;height:84px;border-radius:10px;overflow:hidden;background:#E3D6C4}
.shopprod .pic svg{width:100%;height:100%}
.shopprod h4{font-size:14px;font-weight:700;line-height:1.5}
.shopprod .pr{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}
.shopprod .st{font-size:12px;color:#574F46}
.widget{margin:12px 14px 14px;background:#fff;border-radius:14px;box-shadow:0 6px 24px -10px rgba(0,0,0,.35);overflow:hidden}
.widget .wh{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid rgba(0,0,0,.07)}
.widget .wh .face{width:28px;height:28px}
.widget .wh b{font-size:13px}
.widget .wh small{display:block;font-size:11px;color:#6B6258;line-height:1.3}
.widget .wb{margin-inline-start:auto;font-size:10px;font-weight:700;color:#fff;background:var(--btn);border-radius:999px;padding:0 8px;line-height:1.9}
.wbody{padding:10px 12px;display:grid;gap:8px;min-height:230px;align-content:start}
.wm2{display:flex;gap:6px;align-items:flex-end;font-size:13px;line-height:1.6}
.wm2 .bb{border-radius:12px;padding:7px 10px;max-width:84%}
.wm2.q .bb{background:#F1EDE6;border-end-start-radius:4px}
.wm2.a{flex-direction:row-reverse}
.wm2.a .bb{background:#F3E8F8;border-end-end-radius:4px}
.wm2 .ts{font-size:10px;color:#6B6258;white-space:nowrap}
.wm2.sys{justify-content:center}
.wm2.sys .bb{background:var(--okbg);color:var(--okink);font-size:12px;font-weight:700;border-radius:999px;padding:3px 12px}
.wm2.sys.pay .bb{background:#EFE9DF;color:#4A4036}
.wprod{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;margin-top:6px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:6px}
.wprod .pic{width:44px;height:44px;border-radius:7px;overflow:hidden;background:#E3D6C4}
.wprod .pic svg{width:100%;height:100%}
.wprod b{display:block;font-size:12px;line-height:1.4}
.wprod span{display:block;font-size:12px;font-variant-numeric:tabular-nums;color:#4A4036}
.wprod em{font-style:normal;font-size:12px;font-weight:700;background:var(--shop);color:#fff;border-radius:8px;padding:0 10px;line-height:2.4;white-space:nowrap;position:relative}
.wfoot{font-size:10px;color:#6B6258;text-align:center;padding:4px 0 8px}
.wtyping{display:inline-flex;gap:4px;align-items:center;background:#F3E8F8;border-radius:12px;padding:10px 12px}
.wtyping i{width:6px;height:6px;border-radius:50%;background:#8a7a90;display:block;animation:dot 1s ease infinite}
.wtyping i:nth-child(2){animation-delay:.15s}.wtyping i:nth-child(3){animation-delay:.3s}
/* beat steps */
.beat [data-st]{opacity:0;transform:translateY(6px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.beat [data-st].on{opacity:1;transform:none}
.beat .wtyping{display:none}.beat .wtyping.on{display:inline-flex;opacity:1;transform:none}
.beat .typing2{display:none;margin-bottom:10px}.beat .typing2.on{display:block}
.beat .typing2 .typing{position:static;opacity:1;visibility:visible;display:inline-flex}
.wprod em.tap::after{content:"";position:absolute;inset:-6px;border-radius:12px;border:2px solid var(--coral);animation:tapring .6s ease-out both}
@keyframes tapring{from{opacity:1;transform:scale(.85)}to{opacity:0;transform:scale(1.15)}}
.sgroup .msg .who .t2{font-weight:400;color:var(--dim)}
.beat .sgroup{min-height:300px}
.beat .sgroup{position:relative}
.bfoot{font-size:12px;color:var(--dim);line-height:1.6}
.beat .replay{justify-self:center}

/* Shirin card: shopper asks */
.ask .shopper{width:26px;height:26px;margin-top:6px;border-radius:50%;background:#2E3340;color:#E0E6F2;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.col[data-who=s] .ask .bub{background:var(--surface);border:1px solid var(--line2);border-start-end-radius:5px}

/* فرمون: per-colleague cards */
.rcards{display:grid;gap:14px;margin-top:24px}
.rcard{background:var(--surface);border:1px solid var(--line2);border-radius:20px;padding:16px}
.rcard .head{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.rcard .head .face{width:40px;height:40px}
.rcard b.nm{font-size:17px;display:block;line-height:1.3}
.rcard .head small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.rcard ul{list-style:none;display:grid;gap:8px}
.rcard li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:14px;line-height:1.65;color:var(--text)}
.rcard li i{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--coral);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;margin-top:3px;color:var(--text)}
.rcard li.no i{border-color:var(--ctl);color:var(--muted)}
.rcard li.no{color:var(--muted)}
.rcard .plain{font-size:14px;color:var(--text);background:rgba(255,154,144,.1);border:1px solid var(--youline);border-radius:12px;padding:10px 12px;margin-bottom:12px;line-height:1.65}

/* voices: sample quotes */
.tm blockquote{flex:1;font-size:15px;line-height:1.75;color:var(--text)}
.tm .smp{display:inline-block;font-size:11px;font-weight:700;color:var(--dim);border:1px solid var(--ctl);border-radius:999px;padding:0 8px;line-height:1.8;margin-bottom:10px;width:fit-content}

/* steps: join row with three faces */
.join .fs>*{border:2px solid var(--surface)}

/* close */
.close .made{font-size:14px;color:var(--dim);margin-top:22px}

/* site footer, three columns */
footer.sfoot .cols3{display:grid;gap:18px;width:100%;grid-template-columns:1fr 1fr}
footer.sfoot .cols3 p{font-size:13px;color:var(--text);font-weight:700;margin-bottom:6px}
footer.sfoot .cols3 ul{list-style:none;display:grid;gap:4px}
footer.sfoot .cols3 a{font-size:14px;color:var(--dim)}
footer.sfoot .cols3 a:hover{color:var(--text)}
footer.sfoot .bot{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
footer.sfoot .bot .wm{height:18px}

/* doc pages */
.doc{width:100%;max-width:720px;margin:0 auto;padding:32px 20px 24px}
.doc section{padding:0;margin-top:28px}
.doc .dh h1{font-size:30px;line-height:1.4;font-weight:800}
.doc .dh .lead{max-width:60ch;margin-top:10px}
.doc .upd{font-size:13px;color:var(--dim);margin-top:10px}
.doc h2{font-size:21px;margin-bottom:8px}
.doc h3{font-size:15px;font-weight:700;color:var(--muted);margin:16px 0 6px}
.doc p{color:var(--text);font-size:16px;line-height:1.85;margin-top:6px;max-width:62ch}
.doc p small{display:block;color:var(--dim);font-size:13px;margin-top:4px}
.doc ul{list-style:none;display:grid;gap:6px;max-width:62ch}
.doc ul li{position:relative;padding-inline-start:16px;font-size:15px;line-height:1.75;color:var(--text)}
.doc ul li::before{content:"";position:absolute;inset-inline-start:0;top:.75em;width:6px;height:6px;border-radius:50%;background:var(--coral)}
.doc a:not(.btn){text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ctl)}
.doc a:not(.btn):hover{text-decoration-color:var(--coral)}
.sum{margin-top:22px;background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:14px 16px}
.sum .sumt{font-size:13px;color:var(--dim);margin:0 0 6px}
.sum ul li::before{background:var(--text)}
.wsec{border-top:1px solid var(--line2);padding-top:24px!important;margin-top:36px!important}
.whohead{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.whohead .face{width:52px;height:52px}
.whohead h2{margin:0;font-size:24px}
.whohead small{display:block;color:var(--muted);font-size:14px;line-height:1.4}
.wsec[data-who=s] h2{color:var(--s)}.wsec[data-who=m] h2{color:var(--m)}.wsec[data-who=b] h2{color:var(--b)}
.doc .cta{margin-top:32px}
.doc .cta .btn{width:100%}
.df{border-top:1px solid var(--line);margin-top:36px;padding-top:16px;font-size:14px;color:var(--muted)}
.df p{font-size:14px;color:var(--muted)}
.rows{list-style:none;border-top:1px solid var(--line2);max-width:none}
.rows li{padding:0;border-bottom:1px solid var(--line2)}
.rows li::before{display:none}
.rows li>a,.rows li.two{display:flex;align-items:center;gap:12px;min-height:56px;padding-block:8px;text-decoration:none!important;flex-wrap:wrap}
.rows .rl{font-size:15px;color:var(--text)}
.rows .rv{margin-inline-start:auto;font-size:14px;color:var(--dim)}
.rows li>a:hover .rv{color:var(--text)}
.rows li.two a{font-size:14px;color:var(--coral);text-decoration:none!important;min-height:44px;display:inline-flex;align-items:center;padding-inline:10px;border:1px solid var(--ctl);border-radius:10px}
.rows li.two .rv{margin-inline-start:0}
.doc.center{text-align:center;padding-block:80px}
.doc.center h1{font-size:30px;font-weight:800}
.doc.center p{margin-inline:auto}
.doc.center .cta .btn{width:auto;min-width:220px}

/* login */
.lwrap{width:100%;max-width:420px;margin:0 auto;padding:32px 20px 40px}
.lpick{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim);margin-bottom:24px}
.lpick select,.pick select{font:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--ctl);border-radius:10px;min-height:40px;padding-inline:10px}
.lcard h1{font-size:26px;line-height:1.4;font-weight:800}
.lcard .help{color:var(--muted);font-size:15px;margin-top:8px}
.lcard .help a,.lcard .terms a,.lcard .again button,.lcard .err a{text-decoration:underline;text-underline-offset:4px;color:var(--text)}
.lform{display:grid;gap:10px;margin-top:22px}
.lform label{font-size:14px;color:var(--muted)}
.in{width:100%;min-height:52px;border:1px solid var(--ctl);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:18px;padding-inline:14px;direction:ltr;text-align:left;font-variant-numeric:tabular-nums}
.in:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent}
.in[aria-invalid=true]{border-color:#FF7A6B}
.in.code{text-align:center;letter-spacing:.4em;font-size:24px}
.lform .btn{width:100%;margin-top:4px}
.err{color:#FFC1B8;font-size:14px;line-height:1.6}
.note{color:var(--muted);font-size:14px;background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:8px 12px}
.terms{font-size:13px;color:var(--dim);line-height:1.7}
.again{margin-top:14px;font-size:14px;color:var(--muted)}
.again button{color:var(--text)}
.again button:disabled{text-decoration:none;color:var(--dim);cursor:default}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ldone{font-size:16px;color:var(--muted);margin-top:24px;border:1px dashed var(--ctl);border-radius:12px;padding:14px}

/* page switcher (prototype only) */
/* owner avatar: solid disc, silhouette drawn as an image (no mask) */
.tile::before{content:"";width:100%;height:100%;-webkit-mask:none;mask:none;background:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cg fill=%27%23F3D9D4%27%3E%3Ccircle cx=%2712%27 cy=%279.2%27 r=%275.2%27/%3E%3Cpath d=%27M1.5 27c0-7.2 4.7-11 10.5-11s10.5 3.8 10.5 11z%27/%3E%3C/g%3E%3C/svg%3E") center bottom/100% 100% no-repeat}
.pick{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto;padding:14px 16px 18px;font-size:12px;color:var(--dim);background:var(--bg)}
@media (min-width:900px){.pick{position:fixed;bottom:16px;inset-inline-start:12px;z-index:40;margin:0;padding:6px 8px;background:rgba(10,10,13,.9);border:1px solid var(--line2);border-radius:12px;backdrop-filter:blur(8px)}}
.pick select{min-height:34px;font-size:13px;max-width:170px}
.index{width:100%;max-width:720px;margin:0 auto;padding:40px 20px}
.index h1{font-size:26px;font-weight:800;line-height:1.4}
.index p{color:var(--muted);margin-top:8px}
.index ul{list-style:none;margin-top:20px;border-top:1px solid var(--line2)}
.index li a{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--line2);font-size:15px}
.index li a span:last-child{color:var(--dim);font-size:13px;direction:ltr}
.index .legend{margin-top:20px;display:grid;gap:8px;font-size:14px;color:var(--muted)}

@media (min-width:900px){
  header.top .nav a.lnk{display:inline-flex}
  .trio{gap:18px}.trio .face{width:60px;height:60px}.trio b{font-size:14px}
  .proof{margin-top:64px;padding-block:28px 22px}
  .proof .att{font-size:16px}
  .proof ul{grid-template-columns:repeat(3,1fr);gap:24px}
  .proof li b{font-size:32px}
  .beats{grid-template-columns:1fr 1fr;gap:32px;align-items:start}
  .rcards{grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
  .safe{grid-template-columns:1fr 1fr;gap:32px 40px}
  .safe .sgroup{grid-row:auto}
  .safe .rcards{grid-column:1 / -1}
  .tms{grid-template-columns:repeat(5,1fr)}
  footer.sfoot .cols3{grid-template-columns:repeat(3,1fr);max-width:720px}
  .doc{padding:56px 32px 40px}
  .doc .dh h1{font-size:38px}
  .doc .cta .btn{width:auto;min-width:250px}
  .lwrap{padding-top:64px}
  .pick.up{bottom:16px}
}

/* ===== hero demo (r14, Mahdi 08:05): one small card, plays by itself, no controls ===== */
.hero{padding-block:24px 0}
.hero .cta{margin-top:18px}
.trio{margin-bottom:16px}.trio .face{width:48px;height:48px}.trio small{font-size:11px;max-width:9em}
.demo{margin-top:24px;background:var(--surface);border:1px solid var(--line2);border-radius:20px;overflow:hidden;position:relative}
.dhd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.dhd .dl{font-size:13px;font-weight:700;line-height:1.4}
.demo .mems{display:flex;gap:5px}
.demo .mem .face,.demo .mem .tile{width:28px;height:28px}
.demo .mem .me{font-size:11px;margin-top:3px}
.demo.hand[data-who=m] .mem.m .face,.demo.hand[data-who=b] .mem.b .face,.demo.hand[data-who=s] .mem.s .face{transform:translateY(-3px);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--coral)}
.demo.hand[data-who=m] .mem.m .me,.demo.hand[data-who=b] .mem.b .me,.demo.hand[data-who=s] .mem.s .me{opacity:1;transform:none}
.dstage{position:relative;height:312px;overflow:hidden}
.dj{position:absolute;inset:12px 12px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;opacity:0;visibility:hidden;transition:opacity .3s}
.dj.on{opacity:1;visibility:visible}
.dj .msg{max-width:94%}
.dj .msg.them{grid-template-columns:1fr 26px}.dj .msg.them .face{width:26px;height:26px}
.dj .msg.you{grid-template-columns:26px auto}.dj .msg.you .tile{width:26px;height:26px}
.dj .who{margin-bottom:2px}.dj .who b{font-size:12px}
.dj .bub{font-size:14px;line-height:1.6;padding:8px 12px;border-radius:14px}
.dj .you .bub{border-start-end-radius:4px}.dj .them .bub{border-start-start-radius:4px}
.dj .yes .bub{font-weight:800;padding-inline:16px}
.dj[data-who=m] .who b.c{color:var(--m)}.dj[data-who=b] .who b.c{color:var(--b)}.dj[data-who=s] .who b.c{color:var(--s)}
.dj .slot{position:relative}
.dj .typing{padding:11px 14px;border-radius:14px;border-start-start-radius:4px}
.dj .typing i{width:6px;height:6px;animation:dot 1s ease infinite}
.dj .typing i:nth-child(2){animation-delay:.15s}.dj .typing i:nth-child(3){animation-delay:.3s}
.dj.ty .typing{opacity:1;visibility:visible}
.dj [data-b]{opacity:0;transform:translateY(8px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1)}
.dj.b1 [data-b="1"],.dj.b2 [data-b="2"],.dj.b3 [data-b="3"]{opacity:1;transform:none}
.tile.sh{background:#2E3A4A;color:#CFE0F5;font-size:12px;font-weight:800}.tile.sh::before{display:none}
/* the thing that visibly happens */
.dj .thing{margin-top:8px;background:var(--card);border:1px solid var(--paperline);border-radius:10px;padding:8px 10px;color:var(--paperink)}
.tp{display:grid;grid-template-columns:40px 1fr;gap:4px 10px;align-items:center}
.tp .bd{grid-column:2;justify-self:start}
.tp .pic{width:40px;height:40px;border-radius:8px;overflow:hidden;background:#EEE9E2;display:block}
.tp .pic svg{width:100%;height:100%}
.tp b{display:block;font-size:13px;line-height:1.4}
.tp .pr{display:block;font-size:13px;font-variant-numeric:tabular-nums;line-height:1.5;color:var(--papermuted)}
.tp .pr em{font-style:normal;font-weight:800;color:var(--paperink)}
.tp .pr s{margin-inline-end:6px}
.tp .pr .new{display:none}.dj.did .tp .pr .new{display:inline;animation:pop .4s cubic-bezier(.2,.8,.2,1) both}
.dj.did .tp .pr .old{opacity:.55}
.tp .bd{font-size:11px;font-weight:700;padding:0 8px;border-radius:999px;line-height:1.9;border:1px solid var(--paperline);color:var(--papermuted);white-space:nowrap}
.tp .bd.out{color:#A3301F;border-color:rgba(163,48,31,.35)}
.tp .bd.post{display:none;background:var(--okbg);color:var(--okink);border-color:transparent}
.dj.did .tp .bd.pre{display:none}.dj.did .tp .bd.post{display:inline-block;animation:pop .4s cubic-bezier(.2,.8,.2,1) both}
.dj .thing[data-did]{opacity:0;transform:translateY(8px);transition:opacity .4s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1)}
.dj.did .thing[data-did]{opacity:1;transform:none}
.tsys{display:inline-flex;align-items:center;gap:8px;align-self:center;font-size:12px;font-weight:700;background:var(--okbg);color:var(--okink);border-color:transparent;border-radius:999px;padding:4px 12px}
.tsys svg{width:14px;height:14px}
.tf{display:flex;align-items:center;gap:10px}
.tf .ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;flex:none}
.tf .ic.pdf{background:#C8402F}
.tf b{display:block;font-size:12px;line-height:1.5;direction:ltr;unicode-bidi:isolate;text-align:end}
.tf span{display:block;font-size:12px;color:var(--papermuted);line-height:1.5}
.tt{display:grid;gap:3px;font-size:12px;line-height:1.6;font-variant-numeric:tabular-nums}
.tt div{display:flex;justify-content:space-between;gap:12px}
.tt span{color:var(--papermuted)}.tt b{font-weight:700}
.tt .sum{border-top:1px solid var(--paperline);padding-top:3px;margin-top:2px}.tt .sum b{font-weight:800}
.chip{display:inline-grid;place-items:center;width:34px;height:22px;border-radius:6px;background:#1D6F42;color:#fff;font-size:10px;font-weight:800;vertical-align:middle;margin-inline-end:8px}
.ph2{display:inline-block;width:46px;height:36px;border-radius:7px;overflow:hidden;background:#222;vertical-align:middle;margin-inline-end:8px}
.ph2 svg{width:100%;height:100%}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dj [data-b],.dj .thing[data-did],.dj{transition:none}.dj.did .tp .pr .new,.dj.did .tp .bd.post{animation:none}.dj .typing{display:none}}
@media (min-width:900px){
  .hero{padding-block:48px 0}
  .trio{margin-bottom:20px}.trio .face{width:56px;height:56px}.trio small{font-size:12px;max-width:none}
  .demo{margin-top:0;width:100%;max-width:520px;justify-self:start}
  .dstage{height:364px}
  .dj{inset:16px 16px 16px;gap:10px}
  .dj .bub{font-size:15px}
}

/* ===== voices, brought back from r11-hero-a (Mahdi 08:12): phone = swipe row, next card peeking; desktop = five cards in one fanned row, fan in once ===== */
.vrow{margin-inline:-20px;padding:20px 20px 28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:4px}
.vrow::-webkit-scrollbar{display:none}
.vlist{display:flex;gap:16px;margin:0;padding:0;list-style:none;background:none;border:0;border-radius:0;box-shadow:none}
.vlist::after{content:"";flex:none;width:44px}
.vc{flex:none;width:78%;scroll-snap-align:center;border:6px solid var(--f);border-radius:20px;background:#151619;transform:rotate(var(--r))}
.vin{display:flex;flex-direction:column;gap:16px;min-height:280px;height:100%;padding:20px}
.vc blockquote{flex:1;margin:0;font-size:18px;line-height:1.9;font-weight:500;color:#FEFEFE}
.vtag{align-self:flex-end;padding:2px 8px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#D2D4D8;font-size:12px;line-height:1.6}
.vwho{font-size:15px;font-weight:700;color:#D2D4D8;margin:0}
.vph{flex:1;display:grid;place-items:center;padding:16px;border:1px dashed rgba(255,255,255,.3);border-radius:12px;color:#D2D4D8;font-size:14px;line-height:1.8;text-align:center}
.vjs .vc{opacity:0;transform:translateY(80px) rotate(-14deg) scale(.92)}
.vjs .vlist.in .vc{opacity:1;transform:rotate(var(--r));transition:opacity .45s ease-out,transform .75s cubic-bezier(.34,1.35,.5,1);transition-delay:calc(var(--i) * 110ms)}
@media (min-width:1024px){
  .vrow{margin-inline:0;padding-inline:0;overflow:visible}
  .vlist{gap:0}.vlist::after{display:none}
  .vc{flex:1;width:auto;margin-inline-start:-12px}
  .vc:first-child{margin-inline-start:0}
  .vjs .vlist.in .vc:hover{transform:translateY(-6px) rotate(0deg);transition-delay:0ms;z-index:1}
}
@media (prefers-reduced-motion:reduce){.vjs .vc{opacity:1;transform:rotate(var(--r));transition:none!important}}

.s-pill-btn{color:#fefefe;background:#d64b3b;border-radius:.375rem;height:36px;padding-inline:1.25rem;font-size:1rem;font-weight:700}
.s-pill-btn:active{background:#f65b48}
.s-pill-btn:hover{background:#fe6e61}
.s-pill-compact .s-pill-btn{height:32px;padding-inline:1rem;font-size:.875rem}
.l-cv{content-visibility:auto;contain-intrinsic-size:auto 600px}
.l-glass{-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);background:#ffffff0d;border:1px solid #ffffff1f;box-shadow:inset 0 1px #ffffff29,0 10px 34px #00000059}
.l-btn{-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;outline-offset:2px;border-radius:.375rem;outline:2px solid #0000;justify-content:center;align-items:center;min-width:2.5rem;height:2.5rem;padding:1.5rem 1rem;font-size:1rem;font-weight:400;line-height:1.2;transition-property:background-color,border-color,color,box-shadow;transition-duration:.2s;display:inline-flex;position:relative}
.l-btn:hover{text-decoration:none}
.l-btn-primary{color:#fefefe;background:#d64b3b}
.l-btn-primary:hover{background:#fe6e61}
.l-btn-primary:active{background:#cbd5e0}
.l-btn-glass{color:#fefefe;line-height:inherit;-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);background:#ffffff0f;border:1px solid #ffffff29;box-shadow:inset 0 1px #fff3}
.l-btn-glass:hover{background:#ffffff1f;border-color:#ffffff47}
@media (width>=48em){.l-btn{min-width:3rem;height:3rem;padding-inline:1.5rem;font-size:1.125rem}.l-btn-glass{font-size:1.25rem}}
.l-hero{background:#0a0a0d;justify-content:center;align-items:center;padding:1rem 1rem 2.5rem;display:flex;position:relative}
.l-hero-inner{flex-direction:column;align-items:center;gap:1.5rem;width:100%;max-width:80rem;display:flex}
.l-hero-logo{width:104px;height:34px;margin:0 auto .25rem}
.l-hero-grid{grid-template-columns:repeat(1,minmax(0,1fr));align-items:center;gap:1.5rem;width:100%;display:grid}
.l-hero-copy{order:2;width:100%}
.l-hero-map{order:1;width:100%}
.l-hero-copytext{text-align:center;flex-direction:column;align-items:center;gap:1rem;width:100%;display:flex}
.l-hero-title{font-size:2.25rem;font-weight:700;line-height:1.1}
.l-hero-t1,.l-hero-t3{color:#fefefe}
.l-hero-t2{color:#d64b3b}
.l-hero-t3{font-size:1.5rem;line-height:1.15}
.l-hero-promo{background:#fe6e6126;border:1px solid #d64b3b;border-radius:9999px;align-items:center;gap:.5rem;padding:.5rem 1rem;display:flex}
.l-hero-promo svg{color:#d64b3b;vertical-align:middle;flex-shrink:0}
.l-hero-promo p{color:#fefefe;font-size:.875rem}
.l-hero-promo p span{color:#d64b3b;font-weight:700}
.l-hero-cta{flex-direction:column;align-items:center;gap:.75rem;display:flex}
.l-hero-btns{flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;display:flex}
.l-hero-note{color:#bdc1c6;font-size:.75rem}
.l-hero-proofs{grid-template-columns:repeat(1,minmax(0,1fr));gap:.75rem;width:100%;max-width:420px;padding-top:1rem;display:grid}
.l-proof{text-align:center;border-radius:.75rem;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;height:100%;padding:1.5rem 1.25rem;text-decoration:none;transition:transform .15s;display:flex}

.l-proof-value{color:#fefefe;font-size:1.25rem;font-weight:700;line-height:1.3}
.l-proof-label{color:#bdc1c6;font-size:.875rem;line-height:1.8}
@media (width>=48em){.l-hero{padding:1.5rem 1rem 4rem}.l-hero-copytext{gap:1.25rem}.l-hero-title{font-size:3.75rem}.l-hero-t3{font-size:2.25rem}.l-hero-promo p{font-size:1rem}.l-hero-btns{gap:1rem}.l-hero-note{font-size:.875rem}.l-hero-proofs{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:940px;padding-top:1.5rem}.l-proof{padding:2rem 1.5rem}.l-proof-value{font-size:1.5rem}}
@media (width>=62em){.l-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}.l-hero-copy{order:1}.l-hero-map{order:2}.l-hero-copytext{text-align:right;align-items:flex-start}.l-hero-t3{font-size:1.875rem}.l-hero-cta{align-items:flex-start}.l-hero-btns{justify-content:flex-start}}
.l-map{max-width:100%;margin:0 auto;position:relative}
.l-map-bubble{pointer-events:none;position:absolute}
.l-map-card{text-align:right;background:#0f1013f0;border:1px solid #3a3a46;border-radius:14px;width:215px;padding:.5rem .75rem;transition:border-color .3s;box-shadow:0 8px 28px #0000008c}
.l-map-card.is-result{border-color:#fe6e61}
.l-map-meta{color:#bdc1c6;margin-bottom:.25rem;font-size:10px}
.l-map-ask{color:#fefefe;font-size:12px;line-height:1.6}
.l-map-row{border-top:1px solid #2a2a33;margin-top:.5rem;padding-top:.5rem}
.l-map-dots{align-items:center;gap:5px;height:19px;display:flex}
.l-map-dot{background:#fe6e61;border-radius:9999px;width:6px;height:6px}
.l-map-result{color:#fe6e61;min-height:19px;font-size:12px;line-height:1.6}
.l-map-caret{vertical-align:-2px;background:#fe6e61;width:2px;height:.95em;margin-right:2px;animation:.8s infinite moriCaret;display:inline-block}
.l-map-outcome-wrap{justify-content:flex-end;margin-top:.5rem;display:flex}
.l-map-outcome{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background-image:linear-gradient(135deg,#fe6e614d,#fe6e610f);border:1px solid #fe6e6173;border-radius:9999px;align-items:center;gap:7px;padding:4px 9px;display:flex;box-shadow:0 6px 18px #fe6e6138,inset 0 1px #ffffff29}
.l-map-outcome-icon{font-size:11px;line-height:1}
.l-map-outcome-text{color:#fefefe;white-space:nowrap;font-size:10px;font-weight:700}
.l-map-pulse{background:#fe6e61;border-radius:9999px;flex-shrink:0;width:6px;height:6px;position:relative}
.l-map-pulse.is-live:after{content:"";background:#fe6e61;border-radius:9999px;animation:1.7s ease-in-out infinite moriPulse;position:absolute;inset:0}
.l-map-ping{pointer-events:none;border-radius:9999px;animation:.4s both moriPlaceIn;position:absolute}
.l-map-ping>span{box-sizing:border-box;border-radius:inherit;border:solid #fe6e61;width:100%;height:100%;animation:1.9s linear infinite moriPing;display:block}
@media (width>=48em){.l-map-card{width:300px;padding:.75rem 1rem}.l-map-meta{font-size:12px}.l-map-ask,.l-map-result{font-size:15px}.l-map-dots{height:24px}.l-map-result{min-height:24px}.l-map-outcome-icon{font-size:13px}.l-map-outcome-text{font-size:12px}}
.l-lead{color:#fefefe;margin-bottom:2rem;font-size:1.25rem}
.l-btn-lg{-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;color:#fefefe;background:#d64b3b;border-radius:.375rem;justify-content:center;align-items:center;min-width:3rem;height:3rem;padding:1.5rem 2rem;font-size:1.25rem;font-weight:400;line-height:1.2;transition-property:background-color,border-color,color;transition-duration:.2s;display:inline-flex}
.l-btn-lg:hover{background:#fe6e61;text-decoration:none}
.l-btn-outline{-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;color:#fefefe;-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);background:#ffffff0f;border:1px solid #ffffff29;border-radius:.375rem;justify-content:center;align-items:center;min-width:2.5rem;height:2.5rem;padding:1.5rem 2rem;font-size:1.25rem;font-weight:700;line-height:1.2;transition-property:background-color,border-color,color;transition-duration:.2s;display:inline-flex;box-shadow:inset 0 1px #fff3}
.l-btn-outline:hover{color:#0a0a0d;background:#fefefe;border-color:#fefefe;text-decoration:none}
@keyframes moriDraw{to{stroke-dashoffset:0}}
@keyframes moriPing{0%{opacity:.9;transform:scale(.48)}to{opacity:0;transform:scale(2.04)}}
@keyframes moriPlaceIn{0%{opacity:0}to{opacity:1}}
@keyframes moriPlaceOut{0%{opacity:1}to{opacity:0}}
@keyframes moriBubbleIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes moriRowIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes moriDot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes moriCaret{0%,45%{opacity:1}50%,to{opacity:0}}
@keyframes moriPulse{0%,to{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(3)}}
@keyframes moriPop{0%{opacity:0;transform:scale(.7)translateY(4px)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}
@keyframes moriMarqueeL{0%{transform:translate(0,0)}to{transform:translate(-50%)}}
@keyframes moriMarqueeR{0%{transform:translate(-50%)}to{transform:translate(0,0)}}

.l-hero{padding-inline:0}
.l-hero-title{text-wrap:balance}
.l-hero-title .l-hero-t1{display:block;line-height:1.25}
.l-hero-title .l-hero-t1+br{display:none}
.l-hero-title .l-hero-t1+.l-hero-t1{margin-top:.3em}
.l-hero-title .l-hero-t3{display:block;margin-top:.7em}
.l-hero-title .l-hero-t3+br,.l-hero-t1+br+.l-hero-t3{margin-top:.7em}
@media (width<48em){.l-hero-title{font-size:1.875rem}.l-hero-t3{font-size:1.25rem}}
.l-hero-t3{color:#bdc1c6;font-weight:500}
/* Mahdi 14:22: no bold inside any bubble; the map card's names and result go regular like the scene bubbles */
.l-map-bubble .l-map-meta b,.l-map-bubble .l-map-who b,.l-map-bubble .l-map-outcome-text{font-weight:400}
.l-hero-team{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:4px}
.l-hero-team .l-tm{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.3;color:#bdc1c6;text-align:right}
.l-hero-team .l-tm .face{width:34px;height:34px;flex:none}
.l-hero-team .l-tm b{display:block;color:#fefefe;font-weight:700;font-size:14px}
.l-hero-team .l-tm small{display:block;font-size:12px}
@media (width>=62em){.l-hero-team{justify-content:flex-start;gap:10px 22px}}
.l-map-who{display:flex;align-items:center;gap:5px;color:#bdc1c6;font-size:10px;line-height:1.4;margin-bottom:3px}
.l-map-who .face,.l-map-who .av,.l-map-meta .av{width:18px;height:18px;border-radius:50%;flex:none}
.l-map-who .av,.l-map-meta .av{display:inline-flex;align-items:center;justify-content:center;background:#B9741E33;color:#F2B45A}
.l-map-meta .av.cust{background:#2E6BD633;color:#7FB0FF}
/* Mahdi 00:1x: the customer / owner icon takes the colleague's colour (Shirin lilac, Mojdeh coral, Bahram sky), like the name and the answer */.l-map-card.w-s .l-map-meta .av{background:#D49BE833;color:#D49BE8}.l-map-card.w-m .l-map-meta .av{background:#fe6e6133;color:#fe6e61}.l-map-card.w-b .l-map-meta .av{background:#6FB7EA33;color:#6FB7EA}.l-map-card.w-s .l-map-dot{background:#D49BE8}.l-map-card.w-b .l-map-dot{background:#6FB7EA}
.l-map-meta .av svg,.l-map-who .av svg{width:12px;height:12px}
.l-map-meta b{color:#fefefe;font-weight:700}
.l-map-who .role{color:#bdc1c6;font-weight:400}
.l-map-who .role::before{content:'· ';}
.l-map-chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;margin-top:5px;padding:2px 7px;border-radius:7px;background:#ffffff0f;border:1px solid #ffffff1f;color:#bdc1c6;font-size:10px;line-height:1.6;direction:ltr}
.l-map-chip svg{width:11px;height:11px;flex:none;color:#fefefe}
.l-map-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.l-map-outcome-icon{display:inline-flex;color:#fefefe}
.l-map-outcome-icon svg{width:12px;height:12px}
.l-map-outcome-text{white-space:normal}
.l-map-who b{font-weight:700;color:#fefefe}
.l-map-who.ans b{color:#fe6e61}
/* Mahdi 2026-11-01 00:0x (item 41): Shirin's and Bahram's name, answer, caret, lit outline and result pill in their own colour, as light as Mojdeh's coral on the dark card (WCAG 8.7:1 both, coral 6.9:1) */
.l-map-card.w-s .l-map-who.ans b,.l-map-card.w-s .l-map-result{color:#D49BE8}.l-map-card.w-s .l-map-caret{background:#D49BE8}.l-map-card.w-s.is-result{border-color:#D49BE8}.l-map-card.w-s .l-map-outcome{background-image:linear-gradient(135deg,#D49BE84d,#D49BE80f);border-color:#D49BE873;box-shadow:0 6px 18px #D49BE838,inset 0 1px #ffffff29}.l-map-card.w-s .l-map-pulse,.l-map-card.w-s .l-map-pulse.is-live:after{background:#D49BE8}
.l-map-card.w-b .l-map-who.ans b,.l-map-card.w-b .l-map-result{color:#6FB7EA}.l-map-card.w-b .l-map-caret{background:#6FB7EA}.l-map-card.w-b.is-result{border-color:#6FB7EA}.l-map-card.w-b .l-map-outcome{background-image:linear-gradient(135deg,#6FB7EA4d,#6FB7EA0f);border-color:#6FB7EA73;box-shadow:0 6px 18px #6FB7EA38,inset 0 1px #ffffff29}.l-map-card.w-b .l-map-pulse,.l-map-card.w-b .l-map-pulse.is-live:after{background:#6FB7EA}
.l-map-who.ans{margin-top:0;margin-bottom:2px}
.l-map-meta{display:flex;align-items:center;gap:5px}
/* Mahdi 16:20: no time on the hero cards; the city sits at the far left with a small pin, so the line breathes */
.l-map-loc{margin-inline-start:auto;display:inline-flex;align-items:center;gap:3px;color:#9aa0a6}.l-map-loc svg{width:11px;height:11px;flex:none}
@media (width>=48em){.l-map-who{font-size:12px}.l-map-who .face,.l-map-who .av,.l-map-meta .av{width:20px;height:20px}.l-map-who .av svg,.l-map-meta .av svg{width:13px;height:13px}.l-map-chip{font-size:12px;padding:3px 9px}.l-map-chip svg{width:13px;height:13px}.l-map-outcome-icon svg{width:14px;height:14px}}
@media (width>=62em){.l-hero-title{font-size:2.75rem}.l-hero-t3{font-size:1.5rem}}

.trust{position:relative;margin-top:4px;padding-block:12px 28px;overflow:hidden}
.tgrid{display:grid;gap:10px;grid-template-columns:repeat(7,minmax(0,1fr))}
.tslot{perspective:520px;aspect-ratio:1;background:#ffffff0d;border:1px solid #ffffff17;border-radius:12px;padding:5px;box-shadow:inset 0 1px #ffffff1f}
.tslot img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.tslot img.flip{transform:rotateY(90deg)}
.thalo{pointer-events:none;position:absolute;inset:12px 20px 28px;background:radial-gradient(ellipse 58% 46% at 50% 50%,rgba(10,10,13,.9) 0%,rgba(10,10,13,.58) 38%,rgba(10,10,13,.2) 66%,rgba(10,10,13,0) 100%)}
.tcenter{pointer-events:none;position:absolute;inset:12px 20px 28px;display:flex;align-items:center;justify-content:center;padding-inline:24px}
.tpill{position:relative;overflow:hidden;max-width:360px;padding:12px 20px;border-radius:9999px;background:#ffffff0d;border:1px solid #ffffff24;backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:inset 0 1px #ffffff47,inset 0 -1px #ffffff0f,0 10px 34px #0006}
.tpill::before{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(160deg,#ffffff24,#fff0 50%)}
.tpill p{position:relative;margin:0;text-align:center;color:#FEFEFE;font-size:14px;font-weight:700;line-height:1.6;letter-spacing:-.01em}
@media (min-width:900px){
 .trust{margin-top:0;padding-block:24px 56px}
 .tgrid{gap:16px;grid-template-columns:repeat(12,minmax(0,1fr))}
 .tslot{border-radius:16px;padding:9px}
 .thalo,.tcenter{inset:24px 20px 56px}
 .thalo{background:radial-gradient(ellipse 32% 56% at 50% 50%,rgba(10,10,13,.9) 0%,rgba(10,10,13,.58) 38%,rgba(10,10,13,.2) 66%,rgba(10,10,13,0) 100%)}
 .tpill{padding:24px 48px;max-width:640px}
 .tpill p{font-size:22px}
}
.s-foot{background:#0a0a0d;border-top:1px solid #151619;padding:2.5rem 1.25rem 2rem}
@media screen and (width>=48em){.s-foot{padding-top:3.5rem;padding-bottom:2.5rem}}
@media screen and (width>=62em){.s-foot{padding-inline:70px}}
.s-foot-dash{background:#fff;border-top-color:#e2e8f0}
.s-foot-wrap{flex-direction:column;justify-content:space-between;gap:2.5rem;max-width:1200px;margin-inline:auto;display:flex}
@media screen and (width>=48em){.s-foot-wrap{flex-direction:row;gap:2rem}}
.s-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem;display:grid}
@media screen and (width>=48em){.s-foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:3rem}}
.s-foot-group{flex-direction:column;align-items:start;gap:.75rem;display:flex}
.s-foot-title{color:#fefefe;font-size:14px;font-weight:700}
.s-foot-links{flex-direction:column;align-items:start;gap:.5rem;display:flex}
.s-foot-link,.s-foot-logo{cursor:pointer;outline-offset:2px;outline:2px solid #0000;text-decoration:none;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}
.s-foot-link:focus-visible,.s-foot-logo:focus-visible{box-shadow:0 0 0 3px #4299e199}
.s-foot-link{color:#bdc1c6;font-size:14px}
.s-foot-text{color:#bdc1c6;font-size:13px}
.s-foot-dash .s-foot-title{color:#171923}
.s-foot-dash .s-foot-link,.s-foot-dash .s-foot-text{color:#4a5568}
.s-foot-link:hover,.s-foot-dash .s-foot-link:hover{color:#fe6e61}
.s-foot-side{flex-direction:column;flex-shrink:0;align-items:center;gap:.75rem;display:flex}
@media screen and (width>=48em){.s-foot-side{order:-1;align-items:flex-start;max-width:230px}}
.s-foot-logo{color:inherit}
.s-foot-logo-img{width:110px;height:36px}
.s-foot-addr{line-height:1.9}
.s-foot-badges{flex-direction:row;align-items:center;gap:.75rem;padding-top:.25rem;display:flex}
.s-foot-badge{flex-shrink:0;width:52px;height:52px;overflow:hidden}
.s-foot-badge-img{object-fit:contain;width:52px;height:52px}
@media screen and (width>=48em){.s-foot-badge,.s-foot-badge-img{width:60px;height:60px}}
.l-cv{content-visibility:auto;contain-intrinsic-size:auto 600px}
.l-glass{-webkit-backdrop-filter:blur(14px)saturate(1.4);backdrop-filter:blur(14px)saturate(1.4);background:#ffffff0d;border:1px solid #ffffff1f;box-shadow:inset 0 1px #ffffff29,0 10px 34px #00000059}
.l-h2{color:#fefefe;text-align:center;font-size:1.875rem;font-weight:700;line-height:1.2}
.l-h2-alt{color:#fefefe;margin-bottom:1rem;font-size:1.875rem;font-weight:700;line-height:1.33}
.l-signup-h2{color:#fefefe;font-size:3rem;font-weight:700;line-height:1.1}
.l-signup-sub{color:#fe6e61;font-size:1.5rem;font-weight:800;display:block}
.l-signup-text{color:#fefefe;max-width:42rem;margin:2rem auto;font-size:1.25rem}
@media (width>=48em){.l-h2{font-size:3rem}.l-h2-alt{font-size:2.25rem;line-height:1.2}.l-signup-h2{font-size:4.5rem}.l-signup-sub{font-size:2.25rem}}
@media (width>=62em){.l-h2-alt{font-size:3rem}.l-signup-h2{font-size:6rem}}
.l-mq{background:#0a0a0d;padding:4rem 0;overflow:hidden}
.l-mq-static{padding:4rem 1rem}
.l-mq-rows{flex-direction:column;gap:.75rem;display:flex}
.l-mq-rows-static{align-items:center}
.l-mq-row{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000);mask-image:linear-gradient(90deg,#0000,#000 7% 93%,#0000)}
.l-mq-track{will-change:transform;width:max-content;display:flex}
.l-mq-strip{flex-shrink:0;align-items:center;display:flex}
.l-mq-word{white-space:nowrap;font-size:28px;font-weight:700;line-height:1.3}
.l-mq-word-static{text-align:center}
.l-mq-sep{color:#d64b3b;opacity:.7;flex-shrink:0;padding:0 1rem;font-size:.875rem}
@media (prefers-reduced-motion:reduce){.l-mq *{animation:none!important}}
.l-il-h2{color:#fefefe;text-align:right;scroll-margin-top:80px;font-size:1.5rem;font-weight:700;line-height:1.33}
.l-trust{background:#0a0a0d;padding:.75rem .5rem;overflow:hidden}
.l-trust-wrap{width:100%;margin:0 auto;position:relative}
.l-trust-grid{width:100%;display:grid}
.l-trust-slot{perspective:520px;aspect-ratio:1;background:#ffffff0d;border:1px solid #ffffff17;border-radius:12px;width:100%;padding:5px;box-shadow:inset 0 1px #ffffff1f}
.l-trust-logo{object-fit:contain;border-radius:8px;width:100%;height:100%;transition:transform .24s cubic-bezier(.4,0,.2,1)}
.l-trust-halo{pointer-events:none;position:absolute;inset:0}
.l-trust-center{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}
.l-trust-pill{-webkit-backdrop-filter:blur(16px)saturate(1.5);background:#ffffff0d;border:1px solid #ffffff24;border-radius:9999px;padding:.75rem 1.25rem;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff47,inset 0 -1px #ffffff0f,0 10px 34px #0006}
.l-trust-pill:before{content:"";pointer-events:none;background-image:linear-gradient(160deg,#ffffff24,#fff0 50%);position:absolute;inset:0}
.l-trust-title{text-align:center;color:#fefefe;letter-spacing:-.01em;font-size:.875rem;font-weight:700;line-height:1.5;position:relative}
@media (width>=48em){.l-mq{padding:7rem 0}.l-mq-static{padding:7rem 1rem}.l-mq-rows{gap:1.25rem}.l-mq-word{font-size:3rem}.l-mq-sep{padding:0 2rem;font-size:1.25rem}.l-il-h2{font-size:2.25rem;line-height:1.2}.l-trust{padding:3.5rem 1rem}.l-trust-slot{border-radius:16px;padding:9px}.l-trust-pill{padding:1.5rem 3rem}.l-trust-title{font-size:1.5rem}}
@media (width>=62em){.l-mq-word{font-size:4.5rem}}
@keyframes scrollAnim{0%{transform:translate(0)}to{transform:translate(50%)}}
@keyframes scrollAnimReverse{0%{transform:translate(50%)}to{transform:translate(0)}}
.l-int{background:#0a0a0d;padding:5rem 1rem}
.l-int-head{grid-template-columns:1fr;align-items:center;gap:1rem;max-width:80rem;margin:0 auto 1rem;display:grid}
.l-int-h2{color:#fff;font-size:1.5rem;font-weight:700;line-height:1.33}
.l-int-h2 span{color:#d64b3b}
.l-int-text{color:#e2e8f0;text-align:justify;font-size:1.25rem}
.l-int-rows{max-width:80rem;margin:0 auto}
.l-int-row{width:100%;margin-bottom:1rem;padding:.5rem 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 10% 90%,#0000 100%)}
.l-int-track{align-items:center;gap:2rem;width:max-content;min-width:max-content;display:flex}
.l-int-item{border-radius:.75rem;justify-content:center;align-items:center;gap:.75rem;min-width:100px;min-height:50px;padding:1rem;display:flex}
.l-int-link{justify-content:center;align-items:center;gap:.75rem;width:100%;height:100%;text-decoration:none;display:flex}
.l-int-logo{object-fit:contain;width:32px;height:32px}
.l-int-name{color:#fff;text-align:center;font-size:1rem;font-weight:500}
@media (width>=48em){.l-int-head{grid-template-columns:1.2fr 1fr;gap:3rem;margin-bottom:3rem}.l-int-h2{font-size:2.25rem;line-height:1.2}.l-int-item{min-width:200px;min-height:100px;padding:1.5rem}.l-int-logo{width:56px;height:56px}.l-int-name{font-size:1.25rem}}
@media (width>=62em){.l-int-h2{font-size:3rem}}
/* page background: one fixed layer, colour follows the scene in the middle of the viewport */
.s-foot,#footer{position:relative;z-index:1}
/* a scene */
.k-scene{min-height:100svh;display:grid;align-content:center;gap:24px;padding-block:72px 40px;position:relative;overflow:clip}
.k-sc-in{display:grid;gap:20px}
/* one text colour per scene (--tx); everything else is shared. Peach only flips --tx to ink, since white on #FFD2C2 fails */
.k-scene{--tx:#fefefe}
.k-ink{--tx:#171719}
.k-scene h2{font-size:1.625rem;font-weight:800;line-height:1.3;margin:12px 0 10px;color:var(--tx);text-wrap:pretty}
.k-scene .k-sub{color:color-mix(in srgb,var(--tx) 88%,transparent);font-size:1.0625rem}
.k-scene .k-ws-head .k-m-who,.k-scene .k-m-who.k-ans b{color:var(--tx)}
.k-scene .k-m-who .k-role{color:color-mix(in srgb,var(--tx) 72%,transparent)}
.k-scene .k-ws-head .face{box-shadow:0 0 0 2px color-mix(in srgb,var(--tx) 25%,transparent)}
/* stage: the colleague, three of their objects, two lines of what happened */
.k-sc-stage{position:relative;height:620px}
/* Mahdi 17:2x: the face + name line sits centred on phones; on desktop it moves under the big picture, at its bottom left (same for all three) */
@media (width<62em){.k-scene .k-ws-head .k-m-who{justify-content:center}}
@media (width>=62em){.k-scene .k-ws-head .k-m-who{display:none}}
@media (width<62em){.k-scene .k-sc-copy h2{text-align:center;margin-inline:auto}.k-scene .k-sub{text-align:justify;text-align-last:start;margin-inline:0}.k-scene .k-checks{width:auto;margin-inline:0}.k-scene .k-checks li{text-align:justify;text-align-last:start}}
@media (width>=62em){.k-sc-in{position:relative}.k-scene .k-ws-head{position:absolute;top:100%;margin-top:8px;left:calc((100% - 48px)/2.1*.57 - 234px*var(--ar));z-index:3}}
@media (62em<=width<75em){.k-scene .k-ws-head{left:calc((100% - 48px)/2.1*.62 - 216px*var(--ar))}}

.k-port{position:absolute;left:50%;bottom:0;height:55%;max-width:100%;aspect-ratio:var(--ar,587/880);translate:-50% 0;opacity:0;transform:translateY(56px) scale(.94);transform-origin:50% 100%}
.k-port::before{content:"";position:absolute;left:50%;top:30%;width:150%;height:90%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--sg) 0%,var(--sg) 25%,transparent 100%);opacity:.6}
.k-port img{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom;display:block;-webkit-mask-image:linear-gradient(#000 78%,transparent 100%);mask-image:linear-gradient(#000 78%,transparent 100%)}
/* the shadow sits on a wrapper: on the img itself the fade mask clipped it to the picture's rectangle, a straight edge wherever an arm came near the side */
.k-fig{position:relative;width:100%;height:100%;filter:drop-shadow(0 20px 36px #00000073)}
.k-scene.k-in .k-port{animation:kRise .7s cubic-bezier(.22,1,.36,1) forwards}
.k-scene.k-in .k-port img{animation:kFloatP 5s ease-in-out .7s infinite}
@keyframes kRise{0%{opacity:0;transform:translateY(56px) scale(.94)}70%{opacity:1;transform:translateY(-6px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes kFloatP{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.k-obj{position:absolute;width:84px;height:84px;object-fit:contain;z-index:2;opacity:0;transform:translateX(16px);transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.2s + var(--i)*.07s);filter:drop-shadow(0 12px 20px #00000059)}
.k-scene.k-in .k-obj{opacity:1;transform:none;animation:kFloat calc(7s + var(--i)*1.6s) ease-in-out calc(.6s + var(--i)*1.9s) infinite}
/* Mahdi 14:22: the small objects drift, 2 to 4px with a slight tilt, each on its own slow loop */
@keyframes kFloat{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-4px,-12px) rotate(-5deg)}70%{transform:translate(3px,-6px) rotate(4deg)}}/* Mahdi 15:58: 3x the drift */
.k-o1{top:auto;bottom:30%;left:0}.k-o2{bottom:6%;right:0}
/* final check 16:50: under 62em Bahram's PDF sat on the calculator in his hand; it goes up beside his head, clear of the hand and of the bubbles above */
#books .k-o1{bottom:38%}
/* Mahdi 17:27: Mojdeh gets a second object like the others; the phone floats beside her hair, clear of the box in her hand */
#site .k-o2{bottom:40%;right:-1%}
/* sliding rows inside a scene: same chips, on colour */
.k-scene .k-mq{padding-bottom:0}
.k-scene .k-mq-label{color:#fefefeb8}
.k-scene .k-cmd.l-glass{background:#ffffff12;border-color:#fefefe29;color:#fefefe}
.k-scene .k-cmd .k-av,.k-scene .k-cmd .k-av.k-cust{background:#fefefe29;color:#fefefe}
@media (width>=48em){
  .k-scene h2{font-size:2.5rem}
  .k-scene .k-sub{font-size:1.125rem}
  .k-sc-stage{height:640px;max-width:600px;margin-inline:auto;width:100%}
  .k-port{height:60%}
  .k-obj{width:104px;height:104px}
}
@media (width>=62em){
  .k-scene{padding-block:96px 56px}
  .k-sc-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px}
  .k-scene h2{font-size:2.25rem}
  .k-sc-stage{height:600px;max-width:none;overflow:visible}
  .k-obj{width:104px;height:104px}
  .k-o1{top:6%;left:auto;right:0}.k-o2{bottom:8%;right:-2%}
  .k-port{height:78%;left:57%}
}
/* final check 16:55: from 992 to 1199px the stage is narrow, so the bubbles ran to the screen edge and onto the faces; the portrait steps a little smaller and further right there */
@media (62em<=width<75em){
  .k-port{height:72%;left:62%}
}
@media (prefers-reduced-motion: reduce){
  .k-port,.k-obj{opacity:1!important;transition:none!important;animation:none!important}
  .k-port,.k-port img,.k-obj{transform:none!important}
}

/* asks and answers around the portrait (Mahdi 14:22): one glass surface for both, the answer hangs under its ask as one pair, told apart only by side and a small muted name.
   Every colour comes from the scene: --tx is the text (white, or ink on peach), --gw how much white the glass holds. Nothing here is per-colleague. */
/* the glass is the scene colour lifted by --gw white, at 78%: tinted, not milky, so whatever glows behind it never lightens the ground under white text (contrast.md 15:31) */
/* Mahdi 16:06: on peach, 46% white read as a cream card of its own. The glass is now the scene colour mixed with --gc: white on the dark scenes, the scene's own glow on peach, so all three are a see-through tint of their scene */
.k-scene{--gw:10%;--gc:#fff}
.k-ink{--gw:18%;--gc:var(--sg)}
.k-asks{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:4;pointer-events:none}
li.k-ask{position:absolute;width:80%;max-width:300px;display:grid;gap:4px;visibility:hidden;color:var(--tx)}
li.k-ask.on{visibility:visible}
li.k-ask.out{opacity:0;transform:translateY(-6px);transition:opacity .45s ease,transform .45s ease}
.k-q,.k-a{padding:9px 13px 10px;font-size:13px;line-height:1.55;font-weight:400;color:var(--tx);
  background:linear-gradient(180deg,color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) calc(var(--gw) + 4%)) 78%,transparent),color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) var(--gw)) 78%,transparent));
  border:1px solid color-mix(in srgb,var(--gc) calc(var(--gw) + 14%),transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 18%,transparent),0 18px 40px -14px color-mix(in srgb,color-mix(in srgb,var(--sb),#000 62%) 70%,transparent)}
/* sides: the ask on one side, the answer on the other, each with its small corner on its own side */
.k-q{border-radius:18px 18px 18px 6px;justify-self:end;max-width:86%;opacity:0}
.k-aw{display:grid;justify-items:start}
.k-aw>*{grid-area:1/1}
.k-a{border-radius:18px 6px 18px 18px;max-width:90%;opacity:0}
li.k-ask *{font-weight:400}
li.k-ask p{margin:0;text-wrap:pretty}
.k-from{display:block;font-size:10.5px;line-height:1.4;color:color-mix(in srgb,var(--tx) 80%,transparent);margin-bottom:2px}
/* enter: a soft rise that settles; the answer after a short typing beat; exit: a quiet fade (JS sets on, ans, out) */
li.k-ask.on .k-q{animation:kIn .7s cubic-bezier(.22,1,.36,1) both}
li.k-ask.ans .k-a{animation:kIn .7s cubic-bezier(.22,1,.36,1) both}
@keyframes kIn{0%{opacity:0;transform:translateY(14px) scale(.97);filter:blur(3px)}62%{opacity:1;transform:translateY(-2px) scale(1.004);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
.k-typ{align-self:start;display:inline-flex;gap:4px;padding:11px 13px;border-radius:18px 6px 18px 18px;opacity:0;transform:translateY(8px);
  background:color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) var(--gw)) 78%,transparent);border:1px solid color-mix(in srgb,var(--gc) calc(var(--gw) + 14%),transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.k-typ i{width:6px;height:6px;border-radius:50%;background:var(--tx);opacity:.8;animation:kDot 1s ease-in-out infinite}
.k-typ i:nth-child(2){animation-delay:.15s}.k-typ i:nth-child(3){animation-delay:.3s}
@keyframes kDot{0%,100%{transform:translateY(0);opacity:.7}40%{transform:translateY(-3px);opacity:1}}
/* Mahdi 22:1x: a touch more see-through, Apple liquid glass: the scene shows through more (78% to 52%), stronger blur and saturation, a bright rim on top and a soft one below. Same for every bubble in all three scenes */
.k-q,.k-a,.k-typ{background:linear-gradient(160deg,color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) calc(var(--gw) + 10%)) 58%,transparent) 0%,color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) var(--gw)) 48%,transparent) 60%,color-mix(in srgb,color-mix(in srgb,var(--sb),var(--gc) var(--gw)) 54%,transparent) 100%);
  border:1px solid color-mix(in srgb,#fff 26%,transparent);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 42%,transparent),inset 0 -1px 0 color-mix(in srgb,#fff 10%,transparent),inset 0 0 18px -6px color-mix(in srgb,#fff 16%,transparent),0 18px 40px -14px color-mix(in srgb,color-mix(in srgb,var(--sb),#000 62%) 60%,transparent)}
li.k-ask.on:not(.ans) .k-typ{opacity:1;transform:none;transition:opacity .3s ease .45s,transform .4s cubic-bezier(.22,1,.36,1) .45s}
li.k-ask.ans .k-typ{opacity:0;transition:opacity .15s ease}
/* voice note */
.k-vrow{display:flex;align-items:center;gap:8px;margin:2px 0 4px}
.k-play{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tx);color:var(--sb);display:inline-grid;place-items:center}
.k-play svg{width:14px;height:14px;margin-inline-start:-1px}
.k-wave{display:flex;align-items:center;gap:2px;height:20px;flex:1 1 auto;min-width:72px}
.k-wave i{display:block;width:3px;height:calc(var(--h)*20px);border-radius:2px;background:var(--tx);opacity:.8}
.k-dur{font-size:11px;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--tx) 80%,transparent)}
.k-tr{font-size:12px;color:color-mix(in srgb,var(--tx) 86%,transparent);margin:0}
.k-voice{min-width:78%}
/* results: inside the same glass, on a faint tint of the text colour (white on the dark scenes, ink on peach) */
.k-res{margin-top:7px;font-size:11.5px;line-height:1.45;color:var(--tx);--in:color-mix(in srgb,var(--tx) 9%,transparent);--ln:color-mix(in srgb,var(--tx) 14%,transparent);--mu:color-mix(in srgb,var(--tx) 80%,transparent)}
.k-prod,.k-prow{display:flex;align-items:center;gap:8px}
.k-prods{display:grid;gap:6px}
.k-th{width:36px;height:36px;border-radius:10px;object-fit:cover;background:#fff;flex:none;display:inline-grid;place-items:center}
.k-th-i{background:var(--in);color:var(--tx)}
.k-th-p{background:#f4f4f6;object-fit:contain;padding:2px;box-sizing:border-box}.k-th-i svg{width:18px;height:18px;stroke-width:1.75}
.k-pn{display:grid;line-height:1.35}.k-pn b{font-size:12px}.k-pn small{font-size:11px;color:var(--mu);font-variant-numeric:tabular-nums}
.k-track{list-style:none;margin:7px 0 0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.k-track li{font-size:10.5px;padding:2px 8px;border-radius:999px;background:var(--in);color:var(--mu)}
.k-track li.on{background:var(--tx);color:var(--sb)}
.k-chip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:999px;background:var(--in)}
.k-chip small{font-size:10.5px;color:var(--mu)}.k-chip b{font-size:12.5px;font-variant-numeric:tabular-nums}
.k-price s{color:var(--mu);margin-inline-end:4px}
.k-cmp{border-collapse:collapse;width:100%;font-size:11px;font-variant-numeric:tabular-nums}
.k-cmp td{padding:3px 6px;border-top:1px solid var(--ln)}.k-cmp tr:first-child td{border-top:0}.k-cmp td:first-child{color:var(--mu)}
.k-photo{display:flex;align-items:center;gap:8px}
.k-ph-img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#fff;box-shadow:0 4px 12px #0000002e;display:inline-grid;place-items:center}
.k-ph-img.k-th-i{background:var(--in);box-shadow:none}.k-ph-img.k-th-i svg{width:24px;height:24px}
.k-photo small{font-size:11px;color:var(--mu)}
.k-seo,.k-file{display:grid;gap:3px;padding:8px 10px;border-radius:12px;background:var(--in);border:1px solid var(--ln)}
.k-seo b{font-size:12px;line-height:1.4;text-decoration:underline;text-decoration-color:var(--ln);text-underline-offset:3px}
.k-seo small{color:var(--mu);font-size:10.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.k-kw{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}.k-kw i{font-style:normal;font-size:10px;padding:1px 7px;border-radius:999px;border:1px solid var(--ln);color:var(--mu)}
.k-file{position:relative;overflow:hidden}
.k-ftab{position:absolute;top:0;left:0;font:400 9.5px/1 Estedad,system-ui,sans-serif;letter-spacing:.06em;color:#fff;padding:4px 7px;border-radius:0 0 8px 0}
.k-xls .k-ftab{background:#217346}.k-pdf .k-ftab{background:#B3261E}
.k-att{display:flex;width:max-content;max-width:100%;align-items:center;gap:6px;margin-top:6px;padding:4px 9px 4px 5px;border-radius:9px;background:color-mix(in srgb,var(--tx) 9%,transparent);font-size:11px;line-height:1.3;color:var(--tx)}
.k-att-img{width:26px;height:26px;border-radius:6px;background:#f4f4f6;object-fit:contain;padding:1px;box-sizing:border-box;flex:none}.k-att svg{width:15px;height:15px;opacity:.8}.k-att i{font:400 8.5px/1 Estedad,system-ui,sans-serif;font-style:normal;letter-spacing:.05em;color:#fff;padding:3px 4px;border-radius:4px}.k-att-xls{background:#217346}.k-att-pdf{background:#B3261E}
.k-file table{border-collapse:collapse;width:100%;font-size:10.5px;font-variant-numeric:tabular-nums;margin-top:8px}
.k-file th{text-align:start;padding:3px 5px;color:var(--mu);border-bottom:1px solid var(--ln)}
.k-file td{padding:3px 5px;border-top:1px solid var(--ln)}.k-file tr:nth-child(2) td{border-top:0}
.k-file>small{font-size:10.5px;color:var(--mu)}
.k-pdf b{font-size:12px;margin-top:8px}.k-pdf small{color:var(--mu);font-size:10.5px}.k-pdf em{font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.k-lh{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--mu);padding-bottom:5px;border-bottom:1px solid var(--ln)}
.k-lh i{width:10px;height:10px;border-radius:50%;background:var(--tx);opacity:.8}
.k-letter b{font-size:12px;margin-top:2px}.k-letter small{color:var(--mu);font-size:10.5px}
.k-ln{display:block;height:4px;border-radius:2px;background:var(--ln);margin-top:3px}.k-ln.k-short{width:60%}
.k-bars small{font-size:10.5px;color:var(--mu)}
.k-bars ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:5px}
.k-bars li{display:grid;grid-template-columns:minmax(44px,auto) 1fr auto;align-items:center;gap:6px;font-size:11px}
.k-bars li i{display:block;height:6px;border-radius:3px;background:var(--tx);opacity:.8;width:var(--w)}
.k-bars li b{font-variant-numeric:tabular-nums;font-size:11px}
.k-hand{display:inline-flex;align-items:center;gap:5px;color:var(--mu);font-size:11px}.k-hand svg{width:14px;height:14px}
/* slots: phone, one pair at a time, growing upward from the top of the head (the stage keeps a free band there); nothing ever sits on the face */
.k-s0{bottom:56%;right:0}
.k-s1{display:none}
/* check lines (Mahdi 14:20): short, small, lighter than the subtitle; a thin tick in the text's own colour; the same in all three scenes */
.k-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:4px;max-width:34em}
.k-checks li{display:flex;gap:7px;align-items:baseline;font-size:.875rem;font-weight:400;line-height:1.5;color:color-mix(in srgb,var(--tx) 82%,transparent)}
.k-checks svg{flex:none;width:14px;height:14px;stroke-width:1.75;color:inherit;align-self:center;opacity:.9}
/* no JS or reduced motion: the first pair (two on desktop) stands still, answer shown */
.k-scene:not(.k-live) li.k-ask.k-s0,.k-scene:not(.k-live) li.k-ask.k-s1{visibility:visible}
.k-scene:not(.k-live) li.k-ask.k-s0 :is(.k-q,.k-a),.k-scene:not(.k-live) li.k-ask.k-s1 :is(.k-q,.k-a){opacity:1}
@media (width>=48em){
  .k-q,.k-a{font-size:14px;padding:10px 14px 11px}
  li.k-ask{max-width:300px}
  .k-tr{font-size:12.5px}
  .k-checks li{font-size:.9375rem}
}
@media (width>=62em){
  /* desktop: two pairs in a column at the figure's side (the figure stands right of centre); the upper one grows upward from shoulder height, the lower one sits at hand height */
  li.k-ask{max-width:260px;width:48%}
  .k-s0{bottom:52%;right:auto;left:-6%}
  .k-s1{display:grid;bottom:0;left:-6%}
}
/* final check 16:55: same range, the bubbles stay inside the stage (not at the screen edge) and a little narrower, clear of the face */
@media (62em<=width<75em){
  li.k-ask{width:44%}
  .k-s0,.k-s1{left:0}
}
/* Mahdi 21:2x picked two at once on phones: the second pair sits low on the other side, over the body, its top always below the eyes (--eye: where the eyes end, share of the portrait from its top) */
@media (width<62em){.k-scene li.k-ask.k-s1{display:grid;bottom:-30px;left:0;right:auto}#sell{--eye:.38}#site{--eye:.43}#books{--eye:.34}}
/* Mahdi 21:3x: phones (<48em) get a shorter stage (620 -> 490, the band under the tick lines ~320 -> ~170px; Shirin 22:0x item 25: below 490 Bahram's tall answers never get the upper place). The face keeps its size (341px) and its objects their place beside it.
   The upper pair hangs from the top of the stage, right under the tick lines, and may reach down over the hair but never past the top of the eyes (--eyeT, share of the portrait from its top); a pair too tall for that waits for the low slot over the body */
/* Mahdi 22:0x item 29: on phones the bubbles belong to the picture, not to the tick lines. The JS scatters each pair: a random height (the upper one 40px+ under the tick lines, never past the top of the eyes; the lower one over the body), a random lean, the two always leaning to opposite sides, up to 8px past the text column. Stage 490 -> 520 so the upper pair can drop off the tick lines onto the hair (Bahram's pairs need it). */
@media (width<48em){.k-sc-stage{height:520px}.k-port{height:341px}.k-o1{bottom:186px}.k-o2{bottom:37px}#books .k-o1{bottom:236px}#site .k-o2{bottom:248px}.k-scene li.k-ask.k-s0{top:0;bottom:auto;right:0}#sell{--eyeT:.23}#site{--eyeT:.23}#books{--eyeT:.17}}
/* Mahdi 22:5x item 36: on phones the lower pair may hang up to 70px under the picture (the next section's title starts 164px under it), so a tall answer sits under the chin, not on the mouth; the scene still clips sideways */
@media (width<48em){.k-scene{overflow:clip visible}}
@media (prefers-reduced-motion: reduce){
  li.k-ask,.k-q,.k-a,.k-typ,.k-typ i{animation:none!important;transition:none!important}
  .k-typ{display:none}
}

/* header: colour follows the scene; logo centred until the page scrolls 40px, then slides to the start side (mori.style root bundle: scrollY>40, .s-dnav-logo transform .45s cubic-bezier(.4,0,.2,1), links s-nav-in .3s) */
header.k-top{--hb:#0a0a0d;--ht:#f3f4f6;--hm:#f3f4f6d9;--hl:#f3f4f640;background:color-mix(in srgb,var(--hb) 86%,transparent);border-bottom-color:var(--hl);color:var(--ht);transition:background-color .15s linear,color .6s ease,border-color .6s ease}
html[data-scene=s] header.k-top{--hb:#392044}
html[data-scene=m] header.k-top{--hb:#FFD2C2;--ht:#171719;--hm:#171719;--hl:#17171933}
html[data-scene=b] header.k-top{--hb:#16384F}
header.k-top .wrap{position:relative}
header.k-top .k-brand{display:flex;align-items:center;height:44px;color:var(--ht);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
/* order, so the logo never crosses the links (at 390 the centred logo sits on «ورود» and the button): out, the logo leaves first and the links fade in once it has cleared them (.2s); back, the links fade out first and the logo starts .1s later */
html.k-ready header.k-top .k-brand{transition:transform .45s cubic-bezier(.4,0,.2,1) .1s}
html.k-ready header.k-top.k-moved .k-brand{transition-delay:0s}
header.k-top .k-logo{display:block;height:26px;width:auto}
header.k-top.k-moved .k-brand{transform:translate(calc(-50% + var(--k-dx,0px)),-50%)}
/* Mahdi 14:40: only the logo sits right; links and buttons sit left and fade in with the logo's slide */
header.k-top .nav{opacity:0;pointer-events:none;transition:opacity .12s ease;margin-inline-start:auto;gap:4px}
header.k-top.k-moved .nav{opacity:1;pointer-events:auto;animation:s-nav-in .3s cubic-bezier(.16,1,.3,1) .2s both}
header.k-top .nav a.lnk{color:var(--hm)}header.k-top .nav a.lnk:hover{color:var(--ht)}
header.k-top .login{color:var(--hm);border:0;padding-inline:10px;min-height:44px}header.k-top .login:hover{color:var(--ht)}
/* the header's primary button (Mahdi 14:53): one line beside the logo at 390 */
header.k-top .k-hcta{height:44px;min-height:44px;padding:0 16px;font-size:14px;border-radius:.375rem;margin-inline-start:4px}
/* every primary button on the page: white on mori.style's #d64b3b is 4.22:1, under 4.5 for 14 to 16px text; #C8402F is 4.92:1 (contrast.md), hover keeps the lighter red */
.l-btn-primary{background:#C8402F}.l-btn-primary:hover{background:#d64b3b}
header.k-top{transition:background-color .15s linear,color .6s ease,border-color .6s ease,box-shadow .3s ease}
/* no line under the header (Mahdi 14:40): a soft shadow in a deep shade of the scene colour instead */
header.k-top{border-bottom:0}
header.k-top.k-moved{box-shadow:0 10px 28px -8px color-mix(in srgb,color-mix(in srgb,var(--hb),#000 55%) 55%,transparent)}
@media (width<30em){header.k-top .k-logo{height:22px}header.k-top .k-hcta{font-size:13px;padding:0 12px;height:44px}header.k-top .login{font-size:13px;padding-inline:6px}}
@keyframes s-nav-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){header.k-top .k-brand,header.k-top .nav{transition:none!important;animation:none!important}}

/* no section paints its own floor: every colour comes from the one fixed layer, so a scene edge can never show as a line (Mahdi 13:57) */
.l-mq,.l-trust,.l-int,.s-foot,.pick{background:transparent}
/* sections below the hero: mori.style tokens (bg #0a0a0d, card #0f1013, line #3a3a46, coral #fe6e61 / #d64b3b, text #fefefe / #bdc1c6) */
main#top{background:transparent;color:#fefefe;overflow-x:clip;position:relative;z-index:1}
.l-btn-primary{background:#C8402F}.l-btn-primary:hover{background:#d64b3b}  /* white on #C8402F 4.96:1, Lc 79 (team note); mori.style's #d64b3b is 4.22:1 */
.k-stats{padding-block:4px 8px}
/* final check 16:50: no paragraph, quote or footer link ends on a lone word at any width (pretty only moves the last line breaks; balance and Mahdi's own breaks keep winning where set) */
p,li,blockquote,small,.k-sub,.s-foot-link{text-wrap:pretty}
.k-proofs{margin:0 auto}
.k-proofs .l-proof-value .k-num{unicode-bidi:isolate;white-space:nowrap}
.k-proofs .l-proof-value .k-ph{font-size:.75rem;vertical-align:middle}
.k-stats-note{margin:12px auto 0;max-width:940px;text-align:center;color:#a6aab0;font-size:12px;line-height:1.7}
.k-ws,#safe,#voices,#start,#faq,.k-close{padding-block:56px}
.k-ws{display:grid;gap:24px;position:relative}
.k-col.k-ws{padding-bottom:24px}
.k-col.k-ws::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 70% 60%,var(--ac2),transparent 70%);pointer-events:none}
.k-col.k-ws>*{position:relative}
.k-ws h2,.k-sec-h{font-size:1.75rem;font-weight:700;line-height:1.3;margin:10px 0 8px;text-wrap:balance;color:#fefefe}
.k-col h2{font-size:1.625rem;text-wrap:pretty}  /* Mahdi's own line break stays; balance split «شیرین به» onto its own line */
.k-ws h2 .k-c,.k-sec-h .k-c{color:#fe6e61}
.k-sub{color:#bdc1c6;font-size:1rem;line-height:1.8;margin:0;max-width:34em}
.k-sub.k-center{text-align:center;margin:0 auto 24px}
.k-sub.k-small{font-size:.875rem;margin-top:16px}
.k-sub a,.k-faq a{color:#fefefe;text-decoration:underline;text-underline-offset:4px}
.k-sec-h{text-align:center;margin-bottom:8px}
.k-ws-head .k-m-who{font-size:13px}
.k-ws-head .k-m-who .face{width:40px;height:40px}
.k-col .k-m-who.k-ans b,.k-col .k-rule b{color:var(--ac)}
.k-traits{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.k-traits li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:9999px;background:#ffffff0a;border:1px solid #ffffff14;color:#fefefe;font-size:12px;line-height:1.5}
.k-traits svg{width:14px;height:14px;color:var(--ac);flex:none}
.k-ws-demo{display:grid;gap:14px}
.k-chat{background:#0f1013f0;border:1px solid #3a3a46;border-radius:16px;padding:12px 14px 14px;box-shadow:0 8px 28px #0000008c;display:grid;gap:12px}
.k-col .k-chat{border-color:color-mix(in srgb,var(--ac) 35%,#3a3a46)}
.k-chat-top{display:flex;align-items:center;gap:8px;color:#bdc1c6;font-size:11px;padding-bottom:10px;border-bottom:1px solid #2a2a33}
.k-chat-top .k-dot{width:4px;height:4px;border-radius:50%;background:#6f6f86}
.k-chat-foot{display:flex;justify-content:flex-end;align-items:center;gap:4px;color:#a6aab0;font-size:10px;margin-top:-4px}
.k-chat-foot svg{width:10px;height:10px;color:#fe6e61}
.k-m{display:grid;gap:5px;opacity:0;transform:translateY(6px)}
.k-rv.k-in .k-m,.k-chat.k-in .k-m{animation:moriBubbleIn .4s ease both;animation-delay:calc(var(--i,0)*.45s + .1s)}
.k-m.k-sys{justify-items:end}
.k-m-who{display:flex;align-items:center;gap:6px;color:#bdc1c6;font-size:11px;line-height:1.4}
.k-m-who b{color:#fefefe;font-weight:700}
.k-m-who.k-ans b{color:#fe6e61}
.k-m-who .k-role{color:#a6aab0}
.k-m-who .face,.k-m-who .k-av,.k-cmd .k-av{width:18px;height:18px;border-radius:50%;flex:none}
.k-m-who .k-av,.k-cmd .k-av{display:inline-flex;align-items:center;justify-content:center;background:#B9741E33;color:#F2B45A}
.k-m-who .k-av.k-cust,.k-cmd .k-av.k-cust{background:#2E6BD633;color:#7FB0FF}
.k-m-who .k-av svg,.k-cmd .k-av svg{width:11px;height:11px}
.k-m-bub{color:#fefefe;font-size:14px;line-height:1.7;background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;padding:8px 12px;display:grid;gap:8px;justify-items:start}
.k-m-who.k-ans+.k-m-bub{border-color:color-mix(in srgb,var(--ac,#fe6e61) 25%,transparent)}
.k-m-bub .l-map-chip{margin-top:0;font-size:11px}
.k-m-bub .l-map-outcome-wrap{margin-top:0}
.k-m-bub .l-map-outcome-text{font-size:11px}
.k-m-t{color:#a6aab0;font-size:10px}
.k-ph,.k-lg{color:#F2B45A;font-size:12px;line-height:1.7;margin:0}
.k-lg{color:#7FB0FF}
.k-pv{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center;background:#15161b;border:1px solid #2a2a33;border-radius:12px;padding:10px;width:100%;color:#fefefe}
.k-pv-pic{width:48px;height:48px;border-radius:10px;background:#1d1e24;display:grid;place-items:center;color:#6f6f86}
.k-pv-pic svg{width:20px;height:20px}
.k-pv b{display:block;font-size:13px}
.k-pv small{display:block;color:#a6aab0;font-size:11px}
.k-pv-price{font-size:14px;font-weight:700;margin-top:2px}
.k-pv-price small{display:inline;font-weight:400;color:#bdc1c6}
.k-pv-btn{grid-column:1/-1;text-align:center;background:#C8402F;color:#fefefe;border-radius:8px;padding:7px;font-size:12px;font-weight:700}
.k-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}
.k-nums div{background:#15161b;border:1px solid #2a2a33;border-radius:10px;padding:8px 10px}
.k-nums small{display:block;color:#a6aab0;font-size:11px}
.k-nums b{font-size:15px;color:#fefefe}
.k-nums .k-hi b{color:var(--ac,#fe6e61)}
.k-bars{display:grid;gap:4px;width:100%}
.k-bars i{display:block;height:5px;border-radius:3px;background:#3a3a46;width:var(--w)}
.k-bars i.k-hi{background:var(--ac,#fe6e61)}
/* sliding rows of real asks and commands (mori.style's l-int-row mask and scrollAnim, slower) */
.k-mq{display:grid;gap:10px;padding-block:8px 40px}
.k-mq-label{margin:0;color:#a6aab0;font-size:12px}
.k-mq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%);mask-image:linear-gradient(90deg,#0000 0%,#000 8% 92%,#0000 100%)}
.k-mq-track{list-style:none;margin:0;padding:2px 0;display:flex;gap:10px;width:max-content;min-width:max-content;animation:scrollAnim var(--d,70s) linear infinite;animation-play-state:paused}
.k-mq-track.k-rev{animation-name:scrollAnimReverse}
.k-in .k-mq-track{animation-play-state:running}
.k-mq-row:hover .k-mq-track{animation-play-state:paused}
.k-cmd .k-ph{font-size:11px}
.k-cmd{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;color:#fefefe;font-size:13px;line-height:1.5;white-space:nowrap}
/* partners (l-int from mori.style); title at mori.style's scale and a step up (Mahdi 12:55), three rows at mori.style's speed */
.l-int{padding-inline:0}
.l-int-head{margin:0 auto 1.5rem}
.l-int-h2{font-size:2rem;line-height:1.25;text-align:center;text-wrap:balance}
.l-int-h2>span{color:#fe6e61;display:inline-block;max-width:100%;text-wrap:balance}  /* its own line box, so the coral line balances on its own at 390 instead of leaving two words behind */
.l-int-track{list-style:none;margin:0;padding:0;animation:scrollAnim var(--d,30s) linear infinite;animation-play-state:paused}
.l-int-track.k-rev{animation-name:scrollAnimReverse}
.k-in .l-int-track{animation-play-state:running}
.l-int-row:hover .l-int-track{animation-play-state:paused}
.l-int-logo.k-gl{display:inline-grid;place-items:center;color:#fefefe}
.l-int-logo.k-tile{display:inline-grid;place-items:center;border-radius:14px;background:var(--tc);color:#fff;box-shadow:inset 0 -2px 0 #00000026}
.l-int-logo.k-tile svg{width:56%;height:56%}
.l-int-logo.k-tile b{font:800 13px/1 Estedad,system-ui,sans-serif;letter-spacing:.04em}
.l-int-track{gap:1rem}
@media (width>=48em){.l-int-track{gap:2rem}.l-int-logo.k-tile b{font-size:17px}}
svg.l-int-logo{flex:none}
img.l-int-logo[src^='data:image/png']{border-radius:22%}
img.l-int-logo.k-plate{background:#fff;border-radius:22%;padding:9%;box-sizing:border-box}
.l-int-logo.k-gl svg{width:60%;height:60%}
@media (width<48em){.l-int-row{margin-bottom:.2rem;padding:.25rem 0}.l-int-track{gap:.4rem}.l-int-item{min-width:0;min-height:40px;padding:.45rem .7rem;border-radius:.65rem}.l-int-link{gap:.45rem}.l-int-logo{width:24px;height:24px}.l-int-logo.k-tile{border-radius:8px}.l-int-logo.k-tile b{font-size:10px}.l-int-name{font-size:.82rem;white-space:nowrap}}  /* phones: smaller pills, about twice as many logos on screen at once (Mahdi 17:2x) */
@media (width>=48em){.l-int-head{grid-template-columns:1fr;margin-bottom:2.5rem}.l-int-h2{font-size:3rem;line-height:1.2}}
@media (width>=62em){.l-int-h2{font-size:3.75rem}}
/* «فرمون دست خودته», short */
.k-rules{display:grid;gap:12px}
.k-rule{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;background:#0f1013f0;border:1px solid #3a3a46;border-radius:16px;padding:14px 16px}
.k-rule .face{width:36px;height:36px}
.k-rule p{margin:0;color:#bdc1c6;font-size:14px;line-height:1.75}
.k-rule b{color:#fefefe}
/* voices: fanned cards from the main r14 page (extra.css 328): phone = swipe row with the next card peeking; desktop = four cards in one fanned row that fan in once */
.vrow{margin-inline:-20px;padding:20px 20px 28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:4px}
.vrow::-webkit-scrollbar{display:none}
.vlist{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.vlist::after{content:"";flex:none;width:44px}
.vc{flex:none;width:78%;scroll-snap-align:center;border:6px solid var(--f);border-radius:20px;background:#151619;transform:rotate(var(--r))}
.vin{display:flex;flex-direction:column;gap:16px;min-height:280px;height:100%;padding:20px}
.vc blockquote{flex:1;margin:0;font-size:18px;line-height:1.9;font-weight:500;color:#FEFEFE}
.vtag{align-self:flex-end;padding:2px 8px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#D2D4D8;font-size:12px;line-height:1.6}
.vwho{font-size:15px;font-weight:700;color:#D2D4D8;margin:0}
.vlist.k-rv{opacity:1;transform:none;transition:none}
.vlist .vc{opacity:0;transform:translateY(80px) rotate(-14deg) scale(.92)}
.vlist.k-in .vc{opacity:1;transform:rotate(var(--r));transition:opacity .45s ease-out,transform .75s cubic-bezier(.34,1.35,.5,1);transition-delay:calc(var(--i) * 110ms)}
@media (width>=64em){
  .vrow{margin-inline:0;padding-inline:0;overflow:visible}
  .vlist{gap:0}.vlist::after{display:none}
  .vc{flex:1;width:auto;margin-inline-start:-12px}
  .vc:first-child{margin-inline-start:0}
  .vlist.k-in .vc:hover{transform:translateY(-6px) rotate(0deg);transition-delay:0ms;z-index:1}
}
@media (prefers-reduced-motion:reduce){.vlist .vc{opacity:1;transform:rotate(var(--r));transition:none!important}}
.k-steps{display:grid;gap:14px}
.k-step{background:#0f1013f0;border:1px solid #3a3a46;border-radius:16px;padding:16px;display:grid;gap:8px;align-content:start}
.k-step i{font-style:normal;width:28px;height:28px;border-radius:50%;background:#C8402F;color:#fefefe;display:grid;place-items:center;font-weight:700;font-size:14px}
.k-step b{font-size:15px;color:#fefefe}
.k-step small{color:#bdc1c6;font-size:13px;line-height:1.7}
.k-mini{display:flex;align-items:center;gap:10px;background:#15161b;border:1px solid #2a2a33;border-radius:10px;padding:8px 10px;color:#fefefe;font-size:13px;margin-top:4px}
.k-mini em{font-style:normal;margin-inline-start:auto;background:#C8402F;border-radius:7px;padding:4px 10px;font-size:12px;font-weight:700}
.k-mini.k-join{color:#bdc1c6;font-size:12px}
.k-fs{display:flex}.k-fs .face{width:26px;height:26px;border:2px solid #0f1013;margin-inline-end:-8px}.k-fs .face:last-child{margin-inline-end:0}
.k-mini.k-ask{display:grid;gap:5px;justify-items:start}.k-mini.k-ask .k-m-bub{padding:6px 10px;font-size:13px}
.k-faq{display:grid;gap:8px;max-width:44em;margin:0 auto}
.k-faq details{background:#0f1013f0;border:1px solid #3a3a46;border-radius:14px;padding:0 16px}
.k-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;color:#fefefe;font-size:14px;font-weight:600;line-height:1.5}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq .k-pl{position:relative;flex:none;width:18px;height:18px}
.k-faq .k-pl::before,.k-faq .k-pl::after{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:2px;background:#fe6e61;transform:translate(-50%,-50%);transition:transform .2s}
.k-faq .k-pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.k-faq details[open] .k-pl::after{transform:translate(-50%,-50%) rotate(0)}
.k-faq p{margin:0;padding:0 0 14px;color:#bdc1c6;font-size:13px;line-height:1.8}
.k-close{text-align:center;display:grid;justify-items:center;gap:12px;padding-block:64px 80px}
.k-close .k-sec-h{margin-bottom:12px}
.k-fs.k-big{padding-inline-end:12px}.k-fs.k-big .face{width:44px;height:44px;margin-inline-end:-12px}
.k-close .l-btn{min-width:12rem}
/* item 35 (Mahdi 22:3x): the closing section is a heist poster: his crew picture is the section, title, line and button sit on its dark lower part; the first title line is painted like the crew's eye strokes */
#faq{padding-bottom:8px}
.k-close.k-gang{display:block;padding:0;max-width:none;text-align:center;position:relative;isolation:isolate;overflow:clip;
 background:radial-gradient(50% 40% at 0 52%,rgba(3,63,97,.55),transparent 75%),radial-gradient(50% 40% at 100% 52%,rgba(96,24,48,.55),transparent 75%),#0A0A0D}
.k-gang-in{width:min(100%,var(--gw,100%));margin-inline:auto;position:relative}
.k-gang-art{aspect-ratio:1121/1403;background:linear-gradient(to bottom,transparent 66%,rgba(10,10,13,.82) 86%,rgba(10,10,13,.96) 95%),url("/l/6ab4873c31.webp") center/cover no-repeat;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 76%,transparent 100%);mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 76%,transparent 100%)}
.k-gang-copy{position:relative;margin-top:-25%;padding:0 20px 72px;display:grid;justify-items:center}
.k-gang-h{margin:0;font-size:2.75rem;font-weight:900;line-height:1.3;color:#fefefe;transform:rotate(-3deg);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.k-gang-h>span{display:block}
.k-gang-tag{position:relative;padding:0 .3em;z-index:0}
.k-gang-tag::before{content:"";position:absolute;inset:.08em -.1em .02em;z-index:-1;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'><defs><linearGradient id='g' x1='1' x2='0'><stop offset='0' stop-color='%232c3df2'/><stop offset='1' stop-color='%237a2cf0'/></linearGradient></defs><path fill='url(%23g)' d='M8 13C70 5 150 9 222 6c30-1 58 2 74 6l-7 7 9 6-10 7 9 7-11 7c-58 7-140 3-210 8-28 2-54-1-72-5l8-7-10-7 8-7-7-7z'/><path fill='url(%23g)' opacity='.55' d='M30 4l120-3 1 3-120 3zM60 55l150-2v3l-150 2z'/></svg>") center/100% 100% no-repeat;transform-origin:right;transform:scaleX(0);transition:transform .38s cubic-bezier(.2,.7,.2,1) .25s}
.k-gang.k-in .k-gang-tag::before{transform:none}
.k-gang-h .k-c{color:#fe6e61}
#close .l-btn-primary{min-width:16rem;height:3.5rem;margin-top:34px;padding:0 1.75rem;font-size:1.25rem;font-weight:800;color:#fefefe;background:#C8402F;border-radius:.25rem;transform:rotate(-2deg);box-shadow:-6px 6px 0 #4f34f1;transition:transform .15s ease,box-shadow .15s ease}
#close .l-btn-primary:hover{background:#C8402F;transform:rotate(-2deg) translate(2px,-2px);box-shadow:-8px 8px 0 #4f34f1}
#close .l-btn-primary:active{background:#C8402F;transform:rotate(-2deg) translate(-6px,6px);box-shadow:0 0 0 #4f34f1}
#close .l-btn-primary:focus-visible{outline:3px solid #fefefe;outline-offset:5px}
@media (prefers-reduced-motion:reduce){.k-gang-tag::before{transform:none;transition:none}#close .l-btn-primary{transition:none}}
@media (width>=48em){.k-close.k-gang{--gw:600px;background:radial-gradient(240px 440px at calc(50% - 300px) 62%,rgba(20,110,165,.5),transparent 72%),radial-gradient(240px 440px at calc(50% + 300px) 62%,rgba(180,40,85,.45),transparent 72%),#0A0A0D}.k-gang-art{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 76%,transparent 100%),linear-gradient(to right,transparent,#000 20%,#000 80%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 76%,transparent 100%),linear-gradient(to right,transparent,#000 20%,#000 80%,transparent);mask-composite:intersect}
 .k-gang-copy{margin-top:-27%;padding-bottom:96px}.k-gang-h{font-size:4rem}#close .l-btn-primary{height:3.75rem;font-size:1.375rem}}

.s-foot .k-ph{display:inline}
.k-rv:not(.k-chat){opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.k-rv.k-in:not(.k-chat){opacity:1;transform:none}
.k-chat.k-rv{transition:none;opacity:1;transform:none}
@media (width>=48em){
  .k-ws,#safe,#voices,#start,#faq{padding-block:80px}
  .k-col.k-ws{padding-bottom:32px}
  .k-ws h2,.k-sec-h{font-size:2.5rem}
  .k-col h2{font-size:2.25rem}
  .k-sub{font-size:1.125rem}
  .k-m-bub{font-size:15px}
  .k-cmd{font-size:14px;padding:10px 14px}
  .k-mq{padding-bottom:56px}
  .k-ws-demo .k-chat:only-child{max-width:560px;margin:0 auto;width:100%}
  .k-rules{grid-template-columns:repeat(3,1fr)}
  .k-steps{grid-template-columns:repeat(3,1fr)}
}
@media (width>=62em){
  .k-ws{grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .k-ws-demo .k-chat:only-child{margin:0;max-width:none}
}
/* kinetic band (Mahdi 14:12): mori.style's three drifting rows; black floor from .k-bg, edges fade, outlined copies are decoration only */
.k-band{padding-block:40px;overflow:hidden;position:relative}
.kb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.kb-row{overflow:hidden;direction:ltr;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.kb-track{display:flex;width:max-content;align-items:center;gap:.5em;font-size:40px;line-height:1.5;font-weight:800;white-space:nowrap;animation:kb-x var(--d) linear infinite;will-change:transform}
.kb-track.kb-rev{animation-direction:reverse}
/* Mahdi 22:2x: the rows start moving only when the band comes into view, so the first look always has three different phrases stacked (they would line up only after about 28s) */
.k-band:not(.kb-go) .kb-track{animation-play-state:paused}
.kb-p{direction:rtl;padding-inline:.15em}
/* 15:31 item 8, measured on mori.style 1440 (.l-mq-word.l-tone2, .l-mq-sep): outline 1.6px white at 50%, weight 700, the ✦ 20px coral with 32px air; ours a step stronger so the star reads at 390 */
.kb-o{color:transparent;-webkit-text-stroke:1.5px #a8a8ae}
.kb-star{font-style:normal;font-size:.5em;line-height:1;color:#FF6F61;padding-inline:.35em;display:inline-flex;filter:drop-shadow(0 0 10px #FF6F6166)}.kb-star svg{width:1em;height:1em;display:block}
@keyframes kb-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (width>=48em){.kb-track{font-size:64px}.kb-o{-webkit-text-stroke-width:1.9px}.kb-star{font-size:.38em}}
@media (width>=80em){.kb-track{font-size:88px}.k-band{padding-block:72px}}
@media (prefers-reduced-motion:reduce){.kb-track{animation:none;width:100%;justify-content:center}.kb-o,.kb-star,.kb-track>span:nth-child(n+2){display:none}.kb-row:nth-child(n+2){display:none}.kb-row{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion: reduce){.k-m,.k-rv{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}.k-mq-track,.l-int-track{animation:none!important;flex-wrap:wrap;width:auto;min-width:0}.k-mq-row,.l-int-row{mask-image:none;-webkit-mask-image:none}}

.k-scene{scroll-margin-top:56px}
@media (min-width:900px){.k-scene{scroll-margin-top:64px}}