/* GC Lab · сторінка офера «1С + CRM в одному вікні» (/crm/1c/, 09.10.2026) — розділ CRM-оферів /crm/<офер>/.
   Токени, кнопки, верхня панель, підпис автора, підвал і попап форми — з /line/line.css (світи paper / shop);
   тут лише розкладка лендингу послуги: перший екран з відео, «зараз / з CRM», калькулятор годин, схема «5 вікон → 1», картки вигод,
   «для вашого 1С-ника», кроки, кому підходить, питання.
   Стиль — «досьє консультанта» під послугу $1–2 тис.: текст згори вниз, великі числа, одна схема, лише справжні докази. */

.bar .bar__who b,.bar .bar__who span{display:block}
.bar .bar__who span{font-family:var(--f-m);font-size:10.5px;color:var(--fg-2);white-space:nowrap}

.sc{padding:64px 0}
.band{background:var(--paper-2)}
.sec{max-width:720px}
.kick{display:flex;align-items:center;gap:9px;font-family:var(--f-m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-2)}
.kick::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sec .h2{margin-top:14px}
.sec .lead{font-size:18px}
.mono{display:block}

/* ---------- перший екран ---------- */
.hero{padding:calc(var(--bar-h) + 30px) 0 56px}
.hero .h1{margin-top:16px;font-size:clamp(30px,8.4vw,54px);line-height:1.04}
.hero__sub{margin:14px 0 0;font-family:var(--f-d);font-weight:400;font-size:clamp(19px,5.2vw,26px);line-height:1.25;letter-spacing:-.015em}
.hero .lead{font-size:18px;max-width:600px}
.cta{margin-top:26px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta .btn{min-width:240px}
.cta__note{margin:0;font-family:var(--f-m);font-size:12px;line-height:1.5;color:var(--fg-2)}
.hero .byline{margin-top:28px}
.hero__vid{margin:34px 0 0;max-width:340px}
.hero__vid video{display:block;width:100%;aspect-ratio:9/16;border-radius:var(--r-l);background:var(--ink);box-shadow:var(--shadow);object-fit:cover}
.hero__vid figcaption{margin:10px 0 0;font-family:var(--f-m);font-size:12px;color:var(--fg-2)}

/* ---------- біль: п'ять вікон ---------- */
.wins{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
.win{position:relative;padding:22px 16px 12px;min-width:92px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--edge);
  font-family:var(--f-b);font-weight:600;font-size:15px}
.win::before{content:"";position:absolute;left:10px;top:9px;width:28px;height:5px;
  background:radial-gradient(circle at 2.5px 2.5px,var(--ink-3) 2.5px,transparent 3px) 0 0/10px 5px repeat-x}
.wins__who{flex-basis:100%;margin:6px 0 0;font-family:var(--f-m);font-size:12px;color:var(--fg-2)}

/* сцена дзвінка: зараз / з CRM */
.vs{margin-top:28px;display:grid;gap:12px}
.vs > div{padding:22px 20px;border-radius:var(--r-l);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.vs__now{box-shadow:0 0 0 1.5px var(--accent),var(--shadow) !important}
.vs__was .mono{color:var(--ink-3)}
.vs__now .mono{color:var(--accent)}
.vs__list{margin:14px 0 0;padding:0;list-style:none;counter-reset:vs;display:grid;gap:10px}
.vs__list li{counter-increment:vs;position:relative;padding-left:30px;font-size:16.5px;line-height:1.45}
.vs__list li::before{content:counter(vs);position:absolute;left:0;top:.08em;font-family:var(--f-m);font-size:13px;color:var(--ink-3)}
.vs__now .vs__list li::before{color:var(--accent)}
.vs__end{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--edge-2);font-size:15.5px;line-height:1.45;color:var(--fg-2)}
.vs__now .vs__end{color:var(--fg);font-weight:600}

/* калькулятор: скільки годин щодня йде на перемикання між вікнами (одразу заповнений, повзунки — цифри власника) */
.calc{margin-top:12px;padding:22px 20px;border-radius:var(--r-l);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.calc__grid{margin-top:18px;display:grid;gap:26px}
.calc__in{display:grid;gap:18px}
.rng{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 14px}
.rng label{font-size:15.5px;line-height:1.35}
.rng output{font-family:var(--f-d);font-weight:500;font-size:22px;font-variant-numeric:tabular-nums}
.rng input{grid-column:1/-1;width:100%;height:28px;margin:4px 0 0;padding:0;background:transparent;cursor:pointer;
  -webkit-appearance:none;appearance:none;accent-color:var(--accent);--p:50%}
.rng input::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(var(--accent),var(--accent)) 0 0/var(--p) 100% no-repeat,var(--paper-3)}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);box-shadow:0 2px 8px rgba(20,20,18,.2)}
.rng input::-moz-range-track{height:6px;border-radius:99px;background:var(--paper-3)}
.rng input::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
.rng input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--accent)}
.rng input:focus-visible{outline:none}
.rng input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px var(--accent-soft)}
.calc__out{padding-top:22px;border-top:1px solid var(--edge-2)}
.calc__out .num{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:clamp(48px,13vw,72px);color:var(--accent)}
.calc__out .num b{font-weight:400}
.calc__out .num i{margin:0;font-size:clamp(17px,4.6vw,22px);color:var(--fg)}
.calc__out p{margin:12px 0 0;font-size:16.5px;line-height:1.5;color:var(--fg-2)}
.calc__out .calc__fte{margin-top:6px;color:var(--fg);font-weight:600}
.calc__out .calc__note{margin-top:14px;font-family:var(--f-m);font-size:11.5px;letter-spacing:.02em;color:var(--fg-3)}
.calc > .btn{width:100%;margin-top:24px}

.facts{margin-top:26px;display:grid;grid-template-columns:1fr;gap:10px}
.fact{padding:20px 18px;border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.fact .num{display:block;font-size:clamp(32px,9.5vw,46px);color:var(--fg)}
.fact p{margin:10px 0 0;font-size:15px;line-height:1.45;color:var(--fg-2)}

/* ---------- як працює (світ «цех») ---------- */
.merge{margin-top:30px;display:grid;gap:14px}
.merge__in{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:10px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--edge);font-size:15px;color:var(--fg-2)}
.merge__arrow{font-family:var(--f-d);font-size:28px;line-height:1;color:var(--accent);transform:rotate(90deg);width:max-content}
.merge__out{padding:20px 20px 22px;border-radius:var(--r-l);background:var(--card);box-shadow:var(--shadow),0 0 0 1px var(--edge)}
.merge__out .mono{color:var(--accent)}
.merge__out ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.merge__out li{position:relative;padding-left:22px;font-size:17px;line-height:1.4}
.merge__out li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:2px;background:var(--accent)}

.steps{margin:34px 0 0;padding:0;list-style:none;counter-reset:st;display:grid;gap:10px}
.steps li{counter-increment:st;position:relative;padding:18px 18px 18px 62px;border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.steps li::before{content:counter(st,decimal-leading-zero);position:absolute;left:18px;top:18px;font-family:var(--f-m);font-size:15px;color:var(--accent)}
.steps b{display:block;font-family:var(--f-d);font-weight:500;font-size:18px;line-height:1.25;letter-spacing:-.01em}
.steps p{margin:7px 0 0;font-size:16px;line-height:1.55;color:var(--fg-2)}

/* картки вигод (що змінюється / для власника / інші варіанти); .how — механіка дрібним рядком унизу */
.cards{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sec + .cards{margin-top:28px}
.cards li{display:flex;flex-direction:column;padding:20px 18px;border-radius:var(--r-m);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.cards b{display:block;font-family:var(--f-d);font-weight:500;font-size:19px;line-height:1.25;letter-spacing:-.01em}
.cards p{flex:1;margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--fg-2)}
.how{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--edge-2);
  font-family:var(--f-m);font-size:11.5px;line-height:1.45;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}

/* для вашого 1С-ника — згорнутий блок у стилі питань */
.tech{margin-top:22px}
.tech summary{font-size:17px}
.tech .dash{margin:0 0 20px}
.tech .dash li{font-size:15.5px;color:var(--fg-2)}

/* ---------- примітка під блоком ---------- */
.note{margin:18px 0 0;max-width:720px;font-size:16px;line-height:1.55;color:var(--fg-2)}
.note b{color:var(--fg);font-weight:600}

/* ---------- хто робить: скрини й цифри засновника ---------- */
.proof{margin-top:28px;display:grid;gap:14px}
.shot{margin:0}
.shot a{display:block;border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow);background:var(--card)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin:10px 0 0;font-family:var(--f-m);font-size:12px;line-height:1.5;color:var(--fg-2)}

/* ---------- кому підходить ---------- */
.fit{margin-top:26px;display:grid;gap:12px}
.fit > div{padding:22px 20px;border-radius:var(--r-l);background:var(--card);box-shadow:0 0 0 1px var(--edge-2)}
.fit__yes .mono{color:var(--ok)}
.fit__no .mono{color:var(--ink-3)}
.dash{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.dash li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.45}
.dash li::before{content:"";position:absolute;left:2px;top:.68em;width:10px;height:2px;background:var(--accent)}
.fit__no .dash li::before{background:var(--ink-3)}
.dash a{text-decoration:none;border-bottom:1.5px solid var(--edge)}

/* ---------- питання ---------- */
.faq{margin-top:24px;max-width:760px;border-top:1px solid var(--edge)}
.faq details{border-bottom:1px solid var(--edge)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;
  font-family:var(--f-d);font-weight:500;font-size:18px;line-height:1.3;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-family:var(--f-m);font-size:22px;line-height:1;color:var(--accent);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;font-size:16.5px;line-height:1.6;color:var(--fg-2)}

/* ---------- заявка (світ «цех») ---------- */
.final{padding:72px 0 0}
.final__box{max-width:720px}
.final .lead{font-size:18px}
.final__btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px}
.final__btns .btn{flex:1 1 220px}
.final .cta__note{margin-top:12px}
.final .foot{margin-top:64px}

/* ---------- панель унизу екрана (телефон) ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--edge-2);transition:transform .3s var(--ease)}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){.dock{background:var(--paper)}}
.dock.off{transform:translateY(110%)}
.dock .btn{flex:1 1 0;min-width:0;height:48px;padding:0 10px;font-size:15px}
.dock .btn:not(.btn--acc){border-color:var(--ink);color:var(--ink);background:var(--white)}
.dock .btn--acc{flex-grow:1.7}   /* «Записатися на дзвінок» ширша за «Telegram» */
@media (max-width:479px){.bar__long{display:none}}   /* у вузькій панелі — лише «Записатися» */

/* ---------- планшет і комп'ютер ---------- */
@media (min-width:720px){
  .sc{padding:88px 0}
  .facts{grid-template-columns:1fr 1fr}
  .vs{grid-template-columns:1fr 1fr}
  .calc{padding:30px 32px}
  .calc__grid{grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
  .calc__out{padding:0 0 0 40px;border-top:0;border-left:1px solid var(--edge-2)}
  .calc > .btn{width:auto;min-width:300px}
  .cards--2{grid-template-columns:1fr 1fr}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .fit{grid-template-columns:1fr 1fr}
  .steps--4{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1.45fr 1fr;align-items:start}
  .merge{grid-template-columns:1fr auto 1.1fr;align-items:center;gap:22px}
  .merge__arrow{transform:none}
  .cta{flex-direction:row;align-items:center;gap:18px}
}
@media (min-width:960px){
  .hero{padding:calc(var(--bar-h) + 56px) 0 80px}
  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:center}
  .hero__vid{margin:0}
  .dock{display:none}
}
@media (prefers-reduced-motion:reduce){.dock,.faq summary::after{transition:none}}