/* Elevate compare + help me choose (#elevate-compare). Sits inside the site's own
   page, so it reuses its design system (.sec-head, .eyebrow, .btn, table.pk, the
   --card/--line/--muted tokens) and only adds what the comparison needs. */
#elevate-compare {
    --ecmp-card: var(--card, #272220);
    --ecmp-ink2: var(--ink2, #201c1a);
    --ecmp-line: var(--line, #39322f);
    --ecmp-muted: var(--muted, #9aa0aa);
    --ecmp-accent: var(--orange, #EF3B36);
    --ecmp-red-text: #ff6b62;   /* red text that keeps contrast on the dark cards */
    color: var(--txt, #e7e9ec);
}
#elevate-compare .ecmp-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* comparison table (desktop) */
#elevate-compare .ecmp-tablewrap { overflow-x: auto; border-radius: 14px; }
#elevate-compare table.pk th[scope="row"] { background: transparent; text-transform: none; letter-spacing: 0; font-size: 14px; }
#elevate-compare table.pk th[scope="row"] a { color: #fff; text-decoration: none; }
#elevate-compare table.pk th[scope="row"] a:hover { color: var(--ecmp-red-text); }
/* the theme gives every table cell a light #ddd right and bottom border: only a dark rule between rows here */
#elevate-compare table.pk th, #elevate-compare table.pk td { border: 0; }
#elevate-compare table.pk td, #elevate-compare table.pk th[scope="row"] { vertical-align: top; border-top: 1px solid var(--ecmp-line); }
#elevate-compare .ecmp-from { white-space: nowrap; }
#elevate-compare .ecmp-from b, #elevate-compare .ecmp-card-from b { color: #fff; }
#elevate-compare .ecmp-sub { display: block; font-size: 12px; color: var(--ecmp-muted); margin-top: 2px; }
#elevate-compare .ecmp-soon { color: var(--ecmp-muted); white-space: normal; }
#elevate-compare .ecmp-go { color: var(--ecmp-red-text); font-weight: 700; white-space: nowrap; text-decoration: none; }
#elevate-compare .ecmp-go:hover { text-decoration: underline; }
#elevate-compare[dir="rtl"] table.pk th, #elevate-compare[dir="rtl"] table.pk td { text-align: right; }

/* cards (phones) */
#elevate-compare .ecmp-cards { display: none; list-style: none; margin: 0; padding: 0; gap: 10px; }
#elevate-compare .ecmp-card-link {
    display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: inherit;
    background: var(--ecmp-card); border: 1px solid var(--ecmp-line);
}
#elevate-compare .ecmp-card-link:hover, #elevate-compare .ecmp-card-link:focus-visible { border-color: var(--ecmp-accent); }
#elevate-compare .ecmp-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#elevate-compare .ecmp-card-name { color: #fff; font-size: 16px; }
#elevate-compare .ecmp-card-from { text-align: end; font-size: 14px; max-width: 48%; }
#elevate-compare .ecmp-card-best { color: #d6d9df; font-size: 14px; }
#elevate-compare .ecmp-card-meta { color: var(--ecmp-muted); font-size: 13px; }
@media (max-width: 760px) {
    #elevate-compare .ecmp-tablewrap { display: none; }
    #elevate-compare .ecmp-cards { display: grid; }
}

/* help me choose */
#elevate-compare .ecmp-choose-slot { margin-top: 40px; }
#elevate-compare .ecmp-choose {
    max-width: 880px; margin: 0 auto; padding: 28px; border-radius: 16px;
    background: var(--ecmp-card); border: 1px solid var(--ecmp-line);
}
#elevate-compare .ecmp-lead, #elevate-compare .ecmp-trail { color: var(--ecmp-muted); font-size: 14px; margin: 0 0 16px; }
#elevate-compare .ecmp-again {
    font: inherit; color: var(--ecmp-red-text); background: none; border: 0; padding: 0; margin-inline-start: 8px;
    text-decoration: underline; cursor: pointer;
}
#elevate-compare h3 { color: #fff; }   /* the site's default heading colour is dark in this spot */
#elevate-compare .ecmp-choose h3 { margin: 0 0 14px; }
#elevate-compare .ecmp-choose h3:focus { outline: none; }
#elevate-compare .ecmp-opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#elevate-compare .ecmp-opt {
    display: grid; gap: 3px; text-align: start; font: inherit; cursor: pointer; color: #fff;
    padding: 14px 16px; border-radius: 12px; background: var(--ecmp-ink2); border: 1px solid var(--ecmp-line);
}
#elevate-compare .ecmp-opt, #elevate-compare .ecmp-opt b, #elevate-compare .ecmp-opt span, #elevate-compare .ecmp-again { text-transform: none; letter-spacing: 0; }
#elevate-compare .ecmp-opt b { font-size: 15px; font-weight: 700; }
#elevate-compare .ecmp-opt span { color: var(--ecmp-muted); font-size: 13px; font-weight: 400; }
#elevate-compare .ecmp-opt:hover { border-color: var(--ecmp-accent); }
#elevate-compare .ecmp-opt:focus-visible, #elevate-compare .ecmp-again:focus-visible,
#elevate-compare .ecmp-card-link:focus-visible, #elevate-compare a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#elevate-compare .ecmp-result p { color: #d6d9df; margin: 0 0 6px; }
#elevate-compare .ecmp-result-from { font-size: 15px; }
#elevate-compare .ecmp-result-from .ecmp-sub { display: inline; margin-inline-start: 6px; }
#elevate-compare .ecmp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
@media (max-width: 560px) {
    #elevate-compare .ecmp-choose { padding: 20px; }
    #elevate-compare .ecmp-actions .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    #elevate-compare * { transition: none !important; }
}