/* Mozee vs Calendly. Styles only this page uses. Tokens from tokens.css, shared parts from site.css. */
:root {
  --vs-table-max: 61rem;       /* table card, about the width of Apple's compare grid */
  --vs-mark: 1.75rem;          /* Mozee symbol above its column name */
  --vs-ico: 2.75rem;           /* icon tile in the Calendly list */
  --vs-step-n: 2rem;           /* step number disc */
}

/* Nav: mark the page we are on */
.gnav-links a[aria-current="page"] { color: var(--color-body-on-dark); }

/* ---------- Hero ---------- */
.vs-hero { padding-bottom: var(--space-section); }
.vs-hero-render { max-width: 25em; margin: var(--space-2xl) auto 0; }
@media (min-width: 834px) { .vs-hero-render { font-size: var(--text-tagline); } }

/* ---------- Compare table ---------- */
/* Phones: 12px from the screen edge, like the homepage tile grid */
.vs-table {
  max-width: var(--vs-table-max);
  margin: var(--space-2xl) calc(var(--space-sm) - var(--space-lg)) 0;
  padding: var(--space-lg) var(--space-xs) var(--space-xs);
  background: var(--color-canvas); border-radius: var(--radius-xl);
  text-align: left;
}
@media (min-width: 834px) { .vs-table { margin: var(--space-2xl) auto 0; padding: var(--space-xl) var(--space-lg) var(--space-md); } }
.vs-table table { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.vs-table th, .vs-table td { padding: 0 var(--space-xs); vertical-align: top; text-align: left; }
@media (min-width: 834px) { .vs-table th, .vs-table td { padding: 0 var(--space-md); } }

/* Column heads: name, then the plan in one quiet line */
.vs-table thead th { padding-bottom: var(--space-lg); vertical-align: bottom; font-weight: var(--weight-regular); }
.vs-mark { width: var(--vs-mark); height: var(--vs-mark); margin-bottom: var(--space-xs); }
.vs-name {
  display: block; font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-body); line-height: var(--leading-lead); letter-spacing: var(--tracking-display); color: var(--color-ink);
}
@media (min-width: 834px) { .vs-name { font-size: var(--text-lead-airy); } }
.vs-plan { display: block; margin-top: var(--space-2xs); font-size: var(--text-fine); letter-spacing: 0; line-height: var(--leading-caption); color: var(--color-ink-muted-56); }
@media (min-width: 834px) { .vs-plan { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); } }

/* Feature label spans all three columns above its values, as on Apple's compare page */
.vs-label th {
  padding-top: var(--space-md); padding-bottom: var(--space-xs);
  border-top: 1px solid var(--color-hairline);
  font-size: var(--text-fine); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--color-ink-muted-56);
}
@media (min-width: 834px) { .vs-label th { padding-top: var(--space-lg); font-size: var(--text-caption); letter-spacing: var(--tracking-caption); } }
.vs-table tbody td { padding-bottom: var(--space-md); font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); color: var(--color-ink-muted-80); }
@media (min-width: 834px) { .vs-table tbody td { padding-bottom: var(--space-lg); font-size: var(--text-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); } }
.vs-table td.us { color: var(--color-ink); font-weight: var(--weight-semibold); }

.vs-val { display: flex; align-items: flex-start; gap: var(--space-2xs); }
@media (min-width: 834px) { .vs-val { gap: var(--space-xs); } }
.vs-val .icon { width: 1.1em; height: 1.1em; margin-top: 0.15em; stroke-width: 2.4; }
.vs-yes { color: var(--color-ink); }
.vs-no { color: var(--color-ink-muted-56); }
.vs-val small, .vs-price small {
  display: block; margin-top: var(--space-2xs);
  font-size: var(--text-fine); font-weight: var(--weight-regular); line-height: var(--leading-caption); letter-spacing: 0; color: var(--color-ink-muted-56);
}
@media (min-width: 834px) { .vs-val small, .vs-price small { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); } }

/* Price: the one row set in display type */
.vs-amount {
  display: block; font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-display-md); line-height: var(--leading-display); letter-spacing: var(--tracking-hero); color: var(--color-ink);
}

/* ---------- Switching ---------- */
.vs-switch { text-align: left; }
.vs-switch-grid { display: grid; gap: var(--space-2xl); max-width: var(--container-wide); margin: 0 auto; }
.vs-switch .display { margin: 0; max-width: 12ch; }
@media (min-width: 834px) {
  .vs-switch-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-xl); align-items: center; }
  .vs-switch-copy { grid-column: 1 / span 5; }
  .vs-switch-render { grid-column: 7 / -1; }
}
.vs-steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); }
.vs-steps li { display: flex; gap: var(--space-md); }
.vs-n {
  display: grid; place-items: center; flex: none; width: var(--vs-step-n); height: var(--vs-step-n); border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--color-hairline-on-dark); color: var(--color-body-on-dark);
  font-size: var(--text-caption); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.vs-steps h3 { font-family: var(--font-display); font-size: var(--text-tagline); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); line-height: var(--leading-lead); }
.vs-steps p { margin-top: var(--space-2xs); color: var(--color-body-muted-on-dark); max-width: 36ch; }
.vs-switch-render { font-size: clamp(var(--render-fs), 0.5rem + 0.7vw, var(--text-body)); }
.vs-switch-render .win { max-width: 30em; }

/* ---------- FAQ ---------- */
.vs-faq { text-align: left; }
.vs-faq-inner { max-width: var(--container-text); margin: 0 auto; }
.vs-faq .display { margin: 0; }
.vs-faq-list { margin-top: var(--space-xl); border-bottom: 1px solid var(--color-hairline); }
.vs-faq-item { border-top: 1px solid var(--color-hairline); }
.vs-faq-item h3 { margin: 0; font: inherit; }
.vs-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  width: 100%; min-height: var(--target-min); padding: var(--space-lg) 0;
  background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: var(--text-tagline); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: var(--leading-lead); color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out);
}
.vs-faq-q .icon {
  width: 1.25rem; height: 1.25rem; color: var(--color-ink-muted-56);
  transition: transform var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
/* Open: the plus turns into a close mark */
.vs-faq-q[aria-expanded="true"] .icon { transform: rotate(45deg); color: var(--color-ink); }
.vs-faq-q:active { color: var(--color-ink-muted-80); }
.vs-faq-q:active .icon { transform: scale(var(--press-scale)); }
.vs-faq-q[aria-expanded="true"]:active .icon { transform: rotate(45deg) scale(var(--press-scale)); }
.vs-faq-a { padding-bottom: var(--space-lg); }
.vs-faq-a p { max-width: 60ch; color: var(--color-ink-muted-80); }
@keyframes vs-open { from { opacity: 0; transform: translateY(calc(var(--space-xs) * -1)); } to { opacity: 1; transform: none; } }
.vs-faq-a:not([hidden]) { animation: vs-open var(--duration-base) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .vs-faq-q:hover { color: var(--color-primary); }
  .vs-faq-q:hover .icon { color: var(--color-primary); }
}