/* v17 — телефон. Сначала потрогать: 3D сразу под приветствием, ручки — нижним листом
   под сценой (не поверх модели), карточки ролей — свайп-карусель, заявка — липкой кнопкой. */

[data-layout="m"] .top { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(8px); padding: 8px 16px; }
[data-layout="m"] .hero { display: flex; flex-direction: column; padding: 0 16px; }
[data-layout="m"] .letter { order: 1; }
[data-layout="m"] .h1 { font-size: clamp(34px, 11vw, 56px); margin: 2px 0 4px; }
[data-layout="m"] .wordmark { font-size: 20px; margin-bottom: 8px; }
[data-layout="m"] .lead { display: none; }
[data-layout="m"] .stage { order: 2; height: min(56svh, 470px); min-height: 300px; margin: 0 -16px; border-radius: 0; }
[data-layout="m"] .controls { order: 3; position: relative; margin: -18px -16px 0; padding: 8px 16px 6px; border-radius: 22px 22px 0 0; background: var(--paper); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08); z-index: 1; }
[data-layout="m"] .controls::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 4px; border-radius: 2px; background: var(--line); }
[data-layout="m"] .controls > .label:first-child { margin-top: 6px; }
[data-layout="m"] .ithumb { width: 52px; height: 52px; }
[data-layout="m"] .swatches { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px 8px; margin: 0 -16px; padding-left: 20px; padding-right: 20px; scrollbar-width: none; scroll-snap-type: x proximity; }
[data-layout="m"] .swatches::-webkit-scrollbar { display: none; }
[data-layout="m"] .sw { flex: none; width: 40px; height: 40px; scroll-snap-align: center; }
[data-layout="m"] .lead-m { display: block; }

/* карусель ролей: свайп = листание, края — тап */
[data-layout="m"] .carousel { margin: 0 -16px; }
[data-layout="m"] .track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 16px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
[data-layout="m"] .track::-webkit-scrollbar { display: none; }
[data-layout="m"] .rcard { flex: 0 0 84%; scroll-snap-align: center; min-height: 270px; }
[data-layout="m"] .swipe { display: flex; }

[data-layout="m"] .sample { max-width: 300px; }
[data-layout="m"] .ledger { margin: 0 -4px; padding: 6px 10px 10px; }
[data-layout="m"] .ledger table { font-size: 13px; }

/* липка кнопка заявки: появляется после первого экрана, прячется у формы */
[data-layout="m"] .sticky-cta { display: grid; place-items: center; position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 6; min-height: 54px; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 17px; text-decoration: none; box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), opacity 0.35s, visibility 0.35s; }
[data-layout="m"] .sticky-cta.away, [data-layout="m"] .sticky-cta.early { transform: translateY(140%); opacity: 0; visibility: hidden; pointer-events: none; }