/* Voice translator landings (2026-11-12): /voice-translator, /es/traductor-de-voz and the first screen of the Russian
   voice page. Loaded after styles.css and niche.css, only on these three pages:
     <link rel="stylesheet" href="/landing/niche.css?v=3">
     <link rel="stylesheet" href="/landing/voice.css?v=1">
   The desk picture reuses .desk, .desk-phone, .desk-mid, .desk-tag and .voice from niche.css (the /hotels scene).
   New here: the people and the props of an apartment viewing, the rings, the account line under the button and
   the order of the first screen on phones (heading, button, account line, picture, subtitle, chips). */

/* ---------- first screen ---------- */
.vx-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:center}
.vx-hero .hero-copy>.cta-row{margin-top:2px}
.vx-account{margin:14px 0 0;font-size:14.5px;line-height:1.45;color:var(--w-55);text-wrap:balance}
.vx-hero .facts{margin-top:20px}

/* ---------- desk picture: an apartment viewing seen from above ---------- */
.vx-hero-scene .desk{margin-top:0}
.vx-desk .panes.face .pane:first-child{transform:rotate(180deg)}
.vx-arms-them{--sleeve:#3d5a80;--cuff:#dfe6ee;--skin:#f1d2b8;--skin-dk:#dcb394}
.vx-arms-me{--sleeve:#8a5a44;--cuff:#efe5da;--skin:#d6a27c;--skin-dk:#bf8b65}
.vx-voice{--vs:80%}
.vx-voice i{border-width:1.5px;border-color:rgba(54,204,255,.5)}
/* the chip on the split line says the AI voice is on; a speaker sign instead of the plain dot */
.vx-desk .desk-mid{font-size:max(9px,5.2cqw);padding:2.2cqw 5cqw 2.2cqw 3.8cqw;gap:1.8cqw}
.vx-spk{flex:0 0 auto;width:max(11px,6.2cqw);height:max(11px,6.2cqw);fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vx-spk .vx-spk-body{fill:var(--green);stroke:none}

/* phones: heading, button and account line first, then the picture, the subtitle and the chips */
@media (max-width:900px){
  .vx-hero .hero-copy>h1{order:1}
  .vx-hero .hero-copy>.cta-row,.vx-hero .hero-copy>.vx-account{order:2}
  .vx-hero .hero-scene{order:3;width:100%;max-width:460px;margin:4px auto 6px}
  .vx-hero .hero-copy>.sub{order:4;margin-bottom:0}
  .vx-hero .hero-copy>.facts{order:5;margin-top:4px}
  .vx-hero .hero-copy>.cta-row{margin-top:0;align-self:stretch}
  .vx-hero .hero-copy>.vx-account{margin:-6px 0 0;align-self:stretch;font-size:14px;text-align:center}
}

/* ---------- sections below ---------- */
.vx-steps,.vx-uses{margin-top:28px}
.vx-cta{margin-top:30px}
.s-modes .mode-copy .vx-link{margin:0 0 22px;font-size:.95rem;color:var(--w-55)}
.vx-tips{grid-template-columns:repeat(2,minmax(0,1fr))}
/* the safety block follows the white pricing block here (on the main page it follows a dark one) */
.s-white+.s-trust{padding-top:var(--sec)}
@media (max-width:900px){.vx-tips{grid-template-columns:1fr}}