/* ============================================================
   KeyLen Web — KeyLen AI product page
   ------------------------------------------------------------
   `/ai` is a PRODUCT PAGE, like `/finder`. It reuses the site's
   twelve-column field, type scale, header, footer and every
   design token unchanged.

   This file is ADDITIVE and PAGE-LOCAL. It defines no existing
   selector, so the frozen homepage, `/finder`, `/finder/privacy`
   and `/finder/help` cannot be affected by it — none of them
   links this stylesheet.

   It introduces no new type scale, no new colour and no new
   component. Every value below is an existing token. Only three
   things are set here that the shared system does not provide:

     1. the document section rhythm
     2. the brand-role marker
     3. the figure and its caption

   No JavaScript is involved anywhere on this page.
   ============================================================ */

/* ---- the product-section rhythm ----------------------------
   Same tempo as the rest of the site: `--section-pad` is the
   product-section value, reused rather than re-invented. */
.ai-doc { padding: var(--section-pad) 0; }
.ai-doc .grid { row-gap: var(--space-4); }
.ai-doc .t-body + .t-body { margin-top: var(--space-3); }

/* the last section closes the page rather than simply stopping */
.ai-end { padding: var(--section-pad) 0 var(--space-16); }

/* ---- the brand-role marker ---------------------------------
   `UNDERSTAND · 理解你的信息`.

   A quiet line above the headline that states the product's
   place in the brand chain. Set in the accent colour at label
   scale, sitting between the product identity row and the H1 —
   the eyebrow treatment the site already uses, not a new one. */
.ai-role {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* The ZH half of the marker is Chinese. Negative tracking and
   uppercase do nothing useful for CJK, so the letter-spacing is
   relaxed to match the site's Chinese treatment elsewhere. The
   line stays in one piece because it is a short, fixed phrase. */
html[lang^="zh"] .ai-role { letter-spacing: 0.06em; }

/* ---- figures ------------------------------------------------
   The two authentic captures. Proportional only — never enlarged
   past capture resolution, no frame, no shadow, no mock device
   chrome. The whitespace around them is the composition.

   They sit in the full field because they are evidence and have
   to stay legible, exactly as the Finder page's captures do.

   On desktop the two are laid side by side; below 900px they
   stack, because a phone-width screenshot is unreadable at half
   of a narrow column. */
.ai-shot {
  grid-column: 1 / 13;
  margin: var(--space-6) 0 0;
}
.ai-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.ai-shot figcaption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--faint);
}

/* Side by side on desktop. `grid-column: span 6` keeps each
   capture at half the field, which at 1320px is a 642px-wide
   image — comfortable for a 1179px source with no enlargement. */
@media (min-width: 901px) {
  .ai-shot { grid-column: span 6; }
  .ai-shot + .ai-shot { margin-top: var(--space-6); }
}

/* ============================================================
   MOBILE — the desktop composition collapses to one reading axis
   ============================================================ */
@media (max-width: 900px) {
  .ai-doc { padding: var(--section-pad-sm) 0; }
  .ai-end { padding: var(--section-pad-sm) 0 var(--space-12); }

  /* REQUIRED, not cosmetic. `site.css` collapses `.grid` to a SINGLE
     column below 900px, but its reset list does not include
     `.ai-shot`. Without this the figure keeps a multi-column span,
     which on a one-column grid creates implicit tracks and pushes
     the image past the gutter to the viewport edge. `1 / -1` spans
     the whole grid whatever its column count. */
  .ai-shot { grid-column: 1 / -1; margin-top: var(--space-6); }
}