/* Product solution pages: one job per page, told with a mix of layouts.
   Type, frame and contained artwork follow Pricing and Second Brain. Every
   mockup is plain HTML so copy stays editable and crisp at any size. */
.wk-sol { color: var(--wk-ink, #292929); background: var(--wk-paper, #fff); }
.wk-sol *, .wk-sol *::before, .wk-sol *::after { box-sizing: border-box; }
.wk-sol > section { padding-inline: calc(var(--wk-grid-inset) + clamp(16px, 3vw, 48px)); }
.wk-sol h1, .wk-sol h2 {
  margin: 0;
  font-family: var(--wk-display, "Newsreader", Georgia, serif);
  font-weight: var(--wk-display-weight, 375);
  font-variation-settings: var(--wk-display-vs, "opsz" 28);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.wk-sol h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.03em; }
.wk-sol p { margin: 0; }
.wk-sol a:focus-visible { outline: 2px solid var(--wk-cobalt, #093acd); outline-offset: 4px; }
.wk-sol .wk-btn-primary, .wk-sol .wk-btn-primary:hover { background: #000; border-color: #000; color: #fff; }
.wk-sol .wk-btn-secondary { border-color: var(--wk-border, #d1cfce); }

/* Hero: the promise on the left, the product doing it on the right. */
.wk-sol-hero { padding-block: clamp(72px, 8vw, 120px) clamp(64px, 7vw, 104px); }
.wk-sol-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1136px; margin-inline: auto; }
.wk-sol-hero h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.02; }
.wk-sol-lead { max-width: 40ch; margin-top: 24px !important; color: var(--wk-slate, #737373); font-size: 18px; line-height: 1.5; letter-spacing: -0.025em; }
.wk-sol-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* A split row: copy beside artwork. .wk-sol-flip puts the artwork first. */
.wk-sol-row { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(64px, 7vw, 104px); scroll-margin-top: 80px; }
.wk-sol-row-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1136px; margin-inline: auto; }
.wk-sol-flip .wk-sol-row-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wk-sol-flip .wk-sol-copy { order: 2; }
.wk-sol-row h2 { font-size: clamp(32px, 3vw, 42px); line-height: 1.06; }
.wk-sol-copy > p { max-width: 44ch; margin-top: 18px; color: var(--wk-slate, #737373); font-size: 16px; line-height: 1.6; letter-spacing: -0.02em; }
.wk-sol-points { display: grid; gap: 2px; margin: 26px 0 0; padding: 0; list-style: none; }
.wk-sol-points li { display: grid; grid-template-columns: 15px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 8px 0; }
.wk-sol-points li::before { content: "✓"; grid-row: 1 / span 2; color: var(--wk-cobalt, #093acd); font-size: 14px; font-weight: 600; line-height: 1.4; }
.wk-sol-points strong { font-size: 14px; font-weight: 500; line-height: 1.4; }
.wk-sol-points span { grid-column: 2; color: var(--wk-slate, #737373); font-size: 13px; line-height: 1.45; }
.wk-sol-note { margin-top: 20px !important; color: var(--wk-slate, #737373); font-size: 13px; line-height: 1.5; }
.wk-sol-note a { color: var(--wk-ink, #292929); text-underline-offset: 3px; }
.wk-sol-badge { display: inline-block; margin-left: 8px; padding: 2px 6px; border: 1px solid var(--wk-border, #d1cfce); border-radius: var(--wk-radius, 4px); color: var(--wk-slate, #737373); font-family: var(--wk-sans, "Inter", sans-serif); font-size: 12px; font-weight: 500; letter-spacing: -0.02em; vertical-align: middle; }

/* Contained brand artwork behind each mockup: Pricing's palette and grain. */
.wk-sol-art { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 440px; padding: clamp(18px, 3vw, 40px); overflow: hidden; border-radius: var(--wk-radius, 4px); background: radial-gradient(ellipse at 12% 90%, #94bfb2, transparent 65%), radial-gradient(ellipse at 95% 10%, #7c79b3, transparent 55%), linear-gradient(135deg, #123f73, #669db5); }
.wk-sol-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/pricing-grain.svg") repeat; background-size: 160px; mix-blend-mode: overlay; pointer-events: none; }
.wk-sol-art-violet { background: radial-gradient(ellipse at 88% 118%, #ffb5a7 0%, #bc7ab0 22%, transparent 57%), radial-gradient(ellipse at 27% 8%, #91a5f0 0%, transparent 55%), linear-gradient(140deg, #23154f 0%, #55419a 54%, #692e77 100%); }
.wk-sol-art-teal { background: radial-gradient(ellipse at 8% 123%, #e5a061 0%, #aa796d 18%, transparent 54%), radial-gradient(ellipse at 78% 30%, #49c6aa 0%, transparent 52%), linear-gradient(125deg, #142353 0%, #175f77 60%, #123f4d 100%); }
.wk-sol-art-blue { background: radial-gradient(ellipse at 83% 125%, #f89a7b 0%, #ab718f 21%, transparent 53%), radial-gradient(ellipse at 37% 26%, #7284d8 0%, transparent 58%), linear-gradient(135deg, #001d64 0%, #144ead 55%, #1e386e 100%); }
.wk-sol-art-slate { background: radial-gradient(ellipse at 88% 120%, #a8c6ed 0%, transparent 58%), radial-gradient(ellipse at 20% 5%, #77b2c2 0%, transparent 55%), linear-gradient(140deg, #182a53 0%, #3c608c 54%, #365772 100%); }
.wk-sol-art-sage { background: radial-gradient(ellipse at 90% 90%, #a9c8a6, transparent 65%), radial-gradient(ellipse at 20% 0, #72afb1, transparent 55%), linear-gradient(140deg, #184b58, #619b89); }
.wk-sol-hero .wk-sol-art { min-height: 500px; }

/* Related capabilities and the closing action. */
.wk-sol-related { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(64px, 7vw, 96px); }
.wk-sol-related-inner, .wk-sol-close-inner { max-width: 1136px; margin-inline: auto; }
.wk-sol-related h2 { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; }
.wk-sol-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.wk-sol-card { display: flex; flex-direction: column; gap: 8px; min-height: 148px; padding: 0 0 22px; overflow: hidden; border: 1px solid var(--wk-border, #d1cfce); border-radius: var(--wk-radius, 4px); background: #fff; color: inherit; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.wk-sol-card:hover { border-color: var(--wk-ink, #292929); text-decoration: none; }
.wk-sol-card h3 { display: flex; justify-content: space-between; gap: 12px; }
.wk-sol-card h3 span { color: var(--wk-slate, #737373); font-weight: 400; }
.wk-sol-card p { color: var(--wk-slate, #737373); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; }
.wk-sol-close { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(80px, 9vw, 128px); text-align: center; }
.wk-sol-close h2 { max-width: 20ch; margin-inline: auto; font-size: clamp(38px, 3.8vw, 54px); line-height: 1.05; }
.wk-sol-close p { max-width: 52ch; margin: 20px auto 0; color: var(--wk-slate, #737373); font-size: 17px; line-height: 1.5; }
.wk-sol-close .wk-sol-actions { justify-content: center; }

/* Product overview: every capability on one page, each linking to its own. */
.wk-sol-overview-hero { padding-block: clamp(80px, 9vw, 136px) clamp(48px, 5vw, 72px); text-align: center; }
.wk-sol-overview-hero h1 { max-width: 18ch; margin-inline: auto; font-size: clamp(46px, 5vw, 72px); line-height: 1.02; }
.wk-sol-overview-hero .wk-sol-lead { max-width: 56ch; margin-inline: auto; }
.wk-sol-overview-hero .wk-sol-actions { justify-content: center; }
.wk-sol-steps { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: 0; }
.wk-sol-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1136px; margin: 0 auto; padding: 0; list-style: none; counter-reset: step; }
.wk-sol-steps li { padding: 28px 24px 30px; counter-increment: step; }
.wk-sol-steps li + li { border-left: 1px solid var(--wk-grid-color, #e5e5e5); }
.wk-sol-steps li::before { content: counter(step); display: block; margin-bottom: 18px; color: var(--wk-slate, #737373); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wk-sol-steps p { margin-top: 6px; color: var(--wk-slate, #737373); font-size: 14px; line-height: 1.5; }
.wk-sol-catalog { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(56px, 6vw, 88px); }
.wk-sol-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1136px; margin: 0 auto; }
.wk-sol-tile { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--wk-border, #d1cfce); border-radius: var(--wk-radius, 4px); background: #fff; color: inherit; text-decoration: none; transition: border-color 160ms ease; }
.wk-sol-tile:hover { border-color: var(--wk-ink, #292929); text-decoration: none; }
.wk-sol-tile .wk-sol-art { min-height: 0; height: 300px; padding: 24px 24px 0; align-items: flex-start; border-radius: 0; }
.wk-sol-tile .wk-ui { width: 100%; max-width: 440px; border-radius: 4px 4px 0 0; }
.wk-sol-tile-copy { padding: 22px 24px 26px; }
.wk-sol-tile-copy h2 { display: flex; justify-content: space-between; gap: 16px; font-size: 28px; line-height: 1.1; }
.wk-sol-tile-copy h2 span { font-family: var(--wk-sans, "Inter", sans-serif); font-size: 16px; color: var(--wk-slate, #737373); }
.wk-sol-tile-copy p { margin-top: 10px; color: var(--wk-slate, #737373); font-size: 15px; line-height: 1.55; letter-spacing: -0.02em; }

/* ------------------------------------------------------------------------- */
/* Mockup kit. Product type: Inter 400/500, 4px corners, flat data surfaces.  */
.wk-ui { width: 100%; max-width: 560px; overflow: hidden; border: 1px solid #e1e3e7; border-radius: var(--wk-radius, 4px); background: #fff; box-shadow: 0 12px 40px rgba(19, 37, 61, 0.19); color: var(--wk-ink, #292929); font-family: var(--wk-sans, "Inter", sans-serif); font-size: 12px; line-height: 1.45; letter-spacing: -0.02em; text-align: left; font-variant-numeric: tabular-nums; }
.wk-ui-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #eaeaea; color: #6d7278; font-size: 11px; }
.wk-ui-bar img { display: block; width: 92px; height: auto; }
.wk-ui-body { display: grid; gap: 12px; padding: 16px; }
.wk-ui-muted { color: #737373; }
.wk-ui-small { font-size: 11px; }
.wk-ui-title { font-size: 13px; font-weight: 500; }
.wk-ui-prompt { justify-self: end; max-width: 88%; padding: 10px 12px; border-radius: 4px; background: #f5f5f4; font-size: 12px; }
.wk-ui-prompt::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #292929; animation: wk-ui-caret 1s steps(1) infinite; }
.wk-ui-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wk-ui-chips span { padding: 4px 7px; border: 1px solid #e3e5e7; border-radius: 4px; color: #56616b; font-size: 10px; background: #fff; }
.wk-ui-status { display: flex; align-items: center; gap: 7px; color: #56616b; font-size: 11px; }
.wk-ui-status i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #e7f3ec; color: #1f7a4d; font-size: 9px; font-style: normal; }
.wk-ui-list { display: grid; border: 1px solid #e7e7e7; border-radius: 4px; }
.wk-ui-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 12px; }
.wk-ui-item + .wk-ui-item { border-top: 1px solid #efefef; }
.wk-ui-item b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ui-item small { grid-column: 1; color: #737373; font-size: 10.5px; }
.wk-ui-item > :last-child:not(small) { grid-row: 1 / span 2; grid-column: 2; }
.wk-ui-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: #f1f1ef; color: #4b5157; font-size: 10px; white-space: nowrap; }
.wk-ui-tag-green { background: #e7f3ec; color: #1f6b45; }
.wk-ui-tag-blue { background: #e8eefc; color: #093acd; }
.wk-ui-tag-amber { background: #fbf1df; color: #8a5a10; }
.wk-ui-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.wk-ui-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid #d1cfce; border-radius: 4px; background: #fff; color: #292929; font-size: 11px; font-weight: 500; }
.wk-ui-btn-dark { border-color: #000; background: #000; color: #fff; }
.wk-ui-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.wk-ui-table th { padding: 8px 10px; background: #f6f6f5; color: #697078; font-weight: 400; text-align: left; }
.wk-ui-table td { padding: 9px 10px; border-top: 1px solid #ececec; }
.wk-ui-table td:last-child, .wk-ui-table th:last-child { text-align: right; }
.wk-ui-sources { display: flex; flex-wrap: wrap; gap: 5px; }
.wk-ui-sources span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid #e5e5e5; border-radius: 4px; color: #737373; font-size: 10px; }
.wk-ui-sources span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #9fb3c8; }
.wk-ui-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.wk-ui-fields dt { color: #737373; font-size: 10px; }
.wk-ui-fields dd { margin: 2px 0 0; font-size: 12px; }
.wk-ui-fields div { min-width: 0; }

/* Map: a real Explore screenshot with filters and pins on top. */
.wk-ui-map { position: relative; height: 230px; overflow: hidden; border: 1px solid #e2e6e6; border-radius: 4px; background: #eef0ec url("/product-map-crop.webp") 40% 75% / cover no-repeat; }
.wk-ui-map-tall { height: 300px; }
.wk-ui-map-filters { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; gap: 5px; }
.wk-ui-map-filters span { padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; font-size: 10px; }
.wk-ui-map-filters span.is-on { border-color: #000; background: #000; color: #fff; }
.wk-ui-pin { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #093acd; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
.wk-ui-pin::after { content: ""; position: absolute; inset: -6px; border: 2px solid rgba(9, 58, 205, 0.45); border-radius: 50%; animation: wk-ui-pulse 2.4s ease-out infinite; }
.wk-ui-pin.p1 { top: 38%; left: 22%; } .wk-ui-pin.p2 { top: 56%; left: 47%; } .wk-ui-pin.p3 { top: 30%; left: 66%; } .wk-ui-pin.p4 { top: 72%; left: 78%; } .wk-ui-pin.p5 { top: 70%; left: 30%; }
.wk-ui-pin.p2::after { animation-delay: 0.6s; } .wk-ui-pin.p3::after { animation-delay: 1.2s; } .wk-ui-pin.p4::after { animation-delay: 1.8s; }
.wk-ui-draw { position: absolute; top: 26%; left: 16%; width: 58%; height: 56%; border: 2px dashed #093acd; border-radius: 2px; background: rgba(9, 58, 205, 0.1); }
.wk-ui-map-card { position: absolute; right: 10px; bottom: 10px; width: 190px; padding: 10px; border: 1px solid #e1e1e1; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }

/* Ownership: the chain from owner of record to the people behind it. */
.wk-ui-chain { display: grid; gap: 0; }
.wk-ui-node { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; }
.wk-ui-node + .wk-ui-node::before { content: ""; position: absolute; top: -8px; left: 13px; width: 1px; height: 16px; background: #d1cfce; }
.wk-ui-node > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #dce0e5; border-radius: 4px; background: #f3f4f6; color: #5f6670; font-size: 10px; font-weight: 500; }
.wk-ui-node small { display: block; color: #737373; font-size: 10.5px; }

/* Pipeline board. */
.wk-ui-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk-ui-col { display: grid; align-content: start; gap: 6px; min-height: 196px; padding: 8px; border-radius: 4px; background: #f7f6f5; }
.wk-ui-col > span { display: flex; justify-content: space-between; color: #5f6670; font-size: 10.5px; font-weight: 500; }
.wk-ui-card { display: grid; gap: 3px; padding: 8px; border: 1px solid #e5e5e5; border-radius: 4px; background: #fff; font-size: 10.5px; }
.wk-ui-card b { font-weight: 500; font-size: 11px; }
.wk-ui-card small { color: #737373; font-size: 10px; }
.wk-ui-card-moving { position: relative; z-index: 2; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); }

/* Outreach draft with evidence. */
.wk-ui-draft { padding: 12px; border: 1px solid #e5e5e5; border-radius: 4px; font-size: 12px; line-height: 1.6; }
.wk-ui-draft p + p { margin-top: 8px; }
.wk-ui-cite { padding: 0 2px; border-bottom: 1.5px solid #8aa6ef; background: #eef2fd; }
.wk-ui-evidence { display: grid; gap: 4px; padding: 10px 12px; border-left: 2px solid #8aa6ef; background: #f8f9fd; font-size: 11px; }
.wk-ui-seq { display: grid; gap: 0; }
.wk-ui-seq > div { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid #efefef; }
.wk-ui-seq > div:first-child { border-top: 0; }

/* Calling: live waveform and notes. */
.wk-ui-call { display: grid; gap: 12px; padding: 14px; border-radius: 4px; background: #1c1c1c; color: #f7f6f5; }
.wk-ui-call-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.wk-ui-call-head small { color: rgba(247, 246, 245, 0.6); font-size: 10.5px; }
.wk-ui-wave { display: flex; align-items: center; gap: 3px; height: 36px; }
.wk-ui-wave i { flex: 1; height: 100%; border-radius: 1px; background: #8fb3f4; transform-origin: center; animation: wk-ui-wave 1.1s ease-in-out infinite alternate; }
.wk-ui-wave i:nth-child(3n) { animation-delay: -0.3s; background: #c2d4f8; }
.wk-ui-wave i:nth-child(3n + 1) { animation-delay: -0.7s; }
.wk-ui-wave i:nth-child(4n) { animation-duration: 0.8s; }
.wk-ui-wave i:nth-child(5n) { animation-duration: 1.4s; }

/* Mail: postcard front and back, and a hand-addressed letter. */
.wk-ui-mail { position: relative; width: 100%; max-width: 520px; perspective: 1400px; }
.wk-ui-postcard { position: relative; aspect-ratio: 9 / 6; transform-style: preserve-3d; transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1); cursor: pointer; }
.wk-ui-mail:hover .wk-ui-postcard { transform: rotateY(-8deg) rotateX(3deg); }
.wk-ui-mail.is-flipped .wk-ui-postcard { transform: rotateY(180deg); }
.wk-ui-mail.is-flipped:hover .wk-ui-postcard { transform: rotateY(172deg) rotateX(3deg); }
.wk-ui-postcard > div { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; backface-visibility: hidden; box-shadow: 0 18px 44px rgba(19, 37, 61, 0.3); }
.wk-ui-postcard-front { display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55)), url("/product-dropdown.webp") 50% 60% / cover no-repeat; color: #fff; }
.wk-ui-postcard-front p { font-family: var(--wk-display, "Newsreader", Georgia, serif); font-size: clamp(20px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -0.02em; }
.wk-ui-postcard-front small { margin-top: 6px; font-size: 11px; opacity: 0.85; }
.wk-ui-postcard-back { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; padding: 20px; background: #fbfaf7; transform: rotateY(180deg); color: #1d2a4a; }
.wk-ui-hand { font-family: var(--wk-display, "Newsreader", Georgia, serif); font-size: clamp(13px, 1.25vw, 16px); line-height: 1.45; letter-spacing: -0.01em; }
.wk-ui-postcard-back .wk-ui-address { align-self: end; padding-top: 12px; border-top: 1px solid #d8d4cc; }
.wk-ui-stamp { justify-self: end; width: 46px; height: 54px; border: 2px dashed #c9c3b8; border-radius: 2px; background: #e8eefc; }
.wk-ui-envelope { position: relative; aspect-ratio: 9.5 / 4.1; padding: 22px 26px; border-radius: 4px; background: #f6f2ea; box-shadow: 0 18px 44px rgba(19, 37, 61, 0.3); color: #1d2a4a; }
.wk-ui-envelope .wk-ui-stamp { position: absolute; top: 16px; right: 18px; }
.wk-ui-envelope .wk-ui-hand { position: absolute; left: 40%; top: 46%; font-size: clamp(14px, 1.4vw, 18px); }
.wk-ui-mail-track { display: flex; gap: 0; margin-top: 18px; padding: 12px 14px; border-radius: 4px; background: #fff; box-shadow: 0 10px 30px rgba(19, 37, 61, 0.2); font-size: 11px; }
.wk-ui-mail-track span { flex: 1; display: grid; gap: 6px; color: #737373; }
.wk-ui-mail-track span::before { content: ""; height: 3px; border-radius: 2px; background: #e5e5e5; }
.wk-ui-mail-track span.is-done { color: #292929; }
.wk-ui-mail-track span.is-done::before { background: #093acd; }
.wk-ui-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk-ui-proof span { padding: 8px; border: 1px solid #e5e5e5; border-radius: 4px; color: #737373; font-size: 10.5px; }
.wk-ui-proof span.is-on { border-color: #000; color: #292929; }
.wk-ui-proof span b { display: block; margin-bottom: 2px; color: #292929; font-family: var(--wk-display, "Newsreader", Georgia, serif); font-size: 15px; font-weight: 375; }

/* Animation: each mockup builds itself once it scrolls into view. product.js adds
   .is-in and staggers the steps; without the script everything is simply shown. */
.wk-sol-js [data-reveal] .wk-step { opacity: 0; transform: translateY(8px); transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1); }
.wk-sol-js [data-reveal].is-in .wk-step { opacity: 1; transform: none; }
.wk-sol-js [data-reveal] .wk-ui-card-moving { transform: translateX(0); }
.wk-sol-js [data-reveal].is-in .wk-ui-card-moving { animation: wk-ui-move 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1s both; }
.wk-sol-js [data-reveal] .wk-ui-draw { clip-path: inset(0 100% 100% 0); }
.wk-sol-js [data-reveal].is-in .wk-ui-draw { clip-path: inset(0 0 0 0); transition: clip-path 900ms cubic-bezier(0.65, 0, 0.35, 1) 400ms; }
@keyframes wk-ui-caret { 50% { opacity: 0; } }
@keyframes wk-ui-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes wk-ui-wave { from { transform: scaleY(0.18); } to { transform: scaleY(1); } }
@keyframes wk-ui-move { 0% { transform: translateX(calc(-100% - 8px)) rotate(-1.5deg); opacity: 0; } 20% { transform: translateX(calc(-100% - 8px)) rotate(-1.5deg); opacity: 1; } 100% { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .wk-sol-js [data-reveal] .wk-step { opacity: 1; transform: none; transition: none; }
  .wk-sol-js [data-reveal].is-in .wk-ui-card-moving { animation: none; }
  .wk-sol-js [data-reveal] .wk-ui-draw { clip-path: none; }
  .wk-ui-prompt::after, .wk-ui-pin::after, .wk-ui-wave i { animation: none; }
  .wk-ui-postcard { transition: none; }
  .wk-ui-wave i { transform: scaleY(0.6); }
}

@media (max-width: 960px) {
  .wk-sol-hero-grid, .wk-sol-row-grid, .wk-sol-flip .wk-sol-row-grid { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-flip .wk-sol-copy { order: 0; }
  .wk-sol-art, .wk-sol-hero .wk-sol-art { min-height: 0; }
  .wk-sol-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-sol-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-sol-steps li:nth-child(3) { border-left: 0; }
  .wk-sol-steps li:nth-child(n + 3) { border-top: 1px solid var(--wk-grid-color, #e5e5e5); }
  .wk-sol-catalog-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wk-sol-hero h1 { font-size: 42px; }
  .wk-sol-lead { font-size: 17px; }
  .wk-sol-related-grid { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-steps ol { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-steps li + li { border-left: 0; border-top: 1px solid var(--wk-grid-color, #e5e5e5); }
  .wk-sol-art { padding: 14px; }
  .wk-ui-board { grid-template-columns: repeat(3, minmax(120px, 1fr)); overflow-x: auto; }
  .wk-ui-fields { grid-template-columns: minmax(0, 1fr); }
  .wk-ui-postcard-back { grid-template-columns: 1fr; gap: 8px; padding: 14px; }
  .wk-ui-postcard-back .wk-ui-stamp { display: none; }
  .wk-sol-tile .wk-sol-art { height: 260px; padding: 16px 16px 0; }
}
.wk-ui b { font-weight: 500; }
.wk-ui-photo { display: block; width: 100%; height: 180px; border-radius: 4px; object-fit: cover; object-position: 50% 60%; }
.wk-ui-doc { display: grid; gap: 8px; padding: 18px; border: 1px solid #e5e5e5; border-radius: 4px; background: #fbfaf8; }
.wk-ui-doc-title { font-family: var(--wk-display, "Newsreader", Georgia, serif); font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.wk-ui-doc img { display: block; width: 100%; height: 120px; border-radius: 2px; object-fit: cover; object-position: 50% 60%; }
.wk-ui-doc-line { height: 6px; border-radius: 2px; background: #e8e6e3; }
.wk-ui-doc-short { width: 60%; }

/* ------------------------------------------------------------------------- */
/* Layout modules beyond the split row, so pages do not read left, right, left. */

/* Stage: a centered statement over one wide scene. */
.wk-sol-stage { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(64px, 7vw, 104px); }
.wk-sol-stage-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.wk-sol-stage-head h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; }
.wk-sol-stage-head p { margin-top: 16px; color: var(--wk-slate, #737373); font-size: 17px; line-height: 1.5; letter-spacing: -0.02em; }
.wk-sol-stage .wk-sol-art { max-width: 1136px; min-height: 0; margin-inline: auto; padding: clamp(18px, 4vw, 56px); }
.wk-sol-hero-center { text-align: center; }
.wk-sol-hero-center .wk-sol-hero-copy { max-width: 760px; margin: 0 auto clamp(40px, 5vw, 56px); }
.wk-sol-hero-center h1 { font-size: clamp(46px, 5vw, 72px); }
.wk-sol-hero-center .wk-sol-lead { max-width: 52ch; margin-inline: auto; }
.wk-sol-hero-center .wk-sol-actions { justify-content: center; }
.wk-sol-hero-center .wk-sol-art { max-width: 1136px; min-height: 0; margin-inline: auto; padding: clamp(18px, 4vw, 56px); }

/* Trio: three short points, each with a small live visual. */
.wk-sol-trio { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(64px, 7vw, 104px); }
.wk-sol-trio-inner { max-width: 1136px; margin-inline: auto; }
.wk-sol-trio h2 { max-width: 18ch; font-size: clamp(32px, 3vw, 42px); line-height: 1.06; }
.wk-sol-trio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.wk-sol-trio-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wk-sol-mini { display: grid; align-content: start; gap: 8px; }
.wk-sol-mini-art { position: relative; display: grid; place-items: center; min-height: 210px; margin-bottom: 14px; padding: 18px; overflow: hidden; border: 1px solid var(--wk-ash, #ebeae9); border-radius: var(--wk-radius, 4px); background: var(--wk-linen, #f7f6f5); }
.wk-sol-mini p { color: var(--wk-slate, #737373); font-size: 14px; line-height: 1.5; letter-spacing: -0.02em; }

/* Band: a few facts set large. Figures stay in the sans with tabular numbers. */
.wk-sol-band { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: 0; }
.wk-sol-band dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1136px; margin: 0 auto; }
.wk-sol-band dl > div { padding: clamp(32px, 4vw, 48px) 28px; }
.wk-sol-band dl > div + div { border-left: 1px solid var(--wk-grid-color, #e5e5e5); }
.wk-sol-band dt { font-family: var(--wk-sans, "Inter", sans-serif); font-size: clamp(36px, 3.6vw, 52px); font-weight: 400; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.wk-sol-band dd { margin: 12px 0 0; color: var(--wk-slate, #737373); font-size: 15px; line-height: 1.45; }

/* Spotlight: one object to play with, on Linen rather than a gradient. */
.wk-sol-spot { border-top: 1px solid var(--wk-grid-color, #e5e5e5); padding-block: clamp(64px, 7vw, 104px); background: var(--wk-linen, #f7f6f5); }
.wk-sol-spot-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: 1136px; margin-inline: auto; }
.wk-sol-spot h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; }
.wk-sol-spot p { margin-top: 16px; color: var(--wk-slate, #737373); font-size: 17px; line-height: 1.5; }
.wk-sol-spot-stage { display: grid; place-items: center; min-height: 420px; }

/* Prompt gallery. */
.wk-sol-prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1136px; margin: 0 auto; }
.wk-sol-prompt { display: grid; gap: 14px; align-content: space-between; min-height: 150px; padding: 18px; border: 1px solid var(--wk-border, #d1cfce); border-radius: var(--wk-radius, 4px); background: #fff; color: inherit; font-size: 15px; line-height: 1.45; letter-spacing: -0.025em; text-decoration: none; transition: border-color 160ms ease, transform 200ms ease; }
.wk-sol-prompt:hover { border-color: var(--wk-ink, #292929); transform: translateY(-2px); text-decoration: none; }
.wk-sol-prompt small { display: flex; justify-content: space-between; color: var(--wk-slate, #737373); font-size: 12px; }
.wk-sol-prompt small span:last-child { color: var(--wk-ink, #292929); opacity: 0; transition: opacity 160ms ease; }
.wk-sol-prompt:hover small span:last-child { opacity: 1; }

/* Filter wall: every search field, lighting up in turn. */
.wk-sol-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; margin: 0 auto; }
.wk-sol-wall span { padding: 10px 14px; border: 1px solid var(--wk-border, #d1cfce); border-radius: var(--wk-radius, 4px); background: #fff; font-size: 15px; letter-spacing: -0.025em; transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
.wk-sol-wall span.is-lit { border-color: #000; background: #000; color: #fff; }

/* Horizontal property history. */
.wk-sol-history { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1136px; margin: 0 auto; padding-top: 28px; }
.wk-sol-history::before { content: ""; position: absolute; top: 33px; left: 0; right: 0; height: 2px; background: var(--wk-ash, #ebeae9); }
.wk-sol-history::after { content: ""; position: absolute; top: 33px; left: 0; width: 100%; height: 2px; background: var(--wk-cobalt, #093acd); transform-origin: left; transform: scaleX(var(--wk-progress, 1)); }
.wk-sol-js .wk-sol-history[data-reveal]::after { transform: scaleX(0); transition: transform 2.4s cubic-bezier(0.65, 0, 0.35, 1) 200ms; }
.wk-sol-js .wk-sol-history[data-reveal].is-in::after { transform: scaleX(1); }
.wk-sol-history > div { position: relative; padding-right: 20px; }
.wk-sol-history > div::before { content: ""; display: block; width: 12px; height: 12px; margin-bottom: 22px; border: 2px solid #fff; border-radius: 50%; background: var(--wk-cobalt, #093acd); box-shadow: 0 0 0 1px var(--wk-cobalt, #093acd); }
.wk-sol-history b { display: block; font-size: 13px; font-weight: 500; color: var(--wk-slate, #737373); font-variant-numeric: tabular-nums; }
.wk-sol-history strong { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -0.03em; }
.wk-sol-history span { display: block; margin-top: 4px; color: var(--wk-slate, #737373); font-size: 14px; }

/* ------------------------------------------------------------------------- */
/* Interactive and animated pieces. */
.wk-sol-scene { position: relative; }
.wk-sol-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--wk-radius, 4px); background: rgba(255, 255, 255, 0.14); color: #fff; font: 500 12px/1.2 var(--wk-sans, "Inter", sans-serif); letter-spacing: -0.02em; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wk-sol-hint:hover { background: rgba(255, 255, 255, 0.24); }
.wk-sol-spot .wk-sol-hint { border-color: var(--wk-border, #d1cfce); background: #fff; color: var(--wk-ink, #292929); backdrop-filter: none; }
.wk-sol-hint-plain { margin-top: 10px; color: rgba(255, 255, 255, 0.86); font-size: 12px; text-align: center; }
.wk-ui-btn, [data-signup] { cursor: pointer; }
.wk-ui-btn { transition: transform 140ms ease, background-color 160ms ease; }
.wk-ui-btn:hover { background: #f4f4f3; }
.wk-ui-btn-dark:hover { background: #222; }
.wk-ui-btn.is-pressed { transform: scale(0.94); }
.wk-ui-btn.is-done { border-color: #1f6b45; background: #1f6b45; color: #fff; }

/* Tooltips: data-tip on any element in a mockup. */
[data-tip]:not(.wk-abs) { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; width: max-content; max-width: 220px; padding: 6px 8px; border-radius: 4px; background: #1c1c1c; color: #f7f6f5; font: 400 11px/1.4 var(--wk-sans, "Inter", sans-serif); letter-spacing: -0.01em; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity 140ms ease, transform 140ms ease; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* The pointer that clicks through scenes. */
.wk-cursor { position: absolute; z-index: 6; top: 0; left: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: translate(40px, 40px); transition: transform 760ms cubic-bezier(0.65, 0, 0.35, 1), opacity 200ms ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.wk-cursor.is-on { opacity: 1; }
.wk-cursor svg { display: block; width: 22px; height: 22px; transition: transform 120ms ease; }
.wk-cursor.is-click svg { transform: scale(0.82); }
.wk-cursor::after { content: ""; position: absolute; top: -9px; left: -9px; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50%; opacity: 0; }
.wk-cursor.is-click::after { animation: wk-ui-ripple 500ms ease-out; }
@keyframes wk-ui-ripple { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* Word-by-word drafting and typed prompts. */
.wk-w { opacity: 0; transition: opacity 140ms ease; }
.wk-w.is-on { opacity: 1; }
.wk-typing::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 2px; vertical-align: -2px; background: #292929; animation: wk-ui-caret 1s steps(1) infinite; }
.wk-ui-prompt.wk-typed::after { display: none; }
.wk-scene-hide { opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.wk-scene-hide.is-on { opacity: 1; transform: none; }
.wk-spin { display: inline-block; width: 12px; height: 12px; border: 1.5px solid #c9cdd3; border-top-color: #093acd; border-radius: 50%; animation: wk-ui-spin 700ms linear infinite; vertical-align: -2px; }
@keyframes wk-ui-spin { to { transform: rotate(360deg); } }
.wk-ui-toast { position: absolute; z-index: 5; left: 50%; bottom: 18px; padding: 8px 12px; border-radius: 4px; background: #1c1c1c; color: #f7f6f5; font: 500 12px/1.3 var(--wk-sans, "Inter", sans-serif); opacity: 0; transform: translate(-50%, 8px); transition: opacity 240ms ease, transform 240ms ease; pointer-events: none; }
.wk-ui-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Email scene: the composer and the sequence beside it. */
.wk-scene-email { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; width: 100%; }
.wk-scene-email .wk-ui { max-width: none; }
.wk-ui-seq-live > div { opacity: 0.35; transition: opacity 300ms ease; }
.wk-ui-seq-live > div.is-on { opacity: 1; }
.wk-ui-seq-live > div.is-cancel span:nth-child(2) { text-decoration: line-through; color: #737373; }
.wk-ui-wait { position: relative; display: block; height: 3px; margin-top: 6px; overflow: hidden; border-radius: 2px; background: #ececec; }
.wk-ui-wait i { position: absolute; inset: 0; background: #093acd; transform-origin: left; transform: scaleX(0); }
.wk-ui-wait.is-running i { transform: scaleX(1); transition: transform 1.8s linear; }

/* Call scene: transcript on the left, notes writing themselves on the right. */
.wk-scene-call { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: 100%; max-width: 760px; }
.wk-ui-transcript { display: grid; gap: 10px; min-height: 196px; align-content: start; }
.wk-ui-line { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; font-size: 12px; line-height: 1.45; color: rgba(247, 246, 245, 0.92); }
.wk-ui-line b { color: rgba(247, 246, 245, 0.55); font-size: 10.5px; font-weight: 500; }
.wk-ui-line b { transition: color 300ms ease; }
.wk-ui-line.is-key b { color: #8fb3f4; }
.wk-ui-notes { display: grid; gap: 10px; align-content: start; }
.wk-ui-notes-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; }
.wk-ui-note { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 4px; font-size: 12px; line-height: 1.45; }
.wk-ui-note::before { content: "✓"; color: #093acd; font-weight: 600; }
.wk-ui-note small { display: block; margin-top: 2px; color: #737373; font-size: 10.5px; }
.wk-ui-note.is-next { border-color: #093acd; background: #f3f6fe; }

/* Board you can drag. */
[data-board] { user-select: none; -webkit-user-select: none; }
[data-board] .wk-ui-card { cursor: grab; }
@media (pointer: fine) { [data-board] .wk-ui-card { touch-action: none; } }
[data-board] .wk-ui-card.is-dragging { position: relative; z-index: 4; cursor: grabbing; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); transition: none; }
[data-board] .wk-ui-col.is-target { background: #eaeefa; box-shadow: inset 0 0 0 1px #8aa6ef; }
.wk-ui-board-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wk-ui-board-5 .wk-ui-col { min-height: 230px; }

/* Map filters you can toggle. */
.wk-ui-map-filters button { padding: 6px 9px; border: 1px solid #d9d9d9; border-radius: 4px; background: #fff; color: #292929; font: 500 11px/1 var(--wk-sans, "Inter", sans-serif); cursor: pointer; }
.wk-ui-map-filters button[aria-pressed="true"] { border-color: #000; background: #000; color: #fff; }
.wk-ui-pin { transition: opacity 260ms ease, transform 260ms ease; }
.wk-ui-pin.is-off { opacity: 0; transform: scale(0.3); }
.wk-ui-pin.p6 { top: 48%; left: 12%; } .wk-ui-pin.p7 { top: 22%; left: 40%; } .wk-ui-pin.p8 { top: 62%; left: 62%; } .wk-ui-pin.p9 { top: 44%; left: 86%; } .wk-ui-pin.p10 { top: 82%; left: 50%; }
.wk-ui-map-count { position: absolute; left: 10px; bottom: 10px; padding: 8px 10px; border-radius: 4px; background: #000; color: #fff; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }

/* Tabs you can click. */
.wk-ui-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid #ececec; }
.wk-ui-tabs button { margin-bottom: -1px; padding: 7px 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: #737373; font: 500 11px/1 var(--wk-sans, "Inter", sans-serif); cursor: pointer; }
.wk-ui-tabs button[aria-selected="true"] { border-bottom-color: #000; color: #292929; }
.wk-ui-tabpanel[hidden] { display: none; }

/* Segmented toggles in mockups. */
.wk-ui-seg { display: inline-flex; padding: 2px; border-radius: 4px; background: #efefed; }
.wk-ui-seg button { padding: 5px 9px; border: 0; border-radius: 3px; background: none; color: #5f6670; font: 500 11px/1 var(--wk-sans, "Inter", sans-serif); cursor: pointer; }
.wk-ui-seg button[aria-pressed="true"] { background: #fff; color: #292929; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* Postcard fronts the visitor can switch between. */
.wk-ui-postcard-front.is-linen { background: #f3efe6; color: #1d2a4a; }
.wk-ui-postcard-front.is-ink { background: #13213f; color: #f7f6f5; }
.wk-ui-postcard-front.is-photo { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55)), url("/careers-dropdown.webp") 50% 50% / cover no-repeat; color: #fff; }
.wk-ui-postcard-front.is-street { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55)), url("/product-dropdown.webp") 50% 60% / cover no-repeat; color: #fff; }
.wk-ui-mail-flat .wk-ui-postcard { cursor: default; }
.wk-ui-mail-flat .wk-ui-postcard > div { box-shadow: 0 10px 26px rgba(19, 37, 61, 0.18); }
.wk-ui-mail-flat:hover .wk-ui-postcard { transform: none; }

/* The stamp: a little kite, perforated, and it peels. */
.wk-stamp { position: relative; display: block; width: 64px; height: 78px; padding: 0; border: 0; background: none; cursor: pointer; }
.wk-stamp-under { position: absolute; inset: 4px; display: grid; place-items: center; padding: 4px; border: 1px dashed #c9c3b8; border-radius: 2px; color: #8a7f6f; font: 500 8px/1.25 var(--wk-sans, "Inter", sans-serif); text-align: center; }
.wk-stamp-face { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 6px; background: #fff; outline: 3px dotted #f6f2ea; outline-offset: -2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); transform-origin: 0% 100%; transition: transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 360ms ease; }
.wk-stamp-face > span { display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #7cb7e8, #093acd); }
.wk-stamp-face svg { width: 70%; height: auto; }
.wk-stamp-face small { padding-top: 3px; color: #1d2a4a; font: 500 7px/1 var(--wk-sans, "Inter", sans-serif); text-align: center; }
.wk-stamp:hover .wk-stamp-face { transform: rotate(-7deg) translate(-1px, -2px); }
.wk-stamp.is-peeled .wk-stamp-face { transform: rotate(-38deg) translate(-26px, -46px); opacity: 0.0; }

/* Envelope: click and the letter comes out. */
.wk-env { position: relative; width: 100%; max-width: 520px; padding-top: 0; transition: padding-top 700ms cubic-bezier(0.65, 0, 0.35, 1); cursor: pointer; }
.wk-env.is-open { padding-top: 32%; }
.wk-env-letter { position: absolute; z-index: 0; left: 6%; right: 6%; top: 0; padding: 22px 24px; border-radius: 3px; background: #fffdf8; box-shadow: 0 8px 26px rgba(19, 37, 61, 0.18); color: #1d2a4a; opacity: 0; transform: translateY(60%); transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 260ms ease; }
.wk-env.is-open .wk-env-letter { opacity: 1; transform: translateY(0); }
.wk-env .wk-ui-envelope { z-index: 1; }
.wk-ui-envelope .wk-stamp { position: absolute; top: 14px; right: 16px; }
.wk-ui-envelope::before { content: ""; position: absolute; inset: 0; border-radius: 4px; background: linear-gradient(155deg, transparent 49.6%, rgba(29, 42, 74, 0.08) 50%, transparent 50.6%), linear-gradient(25deg, transparent 49.6%, rgba(29, 42, 74, 0.08) 50%, transparent 50.6%); pointer-events: none; }

/* Line-of-work toggle in the trio. */
.wk-sol-mini-art .wk-ui { box-shadow: 0 6px 18px rgba(19, 37, 61, 0.1); }

@media (max-width: 960px) {
  .wk-sol-trio-grid, .wk-sol-trio-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-sol-spot-inner { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-scene-email, .wk-scene-call { grid-template-columns: minmax(0, 1fr); }
  .wk-ui-board-5 { grid-template-columns: repeat(5, minmax(130px, 1fr)); overflow-x: auto; }
  .wk-sol-history { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 0; padding-left: 28px; }
  .wk-sol-history::before, .wk-sol-history::after { top: 0; bottom: 0; left: 5px; width: 2px; height: auto; }
  .wk-sol-js .wk-sol-history[data-reveal]::after { transform-origin: top; transform: scaleY(0); }
  .wk-sol-js .wk-sol-history[data-reveal].is-in::after { transform: scaleY(1); }
  .wk-sol-history > div::before { position: absolute; left: -28px; top: 2px; margin: 0; }
}
@media (max-width: 640px) {
  .wk-sol-trio-grid, .wk-sol-trio-grid.is-four, .wk-sol-prompts { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-band dl { grid-template-columns: minmax(0, 1fr); }
  .wk-sol-band dl > div + div { border-left: 0; border-top: 1px solid var(--wk-grid-color, #e5e5e5); }
  .wk-sol-spot-stage { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-w { opacity: 1; transition: none; }
  .wk-scene-hide { opacity: 1; transform: none; transition: none; }
  .wk-cursor { display: none; }
  .wk-env, .wk-env-letter, .wk-stamp-face, .wk-sol-history::after { transition: none !important; }
}
.wk-ui-chips span.is-sel { border-color: #8aa6ef; background: #eef2fd; color: #093acd; }
.wk-ui-postcard-back > div:last-child { display: grid; align-content: space-between; justify-items: end; }
.wk-ui-postcard-back .wk-ui-address { justify-self: stretch; }
.wk-sol-mini-art [data-email] { margin-top: 10px; min-height: 52px; font-size: 12px; line-height: 1.5; }
.wk-sol-art > .wk-sol-scene:not([data-scene]) { display: grid; justify-items: center; width: 100%; max-width: 520px; }
.wk-sol-seq-wide .wk-ui-seq > div, .wk-ui-seq-live > div { grid-template-columns: 84px minmax(0, 1fr) auto; }
.wk-sol-big { font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.wk-sol-lot { position: relative; width: 150px; height: 110px; border: 1.5px dashed #8aa6ef; border-radius: 2px; background: #eef2fd; }
.wk-sol-lot span { position: absolute; left: 16px; bottom: 14px; width: 34px; height: 26px; border-radius: 2px; background: var(--wk-cobalt, #093acd); }
.wk-sol-doc { display: grid; gap: 7px; width: 100%; max-width: 230px; padding: 16px; border: 1px solid #e5e5e5; border-radius: 3px; background: #fff; box-shadow: 0 6px 18px rgba(19, 37, 61, 0.1); font-size: 11px; }
.wk-sol-doc b { font-weight: 500; font-size: 12px; }
.wk-sol-doc span { height: 6px; border-radius: 2px; background: #ecebe8; }
.wk-sol-doc span.is-hit { height: auto; padding: 3px 5px; background: #eef2fd; box-shadow: inset 2px 0 0 #093acd; color: #093acd; }
.wk-ui-wide { max-width: none; }
.wk-sol-mini-photo { padding: 0; }
.wk-sol-mini-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.wk-ui-tabpanel { min-height: 160px; }
.wk-ui-tabpanel .wk-ui-photo { height: 96px; margin-bottom: 10px; }

/* Related cards open with a line of the product they lead to. */
.wk-sol-card > h3, .wk-sol-card > p { padding-inline: 20px; }
.wk-sol-card-art { position: relative; isolation: isolate; display: flex; align-items: center; height: 96px; margin-bottom: 10px; padding: 0 18px; }
.wk-sol-card-art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/pricing-grain.svg") repeat; background-size: 160px; mix-blend-mode: overlay; }
.wk-sol-card-art > span { max-width: 100%; padding: 8px 10px; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 6px 16px rgba(19, 37, 61, 0.2); font-size: 12px; font-weight: 500; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.wk-sol-card:hover .wk-sol-card-art > span { transform: translateX(4px); }
.wk-sol-center { text-align: center; }

/* Email scene: numbered steps and a caption say what is happening. */
.wk-sol-art-stack { flex-direction: column; align-items: stretch; gap: 14px; }
.wk-scene-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wk-scene-rail span { padding-top: 10px; border-top: 3px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 500; letter-spacing: -0.02em; transition: border-color 300ms ease, color 300ms ease; }
.wk-scene-rail span.is-on { border-top-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.85); }
.wk-scene-rail span.is-now { border-top-color: #fff; color: #fff; }
.wk-scene-caption { min-height: 24px; color: #fff; font-size: 16px; letter-spacing: -0.02em; }
.wk-ui-draft-wrap { position: relative; }
.wk-ui-empty { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; color: #9a9a9a; font-size: 12px; pointer-events: none; }

/* Draft channels as icons. */
.wk-ui-channels { display: flex; gap: 8px; }
.wk-ui-channels button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d1cfce; border-radius: 4px; background: #fff; color: #5f6670; cursor: pointer; transition: border-color 160ms ease, color 160ms ease, transform 160ms ease; }
.wk-ui-channels button:hover { transform: translateY(-1px); color: #292929; }
.wk-ui-channels button[aria-pressed="true"] { border-color: #093acd; box-shadow: 0 0 0 1px #093acd; color: #093acd; }
.wk-ui-channels svg { width: 20px; height: 20px; }
.wk-li { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 3px; background: #0a66c2; color: #fff; font: 700 12px/1 var(--wk-sans, "Inter", sans-serif); letter-spacing: -0.04em; }
.wk-ui-channel-name { display: block; margin-top: 12px; color: #737373; font-size: 11px; }

/* Voice: speak and watch it write. */
.wk-ui-voicebox { max-width: 480px; }
.wk-ui-said { min-height: 72px; font-size: 17px; line-height: 1.45; letter-spacing: -0.03em; }
.wk-ui-voice { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 4px; }
.wk-ui-mic { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 4px; background: #000; color: #fff; }
.wk-ui-mic svg { width: 18px; height: 18px; }
.is-listening .wk-ui-mic { background: var(--wk-cobalt, #093acd); }
.is-listening .wk-ui-mic::after { content: ""; position: absolute; inset: -5px; border: 2px solid rgba(9, 58, 205, 0.4); border-radius: 6px; animation: wk-ui-pulse 1.6s ease-out infinite; }
.wk-ui-wave-light { flex: 1; height: 28px; }
.wk-ui-wave-light i { background: #c9d6f5; }
.is-listening .wk-ui-wave-light i { background: #093acd; }
.wk-ui-voicebox:not(.is-listening) .wk-ui-wave-light i { animation-play-state: paused; }

/* One box: request on the left, finished work on the right. */
.wk-ui-commands { gap: 10px; padding: 20px; }
.wk-ui-cmd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.wk-ui-cmd .wk-ui-prompt { justify-self: stretch; max-width: none; font-size: 13px; }
.wk-ui-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e3e5e7; border-radius: 4px; }
.wk-ui-done > span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 4px; background: #eef2fd; color: #093acd; font-size: 14px; }
.wk-ui-done b { display: block; font-size: 12.5px; }
.wk-ui-done small { display: block; color: #737373; font-size: 11px; }

/* Ownership trail: each hop and the record that proves it. */
.wk-sol-trail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr) minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; width: 100%; margin: 0; padding: 0; list-style: none; }
.wk-sol-trail-node { display: grid; gap: 4px; padding: 14px; border-radius: 4px; background: #fff; box-shadow: 0 10px 28px rgba(19, 37, 61, 0.22); font-size: 12px; }
.wk-sol-trail-node small { color: #737373; font-size: 10.5px; }
.wk-sol-trail-node b { font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; }
.wk-sol-trail-node > span:not(.wk-ui-tag) { color: #737373; font-size: 11px; overflow-wrap: anywhere; }
.wk-sol-trail-node .wk-ui-tag { justify-self: start; }
.wk-sol-trail-end { box-shadow: 0 0 0 2px #fff, 0 10px 28px rgba(19, 37, 61, 0.3); background: #000; color: #fff; }
.wk-sol-trail-end small, .wk-sol-trail-end > span:not(.wk-ui-tag) { color: rgba(255, 255, 255, 0.7); }
.wk-sol-trail-link { position: relative; display: grid; place-items: center; height: 100%; min-height: 90px; }
.wk-sol-trail-link::before { content: ""; position: absolute; top: 50%; left: 0; right: 6px; height: 2px; background: rgba(255, 255, 255, 0.7); }
.wk-sol-trail-link::after { content: ""; position: absolute; top: calc(50% - 4px); right: 2px; border: 5px solid transparent; border-left-color: rgba(255, 255, 255, 0.85); border-right: 0; }
.wk-sol-trail-doc { position: relative; z-index: 1; display: grid; gap: 2px; max-width: 120px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; background: rgba(20, 35, 83, 0.72); color: rgba(255, 255, 255, 0.8); font-size: 10px; line-height: 1.3; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wk-sol-trail-doc b { color: #fff; font-size: 10.5px; font-weight: 500; }

/* Assessed value bars. */
.wk-sol-bars { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.wk-sol-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; color: #737373; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.wk-sol-bars i { width: 26px; border-radius: 2px 2px 0 0; background: #8aa6ef; transform-origin: bottom; }
.wk-sol-bars > span:last-child i { background: var(--wk-cobalt, #093acd); }
.wk-sol-bars .b1 { height: 62%; } .wk-sol-bars .b2 { height: 68%; } .wk-sol-bars .b3 { height: 74%; } .wk-sol-bars .b4 { height: 81%; } .wk-sol-bars .b5 { height: 88%; }
.wk-sol-js .wk-sol-bars[data-reveal] i { transform: scaleY(0); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.wk-sol-js .wk-sol-bars[data-reveal].is-in i { transform: scaleY(1); }
.wk-sol-bars > span:nth-child(2) i { transition-delay: 80ms; } .wk-sol-bars > span:nth-child(3) i { transition-delay: 160ms; } .wk-sol-bars > span:nth-child(4) i { transition-delay: 240ms; } .wk-sol-bars > span:nth-child(5) i { transition-delay: 320ms; }
.wk-ui-flood { display: block; width: 100%; height: 100%; min-height: 210px; object-fit: cover; }

@media (max-width: 960px) {
  .wk-sol-trail { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 360px; margin-inline: auto; }
  .wk-sol-trail-link { min-height: 70px; }
  .wk-sol-trail-link::before { top: 0; bottom: 6px; left: 50%; right: auto; width: 2px; height: auto; }
  .wk-sol-trail-link::after { top: auto; bottom: 0; left: calc(50% - 4px); right: auto; border: 5px solid transparent; border-top-color: rgba(255, 255, 255, 0.85); border-bottom: 0; }
  .wk-ui-cmd { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .wk-scene-rail span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-sol-js .wk-sol-bars[data-reveal] i { transform: none; transition: none; }
}
.wk-ui-draft[data-split] .wk-ui-cite { background: transparent; border-bottom-color: transparent; transition: background-color 200ms ease, border-color 200ms ease; }
.wk-ui-draft[data-split] .wk-ui-cite:has(.wk-w.is-on) { background: #eef2fd; border-bottom-color: #8aa6ef; }
.wk-sol-mini-art .wk-ui-channel-name + [data-email] { margin-top: 2px; }

/* People in mockups: initials, like the product shows them. */
.wk-ui-person { display: inline-flex; align-items: center; gap: 9px; color: #292929; }
.wk-ui-person b { display: block; font-size: 12.5px; font-weight: 500; }
.wk-ui-person small { display: block; color: #737373; font-size: 10.5px; }
.wk-ui-initials { display: inline-grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 4px; background: #e8eefc; color: #093acd; font-size: 10.5px; font-weight: 500; letter-spacing: 0; }
.wk-ui-call .wk-ui-person { color: #f7f6f5; }
.wk-ui-call .wk-ui-initials { background: rgba(143, 179, 244, 0.22); color: #c2d4f8; }
.wk-ui-reply { display: inline-flex; align-items: center; gap: 8px; }
.wk-ui-reply .wk-ui-initials { width: 22px; height: 22px; font-size: 9px; }
/* The sequence fills the height of the email beside it. */
.wk-scene-email { align-items: stretch; }
.wk-ui-fill { display: flex; flex-direction: column; }
.wk-ui-fill .wk-ui-body { flex: 1; align-content: center; }
.wk-ui-seq-live > div { padding: 13px 0; }

/* Call: a phone on the left, the live transcript and notes beside it. */
.wk-scene-phone { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; width: 100%; max-width: 900px; margin-inline: auto; }
.wk-phone { width: 236px; padding: 9px; border-radius: 38px; background: linear-gradient(160deg, #3a3d44, #15171b); box-shadow: 0 30px 60px rgba(10, 20, 30, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.wk-phone-screen { display: grid; grid-template-rows: auto auto auto 1fr; gap: 18px; height: 470px; padding: 14px 18px 22px; border-radius: 30px; background: radial-gradient(ellipse at 50% 0%, #3b4a63 0%, #1b2130 55%, #12161f 100%); color: #f7f6f5; }
.wk-phone-status { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 500; }
.wk-phone-status span:last-child { font-size: 6px; letter-spacing: 1px; opacity: 0.8; }
.wk-phone-island { width: 72px; height: 20px; border-radius: 12px; background: #000; }
.wk-phone-who { display: grid; justify-items: center; gap: 3px; margin-top: 18px; text-align: center; }
.wk-phone-avatar { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; background: linear-gradient(160deg, #6b7a96, #485570); font-size: 22px; font-weight: 500; letter-spacing: 0; }
.wk-phone-who b { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; }
.wk-phone-who small { color: rgba(247, 246, 245, 0.6); font-size: 11px; font-variant-numeric: tabular-nums; }
.wk-phone-wave { height: 26px; padding-inline: 18px; }
.wk-phone-wave i { background: #8fb3f4; }
.wk-phone-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; align-content: end; }
.wk-phone-keys span { display: grid; place-items: center; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: rgba(247, 246, 245, 0.85); font-size: 9px; }
.wk-phone-keys .wk-phone-end { background: #e5484d; color: #fff; }
.wk-phone-side { display: grid; gap: 14px; }
.wk-phone-side .wk-ui { max-width: none; }
.wk-ui-live { display: inline-flex; align-items: center; gap: 5px; color: #c4333a; font-size: 11px; font-weight: 500; }
.wk-ui-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; animation: wk-ui-blink 1.2s ease-in-out infinite; }
@keyframes wk-ui-blink { 50% { opacity: 0.25; } }
.wk-ui-transcript-light { min-height: 0; }
.wk-ui-transcript-light .wk-ui-line { color: #292929; }
.wk-ui-transcript-light .wk-ui-line b { color: #737373; }
.wk-ui-transcript-light .wk-ui-line.is-key b { color: #093acd; }
@media (max-width: 760px) {
  .wk-scene-phone { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wk-phone { width: 210px; }
  .wk-phone-screen { height: 400px; }
  .wk-phone-side { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wk-ui-live::before { animation: none; } }
/* Flood risk drawn over the real map. */
.wk-sol-flood { position: relative; isolation: isolate; width: 100%; height: 100%; min-height: 210px; overflow: hidden; background: #f1f0ec; }
.wk-sol-flood::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/product-map-crop.webp") 30% 60% / cover no-repeat; filter: grayscale(1) contrast(0.85) brightness(1.12); opacity: 0.7; }
.wk-sol-flood svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wk-sol-flood-zone { position: absolute; right: 12px; top: 12px; padding: 5px 8px; border-radius: 4px; background: #093acd; color: #fff; font-size: 11px; font-weight: 500; }
.wk-sol-flood-pin { position: absolute; left: 12px; bottom: 12px; display: grid; gap: 2px; padding: 8px 10px; border-radius: 4px; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); color: #737373; font-size: 11px; }
.wk-sol-flood-pin b { color: #292929; font-size: 12px; font-weight: 500; }