/* ---------- 02 · Capabilities: a living system (CAPABILITIES_CONCEPT_UK.md) ----------
   Every card is drawn in each of its states from data-beat (0 rest, 1–3 the beats; 3 is also
   the final state). capabilities.js only moves the beats, draws the paths and flies the signals.
   At rest the stage is flat: no perspective, no translateZ, so it stays sharp on Retina. */
.capabilities { position:relative; padding:clamp(88px,9vw,124px) 0; background:var(--brand-onyx); color:#f7f5f0f5; overflow:hidden; }
.capabilities > .container { position:relative; z-index:1; width:min(1520px,calc(100% - 128px)); }
.capabilities::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(#f7f5f005 1px,transparent 1px) 0 0/100% 68px,linear-gradient(90deg,#f7f5f005 1px,transparent 1px) 0 0/68px 100%; opacity:.5; }
.capabilities-head { max-width:940px; margin-bottom:clamp(44px,4.6vw,70px); }
.capabilities .eyebrow { display:flex; align-items:center; gap:14px; margin:0; letter-spacing:.2em; color:#f7f5f0a8; }
.capabilities h2 { margin-top:24px; font-size:clamp(32px,3.5vw,58px); line-height:1.02; letter-spacing:-.036em; color:var(--on-dark); }
.capabilities h2 > span { display:block; }
.capabilities .headline-dot { display:inline-block; color:var(--accent); }
.capabilities-lede { margin-top:22px; max-width:520px; font-size:var(--text-lead); line-height:1.52; color:#f7f5f0a8; }

.capabilities-grid { display:grid; grid-template-columns:minmax(0,34fr) minmax(0,66fr); gap:clamp(40px,4vw,64px); align-items:start; }

/* The list: number | title and three words | a plus that turns into a minus. The active row
   opens to show its tags, and its three words light up with the demo's beats. */
.capability-list { position:relative; display:grid; align-content:start; }
.cap-item { position:relative; border-top:1px solid #f7f5f01a; transition:background 280ms var(--ease); }
.cap-item[data-item="4"] { border-bottom:1px solid #f7f5f01a; }
.cap-item.is-active { background:linear-gradient(90deg,#f7f5f00d,#f7f5f000 62%); }
.cap-line { position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:20px; width:100%;
  padding:22px 6px 22px 18px; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;
  transition:padding 360ms var(--ease); }
.cap-item.is-active .cap-line { padding-bottom:14px; }
.cap-line:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-3px; }
.cap-mark { position:absolute; left:0; top:20px; bottom:20px; width:2px; background:var(--accent); transform:scaleY(0); transition:transform 300ms var(--ease); }
.cap-line.is-active .cap-mark { transform:scaleY(1); }
.cap-glyph,.cap-short,.cap-caption,.cap-phone-tags,.cap-wire,.cap-tab-bar { display:none; }
.cap-index { font-size:14px; letter-spacing:.08em; color:#f7f5f075; transition:color 260ms ease; }
.cap-line.is-active .cap-index { color:var(--accent); }
.cap-label { min-width:0; transition:transform 300ms var(--ease); }
.cap-line.is-active .cap-label { transform:translateX(4px); }
.cap-label strong { display:block; font-size:clamp(16px,1.2vw,21px); font-weight:550; line-height:1.25; color:#f7f5f0d1; transition:color 260ms ease; }
.cap-line.is-active .cap-label strong { color:var(--on-dark); }
.cap-flow { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 7px; margin-top:7px; font-size:14px; line-height:1.45; color:#f7f5f085; }
.cap-word { position:relative; transition:color 260ms ease; }
.cap-word::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform 300ms var(--ease); }
.cap-sep { display:inline-block; width:3px; height:3px; margin:0 8px; border-radius:50%; background:currentColor; opacity:.45; vertical-align:.3em; }
.cap-line.is-active .cap-word,.cap-caption .cap-word { color:#f7f5f0d9; }
.cap-line.is-active:is([data-beat="1"],[data-beat="2"]) .cap-word[data-w="3"],.cap-line.is-active[data-beat="1"] .cap-word[data-w="2"],
.cap-caption:is([data-beat="1"],[data-beat="2"]) .cap-word[data-w="3"],.cap-caption[data-beat="1"] .cap-word[data-w="2"] { color:#f7f5f070; }
.cap-line.is-active[data-beat="1"] .cap-word[data-w="1"],.cap-line.is-active[data-beat="2"] .cap-word[data-w="2"],.cap-line.is-active[data-beat="3"] .cap-word[data-w="3"],
.cap-caption[data-beat="1"] .cap-word[data-w="1"],.cap-caption[data-beat="2"] .cap-word[data-w="2"],.cap-caption[data-beat="3"] .cap-word[data-w="3"] { color:var(--on-dark); }
.cap-line.is-active[data-beat="1"] .cap-word[data-w="1"]::after,.cap-line.is-active[data-beat="2"] .cap-word[data-w="2"]::after,.cap-line.is-active[data-beat="3"] .cap-word[data-w="3"]::after,
.cap-caption[data-beat="1"] .cap-word[data-w="1"]::after,.cap-caption[data-beat="2"] .cap-word[data-w="2"]::after,.cap-caption[data-beat="3"] .cap-word[data-w="3"]::after { transform:scaleX(1); }
.cap-plus { position:relative; width:24px; height:24px; color:#f7f5f075; transition:color 260ms ease; }
.cap-plus i { position:absolute; left:6px; right:6px; top:50%; height:1.5px; margin-top:-.75px; border-radius:1px; background:currentColor; transition:transform 320ms var(--ease); }
.cap-plus i + i { transform:rotate(90deg); }
.cap-line.is-active .cap-plus { color:var(--accent); }
.cap-line.is-active .cap-plus i + i { transform:rotate(180deg); }
.cap-more { display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows 360ms var(--ease),visibility 0s linear 360ms; }
.cap-more > div { min-height:0; overflow:hidden; }
.cap-item.is-active .cap-more { grid-template-rows:1fr; visibility:visible; transition:grid-template-rows 360ms var(--ease),visibility 0s; }
.cap-tags,.cap-phone-tags { flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.cap-tags { display:flex; padding:0 30px 20px 62px; }
.cap-tags li,.cap-phone-tags li { padding:5px 10px; border-radius:var(--radius-pill); background:#f7f5f00f; font-size:12px; line-height:1.3; color:#f7f5f0b3; }
@media(hover:hover) and (pointer:fine) {
 .cap-item:not(.is-active):hover { background:#f7f5f006; }
 .cap-line:hover .cap-label strong { color:var(--on-dark); }
 .cap-line:not(.is-active):hover .cap-index { color:#f7f5f0cc; }
}

/* The stage: flat, in stage pixels. A faint dot grid; under the cursor a brighter one. */
.ecosystem { position:relative; aspect-ratio:100/74.5; }
.ecosystem::before { content:''; position:absolute; inset:-3%; pointer-events:none; transition:opacity 700ms ease 300ms;
  background:radial-gradient(circle,#f7f5f00d 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask:radial-gradient(ellipse at 50% 48%,#000 25%,transparent 72%); mask:radial-gradient(ellipse at 50% 48%,#000 25%,transparent 72%); }
.cap-light { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity 400ms ease;
  background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#f7f5f00d,#f7f5f000 70%),radial-gradient(circle,#f7f5f012 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#000,transparent); mask:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),#000,transparent); }
.ecosystem.is-lit .cap-light { opacity:1; }

.cap-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; display:none; }
.capabilities.is-armed .cap-paths { display:block; }
.cap-path-line { fill:none; stroke:#f7f5f01f; stroke-width:1; stroke-linecap:round; transition:stroke 420ms ease; }
.cap-path-glow { fill:none; stroke:var(--accent); stroke-width:5; stroke-linecap:round; stroke-opacity:0; transition:stroke-opacity 420ms ease; }
.cap-path-end,.cap-path-start { fill:#f7f5f040; stroke:#f4b00033; stroke-width:0; transition:fill 420ms ease,stroke-width 420ms ease; }
.cap-path.is-active .cap-path-line { stroke:#f4b000b3; }
.cap-path.is-active .cap-path-glow { stroke-opacity:.12; }
.cap-path.is-active .cap-path-end { fill:var(--accent); stroke-width:6; r:3px; }

.cap-comets { position:absolute; inset:0; z-index:3; pointer-events:none; }
.cap-comet { position:absolute; left:0; top:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; opacity:0;
  background:radial-gradient(circle,var(--accent) 0 2.6px,#f4b0006b 3.4px,#f4b00000 7px); }
.cap-comet.is-trail { width:4px; height:4px; margin:-2px 0 0 -2px; background:var(--accent); }
.cap-comet.is-trail2 { width:3px; height:3px; margin:-1.5px 0 0 -1.5px; }

/* A ray that runs along a border: a turning conic light inside a 1 px ring mask. */
.cap-ray { position:absolute; inset:-1px; z-index:1; padding:1px; border-radius:inherit; overflow:hidden; pointer-events:none; opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
.cap-ray::before { content:''; position:absolute; left:50%; top:50%; width:250%; aspect-ratio:1; translate:-50% -50%;
  background:conic-gradient(from 0deg,#f4b00000 0deg,#f4b00073 50deg,#f4b00000 100deg,#f4b00000 360deg); }

/* Your business: the hub. Its ray turns while the system plays; a signal through it ripples. */
.hub { --depth:3; position:absolute; left:49%; top:47%; z-index:3; display:grid; justify-items:center; align-content:center; gap:6px;
  width:19%; aspect-ratio:1; margin:-9.5% 0 0 -9.5%; padding:10px; text-align:center;
  border:1px solid #f7f5f021; border-radius:24px; background:var(--onyx-raised-2); box-shadow:0 26px 60px #00000047,inset 0 1px 0 #f7f5f01f;
  transition:opacity 500ms var(--ease),transform 600ms var(--ease),translate 500ms ease-out; }
.hub .cap-ray::before { background:conic-gradient(from 0deg,#f4b00000 0deg,#f4b000b3 55deg,#f4b00000 110deg,#f4b00000 360deg); }
.capabilities.is-connected .hub .cap-ray { opacity:1; transition:opacity 600ms ease; }
.capabilities.is-connected .hub .cap-ray::before { animation:cap-turn 6s linear infinite; }
.hub-ripple { position:absolute; inset:-1px; border:1px solid var(--accent); border-radius:inherit; opacity:0; pointer-events:none; }
.hub-icon { display:grid; place-items:center; width:clamp(26px,2.2vw,34px); aspect-ratio:1; color:var(--accent); }
.hub-icon .icon { width:100%; height:100%; stroke-width:1.5; overflow:visible; }
.hub strong { font-size:clamp(15px,1.15vw,17px); font-weight:500; line-height:1.2; color:var(--on-dark); letter-spacing:-.01em; }
.hub-note { display:flex; align-items:center; gap:6px; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:#f7f5f08f; white-space:nowrap; }
.hub-dot { width:5px; height:5px; flex:none; border-radius:50%; background:var(--accent); transition:opacity 300ms ease; }
.capabilities.is-armed:not(.is-connected) .hub-dot { opacity:0; }
.capabilities.is-connected .hub-dot { animation:cap-breathe 2.4s ease-in-out infinite alternate; }
.capabilities:not(.is-live) .hub .cap-ray::before,.capabilities:not(.is-live) .hub-dot { animation-play-state:paused; }
.hub-dots { display:none; }

/* Cards: the chosen one steps forward, the rest recede into the dark. */
.cap-card { position:absolute; z-index:2; padding:14px; border:1px solid #f7f5f01c; border-radius:16px; background:var(--onyx-raised);
  box-shadow:inset 0 1px 0 #ffffff0a; opacity:.52; transform:scale(.965); cursor:pointer;
  transition:transform 480ms var(--ease),opacity 480ms var(--ease),box-shadow 480ms var(--ease),border-color 480ms var(--ease),translate 500ms ease-out; }
.cap-card.is-active { z-index:4; opacity:1; transform:none; cursor:default; border-color:#f7f5f02e; box-shadow:0 28px 70px #00000073,inset 0 1px 0 #ffffff0a; }
.cap-card--web { --depth:6; left:0; top:0; width:31%; }
.cap-card--ai { --depth:7; left:1%; bottom:0; width:34%; }
.cap-card--systems { --depth:5; right:0; top:0; width:34%; }
.cap-card--data { --depth:6; right:2%; top:34%; width:30%; }
.cap-card--growth { --depth:4; right:0; bottom:0; width:31%; }
.ecosystem .cap-card,.ecosystem .hub { translate:calc(var(--px,0) * var(--depth) * 1px) calc(var(--py,0) * var(--depth) * 1px); }
/* the cursor's light caught by a card's edge */
.cap-card::before { content:''; position:absolute; inset:-1px; padding:1px; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity 400ms ease;
  background:radial-gradient(180px circle at var(--lx,50%) var(--ly,50%),#f7f5f066,#f7f5f000 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0); }
.cap-card.is-near::before { opacity:1; }
/* the wireframe a card shows for a moment as it switches on */
.cap-card::after { content:''; position:absolute; inset:13px; border-radius:8px; pointer-events:none; opacity:0;
  background:linear-gradient(100deg,#f7f5f000 30%,#f7f5f017 50%,#f7f5f000 70%) -150% 0/60% 100% no-repeat,
    linear-gradient(#f7f5f012 0 0) 0 0/28px 28px no-repeat,linear-gradient(#f7f5f012 0 0) 38px 3px/42% 9px no-repeat,
    linear-gradient(#f7f5f00d 0 0) 38px 18px/28% 7px no-repeat,linear-gradient(#f7f5f00a 0 0) 0 42px/100% calc(100% - 42px) no-repeat var(--onyx-raised); }
.cap-card.is-booting::after { animation:cap-boot 560ms var(--ease) both; }

.cap-head { display:flex; align-items:center; gap:10px; }
.cap-icon { display:grid; place-items:center; width:28px; height:28px; flex:none; border-radius:8px; background:#f7f5f00f; color:var(--on-dark-muted); }
.cap-icon .icon { width:16px; height:16px; }
.cap-icon--amber { color:var(--accent); background:#f4b0001f; }
.cap-head strong { display:block; font-size:14px; font-weight:550; line-height:1.2; color:var(--on-dark); }
.cap-head div > span { display:block; margin-top:2px; font-size:11.5px; line-height:1.3; color:#f7f5f08f; }
.cap-dots { align-self:flex-start; margin:6px 0 0 auto; width:14px; height:3px; flex:none; border-radius:2px; background:radial-gradient(circle,#f7f5f05c 45%,transparent 46%) 0 0/5px 5px repeat-x; }

/* 01 · Website: presence (the site draws in), interaction (a visitor opens an enquiry), conversion (sent). */
.cap-browser { margin-top:12px; overflow:hidden; border:1px solid #f7f5f012; border-radius:10px; background:var(--brand-onyx); }
.cap-browser-bar { display:flex; align-items:center; gap:5px; height:22px; padding:0 9px; background:#f7f5f00a; }
.cap-browser-bar > span { width:6px; height:6px; flex:none; border-radius:50%; background:#f7f5f02e; }
.cap-browser-bar b { min-width:0; margin-left:7px; overflow:hidden; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; white-space:nowrap; text-overflow:ellipsis; color:#f7f5f099; }
.cap-shot { position:relative; aspect-ratio:16/10; overflow:hidden; }
.cap-shot img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.cap-scan { position:absolute; inset:0; border-bottom:1px solid var(--accent); background:linear-gradient(#f4b00000 70%,#f4b0001f); opacity:0; pointer-events:none; }
.cap-touch { position:absolute; left:24.5%; top:75%; width:14px; height:14px; margin:-7px 0 0 -7px; border:1.5px solid var(--on-dark); border-radius:50%; background:#f7f5f040; box-shadow:0 0 0 4px #f7f5f01a; opacity:0; }
.cap-sheet { position:absolute; left:9%; right:9%; bottom:0; height:60%; display:flex; flex-direction:column; gap:5px; padding:9px 10px;
  border:1px solid #f7f5f01f; border-bottom:0; border-radius:10px 10px 0 0; background:#1a1d20f5; box-shadow:0 -12px 30px #0000004d;
  transform:translateY(105%); transition:transform 420ms var(--ease),opacity 300ms ease; }
.cap-sheet strong { font-size:11px; font-weight:550; line-height:1.2; color:var(--on-dark); }
.cap-sheet i { height:6px; border-radius:3px; background:#f7f5f01f; }
.cap-sheet i + i { width:62%; }
.cap-send { align-self:flex-end; margin-top:auto; padding:3px 10px; border-radius:var(--radius-pill); background:var(--accent); color:var(--brand-onyx); font-size:11px; font-weight:550; line-height:1.3; }
.cap-sent,.cap-reserved { position:absolute; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; font-size:11px; font-weight:500; line-height:1.3; opacity:0; transition:opacity 300ms ease,transform 400ms var(--ease); }
.cap-sent { left:50%; bottom:9px; translate:-50% 0; background:var(--on-dark); color:var(--brand-onyx); transform:translateY(6px); }
.cap-sent i { font-style:normal; font-weight:700; }
.cap-reserved { right:8px; top:8px; background:#111315e6; border:1px solid #f7f5f026; color:var(--on-dark); transform:translateY(-4px); }
.cap-reserved i { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.cap-card--web[data-beat="1"] .cap-shot img { animation:cap-reveal 700ms var(--ease) both; }
.cap-card--web[data-beat="1"] .cap-scan { animation:cap-scan 700ms var(--ease) both; }
.cap-card--web[data-beat="2"] .cap-touch { animation:cap-touch 1300ms var(--ease) both; }
.cap-card--web[data-beat="2"] .cap-sheet { transform:none; transition-delay:760ms; }
.cap-card--web[data-beat="3"] .cap-sheet { transform:translateY(18%) scale(.7); opacity:0; transition-delay:180ms; }
.cap-card--web[data-beat="3"] .cap-send { animation:cap-press 260ms ease both; }
.cap-card--web[data-beat="3"] .cap-sent { opacity:1; transform:none; transition-delay:380ms; }
.cap-card--web[data-react="reserved"] .cap-reserved { opacity:1; transform:none; }

/* 02 · CRM: clients (a new deal lands), processes (it walks the stages), control (the site knows). */
.cap-board { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; overflow:hidden; border-radius:9px; }
.cap-board::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg,#f7f5f000 35%,#f7f5f014 50%,#f7f5f000 65%); transform:translateX(-100%); }
.cap-col { display:grid; align-content:start; gap:5px; padding:6px; border-radius:9px; background:#f7f5f008; }
.cap-col-name { font-size:11px; line-height:14px; letter-spacing:-.005em; white-space:nowrap; color:#f7f5f08f; transition:color 300ms ease; }
.cap-slot,.cap-deal { height:26px; border-radius:7px; }
.cap-slot { border:1px dashed #f7f5f012; }
.cap-deal { background:linear-gradient(#f7f5f01f 0 0) 8px 8px/48% 4px no-repeat,linear-gradient(#f7f5f012 0 0) 8px 15px/30% 3px no-repeat,#f7f5f00d; }
.cap-deal--lead,.cap-deal--in { position:absolute; left:6px; top:25px; width:calc((100% - 12px) / 3 - 12px); display:flex; align-items:center; padding:0 6px; gap:5px;
  background:linear-gradient(#11131566 0 0) 24px 11px/40% 4px no-repeat,var(--accent); color:var(--brand-onyx); opacity:0; }
.cap-deal--lead .icon,.cap-deal--in .icon { width:12px; height:12px; flex:none; stroke-width:2; }
.cap-card--systems[data-beat="1"] .cap-col:nth-child(1) .cap-col-name,
.cap-card--systems[data-beat="3"] .cap-col:nth-child(3) .cap-col-name { color:var(--on-dark); }
.cap-card--systems[data-beat="1"] .cap-deal--lead { opacity:1; animation:cap-drop 560ms cubic-bezier(.34,1.56,.64,1) both; }
.cap-card--systems[data-beat="2"] .cap-deal--lead { opacity:1; transform:translateX(calc(200% + 36px)); animation:cap-walk 1500ms var(--ease) both; }
.cap-card--systems[data-beat="2"] .cap-col:nth-child(2) .cap-col-name { animation:cap-lit-2 1500ms both; }
.cap-card--systems[data-beat="2"] .cap-col:nth-child(3) .cap-col-name { animation:cap-lit-3 1500ms both; }
.cap-card--systems[data-beat="3"] .cap-deal--lead { opacity:1; transform:translateX(calc(200% + 36px)); }
.cap-card--systems[data-beat="3"] .cap-board::after { animation:cap-sweep 800ms var(--ease) both; }
.cap-card--systems[data-react="lead"] .cap-deal--in { animation:cap-incoming 1500ms var(--ease) both; }
.cap-note { display:flex; align-items:center; gap:7px; margin:10px 0 0; font-size:11.5px; line-height:1.3; color:#f7f5f0cc; opacity:0; transform:translateY(4px); transition:opacity 300ms ease,transform 400ms var(--ease); }
.cap-note i { display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#f4b00026; color:var(--accent); font-style:normal; font-size:10px; font-weight:700; }
.cap-card--systems[data-beat="3"] .cap-note { opacity:1; transform:none; transition-delay:350ms; }

/* 03 · AI Concierge: request (typed), understanding (criteria), action (three matches). Analysing
   and the result share one slot and are never shown together: each appears only after the
   other has gone (180 ms out, 200 ms delay in). */
.cap-thread { display:grid; gap:7px; margin-top:12px; }
.cap-thread p { display:flex; align-items:flex-start; gap:8px; margin:0; padding:8px 10px; border-radius:12px; background:#f7f5f00d; font-size:12px; line-height:1.45; color:#f7f5f0f0; }
.cap-heard { background:#f7f5f014!important; }
.cap-avatar { display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:50%; background:#f7f5f014; color:#f7f5f0bf; }
.cap-avatar .icon { width:12px; height:12px; }
.cap-type { display:grid; }
.cap-type > span { grid-area:1/1; }
.cap-type-ghost { visibility:hidden; }
.cap-chips { display:flex; flex-wrap:wrap; gap:5px; margin:10px 0 0; }
.cap-chips span { padding:3px 8px; border:1px solid #f4b0004d; border-radius:var(--radius-pill); background:#f4b0000f; font-size:11px; line-height:1.35; color:#f7f5f0e0;
  transition:opacity 260ms ease,transform 360ms cubic-bezier(.34,1.56,.64,1); }
.cap-slot-ai { display:grid; align-items:center; min-height:34px; margin-top:10px; }
.cap-slot-ai > * { grid-area:1/1; }
.cap-wave { display:flex; align-items:center; justify-content:space-between; gap:3px; height:26px; padding:0 2px; }
.cap-wave i { flex:1; max-width:3px; height:100%; border-radius:2px; background:var(--accent); transform:scaleY(0); transition:transform 260ms var(--ease); }
.cap-status { display:flex; align-items:center; gap:8px; margin:0; padding:0 2px; font-size:12px; color:#f7f5f0b3; opacity:0; transition:opacity 180ms ease; }
.cap-spin { width:12px; height:12px; flex:none; border:1.5px solid #f4b00047; border-top-color:var(--accent); border-radius:50%; }
.cap-found { display:flex; align-items:center; gap:9px; margin:0; padding:6px 10px; border-radius:10px; background:#f7f5f00d; font-size:12px; line-height:1.3; color:var(--on-dark); opacity:0; transition:opacity 180ms ease; }
.cap-thumbs { display:flex; gap:3px; flex:none; }
.cap-thumbs i { width:18px; height:13px; border-radius:3px; background:linear-gradient(135deg,#f7f5f033,#f7f5f00f); }
.cap-action { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; min-height:34px; margin-top:10px; overflow:hidden;
  border-radius:9px; background:var(--accent); color:var(--brand-onyx); font-size:12px; font-weight:550; transition:opacity 300ms ease,transform 400ms var(--ease); }
.cap-action::after { content:''; position:absolute; inset:0; background:linear-gradient(100deg,#ffffff00 30%,#ffffffa6 50%,#ffffff00 70%); transform:translateX(-120%); }
.cap-card--ai:is([data-beat="1"]) .cap-chips span { opacity:0; transform:translateY(4px) scale(.92); transition-duration:180ms; }
.cap-card--ai:is([data-beat="1"],[data-beat="2"]) .cap-action { opacity:0; transform:translateY(4px); transition-duration:180ms; }
.cap-card--ai[data-beat="1"] .cap-wave i { animation:cap-wave 620ms ease-in-out infinite alternate; }
.cap-card--ai[data-beat="1"] .cap-wave i:nth-child(3n) { animation-duration:540ms; animation-delay:-200ms; }
.cap-card--ai[data-beat="1"] .cap-wave i:nth-child(3n+1) { animation-duration:700ms; animation-delay:-420ms; }
.cap-card--ai[data-beat="1"] .cap-wave i:nth-child(4n) { animation-duration:480ms; animation-delay:-90ms; }
.cap-card--ai[data-beat="2"] .cap-status { opacity:1; transition:opacity 200ms ease 200ms; }
.cap-card--ai[data-beat="2"] .cap-spin { animation:cap-spin 900ms linear infinite; }
.cap-card--ai[data-beat="2"] .cap-chips span { transition-delay:calc(200ms + var(--k) * 130ms); }
.cap-card--ai:is([data-beat="0"],[data-beat="3"]) .cap-found { opacity:1; transition:opacity 260ms ease 200ms; }
.cap-card--ai[data-beat="3"] .cap-action { transition-delay:320ms; }
.cap-card--ai[data-beat="3"] .cap-action::after { animation:cap-sheen 900ms var(--ease) 560ms both; }

/* 04 · Integrations: systems (the nodes wake), data (one enquiry passes them all), decisions. */
.cap-chain { position:relative; display:flex; margin-top:14px; }
.cap-chain-line,.cap-chain-fill,.cap-packet-run { position:absolute; left:12.5%; width:75%; top:15px; height:1px; }
.cap-chain-line { background:#f7f5f024; }
.cap-chain-fill { background:var(--accent); transform:scaleX(0); transform-origin:left; }
.cap-packet-run { height:0; opacity:0; }
.cap-packet-run i { position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px 2px #f4b0008c; }
.cap-node { position:relative; z-index:1; display:grid; justify-items:center; gap:6px; flex:1 1 0; min-width:0; font-size:11px; line-height:1.2; white-space:nowrap; color:#f7f5f0b8; }
.cap-node > i { position:relative; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:#222528; box-shadow:inset 0 0 0 1px #f7f5f01a; color:var(--on-dark-muted); transition:box-shadow 300ms ease,color 300ms ease; }
.cap-node .icon { width:15px; height:15px; }
.cap-node-ok { position:absolute; right:-5px; top:-5px; display:grid; place-items:center; width:14px; height:14px; border-radius:50%; background:var(--accent); color:var(--brand-onyx); font:700 9px/1 Inter,sans-serif; transform:scale(0); transition:transform 300ms cubic-bezier(.34,1.56,.64,1); }
.cap-card--data:not([data-beat="0"]) .cap-node > i { box-shadow:inset 0 0 0 1px #f7f5f066; color:var(--on-dark); transition-delay:calc(var(--k) * 90ms); }
.cap-card--data:is([data-beat="2"],[data-beat="3"]) .cap-chain-fill { transform:none; transition:transform 1200ms linear; }
.cap-card--data[data-beat="3"] .cap-chain-fill { transition:none; }
.cap-card--data[data-beat="2"] .cap-packet-run { animation:cap-packet 1200ms linear both; }
.cap-card--data:is([data-beat="2"],[data-beat="3"]) .cap-node-ok { transform:none; }
.cap-card--data[data-beat="2"] .cap-node-ok { transition-delay:calc(var(--k) * 400ms); }
.cap-card--data[data-react="email"] [data-node="email"] .cap-node-ok { transform:none; }
.cap-alert { display:flex; align-items:center; gap:8px; margin:12px 0 0; padding:7px 10px; border-radius:9px; background:#f7f5f00a; font-size:11.5px; line-height:1.3; color:#f7f5f0d9; opacity:0; transform:translateY(6px); transition:opacity 300ms ease,transform 400ms var(--ease); }
.cap-alert i { width:6px; height:6px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px #f4b00026; }
.cap-card--data[data-beat="3"] .cap-alert { opacity:1; transform:none; }

/* 05 · Analytics: measure (the line draws), improve (an update ships), scale (a new market). No figures. */
.cap-graph { position:relative; margin-top:12px; }
.cap-graph svg { display:block; width:100%; height:auto; aspect-ratio:3/1; overflow:visible; }
.cap-grid { fill:none; stroke:#f7f5f00f; stroke-width:1; vector-effect:non-scaling-stroke; }
/* dash 1, gap 2: hidden at offset 1 without a round cap left at the end */
.cap-trend,.cap-trend-up,.cap-trend-new,.cap-tiles path { fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 2; stroke-dashoffset:0; }
.cap-trend { stroke:#f7f5f0d9; stroke-width:2; }
.cap-trend-up { stroke:var(--accent); stroke-width:2.2; opacity:0; transition:opacity 500ms ease; }
.cap-trend-new { stroke:#f7f5f04d; stroke-width:1.6; stroke-dashoffset:1; }
.cap-ship { position:absolute; left:65%; top:0; bottom:0; border-left:1px dashed #f7f5f066; transform:scaleY(0); transform-origin:top; transition:transform 420ms var(--ease); }
.cap-ship-label,.cap-legend { position:absolute; font-size:11px; line-height:1.2; white-space:nowrap; opacity:0; transition:opacity 300ms ease; }
.cap-ship-label { right:calc(35% + 6px); top:-1px; color:#f7f5f0b3; }
.cap-legend { right:0; bottom:-3px; color:#f7f5f08f; }
.cap-now { position:absolute; left:98.33%; top:46.25%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:var(--on-dark); box-shadow:0 0 0 4px #f7f5f01a; }
.cap-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:12px; }
.cap-tiles > div { min-width:0; padding:7px 6px; border-radius:10px; background:#f7f5f00a; }
.cap-tiles span { display:block; font-size:11px; line-height:1.2; white-space:nowrap; color:#f7f5f08f; }
.cap-tiles svg { display:block; width:100%; height:auto; aspect-ratio:60/18; margin-top:6px; overflow:visible; }
.cap-tiles path { stroke:#f7f5f09e; stroke-width:1.4; }
/* a narrow Analytics card lists its tiles, so «Conversion» keeps its own room */
.cap-card--growth { container-type:inline-size; }
@container (max-width:209px) {
 .cap-tiles { grid-template-columns:minmax(0,1fr); gap:4px; }
 .cap-tiles > div { display:flex; align-items:center; gap:10px; padding:5px 8px; }
 .cap-tiles span { flex:none; width:44%; }
 .cap-tiles svg { flex:1; min-width:0; margin:0; }
}
.cap-card--growth[data-beat="1"] :is(.cap-trend,.cap-tiles path) { animation:cap-draw 900ms var(--ease) both; }
.cap-card--growth:is([data-beat="2"],[data-beat="3"]) .cap-ship { transform:none; }
.cap-card--growth:is([data-beat="2"],[data-beat="3"]) .cap-ship-label { opacity:1; transition-delay:300ms; }
.cap-card--growth:is([data-beat="2"],[data-beat="3"]) .cap-trend-up { opacity:1; transition-delay:380ms; }
.cap-card--growth[data-beat="3"] .cap-trend-new { stroke-dashoffset:0; animation:cap-draw 900ms var(--ease) both; }
.cap-card--growth[data-beat="3"] .cap-legend { opacity:1; transition-delay:500ms; }
.cap-card--growth[data-react="now"] .cap-now { animation:cap-now 900ms var(--ease); }

/* A receding card does not keep shouting with the signal colour. */
.cap-card:not(.is-active) .cap-action { background:#f4b00040; color:#f7f5f0c4; }
.cap-card:not(.is-active) .cap-icon--amber { background:#f7f5f00f; color:#f7f5f0a8; }
.cap-card:not(.is-active) .cap-chips span { border-color:#f7f5f026; background:#f7f5f008; }

/* A still card (not playing: resting, held, off screen, reduced motion) shows its state and nothing moves. */
.cap-card.is-still *,.cap-card.is-still *::before,.cap-card.is-still *::after { animation:none!important; }

.cap-pause { position:absolute; left:49%; bottom:1%; z-index:5; width:44px; height:44px; margin-left:-22px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:none; color:#f7f5f0b3; cursor:pointer; --focus:var(--accent); }
.cap-pause[hidden] { display:none; }
.cap-pause::before { content:''; position:absolute; inset:7px; border:1px solid #f7f5f040; border-radius:50%; background:#11131559; transition:border-color var(--micro),background var(--micro); }
.cap-pause:hover { color:var(--on-dark); }
.cap-pause:hover::before { border-color:#f7f5f099; background:#1113158c; }
.cap-pause:focus-visible { outline:var(--border-focus) solid var(--focus); outline-offset:-3px; }
.cap-pause svg { position:relative; width:11px; height:11px; }
.cap-pause .hp-play,.cap-pause[aria-pressed="true"] .hp-pause { display:none; }
.cap-pause[aria-pressed="true"] .hp-play { display:block; }

.capabilities-foot { display:flex; align-items:center; justify-content:space-between; gap:36px; margin-top:clamp(44px,4.6vw,72px); padding-top:30px; border-top:1px solid #f7f5f01a; }
.capabilities-foot p { max-width:62ch; margin:0; font-size:15px; line-height:1.55; color:#f7f5f09e; }
/* On the Onyx section the CTA inverts to Warm White with Onyx text, the brand's primary-dark pairing. */
.capabilities .brand-cta { background:var(--on-dark); color:var(--ink); }
.capabilities .brand-cta:hover { background:var(--line); }

/* Entrance: the words arrive as before; the stage is switched on by the script, part by part.
   Nothing is hidden without the script (is-armed is its mark). */
@media(prefers-reduced-motion:no-preference) {
 .capabilities.is-armed:not(.is-in) .accent-rule { transform:scaleX(0); }
 .capabilities.is-armed:not(.is-in) :is(.eyebrow,.capabilities-lede,.cap-item,.cap-caption,.capabilities-foot > *) { opacity:0; }
 .capabilities.is-armed:not(.is-in) h2 > span { opacity:0; clip-path:inset(0 0 105% 0); transform:translateY(24px); }
 .capabilities.is-armed:not(.is-in) .ecosystem::before { opacity:0; }
 .capabilities.is-armed .hub:not(.is-on) { opacity:0; transform:scale(.9); }
 .capabilities.is-armed .cap-card:not(.is-on),.capabilities.is-armed .cap-phone-tags:not(.is-on) { opacity:0; }
 .capabilities.is-armed .cap-pause:not(.is-on) { opacity:0; }
 .cap-pause { transition:opacity 500ms ease; }
 .capabilities.is-in .accent-rule { animation:rule-draw 420ms var(--ease) backwards; }
 .capabilities.is-in .eyebrow { animation:enter 560ms var(--ease) 100ms backwards; }
 .capabilities.is-in h2 > span { animation:line-reveal 720ms var(--ease) 180ms backwards; }
 .capabilities.is-in h2 > span:nth-child(2) { animation-delay:300ms; }
 .capabilities.is-in .capabilities-lede { animation:enter 640ms var(--ease) 480ms backwards; }
 .capabilities.is-in .cap-item { animation:enter 560ms var(--ease) 600ms backwards; }
 .capabilities.is-in .cap-item:nth-child(2) { animation-delay:670ms; }
 .capabilities.is-in .cap-item:nth-child(3) { animation-delay:740ms; }
 .capabilities.is-in .cap-item:nth-child(4) { animation-delay:810ms; }
 .capabilities.is-in .cap-item:nth-child(5) { animation-delay:880ms; }
 .capabilities.is-in .cap-caption { animation:enter 560ms var(--ease) 700ms backwards; }
 .capabilities.is-in .capabilities-foot > * { animation:enter 600ms var(--ease) 1200ms backwards; }
}
@keyframes cap-turn { to { transform:rotate(1turn); } }
@keyframes cap-breathe { from { opacity:.5; } to { opacity:1; } }
@keyframes cap-boot { 0% { opacity:1; background-position:-150% 0,0 0,38px 3px,38px 18px,0 42px; } 50% { opacity:1; } 100% { opacity:0; background-position:260% 0,0 0,38px 3px,38px 18px,0 42px; } }
@keyframes cap-reveal { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }
@keyframes cap-scan { 0% { opacity:1; transform:translateY(-100%); } 85% { opacity:1; } 100% { opacity:0; transform:none; } }
@keyframes cap-touch { 0% { opacity:0; transform:translate(46px,-34px); } 18% { opacity:1; } 56% { transform:none; } 64% { transform:scale(.72); } 74% { opacity:1; transform:scale(1.25); } 100% { opacity:0; transform:scale(1.6); } }
@keyframes cap-press { 50% { transform:scale(.9); } }
@keyframes cap-drop { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
@keyframes cap-walk { 0% { transform:none; } 32%,58% { transform:translateX(calc(100% + 18px)); } 92%,100% { transform:translateX(calc(200% + 36px)); } }
@keyframes cap-lit-2 { 10%,58% { color:var(--on-dark); } 0%,70%,100% { color:#f7f5f08f; } }
@keyframes cap-lit-3 { 0%,80% { color:#f7f5f08f; } 92%,100% { color:var(--on-dark); } }
@keyframes cap-sweep { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
@keyframes cap-incoming { 0% { opacity:0; transform:translateY(-14px); } 14% { opacity:1; transform:none; } 55% { background-color:var(--accent); } 85% { opacity:1; background-color:#f7f5f01f; } 100% { opacity:0; transform:none; background-color:#f7f5f01f; } }
@keyframes cap-wave { from { transform:scaleY(.14); } to { transform:scaleY(1); } }
@keyframes cap-spin { to { transform:rotate(360deg); } }
@keyframes cap-sheen { from { transform:translateX(-120%); } to { transform:translateX(120%); } }
@keyframes cap-packet { 0% { opacity:0; transform:none; } 6%,94% { opacity:1; } 100% { opacity:0; transform:translateX(100%); } }
@keyframes cap-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes cap-now { 40% { transform:scale(1.7); box-shadow:0 0 0 7px #f4b00033; } }

/* Tablet and small laptop: the list over the stage. */
@media(max-width:1279px) {
 .capabilities > .container { width:min(960px,calc(100% - 64px)); }
 .capabilities-grid { grid-template-columns:minmax(0,1fr); gap:34px; }
 .capabilities-head { margin-bottom:40px; }
 .ecosystem { aspect-ratio:100/80; }
 .cap-card { padding:12px; }
 .cap-card::after { inset:11px; }
}
@media(max-width:1023px) { .ecosystem { aspect-ratio:100/92; } }
@media(max-width:859px) and (min-width:681px) { .cap-browser-bar > span { display:none; } .cap-browser-bar b { margin-left:0; letter-spacing:0; } }
@media(max-width:859px) { .ecosystem { aspect-ratio:100/104; } }
@media(max-width:739px) { .ecosystem { aspect-ratio:100/112; } }
@media(min-width:1280px) and (max-width:1439px) {
 .capabilities > .container { width:min(1520px,calc(100% - 96px)); }
 .capabilities-head { margin-bottom:48px; }
 .ecosystem { aspect-ratio:100/77.5; }
 .cap-card--data { top:33%; }
 .cap-shot { aspect-ratio:2/1; }
 .capabilities-grid { grid-template-columns:minmax(0,32fr) minmax(0,68fr); gap:40px; }
 .cap-line { padding:18px 4px 18px 16px; gap:16px; }
 .cap-item.is-active .cap-line { padding-bottom:12px; }
 .cap-flow { font-size:13px; margin-top:5px; }
 .cap-tags { padding:0 20px 18px 54px; }
}

/* Phone: five tabs that all fit, the direction's name and words, a hub chip, one card. */
@media(max-width:680px) {
 .capabilities { padding:64px 0 56px; }
 .capabilities > .container { width:calc(100% - 40px); }
 .capabilities::before { display:none; }
 .capabilities h2 { font-size:clamp(26px,7.4vw,34px); }
 .capabilities-head { margin-bottom:28px; }
 .capabilities-grid { gap:0; }
 .capability-list { grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid #f7f5f01f; border-radius:12px; background:#f7f5f005; }
 .cap-item { display:contents; }
 .cap-more,.cap-mark,.cap-index,.cap-plus { display:none; }
 .cap-line { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:52px; padding:6px 2px!important; border-left:1px solid #f7f5f012; text-align:center; transition:background 300ms ease; }
 .cap-item:first-child .cap-line { border-left:0; }
 .cap-line.is-active { background:#f4b0001a; }
 .cap-glyph { display:grid; place-items:center; color:#f7f5f08f; transition:color 300ms ease; }
 .cap-glyph .icon { width:18px; height:18px; }
 .cap-line.is-active .cap-glyph { color:var(--accent); }
 .cap-line .cap-label { transform:none!important; }
 .cap-line .cap-label strong,.cap-line .cap-flow { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .cap-line .cap-short { display:block; max-width:100%; overflow:hidden; font-size:11px; font-weight:500; line-height:1.2; white-space:nowrap; text-overflow:clip; color:#f7f5f0a6; }
 .cap-line.is-active .cap-short { color:var(--on-dark); }
 .cap-tab-bar { display:block; position:absolute; left:0; bottom:0; width:20%; height:2px; background:var(--accent); transform:translateX(calc(var(--i,2) * 100%)); transition:transform 360ms var(--ease); }
 .cap-caption { display:block; margin:16px 0 0; }
 .cap-caption strong { display:block; font-size:16px; font-weight:550; line-height:1.3; color:var(--on-dark); }
 .cap-caption .cap-short { display:none; }
 .cap-caption .cap-flow { margin-top:4px; font-size:13px; }
 .ecosystem { aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; margin-top:14px; }
 .ecosystem::before,.cap-light,.cap-paths,.cap-comets { display:none!important; }
 .hub { position:relative; left:auto; top:auto; display:flex; align-items:center; gap:8px; width:auto; height:36px; aspect-ratio:auto; margin:0; padding:0 14px; border-radius:var(--radius-pill); translate:none!important; box-shadow:inset 0 1px 0 #f7f5f01f; }
 .hub-icon { width:18px; }
 .hub strong { font-size:13px; white-space:nowrap; }
 .hub-note { font-size:10px; letter-spacing:.14em; }
 .hub-dots { display:flex; gap:4px; margin-left:2px; }
 .hub-dots i { width:5px; height:5px; border-radius:50%; background:#f7f5f033; transition:background 300ms ease; }
 .hub-dots i.is-on { background:var(--accent); }
 .cap-wire { display:block; position:relative; width:1px; height:36px; background:linear-gradient(#f7f5f02e,#f4b00073); }
 .cap-wire i { position:absolute; left:-3px; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px 2px #f4b00073; opacity:0; }
 .cap-card { position:relative; inset:auto!important; width:100%!important; display:none; transform:none!important; translate:none!important; padding:14px; touch-action:pan-y; cursor:default; }
 .cap-card.is-active { display:block; }
 .cap-head div > span,.cap-col-name,.cap-node,.cap-tiles span,.cap-ship-label,.cap-legend,.cap-chips span,.cap-browser-bar b,.cap-sent,.cap-reserved,.cap-send,.cap-sheet strong { font-size:12px; }
 .cap-head strong { font-size:15px; }
 .cap-thread p,.cap-found,.cap-status,.cap-note,.cap-alert,.cap-action { font-size:13px; }
 .cap-phone-tags { display:flex; justify-content:center; margin-top:12px; transition:opacity 400ms ease; }
 .cap-pause { left:auto; right:-8px; top:-4px; bottom:auto; margin:0; }
 .capabilities-foot { flex-direction:column; align-items:flex-start; gap:22px; }
}
@media(max-width:359px) {
 .cap-line .cap-short { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 /* the hub chip steps left to leave the pause button its corner */
 .hub { align-self:flex-start; padding:0 12px; gap:7px; }
 .hub-dots { display:none; }
 .hub-note { letter-spacing:.1em; }
 .cap-wire { align-self:flex-start; margin-left:28px; }
}

@media(prefers-reduced-motion:reduce) {
 .capabilities *,.capabilities *::before,.capabilities *::after { animation:none!important; transition:none!important; }
 .cap-pause { display:none!important; }
 .cap-ray,.cap-light,.cap-comets { display:none!important; }
}