/* Суши Шеф · мобильный лендинг по утверждённому макету reference/mockup.png (941×1672).
   Вся вёрстка в единицах макета: 1u = ширина страницы / 941, поэтому пропорции
   совпадают с макетом на любой ширине экрана. Фото — очищенные от текста фрагменты макета,
   весь текст и кнопка — живой HTML. */
:root {
  --bg: #F8F6F3;
  --ink: #1C1F2B;
  --navy: #13203A;
  --text: #2A2F3C;
  --muted: #707072;
  --magenta: #B8105C;
  --pink: #CD1F69;
  --purple: #723DB6;
  --purple-deep: #2E0A86;
  --lavender: #E3CBFB;
  --yellow: #FEE968;
  --u: calc(min(100vw, 560px) / 941);
  --font: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', Arial, sans-serif;
}
@supports (width: 1cqw) {
  :root { --u: calc(100cqw / 941); }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol { margin: 0; padding: 0; }
img, svg { display: block; }

.page { width: min(100%, 560px); margin-inline: auto; background: var(--bg); container-type: inline-size; overflow: hidden; }
/* на высоких экранах нижний блок растягивается, узор остаётся у нижнего края */
.page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.page > main { flex: 1; display: flex; flex-direction: column; }
.page .action { flex: 1; }

/* Секция = фоновый фрагмент макета + абсолютно позиционированный текст */
.hero, .gifts, .steps, .action { position: relative; }
.bg { width: 100%; height: auto; }
.hero > :not(picture), .gifts > :not(picture), .steps > :not(picture), .action > .cta { position: absolute; }
/* одна строка текста макета: top = baseline − LH/2 − 0.3585·font-size (метрики Montserrat) */

/* ---------- HERO (0–672) ---------- */
.logo { left: calc(42 * var(--u)); top: calc(26 * var(--u)); width: calc(234 * var(--u)); height: auto; }

.hero-title {
  left: calc(42 * var(--u)); top: calc(138 * var(--u));
  font-size: calc(88 * var(--u)); line-height: calc(73 * var(--u));
  font-weight: 800; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap;
}
.hero-title span { display: block; }
.hero-title .accent { color: var(--magenta); }

.choose {
  left: calc(50 * var(--u)); top: calc(389 * var(--u));
  font-family: var(--font-body); font-size: max(11px, calc(27 * var(--u))); line-height: calc(30 * var(--u)); font-weight: 600; color: var(--text); white-space: nowrap;
}

.chips { left: calc(44 * var(--u)); top: calc(430 * var(--u)); display: flex; align-items: center; white-space: nowrap; }
.chip {
  display: inline-flex; align-items: center; height: calc(64 * var(--u)); border-radius: calc(32 * var(--u));
  font-weight: 800; line-height: 1;
}
.chip b { font-weight: 800; font-size: calc(60 * var(--u)); letter-spacing: -0.02em; margin-right: calc(8 * var(--u)); }
.chip--rolls {
  width: calc(176 * var(--u)); padding-left: calc(18 * var(--u));
  background: linear-gradient(90deg, #EB5A90 0%, #F27DA9 100%); color: #fff;
  font-size: calc(26 * var(--u)); text-transform: uppercase; letter-spacing: -0.01em;
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(232, 79, 137, .28);
}
.chips__or { width: calc(59 * var(--u)); text-align: center; font-family: var(--font-body); font-size: calc(27 * var(--u)); font-weight: 600; color: var(--text); }
.chip--pizza {
  position: relative; width: calc(228 * var(--u)); padding-left: calc(16 * var(--u));
  background: linear-gradient(90deg, #E8D3FC 0%, #DEC3FB 100%); color: var(--purple-deep);
  font-size: calc(33 * var(--u)); letter-spacing: -0.03em;
}
.chip--pizza b { margin-right: calc(5 * var(--u)); }
.chip--pizza small {
  position: absolute; right: calc(4 * var(--u)); top: calc(6 * var(--u));
  width: calc(48 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(10 * var(--u));
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: #FAE54A; color: #5E2BA6; font-size: calc(21 * var(--u)); line-height: calc(20 * var(--u)); font-weight: 800; letter-spacing: 0;
}

.condition {
  left: calc(52 * var(--u)); top: calc(515 * var(--u) - max(0px, 12px - 31 * var(--u)));
  font-family: var(--font-body); font-size: max(11px, calc(28 * var(--u))); line-height: max(12px, calc(31 * var(--u))); font-weight: 600; color: var(--text); white-space: nowrap;
}
.price {
  left: calc(49 * var(--u)); top: calc(587 * var(--u)); height: calc(47 * var(--u));
  display: flex; align-items: center; padding: 0 calc(18 * var(--u)) 0 calc(17 * var(--u)); border-radius: calc(24 * var(--u));
  background: linear-gradient(90deg, #FEEB6E, #FDE661); color: #10133F;
  font-size: calc(36 * var(--u)); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap;
}

/* ---------- GIFTS (672–1140) ---------- */
.gifts__title {
  left: 0; right: 0; top: calc(25 * var(--u)); text-align: center;
  font-size: calc(46 * var(--u)); line-height: calc(50 * var(--u)); font-weight: 800; letter-spacing: -0.02em; color: var(--navy);
  white-space: nowrap;
}
.gift { top: calc(105 * var(--u)); }
.gift--rolls { left: calc(64 * var(--u)); }
.gift--pizza { left: calc(500 * var(--u)); }
.gift__tag {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(56 * var(--u)); padding: 0 calc(21 * var(--u)); border-radius: calc(14 * var(--u));
  font-size: calc(31 * var(--u)); font-weight: 800; letter-spacing: 0; text-transform: uppercase; color: #fff; line-height: 1;
}
.gift--rolls .gift__tag { background: var(--pink); min-width: calc(166 * var(--u)); }
.gift--pizza .gift__tag { background: var(--purple); min-width: calc(168 * var(--u)); }
.gift__text {
  margin: calc(6 * var(--u)) 0 0 calc(13 * var(--u));
  font-family: var(--font-body); font-size: max(10px, calc(27 * var(--u))); line-height: max(12px, calc(31 * var(--u))); font-weight: 700; color: var(--navy); white-space: nowrap;
}
.gift--pizza .gift__text { margin-left: calc(10 * var(--u)); }

/* ---------- STEPS (1140–1466) ---------- */
.steps__title {
  left: 0; right: 0; top: calc(20 * var(--u)); text-align: center;
  font-size: calc(46 * var(--u)); line-height: calc(54 * var(--u)); font-weight: 800; letter-spacing: -0.025em; color: var(--navy); white-space: nowrap;
}
.steps__list { inset: 0; list-style: none; }
.step { position: absolute; top: 0; left: 0; }
.step__num {
  position: absolute; width: calc(56 * var(--u)); height: calc(56 * var(--u)); top: calc(113 * var(--u));
  display: flex; align-items: center; justify-content: center;
  font-size: calc(37 * var(--u)); font-weight: 800; line-height: 1; color: var(--pink);
}
.step--1 .step__num { left: calc(79 * var(--u)); }
.step--2 .step__num { left: calc(367 * var(--u)); color: #5B2AB7; }
.step--3 .step__num { left: calc(671 * var(--u)); }
.step__text {
  position: absolute; top: calc(215 * var(--u)); width: calc(240 * var(--u)); text-align: center;
  font-family: var(--font-body); font-size: max(11px, calc(27 * var(--u))); line-height: max(13px, calc(31 * var(--u))); font-weight: 600; color: var(--navy); white-space: nowrap;
}
.step--1 .step__text { left: calc(61 * var(--u)); }
.step--2 .step__text { left: calc(356 * var(--u)); }
.step--3 .step__text { left: calc(659 * var(--u)); }

/* ---------- CTA + сноска (1466–1672) ---------- */
.cta {
  left: calc(38 * var(--u)); top: calc(11 * var(--u)); width: calc(865 * var(--u)); height: calc(98 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(26 * var(--u));
  border-radius: calc(49 * var(--u));
  background: linear-gradient(180deg, #D82C76 0%, #C42267 55%, #B01C5C 100%);
  box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, .18), 0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(176, 28, 92, .28);
  color: #fff; text-decoration: none; font-size: calc(50 * var(--u)); font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  transition: transform .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2; /* кнопка над блоком сноски, который начинается выше неё */
}
.cta::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; } /* зона нажатия ≥ 44px даже на 320px */
.cta__arrow { width: calc(20 * var(--u)); height: calc(36 * var(--u)); margin-top: calc(2 * var(--u)); }
.cta:active { transform: scale(.985); }
.cta:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
@media (hover: hover) { .cta:hover { filter: brightness(1.06); } }

.action { min-height: calc(206 * var(--u)); }
.action .bg { position: absolute; left: 0; bottom: 0; } /* узор всегда прижат к низу, даже если сноска выросла */
.notes { position: relative; z-index: 1; padding: calc(129 * var(--u)) 16px 14px; text-align: center; pointer-events: none; }
.notes .note { pointer-events: auto; }
.note {
  font-family: var(--font-body); font-size: max(10px, calc(19 * var(--u))); line-height: 1.3; font-weight: 500; color: var(--muted);
}
.note--legal { margin: 4px auto 0; max-width: 34em; font-size: max(10px, calc(17 * var(--u))); }

/* ---------- Десктоп: центрированная колонка ---------- */
@media (min-width: 600px) {
  body { padding: 24px 0; background: #EFEAE6; }
  .page { border-radius: 28px; box-shadow: 0 10px 40px rgba(60, 30, 45, .10); min-height: calc(100svh - 48px); }
}

@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }