/* GYW project pages — shared stylesheet (hand-built pages under /project/<slug>/). Fonts = the studio's self-hosted faces. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/cairo-700-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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:700;font-display:swap;src:url('/fonts/cairo-700-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}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-400-arabic.woff2') format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-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-10EC4, U+10EFC-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:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-arabic-400-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{--bg:#05090C;--bg2:#0A1115;--surface:#0F1920;--surface2:#15232B;--glass:rgba(17,28,35,.66);--line:#20323B;--line-soft:#142028;
  --ink:#F4F9FB;--ink-dim:#C9D9DF;--muted:#7B929C;--brass:#E9BE4A;--brass-mid:#BC932B;--brass-deep:#7A5F18;--wash:rgba(233,190,74,.09);
  --wa:#25D366;--ok:#33d69f;--f-head:"Cairo","Segoe UI",system-ui,sans-serif;--f-body:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--ease:cubic-bezier(.22,1,.36,1);
  /* per-project accent: every page overrides these three */
  --ac:#E9BE4A;--ac2:#F5CF72;--ac-rgb:233,190,74;--ac-ink:#04120A}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.8;overflow-x:hidden}
img,video{max-width:100%}
a{color:var(--ac2)}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:700;text-wrap:balance;line-height:1.4}
h1{font-size:clamp(30px,5.4vw,52px);line-height:1.3}
h2{font-size:clamp(24px,4vw,36px)}
h3{font-size:clamp(18px,2.6vw,23px)}
h4{font-size:17px}
p{margin:0}
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:20px}
.muted{color:var(--muted)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ── top bar ───────────────────────────────────────────── */
.px-top{position:relative;z-index:5;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(5,9,12,.92),rgba(5,9,12,.6));backdrop-filter:blur(8px)}
.px-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:12px;flex-wrap:wrap}
.px-top a{color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s}
.px-top a:hover{color:var(--ac2)}
.px-top .home{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--f-head);font-weight:700}
.px-top .home b{color:var(--brass);letter-spacing:2px}
.px-top nav{display:flex;gap:18px;flex-wrap:wrap}

/* ── hero ──────────────────────────────────────────────── */
.px-hero{position:relative;overflow:hidden;padding:54px 0 36px;isolation:isolate}
.px-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:
  radial-gradient(900px 420px at 85% -10%,rgba(var(--ac-rgb),.20),transparent 60%),
  radial-gradient(700px 400px at 5% 110%,rgba(var(--ac-rgb),.10),transparent 60%),
  linear-gradient(180deg,#07101A,var(--bg) 70%)}
.px-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;opacity:.75;pointer-events:none}
.px-hero-in{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media (min-width:940px){.px-hero-in{grid-template-columns:1.02fr .98fr;gap:46px}}
.px-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.px-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;font-family:var(--f-head);padding:6px 12px;border-radius:999px;
  border:1px solid rgba(var(--ac-rgb),.35);background:rgba(var(--ac-rgb),.08);color:var(--ac2)}
.px-chip.soft{border-color:var(--line);background:rgba(255,255,255,.03);color:var(--ink-dim)}
.px-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 0 rgba(var(--ac-rgb),.6);animation:px-ping 2.2s infinite}
@keyframes px-ping{0%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),.55)}70%{box-shadow:0 0 0 9px rgba(var(--ac-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ac-rgb),0)}}
.px-title{margin-bottom:14px}
.px-title em{font-style:normal;color:var(--ac2);background:linear-gradient(100deg,var(--ac),var(--ac2));-webkit-background-clip:text;background-clip:text;color:transparent}
.px-lede{font-size:clamp(16px,2vw,19px);color:var(--ink-dim);max-width:60ch;line-height:1.95}
.px-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:12px;font-family:var(--f-head);font-weight:700;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s;line-height:1.3}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:var(--ac-ink);background:linear-gradient(100deg,var(--ac),var(--ac2));box-shadow:0 14px 34px -14px rgba(var(--ac-rgb),.9)}
.btn-ghost{color:var(--ink);border-color:var(--line);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--ac)}
.btn-wa{color:#04120A;background:var(--wa)}
.px-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:28px}
@media (min-width:560px){.px-facts{grid-template-columns:repeat(4,1fr)}}
.px-fact{background:var(--glass);border:1px solid var(--line-soft);border-radius:12px;padding:10px 14px}
.px-fact u{display:block;text-decoration:none;color:var(--muted);font-size:12px;margin-bottom:2px}
.px-fact b{font-family:var(--f-head);font-size:14.5px;color:var(--ink)}

/* device frames */
.px-visual{position:relative;display:flex;justify-content:center}
.px-visual::before{content:"";position:absolute;inset:10% 6%;z-index:-1;border-radius:40%;background:radial-gradient(closest-side,rgba(var(--ac-rgb),.28),transparent 70%);filter:blur(30px)}
.px-device{position:relative;border:1px solid var(--line);border-radius:16px;background:#0A1117;box-shadow:0 40px 90px -36px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;animation:px-float 7s ease-in-out infinite}
.px-device.browser{width:100%;max-width:640px}
.px-device .chrome{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line-soft);background:#0E161D}
.px-device .dots{display:flex;gap:5px}.px-device .dots i{width:9px;height:9px;border-radius:50%;background:#2A3942;display:block}
.px-device .dots i:nth-child(1){background:#E27A6A}.px-device .dots i:nth-child(2){background:#E9BE4A}.px-device .dots i:nth-child(3){background:#33d69f}
.px-device .urlbar{flex:1;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line-soft);border-radius:7px;padding:4px 10px;direction:ltr;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.px-device video,.px-device img{display:block;width:100%;height:auto;background:#000}
.px-device.phone{width:270px;border-radius:36px;padding:10px;background:#0B1218;border:1px solid #2A3942;animation-duration:8s}
.px-device.phone .scr{position:relative;border-radius:28px;overflow:hidden;background:#000}
.px-device.phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:999px;background:#0B1218;z-index:2}
.px-duo{position:relative;display:grid;grid-template-columns:1fr;gap:16px;justify-items:center;width:100%}
@media (min-width:560px){.px-duo{display:block;padding:0 0 34px 54px}.px-duo .px-device.browser{max-width:none}
  .px-duo .px-device.phone{position:absolute;bottom:0;left:0;width:176px;padding:7px;border-radius:26px;z-index:2;animation-delay:-3s}
  .px-duo .px-device.phone .scr{border-radius:20px}.px-duo .px-device.phone .notch{width:60px;height:14px;top:5px}}
@keyframes px-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.px-tags{position:absolute;inset:0;pointer-events:none;z-index:3}
.px-tag{position:absolute;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;font-family:var(--f-head);padding:7px 12px;border-radius:10px;
  background:rgba(10,17,23,.92);border:1px solid rgba(var(--ac-rgb),.4);color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.8);opacity:0;transform:translateY(10px);
  animation:px-tag 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.px-tag i{width:8px;height:8px;border-radius:50%;background:var(--ok);display:block}
@keyframes px-tag{0%,8%{opacity:0;transform:translateY(10px)}14%,42%{opacity:1;transform:translateY(0)}50%,100%{opacity:0;transform:translateY(-8px)}}

/* ── stats strip ───────────────────────────────────────── */
.px-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:34px 0 0}
@media (min-width:700px){.px-stats{grid-template-columns:repeat(4,1fr)}}
.px-stat{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;position:relative;overflow:hidden}
.px-stat::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--ac),transparent)}
.px-stat .n{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,4vw,36px);line-height:1.1;color:var(--ac2);font-variant-numeric:tabular-nums}
.px-stat .l{color:var(--muted);font-size:13px;margin-top:4px}

/* ── sections ──────────────────────────────────────────── */
.px-sec{padding:56px 0 8px}
.px-head{max-width:70ch;margin-bottom:26px}
.px-head .kick{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-size:13px;font-weight:700;color:var(--ac2);letter-spacing:.5px;margin-bottom:10px}
.px-head .kick::before{content:"";width:28px;height:1px;background:var(--ac);flex:none}
.px-head p{color:var(--muted);font-size:16px;margin-top:10px}

.px-story{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:820px){.px-story{grid-template-columns:1fr 1fr}}
.px-pane{border:1px solid var(--line-soft);border-radius:16px;padding:22px 24px;background:var(--surface);position:relative}
.px-pane .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-head);font-weight:700;font-size:12.5px;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.px-pane.problem .tag{color:#E27A6A;background:rgba(226,122,106,.1);border:1px solid rgba(226,122,106,.25)}
.px-pane.solution{border-color:rgba(var(--ac-rgb),.35);background:linear-gradient(160deg,rgba(var(--ac-rgb),.08),var(--surface) 60%)}
.px-pane.solution .tag{color:var(--ac2);background:rgba(var(--ac-rgb),.1);border:1px solid rgba(var(--ac-rgb),.3)}
.px-pane h3{margin-bottom:8px}
.px-pane p{color:var(--ink-dim);font-size:15.5px}
.px-pane p+p{margin-top:10px}

.px-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){.px-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.px-grid{grid-template-columns:repeat(3,1fr)}.px-grid.four{grid-template-columns:repeat(4,1fr)}.px-grid.two{grid-template-columns:repeat(2,1fr)}}
.px-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:18px 18px 16px;transition:border-color .25s,transform .25s var(--ease)}
.px-card:hover{border-color:rgba(var(--ac-rgb),.45);transform:translateY(-3px)}
.px-card .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px;background:rgba(var(--ac-rgb),.12);border:1px solid rgba(var(--ac-rgb),.25);margin-bottom:12px}
.px-card h4{margin-bottom:6px}
.px-card p{color:var(--muted);font-size:14.5px;line-height:1.8}

.px-groups{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.px-groups{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.px-groups{grid-template-columns:repeat(3,1fr)}}
.px-group{background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px}
.px-group h4{display:flex;align-items:center;gap:9px;margin-bottom:10px;color:var(--ac2)}
.px-list{list-style:none;margin:0;padding:0}
.px-list li{position:relative;padding-inline-start:22px;color:var(--ink-dim);font-size:14.5px;line-height:1.7;padding-block:4px;border-top:1px dashed var(--line-soft)}
.px-list li:first-child{border-top:0}
.px-list li::before{content:"✓";position:absolute;inset-inline-start:0;top:4px;color:var(--ac);font-weight:700;font-size:13px}

/* ── live vignette (per-page animated mock) ────────────── */
.px-vignette{position:relative;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#0C151D,#070D13);padding:22px;overflow:hidden;box-shadow:var(--shadow,0 24px 60px -24px rgba(0,0,0,.7))}
.px-vignette::before{content:"";position:absolute;inset:-40% -20% auto auto;width:60%;height:120%;background:radial-gradient(closest-side,rgba(var(--ac-rgb),.14),transparent);pointer-events:none}
.px-vignette .lbl{position:absolute;top:12px;inset-inline-start:14px;font-size:11.5px;font-family:var(--f-head);font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.px-vignette .lbl i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:mk-pulse 1.6s infinite}
.mk{font-size:13.5px}
.mk-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;background:rgba(255,255,255,.02);margin-top:8px}
.mk-row b{font-family:var(--f-head)}
.mk-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:rgba(var(--ac-rgb),.12);color:var(--ac2);border:1px solid rgba(var(--ac-rgb),.3);font-family:var(--f-head)}
.mk-pill.ok{background:rgba(51,214,159,.12);color:var(--ok);border-color:rgba(51,214,159,.3)}
.mk-pill.warn{background:rgba(233,190,74,.12);color:#F5CF72;border-color:rgba(233,190,74,.3)}
.mk-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;flex:1}
.mk-bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--ac),var(--ac2))}
.in .mk-bar i{animation:mk-grow 1.6s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes mk-grow{to{width:var(--w,70%)}}
.mk-eq{display:flex;align-items:flex-end;gap:3px;height:34px}
.mk-eq i{width:4px;background:var(--ac);border-radius:2px;height:30%;opacity:.9}
.in .mk-eq i{animation:mk-eq 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*.09s)}
@keyframes mk-eq{from{height:18%}to{height:100%}}
.mk-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block}
.mk-dot.live{animation:mk-pulse 1.4s infinite}
@keyframes mk-pulse{0%{box-shadow:0 0 0 0 rgba(51,214,159,.6)}70%{box-shadow:0 0 0 8px rgba(51,214,159,0)}100%{box-shadow:0 0 0 0 rgba(51,214,159,0)}}
.mk-stagger>*{opacity:0;transform:translateY(8px)}
.in .mk-stagger>*{animation:mk-in .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*.22s + .2s)}
@keyframes mk-in{to{opacity:1;transform:none}}
.mk-loop{animation:none}
.in .mk-loop{animation:mk-cycle 8s ease-in-out infinite}
@keyframes mk-cycle{0%,100%{opacity:1}}
.mk-counter{font-family:var(--f-head);font-weight:700;font-size:28px;color:var(--ac2);font-variant-numeric:tabular-nums}
.mk-screen{border:1px solid var(--line-soft);border-radius:12px;background:#0A1117;overflow:hidden}
.mk-screen .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line-soft);background:#0E161D;font-size:12px;color:var(--muted)}
.mk-screen .bd{padding:12px}
.mk-type::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ac);margin-inline-start:3px;vertical-align:-2px;animation:mk-caret 1s steps(2) infinite}
@keyframes mk-caret{to{opacity:0}}
.mk-scan{position:relative;overflow:hidden}
.in .mk-scan::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(var(--ac-rgb),.25),transparent);transform:translateY(-100%);animation:mk-scan 2.6s ease-in-out infinite}
@keyframes mk-scan{to{transform:translateY(100%)}}
.mk-split{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.mk-split{grid-template-columns:1fr 1fr}}

/* ── gallery + reel ─────────────────────────────────────── */
.px-shots{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.px-shots{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.px-shots{grid-template-columns:repeat(3,1fr)}}
.px-shot{margin:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;cursor:zoom-in;transition:border-color .25s,transform .25s var(--ease)}
.px-shot:hover{border-color:rgba(var(--ac-rgb),.5);transform:translateY(-3px)}
.px-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#000}
.px-shot.tall img{aspect-ratio:9/16;object-fit:cover}
.px-shot figcaption{padding:10px 14px;font-size:13px;color:var(--muted);border-top:1px solid var(--line-soft)}
.px-phones{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.px-phones .px-device.phone{animation:none;width:230px}
.px-phones .px-device.phone img{cursor:zoom-in}
.px-reel{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.px-reel video{display:block;width:100%;height:auto}
.px-reel .play{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,rgba(0,0,0,.1),rgba(0,0,0,.45));cursor:pointer;transition:opacity .3s}
.px-reel .play span{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(100deg,var(--ac),var(--ac2));color:var(--ac-ink);font-size:30px;box-shadow:0 20px 50px -14px rgba(var(--ac-rgb),.9);padding-inline-start:5px}
.px-reel.playing .play{opacity:0;pointer-events:none}
.px-lb{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(3,6,8,.92);cursor:zoom-out}
.px-lb.open{display:flex}
.px-lb img{max-width:min(1400px,96vw);max-height:92vh;width:auto;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:0 40px 90px -30px #000}

/* ── numbers table + stack ──────────────────────────────── */
.px-nums{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line-soft);border-radius:14px;overflow:hidden;font-size:14.5px}
.px-nums td{padding:11px 16px;border-top:1px solid var(--line-soft)}
.px-nums tr:first-child td{border-top:0}
.px-nums td:first-child{color:var(--muted);width:46%}
.px-nums td:last-child{font-family:var(--f-head);font-weight:700;color:var(--ink)}
.px-stack{display:flex;flex-wrap:wrap;gap:8px}
.px-stack span{font-size:12.5px;font-weight:700;font-family:var(--f-head);padding:6px 12px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--ink-dim)}
.px-two{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:860px){.px-two{grid-template-columns:1fr 1fr}}

/* ── CTA band + footer ─────────────────────────────────── */
.px-band{margin:64px 0 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:
  radial-gradient(800px 300px at 50% 0%,rgba(var(--ac-rgb),.14),transparent 70%),var(--bg2)}
.px-band .wrap{padding-block:48px;text-align:center}
.px-band h2{margin-bottom:10px}
.px-band p{color:var(--muted);max-width:60ch;margin-inline:auto}
.px-band .px-cta{justify-content:center}
.px-next{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:26px 0}
.px-next a{text-decoration:none;color:var(--ac2);font-family:var(--f-head);font-weight:700}
.px-next a:hover{text-decoration:underline}
.px-foot{text-align:center;color:var(--muted);font-size:13px;padding:10px 20px 40px}
.px-foot a{color:var(--brass);text-decoration:none}

/* ── reveal + motion prefs ─────────────────────────────── */
.rev{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .px-device,.px-tag,.px-chip .dot,.mk-dot.live,.in .mk-eq i,.in .mk-scan::after{animation:none!important}
  .px-tag{opacity:1;transform:none}
  .in .mk-bar i{animation:none;width:var(--w,70%)}
  .mk-stagger>*{opacity:1;transform:none}
}