/* ==========================================================================
   Doctor Pay — «نبض الشبكة»
   Arabic-first, logical properties everywhere so the EN (ltr) build mirrors.
   Only transform / opacity are animated on scroll.
   ========================================================================== */

/* Cairo, served from this site (SIL Open Font License 1.1, The Cairo Project Authors). One variable file per script
   subset, weights 300-800 in each; the same three files Google Fonts v31 sends, so the look is unchanged and
   no request leaves docpayapp.com for a font. Sources and sizes: public/website/fonts/SOURCES.txt. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/website/fonts/cairo-v31-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Cairo';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/website/fonts/cairo-v31-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:300 800;font-display:swap;
  src:url(/website/fonts/cairo-v31-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --red:#C8102E; --red-hot:#E3203E; --red-deep:#8E0B21; --red-dark:#5E0716;
  --ink:#0A0A0B; --ink-1:#111111; --ink-2:#161618; --ink-3:#1F1F22; --ink-4:#2A2A2E;
  --paper:#FFFFFF; --paper-2:#F4F4F5; --grey-1:#E6E6E9; --grey-2:#C4C4CA; --grey-3:#85858D; --grey-4:#55555C;
  --green:#0E9F6E;
  --text-d:#F3F3F4; --muted-d:#A7A7AF; --line-d:rgba(255,255,255,.11);
  --text-l:#111111; --muted-l:#5C5C63; --line-l:rgba(17,17,17,.1);
  --f:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --pad:clamp(16px,5vw,72px);
  --maxw:1380px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --fs-display:clamp(42px,6.3vw,116px);
  --fs-h2:clamp(34px,5.2vw,84px);
  --fs-h3:clamp(21px,1.9vw,28px);
  --fs-body:clamp(16px,1.1vw,18px);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{background:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.intro{overflow:hidden}
body{font-family:var(--f);font-size:var(--fs-body);line-height:1.75;color:var(--text-d);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px;border-radius:6px}
/* red-hot is the red chapter's own colour, so there the ring is 1.3:1 against the page and cannot be seen: it is
   white in that chapter (and in the bar over it), and the white form card inside keeps the red one */
[data-tone=red] :focus-visible{outline-color:#fff}
.card-form :focus-visible{outline-color:var(--red-hot)}
/* the skip link's targets take focus from a script: the whole page body must not light up with a ring */
#main:focus,#legalDoc:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;inset-inline-start:16px;z-index:200;background:#fff;color:#111;padding:10px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
bdi,[dir=ltr]{unicode-bidi:isolate}
.nw{white-space:nowrap}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;transition:opacity .4s}
main,.foot{position:relative;z-index:1}
section{position:relative;z-index:1}
/* each chapter clips its own sideways overflow (body clip propagates to the viewport and does not stop a phone from widening its layout viewport) */
main > section,.foot{overflow-x:clip}
[data-tone=light]{background:var(--paper-2);color:var(--text-l)}
[data-tone=red]{background:var(--red);color:#fff}

/* ---------- opening ---------- */
.ecg{position:fixed;inset:0;z-index:2;pointer-events:none;display:none}
html.intro .ecg{display:block}
.ecg svg{width:100%;height:100%;overflow:visible}
.ecg path{fill:none;stroke:var(--red-hot);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(227,32,62,.95)) drop-shadow(0 0 18px rgba(227,32,62,.5))}
.ecg svg{position:absolute;inset:0}
/* first-paint heartbeat: the cover slides off (transform, on the compositor), then the line beats (opacity) */
.ecg-cover{position:absolute;inset:0 -160px;background:linear-gradient(to left,rgba(10,10,11,0),#0A0A0B 160px);animation:ecgdraw 1.25s cubic-bezier(.65,0,.35,1) .12s both;will-change:transform}
[dir=ltr] .ecg-cover{background:linear-gradient(to right,rgba(10,10,11,0),#0A0A0B 160px);animation-name:ecgdraw-ltr}
@keyframes ecgdraw{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes ecgdraw-ltr{from{transform:translateX(0)}to{transform:translateX(100%)}}
.ecg-beat{opacity:0;will-change:opacity;animation:lubdub 1.15s ease-out 1.4s infinite}
.ecg-beat path{stroke:#FF6A7E;stroke-width:3;filter:drop-shadow(0 0 10px rgba(255,70,95,1)) drop-shadow(0 0 30px rgba(227,32,62,.8))}
@keyframes lubdub{0%{opacity:0}9%{opacity:1}24%{opacity:.15}33%{opacity:.8}58%,100%{opacity:0}}
html.intro .nav,html.intro .hero-copy,html.intro .net,html.intro .hint,html.intro .rail{opacity:0}
html.intro #term,html.intro .rig .glow,html.intro .floor{opacity:0}

/* ---------- the heartbeat glyph that precedes every chapter label ---------- */
.beat{display:inline-block;width:34px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M0 8h9l2-3 3 9 4-13 3 10 2-3h11' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M0 8h9l2-3 3 9 4-13 3 10 2-3h11' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:beat 1.8s ease-in-out infinite}
[dir=rtl] .beat{transform:scaleX(-1);animation-name:beat-rtl}
@keyframes beat{0%,55%,100%{transform:scaleY(1)}8%{transform:scaleY(1.45)}16%{transform:scaleY(.85)}24%{transform:scaleY(1.2)}34%{transform:scaleY(1)}}
@keyframes beat-rtl{0%,55%,100%{transform:scale(-1,1)}8%{transform:scale(-1,1.45)}16%{transform:scale(-1,.85)}24%{transform:scale(-1,1.2)}34%{transform:scale(-1,1)}}

.label{display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--red-hot);margin-bottom:18px;line-height:1.4}
[data-tone=light] .label{color:var(--red)}
.label--light{color:#fff!important}
.label--quiet{color:var(--muted-d);font-weight:600;letter-spacing:.02em}
[data-tone=light] .label--quiet{color:var(--grey-3)}
.h2{font-size:var(--fs-h2);font-weight:800;line-height:1.1;margin:0 0 22px;text-wrap:balance}
.h2--xl{font-size:clamp(44px,5.8vw,104px);line-height:1.08}

/* split words: whole words only (never letters — Arabic must stay joined) */
.ln{display:block}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .02em .2em;margin:-.1em -.02em -.2em}
.wi{display:inline-block}
/* chapters off screen keep their endless loops paused (set by an IntersectionObserver) */
.idle *,.idle *::before,.idle *::after{animation-play-state:paused!important}

/* ---------- hardware keys ---------- */
.key{position:relative;top:0;display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:56px;padding-inline:26px;border-radius:16px;font-weight:700;font-size:17px;line-height:1;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#DC1C3A 0%,var(--red) 55%,#B20D27 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.18),0 5px 0 #7A0718,0 16px 30px -10px rgba(200,16,46,.7);
  transition:top .1s,box-shadow .1s,background .2s}
.key:active{top:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 1px 0 #7A0718,0 6px 14px -8px rgba(200,16,46,.6)}
.key .ico{width:20px;height:20px;stroke-width:2}
[dir=ltr] .key .ico{transform:scaleX(-1)}
.key--ghost{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 5px 0 rgba(255,255,255,.07)}
.key--ghost:active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 1px 0 rgba(255,255,255,.07)}
.key--ink{background:linear-gradient(180deg,#26262A,#121213 60%,#0A0A0B);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 5px 0 #000,0 18px 30px -12px rgba(0,0,0,.7)}
.key--ink:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 0 #000}
.key--ghost-ink{color:var(--ink-1);background:#fff;box-shadow:inset 0 0 0 1.5px var(--grey-1),0 4px 0 var(--grey-1)}
.key--sm{height:44px;padding-inline:18px;font-size:15px;border-radius:13px}
.key--block{width:100%}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;inset-inline:0;z-index:50;color:#fff;transition:background .35s,color .35s,box-shadow .35s}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);height:76px;display:flex;align-items:center;gap:24px}
.nav.scrolled{background:rgba(10,10,11,.74);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line-d)}
.nav[data-tone=light]{color:var(--ink-1)}
.nav[data-tone=light].scrolled{background:rgba(250,250,251,.82);box-shadow:0 1px 0 var(--line-l)}
.nav[data-tone=red].scrolled{background:rgba(150,9,30,.8);box-shadow:0 1px 0 rgba(255,255,255,.14)}
.nav[data-tone=red] .nav-join{background:#fff;color:var(--red);box-shadow:0 4px 0 rgba(0,0,0,.25)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:44px;height:auto}
.brand-name b{display:block;font-size:19px;font-weight:800;line-height:1.4}
.brand-name small{display:block;font-size:10px;font-weight:700;opacity:.55;letter-spacing:.18em;line-height:1.2;direction:ltr;text-align:start}
/* «باي» has deep descender dots: the Latin line needs its own room or the dots sit on «DOCTOR PAY» */
[lang=ar] .brand-name b{line-height:1.25}
[lang=ar] .brand-name small{margin-top:7px}
.links{display:flex;gap:2px;margin-inline-start:auto}
.links a{position:relative;padding:8px 12px;font-size:15px;font-weight:600;border-radius:10px;opacity:.74;transition:opacity .2s}
.links a:hover,.links a.on{opacity:1}
.links a.on::after{content:"";position:absolute;inset-inline:12px;bottom:1px;height:2px;border-radius:2px;background:var(--red-hot)}
.nav[data-tone=red] .links a.on::after{background:#fff}
.nav-end{display:flex;align-items:center;gap:12px}
.lang{height:40px;min-width:44px;padding-inline:12px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 1px currentColor;opacity:.8}
.lang:hover{opacity:1}
.burger{display:none;width:44px;height:44px;border-radius:12px;place-items:center;align-content:center;gap:6px;box-shadow:inset 0 0 0 1px currentColor}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--e-out)}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:rgba(10,10,11,.97);display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.open{opacity:1;visibility:visible}
.menu-links a{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,8vw,46px);font-weight:800;line-height:1.55;color:#fff;opacity:0;transform:translateY(24px);transition:opacity .5s var(--e-out),transform .6s var(--e-out);transition-delay:calc(var(--i)*45ms)}
.menu-links a small{font-size:13px;font-weight:700;color:var(--red-hot)}
.menu.open .menu-links a{opacity:1;transform:none}
.menu-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-d)}
.menu-hot{display:flex;flex-direction:column;color:var(--muted-d);font-size:14px}
.menu-hot b{font-size:30px;color:#fff;font-weight:800}

/* ---------- cursor + spotlight (desktop only) ---------- */
.cursor{display:none}
html.has-cursor .cursor{display:block}
html.has-cursor body,html.has-cursor a,html.has-cursor button,html.has-cursor label{cursor:none}
html.has-cursor input,html.has-cursor select{cursor:text}
.c-dot,.c-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:95}
.c-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--red-hot)}
.c-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid rgba(227,32,62,.6);transition:width .25s var(--e-out),height .25s var(--e-out),margin .25s var(--e-out),background .25s,border-color .25s}
html.cur-hover .c-ring{width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(227,32,62,.1);border-color:rgba(227,32,62,.9)}
.spot{position:fixed;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:radial-gradient(closest-side,rgba(200,16,46,.13),rgba(200,16,46,0));pointer-events:none;z-index:0;opacity:0;transition:opacity .6s}
html.has-cursor .spot{opacity:1}

/* ==========================================================================
   1. HOME — the terminal story
   ========================================================================== */
.story{height:calc(100svh + 6 * 82svh)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.stage-in{position:relative;height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:26px}
.copy{position:relative;z-index:4;display:grid;align-items:center;padding-top:50px}
.copy>*{grid-area:1/1}
.hero-copy{align-self:center}
.kicker{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:600;color:var(--muted-d);margin-bottom:14px}
.kicker .beat{color:var(--red-hot)}
.display{font-size:var(--fs-display);font-weight:800;line-height:1.06;margin:0 0 24px;text-wrap:balance}
.display .ln:nth-child(2){color:var(--red-hot)}
.lede{font-size:clamp(17px,1.35vw,21px);color:var(--muted-d);max-width:31em;margin-bottom:32px;line-height:1.85}
.ctas{display:flex;gap:14px;flex-wrap:wrap}
.caps{display:grid;align-items:center}
.caps>.cap{grid-area:1/1}
.cap{opacity:0;visibility:hidden}
.cap-n{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;color:var(--red-hot);letter-spacing:.06em}
.cap-n::after{content:"";width:48px;height:1.5px;background:currentColor;opacity:.6}
.cap-t{font-size:clamp(34px,4.6vw,74px);font-weight:800;line-height:1.1;margin:12px 0 16px;text-wrap:balance}
.cap-d{font-size:clamp(17px,1.3vw,20px);color:var(--muted-d);max-width:28em;line-height:1.85}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-d);background:rgba(255,255,255,.04);font-size:14px;font-weight:600}
.chip .ico{width:17px;height:17px;color:var(--red-hot)}

.rig{position:relative;z-index:2;height:100%;display:grid;place-items:center;perspective:1800px;container-type:size}
.glow{position:absolute;width:min(92cqw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(200,16,46,.30),rgba(200,16,46,.08) 55%,rgba(200,16,46,0));pointer-events:none}
.term-move,.term-float,.term-tilt,.term{transform-style:preserve-3d}
.term-move{position:relative;will-change:transform}
.term-float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.term{position:relative;height:min(76svh,720px,90cqh);aspect-ratio:456/1172}
/* the turn (chapter 06). Each face has its own transform, so it is its own flat plane and stacking context: every
   z-indexed part of the front (body, screen, paper, meter, NFC) turns and hides WITH the front. Before, those parts
   stacked in .term instead, and an engine that did not cull them drew the mirrored front over the back, the back
   showing through the front's empty screen window. The two faces sit 1px apart (never coplanar), and the face turned
   away is not painted at all: site.js sets .is-back at the edge-on moment (turn + pointer tilt). */
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.front{transform:translateZ(.5px)}
.face.back{transform:rotateY(180deg) translateZ(.5px)}
.term:not(.is-back)>.face.back,.term.is-back>.face.front{visibility:hidden}
.face.back img{width:100%;height:100%;object-fit:contain}
.t-body{position:relative;z-index:1;display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}
.screen{position:absolute;left:11.842%;top:32.509%;width:76.096%;height:60.836%;border-radius:.877%/.341%;overflow:hidden;background:#F2F2F4;z-index:0}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.screen img.on{opacity:1}
.screen img.glass{opacity:.9;z-index:4;pointer-events:none}
.tap{position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;margin:-9% 0 0 -9%;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.55) 0 26%,rgba(200,16,46,.2) 27% 58%,rgba(200,16,46,0) 60%);opacity:0;z-index:3;pointer-events:none}
.okring{position:absolute;left:49.3%;top:26.5%;width:30%;aspect-ratio:1;margin:-15% 0 0 -15%;border-radius:50%;border:3px solid var(--green);opacity:0;z-index:3;pointer-events:none}
.spec{position:absolute;inset:-10% -80%;background:linear-gradient(104deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 58%);z-index:5;pointer-events:none}
.paper-win{position:absolute;left:17.105%;width:65.789%;bottom:75.597%;height:130%;overflow:hidden;z-index:3;pointer-events:none;container-type:inline-size}
.paper-win::after{content:"";position:absolute;inset-inline:0;bottom:0;height:5cqi;background:linear-gradient(to top,rgba(0,0,0,.38),rgba(0,0,0,0));z-index:2}
.nfc{position:absolute;left:20%;width:60%;top:1.5%;aspect-ratio:1;z-index:7;opacity:0;visibility:hidden;pointer-events:none}
.nfc i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 18px rgba(227,32,62,.9),inset 0 0 14px rgba(227,32,62,.6);opacity:0;animation:ring 1.8s cubic-bezier(.2,.6,.3,1) infinite}
.nfc i:nth-child(2){animation-delay:.6s}.nfc i:nth-child(3){animation-delay:1.2s}
@keyframes ring{0%{transform:scale(.2);opacity:0}15%{opacity:1}100%{transform:scale(1.3);opacity:0}}
.meter{position:absolute;left:22%;top:6.3%;width:56%;aspect-ratio:1.586;border-radius:7%/11%;background:linear-gradient(145deg,#FBFBFC,#D9D9DE);box-shadow:0 14px 30px -8px rgba(0,0,0,.65),inset 0 1px 0 #fff;z-index:6;opacity:0;visibility:hidden;container-type:inline-size;color:#111;padding:8cqi 9cqi;display:flex;flex-direction:column;justify-content:space-between}
.meter .chip{width:17cqi;height:13cqi;padding:0;border:0;border-radius:3cqi;background:linear-gradient(135deg,#EACB7D,#B08A31)}
.meter .ico{position:absolute;top:8cqi;inset-inline-end:9cqi;width:16cqi;height:16cqi;color:var(--red)}
.meter b{font-size:9cqi;font-weight:800;line-height:1.2}
.floor{position:absolute;left:50%;bottom:-2.5%;width:78%;height:6%;transform:translateX(-50%) translateZ(-1px);background:radial-gradient(closest-side,rgba(0,0,0,.75),rgba(0,0,0,0));pointer-events:none}

.net{position:absolute;inset:0;z-index:3;pointer-events:none}
.net-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wire{fill:none;stroke:rgba(227,32,62,.5);stroke-width:1.2}
.wire-soft{fill:none;stroke:rgba(255,255,255,.07);stroke-width:5}
.pulse-g{fill:rgba(227,32,62,.35)}
.pulse-c{fill:#fff}
.node{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:auto}
.orb{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#131315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 6px rgba(200,16,46,.06);transition:box-shadow .3s,background .3s}
.orb .ico{width:25px;height:25px;color:#fff;stroke-width:1.6;transition:color .3s}
.node span{font-size:13px;font-weight:700;color:var(--muted-d);white-space:nowrap}
.node.hit .orb{animation:hit .9s var(--e-out)}
.node.hit .orb .ico{color:var(--red-hot)}
.node:hover .orb{background:#1b0a0e;box-shadow:inset 0 0 0 1px rgba(227,32,62,.7),0 0 0 8px rgba(200,16,46,.12),0 0 34px rgba(227,32,62,.45)}
@keyframes hit{0%{box-shadow:inset 0 0 0 1px rgba(227,32,62,.9),0 0 0 0 rgba(227,32,62,.55),0 0 30px rgba(227,32,62,.6)}100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 22px rgba(227,32,62,0),0 0 0 rgba(227,32,62,0)}}

.rail{position:absolute;inset-inline-start:calc(var(--pad) * .3);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:5}
.rail li{width:6px;height:6px;border-radius:4px;background:rgba(255,255,255,.22);transition:height .4s var(--e-out),background .3s,box-shadow .3s}
.rail li.on{height:26px;background:var(--red-hot);box-shadow:0 0 14px rgba(227,32,62,.7)}
.hint{position:absolute;bottom:26px;inset-inline:0;display:flex;justify-content:center;align-items:center;gap:12px;font-size:13px;font-weight:600;color:var(--muted-d);z-index:5}
.hint i{position:relative;width:1.5px;height:34px;background:rgba(255,255,255,.14);overflow:hidden}
.hint i::after{content:"";position:absolute;inset-inline:0;top:0;height:40%;background:var(--red-hot);animation:drip 1.8s var(--e-out) infinite}
@keyframes drip{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}
.pbar{display:none}

/* ---------- thermal receipt ---------- */
.rcpt{position:absolute;left:0;bottom:0;width:100%;background:#FDFDFB;color:#161616;font-size:4.2cqi;line-height:1.5;text-align:center;padding:5cqi 6cqi 5cqi;transform:translateY(101%);
  --zh:1.2cqi;--zw:2.4cqi;
  -webkit-mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/var(--zw) var(--zh) repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/var(--zw) var(--zh) repeat-x,linear-gradient(#000 0 0) 0 var(--zh)/100% calc(100% - var(--zh)*2) no-repeat;
  mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/var(--zw) var(--zh) repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/var(--zw) var(--zh) repeat-x,linear-gradient(#000 0 0) 0 var(--zh)/100% calc(100% - var(--zh)*2) no-repeat}
.rcpt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
.rc-head{display:flex;align-items:center;justify-content:center;gap:3.4cqi;margin-bottom:3cqi}
.rc-head img{width:18cqi;height:auto}
.rc-head b{display:block;font-size:5.4cqi;font-weight:800;letter-spacing:.12em;line-height:1.15;direction:ltr}
.rc-head span{display:block;font-size:4.6cqi;font-weight:700;line-height:1.3}
.rc-title{display:inline-block;border:.5cqi solid #161616;border-radius:2.4cqi;padding:.8cqi 5cqi;font-weight:800;font-size:4.8cqi;margin:.5cqi 0 3cqi}
.rc-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.4cqi 2cqi;font-size:3.5cqi}
.rc-meta span{color:#3a3a3a;font-weight:600}
.rc-meta b{font-weight:800;font-size:3.7cqi}
.rcpt hr{border:0;border-top:.6cqi dashed #161616;margin:2.6cqi 0}
.rc-row{display:flex;justify-content:space-between;align-items:baseline;gap:2cqi;font-size:3.9cqi;margin:1.3cqi 0}
.rc-row span{font-weight:600}
.rc-row b{font-weight:700}
.rc-big{font-size:4.5cqi}
.rc-big b{font-weight:800;font-size:4.8cqi}
.rc-ok{display:flex;align-items:center;justify-content:center;gap:2cqi;margin:.8cqi auto 1.6cqi}
.rc-ok span{border:.5cqi solid #161616;border-radius:2cqi;padding:.4cqi 4cqi;font-weight:800}
.rc-ok .ico{width:5.4cqi;height:5.4cqi;stroke:#161616;stroke-width:2.4}
.rc-c{font-size:3.8cqi;margin:.6cqi 0}
.rc-c b{direction:ltr;display:inline-block}
.rc-thx{font-weight:800;font-size:4.6cqi}
.rc-pow{font-size:3.3cqi;direction:ltr;color:#333}
.rc-cut{display:block;height:0}
.rc-stamp{position:absolute;top:21%;left:50%;transform:translateX(-50%) rotate(-11deg);border:.7cqi solid var(--red);box-shadow:0 0 0 .8cqi #FDFDFB,0 0 0 1.2cqi var(--red);color:var(--red);font-weight:800;font-size:6cqi;line-height:1.5;padding:.2cqi 4cqi;border-radius:2cqi;opacity:.85;mix-blend-mode:multiply;white-space:nowrap;z-index:1}
.rcpt--big{font-size:3.7cqi;padding-bottom:7cqi}
.rc-stampbox{position:relative;height:17cqi;margin-top:2cqi}
.rc-stampbox .rc-stamp{top:50%;transform:translate(-50%,-50%) rotate(-8deg);font-size:5.6cqi}
.rc-ben{display:grid;grid-template-columns:auto 1fr;gap:3.4cqi;text-align:start;align-items:start;padding:2.8cqi 0;border-bottom:.35cqi dotted #9d9d9d}
.rc-ben:last-of-type{border-bottom:0}
.rc-ben .ico{width:6cqi;height:6cqi;stroke:#161616;stroke-width:2.4;margin-top:.9cqi}
.rc-ben b{display:block;font-size:4.7cqi;font-weight:800;line-height:1.4}
.rc-ben small{display:block;font-size:3.7cqi;color:#454545;line-height:1.6}
.rc-sec{font-weight:800;font-size:4.7cqi;margin:1cqi 0 1.4cqi}
.rc-step{display:grid;grid-template-columns:auto 1fr;gap:3.4cqi;text-align:start;align-items:center;padding:1.6cqi 0}
.rc-step em{font-style:normal;width:7.4cqi;height:7.4cqi;border:.5cqi solid #161616;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:3.9cqi}
.rc-step b{display:block;font-size:4.2cqi;font-weight:800;line-height:1.35}
.rc-step small{display:block;font-size:3.5cqi;color:#454545}

/* ==========================================================================
   2. ABOUT
   ========================================================================== */
.about{padding-top:clamp(110px,16vh,180px)}
.about-intro{font-size:clamp(18px,1.5vw,23px);color:var(--muted-d);max-width:42em;line-height:1.9}
.vis-pin{position:relative;height:240svh}
.vis-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.vis-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;align-items:center;width:100%}
.vision{font-size:clamp(32px,4.2vw,68px);font-weight:800;line-height:1.35;text-wrap:balance}
.vw{opacity:.13}
.vw.em{color:var(--red-hot)}
.map-box{display:grid;place-items:center}
.map-anchor{position:relative;width:min(100%,calc(74svh * 1.1027));aspect-ratio:1.1027}
.map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.map-svg .eg{fill:rgba(200,16,46,.07);stroke:rgba(227,32,62,.65);stroke-width:1.5;stroke-dasharray:3 5}
.map-svg .nl{fill:none;stroke:rgba(255,220,225,.7);stroke-width:2}
.hq{position:absolute;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);white-space:nowrap;font-size:14px;font-weight:700;color:#fff;opacity:0;pointer-events:none}
.hq i{position:relative;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(227,32,62,.45),0 0 22px 6px rgba(227,32,62,.8)}
.hq span{position:absolute;inset-inline-start:22px;padding:4px 10px;border-radius:8px;background:rgba(10,10,11,.72);border:1px solid rgba(227,32,62,.5)}
.mission{padding-block:10vh 4vh}
.verbs{display:flex;flex-wrap:wrap;gap:0 .32em;font-size:clamp(58px,11vw,190px);font-weight:800;line-height:1.08;margin-top:6px}
.verb{display:inline-block}
.verb .dot{color:var(--red-hot)}
.mission-line{font-size:clamp(20px,2vw,30px);color:var(--muted-d);margin-top:14px;max-width:30em}
.values{padding-block:8vh 4vh}
.chain{position:relative;margin-top:26px}
.chain-line{position:absolute;inset-inline:10%;top:36px;height:2px;background:rgba(255,255,255,.1)}
.chain-line i{display:block;width:100%;height:100%;background:linear-gradient(to left,var(--red-hot),#FF6B80);transform-origin:right center;transform:scaleX(0);box-shadow:0 0 12px rgba(227,32,62,.8)}
[dir=ltr] .chain-line i{transform-origin:left center;background:linear-gradient(to right,var(--red-hot),#FF6B80)}
.chain-nodes{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.vnode{display:flex;flex-direction:column;align-items:center;text-align:center}
.vnode .dot{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--muted-d);background:var(--ink);box-shadow:inset 0 0 0 1px var(--line-d);transition:box-shadow .6s var(--e-out),color .4s,background .6s}
.vnode.lit .dot{color:#fff;background:radial-gradient(circle,#3C0A13,var(--ink) 72%);box-shadow:inset 0 0 0 1.5px var(--red-hot),0 0 0 8px rgba(227,32,62,.08),0 0 44px rgba(227,32,62,.5)}
.vnode h3{font-size:var(--fs-h3);font-weight:800;margin:18px 0 8px;line-height:1.3}
.vnode p{font-size:15.5px;color:var(--muted-d);line-height:1.8;max-width:17em}
.timeline{padding-block:6vh clamp(90px,14vh,150px)}
.tl{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:6px}
.tl li{display:flex;align-items:center;gap:18px}
.tl .d{font-size:clamp(26px,3vw,44px);font-weight:800;line-height:1.2}
.tl .t b{display:block;font-size:18px;font-weight:800}
.tl .t span{font-size:15px;color:var(--muted-d)}
.tl .pin{width:14px;height:14px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 0 5px rgba(227,32,62,.18);flex:none}
.tl .open{flex:1 1 120px;display:flex;align-items:center;gap:14px;color:var(--muted-d);font-size:15px;font-weight:600}
.tl .open i{flex:1;height:2px;background:repeating-linear-gradient(to left,rgba(227,32,62,.8) 0 8px,transparent 8px 16px)}

/* ==========================================================================
   3. SERVICES — horizontal band
   ========================================================================== */
.services{overflow:clip}
.svc-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,40px);padding-block:96px 34px}
.svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;width:100%}
.svc-head .h2{margin:0;font-size:clamp(32px,4.2vw,68px)}
.svc-meta{max-width:25em;text-align:end;flex:none}
.svc-lede{font-size:16px;color:var(--muted-l);margin-bottom:10px}
.svc-count{display:flex;justify-content:flex-end;align-items:baseline;gap:6px;font-size:15px;font-weight:700;color:var(--grey-3)}
.svc-count b{font-size:34px;color:var(--red);line-height:1}
.svc-viewport{width:100%}
.svc-track{display:flex;gap:20px;padding-inline:var(--pad);will-change:transform}
.svc{position:relative;flex:0 0 clamp(292px,29vw,410px);height:clamp(400px,56svh,540px);background:#fff;border-radius:26px;padding:28px 28px 26px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 1px var(--line-l),0 30px 60px -40px rgba(17,17,17,.35);transition:box-shadow .4s}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(380px circle at var(--mx,70%) var(--my,0%),rgba(200,16,46,.10),rgba(200,16,46,0) 62%);opacity:0;transition:opacity .4s;pointer-events:none}
.svc:hover::before,.svc.is-on::before{opacity:1}
.svc.is-on{box-shadow:0 0 0 1.5px rgba(200,16,46,.35),0 40px 70px -40px rgba(200,16,46,.45)}
.svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:26px}
.svc-i{font-size:14px;font-weight:800;color:var(--grey-3)}
.ico-big{width:64px;height:64px;color:var(--red);stroke-width:1.35;stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset 1.6s var(--e-out)}
.svc.seen .ico-big,.rm .ico-big{stroke-dashoffset:0}
.svc h3{font-size:clamp(22px,1.9vw,28px);font-weight:800;line-height:1.3;margin-bottom:10px;text-wrap:balance}
.svc p{font-size:15.5px;color:var(--muted-l);line-height:1.8}
.svc-items{margin-top:auto}
.svc-items li{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:15px;font-weight:700;border-top:1px dashed var(--grey-1)}
.svc-items i{flex:1;height:0;border-bottom:2px dotted var(--grey-2);transform:translateY(-3px)}
.svc-items .ico{width:18px;height:18px;color:var(--red);stroke-width:2.2}
.svc-shot{margin:auto -28px -26px;height:46%;min-height:150px;overflow:hidden;position:relative;border-top:1px solid var(--line-l);background:var(--paper-2)}
.svc-shot img{position:absolute;inset-inline:10%;top:16px;width:80%;height:auto;border-radius:14px 14px 0 0;box-shadow:0 0 0 1px var(--line-l),0 18px 40px -18px rgba(17,17,17,.4);transition:transform .8s var(--e-out)}
.svc:hover .svc-shot img,.svc.is-on .svc-shot img{transform:translateY(-10px)}
.svc-bar{height:2px;background:var(--grey-1);border-radius:2px;overflow:hidden}
.svc-bar i{display:block;height:100%;background:var(--red);transform-origin:right center;transform:scaleX(0)}
[dir=ltr] .svc-bar i{transform-origin:left center}

/* ==========================================================================
   4. MERCHANTS
   ========================================================================== */
.merchants{overflow:clip;background:radial-gradient(120% 80% at 80% 0%,#D5163A 0%,var(--red) 45%,#A70C26 100%)}
.m-intro{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:4vw;min-height:100svh;padding-block:clamp(110px,15vh,170px) 60px}
.m-lede{font-size:clamp(18px,1.4vw,22px);color:rgba(255,255,255,.88);max-width:30em;margin-bottom:34px;line-height:1.85}
.m-rig{position:relative;display:grid;place-items:center;perspective:1600px;min-height:78svh}
.m-rig::before{content:"";position:absolute;width:min(620px,96%);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#0E0E10 0%,#1A0508 56%,rgba(26,5,8,0) 100%)}
.orbit{position:absolute;width:min(560px,92%);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.2);animation:spin 28s linear infinite;pointer-events:none}
.orbit i{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:0 0 14px 2px #fff}
.orbit.o2{width:min(740px,122%);border-style:dashed;border-color:rgba(255,255,255,.14);animation-duration:46s;animation-direction:reverse}
.orbit.o2 i{top:auto;bottom:-4px;width:8px;height:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.m-term{position:relative;height:min(70svh,660px);aspect-ratio:456/1172;transform-style:preserve-3d}
.m-term::after{content:"";position:absolute;left:50%;bottom:-3%;width:80%;height:6%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0));z-index:-1}
.m-term .screen img{transition:opacity .6s}
.m-tags{position:absolute;inset:0;pointer-events:none}
.m-tags li{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;color:var(--ink-1);font-size:14.5px;font-weight:700;box-shadow:0 18px 30px -16px rgba(0,0,0,.55);animation:bob 6s ease-in-out infinite;white-space:nowrap}
.m-tags li .ico{width:18px;height:18px;color:var(--red)}
.m-tags li:nth-child(1){top:12%;inset-inline-end:4%}
.m-tags li:nth-child(2){top:36%;inset-inline-start:0;animation-delay:-1.5s}
.m-tags li:nth-child(3){top:62%;inset-inline-end:0;animation-delay:-3s}
.m-tags li:nth-child(4){bottom:9%;inset-inline-start:6%;animation-delay:-4.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.print{position:relative;height:280svh}
.print-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:radial-gradient(90% 70% at 50% 100%,#1C0307 0%,#5E0716 38%,rgba(94,7,22,0) 75%)}
.print-label{position:absolute;top:100px;inset-inline-start:max(var(--pad),calc((100% - var(--maxw)) / 2 + var(--pad)));z-index:4;display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;white-space:nowrap}
.lid{position:absolute;left:50%;bottom:0;width:min(760px,126vw);aspect-ratio:456/330;transform:translateX(-50%)}
.lid-img{position:absolute;inset:0;overflow:hidden}
.lid-img img{width:100%;height:auto;display:block}
.paper-win--big{left:17.105%;width:65.789%;bottom:13.333%;height:200svh}
.head-light{position:absolute;left:16%;right:16%;top:86.2%;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(255,70,95,0),rgba(255,70,95,.95),rgba(255,70,95,0));filter:blur(1px);z-index:4;animation:flick 2.2s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:.35}50%{opacity:.9}}

.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5vw;align-items:start;padding-block:clamp(90px,14vh,150px)}
.steps{position:relative;margin-top:22px}
.steps::before{content:"";position:absolute;inset-inline-start:27px;top:30px;bottom:44px;width:2px;background:rgba(255,255,255,.28)}
.steps::after{content:"";position:absolute;inset-inline-start:24px;top:30px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 14px 3px #fff;animation:down 3.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes down{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(var(--steps-h,240px)));opacity:0}}
.steps li{position:relative;padding-inline-start:84px;padding-block:14px 26px}
.steps .n{position:absolute;inset-inline-start:0;top:12px;width:56px;height:56px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-weight:800;font-size:22px;box-shadow:0 0 0 6px rgba(255,255,255,.14)}
.steps h3{font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.35}
.steps p{color:rgba(255,255,255,.86);font-size:16.5px}
.join-hot{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-weight:700;color:#fff;padding:10px 16px;border-radius:14px;background:rgba(0,0,0,.18)}
.join-hot .ico{width:18px;height:18px}
.card-form{position:relative;background:#fff;color:var(--ink-1);border-radius:28px;padding:clamp(24px,3vw,40px);box-shadow:0 50px 90px -40px rgba(40,0,8,.75);overflow:hidden}
.form-title{font-size:clamp(22px,2vw,30px);font-weight:800;margin-bottom:20px}
.fld{position:relative;display:block;margin-bottom:14px}
.fld input,.fld select{width:100%;height:62px;border-radius:14px;border:1.5px solid var(--grey-1);background:var(--paper-2);padding:24px 16px 6px;font-size:16.5px;font-weight:600;color:var(--ink-1);outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8102E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 16px center}
[dir=ltr] .fld select{background-position:right 16px center}
.fld span{position:absolute;inset-inline-start:17px;top:19px;font-size:15.5px;color:var(--grey-3);pointer-events:none;transition:top .2s var(--e-out),font-size .2s,color .2s}
.fld input:focus,.fld select:focus{border-color:var(--red);background:#fff}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span,.fld--sel span{top:7px;font-size:12px;font-weight:700;color:var(--red)}
.fld.bad input,.fld.bad select{border-color:var(--red);background:#FFF3F5}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-note{font-size:13.5px;color:var(--grey-3);margin-top:12px;text-align:center}
.form-ok{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:30px;background:#fff;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.form-ok h3{font-size:28px;font-weight:800}
.form-ok p{color:var(--muted-l);margin-bottom:14px}
.card-form.done .form-ok{opacity:1;visibility:visible}
.tick{display:grid;place-items:center;width:84px;height:84px}
.tick svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:151;stroke-dashoffset:151}
.tick path{stroke-dasharray:40;stroke-dashoffset:40}
.card-form.done .tick circle{stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--e-out) .15s}
.card-form.done .tick path{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--e-out) .6s}

/* ==========================================================================
   5. MY DOCTOR PAY
   ========================================================================== */
.mydp{padding-block:clamp(110px,16vh,180px)}
.mydp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:4vw;align-items:center}
.mydp-title{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.mydp-title img{width:clamp(62px,6vw,90px);height:auto;flex:none}
.mydp-title .h2{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:clamp(34px,4.6vw,76px)}
.mydp-title .soon{margin-inline-start:0;transform:none}
.soon{display:inline-block;font-style:normal;font-size:clamp(14px,1.2vw,18px);font-weight:700;vertical-align:middle;padding:.3em .9em;border-radius:999px;background:rgba(227,32,62,.14);color:#FF8A9B;box-shadow:inset 0 0 0 1px rgba(227,32,62,.45);margin-inline-start:.4em;white-space:nowrap;line-height:1.5;transform:translateY(-.3em)}
.mydp-lede{font-size:clamp(18px,1.4vw,22px);color:var(--muted-d);max-width:30em;margin:14px 0 22px}
.mydp-points{display:grid;gap:12px;margin-bottom:30px}
.mydp-points li{display:flex;align-items:center;gap:12px;font-weight:600}
.mydp-points .ico{width:20px;height:20px;color:var(--red-hot);stroke-width:2.2}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.store{display:flex;align-items:center;gap:12px;height:60px;padding-inline:18px 22px;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);background:rgba(255,255,255,.03);color:rgba(255,255,255,.72);cursor:not-allowed}
.store .ico{width:24px;height:24px}
.store small{display:block;font-size:12px;line-height:1.3;opacity:.8}
.store b{display:block;font-size:17px;line-height:1.25;direction:ltr;text-align:start}
.notify{display:flex;flex-wrap:wrap;gap:10px;max-width:520px}
.notify input{flex:1 1 200px;min-width:0;height:48px;border-radius:13px;border:0;box-shadow:inset 0 0 0 1px var(--line-d);background:rgba(255,255,255,.05);color:#fff;padding-inline:16px;font-size:16px;outline:none;text-align:start}
.notify input::placeholder{color:var(--muted-d);text-align:right}
[dir=ltr] .notify input::placeholder{text-align:left}
.notify input:focus{box-shadow:inset 0 0 0 1.5px var(--red-hot)}
.notify.bad input{box-shadow:inset 0 0 0 1.5px var(--red-hot)}
.notify-ok{flex-basis:100%;font-size:14.5px;color:#fff;display:none}
.notify.done .notify-ok{display:block}
.notify.done input,.notify.done button{display:none}

.handoff{position:relative;height:min(76svh,680px);min-height:500px}
.ho-term{position:absolute;inset-inline-start:4%;bottom:6%;height:68%;aspect-ratio:456/1172;transform:rotate(-5deg)}
[dir=ltr] .ho-term{transform:rotate(5deg)}
.phone{position:absolute;inset-inline-end:3%;top:0;height:92%;aspect-ratio:9/19.3;transform:rotate(3deg)}
[dir=ltr] .phone{transform:rotate(-3deg)}
.ho-where{position:absolute;bottom:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted-d)}
.ho-where::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red-hot)}
.ho-where--shop{inset-inline-start:8%}
.ho-where--home{inset-inline-end:12%}
.ho-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.ho-base{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1.5;stroke-dasharray:3 7}
.ho-glow{fill:none;stroke:var(--red-hot);stroke-width:3;stroke-linecap:round}
.ho-dot{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(227,32,62,.35),0 0 26px 6px rgba(227,32,62,.85);z-index:4;opacity:0;pointer-events:none}
.ph-frame{position:absolute;inset:0;border-radius:13%/6.2%;background:#0C0C0E;padding:3.4%;box-shadow:inset 0 0 0 1.5px #3A3A40,0 0 0 1.5px #1F1F23,0 60px 90px -40px rgba(0,0,0,.9),0 0 90px -20px rgba(200,16,46,.45)}
.ph-notch{position:absolute;top:2.4%;left:50%;width:27%;height:2.9%;transform:translateX(-50%);background:#000;border-radius:999px;z-index:6}
.ph-screen{position:relative;height:100%;border-radius:10.5%/4.9%;overflow:hidden;background:#F3F3F5;color:#111;container-type:inline-size;font-size:4.2cqi;line-height:1.45}
.ps-status{height:12cqi;padding:3.4cqi 8cqi 0;display:flex;justify-content:space-between;align-items:center;font-size:3.6cqi;font-weight:700;color:#fff;direction:ltr;position:relative;z-index:2}
.ps-sys{display:flex;gap:1cqi;align-items:flex-end}
.ps-sys i{width:1.1cqi;background:#fff;border-radius:.4cqi}
.ps-sys i:nth-child(1){height:1.6cqi}.ps-sys i:nth-child(2){height:2.3cqi}.ps-sys i:nth-child(3){height:3cqi}
.ps-sys em{width:6cqi;height:3cqi;border-radius:.8cqi;box-shadow:inset 0 0 0 .35cqi #fff;margin-inline-start:1cqi;position:relative}
.ps-sys em::after{content:"";position:absolute;inset:.7cqi 1.8cqi .7cqi .7cqi;background:#fff;border-radius:.3cqi}
.ps-top{margin-top:-12cqi;padding:14cqi 6cqi 7cqi;background:linear-gradient(160deg,#D8163A,#9A0B22);color:#fff;border-radius:0 0 8cqi 8cqi}
.ps-hello{display:flex;align-items:center;gap:3cqi;margin-bottom:5cqi}
.ps-hello img{width:11cqi;height:auto;background:#fff;border-radius:50%;padding:1.4cqi}
.ps-hello small{display:block;font-size:3.2cqi;opacity:.85;line-height:1.2}
.ps-hello b{display:block;font-size:4.8cqi;font-weight:800;line-height:1.3}
.ps-bell{margin-inline-start:auto;width:9cqi;height:9cqi;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16)}
.ps-bell .ico,.ps-qr .ico{width:5cqi;height:5cqi}
.ps-wallet{display:flex;align-items:center;justify-content:space-between;padding:4cqi 4.6cqi;border-radius:5cqi;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 .3cqi rgba(255,255,255,.14)}
.ps-wallet small{display:block;font-size:3.2cqi;opacity:.85}
.ps-wallet b{font-size:6.4cqi;font-weight:800;letter-spacing:.06em}
.ps-wallet b em{font-style:normal;font-size:3.4cqi;opacity:.8;letter-spacing:0}
.ps-qr{width:10cqi;height:10cqi;border-radius:3cqi;display:grid;place-items:center;background:#fff;color:var(--red)}
.ps-sec{font-size:3.8cqi;font-weight:800;padding:5cqi 6cqi 2.4cqi}
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqi;padding:0 5cqi}
.ps-tile{display:flex;flex-direction:column;align-items:center;gap:1.4cqi;padding:3.4cqi 1cqi;background:#fff;border-radius:4.4cqi;box-shadow:0 .6cqi 2cqi rgba(0,0,0,.05);font-size:3.3cqi;font-weight:700}
.ps-tile .ico{width:6.6cqi;height:6.6cqi;color:var(--red);stroke-width:1.8}
.ps-bill{margin:4.6cqi 5cqi 0;padding:4.4cqi;background:#fff;border-radius:5cqi;box-shadow:0 2cqi 6cqi rgba(0,0,0,.08),inset 0 0 0 .3cqi rgba(200,16,46,.2);opacity:0}
.psb-h{display:flex;align-items:center;gap:3cqi}
.psb-i{width:10cqi;height:10cqi;border-radius:50%;display:grid;place-items:center;background:#FDE8EC;color:var(--red)}
.psb-i .ico{width:5.4cqi;height:5.4cqi}
.psb-h b{display:block;font-size:4cqi;font-weight:800;line-height:1.3}
.psb-h small{display:block;font-size:3.2cqi;color:var(--red);font-weight:700}
.psb-a{display:flex;align-items:baseline;gap:1.6cqi;margin:2.4cqi 0 3cqi;direction:ltr;justify-content:flex-end}
[dir=ltr] .psb-a{justify-content:flex-start}
.psb-a b{font-size:8.4cqi;font-weight:800;line-height:1.1}
.psb-a em{font-style:normal;font-size:3.4cqi;color:#666}
.psb-pay{display:grid;place-items:center;height:11cqi;border-radius:3.6cqi;background:var(--red);color:#fff;font-weight:800;font-size:4cqi;box-shadow:0 1cqi 0 #7A0718}
.ps-ok{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqi;background:rgba(255,255,255,.97);text-align:center;opacity:0;visibility:hidden}
.ps-ok .tick{width:28cqi;height:28cqi}
.ps-ok b{font-size:5.4cqi;font-weight:800}
.ps-ok small{font-size:3.4cqi;color:#666}
.ps-nav{position:absolute;bottom:4cqi;inset-inline:5cqi;height:14cqi;border-radius:999px;background:#111;display:flex;align-items:center;justify-content:space-around;color:#fff;z-index:3}
.ps-nav .ico{width:5.4cqi;height:5.4cqi;opacity:.7}
.ps-home{width:11cqi;height:11cqi;border-radius:50%;background:var(--red);display:grid;place-items:center}
.ps-home .ico{opacity:1}

/* ==========================================================================
   6. BOARD
   ========================================================================== */
.board{padding-block:clamp(110px,16vh,180px)}
.board-head{max-width:46em}
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:34px}
.bm{position:relative;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line-l),0 30px 50px -40px rgba(17,17,17,.4);transition:transform .5s var(--e-out),box-shadow .4s}
.bm::after{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),rgba(227,32,62,.16),rgba(227,32,62,0) 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.bm:hover{transform:translateY(-6px);box-shadow:0 0 0 1.5px rgba(200,16,46,.35),0 40px 60px -40px rgba(200,16,46,.5)}
.bm:hover::after{opacity:1}
.bm-photo{position:relative;z-index:1;aspect-ratio:4/4.6;background:radial-gradient(90% 70% at 70% 10%,#3A0912,#141416 70%);overflow:hidden;display:grid;place-items:end center}
.bm-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transition:transform .8s var(--e-out)}
.bm:hover .bm-photo img{transform:scale(1.03)}
.sil{width:80%;height:auto;fill:#2B0B12;transition:transform .8s var(--e-out)}
.sil .rim{fill:none;stroke:rgba(227,32,62,.55);stroke-width:1.5}
.bm:hover .sil{transform:translateY(-4px)}
.bm-scan{position:absolute;inset-inline:0;top:0;height:30%;background:linear-gradient(to bottom,rgba(227,32,62,0),rgba(227,32,62,.16),rgba(227,32,62,0));animation:scan 4.6s linear infinite;pointer-events:none}
@keyframes scan{0%{transform:translateY(-100%)}100%{transform:translateY(340%)}}
.bm-meta{padding:18px 20px 22px}
.bm-meta b{display:block;font-size:20px;font-weight:800;line-height:1.35}
.bm-meta span{font-size:15px;color:var(--muted-l)}
.bm-bio{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-l);font-size:14.5px;line-height:1.75;color:var(--muted-l)}
.bm--slot .bm-meta b,.bm--slot .bm-meta span{color:var(--grey-3)}
.bm--slot .bm-meta b::after{content:"";display:block;width:56px;height:2px;margin-top:8px;background:repeating-linear-gradient(to left,var(--grey-2) 0 6px,transparent 6px 11px)}

/* ==========================================================================
   7. CONTACT
   ========================================================================== */
.contact{padding-block:clamp(110px,16vh,180px) 100px;overflow:clip}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:5vw;align-items:start}
.hotline{display:inline-flex;flex-direction:column;margin:6px 0 30px}
.hotline small{font-size:15px;font-weight:600;color:var(--muted-d)}
.hotline b{font-size:clamp(50px,8vw,124px);font-weight:800;line-height:1.05;color:#fff;transition:color .3s,text-shadow .3s}
.hotline:hover b{color:var(--red-hot);text-shadow:0 0 50px rgba(227,32,62,.5)}
.c-list{display:grid}
.c-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:start;padding-block:22px;border-top:1px solid var(--line-d)}
.c-list .ico{width:24px;height:24px;color:var(--red-hot);margin-top:4px}
.c-list small{display:block;font-size:13.5px;font-weight:600;color:var(--muted-d)}
.c-list a,.c-list p{font-size:18px;font-weight:700;line-height:1.7;overflow-wrap:anywhere}
.c-list a:hover{color:var(--red-hot)}
.cbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding-inline:12px;border-radius:10px;font-size:13.5px;font-weight:700;box-shadow:inset 0 0 0 1px var(--line-d);color:var(--muted-d);white-space:nowrap}
.cbtn:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(227,32,62,.6)}
.cbtn .ico{width:16px;height:16px}
.doc{position:relative;background:#FBFAF6;color:#1A1A1A;border-radius:20px;padding:clamp(22px,2.6vw,34px);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08);
  background-image:repeating-radial-gradient(circle at 110% -10%,rgba(200,16,46,.035) 0 2px,transparent 2px 9px)}
.doc-head{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:2px solid #1A1A1A}
.doc-head img{width:48px;height:auto;flex:none}
.doc-head small{display:block;font-size:13px;font-weight:700;color:var(--red)}
.doc-head b{display:block;font-size:16.5px;font-weight:800;line-height:1.5}
.doc-rows>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:13px;border-bottom:1px dashed #CFCAC0}
.doc-rows dt{font-size:14.5px;font-weight:600;color:#67635B}
.doc-rows dd{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800}
.doc-rows button{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#8A857B;box-shadow:inset 0 0 0 1px #DDD8CD}
.doc-rows button:hover{color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.doc-rows button .ico{width:15px;height:15px}
.doc-addr{font-size:14.5px;color:#4A463F;margin-top:16px;max-width:24em;line-height:1.8;padding-inline-end:112px}
.seal{position:absolute;inset-inline-end:14px;bottom:-34px;width:124px;height:124px;opacity:0;mix-blend-mode:multiply;pointer-events:none}
.seal svg{width:100%;height:100%;overflow:visible}
.seal circle{fill:none;stroke:var(--red);stroke-width:2.4}
.seal circle+circle{stroke-width:1.4}
.seal text{font-family:var(--f);font-size:10.6px;font-weight:800;fill:var(--red);letter-spacing:.5px}
.seal-mark{position:absolute;inset:0;margin:auto;width:40px;height:34px;background:var(--red);-webkit-mask:url(../assets/logo_mono.webp) center/contain no-repeat;mask:url(../assets/logo_mono.webp) center/contain no-repeat}

/* ---------- footer ---------- */
.foot{background:#070708;color:var(--muted-d);padding-block:64px 30px;border-top:1px solid var(--line-d);font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr .8fr;gap:40px}
.foot-brand .brand{color:#fff;margin-bottom:14px}
.foot-brand p{max-width:26em;line-height:1.8}
.foot-links{display:grid;grid-template-columns:repeat(2,max-content);gap:10px 34px;align-content:start}
.foot-links a,.foot-legal a{font-weight:600;transition:color .2s}
.foot-links a:hover,.foot-legal a:hover{color:#fff}
.foot-legal{display:grid;gap:10px;align-content:start}
.foot-base{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px 30px;flex-wrap:wrap;margin-top:44px;padding-top:24px;font-size:13.5px}
.foot-base::before{content:"";position:absolute;top:0;inset-inline:var(--pad);height:1px;background:var(--line-d)}
.foot-nums{display:flex;flex-wrap:wrap;gap:6px 18px}

.toast{position:fixed;bottom:24px;left:50%;z-index:120;transform:translate(-50%,20px);background:#fff;color:#111;font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:12px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--e-out),visibility .3s}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ==========================================================================
   additions: logo variants, live screen overlays, network nodes, sticky band
   ========================================================================== */
.brand .b-l,.brand .b-m{display:none}
.nav[data-tone=light] .brand .b-d,.nav[data-tone=red] .brand .b-d{display:none}
.nav[data-tone=light] .brand .b-l{display:block}
.nav[data-tone=red] .brand .b-m{display:block;filter:invert(1)}

.screen{container-type:inline-size}
.kb{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(17,17,17,.34);opacity:0;visibility:hidden}
.kb-sheet{background:#fff;border-radius:6cqi 6cqi 0 0;padding:6cqi 6cqi 7cqi;color:#111;box-shadow:0 -3cqi 8cqi rgba(0,0,0,.12)}
.kb-sheet small{display:block;font-size:4.2cqi;font-weight:700;color:#5c5c63;margin-bottom:2cqi;line-height:1.3}
.kb-field{display:flex;align-items:center;justify-content:flex-end;gap:.8cqi;height:14cqi;border-radius:3.6cqi;border:.5cqi solid var(--red);padding-inline:4cqi;direction:ltr;background:#FFF7F8}
[dir=ltr] .kb-field{justify-content:flex-start}
.kb-field b{font-size:6.6cqi;font-weight:800;letter-spacing:.05em;line-height:1}
.kb-caret{width:.55cqi;height:7cqi;background:var(--red);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.kb-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqi;margin:4.6cqi 0 4cqi;direction:ltr}
.kb-keys span{height:10.6cqi;border-radius:3cqi;background:#F1F1F3;display:grid;place-items:center;font-size:5.4cqi;font-weight:700;line-height:1}
.kb-keys span.down{background:#FFD5DC;color:var(--red);transform:scale(.93)}
.kb-go{display:grid;place-items:center;height:12.4cqi;border-radius:3.6cqi;background:var(--red);color:#fff;font-weight:800;font-size:4.8cqi;box-shadow:0 1cqi 0 #7A0718}
.nfcs{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,#FFFFFF,#F2F2F4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.4cqi;padding:10cqi;text-align:center;color:#111;opacity:0;visibility:hidden}
.nfcs-i{position:relative;width:34cqi;height:34cqi;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 3cqi 9cqi rgba(200,16,46,.16),inset 0 0 0 .4cqi rgba(200,16,46,.18);margin-bottom:3cqi}
.nfcs-i>.ico{width:15cqi;height:15cqi;color:var(--red);stroke-width:1.6}
.nfcs-ok{position:absolute;inset:0;border-radius:50%;background:#fff;padding:3cqi;opacity:0}
.nfcs-ok svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.nfcs b{font-size:6.8cqi;font-weight:800;line-height:1.3}
.nfcs small{font-size:4.4cqi;color:#55555c;line-height:1.5;min-height:3em}
.nfcs-bar{width:66%;height:1.8cqi;border-radius:2cqi;background:#E4E4E8;overflow:hidden}
.nfcs-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:right center}
[dir=ltr] .nfcs-bar i{transform-origin:left center}
.nfcs.done .nfcs-bar i{background:var(--green)}

.node{will-change:transform}
.orb-ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--red-hot);opacity:0;pointer-events:none}
.node .orb{cursor:pointer}
.pulses circle{pointer-events:none}

.motion .services{height:calc(100svh + var(--svc-d,0px))}
.motion .svc-pin{position:sticky;top:0;height:100svh;min-height:0}
.svc-items li span{flex:1}

.rcpt .rc-head img{filter:none}
.rc-date{direction:ltr;unicode-bidi:isolate}

/* legal pages */
.lg-page{background:var(--paper-2)}
.lg-bar{position:fixed;top:0;inset-inline:0;height:3px;z-index:60;background:transparent;pointer-events:none}
.lg-bar i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:right center;box-shadow:0 0 12px rgba(200,16,46,.6)}
[dir=ltr] .lg-bar i{transform-origin:left center}
.lg-hero{background:radial-gradient(90% 120% at 85% 0%,#3A0912 0%,var(--ink) 60%);color:var(--text-d);padding:clamp(120px,18vh,180px) 0 clamp(48px,7vh,80px)}
.lg-title{font-size:clamp(40px,6vw,92px);font-weight:800;line-height:1.08;margin-bottom:18px;text-wrap:balance}
.lg-lede{font-size:clamp(17px,1.4vw,21px);color:var(--muted-d);max-width:40em}
.lg-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:28px;font-size:14.5px;color:var(--muted-d)}
.lg-meta b{color:#fff;font-weight:700}
.lg-draft{padding:4px 12px;border-radius:999px;background:rgba(227,32,62,.14);color:#FF8A9B;box-shadow:inset 0 0 0 1px rgba(227,32,62,.45);font-weight:700}
.lg-body{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding-block:clamp(48px,8vh,90px);color:var(--text-l)}
.lg-toc{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 130px);overflow:auto}
.lg-toc p{font-size:13.5px;font-weight:800;color:var(--red);margin-bottom:10px}
.lg-toc ol{display:grid;gap:2px;border-inline-start:2px solid var(--grey-1)}
.lg-toc a{display:flex;gap:10px;padding:7px 14px;margin-inline-start:-2px;border-inline-start:2px solid transparent;font-size:15px;font-weight:600;color:var(--muted-l);line-height:1.5;transition:color .2s,border-color .2s}
.lg-toc a:hover{color:var(--ink-1)}
.lg-toc a.on{color:var(--red);border-color:var(--red)}
.lg-toc a b{font-weight:800;min-width:1.4em}
.lg-doc{max-width:760px}
.lg-sec{padding-block:26px 30px;border-bottom:1px dashed var(--grey-2);scroll-margin-top:96px}
.lg-sec h2{display:flex;align-items:baseline;gap:12px;font-size:clamp(22px,2vw,29px);font-weight:800;line-height:1.4;margin-bottom:14px}
.lg-n{font-size:.62em;font-weight:800;color:var(--red);min-width:1.6em}
.lg-anchor{margin-inline-start:auto;width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--grey-3);box-shadow:inset 0 0 0 1px var(--grey-1);transition:color .2s,box-shadow .2s}
.lg-anchor:hover{color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.lg-anchor .ico{width:16px;height:16px}
.lg-sum{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-l);margin-bottom:14px}
.lg-sum b{font-size:13px;font-weight:800;color:#fff;background:var(--red);border-radius:8px;padding:3px 10px;line-height:1.6}
.lg-sum p{font-size:15.5px;color:var(--muted-l)}
.lg-ph{color:var(--grey-3);font-size:16px}
.lg-hist{padding-top:34px}
.lg-hist h3{font-size:18px;font-weight:800;margin-bottom:10px}
.lg-hist li{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px 0;border-top:1px solid var(--line-l);font-size:15px;color:var(--muted-l)}
.lg-hist li b{color:var(--ink-1)}
.lg-page .cbtn{color:var(--muted-d)}
@media (max-width:900px){
  .lg-body{grid-template-columns:1fr}
  .lg-toc{position:relative;top:0;max-height:none;padding:16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-l)}
}
@media print{
  .lg-bar,.lg-toc,.lg-anchor,.lg-meta .cbtn,.foot{display:none!important}
  .lg-hero{background:none;color:#000;padding:0 0 20px}
  .lg-hero *{color:#000!important}
  .lg-body{display:block;padding:0}
  body,.lg-page{background:#fff}
}

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width:1180px){
  .links{display:none}
  .burger{display:grid}
  .nav-end{margin-inline-start:auto}
}
@media (max-width:980px){
  .contact-grid,.join,.mydp-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:820px){
  .nav-in{height:64px;gap:10px}
  .brand img{width:38px}
  .brand-name b{font-size:17px}
  .brand-name small{display:none}
  .nav-end{gap:8px}
  .lang{height:40px;min-width:40px;padding-inline:8px}
  .burger{width:40px;height:40px}
  .key--sm{height:40px;padding-inline:13px;font-size:14px;border-radius:12px}

  .story{height:calc(100svh + 6 * 78svh)}
  .stage-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-items:start;padding-top:74px;column-gap:0}
  .copy{padding-top:4px;text-align:center}
  .kicker{justify-content:center;font-size:12.5px;margin-bottom:6px}
  .display{font-size:clamp(38px,11vw,60px);margin-bottom:10px}
  .lede{font-size:15px;line-height:1.75;margin:0 auto 14px;max-width:25em}
  .ctas{justify-content:center;gap:10px}
  .ctas .key{height:48px;padding-inline:18px;font-size:15px;border-radius:14px}
  .cap-n{justify-content:center}
  .cap-n::after{display:none}
  .cap-t{font-size:clamp(29px,8.4vw,44px);margin:4px 0 6px}
  .cap-d{font-size:15px;line-height:1.75;margin-inline:auto;max-width:24em}
  .chips{justify-content:center;gap:6px;margin-top:10px}
  .chip{font-size:12.5px;padding:5px 10px}
  .rig{place-items:start center;padding-top:8px}
  .term{height:min(58svh,94cqh)}
  .rail,.hint{display:none}
  .pbar{display:block;position:absolute;bottom:0;inset-inline:0;height:2px;background:rgba(255,255,255,.08);z-index:5}
  .pbar i{display:block;height:100%;background:var(--red-hot);transform-origin:right center;transform:scaleX(0)}
  [dir=ltr] .pbar i{transform-origin:left center}
  .orb{width:46px;height:46px}
  .orb .ico{width:21px;height:21px}
  .node{gap:5px}
  .node span{font-size:11.5px}

  .vis-pin{height:220svh}
  .vis-grid{grid-template-columns:1fr;gap:18px}
  .map-box{order:-1}
  .map-anchor{width:min(100%,calc(42svh * 1.1027))}
  .vision{font-size:clamp(26px,7.4vw,40px);line-height:1.4}
  .hq{font-size:12px}
  .chain-line{inset-inline:auto;inset-inline-start:35px;top:20px;bottom:40px;width:2px;height:auto}
  .chain-line i{transform-origin:center top;transform:scaleY(0);background:linear-gradient(to bottom,var(--red-hot),#FF6B80)}
  [dir=ltr] .chain-line i{transform-origin:center top}
  .chain-nodes{grid-template-columns:1fr;gap:26px}
  .vnode{display:grid;grid-template-columns:72px 1fr;column-gap:18px;text-align:start;align-items:start}
  .vnode .dot{grid-row:span 2}
  .vnode h3{margin:10px 0 2px}
  .vnode p{max-width:none}

  .svc-pin{padding-block:80px 26px;gap:16px}
  .svc-head{flex-direction:column;align-items:flex-start;gap:6px}
  .svc-meta{text-align:start;max-width:none;width:100%}
  .svc-lede{display:none}
  .svc-count{justify-content:flex-start}
  .svc-count b{font-size:26px}
  .svc{flex-basis:80vw;height:min(60svh,500px);padding:24px 22px 22px;border-radius:22px}
  .svc-shot{margin-inline:-22px;margin-bottom:-22px}
  .svc-top{margin-bottom:18px}
  .ico-big{width:52px;height:52px}

  .m-intro{grid-template-columns:1fr;min-height:0;padding-top:110px;gap:10px}
  .m-rig{min-height:66svh}
  .m-term{height:58svh}
  .m-tags li{font-size:12.5px;padding:7px 12px}
  .m-tags li:nth-child(1){top:4%;inset-inline-end:0}
  .m-tags li:nth-child(4){bottom:3%;inset-inline-start:0}
  .print-label{display:none}
  .fld-row{grid-template-columns:1fr;gap:0}
  .handoff{height:540px;min-height:0;margin-top:56px}
  .ho-term{height:50%;inset-inline-start:3%;bottom:9%}
  .phone{height:78%;inset-inline-end:0;top:4%}
  .ho-where--shop{inset-inline-start:2%}
  .ho-where--home{inset-inline-end:10%}
  .contact{padding-bottom:70px}
  .hotline b{font-size:clamp(44px,12.5vw,70px)}
  .c-list li{grid-template-columns:auto minmax(0,1fr)}
  .c-list .cbtn{grid-column:2;justify-self:start}
  .foot-grid{grid-template-columns:1fr}
  .foot-base{flex-direction:column;align-items:flex-start}
}
@media (max-width:420px){
  .nav-join span{font-size:13px}
  .key--sm.nav-join{padding-inline:11px}
  /* the header row on a phone: English «Become a merchant» is long, so the row is packed tighter here and,
     if it still cannot fit, the wordmark steps aside (.nav-tight, set by navFit in site.js) before the menu button leaves the screen */
  .nav-in{padding-inline:16px;gap:8px}
  .nav-end{gap:6px}
  .lang{min-width:38px;padding-inline:6px}
  html[lang=en] .brand-name b{font-size:16px}
  html[lang=en] .nav-join span{font-size:12.5px}
  html[lang=en] .key--sm.nav-join{padding-inline:10px}
  .board-grid{grid-template-columns:1fr 1fr;gap:12px}
  .bm-meta{padding:12px 14px 16px}
  .bm-meta b{font-size:17px}
  .bm-meta span{font-size:13.5px}
  .bm-bio{margin-top:10px;padding-top:10px;font-size:13px;line-height:1.7}
}

/* ==========================================================================
   reduced motion: a calm, complete, finished version of every scene
   ========================================================================== */
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}
.rm .story{height:auto}
.rm .stage{position:relative;height:auto;overflow:visible}
.rm .stage-in{height:auto;padding-block:120px 70px;align-items:start}
.rm .copy{display:block}
.rm .caps{display:grid;gap:34px;margin-top:60px}
.rm .caps>.cap{grid-area:auto;opacity:1;visibility:visible}
.rm .cap-t{font-size:clamp(28px,3vw,44px)}
.rm .rig{position:sticky;top:90px;height:auto;container-type:normal}
.rm .term{height:min(76vh,700px)}
.rm .screen img[data-scr=success]{opacity:1}
.rm .rcpt--story{transform:translateY(58%)}
.rm .net,.rm .hint,.rm .rail,.rm .pbar,.rm .spot{display:none}
.rm .vis-pin{height:auto}
.rm .vis-stage{position:relative;height:auto;padding-block:50px}
.rm .vw{opacity:1}
.rm .hq{opacity:1}
.rm .chain-line i{transform:none}
.rm .vnode .dot{color:#fff;box-shadow:inset 0 0 0 1.5px var(--red-hot)}
.rm .svc-viewport{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.rm .svc{scroll-snap-align:center}
.rm .print{height:auto}
.rm .print-stage{position:relative;height:clamp(1100px,190vh,1900px)}
.rm .rcpt--big{transform:none}
.rm .ps-bill{opacity:1}
.rm .seal{opacity:.9;transform:rotate(-12deg)}
@media (max-width:820px){
  .rm .stage-in{grid-template-rows:none}
  .rm .copy{display:contents}
  .rm .copy>*{grid-area:auto}
  .rm .hero-copy{order:1}
  .rm .rig{order:2;position:relative;top:0;margin:56px 0 10px}
  .rm .caps{order:3;margin-top:30px}
  .rm .term{height:62vh}
}

@media print{
  #gl,.nav,.cursor,.spot,.ecg,.menu{display:none!important}
}

/* ==========================================================================
   review pass (art direction) — additions
   ========================================================================== */
/* legal: real clause text */
.lg-txt{color:#26262A;font-size:16.5px;line-height:1.95}
.lg-txt p{margin-bottom:12px}
.lg-txt ul{display:grid;gap:8px;margin:4px 0 14px}
.lg-txt li{position:relative;padding-inline-start:22px}
.lg-txt li::before{content:"";position:absolute;inset-inline-start:2px;top:.92em;width:9px;height:2px;border-radius:2px;background:var(--red)}
.lg-txt a,.lg-sum a{color:var(--red);font-weight:700}
.lg-txt a:hover,.lg-sum a:hover{text-decoration:underline}
.lg-sum p{color:#3C3C42}

/* opening: the crisp mark that blooms out of the particle logo */
.mark{position:fixed;left:0;top:0;z-index:3;pointer-events:none;display:none;opacity:0}
html.intro .mark{display:block}
.mark-logo{position:absolute;inset:0;filter:drop-shadow(0 0 28px rgba(227,32,62,.55)) drop-shadow(0 0 70px rgba(227,32,62,.35))}
.mark-logo img{width:100%;height:100%;object-fit:contain;will-change:transform,opacity,filter}
.mark-ring{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:1;margin:-46% 0 0 -46%;border-radius:50%;border:1.5px solid rgba(255,90,112,.9);box-shadow:0 0 30px rgba(227,32,62,.7),inset 0 0 30px rgba(227,32,62,.35);opacity:0}
.mark-name{position:absolute;left:50%;width:max-content;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;color:#fff;white-space:nowrap}
.mark-name b{font-size:clamp(30px,3.7vw,54px);font-weight:800;line-height:1.2;text-shadow:0 0 30px rgba(227,32,62,.55)}
.mark-name small{font-size:clamp(11px,1vw,14px);font-weight:700;letter-spacing:.55em;margin-inline-end:-.55em;color:rgba(255,255,255,.6);direction:ltr}
/* Arabic must never be letter-spaced (it tears the joins): the EN build shows «دكتور باي» as the small line */
html[lang=en] .brand-name small,html[lang=en] .mark-name small{letter-spacing:0;margin-inline-end:0;direction:rtl}

/* meter card: a real-looking prepaid card, not a grey slab */
.meter{background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 46%),
    linear-gradient(118deg,rgba(200,16,46,0) 52%,rgba(200,16,46,.9) 52.4%,#8E0B21 70%,rgba(142,11,33,0) 70.4%),
    repeating-radial-gradient(circle at 110% 130%,rgba(255,255,255,.06) 0 .5cqi,rgba(255,255,255,0) .5cqi 2.6cqi),
    linear-gradient(145deg,#26262B 0%,#121214 58%,#0B0B0C 100%);
  color:#fff;box-shadow:0 18px 34px -10px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22);
  /* the card's own padding must not use cqi: that resolves against .rig (the nearest size container), not the card */
  padding:4.4% 4.8%}
.meter .m-row{display:flex;align-items:center;justify-content:space-between;gap:4cqi}
.m-chip{width:18cqi;height:14cqi;border-radius:3cqi;background:
    linear-gradient(90deg,rgba(0,0,0,0) 32%,rgba(90,62,10,.55) 32.5% 34%,rgba(0,0,0,0) 34.5% 65.5%,rgba(90,62,10,.55) 66% 67.5%,rgba(0,0,0,0) 68%),
    linear-gradient(0deg,rgba(0,0,0,0) 46%,rgba(90,62,10,.55) 47% 53%,rgba(0,0,0,0) 54%),
    linear-gradient(135deg,#F3DB93,#C49A3C 55%,#9C7426);box-shadow:inset 0 0 0 .4cqi rgba(80,55,8,.4)}
.meter .m-wave{position:static;width:14cqi;height:14cqi;color:#fff;opacity:.9;stroke-width:1.8}
.meter b{font-size:8.6cqi;font-weight:800;line-height:1.2;color:#fff;letter-spacing:0}
.meter img{width:17cqi;height:auto;filter:invert(1);opacity:.85}

/* NFC screen: the app's header, and antenna rings that breathe until the card is read */
.nfcs{justify-content:center;padding:18cqi 10cqi 10cqi}
.nfcs-head{position:absolute;top:0;inset-inline:0;height:15cqi;display:flex;align-items:center;gap:3cqi;padding:0 6cqi;background:#fff;box-shadow:0 .3cqi 0 #ECECEF;color:#111}
.nfcs-head i{width:8cqi;height:8cqi;border-radius:50%;background:#F1F1F3;flex:none;position:relative}
.nfcs-head i::after{content:"";position:absolute;inset:0;margin:auto;width:2.2cqi;height:2.2cqi;border:solid #111;border-width:.5cqi .5cqi 0 0;transform:translateX(-.4cqi) rotate(45deg)}
[dir=ltr] .nfcs-head i::after{transform:translateX(.4cqi) rotate(-135deg)}
.nfcs-head b{font-size:5.4cqi;font-weight:800}
.nfcs-i{width:38cqi;height:38cqi;background:radial-gradient(circle,#fff 0 58%,#FFF1F3 59% 100%);box-shadow:0 3cqi 10cqi rgba(200,16,46,.18),inset 0 0 0 .5cqi rgba(200,16,46,.22)}
.nfcs-i>.ico{width:17cqi;height:17cqi;stroke-width:1.7}
.nfcs-r{position:absolute;inset:0;border-radius:50%;border:.6cqi solid rgba(200,16,46,.45);animation:nfcr 1.7s cubic-bezier(.2,.6,.3,1) infinite}
.nfcs-r+.nfcs-r{animation-delay:.85s}
@keyframes nfcr{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.nfcs.done .nfcs-r{animation:none;opacity:0}
.nfcs small{font-size:5cqi;font-weight:700;color:#3C3C42;min-height:2.6em;margin-top:3cqi}
.nfcs-bar{height:2.2cqi}

/* handoff: the bill itself travels from the terminal's slot into the phone */
.ho-dot{width:0;height:0;margin:0;background:none;box-shadow:none;border-radius:0;z-index:6}
.ho-chip{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px 0 11px;border-radius:999px;background:#fff;color:#111;font-weight:800;font-size:14px;line-height:1;white-space:nowrap;direction:ltr;
  box-shadow:0 0 0 4px rgba(227,32,62,.28),0 0 34px 6px rgba(227,32,62,.7),0 12px 24px -8px rgba(0,0,0,.6)}
.ho-chip .ico{width:16px;height:16px;color:var(--red);stroke-width:2.2}
.ho-line{z-index:5}

/* phones: no live backdrop blur over the WebGL canvas (it re-rasterises every frame on low-end GPUs) */
@media (max-width:820px){
  .nav.scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,10,11,.94)}
  .nav[data-tone=light].scrolled{background:rgba(250,250,251,.97)}
  .nav[data-tone=red].scrolled{background:rgba(150,9,30,.96)}
}
.menu{background:radial-gradient(80% 60% at 85% 0%,#2A0710 0%,rgba(10,10,11,0) 70%),#0A0A0B}

/* ==========================================================================
   3b. IN NUMBERS: the network monitor (every figure is typed in the dashboard)
   ========================================================================== */
.numbers{padding-block:clamp(100px,15vh,170px) clamp(90px,13vh,150px)}
.nb-head{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 40px;flex-wrap:wrap}
.nb-head .h2{margin:0}
.nb-asof{font-size:14.5px;font-weight:600;color:var(--muted-d);padding-bottom:12px}
.nb-asof[hidden]{display:none}
.nb-band{position:relative;margin-top:clamp(56px,9vh,96px)}
/* the line sits on the band's top edge; its coordinates are built left-to-right in JS for both languages */
.nb-ecg{position:absolute;top:-34px;left:0;width:100%;height:60px;overflow:visible;pointer-events:none}
.nb-ecg path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.nb-base{stroke:rgba(255,255,255,.12);stroke-width:1.5}
/* motion: the pen is drawn frame by frame from JS (in step with the counters); reduced motion: drawn at once */
.nb-draw{stroke:var(--red-hot);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000;filter:drop-shadow(0 0 5px rgba(227,32,62,.9))}
.nb-band.go .nb-draw{stroke-dashoffset:0}
.nb-pulse{stroke:#FFD6DC;stroke-width:2.6;stroke-dasharray:26 3000;stroke-dashoffset:26;opacity:0;filter:drop-shadow(0 0 7px rgba(255,90,112,1)) drop-shadow(0 0 18px rgba(227,32,62,.8))}
.nb-band.go .nb-pulse{animation:nbpulse 4.2s cubic-bezier(.5,0,.5,1) 2s infinite}
@keyframes nbpulse{0%{stroke-dashoffset:26;opacity:0}5%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1000;opacity:0}}
.nb-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.nb-cell{position:relative;padding:46px 30px 6px;border-inline-start:1px solid var(--line-d);transition:opacity .9s var(--e-out),transform .9s var(--e-out);transition-delay:calc(var(--i) * 110ms + 120ms)}
.nb-cell:first-child{border-inline-start:0;padding-inline-start:0}
html.motion .nb-band:not(.go) .nb-cell{opacity:0;transform:translateY(28px)}
.nb-beat{display:none}
/* the row keeps the full-size height, so a long figure that shrinks still shares the baseline and the label line */
.nb-val{display:flex;align-items:flex-end;height:calc(clamp(56px,5.6vw,98px) * 1.05);font-size:calc(clamp(56px,5.6vw,98px) * var(--k,1));font-weight:800;line-height:1.05;color:#fff}
.nb-in{display:inline-flex;align-items:flex-start;gap:.08em}
.nb-v{display:inline-grid}
.nb-v>*{grid-area:1/1}
.nb-ghost{visibility:hidden}
.nb-num{text-align:start;transition:text-shadow .8s}
.nb-cell.counting .nb-num{text-shadow:0 0 38px rgba(227,32,62,.55)}
.nb-suf{font-size:.5em;line-height:1;margin-top:.14em;color:var(--red-hot)}
.nb-cell.done .nb-suf{animation:nbpop .55s var(--e-out)}
@keyframes nbpop{0%{transform:scale(.55)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.nb-label{margin-top:14px;font-size:clamp(15px,1.15vw,18px);font-weight:600;line-height:1.6;color:var(--muted-d)}
/* not set yet: a quiet dash and a tag that says where the figure comes from */
.nb-dash{color:rgba(255,255,255,.18)}
.nb-pending{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.5;color:#FF8A9B;background:rgba(227,32,62,.1);box-shadow:inset 0 0 0 1px rgba(227,32,62,.38)}
.nb-pending .ico{width:14px;height:14px;stroke-width:2}

/* ==========================================================================
   6b. PARTNERS: the logo wall (logos are uploaded in the dashboard)
   ========================================================================== */
.partners{background:#fff;padding-block:clamp(100px,15vh,170px) clamp(90px,13vh,150px);border-top:1px solid var(--line-l);overflow:clip}
.pt-head .h2{margin:0}
/* the owner's paragraph keeps its two lines under the heading (side by side, the English first line wrapped) */
.pt-intro{max-width:62em;margin-top:20px;font-size:clamp(17px,1.3vw,20px);line-height:1.9;color:var(--muted-l);text-wrap:pretty}
.pt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.pt-chips[hidden]{display:none}
.pt-chip{display:inline-flex;align-items:center;gap:8px;height:42px;padding-inline:16px 10px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--grey-1);font-size:14.5px;font-weight:700;color:var(--muted-l);white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.pt-chip small{min-width:24px;height:24px;padding-inline:7px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:800;background:#fff;color:var(--grey-3)}
.pt-chip:hover{color:var(--ink-1);box-shadow:inset 0 0 0 1px var(--grey-2)}
.pt-chip[aria-pressed=true]{background:var(--ink-1);color:#fff;box-shadow:none}
.pt-chip[aria-pressed=true] small{background:var(--red);color:#fff}
.pt-wall{margin-top:clamp(38px,6vh,62px)}
.pt-wall>*{transition:opacity .26s}
.pt-wall.swap>*{opacity:0}

/* marquee rows: each rides a thin wire that a pulse runs along; the tiles sit on top of the wire */
.pt-row{position:relative;overflow:hidden;padding-block:14px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent)}
.pt-row+.pt-row{margin-top:2px}
.pt-row::before{content:"";position:absolute;z-index:0;inset-inline:0;top:50%;height:1px;background:rgba(200,16,46,.2)}
.pt-row::after{content:"";position:absolute;z-index:0;left:0;top:50%;width:150px;height:3px;margin-top:-1px;border-radius:3px;background:linear-gradient(to right,rgba(227,32,62,0),rgba(227,32,62,.9) 72%,#FF9AA9);box-shadow:0 0 12px rgba(227,32,62,.6);animation:ptpulse 6s cubic-bezier(.45,0,.55,1) infinite}
.pt-row--rev::after{animation-delay:-3s}
[dir=rtl] .pt-row::after{animation-name:ptpulse-rtl}
@keyframes ptpulse{from{transform:translateX(-170px)}to{transform:translateX(100vw)}}
@keyframes ptpulse-rtl{from{transform:translateX(100vw) scaleX(-1)}to{transform:translateX(-170px) scaleX(-1)}}
/* the moving track is its own stacking context: it must sit above the wire and its pulse as a whole */
.pt-track{position:relative;z-index:1;display:flex;width:max-content;animation:ptl var(--dur,60s) linear infinite}
[dir=rtl] .pt-track{animation-name:ptr}
.pt-row--rev .pt-track{animation-direction:reverse}
.pt-row:hover .pt-track,.pt-row:focus-within .pt-track{animation-play-state:paused}
@keyframes ptl{to{transform:translate3d(-50%,0,0)}}
@keyframes ptr{to{transform:translate3d(50%,0,0)}}
.pt-set{display:flex;gap:18px;padding-inline-end:18px}
.pt-tile{position:relative;z-index:1;flex:none;width:212px;height:112px}
.pt-in{display:grid;place-items:center;width:100%;height:100%;padding:18px 26px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line-l),0 16px 30px -24px rgba(17,17,17,.3);transition:transform .45s var(--e-out),box-shadow .35s,border-color .35s}
.pt-in img{max-width:100%;max-height:58px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .45s,opacity .45s}
.pt-tile:hover .pt-in,.pt-in:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1.5px rgba(200,16,46,.3),0 22px 36px -22px rgba(200,16,46,.42)}
.pt-tile:hover img,.pt-in:focus-visible img{filter:none;opacity:1}
.pt-name{font-size:16px;font-weight:800;line-height:1.4;text-align:center;color:var(--grey-4)}
@media (hover:none){.pt-in img{filter:none;opacity:1}}
/* an empty slot: what the owner fills from the dashboard */
.pt-slot .pt-in{align-content:center;gap:3px;text-align:center;border:1.5px dashed var(--grey-2);box-shadow:none;
  background:repeating-linear-gradient(-45deg,rgba(17,17,17,.025) 0 6px,rgba(17,17,17,0) 6px 12px),#fff}
.pt-slot .ico{width:24px;height:24px;margin:0 auto 3px;color:#A9A9B1;stroke-width:1.6;transition:color .3s}
.pt-slot b{font-size:14.5px;font-weight:700;line-height:1.35;color:#66666E}
.pt-slot small{font-size:12px;font-weight:600;line-height:1.35;color:#96969E}
.pt-slot:hover .pt-in{border-color:rgba(200,16,46,.55);box-shadow:0 22px 36px -24px rgba(200,16,46,.35)}
.pt-slot:hover .ico{color:var(--red)}
/* still grid: phones, reduced motion, or fewer than four logos */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.pt-grid .pt-tile{width:auto}
@media (min-width:821px){
  /* a still wall on a wide screen (reduced motion, or a filter leaving only a few logos) is centred, never ragged */
  .pt-wall.is-grid .pt-grid{display:flex;flex-wrap:wrap;justify-content:center}
  .pt-wall.is-grid .pt-tile{width:228px}
}
.rm .pt-row::after{display:none}

@media (max-width:820px){
  .nb-head{flex-direction:column;align-items:flex-start;gap:6px}
  .nb-asof{padding-bottom:0}
  .nb-band{margin-top:30px}
  .nb-ecg{display:none}
  .nb-grid{grid-template-columns:1fr 1fr}
  .nb-cell,.nb-cell:first-child{padding:24px 0 22px;border-inline-start:0;border-top:1px solid var(--line-d)}
  .nb-cell:nth-child(odd){padding-inline-end:14px}
  .nb-cell:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--line-d)}
  .nb-beat{display:block;width:30px;height:14px;margin-bottom:12px;color:var(--red-hot)}
  .nb-val{height:calc(clamp(42px,12.5vw,58px) * 1.05);font-size:calc(clamp(42px,12.5vw,58px) * var(--k,1))}
  .nb-label{margin-top:8px;font-size:14.5px}
  .nb-pending{margin-top:10px;font-size:11.5px;padding:3px 9px}

  .pt-intro{margin-top:12px;font-size:16px;line-height:1.85}
  .pt-intro .ln{display:inline}
  .pt-chips{flex-wrap:nowrap;overflow-x:auto;margin-top:24px;margin-inline:calc(-1 * var(--pad));padding-inline:var(--pad);scrollbar-width:none}
  .pt-chips::-webkit-scrollbar{display:none}
  .pt-chip{flex:none;height:40px;font-size:14px}
  .pt-wall{margin-top:26px}
  .pt-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pt-grid .pt-tile{height:96px}
  .pt-in{padding:12px 14px;border-radius:16px}
  .pt-in img{max-height:44px}
  .pt-slot .ico{width:20px;height:20px}
  .pt-slot b{font-size:13px}
  .pt-slot small{font-size:11px}
}
/* the wordmark gives way only when the header row cannot fit; it stays readable to screen readers */
.nav-tight .brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ==========================================================================
   social accounts and app downloads (the dashboard's «حسابات التواصل الاجتماعي» and «روابط تحميل التطبيق»)
   ========================================================================== */
/* brand marks are filled shapes; the site's own icons are strokes */
.ico--fill{fill:currentColor;stroke:none}
.socials{display:flex;flex-wrap:wrap;gap:10px}
/* these carry a display of their own, which would beat the hidden attribute */
.socials[hidden],.c-list li[hidden],.m-apps[hidden]{display:none}
.socials .soc{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);line-height:0;transition:background .25s,box-shadow .25s,transform .35s var(--e-out)}
.socials .soc .ico{width:20px;height:20px;margin:0;color:inherit}
.socials .soc:hover,.socials .soc:focus-visible{color:#fff;background:var(--red);box-shadow:inset 0 0 0 1px var(--red-hot),0 12px 26px -12px rgba(227,32,62,.85);transform:translateY(-2px)}
.c-list .socials{margin-top:10px}
.foot-social{margin-top:22px}

/* a store with a link: the stores' own black badge; without one it keeps the quiet «قريباً على» look above */
.store--on{cursor:pointer;color:#fff;background:#050506;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 12px 26px -16px rgba(0,0,0,.9);transition:box-shadow .25s,transform .35s var(--e-out)}
.store--on small{opacity:.78}
.store--on:hover,.store--on:focus-visible{box-shadow:inset 0 0 0 1.5px var(--red-hot),0 16px 30px -14px rgba(227,32,62,.65);transform:translateY(-2px)}
/* «للتجار»: the merchant app's buttons under the chapter's call to action, on red */
.m-apps{margin-top:34px}
.m-apps-t{font-size:15px;font-weight:700;line-height:1.5;color:rgba(255,255,255,.92);margin-bottom:12px}
.m-apps .stores{margin-bottom:0}
.m-apps .store:not(.store--on){background:rgba(0,0,0,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);color:rgba(255,255,255,.88)}
.m-apps .store--on:hover,.m-apps .store--on:focus-visible{box-shadow:inset 0 0 0 1.5px #fff,0 16px 30px -14px rgba(0,0,0,.7)}
/* «قريباً» next to the app's name: emptied in the dashboard once the app is out, it leaves no empty pill */
.soon:empty{display:none}
/* phones: the buttons in two even columns rather than a ragged wrap */
@media (max-width:560px){
  .stores--apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stores--apps .store{min-width:0;padding-inline:12px 10px;gap:10px}
  .stores--apps .store b{font-size:16px;white-space:nowrap}
}