/* =========================================================
   БИЗНЕС И ПРАВО — Кадры и зарплата (kadri.html)
   Extends Design System v3 "АКТИВ". Mobile-first.
   No content is hidden behind :hover — every state is tap-reachable.
   ========================================================= */

/* ---------- HERO STATS ---------- */
.k-herometa{
  display:grid; grid-template-columns:1fr 1fr; gap:1.75rem clamp(1.25rem,4vw,3rem);
  margin-top:clamp(2.5rem,7vw,3.5rem); padding-top:clamp(1.75rem,5vw,2.25rem);
  border-top:1px solid rgba(243,239,230,.18);
}
@media(min-width:760px){ .k-herometa{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.5rem,4vw,3.5rem); } }
.k-herometa div{ min-width:0; }
.k-herometa b{
  display:block; font-weight:800; font-size:clamp(2rem,7vw,3.2rem); line-height:1;
  letter-spacing:-.05em; color:var(--bone);
}
.k-herometa b small{
  display:block; font-size:clamp(.82rem,2.6vw,.95rem); font-weight:700; letter-spacing:.01em;
  color:var(--lime); margin-top:.45rem; text-transform:none;
}
/* caption only — must not reach the counter <span> nested inside <b> */
.k-herometa > div > span{
  display:block; margin-top:.5rem; font-size:.92rem; line-height:1.45;
  font-weight:400; color:var(--paper);
}
.k-herometa b span{ font:inherit; color:inherit; display:inline; margin:0; }

/* ---------- FLOW: как строится работа ----------
   «Клиент передаёт» / «Мы берём на себя» ARE the message — they are set as
   the headline of each card, not as a micro-kicker above it. Cards sit on
   --void so both sides carry full contrast. */
.k-flow{
  display:grid; grid-template-columns:1fr; gap:clamp(.75rem,2vw,1rem);
  align-items:stretch; margin-top:clamp(2.5rem,6vw,3.5rem);
}
@media(min-width:920px){ .k-flow{ grid-template-columns:1fr auto 1fr; gap:clamp(.75rem,1.2vw,1rem); } }
.k-flow-card{
  padding:clamp(1.75rem,5vw,2.75rem); border-radius:22px;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--bone); color:var(--ink);
}
.k-flow-card.is-accent{
  background:linear-gradient(165deg,var(--moss),var(--forest));
  color:var(--bone);
}
.k-flow-card h3{
  font-weight:800; font-size:clamp(1.9rem,6.4vw,2.9rem); line-height:.96;
  letter-spacing:-.045em; text-transform:uppercase;
}
.k-flow-card p{
  margin-top:clamp(1.1rem,2.6vw,1.5rem); font-weight:400; line-height:1.5;
  font-size:clamp(1rem,2.4vw,1.12rem); color:var(--ink-soft); max-width:40ch;
}
.k-flow-card.is-accent p{ color:var(--paper); }
.k-flow-arrow{ display:grid; place-items:center; color:var(--lime); padding:.25rem 0; }
.k-flow-arrow svg{ width:38px; height:38px; transform:rotate(90deg); }
@media(min-width:920px){ .k-flow-arrow svg{ transform:none; width:46px; height:46px; } }
.k-flow-foot{
  margin-top:clamp(1.75rem,4vw,2.25rem); color:var(--bone); font-weight:400;
  font-size:clamp(1.2rem,3vw,1.65rem); line-height:1.4; letter-spacing:-.01em;
  border-left:2px solid var(--emerald); padding-left:1.2rem;
  max-width:74ch; text-wrap:balance;
}

/* ---------- SECTION JOINS ----------
   Where a bone section meets a pine one, the colour change splits the stacked
   .pad in two and the eye reads two paddings. Dark-on-dark has no such seam,
   so the same stack reads as a single canyon — these joins are tightened to
   land at roughly one side of a coloured boundary. */
.k-sec-flow{ padding-top:clamp(2.5rem,7vw,6.5rem); padding-bottom:clamp(2rem,5vw,4rem); }

/* ---------- TOPIC LIST — the centrepiece ---------- */
.k-topics{ position:relative; margin-top:clamp(2.5rem,6vw,4rem); }

/* scroll-driven progress rail (desktop only — needs the gutter) */
.k-rail{ display:none; }
@media(min-width:1040px){
  .k-topics{ padding-left:2.75rem; }
  .k-rail{
    display:block; position:absolute; left:0; top:.5rem; bottom:.5rem; width:2px;
    background:var(--bone-3); overflow:hidden; border-radius:2px;
  }
  .k-rail span{ position:absolute; inset:0 0 auto 0; height:100%; background:var(--emerald); transform:scaleY(0); transform-origin:top; }
}

.k-item{ border-top:1px solid var(--bone-3); position:relative; }
.k-item:last-child{ border-bottom:1px solid var(--bone-3); }
.k-item::before{
  content:""; position:absolute; left:0; top:-1px; width:100%; height:2px; background:var(--emerald);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.k-item.open::before{ transform:scaleX(1); }

.k-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.7rem,3vw,1.5rem); width:100%;
  background:none; border:0; color:inherit; cursor:pointer; text-align:left;
  font-family:var(--font); padding:1.05rem 0;
}
@media(min-width:720px){ .k-head{ padding:clamp(1.25rem,4vw,1.75rem) 0; } }
.k-n{
  font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--emerald-deep);
  font-variant-numeric:tabular-nums; align-self:center;
}
.k-item.open .k-n{ color:var(--emerald); }
.k-h-txt{ min-width:0; }
.k-h-txt b{
  display:block; font-weight:800; font-size:clamp(1.05rem,4.2vw,1.85rem);
  line-height:1.15; letter-spacing:-.035em;
}
/* the keyword line doubles the height of every collapsed row — on phones the
   list must stay scannable, so it appears only once there is width for it */
.k-h-txt i{ display:none; }
@media(min-width:720px){
  .k-h-txt i{
    display:block; font-style:normal; margin-top:.4rem;
    font-size:.82rem; font-weight:500; color:var(--ink-soft);
  }
  .k-n{ align-self:start; padding-top:.45rem; }
}
.k-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%; border:1.5px solid var(--ink);
  position:relative; transition:transform .5s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.k-ico::before,.k-ico::after{ content:""; position:absolute; background:var(--ink); top:50%; left:50%; transform:translate(-50%,-50%); transition:transform .5s var(--ease), background .4s var(--ease); }
.k-ico::before{ width:13px; height:2px; }
.k-ico::after{ width:2px; height:13px; }
.k-item.open .k-ico{ transform:rotate(90deg); background:var(--void); border-color:var(--void); }
.k-item.open .k-ico::before,.k-item.open .k-ico::after{ background:var(--lime); }
.k-item.open .k-ico::after{ transform:translate(-50%,-50%) scaleY(0); }
@media(hover:hover){
  .k-head:hover .k-ico{ border-color:var(--emerald-deep); }
  .k-head:hover .k-h-txt b{ color:var(--emerald-deep); }
  .k-item.open .k-head:hover .k-ico{ border-color:var(--void); }
}

.k-body{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.k-body-in{ padding:0 0 clamp(1.5rem,4.5vw,2.25rem); }
@media(min-width:1040px){ .k-body-in{ padding-left:calc(.72rem + 2.4ch); } }

.k-lead{
  max-width:62ch; font-size:clamp(1rem,3vw,1.12rem); font-weight:300; line-height:1.5;
  color:var(--ink); padding-bottom:clamp(1.1rem,3vw,1.5rem);
}
.k-lead em{ font-style:italic; font-weight:400; color:var(--emerald-deep); }
/* inline links in the accordion prose — the global `a{color:inherit;text-decoration:none}`
   otherwise leaves them indistinguishable from body copy */
.k-lead a, .k-note a{ color:var(--emerald-deep); text-decoration:underline; text-underline-offset:3px; font-weight:500; }
@media(hover:hover){ .k-lead a:hover, .k-note a:hover{ text-decoration-thickness:2px; } }

.k-rows{ border-top:1px solid var(--bone-3); }
.k-row{
  display:grid; grid-template-columns:1fr; gap:.4rem;
  padding:clamp(.95rem,3vw,1.15rem) 0; border-bottom:1px solid var(--bone-3);
}
.k-row:last-child{ border-bottom:0; }
@media(min-width:900px){
  .k-row{ grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr) auto; gap:clamp(1rem,3vw,2.5rem); align-items:baseline; }
}
.k-row b{ font-weight:700; font-size:clamp(.98rem,3vw,1.05rem); letter-spacing:-.015em; line-height:1.25; }
.k-row span{ font-size:.92rem; font-weight:300; line-height:1.5; color:var(--ink-soft); }
.k-price{
  justify-self:start; font-size:.74rem; font-weight:700; letter-spacing:.02em; color:var(--emerald-deep);
  white-space:nowrap; border:1px solid var(--bone-3); border-radius:99px; padding:.3rem .7rem;
  background:var(--bone);
}
@media(min-width:900px){ .k-price{ justify-self:end; } }

.k-note{
  margin-top:1.1rem; font-size:.84rem; font-weight:300; line-height:1.5; color:var(--ink-soft);
  border-left:2px solid var(--bone-3); padding-left:.9rem; max-width:62ch;
}

/* price ask — short, one line, then the button */
.k-pricelogic{
  margin-top:clamp(2rem,5vw,3rem); padding:clamp(1.5rem,4.5vw,2.2rem);
  border-radius:20px; background:var(--void); color:var(--bone);
  display:grid; grid-template-columns:1fr; gap:1.35rem; align-items:center;
}
@media(min-width:820px){ .k-pricelogic{ grid-template-columns:1fr auto; gap:clamp(2rem,5vw,3rem); } }
.k-pricelogic h3{ font-weight:800; font-size:clamp(1.3rem,4.4vw,1.9rem); letter-spacing:-.035em; line-height:1.1; }
.k-pricelogic h3 em{ font-weight:200; font-style:italic; color:var(--emerald); }
.k-pricelogic .btn{ justify-self:start; }

/* long money pills (юридический прайс: «15%, не менее 15 750 ₽») must not
   push the row wider than the phone — the nowrap above keeps a single price
   intact, this lets a two-part one break between its parts instead. */
.k-price{ max-width:100%; text-wrap:balance; }
@media(max-width:899px){ .k-price{ white-space:normal; } }