/* Use case pop-ups on /use-cases/ (owner, 2026-11-08). Clicking a use case opens it over the page instead of going
   to its own page: a panel from the right on computers, a sheet from the bottom on phones, like the pop-ups on the
   homepage preview (/home-preview/). /js/uc-popup.js loads the use case's page and shows its four steps.
   On computers with a tall enough screen the steps come one at a time as you scroll (or press the bouncing arrow),
   with dots to show where you are; at the end an "Up next" card opens the next use case in place, and carrying on
   scrolling opens it too. Phones, short screens and reduced motion get the steps as a list.
   Colours: ink #1E085D on the pale lilac #EEE9FB panel is 14.5:1, purple #4705D0 links 8.2:1, soft ink #4A4458 on
   the white cards 9.1:1. */

html.ucp-lock { overflow: hidden; }
.ucp { position: fixed; inset: 0 0 0 auto; width: min(64rem, 82vw); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 28px 0 0 28px; background: #EEE9FB; color: #1E085D; overflow-y: auto; overscroll-behavior: contain; box-shadow: -24px 0 60px -20px rgba(30, 8, 93, .45); font-family: 'DM Sans', system-ui, sans-serif; }
.ucp::backdrop { background: rgba(30, 8, 93, .45); }
.ucp-wrap { box-sizing: border-box; width: 100%; max-width: 60rem; margin: 0 auto; padding: 0 32px; }

/* Top bar: Get started and a large close X */
.ucp-bar { position: sticky; top: 0; z-index: 3; box-sizing: border-box; min-height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 24px; background: inherit; }
.ucp-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: #4705D0; color: #FDFCFA; font-size: 0.9375rem; font-weight: 700; text-decoration: none; }
.ucp-cta:hover { background: #1E085D; color: #FDFCFA; }
.ucp-cta:focus-visible { outline: 3px solid #1E085D; outline-offset: 3px; }
.ucp-close { display: grid; place-items: center; width: 52px; height: 52px; margin: -6px -12px -6px 4px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #1E085D; cursor: pointer; }
.ucp-close svg { width: 36px; height: 36px; }
.ucp-close:hover { color: #4705D0; }
.ucp-close:focus-visible { outline: 3px solid #4705D0; outline-offset: 2px; }

/* Heading */
.ucp-head { text-align: center; margin: 0 auto 32px; max-width: 46rem; }
.ucp-eyebrow { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4705D0; }
.ucp-head h2 { margin: 0 0 12px; font-family: 'Lexend', sans-serif; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.15; letter-spacing: -.01em; color: #1E085D; }
.ucp-lead { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: #3D3650; }
.ucp-guide { margin: 10px 0 0; font-size: 0.9375rem; font-weight: 700; }
.ucp-guide a { color: #4705D0; }
.ucp-loading { padding: 80px 0; text-align: center; font-weight: 700; color: #3D3650; }

/* Steps: cards with the words and the picture */
.ucp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.ucp .ucp-slide { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; margin: 0; background: #FDFCFA; border-radius: 24px; padding: 24px; }
.ucp .ucp-slide .ucx-step-text { justify-self: start; max-width: none; }
.ucp .ucp-slide .ucx-step-pic { order: 0; border-radius: 16px; background: #E2DBF6; }
.ucp .ucp-slide .ucx-step-pic::before { display: none; }
.ucp .ucx-step h3 { margin: 0 0 10px; }
.ucp .ucx-step-num { display: block; width: auto; height: auto; margin: 0 0 6px; border-radius: 0; background: none; font-family: 'Lexend', sans-serif; font-size: 0.875rem; font-weight: 400; letter-spacing: .12em; line-height: 1.2; color: #4A4458; }
.ucp .ucx-prompt .copy-field-text { max-height: 8.5rem; overflow-y: auto; font-size: 0.9375rem; }

/* Dots, arrow and the end of the pop-up */
.ucp-dots, .ucp-next { display: none; }
.ucp-end { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 32px 0 48px; }
.ucp-upnext { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: min(100%, 30rem); box-sizing: border-box; padding: 14px 18px; border-radius: 18px; background: #FDFCFA; border: 1px solid rgba(30, 8, 93, .12); color: #1E085D; text-decoration: none; text-align: left; box-shadow: 0 12px 26px -20px rgba(30, 8, 93, .6); font: inherit; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.ucp-upnext:hover { border-color: #1E085D; box-shadow: 0 16px 30px -20px rgba(30, 8, 93, .7); }
.ucp-upnext:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; }
.ucp-upnext::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--pull, 0) * 100%); background: #1E085D; transition: width .15s ease-out; }
.ucp-upnext-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ucp-upnext-label { font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4A4458; }
.ucp-upnext-title { font-family: 'Lexend', sans-serif; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.ucp-upnext-sub { font-size: 0.875rem; line-height: 1.4; color: #4A4458; }
.ucp-upnext svg { flex-shrink: 0; width: 22px; height: 22px; transition: transform .2s ease; }
.ucp-prev { padding: 0; border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 700; color: #4705D0; text-decoration: underline; cursor: pointer; }
.ucp-prev:focus-visible { outline: 3px solid #4705D0; outline-offset: 2px; }

/* Phones: a sheet from the bottom with a handle */
@media (max-width: 48em) {
  .ucp { inset: auto 0 0 0; width: 100%; height: 92%; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px -20px rgba(30, 8, 93, .5); }
  .ucp-bar { padding: 22px 16px 12px; }
  .ucp-bar::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 999px; background: rgba(30, 8, 93, .25); }
  .ucp-wrap { padding: 0 16px; }
  .ucp .ucp-slide { padding: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ucp[open] { animation: ucp-in .35s cubic-bezier(.2, .8, .2, 1); }
  .ucp[open]::backdrop { animation: ucp-fade .3s ease; }
  .ucp-head > * { animation: ucp-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .ucp-head > :nth-child(2) { animation-delay: .1s; }
  .ucp-head > :nth-child(n+3) { animation-delay: .2s; }
  .ucp-upnext:hover { transform: translateY(-2px); }
  .ucp-upnext:hover svg { transform: translateX(3px); }
  @media (max-width: 48em) { .ucp[open] { animation-name: ucp-sheet; } }
}
@keyframes ucp-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ucp-sheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ucp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ucp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ucp-bounce { 0%, 100% { transform: none; } 50% { transform: translateY(7px); } }

/* One at a time (computers with a tall enough screen). The track is tall; the stage sticks under the bar while you
   scroll through it, and /js/uc-popup.js marks the step showing with .is-current. */
@media (min-width: 56.01em) and (min-height: 40em) and (prefers-reduced-motion: no-preference) {
  .ucp.is-on .ucp-track { height: calc(100vh + var(--ucp-n, 4) * 60vh); }
  .ucp.is-on .ucp-stage { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; justify-content: safe center; padding-top: 8px; padding-bottom: 16px; box-sizing: border-box; }
  .ucp.is-on .ucp-head { margin-bottom: clamp(12px, 2.5vh, 32px); }
  .ucp.is-on .ucp-lead { font-size: 1rem; }
  .ucp.is-on .ucp-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ucp.is-on .ucp-slide { grid-area: 1 / 1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 36px; align-self: center; padding: 28px; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  .ucp.is-on .ucp-slide.is-current { opacity: 1; pointer-events: auto; }
  .ucp.is-on .ucp-slide .ucx-step-text { grid-column: 1; grid-row: 1; align-self: center; }
  .ucp.is-on .ucp-slide .ucx-step-pic { grid-column: 2; grid-row: 1; align-self: center; }
  .ucp.is-on .ucp-slide.is-current > .ucx-step-text > * { animation: ucp-rise .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
  .ucp.is-on .ucp-slide.is-current > .ucx-step-text > :nth-child(n+3) { animation-delay: .3s; }
  .ucp.is-on .ucp-slide.is-current > .ucx-step-pic { animation: ucp-rise .8s cubic-bezier(.2, .7, .2, 1) .45s both; }
  .ucp.is-on .ucp-dots { display: flex; justify-content: center; gap: 2px; margin: 14px 0 0; }
  .ucp-dot { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
  .ucp-dot::before { content: ""; width: 10px; height: 10px; border-radius: 999px; border: 2px solid #1E085D; box-sizing: border-box; transition: width .25s ease, background-color .25s ease; }
  .ucp-dot[aria-current]::before { width: 22px; background: #1E085D; }
  .ucp-dot:hover::before { background: #4705D0; border-color: #4705D0; }
  .ucp-dot:focus-visible { outline: 3px solid #4705D0; outline-offset: 1px; }
  .ucp.is-on .ucp-next { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; margin: 18px auto 0; padding: 0; border: 0; border-radius: 50%; background: #FDFCFA; color: #1E085D; box-shadow: 0 10px 24px -12px rgba(30, 8, 93, .55); cursor: pointer; animation: ucp-bounce 1.6s ease-in-out infinite; }
  .ucp.is-on .ucp-next svg { width: 24px; height: 24px; }
  .ucp.is-on .ucp-next:hover { color: #4705D0; }
  .ucp.is-on .ucp-next:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; }
  .ucp.is-on .ucp-upnext { padding: 10px 16px; }
}
@media (min-width: 56.01em) and (max-height: 56em) and (prefers-reduced-motion: no-preference) {
  .ucp.is-on .ucp-upnext-sub { display: none; }
}
@media (min-width: 56.01em) and (max-height: 52em) and (prefers-reduced-motion: no-preference) {
  .ucp.is-on .ucp-eyebrow { display: none; }
  .ucp.is-on .ucp-dots { margin-top: 8px; }
}
@media (forced-colors: active) { .ucp-upnext::after { background: CanvasText; } }

/* Cover and Up next (owner, 2026-11-08). Each use case opens on a cover, a small hero: the problem in the person's
   words, what Humble does about it (or the page's ticks), a "Show me how" button and the card's picture. After the
   steps, "Up next" is a screen of its own: the next use case's picture and title, one big "Next" button, and
   Previous. Purple #4705D0 with off-white text 9.2:1; pink #FEBBCC 6.0:1; ink on the pink button 10.6:1. */
.ucp-cover { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; box-sizing: border-box; margin: 0 32px 40px; padding: 28px 22px; border-radius: 24px; background: #4705D0; color: #FCFAF7; }
.ucp-cover-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 0.9375rem; font-weight: 700; color: #FEBBCC; }
.ucp-cover-eyebrow svg { width: 20px; height: 20px; flex-shrink: 0; }
.ucp-cover-h { margin: 0 0 14px; font-family: 'Lexend', sans-serif; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em; color: #FCFAF7; }
.ucp-cover-q { margin: 0 0 14px; font-size: 1.125rem; font-weight: 700; line-height: 1.45; color: #FEBBCC; }
.ucp-cover-fix { margin: 0 0 22px; font-size: 1.0625rem; line-height: 1.5; color: #FCFAF7; }
.ucp-cover-ticks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.ucp-cover-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 1.0625rem; line-height: 1.45; }
.ucp-cover-ticks svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: #FEBBCC; }
.ucp-cover-cta { margin: 0; }
.ucp-cover-btn, .ucp-nextbtn { display: inline-flex; align-items: center; min-height: 52px; padding: 14px 30px; border: 0; border-radius: 14px; background: #FEBBCC; color: #1E085D; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; box-shadow: inset 0 0 0 2px #1E085D, 4px 4px 0 #1E085D; transition: transform .15s, box-shadow .15s, background-color .2s; }
.ucp-cover-btn:hover, .ucp-nextbtn:hover { background: #FFD1DC; transform: translate(2px, 2px); box-shadow: inset 0 0 0 2px #1E085D, 2px 2px 0 #1E085D; }
.ucp-cover-btn:active, .ucp-nextbtn:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 2px #1E085D, 0 0 0 #1E085D; }
.ucp-cover-btn:focus-visible { outline: 3px solid #FCFAF7; outline-offset: 4px; }
.ucp-nextbtn:focus-visible { outline: 3px solid #4705D0; outline-offset: 4px; }
.ucp-nextbtn::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--pull, 0) * 100%); background: #1E085D; border-radius: 0 0 14px 14px; }
.ucp-nextbtn { position: relative; overflow: hidden; }
.ucp-cover-pic { position: relative; display: grid; place-items: center; min-height: 260px; }
.ucp-cover-circle { position: absolute; left: 50%; top: 50%; width: 92%; max-width: 340px; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #FEBBCC; }
.ucp-cover-frame { position: relative; z-index: 1; width: min(100%, 330px); }
.ucp-cover-frame .tp-app, .ucp-cover-frame > :not(.tp-annotated) { box-shadow: 0 24px 40px -22px rgba(30, 8, 93, .7); }
/* Up next, a screen of its own */
.ucp-nextscreen { display: grid; justify-items: center; gap: 16px; box-sizing: border-box; margin: 24px 32px 48px; padding: 36px 24px; border-radius: 24px; background: #FDFCFA; text-align: center; }
.ucp-next-eyebrow { margin: 0; font-family: 'Lexend', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: #1E085D; }
.ucp-next-done { margin: 0; color: #3D3650; }
.ucp-nextcard { display: grid; width: min(100%, 26rem); padding: 0; border: 1px solid rgba(30, 8, 93, .12); border-radius: 18px; overflow: hidden; background: #F4F2ED; color: #1E085D; font: inherit; text-align: left; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.ucp-nextcard:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(30, 8, 93, .6); }
.ucp-nextcard:focus-visible { outline: 3px solid #4705D0; outline-offset: 3px; }
.ucp-nextcard-pic { display: grid; place-items: center; height: 190px; overflow: hidden; padding: 16px; background: #EEE9FB; }
.ucp-nextcard-pic > * { zoom: .7; }
.ucp-nextcard-body { display: grid; gap: 4px; padding: 14px 18px 16px; }
.ucp-nextcard-q { font-size: 0.9375rem; color: #4A4458; }
.ucp-nextcard-title { font-family: 'Lexend', sans-serif; font-size: 1.125rem; font-weight: 800; }
@media (max-width: 48em) {
  .ucp-cover { margin: 0 16px 32px; }
  .ucp-nextscreen { margin: 24px 16px 40px; }
}
@media (min-width: 56em) {
  .ucp-cover { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 32px; padding: 40px; min-height: calc(100vh - 64px - 40px); }
  .ucp-nextscreen { min-height: calc(100vh - 64px - 72px); align-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ucp-cover-btn:is(:hover, :active), .ucp-nextbtn:is(:hover, :active), .ucp-nextcard:hover { transform: none; } }
/* Tall pictures (investor lists, candidate boards) stay inside the cover: cropped with a soft fade at the bottom */
@media (min-width: 56em) {
  .ucp-cover-frame { max-height: min(440px, calc(100vh - 220px)); overflow: hidden; padding-bottom: 24px; }
  .ucp-cover-frame.is-tall { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
}