.wt { --wt-muted: var(--fg-weak); --wt-radius: 12px; display: grid; min-width: 0; gap: var(--space-s); }

.wt-in { animation: wt-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--at, 0ms) backwards; }
.wt-typed { display: inline-block; animation: wt-type 1300ms steps(48) 150ms backwards; }
.wt-progress { position: absolute; inset: auto 0 0; height: 3px; background: var(--fg-on-brand); opacity: 0.55; transform-origin: left; animation: wt-progress linear both; }
@keyframes wt-in { from { opacity: 0; translate: 0 6px; } }
@keyframes wt-type { from { clip-path: inset(0 100% 0 0); } }
@keyframes wt-progress { from { scale: 0 1; } }
.wt[data-paused] :is(.wt-in, .wt-typed, .wt-progress), .wt:has(.wt-window:hover) :is(.wt-in, .wt-typed, .wt-progress) { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .wt-in, .wt-typed, .wt-progress { animation: none; }
  .wt-progress { display: none; }
}

.wt-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); }
.wt-step { position: relative; display: grid; align-content: start; gap: 2px; overflow: hidden; padding: var(--space-s) var(--space-m); border-radius: var(--frame-radius); background: var(--color-sunken); color: var(--color-fg); font-size: var(--fs-small); text-align: left; cursor: pointer; transition: background-color 0.2s; }
.wt-step:hover { background: var(--color-soft); }
.wt-step:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.wt-step[aria-selected='true'] { background: var(--color-lily); color: var(--fg-on-brand); }
@media (max-width: 639px) { .wt-step > span + span { display: none; } }
@media (min-width: 768px) { .wt-steps { gap: var(--space-m); } .wt-step { padding-block: var(--space-m); } }

.wt-window { --card-pad: 0px; min-width: 0; font-size: var(--fs-small); }
.wt-window .card-detail { gap: 0; }
.wt-chrome { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--color-line); }
.wt-chrome > span { color: var(--wt-muted); }
.wt-people { display: flex; align-items: center; margin-left: auto; }
.wt-people > i { display: grid; place-items: center; width: 24px; height: 24px; margin-left: -4px; border: 2px solid var(--color-page); border-radius: 50%; background: var(--color-soft-line); color: var(--color-fg); font-size: 9px; font-style: normal; font-weight: 600; }
.wt-people > span { margin-left: 12px; padding: 5px 12px; border: 1px solid var(--color-line); border-radius: 8px; color: var(--color-fg); font-weight: 600; }
.wt-body { display: grid; }
.wt-side { display: none; align-content: start; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--color-line); background: var(--color-sunken); }
.wt-side > span { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--wt-muted); }
.wt-side > span[data-on] { border-color: var(--color-line); background: var(--color-page); color: var(--color-fg); font-weight: 500; }
.wt-side > small { margin: 14px 12px 4px; color: var(--wt-muted); font-size: var(--fs-caption); }
.wt-side .wt-mark { width: 16px; height: 16px; font-size: 10px; }
.wt-main { display: grid; min-width: 0; gap: var(--space-m); padding: var(--space-m); }
.wt-panels { display: grid; min-width: 0; }
.wt-panel { display: grid; grid-area: 1 / 1; align-content: start; min-width: 0; gap: 14px; }
.wt-panel[hidden] { display: grid; visibility: hidden; }
.wt-composer { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 18px; border: 1px solid var(--color-line); border-radius: 14px; color: var(--wt-muted); }
.wt-composer > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-control-brand-strong); color: var(--fg-on-brand); }
@media (min-width: 900px) {
  .wt-body { grid-template-columns: 232px minmax(0, 1fr); }
  .wt-side { display: grid; }
  .wt-main { grid-template-rows: minmax(0, 1fr) auto; padding: 28px 32px 22px; }
}

.wt-question { display: grid; justify-items: end; gap: 6px; }
.wt-question > p { max-width: min(100%, 560px); padding: 14px 18px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-sunken); font-size: var(--fs-body); }
.wt-question > small, .wt-agent > small { color: var(--wt-muted); font-size: var(--fs-caption); }
.wt-agent { display: flex; align-items: center; gap: 8px; }
.wt-agent > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-frog); }
.wt-agent > span { color: var(--wt-muted); }
.wt-agent > small { margin-left: auto; }
.wt-mark { flex: none; width: 22px; height: 22px; font-size: 12px; }
.wt-done { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--color-frog); color: var(--color-cream); }
.wt-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--tone, var(--color-frog)) 14%, var(--color-page)); color: color-mix(in srgb, var(--tone, var(--color-frog)) 70%, var(--color-fg)); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; }

.wt-sources, .wt-deliveries { display: grid; align-content: start; gap: 6px; }
.wt-row { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border: 1px solid var(--color-line); border-radius: var(--wt-radius); background: var(--color-page); }
.wt-row-open { border-style: dashed; background: var(--color-sunken); }
.wt-row-text { display: grid; flex: 1; min-width: 0; }
.wt-row small { color: var(--wt-muted); font-size: var(--fs-caption); }
.wt-row b { font-weight: 600; }
.wt-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.wt-table { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--wt-radius); font-size: var(--fs-caption); }
.wt-table > p { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--color-line); }
.wt-table > p > small { margin-left: auto; color: var(--wt-muted); }
.wt-table table { width: 100%; border-collapse: collapse; }
.wt-table th { padding: 10px 14px; background: var(--color-sunken); color: var(--wt-muted); font-weight: 500; text-align: left; white-space: nowrap; }
.wt-table th[data-kind] { color: var(--color-eyebrow); }
.wt-table th > svg { display: inline; margin-right: 4px; vertical-align: -1px; }
.wt-table td { overflow: hidden; max-width: 11rem; padding: 12px 14px; border-top: 1px solid var(--color-line); text-overflow: ellipsis; white-space: nowrap; }
.wt-table td > * { display: inline-block; vertical-align: middle; }
.wt-table td > b { font-weight: 500; }
.wt-table q { color: var(--wt-muted); font-style: italic; }
.wt-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wt-insights > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: var(--wt-radius); }
.wt-insights dt { color: var(--wt-muted); font-size: var(--fs-caption); }
.wt-insights dd { font-weight: 600; }

.wt-act { display: grid; gap: 14px; }
.wt-brief { display: grid; align-content: start; gap: 12px; padding: 22px 24px; border: 1px solid var(--color-line); border-radius: var(--wt-radius); }
.wt-brief > small { color: var(--color-eyebrow); font-weight: 500; }
.wt-brief > ol { display: grid; gap: 8px; counter-reset: point; color: var(--wt-muted); }
.wt-brief > ol > li { position: relative; padding-left: 26px; counter-increment: point; }
.wt-brief > ol > li::before { content: counter(point); position: absolute; top: 2px; left: 0; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--color-line); border-radius: 5px; color: var(--color-fg); font-size: 10px; font-weight: 600; }
.wt-brief > ol b { color: var(--color-fg); font-weight: 600; }
.wt-brief > blockquote { padding: 12px 16px; border-left: 3px solid var(--color-accent); border-radius: 0 8px 8px 0; background: var(--color-sunken); }
.wt-brief cite { display: block; margin-top: 4px; color: var(--wt-muted); font-size: var(--fs-caption); font-style: normal; }
.wt-brief > p { padding-top: 12px; border-top: 1px solid var(--color-line); color: var(--wt-muted); font-size: var(--fs-caption); }
@media (min-width: 1100px) { .wt-act { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; } }
.home-page { --story-pad: clamp(24px, 3.4vw, 44px); }
.home-page header h2 { max-width: 17.8em; }
.home-frame { border-radius: var(--frame-radius); }

.home-hero { --simple-face: var(--bg-surface-raised); --top: var(--hero-top, var(--space-m)); }
.home-hero .hero-sheet { padding-block: calc(var(--bar-card-height) + var(--space-xl)) 58vw; }
.home-hero .hero-sheet > p { font-size: clamp(var(--foundry-scale-sm), 1.16vw, var(--foundry-scale-md)); }
.home-hero .sheet-backdrop { background: var(--tint-teal); }
.home-hero .sheet-backdrop > video { position: absolute; inset: auto 0 0; width: 100%; aspect-ratio: 1678 / 937; object-fit: cover; object-position: 72% 50%; mask-image: linear-gradient(to bottom, transparent, #000 22%); }
@media (min-width: 1280px) {
  .home-hero .hero-sheet { min-height: calc(100vw * 937 / 1678 - var(--top)); padding-block: calc(17.3vw - var(--top)) 0; }
  .home-hero .hero-sheet > :not(.sheet-backdrop) { max-width: 52vw; }
  .home-hero .sheet-backdrop > video { inset: 0; height: 100%; aspect-ratio: auto; object-position: 100% 50%; mask-image: none; }
}

.home-page .logo-reel { margin-block: calc(var(--section-gap) * -0.5); }

.home-story, .home-fit, .home-use-case { --card-pad: 0px; }
.home-story > .card-face, .home-use-case > .card-face { display: flex; flex-direction: column; }
.home-story .card-detail { flex: 1; align-content: stretch; }
.home-story-split, .home-fit-split { display: grid; }
.home-stories { --carousel-item: 86%; }
.home-story-copy { display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3vw, 44px); }
.home-story-mark { flex: none; width: auto; height: clamp(36px, 3.2vw, 52px); margin-bottom: var(--space-s); align-self: start; fill: var(--color-lily); }
.home-page .home-story .quote { --quote-gap: 20px; --quote-lg-leading: 1.16; --quote-lg-tracking: -0.028em; }
.home-page .home-story .quote-body { text-wrap: pretty; }
.home-page .home-story .quote-cite { font-size: 15px; line-height: 1.45; }
.home-page .home-story .quote-cite b { font-weight: 700; }
.home-story-result { display: grid; justify-items: start; margin-top: auto; padding-top: 28px; }
.home-story-result > h3 { width: 100%; padding-top: 22px; border-top: 1px solid var(--color-line); line-height: 1.15; text-wrap: balance; }
.home-story-result > .card-body { max-width: 44ch; margin-top: 8px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.home-story-result > a { margin-top: 20px; font-size: 15px; }
.home-story-art { position: relative; order: -1; overflow: hidden; aspect-ratio: 1.25; background: var(--tint-teal); }
.home-story-art > video { position: absolute; inset: 30px auto 0 50%; height: 100%; aspect-ratio: 1; translate: -50% 0; object-fit: cover; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 12%); mask-composite: intersect; }
.home-story-art > span { position: absolute; z-index: 1; top: var(--space-m); left: var(--space-m); display: grid; place-items: center; height: 44px; padding-inline: 14px; border-radius: 14px; background: var(--color-page); }
.home-story-art > span > img { width: auto; height: 22px; max-width: 120px; }
.home-fit { --contrast-bg: var(--bg-surface-inverse); --contrast-text: var(--fg-inverse); }
.home-fit-side { display: grid; align-content: center; gap: var(--space-m); padding: var(--story-pad); background: var(--tint-frog); }
@media (max-width: 760px) {
  .home-page .home-story .quote[data-size] { --quote-size: var(--foundry-scale-md); }
  .home-story-mark { height: 24px; }
}
@media (min-width: 761px) {
  .home-stories { --carousel-item: min(84%, 980px); }
  .home-story-split { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); min-height: clamp(400px, 34vw, 480px); }
  .home-story-art { order: 0; aspect-ratio: auto; }
  .home-story-art > video { top: clamp(36px, 4vw, 60px); }
}
@media (min-width: 900px) {
  .home-fit-split { grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); }
}

.home-use-cases { --carousel-item: 80%; }
.home-use-case { --pad: clamp(18px, 1.8vw, 24px); height: 100%; }
.home-use-case > .card-face { padding: 0 0 var(--pad); }
.home-use-case > .card-face > :not(.card-slot-art) { margin-inline: var(--pad); }
.home-use-case .card-slot-art { margin-bottom: var(--space-m); background: var(--tint-teal); }
.home-use-case .card-slot-art > img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; }
.home-use-case .card-label { align-self: start; padding: 6px 12px; border-radius: 999px; background: var(--pill); box-shadow: inset 0 0 0 1px var(--pill-line, transparent); color: var(--color-moss-11); font-family: var(--font-body); font-weight: 600; line-height: 1.2; letter-spacing: 0; text-transform: none; }
@media (min-width: 640px) { .home-use-cases { --carousel-item: 44%; } }
@media (min-width: 1024px) { .home-use-cases { --carousel-item: calc((100% - 3 * var(--space-m)) / 3.25); } }