/* SEBE · страницы продуктов (/booking, /shop, /resto, /meet, /whatsapp) в стиле главной (27.10.2026).
   Подключается ПОСЛЕ css/home.css и опирается на его базу: переменные, шрифты, .wrap, --s, .sec, .btn, .pi,
   .tags, .more, .cta, .form, .foot, .brand, .nav__links, .burger, .menu, .grain, .lduo.
   Цвет продукта - переменная --c на body. Размеры через --s: до 1440x960 это px, дальше растут вместе с экраном. */

body.pp{--c:#5e4fd1}

/* ================= первый экран ================= */
.phero{position:relative;overflow:hidden;background:
  radial-gradient(58% 54% at 86% 82%,color-mix(in srgb,var(--c) 40%,#ffffff) 0%,transparent 70%),
  radial-gradient(50% 46% at 26% 110%,color-mix(in srgb,var(--c) 24%,#ffffff) 0%,transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--c) 5%,#f2ecdf) 0%,color-mix(in srgb,var(--c) 14%,#f2ecdf) 100%)}
.phero .grain{z-index:0}
.phero>.wrap{position:relative;z-index:1}

.pnav{position:relative;display:flex;align-items:center;gap:calc(36 * var(--s));height:calc(80 * var(--s));border-bottom:1px solid rgba(13,13,12,.12)}
.pnav .brand{margin-right:auto}
.pnav .brand img{width:calc(34 * var(--s));height:calc(34 * var(--s))}
.pnav .nav__links{gap:calc(34 * var(--s));font-size:calc(16 * var(--s))}
.pnav__r{display:flex;align-items:center;gap:calc(20 * var(--s))}
.pnav__login{font-size:calc(15.5 * var(--s));font-weight:500;opacity:.8;white-space:nowrap}
.pnav__login:hover{opacity:1}
.pbtn{display:inline-flex;align-items:center;gap:8px;height:calc(44 * var(--s));padding:0 calc(18 * var(--s));border:1.4px solid var(--ink);border-radius:calc(9 * var(--s));
  font-size:calc(15 * var(--s));font-weight:500;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.pbtn:hover{background:var(--ink);color:#ffffff}
.pnav .menu{top:100%;left:calc(-1 * var(--pad));right:calc(-1 * var(--pad))}
.pnav .menu a span{color:var(--mut)}

.phero__in{display:grid;gap:calc(28 * var(--s));padding-top:calc(48 * var(--s))}
.phero__txt{padding-bottom:calc(8 * var(--s))}
.phero .lduo{margin-bottom:calc(18 * var(--s))}
.kick{display:inline-flex;align-items:center;gap:10px;min-height:calc(34 * var(--s));padding:4px calc(14 * var(--s)) 4px 5px;border-radius:999px;line-height:1.25;
  background:rgba(255,255,255,.72);border:1px solid color-mix(in srgb,var(--c) 22%,transparent);font-size:calc(13.5 * var(--s));font-weight:500;color:var(--mut2)}
.kick .pi{flex:none;width:calc(24 * var(--s));height:calc(24 * var(--s));border-radius:7px;background:color-mix(in srgb,var(--c) 14%,#ffffff)}
.kick .pi svg{width:calc(14 * var(--s));height:calc(14 * var(--s))}
.phero h1{margin:calc(22 * var(--s)) 0 0;font:500 clamp(32px,4.2vw,calc(54 * var(--s)))/1.04 var(--f-d);letter-spacing:-.03em;text-wrap:balance}
.phero h1 em{font-style:normal;color:color-mix(in srgb,var(--c) 86%,#000000)}
.lead{margin:calc(20 * var(--s)) 0 0;max-width:56ch;font-size:calc(17.5 * var(--s));line-height:1.5;color:var(--mut2)}
.lead b{color:var(--ink);font-weight:600}
.prow{display:flex;flex-wrap:wrap;gap:calc(12 * var(--s));margin-top:calc(28 * var(--s))}
.pb{display:inline-flex;align-items:center;gap:.55em;height:calc(54 * var(--s));padding:0 calc(24 * var(--s));border:1.4px solid var(--ink);border-radius:calc(10 * var(--s));
  font-size:calc(16 * var(--s));font-weight:500;white-space:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.pb svg{width:1.1em;height:1.1em}
.pb:hover{background:var(--ink);color:#ffffff}
.pb--fill{background:var(--ink);color:#ffffff}
.pb--fill:hover{background:var(--c);border-color:var(--c)}
.pb--sm{height:calc(44 * var(--s));padding:0 calc(18 * var(--s));font-size:calc(15 * var(--s))}
.note{margin:calc(16 * var(--s)) 0 0;font-size:calc(14 * var(--s));color:var(--mut)}
.note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.phero__win{position:relative;height:calc(230 * var(--s));margin:0 calc(-1 * var(--pad))} /* телефон: полоса со скриншотом внизу панели */
.phero__win img{position:absolute;left:var(--pad);top:0;width:130%;max-width:none;height:auto;border-radius:calc(14 * var(--s)) 0 0 0;
  box-shadow:0 24px 60px -20px rgba(13,13,12,.35),0 0 0 1px rgba(13,13,12,.08)}

/* ================= цифры и для кого ================= */
.pstats{padding-top:calc(36 * var(--s))}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(18 * var(--s)) calc(20 * var(--s))}
.stats div{display:grid;gap:6px;padding-left:calc(16 * var(--s));border-left:1.5px solid color-mix(in srgb,var(--c) 45%,#ffffff)}
.stats b{font:500 calc(30 * var(--s))/1 var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats span{font-size:calc(14 * var(--s));line-height:1.35;color:var(--mut)}
.who{margin-top:calc(26 * var(--s))}

/* ================= заголовки разделов ================= */
.shead{margin-bottom:calc(30 * var(--s))}
.shead .kk{display:inline-block;margin-bottom:calc(12 * var(--s));font-size:calc(13 * var(--s));font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 80%,#000000)}
.shead h2{margin:0;max-width:24ch;font:500 clamp(28px,3.6vw,calc(44 * var(--s)))/1.08 var(--f-d);letter-spacing:-.025em;text-wrap:balance}
.shead h2 em{font-style:normal;color:color-mix(in srgb,var(--c) 86%,#000000)}
.shead p{margin:calc(14 * var(--s)) 0 0;max-width:64ch;font-size:calc(16 * var(--s));line-height:1.5;color:var(--mut2)}

/* ================= возможности ================= */
.feats{display:grid;gap:calc(12 * var(--s))}
.feat{display:grid;align-content:start;gap:6px;padding:calc(22 * var(--s));border-radius:calc(20 * var(--s));
  background:color-mix(in srgb,var(--c) 10%,#ffffff);border:1px solid color-mix(in srgb,var(--c) 18%,#ffffff)}
.feat .pi{width:calc(40 * var(--s));height:calc(40 * var(--s));border-radius:calc(11 * var(--s));background:#ffffff;margin-bottom:calc(10 * var(--s));box-shadow:0 1px 2px color-mix(in srgb,var(--c) 22%,transparent)}
.feat .pi svg{width:calc(20 * var(--s));height:calc(20 * var(--s));stroke-width:2}
.feat b{font-size:calc(16.5 * var(--s));font-weight:600;letter-spacing:-.01em}
.feat p{margin:0;font-size:calc(14.5 * var(--s));line-height:1.5;color:var(--mut2)}

/* ================= особый блок (Себи, общий чат, кухня) ================= */
.spec{display:grid;gap:calc(32 * var(--s));align-items:center}
.spec .shead{margin-bottom:calc(22 * var(--s))}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:calc(12 * var(--s))}
.checks li{display:flex;gap:calc(12 * var(--s));align-items:flex-start;font-size:calc(15.5 * var(--s));line-height:1.45}
.checks li b{font-weight:600}
.ck{flex:none;width:calc(26 * var(--s));height:calc(26 * var(--s));margin-top:1px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,#ffffff);color:color-mix(in srgb,var(--c) 85%,#000000)}
.ck svg{width:calc(15 * var(--s));height:calc(15 * var(--s));stroke-width:2.2}

.chatm{background:#ffffff;border:1px solid var(--line);border-radius:calc(22 * var(--s));padding:calc(18 * var(--s));box-shadow:0 24px 60px -28px rgba(13,13,12,.28)}
.chatm__h{display:flex;align-items:center;gap:10px;padding-bottom:calc(14 * var(--s));margin-bottom:calc(14 * var(--s));border-bottom:1px solid var(--line)}
.chatm__h i{position:relative;width:calc(36 * var(--s));height:calc(36 * var(--s));border-radius:50%;background:color-mix(in srgb,var(--c) 24%,#ffffff)}
.chatm__h i::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#1fa855;border:2px solid #ffffff}
.chatm__h b{font-size:calc(15 * var(--s));font-weight:600}
.chatm__h small{margin-left:auto;font-size:calc(12.5 * var(--s));color:var(--mut)}
.chatm__m{max-width:84%;margin:0 0 calc(8 * var(--s));padding:calc(10 * var(--s)) calc(14 * var(--s));border-radius:16px;font-size:calc(14.5 * var(--s));line-height:1.45;background:var(--sf2)}
.chatm__m--in{border-bottom-left-radius:6px}
.chatm__m--out{margin-left:auto;background:color-mix(in srgb,var(--c) 15%,#ffffff);border-bottom-right-radius:6px}
.chatm__ok{display:flex;align-items:center;gap:8px;margin-top:calc(12 * var(--s));font-size:calc(13 * var(--s));color:var(--teal-t)}
.chatm__ok svg{width:16px;height:16px;stroke-width:2.2;flex:none}

.swin{margin:0}
.swin__w{position:relative;overflow:hidden;height:calc(320 * var(--s));border-radius:calc(22 * var(--s));padding:calc(28 * var(--s)) 0 0 calc(28 * var(--s));
  background:color-mix(in srgb,var(--c) 10%,#ffffff);border:1px solid color-mix(in srgb,var(--c) 18%,#ffffff)}
.swin__w img{display:block;width:112%;max-width:none;height:auto;border-radius:calc(12 * var(--s)) 0 0 0;box-shadow:0 14px 40px -12px rgba(13,13,12,.28),0 0 0 1px rgba(13,13,12,.07)}
.swin figcaption{margin-top:calc(12 * var(--s));font-size:calc(13.5 * var(--s));color:var(--mut)}

/* ================= WABA (только /whatsapp) ================= */
.waba{display:grid;gap:calc(14 * var(--s));align-items:stretch}
.waba__c{padding:calc(26 * var(--s));border-radius:calc(22 * var(--s));background:#ffffff;border:1px solid var(--line)}
.waba__c h3{display:flex;align-items:center;gap:12px;margin:0 0 calc(16 * var(--s));font:500 calc(19 * var(--s))/1.25 var(--f-d);letter-spacing:-.015em}
.waba__c h3 .pi{width:calc(40 * var(--s));height:calc(40 * var(--s));background:color-mix(in srgb,var(--c) 14%,#ffffff)}
.waba__sync{display:grid;place-items:center;align-content:center;gap:8px;text-align:center;font-size:calc(13.5 * var(--s));font-weight:600;line-height:1.25;color:var(--mut2)}
.waba__sync span{width:calc(48 * var(--s));height:calc(48 * var(--s));border-radius:50%;background:color-mix(in srgb,var(--c) 16%,#ffffff);display:grid;place-items:center;color:color-mix(in srgb,var(--c) 85%,#000000)}
.waba__sync svg{width:calc(22 * var(--s));height:calc(22 * var(--s))}
.cmp{margin-top:calc(24 * var(--s));overflow-x:auto;border:1px solid var(--line);border-radius:calc(18 * var(--s));background:#ffffff}
.cmp table{width:100%;min-width:620px;border-collapse:collapse;font-size:calc(14.5 * var(--s))}
.cmp th,.cmp td{padding:calc(12 * var(--s)) calc(16 * var(--s));text-align:left;border-bottom:1px solid var(--line)}
.cmp th{font-size:calc(12.5 * var(--s));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.cmp td:first-child{font-weight:500}
.cmp .us{background:color-mix(in srgb,var(--c) 10%,#ffffff)}
.cmp td.us{font-weight:600}
.cmp .y{color:#0e7367}
.cmp .n{color:#b8412a}
.cmp tr:last-child td{border-bottom:0}

/* ================= тарифы ================= */
.plans{display:grid;gap:calc(14 * var(--s))}
.plans--1{max-width:560px}
.plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:calc(26 * var(--s));border-radius:calc(22 * var(--s));background:#ffffff;border:1px solid var(--line)}
.plan--pop{background:color-mix(in srgb,var(--c) 11%,#ffffff);border-color:color-mix(in srgb,var(--c) 30%,#ffffff)}
.plan__pop{position:absolute;top:calc(20 * var(--s));right:calc(20 * var(--s));display:inline-flex;align-items:center;height:calc(26 * var(--s));padding:0 10px;border-radius:999px;background:var(--ink);color:#ffffff;font-size:calc(12 * var(--s));font-weight:600;white-space:nowrap}
.plan__k{font-size:calc(12.5 * var(--s));font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.plan h3{margin:2px 0 0;font:500 calc(24 * var(--s))/1.15 var(--f-d);letter-spacing:-.02em}
.plan__for{font-size:calc(14.5 * var(--s));line-height:1.45;color:var(--mut2)}
.plan__amt{margin-top:calc(16 * var(--s));font:500 calc(34 * var(--s))/1 var(--f-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plan__amt small{margin-left:6px;font:500 calc(14 * var(--s))/1 var(--f-t);letter-spacing:0;color:var(--mut)}
.plan__note{font-size:calc(13.5 * var(--s));line-height:1.45;color:var(--mut)}
.plan .more{align-self:flex-start;margin-top:calc(18 * var(--s))}
.plan .more:hover{background:var(--c)}
.inc{display:flex;flex-wrap:wrap;gap:calc(8 * var(--s));margin-top:calc(18 * var(--s))}
.inc span{display:inline-flex;align-items:center;gap:6px;height:calc(32 * var(--s));padding:0 calc(12 * var(--s)) 0 8px;border-radius:999px;background:#ffffff;border:1px solid var(--line2);font-size:calc(13.5 * var(--s))}
.inc svg{width:16px;height:16px;stroke-width:2.2;color:var(--teal-t)}
.pmeta{margin:calc(18 * var(--s)) 0 0;max-width:80ch;font-size:calc(14 * var(--s));line-height:1.55;color:var(--mut2)}
.pmeta b{color:var(--ink);font-weight:600}

/* ================= соседний продукт ================= */
.pair{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(16 * var(--s)) calc(24 * var(--s));padding:calc(26 * var(--s));border-radius:calc(22 * var(--s));
  background:color-mix(in srgb,var(--c) 11%,#ffffff);border:1px solid color-mix(in srgb,var(--c) 20%,#ffffff)}
.pair__t{display:flex;gap:calc(16 * var(--s));align-items:flex-start;min-width:0;flex:1 1 420px}
.pair .pi{background:#ffffff;box-shadow:0 1px 2px color-mix(in srgb,var(--c) 22%,transparent)}
.pair b{display:block;font:500 calc(20 * var(--s))/1.2 var(--f-d);letter-spacing:-.01em}
.pair p{margin:6px 0 0;max-width:60ch;font-size:calc(15 * var(--s));line-height:1.5;color:var(--mut2)}
.pair .more:hover{background:var(--c)}

/* ================= вопросы ================= */
.faq{border-top:1px solid var(--line2)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(18 * var(--s)) 0;font-size:calc(17 * var(--s));font-weight:600;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:calc(30 * var(--s));height:calc(30 * var(--s));border-radius:50%;border:1.4px solid var(--ink);
  background:no-repeat center/55% url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d0c' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0;padding:0 calc(46 * var(--s)) calc(20 * var(--s)) 0;max-width:76ch;font-size:calc(15.5 * var(--s));line-height:1.55;color:var(--mut2)}

/* ================= заявка и подвал ================= */
.pp .cta{margin-top:0}
.pp .cta h2 em{font-style:normal;color:color-mix(in srgb,var(--c) 86%,#000000)}
.ways{display:flex;flex-wrap:wrap;gap:calc(10 * var(--s));margin-top:calc(20 * var(--s))}
.form textarea{width:100%;min-width:0;min-height:calc(96 * var(--s));padding:calc(12 * var(--s)) calc(16 * var(--s));border:1px solid var(--line2);border-radius:calc(12 * var(--s));background:var(--bg);color:var(--ink);font:inherit;font-size:calc(16 * var(--s));resize:vertical}
.form textarea::placeholder{color:var(--hint)}
.form textarea:focus{outline:none;border-color:var(--ink)}
.pp .foot{margin-top:calc(80 * var(--s))}

@media (prefers-reduced-motion:no-preference){
  .pb,.pbtn{transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .15s ease}
  .pb:active,.pbtn:active{transform:scale(.98)}
}

@media (min-width:600px){
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:760px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .plans--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .phero__win{height:calc(300 * var(--s))}
}
@media (min-width:900px){
  .feats{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(16 * var(--s))}
  .feat{padding:calc(26 * var(--s))}
  .waba{grid-template-columns:minmax(0,1fr) calc(120 * var(--s)) minmax(0,1fr)}
}
@media (min-width:1001px){
  .phero__in{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:calc(40 * var(--s));padding-top:calc(64 * var(--s))}
  .phero__txt{padding-bottom:calc(64 * var(--s))}
  .phero__win{height:auto;min-height:calc(440 * var(--s));margin:0}
  .phero__win img{left:0;top:calc(40 * var(--s));width:auto;height:calc(100% - 40 * var(--s))} /* во всю высоту панели, правый край уходит за экран */
  .spec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(56 * var(--s))}
}
@media (max-width:1000px){
  .pnav{height:64px;gap:10px}
  .pnav .pnav__login{display:none}
  .pnav .htel{font-size:14px}
  .pnav .pbtn{height:40px;padding:0 12px;border-radius:10px;font-size:14px}
}

/* узкий телефон: номер в шапке важнее кнопки - кнопка «Начать бесплатно» есть в первом экране */
@media (max-width:440px){.pnav .pbtn{display:none}}