/* ==========================================================================
   nuvio.ro — features v2 (2026-10-06)

   The additions for calendar sync, client passes, reviews, the monthly AI
   report, prices by day and the Business teaser: their diagrams, the
   "new in Nuvio" row on the home pages and the team band on the pricing
   pages. Loaded after nuvio.css by the pages that use it, never on its own.

   Motion follows nuvio.css: the resting frame is the finished drawing, and
   only once the script has run (no .no-js) and motion is allowed does a
   diagram start blank and draw itself when its .rise arrives (.is-on).
   ========================================================================== */

/* ── Labels inside the diagrams ──────────────────────────────────────── */
.vis .v2-m {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-variation-settings: "wdth" 78;
  font-weight: 600;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vis .v2-s {
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 600;
}

/* A shorter scene (prices by day). */
.vis.vis--short {
  aspect-ratio: 280 / 150;
}

/* The home page's flow (link, hour, reminder, calendar): four cards in a
   loop, a little larger than the other scenes so its labels stay legible. */
.vis.vis--flow {
  aspect-ratio: 300 / 256;
  max-width: 25rem;
}
@media (max-width: 1080px) {
  .changes .vis--flow {
    justify-self: start;
  }
}

/* ── Drawing in ──────────────────────────────────────────────────────── */
.v2-pop {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .v2-draw {
    transition: stroke-dashoffset 1s var(--ease) var(--d, 0.3s);
  }
  .v2-pop {
    transition:
      opacity 0.45s var(--ease) var(--d, 0.6s),
      transform 0.45s var(--ease) var(--d, 0.6s);
  }
  html:not(.no-js) .rise:not(.is-on) .v2-draw {
    stroke-dashoffset: var(--len);
    transition: none;
  }
  html:not(.no-js) .rise:not(.is-on) .v2-pop {
    opacity: 0;
    transform: scale(0.6);
    transition: none;
  }
  /* The sync loop keeps moving, slowly: dots running along both arrows. */
  .rise.is-on .v2-flow {
    animation: v2-flow 2.8s linear infinite;
    animation-delay: 1.6s;
  }
  html:not(.no-js) .rise:not(.is-on) .v2-flow {
    opacity: 0;
  }
}
.v2-flow {
  transition: opacity 0.4s ease 1.4s;
}
@keyframes v2-flow {
  to {
    stroke-dashoffset: -24;
  }
}
@media print {
  .v2-draw {
    stroke-dashoffset: 0 !important;
  }
  .v2-pop {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Business teaser on the features page ────────────────────────────── */
.v2-team__go {
  margin-top: 24px;
}
.v2-team__list {
  margin-top: 0;
}

/* ── "New in Nuvio" row on the home pages ───────────────────────────── */
.v2-new {
  margin-top: 44px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.v2-new__label {
  color: var(--brass-ink);
}
.v2-new__row {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 760px) {
  .v2-new__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.v2-new__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--chip);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}
.v2-new__item:hover {
  border-color: var(--brass);
}
.v2-new__item:active {
  transform: translateY(1px);
}
.v2-new__item svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--brass-ink);
}

/* ── Team band on the pricing pages ──────────────────────────────────── */
.v2-teamband {
  margin-top: 44px;
  border-top: 1.5px solid var(--ink);
  padding-top: 22px;
  display: grid;
  gap: 18px clamp(28px, 5vw, 64px);
}
@media (min-width: 900px) {
  .v2-teamband {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: start;
  }
}
.v2-teamband__mark {
  color: var(--brass-ink);
}
.v2-teamband__price {
  margin-top: 10px;
  font-family: "Gabarito", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.v2-teamband__unit {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}
.v2-teamband .plan__feat {
  margin-top: 0;
}
.v2-teamband__go {
  margin-top: 18px;
}

/* ── Declutter (2026-10-16) ──────────────────────────────────────────── */
/* Funcționalități on a phone: smaller pictures, so a section is mostly its
   list. Scoped to that page (main.features); the home page keeps its own. */
@media (max-width: 899px) {
  .features .feat .vis {
    max-width: 12rem;
  }
}
/* Sections merged into another keep their old anchor on a row
   (#raport-ai, #preturi-variabile and the English twins). */
.features li[id] {
  scroll-margin-top: 84px;
}
/* Pricing cards: the first rows stay in view, the rest open under
   "Vezi tot ce include". The toggle takes the stretch that keeps the two
   buttons level, so the shown list no longer leaves a gap above it. */
.plan > .plan__feat:has(+ .more) {
  flex: none;
}
.plan > .more {
  flex: 1;
  max-width: none;
}
.plan > .more > .plan__feat {
  margin-top: 12px;
  color: inherit;
}