/* Страница «DaSens Маркировка». Только то, чего нет в landing.css: рамка телефона, вкладки экранов, таблица «что случается → что делает», широкие схемы, таблица пакетов внедрения. Цвета — токены из :root landing.css. */ .mk-hero .lp-hero-in{grid-template-columns:1.25fr .75fr} .mk-hero h1{text-wrap:balance} /* Рамка телефона вокруг снимка ТСД */ .mk-phone{width:300px;max-width:100%;margin:0 auto;background:var(--ink);border-radius:36px; padding:12px;box-shadow:0 18px 48px rgba(11,18,32,.22)} .mk-phone img{display:block;width:100%;height:auto;border-radius:26px} /* Цифры под кнопками: у «4 режима» и «0 ₽» подпись длиннее, даём перенос */ .mk-hero .lp-hero-trust span{max-width:190px} /* Что случается → что делает */ .mk-pain{max-width:1000px;margin:0 auto;border:1px solid var(--bd);border-radius:12px;overflow:hidden;background:var(--surf-1)} .mk-pain-row{display:grid;grid-template-columns:1fr 1.3fr} .mk-pain-row+.mk-pain-row{border-top:1px solid var(--bd)} .mk-pain-row>div{padding:16px 22px;font-size:14.5px;line-height:1.5} .mk-pain-row>div:first-child{background:var(--surf-0);color:var(--tx-2)} .mk-pain-head>div{font-size:12px!important;font-weight:600;text-transform:uppercase;letter-spacing:.06em; color:var(--tx-3)!important;padding-top:12px!important;padding-bottom:12px!important} /* Широкие схемы (SVG) */ .mk-fig{max-width:1100px;margin:0 auto 40px} .mk-fig img{display:block;width:100%;height:auto;border:1px solid var(--bd);border-radius:12px;background:#fff} .mk-fig-solo{margin-bottom:24px} .mk-text{max-width:720px;margin:0 auto;text-align:center;font-size:15.5px;color:var(--tx-2);text-wrap:pretty} /* Экраны: без JS все пять подряд, с JS — вкладки над одной картинкой */ .mk-tabs{display:none;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 24px} .mk-js .mk-tabs{display:flex} .mk-tab{min-height:44px;padding:10px 16px;border-radius:8px;border:1px solid var(--bd-strong); background:var(--surf-1);color:var(--tx-2);font:inherit;font-size:14px;font-weight:500;cursor:pointer} .mk-tab:hover{color:var(--tx);background:var(--surf-2)} .mk-tab[aria-selected="true"]{background:var(--tx);border-color:var(--tx);color:#fff} .mk-tab:focus-visible,.mk-screen:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .mk-screens{display:flex;flex-direction:column;gap:40px;max-width:1100px;margin:0 auto} .mk-js .mk-screen[hidden]{display:none} .mk-screen{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .mk-screen-img{background:var(--surf-0);border:1px solid var(--bd);border-radius:12px;padding:16px; display:flex;justify-content:center} .mk-screen-img img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.08)} .mk-screen-tsd .mk-screen-img img{width:auto;max-width:100%;max-height:640px} .mk-screen figcaption{max-width:720px;margin:0 auto;text-align:center;font-size:14.5px;color:var(--tx-2)} .mk-screen figcaption b{display:block;color:var(--tx);font-size:16px;margin-bottom:4px} .mk-demo-note{text-align:center;font-size:12.5px;color:var(--tx-3);margin:20px 0 0} /* Что подключается и кому подходит */ .mk-cards{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .mk-cards-2{grid-template-columns:repeat(2,1fr)} .mk-card{background:var(--surf-1);border:1px solid var(--bd);border-radius:12px;padding:20px 22px} .mk-card b{display:block;font-size:15.5px;margin-bottom:6px} .mk-card p{margin:0;font-size:14px;color:var(--tx-2);line-height:1.55} .mk-section-alt{background:var(--surf-0);max-width:none;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)} /* Тарифы: две карточки вместо трёх */ .mk-plans{grid-template-columns:repeat(2,1fr);max-width:900px!important} .mk-plan-sub{font-size:13px;color:var(--tx-2);margin:-2px 0 18px} .mk-notes{max-width:900px;margin:24px auto 0;display:flex;flex-direction:column;gap:8px;text-align:center; font-size:14px;color:var(--tx-2)} .mk-notes .mk-small{font-size:13px;color:var(--tx-3)} /* Пакеты внедрения и техподдержка — таблицы */ .mk-price-block{max-width:900px;margin:40px auto 0} .mk-price-block h3{font-size:20px;margin:0 0 6px} .mk-price-block>p{margin:0 0 14px;font-size:14px;color:var(--tx-2)} .mk-table-wrap{overflow-x:auto;border:1px solid var(--bd);border-radius:12px;background:var(--surf-1)} .mk-table{width:100%;border-collapse:collapse;font-size:14px} .mk-table th,.mk-table td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--bd)} .mk-table thead th{border-top:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-3);background:var(--surf-0)} .mk-table td:first-child{font-weight:600;white-space:nowrap} .mk-table td:last-child,.mk-table th:last-child{text-align:right;white-space:nowrap;font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} .mk-table td:nth-child(2){color:var(--tx-2)} .mk-pilot{max-width:900px;margin:24px auto 0;background:var(--accent-bg);border-radius:12px;padding:20px 24px;font-size:15px;line-height:1.55} .mk-pilot b{display:block;font-size:16.5px;margin-bottom:4px} /* Форма: подсказка под полями */ .lp-form input[name=website]{position:absolute;left:-9999px;opacity:0;height:0;width:0} .mk-form .mk-full{grid-column:1/-1} .mk-form select{grid-column:auto} .mk-form .mk-sel-plan{grid-column:1/-1} .lp-form input,.lp-form select{min-height:44px;font-size:16px} .mk-form-note{font-size:12.5px;color:var(--tx-3);margin:14px 0 0} .mk-form-note a{color:var(--accent)} #thanks{display:none;margin-top:16px;padding:14px 18px;border-radius:10px;background:#E8F5EE;color:#0E7C3A;font-weight:500} #thanks:target{display:block} background:var(--surf-0);border:1px solid var(--bd);border-radius:16px;padding:32px} .lp-btn:focus-visible,.lp-faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media(max-width:920px){ .mk-hero .lp-hero-in{grid-template-columns:1fr} .mk-cards,.mk-cards-2,.mk-plans{grid-template-columns:1fr} .mk-pain-row{grid-template-columns:1fr} .mk-pain-row>div:first-child{padding-bottom:6px;font-weight:600;color:var(--tx)} .mk-pain-row>div:last-child{padding-top:6px} .mk-pain-head{display:none!important} } @media(max-width:560px){ .mk-screen-img{padding:8px} .mk-form select{grid-column:1/-1} .mk-tab{flex:1 1 calc(50% - 8px)} .mk-hero .lp-hero-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .mk-hero .lp-hero-trust b{font-size:19px} .mk-hero .lp-hero-trust span{font-size:12px} /* Таблицы цен — карточками: название и цена сверху, состав под ними */ .mk-table thead{display:none} .mk-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 16px;border-top:1px solid var(--bd)} .mk-table tbody tr:first-child{border-top:0} .mk-table td{padding:0;border:0} .mk-table td:first-child{grid-column:1;grid-row:1;white-space:normal} .mk-table td:last-child{grid-column:2;grid-row:1} .mk-table td:nth-child(2){grid-column:1/-1;grid-row:2;font-size:13.5px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } /* Полоса ценностей — та же, что на главной (там она в