/* =============================================================================
   ScamWise Seniors — plugin stylesheet (handle: scamwise)
   -----------------------------------------------------------------------------
   Owns: design tokens (:root), homepage page-content styles, and the two shared
   widget styles (lookup form + newsletter form). The THEME owns the site header,
   nav, and footer chrome — content styles here are scoped under .sws-page / the
   widget class names so they do not fight the theme's chrome.

   Senior-friendly defaults: large readable type (>=18px base), strong contrast,
   big tap targets (>=48px), clearly visible focus outlines, mobile-first.

   Tokens are named generically (--sws-*) so later pages (results, report,
   contact, etc.) can reuse them. Ported from scamwiseseniors-demo-ideas/
   01-homepage-v2.html :root.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Self-hosted web fonts (F28 / privacy). Inter + Plus Jakarta Sans are served
   from this plugin's assets/fonts/ — NOT Google Fonts — so no visitor IP is sent
   to any third party and the CSP needs no external font origins. The binaries are
   fetched reproducibly via assets/fonts/download-fonts.sh. `font-display: swap`
   keeps text visible during load, and the --sws-font-* stacks fall back to system
   fonts if a file is ever missing.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inter-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/plus-jakarta-sans-800.woff2') format('woff2');
}

:root {
	/* Brand / primary (golden shield) */
	--sws-color-primary: #FFDC0F;
	--sws-color-primary-hover: #E5C600;
	--sws-color-primary-light: #FFF9DB;
	--sws-color-primary-text: #1A1A1A;

	/* Neutral darks */
	--sws-color-dark: #1A1A1A;
	--sws-color-dark-medium: #2D2D2D;
	--sws-color-dark-light: #3D3D3D;

	/* Trust bands — safe (>=70) / warning (40-69) / danger (0-39) / unknown.
	   The `-dark` tokens double as on-light TEXT (verdict pill, status badges,
	   fact labels, highlight ticks) AND as the verdict-header gradient stops, so
	   they are tuned for WCAG AA: each clears 4.5:1 both on its `-light` fill and
	   under white. The bright base tokens are kept for borders/decоration only
	   (no text-contrast requirement). The `-darker` tokens are the header
	   gradient end (white text ≥4.5:1 across the whole gradient). See §10.2. */
	--sws-color-safe: #22C55E;
	--sws-color-safe-dark: #15803D;   /* AA: 4.57:1 on -light, 5.02:1 under white */
	--sws-color-safe-darker: #166534; /* header gradient end */
	--sws-color-safe-light: #DCFCE7;

	--sws-color-warning: #F59E0B;
	--sws-color-warning-dark: #A14E0B;   /* AA: 5.22:1 on -light, 5.82:1 under white */
	--sws-color-warning-darker: #92400E; /* header gradient end */
	--sws-color-warning-light: #FEF3C7;

	--sws-color-danger: #EF4444;
	--sws-color-danger-dark: #B91C1C;   /* AA: 5.30:1 on -light, 6.47:1 under white */
	--sws-color-danger-darker: #991B1B; /* header gradient end */
	--sws-color-danger-light: #FEE2E2;

	/* Unknown / "Not Enough Info Yet" band = neutral gray */
	--sws-color-unknown: #6B7280;
	--sws-color-unknown-dark: #4B5563;
	--sws-color-unknown-light: #F3F4F6;

	/* Accent tones — decorative icon tiles / signal cards (no AA text requirement
	   on the tile backgrounds). The `-ink` / band tokens are used as small text on
	   their light fill or on the yellow band, where they read fine. */
	--sws-color-info: #2A6FB0;
	--sws-color-info-light: #E4ECF7;
	--sws-color-violet: #6D4FA3;
	--sws-color-violet-light: #EDE6F7;
	--sws-color-amber-ink: #9A7B16;        /* amber text on --sws-color-primary-light */
	--sws-color-on-primary-muted: #7A6410; /* muted gold text on the yellow band */

	/* Text */
	--sws-color-text: #1A1A1A;
	--sws-color-text-secondary: #525252;
	--sws-color-text-muted: #6B6B6B; /* darkened from demo #A3A3A3; ~5:1 on the #FAFAFA bg for WCAG AA */
	--sws-color-text-on-dark-muted: rgba(255, 255, 255, 0.82);

	/* Surfaces */
	--sws-color-border: #E5E5E5;
	--sws-color-bg: #FAFAFA;
	--sws-color-bg-alt: #F5F5F5;
	--sws-color-white: #FFFFFF;

	/* Shadows */
	--sws-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--sws-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--sws-shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.2);

	/* Radii */
	--sws-radius-sm: 4px;
	--sws-radius-md: 8px;
	--sws-radius-lg: 12px;
	--sws-radius-xl: 16px;
	--sws-radius-2xl: 20px;
	--sws-radius-full: 9999px;

	/* Spacing scale */
	--sws-space-xs: 8px;
	--sws-space-sm: 12px;
	--sws-space-md: 16px;
	--sws-space-lg: 24px;
	--sws-space-xl: 32px;
	--sws-space-2xl: 48px;
	--sws-space-3xl: 64px;

	/* Typography */
	--sws-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--sws-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--sws-font-size-base: 18px; /* senior-friendly base */
	--sws-line-height: 1.6;

	/* Layout */
	--sws-container-max: 1200px;
	--sws-container-narrow: 1000px;
}

/* =============================================================================
   CONTENT SCOPE
   Base type/box rules apply only to plugin page content (not the theme chrome).
   ========================================================================== */

.sws-page {
	font-family: var(--sws-font-body);
	font-size: var(--sws-font-size-base);
	line-height: var(--sws-line-height);
	color: var(--sws-color-text);
	background: var(--sws-color-bg);
}

.sws-page *,
.sws-page *::before,
.sws-page *::after {
	box-sizing: border-box;
}

/* Margin/padding normalize. Wrapped in :where() so it carries ZERO specificity:
   it still zeroes browser defaults, but ANY single-class component rule (e.g.
   .sws-section-title, .sws-checkland-lead, .sws-card-title) now wins and its
   intended margin actually applies. Without :where(), `.sws-page h2` (0,1,1)
   out-specified those component rules (0,1,0) and silently dropped every
   heading/lead/card-title/list margin across the site. */
:where(.sws-page) h1,
:where(.sws-page) h2,
:where(.sws-page) h3,
:where(.sws-page) h4,
:where(.sws-page) p,
:where(.sws-page) ul,
:where(.sws-page) ol,
:where(.sws-page) dl,
:where(.sws-page) figure,
:where(.sws-page) blockquote {
	margin: 0;
	padding: 0;
}

.sws-page ul,
.sws-page ol {
	list-style: none;
}

.sws-page img {
	max-width: 100%;
	height: auto;
}

/* Visible focus ring (accessibility). Text inputs/selects/textareas are
   deliberately EXCLUDED: they carry their own border-based focus indicator
   (the 2px border turns dark on focus — brand yellow failed the WCAG 1.4.11
   3:1 non-text contrast on white, a real problem for aging eyes), so adding
   the 3px outline gave a doubled border. Links, buttons, checkboxes, radios
   and other tab stops keep the outline. */
.sws-page a:focus-visible,
.sws-page button:focus-visible,
.sws-page [tabindex]:focus-visible,
.sws-page input[type="checkbox"]:focus-visible,
.sws-page input[type="radio"]:focus-visible,
.search-box button:focus-visible,
.newsletter-form button:focus-visible {
	outline: 3px solid var(--sws-color-dark);
	outline-offset: 3px;
}

/* Text fields show their focus as a BORDER-colour change (see the :focus rules
   below), so suppress the outline on them — both the plugin rule above and, more
   importantly, the THEME's global `:focus-visible` outline (scamwise-theme
   style.css, bare `:focus-visible` = specificity 0,1,0). These selectors are
   higher-specificity so they win regardless of stylesheet order. Checkboxes and
   radios keep the outline (no border to recolour); the dark-hero checkland input
   keeps its glow (box-shadow, not an outline). */
.sws-page input[type="text"]:focus-visible,
.sws-page input[type="email"]:focus-visible,
.sws-page input[type="url"]:focus-visible,
.sws-page input[type="search"]:focus-visible,
.sws-page input[type="tel"]:focus-visible,
.sws-page select:focus-visible,
.sws-page textarea:focus-visible,
.search-input:focus-visible,
.newsletter-input:focus-visible {
	outline: none;
}

/* =============================================================================
   SHARED BUTTONS (content-scoped)
   ========================================================================== */

.sws-btn,
.btn-primary { /* the lookup-form submit reuses the full .sws-btn base */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sws-space-xs);
	min-height: 52px;
	padding: 14px 28px;
	font-family: var(--sws-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--sws-radius-lg);
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
	white-space: nowrap;
}

.sws-btn-block {
	width: 100%;
}

.sws-btn-primary,
.btn-primary {
	background: var(--sws-color-primary);
	color: var(--sws-color-primary-text);
	border-color: var(--sws-color-primary);
}

.sws-btn-primary:hover,
.sws-btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
	background: var(--sws-color-primary-hover);
	border-color: var(--sws-color-primary-hover);
	transform: translateY(-2px);
	box-shadow: var(--sws-shadow-md);
}

.sws-btn-secondary {
	background: transparent;
	color: var(--sws-color-dark);
	border-color: var(--sws-color-dark);
}

.sws-btn-secondary:hover,
.sws-btn-secondary:focus {
	background: var(--sws-color-dark);
	color: var(--sws-color-white);
}

/* Dark solid button (yellow ink on dark) — for use on a yellow CTA band. */
.sws-btn-dark {
	background: var(--sws-color-dark);
	color: var(--sws-color-primary);
	border-color: var(--sws-color-dark);
}

.sws-btn-dark:hover,
.sws-btn-dark:focus {
	background: var(--sws-color-dark-medium);
	border-color: var(--sws-color-dark-medium);
	transform: translateY(-2px);
	box-shadow: var(--sws-shadow-md);
}

/* =============================================================================
   SHARED SECTION SCAFFOLDING
   ========================================================================== */

.sws-section {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
}

/* Alternating section backgrounds for visual rhythm */
.sws-how,
.sws-help {
	background: var(--sws-color-bg-alt);
}

.sws-trust,
.sws-testimonials,
.sws-mission {
	background: var(--sws-color-white);
}

.sws-press {
	background: var(--sws-color-bg-alt);
}

.sws-section-container {
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-section-header {
	text-align: center;
	margin-bottom: var(--sws-space-2xl);
}

.sws-section-title {
	font-family: var(--sws-font-display);
	font-size: 34px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-xs);
}

.sws-section-subtitle {
	color: var(--sws-color-text-secondary);
	font-size: 18px;
}

/* =============================================================================
   1. HERO + DUAL CTA
   ========================================================================== */

.sws-hero {
	background: linear-gradient(135deg, var(--sws-color-dark-medium) 0%, var(--sws-color-dark) 100%);
	padding: 80px var(--sws-space-lg) 120px;
	text-align: center;
}

.sws-hero-container {
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-hero-title {
	font-family: var(--sws-font-display);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sws-color-white);
	margin-bottom: var(--sws-space-md);
}

.sws-hero-title span {
	color: var(--sws-color-primary);
}

.sws-hero-lead {
	color: var(--sws-color-text-on-dark-muted);
	font-size: 20px;
	max-width: 620px;
	margin: 0 auto 40px;
}

.sws-dual-cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sws-space-lg);
	max-width: 900px;
	margin: 0 auto;
}

.sws-cta-card {
	display: flex;
	flex-direction: column;
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-2xl);
	padding: var(--sws-space-xl);
	box-shadow: var(--sws-shadow-xl);
	text-align: left;
}

.sws-cta-card-title {
	display: flex;
	align-items: center;
	gap: var(--sws-space-xs);
	font-family: var(--sws-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-xs);
}

.sws-cta-card-text {
	font-size: 16px;
	color: var(--sws-color-text-secondary);
	margin-bottom: var(--sws-space-lg);
}

/* Push the report card's button to the bottom so both cards align */
.sws-cta-card .sws-btn-block {
	margin-top: auto;
}

/* =============================================================================
   ACCESSIBILITY UTILITIES
   ========================================================================== */

/* Visually hidden, but available to screen readers (WordPress convention).
   Plugin-owned so form labels stay hidden regardless of the active theme. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	top: 5px;
	left: 5px;
	width: auto;
	height: auto;
	padding: 15px 23px 14px;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	z-index: 100000;
}

/* Honeypot anti-spam field — kept off-screen via CSS (not an inline style, so a
   strict style-src CSP cannot un-hide it). Must stay empty (decisions §C8). */
.sws-hp {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =============================================================================
   SHARED WIDGET — LOOKUP FORM  [scamwise_lookup_form size="hero"]
   Markup is owned by the shortcode and follows the demo's hero search box
   EXACTLY: .search-box > .search-input + .btn-primary.
   Styled here so the widget matches the demo wherever it appears.
   ========================================================================== */

.search-box {
	display: flex;
	gap: var(--sws-space-sm);
}

.search-input {
	flex: 1;
	min-width: 0;
	min-height: 52px;
	padding: 14px 18px;
	font-family: var(--sws-font-body);
	font-size: 17px;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	border: 2px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input::placeholder {
	color: var(--sws-color-text-muted);
}

.search-input:focus {
	/* Border-only focus, dark for 1.4.11 contrast (the dark-hero checkland
	   input keeps its glow below, since it has no border to colour). */
	border-color: var(--sws-color-dark);
}

/* .btn-primary (the lookup-form submit) now folds into the shared .sws-btn /
   .sws-btn-primary rules above — no separate declaration block needed. */

/* Variant tweaks: the shortcode renders the form as
   `.search-box.size-{hero|header|compact}`. */
.search-box.size-hero .search-input {
	font-size: 18px;
}

.search-box.size-compact .search-input,
.search-box.size-header .search-input {
	min-height: 44px;
	font-size: 15px;
}

/* =============================================================================
   2. HOW IT WORKS — steps
   ========================================================================== */

.sws-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sws-space-xl);
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-step-card {
	background: var(--sws-color-white);
	padding: var(--sws-space-xl);
	border-radius: var(--sws-radius-xl);
	text-align: center;
	box-shadow: var(--sws-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}

.sws-step-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sws-shadow-md);
}

/* .sws-step-number (the homepage step tile) folds into the shared
   numbered-step tile group in §Check-landing — the old 64px yellow circle here
   only ever rendered overridden by the Home variant. */

.sws-step-title {
	font-family: var(--sws-font-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-sm);
}

.sws-step-text {
	font-size: 16px;
	color: var(--sws-color-text-secondary);
}

/* =============================================================================
   3. STATS BAND
   ========================================================================== */

.sws-stats-banner {
	background: var(--sws-color-dark);
	padding: var(--sws-space-2xl) var(--sws-space-lg);
}

.sws-stats-container {
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-stats-title {
	font-family: var(--sws-font-display);
	font-size: 26px;
	font-weight: 700;
	text-align: center;
	color: var(--sws-color-white);
	margin-bottom: var(--sws-space-xl);
}

.sws-stats-title span {
	color: var(--sws-color-primary);
}

.sws-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sws-space-lg);
	text-align: center;
	margin: 0;
}

.sws-stat-item {
	padding: var(--sws-space-lg);
	background: var(--sws-color-dark-medium);
	border-radius: var(--sws-radius-xl);
}

.sws-stat-value {
	font-family: var(--sws-font-display);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sws-color-primary);
	margin: 0;
}

.sws-stat-label {
	order: 2; /* label rendered first in markup (dt) but shown under the value */
	font-size: 15px;
	font-weight: 500;
	color: var(--sws-color-text-on-dark-muted);
	margin-top: var(--sws-space-xs);
}

/* dl/dt/dd reset for the stat layout */
.sws-stat-item {
	display: flex;
	flex-direction: column;
}

.sws-stat-value {
	order: 1;
}

/* =============================================================================
   4. TRUST SIGNALS ("Why trust us")
   ========================================================================== */

.sws-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sws-space-lg);
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-trust-item {
	text-align: center;
	padding: var(--sws-space-lg);
}

.sws-trust-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--sws-space-md);
	font-size: 36px;
	background: var(--sws-color-primary-light);
	border-radius: var(--sws-radius-xl);
}

.sws-trust-title {
	font-family: var(--sws-font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-xs);
}

.sws-trust-text {
	font-size: 16px;
	color: var(--sws-color-text-secondary);
}

/* =============================================================================
   5. REVIEWS OF SCAMWISE SENIORS — static testimonials
   ========================================================================== */

.sws-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sws-space-lg);
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-testimonial-card {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
	padding: var(--sws-space-xl);
	background: var(--sws-color-bg-alt);
	border-radius: var(--sws-radius-xl);
	box-shadow: var(--sws-shadow-sm);
}

.sws-testimonial-quote {
	flex: 1;
	margin: 0;
}

.sws-testimonial-quote p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sws-color-text);
}

.sws-testimonial-author {
	display: flex;
	align-items: center;
	gap: var(--sws-space-sm);
}

.sws-testimonial-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	font-weight: 700;
	font-size: 18px;
	color: var(--sws-color-white);
	background: var(--sws-color-dark);
	border-radius: 50%;
}

.sws-testimonial-meta {
	display: flex;
	flex-direction: column;
}

.sws-testimonial-name {
	font-weight: 700;
	font-size: 16px;
	color: var(--sws-color-text);
}

.sws-testimonial-location {
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

/* =============================================================================
   6. IN THE PRESS — static
   ========================================================================== */

.sws-press-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sws-space-lg);
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-press-item {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
	padding: var(--sws-space-xl);
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
	box-shadow: var(--sws-shadow-sm);
}

.sws-press-quote {
	flex: 1;
	margin: 0;
}

.sws-press-quote p {
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
	color: var(--sws-color-text);
}

.sws-press-outlet {
	font-family: var(--sws-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--sws-color-dark);
}

/* =============================================================================
   7. HELP & INFO LINKS
   ========================================================================== */

.sws-help-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--sws-space-md);
	max-width: 960px;
	margin: 0 auto;
}

.sws-help-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sws-space-xs);
	padding: var(--sws-space-lg) var(--sws-space-md);
	min-height: 110px;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-lg);
	box-shadow: var(--sws-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}

.sws-help-link:hover,
.sws-help-link:focus {
	transform: translateY(-4px);
	box-shadow: var(--sws-shadow-md);
}

.sws-help-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	font-size: 28px;
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-md);
}

.sws-help-label {
	font-size: 15px;
	font-weight: 600;
}

/* =============================================================================
   8. MISSION TEASER
   ========================================================================== */

.sws-mission-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	max-width: var(--sws-container-narrow);
	margin: 0 auto;
}

.sws-mission-title {
	font-family: var(--sws-font-display);
	font-size: 34px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-md);
}

.sws-mission-title span {
	color: var(--sws-color-primary);
}

.sws-mission-content p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--sws-color-text-secondary);
	margin-bottom: var(--sws-space-lg);
}

/* =============================================================================
   11. NEWSLETTER + SHARED WIDGET  [scamwise_newsletter_form]
   The section wrapper is owned by the page; the form markup is owned by the
   shortcode and follows the demo EXACTLY:
     .newsletter-container > h2 + p + .newsletter-form
     .newsletter-form > .newsletter-input + .btn-dark
   ========================================================================== */

.sws-newsletter-section {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-primary);
}

/* Widget-owned markup (demo class names): .newsletter-container > h2 + p + form */
.newsletter-container {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}

.newsletter-container h2 {
	font-family: var(--sws-font-display);
	font-size: 30px;
	font-weight: 700;
	color: var(--sws-color-primary-text);
	margin-bottom: var(--sws-space-xs);
}

.newsletter-container p {
	font-size: 17px;
	color: var(--sws-color-dark-medium);
	margin-bottom: var(--sws-space-lg);
}

.newsletter-form {
	display: flex;
	gap: var(--sws-space-sm);
}

.newsletter-input {
	flex: 1;
	min-width: 0;
	min-height: 56px;
	padding: 16px 20px;
	font-family: var(--sws-font-body);
	font-size: 17px;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	border: 2px solid transparent;
	border-radius: var(--sws-radius-lg);
	outline: none;
	box-shadow: var(--sws-shadow-sm);
	transition: box-shadow 0.2s, border-color 0.2s;
}

.newsletter-input::placeholder {
	color: var(--sws-color-text-muted);
}

.newsletter-input:focus {
	border-color: var(--sws-color-dark);
	box-shadow: var(--sws-shadow-md);
}

.btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 16px 28px;
	font-family: var(--sws-font-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--sws-color-white);
	background: var(--sws-color-dark);
	border: 2px solid var(--sws-color-dark);
	border-radius: var(--sws-radius-lg);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s, border-color 0.2s;
}

.btn-dark:hover,
.btn-dark:focus {
	background: var(--sws-color-dark-medium);
	border-color: var(--sws-color-dark-medium);
}

/* =============================================================================
   CHECK-RESULTS PAGE  [scamwise_search_results] / templates/pages/results.php
   -----------------------------------------------------------------------------
   The app's killer feature: the color-coded trust-score result. Markup/classes
   reproduce scamwiseseniors-demo-ideas/02-check-results.html so the design lands
   1:1, but recolored from the shared --sws-* trust-band tokens (no new :root).

   F12 (decisions §C14): the verdict slug (.safe/.warning/.danger/.unknown) is on
   .results-header AND .trust-badge directly; `.has-age-warning` is an extra flag.
   Senior-friendly: large type, strong contrast, >=48px targets, visible focus.
   ========================================================================== */

/* =============================================================================
   CHECK-A-WEBSITE LANDING (the /check/ prompt state — no lookup value).
   Redesign port of "Check a Website.dc.html": a dark hero with the real lookup
   form + example links, then marketing sections. Scoped under .sws-checkland-*;
   mockup hex mapped to --sws-color-* tokens. CSP-safe (inline SVG, no JS).
   ========================================================================== */

/* Hero (dark radial). */
.sws-checkland-hero {
	padding: 64px var(--sws-space-lg) 72px;
	text-align: center;
	background: radial-gradient(130% 90% at 50% -10%, #313131 0%, var(--sws-color-dark) 45%, #161616 100%);
}

.sws-checkland-hero-inner {
	max-width: 720px;
	margin: 0 auto;
}

/* Yellow eyebrow pill — shared by the Check-landing and About hero. */
.sws-checkland-eyebrow,
.sws-about-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sws-space-xs);
	margin-bottom: var(--sws-space-lg);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-color-primary);
	background: rgba(255, 220, 15, 0.14);
	border-radius: var(--sws-radius-full);
}

.sws-checkland-title {
	font-family: var(--sws-font-display);
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.06;
	color: var(--sws-color-white);
	margin: 0 0 var(--sws-space-md);
}

.sws-checkland-lead {
	font-size: 20px;
	line-height: 1.55;
	color: var(--sws-color-text-on-dark-muted);
	max-width: 600px;
	margin: 0 auto var(--sws-space-xl);
}

.sws-checkland-lead strong {
	color: var(--sws-color-white);
	font-weight: 700;
}

/* Hero search box: big (62px) input + yellow button (reuses the lookup form). */
.sws-checkland-form {
	max-width: 640px;
	margin: 0 auto;
}

.sws-checkland-form .search-box {
	flex-wrap: wrap;
}

.sws-checkland-form .search-input {
	min-height: 62px;
	border: none;
	border-radius: var(--sws-radius-lg);
	font-size: 18px;
}

.sws-checkland-form .search-input:focus {
	box-shadow: 0 0 0 3px rgba(255, 220, 15, 0.6);
}

.sws-checkland-form .btn-primary {
	min-height: 62px;
	padding: 0 30px;
	font-size: 18px;
}

/* Example chips → real /check/{domain}/ links. */
.sws-checkland-examples {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--sws-space-md);
}

.sws-checkland-examples-label {
	font-size: 14px;
	color: var(--sws-color-text-on-dark-muted);
}

.sws-checkland-chip {
	padding: 7px 14px;
	font-size: 14px;
	font-weight: 600;
	color: #E6E6E0;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--sws-radius-full);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.sws-checkland-chip:hover,
.sws-checkland-chip:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	outline: none;
}

.sws-checkland-chip--danger {
	color: #FCA5A5;
	background: rgba(220, 38, 38, 0.16);
	border-color: rgba(220, 38, 38, 0.3);
}

.sws-checkland-chip--danger:hover,
.sws-checkland-chip--danger:focus-visible {
	background: rgba(220, 38, 38, 0.26);
}

/* Trust row. */
.sws-checkland-trust {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sws-space-lg);
	margin: var(--sws-space-xl) 0 0;
	padding: 0;
	list-style: none;
}

.sws-checkland-trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sws-space-xs);
	font-size: 14.5px;
	color: var(--sws-color-text-on-dark-muted);
}

.sws-checkland-trust-icon {
	display: inline-flex;
	color: var(--sws-color-primary);
}

/* Marketing sections. */
.sws-checkland-section {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-bg);
}

.sws-checkland-section--white {
	background: var(--sws-color-white);
}

.sws-checkland-container {
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-checkland-head {
	max-width: 600px;
	margin: 0 auto var(--sws-space-2xl);
	text-align: center;
}

.sws-checkland-kicker {
	display: block;
	margin-bottom: var(--sws-space-xs);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sws-color-safe-dark);
}

.sws-checkland-kicker--yellow {
	color: var(--sws-color-primary);
}

.sws-checkland-h2 {
	font-family: var(--sws-font-display);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-checkland-h2--ondark {
	color: var(--sws-color-white);
}

.sws-checkland-sub {
	font-size: 18px;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-checkland-sub--ondark {
	color: var(--sws-color-text-on-dark-muted);
}

/* Card grids. */
.sws-checkland-grid {
	display: grid;
	gap: var(--sws-space-lg);
}

.sws-checkland-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.sws-checkland-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.sws-checkland-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Bordered white card — shared by the Check-landing, About and Help pages. */
.sws-checkland-card,
.sws-about-card,
.sws-help-card {
	padding: 28px 26px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
}

.sws-checkland-card--soft {
	background: var(--sws-color-bg-alt);
}

/* Numbered-step tile (dark square, yellow ink) — shared by Check-landing,
   About, Help and Home. (Report uses a smaller 30px variant — its deltas live
   with the report styles.) */
.sws-checkland-step-num,
.sws-about-step-number,
.sws-help-step-num,
.sws-step-number,
.sws-report-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sws-space-md);
	font-family: var(--sws-font-display);
	font-size: 20px;
	font-weight: 800;
	color: var(--sws-color-primary);
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-lg);
}

.sws-checkland-card-title {
	font-family: var(--sws-font-display);
	font-size: 19px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-xs);
}

.sws-checkland-card-text {
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

/* "What we look at" icon tiles (tone-coloured). */
.sws-checkland-signal-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sws-space-md);
	border-radius: var(--sws-radius-lg);
}

.sws-checkland-signal-icon--amber {
	color: var(--sws-color-amber-ink);
	background: var(--sws-color-primary-light);
}

.sws-checkland-signal-icon--green {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
}

.sws-checkland-signal-icon--danger {
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
}

.sws-checkland-signal-icon--info {
	color: var(--sws-color-info);
	background: var(--sws-color-info-light);
}

.sws-checkland-signal-icon--violet {
	color: var(--sws-color-violet);
	background: var(--sws-color-violet-light);
}

.sws-checkland-signal-icon--gold {
	color: #C8961E;
	background: #FCEFD2;
}

/* Example demo cards. */
.sws-checkland-demo {
	padding: 24px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-left: 5px solid var(--sws-color-unknown);
	border-radius: var(--sws-radius-xl);
}

.sws-checkland-demo--safe {
	border-left-color: var(--sws-color-safe-dark);
}

.sws-checkland-demo--danger {
	border-left-color: var(--sws-color-danger);
}

.sws-checkland-demo-head {
	display: flex;
	align-items: center;
	gap: var(--sws-space-md);
	padding-bottom: var(--sws-space-md);
	margin-bottom: var(--sws-space-md);
	border-bottom: 1px solid var(--sws-color-border);
}

.sws-checkland-demo-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 62px;
	height: 62px;
	border: 4px solid var(--sws-color-unknown);
	border-radius: 50%;
}

.sws-checkland-demo--safe .sws-checkland-demo-score {
	border-color: var(--sws-color-safe-dark);
}

.sws-checkland-demo--danger .sws-checkland-demo-score {
	border-color: var(--sws-color-danger);
}

.sws-checkland-demo-score-num {
	font-family: var(--sws-font-display);
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
}

.sws-checkland-demo--safe .sws-checkland-demo-score-num {
	color: var(--sws-color-safe-dark);
}

.sws-checkland-demo--danger .sws-checkland-demo-score-num {
	color: var(--sws-color-danger);
}

.sws-checkland-demo-score-max {
	font-size: 9px;
	font-weight: 700;
	color: var(--sws-color-text-muted);
}

.sws-checkland-demo-badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	border-radius: var(--sws-radius-full);
}

.sws-checkland-demo--safe .sws-checkland-demo-badge {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
}

.sws-checkland-demo--danger .sws-checkland-demo-badge {
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
}

.sws-checkland-demo-domain {
	font-family: var(--sws-font-display);
	font-size: 20px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin-top: 7px;
	word-break: break-word;
}

.sws-checkland-demo-signals {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-checkland-demo-signal {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	color: var(--sws-color-text-secondary);
}

.sws-checkland-demo-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	font-size: 12px;
	font-weight: 800;
	color: var(--sws-color-white);
	border-radius: 50%;
}

.sws-checkland-demo-mark.is-ok {
	background: var(--sws-color-safe-dark);
}

.sws-checkland-demo-mark.is-bad {
	background: var(--sws-color-danger);
}

/* Warning signs (dark band). */
.sws-checkland-dark {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-dark);
}

.sws-checkland-warn {
	padding: 24px 22px;
	background: #262626;
	border: 1px solid #333333;
	border-radius: var(--sws-radius-xl);
}

.sws-checkland-warn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--sws-space-md);
	color: var(--sws-color-primary);
	background: rgba(255, 220, 15, 0.14);
	border-radius: var(--sws-radius-lg);
}

.sws-checkland-warn-title {
	font-size: 17px;
	font-weight: 800;
	color: var(--sws-color-white);
	margin: 0 0 7px;
}

.sws-checkland-warn-text {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--sws-color-text-on-dark-muted);
	margin: 0;
}

/* CTA band (yellow) — shared by the Check-landing and About pages. */
.sws-checkland-cta,
.sws-about-cta-band {
	padding: 56px var(--sws-space-lg);
	background: var(--sws-color-primary);
}

.sws-checkland-cta-inner,
.sws-about-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-checkland-cta-copy,
.sws-about-cta-copy {
	flex: 1;
	min-width: 260px;
}

.sws-checkland-cta-title,
.sws-about-cta-title {
	font-family: var(--sws-font-display);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sws-color-dark);
	margin: 0 0 var(--sws-space-xs);
}

.sws-checkland-cta-text,
.sws-about-cta-text {
	font-size: 17px;
	line-height: 1.5;
	color: var(--sws-color-dark-medium);
	margin: 0;
}

.sws-checkland-cta-actions,
.sws-about-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sws-space-sm);
}

/* Check-landing responsive. */
@media (max-width: 1024px) {
	.sws-checkland-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 900px) {
	.sws-checkland-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sws-checkland-grid--2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.sws-checkland-grid--3,
	.sws-checkland-grid--4 {
		grid-template-columns: 1fr;
	}

	.sws-checkland-title {
		font-size: 34px;
	}

	.sws-checkland-h2 {
		font-size: 28px;
	}

	.sws-checkland-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Results header: animated Trust-Score shield hero --------------------- */
/* Per-band theming via --hero-* custom properties (mapped to our canonical band
   tokens); shared structural + animation rules below. CSP-safe: self-hosted
   --sws-font-display, pure-CSS animation, inline SVG — no external font or JS. */
.sws-results .sws-shield-hero.safe {
	--hero-top: var(--sws-color-safe);
	--hero-mid: var(--sws-color-safe-dark);
	--hero-end: var(--sws-color-safe-darker);
	--hero-fill: var(--sws-color-safe-light);
	--hero-ink: var(--sws-color-safe-dark);
	--hero-pill-bg: var(--sws-color-safe-light);
	--hero-pill-border: rgba(34, 197, 94, 0.30);
	--hero-glow: rgba(220, 252, 231, 0.50);
	--hero-pulse: rgba(220, 252, 231, 0.70);
}

.sws-results .sws-shield-hero.warning {
	--hero-top: var(--sws-color-warning);
	--hero-mid: var(--sws-color-warning-dark);
	--hero-end: var(--sws-color-warning-darker);
	--hero-fill: var(--sws-color-warning-light);
	--hero-ink: var(--sws-color-warning-dark);
	--hero-pill-bg: var(--sws-color-warning-light);
	--hero-pill-border: rgba(245, 158, 11, 0.30);
	--hero-glow: rgba(254, 243, 199, 0.55);
	--hero-pulse: rgba(254, 243, 199, 0.75);
}

.sws-results .sws-shield-hero.danger {
	--hero-top: var(--sws-color-danger);
	--hero-mid: var(--sws-color-danger-dark);
	--hero-end: var(--sws-color-danger-darker);
	--hero-fill: var(--sws-color-danger-light);
	--hero-ink: var(--sws-color-danger-dark);
	--hero-pill-bg: var(--sws-color-danger-light);
	--hero-pill-border: rgba(239, 68, 68, 0.30);
	--hero-glow: rgba(254, 226, 226, 0.55);
	--hero-pulse: rgba(254, 226, 226, 0.75);
}

.sws-results .sws-shield-hero.unknown {
	--hero-top: var(--sws-color-unknown);
	--hero-mid: var(--sws-color-unknown-dark);
	--hero-end: #3b424c; /* a touch darker than unknown-dark (no -darker token) */
	--hero-fill: var(--sws-color-unknown-light);
	--hero-ink: var(--sws-color-unknown-dark);
	--hero-pill-bg: var(--sws-color-unknown-light);
	--hero-pill-border: rgba(107, 114, 128, 0.30);
	--hero-glow: rgba(243, 244, 246, 0.50);
	--hero-pulse: rgba(243, 244, 246, 0.70);
}

.sws-results .sws-shield-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(22px, 5vw, 32px);
	/* generous bottom padding leaves room for the results card to overlap up */
	padding: clamp(36px, 8vw, 52px) clamp(18px, 5vw, 24px) 120px;
	text-align: center;
	background: radial-gradient(120% 100% at 50% 0%, var(--hero-top) 0%, var(--hero-mid) 45%, var(--hero-end) 100%);
}

/* Shield stage + pulsing glow rings */
.sws-results .sws-shield-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(184px, 48vw, 232px);
	aspect-ratio: 248 / 280;
}

.sws-results .sws-shield-ring {
	position: absolute;
	width: 86%;
	height: 88%;
	border-radius: 46% 46% 50% 50% / 38% 38% 62% 62%;
	background: radial-gradient(closest-side, var(--hero-glow), rgba(255, 255, 255, 0));
	animation: sws-shield-ring 3.2s ease-out infinite;
}

.sws-results .sws-shield-ring:nth-of-type(2) {
	animation-delay: 1.6s;
}

/* Floating shield */
.sws-results .sws-shield {
	position: relative;
	width: 81%;
	aspect-ratio: 200 / 232;
	animation: sws-shield-bob 4.2s ease-in-out infinite;
	filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18));
}

.sws-results .sws-shield-svg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.sws-results .sws-shield-fill {
	fill: var(--hero-fill);
}

/* Shine sweep, clipped to the shield silhouette */
.sws-results .sws-shield-shine {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: url(#sws-shield-clip);
}

.sws-results .sws-shield-shine::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 0;
	width: 55%;
	height: 140%;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	animation: sws-shield-shine 3.6s ease-in-out infinite;
}

/* Score + label, centered on the shield */
.sws-results .sws-shield-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 5%;
}

.sws-results .sws-shield-score {
	font-family: var(--sws-font-display);
	font-size: clamp(40px, 12vw, 60px);
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -2px;
	color: var(--hero-ink);
}

.sws-results .sws-shield-score-label {
	margin-top: 5%;
	font-size: clamp(10px, 3vw, 13px);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--hero-ink);
}

/* Corner status badge (dark band ink, light icon) */
.sws-results .sws-shield-badge {
	position: absolute;
	top: 2%;
	right: 2%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--hero-ink);
	border: 3px solid var(--hero-fill);
	box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
}

.sws-results .sws-shield-badge svg {
	width: 58%;
	height: 58%;
}

.sws-results .sws-shield-badge path {
	stroke: var(--hero-fill);
}

/* Verdict pill with pulse-glow border */
.sws-results .sws-shield-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: clamp(12px, 3.4vw, 15px) clamp(26px, 7vw, 38px);
	font-family: var(--sws-font-display);
	font-size: clamp(18px, 5vw, 24px);
	font-weight: 800;
	color: var(--hero-ink);
	background: var(--hero-pill-bg);
	border: 2px solid var(--hero-pill-border);
	border-radius: var(--sws-radius-full);
	animation: sws-shield-pulse 3s ease-in-out infinite;
}

.sws-results .sws-shield-pill svg {
	flex: none;
}

.sws-results .sws-shield-pill path {
	stroke: var(--hero-ink);
}

/* Domain (white on the band gradient) */
.sws-results .sws-shield-domain {
	margin: 0;
	font-family: var(--sws-font-display);
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--sws-color-white);
	word-break: break-all;
}

@keyframes sws-shield-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

@keyframes sws-shield-ring {
	0% { transform: scale(0.85); opacity: 0.55; }
	70% { opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}

@keyframes sws-shield-shine {
	0% { transform: translateX(-130%) skewX(-18deg); }
	55%, 100% { transform: translateX(230%) skewX(-18deg); }
}

@keyframes sws-shield-pulse {
	0% { box-shadow: 0 0 0 0 var(--hero-pulse); }
	70% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.sws-results .sws-shield,
	.sws-results .sws-shield-ring,
	.sws-results .sws-shield-shine::before,
	.sws-results .sws-shield-pill {
		animation: none !important;
	}
}

/* --- Results card (overlaps the header) ----------------------------------- */
.sws-results .results-main {
	max-width: var(--sws-container-max);
	margin: -80px auto var(--sws-space-2xl);
	padding: 0 var(--sws-space-lg);
	position: relative;
	z-index: 10;
}

.sws-results .results-card {
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-2xl);
	box-shadow: var(--sws-shadow-xl);
	overflow: hidden;
}

.sws-results .card-top {
	display: flex;
	align-items: center;
	gap: var(--sws-space-lg);
	padding: var(--sws-space-lg);
	border-bottom: 1px solid var(--sws-color-border);
}

.sws-results .domain-info {
	flex: 1;
}

.sws-results .domain-label {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sws-color-text-muted);
	margin-bottom: 5px;
}

.sws-results .domain-name {
	font-family: var(--sws-font-display);
	font-size: 26px;
	font-weight: 800;
	color: var(--sws-color-text);
	word-break: break-all;
}

/* --- Age warning banner --------------------------------------------------- */
.sws-results .age-warning {
	display: flex;
	align-items: flex-start;
	gap: var(--sws-space-md);
	margin: var(--sws-space-lg);
	padding: var(--sws-space-lg);
	background: var(--sws-color-warning-light);
	border: 2px solid var(--sws-color-warning);
	border-radius: var(--sws-radius-lg);
}

.sws-results .age-warning-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	font-size: 26px;
	color: var(--sws-color-white);
	background: var(--sws-color-warning-dark);
	border-radius: 50%;
}

.sws-results .age-warning-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--sws-color-warning-dark);
	margin-bottom: 6px;
}

.sws-results .age-warning-content p {
	font-size: 16px;
	color: var(--sws-color-text-secondary);
	line-height: 1.6;
}

.sws-results .age-warning-content strong {
	color: var(--sws-color-text);
}

/* --- Summary (inset card) ------------------------------------------------- */
.sws-results .summary-text {
	margin: var(--sws-space-lg);
	padding: var(--sws-space-lg);
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
}

.sws-results .summary-text p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--sws-color-text-secondary);
	margin-bottom: var(--sws-space-md);
}

.sws-results .summary-text p:last-child {
	margin-bottom: 0;
}

.sws-results .summary-text strong {
	color: var(--sws-color-text);
}

/* --- Highlights (stacked groups, circular badge icons) -------------------- */
.sws-results .highlights-section {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-lg);
	padding: var(--sws-space-lg);
}

.sws-results .highlights-heading {
	display: flex;
	align-items: center;
	gap: var(--sws-space-xs);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: var(--sws-space-md);
}

.sws-results .highlights-column.positive .highlights-heading {
	color: var(--sws-color-safe-dark);
}

.sws-results .highlights-column.negative .highlights-heading {
	color: var(--sws-color-danger-dark);
}

.sws-results .highlights-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-results .highlight-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	font-size: 16px;
	color: var(--sws-color-text-secondary);
	line-height: 1.5;
}

.sws-results .highlight-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	font-size: 13px;
	font-weight: 700;
	border-radius: 50%;
}

.sws-results .highlight-icon.positive {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
}

.sws-results .highlight-icon.negative {
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
}

/* --- Action buttons row --------------------------------------------------- */
.sws-results .cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sws-space-sm);
	padding: var(--sws-space-lg);
	border-top: 1px solid var(--sws-color-border);
	border-bottom: 1px solid var(--sws-color-border);
}

/* The .sws-btn-outline variant (results-only tertiary action). */
.sws-btn-outline {
	background: transparent;
	color: var(--sws-color-text-secondary);
	border-color: var(--sws-color-border);
}

.sws-btn-outline:hover,
.sws-btn-outline:focus {
	color: var(--sws-color-dark);
	border-color: var(--sws-color-dark);
}

/* Disabled verify CTA (record verified within the re-check window, §C17). */
.sws-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Low-emphasis "Continue to website anyway" link on danger/warning results
   (copy-conversion H1): an outline button that warns in red on hover, so the
   de-emphasised escape hatch never competes with the protective primary CTA. */
.sws-btn-caution {
	color: var(--sws-color-text-muted);
}

.sws-btn-caution:hover,
.sws-btn-caution:focus {
	color: var(--sws-color-danger-dark);
	border-color: var(--sws-color-danger-dark);
}

/* Reassurance / expectation line under a form's submit button (copy M3): shared
   by the report (anonymity) and contact (reply time) forms. The review form's
   reassurance sits beside its button instead (see .sws-review-actions). */
.sws-report-reassurance,
.sws-contact-reassurance {
	display: flex;
	align-items: flex-start; /* keep the lock icon beside the first line of text */
	justify-content: center;
	gap: var(--sws-space-xs);
	margin-top: var(--sws-space-md);
	font-size: 15px;
	color: var(--sws-color-text-muted);
	text-align: left;
}

/* The lock icon should never shrink or wrap away from its sentence. */
.sws-report-reassurance > span[aria-hidden],
.sws-contact-reassurance > span[aria-hidden] {
	flex: none;
	line-height: 1.5;
}

/* Report form: a clearer gap between the submit button and the reassurance. */
.sws-report-reassurance {
	margin-top: var(--sws-space-lg);
}

/* Short framing line at the top of the review form. */
.sws-review-intro {
	margin: 0 0 var(--sws-space-md);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
}

/* "No spam" fine print under the newsletter field (copy M4). Sits on the yellow
   newsletter band, so it uses the same dark-medium ink as the intro line.
   15px = the shared reassurance/fineprint microcopy size. */
.newsletter-fineprint {
	margin-top: var(--sws-space-sm);
	font-size: 15px;
	color: var(--sws-color-dark-medium);
}

/* Small note under the action row explaining a disabled re-request. */
.sws-verify-note {
	margin: 0;
	padding: var(--sws-space-lg);
	background: var(--sws-color-bg-alt);
	border-bottom: 1px solid var(--sws-color-border);
	color: var(--sws-color-text-secondary);
	font-size: 15px;
}

/* --- Fact accordions (<details>/<summary>) -------------------------------- */
.sws-results .facts-section {
	border-bottom: 1px solid var(--sws-color-border);
}

.sws-results .facts-section:last-of-type {
	border-bottom: none;
}

.sws-results .facts-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sws-space-md);
	padding: var(--sws-space-lg);
	cursor: pointer;
	list-style: none;
	transition: background 0.2s;
}

/* Hide the native disclosure triangle (we use .facts-toggle). */
.sws-results .facts-header::-webkit-details-marker {
	display: none;
}

.sws-results .facts-header::marker {
	content: '';
}

.sws-results .facts-header:hover {
	background: var(--sws-color-bg-alt);
}

.sws-results .facts-title {
	display: flex;
	align-items: center;
	gap: var(--sws-space-sm);
	font-size: 18px;
	font-weight: 700;
	color: var(--sws-color-text);
}

/* Plain inline line-art category marker (no box) — matches the mockup. */
.sws-results .facts-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.sws-results .facts-icon svg {
	display: block;
}

.sws-results .facts-toggle {
	font-size: 14px;
	color: var(--sws-color-text-muted);
	transition: transform 0.2s;
}

.sws-results .facts-section[open] > .facts-header .facts-toggle {
	transform: rotate(180deg);
}

.sws-results .facts-content {
	padding: var(--sws-space-md) var(--sws-space-lg) var(--sws-space-lg);
}

.sws-results .facts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sws-space-md);
}

.sws-results .fact-item {
	padding: var(--sws-space-md);
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-md);
}

.sws-results .fact-label {
	font-size: 12px;
	color: var(--sws-color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

.sws-results .fact-value {
	font-size: 16px;
	font-weight: 600;
	color: var(--sws-color-text);
}

.sws-results .fact-value.positive {
	color: var(--sws-color-safe-dark);
}

.sws-results .fact-value.negative {
	color: var(--sws-color-danger-dark);
}

/* --- Reviews -------------------------------------------------------------- */
.sws-results .reviews-section {
	padding: var(--sws-space-lg);
	border-top: 1px solid var(--sws-color-border);
}

.sws-results .reviews-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sws-space-xs);
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: var(--sws-space-md);
}

.sws-results .reviews-title {
	font-family: var(--sws-font-display);
	font-size: 21px;
	font-weight: 700;
	color: var(--sws-color-text);
}

.sws-results .reviews-count {
	font-size: 15px;
	color: var(--sws-color-text-muted);
}

.sws-results .reviews-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-results .review-item {
	padding: var(--sws-space-md);
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	margin-bottom: var(--sws-space-sm);
}

.sws-results .review-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sws-space-xs);
	margin-bottom: 6px;
}

.sws-results .review-user {
	font-size: 15px;
	font-weight: 600;
	color: var(--sws-color-text);
}

.sws-results .review-date {
	font-size: 13px;
	color: var(--sws-color-text-muted);
}

.sws-results .review-rating {
	margin-bottom: 6px;
	line-height: 1;
}

.sws-results .sws-star {
	font-size: 18px;
}

.sws-results .sws-star--full {
	color: var(--sws-color-primary);
}

.sws-results .sws-star--empty {
	color: var(--sws-color-border);
}

.sws-results .review-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
}

.sws-results .reviews-empty {
	padding: var(--sws-space-md) 0;
	font-size: 16px;
	color: var(--sws-color-text-secondary);
}

.sws-results .review-form-slot {
	margin-top: var(--sws-space-lg);
}

/* --- Safety-guide card (full-width, below the result card) ---------------- */
.sws-results .sws-guide-card {
	margin-top: var(--sws-space-lg);
	padding: var(--sws-space-lg) var(--sws-space-md);
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-2xl);
	box-shadow: var(--sws-shadow-xl);
}

.sws-results .sidebar-title {
	font-family: var(--sws-font-display);
	font-size: 21px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin: 0 var(--sws-space-xs) var(--sws-space-sm);
}

/* Each safety-guide row is a real link to the Help guide. */
.sws-results .story-item {
	display: flex;
	align-items: center;
	gap: var(--sws-space-md);
	padding: var(--sws-space-md) var(--sws-space-xs);
	border-radius: var(--sws-radius-lg);
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: background 0.15s;
}

.sws-results .story-item + .story-item {
	border-top: 1px solid var(--sws-color-border);
}

.sws-results a.story-item:hover,
.sws-results a.story-item:focus-visible {
	background: var(--sws-color-bg-alt);
	outline: none;
}

.sws-results .story-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 54px;
	height: 44px;
	color: var(--sws-color-text-muted);
	background: var(--sws-color-bg-alt);
	border-radius: var(--sws-radius-md);
}

.sws-results .story-image svg {
	display: block;
}

.sws-results a.story-item:hover .story-image,
.sws-results a.story-item:focus-visible .story-image {
	background: var(--sws-color-border);
}

.sws-results .story-heading {
	font-size: 17px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin-bottom: 2px;
}

.sws-results .story-content p {
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

/* =============================================================================
   HOME PAGE REDESIGN (ported from sws-new-page-improvments/Home.dc.html)
   Every rule is scoped under `.sws-home` so the section classes the homepage
   shares with /about/ (.sws-hero / .sws-mission / .sws-trust / .sws-cta-card /
   .sws-steps) are NOT restyled for that page. New, home-only elements get new
   classes. Icon tiles colour their inline SVGs via `currentColor` + .sws-tone-*.
   ========================================================================== */

/* --- Section eyebrow label ------------------------------------------------ */
.sws-home .sws-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sws-color-safe-dark);
	margin-bottom: 10px;
}

.sws-home .sws-eyebrow--red {
	color: var(--sws-color-danger-dark);
}

/* --- Icon-tile colour families (trust + help tiles) ----------------------- */
.sws-home .sws-tone-green  { color: var(--sws-color-safe-dark); background: #DDF1E3; }
.sws-home .sws-tone-amber  { color: var(--sws-color-amber-ink); background: #FFF6CC; }
.sws-home .sws-tone-blue   { color: var(--sws-color-info); background: var(--sws-color-info-light); }
.sws-home .sws-tone-purple { color: var(--sws-color-violet); background: var(--sws-color-violet-light); }
.sws-home .sws-tone-red    { color: var(--sws-color-danger-dark); background: #FDECEA; }
.sws-home .sws-tone-gray   { color: var(--sws-color-text-secondary); background: #F1F1EA; }

/* --- 1. Hero -------------------------------------------------------------- */
.sws-home .sws-hero {
	background: radial-gradient(130% 90% at 50% -10%, var(--sws-color-dark-light) 0%, var(--sws-color-dark-medium) 45%, var(--sws-color-dark) 100%);
	padding: 58px var(--sws-space-lg) 64px;
}

.sws-home .sws-hero-lead {
	max-width: 560px;
	/* Restore the centred auto side-margins (the .sws-page p reset, specificity
	   0,1,1, otherwise beats the base .sws-hero-lead 0,1,0 and left-aligns it). */
	margin: 0 auto 36px;
}

/* Section title spacing — the .sws-page h2 reset (0,1,1) zeroes the base title's
   bottom margin, so a header WITHOUT a subtitle (e.g. Help) sits flush against
   its grid. Restore a consistent gap below every home section title. */
.sws-home .sws-section-title {
	margin-bottom: var(--sws-space-sm);
}

.sws-home .sws-dual-cta {
	grid-template-columns: 1.3fr 1fr;
	text-align: left;
}

.sws-home .sws-cta-card-icon {
	display: inline-flex;
	align-items: center;
	color: var(--sws-color-dark);
}

.sws-home .sws-cta-card-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Hero "Try:" example chips (real GET lookups into the Check page) */
.sws-home .sws-hero-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sws-space-xs);
	margin-top: var(--sws-space-sm);
}

.sws-home .sws-hero-chips-label {
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

.sws-home .sws-hero-chip {
	font-size: 13px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: var(--sws-radius-full);
	border: 1px solid var(--sws-color-border);
	text-decoration: none;
}

.sws-home .sws-hero-chip--safe {
	background: var(--sws-color-bg-alt);
	color: var(--sws-color-text-secondary);
}

.sws-home .sws-hero-chip--scam {
	background: var(--sws-color-danger-light);
	border-color: var(--sws-color-danger-light);
	color: var(--sws-color-danger-dark);
}

.sws-home .sws-hero-chip:hover,
.sws-home .sws-hero-chip:focus {
	border-color: var(--sws-color-dark);
}

/* Dark "Report a scam" hero card */
.sws-home .sws-cta-card--dark {
	background: var(--sws-color-dark-medium);
	border: 1px solid var(--sws-color-dark-light);
	box-shadow: none;
}

.sws-home .sws-cta-card--dark .sws-cta-card-title {
	color: var(--sws-color-white);
}

.sws-home .sws-cta-card--dark .sws-cta-card-text {
	color: var(--sws-color-text-on-dark-muted);
}

.sws-home .sws-cta-card--dark .sws-cta-card-icon {
	color: var(--sws-color-primary);
}

.sws-home .sws-hero-report-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sws-space-xs);
	margin-top: auto;
	min-height: 52px;
	padding: 13px 20px;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	color: var(--sws-color-primary);
	background: transparent;
	border: 2px solid var(--sws-color-primary);
	border-radius: var(--sws-radius-lg);
	transition: background 0.2s, color 0.2s;
}

.sws-home .sws-hero-report-btn:hover,
.sws-home .sws-hero-report-btn:focus {
	background: var(--sws-color-primary);
	color: var(--sws-color-primary-text);
}

/* --- 2. How it works (left-aligned cards, rounded-square number) ----------
   .sws-step-number now IS the shared numbered-step tile (see §Check-landing),
   so no Home override is needed. */
.sws-home .sws-step-card {
	text-align: left;
	border: 1px solid var(--sws-color-border);
}

/* --- 3. Stats band (subtle card border) ----------------------------------- */
.sws-home .sws-stat-item {
	border: 1px solid var(--sws-color-dark-light);
}

/* --- 4. Why trust (value cards + tone icon tiles) ------------------------- */
.sws-home .sws-trust-item {
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
}

.sws-home .sws-trust-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--sws-radius-lg);
	font-size: 0;
}

.sws-home .sws-trust-icon svg {
	width: 24px;
	height: 24px;
}

/* --- 5. Reviews (yellow stars + brand avatar + white cards) --------------- */
.sws-home .sws-testimonial-card {
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
}

.sws-home .sws-testimonial-stars {
	color: var(--sws-color-warning);
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 1;
}

.sws-home .sws-testimonial-avatar {
	background: var(--sws-color-primary);
	color: var(--sws-color-primary-text);
}

/* --- 5/6 section background rhythm (match mockup alternation) ------------- */
.sws-home .sws-testimonials { background: var(--sws-color-bg-alt); }
.sws-home .sws-press { background: var(--sws-color-white); }
.sws-home .sws-mission { background: var(--sws-color-bg-alt); }
.sws-home .sws-reports-section { background: var(--sws-color-white); }
.sws-home .sws-blog-section { background: var(--sws-color-white); }

/* --- 6. In the press (yellow quote mark, alt-tinted cards) ---------------- */
.sws-home .sws-press-item {
	background: var(--sws-color-bg-alt);
}

.sws-home .sws-press-mark {
	display: block;
	color: var(--sws-color-primary);
}

.sws-home .sws-press-mark svg {
	display: block;
}

/* --- 7. Mission (yellow checklist card) ----------------------------------- */
.sws-home .sws-mission-card {
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-2xl);
	padding: 46px 40px;
	text-align: center;
}

.sws-home .sws-mission-card-shield {
	display: block;
	width: 96px;
	height: 108px;
	margin: 0 auto var(--sws-space-lg);
}

.sws-home .sws-mission-card-shield svg {
	display: block;
}

.sws-home .sws-mission-card-title {
	font-family: var(--sws-font-display);
	font-size: 23px;
	font-weight: 800;
	color: var(--sws-color-primary-text);
	margin-bottom: var(--sws-space-lg);
}

.sws-home .sws-mission-checklist {
	display: inline-flex;
	flex-direction: column;
	gap: var(--sws-space-sm);
	text-align: left;
}

.sws-home .sws-mission-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sws-color-primary-text);
}

.sws-home .sws-mission-check {
	display: inline-flex;
	flex-shrink: 0;
}

.sws-home .sws-mission-check svg {
	display: block;
}

.sws-home .sws-btn-arrow {
	display: inline-flex;
}

.sws-home .sws-btn-arrow svg {
	width: 16px;
	height: 16px;
}

/* --- 8. Latest scam reports (top gap + dark "view all" button) ----------- */
/* The viewall is a <p>; the .sws-page p reset (0,1,1) zeroes the feed widget's
   own .sws-report-feed-viewall margin (0,1,0), so restore the top gap here. */
.sws-home .sws-report-feed-viewall {
	margin-top: var(--sws-space-2xl);
}

.sws-home .sws-report-feed-viewall .sws-btn {
	color: var(--sws-color-white);
	background: var(--sws-color-dark);
	border-color: var(--sws-color-dark);
}

.sws-home .sws-report-feed-viewall .sws-btn:hover,
.sws-home .sws-report-feed-viewall .sws-btn:focus {
	color: var(--sws-color-white);
	background: var(--sws-color-dark-medium);
	border-color: var(--sws-color-dark-medium);
}

/* --- 9. Help & quick links (auto-fit grid + tone icon tiles) -------------- */
.sws-home .sws-help-grid {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	max-width: var(--sws-container-max);
}

.sws-home .sws-help-link {
	border: 1px solid var(--sws-color-border);
}

.sws-home .sws-help-icon {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	font-size: 0;
}

.sws-home .sws-help-icon svg {
	width: 22px;
	height: 22px;
}

/* --- 10. Scam alerts & trends ("Coming soon" blog teasers) ---------------- */
.sws-home .sws-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--sws-space-lg);
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-home .sws-blog-card {
	display: flex;
	flex-direction: column;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
	overflow: hidden;
}

.sws-home .sws-blog-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 158px;
	color: #C9C9BF;
	background: var(--sws-color-bg-alt);
	border-bottom: 1px solid var(--sws-color-border);
}

.sws-home .sws-blog-cover-icon svg {
	width: 48px;
	height: 48px;
}

.sws-home .sws-blog-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-color-primary);
	background: var(--sws-color-dark);
	padding: 5px 11px;
	border-radius: var(--sws-radius-full);
}

.sws-home .sws-blog-body {
	padding: var(--sws-space-lg);
}

.sws-home .sws-blog-cat {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	padding: 4px 10px;
	border-radius: var(--sws-radius-full);
}

.sws-home .sws-blog-title {
	font-family: var(--sws-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--sws-color-text);
	margin: var(--sws-space-sm) 0 var(--sws-space-xs);
}

.sws-home .sws-blog-soon {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

.sws-home .sws-blog-soon-icon {
	display: inline-flex;
}

.sws-home .sws-blog-soon-icon svg {
	width: 14px;
	height: 14px;
}

.sws-home .sws-blog-note {
	margin-top: var(--sws-space-xl);
	text-align: center;
	font-size: 16px;
	color: var(--sws-color-text-secondary);
}

/* --- 11. Newsletter band — eyebrow + fine print -------------------------- */
.sws-home .sws-newsletter-section .sws-newsletter-eyebrow {
	max-width: 640px;
	margin: 0 auto var(--sws-space-xs);
	text-align: center;
	color: var(--sws-color-on-primary-muted); /* muted gold — readable on the yellow band (matches mockup) */
}

/* Fine print sits BELOW the form, smaller and centred (the .sws-page p reset
   would otherwise drop its top margin — keep this selector at 0,2,0). */
.sws-home .newsletter-fineprint {
	margin: var(--sws-space-sm) auto 0;
	max-width: 520px;
	text-align: center;
	font-size: 15px; /* matches the shared reassurance/fineprint microcopy */
	color: var(--sws-color-on-primary-muted);
}

/* Content width — the home card grids match the section headers + every other
   page (--sws-container-max, 1200) instead of the narrower 1000 default, so the
   cards line up with the rest of the site on desktop. Scoped to ≥1025 so the
   base responsive rules (1-/2-col, max 520) still own narrower screens. */
@media (min-width: 1025px) {
	.sws-home .sws-steps-grid,
	.sws-home .sws-trust-grid,
	.sws-home .sws-testimonials-grid,
	.sws-home .sws-press-grid {
		max-width: var(--sws-container-max);
	}
}

/* --- Home responsive: keep the 2-col hero stacking on small screens ------- */
@media (max-width: 768px) {
	.sws-home .sws-dual-cta {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
	.sws-stats-grid,
	.sws-trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sws-help-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.sws-steps-grid,
	.sws-testimonials-grid,
	.sws-press-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
	}

	.sws-hero-title {
		font-size: 40px;
	}
}

@media (max-width: 768px) {
	.sws-section {
		padding: var(--sws-space-2xl) var(--sws-space-md);
	}

	.sws-hero {
		padding: var(--sws-space-2xl) var(--sws-space-md) 80px;
	}

	.sws-hero-title {
		font-size: 32px;
	}

	.sws-hero-lead {
		font-size: 18px;
	}

	.sws-section-title {
		font-size: 28px;
	}

	.sws-dual-cta {
		grid-template-columns: 1fr;
	}

	.search-box,
	.newsletter-form {
		flex-direction: column;
	}

	.search-box .btn-primary,
	.newsletter-form .btn-dark {
		width: 100%;
	}

	.sws-help-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sws-mission-container {
		grid-template-columns: 1fr;
		gap: var(--sws-space-xl);
	}

	/* Results page */
	.sws-results .results-main {
		padding-left: var(--sws-space-md);
		padding-right: var(--sws-space-md);
	}

	.sws-results .card-top {
		flex-direction: column;
		text-align: center;
	}

	.sws-results .facts-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sws-results .cta-row {
		flex-direction: column;
	}

	.sws-results .cta-row .sws-btn {
		width: 100%;
	}

	.sws-results .trust-shield {
		width: 120px;
		height: 138px;
	}

	.sws-results .trust-score {
		font-size: 40px;
	}
}

@media (max-width: 480px) {
	.sws-stats-grid,
	.sws-trust-grid,
	.sws-help-grid {
		grid-template-columns: 1fr;
	}

	.sws-results .facts-grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   MOTION PREFERENCES (inclusive design)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sws-page *,
	.search-box *,
	.newsletter-form * {
		transition: none !important;
		animation: none !important;
	}

	.sws-step-card:hover,
	.sws-help-link:hover,
	.sws-btn-primary:hover,
	.btn-primary:hover {
		transform: none;
	}

	.sws-report-submit:hover {
		transform: none;
	}
}

/* =============================================================================
   REPORT FORM  templates/pages/report.php  ([scamwise_page key="report"])
   -----------------------------------------------------------------------------
   Single-page, website-only report form (decisions §C13/F35). Layout/feel ports
   scamwiseseniors-demo-ideas/03-report-scam.html but recolored from the shared
   --sws-* tokens (NO new :root). Senior-friendly: large readable type, strong
   contrast, big tap targets (>=52px), visible focus (reuses the .sws-page
   focus-visible rule above). The honeypot (.sws-hp) and .screen-reader-text
   helpers are defined once in ACCESSIBILITY UTILITIES — not redefined here.
   ========================================================================== */

/* --- Page + card shell ---------------------------------------------------- */
.sws-page--report {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-bg);
}

.sws-report {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.sws-report-card {
	width: 100%;
	max-width: 620px;
	padding: var(--sws-space-2xl);
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-2xl);
	box-shadow: var(--sws-shadow-xl);
}

/* --- Form header ---------------------------------------------------------- */
.sws-report-header {
	text-align: center;
	margin-bottom: var(--sws-space-xl);
}

.sws-report-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin: 0 auto var(--sws-space-md);
	font-size: 38px;
	line-height: 1;
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-xl);
}

.sws-report-title {
	font-family: var(--sws-font-display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-xs);
}

.sws-report-subtitle {
	font-size: 18px;
	color: var(--sws-color-text-secondary);
	max-width: 460px;
	margin: 0 auto;
}

/* --- Error alert (PRG error state) ---------------------------------------- */
/* Report + Contact forms share identical control styling — grouped here so the
   rules live once (the contact form's duplicate blocks were removed). */
.sws-report-alert,
.sws-contact-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--sws-space-sm);
	margin-bottom: var(--sws-space-lg);
	padding: var(--sws-space-md) var(--sws-space-lg);
	font-size: 17px;
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
	border: 2px solid var(--sws-color-danger);
	border-radius: var(--sws-radius-lg);
}

.sws-report-alert-icon,
.sws-contact-alert-icon {
	flex-shrink: 0;
	font-size: 22px;
	line-height: 1.4;
}

.sws-report-alert-text,
.sws-contact-alert-text {
	font-weight: 600;
	line-height: 1.5;
}

/* --- Fields --------------------------------------------------------------- */
.sws-report-field,
.sws-contact-field {
	margin-bottom: var(--sws-space-lg);
}

.sws-report-label,
.sws-contact-label {
	display: block;
	margin-bottom: var(--sws-space-sm);
	font-size: 17px;
	font-weight: 700;
	color: var(--sws-color-text);
}

.sws-report-required,
.sws-contact-required {
	color: var(--sws-color-danger-dark);
}

.sws-report-optional,
.sws-contact-optional {
	font-size: 15px;
	font-weight: 400;
	color: var(--sws-color-text-muted);
}

/* Shared text-field base — report, contact AND review form inputs (the review
   block was declaration-identical, so it folds in here). */
.sws-report-input,
.sws-contact-input,
.sws-review-input {
	display: block;
	width: 100%;
	min-height: 56px;
	padding: 14px 18px;
	font-family: var(--sws-font-body);
	font-size: 17px;
	line-height: 1.5;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	border: 2px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	outline: none;
	transition: border-color 0.2s;
}

.sws-report-input::placeholder,
.sws-contact-input::placeholder,
.sws-review-input::placeholder {
	color: var(--sws-color-text-muted);
}

.sws-report-input:focus,
.sws-contact-input:focus,
.sws-review-input:focus {
	/* Focus = a colour change on the border only — no outline, no glow ring.
	   Dark, not brand yellow: yellow on white is ~1.35:1, below the WCAG
	   1.4.11 3:1 non-text minimum. */
	border-color: var(--sws-color-dark);
}

.sws-report-select,
.sws-contact-select {
	/* Keep the native control but give it room + a clear arrow target. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231A1A1A'%3E%3Cpath d='M5.5 7.5L10 12l4.5-4.5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 20px 20px;
	cursor: pointer;
}

.sws-report-textarea,
.sws-contact-textarea,
.sws-review-textarea {
	min-height: 150px; /* review overrides to 120px in §STEP 5 */
	line-height: 1.6;
	resize: vertical;
}

.sws-report-help,
.sws-contact-help {
	margin-top: var(--sws-space-xs);
	font-size: 15px;
	color: var(--sws-color-text-muted);
}

/* Per-field validation message (shown under the offending field after a failed
   submit). Clearer than a single generic banner — matches the mockups.
   .sws-field-error is the sws-forms.js fallback class, used when a form opts
   into data-sws-validate-form without setting data-sws-error-class. */
.sws-report-field-error,
.sws-contact-field-error,
.sws-field-error {
	margin-top: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sws-color-danger-dark);
}

/* --- Share-with-authorities checkbox row ---------------------------------- */
.sws-report-checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--sws-space-md);
	padding: var(--sws-space-md) var(--sws-space-lg);
	background: var(--sws-color-bg-alt);
	border: 2px solid transparent;
	border-radius: var(--sws-radius-lg);
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

/* Highlight when ticked — live via :has() (CSP-safe, no JS) AND via the
   server-rendered .is-checked (after a validation round-trip / older browsers). */
.sws-report-checkbox:hover,
.sws-report-checkbox:focus-within,
.sws-report-checkbox.is-checked,
.sws-report-checkbox:has(input:checked) {
	background: var(--sws-color-primary-light);
	border-color: var(--sws-color-primary);
}

.sws-report-checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin: 2px 0 0;
	accent-color: var(--sws-color-primary);
	cursor: pointer;
}

.sws-report-checkbox-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sws-report-checkbox-label {
	font-size: 17px;
	font-weight: 700;
	color: var(--sws-color-text);
}

.sws-report-checkbox-help {
	font-size: 15px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
}

/* --- Submit (shared with the contact form) -------------------------------- */
.sws-report-submit,
.sws-contact-submit {
	min-height: 60px;
	margin-top: var(--sws-space-md);
	font-size: 18px;
}

/* --- Success state (PRG thank-you panel) — shared by Report + Contact ------ */
.sws-report-success,
.sws-contact-success {
	text-align: center;
	padding: var(--sws-space-lg) var(--sws-space-xs);
}

.sws-report-success-icon,
.sws-contact-success-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 auto var(--sws-space-lg);
	font-size: 48px;
	line-height: 1;
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
	border: 3px solid var(--sws-color-safe);
	border-radius: 50%;
}

.sws-report-success-title,
.sws-contact-success-title {
	font-family: var(--sws-font-display);
	font-size: 32px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin-bottom: var(--sws-space-sm);
}

.sws-report-success-message,
.sws-contact-success-message {
	font-size: 18px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
	max-width: 460px;
	margin: 0 auto var(--sws-space-xl);
}

.sws-report-success-actions,
.sws-contact-success-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sws-space-md);
}

.sws-report-success-actions .sws-btn,
.sws-contact-success-actions .sws-btn {
	width: 100%;
	max-width: 360px;
}

.sws-report-home-link {
	font-size: 16px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	text-decoration: underline;
}

.sws-report-home-link:hover,
.sws-report-home-link:focus {
	color: var(--sws-color-dark);
}

/* =============================================================================
   REPORT-A-SCAM REDESIGN (report-only structure; scoped so verify.php — which
   shares the .sws-report-* form classes — keeps its single-column layout).
   Port of "Report a Scam.dc.html"; mockup hex mapped to --sws-color-* tokens.
   ========================================================================== */

/* Centred intro with a red eyebrow pill. */
.sws-report-intro {
	max-width: 680px;
	margin: 0 auto var(--sws-space-2xl);
	text-align: center;
}

/* Red eyebrow pill — shared by the Report-a-scam intro and Reports page. */
.sws-report-eyebrow,
.sws-reports-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sws-space-xs);
	margin-bottom: var(--sws-space-md);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
	border-radius: var(--sws-radius-full);
}

.sws-report-intro-title {
	font-family: var(--sws-font-display);
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-report-intro-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-report-intro-lead strong {
	color: var(--sws-color-text);
	font-weight: 700;
}

/* Two-column layout: form card (wider) + sidebar — shared by Report + Contact. */
.sws-report-layout,
.sws-contact-layout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: var(--sws-space-lg);
	align-items: start;
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

/* In the grid the card fills its column and takes a lighter, bordered card
   look (the standalone success/verify card keeps its centred 620px treatment). */
.sws-report-layout .sws-report-card {
	max-width: none;
	border: 1px solid var(--sws-color-border);
	box-shadow: var(--sws-shadow-md);
}

/* Sidebar aside cards — shared component used by the Report-a-scam and Contact
   page sidebars (.sws-aside-stack wraps a column of .sws-aside cards). */
.sws-aside-stack {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
}

.sws-aside {
	padding: var(--sws-space-lg);
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
}

.sws-aside--accent {
	border-left: 4px solid var(--sws-color-primary);
}

.sws-aside-title {
	font-family: var(--sws-font-display);
	font-size: 18px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-md);
}

.sws-aside-lead {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--sws-color-text-muted);
	margin: 0 0 var(--sws-space-md);
}

.sws-aside-list {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-aside-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
}

.sws-aside-check {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 1px;
}

/* "What happens next" numbered steps. */
.sws-report-steps {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-report-step {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
}

.sws-report-step strong {
	color: var(--sws-color-text);
	font-weight: 700;
}

/* Smaller 30px variant of the shared numbered-step tile (base declarations
   come from the §Check-landing group). */
.sws-report-step-num {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	margin-bottom: 0; /* sits in a flex row, not above a title */
	font-size: 15px;
	border-radius: var(--sws-radius-md);
}

/* Dark "check first" CTA card. */
.sws-report-check-cta {
	display: flex;
	align-items: center;
	gap: var(--sws-space-md);
	padding: 20px 22px;
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-xl);
	text-decoration: none;
	transition: transform 0.15s, box-shadow 0.15s;
}

.sws-report-check-cta:hover,
.sws-report-check-cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sws-shadow-md);
	outline: none;
}

.sws-report-check-cta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	color: var(--sws-color-primary);
	background: rgba(255, 220, 15, 0.16);
	border-radius: var(--sws-radius-lg);
}

.sws-report-check-cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sws-report-check-cta-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--sws-color-white);
}

.sws-report-check-cta-sub {
	font-size: 14.5px;
	color: var(--sws-color-text-on-dark-muted);
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
	.sws-report-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.sws-page--report {
		padding: var(--sws-space-2xl) var(--sws-space-md);
	}

	.sws-report-card {
		padding: var(--sws-space-lg);
	}

	.sws-report-title,
	.sws-report-success-title {
		font-size: 26px;
	}

	.sws-report-intro-title {
		font-size: 30px;
	}
}

/* ==========================================================================
   STEP 5 — Contact form, Review form, Newsletter form-state + opt-in notice
   Reuses the shared --sws-* tokens (NO new :root). Senior-first: large readable
   type, strong contrast, big tap targets (>=52px), visible focus (reuses the
   .sws-page focus-visible rule). Mirrors the Report form system.
   ========================================================================== */

/* --- Contact page shell (parallels .sws-page--report) --------------------- */
.sws-page--contact {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-bg);
}

.sws-contact {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.sws-contact-card {
	width: 100%;
	max-width: 620px;
	padding: var(--sws-space-2xl);
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-2xl);
	box-shadow: var(--sws-shadow-xl);
}

/* =============================================================================
   CONTACT REDESIGN (port of "Contact.dc.html"): centred intro over a two-column
   layout (form card + sidebar), with the FAQ as a full-width section below.
   Contact-only structure; form-control styling stays shared with the report
   form. Mockup hex mapped to --sws-color-* tokens.
   ========================================================================== */

/* Intro: centred, yellow envelope tile. */
.sws-contact-intro {
	max-width: 680px;
	margin: 0 auto var(--sws-space-2xl);
	text-align: center;
}

.sws-contact-intro-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: var(--sws-space-md);
	color: var(--sws-color-dark);
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-xl);
}

.sws-contact-intro-title {
	font-family: var(--sws-font-display);
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-contact-intro-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-contact-intro-lead strong {
	color: var(--sws-color-text);
	font-weight: 700;
}

/* Two-column layout grid is shared with Report (see .sws-report-layout above);
   only the contact-specific card override remains here. */
.sws-contact-layout .sws-contact-card {
	max-width: none;
	border: 1px solid var(--sws-color-border);
	box-shadow: var(--sws-shadow-md);
}

/* "Faster ways to get help" link rows. */
.sws-contact-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sws-contact-link {
	display: flex;
	align-items: center;
	gap: var(--sws-space-sm);
	padding: 12px 14px;
	background: var(--sws-color-bg-alt);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-md);
	text-decoration: none;
	transition: background 0.15s, transform 0.15s;
}

.sws-contact-link:hover,
.sws-contact-link:focus-visible {
	background: var(--sws-color-border);
	transform: translateY(-1px);
	outline: none;
}

.sws-contact-link-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.sws-contact-link--danger .sws-contact-link-icon {
	color: var(--sws-color-danger-dark);
}

.sws-contact-link--info .sws-contact-link-icon {
	color: var(--sws-color-info);
}

.sws-contact-link--violet .sws-contact-link-icon {
	color: var(--sws-color-violet);
}

.sws-contact-link-label {
	flex: 1;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--sws-color-text);
}

.sws-contact-link-arrow {
	flex-shrink: 0;
	color: var(--sws-color-text-muted);
}

/* Contact form: alert / field / label / input / select / textarea / help /
   submit AND the success panel are all shared with the report form (grouped in
   the report-form section above). Only the contact-specific bits remain here. */

.sws-contact-home-link {
	font-size: 16px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	text-decoration: underline;
}

.sws-contact-home-link:hover,
.sws-contact-home-link:focus {
	color: var(--sws-color-dark);
}

/* --- Contact "Common questions" FAQ (full-width section, native <details>) - */
.sws-contact-faq {
	max-width: 860px;
	margin: var(--sws-space-3xl) auto 0;
}

.sws-contact-faq-title {
	font-family: var(--sws-font-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sws-color-text);
	text-align: center;
	margin: 0 0 var(--sws-space-lg);
}

.sws-contact-faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-sm);
}

.sws-contact-faq-foot {
	margin: var(--sws-space-lg) 0 0;
	font-size: 16px;
	color: var(--sws-color-text-secondary);
	text-align: center;
}

.sws-contact-faq-item {
	background: var(--sws-color-white);
	border: 2px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	overflow: hidden;
}

.sws-contact-faq-item[open] {
	border-color: var(--sws-color-primary);
}

.sws-contact-faq-question {
	position: relative;
	padding: 20px 60px 20px var(--sws-space-lg);
	font-size: 17px;
	font-weight: 700;
	color: var(--sws-color-text);
	cursor: pointer;
	list-style: none;
	transition: background 0.15s;
}

.sws-contact-faq-question:hover {
	background: var(--sws-color-bg-alt);
}

.sws-contact-faq-question::-webkit-details-marker {
	display: none;
}

/* Circular +/- toggle badge (matches Contact.dc.html). */
.sws-contact-faq-question::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--sws-space-lg);
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sws-color-bg-alt);
	color: var(--sws-color-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	text-align: center;
}

.sws-contact-faq-item[open] .sws-contact-faq-question::after {
	content: "\2212"; /* minus */
	background: var(--sws-color-primary-light);
}

.sws-contact-faq-answer {
	margin: 0;
	/* Top padding = half the side/bottom padding so the answer reads as part of
	   the question, not flush against it. */
	padding: var(--sws-space-sm) var(--sws-space-lg) var(--sws-space-lg);
	font-size: 16px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
}

/* --- Review form (lives in the results page .review-form-slot) ------------ */
.review-form-slot {
	margin-top: var(--sws-space-lg);
	padding-top: var(--sws-space-lg);
	border-top: 2px solid var(--sws-color-border);
}

.sws-review-form--success {
	padding: var(--sws-space-md) var(--sws-space-lg);
	background: var(--sws-color-safe-light);
	border: 2px solid var(--sws-color-safe);
	border-radius: var(--sws-radius-lg);
}

.sws-review-thanks {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--sws-color-safe-dark);
}

.sws-review-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--sws-space-sm);
	margin-bottom: var(--sws-space-md);
	padding: var(--sws-space-md) var(--sws-space-lg);
	font-size: 16px;
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
	border: 2px solid var(--sws-color-danger);
	border-radius: var(--sws-radius-lg);
}

.sws-review-alert-icon {
	flex-shrink: 0;
	font-size: 20px;
	line-height: 1.4;
}

.sws-review-alert-text {
	font-weight: 600;
	line-height: 1.5;
}

.sws-review-field {
	margin: 0 0 var(--sws-space-lg);
	padding: 0;
	border: 0;
}

.sws-review-label {
	display: block;
	margin-bottom: var(--sws-space-sm);
	padding: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--sws-color-text);
}

.sws-review-required {
	color: var(--sws-color-danger-dark);
}

.sws-review-stars {
	display: inline-flex;
	/* Stars render 5→1 in the DOM so a pure-CSS cumulative fill works (CSS can
	   match later siblings, not earlier). row-reverse paints them 1→5 again. */
	flex-direction: row-reverse;
	gap: 4px;
}

/* The radio itself is removed from view but stays focusable (label shows the star). */
.sws-review-star-input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.sws-review-star-label {
	padding: 4px;
	line-height: 1;
	cursor: pointer;
}

.sws-review-star-icon {
	display: block;
	font-size: 40px;
	line-height: 1;
	transition: transform 0.15s;
}

/* Default = hollow star (☆): selection is conveyed by SHAPE, not colour alone. */
.sws-review-star-icon::before {
	content: "\2606";
	color: var(--sws-color-text-muted);
}

/* The checked star + every lower-numbered star (its later DOM siblings, shown to
   the left) fill in (★). Colour matches the brand-yellow review stars shown above;
   the filled-vs-hollow SHAPE (not colour alone) conveys the rating. */
.sws-review-star-input:checked + .sws-review-star-label .sws-review-star-icon::before,
.sws-review-star-input:checked ~ .sws-review-star-label .sws-review-star-icon::before {
	content: "\2605";
	color: var(--sws-color-primary);
}

/* While hovering the group, the checked state yields to a live hover preview. */
.sws-review-stars:hover .sws-review-star-input:checked + .sws-review-star-label .sws-review-star-icon::before,
.sws-review-stars:hover .sws-review-star-input:checked ~ .sws-review-star-label .sws-review-star-icon::before {
	content: "\2606";
	color: var(--sws-color-text-muted);
}

.sws-review-stars:hover .sws-review-star-label:hover .sws-review-star-icon::before,
.sws-review-stars:hover .sws-review-star-label:hover ~ .sws-review-star-label .sws-review-star-icon::before {
	content: "\2605";
	color: var(--sws-color-primary);
}

.sws-review-star-label:hover .sws-review-star-icon {
	transform: scale(1.08);
}

.sws-review-star-input:focus-visible + .sws-review-star-label .sws-review-star-icon {
	/* Dark like every other tab stop — the radio is visually hidden, so this
	   ring is the rating's ONLY focus indicator (and a yellow ring around a
	   yellow checked star vanished). */
	outline: 3px solid var(--sws-color-dark);
	outline-offset: 3px;
	border-radius: var(--sws-radius-sm);
}

/* .sws-review-input base/placeholder/focus and the textarea line-height/resize
   fold into the shared .sws-report-input / .sws-contact-input groups
   (§REPORT FORM) — only the shorter min-height is review-specific. */
.sws-review-textarea {
	min-height: 120px;
}

.sws-review-submit {
	min-height: 56px;
	flex: none;
}

/* Button + reassurance share one row (mockup); the note wraps under the button
   on narrow screens. */
.sws-review-actions {
	display: flex;
	align-items: center;
	gap: var(--sws-space-md);
	flex-wrap: wrap;
	margin-top: var(--sws-space-lg);
}

.sws-review-fineprint {
	margin: 0;
	max-width: 360px;
	font-size: 15px; /* matches the report/contact reassurance microcopy */
	line-height: 1.45;
	color: var(--sws-color-text-muted);
}

/* --- Newsletter inline form-state panels (sit on the yellow band) --------- */
.sws-form-success,
.sws-form-error {
	max-width: 520px;
	margin: 0 auto;
	padding: var(--sws-space-md) var(--sws-space-lg);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	background: var(--sws-color-white);
	border-radius: var(--sws-radius-lg);
	box-shadow: var(--sws-shadow-sm);
}

.sws-form-success {
	color: var(--sws-color-safe-dark);
	border: 2px solid var(--sws-color-safe);
}

.sws-form-error {
	color: var(--sws-color-danger-dark);
	border: 2px solid var(--sws-color-danger);
}

/* --- Newsletter double-opt-in landing notice (the_content banner) --------- */
.sws-news-notice {
	max-width: 880px;
	margin: 0 auto var(--sws-space-lg);
	padding: var(--sws-space-md) var(--sws-space-lg);
	border: 2px solid;
	border-radius: var(--sws-radius-lg);
}

.sws-news-notice p {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}

.sws-news-notice--confirmed {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
	border-color: var(--sws-color-safe);
}

.sws-news-notice--already {
	color: var(--sws-color-text);
	background: var(--sws-color-primary-light);
	border-color: var(--sws-color-primary);
}

.sws-news-notice--unsubscribed {
	color: var(--sws-color-unknown-dark);
	background: var(--sws-color-unknown-light);
	border-color: var(--sws-color-unknown);
}

.sws-news-notice--invalid {
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
	border-color: var(--sws-color-danger);
}

/* Unsubscribe confirmation interstitial (J2 — a one-button POST). */
.sws-news-notice--confirm {
	color: var(--sws-color-text);
	background: var(--sws-color-primary-light);
	border-color: var(--sws-color-primary);
}

.sws-news-unsub-form {
	margin-top: var(--sws-space-sm);
}

/* --- Step 5 responsive ---------------------------------------------------- */
@media (max-width: 900px) {
	.sws-contact-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.sws-page--contact {
		padding: var(--sws-space-2xl) var(--sws-space-md);
	}

	.sws-contact-card {
		padding: var(--sws-space-lg);
	}

	.sws-contact-intro-title {
		font-size: 30px;
	}

	.sws-contact-success-title {
		font-size: 26px;
	}

	.sws-review-star-icon {
		font-size: 34px;
	}
}

/* ==========================================================================
   STEP 6 — About page extras
   The About page reuses the homepage hero/section/mission/steps/trust/cta
   classes; only the small extras below are new (no new :root tokens). The
   legal/help pages are redesigned shortcode templates with their own scoped
   styles further down (.sws-legaldoc-* / Help guide).
   ========================================================================== */

/* --- About page (redesign port of About.dc.html) -------------------------- */
/* Scoped under .sws-page--about so the shared homepage section classes stay
   untouched (the homepage has its own redesign branch). Mockup hex values are
   mapped onto our --sws-color-* brand/band tokens; fonts and buttons are ours.
   Inline SVGs are CSP-safe (presentation attributes only). */

/* Hero: radial dark gradient + eyebrow pill (overrides the linear .sws-hero). */
.sws-hero--about {
	padding: 60px var(--sws-space-lg) 64px;
	text-align: center;
	background: radial-gradient(130% 90% at 50% -10%, #313131 0%, var(--sws-color-dark) 45%, #161616 100%);
}

.sws-hero--about .sws-hero-container {
	max-width: 760px;
}

/* Section scaffolding (about-scoped). */
.sws-about-section {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-white);
}

.sws-about-section--alt {
	background: var(--sws-color-bg-alt);
}

.sws-about-container {
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-about-section-header {
	text-align: center;
	margin-bottom: var(--sws-space-2xl);
}

.sws-about-eyebrow {
	display: block;
	margin-bottom: var(--sws-space-sm);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sws-color-safe-dark);
}

.sws-about-heading {
	font-family: var(--sws-font-display);
	font-size: 36px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-about-subtitle {
	font-size: 18px;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

/* Mission: 2-column text + yellow feature card. */
.sws-about-mission-inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 44px;
	align-items: center;
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-about-mission-content p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--sws-color-text-secondary);
	margin: 0 0 var(--sws-space-md);
}

.sws-about-mission-content p:last-child {
	margin-bottom: 0;
}

.sws-about-mission-card {
	padding: 46px 40px;
	text-align: center;
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-2xl);
}

.sws-about-mission-shield {
	display: block;
	margin: 0 auto var(--sws-space-lg);
}

.sws-about-shield-body {
	fill: var(--sws-color-dark);
}

.sws-about-shield-check {
	fill: none;
	stroke: var(--sws-color-primary);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.sws-about-mission-card-title {
	font-family: var(--sws-font-display);
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sws-color-dark);
	margin: 0 0 var(--sws-space-lg);
}

.sws-about-promises {
	display: inline-flex;
	flex-direction: column;
	gap: var(--sws-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.sws-about-promise {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--sws-color-dark);
}

.sws-about-check {
	display: inline-flex;
	flex-shrink: 0;
}

.sws-about-check-bg {
	fill: var(--sws-color-dark);
}

.sws-about-check-mark {
	fill: none;
	stroke: var(--sws-color-primary);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Card grid (values + steps). */
.sws-about-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sws-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-about-card--center {
	text-align: center;
}

.sws-about-card-title {
	font-family: var(--sws-font-display);
	font-size: 19px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-xs);
}

.sws-about-card-text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

/* Value icon tiles (tone-coloured; tones map to brand/band tokens where we have
   them, with literal accent hues for the blue/amber decorative markers). */
.sws-about-value-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 auto var(--sws-space-md);
	border-radius: var(--sws-radius-lg);
}

.sws-about-value-icon--amber {
	color: var(--sws-color-amber-ink);
	background: var(--sws-color-primary-light);
}

.sws-about-value-icon--green {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
}

.sws-about-value-icon--blue {
	color: var(--sws-color-info);
	background: var(--sws-color-info-light);
}

/* Steps: bg-alt cards on a white section, left-aligned, numbered square. */
.sws-about-step {
	background: var(--sws-color-bg-alt);
}

/* Honest-by-design note + trust-band legend. */
.sws-about-note-inner {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.sws-about-note-inner p {
	font-size: 18px;
	line-height: 1.65;
	color: var(--sws-color-text-secondary);
	margin: 0 0 var(--sws-space-md);
}

.sws-about-em-safe {
	color: var(--sws-color-safe-dark);
}

.sws-about-em-unknown {
	color: var(--sws-color-unknown-dark);
}

.sws-about-bands {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sws-space-sm);
	margin: var(--sws-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.sws-about-band {
	display: inline-flex;
	align-items: center;
	gap: var(--sws-space-xs);
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--sws-radius-full);
}

.sws-about-band-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.sws-about-band--safe {
	color: var(--sws-color-safe-dark);
	background: var(--sws-color-safe-light);
}

.sws-about-band--safe .sws-about-band-dot {
	background: var(--sws-color-safe);
}

.sws-about-band--warning {
	color: var(--sws-color-warning-dark);
	background: var(--sws-color-warning-light);
}

.sws-about-band--warning .sws-about-band-dot {
	background: var(--sws-color-warning);
}

.sws-about-band--danger {
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
}

.sws-about-band--danger .sws-about-band-dot {
	background: var(--sws-color-danger);
}

.sws-about-band--unknown {
	color: var(--sws-color-unknown-dark);
	background: var(--sws-color-unknown-light);
}

.sws-about-band--unknown .sws-about-band-dot {
	background: var(--sws-color-unknown);
}

/* CTA band styling (full-width yellow) is shared with the Check-landing page —
   see .sws-checkland-cta, .sws-about-cta-band above. */

/* About responsive. */
@media (max-width: 900px) {
	.sws-about-mission-inner {
		grid-template-columns: 1fr;
		gap: var(--sws-space-2xl);
	}

	.sws-about-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sws-about-grid {
		grid-template-columns: 1fr;
	}

	.sws-about-heading {
		font-size: 30px;
	}

	.sws-about-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =============================================================================
   HELP & SAFETY GUIDE (redesign port of "Help.dc.html"): a two-column docs
   layout — main content + a sticky "On this page" TOC sidebar. Scoped under
   .sws-page--help; mockup hex mapped to --sws-color-* tokens. CSP-safe.
   ========================================================================== */
.sws-page--help {
	padding: var(--sws-space-3xl) var(--sws-space-lg);
	background: var(--sws-color-bg);
}

.sws-help-intro {
	max-width: 720px;
	margin: 0 auto var(--sws-space-2xl);
	text-align: center;
}

.sws-help-eyebrow {
	display: inline-block;
	margin-bottom: var(--sws-space-md);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-color-amber-ink);
	background: var(--sws-color-primary-light);
	border-radius: var(--sws-radius-full);
}

.sws-help-title {
	font-family: var(--sws-font-display);
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-help-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

/* Layout: content + sticky TOC. */
.sws-help-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: var(--sws-space-xl);
	align-items: start;
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-help-content {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-3xl);
}

/* Anchor target offset so the sticky theme header doesn't cover headings. */
.sws-help-section {
	scroll-margin-top: 90px;
}

.sws-help-section-head {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: var(--sws-space-lg);
}

.sws-help-section-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	color: var(--sws-color-primary);
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-md);
}

.sws-help-section-icon--danger {
	color: var(--sws-color-white);
	background: var(--sws-color-danger);
}

.sws-help-section-title {
	font-family: var(--sws-font-display);
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--sws-color-text);
	margin: 0;
}

.sws-help-section-lead {
	font-size: 17px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
	margin: 0 0 var(--sws-space-lg);
}

/* Card grids. */
.sws-help-grid {
	display: grid;
	gap: var(--sws-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-help-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.sws-help-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.sws-help-card-title {
	font-family: var(--sws-font-display);
	font-size: 19px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-xs);
}

.sws-help-card-text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-help-card-text strong {
	color: var(--sws-color-text);
}

/* Colour-band cards (coloured left border per band). */
.sws-help-band {
	padding: 22px 24px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-left: 5px solid var(--sws-color-unknown);
	border-radius: var(--sws-radius-xl);
}

.sws-help-band-head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: var(--sws-space-xs);
}

.sws-help-band-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.sws-help-band-title {
	font-size: 17px;
	font-weight: 800;
}

.sws-help-band-text {
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-help-band--safe {
	border-left-color: var(--sws-color-safe);
}

.sws-help-band--safe .sws-help-band-dot {
	background: var(--sws-color-safe-dark);
}

.sws-help-band--safe .sws-help-band-title {
	color: var(--sws-color-safe-dark);
}

.sws-help-band--warning {
	border-left-color: var(--sws-color-warning);
}

.sws-help-band--warning .sws-help-band-dot {
	background: var(--sws-color-warning);
}

.sws-help-band--warning .sws-help-band-title {
	color: var(--sws-color-warning-dark);
}

.sws-help-band--danger {
	border-left-color: var(--sws-color-danger);
}

.sws-help-band--danger .sws-help-band-dot {
	background: var(--sws-color-danger);
}

.sws-help-band--danger .sws-help-band-title {
	color: var(--sws-color-danger-dark);
}

.sws-help-band--unknown {
	border-left-color: var(--sws-color-unknown);
}

.sws-help-band--unknown .sws-help-band-dot {
	background: var(--sws-color-unknown);
}

.sws-help-band--unknown .sws-help-band-title {
	color: var(--sws-color-unknown-dark);
}

/* Self-check checklist cards. */
.sws-help-check-card {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 20px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--sws-color-text-secondary);
}

.sws-help-check-card--wide {
	grid-column: 1 / -1;
}

.sws-help-check-card strong {
	color: var(--sws-color-text);
}

.sws-help-check-icon {
	display: inline-flex;
	flex-shrink: 0;
	margin-top: 1px;
}

/* Report CTA row. */
.sws-help-cta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	padding: 28px 26px; /* matches the shared bordered white card */
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
}

.sws-help-cta-text {
	flex: 1;
	min-width: 240px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-help-cta-text strong {
	color: var(--sws-color-text);
}

.sws-help-cta-row .sws-btn {
	white-space: nowrap;
}

/* "If you have been scammed" red card. */
.sws-help-danger-card {
	padding: 28px 26px; /* matches the shared bordered white card */
	background: var(--sws-color-danger-light);
	border: 1px solid var(--sws-color-danger);
	border-radius: var(--sws-radius-xl);
}

.sws-help-danger-steps {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sws-help-danger-step {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
}

.sws-help-danger-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	font-family: var(--sws-font-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--sws-color-white);
	background: var(--sws-color-danger);
	border-radius: var(--sws-radius-md);
}

.sws-help-danger-note {
	margin: var(--sws-space-lg) 0 0;
	padding-top: var(--sws-space-md);
	border-top: 1px solid var(--sws-color-danger);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
}

.sws-help-danger-note strong {
	color: var(--sws-color-danger-dark);
}

/* Dark "need more help" CTA. */
.sws-help-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sws-space-lg);
	flex-wrap: wrap;
	padding: 34px 32px;
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-2xl);
}

.sws-help-more-copy {
	flex: 1;
	min-width: 240px;
}

.sws-help-more-title {
	font-family: var(--sws-font-display);
	font-size: 24px;
	font-weight: 800;
	color: var(--sws-color-white);
	margin: 0 0 6px;
}

.sws-help-more-text {
	font-size: 16px;
	line-height: 1.55;
	color: var(--sws-color-text-on-dark-muted);
	margin: 0;
}

.sws-help-more .sws-btn {
	white-space: nowrap;
}

/* Sticky TOC sidebar — one component, shared by the Help page and the legal
   docs (Privacy/Terms/Disclaimer). The two copies had drifted on the label
   gap (md vs sm) and link size (15.5px vs 15px); standardized on the Help
   values (the larger, senior-friendlier ones). */
.sws-help-toc,
.sws-legaldoc-side {
	position: sticky;
	top: var(--sws-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-md);
}

.sws-help-toc-card,
.sws-legaldoc-card {
	padding: 22px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-xl);
}

.sws-help-toc-label,
.sws-legaldoc-card-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sws-color-text-muted);
	margin-bottom: var(--sws-space-md);
}

.sws-help-toc-link,
.sws-legaldoc-toc-link {
	display: block;
	padding: 9px 0;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--sws-color-bg-alt);
}

.sws-help-toc-link:last-child,
.sws-legaldoc-toc-link:last-child {
	border-bottom: none;
}

.sws-help-toc-link:hover,
.sws-help-toc-link:focus-visible,
.sws-legaldoc-toc-link:hover,
.sws-legaldoc-toc-link:focus-visible {
	color: var(--sws-color-dark);
	outline: none;
}

.sws-help-emergency {
	padding: 22px;
	background: var(--sws-color-danger-light);
	border: 1px solid var(--sws-color-danger);
	border-left: 4px solid var(--sws-color-danger);
	border-radius: var(--sws-radius-xl);
}

.sws-help-emergency-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--sws-color-text);
	margin-bottom: 7px;
}

.sws-help-emergency-text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

/* Help responsive. */
@media (max-width: 900px) {
	.sws-help-layout {
		grid-template-columns: 1fr;
	}

	.sws-help-toc {
		position: static;
	}

	.sws-help-grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.sws-help-grid--2,
	.sws-help-grid--3 {
		grid-template-columns: 1fr;
	}

	.sws-help-title {
		font-size: 30px;
	}
}

/* =============================================================================
   LEGAL DOCUMENTS (Privacy / Terms / Disclaimer) — redesign port of
   "Legal Page.dc.html": a two-column layout (document body + sticky sidebar with
   a TOC, an "Other policies" switcher, and a "Questions?" contact card). One
   data-driven template (templates/pages/legal.php). Scoped under .sws-page--legal;
   mockup hex mapped to --sws-color-* tokens. CSP-safe (inline SVG, anchor TOC).
   ========================================================================== */
.sws-page--legal {
	max-width: var(--sws-container-max);
	margin: 0 auto;
	padding: var(--sws-space-3xl) var(--sws-space-lg) var(--sws-space-2xl);
}

/* Intro. */
.sws-legaldoc-intro {
	max-width: 720px;
	margin: 0 auto var(--sws-space-2xl);
	text-align: center;
}

.sws-legaldoc-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sws-space-xs);
	margin-bottom: var(--sws-space-md);
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sws-color-primary);
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-full);
}

.sws-legaldoc-title {
	font-family: var(--sws-font-display);
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.12;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-legaldoc-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0 0 var(--sws-space-md);
}

.sws-legaldoc-updated {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--sws-color-text-muted);
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-full);
}

/* Two-column layout. */
.sws-legaldoc-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 36px;
	align-items: start;
	max-width: var(--sws-container-max);
	margin: 0 auto;
}

.sws-legaldoc-content {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sws-legaldoc-section {
	scroll-margin-top: 90px;
}

.sws-legaldoc-section-head {
	display: flex;
	align-items: center;
	gap: var(--sws-space-sm);
	margin-bottom: var(--sws-space-md);
}

.sws-legaldoc-bar {
	flex-shrink: 0;
	width: 9px;
	height: 26px;
	background: var(--sws-color-primary);
	border-radius: 3px;
}

.sws-legaldoc-h2 {
	font-family: var(--sws-font-display);
	font-size: 24px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--sws-color-text);
	margin: 0;
}

.sws-legaldoc-p {
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--sws-color-text-secondary);
	margin: 0 0 14px;
}

.sws-legaldoc-p:last-child {
	margin-bottom: 0;
}

.sws-legaldoc-items {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin-top: 4px;
}

.sws-legaldoc-item {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--sws-color-text-secondary);
}

.sws-legaldoc-lead-in {
	color: var(--sws-color-text);
	font-weight: 700;
}

.sws-legaldoc-dot {
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--sws-color-dark);
}

.sws-legaldoc-dot--bad {
	background: var(--sws-color-danger);
}

.sws-legaldoc-dot--good {
	background: var(--sws-color-safe-dark);
}

.sws-legaldoc-dot--neutral {
	background: var(--sws-color-dark);
}

/* Sticky sidebar: .sws-legaldoc-side / -card / -card-label / -toc-link fold
   into the shared TOC sidebar component in §Help above. */

/* "Other policies" switcher. */
.sws-legaldoc-policy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	text-decoration: none;
}

.sws-legaldoc-policy:hover,
.sws-legaldoc-policy:focus-visible {
	color: var(--sws-color-dark);
	outline: none;
}

.sws-legaldoc-policy.is-current {
	color: var(--sws-color-text);
	font-weight: 700;
}

.sws-legaldoc-here {
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sws-color-amber-ink);
	background: var(--sws-color-primary-light);
	border-radius: var(--sws-radius-full);
}

/* "Questions?" dark card. */
.sws-legaldoc-ask {
	padding: 22px;
	background: var(--sws-color-dark);
	border-radius: var(--sws-radius-xl);
}

.sws-legaldoc-ask-title {
	font-size: 16px;
	font-weight: 800;
	color: var(--sws-color-white);
	margin-bottom: 6px;
}

.sws-legaldoc-ask-text {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--sws-color-text-on-dark-muted);
	margin: 0 0 var(--sws-space-md);
}

/* Legal responsive. */
@media (max-width: 900px) {
	.sws-legaldoc-layout {
		grid-template-columns: 1fr;
	}

	.sws-legaldoc-side {
		position: static;
	}
}

@media (max-width: 600px) {
	.sws-legaldoc-title {
		font-size: 30px;
	}
}

/* ==========================================================================
   Latest Scam Reports feed (decisions §C15)
   Homepage section [scamwise_latest_reports] + the /scam-reports/ page.
   ========================================================================== */

.sws-report-feed {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sws-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Latest-reports FEED card. Renamed from .sws-report-card to end a class
   collision with the report/verify FORM card (assets/css §form): both used
   .sws-report-card, and this later block bled its border-left/flex/hover onto
   the form card. The feed sub-elements keep their .sws-report-* names (no
   collision). */
.sws-feed-card {
	display: flex;
	flex-direction: column;
	gap: var(--sws-space-sm);
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-left: 4px solid var(--sws-color-danger);
	border-radius: var(--sws-radius-xl);
	padding: var(--sws-space-lg);
	box-shadow: var(--sws-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
}

.sws-feed-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--sws-shadow-md);
}

.sws-report-card-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sws-space-xs);
}

.sws-report-host {
	font-family: var(--sws-font-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--sws-color-danger-dark);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.sws-report-category {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 12px;
	border-radius: var(--sws-radius-full);
	background: var(--sws-color-bg-alt);
	color: var(--sws-color-text);
	white-space: nowrap;
}

.sws-report-excerpt {
	margin: 0;
	color: var(--sws-color-text);
	font-size: 16px;
	line-height: 1.55;
}

.sws-report-card-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sws-space-xs);
	margin-top: auto;
	padding-top: var(--sws-space-xs);
}

.sws-report-meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

.sws-report-dot {
	color: var(--sws-color-border);
}

.sws-report-check {
	font-weight: 600;
	font-size: 14px;
	color: var(--sws-color-primary-text, var(--sws-color-text));
	text-decoration: none;
	white-space: nowrap;
}

.sws-report-check:hover,
.sws-report-check:focus {
	text-decoration: underline;
}

/* "View all" link under the homepage feed. */
.sws-report-feed-viewall {
	margin: var(--sws-space-xl) 0 0;
	text-align: center;
}

/* Empty state (no approved reports yet). */
.sws-report-feed-empty {
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
	padding: var(--sws-space-2xl) var(--sws-space-lg);
}

.sws-report-feed-empty-icon {
	display: block;
	font-size: 40px;
	margin-bottom: var(--sws-space-sm);
}

.sws-report-feed-empty-text {
	margin: 0;
	color: var(--sws-color-text-muted);
	font-size: 17px;
	line-height: 1.6;
}

/* Pagination on the dedicated /scam-reports/ page. */
.sws-report-feed-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sws-space-md);
	margin-top: var(--sws-space-2xl);
}

.sws-report-feed-pagination .sws-page-link {
	font-weight: 600;
	color: var(--sws-color-primary-text, var(--sws-color-text));
	text-decoration: none;
	padding: 10px 18px;
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-full);
}

.sws-report-feed-pagination .sws-page-link:hover,
.sws-report-feed-pagination .sws-page-link:focus {
	border-color: var(--sws-color-primary);
	background: var(--sws-color-bg-alt);
}

.sws-report-feed-pagination .sws-page-of {
	color: var(--sws-color-text-muted);
	font-size: 15px;
}

/* =============================================================================
   LATEST SCAM REPORTS PAGE (redesign port of "Latest Scam Reports.dc.html").
   Intro + stat strip + a 3-col card grid + CTA. Scoped under .sws-page--reports
   so the shared feed widget (also on the homepage) keeps its own look; only the
   page variant gets the "Reported scam" flag + page-card layout. The mockup's
   JS search/category/sort panel is omitted (no server-side filtering yet — a
   separate feature). Mockup hex mapped to --sws-color-* tokens.
   ========================================================================== */
.sws-page--reports {
	max-width: var(--sws-container-max);
	margin: 0 auto;
	padding: var(--sws-space-3xl) var(--sws-space-lg) var(--sws-space-2xl);
}

/* Intro. */
.sws-reports-intro {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.sws-reports-title {
	font-family: var(--sws-font-display);
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--sws-color-text);
	margin: 0 0 var(--sws-space-sm);
}

.sws-reports-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--sws-color-text-secondary);
	margin: 0;
}

.sws-reports-lead strong {
	color: var(--sws-color-text);
	font-weight: 700;
}

/* Stat strip. */
.sws-reports-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: var(--sws-space-lg) 0 var(--sws-space-2xl);
}

.sws-reports-stat {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
}

.sws-reports-stat-num {
	font-family: var(--sws-font-display);
	font-size: 20px;
	font-weight: 800;
	color: var(--sws-color-text);
}

.sws-reports-stat-label {
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

.sws-reports-stat-icon {
	display: inline-flex;
	color: var(--sws-color-safe-dark);
}

/* Filters: search + category chips + sort (CSP-safe GET links/form). */
.sws-page--reports .sws-reports-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sws-space-md);
	margin-bottom: var(--sws-space-lg);
}

.sws-page--reports .sws-reports-search {
	display: flex;
	gap: var(--sws-space-xs);
	flex: 1 1 280px;
	min-width: 0;
}

.sws-page--reports .sws-reports-search-input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
	font-family: var(--sws-font-body);
	font-size: 16px;
	color: var(--sws-color-text);
	background: var(--sws-color-white);
	border: 2px solid var(--sws-color-border);
	border-radius: var(--sws-radius-lg);
	outline: none;
}

.sws-page--reports .sws-reports-search-input:focus {
	border-color: var(--sws-color-dark);
}

.sws-page--reports .sws-reports-search .sws-btn {
	min-height: 48px;
	padding: 10px 20px;
	font-size: 16px;
}

.sws-page--reports .sws-reports-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sws-page--reports .sws-reports-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	background: var(--sws-color-white);
	border: 1px solid var(--sws-color-border);
	border-radius: var(--sws-radius-full);
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sws-page--reports .sws-reports-chip:hover,
.sws-page--reports .sws-reports-chip:focus-visible {
	border-color: var(--sws-color-dark);
	color: var(--sws-color-text);
}

.sws-page--reports .sws-reports-chip.is-active {
	color: var(--sws-color-primary-text);
	background: var(--sws-color-primary);
	border-color: var(--sws-color-primary);
}

.sws-page--reports .sws-reports-chip-count {
	font-size: 12px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: var(--sws-radius-full);
	background: var(--sws-color-bg-alt);
	color: var(--sws-color-text-muted);
}

.sws-page--reports .sws-reports-chip.is-active .sws-reports-chip-count {
	background: rgba(0, 0, 0, 0.12);
	color: var(--sws-color-primary-text);
}

.sws-page--reports .sws-reports-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.sws-page--reports .sws-reports-sort-label {
	font-size: 14px;
	color: var(--sws-color-text-muted);
}

.sws-page--reports .sws-reports-sort-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--sws-color-text-secondary);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: var(--sws-radius-md);
}

.sws-page--reports .sws-reports-sort-link:hover,
.sws-page--reports .sws-reports-sort-link:focus-visible {
	background: var(--sws-color-bg-alt);
	color: var(--sws-color-text);
}

.sws-page--reports .sws-reports-sort-link.is-active {
	color: var(--sws-color-text);
	background: var(--sws-color-bg-alt);
	font-weight: 700;
}

.sws-page--reports .sws-reports-count {
	margin-bottom: var(--sws-space-md);
	font-size: 15px;
	color: var(--sws-color-text-muted);
}

.sws-page--reports .sws-reports-empty {
	text-align: center;
	padding: var(--sws-space-2xl) var(--sws-space-lg);
}

.sws-page--reports .sws-reports-empty-text {
	margin-bottom: var(--sws-space-md);
	font-size: 17px;
	color: var(--sws-color-text-secondary);
}

/* Card grid (page variant). minmax(0,1fr) lets the tracks shrink below their
   content's min-width so the grid actually resizes and drops columns instead of
   overflowing (a plain 1fr track has an implicit min-width:auto). */
.sws-page--reports .sws-report-feed {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* "Reported scam" flag (page variant only). */
.sws-report-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sws-color-danger-dark);
	background: var(--sws-color-danger-light);
	border-radius: var(--sws-radius-sm);
}

/* Page cards: thicker red edge, larger host on its own line. */
.sws-page--reports .sws-feed-card {
	border-left-width: 5px;
	gap: 10px;
}

.sws-page--reports .sws-report-host {
	font-size: 21px;
	font-weight: 800;
}

/* "Check this site" becomes a solid yellow button on the page. */
.sws-page--reports .sws-report-check {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--sws-color-primary-text);
	background: var(--sws-color-primary);
	border-radius: var(--sws-radius-md);
	/* Wrap a long "Check <host>" label instead of overflowing the narrow card. */
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
}

.sws-page--reports .sws-report-check:hover,
.sws-page--reports .sws-report-check:focus {
	background: var(--sws-color-primary-hover);
	text-decoration: none;
}

/* Footer CTA. */
.sws-reports-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--sws-space-md);
	margin-top: var(--sws-space-2xl);
	text-align: center;
}

.sws-reports-cta-text {
	font-size: 15px;
	color: var(--sws-color-text-muted);
}

/* Reports responsive. */
@media (max-width: 900px) {
	.sws-page--reports .sws-report-feed {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.sws-page--reports .sws-report-feed {
		grid-template-columns: minmax(0, 1fr);
	}

	.sws-reports-title {
		font-size: 30px;
	}
}