/* melbet-official-lk.com - контентные секции каталога design.md: S1-S16, S14w, A1-A8 (/app/).
   Хелперы - __src/sections.mjs. Новые классы на страницу не заводить: правка общая для всех страниц. */

/* ---------- общие ---------- */
.ml-main > * + * { margin-top: var(--ml-gap); }
.ml-main p, .ml-main li { max-width: 820px; }
.ml-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ml-muted); }
.ml-badge { display: inline-block; margin: 0; padding: 3px 8px; border-radius: 4px; background: var(--ml-grey); color: var(--ml-text); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.4; vertical-align: middle; }
.ml-badge--accent { background: var(--ml-accent); color: var(--ml-on-accent); }
.ml-skew { display: inline-block; margin: 0 0 12px; padding: 4px 16px 4px 12px; background: var(--ml-accent); color: var(--ml-on-accent); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ml-hl { color: var(--ml-accent); font-weight: 700; }
code { font-family: var(--ml-mono); font-size: .9em; background: var(--ml-raise); padding: 2px 6px; border-radius: 4px; word-break: break-word; }

/* кадр: радиус 8, рамка 1px, без тени */
.ml-shot { margin: 0; }
.ml-shot img { width: 100%; border-radius: var(--ml-r); border: 1px solid var(--ml-line); background: var(--ml-top); }
.ml-shot figcaption, .ml-shots__fig figcaption { margin-top: 8px; font-size: 13px; color: var(--ml-muted); line-height: 1.45; }

/* ---------- S3 раздел: H2 с маркером-скосом ---------- */
.ml-sec h2, .ml-alert h2 { position: relative; display: flex; align-items: flex-start; gap: 12px; font-size: 20px; margin-bottom: 16px; }
.ml-sec h2::before, .ml-alert h2::before { content: ""; flex: none; width: 6px; height: 22px; margin-top: 1px; background: var(--ml-accent); clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.ml-sec h3 { font-size: 18px; font-weight: 500; margin-top: 20px; }
.ml-sec > * + * { margin-top: 16px; }
.ml-sec > p + p { margin-top: 0; }
@media (min-width: 1200px) { .ml-sec h2, .ml-alert h2 { font-size: 24px; } .ml-sec h2::before, .ml-alert h2::before { height: 26px; } }

/* ---------- S1 hero ---------- */
.ml-hero h1 { font-size: 26px; margin-bottom: 14px; }
@media (min-width: 1200px) { .ml-hero h1 { font-size: 34px; line-height: 1.2; } }
.ml-hero { margin-top: 8px; }
.ml-hero__box { position: relative; display: grid; overflow: hidden; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-hero__body { padding: 20px 16px 4px; }
.ml-hero__body p { color: var(--ml-text-2); }
.ml-hero__fig { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.ml-hero__fig img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ml-hero__fig::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; width: 6px; background: var(--ml-accent); clip-path: polygon(0 0, 100% 0, 0 100%); display: none; }
.ml-hero__fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ml-top) 0, transparent 22%); pointer-events: none; }
@media (min-width: 900px) {
  .ml-hero--a .ml-hero__box { grid-template-columns: minmax(0, 1fr) 45%; min-height: 360px; }
  .ml-hero__body { padding: 32px 28px 20px; }
  .ml-hero__body p { max-width: 600px; }
  .ml-hero__fig { aspect-ratio: auto; }
  .ml-hero__fig img { position: absolute; inset: 0; object-position: left top; }
  .ml-hero__fig::after { background: linear-gradient(90deg, var(--ml-top) 0, transparent 40%); }
  .ml-hero__fig::before { display: block; width: 14px; background: var(--ml-accent); clip-path: polygon(8px 0, 14px 0, 6px 100%, 0 100%); }
}
.ml-hero .ml-tiles { margin-top: 12px; }
.ml-hero__after { margin: 16px 0 0; }
.ml-hero__age { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12px; color: var(--ml-muted); }
/* S1c панель методов */
.ml-hero__panel { margin: 0 16px 16px; padding: 16px; background: var(--ml-raise); border-radius: var(--ml-r); }
.ml-hero__methods { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.ml-hero__methods li { padding: 6px 12px; border-radius: 999px; background: var(--ml-grey); font-size: 14px; font-weight: 500; }
@media (min-width: 900px) {
  .ml-hero--c .ml-hero__box { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; }
  .ml-hero--c .ml-hero__panel { margin: 24px 24px 24px 0; }
}
/* S1b компактный */
.ml-hero--b { padding: 24px 16px 12px; background: var(--ml-top); border-radius: var(--ml-r); }
@media (min-width: 900px) { .ml-hero--b { padding: 32px 28px 16px; } }

/* плашки CTA (design-05): вся плашка - одна ссылка */
.ml-tiles { display: grid; gap: 10px; list-style: none; }
@media (min-width: 640px) { .ml-tiles { grid-template-columns: 1fr 1fr; } }
.ml-tile { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 14px; border-radius: var(--ml-r); text-decoration: none; transition: background-color .15s; }
.ml-tile__ico { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 6px; }
.ml-tile__ico .ml-ico { width: 22px; height: 22px; }
.ml-tile__txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ml-tile__title { font-size: 15px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.ml-tile__sub { font-size: 13px; line-height: 1.35; }
.ml-ico--arrow { width: 20px; height: 20px; }
.ml-tile--accent { background: var(--ml-accent); color: var(--ml-on-accent); }
.ml-tile--accent .ml-tile__ico { background: rgba(26, 26, 26, .12); }
.ml-tile--accent:hover { background: var(--ml-accent-hi); color: var(--ml-on-accent); }
.ml-tile--accent:focus-visible { outline-color: var(--ml-on-accent); outline-offset: -4px; }
.ml-tile--dark { background: var(--ml-raise); color: var(--ml-text); }
.ml-tile--dark .ml-tile__ico { background: var(--ml-grey); color: var(--ml-accent); }
.ml-tile--dark .ml-tile__sub { color: var(--ml-muted); }
.ml-tile--dark:hover { background: var(--ml-grey); color: var(--ml-text); }

/* ---------- S2 stat-cards ---------- */
.ml-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; list-style: none; max-width: 1100px; }
@media (min-width: 768px) { .ml-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ml-stats { grid-template-columns: repeat(6, 1fr); } }
.ml-stats li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 88px; padding: 12px 14px; background: var(--ml-card); border-radius: var(--ml-r); }
.ml-stats__txt { display: flex; flex-direction: column; }
.ml-stats strong { font-size: 22px; line-height: 1.15; }
.ml-stats__txt span { font-size: 13px; color: var(--ml-muted); line-height: 1.3; }
.ml-stats .ml-ico { width: 36px; height: 36px; color: var(--ml-accent); stroke-width: 1.6; }

/* ---------- S4 prose-figure ---------- */
.ml-split { display: grid; gap: 16px; }
.ml-split__text > p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .ml-split { grid-template-columns: 7fr 5fr; gap: 28px; align-items: start; }
  .ml-split--flip { grid-template-columns: 5fr 7fr; }
  .ml-split--flip .ml-split__text { order: 2; }
  .ml-split--mob { grid-template-columns: minmax(0, 1fr) 280px; }
  .ml-split--wide { grid-template-columns: 1fr; }
}
.ml-split--mob .ml-shot { max-width: 280px; width: 100%; justify-self: center; }

/* ---------- S5 steps-timeline: номер в скосе, линия, кадр под текстом ---------- */
.ml-steps { list-style: none; counter-reset: ml-step; }
.ml-steps__item { position: relative; counter-increment: ml-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
.ml-steps__item::before { content: counter(ml-step); grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 32px;
  background: var(--ml-accent); color: var(--ml-on-accent); font-size: 16px; font-weight: 700; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ml-steps__item::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 6px; width: 2px; background: var(--ml-grey); }
.ml-steps__item:last-child { padding-bottom: 0; }
.ml-steps__item:last-child::after { display: none; }
.ml-tl-text { grid-column: 2; padding-top: 4px; }
.ml-tl-text h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; }
.ml-tl-text p { margin: 0; font-size: 17px; line-height: 1.55; }
.ml-steps .ml-shot { grid-column: 2; margin-top: 12px; max-width: 720px; }

/* ---------- S6 steps-track: карточки, mobile - лента со scroll-snap ---------- */
.ml-track__list { display: grid; grid-auto-flow: column; grid-auto-columns: 260px; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; counter-reset: ml-tr;
  padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: var(--ml-grey) transparent; }
.ml-track__list li { counter-increment: ml-tr; scroll-snap-align: start; padding: 16px; background: var(--ml-top); border: 1px solid var(--ml-line); border-radius: var(--ml-r); }
.ml-track__list li::before { content: counter(ml-tr); display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 40px; margin-bottom: 10px; padding: 0 12px;
  background: var(--ml-accent); color: var(--ml-on-accent); font-size: 26px; font-weight: 700; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ml-track__list h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.ml-track__list p { margin: 0; font-size: 15px; line-height: 1.5; }
.ml-track__hint { margin: 6px 0 0; font-size: 12px; color: var(--ml-muted); }
@media (min-width: 900px) {
  .ml-track__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .ml-track__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ml-track__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ml-track__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-track__hint { display: none; }
}

/* ---------- S7 lists ---------- */
.ml-rows, .ml-bullets, .ml-fixes, .ml-check { list-style: none; }
/* a key-rows */
.ml-rows li { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--ml-line); max-width: none; }
.ml-rows li:first-child { border-top: 1px solid var(--ml-line); }
.ml-rows strong { font-weight: 700; }
@media (min-width: 768px) { .ml-rows li { grid-template-columns: 32% minmax(0, 1fr); gap: 20px; } }
/* b bullets */
.ml-bullets li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.ml-bullets li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--ml-accent); clip-path: polygon(2px 0, 100% 0, calc(100% - 2px) 100%, 0 100%); }
@media (min-width: 768px) { .ml-bullets--2 { columns: 2; column-gap: 32px; } .ml-bullets--2 li { break-inside: avoid; } }
/* c fix-list */
.ml-fixes { display: grid; gap: 12px; }
.ml-fixes li { display: grid; gap: 8px; justify-items: start; }
.ml-fixes strong { display: inline-block; padding: 6px 12px; background: var(--ml-raise); border-left: 3px solid var(--ml-accent); border-radius: 0 6px 6px 0; font-family: var(--ml-mono); font-size: 14px; font-weight: 700; }
/* d checklist */
.ml-check { padding: 16px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-check li { display: flex; gap: 10px; align-items: flex-start; max-width: none; }
.ml-check li + li { margin-top: 10px; }
.ml-check .ml-ico { width: 18px; height: 18px; margin-top: 4px; color: var(--ml-accent); stroke-width: 3; }

/* ---------- S8 data-table ---------- */
.ml-table-wrap { overflow-x: auto; border-radius: var(--ml-r); border: 1px solid var(--ml-line); }
.ml-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ml-table caption { caption-side: top; padding: 0 0 8px; text-align: left; font-size: 14px; color: var(--ml-muted); }
.ml-table-wrap:has(caption) { border: 0; }
.ml-table thead th { background: var(--ml-accent); color: var(--ml-on-accent); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: left; padding: 12px 14px; }
.ml-table thead th:first-child { border-top-left-radius: var(--ml-r); }
.ml-table thead th:last-child { border-top-right-radius: var(--ml-r); }
.ml-table tbody th, .ml-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--ml-line); }
.ml-table tbody th { font-weight: 500; }
.ml-table tbody tr:nth-child(odd) { background: var(--ml-top); }
.ml-table tbody tr:nth-child(even) { background: var(--ml-bg); }
.ml-table tbody tr:hover { background: var(--ml-raise); }
.ml-table--kv tbody th { width: 38%; }
@media (min-width: 601px) {
  .ml-table--compare tbody th { position: sticky; left: 0; background: inherit; }
  .ml-table--compare thead th:first-child { position: sticky; left: 0; z-index: 1; }
  .ml-table--grid, .ml-table--compare { min-width: 560px; }
}
/* <= 600 px: стэк, без горизонтального скролла */
@media (max-width: 600px) {
  .ml-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ml-table, .ml-table tbody, .ml-table tr, .ml-table th, .ml-table td { display: block; width: 100%; }
  .ml-table caption { display: block; }
  .ml-table tbody tr { margin-bottom: 10px; border: 1px solid var(--ml-line); border-radius: var(--ml-r); overflow: hidden; background: var(--ml-top); }
  .ml-table tbody tr:nth-child(even) { background: var(--ml-top); }
  .ml-table tbody th { padding: 10px 14px; background: var(--ml-accent); color: var(--ml-on-accent); font-weight: 700; border-top: 0; }
  .ml-table td { padding: 8px 14px; border-top: 1px solid var(--ml-line); }
  .ml-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ml-muted); }
  .ml-table--kv tbody th { width: 100%; background: var(--ml-raise); color: var(--ml-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
}

/* ---------- S9 offer-pair ---------- */
.ml-offers { display: grid; gap: 12px; }
@media (min-width: 768px) { .ml-offers { grid-template-columns: 1fr 1fr; } }
.ml-offer { display: flex; flex-direction: column; align-items: flex-start; padding: 20px; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r); }
.ml-offer__value { margin: 0 0 10px; font-size: 28px; line-height: 1.15; font-weight: 700; text-transform: uppercase; color: var(--ml-accent); }
@media (min-width: 1200px) { .ml-offer__value { font-size: 30px; } }
.ml-offer p:last-of-type { margin: 0 0 16px; font-size: 15px; }
.ml-offer__btn { margin-top: auto; }

/* ---------- S10 cta-strip ---------- */
.ml-strip { display: grid; gap: 14px; padding: 18px; border-radius: var(--ml-r); background: linear-gradient(90deg, rgba(255, 184, 5, .35), transparent 30%), var(--ml-top); border-left: 4px solid var(--ml-accent); }
.ml-strip__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; text-transform: uppercase; line-height: 1.3; }
.ml-strip__sub { margin: 0; font-size: 14px; color: var(--ml-muted); }
.ml-strip .ml-btn { width: 100%; }
@media (min-width: 768px) { .ml-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 20px 24px; } .ml-strip .ml-btn { width: auto; } }

/* ---------- S11 stage-track ---------- */
.ml-stages__cap { margin-bottom: 8px; font-size: 14px; color: var(--ml-muted); }
.ml-stages { display: grid; gap: 4px; list-style: none; counter-reset: none; }
.ml-stages li { display: flex; flex-direction: column; padding: 16px 20px 26px; background: var(--ml-raise); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); }
.ml-stages li:nth-child(2) { background: var(--ml-grey); }
.ml-stages li:nth-child(3) { background: var(--ml-accent); color: var(--ml-on-accent); }
.ml-stages__step { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.ml-stages__pct { font-size: 32px; line-height: 1.15; }
@media (min-width: 768px) {
  .ml-stages { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .ml-stages li { padding: 18px 34px 18px 28px; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%); }
  .ml-stages li:first-child { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); padding-left: 20px; }
}
.ml-stages__total { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 12px; padding: 10px 16px; border: 1px solid var(--ml-accent); border-radius: var(--ml-r); }
.ml-stages__total .ml-label { margin: 0; }
.ml-stages__total strong { color: var(--ml-accent); font-size: 20px; }

/* ---------- S12 tiles (promo/game) ---------- */
.ml-cards { display: grid; gap: 12px; }
@media (min-width: 640px) { .ml-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ml-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.ml-card { display: flex; flex-direction: column; align-items: flex-start; padding: 18px; background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: var(--ml-r); }
.ml-card h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.ml-card p { font-size: 14px; margin-bottom: 8px; }
.ml-card p:last-child { margin-bottom: 0; }
.ml-card__btn { margin-top: auto; }
.ml-card > :has(+ .ml-card__btn) { margin-bottom: 14px; }
.ml-card__sub { color: var(--ml-muted); font-size: 13px; }

/* ---------- S13 faq ---------- */
.ml-faq { display: grid; gap: 8px; }
.ml-faq details { background: var(--ml-top); border-radius: var(--ml-r); border-left: 3px solid transparent; }
.ml-faq details[open] { border-left-color: var(--ml-accent); }
.ml-faq summary { position: relative; display: block; padding: 14px 52px 14px 16px; font-size: 17px; font-weight: 500; line-height: 1.4; cursor: pointer; list-style: none; border-radius: var(--ml-r); }
.ml-faq summary::-webkit-details-marker { display: none; }
.ml-faq summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; display: flex; align-items: center; justify-content: center;
  background: var(--ml-grey); color: var(--ml-accent); border-radius: 4px; font-size: 20px; font-weight: 400; line-height: 1; transition: transform .15s; }
.ml-faq details[open] summary::after { transform: rotate(45deg); }
.ml-faq summary:hover { color: var(--ml-accent); }
.ml-faq__a { padding: 14px 16px 4px; background: var(--ml-bg); border-radius: 0 0 var(--ml-r) 0; }
.ml-faq__a p { margin-bottom: 10px; }

/* ---------- S14 notice ---------- */
.ml-note { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--ml-r); }
.ml-note__body { min-width: 0; }
.ml-note__body p:last-child { margin-bottom: 0; }
.ml-note__label { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ml-note__ico { flex: none; color: var(--ml-accent); }
.ml-note__ico .ml-ico { width: 28px; height: 28px; }
.ml-note--warn { position: relative; padding-left: 26px; background: var(--ml-warn-bg); color: var(--ml-warn-ink); overflow: hidden; }
.ml-note--warn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(135deg, var(--ml-accent) 0 8px, #1A1A1A 8px 16px); }
.ml-note--warn .ml-note__ico { color: var(--ml-warn-ink); }
.ml-note--warn .ml-note__label { color: var(--ml-warn-sub); }
.ml-note--warn a { color: var(--ml-warn-ink); }
.ml-note--warn-dark { background: var(--ml-top); border-left: 4px solid var(--ml-accent); }
.ml-note--tip { background: var(--ml-raise); }
.ml-note--age { background: var(--ml-top); border: 1px solid var(--ml-line); }
.ml-note--code { background: #141414; font-family: var(--ml-mono); font-size: 14px; }

/* ---------- S14w alert-section (ЦБ, /payments/) ---------- */
.ml-alert { position: relative; padding: 42px 20px 24px; background: var(--ml-warn-bg); color: var(--ml-warn-ink); border: 2px solid var(--ml-accent); border-radius: var(--ml-r); overflow: hidden; }
.ml-alert::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(135deg, var(--ml-accent) 0 8px, #1A1A1A 8px 16px); }
.ml-alert__label { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ml-warn-sub); }
.ml-alert h2 { color: var(--ml-warn-ink); }
.ml-alert h2::before { background: var(--ml-warn-ink); }
.ml-alert p { font-size: 17px; line-height: 1.65; }
.ml-alert a { color: var(--ml-warn-ink); }
.ml-alert__last { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 500; }
.ml-alert__last .ml-ico { width: 24px; height: 24px; margin-top: 2px; }
@media (min-width: 900px) { .ml-alert { padding: 48px 40px 32px; } }

/* ---------- S15 figure-duo ---------- */
.ml-duo { display: grid; gap: 16px; }
@media (min-width: 768px) { .ml-duo { grid-template-columns: 1fr 1fr; } }

/* ---------- S16 legal ---------- */
.ml-contents { padding: 16px 20px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-contents ol { padding-left: 22px; }
.ml-contents li { margin: 4px 0; }
.ml-contents li::marker { color: var(--ml-accent); font-weight: 700; }

/* ================= /app/: A1-A8 ================= */
.ml-store-grid { display: grid; gap: var(--ml-gap); }
.ml-store-grid__main { min-width: 0; }
.ml-store-grid__main > * + * { margin-top: var(--ml-gap); }
/* mobile: A3 Information сразу после ленты A2 */
@media (max-width: 1023.98px) {
  .ml-store-grid { grid-template-columns: minmax(0, 1fr); }
  .ml-store-grid__main { display: contents; }
  .ml-store-grid__main > * + * { margin-top: 0; }
  .ml-store-side { order: 1; }
  .ml-store-grid__main > :nth-child(n+3) { order: 2; }
}
@media (min-width: 1024px) {
  .ml-store-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .ml-store-side { position: sticky; top: 104px; grid-column: 2; grid-row: 1; }
}
/* A1 store-head */
.ml-store { margin-top: 8px; }
.ml-store__head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.ml-store__icon { width: 72px; height: 72px; border-radius: 16px; border: 1px solid var(--ml-line); }
.ml-store h1 { font-size: 22px; margin-bottom: 4px; }
.ml-store__dev { margin: 0; font-size: 15px; font-weight: 500; color: var(--ml-accent); }
.ml-store__cat { margin: 0; font-size: 13px; color: var(--ml-muted); }
.ml-store > p { max-width: 680px; }
@media (min-width: 1024px) { .ml-store__icon { width: 96px; height: 96px; } .ml-store h1 { font-size: 28px; } }
/* A1.f fact row */
.ml-store-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0; border: 1px solid var(--ml-line); border-radius: var(--ml-r); overflow: hidden; }
.ml-store-facts div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; padding: 12px 6px; text-align: center; background: var(--ml-raise); border: 0 solid var(--ml-line); border-width: 0 1px 1px 0; }
.ml-store-facts dt { font-size: 12px; color: var(--ml-muted); }
.ml-store-facts dd { margin: 0; font-size: 18px; font-weight: 700; }
@media (min-width: 768px) { .ml-store-facts { grid-template-columns: repeat(6, 1fr); } .ml-store-facts div { border-width: 0 1px 0 0; } .ml-store-facts div:last-child { border-right: 0; } }
/* A1.b download bar */
.ml-dlbar { display: grid; gap: 12px; list-style: none; margin-bottom: 16px; }
.ml-dlbar li { display: flex; flex-direction: column; gap: 6px; }
.ml-dlbar .ml-btn { width: 100%; }
.ml-dlbar .ml-ico { width: 20px; height: 20px; }
.ml-dlbar__sub { font-size: 13px; color: var(--ml-muted); text-align: center; }
@media (min-width: 640px) { .ml-dlbar { grid-template-columns: 1fr 1fr; } }
/* A2 screenshots */
.ml-shots__list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--ml-grey) transparent; }
.ml-shots__list li { flex: none; width: 150px; scroll-snap-align: start; }
.ml-shots__fig { margin: 0; }
.ml-shots__fig img { width: 150px; height: 300px; object-fit: cover; border-radius: 16px; border: 1px solid var(--ml-line); }
.ml-shots__fig figcaption { font-size: 12px; }
@media (min-width: 1024px) { .ml-shots__list li { width: 180px; } .ml-shots__fig img { width: 180px; height: 360px; } }
/* A3 information */
.ml-store-side { padding: 18px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-store-side__intro { font-size: 14px; color: var(--ml-muted); }
.ml-info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 16px; }
.ml-info dt { font-size: 13px; color: var(--ml-muted); }
.ml-info dd { margin: 0; font-size: 15px; font-weight: 500; }
.ml-store-side .ml-btn { width: 100%; }
.ml-store-side a:not(.ml-btn) { display: inline-block; margin-top: 10px; font-size: 14px; }
/* A4 verified file */
.ml-apk { padding: 16px; background: #141414; border: 1px solid var(--ml-accent); border-radius: var(--ml-r); }
.ml-apk__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ml-apk__top .ml-label { margin: 0 auto 0 0; }
.ml-apk__copy { min-height: 32px; font-size: 13px; }
.ml-apk__dl { margin: 0; }
.ml-apk__dl div { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--ml-line); }
.ml-apk__dl dt { font-size: 12px; color: var(--ml-muted); text-transform: uppercase; letter-spacing: .04em; }
.ml-apk__dl dd { margin: 0; font-family: var(--ml-mono); font-size: 14px; word-break: break-all; }
.ml-apk__sha dd { color: var(--ml-accent); }
@media (min-width: 768px) { .ml-apk__dl div { grid-template-columns: 140px minmax(0, 1fr); gap: 12px; } }
.ml-cmds { padding-left: 22px; }
.ml-cmds li { margin-bottom: 12px; }
.ml-cmds li::marker { color: var(--ml-accent); font-weight: 700; }
.ml-cmds p { margin-bottom: 6px; }
.ml-cmds code { display: block; padding: 10px 12px; overflow-x: auto; white-space: pre; word-break: normal; }
/* A5 permissions */
.ml-perms { display: grid; gap: 0; list-style: none; }
.ml-perms li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--ml-line); max-width: none; }
.ml-perms__ico { flex: none; color: var(--ml-accent); }
.ml-perms__ico .ml-ico { width: 20px; height: 20px; margin-top: 3px; }
.ml-perms__txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ml-perms__txt strong { font-size: 16px; font-weight: 500; }
.ml-perms__txt > span:last-child { flex-basis: 100%; font-size: 14px; color: var(--ml-muted); }
@media (min-width: 900px) { .ml-perms { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
/* A7 what's new */
.ml-news { padding: 18px; background: var(--ml-top); border-radius: var(--ml-r); }
.ml-news__badges { display: flex; gap: 8px; margin-bottom: 12px; }

/* кадр меньше колонки (модалка, счётчик) не растягивать; кнопка на сайт внутри раздела */
.ml-shot--narrow, .ml-steps .ml-shot--narrow { max-width: 430px; }
.ml-act { margin: 16px 0; }
.ml-act:last-child { margin-bottom: 0; }