/* ------------------------------------------------------------------
   rocode-vs-bloxbot.css: page-only rules for /rocode-vs-bloxbot
   (2026-10-15, v2). Loaded after /seo-landing.css and /game-maker.css
   (<body class="sl gm vbb">): the hero wall, the chip lists, the card
   tags and the closing loop come from game-maker.css as they are.
   Everything here is prefixed .vbb-.
   Sections: hero (wall of six loops, versus tiles, short answer), four differences,
   feature loops, what each builds, setup (two step cards + walkthrough, hidden on phones),
   pricing, verdict (+ a call to action), FAQ, start.
   ------------------------------------------------------------------ */

/* ---------- hero: keyword headline with the domain under it, then the wall, then the versus tiles ---------- */
.vbb-hero h1 { max-width: none; }
.vbb-hero .sl-mark { margin: 0 .04em; }
.vbb-h1-domain {
  display: block; margin-top: .7em; font-size: .36em; font-weight: 500; font-style: normal; line-height: 1.2;
  letter-spacing: -.01em; color: #8f84a3;
}
.vbb-hero .sl-lead { max-width: 60ch; margin-top: 22px; }
.vbb-wall-wrap { margin-top: 44px; }
/* the versus tiles sit right under the wall's caption, a little narrower than the wall */
.vbb-hero .vbb-vs { max-width: 980px; margin-top: 64px; }
.vbb-hero .sl-vs-tile { padding: 32px 28px 28px; }
.vbb-hero .sl-vs-facts li { white-space: nowrap; }
.vbb-hero details.more { width: 100%; max-width: 760px; margin: 24px auto 0; text-align: left; }
.vbb-hero .sl-answer { width: 100%; text-align: left; }
.vbb-hero .sl-answer > p.sl-answer-date { margin-top: 8px; font-size: 13px; color: var(--rc-text-3); }
/* the two tiles stay side by side down to phones (seo-landing.css stacks them at 760 and below) */
@media (max-width: 760px) {
  .vbb-hero .sl-vs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); max-width: none; }
  .vbb-hero .sl-vs-badge { justify-self: auto; width: 52px; height: 52px; margin: 0 -16px; font-size: 15px; }
  .vbb-hero .sl-vs-tile { padding: 28px 20px 24px; }
  .vbb-hero .sl-vs-facts li { white-space: normal; }
}
@media (max-width: 640px) {
  .vbb-wall-wrap { margin-top: 32px; }
  .vbb-hero .vbb-vs { margin-top: 40px; }
  .vbb-hero .sl-vs-badge { width: 40px; height: 40px; margin: 0 -12px; font-size: 13px; }
  .vbb-hero .sl-vs-tile { gap: 4px; padding: 18px 10px 16px; border-radius: 18px; }
  .vbb-hero .sl-vs-logo { width: 40px; height: 40px; margin-bottom: 4px; border-radius: 12px; }
  .vbb-hero .sl-vs-logo img { width: 22px; height: 22px; }
  .vbb-hero .sl-vs-logo svg { width: 20px; height: 20px; }
  .vbb-hero .sl-vs-name { font-size: 22px; }
  .vbb-hero .sl-vs-sub { font-size: 12.5px; line-height: 1.4; }
  /* the facts read as plain lines on a phone, not pills */
  .vbb-hero .sl-vs-facts { display: grid; justify-content: center; justify-items: start; gap: 4px; margin-top: 10px; }
  .vbb-hero .sl-vs-facts li {
    gap: 5px; min-height: 0; padding: 2px 0; border: 0; border-radius: 0; background: none;
    font-size: 12.5px; line-height: 1.35; white-space: normal;
  }
  .vbb-hero .sl-vs-facts svg { width: 14px; height: 14px; }
}

/* ---------- the four differences: big answers, the other tool's in a quieter white ---------- */
.vbb-pairs .sl-pair-big { font-size: 24px; }
.vbb-pairs .sl-pair-cell:not(.is-rocode) .sl-pair-big { color: #d9d0e8; }
@media (max-width: 420px) {
  /* phones: the two answers stay side by side (the copy is short enough) */
  .vbb-pairs .sl-pair-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .vbb-pairs .sl-pair-cell { padding: 12px 12px 14px; }
  .vbb-pairs .sl-pair-who { letter-spacing: .1em; }
  .vbb-pairs .sl-pair-big { font-size: 19px; }
  .vbb-pairs .sl-pair-cell p { font-size: 13.5px; }
}

/* ---------- card heads: the tool's icon beside its name (what it builds, setup, verdict) ---------- */
.vbb-duo-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.vbb-duo-head .sl-duo-title { margin: 0; }
.vbb-ico {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; color: #e6def3;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.vbb-ico img { display: block; width: 22px; height: 22px; }
.is-rocode .vbb-ico { background: rgba(139, 92, 246, .15); border-color: rgba(167, 139, 250, .45); box-shadow: 0 0 16px 2px rgba(139, 92, 246, .18); }

/* ---------- what each one builds: two cards of chips (game-maker.css .gm-chiplist), each list with a label ---------- */
.vbb-duo { max-width: 1040px; }
/* the shared .gm-duo goes 2fr / 1fr on desktop and stacks below 1100 for its own page: here the two
   cards are equal and side by side from 861, the same breakpoint as .sl-duo in setup and verdict */
@media (min-width: 861px) {
  .vbb-duo.gm-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1040px; }
  .vbb-duo .gm-chiplist { grid-template-columns: minmax(0, 1fr); }
}
.vbb-chip-label {
  margin: 0 0 10px; font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; color: #8f84a3;
}
.is-rocode .vbb-chip-label:first-of-type { color: #c4b5fd; }
.vbb-duo .gm-chiplist + .vbb-chip-label { margin-top: 22px; }
.vbb-duo .gm-chiplist li { min-height: 44px; }
/* the other tool's claims: a quiet tick, not RoCode's green one */
.vbb-chips-them li::before { color: #d9d0e8; background: rgba(255, 255, 255, .08); }
/* what we did not see: a question mark and a dashed edge */
.vbb-chips-unknown li { border-style: dashed; border-color: rgba(233, 226, 250, .16); background: transparent; color: #b7abc8; }
.vbb-chips-unknown li::before { content: "?"; color: #cfc3e0; background: rgba(255, 255, 255, .06); }
.vbb-duo + .v3-note { margin-top: 28px; }
@media (min-width: 641px) and (max-width: 860px) {
  .vbb-duo.gm-duo { max-width: 640px; }
  .vbb-duo .gm-chiplist { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- feature loops: three cards in a row down to tablet width (no orphan card) ---------- */
@media (min-width: 641px) { .vbb-feats.exg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 641px) and (max-width: 900px) {
  body.sl .vbb-feats .exg-body { padding: 14px 14px 16px; }
  body.sl .vbb-feats .exg-prompt { font-size: 13px; }
  body.gm .vbb-feats .exg-title { padding-right: 0; margin-top: 30px; }
  body.gm .vbb-feats .exg-body .gm-card-tag { top: 12px; right: auto; left: 14px; }
}
.vbb-feats .exg-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 90px -50px rgba(124, 58, 237, .5); }

/* ---------- setup: two cards of three numbered steps (seo-landing.css .sc-steps), then the walkthrough ---------- */
.vbb-setup .sl-duo-card { display: flex; flex-direction: column; }
.sl .vbb-steps { gap: 18px; }
.sl .vbb-steps li { gap: 14px; }
.vbb-steps h4 { margin: 5px 0 3px; font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: #f6f1ff; }
.sl .vbb-steps p { font-size: 14.5px; line-height: 1.5; }
.sl .vbb-steps p a { color: var(--rc-text); }
.vbb-setup .sl-duo-card:not(.is-rocode) .sc-num { color: #d9d0e8; background: rgba(255, 255, 255, .06); border-color: rgba(233, 226, 250, .2); }
.vbb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 22px 0 0; list-style: none; }
.vbb-tags li {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px;
  border: 1px solid rgba(233, 226, 250, .14); background: rgba(255, 255, 255, .03);
  font-size: 13px; font-weight: 500; line-height: 1.2; color: #cfc3e0;
}
.is-rocode .vbb-tags li { border-color: rgba(167, 139, 250, .3); background: rgba(139, 92, 246, .1); color: #e6def3; }
.vbb-tags li.is-unknown { border-style: dashed; background: transparent; color: #9d92b1; }
.vbb-walk { position: relative; max-width: 880px; margin: 56px auto 0; }
.vbb-walk::before {
  content: ""; position: absolute; inset: -10% -6% 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(124, 58, 237, .10), rgba(124, 58, 237, .03) 55%, transparent 75%);
}
.vbb-walk .sl-frame > video { object-fit: contain; background: #0d0a14; }
/* the walkthrough's glow stays inside the page */
body.sl main > #connect { overflow-x: clip; }
@media (max-width: 768px) { .vbb-walk::before { left: 0; right: 0; } }
@media (max-width: 640px) {
  /* on a phone the chat inside the clip renders too small to read; the two step cards carry the steps */
  .vbb-walk { display: none; }
  .vbb-steps h4 { font-size: 16px; }
  .sl .vbb-steps p { font-size: 14px; }
}

/* ---------- pricing: two price cards ---------- */
.vbb-price .mb-card { padding: 26px 24px 24px; }
.vbb-price .mb-price { font-size: 44px; }
.vbb-price .mb-sub { margin-top: 4px; }
.vbb-price .mb-card:not(.is-rocode) .mb-ico { color: #cfc3e0; background: rgba(255, 255, 255, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.sl .vbb-price-foot { max-width: 56ch; margin-left: auto; margin-right: auto; text-wrap: balance; }
.sl .vbb-price-foot + .vbb-price-link { margin-top: 10px; }
@media (max-width: 640px) { .vbb-price .mb-price { font-size: 40px; } }

/* ---------- verdict: two cards, then the call to action ---------- */
.vbb-verdict .sl-ticks { gap: 14px; }
.vbb-nw { white-space: nowrap; }
.vbb-cta { margin-top: 40px; }
@media (max-width: 640px) { .vbb-cta { margin-top: 28px; } }

/* ---------- lists inside the expanders ---------- */
body.sl details.more .vs-list { margin-top: 0; }
body.sl details.more .vs-list li { font-size: 15px; color: var(--rc-text-2); }
body.sl details.more .more-title { margin-top: 4px; }
body.sl details.more .vs-list + .more-title { margin-top: 20px; }
body.sl details.more .compare-card { border-top: 0; }
body.sl details.more .more-body > p + .sl-sources { margin-top: 12px; }
.vbb-more-note { margin-top: 14px; font-size: 13.5px !important; color: var(--rc-text-3) !important; }

/* ---------- FAQ footer: related pages as pills ---------- */
body.sl main > #faq > .container > details.more { max-width: 880px; }
.vbb-related { max-width: 880px; margin: 40px auto 0; text-align: center; }
.vbb-related-label { margin: 0 0 14px; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; color: #8f84a3; }

/* ---------- closing cards: the prompt is two lines, so its card is wider (game-maker.css pins the game card) ---------- */
.vbb-fa-tag { left: 10px; right: auto; top: 10px; }
.vbb-fa-ico { flex: none; color: #a78bfa; }
.vbb-final .fa-prompt-text { font-size: 14.5px; }