/*
 * AI Tools Exam — Homepage (Nocturne dark redesign)
 * Scoped entirely under .ath-home so it never leaks into the rest of the
 * site, which stays on the existing light palette in style.css. Ported
 * from design_handoff_aitoolsexam_homepage/design/AI Tools Exam Homepage.dc.html
 * — see that file for the pixel-level source of truth this was built from.
 *
 * Tokens are declared on .ath-home (not :root) on purpose: the rest of the
 * site already owns :root for its own --primary/--accent/etc, and this
 * page is the only thing that should ever see the dark ramp below.
 */

.ath-home {
	--color-bg: #161826;
	--color-surface: #232532;
	--color-text: #e9e9ed;
	--color-neutral-300: #cfd3e5;
	--color-neutral-400: #b2b6ca;
	--color-neutral-500: #9397ab;
	--color-neutral-600: #75798c;
	--color-neutral-900: #292b31;
	--shadow-sm: 0 0 0 1px #3f424d;
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;

	--color-accent: #3fb4ce;
	--color-accent-100: #eef9fc;
	--color-accent-200: #d3eff5;
	--color-accent-300: #a8dfec;
	--color-accent-400: #6ec8dc;
	--color-accent-500: #3fb4ce;
	--color-accent-600: #2a90a9;
	--color-accent-700: #216f84;
	--color-accent-800: #1a5163;
	--color-accent-900: #143743;
	--color-cta: #d97a3d;
	--color-cta-300: #f0b98f;
	--color-cta-800: #5a3520;

	--font-heading: "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;

	/* .ath-header's actual rendered height at desktop widths (≥992px, the
	   only width .sticky-col in style.css cares about — below that the nav
	   wraps to its own row and grows taller, but nothing is sticky there
	   anyway): 14px top/bottom padding + the tallest row child (the 36px
	   min-height search input) + the 1px bottom border. Kept as a token,
	   not a value re-typed in style.css, so the two can't drift apart if
	   the header's own padding/input height ever changes. */
	--ath-header-height: 65px;

	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	min-height: 100vh;
	font-size: 15px;
	line-height: 1.55;
}
.ath-home *,
.ath-home *::before,
.ath-home *::after {
	box-sizing: border-box;
}
.ath-home img { display: block; max-width: 100%; }
.ath-home a { color: var(--color-accent); text-decoration: none; }
.ath-home a:hover { color: var(--color-accent-300); }
.ath-home h1, .ath-home h2, .ath-home h3 {
	font-family: var(--font-heading); font-weight: 500; letter-spacing: -0.015em; margin: 0;
}
.ath-home :focus { outline: none; }
.ath-home :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ath-home svg { display: block; flex-shrink: 0; }

.ath-container { max-width: var(--container-width, 1200px); margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* — buttons — */
.ath-home .btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	cursor: pointer; text-decoration: none;
	font-family: var(--font-heading); font-weight: 500;
	font-size: 14px; line-height: 1.2; color: var(--color-text);
	background: transparent; border: 1px solid transparent;
	padding: 9px 12px; border-radius: var(--radius-md);
}
.ath-home .btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.ath-home .btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.ath-home .btn-secondary { border-color: color-mix(in srgb, var(--color-text) 16%, transparent); }
.ath-home .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.ath-home .btn-cta { color: var(--color-cta); border-color: var(--color-cta); }
.ath-home .btn-cta:hover { background: color-mix(in srgb, var(--color-cta) 14%, transparent); color: var(--color-cta); }
.ath-home .btn-icon { width: 36px; height: 36px; padding: 0; }

/* — inputs — */
.ath-home .input {
	width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
	font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
	border-radius: var(--radius-md);
}
.ath-home .input::placeholder { color: var(--color-neutral-500); }
.ath-home .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.ath-home .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* — tags — */
.ath-home .tag {
	display: inline-flex; align-items: center; font-size: 11px;
	letter-spacing: 0.02em; padding: 3px 10px; border-radius: 6px;
	/* Defensive backstop — GPT-generated text (standout_feature etc.)
	   doesn't always obey its own length limit; without this an
	   over-long value wraps to 2+ lines and breaks the compact card
	   layout it sits in, instead of just truncating gracefully. */
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ath-home .tag-neutral { background: var(--color-neutral-900); color: var(--color-neutral-300); }
.ath-home .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ══════════════════ Header ══════════════════ */
.ath-header {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--color-bg) 92%, transparent);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.ath-header-row {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 14px 28px;
	display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.ath-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.ath-brand-mark {
	width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-accent);
	color: var(--color-accent); display: grid; place-items: center;
	font-size: 13px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0;
}
/* Site Icon (Customize -> Site Identity -> Site Icon) fills the same
   34px slot as the text-initials fallback, but without the teal outline
   box — the icon already carries its own visual identity, an accent
   border around it would fight it rather than frame it. */
.ath-brand-mark--icon { border: none; overflow: hidden; }
.ath-brand-mark--icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ath-brand-word { font-family: var(--font-heading); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
/* Nav is a real wp_nav_menu() (or its matching fallback markup) —
   <ul class="ath-navlinks-list"><li><a>, not bare <a> children — so the
   list itself is reset and the flex row lives on the <ul>. */
.ath-navlinks { font-size: 14px; }
.ath-navlinks-list {
	display: flex; align-items: center; gap: 22px;
	list-style: none; margin: 0; padding: 0;
}
.ath-navlinks-list li { margin: 0; }
.ath-navlinks-list a { color: var(--color-neutral-300); display: flex; align-items: center; gap: 5px; }
.ath-navlinks-list a:hover,
.ath-navlinks-list .current-menu-item > a { color: var(--color-accent); }
.ath-navlinks-list .sub-menu { display: none; }
.ath-navsearch { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.ath-search-field { position: relative; }
.ath-search-field .ath-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-500); pointer-events: none; }
.ath-navsearch .input { width: 200px; padding-left: 32px; }

/* ══════════════════ Hero ══════════════════ */
.ath-hero {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 88px 28px 72px;
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 64px; align-items: start;
}
.ath-kicker {
	display: flex; align-items: center; gap: 8px; font-size: 11px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent);
	margin-bottom: 20px;
}
.ath-kicker::before { content: ""; width: 22px; height: 1px; background: var(--color-accent); }
.ath-hero h1 { font-size: 52px; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 20px; text-wrap: pretty; }
.ath-hero-lead { font-size: 17px; line-height: 1.6; color: var(--color-neutral-300); max-width: 52ch; margin: 0 0 32px; }
.ath-hero-search { position: relative; max-width: 520px; }
.ath-hero-search .ath-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-500); }
.ath-hero-search .input { height: 52px; font-size: 15px; padding: 0 120px 0 44px; border-radius: 8px; }
.ath-hero-search .btn { position: absolute; right: 7px; top: 7px; height: 38px; }
.ath-trust-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ath-trust-chip {
	display: inline-flex; align-items: center; gap: 7px; font-size: 12px;
	color: var(--color-neutral-300); padding: 6px 12px;
	border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent); border-radius: 6px;
}
.ath-trust-chip .ath-icon { color: var(--color-accent); }

.ath-scorecard { padding: 22px; border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.ath-scorecard-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.ath-scorecard-head .ath-eyebrow { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); }
.ath-scorecard-head .ath-weighted { font-size: 11px; color: var(--color-neutral-500); }
.ath-scorecard-rows { display: flex; flex-direction: column; gap: 14px; }
.ath-scorecard-row-head { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.ath-scorecard-row-head span:last-child { color: var(--color-neutral-400); }
.ath-track { height: 4px; border-radius: 2px; background: var(--color-neutral-900); }
.ath-track-fill { height: 4px; border-radius: 2px; background: var(--color-accent); }
.ath-scorecard-foot {
	margin-top: 20px; padding-top: 16px;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
	display: flex; align-items: flex-end; justify-content: space-between;
}
.ath-scorecard-foot-caption { font-size: 12px; color: var(--color-neutral-400); max-width: 22ch; }
.ath-scorecard-overall { text-align: right; }
.ath-scorecard-overall-num { font-size: 34px; line-height: 1; font-family: var(--font-heading); color: var(--color-cta); }
.ath-scorecard-overall-label { font-size: 10px; color: var(--color-neutral-500); letter-spacing: 0.06em; }

/* ══════════════════ Methodology strip ══════════════════ */
.ath-method {
	border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.ath-method-grid {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 40px 28px;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px;
}
.ath-method-item .ath-icon { color: var(--color-accent); }
.ath-method-item-title { font-family: var(--font-heading); font-size: 15px; margin: 10px 0 5px; }
.ath-method-item-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-400); }

/* ══════════════════ Section headers (shared) ══════════════════ */
.ath-section-head {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 24px; margin-bottom: 24px;
}
.ath-section-head h2 { font-size: 26px; margin: 0 0 6px; }
.ath-section-head p { margin: 0; font-size: 14px; color: var(--color-neutral-400); }
.ath-section-head .ath-section-link { font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }

/* ══════════════════ Category grid ══════════════════ */
.ath-categories { max-width: var(--container-width, 1200px); margin: 0 auto; padding: 64px 28px 8px; }
.ath-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ath-category-pill {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 11px 14px; border-radius: 6px; background: var(--color-surface);
	color: var(--color-text); font-size: 14px;
}
.ath-category-pill:hover { background: var(--color-accent-900); color: var(--color-accent-200); }
.ath-category-pill span:last-child { font-size: 12px; color: var(--color-neutral-500); }
.ath-category-pill:hover span:last-child { color: var(--color-accent-200); }

/* ══════════════════ Top-rated / tool cards ══════════════════ */
.ath-top-rated { max-width: var(--container-width, 1200px); margin: 0 auto; padding: 64px 28px 0; }
.ath-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }

.ath-tool-card {
	display: flex; flex-direction: column; gap: 14px; padding: 18px;
	border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.ath-tool-card-head { display: flex; gap: 12px; align-items: flex-start; }
.ath-tool-logo {
	width: 38px; height: 38px; flex: none; border-radius: 8px;
	background: var(--color-accent-900); color: var(--color-accent-300);
	display: grid; place-items: center; font-size: 14px; font-weight: 600;
	overflow: hidden;
}
.ath-tool-logo img { width: 100%; height: 100%; object-fit: contain; }
.ath-tool-name-block { min-width: 0; flex: 1; }
.ath-tool-name {
	font-family: var(--font-heading); font-size: 17px; line-height: 1.2;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--color-text);
}
.ath-tool-category { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); margin-top: 3px; }
.ath-tool-score { text-align: right; flex: none; }
.ath-tool-score-num { font-size: 26px; line-height: 1; font-family: var(--font-heading); color: var(--color-cta); }
.ath-tool-score-den { font-size: 10px; color: var(--color-neutral-500); }
.ath-tool-tagline {
	margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300);
	overflow: hidden; max-height: 39px; display: -webkit-box;
	-webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.ath-tool-breakdown { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ath-tool-breakdown-track { height: 3px; border-radius: 2px; background: var(--color-neutral-900); }
.ath-tool-breakdown-fill { height: 3px; border-radius: 2px; background: var(--color-accent); }
.ath-tool-breakdown-cap { font-size: 9px; color: var(--color-neutral-600); margin-top: 4px; }
.ath-tool-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ath-tool-signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ath-tool-price { font-family: var(--font-heading); font-size: 13px; font-weight: 500; color: var(--color-cta); }
.ath-tool-actions { display: flex; gap: 8px; margin-top: auto; }
.ath-tool-actions .btn { flex: 1; }

/* ══════════════════ Single review header ══════════════════ */
/* affiliates-single-style1.php's hero — reuses .ath-brand-mark and
   .tag/.tag-neutral/.tag-outline from the header/tool-card above rather
   than redefining them. */
/* Recessed panel, darker than the page itself (--color-bg mixed toward
   black, not the lighter --color-surface every other card on this site
   uses) plus a border — on plain page background with nothing else
   marking it, the header read as just more body text with no visible
   boundary between it and the_content() below. color-mix() off
   --color-bg rather than a fixed hex so this stays correct if an admin
   changes the page background color in the Customizer. */
.ath-review-header-card {
	/* Parent theme's body{} sets hyphens:auto; without overriding it here
	   this card's title/lead wrap with ugly mid-word breaks ("cine-matic"). */
	hyphens: none;
	background: color-mix(in srgb, var(--color-bg) 88%, black);
	border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
	border-radius: 10px;
	padding: 24px 28px;
	margin-bottom: 32px;
}
/* .ath-review-breadcrumb removed 2026-08-24 along with the breadcrumb
   nav itself — product_type allows up to 3 terms now, so treating one
   as THE hierarchical parent for a Home/Category/Title trail was an
   artificial distinction the data model doesn't support. The kicker
   below carries the internal link instead, to every real category. */
.ath-review-identity { display: flex; align-items: center; gap: 18px; margin-bottom: 16px; }
/* Bigger than the header/footer's own .ath-brand-mark (34px/24px) — this
   one carries the title next to it, so it reads as the page's own
   identity mark, not a small nav-bar logo. Bumped again (56px -> 76px)
   at the user's request for more visual weight. */
.ath-review-identity .ath-brand-mark { width: 76px; height: 76px; border-radius: 12px; font-size: 24px; flex: none; }
.ath-review-identity-text { min-width: 0; }
.ath-review-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
/* Each category is its own link now (was plain comma-joined text) —
   inherit the kicker's own accent color rather than the browser's
   default link blue, underline only on hover as the interactive cue. */
.ath-review-kicker a { color: inherit; text-decoration: none; }
.ath-review-kicker a:hover { color: var(--color-accent-300); text-decoration: underline; }
.ath-review-identity h1 { margin: 4px 0 0; }
/* Rating score, reusing .ath-tool-score's own num/den styling — pushed
   to the far right of the flex row so it sits level with the logo and
   title instead of stacking below them. Boxed (border + padding) so it
   reads as its own scorecard rather than loose text floating next to
   the title. */
.ath-review-score {
	margin-left: auto;
	flex: none;
	text-align: center;
	padding: 10px 24px;
	border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
	border-radius: 10px;
}
.ath-review-score .ath-tool-score-num { font-size: 30px; }
.ath-review-lead { font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); max-width: 62ch; margin: 12px 0 16px; }
/* Pricing and Features used to share one unlabeled row — nothing told a
   reader which pill was which kind of fact, and "Contact for Pricing"
   sitting next to feature tags with no distinction read as noise. Each
   kind now gets its own row with a small kicker-style label, same
   treatment as .ath-review-kicker above the title. */
.ath-review-tags-row { margin-bottom: 12px; }
.ath-review-tags-label { display: block; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500); margin-bottom: 6px; }
.ath-review-tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* No bottom margin needed here anymore — .ath-review-header-card's own
   margin-bottom now supplies the gap before the_content(), and the
   byline is the last thing inside the card's own padding. */
.ath-review-byline { font-size: 12px; color: var(--color-neutral-500); }

/* ══════════════════ Sidebar: Quick facts ══════════════════ */
.ath-quick-facts {
	display: flex; flex-direction: column; gap: 2px;
	padding: 18px; border-radius: 8px;
	background: var(--color-surface); box-shadow: var(--shadow-sm);
	margin-bottom: 16px;
}
.ath-quick-facts-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-bottom: 10px;
}
.ath-quick-facts-title {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500);
}
.ath-quick-facts-row {
	display: flex; align-items: baseline; gap: 12px;
	padding: 8px 0;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
	font-size: 13px;
}
.ath-quick-facts-row:first-of-type { border-top: none; }
/* Fixed-width label column (was auto-width + space-between, which let
   "Best for" wrap to 2 lines while "Free tier" stayed on 1 — nothing
   lined up). --color-neutral-500 instead of -400: still the same
   "muted label, clear value" intent, just pushed a step further since
   -400 leans blue-gray enough to read as an accent color rather than a
   muted one. */
.ath-quick-facts-label {
	flex: 0 0 40%;
	color: var(--color-neutral-500);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Left-aligned, not right — a multi-term value (e.g. "Content Creators,
   Founders & Solopreneurs, Marketers") wraps to a clean, consistent
   left edge this way instead of a ragged one under right-alignment.
   min-width:0 is load-bearing: without it a flex item won't shrink
   below its own content's natural width, which is what let long values
   spill past the card's edge instead of wrapping at all. */
.ath-quick-facts-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--color-text);
	font-weight: 500;
	text-align: left;
	overflow-wrap: break-word;
}
/* "Best for" stacks its value one audience per line instead of comma-
   joining them — every other visual property (color, weight) stays
   identical to a normal value, only the layout differs. */
.ath-quick-facts-value-line { display: block; }
.ath-quick-facts-value-line:not(:last-child) { margin-bottom: 2px; }

/* ══════════════════ Sidebar: Image/price/score/CTA card ══════════════════ */
.ath-tool-cta-card {
	display: flex; flex-direction: column;
	border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
	margin-bottom: 16px; overflow: hidden;
}
/* Identity row — a small logo mark next to the tool's own name, not a
   hero-sized image. Replaces a ~250px-tall 16:10 image box that made a
   square logo the dominant element on the card instead of the score/
   price; also the only place in this whole sidebar the tool's name
   appeared anywhere outside the CTA button's own text. */
.ath-tool-cta-identity { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.ath-tool-cta-mark { width: 44px; height: 44px; border-radius: 8px; font-size: 15px; flex: none; }
.ath-tool-cta-name { font-family: var(--font-heading); font-size: 15px; font-weight: 500; color: var(--color-text); }
.ath-tool-cta-row {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
	padding: 16px 18px;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
	margin-top: 14px;
}
/* Price/Rank/Score now share one structure — small uppercase label
   above, value below, same baseline — instead of price alone carrying
   a "From" label while score had none. min-width:0 keeps a long price
   string (e.g. "Freemium + Subscription from $49/mo") from refusing to
   shrink and pushing the row past the card's edge. */
.ath-tool-cta-price, .ath-tool-cta-rank, .ath-tool-cta-score { min-width: 0; }
.ath-tool-cta-price-label, .ath-tool-cta-rank-label, .ath-tool-cta-score-label {
	font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-500);
	margin-bottom: 2px;
}
.ath-tool-cta-price-value { font-size: 18px; line-height: 1; font-family: var(--font-heading); color: var(--color-text); overflow-wrap: break-word; }
.ath-tool-cta-rank { text-align: center; cursor: help; }
.ath-tool-cta-rank-value { font-size: 18px; line-height: 1; font-family: var(--font-heading); color: var(--color-text); }
.ath-tool-cta-score { text-align: right; }
.ath-tool-cta-score-value { font-size: 18px; line-height: 1; font-family: var(--font-heading); color: var(--color-cta); }
.ath-tool-cta-score-den { font-size: 11px; font-family: var(--font-body); color: var(--color-neutral-500); }
.ath-tool-cta-card .btn { margin: 16px 18px 18px; }

/* ══════════════════ Latest reviews + Insights ══════════════════ */
.ath-split {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 56px 28px 0;
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px;
}
.ath-split h2 { font-size: 20px; margin: 0 0 4px; }
.ath-split-sub { margin: 0 0 14px; font-size: 13px; color: var(--color-neutral-500); }
.ath-latest-row {
	display: flex; align-items: center; gap: 16px; padding: 12px 0;
	border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
	color: var(--color-text);
}
.ath-latest-list > .ath-latest-row:last-child { border-bottom: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent); }
.ath-latest-row:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.ath-latest-name { flex: 1; min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ath-latest-category { font-size: 11px; color: var(--color-neutral-500); width: 120px; flex: none; }
.ath-latest-date { font-size: 11px; color: var(--color-neutral-600); width: 76px; flex: none; }
.ath-latest-score { font-size: 14px; font-family: var(--font-heading); color: var(--color-cta); width: 30px; text-align: right; flex: none; }

.ath-insights-list { display: flex; flex-direction: column; gap: 8px; }
.ath-insight-card { padding: 14px; border-radius: 8px; background: var(--color-surface); color: var(--color-text); }
.ath-insight-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px; }
.ath-insight-title { font-family: var(--font-heading); font-size: 15px; line-height: 1.25; }

/* ══════════════════ Footer ══════════════════ */
.ath-footer { margin-top: 80px; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.ath-footer-grid {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 48px 28px 32px;
	display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 40px;
}
.ath-footer-brand-block { max-width: 34ch; }
.ath-footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ath-footer-brand .ath-brand-mark { width: 24px; height: 24px; font-size: 10px; }
.ath-footer-brand-word { font-family: var(--font-heading); font-size: 15px; color: var(--color-text); }
.ath-footer-tagline { margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-neutral-400); max-width: 34ch; }
.ath-footer-social { display: flex; gap: 8px; margin-top: 16px; }
.ath-footer-col-title {
	font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--color-neutral-500); margin-bottom: 12px;
}
.ath-footer-col-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ath-footer-col-links a { color: var(--color-neutral-300); }
.ath-footer-col-links a:hover { color: var(--color-accent); }
.ath-footer-legal {
	max-width: var(--container-width, 1200px); margin: 0 auto; padding: 0 28px 40px;
	display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
	font-size: 11px; color: var(--color-neutral-600);
}

/* ══════════════════ All AI Tools archive ══════════════════ */
/* archive-affiliates.php — adapted from the "Browse All Tools Archive"
   design handoff. Reuses .ath-tool-score-num/-den, .ath-tool-breakdown*
   and .tag/.btn from the tool-card/header blocks above rather than
   redefining them; only what's actually new to this layout lives here. */
.ath-archive-head { max-width: var(--container-width, 1200px); margin: 0 auto; padding: 40px 28px 28px; }
.ath-archive-head h1 { font-size: 34px; }
.ath-archive-head-lead { font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); max-width: 62ch; margin: 10px 0 18px; }
.ath-archive-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ath-archive-stat {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 999px; font-size: 12px; color: var(--color-neutral-400);
	border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}
.ath-archive-stat .ath-icon { color: var(--color-accent); }

.ath-archive-row {
	max-width: var(--container-width, 1200px); margin: 0 auto;
	display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; padding: 0 28px 64px;
}

/* — sidebar — */
.ath-archive-sidebar { position: sticky; top: calc(var(--ath-header-height) + 20px); align-self: start; display: flex; flex-direction: column; gap: 16px; }
.ath-archive-sidebar-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-heading); font-size: 14px; }
.ath-archive-clear-all { font-size: 12px; color: var(--color-neutral-500); }
.ath-archive-clear-all:hover { color: var(--color-accent); }
.ath-archive-active-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ath-archive-active-pill {
	display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
	padding: 4px 9px; border-radius: 999px; background: var(--color-neutral-900); color: var(--color-neutral-300);
}
.ath-archive-active-pill:hover { color: var(--color-accent); }
.ath-archive-filter-card { padding: 16px; border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.ath-archive-filter-kicker {
	font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-neutral-500);
	margin-bottom: 10px;
}
.ath-archive-checkbox-list { display: flex; flex-direction: column; gap: 9px; }
.ath-archive-checkbox-row {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	font-size: 13px; color: var(--color-neutral-300); cursor: pointer;
}
.ath-archive-checkbox-row span:first-child { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ath-archive-checkbox-row input[type="checkbox"] { flex: none; accent-color: var(--color-accent); }
.ath-archive-checkbox-count { flex: none; font-size: 11px; color: var(--color-neutral-600); }
/* "Show all N" expand — pure CSS via a hidden checkbox + ~ sibling
   combinator, replacing an earlier scrolling max-height box (a native
   scrollbar looked out of place in a small dark card). The toggle input
   must sit in the DOM right before the .is-extra rows it reveals, since
   ~ only ever matches later siblings. */
.ath-archive-toggle-input { display: none; }
.ath-archive-checkbox-row.is-extra { display: none; }
.ath-archive-toggle-input:checked ~ .ath-archive-checkbox-row.is-extra { display: flex; }
.ath-archive-show-all, .ath-archive-show-less {
	display: block; margin-top: 2px; font-size: 12px; color: var(--color-accent); cursor: pointer;
}
.ath-archive-show-less { display: none; }
.ath-archive-toggle-input:checked ~ .ath-archive-show-all { display: none; }
.ath-archive-toggle-input:checked ~ .ath-archive-show-less { display: block; }
.seg { display: flex; gap: 6px; }
.seg-opt {
	position: relative; flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; font-size: 12px;
	color: var(--color-neutral-400); border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
	cursor: pointer;
}
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt.is-active { color: var(--color-accent); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }

/* — toolbar — */
.ath-archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.ath-archive-result-count { font-size: 13px; color: var(--color-neutral-400); }
.ath-archive-sort-form { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-neutral-500); }
.ath-archive-sort-form select {
	font: inherit; font-size: 13px; color: var(--color-text); background: var(--color-surface);
	border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent); border-radius: var(--radius-md);
	padding: 6px 10px;
}

/* — card list — */
.ath-archive-card-list { display: flex; flex-direction: column; gap: 12px; }
.ath-archive-card {
	display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 20px;
	padding: 18px; border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.ath-archive-card-left { display: flex; gap: 12px; min-width: 0; }
.ath-archive-card-logo {
	width: 44px; height: 44px; flex: none; border-radius: 8px;
	background: var(--color-accent-900); color: var(--color-accent-300);
	display: grid; place-items: center; font-size: 15px; font-weight: 600; overflow: hidden;
}
.ath-archive-card-logo img { width: 100%; height: 100%; object-fit: contain; }
.ath-archive-card-body { min-width: 0; flex: 1; }
.ath-archive-card-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ath-archive-card-name { font-family: var(--font-heading); font-size: 18px; color: var(--color-text); }
.ath-archive-card-name:hover { color: var(--color-accent); }
.ath-archive-card-category { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-400); }
.ath-archive-card-tagline {
	margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300);
	overflow: hidden; max-height: 39px; display: -webkit-box;
	-webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.ath-archive-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ath-archive-card-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ath-archive-card-meta-label { display: block; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }
.ath-archive-card-meta-value { display: block; font-size: 13px; color: var(--color-neutral-300); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ath-archive-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ath-archive-card-score-row { display: flex; align-items: baseline; gap: 3px; }
.ath-archive-card-right .ath-tool-breakdown { width: 100%; }
.ath-archive-card-actions { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: auto; }
.ath-archive-card-actions .btn { width: 100%; }

/* — pagination — */
.ath-archive-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 28px; }
.ath-archive-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px;
	padding: 0 8px; border-radius: 6px; font-size: 13px; color: var(--color-neutral-400);
	border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
}
.ath-archive-pagination a.page-numbers:hover { color: var(--color-accent); border-color: var(--color-accent); }
.ath-archive-pagination .page-numbers.current { color: var(--color-accent); border-color: var(--color-accent); }
.ath-archive-pagination .page-numbers.dots { border-color: transparent; }

/* — methodology note — */
.ath-archive-methodology {
	display: flex; gap: 14px; margin-top: 40px; padding: 18px 20px; border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent); color: var(--color-neutral-400);
}
.ath-archive-methodology > .ath-icon { color: var(--color-accent); flex: none; }
.ath-archive-methodology-title { font-family: var(--font-heading); font-size: 14px; color: var(--color-text); margin-bottom: 4px; }
.ath-archive-methodology p { margin: 0; font-size: 13px; line-height: 1.6; }

/* ══════════════════ Responsive ══════════════════ */
@media (max-width: 900px) {
	.ath-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
	.ath-hero h1 { font-size: 36px; }
	.ath-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ath-split { grid-template-columns: 1fr; gap: 36px; }
	.ath-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ath-archive-row { grid-template-columns: 1fr; }
	.ath-archive-sidebar { position: static; }
	.ath-archive-card { grid-template-columns: 1fr; }
	.ath-archive-card-right { align-items: stretch; }
	.ath-archive-card-score-row { justify-content: center; }
}
@media (max-width: 480px) {
	.ath-archive-card-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Header nav wrap moved from max-width:900px to max-width:1210px (2026-08-22)
   so it collapses at the exact same width the single-review content/sidebar
   grid stacks to full-width (bundle.css's .col-xl-12 rule, and the 70/30
   override just above in this file, both keyed to 1210/1211px) — previously
   the header dropped to mobile nav 300px before the review grid did,
   showing a mobile-style header above a still-two-column desktop review
   layout in that gap. Left as its own media query (not merged into the
   900px block above) since the other ath-* homepage sections' own
   breakpoint is intentionally unchanged here. */
@media (max-width: 1210px) {
	.ath-navlinks { order: 3; width: 100%; }
	.ath-navsearch { margin-left: auto; }
}
@media (max-width: 560px) {
	.ath-method-grid { grid-template-columns: 1fr; }
	.ath-navsearch .input { width: 120px; }
}
@media (pointer: coarse) {
	.ath-home .btn,
	.ath-home .input,
	.ath-navlinks a {
		min-height: 44px;
	}
	.ath-hero-search .btn { min-height: 38px; }
}