/* Vorflux homepage. Values come from the "page / home" frame (1657:28782, Final Website page)
   of the Vorflux + Hex Figma file: 1440 frame, 1280 content column, 1216 inner column. */


:root {
  --sans: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --black: #000;
  --ink-900: #0a0a0a;
  --surface: #121212;
  --light: #f8f9f7;
  --story: #c1ebdf;
  --logo: #efefeb;
  --mint: #aef0d9;
  --mint-strong: #b3f5e2;
  --lavender: #cbb9ff;
  --teal: #087f72;
  --green: #36d67e;
  --red: #ff4056;
  --blue: #6980ff;

  --w-90: rgba(255, 255, 255, .9);
  --w-72: rgba(255, 255, 255, .72);
  --w-64: rgba(255, 255, 255, .64);
  --w-56: rgba(255, 255, 255, .56);
  --w-48: rgba(255, 255, 255, .48);
  --w-32: rgba(255, 255, 255, .32);
  --w-24: rgba(255, 255, 255, .24);
  --w-16: rgba(255, 255, 255, .16);
  --w-12: rgba(255, 255, 255, .12);
  --w-06: rgba(255, 255, 255, .06);
  --k-72: rgba(0, 0, 0, .72);
  --k-64: rgba(0, 0, 0, .64);
  --k-48: rgba(0, 0, 0, .48);
  --k-16: rgba(0, 0, 0, .16);
  --k-08: rgba(0, 0, 0, .08);

  --ease-out: cubic-bezier(.215, .61, .355, 1);
  --ease-in-out: cubic-bezier(.645, .045, .355, 1);
  --gutter: clamp(20px, 5.5556vw, 80px);
  --inner: clamp(0px, calc((100vw - 1100px) * 10), 32px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--black); color: #fff; font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-padding-top: 80px; }
body { margin: 0; background: var(--black); font-size: 14px; line-height: 20px; overflow-x: clip; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.icon { width: 16px; height: 16px; flex: none; fill: currentColor; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; position: relative; }
.frame { padding-inline: var(--inner); }
.lined { border-inline: 1px solid var(--w-12); }

/* ---------- type ---------- */
.display { font: 500 clamp(40px, 4.4444vw, 64px)/.9375 var(--sans); letter-spacing: -.03em; }
.h2 { font: 500 clamp(30px, 2.7778vw, 40px)/1 var(--sans); letter-spacing: -.02em; }
.h3 { font: 500 28px/32px var(--sans); letter-spacing: -.02em; }
.h4 { font: 500 20px/24px var(--sans); letter-spacing: -.02em; }
.body { font: 400 14px/20px var(--sans); }
.body-m { font: 500 14px/20px var(--sans); }
.t-72 { color: var(--w-72); }
.t-64 { color: var(--w-64); }
.t-56 { color: var(--w-56); }
.label { display: flex; align-items: center; gap: 8px; font: 400 14px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }
.label--strip::before { content: ''; width: 4px; height: 12px; background: currentColor; }
.light .label { color: var(--k-48); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 8px 10px 8px 12px; font: 400 14px/16px var(--mono); text-transform: uppercase; white-space: nowrap; color: #fff; transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.btn--white { background: #fff; color: #000; }
.btn--white:hover { background: var(--mint); }
.btn--soft { background: var(--w-16); }
.btn--soft:hover { background: var(--w-24); }
.btn--subtle { background: var(--w-12); }
.btn--subtle:hover { background: var(--w-24); }
.btn--text { color: var(--w-56); }
.btn--text:hover { color: #fff; }
.btn--mint { background: var(--mint-strong); color: #000; }
.btn--mint:hover { background: #fff; }
.btn--lavender { background: var(--lavender); color: #000; }
.btn--lavender:hover { background: #fff; }
.btn--sm { min-height: 32px; padding: 8px 8px 8px 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- decoration ---------- */
.hatch { display: block; height: 10px; background: repeating-linear-gradient(135deg, var(--w-24) 0 1px, transparent 1px 4px); }
.light .hatch { background: repeating-linear-gradient(135deg, var(--k-08) 0 1px, transparent 1px 4px); }
.rule { position: relative; height: 1px; background: var(--w-12); }
.rule > i { position: absolute; top: -4px; width: 8px; height: 8px; background: var(--black); border: 1px solid var(--w-24); }
.rule > i:first-child { left: -4px; }
.rule > i:last-child { right: -4px; }
.rule > i.mid { left: calc(50% - 4px); right: auto; }
.rail { display: grid; gap: 3px; }
.rail .rule:last-child > i { display: none; }
.corners { position: absolute; top: 16px; bottom: 16px; left: max(var(--gutter), calc(50% - 640px)); right: max(var(--gutter), calc(50% - 640px)); pointer-events: none; }
.corners i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--w-24); }
.corners i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.corners i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.corners i:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.corners i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }

/* ---------- news ticker ----------
   From the news ticker snippet (vorflux-news-ticker.vorflux-pages.pages.dev), on the site's own
   IBM Plex Mono. It sits above the sticky header and scrolls away with the page. The two groups are
   identical and the track moves by one group's width, so the loop has no seam. Hover or keyboard
   focus pauses it. */
.ticker { position: relative; overflow: hidden; white-space: nowrap; color: #000; background: var(--mint-strong); font: 400 11px/1 var(--mono); letter-spacing: -.04em; text-transform: uppercase; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.ticker__track { display: inline-flex; animation: ticker-scroll 40s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__group { display: inline-flex; flex-shrink: 0; align-items: center; }
.ticker__text { padding: 10px 0; }
.ticker__text:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticker__btn { margin-left: 12px; padding: 3px 8px; font-size: 10px; border: 1px solid #000; border-radius: 999px; }
.ticker__btn:hover { color: var(--mint-strong); background: #000; }
.ticker__sep { padding: 0 28px; font-size: 8px; opacity: .45; }
.ticker :focus-visible { outline-color: #000; outline-offset: -2px; }
.ticker__btn:focus-visible { outline-offset: 2px; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }

/* ---------- hero ---------- */
.hero { padding-top: clamp(40px, 11.95vw, 172px); }
.hero__eyebrow { margin-bottom: 8px; }
.hero__copy { display: grid; grid-template-columns: minmax(0, 756fr) minmax(0, 524fr); align-items: start; }
.hero__copy .display { max-width: 733px; }
.hero__side { max-width: 460px; }
.hero__sub { max-width: 352px; font: 500 14px/20px var(--sans); color: var(--w-72); }
.hero__side .actions { margin-top: 24px; }
.hero__stage { margin-top: 56px; border: 1px solid var(--w-16); }
.hero__strip { margin-top: 4px; }

/* ---------- stage (scaled product mock over a baked backdrop) ---------- */
.stage { position: relative; overflow: hidden; width: 100%; height: calc(var(--h) * var(--k, 1) * 1px); background: var(--ink-900); }
.stage__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__in { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform-origin: 0 0; transform: scale(var(--k, 1)); font-family: var(--sans); }
.cursor { position: absolute; width: 22px; height: 24px; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }

/* ---------- logos ---------- */
.logos { display: grid; grid-template-columns: minmax(0, 212fr) repeat(3, minmax(0, 355fr)); margin-top: 5px; border: 1px solid var(--w-12); }
.logos > * { position: relative; min-height: 212px; padding: 12px; border-left: 1px solid var(--w-12); font: 400 13px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }
.logos > *:first-child { border-left: 0; color: #fff; }
.logos--many { grid-template-columns: minmax(0, 212fr) repeat(5, minmax(0, 213fr)); }
.logos--many > * { min-height: 160px; }
.logos--many > *:first-child { grid-row: span 2; }
.logos--many > *:nth-child(n + 7) { border-top: 1px solid var(--w-12); }
.logos__name b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 600 20px/24px var(--sans); letter-spacing: -.01em; text-transform: none; color: #fff; opacity: .48; white-space: nowrap; }
.logos svg, .logos__mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); fill: #fff; color: #fff; opacity: .48; transition: opacity .2s var(--ease-out), fill .2s var(--ease-out), color .2s var(--ease-out), background-color .2s var(--ease-out); }
.logos__mark { background-color: #fff; -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat; }
@media (hover: hover) {
  .logos > :not(:first-child):hover svg { fill: var(--logo-hover, #fff); color: var(--logo-hover-accent, var(--logo-hover, #fff)); opacity: 1; }
  .logos > :not(:first-child):hover .logos__mark { background-color: var(--logo-hover, #fff); opacity: 1; }
}

/* ---------- intent to delivery ---------- */
.intent { padding-top: 109px; }
.intent .h2 { max-width: 533px; }
.intent__sub { max-width: 395px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.tabs { margin-top: 46px; }
.tabs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--w-12); }
.tabs__tab { display: flex; align-items: center; gap: 16px; height: 54px; padding: 12px 16px; font: 500 14px/20px var(--sans); color: var(--w-48); text-align: left; border-left: 1px solid var(--w-12); transition: color .15s ease, background-color .15s ease; }
.tabs__tab:first-child { border-left: 0; }
.tabs__tab:hover { color: #fff; }
.tabs__tab[aria-selected="true"] { color: var(--mint); background: #080f0d; }
.tabs__panel { display: grid; grid-template-columns: minmax(0, 639fr) minmax(0, 641fr); min-height: 600px; border: 1px solid var(--w-12); border-top: 0; }
.js .tabs__panel:not(.is-active) { display: none; }
.tabs__copy { display: flex; flex-direction: column; padding: 36px; }
.tabs__num { font: 400 13px/16px var(--mono); color: var(--w-48); }
.tabs__body { margin-top: auto; }
.tabs__body p { max-width: 371px; margin-top: 24px; font: 500 14px/20px var(--sans); color: var(--w-72); }
.tabs__body .btn { margin-top: 32px; }

/* ---------- framed product sections ---------- */
.product { margin-top: 95px; }
.split { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 580fr); gap: 36px; padding-block: 64px; }
.split--right { grid-template-columns: minmax(0, 580fr) minmax(0, 600fr); }
.split__content { display: flex; flex-direction: column; align-items: flex-start; min-height: 100%; }
.split__content .h2 { margin-top: 24px; max-width: 460px; }
.split__foot { margin-top: 29px; max-width: 375px; }
.split__foot p { margin-top: 12px; font: 500 14px/20px var(--sans); color: var(--w-72); }
.autobots__list { display: grid; gap: 14px; width: 100%; max-width: 375px; margin-top: 24px; }
.autobots__list li + li { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.autobots__list strong { display: block; font: 500 16px/20px var(--sans); }
.autobots__list span { display: block; margin-top: 4px; font: 500 14px/20px var(--sans); color: var(--w-72); }
.split__foot .btn, .split__content > .btn { margin-top: 32px; }
.review__lede { max-width: 375px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.review__types { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 16px; margin-top: auto; padding-top: 40px; }
.point__title { display: flex; align-items: center; gap: 8px; padding-block: 12px; font: 500 14px/14px var(--sans); color: #fff; }
.point__title::before { content: ''; width: 4px; height: 4px; background: currentColor; }
.point p { color: var(--w-64); }
.review .split__content > .btn { margin-top: 67px; }

/* ---------- automations ---------- */
.automations { position: relative; margin-top: 95px; padding-block: 48px 96px; background: var(--ink-900); }
.automations__head .h2 { margin-top: 32px; }
.automations__head p { max-width: 395px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.automations__label { display: flex; justify-content: space-between; }
.automations__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 76px; }
.automations__card h3 { margin-top: 24px; }
.automations__card p { margin-top: 12px; color: var(--w-64); }
.automations .btn { margin-top: 88px; }

/* ---------- platform (light) ---------- */
.light { position: relative; background: var(--light); color: #000; }
.light::before { content: ''; position: absolute; left: 0; right: 0; top: 64px; height: 1px; background: var(--k-08); }
.light .rule { background: var(--k-08); }
.light .rule > i { background: var(--light); border-color: var(--k-16); }
.platform { position: relative; padding-block: 96px 161px; border-inline: 1px solid var(--k-08); }
.platform__marks { position: absolute; left: -4px; right: -4px; top: 60px; display: flex; justify-content: space-between; }
.platform__marks i { width: 8px; height: 8px; background: var(--light); border: 1px solid var(--k-16); }
.platform__foot { position: absolute; left: 0; right: 0; bottom: 4px; display: grid; gap: 14px; }
.platform__head { display: grid; grid-template-columns: minmax(0, 616fr) minmax(0, 600fr); margin-top: 24px; }
.platform__head p { max-width: 395px; font-weight: 500; color: var(--k-72); }
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border: 1px solid var(--k-08); }
.cap { display: flex; flex-direction: column; min-height: 479px; padding: 24px; border-right: 1px solid var(--k-08); border-bottom: 1px solid var(--k-08); }
.cap:nth-child(3n) { border-right: 0; }
.cap:nth-last-child(-n + 3) { border-bottom: 0; }
.cap__title { display: flex; align-items: center; gap: 9px; font: 500 16px/24px var(--sans); }
.cap__title .icon { width: 20px; height: 20px; }
.cap__desc { min-height: 41px; margin-top: 8px; font: 500 14px/20px var(--sans); color: var(--k-48); }
.cap__art { position: relative; display: flex; align-items: flex-start; justify-content: center; flex: none; min-height: 320px; margin-bottom: 20px; font-family: var(--sans); }
.cap__more { display: inline-flex; align-items: center; gap: 2px; align-self: flex-start; font: 400 13px/18px var(--mono); letter-spacing: -.01em; text-transform: uppercase; color: var(--k-48); transition: color .15s ease; }
.cap__more:hover { color: #000; }

/* ---------- customer story ---------- */
.story { padding-block: 96px; background: var(--story); color: #000; }
.story .label { color: var(--k-48); }
.story__grid { display: grid; grid-template-columns: minmax(0, 497fr) minmax(0, 703fr); gap: 16px; margin-top: 64px; }
.story__copy { display: flex; flex-direction: column; }
.story__lede { margin-top: 24px; font: 500 20px/24px var(--sans); letter-spacing: -.02em; }
.story__points { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 16px; margin-top: auto; padding-top: 40px; }
.story .point__title { color: #000; }
.story .point__title::before { width: 4px; height: 8px; background: var(--teal); }
.story .point p { color: var(--k-64); }
.story__media { position: relative; min-height: 560px; overflow: hidden; background: #111; }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 67% 50%; }
.story__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40.5%; background: linear-gradient(transparent, #000); }
.story__quote { position: absolute; left: 32px; right: 32px; bottom: 32px; z-index: 1; color: #fff; }
.story__quote blockquote { max-width: 393px; font: 500 clamp(22px, 2vw, 28px)/30px var(--sans); letter-spacing: -.02em; }
.story__quote figcaption { margin-top: 24px; font: 500 14px/16px var(--sans); }
.story__quote figcaption span { display: block; margin-top: 4px; font-weight: 400; color: var(--w-48); }
/* "Watch the story" (Figma 1657:28895): bottom-aligned with the attribution, 15.5px from the right edge. */
.story__watch { position: absolute; right: 15.5px; bottom: 32px; z-index: 2; padding-right: 12px; }
.story__media.is-ready { cursor: pointer; }
.story__media iframe { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.story__media.is-playing { cursor: auto; }

/* ---------- apps ---------- */
.apps { padding-block: 100px 177px; text-align: center; }
.apps .h2 { max-width: 497px; margin-inline: auto; }
.apps__sub { max-width: 395px; margin: 24px auto 0; font-weight: 500; color: var(--w-72); }
.apps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 52px; text-align: left; }
.app h3 { margin-top: 20px; }
.app .btn { margin-top: 53px; }
/* "Open on mobile": a menu of both stores, styled like the header's product menu */
.stores { position: relative; display: inline-block; }
.stores > summary { list-style: none; cursor: pointer; }
.stores > summary::-webkit-details-marker { display: none; }
.stores > summary .icon { transition: transform .15s ease; }
.stores[open] > summary .icon { transform: rotate(90deg); }
.stores__menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; min-width: 240px; padding: 6px; background: #0a0a0a; border: 1px solid var(--w-12); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.stores__menu a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 10px; font: 500 14px/20px var(--sans); color: var(--w-72); transition: color .15s ease, background-color .15s ease; }
.stores__menu a:hover, .stores__menu a:focus-visible { color: #fff; background: var(--w-06); }
.stores__menu small { font: 400 12px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }

/* ---------- pricing ---------- */
.costs { display: grid; grid-template-columns: minmax(0, 513fr) minmax(0, 703fr); padding-block: 148px 240px; }
.costs__copy .h2 { max-width: 414px; }
.costs__copy p { max-width: 414px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.costs__copy .actions { margin-top: 24px; }
.subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--w-12); }
.subs > * { position: relative; min-height: 212px; padding: 12px; border-left: 1px solid var(--w-12); font: 400 13px/16px var(--mono); text-transform: uppercase; color: var(--w-48); }
.subs > *:first-child { border-left: 0; color: #fff; }
.subs svg { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; transform: translate(-50%, -50%); fill: #fff; opacity: .24; }
.cost-list { display: grid; gap: 16px; margin-top: 24px; }
.cost-list > li { padding-block: 12px; border-bottom: 1px solid var(--w-12); }
.cost-list strong { display: block; font: 500 14px/20px var(--sans); }
.cost-list span { display: block; margin-top: 8px; color: var(--w-56); }

/* ---------- final CTA ---------- */
.cta { position: relative; overflow: hidden; padding: 40px 40px 36px; }
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__box { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 336px; padding: 39px 24px 30px; text-align: center; background: #000; border: 1px solid var(--w-24); }
.cta__box h2 { margin-top: 22px; font: 500 clamp(32px, 3.3333vw, 48px)/1 var(--sans); }
.cta__box p { max-width: 452px; margin-top: 24px; font-weight: 500; color: var(--w-72); }
.cta__box .actions { justify-content: center; margin-top: 31px; }

/* ---------- footer ---------- */
.footer { position: relative; margin-top: 144px; padding-block: 33px 99px; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 324fr)) minmax(0, 308fr); }
.footer h2 { font: 400 14px/20px var(--mono); color: var(--w-48); }
.footer ul { display: grid; gap: 8px; margin-top: 16px; }
.footer li a { font: 500 14px/20px var(--sans); color: var(--w-72); transition: color .15s ease; }
.footer li a:hover { color: #fff; }
.footer__tag { max-width: 240px; font: 500 14px/20px var(--sans); color: var(--w-48); }
.footer__brand { display: grid; grid-template-columns: minmax(0, 224fr) minmax(0, 978fr); gap: clamp(16px, 5.4vw, 78px); align-items: end; margin-top: 121px; color: var(--logo); }
.footer__brand svg { width: 100%; height: auto; fill: currentColor; }
.footer__legal { margin-top: 26px; text-align: center; font: 400 14px/16px var(--mono); color: var(--w-32); }

/* ---------- download dialog ---------- */
.dl { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; color: #fff; background: #0a0a0a; border: 1px solid var(--w-16); overflow: auto; }
.dl::backdrop { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dl__panel { position: relative; padding: 32px; }
.dl__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; color: var(--w-64); }
.dl__close:hover { color: #fff; background: var(--w-06); }
.dl__mark { width: 22px; height: 19px; fill: var(--logo); }
.dl__title { margin-top: 20px; font: 500 28px/32px var(--sans); letter-spacing: -.02em; }
.dl__desc { margin-top: 8px; color: var(--w-72); }
.dl__video { margin-top: 24px; border: 1px solid var(--w-12); background: #000; aspect-ratio: 1920 / 1212; }
.dl__video video { width: 100%; height: 100%; object-fit: cover; }
.dl__warning { display: flex; gap: 10px; margin-top: 16px; padding: 12px; color: #f0c674; background: rgba(240, 160, 32, .1); border: 1px solid rgba(240, 160, 32, .28); }
.dl__warning strong { display: block; font-weight: 500; }
.dl__warning span { color: var(--w-64); }
.dl__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; min-height: 36px; }
.dl__intel { font: 400 13px/16px var(--mono); color: var(--w-64); text-decoration: underline; text-underline-offset: 3px; }
.dl__intel:hover { color: #fff; }
.dl__muted { font: 400 13px/16px var(--mono); color: var(--w-48); }
.dl__note { margin-top: 16px; color: var(--w-64); }
.dl__note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Product mocks. These are decorative, fixed-size scenes in design pixels; the
   stage scales them as a unit. Sample data only, no real names or repos.
   ========================================================================== */
.m { color: #e5e5e5; font: 500 14px/20px var(--sans); }
.m * { box-sizing: border-box; }
.m .icon { fill: currentColor; }
.m-mono { font: 400 12px/16px var(--mono); }
.m-muted { color: #878787; }
.m-soft { color: #b0b0b0; }
.m-win { position: absolute; background: #0a0a0a; border: 1px solid var(--w-12); overflow: hidden; }
.m-card { position: absolute; background: var(--surface); border: 1px solid var(--w-12); border-radius: 2px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.m-divider { height: 1px; background: #242424; }
.m-avatar { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 2px; background: #1e1e1e; font: 500 12px/1 var(--sans); }
.m-avatar--warm { background: #412609; color: #f0a020; }
.m-avatar--cool { color: #ac91f0; }
.m-bot { flex: none; }
.m-tag { padding: 1px 5px; border-radius: 3px; background: var(--w-06); font: 500 12px/16px var(--mono); letter-spacing: .4px; color: #878787; }
.m-status { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 4px 10px 4px 8px; border-radius: 4px; font: 400 12px/16px var(--mono); }
.m-status .icon { width: 14px; height: 14px; }
.m-status--done { background: rgba(54, 214, 126, .14); color: var(--green); }
.m-status--run { background: rgba(61, 91, 255, .18); color: var(--blue); }
.m-status--bad { background: rgba(255, 64, 86, .14); color: var(--red); }
.m-status--idle { background: var(--w-06); color: #939393; padding-left: 8px; }
.m-toggle { position: relative; flex: none; width: 34px; height: 22px; border-radius: 3px; background: #6a4ebb; }
.m-toggle::after { content: ''; position: absolute; right: 3px; top: 3px; width: 16px; height: 16px; border-radius: 2px; background: #fff; }
.m-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 4px; background: rgba(54, 214, 126, .14); color: var(--green); font: 500 13px/18px var(--sans); }

/* hero: hire an autobot */
.m-hire { left: 64px; top: 64px; width: 1152px; height: 611px; border-radius: 12px; display: flex; }
.m-rail { --r: .8; position: relative; flex: none; width: calc(64px * var(--r)); border-right: .8px solid #1e1e1e; }
.m-rail__in { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; height: 720px; padding-top: 68px; transform: scale(var(--r)); transform-origin: 0 0; }
.m-rail__logo { position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; transition: background-color .15s var(--ease-out); }
.m-rail__logo svg { grid-area: 1 / 1; transition: opacity .15s var(--ease-out); }
.m-rail__logo svg:first-child { width: 30px; height: 25px; fill: var(--logo); }
.m .m-rail__logo .icon { width: 20px; height: 20px; color: #b4adc0; opacity: 0; }
.m-rail__item { position: relative; display: block; width: 60px; height: 62px; padding-top: 42px; font: 500 12px/16px var(--sans); text-align: center; white-space: nowrap; color: #b4adc0; transition: color .2s var(--ease-out); }
.m-rail__item > span { position: absolute; left: 12px; top: 4px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; transition: background-color .2s var(--ease-out); }
.m .m-rail__item .icon { width: 20px; height: 20px; }
.m-rail__item.is-on { color: #e6e4ea; }
.m-rail__item.is-on > span { background: var(--w-06); color: #fff; }
.m-rail__item.is-on::before { content: ''; position: absolute; left: -2px; top: 4px; width: 2px; height: 36px; background: #6a4ebb; }
.m-rail__item b { position: absolute; right: -2px; top: -2px; min-width: 15px; height: 15px; border-radius: 3px; background: #242424; font: 500 10px/15px var(--mono); color: #e6e4ea; }
.m .m-rail__theme { position: absolute; left: 22px; top: 640px; width: 20px; height: 20px; color: #b4adc0; }
.m-rail__me { position: absolute; left: 18px; top: 680px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: #8b5cff; font: 500 14px/1 var(--sans); color: #f8f7fb; }
.m-bell { position: relative; display: block; width: 16px; height: 16px; }
.m-bell i { position: absolute; left: 8.8px; top: .8px; width: 6.4px; height: 6.4px; border-radius: 50%; background: var(--red); }
.m-hire__main { position: relative; flex: 1; padding: 14px 72px 14px 62.8px; }
.m-crumbs { display: flex; align-items: center; gap: 6px; font-size: 10.4px; line-height: 14px; color: #878787; }
.m-crumbs .icon { width: 12px; height: 12px; }
.m-crumbs b { font-weight: 500; color: #e5e5e5; }
.m-hire__tools { position: absolute; right: 20px; top: 12px; display: flex; gap: 14px; color: #b0b0b0; }
.m-hire__title { margin-top: 28px; font-size: 14.4px; line-height: 20px; }
.m-hire__sub { font-size: 10.4px; line-height: 16px; color: #878787; }
.m-templates { display: grid; grid-template-columns: repeat(3, 314px); gap: 13px 12.5px; margin-top: 12px; }
.m-tpl { position: relative; height: 118px; padding: 12px; border: 1px solid #242424; border-radius: 3px; background: #0d0d0d; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out); }
.m-tpl.is-dashed { border-style: dashed; }
.m-tpl__top { display: flex; gap: 10px; }
.m-tpl__top img { width: 32px; height: 32px; }
.m-tpl__name { font-size: 11.2px; line-height: 16px; color: #e5e5e5; }
.m-tpl__who { font-size: 10px; line-height: 14px; color: #878787; }
.m-tpl__add { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 0; height: 22px; padding-inline: 4px; border: 1px solid #242424; border-radius: 2px; color: #b0b0b0; font-size: 10px; white-space: nowrap; transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out), gap .2s var(--ease-out), padding .2s var(--ease-out); }
.m-tpl__add .icon { width: 12px; height: 12px; }
/* The label's width animates from 0 to its own size, whatever the name's length. */
.m-tpl__label { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .2s var(--ease-out); }
.m-tpl__label > span { min-width: 0; overflow: hidden; }
.m-tpl.is-hover { border-color: rgba(255, 255, 255, .28); background: #151515; }
.m-tpl.is-hover .m-tpl__add { gap: 4px; padding-inline: 8px; background: #08665c; border-color: #08665c; color: #fff; }
.m-tpl.is-hover .m-tpl__label { grid-template-columns: 1fr; }
@media (hover: hover) {
  .m-tpl:hover { border-color: rgba(255, 255, 255, .28); background: #151515; }
  .m-tpl:hover .m-tpl__add { gap: 4px; padding-inline: 8px; background: #08665c; border-color: #08665c; color: #fff; }
  .m-tpl:hover .m-tpl__label { grid-template-columns: 1fr; }
  .m-rail__item:not(.is-on):hover { color: #e6e4ea; }
  .m-rail__item:not(.is-on):hover > span { background: rgba(255, 255, 255, .04); }
  .m-rail__logo:hover { background: rgba(255, 255, 255, .04); }
  .m-rail__logo:hover svg:first-child { opacity: 0; }
  .m .m-rail__logo:hover .icon { opacity: 1; }
}
.m-tpl__points { display: grid; gap: 6px; margin-top: 12px; font-size: 10.4px; line-height: 14px; color: #878787; }
.m-tpl__points div { display: flex; gap: 6px; }
.m-tpl__points .icon { width: 11px; height: 11px; margin-top: 2px; }

/* plan composer */
.m-composer { left: 60px; top: 241px; width: 521px; height: 116px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.m-composer__text { display: flex; align-items: center; gap: 1px; font: 500 16px/24px var(--sans); }
.m-composer__text i { width: 2px; height: 22px; background: #e5e5e5; }
.m-composer__row { display: flex; align-items: center; gap: 12px; color: #878787; }
.m-seg { display: flex; margin-left: auto; padding: 2px; background: #0a0a0a; border: 1px solid #242424; border-radius: 4px; font-size: 13px; line-height: 18px; }
.m-seg span { padding: 4px 12px; border-radius: 2px; }
.m-seg .is-on { background: #242424; color: #fff; }
.m-send { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 2px; background: #08665c; color: #fff; }

/* windows used by the design, build and test tabs */
.m-tabwin { left: 40px; top: 40px; width: 561px; height: 600px; border-radius: 2px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.m-tabwin__top { display: flex; align-items: center; gap: 8px; height: 48px; padding: 12px 16px; border-bottom: 1px solid #242424; }
.m-tabwin__top .m-status { margin-left: auto; }
.m-canvas { position: relative; margin: 24px; height: 470px; background-color: #121212; border: 1px solid #242424; }
.m-checkout { position: absolute; left: 116px; top: 95px; width: 280px; min-height: 279px; padding: 16px; background: #121212; border: 1px solid #242424; display: flex; flex-direction: column; gap: 12px; }
.m-checkout h4 { margin: 0; font: 500 16px/24px var(--sans); }
.m-checkout div { display: flex; justify-content: space-between; font-size: 14px; color: #b0b0b0; }
.m-checkout .total { color: #e5e5e5; padding-top: 12px; border-top: 1px solid #242424; }
.m-checkout .pay { display: block; flex: none; height: 36px; margin-top: auto; font: 500 13px/36px var(--mono); text-align: center; background: #6a4ebb; color: #fff; border-radius: 2px; }
.m-checkout label { display: block; font: 400 11px/14px var(--mono); color: #b0b0b0; }
.m-checkout label span { display: block; height: 30px; margin-top: 6px; padding-inline: 8px; font: 400 13px/28px var(--mono); color: #e5e5e5; background: #0a0a0a; border: 1px solid #242424; }
.m-changed { position: absolute; left: 128px; top: 318px; width: 256px; height: 44px; border: 2px dashed #6a4ebb; pointer-events: none; }
.m-pin { position: absolute; left: 383px; top: 79px; display: grid; place-items: center; width: 32px; height: 32px; background: #121212; border: 2px solid #503795; }
.m-pin span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 2px; background: #6d4c41; font: 500 11px/1 var(--mono); color: #fff; }
.m-report { padding: 20px 24px; display: grid; gap: 12px; }
.m-report__row { display: flex; align-items: center; gap: 8px; }
.m-report__row .icon { color: var(--green); }
.m-report__row span:last-child { margin-left: auto; padding: 2px 8px; border: 1px solid #696969; font: 400 12px/16px var(--mono); color: #b0b0b0; }
.m-report__evidence { display: grid; grid-template-columns: 300px 200px; gap: 12px; }
.m-thumb { height: 136px; overflow: hidden; border: 1px solid #696969; background: #0a0a0a; position: relative; }
.m-thumb .m-checkout { position: absolute; left: 10px; top: 12px; width: 280px; min-height: 0; }
.m-play { position: absolute; right: 8px; top: 8px; display: flex; align-items: center; gap: 6px; height: 26px; padding-inline: 8px; background: #000; border: 1px solid #696969; font: 400 12px/16px var(--mono); color: #b0b0b0; }
.m-play .icon { width: 12px; height: 12px; }

/* autobots thread */
.m-thread { left: 70px; top: 90px; width: 460px; height: 460px; border-color: #242424; border-radius: 6px; display: flex; flex-direction: column; }
.m-thread__head { display: flex; align-items: center; gap: 10px; height: 56px; padding: 14px 20px; }
.m-thread__head > span { flex: 1; }
.m-thread__avatars { display: flex; align-items: center; gap: 4px; }
.m-messages { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding-block: 8px; }
.m-msg { display: flex; gap: 12px; padding: 10px 20px; }
.m-msg.is-new { background: rgba(255, 255, 255, .04); }
.m-msg__who { display: flex; align-items: center; gap: 8px; }
.m-msg p { max-width: 356px; margin-top: 4px; color: #b0b0b0; }
.m-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 12px 5px 10px; border-radius: 4px; background: rgba(54, 214, 126, .14); color: var(--green); font: 500 12px/16px var(--sans); }
.m-pill .icon { width: 14px; height: 14px; }
.m-composer-line { padding: 12px 16px 14px; }
.m-composer-line div { height: 38px; padding: 9px 12px; border: 1px solid #242424; border-radius: 3px; color: #878787; font-size: 13px; line-height: 18px; }

/* pr review */
.m-pr { left: 70px; top: 114px; width: 460px; height: 400px; }
.m-pr__head { padding: 16px 20px; display: grid; gap: 6px; }
.m-pr__title { display: flex; align-items: center; gap: 10px; }
.m-pr__title .icon { width: 18px; height: 18px; color: var(--green); }
.m-pr__meta { display: flex; gap: 8px; }
.m-pr__label { display: flex; align-items: center; gap: 8px; padding: 12px 20px 4px; font: 500 12px/16px var(--mono); letter-spacing: .4px; color: #878787; }
.m-pr__label .icon { width: 14px; height: 14px; }
.m-pr__row { padding: 12px 20px; }
.m-pr__row.is-open { background: rgba(255, 255, 255, .04); padding-bottom: 16px; }
.m-pr__rowhead { display: flex; align-items: center; gap: 10px; height: 24px; }
.m-pr__rowhead > .icon { width: 14px; height: 14px; color: #878787; }
.m-pr__rowhead .m-status { margin-left: auto; }
.m-pr__row p { margin-top: 12px; font-size: 13px; line-height: 18px; color: #b0b0b0; }
.m-code { margin-top: 12px; padding: 6px 0; background: #0a0a0a; border: 1px solid #242424; border-radius: 4px; font: 400 12px/17px var(--mono); }
.m-code div { display: flex; gap: 12px; padding: 2px 10px; color: #b0b0b0; }
.m-code span:first-child { width: 22px; color: #878787; }
.m-code .is-bad { background: rgba(255, 64, 86, .14); color: var(--red); }
.m-code .is-bad span:first-child { color: var(--red); }

/* Storyboard steps. A [data-seq] root plays its steps; each [data-steps] part
   carries .is-on while one of its steps shows, and folds open and closed. */
.m-fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s var(--ease-in-out), opacity .25s var(--ease-in-out); }
.m-fold.is-on { grid-template-rows: 1fr; opacity: 1; }
.m-fold > div { min-height: 0; overflow: hidden; }
.m-chips { display: grid; justify-items: end; margin-left: auto; }
.m-chips > * { grid-area: 1 / 1; opacity: 0; transition: opacity .25s var(--ease-in-out); }
.m-chips > .is-on { opacity: 1; }
.m-spin { animation: m-spin 1.1s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* the PR review plays its storyboard, centred as it grows and shrinks */
.m-pr--seq { top: 316px; height: auto; padding-bottom: 6px; transform: translateY(-50%); }
.m-pr--seq .m-pr__row { transition: background-color .3s var(--ease-in-out); }
.m-pr--seq .m-pr__row.is-on { background: rgba(255, 255, 255, .04); }
.m-pr--seq .m-pr__row { padding-bottom: 0; }
.m-pr--seq .m-pr__rowhead { margin-bottom: 12px; }
.m-pr--seq .m-pr__row .m-fold > div > div { padding-bottom: 16px; }
.m-pr--seq .m-pr__row p, .m-pr--seq .m-pr__row .m-fold .m-code:first-child, .m-pr__tests { margin-top: 0; }
.m .m-pr__caret { transition: transform .3s var(--ease-in-out); }
.m-pr__row.is-on > .m-pr__rowhead > .m-pr__caret { transform: rotate(90deg); }
.m-pr__queued { padding: 8px 20px 12px; }
.m-pr__queued .m-status { width: 100%; max-width: 298px; }
.m-pr__tests { display: grid; gap: 8px; font: 400 12px/16px var(--mono); color: #b0b0b0; }
.m-pr__tests li { display: flex; align-items: center; gap: 8px; }
.m-pr__tests .icon { width: 14px; height: 14px; color: var(--green); }
.m-pr__tests .is-bad, .m-pr__tests .is-bad .icon { color: var(--red); }
.m-code .is-good { background: rgba(54, 214, 126, .14); color: var(--green); }
.m-code .is-good span:first-child { color: var(--green); }
.m-pr__actions { display: flex; gap: 8px; margin-top: 12px; }
.m-pr__btn { display: grid; place-items: center; width: 90px; height: 30px; background: #0a0a0a; border: 1px solid #3a3a3a; font: 400 13px/16px var(--mono); color: #e5e5e5; white-space: nowrap; }
.m-pr__btn.is-primary { background: #6a4ebb; border-color: #6a4ebb; color: #fff; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out); }
.m-fold.is-on .m-pr__btn.is-primary { background: #503795; border-color: #503795; transition-delay: 1.1s; }
.m-pr__done { margin: 8px 20px 12px; }
.m-pr__cursor { left: 143px; top: 475px; opacity: 0; transform: translate(70px, 90px); transition: opacity .2s var(--ease-out), transform 0s .2s; }
.m-pr__cursor.is-on { opacity: 1; transform: none; transition: opacity .25s var(--ease-out) .35s, transform .75s var(--ease-in-out) .35s; }




/* A step fills its parent. The incoming step fades in on top before the outgoing one leaves, so the backdrop doesn't flash through. */
.m-step { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-in-out) .2s, visibility 0s .45s; }
.m-step.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .25s var(--ease-in-out); }
.m-pass { pointer-events: none; z-index: 2; }
.m-cur { z-index: 5; opacity: 0; transform: translate(60px, 70px); transition: opacity .2s var(--ease-out), transform 0s .2s; }
.m-cur.is-on { opacity: 1; transform: none; transition: opacity .25s var(--ease-out) .35s, transform .75s var(--ease-in-out) .35s; }
.m-a { position: absolute; white-space: nowrap; }
.m-center { left: 0; right: 0; text-align: center; }
.t16 { font: 500 16px/24px var(--sans); }
.t14 { font: 500 14px/20px var(--sans); }
.t13 { font: 500 13px/18px var(--sans); }
.f144 { font: 500 14.4px/20px var(--sans); }
.f112 { font: 500 11.2px/16px var(--sans); }
.f104 { font: 500 10.4px/15px var(--sans); }
.f96 { font: 500 9.6px/13px var(--sans); }
.tm13 { font: 400 13px/18px var(--mono); }
.tm12 { font: 400 12px/16px var(--mono); }
.tm96 { font: 400 9.6px/13px var(--mono); }
.c1 { color: #e5e5e5; }
.c2 { color: #b0b0b0; }
.c3 { color: #878787; }
.m .m-11 { width: 11px; height: 11px; }
.m .m-13 { width: 13px; height: 13px; }
.m .m-14 { width: 14px; height: 14px; }
.m .m-18 { width: 18px; height: 18px; }
.m-b { display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 5px; background: #0a0a0a; border: 1px solid #3a3a3a; font: 400 13px/16px var(--mono); color: #e5e5e5; white-space: nowrap; }
.m-b.is-primary { background: #6a4ebb; border-color: #6a4ebb; color: #fff; transition: background-color .15s var(--ease-out), border-color .15s var(--ease-out); }
.is-on .m-press.is-primary, .m-fold.is-on .m-press.is-primary { background: #503795; border-color: #503795; transition-delay: 1.1s; }
.m-b.is-sans { font-family: var(--sans); font-weight: 500; }
.m-b.is-off { background: #242424; border-color: #242424; color: #696969; }
.tb14 { font-size: 14px; }
.tb11 { font-size: 11.2px; }
.tb96 { font-size: 9.6px; }

/* the tab window: a fixed top bar over a swapping body */
.m-tabwin__body { position: relative; height: calc(100% - 49px); margin-left: -1px; }
.m-tabwin .m-status { gap: 4px; padding: 4px 8px 4px 6px; }
.m-tabwin .m-status--idle { padding-inline: 8px; }
.m-tabwin--test { border-radius: 12px; border-color: #242424; }
.m-tabwin--test .m-tabwin__top { height: 49px; color: #e6e4ea; }
.m-tabwin--test .m-tabwin__body { margin-left: 0; }
.m-chips .m-status { margin-left: 0; white-space: nowrap; }
.m-skel { border-radius: 5px; background: #242424; }
.m-tile2 { display: grid; place-items: center; border-radius: 2px; background: rgba(146, 117, 223, .18); color: #ac91f0; }
.m-archbox { background: #121212; border: 1px solid #242424; border-radius: 4px; }
.m-node { display: grid; place-items: center; background: #121212; border: 1px solid #242424; border-radius: 3px; font: 400 12px/16px var(--mono); color: #b0b0b0; }
.m-node.is-new { background: rgba(146, 117, 223, .18); border-color: #503795; color: #b8a5ea; }
.m-newtag { display: grid; place-items: center; border-radius: 3px; background: var(--w-06); font: 400 12px/16px var(--mono); color: #b0b0b0; }

/* design comments */
.m-dim { transition: opacity .3s var(--ease-in-out); }
.m-dim.is-on { opacity: .45; }
.m-canvas .m-pin { transition: opacity .25s var(--ease-in-out); }
.m-canvas .m-pin[data-steps]:not(.is-on) { opacity: 0; }
.m-canvas .m-changed { opacity: 0; transition: opacity .3s var(--ease-in-out) .15s; }
.m-canvas .m-changed.is-on { opacity: 1; }
.m-paystack { display: grid !important; place-items: center; }
.m-paystack > span { grid-area: 1 / 1; opacity: 0; transition: opacity .25s var(--ease-in-out); }
.m-paystack > span.is-on { opacity: 1; }
.m-paystack > span:last-child { font: 400 14px/36px var(--mono); }
.m-checkout label span { font: 500 14px/28px var(--sans); }
.m-checkout .pay { font: 500 14px/36px var(--sans); }
.m-canvas .m-pin span { font-family: var(--sans); }
.m-comment { position: absolute; width: 256px; padding: 12px; background: #121212; border: 1px solid #242424; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-in-out), visibility 0s .25s; }
.m-comment.is-on { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-in-out) .1s; }
.m-comment__who { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; }
.m-comment__who small { font: 400 12px/16px var(--mono); color: #878787; }
.m-comment__av { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 2px; font: 500 11px/1 var(--sans); color: #fff; }
.m-comment p { max-width: 224px; margin-top: 8px; color: #b0b0b0; }
.m-comment__reply { display: flex; gap: 8px; margin-top: 8px; }
.m-comment__reply span { display: flex; align-items: center; width: 192px; height: 38px; padding-left: 10px; border: 1px solid #503795; }
.m-comment__reply i { width: 1px; height: 18px; background: #e5e5e5; }
.m-comment__reply b { display: grid; place-items: center; align-self: center; width: 30px; height: 30px; background: #08665c; color: #fff; }
.m-comment__run { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; line-height: 18px; color: #b0b0b0; }
.m-comment__run .icon { width: 14px; height: 14px; color: #ac91f0; }

/* sub-agent list */
.m-agents { position: absolute; left: 24px; top: 56px; display: flex; flex-direction: column; gap: 4px; width: 513px; }
.m-agent { position: relative; height: 64px; border: 1px solid transparent; border-radius: 3px; transition: height .3s var(--ease-in-out), background-color .3s var(--ease-in-out), border-color .3s var(--ease-in-out); }
.m-agent.is-sel.is-on { height: 66px; background: rgba(255, 255, 255, .04); border-color: #503795; }
.m-agent > img { position: absolute; left: 11px; top: 15px; }
.m-agent__text { position: absolute; left: 55px; top: 11px; }
.m-agent__text b { display: block; font-weight: 500; }
.m-agent__text small { display: block; margin-top: 4px; font: 400 12px/16px var(--mono); color: #878787; }
.m-agent__end { position: absolute; left: 380px; top: 13px; display: grid; justify-items: end; width: 120px; }
.m-agent__end .m-chips { margin: 0; }
.m-agent__bar { width: 120px; height: 4px; margin-top: 8px; background: #242424; }
.m-agent__fill { display: block; width: var(--a); height: 4px; background: #3d5bff; transition: width .6s var(--ease-in-out), background-color .3s var(--ease-in-out); }
.m-agent__fill.is-on { width: var(--b); }
.m-agent__fill.is-done.is-on { background: #36d67e; }
.m-back { display: flex; align-items: center; gap: 4px; }
.m .m-back .icon { width: 14px; height: 14px; }
.m-diff { padding-block: 8px; background: #121212; border: 1px solid #242424; border-radius: 4px; font: 400 12px/16px var(--mono); color: var(--green); }
.m-diff div { height: 24px; padding: 4px 12px; background: rgba(54, 214, 126, .14); white-space: pre; }

/* browser and device under test */
.m-chrome { background: #121212; }
.m-url { padding: 4px 9px; background: #0a0a0a; border: 1px solid #696969; }
.m-page { background: #0a0a0a; }
.m-device { background: #000; border: 2px solid #696969; }
.m-rule { background: #696969; }
.m-log { background: #121212; }

/* the thread grows from the bottom as messages arrive */
/* Messages stack from the bottom; the oldest slide out under a 56px fade at the top. */
.m-thread--seq .m-messages { position: relative; gap: 0; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 56px); mask-image: linear-gradient(transparent, #000 56px); }
.m-thread--seq .m-msg { position: relative; margin-top: 2px; }
.m-msg__hl { position: absolute; inset: 0; background: rgba(255, 255, 255, .04); opacity: 0; transition: opacity .35s var(--ease-in-out); }
.m-msg__hl.is-on { opacity: 1; }
.m-thread--seq .m-msg > *:not(.m-msg__hl) { position: relative; }
.m-ref { display: inline-block; margin-top: 10px; padding: 2px 6px; border-radius: 3px; background: var(--w-06); font: 400 12px/16px var(--mono); color: #ac91f0; }
.m-pill--run { background: rgba(61, 91, 255, .18); color: #6980ff; }
/* A header avatar joining the thread: it scales in, and takes no gap while it is away. */
.m-at { color: #ac91f0; }
.m-grow { display: grid; width: 0; margin-left: -4px; opacity: 0; overflow: hidden; transition: width .35s var(--ease-in-out), margin-left .35s var(--ease-in-out), opacity .35s var(--ease-in-out); }
.m-grow > * { transform: scale(.6); transition: transform .35s var(--ease-in-out); }
.m-grow.is-on { width: 24px; margin-left: 0; opacity: 1; }
.m-grow.is-on > * { transform: none; }

/* schedule and automation cards play out, centred as they grow and shrink */
.m-auto--seq { top: 176.5px; transform: translateY(-50%); }
.m-auto--seq .m-auto__head { position: relative; }
.m-auto--seq .m-auto__head > div { flex: 1; }
.m-auto--seq .m-chips { flex: none; }
.m-tile3 { display: grid; place-items: center; border-radius: 3px; background: rgba(146, 117, 223, .18); color: #ac91f0; }
.m .m-tile3 .icon { width: 20px; height: 20px; }
.m-field { display: grid; gap: 4px; }
.m-field__label { font: 400 12px/16px var(--mono); color: #b0b0b0; }
.m-field__label.is-sans { font: 500 13px/16px var(--sans); }
.m-field__box { display: flex; align-items: center; justify-content: space-between; height: 32px; padding-inline: 10px; background: #0a0a0a; border: 1px solid #242424; border-radius: 1px; font-size: 14px; line-height: 20px; color: #e5e5e5; }
.m-field__box > span { display: flex; align-items: center; }
.m-field__box i { width: 1px; height: 18px; margin-left: 1px; background: #e5e5e5; }
.m-field__box .icon { color: #878787; }
.m-field.focus .m-field__box { border-color: #6a4ebb; }
.m-field.off .m-field__label, .m-field.off .m-field__box { color: #696969; }
.m-tab { display: grid; place-items: center; border-radius: 2px; font: 400 14px/16px var(--mono); color: #696969; }
.m-tab.is-on-tab { background: #242424; color: #e5e5e5; }
.m-day { display: grid; place-items: center; border: 1px solid #242424; border-radius: 2px; font: 400 13px/16px var(--mono); color: #b0b0b0; }
.m-day.is-on-tab { background: #242424; border-color: #3a3a3a; color: #e5e5e5; }
.m-box2 { background: rgba(255, 255, 255, .04); border: 1px solid #242424; border-radius: 4px; }
.m-banner2 { display: flex; align-items: center; gap: 10px; padding-inline: 14px; border-radius: 4px; background: rgba(54, 214, 126, .14); color: var(--green); font: 500 13px/18px var(--sans); }
.m-wait2 { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding-inline: 10px 12px; border-radius: 3px; background: rgba(61, 91, 255, .18); color: #6980ff; font: 500 12px/16px var(--sans); }
.m .m-wait2 .icon { width: 14px; height: 14px; }

/* hire screens */
.m-hire { display: block; }
.m-hire > .m-rail { position: absolute; left: 0; top: 0; bottom: 0; z-index: 2; background: #0a0a0a; }
.m-step > .m-hire__main { position: absolute; left: 51.2px; right: 0; top: 0; bottom: 0; }
.m-hair { background: #1e1e1e; }
.m-crumbs__rule { width: 1px; height: 13px; margin-inline: 2px 4px; background: #242424; }
.m-botbar { z-index: 1; background: #0a0a0a; border-bottom: 1px solid #1e1e1e; }
.m-stepchip { display: grid; place-items: center; background: #242424; font: 400 9.6px/13px var(--mono); color: #b0b0b0; }
.m-track { background: #242424; }
.m-track i { display: block; height: 3px; background: #087f72; }
.m-chatclip { overflow: hidden; }
.m-bub { display: flex; align-items: flex-start; padding: 7px 11.2px; background: #121212; border: 1px solid #1e1e1e; border-radius: 3px; font: 500 11.2px/16px var(--sans); white-space: normal; }
.m-bub.is-line { white-space: nowrap; }
.m-bub.is-you { background: rgba(255, 255, 255, .04); border-color: #242424; justify-content: flex-end; white-space: nowrap; align-items: center; }
.m-req { display: grid; place-items: center; border-radius: 2px; background: rgba(255, 173, 36, .14); font: 400 9.6px/13px var(--mono); color: #e9910c; }
.m-option { background: #0a0a0a; border: 1px solid #242424; border-radius: 3px; }
.m-logo { background: #1e1627; border: 1px solid #292132; border-radius: 3px; }
.m-form { background: #0a0a0a; border: 1px solid #242424; border-radius: 3px; }
.m-fieldbox { background: #0a0a0a; border: 1px solid #242424; border-radius: 2px; }
.m-seg2 { display: flex; padding: 1px; background: #0a0a0a; border: 1px solid #242424; border-radius: 2px; font: 500 10.4px/15px var(--sans); color: #878787; }
.m-seg2 span { flex: 1; display: grid; place-items: center; }
.m-seg2 .is-on { background: #242424; color: #fff; }
.m-connect { background: #0a0a0a; border-left: 1px solid #242424; z-index: 1; }
.m-plabel { background: #121212; border-block: 1px solid #1e1e1e; }
.m-plabel span:first-child { text-transform: uppercase; }
.m-donerow { display: flex; align-items: center; gap: 6px; }
.m-ops, .m-pstatus { border-bottom: 1px solid #1e1e1e; }
.m-b.m-teal { background: #08665c; border-color: #08665c; color: #fff; font: 400 9.6px/13px var(--mono); }
.m-readycard { background: #0a0a0a; border: 1px solid #242424; border-radius: 3px; }
.m-donebadge { display: grid; place-items: center; border-radius: 50%; background: #5be49a; border: 2px solid #000; color: #000; }
.m-allset { display: grid; place-items: center; background: rgba(54, 214, 126, .14); font: 400 9.6px/13px var(--mono); color: var(--green); }
.m-slack { background: #242424; border: 1px solid var(--w-12); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); overflow: hidden; font-family: var(--sans); }
.m-slkhead { background: rgba(255, 255, 255, .03); }
.m-slk16 { font: 500 16px/24px var(--sans); color: #f8f8f8; }
.m-slk13 { font: 500 13px/18px var(--sans); color: #ababab; }
.m-slkapp { display: grid; place-items: center; border-radius: 3px; background: rgba(255, 255, 255, .1); font: 500 12px/16px var(--sans); color: #ababab; }
.m-slktext { font: 500 16px/24px var(--sans); color: #d2d2d2; }
.m-slkbtn { display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; font: 500 14px/20px var(--sans); color: #fff; }
.m-slkbtn.is-green { background: #007a5a; border-color: #007a5a; }

.m-pr--ent { left: 40px; top: 95px; width: 561px; height: 410px; padding-bottom: 0; transform: none; }
.m-pr__cursor--ent { left: 114px; top: 452px; }

/* schedule and automation cards */
.m-auto { left: 80px; width: 440px; }
.m-auto__head { display: flex; align-items: center; gap: 12px; height: 70px; padding: 16px 20px 14px; }
.m-auto__head small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: #878787; }

/* light capability art */
.l { color: #000; font: 500 14px/20px var(--sans); }
.l-panel { background: #fff; border: 1px solid var(--k-08); }
.l-mono { font: 400 12px/16px var(--mono); color: var(--k-48); }
.l-memory { width: 272px; height: 210px; margin-top: 36px; padding: 14px; }
.l-memory ul { margin-top: 10px; }
.l-memory li { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 8px; font-size: 13px; }
.l-terminal { width: 300px; height: 192px; margin-top: 58px; }
.l-tabs { display: flex; gap: 16px; padding: 8px 10px 0; border-bottom: 1px solid var(--k-08); font: 400 12px/16px var(--mono); color: var(--k-48); }
.l-tabs span { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.l-tabs .is-on { color: #000; border-bottom: 1px solid #000; }
.l-tabs .icon { width: 14px; height: 14px; }
.l-term { display: grid; gap: 4px; padding: 14px 16px 16px; font: 400 12px/16px var(--mono); color: #0b0711; }
.l-term .ok { color: var(--k-72); }
.l-menu { width: 264px; height: 203px; margin-top: 76px; padding: 4px; border-radius: 4px; }
.l-menu__head { padding: 8px 8px 4px; font-size: 12px; line-height: 16px; color: var(--k-48); }
.l-menu__repo { padding: 6px 8px 2px; }
.l-menu__row { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 8px; font-size: 13px; line-height: 18px; }
.l-menu__row span:first-child { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-badge { flex: none; width: 72px; padding-block: 2px; font: 500 13px/18px var(--mono); letter-spacing: -.04em; text-align: center; }
.l-badge--work { background: #e3e8ff; color: #1f39c7; }
.l-badge--block { background: #fdecc8; color: #8f530d; }
.l-menu hr { margin: 4px; border: 0; border-top: 1px solid var(--k-08); }
.l-menu__item { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 8px; font-size: 13px; color: var(--k-64); }
.l-people { width: 220px; margin-top: 28px; }
.l-people__select { display: flex; align-items: center; gap: 8px; height: 36px; padding-inline: 8px; background: #fff; border: 1px solid var(--k-16); font-size: 13px; }
.l-people__select .icon:last-child { margin-left: auto; width: 14px; height: 14px; }
.l-people__list { height: 212px; margin-top: 4px; padding: 4px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.l-opt { display: flex; align-items: center; gap: 8px; height: 32px; padding-inline: 8px; font-size: 13px; line-height: 18px; }
.l-opt .icon { width: 14px; height: 14px; }
.l-opt .tick { margin-left: auto; }
.l-opt i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 2px; font: 500 10px/1 var(--mono); font-style: normal; }
.l-search { display: flex; align-items: center; gap: 8px; height: 34px; padding-inline: 8px; border-block: 1px solid var(--k-08); font-size: 13px; color: var(--k-48); }
.l-search .icon { width: 14px; height: 14px; }
.l-harness { width: 296px; height: 213px; margin-top: 54px; padding: 14px 15px; }
.l-harness__head { display: flex; justify-content: space-between; align-items: center; }
.l-harness__head small { font-size: 12px; line-height: 16px; color: var(--k-48); }
.l-harness__row { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--k-64); }
.l-select { display: flex; align-items: center; justify-content: space-between; height: 30px; padding-inline: 8px; color: #000; border: 1px solid var(--k-16); }
.l-select .icon { width: 12px; height: 12px; }
.l-harness__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--k-08); font-size: 13px; line-height: 18px; }
.l-stack { display: grid; gap: 10px; width: 280px; margin-top: 57px; }
.l-int { display: flex; align-items: center; gap: 12px; height: 62px; padding-inline: 12px; }
.l-int:nth-child(2) { transform: translateX(18px); }
.l-int img { width: 22px; height: 22px; }
.l-int small { display: block; font-size: 12px; line-height: 16px; color: var(--k-48); }
.l-int .icon { margin-left: auto; color: var(--teal); }

/* app cards */
.m-menubar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 15px; height: 26px; padding-inline: 18px; background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 10.4px; line-height: 12px; color: #fff; }
.m-menubar b { font-weight: 700; }
.m .m-menubar .icon { width: 12px; height: 12px; margin-right: -4px; }
.m-desktop { position: absolute; left: 40px; top: 64px; width: 675px; height: 481px; border-radius: 12px; background: #1e1e1e; border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 5px 16px rgba(0, 0, 0, .5); overflow: hidden; }
.m-traffic { display: flex; gap: 6px; padding: 6px 8px; }
.m-traffic i { width: 10px; height: 10px; border-radius: 50%; background: #3d3d3d; }
.m-desktop__body { display: flex; height: 100%; background: #0a0a0a; }
.m-desktop .m-rail, .m-chrome .m-rail { --r: .6; border-right-width: .6px; }
.m-desktop__main { position: relative; flex: 1; padding: 9px 0 0 47px; }
.m-desktop__main .m-crumbs { font-size: 7.8px; line-height: 11px; gap: 4px; }
.m-desktop__main .m-crumbs .icon { width: 8px; height: 8px; }
.m-desktop__main .m-hire__title { margin-top: 17px; font-size: 10.8px; line-height: 15px; }
.m-desktop__main .m-hire__sub { margin-top: 2px; font-size: 7.8px; line-height: 11px; }
.m-desktop__main .m-templates { width: 966px; margin-top: 11px; transform: scale(.75); transform-origin: 0 0; }
.m-chrome { position: absolute; left: 40px; top: 64px; width: 864px; height: 547px; overflow: hidden; border-radius: 6px 6px 0 0; background: #202124; box-shadow: 0 5px 16px rgba(0, 0, 0, .5); }
.m-chrome__tabs { display: flex; align-items: flex-end; height: 24px; padding-left: 7px; }
.m-chrome .m-traffic { align-self: flex-start; gap: 5px; padding: 8px 0 0; }
.m-chrome .m-traffic i { width: 7px; height: 7px; }
.m-chrome__tab { display: flex; align-items: center; gap: 4px; width: 154px; height: 20px; margin-left: 13px; padding-inline: 12px; border-radius: 5px 5px 0 0; background: #0f0f0f; font-size: 7.2px; line-height: 10px; color: #e5e5e5; }
.m-chrome__tab svg { width: 8px; height: 7px; fill: var(--logo); }
.m-chrome__url { display: flex; align-items: center; gap: 8px; height: 24px; padding-inline: 14px; background: #0f0f0f; color: #b0b0b0; font-size: 7.2px; line-height: 17px; }
.m .m-chrome__url .icon { width: 10px; height: 10px; }
.m-chrome__url span:last-child { width: 660px; margin-left: 41px; height: 17px; padding-inline: 12px; border-radius: 9px; background: #202124; }
.m-chrome__body { position: relative; display: flex; height: 499px; background: #0a0a0a; }
.m-chrome__main { position: relative; flex: 1; }
.m-chrome__hello { position: absolute; left: 309px; top: 55px; font-size: 19.2px; line-height: 24px; white-space: nowrap; }
.m-chrome__box { position: absolute; left: 195px; top: 93px; width: 480px; height: 86px; padding: 8px 9px; background: #000; border: 1px solid #242424; font-size: 9.6px; line-height: 14px; color: #e5e5e5; }
.m-chrome__row { position: absolute; left: 7px; right: 7px; bottom: 6px; display: flex; align-items: center; justify-content: space-between; color: #b0b0b0; font-size: 8.4px; line-height: 12px; }
.m .m-chrome__row .icon { width: 10px; height: 10px; }
.m-chrome__row span { display: flex; align-items: center; gap: 4px; margin-left: auto; margin-right: 12px; }
.m-chrome__row i { display: grid; place-items: center; width: 22px; height: 22px; background: #08665c; color: #fff; }
.m-phone { position: absolute; left: 52px; top: 61px; width: 292px; height: 605px; max-width: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero__copy, .split, .split--right, .platform__head, .story__grid, .costs { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { gap: 24px; }
  .hero__copy .display { max-width: 15em; }
  .hero__side { max-width: none; }
  .lined, .platform { border-inline: 0; }
  .light::before, .platform__marks, .platform__foot, .corners { display: none; }
  .split--right .review__copy { order: 0; }
  .split__content { min-height: 0; }
  .review__types, .story__points { margin-top: 0; }
  .platform__head { gap: 16px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logos > * { min-height: 148px; border-top: 1px solid var(--w-12); }
  .logos > *:nth-child(-n + 2) { border-top: 0; }
  .logos > *:nth-child(odd) { border-left: 0; }
  .logos--many > *:first-child { grid-row: auto; grid-column: 1 / -1; min-height: 0; }
  .logos--many > *:nth-child(2) { border-top: 1px solid var(--w-12); }
  .logos--many > *:nth-child(odd):not(:first-child) { border-left: 1px solid var(--w-12); }
  .logos--many > *:nth-child(even) { border-left: 0; }
  .intent { padding-top: 96px; }
  .product { margin-top: 64px; }
  .tabs__panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .tabs__copy { min-height: 260px; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .cap, .cap:nth-child(3n), .cap:nth-last-child(-n + 3) { border-right: 1px solid var(--k-08); border-bottom: 1px solid var(--k-08); }
  .cap:nth-child(2n) { border-right: 0; }
  .cap:nth-last-child(-n + 2) { border-bottom: 0; }
  .story__media { min-height: clamp(380px, 62vw, 560px); }
  .story__grid { margin-top: 32px; gap: 32px; }
  .apps { padding-block: 72px 96px; }
  .costs { gap: 40px; padding-block: 72px 96px; }
  .footer { margin-top: 96px; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .footer__tag { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .footer__brand { margin-top: 72px; }
}

@media (max-width: 720px) {
  .hero { padding-top: 40px; }
  .hero__stage { margin-top: 32px; }
  .intent__sub { margin-top: 16px; }
  .tabs { margin-top: 32px; }
  .tabs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tabs__tab { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 10px; }
  .tabs__copy { padding: 20px; min-height: 240px; }
  .split { padding-block: 40px; gap: 32px; }
  .automations { margin-top: 48px; padding-block: 40px 64px; }
  .automations__grid, .apps__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .automations__grid { margin-top: 32px; }
  .apps__grid { margin-top: 40px; }
  .app .btn { margin-top: 24px; }
  .platform { padding-block: 64px 80px; }
  .caps { grid-template-columns: minmax(0, 1fr); }
  .cap, .cap:nth-child(2n), .cap:nth-child(3n), .cap:nth-last-child(-n + 2), .cap:nth-last-child(-n + 3) { min-height: 0; border-right: 0; border-bottom: 1px solid var(--k-08); }
  .cap:last-child { border-bottom: 0; }
  .cap__desc { min-height: 0; }
  .cap__art { align-items: center; min-height: 280px; margin-top: 16px; }
  .cap__art > * { margin-top: 0; }
  .story { padding-block: 64px; }
  .story__points, .review__types { grid-template-columns: minmax(0, 1fr); }
  .story__quote { left: 20px; right: 20px; bottom: 20px; }
  /* Beside the attribution there's no room on a phone, so the button moves to the top corner. */
  .story__watch { top: 20px; right: 20px; bottom: auto; }
  .subs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subs > * { min-height: 148px; border-top: 1px solid var(--w-12); }
  .subs > *:first-child { grid-column: 1 / -1; min-height: 0; border-top: 0; }
  .subs > *:nth-child(2) { border-left: 0; }
  .cta { padding: 16px; }
  .cta__box { min-height: 0; padding: 32px 16px; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #story-title br, #cta-title br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .ticker { white-space: normal; }
  .ticker__group[aria-hidden] { display: none; }
}