/*
Theme Name: Marq Pulse
Theme URI: https://themarqcommunities.com
Author: The Marq
Author URI: https://themarqcommunities.com
Description: A full host theme for the Marq Pulse survey engine. Editorial survey hub with layered teal depth, Merriweather display type paired with Jost for interface labels, scroll-reveal motion, and rich hover states. Logo controls in the Customizer, bilingual EN/AR with RTL, fully responsive and accessible. Degrades gracefully without the plugin.
Version: 8.2.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marq-pulse-theme
Tags: one-column, custom-logo, custom-menu, translation-ready, rtl-language-support, full-width-template
*/

/* ============================================================
   1. TOKENS — The Marq identity
   ============================================================ */
:root {
	/* Brand */
	--mq-teal: #054053;
	--mq-teal-rgb: 5, 64, 83;
	--mq-cream: #DEDBD0;
	--mq-cream-rgb: 222, 219, 208;

	/* Depth ladder — built from the two brand colours only */
	--mq-abyss: #02222c;
	--mq-deep: #032b38;
	--mq-base: #043542;
	--mq-raised: #064a5f;
	--mq-lift: #07576f;

	/* Ink */
	--mq-ink: #fbf1dd;
	--mq-ink-rgb: 251, 241, 221;
	--mq-ink-2: rgba(251, 241, 221, 0.72);
	--mq-ink-3: rgba(251, 241, 221, 0.50);
	--mq-ink-4: rgba(251, 241, 221, 0.32);

	/* Lines */
	--mq-line: rgba(222, 219, 208, 0.14);
	--mq-line-2: rgba(222, 219, 208, 0.26);
	--mq-line-3: rgba(222, 219, 208, 0.42);

	/* Type */
	--mq-display: 'Merriweather', Georgia, 'Times New Roman', serif;
	--mq-ui: 'Jost', 'Merriweather', system-ui, sans-serif;

	/* Scale */
	--mq-step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
	--mq-step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
	--mq-step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
	--mq-step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--mq-step-3:  clamp(1.9rem, 1.5rem + 2vw, 3rem);
	--mq-step-4:  clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);

	/* Geometry */
	--mq-r-xs: 8px;
	--mq-r-sm: 12px;
	--mq-r: 18px;
	--mq-r-lg: 26px;
	--mq-pill: 999px;

	/* Motion */
	--mq-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--mq-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--mq-slow: 0.7s;

	/* Layout */
	--mq-wrap: 1140px;
	--mq-read: 720px;
	--mq-gut: clamp(18px, 4vw, 40px);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	font-family: var(--mq-display);
	font-weight: 300;
	font-size: var(--mq-step-0);
	line-height: 1.75;
	color: var(--mq-ink);
	background: var(--mq-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-wrap: break-word;
}

/* The page sits on a slow vertical gradient plus two soft brand glows,
   so large flat areas never read as dead space. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(70% 55% at 12% 0%, rgba(var(--mq-cream-rgb), 0.07) 0%, transparent 60%),
		radial-gradient(60% 50% at 92% 18%, rgba(7, 87, 111, 0.55) 0%, transparent 65%),
		linear-gradient(180deg, var(--mq-deep) 0%, var(--mq-base) 45%, var(--mq-abyss) 100%);
}

/* A very fine grain stops the flat colour from banding on large screens. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--mq-cream); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--mq-ink); }
/* Controls manage their own colours — the global rule must not reach them. */
a.mq-btn:hover, a.mq-card-link:hover, a.mq-scroll-cue:hover, .mq-lang a:hover, .mq-nav a:hover { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--mq-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
h1 { font-size: var(--mq-step-4); }
h2 { font-size: var(--mq-step-3); }
h3 { font-size: var(--mq-step-1); }
p { text-wrap: pretty; }

::selection { background: var(--mq-cream); color: var(--mq-teal); }

:focus-visible {
	outline: 2px solid var(--mq-cream);
	outline-offset: 3px;
	border-radius: 6px;
}

.mq-wrap { width: 100%; max-width: var(--mq-wrap); margin-inline: auto; padding-inline: var(--mq-gut); }
.mq-read { max-width: var(--mq-read); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
/* Hidden by clipping, never by pushing it off-screen. A "left: -9999px"
   link is harmless in English, but in Arabic the page scrolls from the
   right, so anything past the left edge becomes reachable — it made the
   Arabic homepage ~10,000px wide and phones zoomed out to fit it. */
.skip-link {
	position: absolute; top: 0; inset-inline-start: 0; z-index: 2000;
	width: 1px; height: 1px; overflow: hidden; white-space: nowrap;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	background: var(--mq-cream); color: var(--mq-teal);
	font-family: var(--mq-ui);
	font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
	border-end-end-radius: var(--mq-r-sm);
}
.skip-link:focus {
	width: auto; height: auto; overflow: visible;
	clip: auto; clip-path: none;
	padding: 14px 22px;
}

/* Shared label style — this is what makes the UI feel designed. */
.mq-label {
	font-family: var(--mq-ui);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* ============================================================
   3. HEADER
   ============================================================ */
.mq-header {
	position: sticky; top: 0; z-index: 900;
	padding-top: env(safe-area-inset-top, 0px);
	transition: background var(--mq-slow) var(--mq-ease), box-shadow var(--mq-slow) var(--mq-ease), border-color var(--mq-slow) var(--mq-ease);
	border-bottom: 1px solid transparent;
}
.mq-header.is-stuck {
	background: rgba(3, 43, 56, 0.82);
	backdrop-filter: blur(16px) saturate(1.2);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	border-bottom-color: var(--mq-line);
	box-shadow: 0 20px 50px -34px rgba(0, 0, 0, 0.95);
}
.mq-header-inner { display: flex; align-items: center; gap: 22px; min-height: 80px; }

.mq-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mq-ink); }
.mq-brand-text {
	font-family: var(--mq-display);
	font-size: 17px; font-weight: 700; line-height: 1.2;
}
.mq-brand-tag {
	display: block;
	font-family: var(--mq-ui);
	font-size: 10px; font-weight: 400;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-4); margin-top: 3px;
}

.mq-nav { margin-inline-start: auto; }
.mq-nav ul { list-style: none; display: flex; gap: 30px; margin: 0; padding: 0; }
.mq-nav a {
	font-family: var(--mq-ui);
	font-size: 14px; font-weight: 400;
	color: var(--mq-ink-2); text-decoration: none;
	padding: 8px 0; position: relative; display: block;
	transition: color 0.3s var(--mq-ease);
}
.mq-nav a::after {
	content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 1px;
	background: var(--mq-cream);
	transform: scaleX(0); transform-origin: inline-start;
	transition: transform 0.4s var(--mq-ease);
}
.mq-nav a:hover, .mq-nav .current-menu-item > a { color: var(--mq-ink); }
.mq-nav a:hover::after, .mq-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Language pill */
.mq-lang {
	margin-inline-start: auto;
	display: inline-flex; align-items: center; gap: 2px;
	border: 1px solid var(--mq-line-2);
	border-radius: var(--mq-pill);
	padding: 3px;
	font-family: var(--mq-ui);
}
.mq-lang a {
	font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
	color: var(--mq-ink-3); text-decoration: none;
	padding: 5px 12px; border-radius: var(--mq-pill);
	transition: background 0.3s var(--mq-ease), color 0.3s var(--mq-ease);
	min-width: 38px; text-align: center;
}
.mq-lang a.is-active { background: var(--mq-cream); color: var(--mq-teal); }
.mq-lang a:not(.is-active):hover { color: var(--mq-ink); background: rgba(var(--mq-cream-rgb), 0.1); }
.mq-lang span { display: none; }

.mq-burger {
	display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: transparent;
	border: 1px solid var(--mq-line-2);
	border-radius: var(--mq-r-sm);
	color: var(--mq-ink); cursor: pointer;
	transition: border-color 0.3s var(--mq-ease), background 0.3s var(--mq-ease);
}
.mq-burger:hover { border-color: var(--mq-line-3); background: rgba(var(--mq-cream-rgb), 0.06); }
.mq-burger span { position: relative; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; transition: background 0.2s; }
.mq-burger span::before, .mq-burger span::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: transform 0.4s var(--mq-spring);
}
.mq-burger span::before { top: -6px; }
.mq-burger span::after { top: 6px; }
.mq-burger[aria-expanded="true"] span { background: transparent; }
.mq-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.mq-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   4. LOGO
   ============================================================ */
.mq-logo { width: auto; object-fit: contain; }
.mq-logo--header { max-width: 210px; }
.mq-logo--hero { margin-inline: auto; max-width: min(340px, 74vw); }
.mq-logo--footer { opacity: 0.6; max-width: 140px; transition: opacity 0.3s var(--mq-ease); }
.mq-footer:hover .mq-logo--footer { opacity: 0.9; }
.mq-hero-logo { display: flex; justify-content: center; margin-bottom: 30px; }

/* ============================================================
   5. HERO — pulse motif
   ============================================================ */
.mq-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(64px, 11vw, 140px) clamp(150px, 17vw, 210px);
	text-align: center;
	isolation: isolate;
}
.mq-hero-inner { position: relative; z-index: 2; }

/* --- concentric rings radiating from behind the headline --- */
.mq-hero-deco {
	position: absolute; inset: 0; z-index: 0;
	display: grid; place-items: center;
	pointer-events: none;
}
.mq-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(var(--mq-cream-rgb), 0.10);
	aspect-ratio: 1;
	animation: mqRing 7s var(--mq-ease) infinite;
}
.mq-ring--1 { width: min(420px, 62vw); animation-delay: 0s; }
.mq-ring--2 { width: min(660px, 92vw); animation-delay: 1.6s; border-color: rgba(var(--mq-cream-rgb), 0.07); }
.mq-ring--3 { width: min(920px, 124vw); animation-delay: 3.2s; border-color: rgba(var(--mq-cream-rgb), 0.05); }
@keyframes mqRing {
	0%   { transform: scale(0.82); opacity: 0; }
	18%  { opacity: 1; }
	100% { transform: scale(1.22); opacity: 0; }
}

/* --- headline --- */
.mq-hero-title { margin-bottom: 24px; }
.mq-hero-line1 { display: block; }
.mq-hero-title .light {
	display: block;
	font-weight: 300; font-style: italic;
	background: linear-gradient(100deg, var(--mq-cream) 0%, rgba(var(--mq-cream-rgb), 0.5) 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

/* Rotating word — reserves its own line so nothing jumps. */
.mq-rotator { display: block; position: relative; min-height: 1.18em; }
.mq-rotator-word { display: block; }
.mq-rotator-word.is-out { animation: mqWordOut 0.4s var(--mq-ease) forwards; }
.mq-rotator-word.is-in  { animation: mqWordIn 0.5s var(--mq-spring) forwards; }
@keyframes mqWordOut { to { opacity: 0; transform: translateY(-16px); filter: blur(4px); } }
@keyframes mqWordIn  { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.mq-hero-lede { max-width: 56ch; margin-inline: auto; color: var(--mq-ink-2); }
.mq-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

/* --- trust strip: a ruled inline list --- */
.mq-trust {
	list-style: none; padding: 0;
	margin: 36px auto 0;
	width: fit-content; max-width: 100%;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
	gap: 0;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-pill);
	overflow: hidden;
	background: rgba(var(--mq-cream-rgb), 0.03);
}
.mq-trust li {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 24px;
	background: none; border: 0; border-radius: 0;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 400;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mq-ink-2);
	transition: color 0.35s var(--mq-ease);
}
.mq-trust li + li { border-inline-start: 1px solid var(--mq-line); }
.mq-trust li:hover { color: var(--mq-ink); transform: none; background: none; }
.mq-trust svg { width: 14px; height: 14px; color: var(--mq-ink-4); flex: none; }
.mq-trust li:hover svg { color: var(--mq-cream); }

/* --- live counter pill --- */
/* On its own line — never inline beside the trust strip. */
.mq-hero-meta {
	display: flex; align-items: center; justify-content: center; gap: 11px;
	width: fit-content; max-width: 100%;
	margin: 24px auto 0;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 400;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-3);
	border: 0; background: none; padding: 0;
}
.mq-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--mq-cream); flex: none;
	animation: mqPulse 2.6s ease-in-out infinite;
}
@keyframes mqPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(var(--mq-cream-rgb), 0.45); }
	70%      { box-shadow: 0 0 0 10px rgba(var(--mq-cream-rgb), 0); }
}

/* --- the pulse line across the base of the hero --- */
.mq-pulse-line {
	position: absolute; inset-inline: 0; bottom: 62px; z-index: 0;
	color: rgba(var(--mq-cream-rgb), 0.34);
	pointer-events: none;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
/* A fixed height with a meet ratio keeps the trace a trace — stretching it
   to the viewport turned the spikes into triangles on wide screens. */
.mq-pulse-line svg {
	display: block;
	width: 100%;
	height: 64px;
	vector-effect: non-scaling-stroke;
}
/* Faint constant trace so the waveform is always readable. */
.mq-pulse-path {
	stroke: currentColor;
	opacity: 0.28;
	vector-effect: non-scaling-stroke;
}
/* A bright segment that travels the whole line, then reverses — forever.
   dasharray = [lit segment, gap]; animating the offset moves the lit part
   along the path. alternate direction gives the there-and-back sweep. */
.mq-pulse-runner {
	stroke: var(--mq-cream);
	/* lit segment 150, gap 1600 (> path length ~1519 so only one shows) */
	stroke-dasharray: 150 1600;
	stroke-dashoffset: 150;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 6px rgba(var(--mq-cream-rgb), 0.55));
	animation: mqRun 4.8s ease-in-out infinite alternate;
}
@keyframes mqRun {
	from { stroke-dashoffset: 150; }     /* lit tail just off the left edge */
	to   { stroke-dashoffset: -1519; }   /* lit head just off the right edge */
}

/* --- scroll cue --- */
.mq-scroll-cue {
	position: absolute; bottom: 12px; left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: grid; place-items: center;
	width: 44px; height: 44px;
	color: var(--mq-ink-3);
	transition: color 0.3s var(--mq-ease);
}
.mq-scroll-cue:hover { color: var(--mq-cream); }
.mq-scroll-mouse {
	width: 21px; height: 33px;
	border: 1px solid currentColor;
	border-radius: var(--mq-pill);
	display: grid; justify-items: center;
	padding-top: 6px;
}
.mq-scroll-mouse span {
	width: 2px; height: 6px; border-radius: 2px;
	background: currentColor;
	animation: mqWheel 1.9s var(--mq-ease) infinite;
}
@keyframes mqWheel {
	0%   { opacity: 0; transform: translateY(-3px); }
	35%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(9px); }
}

/* ============================================================
   6. BUTTONS — squared and typographic, not pills
   ============================================================ */
.mq-btn {
	position: relative;
	display: inline-flex; align-items: center; gap: 14px;
	min-height: 54px; padding: 16px 30px;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	text-decoration: none; cursor: pointer;
	color: var(--mq-teal);
	background: var(--mq-cream);
	border: 0;
	border-radius: var(--mq-r-sm);
	transition: background 0.35s var(--mq-ease), color 0.35s var(--mq-ease), transform 0.35s var(--mq-ease);
}
/* A rule slides out of the right edge instead of the button floating. */
.mq-btn svg { transition: transform 0.45s var(--mq-ease); }
.mq-btn:hover,
a.mq-btn:hover { background: var(--mq-ink); color: var(--mq-teal); transform: translateY(-2px); }
.mq-btn:hover svg { transform: translateX(6px); }
.mq-btn:active,
a.mq-btn:active { background: rgba(var(--mq-cream-rgb), 0.85); color: var(--mq-teal); }
.mq-btn:focus-visible { color: var(--mq-teal); }
html[dir="rtl"] .mq-btn:hover svg { transform: translateX(-6px) scaleX(-1); }
html[dir="rtl"] .mq-btn svg { transform: scaleX(-1); }

/* Secondary: a ruled text link, no box at all. */
.mq-btn--ghost {
	background: transparent;
	color: var(--mq-ink-2);
	padding: 16px 26px;
	border-radius: var(--mq-r-sm);
	border: 1px solid var(--mq-line-2);
	min-height: 54px;
}
.mq-btn--ghost:hover,
a.mq-btn--ghost:hover {
	background: rgba(var(--mq-cream-rgb), 0.08);
	color: var(--mq-cream);
	border-color: var(--mq-cream);
	transform: translateY(-2px);
}
.mq-btn--ghost:active,
a.mq-btn--ghost:active { color: var(--mq-cream); }

.mq-btn--sm { min-height: 46px; padding: 13px 22px; font-size: 10px; }
.mq-btn--ghost.mq-btn--sm { padding: 13px 20px; }

/* ============================================================
   7. SECTIONS
   ============================================================ */
.mq-section { position: relative; padding-block: clamp(46px, 7vw, 84px); }
.mq-section--alt::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: rgba(var(--mq-cream-rgb), 0.028);
	border-block: 1px solid var(--mq-line);
}
[id]:focus { outline: none; }

.mq-section-head { margin-bottom: 40px; }
.mq-section-head h2 { margin-bottom: 10px; }
.mq-section-head p { color: var(--mq-ink-2); max-width: 54ch; }
.mq-section-head--center { text-align: center; }
.mq-section-head--center p { margin-inline: auto; }

/* Small ruled flourish under centred headings. */
.mq-section-head--center h2::after {
	content: ""; display: block;
	width: 52px; height: 1px; margin: 18px auto 0;
	background: linear-gradient(90deg, transparent, var(--mq-line-3), transparent);
}

/* ============================================================
   8. SURVEY LIST
   ============================================================ */
.mq-grid { display: flex; flex-direction: column; gap: 14px; }

.mq-card {
	position: relative;
	display: grid;
	/* index | content | action rail — every child is placed explicitly
	   so nothing can ever auto-flow into an empty cell. */
	grid-template-columns: 54px minmax(0, 1fr) minmax(150px, auto);
	grid-template-areas: "index body rail";
	align-items: center;
	gap: 0 26px;
	padding: 26px 28px;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r);
	background: rgba(var(--mq-cream-rgb), 0.028);
	transition: border-color 0.4s var(--mq-ease), background 0.4s var(--mq-ease), transform 0.4s var(--mq-ease);
}
.mq-card::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: var(--mq-r);
	background: rgba(var(--mq-cream-rgb), 0.045);
	opacity: 0; z-index: 0;
	transition: opacity 0.4s var(--mq-ease);
}
/* A cream rail grows down the leading edge on hover. */
.mq-card::after {
	content: "";
	position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px;
	width: 2px; border-radius: 2px;
	background: var(--mq-cream);
	transform: scaleY(0); transform-origin: center;
	transition: transform 0.45s var(--mq-ease);
	z-index: 1;
}
.mq-card:hover, .mq-card:focus-within {
	border-color: var(--mq-line-2);
	background: rgba(var(--mq-cream-rgb), 0.055);
	transform: translateY(-2px);
}
.mq-card:hover::before, .mq-card:focus-within::before { opacity: 1; }
.mq-card:hover::after, .mq-card:focus-within::after { transform: scaleY(1); }

/* Index */
.mq-card-index {
	grid-area: index;
	align-self: center;
	font-family: var(--mq-ui);
	font-size: 12px; font-weight: 400;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	color: var(--mq-ink-4);
	z-index: 2;
	transition: color 0.4s var(--mq-ease);
}
.mq-card:hover .mq-card-index { color: var(--mq-cream); }

/* Content */
.mq-card-body {
	grid-area: body;
	display: flex; flex-direction: column; gap: 7px;
	min-width: 0; z-index: 2;
}
.mq-card h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.75rem);
	font-weight: 400; line-height: 1.2;
	letter-spacing: -0.01em;
}
.mq-card-sub { font-style: italic; color: var(--mq-ink-3); font-size: 0.95rem; }

.mq-card-facts {
	list-style: none; padding: 0; margin-top: 5px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 0;
}
.mq-card-facts li {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--mq-ui);
	font-size: 12.5px; font-weight: 300; letter-spacing: 0.02em;
	color: var(--mq-ink-3);
	padding-inline: 15px;
	border-inline-start: 1px solid var(--mq-line-2);
}
.mq-card-facts li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.mq-card-facts svg { width: 14px; height: 14px; color: var(--mq-ink-4); flex: none; }

/* Action rail — status above, button below, both right-aligned */
.mq-card-foot {
	grid-area: rail;
	display: flex; flex-direction: column;
	align-items: flex-end; justify-content: center;
	gap: 14px;
	border: 0; padding: 0;
	z-index: 2;
}
.mq-badge {
	font-family: var(--mq-ui);
	font-size: 10px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	padding: 0; border: 0; border-radius: 0;
	color: var(--mq-ink-4);
	display: inline-flex; align-items: center; gap: 8px;
	white-space: nowrap;
}
.mq-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mq-badge--open { color: var(--mq-cream); }
.mq-badge--closed { color: var(--mq-ink-4); }

/* The action reads as a real button, and fills on hover. */
.mq-card-link {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 46px; padding: 12px 24px;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-2); text-decoration: none;
	border: 1px solid var(--mq-line-2);
	border-radius: var(--mq-pill);
	white-space: nowrap;
	transition: color 0.35s var(--mq-ease), border-color 0.35s var(--mq-ease),
	            background 0.35s var(--mq-ease);
}
.mq-card:hover .mq-card-link,
.mq-card:focus-within .mq-card-link,
a.mq-card-link:hover {
	background: var(--mq-cream);
	border-color: var(--mq-cream);
	color: var(--mq-teal);
}
.mq-card-link svg { transition: transform 0.4s var(--mq-ease); }
.mq-card:hover .mq-card-link svg { transform: translateX(4px); }
html[dir="rtl"] .mq-card-link svg { transform: scaleX(-1); }
html[dir="rtl"] .mq-card:hover .mq-card-link svg { transform: translateX(-4px) scaleX(-1); }

/* Whole-row click target */
.mq-card-cover {
	position: absolute; inset: 0; z-index: 4;
	border-radius: var(--mq-r);
}
.mq-card > *:not(.mq-card-cover) { pointer-events: none; }
.mq-card a:not(.mq-card-cover) { pointer-events: auto; }

/* Draft */
.mq-card.is-draft { border-style: dashed; }
.mq-ribbon {
	align-self: flex-start;
	font-family: var(--mq-ui);
	font-size: 10px; font-weight: 500;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mq-ink-4);
	padding: 0 0 4px;
	background: none; border: 0; border-radius: 0;
}

/* ============================================================
   9. NOTICE / EMPTY STATES
   ============================================================ */
.mq-notice {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	text-align: start;
	padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 44px);
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-lg);
	background: rgba(var(--mq-cream-rgb), 0.03);
	color: var(--mq-ink-2);
}
.mq-notice h2 { font-size: var(--mq-step-2); margin-top: 8px; }
.mq-notice p { max-width: 46ch; }
.mq-notice-icon {
	width: 26px; height: 26px; display: block;
	border: 0; border-radius: 0; background: none;
	color: var(--mq-cream); margin-bottom: 8px;
}
.mq-notice-icon svg { width: 26px; height: 26px; }
.mq-notice .mq-btn { margin-top: 10px; }

/* ============================================================
   10. STEPS
   ============================================================ */
.mq-steps {
	position: relative;
	list-style: none; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	align-items: stretch;
}

.mq-step {
	position: relative;
	display: flex; flex-direction: column;
	padding: 44px 28px 30px;
	margin-top: 26px;                      /* room for the numeral to sit on the edge */
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r);
	background: rgba(var(--mq-cream-rgb), 0.035);
	transition: border-color 0.4s var(--mq-ease), background 0.4s var(--mq-ease), transform 0.4s var(--mq-ease);
}
.mq-step:hover {
	border-color: var(--mq-line-2);
	background: rgba(var(--mq-cream-rgb), 0.065);
	transform: translateY(-3px);
}

/* The numeral straddles the card's top edge, which reads as a marker on a
   sequence without needing a rule drawn across the whole row. */
.mq-step-num {
	position: absolute;
	top: -26px; inset-inline-start: 28px;
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border: 1px solid var(--mq-line-2);
	border-radius: 50%;
	background: var(--mq-base);
	font-family: var(--mq-ui);
	font-size: 13px; font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--mq-cream);
	-webkit-text-stroke: 0;
	transition: background 0.4s var(--mq-ease), color 0.4s var(--mq-ease),
	            border-color 0.4s var(--mq-ease), transform 0.4s var(--mq-spring);
}
.mq-step:hover .mq-step-num {
	background: var(--mq-cream);
	border-color: var(--mq-cream);
	color: var(--mq-teal);
	transform: scale(1.06);
}

/* Connector: spans only the gap to the NEXT card, so nothing dangles past
   the last step. Hidden when the row wraps to a single column. */
.mq-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0; inset-inline-start: 100%;
	width: 20px; height: 1px;
	background: repeating-linear-gradient(90deg,
		var(--mq-line-2) 0 4px, transparent 4px 9px);
}

.mq-step h3 { font-size: var(--mq-step-1); font-weight: 400; margin-bottom: 10px; }
.mq-step p { color: var(--mq-ink-2); font-size: 0.94rem; margin: 0; }

/* Single column: numerals return inline, connectors off. */
@media (max-width: 860px) {
	.mq-steps { grid-template-columns: 1fr; gap: 14px; }
	.mq-step {
		padding: 24px 20px 22px 20px;
		margin-top: 0;
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr);
		grid-template-areas: "num title" "num body";
		column-gap: 16px; row-gap: 6px;
		align-items: start;
	}
	.mq-step-num {
		position: static;
		grid-area: num;
		width: 46px; height: 46px;
	}
	.mq-step h3 { grid-area: title; margin-bottom: 2px; }
	.mq-step p { grid-area: body; }
	.mq-step:not(:last-child)::after { display: none; }
	.mq-step:hover { transform: none; }
}

/* ============================================================
   11. PRIVACY PANEL
   ============================================================ */
.mq-privacy {
	position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr);
	gap: 28px; align-items: start;
	padding: clamp(32px, 5vw, 52px) clamp(26px, 4vw, 46px);
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-lg);
	background: rgba(var(--mq-cream-rgb), 0.03);
}
.mq-privacy-icon {
	flex: none; width: 34px; height: 34px;
	display: block; border: 0; border-radius: 0;
	background: none; color: var(--mq-cream);
}
.mq-privacy-icon svg { width: 34px; height: 34px; }
.mq-privacy h2 { font-size: var(--mq-step-2); font-weight: 400; margin-bottom: 12px; }
.mq-privacy p { color: var(--mq-ink-2); max-width: 62ch; }

/* ============================================================
   12. FAQ — two column
   ============================================================ */
.mq-section--faq { padding-block: clamp(52px, 8vw, 100px); }

.mq-faq-layout {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
}

/* Left column stays with the reader while they work down the answers. */
.mq-faq-aside { position: sticky; top: 110px; }
.mq-faq-title { font-size: var(--mq-step-3); margin-bottom: 12px; }
.mq-faq-title::after {
	content: ""; display: block;
	width: 48px; height: 1px; margin-top: 18px;
	background: linear-gradient(90deg, var(--mq-line-3), transparent);
}
.mq-faq-sub { color: var(--mq-ink-2); margin-top: 16px; max-width: 34ch; }

/* Help box */
.mq-help {
	margin-top: 36px;
	padding: 28px 24px;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r);
	background: rgba(var(--mq-cream-rgb), 0.03);
}
.mq-help-icon {
	display: block; width: 22px; height: 22px; margin-bottom: 18px;
	border: 0; border-radius: 0;
	color: var(--mq-cream);
}
.mq-help-icon svg { width: 21px; height: 21px; }
.mq-help h3 { font-size: var(--mq-step-1); font-weight: 400; margin-bottom: 8px; }
.mq-help p { color: var(--mq-ink-2); font-size: 0.92rem; margin-bottom: 18px; }
.mq-btn--sm { min-height: 44px; padding: 12px 22px; font-size: 11px; }

/* Accordion */
.mq-faq { display: flex; flex-direction: column; gap: 10px; }
.mq-faq-item {
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-sm);
	background: rgba(var(--mq-cream-rgb), 0.03);
	overflow: hidden;
	transition: border-color 0.35s var(--mq-ease), background 0.35s var(--mq-ease);
}
.mq-faq-item:hover, .mq-faq-item[open] {
	border-color: var(--mq-line-2);
	background: rgba(var(--mq-cream-rgb), 0.055);
}
.mq-faq-item summary { transition: color 0.3s var(--mq-ease); }
.mq-faq-item:hover .mq-faq-q { color: var(--mq-cream); }
.mq-faq-item[open] .mq-faq-q { color: var(--mq-cream); }

.mq-faq-item summary {
	position: relative; cursor: pointer; list-style: none;
	display: flex; align-items: center; gap: 20px;
	min-height: 64px;
	padding: 20px 22px;
}
.mq-faq-item summary::-webkit-details-marker { display: none; }
.mq-faq-q { flex: 1; font-size: 1.02rem; font-weight: 400; line-height: 1.5; color: var(--mq-ink); transition: color 0.3s var(--mq-ease); }

.mq-faq-mark { position: relative; flex: none; width: 14px; height: 14px; }
.mq-faq-mark::before, .mq-faq-mark::after {
	content: ""; position: absolute; background: var(--mq-cream); border-radius: 2px;
	transition: transform 0.4s var(--mq-spring), opacity 0.3s var(--mq-ease);
}
.mq-faq-mark::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.mq-faq-mark::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.mq-faq-item[open] .mq-faq-mark::after { transform: rotate(90deg); opacity: 0; }

.mq-faq-body { padding: 0 52px 24px 22px; color: var(--mq-ink-2); font-size: 0.96rem; }
.mq-faq-item[open] .mq-faq-body { animation: mqFaq 0.45s var(--mq-ease); }
@keyframes mqFaq { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
	.mq-faq-layout { grid-template-columns: 1fr; gap: 28px; }
	.mq-faq-aside { position: static; }
	.mq-faq-sub { max-width: none; }
	.mq-help { margin-top: 24px; }
}
@media (max-width: 620px) {
	.mq-faq-item summary { padding: 16px 18px; gap: 14px; min-height: 56px; }
	.mq-faq-q { font-size: 0.95rem; }
	.mq-faq-body { padding: 0 18px 18px; }
	.mq-help { padding: 22px 18px; }
}

/* ============================================================
   13. CONTENT
   ============================================================ */
.mq-main { flex: 1 0 auto; }
.mq-entry { padding-block: clamp(44px, 7vw, 84px); }
.mq-entry-head { margin-bottom: 34px; }
.mq-entry-meta {
	font-family: var(--mq-ui);
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mq-ink-4); margin-bottom: 12px;
}
.mq-content > * + * { margin-top: 1.15em; }
.mq-content h2, .mq-content h3 { margin-top: 1.9em; }
.mq-content ul, .mq-content ol { padding-inline-start: 1.35em; }
.mq-content li + li { margin-top: 0.5em; }
.mq-content li::marker { color: var(--mq-cream); }
.mq-content blockquote {
	padding: 6px 0 6px 24px;
	border-inline-start: 2px solid var(--mq-cream);
	font-style: italic; color: var(--mq-ink-2);
}
.mq-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.88em; padding: 3px 7px; border-radius: 6px;
	background: rgba(var(--mq-cream-rgb), 0.1);
}
.mq-content pre { padding: 20px; border-radius: var(--mq-r-sm); overflow-x: auto; background: rgba(0,0,0,0.25); }
.mq-content img { border-radius: var(--mq-r-sm); }
.mq-content table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.mq-content th, .mq-content td { padding: 12px 14px; border: 1px solid var(--mq-line); text-align: start; }
.mq-content th { background: rgba(var(--mq-cream-rgb), 0.06); font-weight: 600; }
.mq-table-scroll { overflow-x: auto; }
.wp-caption-text, .wp-element-caption { font-size: 0.82rem; color: var(--mq-ink-4); text-align: center; margin-top: 10px; }
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { margin-inline: auto; }

/* A section that ends the page sits flush against the footer. */
.mq-section:last-of-type { padding-bottom: clamp(56px, 8vw, 96px); }

/* ============================================================
   14. FOOTER
   ============================================================ */
.mq-footer {
	flex: none; margin-top: 0;
	border-top: 1px solid var(--mq-line);
	padding-block: clamp(44px, 6vw, 68px) calc(28px + env(safe-area-inset-bottom, 0px));
	font-family: var(--mq-ui);
	font-size: 14px; font-weight: 300;
	color: var(--mq-ink-3);
	background: rgba(2, 34, 44, 0.55);
}

.mq-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(32px, 4vw, 48px);
}

/* Brand column */
.mq-footer-brand { max-width: 34ch; }
.mq-logo--footer { opacity: 0.75; margin-bottom: 18px; transition: opacity 0.3s var(--mq-ease); }
.mq-footer:hover .mq-logo--footer { opacity: 1; }
.mq-footer-name {
	display: block; margin-bottom: 16px;
	font-family: var(--mq-display);
	font-size: 19px; font-weight: 700; color: var(--mq-ink);
}
.mq-footer-blurb { color: var(--mq-ink-3); font-size: 13.5px; line-height: 1.7; margin-bottom: 18px; }
.mq-footer-mail {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 10px 16px;
	border: 1px solid var(--mq-line-2);
	border-radius: var(--mq-pill);
	color: var(--mq-ink-2); text-decoration: none;
	font-size: 12.5px; letter-spacing: 0.02em;
	transition: color 0.3s var(--mq-ease), border-color 0.3s var(--mq-ease), background 0.3s var(--mq-ease);
}
.mq-footer-mail svg { width: 15px; height: 15px; color: var(--mq-cream); }
.mq-footer-mail:hover {
	color: var(--mq-cream); border-color: var(--mq-cream);
	background: rgba(var(--mq-cream-rgb), 0.07);
}

/* Link columns */
.mq-footer-head {
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-4);
	margin-bottom: 16px;
}
.mq-footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mq-footer-col a {
	color: var(--mq-ink-2); text-decoration: none;
	font-size: 13.5px;
	display: inline-block;
	transition: color 0.3s var(--mq-ease), transform 0.3s var(--mq-ease);
}
.mq-footer-col a:hover { color: var(--mq-cream); transform: translateX(3px); }
html[dir="rtl"] .mq-footer-col a:hover { transform: translateX(-3px); }

/* Assurance list */
.mq-footer-assure { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.mq-footer-assure li {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; color: var(--mq-ink-3);
}
.mq-footer-assure svg { width: 15px; height: 15px; color: var(--mq-cream); flex: none; }

.mq-lang--footer { margin-top: 20px; }

/* Baseline */
.mq-footer-base {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--mq-line);
	font-size: 12.5px; color: var(--mq-ink-4);
}
.mq-footer-base p { margin: 0; }
.mq-footer-anon { display: inline-flex; align-items: center; gap: 9px; }
.mq-footer-anon svg { width: 14px; height: 14px; color: var(--mq-ink-4); }

.mq-footer a { color: var(--mq-ink-2); text-decoration: none; }
.mq-dim { color: var(--mq-ink-4); }

@media (max-width: 900px) {
	.mq-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
	.mq-footer-brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
	.mq-footer-grid { grid-template-columns: 1fr; gap: 28px; }
	.mq-footer-base { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mq-footer-mail { width: 100%; justify-content: center; }
}

/* ============================================================
   15. SCROLL REVEAL
   ============================================================ */
[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s var(--mq-ease), transform 0.8s var(--mq-ease);
	transition-delay: var(--d, 0ms);
	will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   16. SURVEY TEMPLATE
   ============================================================ */
.mq-survey-page .mq-header { position: static; }
.mq-survey-page .mq-footer { margin-top: 0; }

/* ============================================================
   17. RTL
   ============================================================ */
html[dir="rtl"] .mq-nav a::after { transform-origin: right; }
html[dir="rtl"] .mq-card::after { transform-origin: top; }

/* ============================================================
   18. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.mq-header-inner { position: relative; gap: 14px; min-height: 68px; }
	.mq-privacy { flex-direction: column; gap: 20px; }
}

@media (max-width: 620px) {
	:root { --mq-r: 14px; --mq-r-lg: 18px; }
	.mq-hero { padding-block: 52px 40px; }
	.mq-hero::before { display: none; }
	.mq-hero-actions { flex-direction: column; align-items: stretch; }
	.mq-hero-actions .mq-btn { width: 100%; }
	.mq-eyebrow { font-size: 10px; letter-spacing: 0.2em; }
	.mq-eyebrow::before, .mq-eyebrow::after { width: 20px; }
	.mq-logo--header { max-width: 148px; }
	.mq-grid, .mq-steps { grid-template-columns: 1fr; }
	.mq-card { padding: 24px 20px; }
	.mq-step { padding: 26px 20px; }
	.mq-faq-item summary { padding: 18px 52px 18px 18px; font-size: 0.95rem; }
	.mq-faq-body { padding: 0 18px 18px; }
	.mq-footer-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
	.mq-footer-right { margin-inline-start: 0; }
	.mq-footer-left { flex-direction: column; align-items: flex-start; gap: 12px; }
	.alignleft, .alignright { float: none; margin-inline: 0; }
}

@media (max-width: 400px) {
	.mq-logo--header { max-height: 32px; }
	.mq-brand-tag { display: none; }
	.mq-lang a { padding: 5px 9px; min-width: 32px; }
}

@media (max-height: 540px) and (orientation: landscape) {
	.mq-hero { padding-block: 32px 24px; }
	.mq-hero-logo { margin-bottom: 16px; }
}

/* ============================================================
   19. PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
	.mq-dot { animation: none; }
}

@media (prefers-contrast: more) {
	:root { --mq-line: rgba(222,219,208,.4); --mq-line-2: rgba(222,219,208,.6); }
	.mq-hero-lede, .mq-card-sub, .mq-step p, .mq-privacy p, .mq-faq-body { color: var(--mq-ink); }
	body::after { display: none; }
}

@media print {
	body { background: #fff; color: #000; }
	body::before, body::after { display: none; }
	.mq-header, .mq-footer, .mq-btn, .mq-lang, .mq-burger, .mq-hero-meta { display: none !important; }
	.mq-card, .mq-step, .mq-privacy { border-color: #999; break-inside: avoid; }
	[data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   20. SURVEY ENGINE COMPATIBILITY
   The plugin's standalone page calls wp_head(), so this stylesheet
   loads there too. These rules stop theme globals from fighting the
   survey's own layout — both standalone (body.mp-body) and embedded
   via the [marq_survey] shortcode (.mp-shell).
   ============================================================ */

/* Standalone survey page: the plugin owns the body box. */
body.mp-body {
	display: block;
	min-height: 0;
	background: var(--mp-deep, #043542);
	font-family: 'Merriweather', Georgia, serif;
}
/* The theme's fixed ground layers must not sit over the survey. */
body.mp-body::before,
body.mp-body::after { display: none; }

/* Inside the survey, the plugin's own tokens and sizes win. */
.mp-shell h1, .mp-shell h2, .mp-shell h3, .mp-shell h4 {
	font-family: 'Merriweather', Georgia, serif;
	letter-spacing: normal;
	text-wrap: initial;
}
.mp-shell a { text-underline-offset: auto; }
.mp-shell p { text-wrap: initial; }

/* Scroll-reveal must never hide a question: if the theme's observer
   ever tagged an element inside the survey, keep it visible. */
.mp-shell [data-reveal] { opacity: 1 !important; transform: none !important; }

/* Embedded survey inside a theme page: give it room, keep it full-width
   of its container without inheriting the reading measure. */
.mq-survey-wrap .mp-shell { padding-inline: 0; min-height: 0; }
.mq-survey-page .mq-main { padding-block: 0; }

/* The survey sets its own anchor offset. */
body.mp-body { scroll-padding-top: 0; }

/* ============================================================
   21. HERO — responsive & motion preferences
   ============================================================ */
@media (max-width: 620px) {
	.mq-hero { padding-block: 48px 108px; }
	.mq-hero-deco { display: none; }           /* rings crowd a small screen */
	.mq-trust { gap: 8px; margin-top: 26px; }
	.mq-trust li { padding: 8px 14px; font-size: 11px; }
	.mq-pulse-line { bottom: 38px; }
	.mq-pulse-line svg { height: 44px; }
	.mq-scroll-cue { display: none; }          /* thumb-scrolling needs no cue */
	.mq-rotator { min-height: 1.15em; }
}

@media (max-height: 560px) and (orientation: landscape) {
	.mq-hero { padding-block: 30px 44px; }
	.mq-hero-deco, .mq-scroll-cue { display: none; }
	.mq-trust { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.mq-ring { animation: none; opacity: 0.5; }
	.mq-pulse-path { opacity: 0.4; }
	.mq-pulse-runner { animation: none; opacity: 0; }
	.mq-scroll-mouse span { animation: none; opacity: 1; }
	.mq-rotator-word.is-out, .mq-rotator-word.is-in { animation: none; }
}

@media (prefers-contrast: more) {
	.mq-hero-title .light { -webkit-text-fill-color: var(--mq-cream); color: var(--mq-cream); }
	.mq-trust li { border-color: var(--mq-line-2); }
}

@media print {
	.mq-hero-deco, .mq-pulse-line, .mq-scroll-cue, .mq-trust { display: none !important; }
}


/* ============================================================
   22. MOBILE — app-grade behaviour
   ============================================================ */

/* Momentum scrolling and no rubber-band flash on iOS. */
@media (max-width: 900px) {
	html, body { overscroll-behavior-y: none; }
	.mq-table-scroll, .mq-nav { -webkit-overflow-scrolling: touch; }

	/* Tap feedback instead of hover, which phones cannot do. */
	.mq-card:active { background: rgba(var(--mq-cream-rgb), 0.07); }
	.mq-step:active { transform: scale(0.99); }
	.mq-btn:active { transform: scale(0.985); }
	.mq-faq-item summary:active { background: rgba(var(--mq-cream-rgb), 0.06); }

	/* Kill hover-only effects that stick after a tap. */
	.mq-card:hover { transform: none; }
	.mq-step:hover { transform: none; }
	.mq-btn:hover { transform: none; }
}

@media (max-width: 860px) {
	/* Rail drops beneath the content. */
	.mq-card {
		grid-template-columns: 44px minmax(0, 1fr);
		grid-template-areas:
			"index body"
			"index rail";
		align-items: start;
		gap: 14px 18px;
		padding: 22px 20px;
	}
	.mq-card-foot {
		flex-direction: row; align-items: center; justify-content: space-between;
		width: 100%;
		padding-top: 14px;
		border-top: 1px solid var(--mq-line);
	}
	.mq-card-index { align-self: start; padding-top: 4px; }
	.mq-card h3 { font-size: 1.28rem; }
}

@media (max-width: 560px) {
	.mq-card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "index" "body" "rail";
		gap: 10px;
		padding: 20px 18px;
	}
	.mq-card-index { padding-top: 0; }
	.mq-card-facts { gap: 6px 0; }
	.mq-card-facts li { padding-inline: 12px; font-size: 11.5px; }
	.mq-card-foot { flex-direction: column; align-items: stretch; gap: 12px; }
	.mq-badge { justify-content: center; }
	.mq-card-link { width: 100%; }
}

@media (max-width: 620px) {
	/* Hero: tighter, single-column actions, comfortable thumb reach. */
	.mq-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.mq-hero-actions .mq-btn { width: 100%; justify-content: center; }

	/* Trust strip becomes a rounded stacked list. */
	.mq-trust {
		flex-direction: column; width: 100%;
		border-radius: var(--mq-r);
	}
	.mq-trust li {
		width: 100%; justify-content: center;
		padding: 14px 16px; font-size: 11px; letter-spacing: 0.12em;
	}
	.mq-trust li + li { border-inline-start: 0; border-top: 1px solid var(--mq-line); }

	.mq-hero-meta { font-size: 10px; letter-spacing: 0.16em; }

	/* FAQ */
	.mq-faq-item summary { padding: 17px 18px; gap: 14px; min-height: 58px; }
	.mq-faq-q { font-size: 0.95rem; }
	.mq-faq-body { padding: 0 44px 18px 18px; }
	.mq-help { padding: 22px 18px; margin-top: 28px; }

	.mq-notice { padding: 30px 20px; align-items: center; text-align: center; }
}

@media (max-width: 460px) {
	.mq-card-facts { flex-direction: column; align-items: flex-start; gap: 8px; }
	.mq-card-facts li { padding-inline: 0; border-inline-start: 0; }
}

/* Coarse pointers get larger hit areas everywhere. */
@media (pointer: coarse) {
	.mq-nav a { padding-block: 18px; }
	.mq-lang a { padding: 9px 14px; }
	.mq-card-link, .mq-btn { min-height: 48px; }
	.mq-faq-item summary { min-height: 60px; }
}

/* Very short screens (landscape phones) keep the page usable. */
@media (max-height: 480px) and (orientation: landscape) {
	.mq-header { position: static; }
	.mq-hero { padding-block: 28px 36px; }
	.mq-pulse-line, .mq-hero-deco, .mq-scroll-cue { display: none; }
}

/* ============================================================
   23. START SURVEY — the single entry point
   ============================================================ */
.mq-section--start {
	padding-block: clamp(56px, 9vw, 104px);
	/* The closing call-to-action, lifted a little from the sections above. */
	background:
		radial-gradient(120% 90% at 50% 100%, rgba(var(--mq-second-rgb, var(--mq-cream-rgb)), 0.06) 0%, transparent 60%);
	border-top: 1px solid var(--mq-line);
}
/* It ends the page — no gap before the footer. */
.mq-section--start + * .mq-footer,
.mq-section--start ~ .mq-footer { margin-top: 0; }

.mq-start {
	position: relative; overflow: hidden;
	max-width: 780px; margin-inline: auto;
	text-align: center;
	padding: clamp(36px, 6vw, 60px) clamp(24px, 5vw, 56px);
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-lg);
	background:
		radial-gradient(100% 140% at 50% 0%, rgba(var(--mq-cream-rgb), 0.10) 0%, transparent 62%),
		rgba(var(--mq-cream-rgb), 0.035);
}

.mq-start-title {
	font-size: clamp(1.6rem, 4vw, 2.5rem);
	font-weight: 400; line-height: 1.2;
	margin-bottom: 12px;
}
.mq-start-sub {
	color: var(--mq-ink-2);
	font-style: italic;
	max-width: 48ch; margin-inline: auto;
}

.mq-start-facts {
	list-style: none; padding: 0;
	margin: 26px auto 30px;
	display: flex; justify-content: center; flex-wrap: wrap;
	gap: 0;
	width: fit-content; max-width: 100%;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-pill);
	overflow: hidden;
	background: rgba(var(--mq-cream-rgb), 0.03);
}
.mq-start-facts li {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 12px 22px;
	font-family: var(--mq-ui);
	font-size: 12px; letter-spacing: 0.08em;
	color: var(--mq-ink-2);
}
.mq-start-facts li + li { border-inline-start: 1px solid var(--mq-line); }
.mq-start-facts svg { width: 15px; height: 15px; color: var(--mq-cream); flex: none; }

/* The primary action is deliberately large — it is the only one that matters. */
.mq-btn--start {
	min-height: 62px;
	padding: 20px 46px;
	font-size: 12px; letter-spacing: 0.24em;
}

.mq-start-icon {
	display: grid; place-items: center;
	width: 56px; height: 56px; margin: 0 auto 20px;
	border: 1px solid var(--mq-line-2); border-radius: 50%;
	color: var(--mq-cream);
}
.mq-start-icon svg { width: 25px; height: 25px; }
.mq-start--empty .mq-start-sub { margin-bottom: 26px; }

@media (max-width: 620px) {
	.mq-start { padding: 30px 20px; }
	.mq-start-facts { flex-direction: column; width: 100%; border-radius: var(--mq-r); }
	.mq-start-facts li { width: 100%; justify-content: center; padding: 13px 16px; }
	.mq-start-facts li + li { border-inline-start: 0; border-top: 1px solid var(--mq-line); }
	.mq-btn--start { width: 100%; min-height: 56px; padding: 18px 28px; letter-spacing: 0.18em; }
}

/* ============================================================
   24. DATELINE — replaces the status pill
   A printed-page dateline: a rule, the date, a rule. No badge,
   no pulsing dot, no uppercase shouting.
   ============================================================ */
.mq-dateline {
	display: flex; align-items: center; gap: 16px;
	margin: 0 auto 22px;
	width: fit-content; max-width: 100%;
	font-family: var(--mq-display);
	font-size: 13px; font-style: italic; font-weight: 300;
	color: var(--mq-ink-3);
	letter-spacing: 0.01em;
}
.mq-dateline::before, .mq-dateline::after {
	content: ""; width: 40px; height: 1px; flex: none;
	background: linear-gradient(90deg, transparent, var(--mq-line-3));
}
.mq-dateline::after { background: linear-gradient(90deg, var(--mq-line-3), transparent); }
.mq-dateline span { white-space: nowrap; }

/* ============================================================
   25. COUNTDOWN
   Set as typography, not as flip-cards: large numerals in the
   display face, hairline-separated, quiet labels beneath.
   ============================================================ */
.mq-countdown {
	display: flex; flex-direction: column; align-items: center; gap: 14px;
	margin-top: 34px;
}
.mq-countdown-lead {
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 400;
	letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--mq-ink-4);
}
.mq-countdown-units {
	display: flex; align-items: stretch;
	/* Time always reads left-to-right, even in Arabic. */
	direction: ltr;
}
.mq-unit {
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	padding-inline: clamp(16px, 3.5vw, 30px);
	min-width: 0;
}
.mq-unit + .mq-unit { border-inline-start: 1px solid var(--mq-line); }

.mq-unit-num {
	font-family: var(--mq-display);
	font-size: clamp(30px, 6vw, 52px);
	font-weight: 300;
	line-height: 1;
	color: var(--mq-ink);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}
.mq-unit-label {
	font-family: var(--mq-ui);
	font-size: 10px; font-weight: 400;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-4);
}

/* Final day: the numerals warm, nothing flashes. */
.mq-countdown.is-urgent .mq-unit-num { color: var(--mq-cream); }
.mq-countdown.is-urgent .mq-countdown-lead { color: var(--mq-ink-3); }

.mq-countdown-closed {
	font-family: var(--mq-display);
	font-size: clamp(16px, 3vw, 20px);
	font-style: italic;
	color: var(--mq-ink-2);
}

.mq-hero-note {
	margin-top: 30px;
	font-family: var(--mq-ui);
	font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mq-ink-4);
}

/* A closed survey must not still offer a button. */
.mq-btn.is-disabled {
	opacity: 0.45; pointer-events: none; cursor: default;
	background: transparent; color: var(--mq-ink-3);
	border: 1px solid var(--mq-line-2); box-shadow: none;
}
.mq-start.is-closed { opacity: 0.85; }

@media (max-width: 620px) {
	.mq-countdown { margin-top: 26px; gap: 12px; }
	.mq-unit { padding-inline: 12px; }
	.mq-unit-num { font-size: 28px; }
	.mq-unit-label { font-size: 9px; letter-spacing: 0.14em; }
	.mq-dateline { gap: 12px; font-size: 12px; }
	.mq-dateline::before, .mq-dateline::after { width: 24px; }
}

@media (max-width: 400px) {
	.mq-unit { padding-inline: 8px; }
	.mq-unit-num { font-size: 24px; }
	.mq-dateline::before, .mq-dateline::after { display: none; }
}

/* Lead-in above the closing CTA */
.mq-start-lead {
	text-align: center;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.24em; text-transform: uppercase;
	color: var(--mq-ink-4);
	margin-bottom: 22px;
}

/* ============================================================
   26. Compact countdown inside the START panel
   ============================================================ */
.mq-start-countdown {
	display: flex; justify-content: center; align-items: stretch;
	gap: 0; direction: ltr;
	margin: 4px auto 30px;
	width: fit-content; max-width: 100%;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-sm);
	overflow: hidden;
	background: rgba(var(--mq-cream-rgb), 0.03);
}
.mq-mini-unit {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 12px clamp(14px, 2.6vw, 24px);
}
.mq-mini-unit + .mq-mini-unit { border-inline-start: 1px solid var(--mq-line); }
.mq-mini-num {
	font-family: var(--mq-display);
	font-size: clamp(20px, 3.4vw, 28px);
	font-weight: 300; line-height: 1;
	color: var(--mq-ink);
	font-variant-numeric: tabular-nums;
}
.mq-mini-label {
	font-family: var(--mq-ui);
	font-size: 9px; font-weight: 400;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--mq-ink-4);
}

@media (max-width: 620px) {
	.mq-mini-unit { padding: 10px 12px; }
	.mq-mini-num { font-size: 20px; }
	.mq-mini-label { font-size: 8px; letter-spacing: 0.1em; }
}

/* ---- START panel: reassurance under the button ---- */
.mq-start-reassure {
	display: inline-flex; align-items: center; gap: 9px;
	margin: 18px auto 0;
	max-width: 42ch;
	font-size: 12.5px; line-height: 1.5;
	color: var(--mq-ink-4);
	text-align: start;
}
.mq-start-reassure svg { width: 15px; height: 15px; flex: none; color: var(--mq-cream); opacity: 0.7; }
@media (max-width: 620px) { .mq-start-reassure { font-size: 12px; } }

/* ============================================================
   27. HOME CTA — split pitch + ticket (full redesign)
   ============================================================ */
.mq-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.mq-cta--empty { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; text-align: center; }
.mq-cta--empty .mq-cta-points { justify-content: center; }

/* Pitch */
.mq-cta-kicker {
	display: inline-block;
	font-family: var(--mq-ui);
	font-size: 11px; font-weight: 500;
	letter-spacing: 0.26em; text-transform: uppercase;
	color: var(--mq-cream);
	padding-bottom: 10px; margin-bottom: 20px;
	border-bottom: 1px solid var(--mq-line-2);
}
.mq-cta-title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	font-weight: 700; line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 20px;
}
.mq-cta-title em {
	display: block;
	font-style: italic; font-weight: 300;
	color: var(--mq-cream);
}
.mq-rtl .mq-cta-title em, [dir="rtl"] .mq-cta-title em { font-style: normal; }
.mq-cta-lede { color: var(--mq-ink-2); font-size: 1.05rem; max-width: 46ch; margin-bottom: 28px; }
.mq-cta--empty .mq-cta-lede { margin-inline: auto; }

.mq-cta-points { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mq-cta-points li {
	display: flex; align-items: center; gap: 13px;
	font-family: var(--mq-ui); font-size: 14px; color: var(--mq-ink-2);
}
.mq-cta-points svg {
	flex: none; width: 34px; height: 34px; padding: 8px;
	border: 1px solid var(--mq-line-2); border-radius: 50%;
	color: var(--mq-cream);
}

/* Ticket */
.mq-ticket {
	position: relative;
	border-radius: var(--mq-r-lg);
	background:
		radial-gradient(130% 80% at 50% 0%, rgba(var(--mq-cream-rgb), 0.14) 0%, transparent 60%),
		linear-gradient(180deg, rgba(var(--mq-cream-rgb), 0.07), rgba(var(--mq-cream-rgb), 0.03));
	border: 1px solid var(--mq-line-2);
	box-shadow: 0 40px 80px -48px rgba(0,0,0,0.9);
	overflow: hidden;
}
.mq-ticket-top, .mq-ticket-bottom { padding: clamp(24px, 3.5vw, 34px); }
.mq-ticket-label {
	display: block;
	font-family: var(--mq-ui);
	font-size: 10px; font-weight: 500;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--mq-ink-4);
	margin-bottom: 10px;
}
.mq-ticket-title { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 400; line-height: 1.2; margin-bottom: 6px; }
.mq-ticket-sub { font-style: italic; color: var(--mq-ink-3); font-size: 0.95rem; margin: 0; }
.mq-rtl .mq-ticket-sub, [dir="rtl"] .mq-ticket-sub { font-style: normal; }

/* Perforated tear line with notches cut into each edge */
.mq-ticket-perf {
	position: relative; height: 0;
	border-top: 2px dashed var(--mq-line-2);
	margin-inline: 18px;
}
.mq-ticket-perf::before, .mq-ticket-perf::after {
	content: ""; position: absolute; top: -13px;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--mq-base);
	border: 1px solid var(--mq-line-2);
}
.mq-ticket-perf::before { inset-inline-start: -31px; }
.mq-ticket-perf::after  { inset-inline-end: -31px; }

.mq-ticket-date { font-family: var(--mq-display); font-size: 1.3rem; margin: 0 0 22px; }

.mq-ticket-count {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 8px; direction: ltr;
	margin-bottom: 24px;
}
.mq-tc-unit {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 12px 4px;
	border: 1px solid var(--mq-line);
	border-radius: var(--mq-r-sm);
	background: rgba(0,0,0,0.14);
}
.mq-tc-num {
	font-family: var(--mq-display);
	font-size: clamp(22px, 3vw, 30px); font-weight: 300; line-height: 1;
	color: var(--mq-ink); font-variant-numeric: tabular-nums;
}
.mq-tc-lbl {
	font-family: var(--mq-ui);
	font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--mq-ink-4);
}
.mq-ticket-btn { width: 100%; justify-content: center; }

/* Stack on tablet and below */
@media (max-width: 900px) {
	.mq-cta { grid-template-columns: 1fr; gap: 36px; }
	.mq-cta-pitch { text-align: center; }
	.mq-cta-lede { margin-inline: auto; }
	.mq-cta-points { align-items: center; }
	.mq-cta-kicker { margin-inline: auto; }
	.mq-ticket { max-width: 460px; margin-inline: auto; width: 100%; }
}
@media (max-width: 420px) {
	.mq-ticket-count { gap: 5px; }
	.mq-tc-unit { padding: 10px 2px; }
	.mq-tc-num { font-size: 20px; }
	.mq-ticket-perf::before { inset-inline-start: -27px; }
	.mq-ticket-perf::after  { inset-inline-end: -27px; }
}

/* ============================================================
   28. HERO BACKGROUND IMAGE (optional, set in the Customizer)
   ============================================================ */
.mq-hero-bg, .mq-hero-shade { position: absolute; inset: 0; pointer-events: none; }
.mq-hero-bg {
	z-index: -2;
	width: 100%; height: 100%; max-width: none;
	object-fit: cover; object-position: center center;
}
.mq-hero-bg--top    { object-position: center top; }
.mq-hero-bg--bottom { object-position: center bottom; }
/* The teal overlay: stronger toward the bottom where the pulse line sits. */
.mq-hero-shade {
	z-index: -1;
	background: linear-gradient(180deg, rgba(3,43,56,.85) 0%, rgba(4,53,66,.75) 45%, rgba(2,34,44,.95) 100%);
}
.mq-hero.has-bg .mq-hero-title, .mq-hero.has-bg .mq-hero-lede { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
@media print { .mq-hero-bg, .mq-hero-shade { display: none; } }

/* ---- logo on the survey card ---- */
.mq-ticket-logo { margin-bottom: 18px; }
.mq-ticket-logo img {
	width: auto; max-width: min(70%, 220px); max-height: 120px;
	object-fit: contain; object-position: left center;
	display: block;
}
[dir="rtl"] .mq-ticket-logo img { object-position: right center; margin-inline-start: 0; }
@media (max-width: 600px) { .mq-ticket-logo { margin-bottom: 14px; } }