/* Compare and help pages on the homepage (CRO) look, on top of editorial.css + cro-skin.css. */
.cro-editorial h1, .cro-editorial h2, .cro-editorial h3 { font-weight: 600; }

/* Highlighted headline: the soft-tint block, as on the homepage hero ("before it costs you"). */
.cro-editorial .page-title { letter-spacing: -.04em; line-height: 1.1; }
.cro-editorial .page-title .cro-h1-top { position: relative; z-index: 1; color: var(--ink); }
.cro-editorial .page-title .cro-h1-accent, .cro-editorial .page-title em, .cro-editorial .closing-panel .cro-h1-accent {
  font-style: normal; color: var(--accent); background: #eaefff; padding: 0 .1em .02em; margin-left: -.1em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.cro-editorial .eyebrow { color: var(--accent); }

/* Hero CTA pair and trust strip under the comparison intro. */
.cro-editorial .cro-editorial-cta { display: grid; gap: 18px; margin-top: 28px; }
.cro-editorial .cro-editorial-cta .cro-authority { justify-self: start; }

/* Cards: the white card with the faint flat offset shadow (tables, callouts, resource links). */
.cro-editorial div.border.bg-white, .cro-editorial .short-version, .cro-editorial .resource-link, .cro-editorial .library-card {
  border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 8px 8px 0 #f3f5fc;
}
.cro-editorial div.border.bg-white { overflow: hidden; }
/* Wide comparison tables keep their sideways scroll on phones instead of being cut off. */
.cro-editorial div.border.bg-white.overflow-x-auto { overflow-x: auto; }

/* Closing: light and centred, highlighted heading, primary button, trust strip (was a dark band). */
.cro-editorial .closing-panel { display: grid; justify-items: center; gap: 20px; margin: 64px 0 24px; padding: 56px 24px; border: 0; border-radius: 0; background: none; color: var(--ink); text-align: center; }
.cro-editorial .closing-panel h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; letter-spacing: -.035em; color: var(--ink); }
.cro-editorial .closing-panel p { color: var(--muted); }

/* Hub cards: inner padding and real gaps (the old list had none). */
.cro-editorial .resource-list { display: grid; gap: 16px; }
.cro-editorial .resource-link { padding: 22px 24px; border-top: 1px solid var(--line); }
.cro-editorial .resource-link + .resource-link { margin-top: 0; }
/* Rounded controls, like the rest of the site: search field and "More comparisons" chips. */
.cro-editorial input[type="search"], .cro-editorial input[type="text"] { border-radius: 12px; }
.cro-editorial a.inline-flex.border { border-radius: 999px; }
/* Closings: one centred column (the old panel was a two-column grid). */
.cro-editorial .closing-panel { grid-template-columns: 1fr; justify-content: center; max-width: 760px; margin-inline: auto; }
.cro-editorial .closing-panel > div { display: grid; justify-items: center; gap: 10px; }
/* The old list's top rule sat above the first card. */
.cro-editorial .resource-list { border-top: 0; border-bottom: 0; }
.cro-editorial .library-section { border-top: 0; }
/* No rule above the hero side panel (search / jump links). */
.cro-editorial .library-aside { border-top: 0; padding-top: 0; }