/* ============================================================
   Template F — story-scroll
   Раскладка: текстовый hero во всю ширину → чередование
   «двухколоночный текстовый разворот ↔ полноширинная лента тайлов».
   Все классы несут префикс kites (подставляется вместе с HTML).
   ============================================================ */

:root{
  --bg:#dfeef3;
  --bg2:#f2e5c9;
  --acc:#d95a42;
  --acc2:#285673;
  --tx:#243746;
  --mu:#647b87;
  --head:"Caprasimo",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --pad:clamp(18px,4vw,56px);
  --wrap:1180px;
  --tap:44px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font-family:var(--body);font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--head);font-weight:700;line-height:1.14;margin:0 0 .5em}
p{margin:0 0 1em}

.kitesskip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--acc);color:var(--bg);padding:12px 20px;min-height:var(--tap)
}
.kitesskip:focus{left:0}

/* ---------- шапка ---------- */
.kitesbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:12px var(--pad);
  background:var(--bg2);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 28%,transparent);
  position:sticky;top:0;z-index:20;
}
.kitesmark{display:flex;align-items:center;gap:10px;color:var(--tx);min-height:var(--tap)}
.kitesmark:hover{text-decoration:none}
.kitesmark__svg{width:34px;height:34px;flex:none}
.kitesmark__t{font-family:var(--head);font-size:19px;line-height:1.1;display:block}
.kitesmark__sub{display:block;font-family:var(--body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.kitesnav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.kitesnav a{
  display:flex;align-items:center;min-height:var(--tap);padding:0 14px;
  color:var(--mu);font-size:15px;border-radius:3px;
}
.kitesnav a:hover{color:var(--tx);background:color-mix(in srgb,var(--acc) 16%,transparent);text-decoration:none}

/* ---------- CTA ---------- */
.kitescta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:12px 26px;
  background:var(--acc);color:var(--bg);
  font-weight:600;font-size:16px;letter-spacing:.01em;
  border-radius:2px;border:1px solid var(--acc);
}
.kitescta:hover{filter:brightness(1.1);text-decoration:none}
.kitescta--mini{padding:10px 18px;font-size:15px}
.kitescta--line{background:transparent;color:var(--tx);border-color:color-mix(in srgb,var(--mu) 55%,transparent)}
.kitescta--big{padding:16px 40px;font-size:18px}
.kiteslink{
  display:inline-flex;align-items:center;min-height:var(--tap);
  color:var(--acc2);border-bottom:1px solid color-mix(in srgb,var(--acc2) 45%,transparent);
}
.kiteslink:hover{text-decoration:none;color:var(--acc)}

.kitesover{
  font-family:var(--body);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc2);margin:0 0 14px;
}
.kitesrow{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 34px}

/* ---------- 01 · HERO: текстовый, во всю ширину ---------- */
.kiteshero{
  padding:clamp(44px,8vw,104px) var(--pad) clamp(34px,5vw,62px);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--acc) 12%,transparent) 0%,transparent 62%),
    var(--bg);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
}
.kiteshero__in{max-width:var(--wrap);margin:0 auto}
.kiteshero h1{
  font-size:clamp(30px,5.1vw,60px);
  max-width:22ch;margin-bottom:.42em;
}
.kiteslead{font-size:clamp(17px,1.5vw,20px);color:var(--mu);max-width:78ch}
.kiteskpi{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:2px solid var(--acc);
}
.kiteskpi li{
  padding:18px 16px 18px 0;font-size:14px;color:var(--mu);
  border-right:1px solid color-mix(in srgb,var(--mu) 25%,transparent);
  padding-left:16px;
}
.kiteskpi li:first-child{padding-left:0}
.kiteskpi li:last-child{border-right:0}
.kiteskpi span{
  display:block;font-family:var(--head);font-size:clamp(22px,2.6vw,32px);
  color:var(--tx);line-height:1.1;margin-bottom:4px;
}

/* ---------- текстовый разворот: слева заголовок, справа абзацы ---------- */
.kitesspread,
.kitessteps,
.kitesaccess,
.kitesauthor{padding:clamp(38px,6vw,84px) var(--pad)}
.kitesspread__in,
.kitessteps__in,
.kitesaccess__in,
.kitesauthor__in{max-width:var(--wrap);margin:0 auto}
.kitesspread__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(24px,4vw,66px)}
.kitesspread--wide .kitesspread__in{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kitesspread__l h2,
.kitessteps__in h2,
.kitesaccess__in h2{font-size:clamp(24px,2.9vw,36px)}
.kitesspread__l{position:sticky;top:86px;align-self:start}
.kitesthesis{
  color:var(--acc2);font-size:16px;line-height:1.5;
  padding-left:16px;border-left:3px solid var(--acc);margin-top:18px;
}
.kitesspread__r p{color:var(--mu)}
.kitesspread__r p:first-child{color:var(--tx)}

.kitesquote{margin:26px 0 0;padding:20px 22px;background:var(--bg2);border-left:3px solid var(--acc2)}
.kitesquote blockquote{margin:0}
.kitesquote p{margin:0 0 10px;color:var(--tx)}
.kitesquote figcaption{font-size:13px;color:var(--mu)}

/* ---------- полноширинная лента тайлов ---------- */
.kitesrail{
  padding:clamp(34px,5vw,66px) 0;
  background:var(--bg2);
  border-top:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--mu) 22%,transparent);
}
.kitesrail__cap{max-width:var(--wrap);margin:0 auto clamp(20px,3vw,34px);padding:0 var(--pad)}
.kitesrail__cap h2{font-size:clamp(22px,2.6vw,32px);max-width:26ch}
.kitesrail__cap p{color:var(--mu);max-width:88ch;margin:0}
.kitesrail__row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  width:100%;                    /* full-bleed: без внешних отступов */
}
.kitestile{background:var(--bg);display:flex;flex-direction:column}
.kitestile img{
  width:100%;height:auto;
  aspect-ratio:1/1;object-fit:cover;
  background:color-mix(in srgb,var(--mu) 18%,transparent);
}
.kitestile__b{padding:16px 18px 20px;flex:1}
.kitestile__b h3{font-size:18px;margin-bottom:.35em}
.kitestile__b p{margin:0;font-size:14px;color:var(--mu)}

/* ---------- лояльность: вертикальные ступени с левой линейкой ---------- */
.kitessteps__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,66px)}
.kitesladder{list-style:none;margin:0;padding:0 0 0 26px;border-left:2px solid color-mix(in srgb,var(--mu) 35%,transparent);counter-reset:st}
.kitesladder li{position:relative;padding:0 0 26px}
.kitesladder li::before{
  counter-increment:st;content:counter(st);
  position:absolute;left:-39px;top:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--acc);color:var(--bg);
  font-family:var(--head);font-size:14px;line-height:26px;text-align:center;
}
.kitesladder h3{font-size:19px;margin-bottom:.3em}
.kitesladder p{margin:0;color:var(--mu);font-size:16px}

/* ---------- касса: таблица ---------- */
.kitestw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
.kitestbl{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.kitestbl caption{text-align:left;font-size:13px;color:var(--mu);padding:0 0 10px}
.kitestbl th,.kitestbl td{padding:12px 14px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--mu) 25%,transparent)}
.kitestbl thead th{
  font-family:var(--body);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);
  border-bottom:2px solid var(--acc);
}
.kitestbl tbody th{font-family:var(--head);font-weight:700;color:var(--tx)}
.kitestbl td{color:var(--mu)}

/* ---------- доступ: 6 H3 ---------- */
.kitesaccess__g{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px);margin-top:clamp(22px,3vw,34px)}
.kitesaccess__g article{padding:20px 22px;background:var(--bg2);border-top:2px solid var(--acc2)}
.kitesaccess__g h3{font-size:18px}
.kitesaccess__g p{margin:0;color:var(--mu);font-size:15px}
.kitesaccess__in>.kitesspread__l{position:static;max-width:70ch}

/* ---------- FAQ: одна колонка, крупные summary ---------- */
.kitesfaq{padding:clamp(38px,6vw,84px) var(--pad);background:var(--bg2)}
.kitesfaq__in{max-width:860px;margin:0 auto}
.kitesfaq h2{font-size:clamp(24px,2.9vw,36px);margin-bottom:.8em}
.kitesq{border-bottom:1px solid color-mix(in srgb,var(--mu) 28%,transparent)}
.kitesq summary{
  display:flex;align-items:center;gap:14px;
  min-height:56px;padding:14px 0;cursor:pointer;
  font-family:var(--head);font-size:clamp(18px,2vw,22px);line-height:1.25;
  list-style:none;
}
.kitesq summary::-webkit-details-marker{display:none}
.kitesq summary::before{
  content:"+";flex:none;width:28px;height:28px;border:1px solid var(--acc);
  color:var(--acc);font-family:var(--body);font-size:18px;line-height:26px;text-align:center;
}
.kitesq[open] summary::before{content:"–"}
.kitesq p{margin:0 0 18px;padding-left:42px;color:var(--mu)}

/* ---------- пред-подвальная полоса ---------- */
.kitesband{
  padding:clamp(34px,5vw,68px) var(--pad);text-align:center;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 16%,transparent));
}
.kitesband__t{font-family:var(--head);font-size:clamp(22px,3vw,34px);line-height:1.2;margin:0 0 .4em}
.kitesband p{color:var(--mu);max-width:70ch;margin-left:auto;margin-right:auto}

/* ---------- author note ---------- */
.kitesauthor{border-top:1px solid color-mix(in srgb,var(--mu) 22%,transparent)}
.kitesauthor__in{max-width:900px}
.kitesauthor h2{font-size:clamp(21px,2.3vw,28px)}
.kitesauthor p{color:var(--mu);font-size:15px}

/* ---------- подвал ---------- */
.kitesfoot{padding:clamp(30px,4vw,54px) var(--pad);background:var(--bg2);border-top:2px solid var(--acc)}
.kitesfoot__grid{max-width:var(--wrap);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.kitesfoot__t{font-family:var(--head);font-size:16px;color:var(--tx);margin-bottom:.4em}
.kitesfoot p{font-size:14px;color:var(--mu)}
.kitesfoot__c{max-width:var(--wrap);margin:26px auto 0;font-size:13px;color:var(--mu)}

/* ---------- мобильная раскладка ---------- */
@media (max-width:1000px){
  .kiteskpi{grid-template-columns:repeat(3,1fr)}
  .kiteskpi li{border-right:0;padding-left:0}
  .kitesrail__row{grid-template-columns:repeat(2,1fr)}
  .kitesfoot__grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:16px}
  /* одна колонка везде: развороты схлопываются, лента становится вертикальной */
  .kitesspread__in,
  .kitesspread--wide .kitesspread__in,
  .kitessteps__in,
  .kitesaccess__g,
  .kiteskpi,
  .kitesrail__row{grid-template-columns:1fr}
  .kitesspread__l{position:static}
  .kitestile img{aspect-ratio:2/1}   /* лента разворачивается в горизонтальные баннеры */
  .kitesnav{width:100%;margin-left:0}
  .kitesnav a{flex:1 1 auto;justify-content:center}
  .kitescta,.kitescta--big{width:100%}
  .kitesrow{flex-direction:column}
  .kitesq p{padding-left:0}
  .kiteshero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.seo-intents{max-width:1180px;margin:24px auto;padding:16px 20px;color:var(--muted,inherit);font-size:.78rem;line-height:1.8}.seo-intents p{margin:0}@media(max-width:620px){.seo-intents{padding:14px}}