/* RIVET · role-page hero agent panel (.ragent): one of the role's GTM/Revenue Agents at work, in the
   terminal look of /agents (agents-costume.css): pure black, a static scanline layer, Plex Mono labels,
   Lucide marks in the track colour. Used by gtm-operators, gtm-engineers, gtm-architects, gtm-leaders.
   The HTML ships in its finished state, so no-JS and reduced motion see the whole run.
   role-agent.js arms it (.is-armed) and plays it once when it scrolls into view (.is-run).
   Text on black: white, slate-on-dark #9A9BBD (AA), green and cyan only as marks and short labels. */

.phero__grid > .ragent{ width:100%; min-width:0; max-width:460px; justify-self:end; margin:0; }
@media (max-width:900px){ .phero__grid > .ragent{ max-width:none; justify-self:stretch; } }

.ragent__win{ position:relative; overflow:hidden; border-radius:16px; background:#000; color:#fff;
  padding:0 0 clamp(18px,2vw,22px); font-family:var(--font-mono,'IBM Plex Mono',monospace);
  box-shadow:0 28px 60px -34px rgba(0,0,0,.65); isolation:isolate; }
.ragent__win::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.028) 0 1px, transparent 1px 4px); }

.ragent__bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--elev-2,#12121A); }
.ragent__dots{ display:inline-flex; gap:6px; flex:none; }
.ragent__dots i{ width:9px; height:9px; border-radius:50%; background:var(--elev-4,#1E1E2A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.ragent__path{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--fs-micro,.6875rem); letter-spacing:.08em; text-transform:uppercase; color:var(--slate-on-dark,#9A9BBD); }
.ragent__live{ flex:none; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-micro,.6875rem);
  letter-spacing:.1em; text-transform:uppercase; color:#fff; }
.ragent__live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green,#00D982); }
.ragent__live .ragent__st-run{ display:none; }
.ragent.is-armed:not(.is-done) .ragent__live .ragent__st-run{ display:inline; }
.ragent.is-armed:not(.is-done) .ragent__live .ragent__st-done{ display:none; }
.ragent.is-armed:not(.is-done) .ragent__live::before{ background:var(--cyan,#4CF3FE); animation:ragent-pulse 1s steps(2,end) infinite; }

.ragent__head{ display:flex; align-items:center; gap:12px; padding:18px 18px 0; }
.ragent__mark{ flex:none; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:19%;
  background:var(--elev-2,#12121A); color:var(--mark,#D1D1D9); }
.ragent__mark svg{ width:20px; height:20px; }
.ragent__who{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ragent__who b{ font:600 1rem/1.2 var(--font-sans,'IBM Plex Sans',sans-serif); color:#fff; }
.ragent__who small{ font-size:var(--fs-micro,.6875rem); line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-on-dark,#9A9BBD); }

.ragent__cmd{ margin:16px 18px 0; padding:12px 14px; border-radius:10px; background:var(--elev-1,#0A0A0C);
  font-size:.875rem; line-height:1.5; color:#fff; overflow-wrap:anywhere; }
.ragent__ps{ color:var(--cyan,#4CF3FE); margin-right:8px; }
.ragent__caret{ display:inline-block; width:.55em; height:1.05em; margin-left:2px; vertical-align:-.15em; background:#fff; opacity:0; }
.ragent.is-armed.is-typing .ragent__caret{ opacity:1; animation:ragent-blink 1s steps(2,start) infinite; }
.ragent.is-armed .ragent__cmd{ display:grid; }
.ragent__ghost, .ragent__line{ grid-area:1 / 1; min-width:0; }
.ragent__ghost{ visibility:hidden; }
.ragent.is-armed .ragent__typed .rc{ display:none; }
.ragent.is-armed .ragent__typed .rc.on{ display:inline; }

.ragent__steps{ list-style:none; margin:14px 18px 0; padding:0; display:grid; gap:9px; font-size:.8125rem; line-height:1.45; }
.ragent__steps li{ display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; gap:10px; color:#fff;
  transition:opacity var(--dur-quick,200ms) var(--ease-standard,ease); }
.ragent__ic{ position:relative; width:18px; height:18px; margin-top:1px; }
.ragent__ic svg{ width:18px; height:18px; color:var(--green,#00D982); }
.ragent__ic::before{ content:""; position:absolute; inset:2px; border-radius:50%; border:2px solid rgba(255,255,255,.22); opacity:0; }
.ragent.is-armed .ragent__steps li{ opacity:.42; }
.ragent.is-armed .ragent__steps li svg{ opacity:0; }
.ragent.is-armed .ragent__steps li .ragent__ic::before{ opacity:1; }
.ragent.is-armed .ragent__steps li.is-on{ opacity:1; }
.ragent.is-armed .ragent__steps li.is-on .ragent__ic::before{ border-color:rgba(255,255,255,.22); border-top-color:var(--cyan,#4CF3FE); animation:ragent-spin .8s linear infinite; }
.ragent.is-armed .ragent__steps li.is-ok{ opacity:1; }
.ragent.is-armed .ragent__steps li.is-ok svg{ opacity:1; }
.ragent.is-armed .ragent__steps li.is-ok .ragent__ic::before{ opacity:0; animation:none; }

.ragent__out{ margin:16px 18px 0; padding:14px 16px; border-radius:10px; background:var(--elev-2,#12121A);
  transition:opacity var(--dur-base,320ms) var(--ease-standard,ease), translate var(--dur-base,320ms) var(--ease-standard,ease); }
.ragent__k{ display:block; font-size:var(--fs-micro,.6875rem); letter-spacing:.12em; text-transform:uppercase; color:var(--green,#00D982); }
.ragent__out b{ display:block; margin-top:6px; font:600 1rem/1.3 var(--font-sans,'IBM Plex Sans',sans-serif); color:#fff; }
.ragent__out ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px; font-size:.8125rem; line-height:1.45; color:var(--slate-on-dark,#9A9BBD); }
.ragent__out li{ position:relative; padding-left:16px; }
.ragent__out li::before{ content:"›"; position:absolute; left:0; color:var(--cyan,#4CF3FE); }
.ragent__out li strong{ font-weight:500; color:#fff; }
.ragent.is-armed .ragent__out{ opacity:0; translate:0 6px; }
.ragent.is-armed.is-done .ragent__out{ opacity:1; translate:0 0; }

.ragent__cap{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 14px; margin-top:12px;
  font-size:var(--fs-small,.875rem); line-height:1.45; color:var(--ink-muted,#4A4A68); }
.ragent__cap .ragent__ill{ font:500 var(--fs-micro,.6875rem)/1.4 var(--font-mono,'IBM Plex Mono',monospace); letter-spacing:.1em; text-transform:uppercase; }
.ragent__cap a{ color:var(--ink,#000); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.ragent__cap a:hover{ text-decoration-thickness:2px; }
.ragent__cap a:focus-visible{ outline:3px solid var(--focus-ring,#3B06D4); outline-offset:2px; border-radius:2px; }

@keyframes ragent-spin{ to{ transform:rotate(360deg); } }
@keyframes ragent-blink{ to{ visibility:hidden; } }
@keyframes ragent-pulse{ to{ opacity:.35; } }

@media (max-width:560px){
  .ragent__win{ border-radius:14px; }
  .ragent__head, .ragent__cmd, .ragent__steps, .ragent__out{ margin-left:14px; margin-right:14px; }
  .ragent__head{ padding:16px 14px 0; margin:0; }
  .ragent__cmd{ font-size:.8125rem; }
  /* phones: drop the "rivet / " root so the track name in the path is never cut */
  .ragent__bar{ gap:10px; padding:12px 14px; }
  .ragent__path .ragent__root{ display:none; }
  .ragent__path{ letter-spacing:.05em; }
  .ragent__live{ gap:5px; letter-spacing:.06em; }
}

/* The hero eyebrow carries the market line ("for startup revenue teams in Egypt"): one wrapping line, not flex columns */
.phero .eyebrow.role-eye{ display:block; }
.phero .eyebrow.role-eye [data-mkt]{ display:inline; }
.phero .eyebrow.role-eye [data-mkt][hidden]{ display:none; }

/* Reduced motion: the finished run, no typing, spinner, pulse or slide. */
@media (prefers-reduced-motion:reduce){
  .ragent .ragent__typed .rc{ display:inline !important; }
  .ragent .ragent__steps li{ opacity:1 !important; transition:none; }
  .ragent .ragent__steps li svg{ opacity:1 !important; }
  .ragent .ragent__steps li .ragent__ic::before{ opacity:0 !important; animation:none !important; }
  .ragent .ragent__out{ opacity:1 !important; translate:none !important; transition:none; }
  .ragent .ragent__caret, .ragent .ragent__live::before{ animation:none !important; }
}

/* Print and captures before any scroll: always the finished run. */
@media print{
  .ragent .ragent__typed .rc{ display:inline !important; }
  .ragent .ragent__steps li, .ragent .ragent__steps li svg{ opacity:1 !important; }
  .ragent .ragent__steps li .ragent__ic::before{ opacity:0 !important; animation:none !important; }
  .ragent .ragent__out{ opacity:1 !important; translate:none !important; transition:none; }
  .ragent .ragent__caret{ opacity:0 !important; animation:none !important; }
  .ragent .ragent__live .ragent__st-run{ display:none !important; }
  .ragent .ragent__live .ragent__st-done{ display:inline !important; }
}