/* ============================================================
   Coffee Meet — лендинг, редакционная вёрстка
   Несущая идея: полоса набора, а не набор карточек.
   Ритм задают три вещи и только они —
   линейка над секцией, номер на левом поле и мера строки.
   Фон один на всю страницу; инверсия — только подвал.
   ============================================================ */

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:14px 22px;font-weight:var(--fw-semibold);text-decoration:none}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* якорь не должен уезжать под липкую шапку */
:target,section[id],#top,#docs{scroll-margin-top:80px}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.display{font-family:var(--font-display);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:var(--lh-tight)}

/* ---------- шапка ---------- */
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
@supports not (backdrop-filter:blur(2px)){.site-header{background:var(--paper)}}
.site-header__inner{display:flex;align-items:center;gap:clamp(16px,3vw,36px);padding-top:13px;padding-bottom:13px}
.brand{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:19px;letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none}
.site-nav{display:flex;gap:clamp(16px,2.2vw,28px);margin-left:auto;align-items:center;font-size:var(--fs-small)}
.site-nav a{color:var(--text-muted);text-decoration:none;white-space:nowrap;padding:6px 0}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.lang{display:flex;align-items:center;gap:8px;font-size:var(--fs-tiny);font-weight:var(--fw-semibold);letter-spacing:.05em}
.lang a{color:var(--text-muted);text-decoration:none;padding:6px 2px}
.lang a:hover{color:var(--ink);text-decoration:none}
.lang a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px}
.lang__sep{color:var(--rule)}

/* ---------- герой ---------- */
.hero{padding-top:clamp(44px,6.5vw,92px);padding-bottom:clamp(40px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:clamp(32px,6vw,84px);align-items:start}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.4vw,30px)}
.hero__title{font-size:var(--fs-display);line-height:var(--lh-display);max-width:13ch}
.hero__standfirst{font-size:var(--fs-standfirst);line-height:var(--lh-snug);color:var(--ink-body);max-width:var(--measure-narrow)}
.hero__actions{display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);flex-wrap:wrap}
.hero__price{font-size:var(--fs-small);color:var(--text-muted)}
.hero__price s{text-decoration-thickness:1px}
.hero__price b{color:var(--ink);font-weight:var(--fw-semibold)}

/* портрет — единственное изображение на странице */
.portrait{margin:0;max-width:340px;width:100%;justify-self:end}
.portrait__img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%;border-radius:var(--r-s);box-shadow:var(--shadow-photo)}
.portrait figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-strong);font-size:var(--fs-small);line-height:var(--lh-snug);color:var(--text-muted)}
.portrait__name{display:block;font-weight:var(--fw-semibold);color:var(--ink);margin-bottom:4px}
.portrait__note{display:block;margin-top:10px;color:var(--text-muted)}

/* ---------- полоса выходных данных под героем ---------- */
.meta{list-style:none;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:clamp(20px,5vw,64px);padding:18px 0;font-size:var(--fs-small);color:var(--text-muted)}

/* ---------- каркас секции: линейка + номер на поле ---------- */
.section{border-top:1px solid var(--rule-strong)}
.section:first-of-type{border-top:0}
.section__grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--rail-gap);padding-top:var(--sp-rule);padding-bottom:var(--section-y)}
.section__rail{display:flex;flex-direction:column;gap:6px}
.section__title{font-size:var(--fs-h2);max-width:16ch;margin-bottom:clamp(20px,2.4vw,28px)}
.section__lede{font-size:var(--fs-standfirst);line-height:var(--lh-snug);color:var(--ink-body);max-width:var(--measure-narrow);margin-bottom:clamp(28px,4vw,52px)}

/* ---------- 01 · неделя ---------- */
/* шаги вынесены на всю ширину секции, а их колонки повторяют колонки страницы,
   поэтому метки времени попадают ровно в левое поле: рельс = ось недели.
   row-gap:0 — вертикальный ритм остаётся на отступах заголовка и лида */
.section--week .section__grid{row-gap:0}
.section--week .steps{grid-column:1/-1}
.section--week .year{grid-column:2}
.step{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--rail-gap);padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--rule)}
.step:first-child{border-top:0;padding-top:0}
.step__when{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-muted);line-height:var(--lh-snug)}
.step h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin-bottom:8px}
/* колонка шире строки набора: метки держит рельс, а длина строки остаётся
   такой же, как в остальных секциях — иначе шаги читаются тяжелее прочего */
.step p{max-width:var(--measure-narrow);color:var(--text-body)}
.step--now .step__when{color:var(--ink)}
/* ── сигнатура страницы: год как 52 штриха ──────────────────
   Единственная «громкая» вещь на странице. Штрих = неделя,
   и их ровно столько, сколько раз бот может привести человека.
   Ничего не декорирует: это и есть главная цифра продукта. */
.year{margin:clamp(36px,5vw,64px) 0 0;padding-top:clamp(22px,2.6vw,30px);border-top:1px solid var(--rule-strong)}
.year__strip{display:block}
.year__ticks{display:flex;justify-content:space-between;align-items:flex-end;height:clamp(52px,6vw,82px)}
.year__tick{flex:0 0 2px;height:58%;background:var(--ink);opacity:.38}
/* первый штрих — ближайший понедельник: единственная неделя,
   в которую читатель может попасть прямо сейчас */
.year__tick:first-child{flex-basis:3px;height:100%;opacity:1;background:var(--petrol)}
.year__next{display:block;margin-top:12px;font-size:var(--fs-tiny);font-weight:var(--fw-semibold);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--petrol)}
.year__cap{display:flex;align-items:baseline;gap:clamp(14px,1.8vw,22px);margin-top:clamp(22px,2.6vw,30px);flex-wrap:wrap}
.year__num{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:clamp(38px,4.6vw,58px);line-height:.9;letter-spacing:-.03em;color:var(--ink);flex:none}
.year__note{flex:1 1 320px;max-width:var(--measure);color:var(--text-body)}

/* штрихи набираются слева направо — год заполняется на глазах */
.js .year .year__tick{transform:scaleY(.06);opacity:0}
.js .year.is-in .year__tick{transform:scaleY(1);opacity:.38;transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .3s ease;transition-delay:calc(var(--n) * 17ms)}
.js .year.is-in .year__tick:first-child{opacity:1}

/* ---------- 02 · формат ---------- */
/* фото добирает всю оставшуюся высоту поля, поэтому колонка закрыта целиком
   и высота кадра не задана заранее — её определяет соседняя колонка */
.rail-photo{display:block;flex:1 1 auto;min-height:0;margin-top:clamp(20px,2.4vw,28px)}
.rail-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:55% 50%;border:1px solid var(--rule-strong);border-radius:var(--r-s)}

.claim{padding:clamp(24px,3vw,34px) 0;border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(16px,3vw,40px);align-items:baseline}
.claim:first-child{border-top:0;padding-top:0}
.claim h3{font-family:var(--font-display);font-size:clamp(24px,2.9vw,34px);font-weight:var(--fw-semibold);letter-spacing:var(--track-display);line-height:var(--lh-tight)}
.claim p{max-width:var(--measure);color:var(--text-body)}

.pullquote{margin-top:clamp(36px,5vw,72px);padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--rule-strong);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.pullquote__line{font-family:var(--font-display);font-size:clamp(24px,3.2vw,38px);font-weight:var(--fw-regular);line-height:var(--lh-tight);letter-spacing:var(--track-display);color:var(--ink);max-width:var(--measure-tight)}
.pullquote p{max-width:var(--measure);color:var(--text-body)}

/* ---------- 03 · кто участвует ---------- */
/* три колонки внутри контентной были по 22 знака в строке — нечитаемо.
   фильтры занимают всю ширину секции, набор доходит до 33 знаков */
.section--who .section__grid{row-gap:0}
.section--who .gates{grid-column:1/-1}
.gates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,4vw,56px);border-top:1px solid var(--rule)}
.gate{padding:clamp(22px,2.6vw,30px) 0}
.gate h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-snug);margin-bottom:8px}
.gate p{font-size:var(--fs-small);line-height:var(--lh-read);color:var(--text-body)}

/* ---------- 04 · цена ---------- */
.price{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);align-items:start}
.price__figure{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.price__amount{display:flex;align-items:baseline;gap:6px clamp(12px,1.6vw,20px);flex-wrap:wrap}
.price__now{font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:var(--fs-numeral);letter-spacing:-.03em;line-height:.88;color:var(--ink)}
.price__was{flex:0 0 100%;font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);color:var(--text-muted);text-decoration:line-through;text-decoration-thickness:1px}
.price__per{font-size:var(--fs-standfirst);color:var(--text-muted)}
.price__why{max-width:var(--measure-narrow);color:var(--text-body)}
.price__list{border-top:1px solid var(--rule-strong)}
.price__list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-small);line-height:var(--lh-snug)}
.price__list .icon{width:18px;height:18px;flex:none;margin-top:3px;color:var(--petrol)}
.price__cta{margin-top:clamp(24px,3vw,32px);display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.price__note{font-size:var(--fs-tiny);line-height:var(--lh-snug);color:var(--text-muted);max-width:var(--measure-narrow)}
/* боковая сноска: длину строки держит сам рельс, measure-tight — только страховка
   на широких экранах, где рельс упирается в свои 260px раньше, чем текст в 34 знака */
.price__aside{margin-top:clamp(20px,2.4vw,28px);padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:var(--lh-snug);color:var(--text-muted);max-width:var(--measure-tight)}

/* ---------- 05 · вопросы ---------- */
.faq__list{border-top:1px solid var(--rule-strong)}
.faq__after{margin-top:clamp(24px,3vw,36px);font-size:var(--fs-small);color:var(--text-muted);max-width:var(--measure)}

/* ---------- финал ---------- */
.final{border-top:1px solid var(--rule-strong)}
/* max-width нельзя вешать на сам .wrap: он перебивает --container,
   и margin:0 auto центрирует блок вместо колонки набора.
   Финал держит ту же сетку «поле + колонка», что и все секции. */
.final__inner{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:var(--rail-gap);padding-top:clamp(56px,8vw,112px);padding-bottom:clamp(56px,8vw,112px)}
.final__body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(20px,2.6vw,30px);max-width:var(--measure)}
.final h2{font-size:var(--fs-h2);max-width:15ch}
.final p{color:var(--text-body);max-width:var(--measure-narrow)}
.final__meta{font-size:var(--fs-tiny);color:var(--text-muted)}

/* дата ближайшего понедельника — третья и последняя крупная цифра страницы
   после «52» и «5 GEL». Проставляется скриптом: без JS блок остаётся hidden,
   поэтому display на .nextmon не задаём — иначе он перебьёт атрибут */
.final__rail{display:flex;flex-direction:column;gap:6px}
.nextmon{margin-top:clamp(20px,2.4vw,28px)}
.nextmon__day{display:block;font-family:var(--font-display);font-weight:var(--fw-semibold);font-size:clamp(46px,5.6vw,72px);line-height:.86;letter-spacing:-.035em;color:var(--ink)}
.nextmon__month{display:block;margin-top:10px;font-size:var(--fs-standfirst);color:var(--text-muted)}

/* ---------- подвал ---------- */
.site-footer{background:var(--ink-surface);color:var(--ink-surface-text)}
.site-footer a{color:var(--ink-surface-text);text-decoration-color:color-mix(in srgb,var(--ink-surface-text) 40%,transparent)}
/* столбцы ссылок — навигация, а не текст: подчёркивание только на ховер */
.footer-col a{text-decoration:none}
.footer-col a:hover{text-decoration:underline;text-decoration-color:currentColor}
.site-footer a:hover{color:var(--ink-surface-heading)}
.site-footer__grid{padding-top:clamp(48px,6vw,80px);padding-bottom:44px;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px)}
.site-footer .brand{color:var(--ink-surface-heading)}
.site-footer__about{margin-top:14px;font-size:var(--fs-small);line-height:var(--lh-read);max-width:36ch}
.footer-col{display:flex;flex-direction:column;gap:11px;font-size:var(--fs-small)}
.footer-col__title{font-size:var(--fs-tiny);font-weight:var(--fw-semibold);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-surface-heading);margin-bottom:3px}
.site-footer__bottom{border-top:1px solid var(--ink-surface-rule)}
.site-footer__legal{padding-top:20px;padding-bottom:20px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:var(--fs-tiny)}

/* ---------- появление при скролле ----------
   Переход живёт на .reveal, а состояние — на .is-in.
   Так ховеры и прочие правила не проигрывают ему по специфичности. */
.js .reveal{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .js .year .year__tick,.js .year.is-in .year__tick{transform:none;opacity:.38;transition:none}
  .js .year .year__tick:first-child,.js .year.is-in .year__tick:first-child{opacity:1}
  .js .hero__copy>*,.js .portrait,.js .meta{animation:none}
}


/* ── вход страницы: один короткий оркестрованный проход ─────
   Герой собирается сверху вниз, портрет входит следом.
   Больше ничего на загрузке не двигается. */
@keyframes cm-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cm-photo{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.js .hero__copy>*{animation:cm-rise .62s cubic-bezier(.2,.75,.3,1) backwards}
.js .hero__copy>*:nth-child(1){animation-delay:.06s}
.js .hero__copy>*:nth-child(2){animation-delay:.14s}
.js .hero__copy>*:nth-child(3){animation-delay:.24s}
.js .hero__copy>*:nth-child(4){animation-delay:.32s}
.js .hero__copy>*:nth-child(5){animation-delay:.40s}
.js .portrait{animation:cm-photo .9s cubic-bezier(.2,.75,.3,1) .18s backwards}
.js .meta{animation:cm-rise .6s cubic-bezier(.2,.75,.3,1) .48s backwards}

/* ── микровзаимодействия: по одному на каждый тип действия ──*/
.cm-btn svg{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
.cm-btn:hover svg{transform:translateX(3px)}
.cm-link svg{transition:transform .22s cubic-bezier(.2,.8,.25,1)}
.cm-link:hover svg{transform:translateY(3px)}

/* ---------- адаптив ---------- */
@media (max-width:1080px){
  .section__grid{gap:clamp(20px,3vw,28px)}
  .section__grid,.final__inner{grid-template-columns:1fr}
  /* второй колонки больше нет — иначе явный grid-column создаст неявную */
  .section--week .year{grid-column:auto}
  .final__rail{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .nextmon[hidden]{display:none}
  .nextmon{display:flex;align-items:baseline;gap:10px;flex:0 0 100%;margin-top:6px}
  .nextmon__day{font-size:clamp(34px,7vw,46px)}
  .nextmon__month{margin-top:0}
  .section__rail{flex-direction:row;align-items:baseline;gap:12px;flex-wrap:wrap}
  .price__aside{flex:0 0 100%;margin-top:6px;max-width:var(--measure-narrow)}
  /* рейл схлопнут в строку — вертикальный кадр перекадрируется в широкий */
  .rail-photo{flex:0 0 100%;margin-top:8px;width:100%}
  /* в горизонтальную полосу должны попасть обе чашки, а не окно над ними */
  .rail-photo img{height:auto;aspect-ratio:16/9;object-position:50% 79%}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:clamp(32px,6vw,48px);align-items:start}
  .portrait{justify-self:start;max-width:300px}
  .price{grid-template-columns:1fr;gap:clamp(28px,5vw,40px)}
  .pullquote{grid-template-columns:1fr;gap:20px}
  .gates{grid-template-columns:1fr;gap:0}
  .gate{border-top:1px solid var(--rule)}
  .gate:first-child{border-top:0}
  .site-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .site-nav{display:none}
  .lang{margin-left:auto}
}
@media (max-width:640px){
  .step,.claim{grid-template-columns:1fr;gap:6px}
  /* портрет во всю колонку — иначе он не держит левый край набора */
  .portrait{max-width:none}
  .site-footer__grid{grid-template-columns:1fr;gap:32px}
  .hero__actions{width:100%;flex-direction:column;align-items:stretch;gap:14px}
  .hero__actions .cm-btn{width:100%}
  .hero__actions .cm-link{align-self:flex-start}
}

/* в колонке цены заголовок живёт во flex-стопке — свой отступ ему не нужен */
.price__figure .section__title{margin-bottom:0;max-width:none}