.vi2va-preischeck{
  --v-teal:#30afc0; --v-violet:#791496;
  --v-teal-10: rgba(48,175,192,.10); --v-teal-20: rgba(48,175,192,.18);
  --v-violet-10: rgba(121,20,150,.08); --v-violet-20: rgba(121,20,150,.16);
  --v-ink:#1c1524; --v-ink-70: rgba(28,21,36,.72); --v-ink-50: rgba(28,21,36,.55);
  --v-surface:#ffffff; --v-surface-alt:#f3eef7; --v-surface-dark:#241a30;
  --v-line:#ddd3e6; --shadow-s: 0 4px 16px rgba(28,21,36,.10);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  max-width:880px;margin:0 auto;padding:48px 24px 72px;
  background:var(--v-surface);color:var(--v-ink);
}
.vi2va-preischeck *{box-sizing:border-box;}
.vi2va-preischeck h1,.vi2va-preischeck h2,.vi2va-preischeck h3{
  font-family:'Poppins',-apple-system,sans-serif;font-weight:700;margin:0 0 14px;
  color:var(--v-ink) !important;text-transform:none !important;
}
.vi2va-preischeck p{line-height:1.6;color:var(--v-ink-70);margin:0 0 14px;}
.vi2va-preischeck a{color:inherit !important;text-decoration:none !important;}
.vi2va-preischeck .eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--v-violet);margin-bottom:14px;
}
.vi2va-preischeck .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--v-teal);}

/* Hero / context section */
.vi2va-preischeck .context-card{
  background:linear-gradient(135deg,var(--v-violet-10),var(--v-teal-10));
  border:1px solid var(--v-line);border-radius:20px;box-shadow:var(--shadow-s);
  padding:40px 40px 34px;margin-bottom:36px;
}
.vi2va-preischeck .context-card h1{font-size:1.9rem;line-height:1.25;max-width:620px;}
.vi2va-preischeck .context-card p{font-size:1.02rem;max-width:640px;}
.vi2va-preischeck .fact-row{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 4px;}
.vi2va-preischeck .fact-pill{
  background:var(--v-surface);border:1px solid var(--v-line);border-radius:999px;
  padding:8px 16px;font-size:.86rem;font-weight:600;color:var(--v-ink);display:flex;align-items:center;gap:8px;
}
.vi2va-preischeck .fact-pill .tick{color:var(--v-teal);font-weight:700;}

/* Trust row: real Gold Partner badge + Atlassian Partner Directory rating, grouped centered */
.vi2va-preischeck .trust-row{
  display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;
  padding:24px 4px;margin:0 0 36px;border-top:1px solid var(--v-line);border-bottom:1px solid var(--v-line);
}
.vi2va-preischeck .gold-badge{height:72px;width:auto;display:block;}
.vi2va-preischeck .directory-badge{
  display:flex;align-items:center;gap:12px;text-decoration:none;background:#fff;
  border:1.5px solid var(--v-line);border-radius:12px;box-shadow:var(--shadow-s);padding:12px 20px 12px 12px;
}

/* Booking section */
.vi2va-preischeck .booking-heading{text-align:center;margin-bottom:8px;}
.vi2va-preischeck .booking-heading h2{font-size:1.4rem;}
.vi2va-preischeck .booking-sub{text-align:center;max-width:520px;margin:0 auto 28px;color:var(--v-ink-50);font-size:.92rem;}

/* Height matches the real Bookings widget's own content height (measured ~2257px - the
   widget renders as one fixed narrow stacked column regardless of container/viewport width,
   it does not reflow into a wider layout) so the calendar/time-slots/contact-form are all
   reachable with normal page scrolling, instead of a small internally-scrolling box.
   Width: the widget's own visible card is a hard-coded ~230px column that Microsoft's embed
   does not widen no matter how much space it's given (measured identical at 375/480/880/1400px
   container widths) - since we can't make their cross-origin widget itself wider, the wrapper
   is capped/centered instead of full-width, so the leftover space reads as an intentional
   compact card rather than a broken half-empty box. */
.vi2va-preischeck .booking-frame-wrap{
  position:relative;width:100%;max-width:480px;margin:0 auto;height:2350px;
  border:1px solid var(--v-line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow-s);background:var(--v-surface);
}
.vi2va-preischeck .booking-frame-wrap iframe{
  display:block;width:100%;height:100%;border:0;
}
@media (max-width:640px){
  .vi2va-preischeck{padding:28px 16px 48px;}
  .vi2va-preischeck .context-card{padding:28px 22px 24px;border-radius:16px;}
  .vi2va-preischeck .context-card h1{font-size:1.5rem;}
}