/* ==========================================================================
   Agent detail pages — the ten /agent-ai-<slug>/ pages.

   The long-form product layout: hero, fact strip, outcome cards, capability
   groups (an expandable feature list beside a drawn panel), the four-step
   rail, a hand-off table, rollout, related tiles, resources and a three-door
   close. Enqueued on the agent-ai- prefix only, so the /agents/ index does
   not pay for it and keeps its own design.

   Self-contained on purpose: it carries the few .ag- rules the detail page
   needs (the step rail, the terms columns, the prev/next cards) rather than
   depending on a separate agents.css, so restoring this page never depends
   on a second file being present.

   Rules kept from the system: tokens only (no literal colour outside a
   token-derived rgba), no !important, no surface that stays dark when the
   theme toggle goes light, and every interactive target >= 44px.

   The panels are diagrams, not screenshots, and are built to say so - no
   window chrome, no toggles, no colour-coded status pills. See section 6.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Section furniture
   -------------------------------------------------------------------------- */
.ix-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The hero carries the product name rather than a section label, so it is
   set as a name: bigger, sentence case, no tracking. */
.ix-name {
  display: block;
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--accent-text);
}

.ix-head { max-width: 22ch; }
.ix-head em { font-style: normal; color: var(--accent-text); }

/* a soft field of brand colour behind a section, masked so it never becomes
   a hard band. Light wash in light theme, deep glow in dark. */
.ix-wash {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ix-wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(64% 58% at 82% 6%, rgba(7, 75, 230, 0.18) 0%, transparent 68%),
    radial-gradient(48% 46% at 2% 94%, rgba(254, 96, 11, 0.10) 0%, transparent 70%);
}
:root[data-theme="light"] .ix-wash::before {
  background:
    radial-gradient(64% 58% at 82% 6%, rgba(7, 75, 230, 0.13) 0%, transparent 68%),
    radial-gradient(48% 46% at 2% 94%, rgba(7, 75, 230, 0.06) 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
/* Three items, not two: the name, the copy and the media column. Laying them
   out by area rather than by source order is what lets the stacked layout put
   the name above the portrait while the row keeps the name above the copy. */
.ix-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  grid-template-areas:
    "id   media"
    "copy media";
  column-gap: var(--s8);
  row-gap: var(--s5);
  align-items: center;
  align-content: center;
}
.ix-hero > .ix-id { grid-area: id; align-self: end; }
.ix-hero > .ix-hero-copy { grid-area: copy; align-self: start; }
.ix-hero > .ix-hero-media { grid-area: media; }
/* .display-xl tops out at 116px, sized for a full-bleed headline. This hero
   splits the row with a panel, so the type comes back to a half-column
   scale rather than wrapping to five lines. */
.ix-hero h1 {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 15ch;
}
.ix-hero-lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--text-muted-lg);
  max-width: 52ch;
}
.ix-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  font-size: 14px;
  color: var(--text-quiet);
}
.ix-hero-meta a { color: var(--accent-blue-text); text-decoration: none; }
.ix-hero-meta a:hover { text-decoration: underline; }

.ix-sigil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-panel);
  background: var(--ink-700);
  color: var(--accent-text);
}
.ix-sigil svg { width: 28px; height: 28px; }

/* Identity line and the hero portrait.

   The character from the /agents/ stage leads the hero's media column at
   full size, with the drawn panel riding over its foot, so the face is the
   first thing on the page and the panel still shows the work. The cut outs
   are transparent WebP, so the portrait carries its own ground; both layers
   are tokenised and flip with the theme. */
.ix-id {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.ix-id-text { display: block; }
.ix-persona {
  display: block;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--on-ink);
}
.ix-role {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-quiet);
}

.ix-hero-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ix-portrait {
  position: relative;
  align-self: center;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin: 0;
}
/* a soft ground behind the cut out, the same halo the stage uses, so the navy
   suit does not sink into the dark theme */
.ix-portrait-ground {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 104%;
  height: 104%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, var(--ix-por-ground, rgba(56, 189, 248, 0.16)), transparent 66%);
}
:root[data-theme="light"] .ix-portrait-ground { --ix-por-ground: rgba(7, 76, 231, 0.11); }
.ix-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* The hero's media column is the portrait alone. The walk through one message
   that used to sit under it — and briefly over it, which cut the agent off at
   the chest — now belongs to the section below, beside the copy it explains. */


/* --------------------------------------------------------------------------
   3. Fact strip — what it plugs into. No numbers.
   -------------------------------------------------------------------------- */
.ix-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  padding-block: var(--s6);
  border-block: 1px solid var(--ink-line);
}
.ix-strip dt {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-bottom: 6px;
}
.ix-strip dd {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text-bright);
}
.ix-strip dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-rule); }
.ix-strip dd a:hover { color: var(--accent-text); }

/* --------------------------------------------------------------------------
   4. Outcome cards
   -------------------------------------------------------------------------- */
.ix-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.ix-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s6);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast) var(--ease), transform 200ms var(--ease-out);
}
.ix-card:hover { border-color: var(--accent-rule); transform: translateY(-2px); }
.ix-card-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-control);
  border: 1px solid var(--ink-line);
  color: var(--accent-text);
}
.ix-card-mark svg { width: 20px; height: 20px; }
.ix-card h3 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-bright);
}
.ix-card p { font-size: 15px; line-height: 1.6; color: var(--text-muted-lg); }

/* --------------------------------------------------------------------------
   5. Capability group
   -------------------------------------------------------------------------- */
.ix-group {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  gap: var(--s8);
  align-items: center;
}
.ix-group-flip .ix-group-copy { order: 2; }
.ix-group-flip .ix-group-media { order: 1; }

.ix-feat { border-top: 1px solid var(--ink-line); }
.ix-feat:last-child { border-bottom: 1px solid var(--ink-line); }
.ix-feat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  min-height: 44px;
  padding-block: var(--s4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.ix-feat-btn:hover,
.ix-feat-btn[aria-expanded="true"] { color: var(--accent-text); }
.ix-feat p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-muted-lg);
  max-width: 54ch;
  padding-bottom: var(--s4);
}

/* --------------------------------------------------------------------------
   6. Diagram panels

   The first version wore application chrome - a title bar with three
   traffic-light dots, sliding on/off toggles, green and amber status pills.
   That is the generic AI-product look the brief rules out, and it implied a
   UI that may not match the product. What is left is the part that carries
   meaning: the rows, the record fields, and a plain word for state.
   -------------------------------------------------------------------------- */
.ix-panel {
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-panel);
  padding: var(--s5);
}

/* a caption, set like the section labels rather than a window title bar */
.ix-panel-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--ink-line);
}
.ix-panel-body { padding-top: var(--s4); display: flex; flex-direction: column; gap: 10px; }

/* state, as a word: no pill, no colour coding */
.ix-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
  white-space: nowrap;
}

/* a row in the queue: a hairline list, not a stack of cards */
.ix-msg {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: 1px solid var(--ink-line);
}
.ix-panel-body > .ix-msg:first-child { border-top: 0; }
.ix-msg-ch {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.ix-msg-subj {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-msg-meta {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-quiet);
  padding-top: 2px;
}
.ix-msg-meta b { font-weight: 700; color: var(--accent-blue-text); }

/* a linked record */
.ix-record-quote {
  padding: var(--s4);
  background: var(--ink-800);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--accent-rule);
  border-radius: var(--r-control);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted-lg);
}
.ix-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-control);
  overflow: hidden;
}
.ix-fields > div { background: var(--ink-800); padding: 10px var(--s4); }
.ix-fields dt {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.ix-fields dd { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text-bright); padding-top: 3px; }

/* an action and whether it is on: hairline rows, so a list reads as a table
   rather than a settings screen */
.ix-rule-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: 11px 0;
  border-top: 1px solid var(--ink-line);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-bright);
}
.ix-rule-row:first-child { border-top: 0; }

/* --------------------------------------------------------------------------
   7. Hand-off table
   -------------------------------------------------------------------------- */
.ix-table-wrap { border: 1px solid var(--ink-line); border-radius: var(--r-card); overflow: hidden; }
.ix-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ix-table th,
.ix-table td { padding: var(--s4) var(--s5); text-align: left; vertical-align: top; }
.ix-table thead th {
  background: var(--ink-800);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.ix-table tbody tr { border-top: 1px solid var(--ink-line); }
.ix-table tbody th { font-weight: 700; color: var(--text-bright); width: 28%; }
.ix-table tbody td { color: var(--text-muted-lg); line-height: 1.6; }
.ix-table tbody td:last-child { color: var(--text-bright); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Related and resources
   -------------------------------------------------------------------------- */
.ix-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ix-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 100%;
  padding: var(--s5);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform 200ms var(--ease-out);
}
.ix-tile:hover { border-color: var(--accent-rule); transform: translateY(-2px); }
.ix-tile-kind {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-quiet);
}
.ix-tile h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; color: var(--text-bright); }
.ix-tile p { font-size: 14px; line-height: 1.55; color: var(--text-muted-lg); }
.ix-tile-go {
  margin-top: auto;
  padding-top: var(--s3);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
}

/* --------------------------------------------------------------------------
   9. Closing CTA
   -------------------------------------------------------------------------- */
.ix-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.ix-door {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: flex-start;
  border-top: 2px solid var(--accent-rule);
  padding-top: var(--s5);
}
.ix-door h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }
.ix-door p { font-size: 15px; line-height: 1.6; color: var(--text-muted-lg); flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   10. The four-step rail, the terms columns and the prev/next cards.

   These were in a shared agents.css that the index no longer loads, so they
   live here now. Scroll progress comes from the theme's own [data-scroll]
   --p (0 -> 1); with JS off or reduced motion --p is unset and the rail
   defaults to full.
   -------------------------------------------------------------------------- */
.ag-rail {
  --fill: clamp(0, calc((var(--p, 1) - var(--rail-start, 0.12)) * var(--rail-rate, 2.5)), 1);
  position: relative;
}
.ag-rail::before,
.ag-rail-fill {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 5px;
  width: 2px;
  border-radius: 2px;
}
.ag-rail::before { background: var(--ink-line); }
.ag-rail-fill {
  background: var(--accent-rule);
  transform-origin: top;
  transform: scaleY(var(--fill));
  transition: transform 80ms linear; /* smooths rAF steps; scroll is the clock */
}
.ag-stop {
  --on: clamp(0, calc((var(--fill) - var(--at, 0)) * 20), 1);
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--ink-edge);
  background: var(--ink-800);
}
.ag-stop::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--accent-rule);
  opacity: var(--on);
  transform: scale(calc(0.35 + var(--on) * 0.65));
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.ag-flow-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--s8);
  align-items: start;
}
.ag-flow { padding-left: 40px; }
.ag-flow ol { list-style: none; margin: 0; padding: 0; }
.ag-flow li { position: relative; padding-bottom: var(--s7); }
.ag-flow li:last-child { padding-bottom: 0; }
.ag-flow .ag-stop { left: -40px; }

/* each step alternates sides, so the section reads left-right-left-right */
.ag-flow-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
}
.ag-flow-row:nth-child(even) { grid-template-columns: minmax(0, 1fr) 132px; }
.ag-flow-row:nth-child(even) .ag-frame { order: 2; }
.ag-flow-row:nth-child(even) .ag-flow-copy { order: 1; text-align: right; }

.ag-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 132px;
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  background: var(--ink-700);
  overflow: hidden;
}
/* The frame held a step number; the site carries no numbering, so it holds a
   mark that says "and then" instead. */
.ag-frame svg {
  width: 46px;
  height: 46px;
  color: var(--accent-text);
}
.ag-flow-verb {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.ag-flow-text {
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--text-bright);
  padding-top: 4px;
  max-width: 46ch;
}

.ag-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s8);
}
.ag-terms ul { list-style: none; margin: 0; padding: 0; }
.ag-terms li {
  padding-block: var(--s3);
  border-top: 1px solid var(--ink-line);
  font-size: 15px;
  color: var(--text-muted-lg);
}
.ag-terms li:last-child { border-bottom: 1px solid var(--ink-line); }
.ag-limit {
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--text-bright);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink-line);
}

.ag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink-line);
  border-radius: var(--r-control);
  color: var(--accent-text);
  transition: border-color var(--t-fast) var(--ease);
}
.ag-icon svg { width: 22px; height: 22px; }

.ag-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
}
.ag-pager .ag-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--ink-700);
  border: 1px solid var(--ink-line);
  border-radius: var(--r-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), transform 200ms var(--ease-out);
}
.ag-pager .ag-card:hover,
.ag-pager .ag-card:focus-visible { border-color: var(--accent-rule); transform: translateY(-2px); }
.ag-pager .ag-card:hover .ag-icon { border-color: var(--accent-rule); }
.ag-pager .ag-pager-next { text-align: right; }
.ag-pager .ag-pager-next .ag-icon { align-self: flex-end; }
.ag-pager-cue { font-size: 13px; color: var(--text-quiet); }
.ag-pager-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text-bright); }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  /* Stacked: the name leads, then the portrait, then the copy. `display:
     contents` lifts the figure out of its wrapper so it can take its own row;
     that changes the box tree and not the DOM, so it is still matched as a
     descendant of .ix-hero-media. */
  .ix-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "id" "portrait" "copy";
    gap: var(--s6);
  }
  .ix-hero > .ix-id { align-self: auto; }
  .ix-hero > .ix-hero-copy { align-self: auto; }
  .ix-hero-media { display: contents; }
  .ix-hero .ix-portrait { grid-area: portrait; justify-self: center; width: min(100%, 340px); }
  .ix-group,
  .ix-group-flip { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ix-group-flip .ix-group-copy,
  .ix-group-flip .ix-group-media { order: 0; }
  .ix-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6); }
  .ix-cards,
  .ix-related,
  .ix-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-flow-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}
@media (max-width: 760px) {
  .ag-terms { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .ag-flow-row,
  .ag-flow-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .ag-flow-row .ag-frame,
  .ag-flow-row:nth-child(even) .ag-frame { order: -1; width: 84px; height: 84px; border-radius: 16px; }
  .ag-flow-row .ag-frame svg { width: 30px; height: 30px; }
  .ag-flow-row:nth-child(even) .ag-flow-copy { text-align: left; }
}
@media (max-width: 720px) {
  .ix-hero .ix-portrait { width: min(84%, 280px); }
  .ix-cards,
  .ix-related,
  .ix-doors,
  .ix-fields,
  .ix-strip { grid-template-columns: minmax(0, 1fr); }
  .ix-msg { grid-template-columns: minmax(0, 1fr) auto; }
  .ix-msg-ch { grid-column: 1 / -1; }
  .ix-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ix-table tbody th,
  .ix-table tbody td { display: block; width: auto; padding: var(--s2) var(--s5); }
  .ix-table tbody th { padding-top: var(--s5); }
  .ix-table tbody td:last-child { padding-bottom: var(--s5); }
}
@media (max-width: 620px) {
  .ag-pager { grid-template-columns: minmax(0, 1fr); }
  .ag-pager .ag-pager-next { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ix-card:hover,
  .ix-tile:hover,
  .ag-pager .ag-card:hover { transform: none; }
}