/* Сцени процесу на /features (2026-10-05): F-ADS, F-CARDS, F-SAFE, F-AUTO.
   Граматика — overhaul/Direction_H6v2_2026-10-05.md §2. Еталон — proto_h6v2.
   ⚠ Префікс px-: НІКОЛИ ad-/ads-/banner-/promo- (блокувальники ховають такі класи).
   ⚠ PENDING RIGHTS: фото беруться з маніфесту EXPLAINER_PACK (backend/services/site_render.py).

   Правила руху: лише transform / opacity / clip-path. Усі стани сцен-прокрутки — функція
   одного числа p (proc.js, render(p)). Фіолетовий = AI працює, бурштин = готово / ваша дія.
   Стан за замовчуванням у CSS — кінцевий кадр (для карток і AUTO); пінові сцени без JS
   показують лише текст (сцена з'являється, коли JS поставить .px-js). */

.px-sec{
  --px-fg:#f6f4f1; --px-dim:#b6b2ab; --px-faint:#8d8982; --px-line:rgba(255,255,255,.08);
  --px-vio:var(--brand-violet); --px-vink:#a892ff; --px-amb:var(--brand-amber);
  --px-glow:color-mix(in srgb,var(--brand-violet) 55%,transparent);
  --px-bg:var(--brand-bg);
  position:relative;
}

/* ── пін: одна довжина доріжки на всіх екранах, без стрибка на межах (чистий CSS sticky) ── */
.px-run{ height:420vh; position:relative }
.px-sticky{ position:sticky; top:0; height:100vh; height:100svh; display:flex; align-items:center; overflow:hidden }
.px-sticky > .wrap{ width:100% }
.px-sec .wrap.fe-grid{ align-items:center }
.px-txt-m{ display:none }

/* ліва колонка: кроки */
.px-rail{ list-style:none; margin:30px 0 0; padding:0; display:grid; gap:4px }
.px-rail li{ display:flex; align-items:center; gap:14px; font-size:17px; color:var(--faint); padding:7px 0; transition:color .3s }
.px-rail i{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:400 12px var(--mono); font-style:normal;
  border:1px solid var(--line,rgba(255,255,255,.14)); color:var(--faint);
  transition:background .3s,border-color .3s,color .3s,box-shadow .3s }
.px-rail li.on{ color:var(--fg) }
.px-rail li.on i{ background:var(--px-vio); border-color:transparent; color:#fff; box-shadow:0 0 0 5px color-mix(in srgb,var(--px-vio) 22%,transparent) }
.px-rail li.done{ color:var(--dim) }
.px-rail li.done i{ background:var(--px-amb); border-color:transparent; color:#1b1206 }

/* ── сцена: дизайн-простір --w × --h, масштаб --k ставить JS ── */
.px-card{
  --w:880; --h:600;
  position:relative; width:min(100%, calc((100vh - 96px) * var(--w) / var(--h)));
  aspect-ratio:calc(var(--w)) / calc(var(--h));
  margin:0 auto; overflow:hidden; opacity:0;
  box-shadow:var(--so-depth-2),0 60px 120px -40px rgba(0,0,0,.8);
}
.px-card.px-js{ opacity:1 }
.px-sp{ position:absolute; left:0; top:0; width:calc(var(--w) * 1px); height:calc(var(--h) * 1px);
  transform-origin:0 0; transform:scale(var(--k,1)); z-index:2; color:var(--px-fg) }
.px-sp img{ display:block }
.px-sp-a *{ position:absolute }
.mono-px{ font-family:var(--mono) }

.px-bar{ left:0; top:0; width:880px; height:56px; border-bottom:1px solid var(--px-line); display:flex; align-items:center }
.px-bar > *{ position:static !important }
.px-dots{ display:flex; gap:7px; margin-left:24px }
.px-dots i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.12) }
.px-cap{ margin-left:18px; font:400 13px var(--mono); letter-spacing:.04em; color:var(--px-dim) }
.px-chips{ margin-left:auto; margin-right:20px; display:flex; gap:6px }
.px-chips b{ position:relative; display:flex; align-items:center; gap:7px; height:28px; padding:0 11px 0 9px; border-radius:99px; font:500 12.5px var(--sans);
  color:var(--px-faint); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.06) }
.px-chips b > *{ position:static !important }
.px-chips em{ font-style:normal }
.px-chips s{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.18) }
.px-chips b.on{ color:#fff; background:color-mix(in srgb,var(--px-vio) 22%,transparent); border-color:color-mix(in srgb,var(--px-vio) 45%,transparent) }
.px-chips b.on s{ background:var(--px-vink); box-shadow:0 0 0 3px color-mix(in srgb,var(--px-vio) 35%,transparent) }
.px-chips b.done{ color:var(--px-fg) }
.px-chips b.done s{ background:var(--px-amb) }

/* товар: вирізаний пекшот на кремовій плитці */
.px-prod{ left:28px; top:104px; width:156px; height:270px; transform-origin:0 0 }
.px-prod-t{ inset:0; border-radius:18px; overflow:hidden;
  background:radial-gradient(110% 80% at 50% 28%,oklch(.97 .01 85),oklch(.86 .02 75) 70%,oklch(.78 .025 70));
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px -18px rgba(0,0,0,.8) }
.px-prod-t::after{ content:""; position:absolute; left:24%; right:24%; bottom:52px; height:14px; border-radius:50%; background:rgba(40,25,10,.35); filter:blur(7px) }
.px-prod-t img{ left:14px; top:58px; width:128px; height:auto; z-index:1; transform:scale(var(--pz,1)); transform-origin:50% 80% }
.px-prod-l{ left:0; top:-1px; right:0; height:30px; display:flex; align-items:center; padding:0 12px; font:500 11px var(--sans); letter-spacing:.08em; text-transform:uppercase;
  color:oklch(.35 .03 60); z-index:2 }

.px-ruler{ left:0; top:0; width:880px; height:600px; overflow:visible; pointer-events:none }
.px-ruler-p{ fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:var(--rd,1);
  transform-box:view-box; transform-origin:184px 400px; transform:var(--rt,none) }

/* кадри розкадровки: креслення → проявлення */
.px-shot{ margin:0; transform-origin:50% 50% }
.px-shot-in{ inset:0; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),#16130f;
  box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 20px 40px -20px rgba(0,0,0,.9) }
.px-shot-in::before{ content:""; position:absolute; inset:0; opacity:calc(1 - var(--r,0));
  background:radial-gradient(90% 55% at 50% 58%,color-mix(in srgb,var(--px-vio) 20%,transparent),transparent 72%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 18px) }
.px-shot-in img{ inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 calc((1 - var(--r,0)) * 100%) 0);
  transform:scale(var(--kb,1.1)); transform-origin:50% 40% }
.px-scan{ left:0; right:0; height:2px; top:0; transform:translateY(calc(var(--r,0) * var(--sh,270) * 1px)); background:linear-gradient(90deg,transparent,var(--px-vink),#fff,var(--px-vink),transparent);
  box-shadow:0 0 18px 4px var(--px-glow); opacity:var(--so,0) }
.px-br{ inset:12px; opacity:var(--bo,1); --c1:rgba(255,255,255,.55);
  background:
   linear-gradient(var(--c1),var(--c1)) 0 0/16px 1.5px no-repeat,linear-gradient(var(--c1),var(--c1)) 0 0/1.5px 16px no-repeat,
   linear-gradient(var(--c1),var(--c1)) 100% 0/16px 1.5px no-repeat,linear-gradient(var(--c1),var(--c1)) 100% 0/1.5px 16px no-repeat,
   linear-gradient(var(--c1),var(--c1)) 0 100%/16px 1.5px no-repeat,linear-gradient(var(--c1),var(--c1)) 0 100%/1.5px 16px no-repeat,
   linear-gradient(var(--c1),var(--c1)) 100% 100%/16px 1.5px no-repeat,linear-gradient(var(--c1),var(--c1)) 100% 100%/1.5px 16px no-repeat }
.px-sn{ left:26px; top:24px; font:400 11px var(--mono); letter-spacing:.1em; color:rgba(255,255,255,.7); text-shadow:0 1px 6px rgba(0,0,0,.6) }
.px-ok{ right:-7px; top:-7px; width:24px; height:24px; border-radius:50%; background:var(--px-amb); transform:scale(var(--c,0));
  box-shadow:0 0 0 3px var(--px-bg),0 6px 16px -4px rgba(240,165,0,.6) }
.px-ok::after{ content:""; position:absolute; left:8px; top:5px; width:6px; height:10px; border:solid #1b1206; border-width:0 2px 2px 0; transform:rotate(45deg) }

.px-tk{ width:0; height:0 }
.px-tk i{ left:-.75px; top:-5px; width:1.5px; height:10px; background:rgba(255,255,255,.35) }
.px-tk b{ left:-60px; width:120px; top:13px; text-align:center; font:400 12px var(--mono); color:var(--px-fg); letter-spacing:.04em }
.px-tk em{ left:-74px; width:148px; top:34px; text-align:center; font:400 13.5px/1.35 var(--sans); font-style:normal; color:var(--px-dim) }

/* рендер */
.px-rnd{ left:124px; top:84px; width:452px; height:220px }
.px-pill{ left:0; top:4px; display:flex; align-items:center; gap:8px; height:28px; padding:0 12px 0 10px; border-radius:99px; font:400 12px var(--mono); letter-spacing:.06em;
  color:var(--px-vink); background:color-mix(in srgb,var(--px-vio) 16%,transparent); border:1px solid color-mix(in srgb,var(--px-vio) 40%,transparent) }
.px-pill > *{ position:static !important }
.px-pill s{ width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor }
.px-pill em{ font-style:normal }
.px-pill .d{ display:none }
.px-rnd.done .px-pill{ color:var(--px-amb); background:color-mix(in srgb,var(--px-amb) 14%,transparent); border-color:color-mix(in srgb,var(--px-amb) 45%,transparent) }
.px-rnd.done .px-pill .w{ display:none } .px-rnd.done .px-pill .d{ display:inline }
.px-rnd h3{ left:0; top:52px; width:330px; margin:0; font:400 30px/1.12 var(--serif); color:var(--px-fg); letter-spacing:-.005em }
.px-pbar{ left:0; top:150px; width:320px; height:6px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden }
.px-pbar i{ inset:0; border-radius:inherit; background:linear-gradient(90deg,var(--brand-violet),var(--brand-violet-2) 55%,var(--px-amb)); transform-origin:0 50%; transform:scaleX(var(--pb,0)) }
.px-mc{ left:342px; top:56px; width:104px; height:104px; transform-origin:50% 90% }
.px-mc svg{ left:0; top:0; width:100%; height:100%; position:absolute }

/* доріжки */
.px-tracks{ --tw:548px; --lc:76px; --cw:114px; --ch:72px; left:28px; top:300px; width:var(--tw); height:200px }
.px-tl{ left:0; width:calc(var(--lc) - 8px); font:500 11px/20px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--px-faint) }
.px-clips,.px-wave,.px-caps{ left:var(--lc); width:calc(var(--tw) - var(--lc)) }
.px-clips{ top:0; height:var(--ch) }
.px-clips i{ top:0; height:var(--ch); left:calc((var(--i) - 1) * (var(--cw) + 4px)); width:var(--cw); border-radius:9px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
  transform:translateY(calc((1 - var(--ci,1)) * 14px)); opacity:var(--ci,1) }
.px-clips img{ inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30% }
.px-wave{ top:84px; height:40px; border-radius:9px; background:rgba(255,255,255,.03); box-shadow:0 0 0 1px rgba(255,255,255,.05) inset; overflow:hidden }
.px-wave b{ bottom:50%; width:3px; border-radius:2px; background:var(--px-vink); transform-origin:50% 50%; translate:0 50% }
.px-caps{ top:134px; height:24px }
.px-caps i{ left:calc(var(--x) * 100%); width:calc(var(--w) * 100%); height:24px; border-radius:7px;
  background:color-mix(in srgb,#fff 9%,transparent); box-shadow:0 0 0 1px rgba(255,255,255,.07) inset; transform-origin:0 50%; transform:scaleX(var(--ce,0)) }
.px-caps i::after{ content:""; position:absolute; left:10px; right:30%; top:10px; height:4px; border-radius:2px; background:rgba(255,255,255,.35) }
.px-head{ left:var(--lc); top:-10px; width:0; height:182px; opacity:var(--ho,0); transform:translateX(calc(var(--ph,0) * (var(--tw) - var(--lc)))) }
.px-head i{ left:-1px; top:0; width:2px; height:100%; background:var(--px-amb); box-shadow:0 0 12px rgba(240,165,0,.6) }
.px-head::before{ content:""; position:absolute; left:-7px; top:-6px; width:14px; height:14px; border-radius:4px 4px 7px 7px; background:var(--px-amb) }

/* телефон */
.px-ph{ --phs:1; left:604px; top:80px; width:248px; height:441px; border-radius:36px; background:linear-gradient(160deg,#25211c,#0b0a09 40%);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 rgba(255,255,255,.14) inset,0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6) }
.px-ph-scr{ inset:7px; border-radius:29px; overflow:hidden; background:#000 }
.px-ph-scr img{ inset:0; width:100%; height:100%; object-fit:cover; opacity:0 }
.px-sub{ left:16px; right:16px; bottom:64px; text-align:center; font:600 16px/1.25 var(--sans); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); opacity:0 }
.px-sub::before{ content:""; position:absolute; inset:-6px -4px; z-index:-1; border-radius:8px; background:rgba(0,0,0,.38) }
.px-sweep{ top:-20%; bottom:-20%; left:0; width:55%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 50%,transparent);
  transform:translateX(calc(var(--sw,-1) * 260px)) skewX(-12deg); opacity:var(--swo,0); mix-blend-mode:screen }
.px-pub{ left:50%; top:-14px; display:flex; align-items:center; gap:8px; height:30px; padding:0 14px 0 11px; border-radius:99px; white-space:nowrap;
  background:var(--px-amb); color:#1b1206; font:400 12.5px var(--mono); letter-spacing:.04em;
  box-shadow:0 10px 24px -8px rgba(240,165,0,.7),0 0 0 3px var(--px-bg);
  transform:translateX(-50%) scale(calc(var(--pu,0) / var(--phs))); transform-origin:50% 100% }
.px-pub > *{ position:static !important } .px-pub em{ font-style:normal }
.px-pub s{ position:relative !important; width:12px; height:12px }
.px-pub s::after{ content:""; position:absolute; left:3px; top:0; width:5px; height:9px; border:solid #1b1206; border-width:0 2px 2px 0; transform:rotate(45deg) }
.px-note{ left:28px; bottom:22px; font:400 12px var(--mono); letter-spacing:.06em; color:var(--px-faint) }

.px-fig{ margin:0; position:relative }
.px-figcap{ display:flex; justify-content:center; margin-top:18px; font:400 12.5px var(--mono); letter-spacing:.06em; color:var(--faint) }

/* ═══ F-CARDS: 2×2, предмет ліворуч, текст праворуч ═══ */
.px-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:72px }
.px-c{ display:grid; grid-template-columns:292px minmax(0,1fr); gap:28px; align-items:center; padding:28px; min-height:332px; --px-fg:#f6f4f1; --px-dim:#b6b2ab; --px-faint:#8d8982; color:var(--px-fg) }
.px-c h3{ font:600 22px/1.25 var(--sans); letter-spacing:0; margin:0 0 12px; color:var(--px-fg) }
.px-c p{ margin:0; font-size:16px; line-height:1.58; color:var(--px-dim) }
.px-obj{ position:relative; width:292px; height:250px }
.px-obj *{ position:absolute }
.px-obj img{ display:block }
.px-obj .pc-flow{ position:static }
.pc-lbl{ font:400 12px var(--mono); letter-spacing:.06em; color:var(--px-dim) }

/* 1. студія: кадри на лінійці часу */
.pc-st i{ top:18px; width:62px; height:110px; border-radius:9px; overflow:hidden; background:#16130f;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 14px 26px -14px rgba(0,0,0,.9);
  left:calc(var(--n) * 76px - 2px); transform:translateY(calc((1 - var(--a,1)) * 22px)) scale(calc(.9 + .1 * var(--a,1))); opacity:var(--a,1) }
.pc-st i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pc-st .pc-rl{ left:0; top:154px; width:292px; height:1.5px; background:rgba(255,255,255,.16); transform-origin:0 50%; transform:scaleX(var(--b,1)) }
.pc-st .pc-tk{ top:162px; width:62px; text-align:center; left:calc(var(--n) * 76px - 2px); font:400 11.5px var(--mono); color:var(--px-dim); opacity:var(--b,1) }
.pc-chip{ left:0; top:204px; height:34px; display:flex; align-items:center; gap:9px; padding:0 14px 0 8px; border-radius:99px; font:600 14px var(--sans); white-space:nowrap;
  color:var(--px-fg); background:color-mix(in srgb,var(--brand-amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand-amber) 38%,transparent) }
.pc-chip b{ position:relative; width:20px; height:20px; border-radius:50%; background:var(--brand-amber); transform:scale(var(--c,1)); flex:none }
.pc-chip b::after{ content:""; position:absolute; left:7px; top:4px; width:5px; height:9px; border:solid #1b1206; border-width:0 2px 2px 0; transform:rotate(45deg) }
.pc-chip > *{ position:static }

/* 2. каталог товарів: поле URL → картка товару */
.pc-url{ left:0; top:6px; width:292px; height:40px; border-radius:11px; background:rgba(255,255,255,.04); box-shadow:0 0 0 1px rgba(255,255,255,.09) inset;
  display:flex; align-items:center; padding:0 12px; font:400 12.5px var(--mono); color:var(--px-fg); white-space:nowrap; overflow:hidden }
.pc-url > *{ position:static }
.pc-url i{ width:8px; height:8px; border-radius:50%; background:var(--px-vink); margin-right:10px; flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-violet) 28%,transparent) }
.pc-url u{ text-decoration:none; overflow:hidden }
.pc-url u::after{ content:""; display:inline-block; width:1.5px; height:15px; margin-left:2px; background:var(--px-vink); vertical-align:-3px; opacity:var(--cur,0) }
.pc-pc{ left:0; top:62px; width:292px; height:178px; border-radius:16px; background:rgba(255,255,255,.035); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 20px 36px -20px rgba(0,0,0,.9);
  transform:translateY(calc((1 - var(--a,1)) * 18px)); opacity:var(--a,1) }
.pc-pt{ left:14px; top:14px; width:112px; height:150px; border-radius:12px; overflow:hidden; background:radial-gradient(110% 80% at 50% 28%,oklch(.97 .01 85),oklch(.86 .02 75) 70%,oklch(.78 .025 70)) }
.pc-pt img{ left:10px; right:10px; top:30px; width:92px; height:auto; transform:scale(var(--pz,1)); transform-origin:50% 80% }
.pc-pc .l1,.pc-pc .l2{ left:140px; height:10px; border-radius:5px; background:rgba(255,255,255,.2) }
.pc-pc .l1{ top:26px; width:120px } .pc-pc .l2{ top:48px; width:84px; background:rgba(255,255,255,.12) }
.pc-ck{ left:140px; top:112px; height:34px; display:flex; align-items:center; gap:8px; padding:0 13px 0 7px; border-radius:99px; background:var(--brand-amber); color:#1b1206; font:600 13.5px var(--sans);
  transform:scale(var(--c,1)); transform-origin:0 50%; white-space:nowrap }
.pc-ck > *{ position:static }
.pc-ck b{ position:relative; width:18px; height:18px }
.pc-ck b::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid #1b1206; border-width:0 2.2px 2.2px 0; transform:rotate(45deg) }

/* 3. каталог форматів: віяло кадрів + підписи */
.pc-fan{ left:0; top:0; width:292px; height:176px }
.pc-fan i{ left:calc(50% - 40px); top:14px; width:80px; height:142px; border-radius:10px; overflow:hidden; background:#16130f; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 16px 28px -14px rgba(0,0,0,.95);
  transform:translateX(calc(var(--fx) * var(--a,1))) rotate(calc(var(--fr) * var(--a,1))) translateY(calc(var(--fy) * var(--a,1))); transform-origin:50% 120% }
.pc-fan i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.pc-lg{ left:0; top:186px; width:292px; display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; opacity:var(--b,1) }
.pc-lg span{ position:static; font:400 12px var(--mono); letter-spacing:.03em; color:var(--px-fg); white-space:nowrap }
.pc-lg span::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--px-vink); margin-right:7px; vertical-align:1px }

/* 4. на живій людині: товар → кадр на людині */
.pc-w1{ left:0; top:12px; width:118px; height:172px; border-radius:14px; overflow:hidden; background:radial-gradient(110% 80% at 50% 28%,oklch(.97 .01 85),oklch(.86 .02 75) 70%,oklch(.78 .025 70));
  box-shadow:0 18px 30px -18px rgba(0,0,0,.9); opacity:var(--a,1); transform:translateY(calc((1 - var(--a,1)) * 14px)) }
.pc-w1 img{ left:10px; top:30px; width:98px; height:auto }
.pc-w2{ left:174px; top:12px; width:118px; height:172px; border-radius:14px; overflow:hidden; background:#16130f; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 18px 30px -18px rgba(0,0,0,.9) }
.pc-w2 img{ inset:0; width:100%; height:100%; object-fit:cover; clip-path:inset(0 0 calc((1 - var(--r,1)) * 100%) 0) }
.pc-ar{ left:126px; top:90px; width:40px; height:12px; overflow:visible }
.pc-ar path{ fill:none; stroke:var(--px-faint); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--b,1)) }
.pc-wl1{ left:0; top:200px; width:118px; text-align:center; font:400 12.5px var(--mono); color:var(--px-faint); text-decoration:line-through; text-decoration-thickness:1.5px;
  text-decoration-color:transparent }
.pc-wl1.cut{ text-decoration-color:var(--px-dim) }
.pc-wl2{ left:166px; top:196px; width:134px; display:flex; justify-content:center; align-items:center; gap:7px; height:28px; border-radius:99px; font:600 12.5px var(--sans); color:#1b1206;
  background:var(--brand-amber); transform:scale(var(--c,1)); white-space:nowrap }
.pc-wl2 > *{ position:static }
.pc-wl2 b{ position:relative; width:12px; height:12px }
.pc-wl2 b::after{ content:""; position:absolute; left:3px; top:0; width:5px; height:9px; border:solid #1b1206; border-width:0 2px 2px 0; transform:rotate(45deg) }

/* ═══ F-AUTO ═══ */
.px-autosec{ padding:96px 0 40px }
.px-autohead{ max-width:760px; margin:0 0 36px }
.px-autohead h2{ font:300 clamp(30px,3.7vw,50px)/1.06 var(--serif); letter-spacing: -.03em; margin:14px 0 14px }
.px-auto{ --px-fg:#f6f4f1; --px-dim:#b6b2ab; --px-faint:#8d8982; padding:28px; color:var(--px-fg) }
.au-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:26px }
.au-seg{ display:inline-flex; padding:4px; border-radius:99px; background:rgba(255,255,255,.05); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; position:relative }
.au-seg button{ position:relative; z-index:1; appearance:none; border:0; background:none; cursor:pointer; color:var(--px-dim); font:600 15px/1 var(--sans); padding:12px 20px; border-radius:99px; transition:color .25s }
.au-seg button[aria-pressed="true"]{ color:#fff }
.au-seg button:focus-visible{ outline:2px solid var(--brand-amber); outline-offset:2px }
.au-pill{ position:absolute; z-index:0; left:4px; top:4px; bottom:4px; width:var(--pw,0); border-radius:99px; transform:translateX(var(--px,0));
  background:color-mix(in srgb,var(--px-vio) 28%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--px-vio) 55%,transparent) inset;
  transition:transform .5s var(--so-ease-io),width .5s var(--so-ease-io) }
.au-cap{ font:400 12px var(--mono); letter-spacing:.06em; color:var(--px-faint) }
.au-week{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:12px }
.au-slot{ position:relative; min-width:0 }
.au-day{ display:block; font:500 12px var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--px-faint); margin-bottom:10px }
.au-box{ position:relative; height:176px; border-radius:14px; border:1.5px dashed rgba(255,255,255,.14); background:rgba(255,255,255,.015) }
.au-card{ position:absolute; inset:0; border-radius:14px; overflow:hidden; background:#16130f; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 16px 28px -16px rgba(0,0,0,.95);
  opacity:0; transform:translateY(12px) scale(.96); transition:opacity .4s var(--so-ease-out) var(--d,0ms),transform .5s var(--so-spring) var(--d,0ms) }
.au-card img{ position:absolute; left:0; top:0; width:100%; height:112px; object-fit:cover }
.au-slot[data-s="has"] .au-card,.au-slot[data-s="wait"] .au-card,.au-slot[data-s="ok"] .au-card{ opacity:1; transform:none }
.au-tag{ position:absolute; left:8px; right:8px; bottom:42px; font:500 11px var(--sans); letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--px-dim) }
.au-tag.sys{ color:var(--px-vink) }
.au-btn{ position:absolute; left:8px; right:8px; bottom:8px; height:28px; border-radius:99px; display:none; align-items:center; justify-content:center; background:var(--brand-amber); color:#1b1206; font:600 12px var(--sans); white-space:nowrap }
.au-slot[data-s="wait"] .au-btn{ display:flex }
.au-pl{ position:absolute; left:8px; right:8px; bottom:8px; height:28px; border-radius:99px; display:none; align-items:center; justify-content:center; gap:6px; font:600 11.5px var(--sans); white-space:nowrap;
  color:var(--px-fg); background:color-mix(in srgb,var(--brand-amber) 14%,transparent); border:1px solid color-mix(in srgb,var(--brand-amber) 40%,transparent) }
.au-slot[data-s="ok"] .au-pl{ display:flex }
.au-pl b{ width:14px; height:14px; border-radius:50%; background:var(--brand-amber); position:relative; flex:none }
.au-pl b::after{ content:""; position:absolute; left:4.5px; top:2px; width:3.5px; height:6.5px; border:solid #1b1206; border-width:0 1.8px 1.8px 0; transform:rotate(45deg) }
.au-slot[data-s="wait"] .au-card,.au-slot.press .au-btn{ }
.au-slot.press .au-btn{ animation:au-press .35s var(--so-spring) 1 }
@keyframes au-press{ 0%{ transform:scale(1) } 40%{ transform:scale(.9) } 100%{ transform:scale(1) } }
.au-limit{ margin-top:18px; display:flex; align-items:center; gap:12px; font:500 11.5px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--px-faint); opacity:0; transition:opacity .4s }
.au-limit::before{ content:""; flex:1; height:0; border-top:1.5px dashed color-mix(in srgb,var(--brand-amber) 60%,transparent) }
.px-auto[data-level="2"] .au-limit{ opacity:1 }
.au-lines{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
.au-lines li{ padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.025); box-shadow:0 0 0 1px rgba(255,255,255,.06) inset; transition:background .3s,box-shadow .3s }
.au-lines li.on{ background:color-mix(in srgb,var(--px-vio) 12%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--px-vio) 45%,transparent) inset }
.au-lines b{ display:block; font:600 16px/1.3 var(--sans); color:var(--px-fg); margin-bottom:6px }
.au-lines span{ font-size:16px; line-height:1.5; color:var(--px-dim) }
.px-limlink{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; font:400 13px var(--mono); letter-spacing:.04em; color:var(--dim); text-decoration:none; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.14) }
.px-limlink:hover{ color:var(--fg); border-color:var(--brand-amber) }

/* reduced motion: доріжки немає, сцена стоїть у кінцевому кадрі */
@media (prefers-reduced-motion:reduce){
  .px-run{ height:auto }
  .px-sticky{ position:relative; height:auto; padding:6vh 0 }
  .au-card{ transition:none }
  .au-pill{ transition:none }
}

/* ═══ вузькі екрани: окремі розкладки, не зменшення ═══ */
@media (max-width:1180px){
  .px-c{ grid-template-columns:minmax(0,1fr); justify-items:start; gap:20px }
  .px-obj{ margin:0 }
}
@media (max-width:900px){
  .px-run{ height:300vh }
  .px-txt-m{ display:block }
  .px-sticky .px-txt{ display:none }
  .px-sticky{ padding:0 }
  .px-sticky > .wrap.fe-grid{ grid-template-columns:minmax(0,1fr); gap:0; width:100% }
  .px-sec .px-fig{ width:100% }
  .px-card{ width:min(100%, calc((100svh - 72px) * var(--w) / var(--h))) }
  .px-card[data-px="ads"]{ --w:360; --h:640 }
  .px-txt-m{ padding:56px 0 28px }
  .px-figcap{ display:none }
  .px-cards{ grid-template-columns:minmax(0,1fr); gap:16px; margin-top:44px }
  .px-c{ padding:22px 20px; min-height:0 }
  .px-c h3{ font-size:20px }
  .px-obj{ width:292px; max-width:100% }
  /* ADS (360×640) */
  .px-bar{ width:360px; height:48px }
  .px-dots,.px-cap{ display:none }
  .px-bar .px-chips{ margin-left:auto; margin-right:12px; margin-top:0 }
  .px-chips{ gap:4px; margin-left:auto }
  .px-chips b{ height:26px; padding:0 9px 0 8px; font-size:12px }
  .px-chips b:not(.on) em{ display:none }
  .px-chips b:not(.on){ padding:0 8px }
  .px-ruler{ display:none }
  .px-tk b{ font-size:10.5px; left:-40px; width:80px; top:6px }
  .px-tk em{ left:-56px; width:112px; top:22px; font-size:12px; line-height:1.25 }
  .px-sn{ left:22px; top:21px; font-size:10px }
  .px-prod-l{ font-size:9.5px; padding:0 10px }
  .px-rnd{ left:16px; top:60px; width:164px; height:262px }
  .px-rnd h3{ font-size:23px; width:164px; top:42px }
  .px-pbar{ top:132px; width:150px }
  .px-mc{ left:30px; top:156px; width:96px; height:96px }
  .px-pill{ font-size:11px; height:26px }
  .px-tracks{ --tw:328px; --lc:58px; --cw:63px; --ch:56px; left:16px; top:352px; height:176px }
  .px-tl{ font-size:9.5px; letter-spacing:.03em }
  .px-wave{ top:66px; height:34px }
  .px-caps{ top:110px; height:22px }
  .px-caps i{ height:22px }
  .px-head{ height:150px; top:-8px }
  .px-sub{ font-size:25px; bottom:80px }
  .px-note{ left:16px; bottom:14px; font-size:11px }
  .px-ok{ right:-6px; top:-6px; width:22px; height:22px }
  .px-ok::after{ left:7px; top:4px }
  /* прикладена сцена: товар і підписи */
  .px-prod{ width:88px; height:156px }
  .px-prod-t{ border-radius:14px }
  .px-prod-t img{ left:8px; top:36px; width:72px }
  .px-prod-t::after{ bottom:26px; height:9px }
  .px-prod-l{ height:24px; font-size:9px; padding:0 9px; letter-spacing:.1em }
  .au-week{ grid-template-columns:minmax(0,1fr); gap:8px }
  .au-slot{ display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:10px }
  .au-day{ margin:0 }
  .au-box{ height:76px }
  .au-card img{ width:46px; height:100%; right:auto }
  .au-card img{ left:0 }
  .au-tag{ left:58px; right:100px; bottom:auto; top:12px }
  .au-btn,.au-pl{ left:auto; right:8px; bottom:auto; top:20px; width:92px; height:32px }
  .au-lines{ grid-template-columns:minmax(0,1fr) }
  .px-auto{ padding:20px 16px }
  .au-seg{ width:100%; display:grid; grid-template-columns:repeat(3,1fr) }
  .au-seg button{ padding:12px 6px; font-size:13px; line-height:1.15 }
  .au-top{ gap:12px }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
  .px-run{ height:auto }
  .px-sticky{ padding:0; height:auto }
}

/* ── доповнення: мініатюри в бенто й у сцені «Контроль», картки F-SAFE ── */
.fe-mini-board i img,.fe-q-img img{ display:block; width:100%; height:100%; object-fit:cover }
.pc-st i{ left:calc((var(--n) - 1) * 76px - 2px) }
.pc-st .pc-tk{ left:calc((var(--n) - 1) * 76px - 2px) }
.pc-fan i:nth-child(1){ --fx:-82px; --fr:-11deg; --fy:8px }
.pc-fan i:nth-child(2){ --fx:-27px; --fr:-3.5deg; --fy:0px }
.pc-fan i:nth-child(3){ --fx:27px; --fr:3.5deg; --fy:0px }
.pc-fan i:nth-child(4){ --fx:82px; --fr:11deg; --fy:8px }
}
.sx-api .sx-n,.sx-eu *{ }
.sx-api{ }
.sx-n{ top:22px; left:calc(var(--n) * 96px + 2px); width:84px; height:84px; border-radius:22px; display:grid; place-items:center; color:var(--px-fg); background:rgba(255,255,255,.045);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 18px 30px -16px rgba(0,0,0,.9); opacity:var(--a,1); transform:translateY(calc((1 - var(--a,1)) * 16px)) }
.sx-n svg{ width:36px; height:36px; position:static }
.sx-line{ left:44px; top:134px; width:204px; height:1.5px; background:var(--px-vink); opacity:.7; transform-origin:0 50%; transform:scaleX(var(--b,1)) }
.sx-shield{ left:116px; top:150px; width:60px; height:60px; display:grid; place-items:center; color:var(--brand-amber); transform:scale(var(--c,1)) }
.sx-shield svg{ width:46px; height:46px; position:static }
.sx-lb{ left:0; right:0; top:224px; text-align:center; font:500 12px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--px-dim); opacity:var(--a,1) }
.sx-rack{ left:46px; top:8px; width:200px; height:230px; border-radius:16px; background:#15120f; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 22px 36px -20px rgba(0,0,0,.95) }
.sx-rack i{ left:14px; right:14px; height:42px; border-radius:9px; background:rgba(255,255,255,.04); box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; opacity:var(--a,1); transform:translateX(calc((1 - var(--a,1)) * -14px)) }
.sx-rack i:nth-child(1){ top:14px } .sx-rack i:nth-child(2){ top:66px } .sx-rack i:nth-child(3){ top:118px } .sx-rack i:nth-child(4){ top:170px }
.sx-rack b{ top:17px; width:8px; height:8px; border-radius:50%; background:var(--brand-amber); box-shadow:0 0 8px var(--brand-amber); opacity:var(--b,1) }
.sx-rack b:nth-child(1){ right:36px } .sx-rack b:nth-child(2){ right:18px }
.sx-fr{ left:34px; top:10px; width:128px; height:228px; border-radius:16px; overflow:hidden; background:#16130f; box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 22px 36px -20px rgba(0,0,0,.95);
  opacity:var(--a,1); transform:translateY(calc((1 - var(--a,1)) * 14px)) }
.sx-fr img{ left:0; top:0; width:100%; height:100%; object-fit:cover }
.sx-bd{ left:10px; top:10px; padding:4px 9px; border-radius:7px; font:400 12px var(--mono); letter-spacing:.08em; color:#fff; background:color-mix(in srgb,var(--brand-violet) 80%,#000); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset; opacity:var(--b,1); transform:scale(calc(.6 + .4 * var(--b,1))); transform-origin:0 0 }
.sx-sw{ left:176px; top:104px; width:116px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; opacity:var(--b,1) }
.sx-sw > *{ position:static }
.sx-sw em{ font:400 12px/1.3 var(--mono); font-style:normal; color:var(--px-fg); letter-spacing:.04em }
.sx-sw i{ position:relative !important; width:40px; height:22px; border-radius:99px; background:color-mix(in srgb,var(--brand-amber) calc(var(--c,1) * 100%),color-mix(in srgb,#fff 16%,transparent)) }
.sx-sw i::after{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; border-radius:50%; background:#fff; transform:translateX(calc(var(--c,1) * 18px)) }
.sx-btn{ left:28px; top:70px; height:40px; padding:0 22px; border-radius:99px; display:flex; align-items:center; background:var(--brand-amber); color:#1b1206; font:600 15px var(--sans); transform:scale(var(--bs,1)); box-shadow:0 12px 24px -10px rgba(240,165,0,.7) }
.sx-tg{ left:28px; top:134px; max-width:240px; display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:99px; font:600 14px/1.25 var(--sans); color:var(--px-fg);
  background:color-mix(in srgb,var(--brand-amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--brand-amber) 40%,transparent); opacity:var(--a,1); transform:translateY(calc((1 - var(--a,1)) * 14px)) }
.sx-tg > *{ position:static }
.sx-tg svg{ width:18px; height:18px; flex:none; color:var(--brand-amber) }
@media (max-width:900px){
}

/* ═══ F-SAFE v2 (2026-10-05, правка за відгуком власника «вузько»): пост-телефон ліворуч (248×440),
   праворуч стопка ШИРОКИХ воріт 360×136 (заголовок, число, підпис, дія всередині), сітка 8 px.
   Фіолетовий лише тонкими акцентами (рамка, смужка перевірки, лінії); бурштин = готово/дія. ═══ */
.px-card[data-px="safe"]{ --w:880; --h:600 }
.sf-bar{ position:absolute; left:0; top:0; width:880px; height:56px; border-bottom:1px solid var(--px-line); display:flex; align-items:center }
.sf-bar .px-dots{ margin-left:24px }
.sf-bar .px-cap{ margin-left:18px }
.sf-lines{ position:absolute; left:0; top:0; width:880px; height:600px; overflow:visible; pointer-events:none }
.sf-lines path{ fill:none; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:var(--d,1) }
.sf-lines .v{ stroke:var(--px-vink); opacity:.8 } .sf-lines .a{ stroke:var(--px-amb); opacity:.9 }
.sf-node{ position:absolute; left:684px; top:304px; width:8px; height:8px; border-radius:50%; background:var(--px-amb); box-shadow:0 0 12px rgba(240,165,0,.6); transform:scale(var(--c,0)) }
.sf-g{ position:absolute; left:312px; width:360px; height:136px; opacity:var(--a0,1) }
.sf-g.g1{ top:88px } .sf-g.g2{ top:240px } .sf-g.g3{ top:392px }
.sf-frame{ position:absolute; inset:0; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),#15120f;
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--px-vio) 55%,transparent) inset,0 22px 40px -24px rgba(0,0,0,.9) }
.sf-frame::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 1.5px var(--px-amb) inset; opacity:var(--o,0) }
.sf-pg{ position:absolute; left:20px; right:20px; bottom:0; height:3px; border-radius:2px; background:var(--px-vink); transform-origin:0 50%; transform:scaleX(var(--pg,0)); opacity:calc(1 - var(--o,0)) }
.sf-gl{ position:absolute; left:20px; top:16px; font:500 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--px-vink) }
.sf-n{ position:absolute; left:20px; top:36px; font:300 52px/1 var(--serif); color:var(--px-fg); opacity:var(--a,1); transform:translateY(calc((1 - var(--a,1)) * 10px)); font-variant-numeric: lining-nums tabular-nums; }
.sf-n.eu{ font-size:44px; top:40px }
.sf-t{ position:absolute; left:148px; top:40px; width:196px; font:400 14px/1.35 var(--sans); color:var(--px-dim); opacity:var(--a,1) }
.sf-btn,.sf-pr,.sf-sw{ position:absolute; left:148px; top:96px; height:32px; display:flex; align-items:center; opacity:var(--a,1) }
.sf-btn{ padding:0 18px; border-radius:99px; background:var(--px-amb); color:#1b1206; font:600 14px var(--sans); transform:scale(var(--bs,1)); transform-origin:0 50%; box-shadow:0 10px 22px -12px rgba(240,165,0,.7) }
.sf-pr{ padding:0 12px; border-radius:99px; font:600 12px var(--sans); white-space:nowrap; color:var(--px-fg); background:color-mix(in srgb,var(--px-amb) 12%,transparent); border:1px solid color-mix(in srgb,var(--px-amb) 40%,transparent); transform:scale(var(--a,1)); transform-origin:0 50% }
.sf-sw{ gap:10px }
.sf-sw em{ font:600 12.5px var(--sans); font-style:normal; color:var(--px-fg) }
.sf-sw i{ position:relative; width:36px; height:20px; border-radius:99px; background:color-mix(in srgb,var(--px-amb) calc(var(--sw,0) * 100%),color-mix(in srgb,#fff 16%,transparent)) }
.sf-sw i::after{ content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transform:translateX(calc(var(--sw,0) * 16px)) }
.sf-ck{ position:absolute; right:-8px; top:-8px; width:26px; height:26px; border-radius:50%; background:var(--px-amb); transform:scale(var(--c,0)); box-shadow:0 0 0 3px var(--px-bg),0 6px 16px -4px rgba(240,165,0,.6) }
.sf-ck::after{ content:""; position:absolute; left:9px; top:5px; width:6px; height:11px; border:solid #1b1206; border-width:0 2.2px 2.2px 0; transform:rotate(45deg) }
/* пост: телефон 248×440 */
.sf-post{ position:absolute; left:32px; top:88px; width:248px; height:440px; border-radius:36px; background:linear-gradient(160deg,#25211c,#0b0a09 40%);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 1px 0 rgba(255,255,255,.14) inset,0 40px 80px -30px rgba(0,0,0,.95); opacity:var(--pa,1); transform:translateY(calc((1 - var(--pa,1)) * 14px)) }
.sf-post-in{ position:absolute; left:7px; top:7px; right:7px; bottom:7px; border-radius:29px; overflow:hidden; background:#000 }
.sf-post img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.sf-post-in::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent) }
.sf-ai{ position:absolute; left:16px; top:16px; z-index:2; padding:5px 10px; border-radius:99px; font:400 12px var(--mono); letter-spacing:.08em; color:var(--px-fg);
  background:rgba(14,12,10,.55); box-shadow:0 0 0 1px color-mix(in srgb,var(--px-vio) 70%,transparent) inset; opacity:var(--a,0); transform:scale(calc(.7 + .3 * var(--a,0))); transform-origin:0 0 }
.sf-tag{ position:absolute; left:16px; right:16px; bottom:20px; z-index:2; min-height:34px; padding:7px 14px; text-align:center; line-height:1.25; display:flex; align-items:center; justify-content:center; border-radius:17px; font:600 13px var(--sans); color:var(--px-fg);
  background:rgba(14,12,10,.6); box-shadow:0 0 0 1px color-mix(in srgb,var(--px-amb) 55%,transparent) inset; opacity:var(--a,0); transform:translateY(calc((1 - var(--a,0)) * 10px)) }
/* мережі */
.sf-nets{ position:absolute; left:776px; top:88px; width:96px; height:440px }
.sf-nets-l{ position:absolute; left:0; right:0; top:0; text-align:center; font:500 11px/1.25 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--px-faint); opacity:var(--a,1) }
.sf-net{ position:absolute; left:20px; width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:var(--px-fg); background:rgba(255,255,255,.04);
  box-shadow:0 0 0 1px rgba(255,255,255,.1) inset,0 14px 24px -14px rgba(0,0,0,.9) }
.sf-net svg{ width:26px; height:26px }
.sf-net .sf-ck{ right:-8px; top:-8px; width:22px; height:22px }
.sf-net .sf-ck::after{ left:7.5px; top:4px; width:5px; height:9px }
.sf-nets .sf-net:nth-child(2){ top:56px } .sf-nets .sf-net:nth-child(3){ top:192px } .sf-nets .sf-net:nth-child(4){ top:328px }
.sf-mc{ position:absolute; left:704px; top:496px; width:88px; height:88px; transform-origin:50% 90% }
.sf-mc svg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible }
.sf-note{ position:absolute; left:32px; bottom:24px; font:400 12px var(--mono); letter-spacing:.06em; color:var(--px-faint) }

@media (max-width:900px){
  /* вертикальна розкладка 360×800: телефон + Penny вгорі, стопка воріт 316×112, мережі внизу */
  .px-card[data-px="safe"]{ --w:360; --h:800 }
  .sf-bar{ width:360px; height:48px }
  .sf-bar .px-dots{ display:none }
  .sf-bar .px-cap{ margin-left:16px; font-size:11px }
  .sf-lines{ width:360px; height:800px }
  .sf-post{ left:28px; top:60px; width:152px; height:270px; border-radius:26px }
  .sf-post-in{ left:5px; top:5px; right:5px; bottom:5px; border-radius:21px }
  .sf-ai{ left:10px; top:10px; font-size:10px; padding:3px 8px }
  .sf-tag{ left:8px; right:8px; bottom:12px; min-height:26px; padding:4px 8px; font-size:10.5px }
  .sf-g{ left:28px; width:316px; height:112px }
  .sf-g.g1{ top:346px } .sf-g.g2{ top:470px } .sf-g.g3{ top:594px }
  .sf-frame{ border-radius:18px }
  .sf-gl{ left:16px; top:12px; font-size:10.5px }
  .sf-n{ left:16px; top:30px; font-size:40px } .sf-n.eu{ font-size:34px; top:34px }
  .sf-t{ left:112px; top:32px; width:190px; font-size:12.5px }
  .sf-btn,.sf-pr,.sf-sw{ left:112px; top:72px; height:30px }
  .sf-btn{ font-size:13px; padding:0 16px } .sf-pr{ font-size:11.5px; padding:0 12px } .sf-sw em{ font-size:12px }
  .sf-ck{ right:-6px; top:-6px; width:24px; height:24px }
  .sf-node{ left:182px; top:714px }
  .sf-nets{ left:108px; top:740px; width:156px; height:44px }
  .sf-nets-l{ display:none }
  .sf-net{ width:44px; height:44px; border-radius:13px; top:0 !important }
  .sf-nets .sf-net:nth-child(2){ left:0 } .sf-nets .sf-net:nth-child(3){ left:56px } .sf-nets .sf-net:nth-child(4){ left:112px }
  .sf-net svg{ width:22px; height:22px }
  .sf-mc{ left:224px; top:116px; width:104px; height:104px }
  .sf-note{ display:none }
}

/* планшет / вузький ноутбук (901–1180): текст над доріжкою, на пін іде лише сцена (її ширина ≥ 700 px, а не 8/12 колонки) */
@media (min-width:901px) and (max-width:1180px){
  .px-txt-m{ display:block; padding:64px 0 24px }
  .px-txt-m .fe-h2{ max-width:24ch }
  .px-sticky .px-txt{ display:none }
  .px-sticky > .wrap.fe-grid{ grid-template-columns:minmax(0,1fr); gap:0 }
  .px-card{ width:min(100%, calc((100svh - 72px) * var(--w) / var(--h))) }
}
@media (prefers-reduced-motion:reduce) and (min-width:901px) and (max-width:1180px){ .px-run{ height:auto } }