/* /agents-v2: the AI agents page rebuilt from first principles (concept, 2026-09-26, branch agents-v2).
   Generated by scripts/agents/gen_v2.py, prefix av-, on top of agents.css (hero, sections, FAQ, ticks,
   glyphs), agent-detail.css (the workflow each team tab runs) and agent-catalog.css (the three-step
   drawings). Colour: purple is the agents service, a team's pastel marks that team, yellow is where the
   client says yes, green is live. Motion is the hero conveyor, the proof rising once, the team's workflow
   (16s, one loop per tab), the three-step drawings, and the expanders opening. The team panels share one
   grid cell and crossfade, so switching never moves the page. Every base style is the finished frame. */
:root{--av-ease:cubic-bezier(.16,1,.3,1)}

/* ---- hero: the agent at work (Justin's pick, rev 2 concept 1, 2026-09-28) ----
   Copy on the left, the agent's own screen on the right, doing one job at a time (components/agents-hero.js).
   One object only, the window: a thin ink outline on a warm ground. The deck of two more agents peeks out
   behind it; the person's ask rises from under its corner on lavender (Justin: not yellow, nothing alarming).
   The three jobs share one grid cell, so the window is as tall as the tallest and never moves. Every base
   style is the finished frame; .is-armed (set by the script) is what hides a step until the agent reaches it. */
.av-hx{--hx-ease:cubic-bezier(.22,1,.36,1);--ov:88px;--hx-lav:#f4f0ff;--hx-lav-ink:#4a3a99;--hx-ground:#e8e4d8;padding:24px 0 0;background:#fdfcf8}
.av-hx__in{max-width:1360px;display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:56px;align-items:center}
.av-hx__copy{min-width:0}
.av-hx__pill{background:#ddd4ff;text-transform:uppercase;letter-spacing:.06em;height:30px;padding:0 13px;font-size:13.5px}
.av-hx__title{margin:24px 0 0;font:500 clamp(46px,4.6vw,66px)/1.02 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em}
.av-hx__title em{white-space:nowrap}
.av-hx__sub{margin:24px 0 0;max-width:470px;font:400 19.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-hx__facts{list-style:none;display:flex;margin:32px 0 0;padding:0}
.av-hx__facts li{padding:0 24px;border-left:1px solid var(--line)}
.av-hx__facts li:first-child{padding-left:0;border-left:0}
.av-hx__facts b{display:block;font:500 18px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;white-space:nowrap}
.av-hx__facts span{display:block;margin-top:5px;font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.av-hx__go{margin:36px 0 0}
.av-hx__go .btn{height:48px;padding:0 32px}   /* a hair shorter and wider than the site's 52 by 24 (Justin) */

.av-hx__fig{margin:0;min-width:0}
.av-hx__stage{position:relative;padding:48px 0 76px var(--ov)}
.av-hx__deck{position:absolute;inset:0}
.av-hx__card{position:absolute;height:96px;border-radius:18px;background:#fff;border:1px solid rgba(0,0,0,.14);
  transition:top .8s var(--hx-ease),left .8s var(--hx-ease),right .8s var(--hx-ease),opacity .7s ease}
.av-hx__card > span{position:absolute;left:22px;top:6px;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.av-hx__card[data-slot="0"]{top:48px;left:var(--ov);right:0;opacity:0}
.av-hx__card[data-slot="1"]{top:24px;left:calc(var(--ov) + 16px);right:16px;opacity:.92}
.av-hx__card[data-slot="2"]{top:0;left:calc(var(--ov) + 34px);right:34px;opacity:.5}
.av-hx__card[data-slot="in"]{top:-18px;left:calc(var(--ov) + 56px);right:56px;opacity:0}
.av-hx__card[data-slot="1"]{transition-delay:.06s}
.av-hx__card[data-slot="2"]{transition-delay:.14s}
.av-hx__card.is-jump{transition:none}

.av-hx__win{position:relative;z-index:1;background:#fff;border:1.25px solid #000;border-radius:18px;box-shadow:6px 6px 0 var(--hx-ground);transition:transform .7s var(--hx-ease)}
.av-hx__run{position:absolute;z-index:2;top:26px;right:24px;display:flex;align-items:center;gap:7px;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.av-hx__run::before{content:"";width:7px;height:7px;border-radius:50%;background:#3aa35a;animation:av-hx-breathe 3.2s ease-in-out infinite}
@keyframes av-hx-breathe{50%{opacity:.4}}
.av-hx__panels{display:grid}
.av-hx__panel{grid-area:1 / 1;display:flex;flex-direction:column;min-width:0;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .6s var(--hx-ease),visibility 0s linear .6s}
.av-hx__panel.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .55s ease .3s,transform .9s var(--hx-ease) .3s,visibility 0s}
.av-hx__panel.is-out{transform:translateY(-6px)}
.av-hx__bar{display:flex;align-items:center;gap:12px;padding:17px 170px 17px 22px;border-bottom:1px solid var(--line)}
.av-hx__bar .ag-glyph{width:32px;height:32px;flex-basis:32px;border-width:1.2px;border-radius:9px}
.av-hx__bar .ag-glyph svg{width:16px;height:16px}
.av-hx__bar b{font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-hx__job{flex:1;display:flex;flex-direction:column;margin:18px 22px 0;padding:18px 20px 16px;border-radius:12px;background:#f7f4e8}
.av-hx__jt{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin:0}
.av-hx__jt b{font:500 16.5px/1.25 "Neue Montreal",system-ui,sans-serif}
.av-hx__jt span{font:400 14px/1.25 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.av-hx__steps{list-style:none;display:grid;gap:12px;margin:16px 0 20px;padding:0}
.av-hx__steps li{display:flex;align-items:center;gap:11px;min-width:0;font:400 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333;transition:opacity .5s ease,transform .7s var(--hx-ease)}
.av-hx__steps li > span{min-width:0}
.av-hx__steps li.is-flag > span{color:#000;font-weight:500}
.av-hx__steps em{flex:none;margin-left:auto;padding:5px 10px;border-radius:999px;background:#e9e2ff;color:var(--hx-lav-ink);font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;white-space:nowrap;transition:opacity .4s var(--av-ease),transform .5s var(--av-ease),background .4s var(--av-ease),color .4s var(--av-ease)}
.av-hx__steps li.is-ok em{background:#dff3d6;color:#2f5a1f}
/* the step mark: a spinner while it works, then a green tick, or a lavender person where someone decides */
.av-hx__mk{position:relative;flex:none;width:20px;height:20px;border-radius:50%;background:#caf0be;border:1.1px solid #000;transition:background .3s var(--av-ease),border-color .3s var(--av-ease),box-shadow .5s var(--av-ease)}
.av-hx__mk svg{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}
.av-hx__t{stroke-width:2}
.av-hx__t path{stroke-dasharray:12;stroke-dashoffset:0;transition:stroke-dashoffset .38s .1s var(--av-ease)}
.av-hx__p{stroke-width:1.3;opacity:0}
.av-hx__steps li.is-flag .av-hx__mk{background:#ddd4ff}
.av-hx__steps li.is-flag .av-hx__t{opacity:0}
.av-hx__steps li.is-flag .av-hx__p{opacity:1}
.av-hx__steps li.is-flag.is-ok .av-hx__mk{background:#caf0be}
.av-hx__steps li.is-flag.is-ok .av-hx__t{opacity:1}
.av-hx__steps li.is-flag.is-ok .av-hx__p{opacity:0}
.av-hx__res{display:flex;align-items:center;gap:10px;margin:auto 0 0;padding:10px 12px;border-radius:10px;background:#eef9e9;box-shadow:inset 0 0 0 1px rgba(47,90,31,.28);font:500 14.5px/1.25 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f;transition:opacity .55s ease,transform .8s var(--hx-ease)}
.av-hx.is-armed .av-hx__res.is-on{animation:av-hx-land 1.1s ease-out .1s}
@keyframes av-hx-land{0%{box-shadow:inset 0 0 0 1px rgba(47,90,31,.28),0 0 0 0 rgba(58,163,90,.28)}100%{box-shadow:inset 0 0 0 1px rgba(47,90,31,.28),0 0 0 9px rgba(58,163,90,0)}}
.av-hx__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 200px 18px 22px}
.av-hx__sys{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 5px;border-radius:999px;background:#fff;border:1px solid var(--line);font:400 13px/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;transition:border-color .35s var(--av-ease),box-shadow .35s var(--av-ease),background .35s var(--av-ease)}
.av-hx__sys i{display:grid;place-items:center;width:18px;height:18px;border-radius:5px;background:#f7f4e8}
.av-hx__sys svg{width:11px;height:11px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av-hx__sys.is-read{border-color:rgba(47,90,31,.42);background:#f1f9ed;box-shadow:0 0 0 3px rgba(58,163,90,.1)}   /* the result row's green, quieter (Justin) */
.av-hx__sys::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
.av-hx__sys.is-read::after{animation:av-hx-sheen 1.5s ease-in-out .15s infinite}
@keyframes av-hx-sheen{70%,100%{transform:translateX(110%)}}
.av-hx__count{position:absolute;right:22px;bottom:25px;margin:0;font:400 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.av-hx__n{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom;padding:2px 0;margin:-2px 0}
.av-hx__n b{display:inline-block;color:#2f5a1f;font-weight:500;font-variant-numeric:tabular-nums}
.av-hx__n .av-hx__roll{position:absolute;left:0;top:2px}
/* the ask: one person, one question, on lavender. It rises from under the window's corner. */
.av-hx__ask{position:absolute;z-index:3;left:calc(-1 * var(--ov) - 12px);top:calc(100% - 18px);width:380px;display:flex;align-items:center;gap:12px;padding:13px 13px 13px 14px;border-radius:14px;background:var(--hx-lav);border:1.25px solid #000;box-shadow:5px 5px 0 var(--hx-ground);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:20% 0;pointer-events:none;transition:opacity .35s ease,transform .5s var(--hx-ease)}
.av-hx__ask.is-on{opacity:1;transform:none;transition:opacity .5s ease,transform .8s var(--hx-ease)}
.av-hx:not(.is-armed) .av-hx__ask{display:none}
.av-hx__av{flex:none;width:36px;height:36px;border-radius:50%;background:#ddd4ff;border:1.2px solid #000;overflow:hidden}
.av-hx__av svg{display:block;width:100%;height:100%}
.av-hx__ask div{min-width:0}
.av-hx__ask b{display:block;font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.av-hx__ask div span{display:block;margin-top:3px;font:400 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:#3b2f73}
.av-hx__ok{flex:none;margin-left:auto;min-width:88px;text-align:center;padding:9px 14px;border-radius:999px;background:#6b52c9;color:#fff;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;transition:transform .16s var(--av-ease),background .3s var(--av-ease)}
.av-hx__ok.is-press{transform:scale(.94)}
.av-hx__ok.is-ok{background:#2f5a1f}

/* ---- armed: the script plays it. A step waits unseen, appears with a spinner, writes itself in, then ticks. */
.av-hx.is-armed .av-hx__steps li:not(.is-run){opacity:0;transform:translateY(6px)}
.av-hx.is-armed .av-hx__steps li > span{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);-webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:0 0;mask-position:0 0;transition:-webkit-mask-position 1s cubic-bezier(.4,0,.2,1) .1s,mask-position 1s cubic-bezier(.4,0,.2,1) .1s}
.av-hx.is-armed .av-hx__steps li:not(.is-run) > span{-webkit-mask-position:100% 0;mask-position:100% 0;transition:none}
.av-hx.is-armed .av-hx__steps li:not(.is-done) .av-hx__mk{background:transparent;border:1.6px solid rgba(0,0,0,.14);border-top-color:#6b52c9;animation:av-hx-spin .8s linear infinite}
.av-hx.is-armed .av-hx__steps li:not(.is-done) svg{opacity:0}
.av-hx.is-armed .av-hx__steps li:not(.is-done) .av-hx__t path{stroke-dashoffset:12}
.av-hx.is-armed .av-hx__steps li.is-done .av-hx__mk{animation:av-hx-pop .55s var(--hx-ease)}
.av-hx.is-armed .av-hx__steps li.is-flag:not(.is-done) em{opacity:0;transform:translateX(-8px)}
.av-hx.is-armed .av-hx__steps li.is-flag:not(.is-ok) .av-hx__t path{stroke-dashoffset:12}
.av-hx.is-asking .av-hx__steps li.is-flag .av-hx__mk{animation:av-hx-halo 1.6s ease-in-out infinite}
.av-hx.is-armed .av-hx__res:not(.is-on){opacity:0;transform:translateY(8px)}
.av-hx.is-armed .av-hx__res:not(.is-on) .av-hx__t path{stroke-dashoffset:12}
.av-hx.is-turn .av-hx__win{transform:translateY(3px)}
.av-hx.is-armed:not(.is-in) .av-hx__win,.av-hx.is-armed:not(.is-in) .av-hx__card{visibility:hidden}
.av-hx.is-in .av-hx__win{animation:av-hx-rise 1.1s var(--hx-ease) backwards}
.av-hx.is-in .av-hx__card{animation:av-hx-rise 1.1s var(--hx-ease) .22s backwards}
.av-hx.is-in .av-hx__card[data-slot="2"]{animation-delay:.32s}
@keyframes av-hx-spin{to{transform:rotate(360deg)}}
@keyframes av-hx-pop{0%{transform:scale(.72)}55%{transform:scale(1.05)}100%{transform:none}}
@keyframes av-hx-halo{50%{box-shadow:0 0 0 5px rgba(107,82,201,.16)}}
@keyframes av-hx-rise{from{opacity:0;transform:translateY(18px)}}

@media (min-width:1181px) and (max-width:1300px){
  .av-hx{--ov:40px}
  .av-hx__steps li{font-size:14.5px}
  .av-hx__in{grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:28px}
  .av-hx__sub{font-size:18px}
  .av-hx__facts li{padding:0 16px}
  .av-hx__facts b{font-size:16.5px}
  .av-hx__ask{width:350px}
}
@media (max-width:1180px){
  .av-hx{--ov:0px}
  .av-hx__in{grid-template-columns:minmax(0,1fr);justify-items:center;gap:56px}
  .av-hx__copy{width:100%;max-width:640px}
  .av-hx__fig{width:100%;max-width:640px}
  .av-hx__ask{left:auto;right:-10px}
}
@media (max-width:700px){
  .av-hx{padding-top:32px}
  .av-hx__title{font-size:44px}
  .av-hx__title br{display:none}
  .av-hx__sub{font-size:18px}
  .av-hx__facts{flex-direction:column;gap:12px}
  .av-hx__facts li{display:flex;align-items:baseline;gap:8px;padding:0;border-left:0}
  .av-hx__facts span{margin-top:0}
  .av-hx__go .btn{width:100%}
  .av-hx__stage{padding:34px 0 0}
  .av-hx__card{height:80px}
  .av-hx__card[data-slot="0"]{top:34px}
  .av-hx__card[data-slot="1"]{top:17px;left:10px;right:10px}
  .av-hx__card[data-slot="2"]{top:0;left:22px;right:22px}
  .av-hx__card[data-slot="in"]{top:-14px;left:36px;right:36px}
  .av-hx__card > span{top:4px;left:16px;font-size:11.5px}
  .av-hx__bar{padding:14px 130px 14px 16px;gap:10px}
  .av-hx__bar .ag-glyph{width:28px;height:28px;flex-basis:28px}
  .av-hx__bar b{font-size:15.5px}
  .av-hx__run{top:23px;right:16px;font-size:12.5px}
  .av-hx__job{margin:14px 14px 0;padding:14px 14px 12px}
  .av-hx__jt b{font-size:15px}
  .av-hx__jt span{font-size:13px}
  .av-hx__steps{gap:10px;margin:12px 0 16px}
  .av-hx__steps li{font-size:14px;gap:9px;flex-wrap:wrap}
  .av-hx__steps em{margin-left:29px}
  .av-hx__res{font-size:13.5px}
  .av-hx__foot{padding:14px 14px 6px}
  .av-hx__sys{font-size:12.5px}
  .av-hx__count{position:static;padding:4px 16px 16px;font-size:13px}
  /* the ask docks inside the window's foot instead of overhanging */
  .av-hx__ask{left:10px;right:10px;top:auto;bottom:10px;width:auto;box-shadow:4px 4px 0 var(--hx-ground)}
}
@media (prefers-reduced-motion:reduce){ .av-hx__run::before,.av-hx__sys::after{animation:none} }

/* ---- results: time and cost, side by side, then one pair of bars for the time (grey is before, the
   team's colour is with the agent). The "with the agent" bar eases from the old length to the new one, and
   the cost figure counts up, once, as the cards come into view. Nothing to click. */
.av-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.av-proof{padding:8px 0 136px}
.av-roi{list-style:none;margin:64px auto 0;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.av-roi__card{min-width:0;display:flex;flex-direction:column;gap:22px;padding:28px 30px 24px;background:#fff;border:1.5px solid #000;border-radius:20px;box-shadow:6px 6px 0 #000;transition:opacity .6s var(--ease),transform .8s var(--av-ease);transition-delay:calc(var(--i) * 110ms)}
.ag-js .av-roi:not(.is-seen) .av-roi__card{opacity:0;transform:translateY(12px)}
.av-roi__team{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.av-roi__team .ag-glyph{width:26px;height:26px;flex-basis:26px;border-radius:7px}
.av-roi__team .ag-glyph svg{width:14px;height:14px}
.av-roi__team b{font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#000}
.av-roi__team > span{font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#656567}
.av-roi__stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.av-roi__stat{display:flex;flex-direction:column;gap:6px;padding-right:20px}
.av-roi__stat--cost{padding:0 0 0 20px;border-left:1px solid var(--line)}
.av-roi__k{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#656567}
.av-roi__stat b{font:500 44px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.035em;color:#000;font-variant-numeric:tabular-nums}
.av-roi__stat--cost b{color:#2f5a1f}
.av-roi__stat > span:last-child{font:400 15px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-roi__bars{display:flex;flex-direction:column;gap:8px}
.av-roi__bar{position:relative;height:30px;display:flex;align-items:center}
.av-roi__bar i{position:absolute;left:0;top:0;bottom:0;width:100%;box-sizing:border-box;border:1.3px solid #000;border-radius:8px;transform-origin:left center}
.av-roi__bar--was i{background:#e9e6dc}
.av-roi__bar--now i{background:var(--fn);transform:scaleX(var(--to))}
.ag-js .av-roi:not(.is-seen) .av-roi__bar--now i{transform:scaleX(1)}
.av-roi__bar--now i{transition:transform 1.6s var(--av-ease);transition-delay:calc(var(--i) * 160ms + .5s)}
.av-roi__bar span{position:relative;padding-left:12px;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;color:#000;white-space:nowrap}
.av-roi__bar--was span{color:#555}
.av-roi__bar--now span{padding-left:calc(var(--to) * 100% + 12px)}
.ag-js .av-roi:not(.is-seen) .av-roi__bar--now span{opacity:0}
.av-roi__bar--now span{transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 160ms + 1.6s)}
.av-roi__math{display:flex;flex-direction:column;gap:10px}
.av-roi__mk{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.av-roi__cmp{display:grid;grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:16px}
.av-roi__was,.av-roi__now{display:flex;flex-direction:column;gap:4px}
.av-roi__was b,.av-roi__now b{font:500 28px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.av-roi__was b{color:#8a8a8a}
.av-roi__now b{color:#2f5a1f}
.av-roi__was span,.av-roi__now span{font:400 13px/1.3 "Neue Montreal",system-ui,sans-serif;color:#656567;white-space:nowrap}
.av-roi__now{text-align:right}
.av-roi__arrow{position:relative;height:1.5px;background:#000;transform-origin:left center;margin-bottom:18px}
.av-roi__arrow::after{content:"";position:absolute;right:-1px;top:50%;width:8px;height:8px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:translateY(-50%) rotate(45deg)}
.ag-js .av-roi:not(.is-seen) .av-roi__arrow{transform:scaleX(0)}
.ag-js .av-roi:not(.is-seen) .av-roi__now{opacity:0;transform:translateX(-6px)}
.av-roi__arrow{transition:transform .9s var(--av-ease);transition-delay:calc(var(--i) * 160ms + .7s)}
.av-roi__now{transition:opacity .5s var(--ease),transform .6s var(--av-ease);transition-delay:calc(var(--i) * 160ms + 1.3s)}
.av-roi__go{margin-top:auto;align-self:flex-start;font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep);text-decoration:none}
.av-roi__go span{display:inline-block;transition:transform .3s var(--ease)}
.av-roi__go:hover span{transform:translateX(4px)}

/* ---- the build team, inside How it works ---- */
.av-crew{max-width:1000px;margin:40px auto 0;display:flex;align-items:center;gap:24px;padding:24px 30px;border:1.5px solid #000;border-radius:18px;background:#fff}
.av-crew__faces{display:flex;flex:none}
.av-crew__face{width:40px;height:40px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(0,0,0,.12);transition:transform .6s var(--av-ease),opacity .5s var(--ease);transition-delay:calc(var(--i) * 110ms + .2s)}
.av-crew__face:first-child{margin-left:0}
.av-crew__face svg{display:block;width:100%;height:100%}
.ag-js .av-crew:not(.is-seen) .av-crew__face{opacity:0;transform:translateX(-10px)}
.av-crew__copy{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}
.av-crew__copy p{margin:0;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.av-crew__copy p b{display:block;margin-bottom:3px;font-weight:500;font-size:17px;color:#000}   /* the lead on its own line, so the sentence runs the card's width */
.av-crew__roles{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 22px}
.av-crew__roles li{display:flex;flex-direction:column;gap:3px;font:400 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#656567}
.av-crew__roles b{font:500 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#000}

/* ---- the call, drawn as its 30 minutes ---- */
.av-call{width:100%;max-width:560px;margin:4px 0 6px}
.av-call__bar{position:relative;height:6px;margin:0 0 14px;border-radius:999px;background:rgba(0,0,0,.12)}
.av-call__fill{position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform-origin:left center;transform:scaleX(1)}
.av-call__dot{position:absolute;top:50%;left:100%;width:14px;height:14px;box-sizing:border-box;margin:-7px 0 0 -7px;border:1.5px solid #000;border-radius:50%;background:#fff}
.ag-js .av-call:not(.is-seen) .av-call__fill{transform:scaleX(0)}
.ag-js .av-call:not(.is-seen) .av-call__dot{left:0}
.av-call__fill{transition:transform 2.4s cubic-bezier(.65,0,.35,1) .3s}
.av-call__dot{transition:left 2.4s cubic-bezier(.65,0,.35,1) .3s}
.av-call__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.av-call__list li{display:flex;flex-direction:column;gap:4px;transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * .8s + .3s)}
.ag-js .av-call:not(.is-seen) .av-call__list li{opacity:.3}
.av-call__t{font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;color:#2a4a80}
.av-call__list b{font:500 16px/1.25 "Neue Montreal",system-ui,sans-serif;color:#000}
.av-call__d{font:400 14px/1.35 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}

/* ---- see it work, by team ---- */
.av-view{margin:64px auto 0;max-width:1180px;padding:22px 28px 26px;background:#fff;border:1.5px solid #000;border-radius:22px;box-shadow:8px 8px 0 #000}
.av-view__tabs{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.av-view__ind{position:absolute;left:0;top:0;z-index:0;width:var(--w,0);height:var(--h,0);box-sizing:border-box;transform:translate(var(--x,0),var(--y,0));border:1.5px solid #000;border-radius:12px;background:color-mix(in srgb,var(--c,#ddd4ff) 45%,#fff);box-shadow:3px 3px 0 #000;overflow:hidden;opacity:0;transition:transform .6s var(--av-ease),width .6s var(--av-ease),height .6s var(--av-ease),background-color .45s var(--ease),opacity .3s var(--ease)}
.av-view.has-ind .av-view__ind{opacity:1}
.av-view__ind i{position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;background:rgba(0,0,0,.28);transform:scaleX(0);transform-origin:left center}
.av-view__ind.is-run i{animation:av-prog 16s linear forwards}
@keyframes av-prog{to{transform:scaleX(1)}}
.av-view.has-ind .av-view__tab{position:relative;z-index:1;background:transparent}
.av-view.has-ind .av-view__tab.is-on{border-color:transparent;background:transparent;box-shadow:none;transform:none}
.av-view__tab{appearance:none;display:flex;align-items:center;justify-content:center;gap:9px;text-align:left;min-width:0;padding:11px 10px;border:1.5px solid rgba(0,0,0,.14);border-radius:12px;background:#fff;font:500 14.5px/1.15 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:border-color .25s var(--ease),background .35s var(--ease),box-shadow .35s var(--av-ease),transform .35s var(--av-ease)}
.av-view__tab:hover{border-color:#000}
.av-view__tab.is-on{border-color:#000;background:color-mix(in srgb,var(--fn) 45%,#fff);box-shadow:3px 3px 0 #000;transform:translate(-1px,-1px)}
.av-view__tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.av-view__tab .ag-glyph{width:26px;height:26px;flex-basis:26px;border-radius:7px}
.av-view__tab .ag-glyph svg{width:14px;height:14px}
.av-view__stage{display:grid}
.av-view__panel{grid-area:1 / 1;padding-top:24px;min-width:0}
.ag-js .av-view__panel{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--av-ease),visibility 0s linear .45s}
.ag-js .av-view__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .08s,transform .7s var(--av-ease) .08s,visibility 0s}
.av-view__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.av-view__id h3{margin:0;font:500 26px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.av-view__id p{margin:8px 0 0;max-width:620px;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-view__roi{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 8px;max-width:270px;padding:14px 18px;border-radius:14px;background:color-mix(in srgb,var(--fn) 22%,#fff);border:1px solid color-mix(in srgb,var(--fn) 70%,#000 8%)}
.av-view__roi b{font:500 30px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;color:#000}
.av-view__roi > span{font:400 15px/1 "Neue Montreal",system-ui,sans-serif;color:#333}
.av-view__roi small{flex-basis:100%;font:400 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:#555}
.av-view .agd-wf{margin:22px 0 0;max-width:none}
.av-view__side{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.av-view__all{display:inline-flex;align-items:center;gap:6px;font:500 15px/1 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep);text-decoration:none;white-space:nowrap}
.av-view__all span{transition:transform .25s var(--ease)}
.av-view__all:hover span{transform:translateX(3px)}

.av-browse{margin:36px auto 0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.av-browse p{margin:0;font:400 15px/1.6 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-wrap:balance}
.av-browse p a{white-space:nowrap;color:#000;text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:4px;transition:text-decoration-color .2s var(--ease)}
.av-browse p a:hover{text-decoration-color:#000}

/* ---- expanders ---- */
.av-more{max-width:1080px;margin:40px auto 0}
.av-more__btn{appearance:none;display:flex;align-items:center;gap:12px;margin:0 auto;padding:12px 18px 12px 22px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 16px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:background .25s var(--ease)}
.av-more__btn:hover{background:#f5f2ff}
.av-more__btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.av-more__btn i{position:relative;width:22px;height:22px;flex:none;border-radius:50%;background:#000;transition:transform .45s var(--av-ease)}
.av-more__btn i::before{content:"";position:absolute;left:50%;top:44%;width:6px;height:6px;border-right:1.6px solid #fff;border-bottom:1.6px solid #fff;transform:translate(-50%,-50%) rotate(45deg)}
.av-more.is-open .av-more__btn i{transform:rotate(180deg)}
.av-more__body{display:grid;grid-template-rows:1fr}
.av-more__inner{min-height:0;overflow:hidden}
.ag-js .av-more__body{grid-template-rows:0fr;transition:grid-template-rows .55s var(--av-ease)}
.ag-js .av-more__inner{opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .35s var(--ease),transform .5s var(--av-ease),visibility 0s linear .55s}
.ag-js .av-more.is-open .av-more__body{grid-template-rows:1fr}
.ag-js .av-more.is-open .av-more__inner{opacity:1;transform:none;visibility:visible;transition:opacity .45s var(--ease) .12s,transform .6s var(--av-ease) .12s,visibility 0s}
.av-more__inner > :first-child{margin-top:40px}

/* ---- how it works ---- */
.av-how{margin-top:64px}

/* ---- inside the two expanders: the process as a track of icon badges that fills as it opens, what we need
   as three tiles; everything included as five icon tiles, the price's assumptions as outlined chips ---- */
.av-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border:1.5px solid #000;border-radius:12px;background:#ebe2ff}
.av-ic svg{width:22px;height:22px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.av-ic--sm{width:34px;height:34px;border-radius:10px;background:#fff}
.av-ic--sm svg{width:17px;height:17px}
.av-run{position:relative;padding:34px 0 4px}
.av-run__span{position:absolute;left:30%;right:10%;top:0;height:14px;border:1.5px solid #6b52c9;border-bottom:0;border-radius:8px 8px 0 0}
.av-run__span span{position:absolute;left:50%;top:-8px;transform:translateX(-50%);padding:0 10px;background:var(--bg);font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6b52c9;white-space:nowrap}
.av-run__track{position:absolute;left:10%;right:10%;top:58px;height:4px;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.22) 0 6px,transparent 6px 11px)}
.av-run__fill{position:absolute;top:0;bottom:0;left:25%;right:0;border-radius:inherit;background:#6b52c9;transform-origin:left center}
.av-run__list{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 16px}
.av-run__stop{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.av-run__badge{width:52px;height:52px;border-radius:50%;margin-bottom:6px;box-shadow:0 0 0 6px var(--bg)}
.av-run__badge--y{background:#ffeba1}.av-run__badge--w{background:#fff}.av-run__badge--b{background:#c6dbff}.av-run__badge--p{background:#ddd4ff}.av-run__badge--g{background:#caf0be}
.av-run__stop b{font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif}
.av-run__stop > span{max-width:190px;font:400 15px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:balance}
.av-run__stop em{margin-top:4px;padding:5px 10px;border:1.2px solid #000;border-radius:999px;background:#ffeba1;font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.ag-js .av-run__fill{transform:scaleX(0);transition:transform 1.6s cubic-bezier(.65,0,.35,1) .45s}
.ag-js .av-more.is-open .av-run__fill{transform:none}
.ag-js .av-run__badge{transform:scale(.6);opacity:0;transition:transform .6s var(--av-ease),opacity .4s var(--ease);transition-delay:calc(var(--i) * .32s + .25s)}
.ag-js .av-more.is-open .av-run__badge{transform:none;opacity:1}
.av-need{margin:48px auto 0;max-width:960px}
.av-need__k{display:block;margin-bottom:14px;text-align:center;font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.av-need ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.av-need li{display:flex;align-items:flex-start;gap:14px;padding:18px;border:1.5px solid #000;border-radius:16px;background:#fff}
.av-need li .av-ic{background:#ffeba1}
.av-need b{display:block;font:500 16px/1.25 "Neue Montreal",system-ui,sans-serif}
.av-need li span{display:block;margin-top:4px;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-inc__k{display:block;margin-bottom:16px;text-align:center;font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.av-kit{max-width:1080px;margin:0 auto}
.av-kit__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.av-kit__list li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px 18px;border:1.5px solid #000;border-radius:16px;background:#fff}
.av-kit__list li .av-ic{margin-bottom:6px}
.av-kit__list li:nth-child(2) .av-ic{background:#c6dbff}.av-kit__list li:nth-child(3) .av-ic{background:#ffeba1}.av-kit__list li:nth-child(4) .av-ic{background:#caf0be}.av-kit__list li:nth-child(5) .av-ic{background:#fcccbf}
.av-kit__list b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.av-kit__list span{font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-terms{max-width:1080px;margin:28px auto 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:28px;align-items:center;padding:22px 26px;border:1.5px dashed #000;border-radius:16px}
.av-terms__head .av-inc__k{text-align:left;margin-bottom:10px}
.av-terms__head p{margin:0;font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-terms__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px}
.av-terms__list li{display:flex;align-items:center;gap:12px}
.av-terms__list b{display:block;font:500 15px/1.25 "Neue Montreal",system-ui,sans-serif}
.av-terms__list span{display:block;margin-top:2px;font:400 13.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:#555}
.ag-js .av-kit__list li,.ag-js .av-terms__list li{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .7s var(--av-ease);transition-delay:calc(var(--i) * 80ms + .2s)}
.ag-js .av-more.is-open .av-kit__list li,.ag-js .av-more.is-open .av-terms__list li{opacity:1;transform:none}

/* ---- pricing ---- */
.av-price{max-width:880px;margin:64px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.av-price__card{display:flex;flex-direction:column;gap:14px;padding:32px 32px 30px;background:#fff;border:1.5px solid #000;border-radius:20px;box-shadow:6px 6px 0 #000;transition:opacity .6s var(--ease),transform .8s var(--av-ease)}
.av-price__card--lead{background:#f5f2ff;box-shadow:6px 6px 0 #6b52c9;transition-delay:.1s}
.ag-js .av-price:not(.is-seen) .av-price__card{opacity:0;transform:translateY(12px)}
.av-price__art{display:block;width:100%;max-width:210px;height:auto;margin:-6px 0 4px;overflow:visible}
.av-price__ride{opacity:0;offset-rotate:0deg}
.ag-js .av-price.is-seen .av-price__ride--1{animation:av-ride 3.8s cubic-bezier(.45,0,.25,1) .6s infinite backwards}
.ag-js .av-price.is-seen .av-price__ride--3{animation:av-ride 4.6s cubic-bezier(.45,0,.25,1) 1.1s infinite backwards}
@keyframes av-ride{0%{offset-distance:0%;opacity:0}10%{opacity:1}80%{offset-distance:100%;opacity:1}92%,100%{offset-distance:100%;opacity:0}}
.av-price__nm{display:flex;align-items:center;justify-content:space-between;gap:10px}
.av-price__nm h3{margin:0;font:500 20px/1.2 "Neue Montreal",system-ui,sans-serif}
.av-price__tag{padding:6px 10px;border:1.2px solid #000;border-radius:999px;background:#6b52c9;font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#fff;white-space:nowrap}
.av-price__amt{margin:6px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px}
.av-price__amt b{font:500 56px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.035em}
.av-price__amt span{font:400 15px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.av-price__line{margin:0 0 10px;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-price__card .btn{align-self:flex-start}
.av-price__card .av-price__pay{margin-top:auto}   /* the pill and the button sit together at the foot, so the pills line up across the cards */
.av-care{max-width:880px;box-sizing:border-box;margin:24px auto 0;display:flex;align-items:baseline;gap:18px;padding:18px 24px;border:1.5px solid #000;border-radius:14px;background:#fff;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.av-care__k{flex:none;font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.av-care b{font-weight:500;color:#000}
.av-fine{max-width:880px;margin:22px auto 0;text-align:center;font:400 14px/1.5 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-wrap:pretty}
.av-fine a{color:#000;text-decoration:underline;text-underline-offset:3px}

/* ---- the one next step ---- */
.av-next{padding:0 0 136px}
.av-go{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:44px;align-items:center;padding:56px 60px;background:#e8f0ff;border:1.5px solid #000;border-radius:24px;box-shadow:8px 8px 0 #000}
.av-go__copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.av-go__copy .h-display{font-size:40px;line-height:1.1}  /* 40px so each sentence of the headline holds one line at 1181 and up */
.av-go__copy .h-display em{color:var(--blue)}
.av-go__copy .lead{color:#333}
.av-go__fit{display:flex;flex-direction:column;gap:16px;padding:28px;background:#fff;border:1.5px solid #000;border-radius:16px}
.av-go__fit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.av-go__fit li{display:flex;gap:12px;align-items:flex-start;font:400 16px/1.4 "Neue Montreal",system-ui,sans-serif;text-wrap:pretty}
.av-go__fit .ag-tick{margin-top:1px;transition:transform .5s var(--av-ease),background .3s var(--ease);transition-delay:calc(var(--i) * 160ms + .3s)}
.av-go__fit .ag-tick::after{transition:opacity .25s var(--ease) calc(var(--i) * 160ms + .5s)}
.ag-js .av-go__fit ul:not(.is-seen) .ag-tick{transform:scale(.4);background:#fff}
.ag-js .av-go__fit ul:not(.is-seen) .ag-tick::after{opacity:0}
.av-go__fit p{margin:4px 0 0;padding-top:14px;border-top:1px solid var(--line);font:500 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}

@media (min-width:1181px) and (max-width:1279px){
  .av-go__copy .h-display{font-size:36px}
}
@media (max-width:1180px){
  .av-kit__list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .av-terms{grid-template-columns:1fr}
  .av-roi{grid-template-columns:1fr;max-width:640px}
  .av-view__tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .av-go{grid-template-columns:1fr;padding:44px}
}
@media (max-width:900px){
  .av-proof{padding-bottom:96px}
  .av-roi__card{padding:22px 20px 20px}
  .av-roi__stat b{font-size:36px}
  .av-roi__stat{padding-right:12px}
  .av-roi__stat--cost{padding-left:12px}
  .av-roi__was b,.av-roi__now b{font-size:24px}
  .av-roi__cmp{gap:10px}
  .av-crew{flex-direction:column;align-items:flex-start;padding:22px}
  .av-crew__roles{grid-template-columns:1fr}
  .av-call__list{grid-template-columns:1fr;gap:12px}
  .av-view{padding:16px 14px 20px}
  .av-view__tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .av-view__tab{justify-content:flex-start;font-size:13.5px}
  .av-view__head{grid-template-columns:1fr;gap:16px}
  .av-view__side{align-items:flex-start}
  .av-price{grid-template-columns:1fr;max-width:520px}
  .av-run{padding-top:8px}
  .av-run__span{display:none}
  .av-run__track{left:25px;right:auto;top:30px;bottom:30px;width:4px;height:auto;background:repeating-linear-gradient(180deg,rgba(0,0,0,.22) 0 6px,transparent 6px 11px)}
  .av-run__fill{left:0;right:0;top:19%;transform-origin:center top}
  .ag-js .av-run__fill{transform:scaleY(0)}
  .av-run__list{grid-template-columns:1fr;gap:22px}
  .av-run__stop{display:grid;grid-template-columns:52px 1fr;column-gap:16px;row-gap:3px;align-items:start;text-align:left}
  .av-run__badge{grid-row:1 / span 3;margin:0}
  .av-run__stop > span{max-width:none}
  .av-run__stop em{justify-self:start}
  .av-need ul{grid-template-columns:1fr}
  .av-kit__list{grid-template-columns:1fr 1fr}
  .av-terms{padding:20px}
  .av-terms__list{grid-template-columns:1fr}
  .av-care{flex-direction:column;gap:8px;max-width:520px}
  .av-next{padding-bottom:96px}
  .av-go{padding:32px 22px}
  .av-go__copy .h-display{font-size:34px !important}
}
@media (prefers-reduced-motion:reduce){
  .av-price__card,.av-roi__card,.av-view__tab,.ag-js .av-view__panel,.ag-js .av-view__panel.is-on,.ag-js .av-more__body,.ag-js .av-more__inner,.ag-js .av-more.is-open .av-more__inner,.av-more__btn i,.ag-js .av-run__badge,.ag-js .av-kit__list li,.ag-js .av-terms__list li{transition:none}
  .ag-js .av-run__badge,.ag-js .av-kit__list li,.ag-js .av-terms__list li{opacity:1;transform:none}
  .ag-js .av-roi:not(.is-seen) .av-roi__card,.ag-js .av-price:not(.is-seen) .av-price__card{opacity:1;transform:none}
  .av-view__ind,.av-go__fit .ag-tick,.av-crew__face,.av-call__fill,.av-call__dot,.av-call__list li{transition:none}
  .ag-js .av-crew:not(.is-seen) .av-crew__face,.ag-js .av-call:not(.is-seen) .av-call__list li{opacity:1;transform:none}
  .ag-js .av-call:not(.is-seen) .av-call__fill{transform:none}
  .ag-js .av-call:not(.is-seen) .av-call__dot{left:100%}
  .av-roi__bar--now i,.av-roi__bar--now span,.av-roi__arrow,.av-roi__now{transition:none}
  .ag-js .av-roi:not(.is-seen) .av-roi__arrow,.ag-js .av-roi:not(.is-seen) .av-roi__now{opacity:1;transform:none}
  .ag-js .av-roi:not(.is-seen) .av-roi__bar--now i{transform:scaleX(var(--to))}
  .ag-js .av-roi:not(.is-seen) .av-roi__bar--now span{opacity:1}
  .ag-js .av-go__fit ul:not(.is-seen) .ag-tick{transform:none;background:var(--green-bg)}
  .ag-js .av-price.is-seen .av-price__ride--1,.ag-js .av-price.is-seen .av-price__ride--3,.av-view__ind.is-run i{animation:none}
}

/* ---- breathing room (Justin, 2026-09-27: the page felt tight between sections). Grounds alternate from the
   hero down: hero white, top agents cream, how it works white, pricing cream, FAQ white (2026-09-27, after Tim). ----
   Scoped to /agents through body.av-page so the agent and team pages keep their own rhythm. */
.av-page .ag-section{padding:160px 0}
.av-page .av-proof{padding:152px 0 160px}
.av-page .av-next{padding:144px 0 160px}
.av-page .ag-head{gap:24px}
.av-page .av-view,.av-page .av-roi,.av-page .agc-how,.av-page .av-price,.av-page .ag-faq{margin-top:72px}
.av-page .av-browse,.av-page .av-crew,.av-page .av-more{margin-top:56px}
.av-page .av-care{margin-top:32px}
@media (max-width:900px){
  .av-page .ag-section{padding:104px 0}
  .av-page .av-proof{padding:96px 0 104px}
  .av-page .av-next{padding:96px 0 104px}
  .av-page .av-view,.av-page .av-roi,.av-page .agc-how,.av-page .av-price,.av-page .ag-faq{margin-top:52px}
  .av-page .av-browse,.av-page .av-crew,.av-page .av-more{margin-top:44px}
}

/* ---- top agents (2026-09-27): results and the team catalog in one. Chips pick a team; each panel is the agent,
   what it's worth, and the one-pager's four beats filled with its own example. Panels share one grid cell, so the
   section never changes height. ---- */
.av-top{margin:72px auto 0;max-width:1180px;padding:22px 28px 30px;background:#fff;border:1.5px solid #000;border-radius:22px;box-shadow:8px 8px 0 #000}
/* the picker is labelled as functions, not departments (Justin, 2026-09-27): the label sits to the left of the chips
   on desktop and above them from 1180 down, so the chips never wrap because of it */
.av-top__bar{display:flex;align-items:center;justify-content:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.av-top__pick{flex:none;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#656567}
.av-top__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.av-top__chip{position:relative;overflow:hidden;appearance:none;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border:1.5px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:border-color .25s var(--ease),background .3s var(--ease),box-shadow .3s var(--av-ease)}
.av-top__chip:hover{border-color:#000}
.av-top__chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.av-top__chip .ag-glyph{width:26px;height:26px;flex-basis:26px;border-radius:50%}
.av-top__chip.is-on{border-color:#000;background:color-mix(in srgb,var(--fn) 45%,#fff);box-shadow:2px 2px 0 #000}
.av-top__time{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:#000;opacity:0;transform:scaleX(0);transform-origin:left}
.av-top.is-tick .av-top__chip.is-on .av-top__time{opacity:.35;animation:av-top-time 7s linear forwards}
.av-top [data-fn="legal"]{--fn:#bfe8e0}
@keyframes av-top-time{to{transform:scaleX(1)}}
.av-top__stage{display:grid}
.av-top__panel{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
/* every panel fills the shared cell and its tiles sit at the foot, so a shorter panel’s spare room falls between the
   workflow and what it’s worth, as breathing room, not as an empty band under the tiles */
.av-top__panel{display:flex;flex-direction:column}
.av-top__cap{margin-top:auto !important}
.av-top__run{margin-bottom:30px}
.av-top__panel.is-on{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.av-top__team{display:block;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#656567}
.av-top__id h3{margin:12px 0 0;font:500 32px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.av-top__id p{margin:12px 0 0;max-width:700px;font:400 17px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.av-top__steps{list-style:none;margin:0;padding:26px 4px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.av-top__s{position:relative;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.av-top__s:not(:last-child)::after{content:"";position:absolute;left:54px;right:-18px;top:21px;border-top:1.5px dashed #b9b9b9;transform-origin:left}
.av-top__ic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border:1.5px solid #000;border-radius:12px;background:#fff}
.av-top__ic svg{width:19px;height:19px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av-top__s--ag .av-top__ic{background:#e3edff;border-color:var(--blue)}
.av-top__s--ag .av-top__ic svg{fill:#fff;stroke:#2a4a80;transform-box:fill-box;transform-origin:center}
.av-top__s--you .av-top__ic{background:#ffeba1}
.av-top__s--ok .av-top__ic{background:#caf0be}
.av-top__s--ok .av-top__ic path{stroke-dasharray:20;stroke-dashoffset:0}
.av-top__k{font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.av-top__s b{font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif;text-wrap:pretty}
.av-top__s p{margin:0;font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#444;text-wrap:pretty}
/* a switch lifts the four beats in; the run itself (dot, ticks, rings) is Web Animations in the page script */
.av-top.is-seen .av-top__panel.is-on .av-top__s{animation:av-top-in .6s var(--av-ease) backwards;animation-delay:calc(var(--s) * 120ms + .05s)}
@keyframes av-top-in{from{opacity:0;transform:translateY(8px)}}
.av-top__go{margin:28px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* how it works: the full process is on show now, so it plays when it scrolls in rather than on open */
.av-proc{margin-top:72px}
.ag-js .av-proc.is-seen .av-run__fill{transform:none}
.ag-js .av-proc.is-seen .av-run__badge{transform:none;opacity:1}
.av-page .av-more .agc-how{margin-top:40px}

/* everything included, inside the FAQ answer it belongs to */
.av-incl{padding:6px 24px 26px}
.av-incl .av-kit__list{display:flex;flex-wrap:wrap;justify-content:center}
.av-incl .av-kit__list li{width:calc((100% - 28px) / 3)}
.av-incl .av-kit__list li > div{display:flex;flex-direction:column;gap:8px}
.av-incl .av-terms{grid-template-columns:1fr;gap:16px}
.ag-js .ag-faq__item[open] .av-kit__list li,.ag-js .ag-faq__item[open] .av-terms__list li{opacity:1;transform:none}

@media (max-width:1000px){
  .av-top__steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:30px}
  .av-top__s:nth-child(2)::after{display:none}
}
@media (max-width:640px){
  .av-top{margin-top:52px;padding:16px 16px 24px}
  /* one swipeable row of chips on a phone, bled to the panel edges, the one on show kept in view by the script */
  .av-top__chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;margin:0 -16px;padding:2px 16px 18px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 30px),transparent)}
  .av-top__chips::-webkit-scrollbar{display:none}
  .av-top__chip{flex:none;scroll-snap-align:start}
  .av-top__chip{font-size:13.5px}
  .av-top__id h3{font-size:26px}
  .av-top__steps{grid-template-columns:1fr;row-gap:24px}
  .av-top__s::after{display:none}
  .av-incl{padding:4px 16px 20px}
  .av-incl .av-kit__list li{width:100%;flex-direction:row;align-items:flex-start;gap:14px;padding:16px}
  .av-incl .av-kit__list li .av-ic{margin:0;flex:none}
  .av-incl .av-kit__list li > div{gap:4px}
  .av-incl .av-terms__list{grid-template-columns:1fr}
  .av-proc{margin-top:52px}
}
@media (prefers-reduced-motion:reduce){
  .av-top .av-top__s,.av-top__time,.av-top .av-top__id,.av-top .av-top__cap,.av-top .av-top__worth li{animation:none !important}
  .av-top__dot{display:none !important}
  .av-top__panel{transition:none}
}

/* the payback pill on each price card: a quiet trust nudge in the Top agents' green */
.av-price__pay{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;margin:0;padding:7px 13px 7px 10px;background:#eaf7e3;border:1.2px solid #000;border-radius:999px;font:400 14px/1 "Neue Montreal",system-ui,sans-serif;color:#1f3d14}
.av-price__pay b{font-weight:500}
.av-price__pay svg{width:16px;height:16px;flex:none;fill:none;stroke:#2f5a1f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- inside your walls (in the How it works expander): the client's business holds everything ---- */
.av-walls{max-width:1000px;margin:64px auto 0}   /* the same width as the crew strip under it */
.av-walls__box{position:relative;padding:44px 28px 30px;background:#fff;border:1.5px solid #000;border-radius:18px}
.av-walls__k{position:absolute;left:28px;top:18px;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#656567}
.av-walls__lock{position:absolute;right:28px;top:-17px;display:grid;place-items:center;width:56px;height:32px;border:1.4px solid #000;border-radius:999px;background:#ddd4ff}
.av-walls__lock svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av-walls__grid{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 30px auto}
.av-walls__t{position:relative;grid-column:span 2;margin:0 12px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;padding:14px 16px;border:1.5px solid #000;border-radius:12px;background:#fff;box-shadow:4px 4px 0 rgba(0,0,0,.07)}
.av-walls__t i{grid-row:span 2;display:grid;place-items:center;width:24px;height:24px}
.av-walls__t svg{width:20px;height:20px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.av-walls__t b{font:500 15.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.av-walls__t span{font:400 13px/1.3 "Neue Montreal",system-ui,sans-serif;color:#555}
.av-walls__t--agent{background:#ebe2ff}
.av-walls__t--agent svg{fill:#fff}
.av-walls__t--agent::before,.av-walls__t--agent::after{content:"";position:absolute;top:50%;width:24px;border-top:1.2px solid rgba(0,0,0,.45)}
.av-walls__t--agent::before{right:100%;margin-right:1.5px}
.av-walls__t--agent::after{left:100%;margin-left:1.5px}
.av-walls__t--systems{grid-column:1 / span 2;grid-row:1}
.av-walls__t--agent{grid-column:3 / span 2;grid-row:1}
.av-walls__t--model{grid-column:5 / span 2;grid-row:1}
.av-walls__t--cloud{grid-column:2 / span 2;grid-row:3}
.av-walls__t--security{grid-column:4 / span 2;grid-row:3}
.av-walls__join{grid-column:1 / -1;grid-row:2}
.av-walls__join svg{display:block;width:100%;height:100%}
.av-walls__join path{fill:none;stroke:rgba(0,0,0,.45);stroke-width:1.2}
/* opening the expander drops each piece in, the agent first, the shield last */
.ag-js .av-walls__t{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .6s var(--av-ease);transition-delay:calc(var(--i) * 90ms + .35s)}
.ag-js .av-walls__lock{opacity:0;transform:scale(.6);transition:opacity .4s var(--ease),transform .55s var(--av-ease);transition-delay:.9s}
.ag-js .av-more.is-open .av-walls__t,.ag-js .av-more.is-open .av-walls__lock{opacity:1;transform:none}
@media (max-width:760px){
  .av-walls__box{padding:48px 18px 22px}
  .av-walls__grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:12px}
  .av-walls__t,.av-walls__t--systems,.av-walls__t--agent,.av-walls__t--model,.av-walls__t--cloud,.av-walls__t--security{grid-column:auto;grid-row:auto;margin:0}
  .av-walls__t--agent{order:-1}
  .av-walls__t--agent::before,.av-walls__t--agent::after,.av-walls__join{display:none}
  .av-walls__k{left:18px}
  .av-walls__lock{right:18px}
}
@media (prefers-reduced-motion:reduce){ .ag-js .av-walls__t,.ag-js .av-walls__lock{transition:none} }

/* the five timeline titles hold one line wherever the timeline runs across (Justin: "Kickoff & Access",
   "Setup & Customized", "Tested & Fine-tuned" must never wrap on a small desktop); a size step keeps them clear */
@media (min-width:901px){ .av-run__stop b{white-space:nowrap} }
@media (min-width:901px) and (max-width:1100px){ .av-run__stop b{font-size:16px} }
@media (min-width:901px) and (max-width:980px){ .av-run__stop b{font-size:15px} }

/* ---- Top agents, the run (2026-09-27): one dot rides the four beats on the tour's clock and slips behind each
   icon as the work enters that step; the agent's three steps tick off, the tag glows, the tick draws. ---- */
.av-top__run{position:relative}
.av-top__ic{position:relative;z-index:1}
.av-top__dot{position:absolute;left:0;top:0;display:none;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#2866ce;box-shadow:0 0 0 4px rgba(57,122,231,.2);opacity:0;pointer-events:none;z-index:0}
.av-top.is-seen .av-top__panel.is-on .av-top.is-seen .av-top__panel.is-on 

/* ---- Your business: once the expander opens, one handoff travels systems, agent, model, then down to your cloud
   and security, and the shield glints. Runs once, and rests on the plain picture. ---- */
.ag-js .av-more.is-open .av-walls__t{animation:av-walls-ping 1s var(--ease) both;animation-delay:var(--pd)}
.av-walls__t--systems{--pd:1.2s}.av-walls__t--agent{--pd:1.45s}.av-walls__t--model{--pd:1.7s}.av-walls__t--cloud,.av-walls__t--security{--pd:2.05s}
@keyframes av-walls-ping{0%,100%{box-shadow:4px 4px 0 rgba(0,0,0,.07),0 0 0 0 rgba(57,122,231,0)}35%{box-shadow:4px 4px 0 rgba(0,0,0,.07),0 0 0 5px rgba(57,122,231,.2)}}
.ag-js .av-more.is-open .av-walls__t--agent::before{animation:av-walls-line .8s var(--ease) 1.3s both}
.ag-js .av-more.is-open .av-walls__t--agent::after{animation:av-walls-line .8s var(--ease) 1.55s both}
@keyframes av-walls-line{0%,100%{border-top-color:rgba(0,0,0,.45)}40%{border-top-color:#2866ce}}
.ag-js .av-more.is-open .av-walls__join path{animation:av-walls-stroke .8s var(--ease) 1.85s both}
@keyframes av-walls-stroke{0%,100%{stroke:rgba(0,0,0,.45)}40%{stroke:#2866ce}}
.ag-js .av-more.is-open .av-walls__lock{animation:av-walls-glint .9s var(--av-ease) 2.4s both}
@keyframes av-walls-glint{0%,100%{box-shadow:0 0 0 0 rgba(107,82,201,0)}40%{box-shadow:0 0 0 7px rgba(107,82,201,.18)}}
@media (prefers-reduced-motion:reduce){ .ag-js .av-more.is-open .av-walls__t,.ag-js .av-more.is-open .av-walls__t--agent::before,.ag-js .av-more.is-open .av-walls__t--agent::after,.ag-js .av-more.is-open .av-walls__join path,.ag-js .av-more.is-open .av-walls__lock{animation:none} }

/* ---- the price drawings: the whole card width. One agent: a job slides from the queue into the agent, the agent
   works, a finished one lands on the pile. Three agents: each works in turn, and the finished one rides the shared
   line to the pile. Base styles are the finished frame. ---- */
.av-price__art{max-width:none;width:100%;margin:-4px 0 8px}
.av-price__job-i,.av-price__out-i,.av-price__agent,.av-price__queue,.av-price__pile{transform-box:fill-box;transform-origin:center}
.av-price__job-i{opacity:0}
/* One continuous handoff: the job glides into the agent and fades as it arrives, the agent swells once, and the
   finished card leaves the agent while the job is still fading, then travels to the pile in a single eased move.
   The rules run linear; each keyframe that starts a move carries its own easing, so nothing stops mid-journey. */
.ag-js .av-price.is-seen .av-price__art--1 .av-price__job-i{animation:av-job 4.8s linear .6s infinite backwards}
@keyframes av-job{
  0%{opacity:0;transform:none}
  6%{opacity:1}
  8%{transform:none;animation-timing-function:cubic-bezier(.55,0,.4,1)}
  30%{opacity:1}
  32%{transform:translateX(116px) scale(.5)}
  36%,100%{opacity:0;transform:translateX(116px) scale(.5)}
}
.ag-js .av-price.is-seen .av-price__art--1 .av-price__agent{animation:av-agent 4.8s linear .6s infinite backwards}
@keyframes av-agent{
  0%,29%{transform:none;animation-timing-function:cubic-bezier(.3,0,.3,1)}
  35%{transform:scale(1.08);animation-timing-function:cubic-bezier(.4,0,.4,1)}
  46%,100%{transform:none}
}
.ag-js .av-price.is-seen .av-price__art--1 .av-price__out-i{animation:av-out 4.8s linear .6s infinite backwards}
@keyframes av-out{
  0%{opacity:0;transform:translateX(-116px) scale(.5)}
  33%{opacity:0;transform:translateX(-116px) scale(.5);animation-timing-function:cubic-bezier(.22,.7,.2,1)}
  38%{opacity:1}
  62%{transform:none}
  90%{opacity:1}
  100%{opacity:0;transform:none}
}
.ag-js .av-price.is-seen .av-price__art--3 .av-price__agent{animation:av-agent3 5.4s ease-in-out infinite backwards;animation-delay:calc(var(--k) * .22s + 1s)}
@keyframes av-agent3{0%,24%,100%{transform:none}12%{transform:scale(1.1)}}
.ag-js .av-price.is-seen .av-price__art--3 .av-price__out-i{animation:av-out3 5.4s linear 1s infinite backwards}
@keyframes av-out3{
  0%{opacity:0;transform:translateX(-126px) scale(.5)}
  18%{opacity:0;transform:translateX(-126px) scale(.5);animation-timing-function:cubic-bezier(.22,.7,.2,1)}
  23%{opacity:1}
  50%{transform:none}
  90%{opacity:1}
  100%{opacity:0;transform:none}
}
@media (prefers-reduced-motion:reduce){ .ag-js .av-price.is-seen :is(.av-price__job-i,.av-price__out-i,.av-price__agent){animation:none} }

/* ---- Top agents, concept A (Justin, 2026-09-27): the workflow first and largest, what it's worth under it as three
   quieter tiles. A switch is one composed entrance: the agent settles, the four beats rise in order, the tiles lift
   last and their figures count up. ---- */
.av-top__id{padding:28px 4px 26px}
.av-top__s b{font:500 16px/1.35 "Neue Montreal",system-ui,sans-serif;text-wrap:pretty}
.av-top__cap{margin:30px 4px 0;padding-top:20px;border-top:1px solid var(--line);font:400 13.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.av-top__worth{list-style:none;margin:12px 4px 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.av-top__worth li{display:flex;align-items:baseline;gap:10px;padding:12px 16px;background:#eaf7e3;border:1.2px solid #000;border-radius:12px}
.av-top__worth b{font:500 22px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;color:#2f5a1f;font-variant-numeric:tabular-nums}
.av-top__worth span{font:400 14px/1.2 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.av-top.is-seen .av-top__panel.is-on .av-top__id{animation:av-top-in .55s var(--av-ease) backwards}
.av-top.is-seen .av-top__panel.is-on .av-top__cap{animation:av-top-in .5s var(--av-ease) .42s backwards}
.av-top.is-seen .av-top__panel.is-on .av-top__worth li{animation:av-top-lift .6s var(--av-ease) backwards;animation-delay:calc(var(--w) * 90ms + .5s)}
@keyframes av-top-lift{from{opacity:0;transform:translateY(10px) scale(.98)}}
@media (max-width:640px){
  .av-top__worth{flex-direction:column;gap:8px}
  .av-top__worth li{justify-content:space-between}
}

/* what the call is, under the closing button */
.av-callnote{max-width:380px;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-wrap:balance}
.ag-faq__answer a{color:#000;text-decoration:underline;text-decoration-color:rgba(0,0,0,.35);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.ag-faq__answer a:hover{text-decoration-color:#000}

/* ---- the results under the hero (restyled with the new hero, 2026-09-28; Justin: more colour, more room). Four
   real results, each on a card in its team's lightest tint with the team glyph, the figure in the team's deep ink,
   what it measures and who it was for. A soft stagger on first paint. ---- */
.av-ribbon{padding:96px 0 104px;background:#fdfcf8}
.av-ribbon .container{max-width:1360px}
.av-ribbon__k{margin:0 0 22px;text-align:center;font:500 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:#555}
.av-ribbon__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.av-ribbon__list li{--soft:#f6f4ee;--deep:#2f5a1f;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0;padding:24px 24px 26px;border-radius:16px;background:var(--soft);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.av-ribbon__list li[data-tone="pink"]{--soft:#fdf6fb;--tile:#ffdff4;--deep:#8a2d6b}
.av-ribbon__list li[data-tone="green"]{--soft:#f4faf0;--tile:#caf0be;--deep:#2f5a1f}
.av-ribbon__list li[data-tone="lav"]{--soft:#f7f5ff;--tile:#ddd4ff;--deep:#4a3a99}
.av-ribbon__list li[data-tone="blue"]{--soft:#f3f7ff;--tile:#c6dbff;--deep:#2a4a80}
.av-ribbon__list .ag-glyph{width:34px;height:34px;flex:0 0 34px;border-width:1.2px;border-radius:10px;background:var(--tile)}
.av-ribbon__list .ag-glyph svg{width:17px;height:17px}
.av-ribbon__list div{display:flex;flex-direction:column;gap:6px;min-width:0}
.av-ribbon__n{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.av-ribbon__list b{font:500 32px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.025em;color:var(--deep)}
.av-ribbon__n em{font:400 12.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:#555;padding:5px 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.av-ribbon__list span{font:500 15px/1.35 "Neue Montreal",system-ui,sans-serif;color:#000;text-wrap:pretty}
.av-ribbon__list small{font:400 13.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:#555}
/* the hero plays first; the results follow once it has started, slowly, one after another */
.ag-js .av-ribbon__k{animation:av-ribbon-fade 1s ease 1.5s backwards}
.ag-js .av-ribbon__list li{animation:av-ribbon-in 1.3s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i) * 180ms + 1.7s)}
.ag-js .av-ribbon .av-logos{animation:av-ribbon-fade 1.4s ease 2.6s backwards}
@keyframes av-ribbon-in{from{opacity:0;transform:translateY(16px)}}
@keyframes av-ribbon-fade{from{opacity:0}}
@media (max-width:1100px){
  .av-ribbon{padding:88px 0 88px}
  .av-ribbon__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .av-ribbon{padding:72px 0 72px}
  .av-ribbon__list{grid-template-columns:1fr;gap:12px}
  .av-ribbon__list li{flex-direction:row;gap:14px;padding:20px}
  .av-ribbon__list b{font-size:27px}
}
@media (prefers-reduced-motion:reduce){ .ag-js .av-ribbon__list li,.ag-js .av-ribbon__k,.ag-js .av-ribbon .av-logos{animation:none} }
.av-top__note{color:var(--muted)}   /* HR’s never-line, inside its one-liner so it doesn’t set every panel’s height */

/* one client voice under the results ribbon: small, quiet, and real (the testimonial the homepage and booking page carry) */
.av-quote{margin:34px auto 0;max-width:640px;text-align:center}
.av-quote blockquote{margin:0;font:400 17px/1.45 "Neue Montreal",system-ui,sans-serif;color:#1d1d1d;text-wrap:balance}
.av-quote figcaption{margin-top:8px;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.ag-js .av-quote{animation:av-ribbon-in .7s var(--av-ease) .75s backwards}
@media (prefers-reduced-motion:reduce){ .ag-js .av-quote{animation:none} }
@media (max-width:1180px){ .av-top__bar{flex-direction:column;gap:14px} }
@media (max-width:640px){ .av-top__bar{align-items:flex-start;padding-bottom:0;border-bottom:0} .av-top__pick{margin-left:0} .av-top__chips{border-bottom:1px solid var(--line);width:calc(100% + 32px)} }

/* the promise under both price cards, anchored with the page's green tick */

/* ---- the closing card: the page ends on one calm, framed invitation in the agents purple, echoing the three-agent
   price card. A small drawing plays once as it arrives (a question in, the agent, a tick out), then the star breathes. ---- */
.av-faq-go{max-width:560px;margin:72px auto 0;padding:34px 36px 32px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background:#f5f2ff;border:1.5px solid #000;border-radius:22px;box-shadow:6px 6px 0 #6b52c9}
.av-faq-go p{margin:6px 0 0;font:500 22px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.av-faq-go .av-callnote{max-width:360px}
.av-close__art{width:210px;height:auto;display:block;overflow:visible}
.av-close__agent,.av-close__ok,.av-close__q,.av-close__star{transform-box:fill-box;transform-origin:center}
.av-close__in,.av-close__out{transform-box:fill-box;transform-origin:left center}
.ag-js .av-faq-go:not(.is-seen) .av-close__q,.ag-js .av-faq-go:not(.is-seen) .av-close__agent,.ag-js .av-faq-go:not(.is-seen) .av-close__ok{opacity:0}
.ag-js .av-faq-go.is-seen .av-close__q{animation:av-close-pop .55s var(--av-ease) .1s backwards}
.ag-js .av-faq-go.is-seen .av-close__in{animation:av-close-draw .5s var(--ease) .45s backwards}
.ag-js .av-faq-go.is-seen .av-close__agent{animation:av-close-pop .55s var(--av-ease) .8s backwards}
.ag-js .av-faq-go.is-seen .av-close__out{animation:av-close-draw .5s var(--ease) 1.2s backwards}
.ag-js .av-faq-go.is-seen .av-close__ok{animation:av-close-pop .6s var(--av-ease) 1.55s backwards}
.ag-js .av-faq-go.is-seen .av-close__star{animation:av-close-breathe 4.6s ease-in-out 2.4s infinite}
@keyframes av-close-pop{from{opacity:0;transform:scale(.7)}}
@keyframes av-close-draw{from{transform:scaleX(0)}}
@keyframes av-close-breathe{50%{transform:scale(1.12)}}
@media (max-width:640px){ .av-faq-go{margin-top:52px;padding:28px 22px 26px} .av-faq-go p{font-size:20px} }
@media (prefers-reduced-motion:reduce){ .ag-js .av-faq-go .av-close__q,.ag-js .av-faq-go .av-close__agent,.ag-js .av-faq-go .av-close__ok{opacity:1} .av-faq-go *{animation:none !important} }



/* ---- 2026-09-28, Tim's round, trimmed (Justin: busy) ----
   the price on optional support */
.av-care b{font-weight:500;color:#000}

/* logos under the results: the homepage's marks, still and quiet */
.av-logos{margin:44px auto 0;max-width:1000px;display:flex;flex-direction:column;align-items:center;gap:18px}
.av-logos__k{font:500 12px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.av-logos__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px 44px}
.av-logos__row img{height:22px;width:auto;opacity:.6;filter:grayscale(1)}
.av-logos__row img[data-mark="aarcomm"]{height:14px}
.av-logos__row img[data-mark="reliablepremium"]{height:24px}
@media (max-width:600px){ .av-logos__row{gap:18px 28px} .av-logos__row img{height:18px} .av-logos__row img[data-mark="aarcomm"]{height:12px} }
/* eight marks: one row where there's room, two even rows of four below that (no orphan on its own line) */
.av-logos__row{display:grid;grid-template-columns:repeat(8,auto);justify-content:center;justify-items:center;gap:22px 44px}
@media (min-width:1101px){ .av-logos{align-items:stretch} .av-logos__row{justify-content:space-between} }
@media (max-width:1100px){ .av-logos__row{grid-template-columns:repeat(4,auto);gap:24px 48px} }
@media (max-width:600px){ .av-logos__row{gap:20px 28px} }

/* Henrique closes the Top agents section, under its buttons (moved out of the results strip: busy) */
.av-quote--top{margin-top:56px}
.av-price + .av-care{margin-top:36px}
/* calmer (Justin, 2026-09-28: the strip still read as busy). One label, the numbers without their team icons, the
   logos smaller and lighter under a hairline, no second label */
.av-logos{margin-top:64px;padding-top:0;border-top:0;max-width:none}
.av-logos__row{gap:22px 52px}
.av-logos__row img{height:18px;opacity:.42}
.av-logos__row img[data-mark="aarcomm"]{height:12px}
.av-logos__row img[data-mark="reliablepremium"]{height:20px}
/* Henrique sits between the Top agents card and its buttons, with room either side */
.av-quote--top{margin:64px auto 0}
.av-quote--top + .av-top__go{margin-top:44px}
@media (max-width:600px){ .av-quote--top{margin-top:44px} .av-quote--top + .av-top__go{margin-top:32px} .av-logos{margin-top:44px} .av-logos__row img{height:16px} }
/* in between (Justin: the stripped version read bland): the team icons back, a size smaller, and the logos a notch
   stronger; still one label and the hairline */
.av-logos__row img{height:20px;opacity:.55}
.av-logos__row img[data-mark="aarcomm"]{height:13px}
.av-logos__row img[data-mark="reliablepremium"]{height:22px}
@media (max-width:600px){ .av-logos__row img{height:17px} }
/* the sticky bar on /agents: slides up past the hero, fades away once pricing is on screen, fades back above it */
.av-page .agd-bar{transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.av-page .agd-bar.is-away{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .av-page .agd-bar{transition:none} }

/* ---- the questions (2026-09-28, Justin: a hair less bland, nothing loud). Hairlines instead of black rules, a round
   button with a down caret that turns up, and the open question sits on a soft lavender card while its answer eases in. Hover is
   grounded: the button fills lavender and the row takes the faintest tint. Scoped to /agents. ---- */
.av-page .ag-faq{border-top:1px solid rgba(0,0,0,.13);transition:border-color .35s ease}
.av-page .ag-faq:has(> .ag-faq__item:first-child[open]){border-top-color:transparent}
.av-page .ag-faq__item{border-bottom:1px solid rgba(0,0,0,.13);border-radius:0;padding:0 22px;transition:background-color .35s ease,border-radius .35s ease,border-color .35s ease}
.av-page .ag-faq__item:has(+ .ag-faq__item[open]),.av-page .ag-faq__item[open]{border-bottom-color:transparent}
.av-page .ag-faq__item summary{padding:24px 0;gap:28px}
.av-page .ag-faq__item summary::after{width:34px;height:34px;border:1.2px solid #000;border-radius:50%;transform:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition:background-color .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.av-page .ag-faq__item summary:hover::after{background-color:#ddd4ff}
.av-page .ag-faq__item:not([open]):hover{background:rgba(107,82,201,.035)}
.av-page .ag-faq__item[open]{background:#f7f5ff;border-radius:16px}
.av-page .ag-faq__item[open] summary::after{transform:rotate(180deg);background-color:#ddd4ff}
.av-page .ag-faq__answer{padding:0 0 26px;max-width:700px}
.av-page .ag-faq__item[open] .ag-faq__answer{animation:av-faq-in .55s cubic-bezier(.22,1,.36,1)}
@keyframes av-faq-in{from{opacity:0;transform:translateY(-4px)}}
.av-page .ag-faq__item summary:focus-visible{outline:none}
.av-page .ag-faq__item summary:focus-visible::after{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue)}
@media (max-width:640px){
  .av-page .ag-faq__item{padding:0 14px}
  .av-page .ag-faq__item summary{padding:20px 0;gap:18px;font-size:17px}
  .av-page .ag-faq__item summary::after{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){ .av-page .ag-faq__item,.av-page .ag-faq__item summary::after{transition:none} .av-page .ag-faq__item[open] .ag-faq__answer{animation:none} }