/* ==========================================================================
   trust.css — /alixco/trust ("Is Alixco legit?") page-specific styling.
   Layers on top of content-pages.css (cp-* tokens & components).
   Two things content-pages.css does not provide:
     1. a two-column hero with an animated "verification" signature SVG
        (fills the hero whitespace, same spirit as the smefinancing use-case
        signature art);
     2. a no-JS, collapsed-by-default, full-width FAQ accordion built on
        native <details>/<summary> (crawlable: answers stay in the DOM).
   All colours come from the content-pages.css design tokens (var(--c-*)).
   Respects prefers-reduced-motion.
   ========================================================================== */

/* ---- Two-column hero ---------------------------------------------------- */
.trust-hero-grid {
	display: grid;
	grid-template-columns: 1.12fr .88fr;
	gap: 40px;
	align-items: center;
}
.trust-hero-copy { min-width: 0; }

.trust-art {
	position: relative;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}
.trust-art svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* halo + rotating scan ring + shield + drawn check + orbiting sparks */
.trust-art .t-halo   { fill: var(--c-active); opacity: .5; transform-origin: 130px 130px; animation: tHalo 4.5s ease-in-out infinite; }
.trust-art .t-ring   { fill: none; stroke: var(--c-blue); stroke-width: 1.4; stroke-dasharray: 6 10; opacity: .55; transform-origin: 130px 130px; animation: tSpin 18s linear infinite; }
.trust-art .t-ring2  { fill: none; stroke: var(--c-green-alt); stroke-width: 1.4; stroke-dasharray: 2 12; opacity: .5; transform-origin: 130px 130px; animation: tSpinRev 26s linear infinite; }
.trust-art .t-shield { fill: var(--c-card); stroke: var(--c-blue); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 10px 22px rgba(11,37,69,.12)); }
.trust-art .t-shieldband { fill: none; stroke: var(--c-line); stroke-width: 2; }
.trust-art .t-check  {
	fill: none; stroke: var(--c-green-alt); stroke-width: 9;
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 70; stroke-dashoffset: 70;
	animation: tDraw 1.1s ease-out .35s forwards;
}
.trust-art .t-spark  { fill: var(--c-orange); transform-origin: 130px 130px; animation: tOrbit 14s linear infinite; }
.trust-art .t-spark.b { fill: var(--c-blue); animation-duration: 20s; animation-direction: reverse; }
.trust-art .t-seal   { fill: var(--c-green-alt); opacity: 0; animation: tPop .5s ease-out 1.25s forwards; transform-origin: 198px 78px; }
.trust-art .t-sealtxt{ fill: #fff; font: 700 11px/1 'Poppins', sans-serif; opacity: 0; animation: tPop .5s ease-out 1.35s forwards; }

@keyframes tHalo { 0%,100% { transform: scale(1);   opacity: .45; } 50% { transform: scale(1.06); opacity: .65; } }
@keyframes tSpin { to { transform: rotate(360deg); } }
@keyframes tSpinRev { to { transform: rotate(-360deg); } }
@keyframes tDraw { to { stroke-dashoffset: 0; } }
@keyframes tOrbit { to { transform: rotate(360deg); } }
@keyframes tPop  { 0% { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.trust-art .t-halo, .trust-art .t-ring, .trust-art .t-ring2,
	.trust-art .t-spark, .trust-art .t-check, .trust-art .t-seal,
	.trust-art .t-sealtxt { animation: none; }
	.trust-art .t-check { stroke-dashoffset: 0; }
	.trust-art .t-seal, .trust-art .t-sealtxt { opacity: 1; }
}

@media (max-width: 900px) {
	.trust-hero-grid { grid-template-columns: 1fr; gap: 8px; }
	.trust-art { max-width: 240px; margin-top: 6px; order: -1; }
}

/* ---- Full-width, collapsed-by-default FAQ accordion (no JS) -------------- */
.trust-faq { max-width: 900px; margin: 0 auto; }

.trust-q {
	background: var(--c-card);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	margin-bottom: 14px;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.trust-q[open] { border-color: var(--c-blue); box-shadow: 0 10px 26px rgba(11,37,69,.07); }
.trust-q:hover { border-color: var(--c-blue); }

.trust-q > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 22px;
	font-family: var(--font-display, 'Poppins', sans-serif);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--c-text);
}
.trust-q > summary::-webkit-details-marker { display: none; }

.trust-q .t-plus {
	flex: 0 0 auto;
	width: 26px; height: 26px;
	position: relative;
	margin-left: auto;
	border-radius: 50%;
	background: var(--c-active);
	transition: background .2s ease;
}
.trust-q .t-plus::before,
.trust-q .t-plus::after {
	content: "";
	position: absolute;
	left: 50%; top: 50%;
	width: 11px; height: 2.4px;
	background: var(--c-blue);
	border-radius: 2px;
	transform: translate(-50%, -50%);
	transition: transform .25s ease;
}
.trust-q .t-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.trust-q[open] .t-plus::after { transform: translate(-50%, -50%) rotate(0deg); }

.trust-q .t-answer {
	padding: 0 22px 22px;
	color: var(--c-muted);
	font-size: .95rem;
	line-height: 1.7;
	max-width: 74ch;
}

@media (max-width: 560px) {
	.trust-q > summary { padding: 16px 16px; font-size: .98rem; }
	.trust-q .t-answer { padding: 0 16px 18px; }
}