/* Общие стили посадочных страниц: главная, фотографам, фотостудиям,
   галереи, тарифы. Раньше этот блок жил внутри index.html — с появлением
   второй страницы он превратился бы в пять расходящихся копий. */
/* Ширина считается вместе с полями. Без этого кнопка во всю строку на
     телефоне получалась шире экрана ровно на свои поля, и страница ездила
     вбок. */
  *, *::before, *::after { box-sizing:border-box; }
  body { margin:0; background:#F8F7F6; font-family:'Jost',system-ui,sans-serif; -webkit-font-smoothing:antialiased; color:#072442; }
  a { color:#072442; text-decoration:none; }
  a:hover { color:#B4705C; }
  button { font-family:inherit; }
  section[id] { scroll-margin-top:80px; }

  /* --- общие блоки страницы -------------------------------------------- */
  .sec { max-width:1200px; margin:0 auto; padding:84px 36px; display:flex; flex-direction:column; gap:40px; }
  .band-line { width:100%; border-bottom:1px solid #E9E9E9; }
  .warm { background:#F4E8E3; border-bottom:1px solid #E7D6CF; }
  .white { background:#FFFFFF; border-bottom:1px solid #E9E9E9; }
  .dark { background:#072442; }

  .kick { font-size:14px; color:#8E5F50; letter-spacing:0.14em; text-transform:uppercase; }
  .kick.light { color:#E7CFC5; }
  h1 { margin:0; font-size:clamp(38px,5.2vw,68px); font-weight:500; line-height:1.05; letter-spacing:-0.03em; text-wrap:balance; }
  h2 { margin:0; font-size:clamp(28px,3.4vw,42px); font-weight:500; line-height:1.15; letter-spacing:-0.02em; text-wrap:pretty; }
  .p { margin:0; font-size:18px; color:#4A4A4A; line-height:1.65; text-wrap:pretty; max-width:70ch; }
  .p.big { font-size:20px; }
  .head { display:flex; flex-direction:column; gap:16px; max-width:820px; }

  /* Кнопки. Тёмная — основная, светлая — на тёмном фоне, контурная — второстепенная. */
  /* Кнопка растёт по тексту, а не обрезает его.

     Была жёсткая высота — и длинная подпись в две строки вылезала из
     кнопки, да ещё прижималась влево: flex центрирует блок строк, но не
     сами строки. Теперь высота минимальная, текст по центру. */
  .btn { min-height:56px; padding:12px 30px; border-radius:999px; font-size:17px;
         display:inline-flex; align-items:center; justify-content:center;
         text-align:center; line-height:1.3; }
  .btn.sm { min-height:50px; font-size:16px; padding:10px 26px; }
  .btn.dk { background:#072442; color:#FFFFFF; }
  .btn.dk:hover { color:#FFFFFF; background:#2E2E2E; }
  .btn.lt { background:#FFFFFF; color:#072442; }
  .btn.ln { border:1px solid rgba(255,255,255,0.45); color:#FFFFFF; }
  .btn.ln:hover { color:#FFFFFF; border-color:#FFFFFF; }
  .btn.lnd { border:1px solid #C9AEA4; color:#072442; }
  .cta-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .note { font-size:15px; color:#6E6E6E; }
  .note.light { color:rgba(255,255,255,0.6); }

  /* Сетки. Ломаются на телефоне разом, а не каждая по отдельности. */
  .grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
  .grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
  .split { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,440px); gap:56px; align-items:center; }

  /* Пункт списка: тонкая линия сверху вместо маркера. */
  .pt { border-top:2px solid #E7D6CF; padding-top:16px; display:flex; flex-direction:column; gap:7px; }
  .pt b { font-size:19px; font-weight:500; }
  .pt span { font-size:16px; color:#5E5E5E; line-height:1.6; text-wrap:pretty; }
  .dark .pt { border-top-color:rgba(255,255,255,0.16); }
  .dark .pt b { color:#FFFFFF; }
  .dark .pt span { color:rgba(255,255,255,0.66); }

  /* Простые строки-перечисления там, где заголовок к каждой не нужен. */
  .rows { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
  .rows li { display:flex; gap:12px; font-size:17px; line-height:1.55; color:#333333; text-wrap:pretty; }
  .rows li::before { content:""; width:7px; height:7px; border-radius:50%; background:#B4705C; flex:none; margin-top:9px; }

  .box { background:#F8F7F6; border:1px solid #E9E9E9; border-radius:12px; padding:24px; display:flex; flex-direction:column; gap:12px; }
  .white .box { background:#F8F7F6; }
  .box b { font-size:19px; font-weight:500; line-height:1.3; text-wrap:pretty; }
  .box span { font-size:16px; color:#5E5E5E; line-height:1.6; }
  .dash { width:34px; height:3px; background:#B4705C; border-radius:99px; }

  /* Точку держим у первой строки, а не по центру блока: в две строки она
     уезжала вниз и читалась как маркер второй строки. */
  .bullet { background:#F4E8E3; border-radius:12px; padding:26px 30px; display:flex; align-items:flex-start; gap:18px; }
  .bullet > i { width:8px; height:8px; border-radius:50%; background:#B4705C; flex:none; font-style:normal; margin-top:12px; }
  .bullet > span { font-size:21px; line-height:1.45; text-wrap:pretty; }

  /* Пять шагов пути клиента. Цепочка, а не абзацы: смысл в порядке. */
  .steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }
  .step { display:flex; flex-direction:column; gap:10px; }
  .step i { font-style:normal; font-size:13px; letter-spacing:0.12em; color:#B4705C; }
  .step b { font-size:19px; font-weight:500; line-height:1.3; }
  .step span { font-size:16px; color:#5E5E5E; line-height:1.6; text-wrap:pretty; }
  .step .bar { height:3px; background:#E7D6CF; border-radius:99px; position:relative; }
  .step .bar::after { content:""; position:absolute; left:0; top:0; bottom:0; width:34px; background:#B4705C; border-radius:99px; }

  /* Два направления синхронизации с Google. */
  .sync { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  .sync div { background:#F8F7F6; border:1px solid #E9E9E9; border-radius:12px; padding:26px; display:flex; flex-direction:column; gap:12px; }
  .sync em { font-style:normal; font-size:13px; color:#8A8A8A; letter-spacing:0.12em; text-transform:uppercase; }
  .sync b { font-size:19px; font-weight:500; line-height:1.35; text-wrap:pretty; }
  .sync span { font-size:16px; color:#5E5E5E; line-height:1.6; }
  .sync .way { font-size:15px; color:#B4705C; letter-spacing:0.04em; }

  /* Плейсхолдер и кадры. */
  section img.shot { width:100%; height:100%; object-fit:cover; display:block; }
  [data-video] img.bg, [data-video] > video, .band > img.bg, .tile > img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .tile, .panel { position:relative; }
  /* Обложка — экран минус шапка. Высоту шапки не угадываем: она зависит
     от размера кнопки и шрифта, и подогнанное число разъезжалось при любой
     правке. Её измеряет скрипт и кладёт сюда; 72 — запасное значение на
     случай, если он не успел. */
  .cover { min-height:calc(100svh - var(--head, 72px)); }
  .cover picture { position:absolute; inset:0; display:block; }
  .cover picture img { width:100%; height:100%; object-fit:cover; display:block; }
  .panel img.bg, .panel > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  [data-video] > video { opacity:0; transition:opacity .5s ease; z-index:1; }
  [data-video] > video.on { opacity:1; }
  [data-video] > .grad { z-index:2; }

  /* Макеты продукта: телефон с услугами, сообщение бота, галерея. */
  .mock { background:#FFFFFF; border:1px solid #E9E9E9; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 22px 50px -18px rgba(60,35,25,0.30); }
  .mock .cap { font-size:13px; color:#8E5F50; letter-spacing:0.12em; text-transform:uppercase; }
  .mock .ttl { font-size:18px; font-weight:500; }
  .mock .txt { font-size:15px; color:#4A4A4A; line-height:1.65; }
  .chip { height:36px; border-radius:999px; border:1px solid #E4E4E4; background:#FFFFFF; font-size:13px; display:flex; align-items:center; justify-content:center; }
  .chip.off { border-color:#EFEFEF; background:#FAFAFA; color:#BFBFBF; text-decoration:line-through; }
  .chip.on { border-color:#072442; background:#072442; color:#FFFFFF; }
  .slots { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  /* Кнопки в макете сообщения.

     Была жёсткая высота — и флексбокс всё равно растягивал соседа под
     самую высокую строку: рядом с «Подтвердить» в 44 пикселя стояла белая
     коробка в сто с лишним. Теперь высота минимальная, растут обе разом и
     одинаково, текст по центру. */
  .keys { display:flex; gap:10px; align-items:stretch; }
  .key { flex:1; min-height:44px; padding:7px 14px; border-radius:8px;
         background:#072442; color:#FFFFFF; font-size:15px; line-height:1.25;
         display:flex; align-items:center; justify-content:center; text-align:center; }
  /* Имя класса не «sec»: так же называется контейнер секции, и кнопка
     подхватывала его отступы. На узком экране у `.sec` они ещё и
     !important — кнопка вырастала в белую коробку на пол-экрана. */
  .key.pale { flex:none; padding:7px 18px; background:transparent; border:1px solid #DCDCDC; color:#6E6E6E; }

  .shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
  .shots .tile { height:104px; background:#EDEDED; border-radius:6px; overflow:hidden; display:block; }
  .heart { position:absolute; right:7px; bottom:6px; z-index:2; font-size:15px; line-height:1; color:#FFFFFF; text-shadow:0 1px 4px rgba(0,0,0,.45); }
  .heart.on { color:#E8776A; }

  /* Меню. На телефоне — бургер: пять пунктов в строку не помещаются, а
     прятать их совсем нельзя, иначе до тарифов и входа не добраться. */
  .navrow { max-width:1200px; margin:0 auto; padding:14px 36px; display:flex; align-items:center; gap:32px; }
  .menu { flex:1; display:flex; gap:28px; }
  .menu a { font-size:16px; color:#4A4A4A; }
  .burger { display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; flex-direction:column; justify-content:center; gap:5px; padding:0 10px; }
  .burger i { display:block; height:2px; background:#072442; border-radius:2px; }
  .drop { display:none; border-top:1px solid #E9E9E9; background:#FFFFFF; }
  .drop.open { display:block; }
  .drop a { display:block; padding:14px 20px; font-size:17px; border-bottom:1px solid #F2F2F2; }

  .faq-item { border-top:1px solid #EFEFEF; display:flex; flex-direction:column; }
  .faq-item button { border:none; background:transparent; cursor:pointer; padding:15px 0; display:flex; align-items:center; gap:14px; text-align:left; width:100%; }
  .faq-q { flex:1; min-width:0; font-size:17px; line-height:1.35; color:#072442; }
  .faq-sign { flex:none; font-size:19px; color:#B4705C; }
  .faq-a { font-size:16px; color:#4A4A4A; line-height:1.6; padding:0 40px 18px 0; text-wrap:pretty; }

  @media (max-width: 1000px) {
    .steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .grid4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  }
  @media (max-width: 900px) {
    .menu { display:none; }
    .burger { display:flex; }
    .navrow { gap:14px; }
    .split, .grid2, .grid3, .grid4, .steps, .sync, .formula { grid-template-columns:minmax(0,1fr) !important; gap:22px !important; }
    .formula .sign { display:none !important; }
    .faq-grid { grid-template-columns:minmax(0,1fr) !important; gap:28px !important; }
    .faq-side { position:static !important; }
  }
  @media (max-width: 640px) {
    .sec { padding:52px 20px !important; gap:30px; }
    .navrow { padding:10px 20px; }
    .navrow img { height:24px !important; }
    .cover-in { padding-left:20px !important; padding-right:20px !important; padding-bottom:44px !important; }
    .band-in { padding-left:20px !important; padding-right:20px !important; padding-bottom:32px !important; }
    .band { height:auto !important; aspect-ratio:4/5; min-height:420px; }
    .band .grad { background:linear-gradient(to top,rgba(20,14,12,0.80),rgba(20,14,12,0.30) 52%,rgba(20,14,12,0.05)) !important; }
    h1 { font-size:36px !important; }
    h2 { font-size:26px !important; }
    .p, .p.big { font-size:17px; }
    .bullet { padding:22px 20px; }
    .bullet > span { font-size:19px; }
    .cta-row { flex-direction:column; align-items:stretch; }
    .cta-row > .btn { width:100%; }
    .rows li { font-size:16px; }
  }