/* Use cases hub: /use-shelly-for/ (patterns/use-case-hub.php, assets/use-case-hub.js). */
.uch { --uch-ink: #0E1726; --uch-blue: #4594D1; --uch-deep: #0E4C92; --uch-muted: #5A6475; background: #fff; color: var(--uch-ink); }
.uch-wrap { width: min(1280px, 100% - 48px); margin-inline: auto; }
.uch-eyebrow { margin: 0 0 12px; font: 700 12px/1.2 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--uch-blue); }

/* Hero */
.uch-hero { position: relative; overflow: hidden; padding: 96px 0 72px; background: radial-gradient(120% 140% at 85% 0%, #1B4F8A 0%, #0B1A2E 55%, #070F1C 100%); color: #fff; }
.uch-hero__glow { position: absolute; inset: auto -10% -60% auto; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(69, 148, 209, .45), transparent 65%); filter: blur(10px); pointer-events: none; }
.uch-hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: end; }
.uch-hero .uch-eyebrow { color: #8CC4EC; }
.uch-hero__title { margin: 0 0 18px; font: 400 clamp(40px, 5.4vw, 76px)/1.02 'Manrope', sans-serif; letter-spacing: -.02em; max-width: 14ch; }
.uch-hero__lede { margin: 0; max-width: 56ch; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.uch-hero__help { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 20px 22px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(8px); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.uch-hero__help:hover { background: rgba(255, 255, 255, .12); border-color: rgba(140, 196, 236, .6); transform: translateY(-2px); }
.uch-hero__help b { display: block; font-size: 16px; }
.uch-hero__help small { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.uch-hero__help i { font-style: normal; font-size: 20px; color: #8CC4EC; }
.uch-hero__help-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(-135deg, var(--uch-blue), var(--uch-deep)); }
.uch-hero__help-icon svg { width: 24px; height: 24px; color: #fff; }

/* Chips: stay in reach while scrolling the mosaic */
.uch-chips { position: sticky; top: 0; z-index: 5; padding: 14px 0; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(14, 23, 38, .06); }
.uch-chips__row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.uch-chips__row::-webkit-scrollbar { display: none; }
.uch-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid rgba(14, 23, 38, .14); border-radius: 999px; background: #fff; font: 600 15px/1 'Manrope', sans-serif; color: var(--uch-ink); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.uch-chip svg { width: 18px; height: 18px; }
.uch-chip small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(14, 23, 38, .07); font-size: 12px; font-weight: 700; }
.uch-chip:hover { border-color: var(--uch-blue); }
.uch-chip.is-active { background: var(--uch-ink); border-color: var(--uch-ink); color: #fff; }
.uch-chip.is-active small { background: rgba(255, 255, 255, .18); }

/* Areas + mosaic */
.uch-area { padding: 56px 0 8px; }
.uch-area[hidden] { display: none; }
.uch-area__title { margin: 0 0 22px; font: 500 30px/1.2 'Manrope', sans-serif; letter-spacing: -.01em; }
.uch.is-filtered .uch-area__title { display: none; }
.uch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; grid-auto-flow: dense; gap: 18px; }
.uch-card { position: relative; overflow: hidden; display: block; border-radius: 22px; background: linear-gradient(-135deg, #1B4F8A, #0B1A2E); color: #fff; text-decoration: none; isolation: isolate; box-shadow: 0 1px 2px rgba(14, 23, 38, .06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.uch-card--big { grid-column: span 2; grid-row: span 2; }
/* Three in an area: one big tile with two beside it, or three across. */
.uch-grid--3big .uch-card:not(.uch-card--big) { grid-column: span 2; }
.uch-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 300px; }
.uch-card__img--old { object-position: 22% center; }
.uch-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.uch-card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(-180deg, rgba(7, 15, 28, 0) 30%, rgba(7, 15, 28, .55) 62%, rgba(7, 15, 28, .9) 100%); transition: opacity .35s; }
.uch-card__body { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; padding: 22px; }
.uch-card__tag { justify-self: start; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.uch-card__title { font: 600 21px/1.2 'Manrope', sans-serif; }
.uch-card--big .uch-card__title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -.01em; }
.uch-card__line { font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .82); max-width: 42ch; }
.uch-card__go { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 14px; font-weight: 700; color: #8CC4EC; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s, opacity .35s; }
.uch-card__go i { font-style: normal; transition: transform .25s; }
.uch-card:hover, .uch-card:focus-visible { transform: translateY(-4px); box-shadow: 0 24px 48px -20px rgba(14, 23, 38, .45); outline: none; }
.uch-card:hover .uch-card__img, .uch-card:focus-visible .uch-card__img { transform: scale(1.06); }
.uch-card:hover .uch-card__go, .uch-card:focus-visible .uch-card__go, .uch-card--big .uch-card__go { max-height: 24px; opacity: 1; }
.uch-card:hover .uch-card__go i { transform: translateX(-4px); }
.uch-card:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--uch-blue); }

/* Planner hand-off */
.uch-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin: 72px 0 112px; padding: 44px 48px; border-radius: 28px; background: linear-gradient(-120deg, #EAF3FB 0%, #F7FAFD 60%); border: 1px solid rgba(69, 148, 209, .25); }
.uch-cta h2 { margin: 0 0 8px; font: 500 clamp(26px, 3vw, 36px)/1.15 'Manrope', sans-serif; letter-spacing: -.01em; }
.uch-cta p { margin: 0; color: var(--uch-muted); font-size: 16px; line-height: 1.55; max-width: 52ch; }
.uch-cta .uch-eyebrow { color: var(--uch-deep); }
.uch-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.uch-btn { display: inline-flex; align-items: center; padding: 14px 24px; border-radius: 12px; background: linear-gradient(-90deg, var(--uch-blue), var(--uch-deep)); color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.uch-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(14, 76, 146, .6); }
.uch-btn--ghost { background: #fff; color: var(--uch-ink); border: 1px solid rgba(14, 23, 38, .18); }

@media (max-width: 1080px) {
	.uch-grid, .uch-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uch-grid--3 { grid-auto-rows: 250px; }
	.uch-grid--3 .uch-card:first-child { grid-column: span 2; }
	.uch-hero__inner { grid-template-columns: 1fr; gap: 28px; }
	.uch-hero__help { max-width: 420px; }
}
@media (max-width: 640px) {
	.uch-wrap { width: calc(100% - 32px); }
	.uch-hero { padding: 64px 0 44px; }
	.uch-hero__lede { font-size: 16px; }
	.uch-grid, .uch-grid--3 { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 14px; }
	.uch-grid .uch-card { grid-column: auto !important; }
	.uch-card--big { grid-column: auto; grid-row: span 1; }
	.uch-card--big .uch-card__title { font-size: 26px; }
	.uch-card__go { max-height: 24px; opacity: 1; }
	.uch-area { padding-top: 36px; }
	.uch-area__title { font-size: 24px; }
	.uch-cta { grid-template-columns: 1fr; padding: 28px 22px; margin: 48px 0 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.uch-card, .uch-card__img, .uch-card__go, .uch-hero__help, .uch-btn { transition: none; }
}