/* Help Centre — numbers from fig-spec of robwaterhause-help-centre (1:1316)
 * and robwaterhause-help-centre-mobile (12:376).
 *
 * M2 page: the frames differ in composition, not only in width.
 *   desktop  hero 1:1338 → topic console 1:1359 → selected topic 1:1435
 *   mobile   hero 12:391 + quick support 12:397 → header 12:411 →
 *            navigator 12:417, whose console 12:418 holds the selected topic
 *            (11:418 + 11:424) inline, right under the row that was tapped.
 * So the desktop branch and the mobile branch below are two layouts over one
 * DOM: `.hsel__console` is a pass-through on desktop and the console box on
 * mobile, and the panels are re-ordered into the row list with `order: var(--i)`.
 */

/* ── hero (1:1338) ────────────────────────────────────────────────────── */
.hhero { position: relative; overflow: hidden; padding: 80px 0; background: var(--color-bg); }
.hhero__glow {
  position: absolute; left: 480px; top: 80px; width: 800px; height: 650px; border-radius: 50%;
  background: var(--grad-glow); filter: blur(80px); pointer-events: none;   /* 1:1339 — эллипс без заливки; держим мягкое свечение как на мобиле (12:392), блюр убирает видимую кромку круга */
}
.hhero__inner {
  position: relative; display: flex; align-items: center; gap: 32px; min-height: 480px;   /* 1:1338 — 640 минус паддинги 80 */
  width: 100%; max-width: calc(var(--container) + 2 * var(--container-pad));
  margin-inline: auto; padding-inline: var(--container-pad);
}
.hhero__ed { display: flex; flex-direction: column; gap: 36px; width: 733px; flex: none; }
.hhero__head { display: flex; flex-direction: column; gap: 12px; }
.hhero__eyebrow { letter-spacing: .18em; }                  /* 1:1342 — 2/11 */
.hhero__title {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-hero-lg); line-height: 81px;
  letter-spacing: -.044em; color: var(--color-text);
}
.hhero__lead { width: 733px; }

/* The support card is its own section (12:397 on mobile). On desktop the frame
   draws it inside the hero row (1:1345 — 515×480 at y 190 of a 640px hero), so
   the section is pulled back up into it, the way .mfilter does on Sports. */
.hqs { position: relative; z-index: 1; margin: -560px 0 80px; }
.hqs__inner { display: flex; justify-content: flex-end; }
.hqs__col { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; width: 515px; height: 480px; flex: none; }

/* quick support card (1:1346) */
.qsupport {
  display: flex; flex-direction: column; gap: 24px; width: 515px; padding: 32px;
  box-shadow: inset 0 0 0 1.5px var(--color-border);        /* 1:1346 — 1.5px INSIDE, not the brand ring .glass uses */
}
.qsupport__label {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 16px;
  letter-spacing: .077em; text-transform: uppercase; color: var(--color-brand-2);
}
.qsupport__box {
  display: flex; flex-direction: column; gap: 16px; padding: 20px;
  background: var(--color-bg); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.qsupport__box-title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13.42px;
  letter-spacing: .091em; text-transform: uppercase; color: var(--color-text);
}
.qsupport__lines { display: flex; flex-direction: column; gap: 4px; }
.qsupport__name { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 22px; text-transform: uppercase; color: var(--color-text); }
.qsupport__phone {
  width: fit-content; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); line-height: 34.16px;
  color: var(--color-brand-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.qsupport__phone:hover { color: var(--color-brand-hover); }
.qsupport__note { font-size: var(--fs-label); line-height: 18.2px; color: var(--color-muted); }
.qsupport__sep { height: 0; margin-bottom: -1px; border: 0; border-top: 1px solid var(--color-border); }   /* 1:1354 — LINE, 0 in layout */
.qsupport__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.qsupport__foot-label {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); line-height: 16px;
  text-transform: uppercase; color: var(--color-text);
}
.qsupport__btn {
  display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; flex: none;
  border-radius: var(--radius-pill); background: var(--color-brand); color: var(--color-text);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13.42px;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.qsupport__btn:hover { background: var(--color-brand-hover); box-shadow: var(--shadow-cta); }
.qsupport__btn:active { background: var(--color-brand-active); transform: translateY(1px); }

/* ── topic navigator (1:1359) ─────────────────────────────────────────── */
.hnav { display: flex; flex-direction: column; gap: 48px; padding: 100px 0; background: var(--color-bg); }
.hnav__sechead { align-items: flex-end; gap: 32px; }
.hnav__eyebrow { letter-spacing: .136em; }                  /* 1:1364 — 1.5/11 */
.hnav__title { letter-spacing: -.031em; }
.hnav__lead { width: 515px; flex: none; }

.hbento {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 111px);
  grid-auto-flow: column; gap: 12px 16px; padding: 32px;
  background: var(--color-surface); border-radius: var(--radius-3xl);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

/* desktop category card (1:1370 / 1:1377) */
.trow {
  /* one markup for both frames: «no  badge / title» here, «no title badge» in a 56px row on mobile */
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "no badge" "title title";
  align-content: space-between; gap: 16px 12px;
  padding: 24px; border: 0; border-radius: var(--radius-lg); cursor: pointer; text-align: left;
  background: var(--color-bg-alt); box-shadow: inset 0 0 0 1px var(--color-border);
  transition: background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.trow__no {
  grid-area: no; align-self: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 29.28px;
  color: var(--color-muted); transition: color var(--dur-base) var(--ease);
}
.trow__badge {
  grid-area: badge; align-self: center;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px;
  background: var(--color-border); color: var(--color-muted);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.trow__badge .icon { width: 6px; height: 10px; stroke-width: 2.5; }
.trow__title {
  grid-area: title;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); line-height: 18.3px;
  letter-spacing: .033em; text-transform: uppercase; color: var(--color-muted);
  transition: color var(--dur-base) var(--ease);
}
.trow:hover { box-shadow: inset 0 0 0 1px var(--color-border-brand-2); }
.trow:hover .trow__title, .trow:hover .trow__no { color: var(--color-text); }
.trow:active { transform: translateY(1px); }
.trow.is-active {
  background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.trow.is-active .trow__no { color: var(--color-brand-2); }
.trow.is-active .trow__title { color: var(--color-text); }
.trow.is-active .trow__badge { background: var(--color-burgundy); color: var(--color-brand-2); }

/* ── selected topic (1:1435) ──────────────────────────────────────────── */
.hsel { padding: 96px 0; background: var(--color-bg-band); }             /* 1:1435 */
.hsel__console { display: contents; }                       /* on mobile it becomes the console box 12:418 and receives the category buttons */

.hpanel {
  display: flex; align-items: flex-start; gap: 48px;
  width: 100%; max-width: 1440px; margin-inline: auto;
  padding-left: var(--container-pad); padding-right: 64px;  /* 1:1443 ends at 1376: the frame draws the right column 16px past the 1280 grid */
}
.hpanel__head { display: flex; flex-direction: column; gap: 24px; width: 405px; flex: none; }
.hpanel__ident { display: flex; flex-direction: column; gap: 8px; }
.hpanel__eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small); line-height: 15px;
  letter-spacing: .083em; text-transform: uppercase; color: var(--color-brand-2);
}
.hpanel__title { display: flex; align-items: center; gap: 16px; }
.hpanel__no { font-family: var(--font-display); font-weight: 700; font-size: 48px; line-height: 59px; color: var(--color-text); }
.hpanel__name {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3); line-height: 39.04px;
  letter-spacing: -.031em; text-transform: uppercase; color: var(--color-text);
}
.hpanel__desc { font-size: var(--fs-ui); line-height: 22px; color: var(--color-muted); }
.hpanel__accwrap { display: contents; }                     /* on mobile it becomes 11:424 */

/* 843px at the frame width; between 1200 and 1440 it gives way instead of
   pushing the row past the viewport */
.hacc { display: flex; flex-direction: column; gap: 12px; flex: 1 1 843px; min-width: 0; }
.hacc__item { background: var(--color-bg); box-shadow: inset 0 -1px 0 var(--color-border); }
.hacc__btn {
  display: flex; align-items: center; width: 100%;
  padding: 24px; border: 0; background: none; cursor: pointer; text-align: left;
}
.hacc__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.hacc__label { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hacc__no {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 17.08px;
  color: var(--color-muted); transition: color var(--dur-fast) var(--ease);
}
.hacc__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 20px; text-transform: uppercase; color: var(--color-text); }
.hacc__ind {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 16px;
  background: var(--color-surface); color: var(--color-muted);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), rotate var(--dur-base) var(--ease);
}
.hacc__ind .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.hacc__btn:hover .hacc__ind { background: var(--color-burgundy); color: var(--color-brand-2); }
.hacc__btn:hover .hacc__no { color: var(--color-brand-2); }
.hacc__body { color: var(--color-muted); padding: 16px 24px 24px 56px; }               /* 1:1452 — the answer is indented 32 past the card padding */
.hacc__text { font-size: var(--fs-ui); line-height: 22px; color: var(--color-muted); }
.hacc__text a { color: var(--color-text); text-decoration: none; box-shadow: inset 0 -1px 0 var(--color-border-brand-2); transition: color var(--dur-fast) var(--ease); }
.hacc__text a:hover { color: var(--color-brand-2); }

.hacc__item.is-open {
  background: transparent; border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border-brand), inset 4px 0 0 var(--color-brand);   /* 1:1444 — stroke 1, left 4 */
}
.hacc__item.is-open .hacc__btn { padding-bottom: 0; }
.hacc__item.is-open .hacc__no { color: var(--color-brand-2); }
.hacc__item.is-open .hacc__ind { background: var(--color-burgundy); color: var(--color-brand-2); rotate: 180deg; }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  /* hero 12:391 (title block) + 12:397 (card wrapper) inside one section */
  .hhero { padding: 32px var(--container-pad-mobile) 24px; }
  .hhero__glow { left: 45px; top: 10px; width: 300px; height: 300px; filter: none; }   /* 12:392 — на мобиле у эллипса своя заливка и без блюра */
  .hhero__inner { display: block; min-height: 0; max-width: none; padding-inline: 0; }
  .hhero__ed { width: auto; gap: 12px; }
  .hhero__head { display: contents; }
  .hhero__title { font-size: 48px; line-height: 50px; letter-spacing: -.042em; }
  .hhero__lead { width: auto; font-size: var(--fs-ui); line-height: 21px; }

  .hqs { margin: 0; }
  .hqs__inner { display: block; padding-inline: 0; }
  .hqs__col { display: block; width: auto; height: auto; padding: 0 var(--container-pad-mobile) 32px; }
  .qsupport { width: auto; gap: 20px; padding: 20px; box-shadow: inset 0 0 0 1px var(--color-border); }
  .qsupport__box { gap: 12px; padding: 16px; }
  .qsupport__name { font-size: var(--fs-lead); line-height: 20px; }
  .qsupport__phone { font-size: var(--fs-h5); line-height: 29.28px; color: var(--color-brand); }
  .qsupport__note { font-size: var(--fs-small); line-height: 16.8px; }
  .qsupport__foot { flex-direction: column; align-items: stretch; gap: 12px; }
  .qsupport__btn { justify-content: center; height: 44px; padding: 12px 16px; font-size: var(--fs-label); line-height: 16px; }

  /* topic header 12:411 — the console itself moves into .hsel below */
  .hnav { display: block; padding: 0; }
  .hnav__head { padding-inline: 0; }                        /* the 12:411 padding belongs to the row itself, so its box is the full 390 */
  .hnav__sechead { flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px var(--container-pad-mobile) 20px; }
  .hnav__sechead .sec-head__block { display: contents; }
  .hnav__title { font-size: 30px; line-height: 37px; letter-spacing: -.033em; }
  .hnav__lead { width: auto; font-size: var(--fs-ui); line-height: 21px; }
  .hnav__navwrap { display: none; }                         /* the 3×3 bento is the desktop branch only */

  /* navigator 12:417 → console 12:418: rows and the open panel in one column */
  .hsel { padding: 0 var(--container-pad-mobile) 40px; background: none; }
  .hsel__console {
    display: flex; flex-direction: column; padding: 12px;
    background: var(--color-surface-glass); border-radius: var(--radius-2xl);
    box-shadow: inset 0 0 0 1px var(--color-border);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  }
  .trow, .hpanel { order: var(--i); }                       /* the open panel lands right under its own row */

  .trow {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "no title badge"; align-items: center; align-content: center; gap: 12px;
    min-height: 56px; padding: 0 16px; border: 0; border-radius: var(--radius-lg);
    background: none; box-shadow: none; cursor: pointer; text-align: left;
    transition: background-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
  }
  .trow.has-rule { box-shadow: inset 0 1px 0 var(--color-border); }   /* 12:430 — LINE between adjacent rows */

  .trow__no { font-size: var(--fs-body); line-height: 18.3px; }
  .trow__title { font-size: var(--fs-ui); line-height: 17.08px; letter-spacing: 0; }
  .trow__badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; background: none; color: var(--color-muted); }
  .trow__badge .icon { width: 6px; height: 10px; stroke-width: 2.5; }
  .trow:hover { box-shadow: none; }                          /* the desktop card outline has no place in the list */
  .trow.has-rule:hover { box-shadow: inset 0 1px 0 var(--color-border); }
  .trow:hover .trow__title, .trow:hover .trow__no { color: var(--color-text); }
  .trow:active { transform: translateY(1px); }
  .trow.is-active, .trow.is-active:hover {
    background: var(--color-burgundy); box-shadow: inset 0 0 0 1px var(--color-border-brand);
  }
  .trow.is-active .trow__no { color: var(--color-brand-2); }
  .trow.is-active .trow__title { color: var(--color-text); }
  .trow.is-active .trow__badge { background: var(--color-burgundy); color: var(--color-brand-2); }

  /* selected topic 11:418 + accordion 11:424 */
  .hpanel { flex-direction: column; gap: 0; max-width: none; padding: 0; }
  .hpanel__head { width: auto; gap: 12px; padding: 24px 16px; background: var(--color-bg-band); }   /* 11:418 */
  .hpanel__ident { display: contents; }
  .hpanel__title { gap: 12px; }
  .hpanel__no { font-size: var(--fs-h3); line-height: 44px; }
  .hpanel__name { font-size: var(--fs-h5); line-height: 29.28px; letter-spacing: -.021em; }
  .hpanel__desc { line-height: 21px; }
  .hpanel__accwrap { display: block; padding: 0 16px 40px; }

  .hacc {
    width: auto; gap: 0; overflow: hidden;
    border-radius: var(--radius-xl); box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .hacc__item { box-shadow: none; }
  .hacc__item + .hacc__item { box-shadow: inset 0 1px 0 var(--color-border); }   /* 11:442 — LINE between items */
  .hacc__btn { min-height: 56px; padding: 0 20px; }
  .hacc__head { gap: 8px; }   /* 11:427 — между лейблом и индикатором в макете 13px свободного места, 16 уже ломает строку */
  .hacc__label { gap: 12px; }
  .hacc__name { font-size: var(--fs-ui); line-height: 17.08px; }
  .hacc__ind { width: 24px; height: 24px; border-radius: 12px; }
  .hacc__ind .icon { width: 10px; height: 10px; }
  .hacc__body { padding: 16px 20px 20px; }
  .hacc__text { line-height: 21px; }

  .hacc__item.is-open {
    background: var(--color-burgundy); border-radius: 0;
    box-shadow: inset 0 -1px 0 var(--color-border-brand), inset 4px 0 0 var(--color-brand);   /* 11:426 */
  }
  .hacc__item.is-open + .hacc__item { box-shadow: none; }
  .hacc__item.is-open .hacc__btn { min-height: 0; padding: 20px 20px 0; }
}

@media (max-width: 389px) {
  .hhero__title { font-size: 40px; line-height: 42px; }
  .hpanel__name { font-size: 20px; line-height: 24px; }
  .trow__title { font-size: var(--fs-label); }
}

@media (prefers-reduced-motion: reduce) {
  .hacc__ind { transition: none; }
}