/* codex.ong store (the new design, 17 Oct 2026: design 7 "Signature", his pick). The design first, then the live parts. */
/* Shared by the six store designs: reset, gutters, logo, reveal, the Get sheet and the footer. Each design sets the tokens. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
:root{--gut:16px}
@media (min-width:760px){:root{--gut:32px}}
.w{width:100%;max-width:var(--maxw,1240px);margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.logo{display:inline-flex;align-items:center;gap:9px;font:600 23px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.03em;direction:ltr;flex:none}
.logo svg{width:30px;height:30px;flex:none}
.langbtn{font-family:'IBM Plex Sans Arabic','Plus Jakarta Sans',system-ui,sans-serif;font-weight:600;font-size:14px;white-space:nowrap}
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0s)}
/* the Get sheet */
.gs-wrap{position:fixed;inset:0;z-index:200}
.gs-scrim{position:absolute;inset:0;background:rgba(8,10,16,.45);opacity:0;transition:opacity .35s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.gs{position:absolute;left:50%;bottom:0;width:min(520px,100%);transform:translate(-50%,105%);transition:transform .5s cubic-bezier(.2,.85,.25,1),opacity .3s;
  background:var(--gs-bg,#fff);color:var(--gs-ink,#111);border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px;
  box-shadow:0 -20px 60px -20px rgba(0,0,0,.35);font-family:var(--gs-font,inherit)}
.gs-wrap.on .gs-scrim{opacity:1}
.gs-wrap.on .gs{transform:translate(-50%,0)}
@media (max-width:759px){.gs{touch-action:none}}   /* the sheet follows a pull down (store-engine.js pullToClose) */
@media (min-width:760px){.gs{bottom:50%;border-radius:26px;padding-bottom:22px;transform:translate(-50%,calc(50% + 40px)) scale(.97);opacity:0}.gs-wrap.on .gs{transform:translate(-50%,50%);opacity:1}.gs-grab{display:none}}
.gs-grab{width:40px;height:5px;border-radius:9px;background:var(--gs-line,#ddd);margin:0 auto 4px}
/* a sheet taller than the screen scrolls inside (27 Oct 2026: the 3 plans made it taller than a phone); a pull from its
   grab bar or head still closes it (store-engine.js fitSheet, pullToClose) */
.gs{max-height:calc(100% - 20px - env(safe-area-inset-top,0px));overflow-y:auto;overscroll-behavior:contain}
.gs>*{flex-shrink:0}
@media (max-width:759px){.gs.scroll{touch-action:pan-y}.gs.scroll .gs-grab,.gs.scroll .gs-head{touch-action:none}}
.gs-head{display:flex;align-items:center;gap:14px;padding-block:6px 8px}
.gs-ic{width:62px;height:62px;border-radius:16px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.gs-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gs-t b{font-size:19px;font-weight:700;direction:ltr;text-align:start}
.gs-t span{font-size:13.5px;color:var(--gs-mu,#666);line-height:1.45}
.gs-x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gs-soft,#f1f1f4);flex:none}
.gs-x svg{width:18px;height:18px}
/* Share (18 Oct 2026): under the app's name in the Get sheet; copies the app's own link; the app's own colour, a soft
   pill that fills when the link is copied */
.gs-share{align-self:flex-start;margin-top:5px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px 0 10px;border-radius:99px;flex:none;cursor:pointer;
  font:700 13.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.01em;color:var(--sh,var(--gs-acc,#5B47E0));
  background:color-mix(in srgb,var(--sh,var(--gs-acc,#5B47E0)) 12%,transparent);transition:transform .15s,background .25s,color .25s}
[dir=rtl] .gs-share{font-family:var(--arb);padding:0 10px 0 13px}
.gs-t .gs-share span{color:inherit;font-size:inherit;line-height:1}   /* not the grey tagline style of .gs-t span */
.gs-share-i{display:grid;place-items:center}.gs-share svg{width:17px;height:17px}
.gs-share:hover{background:color-mix(in srgb,var(--sh,var(--gs-acc,#5B47E0)) 18%,transparent)}
.gs-share:active{transform:scale(.96)}
.gs-share.done{background:var(--sh,var(--gs-acc,#5B47E0));color:#fff}
.gs-share:focus-visible{outline:2px solid var(--sh,var(--gs-acc,#5B47E0));outline-offset:2px}
.gs-link{margin:-4px 0 0;font-size:13px;font-weight:600;color:var(--gs-mu,#666);user-select:all;overflow-wrap:anywhere}
.gs-price{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--gs-soft,#f1f1f4)}
.gs-price b{font-size:20px;font-weight:800;direction:ltr;text-align:start}
[dir=rtl] .gs-price b{direction:rtl}
.gs-price span{font-size:13px;color:var(--gs-mu,#666)}
.gs-trial{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--gs-acc,#5B47E0);background:var(--gs-soft,#f1f1f4);border-radius:12px;padding:10px 12px}
.gs-trial svg{width:18px;height:18px;flex:none}
.gs-btn{display:flex;align-items:center;gap:12px;border-radius:16px;padding:15px 16px;font-weight:600;font-size:15.5px;background:var(--gs-soft,#f1f1f4);color:var(--gs-ink,#111);transition:transform .15s,filter .2s}
.gs-btn:hover{filter:brightness(.97)}
.gs-btn:active{transform:scale(.98)}
.gs-btn svg{width:22px;height:22px;flex:none}
.gs-two{display:flex;flex-direction:column;gap:2px}
.gs-two small{font-size:12.5px;font-weight:500;color:var(--gs-mu,#666)}
.gs-main{background:var(--gs-acc,#5B47E0);color:var(--gs-acc-ink,#fff)}
.gs-note{font-size:12.5px;color:var(--gs-mu,#666);text-align:center;padding-top:4px}
.sr-empty{padding:14px 16px;color:var(--mu,#777);font-size:14px}
/* footer */
.ft{padding-block:52px 28px;margin-top:56px;border-top:1px solid var(--line,rgba(0,0,0,.1))}
.ft-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.3fr);gap:28px}
.ft-a p{margin-top:14px;font-size:14px;line-height:1.65;color:var(--mu,#777);max-width:44ch}
.ft-b{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.ft-b a:hover{text-decoration:underline;text-underline-offset:3px}
.ft-c{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:14.5px}
.ft-c span{color:var(--mu,#777)}
.mail{text-decoration:underline;text-underline-offset:3px;direction:ltr}
.ft-d{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-top:36px;font-size:12.5px;color:var(--mu,#777)}
@media (max-width:760px){.ft-in{grid-template-columns:1fr;gap:22px}}
:focus-visible{outline:2px solid var(--focus,#5B47E0);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* 7 · Signature. Gallery on top (a living 3D wall of covers behind glass), Today below (story cards that grow open, clean app lists),
   a side menu with Account, About, Contact and support, and Find us; a footer with the logo, social pills, support and rights. */
:root{--bg:#F2F3F7;--card:#FFFFFF;--ink:#0B0D14;--ink2:#3B3F4C;--mu:#7A7F8C;--line:rgba(30,32,45,.12);--acc:#4C3BD9;--accS:rgba(76,59,217,.1);--glass:rgba(255,255,255,.66);
  --disp:'Archivo','Plus Jakarta Sans',system-ui,sans-serif;--body:'Plus Jakarta Sans',system-ui,sans-serif;--ard:'Readex Pro','IBM Plex Sans Arabic',sans-serif;--arb:'IBM Plex Sans Arabic',sans-serif;
  --gs-bg:#fff;--gs-ink:#0B0D14;--gs-mu:#7A7F8C;--gs-soft:#F2F3F7;--gs-acc:#4C3BD9;--gs-line:#D9DAE2;--focus:#4C3BD9;--maxw:1200px;color-scheme:light}
body{background:var(--bg);color:var(--ink);font-family:var(--body)}
[dir=rtl] body{font-family:var(--arb)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
.d{font-family:var(--disp);font-stretch:112%}
[dir=rtl] .d{font-family:var(--ard);font-stretch:100%}

/* header */
.hd{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;transition:background .35s,box-shadow .35s}
.hd.sc{background:rgba(242,243,247,.8);backdrop-filter:saturate(1.7) blur(20px);-webkit-backdrop-filter:saturate(1.7) blur(20px);box-shadow:0 1px 0 var(--line)}
.hd-in{display:flex;align-items:center;gap:10px;height:66px}
.logo{color:var(--ink)}
.ib{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--line);flex:none;transition:background .2s,transform .15s}
.ib:hover{background:#fff}.ib:active{transform:scale(.94)}
.ib svg{width:20px;height:20px}
.sp{flex:1}
.hd .langbtn{height:42px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--line)}
.langbtn .lb-s{display:none}
.hd .logo{min-height:44px}
.dw-h .logo{padding-block:7px;margin-block:-7px}
/* small phones (18 Oct 2026 review): menu, logo, search, language and account all fit down to 320 px; the language
   button shows only EN or ع */
@media (max-width:400px){.hd-in{gap:6px}.hd .ib{width:40px;height:40px}.hd .langbtn{height:40px;min-width:40px;padding:0 10px}
  .hd .langbtn .lb-l{display:none}.hd .langbtn .lb-s{display:inline;font-weight:700}.hd .logo{font-size:21px;gap:7px}.hd .logo svg{width:27px;height:27px}}
.av{background:linear-gradient(135deg,#9C8CFF,#4C3BD9);color:#fff;box-shadow:none}

/* hero: Gallery's wall */
.hero{position:relative;height:min(100svh,940px);min-height:660px;overflow:hidden;display:grid;place-items:center}
.wall{position:absolute;inset:-25% -15%;display:flex;gap:22px;justify-content:center;transform:perspective(1400px) rotateX(24deg) rotateZ(-12deg) scale(1.08);pointer-events:none}
[dir=rtl] .wall{transform:perspective(1400px) rotateX(24deg) rotateZ(12deg) scale(1.08)}
.col{flex:none;width:clamp(150px,15vw,240px);display:flex;flex-direction:column;gap:22px;animation:up var(--dur) linear infinite;will-change:transform}
.col.dn{animation-name:down}
.col img{width:100%;height:auto;border-radius:20px;box-shadow:0 26px 50px -24px rgba(11,13,20,.45)}
@keyframes up{to{transform:translateY(-50%)}}
@keyframes down{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 55% at 50% 50%,rgba(242,243,247,.88) 0%,rgba(242,243,247,.55) 45%,rgba(242,243,247,0) 75%),linear-gradient(180deg,rgba(242,243,247,.92) 0%,rgba(242,243,247,0) 22%,rgba(242,243,247,0) 76%,var(--bg) 100%)}
@supports (animation-timeline:scroll()){.wall{animation:recede linear both;animation-timeline:scroll(root);animation-range:0 90vh}}
@keyframes recede{to{opacity:.25;filter:blur(3px)}}
.panel{position:relative;z-index:2;width:min(780px,calc(100% - 2*var(--gut)));text-align:center;padding:clamp(26px,4vw,50px);border-radius:36px;background:var(--glass);
  backdrop-filter:saturate(1.6) blur(24px);-webkit-backdrop-filter:saturate(1.6) blur(24px);box-shadow:0 0 0 1px rgba(255,255,255,.85) inset,0 50px 100px -50px rgba(11,13,20,.45);animation:pop 1s .15s cubic-bezier(.2,.85,.25,1) both}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.97)}}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
[dir=rtl] .kick{letter-spacing:0;font-size:14px}
.kick i{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px var(--accS)}
.panel h1{font-size:clamp(38px,6vw,80px);font-weight:800;letter-spacing:-.035em;line-height:.98;margin-top:16px;text-wrap:balance;transition:opacity .35s,transform .35s}
[dir=rtl] .panel h1{font-weight:700;letter-spacing:0;line-height:1.35;font-size:clamp(32px,4.8vw,62px)}
.panel h1.swap{opacity:0;transform:translateY(8px)}
.panel .sub{margin:18px auto 0;max-width:48ch;font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--ink2)}
/* search (his ask, 17 Oct 2026): only the header's search button; it slides a glass bar down under the header, the
   suggestions follow the typing, 30 seconds without typing close it, and the words stay for the next time */
.sbar{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 66px);z-index:49;pointer-events:none}
.sbar-in{width:min(680px,calc(100% - 2*var(--gut)));margin:8px auto 0;opacity:0;transform:translateY(-18px) scale(.985);transform-origin:top center;transition:opacity .3s ease,transform .5s cubic-bezier(.2,.85,.25,1)}
.sbar.on{pointer-events:auto}
.sbar.on .sbar-in{opacity:1;transform:none}
.sfield{display:flex;align-items:center;gap:10px;height:58px;padding-inline:20px 8px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(20px);-webkit-backdrop-filter:saturate(1.6) blur(20px);box-shadow:0 0 0 1px var(--line),0 26px 56px -24px rgba(11,13,20,.45);transition:box-shadow .3s}
.sfield:focus-within{box-shadow:0 0 0 2px var(--acc),0 26px 56px -22px rgba(76,59,217,.45)}
.sfield>svg{width:21px;height:21px;color:var(--mu);flex:none}
.sfield input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:17px;color:var(--ink)}
.sfield input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.sclear{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink2);flex:none;transition:transform .15s}
.sclear:active{transform:scale(.92)}
.sclear svg{width:17px;height:17px}
.sres{margin-top:10px;background:#fff;border-radius:24px;box-shadow:0 30px 70px -24px rgba(11,13,20,.45);padding:8px;max-height:min(62vh,540px);overflow:auto;overscroll-behavior:contain;transform-origin:top center;animation:sresIn .35s cubic-bezier(.2,.85,.25,1)}
@keyframes sresIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.sres .r{opacity:0;transform:translateY(6px);animation:rIn .38s cubic-bezier(.2,.85,.25,1) forwards;animation-delay:calc(var(--i,0)*35ms)}
@keyframes rIn{to{opacity:1;transform:none}}
.sres .sr-empty{padding:16px;color:var(--mu);font-size:14.5px}
.quick{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.quick button{padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px var(--line);font-size:14px;font-weight:600;color:var(--ink2);transition:background .2s,color .2s}
.quick button:hover{background:var(--ink);color:#fff}

/* Today: story cards */
.today{position:relative;z-index:2;padding-top:10px}
.today-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:26px}
.date{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
[dir=rtl] .date{letter-spacing:0;font-size:14px}
.today h2{font-size:clamp(36px,4.6vw,52px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:4px}
[dir=rtl] .today h2{letter-spacing:0;line-height:1.3}
.stories{container-type:inline-size}
.sg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 24px;--sh:calc((100cqw - 48px)/3*1.25)}
.st{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
.st.w2{grid-column:span 2}
.st-box{position:relative;height:var(--sh);border-radius:28px;overflow:hidden;background:#dfe0e6;box-shadow:0 34px 60px -40px rgba(10,10,30,.6);transition:transform .6s cubic-bezier(.2,.85,.25,1),box-shadow .6s;transform-origin:center bottom}
.st:hover .st-box{transform:translateY(-6px);box-shadow:0 44px 70px -40px rgba(10,10,30,.65)}
.st:active .st-box{transform:scale(.97);transition-duration:.2s}
.st.hide .st-box{visibility:hidden}
@supports (animation-timeline:view()){.st-box{animation:grow linear both;animation-timeline:view();animation-range:entry 0% cover 35%}}
@keyframes grow{from{transform:scale(.9);opacity:.5;border-radius:50px}}
.meta{display:flex;align-items:center;gap:14px;padding:16px 6px 0}
.meta>img{width:52px;height:52px;border-radius:13px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mt{flex:1;min-width:0}
.mt b{display:block;font-size:18px;font-weight:700;direction:ltr;text-align:start}
.mt span{display:block;font-size:14px;color:var(--mu);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-im,.st-im img,.st-im picture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-im img{object-position:top center;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.st.w2 .st-im img{object-position:center}
.st:hover .st-im img{transform:scale(1.035)}
.lab{position:absolute;top:14px;inset-inline-end:14px;z-index:2;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(10,10,22,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:7px 12px;border-radius:999px}
[dir=rtl] .lab{letter-spacing:0;font-size:13px}
.bar{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;align-items:center;gap:12px;padding:10px;border-radius:18px;background:rgba(255,255,255,.76);backdrop-filter:saturate(1.8) blur(18px);-webkit-backdrop-filter:saturate(1.8) blur(18px)}
.bar img{width:46px;height:46px;border-radius:12px;flex:none}
.bt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bt b,.rt b{font-size:15.5px;font-weight:700;direction:ltr;text-align:start}
.bt span{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.get{flex:none;display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:700;font-size:14.5px;padding:10px 20px;border-radius:999px;transition:transform .2s,background .2s}
.get:hover{background:var(--acc)}.get:active{transform:scale(.96)}

/* prices: rose gold, a premium serif, no commas (his ask) */
.gold,.gs-price b{font-family:'Playfair Display','Noto Naskh Arabic',Georgia,serif;font-weight:700;font-variant-numeric:lining-nums;letter-spacing:.01em;
  background:linear-gradient(115deg,#8A4636 0%,#B9705A 26%,#E2B08A 48%,#C4876C 62%,#8F4C3B 100%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:220% 0}}
.gs-price b{font-size:26px}
/* collections: clean rows with price */
.grp{padding-top:60px}
.grp-h{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:22px;margin-bottom:6px}
.grp-h h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.025em}
[dir=rtl] .grp-h h2{letter-spacing:0}
.grp-h p{font-size:14.5px;color:var(--mu);margin-top:4px}
.fan{position:relative;width:132px;height:52px;flex:none}
.fan img{position:absolute;top:0;width:48px;height:48px;border-radius:13px;box-shadow:0 10px 20px -10px rgba(0,0,0,.45),0 0 0 2px #fff;transition:transform .5s cubic-bezier(.2,.85,.25,1)}
.fan img:nth-child(1){inset-inline-start:0;transform:rotate(-8deg)}.fan img:nth-child(2){inset-inline-start:28px;transform:rotate(-2deg)}.fan img:nth-child(3){inset-inline-start:56px;transform:rotate(5deg)}.fan img:nth-child(4){inset-inline-start:84px;transform:rotate(10deg)}
.grp:hover .fan img:nth-child(odd){transform:translateY(-5px) rotate(-6deg)}.grp:hover .fan img:nth-child(even){transform:translateY(-8px) rotate(6deg)}
.rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}
.row{display:flex;align-items:center;gap:14px;padding:12px 0;cursor:pointer;position:relative}
.row::after{content:"";position:absolute;bottom:0;inset-inline-start:78px;inset-inline-end:0;height:1px;background:var(--line)}
.ric{width:64px;height:64px;border-radius:15px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.05);transition:transform .3s}
.row:hover .ric{transform:scale(1.05)}
.rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rt span{font-size:13px;color:var(--mu);line-height:1.35;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.rt .pr{font-size:16px;margin-top:2px}
.rt em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--acc)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.cat{position:relative;border-radius:24px;padding:20px;min-height:178px;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;background:linear-gradient(150deg,var(--c1),var(--c2));transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cat:hover{transform:translateY(-4px)}
.cat b{font-size:20px;font-weight:800}
.cat span{font-size:13px;opacity:.85}
@media (max-width:380px){.cat{padding:14px}.cat b{font-size:17px}}
.stack{display:flex}
.stack img{width:46px;height:46px;border-radius:13px;box-shadow:0 8px 18px -6px rgba(0,0,0,.45),0 0 0 2px rgba(255,255,255,.35);margin-inline-end:-12px}

/* about band */
.band{margin-top:80px;position:relative;overflow:hidden;border-radius:34px;background:#0E0F1A;color:#fff;padding:clamp(30px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:30px;align-items:center}
.band::before{content:"";position:absolute;width:520px;height:520px;inset-inline-end:-120px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(124,108,255,.55),rgba(124,108,255,0));filter:blur(10px)}
.band h2{position:relative;font-size:clamp(30px,3.8vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
[dir=rtl] .band h2{letter-spacing:0;line-height:1.4}
.band p{position:relative;margin-top:14px;color:rgba(255,255,255,.75);font-size:17px;line-height:1.6;max-width:52ch}
.band .btn{position:relative;margin-top:22px}
.band .big{position:relative;justify-self:center;width:min(240px,60%);filter:drop-shadow(0 30px 60px rgba(124,108,255,.45))}
.band .big svg{width:100%;height:auto}
.btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);font-weight:700;font-size:15px;padding:12px 22px;border-radius:999px;transition:transform .2s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--acc);color:#fff}
.btn.line{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.btn svg{width:18px;height:18px}

/* social pills: tap a logo, the row slides open with the username and a link */
.soc{display:flex;flex-wrap:wrap;gap:10px}
.sp-it{display:flex;align-items:center;height:52px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .3s}
.sp-it.on{box-shadow:0 0 0 1px transparent,0 16px 30px -18px rgba(11,13,20,.5)}
.sp-b{height:52px;display:flex;align-items:center;gap:10px;padding-inline:7px 16px;flex:none;color:var(--ink)}
.sp-b i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;flex:none}
/* his usernames, always shown, in the same premium serif as the app names */
.sp-u{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:600;font-size:16.5px;letter-spacing:.01em;direction:ltr;white-space:nowrap;color:var(--ink)}
.sp-b svg{width:21px;height:21px}
.sp-x{display:flex;align-items:center;gap:12px;max-width:0;opacity:0;white-space:nowrap;transition:max-width .55s cubic-bezier(.2,.85,.25,1),opacity .3s,padding .55s;padding-inline:0}
.sp-it.on .sp-x{max-width:340px;opacity:1;padding-inline:0 8px}
.sp-x b{font-size:15px;direction:ltr}
.sp-x small{display:block;font-size:12px;color:var(--mu);font-weight:500}
.sp-x a{display:inline-flex;align-items:center;gap:6px;background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px}
.sp-x a svg{width:15px;height:15px}
[dir=rtl] .sp-x a svg{transform:scaleX(-1)}
/* a pill never grows past its box (his screenshots, 18 Oct 2026): where the box is narrow (the side menu, a phone's
   footer) each pill is a full-width row that opens downward; where there is room it slides open sideways as before */
.soc{container-type:inline-size;align-items:flex-start}
.sp-it{max-width:100%}
.sp-b{min-width:0}
.sp-u{min-width:0;overflow:hidden;text-overflow:ellipsis}
@container (max-width:379px){
  .sp-it{width:100%;flex-wrap:wrap;height:auto;border-radius:26px}
  .sp-b{flex:1 1 auto}
  .sp-x{flex:0 0 100%;max-width:none;max-height:0;justify-content:space-between;padding:0 10px 0 18px;transition:max-height .5s cubic-bezier(.2,.85,.25,1),opacity .3s,padding .5s}
  .sp-it.on .sp-x{max-width:none;max-height:64px;padding:2px 8px 10px 18px}
  .sp-x small{font-size:13px}
}

/* footer */
.ft2{margin-top:90px;background:var(--card);border-top:1px solid var(--line);padding-block:56px 26px}
.ft-g{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:34px}
.ft-brand .logo{font-size:30px}.ft-brand .logo svg{width:40px;height:40px}
.ft-brand p{margin-top:14px;color:var(--mu);font-size:14.5px;line-height:1.65;max-width:40ch}
.ft-brand .soc{margin-top:20px}
.ft2 h4{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mu);margin-bottom:14px}
[dir=rtl] .ft2 h4{letter-spacing:0;font-size:14px}
.ft2 ul{display:flex;flex-direction:column;gap:1px;font-size:15px}
.ft2 li button,.ft2 li a{display:inline-flex;align-items:center;min-height:40px;color:var(--ink2);transition:color .2s}   /* a finger-sized row (18 Oct 2026 review) */
.ft2 li button:hover,.ft2 li a:hover{color:var(--acc)}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--mu)}
.ft-bot .loc{display:inline-flex;align-items:center;gap:6px}
.ft-bot .loc svg{width:16px;height:16px}

/* side menu */
.dw{position:fixed;inset:0;z-index:120;visibility:hidden;transition:visibility 0s .55s}
.dw.on{visibility:visible;transition-delay:0s}
.dw-s{position:absolute;inset:0;background:rgba(11,13,20,.36);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .4s}
.dw.on .dw-s{opacity:1}
.dw-p{position:absolute;top:0;bottom:0;inset-inline-start:0;width:min(420px,92vw);background:var(--bg);box-shadow:30px 0 80px -30px rgba(0,0,0,.45);transform:translateX(-102%);transition:transform .55s cubic-bezier(.2,.85,.25,1);overflow:hidden;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
[dir=rtl] .dw-p{transform:translateX(102%)}
.dw.on .dw-p{transform:none}
.dw-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;flex:none}
.dw-track{position:relative;flex:1;min-height:0}
.dw-view{position:absolute;inset:0;overflow-y:auto;padding:4px 18px calc(28px + env(safe-area-inset-bottom,0px));transition:transform .5s cubic-bezier(.2,.85,.25,1),opacity .35s}
.dw-view.main{transform:none}
.dw.sub .dw-view.main{transform:translateX(-30%);opacity:0;pointer-events:none}
[dir=rtl] .dw.sub .dw-view.main{transform:translateX(30%)}
.dw-view.sec{transform:translateX(105%);opacity:0;pointer-events:none}
[dir=rtl] .dw-view.sec{transform:translateX(-105%)}
.dw.sub .dw-view.sec.on{transform:none;opacity:1;pointer-events:auto}
.mi{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:20px;background:var(--card);margin-bottom:10px;box-shadow:0 0 0 1px var(--line);transition:transform .2s;opacity:0;transform:translateX(-14px)}
[dir=rtl] .mi{transform:translateX(14px)}
.dw.on .mi{opacity:1;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.2,.85,.25,1);transition-delay:calc(.12s + var(--i)*.06s)}
.mi:active{transform:scale(.98)}
.mi i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accS);color:var(--acc);flex:none}
.mi i svg{width:22px;height:22px}
.mi b{display:block;font-size:16.5px;font-weight:700}
.mi span{display:block;font-size:13px;color:var(--mu);margin-top:2px}
.mi .chev{margin-inline-start:auto;color:var(--mu);width:18px;height:18px}
[dir=rtl] .mi .chev{transform:scaleX(-1)}
.dw-foot{margin-top:18px;font-size:12.5px;color:var(--mu);text-align:center}
.bk{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink2);padding:8px 10px 8px 4px;border-radius:999px;margin-bottom:10px}
.bk svg{width:20px;height:20px}
[dir=rtl] .bk svg{transform:scaleX(-1)}
.sec h3{font-size:28px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
[dir=rtl] .sec h3{letter-spacing:0}
.sec .lead{color:var(--ink2);font-size:15px;line-height:1.6}
.card{background:var(--card);border-radius:22px;padding:18px;box-shadow:0 0 0 1px var(--line);margin-top:14px}
.acc-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#9C8CFF,#4C3BD9);color:#fff}
.acc-av svg{width:30px;height:30px}
.btns{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.btns .btn{justify-content:center}
.ul{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.ul li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2);line-height:1.5}
.ul li svg{width:18px;height:18px;flex:none;color:var(--acc);margin-top:2px}
.ab-logo{display:flex;justify-content:center;padding:10px 0 4px}
.ab-logo .logo{font-size:30px}.ab-logo .logo svg{width:40px;height:40px}
.about-t h4{font-size:24px;font-weight:800;line-height:1.25;margin-top:16px;letter-spacing:-.015em}
[dir=rtl] .about-t h4{letter-spacing:0;line-height:1.6}
.about-t p{font-size:15.5px;line-height:1.75;color:var(--ink2);margin-top:12px}
.about-t h5{font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-top:22px}
[dir=rtl] .about-t h5{letter-spacing:0;font-size:15px}
.about-t .vis{margin-top:6px;font-size:16px;line-height:1.7;color:var(--ink)}
.about-t .close{margin-top:22px;padding:16px;border-radius:18px;background:#0E0F1A;color:#fff;font-weight:700;font-size:16px;line-height:1.5}
.sup{display:flex;gap:14px;align-items:flex-start}
.sup i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accS);color:var(--acc);flex:none}
.sup i svg{width:21px;height:21px}
.sup b{display:block;font-size:16px}
.sup p{font-size:14px;color:var(--ink2);line-height:1.55;margin-top:3px}
.sup .btn{margin-top:12px;padding:9px 16px;font-size:14px}
/* the whole address always shows: where it and Copy do not fit on one line, Copy moves under it (18 Oct 2026) */
.mailbox{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin-top:10px;padding:3px 3px 3px 12px;border-radius:14px;background:var(--bg);font-size:14px;direction:ltr;justify-content:space-between}
.mailbox span{flex:1 1 auto;min-width:0;padding-block:7px;overflow-wrap:anywhere}
.mailbox button{flex:none;margin-left:auto;font-weight:700;color:var(--acc);font-size:13.5px;min-height:36px;padding:0 12px;border-radius:11px}
.dw .soc{flex-direction:column;align-items:flex-start}

/* every app's name: one premium serif for all, coloured from the app's own palette (C.nameVars; his ask, 17 Oct 2026) */
.nm{display:inline-block;max-width:100%;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;letter-spacing:.003em;font-variant-numeric:lining-nums;color:var(--n1,var(--ink));direction:ltr;text-align:start}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.nm{background:linear-gradient(110deg,var(--n1) 0%,var(--n1) 30%,var(--n2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}}
.mt b.nm,.zt b.nm,.rt b.nm,.r b.nm,.gs-t b.nm{display:inline-block;width:auto}
.mt b.nm{font-size:21px;line-height:1.2}
.rt b.nm,.r b.nm{font-size:17px;line-height:1.25}
.zt b.nm{font-size:clamp(30px,3.6vw,40px);font-weight:700;letter-spacing:-.005em;line-height:1.1;font-stretch:normal;font-family:'Playfair Display',Georgia,serif}
.gs-t b.nm{font-size:22px;line-height:1.2}
/* the USDT price and "for 6 months": an elegant italic serif beside the gold dinar price */
.pz span,.price span,.gs-price span{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:18.5px;letter-spacing:.012em;font-variant-numeric:lining-nums;color:var(--ink2)}
[dir=rtl] .pz span,[dir=rtl] .price span,[dir=rtl] .gs-price span{font-family:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif;font-style:normal;font-size:15.5px;letter-spacing:0}

/* the story: the card grows into it */
.sx{position:fixed;inset:0;z-index:100}
.sx-scrim{position:absolute;inset:0;background:rgba(15,15,25,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .45s}
.sx.on .sx-scrim{opacity:1}
.sx-card{position:fixed;overflow:hidden;background:#fff;box-shadow:0 40px 100px -30px rgba(0,0,0,.55)}
.sx-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}
.sx-hero{position:relative;overflow:hidden;background:#dfe0e6}
.sx-hero img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sx-hero.wide img{object-position:center}
.sx-body{padding:26px clamp(20px,5vw,56px) calc(40px + env(safe-area-inset-bottom,0px));opacity:0;transform:translateY(16px);transition:opacity .45s .18s,transform .55s .18s cubic-bezier(.2,.8,.2,1)}
.sx.on .sx-body{opacity:1;transform:none}
.sx-lab{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
[dir=rtl] .sx-lab{letter-spacing:0;font-size:14px}
.sx-body h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
[dir=rtl] .sx-body h2{letter-spacing:0;line-height:1.4}
.sx-band{margin-top:12px;font-size:17px;color:var(--ink2);line-height:1.5}
.zh{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:0 16px;margin-top:-58px;position:relative}
.zh>img{grid-column:1;grid-row:1;width:104px;height:104px;border-radius:26px;box-shadow:0 0 0 5px #fff,0 20px 40px -18px rgba(0,0,0,.5)}
.zt{grid-column:1/-1;grid-row:2;min-width:0;padding-top:16px}
.zt b{display:block;font-family:var(--disp);font-stretch:112%;font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;direction:ltr;text-align:start;line-height:1.05}
.zt span{display:block;color:var(--mu);font-size:14.5px;margin-top:3px}
.zh-act{grid-column:3;grid-row:1;display:flex;align-items:center;gap:10px;margin-bottom:6px}
/* Share on the app page (18 Oct 2026, his ask): a round button just before Get, in the app's own colour; it fills and
   "Link copied" rises above it for a moment */
.zs{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--sh,var(--acc));
  background:color-mix(in srgb,var(--sh,var(--acc)) 12%,transparent);transition:transform .15s,background .25s,color .25s}
.zs-i{display:grid;place-items:center}.zs svg{width:19px;height:19px}
.zs:hover{background:color-mix(in srgb,var(--sh,var(--acc)) 18%,transparent)}
.zs:active{transform:scale(.94)}
.zs.done{background:var(--sh,var(--acc));color:#fff}
.zs:focus-visible{outline:2px solid var(--sh,var(--acc));outline-offset:2px}
.zs-tip{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%,6px);white-space:nowrap;pointer-events:none;opacity:0;
  font:700 12.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:#fff;background:rgba(12,14,22,.84);padding:8px 12px;border-radius:99px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity .2s,transform .3s cubic-bezier(.2,.85,.25,1)}
[dir=rtl] .zs-tip{font-family:var(--arb);font-size:13px}
.zs.done .zs-tip{opacity:1;transform:translate(-50%,0)}
.zh + .gs-link{margin-top:12px}
.pz{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:20px;padding:14px 16px;border-radius:18px;background:var(--bg)}
.pz .gold{font-size:30px}
.pz span{font-size:13.5px;color:var(--mu)}
.pz em{font-style:normal;margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--acc);background:var(--accS);padding:5px 10px;border-radius:999px}
.buy{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px;margin-top:22px;border-radius:20px;background:var(--bg)}
.buy>img{width:60px;height:60px;border-radius:15px}
.buy .rt span{-webkit-line-clamp:1}
.price{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-top:12px;border-top:1px solid var(--line)}
.price b{font-size:24px}
.price span{font-size:13.5px;color:var(--mu)}
.price em{font-style:normal;margin-inline-start:auto;font-size:12.5px;font-weight:700;color:var(--acc);background:var(--accS);padding:5px 10px;border-radius:999px}
/* the 3 plans (his rule and card, 27 Oct 2026): 3 months full price, 6 months 20% off, 1 year 40% off and gold, in the
   Get sheet and on the app page; the badge in the app's own colour (--sh) */
.plans{display:grid;gap:8px;--pa:var(--sh,var(--acc,#4C3BD9))}
.plans .pl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:11px 14px;border-radius:16px;background:var(--gs-soft,#F2F3F7)}
.plans .pl-l,.plans .pl-r{display:flex;flex-direction:column;gap:5px;min-width:0}
.plans .pl-l{align-items:flex-start}
.plans .pl-t{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px}
.plans .pl-pm{font:700 13px/1.2 var(--body,system-ui),sans-serif;font-style:normal;letter-spacing:0;color:var(--pa)}
[dir=rtl] .plans .pl-pm{font-family:var(--arb,'IBM Plex Sans Arabic'),sans-serif;font-size:13.5px}
.plans .yr .pl-pm{color:#7A5A17}
.plans .pl-pm{white-space:nowrap}
@media (max-width:360px){.plans .pl{padding:10px 12px;column-gap:8px}.plans .pl-r b{font-size:20px}.plans .pl-pm{font-size:12.5px}.plans small{font-size:14.5px}}
.plans .pl-r{align-items:flex-end;text-align:end}
.plans .pl-l b{font:700 15.5px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink,#0B0D14)}
[dir=rtl] .plans .pl-l b{font-family:var(--arb,'IBM Plex Sans Arabic'),sans-serif;letter-spacing:0}
.plans .pl em{font:700 11.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;font-style:normal;letter-spacing:.02em;padding:5px 9px;border-radius:99px;margin:0;color:var(--pa);background:color-mix(in srgb,var(--pa) 12%,transparent);white-space:nowrap}
[dir=rtl] .plans .pl em{font-family:var(--arb,'IBM Plex Sans Arabic'),sans-serif;font-size:12px;letter-spacing:0}
.plans .pl-r b{font-size:22px;line-height:1.1;font-style:normal;white-space:nowrap}
.plans small{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:15.5px;line-height:1.1;letter-spacing:.012em;font-variant-numeric:lining-nums;color:var(--mu,#7A7F8C);white-space:nowrap}
[dir=rtl] .plans small{font-family:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif;font-style:normal;font-size:13.5px;letter-spacing:0}
.plans s{text-decoration-thickness:1.5px}
.plans .yr{background:linear-gradient(135deg,#FDF6E7,#F8EBCF);box-shadow:inset 0 0 0 1.5px rgba(185,138,46,.42)}
.plans .yr em{color:#7A5A17;background:#F3DFB2}
.pz.pp{display:grid;gap:10px;padding:12px}
.pz.pp .pl{background:var(--card,#fff)}
.pz.pp .yr{background:linear-gradient(135deg,#FDF6E7,#F8EBCF)}
.pz.pp>em{justify-self:start;margin:0}
/* "from" before the lowest plan's price in the store list and the buy box: plain, not gold */
.gold .fr{font:600 12.5px/1 var(--body,system-ui),sans-serif;font-style:normal;letter-spacing:0;color:var(--mu,#7A7F8C);vertical-align:.15em}
[dir=rtl] .gold .fr{font-family:var(--arb,'IBM Plex Sans Arabic'),sans-serif;font-size:13px}
.sx-p{margin-top:40px;max-width:640px}
.sx-p h3{font-size:22px;font-weight:800;letter-spacing:-.02em}
[dir=rtl] .sx-p h3{letter-spacing:0}
.sx-p p{margin-top:8px;font-size:16.5px;line-height:1.65;color:var(--ink2)}
.sx-p figure{margin-top:18px;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(0,0,0,.45)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--bg);font-size:13.5px;font-weight:600;color:var(--ink2)}
.chip svg{width:17px;height:17px}
.chip small{font-weight:500;color:var(--mu);margin-inline-start:4px}
.note{margin-top:26px;font-size:12.5px;color:var(--mu)}
.sx-x{position:absolute;top:14px;inset-inline-end:14px;z-index:5;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(10,10,22,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;transition:opacity .3s .25s}
.sx.on .sx-x{opacity:1}
.sx-x svg{width:18px;height:18px}
.r{display:flex;align-items:center;gap:12px;padding:9px;border-radius:14px;cursor:pointer}
.r:hover{background:var(--bg)}
.r img{width:44px;height:44px;border-radius:11px}
.r b{display:block;font-size:15px;direction:ltr;text-align:start}
.r span{display:block;font-size:13px;color:var(--mu)}

/* For iOS users: six steps, each a drawing of Safari on iOS 26 (Liquid Glass bars) */
.ios .ios-k{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#A65F4A;margin:4px 0 2px}
[dir=rtl] .ios .ios-k{letter-spacing:0;font-size:13.5px}
.ios h3.ios-t{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-weight:600;font-size:40px;line-height:1.02;letter-spacing:-.01em;margin-bottom:10px}
[dir=rtl] .ios h3.ios-t{font-family:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif;font-weight:700;font-size:31px;line-height:1.5}
.ios-ex{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:12.5px;color:var(--mu)}
.ios-ex span:first-child{font-weight:700;letter-spacing:.06em;text-transform:uppercase}
[dir=rtl] .ios-ex span:first-child{letter-spacing:0}
.ios-app{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-weight:700;color:var(--ink);direction:ltr;font-size:13.5px}
.ios-app img{width:26px;height:26px;border-radius:8px}
.ios-car{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-top:16px;padding-bottom:4px;overscroll-behavior-x:contain}
.ios-car::-webkit-scrollbar{display:none}
.ios-st{flex:0 0 100%;scroll-snap-align:center;background:var(--card);border-radius:26px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.ios-stage{display:grid;place-items:center;padding:24px 0 22px;background:radial-gradient(90% 70% at 18% 8%,rgba(156,140,255,.28),transparent 62%),radial-gradient(80% 60% at 92% 96%,rgba(226,176,138,.32),transparent 60%),linear-gradient(180deg,#F7F6FB,#EFEDF5)}
.ios-tx{padding:16px 20px 22px}
.ios-n{display:block;font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-style:italic;font-weight:600;font-size:34px;line-height:1;
  background:linear-gradient(115deg,#8A4636,#B9705A 30%,#E2B08A 55%,#8F4C3B);-webkit-background-clip:text;background-clip:text;color:transparent}
.ios-tx h4{font-family:'Cormorant Garamond','Playfair Display',Georgia,serif;font-weight:700;font-size:25px;line-height:1.12;margin-top:6px;text-wrap:balance}
[dir=rtl] .ios-tx h4{font-family:'Noto Naskh Arabic','IBM Plex Sans Arabic',serif;font-size:20px;line-height:1.6}
.ios-tx p{font-size:14.5px;line-height:1.6;color:var(--ink2);margin-top:6px}
.ios-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.ios-nav>button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:opacity .2s}
.ios-nav>button svg{width:18px;height:18px}
.ios-nav>button:disabled{opacity:.35;cursor:default}
[dir=rtl] .ios-nav>button svg{transform:scaleX(-1)}
.ios-dots{display:flex}
/* the dot stays small; the button around it is big enough for a thumb (32 px tall) */
.ios-dots button{position:relative;width:18px;height:32px;transition:width .3s}
.ios-dots button::before{content:'';position:absolute;inset:12px 5px;border-radius:9px;background:rgba(30,32,45,.18);transition:background .3s}
.ios-dots button.on{width:34px}
.ios-dots button.on::before{background:linear-gradient(90deg,#B9705A,#E2B08A)}
.ios-tip{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--ink2)}
.ios-tip i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accS);color:var(--acc);flex:none}
.ios-tip i svg{width:20px;height:20px}
.ios-tip b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
/* the phone drawing: every size in em, so it scales with --pw */
.ph{--pw:min(224px,64vw);width:var(--pw);aspect-ratio:9/19.5;font-size:calc(var(--pw)/22.4);border-radius:3.9em;padding:.6em;background:linear-gradient(150deg,#3A3D48,#0B0D14 46%,#2A2C35);
  box-shadow:inset 0 0 0 .12em rgba(255,255,255,.18),0 2.6em 4.4em -2em rgba(20,16,50,.55),0 .6em 1.4em -0.6em rgba(0,0,0,.4);font-family:-apple-system,'SF Pro Text','Plus Jakarta Sans',system-ui,sans-serif;color:#0B0D14}
[dir=rtl] .ph{font-family:-apple-system,'SF Arabic','IBM Plex Sans Arabic',system-ui,sans-serif}
.ph-s{display:block;position:relative;width:100%;height:100%;border-radius:3.3em;overflow:hidden;background:#F4F6F9;isolation:isolate}
.ph-sb{position:absolute;inset:0 0 auto;height:4.4em;display:flex;align-items:center;justify-content:space-between;padding:0 2.3em 0 2.7em;z-index:8}
.ph-sb b{font-size:1.42em;font-weight:600;letter-spacing:-.01em;direction:ltr}
.ph-sb span{display:flex;align-items:center;gap:.45em}
.ph-sb svg{height:1.15em;width:auto;fill:currentColor}
.ph-isl{position:absolute;top:1.05em;left:50%;width:8em;height:2.35em;border-radius:2em;background:#000;transform:translateX(-50%);z-index:9}
.ph-tint{position:absolute;inset:0 0 auto;height:4.4em;overflow:hidden;z-index:1}
.ph-tint img{width:100%;filter:blur(.9em) saturate(1.2);transform:scale(1.4);transform-origin:top}
.ph-pg{position:absolute;inset:4.4em 0 0;z-index:0}
.ph-pg img{width:100%;height:auto}
.ph-bar{position:absolute;left:.8em;right:.8em;bottom:2.5em;display:flex;align-items:center;gap:.45em;z-index:6}
.gl{background:rgba(255,255,255,.66);backdrop-filter:blur(.9em) saturate(1.8);-webkit-backdrop-filter:blur(.9em) saturate(1.8);box-shadow:inset 0 0 0 .1em rgba(255,255,255,.75),inset 0 -.2em .6em rgba(255,255,255,.35),0 .7em 1.6em -.7em rgba(0,0,0,.4)}
.ph-bar .gb{width:3.9em;height:3.9em;border-radius:50%;display:grid;place-items:center;flex:none;position:relative}
.ph-bar .gb svg{width:1.8em;height:1.8em}
[dir=rtl] .ph-bar .gb.bk2 svg{transform:scaleX(-1)}
.ph-bar .cap{flex:1;min-width:0;height:3.9em;border-radius:1.95em;display:flex;align-items:center;justify-content:center;position:relative;padding:0 .5em}
.ph-bar .cap span{font-size:1.02em;font-weight:600;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-hb{position:absolute;bottom:.75em;left:50%;width:12.5em;height:.48em;border-radius:1em;background:#0B0D14;transform:translateX(-50%);z-index:12}
.ph-dim{position:absolute;inset:0;background:rgba(10,12,20,.22);z-index:5}
.hi{animation:hiP 1.9s ease-in-out infinite}
@keyframes hiP{0%,100%{box-shadow:0 0 0 .2em #fff,0 0 0 .5em rgba(76,59,217,.55),0 .7em 1.6em -.7em rgba(0,0,0,.4)}50%{box-shadow:0 0 0 .2em #fff,0 0 0 .9em rgba(76,59,217,.22),0 .7em 1.6em -.7em rgba(0,0,0,.4)}}
.td{position:absolute;inset-inline-end:-.5em;bottom:-1.1em;width:2.8em;height:2.8em;border-radius:50%;background:rgba(255,255,255,.5);border:.2em solid #fff;box-shadow:0 0 0 .35em rgba(76,59,217,.4),0 .5em 1.2em rgba(0,0,0,.3);animation:tdP 1.9s ease-in-out infinite;pointer-events:none;z-index:2}
@keyframes tdP{0%,100%{transform:scale(.82)}45%{transform:scale(1)}}
.ph-menu{position:absolute;inset-inline-end:1em;bottom:7.8em;width:16em;border-radius:2.4em;padding:.7em;z-index:7;background:rgba(250,250,253,.86)}
.mr{display:flex;align-items:center;gap:.9em;min-height:3.7em;padding:.45em 1.1em;border-radius:1.6em;position:relative}
.mr svg{width:1.9em;height:1.9em;flex:none}
.mr b{font-size:1.3em;font-weight:600;line-height:1.2;min-width:0}
.mr.hi{background:#fff}
.ph0{display:block;flex:none;width:1.8em;height:1.8em;border-radius:.55em;background:rgba(11,13,20,.1)}
.ln{display:block;height:.85em;border-radius:1em;background:rgba(11,13,20,.11);width:var(--w,60%)}
.ph-sh{position:absolute;left:.55em;right:.55em;bottom:.55em;top:11.5em;border-radius:3em;padding:1.6em 1.1em;z-index:7;background:rgba(246,246,250,.94)}
.sh-h{display:flex;align-items:center;gap:1em}
.sh-h>img{width:4.6em;height:4.6em;border-radius:1.15em;flex:none}
.sh-h div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35em}
.sh-h b{font-size:1.35em;font-weight:700;direction:ltr;text-align:start}
.sh-h small{font-size:1.1em;color:#7A7F8C;direction:ltr;text-align:start}
.sh-x{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;flex:none}
.sh-x svg{width:1.4em;height:1.4em}
.sh-ppl{display:flex;justify-content:space-between;margin:1.7em .3em 1.5em}
.sh-ppl i{width:4.4em;height:4.4em;border-radius:50%;background:rgba(11,13,20,.09)}
.sh-g{display:block;background:#fff;border-radius:1.8em;padding:.3em;margin-top:.9em}
.sh-g .mr{justify-content:space-between;min-height:3.9em;padding:.5em .8em}
.sh-g .mr b{font-size:1.1em}
.sh-g .mr+.mr{box-shadow:0 -.08em 0 rgba(11,13,20,.08)}
.sh-g .mr.hi{box-shadow:none}
.ph-add{position:absolute;inset:4.6em 0 0;border-radius:3em 3em 0 0;z-index:7;background:#F2F2F7;padding:1.4em 1.3em}
.ad-top{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.ad-top b{flex:1;min-width:0;font-size:.98em;font-weight:700;line-height:1.15;text-align:center}
.ad-x{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;flex:none}
.ad-x svg{width:1.5em;height:1.5em}
.ad-ok{height:3.2em;padding:0 1.2em;border-radius:1.8em;display:grid;place-items:center;background:#0A84FF;color:#fff;flex:none;position:relative}
.ad-ok span{font-size:1.2em;font-weight:700}
.ad-ok .td{inset-inline-end:-1.2em;bottom:-1.9em}
.ad-c{background:#fff;border-radius:1.8em;padding:1.2em;margin-top:1.6em;display:flex;gap:1.1em;align-items:center}
.ad-c>img{width:5.6em;height:5.6em;border-radius:1.35em;flex:none;box-shadow:0 0 0 .08em rgba(0,0,0,.08)}
.ad-c div{flex:1;min-width:0;display:flex;flex-direction:column;gap:.55em}
.ad-c b{font-size:1.4em;font-weight:600;padding-bottom:.35em;box-shadow:0 .07em 0 rgba(11,13,20,.12);direction:ltr;text-align:start}
.ad-c small{font-size:1.1em;color:#7A7F8C;direction:ltr;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-t{background:#fff;border-radius:1.8em;padding:0 1.2em;margin-top:1em;height:4.4em;display:flex;align-items:center;justify-content:space-between;gap:.8em}
.ad-t.hi{background:#fff}
.ad-t b{font-size:1.2em;font-weight:600;line-height:1.2}
.tg{width:4.6em;height:2.8em;border-radius:2em;background:#34C759;position:relative;flex:none}
.tg::after{content:"";position:absolute;top:.25em;inset-inline-end:.25em;width:2.3em;height:2.3em;border-radius:50%;background:#fff;box-shadow:0 .15em .4em rgba(0,0,0,.2)}
.ad-n{display:flex;flex-direction:column;gap:.6em;margin:1.2em .4em 0}
.ph-home{position:absolute;inset:0;z-index:3;color:#fff;background:radial-gradient(120% 70% at 15% 5%,#A796FF,transparent 58%),radial-gradient(110% 70% at 95% 100%,#E2B08A,transparent 58%),linear-gradient(165deg,#5A47E6,#22195C 70%)}
.ph.dk .ph-sb{color:#fff}
.ph.dk .ph-hb{background:#fff}
.hm-g{position:absolute;top:6.6em;left:1.7em;right:1.7em;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.7em .9em;justify-items:center}
.hm-a{display:flex;flex-direction:column;align-items:center;gap:.5em;width:100%}
.hm-a i{width:4.7em;height:4.7em;border-radius:1.25em;background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 .08em rgba(255,255,255,.35)}
.hm-a .ln{background:rgba(255,255,255,.35);width:70%;height:.7em}
.hm-a.me img{width:4.7em;height:4.7em;border-radius:1.25em;box-shadow:0 0 0 .22em rgba(255,255,255,.9),0 0 2.4em .3em rgba(226,176,138,.85);animation:meP 2.2s ease-in-out infinite}
.hm-a.me b{font-size:1.05em;font-weight:600;direction:ltr;white-space:nowrap;text-shadow:0 .1em .4em rgba(0,0,0,.4)}
@keyframes meP{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.hm-dk{position:absolute;left:.9em;right:.9em;bottom:1.9em;height:7em;border-radius:2.8em;display:flex;align-items:center;justify-content:space-around;padding:0 .8em;background:rgba(255,255,255,.22);backdrop-filter:blur(.9em);-webkit-backdrop-filter:blur(.9em);box-shadow:inset 0 0 0 .1em rgba(255,255,255,.3)}
.hm-dk i{width:4.7em;height:4.7em;border-radius:1.25em;background:rgba(255,255,255,.28)}
.hm-sr{position:absolute;left:50%;bottom:10.2em;transform:translateX(-50%);height:2.6em;padding:0 1.3em;border-radius:2em;display:flex;align-items:center;gap:.5em;background:rgba(255,255,255,.22)}
.hm-sr svg{width:1.2em;height:1.2em}
.hm-sr .ln{width:3.4em;background:rgba(255,255,255,.5);height:.7em}
/* Website support: the customer's requests, each one a chat (his ask, 17 Oct 2026) */
.hp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.hp-top .bk{margin-bottom:0}
.hp-new{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--acc);color:#fff;font-weight:700;font-size:14px}
.hp-new svg{width:17px;height:17px}
.hp-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.hp-it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;width:100%;padding:15px 16px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-align:start;transition:transform .15s}
.hp-it:active{transform:scale(.985)}
.hp-it b{font-size:15.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-it small{font-size:12px;color:var(--mu);white-space:nowrap;align-self:center}
.hp-it span.ls{grid-column:1/-1;font-size:13.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-it .pill{grid-column:1/-1;justify-self:start}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:3px 10px;border-radius:999px;letter-spacing:.02em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.open{background:var(--accS);color:var(--acc)}
.pill.prog{background:rgba(214,140,30,.14);color:#A8620B}
.pill.done{background:rgba(30,150,90,.13);color:#17784A}
.hp-head{padding:6px 2px 12px;border-bottom:1px solid var(--line)}
.hp-head h3{font-size:21px;line-height:1.25;margin:0 0 6px;letter-spacing:-.01em}
.hp-msgs{display:flex;flex-direction:column;gap:12px;padding:16px 0 8px}
.bub{max-width:86%;display:flex;flex-direction:column;gap:4px}
.bub p{margin:0;padding:11px 14px;border-radius:20px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
.bub small{font-size:11.5px;color:var(--mu);padding:0 6px}
.bub.me{align-self:flex-end;align-items:flex-end}
.bub.me p{background:var(--acc);color:#fff;border-end-end-radius:6px}
.bub.them{align-self:flex-start}
.bub.them p{background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ink);border-end-start-radius:6px}
.who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--ink2);padding:0 4px}
.who svg{width:18px;height:18px}
.sys{align-self:center;text-align:center;font-size:12.5px;color:var(--mu);background:var(--card);box-shadow:0 0 0 1px var(--line);padding:6px 12px;border-radius:999px;max-width:92%}
.hp-mail{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mu);margin-top:4px}
.hp-mail svg{width:15px;height:15px;flex:none}
.hp-comp{position:sticky;bottom:calc(-28px - env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px;padding:12px 0 calc(28px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-28px - env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(242,243,247,0),var(--bg) 28%)}
.hp-comp textarea{flex:1;min-width:0;min-height:46px;max-height:130px;resize:none;border:0;border-radius:23px;padding:12px 16px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:inherit;font-size:15px;line-height:1.45;color:var(--ink)}
.hp-send{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;flex:none}
.hp-send svg{width:20px;height:20px}
[dir=rtl] .hp-send svg{transform:scaleX(-1)}
.hp-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.hp-form label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.hp-form input,.hp-form textarea{border:0;border-radius:16px;padding:13px 15px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.hp-form textarea{min-height:140px;resize:vertical}
.hp-form .btn{justify-content:center}
.hp-err{font-size:13px;color:#B4532A;margin:0}

/* the Get sheet link to these steps */
.gs-ios{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:38px;padding:4px 0 2px;font-size:13.5px;font-weight:700;color:var(--acc);text-align:center}
.gs-ios svg{width:16px;height:16px}
[dir=rtl] .gs-ios svg{transform:scaleX(-1)}

@media (max-width:1060px){.sg{grid-template-columns:repeat(2,minmax(0,1fr));--sh:calc((100cqw - 24px)/2*1.25)}.rows{grid-template-columns:repeat(2,minmax(0,1fr))}.cats{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ft-brand{grid-column:1/-1}}
@media (max-width:760px){.band{grid-template-columns:minmax(0,1fr)}.band .big{display:none}}
@media (max-width:700px){.sbar{top:calc(env(safe-area-inset-top,0px) + 60px)}.hd-in{height:60px;gap:8px}.hd .langbtn{padding:0 12px}.col{width:clamp(120px,30vw,170px)}.quick{display:none}
  .sg{grid-template-columns:minmax(0,1fr);gap:26px}.st,.st.w2{grid-column:auto}.st-box{height:auto;aspect-ratio:4/5}.st.w2 .st-im img{object-position:top center}.zh>img{width:84px;height:84px;border-radius:22px}.zh{margin-top:-46px}
  .rows{grid-template-columns:minmax(0,1fr)}.cats{gap:12px}.cat{min-height:150px;padding:16px}.stack img{width:38px;height:38px}.fan{display:none}
  .ft-g{grid-template-columns:minmax(0,1fr)}.ft2{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}}

/* ── the live site (17 Oct 2026): the design above, plus the parts that talk to the Codex account ── */
.hd .av{font:700 17px/1 var(--body)}
.hd .av.in{background:linear-gradient(135deg,#7C6CFF,#3B2FA8)}
.hd .av .dot,.mi .dot{position:absolute;top:2px;inset-inline-end:2px;width:11px;height:11px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px var(--bg)}
.hd .av,.mi i{position:relative}
.sx-ver{display:block;font-size:12.5px;color:var(--mu);margin-top:6px}
/* the Get sheet: Android version line, the account line, how paying works */
.gs-meta{font-size:12.5px;color:var(--gs-mu);margin:-4px 4px 0;line-height:1.5}
.gs-own{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#17734B;background:rgba(23,115,75,.09);border-radius:12px;padding:10px 12px}
.gs-own svg{width:18px;height:18px;flex:none}
.gs-how{font-size:13px;color:var(--gs-mu);line-height:1.55;padding:2px 4px 0}
/* forms in the menu */
.fm{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.fm label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink2)}
.fm input,.fm textarea,.fm select{border:0;border-radius:16px;padding:13px 15px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:inherit;font-size:15px;font-weight:500;color:var(--ink);width:100%;min-width:0}
.fm input:focus,.fm textarea:focus,.fm select:focus{outline:2px solid var(--acc);outline-offset:0}
.fm input[readonly]{background:transparent;color:var(--ink2)}
.fm textarea{min-height:120px;resize:vertical}
.fm .btn{justify-content:center}
.fm .row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.fm .opt{font-weight:500;color:var(--mu)}
.pw{position:relative;display:block}
.pw input{padding-inline-end:48px}
.pw button{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--mu)}
.pw button svg{width:20px;height:20px}
.msg{font-size:13.5px;line-height:1.5;margin:0;color:#B4532A}
/* the Flip card sign-in (js/signin-card.js, his pick 20 Oct 2026): Arabic in the site's Arabic faces */
[dir=rtl]{--sc-fb:var(--arb);--sc-fd:var(--ard)}
#acc .sc-stage{margin-top:16px}#acc .sc-card .sc-h{font-size:23px}[dir=rtl] #acc .sc-card .sc-h{letter-spacing:0;line-height:1.35}
.msg.ok{color:#17734B}
.msg:empty{display:none}
.lnk{font-weight:700;color:var(--acc);font-size:14px;padding:6px 0;min-height:36px;text-align:center}
.lnk.mu{color:var(--mu);font-weight:600;font-size:13px}
.sw{display:flex;padding:4px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);margin-top:16px}
.sw button{flex:1;padding:10px 12px;border-radius:999px;font-weight:700;font-size:14px;color:var(--ink2);text-align:center;transition:background .25s,color .25s}
.sw button.on{background:var(--acc);color:#fff}
.ld{display:flex;align-items:center;gap:10px;color:var(--mu);font-size:14px;padding:18px 4px}
.ld::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid var(--accS);border-top-color:var(--acc);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* the signed-in account */
.me{display:flex;align-items:center;gap:14px}
.me .acc-av{font:800 24px/1 var(--body);flex:none}
.me b{display:block;font-size:17px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me>div span{display:block;font-size:13.5px;color:var(--mu);direction:ltr;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.me>div span[dir=auto]{direction:inherit}
.me>div span{white-space:normal;overflow-wrap:anywhere}   /* a long email and the member-since line wrap; they were cut at 360 px */
.me>div{min-width:0}
.h5{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:22px 4px 0}
[dir=rtl] .h5{letter-spacing:0}
.ma{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.ma-it{background:var(--card);border-radius:20px;padding:14px;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;gap:12px}
.ma-top{display:flex;align-items:center;gap:12px}
.ma-top img{width:48px;height:48px;border-radius:13px;flex:none}
.ma-top>div{flex:1;min-width:0}
.ma-top .nm{font-size:16.5px;line-height:1.25}
.ma-end{display:block;font-size:13px;color:var(--ink2);margin-top:3px}
.ma-end.soon{color:#B4532A;font-weight:700}
.ma-act{display:flex;flex-wrap:wrap;gap:8px}
.ma-act .btn{padding:9px 15px;font-size:13.5px;box-shadow:inset 0 0 0 1px var(--line)}
.ma-act .btn.pri{box-shadow:none}
.ma-empty{font-size:14px;color:var(--ink2);line-height:1.55}
.rows-b{display:flex;flex-direction:column;margin-top:14px;background:var(--card);border-radius:20px;box-shadow:0 0 0 1px var(--line);overflow:hidden}
.rows-b>*{display:flex;align-items:center;gap:12px;padding:15px 16px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line);width:100%;text-align:start}
.rows-b>*:last-child{border-bottom:0}
.rows-b svg{width:20px;height:20px;flex:none;color:var(--acc)}
.rows-b .chev{margin-inline-start:auto;color:var(--mu);width:18px;height:18px}
.rows-b .red,.rows-b .red svg{color:#B4532A}
/* Coming soon: the apps on the way and the votes */
.up{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.up-it{background:var(--card);border-radius:20px;padding:16px;box-shadow:0 0 0 1px var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.up-it b{font-size:16px;font-weight:800}
.up-it p{grid-column:1;font-size:13.5px;color:var(--ink2);line-height:1.5}
.up-st{grid-column:1;justify-self:start;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accS);color:var(--acc)}
.vote{grid-column:2;grid-row:1/span 3;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:58px;padding:10px 8px;border-radius:16px;background:var(--bg);font-weight:800;font-size:15px;color:var(--ink2);transition:background .2s,color .2s,transform .15s}
.vote svg{width:20px;height:20px}
.vote.on{background:var(--acc);color:#fff}
.vote:active{transform:scale(.95)}
.vote:disabled{opacity:.6}
/* support chat: a reply not read yet, the time under each message */
.hp-it.unread{box-shadow:0 0 0 2px var(--acc)}
.hp-it .ls svg{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-inline-end:5px}
.hp-it .nw{grid-column:1/-1;justify-self:start;font-size:12px;font-weight:800;color:var(--acc)}
.hp-err{font-size:13.5px;color:#B4532A;margin:8px 0 0}
.hp-empty{margin-top:14px;font-size:14.5px;color:var(--ink2);line-height:1.6}
.hp-comp textarea:disabled,.hp-send:disabled{opacity:.6}
.need{margin-top:14px}
.need .btn{margin-top:12px}
/* a short message at the bottom of the screen */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);z-index:400;max-width:min(92vw,440px);padding:12px 18px;border-radius:16px;background:#14161F;color:#fff;font-size:14px;font-weight:600;line-height:1.45;box-shadow:0 18px 40px -16px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .35s cubic-bezier(.2,.85,.25,1);pointer-events:none;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{background:#8E2F1C}
/* the 6-digit email code box (js/email-confirm.js draws it) */
.ec-overlay{position:fixed;inset:0;z-index:2147482000;background:rgba(11,13,20,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.ec-card{width:100%;max-width:400px;background:var(--card);color:var(--ink);border-radius:26px;padding:24px 22px;box-shadow:0 30px 80px -24px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px}
.ec-card h3{font-size:22px;font-weight:800;letter-spacing:-.01em}
.ec-lead,.ec-hint{font-size:14px;color:var(--ink2);line-height:1.5}
.ec-email{font-weight:700;font-size:15px;overflow-wrap:anywhere}
.ec-code{margin-top:6px;border:0;border-radius:16px;padding:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:700 26px/1 var(--body);letter-spacing:.4em;text-align:center;color:var(--ink);width:100%;direction:ltr}
.ec-note{font-size:13.5px;color:#B4532A;min-height:1.2em;margin:0}
.ec-note.good{color:#17734B}
.ec-card .btn{display:flex;justify-content:center;width:100%;border:0;cursor:pointer}
.ec-card .btn-primary{background:var(--acc);color:#fff;font-weight:700;font-size:15px;padding:13px 22px;border-radius:999px}
.ec-card .btn-ghost{background:transparent;color:var(--acc);font-weight:700;font-size:14px;padding:10px;width:auto}
.ec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ec-link{color:var(--mu);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.ec-card button:disabled{opacity:.55}
@media (max-width:420px){.fm .row2{grid-template-columns:minmax(0,1fr)}}