/* Competitor comparison pages (.fdvs blocks) + TablePress "fd-compare" table.
   Bundled from the fd-competitor-page skill (page CSS v2 + table CSS v2).
   On this theme you do NOT need to paste these into Additional CSS or TablePress Custom CSS. */

/* ==========================================================
   FastDemocracy vs. Competitor comparison table (TablePress) — table CSS v2
   Add "fd-compare" to the table's Extra CSS Classes.
   Columns: 1 = FastDemocracy | 2 = Feature | 3 = Competitor
   ========================================================== */

/* Competitor name shown above column 3 on phones.
   New pages set --fd-rival in a <style> tag at the top of their top HTML block,
   so no per-competitor edits are needed here. These classes are kept for
   tables built before that. */
.tablepress.fd-vs-uslege { --fd-rival: "USLege"; }
.tablepress.fd-vs-quorum { --fd-rival: "Quorum"; }

.tablepress.fd-compare {
	--fd-blue: #a8cdee;
	--fd-blue-text: #0f2a40;
	--fd-blue-line: rgba(15, 42, 64, 0.12);
	--fd-navy: #324a5e;
	--fd-navy-text: #ffffff;
	--fd-navy-line: rgba(255, 255, 255, 0.12);
	--fd-grey: #ecefef;
	--fd-grey-text: #3f4a54;
	--fd-grey-line: rgba(0, 0, 0, 0.08);

	/* Turn off TablePress default colors, striping and hover */
	--text-color: inherit;
	--head-bg-color: transparent;
	--odd-bg-color: transparent;
	--even-bg-color: transparent;
	--hover-bg-color: transparent;
	--border-color: transparent;

	width: 100%;
	margin: 2rem 0;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 42, 64, 0.12);
	font-size: 15px;
	line-height: 1.55;
	table-layout: fixed;
}

/* ---------- All cells ---------- */
.tablepress.fd-compare > :is(thead, tbody) > tr > * {
	padding: 22px 24px;
	border: 0;
	vertical-align: middle;
	text-align: left;
}

/* Column widths */
.tablepress.fd-compare .column-1 { width: 40%; }
.tablepress.fd-compare .column-2 { width: 20%; }
.tablepress.fd-compare .column-3 { width: 40%; }

/* ---------- Column colors ---------- */
.tablepress.fd-compare > :is(thead, tbody) > tr > .column-1 {
	background: var(--fd-blue);
	color: var(--fd-blue-text);
}
.tablepress.fd-compare > :is(thead, tbody) > tr > .column-2 {
	background: var(--fd-navy);
	color: var(--fd-navy-text);
}
.tablepress.fd-compare > :is(thead, tbody) > tr > .column-3 {
	background: var(--fd-grey);
	color: var(--fd-grey-text);
}

/* Row dividers (tinted per column so they blend in) */
.tablepress.fd-compare > tbody > tr > .column-1 { border-top: 1px solid var(--fd-blue-line); }
.tablepress.fd-compare > tbody > tr > .column-2 { border-top: 1px solid var(--fd-navy-line); }
.tablepress.fd-compare > tbody > tr > .column-3 { border-top: 1px solid var(--fd-grey-line); }

/* ---------- Header row ---------- */
.tablepress.fd-compare > thead > tr > th {
	padding-top: 26px;
	padding-bottom: 26px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}
.tablepress.fd-compare > thead > tr > th.column-2 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.tablepress.fd-compare > thead > tr > th.column-3 {
	font-weight: 500;
	color: #5b6670;
}
/* Hide TablePress sort arrows if sorting is left on */
.tablepress.fd-compare > thead > tr > th::before,
.tablepress.fd-compare > thead > tr > th::after,
.tablepress.fd-compare .dt-column-order {
	display: none !important;
}

/* ---------- Feature labels (middle column) ---------- */
.tablepress.fd-compare > tbody > tr > td.column-2 {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.45;
}

/* ---------- FastDemocracy column: checkmarks ---------- */
.tablepress.fd-compare > tbody > tr > td.column-1 {
	position: relative;
	padding-left: 58px;
	font-weight: 500;
}
.tablepress.fd-compare > tbody > tr > td.column-1::before {
	content: "✓";
	position: absolute;
	left: 22px;
	top: 22px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--fd-navy);
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* ---------- "Not Available" cells ---------- */
.tablepress.fd-compare .fd-na {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #7a848c;
	font-style: italic;
}
.tablepress.fd-compare .fd-na::before {
	content: "✕";
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #d7dcdd;
	color: #6b757d;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

/* ==========================================================
   Mobile: stack each row into a card
   ========================================================== */
@media (max-width: 768px) {
	.tablepress.fd-compare,
	.tablepress.fd-compare > tbody,
	.tablepress.fd-compare > tbody > tr,
	.tablepress.fd-compare > tbody > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	.tablepress.fd-compare {
		border-radius: 0;
		overflow: visible;
		box-shadow: none;
		background: transparent;
	}

	.tablepress.fd-compare > thead {
		display: none;
	}

	.tablepress.fd-compare > tbody > tr {
		display: flex;
		flex-direction: column;
		margin-bottom: 18px;
		border-radius: 14px;
		overflow: hidden;
		box-shadow: 0 6px 20px rgba(15, 42, 64, 0.12);
	}

	.tablepress.fd-compare > tbody > tr > td {
		border-top: 0 !important;
		padding: 16px 18px;
	}

	/* Feature label becomes the card title */
	.tablepress.fd-compare > tbody > tr > td.column-2 {
		order: 1;
		padding: 14px 18px;
	}
	.tablepress.fd-compare > tbody > tr > td.column-1 {
		order: 2;
		padding: 40px 18px 18px 52px;
	}
	.tablepress.fd-compare > tbody > tr > td.column-3 {
		order: 3;
		padding-top: 40px;
	}

	/* Small column name above each answer */
	.tablepress.fd-compare > tbody > tr > td.column-1::after,
	.tablepress.fd-compare > tbody > tr > td.column-3::after {
		position: absolute;
		top: 14px;
		left: 18px;
		font-size: 11px;
		font-weight: 700;
		font-style: normal;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
	.tablepress.fd-compare > tbody > tr > td.column-1::after {
		content: "FastDemocracy";
		color: var(--fd-navy);
	}
	.tablepress.fd-compare > tbody > tr > td.column-3 {
		position: relative;
	}
	.tablepress.fd-compare > tbody > tr > td.column-3::after {
		content: var(--fd-rival, "USLege");
		color: #6b757d;
	}

	.tablepress.fd-compare > tbody > tr > td.column-1::before {
		left: 18px;
		top: 40px;
	}
}


/* ==========================================================
   FastDemocracy comparison pages ("fdvs") — page CSS v2
   Paste into Appearance → Customize → Additional CSS
   (block themes: Appearance → Editor → Styles → ⋮ → Additional CSS)
   Everything is scoped to .fdvs so the rest of the site is untouched.
   ========================================================== */

.fdvs {
	--fdvs-navy: #324a5e;
	--fdvs-navy-deep: #26394a;
	--fdvs-yellow: #f0c420;
	--fdvs-blue: #a8cdee;
	--fdvs-grey: #d9d9d9;
	--fdvs-mist: #ecefef;
	--fdvs-ink: #1c2b38;
	--fdvs-body: #3f4a54;

	color: var(--fdvs-body);
	font-size: 17px;
	line-height: 1.65;
	margin-block: 0 !important;
}

/* Stop long full-width sections from causing a sideways scrollbar */
html,
body {
	overflow-x: clip;
}

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

/* ---------- Full-width sections ---------- */
.fdvs .fdvs-section {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw) !important;
	padding: 88px 24px;
}

.fdvs .fdvs-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.fdvs .fdvs-narrow {
	max-width: 780px;
}

/* ---------- Type ---------- */
.fdvs h1,
.fdvs h2,
.fdvs h3 {
	color: var(--fdvs-ink);
	margin: 0;
	padding: 0;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-transform: none;
}

.fdvs p {
	margin: 0 0 1em;
}

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

.fdvs .fdvs-h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 700;
	margin-bottom: 28px;
	max-width: 760px;
}

.fdvs .fdvs-eyebrow {
	display: inline-block;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fdvs-yellow);
}

.fdvs .fdvs-eyebrow-dark {
	color: var(--fdvs-navy);
	padding-left: 18px;
	position: relative;
}

.fdvs .fdvs-eyebrow-dark::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-radius: 2px;
	background: var(--fdvs-yellow);
}

/* ---------- Buttons ---------- */
.fdvs .fdvs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 36px;
}

.fdvs a.fdvs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 28px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.fdvs a.fdvs-btn:hover {
	transform: translateY(-1px);
}

.fdvs a.fdvs-btn-primary,
.fdvs a.fdvs-btn-primary:visited {
	background: var(--fdvs-yellow);
	color: var(--fdvs-navy-deep) !important;
	box-shadow: 0 6px 18px rgba(240, 196, 32, 0.35);
}

.fdvs a.fdvs-btn-primary:hover {
	background: #f5d24a;
	box-shadow: 0 10px 24px rgba(240, 196, 32, 0.45);
}

.fdvs a.fdvs-btn-ghost,
.fdvs a.fdvs-btn-ghost:visited {
	background: transparent;
	color: #ffffff !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.fdvs a.fdvs-btn-ghost:hover {
	box-shadow: inset 0 0 0 2px #ffffff;
}

/* ==========================================================
   HERO
   ========================================================== */
.fdvs .fdvs-hero {
	background:
		radial-gradient(900px 420px at 85% -10%, rgba(168, 205, 238, 0.28), transparent 60%),
		radial-gradient(600px 300px at -5% 110%, rgba(240, 196, 32, 0.14), transparent 60%),
		var(--fdvs-navy);
	color: rgba(255, 255, 255, 0.86);
	padding-top: 112px;
	padding-bottom: 104px;
	overflow: hidden;
}

.fdvs .fdvs-hero .fdvs-inner {
	max-width: 900px;
	text-align: center;
}

.fdvs .fdvs-title {
	color: #ffffff;
	font-size: clamp(40px, 6.4vw, 72px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin-bottom: 24px;
}

.fdvs .fdvs-vs {
	display: inline-block;
	margin: 0 0.12em;
	color: var(--fdvs-yellow);
	font-style: italic;
	font-weight: 600;
	font-size: 0.62em;
	vertical-align: 0.12em;
}

.fdvs .fdvs-lede {
	max-width: 720px;
	margin: 0 auto;
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

.fdvs .fdvs-hero .fdvs-actions {
	justify-content: center;
}

.fdvs .fdvs-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 24px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
}

.fdvs .fdvs-chips li {
	position: relative;
	margin: 0;
	padding-left: 24px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.78);
}

.fdvs .fdvs-chips li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--fdvs-blue);
	font-weight: 700;
}

/* ==========================================================
   INTRO
   ========================================================== */
.fdvs .fdvs-intro {
	background: var(--fdvs-mist);
	padding-top: 64px;
	padding-bottom: 64px;
	text-align: center;
}

.fdvs .fdvs-intro p {
	font-size: 19px;
	line-height: 1.7;
	color: var(--fdvs-ink);
}

.fdvs .fdvs-intro strong {
	color: var(--fdvs-navy);
	font-weight: 700;
	background: linear-gradient(transparent 62%, rgba(240, 196, 32, 0.38) 62%);
}

/* ==========================================================
   COMPARISON TABLE
   ========================================================== */
.fdvs .fdvs-compare {
	background: #ffffff;
}

.fdvs .fdvs-table {
	margin-top: 8px;
}

.fdvs .fdvs-table .tablepress.fd-compare {
	margin: 0;
}

/* Hide empty <p> tags WordPress sometimes wraps around the shortcode */
.fdvs .fdvs-table > p:empty {
	display: none;
}

/* ---------- Split layout: heading block → TablePress block → bottom block ---------- */
.fdvs .fdvs-compare-head {
	padding-bottom: 8px;
}

/* The table sits in its own block after the top .fdvs block.
   Widen it to match the page (1120px) and center it, even inside a narrow theme column. */
.fdvs ~ .tablepress.fd-compare,
.fdvs ~ * .tablepress.fd-compare {
	margin-top: 0 !important;
	margin-bottom: 88px !important;
}

@media (min-width: 769px) {
	.fdvs ~ .tablepress.fd-compare,
	.fdvs ~ * .tablepress.fd-compare {
		--fdvs-table-w: min(1120px, calc(100vw - 48px));
		width: var(--fdvs-table-w) !important;
		max-width: none !important;
		margin-left: calc((100% - var(--fdvs-table-w)) / 2) !important;
		margin-right: 0 !important;
	}
}

/* ==========================================================
   WHY TEAMS CHOOSE
   ========================================================== */
.fdvs .fdvs-why {
	background: var(--fdvs-mist);
}

.fdvs .fdvs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 12px;
}

.fdvs .fdvs-card {
	background: #ffffff;
	border: 1px solid var(--fdvs-grey);
	border-radius: 16px;
	padding: 28px 26px 30px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fdvs .fdvs-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(50, 74, 94, 0.12);
}

.fdvs .fdvs-card h3 {
	font-size: 19px;
	font-weight: 700;
	margin: 18px 0 10px;
}

.fdvs .fdvs-card p {
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0;
}

.fdvs .fdvs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--fdvs-blue);
	color: var(--fdvs-navy);
	flex-shrink: 0;
}

.fdvs .fdvs-icon svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Two-up / one-up grids (used when the card count doesn't fill rows of 3) */
.fdvs .fdvs-grid.fdvs-grid-2 {
	grid-template-columns: repeat(2, 1fr);
}

.fdvs .fdvs-grid.fdvs-grid-1 {
	grid-template-columns: 1fr;
}

/* Featured first card spans the full row */
.fdvs .fdvs-card-feature {
	grid-column: 1 / -1;
	display: flex;
	gap: 26px;
	align-items: flex-start;
	background: var(--fdvs-navy);
	border-color: var(--fdvs-navy);
	padding: 36px 36px 38px;
}

.fdvs .fdvs-card-feature h3 {
	color: #ffffff;
	font-size: 24px;
	margin-top: 4px;
}

.fdvs .fdvs-card-feature p {
	color: rgba(255, 255, 255, 0.84);
	font-size: 17px;
	max-width: 820px;
}

.fdvs .fdvs-card-feature .fdvs-icon {
	width: 56px;
	height: 56px;
	background: var(--fdvs-yellow);
	color: var(--fdvs-navy-deep);
}

/* ==========================================================
   BOTTOM LINE
   ========================================================== */
.fdvs .fdvs-bottomline {
	background: #ffffff;
}

.fdvs .fdvs-callout {
	position: relative;
	padding: 40px 44px;
	border-radius: 18px;
	background: #ffffff;
	border: 1px solid var(--fdvs-grey);
	border-left: 6px solid var(--fdvs-yellow);
	box-shadow: 0 14px 34px rgba(50, 74, 94, 0.08);
}

.fdvs .fdvs-callout p {
	font-size: 18px;
}

.fdvs .fdvs-callout .fdvs-callout-strong {
	color: var(--fdvs-ink);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5;
}

/* ==========================================================
   PRICING
   ========================================================== */
.fdvs .fdvs-pricing {
	background: #ffffff;
	padding-top: 0;
}

.fdvs .fdvs-pricing-wrap {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 56px;
	border-radius: 24px;
	background: var(--fdvs-blue);
}

.fdvs .fdvs-pricing-copy p {
	color: var(--fdvs-ink);
	font-size: 17.5px;
}

.fdvs .fdvs-pricing .fdvs-h2 {
	margin-bottom: 18px;
}

.fdvs .fdvs-tiers {
	display: grid;
	gap: 16px;
}

.fdvs .fdvs-tier {
	background: #ffffff;
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: 0 8px 20px rgba(50, 74, 94, 0.1);
}

.fdvs .fdvs-tier-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fdvs-navy);
}

.fdvs .fdvs-tier p {
	font-size: 16px;
	color: var(--fdvs-ink);
}

/* ==========================================================
   FINAL CTA
   ========================================================== */
.fdvs .fdvs-cta {
	background:
		radial-gradient(700px 320px at 50% 120%, rgba(240, 196, 32, 0.18), transparent 65%),
		var(--fdvs-navy);
	text-align: center;
	padding-top: 96px;
	padding-bottom: 104px;
}

.fdvs .fdvs-cta .fdvs-h2 {
	color: #ffffff;
	font-size: clamp(32px, 4.4vw, 52px);
	margin: 0 auto 16px;
}

.fdvs .fdvs-cta p {
	color: rgba(255, 255, 255, 0.84);
	font-size: 19px;
}

.fdvs .fdvs-cta .fdvs-actions {
	justify-content: center;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 960px) {
	.fdvs .fdvs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.fdvs .fdvs-pricing-wrap {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 32px;
	}
}

@media (max-width: 640px) {
	.fdvs {
		font-size: 16px;
	}
	.fdvs .fdvs-section {
		padding: 64px 16px;
	}
	.fdvs .fdvs-hero {
		padding-top: 80px;
		padding-bottom: 72px;
	}
	.fdvs .fdvs-intro {
		padding-top: 48px;
		padding-bottom: 48px;
	}
	.fdvs .fdvs-intro p {
		font-size: 17px;
	}
	.fdvs .fdvs-grid,
	.fdvs .fdvs-grid.fdvs-grid-2 {
		grid-template-columns: 1fr;
	}
	.fdvs .fdvs-card-feature {
		flex-direction: column;
		gap: 4px;
		padding: 28px 24px;
	}
	.fdvs .fdvs-card-feature h3 {
		font-size: 21px;
		margin-top: 14px;
	}
	.fdvs .fdvs-callout {
		padding: 28px 24px;
	}
	.fdvs .fdvs-callout .fdvs-callout-strong {
		font-size: 18px;
	}
	.fdvs .fdvs-pricing {
		padding-top: 0;
	}
	.fdvs .fdvs-pricing-wrap {
		padding: 32px 22px;
		border-radius: 18px;
	}
	.fdvs .fdvs-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.fdvs .fdvs-chips {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}