/* ------------------------------------------------------------------
   rocode-vs-rostudio.css: page-only rules for /rocode-vs-rostudio
   (2026-10-15). Started as a copy of vs-roassistant.css with the prefix
   renamed, so neither page depends on the other's file. Loaded after
   /seo-landing.css (the homepage look, body.sl) and /game-maker.css,
   whose hero wall (.gm-wall, .gm-tile) and chat bubbles (.gm-chat,
   .gm-msg) this page reuses as they are. Everything here is .vrs-.
   Sections: hero (video wall with the versus tiles in front), four
   differences (13 rows in an expander), describe vs template (loop
   beside chat bubbles), connect (two flows side by side, walkthrough),
   pricing, verdict, FAQ (sources + related), start.
   ------------------------------------------------------------------ */

/* ---------- hero: keyword headline with the domain under it, one-line lead ---------- */
.vrs-hero h1 { max-width: none; }
.vrs-hero .sl-mark { margin: 0 .04em; }
.vrs-h1-domain {
  display: block; margin-top: .95em; font-size: .36em; font-weight: 500; font-style: normal; line-height: 1.2;
  letter-spacing: -.01em; color: #8f84a3;
}
.vrs-hero .sl-lead { max-width: 70ch; margin-top: 24px; }
.vrs-hero .sl-answer, .vrs-hero details.more { width: 100%; text-align: left; }
.vrs-hero .sl-answer { margin-top: 48px; }
.vrs-hero .sl-answer > p:not(.sl-answer-label):not(.sl-answer-date) { font-size: 16px; line-height: 1.6; }
.vrs-hero .sl-answer > p.sl-answer-date { font-size: 13px; }
.vrs-hero details.more { max-width: 760px; margin: 24px auto 0; }

/* the stage: game-maker.css's tilted wall of six loops, with the versus tiles over its faded bottom row */
.vrs-stage { position: relative; width: 100%; max-width: 1080px; margin: 40px auto 0; }
.vrs-stage .gm-wall-wrap { margin: 0 auto; padding-bottom: 0; }
.vrs-vs.sl-vs { position: relative; z-index: 2; max-width: 960px; margin: -128px auto 0; }
.vrs-vs .sl-vs-tile { padding: 30px 28px 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 40px 80px -30px rgba(0, 0, 0, .95); }
.vrs-vs .sl-vs-tile.is-rocode {
  background: linear-gradient(180deg, #2a1c47, #15101f 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 60px 120px -50px rgba(124, 58, 237, .6), 0 40px 80px -30px rgba(0, 0, 0, .95);
}
.vrs-vs .sl-vs-logo { width: 56px; height: 56px; margin-bottom: 8px; border-radius: 16px; }
.vrs-vs .sl-vs-logo img { width: 30px; height: 30px; }
.vrs-vs .sl-vs-facts { flex-direction: column; align-items: center; }
.vrs-vs .sl-vs-facts li { white-space: nowrap; }
.vrs-hero .gm-wall-cap { margin-top: 20px; }
@media (max-width: 900px) { .vrs-vs.sl-vs { margin-top: -96px; } }
/* phones: the two tiles side by side, the badge between their icons, the facts as a short stacked list */
@media (max-width: 760px) {
  .vrs-vs.sl-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin-top: -56px; }
  .vrs-vs .sl-vs-badge {
    position: absolute; left: 50%; top: 30px; translate: -50% 0; margin: 0; width: 44px; height: 44px; font-size: 14px;
    box-shadow: 0 0 0 4px #0c0b10, 0 0 30px -6px rgba(139, 92, 246, .7);
  }
  .vrs-vs .sl-vs-tile { padding: 22px 12px 14px; gap: 4px; border-radius: 18px; }
  .vrs-vs .sl-vs-logo { width: 44px; height: 44px; margin-bottom: 6px; border-radius: 13px; }
  .vrs-vs .sl-vs-logo img { width: 24px; height: 24px; }
  .vrs-vs .sl-vs-logo svg { width: 22px; height: 22px; }
  .vrs-vs .sl-vs-name { font-size: 21px; }
  .vrs-vs .sl-vs-sub { font-size: 12.5px; line-height: 1.4; }
  .vrs-vs .sl-vs-facts { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 10px; width: 100%; }
  .vrs-vs .sl-vs-facts li { align-items: flex-start; gap: 6px; min-height: 0; padding: 7px 8px; border-radius: 9px; font-size: 12.5px; line-height: 1.35; white-space: normal; }
  .vrs-vs .sl-vs-facts svg { width: 14px; height: 14px; margin-top: 1px; }
}
/* below 540px some facts wrap to two lines and others do not, so every chip takes the two-line height and the
   three rows line up across both tiles */
@media (max-width: 539px) {
  .vrs-vs .sl-vs-facts li { align-items: center; min-height: 50px; min-height: calc(2lh + 16px); }
  .vrs-vs .sl-vs-facts svg { margin-top: 0; }
}
@media (max-width: 640px) {
  .vrs-stage { margin-top: 32px; }
  .vrs-stage .gm-wall-wrap { margin-top: 0; padding-bottom: 0; }
  .vrs-hero .sl-answer { margin-top: 36px; }
}

/* ---------- the four differences: a touch more air in the big answers ---------- */
.vrs-pairs .sl-pair-big { font-size: 24px; }
.vrs-pairs .sl-pair-cell:not(.is-rocode) .sl-pair-big { color: #d9d0e8; }
/* phones: the two answers stack, so each reads as two or three full lines instead of a narrow column */
@media (max-width: 480px) {
  .vrs-pairs .sl-pair { padding: 16px; }
  .vrs-pairs .sl-pair-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vrs-pairs .sl-pair-cell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px; padding: 12px 14px 14px; }
  .vrs-pairs .sl-pair-who { margin: 0; }
  .vrs-pairs .sl-pair-big { margin: 0; font-size: 21px; }
  .vrs-pairs .sl-pair-cell p { grid-column: 1 / -1; margin-top: 6px; font-size: 13.5px; }
}

/* ---------- describe vs template: the sword loop beside RoStudio's templates and RoCode's chat ---------- */
.vrs-describe .v3-stage.sl-stage { max-width: none; }
.vrs-chat { display: flex; flex-direction: column; }
.vrs-who {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: #8f84a3;
}
.vrs-who.is-rocode { justify-content: flex-end; color: #c4b5fd; }
.vrs-who-ico {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px;
  color: #cfc3e0; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.vrs-who.is-rocode .vrs-who-ico { background: rgba(139, 92, 246, .16); border-color: rgba(167, 139, 250, .4); }
.vrs-who-ico img { display: block; width: 16px; height: 16px; }
.vrs-tpl { margin: 0 0 30px; padding: 18px 18px 20px; border: 1px dashed rgba(233, 226, 250, .16); border-radius: 18px; background: rgba(255, 255, 255, .015); }
.vrs-tpl-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vrs-tpl-list li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: #15101f;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: #cfc3e0;
}
.vrs-tpl-list svg { flex: none; color: #8f84a3; }
/* no one- or two-word last lines in the prompts: game-maker.css's text-wrap: pretty only catches a lone last word,
   so the long bubbles break at their comma (the <br> also lets the bubble shrink to its lines), the first one only
   on phones, and the composer, which is full width, balances its lines */
.vrs-chat .gm-msg { text-wrap: pretty; }
.vrs-chat .gm-msg.is-typing .gm-msg-text { text-wrap: balance; }
@media (min-width: 481px) { .vrs-chat br.vrs-br-sm { display: none; } }
@media (max-width: 900px) { .vrs-chat { width: 100%; max-width: 600px; margin: 0 auto; } }
@media (max-width: 480px) {
  .vrs-tpl { margin-bottom: 24px; padding: 14px 14px 16px; }
  .vrs-tpl-list li { min-height: 36px; padding: 0 11px 0 10px; font-size: 13.5px; }
}

/* ---------- how each connects: the two flows side by side, then the walkthrough ---------- */
.vrs-conn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 1040px; margin: 0 auto; }
.vrs-conn-card {
  min-width: 0; padding: 24px 24px 26px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px;
  background: #15101f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.vrs-conn-card.is-rocode {
  border-color: rgba(167, 139, 250, .3); background: linear-gradient(180deg, rgba(139, 92, 246, .12), #15101f 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 40px 90px -40px rgba(124, 58, 237, .55);
}
.vrs-conn-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: #f6f1ff; }
.vrs-conn-flow { display: grid; }
.vrs-conn-node {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 1px 14px; padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 16px; background: rgba(255, 255, 255, .025);
}
.vrs-conn-node.is-place { border-color: rgba(167, 139, 250, .32); background: rgba(139, 92, 246, .09); }
.vrs-conn-ico {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #e6def3;
  background: linear-gradient(180deg, rgba(139, 92, 246, .28), rgba(91, 33, 182, .12)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.vrs-conn-card:not(.is-rocode) .vrs-conn-ico { color: #cfc3e0; background: rgba(255, 255, 255, .05); }
.vrs-conn-title { grid-column: 2; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #f6f1ff; }
.vrs-conn-text { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.4; color: #8f84a3; }
.vrs-conn-link { position: relative; display: flex; align-items: center; height: 40px; padding-left: 64px; }
.vrs-conn-link::before { content: ""; position: absolute; left: 39px; top: 4px; bottom: 4px; border-left: 1px dashed rgba(167, 139, 250, .45); }
.vrs-conn-link span { padding: 2px 8px; border-radius: 6px; background: rgba(139, 92, 246, .1); font-size: 12px; line-height: 1.4; color: #b7abc8; }
.vrs-conn-card:not(.is-rocode) .vrs-conn-link::before { border-left-color: rgba(233, 226, 250, .22); }
.vrs-conn-card:not(.is-rocode) .vrs-conn-link span { background: rgba(255, 255, 255, .05); }
.vrs-conn-link.is-unknown span { border: 1px dashed rgba(233, 226, 250, .2); background: transparent; color: #9d92b1; }
.vrs-walk { position: relative; max-width: 920px; margin: 56px auto 0; }
.vrs-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%);
}
.vrs-walk .sl-frame > video { object-fit: contain; background: #0d0a14; }
/* the walkthrough's glow stays inside the page (it pushed the page wider at 390 and 1024) */
body.sl main > #connect { overflow-x: clip; }
@media (max-width: 768px) { .vrs-walk::before { left: 0; right: 0; } }
/* the two flows stay side by side down to 721px (below that 'Scripts, hierarchy, properties' wraps and the rows
   stop lining up); once they stack, the walkthrough takes the same 560px column */
@media (max-width: 720px) {
  .vrs-conn { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 16px; }
  .vrs-walk { max-width: 560px; }
}
/* phones: the walkthrough moves into the 'Watch the setup' expander, which sits flush on top of the next one */
.vrs-walk-more { display: none; }
.vrs-walk-more .sl-cap { margin-top: 12px; }
@media (max-width: 640px) {
  .vrs-walk { display: none; }
  body.sl main > #connect > .container > details.vrs-walk-more { display: block; }
  body.sl main > #connect > .container > .vrs-walk + details.more { margin-top: 0; border-top: 0; }
  .vrs-conn-card { padding: 18px 16px 20px; border-radius: 20px; }
  .vrs-conn-head { margin-bottom: 16px; font-size: 17px; }
  .vrs-conn-node { padding: 11px 14px; }
  .vrs-conn-link::before { left: 37px; }
  .vrs-conn-link { padding-left: 60px; height: 36px; }
}

/* ---------- pricing: two price cards ---------- */
/* each card is a column, so RoCode's button and RoStudio's source line both sit on the bottom edge, level with each other */
.vrs-price .mb-card { display: flex; flex-direction: column; padding: 26px 24px 24px; }
.vrs-price .mb-price { font-size: 44px; }
.vrs-price .mb-sub { margin-top: 4px; }
.vrs-price .mb-list { margin: 18px 0 22px; }
.vrs-price .vrs-plan-btn { margin-top: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 14px 36px -12px rgba(124, 58, 237, .75); }
.vrs-plan-src {
  display: flex; align-items: center; justify-content: center; min-height: 44px; margin: auto 0 0;
  text-align: center; font-size: 13px; line-height: 1.45; color: var(--rc-text-3); text-wrap: balance;
}
.vrs-plan-src a { color: var(--rc-text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(167, 139, 250, .5); }
.vrs-plan-src a:hover { color: var(--rc-text); }
/* the plan ladder: every monthly price on one scale (Ultra, $29.99, is the full bar); the first paid plan is lit */
.vrs-ladder { display: grid; gap: 11px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .06); list-style: none; }
.vrs-ladder li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; color: #9d92b1; }
.vrs-ladder .gm-plan-bar { margin-top: 0; }
.vrs-ladder-price { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: #cfc3e0; }
.vrs-ladder li.is-first { color: #f6f1ff; font-weight: 500; }
.vrs-ladder li.is-first .vrs-ladder-price { color: #f6f1ff; }
.vrs-ladder li:not(.is-first) .gm-plan-bar > span { background: linear-gradient(90deg, rgba(109, 40, 217, .55), rgba(167, 139, 250, .55)); }
.vrs-price .mb-card:not(.is-rocode) .vrs-ladder .gm-plan-bar > span { background: rgba(207, 195, 224, .35); }
.vrs-price .mb-card:not(.is-rocode) .vrs-ladder li.is-first .gm-plan-bar > span { background: #cfc3e0; }
/* once the cards narrow (below 880px), the plan name goes under the price instead of breaking 'Rostudio Starter' */
@media (max-width: 880px) { .vrs-price .mb-price span { display: block; margin: 8px 0 0; } }
@media (max-width: 640px) {
  .vrs-price .mb-card { padding: 22px 18px 20px; }
  .vrs-price .mb-price { font-size: 40px; }
  .vrs-ladder li { grid-template-columns: 108px minmax(0, 1fr) 52px; gap: 10px; font-size: 13.5px; }
}
.vrs-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); }

/* ---------- verdict: a head row with the tool's icon ---------- */
.vrs-duo-head { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.vrs-duo-head .sl-duo-title { margin: 0; }
.vrs-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);
}
.vrs-ico img { display: block; width: 22px; height: 22px; }
.is-rocode .vrs-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); }
.vrs-picks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vrs-picks > li {
  position: relative; display: grid; gap: 2px; padding: 12px 14px 13px 48px;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; background: rgba(255, 255, 255, .025);
}
.vrs-picks > li::before {
  content: "\2713"; position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--rc-font); font-size: 11px; font-weight: 800; line-height: 1; color: #cfc3e0; background: rgba(255, 255, 255, .08);
}
.vrs-picks.is-rocode > li { border-color: rgba(167, 139, 250, .18); background: rgba(139, 92, 246, .07); }
.vrs-picks.is-rocode > li::before { color: #34d399; background: rgba(52, 211, 153, .16); }
.vrs-picks strong { font-size: 15px; font-weight: 600; line-height: 1.4; color: #f6f1ff; }
.vrs-picks > li > span { font-size: 13.5px; line-height: 1.45; color: #a99dbd; text-wrap: pretty; }
@media (max-width: 480px) { .vrs-picks > li { padding: 11px 12px 12px 44px; } .vrs-picks > li::before { left: 12px; top: 12px; } }
.vrs-nw { white-space: nowrap; }

/* ---------- 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; }
.vrs-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; }
.vrs-related { max-width: 880px; margin: 40px auto 0; text-align: center; }
.vrs-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 and the screen card sits lower ---------- */
.vrs-fa-shot { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--rc-line); background: var(--rc-bg-sunken); }
.vrs-fa-shot { background-position: center; background-size: cover; background-repeat: no-repeat; }
.vrs-fa-shot > video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.vrs-fa-shot .sl-art-tag { left: 10px; right: auto; top: 10px; }
.vrs-fa-ico { flex: none; color: #a78bfa; }
.vrs-final .fa-prompt-text { font-size: 14.5px; }
@media (min-width: 1024px) {
  .vrs-final .fa-prompt { width: 66%; }
  .sl .vrs-final .final-art .fa-game { position: absolute; top: 96px; right: 0; }
}

/* ---------- phones: the wall's tile names one step larger than game-maker.css's 10.5px ---------- */
@media (max-width: 640px) { .vrs-wall-wrap .gm-tile-name { height: 22px; font-size: 11.5px; } }