/*
  FINABI Commercial Template 2.0 — pilot styles
  FIN-159 · page-scoped to /services/buhgalterskoe-obsluzhivanie-ooo/ only.

  Loaded via this page's own $addCss, after tokens.css/base.css/components.css.
  Every value below is var(--...) from tokens.css — no raw hex/px per
  DESIGN-SYSTEM.md's "что запрещено задавать вручную". Class names are
  prefixed ct2- (Commercial Template 2.0) to avoid any collision with the
  shared outsourcing_buhgalterii/style.css classes this page keeps using
  for RESTYLE-only sections (segment cards, pricing cards, FAQ shell,
  comparison table) — this file only ever ships on this one page, so even
  reused legacy selectors here cannot leak to the other 14 pages that share
  that stylesheet.
*/

.ct2-eyebrow{
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--color-label);
  margin-bottom: var(--space-3);
}

.ct2-sec-head{ margin-bottom: var(--space-6); }
.ct2-sec-head p{ color: var(--color-ink-2); margin-top: var(--space-2); max-width: 640px; }

/* ---- SECTION RHYTHM TYPES (FIN-159 visual refinement §4) ----
   The page previously repeated one "white rounded shell" treatment (.outsourcing-section)
   for every section. These two additions give purposeful alternatives, chosen per section
   below by content role, not mechanically alternated. A third/fourth type already existed:
   the dark .ct2-case panel (accent/proof) and .ct2-calc-panel-in-.outsourcing-section
   (contained, kept where interactivity needs a defined boundary). */

/* Type A — editorial/open: no outer card, typography + whitespace only. Spacing comes from
   the shared .outsourcing-page section{margin-bottom} rule; this only adds breathing room. */
.ct2-open{ padding-top: var(--space-2); }

/* Type C — structural: rule-bound, not filled. For content that's already inherently
   structured (a stat row, a connected sequence, a two-column comparison) and doesn't need
   a card to read as a unit. */
.ct2-structural{
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* ---- HERO ---- */
.ct2-hero{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-9);
  align-items: start;
}
.ct2-hero__body{ min-width: 0; padding-top: var(--space-2); }
.ct2-hero__lead{ max-width: 56ch; margin-bottom: var(--space-6); }
.ct2-hero__trust{
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--color-ink-2);
}
.ct2-hero__trust span{ display: flex; align-items: center; gap: 6px; }
.ct2-hero__trust svg{ flex-shrink: 0; color: var(--color-success); }

/* Right-side visual anchor — the form card itself, same principle the homepage hero already
   uses (form as anchor, no decorative illustration). Replaces the removed cartoon (§3). */
.ct2-hero__panel{
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  align-self: center;
}

.ct2-hero-form{
  background: transparent;
  border: none;
  padding: 0;
}
.ct2-hero-form input[type="tel"]{
  background: var(--color-bg);
}

.ct2-hero__actions{ margin-top: var(--space-4); text-align: center; }
.ct2-phone{
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink);
  text-decoration: none;
}
.ct2-phone:hover{ text-decoration: underline; }

@media (max-width: 991.98px){
  .ct2-hero{ grid-template-columns: 1fr; }
  .ct2-hero__panel{ max-width: 420px; margin: 0 auto; }
}

/* ---- TRUST STAT ROW ---- */
.ct2-trust-row{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.ct2-trust-row__stat{ background: var(--color-bg); padding: var(--space-5) var(--space-4); text-align: center; }
.ct2-trust-row__num{ display: block; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.ct2-trust-row__label{ font-size: var(--font-size-sm); color: var(--color-ink-2); }
.ct2-trust-links{ display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--font-size-sm); }
.ct2-trust-links a{ color: var(--color-secondary); text-decoration: none; }
.ct2-trust-links a:hover{ text-decoration: underline; }

@media (max-width: 900px){ .ct2-trust-row{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .ct2-trust-row{ grid-template-columns: repeat(2, 1fr); } }

/* ---- CHECKLIST (What's included) ---- */
.ct2-checklist{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-8);
}
.ct2-checklist li{ display: flex; gap: var(--space-3); }
.ct2-check-ico{
  flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-circle);
  background: var(--color-success-bg); border: 1px solid var(--color-success-border);
  display: flex; align-items: center; justify-content: center; color: var(--color-success);
  margin-top: 2px;
}
.ct2-checklist h3{ font-size: var(--font-size-md); margin-bottom: 4px; }
.ct2-checklist p{ font-size: var(--font-size-base); color: var(--color-ink-2); margin: 0; }
.ct2-profile-line{
  margin-top: var(--space-6);
  font-size: var(--font-size-md);
  color: var(--color-ink);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-5);
}
@media (max-width: 700px){ .ct2-checklist{ grid-template-columns: 1fr; } }

/* ---- CALCULATOR PANEL ---- */
.ct2-calc-panel{
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-6);
}
.ct2-calc-panel__label{
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--color-secondary); text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow);
  margin-bottom: var(--space-4); display: block;
}

/* ---- PROCESS — connected timeline, not 7 independent cards (FIN-159 refinement §5) ----
   One continuous vertical sequence at every breakpoint: a connecting line runs behind the
   numbered circles so the 7 real steps read as one process, not a card grid. */
.ct2-process{
  list-style: none;
  margin: 0; padding: 0;
  max-width: 720px;
}
.ct2-process li{
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: var(--space-4);
  padding-bottom: var(--space-6);
  position: relative;
}
.ct2-process li:last-child{ padding-bottom: 0; }
.ct2-process li:not(:last-child)::before{
  content: '';
  position: absolute;
  left: 19px; top: 40px; bottom: 0;
  width: 1px;
  background: var(--color-border-strong);
}
.ct2-process__num{
  grid-row: 1 / 3;
  width: 40px; height: 40px;
  border-radius: var(--radius-circle);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold);
  color: var(--color-label); font-variant-numeric: tabular-nums;
  position: relative; z-index: 1;
}
.ct2-process__step{ font-size: var(--font-size-md); font-weight: var(--font-weight-bold); align-self: end; padding-top: 8px; }
.ct2-process__desc{ font-size: var(--font-size-sm); color: var(--color-ink-2); margin-top: 4px; }

/* ---- CASE ---- */
.ct2-case{
  background: var(--color-ink);
  color: var(--color-bg);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  flex-wrap: wrap;
}
.ct2-case__body{ flex: 1 1 360px; }
.ct2-case__type{
  display: inline-block; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-eyebrow);
  background: rgba(255,255,255,.12); padding: 4px var(--space-3); border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.ct2-case__problem{ font-size: var(--font-size-md); margin-bottom: var(--space-3); color: rgba(255,255,255,.88); }
.ct2-case__action{ font-size: var(--font-size-sm); color: rgba(255,255,255,.72); margin-bottom: var(--space-4); }
.ct2-case__link{ color: var(--color-primary); font-weight: var(--font-weight-bold); text-decoration: none; font-size: var(--font-size-sm); }
.ct2-case__link:hover{ text-decoration: underline; }
.ct2-case__result{ flex: 0 0 220px; text-align: center; }
.ct2-case__result .num{ font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-primary); font-variant-numeric: tabular-nums; line-height: var(--line-height-heading); }
.ct2-case__result .label{ font-size: var(--font-size-sm); color: rgba(255,255,255,.72); margin-top: var(--space-2); }

/* ---- REVIEW — strengthened quotation hierarchy (FIN-159 refinement §6) ----
   No outer white shell (section is .ct2-open); a large typographic quote mark and a left
   rule replace the generic bordered box, and the quote itself is set larger. Real review
   text unchanged, verbatim from /reviews/. */
.ct2-review{ max-width: 780px; padding-left: var(--space-6); border-left: 3px solid var(--color-primary); }
.ct2-review__mark{
  display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 64px; line-height: 1;
  color: var(--color-primary); margin-bottom: calc(-1 * var(--space-3));
}
.ct2-review blockquote{ margin: 0 0 var(--space-5); font-size: var(--font-size-lg); line-height: 1.45; font-weight: var(--font-weight-medium); }
.ct2-review__signer{ font-size: var(--font-size-base); color: var(--color-ink); margin: 0; }
.ct2-review__signer strong{ color: var(--color-ink); font-weight: var(--font-weight-bold); }
.ct2-review__link{ display: inline-block; margin-top: var(--space-4); font-size: var(--font-size-sm); color: var(--color-secondary); text-decoration: none; }
.ct2-review__link:hover{ text-decoration: underline; }

/* ---- EXPERT — text-only trust pattern, no avatar/placeholder (FIN-159 refinement §7) ---- */
.ct2-expert{ max-width: 780px; padding-left: var(--space-6); border-left: 3px solid var(--color-border-strong); }
.ct2-expert__role{ font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.ct2-expert__quote{ font-size: var(--font-size-base); color: var(--color-ink-2); margin-top: var(--space-2); }

/* ---- RISK / RESPONSIBILITY (merged advantages, compact) ---- */
.ct2-risk-list{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-6);
}
.ct2-risk-list li{ display: flex; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-ink-2); }
.ct2-risk-list svg{ flex-shrink: 0; color: var(--color-success); margin-top: 2px; }
.ct2-risk-list--spaced{ margin-top: var(--space-6); }
@media (max-width: 700px){ .ct2-risk-list{ grid-template-columns: 1fr; } }

/* ---- FINAL CTA — compacted (FIN-159 refinement §8) ----
   .ds-cta-standard's own padding is var(--space-9) (48px) — a shared Design System component
   default. Overridden here, page-scoped only, to var(--space-8) (32px), a real ~33% reduction,
   not a blind percentage cut. Prominence (yellow, single CTA, phone) unchanged. */
.ct2-final-cta{ text-align: center; padding: var(--space-8) var(--space-7); }
.ct2-final-cta__actions{ justify-content: center; margin-top: var(--space-5); }
.ct2-final-cta__btn{ background: var(--color-ink); color: var(--color-bg); }
.ct2-final-cta__btn:hover{ filter: brightness(1.2); }

/* ---- FAQ shell restyle ---- */
.ct2-faq details{ border-top: 1px solid var(--color-border); }
.ct2-faq details:last-child{ border-bottom: 1px solid var(--color-border); }
.ct2-faq summary{
  cursor: pointer; padding: var(--space-4) 0; font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
}
.ct2-faq summary::-webkit-details-marker{ display: none; }
.ct2-faq summary::after{ content: '+'; color: var(--color-ink-2); font-weight: 400; font-size: var(--font-size-xl); flex-shrink: 0; }
.ct2-faq details[open] summary::after{ content: '–'; }
.ct2-faq details p{ padding-bottom: var(--space-4); margin: 0; font-size: var(--font-size-base); color: var(--color-ink-2); max-width: 760px; }

/* ---- RELATED LINKS (chip row) ---- */
.ct2-chips{ display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.ct2-chips a{
  display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: var(--color-bg); text-decoration: none; font-size: var(--font-size-sm); color: var(--color-ink);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ct2-chips a:hover{ border-color: var(--color-border-strong); background: var(--color-bg-muted); }

/* ---- Telegram CTA restyle (content/href/data-goal unchanged) ---- */
.ct2-telegram-cta{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-tint);
}

/* ---- Comparison table restyle (content unchanged) ---- */
/* Section is now .ct2-structural (no white shell) — this panel needs its own contrast
   against the page background instead of relying on an outer white section. */
.ct2-compare{ background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.ct2-compare .outsourcing-compare__col{ background: transparent; border-radius: 0; }
.ct2-compare .outsourcing-compare__col:first-child{ border-right: 1px solid var(--color-border); }
@media (max-width: 767px){ .ct2-compare .outsourcing-compare__col:first-child{ border-right: none; border-bottom: 1px solid var(--color-border); } }