/* hm-bridge v4 · home hero · two worlds (header comment in asset.html; v3 kept as asset.v3.css).
   Every selector starts with .hm-bridge. v4.css tokens always carry fallbacks, so preview.html works standalone.
   AGENTS (v6): .hm-ch, a chat (the /ai-agents Approvals tile's manner) with Hawcx's checks inside the agent's messages.
   PEOPLE: the phone (v1/v2, unchanged). Base rules = the final frame; .is-live rewinds the phone to state A. */
.hm-bridge{
  --hm-w16:rgba(255,255,255,.16);      /* visible strokes on dark: above the 15% floor (V14) */
  --hm-ok-rest:#aed6b7;                /* 60% --ok-d + 40% #ddd: colour relaxes toward the text tier (assets.md §2.4) */
  --hm-br-t1:var(--t1,120ms); --hm-br-t2:var(--t2,200ms); --hm-br-t3:var(--t3,320ms);
  --hm-br-t4:var(--t4,560ms); --hm-br-t5:var(--t5,900ms);
  --hm-br-e:var(--ease,cubic-bezier(.25,1,.5,1));
  --hm-br-ed:var(--ease-draw,cubic-bezier(.45,.05,.25,1));
  position:relative;margin-top:72px;text-align:left;color:#fff;
}
.hm-bridge p{margin:0}
.hm-bridge .hm-br-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.hm-bridge .hm-br-world{position:relative;display:flex;flex-direction:column;min-width:0;height:420px;border-radius:16px;overflow:hidden;isolation:isolate;
  color:#fff;text-decoration:none;-webkit-tap-highlight-color:transparent}
/* ---------- each world is one link: its title and one plain line sit inside, top left (Endex's feature cards);
   the picture sits under them in .hm-br-art and is cropped by the card's bottom edge ---------- */
.hm-bridge .hm-br-hd{position:relative;z-index:1;flex:none;padding:28px 32px 0}
.hm-bridge .hm-br-t{margin:0;font-family:var(--sans,system-ui,sans-serif);font-size:24px;line-height:30px;font-weight:450;letter-spacing:-.015em;color:#fff}
/* the chevron is generated, so the heading's text (what search reads) is the head term alone */
.hm-bridge .hm-br-t::after{content:"›";content:"›" / "";display:inline-block;margin-left:8px;color:var(--w-60,rgba(255,255,255,.6));transition:transform var(--hm-br-t3) var(--hm-br-e),color var(--hm-br-t2) var(--hm-br-e)}
.hm-bridge .hm-br-s{margin-top:4px;font-size:15px;line-height:22px;color:rgba(255,255,255,.72)}
.hm-bridge .hm-br-agents .hm-br-s{color:rgba(255,255,255,.8)}   /* on the blue: one step up for contrast */
.hm-bridge .hm-br-art{position:relative;display:block;flex:1;min-height:0;margin-top:32px;transition:transform var(--hm-br-t4) var(--hm-br-e)}
/* hover: the chevron steps on, the picture rises 4px out of the crop, a hairline lights the edge. Focus: a white ring. */
.hm-bridge .hm-br-world::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,0);transition:box-shadow var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge .hm-br-world:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hm-bridge .hm-br-world:hover .hm-br-t::after{transform:translateX(3px);color:#fff}
.hm-bridge .hm-br-world:hover .hm-br-art{transform:translateY(-4px)}
.hm-bridge .hm-br-world:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hm-bridge .hm-br-agents{background:var(--field-blue);background-color:#0a3cb0}
.hm-bridge .hm-br-people{background:var(--dk-4,#141414)}
.hm-bridge .hm-br-name{font-family:var(--sans,system-ui,sans-serif);font-weight:450;color:#fff;transition:color var(--hm-br-t2) var(--hm-br-e)}

/* ---------- the agents world (v6): .hm-ch, a chat with Hawcx's checks inside the agent's messages ----------
   The /ai-agents Approvals tile's chat (white bubbles for Dana, dark ones for the agent, 14px radius with one 6px corner),
   on the grained blue. The view is bottom-anchored and clips at the top under a 40px fade, so it reads as a live thread;
   asset.js scrolls it with a FLIP on transform. Status colour only on ticks and outcomes. */
.hm-bridge .hm-ch{--ch-bg:rgba(6,16,56,.52);--ch-ring:rgba(255,255,255,.15);--ch-ok:var(--ok-d,#8FD19E);--ch-hold:var(--hold-d,#F2B84B);
  position:absolute;inset:0 32px 24px;font-family:var(--sans,system-ui,sans-serif);font-size:13.5px;line-height:20px;color:#fff}
.hm-bridge .hm-ch p{margin:0}
.hm-bridge .hm-ch svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hm-bridge .hm-ch-view{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
.hm-bridge .hm-ch-stack{display:flex;flex-direction:column;gap:8px;flex:none;transition:opacity var(--hm-br-t4) var(--hm-br-e)}
.hm-bridge .hm-ch-me{align-self:flex-end;max-width:72%;padding:8px 13px;border-radius:14px 14px 6px 14px;background:#fff;color:var(--ink,#0a0a0a)}
.hm-bridge .hm-ch-ag,.hm-bridge .hm-ch-card,.hm-bridge .hm-ch-ask,.hm-bridge .hm-ch-typing{align-self:flex-start;border-radius:14px 14px 14px 6px;background:var(--ch-bg);box-shadow:inset 0 0 0 1px var(--ch-ring)}
.hm-bridge .hm-ch-ag{max-width:80%;padding:8px 13px;color:rgba(255,255,255,.92)}
.hm-bridge .hm-ch-typing{display:none;gap:4px;padding:12px 13px}
.hm-bridge .hm-ch-typing i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.6);animation:hm-ch-blink 1.2s infinite}
.hm-bridge .hm-ch-typing i:nth-child(2){animation-delay:.2s}.hm-bridge .hm-ch-typing i:nth-child(3){animation-delay:.4s}
@keyframes hm-ch-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* the agent's request card: who, the call, the checks on a gate bar, the outcome */
.hm-bridge .hm-ch-card{width:min(340px,90%);padding:12px 14px}
.hm-bridge .hm-ch-hd{display:flex;align-items:center;gap:8px;font-size:13px;line-height:20px}
.hm-bridge .hm-ch-av{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.12)}
.hm-bridge .hm-ch-av svg{width:16px;height:16px}
.hm-bridge .hm-ch-av .hm-ch-fill{fill:currentColor;stroke:none}
.hm-bridge .hm-ch-who{font-weight:500}
.hm-bridge .hm-ch-for{color:rgba(255,255,255,.62)}
.hm-bridge .hm-ch-req{display:flex;align-items:baseline;gap:6px;margin-top:8px!important;font-size:12.5px;line-height:18px;color:rgba(255,255,255,.66)}
.hm-bridge .hm-ch-req code{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:#fff}
.hm-bridge .hm-ch-gate{position:relative;margin-top:6px;padding-left:14px}
.hm-bridge .hm-ch-bar{position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:1px;background:rgba(255,255,255,.18);overflow:hidden}
.hm-bridge .hm-ch-bar::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:top;transform:scaleY(var(--f,1));transition:transform var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge .hm-ch-cs{list-style:none;margin:0;padding:0}
.hm-bridge .hm-ch-c{display:flex;align-items:center;gap:8px;height:24px;font-size:12.5px;color:rgba(255,255,255,.9);white-space:nowrap;transition:opacity var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge .hm-ch-ci{width:14px;height:14px;color:rgba(255,255,255,.8)}
.hm-bridge .hm-ch-tk{display:inline-flex;color:var(--ch-ok);transition:opacity var(--hm-br-t2) var(--hm-br-e),transform var(--hm-br-t2) var(--hm-br-e)}
.hm-bridge .hm-ch-tk.is-hold{color:var(--ch-hold)}
.hm-bridge .hm-ch-tk svg,.hm-bridge .hm-ch-out svg,.hm-bridge .hm-ch-res svg{width:13px;height:13px;stroke-width:1.7}
.hm-bridge .hm-ch-out{display:flex;align-items:center;gap:6px;margin-top:8px!important;padding-top:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);font-size:12.5px;line-height:18px;color:var(--ch-ok);transition:opacity var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge .hm-ch-out b{font-weight:500}
.hm-bridge .hm-ch-out span{color:rgba(255,255,255,.62)}
.hm-bridge .hm-ch-out.is-hold{color:var(--ch-hold)}
/* the approval ask, answered in the chat */
.hm-bridge .hm-ch-ask{width:min(280px,82%);padding:12px 14px}
.hm-bridge .hm-ch-btns{display:flex;gap:8px;margin-top:10px!important}
.hm-bridge .hm-ch-ap,.hm-bridge .hm-ch-no{display:grid;place-items:center;flex:1;height:30px;border-radius:8px;font-size:13px;line-height:18px;font-weight:500}
.hm-bridge .hm-ch-ap{background:#fff;color:var(--ink,#0a0a0a);transition:transform var(--hm-br-t1) var(--hm-br-e)}
.hm-bridge .hm-ch-no{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:rgba(255,255,255,.85)}
.hm-bridge .hm-ch-fin{display:flex;flex-direction:column}
.hm-bridge .hm-ch-res{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:12px;line-height:16px;color:var(--ch-ok)}
/* live: .is-live starts empty; messages arrive (is-gone off, then is-pre off = fade up), checks light (is-on) */
.hm-bridge .hm-ch-m{transition:opacity var(--hm-br-t3) var(--hm-br-e),transform var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge .hm-ch.is-live .hm-ch-m.is-gone{display:none}
.hm-bridge .hm-ch.is-live .hm-ch-typing:not(.is-gone){display:inline-flex}
.hm-bridge .hm-ch.is-live .hm-ch-m.is-pre{opacity:0;transform:translateY(6px)}
.hm-bridge .hm-ch.is-live .hm-ch-c:not(.is-on){opacity:.42}
.hm-bridge .hm-ch.is-live .hm-ch-c:not(.is-on) .hm-ch-tk{opacity:0;transform:scale(.6)}
.hm-bridge .hm-ch.is-live .hm-ch-out:not(.is-on){opacity:0}
.hm-bridge .hm-ch.is-live .hm-ch-ap.is-on{transform:scale(.96)}
.hm-bridge .hm-ch.is-live.is-x .hm-ch-stack{opacity:0}
.hm-bridge .hm-ch.is-snap,.hm-bridge .hm-ch.is-snap *{transition:none!important}
.hm-bridge .hm-ch.is-snap *::after{transition:none!important}

/* ---------- the phone (people world): a dark screen, cropped by the world's bottom edge (v1, unchanged) ---------- */
.hm-bridge .hm-br-phone{position:absolute;left:0;right:0;top:0;width:244px;height:480px;margin:0 auto;padding:9px;border-radius:42px;background:var(--ink,#0a0a0a);box-shadow:0 0 0 1px var(--hm-w16)}
.hm-bridge .hm-br-scr{position:relative;height:100%;border-radius:34px;background:var(--dk,#1c1c1c);overflow:hidden;text-align:center;font-family:var(--sans,system-ui,sans-serif)}
.hm-bridge .hm-br-sb{position:relative;display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 22px 0 26px;font-size:12px;line-height:16px;font-weight:600;color:var(--w-85,rgba(255,255,255,.85))}
.hm-bridge .hm-br-isl{position:absolute;left:50%;top:9px;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:var(--ink,#0a0a0a)}
.hm-bridge .hm-br-bat{position:relative;width:20px;height:10px;border-radius:3px;box-shadow:inset 0 0 0 1.2px var(--w-85,rgba(255,255,255,.85))}
.hm-bridge .hm-br-bat::after{content:"";position:absolute;top:2.5px;bottom:2.5px;left:2.5px;right:6px;border-radius:1px;background:var(--w-85,rgba(255,255,255,.85))}
.hm-bridge .hm-br-hi{position:absolute;left:18px;right:18px;top:72px;font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em;color:#fff}
.hm-bridge .hm-br-em{position:absolute;left:18px;right:18px;top:102px;font-size:13px;line-height:18px;white-space:nowrap}
.hm-bridge .hm-br-ring{position:absolute;left:50%;top:138px;width:64px;height:64px;margin-left:-32px;overflow:visible}
.hm-bridge .hm-br-trk{fill:none;stroke:var(--hm-w16);stroke-width:1.5}
.hm-bridge .hm-br-arc{fill:none;stroke:var(--hm-ok-rest);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0}
.hm-bridge .hm-br-bio{fill:none;stroke:var(--w-85,rgba(255,255,255,.85));stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hm-bridge .hm-br-bio path{vector-effect:non-scaling-stroke}
.hm-bridge .hm-br-btn{position:absolute;left:18px;right:18px;top:230px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--dk-3,#2b2b2b);font-size:13.5px;line-height:20px;font-weight:500;color:#fff;opacity:0}
.hm-bridge .hm-br-ok{position:absolute;left:18px;right:18px;top:232px}
.hm-bridge .hm-br-ok b{display:block;font-size:14px;line-height:20px;font-weight:500;color:#fff}
.hm-bridge .hm-br-dot{display:none}
.hm-bridge .hm-br-pf{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--w-60,rgba(255,255,255,.6))}

/* ---------- under the cards: only the demo-data caption (the links now live in the cards) ---------- */
.hm-bridge .hm-br-cap{margin-top:16px;text-align:right;font-family:var(--mono,ui-monospace,monospace);font-size:11px;line-height:16px;color:var(--w-60,rgba(255,255,255,.6))}

/* ---------- live: state A, then one class per step (event table in asset.js) ---------- */
/* the beat: the phone's email lights as the ring closes */
.hm-bridge.is-live .hm-br-name{color:var(--w-60,rgba(255,255,255,.6))}
.hm-bridge.is-live.is-lit .hm-br-name{color:#fff}
/* phone (v2, unchanged) */
.hm-bridge.is-live .hm-br-btn{opacity:1;transition:opacity var(--hm-br-t3) var(--hm-br-e),transform var(--hm-br-t1) var(--hm-br-e)}
.hm-bridge.is-live.is-press .hm-br-btn{transform:scale(.97)}
.hm-bridge.is-live.is-btnout .hm-br-btn{opacity:0}
.hm-bridge.is-live .hm-br-ok{opacity:0;transition:opacity var(--hm-br-t3) var(--hm-br-e)}
.hm-bridge.is-live.is-signed .hm-br-ok{opacity:1}
.hm-bridge.is-live .hm-br-arc{opacity:0;stroke:var(--w-60,rgba(255,255,255,.6));stroke-dashoffset:1;transition:opacity var(--hm-br-t4) var(--hm-br-e)}
.hm-bridge.is-live.is-draw .hm-br-arc{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset var(--hm-br-t5) var(--hm-br-ed),stroke var(--hm-br-t2) var(--hm-br-e)}
.hm-bridge.is-live.is-lit .hm-br-arc{stroke:var(--ok-d,#8FD19E)}
.hm-bridge.is-live.is-relax .hm-br-arc{stroke:var(--hm-ok-rest);transition:stroke var(--hm-br-t4) var(--hm-br-e)}
.hm-bridge.is-live .hm-br-bio{stroke:var(--w-60,rgba(255,255,255,.6));transition:stroke var(--hm-br-t2) var(--hm-br-e)}
.hm-bridge.is-live.is-lit .hm-br-bio{stroke:var(--w-85,rgba(255,255,255,.85))}
/* reset by fade (9 840 - 10 400) */
.hm-bridge.is-live.is-out .hm-br-ok,
.hm-bridge.is-live.is-out .hm-br-arc{opacity:0;transition:opacity var(--hm-br-t4) var(--hm-br-e)}
/* ?sim freezes; is-reset covers the first rewind from the markup's final frame to state A, so load shows no fade */
.hm-bridge.is-sim .hm-br-people *,.hm-bridge.is-reset .hm-br-people *{transition:none!important}

/* ---------- 761-1100: two columns kept; the tile keeps the bento's type and narrows with the field ---------- */
@media (max-width:1100px){
  .hm-bridge .hm-ch{inset:0 24px 20px}
  .hm-bridge .hm-br-hd{padding:24px 24px 0}
  .hm-bridge .hm-br-t{font-size:20px;line-height:26px}
  .hm-bridge .hm-br-s{font-size:14px;line-height:20px}
  .hm-bridge .hm-br-art{margin-top:28px}
}

/* ---------- <=760: recomposed. The agents world first (the tile in flow, cropped by the field's edge);
   the phone becomes a sign-in strip docked 8px under it (v2) ---------- */
@media (max-width:760px){
  .hm-bridge{margin-top:48px}
  .hm-bridge .hm-br-duo{grid-template-columns:minmax(0,1fr);gap:8px}
  .hm-bridge .hm-br-world{height:auto;border-radius:14px}
  .hm-bridge .hm-br-hd{padding:20px 20px 0}
  .hm-bridge .hm-br-art{flex:none;margin-top:20px}
  .hm-bridge .hm-ch{position:relative;inset:auto;height:320px;margin:0 16px 18px;font-size:13px}
  .hm-bridge .hm-br-world:hover .hm-br-art{transform:none}
  /* the phone becomes the sign-in row, on its own surface rising out of the card's bottom edge like the tile beside it */
  .hm-bridge .hm-br-people .hm-br-art{margin:20px 12px 0}
  .hm-bridge .hm-br-phone{position:static;width:auto;height:auto;margin:0 0 -14px;padding:16px 16px 30px;border-radius:12px;background:var(--dk-2,#242424);box-shadow:inset 0 0 0 1px var(--w-06,rgba(255,255,255,.06))}
  .hm-bridge .hm-br-scr{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:20px 18px;column-gap:12px;row-gap:6px;height:44px;border-radius:0;background:none;overflow:visible;text-align:left}
  .hm-bridge .hm-br-sb,.hm-bridge .hm-br-hi{display:none}
  .hm-bridge .hm-br-ring{position:static;grid-column:1;grid-row:1/3;align-self:center;width:36px;height:36px;margin:0}
  .hm-bridge .hm-br-trk,.hm-bridge .hm-br-arc{stroke-width:2.667}   /* 1.5 CSS px at 36px (viewBox 64) */
  .hm-bridge .hm-br-b1{display:none}      /* marks halved: three ridges, so 1.5px strokes keep a 2px gap at 16px */
  .hm-bridge .hm-br-bio{transform:translate(5.72px,2.1px) scale(2.19)}
  .hm-bridge .hm-br-em{position:static;grid-column:2;grid-row:1;font-size:14px;line-height:20px}
  .hm-bridge .hm-br-btn,.hm-bridge .hm-br-ok{position:static;grid-column:2;grid-row:2;min-width:0;white-space:nowrap}
  .hm-bridge .hm-br-btn{display:block;height:auto;border-radius:0;background:none;font-size:13px;line-height:18px;color:var(--w-85,rgba(255,255,255,.85))}
  .hm-bridge .hm-br-ok,.hm-bridge .hm-br-ok b,.hm-bridge .hm-br-pf{font-size:12.5px;line-height:18px}
  .hm-bridge .hm-br-ok b,.hm-bridge .hm-br-dot,.hm-bridge .hm-br-pf{display:inline;margin:0}
  .hm-bridge .hm-br-dot{color:var(--w-60,rgba(255,255,255,.6))}
  .hm-bridge.is-live.is-press .hm-br-btn{transform:none}
  .hm-bridge .hm-br-cap{margin-top:12px;text-align:left}
}
@media (max-width:380px){   /* the sign-in strip (v2, unchanged) */
  .hm-bridge .hm-br-phone{padding:16px 14px 30px}
  .hm-bridge .hm-br-scr{column-gap:10px}
  .hm-bridge .hm-br-ok,.hm-bridge .hm-br-ok b,.hm-bridge .hm-br-pf{font-size:12px}
}

/* ---------- bigger (2026-09-30, user: "make this section look a bit bigger"): 540 tall, larger type, a 1.12x phone;
   from 1400 the pair breaks 48px out of the 1232 column on each side (1328 wide) ---------- */
@media (min-width:1101px){
  .hm-bridge .hm-br-world{height:540px;border-radius:18px}
  .hm-bridge .hm-br-hd{padding:32px 36px 0}
  .hm-bridge .hm-br-t{font-size:28px;line-height:34px}
  .hm-bridge .hm-br-s{margin-top:6px;font-size:16px;line-height:24px}
  .hm-bridge .hm-br-art{margin-top:36px}
  .hm-bridge .hm-ch{inset:0 36px 28px;font-size:14.5px;line-height:21px}
  .hm-bridge .hm-ch-stack{gap:10px}
  .hm-bridge .hm-ch-me,.hm-bridge .hm-ch-ag{padding:9px 14px}
  .hm-bridge .hm-ch-card{width:min(384px,90%);padding:14px 16px}
  .hm-bridge .hm-ch-hd{font-size:14px}
  .hm-bridge .hm-ch-av{width:24px;height:24px}
  .hm-bridge .hm-ch-req,.hm-bridge .hm-ch-c,.hm-bridge .hm-ch-out{font-size:13.5px}
  .hm-bridge .hm-ch-req code{font-size:13px}
  .hm-bridge .hm-ch-c{height:27px}
  .hm-bridge .hm-ch-ask{width:min(310px,82%);padding:14px 16px}
  .hm-bridge .hm-ch-ap,.hm-bridge .hm-ch-no{height:34px;font-size:14px}
  .hm-bridge .hm-ch-res{font-size:13px}
  .hm-bridge .hm-br-phone{transform:scale(1.12);transform-origin:50% 0}
}
@media (min-width:1400px){
  .hm-bridge{margin-left:-36px;margin-right:-36px}   /* = the cards' inner padding, so card titles align with the H1 */
}
@media (min-width:761px) and (max-width:1100px){
  .hm-bridge .hm-br-world{height:460px}
}
@media (max-width:760px){
  .hm-bridge .hm-ch{height:360px}
}

@media (prefers-reduced-motion:reduce){
  .hm-bridge *{transition:none!important}
  .hm-bridge .hm-ch-typing i{animation:none}
}
@media (forced-colors:active){
  .hm-bridge .hm-br-world,.hm-bridge .hm-ch-me,.hm-bridge .hm-ch-ag,.hm-bridge .hm-ch-card,.hm-bridge .hm-ch-ask,.hm-bridge .hm-br-phone,.hm-bridge .hm-br-btn{border:1px solid CanvasText}
  .hm-bridge .hm-br-trk,.hm-bridge .hm-br-arc,.hm-bridge .hm-br-bio{stroke:CanvasText}
  .hm-bridge .hm-br-bat::after{background:CanvasText}
}