/* Сторінка входу на токенах і класах CRM (style.css: --f-*, .au-*) — лише розкладка зверху. */
body.lp { display: block; min-height: 100%; height: auto; font-size: 14px; }
.lp-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; }
.lp-pitch { display: flex; flex-direction: column; gap: 26px; padding: 52px clamp(28px, 5vw, 80px); background: rgba(255,255,255,.02); box-shadow: inset -1px 0 0 var(--f-hair); }
.lp-pitch .au-brand { margin: 0; }
.lp-h { margin: 18px 0 0; font-size: clamp(30px, 3.1vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.lp-h span { background: var(--g-cta); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-lead { margin: 0; max-width: 560px; color: var(--f-muted); font-size: 16px; line-height: 1.55; }
.lp-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 640px; }
.lp-f { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--f-raised); box-shadow: var(--sh-hl); }
.lp-f.wide { grid-column: 1 / -1; }
.lp-f b { display: block; font-size: 14px; font-weight: 600; }
.lp-f small { color: var(--f-muted); font-size: 12.5px; line-height: 1.45; }
.lp-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--f-overlay); color: var(--f-soft); }
.lp-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--f-subtle); font-weight: 600; margin-bottom: 10px; }
.lp-how ol { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 640px; }
.lp-how li { counter-increment: s; }
.lp-how li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--f-overlay); color: var(--f-soft); font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.lp-how b { display: block; font-size: 14px; font-weight: 600; }
.lp-how small { color: var(--f-muted); font-size: 12.5px; }
.lp-fine { margin: auto 0 0; color: var(--f-subtle); font-size: 12.5px; max-width: 560px; }
.lp-main { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.lp-main .au-card { max-width: 480px; }
.au-pw { position: relative; display: block; }
.au-pw input { width: 100%; box-sizing: border-box; padding-right: 92px; }
.au-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 12px; font-size: 12px; background: var(--f-overlay); box-shadow: none; }
.au-rules { display: flex; gap: 14px; flex-wrap: wrap; margin-top: -6px; font-size: 12px; color: var(--f-subtle); }
.au-rules span::before { content: '○ '; } .au-rules span.ok { color: var(--f-ok); } .au-rules span.ok::before { content: '✓ '; }
.au-alt { text-align: center; color: var(--f-muted); font-size: 13.5px; margin: 4px 0 0; }
.au-kick { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--f-subtle); font-weight: 600; margin-bottom: -8px; }
.au-opts { display: grid; gap: 10px; }
.au-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--f-raised); box-shadow: var(--sh-hl); cursor: pointer; }
.au-opt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--f-primary); background: var(--f-overlay); }
.au-opt input { accent-color: var(--f-primary); margin-top: 3px; }
.au-opt b { display: block; font-weight: 600; } .au-opt small { color: var(--f-muted); font-size: 12.5px; line-height: 1.45; }
.au-note { padding: 14px 16px; border-radius: 16px; background: var(--f-raised); box-shadow: var(--sh-hl); color: var(--f-muted); font-size: 13px; line-height: 1.5; }
.au-note b { color: var(--f-text); font-weight: 600; }
#gbtn { display: flex; justify-content: center; min-height: 44px; }
.lp-m { display: none; }
@media (max-width: 960px) {
  .lp-shell { grid-template-columns: 1fr; }
  .lp-main { order: -1; display: block; padding: 28px 16px 36px; }
  .lp-main .au-card { margin: 0 auto; }
  .lp-pitch { padding: 36px 16px; box-shadow: inset 0 1px 0 var(--f-hair); }
  .lp-feats, .lp-how ol { grid-template-columns: 1fr; }
}
.au-form { display: flex; flex-direction: column; gap: 14px; }
.au-form .au-btn { width: 100%; }
.au-f input:not([type=radio]) { width: 100%; box-sizing: border-box; }
.au-sub b { color: var(--f-text); font-weight: 600; }
@media (min-width: 961px) { .lp-main .au-brand { display: none; } }
.au-kick { text-transform: none; letter-spacing: .02em; font-size: 12.5px; }
.au-opt, .au-note { border: 1px solid var(--f-line2); box-shadow: none; }
.au-opt:has(input:checked) { border-color: var(--f-primary); box-shadow: none; }
/* вхід за телефоном (Telegram / WhatsApp) */
.au-phk { text-align: center; color: var(--f-subtle); font-size: 12.5px; margin: 2px 0 -4px; }
.au-phs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-ph { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 999px; background: var(--f-raised); border: 1px solid var(--f-line2); box-shadow: none; color: var(--f-text); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.au-ph:hover { background: var(--f-overlay); }
.au-ph:focus-visible { outline: 2px solid var(--f-primary); outline-offset: 2px; }
.au-ph svg, .au-btn svg { width: 18px; height: 18px; flex: none; }
.au-ph.tg svg { fill: #2AABEE; } .au-ph.wa svg { fill: #25D366; }
.au-btn svg { fill: currentColor; }
.au-btn[data-act=plOpen] { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.au-how { margin: 0; padding-left: 20px; color: var(--f-muted); font-size: 14px; line-height: 1.6; display: grid; gap: 4px; }
.au-how b { color: var(--f-text); font-weight: 600; }
.au-wa-code { font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-align: center; padding: 16px; border-radius: 16px; background: var(--f-raised); border: 1px solid var(--f-line2); user-select: all; }
.au-wait { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--f-muted); font-size: 13px; }
.au-wait i { width: 8px; height: 8px; border-radius: 50%; background: var(--f-primary); animation: auPulse 1.2s ease-in-out infinite; }
@keyframes auPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .au-wait i { animation: none; } }
@media (max-width: 380px) { .au-phs { grid-template-columns: 1fr; } }
/* кнопка Google: фрейм GSI світлий усередині — без цього на темній сторінці під ним білий прямокутник */
#gbtn iframe { color-scheme: light; }
#gbtn > div { width: 100%; display: flex; justify-content: center; }
#gbtn iframe { border-radius: 999px; box-shadow: 0 0 0 1px var(--f-line2); margin: 0 !important; }
#gbtn { width: 100%; max-width: 400px; margin: 0 auto; }
/* без стрибка при завантаженні: місце під кнопку зарезервоване, вміст GSI видно лише коли фрейм готовий */
#gbtn { position: relative; height: 44px; min-height: 44px; overflow: hidden; border-radius: 999px; }
#gbtn::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: #131314; box-shadow: inset 0 0 0 1px var(--f-line2); transition: opacity .2s ease; pointer-events: none; }
#gbtn > div { opacity: 0; transition: opacity .2s ease; }
#gbtn.ready > div { opacity: 1; }
#gbtn.ready::before { opacity: 0; }
#gbtn::after { content: ''; position: absolute; inset: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--f-line2); pointer-events: none; }

/* ===== Docco: бренд і ліва панель ===== */
.lp-pitch { --dc-grad: linear-gradient(90deg, #245fd1 0%, #5b9be6 55%, #8acbff 100%); }
.dc-brand { display: flex; align-items: center; gap: 12px; }
.dc-mark { width: 40px; height: 40px; flex: none; border-radius: 12px; box-shadow: 0 6px 20px rgba(91,155,230,.35); }
.dc-brand b { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dc-brand small { display: flex; align-items: center; gap: 8px; color: var(--f-muted); font-size: 12.5px; }
.dc-beta { padding: 2px 8px; border-radius: 999px; background: rgba(91,155,230,.14); color: var(--f-soft); font-weight: 600; font-size: 11px; letter-spacing: .02em; }
.lp-pitch { gap: 26px; padding-top: 44px; padding-bottom: 36px; }
.lp-pitch > * { max-width: 680px; }
.dc-hero { display: grid; gap: 16px; }
.dc-hero .lp-h { margin: 0; }
.lp-h span { background: linear-gradient(90deg, #5b9be6 0%, #8acbff 40%, #d3eaff 50%, #8acbff 60%, #5b9be6 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: dcShine 7s ease-in-out infinite; }
@keyframes dcShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* поява блоків по черзі */
.rv { opacity: 0; transform: translateY(14px); animation: dcIn .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
@keyframes dcIn { to { opacity: 1; transform: none; } }

/* живий цех */
.dc-live { padding: 16px; border-radius: 22px; background: var(--f-raised); border: 1px solid var(--f-line2); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.dc-live-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 13.5px; }
.dc-live-h small { margin-left: auto; color: var(--f-subtle); font-variant-numeric: tabular-nums; }
.dc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--f-ok); box-shadow: 0 0 0 0 rgba(145,197,177,.5); animation: dcPing 2s ease-out infinite; }
@keyframes dcPing { 0% { box-shadow: 0 0 0 0 rgba(145,197,177,.45); } 80%, 100% { box-shadow: 0 0 0 8px rgba(145,197,177,0); } }
.dc-posts { display: grid; gap: 8px; }
.dc-post { position: relative; display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; padding: 9px 14px 13px; border-radius: 14px; background: var(--f-overlay); overflow: hidden; }
.dc-pn { color: var(--f-subtle); font-size: 12px; font-weight: 600; }
.dc-car b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dc-car small { color: var(--f-muted); font-size: 12px; }
.dc-st { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: background-color .3s ease, color .3s ease; }
.dc-st.s0 { background: rgba(255,255,255,.07); color: var(--f-muted); }
.dc-st.s1 { background: rgba(198,178,131,.15); color: var(--f-warn); }
.dc-st.s2 { background: rgba(91,155,230,.16); color: var(--f-soft); }
.dc-st.s3 { background: rgba(145,197,177,.16); color: var(--f-ok); }
.dc-bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.dc-bar > i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--dc-grad); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.dc-post.bump .dc-st { animation: dcPop .45s ease; }
.dc-post.in { animation: dcArrive .6s cubic-bezier(.2,.7,.2,1); }
@keyframes dcPop { 40% { transform: scale(1.08); } }
@keyframes dcArrive { from { opacity: 0; transform: translateX(-16px); } }
.dc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dc-kpis div { padding: 10px 12px; border-radius: 12px; background: var(--f-overlay); }
.dc-kpis small { display: block; color: var(--f-subtle); font-size: 11.5px; }
.dc-kpis b { display: inline-block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dc-kpis b.tick { animation: dcTick .5s ease; }
@keyframes dcTick { 30% { transform: translateY(-3px); color: var(--f-soft); } }

/* функції */
.dc-sec { }
.dc-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dc-f { display: flex; gap: 11px; align-items: flex-start; padding: 13px; border-radius: 16px; border: 1px solid var(--f-line2); background: rgba(255,255,255,.015); transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
.dc-f:hover { background: var(--f-raised); border-color: #34404f; transform: translateY(-2px); }
.dc-f svg, .dc-sn svg, .dc-trust svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dc-f > svg { width: 34px; height: 34px; padding: 8px; box-sizing: border-box; border-radius: 11px; background: var(--f-overlay); color: var(--f-soft); }
.dc-f b { display: block; font-size: 13.5px; font-weight: 600; }
.dc-f small { display: block; color: var(--f-muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }

/* кроки з лінією */
.dc-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; }
.dc-steps::before { content: ''; position: absolute; top: 19px; left: 19px; right: calc(33.3% - 19px); height: 2px; background: linear-gradient(90deg, var(--f-primary), rgba(91,155,230,.15)); transform-origin: left; transform: scaleX(0); animation: dcLine 1.2s .9s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes dcLine { to { transform: scaleX(1); } }
.dc-steps li { position: relative; }
.dc-sn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--f-raised); border: 1px solid var(--f-line2); color: var(--f-soft); margin-bottom: 10px; position: relative; z-index: 1; }
.dc-steps li:first-child .dc-sn { background: var(--dc-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 22px rgba(91,155,230,.4); }
.dc-steps b { display: block; font-size: 14px; font-weight: 600; }
.dc-steps small { color: var(--f-muted); font-size: 12.5px; }

/* довіра */
.dc-trust { list-style: none; padding: 0; margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--f-subtle); font-size: 12.5px; }
.dc-trust li { display: flex; align-items: center; gap: 7px; }
.dc-trust svg { width: 15px; height: 15px; color: var(--f-muted); }

@media (max-width: 1280px) { .dc-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) { .lp-pitch .dc-brand { display: none; } }
@media (max-width: 560px) {
  .dc-feats, .dc-steps { grid-template-columns: 1fr; }
  .dc-steps::before { display: none; }
  .dc-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; }
  .dc-steps .dc-sn { grid-row: span 2; margin: 0; }
  .dc-post { grid-template-columns: 1fr auto; } .dc-pn { display: none; }
  .dc-kpis b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; animation: none; }
  .lp-h span, .dc-dot, .dc-steps::before { animation: none; } .dc-steps::before { transform: none; }
  .dc-f, .dc-bar > i { transition: none; }
}
@media (min-width: 961px) { .lp-main { position: sticky; top: 0; height: 100vh; box-sizing: border-box; } }

/* ===== усе в одну висоту вікна (десктоп): без вертикальної прокрутки ===== */
.dc-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-tab { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px 0 10px; border-radius: 999px; border: 1px solid var(--f-line2); background: transparent; box-shadow: none; color: var(--f-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; overflow: hidden; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.dc-tab svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dc-tab:hover { color: var(--f-text); background: var(--f-raised); }
.dc-tab.on { color: var(--f-text); background: var(--f-raised); border-color: rgba(91,155,230,.45); }
.dc-tab.on svg { color: var(--f-soft); }
.dc-tab.on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--dc-grad); transform-origin: left; animation: dcProg 3.6s linear forwards; }
.dc-tour.hold .dc-tab.on::after { animation-play-state: paused; }
@keyframes dcProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dc-desc { margin: 10px 0 0; min-height: 2.9em; color: var(--f-muted); font-size: 14px; line-height: 1.45; }
.dc-desc b { color: var(--f-text); font-weight: 600; }
.dc-desc.swap { animation: dcSwap .45s cubic-bezier(.2,.7,.2,1); }
@keyframes dcSwap { from { opacity: 0; transform: translateY(6px); } }
/* кроки — компактно в рядок */
.dc-steps li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; }
.dc-steps .dc-sn { grid-row: span 2; width: 34px; height: 34px; margin: 0; }
.dc-steps .dc-sn svg { width: 16px; height: 16px; }
.dc-steps::before { top: 16px; left: 17px; }
.dc-steps b { font-size: 13.5px; } .dc-steps small { font-size: 12px; line-height: 1.3; }
.dc-steps li:not(:first-child) { background: transparent; }
.dc-steps b, .dc-steps small { position: relative; z-index: 1; background: var(--f-surface-l, transparent); }

@media (min-width: 961px) {
  html, body.lp { height: 100%; overflow: hidden; }
  .lp-shell { height: 100vh; min-height: 0; }
  .lp-pitch { height: 100vh; box-sizing: border-box; overflow: hidden; justify-content: space-between; gap: clamp(12px, 2.2vh, 26px); padding: clamp(22px, 4vh, 44px) clamp(28px, 5vw, 80px); }
  .lp-h { font-size: clamp(26px, min(3.1vw, 4.6vh), 44px); }
  .lp-lead { font-size: clamp(14px, 1.7vh, 16px); }
  .dc-post { padding-top: clamp(6px, 1vh, 10px); padding-bottom: clamp(10px, 1.4vh, 13px); }
  .lp-main { height: 100vh; overflow-y: auto; }
}
/* низькі вікна: прибираємо другорядне, щоб нічого не різалось */
@media (min-width: 961px) and (max-height: 860px) { .dc-kpis { display: none; } }
@media (min-width: 961px) and (max-height: 760px) { .lp-lead, .dc-trust { display: none; } }
@media (min-width: 961px) and (max-height: 660px) { .dc-steps, .dc-steps + *, .lp-pitch .dc-sec:has(.dc-steps) { display: none; } .dc-post:nth-child(3) { display: none; } }
/* компактніше: вкладки — іконки, назва лише в активної */
.dc-tabs { flex-wrap: nowrap; }
.dc-tab { padding: 0 11px; gap: 0; flex: none; }
.dc-tab span { max-width: 0; opacity: 0; white-space: nowrap; transition: max-width .45s cubic-bezier(.2,.7,.2,1), opacity .3s ease, margin .45s ease; }
.dc-tab.on span, .dc-tab:hover span { max-width: 160px; opacity: 1; margin-left: 7px; }
.dc-tab:hover:not(.on) span { max-width: 0; opacity: 0; margin-left: 0; }
.dc-tab[title] { }
/* лічильники цеху — один низький рядок */
.dc-kpis { margin-top: 8px; }
.dc-kpis div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.dc-kpis b { font-size: 17px; }
/* довіра — в один рядок */
.dc-trust { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; gap: 18px; }
@media (max-width: 1600px) { .dc-trust li:nth-child(3) { display: none; } }
@media (min-width: 961px) and (max-height: 860px) { .dc-kpis { display: grid; } }
@media (min-width: 961px) and (max-height: 820px) { .dc-kpis { display: none; } }
/* кроки в рядок: замість лінії через текст — стрілка між кроками */
.dc-steps::before { display: none; }
.dc-steps li:not(:last-child)::after { content: ''; position: absolute; right: 2px; top: 50%; width: 7px; height: 7px; border-top: 1.6px solid var(--f-dim); border-right: 1.6px solid var(--f-dim); transform: translateY(-50%) rotate(45deg); }
.dc-steps small { white-space: nowrap; }