/* ───────────────────────────────────────────────────────────────────
   Help center — /{culture}/help, /help/{slug}, /help/{slug}?q={id}

   Ported from the signed-off prototype Help-Center-KZ.html
   (Help-Center-Dev-Handoff.md, 2026-07-29). Loaded only by the three
   help views; every rule is scoped to `.hc` because the design's class
   names are generic (.panel, .side, .search, .chat …) and must not
   leak into the shared header/footer or any other marketing page.

   The tokens below mirror marketing/tokens.css values under the
   prototype's own names, so the ported rules stay diffable against it.
   ─────────────────────────────────────────────────────────────────── */

.hc {
  --blue-50: rgb(239, 244, 255);
  --blue-100: rgb(221, 232, 255);
  --blue-300: rgb(158, 190, 254);
  --blue-400: rgb(114, 158, 254);
  --blue-500: rgb(79, 137, 252);
  --blue-600: rgb(46, 111, 232);
  --ink: #0F1B3D;
  --ink-soft: #1C2A45;
  --body: #41526B;
  --muted: #64748B;
  --faint: #94A3B8;
  --border: #E6EAF2;
  --hairline: rgba(15, 27, 61, 0.07);
  --page: #F4F6FC;
  --card: #FFFFFF;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --shadow-soft: 0 1px 2px rgba(15, 27, 61, 0.05);
  --shadow-hover: 0 12px 32px -14px rgba(15, 27, 61, 0.16);
  --focus-ring: 0 0 0 4px rgba(79, 137, 252, 0.18);

  background: var(--page);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The shared chrome pulls itself up over the page (#atasuaiHeader{margin-bottom:-72px}
   in site.css) and expects the first section to re-add that height from the inside.
   site.css only injects the spacer for a page whose root is a <div>; these views render
   <main> straight after the header, so the strip is claimed here — which also keeps
   every spacing value below exactly as the prototype authored it. */
.hc::before { content: ''; display: block; height: 72px; }

.hc a { color: inherit; }
.hc button { font-family: inherit; }

/* ══════════ Hero ══════════ */
.hc .hero { position: relative; padding: 76px 32px 56px; text-align: center; }
/* Decorative glow lives in its own clipped layer so the search
   dropdown can overflow the hero without being cut off. */
.hc .hero-glow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hc .hero-glow::before { content: ''; position: absolute; left: 50%; top: -340px; transform: translateX(-50%); width: 900px; height: 560px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79, 137, 252, 0.14), transparent 72%); }
.hc .hero h1 { position: relative; margin: 0; font-size: 44px; font-weight: 800; letter-spacing: -0.025em; }
.hc .hero p { position: relative; margin: 14px auto 0; font-size: 17px; color: var(--muted); max-width: 520px; line-height: 1.55; }

/* Search */
.hc .search-wrap { position: relative; max-width: 640px; margin: 32px auto 0; }
.hc .search { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 18px; height: 54px; box-shadow: var(--shadow-soft); transition: border-color .16s, box-shadow .16s; }
.hc .search:focus-within { border-color: var(--blue-400); box-shadow: var(--focus-ring); }
.hc .search > svg { flex-shrink: 0; color: var(--faint); }
.hc .search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--ink); }
/* The row is the control, but only the <input> takes a tap — and `align-items:center` sized it to
   its own 22px line box, so the top and bottom third of a 54px field did nothing. The wrapper is a
   <div>, not a <label>, so it forwards nothing. Stretching the input costs no pixels: an input
   centres its text in whatever box it is given. */
.hc .search input { align-self: stretch; height: auto; }
/* tokens.css rings every focused input with --shadow-focus. Here the whole field is the
   control and already lights up through .search:focus-within, so a second rounded ring
   inside it is just a box within a box. */
.hc .search input:focus, .hc .search input:focus-visible { outline: none; box-shadow: none; }
.hc .search input::placeholder { color: var(--faint); }
.hc .search-kbd { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--faint); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; background: var(--page); }
.hc .search:focus-within .search-kbd { display: none; }
.hc .search-spin { flex-shrink: 0; width: 15px; height: 15px; border: 2px solid var(--border); border-top-color: var(--blue-500); border-radius: 50%; animation: hcSpin .7s linear infinite; display: none; }
.hc .search-wrap.is-busy .search-spin { display: block; }
.hc .search-wrap.is-busy .search-kbd { display: none; }
@keyframes hcSpin { to { transform: rotate(360deg); } }
.hc .search-results { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 24px 60px -16px rgba(15, 27, 61, 0.22); max-height: 420px; overflow: auto; text-align: left; display: none; }
.hc .search-results.is-open { display: block; }
.hc .sr-item { display: block; width: 100%; text-align: left; padding: 14px 18px; border: none; background: transparent; cursor: pointer; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.hc .sr-item:last-child { border-bottom: none; }
.hc .sr-item:hover, .hc .sr-item.is-cursor { background: var(--page); }
.hc .sr-item:focus-visible { outline: none; background: var(--page); box-shadow: inset 0 0 0 2px var(--blue-300); }
.hc .sr-q { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.hc .sr-cat { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--blue-600); }
.hc .sr-empty { padding: 20px 18px; font-size: 14px; color: var(--muted); }
.hc .sr-item mark { background: rgba(79, 137, 252, 0.18); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ══════════ Layout ══════════ */
.hc .shell { max-width: 1160px; margin: 0 auto; padding: 0 32px 88px; }

/* Category cards (home) */
.hc .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.hc .cat-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; transition: border-color .16s, transform .16s, box-shadow .16s; }
.hc .cat-card:hover { border-color: var(--blue-300); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.hc .cat-ico { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--blue-50); color: var(--blue-600); flex-shrink: 0; }
.hc .cat-card h3 { margin: 0; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.hc .cat-card h3 svg { opacity: 0; transform: translateX(-3px); transition: all .16s; color: var(--blue-600); flex-shrink: 0; }
.hc .cat-card:hover h3 svg { opacity: 1; transform: translateX(0); }
.hc .cat-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* Disabled in the console: the card stays where it is so the grid keeps its shape, but it is not
   a link — no hover lift, no arrow, muted text, and the icon tile loses its blue. `pointer-events`
   is belt to the missing href's braces, and it also stops the tap highlight on touch. */
.hc .cat-card.is-off,
.hc .side-item.is-off { pointer-events: none; cursor: default; }
.hc .cat-card.is-off { background: var(--page); border-color: var(--border); }
.hc .cat-card.is-off .cat-ico { background: #EDF0F7; color: var(--faint); }
.hc .cat-card.is-off h3 { color: var(--muted); }
.hc .cat-card.is-off p { color: var(--faint); }
.hc .side-item.is-off { color: var(--faint); }
.hc .side-item.is-off svg { color: var(--faint); opacity: .7; }

.hc .sect-label { margin: 56px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }
.hc .sect-title { margin: 6px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }

/* ══════════ Category view ══════════ */
.hc .cat-layout { display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start; padding-top: 40px; }
.hc .side { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px; }
.hc .side-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--r-sm); background: transparent; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-decoration: none; transition: background .14s, color .14s; }
.hc .side-item svg { flex-shrink: 0; color: var(--muted); transition: color .14s; }
.hc .side-item:hover { background: var(--page); }
.hc .side-item.is-on { background: var(--blue-50); color: var(--blue-600); font-weight: 600; }
.hc .side-item.is-on svg { color: var(--blue-600); }
.hc .side-item + .side-item { margin-top: 2px; }

.hc .panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 32px; }
.hc .crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.hc .crumb a { color: var(--muted); text-decoration: none; }
.hc .crumb a:hover { color: var(--blue-600); }
.hc .crumb svg { flex-shrink: 0; }
.hc .panel-head { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); }
.hc .panel-head .cat-ico { width: 48px; height: 48px; }
.hc .panel-head h1, .hc .panel-head h2 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.hc .panel-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
/* "11 сұрақ" — the count's noun reads as part of the number, so it stays lowercase
   whatever case the language pack stores it in. */
.hc .qa-count { margin-left: auto; flex-shrink: 0; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--page); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-variant-numeric: tabular-nums; text-transform: lowercase; }

/* ══════════ Accordion — the core component ══════════
   One frame per question. Click → the SAME bordered frame
   expands and the answer (text / images / video) opens inside it. */
.hc .qa-list { margin-top: 22px; }
/* Sticky 72px header + breathing room, so a #q{id} deep link never
   lands the frame under the chrome. */
.hc .qa { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color .18s, box-shadow .18s; scroll-margin-top: 96px; }
.hc .qa + .qa { margin-top: 10px; }
.hc .qa:hover { border-color: #D3DCEC; }
.hc .qa.is-open { border-color: var(--blue-300); box-shadow: 0 0 0 4px rgba(79, 137, 252, 0.08); }
.hc .qa-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 17px 18px; border: none; background: transparent; cursor: pointer; text-align: left; border-radius: var(--r-md); }
.hc .qa-head:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.hc .qa-num { flex-shrink: 0; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--page); color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .18s, color .18s; }
.hc .qa.is-open .qa-num { background: var(--blue-50); color: var(--blue-600); }
.hc .qa-q { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.hc .qa-cat { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: var(--blue-600); }
.hc .qa-chev { flex-shrink: 0; color: var(--faint); transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), color .18s; }
.hc .qa.is-open .qa-chev { transform: rotate(180deg); color: var(--blue-600); }
.hc .qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(0.16, 1, 0.3, 1); }
.hc .qa.is-open .qa-body { grid-template-rows: 1fr; }
.hc .qa-body-clip { overflow: hidden; min-height: 0; }
.hc .qa-a { padding: 2px 18px 20px 60px; font-size: 14.5px; line-height: 1.7; color: var(--body); overflow-wrap: break-word; }
.hc .qa-a > :first-child { margin-top: 0; }
.hc .qa-a p { margin: 0 0 12px; }
.hc .qa-a p:last-child { margin-bottom: 0; }
.hc .qa-a ol, .hc .qa-a ul { margin: 0 0 12px; padding-left: 20px; }
.hc .qa-a li { margin-bottom: 7px; }
.hc .qa-a li:last-child { margin-bottom: 0; }
.hc .qa-a strong, .hc .qa-a b { color: var(--ink); font-weight: 600; }
.hc .qa-a a { color: var(--blue-600); font-weight: 500; text-decoration: none; }
.hc .qa-a a:hover { text-decoration: underline; }
.hc .qa-path { display: inline-block; background: var(--page); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 13px; font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
/* Answers are authored in the admin's rich-text editor, so the body can
   carry headings, images and tables the prototype never had. Keep them
   inside the frame instead of letting a fixed width blow the layout. */
.hc .qa-a h1, .hc .qa-a h2, .hc .qa-a h3, .hc .qa-a h4 { margin: 18px 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.hc .qa-a img, .hc .qa-a video, .hc .qa-a iframe { display: block; max-width: 100%; height: auto; margin: 14px 0; border-radius: 12px; border: 1px solid var(--border); }
/* A video the operator placed inside the answer (Quill's ql-video, or any YouTube frame the save
   normalized into it). Its width/height attributes are ignored in favour of the answer column, so a
   pasted 560×315 and a pasted 1280×720 look the same — and both fill the column. */
.hc .qa-a iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: var(--ink); }
.hc .qa-a table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.hc .qa-a td, .hc .qa-a th { border: 1px solid var(--border); padding: 7px 10px; }

/* The answer standing on its own — a single-question page has no numbered row to
   align with, so it drops the accordion's left indent. */
.hc .qa-a.is-plain { padding: 22px 0 0; font-size: 15px; }

/* A frame that links to its own page instead of expanding — used by the
   "other questions" list on a single-question page. */
.hc .qa-link { display: flex; align-items: center; gap: 14px; padding: 15px 18px; text-decoration: none; border-radius: var(--r-md); }
.hc .qa-link .cat-ico { width: 34px; height: 34px; border-radius: 10px; }
.hc .qa-link .qa-q { font-size: 14.5px; }
.hc .qa-link .qa-arrow { flex-shrink: 0; color: var(--faint); transition: transform .18s, color .18s; }
.hc .qa-link:hover .qa-arrow { transform: translateX(3px); color: var(--blue-600); }

/* A section title with no eyebrow above it carries the eyebrow's top margin. */
.hc .sect-title.is-lone { margin-top: 56px; }

/* Media inside an expanded answer — screenshots & video */
.hc .qa-media { margin: 14px 0; }
.hc .qa-media img, .hc .qa-media video { display: block; width: 100%; max-width: 560px; border-radius: 12px; border: 1px solid var(--border); }
.hc .qa-media video { aspect-ratio: 16/9; background: var(--ink); }
.hc .qa-media figcaption { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
.hc .qa-media-row { display: flex; gap: 12px; flex-wrap: wrap; }
.hc .qa-media-row img { max-width: 270px; }

/* An operator-attached YouTube video, under the answer: same frame as a screenshot (radius 12,
   1px border) and the design's 16:9, and the dark fill is what shows while the iframe loads, so the
   frame does not jump.
   Unlike a screenshot it takes the **full width of the answer column** rather than the design's
   560px media cap. A screenshot has its own pixel size, so capping it keeps it from being blown up;
   a video scales, and the cap only left a band of empty space to the right of the frame. */
.hc .qa-video { max-width: 100%; }
.hc .qa-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--ink); }

/* ══════════ Chrome-free YouTube player ══════════
   The same player as the "how it works" dialog (.hv-* in marketing/site.css), rebuilt for a page
   that holds many of them at once: a YouTube frame runs with controls:0 and is driven through the
   IFrame API by this bar, so none of YouTube's own interface is ever on screen.
   See help.js for why each piece exists — the four things that matter are that controls:0 is the
   only switch that removes the chrome, that it cannot remove the *unstarted* poster overlay (hence
   the thumbnail cover), that the hidden class has to sit on a wrapper we create rather than on
   YouTube's iframe, and that its opacity carries no transition. */
.hc .hcv { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--ink); }
/* Every `display` below is a class rule, which outranks the UA's [hidden]{display:none} — without
   this the bar renders before there is a player to drive and the play button renders over a frame
   that is already playing. */
.hc .hcv [hidden] { display: none !important; }
/* The gradient is the resting look; the video's own thumbnail is layered over it as a
   background-image, and `cover` crops hqdefault's letterbox bars away. A thumbnail that 404s
   therefore leaves this rather than a blank rectangle. */
.hc .hcv-stage { position: absolute; inset: 0; background-color: var(--ink); background-image: linear-gradient(180deg, #132244, #0A1430); background-size: cover; background-position: center; background-repeat: no-repeat; }
/* The frame YouTube builds. The reset is deliberate: `.hc .qa-a iframe` gives every iframe in an
   answer its own 16:9 box and border, which is right for a bare embed and wrong for this one —
   here the .hcv box is the frame and the iframe only fills it. */
.hc .hcv .hcv-media { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; margin: 0; border: 0; border-radius: 0; aspect-ratio: auto; display: block; background: #0A1430; }
/* Hidden until the player reports PLAYING — the unstarted state is where YouTube always draws its
   title, channel avatar, big red button and "Watch on YouTube", and no parameter turns that off.
   On the wrapper and not on the iframe because YouTube creates the iframe: a class added afterwards
   would be a transition down from already-visible, and the frame stayed visible.
   pointer-events:none as well — with controls:0 there is nothing inside worth clicking, and letting
   the mouse in only invites YouTube's hover chrome.
   No transition on this opacity, deliberately: it is the difference between seeing the video and
   seeing nothing, and a throttled or dropped transition leaves a playing video invisible. */
.hc .hcv-ytwrap { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hc .hcv-ytwrap.is-live { opacity: 1; }

.hc .hcv-load { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hc .hcv-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22); border-top-color: rgba(255, 255, 255, .85); animation: hcvSpin .8s linear infinite; }
@keyframes hcvSpin { to { transform: rotate(360deg); } }

.hc .hcv-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: 68px; height: 68px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 34px -10px rgba(0, 0, 0, .55); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .18s, background .18s; }
.hc .hcv-play:hover { background: #fff; transform: translate(-50%, -50%) scale(1.06); }

.hc .hcv-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 10px 12px; background: linear-gradient(180deg, rgba(6, 12, 26, 0), rgba(6, 12, 26, .82)); }
.hc .hcv-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .26); cursor: pointer; }
.hc .hcv-fill { width: 0; height: 100%; border-radius: 999px; background: var(--blue-500); }
.hc .hcv-ctrls { display: flex; align-items: center; gap: 14px; margin-top: 9px; color: rgba(255, 255, 255, .92); }
.hc .hcv-ico { border: none; background: none; padding: 0; color: inherit; display: flex; align-items: center; cursor: pointer; transition: opacity .16s; }
.hc .hcv-ico:hover { opacity: .75; }
.hc .hcv-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); }
.hc .hcv-sp { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  .hc .hcv-spin { animation-duration: 2s; }
  .hc .hcv-play { transition: none; }
}
@media (max-width: 640px) {
  .hc .hcv-play { width: 54px; height: 54px; }
  .hc .hcv-play svg { width: 24px; height: 24px; }
  /* The timecode goes first: play, mute and fullscreen each do something, a clock does not. */
  .hc .hcv-time { display: none; }
}

/* Empty category */
.hc .qa-empty { padding: 44px 20px; text-align: center; font-size: 14.5px; color: var(--muted); }

/* ══════════ Still have questions — CTA ══════════ */
.hc .cta { position: relative; overflow: hidden; margin-top: 56px; border-radius: var(--r-xl); background: linear-gradient(160deg, #1A2E66, #0F1B3D); padding: 44px 48px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hc .cta::before { content: ''; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 137, 252, 0.5), transparent 70%); }
.hc .cta-txt { position: relative; flex: 1; min-width: 260px; }
.hc .cta-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; background: rgba(255, 255, 255, 0.13); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff; text-transform: uppercase; }
.hc .cta-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; }
.hc .cta h2 { margin: 16px 0 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.hc .cta p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 480px; }
.hc .cta-actions { position: relative; display: flex; gap: 12px; flex-wrap: wrap; }
.hc .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: none; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all .18s; }
.hc .cta-btn.pri { background: #fff; color: var(--ink); }
.hc .cta-btn.pri:hover { background: var(--blue-50); }
.hc .cta-btn.sec { background: rgba(255, 255, 255, 0.1); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); }
.hc .cta-btn.sec:hover { background: rgba(255, 255, 255, 0.18); }

/* ══════════ AI assistant chat ══════════ */
.hc .chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 80; width: 58px; height: 58px; border: none; border-radius: 50%; background: var(--blue-500); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px -8px rgba(46, 111, 232, 0.55); transition: background .16s, transform .16s, box-shadow .16s; }
.hc .chat-fab:hover { background: var(--blue-600); transform: translateY(-2px); box-shadow: 0 16px 36px -10px rgba(46, 111, 232, 0.6); }
.hc .chat-fab .ic { position: absolute; transition: opacity .18s, transform .18s; }
.hc .chat-fab .ic-x { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.hc .chat-fab.is-open .ic-chat { opacity: 0; transform: rotate(90deg) scale(0.6); }
.hc .chat-fab.is-open .ic-x { opacity: 1; transform: rotate(0) scale(1); }
.hc .chat-fab .pulse { position: absolute; top: 5px; right: 5px; width: 12px; height: 12px; border-radius: 50%; background: #4ADE80; border: 2px solid #fff; }
.hc .chat-fab.is-open .pulse { display: none; }

/* The 130px budget this used to carry covered the 96px bottom offset and little else, so on any
   viewport under ~735px the panel grew straight up under the sticky 72px header — which wins the
   stacking contest (z-index 100 against this 80), so its own title bar was simply unreachable.
   The header is part of the budget now. The dvh line is the iOS repeat: there `100vh` is the LARGE
   viewport while a fixed element lays out against the small one, so with Safari's URL bar showing
   the vh figure is the wrong one; browsers that do not know dvh keep the line above. */
.hc .chat { position: fixed; right: 24px; bottom: 96px; z-index: 80; width: min(392px, calc(100vw - 32px)); max-height: min(600px, calc(100vh - 200px)); max-height: min(600px, calc(100dvh - 200px)); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: 0 32px 80px -20px rgba(15, 27, 61, 0.35); overflow: hidden; opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none; transition: opacity .22s cubic-bezier(0.16, 1, 0.3, 1), transform .22s cubic-bezier(0.16, 1, 0.3, 1); }
.hc .chat.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

.hc .chat-head { position: relative; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(160deg, #1A2E66, #0F1B3D); }
.hc .chat-head::before { content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 137, 252, 0.5), transparent 70%); }
.hc .chat-ava { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; color: #fff; }
.hc .chat-head-t { position: relative; min-width: 0; }
.hc .chat-head-t b { display: block; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.hc .chat-head-t span { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.hc .chat-head-t .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; animation: hcChatPulse 1.6s infinite; flex-shrink: 0; }
@keyframes hcChatPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.hc .chat-beta { position: relative; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; color: #fff; background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 4px 9px; }

.hc .chat-msgs { flex: 1; overflow-y: auto; padding: 16px; background: var(--page); display: flex; flex-direction: column; gap: 10px; }
.hc .msg { max-width: 85%; padding: 10px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.55; animation: hcMsgIn .24s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hcMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hc .msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 6px; color: var(--body); }
.hc .msg.user { align-self: flex-end; background: var(--blue-500); color: #fff; border-bottom-right-radius: 6px; }
.hc .msg.bot b { color: var(--ink); font-weight: 600; }
.hc .msg-hit { display: block; margin-top: 10px; padding: 10px 12px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; text-decoration: none; cursor: pointer; transition: border-color .14s, background .14s; }
.hc .msg-hit:hover { border-color: var(--blue-300); background: #fff; }
.hc .msg-hit b { display: block; font-size: 13px; color: var(--ink); line-height: 1.4; }
.hc .msg-hit span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--blue-600); }
.hc .msg-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; }
.hc .typing { align-self: flex-start; display: flex; gap: 5px; padding: 13px 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 6px; }
.hc .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-400); animation: hcTp 1.1s infinite; }
.hc .typing i:nth-child(2) { animation-delay: 0.15s; }
.hc .typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes hcTp { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }

.hc .chat-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; background: var(--page); }
.hc .chat-chips:empty { display: none; }
.hc .chat-chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); cursor: pointer; text-align: left; transition: border-color .14s, color .14s; }
.hc .chat-chip:hover { border-color: var(--blue-300); color: var(--blue-600); }

.hc .chat-in { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border-top: 1px solid var(--hairline); }
.hc .chat-in input { flex: 1; min-width: 0; border: none; outline: none; font-family: inherit; font-size: 13.5px; color: var(--ink); background: transparent; }
/* Same dead-space problem as the hero field, in a 62px row: the input was 18px of it. */
.hc .chat-in input { align-self: stretch; height: auto; }
/* Same as the hero field: the message row is the control, not the <input> inside it.
   The caret is the focus cue here — the panel opens with this input already focused. */
.hc .chat-in input:focus, .hc .chat-in input:focus-visible { outline: none; box-shadow: none; }
.hc .chat-in input::placeholder { color: var(--faint); }
.hc .chat-send { flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 12px; background: var(--blue-500); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .16s; }
.hc .chat-send:hover { background: var(--blue-600); }
.hc .chat-send:disabled { background: var(--border); cursor: default; }
.hc .chat-wa { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 9px 14px; background: #0F1B3D; color: #fff; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.hc .chat-wa:hover { background: #1A2E66; }

/* ══════════ Responsive ══════════ */
@media (max-width: 1040px) {
  .hc .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .hc .cat-layout { grid-template-columns: 1fr; }
  .hc .side { position: static; display: flex; overflow-x: auto; gap: 6px; padding: 8px; -webkit-overflow-scrolling: touch; }
  .hc .side-item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .hc .side-item + .side-item { margin-top: 0; }
  /* A chip row is a control row: 10px of padding around a 14.5px label makes 38px, under the 44px
     tokens.css asks for on a coarse pointer. The item is already a centred flex box, so the
     vertical padding can go straight into a minimum.
     44px literal rather than var(--control-height-md): that property is always defined, so the
     fallback never fires and a fine pointer would resolve it to the desktop value, 40. */
  .hc .side-item { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  /* Eight categories in a rail 341px wide, with iOS painting no scrollbar and the rail ending in a
     clean rounded edge — it reads as a finished two-tab control. The fade says the row is cut.
     help.js writes which end is cut, and the fade follows: a rail with nothing hidden to its left
     is flush at that end, and a permanent left fade would sit over the first chip's icon. */
  .hc .side[data-scrolls] { scroll-padding-inline: 28px; }
  .hc .side[data-scrolls="end"] {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent 100%);
  }
  .hc .side[data-scrolls="start"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px);
  }
  .hc .side[data-scrolls="both"] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  }
}
@media (max-width: 640px) {
  .hc .hero { padding: 52px 20px 40px; }
  .hc .hero h1 { font-size: 32px; }
  .hc .shell { padding: 0 16px 64px; }
  .hc .cat-grid { grid-template-columns: 1fr; }
  .hc .panel { padding: 20px 16px; }
  .hc .qa-a { padding-left: 18px; }
  .hc .cta { padding: 32px 24px; }
  .hc .chat-fab { right: 16px; bottom: 16px; }
  /* 72 header + 86 bottom + 18 clearance — see the base rule for why the header is in the budget. */
  .hc .chat { right: 16px; bottom: 86px; max-height: min(600px, calc(100vh - 176px)); max-height: min(600px, calc(100dvh - 176px)); }
  /* A "/" shortcut hint is noise on a device with no keyboard. */
  .hc .search-kbd { display: none; }
  /* `flex-wrap` was here to drop the count chip onto its own row and took the icon with it: flex
     breaks lines at an item's max-content width, and 48 + 16 + the title's 261px overflows a 309px
     box before flex-shrink ever runs, so the icon sat alone on line 1. A two-column grid says what
     was meant — the icon beside the title, the count underneath — and the title shrinks instead.
     `start`, not the base rule's `center`: on a phone the title runs to three or four lines and a
     question page adds a category line under it, which left the icon floating in the middle of an
     empty column. Beside the first line is where the desktop one-liner puts it. */
  .hc .panel-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 14px; }
  .hc .panel-head > div { grid-column: 2; min-width: 0; }
  .hc .qa-count { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
  /* 16px is what keeps iOS Safari from zooming the page when the message field takes focus. */
  .hc .chat-in input { font-size: 16px; }
  /* 7px around a 12.5px label makes a 31px chip, and these are the assistant's only starting point.
     40px is the coarse-pointer --control-height-sm, written out for the reason above the rail. */
  .hc .chat-chip { display: inline-flex; align-items: center; min-height: 40px; padding-top: 0; padding-bottom: 0; }
  .hc .chat-send { width: 40px; height: 40px; }
  /* Uppercase Cyrillic with 0.06em tracking on a dark ground is the hardest thing to read small. */
  .hc .cta-chip { font-size: 12px; padding: 5px 12px; }
  .hc .chat-beta { font-size: 11px; }
  /* The 260px floor exists to push .cta-actions onto its own flex line on a tablet; on a phone the
     actions have wrapped anyway, and below ~365px the floor is wider than the panel's content box —
     the heading ate the right padding and .cta's overflow:hidden clipped what was left. */
  .hc .cta-txt { min-width: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hc .qa-body { transition: none; }
  .hc .qa-chev, .hc .cat-card, .hc .chat, .hc .chat-fab { transition: none; }
  .hc .msg { animation: none; }
  .hc .typing i, .hc .chat-head-t .dot, .hc .search-spin { animation: none; }
}