/* Agencies landing motion. Same rule as the shared report and the home page:
   nothing counts, grows or fills to imply change, nothing is hidden waiting on
   scroll or JS, and a screenshot at any moment shows the final state.
   What moves: rules drawing in the sample report, a one-time ping on the blue
   "+" marks, the highlight sweep, hover lifts, button press, a smooth FAQ.
   Off under prefers-reduced-motion and in print. */
@media (prefers-reduced-motion: no-preference) {
  :root { --m-ease: cubic-bezier(.2, .7, .2, 1); }
  html { scroll-behavior: smooth; }
  section[id], #start { scroll-margin-top: 24px; }

  /* Hero: the sample report's row rules draw left to right, one after another.
     Text and squares are painted from the first frame. */
  .rows .row { border-bottom: 0; background: linear-gradient(var(--line), var(--line)) left bottom / 100% 1px no-repeat; }
  .rows .row:last-child { background: none; }
  @keyframes m-rule { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
  .rows .row { animation: m-rule .7s var(--m-ease) both; }
  .rows .row:nth-child(1) { animation-delay: .15s; }
  .rows .row:nth-child(2) { animation-delay: .3s; }
  .rows .row:nth-child(3) { animation-delay: .45s; }

  /* Blue "+" marks ping once as the page lands. */
  @keyframes m-ping { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 10px transparent; } }
  .plus { border-radius: 50%; animation: m-ping 1s .5s ease-out 1 both; }
  .plus.b { animation-delay: .8s; }

  /* The highlighted brands in the annotated example sweep in as they scroll
     into view where the browser supports scroll timelines; elsewhere they are
     simply highlighted. */
  @supports (animation-timeline: view()) {
    @keyframes m-sweep { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
    .mini mark {
      background: linear-gradient(var(--accent-soft), var(--accent-soft)) left center / 100% 100% no-repeat;
      animation: m-sweep linear both;
      animation-timeline: view();
      animation-range: entry 20% entry 90%;
    }
  }

  /* Pointer feedback: small lifts and tints. */
  .rep, .fm, .pl, .mo, .two > div, .fd { transition: transform .2s var(--m-ease), box-shadow .2s ease, background-color .2s ease; }
  .row, .mini .blk { transition: background-color .15s ease; }
  @media (hover: hover) {
    .rep:hover { transform: translateY(-2px); box-shadow: 0 1px 0 var(--line), 0 28px 52px -28px rgba(14, 15, 17, .32); }
    .row:hover, .mini .blk:hover { background-color: var(--paper-2); }
    .mo:not(.next):hover, .two > div:hover, .pl:hover { background-color: var(--paper-2); }
    .pl.ag-p:hover { background-color: var(--accent-soft); }
  }

  /* Buttons and links. */
  .btn { transition: transform .12s ease, filter .15s ease, border-color .15s ease, background-color .15s ease; }
  .btn:active { transform: translateY(1px); }
  nav.top .links a, footer a { transition: color .15s ease; }
  .fm input { transition: border-color .15s ease, outline-offset .15s ease; }
  .seg2 span { transition: background-color .18s ease, color .18s ease; }

  /* FAQ opens smoothly where the browser can animate to auto height. */
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .25s var(--m-ease), content-visibility .25s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}