/* ==========================================================================
   nuvio.ro/vinde-cursuri — selling courses. Loaded only by vinde-cursuri.html
   and en/sell-courses.html, after nuvio.css and business.css, whose tokens and
   layouts (hero grid, three-across steps, picture beside a register, the
   icon row) it reuses. What is here: the phone frame around the real course
   screenshots, and the round icon tiles of the steps and formats.

   The phone is the same object as business.css's drawn one: an ink body
   (#212B32, 31px corners), the screen inset 6px with 25px corners, and the
   flat shadow 8px below. The screenshot carries its own status, so no notch.
   ========================================================================== */

.vc-phone {
  margin: 0;
  width: 100%;
  max-width: 16.5rem;
  justify-self: center;
  padding: 6px;
  border-radius: 31px;
  background: #212b32;
  box-shadow: 0 8px 0 rgba(33, 43, 50, 0.13);
}
.vc-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border-radius: 25px;
  background: var(--paper-2);
}
.vc-phone--hero {
  max-width: 17.5rem;
}

/* Hero: the phone sits where business.css puts its drawing. */
.vc-hero h1 {
  max-width: 17ch;
}
@media (min-width: 1000px) {
  .vc-hero .bz-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  }
}

/* ── Icon tiles (Ionicons outline, 512 viewBox) ────────────────────────── */
.vc-ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blush);
  color: var(--ink);
  margin-bottom: 14px;
}
.vc-ic svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: currentColor;
}
.vc-ic svg [fill="none"] {
  fill: none;
}
/* The icon row (business.css .bz-keep) with Ionicons instead of drawn glyphs. */
.bz-keep__ic svg[viewBox="0 0 512 512"] {
  stroke-width: 32;
  fill: currentColor;
}
.bz-keep__ic svg[viewBox="0 0 512 512"] [fill="none"] {
  fill: none;
}

/* ── Picture beside a register, phone-sized ────────────────────────────── */
@media (min-width: 900px) {
  .vc-split {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  }
  .vc-split--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  }
  .vc-split--flip .vc-phone {
    order: 2;
  }
}
.vc-split {
  margin-top: 44px;
}

/* The fee line under the money register, as on the features page. */
.vc-fee {
  margin-top: 26px;
  font-size: 0.9375rem;
}
.vc-go {
  margin-top: 26px;
}