/* Сторінки: головна, майстер, робота, база, стандарт. */

/* Головна: заголовок і аркуш А4 з розміченими полями — головний образ сервісу. */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; padding: 24px 0 48px; }
.hero .lead { margin-top: 18px; }
.hero .row { margin-top: 26px; }
@media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.a4 { position: relative; aspect-ratio: 210 / 297; max-width: 360px; width: 100%; margin: 0 auto; background:
  linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 14px 14px,
  linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 14px 14px, var(--paper);
  border: 1px solid var(--grid-strong); }
.a4 .field { position: absolute; left: 14.3%; right: 7.1%; top: 6.7%; bottom: 6.7%; background: var(--paper); border: 1px dashed var(--grid-strong); padding: 7% 6%; display: flex; flex-direction: column; gap: 7px; }
.a4 .ttl { font: 700 11px/1.3 var(--f-doc); text-align: center; letter-spacing: .02em; margin-bottom: 4px; }
.a4 .ln { height: 5px; background: #e7ebf1; border-radius: 1px; }
.a4 .cite { font: 400 11px/1.4 var(--f-doc); color: var(--graphite); }
.a4 .cite b { font-weight: 400; color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.a4 .dim { position: absolute; font: 500 11px/1 var(--f-ui); color: var(--pencil); background: var(--paper); padding: 2px 3px; }
.a4 .mark { position: absolute; left: 2.5%; font: 600 13px/1.1 var(--f-ui); color: var(--margin); transform: rotate(-8deg); }

.how { counter-reset: s; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--grid-strong); }
.how li { list-style: none; padding: 16px 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.how li::before { counter-increment: s; content: counter(s); font: 700 15px/1 var(--f-ui); color: var(--margin); }
.how ol { margin: 0; padding: 0; }
@media (max-width: 900px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } }
@media (max-width: 520px) { .how { grid-template-columns: minmax(0, 1fr); } }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--grid-strong); }
.facts > div { padding: 18px 22px 18px 0; border-bottom: 1px solid var(--grid); display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 700px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.price .amt { font: 700 30px/1 var(--f-ui); letter-spacing: -.02em; margin: 6px 0 10px; }
.price ul { margin: 0; padding-left: 18px; font-size: var(--t-s); color: var(--pencil); display: flex; flex-direction: column; gap: 4px; }
.price .hl { border-color: var(--ink); }
@media (max-width: 780px) { .price { grid-template-columns: minmax(0, 1fr); } }
.faq details { border-top: 1px solid var(--grid); padding: 14px 0; }
.faq p { margin-top: 8px; color: var(--pencil); }
section + section { margin-top: 44px; }

/* Майстер: послідовність етапів. */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px 0 22px; padding: 0; }
.steps li { list-style: none; border-top: 3px solid var(--grid); padding-top: 8px; font-size: var(--t-s); color: var(--pencil); display: flex; gap: 8px; align-items: baseline; }
.steps li .n { font-weight: 700; }
.steps li.on { border-top-color: var(--ink); color: var(--graphite); font-weight: 600; }
.steps li.done { border-top-color: var(--check); color: var(--graphite); }
.steps li.done .n { color: var(--check); }
.steps button { all: unset; cursor: pointer; display: flex; gap: 8px; }
@media (max-width: 560px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.choice button { flex-direction: column; align-items: flex-start; text-align: left; gap: 5px; padding: 14px; line-height: 1.35; }
.choice button.on { border-color: var(--ink); background: var(--ink-soft); }
.choice button .muted { font-weight: 400; }
.outline { font: 400 16px/1.6 var(--f-doc); }
.outline .c { font-weight: 700; margin-top: 10px; }
.outline .c:first-child { margin-top: 0; }
.outline .s { padding-left: 1.4em; }
.outline .s.emp { background: var(--ink-soft); box-shadow: inset 3px 0 0 var(--ink); }
.plan-ta { font: 400 15px/1.6 var(--f-doc); min-height: 230px; }
.amt-big { font: 700 44px/1 var(--f-ui); letter-spacing: -.03em; }

/* Робота: вкладки, вміст, бічна панель конвеєра. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
@media (max-width: 980px) { .work { grid-template-columns: minmax(0, 1fr); } }
.side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 980px) { .side { position: static; order: -1; } }
.tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--grid-strong); margin-bottom: 16px; scrollbar-width: thin; }
.tabs a { padding: 10px 13px; color: var(--pencil); text-decoration: none; font-size: var(--t-s); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; gap: 6px; align-items: center; }
.tabs a.on { color: var(--graphite); border-bottom-color: var(--ink); }
.pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-s); }
.pipe li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; color: var(--pencil); }
.pipe li::before { content: ""; width: 9px; height: 9px; margin-top: 6px; border: 1.5px solid var(--grid-strong); border-radius: 50%; }
.pipe li.done { color: var(--graphite); }
.pipe li.done::before { background: var(--check); border-color: var(--check); }
.pipe li.now { color: var(--ink); font-weight: 600; }
.pipe li.now::before { border-color: var(--ink); background: var(--ink-soft); }
.status-done { border-color: #b8dcc8; }
.status-fix { border-color: #ecd59c; }
.score { font: 700 30px/1 var(--f-ui); font-variant-numeric: tabular-nums; }

.src { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--grid); }
.src .no { color: var(--pencil); font-variant-numeric: tabular-nums; }
.src .tx { font: 400 15px/1.5 var(--f-doc); }
.card-f { border-left: 2px solid var(--grid-strong); padding: 6px 0 6px 12px; margin-top: 8px; }

.rubric { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.rb { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; border-top: 1px solid var(--grid); padding-top: 10px; }
.rb .sc { font: 700 24px/1 var(--f-ui); color: var(--check); }
.rb.bad .sc { color: var(--margin); }
.dl { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; border-top: 1px solid var(--grid); font-size: var(--t-s); }
@media (max-width: 640px) { .dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.digest { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 24px; }
.digest ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--t-s); display: flex; flex-direction: column; gap: 3px; }
.req-table { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1fr); gap: 0 14px; font-size: var(--t-s); }
.req-table > div { display: contents; }
.req-table > div > * { padding: 9px 0; border-top: 1px solid var(--grid); }
.req-table .g { grid-column: 1 / -1; font-weight: 600; padding-top: 16px; border-top: 0; }
@media (max-width: 700px) { .req-table { grid-template-columns: minmax(0, 1fr); } .req-table > div > * { border-top: 0; padding: 3px 0; } .req-table > div > *:first-child { border-top: 1px solid var(--grid); padding-top: 10px; } }
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.works a.sheet { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 8px; }
.works a.sheet:hover { border-color: var(--ink); }
.chart svg { width: 100%; height: auto; display: block; }
.std td:first-child { color: var(--pencil); width: 34px; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .std thead { display: none; } .std, .std tbody, .std tr, .std td { display: block; } .std tr { padding: 10px 0; border-bottom: 1px solid var(--grid); } .std td { border: 0; padding: 2px 0; } }
/* Телефон і планшет: панель стоїть над вкладками, тож показуємо лише поточний і наступні кроки;
   скільки виконано — видно з лічильника «N з M». */
@media (max-width: 980px) {
  .pipe li.done { display: none; }
  .pipe li.done:has(+ li:not(.done)), .pipe li.done:last-child { display: grid; }
}

/* Головна-воронка */
.start { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { border: 1px solid var(--grid-strong); background: var(--paper); border-radius: var(--r); padding: 8px 12px; font: 500 var(--t-s)/1.2 var(--f-ui); color: var(--graphite); cursor: pointer; }
.seg button.on { border-color: var(--ink); background: var(--ink-soft); color: var(--ink); }
.flow { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 32px; padding: 0; list-style: none; counter-reset: f; border-top: 1px solid var(--grid-strong); }
.flow li { counter-increment: f; flex: 1 1 160px; padding: 12px 12px 0 0; font: 500 var(--t-s)/1.3 var(--f-ui); }
.flow li::before { content: counter(f) ' '; color: var(--margin); font-weight: 700; }
.facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 32px; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price .btn { margin-top: 12px; align-self: flex-start; }
.price > div { display: flex; flex-direction: column; }
@media (max-width: 640px) { .facts { grid-template-columns: minmax(0, 1fr); } }
/* Телефон: на першому екрані лише форма старту, ілюстрація не відсуває вміст */
@media (max-width: 860px) { .hero .a4 { display: none; } }