/*
Theme Name: Affiliate Site Theme
Theme URI: https://example.com/affiliate-site-theme
Author: Bongani Dube
Author URI: https://example.com
Description: A fast, accessible, conversion-focused WordPress theme for software review publications. Dark cinematic technology identity built for reviews, comparisons, roundups and buying guides covering AI tools, SaaS, marketing, productivity and website software. No page builder required.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliate-site
Tags: blog, news, two-columns, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks, accessibility-ready
*/

/* =========================================================
   1. DESIGN TOKENS
   ---------------------------------------------------------
   The entire visual identity lives here. Change a value and
   it propagates site-wide. Brand Colours in the Customizer
   overrides --as-primary and --as-accent at runtime.
   ========================================================= */

:root {
	/* --- Surfaces: black -> navy -> card --- */
	--as-bg: #050608;
	--as-bg-alt: #0b1016;
	--as-surface: #101820;
	--as-surface-2: #14202b;
	--as-surface-3: #0d151d;

	/* --- Text --- */
	--as-ink: #f5f7fa;
	--as-ink-soft: #a7b0ba;
	--as-ink-faint: #78838f;
	--as-ink-invert: #04121a;

	/* --- Brand: blue/cyan is the interactive colour --- */
	--as-primary: #00b8ff;
	--as-primary-bright: #00e5ff;
	--as-primary-dark: #0090cc;
	--as-primary-soft: rgba(0, 184, 255, 0.12);

	/* --- Warm accent: highlights only, never primary actions --- */
	--as-accent: #ff6b2c;
	--as-accent-hot: #ff3d3d;
	--as-accent-soft: rgba(255, 107, 44, 0.14);

	/* --- Semantic --- */
	--as-pro: #2ed47a;
	--as-pro-soft: rgba(46, 212, 122, 0.12);
	--as-con: #ff5c5c;
	--as-con-soft: rgba(255, 92, 92, 0.12);

	/* --- Borders: subtle blue-grey transparency --- */
	--as-line: rgba(125, 165, 205, 0.14);
	--as-line-strong: rgba(125, 175, 220, 0.28);
	--as-line-glow: rgba(0, 184, 255, 0.45);

	/* --- Gradients --- */
	--as-grad-primary: linear-gradient(120deg, #00b8ff 0%, #00e5ff 100%);
	--as-grad-text: linear-gradient(100deg, #7fe9ff 0%, #00e5ff 40%, #00b8ff 100%);
	--as-grad-warm: linear-gradient(120deg, #ff6b2c 0%, #ff3d3d 100%);
	--as-grad-surface: linear-gradient(180deg, #101820 0%, #0b1016 100%);

	/* --- Cinematic light: used sparingly --- */
	--as-glow-blue: 0 0 24px rgba(0, 184, 255, 0.22);
	--as-glow-blue-strong: 0 0 0 1px rgba(0, 184, 255, 0.35), 0 10px 36px rgba(0, 150, 255, 0.24);
	--as-glow-warm: 0 0 28px rgba(255, 107, 44, 0.20);

	--as-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--as-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
	--as-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);

	/* --- Type --- */
	--as-font-display: "Segoe UI Variable Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--as-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--as-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--as-text-xs: 0.75rem;
	--as-text-sm: 0.875rem;
	--as-text-base: 1rem;
	--as-text-lg: 1.125rem;
	--as-text-xl: 1.375rem;
	--as-text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	--as-text-3xl: clamp(1.85rem, 1.4rem + 2.2vw, 2.6rem);
	--as-text-4xl: clamp(2.35rem, 1.5rem + 4.2vw, 4rem);

	--as-track-tight: -0.03em;
	--as-track-label: 0.16em;

	/* --- Spacing --- */
	--as-space-1: 0.25rem;
	--as-space-2: 0.5rem;
	--as-space-3: 0.75rem;
	--as-space-4: 1rem;
	--as-space-5: 1.5rem;
	--as-space-6: 2rem;
	--as-space-7: 3rem;
	--as-space-8: 4.5rem;
	--as-space-9: 6rem;

	/* --- Shape --- */
	--as-radius-sm: 8px;
	--as-radius: 14px;
	--as-radius-lg: 22px;
	--as-radius-pill: 999px;

	/* --- Layout --- */
	--as-container: 1220px;
	--as-container-narrow: 760px;
	--as-header-height: 72px;
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--as-header-height) + 20px);
	background: var(--as-bg);
}

body {
	margin: 0;
	background-color: var(--as-bg);
	color: var(--as-ink);
	font-family: var(--as-font-body);
	font-size: var(--as-text-base);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--as-font-display);
	color: var(--as-ink);
	line-height: 1.15;
	margin: 0 0 var(--as-space-4);
	font-weight: 700;
	letter-spacing: var(--as-track-tight);
	overflow-wrap: break-word;
}

h1 { font-size: var(--as-text-3xl); font-weight: 800; }
h2 { font-size: var(--as-text-2xl); }
h3 { font-size: var(--as-text-xl); }
h4, h5, h6 { font-size: var(--as-text-lg); }

p, ul, ol, dl, table, pre, blockquote, figure {
	margin: 0 0 var(--as-space-5);
}

a {
	color: var(--as-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0, 184, 255, 0.4);
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--as-primary-bright);
	text-decoration-color: currentColor;
}

img, svg, video, iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

figure img { border-radius: var(--as-radius); }

figcaption {
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
	margin-top: var(--as-space-2);
}

blockquote {
	border-left: 2px solid var(--as-primary);
	padding: var(--as-space-2) 0 var(--as-space-2) var(--as-space-5);
	color: var(--as-ink-soft);
	font-size: var(--as-text-lg);
}

code, pre, kbd {
	font-family: var(--as-font-mono);
	font-size: 0.9em;
}

code {
	background: var(--as-surface-2);
	border: 1px solid var(--as-line);
	border-radius: 4px;
	padding: 0.1em 0.4em;
	color: #9fe6ff;
}

pre {
	background: var(--as-surface-3);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: var(--as-space-4);
	overflow-x: auto;
}

pre code {
	background: none;
	border: 0;
	padding: 0;
}

hr {
	border: 0;
	border-top: 1px solid var(--as-line);
	margin: var(--as-space-6) 0;
}

:focus-visible {
	outline: 2px solid var(--as-primary-bright);
	outline-offset: 3px;
	border-radius: 3px;
}

::selection {
	background: rgba(0, 184, 255, 0.28);
	color: #fff;
}

/* Gradient text — used sparingly, with a solid fallback colour. */
.as-grad-text {
	color: var(--as-primary-bright);
	background: var(--as-grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@supports not (background-clip: text) {
	.as-grad-text {
		-webkit-text-fill-color: currentColor;
	}
}

/* =========================================================
   3. ACCESSIBILITY HELPERS
   ========================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--as-primary);
	color: var(--as-ink-invert);
	padding: var(--as-space-3) var(--as-space-5);
	border-radius: 0 0 var(--as-radius-sm) 0;
	text-decoration: none;
	font-weight: 700;
}

.skip-link:focus {
	left: 0;
	color: var(--as-ink-invert);
}

/* =========================================================
   4. LAYOUT PRIMITIVES
   ========================================================= */

.as-container {
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 0 var(--as-space-5);
}

.as-container--narrow { max-width: var(--as-container-narrow); }

.as-section {
	padding: var(--as-space-7) 0;
	position: relative;
}

/* Alternate band: a lift in tone, not a hard colour switch. */
.as-section--alt {
	background: var(--as-bg-alt);
	border-top: 1px solid var(--as-line);
	border-bottom: 1px solid var(--as-line);
}

/* One very soft cyan wash, used on at most two sections per page. */
.as-section--lit::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(760px 340px at 15% 0%, rgba(0, 184, 255, 0.10), transparent 70%);
}

.as-section--lit > * { position: relative; }

.as-section__head {
	margin-bottom: var(--as-space-6);
	max-width: 640px;
}

.as-section__head--split {
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
}

.as-section__title {
	font-size: var(--as-text-2xl);
	margin: 0 0 var(--as-space-3);
}

.as-section__intro {
	color: var(--as-ink-soft);
	margin: 0;
}

/* Eyebrow: tracked-out label with a short rule. Structural, not decorative. */
.as-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--as-space-3);
	font-size: var(--as-text-xs);
	font-weight: 700;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-primary);
	margin: 0 0 var(--as-space-4);
}

.as-eyebrow::before {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--as-primary));
}

.as-eyebrow--accent { color: var(--as-accent); }
.as-eyebrow--accent::before { background: linear-gradient(90deg, transparent, var(--as-accent)); }

.as-grid {
	display: grid;
	gap: var(--as-space-5);
	grid-template-columns: 1fr;
}

.as-content-area { padding: var(--as-space-6) 0 var(--as-space-8); }

.as-layout {
	display: grid;
	gap: var(--as-space-7);
	grid-template-columns: 1fr;
}

.as-layout:not(.as-layout--sidebar) .as-layout__main {
	max-width: var(--as-container-narrow);
	margin: 0 auto;
	width: 100%;
}

/* =========================================================
   5. BUTTONS
   ========================================================= */

.as-btn,
.wp-block-button__link,
input[type="submit"],
button.as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--as-space-2);
	min-height: 46px;
	padding: var(--as-space-3) var(--as-space-5);
	border-radius: var(--as-radius-sm);
	border: 1px solid transparent;
	background: var(--as-grad-primary);
	color: var(--as-ink-invert);
	font-family: inherit;
	font-size: var(--as-text-base);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.as-btn:hover,
.as-btn:focus,
input[type="submit"]:hover {
	color: var(--as-ink-invert);
	box-shadow: var(--as-glow-blue);
	transform: translateY(-1px);
}

.as-btn--secondary {
	background: rgba(255, 255, 255, 0.02);
	color: var(--as-ink);
	border-color: var(--as-line-strong);
	background-image: none;
}

.as-btn--secondary:hover,
.as-btn--secondary:focus {
	color: var(--as-ink);
	border-color: var(--as-line-glow);
	background-color: rgba(0, 184, 255, 0.06);
	box-shadow: none;
}

.as-btn--ghost {
	background: transparent;
	background-image: none;
	color: var(--as-ink-soft);
	border-color: var(--as-line);
}

.as-btn--ghost:hover {
	color: var(--as-ink);
	border-color: var(--as-line-strong);
	box-shadow: none;
}

/* Warm accent button: reserved for genuine attention moments. */
.as-btn--accent {
	background: var(--as-grad-warm);
	color: #fff;
}

.as-btn--accent:hover,
.as-btn--accent:focus {
	color: #fff;
	box-shadow: var(--as-glow-warm);
}

.as-btn--wide { width: 100%; }

.as-btn--sm {
	min-height: 38px;
	padding: var(--as-space-2) var(--as-space-4);
	font-size: var(--as-text-sm);
}

.as-btn--lg {
	min-height: 54px;
	padding: var(--as-space-4) var(--as-space-6);
	font-size: var(--as-text-lg);
}

.as-textlink {
	font-weight: 600;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--as-primary);
}

.as-textlink span[aria-hidden] {
	transition: transform 0.18s ease;
}

.as-textlink:hover span[aria-hidden] { transform: translateX(3px); }
.as-textlink:hover { text-decoration: underline; }

/* =========================================================
   6. HEADER & NAVIGATION
   ========================================================= */

.as-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(5, 6, 8, 0.82);
	backdrop-filter: saturate(160%) blur(12px);
	-webkit-backdrop-filter: saturate(160%) blur(12px);
	border-bottom: 1px solid var(--as-line);
}

.as-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-space-4);
	min-height: var(--as-header-height);
}

.as-brand { order: 1; }
.as-header__actions { order: 2; }
.as-nav { order: 3; }

.as-brand {
	display: flex;
	align-items: center;
	gap: var(--as-space-3);
	text-decoration: none;
	color: var(--as-ink);
}

.as-brand img { max-height: 40px; width: auto; }

.as-brand__text {
	display: block;
	font-family: var(--as-font-display);
	font-weight: 800;
	font-size: 1.18rem;
	letter-spacing: var(--as-track-tight);
	line-height: 1.1;
	color: var(--as-ink);
}

.as-brand__tagline {
	display: none;
	font-size: var(--as-text-xs);
	color: var(--as-ink-faint);
	font-weight: 500;
	letter-spacing: 0;
}

.as-header__actions {
	display: flex;
	align-items: center;
	gap: var(--as-space-2);
}

.as-header__cta { display: none; }

.as-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--as-space-2);
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--as-line-strong);
	border-radius: var(--as-radius-sm);
	color: var(--as-ink);
	font-family: inherit;
	font-size: var(--as-text-sm);
	font-weight: 600;
	padding: 9px 12px;
	cursor: pointer;
	min-height: 42px;
}

.as-nav-toggle__bars {
	display: block;
	position: relative;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.as-nav-toggle__bars::before,
.as-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.as-nav-toggle__bars::before { top: -6px; }
.as-nav-toggle__bars::after { top: 6px; }

.as-search-toggle {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--as-line-strong);
	border-radius: var(--as-radius-sm);
	min-height: 42px;
	min-width: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--as-ink-soft);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.as-search-toggle:hover {
	color: var(--as-primary);
	border-color: var(--as-line-glow);
}

.as-search-toggle svg { width: 18px; height: 18px; }

.as-nav {
	display: none;
	width: 100%;
	border-top: 1px solid var(--as-line);
	padding: var(--as-space-3) 0 var(--as-space-5);
}

.as-nav.is-open { display: block; }

.as-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.as-nav li { position: relative; }

.as-nav a {
	display: block;
	padding: var(--as-space-3) 0;
	color: var(--as-ink-soft);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--as-text-base);
	border-bottom: 1px solid var(--as-line);
}

.as-nav a:hover,
.as-nav a:focus,
.as-nav .current-menu-item > a,
.as-nav .current_page_item > a,
.as-nav .current-menu-ancestor > a {
	color: var(--as-ink);
}

.as-nav .sub-menu { padding-left: var(--as-space-4); }

.as-header-search { display: none; padding: 0 0 var(--as-space-5); }
.as-header-search.is-open { display: block; }

/* =========================================================
   7. FORM CONTROLS
   ========================================================= */

.as-searchform {
	display: flex;
	gap: var(--as-space-2);
	width: 100%;
}

.as-searchform__field { flex: 1 1 auto; min-width: 0; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	width: 100%;
	font-family: inherit;
	font-size: var(--as-text-base);
	color: var(--as-ink);
	background: var(--as-surface-3);
	border: 1px solid var(--as-line-strong);
	border-radius: var(--as-radius-sm);
	padding: var(--as-space-3) var(--as-space-4);
	min-height: 46px;
}

input::placeholder,
textarea::placeholder { color: var(--as-ink-faint); }

textarea { min-height: 160px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
	border-color: var(--as-primary);
	outline: 2px solid rgba(0, 184, 255, 0.35);
	outline-offset: 0;
}

label {
	display: block;
	font-weight: 600;
	font-size: var(--as-text-sm);
	margin-bottom: var(--as-space-2);
	color: var(--as-ink);
}

/* =========================================================
   8. HERO
   ========================================================= */

.as-hero {
	position: relative;
	isolation: isolate;
	padding: var(--as-space-8) 0 var(--as-space-8);
	border-bottom: 1px solid var(--as-line);
	overflow: hidden;
	background: var(--as-bg);
}

/* Cinematic light: cyan key from upper left, warm rim from lower right. */
.as-hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -30%;
	height: 120%;
	z-index: -2;
	background:
		radial-gradient(760px 520px at 22% 18%, rgba(0, 150, 220, 0.26), transparent 62%),
		radial-gradient(620px 420px at 78% 78%, rgba(255, 90, 40, 0.13), transparent 65%);
	pointer-events: none;
}

/* Faint grid: reads as engineering, not gaming. */
.as-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(125, 175, 220, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(125, 175, 220, 0.045) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(900px 500px at 30% 30%, #000 20%, transparent 78%);
	-webkit-mask-image: radial-gradient(900px 500px at 30% 30%, #000 20%, transparent 78%);
	pointer-events: none;
}

.as-hero__inner {
	display: grid;
	gap: var(--as-space-7);
	grid-template-columns: 1fr;
	align-items: center;
}

.as-hero__title {
	font-size: var(--as-text-4xl);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.04;
	margin-bottom: var(--as-space-5);
}

.as-hero__text {
	font-size: var(--as-text-lg);
	color: var(--as-ink-soft);
	max-width: 52ch;
	margin-bottom: var(--as-space-6);
}

.as-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-3);
}

.as-hero__note {
	margin: var(--as-space-6) 0 0;
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
	max-width: 46ch;
}

/* --- Hero visual: original abstract composition, no imagery required --- */
.as-hero__visual {
	position: relative;
	border-radius: var(--as-radius-lg);
	overflow: hidden;
	background: linear-gradient(160deg, #0d1620 0%, #070b10 60%, #0a0f16 100%);
	border: 1px solid var(--as-line);
	box-shadow: var(--as-shadow-lg);
	aspect-ratio: 4 / 3;
}

.as-hero__visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.as-hero__visual svg { width: 100%; height: 100%; display: block; }

.as-hero__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: var(--as-space-3) var(--as-space-4);
	font-size: var(--as-text-xs);
	color: var(--as-ink-faint);
	background: linear-gradient(0deg, rgba(5, 6, 8, 0.92), transparent);
	text-align: center;
}

/* Floating spec chips over the visual — real labels, not decoration. */
.as-hero__chips {
	position: absolute;
	top: var(--as-space-4);
	left: var(--as-space-4);
	right: var(--as-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	pointer-events: none;
}

.as-hero__chip {
	font-size: var(--as-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--as-ink-soft);
	background: rgba(10, 16, 22, 0.72);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius-pill);
	padding: 5px 11px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.as-hero__chip--accent {
	color: var(--as-accent);
	border-color: rgba(255, 107, 44, 0.35);
}

/* =========================================================
   9. CARDS
   ========================================================= */

.as-card {
	display: flex;
	flex-direction: column;
	background: var(--as-grad-surface);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	overflow: hidden;
	height: 100%;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-card:hover,
.as-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--as-line-glow);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 184, 255, 0.12);
}

.as-card__media {
	display: block;
	background: var(--as-surface-3);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-bottom: 1px solid var(--as-line);
}

.as-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder: an honest label block, never a fake screenshot. */
.as-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(220px 120px at 30% 20%, rgba(0, 184, 255, 0.16), transparent 70%),
		linear-gradient(150deg, #0e1720, #080d13);
	color: var(--as-primary);
	font-weight: 800;
	font-size: var(--as-text-sm);
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
}

.as-card__body {
	padding: var(--as-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
	flex: 1 1 auto;
}

.as-card__title {
	font-size: var(--as-text-lg);
	margin: 0;
	line-height: 1.3;
}

.as-card__title a {
	color: var(--as-ink);
	text-decoration: none;
}

.as-card__title a:hover,
.as-card__title a:focus { color: var(--as-primary-bright); }

.as-card__excerpt {
	margin: 0;
	color: var(--as-ink-soft);
	font-size: var(--as-text-sm);
}

.as-card__footer { margin-top: auto; padding-top: var(--as-space-2); }

.as-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-2) var(--as-space-3);
	font-size: var(--as-text-xs);
	color: var(--as-ink-faint);
	margin: 0;
	list-style: none;
	padding: 0;
}

.as-meta a { color: var(--as-ink-faint); text-decoration: none; }
.as-meta a:hover { color: var(--as-primary); text-decoration: underline; }

.as-chip {
	display: inline-block;
	font-size: var(--as-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--as-primary);
	background: var(--as-primary-soft);
	border: 1px solid rgba(0, 184, 255, 0.24);
	border-radius: var(--as-radius-pill);
	padding: 4px 11px;
	text-decoration: none;
}

.as-chip:hover {
	background: rgba(0, 184, 255, 0.2);
	color: var(--as-primary-bright);
}

.as-chip--accent {
	background: var(--as-accent-soft);
	color: var(--as-accent);
	border-color: rgba(255, 107, 44, 0.3);
}

.as-chip--muted {
	background: rgba(255, 255, 255, 0.03);
	color: var(--as-ink-soft);
	border-color: var(--as-line);
}

/* --- Category cards with icon --- */
.as-catcard {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
	padding: var(--as-space-5);
	background: var(--as-grad-surface);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	height: 100%;
	overflow: hidden;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-catcard:hover {
	transform: translateY(-3px);
	border-color: var(--as-line-glow);
	box-shadow: 0 0 0 1px rgba(0, 184, 255, 0.14), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* Hairline of light along the top edge on hover. */
.as-catcard::after {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--as-primary-bright), transparent);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.as-catcard:hover::after { opacity: 1; }

.as-catcard__icon {
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--as-radius-sm);
	background: var(--as-primary-soft);
	border: 1px solid rgba(0, 184, 255, 0.22);
	color: var(--as-primary);
	margin-bottom: var(--as-space-1);
}

.as-catcard__icon svg { width: 20px; height: 20px; }

.as-catcard:nth-child(4n+2) .as-catcard__icon {
	background: var(--as-accent-soft);
	border-color: rgba(255, 107, 44, 0.26);
	color: var(--as-accent);
}

.as-catcard__title { font-size: var(--as-text-lg); margin: 0; }

.as-catcard__text {
	margin: 0;
	color: var(--as-ink-soft);
	font-size: var(--as-text-sm);
	flex: 1 1 auto;
}

/* --- Comparison teaser --- */
.as-vscard__pair {
	display: flex;
	align-items: center;
	gap: var(--as-space-3);
	margin-bottom: var(--as-space-3);
}

.as-vscard__side {
	flex: 1 1 0;
	font-weight: 700;
	color: var(--as-ink);
	font-size: var(--as-text-base);
	line-height: 1.3;
}

.as-vscard__vs {
	flex: 0 0 auto;
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--as-accent);
	background: var(--as-accent-soft);
	border: 1px solid rgba(255, 107, 44, 0.3);
	border-radius: var(--as-radius-pill);
	padding: 3px 10px;
	text-transform: uppercase;
}

/* --- Editorial feature (asymmetric) --- */
.as-feature {
	display: grid;
	gap: var(--as-space-5);
	grid-template-columns: 1fr;
	background: var(--as-grad-surface);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius-lg);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-feature:hover {
	border-color: var(--as-line-glow);
	box-shadow: 0 0 0 1px rgba(0, 184, 255, 0.12), var(--as-shadow);
}

.as-feature__media {
	display: block;
	background: var(--as-surface-3);
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.as-feature__media img { width: 100%; height: 100%; object-fit: cover; }

.as-feature__body {
	padding: var(--as-space-5) var(--as-space-5) var(--as-space-6);
	display: flex;
	flex-direction: column;
	gap: var(--as-space-4);
	justify-content: center;
}

.as-feature__title {
	font-size: var(--as-text-2xl);
	margin: 0;
	line-height: 1.15;
}

.as-feature__title a { color: var(--as-ink); text-decoration: none; }
.as-feature__title a:hover { color: var(--as-primary-bright); }

.as-feature__excerpt { color: var(--as-ink-soft); margin: 0; }

/* --- Post rows --- */
.as-postrow {
	display: flex;
	gap: var(--as-space-4);
	padding: var(--as-space-4) 0;
	border-bottom: 1px solid var(--as-line);
}

.as-postrow__media {
	flex: 0 0 96px;
	border-radius: var(--as-radius-sm);
	overflow: hidden;
	background: var(--as-surface-3);
	aspect-ratio: 4 / 3;
	border: 1px solid var(--as-line);
}

.as-postrow__media img { width: 100%; height: 100%; object-fit: cover; }

.as-postrow__title {
	font-size: var(--as-text-base);
	margin: 0 0 var(--as-space-2);
	line-height: 1.35;
}

.as-postrow__title a { color: var(--as-ink); text-decoration: none; }
.as-postrow__title a:hover { color: var(--as-primary-bright); }

/* =========================================================
   10. TOOL CARD
   ========================================================= */

.as-tool {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-4);
	padding: var(--as-space-5);
	background: var(--as-grad-surface);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	height: 100%;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.as-tool:hover {
	transform: translateY(-3px);
	border-color: var(--as-line-glow);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.as-tool__head {
	display: flex;
	align-items: center;
	gap: var(--as-space-4);
}

.as-tool__logo {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--as-radius-sm);
	background: var(--as-surface-2);
	border: 1px solid var(--as-line);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--as-primary);
	font-weight: 800;
	font-size: var(--as-text-lg);
}

.as-tool__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.as-tool__name { font-size: var(--as-text-lg); margin: 0 0 var(--as-space-2); }

.as-tool__bestfor {
	display: inline-block;
	font-size: var(--as-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--as-accent);
	background: var(--as-accent-soft);
	border: 1px solid rgba(255, 107, 44, 0.3);
	border-radius: var(--as-radius-pill);
	padding: 4px 10px;
}

.as-tool__desc { margin: 0; color: var(--as-ink-soft); font-size: var(--as-text-sm); }

.as-tool__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--as-space-2);
	font-size: var(--as-text-sm);
	color: var(--as-ink-soft);
}

.as-tool__features li {
	position: relative;
	padding-left: 1.5em;
}

.as-tool__features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--as-primary);
	box-shadow: 0 0 8px rgba(0, 184, 255, 0.6);
}

.as-tool__price {
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
	margin: 0;
}

.as-tool__actions {
	margin-top: auto;
	padding-top: var(--as-space-4);
	border-top: 1px solid var(--as-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-3);
	align-items: center;
}

/* =========================================================
   11. NEWSLETTER
   ========================================================= */

.as-newsletter {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(150deg, #0c141d 0%, #070c11 100%);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius-lg);
	padding: var(--as-space-7) var(--as-space-5);
	text-align: center;
}

.as-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(520px 260px at 20% 0%, rgba(0, 184, 255, 0.18), transparent 68%),
		radial-gradient(420px 240px at 88% 100%, rgba(255, 107, 44, 0.14), transparent 70%);
	pointer-events: none;
}

.as-newsletter h2,
.as-newsletter .as-section__title {
	color: var(--as-ink);
	max-width: 22ch;
	margin-left: auto;
	margin-right: auto;
}

.as-newsletter__text {
	color: var(--as-ink-soft);
	margin: 0 auto var(--as-space-6);
	max-width: 54ch;
}

.as-newsletter__form {
	display: grid;
	gap: var(--as-space-3);
	max-width: 520px;
	margin: 0 auto;
}

.as-newsletter__form input[type="email"] {
	background: rgba(5, 8, 12, 0.7);
	border-color: var(--as-line-strong);
}

.as-newsletter__note {
	font-size: var(--as-text-xs);
	color: var(--as-ink-faint);
	margin: var(--as-space-4) auto 0;
	max-width: 50ch;
}

/* =========================================================
   12. TRUST SECTION
   ========================================================= */

.as-trust {
	display: grid;
	gap: var(--as-space-6);
	grid-template-columns: 1fr;
	align-items: start;
}

.as-trust__steps {
	display: grid;
	gap: var(--as-space-4);
	counter-reset: trust;
}

.as-trust__step {
	position: relative;
	padding: var(--as-space-4) var(--as-space-5) var(--as-space-4) calc(var(--as-space-5) + 44px);
	background: var(--as-surface-3);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	counter-increment: trust;
}

.as-trust__step::before {
	content: counter(trust, decimal-leading-zero);
	position: absolute;
	left: var(--as-space-5);
	top: var(--as-space-4);
	font-family: var(--as-font-mono);
	font-size: var(--as-text-sm);
	font-weight: 700;
	color: var(--as-primary);
}

.as-trust__steptitle {
	font-size: var(--as-text-base);
	margin: 0 0 var(--as-space-2);
}

.as-trust__steptext {
	margin: 0;
	color: var(--as-ink-soft);
	font-size: var(--as-text-sm);
}

/* =========================================================
   13. ARTICLE
   ========================================================= */

.as-breadcrumbs {
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
	padding: var(--as-space-4) 0 0;
}

.as-breadcrumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.as-breadcrumbs a { color: var(--as-ink-soft); text-decoration: none; }
.as-breadcrumbs a:hover { color: var(--as-primary); text-decoration: underline; }
.as-breadcrumbs__sep { color: var(--as-ink-faint); opacity: 0.6; }

/* Reading surface: a lift off pure black, no glow behind text. */
.as-article {
	background: var(--as-bg-alt);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius-lg);
	padding: var(--as-space-6) var(--as-space-5) var(--as-space-7);
}

.as-article__header {
	padding: 0 0 var(--as-space-5);
	border-bottom: 1px solid var(--as-line);
	margin-bottom: var(--as-space-5);
}

.as-article__title {
	font-size: var(--as-text-3xl);
	margin-bottom: var(--as-space-4);
	line-height: 1.1;
}

.as-article__standfirst {
	font-size: var(--as-text-lg);
	color: var(--as-ink-soft);
	margin-bottom: var(--as-space-4);
}

.as-byline {
	display: flex;
	align-items: center;
	gap: var(--as-space-3);
	flex-wrap: wrap;
	font-size: var(--as-text-sm);
	color: var(--as-ink-soft);
}

.as-byline img { border-radius: 50%; border: 1px solid var(--as-line-strong); }
.as-byline a { color: var(--as-ink); font-weight: 600; text-decoration: none; }
.as-byline a:hover { color: var(--as-primary); }

.as-featured { margin: 0 0 var(--as-space-6); }
.as-featured img { width: 100%; border-radius: var(--as-radius); border: 1px solid var(--as-line); }

.as-entry {
	font-size: var(--as-text-lg);
	line-height: 1.85;
	color: #e6ebf1;
}

.as-entry > * { max-width: 100%; }

.as-entry h2 {
	font-size: var(--as-text-2xl);
	margin-top: var(--as-space-7);
	padding-top: var(--as-space-2);
	scroll-margin-top: calc(var(--as-header-height) + 24px);
}

.as-entry h3 {
	font-size: var(--as-text-xl);
	margin-top: var(--as-space-6);
	scroll-margin-top: calc(var(--as-header-height) + 24px);
}

.as-entry ul,
.as-entry ol { padding-left: 1.3em; }
.as-entry li { margin-bottom: var(--as-space-3); }
.as-entry img { border-radius: var(--as-radius); }
.as-entry strong { color: var(--as-ink); }

.alignleft { float: left; margin: 0 var(--as-space-5) var(--as-space-4) 0; }
.alignright { float: right; margin: 0 0 var(--as-space-4) var(--as-space-5); }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.sticky .as-card__title::after { content: " \2605"; color: var(--as-accent); }

/* --- Table of contents --- */
.as-toc {
	background: var(--as-surface-3);
	border: 1px solid var(--as-line);
	border-left: 2px solid var(--as-primary);
	border-radius: var(--as-radius);
	padding: var(--as-space-4) var(--as-space-5);
	margin-bottom: var(--as-space-6);
}

.as-toc__title {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-ink-faint);
	margin: 0 0 var(--as-space-3);
}

.as-toc ol { list-style: none; counter-reset: toc; margin: 0; padding: 0; }

.as-toc li {
	counter-increment: toc;
	margin-bottom: var(--as-space-2);
	padding-left: 2em;
	position: relative;
	font-size: var(--as-text-base);
}

.as-toc li::before {
	content: counter(toc, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-size: var(--as-text-xs);
	font-weight: 700;
	color: var(--as-ink-faint);
	font-family: var(--as-font-mono);
}

.as-toc li.as-toc__sub { padding-left: 3.2em; font-size: var(--as-text-sm); }

.as-toc li.as-toc__sub::before {
	content: "";
	left: 2.1em;
	top: 0.75em;
	width: 10px;
	height: 1px;
	background: var(--as-line-strong);
}

.as-toc a { color: var(--as-ink-soft); text-decoration: none; }
.as-toc a:hover { color: var(--as-primary-bright); text-decoration: underline; }
.as-toc a[aria-current="true"] { color: var(--as-primary-bright); font-weight: 600; }

/* =========================================================
   14. REVIEW / COMPARISON COMPONENTS
   ========================================================= */

.as-disclosure {
	display: flex;
	gap: var(--as-space-3);
	background: var(--as-accent-soft);
	border: 1px solid rgba(255, 107, 44, 0.26);
	border-left: 2px solid var(--as-accent);
	border-radius: var(--as-radius-sm);
	padding: var(--as-space-4);
	font-size: var(--as-text-sm);
	color: var(--as-ink-soft);
	margin-bottom: var(--as-space-6);
	line-height: 1.7;
}

.as-disclosure p { margin: 0; }
.as-disclosure strong { color: var(--as-ink); }

.as-verdict {
	position: relative;
	border: 1px solid var(--as-line-strong);
	border-radius: var(--as-radius);
	background: linear-gradient(150deg, #101c26 0%, #0a1018 100%);
	overflow: hidden;
	margin-bottom: var(--as-space-6);
}

.as-verdict::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--as-primary-bright) 40%, transparent);
}

.as-verdict__head {
	background: rgba(0, 184, 255, 0.05);
	border-bottom: 1px solid var(--as-line);
	padding: var(--as-space-4) var(--as-space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	align-items: baseline;
	justify-content: space-between;
}

.as-verdict__label {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-primary);
	margin: 0;
}

.as-verdict__product { font-size: var(--as-text-lg); margin: 0; }
.as-verdict__body { padding: var(--as-space-5); }
.as-verdict__body p:last-of-type { margin-bottom: var(--as-space-4); }

.as-specs {
	display: grid;
	gap: 0;
	margin: 0 0 var(--as-space-5);
	border-top: 1px solid var(--as-line);
}

.as-specs__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: var(--as-space-3) 0;
	border-bottom: 1px solid var(--as-line);
}

.as-specs__key {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--as-ink-faint);
}

.as-specs__val { color: var(--as-ink); }

.as-proscons {
	display: grid;
	gap: var(--as-space-4);
	grid-template-columns: 1fr;
	margin-bottom: var(--as-space-6);
}

.as-proscons__col {
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: var(--as-space-5);
	background: var(--as-surface-3);
}

.as-proscons__col--pros { border-top: 2px solid var(--as-pro); }
.as-proscons__col--cons { border-top: 2px solid var(--as-con); }

.as-proscons__title {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	margin: 0 0 var(--as-space-4);
	color: var(--as-ink-soft);
}

.as-proscons__col--pros .as-proscons__title { color: var(--as-pro); }
.as-proscons__col--cons .as-proscons__title { color: var(--as-con); }

.as-proscons ul { list-style: none; margin: 0; padding: 0; font-size: var(--as-text-base); }

.as-proscons li {
	position: relative;
	padding-left: 1.8em;
	margin-bottom: var(--as-space-3);
	color: var(--as-ink-soft);
}

.as-proscons li:last-child { margin-bottom: 0; }

.as-proscons__col--pros li::before,
.as-proscons__col--cons li::before {
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85em;
	font-weight: 800;
}

.as-proscons__col--pros li::before {
	content: "+";
	color: var(--as-pro);
	background: var(--as-pro-soft);
}

.as-proscons__col--cons li::before {
	content: "\2013";
	color: var(--as-con);
	background: var(--as-con-soft);
}

/* --- Roundup product block --- */
.as-product {
	position: relative;
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	background: var(--as-surface-3);
	padding: var(--as-space-5);
	margin-bottom: var(--as-space-6);
}

.as-product__head {
	display: flex;
	gap: var(--as-space-4);
	align-items: flex-start;
	margin-bottom: var(--as-space-4);
}

.as-product__rank {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: var(--as-radius-sm);
	background: var(--as-primary-soft);
	border: 1px solid rgba(0, 184, 255, 0.3);
	color: var(--as-primary);
	font-family: var(--as-font-mono);
	font-weight: 700;
	font-size: var(--as-text-base);
	display: flex;
	align-items: center;
	justify-content: center;
}

.as-product__name { font-size: var(--as-text-xl); margin: 0 0 var(--as-space-2); }

.as-product__bestfor {
	display: inline-block;
	font-size: var(--as-text-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--as-accent-soft);
	color: var(--as-accent);
	border: 1px solid rgba(255, 107, 44, 0.3);
	border-radius: var(--as-radius-pill);
	padding: 4px 10px;
}

.as-product__desc { color: var(--as-ink-soft); }

.as-product__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-3);
	align-items: center;
	margin-top: var(--as-space-4);
	padding-top: var(--as-space-4);
	border-top: 1px solid var(--as-line);
}

.as-product__price { font-size: var(--as-text-sm); color: var(--as-ink-faint); }

/* --- Closing CTA panel --- */
.as-ctapanel {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--as-line-strong);
	background: linear-gradient(140deg, #0e1a24 0%, #080d13 100%);
	border-radius: var(--as-radius);
	padding: var(--as-space-5);
	margin-bottom: var(--as-space-6);
	display: grid;
	gap: var(--as-space-4);
}

.as-ctapanel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px 200px at 12% 0%, rgba(0, 184, 255, 0.16), transparent 70%);
	pointer-events: none;
}

.as-ctapanel > * { position: relative; }

.as-ctapanel__title { font-size: var(--as-text-lg); margin: 0 0 var(--as-space-2); }
.as-ctapanel__text { margin: 0; color: var(--as-ink-soft); font-size: var(--as-text-sm); }

/* --- FAQ --- */
.as-faq {
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	overflow: hidden;
	margin-bottom: var(--as-space-6);
	background: var(--as-surface-3);
}

.as-faq__item + .as-faq__item { border-top: 1px solid var(--as-line); }

.as-faq__q {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: var(--as-text-base);
	font-weight: 600;
	color: var(--as-ink);
	padding: var(--as-space-4) var(--as-space-5);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--as-space-4);
	min-height: 58px;
	transition: background-color 0.15s ease;
}

.as-faq__q:hover { background: rgba(0, 184, 255, 0.05); }

.as-faq__icon { flex: 0 0 auto; width: 20px; height: 20px; position: relative; }

.as-faq__icon::before,
.as-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--as-primary);
	border-radius: 2px;
	transition: transform 0.2s ease;
}

.as-faq__icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.as-faq__icon::after { top: 2px; left: 9px; width: 2px; height: 16px; }
.as-faq__q[aria-expanded="true"] .as-faq__icon::after { transform: scaleY(0); }

.as-faq__a { padding: 0 var(--as-space-5) var(--as-space-4); color: var(--as-ink-soft); }
.as-faq__a[hidden] { display: none; }

/* --- Tables --- */
.as-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	margin-bottom: var(--as-space-3);
	background: var(--as-surface-3);
}

.as-tablewrap.is-scrollable {
	box-shadow: inset -14px 0 14px -14px rgba(0, 184, 255, 0.35);
}

.as-tablewrap table,
.as-entry table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--as-text-base);
	margin: 0;
	min-width: 560px;
	background: transparent;
}

.as-tablewrap th,
.as-tablewrap td,
.as-entry th,
.as-entry td {
	text-align: left;
	padding: var(--as-space-4);
	border-bottom: 1px solid var(--as-line);
	border-right: 1px solid var(--as-line);
	vertical-align: top;
	color: var(--as-ink-soft);
}

.as-tablewrap th:last-child,
.as-tablewrap td:last-child { border-right: 0; }

.as-tablewrap thead th,
.as-entry thead th {
	background: rgba(0, 184, 255, 0.06);
	font-size: var(--as-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--as-primary);
	white-space: nowrap;
	font-weight: 800;
}

.as-tablewrap tbody tr:last-child td,
.as-tablewrap tbody tr:last-child th { border-bottom: 0; }

.as-tablewrap tbody th {
	font-weight: 600;
	white-space: nowrap;
	color: var(--as-ink);
	background: rgba(255, 255, 255, 0.015);
}

.as-tablewrap tbody tr:hover td { background: rgba(0, 184, 255, 0.035); }

.as-tablehint { font-size: var(--as-text-xs); color: var(--as-ink-faint); margin: 0 0 var(--as-space-6); }

/* --- Author box --- */
.as-authorbox {
	display: flex;
	gap: var(--as-space-4);
	background: var(--as-surface-3);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: var(--as-space-5);
	margin: var(--as-space-7) 0 0;
}

.as-authorbox img { border-radius: 50%; flex: 0 0 auto; border: 1px solid var(--as-line-strong); }
.as-authorbox__name { font-size: var(--as-text-base); margin: 0 0 var(--as-space-2); }
.as-authorbox__bio { margin: 0; font-size: var(--as-text-sm); color: var(--as-ink-soft); }

.as-related {
	margin-top: var(--as-space-7);
	padding-top: var(--as-space-6);
	border-top: 1px solid var(--as-line);
}

/* =========================================================
   15. SIDEBAR & WIDGETS
   ========================================================= */

.as-sidebar { display: grid; gap: var(--as-space-5); align-content: start; }

.as-widget {
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: var(--as-space-5);
	background: var(--as-surface-3);
}

.as-widget__title {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-primary);
	margin: 0 0 var(--as-space-4);
}

.as-widget ul { list-style: none; margin: 0; padding: 0; font-size: var(--as-text-sm); }
.as-widget li { padding: var(--as-space-2) 0; border-bottom: 1px solid var(--as-line); }
.as-widget li:last-child { border-bottom: 0; }
.as-widget a { color: var(--as-ink-soft); text-decoration: none; }
.as-widget a:hover { color: var(--as-primary-bright); text-decoration: underline; }

.as-sticky { position: static; }

/* =========================================================
   16. PAGINATION
   ========================================================= */

.as-pagination { margin-top: var(--as-space-7); }

.as-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	align-items: center;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.as-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--as-space-3);
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius-sm);
	color: var(--as-ink-soft);
	text-decoration: none;
	font-weight: 600;
	background: var(--as-surface-3);
}

.as-pagination .page-numbers:hover {
	border-color: var(--as-line-glow);
	color: var(--as-primary-bright);
}

.as-pagination .page-numbers.current {
	background: var(--as-grad-primary);
	border-color: transparent;
	color: var(--as-ink-invert);
}

.as-postnav {
	display: grid;
	gap: var(--as-space-4);
	margin-top: var(--as-space-7);
	padding-top: var(--as-space-5);
	border-top: 1px solid var(--as-line);
}

.as-postnav a { text-decoration: none; color: var(--as-ink); font-weight: 600; display: block; }
.as-postnav a:hover { color: var(--as-primary-bright); }

.as-postnav__label {
	display: block;
	font-size: var(--as-text-xs);
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-ink-faint);
	margin-bottom: var(--as-space-2);
	font-weight: 700;
}

/* =========================================================
   17. PAGE HEADS, 404, SEARCH, EMPTY STATES
   ========================================================= */

.as-pagehead {
	position: relative;
	background: var(--as-bg-alt);
	border-bottom: 1px solid var(--as-line);
	padding: var(--as-space-6) 0 var(--as-space-7);
	overflow: hidden;
}

.as-pagehead::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(620px 260px at 10% 0%, rgba(0, 184, 255, 0.12), transparent 70%);
	pointer-events: none;
}

.as-pagehead > * { position: relative; }

.as-pagehead__title { margin: 0 0 var(--as-space-3); font-size: var(--as-text-3xl); }
.as-pagehead__desc { color: var(--as-ink-soft); margin: 0; max-width: 62ch; }

.as-empty {
	border: 1px dashed var(--as-line-strong);
	border-radius: var(--as-radius);
	padding: var(--as-space-7) var(--as-space-5);
	text-align: center;
	background: var(--as-surface-3);
}

.as-404 { padding: var(--as-space-8) 0; text-align: center; }

.as-404__code {
	font-family: var(--as-font-mono);
	font-size: var(--as-text-sm);
	letter-spacing: 0.35em;
	color: var(--as-accent);
	margin-bottom: var(--as-space-4);
}

.as-404__title { font-size: var(--as-text-3xl); margin-bottom: var(--as-space-4); }
.as-404__text { color: var(--as-ink-soft); max-width: 54ch; margin: 0 auto var(--as-space-6); }
.as-404__search { max-width: 480px; margin: 0 auto var(--as-space-6); }

.as-404__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-3);
	justify-content: center;
	margin-bottom: var(--as-space-8);
}

/* =========================================================
   18. FORMS & NOTICES
   ========================================================= */

.as-form { display: grid; gap: var(--as-space-5); max-width: 620px; }
.as-form__row { display: grid; gap: var(--as-space-2); }
.as-form__note { font-size: var(--as-text-sm); color: var(--as-ink-faint); margin: 0; }

.as-notice {
	border-radius: var(--as-radius-sm);
	padding: var(--as-space-4);
	margin-bottom: var(--as-space-5);
	font-size: var(--as-text-base);
	border: 1px solid var(--as-line);
	background: var(--as-surface-3);
}

.as-notice--success { background: var(--as-pro-soft); border-color: rgba(46, 212, 122, 0.3); color: #8ef0bd; }
.as-notice--error { background: var(--as-con-soft); border-color: rgba(255, 92, 92, 0.3); color: #ffb3b3; }

.as-honeypot { position: absolute !important; left: -9999px; top: 0; }

/* =========================================================
   19. FOOTER
   ========================================================= */

.as-footer {
	position: relative;
	background: linear-gradient(180deg, #070b10 0%, #030405 100%);
	border-top: 1px solid var(--as-line);
	color: var(--as-ink-soft);
	padding: var(--as-space-8) 0 var(--as-space-6);
	margin-top: var(--as-space-8);
	font-size: var(--as-text-sm);
	overflow: hidden;
}

.as-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 184, 255, 0.5), transparent);
}

.as-footer a { color: var(--as-ink-soft); text-decoration: none; }
.as-footer a:hover, .as-footer a:focus { color: var(--as-primary-bright); text-decoration: underline; }

.as-footer__grid {
	display: grid;
	gap: var(--as-space-6);
	grid-template-columns: 1fr;
	padding-bottom: var(--as-space-6);
	border-bottom: 1px solid var(--as-line);
}

.as-footer__brandname {
	font-family: var(--as-font-display);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--as-ink);
	letter-spacing: var(--as-track-tight);
	margin: 0 0 var(--as-space-3);
	display: inline-block;
	text-decoration: none;
}

.as-footer__about { margin: 0 0 var(--as-space-4); max-width: 42ch; }

.as-footer__coltitle {
	font-size: var(--as-text-xs);
	font-weight: 800;
	letter-spacing: var(--as-track-label);
	text-transform: uppercase;
	color: var(--as-ink);
	margin: 0 0 var(--as-space-4);
}

.as-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--as-space-3); }

.as-footer__bottom { padding-top: var(--as-space-5); display: grid; gap: var(--as-space-4); }

.as-footer__disclosure {
	margin: 0 0 var(--as-space-3);
	color: var(--as-ink-faint);
	max-width: 78ch;
	font-size: var(--as-text-xs);
	line-height: 1.8;
	padding: var(--as-space-3) var(--as-space-4);
	border-left: 2px solid rgba(255, 107, 44, 0.5);
	background: rgba(255, 107, 44, 0.05);
	border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
}

.as-footer__copy { margin: 0; color: var(--as-ink-faint); font-size: var(--as-text-xs); }

.as-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--as-text-xs);
}

/* =========================================================
   20. COMMENTS
   ========================================================= */

.as-comments {
	margin-top: var(--as-space-7);
	padding-top: var(--as-space-6);
	border-top: 1px solid var(--as-line);
}

.as-comments__title { font-size: var(--as-text-xl); margin-bottom: var(--as-space-5); }

.comment-list { list-style: none; margin: 0 0 var(--as-space-6); padding: 0; }

.comment-list ol.children {
	list-style: none;
	margin: var(--as-space-4) 0 0;
	padding-left: var(--as-space-5);
	border-left: 1px solid var(--as-line);
}

.comment-body {
	border: 1px solid var(--as-line);
	border-radius: var(--as-radius);
	padding: var(--as-space-4) var(--as-space-5);
	margin-bottom: var(--as-space-4);
	background: var(--as-surface-3);
}

.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-3);
	margin-bottom: var(--as-space-3);
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
}

.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 700; font-style: normal; color: var(--as-ink); }
.comment-reply-link { font-weight: 600; font-size: var(--as-text-sm); text-decoration: none; }

.comment-form { display: grid; gap: var(--as-space-4); max-width: 620px; }
.comment-form p { margin: 0; display: grid; gap: var(--as-space-2); }
.comment-form .form-submit { display: block; }

.comment-notes,
.comment-form-cookies-consent label {
	font-size: var(--as-text-sm);
	color: var(--as-ink-faint);
	font-weight: 400;
}

.comment-form-cookies-consent {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--as-space-2);
}

.comment-form-cookies-consent input { width: auto; min-height: 0; }

/* =========================================================
   21. UTILITIES
   ========================================================= */

.as-hidden { display: none !important; }
.as-mt-0 { margin-top: 0 !important; }
.as-mb-0 { margin-bottom: 0 !important; }
.as-text-center { text-align: center; }
.as-muted { color: var(--as-ink-soft); }
.as-small { font-size: var(--as-text-sm); }

.as-flex-between {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-4);
	align-items: center;
	justify-content: space-between;
}

/* =========================================================
   22. RESPONSIVE
   ========================================================= */

@media (min-width: 600px) {
	.as-grid--2,
	.as-grid--3,
	.as-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.as-proscons { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.as-specs__row {
		grid-template-columns: 220px 1fr;
		gap: var(--as-space-4);
		align-items: baseline;
	}

	.as-newsletter__form { grid-template-columns: 1fr auto; align-items: start; }
	.as-newsletter { padding: var(--as-space-8) var(--as-space-7); }

	.as-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.as-postnav__next { text-align: right; }

	.as-ctapanel { grid-template-columns: 1fr auto; align-items: center; }

	.as-section__head--split {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.as-article { padding: var(--as-space-7) var(--as-space-6) var(--as-space-8); }
}

@media (min-width: 900px) {
	.as-container { padding: 0 var(--as-space-6); }

	.as-brand__tagline { display: block; }
	.as-nav-toggle { display: none; }
	.as-header__cta { display: inline-flex; }

	.as-nav {
		display: block;
		width: auto;
		border-top: 0;
		padding: 0;
		order: 2;
		margin-left: auto;
	}

	.as-header__actions { order: 3; }

	.as-nav > div > ul,
	.as-nav > ul {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.as-nav a {
		border-bottom: 0;
		padding: var(--as-space-2) var(--as-space-3);
		font-size: 0.94rem;
		border-radius: var(--as-radius-sm);
		position: relative;
	}

	.as-nav a:hover { background: rgba(255, 255, 255, 0.04); }

	/* Underline of light on the active item. */
	.as-nav .current-menu-item > a::after,
	.as-nav .current-menu-ancestor > a::after {
		content: "";
		position: absolute;
		left: var(--as-space-3);
		right: var(--as-space-3);
		bottom: 2px;
		height: 1px;
		background: var(--as-primary);
		box-shadow: 0 0 8px rgba(0, 184, 255, 0.8);
	}

	.as-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--as-surface);
		border: 1px solid var(--as-line-strong);
		border-radius: var(--as-radius);
		box-shadow: var(--as-shadow-lg);
		padding: var(--as-space-2);
		display: none;
		z-index: 300;
	}

	.as-nav li:hover > .sub-menu,
	.as-nav li:focus-within > .sub-menu { display: block; }

	.as-hero { padding: var(--as-space-9) 0; }

	.as-hero__inner {
		grid-template-columns: 1.02fr 0.98fr;
		gap: var(--as-space-8);
	}

	.as-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.as-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	.as-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }

	/* Asymmetric editorial feature: image left, copy right. */
	.as-feature { grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; }
	.as-feature__media { aspect-ratio: auto; height: 100%; min-height: 340px; }
	.as-feature__body { padding: var(--as-space-7); }

	.as-trust { grid-template-columns: 0.9fr 1.1fr; gap: var(--as-space-8); }
	.as-trust__steps { gap: var(--as-space-4); }

	.as-footer__grid {
		grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
		gap: var(--as-space-5);
	}

	.as-footer__bottom { grid-template-columns: 1fr auto; align-items: center; }

	.as-sticky { position: sticky; top: calc(var(--as-header-height) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.as-card:hover,
	.as-catcard:hover,
	.as-tool:hover,
	.as-btn:hover { transform: none; }
}

@media print {
	.as-header,
	.as-footer,
	.as-newsletter,
	.as-ctapanel,
	.as-comments,
	.as-related,
	.as-hero__visual { display: none !important; }

	body { background: #fff; color: #000; }
	.as-article, .as-entry { background: #fff; color: #000; border: 0; }
	.as-entry h2, .as-entry h3, .as-article__title { color: #000; }
	body { font-size: 12pt; }
}