/* abt-roots v2 · the /company "What we build" pair (user: "this section looks bland ... probably the product screens"). Prefix .abt-.
   Each card holds a product screen that the card crops at its right and bottom edges, the way ElevenLabs shows real product UI inside its
   cards. Left: the agent console, drawn in the real dashboard's dark UI, on the Hawcx blue (the page's one highlight). Right: the real
   passwordless dashboard screenshot (hawcx.com) on stone. The markup is the final frame; .is-play replays the held decision once. */
body.elv .cl-tool-stage.abt-stage{display:block;aspect-ratio:5/4}
body.elv .cl-tool-stage.abt-stage--agents{background:var(--field-blue);background-color:#0a3cb0}
body.elv .cl-tool-stage.abt-stage--device{background:var(--stone)}

/* the window both screens sit in: anchored top-left, cropped by the card */
.abt-win{position:absolute;left:40px;top:40px;width:640px;border-radius:12px 0 0 0;overflow:hidden;background:#121212;color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -24px rgba(0,0,0,.55)}
.abt-shot{width:900px;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 30px 60px -28px rgba(15,23,42,.45)}
.abt-shot img{display:block;width:900px;height:auto}

/* the agent console, in the dashboard's own language: top bar, a side nav, one table */
.abt-con{font-size:12px;line-height:18px;letter-spacing:.005em}
.abt-con-top{display:flex;align-items:center;gap:12px;height:46px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.abt-con-logo{width:84px;height:auto;flex:none}
.abt-con-ws{padding-left:14px;border-left:1px solid rgba(255,255,255,.1);font-size:13px;color:#fff}
.abt-con-env{padding:2px 8px;border-radius:4px;background:#14254d;box-shadow:inset 0 0 0 1px #2b4a8f;color:#cfe0ff;font-size:11px;line-height:16px}
.abt-con-body{display:grid;grid-template-columns:112px minmax(0,1fr);min-height:420px}
.abt-con-nav{display:flex;flex-direction:column;gap:2px;padding:18px 10px;border-right:1px solid rgba(255,255,255,.06)}
.abt-con-nav p{margin:0 0 8px;padding:0 8px;font-size:11px;color:rgba(255,255,255,.55)}
.abt-con-nav span{padding:6px 8px;border-radius:6px;color:rgba(255,255,255,.7)}
.abt-con-nav span.on{background:#232323;color:#fff}
.abt-con-main{padding:18px 18px 18px 18px}
.abt-con-h{margin:0;font-size:20px;line-height:26px;color:#fff}
.abt-con-s{margin:2px 0 18px;color:rgba(255,255,255,.6)}
.abt-con-tbl{border:1px solid rgba(255,255,255,.08);border-radius:8px;overflow:hidden}
.abt-con-tbl .r{display:grid;grid-template-columns:1.05fr 1.1fr 1fr;align-items:center;column-gap:10px;padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.82)}
.abt-con-tbl .r.hd{border-top:0;background:#171717;color:rgba(255,255,255,.55);font-size:11px}
.abt-con-tbl .m{font-family:var(--mono);font-size:11.5px;line-height:16px;color:#fff}
.abt-con-tbl .m i{display:block;font-style:normal;font-size:10.5px;color:rgba(255,255,255,.5)}
.abt-con-tbl .dim{color:rgba(255,255,255,.5)}
.abt-con-tbl .o{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:1px 8px 1px 7px;border-radius:999px;font-size:11px;line-height:18px;white-space:nowrap}
.abt-con-tbl .o::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.abt-con-tbl .o.ok{background:rgba(143,209,158,.12);color:var(--ok-d)}
.abt-con-tbl .o.hold{background:rgba(242,184,75,.12);color:var(--hold-d)}
.abt-con-tbl .o.deny{background:rgba(244,114,114,.12);color:var(--deny-d)}
.abt-con-tbl .o.wait{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}
.abt-con-tbl .o-cell{display:grid;justify-items:start}
.abt-con-tbl .o-cell>.o{grid-area:1/1}
.abt-con-tbl .o-cell>.o.wait{opacity:0}
.abt-con-tbl .r.is-live{background:rgba(242,184,75,.05)}

/* one replay on entry: the billing agent's refund is checked, then held for a person */
.abt-roots.is-play .o-cell>.o.wait{animation:abtOut 1.6s steps(1,end) both}
.abt-roots.is-play .o-cell>.o.hold{animation:abtIn 1.6s steps(1,end) both}
.abt-roots.is-play .o-cell>.o.wait::before{animation:abtBlink .8s ease-in-out 2}
.abt-roots.is-play .r.is-live{animation:abtRow 2.4s var(--ease) both}
@keyframes abtOut{0%{opacity:1}100%{opacity:0}}
@keyframes abtIn{0%{opacity:0}100%{opacity:1}}
@keyframes abtBlink{50%{opacity:.25}}
@keyframes abtRow{0%,60%{background:rgba(255,255,255,.03)}100%{background:rgba(242,184,75,.05)}}
@media (prefers-reduced-motion:reduce){.abt-roots.is-play *{animation:none!important}}

/* phones: the same crop, scaled to the card */
@media (max-width:760px){
  body.elv .cl-tool-stage.abt-stage{aspect-ratio:5/4;min-height:0;padding:0}
  .abt-win{left:24px;top:24px;transform:scale(.62);transform-origin:0 0}
  .abt-con{width:500px}
  .abt-con-body{grid-template-columns:minmax(0,1fr)}
  .abt-con-nav{display:none}
}