/**
 * Bahoosh Assistants — marketplace styles.
 *
 * ── How to change the design ────────────────────────────────────────────────────────────
 * Every colour, size, radius and gap is a custom property in the `.bxa` block below, and
 * nothing after that block contains a literal. To restyle, edit a token; you never need to
 * hunt through rules. Values that vary per breakpoint are re-declared in the media queries
 * at the bottom — again as tokens, so a rule is written once and never duplicated.
 *
 * Numbers are measured from the Figma frames (`wordpress/design/assistants/`), not eyeballed:
 * the SVG exports carry font-size and geometry, and the colours are sampled from the PNGs at
 * the exact pixel. Where a comment cites a size, that is where it came from.
 *
 * Scoped under `.bxa` throughout. This loads on a site running Elementor and a theme with
 * opinions of its own, so a bare `h2` or `.card` rule would reach well outside this section.
 */

.bxa {
  /* ── Colour ─────────────────────────────────────────────────────────────────────────
     Sampled from the design PNGs. The hero green is #0C513F, which is NOT the app's
     #1C4537 — that darker value is used for the badge pill and the avatar circle sitting
     on top of it. */
  --bxa-hero-bg: #0c513f;
  /* The closing band stays #0C513F at every width. The hero does not — the mobile frames
     use the darker #1C4537 for it — so the two cannot share one token. */
  --bxa-cta-bg: #0c513f;
  --bxa-green-900: #1c4537;
  --bxa-lime: #d9ef78;
  --bxa-lime-pale: #fafdef;

  --bxa-ink: #191c18;
  --bxa-ink-strong: #111827;
  --bxa-muted: #5a615d;
  --bxa-muted-soft: #8e9591;
  --bxa-lead-on-dark: #e8f6d8;

  --bxa-surface: #ffffff;
  --bxa-surface-tinted: #fafbf9;
  --bxa-page-bg: #f5f5f5;
  --bxa-border: #e1e4e0;
  --bxa-border-soft: #e1e1e1;
  --bxa-band-border: #e9ebe8;

  /* Per-assistant accent, overridden inline from the API. */
  --bxa-accent: var(--bxa-green-900);

  /* ── Type ───────────────────────────────────────────────────────────────────────────
     Display sizes are Morabba, set through --bxa-fw-display; see the note there before
     trusting a weight read off the SVG exports. */
  --bxa-fs-hero: 48px;
  --bxa-fs-detail-title: 44px;
  --bxa-fs-section: 32px;
  --bxa-fs-cta-title: 36px;
  --bxa-fs-lead: 18px;
  --bxa-fs-body: 16px;
  --bxa-fs-chip: 14px;
  --bxa-fs-card-title: 15px;
  --bxa-fs-sm: 14px;
  --bxa-fs-xs: 12px;
  --bxa-fs-2xs: 11px;
  --bxa-fs-3xs: 10px;

  /* Two families, as the frames specify: Morabba carries the display sizes (48/44/36/32)
     and IRANYekan everything else. Both are already uploaded to the site through
     Elementor's custom-fonts screen; Fonts::face_rules() emits their @font-face so these
     pages can use them without shipping a second copy.
     The generic fallbacks matter — a site missing the uploads still renders in a sane
     face rather than in whatever the browser picks for an unknown family. */
  --bxa-font-heading: "morabba", "Morabba", "IRANYekan ExtraBlack", "iranyekan", Tahoma, sans-serif;
  --bxa-font-body: "iranyekan", "IRANYekan", Tahoma, sans-serif;

  /* Display type is Morabba Heavy, the same weight the Studio section runs its 48px and
     56px headings at — the site has that file, and it is the face the design is actually
     drawn with. The Figma exports report these runs as weight 400, but that is an export
     artefact: Figma normalises the weight of any variant it cannot map, and taking it at
     face value renders the headings a great deal lighter than the mock. Studio is the
     reference for how this type should look. See wordpress/FONTS.md. */
  --bxa-fw-display: 900;
  --bxa-fw-regular: 400;
  --bxa-fw-medium: 500;
  --bxa-fw-bold: 700;

  --bxa-lh-tight: 1.3;
  --bxa-lh-body: 1.8;

  /* ── Geometry ───────────────────────────────────────────────────────────────────────
     The listing's content column is 1200 wide (cards at x=120..1320); the detail page's is
     1280 (cards at x=80.5..1359.5). They genuinely differ in the design. */
  /* These are outer widths: the gutter sits inside them, so the *content* column comes out
     at the design's 1200 (listing, cards at x=120..1320) and 1280 (detail, cards at
     x=80.5..1359.5). Setting the design number here directly would make every card 10px
     narrow, which is exactly what it did. */
  --bxa-shell: calc(1200px + var(--bxa-gutter) * 2);
  --bxa-shell-detail: calc(1280px + var(--bxa-gutter) * 2);
  --bxa-shell-narrow: 900px;
  --bxa-gutter: 20px;

  --bxa-r-card: 16px;
  --bxa-r-cta: 8px;
  --bxa-r-badge: 11px;
  --bxa-r-pill: 999px;

  --bxa-card-w: 282px;
  --bxa-card-h: 246px;
  --bxa-card-pad: 20px;
  --bxa-grid-cols: 4;
  --bxa-grid-gap: 24px;

  --bxa-avatar-card: 36px;
  --bxa-avatar-hero: 178px;
  /* The design does not put the hero avatar against the content edge: it sits at x=230 on a
     column starting at x=80. Zero here reads as the avatar having fallen out of the layout. */
  --bxa-avatar-hero-inset: 150px;

  --bxa-hero-h: 386px;
  --bxa-hero-detail-h: 361px;
  --bxa-detail-hero-pad: 48px;
  --bxa-detail-hero-gap: 48px;
  /* Vertical rhythm inside the hero column, and the gap between the name and its tag. */
  --bxa-detail-title-gap: 14px;
  --bxa-detail-title-mt: 14px;
  --bxa-detail-title-mb: 10px;
  --bxa-detail-lead-mb: 22px;
  --bxa-detail-stats-mb: 26px;
  --bxa-search-w: 640px;
  --bxa-search-h: 58px;
  --bxa-search-btn-h: calc(var(--bxa-search-h) - 10px);
  --bxa-search-btn-pad-x: 30px;
  --bxa-search-btn-fs: var(--bxa-fs-sm);
  --bxa-search-btn-optical: 0.226em;
  --bxa-chip-h: 33px;
  --bxa-chip-pad-x: 15px;
  /* Gap between the chip row and the blocks either side of it. The design draws 12.5px
     from the chips down to the first card; the space above is symmetrical now that the
     row carries no heading of its own. */
  --bxa-chips-gap-top: 20px;
  --bxa-chips-gap-bottom: 20px;
  /* Top gap of the grid section when it follows the chip row. */
  --bxa-grid-pad-top: 32px;
  --bxa-badge-h: 22px;
  --bxa-badge-pad-x: 10px;
  --bxa-cta-h: 32px;
  --bxa-cta-pad-x: 12px;
  --bxa-cta-w: 105px;

  --bxa-section-pad: 64px;
  /* Capability card, measured off AI-Assistant-Detail (desktop 409.67x116, mobile 357x116 —
     the card is the same at both widths, only the column count changes). Padding 23.5 all
     round, icon 32 square, title stopping 12px short of it, description to the padding edge.
     The type does NOT shrink on mobile: both frames set 16 bold / 14 regular. */
  --bxa-feature-card-h: 116px;
  --bxa-feature-grid-gap: 25px;
  --bxa-feature-pad: 22.5px;  /* + the 1px border = the frame's 23.5 inset */
  --bxa-feature-icon: 32px;
  --bxa-feature-icon-fs: 18px;
  --bxa-feature-icon-gap: 12px;
  --bxa-feature-row-gap: 16px;
  --bxa-feature-title-fs: 16px;
  --bxa-feature-text-fs: 14px;
  --bxa-feature-text-lh: 1.5;
  --bxa-chat-w: 800px;
  --bxa-chat-pad: 40px;
  --bxa-faq-w: 898px;
  --bxa-prompt-h: 41px;
  --bxa-prompt-pad-x: 24px;
  --bxa-bubble-max: 78%;
  /* Attachment stand-ins in the example conversation. Nothing here loads a file — the tile
     is drawn, so these are all just sizes. */
  --bxa-attach-tile-w: 190px;
  --bxa-attach-tile-ratio: 4 / 3;
  --bxa-attach-glyph: 30px;
  --bxa-attach-chip-h: 44px;
  --bxa-attach-gap: 10px;
  --bxa-feature-cols: 3;
  --bxa-feature-gap: 25px;
  --bxa-audience-cols: 4;
  /* Audience and benefit cards, measured off the desktop frame: 301x186 r15.5 tinted with a
     hairline, and 404.33x202 r19.5 white with a hairline. Each sits on the opposite ground
     to its own fill, which is the only thing separating card from section at this contrast. */
  --bxa-audience-pad: 24px;
  --bxa-audience-card-h: 186px;
  --bxa-benefit-pad: 32px;
  --bxa-benefit-card-h: 202px;
  --bxa-benefit-gap: 33px;
  --bxa-r-card-lg: 20px;

  /* The section is Persian. The site's locale does not reliably resolve to RTL — this WP
     install reports is_rtl() false for fa_IR because no language pack is present — so every
     logical property below would otherwise resolve left-to-right and mirror the design.
     Setting it here makes the section correct regardless of what the theme decides. */
  direction: rtl;
  text-align: right;

  color: var(--bxa-ink);
  background: var(--bxa-page-bg);
  font-family: var(--bxa-font-body);
  font-size: var(--bxa-fs-body);
  line-height: var(--bxa-lh-body);
}

/* The theme declares its own family on h1–h6, which beats inheritance from `.bxa` — so
   without this the token does not actually govern the headings inside this section, and
   changing it would move some text and not others. */
.bxa h1,
.bxa h2,
.bxa h3,
.bxa h4,
.bxa h5,
.bxa h6 {
  font-family: var(--bxa-font-body);
}

/* Display type only. Card titles, section labels and FAQ questions stay on the body face —
   the frames put Morabba on 48/44/36/32 and nothing smaller. */
.bxa .bxa-hero__title,
.bxa .bxa-detail__title,
.bxa .bxa-section__heading,
.bxa .bxa-cta__title {
  font-family: var(--bxa-font-heading);
}

/* The form control does not inherit the page face on its own. */
.bxa input,
.bxa button,
.bxa textarea,
.bxa select {
  font-family: inherit;
}

.bxa *,
.bxa *::before,
.bxa *::after {
  box-sizing: border-box;
}

.bxa .bxa-shell {
  width: 100%;
  max-width: var(--bxa-shell);
  margin-inline: auto;
  padding-inline: var(--bxa-gutter);
}

.bxa-detail .bxa-shell {
  max-width: var(--bxa-shell-detail);
}

.bxa .bxa-shell--narrow {
  max-width: var(--bxa-shell-narrow);
}

.bxa .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- hero */

.bxa .bxa-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--bxa-hero-h);
  background: var(--bxa-hero-bg);
  text-align: center;
  padding-block: var(--bxa-section-pad);
}

.bxa .bxa-hero > .bxa-shell {
  display: flex;
  flex-direction: column;
}

/* Printed after the lead (see listing.php), shown above the title. */
.bxa .bxa-hero__badge {
  order: -1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding-inline: var(--bxa-chip-pad-x);
  height: 28px;
  border-radius: var(--bxa-r-pill);
  /* A darker pill on the hero green, with the lime as the label — not a lime pill. */
  background: var(--bxa-green-900);
  color: var(--bxa-lime);
  font-size: var(--bxa-fs-xs);
  font-weight: var(--bxa-fw-bold);
  line-height: 1;
}

.bxa .bxa-hero__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-lime);
}

.bxa .bxa-hero__title {
  margin: 0 0 12px;
  color: var(--bxa-surface);
  font-size: var(--bxa-fs-hero);
  font-weight: var(--bxa-fw-display);
  line-height: var(--bxa-lh-tight);
}

.bxa .bxa-hero__lead {
  margin: 0 auto 26px;
  max-width: 760px;
  color: var(--bxa-lead-on-dark);
  font-size: var(--bxa-fs-lead);
  font-weight: var(--bxa-fw-regular);
}

.bxa .bxa-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--bxa-search-w);
  height: var(--bxa-search-h);
  margin-inline: auto;
  padding-inline-start: var(--bxa-gutter);
  padding-inline-end: 5px;
  background: var(--bxa-surface);
  border-radius: var(--bxa-r-pill);
}

.bxa .bxa-search__icon {
  display: flex;
  color: var(--bxa-muted);
}

.bxa .bxa-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding-inline: 12px;
  font: inherit;
  font-size: var(--bxa-fs-body);
  color: var(--bxa-ink);
  text-align: right;
}

/* Centred by the flexbox rather than by the button's default text layout. A <button> with
   a fixed height centres its label against the *font's* metrics, and IRANYekan's ascent and
   descent are not symmetrical — so the Persian label sits visibly low, most of all at the
   shorter mobile height. Centring the line box and pinning line-height to 1 makes the label
   sit on the button's own centre instead of the font's. */
.bxa .bxa-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--bxa-green-900);
  color: var(--bxa-lime);
  border-radius: var(--bxa-r-pill);
  height: var(--bxa-search-btn-h);
  padding-top: 0;
  padding-inline: var(--bxa-search-btn-pad-x);
  font: inherit;
  font-size: var(--bxa-search-btn-fs);
  font-weight: var(--bxa-fw-bold);
  line-height: 1;
  /* Optical centring, on top of the geometric centring above. Flexbox centres the *em box*,
     and «جستجو» does not fill it evenly: the word has no ascender at all and two deep ج
     descenders, so its ink sits 0.113em below the em box's middle and the label reads low.
     Every other pill on the page has a letter that reaches up and lands within half a pixel
     of centre, which is why this is the one button that needed it.
     Padding shrinks the content box from the bottom, so the centred label rises by half the
     value — hence twice the offset. In em, so it holds at both breakpoints' font sizes. */
  padding-bottom: var(--bxa-search-btn-optical);
}

/* ---------------------------------------------------------------- chips */

.bxa .bxa-chips {
  background: var(--bxa-surface);
}

.bxa .bxa-chips__scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-top: var(--bxa-chips-gap-top);
  padding-bottom: var(--bxa-chips-gap-bottom);
  /* The chip row scrolls; the page must not. */
  scrollbar-width: none;
}

.bxa .bxa-chips__scroll::-webkit-scrollbar {
  display: none;
}

/* Two separate bands, each balanced on its own terms. The chip row sits on white with an
   equal gap above and below, so the row is centred in its band rather than crowded up
   against the hero. The grid section is the next band and keeps a top gap of its own before
   its heading — just not the full section padding, which stacked on the row's and made the
   space below the chips three times the space above. */
.bxa .bxa-chips + .bxa-grid-section {
  padding-top: var(--bxa-grid-pad-top);
}

.bxa .bxa-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: var(--bxa-chip-h);
  padding-inline: var(--bxa-chip-pad-x);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-surface);
  color: var(--bxa-muted);
  font-size: var(--bxa-fs-chip);
  font-weight: var(--bxa-fw-regular);
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bxa .bxa-chip:hover {
  border-color: var(--bxa-green-900);
}

.bxa .bxa-chip.is-active {
  background: var(--bxa-green-900);
  border-color: var(--bxa-green-900);
  color: var(--bxa-lime);
  font-weight: var(--bxa-fw-bold);
}

/* ---------------------------------------------------------------- listing grid */

.bxa .bxa-grid-section {
  padding-block: 40px 72px;
}

.bxa .bxa-section__title {
  margin: 0 0 24px;
  font-size: var(--bxa-fs-lead);
  font-weight: var(--bxa-fw-bold);
  color: var(--bxa-ink-strong);
}

.bxa .bxa-section__intro {
  margin: -12px 0 24px;
  max-width: 720px;
  color: var(--bxa-muted);
  font-size: var(--bxa-fs-sm);
}

.bxa .bxa-grid {
  display: grid;
  grid-template-columns: repeat(var(--bxa-grid-cols), minmax(0, 1fr));
  gap: var(--bxa-grid-gap);
}

.bxa .bxa-card {
  min-height: var(--bxa-card-h);
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
  transition: box-shadow 0.15s, transform 0.15s;
}

.bxa .bxa-card:hover {
  box-shadow: 0 8px 24px rgb(25 28 24 / 8%);
  transform: translateY(-2px);
}

.bxa .bxa-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--bxa-card-pad);
  text-decoration: none;
  color: inherit;
}

/* Avatar on the leading edge (right in RTL), title beside it, tag on the trailing edge.
   Source order is the reading order — no `row-reverse`, which mirrors the whole card. */
.bxa .bxa-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bxa .bxa-card__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--bxa-fs-card-title);
  font-weight: var(--bxa-fw-bold);
  line-height: var(--bxa-lh-tight);
  color: var(--bxa-ink-strong);
}

.bxa .bxa-card__description {
  margin: 14px 0 0;
  font-size: var(--bxa-fs-xs);
  line-height: var(--bxa-lh-body);
  color: var(--bxa-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Edge to edge. The export's divider spans x=0..281 on a 282-wide card — it is not inset by
   the padding — so the negative inline margins cancel it. */
.bxa .bxa-card__rule {
  margin: 12px calc(var(--bxa-card-pad) * -1) 12px;
  border: 0;
  border-top: 1px solid var(--bxa-border);
}

.bxa .bxa-card__footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.bxa .bxa-card__features {
  margin: 0;
  font-size: var(--bxa-fs-2xs);
  color: var(--bxa-muted);
  line-height: 1.4;
}

.bxa .bxa-stat {
  display: flex;
  margin: 0;
}

.bxa .bxa-stat dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--bxa-fs-2xs);
  color: var(--bxa-muted-soft);
  line-height: 1.4;
}

/* The icon leads — rightmost in RTL — then the figure, then the word, as the export draws
   it. An `order` flip here put the icon on the far side of the text. */
.bxa .bxa-stat__icon {
  display: inline-flex;
}

.bxa .bxa-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* flex-end is the trailing edge, which in RTL is the left — where the export puts it. */
  align-self: flex-end;
  margin-top: auto;
  min-width: var(--bxa-cta-w);
  height: var(--bxa-cta-h);
  padding-inline: var(--bxa-cta-pad-x);
  border-radius: var(--bxa-r-cta);
  /* The full lime, with black on top. The pale tint belongs to nothing on this card. */
  background: var(--bxa-lime);
  color: #000;
  font-size: var(--bxa-fs-xs);
  font-weight: var(--bxa-fw-bold);
}

.bxa .bxa-card__arrow {
  display: inline-flex;
}

/* ---------------------------------------------------------------- avatar & badge */

.bxa .bxa-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-avatar-bg, var(--bxa-green-900));
  overflow: hidden;
  /* line-height 1 is what actually centres an emoji in a circle — the font's own ascent and
     descent are not symmetric about the glyph, so centring the box is not enough. */
  line-height: 1;
}

.bxa .bxa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bxa .bxa-avatar--card {
  width: var(--bxa-avatar-card);
  height: var(--bxa-avatar-card);
  font-size: calc(var(--bxa-avatar-card) / 2);
}

.bxa .bxa-avatar--hero {
  width: var(--bxa-avatar-hero);
  height: var(--bxa-avatar-hero);
  font-size: calc(var(--bxa-avatar-hero) / 2.4);
}

.bxa .bxa-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: var(--bxa-badge-h);
  padding-inline: var(--bxa-badge-pad-x);
  border-radius: var(--bxa-r-badge);
  background: var(--bxa-lime);
  color: var(--bxa-green-900);
  font-size: var(--bxa-fs-2xs);
  font-weight: var(--bxa-fw-bold);
  line-height: 1;
}

/* On the hero the badge inverts: the dark pill carries the lime label.
   The hairline is not decoration. At the mobile breakpoint the hero itself becomes
   #1C4537 — the same value as this pill — and without a border the badge disappears
   into it completely. The design's mobile frame draws exactly this stroke. */
.bxa .bxa-badge--onDark {
  height: 28px;
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-green-900);
  border: 1px solid rgb(255 255 255 / 45%);
  color: var(--bxa-lime);
  font-size: var(--bxa-fs-xs);
  padding-inline: var(--bxa-chip-pad-x);
}

/* ---------------------------------------------------------------- embed
   The shortcode drops this grid into someone else's page, so it carries no page background
   and no section padding of its own — it has to sit inside whatever surrounds it. */

.bxa.bxa-embed {
  background: transparent;
}

/* The requested column count travels as data-cols, not as an inline --bxa-grid-cols: an
   inline custom property beats every media query below, so the homepage embed stayed at
   four 68px columns on a phone. As a selector, the breakpoints can step it down. */
.bxa.bxa-embed[data-cols="1"] { --bxa-grid-cols: 1; }
.bxa.bxa-embed[data-cols="2"] { --bxa-grid-cols: 2; }
.bxa.bxa-embed[data-cols="3"] { --bxa-grid-cols: 3; }
.bxa.bxa-embed[data-cols="4"] { --bxa-grid-cols: 4; }

.bxa .bxa-embed__more {
  margin: 20px 0 0;
  text-align: center;
}

.bxa .bxa-embed__more a {
  color: var(--bxa-green-900);
  font-size: var(--bxa-fs-sm);
  font-weight: var(--bxa-fw-bold);
  text-decoration: none;
}

/* ---------------------------------------------------------------- load more */

.bxa .bxa-loadmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 40px;
  min-height: 46px;
}

.bxa .bxa-loadmore__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding-inline: 28px;
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-cta);
  background: var(--bxa-surface);
  color: var(--bxa-green-900);
  font-size: var(--bxa-fs-sm);
  font-weight: var(--bxa-fw-bold);
  text-decoration: none;
}

.bxa .bxa-loadmore__btn:hover {
  border-color: var(--bxa-green-900);
}

/* Hidden until a fetch is in flight, so the button does not jump when one starts. */
.bxa .bxa-loadmore__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--bxa-border);
  border-top-color: var(--bxa-green-900);
  border-radius: var(--bxa-r-pill);
  animation: bxa-spin 0.7s linear infinite;
}

.bxa .bxa-loadmore.is-loading .bxa-loadmore__spinner {
  display: block;
}

.bxa .bxa-loadmore.is-loading .bxa-loadmore__btn {
  opacity: 0.5;
  pointer-events: none;
}

@keyframes bxa-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bxa .bxa-loadmore__spinner {
    animation: none;
  }
}

/* ---------------------------------------------------------------- pagination */

.bxa .bxa-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.bxa .bxa-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 14px;
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-cta);
  background: var(--bxa-surface);
  color: var(--bxa-ink);
  font-size: var(--bxa-fs-sm);
  text-decoration: none;
}

.bxa .bxa-pagination__link.is-active {
  background: var(--bxa-green-900);
  border-color: var(--bxa-green-900);
  color: var(--bxa-lime);
  font-weight: var(--bxa-fw-bold);
}

.bxa .bxa-empty {
  padding-block: 48px;
  text-align: center;
  color: var(--bxa-muted);
}

/* ---------------------------------------------------------------- detail */

.bxa .bxa-crumbs {
  background: var(--bxa-surface);
  border-bottom: 1px solid var(--bxa-border);
  font-size: var(--bxa-fs-2xs);
  color: var(--bxa-muted);
}

.bxa .bxa-crumbs .bxa-shell {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 12px;
}

.bxa .bxa-crumbs a {
  color: var(--bxa-muted);
  text-decoration: none;
}

.bxa .bxa-crumbs a:hover {
  color: var(--bxa-green-900);
}

.bxa .bxa-crumbs [aria-current="page"] {
  color: var(--bxa-ink-strong);
  font-weight: var(--bxa-fw-bold);
}

.bxa .bxa-detail__hero {
  display: flex;
  align-items: center;
  min-height: var(--bxa-hero-detail-h);
  background: var(--bxa-hero-bg);
  padding-block: var(--bxa-detail-hero-pad);
}

/* Identity on the right, avatar on the left — the design's arrangement in reading order. */
.bxa .bxa-detail__hero-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--bxa-detail-hero-gap);
  width: 100%;
}

.bxa .bxa-detail__identity {
  flex: 1;
  min-width: 0;
  order: 0;
}

.bxa .bxa-detail__avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  order: 1;
  margin-inline-end: var(--bxa-avatar-hero-inset);
}

/* Name and main tag on one line. The row carries the vertical margins the title used to,
   so the tag rides with the name instead of adding a line of its own. */
.bxa .bxa-detail__titlerow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bxa-detail-title-gap);
  margin: var(--bxa-detail-title-mt) 0 var(--bxa-detail-title-mb);
}

.bxa .bxa-detail__title {
  margin: 0;
  color: var(--bxa-surface);
  font-size: var(--bxa-fs-detail-title);
  font-weight: var(--bxa-fw-display);
  line-height: var(--bxa-lh-tight);
}

.bxa .bxa-detail__lead {
  margin: 0 0 var(--bxa-detail-lead-mb);
  color: var(--bxa-lead-on-dark);
  font-size: var(--bxa-fs-lead);
  font-weight: var(--bxa-fw-regular);
}

.bxa .bxa-detail__stats {
  display: flex;
  gap: 40px;
  margin: 0 0 var(--bxa-detail-stats-mb);
}

.bxa .bxa-detail__stat dd {
  margin: 0;
  color: var(--bxa-surface);
  font-size: var(--bxa-fs-sm);
  font-weight: var(--bxa-fw-bold);
}

.bxa .bxa-detail__stat dt {
  color: var(--bxa-muted-soft);
  font-size: 13px;
}

.bxa .bxa-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* The hero avatar deliberately ignores the assistant's own colour.
   Most assistants are set to the brand green, which is the hero's own background at the
   mobile breakpoint — using it here made the circle vanish and left the emoji floating on
   nothing. A translucent white plate is legible against any hero colour, which the
   assistant's arbitrary admin-chosen one is not. */
.bxa .bxa-detail__avatar-wrap .bxa-avatar {
  background: rgb(255 255 255 / 12%);
}


.bxa .bxa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding-inline: 28px;
  border-radius: var(--bxa-r-cta);
  font-size: var(--bxa-fs-sm);
  font-weight: var(--bxa-fw-bold);
  text-decoration: none;
  transition: opacity 0.15s;
}

.bxa .bxa-btn:hover {
  opacity: 0.9;
}

.bxa .bxa-btn--primary {
  background: var(--bxa-lime);
  color: var(--bxa-green-900);
}

.bxa .bxa-btn--ghost {
  border: 1px solid rgb(255 255 255 / 35%);
  color: var(--bxa-lime);
}

/* ---------------------------------------------------------------- sections */

.bxa .bxa-section {
  padding-block: var(--bxa-section-pad);
  background: var(--bxa-surface);
}

/* The design alternates white and a barely-tinted band, the band carrying a hairline top
   border. Without the border the two read as one flat sheet at this contrast. */
.bxa .bxa-section--tinted {
  background: var(--bxa-surface-tinted);
  border-top: 1px solid var(--bxa-band-border);
  border-bottom: 1px solid var(--bxa-band-border);
}

.bxa .bxa-section__heading {
  margin: 0 0 8px;
  text-align: center;
  font-size: var(--bxa-fs-section);
  font-weight: var(--bxa-fw-display);
  line-height: var(--bxa-lh-tight);
  color: var(--bxa-ink-strong);
}

.bxa .bxa-section__lead {
  margin: 0 0 36px;
  text-align: center;
  color: var(--bxa-muted);
  font-size: var(--bxa-fs-body);
}

.bxa .bxa-section__heading + .bxa-cards,
.bxa .bxa-section__heading + .bxa-prompts,
.bxa .bxa-section__heading + .bxa-faq,
.bxa .bxa-section__heading + .bxa-chat {
  margin-top: 36px;
}

.bxa .bxa-cards {
  display: grid;
  gap: var(--bxa-feature-gap);
}

.bxa .bxa-cards--features {
  grid-template-columns: repeat(var(--bxa-feature-cols), minmax(0, 1fr));
  /* Its own gap: the shared one is 12 on mobile, and both detail frames space these cards
     25 apart on desktop and 17 on mobile. */
  gap: var(--bxa-feature-grid-gap);
}

/* The benefits row reuses the features grid for its columns but not its gap: the frame
   spaces capability cards 25 apart and benefit cards 33. */
.bxa .bxa-section--tinted .bxa-cards--features:has(.bxa-benefit) {
  gap: var(--bxa-benefit-gap);
}

.bxa .bxa-cards--audiences {
  grid-template-columns: repeat(var(--bxa-audience-cols), minmax(0, 1fr));
}

/* Only the capabilities grid is a card in the design. */
.bxa .bxa-feature {
  display: flex;
  flex-direction: column;
  gap: var(--bxa-feature-row-gap);
  min-height: var(--bxa-feature-card-h);
  padding: var(--bxa-feature-pad);
  background: var(--bxa-surface-tinted);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
}

/* On a tinted band the cards invert, or they disappear into it. */
/* 116 is the height of a card that has a description — that is what the frame draws. Until
   the descriptions are filled in, holding every card at 116 leaves two thirds of it empty, so
   a card without one shrinks to its content. Browsers without :has() keep the 116 floor,
   which is only the previous behaviour. */
.bxa .bxa-feature:not(:has(.bxa-feature__text)) {
  min-height: 0;
}

.bxa .bxa-section--tinted .bxa-feature {
  background: var(--bxa-surface);
}

/* Audiences and benefits carry no card, no border and no icon plate — the design sets them
   bare on the band. Boxing them added weight the design does not have and made two very
   different sections look like the same grid. */
.bxa .bxa-audience,
.bxa .bxa-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* The icon's row. Its height is the icon's, and the title is centred against it — so the
   two stay aligned on a card with a description and on one without. */
.bxa .bxa-feature__head {
  display: flex;
  align-items: center;
  gap: var(--bxa-feature-icon-gap);
  min-height: var(--bxa-feature-icon);
}

.bxa .bxa-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--bxa-feature-icon);
  height: var(--bxa-feature-icon);
  /* Round, at the design's 32. The plate stays the light accent tint rather than the frame's
     solid #1C4537: the frame draws a light line icon on dark, and a full-colour emoji on that
     same dark green is barely readable. Geometry from the design, contrast for the emoji. */
  border-radius: 50%;
  /* The static value is a fallback, not a duplicate: a browser that cannot parse color-mix
     drops that declaration and keeps this one, rather than rendering no plate at all. */
  background: #eef1ec;
  background: color-mix(in srgb, var(--bxa-accent) 12%, transparent);
  font-size: var(--bxa-feature-icon-fs);
  line-height: 1;
}

/* Bare glyph, no plate — sampling the frame around the emoji finds nothing but the emoji's
   own pixels. */
/* Both of these were bare stacks of text on the section's own background — the frame draws
   them as cards. Only the container changes here: the icon, the title and the description
   keep the placement they already had. */
.bxa .bxa-audience {
  padding: var(--bxa-audience-pad);
  min-height: var(--bxa-audience-card-h);
  background: var(--bxa-surface-tinted);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
}

.bxa .bxa-benefit {
  padding: var(--bxa-benefit-pad);
  min-height: var(--bxa-benefit-card-h);
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card-lg);
}

/* A card on the tinted band takes the white fill and vice versa, so it never disappears
   into the ground it sits on. */
.bxa .bxa-section--tinted .bxa-audience {
  background: var(--bxa-surface);
}

.bxa .bxa-section:not(.bxa-section--tinted) .bxa-benefit {
  background: var(--bxa-surface-tinted);
}

.bxa .bxa-audience__icon,
.bxa .bxa-benefit__icon {
  display: inline-flex;
  font-size: var(--bxa-fs-lead);
  line-height: 1;
}

/* Split out of the shared heading rule: those use --bxa-fs-lead, which drops to 13px on
   mobile for the hero's lead paragraph. Both detail frames set this title at 16 bold at
   every width, so it carries its own size. */
.bxa .bxa-feature__title {
  margin: 0;
  font-size: var(--bxa-feature-title-fs);
  font-weight: var(--bxa-fw-bold);
  color: var(--bxa-ink-strong);
  line-height: var(--bxa-lh-tight);
}

.bxa .bxa-feature__text {
  margin: 0;
  font-size: var(--bxa-feature-text-fs);
  color: var(--bxa-muted);
  line-height: var(--bxa-feature-text-lh);
}

.bxa .bxa-audience__title,
.bxa .bxa-benefit__title {
  margin: 0 0 4px;
  font-size: var(--bxa-fs-lead);
  font-weight: var(--bxa-fw-bold);
  color: var(--bxa-ink-strong);
  line-height: var(--bxa-lh-tight);
}

.bxa .bxa-audience__text,
.bxa .bxa-benefit__text {
  margin: 0;
  font-size: var(--bxa-fs-sm);
  color: var(--bxa-muted);
  line-height: 1.7;
}

/* ---------------------------------------------------------------- chat preview */

.bxa .bxa-chat {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--bxa-chat-w);
  margin-inline: auto;
  padding: var(--bxa-chat-pad);
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
}

.bxa .bxa-chat__turn {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bxa .bxa-bubble {
  margin: 0;
  padding: 12px 16px;
  border-radius: var(--bxa-r-card);
  font-size: var(--bxa-fs-sm);
  line-height: 1.9;
}

/* The design puts the assistant on the reading-start edge and the user on the end — the
   opposite of a Western chat window, and the opposite of what this had. Measured off the
   frame: the lime bubble is flush left, the outlined reply flush right. */
.bxa .bxa-bubble--user {
  align-self: flex-end;
  max-width: var(--bxa-bubble-max);
  background: var(--bxa-lime);
  color: var(--bxa-green-900);
}

.bxa .bxa-bubble--assistant {
  align-self: flex-start;
  max-width: var(--bxa-bubble-max);
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
}

.bxa .bxa-bubble__who {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* The small lime marker the frame draws before the sender's name. */
.bxa .bxa-bubble__who::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-lime);
  flex: 0 0 auto;
}

.bxa .bxa-bubble__who {
  margin: 0 0 6px;
  font-size: var(--bxa-fs-2xs);
  font-weight: var(--bxa-fw-bold);
  color: var(--bxa-muted-soft);
}

.bxa .bxa-bubble__text {
  margin: 0;
  color: var(--bxa-ink-strong);
}

/* ---------------------------------------------------------------- message attachments */

/* Stand-ins for a photo, a clip, a voice note or a file in the example conversation. There
   is no media behind any of them and no <img> anywhere: an image element with nothing to
   load is a broken image, whereas a frame drawn in CSS is plainly an illustration. See
   Renderer::attachment() for why the examples work this way. */
.bxa .bxa-attach {
  margin: 0 0 var(--bxa-attach-gap);
  display: flex;
  flex-direction: column;
  /* Hug the content. Without this the column stretches its children to the bubble's full
     width and a voice note becomes a long empty pill. */
  align-items: flex-start;
  gap: 6px;
}

/* The tile: image and video. Aspect-ratio rather than a fixed height, so the shape holds
   when the bubble narrows on mobile. */
.bxa .bxa-attach__frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bxa-attach-tile-w);
  max-width: 100%;
  aspect-ratio: var(--bxa-attach-tile-ratio);
  border-radius: var(--bxa-r-cta);
  /* A soft two-stop wash reads as "a picture goes here" without pretending to be one. */
  background: linear-gradient(135deg, #dfe5e0, #f0f2ef);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bxa-green-900) 16%, transparent),
      color-mix(in srgb, var(--bxa-green-900) 6%, transparent));
  color: var(--bxa-green-900);
}

.bxa .bxa-attach__glyph {
  width: var(--bxa-attach-glyph);
  height: var(--bxa-attach-glyph);
  opacity: 0.72;
}

/* Play badge on a video tile. Its triangle is a border trick so it needs no second asset,
   nudged right of centre because a triangle's optical centre is not its bounding box's. */
.bxa .bxa-attach__play {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-green-900);
}

.bxa .bxa-attach__play::after {
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--bxa-lime);
  margin-inline-start: 3px;
}

/* The strip: audio and file. */
.bxa .bxa-attach__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: var(--bxa-attach-chip-h);
  padding: 0 14px;
  border-radius: var(--bxa-r-pill);
  background: #e6ebe7;
  background: color-mix(in srgb, var(--bxa-green-900) 10%, transparent);
  color: var(--bxa-green-900);
}

.bxa .bxa-attach__chip .bxa-attach__glyph {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.8;
}

/* A still waveform. The bar heights come from the renderer as a fixed pattern rather than
   random values — this markup is cached, and a shape that changed per request would make
   two identical pages differ. */
.bxa .bxa-attach__wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 22px;
}

.bxa .bxa-attach__wave i {
  width: 3px;
  height: var(--bxa-wave-h, 10px);
  border-radius: var(--bxa-r-pill);
  background: currentColor;
  opacity: 0.55;
}

/* A file's name rides on the chip rather than under it. */
.bxa .bxa-attach--file .bxa-attach__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
}

.bxa .bxa-attach--file .bxa-attach__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* The duration on a voice note, at the far end of the waveform. */
.bxa .bxa-attach__time {
  flex: 0 0 auto;
  font-size: var(--bxa-fs-2xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.bxa .bxa-attach__caption {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--bxa-fs-2xs);
  line-height: 1.6;
}

.bxa .bxa-attach__label {
  font-weight: var(--bxa-fw-bold);
}

.bxa .bxa-attach__meta {
  opacity: 0.7;
}

/* On the lime user bubble the tint has to come off the dark ink, not off the accent, or the
   frame disappears into the lime. */
.bxa .bxa-bubble--user .bxa-attach__frame {
  background: linear-gradient(135deg, #b6cc7e, #c9de92);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--bxa-green-900) 22%, transparent),
      color-mix(in srgb, var(--bxa-green-900) 10%, transparent));
}

.bxa .bxa-bubble--user .bxa-attach__chip {
  background: #c2d78a;
  background: color-mix(in srgb, var(--bxa-green-900) 14%, transparent);
}

/* ---------------------------------------------------------------- prompts */

.bxa .bxa-prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bxa .bxa-prompt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--bxa-prompt-h);
  padding-inline: var(--bxa-prompt-pad-x);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-pill);
  background: var(--bxa-surface-tinted);
  color: var(--bxa-green-900);
  font-size: var(--bxa-fs-sm);
  text-decoration: none;
}

.bxa .bxa-prompt:hover {
  border-color: var(--bxa-green-900);
}

/* ---------------------------------------------------------------- faq */

.bxa .bxa-faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--bxa-faq-w);
  margin-inline: auto;
}

.bxa .bxa-faq__item {
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
  padding: 16px var(--bxa-card-pad);
}

.bxa .bxa-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: var(--bxa-fs-body);
  font-weight: var(--bxa-fw-bold);
  color: var(--bxa-ink-strong);
  list-style: none;
}

.bxa .bxa-faq__question::-webkit-details-marker {
  display: none;
}

.bxa .bxa-faq__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--bxa-muted);
  transition: transform 0.15s;
}

.bxa .bxa-faq__item[open] .bxa-faq__chevron {
  transform: rotate(180deg);
}

.bxa .bxa-faq__answer {
  margin: 12px 0 0;
  font-size: var(--bxa-fs-sm);
  color: var(--bxa-muted);
  line-height: 1.9;
}

/* ---------------------------------------------------------------- hub copy (/assistants/ only) */

.bxa .bxa-hub__body,
.bxa .bxa-hub__steps {
  max-width: var(--bxa-faq-w);
  margin: 28px auto 0;
  font-size: var(--bxa-fs-body);
  line-height: 2;
  color: var(--bxa-ink);
}

.bxa .bxa-hub__body p {
  margin: 0 0 14px;
}

.bxa .bxa-hub__body p:last-child {
  margin-bottom: 0;
}

.bxa .bxa-hub__steps {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  counter-reset: bxa-step;
}

.bxa .bxa-hub__steps li {
  position: relative;
  padding: 14px 56px 14px var(--bxa-card-pad);
  background: var(--bxa-surface);
  border: 1px solid var(--bxa-border);
  border-radius: var(--bxa-r-card);
  counter-increment: bxa-step;
}

/* Persian digits in a green disc at the start (right) edge, matching the design's numbered steps. */
.bxa .bxa-hub__steps li::before {
  content: counter(bxa-step, persian);
  position: absolute;
  inset-inline-start: 16px;
  top: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bxa-green-900);
  color: #fff;
  font-weight: var(--bxa-fw-bold);
  font-size: 14px;
  line-height: 28px;
  text-align: center;
}

/* ---------------------------------------------------------------- authored prose */

.bxa .bxa-prose {
  font-size: var(--bxa-fs-body);
  color: var(--bxa-ink);
}

.bxa .bxa-prose h2,
.bxa .bxa-prose h3 {
  color: var(--bxa-ink-strong);
}

.bxa .bxa-prose a {
  color: var(--bxa-green-900);
}

/* ---------------------------------------------------------------- closing cta */

.bxa .bxa-cta {
  background: var(--bxa-cta-bg);
  padding-block: var(--bxa-section-pad);
  text-align: center;
}

.bxa .bxa-cta__title {
  margin: 0 0 10px;
  color: var(--bxa-surface);
  font-size: var(--bxa-fs-cta-title);
  font-weight: var(--bxa-fw-display);
  line-height: var(--bxa-lh-tight);
}

.bxa .bxa-cta__lead {
  margin: 0 0 26px;
  color: var(--bxa-lead-on-dark);
  font-size: var(--bxa-fs-lead);
}

/* ---------------------------------------------------------------- responsive
   Only tokens are redeclared here. No rule is repeated. */

@media (max-width: 1180px) {
  .bxa {
    --bxa-grid-cols: 3;
    --bxa-audience-cols: 2;
  }
  .bxa.bxa-embed[data-cols="4"] { --bxa-grid-cols: 3; }
}

@media (max-width: 900px) {
  .bxa.bxa-embed[data-cols="3"],
  .bxa.bxa-embed[data-cols="4"] { --bxa-grid-cols: 2; }
  .bxa {
    --bxa-grid-cols: 2;
    --bxa-feature-cols: 2;
    --bxa-fs-hero: 34px;
    --bxa-fs-detail-title: 32px;
    --bxa-fs-section: 26px;
    --bxa-avatar-hero: 128px;
    --bxa-avatar-hero-inset: 0px;
  }

  .bxa .bxa-detail__hero-inner {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }

  /* Avatar above the name on a narrow screen, matching the mobile frame. */
  .bxa .bxa-detail__avatar-wrap {
    order: -1;
  }

  .bxa .bxa-detail__stats,
  .bxa .bxa-detail__actions {
    justify-content: center;
  }

  .bxa .bxa-detail__titlerow {
    justify-content: center;
  }

  /* The count and its label share a line here — figure first, then what it counts. On the
     wide layout they stay stacked, which is how the desktop frame draws them. */
  .bxa .bxa-detail__stat {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
  }
}

/* Measured from the 390-wide frames. Mobile is not desktop scaled down: the hero uses the
   darker green, the page sits on the tinted surface rather than the grey one, and the card
   avatar grows rather than shrinks. */
@media (max-width: 640px) {
  .bxa.bxa-embed[data-cols] { --bxa-grid-cols: 1; }
  .bxa {
    --bxa-grid-cols: 1;
    --bxa-feature-cols: 1;
    --bxa-audience-cols: 1;

    --bxa-hero-bg: #1c4537;
    --bxa-page-bg: #fafbf9;

    --bxa-fs-hero: 26px;
    --bxa-fs-detail-title: 26px;
    --bxa-fs-section: 22px;
    --bxa-fs-cta-title: 24px;
    --bxa-fs-lead: 13px;

    --bxa-hero-h: 297px;
    --bxa-hero-detail-h: 258px;
    /* The band was carrying a subtitle, a stacked tag and a two-line stat; with those gone
       it does not need the desktop's breathing room. */
    --bxa-detail-hero-pad: 28px;
    --bxa-detail-title-gap: 10px;
    --bxa-detail-title-mt: 0px;
    --bxa-detail-title-mb: 8px;
    --bxa-detail-lead-mb: 16px;
    --bxa-detail-stats-mb: 18px;
    --bxa-card-h: auto;
    --bxa-search-h: 45px;
    --bxa-search-w: 100%;
    --bxa-search-btn-h: 33px;
    --bxa-search-btn-pad-x: 18px;
    --bxa-search-btn-fs: 13px;
    --bxa-chip-h: 29px;
    --bxa-chip-pad-x: 12px;
    /* The card is the same component at every width — AI-Assistant-Card is the authority
       for both — so its avatar does not change size here. The older mobile frame drew a
       46pt one; the standalone export supersedes it. */
    --bxa-avatar-hero: 96px;
    --bxa-avatar-hero-inset: 0px;

    --bxa-section-pad: 40px;
    --bxa-grid-pad-top: 28px;
    --bxa-grid-gap: 24px;
    --bxa-feature-gap: 12px;
    --bxa-feature-grid-gap: 17px;
    --bxa-gutter: 16px;
  }

  .bxa .bxa-detail__hero-inner {
    gap: 18px;
  }

  /* The mobile frame carries one button, full width. «مشاهده نمونه گفتگو» is only an anchor
     to a section further down the same page, so hiding it here costs nothing — the sample
     conversation is still reached by scrolling, and it comes back at the wider layout. */
  /*
   * Pinned to the viewport on phones. The persona, the stats, the highlights and the sample
   * conversation put this button a long way below the fold, so a visitor who had read enough
   * and wanted to start had to scroll back up to find it.
   *
   * Phones only — the wider layout keeps it inline, where it is already in view.
   */
  .bxa .bxa-detail__actions {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    width: 100%;
    margin: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--bxa-surface);
    border-top: 1px solid var(--bxa-border);
    box-shadow: 0 -6px 20px rgb(0 0 0 / 8%);
  }

  .bxa .bxa-detail__actions .bxa-btn--ghost {
    display: none;
  }

  .bxa .bxa-detail__actions .bxa-btn--primary {
    width: 100%;
  }

  /* Clears the pinned bar so the footer and the last section stay reachable. */
  .bxa.bxa-detail {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .bxa .bxa-chips__scroll {
    flex-wrap: nowrap;
  }



  .bxa {
    --bxa-chat-pad: 16px;
    --bxa-bubble-max: 100%;
    --bxa-prompt-h: 36px;
    --bxa-prompt-pad-x: 16px;
  }
}