/* Comparison pages.
   Light ground, because these are read carefully rather than skimmed, and the
   whole point is that the other service gets a fair hearing. Sits on top of
   premium.css and reuses its header, buttons and footer. */
.cmp-shell{max-width:860px;margin:auto;padding:64px 28px 96px;color:var(--rs-ink)}
.cmp-block{margin:0 0 54px}
.cmp-block h2{margin:0 0 16px;font-family:var(--rs-font-display);font-weight:700;
  font-size:clamp(22px,2.6vw,32px);line-height:1.12;letter-spacing:-.035em;color:var(--rs-ink)}
.cmp-lede{margin:0 0 22px;font-size:16.5px;line-height:1.72;color:#3A4A40;max-width:44em}
.cmp-note{margin:0;padding:16px 18px;border-left:3px solid var(--rs-signal-deep);
  background:rgba(61,107,18,.05);font-size:14px;line-height:1.7;color:#3A4A40}
.cmp-point{margin:0 0 26px}
.cmp-point h3{margin:0 0 7px;font-family:var(--rs-font-display);font-size:17px;
  font-weight:700;letter-spacing:-.02em;color:var(--rs-ink)}
.cmp-point p{margin:0;font-size:15px;line-height:1.72;color:#454F4A;max-width:44em}

/* The two-column choose block. Both sides get the same weight on purpose. */
.cmp-choose{display:grid;grid-template-columns:1fr 1fr;gap:28px;
  padding:30px;border:1px solid rgba(5,19,13,.14);border-radius:16px;background:#FFFDF8}
.cmp-choose h2{font-size:20px;margin-bottom:10px}
.cmp-choose p{margin:0 0 14px;font-size:15px;line-height:1.7;color:#454F4A}
.cmp-out a{color:var(--rs-signal-deep);font-weight:600;text-decoration:underline}
.cmp-out a.premium-button{text-decoration:none}

.cmp-honest{padding:26px 28px;border-radius:16px;background:var(--rs-ink);color:var(--rs-cream)}
.cmp-honest h2{color:var(--rs-cream)}
.cmp-honest p{margin:0 0 14px;font-size:14.5px;line-height:1.72;color:rgba(244,240,230,.82);max-width:46em}
.cmp-sources{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px}
.cmp-sources a{color:var(--rs-signal);font-size:13px}
.cmp-back{margin:0;font-size:14px}
.cmp-back a{color:var(--rs-signal-deep);font-weight:600}

.cmp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.cmp-card{display:block;padding:26px 28px;border:1px solid rgba(244,240,230,.16);
  border-radius:16px;background:var(--rs-panel);color:var(--rs-cream);text-decoration:none;
  transition:border-color .18s ease,transform .18s ease}
.cmp-card:hover{border-color:var(--rs-signal);transform:translateY(-2px)}
.cmp-card b{display:block;font-family:var(--rs-font-display);font-size:19px;
  font-weight:700;letter-spacing:-.025em}
.cmp-card span{display:block;margin-top:9px;font-size:14px;line-height:1.65;color:rgba(244,240,230,.72)}

@media (max-width:700px){
  .cmp-shell{padding:44px 20px 70px}
  .cmp-choose{grid-template-columns:1fr;padding:24px}
}

/* Target size. Every link on these pages is standalone rather than sitting
   inside a sentence, so the inline exemption in WCAG 2.2 SC 2.5.8 does not
   apply and all of them need 24 by 24. */
.cmp-out a,.cmp-sources a,.cmp-back a{display:inline-flex;align-items:center;min-height:24px}

/* Read next reuses .article-next from premium.css. These pages sit on the same
   paper ground as the guides, so a second card treatment here would be the same
   rules in a different file waiting to drift. The only difference is that the
   nav is also a .cmp-block, which supplies the spacing. */
.article-next{border-top-color:rgba(5,19,13,.14)}