/* Урок Просто — лендинг `/` (up-land.css, 06.11): страница без меню кабинета. Подключать последним, после up-pub.css.
   Из принятого: кнопки up-btn / up-docs-ghost, карточка up-card, превью up-sh (плитка), витрина up-tier, вопросы up-faq, номер up-pub-step-n.
   Кандидаты в ДС: шапка лендинга (up-land-head, якоря и меню разделов на телефоне), карусель первого экрана (up-land-stage: слайды, стрелки,
   точки с полосой времени), полоса цифр (up-land-stats), карточка формата с превью (up-land-fmt), фрагмент экрана в карточке (up-land-frag),
   плитка раздела (up-land-tile), заголовок раздела с надзаголовком (up-land-sh), подвал (up-land-foot). */

/* фон — как у рабочей области кабинета (up-kit.css, .up > .f-side + div): у лендинга оболочки нет, фон — на корне */
.up-land { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .30), transparent 68%),
  radial-gradient(760px 560px at 104% 14%, rgba(var(--up-peach), .30), transparent 70%),
  radial-gradient(640px 460px at -6% 44%, rgba(var(--up-indigo), .10), transparent 70%),
  linear-gradient(180deg, #efecfa 0, var(--bg) 720px); }
.up-land[data-theme="dark"] { background:
  radial-gradient(1100px 640px at 50% -260px, rgba(var(--up-indigo), .26), transparent 68%),
  radial-gradient(760px 560px at 104% 14%, rgba(var(--up-peach), .12), transparent 70%),
  var(--bg); }
.up-land-wrap { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.up-land a { text-decoration: none; }
.up-land .up-btn.is-lg, .up-land .up-docs-ghost.is-lg { height: 52px; padding: 0 24px; font-size: 16px; }
.up-land [id] { scroll-margin-top: 84px; }

/* ---------- шапка: знак, якоря разделов, тема, «Войти», «Начать»; на телефоне якоря — в меню под шапкой ---------- */
.up-land-head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--up-card-line); background: var(--up-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.up-land-head-in { display: flex; align-items: center; gap: 20px; height: 68px; }
.up-land-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.up-land-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.up-land-nav-a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 14.5px; line-height: 20px; font-weight: 500; color: var(--text-2);
  white-space: nowrap; transition: color .15s, background-color .15s; }
.up-land-nav-a:hover { color: var(--ink); background: var(--surface-2); }
.up-land-nav-login { display: none; }
.up-land-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.up-land-nav + .up-land-acts { margin-left: 0; }
.up-land-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s; }
.up-land-icon:hover { background: var(--surface-2); }
.up-land-sun, .up-land[data-theme="dark"] .up-land-moon { display: none; }
.up-land[data-theme="dark"] .up-land-sun, .up-land-moon { display: inline-grid; }
.up-land-burger { display: none; }
.up-land-short { display: none; }
.up .up-land-nav-a:focus-visible, .up .up-land-brand:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ws-accent); }
.up .up-land-icon:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ws-accent); }

/* ---------- первый экран: текст слева, техкарта собирается справа; под ними — полоса цифр ---------- */
.up-land-hero { padding: 56px 0 8px; overflow-x: clip; }  /* слайды за краем не дают горизонтальной прокрутки */
.up-land-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; }
.up-land-hero-t { display: grid; justify-items: start; gap: 22px; min-width: 0; }
.up-land-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--up-card-line);
  background: var(--up-glass); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.up-land-pill svg { color: var(--success); }
.up-land-h1 { margin: 0; font-family: var(--font-display); font-size: 56px; line-height: 62px; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.up-land-mark { background: linear-gradient(100deg, #4b40b8, #7c68ee 55%, #c46ad8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.up-land[data-theme="dark"] .up-land-mark { background-image: linear-gradient(100deg, #a99bff, #c7b8ff 55%, #f0a6e6); }
.up-land-lead { margin: 0; max-width: 560px; font-size: 18px; line-height: 28px; color: var(--text-2); text-wrap: pretty; }
.up-land-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.up-land-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; color: var(--text-2); }
.up-land-trust li { display: inline-flex; align-items: center; gap: 8px; }
.up-land-trust svg { color: var(--ws-icon); }

.up-land-demo { position: relative; justify-self: center; width: 100%; max-width: 480px; }
.up-land-float { position: absolute; z-index: 2; top: 4px; right: -18px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid var(--up-card-line); background: var(--surface); box-shadow: 0 14px 34px -18px rgba(60, 40, 120, .5); font-size: 14px; font-weight: 600; color: var(--ink); }
.up-land-float svg { color: var(--ws-accent); }
.up-land-toast { position: absolute; z-index: 2; left: -22px; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 18px; border: 1px solid var(--up-card-line);
  background: var(--surface); box-shadow: 0 20px 44px -20px rgba(60, 40, 120, .55); }
.up-land-toast .up-tile { background: var(--success-tint); color: var(--success); }
.up-land-toast b, .up-land-toast small { display: block; }
.up-land-toast b { font-size: 15px; line-height: 20px; color: var(--ink); }
.up-land-toast small { font-size: 13px; line-height: 18px; color: var(--text-2); }
/* ---------- карточка документа справа (08.11, «Лендинг, карусель», 2.1): лист бумаги со своим устройством у каждого формата — белый
   в обеих темах, как превью up-sh; цвета бумаги — из up-sheets.css. Части листа проявляются по очереди (--i) ---------- */
.up-lp { position: relative; --lp-ink: #1f1b3a; --lp-mut: #5f5b76; --lp-line: #d9d5e6; --lp-rule: #b9b4cc; --lp-soft: #f4f2f9; --lp-mark: #4b40b8;
  --lp-shadow: 0 30px 70px -34px rgba(60, 40, 120, .55); }
.up-lp-paper { position: relative; z-index: 1; box-sizing: border-box; display: grid; align-content: start; gap: 10px; width: 100%; max-width: 440px; margin: 0 auto;
  padding: 22px 24px 20px; border-radius: 16px; border: 1px solid rgba(31, 27, 58, .08); background: #fff; color: var(--lp-ink); font-family: var(--font-sans);
  font-size: 12.5px; line-height: 18px; box-shadow: var(--lp-shadow); transform: rotate(-1.2deg); }
.up-lp[data-fmt="techmap"] .up-lp-paper { max-width: none; }
.up-lp p { margin: 0; }
.up-lp b { font-weight: 700; }
.up-lp-head { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid var(--lp-line); }
.up-lp-eb { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lp-mut); }
.up-lp-badge { flex: 0 0 auto; padding: 1px 8px; border-radius: 6px; border: 1px solid var(--lp-rule); font-size: 11px; line-height: 16px; letter-spacing: 0; text-transform: none; color: var(--lp-ink); }
.up-lp-title { font-family: var(--font-display); font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--lp-ink); text-wrap: balance; }
.up-lp-meta { font-size: 12px; line-height: 16px; color: var(--lp-mut); }
.up-lp-note { font-size: 11.5px; line-height: 16px; color: var(--lp-mut); }
/* дробь столбиком, как в тетради */
.up-lp-fr { display: inline-flex; flex-direction: column; align-items: center; margin: 0 1px; vertical-align: middle; font-size: 11px; line-height: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.up-lp-fr i { padding: 0 2px; font-style: normal; }
.up-lp-fr i + i { border-top: 1px solid currentColor; }
/* техкарта — таблица этапов */
.up-lp-tm { display: grid; border: 1px solid var(--lp-line); border-radius: 8px; overflow: hidden; }
.up-lp-tr { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.05fr); }
.up-lp-tr + .up-lp-tr { border-top: 1px solid var(--lp-line); }
.up-lp-td { min-width: 0; padding: 7px 8px; font-size: 11.5px; line-height: 15px; overflow-wrap: break-word; }
.up-lp-td + .up-lp-td { border-left: 1px solid var(--lp-line); }
.up-lp-tr.is-h { background: var(--lp-soft); }
.up-lp-tr.is-h .up-lp-td { padding-top: 6px; padding-bottom: 6px; font-size: 10.5px; line-height: 14px; font-weight: 700; color: var(--lp-mut); }
.up-lp-td.is-b { font-weight: 700; }
.up-lp-td small { display: block; font-size: 11px; font-weight: 400; color: var(--lp-mut); }
.up-lp-td.is-u { color: var(--lp-mut); }
/* план-конспект и классный час — этапы с репликами */
.up-lp-st { display: grid; gap: 3px; }
.up-lp-sth { font-weight: 700; }
.up-lp-sth span { font-weight: 400; color: var(--lp-mut); }
/* рабочий лист и контрольная — уровни, задания, строки для ответа */
.up-lp-lvl { margin-bottom: 3px; font-size: 10.5px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lp-mut); }
.up-lp-task + .up-lp-task { margin-top: 5px; }
.up-lp-blank { display: inline-block; width: 44px; height: 1px; vertical-align: baseline; border-bottom: 1px solid var(--lp-ink); }
.up-lp-blank.is-l { width: 128px; }
.up-lp-rule { display: block; height: 18px; border-bottom: 1px solid var(--lp-rule); }
.up-lp-opts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; padding-left: 16px; }
.up-lp-opts span { display: inline-flex; align-items: center; gap: 4px; }
/* контрольная — за первым листом второй вариант */
.up-lp-paper.is-back { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: min(100%, 440px); max-width: none; overflow: hidden;
  transform: translateX(-50%) translate(20px, -14px) rotate(3deg); box-shadow: 0 20px 50px -30px rgba(60, 40, 120, .5); }
.up-lp-bar { display: block; height: 6px; border-radius: 3px; background: #e7e4f0; }
/* карточки — лист A4 под нарезку: пунктир и ножницы */
.up-lp-cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px dashed var(--lp-rule); border-radius: 4px; }
.up-lp-card { display: grid; align-content: start; gap: 6px; padding: 10px 12px 12px; }
span.up-lp-card:nth-of-type(n+3) { border-top: 1px dashed var(--lp-rule); }
span.up-lp-card:nth-of-type(odd) { border-right: 1px dashed var(--lp-rule); }
.up-lp-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.up-lp-ex { white-space: nowrap; }
.up-lp-card-h span { font-size: 10.5px; line-height: 14px; color: var(--lp-mut); }
.up-lp-cut { position: absolute; top: -9px; left: 18px; padding: 0 2px; background: #fff; color: var(--lp-mut); }
/* диктант — текст на линейке, орфограммы подчёркнуты, как в листе учителя */
.up-lp-lined { padding-top: 1px; background: repeating-linear-gradient(transparent 0 21px, #ece9f3 21px 22px); line-height: 22px; }
.up-lp u { text-decoration: none; border-bottom: 1.5px solid var(--lp-mark); }
/* презентация — слайд (оформление «Классическая», как в up-sheets) и лента миниатюр */
.up-lp-deck { display: grid; gap: 12px; transform: rotate(-1.2deg); }
.up-lp-slide { --sl-acc: #1d4ed8; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; border: 1px solid rgba(31, 27, 58, .08);
  background: #fff; color: #1f2937; box-shadow: var(--lp-shadow); }
.up-lp-sl-top { position: absolute; left: 28px; top: 20px; font-size: 12px; line-height: 16px; color: var(--lp-mut); }
.up-lp-sl-mid { position: absolute; left: 28px; right: 24px; top: 46px; bottom: 44px; display: flex; align-items: center; gap: 18px; }
.up-lp-sl-t { flex: 1 1 0; min-width: 0; display: grid; gap: 12px; }
.up-lp-sl-t b { font-family: var(--font-display); font-size: 23px; line-height: 28px; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.up-lp-sl-f { font-size: 16px; line-height: 20px; font-weight: 700; color: var(--sl-acc); }
.up-lp-sl-f .up-lp-fr { font-size: 13px; line-height: 15px; }
.up-lp-pie { flex: 0 0 auto; width: 32%; max-width: 136px; height: auto; }
.up-lp-pie path { fill: #e8ecf7; stroke: #fff; stroke-width: 1.2; }
.up-lp-pie path.is-a { fill: var(--sl-acc); }
.up-lp-pie path.is-b { fill: #7aa2f7; }
.up-lp-sl-foot { position: absolute; left: 28px; right: 24px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.up-lp-sl-foot i { display: block; width: 56px; height: 5px; border-radius: 3px; background: var(--sl-acc); }
.up-lp-sl-foot small { font-size: 11px; line-height: 14px; color: var(--lp-mut); font-variant-numeric: tabular-nums; }
.up-lp-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 84px)) auto; justify-content: end; align-items: center; gap: 8px; }  /* слева — «Презентация готова» */
.up-lp-th { position: relative; display: grid; align-content: center; gap: 4px; aspect-ratio: 16 / 9; padding: 0 12%; border-radius: 6px; border: 1px solid rgba(31, 27, 58, .1);
  background: #fff; box-shadow: 0 8px 18px -12px rgba(60, 40, 120, .45); }
.up-lp-th i { display: block; height: 3px; border-radius: 2px; background: #cfd6ea; }
.up-lp-th i + i { width: 60%; }
.up-lp-th small { position: absolute; right: 4px; bottom: 1px; font-size: 8px; line-height: 10px; color: #8a86a0; }
.up-lp-th.is-on { border-color: #1d4ed8; box-shadow: inset 0 0 0 1px #1d4ed8, 0 8px 18px -12px rgba(60, 40, 120, .45); }
.up-lp-more { font-size: 12.5px; line-height: 16px; font-weight: 700; color: var(--text-2); }
@keyframes up-land-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---------- карусель первого экрана (вариант А, 07.11): листается весь экран — заголовок с подзаголовком слева и документ справа; плашка,
   кнопки и строка доверия стоят. Все слайды — в одной ячейке сетки: высота по самому высокому, ничего не прыгает. Показанный — data-pos="on",
   остальные ждут за краем (l / r) невидимыми; уходящий уезжает в сторону листания. Строки, полоса и плашки документа проигрываются заново,
   когда слайд становится показанным ---------- */
.up-land-stage { position: relative; touch-action: pan-y; }  /* горизонтальный свайп — наш, вертикальная прокрутка — браузера */
.up-land-texts, .up-land-slides { display: grid; }
.up-land-tx, .up-land-slide { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease-out), transform .45s var(--ease-out), visibility 0s linear .45s; }
.up-land-tx { display: grid; align-content: start; gap: 22px; }
.up-land-tx[data-pos="l"] { transform: translateX(-28px); }
.up-land-tx[data-pos="r"] { transform: translateX(28px); }
.up-land-slide { position: relative; align-self: center; padding: 28px 0 52px; }  /* снизу — место для «… готова»: не закрывает последнюю строку листа */
.up-land-slide[data-pos="l"] { transform: translateX(-64px) rotate(-2deg); }
.up-land-slide[data-pos="r"] { transform: translateX(64px) rotate(2deg); }
.up-land-tx[data-pos="on"], .up-land-slide[data-pos="on"] { opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s var(--ease-out) .1s, transform .6s var(--spring-soft, var(--ease-out)) .1s, visibility 0s; }
.up-lp-in, .up-land-float, .up-land-toast { animation: none; }
.up-land-slide[data-pos="on"] .up-lp-in { animation: up-land-in .5s var(--ease-out) calc(.3s + var(--i) * .28s) both; }
.up-land-slide[data-pos="on"] .up-land-float { animation: up-land-in .6s var(--ease-out) 1.1s both; }
.up-land-slide[data-pos="on"] .up-land-toast { animation: up-land-in .6s var(--spring-soft, var(--ease-out)) 2.7s both; }

/* стрелки, точки и пауза под первым экраном — вариант В (владелец 08.11, «Лендинг 2, ответы: 10 — В»): как у Apple — стрелки и пауза серые круги
   без рамки, точки — в серой капсуле того же цвета; стрелки у точек на всех ширинах. Наведение — значок цвета акцента, фокус — рамка самой кнопки */
.up-land-pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; }
.up-land-ctl { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 50%;
  background: var(--surface-2); color: var(--ink); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s, transform .15s; }
.up-land-ctl:hover { color: var(--ws-accent-ink); }
.up-land-arrow svg { width: 18px; height: 18px; }
.up-land-ctl:active { transform: scale(.94); }
.up .up-land-ctl:focus-visible { outline: none; border-color: var(--ws-accent); color: var(--ws-accent-ink); }
.up-land-dots { display: flex; align-items: center; height: 36px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); }
.up-land-dot { display: inline-grid; place-items: center; width: 26px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 999px;
  background: transparent; cursor: pointer; transition: width .3s var(--ease-out); }
.up-land-dot i { position: relative; display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--line-strong); overflow: hidden;
  transition: width .3s var(--ease-out), background-color .15s; }
.up-land-dot:not([aria-pressed="true"]):hover i { background: var(--text-2); }
.up-land-dot[aria-pressed="true"] { width: 44px; }
.up-land-dot[aria-pressed="true"] i { width: 30px; background: var(--line-strong); }  /* дорожка серая, заливка — акцент */
/* полоса до следующей смены: идёт 6,5 с (= SLIDE_MS в LandUp), стоит вместе со сменой (наведение, фокус, пауза) */
.up-land-dot i::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--ws-accent); transform: scaleX(0); transform-origin: 0 50%; }
.up-land-dot[aria-pressed="true"] i::after { animation: up-land-dotrun 6.5s linear both; }
.up-land-stage[data-run="false"] .up-land-dot i::after { animation-play-state: paused; }
/* смена остановлена (пауза, reduced motion) — выбранная точка залита целиком: полосы нет, видно только, где вы */
.up-land-stage[data-paused="true"] .up-land-dot[aria-pressed="true"] i::after { animation: none; transform: none; }
.up .up-land-dot:focus-visible { outline: none; border-color: var(--ws-accent); }
@keyframes up-land-dotrun { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.up-land-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 40px 0 0; padding: 22px 8px; list-style: none; }
.up-land-stats li { display: grid; gap: 2px; padding: 0 22px; text-align: center; }
.up-land-stats li + li { border-left: 1px solid var(--line); }
.up-land-stats b { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.up-land-stats span { font-size: 14px; line-height: 20px; color: var(--text-2); }

/* ---------- разделы: надзаголовок, заголовок, вводный текст ---------- */
.up-land-sec { padding: 96px 0 0; }
.up-land-sec.is-last { padding-bottom: 96px; }
.up-land-sh { display: grid; justify-items: center; gap: 12px; max-width: 720px; margin: 0 auto 36px; text-align: center; }
.up-land-sh.is-left { justify-items: start; margin: 0; text-align: left; }
.up-land-kicker { color: var(--ws-accent-ink); }
.up-land-h2 { margin: 0; font-family: var(--font-display); font-size: 40px; line-height: 46px; letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.up-land-lead2 { margin: 0; font-size: 17px; line-height: 26px; color: var(--text-2); text-wrap: pretty; }

/* ---------- «Экономия времени»: заголовок слева, карточка с полосами «вручную / с Урок Просто» справа; цвета полос — проверены
   dataviz validate_palette (светлая: #e07a52 / #4b40b8 на #fff, тёмная: #cf7049 / #8a7cf0 на #1f1b3a) ---------- */
.up-land { --land-manual: #e07a52; --land-with: #4b40b8; }
.up-land[data-theme="dark"] { --land-manual: #cf7049; --land-with: #8a7cf0; }
.up-land-time { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 48px; }
.up-land-chart { gap: 22px; margin: 0; padding: 26px 28px; }
.up-land-chart-top { display: flex; justify-content: flex-start; }
.up-land-bars { display: grid; gap: 18px; }
.up-land-bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; }
.up-land-bar-l { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--ink); }
.up-land-bar-l i { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 3px; background: var(--land-manual); }
.up-land-bar-row[data-kind="with"] .up-land-bar-l i { background: var(--land-with); }
.up-land-bar-track { position: relative; height: 32px; }
.up-land-bar { position: relative; display: block; height: 100%; min-width: 6px; border-radius: 4px 6px 6px 4px; background: var(--land-manual); outline: none;
  transition: width .6s var(--spring-soft, var(--ease-out)); }
.up-land-bar-row[data-kind="with"] .up-land-bar { background: var(--land-with); }
.up-land-bar-v { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 800; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* подсказка при наведении и фокусе: расчёт полосы */
.up-land-bar::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 2; padding: 6px 10px; border-radius: 10px; background: var(--ink);
  color: var(--surface); font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s, transform .15s; }
.up-land-bar:hover::after, .up-land-bar:focus-visible::after { opacity: 1; transform: none; }
.up-land-bar:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ws-accent); }
.up-land-save { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.up-land-save b, .up-land-save span span { display: block; }
.up-land-save b { font-size: 16.5px; line-height: 23px; color: var(--ink); }
.up-land-save span span { font-size: 14.5px; line-height: 21px; color: var(--text-2); }

/* ---------- восемь форматов: превью сверху, текст снизу; ссылка растянута на всю карточку ---------- */
.up-land-fmts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.up-land-fmt { position: relative; gap: 0; padding: 0; overflow: hidden; transition: transform .2s var(--ease-out), box-shadow .2s; }
.up-land-fmt .up-sh { display: block; width: 100%; background: var(--surface-2); }
.up-land-fmt-b { display: grid; gap: 6px; padding: 16px 18px 20px; }
.up-land-fmt-t { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; }
.up-land-fmt-a { color: var(--ink); }
.up-land-fmt-a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.up-land-fmt-p { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--text-2); text-wrap: pretty; }
.up-land-fmt:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(60, 40, 120, .55); }
.up-land-fmt:hover .up-land-fmt-a { color: var(--ws-accent-ink); }
.up-land-fmt:has(.up-land-fmt-a:focus-visible) { box-shadow: 0 0 0 2px var(--ws-accent); }
.up .up-land-fmt-a:focus-visible { outline: none; }

/* ---------- три шага в ряд ---------- */
.up-land-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.up-land-step { gap: 10px; padding: 24px 24px 26px; }
.up-land-step .up-acct-text { color: var(--text-2); }
/* фрагмент принятого экрана над номером шага: настоящая разметка экрана, уменьшенная по ширине карточки (--s по контейнерному запросу);
   окно — на фоне рабочей области кабинета, края мягко уходят в фон */
.up-land-step { container-type: inline-size; }  /* масштаб фрагмента — по ширине карточки шага */
.up-land-frag { --s: .56; position: relative; height: calc(300px * var(--s)); margin-bottom: 6px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(420px 240px at 50% -40px, rgba(var(--up-indigo), .22), transparent 70%), var(--bg); }
.up-land-frag-in { position: absolute; left: 50%; top: 50%; width: 560px; transform: translate(-50%, -50%) scale(var(--s)); }
.up-land-frag.is-dl .up-land-frag-in, .up-land-frag.is-job .up-land-frag-in { top: calc(22px * var(--s) + 6px); transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 0; }
.up-land-frag::after { content: ''; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.up-land-frag.is-form::after { display: none; }
/* фрагмент шириной 560 px × --s помещается в карточку: .56 — от 320 px (1366–1920), ступени ниже — 1024–1300 и телефоны */
@container (max-width: 319px) { .up-land-frag { --s: .5; } }
@container (max-width: 289px) { .up-land-frag { --s: .46; } }
@container (max-width: 259px) { .up-land-frag { --s: .42; } }
@container (min-width: 420px) { .up-land-frag { --s: .72; } }
@container (min-width: 600px) { .up-land-frag { --s: 1; } }
/* переопределения кита во фрагментах — с причиной: окно сборки стоит в своём экране с отступом 64 px сверху и шириной по экрану — здесь оно одно
   в окне фрагмента; строка запроса без кольца-подсветки (кольцо — состояние фокуса экрана); у листа под панелью — тень как у карточки */
.up-land-frag .up-jb-card { width: 440px; margin: 0 auto; animation: none; }
.up-land-frag .up-ring { display: none; }
.up-land-frag .up-topic { min-height: 0; }
.up-land-frag.is-dl .up-doc-bar { position: relative; z-index: 1; }
.up-land-frag.is-dl .up-sh { display: block; width: 480px; margin: -6px auto 0; border-radius: 14px; box-shadow: 0 24px 50px -30px rgba(60, 40, 120, .45); }
/* телефон (до 639 px): у экранов кнопки — в липкой полосе внизу (up-dock), фрагменты показывают так же; во фрагменте полоса не липкая */
.up-land-frag .up-dock { position: static; margin: 12px 0 0; border-radius: 20px; border: 1px solid var(--up-card-line); }
@media (max-width: 639px) {
  /* кнопки — внизу, поэтому фрагменты 1 и 3 прижаты к низу окна, верх уходит в фон */
  .up-land-frag.is-form .up-land-frag-in, .up-land-frag.is-dl .up-land-frag-in { top: auto; bottom: calc(14px * var(--s) + 4px);
    transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 100%; }
  .up-land-frag.is-dl .up-doc-bar { display: none; }  /* на телефоне у панели только подпись формата — её заменяет полоса внизу */
  .up-land-frag.is-dl .up-dock { position: relative; z-index: 2; margin-top: -150px; }  /* полоса лежит поверх низа листа, как на телефонном экране */
  .up-land-frag.is-form::after, .up-land-frag.is-dl::after { display: block; inset: 0 0 auto; height: 28px; background: linear-gradient(var(--bg), transparent); }
}

/* ---------- что внутри: шесть разделов техкарты плитками (07.11) — заголовок Manrope 800 и 1–2 строки; плитки не кликабельные ---------- */
.up-land-norm { margin: 4px 0 0; }
.up-land-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.up-land-tile { align-content: start; gap: 8px; padding: 22px 22px 24px; }
.up-land-tile .up-tile { margin-bottom: 6px; }
.up-land-tile-t { margin: 0; font-family: var(--font-display); font-size: 19px; line-height: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.up-land-tile-p { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--text-2); text-wrap: pretty; }

/* ---------- тарифы: принятая витрина на месяц ---------- */
.up-land-tiers { margin: 0 auto; max-width: 1040px; }
/* варианты подписки (08.11): «Год / Месяц» (up-acct-period) и плюсы выбранного варианта строкой с галочками; «+10 документов» — строкой up-pub-extra */
.up-land-plan { display: grid; justify-items: center; gap: 14px; margin: 0 auto 24px; }
.up-land-plus { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 22px; color: var(--ink); }
.up-land-plus li { display: inline-flex; align-items: center; gap: 8px; }
.up-land-plus svg { flex: 0 0 auto; color: var(--success); }
.up-land-tiers + .up-acct-hint { margin-top: 18px; }

/* ---------- вопросы: заголовок слева, аккордеон справа ---------- */
.up-land-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: 48px; }

/* ---------- финальный призыв ---------- */
.up-land-final { justify-items: center; gap: 14px; padding: 48px 32px; text-align: center; overflow: hidden;
  background: radial-gradient(560px 260px at 50% 0, rgba(var(--up-indigo), .18), transparent 70%), var(--surface); }
.up-land-final-owl { display: inline-grid; margin-bottom: 4px; filter: drop-shadow(0 12px 22px rgba(60, 40, 120, .3)); }
.up-land-final .up-land-lead2 { max-width: 520px; }
.up-land-final .up-acct-acts { margin-top: 8px; }

/* ---------- подвал ---------- */
.up-land-foot { margin-top: 0; padding: 40px 0 48px; border-top: 1px solid var(--line); }
.up-land-foot-in { display: grid; gap: 22px; }
.up-land-foot-subj { display: grid; gap: 10px; }
.up-land-subj { display: inline-flex; align-items: center; height: 32px; margin: 0 4px 6px 0; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 13.5px; line-height: 18px; color: var(--ink); transition: border-color .15s, color .15s; }
.up-land-subj:hover { border-color: var(--ws-accent); color: var(--ws-accent-ink); }
.up-land-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; line-height: 20px; }
.up-land-foot-links a { color: var(--text-2); }
.up-land-foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.up-land-foot-legal { margin: 0; max-width: 880px; font-size: 13px; line-height: 19px; color: var(--text-2); }

/* ---------- ширины ---------- */
@media (max-width: 1179px) {
  .up-land-h1 { font-size: 48px; line-height: 54px; }
  .up-land-fmts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 879px) {
  .up-land-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; padding: 18px 4px; }
  .up-land-stats li:nth-child(3) { border-left: 0; }
}
@media (max-width: 1023px) {
  .up-land-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px 16px 14px;
    border-bottom: 1px solid var(--up-card-line); background: var(--surface); box-shadow: 0 24px 40px -24px rgba(31, 27, 58, .35); }
  .up-land-nav[data-open="true"] { display: flex; }
  .up-land-nav-a { height: 44px; font-size: 16px; }
  .up-land-burger { display: inline-grid; }
  .up-land-hero-in, .up-land-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .up-land-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .up-land-hero { padding-top: 40px; }
  .up-land-demo { max-width: 460px; }
  .up-land-steps { grid-template-columns: minmax(0, 1fr); }
  .up-land-time { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .up-land-sh.is-left { justify-items: center; margin: 0 auto; text-align: center; }
}
@media (max-width: 639px) {
  .up-land-wrap { padding: 0 16px; }
  .up-land-head-in { gap: 8px; height: 60px; }
  .up-land-brand { font-size: 17px; }
  .up-land-login { display: none; }
  .up-land-nav-login { display: inline-flex; }
  .up-land .up-land-start { height: 40px; padding: 0 14px; font-size: 14.5px; }
  .up-land-icon { width: 40px; height: 40px; }
  .up-land-hero { padding-top: 28px; }
  .up-land-hero-t { gap: 18px; }
  .up-land-h1 { font-size: 34px; line-height: 40px; letter-spacing: -.025em; }
  .up-land-lead { font-size: 16px; line-height: 24px; }
  .up-land-cta { width: 100%; }
  .up-land-cta .up-btn, .up-land-cta .up-docs-ghost { flex: 1 1 100%; justify-content: center; }
  .up-land-slide { padding: 22px 0 44px; }
  .up-land-pager { gap: 4px; }  /* стрелки, 8 точек и пауза — в 358 px */
  .up-land-dots { padding: 0 3px; }
  .up-land-dot { width: 22px; }
  .up-land-dot[aria-pressed="true"] { width: 38px; }
  .up-land-dot[aria-pressed="true"] i { width: 26px; }
  .up-land-tx { gap: 18px; }
  .up-land-float { right: -4px; }
  .up-land-toast { left: -4px; }
  .up-lp-paper { padding: 18px 18px 16px; font-size: 12px; line-height: 17px; }
  .up-lp-title { font-size: 16px; line-height: 21px; }
  .up-lp-tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); }  /* УУД — на листе, в превью не помещается */
  .up-lp-td:last-child { display: none; }
  .up-lp-sl-top { left: 20px; top: 14px; }
  .up-lp-sl-mid { left: 20px; right: 16px; top: 38px; bottom: 34px; gap: 12px; }
  .up-lp-sl-foot { left: 20px; right: 16px; bottom: 12px; }
  .up-lp-sl-t { gap: 8px; }
  .up-lp-sl-t b { font-size: 18px; line-height: 23px; }
  .up-land-stats li { padding: 0 10px; }
  .up-land-long { display: none; }
  .up-land-short { display: inline; }
  .up-land-stats b { font-size: 22px; line-height: 28px; }
  .up-land-sec { padding-top: 64px; }
  .up-land-sec.is-last { padding-bottom: 64px; }
  .up-land-sh { margin-bottom: 24px; }
  .up-land-h2 { font-size: 28px; line-height: 34px; }
  .up-land-lead2 { font-size: 16px; line-height: 24px; }
  .up-land-fmts { grid-template-columns: minmax(0, 1fr); }
  .up-land-tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .up-land-tile { padding: 18px 18px 20px; }
  .up-land-chart { padding: 20px 18px; }
  .up-land-bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .up-land-bar-l { grid-column: 1 / -1; }
  .up-land-bar::after { white-space: normal; width: max-content; max-width: 240px; }
  .up-land-final { padding: 36px 18px; }
  .up-land-plus { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 379px) {
  .up-land-brand-t { display: none; }  /* на самых узких — только знак: «Начать», тема и меню важнее названия */
  .up-land-pager { gap: 3px; }
  .up-land-ctl { width: 32px; height: 32px; }
  .up-land-dots { height: 32px; padding: 0 2px; }
  .up-land-dot { width: 18px; }  /* стрелки, 8 точек и пауза — в 288 px */
  .up-land-dot[aria-pressed="true"] { width: 32px; }
  .up-land-dot[aria-pressed="true"] i { width: 22px; }
  .up-lp-sl-mid { top: 34px; bottom: 30px; }
  .up-lp-sl-t b { font-size: 15px; line-height: 19px; }
  .up-lp-sl-f { font-size: 14px; line-height: 18px; }
  .up-lp-opts { gap: 4px 14px; padding-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .up-land-slide[data-pos="on"] .up-lp-in, .up-land-slide[data-pos="on"] .up-land-float,
  .up-land-slide[data-pos="on"] .up-land-toast, .up-land-dot[aria-pressed="true"] i::after { animation: none; }
  .up-land-tx, .up-land-slide, .up-land-tx[data-pos="on"], .up-land-slide[data-pos="on"] { transition: none; transform: none; }
  .up-land-bar { transition: none; }
}

/* 09.11 UX-разбор, п. 10: в шапке — «Попробовать бесплатно»; до 1279 px шапке тесно (меню из пяти пунктов) — «Начать» */
@media (max-width: 1279px) {
  .up-land-start .up-land-long { display: none; }
  .up-land-start .up-land-short { display: inline; }
}