/* ===========================================================================
   .axl-home — scoped layout + typography helpers.
   Breakpoints are 768px and 1024px so they line up exactly with md: and lg:.
   =========================================================================== */

/* --- production reset ---------------------------------------------------- */
/*
   AXL's Custom layout renderer mounts the shared header, page body and footer
   directly under .ez-wrapper.live. It does not add .page-container. The local
   preview used to add that wrapper, so the platform reset looked available
   locally while browser defaults leaked into the published site. Keep the
   reset on the root we own so preview and production have the same contract.
*/
.axl-page {
  min-width: 0;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text, #171717);
  -webkit-text-size-adjust: 100%;
}

:where(.axl-page, .axl-page *, .axl-page *::before, .axl-page *::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

:where(.axl-page h1, .axl-page h2, .axl-page h3, .axl-page h4, .axl-page h5, .axl-page h6) {
  margin: 0;
  font-family: var(--font-heading, var(--font-body, inherit));
  font-size: inherit;
  font-weight: inherit;
}

:where(.axl-page p, .axl-page figure, .axl-page blockquote, .axl-page dl, .axl-page dd, .axl-page hr) {
  margin: 0;
}

:where(.axl-page ul, .axl-page ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.axl-page a) {
  color: inherit;
  text-decoration: inherit;
}

:where(.axl-page img, .axl-page svg, .axl-page video, .axl-page canvas, .axl-page iframe) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(.axl-page button, .axl-page input, .axl-page select, .axl-page textarea) {
  margin: 0;
  font: inherit;
  color: inherit;
}

:where(.axl-page button, .axl-page [role="button"]) {
  cursor: pointer;
  background-color: transparent;
  background-image: none;
}

:where(.axl-page table) { border-collapse: collapse; }

/* The platform's native lead-form base rules are scoped to .page-container.
   Mirror the required layout and control rules on our real Custom layout root;
   validation, submission and injected messages remain platform-owned. */
:where(.axl-page .ez-form) {
  position: relative;
  width: 100%;
  max-width: 100%;
  font-size: 16px;
}

:where(.axl-page .ez-form form) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

:where(.axl-page .ez-form .form-control) {
  position: relative;
  width: 100%;
  min-width: 0;
}

:where(.axl-page .ez-form label) {
  display: block;
  font-weight: 600;
}

:where(.axl-page .ez-form input, .axl-page .ez-form textarea, .axl-page .ez-form select) {
  width: 100%;
  outline: none;
  border: 1px solid color-mix(in srgb, var(--color-text, #171717) 30%, transparent);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 2;
  color: var(--color-text, #171717);
  background: var(--color-background, #fbfbfa);
}

:where(.axl-page .ez-form textarea) {
  padding: 12px;
  line-height: 1.4;
}

:where(.axl-page .ez-form input, .axl-page .ez-form textarea, .axl-page .ez-form select)::placeholder {
  color: var(--color-text-muted, #5c5c58);
  opacity: 1;
}

.axl-page .ez-form .iti {
  display: block;
  width: 100%;
  max-width: 100%;
}

.axl-page .ez-form .iti input { width: 100%; }
/* --- containers ---------------------------------------------------------- */
/* Container widths, retuned 2026-08-11 after owner review («не нравится что
   смещено сильно»).

   The complaint was composition, not taste. Measured on the built homepage: the
   band ran 1240px and tables and figures filled 1200 of it, while every text
   block was capped at 720 and flush left. A 480px delta between neighbouring
   blocks reads as a ragged right edge and a hole down the right side of the
   page — the reader sees an unfinished layout rather than a reading measure.

   Both sides moved toward each other rather than one of them absorbing the
   whole change: text cannot simply widen (720px at 16px is already ~72
   characters, the top of the comfortable range) and the band cannot simply
   shrink without cramping the ten-column comparison table. The delta is now
   ~320px, which reads as a deliberate breakout instead of a gap. */
.axl-home .band          { box-sizing: border-box; width: 100%; max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.axl-home .page          { box-sizing: border-box; width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.axl-home .measure       { max-width: 68ch; }
.axl-home .measure-wide  { max-width: 940px; }
.axl-home .measure-tight { max-width: 700px; }
.axl-home .measure-wide:is(p, ul, ol),
.axl-home .measure-wide :is(p, li) { max-width: 68ch; }

/* Keep in-page targets below the sticky header after hash navigation. */
.axl-home main [id] { scroll-margin-top: 80px; }

/* --- section rhythm: 64 base / 88 md / 112 lg ---------------------------- */
.axl-home .sec      { padding-top: 64px; padding-bottom: 64px; }
.axl-home .sec-tight{ padding-top: 48px; padding-bottom: 48px; }

/* --- type scale ---------------------------------------------------------- */
.axl-home .t-display { font-family: var(--font-heading); font-weight: 600; font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; }
.axl-home .t-h1      { font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1.1;  letter-spacing: -0.02em; }
.axl-home .t-h2      { font-family: var(--font-heading); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; }
.axl-home .t-h3      { font-family: var(--font-heading); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.axl-home .t-h4      { font-family: var(--font-heading); font-weight: 500; font-size: 17px; line-height: 1.3;  letter-spacing: -0.01em; }
/* Body sizes raised 2026-08-11 after owner review («довольно много мелкого
   текста на ленде»).

   Measured on the built homepage before the change: 195 visible elements at
   14px and 50 at 13px, against 92 at the 16px body size. Two thirds of the
   words on the page were set below body size — so "small" had stopped being an
   accent and become the default, which is what made the page feel cramped.

   The fix is the floor, not the ceiling: 14 → 15 and the eyebrow 12.5 → 13.
   Nothing above body moved, so the headline rhythm the design system set is
   untouched. Body itself gains a point from md: up, where there is room for it.
   If a block still needs to be quieter than its neighbours, that is what
   text-muted is for — not another point of size. */
.axl-home .t-lead    { font-size: 17px; line-height: 1.6; }
.axl-home .t-body    { font-size: 16px; line-height: 1.55; }
.axl-home .t-small   { font-size: 15px; line-height: 1.55; font-weight: 450; }
.axl-home .t-eyebrow { font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.axl-home .t-stat    { font-family: var(--font-heading); font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.axl-home .t-quote   { font-family: var(--font-heading); font-weight: 500; font-size: 21px; line-height: 1.35; letter-spacing: -0.01em; }
.axl-home .t-nav     { font-size: 15px; line-height: 1.4; }
.axl-home .t-menu    { font-family: var(--font-heading); font-weight: 500; font-size: 15px; line-height: 1.35; }
.axl-home .t-code    { font-size: 15px; line-height: 1.5; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; word-break: break-word; }
.axl-home .tnum      { font-variant-numeric: tabular-nums; }
.axl-home .pretty    { text-wrap: pretty; }

@media (min-width: 768px) {
  .axl-home .sec       { padding-top: 88px; padding-bottom: 88px; }
  .axl-home .sec-tight { padding-top: 64px; padding-bottom: 64px; }
  .axl-home .t-display { font-size: 56px; }
  .axl-home .t-h1      { font-size: 40px; }
  .axl-home .t-h2      { font-size: 30px; }
  .axl-home .t-h3      { font-size: 22px; }
  .axl-home .t-h4      { font-size: 18px; }
  .axl-home .t-lead    { font-size: 18px; }
  .axl-home .t-body    { font-size: 17px; }
  .axl-home .t-stat    { font-size: 32px; }
}
@media (min-width: 1024px) {
  .axl-home .sec       { padding-top: 112px; padding-bottom: 112px; }
  .axl-home .sec-tight { padding-top: 72px; padding-bottom: 72px; }
  .axl-home .t-display { font-size: 72px; }
  .axl-home .t-h1      { font-size: 48px; }
  .axl-home .t-h2      { font-size: 34px; }
  .axl-home .t-h3      { font-size: 24px; }
  .axl-home .t-stat    { font-size: 34px; }
  #axl-page-home #hero-headline { font-size: clamp(44px, 4.3vw, 60px); }
}

/* --- hairlines ----------------------------------------------------------- */
/* On light surfaces: 10 / 18 / 28% of the text token.
   On dark (secondary) surfaces: the same ramp off currentColor. */
.axl-home .hair-10  { border-color: color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .hair-18  { border-color: color-mix(in srgb, var(--color-text) 18%, transparent); }
.axl-home .hair-28  { border-color: color-mix(in srgb, var(--color-text) 28%, transparent); }
.axl-home .hair-c14 { border-color: color-mix(in srgb, currentColor 14%, transparent); }
.axl-home .hair-c20 { border-color: color-mix(in srgb, currentColor 20%, transparent); }
.axl-home .hair-c30 { border-color: color-mix(in srgb, currentColor 30%, transparent); }

/* --- radii (10px cards/tables/media is not a Tailwind step) --------------- */
.axl-home .r10 { border-radius: 10px; }
.axl-home .r6  { border-radius: 6px; }

/* --- media --------------------------------------------------------------- */
.axl-home .mat img { display: block; width: 100%; height: auto; border-radius: 6px; }
.axl-home .ratio-16x10 { aspect-ratio: 16 / 10; }
.axl-home .ratio-16x9  { aspect-ratio: 16 / 9; }

/* Product and Solution films use the same answer-first hero composition.
   The eyebrow and headline own the full first read. Supporting copy and
   actions sit below them, beside a larger product film instead of forcing the
   headline and the evidence to compete inside a narrow 7 / 5 split. */
.axl-home .video-hero-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
}
.axl-home .video-hero-heading {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}
.axl-home .video-hero-heading .t-display {
  max-width: 18ch;
  text-wrap: balance;
}
.axl-home .video-hero-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 36px;
}
.axl-home .video-hero-copy {
  display: flex;
  min-width: 0;
  max-width: 42rem;
  flex-direction: column;
  gap: 24px;
}
.axl-home .video-hero-media,
.axl-home .video-hero-media .mat {
  width: 100%;
  min-width: 0;
}
@media (min-width: 768px) {
  .axl-home .video-hero-shell { gap: 40px; }
  .axl-home .video-hero-lower { gap: 44px; }
}
@media (min-width: 1024px) {
  .axl-home .video-hero-shell { gap: 48px; }
  .axl-home .video-hero-heading { gap: 20px; }
  .axl-home .video-hero-lower {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 5.7vw, 72px);
    row-gap: 0;
  }
  .axl-home .video-hero-copy {
    max-width: 31rem;
    padding-top: 4px;
  }
}

/* A Remotion loop in the same mat the screenshots use. These four rules lived
   in a page-level style element on pages/home.html while the homepage hero was
   the only clip on the site; four pillar pages took one on 2026-08-11, so they
   moved here — five copies of a reduced-motion rule is five chances for one of
   them to be edited alone.

   NO TAG-SHAPED TEXT IN THIS COMMENT, and that is not a style preference: this
   file's contents are injected INTO a page style element, and check.mjs strips
   HTML comments before it scans — a CSS comment is not one. An image tag
   written out longhand here is scanned as real markup on all 71 pages and fails
   the img-no-alt rule on every one of them. Cost of learning that: one build.

   Each line is load-bearing:
   · The video fills the mat exactly as `.mat img` does, so a clip and a
     screenshot are the same box and the page does not jump between them.
   · The reduced-motion path swaps in a real image element of the poster rather
     than pausing the video. A paused video still downloads the file, and a
     visitor who asked for no motion should not pay for it.
   · Both point at the SAME poster, so it is fetched once and is the LCP image
     either way.
   · The img rule needs `.mat` in the selector to outrank `.axl-home .mat img`
     above, which sets display:block on every image inside a mat — without it
     the still sits under the video at all times.
   NOTHING may wrap one of these in a fade, a transition or a `reveal`: frame 0
   and the last frame are byte-identical by construction, and a transition
   introduces the seam the clip was built to avoid. */
.axl-home .loop { display: block; width: 100%; height: auto; border-radius: 6px; }
.axl-home .mat img.loop-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .axl-home .feature-video-stage:not([data-feature-audio-engaged]) .loop { display: none; }
  .axl-home .feature-video-stage:not([data-feature-audio-engaged]) img.loop-still { display: block; }
  .axl-home .feature-video-stage[data-feature-audio-engaged] .loop { display: block; }
  .axl-home .feature-video-stage[data-feature-audio-engaged] img.loop-still { display: none; }
}

.axl-home .feature-video-stage { position: relative; overflow: hidden; }
.axl-home .feature-sound-control {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-background) 54%, transparent);
  border-radius: 50%;
  color: var(--color-background);
  background: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
}
.axl-home .feature-sound-control svg { width: 27px; height: 27px; fill: currentColor; }
.axl-home .feature-sound-control path + path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.axl-home .feature-video-stage:hover .feature-sound-control,
.axl-home .feature-video-stage:focus-within .feature-sound-control,
.axl-home .feature-video-stage[data-feature-static] .feature-sound-control {
  opacity: 1;
  pointer-events: auto;
}
.axl-home .feature-sound-control:hover { transform: translate(-50%, -50%) scale(1.06); }
.axl-home .feature-sound-control:active { transform: translate(-50%, -50%) scale(.98); }
.axl-home .feature-sound-control:focus-visible { outline: 3px solid var(--color-background); outline-offset: 4px; }
.axl-home .feature-video-stage[data-feature-audio-engaged] .feature-sound-control { display: none; }
@media (hover: none), (pointer: coarse) {
  .axl-home .feature-video-stage .feature-sound-control {
    width: 56px;
    height: 56px;
    opacity: 1;
    pointer-events: auto;
  }
}

/* The homepage platform film has its own state machine. It is not a seamless
   loop and must never be selected by the generic loop observer. The real source
   remains in markup for discovery; these styles keep the poster and controls in
   one stable 16:9 box while JS decides whether muted preview is appropriate. */
.axl-home .narrated-player { margin: 0; }
.axl-home .narrated-stage { position: relative; overflow: hidden; }
.axl-home .narrated-video { display: block; width: 100%; height: auto; border-radius: 6px; background-color: var(--color-secondary); }
.axl-home .mat img.narrated-still { display: none; }
.axl-home .narrated-actions {
  position: absolute;
  inset: 2px;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--color-foreground) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.axl-home .narrated-control { appearance: none; cursor: pointer; text-align: center; white-space: nowrap; }
.axl-home .narrated-control[hidden] { display: none; }
.axl-home .narrated-sound-control {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-background) 54%, transparent);
  border-radius: 50%;
  color: var(--color-background);
  background: var(--color-primary);
  pointer-events: none;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.axl-home .narrated-sound-control:hover { transform: scale(1.06); background: color-mix(in srgb, var(--color-primary) 82%, var(--color-foreground)); }
.axl-home .narrated-sound-control:active { transform: scale(.98); }
.axl-home .narrated-sound-control:focus-visible { outline: 3px solid var(--color-background); outline-offset: 4px; }
.axl-home .narrated-sound-icon { width: 30px; height: 30px; fill: currentColor; }
.axl-home .narrated-sound-icon path + path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.axl-home .narrated-actions [data-narrated-preview-toggle] {
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 44px;
  pointer-events: none;
}
.axl-home .narrated-player:not([data-narrated-engaged]) .narrated-stage:hover .narrated-actions,
.axl-home .narrated-player:not([data-narrated-engaged]) .narrated-stage:focus-within .narrated-actions,
.axl-home .narrated-player[data-narrated-primary-visible] .narrated-actions { opacity: 1; }
.axl-home .narrated-player:not([data-narrated-engaged]) .narrated-stage:hover .narrated-control,
.axl-home .narrated-player:not([data-narrated-engaged]) .narrated-stage:focus-within .narrated-control,
.axl-home .narrated-player[data-narrated-primary-visible] .narrated-control { pointer-events: auto; }
.axl-home .narrated-caption { margin-top: 10px; }

.axl-home [data-narrated-player][data-static-preview]:not([data-narrated-engaged]) .narrated-video { display: none; }
.axl-home [data-narrated-player][data-static-preview]:not([data-narrated-engaged]) .mat img.narrated-still { display: block; }
@media (prefers-reduced-motion: reduce) {
  .axl-home [data-narrated-player]:not([data-narrated-engaged]) .narrated-video { display: none; }
  .axl-home [data-narrated-player]:not([data-narrated-engaged]) .mat img.narrated-still { display: block; }
  .axl-home .narrated-actions,
  .axl-home .narrated-sound-control { transition: none; }
}
@media (hover: none), (pointer: coarse) {
  .axl-home .narrated-player:not([data-narrated-engaged]) .narrated-actions,
  .axl-home .narrated-player[data-narrated-primary-visible] .narrated-actions { opacity: 1; }
  .axl-home .narrated-player:not([data-narrated-engaged]) .narrated-control,
  .axl-home .narrated-player[data-narrated-primary-visible] .narrated-control { pointer-events: auto; }
  .axl-home .narrated-sound-control { width: 62px; height: 62px; }
  .axl-home .narrated-sound-icon { width: 27px; height: 27px; }
}
/* --- logo ----------------------------------------------------------------
   The brand SVG is a fixed-colour file: the wordmark is #262626 in one variant
   and white in the other, and neither reads the palette. So the page ships
   both and swaps them on the same signals head.html uses for the tokens —
   media query for "follow the system", data-theme for an explicit override.
   Sized by height only, because the two files have different aspect ratios. */
.axl-home .logo        { display: block; width: auto; height: 26px; }
.axl-home .logo-footer { height: 30px; }
.axl-home .logo-dark   { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .axl-home .logo-light { display: none; }
  :root:not([data-theme="light"]) .axl-home .logo-dark  { display: block; }
}
:root[data-theme="dark"]  .axl-home .logo-light { display: none; }
:root[data-theme="dark"]  .axl-home .logo-dark  { display: block; }
:root[data-theme="light"] .axl-home .logo-light { display: block; }
:root[data-theme="light"] .axl-home .logo-dark  { display: none; }

/* --- header + mega-menu -------------------------------------------------- */
.axl-home .hdr-row  { height: 64px; }
/* Keep the compact header stable even if the shared utility stylesheet is
   delayed or unavailable during the first paint. */
@media (max-width: 1023px) {
  .axl-home #header-talk { display: none; }
}
/* The open mega-menu had no visible bottom edge: it is the same
   `bg-background` as the page it drops over, so the panel and the content below
   it read as one surface and the menu looked like it had no end.

   Two changes, both about telling the reader where the panel stops:
   1. The panel sits on `--color-surface` instead of the page background, so it
      is a distinct plane rather than an extension of the page, and its bottom
      hairline goes to 28% so the edge is legible in both themes.
   2. An underlay dims and blurs the page behind it. `backdrop-filter` is
      progressive: where it is unsupported the underlay is still a dim, so the
      boundary survives regardless. It sits BELOW the panel in z-order and above
      the page, and is pointer-transparent so it never eats a click — the menu
      closes on mouseleave and Escape as before. */
.axl-home .mega     { position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
                      background-color: var(--color-surface);
                      border-bottom: 1px solid color-mix(in srgb, var(--color-text) 28%, transparent); }
.axl-home .mega[hidden] { display: none; }
/* `absolute`, not `fixed`: a fixed element resolves `top:100%` against the
   VIEWPORT, which put the whole underlay below the screen — dimming nothing.
   Absolute resolves it against the positioned .mega, so the underlay starts
   exactly at the panel's bottom edge. */
.axl-home .mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh;
                         background-color: color-mix(in srgb, var(--color-text) 22%, transparent);
                         backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
                         pointer-events: none; z-index: -1; }
@media (prefers-reduced-motion: reduce) {
  .axl-home .mega::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.axl-home .menu-link { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; margin-left: -10px; border-radius: 8px; }
.axl-home .menu-link:hover { background-color: var(--color-surface); }
.axl-home .menu-link[aria-current="page"],
.axl-home .drawer-row[aria-current="page"],
.axl-home .navbtn[aria-current="page"],
.axl-home .navbtn[data-current-section="true"],
.axl-home [data-drawer-trigger][data-current-section="true"] {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: 600;
}
/* Toggle pairs (the stack-table filter and any future compare filter): the
   pressed side is visibly ON — primary tint, primary border, primary ink.
   Owner, 2026-08-14: «кнопки сверху надо активную подсветить». The state is
   aria-pressed, which base.js already maintains, so this is CSS only. */
.axl-home [data-replaces-filter][aria-pressed="true"],
.axl-home [data-compare-filter][aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
/* Card-shaped LINKS (the nine-jobs grid, the solutions router, read-next
   grids — every <a> that paints bg-surface) get the same hover the feature
   cards have: lift + border warming. Owner, 2026-08-14: «карточки чтобы
   что-то делали при наведении». Transition-only — the reduced-motion blanket
   kill covers it. */
.axl-home a.bg-surface { transition: border-color .18s ease, translate .18s ease; }
.axl-home a.bg-surface:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  translate: 0 -3px; }
.axl-home .navbtn { padding: 8px 12px; border-radius: 6px; }
.axl-home .navbtn:hover, .axl-home .navbtn[aria-expanded="true"] { background-color: color-mix(in srgb, currentColor 8%, transparent); }

/* Primary actions need visible hover and pressed feedback. */
.axl-home a.bg-primary:hover,
.axl-home button.bg-primary:hover { background-color: color-mix(in srgb, var(--color-primary) 88%, var(--color-text)) !important; }
.axl-home a.bg-primary:active,
.axl-home button.bg-primary:active { translate: 0 1px; }

/* --- mobile drawer -------------------------------------------------------
   The phone menu is a thumb-first full-screen surface, not a floating text box.
   Parent rows are 58px, child links are 48px, and only one group opens at a
   time. The scrollbar stays visually hidden because touch users scroll the
   menu directly; keyboard, wheel and touch scrolling all remain available. */
.axl-home .drawer-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 72px;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 74%, transparent);
  cursor: pointer;
}
.axl-home .drawer-open-icon { position: relative; display: block; width: 17px; height: 12px; }
.axl-home .drawer-open-icon i {
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
}
.axl-home .drawer-open-icon i:first-child { top: 2px; }
.axl-home .drawer-open-icon i:last-child { bottom: 2px; width: 12px; }
.axl-home .drawer-open-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* The platform utility class `lg:hidden` is lower-specificity than the
   component rule above. Own the breakpoint here so the mobile control and its
   drawer can never leak into the desktop header when stylesheet order changes. */
@media (min-width: 1024px) {
  .axl-home #drawer-open,
  .axl-home #mobile-drawer { display: none; }
}
.axl-home .drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  overflow: hidden;
  isolation: isolate;
}
.axl-home .drawer[hidden] { display: none; }
.axl-home .drawer-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: color-mix(in srgb, var(--color-text) 38%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: axl-drawer-backdrop-in .18s ease-out both;
}
.axl-home .drawer-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 24px));
  height: min(820px, calc(100dvh - 24px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 18px;
  box-shadow: -24px 0 80px color-mix(in srgb, var(--color-text) 24%, transparent);
  animation: axl-drawer-sheet-in .22s cubic-bezier(.22,.9,.3,1) both;
}
.axl-home #drawer-head { flex: 0 0 auto; min-height: 68px; padding: 0 16px 0 18px; }
.axl-home .drawer-title {
  padding-left: 12px;
  border-left: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.axl-home .drawer-close-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent);
  cursor: pointer;
}
.axl-home .drawer-close-btn svg { width: 22px; height: 22px; }
.axl-home .drawer-close-btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: rotate(4deg); }
.axl-home .drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 14px 14px max(24px, env(safe-area-inset-bottom));
}
.axl-home .drawer-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.axl-home .drawer-actions { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.axl-home .drawer-actions a#drawer-cta,
.axl-home .drawer-actions a#drawer-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 11px;
}
.axl-home .drawer-actions #drawer-signin {
  border-color: color-mix(in srgb, var(--color-text) 18%, transparent);
  background: color-mix(in srgb, var(--color-surface) 72%, transparent);
}
.axl-home .drawer-actions #drawer-signin:hover { border-color: var(--color-primary); color: var(--color-primary); }
.axl-home .drawer-nav { display: flex; flex-direction: column; gap: 8px; }
.axl-home .drawer-nav > [id^="drawer-group-"],
.axl-home .drawer-direct {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent) !important;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-surface) 68%, transparent);
}
.axl-home .drawer-sheet a, .axl-home .drawer-sheet button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.axl-home .drawer-row { min-height: 58px; padding: 0 16px; }
.axl-home .drawer-row:active { background: color-mix(in srgb, var(--color-primary) 13%, transparent); color: var(--color-primary); }
.axl-home .drawer-direct.drawer-row.drawer-row { min-height: 58px; }
.axl-home .drawer-direct { font-family: var(--font-heading); font-weight: 600; }
.axl-home .drawer-arrow { color: var(--color-primary); font-size: 20px; }
.axl-home [data-drawer-trigger] {
  min-height: 58px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.axl-home [id^="drawer-sign-"] {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
}
.axl-home [data-drawer-trigger][aria-expanded="true"] { color: var(--color-primary); }
.axl-home [data-drawer-trigger][aria-expanded="true"] [id^="drawer-sign-"] {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}
.axl-home .drawer-nav .acc-panel {
  gap: 2px;
  margin: 0 8px;
  padding: 4px 0 10px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
}
.axl-home .drawer-nav .acc-panel .drawer-row {
  min-height: 48px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.3;
}
.axl-home .drawer-nav .acc-panel .drawer-row:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-text);
}
.axl-home .drawer-row[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.axl-home .drawer-utility-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
.axl-home .drawer-utility-links .drawer-row.drawer-row {
  min-height: 56px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-surface) 48%, transparent);
}
@keyframes axl-drawer-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes axl-drawer-sheet-in { from { opacity: .7; transform: translate3d(28px, 0, 0) scale(.985); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@media (max-width: 1023px) {
  .axl-home .drawer { padding: 0; }
  .axl-home .drawer-sheet { width: 100%; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .axl-home #drawer-head { padding-top: env(safe-area-inset-top); min-height: calc(68px + env(safe-area-inset-top)); }
}
@media (max-width: 359px) {
  .axl-home .drawer-open-btn { min-width: 44px; width: 44px; padding: 0; }
  .axl-home .drawer-open-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.axl-home .tap { min-height: 48px; }

/* --- proof strip --------------------------------------------------------- */
.axl-home .statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.axl-home .statgrid > * {
  position: relative;
  min-height: 118px;
  padding: 38px 18px 18px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--color-text) 4%, transparent);
}
.axl-home .statgrid > *::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 30px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--color-accent);
  opacity: 0.82;
}
.axl-home .statgrid > *::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  z-index: -1;
  width: 100px;
  height: 100px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
  border-radius: 50%;
  opacity: 0.45;
}
.axl-home .statgrid > *:last-child { grid-column: 1 / -1; }
.axl-home .statgrid .t-stat { font-size: clamp(32px, 4vw, 44px); }
.axl-home .statgrid .t-small { max-width: 18ch; text-wrap: balance; }
@media (min-width: 768px) {
  .axl-home .statgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .axl-home .statgrid > * { grid-column: span 2; }
  .axl-home .statgrid > *:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .axl-home .statgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .axl-home .statgrid > *,
  .axl-home .statgrid > *:nth-child(n+4),
  .axl-home .statgrid > *:last-child { grid-column: span 1; }
  .axl-home .statgrid > * { min-height: 132px; padding: 42px 20px 20px; }
  .axl-home .statgrid > *::before { left: 20px; }
}

/* --- tables -------------------------------------------------------------- */
.axl-home .tbl-scroll { overflow-x: auto; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); border-radius: 10px; }
.axl-home .tbl { width: 100%; min-width: 680px; font-size: 14.5px; line-height: 1.45; border-collapse: collapse; }
.axl-home .tbl caption { text-align: left; padding: 14px 16px; font-size: 14px; line-height: 1.45; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .tbl th, .axl-home .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; }
.axl-home .tbl thead th { font-family: var(--font-heading); font-weight: 600; }
.axl-home .tbl tbody th, .axl-home .tbl tbody td { border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .tbl tbody th { font-weight: 450; }
.axl-home .tbl .stick { position: sticky; left: 0; }
.axl-home .tbl .axl-cell { background-color: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.axl-home .tbl tr[hidden] { display: none; }

/* --- agent transcript ---------------------------------------------------- */
.axl-home .turn { padding-left: 14px; border-left: 2px solid color-mix(in srgb, currentColor 20%, transparent); }
.axl-home .tool { display: block; font-size: 14px; line-height: 1.55; opacity: 0.6; font-variant-numeric: tabular-nums; }
.axl-home .tool b { font-weight: 500; }
.axl-home .speech { font-size: 15.5px; line-height: 1.55; }
/* Prompt shown as a text field with its own Copy button (owner 2026-10-23: «показать как поле
   текстовое»). currentColor-based so it reads on evidence panels in both themes; the text is not
   capped at 68ch, the field spans the panel. */
.axl-home .prompt-field { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); border-radius: 8px;
  background: color-mix(in srgb, currentColor 6%, transparent); }
.axl-home .prompt-field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.axl-home .prompt-field .prompt-field-text { margin: 0; max-width: none; font-size: 15.5px; line-height: 1.55; }

/* --- accordion ----------------------------------------------------------- */
.axl-home .acc-btn { width: 100%; display: flex; justify-content: space-between; gap: 16px; text-align: left; padding: 18px 2px; border: 0; background: transparent; }
.axl-home .acc-panel[hidden] { display: none; }

/* --- steps / bullets ----------------------------------------------------- */
.axl-home .bul { display: flex; gap: 10px; }
.axl-home .bul-mark { flex-shrink: 0; }
/* The check glyph's viewBox is optically top-heavy beside 15px list copy. */
#axl-page-home [id^="products-"][id$="-points"] .ico { translate: 0 2px; }

/* --- lead form skin (styling only — markup, validation, messages and submit
       behaviour are injected and owned by the platform runtime) ------------ */
/* textarea joined these three on 2026-08-15, when /contact gained a message
   field. Without it the box inherits the browser's default chrome and sits in
   the card looking like a bug. `resize: vertical` because a horizontal drag
   breaks the card's grid column, and the inherited font because a textarea is
   the one control that does not inherit one. */
.axl-home .ez-form input,
.axl-home .ez-form textarea { border-radius: 6px; border-color: color-mix(in srgb, var(--color-text) 20%, transparent); }
.axl-home .ez-form input:focus,
.axl-home .ez-form textarea:focus { border-color: var(--color-primary); }
.axl-home .ez-form input.invalid,
.axl-home .ez-form textarea.invalid { border-color: var(--color-accent); background-color: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.axl-home .ez-form textarea { resize: vertical; font: inherit; }
.axl-home .field-error { background-color: var(--color-accent); color: var(--color-background); border-radius: 4px; }
.axl-home .form-error { color: var(--color-accent); font-size: 14px; margin-top: 6px; }
.axl-home .ez-form-message { background-color: color-mix(in srgb, var(--color-background) 94%, transparent); color: var(--color-text); border: 1px solid var(--color-primary); border-radius: 6px; }

/* --- target size (WCAG 2.5.8) --------------------------------------------
   Standalone links — the arrow CTAs and every footer link — are not "inline in
   a sentence", so the exception does not apply and they need a 24px target.
   Selected by id suffix so no markup carries a presentational class. Inline
   links inside prose are deliberately untouched: padding them would break the
   line box. On mobile the primary controls go to 44px (2.5.5). */
.axl-home a[id$="-link"],
.axl-home a[id$="-cta"],
.axl-home a[id$="-cta-secondary"],
.axl-home a[id$="-cta-tertiary"],
.axl-home #site-footer a { display: inline-flex; align-items: center; min-height: 24px; }
.axl-home #site-footer a { min-height: 28px; }
@media (max-width: 767px) {
  .axl-home #header-cta { white-space: nowrap; flex-shrink: 0; padding-left: 10px; padding-right: 10px; }
  .axl-home nav[aria-label="Breadcrumb"] li[aria-current="page"],
  .axl-home nav[aria-label="Breadcrumb"] li[aria-hidden="true"]:has(+ li[aria-current="page"]) { display: none; }
  .axl-home #header-cta,
  .axl-home #drawer-open,
  .axl-home #drawer-close,
  .axl-home #hero-code-copy,
  .axl-home #compare-toggle-all,
  .axl-home #compare-toggle-cut,
  .axl-home #replaces-toggle-lean,
  .axl-home #replaces-toggle-all,
  .axl-home .acc-btn { min-height: 44px; }
}

/* --- long-page navigation -------------------------------------------------
   Long solution, comparison, developer and editorial pages expose their map
   before the reading starts. This is a navigation aid, not another content
   section, so it stays compact and scrolls horizontally on small screens. */
.axl-home .page-jump { padding: 18px 0; }
.axl-home .page-jump-nav { display: flex; align-items: center; gap: 18px; min-width: 0; }
.axl-home .page-jump-label { flex: 0 0 auto; color: var(--color-text-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.axl-home .page-jump-links { display: flex; gap: 8px 18px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.axl-home .page-jump-links a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; color: var(--color-primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.axl-home .page-jump-links a::after { content: "↓"; margin-left: 6px; font-size: 11px; }
.axl-home .decision-summary { background-color: color-mix(in srgb, var(--color-primary) 5%, var(--color-background)); }
.axl-home .decision-summary > .band { max-width: 940px; }
.axl-home .reading-centered > .band { max-width: 920px; }
.axl-home .article-reading > .band { max-width: 920px; }
.axl-home article > section > .band { max-width: 860px; }
.axl-home article .measure,
.axl-home article .measure-wide { width: 100%; margin-left: auto; margin-right: auto; }
.axl-home article .measure-wide { max-width: 760px; }
.axl-home article .t-body { line-height: 1.72; }
.axl-home article .t-lead { max-width: 62ch; line-height: 1.62; }
.axl-home article .tbl-scroll,
.axl-home article figure { margin-left: auto; margin-right: auto; }
.axl-home article [id$="-takeaways"] {
  border-color: color-mix(in srgb, var(--color-primary) 26%, transparent);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-background)), color-mix(in srgb, var(--color-accent) 4%, var(--color-background)));
}
.axl-home article [id$="-takeaways"] li { line-height: 1.62; }
.axl-home article details[id$="-toc"] { background-color: color-mix(in srgb, var(--color-text) 2%, var(--color-background)); }
.axl-home article details[id$="-toc"] summary { cursor: pointer; }
.axl-home article details[id$="-toc"][open] summary { margin-bottom: 16px; }
.axl-home article details[id$="-toc"] summary::marker { color: var(--color-accent); }
.axl-home article .t-h2 { max-width: 24ch; }
@media (min-width: 1024px) {
  .axl-home article > section.sec { padding-top: 80px; padding-bottom: 80px; }
  .axl-home article > section.sec-tight { padding-top: 56px; padding-bottom: 56px; }
}
@media (max-width: 767px) {
  .axl-home article > section.sec { padding-top: 52px; padding-bottom: 52px; }
  .axl-home article > section.sec-tight { padding-top: 40px; padding-bottom: 40px; }
  .axl-home article [id$="-takeaways"] { padding: 20px; }
}
.axl-home .article-toc-wrap { margin-bottom: 40px; }
.axl-home .article-toc { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); }
.axl-home .article-toc-links { display: grid; grid-template-columns: 1fr; gap: 10px 24px; margin-top: 14px; }
.axl-home .article-toc-links a { color: var(--color-primary); font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; }
@media (min-width: 768px) {
  .axl-home .article-toc-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .axl-home .page-jump-nav { align-items: flex-start; flex-direction: column; gap: 8px; }
  .axl-home .page-jump-links { width: 100%; padding-bottom: 4px; }
}
/* --- features hub ---------------------------------------------------------
   /features is a visual product map. It uses a dense bento with real checked-in
   product frames, short capability labels and a visible journey rail. Keep the
   page scoped by its ids so pillar pages retain their own quick-answer layout. */
.axl-home #features-hero { overflow: clip; }
.axl-home .features-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: center;
  padding-top: 36px;
}
.axl-home .features-hero-content { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.axl-home .features-hero-media { position: relative; min-width: 0; margin: 0; }
.axl-home .features-hero-media::before {
  content: "";
  position: absolute;
  inset: 10% -8% -10% 18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 70%);
  filter: blur(48px);
  opacity: .75;
}
.axl-home .features-hero-media img { display: block; width: 100%; height: auto; border-radius: 6px; }
.axl-home .features-proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 620px);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}
.axl-home .features-proof-strip li { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 14px 17px 0; }
.axl-home .features-proof-strip li + li { padding-left: 14px; border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.axl-home .features-proof-strip strong { color: var(--color-text); font-family: var(--font-heading); font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.axl-home .features-proof-strip span { color: var(--color-text-muted); font-size: 12px; line-height: 1.35; }

.axl-home .features-catalog { position: relative; overflow: clip; }
.axl-home .features-catalog-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: end; }
.axl-home .features-catalog-copy { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.axl-home .features-catalog-head > p { max-width: 48ch; }
.axl-home .features-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 34px 0 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}
.axl-home .features-flow li { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 12px; color: var(--color-text-muted); }
.axl-home .features-flow li + li { border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.axl-home .features-flow span { color: var(--color-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.axl-home .features-flow strong { color: var(--color-text); font-family: var(--font-heading); font-size: 14px; font-weight: 600; }

.axl-home .features-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.axl-home .features-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 238px;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  background-image:
    radial-gradient(100% 90% at 100% 0%, color-mix(in srgb, var(--color-primary) 9%, transparent), transparent 64%);
  text-decoration: none;
  transition: border-color .2s ease, translate .2s ease, box-shadow .2s ease;
}
.axl-home .features-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 62%, transparent);
  translate: 0 -4px;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.axl-home .features-card-main { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.axl-home .features-card-head { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; }
.axl-home .features-card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  border-radius: 12px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 9%, transparent);
}
.axl-home .features-card-icon .ico { width: 22px; height: 22px; }
.axl-home .features-card-arrow { color: var(--color-primary); font-size: 23px; line-height: 1; transition: transform .2s ease; }
.axl-home .features-card:hover .features-card-arrow { transform: translateX(4px); }
.axl-home .features-card p { max-width: 54ch; }
.axl-home .features-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.axl-home .features-card-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-left: 2px solid color-mix(in srgb, var(--color-primary) 58%, transparent);
  border-radius: 3px;
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.25;
}
.axl-home .features-card--visual { min-height: 440px; padding-bottom: 0; }
.axl-home .features-card-media {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  margin: 24px -24px 0;
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: var(--color-secondary);
}
.axl-home .features-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.axl-home .features-card--assistant { min-height: 420px; }
.axl-home .features-connection {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
  margin-top: 12px;
  padding: 28px;
  border-radius: 16px;
}
.axl-home .features-connection-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 620px; }
.axl-home .features-connection-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.axl-home .features-connection-steps li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 116px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, currentColor 4%, transparent);
}
.axl-home .features-connection-steps span { color: var(--color-accent); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.axl-home .features-connection-steps strong { font-family: var(--font-heading); font-size: 14px; font-weight: 600; }

@media (min-width: 640px) {
  .axl-home .features-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axl-home .features-card--visual,
  .axl-home .features-card--assistant { grid-column: span 2; }
  .axl-home .features-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .axl-home .features-catalog-head { grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 48px; }
  .axl-home .features-connection { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 36px; align-items: center; }
  .axl-home .features-connection-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .axl-home .features-hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; padding-top: 48px; }
  .axl-home .features-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .axl-home .features-span-4 { grid-column: span 4; }
  .axl-home .features-span-5 { grid-column: span 5; }
  .axl-home .features-span-6 { grid-column: span 6; }
  .axl-home .features-span-7 { grid-column: span 7; }
  .axl-home .features-span-12 { grid-column: span 12; }
  .axl-home .features-card--assistant { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; padding-right: 0; padding-bottom: 24px; }
  .axl-home .features-card--assistant .features-card-media { height: 100%; aspect-ratio: auto; margin: -24px 0 -24px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
}
@media (max-width: 639px) {
  .axl-home .features-proof-strip strong { font-size: 21px; }
  .axl-home .features-card { padding: 20px; border-radius: 13px; }
  .axl-home .features-card-media { margin-right: -20px; margin-left: -20px; }
  .axl-home .features-connection { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .axl-home .features-card,
  .axl-home .features-card-arrow { transition: none; }
  .axl-home .features-card:hover { translate: none; }
}

/* --- feature quick answer -------------------------------------------------
   Product pages use this immediately after the hero. One real product screen
   balances a concise answer; four hairline-separated outcomes replace a long
   text-only opening. Technical detail stays available without owning the first
   reading pass. */
.axl-home .feature-proof-wrap { display: flex; flex-direction: column; gap: 32px; }
.axl-home .feature-proof-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.axl-home .feature-proof-copy { display: flex; flex-direction: column; gap: 16px; max-width: 68ch; }
.axl-home .feature-proof-media { margin: 0; min-width: 0; }
.axl-home .feature-proof-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 4px; }
.axl-home .feature-proof-nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.axl-home .feature-proof-nav a::after { content: "↓"; margin-left: 6px; font-size: 12px; }
/* 2026-10-23 (owner: «много полосок»): the four points are plain columns, no rules between them. */
.axl-home .feature-proof-list { display: grid; grid-template-columns: 1fr; gap: 20px; }
.axl-home .feature-proof-item { display: flex; flex-direction: column; gap: 6px; color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.axl-home .feature-proof-index { color: var(--color-accent); font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.axl-home .feature-proof-details { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); }
.axl-home .feature-proof-details > summary { cursor: pointer; list-style: none; padding: 14px 0 18px; }
.axl-home .feature-proof-details > summary::-webkit-details-marker { display: none; }
.axl-home .feature-proof-details > summary::after { content: "+"; display: inline-block; margin-left: 10px; color: var(--color-accent); }
.axl-home .feature-proof-details[open] > summary::after { content: "−"; }
.axl-home .feature-proof-details-body { display: grid; gap: 14px; max-width: 76ch; padding: 0 0 24px; }

@media (min-width: 640px) {
  .axl-home .feature-proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (min-width: 1024px) {
  .axl-home .feature-proof-wrap { gap: 40px; }
  .axl-home .feature-proof-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .axl-home .feature-proof-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* --- product screenshot gallery ------------------------------------------
   "See it in AXL" on feature pages: real screens from the demo account as
   thumbnails. Each thumbnail is an ordinary link to the full-size WebP, so it
   works with no script; base.js.html upgrades the links to one shared
   <dialog> lightbox. Thumbnails crop to one 16:10 frame from the top-left,
   where every admin screen keeps its title and tabs. */
.axl-home .shot-gallery-head { display: flex; flex-direction: column; gap: 12px; max-width: 68ch; }
.axl-home .shot-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; margin-top: 28px; }
/* Four classes: the shared standalone-anchor rule in a11y.html would otherwise
   turn the link into a centred inline-flex row. */
.axl-home .shot-gallery .shot-gallery-item .shot-gallery-link { display: flex; flex-direction: column; align-items: stretch; gap: 10px; color: var(--color-text); text-decoration: none; border-radius: 10px; }
.axl-home .shot-gallery .mat { display: block; aspect-ratio: 16 / 10; overflow: hidden; transition: border-color .18s ease, translate .18s ease; }
.axl-home .shot-gallery .mat img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.axl-home .shot-gallery-link:hover .mat { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent); translate: 0 -3px; }
.axl-home .shot-gallery-link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; }
.axl-home .shot-gallery-caption { font-size: 14px; line-height: 1.4; font-weight: 500; }
.axl-home .shot-gallery-caption::after { content: " ↗"; color: var(--color-primary); }
@media (min-width: 1024px) {
  .axl-home .shot-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; margin-top: 36px; }
  .axl-home .shot-gallery-caption { font-size: 15px; }
}
.axl-home .shot-lightbox { box-sizing: border-box; width: calc(100vw - 24px); max-width: 1280px; max-height: calc(100dvh - 24px); margin: auto; padding: 0; overflow: hidden;
  color: var(--color-text); background-color: var(--color-background); border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); border-radius: 12px; }
.axl-home .shot-lightbox::backdrop { background-color: color-mix(in srgb, var(--color-secondary) 82%, transparent); }
.axl-home .shot-lightbox[open] { display: flex; flex-direction: column; }
.axl-home .shot-lightbox-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .shot-lightbox-title { flex: 1 1 auto; min-width: 0; margin: 0; font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.axl-home .shot-lightbox-count { flex: 0 0 auto; color: var(--color-text-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.axl-home .shot-lightbox button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; cursor: pointer;
  color: var(--color-text); background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); border-radius: 8px; font-size: 20px; line-height: 1; }
.axl-home .shot-lightbox button:hover { color: var(--color-primary); border-color: var(--color-primary); }
.axl-home .shot-lightbox button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.axl-home .shot-lightbox-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; background-color: var(--color-surface); }
.axl-home .shot-lightbox-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .shot-lightbox-foot { display: flex; align-items: center; gap: 12px; padding: 10px; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-home .shot-lightbox-desc { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.45; }
.axl-home .shot-lightbox[data-single] .shot-lightbox-nav,
.axl-home .shot-lightbox[data-single] .shot-lightbox-count { display: none; }
@media (prefers-reduced-motion: reduce) {
  .axl-home .shot-gallery .mat { transition: none; }
  .axl-home .shot-gallery-link:hover .mat { translate: none; }
}

/* --- ambient depth + cursor light ---------------------------------------
   Keep the page readable first. Every hero gets two token-derived blurred
   lights, while only the three broad routing pages receive the slow icon
   field created in base.js. Interactive cards get one delegated pointer
   spotlight instead of one listener per card. No effect touches forms. */
.axl-home main > section:first-child {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-image:
    radial-gradient(70% 90% at 8% 0%, color-mix(in srgb, var(--color-primary) 12%, transparent), transparent 68%),
    radial-gradient(54% 76% at 96% 12%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 72%);
}
.axl-home main > section:first-child::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -34%;
  right: -12%;
  width: min(680px, 72vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 22%, transparent) 0%, color-mix(in srgb, var(--color-primary) 7%, transparent) 42%, transparent 72%);
  filter: blur(58px);
  opacity: .8;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  animation: axl-hero-breathe 15s ease-in-out infinite alternate;
}
.axl-home[data-ambient-static] main > section:first-child::before { animation: none; }
.axl-home main > section:first-child > :not(.ambient-orbit) {
  position: relative;
  z-index: 1;
}
.axl-home .ambient-orbit {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.axl-home .ambient-orbit-item {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  border-radius: 13px;
  color: color-mix(in srgb, var(--color-primary) 78%, var(--color-text));
  background-color: color-mix(in srgb, var(--color-surface) 68%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-background) 72%, transparent),
    0 18px 55px color-mix(in srgb, var(--color-primary) 12%, transparent);
  opacity: .42;
  transform: translate3d(0, 0, 0) rotate(-4deg);
  animation: axl-orbit-a 20s ease-in-out infinite alternate;
}
.axl-home .ambient-orbit-item .ico { width: 21px; height: 21px; }
.axl-home .ambient-orbit-item:nth-child(1) { top: 12%; left: 2%; animation-delay: -6s; }
.axl-home .ambient-orbit-item:nth-child(2) { top: 7%; right: 4%; animation-name: axl-orbit-b; animation-duration: 24s; animation-delay: -13s; }
.axl-home .ambient-orbit-item:nth-child(3) { bottom: 10%; left: 8%; animation-duration: 27s; animation-delay: -17s; }
.axl-home .ambient-orbit-item:nth-child(4) { right: 1%; bottom: 16%; color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 24%, transparent); animation-name: axl-orbit-b; animation-duration: 22s; animation-delay: -4s; }
.axl-home .ambient-orbit-item:nth-child(5) { top: 42%; left: 48%; width: 36px; opacity: .26; animation-duration: 29s; animation-delay: -21s; }
.axl-home[data-ambient-page]:not(#axl-page-home) .ambient-orbit-item { opacity: .5; }
.axl-home[data-ambient-page]:not(#axl-page-home) .ambient-orbit-item:nth-child(3) { bottom: 5%; left: 48%; }
.axl-home[data-ambient-page]:not(#axl-page-home) .ambient-orbit-item:nth-child(5) { top: 58%; left: 6%; }
.axl-home[data-ambient-family="editorial"] .ambient-orbit-item { width: 34px; border-radius: 50%; opacity: .24; }
.axl-home[data-ambient-family="compare"] .ambient-orbit-item { opacity: .34; }
.axl-home[data-ambient-family="technical"] .ambient-orbit-item { border-radius: 8px; color: var(--color-accent); }
.axl-home[data-ambient-family="trust"] .ambient-orbit-item { width: 36px; opacity: .22; }

.axl-home[data-ambient-family] main > section:first-child::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  transform: translate3d(0, 0, 0);
  animation: axl-pattern-shift 26s ease-in-out infinite alternate;
}
.axl-home[data-ambient-family="editorial"] main > section:first-child::after {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 26%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .22;
}
.axl-home[data-ambient-family="compare"] main > section:first-child::after {
  background-image: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 18%, transparent) 1px, transparent 1px);
  background-size: 100% 30px;
}
.axl-home[data-ambient-family="technical"] main > section:first-child::after {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--color-primary) 16%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-primary) 16%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
}
.axl-home[data-ambient-family="trust"] main > section:first-child::after {
  background-image: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 68%);
  opacity: .3;
}
.axl-home[data-ambient-static] main > section:first-child::after { animation: none; }

.axl-home main > section.feature-proof,
.axl-home main > section.decision-summary,
.axl-home main > section.reading-centered {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-image: radial-gradient(72% 120% at 92% 24%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%);
}
.axl-home main > section.feature-proof::before,
.axl-home main > section.decision-summary::before,
.axl-home main > section.reading-centered::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(460px, 58vw);
  aspect-ratio: 1;
  right: -16%;
  bottom: -58%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 13%, transparent), transparent 68%);
  filter: blur(46px);
  opacity: .72;
  pointer-events: none;
  animation: axl-section-drift 18s ease-in-out infinite alternate;
}
.axl-home main > section.feature-proof > *,
.axl-home main > section.decision-summary > *,
.axl-home main > section.reading-centered > * { position: relative; z-index: 1; }
.axl-home[data-ambient-static] main > section.feature-proof::before,
.axl-home[data-ambient-static] main > section.decision-summary::before,
.axl-home[data-ambient-static] main > section.reading-centered::before { animation: none; }

@keyframes axl-hero-breathe {
  from { transform: translate3d(-2%, -1%, 0) scale(.96); }
  to { transform: translate3d(3%, 3%, 0) scale(1.06); }
}
@keyframes axl-orbit-a {
  from { transform: translate3d(-6px, 8px, 0) rotate(-5deg); }
  to { transform: translate3d(12px, -14px, 0) rotate(5deg); }
}
@keyframes axl-orbit-b {
  from { transform: translate3d(8px, -6px, 0) rotate(4deg); }
  to { transform: translate3d(-14px, 12px, 0) rotate(-6deg); }
}
@keyframes axl-section-drift {
  from { transform: translate3d(-4%, 2%, 0) scale(.94); }
  to { transform: translate3d(8%, -5%, 0) scale(1.08); }
}
@keyframes axl-pattern-shift {
  from { transform: translate3d(-1%, -1%, 0) scale(1.01); }
  to { transform: translate3d(1%, 2%, 0) scale(1.04); }
}

@media (max-width: 767px) {
  .axl-home .ambient-orbit-item { width: 36px; opacity: .28; }
  .axl-home .ambient-orbit-item:nth-child(4),
  .axl-home .ambient-orbit-item:nth-child(5) { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .axl-home [data-spotlight-card] {
    --spot-x: 50%;
    --spot-y: 50%;
    --spot-opacity: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  .axl-home [data-spotlight-card]::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(280px circle at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--color-primary) 18%, transparent), color-mix(in srgb, var(--color-accent) 5%, transparent) 38%, transparent 70%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--color-background) 34%, transparent);
    opacity: var(--spot-opacity);
    pointer-events: none;
    transition: opacity .24s ease;
  }
  .axl-home [data-spotlight-card] > * { position: relative; z-index: 1; }
  .axl-home [data-spotlight-card]:focus-within { --spot-opacity: .58; }
}
.axl-home .narrated-stage {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-background) 32%, transparent),
    0 28px 88px color-mix(in srgb, var(--color-primary) 11%, transparent);
}
/* --- telephony product surface ------------------------------------------ */
.axl-home .tel-hero { position: relative; isolation: isolate; overflow: clip; }
.axl-home .tel-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(760px, 70vw);
  aspect-ratio: 1;
  right: -18%;
  top: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 17%, transparent), transparent 68%);
  filter: blur(54px);
  opacity: .72;
}
.axl-home .tel-console {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 34px 90px color-mix(in srgb, var(--color-primary) 13%, transparent);
}
.axl-home .tel-console::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), transparent 82%);
}
.axl-home .tel-console-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.axl-home .tel-console-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--color-background);
  background-color: var(--color-primary);
}
.axl-home .tel-live { color: var(--color-accent); padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); border-radius: 999px; }
.axl-home .tel-wave { display: flex; height: 118px; align-items: center; justify-content: center; gap: 7px; margin: 22px 0; border-block: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.axl-home .tel-wave span { width: 5px; height: 30%; border-radius: 999px; background-color: var(--color-primary); opacity: .72; animation: tel-wave 1.4s ease-in-out infinite alternate; }
.axl-home .tel-wave span:nth-child(2n) { height: 62%; animation-delay: -.6s; }
.axl-home .tel-wave span:nth-child(3n) { height: 88%; animation-delay: -1s; }
.axl-home .tel-wave span:nth-child(5n) { height: 42%; animation-delay: -.3s; }
.axl-home .tel-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.axl-home .tel-controls span { display: grid; place-items: center; min-height: 42px; border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); border-radius: 10px; color: var(--color-muted); font-size: 13px; }
.axl-home .tel-controls .tel-control-end { color: var(--color-background); border-color: var(--color-accent); background-color: var(--color-accent); }
.axl-home .tel-aftercall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--color-background) 78%, var(--color-surface));
}
.axl-home .tel-aftercall > .tel-aftercall-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 62px;
  padding: 12px 14px;
}
.axl-home .tel-aftercall > .tel-aftercall-item + .tel-aftercall-item { border-left: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent); }
.axl-home .tel-aftercall-item > span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.axl-home .tel-aftercall strong { color: var(--color-text); font-size: 13px; line-height: 1.2; }
.axl-home .tel-aftercall small { color: var(--color-muted); font-size: 11px; line-height: 1.25; }
.axl-home .tel-status-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 9px;
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.axl-home .tel-status-mark::before { content: ""; width: 7px; height: 7px; border: 4px solid color-mix(in srgb, currentColor 12%, transparent); border-radius: 50%; background-color: currentColor; }
.axl-home .tel-status-mark--recording { color: var(--color-accent); background-color: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.axl-home .tel-status-mark--transcript::before {
  width: 9px;
  height: 5px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-45deg) translateY(-1px);
}
.axl-home .tel-status-mark--summary::before { width: 9px; height: 9px; border-radius: 3px 0 3px 0; transform: rotate(45deg); }
.axl-home .tel-timeline { padding: 10px 20px; border-radius: 14px; }
.axl-home .tel-timeline-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 64px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); }
.axl-home .tel-timeline-row:last-child { border-bottom: 0; }
.axl-home .tel-timeline-row > span, .axl-home .tel-timeline-row > small { color: var(--color-muted); font-size: 13px; }
.axl-home .tel-timeline-row--accent strong, .axl-home .tel-timeline-row--accent small { color: var(--color-primary); }
.axl-home .tel-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.axl-home .tel-mode { position: relative; min-height: 430px; padding: clamp(24px, 4vw, 46px); border-radius: 16px; display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.axl-home .tel-mode::before { content: ""; position: absolute; width: 220px; aspect-ratio: 1; right: -72px; bottom: -92px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 70%); }
.axl-home .tel-mode-number { position: absolute; top: 22px; right: 26px; color: color-mix(in srgb, var(--color-text) 12%, transparent); font-size: clamp(52px, 8vw, 94px); font-weight: 700; letter-spacing: -.08em; line-height: 1; }
.axl-home .tel-mode--ai .tel-mode-number { color: color-mix(in srgb, var(--color-on-evidence) 18%, transparent); }
.axl-home .tel-checks { display: flex; flex-direction: column; gap: 10px; margin-top: auto; color: var(--color-muted); font-size: 14px; }
.axl-home .tel-checks li { display: flex; gap: 9px; align-items: flex-start; }
.axl-home .tel-checks .ico { flex-shrink: 0; margin-top: .16em; }
.axl-home .tel-insight { padding: clamp(20px, 4vw, 34px); border-radius: 16px; box-shadow: 0 28px 76px color-mix(in srgb, var(--color-primary) 10%, transparent); }
.axl-home .tel-insight-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.axl-home .tel-outcome { padding: 7px 10px; border-radius: 999px; color: var(--color-primary); background-color: color-mix(in srgb, var(--color-primary) 14%, transparent); font-size: 12px; font-weight: 700; }
.axl-home .tel-insight-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; padding: 24px 0; }
.axl-home .tel-summary { display: flex; flex-direction: column; gap: 18px; }
.axl-home .tel-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.axl-home .tel-actions span { padding: 6px 9px; border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); border-radius: 999px; color: var(--color-muted); font-size: 12px; }
.axl-home .tel-transcript { display: flex; flex-direction: column; gap: 12px; padding-left: 22px; border-left: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
.axl-home .tel-transcript p { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 9px; margin: 0; color: var(--color-muted); font-size: 13px; line-height: 1.55; }
.axl-home .tel-transcript strong { color: var(--color-text); }
.axl-home .tel-player { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto auto; gap: 12px; align-items: center; padding-top: 16px; color: var(--color-muted); font-size: 12px; }
.axl-home .tel-player button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--color-background); background-color: var(--color-primary); }
.axl-home .tel-player-line { height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--color-primary) 38%, color-mix(in srgb, var(--color-text) 16%, transparent) 38%); }
.axl-home .tel-player a { color: var(--color-primary); }
.axl-home .tel-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.axl-home .tel-control-card { min-height: 150px; padding: 22px; border-radius: 14px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; }
.axl-home .tel-control-card > span { color: var(--color-accent); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.axl-home .tel-control-card > strong { color: var(--color-text); font-size: 18px; }
.axl-home .tel-control-card > small { color: var(--color-muted); }
.axl-home .features-card--telephony { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; padding-right: 0; }
.axl-home .features-card--telephony .tel-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 24px; background-color: color-mix(in srgb, var(--color-secondary) 78%, transparent); }
.axl-home .features-card--telephony .tel-mini > span { min-height: 86px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 14px; border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent); border-radius: 10px; }
.axl-home .features-card--telephony .tel-mini strong { color: var(--color-text); }
.axl-home .features-card--telephony .tel-mini small { color: var(--color-muted); }
@keyframes tel-wave { from { transform: scaleY(.58); opacity: .38; } to { transform: scaleY(1.08); opacity: .9; } }
@media (max-width: 767px) {
  .axl-home .tel-mode-grid, .axl-home .tel-insight-body, .axl-home .features-card--telephony { grid-template-columns: 1fr; }
  .axl-home .tel-control-grid { grid-template-columns: 1fr 1fr; }
  .axl-home .tel-console { padding: 16px; border-radius: 14px; }
  .axl-home .tel-console-top { grid-template-columns: auto minmax(0, 1fr); }
  .axl-home .tel-live { grid-column: 1 / -1; width: max-content; }
  .axl-home .tel-wave { height: 92px; }
  .axl-home .tel-timeline-row { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding-block: 10px; }
  .axl-home .tel-timeline-row small { grid-column: 2; }
  .axl-home .tel-transcript { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); }
}
@media (max-width: 460px) {
  .axl-home .tel-aftercall { grid-template-columns: 1fr; }
  .axl-home .tel-aftercall > .tel-aftercall-item { min-height: 54px; }
  .axl-home .tel-aftercall > .tel-aftercall-item + .tel-aftercall-item { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-text) 11%, transparent); }
}
/* --- focus + motion ------------------------------------------------------ */
.axl-home a:focus-visible, .axl-home button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
.axl-home a, .axl-home button { transition: color .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease, translate .15s ease; }
.axl-home .skip { position: absolute; left: -9999px; top: 0; }
.axl-home .skip:focus { position: static; left: auto; display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  .axl-home *, .axl-home *::before, .axl-home *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .axl-home a.bg-primary:active, .axl-home button.bg-primary:active { translate: none; }
}

/* Shared footer: sizing belongs to the shell, never to an individual page. */
.axl-page #site-footer{width:100%;clear:both;margin-top:0}
.axl-page #site-footer-inner{padding-top:56px;padding-bottom:32px;gap:36px}
.axl-page #footer-columns{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px;align-items:start}
.axl-page #footer-columns>div{min-width:0}
.axl-page #footer-columns a{overflow-wrap:break-word}
.axl-page #footer-logo-link{width:fit-content;max-width:100%}
@media(max-width:1023px){.axl-page #footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px}}
@media(max-width:600px){.axl-page #footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}.axl-page #site-footer-inner{padding-top:36px;padding-bottom:28px;gap:28px}}

/* theme toggle */

/* ---- EVIDENCE SURFACES ----------------------------------------------------
   Transcripts, code rows and screenshot mats sit on --color-secondary. In the
   light theme that is near-black and the ink is the page background; in the
   dark theme it is a raised panel and the ink is the page text. The pair
   inverts, so the ink can never be a fixed utility class — it comes from
   --color-on-evidence, which each theme block in head.html defines.

   Markup contract: give the block `bg-secondary on-evidence` and NO text-*
   colour class. Anything nested inherits, including links, which otherwise
   pick up --color-primary and lose contrast on the dark panel.

   This is the single rule that makes dark mode work; hardcoding
   `text-background` on `bg-secondary` renders it invisible in dark. */
.axl-page .on-evidence,
.axl-page .on-evidence :where(h1,h2,h3,h4,h5,h6,p,span,li,td,th,code,strong,em,dt,dd,button,figcaption,label) { color: var(--color-on-evidence); }
.axl-page .on-evidence a:not(.btn) { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A LINK SHAPED LIKE A BUTTON IS A BUTTON, and buttons are never underlined.
   The `btn` opt-out above is a class somebody has to remember, and on
   2026-08-14 twenty-six CTA links across thirteen pages did not carry it — the
   whole closing CTA of the homepage rendered with underlined buttons (owner:
   «кнопки не должны быть с андерлайном»). Padding utilities are the reliable
   tell: prose links never carry `px-*`, every button in this system does. This
   kills the underline only; colour still comes from the rule above or from the
   button's own utility classes, so nothing else moves. */
.axl-page .on-evidence a[class*="px-"] { text-decoration: none; }
.axl-page .on-evidence .hair,
.axl-page .on-evidence [class*="hair"] { border-color: color-mix(in srgb, currentColor 20%, transparent); }

.axl-page .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); border-radius: 10px;
  background: transparent; color: var(--color-text); cursor: pointer; transition: border-color .18s ease, color .18s ease, background-color .18s ease, transform .18s ease; }
.axl-page .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
.axl-page .theme-toggle:active { transform: translateY(1px); }
.axl-page .theme-icon { display: none; line-height: 0; }
/* Backward-compatible with an already-published shared Header that still
   contains the old text span. The control is intentionally icon-only. */
.axl-page .theme-toggle-label { display: none; }
.axl-page .theme-icon svg { display: block; width: 18px; height: 18px; }
:root:not([data-theme]) .axl-page .theme-icon-system,
:root[data-theme-mode="system"] .axl-page .theme-icon-system,
:root[data-theme="light"] .axl-page .theme-icon-light,
:root[data-theme="dark"] .axl-page .theme-icon-dark { display: inline-block; }
@media (max-width: 767px) {
  .axl-page .theme-toggle { width: 44px; min-width: 44px; height: 44px; }
}

/* motion */

/* ---- scroll reveal ------------------------------------------------------ */
.axl-page .reveal { opacity: .001; transform: translateY(14px); }
.axl-page .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }

@supports (animation-timeline: view()) {
  .axl-page .reveal { animation: axl-reveal linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; transform: none; }
  .axl-page .reveal.is-in { transition: none; }
}
@keyframes axl-reveal { from { opacity: .001; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Stagger inside a grid or list: each child trails the one before it. Capped
   at six, because past that the last card arrives long after the reader. */
.axl-page .reveal-stagger > * { animation: axl-reveal linear both; animation-timeline: view(); animation-range: entry 2% cover 18%; }
.axl-page .reveal-stagger > *:nth-child(2) { animation-delay: .04s; }
.axl-page .reveal-stagger > *:nth-child(3) { animation-delay: .08s; }
.axl-page .reveal-stagger > *:nth-child(4) { animation-delay: .12s; }
.axl-page .reveal-stagger > *:nth-child(5) { animation-delay: .16s; }
.axl-page .reveal-stagger > *:nth-child(n+6) { animation-delay: .2s; }

/* ---- parallax ----------------------------------------------------------- */
/* The band moves slower than the page. `will-change` is deliberately NOT set:
   the transform is already composited by the scroll timeline, and pinning a
   layer per band costs memory on phones for no gain. */
@supports (animation-timeline: view()) {
  .axl-page .parallax { animation: axl-parallax linear both; animation-timeline: view(); animation-range: cover; }
  .axl-page .parallax-slow { animation: axl-parallax-slow linear both; animation-timeline: view(); animation-range: cover; }
}
@keyframes axl-parallax { from { transform: translate3d(0, -3%, 0); } to { transform: translate3d(0, 3%, 0); } }
@keyframes axl-parallax-slow { from { transform: translate3d(0, -1.5%, 0); } to { transform: translate3d(0, 1.5%, 0); } }

/* A parallax host must clip, or the moved child leaks into the next section. */
.axl-page .parallax-host { position: relative; overflow: hidden; isolation: isolate; }
.axl-page .parallax-host > .parallax,
.axl-page .parallax-host > .parallax-slow { position: absolute; inset: -4% 0; z-index: 0; pointer-events: none; }
.axl-page .parallax-host > :not(.parallax):not(.parallax-slow) { position: relative; z-index: 1; }

/* ---- the animated agent transcript -------------------------------------- */
/* The text is REAL DOM text — indexable, selectable, screen-readable. Only its
   arrival is animated. Each line trails the previous one; tool-call rows are
   quicker because they read as machine output. */
.axl-page .tr-line { opacity: .001; }
.axl-page .tr-line.is-in { animation: axl-tr-in .38s ease both; }
@supports (animation-timeline: view()) {
  .axl-page .tr-line { animation: axl-tr-in .38s ease both; animation-timeline: view(); animation-range: entry 0% cover 12%; }
}
@keyframes axl-tr-in { from { opacity: .001; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The caret only blinks while its line is the newest one on screen. */
.axl-page .tr-caret { display: inline-block; width: 7px; height: 1.05em; margin-left: 2px; vertical-align: text-bottom;
  background: currentColor; animation: axl-caret 1.05s step-end infinite; }
@keyframes axl-caret { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }

/* ---- the one rule that turns all of it off ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .axl-page .reveal,
  .axl-page .reveal-stagger > *,
  .axl-page .tr-line { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .axl-page .parallax,
  .axl-page .parallax-slow { animation: none !important; transform: none !important; }
  .axl-page .tr-caret { animation: none !important; opacity: 1; }
}

/* accessibility */

/* ---- target size (WCAG 2.5.8 AA: 24x24; 2.5.5 AAA: 44x44) -----------------
   A link sitting in a list, a nav or a card is a standalone target and needs
   24px. A link inside a sentence is exempt under the "inline" exception, and
   padding one would break the line box — hence the :not() chain rather than a
   blanket rule. Footer links get 28px because they sit in dense columns where
   24px circles would overlap and lose the spacing exemption too.

   Measured before this rule existed: 54 footer links and every arrow CTA on
   the homepage came in at 19-21px. */
.axl-page a[href]:not(p a):not(li a):not(td a):not(th a):not(span a):not(.prose a) {
  display: inline-flex; align-items: center; min-height: 24px;
}
/* …except links that are already a layout of their own. This rule sets
   `align-items: center`, which on a column flex container centres its children
   HORIZONTALLY — and that is precisely what it did to the mega-menu, where each
   link stacks a title over a description: the titles came out centred while the
   descriptions stayed left, on every page at once. A target-size rule has no
   business overriding a component's own axis, so anything that declares its own
   flex direction opts out and keeps its alignment.

   The doubled class is not a typo. The rule above carries twelve type selectors
   inside its :not() chain — (0,3,12) against a plain `.menu-link`'s (0,3,1) —
   and with the class columns tied, the type column decides. Repeating the class
   buys one more class point, which is cheaper and more honest than !important. */
.axl-page a[href].menu-link.menu-link,
.axl-page a[href].card.card,
.axl-page a[href][class*="flex-col"][class*="flex-col"] { display: flex; align-items: stretch; }
.axl-page #site-footer a[href] { min-height: 28px; }

/* On a phone the primary controls go to the AAA target. Everything here is a
   control the visitor is expected to hit with a thumb, often one-handed. */
@media (max-width: 767px) {
  .axl-page #header-cta,
  .axl-page #drawer-open,
  .axl-page #drawer-close,
  .axl-page #theme-toggle,
  .axl-page button[type="submit"],
  .axl-page .acc-btn,
  .axl-page [data-compare-filter],
  .axl-page [data-copy] { min-height: 44px; }
}

/* ---- focus ---------------------------------------------------------------
   One visible ring, on the token, for every interactive element — including
   the ones a page author may have styled as a card or a table row. */
.axl-page :is(a, button, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px;
}

/* ---- honest defaults ------------------------------------------------------ */
/* Long words and URLs must not push a phone layout sideways. `span` is in the
   list because note-box text ships in spans that are block-level flex items —
   measured overflowing on /security and /vs/thinkific before it was added. */
.axl-page :is(h1, h2, h3, h4, p, li, td, th, dd, dt, span) { overflow-wrap: break-word; }
/* Any table wide enough to scroll does so inside its own box, never the page. */
.axl-page .tbl-scroll, .axl-page [class*="table-scroll"] { overflow-x: auto; max-width: 100%; }
/* A skip link that is genuinely reachable. */
.axl-page .skip:focus { position: static; left: auto; display: inline-block; min-height: 44px; }

/* ---- visually hidden, but read aloud --------------------------------------
   For text that carries meaning a sighted reader gets from the picture. The
   homepage hero video uses it: a video element takes no alt attribute, so the
   description of what the clip shows lives in a real paragraph here and is
   pointed at by aria-describedby.

   clip-path rather than the old clip:rect() hack, and NOT display:none or
   visibility:hidden — both of those remove the text from the accessibility
   tree, which is the one thing this class must never do. width/height 1px with
   overflow hidden keeps it in the layout tree so screen readers still walk it. */
.axl-page .vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* icons */

/* ===========================================================================
   .ico — the icon rules. Reads the page tokens, defines none, sets no colour.
   Scoped to .axl-page (the wrapper make-page.mjs puts on every page, and the
   same hook the accessibility floor uses) so a stray platform-level `.ico`
   cannot win against it.
   =========================================================================== */

/* The sprite is a definition, not a picture. `hidden` on the element already
   hides it through the UA stylesheet — this rule is the belt to that
   suspenders, so the sprite cannot flash thirty-eight drawings onto the page
   if the attribute is ever stripped by an editor or a sanitiser.
   display:none on a sprite root does NOT stop <use> from instantiating its
   symbols: a <symbol> is never rendered in place anyway, and <use> clones it
   into a shadow tree in the referencing context. */
.axl-page .ico-sprite { display: none; }

/* 1em square, so an icon is always the size of the text it sits beside and
   scales with it — including when the type scale steps up at md: and lg:,
   which an SVG with a hardcoded width="24" would not do.
   flex: 0 0 auto is the whole reason .ico works as a bullet mark: in a flex
   row an svg with no intrinsic ratio is otherwise free to squash.
   vertical-align only matters in inline (non-flex) use, e.g. an icon dropped
   mid-sentence; -0.14em drops the box so the drawing centres on the x-height
   instead of riding the baseline. */
.axl-page .ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -0.14em;
}

/* Two size steps, and they are chosen against the stroke rather than by taste:
   at 1em on t-body (16-17px) the 1.5 stroke in a 24 viewBox renders at almost
   exactly 1px — the same hairline the tables, cards and figures draw with, so
   an inline icon does not out-weigh the rules beside it.
   .ico-lg is 1.5em ≈ 24px, the size these were drawn at, where the stroke is
   the intended 1.5px. It is the right size for a label grid or a card heading.
   .ico-xl is 2em ≈ 32px and exists for a lone icon over a card with nothing
   else competing. Above that the 1.5 stroke starts to look thin and the icon
   wants to be a figure instead. */
.axl-page .ico-lg { width: 1.5em; height: 1.5em; }
.axl-page .ico-xl { width: 2em;   height: 2em; }

/* An icon used as the mark in the existing .bul bullet pattern. .bul is a flex
   row, so the icon top-aligns to the line box while the text's cap height
   starts a fraction of a line lower — the icon reads as floating 3px high.
   0.2em puts it back on the cap. Measured at t-small (15px / 1.55) and t-body
   (16-17px / 1.55), which are the only two type steps bullets use. */
.axl-page .bul > .ico { margin-top: 0.2em; }

/* blocks */

/* ===========================================================================
   .axl-blk — the block library. Scoped to .axl-page, which make-page.mjs puts
   on every assembled page wrapper (alongside .axl-home). Reads the seven
   palette tokens and defines none of them.

   Breakpoints are 768px and 1024px so they line up exactly with md: and lg:.

   EVERYTHING HERE EXISTS BECAUSE A UTILITY DOES NOT. Verified against
   site.v2.css on 2026-08-11: there are no responsive border utilities in the
   static build at all, so every rail and divider that changes edge between
   base and md:/lg: has to be written out. Where a stock utility DOES exist
   (grid-cols-*, md:grid-cols-*, lg:grid-cols-*, gap-*, shrink-0, items-start)
   the markup uses it and nothing is defined here — see block 1, which needs no
   CSS beyond the icon.
   =========================================================================== */

/* --- icons: SEE partials/icons.html --------------------------------------
   .ico, .ico-lg and .ico-xl are defined there, in em units so an icon is the
   size of the type it sits beside. They used to be defined here at a fixed
   24px, back when icons.html did not exist. Two definitions of one class,
   injected into the same page, resolve on source order — so this one is gone
   rather than "kept for safety". Nothing below styles an icon. */

/* --- 2. step rail --------------------------------------------------------
   Stacked with a rail down the left at base; horizontal with a rail across
   the top from 1024px. The rail is continuous rather than segmented because
   the gap is padding on the child, not a grid column-gap — a column-gap would
   break the top border into four separate dashes. */
.axl-page .blk-rail        { display: grid; grid-template-columns: 1fr; }
.axl-page .blk-rail > *    { position: relative; padding: 0 0 26px 24px;
                             border-left: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
.axl-page .blk-rail > *:last-child { padding-bottom: 0; }
.axl-page .blk-rail > *::before {
  content: ""; position: absolute; left: -4px; top: 6px; width: 7px; height: 7px;
  border-radius: 50%; background-color: var(--color-primary);
}
@media (min-width: 1024px) {
  .axl-page .blk-rail     { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .axl-page .blk-rail > * { padding: 24px 28px 0 0; border-left: 0;
                            border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
  .axl-page .blk-rail > *:last-child  { padding-right: 0; }
  .axl-page .blk-rail > *::before     { left: 0; top: -4px; }
}

/* --- 3. before / after ---------------------------------------------------
   Two columns with a hairline BETWEEN them and nothing else: no panel, no
   fill, no red/green. The only colour is the accent eyebrow on the after
   side, which is what the reader is meant to land on. Stacked at base, where
   the divider becomes a horizontal rule. */
.axl-page .blk-split     { display: grid; grid-template-columns: 1fr; }
.axl-page .blk-split > * + * { margin-top: 24px; padding-top: 24px;
                               border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
@media (min-width: 768px) {
  .axl-page .blk-split              { grid-template-columns: 1fr 1fr; }
  .axl-page .blk-split > *:first-child { padding-right: 32px; }
  .axl-page .blk-split > * + *      { margin-top: 0; padding-top: 0; border-top: 0;
                                      padding-left: 32px;
                                      border-left: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
}

/* --- 4. flow strip -------------------------------------------------------
   Same mechanics as the step rail but it turns horizontal at 768px rather
   than 1024px, because a node label is two or three words and fits where a
   step's clause would not. Count-agnostic: grid-auto-flow handles 3, 4, 5 or
   6 nodes with no per-count class. The rail is primary-tinted to echo
   #fig-record; the node marks are open circles on the page background so the
   line reads as passing through them. */
.axl-page .blk-flow     { display: grid; grid-template-columns: 1fr; }
.axl-page .blk-flow > * { position: relative; padding: 0 0 22px 24px;
                          border-left: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
.axl-page .blk-flow > *:last-child { padding-bottom: 0; border-left-color: transparent; }
.axl-page .blk-flow > *::before {
  content: ""; position: absolute; left: -5px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background-color: var(--color-background);
  border: 2px solid var(--color-primary);
}
@media (min-width: 768px) {
  .axl-page .blk-flow     { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .axl-page .blk-flow > * { padding: 22px 18px 0 0; border-left: 0;
                            border-top: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent); }
  /* NO rail on the last node. Each node draws the segment that LEAVES it
     (the dot sits at its left edge), so the last one drawing a segment left a
     line running past the final dot to the right edge of the band — a rail
     pointing at nothing. Fixed 2026-08-14; the vertical layout above already
     did this correctly with border-left-color: transparent. */
  .axl-page .blk-flow > *:last-child { padding-right: 0; border-left-color: transparent;
                                       border-top: 0; }
  .axl-page .blk-flow > *::before    { left: 0; top: -5px; }
}

/* --- 5. stat row ---------------------------------------------------------
   2-up at base, 4-up from 768px, hairline dividers, top and bottom rules.
   This remains the compact ruled treatment for four values. The homepage
   .statgrid is a separate five-card proof panel with balanced responsive rows.
   Do not merge the two patterns or restore a sixth empty homepage column. */
.axl-page .blk-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
.axl-page .blk-stats > * { padding: 22px 18px;
                           border-left: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.axl-page .blk-stats > *:nth-child(2n+1) { border-left: 0; }
.axl-page .blk-stats > *:nth-child(n+3)  { border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
@media (min-width: 768px) {
  .axl-page .blk-stats { grid-template-columns: repeat(4, 1fr); }
  .axl-page .blk-stats > *:nth-child(2n+1) { border-left: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
  .axl-page .blk-stats > *:nth-child(4n+1) { border-left: 0; }
  .axl-page .blk-stats > *                 { border-top: 0; }
}

/* --- 6. comparison chips -------------------------------------------------
   A row per criterion: label, our cell, their cell. Stacked at base so the
   two cells sit under the criterion they answer; three columns from 768px.
   The chips are tinted surfaces, not status colours — see the block comment
   for why there are no ticks. */
.axl-page .blk-cmp-row { display: grid; grid-template-columns: 1fr; row-gap: 8px;
                         padding: 14px 0;
                         border-top: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
.axl-page .blk-cmp-row:last-child {
                         border-bottom: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); }
@media (min-width: 768px) {
  .axl-page .blk-cmp-row { grid-template-columns: 1fr 1fr 1fr; column-gap: 24px; row-gap: 0; align-items: baseline; }
}
.axl-page .blk-chip        { display: inline-block; padding: 4px 10px; border-radius: 6px; }
.axl-page .blk-chip-ours   { background-color: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.axl-page .blk-chip-theirs { background-color: color-mix(in srgb, var(--color-text) 6%, transparent); }

/* --- 7. callout ----------------------------------------------------------
   A 2px accent rule on the leading edge and nothing else. Same construction
   as .turn in partials/base.css.html. Not a panel: a caveat that shouts is a
   caveat the reader learns to skip. */
.axl-page .blk-note { padding-left: 18px; border-left: 2px solid var(--color-accent); }

/* --- 9. feature card ------------------------------------------------------
   Owner-directed 2026-08-14: capability rows written as a table («иконка +
   название | описание») and the narrow honesty boxes read as spreadsheets —
   «сделать карточки побольше, иконки по углам». One card per capability:
   surface panel, generous padding, the icon in the TOP-RIGHT corner on a
   tinted rounded tile. The grid around it is stock utilities
   (grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4) — nothing scoped.

   The tile's font-size IS the icon size: .ico inside is 1em (icons.html), so
   20px here renders a 20px glyph. The title reserves the corner with
   padding-right so a long label never runs under the tile.

   The muted variant (.blk-fcard-mut on the tile) is for honesty cards —
   "what this is not" — where the accent tint would read as a feature. */
/* THE CARD RULE — owner, 2026-08-14: this block is THE way a capability,
   honesty or feature card is drawn, site-wide. Icon on the corner tile (never
   above the title), title clear of the tile, body in t-small muted. New card
   grids copy block 9; the icon-above-title form is retired.

   HOVER: cards react to the pointer — a 3px lift, the border and tile warming
   toward primary. Transition-only, so the blanket reduced-motion kill in
   base.css.html switches it off wholesale. The shared cursor-light layer may add
   a token-derived inset highlight, but this block does not invent a local shadow.
   Do not add transform to pages' own reveal elements (translate, not transform, so it
   cannot collide with the motion layer's transforms). */
.axl-page .blk-fcard { position: relative; padding: 24px; border-radius: 10px;
  background-color: var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  transition: border-color .18s ease, translate .18s ease; }
.axl-page .blk-fcard:hover { border-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  translate: 0 -3px; }
.axl-page .blk-fcard:hover .blk-fcard-ico {
  background-color: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary); }
.axl-page .blk-fcard-ico { transition: background-color .18s ease, color .18s ease; }
.axl-page .blk-fcard-ico { position: absolute; top: 18px; right: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; font-size: 20px;
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-accent); }
.axl-page .blk-fcard-ico.blk-fcard-mut {
  background-color: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text-muted); }
/* margin-bottom on top of the card's own gap — owner 2026-08-14: «от тайтла
   отступ сделаем»; the title sat too close to the body. */
.axl-page .blk-fcard-title { padding-right: 52px; margin-bottom: 6px; }

/* WHOLE-CARD CLICK TARGET — owner 2026-08-15: «карточки надо чтобы по ним можно
   было кликать». Put .blk-fcard-link on the ONE link that is the card's real
   destination (its title) and the card becomes clickable edge to edge, because
   the pseudo-element stretches over the whole card. .blk-fcard is already
   position:relative, which is what it anchors to.

   Why this and not <a> around the card: a card that also carries a topic link
   would then be an <a> inside an <a>, which is invalid and which browsers
   silently unnest — losing the inner link. This keeps both, and keeps the
   heading a heading for anything reading the outline.

   Any OTHER link inside the card must sit above the overlay, which is what
   .blk-fcard-over is for. Without it the overlay swallows it and every link in
   the card leads to the same place. */
.axl-page .blk-fcard-link { text-decoration: none; }
.axl-page .blk-fcard-link::after { content: ""; position: absolute; inset: 0;
  border-radius: inherit; }
.axl-page .blk-fcard-over { position: relative; z-index: 1; }