/* Vitara — styles for the pages the template did not ship with:
   the sign-up page, the checkout return page, and the member platform.
   Same type and palette as the Webflow theme so nothing looks bolted on. */

@font-face {
  font-family: 'Vitara Heading';
  src: url('../fonts/6a6c25f258675cf7f8f897b5_Raveo-Bold-BF6747d9eaa1e80.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Vitara Heading';
  src: url('../fonts/6a6c25f2b0003b90e85bf196_Raveo-SemiBold-BF6747d9ec62778.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Vitara Heading';
  src: url('../fonts/6a6c25f2b64782766e28bfe2_Raveo-Medium-BF6747d9ec1b58a.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Vitara Body';
  src: url('../fonts/6a76a882087e2bf6d4775817_Switzer-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Vitara Body';
  src: url('../fonts/6a6c246958675cf7f8f87b7d_Switzer-Medium.otf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --v-ink: #101011;
  --v-navy: #133954;
  --v-muted: #606266;
  --v-surface: #f4f6f9;
  --v-line: #1010111a;
  --v-white: #fff;
  --v-good: #1f7a5a;
  --v-warn: #b26a00;
  --v-bad: #a33232;
  --v-radius: 1rem;
  --v-radius-sm: .625rem;
}

/* ------------------------------------------------------------------ *
 * Marketing add-ons (sign-up + checkout return)
 * ------------------------------------------------------------------ */
.field-hint {
  font-size: .8125rem;
  color: var(--v-muted);
  margin-top: .5rem;
  line-height: 1.45;
}
.field-hint-legal { margin-top: 1rem; }
.field-hint-legal a { color: var(--v-ink); text-decoration: underline; }

.get-started-steps { display: grid; gap: 1.25rem; }
.get-started-step { display: flex; gap: 1rem; align-items: flex-start; line-height: 1.5; }
.get-started-step span {
  flex: 0 0 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--v-ink); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 500;
}

.get-started-done { padding: 2rem 0; }
.get-started-done h3 { font-family: 'Vitara Heading', Arial, sans-serif; margin: 0 0 .75rem; }
.get-started-done p { color: var(--v-muted); line-height: 1.6; }

.get-started-plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3rem;
}
.get-started-plan {
  border: 1px solid var(--v-line); border-radius: var(--v-radius);
  padding: 1.75rem; background: #fff; display: flex; flex-direction: column;
}
.get-started-plan.is-featured { background: var(--v-ink); color: #fff; border-color: var(--v-ink); }
.get-started-plan-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.get-started-plan-name { font-family: 'Vitara Heading', Arial, sans-serif; font-size: 1.375rem; margin: 0; }
.get-started-badge {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  background: #ffffff26; padding: .3rem .6rem; border-radius: 100px;
}
.get-started-price {
  font-family: 'Vitara Heading', Arial, sans-serif; font-size: 2.75rem; margin: 1rem 0 .5rem;
}
.get-started-price span { font-family: 'Vitara Body', Arial, sans-serif; font-size: 1rem; opacity: .6; }
.get-started-plan-text { font-size: .9375rem; opacity: .75; line-height: 1.55; margin: 0 0 1.25rem; }
.get-started-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: .625rem; }
.get-started-list li { font-size: .9375rem; padding-left: 1.375rem; position: relative; }
.get-started-list li:before {
  content: ''; position: absolute; left: 0; top: .45rem; width: .5rem; height: .5rem;
  border-radius: 50%; background: currentColor; opacity: .45;
}
.get-started-plan-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: .875rem 1.5rem; border-radius: 100px; border: 1px solid var(--v-line);
  text-decoration: none; color: inherit; font-weight: 500; font-size: .9375rem;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.get-started-plan-cta:hover { transform: translateY(-2px); }
.get-started-plan-cta.is-dark { background: var(--v-ink); color: #fff; border-color: var(--v-ink); }
.get-started-plan.is-featured .get-started-plan-cta { background: #fff; color: var(--v-ink); border-color: #fff; }

.checkout-fallback {
  margin: 2rem auto 0; max-width: 640px; padding: 1.5rem;
  border: 1px solid var(--v-line); border-radius: var(--v-radius); background: var(--v-surface);
}
.checkout-fallback-label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--v-muted); margin-bottom: .375rem;
}
.checkout-fallback-link { display: block; word-break: break-all; color: var(--v-ink); margin-bottom: 1rem; }
.checkout-fallback code {
  display: inline-block; background: #fff; border: 1px solid var(--v-line);
  padding: .5rem .875rem; border-radius: var(--v-radius-sm); letter-spacing: .08em;
}
.checkout-actions { display: flex; gap: .75rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.checkout-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
.checkout-next-item { display: flex; gap: .875rem; font-size: .9375rem; line-height: 1.5; }
.checkout-next-item span {
  flex: 0 0 2rem; height: 2rem; border-radius: 50%; background: var(--v-surface);
  display: flex; align-items: center; justify-content: center; font-size: .75rem;
}

@media (max-width: 991px) {
  .get-started-plans, .checkout-next { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ *
 * The platform
 * ------------------------------------------------------------------ */
.vitara-app {
  margin: 0;
  font-family: 'Vitara Body', Arial, sans-serif;
  color: var(--v-ink);
  background: var(--v-surface);
  -webkit-font-smoothing: antialiased;
}
.vitara-app * { box-sizing: border-box; }
.vitara-app h1, .vitara-app h2, .vitara-app h3, .vitara-app h4 {
  font-family: 'Vitara Heading', Arial, sans-serif; font-weight: 500; letter-spacing: -.02em; margin: 0;
}
.vitara-app a { color: inherit; }
.vitara-app button { font-family: inherit; }

.app-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }

.app-side {
  background: var(--v-ink); color: #fff; padding: 1.75rem 1.25rem;
  display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 0; height: 100vh;
}
.app-side-logo { text-decoration: none; }
.app-nav { display: grid; gap: .25rem; }
.app-nav button {
  display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left;
  background: none; border: 0; color: #ffffffb3; padding: .75rem .875rem;
  border-radius: var(--v-radius-sm); cursor: pointer; font-size: .9375rem;
  transition: background .16s ease, color .16s ease;
}
.app-nav button:hover { color: #fff; background: #ffffff0f; }
.app-nav button.is-active { color: var(--v-ink); background: #fff; }
.app-side-foot { margin-top: auto; font-size: .8125rem; color: #ffffffb3; display: grid; gap: .75rem; }
.app-side-plan {
  border: 1px solid #ffffff26; border-radius: var(--v-radius-sm); padding: .875rem;
}
.app-side-plan strong { color: #fff; display: block; margin-bottom: .25rem; }
.app-side-foot button {
  background: none; border: 1px solid #ffffff26; color: #fff; padding: .625rem;
  border-radius: var(--v-radius-sm); cursor: pointer; font-size: .8125rem;
}

.app-main { padding: 2.5rem 3rem 4rem; max-width: 1180px; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.app-head h1 { font-size: 2.125rem; }
.app-head p { color: var(--v-muted); margin: .5rem 0 0; max-width: 52ch; line-height: 1.55; }

.app-grid { display: grid; gap: 1.25rem; align-items: start; }
.app-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.app-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.app-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-radius); padding: 1.5rem;
}
.card h3 { font-size: 1.125rem; margin-bottom: .25rem; }
.card-sub { color: var(--v-muted); font-size: .875rem; margin: 0 0 1.25rem; line-height: 1.5; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }

.stat { display: flex; flex-direction: column; gap: .375rem; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--v-muted); }
.stat-value { font-family: 'Vitara Heading', Arial, sans-serif; font-size: 2.25rem; line-height: 1; }
.stat-value small { font-size: .9375rem; font-family: 'Vitara Body', Arial, sans-serif; color: var(--v-muted); }
.stat-delta { font-size: .8125rem; }
.delta-up { color: var(--v-good); }
.delta-down { color: var(--v-bad); }
.delta-flat { color: var(--v-muted); }

.score-ring { display: flex; align-items: center; gap: 1.5rem; }
.ring { position: relative; width: 118px; height: 118px; flex: 0 0 118px; }
.ring svg { transform: rotate(-90deg); }
.ring-value {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-family: 'Vitara Heading', Arial, sans-serif;
  font-size: 1.875rem;
}
.ring-value span { font-family: 'Vitara Body', Arial, sans-serif; font-size: .6875rem; color: var(--v-muted); text-transform: uppercase; letter-spacing: .07em; }
.score-parts { display: grid; gap: .5rem; flex: 1; }
.score-part { display: grid; grid-template-columns: 110px 1fr 42px; align-items: center; gap: .75rem; font-size: .8125rem; }
.bar { height: 6px; background: var(--v-surface); border-radius: 100px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--v-navy); border-radius: 100px; }

.focus-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .875rem;
  border-radius: 100px; background: var(--v-ink); color: #fff; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .07em;
}

.plan-item {
  display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--v-line); align-items: flex-start;
}
.plan-item:last-child { border-bottom: 0; padding-bottom: 0; }
.plan-time { font-size: .8125rem; color: var(--v-muted); width: 3.25rem; flex: 0 0 3.25rem; padding-top: .15rem; }
.plan-body { flex: 1; }
.plan-body strong { display: block; margin-bottom: .25rem; font-weight: 500; }
.plan-body p { margin: 0; color: var(--v-muted); font-size: .875rem; line-height: 1.55; }
.plan-check {
  flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--v-line);
  background: #fff; cursor: pointer; transition: background .16s ease, border-color .16s ease;
}
.plan-check.is-done { background: var(--v-ink); border-color: var(--v-ink); }
.plan-check.is-done:after { content: '✓'; color: #fff; font-size: .75rem; display: block; line-height: 1.4rem; }
.plan-item.is-done .plan-body strong { text-decoration: line-through; opacity: .5; }

.habit-row {
  display: flex; align-items: center; gap: .875rem; padding: .75rem 0; border-bottom: 1px solid var(--v-line);
}
.habit-row:last-child { border-bottom: 0; }
.habit-row span { flex: 1; font-size: .9375rem; }

.trend { display: flex; align-items: flex-end; gap: 6px; height: 132px; }
.trend-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; height: 100%; }
.trend-col i { display: block; background: var(--v-navy); border-radius: 4px 4px 0 0; min-height: 2px; }
.trend-col.empty i { background: var(--v-line); }
.trend-labels { display: flex; gap: 6px; margin-top: .5rem; }
.trend-labels div { flex: 1; text-align: center; font-size: .625rem; color: var(--v-muted); }

.form-row { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.form-row label { font-size: .8125rem; color: var(--v-muted); }
.form-row input[type=text], .form-row input[type=email], .form-row input[type=tel],
.form-row input[type=number], .form-row input[type=time], .form-row input[type=password],
.form-row select, .form-row textarea {
  width: 100%; padding: .75rem .875rem; border: 1px solid var(--v-line);
  border-radius: var(--v-radius-sm); font-family: inherit; font-size: .9375rem; background: #fff;
}
.form-row textarea { min-height: 96px; resize: vertical; }
.scale { display: flex; gap: .5rem; }
.scale button {
  flex: 1; padding: .75rem 0; border: 1px solid var(--v-line); background: #fff;
  border-radius: var(--v-radius-sm); cursor: pointer; font-size: .9375rem;
}
.scale button.is-on { background: var(--v-ink); color: #fff; border-color: var(--v-ink); }
.scale-ends { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--v-muted); margin-top: .375rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.5rem; border-radius: 100px; border: 1px solid var(--v-ink);
  background: var(--v-ink); color: #fff; cursor: pointer; font-size: .9375rem;
  text-decoration: none; transition: transform .16s ease, opacity .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.ghost { background: #fff; color: var(--v-ink); border-color: var(--v-line); }
/* .vitara-app a { color: inherit } outranks .btn, so anchors need it back. */
.vitara-app a.btn { color: #fff; }
.vitara-app a.btn.ghost { color: var(--v-ink); }
.btn.small { padding: .5rem 1rem; font-size: .8125rem; }

.chat { display: flex; flex-direction: column; gap: .875rem; max-height: 460px; overflow-y: auto; padding-right: .5rem; }
.bubble { padding: .875rem 1.125rem; border-radius: var(--v-radius); max-width: 78%; line-height: 1.55; font-size: .9375rem; }
.bubble.coach { background: var(--v-surface); align-self: flex-start; }
.bubble.user { background: var(--v-ink); color: #fff; align-self: flex-end; }
.chat-form { display: flex; gap: .75rem; margin-top: 1.25rem; }
.chat-form input { flex: 1; padding: .875rem 1.125rem; border: 1px solid var(--v-line); border-radius: 100px; font-family: inherit; font-size: .9375rem; }

.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; }
.roadmap-step { padding: 1rem; border-radius: var(--v-radius-sm); background: var(--v-surface); font-size: .8125rem; }
.roadmap-step.is-current { background: var(--v-ink); color: #fff; }
.roadmap-step strong { display: block; font-size: .6875rem; text-transform: uppercase; letter-spacing: .07em; opacity: .6; margin-bottom: .375rem; }

.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th, .table td { text-align: left; padding: .875rem .5rem; border-bottom: 1px solid var(--v-line); }
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--v-muted); font-weight: 400; }

.notice {
  padding: 1rem 1.25rem; border-radius: var(--v-radius-sm); font-size: .875rem; line-height: 1.55;
  border: 1px solid var(--v-line); background: #fff; margin-bottom: 1.25rem;
}
.notice.warn { border-color: #b26a0033; background: #b26a000d; }
.notice.good { border-color: #1f7a5a33; background: #1f7a5a0d; }

.insight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .875rem; }
.insight-list li { padding-left: 1.25rem; position: relative; line-height: 1.6; font-size: .9375rem; }
.insight-list li:before {
  content: ''; position: absolute; left: 0; top: .55rem; width: .4375rem; height: .4375rem;
  border-radius: 50%; background: var(--v-navy);
}

/* Sign-in screen */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { background: var(--v-ink); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side .vw-logo { align-self: flex-start; }
.auth-side h2 { font-size: 2.25rem; max-width: 16ch; line-height: 1.15; }
.auth-side p { color: #ffffffb3; line-height: 1.6; max-width: 42ch; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 3rem; background: #fff; }
.auth-card { width: 100%; max-width: 384px; }
.auth-card h1 { font-size: 1.875rem; margin-bottom: .5rem; }
.auth-card > p { color: var(--v-muted); margin: 0 0 2rem; line-height: 1.55; }
.auth-alt { margin-top: 1.5rem; font-size: .875rem; color: var(--v-muted); line-height: 1.6; }
.auth-alt a, .auth-alt button.link { color: var(--v-ink); text-decoration: underline; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; }

.app-toast {
  position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(1rem);
  background: var(--v-ink); color: #fff; padding: .875rem 1.5rem; border-radius: 100px;
  font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 50;
}
.app-toast.is-on { opacity: 1; transform: translateX(-50%); }

.app-mobile-nav { display: none; }

@media (max-width: 1100px) {
  .app-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .app-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-side { position: static; height: auto; flex-direction: row; align-items: center; gap: 1rem; padding: 1rem; overflow-x: auto; }
  .app-side-foot, .app-side-plan { display: none; }
  .app-nav { grid-auto-flow: column; gap: .25rem; }
  .app-nav button { white-space: nowrap; padding: .5rem .75rem; }
  .app-main { padding: 1.5rem; }
  .app-grid.cols-2, .app-grid.cols-4 { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr 1fr; }
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-side { display: none; }
}

/* ------------------------------------------------------------------ *
 * Brand lockup (replaces the template wordmark)
 * ------------------------------------------------------------------ */
.vw-logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.vw-logo-mark { width: 28px; height: 28px; flex: 0 0 28px; }
.vw-logo-word {
  font-family: 'Vitara Heading', Arial, sans-serif; font-weight: 600;
  font-size: 1.375rem; letter-spacing: -.03em; line-height: 1; white-space: nowrap;
}
.vw-logo.on-dark .vw-logo-mark { filter: brightness(0) invert(1); }
.vw-logo.on-dark .vw-logo-word { color: #fff; }
@media (max-width: 767px) {
  .vw-logo-mark { width: 24px; height: 24px; flex: 0 0 24px; }
  .vw-logo-word { font-size: 1.125rem; }
}

/* ------------------------------------------------------------------ *
 * Footer. The template renders .footer-bottom as a white card inside the
 * dark footer, so this block is dark-on-light.
 * ------------------------------------------------------------------ */
.vf { color: var(--v-muted); font-size: .9375rem; line-height: 1.6; }
.vf a { color: var(--v-muted); text-decoration: none; transition: color .16s ease; }
.vf a:hover { color: var(--v-ink); }
.vf-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, .85fr) 1.15fr;
  gap: 3rem 2rem;
  align-items: start;
}
.vf-brand { max-width: 34ch; }
.vf-brand p { margin: 1.125rem 0 1.5rem; }
.vf-col h3 {
  color: var(--v-ink); font-family: 'Vitara Heading', Arial, sans-serif; font-weight: 500;
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .09em; margin: 0 0 1.125rem;
}
.vf-links { display: grid; gap: .625rem; }
.vf-contact-list { display: grid; gap: .875rem; }
.vf-contact-list span {
  display: block; color: var(--v-ink); opacity: .45; font-size: .6875rem;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: .1875rem;
}
.vf-subscribe { display: flex; gap: .5rem; max-width: 340px; }
.vf-subscribe input[type="email"] {
  flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: 100px;
  border: 1px solid var(--v-line); background: #fff; color: var(--v-ink);
  font-family: inherit; font-size: .875rem;
}
.vf-subscribe input[type="email"]::placeholder { color: var(--v-muted); }
.vf-subscribe input[type="submit"] {
  padding: .75rem 1.5rem; border-radius: 100px; border: 0; background: var(--v-ink);
  color: #fff; font-family: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
}
.vf-form-note { font-size: .75rem; margin-top: .75rem; line-height: 1.5; }
.vf-form-note a { text-decoration: underline; }
.vf-divider { height: 1px; background: var(--v-line); margin: 3.5rem 0 1.75rem; }
.vf-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap; font-size: .8125rem;
}
.vf-bottom p { margin: 0; }
.vf-bottom-links { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.vf-bottom-links button {
  background: none; border: 0; padding: 0; color: var(--v-muted); font-family: inherit;
  font-size: inherit; cursor: pointer; text-decoration: underline;
}
.vf-bottom-links button:hover { color: var(--v-ink); }
.vf-note {
  margin: 1.5rem 0 0; font-size: .75rem; line-height: 1.65; color: var(--v-muted); opacity: .8; max-width: 96ch;
}
@media (max-width: 1180px) {
  .vf-grid { grid-template-columns: 1fr 1fr 1fr; }
  .vf-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 767px) {
  .vf-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem 1.5rem; }
  .vf-brand, .vf-contact { grid-column: 1 / -1; }
  .vf-divider { margin: 2.5rem 0 1.5rem; }
  .vf-bottom { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .vf-bottom-links { gap: 1rem 1.25rem; }
  .vf-subscribe { max-width: none; }
}
@media (max-width: 479px) {
  .vf-grid { grid-template-columns: 1fr; }
  .vf-subscribe { flex-direction: column; }
  .vf-subscribe input[type="submit"] { width: 100%; }
}

/* ------------------------------------------------------------------ *
 * Cookie banner
 * ------------------------------------------------------------------ */
.vc-banner {
  position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 9999;
  max-width: 640px; margin: 0 auto; padding: 1.5rem;
  background: #101011; color: #ffffffcc; border-radius: 1rem;
  box-shadow: 0 24px 60px #00000059; font-size: .875rem; line-height: 1.6;
  font-family: 'Vitara Body', Arial, sans-serif;
  transform: translateY(1.5rem); opacity: 0; transition: opacity .28s ease, transform .28s ease;
}
.vc-banner.is-on { transform: translateY(0); opacity: 1; }
.vc-banner h2 {
  color: #fff; font-family: 'Vitara Heading', Arial, sans-serif; font-weight: 500;
  font-size: 1.0625rem; margin: 0 0 .5rem; letter-spacing: -.01em;
}
.vc-banner p { margin: 0 0 1.25rem; }
.vc-banner a { color: #fff; text-decoration: underline; }
.vc-actions { display: flex; gap: .625rem; flex-wrap: wrap; }
.vc-actions button {
  padding: .75rem 1.375rem; border-radius: 100px; font-family: inherit; font-size: .875rem;
  cursor: pointer; border: 1px solid #ffffff33; background: none; color: #fff; transition: opacity .16s ease;
}
.vc-actions button.primary { background: #fff; color: #101011; border-color: #fff; }
.vc-actions button:hover { opacity: .85; }
@media (max-width: 479px) {
  .vc-banner { left: .75rem; right: .75rem; bottom: .75rem; padding: 1.25rem; }
  .vc-actions button { flex: 1; }
}

/* ------------------------------------------------------------------ *
 * Legal pages: tables and quotes inside the template rich text
 * ------------------------------------------------------------------ */
.privacy-rich-text table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .9375rem;
  display: block; overflow-x: auto;
}
.privacy-rich-text thead { background: #f4f6f9; }
.privacy-rich-text th, .privacy-rich-text td {
  text-align: left; padding: .875rem 1rem; border: 1px solid #1010111a; vertical-align: top;
}
.privacy-rich-text th { font-weight: 500; }
.privacy-rich-text blockquote {
  margin: 1.5rem 0; padding: 1.25rem 1.5rem; background: #f4f6f9;
  border-radius: .625rem; border-left: 3px solid #133954;
}
.privacy-rich-text blockquote p { margin: 0; }
.privacy-rich-text .cookie-reopen {
  background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit;
  color: #101011; text-decoration: underline; cursor: pointer;
}
.legal-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 2rem 0 0; }
.legal-index a {
  display: block; padding: 1.25rem; border: 1px solid #1010111a; border-radius: 1rem;
  text-decoration: none; color: inherit; transition: transform .16s ease, border-color .16s ease;
}
.legal-index a:hover { transform: translateY(-2px); border-color: #101011; }
.legal-index strong { display: block; margin-bottom: .25rem; }
.legal-index span { color: #606266; font-size: .875rem; line-height: 1.5; }
@media (max-width: 767px) { .legal-index { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ *
 * Spacing repairs
 * ------------------------------------------------------------------ */
/* The roadmap's scroll animation finishes well before its section does, which
   left a tall empty band above the plans. Below 992px the template already
   collapses this padding, so the override is desktop-only. */
@media screen and (min-width: 992px) {
  .road-map-section { padding-bottom: 6.25rem; }
  .pricing.section-spacing { padding-top: 5rem; }
}

/* With the invented testimonial block gone from the pricing page, the
   comparison table and the FAQs were left with two full section paddings
   stacked on top of each other. */
.compare-section.section-spacing-bottom { padding-bottom: 5rem; }
.compare-section + .faqs-section.section-spacing { padding-top: 5rem; }

/* The story block is now a looping clip rather than a lightbox thumbnail. */
video.cta-video-image { object-fit: cover; width: 100%; height: 100%; display: block; }