.use-case-hero { padding-block: calc(var(--bar-clearance) + var(--space-l) - var(--hero-top, var(--space-m))) 0; }
.use-case-directory { margin-top: calc(var(--space-xl) - var(--section-gap)); padding-top: 0; }
.use-case-directory > * { min-width: 0; }
.use-case-art { overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--frame-radius); background: var(--tint-teal); }
.use-case-art > img { width: 100%; height: 100%; object-fit: cover; }
.use-case-tagline { font-size: clamp(var(--foundry-scale-md), 1.6vw, var(--foundry-scale-lg)); }
.use-case-lede { font-size: clamp(var(--fs-body), 1.25vw, var(--fs-lead)); }
@media (min-width: 900px) {
  .use-case-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; column-gap: clamp(32px, 5vw, 80px); }
}

.use-case-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-caption); color: var(--fg-weak); }
.use-case-crumbs span { display: inline-flex; gap: 8px; }
.use-case-crumbs i { font-style: normal; opacity: 0.6; }
.use-case-crumbs a:hover { color: var(--fg-default); }
.use-case-crumbs b { font-weight: 500; color: var(--fg-default); }
.use-case-crumbs .use-case-swap { margin-left: var(--space-xs); padding: 4px 11px; border: 1px solid var(--border-brand); border-radius: 999px; color: var(--fg-brand); font-weight: 600; }
.use-case-crumbs .use-case-swap:hover { background: var(--bg-surface-brand); color: var(--fg-brand); }
.use-case-eyebrow { display: flex; align-items: center; gap: 8px 14px; }
.use-case-eyebrow > b { flex: none; padding: 5px 12px; border-radius: 999px; background: var(--bg-control-brand-strong); color: var(--fg-on-brand); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; }
.use-case-page .use-case-eyebrow > .eyebrow { color: var(--fg-brand); }

.use-case-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 8px; border-radius: 18px; background: var(--bg-surface-sunken); scroll-margin-top: calc(var(--bar-card-height) + var(--bar-inset) + var(--space-s)); --st-edge: 0; --shadow-c: transparent; --chip-face: transparent; --chip-text: var(--fg-weak); --chip-weight: 500; --chip-pad-x: 9px; --chip-pad-y: 9px; --st-pill: 10; }
.use-case-seg-switch { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--bg-surface-raised); box-shadow: inset 0 0 0 1px var(--border-default); --chip-on-face: var(--bg-surface-inverse); --chip-on-text: var(--fg-inverse); --chip-weight: 600; --chip-pad-x: 16px; --chip-pad-y: 7px; --st-pill: 9; }
.use-case-tabs { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 4px; min-width: 0; --chip-on-face: var(--bg-control-brand-strong); --chip-on-text: var(--fg-on-brand); }
.use-case-tabs button { white-space: nowrap; }
.use-case-tabs button:hover { --chip-face: var(--bg-control-ghost-hover); }
.use-case-search { position: relative; display: flex; flex: 0 1 190px; align-items: center; min-width: 170px; margin-left: auto; }
.use-case-search > svg { position: absolute; left: 13px; color: var(--fg-weak); pointer-events: none; }
.use-case-search input { width: 100%; min-height: 42px; padding: 0 14px 0 38px; border-radius: 11px; background: var(--bg-surface-field); box-shadow: inset 0 0 0 1px var(--border-default); font-size: var(--fs-small); }
.use-case-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--bg-control-brand-strong); }
.use-case-count { padding-inline: 4px; font-size: var(--fs-caption); color: var(--fg-weak); }
.use-case-group h2 { font-size: clamp(var(--foundry-scale-lg), 2.2vw, var(--foundry-scale-2xl)); }
.use-case-group { display: grid; gap: clamp(18px, 2vw, 26px); margin-top: var(--space-s); padding: clamp(20px, 2.6vw, 36px); border-radius: var(--frame-radius); background: var(--bg-surface-sunken); }
.use-case-cards { display: grid; gap: clamp(14px, 1.6vw, 20px); }
.use-case-card { --card-pad: 0px; height: 100%; }
.use-case-card > .card-face { display: flex; flex-direction: column; }
.use-case-card .card-detail { margin-top: auto; padding-bottom: 16px; }
.use-case-card > .card-face > :not(.card-slot-art) { margin-inline: 20px; }
.use-case-card .card-slot-art { margin-bottom: var(--space-s); background: var(--tint-teal); }
.use-case-card .card-slot-art > img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.use-case-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border-default); font-size: var(--fs-caption); color: var(--fg-weak); }
.use-case-details { display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: var(--bg-surface-sunken); color: var(--fg-brand); font-size: var(--fs-small); font-weight: 600; }
a:hover > .use-case-card .card-text h3 { color: var(--fg-brand); }
@media (min-width: 640px) { .use-case-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1101px) { .use-case-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .use-case-search { flex-basis: 100%; margin-left: 0; } }
@media (max-width: 720px) {
  .use-case-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .use-case-tabs::-webkit-scrollbar { display: none; }
  .use-case-group { padding: 16px; }
}

.use-case-faq { --faq-width: 960px; }
.use-case-faq .team-faq { margin-inline: 0; }

.use-case-split { --card-pad: 0px; }
.use-case-split-grid { display: grid; }
.use-case-pic { display: grid; place-items: center; padding: clamp(24px, 4vw, 58px); background: var(--tint-teal); }
.use-case-pic > img { width: min(100%, 380px); height: auto; }
.use-case-stat { display: grid; align-content: start; gap: 20px; padding: clamp(28px, 5vw, 72px) clamp(24px, 4.4vw, 64px); background: var(--bg-surface-sunken); }
.use-case-stat-value { font-family: var(--font-display); font-size: clamp(var(--foundry-scale-5xl), 9vw, var(--foundry-scale-9xl)); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: var(--fg-brand); }
.use-case-stat-value[data-long] { max-width: 6em; font-size: clamp(var(--foundry-scale-2xl), 3.6vw, var(--foundry-scale-5xl)); line-height: 1.02; }
.use-case-stat-source { align-self: end; font-size: var(--fs-caption); color: var(--fg-weak); }
.use-case-step-side { display: grid; align-content: space-between; gap: var(--space-m); padding: clamp(24px, 3vw, 44px); background: var(--tint-teal); }
.use-case-step-side > img { justify-self: center; width: auto; max-width: 100%; height: clamp(140px, 15vw, 215px); object-fit: contain; }
.use-case-step-title { max-width: 14ch; font-size: clamp(var(--foundry-scale-lg), 2.3vw, var(--foundry-scale-2xl)); text-wrap: balance; }
.use-case-step-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 0; padding: clamp(20px, 3vw, 43px); }
@media (min-width: 900px) {
  .use-case-split-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .use-case-stat { min-height: 100%; }
}

.use-case-closing { --panel-face: var(--bg-surface-sunken); --panel-text: var(--fg-default); --panel-align: center; --panel-accent-color: var(--color-lily); --panel-pad: clamp(32px, 5.6vw, 80px); --closing-title-width: 22ch; --closing-text-width: 56ch; --st-edge: 0; --shadow-c: transparent; --st-radius: 40; }
.use-case-closing .closing-body { justify-items: center; }
.use-case-closing .card-detail { gap: var(--space-m); }

.agent-glyph { color: color-mix(in srgb, var(--tone) 80%, var(--color-fg)); }
.agent-tag { display: inline-flex; align-items: center; width: max-content; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, var(--color-page)); color: color-mix(in srgb, var(--tone) 75%, var(--color-fg)); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; white-space: nowrap; }
.agent-mention { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--color-teal) 14%, var(--color-page)); color: color-mix(in srgb, var(--color-teal) 75%, var(--color-fg)); font-weight: 600; white-space: nowrap; }
.agent-flag { color: var(--color-ember); }
.agent-link { font-weight: 600; color: var(--fg-brand); }

.agent-sources { display: grid; grid-template-columns: minmax(0, 1fr) 60px auto; align-items: center; width: 100%; }
.agent-source-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.agent-source { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--bg-surface-raised); font-size: var(--fs-small); white-space: nowrap; }
.agent-source b { flex: none; font-weight: 600; }
.agent-source > span:not(.agent-source-tag) { min-width: 0; overflow: hidden; color: var(--fg-weak); text-overflow: ellipsis; }
.agent-source-icon { flex: none; width: 20px; height: 20px; }
[data-theme='dark'] :is([src$='icon-crm.svg'], [src$='icon-posthog.svg']) { filter: brightness(0) invert(90%); }
.agent-source-tag { flex: none; margin-left: auto; }
.agent-dot { flex: none; width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--color-accent); animation: agent-blink 2.4s ease-in-out infinite; }
.agent-wires { display: block; overflow: visible; }
.agent-node { width: 150px; }
[data-strata='card'].agent-node-card > .strata-face { padding: 26px 18px; text-align: center; }
.agent-node-card .card-detail { justify-items: center; gap: 4px; font-size: 12px; }
.agent-node-card img { width: 100px; height: auto; }
@keyframes agent-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@media (max-width: 600px) {
  .agent-sources { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .agent-source-list { width: 100%; }
  .agent-wires { display: none; }
}

.agent-table-wrap { display: grid; width: 100%; min-width: 0; }
[data-strata='card'].agent-table > .strata-face { padding: 0; font-size: var(--fs-small); }
.agent-table .card-detail { gap: 0; min-width: 0; }
.agent-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-default); }
.agent-table-head b { font-weight: 600; }
.agent-table-head span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--fg-weak); }
.agent-table-head i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); animation: agent-blink 1.4s ease-in-out infinite; }
.agent-table-scroll { overflow-x: auto; }
.agent-table table { width: 100%; min-width: 440px; border-collapse: collapse; table-layout: fixed; }
.agent-table th { padding: 12px 16px; border-bottom: 1px solid var(--border-default); color: var(--fg-default); font-size: var(--fs-caption); font-weight: 400; text-align: left; vertical-align: bottom; }
.agent-table :is(th, td)[data-ai] { background: color-mix(in srgb, var(--color-lily) 16%, var(--bg-surface-raised)); }
.agent-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); line-height: 1.35; vertical-align: top; }
.agent-table td b { font-weight: 600; }
.agent-table td[data-ai] { font-weight: 600; }
.agent-table td[data-muted] { font-weight: 500; color: var(--fg-weak); }
.agent-table small { font-size: 10.5px; font-weight: 500; color: var(--fg-weak); }
.agent-sub { display: block; font-size: 11px; font-style: normal; font-weight: 500; color: var(--fg-weak); }
.agent-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.agent-cell:has(> small) { display: block; }
.agent-cell-in { animation: agent-cell-in 0.45s both; }
.agent-cell-icon { flex: none; width: 16px; height: 16px; }
@keyframes agent-cell-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.agent-table-foot { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: var(--fs-caption); }
.agent-table-foot > span[aria-hidden] { display: none; }
.agent-table-note { width: 100%; font-size: var(--fs-caption); color: var(--fg-weak); }

.agent-grades { width: 100%; }
[data-strata='card'].agent-grades > .strata-face { padding: 14px 16px 8px; }
.agent-grades .card-detail { gap: 6px; }
.agent-grades-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.agent-grades-head b { font-size: 15px; font-weight: 700; }
.agent-grades li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px dashed var(--border-default); font-size: 14px; opacity: 0; transform: translateX(10px); transition: opacity 0.5s, transform 0.5s; }
.agent-grades li:first-child { border-top: 0; }
.agent-grades ul[data-seen] li { opacity: 1; transform: none; }

.agent-delivery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.agent-delivery > div { display: grid; min-width: 0; }
.agent-delivery > [data-full] { grid-column: 1 / -1; }
.agent-delivery > [data-full]:first-child .agent-card { --card-face: color-mix(in srgb, var(--color-lily) 16%, var(--bg-surface-raised)); --st-edge: 0; }
[data-strata='card'].agent-card > .strata-face { padding: 20px 22px; }
.agent-card .card-detail { gap: 12px; }
.agent-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.agent-card-head > :is(svg, img) { flex: none; width: 22px; height: 22px; color: var(--fg-brand); }
.agent-card-head b { font-size: var(--fs-lead); font-weight: 600; }
.agent-card-head span { color: var(--fg-weak); }
.agent-card-body { font-size: var(--fs-small); line-height: 1.5; color: var(--fg-weak); }
.agent-card-body b { color: var(--fg-default); }
.agent-card-find { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--callout-radius); background: var(--bg-surface-warning); font-size: 13px; font-weight: 600; }
.agent-card-find svg { flex: none; width: 12px; height: 12px; }
.agent-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; color: var(--fg-brand); }
.agent-status i { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fg-brand); }
.agent-status i::after { content: ''; position: absolute; top: 4px; left: 7.5px; width: 4.5px; height: 9px; border: solid var(--fg-on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.agent-card-dashed { --card-face: color-mix(in srgb, var(--bg-surface-raised) 80%, transparent); }
.agent-card .agent-link { font-size: var(--fs-small); }
.agent-card-row .card-detail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.agent-card-row .agent-card-head { flex: 1 1 260px; min-width: 0; }
@media (max-width: 560px) { .agent-delivery { grid-template-columns: minmax(0, 1fr); } }

.agent-video { width: min(960px, 92vw); padding: 16px; border: 0; border-radius: var(--callout-radius); background: var(--color-page); color: var(--color-fg); }
.agent-video::backdrop { background: color-mix(in srgb, var(--color-ink) 70%, transparent); }
.agent-video video { width: 100%; height: auto; }
.agent-video p { margin-top: 8px; font-size: var(--fs-small); }
.agent-video > button { float: right; cursor: pointer; font-size: 20px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .agent-dot, .agent-table-head i { animation: none; }
  .agent-pulse { display: none; }
  .agent-grades li { opacity: 1; transform: none; transition: none; }
}
.team-wire { fill: none; stroke: color-mix(in srgb, var(--color-accent) 50%, var(--color-page)); stroke-width: 1.5; }