/* ============================================================
   HOMEPAGE "Real things people ask": drifting quote wall
   Two rows of requests drift in opposite directions. Each card
   pairs a plain request with the wp-admin route it replaces;
   hovering a card strikes that route out. CSS only.
   ============================================================ */

.section--say { overflow: hidden; }
.section--say .section__head { margin-bottom: 44px; }

.sayrows {
	display: grid; gap: 4px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* Vertical padding leaves room for the hover lift and shadow. */
.sayrow { overflow: hidden; padding: 10px 0 18px; }
.sayrow__track { display: flex; width: max-content; animation: say-drift 72s linear infinite; }
.sayrow--rev .sayrow__track { animation-direction: reverse; animation-duration: 84s; }
.sayrow:hover .sayrow__track { animation-play-state: paused; }
.sayrow__set { display: flex; gap: 18px; padding-right: 18px; }
@keyframes say-drift { to { transform: translateX(-50%); } }

/* ---------- Card ---------- */
.saycard {
	flex: none; width: 360px;
	display: flex; flex-direction: column;
	padding: 20px 22px 18px;
	border-radius: 22px;
	border: 1px solid var(--line);
	background: #fff;
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}
.saycard:hover {
	transform: translateY(-4px);
	border-color: transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
	box-shadow: var(--shadow);
}
.saycard__top { display: flex; align-items: center; gap: 8px; }
.saycard__tag {
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep);
}
.saycard__plan {
	margin-left: auto;
	padding: 3px 10px; border-radius: 999px;
	background: var(--bg-tint); color: var(--muted);
	font-size: 11.5px; font-weight: 600;
}
.saycard__quote {
	position: relative;
	min-height: 2.6em;
	margin: 14px 0 18px; padding-left: 30px;
	font-family: var(--font-display); font-size: 20px; font-weight: 600;
	line-height: 1.3; letter-spacing: -.015em; color: var(--ink);
}
.saycard__quote::before {
	content: "\201C";
	position: absolute; left: -2px; top: -9px;
	font-family: Georgia, serif; font-size: 54px; line-height: 1;
	background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.saycard__instead {
	margin-top: auto; padding-top: 13px;
	border-top: 1px dashed var(--line);
	font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; line-height: 1.7; color: var(--muted-2);
}
.saycard__k {
	display: block; margin-bottom: 2px;
	font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #a3abbd;
}
/* The strike is a gradient line drawn left to right across every wrapped line. */
.saycard__path {
	background: linear-gradient(90deg, #4c8dff, #7c3aed) no-repeat 0 58% / 0% 2px;
	transition: background-size .6s cubic-bezier(.6, 0, .2, 1), color .3s ease;
}
.saycard__path i { margin: 0 2px; font-style: normal; color: #b6bdcc; }
.saycard:hover .saycard__path { background-size: 100% 2px; color: #a3abbd; }
@media (hover: none) {
	.saycard__path { background-size: 100% 2px; color: #a3abbd; }
}

.say-foot { margin-top: 26px; text-align: center; font-size: 15px; color: var(--muted); }

@media (max-width: 700px) {
	.section--say .section__head { margin-bottom: 30px; }
	.saycard { width: 286px; padding: 18px 18px 16px; }
	.saycard__quote { font-size: 18px; }
	.sayrow__set { gap: 14px; padding-right: 14px; }
}

/* Reduced motion: still rows the visitor can scroll sideways. */
@media (prefers-reduced-motion: reduce) {
	.sayrow { overflow-x: auto; }
	.sayrow__track { animation: none; padding-inline: 24px; }
	.sayrow__set[aria-hidden] { display: none; }
	.saycard, .saycard__path { transition: none; }
}