/**
 * Anonymous quotes on the Heismic landing page (modules/heismic-quotes.php),
 * enqueued by inc/heismic-quotes.php.
 *
 * Pixel sizing is intentional: the theme root is 10px. Every selector starts
 * with #root .hq… so it outranks the "#root *" inheritance reset in
 * heismic-landing-additions.css.
 */

#root .hq {
	--hq-navy: #000823;
	--hq-teal: #28ccc1;
	--hq-muted: #64748b;
	--hq-ease: cubic-bezier(0.22, 1, 0.36, 1);
	position: relative;
	font-family: "Founders Grotesk", sans-serif;
}

#root .hq [hidden] { display: none !important; }
#root .hq-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
#root .hq h2 { text-wrap: balance; }
#root .hq blockquote { border: 0; font-style: normal; quotes: none; }
/* additions.css pins #root p to 1.5; quote paragraphs take their blockquote's leading instead. */
#root .hq blockquote p { line-height: inherit; }
#root .hq blockquote::before, #root .hq blockquote::after { content: none; }
#root .hq mark { background: none; color: inherit; }
#root .hq-aside { opacity: 0.55; }
#root .hq-open { margin-left: -0.42em; }
#root .hq button:focus-visible { outline: 2px solid var(--hq-teal); outline-offset: 4px; }
#root [aria-pressed="true"] > svg .hq-icon-pause, #root [aria-pressed="false"] > svg .hq-icon-play { display: none; }
#root [aria-pressed="true"] > svg .hq-icon-play { fill: currentColor; stroke: none; }

/* Same surface as the page's other dark sections: flat navy plus the shared .glow-dark corner glows.
   The hairline separates it from the comparison section directly above, as the demo section does. */
#root .hq-ticker {
	overflow: hidden; padding: 104px 0 88px; color: #fff;
	background: var(--hq-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#root .hq-ticker-head { max-width: 1120px; text-align: center; }
#root .hq-ticker-title { margin-top: 18px; color: #fff; font-size: clamp(44px, 7vw, 96px); font-weight: 600; line-height: 0.95; letter-spacing: -0.035em; }
#root .hq-ticker-title span { color: var(--hq-teal); }
#root .hq-intro { max-width: 600px; margin: 22px auto 0; color: #cbd5e1; font-size: 19px; line-height: 1.5; text-wrap: balance; }

#root .hq-ticker-rows {
	display: grid; gap: 16px; margin-top: 64px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
#root .hq-ticker-row { overflow: hidden; }
#root .hq-ticker-track { display: flex; width: max-content; animation: hqMarquee var(--hq-speed, 120s) linear infinite; }
#root .hq-ticker-row[data-dir="right"] .hq-ticker-track { animation-direction: reverse; }
#root .hq-ticker-row:hover .hq-ticker-track,
#root .hq-ticker-row:focus-within .hq-ticker-track,
#root .hq-ticker-row.is-held .hq-ticker-track,
#root .hq-ticker.is-paused .hq-ticker-track { animation-play-state: paused; }
/* The track holds --hq-copies identical groups; moving one group's width lands exactly on the next copy. */
@keyframes hqMarquee { to { transform: translateX(calc(-100% / var(--hq-copies, 4))); } }
#root .hq-ticker-group { display: flex; align-items: stretch; gap: 16px; padding-right: 16px; }

/* Fixed width so full quotes wrap to a readable measure; the row stretches every card to its tallest.
   The module's loop maths assumes this width plus the 16px gap. */
#root .hq-pill {
	display: flex; flex-direction: column; justify-content: space-between; gap: 20px; flex: 0 0 440px;
	padding: 28px 30px 24px;
	border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 30px 30px 30px 6px;
	/* Solid navy ~15% lighter than the section's #000823, so dark cards read as cards. */
	background: #14214d; color: #fff; text-align: left;
	transition: transform 300ms var(--hq-ease), border-color 200ms;
}
#root .hq-pill:hover { transform: translateY(-4px); border-color: var(--hq-teal); }
#root .hq-pill-quote { font-size: 19px; font-weight: 400; line-height: 1.42; }
#root .hq-pill-quote .hq-mark { color: var(--hq-teal); font-weight: 600; }
#root .hq-pill-meta { color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; }
#root .hq-pill--teal { border-color: var(--hq-teal); background: var(--hq-teal); color: var(--hq-navy); }
#root .hq-pill--teal .hq-mark { color: var(--hq-navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
#root .hq-pill--teal .hq-pill-meta { color: rgba(0, 8, 35, 0.6); }
#root .hq-pill--teal:hover { border-color: #fff; }
#root .hq-pill--white { border-color: #fff; background: #fff; color: var(--hq-navy); }
#root .hq-pill--white .hq-mark { color: var(--hq-navy); background: linear-gradient(transparent 55%, rgba(40, 204, 193, 0.45) 55%, rgba(40, 204, 193, 0.45) 92%, transparent 92%); }
#root .hq-pill--white .hq-pill-meta { color: var(--hq-muted); }

#root .hq-ticker-foot { display: flex; justify-content: center; margin-top: 40px; }
#root .hq-ticker-toggle {
	display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent; color: #cbd5e1;
	font-size: 13px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer;
	transition: color 180ms, border-color 180ms;
}
#root .hq-ticker-toggle svg { width: 16px; height: 16px; }
/* "#root *" resets text-transform on every element, so the label needs its own. */
#root .hq-ticker-toggle span { text-transform: uppercase; }
#root .hq-ticker-toggle:hover { border-color: var(--hq-teal); color: #fff; }

/* Phone layout: hidden from tablet up. */
#root .hq-swipe, #root .hq-hint--swipe { display: none; }

@media (max-width: 767px) {
	#root .hq-ticker { padding: 72px 0 56px; }
	#root .hq-intro { font-size: 17px; }
	#root .hq-ticker-rows, #root .hq-ticker-foot, #root .hq-hint--rows { display: none; }
	#root .hq-swipe { display: block; margin-top: 40px; }
	#root .hq-hint--swipe { display: inline; }
	/* One card at ~85% width with the next peeking in; padding keeps the first and last card aligned to the page gutter. */
	#root .hq-swipe-track {
		display: flex; gap: 12px; overflow-x: auto; padding: 0 24px 4px;
		scroll-padding-inline: 24px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
		scrollbar-width: none;
	}
	#root .hq-swipe-track::-webkit-scrollbar { display: none; }
	#root .hq-swipe-track:focus-visible { outline: 2px solid var(--hq-teal); outline-offset: -2px; }
	#root .hq-swipe-item { display: flex; flex: 0 0 85%; scroll-snap-align: start; }
	#root .hq-swipe .hq-pill { flex: 1 1 auto; gap: 18px; padding: 24px 22px 20px; border-radius: 24px 24px 24px 6px; }
	#root .hq-swipe .hq-pill:hover { transform: none; }
	#root .hq-pill-quote { font-size: 17px; }
	#root .hq-swipe-count { margin-top: 22px; color: #94a3b8; font-size: 14px; letter-spacing: 0.08em; text-align: center; font-variant-numeric: tabular-nums; }
	#root .hq-swipe-count strong { color: #fff; font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
	#root .hq *, #root .hq *::before, #root .hq *::after { transition: none !important; animation: none !important; }
	#root .hq-ticker-row { overflow-x: auto; scrollbar-width: none; }
}