/* The public pages' visual system: home, the catalogue, a service, Process AI, Product AI, GTM.

   Graphite & Green: neutral grey shades, green for what runs on its own and for the small marks
   that pace a page (section rules, step numbers, the line, "run it" links), silver for what waits
   for a named person, white main buttons. Premium by
   restraint: flat surfaces, hairlines, soft neutral shadows, real screens shown straight
   and sharp, two-tone headlines in one typeface. No glow, no gradient text, no grain.
   Contrast comes from ink bands (the line, the closing call), which re-scope the tokens.
   Motion is choreography, not decoration: panels settle into place as they enter, the
   story follows the reader, a signature lets one item across the line. Everything reads
   without motion (prefers-reduced-motion) and without JavaScript (reveals hide only with .js). */

html, body { overflow-x: clip; }
body.site { position: relative; }
body.site > main, body.site > footer { position: relative; z-index: 1; }

/* ------------------------------------------------------------------ reveal & motion */
.js [data-reveal] { opacity: 0; transform: translateY(34px); filter: blur(6px);
  transition: opacity 1s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s), filter 1s var(--ease) var(--d, 0s); }
.js [data-reveal="left"] { transform: translateX(-40px); }
.js [data-reveal="right"] { transform: translateX(40px); }
.js [data-reveal="zoom"] { transform: translateY(48px) scale(.94); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
/* A container that only needs to know it arrived (a line that draws), not to fade itself. */
.js [data-reveal="line"] { opacity: 1; transform: none; filter: none; }

/* A heading's words rise one after another (motion.js splits them); the heading itself stays put. */
.js [data-split] { opacity: 1; transform: none; filter: none; }
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin: 0 -.02em -.1em; }
.js [data-split] .wi { display: inline-block; transform: translateY(110%) rotate(3deg); transform-origin: left bottom;
  transition: transform 1s var(--ease) calc(var(--d, 0s) + var(--i, 0) * 55ms); }
.js [data-split].in .wi { transform: none; }
/* An eyebrow's line draws in. */
.js .eyebrow2[data-reveal]::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) calc(var(--d, 0s) + .25s); }
.js .eyebrow2[data-reveal].in::before { transform: none; }

/* A card lit where the pointer is, and lifted. */
[data-spot] { position: relative; isolation: isolate; transition: transform .5s var(--ease), border-color .35s, box-shadow .5s var(--ease); }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--accent-rgb) / .11), transparent 48%); }
[data-spot]:hover { transform: translateY(-5px); border-color: rgb(var(--accent-rgb) / .38); box-shadow: 0 30px 70px -36px rgb(var(--accent-rgb) / .45); }
[data-spot]:hover::before { opacity: 1; }

/* How far down the page you are. */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 80; height: 2px; transform: scaleX(0); transform-origin: left; pointer-events: none;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / .2), var(--accent)); box-shadow: 0 0 14px rgb(var(--accent-rgb) / .7); }

/* The page's light: two slow glows behind everything, drifting. */
body.site .aurora { overflow: hidden; }
body.site .aurora::before, body.site .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
body.site .aurora::before { width: 62vmax; height: 62vmax; top: -34vmax; left: -18vmax; opacity: .13;
  background: radial-gradient(circle, rgb(var(--accent-rgb)) 0, transparent 62%); animation: drift1 26s ease-in-out infinite alternate; }
body.site .aurora::after { width: 48vmax; height: 48vmax; top: 18vh; right: -22vmax; opacity: .08;
  background: radial-gradient(circle, #2fb8a6 0, transparent 62%); animation: drift2 32s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 20vmax) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-split] .wi { transform: none; transition: none; }
  body.site .aurora::before, body.site .aurora::after { animation: none; }
  [data-spot], [data-spot]:hover { transform: none; }
}
[data-parallax] { will-change: transform; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* ------------------------------------------------------------------ type */
.eyebrow2 { display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.eyebrow2::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); }
.h-display { margin: 20px 0 0; font: 600 clamp(38px, 5vw, 74px)/1.02 var(--sans); letter-spacing: -.045em; text-wrap: balance; }
.h-display em, .h-2 em { font: inherit; letter-spacing: inherit; font-style: normal; color: var(--text-3); }
.h-2 { margin: 16px 0 0; font: 600 clamp(30px, 3.4vw, 50px)/1.06 var(--sans); letter-spacing: -.04em; text-wrap: balance; max-width: 900px; }
.lede-lg { margin: 22px 0 0; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.65; color: var(--text-2); max-width: 640px; text-wrap: pretty; }
.lede-lg b, .lede-lg strong { color: var(--text); font-weight: 560; }
.sec { margin-top: 150px; scroll-margin-top: 90px; }
.sec-head { max-width: 900px; }
.sec-head.center { margin: 0 auto; text-align: center; }
.sec-head.center .eyebrow2 { justify-content: center; }
.sec-head.center .lede-lg { margin-left: auto; margin-right: auto; }
.mono-note { font: 500 11.5px/1.55 var(--mono); color: var(--text-3); letter-spacing: .01em; }

/* ------------------------------------------------------------------ real screens */
.shot { position: relative; margin: 0; padding: 0; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-3); }
.shot .bar { display: none; }
.shot img { display: block; width: 100%; height: auto; border-radius: 13px; }
.shot figcaption { position: absolute; top: calc(100% + 12px); left: 2px; right: 2px; margin: 0; font: 500 11.5px/1.5 var(--mono); color: var(--text-3); }
.persp .shot, .persp:hover .shot { transform: none; }
.shot.card-shot { max-width: 560px; margin: 0 auto; }
.hot { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; font: 600 12px/1 var(--sans); color: var(--btn-fg); background: var(--btn-bg);
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-2); }
.hot.r { margin: -13px 0 0 9px; }
.callouts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: c; }
.callouts li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; counter-increment: c; }
.callouts li::before { content: counter(c); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--sans); color: var(--btn-fg); background: var(--btn-bg); }
.callouts b { display: block; font-size: 15.5px; font-weight: 580; margin-bottom: 2px; }
.callouts span { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }

/* ------------------------------------------------------------------ a ticker of real sentences */
.marquee { overflow: hidden; margin: 0 calc(50% - 50vw); padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee + .marquee { margin-top: 6px; }
.marquee .track { display: flex; width: max-content; animation: slide var(--dur, 90s) linear infinite; }
.marquee.rev .track { animation-direction: reverse; }
.marquee:hover .track, .marquee.paused .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.sentence { flex: none; display: inline-flex; align-items: center; gap: 14px; padding: 12px 34px 12px 0; border: 0; background: none; cursor: pointer;
  font: 400 clamp(15.5px, 1.3vw, 18.5px)/1.3 var(--sans); letter-spacing: -.01em; color: var(--text-2); white-space: nowrap; transition: color .25s; }
.sentence::after { content: ""; width: 1px; height: 22px; margin-left: 20px; background: var(--line-3); }
.sentence:hover { color: var(--text); }
.sentence .ic { width: 17px; height: 17px; color: var(--text-3); }
.sentence b { color: var(--text); font-weight: 580; }
/* the three meanings, as everywhere on the site: green on its own, silver waits, red never */
.sentence .c, .ticker-key .c { display: inline-flex; align-items: center; gap: 8px; }
.sentence .c i, .ticker-key .c i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.sentence .c-wait i, .ticker-key .c-wait i { background: var(--person); }
.sentence .c-never i, .ticker-key .c-never i { background: var(--rose); }
.ticker-key { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; margin: 0 auto 20px; max-width: 900px;
  font: 500 12px/1.5 var(--mono); color: var(--text-3); text-align: center; }
.ticker-key .c { color: var(--text-2); }

/* ------------------------------------------------------------------ pinned story */
.story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 72px; margin-top: 40px; }
.chapter { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; opacity: .32; transition: opacity .6s var(--ease); }
.chapter.on { opacity: 1; }
.chapter .num { font: 500 12px var(--mono); color: var(--accent); letter-spacing: .12em; }
.chapter h3 { margin: 14px 0 0; font: 600 clamp(26px, 2.5vw, 36px)/1.1 var(--sans); letter-spacing: -.035em; }
.chapter p { margin: 16px 0 0; color: var(--text-2); font-size: 16.5px; line-height: 1.65; max-width: 470px; }
.chapter .chapter-media { display: none; }
.stage { position: sticky; top: 14vh; height: 72vh; }
.stage .frame { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(16px);
  transition: opacity .7s var(--ease), transform .7s var(--ease); pointer-events: none; }
.stage .frame.on { opacity: 1; transform: none; pointer-events: auto; }
.stage .frame .shot { width: 100%; max-height: 100%; }
.stage .frame .shot img { max-height: calc(72vh - 8px); object-fit: cover; object-position: top left; }

/* ------------------------------------------------------------------ numbers */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 140px; border-top: 1px solid var(--line-3); border-bottom: 1px solid var(--line-2); }
.numbers > div { padding: 36px 30px 32px; border-left: 1px solid var(--line-2); }
.numbers > div:first-child { border-left: 0; padding-left: 0; }
.numbers b { display: block; font: 500 clamp(46px, 5vw, 80px)/.95 var(--sans); letter-spacing: -.055em; color: var(--text); font-variant-numeric: tabular-nums; }
.numbers b small { font-size: .42em; letter-spacing: -.02em; color: var(--text-3); }
.numbers span { display: block; margin-top: 14px; font-size: 14px; color: var(--text-2); line-height: 1.5; max-width: 240px; }

/* ------------------------------------------------------------------ product rows (zig-zag) */
.feature-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 80px; align-items: center; margin-top: 150px; }
.feature-row.flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr); }
.feature-row.flip .copy { order: 2; }
.feature-row .media { position: relative; margin-right: -90px; }
.feature-row.flip .media { margin-right: 0; margin-left: -90px; }
.feature-row .copy .btn { margin-top: 28px; text-decoration: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tag-row span { padding: 6px 12px; border-radius: 999px; font: 500 12.5px var(--sans); color: var(--text-2); border: 1px solid var(--line-2); background: var(--surface); }
.tag-row span b { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ ink bands: the line, the closing call */
.line-band, .cta-xl {
  --text: #ededee;
  --text-2: #a6a9ae;
  --text-3: #71757c;
  --tint-rgb: 255 255 255;
  --bg-rgb: 11 12 13;
  --line: rgb(255 255 255 / .09);
  --line-2: rgb(255 255 255 / .14);
  --line-3: rgb(255 255 255 / .22);
  --surface: #141517;
  --surface-2: #18191b;
  --surface-3: #1e1f22;
  --node: #141517;
  --accent: #3ddc97;
  --accent-rgb: 61 220 151;
  --accent-2: #74e6b5;
  --accent-soft: rgb(61 220 151 / .12);
  --accent-line: rgb(61 220 151 / .42);
  --green: #3ddc97;
  --green-soft: rgb(61 220 151 / .1);
  --green-line: rgb(61 220 151 / .38);
  --amber: #e4e6e9;
  --amber-soft: rgb(228 230 233 / .1);
  --amber-line: rgb(228 230 233 / .38);
  --btn-bg: #ededee;
  --btn-fg: #121314;
  --btn-bg-hover: #ffffff;
  --abyss: #0b0c0d;
  color: var(--text); background: var(--abyss); }
.line-band { position: relative; margin: 160px calc(50% - 50vw) 0; padding: 110px max(28px, calc(50vw - 640px)) 100px; overflow: hidden; }
.track-wrap { position: relative; margin-top: 60px; height: 230px; container-type: inline-size; }
.line-rail { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-3) 10%, var(--line-3) 90%, transparent); }
.the-line { position: absolute; left: 62%; top: 6%; bottom: 6%; width: 2px; margin-left: -1px; background: var(--accent); }
.the-line-label { position: absolute; left: 62%; top: -12px; transform: translateX(-50%); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.pkt { position: absolute; top: 50%; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin-top: -19px; border-radius: 999px;
  font: 500 13px/1 var(--sans); white-space: nowrap; border: 1px solid; background: var(--surface); }
.pkt .ic { width: 14px; height: 14px; }
.pkt.free { color: var(--green); border-color: var(--green-line); animation: pass var(--t, 9s) linear infinite; animation-delay: var(--dl, 0s); }
.pkt.lane-up { top: 22%; } .pkt.lane-down { top: 78%; }
@keyframes pass { from { transform: translateX(-24cqw); } to { transform: translateX(118cqw); } }
.pkt.held { color: var(--amber); border-color: var(--amber-line); animation: held 12s var(--ease) infinite; }
@keyframes held { 0% { transform: translateX(-24cqw); } 32% { transform: translateX(47cqw); } 66% { transform: translateX(47cqw); } 100% { transform: translateX(118cqw); } }
.sig { position: absolute; left: 62%; top: 50%; width: 42px; height: 42px; margin: -82px 0 0 -21px; border-radius: 50%; display: grid; place-items: center;
  color: var(--btn-fg); background: var(--accent); box-shadow: 0 0 0 4px var(--abyss);
  opacity: 0; transform: scale(.6); animation: sign 12s var(--ease) infinite; }
.sig .ic { width: 19px; height: 19px; }
@keyframes sign { 0%, 42% { opacity: 0; transform: scale(.6); } 50%, 62% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(.6); } }
.sig-note { position: absolute; left: 62%; top: 50%; margin: -70px 0 0 32px; font: 500 12px var(--mono); color: var(--text-2); white-space: nowrap; opacity: 0; animation: signnote 12s var(--ease) infinite; }
@keyframes signnote { 0%, 44% { opacity: 0; } 50%, 64% { opacity: 1; } 70%, 100% { opacity: 0; } }
.line-legend { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 18px; }
.line-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.line-legend i { width: 9px; height: 9px; border-radius: 50%; }
.promises { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 76px; padding-top: 40px; border-top: 1px solid var(--line); }
.promises h3 { margin: 16px 0 8px; font-size: 18px; letter-spacing: -.02em; }
.promises p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.promises .ic { width: 22px; height: 22px; color: var(--accent); }

/* ------------------------------------------------------------------ features: tiles with small scenes (illustrations) */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 14px; margin-top: 44px; }
.tile { position: relative; grid-column: span 2; padding: 22px 22px 24px; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); transition: border-color .3s, box-shadow .4s var(--ease); }
.tile:hover { border-color: var(--line-3); box-shadow: var(--shadow-2); }
.tile.w3 { grid-column: span 3; } .tile.w4 { grid-column: span 4; } .tile.tall { grid-row: span 2; }
.tile h3 { margin: 0; font-size: 17.5px; letter-spacing: -.02em; }
.tile p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.58; max-width: 460px; }
.scene { position: relative; height: 200px; margin: 0 0 20px; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
.tile.tall .scene { height: 300px; }

/* threshold scene: items settle on a scale; left of the line released, right of it held */
.sc-threshold .axis { position: absolute; left: 8%; right: 8%; top: 58%; height: 1px; background: var(--line-3); }
.sc-threshold .mark { position: absolute; left: 60%; top: 24%; bottom: 20%; width: 2px; background: var(--accent); }
.sc-threshold .mark b { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 600 11.5px var(--mono); color: var(--accent); white-space: nowrap; }
.sc-threshold .zone { position: absolute; top: 72%; font: 500 11px var(--mono); }
.sc-threshold .zone.l { left: 8%; color: var(--green); } .sc-threshold .zone.r { right: 8%; color: var(--amber); }
.sc-threshold .dot { position: absolute; top: 58%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; left: var(--at);
  background: var(--c); box-shadow: 0 0 0 3px var(--surface-2); animation: drop 3.6s var(--ease) infinite; animation-delay: var(--dl); }
@keyframes drop { 0% { transform: translateY(-50px); opacity: 0; } 30%, 80% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* phone scene */
.sc-phone .phone { position: absolute; left: 50%; top: 12px; width: 170px; height: 300px; margin-left: -85px; border-radius: 26px; padding: 14px 10px;
  background: var(--surface); border: 1px solid var(--line-3); box-shadow: var(--shadow-2); }
.sc-phone .bubble { margin-top: 8px; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-3); font-size: 11.5px; line-height: 1.45; color: var(--text); animation: bub 6s var(--ease) infinite; }
.sc-phone .bubble small { display: block; color: var(--text-3); font: 500 9.5px var(--mono); margin-bottom: 4px; }
.sc-phone .btns { display: flex; gap: 6px; margin-top: 10px; }
.sc-phone .btns span { flex: 1; padding: 7px 0; text-align: center; border-radius: 8px; font: 600 11px var(--sans); }
.sc-phone .btns .ok { background: var(--approve-bg); color: var(--approve-fg); animation: tap 6s var(--ease) infinite; }
.sc-phone .btns .no { background: var(--surface-3); color: var(--text-2); }
.sc-phone .done { margin-top: 12px; padding: 8px 10px; border-radius: 10px; font: 600 11px var(--sans); color: var(--green); background: var(--green-soft); border: 1px solid var(--green-line); opacity: 0; animation: done 6s var(--ease) infinite; }
@keyframes bub { 0% { opacity: 0; transform: translateY(8px); } 12%, 100% { opacity: 1; transform: none; } }
@keyframes tap { 0%, 40% { transform: none; } 46% { transform: scale(.94); } 52%, 100% { transform: none; } }
@keyframes done { 0%, 52% { opacity: 0; transform: translateY(6px); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* document scene: a reading line passes over a page, quoted lines are marked */
.sc-doc .page { position: absolute; left: 50%; top: 22px; width: 220px; height: 140px; margin-left: -110px; padding: 16px 16px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2); overflow: hidden; }
.sc-doc .page i { display: block; height: 6px; margin: 0 0 9px; border-radius: 3px; background: var(--surface-3); width: var(--w); }
.sc-doc .page i.q { background: var(--accent-soft); animation: quote 4s var(--ease) infinite; animation-delay: var(--dl); }
.sc-doc .scanline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); animation: scan 4s ease-in-out infinite; }
@keyframes scan { 0% { transform: translateY(0); } 50% { transform: translateY(138px); } 100% { transform: translateY(0); } }
@keyframes quote { 0%, 30% { background: var(--surface-3); } 45%, 90% { background: rgb(var(--accent-rgb) / .45); } 100% { background: var(--surface-3); } }

/* seal */
.stamp { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); border: 1.5px solid currentColor; }
.stamp::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgb(var(--accent-rgb) / .55); }
.stamp svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 40s linear infinite; }
.stamp svg.ring text { fill: currentColor; font: 600 10.5px var(--mono); letter-spacing: 2.4px; }
.stamp .core { display: grid; place-items: center; gap: 2px; text-align: center; }
.stamp .core .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.stamp .core b { font: 700 12.5px var(--sans); letter-spacing: .18em; }
@keyframes spin { to { transform: rotate(360deg); } }
.press { transform: rotate(-6deg); animation: press .9s var(--ease) both; }
@keyframes press { 0% { transform: scale(1.3) rotate(-14deg); opacity: 0; } 60% { transform: scale(.97) rotate(-6deg); opacity: 1; } 100% { transform: rotate(-6deg); opacity: 1; } }
.press-loop { transform: rotate(-6deg); animation: pressloop 6s var(--ease) infinite; }
@keyframes pressloop { 0% { transform: scale(1.3) rotate(-14deg); opacity: 0; } 12% { transform: scale(.97) rotate(-6deg); opacity: 1; } 18%, 88% { transform: rotate(-6deg); opacity: 1; } 100% { transform: rotate(-6deg); opacity: 0; } }
.sc-seal { display: grid; place-items: center; }

/* connectors around the engine */
.sc-orbit { display: grid; place-items: center; }
.sc-orbit .core { width: 56px; height: 56px; }
.sc-orbit .ring { position: absolute; left: 50%; top: 50%; width: var(--r); height: var(--r); margin: calc(var(--r) / -2) 0 0 calc(var(--r) / -2); border-radius: 50%; border: 1px solid var(--line-2); animation: spin var(--t) linear infinite; }
.sc-orbit .ring span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 5px 10px; border-radius: 999px; font: 500 11.5px var(--sans); color: var(--text); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); white-space: nowrap; }
.sc-orbit .ring span:nth-child(2) { top: 100%; } .sc-orbit .ring span:nth-child(3) { top: 50%; left: 0; } .sc-orbit .ring span:nth-child(4) { top: 50%; left: 100%; }
.sc-orbit .ring span { animation: counter var(--t) linear infinite; }
@keyframes counter { to { transform: translate(-50%, -50%) rotate(-360deg); } }

/* a model reads, the rules decide */
.sc-ai { display: flex; align-items: center; justify-content: center; gap: 16px; }
.sc-ai .node { padding: 11px 14px; border-radius: 11px; font: 500 12.5px var(--sans); border: 1px solid; display: inline-flex; gap: 8px; align-items: center; background: var(--surface); }
.sc-ai .node .ic { width: 15px; height: 15px; }
.sc-ai .model { color: var(--violet); border-color: rgb(var(--violet-rgb) / .35); }
.sc-ai .gate { color: var(--accent); border-color: var(--accent-line); }
.sc-ai .wire { position: relative; width: 64px; height: 1px; background: var(--line-3); }
.sc-ai .wire::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); animation: flow 2.4s linear infinite; }
@keyframes flow { from { left: 0; } to { left: calc(100% - 7px); } }

/* the audit log */
.sc-log { padding: 16px 18px; display: grid; align-content: end; gap: 7px; }
.sc-log div { display: flex; gap: 10px; font: 500 11.5px var(--mono); color: var(--text-2); opacity: 0; animation: logline 8s var(--ease) infinite; animation-delay: var(--dl); }
.sc-log div em { font-style: normal; color: var(--text-3); }
.sc-log div b { color: var(--green); font-weight: 600; }
@keyframes logline { 0% { opacity: 0; transform: translateY(6px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ each kind of work: a flat tint and a glyph */
.cat-art { position: relative; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--hue) 6%, var(--surface)); }
.cat-glyph { position: relative; z-index: 1; width: 44px; height: 44px; padding: 11px; border-radius: 12px; color: var(--hue);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--hue) 30%, transparent); }

/* ------------------------------------------------------------------ flow (how a service works) */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 40px; position: relative; }
.flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 32px; height: 1px; background: var(--line-3); }
.flow::after { content: ""; position: absolute; top: 29px; left: 6%; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: travel 6s var(--ease) infinite; }
@keyframes travel { 0% { left: 6%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 93%; opacity: 0; } }
.flow-step { position: relative; padding: 0 16px; }
.flow-step .node { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.flow-step .node .ic { width: 24px; height: 24px; stroke-width: 1.5; }
.flow-step .k { display: block; margin-top: 20px; font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.flow-step h4 { margin: 6px 0 8px; font-size: 17px; letter-spacing: -.02em; }
.flow-step p, .flow-step li { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.flow-step ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.flow-step li { display: flex; gap: 8px; align-items: baseline; }
.flow-step li i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c, var(--text-3)); transform: translateY(-1px); }

/* ------------------------------------------------------------------ readable conditions */
.cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cond-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px dashed var(--line-3); }
.cond-group > .gk { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-right: 2px; }
.cond .j-and, .cond .j-or { font: 600 10.5px var(--mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.chip2 { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; max-width: 100%; padding: 4px 4px 4px 11px; border-radius: 9px; font-size: 13px; line-height: 1.3;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--text); }
.chip2 .rel { color: var(--text-3); font-size: 12.5px; }
.chip2 .val { font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--surface-3); overflow-wrap: anywhere; }
.chip2.always { padding: 6px 11px; }

/* ------------------------------------------------------------------ FAQ, the closing call */
.faq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 60px; margin-top: 150px; }
.faq2 .sticky { position: sticky; top: 110px; align-self: start; }
.cta-xl { position: relative; margin: 160px calc(50% - 50vw) 0; padding: 120px 28px 130px; text-align: center; }
.cta-xl .h-display { margin-top: 18px; }
.cta-xl p { margin: 20px auto 0; max-width: 560px; color: var(--text-2); font-size: 17px; }
.cta-xl .actions { justify-content: center; margin-top: 32px; }
.cta-xl .btn { text-decoration: none; }
/* the page ends on the band: no gap between it and the footer */
.home-main:has(> .cta-xl:last-child) { padding-bottom: 0; }
main:has(> .cta-xl:last-child) + footer.site-foot { margin-top: 0; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .story { grid-template-columns: 1fr; gap: 0; }
  .stage { display: none; }
  .chapter { min-height: 0; opacity: 1; padding: 34px 0; }
  .chapter .chapter-media { display: block; margin-top: 26px; }
  .feature-row, .feature-row.flip { grid-template-columns: 1fr; gap: 44px; }
  .feature-row.flip .copy { order: 0; }
  .feature-row .media, .feature-row.flip .media { margin: 0; }
  .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .numbers > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile.w3, .tile.w4 { grid-column: span 2; }
  .tile.tall { grid-row: auto; }
  .promises { grid-template-columns: 1fr; gap: 30px; }
  .faq2 { grid-template-columns: 1fr; gap: 20px; }
  .faq2 .sticky { position: static; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .flow::before, .flow::after { display: none; }
}
@media (max-width: 640px) {
  .sec { margin-top: 100px; }
  .feature-row { margin-top: 100px; }
  .numbers { margin-top: 100px; }
  .numbers > div { padding: 26px 16px 24px 0; }
  .numbers > div:nth-child(even) { padding-left: 16px; }
  .line-band { margin-top: 110px; padding: 80px 16px 70px; }
  .track-wrap { height: 200px; }
  .the-line-label { font-size: 10px; }
  .sig-note { display: none; }
  .flow { grid-template-columns: 1fr; }
  .cta-xl { padding: 80px 18px 90px; margin-top: 110px; }
  .hot { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 11px; }
  .hot.r { margin: -11px 0 0 7px; }
  .shot figcaption { position: static; margin: 12px 2px 0; }
}

/* Talk to us (contact.html) and the "on your own systems" steps other pages hand over to it. */
.talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 64px; align-items: start; padding: 24px 0 40px; }
.talk .h-display { font-size: clamp(34px, 4.2vw, 60px); }
.talk-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; max-width: 560px; }
.talk-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: start; }
.talk-steps .n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 13px/1 var(--mono); color: var(--accent); }
.talk-steps b { display: block; font-size: 16px; font-weight: 560; color: var(--text); margin-top: 6px; }
.talk-steps p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.talk-card { position: sticky; top: 96px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); box-shadow: var(--lift); padding: 26px 24px 20px; }
.talk-card .field { margin-bottom: 16px; }
.talk-card .field .opt { color: var(--text-3); font-weight: 400; margin-left: 6px; }
.talk-card textarea { min-height: 132px; }
.talk-about { margin-bottom: 18px; }
.talk-chip { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.talk-chip:hover { border-color: var(--accent-line); color: var(--text); }
.talk-chip b { color: var(--text); font-weight: 560; }
.talk-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.talk-note { margin: 0; flex: 1 1 220px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.talk-done { padding: 18px 4px 8px; }
.talk-done .done-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.talk-done .done-mark .ic { width: 20px; height: 20px; }
.talk-done h2 { margin: 18px 0 0; }
.talk-done p { margin: 10px 0 0; color: var(--text-2); line-height: 1.6; }
.talk-done b { color: var(--text); font-weight: 560; overflow-wrap: anywhere; }
.talk-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px !important; }
@media (max-width: 900px) {
  .talk { grid-template-columns: 1fr; gap: 36px; padding-top: 8px; }
  .talk-card { position: static; }
}

/* Last, so it wins over every rule above. */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  /* app.css stops every animation here; what an animation would have revealed is shown at rest. */
  .sig, .sig-note, .sc-phone .done, .sc-log div, .radar b, .pins span { opacity: 1; transform: none; }
  .pkt.free { transform: translateX(6cqw); } .pkt.free.lane-down { transform: translateX(76cqw); }
  .pkt.held { transform: translateX(47cqw); }
  .stage .frame, .chapter { transition: none; }
  /* the outer ring of tools sits on the diagonals, clear of the inner ring */
  .sc-orbit .ring + .ring span:nth-child(1) { left: 14.6%; top: 14.6%; } .sc-orbit .ring + .ring span:nth-child(2) { left: 85.4%; top: 85.4%; }
  .sc-orbit .ring + .ring span:nth-child(3) { left: 14.6%; top: 85.4%; } .sc-orbit .ring + .ring span:nth-child(4) { left: 85.4%; top: 14.6%; }
}

/* The ink bands wear the grid brighter, fading to their edges. */
.line-band, .cta-xl {
  background:
    radial-gradient(ellipse 75% 70% at 50% 45%, transparent 30%, var(--abyss) 88%),
    radial-gradient(circle, rgb(var(--accent-rgb) / .55) 0 1.4px, transparent 1.9px) 112px 112px / 224px 224px,
    linear-gradient(rgb(var(--tint-rgb) / .075) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgb(var(--tint-rgb) / .075) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--abyss); }

/* How the agents work (agents.js): who does each step, AI agent, code or a person. */
.ag-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 880px; }
.ag-flow li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface, rgba(255,255,255,.02)); }
.ag-flow p { margin: 0; color: var(--text-2); line-height: 1.55; }
.ag-n { font: 500 12px/1.9 var(--mono); color: var(--text-3); }
.ag-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 4px !important; color: var(--text) !important; }
.ag-who { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-3); }
.ag-who.ai { color: var(--accent); border-color: var(--accent-line); }
.ag-who.review { color: var(--amber); border-color: var(--amber-line); }
.ag-who.person { color: var(--text); border-color: var(--line-3, var(--line-2)); }
.ag-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ag-kind { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.ag-kind-h { display: flex; justify-content: space-between; margin: 0 0 8px; font-weight: 600; }
.ag-kind-h span { font: 500 12px var(--mono); color: var(--text-3); }
.ag-kind ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 640px) { .ag-flow li { grid-template-columns: 1fr; gap: 4px; } }

/* Admin (admin.js): the owner's own page. */
.ad-key { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; margin-top: 18px; }
.ad-key .lr-input { flex: 1; min-width: 220px; }
.ad-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; font-size: 13.5px; color: var(--text-2); }
.ad-bar select { margin-left: 6px; background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 8px; }
.ad-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.ad-tiles div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 4px; }
.ad-tiles b { font-size: 26px; font-weight: 600; }
.ad-tiles span { font-size: 12.5px; color: var(--text-3); }
.ad-health { margin-top: 14px; font: 500 12.5px/1.6 var(--mono); color: var(--text-2); }
.ad-table td { vertical-align: top; font-size: 13px; }
.ad-text { display: block; max-width: 460px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-2); }
.ad-sub { margin: 28px 0 10px; }