/* ttx-compare/assets/css/compare-page.css
 * Design tokens match the approved mockup canvas exactly — see
 * https://claude.ai/artifact/Ce9PfuwzsBEdvsMLA5BY8K for the source designs.
 * One responsive stylesheet, not separate mobile/desktop templates —
 * the mockup's "Desktop" and "Mobile" artboards are breakpoints of
 * this same page, not different pages.
 */

:root {
	--ttx-bg: #F5F4EF;
	--ttx-surface: #FFFFFF;
	--ttx-surface-alt: #FBFAF7;
	--ttx-border: #E3E1D9;
	--ttx-ink: #1D1C1A;
	--ttx-ink-soft: #6E6C64;
	--ttx-teal: #145C52;
	--ttx-teal-soft: #E3EFEC;
	--ttx-gold: #A9752B;
	--ttx-gold-soft: #FBF0DC;
	--ttx-cta: #D9622B;
	--ttx-cta-soft: #FBE7DA;
	--ttx-neutral-soft: #F0EFE9;
	--ttx-chip-border: #D7E0F0;
	--ttx-chip-ink: #1E3A5F;
	--ttx-chip-count: #8A95A8;
}

.ttx-compare { background: var(--ttx-bg); color: var(--ttx-ink); font-family: 'Work Sans', system-ui, sans-serif; }
.ttx-compare a { color: var(--ttx-teal); text-decoration: none; }
.ttx-compare a:hover { color: #0E453D; }
.ttx-compare .ttx-wrap { max-width: 1312px; margin: 0 auto; padding: 0 24px; }

/* Breadcrumb + heading */
.ttx-breadcrumb { padding: 20px 0 0; font-size: 13px; color: var(--ttx-ink-soft); }
.ttx-breadcrumb strong { color: var(--ttx-ink); font-weight: 600; }
.ttx-heading { padding: 10px 0 32px; }
.ttx-heading h1 { margin: 0 0 8px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.5px; }
.ttx-heading p { margin: 0; font-size: 15px; color: var(--ttx-ink-soft); max-width: 640px; }

/* Compare cards */
.ttx-cards { display: flex; gap: 24px; padding: 0 0 40px; flex-wrap: wrap; }
.ttx-card { flex: 1; min-width: 260px; background: var(--ttx-surface); border: 1px solid var(--ttx-border); border-radius: 16px; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px; position: relative; }
.ttx-card .ttx-rank-badge { position: absolute; top: -1px; left: 32px; background: var(--ttx-gold); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 0 0 8px 8px; }
.ttx-card-head { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ttx-logo { width: 64px; height: 64px; border-radius: 14px; background: var(--ttx-teal); color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.ttx-logo img { width: 100%; height: 100%; object-fit: cover; }
.ttx-card-name { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.25; }
.ttx-badge-category { display: inline-block; margin-top: 6px; background: var(--ttx-teal-soft); color: var(--ttx-teal); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 20px; }

.ttx-change-business { display: block; margin: 6px 0; background: none; border: 1px solid var(--ttx-border); color: var(--ttx-ink-soft); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; cursor: pointer; width: fit-content; }
.ttx-change-business:hover { border-color: var(--ttx-teal); color: var(--ttx-teal); }
.ttx-change-search { position: relative; margin: 4px 0 -6px; }
.ttx-change-search-input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid var(--ttx-border); border-radius: 8px; font-size: 13px; font-family: 'Work Sans', sans-serif; }
.ttx-change-search-results { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--ttx-border); border-radius: 8px; margin-top: 4px; max-height: 220px; overflow-y: auto; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.ttx-change-search-result { padding: 9px 12px; font-size: 13px; cursor: pointer; }
.ttx-change-search-result:hover { background: var(--ttx-teal-soft); }
.ttx-change-search-empty { padding: 9px 12px; font-size: 12.5px; color: var(--ttx-ink-soft); }

.ttx-trend { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; display: inline-block; width: fit-content; }
.ttx-trend-up { background: var(--ttx-teal-soft); color: var(--ttx-teal); }
.ttx-trend-down { background: #FBE7DA; color: #8A2F0E; }
.ttx-trend-same { background: var(--ttx-neutral-soft); color: var(--ttx-ink-soft); }

.ttx-siterank-value.ttx-siterank-down, .ttx-siterank-down { background: #FBE7DA; color: #8A2F0E; font-weight: 700; }
.ttx-siterank-value.ttx-siterank-up, .ttx-siterank-up { background: var(--ttx-teal-soft); color: var(--ttx-teal); font-weight: 700; }
.ttx-siterank-value.ttx-siterank-same, .ttx-siterank-same { color: var(--ttx-ink-soft); font-weight: 600; }
.ttx-siterank-value.ttx-siterank-none, .ttx-siterank-none { color: #B8B6AD; }
.ttx-siterank-caption { font-size: 11px; color: var(--ttx-ink-soft); text-align: center; margin: -4px 0 10px; }
.ttx-siterank-caption-mobile { display: none; }
.ttx-score-row { display: flex; align-items: baseline; gap: 8px; }
.ttx-score { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 32px; color: var(--ttx-gold); }
.ttx-score-label { font-size: 13px; color: var(--ttx-ink-soft); }
.ttx-review-count { margin-left: auto; font-size: 13px; color: var(--ttx-ink-soft); }
.ttx-tagline { margin: 0; font-size: 14px; color: #4A4944; line-height: 1.5; }
.ttx-divider { height: 1px; background: #EDEBE3; }
.ttx-detail-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #4A4944; }
.ttx-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ttx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 20px; }
.ttx-badge-featured { background: var(--ttx-gold-soft); color: #8A5E20; }
.ttx-badge-not-featured { background: var(--ttx-neutral-soft); color: #8A887E; }
.ttx-badge-claimed { background: var(--ttx-teal-soft); color: var(--ttx-teal); }
.ttx-badge-unclaimed { background: var(--ttx-neutral-soft); color: #8A887E; }
.ttx-cta-button { display: block; width: 100%; background: var(--ttx-teal); color: #fff !important; border: none; font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px; padding: 12px 20px; border-radius: 10px; cursor: pointer; text-align: center; margin-top: auto; text-decoration: none !important; }
.ttx-cta-button:hover, .ttx-cta-button:visited, .ttx-cta-button:active { color: #fff !important; text-decoration: none !important; background: #0E453D; }

/* Full comparison table */
.ttx-table-section { padding: 0 0 40px; }
.ttx-table-section h2, .ttx-section h2 { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 22px; margin: 0 0 16px; }
.ttx-table { border: 1px solid var(--ttx-border); border-radius: 14px; overflow: hidden; overflow-x: auto; }
.ttx-table-row { display: flex; border-bottom: 1px solid var(--ttx-border); min-width: 460px; }
.ttx-table-row:last-child { border-bottom: none; }
.ttx-table-row:nth-child(even) { background: var(--ttx-surface-alt); }
.ttx-table-row:nth-child(odd) { background: var(--ttx-surface); }
.ttx-table-label { width: 200px; flex-shrink: 0; padding: 14px 18px; font-size: 13px; font-weight: 600; color: #4A4944; position: sticky; left: 0; background: inherit; }
.ttx-table-label.ttx-table-head { font-size: 12px; font-weight: 700; color: var(--ttx-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.ttx-table-value { flex: 1; min-width: 140px; padding: 14px 18px; font-size: 13px; color: #4A4944; }
.ttx-table-value.ttx-table-head { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--ttx-ink); }

.ttx-table-mobile-cards { display: none; }
.ttx-mobile-compare-row { display: grid; gap: 8px; padding: 8px 4px; }
.ttx-mobile-compare-row span { font-size: 12px; color: #4A4944; text-align: center; word-break: break-word; }
.ttx-mobile-compare-header { border-bottom: 2px solid var(--ttx-ink); padding-bottom: 10px; margin-bottom: 4px; }
.ttx-mobile-compare-header span { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ttx-ink); }
.ttx-mobile-field-heading { background: var(--ttx-neutral-soft); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ttx-ink-soft); padding: 7px 10px; border-radius: 6px; margin-top: 6px; }

/* Verified strip */
.ttx-verified-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ttx-surface); border: 1px solid var(--ttx-border); border-radius: 12px; padding: 14px 20px; margin-bottom: 36px; font-size: 13px; color: #4A4944; flex-wrap: wrap; }

/* Methodology */
.ttx-methodology-grid { display: flex; gap: 16px; flex-wrap: wrap; }
.ttx-factor-card { flex: 1; min-width: 200px; background: var(--ttx-surface); border: 1px solid var(--ttx-border); border-radius: 14px; padding: 20px; }
.ttx-factor-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.ttx-factor-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.ttx-factor-desc { font-size: 12.5px; color: var(--ttx-ink-soft); line-height: 1.5; }

/* FAQ */
.ttx-faq-item { border: 1px solid var(--ttx-border); border-radius: 12px; background: var(--ttx-surface); padding: 18px 22px; margin-bottom: 12px; }
.ttx-faq-question { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.ttx-faq-question::-webkit-details-marker { display: none; }
.ttx-faq-question::after { content: '▾'; color: var(--ttx-ink-soft); font-size: 14px; flex-shrink: 0; transition: transform 0.15s ease; }
.ttx-faq-item[open] .ttx-faq-question::after { transform: rotate(180deg); }
.ttx-faq-answer { margin: 12px 0 0; font-size: 13.5px; color: #4A4944; line-height: 1.55; }

/* Related comparisons */
.ttx-related-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ttx-related-card { flex: 1; min-width: 200px; background: var(--ttx-surface); border: 1px solid var(--ttx-border); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ttx-related-card.ttx-related-hub { flex: 1.6; background: var(--ttx-teal-soft); border-color: #CFE3DE; }
.ttx-related-card span { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: var(--ttx-ink); }
.ttx-related-card.ttx-related-hub span { color: var(--ttx-teal); }

/* Explore More chips */
.ttx-chip-group { margin-bottom: 24px; }
.ttx-chip-group-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.ttx-chip-group-divider { height: 1px; background: var(--ttx-border); margin-bottom: 14px; }
.ttx-chip-row { display: flex; gap: 12px; flex-wrap: wrap; }
.ttx-chip { display: inline-block; background: #FAFBFE; border: 1px solid var(--ttx-chip-border); border-radius: 10px; padding: 13px 18px; font-size: 14px; font-weight: 700; color: var(--ttx-chip-ink); }
.ttx-chip:hover { border-color: #B7C8E3; color: #0E453D; }
.ttx-chip-count { font-weight: 500; color: var(--ttx-chip-count); }

/* CTA banner */
.ttx-cta-banner { margin: 0 0 48px; background: var(--ttx-cta-soft); border-radius: 16px; padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ttx-cta-banner-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.ttx-cta-banner-text { font-size: 14px; color: #4A4944; }
.ttx-cta-banner-button { background: var(--ttx-cta); color: #fff !important; border: none; font-family: 'Work Sans', sans-serif; font-weight: 700; font-size: 15px; padding: 14px 26px; border-radius: 10px; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.ttx-cta-banner-button:hover, .ttx-cta-banner-button:visited, .ttx-cta-banner-button:active { color: #fff !important; text-decoration: none !important; opacity: 0.92; }

/* Mobile breakpoint — matches the "Mobile" artboards in the mockup */
@media (max-width: 780px) {
	.ttx-compare .ttx-wrap { padding: 0 16px; }
	.ttx-heading h1 { font-size: 24px; }

	/* Split-compact: 2 (or auto-fit) narrow columns instead of one
	   full-width card per business — lets you compare the same field
	   across businesses without scrolling between separate cards.
	   auto-fit means a 3-way compare wraps to 2-then-1 automatically,
	   no separate rule needed per business count. */
	.ttx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }

	.ttx-card { min-width: 0; padding: 16px; gap: 0; }

	/* Reflow visual order WITHOUT touching the underlying markup —
	   .ttx-card is already flex-column, so `order` alone re-sequences
	   these into: header, rank badge, score, divider, tagline, details,
	   badges, button (button already pinned via margin-top:auto). */
	.ttx-card-head { order: 1; }
	.ttx-card .ttx-rank-badge { order: 2; }
	.ttx-change-search { order: 1; }
	.ttx-trend { order: 4; }
	.ttx-score-row { order: 3; }
	.ttx-divider { order: 4; }
	.ttx-tagline { order: 5; }
	.ttx-card .ttx-detail-row { order: 6; }
	.ttx-badges { order: 7; }
	.ttx-card .ttx-cta-button { order: 8; }

	/* Centered header block: logo above name above category chip,
	   instead of desktop's side-by-side row. */
	.ttx-card-head { flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-top: 4px; }
	.ttx-change-business { margin: 10px auto; }
	.ttx-logo { width: 64px; height: 64px; font-size: 16px; border-radius: 14px; margin-bottom: 4px; }
	.ttx-card-name { font-size: 13.5px; }
	.ttx-badge-category { font-size: 9.5px; padding: 3px 8px; margin-top: 4px; margin-bottom: 12px; }

	/* Rank badge: inline centered pill instead of desktop's absolute
	   corner overlay. */
	.ttx-card .ttx-rank-badge { position: static; display: inline-block; width: fit-content; margin: 0 auto 10px; border-radius: 9px; font-size: 10px; padding: 4px 10px; }

	.ttx-score-row { flex-direction: column; align-items: center; gap: 2px; margin-top: 0; }
	.ttx-score { font-size: 22px; }
	.ttx-score-label { font-size: 9px; margin-bottom: 14px; }
	.ttx-review-count { font-size: 9px; }

	.ttx-tagline { font-size: 9.5px; text-align: center; margin: 0 0 10px; font-style: italic; padding-top: 12px; }
	.ttx-card .ttx-detail-row { font-size: 9px; text-align: center; margin-bottom: 8px; line-height: 1.7; }
	.ttx-badges { justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
	.ttx-badge { font-size: 8px; padding: 3px 7px; }
	.ttx-card .ttx-cta-button { font-size: 11px; padding: 11px 4px; }

	/* Below ~360px even 2 columns get too cramped — fall back to one
	   full-width card at a time, with less extreme sizing than the
	   compact 2-column version above. */
	@media (max-width: 359px) {
		.ttx-cards { grid-template-columns: 1fr; gap: 10px; }
		.ttx-card { padding: 14px; }
		.ttx-card-name { font-size: 12px; }
		.ttx-score { font-size: 20px; }
		.ttx-score-label, .ttx-review-count { font-size: 10px; }
		.ttx-tagline, .ttx-card .ttx-detail-row { font-size: 10.5px; margin-bottom: 6px; }
		.ttx-card .ttx-cta-button { font-size: 11.5px; padding: 10px; }
	}

	.ttx-table { display: none; }
	.ttx-siterank-caption-desktop { display: none; }
	.ttx-siterank-caption-mobile { display: block; }
	.ttx-table-mobile-cards { display: block; }
	.ttx-methodology-grid, .ttx-related-row { flex-direction: column; }
	.ttx-chip-row { flex-direction: column; }
	.ttx-chip { display: block; }
	.ttx-cta-banner { flex-direction: column; align-items: stretch; }
	.ttx-cta-banner-button { width: 100%; }
}