, not
v5.3.1 changes (on top of v5.3):
- er-cp-value: font-weight changed from 700 to 400
- er-pricing-table: border-bottom on tbody td now !important
- er-pricing-table: border-right added to tbody td and thead th
- er-pricing-table: last-child border-right removed on td and th
v5.3 changes:
- Primary ink color: #2e2e2e (was #1a1d29)
- Base font size: 1rem / line-height 1.4 (was 14.5px / 1.6)
- Section h2: 1.45rem (was 22px)
- All prose between sections: 1rem / #2e2e2e
- Component titles (pros/cons, FAQ q, feat name): 1rem bold
- Descriptions inside all blocks: 0.9rem / #2e2e2e
- Scorecard notes, platform sub-labels: 0.85rem / muted
- Uppercase kickers/labels: fixed px (10.5–11.5px)
- er-feat-body strong: inline (pill stays on same line)
- er-feat-body br: line-height:6px spacer above description
- Hero score card: fully inline-styled, uses px not rem
- Proprietary editorial scoring system added (5 factors)
- Sentiment bars moved from hero to community ratings section
- er-ptable: all cell colors must be inline styles (Elementor
overrides class-based colors in table cells)
RULES:
- Lives permanently in the Elementor template Custom CSS field
- Each HTML block is a standalone .er-wrap — no parent needed
- Hero score card is fully inline-styled in its own custom field
- Permitted inline styles: width:X% on bar fills, src on images,
margin:0!important;padding:0!important; on
tags inside
tight components (WordPress theme margin injection fix)
- Hero card uses px not rem — rem resolves against theme base
outside .er-wrap, giving unreliable results in custom fields
PRICING TABLE DECISION:
- Use er-ptable (horizontal comparison) when the product has
2-4 distinct plans with feature differences worth comparing
side by side (e.g. Justworks Payroll/PEO Basic/PEO Plus/EOR)
- Use er-pricing-table (vertical feature rows) when the product
has 1-2 plans and the story is about what is included vs.
excluded (e.g. Gloroots EOR / Contractor / Direct Hire)
- Never use both on the same page
TYPE SCALE SUMMARY:
- Section headings (h2): 1.45rem, 700
- Section prose: 1rem, #2e2e2e
- Component item titles: 1rem bold (pros/cons, FAQ q)
- Feature headings (h4): 1rem bold, inline, #1a2a17
- Descriptions inside blocks: 0.9rem, #2e2e2e
- Feature body text: 0.9rem, #2e2e2e
- Scorecard notes: 0.85rem, muted
- Kickers / uppercase labels: 10.5-11.5px fixed
============================================================ */
/* ============================================================
VARIABLES + BASE
============================================================ */
.er-wrap {
--er-purple: #7756b1;
--er-purple-dark: #5c3d99;
--er-purple-tint: #f3eeff;
--er-tint: #f8f7ff;
--er-ink: #2e2e2e;
--er-muted: #6b7280;
--er-hint: #9ca3af;
--er-border: #e5e7ec;
--er-track: #f0f0f4;
--er-white: #ffffff;
--er-win: #16a34a;
--er-lose: #dc2626;
--er-radius: 8px;
font-family: inherit;
font-size: 1rem;
color: var(--er-ink);
line-height: 1.4;
box-sizing: border-box;
margin: 0 0 72px;
}
.er-wrap,
.er-wrap * {
box-sizing: border-box;
font-family: inherit;
}
.er-wrap.er-wrap--end { margin-bottom: 0; }
/* ============================================================
SECTION HEADINGS + PROSE
============================================================ */
.er-head h2 {
font-size: 1.45rem;
font-weight: 700;
color: var(--er-ink);
line-height: 1.3;
margin: 0 0 10px;
padding: 0;
border: none;
}
.er-head h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--er-ink);
line-height: 1.3;
margin: 0 0 8px;
}
.er-prose {
font-size: 1rem;
color: var(--er-ink);
line-height: 1.4;
margin: 0 0 20px;
width: 100%;
}
.er-prose + .er-prose { margin-top: -8px; }
.er-kicker {
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--er-muted);
line-height: 1.3;
}
/* ============================================================
BORDERED SURFACE UTILITY
============================================================ */
.er-box {
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
background: var(--er-white);
overflow: hidden;
}
.er-box__inner { padding: 22px 24px; }
.er-box--flush {
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
background: var(--er-white);
overflow: hidden;
}
/* ============================================================
EDITOR'S VERDICT
============================================================ */
.er-verdict-byline {
display: flex;
align-items: center;
gap: 12px;
padding: 0 0 14px;
border-bottom: 1px solid var(--er-border);
margin: 0 0 18px;
}
.er-verdict-avatar {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
.er-verdict-author__name {
font-size: 14px;
font-weight: 700;
color: var(--er-ink);
line-height: 1.25;
display: block;
}
.er-verdict-author__role {
font-size: 12.5px;
color: var(--er-muted);
line-height: 1.25;
display: block;
}
.er-verdict-text {
font-size: 0.9rem;
color: var(--er-ink);
line-height: 1.4;
margin: 0 0 14px;
display: block;
}
.er-pullquote {
background: var(--er-tint);
border-left: 3px solid var(--er-purple);
padding: 14px 18px;
margin: 0 0 14px;
}
.er-pullquote p {
font-size: 16px;
font-weight: 500;
color: var(--er-ink);
line-height: 1.55;
}
.er-verdict-byline p,
.er-pullquote p {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* ============================================================
KEY FACTS — icon grid
============================================================ */
.er-cp-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
overflow: hidden;
background: var(--er-white);
}
.er-cp-cell {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-bottom: 1px solid var(--er-border);
border-right: 1px solid var(--er-border);
background: var(--er-white);
}
.er-cp-cell:nth-child(even) { border-right: none; }
.er-cp-cell:nth-last-child(-n+2) { border-bottom: none; }
.er-cp-icon {
flex-shrink: 0;
width: 30px;
height: 30px;
background: var(--er-purple-tint);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.er-cp-label {
font-size: 10.5px;
color: var(--er-hint);
margin: 0 0 2px;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
line-height: 1.2;
display: block;
}
/* v5.3.1: font-weight changed from 700 to 400 */
.er-cp-value {
font-size: 0.9rem;
font-weight: 400;
color: var(--er-ink);
margin: 0;
line-height: 1.3;
display: block;
}
/* ============================================================
PROS & CONS — open two-column editorial lists
============================================================ */
.er-pc-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.er-pc-col .er-kicker {
display: block;
margin: 0 0 14px;
}
.er-pc-item {
border-left: 2px solid var(--er-border);
padding-left: 14px;
margin: 0 0 16px;
}
.er-pc-item:last-child { margin-bottom: 0; }
.er-pc-title {
font-size: 1rem;
font-weight: 700;
color: var(--er-ink);
line-height: 1.35;
margin: 0 0 4px;
display: block;
}
.er-pc-desc {
font-size: 0.9rem;
color: var(--er-ink);
line-height: 1.4;
margin: 0;
display: block;
}
.er-pc-item p {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.er-pc-item p.er-pc-title { margin-bottom: 4px !important; }
.er-pc-item p.er-pc-desc { margin-bottom: 0 !important; }
/* ============================================================
TOP FEATURES — numbered prose in bordered item cards
============================================================ */
.er-feat-item {
display: flex;
gap: 16px;
padding: 16px 18px;
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
background: var(--er-white);
margin: 0 0 10px;
}
.er-feat-item--last,
.er-feat-item:last-child { margin-bottom: 0; }
.er-feat-num {
font-size: 13px;
font-weight: 700;
color: var(--er-purple);
min-width: 26px;
flex-shrink: 0;
padding-top: 2px;
line-height: 1.65;
}
/* v5.3.2: er-feat-body is now a
not
to support valid
headings inside feature items.
cannot contain block
elements — using
avoids HTML validation errors and
layout breakage in Elementor. */
.er-feat-body {
font-size: 0.9rem;
color: var(--er-ink);
line-height: 1.4;
margin: 0;
display: block;
}
/* v5.3.2: h4 inside er-feat-body uses display:inline so the
tag pill sits on the same line as the heading. Margin reset
prevents WordPress theme h4 styles from adding space above. */
.er-feat-body h4 {
display: inline;
font-size: 1rem;
font-weight: 700;
color: #1a2a17;
margin: 0 !important;
padding: 0 !important;
line-height: inherit;
}
.er-feat-body br {
display: block;
content: "";
line-height: 6px;
}
.er-feat-tag {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--er-muted);
background: var(--er-track);
border-radius: 999px;
padding: 2px 9px;
margin-left: 8px;
white-space: nowrap;
vertical-align: 1px;
}
.er-feat-tag--diff {
background: var(--er-purple-tint);
color: var(--er-purple-dark);
}
.er-feat-item p {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* ============================================================
BEST FOR / SKIP IF
============================================================ */
.er-decision-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.er-decision-col .er-kicker {
display: block;
margin: 0 0 12px;
}
.er-decision-col--divided {
border-left: 1px solid var(--er-border);
padding-left: 26px;
}
.er-decision-list {
list-style: disc;
margin: 0;
padding: 0 0 0 16px;
display: block;
}
.er-decision-list li {
font-size: 0.9rem;
color: var(--er-ink);
line-height: 1.4;
margin: 0 0 9px;
padding: 0;
}
.er-decision-list li:last-child { margin-bottom: 0; }
.er-decision-list li::marker { color: var(--er-hint); }
/* ============================================================
COUNTRY COVERAGE
============================================================ */
.er-country-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
gap: 8px;
}
.er-country-cell {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 12px;
border: 1px solid var(--er-border);
border-radius: 6px;
background: var(--er-white);
}
.er-country-flag { font-size: 19px; line-height: 1; flex-shrink: 0; }
.er-country-name {
font-size: 13.5px;
font-weight: 600;
color: var(--er-ink);
line-height: 1.2;
}
.er-country-actions { text-align: center; margin-top: 18px; }
.er-country-btn {
background: var(--er-white);
color: var(--er-purple);
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
padding: 9px 26px;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
transition: border-color 0.15s ease;
}
.er-country-btn:hover { border-color: var(--er-purple); }
/* ============================================================
PRICING TABLE — vertical feature rows (er-pricing-table)
Use for 1-2 plan products where inclusion story matters
============================================================ */
.er-pricing-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.er-pricing-table {
width: 100%;
border-collapse: collapse;
font-size: 13.5px;
min-width: 500px;
}
/* v5.3.1: border-right added, border-bottom made !important */
.er-pricing-table thead th {
padding: 16px 14px 14px;
border: none;
border-bottom: 1px solid var(--er-border) !important;
border-right: 1px solid var(--er-border) !important;
font-weight: 700;
color: var(--er-ink);
background: var(--er-white);
text-align: center;
line-height: 1.3;
vertical-align: bottom;
}
/* v5.3.1: remove right border on last header cell */
.er-pricing-table thead th:last-child {
border-right: none !important;
}
.er-pricing-table thead th.er-col-label {
text-align: left;
font-size: 11px;
color: var(--er-muted);
text-transform: uppercase;
letter-spacing: 0.07em;
width: 28%;
font-weight: 700;
vertical-align: middle;
}
.er-pricing-table thead th.er-col-featured {
background: var(--er-white);
border-top: 2px solid var(--er-purple);
}
.er-plan-price {
display: block;
font-size: 22px;
font-weight: 700;
color: var(--er-ink);
line-height: 1.1;
margin-bottom: 2px;
}
.er-col-featured .er-plan-price { color: var(--er-purple); }
.er-plan-period {
display: block;
font-size: 11.5px;
font-weight: 500;
color: var(--er-muted);
margin-bottom: 7px;
}
.er-plan-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--er-muted);
background: transparent;
padding: 0;
margin-top: 2px;
}
.er-col-featured .er-plan-badge { color: var(--er-purple); }
/* v5.3.1: border-bottom !important added, border-right added */
.er-pricing-table tbody tr td {
padding: 10px 14px;
border: none;
border-bottom: 1px solid var(--er-border) !important;
border-right: 1px solid var(--er-border) !important;
color: var(--er-ink);
vertical-align: middle;
text-align: center;
line-height: 1.4;
background: var(--er-white);
font-size: 13.5px;
}
/* v5.3.1: remove right border on last cell per row */
.er-pricing-table tbody tr td:last-child {
border-right: none !important;
}
.er-pricing-table tbody tr:last-child td { border-bottom: none !important; }
.er-pricing-table tbody tr td.er-col-label { text-align: left; font-weight: 700; color: var(--er-ink); font-size: 12.5px; }
.er-pricing-table tbody tr td.er-col-featured { background: var(--er-white); }
.er-pricing-table tr.er-row-group td,
.er-pricing-table tr.er-row-group td.er-col-label,
.er-pricing-table tr.er-row-group td.er-col-featured {
background: var(--er-white) !important;
color: var(--er-muted) !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
text-align: left;
padding: 18px 14px 7px;
border-bottom: 1px solid var(--er-border) !important;
border-right: none !important;
}
.er-cell-yes { color: var(--er-ink); font-weight: 600; }
.er-cell-no { color: var(--er-hint); font-weight: 400; }
.er-cell-muted { color: var(--er-muted); }
.er-pricing-note {
margin-top: 12px;
background: transparent;
border: none;
padding: 0;
font-size: 12.5px;
color: var(--er-muted);
line-height: 1.55;
}
.er-pricing-table thead tr:first-child th { border-block-start: none !important; }
.er-pricing-table thead tr:first-child th.er-col-featured { border-block-start: 2px solid var(--er-purple) !important; }
/* ============================================================
PRICING TABLE — horizontal plan comparison (er-ptable)
Use for 2-4 plan products where plans differ by feature set
(e.g. Justworks Payroll / PEO Basic / PEO Plus / EOR)
============================================================ */
.er-ptable-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
position: relative;
}
/* Fade on right edge signals horizontal scrollability on mobile */
.er-ptable-scroll::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 100%;
background: linear-gradient(to right, transparent, rgba(255,255,255,0.92));
pointer-events: none;
border-radius: 0 var(--er-radius) var(--er-radius) 0;
}
/* Hide fade on desktop — only needed when table overflows */
@media (min-width: 769px) {
.er-ptable-scroll::after {
display: none;
}
}
.er-ptable {
width: 100%;
border-collapse: collapse;
min-width: 560px;
font-size: 13.5px;
}
/* Plan header cells */
.er-ptable__label {
width: 160px;
padding: 0;
background: var(--er-white);
border-right: 1px solid var(--er-border);
border-bottom: 1px solid var(--er-border);
vertical-align: middle;
}
.er-ptable__plan {
text-align: center;
vertical-align: bottom;
padding: 20px 16px 16px;
border-bottom: 1px solid var(--er-border);
border-right: 1px solid var(--er-border);
background: var(--er-white);
}
.er-ptable__plan:last-child { border-right: none; }
.er-ptable__plan--featured {
border-top: 2px solid var(--er-purple);
background: var(--er-white);
}
.er-ptable__badge {
display: inline-block;
background: var(--er-purple);
color: var(--er-white);
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 2px 10px;
border-radius: 999px;
margin-bottom: 8px;
}
.er-ptable__plan-name {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--er-muted);
margin-bottom: 7px;
}
.er-ptable__plan-name--featured { color: var(--er-purple); }
.er-ptable__plan-price {
font-size: 24px;
font-weight: 700;
color: var(--er-ink);
line-height: 1;
margin-bottom: 3px;
display: block;
}
.er-ptable__plan-price--featured { color: var(--er-purple-dark); }
.er-ptable__plan-period {
font-size: 11.5px;
color: var(--er-muted);
line-height: 1.3;
}
/* Group row labels */
.er-ptable__group td {
background: #f7f7f9 !important;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--er-muted);
padding: 16px 16px 6px;
border-bottom: 1px solid var(--er-border);
}
/* Data cells */
.er-ptable td.er-ptable__label {
font-size: 12.5px;
font-weight: 600;
color: var(--er-ink);
padding: 11px 16px;
border-right: 1px solid var(--er-border);
border-bottom: 1px solid var(--er-border);
background: var(--er-white);
text-align: left;
vertical-align: middle;
}
.er-ptable__cell {
text-align: center;
padding: 11px 14px;
border-right: 1px solid var(--er-border);
border-bottom: 1px solid var(--er-border);
background: var(--er-white);
color: var(--er-ink);
vertical-align: middle;
font-size: 13.5px;
}
.er-ptable__cell:last-child { border-right: none; }
.er-ptable__cell--featured {
background: #faf8ff !important;
}
.er-ptable__cell--yes { color: var(--er-win) !important; font-weight: 600; }
.er-ptable__cell--no { color: var(--er-hint) !important; font-weight: 400; }
.er-ptable__cell--na { color: var(--er-hint) !important; }
.er-ptable__yes {
color: var(--er-win) !important;
font-weight: 700;
font-size: 14px;
}
.er-ptable__no {
color: var(--er-hint) !important;
font-weight: 400;
font-size: 13px;
}
/* CTA row */
.er-ptable__cta {
text-align: center;
padding: 14px;
border-right: 1px solid var(--er-border);
border-bottom: none;
background: var(--er-white);
vertical-align: middle;
}
.er-ptable__cta:last-child { border-right: none; }
.er-ptable__cta--featured { background: #faf8ff !important; }
.er-ptable__btn {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
padding: 8px 18px;
border-radius: var(--er-radius);
text-decoration: none !important;
cursor: pointer;
border: 1px solid var(--er-border);
background: var(--er-white);
color: var(--er-ink) !important;
transition: border-color 0.15s ease;
}
.er-ptable__btn:hover { border-color: var(--er-purple); color: var(--er-purple) !important; }
.er-ptable__btn--featured {
background: var(--er-purple) !important;
color: var(--er-white) !important;
border-color: var(--er-purple) !important;
}
.er-ptable__btn--featured:hover {
background: var(--er-purple-dark) !important;
border-color: var(--er-purple-dark) !important;
color: var(--er-white) !important;
}
/* Last data row before CTA — remove bottom border */
.er-ptable tr:nth-last-child(2) td { border-bottom: none; }
/* Mobile scroll hint */
.er-ptable-hint {
display: none;
font-size: 11.5px;
color: var(--er-hint);
text-align: center;
margin-top: 8px;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.er-ptable-hint {
display: block;
}
}
/* ============================================================
COMPETITOR COMPARISON — static accordion
============================================================ */
.er-vs-list {
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
background: var(--er-white);
overflow: hidden;
}
.er-vs { border-bottom: 1px solid var(--er-border); }
.er-vs:last-child { border-bottom: none; }
.er-vs__head {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
cursor: pointer;
list-style: none;
background: var(--er-white);
transition: background 0.15s ease;
}
.er-vs__head::-webkit-details-marker { display: none; }
.er-vs__head::marker { content: ""; }
.er-vs__head:hover { background: #fafafc; }
.er-vs[open] > .er-vs__head {
background: #fafafc;
border-bottom: 1px solid var(--er-border);
}
.er-vs__meta { flex: 1; min-width: 0; }
.er-vs__title {
font-size: 15px;
font-weight: 700;
color: var(--er-ink);
line-height: 1.3;
display: block;
}
.er-vs__line {
font-size: 12.5px;
color: var(--er-muted);
line-height: 1.4;
display: block;
}
.er-vs__chev {
font-size: 11px;
color: var(--er-hint);
flex-shrink: 0;
transition: transform 0.15s ease;
}
.er-vs[open] .er-vs__chev { transform: rotate(180deg); }
.er-vs__cols {
display: grid;
grid-template-columns: 150px 1fr 1fr;
}
.er-vs__cols > div {
padding: 9px 14px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--er-muted);
}
.er-vs__cols > div.er-vs__col--product { color: var(--er-purple); }
.er-vs__row {
display: grid;
grid-template-columns: 150px 1fr 1fr;
border-top: 1px solid var(--er-border);
}
.er-vs__row > div {
padding: 11px 14px;
font-size: 13.5px;
line-height: 1.45;
display: flex;
align-items: center;
background: var(--er-white);
}
.er-vs__factor { font-size: 12.5px; font-weight: 700; color: var(--er-muted); }
.er-vs__us { font-weight: 600; color: var(--er-purple-dark); }
.er-vs__them { color: var(--er-ink); }
.er-vs__them.is-win { color: var(--er-win); font-weight: 600; }
.er-vs__them.is-lose { color: var(--er-lose); font-weight: 600; }
/* ============================================================
COMMUNITY RATINGS
============================================================ */
.er-platform-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
background: var(--er-white);
overflow: hidden;
margin: 0 0 10px;
}
.er-platform-cell {
padding: 14px 18px;
border-right: 1px solid var(--er-border);
}
.er-platform-cell:last-child { border-right: none; }
.er-platform-cell .er-kicker { display: block; margin: 0 0 3px; font-size: 10.5px; }
.er-platform-score {
font-size: 22px;
font-weight: 700;
color: var(--er-ink);
line-height: 1.15;
display: block;
}
.er-platform-score span { font-size: 12.5px; font-weight: 500; color: var(--er-muted); }
.er-platform-count { font-size: 12.5px; color: var(--er-muted); line-height: 1.3; display: block; }
.er-platform-caption { font-size: 12.5px; color: var(--er-muted); line-height: 1.5; margin: 0 0 28px; }
.er-platform-cell p { margin-block-start: 0 !important; margin-block-end: 0 !important; }
.er-scorecard {
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
overflow: hidden;
background: var(--er-white);
margin-top: 4px;
}
.er-scorecard__head {
display: flex;
justify-content: space-between;
padding: 9px 18px;
border-bottom: 1px solid var(--er-border);
}
.er-scorecard__head span {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--er-muted);
}
.er-scorecard__row {
display: flex;
align-items: center;
gap: 18px;
padding: 12px 18px;
border-bottom: 1px solid var(--er-border);
background: var(--er-white);
}
.er-scorecard__row--last,
.er-scorecard__row:last-child { border-bottom: none; }
.er-scorecard__info { flex: 1; min-width: 0; }
.er-scorecard__name {
font-size: 0.9rem;
font-weight: 700;
color: var(--er-ink);
line-height: 1.35;
margin: 0 0 2px !important;
display: block;
}
.er-scorecard__note {
font-size: 0.85rem;
color: var(--er-muted);
line-height: 1.5;
margin: 0 !important;
display: block;
}
.er-scorecard__bar {
width: 120px;
height: 5px;
background: var(--er-track);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
}
.er-scorecard__fill {
height: 100%;
background: var(--er-purple);
border-radius: 999px;
}
.er-scorecard__num {
font-size: 14px;
font-weight: 700;
color: var(--er-purple);
min-width: 30px;
text-align: right;
flex-shrink: 0;
}
/* ============================================================
FAQ
============================================================ */
.er-faq-list { display: flex; flex-direction: column; gap: 8px; }
.er-faq-item {
border: 1px solid var(--er-border);
border-radius: var(--er-radius);
padding: 15px 18px;
display: flex;
gap: 14px;
align-items: flex-start;
background: var(--er-white);
}
.er-faq-badge {
flex-shrink: 0;
width: 24px;
height: 24px;
min-width: 24px;
background: var(--er-purple);
border-radius: 50%;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px;
font-weight: 700;
color: var(--er-white);
margin-top: 1px;
line-height: 1;
}
.er-faq-q { font-size: 1rem; font-weight: 700; color: var(--er-ink); margin: 0 0 7px; line-height: 1.4; display: block; }
.er-faq-a { font-size: 0.9rem; color: var(--er-ink); line-height: 1.4; margin: 0; display: block; }
/* ============================================================
RESPONSIVE — 768px tablet, 480px mobile
============================================================ */
@media (max-width: 768px) {
.er-wrap { margin: 0 0 48px; }
.er-pc-grid,
.er-decision-grid { grid-template-columns: 1fr; }
.er-pc-grid { gap: 26px; }
.er-cp-grid { grid-template-columns: 1fr; }
.er-cp-cell { border-right: none; }
.er-cp-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--er-border); }
.er-cp-cell:last-child { border-bottom: none; }
.er-decision-col--divided {
border-left: none;
border-top: 1px solid var(--er-border);
padding-left: 0;
padding-top: 20px;
}
.er-box__inner { padding: 18px 20px; }
}
@media (max-width: 480px) {
.er-head h2 { font-size: 18px; }
.er-platform-strip { grid-template-columns: 1fr; }
.er-platform-cell {
border-right: none;
border-bottom: 1px solid var(--er-border);
padding: 11px 16px;
}
.er-platform-cell:last-child { border-bottom: none; }
.er-scorecard__row { flex-wrap: wrap; gap: 9px; }
.er-scorecard__info { flex-basis: 100%; }
.er-scorecard__bar { flex: 1; width: auto; }
.er-vs__cols,
.er-vs__row { grid-template-columns: 1fr 1fr; }
.er-vs__cols > div:first-child,
.er-vs__row > .er-vs__factor { display: none; }
.er-pricing-table { font-size: 12.5px; }
.er-feat-item { gap: 12px; padding: 14px 14px; }
.er-box__inner { padding: 16px 16px; }
}
/* ============================================================
HERO SCORE CARD TABLE — protects factor rows from
customizer .er-box table overrides. The hero card lives
outside .er-wrap and .er-box in a custom field.
============================================================ */
table.er-score-table,
table.er-score-table tbody,
table.er-score-table tr,
table.er-score-table td {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
font-size: inherit !important;
color: inherit !important;
vertical-align: middle !important;
}/* End custom CSS */