/* VoxaGuide avatar on the website (voxa-dock.js). Colours follow the site: forest green, cream, brass. */
:root { --vg-w: clamp(360px, 27vw, 440px); --vg-gap: 12px; --vg-space: calc(var(--vg-w) + 2 * var(--vg-gap));
  --vg-forest: #244b3c; --vg-deep: #13241c; --vg-cream: #f7f4ee; --vg-gold: #cdb988; }

/* The panel holding the avatar */
.vg-dock { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: var(--vg-w); background: var(--vg-deep);
  border-left: 1px solid rgba(67, 58, 48, .28); box-shadow: -18px 0 50px rgba(45, 37, 28, .16); overflow: hidden;
  transform: translateX(100%); visibility: hidden; }
.vg-dock iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--vg-deep); opacity: 0; transition: opacity .35s ease; }
.vg-dock.is-ready iframe { opacity: 1; }
.vg-ready .vg-dock { transition: transform .32s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .32s; }
.vg-docked .vg-dock, .vg-open .vg-dock { transform: none; visibility: visible; transition-delay: 0s; }

/* While the avatar gets ready: her photo, softly pulsing, and a short line */
.vg-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--vg-cream);
  background: radial-gradient(120% 80% at 50% 35%, #2e5847, var(--vg-deep) 70%); transition: opacity .35s ease, visibility 0s linear .35s; }
.vg-dock.is-ready .vg-wait { opacity: 0; visibility: hidden; }
.vg-wait .vg-face { width: 84px; height: 84px; animation: vg-breathe 1.6s ease-in-out infinite; }
.vg-wait .vg-face::after { display: none; }
.vg-wait p { margin: 0; font: 400 17px/1.3 Georgia, "Times New Roman", serif; }
.vg-wait small { font: 800 9.5px/1 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vg-gold); }
@keyframes vg-breathe { 50% { box-shadow: 0 0 0 2px var(--vg-gold), 0 0 0 10px rgba(205, 185, 136, .18); } }

/* Desktop: a rounded panel inside the page, with the page colour around it. The page scrolls in the space beside it,
   so its scroll bar sits next to the page content, not beyond the avatar. */
.vg-desk .vg-dock { top: var(--vg-gap); bottom: var(--vg-gap); right: var(--vg-gap); border: 1px solid rgba(67, 58, 48, .18);
  border-radius: 16px; box-shadow: 0 18px 50px rgba(45, 37, 28, .18); transform: translateX(calc(100% + 2 * var(--vg-gap))); }
.vg-desk.vg-docked .vg-dock { transform: none; }
html.vg-docked { overflow: hidden; height: 100%; }
html.vg-docked body { height: 100%; overflow-y: auto; overflow-x: hidden; margin-right: var(--vg-space); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.vg-docked body { scroll-behavior: auto; } }

/* The button that shows the avatar */
.vg-launch { position: fixed; z-index: 61; display: flex; align-items: center; gap: 11px; cursor: pointer;
  border: 1px solid rgba(205, 185, 136, .55); background: var(--vg-forest); color: var(--vg-cream);
  font: inherit; text-align: left;
  /* Raised off the page: a soft highlight on top, a tight contact shadow and a wide soft one below */
  background: linear-gradient(180deg, #2d5a48 0%, var(--vg-forest) 55%, #1e4033 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(19, 36, 28, .30), 0 8px 18px rgba(19, 36, 28, .28),
    0 24px 48px -8px rgba(19, 36, 28, .45);
  transition: box-shadow .2s ease, translate .2s ease, background .2s ease; }
.vg-launch:hover { background: linear-gradient(180deg, #2a5242 0%, #1f4234 60%, #19372b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 6px rgba(19, 36, 28, .30), 0 12px 24px rgba(19, 36, 28, .30),
    0 32px 60px -8px rgba(19, 36, 28, .50); translate: 0 -2px; }
.vg-launch:active { translate: 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 3px rgba(19, 36, 28, .35), 0 6px 14px rgba(19, 36, 28, .28); }
.vg-face { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.vg-launch:focus-visible { outline: 3px solid var(--vg-gold); outline-offset: 3px; }
.vg-face { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #d8d2c4 center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--vg-gold); position: relative; }
.vg-face::after { content: ""; position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%;
  background: #6fcf8f; box-shadow: 0 0 0 2px var(--vg-forest); }
.vg-launch-text { display: grid; line-height: 1.2; }
.vg-launch-text small { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; color: var(--vg-gold); }
.vg-launch-text b { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 16px; white-space: nowrap; }

/* Desktop, panel hidden: a tab on the right edge */
.vg-desk .vg-launch { right: 0; top: 50%; transform: translateY(-50%); flex-direction: column; gap: 10px; padding: 14px 10px 16px;
  border-right: 0; }
.vg-desk .vg-launch-text { writing-mode: vertical-rl; transform: rotate(180deg); }
.vg-desk .vg-launch-text small { display: none; }
.vg-desk .vg-launch-text b { font-size: 15px; }
.vg-docked .vg-launch { display: none; }

/* Tablet and phone: a button at the bottom right; the avatar opens over the page */
html:not(.vg-desk) .vg-launch { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom));
  padding: 7px 18px 7px 7px; border-radius: 999px; }
.vg-open .vg-launch { visibility: hidden; }
.vg-backdrop { position: fixed; inset: 0; z-index: 59; background: rgba(19, 36, 28, .42); opacity: 0; visibility: hidden; }
.vg-ready .vg-backdrop { transition: opacity .25s ease, visibility 0s linear .25s; }
.vg-open .vg-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
html.vg-open, html.vg-open body { overflow: hidden; }
@media (max-width: 699px) {
  /* Phones: the avatar takes the whole screen, like an app */
  html:not(.vg-desk) .vg-dock { width: 100%; border-left: 0; box-shadow: none; transform: translateY(100%); }
  html.vg-open:not(.vg-desk) .vg-dock { transform: none; }
  .vg-launch-text b { font-size: 15px; }
}
/* Phone on its side: also full screen (the avatar lays itself out side by side) */
@media (orientation: landscape) and (max-height: 500px) {
  html:not(.vg-desk) .vg-dock { width: 100%; border-left: 0; box-shadow: none; transform: translateY(100%); }
  html.vg-open:not(.vg-desk) .vg-dock { transform: none; }
  html:not(.vg-desk) .vg-launch { padding: 5px 14px 5px 5px; }
  html:not(.vg-desk) .vg-face { width: 38px; height: 38px; }
  html:not(.vg-desk) .vg-launch-text small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-ready .vg-dock, .vg-ready .vg-backdrop, .vg-dock iframe, .vg-wait, .vg-launch { transition: none; }
  .vg-launch:hover { translate: none; }
  .vg-wait .vg-face { animation: none; }
}
/* "Show me on the page": the words the avatar's answer came from (exact words highlighted, their paragraph glows) */
::highlight(vg-said) { background-color: rgba(214, 178, 94, .42); color: inherit; }
.vg-spot { border-radius: 6px; box-shadow: 0 0 0 6px rgba(214, 178, 94, .22), 0 0 0 7px rgba(169, 132, 79, .55);
  animation: vg-spot-in .9s ease both; transition: box-shadow 1.2s ease; }
.vg-spot.vg-spot-out { box-shadow: 0 0 0 6px rgba(214, 178, 94, 0), 0 0 0 7px rgba(169, 132, 79, 0); }
@keyframes vg-spot-in { from { box-shadow: 0 0 0 22px rgba(214, 178, 94, 0), 0 0 0 23px rgba(169, 132, 79, 0); } }
@media (prefers-reduced-motion: reduce) { .vg-spot { animation: none; transition: none; } }
/* "Ask the avatar" beside text the visitor selects */
.vg-askbtn { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: #1f3a2e; color: #f7f4ee; cursor: pointer;
  font: 600 13px/1 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(20, 30, 25, .55), 0 2px 6px rgba(20, 30, 25, .18); animation: vg-askbtn-in .16s ease both; }
.vg-askbtn[hidden] { display: none; }
.vg-askbtn .vg-face { width: 26px; height: 26px; }
.vg-askbtn .vg-face::after { display: none; }
.vg-askbtn:hover { background: #244b3c; }
.vg-askbtn:focus-visible { outline: 3px solid rgba(214, 178, 94, .7); outline-offset: 2px; }
@keyframes vg-askbtn-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vg-askbtn { animation: none; } }
@media print { .vg-askbtn { display: none !important; } }
/* First-visit tip: a word highlighted as if selected, and a note beside it explaining "highlight and ask". */
.vg-tipmark { position: fixed; z-index: 69; pointer-events: none; border-radius: 3px; background: rgba(214, 178, 94, .45);
  transform-origin: left center; animation: vg-tip-drag .7s cubic-bezier(.3, .7, .4, 1) .15s both; }
@keyframes vg-tip-drag { from { transform: scaleX(0); } }
.vg-tip { position: fixed; z-index: 71; width: min(330px, calc(100vw - 20px)); box-sizing: border-box; padding: 14px 14px 12px;
  border-radius: 16px; background: #1f3a2e; color: #f7f4ee; border: 1px solid rgba(255, 255, 255, .14);
  font: 400 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 18px 40px -14px rgba(20, 30, 25, .6), 0 2px 8px rgba(20, 30, 25, .2); animation: vg-askbtn-in .22s ease .75s both; }
.vg-tip p { margin: 0 0 11px; }
.vg-tip strong { font-weight: 700; color: #e9cf8f; }
.vg-tip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vg-tip-ask { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 13px 4px 4px; border: 0; border-radius: 999px;
  background: #f7f4ee; color: #1f3a2e; font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.vg-tip-ask .vg-face { width: 24px; height: 24px; flex: 0 0 24px; }
.vg-tip-ask .vg-face::after { display: none; }
.vg-tip-ask span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-tip-ok { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; background: transparent; color: #f7f4ee;
  font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; }
.vg-tip-ask:focus-visible, .vg-tip-ok:focus-visible { outline: 3px solid rgba(214, 178, 94, .7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .vg-tipmark, .vg-tip { animation: none; } }
@media print { .vg-tipmark, .vg-tip { display: none !important; } }
@media print { .vg-dock, .vg-launch, .vg-backdrop { display: none !important; } html.vg-docked, html.vg-docked body { overflow: visible; height: auto; margin-right: 0; } }
/* The menu opened from the header sits beside the panel, not under it. */
html.vg-docked .mobile-nav-inner{right:var(--vg-space)}

/* Generated by embed_site.py: sizes and narrower layouts for the page beside the open avatar panel. */
html.vg-docked .hero h1{font-size:clamp(48px,calc((100vw - var(--vg-space)) * 0.058),76px)}
html.vg-docked .section-heading h2,html.vg-docked .workflow-copy h2,html.vg-docked .privacy-copy h2,html.vg-docked .showcase-copy h2,html.vg-docked .contact-copy h2{font-size:clamp(38px,calc((100vw - var(--vg-space)) * 0.04),58px)}
html.vg-docked .hero h1{font-size:clamp(50px,calc((100vw - var(--vg-space)) * 0.058),78px)}
html.vg-docked .offline-copy h2{font-size:clamp(38px,calc((100vw - var(--vg-space)) * 0.045),60px)}
html.vg-docked .brand-logo{max-width:min(330px,calc((100vw - var(--vg-space)) * 0.46))}
html.vg-docked .footer-brand .brand-logo,html.vg-docked .footer-logo{max-width:min(390px,calc((100vw - var(--vg-space)) * 0.8))}
html.vg-docked .insights-copy h2{font-size:clamp(38px,calc((100vw - var(--vg-space)) * 0.042),66px)}
html.vg-docked .connected-panel h3{font-size:clamp(1.45rem,calc((100vw - var(--vg-space)) * 0.03),2.1rem)}
html.vg-docked .footer-brand-lockup img{max-width:min(420px,calc((100vw - var(--vg-space)) * 0.82))}
html.vg-docked .insights-landing-hero h1{font-size:clamp(48px,calc((100vw - var(--vg-space)) * 0.06),82px)}
html.vg-docked .index-cta-inner h2{font-size:clamp(34px,calc((100vw - var(--vg-space)) * 0.04),52px)}
html.vg-docked .article-hero h1{font-size:clamp(46px,calc((100vw - var(--vg-space)) * 0.055),76px)}
@media (min-width:1180px) and (max-width:1375px){html.vg-docked .desktop-nav{display:none}html.vg-docked .hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}html.vg-docked .hero-visual{max-width:760px}html.vg-docked .architecture-grid{grid-template-columns:repeat(2,1fr)}html.vg-docked .workflow-shell,html.vg-docked .showcase-grid,html.vg-docked .privacy-grid,html.vg-docked .contact-grid{grid-template-columns:1fr}html.vg-docked .privacy-visual{order:2}html.vg-docked .pricing-grid{grid-template-columns:1fr}html.vg-docked .price-card p{min-height:0}html.vg-docked .contact-grid{gap:40px}html.vg-docked .showcase-grid{gap:35px}}
@media (min-width:1180px) and (max-width:1284px){html.vg-docked .offline-grid{grid-template-columns:1fr;gap:38px}html.vg-docked .offline-mini-grid{grid-template-columns:1fr}}
@media (min-width:1180px) and (max-width:1375px){html.vg-docked .solution-slide{flex-basis:calc((100% - 18px)/2)}html.vg-docked .solution-card picture{height:250px}}
@media (min-width:1180px) and (max-width:1539px){html.vg-docked .site-header .brand-logo{height:50px;max-width:330px}}
@media (min-width:1180px) and (max-width:1204px){html.vg-docked .insights-grid{grid-template-columns:1fr;gap:34px}html.vg-docked .insights-copy h2{font-size:clamp(36px,9vw,50px)}html.vg-docked .insights-copy p{font-size:16px}html.vg-docked .dash-stat-grid{grid-template-columns:1fr 1fr 1fr}}
@media (min-width:1180px) and (max-width:1375px){html.vg-docked .client-strip-links{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}html.vg-docked .client-strip-links::-webkit-scrollbar{display:none}html.vg-docked .client-strip-links a{flex:0 0 auto}}
@media (min-width:1180px) and (max-width:1204px){html.vg-docked .journey-grid{grid-template-columns:1fr}html.vg-docked .connected-panel{grid-template-columns:1fr}html.vg-docked .update-panel{grid-template-columns:1fr;gap:8px}html.vg-docked .update-panel span{white-space:normal}html.vg-docked .connected-list{grid-template-columns:1fr 1fr}}
@media (min-width:1180px) and (max-width:1375px){html.vg-docked .site-header{height:76px;padding:0 14px;gap:12px}html.vg-docked .site-header .brand{flex:1 1 auto}html.vg-docked .site-header .brand-logo{height:auto;width:min(275px,48vw);max-width:none}html.vg-docked .desktop-nav,html.vg-docked .header-cta{display:none}html.vg-docked .menu-toggle{display:grid;width:46px;height:46px;flex:0 0 46px;place-content:center;gap:5px;border:1px solid rgba(67,58,48,.24);background:#f7f4ee;color:var(--ink);cursor:pointer}html.vg-docked .menu-toggle span{display:block;width:21px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}html.vg-docked .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}html.vg-docked .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}html.vg-docked .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}html.vg-docked .mobile-nav{display:block;position:fixed;left:0;right:0;top:0;height:100dvh;z-index:-1;visibility:hidden;opacity:0;background:rgba(34,33,30,.38);transition:opacity .2s ease,visibility .2s ease}html.vg-docked .mobile-nav.open{visibility:visible;opacity:1;z-index:-1}html.vg-docked .mobile-nav-inner{position:absolute;right:0;top:86px;width:min(410px,calc(100% - 18px));max-height:calc(100dvh - 98px);overflow:auto;background:#f7f4ee;border:1px solid rgba(67,58,48,.18);box-shadow:0 24px 55px rgba(45,37,28,.18);padding:22px}html.vg-docked .mobile-nav-label{padding:0 8px 11px;font-size:9px;letter-spacing:.16em;color:var(--brass);font-weight:850}html.vg-docked .mobile-nav a{display:block;padding:13px 8px;border-top:1px solid rgba(67,58,48,.12);font-family:Georgia,"Times New Roman",serif;font-size:20px;color:var(--ink)}html.vg-docked .mobile-nav a:hover{color:var(--forest)}html.vg-docked .mobile-nav .mobile-nav-cta{margin-top:12px;padding:13px 15px;background:var(--forest);color:#fff;border:0;font-size:17px}html.vg-docked .menu-open{overflow:hidden}html.vg-docked .journey-showcase{grid-template-columns:1fr;gap:34px}html.vg-docked .phone-shell{width:min(340px,82vw)}html.vg-docked .insights-grid{grid-template-columns:1fr;gap:34px}html.vg-docked .privacy-grid{grid-template-columns:1fr}html.vg-docked .deployment-card:nth-child(2),html.vg-docked .deployment-card:nth-child(3){margin-left:0}html.vg-docked .contact-grid{grid-template-columns:1fr}html.vg-docked .contact-next li{grid-template-columns:130px 1fr}}
@media (min-width:1180px) and (max-width:1539px){html.vg-docked .insight-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html.vg-docked .article-layout{grid-template-columns:210px minmax(0,1fr);gap:44px}html.vg-docked .article-hero{gap:36px}}
@media (min-width:1180px) and (max-width:1375px){html.vg-docked .insights-landing-hero,html.vg-docked .article-hero{grid-template-columns:1fr;gap:34px}html.vg-docked .insights-landing-hero{padding-top:62px}html.vg-docked .article-hero-media{max-width:760px}html.vg-docked .article-layout{grid-template-columns:1fr;max-width:800px}html.vg-docked .article-sidebar{position:static;grid-template-columns:1fr 1fr}html.vg-docked .article-toc{display:none}html.vg-docked .related-insights{padding-bottom:74px}}
@media (min-width:1180px) and (max-width:1284px){html.vg-docked .insight-card-grid,html.vg-docked .insight-card-grid-library{
    grid-template-columns:1fr;
  }html.vg-docked .insight-card-body{
    min-height:0;
  }}