/*
 * Use case directory, Claude Design transfer. Loaded only on /use-cases/ when bd_uc_dc_on() is true (?bd_dc=old shows the old layout).
 * Values from design-v2/"Use Cases.dc.html".
 */
body.ucl-page .ucl {
    --n: #11193f; --night: #000313; --coral: #ff5247; --ink3: #4b5563; --line: #dfe4ea; --on-dark: #a6b0d2;
    --pad: clamp(16px, 2.5vw, 32px);
    background: #f6f8f9; color: var(--n);
    font-family: Urbanist, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased;
}
.ucl *, .ucl *::before, .ucl *::after { box-sizing: border-box; }
.ucl a { text-decoration: none; }
.ucl-ico { display: block; width: 22px; height: 22px; background: var(--coral); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.ucl-ico--w { background: #fff; }

/* hero */
.ucl-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(120px, 13vw, 184px) var(--pad) clamp(43px, 5.63vw, 72px);
    background: radial-gradient(43% 50% at 50% 0%, rgb(255 82 70 / .26) 0%, rgb(3 8 36 / 0) 100%), url(../../img/uc/bg-digital-red.jpg) right bottom / cover no-repeat, var(--night); }
.ucl-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12; background: none; -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent); }
.ucl-hero__in { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(22px, 3.75vw, 48px) clamp(36px, 6.25vw, 80px); }
.ucl-hero__copy { flex: 7 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ucl-crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #8b97c4; }
.ucl-crumbs a { color: var(--on-dark); }
.ucl-crumbs a:hover { color: #fff; }
.ucl-crumbs span:last-child { color: #fff; }
.ucl-h1 { margin: 0; font-size: clamp(31px, 4.69vw, 60px); font-weight: 500; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; color: #fff; }
.ucl-h1 span { font-weight: 300; color: var(--on-dark); }
.ucl-lead { margin: 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--on-dark); text-wrap: pretty; }
.ucl-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; margin-top: 6px; border-radius: 8px; background: var(--coral); color: #fff; font-size: 17px; font-weight: 700; box-shadow: 0 14px 30px -12px rgb(255 82 71 / .55); }
.ucl-btn:hover { color: #fff; box-shadow: inset 0 0 0 100px rgb(255 255 255 / .08), 0 14px 30px -12px rgb(255 82 71 / .7); }
.ucl-jump { flex: 5 1 360px; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ucl-jump__tile { display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border-radius: 10px; background: rgb(255 255 255 / .06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; transition: background .25s; }
.ucl-jump__tile:hover { color: #fff; background: rgb(255 255 255 / .12); }
.ucl-jump__top { display: flex; align-items: center; justify-content: space-between; }
.ucl-jump__top span { font: 400 13px BDDigits, 'JetBrains Mono', monospace; color: #8b97c4; }
.ucl-jump__tile b { font-size: 16px; font-weight: 600; line-height: 1.25; }

/* filter bar */
.ucl-filter { position: sticky; top: calc(var(--bd4-top, 0px) + 72px); z-index: 20; background: rgb(246 248 249 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid #e3e7ef; }
.ucl-filter__in { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); min-height: 68px; display: flex; align-items: center; gap: 16px; }
.ucl-filter__label { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--ink3); }
.ucl-filter__chips { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 0; }
.ucl-filter__chips::-webkit-scrollbar { display: none; }
.ucl-chip { flex: 0 0 auto; height: 38px; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer; font: 600 14px Urbanist, sans-serif; white-space: nowrap; background: #fff; color: var(--n); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s; }
.ucl-chip { display: inline-flex; align-items: center; justify-content: center; }
.ucl-chip .bd-prod-mark { margin-right: 8px; }
.ucl-chip:hover { box-shadow: inset 0 0 0 1px var(--n); }
.ucl-chip[aria-pressed="true"] { background: var(--n); color: #fff; box-shadow: none; }

/* groups */
.ucl-main { padding: clamp(43px, 5.63vw, 72px) var(--pad) 24px; }
.ucl-main__in { max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px, 5.63vw, 72px); }
.ucl-group { scroll-margin-top: 150px; }
.ucl-group[hidden], .ucl-card[hidden] { display: none; }
.ucl-group__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ucl-group__title { display: flex; align-items: center; gap: 16px; }
.ucl-group__ico { width: 48px; height: 48px; border-radius: 8px; display: grid; place-items: center; background: radial-gradient(80% 70% at 50% 0%, rgb(255 82 70 / .35), rgb(255 82 70 / 0) 75%), var(--n); box-shadow: 0 10px 24px -10px rgb(17 25 63 / .55); }
.ucl-group__title h2 { margin: 0; font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: -.02em; color: var(--n); }
.ucl-group__head p { margin: 0; max-width: 30em; font-size: 16px; line-height: 1.5; color: var(--ink3); }
.ucl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }

/* cards */
.ucl-card { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 26px 26px 24px; border-radius: 14px; color: #fff;
    background: radial-gradient(67% 39% at 50% 0%, rgb(255 82 70 / .2) 0%, rgb(3 9 37 / 0) 100%), radial-gradient(80% 50% at 100% 100%, rgb(59 79 150 / .35) 0%, rgb(3 9 37 / 0) 100%), var(--night);
    box-shadow: 0 24px 50px -28px rgb(0 3 19 / .6); transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; }
.ucl-card:hover { color: #fff; transform: translateY(-4px); box-shadow: 0 30px 60px -26px rgb(0 3 19 / .7); }
.ucl-card::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .14; background: none; -webkit-mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent); mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent); }
.ucl-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgb(255 255 255 / .18), rgb(255 255 255 / 0) 60%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ucl-card__big { position: absolute; right: -26px; top: 70px; z-index: -1; width: 150px; height: 150px; background: rgb(255 255 255 / .045); -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.ucl-card__ico { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: rgb(255 255 255 / .07); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1); }
.ucl-card__ico .ucl-ico { width: 20px; height: 20px; }
.ucl-card__t { margin-top: 10px; font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.ucl-card__d { flex: 1 1 auto; font-size: 15px; line-height: 1.5; color: var(--on-dark); }
.ucl-card__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .08); }
.ucl-card__tags span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); font-size: 12px; font-weight: 500; color: #c6cdd7; }
.ucl-card__cta { font-size: 15px; font-weight: 600; }
.ucl-empty { margin: 0; padding: clamp(20px, 3.13vw, 40px) 0; text-align: center; font-size: 16px; color: var(--ink3); }

/* keep going */
.ucl-go { padding: clamp(43px, 5.63vw, 72px) var(--pad) clamp(64px, 9.38vw, 120px); }
.ucl-go__in { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 32px clamp(29px, 5vw, 64px); align-items: center; padding: clamp(20px, 3.13vw, 40px); border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgb(17 25 63 / .06); }
.ucl-go__head { flex: 3 1 220px; display: flex; flex-direction: column; gap: 12px; }
.ucl-eyebrow { display: flex; align-items: center; gap: 10px; font: 400 13px BDDigits, 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.ucl-eyebrow i { width: 8px; height: 8px; background: var(--coral); }
.ucl-go__head h2 { margin: 0; font-size: clamp(28px, 3.13vw, 40px); font-weight: 500; line-height: 1.06; letter-spacing: -.025em; color: var(--n); }
.ucl-go__grid { flex: 9 1 600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.ucl-go__item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 10px; background: #f6f8f9; box-shadow: inset 0 0 0 1px #e3e7ef; color: var(--n); transition: background .2s; }
.ucl-go__item:hover { color: var(--n); background: #eef1f7; }
.ucl-go__ico { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; background: var(--n); }
.ucl-go__ico .ucl-ico { width: 20px; height: 20px; }
.ucl-go__txt { display: flex; flex-direction: column; gap: 2px; }
.ucl-go__txt b { font-size: 16px; font-weight: 600; }
.ucl-go__txt small { font-size: 13.5px; line-height: 1.4; color: var(--ink3); }

@media (max-width: 640px) {
    .ucl-hero { padding-top: 112px; }
    .ucl-filter__label { display: none; }
    .ucl-group__title h2 { font-size: 26px; }
    .ucl-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .ucl * { transition: none !important; } }

/* owner fb C11: card keeps hover while pointer is over its resting area (class set by uc-list.js) */
.ucl-card:hover { transform: none; }
.ucl-card.is-lift { transform: translateY(-4px); box-shadow: 0 30px 60px -26px rgb(0 3 19 / .7); }
@media (prefers-reduced-motion: reduce) { .ucl-card.is-lift { transform: none; } }