/* ------------------------------------------------------------
   7. USECASE GRID — one pastel per card
   ------------------------------------------------------------ */
.ord-usecase-section {
	background: var(--paper);
}

.ord-usecase-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ord-usecase-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 26px;
	border: 2.5px solid var(--ink);
	border-radius: var(--ord-radius);
	box-shadow: 6px 6px 0 0 var(--ink);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ord-usecase-card:hover {
	transform: translate(-4px, -4px);
	box-shadow: 12px 12px 0 0 var(--ink);
}

.ord-usecase-card:active {
	transform: translate(2px, 2px);
	box-shadow: 3px 3px 0 0 var(--ink);
}

.ord-usecase--violet { background: #ede9fe; }
.ord-usecase--mint { background: #fff4cc; }
.ord-usecase--amber { background: #ffe9a8; }
.ord-usecase--coral { background: #e6dcff; }
.ord-usecase--sky { background: #f4efff; }
.ord-usecase--lime { background: #fdf8e3; }

.ord-usecase-emoji {
	width: 58px;
	height: 58px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.7rem;
	background: var(--paper);
	border: 2.5px solid var(--ink);
	border-radius: 14px;
	box-shadow: 4px 4px 0 0 var(--ink);
}

.ord-usecase-num {
	position: absolute;
	top: 22px;
	right: 24px;
	font-family: var(--ord-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	opacity: 0.35;
	font-variant-numeric: tabular-nums;
}

.ord-usecase-title {
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-top: 6px;
}

.ord-usecase-desc {
	font-size: 0.95rem;
	color: var(--muted);
	flex: 1;
}

.ord-usecase-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
	padding-bottom: 3px;
	align-self: flex-start;
	transition: gap 0.16s ease, color 0.16s ease;
}

.ord-usecase-card:hover .ord-usecase-link {
	gap: 12px;
}

.ord-usecase--rose { background: #f1ecff; }