/* MUVES page template (round 5). One container, one reading width, every text block starts at the same
   left edge, two band layouts (stack and 4/8 split), three breakpoints (640 / 1024 / 1280), bubbly cards.
   Loaded after the older layers on every page; the shared header and footer live here too. */
:root{
  --shell-w:1200px; --gutter:clamp(16px,4vw,40px); --measure:68ch;
  --bg:#0e1014; --bg-alt:#15181e; --card:#1c2027; --card-2:#232831; --line:#2a2f38; --line-2:#3a404b;
  --text:#e6e8ec; --dim:#b9bfca; --white:#fff; --red:#e5484d; --red-bright:#ff6b6f;
  --radius:26px; --radius-sm:16px;
}
.t .shell,.top.mm .shell,.ft .shell,.crumbs.shell{width:min(var(--shell-w),100% - 2*var(--gutter));margin-inline:auto;padding-inline:0}

/* ---------- header: desktop mega-menu ---------- */
.top.mm{position:sticky;top:0;z-index:60;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid transparent}
.top.mm::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,16,20,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.top.mm.scrolled{border-bottom-color:var(--line)}
.top.mm .nav{display:flex;align-items:center;gap:28px;height:72px}
.top.mm .brand{display:flex;align-items:center;gap:10px;flex:none}
.mm-bar{display:flex;align-items:center;gap:6px;margin-left:auto}
.mm-item{position:relative;display:flex;align-items:center}
.mm-top{color:var(--text);font-weight:600;font-size:.98rem;padding:10px 4px 10px 12px;border-radius:999px}
.mm-top[aria-current="true"]{color:#fff;position:relative}
.mm-top[aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--red)}
.mm-btn{background:none;border:0;color:var(--dim);padding:10px 10px 10px 2px;cursor:pointer;display:grid;place-items:center;border-radius:999px}
.mm-btn .chev{transition:transform .2s}
.mm-item.open .mm-btn .chev{transform:rotate(180deg)}
.mm-item:hover .mm-top,.mm-item.open .mm-top{color:#fff}
.mm-book{flex:none;margin-left:12px}
.mm-panel{position:fixed;left:0;right:0;top:72px;display:none;background:#14171c;border-top:1px solid var(--line);border-bottom:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.mm-item.open .mm-panel{display:block}
.mm-in{width:min(var(--shell-w),100% - 2*var(--gutter));margin:0 auto;padding:36px 0 40px;display:grid;grid-template-columns:260px 1fr;gap:48px}
.mm-eyebrow{font-size:.875rem;font-weight:600;color:var(--red-bright);margin:0 0 8px}
.mm-lead{font-size:1.15rem;line-height:1.4;color:#fff;font-weight:600;margin:0 0 18px;letter-spacing:-.01em}
.mm-all{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600}
.mm-cta{display:block;margin-top:14px;color:var(--dim);font-size:.95rem}
.mm-all:hover,.mm-cta:hover{color:var(--red-bright)}
.mm-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.mm-h{display:block;color:#fff;font-weight:650;font-size:.98rem;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mm-col ul,.mm-list{list-style:none;margin:0;padding:0}
.mm-col li a{display:block;color:var(--dim);font-size:.95rem;padding:6px 0;line-height:1.35}
.mm-col li a:hover,.mm-h:hover{color:#fff}
.mm-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 24px;align-content:start}
.mm-list a{display:block;padding:12px 16px;border-radius:var(--radius-sm)}
.mm-list a:hover{background:var(--card)}
.mm-list b{display:block;color:#fff;font-weight:600;font-size:.98rem}
.mm-list span{display:block;color:var(--dim);font-size:.875rem;margin-top:2px}
@media (max-width:1279px){.mm-cols{grid-template-columns:repeat(3,1fr);row-gap:28px}.mm-in{grid-template-columns:220px 1fr}}

/* ---------- header: phone drill-down ---------- */
.mn-open{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px}
.mn-open span{display:block;width:22px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.mn-on .mn-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mn-on .mn-open span:nth-child(2){opacity:0}
.mn-on .mn-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mn{position:fixed;top:72px;left:0;right:0;bottom:0;height:calc(100dvh - 72px);background:var(--bg);overflow:hidden;z-index:59}
.mn-level{position:absolute;inset:0;overflow-y:auto;padding:12px var(--gutter) 40px}
.mn ul{list-style:none;margin:0;padding:0}
.mn-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px;padding:0 4px;border:0;border-bottom:1px solid var(--line);background:none;color:#fff;font:inherit;font-size:1.15rem;font-weight:600;text-align:left;cursor:pointer}
.mn-row svg{color:var(--dim)}
.mn-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;border:0;background:none;color:var(--dim);font:inherit;font-weight:600;cursor:pointer;padding:0}
.mn-title{font-size:.875rem;font-weight:600;color:var(--red-bright);margin:8px 0 4px}
.mn-foot{margin-top:28px;display:grid;gap:18px}
.mn-foot .btn{justify-content:center}
.mn-foot p{color:var(--dim);line-height:1.8;margin:0}
.mn-foot a:not(.btn){color:#fff}
@media (max-width:1023px){
  .mm-bar,.mm-book{display:none}
  .mn-open{display:flex}
}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.875rem;color:var(--dim);padding-top:28px}
.crumbs a{color:var(--dim)}.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:#fff}
.crumbs+.t-hero{padding-top:28px}

/* ---------- type and bands ---------- */
.t-eyebrow{display:block;font-size:.875rem;font-weight:600;color:var(--red-bright);margin:0 0 12px;letter-spacing:0}
.t-h1{font-size:clamp(2.25rem,4.5vw,3.75rem);line-height:1.05;letter-spacing:-.035em;font-weight:750;color:#fff;margin:0;max-width:22ch}
.t-h1 .soft,.t-h2 .soft{color:#aeb4bf}
.t-dek{font-size:clamp(1.125rem,1.6vw,1.3rem);line-height:1.5;color:var(--text);max-width:var(--measure);margin:18px 0 0}
.t-h2{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.03em;font-weight:720;color:#fff;margin:0;max-width:28ch}
.t-h3{font-size:1.25rem;line-height:1.25;font-weight:650;color:#fff;margin:0}
.t-lede{font-size:1.125rem;line-height:1.6;color:var(--dim);max-width:var(--measure);margin:16px 0 0}
.t-hero{padding:72px 0 64px;position:relative}
.t-hero .t-actions{margin-top:28px}
.t-actions{display:flex;flex-wrap:wrap;gap:12px}
.t-band{padding:96px 0;background:var(--bg);position:relative}
.t-band.t-alt{background:var(--bg-alt)}
.t-head{margin-bottom:40px}
.t-head .t-h2+.t-lede{margin-top:16px}
.t-split{display:grid;grid-template-columns:4fr 8fr;gap:24px 48px;align-items:start}
.t-split>.t-label .t-h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.t-split+.t-split{margin-top:64px}
@media (max-width:1023px){.t-split{grid-template-columns:1fr}}
@media (max-width:640px){.t-band{padding:64px 0}.t-hero{padding:48px 0 48px}}

/* ---------- prose (reading column) ---------- */
.t-prose{max-width:var(--measure);font-size:1.0625rem;line-height:1.7;color:var(--text)}
.t-prose p{margin:0 0 1em}
.t-prose h2{font-size:1.6rem;letter-spacing:-.02em;color:#fff;margin:2em 0 .6em;line-height:1.2}
.t-prose h3{font-size:1.2rem;color:#fff;margin:1.6em 0 .5em}
.t-prose ul,.t-prose ol,.t-bullets{margin:0 0 1em;padding:0;list-style:none}
.t-prose li,.t-bullets li{position:relative;padding-left:22px;margin-bottom:8px}
.t-prose ul li::before,.t-bullets li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--red)}
.t-prose ol{counter-reset:o}.t-prose ol li{counter-increment:o}
.t-prose ol li::before{content:counter(o);position:absolute;left:0;top:0;color:var(--red-bright);font-weight:700;font-size:.95em}
.t-prose a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.t-prose strong{color:#fff}
.t-box{background:var(--card);border-radius:var(--radius);padding:26px 28px;margin:28px 0}
.t-box>.t-h3{margin-bottom:10px}
.t-box p:last-child,.t-box ul:last-child{margin-bottom:0}
.t-box.red{background:rgba(229,72,77,.1);box-shadow:inset 3px 0 0 var(--red)}

/* ---------- cards ---------- */
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.t-grid.two{grid-template-columns:repeat(2,1fr)}
.t-grid.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:1023px){.t-grid,.t-grid.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.t-grid,.t-grid.two,.t-grid.four{grid-template-columns:1fr}}
.t-card{display:flex;flex-direction:column;background:var(--card);border-radius:var(--radius);overflow:hidden;color:inherit;transition:transform .2s,background .2s;border:1px solid rgba(255,255,255,.04)}
a.t-card:hover{transform:translateY(-3px);background:var(--card-2)}
.t-card-media{aspect-ratio:16/10;background:#101318;overflow:hidden;margin:10px 10px 0;border-radius:calc(var(--radius) - 8px)}
.t-card-media img,.t-card-media video{width:100%;height:100%;object-fit:cover;display:block}
.t-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.t-card-body p{margin:0;color:var(--dim);line-height:1.55}
.t-card .t-eyebrow{margin:0}
.t-more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:600;font-size:.95rem}
a.t-card:hover .t-more{color:var(--red-bright)}
.t-card ul{margin:6px 0 0;padding:0;list-style:none}
.t-card ul li{padding:6px 0 6px 20px;position:relative;color:var(--text);font-size:.95rem;border-top:1px solid var(--line)}
.t-card ul li::before{content:"";position:absolute;left:2px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.t-card ul a{color:var(--text)}.t-card ul a:hover{color:#fff}

/* folder contents: rows that link to child pages */
.t-rows{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width:640px){.t-rows{grid-template-columns:1fr}}
.t-row{display:flex;align-items:center;gap:16px;padding:20px 22px;background:var(--card);border-radius:var(--radius-sm);color:inherit;transition:background .2s}
.t-row:hover{background:var(--card-2)}
.t-row>div{flex:1}
.t-row b{display:block;color:#fff;font-size:1.05rem;font-weight:650}
.t-row span{display:block;color:var(--dim);font-size:.95rem;margin-top:3px}
.t-row svg{flex:none;color:var(--red-bright)}

/* media frame (film or picture) */
.t-media{border-radius:var(--radius);overflow:hidden;background:#101318;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.t-media.wide{aspect-ratio:16/9}
.t-media video,.t-media img{width:100%;height:100%;object-fit:cover;display:block}

/* facts list (case pages) */
.t-facts{background:var(--card);border-radius:var(--radius);padding:24px 26px;margin:0}
.t-facts div{padding:10px 0;border-top:1px solid var(--line)}
.t-facts div:first-child{border-top:0;padding-top:0}
.t-facts dt{font-size:.875rem;color:var(--dim);margin-bottom:2px}
.t-facts dd{margin:0;color:#fff;font-weight:600}
.t-facts dd a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.t-figs{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0 0}
.t-fig{background:var(--card);border-radius:var(--radius-sm);padding:16px 20px;min-width:160px}
.t-fig b{display:block;font-size:1.6rem;color:#fff;letter-spacing:-.02em}
.t-fig span{color:var(--dim);font-size:.9rem}

/* chips (tools, filters) */
.t-chips{display:flex;flex-wrap:wrap;gap:10px}
.t-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--card);color:var(--text);font-size:.92rem;font-weight:550;border:1px solid transparent}
.t-chip img{width:18px;height:18px}
button.t-chip{cursor:pointer;font:inherit;font-size:.92rem}
button.t-chip[aria-pressed="true"]{background:#fff;color:#111}
.t-chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.t-chips.scroll::-webkit-scrollbar{display:none}

/* FAQ */
.t-faq{max-width:var(--measure)}
.t-faq details{background:var(--card);border-radius:var(--radius-sm);padding:0 24px;margin-bottom:10px}
.t-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;color:#fff;font-weight:600;font-size:1.05rem}
.t-faq summary::-webkit-details-marker{display:none}
.t-faq summary::after{content:"+";color:var(--red-bright);font-size:1.4rem;line-height:1}
.t-faq details[open] summary::after{content:"–"}
.t-faq details p{margin:0 0 20px;color:var(--dim);line-height:1.65}

/* sub-nav on hub pages */
.t-subnav{position:sticky;top:72px;z-index:20;background:rgba(14,16,20,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.t-subnav .shell{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.t-subnav .shell::-webkit-scrollbar{display:none}
.t-subnav a{flex:none;padding:8px 14px;border-radius:999px;color:var(--dim);font-weight:600;font-size:.95rem}
.t-subnav a:hover{color:#fff;background:var(--card)}
html:has(.t-subnav){scroll-padding-top:140px}

/* CTA band */
.t-cta{padding:96px 0;position:relative}
.t-cta .t-h2{max-width:20ch}
.t-cta .t-actions{margin-top:28px}

/* author line (articles) */
.t-author{display:flex;align-items:center;gap:12px;margin-top:24px;color:var(--dim);font-size:.95rem}
.t-author img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.t-author b{color:#fff;display:block}

/* ---------- footer ---------- */
.ft{background:#0b0d10;border-top:1px solid var(--line);padding:72px 0 32px;color:var(--dim)}
.ft-top{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:32px}
.ft-logo{display:inline-flex;align-items:center;gap:10px}.ft-logo img:first-child{width:40px;height:40px}.ft-logo img:last-child{width:120px;height:auto}
.ft-brand p{color:#fff;font-weight:600;margin:14px 0 18px}
.ft-h{color:#fff;font-weight:650;font-size:.95rem;margin:0 0 12px}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col li a{display:block;padding:5px 0;color:var(--dim);font-size:.92rem}
.ft-col li a:hover,.ft-contact a:hover,.ft-legal a:hover{color:#fff}
.ft-contact{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.92rem}
.ft-contact p{margin:0}.ft-contact a{color:var(--text)}
.ft-legal{margin-top:18px;display:flex;gap:20px;font-size:.875rem}
.ft-legal a{color:var(--dim)}
@media (max-width:1023px){.ft-top{grid-template-columns:repeat(3,1fr)}.ft-brand{grid-column:1/-1}}
@media (max-width:640px){.ft-top{grid-template-columns:1fr 1fr}}

/* the old header/footer styles must not leak into the new ones */
.top.mm .nav-links,.top.mm .menu{display:none!important}

/* Home: six service cards in a 3 x 2 grid */
.pains.six .pain,.pains.six .pain:nth-child(-n+2){grid-column:span 2}
@media (max-width:980px){.pains.six .pain,.pains.six .pain:nth-child(-n+2),.pains.six .pain:last-child{grid-column:span 1;display:flex}.pains.six .pain:last-child .pic{aspect-ratio:4/3;border-right:0;border-bottom:1px solid var(--line)}}
#industries .t-rows{margin-top:28px}
.pains.six .pain:first-child .pic img{scale:1.32;transform-origin:62% 18%}

/* Filters: a hidden card must stay hidden whatever its display rule */
[data-tags][hidden]{display:none!important}
/* Films the browser refused to play: show the poster picture in the same box, never a play button */

.t-media,.t-card-media,.case-card .media,.cs-mini .m{position:relative}

/* Round 6 mega-menu: seven service groups in four columns, industries as a three-column list */
.mm-cols{grid-template-columns:repeat(4,1fr);row-gap:30px}
.mm-col .mm-h{font-size:1rem}
.mm-more{color:var(--red-bright)!important;display:inline-flex!important;align-items:center;gap:6px;font-weight:600}
#mm-ind .mm-list{grid-template-columns:repeat(3,1fr);gap:2px 18px}
#mm-ind .mm-list a{padding:9px 14px}
#mm-ind .mm-list span{display:none}
@media (max-width:1279px){.mm-cols{grid-template-columns:repeat(4,1fr)}}

/* ===================================================================== round 6 components */

/* sticky jump bar: the section you are reading is marked (scroll-spy in nav.js) */
.t-subnav a[aria-current="true"]{color:#fff;background:var(--card-2)}

/* swipe rail (series, related, featured rows): next card peeks, arrows + counter, no auto-rotate */
.t-rail{position:relative}
.t-rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.t-rail-head .t-h3{margin:0}
.t-rail-head p{color:var(--dim);margin:6px 0 0;max-width:56ch}
.t-rail-ctl{display:flex;align-items:center;gap:8px;flex:none}
.t-rail-ctl .n{color:var(--dim);font-size:.875rem;font-variant-numeric:tabular-nums;min-width:44px;text-align:right;margin-right:6px}
.t-rail-ctl button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer}
.t-rail-ctl button:hover:not(:disabled){background:var(--card-2)}
.t-rail-ctl button:disabled{opacity:.35;cursor:default}
.t-rail-ctl a{color:#fff;font-weight:600;font-size:.95rem;margin-right:12px;white-space:nowrap}
.t-rail-ctl a:hover{color:var(--red-bright)}
.t-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,calc((100% - 48px) / 3.3));gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding-bottom:4px}
.t-track::-webkit-scrollbar{display:none}
.t-track>*{scroll-snap-align:start}
.t-track:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:8px}
@media (max-width:640px){.t-track{grid-auto-columns:82%;gap:14px}.t-rail-ctl button{display:none}}

/* insight card: cover graphic, format | date, title, one line */
.t-ins{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s}
.t-ins:hover{border-color:var(--line-2)}
.t-ins .cov{aspect-ratio:16/10;background:#101318;overflow:hidden}
.t-ins .cov img{width:100%;height:100%;object-fit:cover;display:block}
.t-ins .bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.t-ins .meta{font-size:.8125rem;color:var(--dim);letter-spacing:.02em}
.t-ins .meta b{color:var(--red-bright);font-weight:600}
.t-ins h3{font-size:1.125rem;line-height:1.3;color:#fff;margin:0}
.t-ins p{color:var(--dim);font-size:.95rem;line-height:1.5;margin:0}

/* numbered list (most popular) */
.t-top{list-style:none;margin:0;padding:0;counter-reset:t}
.t-top li{counter-increment:t;border-top:1px solid var(--line)}
.t-top a{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;color:#fff;font-weight:600;line-height:1.35}
.t-top a::before{content:counter(t,decimal-leading-zero);color:var(--red-bright);font-variant-numeric:tabular-nums}
.t-top a:hover{color:var(--red-bright)}

/* At a glance (case studies) */
.t-glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.t-glance>div{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.t-glance dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:0 0 6px}
.t-glance dd{margin:0;color:#fff;font-weight:600;line-height:1.4}
.t-glance dd .t-chip{margin:4px 4px 0 0}

/* architecture / flow diagram wrapper: inline SVG drawn per page */
.t-arch{background:linear-gradient(180deg,#14171d,#101318);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(16px,3vw,32px);overflow-x:auto}
.t-arch svg{display:block;width:100%;height:auto;min-width:560px}
.t-arch figcaption,.t-exhibit figcaption{font-size:.875rem;color:var(--dim);margin-top:14px}
.t-arch figcaption b,.t-exhibit figcaption b{color:#fff}

/* numbered components (what we built) */
.t-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.t-steps>li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:18px;padding:24px 0;border-top:1px solid var(--line)}
.t-steps>li::before{content:counter(s,decimal-leading-zero);font-weight:700;color:var(--red-bright);font-size:1.05rem;font-variant-numeric:tabular-nums}
.t-steps h3{margin:0 0 6px;font-size:1.125rem;color:#fff}
.t-steps p{margin:0;color:var(--dim);line-height:1.6}

/* compare table (before / after, options) */
.t-compare{width:100%;border-collapse:collapse;font-size:.98rem}
.t-compare th,.t-compare td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.t-compare th{color:var(--dim);font-size:.8125rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.t-compare td:first-child{color:#fff;font-weight:600}
.t-compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}

/* industry A to Z grid */
.t-az{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.t-az a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:18px 0;border-top:1px solid var(--line);color:#fff;font-weight:600;font-size:1.0625rem}
.t-az a span{color:var(--dim);font-weight:400;font-size:.9rem;text-align:right}
.t-az a:hover{color:var(--red-bright)}
@media (max-width:1024px){.t-az{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.t-az{grid-template-columns:1fr}.t-az a span{display:none}}

/* page illustration (one per page, made for that page) */
.t-ill{border-radius:var(--radius);overflow:hidden;background:#101318;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.t-ill img{width:100%;height:100%;object-fit:cover;display:block}
.t-ill.wide{aspect-ratio:16/9}

/* ---------- articles: one reading column, real typographic rhythm ---------- */
.t-article{padding:56px 0 24px}
.t-article .col{max-width:42rem;margin:0}
.t-article .kicker{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.t-article .kicker a{color:var(--red-bright)}
.t-article h1{font-size:clamp(2.1rem,4.4vw,3.25rem);line-height:1.08;letter-spacing:-.025em;color:#fff;margin:0;max-width:22ch}
.t-article .dek{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.5;color:var(--dim);margin:18px 0 0}
.t-article .meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.875rem;color:var(--dim);margin:22px 0 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.t-article .meta span+span::before{content:"·";margin-right:10px}
.t-takeaways{margin:32px 0 8px;padding:20px 0 4px;border-top:1px solid var(--line-2)}
.t-takeaways p.lbl{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 0 10px;font-weight:600}
.t-takeaways ul{margin:0;padding:0;list-style:none}
.t-takeaways li{position:relative;padding-left:20px;margin:0 0 .55em;color:#fff;line-height:1.5}
.t-takeaways li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.t-body{font-size:1.1875rem;line-height:1.65;color:var(--text)}
.t-body>*{max-width:42rem}
.t-body p{margin:0 0 1em}
.t-body h2{font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.2;letter-spacing:-.015em;color:#fff;margin:2.4em 0 .55em}
.t-body h3{font-size:1.25rem;line-height:1.3;color:#fff;margin:1.8em 0 .4em}
.t-body ul,.t-body ol{margin:0 0 1em;padding:0;list-style:none}
.t-body li{position:relative;padding-left:22px;margin-bottom:.45em}
.t-body ul li::before{content:"";position:absolute;left:3px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.t-body ol{counter-reset:o}.t-body ol li{counter-increment:o}
.t-body ol li::before{content:counter(o) ".";position:absolute;left:0;color:var(--red-bright);font-weight:700}
.t-body a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
.t-body strong{color:#fff}
.t-body blockquote{margin:1.6em 0;padding:0 0 0 22px;border-left:2px solid var(--red);font-size:1.4rem;line-height:1.4;color:#fff;letter-spacing:-.01em}
.t-exhibit{margin:2em 0;max-width:56rem!important}
.t-exhibit .ex-h{font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.t-exhibit .ex-h b{color:#fff;text-transform:none;letter-spacing:0;font-size:1rem;display:block;margin-top:4px}
.t-article-end{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);max-width:42rem}
.t-article-end .series-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.t-article-end .series-nav a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius-sm);color:#fff;font-weight:600;line-height:1.35}
.t-article-end .series-nav a span{display:block;color:var(--dim);font-weight:400;font-size:.8125rem;margin-bottom:4px}
.t-article-end .series-nav a:hover{border-color:var(--line-2)}
.t-article-end .series-nav a.next{text-align:right}
@media (max-width:640px){.t-body{font-size:1.0625rem}.t-article{padding-top:32px}.t-article-end .series-nav{grid-template-columns:1fr}}
figure.t-arch,figure.t-exhibit{margin-left:0;margin-right:0}
@media (max-width:640px){.t-rail-head{flex-direction:column;align-items:flex-start;gap:12px}.t-rail-ctl{width:100%;justify-content:space-between}}
/* Home: seven practice cards (4 + 3) */
.pains.seven{grid-template-columns:repeat(12,1fr)}
.pains.seven .pain,.pains.seven .pain:nth-child(-n+2){grid-column:span 3}
.pains.seven .pain:nth-child(n+5){grid-column:span 4}
@media (max-width:1100px){.pains.seven{grid-template-columns:1fr 1fr}.pains.seven .pain,.pains.seven .pain:nth-child(-n+2),.pains.seven .pain:nth-child(n+5),.pains.seven .pain:last-child{grid-column:span 1;display:flex}.pains.seven .pain:last-child{grid-column:span 2}.pains.seven .pain:last-child .pic{aspect-ratio:16/7;border-right:0}}
@media (max-width:640px){.pains.seven{grid-template-columns:1fr}.pains.seven .pain:last-child{grid-column:span 1}.pains.seven .pain:last-child .pic{aspect-ratio:4/3}}
#industries .t-az{margin-top:28px}
.t-split>div{min-width:0}
.t-glance .t-chip{background:var(--card-2)}

/* Films: the still picture sits ON TOP of the film and only fades away while the film is really playing. Safari
   draws its play button inside the video box even when the video is transparent, so the picture must cover it. */
.v-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:2;opacity:1;transition:opacity .4s ease}
.v-still.off{opacity:0}
video[data-autoplay]{position:relative;z-index:1;pointer-events:none}
.hero2-media .v-still{object-position:center}
.hero2-media video[data-autoplay]{position:absolute}

/* ===================================================================== round 7: icons and colour */
/* Content colours: the site UI stays graphite and red; content (icons, illustrations) may use the wider palette */
:root{--c-red:#ff6b6f;--c-coral:#ff8a5c;--c-amber:#ffc24b;--c-lime:#b4e05a;--c-green:#4fd18b;--c-teal:#3fd0c9;--c-sky:#5ac8fa;--c-blue:#6e8bff;--c-violet:#a78bfa;--c-pink:#f472b6;--c-sand:#e8c99b;--c-slate:#aab4c3}
.t-ico{--ic:var(--c-red);display:inline-grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;color:var(--ic);background:color-mix(in srgb,var(--ic) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ic) 30%,transparent)}
.t-ico svg{width:22px;height:22px;stroke-width:2}
.t-ico.lg{width:60px;height:60px;border-radius:18px}.t-ico.lg svg{width:28px;height:28px}
.t-ico.sm{width:32px;height:32px;border-radius:10px}.t-ico.sm svg{width:16px;height:16px}
.c-red{--ic:var(--c-red)}.c-coral{--ic:var(--c-coral)}.c-amber{--ic:var(--c-amber)}.c-lime{--ic:var(--c-lime)}.c-green{--ic:var(--c-green)}.c-teal{--ic:var(--c-teal)}.c-sky{--ic:var(--c-sky)}.c-blue{--ic:var(--c-blue)}.c-violet{--ic:var(--c-violet)}.c-pink{--ic:var(--c-pink)}.c-sand{--ic:var(--c-sand)}.c-slate{--ic:var(--c-slate)}
/* feature grid: icon + title + line */
.t-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.t-feats.two{grid-template-columns:repeat(2,1fr)}.t-feats.four{grid-template-columns:repeat(4,1fr)}
.t-feat{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.t-feat h3{margin:4px 0 0;font-size:1.0625rem;color:#fff;line-height:1.3}
.t-feat p{margin:0;color:var(--dim);font-size:.96rem;line-height:1.55}
@media (max-width:1024px){.t-feats,.t-feats.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.t-feats,.t-feats.two,.t-feats.four{grid-template-columns:1fr}}
/* icon list: each item led by its own small icon tile */
.t-ilist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.t-ilist li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.t-ilist li b{display:block;color:#fff}
.t-ilist li span.d{color:var(--dim);font-size:.96rem;line-height:1.5}
/* spot illustration: a smaller, more playful picture beside text */
.t-spot{border-radius:22px;overflow:hidden;background:#101318;aspect-ratio:4/3}
.t-spot img{width:100%;height:100%;object-fit:cover;display:block}
.t-spot.sq{aspect-ratio:1/1}
.t-ilist .d a,.t-feat p a{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:3px}
/* icon tiles keep their own look inside older components */
.t-row .t-ico,.t-row span.t-ico{display:inline-grid;color:var(--ic);background:color-mix(in srgb,var(--ic) 16%,transparent);margin:0}
.t-row .t-ico svg{color:var(--ic)}
.t-prose .t-ilist li{padding-left:0}.t-prose .t-ilist li::before{content:none}
.t-prose .t-feats{margin:1em 0}
.t-chip img[src$="notion.svg"],.t-chip img[src$="github.svg"],.t-chip img[src$="square.svg"]{filter:invert(1)}
.t-az a span.t-ico{display:inline-grid;color:var(--ic);font-size:inherit;text-align:center}
@media (max-width:640px){.t-az a span.t-ico{display:inline-grid}}
.t-compare .t-ico{vertical-align:middle;margin-right:10px}

/* ===================================================================== round 8: simpler, calmer text */
/* icons: only the few marked to keep, drawn as plain line icons in the site colours, no tinted box */
.t-ico{width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;border-radius:0!important;color:var(--dim)!important}
.t-ico svg{width:22px;height:22px;stroke-width:1.6}
/* layouts that used to lead with an icon */
.t-ilist li{display:block}
.t-feat{gap:8px}
/* no small coloured label sitting on top of every heading */
.t-hero .t-eyebrow,.t-head .t-eyebrow,.t-label .t-eyebrow,.t-split>.t-eyebrow,section>.shell>.t-eyebrow,.t-cta .t-eyebrow{display:none}
/* links in text: no red underline, just white text that brightens */
.t-prose a,.t-body a,.t-facts dd a,.t-ilist .d a,.t-feat p a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28)}
.t-prose a:hover,.t-body a:hover,.t-facts dd a:hover,.t-ilist .d a:hover,.t-feat p a:hover{border-bottom-color:#fff}
/* callouts: no coloured bar down the side */
.t-box.red{box-shadow:none;background:var(--card)}
/* services mega-menu: all seven groups side by side with every service listed */
#mm-services .mm-in{grid-template-columns:1fr}
#mm-services .mm-intro{display:none}
#mm-services .mm-cols{grid-template-columns:repeat(7,1fr);gap:18px}
#mm-services .mm-col li a{font-size:.875rem;padding:5px 0}
#mm-services .mm-col .mm-h{font-size:.92rem;line-height:1.25;min-height:2.5em;display:block}
@media (max-width:1279px){#mm-services .mm-cols{grid-template-columns:repeat(4,1fr)}}

/* ===================================================================== round 9: type, banners, ambient graphics */
/* Type: Mona Sans reads, Hubot Sans (its wider sibling) speaks. One scale, tighter measures, calmer weights. */
:root{--measure:62ch;--pc:#e5484d;--sc:#a78bfa;
  --fs-h1:clamp(2.35rem,1.35rem + 3.3vw,4rem);--fs-h2:clamp(1.8rem,1.15rem + 1.9vw,2.7rem);--fs-h3:clamp(1.15rem,1.05rem + .3vw,1.3rem)}
body{font-family:var(--sans);font-weight:400;font-size:1.0625rem;line-height:1.6;letter-spacing:-.004em;font-kerning:normal;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.t-h1,.t-h2,.t-h3,.h1,.h2,.big-title,.mm-lead,.t-fig b,.fact b,.os-copy h3,.story h3,.how3 h3,.t-faq summary,.t-row b,.t-ins h3,.t-feat h3,.t-steps h3,.t-card-body h3,.t-az a,.mm-col .mm-h,.cform .h2,.svc-head .h2,.why .h2{font-family:var(--display);font-stretch:104%}
h1,.t-h1,.h1,.big-title,.t-article h1{font-stretch:110%;font-weight:660;letter-spacing:-.012em;line-height:1.04;text-wrap:balance}
h2,.t-h2,.h2{font-stretch:108%;font-weight:640;letter-spacing:-.01em;line-height:1.1;text-wrap:balance}
h3,.t-h3{font-weight:620;letter-spacing:-.003em;line-height:1.25;text-wrap:balance}
.t-h1{font-size:var(--fs-h1);max-width:19ch}
.t-h2{font-size:var(--fs-h2);max-width:24ch}
.t-h3{font-size:var(--fs-h3)}
.t-split>.t-label .t-h2{font-size:clamp(1.5rem,1.1rem + 1.1vw,2rem)}
.t-h1 .soft,.t-h2 .soft,.h2 .soft,.h1 .soft,.big-title .soft{color:#9aa1ad;font-weight:540}
.t-dek{font-size:clamp(1.125rem,1.03rem + .35vw,1.28rem);line-height:1.55;max-width:54ch;margin-top:22px;color:#d4d8df;text-wrap:pretty}
.t-lede{font-size:clamp(1.03rem,1rem + .15vw,1.115rem);line-height:1.65;max-width:58ch;text-wrap:pretty}
.t-head{margin-bottom:44px}
.t-head .t-h2+.t-lede{margin-top:18px}
.t-band p,.t-card-body p,.t-feat p,.t-faq details p,.t-steps p{text-wrap:pretty}
.t-row b{font-size:1.02rem;font-weight:620;letter-spacing:-.004em}
.t-row span{font-size:.94rem;line-height:1.45}
.t-card-body p,.t-feat p,.t-ins p{font-size:.97rem;line-height:1.6}
.t-ins h3,.t-feat h3,.t-steps h3{font-weight:640;line-height:1.28}
.t-faq summary{font-weight:620;font-size:1.04rem;line-height:1.4}
.t-fig b,.fact b{font-weight:700;letter-spacing:-.01em}
.t-prose{font-size:1.0625rem;line-height:1.72}
.t-prose h2{font-family:var(--display);font-stretch:108%;font-size:clamp(1.4rem,1.2rem + .7vw,1.7rem);font-weight:680;letter-spacing:-.014em}
.t-body{font-size:clamp(1.0625rem,1rem + .25vw,1.16rem);line-height:1.7}
.t-body h2{font-stretch:108%;font-size:clamp(1.45rem,1.2rem + .9vw,1.85rem);letter-spacing:-.014em}
.t-body h3{font-size:1.2rem}
.t-article h1{font-size:clamp(2.1rem,1.4rem + 2.4vw,3.3rem);max-width:20ch}
.t-article .dek{font-size:clamp(1.12rem,1.03rem + .35vw,1.28rem);line-height:1.55}
.btn{font-weight:600;letter-spacing:-.003em}
.mm-top{font-weight:550}
.mm-lead{font-weight:620;font-stretch:104%}
.crumbs{font-size:.84rem;letter-spacing:.005em}
.t-compare th,.t-glance dt,.t-takeaways p.lbl,.t-article .kicker,.t-exhibit .ex-h{font-family:var(--display);font-stretch:112%;letter-spacing:.07em}
/* home */
.h2{font-size:clamp(2rem,1.25rem + 2.4vw,3.1rem)}
.big-title{font-size:clamp(2.2rem,1.3rem + 3.2vw,4.1rem)}
.hero2 h1{font-family:var(--display);font-stretch:115%;font-weight:760;letter-spacing:-.01em}
.lede{line-height:1.55;text-wrap:pretty}
.pain h3,.pain .q{font-family:var(--display);font-stretch:106%;letter-spacing:-.01em}
@media (max-width:640px){.t-dek{margin-top:16px}.t-head{margin-bottom:32px}h1,.t-h1{letter-spacing:-.02em}}

/* Banner: generated art made for each page (tools/banner.py), behind the opening of the page */
main{position:relative;isolation:isolate}
.bnr{position:absolute;left:0;right:0;top:0;height:clamp(600px,50vw,780px);z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 62%,transparent 100%)}
.bnr::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,16,20,.94) 0%,rgba(14,16,20,.8) 34%,rgba(14,16,20,.3) 52%,rgba(14,16,20,0) 64%)}
.bnr-art{position:absolute;inset:0;width:100%;height:100%}
.bnr-glow{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 60%,transparent),color-mix(in srgb,var(--c) 18%,transparent) 55%,transparent);transform:translate(-50%,-50%);animation:bnr-drift var(--d,24s) ease-in-out var(--o,0s) infinite alternate;will-change:transform}
@keyframes bnr-drift{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-40%,-57%) scale(1.18)}}
.bnr-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(70% 90% at 78% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 90% at 78% 40%,#000 20%,transparent 75%)}
.bnr-grid i{position:absolute;top:0;bottom:0;left:0;width:22vw;overflow:hidden;animation:bnr-win 11s cubic-bezier(.5,0,.5,1) infinite;will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);mask-image:linear-gradient(90deg,transparent,#000 50%,transparent)}
.bnr-grid i::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100vw;background:inherit;background-image:linear-gradient(color-mix(in srgb,var(--pc) 55%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pc) 55%,transparent) 1px,transparent 1px);background-size:56px 56px;background-position:center top;animation:bnr-win-in 11s cubic-bezier(.5,0,.5,1) infinite;will-change:transform}
@keyframes bnr-win{0%,12%{transform:translateX(-24vw)}70%,100%{transform:translateX(102vw)}}
@keyframes bnr-win-in{0%,12%{transform:translateX(24vw)}70%,100%{transform:translateX(-102vw)}}
.bnr .streak,.bnr .pulse{stroke-dasharray:12 200;stroke-dashoffset:12;animation:bnr-run var(--d) cubic-bezier(.45,0,.55,1) var(--o) infinite}
.bnr .streak{stroke-dasharray:22 200;opacity:.75}
@keyframes bnr-run{from{stroke-dashoffset:24}to{stroke-dashoffset:-104}}
.bnr .mote{animation:bnr-mote var(--d) linear var(--o) infinite;opacity:0}
@keyframes bnr-mote{0%{transform:translateY(0);opacity:0}20%{opacity:.9}75%{opacity:.5}100%{transform:translateY(var(--y));opacity:0}}
.bnr .spin{transform-box:fill-box;transform-origin:center;animation:bnr-spin var(--d) linear infinite;animation-direction:normal}
.bnr .spin[style*="--dir:-1"]{animation-direction:reverse}
@keyframes bnr-spin{to{transform:rotate(360deg)}}
.bnr .bar{transform-box:fill-box;transform-origin:center;animation:bnr-bar var(--d) ease-in-out var(--o) infinite alternate}
@keyframes bnr-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.bnr .blink{animation:bnr-blink var(--d) ease-in-out var(--o) infinite alternate}
@keyframes bnr-blink{from{opacity:.15}to{opacity:.9}}
.bnr .ping{transform-box:fill-box;transform-origin:center;stroke-width:1.5;animation:bnr-ping 3.2s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes bnr-ping{from{transform:scale(1);opacity:.8}to{transform:scale(2.8);opacity:0}}
.bnr .rise{animation:bnr-rise var(--d) ease-in-out var(--o) infinite alternate}
@keyframes bnr-rise{to{transform:translateY(-12px)}}
.bnr .float{animation:bnr-rise var(--d) ease-in-out var(--o) infinite alternate}
.bnr .scan{animation:bnr-scan var(--d) ease-in-out infinite alternate}
@keyframes bnr-scan{to{transform:translateX(var(--w))}}
main>.crumbs{position:relative}
.t-hero[data-smoke]{isolation:auto}
/* phones and tablets: the art is a banner of its own above the headline */
@media (max-width:1023px){
  .bnr{height:clamp(320px,56vw,480px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 50%,transparent 100%)}
  .bnr::after{background:linear-gradient(180deg,rgba(14,16,20,.5) 0,rgba(14,16,20,0) 22%,rgba(14,16,20,0) 55%,rgba(14,16,20,.8) 100%)}
  .bnr-grid i{display:none}
  .bnr~.t-hero,.bnr~.t-article{padding-top:clamp(170px,34vw,240px)!important}
}
/* every animated graphic pauses off screen (js/gfx.js) and holds still for reduced motion */
.js .gfx:not(.gfx-run) *,.js .gfx:not(.gfx-run)::before,.js .gfx:not(.gfx-run)::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.gfx *,.gfx::before,.gfx::after{animation:none!important}.bnr .mote{opacity:.6}}

/* Ambient graphics through the page: a glowing seam between bands, a slow coloured glow in alternate bands */
.t-band{overflow:clip;isolation:isolate}
.t-band::after{content:"";position:absolute;top:0;left:50%;width:min(900px,80vw);height:1px;margin-left:max(-450px,-40vw);z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pc) 70%,transparent) 50%,transparent);box-shadow:0 0 22px 2px color-mix(in srgb,var(--pc) 28%,transparent);
  animation:t-seam 9s ease-in-out infinite alternate;transform-origin:center}
@keyframes t-seam{from{transform:scaleX(.45);opacity:.45}to{transform:scaleX(1);opacity:.9}}
.t-band.t-alt::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:min(70vw,900px);aspect-ratio:1;top:-30%;right:-22%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 13%,transparent),color-mix(in srgb,var(--sc) 5%,transparent) 60%,transparent);animation:t-glow 28s ease-in-out infinite alternate}
.t-band.t-alt:nth-of-type(even)::before{right:auto;left:-24%;top:auto;bottom:-35%;animation-duration:34s}
@keyframes t-glow{to{transform:translate(-8%,10%) scale(1.15)}}
.t-band[data-smoke]::before{display:none}
a.t-card:hover,.t-ins:hover{border-color:color-mix(in srgb,var(--pc) 40%,var(--line));box-shadow:0 24px 60px -30px color-mix(in srgb,var(--pc) 55%,transparent)}
.t-row{transition:background .2s,box-shadow .2s}
.t-row:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 35%,transparent)}
.t-media,.t-ill{box-shadow:0 30px 70px -32px color-mix(in srgb,var(--pc) 40%,rgba(0,0,0,.8)),0 0 0 1px rgba(255,255,255,.05)}
@media (prefers-reduced-motion:reduce){.t-band::after,.t-band::before{animation:none}}
/* Home: the tools concept, small. Logos flow through the MUVES mark beside "Four steps" */
.tools-orbit{margin:0;width:min(540px,100%);flex:0 1 540px}
.tools-orbit svg{display:block;width:100%;height:auto;overflow:visible;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tools-orbit .to-chip circle{fill:#f4f5f7;stroke:rgba(0,0,0,.1)}
.tools-orbit .to-run{stroke-dasharray:8 200;animation:bnr-run var(--d) cubic-bezier(.45,0,.55,1) var(--o) infinite}
.tools-orbit .to-ring{fill:none;stroke:#e5484d;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:bnr-ping 3s cubic-bezier(.2,.7,.3,1) infinite}
.tools-orbit figcaption{margin-top:6px;text-align:center;color:var(--dim);font-size:.9rem}
.tools-orbit figcaption a{color:#fff;border-bottom:1px solid rgba(255,255,255,.28)}
.tools-orbit figcaption a:hover{border-bottom-color:#fff}
.how-head{align-items:center}
@media (max-width:900px){.tools-orbit{flex-basis:100%;margin-top:8px}}