/* Help centre — frame help-centre[1:1700] / help-centre-mobile[80:442]. */

/* headline-stack[39:298]: 72/68.4 with no tracking in this frame */
.hero__title .hero__line,
.hero__title .hero__mark { letter-spacing: normal; }

/* hero panel instead of a photo (help-centre[39:305]): violet, 520 tall, 1px ink
   outline, a lime chip in the corner, a 220px «?» at 30% and four tag chips */
.help-card {
  position: relative; height: 520px; padding: var(--space-16);
  border-radius: var(--radius-sm); background: var(--color-violet);
  box-shadow: inset 0 0 0 1px var(--color-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.help-card__label {
  position: absolute; top: var(--space-16); left: var(--space-16);
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; text-transform: uppercase;
}
.help-card__mark {
  font-size: 220px; line-height: 220px; font-weight: 800; color: #fff; opacity: .3;
}
/* floating-tags[1:1740]: one centred row of four chips, 8 apart, 152 off the bottom */
.help-card__tags {
  position: absolute; left: var(--space-16); right: var(--space-16); bottom: 152px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8);
}
.help-card__tag {
  padding: 6px 12px; border-radius: var(--radius-sm); background: var(--color-ink);
  color: var(--color-notice); box-shadow: inset 0 0 0 1px var(--color-notice-line);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 700; text-transform: uppercase;
}

/* ── topic directory (help-centre[39:307]) ────────────────────────────── */
.topics__inner { display: flex; flex-direction: column; gap: var(--space-32); }
.topics .section-head__kicker { letter-spacing: 0.72px; }
.topics .section-title { letter-spacing: normal; }
.topics .section-lead { line-height: 25.6px; opacity: .75; max-width: none; }
/* topic-grid[39:312] is three columns of 120-high cards, 16 gap — 8 topics
   land as 3 + 3 + 2, which is exactly how row-3[39:335] is drawn. */
.topics__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-16); align-items: stretch; }
.topics__grid > li > .topic { height: 100%; }
.topics__grid > li { grid-column: span 2; }
.topics__grid > li:nth-child(7),
.topics__grid > li:nth-child(8) { grid-column: span 3; }
/* card-01[39:314]: column, gap 10, pad 10/32 — number and arrow share the top
   row, the title runs full width underneath. Every card is lime at 1440. */
.topic {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "no . arrow" "title title title" "text text text";
  align-content: start; row-gap: var(--space-10);
  min-height: 120px; padding: var(--space-24) var(--space-32); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--color-ink); background: var(--color-lime);
}
/* Описание темы: карточка должна отвечать на вопрос, а не только называть его */
.topic__text {
  grid-area: text; font-size: var(--fs-xs); line-height: 20px; font-weight: 400;
  text-transform: none; opacity: .8;
}
.topic__no { grid-area: no; font-size: var(--fs-h4); line-height: 50.4px; font-weight: 800; }
.topic__title { grid-area: title; font-size: var(--fs-lead); line-height: 30.24px; font-weight: 800; text-transform: uppercase; }
.topic__arrow { grid-area: arrow; justify-self: end; font-size: var(--fs-lead); line-height: 30.24px; font-weight: 800; }
/* card-01 is outlined in ink, card-09 in violet (help-centre[39:314], [39:341]) */
@media (min-width: 1200px) {
  .topics__grid > li:first-child .topic { box-shadow: inset 0 0 0 1px var(--color-ink); }
  .topics__grid > li:last-child .topic { box-shadow: inset 0 0 0 1px var(--color-violet); }
}
.topic:hover { translate: 0 -2px; box-shadow: var(--shadow-card); }
.topic:hover .topic__arrow { translate: 4px 0; }

/* ── getting started (help-centre[39:345]) ────────────────────────────── */
.started__inner { display: flex; gap: var(--space-48); align-items: stretch; }
/* getting-started-left[39:346]: violet 380 panel, pad 32, gap 24 */
.started__aside {
  flex: 0 0 380px; display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32); border-radius: var(--radius-sm); background: var(--color-violet);
  color: #fff;
}
.started__no { font-size: var(--fs-h2); line-height: 81px; font-weight: 400; color: var(--color-ink); opacity: .1; }
/* 39:348 is a kicker, not a headline: 12/15.12 with 1px tracking */
.started__title { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.started__lead { font-size: var(--fs-h4); line-height: 50.4px; font-weight: 800; color: #fff; }

/* getting-started-right[1:1823]: 932 wide, rows 32 deep, 26 between them */
.started__body { flex: 1 1 932px; min-width: 0; }
.qa + .qa { border-top: 1px solid var(--color-border); }
.qa__trigger {
  display: flex; align-items: flex-start; gap: var(--space-24);
  width: 100%; padding: var(--space-32) 0 0 var(--space-16); text-align: left;
}
/* row number 48/60.48 Regular at 20% — a watermark, not a label */
.qa__no { flex: none; width: 64px; font-size: 48px; line-height: 60.48px; font-weight: 400; color: var(--color-ink); opacity: .2; }
.qa__label { flex: 1; font-size: var(--fs-lead); line-height: 30.24px; font-weight: 800; }
.qa__sign { flex: none; width: 16px; height: 16px; position: relative; margin-top: 7px; }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 2px; background: var(--color-ink);
  translate: 0 -50%;
}
.qa__sign::after { rotate: 90deg; transition: rotate var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); }
.qa__trigger[aria-expanded="true"] .qa__sign::after { rotate: 0deg; opacity: 0; }
.qa__trigger:hover .qa__label { color: var(--color-violet); }
/* body text sits under the title, 104 in from the row edge (16 + 64 + 24) */
.qa__text {
  font-size: var(--fs-body-sm); line-height: 24px;
  padding: var(--space-12) 0 var(--space-32) 104px; max-width: 916px;
}

@media (max-width: 1199px) {
  /* hero-section[80:459]: stack gap 16, headline 44/44, rows 4 / 8 apart */
  .hero__inner { gap: var(--space-24); }
  .hero__left { gap: var(--space-16); }
  .eyebrow { letter-spacing: 0.72px; }
  .hero__title { gap: var(--space-4); }
  .hero__line { font-size: 44px; line-height: 44px; }
  .hero__line--2 { gap: var(--space-8); }
  .hero__mark { padding: 2px 10px; font-size: 40px; line-height: 40px; }
  .hero__lead { opacity: .8; }
  /* hero-graphic-panel[80:471]: 320 tall, «?» 120 at 20 %, tags two by two */
  .help-card { height: 320px; padding: var(--space-16); }
  .help-card__label { padding: 4px 8px; font-size: var(--fs-micro); line-height: 13px; }
  .help-card__mark { font-size: 120px; line-height: 120px; opacity: .2; }
  .help-card__tags { bottom: var(--space-16); gap: var(--space-6); }
  .help-card__tag { flex: 1 1 160px; padding: 8px 0; text-align: center; }

  /* topics-intro[80:488]: kicker 12/15.12, title 32/35.2, lead 14/21 at 70 % */
  .topics__inner { gap: var(--space-12); }
  .topics .section-title { font-size: var(--fs-h5); line-height: 35.2px; }
  .topics .section-lead { font-size: var(--fs-small); line-height: 21px; opacity: .7; }
  /* the mobile frame turns the grid into 60-high rows, 12 apart */
  .topics__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .topics__grid > li,
  .topics__grid > li:nth-child(7),
  .topics__grid > li:nth-child(8) { grid-column: auto; }
  .topic {
    grid-template-areas: "no title arrow"; align-items: center;
    column-gap: var(--space-12); row-gap: 0;
    min-height: 60px; padding: var(--space-16);
  }
  .topic__no { font-size: 22px; line-height: 28px; }
  .topic__title { font-size: var(--fs-body); line-height: 20.16px; }
  .topic__arrow { font-size: var(--fs-subtitle); line-height: 25.2px; }
  /* row tones, mobile only (help-centre-mobile[80:493] … [80:533]) */
  .topic--lime { background: var(--color-lime); box-shadow: inset 0 0 0 1px var(--color-ink); }
  .topic--lime-plain { background: var(--color-lime); }
  .topic--plain { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-ink); }
  .topic--violet { background: var(--color-violet); color: #fff; }
  .topic--dark { background: var(--color-ink); color: #fff; }
  .topic--dark .topic__arrow { color: var(--color-lime); }
  .topic--line { background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-violet); }
  .topic--line .topic__arrow { color: var(--color-violet); }

  /* getting-started-banner[79:1893]: violet 358 panel, pad 20, gap 16 */
  .started__inner { flex-direction: column; gap: var(--space-24); }
  .started__aside { flex: 1 1 auto; width: 100%; padding: var(--space-20); gap: var(--space-16); }
  .started__no { font-size: 48px; line-height: 48px; }
  .started__lead { font-size: var(--fs-h5); line-height: 40.32px; }
  .started__body { width: 100%; flex: 1 1 auto; }
  /* articles-list[79:1903]: number 36/36, title 20/25.2, body 14/22, rows 24 apart */
  .qa__trigger { padding: var(--space-24) 0 0 0; gap: var(--space-12); align-items: baseline; }
  .qa__no { width: auto; font-size: 36px; line-height: 36px; }
  .qa__label { font-size: var(--fs-subtitle); line-height: 25.2px; }
  .qa__sign { margin-top: 0; }
  .qa__text { font-size: var(--fs-small); line-height: 22px; padding: var(--space-12) 0 var(--space-24) 0; }
}


/* Темы 02–08 используют раскладку .started первой секции. Якорь из карточки
   не должен уводить заголовок под липкую шапку. */
.started { scroll-margin-top: calc(var(--header-h) + var(--space-24)); }
/* Соседние секции тем идут подряд — верхний отступ убираем, чтобы между ними
   не складывались два интервала секции. */
.started + .started { padding-top: 0; }