/* === KRUZHKI LANDING — scoped under .kruzhki-lp (injected into template 1 custom-top) === */
/* Site provides: Open Sans font, UIkit .uk-container, box-sizing reset. Do NOT redefine those. */

.kruzhki-lp{
  --blue:#1e87f0; --blue-d:#0f7ae5; --navy:#0a2e4d;
  --grad:linear-gradient(180deg,#e8f4fd 0%,#fff 100%);
  --card:#f8fbff; --edge:#e8f0f8; --ink:#333; --muted:#667; --line:#e6eef6;
  color:var(--ink);
}
.kruzhki-lp *{box-sizing:border-box}
.kruzhki-lp img,.kruzhki-lp svg{max-width:100%}
.kruzhki-lp .ic{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* shared */
.kruzhki-lp .eyebrow{display:inline-block;max-width:100%;font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);background:#eaf4fe;padding:6px 14px;border-radius:14px;
  margin:0 0 16px;line-height:1.5}
.kruzhki-lp .sec-title{text-align:center;font-size:28px;font-weight:800;color:var(--navy);margin:0 0 8px;
  letter-spacing:-.01em;line-height:1.2}
.kruzhki-lp .sec-lead{text-align:center;font-size:15px;color:var(--muted);max-width:620px;margin:0 auto 40px;
  line-height:1.5}

/* buttons matched to live /ruchki/: primary orange #f97316, radius 10, height 44 */
.kruzhki-lp .kr-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 32px;
  border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;transition:.2s;
  border:2px solid transparent;cursor:pointer;white-space:nowrap}
.kruzhki-lp .kr-btn-primary{background:#f97316;color:#fff;border-color:#f97316}
.kruzhki-lp .kr-btn-primary:hover{background:#ea580c;border-color:#ea580c;color:#fff;text-decoration:none}
.kruzhki-lp .kr-btn-ghost{background:transparent;color:var(--blue);border:2px solid #cfe0f2}
.kruzhki-lp .kr-btn-ghost:hover{border-color:var(--blue);background:rgba(30,135,240,.06);color:var(--blue);
  text-decoration:none}
.kruzhki-lp .kr-btn:active{transform:translateY(1px)}

@media (max-width:960px){
  .kruzhki-lp .sec-title{font-size:24px}
}

/* HERO */
.kruzhki-lp .kr-hero{background:var(--grad);padding:40px 0;overflow-x:clip}
.kruzhki-lp .kr-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.kruzhki-lp .kr-hero-inner>*{min-width:0}
.kruzhki-lp .kr-hero-text{padding-bottom:40px}
.kruzhki-lp .kr-h1{font-size:44px;line-height:1.1;font-weight:800;color:var(--navy);margin:0 0 14px;
  letter-spacing:-.01em}
.kruzhki-lp .kr-sub{font-size:17px;color:#555;margin:0 0 32px;max-width:480px}
.kruzhki-lp .kr-sub span{display:inline-block}
.kruzhki-lp .kr-hero-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:stretch}
.kruzhki-lp .kr-hero-cta .msg-buttons{display:flex}
/* кегль задаём явно: без него msgButtons отдаёт свои 13px, и главная кнопка
   выглядит мельче второстепенной, стоящей рядом */
.kruzhki-lp .kr-hero-cta .msg-btn-zvk{width:100%;height:52px;border-radius:10px;font-size:16px}
.kruzhki-lp .kr-hero-cta .kr-btn-ghost{height:52px;font-size:16px;padding:0 16px}
.kruzhki-lp .kr-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px}
.kruzhki-lp .kr-stat{background:#fff;border-radius:12px;padding:10px 18px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.kruzhki-lp .kr-stat .v{font-size:18px;font-weight:700;color:var(--blue)}
.kruzhki-lp .kr-stat .l{font-size:11px;color:#6b7280}
.kruzhki-lp .kr-stat--price{background:#eaf4fe;box-shadow:none}
.kruzhki-lp .kr-stat--price .v{color:var(--navy)}
.kruzhki-lp .kr-stat--price .l{color:#5a6b7d}
.kruzhki-lp .kr-hero-mugs{display:flex;align-items:center;justify-content:center;min-height:340px}
.kruzhki-lp .kr-hero-mugs img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 16px 26px rgba(10,46,77,.14))}

/* PRICING */
.kruzhki-lp .kr-pricing{padding:64px 0;background:#fff;overflow-x:clip}
/* .sec-lead carried margin-bottom:40px; removed subtitle here (dupe of the price
   stat/FAQ), so the title needs its own gap before the table or it presses flush. */
.kruzhki-lp .kr-pricing-title{margin-bottom:32px}
/* table styling mirrors /shoppery (shoppers-landing.css) so both product pages read
   as one price component: uppercase muted header, best-row full highlight + blue price,
   larger tabular price cell, wrap capped at 1000px and centred. */
.kruzhki-lp .pricing-wrap{display:grid;grid-template-columns:.82fr 1.18fr;gap:28px;align-items:stretch;max-width:1000px;margin:0 auto}
.kruzhki-lp .pricing-table{width:100%;height:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--edge);border-radius:16px;overflow:hidden}
.kruzhki-lp .pricing-table th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);background:#eef5fb;padding:14px 22px}
.kruzhki-lp .pricing-table th:last-child{text-align:right}
.kruzhki-lp .pricing-table td{padding:15px 22px;border-top:1px solid var(--line);transition:background .18s ease}
.kruzhki-lp .pricing-table tbody tr:hover td{background:#f2f8ff}
.kruzhki-lp .pt-qty{font-size:15px;color:var(--navy);font-weight:600;white-space:nowrap}
.kruzhki-lp .pt-price{text-align:right;font-size:19px;font-weight:800;color:var(--navy);white-space:nowrap;font-variant-numeric:tabular-nums}
/* best row: highlight through structure, not a foreign green pill */
.kruzhki-lp .pt-best td{background:#eaf4fe}
.kruzhki-lp .pt-best:hover td{background:#e3f1fd}
.kruzhki-lp .pt-best td:first-child{box-shadow:inset 3px 0 0 var(--blue)}
.kruzhki-lp .pt-best .pt-price{color:var(--blue)}
.kruzhki-lp .pt-note{display:block;margin-top:3px;font-size:11.5px;font-weight:600;color:var(--blue);letter-spacing:.01em}

@media (max-width:960px){
  /* на мобильном картинка идёт первой, как на /shoppery: товар представляет себя
     сам, до того как читатель дойдёт до заголовка и цены */
  .kruzhki-lp .kr-hero-inner{grid-template-columns:1fr;gap:24px}
  .kruzhki-lp .kr-hero-mugs{order:-1}
  .kruzhki-lp .kr-hero-text{padding-bottom:0}
  .kruzhki-lp .kr-h1{font-size:32px}
  .kruzhki-lp .kr-hero-cta .msg-btn-zvk,.kruzhki-lp .kr-hero-cta .kr-btn-ghost{width:100%}
  .kruzhki-lp .kr-hero-cta .msg-btn:not(.msg-btn-zvk){display:none!important}
  .kruzhki-lp .pricing-wrap{grid-template-columns:1fr;gap:20px}
}

/* FIX: equal-width hero buttons.
   .kr-hero-cta{flex-basis:0} equal-split does not hold in practice: .msg-buttons
   is itself a nested flex container, and its automatic min-size wins the split
   against .kr-btn-ghost's own min-content — verified live (231px vs 267px,
   min-width:0 on the flex children had no effect). Grid with minmax(0,1fr)
   tracks forces the two buttons to true equal width regardless of content.
   (grid now lives directly on the base .kr-hero-cta rule above — this used
   to be a separate override; merged 2026-07-22, only the mobile override
   below still needs to live here.) */
@media (max-width:960px){
  .kruzhki-lp .kr-hero-cta{grid-template-columns:1fr}
}

/* FIX: pricing table and dark CTA card same height, flush in one row.
   cta.pricing.dark (chunk 211) ships a sitewide default margin:48px 0 on
   .cta-block-article--dark (meant for standalone use in article content).
   Inside pricing-wrap's stretch grid that margin is preserved, so the card's
   content box stays 96px shorter than the table instead of filling the row.
   Zeroing the margin only in this context lets it stretch flush, matching
   the table exactly — verified live (437px == 437px, tops/bottoms aligned). */
.kruzhki-lp .pricing-wrap>.cta-block-article--dark{margin:0}

/* USE CASES — фото+текст, без карточной обводки */
.kruzhki-lp .kr-uc{padding:64px 0;background:var(--card)}
.kruzhki-lp .uc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.kruzhki-lp .uc{display:block;text-decoration:none;color:inherit}
.kruzhki-lp .uc img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;
  border-radius:12px;transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.kruzhki-lp .uc h3{font-size:16px;font-weight:700;color:var(--navy);margin:14px 0 6px}
.kruzhki-lp .uc p{font-size:14px;color:var(--muted);margin:0;line-height:1.5}
@media (hover:hover){
  .kruzhki-lp .uc:hover img{transform:translateY(-6px)}
  .kruzhki-lp .uc:hover h3{color:var(--blue)}
}
/* touch has no hover: give taps their own (smaller) press feedback instead of nothing */
.kruzhki-lp .uc:active img{transform:translateY(-3px)}

/* FORMAT — фото с пунктирным полем печати */
.kruzhki-lp .kr-feat{padding:64px 0;background:#fff}
.kruzhki-lp .feat-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.kruzhki-lp .feat-img{position:relative}
.kruzhki-lp .feat-img img{display:block;width:100%;height:auto;border-radius:12px}
/* Контур поля печати. Не прямоугольник: повторяет силуэт бочка кружки, чтобы читалось
   «печатаем по всей боковой поверхности, кроме зоны у ручки». Верх и низ провисают —
   это ближняя половина эллипса ободка и донышка, как их видно с фронта.
   Координаты пути — доли кадра kruzhka-front.webp (1200×1200, снят строго фронтально),
   выверены наложением на реальный кадр. Правый край упирается в стык с ручкой.
   ⚠️ Меняешь кадр — пересчитывай путь заново, наложением, а не на глаз. */
.kruzhki-lp .kr-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kruzhki-lp .kr-field path{fill:none;stroke:var(--blue);stroke-width:2;
  stroke-dasharray:7 5;stroke-linejoin:round;opacity:.75}
.kruzhki-lp .feat-list{list-style:none;padding:0;margin:0}
.kruzhki-lp .feat-list li{position:relative;padding-left:22px;margin-bottom:16px;font-size:15px;
  color:#555;line-height:1.55}
.kruzhki-lp .feat-list li:before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-radius:50%;background:var(--blue)}
.kruzhki-lp .feat-list b{color:var(--navy)}

/* PRINT — две колонки через волосяную линию */
.kruzhki-lp .kr-print{padding:64px 0;background:var(--card)}
.kruzhki-lp .print-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;position:relative}
.kruzhki-lp .print-cols:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:var(--line)}
.kruzhki-lp .print-col h3{font-size:18px;font-weight:700;color:var(--navy);margin:0 0 10px}
.kruzhki-lp .print-col p{font-size:15px;color:#555;line-height:1.6;margin:0 0 12px}
.kruzhki-lp .print-macro{margin:40px 0 0;text-align:center}
.kruzhki-lp .print-macro img{display:block;width:100%;max-width:820px;height:auto;margin:0 auto;
  border-radius:12px}
.kruzhki-lp .print-macro figcaption{font-size:13px;color:var(--muted);margin-top:12px}

@media (max-width:960px){
  .kruzhki-lp .uc-grid{grid-template-columns:1fr 1fr;gap:18px}
  .kruzhki-lp .feat-grid{grid-template-columns:1fr;gap:28px}
  .kruzhki-lp .print-cols{grid-template-columns:1fr;gap:0}
  .kruzhki-lp .print-cols:before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  .kruzhki-lp .print-col:first-child{padding-bottom:28px}
  .kruzhki-lp .print-col:last-child{padding-top:28px}
}
@media (max-width:560px){
  .kruzhki-lp .uc-grid{grid-template-columns:1fr}
}

/* CARE — посудомойка.
   Was a 1.15fr/.85fr two-column split — the 5th two-column section in a row
   (hero, pricing, feat, print, care). Rebuilt as flowing single-column prose
   with the three wear-factors as a horizontal divider-topped strip instead,
   so the page doesn't run three near-identical two-column sections back to
   back (feat → print → care). Факторы износа с тех пор переехали с полосы на
   линейках в панель-карточку — см. комментарий у .care-list ниже. */
/* ⚠️ Вся секция живёт на ОДНОЙ оси шириной --care-measure и центрируется под
   отцентрованным заголовком. Раньше проза и полоса факторов шли 760 px от левого
   края, а два нижних абзаца с линейками — на всю ширину контейнера: три разные оси
   в одной секции, заголовок не совпадал ни с одной. Новый блок сюда добавлять
   только с этой же парой max-width + margin-inline. */
.kruzhki-lp .kr-care{padding:64px 0;background:#fff;--care-measure:760px}
.kruzhki-lp .care-grid{display:block;max-width:var(--care-measure);margin-inline:auto}
.kruzhki-lp .care-main{max-width:100%}
.kruzhki-lp .care-lead{font-size:17px;color:var(--navy);line-height:1.6;margin:0 0 16px}
.kruzhki-lp .care-lead b{color:var(--blue)}
.kruzhki-lp .care-grid p{font-size:15px;color:#555;line-height:1.6;margin:0 0 12px}
/* Три фактора износа — панель-карточка, а не три узкие колонки с линейками.
   Было: flex 1 1 220px + border-top над полосой + border-left у каждого пункта.
   На оси 760 px колонка выходила ~220 px, текст рвался на 5-6 строк («Порошки
   и жёсткие / губки снимают / глянец вместе / с картинкой»), а три вертикальные
   линейки разной высоты торчали рваным частоколом. Стало: одна карточка в общей
   идиоме страницы (--card + --edge + radius 14, как .art-card) и три строки во
   всю меру — переносов почти нет, ни одной лишней линии. */
.kruzhki-lp .care-list{list-style:none;display:grid;gap:14px;margin:28px 0 0;
  padding:22px 24px;background:var(--card);border:1px solid var(--edge);border-radius:14px}
.kruzhki-lp .care-list li{margin:0;padding:0;border:0;font-size:15px;color:#555;line-height:1.6}
.kruzhki-lp .care-list b{color:var(--navy)}
/* border-top у .care-foot убран: вместе с линией над .care-list секция набирала
   четыре горизонтальные линейки подряд и читалась как таблица. Абзацы отделяет
   воздух, а роль разделителя берёт на себя карточка факторов. */
.kruzhki-lp .care-foot{font-size:15px;color:#555;line-height:1.6;
  max-width:var(--care-measure);margin:16px auto 0}
.kruzhki-lp .care-grid + .care-foot{margin-top:24px}
.kruzhki-lp .care-foot b{color:var(--navy)}

/* LIMITS — что не умеем.
   h3:before content:"—" убран: висящее тире перед каждым заголовком читалось как
   случайная чёрточка, а padding-left 18 px под него ужимал и без того узкую меру.
   Шесть пунктов теперь белые карточки на --card фоне — зеркало .art-card с белых
   секций, радиус тот же 14 px. Ровно шесть ячеек на шесть пунктов, пустых нет. */
.kruzhki-lp .kr-limits{padding:64px 0;background:var(--card)}
.kruzhki-lp .limits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kruzhki-lp .limit{background:#fff;border:1px solid var(--edge);border-radius:14px;padding:20px 22px}
.kruzhki-lp .limit h3{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 8px;line-height:1.3}
.kruzhki-lp .limit p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.kruzhki-lp .limits-foot{font-size:15px;color:#555;line-height:1.6;margin:16px 0 0;
  background:#fff;border:1px solid var(--edge);border-radius:14px;padding:18px 22px}
/* ссылка отдельной строкой: инлайном она начиналась в конце абзаца и сама рвалась
   переносом («Скачать шаблон, / PNG 300 dpi») — разорванная подпись у ссылки-действия */
.kruzhki-lp .limits-foot a{display:block;margin-top:8px;color:var(--blue);font-weight:600}

@media (max-width:960px){
  .kruzhki-lp .limits-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .kruzhki-lp .limits-grid{grid-template-columns:1fr}
  .kruzhki-lp .care-list{padding:18px}
  .kruzhki-lp .limit{padding:18px}
  .kruzhki-lp .limits-foot{padding:16px 18px}
}

/* WORKS — асимметричный коллаж.
   background flipped to #fff (was --card): removing .kr-legal took the white
   section that used to sit between --card .kr-limits and --card .kr-works,
   so the two cards landed side by side. Flipping .kr-works to white restores
   the alternation — and since .kr-steps right after it was pinned to #fff
   too (pre-existing, unrelated to this edit — it broke the rhythm against
   .kr-seo below, also #fff), .kr-steps flips to --card here as well so the
   whole white/card cadence from .kr-limits through .kr-articles is unbroken:
   card(limits) white(works) card(steps) white(seo) card(faq) white(articles). */
.kruzhki-lp .kr-works{padding:64px 0;background:#fff}
.kruzhki-lp .works-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto;
  gap:20px}
.kruzhki-lp .wk{position:relative;display:block;margin:0;border-radius:12px;overflow:hidden;cursor:zoom-in}
.kruzhki-lp .wk--lead{grid-row:span 2}
.kruzhki-lp .wk img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
/* ⚠️ правым ячейкам нужен явный aspect-ratio: иначе они задают высоту рядов
   и под lead-кадром зияет пустота (height:100% в indefinite row не работает) */
.kruzhki-lp .works-grid>.wk:not(.wk--lead){aspect-ratio:1.24}
/* было <figure><figcaption>: невалидно внутри <a> (лайтбокс), перенесено на span.wk-cap, свойства те же */
.kruzhki-lp .wk .wk-cap{position:absolute;left:0;right:0;bottom:0;padding:24px 16px 12px;
  font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,rgba(10,46,77,0) 0%,rgba(10,46,77,.72) 100%)}
.kruzhki-lp .wk:focus-visible{outline:2px solid #0f6ecd;outline-offset:2px}
@media (hover:hover){.kruzhki-lp .wk:hover img{transform:scale(1.04)}}
/* loupe = site-standard .hov-edge__loupe (base styles + stroke-draw come from hover-system.css);
   here we only fire it on .wk:hover instead of .hov-edge:hover — same pattern as shoppers-landing.css */
.kruzhki-lp .wk:hover .hov-edge__loupe,
.kruzhki-lp .wk:focus-visible .hov-edge__loupe{opacity:.62}
.kruzhki-lp .wk:hover .hov-edge__loupe-handle,.kruzhki-lp .wk:focus-visible .hov-edge__loupe-handle,
.kruzhki-lp .wk:hover .hov-edge__loupe-lens,.kruzhki-lp .wk:focus-visible .hov-edge__loupe-lens,
.kruzhki-lp .wk:hover .hov-edge__loupe-plus-h,.kruzhki-lp .wk:focus-visible .hov-edge__loupe-plus-h,
.kruzhki-lp .wk:hover .hov-edge__loupe-plus-v,.kruzhki-lp .wk:focus-visible .hov-edge__loupe-plus-v{stroke-dashoffset:0}

/* STEPS — горизонтальный таймлайн (background var(--card), see .kr-works comment above) */
.kruzhki-lp .kr-steps{padding:64px 0;background:var(--card)}
.kruzhki-lp .steps-line{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.kruzhki-lp .steps-line:before{content:"";position:absolute;left:6%;right:6%;top:17px;height:2px;
  background:linear-gradient(90deg,var(--blue),#cfe0f2)}
.kruzhki-lp .steps-line li{position:relative;padding-top:52px;text-align:center}
.kruzhki-lp .steps-line .n{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-size:15px;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 6px var(--card)}
.kruzhki-lp .steps-line h3{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 6px}
.kruzhki-lp .steps-line p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}

@media (max-width:960px){
  .kruzhki-lp .works-grid{grid-template-columns:1fr;grid-template-rows:none}
  .kruzhki-lp .wk--lead{grid-row:auto}
  .kruzhki-lp .works-grid>.wk:not(.wk--lead){aspect-ratio:auto}
  .kruzhki-lp .steps-line{grid-template-columns:1fr;gap:20px}
  .kruzhki-lp .steps-line:before{display:none}
  .kruzhki-lp .steps-line li{padding-top:0;padding-left:52px;text-align:left}
  .kruzhki-lp .steps-line .n{left:0;transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .kruzhki-lp .wk img,.kruzhki-lp .uc img{transition:none}
  .kruzhki-lp .uc:hover img{transform:none}
  .kruzhki-lp .uc:active img{transform:none}
  .kruzhki-lp .wk .hov-edge__loupe,.kruzhki-lp .wk .hov-edge__loupe *{transition:none}
}

/* SEO */
.kruzhki-lp .kr-seo{padding:64px 0;background:#fff}
.kruzhki-lp .kr-seo h2{font-size:26px;font-weight:800;color:var(--navy);margin:0 0 20px;
  letter-spacing:-.01em;line-height:1.25}
.kruzhki-lp .kr-seo h3{font-size:18px;font-weight:700;color:var(--navy);margin:28px 0 10px}
.kruzhki-lp .kr-seo p{font-size:15px;color:#555;line-height:1.7;margin:0 0 12px}

/* FAQ */
.kruzhki-lp .kr-faq{padding:64px 0;background:var(--card)}
.kruzhki-lp .faq{max-width:820px;margin:0 auto}
.kruzhki-lp .fq{border-bottom:1px solid var(--line)}
.kruzhki-lp .fq h3{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit}
.kruzhki-lp .fq h3>button{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:16px;background:none;border:0;padding:18px 0;font-size:16px;font-weight:600;color:var(--navy);
  text-align:left;cursor:pointer;font-family:inherit;line-height:1.4}
.kruzhki-lp .fq h3>button:after{content:"";flex:0 0 10px;width:10px;height:10px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.kruzhki-lp .fq h3>button[aria-expanded="true"]:after{transform:rotate(-135deg) translateY(-3px)}
.kruzhki-lp .fq .fa{display:none;padding:0 0 18px}
.kruzhki-lp .fq.is-open .fa{display:block}
.kruzhki-lp .fq .fa p{font-size:15px;color:#555;line-height:1.65;margin:0}

@media (prefers-reduced-motion:reduce){
  .kruzhki-lp .fq h3>button:after{transition:none}
}

/* ARTICLES */
.kruzhki-lp .kr-articles{padding:64px 0;background:#fff}
.kruzhki-lp .art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kruzhki-lp .art-card{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--edge);border-radius:14px;padding:24px;
  transition:transform .2s ease-out,box-shadow .2s ease-out}
/* transform-hover is gated behind hover:hover (same convention as .uc and .wk below) so tapping
   a card on touch doesn't leave it stuck "raised" until the user taps elsewhere. */
@media (hover:hover){
  .kruzhki-lp .art-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(10,46,77,.10);
    text-decoration:none}
  .kruzhki-lp .art-card:hover h3{color:var(--blue)}
}
.kruzhki-lp .art-card:active{transform:translateY(-2px);box-shadow:0 6px 14px rgba(10,46,77,.08)}
.kruzhki-lp .art-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);background:#eaf4fe;padding:4px 10px;border-radius:10px;
  margin-bottom:12px}
.kruzhki-lp .art-card h3{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 8px;
  line-height:1.35}
.kruzhki-lp .art-card p{font-size:14px;color:var(--muted);line-height:1.5;margin:0}

/* CTA BAND */
.kruzhki-lp .kr-cta-band{padding:0 0 64px;background:#fff}

@media (max-width:960px){
  .kruzhki-lp .art-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .kruzhki-lp .art-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .kruzhki-lp .art-card{transition:none}
  .kruzhki-lp .art-card:hover{transform:none}
  .kruzhki-lp .art-card:active{transform:none}
}