/* ============================================================
   REQUESTS.CSS — стили только для страницы "Запросы и ограничения"
   (requests.html). Токены — в tokens.css, общая обвязка (база документа,
   шапка, футер, стикеры, кнопки) — в smelost.css.
   Вид один в один с макетом дизайнера; вынесено из inline-стилей в классы.
   ============================================================ */

/* Пастельные фоны карточек-запросов. Живут здесь: на других страницах
   не используются. */
:root {
  --tint-pink:   #FFE4F2;
  --tint-orange: #FCE8D6;
  --tint-blue:   #E5EDFD;
  --tint-purple: #EDE8FE;
  --tint-lime:   #EEF6CC;
  --tint-tomato: #FBE1D9;
}

/* Контейнер контента страницы. */
.r-main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 40px 20px;
}

/* ============================================================
   HERO
   ============================================================ */
.r-hero { position: relative; margin-bottom: 44px; }
.vf-stkr--r-hero { top: -14px; right: 0; --stkr-r: 7deg; }
.r-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-purple);
  margin-bottom: 16px;
}
.r-hero-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 74px;
  line-height: .94;
  letter-spacing: -.03em;
  margin: 0 0 22px;
  max-width: 15ch;
  padding-right: 128px;
  /* Длинные русские слова ("ограничения") в крупном шрифте не должны уезжать
     за край на узких телефонах: перенос по слогам + break-word как гарантия. */
  overflow-wrap: break-word;
  hyphens: auto;
}
.r-lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--c-ink-70);
  max-width: 58ch;
  margin: 0;
}

/* ============================================================
   СЕТКА КАРТОЧЕК-ЗАПРОСОВ
   ============================================================ */
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 40px; }
.req-card {
  border-radius: 28px;
  padding: 34px 34px 36px;
  box-shadow: var(--sh-1);
  transition: transform .18s var(--ease-bounce, ease), box-shadow .18s;
}
.req-card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--sh-2); }
.req-card--pink   { background: var(--tint-pink); }
.req-card--orange { background: var(--tint-orange); }
.req-card--blue   { background: var(--tint-blue); }
.req-card--purple { background: var(--tint-purple); }
.req-card--lime   { background: var(--tint-lime); }
.req-card--dark   { background: var(--c-ink); color: #fff; position: relative; overflow: hidden; }

.req-card__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.req-card--dark .req-card__head { margin-bottom: 16px; }
.req-num { font-family: var(--font-display); font-weight: 900; font-size: 26px; }
.req-card--pink   .req-num { color: var(--c-pink); }
.req-card--orange .req-num { color: var(--c-orange); }
.req-card--blue   .req-num { color: var(--c-blue); }
.req-card--purple .req-num { color: var(--c-purple); }
.req-card--lime   .req-num { color: var(--c-green); }
.req-card--dark   .req-num { color: var(--c-lime); }
.req-card__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; margin: 0; line-height: 1.1; overflow-wrap: break-word; hyphens: auto; }
.req-card--dark .req-card__title { color: #fff; }
.req-card__sub { font-style: italic; font-size: 15px; color: var(--c-ink-70); margin: 0 0 18px; }

.req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.req-list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; }
.req-list__dot { width: 8px; height: 8px; border-radius: 2px; flex: none; margin-top: 8px; transform: rotate(15deg); }
.req-card--pink   .req-list__dot { background: var(--c-pink); }
.req-card--orange .req-list__dot { background: var(--c-orange); }
.req-card--blue   .req-list__dot { background: var(--c-blue); }
.req-card--purple .req-list__dot { background: var(--c-purple); }
.req-card--lime   .req-list__dot { background: var(--c-green); }
.req-card__note { font-style: italic; font-size: 14px; color: var(--c-ink-70); margin: 18px 0 0; line-height: 1.5; }
.req-card__lead { font-size: 18px; line-height: 1.6; margin: 0; color: rgba(255, 255, 255, .92); max-width: 44ch; }

/* Стикер в тёмной карточке 06 (позиционирование absolute — в smelost.css). */
.vf-stkr--r-card6 { right: -6px; bottom: -6px; --stkr-r: -10deg; opacity: .9; }

/* ============================================================
   ОГРАНИЧЕНИЯ
   ============================================================ */
.r-limits {
  background: var(--tint-tomato);
  border-radius: 36px;
  padding: 44px 48px;
  margin-bottom: 44px;
  scroll-margin-top: 90px;
}
.r-limits__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.r-limits__icon { color: var(--c-tomato); font-size: 34px; }
.r-limits__title { font-family: var(--font-display); font-weight: 900; font-size: 34px; margin: 0; letter-spacing: -.02em; overflow-wrap: break-word; hyphens: auto; }
.r-limits__lead { font-size: 17px; line-height: 1.6; color: var(--c-ink); margin: 0 0 30px; max-width: 70ch; }
.r-limits__subtitle { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 16px; color: var(--c-tomato); }

.lim-grid { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.lim-grid li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; }
.lim-grid__full { grid-column: 1 / -1; }
.lim-icon { color: var(--c-tomato); font-size: 20px; flex: none; }

.r-accept { background: rgba(255, 255, 255, .6); border-radius: 22px; padding: 26px 30px; }
.r-accept__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin-bottom: 16px; color: var(--c-green); }
.r-accept__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.r-accept__list li { display: flex; gap: 10px; font-size: 16px; line-height: 1.45; }
.r-accept__icon { color: var(--c-green); font-size: 20px; flex: none; }

/* ============================================================
   ФИНАЛЬНЫЙ ПРИЗЫВ
   ============================================================ */
.r-cta { text-align: center; padding: 20px 20px 60px; }
.r-cta__inner { max-width: 32ch; margin: 0 auto 18px; }
.r-cta__title {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.r-cta__lead { font-size: 18px; line-height: 1.6; color: var(--c-ink-70); max-width: 52ch; margin: 0 auto 30px; }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width: 1040px) {
  .r-hero-h1 { padding-right: 0; }
  .vf-stkr--r-hero { display: none; }
}
@media (max-width: 860px) {
  .req-grid { grid-template-columns: 1fr; }
  .lim-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .r-hero-h1 { font-size: 50px; }
  .r-cta__title { font-size: 34px; }
  .r-limits__title { font-size: 30px; }
  .req-card { padding: 28px 22px; }
  .r-limits { padding: 28px 22px; }
  .r-main { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 420px) {
  .r-hero-h1 { font-size: 39px; }
  .r-cta__title { font-size: 28px; }
  .req-card { padding: 24px 18px; }
  .r-limits { padding: 24px 18px; }
}
/* Самые узкие телефоны (320px): у кнопки дизайн-системы текст не переносится
   (white-space: nowrap), и "Написать в телеграм" не влезает. Ужимаем кнопку. */
@media (max-width: 360px) {
  .r-cta .btn--lg { padding: 14px 18px; font-size: 15px; }
}