/* Agency Concierge activity feed, using the site's Lyra tokens. */
.ac-demo button:focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
.agency-intro { scroll-margin-top: 5rem; }
.ac-hero > .container { width: 100%; padding-block: 2rem 3rem; }
.ac-hero .hero-grid { gap: 2rem; padding-bottom: 1.5rem; }
.ac-hero .ac-headline { font-size: 2rem; letter-spacing: -.025em; line-height: 1.18; margin-bottom: 1.25rem; max-width: 12ch; }
.ac-hero .hero-sub { max-width: 42ch; line-height: 1.8; }
.ac-hero .hero-ctas { margin-bottom: 0; }
.ac-demo { --ac-muted-foreground: color-mix(in oklch, var(--muted-foreground) 85%, var(--foreground)); min-width: 0; margin: 0; background: var(--card); border: 1px solid var(--border); color: var(--card-foreground); position: relative; }
.ac-demo [hidden] { display: none !important; }
.ac-top { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); background: var(--secondary); }
.ac-agent { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-mono); font-size: .8125rem; font-weight: 600; line-height: 1.6; }
.ac-example { margin-left: auto; font-size: .625rem; color: var(--ac-muted-foreground); }
.ac-demo h3 { font-size: 1.625rem; line-height: 1.3; letter-spacing: -.02em; max-width: 23ch; margin-bottom: .75rem; }
.ac-scene-sub { color: var(--ac-muted-foreground); font-size: .8125rem; line-height: 1.7; margin-bottom: 1.5rem; }
.ac-approval { display: flex; align-items: center; gap: .65rem; background: color-mix(in srgb, var(--warning) 15%, var(--card)); color: var(--warning-foreground); padding: .75rem; font-size: .75rem; line-height: 1.65; margin-top: 1rem; transition: background-color 600ms ease, color 450ms ease; }
.ac-approval > .icon, .ac-approval-copy > .icon { font-size: 1.125rem; flex: none; }
.ac-approval[data-final-message] { display: grid; gap: 0; padding: 0; background: var(--muted); transition: none; }
.ac-approval-copy { display: flex; align-items: center; gap: .65rem; grid-area: 1 / 1; min-width: 0; padding: .75rem; }
.ac-approval-final { background: color-mix(in srgb, var(--warning) 15%, var(--card)); color: var(--warning-foreground); }
.ac-approval-reassurance { display: none; background: var(--muted); color: var(--ac-muted-foreground); }
.ac-controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .75rem; border-top: 1px solid var(--border); }
.ac-steps, .ac-playback { display: flex; align-items: center; gap: .125rem; }
.ac-controls button { background: transparent; border: 0; min-height: 2.5rem; padding: .5rem; font-size: .6875rem; color: var(--ac-muted-foreground); transition: background-color 300ms ease, color 300ms ease; }
.ac-steps button { position: relative; }
.ac-steps button[aria-current="step"] { color: var(--foreground); background: var(--muted); }
.ac-steps button::after { content: ""; position: absolute; bottom: 0; left: .5rem; right: .5rem; height: 2px; background: var(--chart-2); opacity: 0; transform: scaleX(.5); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.ac-steps button[aria-current="step"]::after { opacity: 1; transform: scaleX(1); }
.ac-controls button[data-toggle] { min-width: 4.25rem; }
.ac-demo figcaption { position: absolute; top: 100%; left: 0; width: 100%; padding-top: .875rem; color: var(--ac-muted-foreground); font-size: .625rem; line-height: 1.7; }
.ac-demo { margin-bottom: 2rem; }
.ac-feed-body { padding: 1.75rem 1.25rem 1.25rem; }
.ac-call-event { display: flex; align-items: flex-start; gap: .75rem; padding: .875rem; background: var(--muted); font-size: .75rem; }
.ac-call-event > img { margin-top: .2rem; flex: none; }
.ac-call-event > div { min-width: 0; }
.ac-call-event strong { display: block; font-weight: 500; }
.ac-call-event div > span { display: block; font-size: .6875rem; color: var(--ac-muted-foreground); margin-top: .25rem; }
.ac-call-time { color: var(--ac-muted-foreground); margin-left: auto; font-size: .625rem; }
.ac-events { list-style: none; padding: 1.5rem 0 0; }
.ac-events li { display: grid; position: relative; padding-bottom: 1.125rem; }
.ac-events .ac-result { display: flex; gap: .875rem; }
.ac-events .ac-result > div { min-width: 0; }
.ac-events li:not(:last-child)::before { content: ""; position: absolute; left: .6875rem; top: 1.5rem; bottom: .2rem; width: 1px; background: var(--border); }
.ac-feed.is-enhanced .ac-events li::before { opacity: 0; transition: opacity 180ms ease; }
.ac-feed.is-enhanced .ac-events li.is-revealed::before { opacity: 1; transition: opacity 400ms var(--ease-out) 520ms; }
.ac-event-icon { width: 1.5rem; flex: none; font-size: 1.1rem; color: var(--ac-muted-foreground); transition: color 450ms ease; }
.ac-events strong { font-size: .8125rem; font-weight: 500; }
.ac-events p { font-size: .75rem; line-height: 1.7; margin-top: .25rem; color: var(--ac-muted-foreground); }
.ac-app { display: inline-flex; gap: .35rem; align-items: center; margin-top: .5rem; font-size: .625rem; color: var(--ac-muted-foreground); }
.ac-app + .ac-app { margin-left: .75rem; }
.ac-app img { width: 14px; height: 14px; object-fit: contain; }
.ac-feed .ac-approval { margin-top: 0; }
.ac-feed.is-enhanced [data-reveal] { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity 550ms var(--ease-out), transform 650ms var(--ease-out), visibility 0s; }
.ac-feed.is-enhanced [data-reveal]:not(.is-revealed):not(.is-working) { opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity 250ms ease, transform 350ms var(--ease-out), visibility 0s 350ms; }
.ac-feed.is-enhanced [data-reveal] p, .ac-feed.is-enhanced [data-reveal] .ac-app { transition: opacity 500ms var(--ease-out), transform 550ms var(--ease-out); }
.ac-feed.is-enhanced .is-revealed p { transition-delay: 80ms; }
.ac-feed.is-enhanced .is-revealed .ac-app { transition-delay: 160ms; }
.ac-feed.is-enhanced [data-reveal]:not(.is-revealed) p, .ac-feed.is-enhanced [data-reveal]:not(.is-revealed) .ac-app { opacity: 0; transform: translateY(3px); }
.ac-feed.is-enhanced [data-reveal].is-current .ac-event-icon { color: var(--foreground); }
.ac-result, .ac-pending { grid-area: 1 / 1; min-width: 0; }
.ac-pending { display: none; }
.ac-demo.is-enhanced .ac-pending { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .625rem; align-content: start; color: var(--ac-muted-foreground); opacity: 1; visibility: visible; transition: opacity 350ms var(--ease-out) 100ms, visibility 0s; }
.ac-demo.is-enhanced .ac-events .ac-pending { gap: .875rem; }
.ac-pending > div { min-width: 0; }
.ac-pending strong { display: block; font-size: .8125rem; line-height: 1.55; font-weight: 500; }
.ac-working-avatar { object-fit: contain; flex: none; }
.ac-pending .ac-working-avatar { opacity: 0; transition: opacity 350ms ease; }
.is-working .ac-pending .ac-working-avatar { opacity: 1; }
.ac-demo.is-enhanced .is-working .ac-pending { color: var(--foreground); }
.ac-work-active { margin-top: .35rem; color: var(--ac-muted-foreground); font-size: .6875rem; line-height: 1.7; }
.ac-work-active { display: none; align-items: center; flex-wrap: wrap; gap: .5rem; }
.is-working .ac-work-active { display: flex; }
.ac-work-track { display: inline-block; width: 2.75rem; height: 2px; overflow: hidden; background: var(--border); }
.ac-work-track::after { content: ""; display: block; width: 45%; height: 100%; background: currentColor; animation: ac-working 1600ms linear infinite; animation-play-state: paused; }
.ac-demo.is-playing .ac-work-track::after { animation-play-state: running; }
/* Pending and finished content share a footprint, so completing work never shifts a row. */
.ac-demo.is-enhanced .ac-result { opacity: 1; visibility: visible; transition: opacity 520ms var(--ease-out) 120ms, visibility 0s; }
.ac-demo.is-enhanced [data-reveal]:not(.is-revealed) .ac-result { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s 180ms; }
.ac-demo.is-enhanced .is-revealed .ac-pending, .ac-feed.is-enhanced [data-reveal]:not(.is-working) .ac-pending { opacity: 0; visibility: hidden; transition: opacity 180ms ease, visibility 0s 180ms; }
/* Each message carries its own surface so colour, icon and copy fade together. */
.ac-demo.is-enhanced [data-final-message] { --ac-notice-delay: 600ms; }
.ac-demo.is-enhanced .ac-approval-copy { transition: opacity 400ms var(--ease-out) var(--ac-notice-delay), visibility 0s calc(var(--ac-notice-delay) + 400ms); }
.ac-demo.is-enhanced .ac-approval-final { opacity: 1; visibility: visible; transition-delay: var(--ac-notice-delay), var(--ac-notice-delay); }
.ac-demo.is-enhanced .ac-approval-reassurance { display: flex; opacity: 0; visibility: hidden; }
.ac-demo.is-enhanced:not([data-complete="true"]) [data-final-message] { --ac-notice-delay: 0ms; }
.ac-demo.is-enhanced:not([data-complete="true"]) .ac-approval-final { opacity: 0; visibility: hidden; transition-delay: var(--ac-notice-delay), calc(var(--ac-notice-delay) + 400ms); }
.ac-demo.is-enhanced:not([data-complete="true"]) .ac-approval-reassurance { opacity: 1; visibility: visible; transition-delay: var(--ac-notice-delay), var(--ac-notice-delay); }
@keyframes ac-working {
  0% { transform: translateX(-110%); opacity: 0; }
  15%, 80% { opacity: 1; }
  100% { transform: translateX(240%); opacity: 0; }
}
@media (hover: hover) {
  .ac-controls button:hover { background: var(--muted); color: var(--foreground); }
}
@media (min-width: 640px) {
  .ac-top { padding-inline: 1.5rem; }
  .ac-feed-body { padding-inline: 1.75rem; }
  .ac-controls { padding-inline: 1rem; }
  .ac-demo h3 { font-size: 1.875rem; }
}
@media (min-width: 768px) {
  .ac-hero .ac-headline { font-size: 2.75rem; }
}
@media (min-width: 1024px) {
  .ac-hero .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; }
  /* Fit the hero below the announcement and navigation; allow growth at zoom. */
  .ac-hero { min-height: calc(100svh - 6.125rem); }
  .ac-hero > .container { padding-block: clamp(.75rem, calc(6svh - 2rem), 2rem); }
  .ac-hero .hero-grid { padding-bottom: 0; }
  .ac-top { padding-block: clamp(.5rem, 1.25svh, 1rem); }
  .ac-feed-body { padding-block: clamp(.75rem, 1.75svh, 1.75rem); }
  .ac-demo h3 { font-size: clamp(1.375rem, 3svh, 1.875rem); margin-bottom: .5rem; }
  .ac-scene-sub { margin-bottom: clamp(.75rem, 1.8svh, 1.5rem); }
  .ac-call-event { padding-block: .75rem; }
  .ac-events { padding-top: clamp(.75rem, 1.8svh, 1.5rem); }
  .ac-events li { padding-bottom: clamp(.375rem, calc(2.5svh - .75rem), 1.125rem); }
  .ac-app { margin-top: .25rem; }
  .ac-approval-copy { padding-block: .625rem; }
  .ac-controls { padding-block: .25rem; }
  .ac-controls button { min-height: 2.25rem; }
  .ac-demo { margin-bottom: 1.75rem; }
  .ac-demo figcaption { padding-top: .625rem; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .ac-top, .ac-feed-body, .ac-call-event { padding-block: .5rem; }
  .ac-scene-sub { margin-bottom: .75rem; }
  .ac-events { padding-top: .75rem; }
  .ac-events p { line-height: 1.5; }
}
@media (min-width: 1280px) {
  .ac-hero .ac-headline { font-size: 3.25rem; }
  .ac-hero .hero-grid { gap: 4rem; }
}
/* Use spare desktop height for the model strip without crowding shorter screens. */
@media (min-width: 1024px) and (min-height: 900px) {
  .agency-intro { display: flex; flex-direction: column; min-height: calc(100svh - 6.125rem); border-bottom: 1px solid var(--border); }
  .agency-intro .ac-hero { flex: 1; min-height: 0; border-bottom: 0; }
  .agency-intro .ac-hero > .container { padding-bottom: 1rem; }
  .agency-intro .model-providers { padding-bottom: 1.5rem; }
  .agency-intro .model-providers .powered { padding-block: 1.25rem 0; }
}
@media (pointer: coarse) { .ac-controls button { min-height: 44px; display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ac-demo *, .ac-demo *::before, .ac-demo *::after { animation: none !important; transition: none !important; }
}