/* Techfive home page (Managed Agents).
   Two rules carry the page:
   1. Our own product surfaces are dark. Third-party software (Slack, Teams) is drawn as itself.
   2. Agents are a breathing field of squares, not a face. Their name carries identity.

   Everything snaps to the scales in :root. A value that is not on a scale is a bug,
   not a decision. Utilities live at the very bottom so they win on source order. */

:root{
  /* dark register — our system */
  --void:#0E0A1C;
  --void-2:#151033;
  --void-raised:#1A1340;
  --void-line:#2C2359;
  --void-line-soft:#221B47;
  --on-void:#F2EEFF;
  --on-void-dim:#A79ECF;
  --on-void-faint:#7A719F;

  /* light register — the business reading it */
  --paper:#FFFFFF;
  --paper-2:#F5F4F9;
  --ink:#14111F;
  --ink-2:#474259;
  --ink-3:#645E73;
  --rule:#E5E2EC;
  --rule-2:#CFCADB;

  --violet:#7C3AED;
  --violet-lift:#8B5CF6;
  --violet-deep:#5B21B6;
  --violet-wash:#F3EEFF;
  --glow:rgba(139,92,246,.38);

  --ok:#34D399;
  --wait:#FBBF24;
  --ok-light:#0F7A52;
  --stop-light:#B32720;

  /* spacing scale */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:7.5rem;

  /* type scale */
  --fs-mono-xs:.6875rem;  /* 11 */
  --fs-mono-sm:.75rem;    /* 12 */
  --fs-xs:.8125rem;       /* 13 */
  --fs-sm:.875rem;        /* 14 */
  --fs-md:.9375rem;       /* 15 */
  --fs-base:1rem;         /* 16 */
  --fs-lg:1.125rem;       /* 18 */

  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px;

  --card-pad:1.75rem;
  --panel-pad:2.5rem;
  --sec-pad:var(--s-10);

  --shell:1280px;
  --pad:var(--s-6);

  --sans:var(--font-archivo,'Archivo'),'Helvetica Neue',Arial,sans-serif;
  --mono:var(--font-jetbrains,'JetBrains Mono'),ui-monospace,SFMono-Regular,Menlo,monospace;
  --slack:var(--font-lato,'Lato'),'Helvetica Neue',Arial,sans-serif;
  --teams:'Segoe UI',system-ui,'Helvetica Neue',Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.t5{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-variation-settings:'wdth' 100,'wght' 400;
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.t5{font-family:var(--sans);font-variation-settings:'wdth' 100,'wght' 400;line-height:1.6;color:var(--ink-2)}
.t5 img{max-width:100%;display:block}
/* :where() keeps these at element specificity so component classes still win, while
   scoping them to the page: unlayered element rules would otherwise beat Tailwind utilities site-wide. */
:where(.t5) a{color:inherit;text-decoration:none}
:where(.t5) button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}
.t5 ::selection{background:var(--violet);color:#fff}
.t5 :focus-visible{outline:2px solid var(--violet-lift);outline-offset:3px;border-radius:3px}
.t5 h1,.t5 h2,.t5 h3,.t5 h4{text-wrap:balance}
.t5 p{text-wrap:pretty}

.t5-shell{max-width:var(--shell);margin:0 auto;padding:0 var(--pad)}
@media (max-width:680px){:root{--pad:1.25rem}}

.t5-sec{padding:var(--sec-pad) 0}
.t5-sec--wash{background:var(--paper-2)}
.t5-sec--dark{background:var(--void);color:var(--on-void-dim)}
.t5-sec--snug{--sec-pad:var(--s-8)}
@media (max-width:900px){:root{--sec-pad:var(--s-8)}.t5-sec--snug{--sec-pad:var(--s-7)}}

/* ---------------- type ---------------- */
.t5-kicker{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-xs);font-variation-settings:'wdth' 100,'wght' 600;
  color:var(--violet);margin:0 0 var(--s-4);
}
.t5-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet-lift);box-shadow:0 0 10px var(--glow);flex:none}
.t5-kicker--dark{color:#C4B1FF}

.t5-h1{font-variation-settings:'wdth' 112,'wght' 700;font-size:clamp(2.3rem,5vw,4.4rem);line-height:1.03;letter-spacing:-0.028em;color:var(--ink);margin:0 0 var(--s-5)}
.t5-h2{font-variation-settings:'wdth' 110,'wght' 700;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.1;letter-spacing:-0.024em;color:var(--ink);margin:0 0 var(--s-4);max-width:26ch}
.t5-h3{font-variation-settings:'wdth' 105,'wght' 650;font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.24;letter-spacing:-0.016em;color:var(--ink);margin:0 0 var(--s-3)}
.t5-h4{font-variation-settings:'wdth' 100,'wght' 650;font-size:var(--fs-base);line-height:1.35;letter-spacing:-0.01em;color:var(--ink);margin:0 0 var(--s-1)}
.t5-sec--dark .t5-h1,.t5-sec--dark .t5-h2,.t5-sec--dark .t5-h3,.t5-sec--dark .t5-h4{color:#fff}

.t5-lede{font-size:var(--fs-lg);line-height:1.62;color:var(--ink-2);max-width:62ch;margin:0 0 var(--s-6)}
.t5-copy{font-size:var(--fs-base);line-height:1.7;color:var(--ink-2);max-width:66ch;margin:0}
.t5-copy + .t5-copy{margin-top:var(--s-4)}
.t5-small{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-3);max-width:62ch;margin:0}
.t5-emph{color:var(--ink);font-variation-settings:'wdth' 100,'wght' 600}
.t5-sec--dark .t5-lede,.t5-sec--dark .t5-copy{color:var(--on-void-dim)}
.t5-sec--dark .t5-small{color:var(--on-void-faint)}
.t5-sec--dark .t5-emph{color:#fff}

/* Section opener — stacked, in reading order. A second column beside the headline
   put a floating slab of copy above it and split the reader's attention. */
.t5-intro{margin:0 0 var(--s-8)}
.t5-intro .t5-h2{margin-bottom:var(--s-5);max-width:22ch}
.t5-intro .t5-lede{margin-bottom:0}
.t5-intro-copy{display:grid;gap:var(--s-4);max-width:66ch}

/* ---------------- buttons ---------------- */
.t5-btn{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-md);font-variation-settings:'wdth' 100,'wght' 600;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;
  transition:background .16s,border-color .16s,color .16s;
}
.t5-btn--go{background:var(--violet);color:#fff;box-shadow:0 8px 28px -12px var(--glow)}
.t5-btn--go:hover{background:var(--violet-deep)}
.t5-btn--line{border-color:var(--rule-2);color:var(--ink)}
.t5-btn--line:hover{border-color:var(--violet);color:var(--violet)}
.t5-hero .t5-btn--line,.t5-close .t5-btn--line,.t5-sec--dark .t5-btn--line{border-color:var(--void-line);color:#fff}
.t5-hero .t5-btn--line:hover,.t5-close .t5-btn--line:hover,.t5-sec--dark .t5-btn--line:hover{border-color:var(--violet-lift)}
.t5-btn--quiet{color:var(--violet);padding:var(--s-1) 0;font-variation-settings:'wdth' 100,'wght' 600}
.t5-btn--quiet:hover{color:var(--violet-deep)}
.t5-sec--dark .t5-btn--quiet{color:#C4B1FF}

/* ---------------- header ----------------
   Opaque: at scroll-top the sticky bar sits over the white body background, and a
   translucent fill turned it into a grey slab above the dark hero. */
.t5-head{position:sticky;top:0;z-index:50;background:var(--void);border-bottom:1px solid var(--void-line-soft)}
.t5-head-row{display:flex;align-items:center;justify-content:space-between;height:4.5rem;gap:var(--s-5)}
.t5-mark{display:flex;align-items:center;gap:var(--s-2);color:#fff;font-size:var(--fs-base);font-variation-settings:'wdth' 108,'wght' 700;letter-spacing:.02em}
.t5-logo{display:block;height:1.75rem;width:auto}
.t5-head-nav{display:flex;align-items:center;gap:var(--s-6)}
.t5-head-links{display:flex;gap:var(--s-5);list-style:none;margin:0;padding:0}
.t5-head-links a{font-size:var(--fs-md);color:var(--on-void-dim)}
.t5-head-links a:hover{color:#fff}
@media (max-width:900px){.t5-head-links{display:none}}

/* The breathing field, ambient and seam styles live in src/app/globals.css so every page can use them. */

/* Vertical — the pull quote's rule, breathing down the side of the sentence. */
.t5-quote{position:relative;border-left:0;padding-left:var(--s-6)}
.t5-quote-rule{position:absolute;left:0;top:.25em;bottom:.25em;width:.45rem}

/* Corner — a watermark on the one lifecycle stage that never ends. */
.t5-rail-cell--live{overflow:hidden}
.t5-cell-mark{position:absolute;right:-2rem;bottom:-2rem;width:10rem;height:10rem;opacity:.15;pointer-events:none;z-index:0}
.t5-rail-cell--live > p,.t5-rail-cell--live > h3{position:relative;z-index:1}

/* ---------------- hero ---------------- */
.t5-hero{background:var(--void);color:var(--on-void-dim);padding:var(--s-9) 0;position:relative;overflow:hidden}
.t5-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:var(--s-8);align-items:center}
@media (max-width:1040px){.t5-hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}}
@media (max-width:900px){.t5-hero{padding:var(--s-8) 0}}
.t5-hero .t5-h1{color:#fff}
.t5-hero .t5-lede{color:var(--on-void-dim);max-width:46ch}
.t5-hero-acts{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-8)}

.t5-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--void-line-soft)}
.t5-promise-cell{padding:var(--s-5) var(--s-5) 0 0}
.t5-promise-cell + .t5-promise-cell{border-left:1px solid var(--void-line-soft);padding-left:var(--s-5)}
.t5-promise-cell h4{margin:0 0 var(--s-2);font-size:var(--fs-sm);font-variation-settings:'wdth' 100,'wght' 650;color:#fff}
.t5-promise-cell p{margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--on-void-faint)}
@media (max-width:640px){
  .t5-promise{grid-template-columns:minmax(0,1fr)}
  .t5-promise-cell + .t5-promise-cell{border-left:0;border-top:1px solid var(--void-line-soft);padding-left:0;margin-top:var(--s-4)}
}

.t5-hero-stage{position:relative}
.t5-hero-photo{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--void-line)}
.t5-hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.02) brightness(.72)}
.t5-hero-console{position:relative;margin:-7rem 0 0 auto;width:min(100%,32rem)}
@media (max-width:1040px){.t5-hero-console{margin-top:-5rem;width:100%}}
@media (max-width:560px){.t5-hero-photo{aspect-ratio:3/2}.t5-hero-console{margin-top:-3rem}}

/* ---------------- our product surfaces (dark) ---------------- */
.t5-surface{
  background:linear-gradient(180deg,var(--void-2) 0%,var(--void) 100%);
  border:1px solid var(--void-line);border-radius:var(--r-md);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(139,92,246,.10),0 0 60px -30px var(--glow);
  overflow:hidden;
}
.t5-bar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;padding:var(--s-4);border-bottom:1px solid var(--void-line-soft);background:rgba(255,255,255,.02)}
.t5-bar-face{width:1.9rem;height:1.9rem;flex:none}
.t5-bar-name{font-size:var(--fs-sm);font-variation-settings:'wdth' 100,'wght' 650;color:#fff}
.t5-bar-sub{font-family:var(--mono);font-size:var(--fs-mono-sm);color:var(--on-void-faint)}
.t5-bar-end{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.t5-tag{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--on-void-faint);border:1px solid var(--void-line);border-radius:var(--r-xs);padding:.2rem .4rem;white-space:nowrap}
.t5-pad{padding:var(--card-pad)}
@media (max-width:560px){.t5-pad{padding:var(--s-4)}}

.t5-state{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--mono);font-size:var(--fs-mono-xs);white-space:nowrap}
.t5-state::before{content:"";width:.5rem;height:.5rem;flex:none}
.t5-state--ok{color:var(--ok)}
.t5-state--ok::before{border-radius:50%;background:var(--ok)}
.t5-state--wait{color:var(--wait)}
.t5-state--wait::before{background:var(--wait);clip-path:polygon(50% 0,100% 100%,0 100%)}
.t5-state--run{color:#C4B1FF}
.t5-state--run::before{border-radius:50%;background:#C4B1FF;box-shadow:0 0 8px var(--glow)}

/* hero execution trace */
.t5-ask{display:flex;gap:var(--s-3);padding:0 0 var(--s-4);border-bottom:1px solid var(--void-line-soft);margin-bottom:var(--s-4)}
.t5-ask-who{flex:none;width:1.6rem;height:1.6rem;border-radius:var(--r-xs);background:var(--void-raised);border:1px solid var(--void-line);display:grid;place-items:center;font-size:var(--fs-mono-xs);font-variation-settings:'wdth' 100,'wght' 650;color:var(--on-void-dim)}
.t5-ask-text{font-size:var(--fs-md);color:#fff;line-height:1.5}
.t5-ask-text span{display:block;font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--on-void-faint);margin-bottom:var(--s-1)}
.t5-trace{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.t5-step{display:grid;grid-template-columns:1.25rem minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-3) 0}
.t5-step + .t5-step{border-top:1px solid rgba(44,35,89,.5)}
.t5-step-mark{width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid rgba(52,211,153,.5);background:rgba(52,211,153,.1);display:grid;place-items:center;font-size:var(--fs-mono-xs);color:var(--ok)}
.t5-step--hold .t5-step-mark{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.12);color:var(--wait)}
.t5-step-what{font-size:var(--fs-sm);color:var(--on-void);min-width:0}
.t5-step--hold .t5-step-what{color:#fff}
@media (max-width:520px){.t5-step{grid-template-columns:1.25rem minmax(0,1fr);row-gap:var(--s-1)}.t5-step > :last-child{grid-column:2}}

/* third-party software, named in its own colour */
.t5-app{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--on-void-dim);white-space:nowrap}
.t5-app::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--app);flex:none}
.t5-app--ink{color:var(--ink-3)}

/* ---------------- shared card shell ---------------- */
.t5-grid-cells{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-md);overflow:hidden}
.t5-cell{background:var(--paper);padding:var(--card-pad);display:flex;flex-direction:column}

/* ---------------- 3 pillars ---------------- */
.t5-pillars{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.t5-pillars{grid-template-columns:minmax(0,1fr)}}
.t5-pillar-no{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--violet);margin:0 0 var(--s-4)}
.t5-pillar p{margin:0;font-size:var(--fs-sm);line-height:1.62;color:var(--ink-2)}
.t5-pillar-foot{padding-top:var(--s-6);font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3);display:flex;align-items:center;gap:var(--s-2)}
.t5-pillar-foot::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--violet-lift);flex:none}

/* ---------------- 3-step cycle, with the flow drawn between steps ---------------- */
.t5-cycle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-7);position:relative}
@media (max-width:900px){.t5-cycle{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}}
.t5-cycle-step{border:1px solid var(--void-line);border-radius:var(--r-md);padding:var(--card-pad);background:rgba(255,255,255,.02);position:relative}
/* arrow into each step after the first */
.t5-cycle-step + .t5-cycle-step::before{
  content:"";position:absolute;left:calc(var(--s-7) * -1);top:50%;width:var(--s-7);height:1px;
  background:linear-gradient(90deg,transparent,var(--void-line) 40%,var(--violet-lift));
}
.t5-cycle-step + .t5-cycle-step::after{
  content:"";position:absolute;left:-.45rem;top:50%;translate:0 -50%;
  width:0;height:0;border-left:.42rem solid var(--violet-lift);
  border-top:.3rem solid transparent;border-bottom:.3rem solid transparent;
}
@media (max-width:900px){
  .t5-cycle-step + .t5-cycle-step::before{left:50%;top:calc(var(--s-6) * -1);width:1px;height:var(--s-6);background:linear-gradient(180deg,transparent,var(--void-line) 40%,var(--violet-lift))}
  .t5-cycle-step + .t5-cycle-step::after{left:50%;top:-.45rem;translate:-50% 0;border-left:.3rem solid transparent;border-right:.3rem solid transparent;border-top:.42rem solid var(--violet-lift);border-bottom:0}
}
.t5-cycle-no{
  width:1.75rem;height:1.75rem;border-radius:var(--r-xs);background:var(--violet);color:#fff;
  display:grid;place-items:center;font-size:var(--fs-mono-sm);font-variation-settings:'wdth' 100,'wght' 650;
  margin:0 0 var(--s-5);
}
.t5-cycle-step h4{margin:0 0 var(--s-3);font-size:var(--fs-md);font-variation-settings:'wdth' 100,'wght' 650;color:#fff;line-height:1.35}
.t5-cycle-step p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--on-void-dim)}

/* ---------------- marquee (logos, credentials) ---------------- */
.t5-marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.t5-marquee-track{display:flex;width:max-content;animation:t5-marq var(--speed,46s) linear infinite}
.t5-marquee-group{display:flex;align-items:center;gap:var(--s-8);padding-right:var(--s-8)}
.t5-marquee:hover .t5-marquee-track,.t5-marquee:focus-within .t5-marquee-track{animation-play-state:paused}
@keyframes t5-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .t5-marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
  .t5-marquee-track{animation:none}
}
.t5-wordmark{font-variation-settings:'wdth' 108,'wght' 700;font-size:1.15rem;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}

/* ---------------- horizontal card scroller ---------------- */
.t5-scroll-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-5);margin-bottom:var(--s-6)}
.t5-scroll-nav{display:flex;align-items:center;gap:var(--s-3);flex:none}
.t5-scroll-count{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3)}
.t5-scroll-btn{
  width:2.6rem;height:2.6rem;border:1px solid var(--rule-2);border-radius:50%;
  display:grid;place-items:center;color:var(--ink);font-size:var(--fs-base);
  transition:border-color .15s,color .15s;
}
.t5-scroll-btn:hover:not(:disabled){border-color:var(--violet);color:var(--violet)}
.t5-scroll-btn:disabled{opacity:.3;cursor:default}
.t5-viewport{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)}
.t5-viewport::-webkit-scrollbar{display:none}
.t5-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - var(--s-5) * 3) / 4);gap:var(--s-5)}
@media (max-width:1040px){.t5-track{grid-auto-columns:calc((100% - var(--s-5)) / 2)}}
@media (max-width:680px){.t5-track{grid-auto-columns:85%}}
.t5-track > *{scroll-snap-align:start}

/* ---------------- agent role cards ---------------- */
.t5-card{border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);padding:var(--card-pad);display:flex;flex-direction:column}
.t5-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-5)}
.t5-card-role{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--card,var(--violet))}
.t5-card-name{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3);border:1px solid var(--rule);border-radius:10px;padding:.12rem .45rem}
.t5-card-face{width:5.5rem;height:5.5rem;margin:0 auto var(--s-6)}
.t5-card p{margin:0;font-size:var(--fs-sm);line-height:1.58;color:var(--ink-2)}
.t5-card-foot{padding-top:var(--s-5);border-top:1px solid var(--rule);display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}

/* ---------------- credential chips ---------------- */
.t5-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-5);background:var(--paper);font-size:var(--fs-sm);color:var(--ink-2);white-space:nowrap;
}
.t5-chip::before{content:"";width:.55rem;height:.55rem;border-radius:2px;background:var(--dot,var(--rule-2));flex:none}

/* ---------------- agent selector + spotlight ---------------- */
.t5-picker{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-7)}
.t5-pick{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);
  border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--paper);
  transition:border-color .15s,box-shadow .15s;
}
.t5-pick:hover{border-color:var(--rule-2)}
.t5-pick[aria-pressed="true"]{border-color:var(--pick,var(--violet));box-shadow:0 0 0 1px var(--pick,var(--violet)),0 10px 30px -18px var(--pick,var(--violet))}
.t5-pick-face{width:1.8rem;height:1.8rem;flex:none}
.t5-pick b{font-size:var(--fs-sm);font-variation-settings:'wdth' 100,'wght' 650;color:var(--ink)}

.t5-spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:start}
@media (max-width:1040px){.t5-spot{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}}
.t5-spot-head{display:flex;align-items:center;gap:var(--s-5);margin-bottom:var(--s-6)}
.t5-spot-face{width:5rem;height:5rem;flex:none}
.t5-spot-name{display:block;font-size:1.65rem;font-variation-settings:'wdth' 106,'wght' 700;color:var(--ink);letter-spacing:-0.02em;line-height:1.1}
.t5-spot-role{display:block;font-family:var(--mono);font-size:var(--fs-mono-sm);line-height:1.5;color:var(--ink-3);margin-top:var(--s-2)}
.t5-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);margin:var(--s-7) 0;padding:var(--s-6) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (max-width:640px){.t5-meta{grid-template-columns:minmax(0,1fr);gap:var(--s-5)}}
.t5-meta dt{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3);margin:0 0 var(--s-2)}
.t5-meta dd{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}

/* ---------------- SLACK (drawn as Slack, keeps Slack's own metrics) ---------------- */
.t5-slack{
  font-family:var(--slack);background:#fff;border:1px solid #DDDDDD;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 20px 50px -30px rgba(20,17,31,.35);color:#1D1C1D;
}
.t5-slack-top{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-bottom:1px solid #E8E8E8;background:#fff}
.t5-slack-ch{font-weight:900;font-size:var(--fs-md);color:#1D1C1D;display:flex;align-items:center;gap:.25rem}
.t5-slack-ch b{font-weight:400;color:#616061}
.t5-slack-meta{display:flex;align-items:center;gap:var(--s-2);margin-left:auto}
.t5-slack-pill{display:inline-flex;align-items:center;gap:.3rem;border:1px solid #DDDDDD;border-radius:12px;padding:.1rem .5rem;font-size:var(--fs-mono-xs);color:#2BAC76;font-weight:700}
.t5-slack-pill::before{content:"";width:.42rem;height:.42rem;border-radius:50%;background:#2BAC76}
.t5-slack-body{padding:var(--s-2) 0}
.t5-slack-msg{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:var(--s-2);padding:var(--s-3) var(--s-4)}
.t5-slack-msg:hover{background:#F8F8F8}
.t5-slack-av{width:2.25rem;height:2.25rem;border-radius:var(--r-xs);overflow:hidden;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;color:#fff;background:#4A154B}
.t5-slack-head{display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap;margin-bottom:.1rem}
.t5-slack-who{font-weight:900;font-size:var(--fs-md);color:#1D1C1D}
.t5-slack-app{font-size:.6rem;font-weight:700;letter-spacing:.02em;background:#DDDDDD;color:#616061;border-radius:2px;padding:.05rem .22rem;position:relative;top:-1px}
.t5-slack-time{font-size:var(--fs-mono-sm);color:#616061}
.t5-slack-text{display:block;font-size:var(--fs-md);line-height:1.46;color:#1D1C1D}
.t5-slack-at{background:rgba(29,155,209,.1);color:#1264A3;border-radius:3px;padding:0 .15rem;font-weight:500}
.t5-slack-card{display:block;margin-top:var(--s-3);border:1px solid #DDDDDD;border-left:4px solid #7C3AED;border-radius:var(--r-xs);padding:var(--s-4);background:#fff;max-width:34rem}
.t5-slack-card-top{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-2);flex-wrap:wrap}
.t5-slack-card-title{font-weight:900;font-size:var(--fs-sm);color:#1D1C1D}
.t5-slack-badge{margin-left:auto;font-size:var(--fs-mono-xs);font-weight:700;color:#A15C00;background:#FDF3DC;border:1px solid #F5DFA8;border-radius:3px;padding:.08rem .35rem}
.t5-slack-card p{margin:0 0 var(--s-4);font-size:var(--fs-sm);line-height:1.5;color:#454245}
.t5-slack-acts{display:flex;gap:var(--s-2);flex-wrap:wrap}
.t5-slack-btn{font-family:var(--slack);font-size:var(--fs-xs);font-weight:700;border-radius:var(--r-xs);padding:.4rem .75rem;border:1px solid #DDDDDD;color:#1D1C1D;background:#fff}
.t5-slack-btn:hover{background:#F8F8F8}
.t5-slack-btn--go{background:#007A5A;border-color:#007A5A;color:#fff}
.t5-slack-btn--go:hover{background:#148567}
.t5-slack-compose{margin:var(--s-2) var(--s-4) var(--s-4);border:1px solid #8D8D8E;border-radius:var(--r-sm);padding:var(--s-3)}
.t5-slack-input{font-size:var(--fs-sm);color:#8D8D8E}
.t5-slack-tools{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-2);font-size:var(--fs-sm);color:#616061;font-weight:700}
.t5-slack-send{margin-left:auto;background:#007A5A;color:#fff;border-radius:var(--r-xs);width:1.6rem;height:1.6rem;display:grid;place-items:center;font-size:var(--fs-mono-sm)}

/* ---------------- MICROSOFT TEAMS (drawn as Teams) ---------------- */
.t5-teams{
  font-family:var(--teams);background:#F5F5F5;border:1px solid #E1DFDD;border-radius:var(--r-md);
  overflow:hidden;color:#242424;display:grid;grid-template-columns:4.75rem 18rem minmax(0,1fr);
  box-shadow:0 30px 70px -40px rgba(20,17,31,.45);min-height:33rem;
}
@media (max-width:1040px){.t5-teams{grid-template-columns:18rem minmax(0,1fr)}.t5-teams-rail{display:none}}
@media (max-width:760px){.t5-teams{grid-template-columns:minmax(0,1fr)}.t5-teams-list{display:none}}

.t5-teams-rail{background:#EBEBEB;border-right:1px solid #E1DFDD;padding:var(--s-3) 0;display:flex;flex-direction:column;gap:.15rem}
.t5-teams-railitem{display:grid;justify-items:center;gap:.2rem;padding:var(--s-2) 0;font-size:.625rem;color:#616161}
.t5-teams-railitem span{font-size:1.05rem;line-height:1}
.t5-teams-railitem[data-on]{color:#5B5FC7;position:relative}
.t5-teams-railitem[data-on]::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;background:#5B5FC7}

.t5-teams-list{background:#FAF9F8;border-right:1px solid #E1DFDD;display:flex;flex-direction:column;min-width:0}
.t5-teams-listhead{padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid #EDEBE9}
.t5-teams-listhead h4{margin:0 0 var(--s-3);font-size:1rem;font-weight:600;color:#242424}
.t5-teams-search{background:#fff;border:1px solid #D1D1D1;border-radius:var(--r-xs);padding:.4rem .6rem;font-size:.8125rem;color:#8A8886}
.t5-teams-people{overflow-y:auto;padding:var(--s-2) var(--s-2) var(--s-4);display:grid;gap:1px;align-content:start}
.t5-teams-person{
  display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--s-3);align-items:center;
  padding:var(--s-3);border-radius:var(--r-xs);text-align:left;width:100%;
}
.t5-teams-person:hover{background:#F0F0F0}
.t5-teams-person[aria-pressed="true"]{background:#E8EBFA}
.t5-teams-face{display:grid;position:relative;width:2rem;height:2rem;border-radius:50%;background:#EDEBE9}
/* the face box has a definite height, so let the field fill it outright —
   aspect-ratio alone left the inner grid with nothing to resolve 100% against */
.t5-teams-face .t5-field{width:100%;height:100%;aspect-ratio:auto;border-radius:50%;overflow:hidden}
.t5-teams-face .t5-field::before{display:none}
.t5-presence{position:absolute;right:-1px;bottom:-1px;width:.6rem;height:.6rem;border-radius:50%;border:2px solid #FAF9F8;background:#6BB700}
.t5-presence--busy{background:#C4314B}
.t5-presence--away{background:#FFAA44}
.t5-presence--off{background:#8A8886}
/* Scoped to .t5-teams-who on purpose. A bare `.t5-teams-person span` also matched
   the agent field's inner <span> and overrode its display:grid, collapsing every
   cell to zero height. */
.t5-teams-who b{display:block;font-size:.8125rem;font-weight:600;color:#242424;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t5-teams-who span{display:block;font-size:.75rem;color:#616161;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.t5-teams-main{background:#fff;display:flex;flex-direction:column;min-width:0}
.t5-teams-head{padding:var(--s-4) var(--s-5) 0;border-bottom:1px solid #EDEBE9}
.t5-teams-title{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-4)}
.t5-teams-title .t5-teams-face{width:2.5rem;height:2.5rem}
.t5-teams-title .t5-teams-who b{font-size:1rem}
.t5-teams-title .t5-teams-who span{font-size:.8125rem}
.t5-teams-title-end{margin-left:auto;display:flex;gap:var(--s-2);flex-wrap:wrap}
.t5-teams-chip{font-size:.75rem;font-weight:600;border-radius:var(--r-xs);padding:.25rem .55rem;background:#F0F0F0;color:#424242}
.t5-teams-chip--live{background:#E8EBFA;color:#4F52B2}
.t5-teams-tabs{display:flex;gap:var(--s-5);overflow-x:auto}
.t5-teams-tab{padding:var(--s-3) 0;font-size:.8125rem;font-weight:600;color:#616161;border-bottom:2px solid transparent;white-space:nowrap}
.t5-teams-tab[data-on]{color:#5B5FC7;border-bottom-color:#5B5FC7}
.t5-teams-feed{padding:var(--s-5);display:grid;gap:var(--s-4);align-content:start;overflow-y:auto}
.t5-teams-entry{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4);align-items:baseline}
.t5-teams-time{font-size:.75rem;color:#8A8886;font-variant-numeric:tabular-nums;white-space:nowrap}
.t5-teams-what{font-size:.8125rem;color:#242424;line-height:1.5}
.t5-teams-what em{font-style:normal;color:#616161}
.t5-teams-app{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:#616161;white-space:nowrap}
.t5-teams-app::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--app);flex:none}
.t5-teams-approve{
  display:block;margin-top:var(--s-3);border:1px solid #E1DFDD;border-left:3px solid #C4314B;
  border-radius:var(--r-xs);background:#FDF6F7;padding:var(--s-4);max-width:32rem;
}
.t5-teams-approve b{display:block;font-size:.8125rem;font-weight:600;margin-bottom:var(--s-1);color:#242424}
.t5-teams-approve p{margin:0 0 var(--s-3);font-size:.8125rem;line-height:1.5;color:#424242}
.t5-teams-acts{display:flex;gap:var(--s-2);flex-wrap:wrap}
.t5-teams-btn{font-family:var(--teams);font-size:.8125rem;font-weight:600;border-radius:var(--r-xs);padding:.4rem .8rem;border:1px solid #D1D1D1;background:#fff;color:#242424}
.t5-teams-btn--go{background:#5B5FC7;border-color:#5B5FC7;color:#fff}
.t5-teams-btn--go:hover{background:#4F52B2}

/* ---------------- comparison — ours gets the room ---------------- */
.t5-versus{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--s-6);align-items:start}
@media (max-width:900px){.t5-versus{grid-template-columns:minmax(0,1fr)}}
.t5-vs{border:1px solid var(--rule);border-radius:var(--r-md);padding:var(--card-pad);background:var(--paper)}
.t5-vs--ours{border-color:var(--violet);box-shadow:0 20px 50px -30px var(--glow);padding:var(--panel-pad)}
.t5-vs-flag{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--mono);font-size:var(--fs-mono-xs);border-radius:12px;padding:.2rem .6rem;border:1px solid var(--rule);color:var(--ink-3);margin-bottom:var(--s-4)}
.t5-vs--ours .t5-vs-flag{color:var(--violet);border-color:var(--violet-wash);background:var(--violet-wash)}
.t5-vs-flag::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:currentColor;flex:none}
.t5-vs h3{margin:0 0 var(--s-5)}
.t5-vs-row{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--rule)}
.t5-vs-mark{width:1.25rem;height:1.25rem;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-mono-xs);background:#E9F8F1;color:var(--ok-light)}
.t5-vs--old .t5-vs-mark{background:#FBEDEC;color:var(--stop-light)}
.t5-vs-label{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3);margin:0 0 var(--s-1)}
.t5-vs-val{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--ink);font-variation-settings:'wdth' 100,'wght' 600}
.t5-vs--ours .t5-vs-val{font-size:var(--fs-base)}
.t5-vs--old .t5-vs-val{color:var(--ink-2);font-variation-settings:'wdth' 100,'wght' 400}
.t5-vs-result{margin:var(--s-5) 0 0;padding-top:var(--s-5);border-top:1px solid var(--rule);font-size:var(--fs-sm);line-height:1.5;color:var(--ink-2)}

/* ---------------- security ---------------- */
.t5-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-8);align-items:stretch}
@media (max-width:900px){.t5-split{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}}
.t5-checks{display:grid;gap:var(--s-6);margin:0 0 var(--s-7)}
.t5-check{display:grid;grid-template-columns:1.25rem minmax(0,1fr);gap:var(--s-4)}
.t5-check-mark{width:1.25rem;height:1.25rem;border-radius:50%;background:#E9F8F1;color:var(--ok-light);display:grid;place-items:center;font-size:var(--fs-mono-xs)}
.t5-check p{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.t5-photo{border-radius:var(--r-lg);overflow:hidden;position:relative;min-height:24rem}
.t5-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t5-photo-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s-6);background:linear-gradient(0deg,rgba(14,10,28,.92),rgba(14,10,28,.55) 55%,transparent);color:#fff}
.t5-photo-cap h4{margin:0 0 var(--s-2);font-size:var(--fs-lg);font-variation-settings:'wdth' 104,'wght' 650;color:#fff}
.t5-photo-cap p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:rgba(255,255,255,.82)}
.t5-photo-flag{font-family:var(--mono);font-size:var(--fs-mono-xs);color:#C4B1FF;margin:0 0 var(--s-2)}

/* ---------------- lifecycle ---------------- */
.t5-rail{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.t5-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.t5-rail{grid-template-columns:minmax(0,1fr)}}
.t5-rail-cell{position:relative}
.t5-rail-cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--rule-2)}
.t5-rail-cell--live::before{background:var(--violet)}
.t5-rail-no{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--violet);margin:0 0 var(--s-4)}
.t5-rail-cell p{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}


/* ---------------- stats ---------------- */
.t5-quote{
  font-size:clamp(1.15rem,1.9vw,1.45rem);line-height:1.45;color:var(--ink);
  font-variation-settings:'wdth' 104,'wght' 600;letter-spacing:-0.015em;
  border-left:3px solid var(--violet);padding-left:var(--s-5);margin:0;max-width:46ch;
}
.t5-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.t5-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.t5-stats{grid-template-columns:minmax(0,1fr)}}
.t5-stat b{display:block;font-size:2rem;font-variation-settings:'wdth' 108,'wght' 700;color:var(--ink);letter-spacing:-0.03em;line-height:1}
.t5-stat span{display:block;margin-top:var(--s-3);font-size:var(--fs-sm);color:var(--ink);font-variation-settings:'wdth' 100,'wght' 600}
.t5-stat i{display:block;margin-top:var(--s-1);font-style:normal;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-3)}

/* ---------------- customer story ---------------- */
.t5-story{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;background:var(--paper);
  box-shadow:0 30px 70px -45px rgba(20,17,31,.4);
}
@media (max-width:900px){.t5-story{grid-template-columns:minmax(0,1fr)}}
.t5-story-photo{position:relative;min-height:28rem}
@media (max-width:900px){.t5-story-photo{min-height:18rem}}
.t5-story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t5-story-who{
  position:absolute;left:var(--s-5);bottom:var(--s-5);
  background:rgba(14,10,28,.82);color:#fff;border-radius:var(--r-sm);
  padding:var(--s-3) var(--s-4);backdrop-filter:blur(6px);
}
.t5-story-who b{display:block;font-size:var(--fs-sm);font-variation-settings:'wdth' 100,'wght' 650}
.t5-story-who span{display:block;font-family:var(--mono);font-size:var(--fs-mono-xs);color:#C4B1FF;margin-top:.15rem}
.t5-story-body{padding:var(--panel-pad);display:flex;flex-direction:column}
.t5-story-figure{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:wrap;margin-bottom:var(--s-3)}
.t5-story-figure b{font-size:clamp(2.6rem,4.5vw,3.6rem);font-variation-settings:'wdth' 108,'wght' 700;color:var(--violet);letter-spacing:-0.035em;line-height:1}
.t5-story-figure span{font-size:var(--fs-base);font-variation-settings:'wdth' 100,'wght' 600;color:var(--ink)}
.t5-story-sub{margin:0 0 var(--s-6);font-size:var(--fs-sm);color:var(--ink-3)}
.t5-story-rows{margin:var(--s-6) 0 0;display:grid}
.t5-story-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:var(--s-4);padding:var(--s-4) 0;border-top:1px solid var(--rule)}
.t5-story-row dt{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3);margin:0}
.t5-story-row dd{margin:0;font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2)}
.t5-story-row dd b{font-variation-settings:'wdth' 100,'wght' 650;color:var(--ink)}
.t5-story-apps{display:flex;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-2)}
@media (max-width:520px){.t5-story-row{grid-template-columns:minmax(0,1fr);gap:var(--s-1)}}

/* ---------------- closing ---------------- */
.t5-close{background:var(--void);color:var(--on-void-dim);padding:var(--s-10) 0;text-align:center;position:relative;overflow:hidden}
@media (max-width:900px){.t5-close{padding:var(--s-8) 0}}
.t5-close-in{position:relative;z-index:1;max-width:46rem;margin:0 auto}
.t5-close .t5-h2{color:#fff;margin:0 auto var(--s-5);max-width:none}
.t5-close .t5-lede{color:var(--on-void-dim);margin:0 auto var(--s-7)}
.t5-close-acts{display:flex;justify-content:center;gap:var(--s-4);flex-wrap:wrap}
.t5-close-checks{display:flex;justify-content:center;gap:var(--s-6);flex-wrap:wrap;margin:var(--s-7) 0 0;font-size:var(--fs-sm);color:var(--on-void-faint)}
.t5-close-checks span{display:inline-flex;align-items:center;gap:var(--s-2)}
.t5-close-checks span::before{content:"✓";color:var(--ok)}

/* ---------------- footer ---------------- */
.t5-foot{background:var(--void);color:var(--on-void-faint);padding:0 0 var(--s-6);border-top:1px solid var(--void-line-soft)}
.t5-foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s-7);padding:var(--s-8) 0 var(--s-7);border-bottom:1px solid var(--void-line-soft)}
@media (max-width:900px){.t5-foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-6)}}
@media (max-width:560px){.t5-foot-top{grid-template-columns:minmax(0,1fr)}}
.t5-foot h4{margin:0 0 var(--s-4);font-size:var(--fs-xs);font-variation-settings:'wdth' 100,'wght' 650;color:#fff}
.t5-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);font-size:var(--fs-sm);color:var(--on-void-dim)}
.t5-foot ul a:hover{color:#fff}
.t5-foot-blurb{font-size:var(--fs-sm);line-height:1.6;color:var(--on-void-faint);max-width:34ch;margin:var(--s-4) 0 0}
.t5-foot-blurb--tight{margin-top:0}
.t5-foot-runtime{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--on-void-faint);margin:var(--s-4) 0 0}
.t5-foot-meta{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;align-items:center;padding-top:var(--s-6);font-size:var(--fs-xs)}
.t5-foot-meta p{margin:0}
.t5-flag{font-family:var(--mono);font-size:var(--fs-mono-xs);line-height:1.5;color:var(--on-void-faint);border:1px solid var(--void-line-soft);border-radius:var(--r-sm);padding:var(--s-3);max-width:62ch;margin:var(--s-6) 0 0}

/* ---------------- motion ---------------- */
/* One orchestrated moment: the console finishes its work, then stops at the human.
   CSS only, so it needs no script and survives client-side navigation. */
@media (prefers-reduced-motion:no-preference){
  .t5-motion .t5-step{opacity:0;transform:translateY(6px);animation:t5-step-in .42s ease forwards}
  .t5-motion .t5-step:nth-child(1){animation-delay:.32s}
  .t5-motion .t5-step:nth-child(2){animation-delay:.6s}
  .t5-motion .t5-step:nth-child(3){animation-delay:.88s}
  @keyframes t5-step-in{to{opacity:1;transform:none}}
}

/* ---------------- dialog ---------------- */
.t5 dialog{border:0;border-radius:var(--r-md);padding:var(--panel-pad);max-width:27rem;background:var(--paper);box-shadow:0 40px 80px -30px rgba(20,17,31,.5)}
.t5 dialog::backdrop{background:rgba(14,10,28,.6)}
.t5 dialog h2{margin:0 0 var(--s-2);font-size:1.15rem;font-variation-settings:'wdth' 105,'wght' 700;color:var(--ink);letter-spacing:-0.015em}
.t5 dialog p{margin:0 0 var(--s-5);font-size:var(--fs-md);line-height:1.6;color:var(--ink-2)}

/* ---------------- bottom-pinned card footers ----------------
   These must outrank the `.t5-component p{margin:0}` resets above, or
   margin-top:auto silently loses and the footer floats mid-card. */
.t5-cell .t5-pillar-foot,.t5-card .t5-card-foot,.t5-story-body .t5-push{margin-top:auto}

/* ---------------- utilities (last, so they win on source order) ---------------- */
.t5-mt-4{margin-top:var(--s-4)}
.t5-mt-5{margin-top:var(--s-5)}
.t5-mt-6{margin-top:var(--s-6)}
.t5-mt-7{margin-top:var(--s-7)}
.t5-mt-8{margin-top:var(--s-8)}
.t5-mb-4{margin-bottom:var(--s-4)}
.t5-mb-5{margin-bottom:var(--s-5)}
.t5-mb-6{margin-bottom:var(--s-6)}
.t5-push{margin-top:auto}
/* also centres the box itself — a centred .t5-small still has a 62ch max-width,
   which otherwise leaves it centred inside a left-aligned column */
.t5-center{text-align:center;margin-left:auto;margin-right:auto}
.t5-center .t5-small,.t5-center .t5-lede{margin-left:auto;margin-right:auto}


/* Expansion path: one agent → a managed workforce. */
.t5-expand{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-5) 0 0;padding:0;font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-2)}
.t5-expand span{padding:var(--s-2) var(--s-3);border:1px solid var(--rule);border-radius:999px}
.t5-expand span+span::before{content:"→";margin-right:var(--s-3);color:var(--ink-3)}

/* Technology partner logos in the trust marquee. */
.t5-plogo{height:2rem;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .2s,filter .2s}
.t5-plogo:hover{filter:none;opacity:1}
/* Credentials banner, mirroring the /intelligence layout strip. */
.t5-cred{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s-6);text-align:center}
@media (min-width:760px){.t5-cred{flex-wrap:nowrap;text-align:left}}
.t5-cred-badges{display:flex;align-items:center;gap:var(--s-4);flex:none}
.t5-cred-badges img{height:4.75rem;width:auto;display:block}
.t5-cred-sec{border-top:1px solid var(--void-line-soft)}
.t5-cred-badges img{border-radius:.375rem}
.t5-sec--dark .t5-small a{color:#fff}
.t5-cred .t5-small{max-width:44ch}
/* Who does what, under the lifecycle rail. */
.t5-roles{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--rule)}
@media (max-width:760px){.t5-roles{grid-template-columns:minmax(0,1fr)}}
.t5-role h4{margin:0 0 var(--s-2);font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--ink-3)}
.t5-role--us h4{color:var(--violet)}
.t5-role p{margin:0;font-size:var(--fs-md);line-height:1.55;color:var(--ink-2);max-width:56ch}
.t5-role .t5-expand{margin-top:var(--s-4)}
/* Footer NAP, badges, and legal links. */
.t5-foot-nap{display:grid;gap:var(--s-2);margin-top:var(--s-5);font-style:normal;font-size:var(--fs-sm);line-height:1.5;color:var(--on-void-dim)}
.t5-foot-nap a:hover,.t5-foot-meta a:hover,.t5-foot-more:hover{color:#fff}
.t5-foot-badges{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-5)}
.t5-foot-badges img{height:3.5rem;width:auto;display:block;border-radius:.375rem}
.t5-foot-more{display:inline-block;margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--on-void-dim)}
.t5-foot-meta a{color:inherit}