/* СТОРІНКА ПРОЦЕСУ (apps/ocbot/process.js, рух — public/process.js). Три ролики з
   одного апарата: кімната з вікном (перший екран), аркуш у клітинку (конструктор),
   та сама кімната з бейджами периферії (прогін). Кімната — світла, як папір порталу:
   апарат у ній гравюрою, чорний контур на темних стінах гас би. Токени — на .prr,
   .prh, .prk, .prw, не в :root. */

/* ── Кімната ─────────────────────────────────────────────────────────────
   Нульова точка .prr-room — верх кута; стіни розходяться від неї під 45°. Кінцевий
   ракурс — ліва стіна навпроти глядача (rotateY −45°), кут за правим краєм кадру.
   Камеру імітує поворот кімнати й зсув (GSAP); вікно й точка під апарат — на лівій
   стіні, тож на кінцевому ракурсі вони стоять рівно. */
.prr { --W: 170vh; --H: 70vh; --D: 22vh; --spotX: 34vw; --rigW: 46vh; --rigH: 70vh;
  --wall-a: #FBF7EE; --wall-b: #E3D9C3; --floor-a: #EAE0C9; --floor-b: #CDBF9F; --seam: rgba(27, 77, 62, .13);
  position: absolute; inset: 0; perspective: 1600px; perspective-origin: 60% 42%; overflow: hidden; pointer-events: none;
  background: var(--wall-b); }
.prr-room { position: absolute; left: 104%; top: 4%; width: 0; height: 0; transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(-45deg); }   /* кінцевий кадр: стіна фронтально, підлога — горизонтальна лінія */
.prr-wall { position: absolute; top: 0; width: var(--W); height: var(--H); transform-style: preserve-3d; }
/* Глуха стіна, перед якою стоїть апарат, — цегла (відгук власника: світлий апарат
   на світлій стіні губився; кладка — «як на фото»). Плитка /brick.svg: цеглини
   різних тонів зі світлом і тінню, зернистий шум і плями, утоплені шви (генерує
   scratchpad brick-gen, результат — статичний файл). Зверху — світло лампи. */
.prr-l { right: 0; transform-origin: right center; transform: rotateY(45deg);
  background:
    radial-gradient(55% 70% at calc(100% - var(--spotX)) 32%, rgba(255, 236, 214, .20), transparent 70%),
    linear-gradient(180deg, rgba(30, 16, 10, .22), transparent 28%, transparent 72%, rgba(30, 16, 10, .30)),
    url("/brick.svg") 0 0 / 34vh auto, #8a5a44; }
.prr-r { left: 0; transform-origin: left center; transform: rotateY(-45deg);
  background: radial-gradient(80% 90% at 0 35%, var(--wall-a), var(--wall-b) 75%); }
/* Плінтус і шов кута — тонкі лінії, щоб кут читався під час обльоту */
.prr-l::after, .prr-r::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--seam); }
.prr-l::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--seam); }
.prr-floor { position: absolute; left: 0; top: var(--H); width: var(--W); height: var(--W); transform-origin: 0 0;
  transform: rotateX(90deg) rotateZ(45deg);
  background: repeating-linear-gradient(0deg, var(--seam) 0 1px, transparent 1px 11vh),
    repeating-linear-gradient(90deg, var(--seam) 0 1px, transparent 1px 11vh),
    radial-gradient(60% 60% at 0 0, var(--floor-a), var(--floor-b) 80%); }
/* Вікно — на правій стіні, біля кута: його видно на початку обльоту, а кінцевий
   кадр — глуха ліва стіна. Рама, імпости, небо. */
.prr-window { position: absolute; left: 34%; top: 12%; width: 24%; height: 48%;
  border: 8px solid #FFFDF7; outline: 1px solid var(--seam); box-shadow: 0 14px 34px rgba(27, 77, 62, .12);
  background: linear-gradient(#FFFDF7, #FFFDF7) 50% 0 / 7px 100% no-repeat, linear-gradient(#FFFDF7, #FFFDF7) 0 45% / 100% 7px no-repeat,
    linear-gradient(180deg, #BFDCEA, #DDEDF1 60%, #EEF5F0); }
/* Кінцева композиція без підлоги: коли апарат зібрано, підлога гасне, а знизу —
   темний градієнт, що переходить у стіну (process.js ставить верх над точкою апарата). */
.prr-base { position: absolute; left: 0; right: 0; top: 70%; bottom: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(0deg, #1c110b 0%, rgba(28, 17, 11, .92) 30%, rgba(28, 17, 11, 0) 100%); }
.prr-still .prr-base { opacity: 1; }
.prr-still .prr-floor { opacity: 0; }
/* Точка на підлозі перед стіною — туди стає апарат */
.prr-spot { position: absolute; left: calc(100% - var(--spotX)); top: 100%; width: 0; height: 0; transform: translateZ(var(--D)); }
/* Апарат — плаский малюнок поверх кімнати, низом на .prr-spot (left/top ставить
   process.js; без скрипта — приблизне місце). Гравюрою: одна лінія, тінь штрихом. */
.prr-rig { position: absolute; left: 64%; top: 90%; width: var(--rigW); height: var(--rigH); transform: translate(-50%, -100%);
  color: #1B4D3E; z-index: 1; }
.prr-rig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.prr-shadow { position: absolute; left: 64%; top: 90%; width: calc(var(--rigW) * 1.2); height: calc(var(--rigW) * .14); transform: translate(-50%, -50%);
  border-radius: 50%; color: #1B4D3E; opacity: .45;
  background: repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 4px);
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); }

/* ── Перший екран ────────────────────────────────────────────────────── */
.prh { background: #E3D9C3; color: #1F2A26; font-family: 'Onest', var(--font); }
.prh-stage { position: relative; height: calc(100vh - var(--ob-top, 96px)); height: calc(100svh - var(--ob-top, 96px)); min-height: 560px; overflow: hidden; }
.prh-copy { position: absolute; left: max(24px, 5vw); top: 50%; transform: translateY(-50%); width: min(560px, 40vw); z-index: 2;
  padding: 26px 28px; border-radius: 22px; background: rgba(251, 248, 240, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px -24px rgba(27, 77, 62, .35); }
.prh-kick { margin: 0 0 10px; font: 600 .74rem 'Onest', var(--font); letter-spacing: .18em; text-transform: uppercase; color: #7A5212; }
.prh h1 { margin: 0 0 14px; font: 800 clamp(1.8rem, 2.8vw, 3.1rem)/1.06 'Unbounded', var(--font-display); letter-spacing: -.02em; color: #1B4D3E; text-wrap: balance; }
.prh-lead { margin: 0 0 22px; font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.6; color: #3B4A43; }
.prh-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.prh-ghost { background: rgba(255, 255, 255, .6); color: #1B4D3E; border: 1px solid rgba(27, 77, 62, .35); }
.prh-ghost:hover { border-color: #1B4D3E; }

/* ── Ролик 1: аркуш у клітинку (конструктор) ─────────────────────────── */
/* Смуга на всю ширину: фон (клітинка) повторюється, не масштабується; анімація —
   прозорий шар у межах вмісту, у своєму масштабі — на широкому екрані апарат не роздувається. */
/* Клітинка — не декор, а масштаб: крок --cell = ціла кількість мм креслення в
   пікселях екрана (process.js підбирає: 4″ труба ≈ 2 клітинки), зсув --cell-x/y
   ставить лінії на круглі мм сцени; кожна 5-та лінія товща. Без скрипта — 20 px. */
.prk { --cell: 20px; --cell-x: 0px; --cell-y: 0px;
  padding: 64px 0; min-height: calc(100svh - var(--ob-top, 96px)); display: flex; align-items: center;
  border-top: 1px solid rgba(60, 110, 160, .25); border-bottom: 1px solid rgba(60, 110, 160, .25);
  background-color: #FDFDF9;
  background-image: linear-gradient(rgba(60, 110, 160, .24) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 110, 160, .24) 1px, transparent 1px),
    linear-gradient(rgba(60, 110, 160, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 110, 160, .1) 1px, transparent 1px);
  background-size: calc(var(--cell) * 5) calc(var(--cell) * 5), calc(var(--cell) * 5) calc(var(--cell) * 5), var(--cell) var(--cell), var(--cell) var(--cell);
  background-position: var(--cell-x) var(--cell-y); }
.prk-copy { padding: 24px 26px; border-radius: 18px; background: rgba(253, 253, 249, .9); box-shadow: 0 16px 40px -26px rgba(27, 77, 62, .4); }
.prk-in { width: min(1240px, 100% - 40px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.prk-copy h2, .prw-copy h2 { margin: 0 0 16px; font: 700 clamp(1.7rem, 3vw, 2.5rem)/1.1 'Unbounded', var(--font-display); color: var(--green); }
.prk-copy p { line-height: 1.6; margin: 0 0 22px; }
.prk-sheet { position: relative; height: min(720px, 78vh); }
.prk-rig { position: absolute; inset: 6% 4% 5% 4%; }
.prk-rig svg { width: 100%; height: 100%; overflow: visible; }
.prk-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; z-index: 2; pointer-events: none;
  fill: #1F2A26; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
/* Шар розмірів — стилі ядра (/ui/dims.css); тут лише колір і шрифт аркуша */
.prk-sheet { --dims-ink: #1F4E79; --dims-pad: #FDFDF9; }
.prk-sheet .dim-text { font-family: 'Onest', var(--font, sans-serif); }

/* ── Ролик 3: кімната й бейджі периферії ─────────────────────────────── */
.prw { position: relative; min-height: calc(100svh - var(--ob-top, 96px)); background: #E3D9C3; }
.prw-stage { position: absolute; inset: 0; overflow: hidden; }
.prw-in { position: relative; z-index: 3; width: min(1240px, 100% - 40px); min-height: inherit; margin: 0 auto; padding: 56px 0;
  display: flex; justify-content: flex-end; align-items: center; pointer-events: none; }
.prw-copy { pointer-events: auto; width: min(480px, 40vw); padding: 26px 28px; border-radius: 22px;
  background: rgba(251, 248, 240, .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 20px 50px -24px rgba(27, 77, 62, .35); }
/* Апарат — ліворуч від картки: точка підлоги далеко від кута */
.prr-still { --spotX: 66vw; perspective-origin: 38% 42%; }
.prw-copy .prh-kick { color: #7A5212; }
.prw-badges { position: absolute; inset: 0; pointer-events: none; }
.prw-badge { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 12px;
  background: rgba(255, 255, 255, .94); border: 1px solid rgba(27, 77, 62, .18); box-shadow: 0 10px 24px -12px rgba(27, 77, 62, .45);
  white-space: nowrap; z-index: 2; }
.prw-badge::before { content: ""; position: absolute; top: 50%; right: 100%; width: var(--lead, 26px); height: 1px; background: rgba(27, 77, 62, .5); }
.prw-badge.left::before { right: auto; left: 100%; }
.prw-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #F2EFE7; color: #1B4D3E; --hw-ico-bg: #F2EFE7; }
.prw-ico svg { width: 22px; height: 22px; fill: currentColor; }
.prw-badge small { display: block; font-size: .66rem; color: #6B756F; line-height: 1.1; }
.prw-badge b { font: 700 .86rem 'Onest', sans-serif; color: #1B4D3E; font-variant-numeric: tabular-nums; }
.prw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prw-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: 12px; background: linear-gradient(90deg, #E7DDC6, #F4EEDF); border: 1px solid rgba(183, 121, 31, .22); }
.prw-steps b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: #1B4D3E; color: #F4EEDD;
  font: 700 .85rem 'Unbounded', var(--font-display); }
.prw-steps span { font-weight: 600; color: #1F2A26; }
.prw-note { margin: 14px 0 0; font-size: .82rem; color: #6B756F; }

/* ── Телефон: копія згори, сцена знизу, усе в межах екрана ───────────── */
@media (max-width: 760px) {
  .prr-hero { --W: 120svh; --H: 40svh; --D: 12svh; --spotX: 40vw; --rigW: 26svh; --rigH: 40svh; perspective: 1000px; perspective-origin: 50% 62%; }
  .prr-hero .prr-room { top: 36%; }
  .prh-copy { left: 12px; right: 12px; top: 12px; transform: none; width: auto; padding: 16px 16px 14px; }
  /* Вікно ближче до кута — на вузькому екрані воно має бути в кадрі на початку обльоту */
  .prr-hero .prr-window { left: 6%; width: 22%; }
  .prh h1 { font-size: clamp(1.3rem, 6.4vw, 2rem); margin-bottom: 6px; }
  .prh-lead { font-size: .9rem; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .prh-cta .ob-btn { padding: 9px 14px; font-size: .84rem; }
  .prk { padding: 28px 0; min-height: 0; }
  .prk-in { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .prk-copy { padding: 16px 16px 14px; }
  .prk-copy p { font-size: .9rem; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .prk-sheet { height: 52svh; }
  .prk-rig { inset: 2% 0; }
  /* Ролик 3 на телефоні: кімната — смуга на всю ширину, текст під нею */
  .prw { min-height: 0; }
  .prw-stage { position: relative; inset: auto; height: 62svh; }
  .prw-in { min-height: 0; padding: 20px 0 36px; }
  .prw-copy { width: auto; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .prr-still { --W: 120svh; --H: 40svh; --D: 12svh; --spotX: 52vw; --rigW: 24svh; --rigH: 38svh; perspective: 1000px; perspective-origin: 50% 58%; }
  .prr-still .prr-room { top: 16%; }
  .prw-badge { padding: 4px 8px 4px 4px; }
  .prw-ico { width: 26px; height: 26px; } .prw-ico svg { width: 18px; height: 18px; }
}

/* ── Сторінка процесу: блоки тексту й три ролики на аркуші (process.js procPage) ── */
.prk-sheet .prw-badges { position: absolute; inset: 0; pointer-events: none; }
.prk-sheet[data-roll="sensors"] .prw-badge { opacity: 0; }
/* Пульт ролика 3: гейджі ядра (ті самі, що на контролері) */
.prf-ui { position: absolute; inset: 6% 3%; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-content: center; pointer-events: none; }
.prf-card { opacity: 0; padding: 12px 12px 8px; border-radius: 14px; background: #fff; border: 1px solid rgba(27, 77, 62, .14); box-shadow: 0 12px 30px -18px rgba(27, 77, 62, .45); }
.prf-card-h { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 .86rem 'Onest', sans-serif; color: #1B4D3E; }
.prf-card .prw-ico { width: 26px; height: 26px; }
.prf-card .prw-ico svg { width: 18px; height: 18px; }
.prf-card .rbg { max-width: 180px; margin: 0 auto; }
.prf-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 110px; margin: 0; font: 700 1.2rem 'Onest', sans-serif; color: #1B4D3E; }
.prf-state i { width: 14px; height: 14px; border-radius: 50%; background: #2E9D5B; box-shadow: 0 0 0 5px rgba(46, 157, 91, .18); }
/* Перший екран — текст на папері, без анімації: історія починається словами */
.prp-hero { background: radial-gradient(90% 120% at 100% 0, color-mix(in srgb, var(--acc) 20%, transparent), transparent 55%), var(--paper); padding: clamp(56px, 10vh, 120px) 0 clamp(48px, 8vh, 96px); }
.prp-in { width: min(900px, 100% - 40px); margin: 0 auto; }
.prp-desc { margin: 0 0 24px; line-height: 1.6; color: #3B4A43; max-width: 70ch; }
.prp-hero h1 { margin: 0 0 16px; font: 800 clamp(2rem, 4.4vw, 3.6rem)/1.04 'Unbounded', var(--font-display); letter-spacing: -.02em; color: #1B4D3E; text-wrap: balance; }
/* Текстові блоки між роликами */
.prs { background: #F2EFE7; padding: clamp(48px, 8vh, 88px) 0; }
.prs-alt { background: #EAE3D2; }
.prs-in { width: min(1000px, 100% - 40px); margin: 0 auto; }
.prs h2 { margin: 0 0 16px; font: 700 clamp(1.6rem, 3vw, 2.3rem)/1.1 'Unbounded', var(--font-display); color: var(--green); }
.prs p { line-height: 1.6; }
.prs-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 48px; }
.prp-kits { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.prp-kits a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #F2EFE7; color: #1F2A26; text-decoration: none; border: 1px solid rgba(183, 121, 31, .22); }
.prp-kits b { font-weight: 600; }
.prp-kits span { flex: none; font-weight: 700; color: #7A5212; }
.prp-scripts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.prp-scripts li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid rgba(27, 77, 62, .12); font-weight: 600; color: #1F2A26; }
.prp-arts { margin: 0; padding-left: 18px; line-height: 1.8; }
.prp-arts a { color: var(--green); }
.prp-pros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.prp-pros li { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid rgba(27, 77, 62, .12); }
.prp-pros b { display: block; font: 800 2.4rem/1 'Unbounded', var(--font-display); color: #B7791F; margin-bottom: 8px; }
.prp-pros span { line-height: 1.5; color: #3B4A43; }
/* Смужка «поговорити» — між блоками, кнопки відкривають вікна форм хабу */
.prt { background: #1B4D3E; color: #F4EEDD; padding: 26px 0; }
.prt-in { width: min(1100px, 100% - 40px); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.prt-in b { display: block; font: 700 1.2rem 'Unbounded', var(--font-display); color: #fff; }
.prt-in span { color: #CFE0D6; }
.prt-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.prt .ob-btn:not(.ob-btn-g) { background: transparent; color: #F4EEDD; border-color: rgba(244, 238, 221, .45); }
@media (max-width: 760px) {
  .prk-sheet[data-roll="panel"] { height: 600px; }
  .prf-ui { inset: 4% 2%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .prf-card { padding: 8px 8px 4px; }
  .prf-card .rbg { max-width: 130px; }
  .prt-btns .ob-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Історія: сцена-аркуш липка на фоні, картки тексту поверх (procPage) ───
   Фон — та сама клітинка в масштабі (.prk); сцена на весь екран під шапкою, аркуш
   праворуч. Картки йдуть потоком поверх (від'ємний відступ на висоту сцени),
   кожна з паперовою підкладкою. Після історії фон відпускається сам. */
.prb { --stage-h: calc(100svh - var(--ob-top, 96px)); position: relative; }
.prk.prb-bg { position: sticky; top: var(--ob-top, 96px); height: var(--stage-h); min-height: 0; padding: 0; display: block; border: 0; overflow: hidden; }
.prb-bg .prk-sheet { position: absolute; right: 3vw; top: 4%; bottom: 4%; width: 56vw; height: auto; }
.prb-flow { position: relative; z-index: 2; margin-top: calc(-1 * var(--stage-h)); }
/* Відкрита сцена: проміжок на висоту сцени й ще пів екрана — стільки сцена стоїть
   відкрита цілком. Підпис кроку — коротко, внизу ліворуч, не картка. */
.prb-gap { height: calc(var(--stage-h) + 55vh); display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.prb-cap { position: sticky; bottom: 24px; width: min(360px, 32vw); margin: 0 0 24px max(20px, 4vw); padding: 14px 16px; border-radius: 14px;
  background: rgba(253, 253, 249, .92); box-shadow: 0 12px 30px -20px rgba(27, 77, 62, .5); font-size: .9rem; line-height: 1.45; color: #3B4A43; }
.prb-cap b { display: block; font: 700 1rem 'Unbounded', var(--font-display); color: #1B4D3E; margin-bottom: 4px; }
/* Панелі — на всю ширину, суцільна підкладка; тони чергуються, як смуги головної */
.prb-panel { position: relative; padding: clamp(56px, 12vh, 120px) 0; min-height: calc(var(--stage-h) + 1px); box-sizing: border-box; display: flex; align-items: center;
  box-shadow: 0 -18px 40px -24px rgba(27, 77, 62, .35); }
.prb-panel .prs-in { width: min(1000px, 100% - 40px); }
.prb-panel h2 { margin: 0 0 16px; font: 700 clamp(1.6rem, 3vw, 2.4rem)/1.1 'Unbounded', var(--font-display); color: var(--green); }
.prb-panel p { line-height: 1.6; }
/* Характер панелей — за хабом oCBot (ніч, золото, фото процесу під тоном) і
   календарем (великі числа, спокійний папір). Шрифти й тони — ті самі, що на лендінгу. */
.prp { --acc: #D4AF37; --acc-ink: #8C5B12; --paper: var(--bg); --sand: #EFE8D6; }
.prb-panel { isolation: isolate; overflow: hidden; }
.prb-h { margin: 0 0 18px; font: 800 clamp(1.9rem, 3.8vw, 3.4rem)/1.04 'Unbounded', var(--font-display); letter-spacing: -.02em; color: #1B4D3E; text-wrap: balance; }
.prb-lead { font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.6; max-width: 56ch; color: #3B4A43; }
.prb-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.prb-split-r { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.prb-panel .prs-in { width: min(1200px, 100% - 40px); }
/* 1. Папір + гравюра обладнання */
.prb-paper { background: radial-gradient(70% 90% at 0 100%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 60%), var(--paper); }
.prb-art { color: #1B4D3E; }
.prb-art .engraving { width: 100%; height: auto; max-height: 62vh; }
.prb-tags { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; }
.prb-tags a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed rgba(27, 77, 62, .3); color: #1F2A26; text-decoration: none; }
.prb-tags b { font: 800 1.35rem 'Unbounded', var(--font-display); color: var(--acc-ink); white-space: nowrap; }
.prb-tags a:hover span { text-decoration: underline; text-decoration-color: #D4AF37; }
/* 2. Пісок + великі контурні числа етапів (як числа свобод на хабі) */
.prb-sand { background: var(--sand); }
.prb-stages { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px 20px; counter-reset: s; }
.prb-stages li { display: grid; gap: 8px; align-content: start; }
.prb-stages b { font: 800 clamp(3.4rem, 6vw, 5.4rem)/.9 'Unbounded', var(--font-display); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 2px var(--acc-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 35%, transparent), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.prb-stages span { font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: #1F2A26; }
/* 3. Ніч + фото скриптів під тоном, золото (фон — .obf-bg лендінга) */
.prb-night { --night: #06110D; background: #06110D; color: #A9B8AF; }
.prb-night .prb-h { color: #fff; }
.prb-night .prh-kick { color: color-mix(in srgb, var(--acc) 70%, #fff); }
.prb-night .prb-lead { color: #DDE5E0; }
.prb-big { margin: 0 0 18px; display: flex; align-items: baseline; gap: 14px; }
.prb-big b { font: 800 clamp(4rem, 9vw, 7.5rem)/.85 'Unbounded', var(--font-display); color: transparent; -webkit-text-stroke: 2px var(--acc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 38%, transparent), transparent 80%); -webkit-background-clip: text; background-clip: text; }
.prb-big span { color: var(--acc); font-weight: 600; }
.prb-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prb-chips li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .05);
  border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); color: #F4EEDD; font-weight: 600; }
.prb-chips .prw-ico { background: #F2EFE7; color: #1B4D3E; --hw-ico-bg: #F2EFE7; }
.prb-night .ob-btn:not(.ob-btn-g), .prb-malachite .ob-btn:not(.ob-btn-g) { background: transparent; color: #F4EEDD; border-color: rgba(244, 238, 221, .45); }
/* 4. Малахіт + фото «будь-що» + золоті числа-акценти */
.prb-malachite { --night: #0F2A20; background: #173D28; color: #E4ECE7; }
.prb-malachite .prb-h { color: #fff; }
.prb-malachite .prh-kick { color: color-mix(in srgb, var(--acc) 70%, #fff); }
.prb-nums { list-style: none; margin: 10px 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px 32px; }
.prb-nums li { border-top: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); padding-top: 16px; }
.prb-nums b { display: block; font: 800 clamp(3rem, 5vw, 4.4rem)/1 'Unbounded', var(--font-display); color: var(--acc); margin-bottom: 8px; }
.prb-nums span { line-height: 1.5; }
.prb-ask { margin-top: 18px; }
/* Легкі кроки (без форми) і форма внизу */
.prb-lite { background: var(--paper); }
.prb-lite-row { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.prb-lite-row a { position: relative; display: grid; gap: 6px; height: 100%; box-sizing: border-box; padding: 20px 44px 20px 20px; border-radius: 18px;
  background: #fff; border: 1px solid rgba(183, 121, 31, .25); color: #3B4A43; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.prb-lite-row a:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(27, 77, 62, .5); }
.prb-lite-row b { font: 700 1.05rem 'Unbounded', var(--font-display); color: #1B4D3E; }
.prb-lite-row i { position: absolute; right: 18px; top: 20px; font-style: normal; color: #B7791F; font-weight: 700; }
.prb-h3 { margin: 0 0 10px; font: 700 1.1rem 'Unbounded', var(--font-display); color: #1B4D3E; }
.prb-end { background: var(--sand); }
.prb-end .ob-form { max-width: 640px; margin: 0 auto; }
/* Липка міні-кнопка на телефоні: після першого екрана, ховається біля форми внизу */
.prp-fab { display: none; }
@media (max-width: 760px) {
  .prp-fab { display: block; position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; padding: 12px 18px; border-radius: 999px;
    background: #D4AF37; color: #1B4D3E; font: 700 .9rem 'Onest', sans-serif; text-decoration: none; box-shadow: 0 12px 26px -10px rgba(6, 17, 13, .55);
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
  .prp-fab.on { opacity: 1; transform: none; pointer-events: auto; }
  .prb-split, .prb-split-r { grid-template-columns: minmax(0, 1fr); }
  .prb-art { max-width: 240px; margin: 0 auto; }
  .prb-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
  .prb-tags b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .prp-fab { transition: none; } }
.prk-sheet[data-roll="story"] .prw-badge { opacity: 0; }
@media (max-width: 760px) {
  /* Телефон: сцена на весь екран (підпис кроку — знизу), панелі на всю ширину */
  .prb-bg .prk-sheet { left: 2%; right: 2%; top: 1%; bottom: 17%; width: auto; height: auto; }
  .prb-cap { width: auto; margin: 0 12px 14px; }
  .prb-bg .prf-ui { inset: 2% 1%; }
  .prb-bg .prf-card .rbg { max-width: 92px; }
  .prb-bg .prf-card-h { font-size: .74rem; }
  .prb-bg .prf-state { min-height: 64px; font-size: 1rem; }
}

/* Процес без апарата з конструктора: панелі звичайним потоком, без липкої сцени */
.prb-plain .prb-panel { min-height: 0; }