/* Compare the accounts, v4 (owner 2026-11-12: "make it like a comparison table").
   Classic pricing comparison: names, price and Choose in the pinned header; feature rows with a
   green tick or grey cross and a few words where needed. No colour key to learn. */
.cmp4{background:var(--ink);color:#fff;--c4-top:67px}
.cmp4 h2{color:#fff}
.cmp4 h2 em{color:var(--orchid)}
.cmp4 .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.c4-sub{margin:12px 0 0;font-size:15px;color:#9E91B0}
.c4-card{max-width:1000px;margin:30px auto 0;background:#1B1229;border:1px solid rgba(255,255,255,.13);border-radius:20px;overflow:clip}
.c4{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}
.c4 .c-label{width:31%}
.c4 th,.c4 td{padding:13px 18px;font-size:16px;line-height:1.3;border-top:1px solid rgba(255,255,255,.07);vertical-align:middle}
.c4 td{text-align:center}
/* Header: name, who it's for, price, sizes, Choose. */
.c4 thead th{padding:20px 16px 18px;text-align:center;background:#1B1229;border-top:3px solid transparent;box-shadow:0 1px 0 rgba(255,255,255,.12);vertical-align:top}
.c4 thead th.c-label{text-align:left}
@media (min-width:761px){.c4 thead th:not(.c-label){height:1px}}
.c4 thead th.c-viper{border-top-color:#C45FE0}
.c4 thead b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:#fff}
.c4 thead .c-viper b{color:#E3A6FA}
.c4 thead .for{display:block;margin-top:2px;font-size:13.5px;font-weight:500;color:#9E91B0}
.c4 thead .pr{display:block;margin-top:12px}
.c4 thead .pr em{font-style:normal;font-size:30px;font-weight:700;letter-spacing:-.03em;color:#fff}
.c4 thead .pr s{margin-left:6px;font-size:15px;font-weight:500;color:rgba(255,255,255,.4)}
.c4 thead .pr i{display:block;font-style:normal;font-size:12.5px;font-weight:600;color:#F0B6FF}
.c4 thead .sz{display:block;margin-top:4px;font-size:13px;font-weight:500;color:#9E91B0}
.c4-btn{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid rgba(255,255,255,.28);border-radius:11px;color:#fff;font-size:15px;font-weight:600;text-decoration:none}
.c4-btn:hover{background:rgba(255,255,255,.06)}
.c4-btn-v{background:#9B30C8;border-color:#9B30C8}
.c4-btn-v:hover{background:#A93BD8}
/* Rows. */
.c4 tbody tr:nth-child(odd){background:rgba(255,255,255,.025)}
.c4 tbody th{text-align:left;font-weight:500;color:#D9CFE6}
.c4 .tv{font-size:17px;font-weight:700;color:#fff}
.c4 .ic{display:block;width:24px;height:24px;margin:0 auto;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.c4 .y .ic circle{fill:rgba(61,220,132,.16);stroke:none}
.c4 .y .ic path{stroke:#3DDC84}
.c4 .n .ic circle{fill:rgba(255,255,255,.06);stroke:none}
.c4 .n .ic path{stroke:rgba(255,255,255,.4)}
.c4 .nt{display:block;margin-top:4px;font-size:13px;font-weight:500;color:#A99CBB}
.c4 .y .nt{color:#9FE8BE}
.c4-more{max-width:1000px;margin:18px auto 0;text-align:center;font-size:14.5px;line-height:1.5;color:#9E91B0}
.c4-more a{color:var(--orchid3);font-weight:600}
@media (max-width:900px){.cmp4{--c4-top:61px}}
/* Phones: the same three columns. The feature name takes its own line, the three answers sit
   under it; the header (names + price) stays pinned while scrolling. */
@media (max-width:760px){
  .c4-card{margin-top:22px;border-radius:16px;overflow:visible}
  .c4,.c4 thead,.c4 tbody{display:block;width:100%}
  .c4 thead{position:sticky;top:var(--c4-top);z-index:3;background:#1B1229;border-radius:16px 16px 0 0;box-shadow:0 1px 0 rgba(255,255,255,.12)}
  .c4 tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:6px;align-items:start;padding:10px 10px 12px;border-top:1px solid rgba(255,255,255,.07)}
  .c4 th,.c4 td{display:block;padding:0;border-top:0}
  .c4 thead tr{padding:12px 8px 12px;border-top:0}
  .c4 thead th{position:static;padding:0 2px;border-top:0;box-shadow:none;background:none}
  .c4 thead th.c-label{display:none}
  .c4 thead b{font-size:15px}
  .c4 thead .for{font-size:11px;line-height:1.25;min-height:28px}
  .c4 thead .pr{margin-top:6px}
  .c4 thead .pr em{font-size:21px}
  .c4 thead .pr s{display:block;margin:0;font-size:12px}
  .c4 thead .pr i{font-size:10.5px}
  .c4 thead .sz{display:none}
  .c4-btn{min-height:38px;margin-top:8px;font-size:13.5px;border-radius:10px}
  .c4 thead th.c-viper{padding-top:0;border-top:0}
  .c4 tbody th{grid-column:1 / -1;margin-bottom:8px;font-size:13.5px;color:#D9CFE6}
  .c4 .tv{font-size:15px}
  .c4 .ic{width:22px;height:22px}
  .c4 .nt{font-size:11.5px;line-height:1.25}
}

/* Equal-height header cells: the Choose buttons line up at the bottom. */
.c4 thead .c4-head{display:flex;flex-direction:column;height:100%}
.c4 thead .c4-btn{margin-top:auto}
.c4 thead .sz{margin-bottom:14px}
/* The slim names bar (shown by compare4.js once the header has scrolled away). */
.c4-float{position:sticky;top:var(--c4-top);z-index:5;height:0}
.c4-float-in{display:grid;grid-template-columns:31% 1fr 1fr 1fr;align-items:center;height:48px;background:#1B1229;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;font-weight:700;color:#fff;text-align:center;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s}
.c4-float-in .v{color:#E3A6FA}
.c4-on .c4-float-in{opacity:1;visibility:visible;transform:none}
@media (max-width:760px){
  .c4 thead{position:static;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
  .c4-float-in{grid-template-columns:0 1fr 1fr 1fr;height:42px;padding:0 10px;font-size:13.5px;border-radius:0}
}

/* No crosses (owner): neutral values in white, only good ones get the green tick. */
.c4 td .tv{display:block;font-size:15.5px;font-weight:600;color:#fff}
.c4 td.y .tv{margin-top:4px;color:#3DDC84}
.c4 tbody tr td:first-of-type .tv{}
@media (max-width:760px){
  .c4 thead .c4-head{height:100%}
  .c4 thead .sz{display:none}
  .c4 thead .pr{margin-bottom:8px}
  .c4 td .tv{font-size:13.5px;line-height:1.25}
}
@media (max-width:760px){.c4 thead tr{align-items:stretch}}
.c4 thead .pr i{min-height:16px}
.c4 thead .pr i.ph{visibility:hidden}
/* Tick beside the word, so every value in a row sits on the same line. */
.c4 td .tv{display:inline}
.c4 td.y .tv{margin-top:0}
.c4 td.y .ic{display:inline-block;width:18px;height:18px;margin:0 6px 0 0;vertical-align:-4px}
@media (max-width:760px){
  .c4 td{text-align:center}
  .c4 td.y .ic{width:15px;height:15px;margin-right:4px;vertical-align:-3px}
}