/* Illustration kit — HTML/CSS workflow media with real text, sized in em so each scene scales as one unit.
   Scenes are decorative (role="img" + aria-label on .m). Compositions collapse to stacked flows on narrow frames. */

/* ---------- frames ---------- */
.frame, .cta__media { container-type: inline-size; }
.frame {
  position: relative; isolation: isolate; border-radius: var(--r-lg);
  background: linear-gradient(155deg, #edf4fe 0%, #f6faff 55%, #fbfdff 100%);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line), 0 30px 60px -30px rgba(11, 111, 220, 0.18);
  overflow: hidden;
}
.frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(11, 111, 220, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 111, 220, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 110% at 55% 35%, #000 25%, transparent 85%);
  mask-image: radial-gradient(120% 110% at 55% 35%, #000 25%, transparent 85%);
}
.scene { display: none; }
.scene.is-active { display: block; }

/* ---------- scene canvas ---------- */
.m {
  position: relative; width: 100%; aspect-ratio: 640 / 430; color: var(--navy);
  font-size: clamp(11px, 2cqw, 13.6px); line-height: 1.3;
}
.m--s1 { aspect-ratio: 640 / 420; --ar: 1.524; --nh: 25; }
.m--s2 { aspect-ratio: 640 / 460; --ar: 1.391; --nh: 26; }
.m--s3 { aspect-ratio: 640 / 410; --ar: 1.561; --nh: 26.5; }
.m--s4 { aspect-ratio: 640 / 450; --ar: 1.422; --nh: 30; }
.m--cta { aspect-ratio: 560 / 330; font-size: clamp(11px, 2.55cqw, 15px); }
.m-abs { position: absolute; left: var(--x, 0); top: var(--y, 0); width: var(--w, auto); }
.m > * { min-width: 0; }

/* ---------- surfaces ---------- */
.m-card, .m-win {
  background: #fff; border: 1px solid rgba(208, 223, 244, 0.6); border-radius: 0.9em;
  box-shadow: 0 0.08em 0.2em rgba(12, 26, 75, 0.03), 0 0.9em 2.2em -0.8em rgba(11, 111, 220, 0.12);
}
.m-card { padding: 1.05em 1.15em 1.15em; }
.m-card--raise, .m-win--main { box-shadow: 0 0.12em 0.3em rgba(12, 26, 75, 0.035), 0 1.4em 3em -1em rgba(11, 111, 220, 0.18); z-index: 2; }
.m-win { overflow: hidden; }
.m-win__bar { height: 1.95em; background: linear-gradient(90deg, #3f86ec, #66a1f4); display: flex; align-items: center; padding-left: 0.95em; }
.m-win__bar span { width: 0.46em; height: 0.46em; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0.85em 0 rgba(255, 255, 255, 0.92), 1.7em 0 rgba(255, 255, 255, 0.92); }
.m-win__body { padding: 1.05em 1.15em 1.25em; }
.m-win--ghost { opacity: 0.75; box-shadow: none; }
.m-win--ghost .m-win__bar { background: var(--blue-200); }
.m-title { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin: 0 0 0.85em; font-size: 1.04em; font-weight: 600; color: var(--navy); }

/* skeleton content lines */
.m-bars { display: grid; flex: 1; gap: 0.45em; min-width: 0; }
.m-bars i { display: block; height: 0.5em; border-radius: 0.3em; width: var(--w, 100%); background: linear-gradient(90deg, #d6e5fb, #e7f0fd); }
.m-bars--head { margin: 0 0 1.1em; }
.m-bars--foot { margin-top: 1.1em; }

.m-avatar { flex: none; width: 2em; height: 2em; border-radius: 50%; background:
  radial-gradient(circle at 50% 38%, #9dbde9 0 21%, transparent 22%),
  radial-gradient(ellipse at 50% 102%, #9dbde9 0 42%, transparent 43%), #e2edfc; }

/* checks */
.m-check { position: relative; flex: none; width: 1.4em; height: 1.4em; border-radius: 50%; border: 0.14em solid var(--blue); }
.m-check--done { background: var(--blue); }
.m-check--ok { background: var(--green); border-color: var(--green); }
.m-check--done::after, .m-check--ok::after {
  content: ""; position: absolute; left: 0.39em; top: 0.13em; width: 0.32em; height: 0.62em;
  border: solid #fff; border-width: 0 0.16em 0.16em 0; transform: rotate(45deg);
}
.m-check--open { border-color: var(--blue); background: #fff; }
.m-check--ring { border-color: var(--blue-300); background: radial-gradient(circle, var(--blue) 0 0.28em, #fff 0.3em); }
.m-check--run { border-color: var(--blue-200); border-top-color: var(--blue); animation: m-spin 1.1s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

.m-pill { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.2em 0.8em; border-radius: 2em; font-size: 0.85em; font-weight: 700; white-space: nowrap; background: var(--green-50); color: #0c7a55; }
.m-pill--blue { background: var(--blue-100); color: var(--blue); }
.m-pill--mute { background: #eef2f8; color: #6f7ca0; }
.m-pill--lock::before { content: ""; width: 1em; height: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fdc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3'/%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3C/svg%3E") center / contain no-repeat; }

.m-chip { padding: 0.42em 1em; border-radius: 2em; background: #fff; border: 0.08em solid #dbe7f7; font-size: 0.92em; font-weight: 700; white-space: nowrap; box-shadow: 0 0.2em 0.6em rgba(11, 111, 220, 0.07); }
.m-chip--on { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0.4em 1em rgba(11, 111, 220, 0.3); }
.m-flow { display: flex; align-items: center; }
.m-flow i { flex: 1; min-width: 0.6em; height: 0.16em; background: linear-gradient(90deg, var(--blue-200), var(--blue-300)); }

.m-arrow { width: 2.3em; height: 2.3em; border-radius: 50%; translate: -50% -50%; z-index: 3; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fdc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1em no-repeat; border: 0.08em solid #dbe7f7; box-shadow: 0 0.3em 0.9em rgba(11, 111, 220, 0.12); }

.m-live { display: inline-flex; align-items: center; gap: 0.45em; font-size: 0.8em; font-weight: 700; color: var(--green); }
.m-live b { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.25em rgba(23, 166, 115, 0.18); animation: m-pulse 2.4s ease-in-out infinite; }
.m-live--block { font-size: 1em; margin: 0.4em 0 0; }
@keyframes m-pulse { 50% { box-shadow: 0 0 0 0.45em rgba(23, 166, 115, 0); } }

.m-toggle { flex: none; position: relative; width: 2.4em; height: 1.4em; border-radius: 2em; background: var(--blue); }
.m-toggle::after { content: ""; position: absolute; right: 0.18em; top: 0.18em; width: 1.04em; height: 1.04em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.18); }
.m-toggle--lg { width: 3em; height: 1.7em; }
.m-toggle--lg::after { width: 1.34em; height: 1.34em; }

.m-meta { margin: 0; font-size: 0.95em; font-weight: 600; color: var(--navy); }
.m-meta--sub { font-weight: 400; color: var(--ink-muted); }
.m-cal { flex: none; width: 2.3em; height: 2.3em; border-radius: 0.55em; border: 0.1em solid var(--blue-200); background: linear-gradient(#3f86ec, #3f86ec) top / 100% 0.7em no-repeat, radial-gradient(circle, #9cc3f5 0.12em, transparent 0.14em) 0 0.55em / 0.6em 0.55em, #fff; }
.m-appt { display: flex; align-items: center; gap: 0.85em; margin-bottom: 0.9em; }
.m-doc { flex: none; width: 1.1em; height: 1.4em; border-radius: 0.2em; border: 0.13em solid var(--blue-300); background: #fff; }
.m-bigcheck { position: relative; display: block; width: 3.2em; height: 3.2em; margin: 0.4em auto 1em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.55em var(--green-50); }
.m-bigcheck::after { content: ""; position: absolute; left: 1.08em; top: 0.5em; width: 0.62em; height: 1.2em; border: solid #fff; border-width: 0 0.24em 0.24em 0; transform: rotate(45deg); }

/* lists */
.m-steps li { display: flex; align-items: center; gap: 0.8em; padding: 0.5em 0; font-size: 0.95em; }
.m-steps li > .m-pill { margin-left: auto; }
.m-steps li > .m-bars { margin-left: auto; flex: none; width: 34%; }
.m-steps--tight li { padding: 0.42em 0; }
.m-steps li:has(> .m-check + .m-bars) > .m-bars { width: auto; flex: 1; margin-left: 0; }
.m-steps--line li { position: relative; }
.m-steps--line li:not(:last-child)::before { content: ""; position: absolute; left: 0.63em; top: 2.05em; bottom: -0.5em; width: 0.14em; background: var(--blue-200); }
.m-people li { display: flex; align-items: center; gap: 0.8em; padding: 0.45em 0; }
.m-people--sm .m-avatar { width: 1.7em; height: 1.7em; }
.m-people li > .m-pill { margin-left: auto; }
.m-people--pick li.is-pick { background: var(--blue-50); border-radius: 0.6em; padding-inline: 0.6em; margin-inline: -0.6em; box-shadow: inset 0 0 0 0.1em var(--blue-200); }
.m-people--pick li:not(.is-pick) { opacity: 0.75; }
.m-files li { display: flex; align-items: center; gap: 0.7em; padding: 0.45em 0.65em; background: var(--blue-50); border-radius: 0.6em; font-size: 0.92em; font-weight: 600; }
.m-files li + li { margin-top: 0.35em; }
.m-files + .m-people { margin-top: 0.75em; }
.m-goals li { display: flex; align-items: center; gap: 0.8em; padding: 0.6em 0; font-size: 0.95em; font-weight: 600; }
.m-goals li + li { border-top: 0.08em solid #edf2fa; }

.m-chat { display: grid; gap: 0.5em; margin-bottom: 0.9em; }
.m-bubble { display: grid; gap: 0.3em; justify-self: start; width: 78%; padding: 0.6em 0.75em; background: var(--blue-50); border-radius: 0.7em 0.7em 0.7em 0.2em; }
.m-bubble i { display: block; height: 0.45em; border-radius: 0.3em; background: var(--blue-200); }
.m-bubble i:nth-child(2) { width: 60%; }
.m-bubble--out { justify-self: end; background: var(--blue); border-radius: 0.7em 0.7em 0.2em 0.7em; }
.m-bubble--out i { background: rgba(255, 255, 255, 0.72); }
.m-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3em; margin-bottom: 0.9em; }
.m-week i { aspect-ratio: 1; border-radius: 0.3em; background: var(--blue-50); border: 0.08em solid #e3ecf9; }
.m-week i.on { background: var(--blue); border-color: var(--blue); box-shadow: 0 0.3em 0.8em rgba(11, 111, 220, 0.35); }
.m-field { margin-top: 0.7em; }
.m-field small { display: block; margin-bottom: 0.25em; font-size: 0.82em; font-weight: 600; color: var(--ink-muted); }
.m-field i { display: block; height: 1.6em; border-radius: 0.4em; background: var(--blue-50); border: 0.08em solid #e3ecf9; }
.m-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; margin-bottom: 0.7em; }
.m-fields .m-field { margin-top: 0; }
.m-kv > div { display: grid; grid-template-columns: 40% 1fr; align-items: center; padding: 0.55em 0; border-top: 0.08em solid #edf2fa; font-size: 0.9em; }
.m-kv dt { font-weight: 600; color: var(--ink-muted); }
.m-kv dd { margin: 0; }
.m-kv dd i { display: block; width: var(--w); height: 0.5em; border-radius: 0.3em; background: linear-gradient(90deg, #d6e5fb, #e7f0fd); }
.m-grid13 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4em; }
.m-grid13 i { aspect-ratio: 1; border-radius: 0.35em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b6fdc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat, var(--blue-100); }
.m-gantt { display: grid; gap: 0.6em; }
.m-gantt > div { position: relative; height: 1.35em; border-radius: 0.4em; background: var(--blue-50); border: 0.08em solid #e6eefa; }
.m-gantt i { position: absolute; top: 0.2em; bottom: 0.2em; left: var(--l); width: var(--w); border-radius: 0.3em; background: linear-gradient(90deg, #5f9cf2, #3f86ec); }

/* chart (stage 04) */
.m-card--chart { padding-bottom: 1.2em; }
.m-chart { display: block; width: 100%; height: auto; aspect-ratio: 400 / 160; overflow: visible; }
.c-grid path { fill: none; stroke: #e6eefa; stroke-width: 1; }
.c-line { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.c-line--2 { stroke: var(--blue-300); stroke-width: 2; }
.c-dots circle { fill: #fff; stroke: var(--blue); stroke-width: 2.4; }
.m-tag { position: absolute; left: var(--x); top: var(--y); padding: 0.3em 0.95em; border-radius: 2em; background: #fff; border: 0.08em solid #dbe7f7; font-size: 0.88em; font-weight: 700; color: var(--navy); box-shadow: 0 0.3em 0.9em rgba(11, 111, 220, 0.12); white-space: nowrap; }
.m-tag--soft { color: var(--ink); }
.m-cov li { display: grid; grid-template-columns: 7.4em 1fr; align-items: center; gap: 0.6em; padding: 0.45em 0; font-size: 0.9em; white-space: nowrap; font-weight: 600; }
.m-cov i { display: block; width: var(--w); height: 0.65em; border-radius: 0.4em; background: linear-gradient(90deg, #5f9cf2, #3f86ec); transform-origin: left; }
.m-cov__next span { color: var(--blue); }
.m-cov__next i { background: none; border: 0.1em dashed var(--blue-300); height: 0.75em; }

/* stage 02 hub layout */
.m--s2 { display: grid; grid-template-columns: minmax(0, 29%) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 27%); padding: 0 3.5%; }
.s2-col { display: grid; grid-template-rows: 3em 1fr; min-width: 0; }
.s2-label { align-self: end; margin: 0 0 0.6em; font-size: 0.82em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.s2-body { display: grid; align-items: center; }
.s2-body--3 { grid-template-rows: repeat(3, 1fr); }
.s2-body--4 { grid-template-rows: repeat(4, 1fr); }
.m-sys { display: flex; align-items: center; gap: 0.7em; padding: 0.7em 0.85em; font-size: 0.95em; font-weight: 700; }
.m-sys > span:first-child:not(.m-avatar) { flex: 1; }
.m-sys .m-avatar + span { flex: 1; }
.m-dot { width: 0.65em; height: 0.65em; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0.26em rgba(23, 166, 115, 0.16); }
.m-sys .m-toggle { margin-left: auto; width: 2.1em; height: 1.2em; }
.m-sys .m-toggle::after { width: 0.86em; height: 0.86em; top: 0.17em; right: 0.17em; }
.s2-col--wire svg { display: block; width: 100%; height: 100%; overflow: visible; }
.s2-col--wire path { fill: none; stroke: var(--blue-300); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.s2-hubbody { display: grid; justify-items: center; align-content: center; gap: 1em; padding-inline: 0.8em; }
.m-hub { display: grid; place-items: center; width: 6.8em; height: 6.8em; border-radius: 1.9em; background: #fff; border: 0.08em solid #dfe8f6; box-shadow: 0 0.2em 0.5em rgba(12, 26, 75, 0.05), 0 1.6em 3.4em rgba(11, 111, 220, 0.18); position: relative; }
.m-hub::before { content: ""; position: absolute; inset: -1.6em; border-radius: 50%; border: 0.08em solid var(--blue-200); opacity: 0.7; }
.m-hub img { width: 3.6em; height: auto; }

/* CTA scene — flow layout, contained at every width */
/* one composed group: report anchored left, chart anchored right, overlap on the report's empty footer,
   so the group's visual centre is the container centre */
.m--cta { aspect-ratio: auto; display: grid; font-size: clamp(11px, 2.6cqw, 13.5px); }
.cta-report { width: 84%; justify-self: start; }
.cta-report .m-win__body { padding-bottom: 3.6em; }
.cta-report .m-steps li { font-weight: 600; }
.cta-report .m-steps li > .m-bars { width: 24%; }
.cta-chart { position: relative; z-index: 3; width: 54%; justify-self: end; margin-top: -3em; }
.cta-chart .m-title { margin-bottom: 0.6em; }
.cta-chart .m-columns { height: 6.2em; }
.m-columns { display: flex; align-items: flex-end; gap: 0.6em; height: 8.5em; margin-top: 0.4em; }
.m-columns i { flex: 1; height: var(--h); border-radius: 0.3em 0.3em 0 0; background: linear-gradient(180deg, #3f86ec, #86b8f8); transform-origin: bottom; }

/* ---------- story scenes inside stacked cards ---------- */
@media (prefers-reduced-motion: no-preference) and (min-height: 540px) {
  .scard .m { width: min(96cqw, 660px, calc(94cqh * var(--ar))); font-size: min(14px, 2.04cqw, calc(2cqh * var(--ar))); }
}

/* ---------- motion ---------- */
.scene.is-active .m-abs { animation: m-rise 0.55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.scene.is-active .m-arrow { animation-name: m-fade; }
@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-fade { from { opacity: 0; } }
.m > :nth-child(2) { --i: 1; } .m > :nth-child(3) { --i: 2; } .m > :nth-child(4) { --i: 3; } .m > :nth-child(5) { --i: 4; } .m > :nth-child(6) { --i: 5; } .m > :nth-child(7) { --i: 6; }

/* stage story: build once on entry (hidden only when JS is present to reveal it) */
.js .stage .m-abs, .js .stage .s2-col > * { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .stage:not(.is-in) .m-abs, .js .stage:not(.is-in) .s2-col:not(.s2-col--wire) > :not(span) { opacity: 0; transform: translateY(14px); }
.s2-col--wire { transition: opacity 0.8s 0.3s; }
.js .stage:not(.is-in) .s2-col--wire { opacity: 0; }
.js .stage:not(.is-in) .c-line { stroke-dashoffset: 1; }
.js .stage:not(.is-in) .c-area, .js .stage:not(.is-in) .c-dots { opacity: 0; }
.js .stage .c-line { transition: stroke-dashoffset 1.6s var(--ease) 0.35s; }
.js .stage .c-area, .js .stage .c-dots { transition: opacity 0.8s 1.1s; }
.js .stage:not(.is-in) .m-cov i { transform: scaleX(0); }
.js .stage .m-cov i { transition: transform 0.9s var(--ease) 0.6s; }
.js .stage .s2-col:nth-child(3) { --i: 2; }
.js .stage .s2-col:nth-child(5) { --i: 4; }
.js .cta:not(.is-in) .m-columns i { transform: scaleY(0.05); }
.js .cta .m-columns i { transition: transform 0.8s var(--ease) 0.4s; }
.js .cta .m-columns i:nth-child(2) { transition-delay: 0.48s; } .js .cta .m-columns i:nth-child(3) { transition-delay: 0.56s; } .js .cta .m-columns i:nth-child(4) { transition-delay: 0.64s; } .js .cta .m-columns i:nth-child(5) { transition-delay: 0.72s; } .js .cta .m-columns i:nth-child(6) { transition-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
  .js .stage:not(.is-in) .m-abs, .js .stage:not(.is-in) .s2-col > *, .js .stage:not(.is-in) .s2-col--wire { opacity: 1; transform: none; }
  .js .stage:not(.is-in) .c-line { stroke-dashoffset: 0; }
  .js .stage:not(.is-in) .c-area, .js .stage:not(.is-in) .c-dots { opacity: 1; }
  .js .stage:not(.is-in) .m-cov i, .js .cta:not(.is-in) .m-columns i { transform: none; }
}

/* ---------- narrow frames: recompose as a stacked flow (not a shrunk desktop) ---------- */
@container (max-width: 479px) {
  .m { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 1.1em; padding: 1.25em; font-size: 12px; }
  .m-abs { position: static; width: auto; }
  .m-hide-sm { display: none; }
  .m-arrow { translate: none; align-self: center; rotate: 90deg; width: 2em; height: 2em; margin-block: -0.4em; }
  .m-flow { flex-wrap: wrap; gap: 0.5em; }
  .m-flow i { display: none; }
  .m-chip { font-size: 0.86em; padding: 0.35em 0.85em; }
  .m-tag { display: none; }
  .m-week { max-width: 17em; }
  .m-grid13 { max-width: 21em; }
  .m--s2 { display: flex; flex-direction: column; padding: 1.25em; gap: 0.4em; }
  .s2-col { grid-template-rows: auto auto; }
  .s2-col--wire { display: none; }
  .s2-col > span:empty { display: none; }
  .s2-label { margin: 0 0 0.7em; }
  .s2-body { gap: 0.55em; }
  .s2-col--hub { position: relative; padding-block: 1.6em; }
  .s2-col--hub::before, .s2-col--hub::after { content: ""; position: absolute; left: 50%; width: 1px; height: 1.4em; background: var(--blue-300); }
  .s2-col--hub::before { top: 0; }
  .s2-col--hub::after { bottom: 0; }
  .m-hub { width: 5.6em; height: 5.6em; }
}

/* story cards on narrow frames: compact two-column compositions sized to fit the sticky card */
@container (max-width: 479px) {
  .scard .m { width: 100%; aspect-ratio: auto !important; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; gap: 0.75em; padding: 1em; font-size: min(13px, calc(100cqw / 23)); }
  .scard .m-abs { grid-column: 1 / -1; }
  .scard .m-half { grid-column: auto; }
  .scard .m-arrow { justify-self: center; margin-block: -0.35em; }
  .scard .m-arrow--side { display: none; }
  .scard .m-card { padding: 0.85em 0.9em 0.9em; }
  .scard .m-title { margin-bottom: 0.65em; }
  .scard .m-bars--foot { display: none; }
  .scard .m-flow { justify-content: flex-start; }
  .scard .m-goals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.8em; }
  .scard .m-goals li { padding: 0.4em 0; }
  .scard .m-goals li + li { border-top: 0; }
  .scard .m-gantt { gap: 0.5em; }
  .scard .m-card--chart { padding-bottom: 0.9em; }
  .scard .m-cov li { grid-template-columns: 7em 1fr; padding: 0.32em 0; }
  /* Configure Agents: systems row -> workforce hub -> agents grid */
  .scard .m--s2 { display: flex; flex-direction: column; gap: 0.2em; padding: 1em; }
  .scard .s2-body--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 0.45em; }
  .scard .s2-body--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 0.45em; }
  .scard .s2-body--3 .m-sys { flex-direction: column; justify-content: center; gap: 0.35em; padding: 0.6em 0.3em; text-align: center; font-size: 0.9em; line-height: 1.2; min-height: 4.6em; }
  .scard .s2-body--3 .m-sys .m-avatar { width: 1.5em; height: 1.5em; }
  .scard .s2-body--3 .m-dot { display: none; }
  .scard .s2-body--4 .m-sys { padding: 0.55em 0.65em; font-size: 0.9em; }
  .scard .s2-col--hub { padding-block: 1.3em; }
  .scard .s2-col--hub::before, .scard .s2-col--hub::after { height: 1.1em; }
  .scard .s2-hubbody { gap: 0.6em; }
  .scard .m-hub { width: 4.4em; height: 4.4em; border-radius: 1.3em; }
  .scard .m-hub::before { inset: -1em; }
  .scard .m-hub img { width: 2.4em; }
  .scard .s2-label { margin-bottom: 0.5em; }
  /* CTA media */
  .cta .m--cta { display: grid; gap: 0; padding: 0; font-size: clamp(9.25px, 4.3cqw, 12px); }
  .cta .cta-report { width: 90%; }
  .cta .cta-report .m-steps li > .m-bars { display: none; }
  .cta .cta-chart { width: 58%; margin-top: -2.8em; }
  .cta .cta-chart .m-columns { height: 5em; }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 540px) {
  @container (max-width: 479px) {
    .scard .m { font-size: min(13px, calc(100cqw / 23), calc(100cqh / var(--nh))); }
  }
}