/* Блоки сайта Placy: шапка с меню Product, мобильное меню, логотипы, «Sound familiar», отзывы, «Cross these off», цена, подвал.
   Эталон — лендинг /copilot (copilot-v7b). Подключать после токенов, компонентов и стилей страницы. Правила — DESIGN.md. */

/* ==== v7-logos ==== */
/* логотипы клиентов: оттенки серого вместо силуэта brightness(0) — внутри логотипа сохраняются тона (26.10) */.marquee img{filter:grayscale(1);opacity:.62}

/* ==== v7-hn ==== */
/* Шапка (26.10, вариант E): Product ▾ · For agencies · Pricing. В Product — Assistants (Placy Assistant, Listings; будущие — серые, не нажимаются) и Get found (будущее, серое). Новый пункт — новая строка в колонке. Классы hn- */
.hn{align-items:center}
.hn-it{position:relative}
.hn-trig{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 10px;margin:0 -10px;border:0;border-radius:999px;background:none;font:inherit;color:var(--ink-2);cursor:pointer;transition:color .15s ease,background .15s ease}
.hn-trig svg{width:16px;height:16px;transition:transform .2s ease}
.hn-trig:hover,.hn-it.open .hn-trig{color:var(--ink)}
.hn-it.open .hn-trig{background:var(--inset)}
.hn-it.open .hn-trig svg{transform:rotate(180deg)}
.hn-trig:focus-visible,.hn-i:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hn-dd{position:absolute;left:-18px;top:calc(100% + 12px);width:min(700px,calc(100vw - 48px));display:grid;grid-template-columns:1.25fr 1fr;gap:6px;padding:14px;background:var(--surface);border-radius:20px;box-shadow:0 12px 40px rgba(70,40,40,.14);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:60}
.hn-it.open .hn-dd{opacity:1;visibility:visible;transform:none}
.hn-h{margin:6px 12px 4px;font-size:13px;font-weight:500;color:var(--ink-2)}
.nav .hn-i{display:grid;gap:3px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none}
.nav a.hn-i:hover{background:var(--inset);color:var(--ink)}
.hn-i b{font-size:15px;font-weight:500}
.hn-i span{font-size:13px;line-height:1.45;font-weight:400;color:var(--ink-2)}
.hn-i.off{cursor:default}
.hn-i.off b{color:#9A8E8C}.hn-i.off span{color:#A99D9B}
/* прячущаяся шапка: уезжает при прокрутке вниз, возвращается при прокрутке вверх */
.header,body:has(.hero-v2) .header{transition:transform .38s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease;will-change:transform}
.header.hn-hide{transform:translateY(calc(-100% - env(safe-area-inset-top,0px) - 2px))}
@media (prefers-reduced-motion:reduce){.hn-dd,.hn-trig svg,.header,body:has(.hero-v2) .header{transition:none}}

/* ==== v7-sf ==== */
/* «Sound familiar?» — вариант B (26.10): карточки выпрямляются по одной при прокрутке, боль стихает, под ней встаёт ответ Placy. Классы с префиксом sf- */
.sf-stage{background:#EFE4E1;border-radius:28px;padding:72px 64px}
.sf-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px}
.sf-side{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:20px}
.sf-side h2{margin:0;font-size:clamp(32px,4.4vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.sf-side p{margin:0;font-size:18px;line-height:1.5;color:var(--ink,#1A1A1A);max-width:26ch}
.sf-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sf-pain{background:#fff;border-radius:16px;padding:22px 26px;display:grid;gap:10px;box-shadow:0 1px 2px rgba(64,40,36,.05),0 calc(16px*(var(--lift,0.2) - .2)*1.25) calc(36px*(var(--lift,0.2) - .2)*1.25) -16px rgba(64,40,36,calc(.3*(var(--lift,0.2) - .2)*1.25))}
.sf-when{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink-2,#6B5F5F)}
.sf-when svg{width:15px;height:15px;flex:none}
.sf-pain p{margin:0;font-size:clamp(18px,1.45vw,19px);line-height:1.45;letter-spacing:-.005em;text-wrap:pretty;color:var(--ink,#1A1A1A);transition:color .5s ease .15s}
.sf-ans{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;letter-spacing:-.005em;color:var(--ink,#1A1A1A);transition:max-height .45s cubic-bezier(.2,.8,.2,1),opacity .4s ease .1s,transform .4s ease .1s;max-height:32px;overflow:hidden}
.sf-ans svg{width:20px;height:20px;flex:none;color:var(--action,#1664FF)}
.sf-pain.done p{color:var(--ink-2)}
.sf-js .sf-pain:not(.done) .sf-ans{opacity:0;transform:translateY(4px)}
.sf-end{margin-top:32px;padding-top:28px;border-top:1px solid rgba(64,40,36,.12);display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.sf-end p{margin:0;font-size:clamp(22px,2.1vw,28px);font-weight:500;line-height:1.25;letter-spacing:-.015em;max-width:40ch;text-wrap:balance}
@media (max-width:900px){.sf-stage{padding:40px 18px 24px;border-radius:28px}.sf-top{grid-template-columns:minmax(0,1fr);gap:28px}.sf-side{position:static;gap:14px}.sf-side h2{font-size:32px}.sf-pain{padding:18px}.sf-pain p{font-size:17px}.sf-ans{font-size:16px}.sf-end{padding-top:24px;margin-top:28px}.sf-end p{font-size:21px}.sf-end .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.sf-pain p,.sf-ans{transition:none}}

/* ==== v7-ag ==== */
/* «What agents say» (26.10, вариант 2b): без видимого заголовка; главная фраза Andreas крупно на белой плитке, Elena и Sofia ниже на двух белых плитках. Классы ag- */
.ag-h{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ag-hero{margin:0 auto;max-width:none;background:var(--surface,#fff);border-radius:var(--r-stage,28px);padding:64px max(24px,6vw) 56px;display:grid;justify-items:center;text-align:center;gap:26px}
.ag-mk{display:block;width:30px;height:auto;color:var(--action,#1664FF)}
.ag-hero blockquote{margin:0}
.ag-hero p{margin:0;font-size:clamp(30px,4vw,52px);line-height:1.1;font-weight:500;letter-spacing:-.02em;text-wrap:balance;max-width:18ch;color:var(--ink,#1A1A1A)}
.ag-who{display:grid;gap:2px}
.ag-who b{font-weight:600;font-size:15px}
.ag-who small{font-size:14px;color:var(--ink-2,#6B5F5F)}
.ag-two{max-width:none;margin:var(--grid-gap,18px) auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap,18px)}
.ag-q{margin:0;min-width:0;background:var(--surface,#fff);border-radius:var(--r-tile,22px);padding:32px;display:grid;grid-template-rows:1fr auto;gap:28px}
.ag-q blockquote{margin:0;font-size:18px;line-height:1.55;text-wrap:pretty;color:var(--ink,#1A1A1A)}
.ag-q strong{font-weight:600}
@media (max-width:860px){.ag-hero{padding:44px 22px 40px}.ag-two{grid-template-columns:minmax(0,1fr)}.ag-q{padding:26px 22px}}

/* ==== v7-ft ==== */
/* «Fire your current tools» (26.10): старые тексты, тихая раскладка; синяя линия прорисовывается по инструменту при прокрутке, ответ проявляется следом. Классы ft- */
.ft-list{list-style:none;margin:48px auto 0;padding:0;max-width:960px}
.ft-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}
.ft-row:last-child{border-bottom:1px solid var(--line)}
.ft-old{position:relative;justify-self:start;font-size:clamp(19px,1.9vw,23px);font-weight:400;letter-spacing:-.01em;line-height:1.3;color:var(--ink,#1A1A1A);transition:color .5s ease .2s}
.ft-pen{position:absolute;left:-6px;top:calc(50% - 10px);height:20px;overflow:visible;pointer-events:none;opacity:var(--po,1)}
.ft-pen path{fill:none;stroke:var(--action,#1664FF);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--s,1))}
.ft-new{margin:0;display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5;color:var(--ink,#1A1A1A)}
.ft-new span{opacity:var(--o,1)}
.ft-chk{flex:none;width:20px;height:20px;margin-top:3px;overflow:visible;opacity:var(--co,1)}
.ft-chk path{fill:none;stroke:var(--action,#1664FF);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--c,1))}
.ft-js .ft-row:not(.gone) .ft-old{color:var(--ink,#1A1A1A)}
@media (max-width:860px){.ft-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0}.ft-new{font-size:16px}}
@media (prefers-reduced-motion:reduce){.ft-old{transition:none}}

/* ==== v7-pr ==== */
/* Цена (26.10): ассистент первым, бесплатная CRM — тёмной подложкой под ним; подложка выезжает из-под карточки, когда карточка целиком на экране. Шкала: 84 цена · 30 заголовки частей · 16 текст · 14 приписка; вес 600 только у цены. Классы pr- */
.pr{max-width:960px;margin:0 auto;position:relative}
.pr-card{position:relative;z-index:1;background:var(--surface,#fff);border:1px solid var(--line,#E6DEDE);border-radius:var(--r-tile,22px);padding:44px 44px 40px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"t list" "price list" "cta list";column-gap:56px;box-shadow:var(--shadow-float);will-change:transform}
.pr-t{margin:0;font-size:clamp(24px,2.4vw,30px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--ink,#1A1A1A)}
.pr-price{grid-area:price;margin:22px 0 0;display:flex;align-items:baseline;gap:10px}
.pr-price b{font-size:84px;line-height:.86;font-weight:600;letter-spacing:-.04em}
.pr-price span{font-size:16px;color:var(--ink-2,#6B5F5F)}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.pr-list li{display:flex;gap:12px;font-size:16px;line-height:1.45}
.pr-list svg{flex:none;width:20px;height:20px;margin-top:1px;color:var(--action,#1664FF)}
.pr-cta{grid-area:cta;margin-top:32px;display:grid;justify-items:start;gap:10px}
.pr-cta small{font-size:14px;color:var(--ink-2,#6B5F5F)}
.pr-card .pr-t{grid-area:t}
.pr-card .pr-list{grid-area:list;align-self:center}
.pr-base{margin:-22px 18px 0;background:var(--night,#171210);color:var(--night-ink,#F5EFEC);border-radius:0 0 var(--r-tile,22px) var(--r-tile,22px);padding:48px 44px 30px;display:grid;gap:24px;will-change:transform,opacity}
.pr-base .pr-t{color:var(--night-ink,#F5EFEC)}
.pr-base .pr-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
.pr-base .pr-list svg{color:var(--night-link,#9CB8FF)}
.pr-crm{margin:0;padding-top:20px;border-top:1px solid #3A302D;font-size:16px;line-height:1.5}
.pr-crm b{font-weight:500}
@media (max-width:860px){
 .pr-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "price" "list" "cta";padding:28px 22px}
 .pr-price{margin:16px 0 24px}.pr-price b{font-size:64px}
 .pr-cta{margin-top:28px}
 .pr-base{margin:-22px 10px 0;padding:42px 20px 24px}
 .pr-base .pr-list{grid-template-columns:minmax(0,1fr)}
}

/* ==== v7-pf ==== */
/* Подвал (26.10): без разделительных линий и без плашки — прямо на фоне страницы; логотип и строка крупнее, ссылки 16px тёмным, подписи колонок серым 14px. Новые разделы — колонками справа. Классы pf- */
.pf{padding-block:clamp(8px,1.5vw,24px) clamp(28px,3vw,40px)}

.pf-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px 64px;align-items:start}
.pf-brand{display:grid;gap:20px;justify-items:start}
.pf-brand .logo{display:inline-flex;color:var(--ink,#1A1A1A)}
.pf-brand .logo svg{height:34px;width:auto}
.pf-brand p{margin:0;max-width:24ch;font-size:clamp(18px,1.6vw,22px);line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--ink,#1A1A1A);text-wrap:balance}
.pf-cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,auto);gap:40px 72px}
.pf-cols h2{margin:0 0 8px;font-size:14px;line-height:1.4;font-weight:500;color:var(--ink-2,#6B5F5F)}
.pf-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.pf a{color:var(--ink,#1A1A1A);text-decoration:none;transition:color .15s ease,opacity .15s ease}
.pf-cols a{display:inline-flex;align-items:center;min-height:40px;font-size:16px;line-height:1.4;text-underline-offset:4px;text-decoration-thickness:1px}
.pf-cols a:hover{text-decoration:underline}
.pf a:focus-visible{outline:2px solid var(--link,#1450D6);outline-offset:3px;border-radius:4px}
.pf-bottom{margin-top:clamp(48px,6vw,88px);display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;font-size:14px;color:var(--ink-2,#6B5F5F)}
.pf-legal{display:flex;gap:8px 24px;flex-wrap:wrap}
.pf-soc{list-style:none;margin:0 -12px 0 0;padding:0;display:flex;gap:4px}
.pf-soc a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--ink-2,#6B5F5F)}
.pf-soc a:hover{color:var(--ink,#1A1A1A);background:var(--inset,#F3ECEC)}
.pf-soc svg{width:20px;height:20px}
@media (pointer:coarse){.pf-cols a{min-height:44px}}
@media (max-width:860px){
 .pf-top{grid-template-columns:minmax(0,1fr);gap:40px}
 .pf-cols{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
 .pf-bottom{flex-direction:column-reverse;align-items:flex-start}
 .pf-soc{margin:0 0 0 -12px;gap:0;flex-wrap:wrap}
}

/* ==== v7-mmn ==== */
.mmenu .mm-nav .mm-g{margin:14px 0 2px;font-size:13px;font-weight:500;color:var(--ink-2)}.mmenu .mm-nav .mm-g:first-child{margin-top:0}.mmenu .mm-nav a.mm-a{border-bottom:0;padding-block:8px}.mmenu .mm-nav .mm-soon{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:15px;color:#A99D9B}

/* ==== правки ревью 26.10 — общее ==== */
html body:has(.hero-v2) .band{padding-block:clamp(64px,8vw,96px)}
html .sec-c .t-sub{color:var(--ink)}
html .header .btn-sm{height:40px}
/* подвал на телефоне — цели нажатия 44 */
@media (max-width:640px){html .pf-cols a{min-height:44px}}

/* ==== цель якоря без рамки фокуса ==== */
[id][tabindex="-1"]:focus{outline:none}

/* ==== шапка на телефоне (26.10) ==== */
/* кнопка в шапке не нужна: внизу экрана липкая «Get early access», в первом экране — своя кнопка */
@media (max-width:860px){.header .end .btn-primary{display:none}}
