/* ============================================================
   Секция "Как это работает" - fotocvet.ru
   Самодостаточный файл. Все селекторы начинаются с .pb-book,
   глобальные селекторы (html, body, *, :root, теги) не используются.
   Переменные объявлены внутри корневого блока раздела.
   Порядок: мобильный сначала, дальше планшет и десктоп.
   ============================================================ */


/* Рукописный шрифт пометок. Лендинг подключает шрифты своим инлайн-блоком и /lib/fonts/fonts.css
   не грузит, поэтому Caveat объявлен здесь — файл остаётся самодостаточным. */
@font-face{font-family:'Caveat';src:url('/lib/fonts/Caveat-var-cyrillic.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';src:url('/lib/fonts/Caveat-var-latin.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F}

.pb-book{
  --pb-ink:#2e1c12;      /* = --fk-ink лендинга: тёплая тёмная краска заголовков и пометок */
  --pb-muted:#7d6f64;    /* = --fk-muted лендинга: вторичный текст карточек */
  --pb-canvas:#fafaf7;   /* = --fk-bg лендинга, иначе на стыке секций видна полоса */
  --pb-card:#ffffff;
  --pb-violet:#6c4bd8;
  --pb-yellow:#ffc95c;   /* = --fk-accent лендинга */
  --pb-teal:#14a89a;
  --pb-hand:#e0a800;
  --pb-yellow-hover:#f5bb43;  /* наведение на жёлтую кнопку */
  --pb-on-color:#ffffff;      /* краска цифры на цветном кружке шага */
  --pb-dots:#e6e8f0;          /* точки-текстура полотна */
  /* Тени блока. Все на тёплом тёмном (#2e1c12 = --pb-ink): до 31.08 половина несла
     холодный rgba(27,42,77) — остаток чужой синей палитры, снятой вместе с --pb-ink.
     Уровни разведены по глубине залегания, а не по месту применения. */
  --pb-shadow-soft:rgba(46,28,18,.05);   /* контактная тень карточки */
  --pb-shadow-soft-2:rgba(46,28,18,.06); /* то же на десктопе, где карточка крупнее */
  --pb-shadow-card:rgba(46,28,18,.10);   /* основная тень карточки */
  --pb-shadow-card-lg:rgba(46,28,18,.14);/* карточка на широком экране */
  --pb-shadow-art:rgba(46,28,18,.16);    /* иллюстрация, лежит выше карточки */
  --pb-shadow-btn:rgba(46,28,18,.28);    /* поднятая кнопка при наведении */
  /* Пастельные кляксы за карточками: своё семейство на каждый шаг, от тёмного к светлому.
     Тон шага задаётся выше (--pb-violet / --pb-yellow / --pb-teal), кляксы — его разбелы. */
  --pb-shape-violet-1:#eae5fc;
  --pb-shape-violet-2:#f1edfd;
  --pb-shape-violet-3:#f5f2fe;
  --pb-shape-yellow-1:#fdf0d2;
  --pb-shape-yellow-2:#fef8e6;
  --pb-shape-yellow-3:#fef3d8;
  --pb-shape-teal-1:#ddf0ec;
  --pb-shape-teal-2:#e7f5f1;
  --pb-shape-teal-3:#eef9f6;
  --pb-bar:#2e1c12;      /* = --fk-ink, тот же тёмный, что у подвала лендинга */
  --pb-bar-text:#f5efe6;
  --pb-bar-note:#e6dbcd;  /* рукописная подпись на плашке, приглушена против основного текста */
  --pb-btn-text:#2e1c12; /* = --accent-ink */
  --pb-pad:16px;               /* боковое поле: телефон */
  --pb-font-head:'Lora', Georgia, serif;
  --pb-font-text:'Golos', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pb-font-hand:'Caveat', 'Comic Sans MS', cursive;
  background:var(--pb-canvas);
  display:block;
}

.pb-book *,
.pb-book *::before,
.pb-book *::after{ box-sizing:border-box; }

.pb-book__inner{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:32px var(--pb-pad) 40px;
  overflow:hidden;
}

/* --- декор полотна: только с планшета --- */
.pb-book__decor{ display:none; }
.pb-book__sparkle{ display:none; }

/* --- заголовок --- */
.pb-book__title{
  position:relative;
  margin:0 0 24px;
  font-family:var(--pb-font-head);
  font-weight:700;
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--pb-ink);
  text-align:center;
  text-wrap:pretty;
}

/* --- сетка --- */
.pb-book__grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

/* --- карточка --- */
.pb-book__card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--pb-card);
  border-radius:20px;
  box-shadow:0 12px 30px var(--pb-shadow-card), 0 2px 6px var(--pb-shadow-soft);
  overflow:hidden;
}
.pb-book__shapes{
  position:absolute;
  inset:0;
  border-radius:20px;
  overflow:hidden;
  pointer-events:none;
}
.pb-book__shape{ position:absolute; display:block; }

.pb-book__card--one .pb-book__shape--a{ left:-84px; bottom:-70px; width:290px; height:250px; border-radius:72% 28% 46% 54% / 38% 66% 34% 62%; background:var(--pb-shape-violet-1); transform:rotate(-14deg); }
.pb-book__card--one .pb-book__shape--b{ right:-64px; bottom:34px; width:190px; height:210px; border-radius:26% 74% 62% 38% / 66% 30% 70% 34%; background:var(--pb-shape-violet-3); transform:rotate(22deg); }
.pb-book__card--one .pb-book__shape--c{ left:96px; bottom:-34px; width:130px; height:110px; border-radius:64% 36% 30% 70% / 44% 68% 32% 56%; background:var(--pb-shape-violet-2); transform:rotate(8deg); }

/* Заливки блобов шагов 2 и 3 обменяны вместе с плашкой и штрихами (оператор 31.08):
   последний шаг несёт цвет кнопки действия, потому что он и есть завершение.
   Геометрия и повороты не тронуты — переехал только цвет. */
.pb-book__card--two .pb-book__shape--a{ left:-70px; bottom:-90px; width:330px; height:280px; border-radius:34% 66% 74% 26% / 70% 32% 68% 30%; background:var(--pb-shape-teal-1); transform:rotate(17deg); }
.pb-book__card--two .pb-book__shape--b{ right:-90px; bottom:96px; width:220px; height:180px; border-radius:70% 30% 34% 66% / 30% 72% 28% 70%; background:var(--pb-shape-teal-3); transform:rotate(-24deg); }

.pb-book__card--three .pb-book__shape--a{ right:-96px; bottom:-60px; width:310px; height:270px; border-radius:28% 72% 40% 60% / 64% 34% 66% 36%; background:var(--pb-shape-yellow-1); transform:rotate(12deg); }
.pb-book__card--three .pb-book__shape--b{ left:-72px; bottom:60px; width:210px; height:230px; border-radius:66% 34% 70% 30% / 36% 62% 38% 64%; background:var(--pb-shape-yellow-2); transform:rotate(-19deg); }
/* Третий блоб у шага 3 остаётся: у шага 2 их два, донора для этого нет — берём тон
   из той же жёлтой лестницы, чтобы карточка не пестрила. */
.pb-book__card--three .pb-book__shape--c{ left:110px; bottom:-46px; width:150px; height:120px; border-radius:40% 60% 26% 74% / 70% 30% 66% 34%; background:var(--pb-shape-yellow-3); transform:rotate(-6deg); }

/* --- шапка карточки --- */
.pb-book__head{
  position:relative;
  padding:22px 20px 0;
}
.pb-book__row{
  display:flex;
  align-items:center;
  gap:14px;
}
.pb-book__num{ position:relative; display:block; flex:none; }
.pb-book__badge{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  font-family:var(--pb-font-head);
  font-weight:700;
  font-size:34px;
  line-height:1;
  color:var(--pb-on-color);
}
.pb-book__card--one   .pb-book__badge{ background:var(--pb-violet); border-radius:54% 46% 42% 58% / 56% 44% 56% 44%; }
/* Цифра на жёлтом кружке тёмная, а не белая: белым контраст 1.5 при норме 4.5,
   тёмным 10.7. На фиолетовом и бирюзовом белый остаётся.
   ⚠️ Тёмная цифра привязана к ЖЁЛТОМУ, а не к номеру шага: цвета шагов 2 и 3 обменяны
   31.08, и правило контраста переехало вместе с заливкой. Меняя цвет местами снова,
   переносить и color — иначе цифра станет белой на жёлтом и пропадёт. */
.pb-book__card--two   .pb-book__badge{ background:var(--pb-teal);   border-radius:46% 54% 56% 44% / 44% 56% 44% 56%; }
.pb-book__card--three .pb-book__badge{ background:var(--pb-yellow); color:var(--pb-btn-text); border-radius:52% 48% 46% 54% / 50% 52% 48% 50%; }

.pb-book__tick{ position:absolute; display:block; border-radius:2px; }
/* Штрихи вокруг номера. Раньше все три карточки несли одну и ту же пару штрихов в одних
   координатах — рисунок читался как повторяющийся элемент интерфейса, а не как рукописная
   пометка. Теперь у каждой карточки своя раскладка: разный угол, вылет и сторона
   (оператор 28.08 «раскидать рандомнее»). Значения подобраны руками, а не формулой:
   случайность здесь должна быть нарисованной, генератор даёт равномерность, а не живость. */
.pb-book__tick--v{ left:-8px;  top:-2px; width:3px;  height:10px; transform:rotate(-22deg); }
.pb-book__tick--h{ left:-13px; top:12px; width:10px; height:3px; }

.pb-book__card--one   .pb-book__tick{ background:var(--pb-violet); }
.pb-book__card--two   .pb-book__tick{ background:var(--pb-teal); }
.pb-book__card--three .pb-book__tick{ background:var(--pb-yellow); }

/* карточка 1: штрихи выше и левее, круче наклон */
.pb-book__card--one .pb-book__tick--v{ left:-11px; top:-8px; height:12px; transform:rotate(-34deg); }
.pb-book__card--one .pb-book__tick--h{ left:-16px; top:9px;  width:9px;  transform:rotate(-8deg); }

/* карточка 2: короткий штрих сверху, длинный уходит вправо над кружком */
.pb-book__card--two .pb-book__tick--v{ left:-6px;  top:-11px; height:9px;  transform:rotate(-12deg); }
.pb-book__card--two .pb-book__tick--h{ left:-14px; top:6px;   width:12px; transform:rotate(12deg); }

/* карточка 3: пара разведена шире, наклон в другую сторону */
.pb-book__card--three .pb-book__tick--v{ left:-13px; top:2px;  height:11px; transform:rotate(16deg); }
.pb-book__card--three .pb-book__tick--h{ left:-9px;  top:-9px; width:10px; transform:rotate(-24deg); }

.pb-book__card-title{
  margin:0;
  font-family:var(--pb-font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.2;
  color:var(--pb-ink);
}
.pb-book__text{
  margin:14px 0 0;
  font-family:var(--pb-font-text);
  font-weight:400;
  font-size:16px;
  line-height:1.5;
  color:var(--pb-muted);
  text-wrap:pretty;
}

/* --- иллюстрация: на телефоне обычный поток --- */
.pb-book__art{
  position:relative;
  margin:18px 0 0;
}
.pb-book__img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}
.pb-book__note,
.pb-book__arrow{ display:none; }

/* --- нижняя плашка --- */
.pb-book__cta{
  position:relative;
  margin:24px 0 0;
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  background:var(--pb-bar);
  border-radius:18px;
}
.pb-book__cta-left{
  display:flex;
  align-items:center;
  gap:16px;
}
.pb-book__cta-icon{
  flex:none;
  width:52px;
  height:auto;
  filter:brightness(0) invert(1);
  transform:rotate(25deg);
}
.pb-book__cta-lead{
  margin:0;
  font-family:var(--pb-font-head);
  font-weight:700;
  font-size:18px;
  line-height:1.3;
  color:var(--pb-bar-text);
  text-wrap:pretty;
}
/* На телефоне кнопка и подпись идут столбиком: в строку они не помещались, подпись
   переносилась под кнопку сама и оставляла справа от кнопки пустую четверть плашки
   (замер 02.09 на 390px: кнопка 213 из 318 доступных). */
.pb-book__cta-right{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  width:100%;
}
.pb-book__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:14px 24px;
  font-family:var(--pb-font-head);
  font-weight:700;
  font-size:17px;
  line-height:1.2;
  color:var(--pb-btn-text);
  background:var(--pb-yellow);
  border-radius:12px;
  text-decoration:none;
  transition:background .18s ease;
}
.pb-book__btn:hover,
.pb-book__btn:focus-visible{ background:var(--pb-yellow-hover); color:var(--pb-btn-text); }
.pb-book__btn-arrow{ font-family:var(--pb-font-text); font-weight:400; font-size:17px; }
/* Caveat рукописный: при том же кегле читается заметно мельче наборного, плюс наклон.
   17 -> 22px и вес 600, иначе подпись на плашке не видно (оператор 28.08). */
/* Под кнопкой во всю ширину подпись встаёт по центру: прижатая к левому краю, она
   висела под серединой кнопки и наклон -8° уводил её ещё левее. Жёсткий перенос
   (<br> в разметке) на телефоне снят — строка помещается целиком, а от угла наклона
   двухстрочная подпись рассыпалась. Наклон приглушён до -3°. */
.pb-book__cta-note{
  font-family:var(--pb-font-hand);
  font-weight:600;
  font-size:22px;
  line-height:1.2;
  color:var(--pb-bar-note);
  align-self:center;
  text-align:center;
  transform:rotate(-3deg);
}
.pb-book__cta-note br{ display:none; }
/* Сердечко у подписи «и с любовью». В папке от Клоо его не было ни в разметке,
   ни в стилях — только на картинке-превью; добавлено 28.08 по просьбе оператора.
   Цвет наследуется от подписи, размер привязан к кеглю, чтобы не отставал при
   смене размера на десктопе. */
.pb-book__heart{
  display:inline-block;
  width:.82em;
  height:.82em;
  margin-left:.12em;
  vertical-align:-.06em;
  color:var(--pb-yellow);
  overflow:visible;
}

/* ============================================================
   Планшет: боковое поле 32px
   ============================================================ */
@media (min-width:768px){
  .pb-book{ --pb-pad:32px; }
  .pb-book__inner{ padding:40px var(--pb-pad) 48px; }
  .pb-book__title{ font-size:38px; margin-bottom:28px; }
  .pb-book__grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .pb-book__card--three{ grid-column:span 2; }
  .pb-book__card--three .pb-book__art{ max-width:60%; margin-inline:auto; }
  .pb-book__cta{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:22px 26px;
    gap:24px;
  }
  .pb-book__cta-right{ width:auto; flex:none; flex-direction:row; align-items:center; gap:16px; flex-wrap:wrap; }
  .pb-book__cta-note{ align-self:auto; text-align:left; transform:rotate(-8deg); }
  .pb-book__cta-note br{ display:inline; }
  .pb-book__cta-lead{ font-size:19px; max-width:420px; }
}

/* ============================================================
   Десктоп: боковое поле 48px, три карточки в ряд,
   иллюстрации выходят за края, декор и рукописные пометки видны
   ============================================================ */
@media (min-width:1024px){
  .pb-book{ --pb-pad:48px; }
  .pb-book__inner{ padding:44px var(--pb-pad) 56px; }

  .pb-book__decor{ display:block; position:absolute; pointer-events:none; }
  /* Серая клякса (right:-90px) и жёлтый завиток (left:-14px) сняты 28.08: оба стояли на
     отрицательных координатах и срезались краем через overflow:hidden у .pb-book__inner —
     на экране читались как недорисованные объекты. Точечный узор оставлен: он целиком
     внутри поля и края не касается. */
  .pb-book__decor--grey{ display:none; }
  .pb-book__decor--swirl{ display:none; }
  .pb-book__decor--dots{
    top:60px; right:34px; width:120px; height:120px; border-radius:50%;
    background:repeating-radial-gradient(circle,var(--pb-dots) 0 1.5px,transparent 1.5px 7px);
    opacity:.9;
  }

  .pb-book__title{ font-size:46px; margin-bottom:30px; }
  .pb-book__sparkle{
    display:block;
    position:absolute; top:-2px; left:calc(50% + 200px);
    width:26px; height:26px;
  }
  .pb-book__sparkle i{ position:absolute; display:block; border-radius:2px; background:var(--pb-yellow); }
  .pb-book__spark-a{ left:11px; top:-4px; width:3px;  height:12px; transform:rotate(18deg); }
  .pb-book__spark-b{ left:20px; top:6px;  width:12px; height:3px; }
  .pb-book__spark-c{ left:17px; top:19px; width:11px; height:3px; transform:rotate(38deg); }

  .pb-book__grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .pb-book__card{
    min-height:520px;
    border-radius:26px;
    overflow:visible;
    box-shadow:0 16px 40px var(--pb-shadow-card), 0 2px 6px var(--pb-shadow-soft);
  }
  /* Карточки в сетке идут подряд, и следующая перекрывала иллюстрацию предыдущей:
     картинки выходят за края (overflow:visible), а своего порядка наложения у карточек
     не было. Задаём его явно и по возрастанию — ассеты всегда поверх соседей справа. */
  .pb-book__card--one  { position:relative; z-index:3; }
  .pb-book__card--two  { position:relative; z-index:2; }
  .pb-book__card--three{ grid-column:auto; position:relative; z-index:1; }
  .pb-book__shapes{ border-radius:26px; }

  .pb-book__head{ padding:26px 26px 0; min-height:181px; }
  .pb-book__row{ gap:15px; }
  .pb-book__badge{ width:76px; height:76px; font-size:42px; }
  /* на десктопе штрихи чуть длиннее; координаты и углы держат карточные правила выше,
     поэтому здесь только размеры — иначе раскладка снова схлопнется в одинаковую */
  .pb-book__tick--v{ width:3px; height:12px; }
  .pb-book__tick--h{ width:12px; height:3px; }
  .pb-book__card-title{ font-size:21.5px; }
  .pb-book__text{ margin-top:18px; font-size:15px; }

  .pb-book__art{
    flex:1;
    margin:14px -18px 0;
    min-height:240px;
    max-width:none;
    filter:drop-shadow(0 24px 28px var(--pb-shadow-art));
  }
  .pb-book__card--three .pb-book__art{ max-width:none; margin:14px -18px 0; }
  .pb-book__img{
    position:absolute;
    z-index:4;
    width:auto;
  }
  .pb-book__img--one{   left:-7px; bottom:0;    width:394px; height:268px; object-position:bottom; }
  .pb-book__img--two{   left:16px; bottom:56px; width:373px; height:198px; object-position:bottom; transform:rotate(4deg); }
  .pb-book__img--three{ left:79px; bottom:-1px; width:269px; height:281px; object-position:bottom left; }

  /* Пометка переехала ПОД разворот книги (оператор 28.08): сверху она сначала липла к
     описанию, а жёлтой на светлой карточке читалась плохо. Разворот стоит на bottom:56px,
     под ним свободно — там пометка и живёт. Цвет тёмный, как у заголовков карточек. */
  .pb-book__note{
    display:block;
    position:absolute; left:22px; bottom:-26px; z-index:5;
    font-family:var(--pb-font-hand);
    font-weight:600;
    font-size:19px;
    line-height:1.2;
    color:var(--pb-ink);
    transform:rotate(-5deg);
    pointer-events:none;
  }
  /* Стрелка отзеркалена по вертикали (scaleY(-1)): пометка теперь снизу, и дуга обязана
     идти снизу вверх, к развороту. Без отражения она указывала бы в пустоту под карточкой. */
  .pb-book__arrow{
    display:block;
    position:absolute; left:196px; bottom:-16px; z-index:5;
    width:92px; height:52px;
    transform:scaleY(-1);
    overflow:visible;
    pointer-events:none;
  }

  .pb-book__cta{
    margin:51px 24px 0;
    padding:22px 30px;
    border-radius:20px;
    gap:26px;
  }
  .pb-book__cta-icon{ width:60px; }
  .pb-book__cta-lead{ font-size:20px; max-width:394px; }
  .pb-book__cta-right{ gap:22px; }
  .pb-book__btn{ font-size:16.5px; padding:16px 26px; }
  .pb-book__cta-note{ font-size:23px; }
}

/* ============================================================
   Движение. Канон лендинга (решение 22.07): только мягкий reveal,
   ничего кричащего — тёплая книжная эстетика. Появление берём
   штатным классом .rv лендинга (IntersectionObserver уже есть),
   здесь только лесенка задержек и ховер.
   ============================================================ */

/* лесенка: карточки проявляются по очереди, а не разом */
.pb-book .pb-book__card:nth-child(1){ transition-delay:0s; }
.pb-book .pb-book__card:nth-child(2){ transition-delay:.09s; }
.pb-book .pb-book__card:nth-child(3){ transition-delay:.18s; }
.pb-book .pb-book__cta{ transition-delay:.24s; }

/* Ховер только на устройствах с настоящим курсором: на тач-экране :hover
   залипает после тапа и карточка остаётся поднятой. */
@media (hover:hover) and (pointer:fine){
  .pb-book__card{
    transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
  }
  .pb-book__card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 48px var(--pb-shadow-card-lg), 0 3px 8px var(--pb-shadow-soft-2);
    /* поверх соседей: у карточек есть свой z-index (иначе следующая перекрывает
       выехавшую иллюстрацию), и без этого поднятая карточка ушла бы под соседнюю */
    z-index:6;
  }
  /* иллюстрация внутри поднявшейся карточки чуть подаётся вперёд */
  .pb-book__card .pb-book__img{ transition:transform .34s cubic-bezier(.2,.7,.3,1); }
  .pb-book__card:hover .pb-book__img{ transform:scale(1.035); }

  .pb-book__btn{ transition:background .18s ease, transform .18s ease, box-shadow .18s ease; }
  .pb-book__btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px var(--pb-shadow-btn); }
  .pb-book__btn:active{ transform:translateY(0); box-shadow:none; }
  /* стрелка в кнопке отъезжает вправо — подсказка направления */
  .pb-book__btn-arrow{ transition:transform .18s ease; }
  .pb-book__btn:hover .pb-book__btn-arrow{ transform:translateX(4px); }
}

/* Отключённое движение — уважаем системную настройку, как и весь лендинг. */
@media (prefers-reduced-motion:reduce){
  .pb-book__card,
  .pb-book__img,
  .pb-book__btn,
  .pb-book__btn-arrow{ transition:none !important; }
  .pb-book__card:hover{ transform:none; }
  .pb-book__card:hover .pb-book__img{ transform:none; }
}