/* Web push vs SMS — embedded guide (How It Works) */



.guide-block {

  position: relative;

  z-index: 2;

  max-width: 960px;

  margin: 0 auto;

  padding: 24px 20px 56px;

}



.vs-guide {

  --vs-push: #ff6a00;

  --vs-sms: #c084fc;

  --vs-beam: #ff3355;

  --vs-glass: rgba(255, 255, 255, 0.05);

  --vs-border: rgba(255, 255, 255, 0.12);

  margin-top: 16px;

  padding-top: 40px;

  clear: both;

  isolation: isolate;

  position: relative;

  z-index: 1;

}



.features--setup {

  position: relative;

  z-index: 2;

  margin-bottom: 48px !important;

}



/* ── Split duel header ── */

.vs-duel {

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: stretch;

  min-height: 128px;

  border-radius: 20px;

  overflow: visible;

  margin-bottom: 36px;

  border: 1px solid var(--vs-border);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

}



.vs-duel__side {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 14px;

  padding: 28px 16px;

  position: relative;

}



.vs-duel__side--push {

  background: linear-gradient(145deg, rgba(110, 18, 42, 0.92) 0%, rgba(55, 8, 28, 0.75) 100%);

}



.vs-duel__side--sms {

  background: linear-gradient(215deg, rgba(72, 22, 120, 0.92) 0%, rgba(38, 10, 72, 0.75) 100%);

}



.vs-duel__beam {

  width: 3px;

  align-self: stretch;

  background: linear-gradient(180deg, transparent 0%, var(--vs-beam) 25%, #ff6a00 50%, var(--vs-beam) 75%, transparent 100%);

  box-shadow: 0 0 20px var(--vs-beam), 0 0 40px rgba(255, 51, 85, 0.45);

  animation: vsBeamPulse 3s ease-in-out infinite;

}



@keyframes vsBeamPulse {

  0%, 100% { opacity: 0.85; filter: brightness(1); }

  50% { opacity: 1; filter: brightness(1.25); }

}



.vs-duel__icon {

  width: 52px;

  height: 52px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  background: linear-gradient(160deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04));

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);

  transform: translateY(0);

  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.vs-duel:hover .vs-duel__icon {

  transform: translateY(-4px) scale(1.04);

}



.vs-duel__side--push .vs-duel__icon { color: #ffc857; }

.vs-duel__side--sms .vs-duel__icon { color: #f0e8ff; }



.vs-duel__label {

  font-family: 'Inter', sans-serif;

  font-size: clamp(1.1rem, 2.5vw, 1.35rem);

  font-weight: 800;

  color: #fff;

  letter-spacing: -0.02em;

}



/* ── Hero ── */

.vs-hero {

  text-align: center;

  margin-bottom: 28px;

}



.vs-hero__badge {

  display: inline-block;

  padding: 7px 16px;

  border-radius: 999px;

  font-family: 'Inter', sans-serif;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--vs-push);

  background: rgba(255, 106, 0, 0.1);

  border: 1px solid rgba(255, 106, 0, 0.35);

  margin-bottom: 18px;

}



.vs-hero h2 {

  font-family: 'Inter', sans-serif;

  font-size: clamp(1.75rem, 4vw, 2.55rem);

  font-weight: 800;

  line-height: 1.08;

  color: #fff;

  margin-bottom: 14px;

}



.vs-hero h2 em {

  font-style: normal;

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.vs-hero__sub {

  font-family: 'Inter', sans-serif;

  font-size: 17px;

  line-height: 1.65;

  color: rgba(255, 255, 255, 0.68);

  max-width: 620px;

  margin: 0 auto;

}



/* ── Explore rail ── */

.vs-rail-wrap {

  margin: 36px 0 28px;

  padding: 0;

  background: none;

  border: none;

  backdrop-filter: none;

  -webkit-backdrop-filter: none;

}



.vs-rail {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 10px;

  align-items: stretch;

  overflow: visible;

  padding: 0;

  margin: 0;

  width: 100%;

}



.vs-rail__link {

  min-width: 0;

  max-width: none;

  min-height: 44px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10px 12px;

  border-radius: 12px;

  font-family: 'Inter', sans-serif;

  font-size: 13px;

  font-weight: 600;

  line-height: 1.2;

  text-align: center;

  box-sizing: border-box;

  color: rgba(255, 255, 255, 0.6);

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.12);

  transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s;

  -webkit-tap-highlight-color: transparent;

}



.vs-rail__link:hover {

  color: #fff;

  border-color: rgba(191, 0, 255, 0.35);

}



.vs-rail__link.is-active {

  color: #fff;

  background: linear-gradient(135deg, rgba(255, 106, 0, 0.18), rgba(191, 0, 255, 0.18));

  border: 1px solid rgba(255, 106, 0, 0.4);

  box-shadow: 0 0 20px rgba(191, 0, 255, 0.15);

}



.vs-rail__link:focus {

  outline: none;

}



.vs-rail__link:focus-visible {

  outline: 2px solid rgba(255, 106, 0, 0.55);

  outline-offset: 2px;

}



/* ── Klikr vs SMS matchup ── */

.vs-matchup {

  margin-bottom: 36px;

}



.vs-matchup__grid {

  display: grid;

  grid-template-columns: 1.25fr auto 0.85fr;

  gap: 14px;

  align-items: stretch;

}



.vs-matchup__card {

  position: relative;

  padding: 26px 22px 22px;

  border-radius: 20px;

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}



.vs-matchup__card--klikr {

  background: linear-gradient(155deg, rgba(255, 106, 0, 0.14), rgba(191, 0, 255, 0.1));

  border: 1px solid rgba(255, 106, 0, 0.4);

  box-shadow: 0 12px 48px rgba(191, 0, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);

}



.vs-matchup__card--sms,
.vs-matchup__card--legacy {

  background: rgba(255, 255, 255, 0.02);

  border: 1px dashed rgba(255, 255, 255, 0.15);

  opacity: 0.55;

  transform: scale(0.97);

  transform-origin: center top;

  transition:
    opacity 0.35s ease,
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

}



.vs-matchup__card--legacy:hover,
.vs-matchup__card--sms:hover {

  opacity: 1;

  transform: scale(1);

  background: rgba(255, 255, 255, 0.07);

  border-color: rgba(255, 255, 255, 0.28);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

}



.vs-matchup__card--legacy:hover .vs-matchup__brand--dim {

  opacity: 1;

}



.vs-matchup__card--legacy:hover .vs-matchup__brand h3 {

  color: rgba(255, 255, 255, 0.92);

}



.vs-matchup__card--legacy:hover .vs-matchup__tagline--dim {

  color: rgba(255, 255, 255, 0.55);

}



.vs-matchup__card--legacy:hover .vs-matchup__icon-faded {

  color: rgba(255, 255, 255, 0.75);

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.18);

}



.vs-matchup__card--legacy:hover .vs-matchup__channels-label {

  color: rgba(255, 255, 255, 0.58);

}



.vs-matchup__card--legacy:hover .vs-matchup__channels li {

  color: rgba(255, 255, 255, 0.78);

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

}



.vs-matchup__card--legacy:hover .vs-matchup__channels li i {

  color: rgba(255, 255, 255, 0.55);

}



.vs-matchup__card--legacy:hover .vs-matchup__list--con li {

  color: rgba(255, 255, 255, 0.72);

  text-decoration-color: rgba(255, 100, 100, 0.5);

}



.vs-matchup__card--legacy:hover .vs-matchup__note {

  color: rgba(255, 255, 255, 0.52);

}



.vs-matchup__card--legacy:hover .vs-matchup__badge--weak {

  color: rgba(255, 255, 255, 0.72);

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.22);

}



.vs-matchup__vs {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 4px;

}



.vs-matchup__vs span {

  font-family: 'Inter', sans-serif;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 0.12em;

  color: rgba(255, 255, 255, 0.35);

  padding: 8px 10px;

  border-radius: 999px;

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: rgba(0, 0, 0, 0.2);

}



.vs-matchup__badge {

  position: absolute;

  top: -11px;

  left: 20px;

  padding: 4px 12px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.vs-matchup__badge--win {

  color: #fff;

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

  box-shadow: 0 4px 16px rgba(191, 0, 255, 0.35);

}



.vs-matchup__badge--weak {

  color: rgba(255, 255, 255, 0.45);

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid rgba(255, 255, 255, 0.1);

  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;

}



.vs-matchup__brand {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 12px;

}



.vs-matchup__brand--dim {

  opacity: 0.65;

  transition: opacity 0.35s ease;

}



.vs-matchup__logo {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  object-fit: cover;

  box-shadow: 0 6px 20px rgba(191, 0, 255, 0.35);

}



.vs-matchup__icon-faded {

  width: 48px;

  height: 48px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  color: rgba(255, 255, 255, 0.35);

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.08);

  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;

}



.vs-matchup__brand h3 {

  font-family: 'Inter', sans-serif;

  font-size: 1.35rem;

  font-weight: 800;

  color: #fff;

  margin: 0;

}



.vs-matchup__card--sms .vs-matchup__brand h3,
.vs-matchup__card--legacy .vs-matchup__brand h3 {

  font-size: 1.1rem;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.55);

  transition: color 0.35s ease;

}



.vs-matchup__tagline {

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: rgba(255, 179, 128, 0.85);

  margin: 4px 0 0;

}



.vs-matchup__tagline--dim {

  color: rgba(255, 255, 255, 0.35);

  transition: color 0.35s ease;

}



.vs-matchup__pillars {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 14px;

}



.vs-matchup__pillar {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 106, 0, 0.15);

}



.vs-matchup__pillar strong {

  display: block;

  font-size: 13px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 2px;

}



.vs-matchup__pillar span {

  display: block;

  font-size: 12px;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.65);

}



.vs-matchup__pillar-icon {

  flex-shrink: 0;

  width: 32px;

  height: 32px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

}



.vs-matchup__pillar-icon--push {

  color: #ffc857;

  background: rgba(255, 106, 0, 0.15);

}



.vs-matchup__pillar-icon--wa {

  color: #25d366;

  background: rgba(37, 211, 102, 0.12);

}



.vs-matchup__channels-label {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: rgba(255, 255, 255, 0.38);

  margin: 0 0 8px;

  transition: color 0.35s ease;

}



.vs-matchup__channels {

  list-style: none;

  padding: 0;

  margin: 0 0 14px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 6px 10px;

}



.vs-matchup__channels li {

  display: flex;

  align-items: center;

  gap: 7px;

  font-size: 12px;

  color: rgba(255, 255, 255, 0.42);

  padding: 6px 8px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;

}



.vs-matchup__channels li i {

  width: 14px;

  text-align: center;

  font-size: 11px;

  color: rgba(255, 255, 255, 0.28);

  transition: color 0.35s ease;

}



.vs-matchup__lead {

  font-size: 15px;

  line-height: 1.55;

  color: rgba(255, 255, 255, 0.78);

  margin-bottom: 16px;

}



.vs-matchup__lead--dim {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.4);

}



.vs-matchup__list {

  list-style: none;

  padding: 0;

  margin: 0 0 16px;

}



.vs-matchup__list li {

  position: relative;

  padding-left: 18px;

  font-size: 13px;

  line-height: 1.5;

  margin-bottom: 8px;

}



.vs-matchup__list--pro li {

  color: rgba(255, 255, 255, 0.85);

}



.vs-matchup__list--pro li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

}



.vs-matchup__list--con li {

  color: rgba(255, 255, 255, 0.38);

  text-decoration: line-through;

  text-decoration-color: rgba(255, 100, 100, 0.35);

  transition: color 0.35s ease, text-decoration-color 0.35s ease;

}



.vs-matchup__list--con li::before {

  content: "−";

  position: absolute;

  left: 0;

  top: 0;

  color: rgba(248, 113, 113, 0.55);

  font-weight: 700;

  text-decoration: none;

}



.vs-matchup__cta {

  display: inline-block;

  margin-top: 4px;

  padding: 12px 20px;

  border-radius: 12px;

  font-family: 'Inter', sans-serif;

  font-weight: 700;

  font-size: 14px;

  color: #fff;

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

  box-shadow: 0 6px 24px rgba(191, 0, 255, 0.3);

  transition: transform 0.2s, box-shadow 0.2s;

}



.vs-matchup__cta:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 32px rgba(255, 106, 0, 0.3);

}



.vs-matchup__note {

  font-size: 11px;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.32);

  margin: 0;

  font-style: italic;

  transition: color 0.35s ease;

}



.vs-compare__logo {

  width: 20px;

  height: 20px;

  border-radius: 6px;

  vertical-align: -4px;

  margin-right: 6px;

  object-fit: cover;

}



.vs-pick__logo {

  width: 24px;

  height: 24px;

  border-radius: 8px;

  vertical-align: -5px;

  margin-right: 8px;

  object-fit: cover;

}



/* ── Stats ── */

.vs-stats {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin: 0 0 44px;

  scroll-margin-top: 100px;

  align-items: stretch;

}



.vs-stat {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  min-height: 120px;

  padding: 20px 14px;

  border-radius: 16px;

  text-align: center;

  background: linear-gradient(155deg, rgba(191, 0, 255, 0.12), rgba(255, 106, 0, 0.05));

  border: 1px solid rgba(191, 0, 255, 0.2);

  transition: transform 0.3s, border-color 0.3s;

}



.vs-stat:hover {

  transform: translateY(-2px);

  border-color: rgba(255, 106, 0, 0.35);

}



.vs-stat--accent {

  background: linear-gradient(155deg, rgba(255, 106, 0, 0.18), rgba(191, 0, 255, 0.12));

  border-color: rgba(255, 106, 0, 0.35);

  box-shadow: 0 8px 32px rgba(191, 0, 255, 0.15);

}



.vs-stat__num {

  font-family: 'Inter', sans-serif;

  font-size: clamp(1.6rem, 3vw, 2.1rem);

  font-weight: 800;

  color: var(--vs-push);

  line-height: 1.1;

  display: inline-block;

  transition: transform 0.15s;

}



.vs-stat--accent .vs-stat__num {

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.vs-stat__label {

  font-size: 12px;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.62);

  margin-top: 8px;

  max-width: 18em;

}



/* ── Compare table ── */

.vs-compare {

  margin-bottom: 48px;

  scroll-margin-top: 100px;

}



.vs-compare__head {

  text-align: center;

  margin-bottom: 22px;

}



.vs-compare__head h2 {

  font-family: 'Inter', sans-serif;

  font-size: 1.5rem;

  font-weight: 700;

  color: #fff;

  margin-bottom: 6px;

}



.vs-compare__head p {

  font-size: 14px;

  color: rgba(255, 255, 255, 0.45);

}



.vs-compare__table {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.vs-compare__row {

  display: grid;

  grid-template-columns: 1fr 1.15fr 1.15fr;

  gap: 10px;

  align-items: center;

  padding: 14px 16px;

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;

}



.vs-compare__row:not(.vs-compare__row--head):hover {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

}



.vs-compare__row--head {

  background: transparent;

  border-color: transparent;

  padding-bottom: 4px;

}



.vs-compare__row[data-winner="push"]:hover .vs-compare__cell--push {

  color: #ffb380;

  text-shadow: 0 0 24px rgba(255, 106, 0, 0.35);

}



.vs-compare__row[data-winner="sms"]:hover .vs-compare__cell--sms,
.vs-compare__row[data-winner="legacy"]:hover .vs-compare__cell--legacy {

  color: #e9d5ff;

  text-shadow: 0 0 24px rgba(192, 132, 252, 0.35);

}



.vs-compare__dim {

  font-family: 'Inter', sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: rgba(255, 255, 255, 0.45);

}



.vs-compare__col {

  font-family: 'Inter', sans-serif;

  font-size: 13px;

  font-weight: 700;

  display: flex;

  align-items: center;

  gap: 8px;

}



.vs-compare__col--push { color: #ffb380; }

.vs-compare__col--push i { color: #ffc857; }

.vs-compare__col--sms,
.vs-compare__col--legacy { color: rgba(255, 255, 255, 0.55); }

.vs-compare__col--sms i,
.vs-compare__col--legacy i { color: #c084fc; }



.vs-compare__cell {

  font-family: 'Inter', sans-serif;

  font-size: 14px;

  line-height: 1.45;

  color: rgba(255, 255, 255, 0.78);

  transition: color 0.25s, text-shadow 0.25s;

}



.vs-compare__cell--push { font-weight: 600; color: rgba(255, 179, 128, 0.9); }

.vs-compare__cell--sms,
.vs-compare__cell--legacy { color: rgba(255, 255, 255, 0.52); }



/* ── Deep dive tabs ── */

.vs-deep {

  margin-bottom: 48px;

  scroll-margin-top: 100px;

}



.vs-deep__title,

.vs-pick__title {

  font-family: 'Inter', sans-serif;

  font-size: 1.5rem;

  font-weight: 700;

  color: #fff;

  text-align: center;

  margin-bottom: 22px;

}



.vs-tabs__list {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  margin-bottom: 20px;

}



.vs-tabs__btn {

  padding: 11px 18px;

  border-radius: 12px;

  font-family: 'Inter', sans-serif;

  font-size: 13px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.55);

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid rgba(255, 255, 255, 0.1);

  cursor: pointer;

  transition: color 0.25s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.2s;

}



.vs-tabs__btn:hover {

  color: #fff;

  border-color: rgba(191, 0, 255, 0.3);

}



.vs-tabs__btn.is-active {

  color: #fff;

  background: linear-gradient(135deg, rgba(255, 106, 0, 0.25), rgba(191, 0, 255, 0.25));

  border-color: rgba(255, 106, 0, 0.4);

  box-shadow: 0 6px 24px rgba(191, 0, 255, 0.2);

  transform: translateY(-1px);

}



.vs-tabs__panel {

  padding: 28px 26px;

  border-radius: 20px;

  background: var(--vs-glass);

  border: 1px solid var(--vs-border);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  animation: vsPanelIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}



.vs-tabs__panel[hidden] {

  display: none;

}



@keyframes vsPanelIn {

  from { opacity: 0; transform: translateY(10px); }

  to { opacity: 1; transform: translateY(0); }

}



.vs-tabs__panel h3 {

  font-family: 'Inter', sans-serif;

  font-size: 1.15rem;

  font-weight: 700;

  color: #f0e8ff;

  margin-bottom: 14px;

}



.vs-tabs__panel p {

  font-family: 'Inter', sans-serif;

  font-size: 16px;

  line-height: 1.75;

  color: rgba(255, 255, 255, 0.72);

  margin-bottom: 14px;

}



.vs-tabs__panel a {

  color: var(--vs-push);

  text-decoration: underline;

  text-underline-offset: 3px;

}



.vs-callout {

  padding: 14px 16px;

  border-radius: 12px;

  border-left: 3px solid var(--vs-push);

  background: rgba(255, 106, 0, 0.08);

  font-size: 15px !important;

}



.vs-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: 8px;

}



.vs-tag {

  padding: 7px 14px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 600;

  color: #e8d4ff;

  background: rgba(191, 0, 255, 0.14);

  border: 1px solid rgba(191, 0, 255, 0.28);

}



.vs-tag--warm {

  color: #ffd4b3;

  background: rgba(255, 106, 0, 0.12);

  border-color: rgba(255, 106, 0, 0.3);

}



/* ── Pick your channel ── */

.vs-pick {

  scroll-margin-top: 100px;

}



.vs-pick__grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.vs-pick__block {

  padding: 26px 22px;

  border-radius: 20px;

  background: var(--vs-glass);

  border: 1px solid var(--vs-border);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

}



.vs-pick__block--push {

  border-color: rgba(255, 106, 0, 0.3);

  box-shadow: inset 0 0 60px rgba(191, 0, 255, 0.06);

}



.vs-pick__block h3 {

  font-family: 'Inter', sans-serif;

  font-size: 1.05rem;

  font-weight: 700;

  color: #fff;

  margin-bottom: 14px;

  display: flex;

  align-items: center;

  gap: 10px;

}



.vs-pick__block--push h3 i { color: #ffc857; }

.vs-pick__block--sms,
.vs-pick__block--legacy {

  opacity: 0.55;

  border-style: dashed;

  border-color: rgba(255, 255, 255, 0.1);

  transition:
    opacity 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;

}



.vs-pick__block--legacy:hover,
.vs-pick__block--sms:hover {

  opacity: 1;

  background: rgba(255, 255, 255, 0.07);

  border-color: rgba(255, 255, 255, 0.28);

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);

}



.vs-pick__block--sms h3,
.vs-pick__block--legacy h3 {

  color: rgba(255, 255, 255, 0.5);

  transition: color 0.35s ease;

}



.vs-pick__block--legacy:hover h3,
.vs-pick__block--sms:hover h3 {

  color: rgba(255, 255, 255, 0.92);

}



.vs-pick__block--sms h3 i,
.vs-pick__block--legacy h3 i {

  color: rgba(192, 132, 252, 0.45);

  transition: color 0.35s ease;

}



.vs-pick__block--legacy:hover h3 i,
.vs-pick__block--sms:hover h3 i {

  color: rgba(192, 132, 252, 0.85);

}



.vs-pick__block--sms li,
.vs-pick__block--legacy li {

  color: rgba(255, 255, 255, 0.45);

  transition: color 0.35s ease;

}



.vs-pick__block--legacy:hover li,
.vs-pick__block--sms:hover li {

  color: rgba(255, 255, 255, 0.78);

}



.vs-pick__note {

  font-size: 12px;

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.35);

  margin: 0;

  font-style: italic;

  transition: color 0.35s ease;

}



.vs-pick__block--legacy:hover .vs-pick__note,
.vs-pick__block--sms:hover .vs-pick__note {

  color: rgba(255, 255, 255, 0.52);

}



.vs-pick__block ul {

  padding-left: 1.1rem;

  margin-bottom: 18px;

}



.vs-pick__block li {

  font-family: 'Inter', sans-serif;

  font-size: 15px;

  line-height: 1.65;

  color: rgba(255, 255, 255, 0.68);

  margin-bottom: 8px;

}



.vs-pick__cta {

  display: inline-block;

  padding: 12px 22px;

  border-radius: 12px;

  font-family: 'Inter', sans-serif;

  font-weight: 700;

  font-size: 14px;

  color: #fff;

  background: linear-gradient(135deg, #ff6a00, #bf00ff);

  box-shadow: 0 6px 24px rgba(191, 0, 255, 0.3);

  transition: transform 0.2s, box-shadow 0.2s;

}



.vs-pick__cta:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 32px rgba(255, 106, 0, 0.3);

}



/* ── Responsive ── */

@media (max-width: 720px) {

  .vs-duel {

    grid-template-columns: 1fr;

    grid-template-rows: auto auto auto;

  }



  .vs-duel__beam {

    width: 100%;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--vs-beam), #ff6a00, var(--vs-beam), transparent);

  }



  .vs-pitch,

  .vs-pick__grid {

    grid-template-columns: 1fr;

  }



  .vs-matchup__grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }



  .vs-matchup__card--sms,
  .vs-matchup__card--legacy {

    transform: none;

    opacity: 0.8;

  }



  .vs-matchup__channels {

    grid-template-columns: 1fr;

  }



  .vs-matchup__vs {

    padding: 4px 0;

  }



  .vs-stats {

    grid-template-columns: 1fr;

  }



  .vs-compare__row,

  .vs-compare__row--head {

    grid-template-columns: 1fr;

    gap: 6px;

  }



  .vs-compare__row--head .vs-compare__dim {

    display: none;

  }



  .vs-compare__dim {

    padding-bottom: 6px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  }



  .vs-rail-wrap {

    padding: 0;

  }



  .vs-rail {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .vs-rail__link {

    min-width: 0;

    max-width: none;

  }

}



@media (prefers-reduced-motion: reduce) {

  .vs-duel__beam,

  .vs-tabs__panel {

    animation: none;

  }

}