/* sds-block-intelligence-hero: the Skedulo Intelligence page's header (Matt, 2026-10-08). The heading centred on
   the soft sage-to-blue wash of Matt's reference, an agent chat box under it - a roomy composer, the agent's mark at
   the left of the entry - whose hairline edge carries a quiet shimmer in the agent's colours (no glow; Matt: "more
   subtle"). Mastermind types a request; the box transforms to Forge, which is given a PDF; it dissolves to Mobile
   AI, spoken to; then it collapses into a replay button over "Learn more about Skedulo Intelligence".
   The marks are the kit's Skedulo Intelligence marks (src/aimarks.css), shapes and blends copied so the block
   stands alone. Markup: snapshot.html. Motion: element.js. */
sds-block-intelligence-hero { display: block; }
.ih { --ih-ink: var(--sds-ink, #0F141B); --ih-blue: var(--sds-blue, #0F5EE6); --ih-text: #2B3340; --ih-edge: #D6DEE8;
  --ih-display: var(--sds-display, Geist, "Geist Fallback", system-ui, sans-serif);
  --ih-sans: var(--sds-sans, "Funnel Sans", "Funnel Sans Fallback", system-ui, sans-serif);
  --ih-w: 780px; --ih-h: 124px; --ih-hd: 64px; --ih-r: 16px; --ih-line: 1.5px; --ih-dy: calc((var(--ih-h) - var(--ih-hd)) / 4);
  --ih-ease: cubic-bezier(.22, 1, .36, 1); --ih-io: cubic-bezier(.65, 0, .35, 1);
  position: relative; overflow: hidden; padding: 112px 24px 88px; text-align: center; color: var(--ih-ink);
  font-family: var(--ih-sans); -webkit-font-smoothing: antialiased;
  background: linear-gradient(90deg, #EDF3EA 0%, #E3EEF1 50%, #D4E8F8 100%); }
.ih *, .ih *::before, .ih *::after { box-sizing: border-box; }
.ih__in { max-width: 1040px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.ih__eyebrow { margin: 0 0 20px; font-family: var(--ih-display); font-size: 11px; line-height: 12px; font-weight: 500;
  letter-spacing: .88px; text-transform: uppercase; color: var(--ih-blue); }
.ih__h { margin: 0; max-width: 880px; font-family: var(--ih-display); font-size: 60px; line-height: 64px; font-weight: 500;
  letter-spacing: -1.2px; color: var(--ih-ink); text-wrap: balance; }
.ih__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the stage: the box's row, then the way on under it; both always hold their space, so nothing below moves */
.ih__stage { position: relative; width: 100%; margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 28px; outline: none; }
.ih__row { position: relative; width: 100%; height: var(--ih-h); display: flex; align-items: center; justify-content: center; }

/* the box: a white face inside a hairline edge. Along the edge two short runs of the agent's colours circle the box
   - the top half's flow runs right, the bottom half's (mirrored) left, so the two meet round the corners - and the
   colours cross-fade to the next agent's as the box changes hands. Transforms only: no repaint, no glow */
.ih__box { position: relative; flex: none; width: min(var(--ih-w), 100%); height: var(--ih-h); border-radius: var(--ih-r);
  transition: width .7s var(--ih-io), height .7s var(--ih-io), border-radius .7s var(--ih-io), transform .7s var(--ih-io); }
.ih__ring, .ih__face { position: absolute; pointer-events: none; }
.ih__ring { inset: 0; border-radius: inherit; overflow: hidden; background: var(--ih-edge); }
.ih__half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; }
.ih__half--t { top: 0; }
.ih__half--b { bottom: 0; transform: scaleX(-1); }
.ih__face { inset: var(--ih-line); border-radius: calc(var(--ih-r) - var(--ih-line)); background: #fff; transition: border-radius .7s var(--ih-io); }
.ih__flow { position: absolute; left: 0; top: 0; width: 200%; height: 100%; animation: ih-flow 9s linear infinite; }
.ih__flow > i { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.ih__c--mm { background: linear-gradient(90deg, rgba(79, 79, 224, 0) 0%, #4F4FE0 6%, #B24BE3 11%, #2A6BFF 16%, rgba(42, 107, 255, 0) 22%,
  rgba(79, 79, 224, 0) 50%, #4F4FE0 56%, #B24BE3 61%, #2A6BFF 66%, rgba(42, 107, 255, 0) 72%); }
.ih__c--forge { background: linear-gradient(90deg, rgba(255, 176, 58, 0) 0%, #FFB03A 6%, #FD841B 11%, #F2542D 16%, rgba(242, 84, 45, 0) 22%,
  rgba(255, 176, 58, 0) 50%, #FFB03A 56%, #FD841B 61%, #F2542D 66%, rgba(242, 84, 45, 0) 72%); }
.ih__c--ma { background: linear-gradient(90deg, rgba(29, 188, 180, 0) 0%, #1DBCB4 6%, #00A1DF 11%, #2A6BFF 16%, rgba(42, 107, 255, 0) 22%,
  rgba(29, 188, 180, 0) 50%, #1DBCB4 56%, #00A1DF 61%, #2A6BFF 66%, rgba(42, 107, 255, 0) 72%); }
.ih__box[data-agent="mm"] .ih__c--mm, .ih__box[data-agent="forge"] .ih__c--forge, .ih__box[data-agent="ma"] .ih__c--ma { opacity: 1; }
@keyframes ih-flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* what is in the box: the agent's mark at the left of the entry, its name over the request as it comes in, an
   attachment (Forge's PDF) under the request, and send in the corner - room round all of it */
.ih__body { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 14px; height: 100%; padding: 20px 16px 16px 20px; text-align: left; transition: opacity .35s ease; }
.ih__mark { grid-area: 1 / 1 / 3 / 2; align-self: start; position: relative; width: 28px; height: 28px; margin-top: 2px; }
.ih__mk { position: absolute; inset: 0; display: grid; opacity: 0; transform: scale(.4) rotate(-120deg);
  transition: opacity .4s ease, transform .6s var(--ih-ease); }
.ih__mk > i { grid-area: 1 / 1; display: block; width: 100%; height: 100%;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ih__box[data-agent="mm"] .ih__mk--mm, .ih__box[data-agent="forge"] .ih__mk--forge, .ih__box[data-agent="ma"] .ih__mk--ma { opacity: 1; transform: none; }
.ih__mk--mm > i:first-child { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-14.72 -14.72 184 184%27%3E%3Cpath d=%27M9.7 0C24.9 -1 40 -1 55.2 0C60.4 0.4 64.6 4.5 64.9 9.7C66 24.9 66 40 64.9 55.2C64.6 60.4 60.4 64.6 55.2 64.9C40 66 24.9 66 9.7 64.9C4.5 64.6 0.4 60.4 0 55.2C-1 40 -1 24.9 0 9.7C0.4 4.5 4.5 0.4 9.7 0ZM86.4 0C101.5 -1 116.7 -1 131.8 0C137.1 0.4 141.2 4.5 141.6 9.7C142.6 24.9 142.6 40 141.6 55.2C141.2 60.4 137.1 64.6 131.8 64.9C116.7 66 101.5 66 86.4 64.9C81.2 64.6 77 60.4 76.6 55.2C75.6 40 75.6 24.9 76.6 9.7C77 4.5 81.2 0.4 86.4 0ZM9.7 76.6C24.9 75.6 40 75.6 55.2 76.6C60.4 77 64.6 81.2 64.9 86.4C66 101.5 66 116.7 64.9 131.8C64.6 137.1 60.4 141.2 55.2 141.6C40 142.6 24.9 142.6 9.7 141.6C4.5 141.2 0.4 137.1 0 131.8C-1 116.7 -1 101.5 0 86.4C0.4 81.2 4.5 77 9.7 76.6Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-14.72 -14.72 184 184%27%3E%3Cpath d=%27M9.7 0C24.9 -1 40 -1 55.2 0C60.4 0.4 64.6 4.5 64.9 9.7C66 24.9 66 40 64.9 55.2C64.6 60.4 60.4 64.6 55.2 64.9C40 66 24.9 66 9.7 64.9C4.5 64.6 0.4 60.4 0 55.2C-1 40 -1 24.9 0 9.7C0.4 4.5 4.5 0.4 9.7 0ZM86.4 0C101.5 -1 116.7 -1 131.8 0C137.1 0.4 141.2 4.5 141.6 9.7C142.6 24.9 142.6 40 141.6 55.2C141.2 60.4 137.1 64.6 131.8 64.9C116.7 66 101.5 66 86.4 64.9C81.2 64.6 77 60.4 76.6 55.2C75.6 40 75.6 24.9 76.6 9.7C77 4.5 81.2 0.4 86.4 0ZM9.7 76.6C24.9 75.6 40 75.6 55.2 76.6C60.4 77 64.6 81.2 64.9 86.4C66 101.5 66 116.7 64.9 131.8C64.6 137.1 60.4 141.2 55.2 141.6C40 142.6 24.9 142.6 9.7 141.6C4.5 141.2 0.4 137.1 0 131.8C-1 116.7 -1 101.5 0 86.4C0.4 81.2 4.5 77 9.7 76.6Z%27/%3E%3C/svg%3E");
  background: linear-gradient(45deg, #4F4FE0 8%, #834DE8 50%, #B24BE3 92%); background: linear-gradient(in oklch 45deg, #4F4FE0 8%, #B24BE3 92%); }
.ih__mk--mm > i + i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-14.72 -14.72 184 184%27%3E%3Cpath d=%27M99.4 89.6C114.5 88.6 129.7 88.6 144.8 89.6C150 90 154.2 94.1 154.6 99.4C155.6 114.5 155.6 129.7 154.6 144.8C154.2 150 150 154.2 144.8 154.6C129.7 155.6 114.5 155.6 99.4 154.6C94.1 154.2 90 150 89.6 144.8C88.6 129.7 88.6 114.5 89.6 99.4C90 94.1 94.1 90 99.4 89.6Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-14.72 -14.72 184 184%27%3E%3Cpath d=%27M99.4 89.6C114.5 88.6 129.7 88.6 144.8 89.6C150 90 154.2 94.1 154.6 99.4C155.6 114.5 155.6 129.7 154.6 144.8C154.2 150 150 154.2 144.8 154.6C129.7 155.6 114.5 155.6 99.4 154.6C94.1 154.2 90 150 89.6 144.8C88.6 129.7 88.6 114.5 89.6 99.4C90 94.1 94.1 90 99.4 89.6Z%27/%3E%3C/svg%3E"); background: #6F42C1; }
.ih__mk--forge > i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-8 -8 184 184%27%3E%3Cpath d=%27M91.1 7.1C116.4 28.4 139.6 51.6 160.9 76.9C164.3 81 164.3 87 160.9 91.1C139.6 116.4 116.4 139.6 91.1 160.9C87 164.3 81 164.3 76.9 160.9C51.6 139.6 28.4 116.4 7.1 91.1C3.7 87 3.7 81 7.1 76.9C28.4 51.6 51.6 28.4 76.9 7.1C81 3.7 87 3.7 91.1 7.1Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-8 -8 184 184%27%3E%3Cpath d=%27M91.1 7.1C116.4 28.4 139.6 51.6 160.9 76.9C164.3 81 164.3 87 160.9 91.1C139.6 116.4 116.4 139.6 91.1 160.9C87 164.3 81 164.3 76.9 160.9C51.6 139.6 28.4 116.4 7.1 91.1C3.7 87 3.7 81 7.1 76.9C28.4 51.6 51.6 28.4 76.9 7.1C81 3.7 87 3.7 91.1 7.1Z%27/%3E%3C/svg%3E");
  background: linear-gradient(45deg, #FFB03A 4.35%, #FD841B 50%, #F2542D 95.65%); background: linear-gradient(in oklch 45deg, #FFB03A 4.35%, #F2542D 95.65%); }
.ih__mk--ma > i { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-24.8 -24.8 184 184%27%3E%3Cpath d=%27M0 67.2A67.2 67.2 0 0 1 67.2 0A67.2 67.2 0 0 1 134.4 67.2A67.2 67.2 0 0 1 67.2 134.4A470.4 470.4 0 0 1 12.9 131.3C7.8 130.7 3.7 126.6 3.1 121.5A470.4 470.4 0 0 1 0 67.2Z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-24.8 -24.8 184 184%27%3E%3Cpath d=%27M0 67.2A67.2 67.2 0 0 1 67.2 0A67.2 67.2 0 0 1 134.4 67.2A67.2 67.2 0 0 1 67.2 134.4A470.4 470.4 0 0 1 12.9 131.3C7.8 130.7 3.7 126.6 3.1 121.5A470.4 470.4 0 0 1 0 67.2Z%27/%3E%3C/svg%3E");
  background: linear-gradient(45deg, #1DBCB4 13.48%, #00A1DF 50%, #2A6BFF 86.52%); background: linear-gradient(in oklch 45deg, #1DBCB4 13.48%, #2A6BFF 86.52%); }
.ih__agent { grid-area: 1 / 2 / 2 / 3; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ih-ink); white-space: nowrap; }
.ih__msg { grid-area: 2 / 2 / 3 / 3; margin-top: 4px; font-size: 18px; line-height: 26px; color: var(--ih-text); }
.ih__caret { display: inline-block; width: 2px; height: 20px; margin-left: 1px; vertical-align: -4px; border-radius: 1px;
  background: var(--ih-hi); animation: ih-blink 1s steps(1) infinite; }
@keyframes ih-blink { 50% { opacity: 0; } }
.ih__box[data-agent="mm"] { --ih-hi: #834DE8; }
.ih__box[data-agent="forge"] { --ih-hi: #F2542D; }
.ih__box[data-agent="ma"] { --ih-hi: #0A8FD6; }
.ih__box[data-agent="ma"] .ih__caret { display: none; }
.ih__att { grid-area: 3 / 2 / 4 / 3; justify-self: start; align-self: end; display: none; align-items: center; gap: 8px; height: 32px;
  padding: 0 12px 0 6px; border: 1px solid #E3E7EE; border-radius: 8px; background: #F7F8FA; font-size: 13px; line-height: 16px;
  font-weight: 500; color: var(--ih-ink); white-space: nowrap; }
.ih__att b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #E5484D; color: #fff;
  font-size: 8px; line-height: 1; font-weight: 700; letter-spacing: .4px; }
.ih__box.has-att .ih__att { display: inline-flex; animation: ih-pop .45s var(--ih-ease) backwards; }
@keyframes ih-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } }
.ih__send { grid-area: 1 / 3 / 4 / 4; align-self: end; position: relative; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; background: #EEF1F5; color: #98A1B0; transition: background-color .3s ease, color .3s ease; }
.ih__send svg { width: 20px; height: 20px; }
.ih__send .ih__mic, .ih__box[data-agent="ma"] .ih__send .ih__up { display: none; }
.ih__box[data-agent="ma"] .ih__send .ih__mic { display: block; }
.ih__box.is-ready .ih__send { background: var(--ih-ink); color: #fff; }

/* sending: the button pressed, the caret gone, a light in the agent's colour running along the request */
.ih__box.is-sent .ih__send { animation: ih-press .3s ease; }
@keyframes ih-press { 50% { transform: scale(.86); } }
.ih__box.is-sent .ih__caret { visibility: hidden; }
.ih__box.is-sent .ih__text { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, var(--ih-text) 0 38%, var(--ih-hi) 50%, var(--ih-text) 62% 100%);
  background-size: 300% 100%; background-repeat: no-repeat; animation: ih-sweep 1.1s ease-in-out both; }
@keyframes ih-sweep { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Mobile AI is spoken to: the mic live in its colour, a hairline ring going out from it */
.ih__box.is-listening .ih__send { background: var(--ih-hi); color: #fff; }
.ih__box.is-listening .ih__send::after { content: ''; position: absolute; inset: -4px; border: 1.5px solid var(--ih-hi); border-radius: 14px;
  animation: ih-ping 1.2s ease-out infinite; }
@keyframes ih-ping { from { opacity: .6; transform: scale(.92); } to { opacity: 0; transform: scale(1.2); } }

/* changing hands: the line lifts out (transform) or blurs away (dissolve); the next comes in. Transitions only on
   the way out, so the way in is the animation alone */
.ih__body.is-out .ih__fx { opacity: 0; transform: translateY(-14px); transition: opacity .3s ease, transform .35s var(--ih-ease); }
.ih__body.is-dissolve .ih__fx { opacity: 0; filter: blur(10px); transform: scale(1.04); transition: opacity .5s ease, filter .5s ease, transform .5s ease; }
.ih__body.is-in .ih__fx { animation: ih-rise .45s var(--ih-ease) backwards; }
.ih__body.is-unblur .ih__fx { animation: ih-unblur .6s ease backwards; }
@keyframes ih-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes ih-unblur { from { opacity: 0; filter: blur(10px); } }

/* the end: the contents go, the box draws in to a circle - the edge still running round it - and becomes the replay
   button; the way on comes up under it. The circle settles a quarter of the spare height down and the way on comes
   up the same, so the two read as one (the box's row keeps its height: nothing below moves) */
.ih__body.is-closing { opacity: 0; transition: opacity .2s ease; }
.ih.is-done { --ih-r: calc(var(--ih-hd) / 2); }
.ih.is-done .ih__box { width: var(--ih-hd); height: var(--ih-hd); transform: translateY(var(--ih-dy)); }
.ih__replay { position: absolute; inset: calc(var(--ih-dy) * 2) 0 0 0; z-index: 2; display: grid; place-items: center; width: var(--ih-hd); height: var(--ih-hd);
  margin: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ih-ink); cursor: pointer;
  animation: ih-pop .4s var(--ih-ease) backwards; }
.ih__replay[hidden] { display: none; }
.ih__replay svg { width: 26px; height: 26px; transition: transform .4s var(--ih-ease); }
.ih__replay:hover svg { transform: rotate(-40deg); }
.ih__replay:focus-visible, .ih__more:focus-visible { outline: 2px solid var(--ih-blue); outline-offset: 4px; }
.ih__more { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; border-radius: 4px; font-size: 15px; line-height: 20px;
  font-weight: 500; color: var(--ih-ink); text-decoration: none;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ih__more svg { width: 18px; height: 18px; animation: ih-bob 1.8s ease-in-out infinite; }
@keyframes ih-bob { 50% { transform: translateY(4px); } }
.ih__more:hover { color: var(--ih-blue); }
.ih.is-done .ih__more, .ih.is-still .ih__more, .ih__more:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
.ih.is-done .ih__more { transform: translateY(calc(var(--ih-dy) * -1)); }
.ih.is-done .ih__more { transition: opacity .5s ease .3s, transform .5s var(--ih-ease) .3s; }
@media (scripting: none) { .ih__more { opacity: 1; transform: none; pointer-events: auto; } }

/* still: the reader's reduced motion - the first request in the box, the edge at rest, the way on shown. Nothing
   runs while the block is off screen, and the edge holds while the site's Pause animations is on (element.js) */
.ih.is-still .ih__flow, .ih.is-still .ih__caret, .ih.is-still .ih__more svg { animation: none; }
.ih.is-still .ih__caret { display: none; }
.ih.is-off .ih__flow, .ih.is-off .ih__caret, .ih.is-off .ih__more svg, .ih.is-off .ih__send::after { animation-play-state: paused; }
.ih.is-paused .ih__flow, .ih.is-paused .ih__caret, .ih.is-paused .ih__more svg, .ih.is-paused .ih__send::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ih__flow, .ih__caret, .ih__more svg { animation: none; }
}

/* under 1024 the heading a size down; on a phone the box a size down, the request on two lines */
@media (max-width: 1023px) {
  .ih__h { max-width: 720px; font-size: 48px; line-height: 52px; letter-spacing: -.96px; }
}
@media (max-width: 767px) {
  .ih { --ih-h: 140px; --ih-hd: 60px; padding: 72px 16px 56px; }
  .ih__eyebrow { margin-bottom: 16px; }
  .ih__h { font-size: 36px; line-height: 40px; letter-spacing: -.72px; }
  .ih__stage { margin-top: 40px; gap: 24px; }
  .ih__body { grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 12px 12px 16px; }
  .ih__mark { width: 26px; height: 26px; margin-top: 0; }
  .ih__agent { font-size: 13px; line-height: 16px; }
  .ih__msg { margin-top: 4px; font-size: 16px; line-height: 22px; }
  .ih__caret { height: 18px; vertical-align: -3px; }
  .ih__att { height: 30px; padding: 0 10px 0 4px; gap: 6px; font-size: 12px; }
  .ih__att b { width: 22px; height: 22px; font-size: 7.5px; }
  .ih__send { width: 36px; height: 36px; }
  .ih__send svg { width: 18px; height: 18px; }
}