/* Deliberate deltas from the Webflow export, the counterpart of
 * apps/web-ru's aivy-overrides.css.
 *
 * Kept out of selectal.css so that file stays a byte-faithful download of
 * https://cdn.prod.website-files.com/.../selectal.webflow.shared.css (only its
 * absolute asset URLs were rewritten to /selectal/*), and re-downloading it
 * later cannot silently drop our changes.
 */

/* The hero headline is an <h1> here — the export built it from <div>s, which
 * left the page without a top-level heading. The Webflow base stylesheet gives
 * every h1 a 20px top margin and its own type scale; the `.top-title` children
 * already set the type, so only that margin has to go back to what the div had.
 */
h1.title-with-animation {
  margin-top: 0;
}

/* Same change, second consequence: a heading may only contain phrasing content,
 * so the hero's four blocks became <span>s. Three of them carry `.text-inline`
 * (already `display: inline`) or `.top-animation` (`inline-block`); the closing
 * line had no display rule and relied on being a <div>. */
h1.title-with-animation > .top-title:not(.text-inline) {
  display: block;
}

/* The page's own background, behind everything the sections paint.
 *
 * White by default, and on a page whose content is shorter than the window that
 * white shows below the footer as a bare strip — which is what /blog does while
 * it holds one article. Every section of this site paints its own background,
 * so the only place this colour is ever visible is that surplus; giving it the
 * footer's colour makes the footer read as reaching the bottom of the window. */
body {
  background-color: var(--colors--dark);
}

/* ---------------------------------------------------------------------------
 * The SEO section: /blog, its articles and the product landing.
 *
 * Those pages are assembled from the export's own classes — cards, feeds,
 * sections, buttons — as apps/aivy-landing/CLAUDE.md requires. Two things it has
 * no answer for a table, and that is the only rule left here:
 * ------------------------------------------------------------------------- */

/* The article CTA banner. The export has no pinned bar anywhere, so there is no
 * class to assemble one from — everything else about it (the dark fill, the
 * button, the container) is the export's own.
 *
 * Pinned to the top, where the template pins it and where a reader expects a
 * site-wide bar. The site's header is `position: absolute; top: 0`, so the bar
 * would land on the logo — `__offset` is what prevents that: it wraps the page,
 * and being positioned it becomes the containing block the header anchors to,
 * so the header and everything under it start below the bar. Its padding is the
 * bar's height; the bar is 72-74px across the breakpoints and the couple of
 * pixels of slack are invisible.
 *
 * The brand accent, `--colors--highlight`. Every other surface on these pages
 * is taken: the hero is `highlight-dark`, the article sections `light-darker`,
 * the cards white, the footer `dark`. It was `section_dark` first — the hero's
 * own colour — and the bar read as having no background at all because it was
 * indistinguishable from what it sat on; then white, which worked but is the
 * template's neutral rather than this site's. The accent cannot be mistaken for
 * any of them, and it is the colour this site already uses to mean "act here".
 *
 * Dark text on it, and a dark button: the green button would vanish into the
 * bar. `--colors--dark` on `--colors--highlight` is around 12:1, well past the
 * 4.5:1 that body text needs.
 *
 * `justify-content` is here because the export has no flex-centering class:
 * `content-center` only sets `text-align`, and `horz-feed_center` turns into a
 * column below 768px. */
.article-cta-banner {
  position: sticky;
  top: 0;
  /* Above the header. Webflow's `.w-nav` sits at 1000, and at 900 the header —
     which is absolutely positioned and therefore scrolls — drew its links over
     the bar every time it passed behind it. Below `.w-lightbox-backdrop` (2000)
     so a lightbox still owns the screen. */
  z-index: 1001;
  padding: 12px 0;
  background-color: var(--colors--highlight);
  box-shadow: 0 1px 3px #0000001a;
}

.article-cta-banner .blocks-in-row {
  justify-content: center;
  /* 40px is the footer's gap and too much for a bar that wraps: it turns the
     second line into a stripe of empty space. */
  gap: 12px 20px;
}

/* ...but not while the mobile menu is open. That menu is a full-screen panel
 * inside the header, and the header's own `z-index: 1000` makes it a stacking
 * context — a child of it can never rise above the bar, however high its
 * z-index. So the header itself is lifted, and only for as long as the panel is
 * open. Written against the panel's own `data-nav-menu-open` attribute rather
 * than a class of ours, so the header component stays untouched. */
header.navbar:has(.primary-menu[data-nav-menu-open]) {
  z-index: 1002;
}

/* Positioned, and nothing else. The header inside it is `position: absolute`,
 * so this wrapper becomes the box it anchors to — which is what puts it under
 * the bar rather than behind it. No offset is needed now that the bar is
 * `sticky`: it takes its own space in the flow and the page starts after it. An
 * earlier version pushed this wrapper down with a margin instead, and the page
 * ended up that much taller than its content — a strip of bare background under
 * the footer. */
.article-cta-banner__offset {
  position: relative;
}

/* Below 768px the export makes every `.button` full width. That is right for a
 * button in a page and wrong for one in a bar that never leaves the screen —
 * with it the banner took 15% of a phone. Scoped to the banner, so the site's
 * own convention is untouched everywhere else. */
.article-cta-banner .button {
  width: auto;
  background-color: var(--colors--dark);
  border-color: var(--colors--dark);
  color: var(--colors--light);
}

.article-cta-banner__close {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  /* 44px of tap target, the smallest that is comfortable on a phone. */
  min-width: 44px;
  min-height: 44px;
}

/* The hero band of the /blog pages.
 *
 * Its own padding rather than the export's `top-section`, because the space the
 * header needs is not what that class reserves. The header is
 * `position: absolute`, so every page has to leave room for it, and the ported
 * pages do it with heroes tall enough that the question never comes up. The
 * export's one explicit answer — `top-section_title { padding-top: 100px }` —
 * is inside a `max-width: 479px` query, so between 480 and 767 there was no
 * clearance at all and the trail ran into the logo.
 *
 * 110px clears the header at every width (68px on a phone, 76px on a desktop)
 * with room to breathe, and it is one number instead of three rules that
 * disagree at their edges. */
.seo-hero {
  position: relative;
  padding-top: 110px;
  padding-bottom: var(--block-sizes--section-bottom);
}

/* Six menu items do not fit beside the logo and the two right-hand controls in
 * the band just above the export's 991px collapse point, so the header wrapped
 * onto two lines and grew from 76px to 119px — which no fixed clearance can
 * cover. The sixth item is "Blog", added for this section; rather than leave the
 * section without an entry in the navigation, the items give up 6px of padding
 * each in that band, which is 72px and enough. */
@media screen and (min-width: 992px) and (max-width: 1090px) {
  .menu-item {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* The open mobile menu, one item per line.
 *
 * The export leaves the items `inline-block` inside a centred panel, so they
 * flow and wrap: on a phone each one is wide enough to take a line of its own
 * and it reads as a list, but between 600 and 991px several fit per line and the
 * menu comes out as a ragged grid — 2+3+1, then 3+3+1, then 4+2+1. Adding a
 * sixth item made the ragged rows more obvious; it did not cause them.
 *
 * This is the shared header, so the rule applies to every page, not only the
 * blog. It gives the tablet widths the behaviour the phone already has. */
@media screen and (max-width: 991px) {
  .primary-menu[data-nav-menu-open] .menu-item {
    display: block;
  }
}

/* Tables. The Webflow export has none anywhere on the site, so there is no
 *    existing class to assemble one from; the SEO articles have three. Kept to
 *    the minimum that makes a table readable, and scrolling inside its own box
 *    because a four-column table does not fit 390px — letting it widen the page
 *    would give the whole document a horizontal scrollbar, and hiding that with
 *    `overflow-x: hidden` on the body would only bury it. */
.article-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.article-table th,
.article-table td {
  border-bottom: 1px solid currentColor;
  padding: 0.75rem 1rem 0.75rem 0;
  vertical-align: top;
}

.article-table th {
  font-weight: 600;
}

/* The exported list rule makes the item text inherit correctly, but its native
 * marker stays the browser's dark default in an SEO landing's dark band. Keep
 * the marker in the same light palette as the list itself. */
.section_dark .list.text-light > .list-item::marker {
  color: var(--colors--light);
}