/* Use Cases hub and the five use-case pages: photo hero with its animated overlay, questions, steps, sample outputs, who it is for, next use case. Also loaded by Work and Insights. */
/* ============================== HERO ============================== */
.uc-hero { position: relative; display: flex; align-items: center; min-height: clamp(600px, calc(100vh - 72px), 880px); overflow: hidden; background: var(--surface-000); color: var(--ink); }
.uc-hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.uc-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.uc-hero-media::before {          /* the photograph fades into the text side, and darkens a little under the overlay panel */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--surface-000) 0%, color-mix(in srgb, var(--surface-000) 72%, transparent) 16%, color-mix(in srgb, var(--surface-000) 18%, transparent) 42%, transparent 60%),
    linear-gradient(0deg, color-mix(in srgb, var(--surface-000) 55%, transparent) 0%, transparent 34%);
}
.uc-hero-inner { position: relative; z-index: 2; }
.uc-hero-text { max-width: 540px; padding: var(--space-9) 0; }
.uc-hero-text .hk-eyebrow a { color: inherit; text-decoration: none; }
.uc-hero-text .hk-eyebrow a:hover { text-decoration: underline; }
.uc-h1 { margin: var(--space-4) 0 var(--space-5); font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -0.01em; }
.uc-lead { margin: 0 0 var(--space-6); font-size: 18px; line-height: 29px; color: var(--ink-muted); }
.uc-hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.uc-hero-cap { position: absolute; z-index: 2; top: var(--space-4); right: var(--space-5); margin: 0; padding: 3px 8px; color: rgba(238, 236, 230, .88); background: rgba(12, 14, 17, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: var(--radius-xs); }

/* The overlay panel: a small live view of the use case, drawn in code */
.uc-hud { position: absolute; z-index: 2; right: var(--space-6); bottom: var(--space-6); width: 300px; padding: 12px 14px 10px; background: color-mix(in srgb, var(--surface-000) 66%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); }
.uc-hud svg { display: block; width: 100%; height: auto; overflow: visible; }
.uc-hud-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px; }
.uc-hud-head .mono-label { margin: 0; color: var(--accent-text); }
.uc-hud-live { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); animation: hudLive 2.4s ease-in-out infinite; }
.uc-hud-foot { margin: 6px 0 0; color: var(--ink-muted); }
.uc-hud text { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--ink-muted); }
@keyframes hudLive { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); } }

/* Base styles are the finished state; the keyframes start from hidden. With reduced motion the panel simply holds. */
.uc-hud svg * { transform-box: fill-box; }
/* 01 · site boundary draws, layers lift */
.ov-bound { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 0; animation: ovDraw 9s var(--ease-standard) infinite; }
.ov-layer { stroke-width: 1.2; animation: ovLift 9s var(--ease-standard) infinite; }
.ov-l0 { fill: color-mix(in srgb, var(--info) 14%, transparent); stroke: var(--info); animation-delay: .25s; }
.ov-l1 { fill: color-mix(in srgb, var(--success) 12%, transparent); stroke: var(--success); animation-delay: .55s; }
.ov-l2 { fill: color-mix(in srgb, var(--data-violet) 16%, transparent); stroke: var(--data-violet); animation-delay: .85s; }
.ov-node { fill: var(--surface-000); stroke: var(--accent); stroke-width: 1.6; transform-origin: center; animation: ovPop 9s var(--ease-node) infinite; }
.ov-n1 { animation-delay: .3s; } .ov-n2 { animation-delay: .6s; }
@keyframes ovDraw { 0% { stroke-dashoffset: 1; opacity: 1; } 22% { stroke-dashoffset: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ovLift { 0%, 22% { opacity: 0; transform: translateY(30px); } 38%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes ovPop { 0%, 40% { opacity: 0; transform: scale(.2); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 02 · scores rise, two fall back, one holds */
.ov-tile { fill: color-mix(in srgb, var(--ink) 12%, transparent); stroke: color-mix(in srgb, var(--ink) 30%, transparent); }
.ov-bar { fill: var(--accent); transform-origin: 50% 100%; animation: ovRise 8s var(--ease-standard) infinite; }
.ov-b1, .ov-b2 { animation-name: ovRiseDim; opacity: .3; }
.ov-num { font-family: var(--font-display) !important; font-size: 16px !important; fill: var(--ink) !important; animation: ovNum 8s var(--ease-standard) infinite; }
.ov-t1, .ov-t2 { animation-name: ovNumDim; opacity: .35; }
.ov-thresh { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-dasharray: 3 4; }
@keyframes ovRise { 0% { transform: scaleY(0); } 28%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes ovRiseDim { 0% { transform: scaleY(0); opacity: 1; } 28% { transform: scaleY(1); opacity: 1; } 46%, 90% { transform: scaleY(1); opacity: .3; } 100% { transform: scaleY(0); opacity: .3; } }
@keyframes ovNum { 0%, 20% { opacity: 0; } 30%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ovNumDim { 0%, 20% { opacity: 0; } 30% { opacity: 1; } 46%, 90% { opacity: .35; } 100% { opacity: 0; } }
/* 03 · massing options take turns inside the envelope */
.ov-env { stroke: color-mix(in srgb, var(--ink) 50%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
/* solid shading, so one volume never shows through another */
.ov-mt { fill: color-mix(in srgb, var(--ink) 86%, var(--surface-000)); }
.ov-ml { fill: color-mix(in srgb, var(--ink) 42%, var(--surface-000)); }
.ov-mr { fill: color-mix(in srgb, var(--ink) 60%, var(--surface-000)); }
.ov-fl { fill: none; stroke: var(--surface-000); stroke-width: .5; opacity: .55; }
.ov-mt, .ov-ml, .ov-mr { stroke: var(--surface-000); stroke-width: .6; }
.ov-opt { opacity: 0; animation: ovCycle 9s var(--ease-standard) infinite; }
.ov-o1 { animation-delay: 3s; } .ov-o2 { animation-delay: 6s; }
@keyframes ovCycle { 0% { opacity: 0; } 5%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
/* 04 · every entry scored on the same criteria, row by row */
.ov-col { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.ov-dot { fill: color-mix(in srgb, var(--ink) 55%, transparent); transform-origin: center; animation: ovDot 8s var(--ease-node) infinite; }
.ov-dhl { fill: var(--accent); }
.ov-r1 { animation-delay: .35s; } .ov-r2 { animation-delay: .7s; } .ov-r3 { animation-delay: 1.05s; } .ov-r4 { animation-delay: 1.4s; }
@keyframes ovDot { 0%, 4% { opacity: 0; transform: scale(.2); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 05 · sensitivity bars grow from the axis; the largest downside is marked with a node */
.ov-axis { stroke: color-mix(in srgb, var(--ink) 50%, transparent); }
.ov-lo { fill: color-mix(in srgb, var(--error) 75%, transparent); transform-origin: 100% 50%; animation: ovGrowX 8s var(--ease-standard) infinite; }
.ov-hi { fill: var(--accent); transform-origin: 0% 50%; animation: ovGrowX 8s var(--ease-standard) infinite; }
.ov-g1 { animation-delay: .2s; } .ov-g2 { animation-delay: .4s; } .ov-g3 { animation-delay: .6s; } .ov-g4 { animation-delay: .8s; }
.ov-mark { animation: ovNum 8s var(--ease-standard) infinite; animation-delay: 1.4s; }
.ov-mark-dot { fill: var(--ink); }
.ov-mark-ln { stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 2 3; opacity: .7; }
.ov-mark-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .6; transform-box: fill-box; transform-origin: center; animation: ovHalo 2.4s var(--ease-standard) infinite; }
@keyframes ovHalo { 0% { transform: scale(.6); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ovGrowX { 0% { transform: scaleX(0); } 24%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ov-lab { font-size: 9px; }

@media (prefers-reduced-motion: reduce) {
  .uc-hud *, .uc-hud-live { animation: none !important; }
  .ov-o1 { opacity: 1; }
}

/* ============================== QUESTIONS · STEPS ============================== */
.uc-questions { margin: 0; padding: 0; list-style: none; }
.uc-questions li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.uc-questions li:last-child { border-bottom: 1px solid var(--line); }
.q-idx { padding-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--accent-text); }
.q-text { font-family: var(--font-display); font-size: 24px; line-height: 31px; }
.uc-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.uc-steps li::before { background: var(--surface-000); }
.uc-more, .uc-link { display: inline-flex; gap: 6px; font-size: 15px; color: var(--accent-text); text-decoration: none; }
.uc-more:hover, .uc-link:hover { text-decoration: underline; }

/* ============================== OUTPUTS ============================== */
.outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
/* Each card spans two rows of the grid, so figures and titles line up across a row */
@supports (grid-template-rows: subgrid) { .outs > .out { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; } }
.out { display: grid; grid-template-rows: 1fr auto; overflow: hidden; background: var(--surface-100); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.out-fig { display: flex; align-items: center; margin: 0; padding: var(--space-5); min-height: 236px; background: var(--surface-000); border-bottom: 1px solid var(--line); background-image: radial-gradient(var(--dot) 1px, transparent 1.2px); background-size: 16px 16px; }
.out-text { padding: var(--space-5); }
.out-name { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 28px; }
.out-text p { margin: 0; color: var(--ink-muted); }

.art { width: 100%; max-width: 520px; margin: 0 auto; padding: var(--space-4); font-size: 13px; line-height: 18px; background: var(--surface-100); border: 1px solid var(--line-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-plane); }
.art-head { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-3); color: var(--ink-muted); }
.art-note { margin: var(--space-3) 0 0; font-size: 12px; color: var(--ink-muted); }
.art-svg { display: block; width: 100%; height: auto; }
.art-svg text { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; fill: var(--ink-muted); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.legend li b { margin-left: auto; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.legend-row { display: flex; flex-wrap: wrap; }
/* program bar */
.pbar { display: flex; gap: 2px; height: 30px; overflow: hidden; border-radius: var(--radius-xs); }
/* grouped bars */
.gchart { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.gcol { display: grid; gap: 6px; text-align: center; }
.gbars { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 104px; border-bottom: 1px solid var(--line-strong); }
.gb { width: 14px; border-radius: 2px 2px 0 0; }
.gb-0 { background: var(--accent); } .gb-1 { background: var(--success); } .gb-2 { background: var(--data-violet); }
.gcol:not(.is-hl) .gb { opacity: .5; }
.gcol .mono-label { font-size: 9.5px; }
.gcol.is-hl .mono-label { color: var(--accent-text); }
/* register */
.reg { margin: 0; padding: 0; list-style: none; }
.reg li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--line); }
.reg-item { display: grid; gap: 2px; }
.reg-item small { font-size: 12px; color: var(--ink-muted); }
/* decision record: the page's one lime node */
.art-record { border-left: 2px solid var(--accent); }
.rec-node { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--decision-lime); box-shadow: var(--shadow-node); }
.rec { display: grid; gap: 8px; margin: 0; }
.rec > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--space-3); padding-top: 8px; border-top: 1px solid var(--line); }
.rec dt { margin: 0; font-size: 10px; }
.rec dd { margin: 0; color: var(--ink); }
/* tables */
.mini { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mini th { padding: 0 6px 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; color: var(--ink-muted); border-bottom: 1px solid var(--line-strong); }
.mini td { padding: 7px 6px; border-bottom: 1px solid var(--line); }
.mini .num { text-align: right; }
.mini tr.is-hl td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.mini tr.is-hl td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.mini-ck .num { text-align: center; }
.ck { font-weight: 600; }
.ck-y { color: var(--success-text, var(--success)); } .ck-n { color: var(--error-text, var(--error)); } .ck-na { color: var(--ink-faint); }
/* meters */
.meters { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.meters li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 118px; align-items: center; gap: var(--space-3); }
.m-name, .rk-name { color: var(--ink); }
.m-track { position: relative; height: 8px; overflow: hidden; background: var(--surface-200); border-radius: var(--radius-full); }
.m-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: inherit; }
.m-na { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--line-strong) 4px 5px); }
.m-val { font-size: 12px; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }
.rk li { grid-template-columns: 40px minmax(0, 1fr) 36px; }
.rk li:not(.is-hl) .m-fill { background: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
.rk li.is-hl .m-val, .rk li.is-hl .rk-name { color: var(--accent-text); }
/* radar */
.rd-ring { fill: none; stroke: var(--line); }
.rd-s { stroke-width: 1.5; stroke-linejoin: round; }
.rd-s0 { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: var(--accent); }
.rd-s1 { fill: none; stroke: var(--data-violet); }
.rd-s2 { fill: none; stroke: var(--data-amber); stroke-dasharray: 4 3; }
.rd-sw0 { background: var(--accent); } .rd-sw1 { background: var(--data-violet); } .rd-sw2 { background: var(--data-amber); }
/* timeline */
.tl-years, .tl-rows li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.tl-ys { display: grid; grid-template-columns: repeat(8, 1fr); font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-muted); }
.tl-rows { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.tl-name { font-size: 12px; }
.tl-track { position: relative; height: 14px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12.5%); }
.tl-bar { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.tl-0 { background: var(--accent); } .tl-1 { background: color-mix(in srgb, var(--accent) 62%, transparent); } .tl-2 { background: color-mix(in srgb, var(--accent) 36%, transparent); }
.tl-mark { position: absolute; top: 2px; width: 10px; height: 10px; margin-left: -5px; background: var(--warning); transform: rotate(45deg); }
/* massing */
.ms-plot { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 2; }
.ms-top { fill: var(--surface-300); } .ms-l { fill: var(--surface-200); } .ms-r { fill: color-mix(in srgb, var(--surface-300) 70%, var(--surface-100)); }
.ms-top, .ms-l, .ms-r { stroke: var(--line-strong); stroke-width: .6; }
.ms-top.ms-hl { fill: color-mix(in srgb, var(--accent) 45%, var(--surface-300)); }
/* value tree */
.tr-root { fill: color-mix(in srgb, var(--accent) 20%, transparent); stroke: var(--accent); }
.tr-b { fill: var(--surface-200); stroke: var(--line-strong); }
.tr-l { fill: none; stroke: var(--line-strong); }
.tr-ln { fill: none; stroke: var(--line-strong); }
.art-svg .tr-t { fill: var(--ink); font-size: 9px; }
.art-svg .tr-tl { font-size: 8px; }
/* tornado */
.tn { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.tn li { display: grid; grid-template-columns: 116px minmax(0, 1fr) 76px; align-items: center; gap: var(--space-3); }
.tn-name { font-size: 12px; }
.tn-track { display: grid; grid-template-columns: 1fr 1fr; height: 12px; }
.tn-lo { justify-self: end; background: color-mix(in srgb, var(--error) 70%, transparent); border-radius: 2px 0 0 2px; }
.tn-hi { justify-self: start; background: var(--accent); border-left: 1px solid var(--ink); border-radius: 0 2px 2px 0; }
.tn-v { font-size: 11.5px; color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ============================== WHO · CASE · CLOSE ============================== */
.uc-who .section-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; }
.uc-who { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.uc-who > div { max-width: 760px; }
.uc-roles { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0 var(--space-5); padding: 0; list-style: none; }
.uc-roles li { padding: 6px 14px; font-size: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-full); }
.uc-next { display: grid; gap: 6px; margin-bottom: var(--space-6);   /* sits above the demonstration box */ padding: var(--space-6); color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color var(--duration-hover) var(--ease-standard), background-color var(--duration-hover) var(--ease-standard); }
.uc-next:hover { border-color: var(--accent); background: var(--surface-100); }
.uc-next .mono-label { margin: 0; color: var(--ink-muted); }
.uc-next-name { font-family: var(--font-display); font-size: 30px; line-height: 36px; }
.uc-next-q { color: var(--accent-text); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1100px) {
  .uc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .outs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .uc-hero { display: block; min-height: 0; }
  .uc-hero-media { position: relative; width: 100%; height: 62vw; min-height: 300px; }
  .uc-hero-media::before { background: linear-gradient(0deg, var(--surface-000) 0%, transparent 40%); }
  .uc-hud { right: var(--space-4); bottom: var(--space-4); width: 220px; padding: 8px 10px; }
  .uc-hud-foot { display: none; }
  .uc-hero-text { max-width: none; padding: var(--space-6) 0 var(--space-8); }
  .uc-who { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 600px) {
  .uc-steps { grid-template-columns: minmax(0, 1fr); }
  .q-text { font-size: 20px; line-height: 27px; }
  .uc-questions li { grid-template-columns: 40px minmax(0, 1fr); }
  .out-fig { padding: var(--space-3); }
  .art { padding: var(--space-3); }
  .meters li { grid-template-columns: 88px minmax(0, 1fr) 92px; gap: var(--space-2); }
  .tn li { grid-template-columns: 92px minmax(0, 1fr) 70px; gap: var(--space-2); }
  .rec > div { grid-template-columns: 84px minmax(0, 1fr); }
  .uc-next-name { font-size: 24px; line-height: 30px; }
  .uc-hud { width: 158px; padding: 6px 8px; }
  .uc-hud-head .mono-label { font-size: 9px; white-space: nowrap; }
}

/* ============================== HUB: THE FIVE USE CASES ==============================
   Five photo panels side by side (site/use-cases/index.html), each with the photograph from its own page.
   Pointing to one widens it a little, marks it with the lime decision node and shows its link.
   Pinned to dark tokens (data-theme="carbon") because the text always sits on a photograph. */
.ucs-section { padding-top: var(--space-7); }
.ucs { display: flex; gap: 10px; height: clamp(460px, 68vh, 640px); margin: 0; padding: 0; list-style: none; background: none; }
.ucs > li { flex: 1 1 0; min-width: 0; transition: flex-grow .6s var(--ease-layer, ease); }
.ucs > li:hover, .ucs > li:focus-within { flex-grow: 1.55; }
.ucs-panel { position: relative; display: block; height: 100%; overflow: hidden; color: var(--ink); text-decoration: none;
  background: #0c0e11; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ucs-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform 1.2s var(--ease-layer, ease); }
.ucs-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 14, 17, .94) 0%, rgba(12, 14, 17, .72) 30%, rgba(12, 14, 17, .12) 62%, rgba(12, 14, 17, .28) 100%); }
.ucs-body { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: 8px; padding: 24px 22px; }   /* the text reads first, at the top of each photo */
.ucs-idx { color: var(--accent-text); }
.ucs-name { font-family: var(--font-display); font-size: clamp(22px, 1.9vw, 28px); line-height: 1.15; }
.ucs-q { font-size: 15px; line-height: 22px; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.ucs-link { max-height: 0; overflow: hidden; font-size: 14px; line-height: 22px; color: var(--accent-text); opacity: 0;
  transition: max-height .4s var(--ease-layer, ease), opacity .4s; }
.ucs-node { position: absolute; bottom: 22px; left: 22px; width: 12px; height: 12px; border-radius: 50%; opacity: 0;
  background: var(--decision-lime); box-shadow: 0 0 14px var(--decision-lime); transform: scale(.4); transition: opacity .3s, transform .3s; }
.ucs-panel:hover, .ucs-panel:focus-visible { border-color: var(--line-control); }
.ucs-panel:hover img, .ucs-panel:focus-visible img { transform: scale(1.04); }
.ucs-panel:hover .ucs-link, .ucs-panel:focus-visible .ucs-link { max-height: 24px; opacity: 1; }
.ucs-panel:hover .ucs-node, .ucs-panel:focus-visible .ucs-node { opacity: 1; transform: none; }
.ucs-panel:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 3px; }
@media (hover: none) { .ucs-link { max-height: 24px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ucs > li, .ucs-panel img, .ucs-link { transition: none; } .ucs-panel:hover img { transform: none; } }
.ucs-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: var(--space-5) 0 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.ucs-note .mono-label { color: var(--accent-text); }

/* Laptop: a little less room per panel */
@media (max-width: 1200px) { .ucs-body { padding: 20px 18px; } .ucs-q { font-size: 14px; line-height: 20px; } }

/* Tablet and phone: five stacked image bands */
@media (max-width: 960px) {
  .ucs { flex-direction: column; height: auto; gap: 10px; }
  .ucs > li, .ucs > li:hover, .ucs > li:focus-within { flex: none; }
  .ucs-panel { height: 240px; }
  .ucs-panel img { object-position: 50% 52%; } /* keeps each image's highlight in the band, beside the text */
  .ucs-shade { background: linear-gradient(90deg, rgba(12, 14, 17, .9) 0%, rgba(12, 14, 17, .66) 45%, rgba(12, 14, 17, .1) 100%); }
  .ucs-body { right: auto; max-width: 440px; top: 0; bottom: 0; align-content: start; }
  .ucs-node { left: auto; right: 22px; }
}
@media (max-width: 640px) {
  .ucs-panel { height: 220px; }
  .ucs-panel img { object-position: var(--pos-m, 50% 80%); } /* keeps each image's highlight low in the band, below the text */
  .ucs-shade { background: linear-gradient(180deg, rgba(12, 14, 17, .94) 0%, rgba(12, 14, 17, .6) 50%, rgba(12, 14, 17, .15) 100%); }
  .ucs-body { max-width: none; right: 0; bottom: auto; padding: 18px; }
  .ucs-name { font-size: 22px; }
}

/* Hub, desktop: the headline, intro and all five cards on one screen. The hero is tighter and the cards take the
   rest of the screen height, never shorter than 380px (so the photos still read) nor taller than 640px. */
@media (min-width: 961px) {
  .ucs-fit { display: flex; flex-direction: column; min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
  .ucs-hero { flex: none; padding: clamp(32px, 6vh, 72px) 0 clamp(20px, 3.5vh, 40px); }
  .ucs-hero .page-h1 { margin-bottom: var(--space-4); font-size: clamp(38px, min(5.4vw, 7.4vh), 72px); }
  .ucs-section { flex: 1 1 auto; display: flex; flex-direction: column; padding: 0 0 24px; border-top: 0; }
  .ucs-section > .container { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
  .ucs { flex: 1 1 auto; height: auto; min-height: 380px; max-height: 640px; }
}

/* Hub hover: a smooth widen. The fade-in rule (.js .reveal) was replacing the flex-grow transition, so panels snapped;
   both transitions are listed here, and the fade-in delay applies to the fade only. */
.js .ucs > li.reveal {
  transition: opacity var(--duration-layer) var(--ease-layer), transform var(--duration-layer) var(--ease-layer), flex-grow .65s cubic-bezier(.25, .8, .25, 1);
  transition-delay: calc(var(--d, 0) * 80ms), calc(var(--d, 0) * 80ms), 0s;
}
.ucs-panel img { will-change: transform; }
@media (min-width: 961px) {
  /* the text keeps the width of the narrowest panel, so titles never re-wrap while panels widen */
  .ucs { container-type: inline-size; }
  .ucs-body { right: auto; width: calc((100cqw - 40px) / 5.55); }
}
@media (prefers-reduced-motion: reduce) { .js .ucs > li.reveal { transition: none; } }
.ucs-link { white-space: nowrap; }   /* the hovered panel is wide enough; keeps the arrow on the line */

/* Use-case hero: the brand dot grid on the text side, fading out under the photograph */
.uc-hero-dots { z-index: 1; -webkit-mask-image: linear-gradient(90deg, black 0%, black 30%, transparent 56%); mask-image: linear-gradient(90deg, black 0%, black 30%, transparent 56%); }   /* over the photo's fade, so it dissolves instead of stopping at an edge */
.uc-h1:first-child, .uc-back[hidden] + .uc-h1 { margin-top: 0; }
@media (max-width: 900px) { .uc-hero-dots { top: auto; height: 60%; -webkit-mask-image: linear-gradient(to top, black, transparent 90%); mask-image: linear-gradient(to top, black, transparent 90%); } }

/* Use-case pages: the sections below the photograph hero on Paper */
.uc-paper { background: var(--surface-000); color: var(--ink); }