/*
   EasyPost — Comparison page base stylesheet
*/


/* --------------------------------------------------------------------------
   1. Tokens + wrapper
   -------------------------------------------------------------------------- */
#epc-top.epc {
	/* Blues */
	--epc-blue:         #4571FF;
	--epc-blue-brand:   #164DFF;
	--epc-blue-mid:     #A2B8FF;
	--epc-blue-light:   #D0DBFF;
	--epc-blue-xlight:  #F5F7FF;

	/* Greens */
	--epc-green:        #33EABE;
	--epc-green-mid:    #99F5DF;
	--epc-green-light:  #CCFAEF;
	--epc-green-dark:   #00AC83;

	/* Navy / greys */
	--epc-navy:         #061340;
	--epc-navy-mid:     #0B2780;
	--epc-gray-dark:    #1C222D;
	--epc-gray-mid:     #384359;
	--epc-gray-light:   #E2E7F0;
	--epc-gray-xlight:  #F1F1F1;
	--epc-white:        #FFFFFF;

	/* Accents */
	--epc-red:          #FC7D7A;
	--epc-red-light:    #FEDEDE;

	/* Layout */
	--epc-max:          1100px;
	--epc-gutter:       40px;
	--epc-radius:       16px;
	--epc-radius-sm:    12px;
	--epc-btn-radius:   8px;
	--epc-sticky-top:   0px;

	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--epc-navy);
	background: var(--epc-white);
	-webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1b. Enfold sticky-header integration
   -------------------------------------------------------------------------- */
body#top.single-comparison #wrap_all { overflow: clip; }
body#top.single-comparison { overflow-x: clip; overflow-y: visible; }

#epc-top.epc { --epc-sticky-top: 140px; }          /* in the token block */

@media only screen and (max-width: 767px) {
	#epc-top.epc { --epc-sticky-top: 102px; }
}


/* --------------------------------------------------------------------------
   2. Scoped reset — neutralises Enfold's global typography, list and table
      rules inside the wrapper. Component rules below deliberately override
      these.
   -------------------------------------------------------------------------- */
#epc-top.epc,
#epc-top.epc *,
#epc-top.epc *::before,
#epc-top.epc *::after { box-sizing: border-box; }

#epc-top.epc h1,
#epc-top.epc h2,
#epc-top.epc h3,
#epc-top.epc h4,
#epc-top.epc h5,
#epc-top.epc h6 {
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}

#epc-top.epc p { margin: 0; padding: 0; }

#epc-top.epc ul,
#epc-top.epc ol { margin: 0; padding: 0; list-style: none; }

#epc-top.epc li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

#epc-top.epc a { text-decoration: none; }

#epc-top.epc table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: none;
}

#epc-top.epc th,
#epc-top.epc td {
	border: 0;
	background: none;
	text-align: left;
	vertical-align: top;
}

#epc-top.epc img { max-width: 100%; height: auto; }

/* NOTE: deliberately no blanket `div { margin: 0 }` here. It would out-weigh
   every component's own margin-top and silently collapse the spacing under
   each section heading. */


/* --------------------------------------------------------------------------
   3. Sticky sub-nav — breadcrumb + section anchors + CTA
   -------------------------------------------------------------------------- */
#epc-top .epc-subnav {
	position: sticky;
	top: var(--epc-sticky-top);
	z-index: 60;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--epc-gray-light);
	padding: 0 var(--epc-gutter);
}

#epc-top .epc-subnav-inner {
	max-width: 1200px;
	margin: 0 auto;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* Breadcrumb back to the comparison hub */
#epc-top .epc-back,
#epc-top a.epc-back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 500;
	color: var(--epc-gray-mid);
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s;
}
#epc-top .epc-back:hover,
#epc-top a.epc-back:hover { color: var(--epc-blue-brand); text-decoration: none; }
#epc-top .epc-back-arrow { font-size: 15px; line-height: 1; transition: transform 0.2s; }
#epc-top .epc-back:hover .epc-back-arrow { transform: translateX(-3px); }

#epc-top .epc-anchors { display: flex; gap: 28px; flex-wrap: wrap; }
#epc-top .epc-anchors a {
	font-size: 14px;
	font-weight: 400;
	color: var(--epc-gray-mid);
	text-decoration: none;
	transition: color 0.2s;
}
#epc-top .epc-anchors a:hover { color: var(--epc-blue-brand); text-decoration: none; }

#epc-top .epc-subnav-cta { display: flex; align-items: center; gap: 12px; }


/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
#epc-top .epc-btn,
#epc-top a.epc-btn {
	display: inline-block;
	border: none;
	border-radius: var(--epc-btn-radius);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s, color 0.2s;
}
#epc-top .epc-btn:hover,
#epc-top a.epc-btn:hover { text-decoration: none; }

/* Mint — primary action */
#epc-top .epc-btn-primary,
#epc-top a.epc-btn-primary {
	background: var(--epc-green-mid);
	color: var(--epc-navy);
	padding: 14px 28px;
}
#epc-top .epc-btn-primary:hover,
#epc-top a.epc-btn-primary:hover {
	background: var(--epc-green);
	color: var(--epc-navy);
	transform: translateY(-1px);
}

/* Outlined blue — secondary action */
#epc-top .epc-btn-outline,
#epc-top a.epc-btn-outline {
	background: transparent;
	color: var(--epc-blue-brand);
	border: 2px solid var(--epc-blue-brand);
	padding: 12px 26px;
}
#epc-top .epc-btn-outline:hover,
#epc-top a.epc-btn-outline:hover {
	background: var(--epc-blue-light);
	color: var(--epc-blue-brand);
	transform: translateY(-1px);
}

/* Compact variant, used in the sticky bar */
#epc-top .epc-btn-sm,
#epc-top a.epc-btn-sm { padding: 8px 20px; font-size: 14px; }


/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */
#epc-top .epc-hero {
	background: linear-gradient(160deg, var(--epc-white) 0%, var(--epc-blue-light) 100%);
	padding: 80px var(--epc-gutter) 64px;
	text-align: center;
}

#epc-top .epc-hero-label {
	display: inline-block;
	background: var(--epc-blue-light);
	color: var(--epc-blue-brand);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 100px;
	margin-bottom: 24px;
}

#epc-top .epc-hero h1 {
	font-size: clamp(36px, 5vw, 60px);
	font-weight: 600;
	color: var(--epc-blue);
	letter-spacing: -1.5px;
	line-height: 1.08;
	max-width: 800px;
	margin: 0 auto 20px;
}

#epc-top .epc-hero p {
	font-size: 18px;
	color: var(--epc-gray-mid);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 auto 36px;
}

#epc-top .epc-hero-ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}


/* --------------------------------------------------------------------------
   6. Stats bar
   -------------------------------------------------------------------------- */
#epc-top .epc-stats {
	background: var(--epc-blue-xlight);
	border-top: 1px solid var(--epc-blue-light);
	border-bottom: 1px solid var(--epc-blue-light);
	padding: 28px var(--epc-gutter);
}

#epc-top .epc-stats-inner {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#epc-top .epc-stat {
	text-align: center;
	padding: 0 20px;
	border-right: 1px solid var(--epc-blue-light);
}
#epc-top .epc-stat:last-child { border-right: none; }

#epc-top .epc-stat-num {
	font-size: 36px;
	font-weight: 600;
	color: var(--epc-blue-brand);
	letter-spacing: -1px;
	line-height: 1;
}

#epc-top .epc-stat-label {
	font-size: 13px;
	font-weight: 400;
	color: var(--epc-gray-mid);
	margin-top: 4px;
}


/* --------------------------------------------------------------------------
   7. Section shell + headings
   -------------------------------------------------------------------------- */
#epc-top .epc-section { padding: 80px var(--epc-gutter); }
#epc-top .epc-section-inner { max-width: var(--epc-max); margin: 0 auto; }

#epc-top .epc-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--epc-blue-brand);
	margin-bottom: 12px;
}

#epc-top .epc-title,
#epc-top h2.epc-title {
	font-size: clamp(28px, 3.5vw, 44px);
	font-weight: 600;
	color: var(--epc-blue);
	letter-spacing: -1px;
	line-height: 1.15;
	margin: 0 0 12px;
}

#epc-top .epc-sub,
#epc-top p.epc-sub {
	font-size: 16px;
	font-weight: 400;
	color: var(--epc-gray-mid);
	line-height: 1.6;
	max-width: 600px;
}

/* Tinted section backgrounds */
#epc-top .epc-section-tint { background: var(--epc-blue-xlight); }
#epc-top .epc-section-fade { background: linear-gradient(180deg, var(--epc-white) 0%, var(--epc-blue-light) 100%); }


/* --------------------------------------------------------------------------
   8. Verdict cards
   -------------------------------------------------------------------------- */
#epc-top .epc-verdict-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
}

#epc-top .epc-verdict-card {
	border-radius: var(--epc-radius);
	padding: 36px;
	position: relative;
	overflow: hidden;
}
#epc-top .epc-verdict-card.epc-ep {
	background: linear-gradient(135deg, var(--epc-blue-xlight) 0%, var(--epc-blue-light) 100%);
}
#epc-top .epc-verdict-card.epc-them {
	background: var(--epc-gray-xlight);
	border: 1px solid var(--epc-gray-light);
}

#epc-top .epc-verdict-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 16px;
}
#epc-top .epc-verdict-card.epc-ep   .epc-verdict-badge { background: var(--epc-green-mid);  color: var(--epc-navy); }
#epc-top .epc-verdict-card.epc-them .epc-verdict-badge { background: var(--epc-gray-light); color: var(--epc-gray-mid); }

#epc-top .epc-verdict-card h3 {
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.5px;
	margin: 0 0 8px;
}
#epc-top .epc-verdict-card.epc-ep   h3 { color: var(--epc-blue-brand); }
#epc-top .epc-verdict-card.epc-them h3 { color: var(--epc-navy); }

#epc-top .epc-verdict-card p {
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 20px;
}
#epc-top .epc-verdict-card.epc-ep   p { color: var(--epc-navy); }
#epc-top .epc-verdict-card.epc-them p { color: var(--epc-gray-mid); }

#epc-top .epc-verdict-list { display: flex; flex-direction: column; gap: 10px; }
#epc-top .epc-verdict-list li {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#epc-top .epc-verdict-card.epc-ep   .epc-verdict-list li { color: var(--epc-navy); }
#epc-top .epc-verdict-card.epc-them .epc-verdict-list li { color: var(--epc-gray-mid); }

#epc-top .epc-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	line-height: 1;
	margin-top: 2px;
}
#epc-top .epc-verdict-card.epc-ep   .epc-icon { background: var(--epc-green-mid);  color: var(--epc-navy); }
#epc-top .epc-verdict-card.epc-them .epc-icon { background: var(--epc-gray-light); color: var(--epc-gray-mid); }


/* --------------------------------------------------------------------------
   9. Comparison table
   -------------------------------------------------------------------------- */
#epc-top .epc-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-top: 48px;
	border-radius: var(--epc-radius);
	border: 1px solid var(--epc-blue-light);
	background: var(--epc-white);
}

#epc-top .epc-table { width: 100%; border-collapse: collapse; min-width: 760px; }

#epc-top .epc-table thead th {
	padding: 20px 24px;
	font-size: 13px;
	font-weight: 600;
	color: var(--epc-gray-mid);
	background: var(--epc-gray-xlight);
	border-bottom: 2px solid var(--epc-gray-light);
}
#epc-top .epc-table thead th:nth-child(2) {
	background: rgba(69, 113, 255, 0.06);
	color: var(--epc-blue);
}

#epc-top .epc-table .epc-cat td {
	background: var(--epc-navy);
	color: var(--epc-white);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 10px 24px;
}

#epc-top .epc-table tbody tr:not(.epc-cat) td {
	padding: 16px 24px;
	border-bottom: 1px solid var(--epc-gray-light);
	font-size: 14px;
	line-height: 1.5;
	vertical-align: top;
}
#epc-top .epc-table tbody tr:not(.epc-cat):last-child td { border-bottom: none; }
#epc-top .epc-table tbody tr:not(.epc-cat) td:first-child  { color: var(--epc-gray-mid); font-weight: 400; }
#epc-top .epc-table tbody tr:not(.epc-cat) td:nth-child(2) { background: rgba(69, 113, 255, 0.04); color: var(--epc-navy); }
#epc-top .epc-table tbody tr:not(.epc-cat):hover td { background: var(--epc-gray-xlight); }
#epc-top .epc-table tbody tr:not(.epc-cat):hover td:nth-child(2) { background: rgba(69, 113, 255, 0.08); }

/* Win / tie pills */
#epc-top .epc-pill {
	display: inline-block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 4px;
	margin-left: 6px;
	white-space: nowrap;
}
#epc-top .epc-pill-ep   { color: var(--epc-blue);     background: var(--epc-green-mid); }
#epc-top .epc-pill-them { color: var(--epc-gray-mid); background: var(--epc-gray-light); }
#epc-top .epc-pill-tie  { color: #7086B2;             background: var(--epc-gray-light); }

#epc-top .epc-yes { color: var(--epc-green-dark); font-weight: 700; }
#epc-top .epc-no  { color: var(--epc-red);        font-weight: 700; }


/* --------------------------------------------------------------------------
   10. Gaps grid
   -------------------------------------------------------------------------- */
#epc-top .epc-gaps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 48px;
}

#epc-top .epc-gap-card {
	background: var(--epc-white);
	border: 1px solid var(--epc-gray-light);
	border-radius: var(--epc-radius-sm);
	padding: 28px;
	position: relative;
}
#epc-top .epc-gap-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: var(--epc-radius-sm) var(--epc-radius-sm) 0 0;
	background: var(--epc-red);
}

#epc-top .epc-gap-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--epc-navy);
	margin-bottom: 8px;
}
#epc-top .epc-gap-desc {
	font-size: 14px;
	color: var(--epc-gray-mid);
	line-height: 1.6;
}


/* --------------------------------------------------------------------------
   11. Scenarios
   -------------------------------------------------------------------------- */
#epc-top .epc-scenarios {
	display: flex;
	flex-direction: column;
	gap: 32px;
	margin-top: 48px;
}

#epc-top .epc-scenario {
	background: var(--epc-white);
	border: 1px solid var(--epc-gray-light);
	border-radius: var(--epc-radius);
	overflow: hidden;
}

#epc-top .epc-scenario-head {
	background: var(--epc-navy);
	padding: 20px 32px;
	display: flex;
	align-items: center;
	gap: 16px;
}
#epc-top .epc-scenario-num {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--epc-blue);
	color: var(--epc-white);
	font-size: 14px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
#epc-top .epc-scenario-head h3 {
	font-size: 16px;
	font-weight: 600;
	color: var(--epc-white);
	line-height: 1.4;
	margin: 0;
}

#epc-top .epc-scenario-body { display: grid; grid-template-columns: 1fr 1fr; }
#epc-top .epc-scenario-col { padding: 28px 32px; }
#epc-top .epc-scenario-col.epc-them { border-right: 1px solid var(--epc-gray-light); }

#epc-top .epc-scenario-platform {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
#epc-top .epc-scenario-col.epc-them .epc-scenario-platform { color: var(--epc-gray-mid); }
#epc-top .epc-scenario-col.epc-ep   .epc-scenario-platform { color: var(--epc-blue-brand); }

#epc-top .epc-scenario-col p {
	font-size: 14px;
	color: var(--epc-gray-mid);
	line-height: 1.6;
	margin: 0 0 16px;
}

#epc-top .epc-scenario-result {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	padding: 8px 14px;
	border-radius: var(--epc-btn-radius);
}
#epc-top .epc-scenario-col.epc-them .epc-scenario-result { background: var(--epc-red-light);   color: #7E2E2D; }
#epc-top .epc-scenario-col.epc-ep   .epc-scenario-result { background: var(--epc-green-light); color: #00392C; }


/* --------------------------------------------------------------------------
   12. "Where they shine" — the honest look
   -------------------------------------------------------------------------- */
#epc-top .epc-shine-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 48px;
}

#epc-top .epc-shine-block h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--epc-navy);
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--epc-gray-light);
}

#epc-top .epc-shine-list { display: flex; flex-direction: column; gap: 12px; }
#epc-top .epc-shine-list li {
	font-size: 14px;
	color: var(--epc-gray-mid);
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#epc-top .epc-dot {
	flex-shrink: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--epc-blue-mid);
	margin-top: 7px;
}
#epc-top .epc-shine-block.epc-ep .epc-dot { background: var(--epc-blue); }

#epc-top .epc-callout {
	margin-top: 40px;
	background: var(--epc-white);
	border-left: 4px solid var(--epc-blue);
	border-radius: 0 var(--epc-radius-sm) var(--epc-radius-sm) 0;
	padding: 24px 28px;
	font-size: 15px;
	color: var(--epc-gray-mid);
	line-height: 1.7;
}
#epc-top .epc-callout strong { color: var(--epc-navy); font-weight: 600; }


/* --------------------------------------------------------------------------
   13. Decision guide
   -------------------------------------------------------------------------- */
#epc-top .epc-decision-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
}

#epc-top .epc-decision-card { border-radius: var(--epc-radius); padding: 36px; }
#epc-top .epc-decision-card.epc-ep   { background: linear-gradient(135deg, var(--epc-navy) 0%, #1a3a8f 100%); }
#epc-top .epc-decision-card.epc-them { background: var(--epc-gray-xlight); border: 1px solid var(--epc-gray-light); }

#epc-top .epc-decision-card h3 { font-size: 20px; font-weight: 600; margin: 0 0 6px; }
#epc-top .epc-decision-card.epc-ep   h3 { color: var(--epc-green); }
#epc-top .epc-decision-card.epc-them h3 { color: var(--epc-navy); }

#epc-top .epc-decision-intro {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid;
}
#epc-top .epc-decision-card.epc-ep   .epc-decision-intro { color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.14); }
#epc-top .epc-decision-card.epc-them .epc-decision-intro { color: var(--epc-gray-mid);    border-color: var(--epc-gray-light); }

#epc-top .epc-decision-list { display: flex; flex-direction: column; gap: 12px; }
#epc-top .epc-decision-list li {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
#epc-top .epc-decision-card.epc-ep   .epc-decision-list li { color: rgba(255,255,255,0.85); }
#epc-top .epc-decision-card.epc-them .epc-decision-list li { color: var(--epc-gray-mid); }

#epc-top .epc-check { flex-shrink: 0; font-size: 13px; line-height: 1.5; }
#epc-top .epc-decision-card.epc-ep   .epc-check { color: var(--epc-green); }
#epc-top .epc-decision-card.epc-them .epc-check { color: var(--epc-gray-mid); }


/* --------------------------------------------------------------------------
   14. Developer section  (light, as in the original)
       The original stylesheet left several child rules at rgba(255,255,255,…)
       — a leftover from an earlier dark treatment — which made the first two
       body columns of the dev table white-on-white. Those are the only values
       changed here; the section stays light.
   -------------------------------------------------------------------------- */
#epc-top .epc-dev { background: var(--epc-white); }
#epc-top .epc-dev .epc-label { color: var(--epc-blue-brand); }
#epc-top .epc-dev .epc-title { color: var(--epc-blue); }
#epc-top .epc-dev .epc-sub   { color: var(--epc-gray-mid); }

#epc-top .epc-dev-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 48px;
}

#epc-top .epc-dev-card { border-radius: var(--epc-radius-sm); padding: 32px; }
#epc-top .epc-dev-card.epc-ep   { background: rgba(69, 113, 255, 0.04); border: 1px solid var(--epc-blue-light); }
#epc-top .epc-dev-card.epc-them { background: var(--epc-gray-xlight);   border: 1px solid var(--epc-gray-light); }

#epc-top .epc-dev-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }
#epc-top .epc-dev-card.epc-ep   h3 { color: var(--epc-blue); }
#epc-top .epc-dev-card.epc-them h3 { color: var(--epc-navy-mid); }
#epc-top .epc-dev-card p { font-size: 14px; line-height: 1.7; color: var(--epc-gray-mid); }

#epc-top .epc-dev-table-wrap {
	margin-top: 40px;
	border-radius: var(--epc-radius-sm);
	border: 1px solid var(--epc-gray-light);
	overflow: hidden;
	overflow-x: auto;
}
#epc-top .epc-dev-table { width: 100%; border-collapse: collapse; min-width: 620px; }

#epc-top .epc-dev-table thead th {
	background: var(--epc-blue-light);
	color: var(--epc-gray-dark);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	padding: 14px 24px;
	border-bottom: 1px solid var(--epc-gray-light);
}
#epc-top .epc-dev-table thead th:nth-child(2) { color: var(--epc-blue-brand); }

#epc-top .epc-dev-table tbody td {
	padding: 14px 24px;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px solid var(--epc-gray-light);
}
#epc-top .epc-dev-table tbody tr:last-child td { border-bottom: none; }
#epc-top .epc-dev-table tbody td:first-child  { color: var(--epc-gray-mid); }
#epc-top .epc-dev-table tbody td:nth-child(2) { color: var(--epc-navy); background: rgba(69, 113, 255, 0.04); }
#epc-top .epc-dev-table tbody td:nth-child(3) { color: var(--epc-gray-mid); }

/* --------------------------------------------------------------------------
   15. Final CTA
   -------------------------------------------------------------------------- */
#epc-top .epc-final {
	background: linear-gradient(180deg, #ffffff 0%, #e8fdf7 100%);
	text-align: center;
	padding: 96px var(--epc-gutter);
}

#epc-top .epc-final h2 {
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 600;
	color: var(--epc-navy);
	letter-spacing: -1px;
	line-height: 1.15;
	max-width: 700px;
	margin: 0 auto 16px;
}

#epc-top .epc-final p {
	font-size: 17px;
	color: var(--epc-gray-mid);
	line-height: 1.6;
	max-width: 480px;
	margin: 0 auto 40px;
}

#epc-top .epc-final-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

#epc-top .epc-disclaimer {
	margin: 32px auto 0;
	max-width: 700px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--epc-gray-mid);
}


/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
#epc-top .epc-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
#epc-top .epc-reveal.epc-visible { opacity: 1; transform: translateY(0); }

/* Never hide content from users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	#epc-top .epc-reveal { opacity: 1; transform: none; transition: none; }
}


/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	#epc-top .epc-gaps-grid { grid-template-columns: repeat(2, 1fr); }
	#epc-top .epc-anchors { gap: 20px; }
	#epc-top .epc-anchors a { font-size: 13px; }
}

@media (max-width: 900px) {
	#epc-top .epc-anchors { display: none; }
}

@media (max-width: 768px) {
	#epc-top.epc { --epc-gutter: 20px; }

	#epc-top .epc-section { padding: 56px var(--epc-gutter); }
	#epc-top .epc-hero    { padding: 56px var(--epc-gutter) 48px; }
	#epc-top .epc-final   { padding: 64px var(--epc-gutter); }

	#epc-top .epc-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	#epc-top .epc-stat { border-right: none; }

	#epc-top .epc-verdict-grid,
	#epc-top .epc-decision-grid,
	#epc-top .epc-dev-grid,
	#epc-top .epc-shine-grid,
	#epc-top .epc-gaps-grid,
	#epc-top .epc-scenario-body { grid-template-columns: 1fr; }

	#epc-top .epc-scenario-col.epc-them {
		border-right: none;
		border-bottom: 1px solid var(--epc-gray-light);
	}

	#epc-top .epc-verdict-card,
	#epc-top .epc-decision-card { padding: 28px; }

	#epc-top .epc-scenario-head { padding: 18px 22px; }
	#epc-top .epc-scenario-col  { padding: 24px 22px; }
}

@media (max-width: 480px) {
	#epc-top .epc-hero-ctas,
	#epc-top .epc-final-btns { flex-direction: column; align-items: stretch; }
	#epc-top .epc-hero-ctas .epc-btn,
	#epc-top .epc-final-btns .epc-btn { text-align: center; }
}