/* the page around the mixed sections (tools/mix/mixkit.py) */
html,body{margin:0;padding:0}
html,body{overflow-x:clip}
/* V7 and V8 paint their chapters on one fixed layer that follows their own sections only;
   in a mix each of their sections carries its chapter colour itself */
.chapter-bg{display:none}
html body main .vx-v8[data-chapter=dark]{background:rgb(29,53,87)!important}
html body main .vx-v8[data-chapter=grey]{background:rgb(245,245,245)!important}
html body main .vx-v8[data-chapter=light]{background:#FFFFFF!important}
/* while the film runs, the hero photo is a fixed layer that closes into the story's screen: the hero and the story
   must let it show through (V7 and V8 do the same over their own backdrop), or the story covers it as it rises */
html.v8--fx-on body main .vx-v8.hero[data-chapter],html.v8--fx-on body main .vx-v8.story[data-chapter]{background:transparent!important}
/* the scope (audiences and industries) sits inside V8's story but is a white chapter of its own: it keeps its white
   ground over the story's transparent one, or its Dark Blue type is lost on the page's navy */
html body main .vx-v8 .scope[data-chapter=light]{background:#FFFFFF!important}
html.v7--fx-on body main .vx-v7.hero[data-chapter],html.v7--fx-on body main .vx-v7.story[data-chapter]{background:transparent!important}
/* the camera hides the photo as it ends and the story shows its screen as it pins: at the one scroll where both
   happen, the story was not live yet and neither showed. The photo now stays until the story's screen is there */
html:not(:has(.vx-v8.story.is-live)) body main .vx-v8.hero.cam-off .hero__media{visibility:visible!important}
html:not(:has(.vx-v7.story.is-live)) body main .vx-v7.hero.cam-off .hero__media{visibility:visible!important}
html body main .vx-v7[data-chapter=dark]{background:#000000!important}
html body main .vx-v7[data-chapter=grey]{background:rgb(245,245,245)!important}
html body main .vx-v7[data-chapter=light]{background:#FFFFFF!important}
/* outside every section: the sprites and the skip link */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.skip-link{position:absolute;left:16px;top:-100px;z-index:1000;padding:10px 16px;border-radius:8px;background:#FFFFFF;color:#1D3557;
  font:600 15px/1.2 "Rethink Sans",system-ui,sans-serif;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.skip-link:focus{top:16px}
html body .site-footer.vx-v8[data-chapter=dark]{background:rgb(29,53,87)!important}
html body .site-footer.vx-v7[data-chapter=dark]{background:#000000!important}

/* SCR-03 of 4 Nov 2026 is wider than the screen it replaced: its frame follows the image (src/screens/install.py) */
[data-scr="SCR-03"]{aspect-ratio:auto!important;height:auto!important}
[data-scr="SCR-03"] > img{position:static!important;display:block;width:100%!important;height:auto!important}
/* a section made of parts from several versions: a part's first child can open with a top margin (V7's film, V4's
   orbit), which collapsed out of the part and left a stripe of the page's own colour between two dark parts.
   Each part holds its children's margins */
html body main > section[data-part]{display:flow-root}

/* v10 only */
/* Meet Vera in parts: one section to the eye */
main [data-part]:not([data-part="1"]){padding-top:0!important;border-top:0!important}
main [data-part]:has(+ [data-part]){padding-bottom:0!important;border-bottom:0!important}
html body .vx-v5[data-part] .explode{margin-top:0}
/* V2's "Who decides" is its own navy block: even space above and below, no margin outside it */
html body main .vx-v2[data-part]{padding-top:clamp(80px,9vw,140px)!important;padding-bottom:clamp(80px,9vw,140px)!important}
html body main .vx-v2[data-part] .decide-row{margin-top:0}
/* V7's sections as in V7: transparent over its fixed backdrop, which its script fades from chapter to chapter */
html.v7--fx-on body main .vx-v7[data-chapter]{background:transparent!important}
/* V6's Behind GeoXtra: the second founder's portrait is aligned right with no width of its own, so it collapsed to
   nothing (Saba's photo never showed); it takes the column's width like the first one */
html body .vx-v6 .founder__row .founder__portrait{width:100%}
/* the play button over the Meet Vera film whenever it is paused (tools/mix/film_play.js) */
.vx-v7 .film__play{position:absolute;left:50%;top:50%;z-index:3;width:112px;height:112px;margin:-56px 0 0 -56px;padding:0;border:0;border-radius:50%;background:#FFFFFF;color:#1D3557;cursor:pointer;display:grid;place-items:center;box-shadow:0 14px 44px rgba(0,0,0,.4);transition:transform .25s,background-color .25s}
.vx-v7 .film__play:hover{background:#4CC9F0;transform:scale(1.06)}
.vx-v7 .film__play:focus-visible{outline:3px solid #4CC9F0;outline-offset:4px}
.vx-v7 .film__play svg{width:46px;height:46px;margin-left:6px;fill:currentColor}
.vx-v7 .film__play[hidden],.vx-v7 .film__veil[hidden]{display:none}
.vx-v7 .film__veil{position:absolute;inset:0 0 56px;z-index:2;background:rgba(16,30,52,.55);pointer-events:none}
/* the GeoXtra mark on a white core */
.vx-v4 .o-core{fill:#FFFFFF}

html body main .vx-v5[data-part]{background:#FFFFFF!important;padding-top:clamp(56px,6vw,96px)!important}
html body main .vx-v4[data-part]{--night:#0A1322;--night-2:#0C182B;--surface:#0F1C31;--surface-2:#132440;--line:rgba(174,191,205,.14);--line-2:rgba(174,191,205,.26)}
/* V2's "What you get" (V6): each moment drawn on an isometric plate in What Vera reads, level by level's manner
   (tools/mix/value_plates.py, put in by value_icons.add_art); the plates rise in and the Sky Blue lines draw themselves
   as each moment comes into view (value_icons.js) */
@media (min-width:768px){
  html body main .vx-v6 .value__item{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);column-gap:32px;align-items:center}
}
html body main .vx-v6 .value__art{display:flex;align-items:center;justify-content:center;margin:0 0 18px;padding:0;background:none;box-shadow:none}
html body main .vx-v6 .value__art .oa{width:100%;max-width:240px;height:auto;overflow:visible}
@media (max-width:767px){html body main .vx-v6 .value__art .oa{max-width:280px}}
/* the plates: an ink outline and edge, as the levels' plates have; a lit plate in a Sky Blue wash */
html body main .vx-v6 .vp-face{fill:rgba(255,255,255,.92);stroke:#1D3557;stroke-width:1.5;stroke-linejoin:round}
html body main .vx-v6 .vp-side{fill:#F5F5F5;stroke:#1D3557;stroke-width:1.5;stroke-linejoin:round}
html body main .vx-v6 .vp-side--r{fill:#F5F5F5}
html body main .vx-v6 .vp-plate.is-lit .vp-face{fill:#F5F5F5;stroke:#0381A2}
html body main .vx-v6 .vp-plate.is-lit .vp-side{fill:#F5F5F5;stroke:#0381A2}
/* what lies on the plates */
html body main .vx-v6 .vp-row{fill:none;stroke:#1D3557;stroke-width:1;stroke-linecap:round;opacity:.38}
html body main .vx-v6 .vp-row--on{stroke:#0381A2;opacity:.55}
html body main .vx-v6 .vp-mark{fill:none;stroke:#1D3557;stroke-width:1.4;stroke-linecap:round}
html body main .vx-v6 .vp-doc{fill:none;stroke:#0381A2;stroke-width:1.2;stroke-linejoin:round;opacity:.7}
html body main .vx-v6 .vp-path{fill:none;stroke:#1D3557;stroke-width:1.2;stroke-dasharray:5 4;opacity:.5}
html body main .vx-v6 .vp-thr{fill:none;stroke:#C55423;stroke-width:1.3;stroke-dasharray:7 4}
html body main .vx-v6 .vp-trend{fill:none;stroke:#0381A2;stroke-width:1.4;stroke-dasharray:5 4}
html body main .vx-v6 .vp-node{fill:#FFFFFF;stroke:#1D3557;stroke-width:1.5}
html body main .vx-v6 .vp-node--done{fill:#1D3557}
html body main .vx-v6 .vp-node--on{fill:#4CC9F0;stroke:#0381A2}
html body main .vx-v6 .vp-bar polygon{stroke:#1D3557;stroke-width:1.3;stroke-linejoin:round}
html body main .vx-v6 .vp-bar__l{fill:#FFFFFF}
html body main .vx-v6 .vp-bar__r{fill:#F5F5F5}
html body main .vx-v6 .vp-bar__t{fill:#F5F5F5}
html body main .vx-v6 .vp-bar.is-lit polygon{stroke:#0381A2}
html body main .vx-v6 .vp-bar.is-lit .vp-bar__l{fill:#AEBFCD}
html body main .vx-v6 .vp-bar.is-lit .vp-bar__r{fill:#4CC9F0}
html body main .vx-v6 .vp-bar.is-lit .vp-bar__t{fill:#F5F5F5}
/* drawn in: the plates rise into place one after another, then the Sky Blue lines draw and the flags come in */
html body main .vx-v6 .value__art .vp-plate,html body main .vx-v6 .value__art .vp-bar{opacity:0;transform:translateY(10px);
  transition:opacity .6s ease calc(var(--d,0s)),transform .8s cubic-bezier(.22,1,.36,1) calc(var(--d,0s))}
html body main .vx-v6 .value__art .vp-bar{transition-delay:.35s}
html body main .vx-v6 .value__art .vp-ink,html body main .vx-v6 .value__art .vp-trend{opacity:0;transition:opacity .6s ease .35s}
html body main .vx-v6 .value__art .oa-d{fill:none;stroke:#4CC9F0;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;
  stroke-dashoffset:1;transition:stroke-dashoffset 1.3s cubic-bezier(.65,0,.35,1) .55s}
html body main .vx-v6 .value__art .oa-d--late{transition-delay:1.1s}
html body main .vx-v6 .value__art .oa-flag{fill:#F7906E;stroke:#C55423;stroke-width:1.2;opacity:0;transition:opacity .4s ease 1.5s}
html body main .vx-v6 .value__art .oa-flag--sky{fill:#4CC9F0;stroke:#0381A2}
html body main .vx-v6 .value__art .oa-ring{fill:none;stroke:#F7906E;stroke-width:1.4;opacity:0;transition:opacity .4s ease 1.6s}
html body main .vx-v6 .value__art .vp-node--on{opacity:0;transition:opacity .4s ease 1.5s}
html body main .vx-v6 .value__item.is-drawn .value__art :is(.vp-plate,.vp-bar){opacity:1;transform:none}
html body main .vx-v6 .value__item.is-drawn .value__art :is(.vp-ink,.vp-trend,.vp-node--on,.oa-flag){opacity:1}
html body main .vx-v6 .value__item.is-drawn .value__art .oa-d{stroke-dashoffset:0}
html body main .vx-v6 .value__item.is-drawn .value__art .oa-ring{opacity:.75}
@media (prefers-reduced-motion:reduce){html body main .vx-v6 .value__art *{transition:none!important}}
/* (8 Nov 2026) Between reviews: each review a post with its sheet, the last signed off, the next still to come */
html body main .vx-v6 .vp-sign__post{stroke:#1D3557;stroke-width:1.5}
html body main .vx-v6 .vp-sign__foot{fill:#1D3557;opacity:.25}
html body main .vx-v6 .vp-sheet{fill:#FFFFFF;stroke:#1D3557;stroke-width:1.5}
html body main .vx-v6 .vp-sheet--next{fill:#F5F5F5;stroke-dasharray:4 3}
html body main .vx-v6 .vp-sheet__row{stroke:#1D3557;stroke-width:1.2;stroke-linecap:round;opacity:.45}
html body main .vx-v6 .vp-sheet__ok{fill:none;stroke:#1D3557;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v6 .value__art .vp-sign{opacity:0;transform:translateY(8px);transition:opacity .5s ease .3s,transform .7s cubic-bezier(.22,1,.36,1) .3s}
html body main .vx-v6 .value__item.is-drawn .value__art .vp-sign{opacity:1;transform:none}
html body main .vx-v6 .vp-shield{fill:#F5F5F5;stroke:none}
/* ---- Who we serve (V3): the heading on two lines with "Book a demo" at its right, the card labels in
   Sky Blue ---- */
html body main .vx-v3.who .section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:end}
html body main .vx-v3.who .section-head .eyebrow{grid-column:1 / -1}
html body main .vx-v3.who .h2{max-inline-size:26ch}
html body main .vx-v3.who .section-head .who__cta{margin:0;justify-self:end;padding-bottom:.4em}
/* 7 Nov 2026: the card labels in Sky Blue (they were Geo Earth Tone, off the site's blues) and the heading's lead-in
   in Sky Blue too (it was gray); a trial on this section before the rest of the site */
html body main .vx-v3 .who-card__title{color:#4CC9F0}
html body main .vx-v3.who .h2{color:#4CC9F0}
/* 6 Nov 2026: the audience in Geo Earth Tone leads each card, its outcome reads under it in smaller type */
html body main .vx-v3 .who-card__title{font-size:clamp(1.375rem,1.05rem + .9vw,2rem);font-weight:700;line-height:1.12;letter-spacing:-.03em;text-wrap:balance}
html body main .vx-v3 .who-card__outcome{margin-top:12px;color:rgba(255,255,255,.88);font-size:clamp(1rem,.94rem + .18vw,1.125rem);font-weight:500;
  line-height:1.42;letter-spacing:-.005em}
@media (max-width:767px){
  html body main .vx-v3.who .section-head{grid-template-columns:minmax(0,1fr)}
  html body main .vx-v3.who .section-head .who__cta{justify-self:start;margin-top:20px}
}
/* 6 Nov 2026: on the wide card row the titles and outcomes get a little more of the card's width, the title tops out
   a size lower: "Owners & operators" on one line, the engineers' title on two, each outcome on three */
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  html body main .vx-v3 .who-card__title,html body main .vx-v3 .who-card__outcome{width:calc(25% - clamp(24px,2.4vw,40px) - 10px)}
  html body main .vx-v3 .who-card__title{font-size:clamp(1.375rem,1.05rem + .8vw,1.75rem);text-wrap:wrap}
  html body main .vx-v3 .who-card__outcome{font-size:clamp(1rem,.95rem + .1vw,1.0625rem)}
}
/* 8 Nov 2026: each photograph's source at the end of its card's description, small, shown with it (build.py WHO_SOURCES) */
html body main .vx-v3 .who-card__src{display:block;margin-top:12px;color:rgba(255,255,255,.62);font-size:11px;line-height:1.4;letter-spacing:.01em;text-shadow:none}
/* V1's FAQ (V6's), compact: one light section instead of a full-screen dark title chapter followed by a separate
   list. The heading sits on the left and stays in view while the questions run down the right; the rows are
   tighter. About a third of the height it had */
html body main .vx-v6.faqs{display:flex;align-items:flex-start;gap:clamp(40px,6vw,112px);background:#F5F5F5;
  padding:clamp(88px,8vw,136px) max(var(--gutter,24px),(100vw - 1280px) / 2)}
html body main .vx-v6.faqs .chapter{flex:0 0 36%;height:auto!important;background:transparent!important;color:#1D3557;position:sticky;top:calc(var(--header-h,72px) + 32px)}
html body main .vx-v6.faqs .chapter__inner{display:block;height:auto!important;min-height:0!important;position:static!important;overflow:visible}
html body main .vx-v6.faqs .chapter__body{padding:0!important;max-width:none;margin:0}
html body main .vx-v6.faqs .chapter .eyebrow{margin-bottom:20px;color:#0381A2}
html body main .vx-v6.faqs .chapter .h2{max-width:12ch;color:#1D3557!important;font-size:clamp(30px,2.7vw,46px);line-height:1.06;letter-spacing:-.03em}
html body main .vx-v6.faqs .chapter em.hl{color:#0381A2}
html body main .vx-v6.faqs .faq__read{flex:1 1 auto;min-width:0;padding:0!important;background:transparent!important}
html body main .vx-v6.faqs .faq__wrap{display:block!important;max-width:none;padding:0!important;margin:0}
html body main .vx-v6.faqs .faq{max-width:none}
html body main .vx-v6.faqs .faq__item{background:transparent!important}
html body main .vx-v6.faqs .faq__q{padding:18px 0;font-size:clamp(16px,1.1vw,18px)}
html body main .vx-v6.faqs .faq__a{padding:0 48px 22px 0;font-size:16px;line-height:1.6}
html body main .vx-v6.faqs .faq__more{margin-top:28px}
@media (max-width:899px){
  html body main .vx-v6.faqs{flex-direction:column;gap:36px}
  html body main .vx-v6.faqs .chapter{position:static;flex:none;width:100%}
}
/* What Vera does (V4's steps beside the orbit): each step's line icon beside its number (tools/mix/value_icons.py
   add_step_icons). On the desktop scene, where one step shows at a time, the icon draws itself in each time its
   step becomes the current one, with a ring that pulses out once; elsewhere, and with reduced motion, it is drawn */
html body main .vx-v4 .vstep__top{display:flex;align-items:center;gap:16px}
html body main .vx-v4 .vstep__icon{position:relative;flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(76,201,240,.12);box-shadow:inset 0 0 0 1px rgba(76,201,240,.38);color:#4CC9F0}
html body main .vx-v4 .vstep__icon svg{width:26px;height:26px;overflow:visible}
html body main .vx-v4 .vstep__icon svg *{stroke-dasharray:1;stroke-dashoffset:0}
html body main .vx-v4 .vstep__icon::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 0 1px rgba(76,201,240,.55);opacity:0}
@media (prefers-reduced-motion:no-preference){
  html.v4--m-desk body main .vx-v4 .vstep__icon{scale:.7;opacity:0;transition:scale .6s cubic-bezier(.3,1.4,.5,1) .1s,opacity .4s ease .1s}
  html.v4--m-desk body main .vx-v4 .vstep__icon svg *{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .3s}
  html.v4--m-desk body main .vx-v4 .vstep.is-current .vstep__icon{scale:1;opacity:1}
  html.v4--m-desk body main .vx-v4 .vstep.is-current .vstep__icon svg *{stroke-dashoffset:0}
  html.v4--m-desk body main .vx-v4 .vstep.is-current .vstep__icon::after{animation:vstep-ring 1.4s ease-out .5s 1}
  @keyframes vstep-ring{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.7}}
}
/* the scope under the story (audiences, then industries), after Basic: the audience line centred, the industries
   still instead of sliding across the screen (cut at both edges), as two columns under a hairline with their labels
   in AA Sky */
html body main .vx-v8 .scope{padding-block:clamp(96px,10vw,160px) clamp(88px,9vw,140px)}
html body main .vx-v8 .scope__aud{justify-content:center;text-align:center}
html body main .vx-v8 .scope__rows{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px clamp(32px,4vw,72px)!important;
  max-width:1120px;margin:clamp(64px,7vw,104px) auto 0!important;overflow:visible!important;
  color:#1D3557;font-size:clamp(17px,.9rem + .35vw,21px)!important;font-weight:400!important;letter-spacing:-.005em!important;line-height:1.6!important}
html body main .vx-v8 .scope__rows > div{width:auto!important;white-space:normal!important;padding:24px 0 0!important;border-top:1px solid rgba(29,53,87,.14);
  text-wrap:pretty;transform:none!important;translate:none!important}
html body main .vx-v8 .scope__rows b{color:#0381A2;font-weight:700}
@media (max-width:767px){html body main .vx-v8 .scope__rows{grid-template-columns:minmax(0,1fr)}}
/* phones (6 Nov 2026): "For" over the three audiences, one under another, without the dots between them */
@media (max-width:767px){
  html body main .vx-v8 .scope__aud{flex-direction:column;align-items:center;gap:.35em}
  html body main .vx-v8 .scope__sep{display:none}
}
html body .vx-v3.proof{--charcoal:#1D3557;--charcoal-2:#1D3557;--stone:#F5F5F5;--bone:#FFFFFF;--sand:#F5F5F5;--sand-2:#AEBFCD;--ink-2:#607995;--ink-3:#607995;
  --on-dark-2:#AEBFCD;--on-dark-3:#AEBFCD;--hair-dark:rgba(174,191,205,.22);--clay:#1D3557;--clay-hover:#000000;--clay-ink:#0381A2;--ember:#4CC9F0;--signal-ink:#0381A2;
  --shadow:0 40px 80px -30px rgba(29,53,87,.28)}
/* Your data, your agreement (V2's product): redesigned. The title larger, the IT line and an outlined pill for the
   link on the left; on the right, owning the data is the lead row on Dark Blue and the other six each have their own
   line icon in an AA Sky circle. The rows rise in turn as their hairlines draw (V2's own is-drawn) */
html body main .vx-v2 .trust{background:#F5F5F5!important;padding-block:clamp(88px,8vw,140px)}
html body main .vx-v2 .trust__title{grid-column:1 / span 5;max-width:11ch;color:#1D3557;font-size:clamp(34px,3.2vw,52px);font-weight:600;line-height:1.04;letter-spacing:-.03em}
html body main .vx-v2 .trust__it{grid-column:1 / span 5;margin-top:24px;max-width:28ch;color:#607995;font-size:17px;line-height:1.55}
html body main .vx-v2 .trust__link{grid-column:1 / span 5;display:inline-flex;align-items:center;margin-top:28px;padding:14px 22px;border:1px solid rgba(29,53,87,.28);border-radius:999px;
  color:#1D3557;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;background-image:none;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
html body main .vx-v2 .trust__link::after,html body main .vx-v2 .trust__link::before{display:none!important}
html body main .vx-v2 .trust__link:hover{background:#1D3557;border-color:#1D3557;color:#FFFFFF}
html body main .vx-v2 .trust__list{grid-column:6 / -1;column-gap:clamp(24px,2.6vw,44px)}
html body main .vx-v2 .trust__list li{padding:22px 0 22px 58px;color:#1D3557;font-size:17px;font-weight:500;line-height:1.45;
  transition:opacity .6s ease calc(var(--d,0) * .08s),translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--d,0) * .08s)}
html body main .vx-v2 .trust__list li::after{left:0;top:15px;width:40px;height:40px;border:0!important;border-radius:50%;transform:none!important;background:rgba(76,201,240,.16) center / 20px no-repeat}
html body main .vx-v2 .trust__list li:first-child{grid-column:1 / -1;margin-bottom:14px;padding:30px 36px 30px 100px;border-radius:20px;background:#1D3557;color:#FFFFFF;
  font-size:clamp(19px,1.35vw,23px);line-height:1.4;box-shadow:0 30px 60px -36px rgba(29,53,87,.6)}
html body main .vx-v2 .trust__list li:first-child::before{display:none}
html body main .vx-v2 .trust__list li:first-child::after{left:32px;top:50%;width:46px;height:46px;margin-top:-23px;background-color:rgba(76,201,240,.2);background-size:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234CC9F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5L12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(2){--d:1}html body main .vx-v2 .trust__list li:nth-child(2)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11a6.5 6.5 0 0 1 13 0c0 4.8-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(3){--d:2}html body main .vx-v2 .trust__list li:nth-child(3)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19c.6-3 2.8-4.8 5.5-4.8s4.9 1.8 5.5 4.8'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M16 14.3c2.3.2 4 1.8 4.5 4.7'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(4){--d:3}html body main .vx-v2 .trust__list li:nth-child(4)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='3.5'/%3E%3Cpath d='M10.5 12.5L19 4M16 7l2.5 2.5M14 9l2 2'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(5){--d:4}html body main .vx-v2 .trust__list li:nth-child(5)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 13.7-5.6L20 8.5M20 4v4.5h-4.5M20 12a8 8 0 0 1-13.7 5.6L4 15.5M4 20v-4.5h4.5'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(6){--d:5}html body main .vx-v2 .trust__list li:nth-child(6)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='6' rx='1.5'/%3E%3Crect x='4' y='14' width='16' height='6' rx='1.5'/%3E%3Cpath d='M8 7h.01M8 17h.01'/%3E%3C/svg%3E")}
html body main .vx-v2 .trust__list li:nth-child(7){--d:6}html body main .vx-v2 .trust__list li:nth-child(7)::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230381A2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6M3.5 4v3.5H7'/%3E%3C/svg%3E")}
html.v2--js:not(.v2--rm) body main .vx-v2 .trust__list li:not(.is-drawn){opacity:0;translate:0 18px}
@media (max-width:959px){html body main .vx-v2 .trust__title,html body main .vx-v2 .trust__it,html body main .vx-v2 .trust__link,html body main .vx-v2 .trust__list{grid-column:1 / -1}html body main .vx-v2 .trust__list li:first-child{padding:24px 24px 24px 84px}html body main .vx-v2 .trust__list li:first-child::after{left:24px}}
html body main section.trust-sec.vx-v2{display:flow-root;padding:0;margin:0;background:#F5F5F5}
html body main section.trust-sec.vx-v2 > .trust{margin-top:0}
html body main .vx-v2 .trust__title{max-width:none!important}
html body main .vx-v2 .trust__title .tt-line{white-space:nowrap}
html body main .vx-v6 .value__grid > .value__side{grid-column:1;align-self:start;max-width:30em}
html body main .vx-v6 .value__side .eyebrow{margin:0 0 18px}
html body main .vx-v6 .value__side .h2{margin:0;max-width:11em;color:#1D3557;font-size:clamp(34px,1rem + 2.3vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.035em}
html body main .vx-v6 .value__side .h2 em.hl{font-style:normal;color:#0381A2}
html body main .vx-v6 .value__side .lead{margin-top:clamp(22px,2.4vw,34px);max-width:22em;font-size:clamp(19px,1.3vw,23px);line-height:1.42}
html body main .vx-v6 .value__side .lead strong{color:#1D3557;font-weight:700}
@media (min-width:960px){html.v6--motion body main .vx-v6 .value__grid > .value__side{position:sticky;top:calc(var(--header-h) + 40px)}}
html body main .vx-v6.value .chapter--value,html body main .vx-v6 .chapter--value .chapter__inner{position:relative;height:auto!important;min-height:0!important}
html body main .vx-v6 .chapter--value .chapter__body{padding-top:calc(var(--header-h) + clamp(56px,7vw,104px));padding-bottom:clamp(40px,5vw,72px)}
html body main .vx-v4 .behind__label{gap:18px;font-size:clamp(16px,1.3vw,20px);font-weight:700;letter-spacing:.18em}
html body main .vx-v4 .behind__label::before{width:48px;height:2px}
/* What Vera reads and What Vera does: their titles level (both columns from the top, the orbit centred), larger and
   bolder than the other labels; more room round the two cards; the progress dashes hidden for now */
@media (min-width:960px){html body main .vx-v4 .flow__grid > .flow__src,html body main .vx-v4 .flow__grid > .flow__steps{align-self:start}}
html body main .vx-v4 .flow :is(.layers__label){font-size:clamp(15px,1.1vw,18px)!important;font-weight:800!important;letter-spacing:.2em!important;gap:14px!important}
html body main .vx-v4 .flow .layers__grid{gap:20px;margin-top:28px}
html body main .vx-v4 .flow .layers__line{margin-top:30px}
html body main .vx-v4 .flow__ticks{display:none!important}
html body main .vx-v4 .flow__decide{width:100%;margin:clamp(20px,2.8vh,28px) 0 clamp(8px,1.4vh,16px);padding:16px 22px;border:1px solid rgba(76,201,240,.32);border-radius:14px;
  background:linear-gradient(180deg,rgba(76,201,240,.07),rgba(76,201,240,.02));box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
html body main .vx-v4 .flow__decide-label{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:#4CC9F0;font-size:12.5px;
  font-weight:600;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
html body main .vx-v4 .flow__decide-label::before{content:"";flex:none;width:26px;height:1px;background:currentColor}
html body main .vx-v4 .flow__decide-text{margin:0;color:#FFFFFF;font-size:17px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
/* What Vera reads / does on black, and its opening (FLOW_INTRO) */
html body main section.vx-v4.vera{background:#000000!important}
@media (prefers-reduced-motion:no-preference){
  html.v4--m-desk body main .vx-v4 .flow__core{opacity:0;clip-path:circle(0% at 50% 50%);
    transition:opacity .9s ease,clip-path 1.2s cubic-bezier(.22,1,.36,1)}
  html.v4--m-desk body main .vx-v4 .flow__src{opacity:0;clip-path:inset(-80px 100% -80px -80px);
    transition:opacity .8s ease .7s,clip-path 1.1s cubic-bezier(.22,1,.36,1) .7s}
  html.v4--m-desk body main .vx-v4 .flow__steps{opacity:0;clip-path:inset(-80px -80px -80px 100%);
    transition:opacity .8s ease 1.35s,clip-path 1.1s cubic-bezier(.22,1,.36,1) 1.35s}
  html.v4--m-desk body main .vx-v4 .flow__wires{opacity:0;transition:opacity .8s ease 1.2s}
  html.v4--m-desk body main .vx-v4 .flow.is-intro .flow__core{opacity:1;clip-path:circle(80% at 50% 50%)}
  html.v4--m-desk body main .vx-v4 .flow.is-intro .flow__src{opacity:1;clip-path:inset(-80px -80px -80px -80px)}
  html.v4--m-desk body main .vx-v4 .flow.is-intro .flow__steps{opacity:1;clip-path:inset(-80px -80px -80px -80px)}
  html.v4--m-desk body main .vx-v4 .flow.is-intro .flow__wires{opacity:1}
}
html body main .vx-v3 .logo-row .logo-google{display:block;width:auto;height:28px;max-width:min(80%,150px);color:#607995;opacity:.62;
  transition:color .3s ease,opacity .3s ease}
html body main .vx-v3 .logo-row li:hover .logo-google{opacity:1}
html body main .vx-v3 .logo-row .logo-google path{transition:fill .3s ease}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(1){fill:#EA4335}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(2){fill:#FBBC05}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(3){fill:#4285F4}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(4){fill:#34A853}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(5){fill:#EA4335}
html body main .vx-v3 .logo-row li:hover .logo-google path:nth-of-type(6){fill:#4285F4}
/* the partners' colour logos, over the plain ones in the same box, shown on hover */
html body main .vx-v3 .logo-row li > img{grid-area:1 / 1}
html body main .vx-v3 .logo-row img.logo-colour{filter:none;opacity:0}
html body main .vx-v3 .logo-row li:hover > img:not(.logo-colour){opacity:0}
html body main .vx-v3 .logo-row li:hover > img.logo-colour{opacity:1}
/* the orbit's points: the dot, and once its step is reached its step's icon in its place, simply swapped
   (6 Nov 2026: no draw-in, spring or ring pulse) */
html body main .vx-v4 .o-node__ico{color:#4CC9F0;opacity:0;transition:none}
html body main .vx-v4 .o-node__ico *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
html body main .vx-v4 .o-node.is-on .o-node__ico{opacity:1}
html body main .vx-v4 .o-node .o-node__dot{transition:none}
html body main .vx-v4 .o-node.is-on .o-node__dot{opacity:0}
/* no dotted rings round the centre */
html body main .vx-v4 .orbit .o-guide,html body main .vx-v4 .orbit .o-spin-wrap{display:none}
/* What Vera does (its label and the decision line) comes in with the first step, not before */
html.v4--m-desk body main .vx-v4 .flow__steps :is(.layers__label--steps,.flow__decide){transition:opacity .6s ease,translate .8s cubic-bezier(.16,.84,.24,1)}
html.v4--m-desk body main .vx-v4 .flow__steps:not(:has(.vstep.is-current)) :is(.layers__label--steps,.flow__decide){opacity:0;translate:0 18px}
html body main .vx-v4 .flow .layers__label .lbl-ai{display:block;flex:none;width:1.25em;height:1.25em;margin-right:6px}
html body main .vx-v4 .flow .layers__label .lbl-ai svg{display:block;width:100%;height:100%;fill:currentColor}
html body main .vx-v4 .flow .layers__label .lbl-act svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v4 .flow .layers__line--note{display:flex;align-items:flex-start;gap:14px;max-width:46ch;padding:16px 20px 17px 16px;border-radius:14px;
  border:1px solid rgba(76,201,240,.3);background:rgba(76,201,240,.06);color:#AEBFCD;font-size:16px;line-height:1.5}
html body main .vx-v4 .flow .note-i{flex:none;width:22px;height:22px;margin-top:1px;color:#4CC9F0}
html body main .vx-v4 .flow .note-i svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
html body main .vx-v4 .flow .note-i .note-i__dot{fill:currentColor;stroke:none}
@media (max-width:959px){html body main .vx-v4 .flow .layers__line--note{max-width:none;width:100%;box-sizing:border-box}}   /* 8 Nov 2026: the full width on tablets and phones */
html.v4--m-desk body main .vx-v4 .flow__steps .vstep__top{padding-bottom:6px}
/* 6 Nov 2026, last: each step's icon back over its title (beside it was tried), in a tile of its own: a rounded
   square with a Sky Blue wash and glow, set a little apart from the title */
html.v4--m-desk body main .vx-v4 .flow__steps .vstep__top{padding-bottom:18px}
/* and each step in a box of its own, with a border (6 Nov 2026) */
html body main .vx-v4 .flow__steps .vstep{padding:clamp(20px,2.6vh,28px) clamp(20px,1.8vw,28px);border:1px solid rgba(76,201,240,.24);border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
html body main .vx-v4 .flow__steps .vsteps{gap:14px}
html body main .vx-v4 .flow__steps .vstep__icon{width:58px;height:58px;border-radius:16px;
  background:linear-gradient(150deg,rgba(76,201,240,.26),rgba(76,201,240,.05) 70%);
  box-shadow:inset 0 0 0 1px rgba(76,201,240,.45),0 14px 34px -14px rgba(76,201,240,.55)}
html body main .vx-v4 .flow__steps .vstep__icon svg{width:28px;height:28px}
html body main .vx-v4 .flow__steps .vstep__icon::after{border-radius:16px}
/* the decision line under every step */
html.v4--m-desk body main .vx-v4 .flow__steps .flow__decide + .vsteps{margin-top:clamp(16px,2.4vh,24px)}
/* the closing line, the last thing to come in: larger, its last words in Sky Blue, the step behind it stepping back */
html body main .vx-v4 .flow .vsteps__after{max-width:19ch;font-size:clamp(26px,2.3vw,38px)!important;font-weight:700;line-height:1.12!important;letter-spacing:-.025em!important}
html body main .vx-v4 .flow .vsteps__after em{font-style:normal;color:#4CC9F0}
html.v4--m-desk body main .vx-v4 .flow .vsteps__after{margin-top:clamp(24px,3.6vh,40px)}
html.v4--m-desk body main .vx-v4 .flow.is-done .vstep.is-current{opacity:.32}
/* Meet Vera's opening, pinned: a full window with its words in the middle (VERA_PIN) */
@media (min-width:960px){
  html body main section.vx-v7.vera.is-pinned{padding-block:0}
  /* by its own class: once pinned, the box sits inside the pin's spacer, no longer the section's child */
  html body main section.vx-v7.vera .vera-box{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;
    box-sizing:border-box;padding-top:var(--header-h)}
  html body main section.vx-v7.vera .vera__head .lead .vl-in{display:block}
  html body main section.vx-v7.vera .vera-box{position:relative}
  /* the label large in the middle first, then shrinking into its place (its own copy, aria-hidden) */
  html body main section.vx-v7.vera .vera-intro{position:absolute;margin:0;width:max-content;max-width:100%;line-height:1;transform-origin:0 0;pointer-events:none;
    color:#FFFFFF;font-size:clamp(26px,3vw,54px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap}
  html body main section.vx-v7.vera .vera-intro .vi-w{display:inline-block}
  html body main section.vx-v7.vera .vera-intro .lbl-ai{display:inline-block;width:1.05em;height:1.05em;margin-right:.75em;vertical-align:-.12em}
  html body main section.vx-v7.vera .vera-intro .lbl-ai svg{display:block;width:100%;height:100%;fill:currentColor}
}
/* the label white, Vera and its AI mark in Sky Blue (the large one in the middle too) */
html body main section.vx-v7.vera .vera__head .eyebrow{color:#FFFFFF!important}
html body main section.vx-v7.vera :is(.vera__head .eyebrow,.vera-intro) :is(.lbl-hl,.lbl-ai){color:#4CC9F0}
/* the label's AI mark */
html body main .vx-v7 .vera__head .eyebrow .lbl-ai{display:inline-block;width:1.25em;height:1.25em;margin-right:1.1em;vertical-align:-.28em}
html body main .vx-v7 .vera__head .eyebrow .lbl-ai svg{display:block;width:100%;height:100%;fill:currentColor}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  html.v7--fx-desk body main section.vx-v7.story{height:580vh}
  html.v7--fx-desk body main section.vx-v7.story > .story__pin{position:sticky;top:0}
}
/* the exploded stack with six plates (tools/mix/vera_levels.py) */
/* its title: centred, bold, between a label and the section headings in size; "Vera" in Sky Blue (no highlight bar under it, 6 Nov 2026) */
html body main .vx-v5 .xp-heading{margin:clamp(14px,2.6vh,30px) auto clamp(8px,1.4vh,18px);text-align:center;color:#1D3557;font-size:clamp(28px,1rem + 1.7vw,46px);
  font-weight:700;line-height:1.1;letter-spacing:-.03em}
html body main .vx-v5 .xp-hl{position:relative;color:#0381A2;white-space:nowrap}
html body main .vx-v5 .xp-heading{position:relative;z-index:0}
/* each level's icon in its circle (the circle lights as its number did) */
html body main .vx-v5 .vstep__num--ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* (no longer used: an icon before the title) */
/* number, icon and title on one line, centred on the number's middle (where its line from the plate meets it): the title
   row as tall as the number, on one line; the icon after the title on both sides */
html body main .vx-v5 .vstep{width:min(380px,calc(50% - var(--hd) - 72px))}
html body main .vx-v5 .vstep__title{display:flex;align-items:center;gap:10px;min-height:34px;margin:0 0 6px;white-space:nowrap;
  font-size:clamp(17px,1.25vw,20px);line-height:1.2}
html body main .vx-v5 .vstep .vstep__title{flex-direction:row-reverse;justify-content:flex-end}   /* the icon after the title, on every level */
html body main .vx-v5 .vstep:nth-child(even) .vstep__title{justify-content:flex-start}
/* phones and tablets: the levels as one list, every title on the left beside its circle, free to wrap */
@media (max-width:959.98px){
  html body main .vx-v5 .vstep,html body main .vx-v5 .vstep:nth-child(even){text-align:left}
  html body main .vx-v5 .vstep .vstep__title,html body main .vx-v5 .vstep:nth-child(even) .vstep__title{display:block;min-height:0;margin-top:5px;white-space:normal;text-align:left}
}
html body main .vx-v5 .vstep__title .lvl-ico{flex:none;display:grid;place-items:center;width:32px;height:32px;margin:0;
  border-radius:9px;background:rgba(76,201,240,.14);color:#0381A2}
html body main .vx-v5 .vstep__title .lvl-ico svg{width:62%;height:62%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v5 .xp{transform:translateZ(calc((2.5 - var(--i)) * var(--gap)))}
html body main .vx-v5 .xline{height:calc(5 * 120px);transform:translateZ(-300px) rotateX(-90deg)}
html body main .vx-v5 .xline--a,html body main .vx-v5 .xline--c{top:calc(100% - 600px)}
html body main .vx-v5 .xline--b{top:-600px}
html body main .vx-v5 .vstep{top:calc(50% + (var(--k) - 2.5) * var(--sp) - 17px)}
html body main .vx-v5 .vstep:nth-child(1){--k:1}html body main .vx-v5 .vstep:nth-child(2){--k:2}
html body main .vx-v5 .vstep:nth-child(3){--k:3}html body main .vx-v5 .vstep:nth-child(4){--k:4}
html body main .vx-v5 .vstep:nth-child(5){--k:5}
html body main .vx-v5 .xp-ico{fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v5 .xp-ico *{vector-effect:non-scaling-stroke}
html body main .vx-v5 .xp-mark *{vector-effect:none}
html body main .vx-v5 .vstep__ico{width:20px;height:20px;margin-right:10px;vertical-align:-3px;fill:none;stroke:#0381A2;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v5 .vstep__num--mark{padding:6px;background:#FFFFFF}
html body main .vx-v5 .vstep__num--mark svg{display:block;width:100%;height:100%}
html body main .vx-v5 .vstep--surface .vstep__title{font-weight:700}
@media (max-width:959px),(max-height:639px){
  html body main .vx-v5 .xstack{height:calc(760px * var(--xs))}
}
/* 6 Nov 2026: no hairline over the footer (a light seam along the foot of the closing photo) */
html body .site-footer.vx-v6{border-top:0}
html body main .vx-v4 .founder__in{display:inline-flex;align-items:center;gap:9px;margin-top:16px;color:#4CC9F0;font-size:15px;
  font-weight:600;letter-spacing:-.005em;text-decoration:none;transition:color .2s}
html body main .vx-v4 .founder__in:hover{color:#FFFFFF}
html body main .vx-v4 .founder__name{margin-top:28px;color:#FFFFFF;font-size:clamp(22px,1.8vw,28px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
html body main .vx-v4 .founder__role{margin-top:6px;color:#4CC9F0;font-size:15px;font-weight:600;letter-spacing:.01em}
html body main .vx-v4 .founder__line{margin-top:16px;color:rgba(255,255,255,.8);font-size:clamp(16px,1.15vw,18px);line-height:1.6;letter-spacing:-.005em}
html body main .vx-v4 .founder__in .in-mark{width:18px;height:18px;fill:currentColor}
/* 7 Nov 2026: why GeoXtra exists, over the founders, and the way on to the About page's story */
html body main .vx-v4 .behind__why{max-width:none;margin:calc(-1 * clamp(16px,2.4vw,40px)) 0 clamp(48px,6vw,88px)}
html body main .vx-v4 .behind__why-line{max-width:34em;color:#FFFFFF;font-size:clamp(24px,1rem + 1.6vw,40px);font-weight:700;line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
html body main .vx-v4 .behind__why-link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,2vw,26px);color:#4CC9F0;
  font-size:17px;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(76,201,240,.45);padding-bottom:3px;transition:color .2s,border-color .2s}
html body main .vx-v4 .behind__why-link span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
html body main .vx-v4 .behind__why-link:hover{color:#FFFFFF;border-color:#FFFFFF}
html body main .vx-v4 .behind__why-link:hover span{transform:translateX(4px)}
html body .site-footer .footer__in{display:inline-flex;align-items:center;gap:8px}
html body .site-footer .footer__in .in-mark{width:15px;height:15px;fill:currentColor}
/* the hero's words centred in the window on wide screens, between the header and room for the Scroll cue (they sat at
   the bottom, and a fixed extra push sent them up to the header on short windows); the title scales with the height too */
@media (min-width:960px){
  /* 6 Nov 2026, last: centred in the first full view, across and down (equal room over and under, the header inside
     the top half), the words centred, the title on three lines, the line and the buttons stacked under it */
  html body main section.vx-v7.hero{align-items:stretch;min-height:max(100svh,600px)}
  html body main .vx-v7 .hero__head{grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;text-align:center;
    min-height:max(100svh,600px);box-sizing:border-box;padding-block:max(calc(var(--header-h) + 28px),13vh)}
  /* 7 Nov 2026: and lower than the middle (about 8vh), the Scroll cue still clear under the buttons */
  html body main .vx-v7 .hero__head{padding-top:calc(max(calc(var(--header-h) + 28px),13vh) + 11vh);padding-bottom:7vh}
  /* the Scroll cue at the foot of the first view, a set gap over its bottom edge (it sat just under the buttons) */
  html body main .vx-v7 .hero__cue{bottom:clamp(24px,4vh,40px)}
  html body main section.vx-v7.hero .hero__head .hero__eyebrow{justify-self:center}
  html body main .vx-v7 .hero__title{max-width:16.5em;font-size:min(clamp(34px,.8rem + 4.1vw,80px),10svh)!important}
  html body main .vx-v7 .hero__life{grid-column:1;justify-self:center;margin-top:clamp(22px,3.4vh,36px)}
  html body main .vx-v7 .hero__btns{grid-column:1;justify-self:center;justify-content:center;margin-top:clamp(24px,3.6vh,36px)}
}
/* 6 Nov 2026: the header's Book a demo waits while the hero's own buttons are in view, and comes in once they scroll
   away (as Apple's Buy button does): while it waits it takes no room, so Log in sits at the edge and slides over as it
   arrives (HEADER_CTA) */
@media (min-width:960px){html body .site-header.vx-v7 .nav__right{min-width:200px;justify-content:flex-end}}   /* the links in the middle stay put */
html body .site-header.vx-v7 .nav__cta{max-width:200px;overflow:hidden;white-space:nowrap;
  transition:max-width .6s cubic-bezier(.16,.84,.24,1),padding .6s cubic-bezier(.16,.84,.24,1),margin .6s cubic-bezier(.16,.84,.24,1),
    opacity .4s ease .15s,scale .6s cubic-bezier(.16,.84,.24,1),visibility 0s linear 0s}
html body .site-header.vx-v7.cta-wait .nav__cta{max-width:0;padding-inline:0;margin-left:-22px;border-width:0;opacity:0;scale:.9;visibility:hidden;pointer-events:none;
  transition:max-width .45s cubic-bezier(.3,0,.2,1),padding .45s cubic-bezier(.3,0,.2,1),margin .45s cubic-bezier(.3,0,.2,1),
    opacity .2s ease,scale .3s ease,visibility 0s linear .45s}
@media (prefers-reduced-motion:reduce){html body .site-header.vx-v7 .nav__cta{transition:none!important}}
html body .site-header.vx-v7.h-boot,html body .site-header.vx-v7.h-boot *{transition:none!important}   /* its first frame, no fade */
/* at the hero's threshold: out of sight with no fade while it changes, then down from the top (HEADER_CTA swap) */
html body .site-header.vx-v7.h-hide{transform:translateY(-100%)}
html body .site-header.vx-v7.h-hide,html body .site-header.vx-v7.h-hide *{transition:none!important}
html body .site-header.vx-v7.h-drop{transition:transform .55s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){html body .site-header.vx-v7.h-hide{transform:none}}
/* 7 Nov 2026: the hero's photo under a dark blue ground: a Navy veil over all of it (.62; the first pass had .34, then .52)
   and the shade's black turned Navy, deepest at the foot where the words sit and at the top under the header */
html body main .vx-v7 .hero__shade{background:linear-gradient(rgba(10,19,34,.62),rgba(10,19,34,.62)),linear-gradient(0deg,rgba(10,19,34,.96) 0%,rgba(10,19,34,.82) 40%,rgba(10,19,34,.38) 70%,rgba(10,19,34,.64) 100%)}
/* "AI for Geotechnical Assets" on a dark glass ground with a Sky Blue edge, so it reads over the photo */
html body main section.vx-v7.hero .hero__eyebrow{justify-self:start;width:max-content;max-width:100%;padding:0!important;border-radius:0;
  background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:#4CC9F0!important;text-shadow:0 1px 12px rgba(0,0,0,.55)}   /* 6 Nov 2026: no ground behind it */
/* 7 Nov 2026: a fine Sky Blue line either side of it, fading out away from the words (spans: every label's ::before and
   ::after are switched off site-wide) */
html body main section.vx-v7.hero .hero__eyebrow{display:inline-flex;align-items:center;gap:18px}
html body main section.vx-v7.hero .hero__eyebrow .eb-line{flex:none;width:clamp(36px,5vw,72px);height:1px;background:linear-gradient(90deg,rgba(76,201,240,0),rgba(76,201,240,.85))}
html body main section.vx-v7.hero .hero__eyebrow .eb-line--r{background:linear-gradient(90deg,rgba(76,201,240,.85),rgba(76,201,240,0))}
@media (max-width:959.98px){   /* phones and tablets: the words alone, at the left, on one line (no lines either side) */
  html body main section.vx-v7.hero .hero__eyebrow{white-space:nowrap}
  html body main section.vx-v7.hero .hero__eyebrow .eb-line{display:none}
}
html body main .vx-v7 .hero__title{font-size:clamp(34px,.9rem + 4.6vw,86px)}
/* the header taller (more room over and under its contents): 68px on wide screens (V4's pins already reckon on
   68), 64px on phones; the sections' own measures read it live */
html body .vx-v7{--header-h:64px!important}
@media (min-width:960px){html body .vx-v7{--header-h:84px!important}}   /* 6 Nov 2026: 84 (was 68), more room over it */
@media (min-width:1024px){html body main .vx-v7 .hero__life{max-width:none;white-space:nowrap}}   /* "Day to day, ..." on one line */
/* the line and the buttons on one centre line across the hero (they were bottom-aligned) */
@media (min-width:960px){html body main .vx-v7 .hero__life,html body main .vx-v7 .hero__btns{align-self:center}}
html body .site-header.vx-v7 .nav__logo{width:160px;height:29px}
@media (min-width:960px){html body .site-header.vx-v7 .nav__logo{width:196px;height:35px}}   /* 6 Nov 2026: bigger (was 150 x 27) */
html body .site-header.vx-v7 .nav__link,html body .site-header.vx-v7 .nav__trigger,html body .site-header.vx-v7 .nav__login{font-size:16px}
html body .site-header.vx-v7 .nav__cta{min-height:40px;padding:0 20px;font-size:15px}
/* the product's tabs: big line, points and who it is for (tools/mix/product_copy.py) */
html body main .vx-v2.product .console__tabs{grid-template-columns:repeat(6,minmax(0,1fr))}   /* six tabs on one row (Project Intelligence) */
html body main .vx-v2.product .pc__line{margin:0;color:#FFFFFF;font-size:clamp(28px,min(2.75vw,5.4vh),46px);font-weight:700;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
html body main .vx-v2.product .pc__w{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;vertical-align:top}
html body main .vx-v2.product .pc__w > span{display:inline-block}
html body main .vx-v2.product .pc__list{display:grid;gap:clamp(8px,1.4vh,13px);margin:clamp(18px,3vh,30px) 0 0;padding:0;list-style:none}
html body main .vx-v2.product .pc__list li{position:relative;padding-left:30px;color:#AEBFCD;font-size:clamp(15px,min(1.15vw,2.1vh),17.5px);font-weight:500;line-height:1.42;letter-spacing:-.005em}
html body main .vx-v2.product .pc__list li::before{content:"";position:absolute;left:0;top:.7em;width:16px;height:2px;border-radius:2px;background:#4CC9F0;transform-origin:0 50%}
html body main .vx-v2.product .pc__for{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:clamp(14px,2.2vh,22px) 0 0}
/* the screen with who it is for under it, in the panel's second column, sized as the screen alone was */
html body main .vx-v2.product .pc__media{display:grid;min-width:0}
@media (min-width:960px){
  /* 6 Nov 2026, later: taller screens: a wider column for them and a 16:10 frame (it was 16:9) */
  html body main .vx-v2.product .console__panel{grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr)}
  html body main .vx-v2.product .console .pc__media{justify-self:end;align-self:center;width:min(100%,calc(var(--avail) * 16 / 10))}
  html body main .vx-v2.product .console .pc__media > .frame--shot{aspect-ratio:16 / 10}
  /* the Field app's phone as before (it has no line under it, so the room kept for one is its own) */
  html body main .vx-v2.product .console .pc__media > .frame--phone{width:min(260px,calc((var(--avail) + 64px) * 9 / 19))}
  html body main .vx-v2.product .console__copy .pc__for{margin-top:clamp(18px,3vh,28px);padding-top:clamp(14px,2.2vh,20px);border-top:1px solid rgba(174,191,205,.18)}
  html body main .vx-v2.product .console .pc__media > .frame--shot{width:100%;justify-self:stretch}
  html body main .vx-v2.product .console .console__panel--phone .pc__media{width:auto;justify-self:stretch;justify-items:center;text-align:center}
  /* 6 Nov 2026: the Field app's phone centred in the space beside the words, its next screens stacked behind it to the
     right, each a phone of its own; with the scroll the next comes forward and the one before steps out to the left
     (data-pos, set by product_tour.js: 0 the open screen, 1 and 2 behind it, -1 gone by) */
  html body main .vx-v2.product .console .pc__media > .frame--phone{overflow:visible;border:0;border-radius:0;background:none;box-shadow:none;translate:-14% 0}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img{border-radius:30px;box-shadow:0 0 0 1px rgba(174,191,205,.35),0 30px 60px -28px rgba(0,0,0,.85);
    transform-origin:100% 50%;transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .55s ease,filter .55s ease}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img[data-pos="0"]{opacity:1;z-index:4;transform:none;filter:none}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img[data-pos="1"]{opacity:.62;z-index:3;transform:translateX(30%) scale(.86);filter:brightness(.55)}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img[data-pos="2"]{opacity:.3;z-index:2;transform:translateX(56%) scale(.73);filter:brightness(.45)}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img[data-pos="3"]{opacity:0;z-index:1;transform:translateX(76%) scale(.62);filter:brightness(.4)}
  html body main .vx-v2.product .console .pc__media > .frame--phone > img[data-pos="-1"]{opacity:0;z-index:5;transform:translateX(-26%) scale(.94)}
  html body main .vx-v2.product .console .console__panel--phone .pc__for{justify-content:center}
}
html body main .vx-v2.product .pc__for-k{color:#4CC9F0;font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
html body main .vx-v2.product .pc__for-v{color:#FFFFFF;font-size:clamp(14px,1.9vh,15.5px);font-weight:600;line-height:1.45}
html body main .vx-v2.product .pc__sep{color:rgba(174,191,205,.6);margin:0 2px}

/* the entrance, each time a tab opens (product_tour.js sets .is-play; its pc-ready reaches the root as v2--pc-ready; before it, and when the panel closes, everything sits
   at its start with no transition). Motion only: with reduced motion, or no script, it all simply shows */
@media (prefers-reduced-motion:no-preference){
  html.v2--pc-ready body main .vx-v2.product .console__panel:not(.is-play) :is(.pc__w > span,.pc__list li,.pc__for,.frame),
  html.v2--pc-ready body main .vx-v2.product .console__panel:not(.is-play) .pc__list li::before{transition:none!important}
  html.v2--pc-ready body main .vx-v2.product .console__panel .pc__w > span{transform:translateY(108%);transition:transform .95s cubic-bezier(.16,.84,.24,1) calc(.12s + var(--i) * .035s)}
  html.v2--pc-ready body main .vx-v2.product .console__panel .pc__list li{opacity:0;transform:translateX(-22px);
    transition:opacity .6s ease calc(var(--pts) + var(--n) * .12s),transform .8s cubic-bezier(.16,.84,.24,1) calc(var(--pts) + var(--n) * .12s)}
  html.v2--pc-ready body main .vx-v2.product .console__panel .pc__list li::before{transform:scaleX(0);transition:transform .6s cubic-bezier(.3,0,.2,1) calc(var(--pts) + .15s + var(--n) * .12s)}
  html.v2--pc-ready body main .vx-v2.product .console__panel .pc__for{opacity:0;transform:translateY(12px);transition:opacity .7s ease var(--for),transform .8s cubic-bezier(.16,.84,.24,1) var(--for)}
  /* the screen simply fades in (6 Nov 2026: no opening crop) */
  html.v2--pc-ready body main .vx-v2.product .console__panel :is(.frame--shot,.frame--phone){opacity:0;transition:opacity .6s ease .05s}
  html.v2--pc-ready body main .vx-v2.product .console__panel.is-play .pc__w > span{transform:none}
  html.v2--pc-ready body main .vx-v2.product .console__panel.is-play .pc__list li{opacity:1;transform:none}
  html.v2--pc-ready body main .vx-v2.product .console__panel.is-play .pc__list li::before{transform:none}
  html.v2--pc-ready body main .vx-v2.product .console__panel.is-play .pc__for{opacity:1;transform:none}
  html.v2--pc-ready body main .vx-v2.product .console__panel.is-play :is(.frame--shot,.frame--phone){opacity:1}
}
html body main .vx-v7[data-chapter=dark],html body main section.vx-v2.product.product,html body main section.vx-v4.vera,
html body main section.vx-v7.hero,html body main section.vx-v7.vera{background:#0A1322!important}
html body .site-header.vx-v7[data-theme=dark]{--h-bg:rgba(10,19,34,.9)}
/* the brand's topographic texture (Graphic elements: Textures), faint and in few places: rising out of the hero's foot,
   behind Meet Vera's opening, behind Behind GeoXtra and in the footer (as V2's hero carried it) */
html body main section.vx-v7.hero > .hero__head{z-index:2}
html body main section.vx-v7.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none;
  background:url("main/topo/topographic-map-white.svg") 50% 100% / max(1700px,120%) auto no-repeat;opacity:calc(.018 * var(--topo,1));
  -webkit-mask-image:linear-gradient(to top,#000000 15%,transparent);mask-image:linear-gradient(to top,#000000 15%,transparent)}
/* (6 Nov 2026, later: each texture fills its box, so its edge never shows, and fades out at all four sides; Meet
   Vera's sits in its held window, not over the whole tall section; the proof on white carries the navy one) */
html body main section.vx-v7.vera .wrap,html body main section.vx-v4.behind,html body .site-footer.vx-v6,html body main section.vx-v7.story > .story__pin,
html body main section.vx-v3.proof,html body main section.vx-v3.who{position:relative;isolation:isolate}
html body main section.vx-v7.vera .wrap::before,html body main section.vx-v4.behind::before,html body .site-footer.vx-v6::before,
html body main section.vx-v7.story > .story__pin::before,html body main section.vx-v3.proof::before,html body main section.vx-v3.who::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("main/topo/topographic-map-white.svg") 50% 50% / cover no-repeat;opacity:.009;
  -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000000 70%),linear-gradient(transparent,#000000 22%,#000000 78%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 15%,#000000 70%),linear-gradient(transparent,#000000 22%,#000000 78%,transparent);
  mask-composite:intersect}
html body main section.vx-v7.vera .wrap::before{left:calc(50% - 50vw);right:calc(50% - 50vw)}
/* the product's: behind its heading (the section itself runs many screens tall with its held tabs) */
html body main section.vx-v2.product .product__head{position:relative;isolation:isolate}
html body main section.vx-v2.product .product__head::before{content:"";position:absolute;z-index:-1;pointer-events:none;top:-140px;bottom:-160px;
  left:calc(50% - 50vw);right:calc(50% - 50vw);background:url("main/topo/topographic-map-white.svg") 50% 50% / cover no-repeat;opacity:.009;
  -webkit-mask-image:linear-gradient(90deg,transparent 15%,#000000 70%),linear-gradient(transparent,#000000 22%,#000000 78%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 15%,#000000 70%),linear-gradient(transparent,#000000 22%,#000000 78%,transparent);
  mask-composite:intersect}
html body .site-footer.vx-v6::before{opacity:.007}
html body main section.vx-v3.proof::before,html body main section.vx-v3.who::before{background-image:url("main/topo/topographic-map-navy.svg");opacity:.025}
/* 7 Nov 2026: What you get on white (the user's call, twice; the brand's White, #FFFFFF) */
html body main .vx-v6 .value__read{background:#FFFFFF!important}
/* 8 Nov 2026: phones and tablets: from "The same record..." to the product's heading one gap, not four stacked (it was
   near 300px), and room under the product's last screen so its frame shows whole before What Vera reads */
@media (max-width:959px){
  html body main .vx-v4 .flow .vsteps__after{margin-bottom:0!important}
  html body main section.vera.vx-v4{padding-bottom:0!important}
  html body main section.product.vx-v2{padding-top:0!important;padding-bottom:64px!important}
}
/* the last slide's label in AA Sky on its light band (phones and tablets) */
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .eyebrow{color:#0381A2!important}
/* Who we serve's cards on the dark blue, not black (every size) */
html body main .vx-v3 .who-card{background:#0A1322!important}
html body main .vx-v3 .who-card__shade{background:linear-gradient(180deg,rgba(10,19,34,.72) 0%,rgba(10,19,34,.46) 24%,rgba(10,19,34,.14) 44%,rgba(10,19,34,.22) 58%,rgba(10,19,34,.8) 100%)!important}
/* an audience card opened by a tap shows its words, as hover does */
html body main .vx-v7 .sm__aud.is-open .sm__pop{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
html body main .vx-v7 .sm__aud.is-open .sm__card{border-color:rgba(76,201,240,.55);background:rgba(76,201,240,.07)}
/* no bounce past the page's ends (it showed white under the footer); the root keeps the body's white, which the
   chapters' fixed backdrop sits over (a root colour of its own put the body's white above that backdrop) */
html{overscroll-behavior-y:none}
@media (min-width:960px){html body main .vx-v4 .m-wires{display:none}}
/* the product's full-size view (product_tour.js): its button on each frame, and the modal */
html body main .vx-v2 .frame[data-shots]{position:relative}
html body main .vx-v2 .shots__zoom{position:absolute;right:10px;bottom:10px;z-index:3;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;
  border-radius:50%;background:rgba(10,19,34,.78);color:#FFFFFF;box-shadow:0 0 0 1px rgba(174,191,205,.35);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html body main .vx-v2 .shots__zoom svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v2 .frame--phone .shots__zoom{right:8px;bottom:44px}
.pv{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:56px 12px 20px;
  background:rgba(10,19,34,.96);color:#FFFFFF;font-family:"Rethink Sans",system-ui,sans-serif}
.pv.is-open{display:flex}
html.pv-on,html.pv-on body{overflow:hidden}
.pv__img{display:block;max-width:100%;max-height:calc(100svh - 150px);object-fit:contain;border-radius:10px;box-shadow:0 0 0 1px rgba(174,191,205,.3)}
.pv__close{position:absolute;top:10px;right:12px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#FFFFFF;font-size:28px;line-height:1;cursor:pointer}
.pv__bar{display:flex;align-items:center;gap:18px}
.pv__nav{width:44px;height:44px;border:0;border-radius:50%;background:rgba(76,201,240,.16);color:#4CC9F0;font-size:30px;line-height:1;cursor:pointer}
.pv__count{min-width:12ch;text-align:center;color:rgba(255,255,255,.78);font-size:14px;font-weight:600}
@media (max-width:959.98px){
  /* Vera's circle on phones: shown, every point with its icon, a tap brings its step into view (touch_fx.js) */
  /* the reads flowing into the circle (touch_fx.js): lines down the gutters with data moving, drawn in first */
  html body main .vx-v4 .flow.orbit-m .flow__grid{position:relative}
  html body main .vx-v4 .flow.orbit-m :is(.flow__src,.flow__core,.flow__steps){position:relative;z-index:1}
  html body main .vx-v4 .m-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
  html body main .vx-v4 .m-wire{fill:none;stroke:rgba(76,201,240,.55);stroke-width:1.5;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:0}
  html body main .vx-v4 .m-wire__pulse{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-dasharray:.05 .95;stroke-dashoffset:.05;opacity:0}
  @media (prefers-reduced-motion:no-preference){
    html body main .vx-v4 .flow.orbit-m .m-wire{stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.4,0,.2,1)}
    html body main .vx-v4 .flow.orbit-m.m-run .m-wire{stroke-dashoffset:0}
    html body main .vx-v4 .flow.orbit-m.m-run .m-wire__pulse{opacity:1;animation:m-wire-pulse 2.4s linear .9s infinite}
    html body main .vx-v4 .flow.orbit-m .flow__core{transition:scale .8s cubic-bezier(.34,1.4,.5,1) .5s,opacity .6s ease .5s}
    html body main .vx-v4 .flow.orbit-m:not(.m-run) .flow__core{scale:.9;opacity:.4}
  }
  @keyframes m-wire-pulse{from{stroke-dashoffset:.05}to{stroke-dashoffset:-.95}}
  /* The same record, from the first borehole to closure: across the column and larger */
  html body main .vx-v4 .flow .vsteps__after{max-width:none!important;font-size:clamp(28px,7.6vw,40px)!important;line-height:1.1!important}
  html body main .vx-v4 .flow.orbit-m .flow__core{display:block;width:min(100%,340px);margin:8px auto 28px}
  html body main .vx-v4 .flow.orbit-m .orbit{width:100%;height:auto;max-height:none}
  html body main .vx-v4 .flow.orbit-m .o-node{cursor:pointer}
  html body main .vx-v4 .flow.orbit-m .o-node .o-node__ring{stroke:#4CC9F0}
  html body main .vx-v4 .flow.orbit-m .o-node.is-current .o-node__halo{stroke:rgba(76,201,240,.6)}
  html body main .vx-v4 .flow__steps .vstep.is-picked{border-color:rgba(76,201,240,.7);box-shadow:0 0 0 1px rgba(76,201,240,.35),0 18px 40px -22px rgba(76,201,240,.6)}
  /* the menu opened after a scroll: the header stays on screen (the menu's scroll lock had left it far above) */
  html body .site-header.vx-v7.has-open{position:fixed;top:0;left:0;right:0;transform:none}
  /* and on the menu's white, its logo and close in the menu's dark blue (the dark ground left the dark logo unseen) */
  html body .site-header.vx-v7.has-open .site-header__plate{opacity:1!important;background:#FFFFFF!important;border-bottom:1px solid rgba(29,53,87,.1)}
  html body .site-header.vx-v7.has-open{--h-fg:#1D3557;color:#1D3557}
  html body .site-header.vx-v7.has-open .nav__logo img:not(.nav__logo-w){opacity:1!important}
  html body .site-header.vx-v7.has-open .nav__logo-w{opacity:0!important}
  /* What Vera does: the steps as a sideways slider, the next card showing at the right */
  html body main .vx-v4 .flow__grid{grid-template-columns:minmax(0,1fr)}
  html body main .vx-v4 .flow__steps{min-width:0}
  html body main .vx-v4 .flow__steps .vsteps{display:flex!important;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:-20px;padding:4px 20px 10px;scroll-padding-inline:20px;border:0}
  html body main .vx-v4 .flow__steps .vsteps::-webkit-scrollbar{display:none}
  html body main .vx-v4 .flow__steps .vsteps > .vstep{flex:0 0 84%;scroll-snap-align:start;margin:0}
  html body main .vx-v4 .flow__steps .vsteps > .vstep{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:0}
  html body main .vx-v4 .flow__steps .vsteps > .vstep .vstep__top{grid-row:auto;padding:0 0 16px}
  html body main .vx-v4 .flow__steps .vsteps > .vstep .vstep__line{margin-top:10px}
  /* tablets (touch_fx.js .orbit-t): the desktop scene played by itself, the steps a sideways slider it moves along
     card by card (the one on show lit, the rest dim), and once it ends a slider to swipe, every card lit (8 Nov 2026:
     the cards stood in one place, one at a time, and the last one stayed) */
  html body main .vx-v4 .flow.orbit-t .flow__steps .vsteps{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);gap:18px}   /* to the window's edges */
  html body main .vx-v4 .flow.orbit-t .flow__steps .vsteps > .vstep{flex-basis:70%;opacity:.38;transition:opacity .5s ease,border-color .5s ease,box-shadow .5s ease}
  html body main .vx-v4 .flow.orbit-t .flow__steps .vsteps > .vstep.is-current,html body main .vx-v4 .flow.orbit-t.is-done .flow__steps .vsteps > .vstep{opacity:1}
  html body main .vx-v4 .flow.orbit-t .flow__steps .vstep__title{font-size:clamp(28px,3.8vw,34px);line-height:1.08;letter-spacing:-.028em}
  html body main .vx-v4 .flow.orbit-t .flow__steps .vstep__line{font-size:17px;margin-top:14px}
  html body main .vx-v4 .flow.orbit-t .flow__steps :is(.layers__label--steps,.flow__decide){transition:opacity .5s ease,translate .7s cubic-bezier(.22,1,.36,1)}
  html body main .vx-v4 .flow.orbit-t .flow__steps:not(:has(.vstep.is-current)) :is(.layers__label--steps,.flow__decide){opacity:0;translate:0 18px}
  html body main .vx-v4 .flow.orbit-t .o-node{cursor:pointer}
  /* level by level: the plates close together on a tap and open again; a level's plate marks its words */
  html body main .vx-v5 .xstack,html body main .vx-v5 .xp{pointer-events:auto}
  html body main .vx-v5 .explode__stage{cursor:pointer;-webkit-tap-highlight-color:transparent}
  html body main .vx-v5 .xp{transition:transform .75s cubic-bezier(.22,1,.36,1)}
  html body main .vx-v5 .explode__stage.is-shut{--gap:10px}
  /* played by itself (touch_fx.js .x-auto): the lit level lifted a little off the stack, as on the desktop */
  html body main .vx-v5 .x-auto .xp.is-on{transform:translateZ(calc((2.5 - var(--i)) * var(--gap) + 14px))}
  html body main .vx-v5 .x-auto .vstep{transition:opacity .5s ease}
  html body main .vx-v5 .vstep.is-picked .vstep__num{background:#4CC9F0;border-color:#4CC9F0;color:#1D3557}
  html body main .vx-v5 .vstep.is-picked .vstep__title{color:#0381A2}
  /* the header always on its dark ground (over the hero it was clear) */
  html body .site-header.vx-v7[data-theme=clear] .site-header__plate{opacity:1;background:rgba(10,19,34,.92)}
  /* no Scroll cue in the hero */
  html body main .vx-v7 .hero__cue{display:none}
  /* and less room under its buttons, with no cue to leave room for (it was 84px) */
  html body main section.vx-v7.hero .hero__head{padding-bottom:36px}
  /* the audiences' words open under their card, in the column */
  html body main .vx-v7 .sm__aud .sm__pop{position:relative;left:auto;right:auto;top:auto;width:auto;max-width:none;margin-top:10px;display:none}
  html body main .vx-v7 .sm__aud.is-open .sm__pop{display:grid}
  html body main .vx-v7 .sm__aud .sm__card{height:auto}
  /* room under The same record, from the first borehole to closure */
  html body main .vx-v4 .flow .vsteps__after{margin-bottom:clamp(56px,14vw,88px)}
  /* each step's icon draws itself in as the step comes into view */
  @media (prefers-reduced-motion:no-preference){
    html body main .vx-v4 .flow__steps .vstep__icon{scale:.7;opacity:0;transition:scale .6s cubic-bezier(.3,1.4,.5,1) .1s,opacity .4s ease .1s}
    html body main .vx-v4 .flow__steps .vstep__icon svg *{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1) .3s}
    html body main .vx-v4 .flow__steps .vstep.is-seen .vstep__icon{scale:1;opacity:1}
    html body main .vx-v4 .flow__steps .vstep.is-seen .vstep__icon svg *{stroke-dashoffset:0}
  }
  /* Your data, your agreement: its title a set gap over the list, and room under the section's last line */
  html body main .vx-v2 .trust__title{margin-bottom:28px}
  html body main section.vx-v2.trust-sec .trust{padding-bottom:clamp(48px,12vw,72px)}
  html body main .vx-v2 .trust__it{max-width:none!important;width:auto}
  /* Your data, your agreement free to wrap (it was held to two set lines): "Your data, your" over "agreement" */
  html body main .vx-v2 .trust__title br{display:none}
  html body main .vx-v2 .trust__title .tt-line{display:inline;white-space:normal}
  /* Who we serve's Book a demo across the column */
  html body main .vx-v3 .who__cta{display:block;width:100%}
  html body main .vx-v3 .who__cta .btn{display:flex;justify-content:center;width:100%;box-sizing:border-box}
  /* the points on Vera's circle and their icons a little larger */
  html body main .vx-v4 .flow.orbit-m .o-node{transform-box:fill-box;transform-origin:center;scale:1.32}
  /* its button across the column, and less room between it and What you get */
  html body main .vx-v2 .trust__link{display:flex;justify-content:center;width:100%;box-sizing:border-box;text-align:center}
  html body main section.vx-v2.trust-sec .trust{padding-bottom:32px!important}
  html body main .vx-v6 .value__read{padding-top:40px}
  /* the FAQ's title across the column */
  html body main .vx-v6.faqs .chapter{flex:none;width:100%}
  html body main .vx-v6.faqs #faq-title,html body main .vx-v6.faqs .chapter .h2{max-width:none!important;width:auto}
  /* the closing call as tall as its words, not a full screen */
  html body main .vx-v6 .close__pin{height:auto;min-height:0;padding:clamp(64px,16vw,96px) 0 clamp(56px,14vw,84px)}
  /* 7 Nov 2026: the photo's dark layer over all of it (the wide screen's left-to-right shade left the top and the right of
     the photo bare on a narrow one), deepest at its top and foot so it runs into the dark grounds above and below */
  html body main .vx-v6 .close__shade{background:linear-gradient(180deg,rgba(5,10,20,1) 0%,rgba(5,10,20,.7) 18%,rgba(5,10,20,.62) 50%,rgba(5,10,20,.72) 82%,rgba(5,10,20,1) 100%)!important}
  html body main .vx-v6 .close__body{padding-top:0}
}
/* the story's longer paragraphs (story_beats.py): each a slide of its own at the first two's size, gray with its white
   phrases lighting word by word; on the pinned screen the script takes a longer one down a little only where it would
   not fit the column's height (fitLong) */
/* What GeoXtra means for you: in white over the role panels */
html body main .vx-v7 .story__means{color:#FFFFFF;font-size:var(--fs-intro);font-weight:700;line-height:1.17;letter-spacing:-.02em}
html.v7--fx-desk body main .vx-v7 .story__means{position:absolute;left:0;right:0;top:50%;translate:0 -50%;margin:0;will-change:transform,opacity}
html:not(.v7--fx-desk) body main .vx-v7 .story__means{margin-top:48px}
html:not(.v7--fx-desk) body main .vx-v7 .story__words--more{margin-top:32px}
html:not(.v7--fx-desk) body main .vx-v7 .story__means + .story__more{margin-top:28px}
/* the pinned scroll longer for the slides: 1649% of the window, plus the window */
html.v7--fx-desk body main section.vx-v7.story{height:1749vh!important}
/* 8 Nov 2026: a slide in its white, gray, lit play (whiteGray here and in story_slider.js): the paragraph in its --pc,
   each white-phrase word mixed from that toward white by its --lit */
html body main .vx-v7 .story__para--dim.wg{color:var(--pc)}
html body main .vx-v7 .story__para--dim.wg .story__hl{color:inherit}
html body main .vx-v7 .story__para--dim.wg .story__hl .w{color:color-mix(in srgb,#FFFFFF calc(var(--lit,0) * 100%),var(--pc))}
/* phones and tablets: the story's words as a sideways slider of cards, as What Vera does' steps are (story_slider.js) */
html body main .vx-v7 .story__slider{display:flex;align-items:stretch;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none;margin-inline:-20px;padding:4px 20px 10px;scroll-padding-inline:20px}
html body main .vx-v7 .story__slider::-webkit-scrollbar{display:none}
@media (min-width:600px){html body main .vx-v7 .story__slider{margin-inline:0;padding-inline:0;scroll-padding-inline:0}}
/* (8 Nov 2026: each card as tall as its own words, not the longest one's) */
html body main .vx-v7 .ss-card{display:flex;flex-direction:column;flex:0 0 84%;scroll-snap-align:start;box-sizing:border-box;padding:18px 18px 20px;border-radius:20px;
  border:1px solid rgba(174,191,205,.2);background:linear-gradient(rgba(255,255,255,.04),rgba(255,255,255,.016));
  transition:border-color .4s ease,box-shadow .4s ease}
html body main .vx-v7 .ss-card.is-current{border-color:rgba(76,201,240,.7);box-shadow:0 0 0 1px rgba(76,201,240,.35),0 18px 40px -22px rgba(76,201,240,.6)}
/* (8 Nov 2026: the cards one height, their words smaller and in the regular weight, the white phrases marked by colour alone) */
html body main .vx-v7 .ss-card :is(.story__para,.story__we){margin:0!important;opacity:1;font-size:clamp(15px,3.7vw,20px)!important;line-height:1.35!important;font-weight:400!important}
html body main .vx-v7 .ss-card :is(.story__hl,.story__hl .w,.story__para .w){font-weight:400!important}
html body main .vx-v7 .ss-card .story__we{margin-top:14px!important}
html body main .vx-v7 .ss-ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:14px;border-radius:13px;
  background:linear-gradient(150deg,rgba(76,201,240,.26),rgba(76,201,240,.05) 70%);box-shadow:inset 0 0 0 1px rgba(76,201,240,.45),0 14px 34px -14px rgba(76,201,240,.55)}
html body main .vx-v7 .ss-ico svg{width:50%;height:50%;fill:none;stroke:#4CC9F0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v7 .ss-ico svg *{stroke-dasharray:none;stroke-dashoffset:0}
html body main .vx-v7 .ss-card.is-drawn .ss-ico svg *{stroke-dashoffset:0}
/* the last slide, in service and trusted by: its logos on the story's dark blue */
html body main .vx-v7 .story__more--proof .sm__logos{border:1px solid rgba(174,191,205,.18);border-radius:14px;overflow:hidden;background:rgba(174,191,205,.18)}
html body main .vx-v7 .story__more--proof .sm__logos li{background:#0A1322}
/* 8 Nov 2026: on phones and tablets the last slide is a light band across the screen, as much room above as below,
   its logos in ink on white tiles; it ends the story there */
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof{margin:56px calc(50% - 50vw) 0!important;padding:56px calc(50vw - 50%)!important;background:#F5F5F5}
html:not(.v7--fx-desk) body main .vx-v7 .story__inner:has(.story__more--proof){padding-bottom:0!important}
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .sm__statement{color:#1D3557}
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .eyebrow{color:#0381A2}
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .sm__logos{border-color:rgba(29,53,87,.12);background:rgba(29,53,87,.12)}
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .sm__logos li{background:#FFFFFF}
html:not(.v7--fx-desk) body main .vx-v7 .story__more--proof .sm__logos img{filter:brightness(0);opacity:.72}
/* 8 Nov 2026: Trusted by's logos as links: the whole tile clickable, the colour logo over the plain one, shown on hover
   (and keyboard focus) on its own ground; touch screens keep the plain logo and just open the site */
html body main .vx-v7 .sm__logos li.sm__logo{padding:0}
html body main .vx-v7 .sm__logos li.sm__logo > a{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;padding:12px 18px;
  transition:background-color .35s ease}
html body main .vx-v7 .sm__logos li.sm__logo > a > img{grid-area:1 / 1;transition:opacity .35s ease}
html body main .vx-v7 .story__more--proof .sm__logos li.sm__logo img.sm__logo-colour{filter:none!important;opacity:0!important}
html body main .vx-v7 .sm__logos li.sm__logo > a:focus-visible{outline:2px solid #4CC9F0;outline-offset:-2px}
@media (hover:hover){
  html body main .vx-v7 .sm__logos li.sm__logo > a:is(:hover,:focus-visible) > img:first-child{opacity:0!important}
  html body main .vx-v7 .story__more--proof .sm__logos li.sm__logo > a:is(:hover,:focus-visible) > img.sm__logo-colour{opacity:1!important}
  html body main .vx-v7 .sm__logos li.sm__logo--light > a:is(:hover,:focus-visible){background:#FFFFFF}
  html body main .vx-v7 .sm__logos li.sm__logo--dark > a:is(:hover,:focus-visible){background:#0A1322}
}
/* Supported by, a section of its own after the FAQ: its title centred over the supporters in one row */
html body main section.vx-v3.proof.supported{background:#FFFFFF;padding-block:clamp(72px,8vw,120px)}
html body main .vx-v3 .supported__title{margin:0 0 clamp(28px,3.4vw,48px);text-align:center;color:#1D3557;font-size:clamp(30px,1rem + 1.8vw,48px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
html body main .vx-v3.supported .proof__row{display:block}
html body main .vx-v3.supported .logo-group{grid-column:1 / -1;max-width:1100px;margin:0 auto!important}
html body main .vx-v3.supported .logo-row{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:767px){html body main .vx-v3.supported .logo-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the GeoXtra mark where a Vera label has its icon */
html body main :is(.lbl-ai,.eb-ico) img{display:block;width:100%;height:100%}
html body main .eyebrow .eb-ico--ai{margin-right:.35em}
/* the testimonial (testimonial.py): white, between the story and Meet Vera. Left, what the client says: the label, who said
   it with a small square portrait, then the quote. Right, in service and trusted by (the story's last slide until 8 Nov 2026) */
html body main section.quo-sec.vx-v3{background:#FFFFFF;padding-block:clamp(88px,3rem + 3vw + 24px,136px);margin:0}
html body main .quo-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);max-width:1120px;margin-inline:auto}
html body main .quo-col{padding-right:clamp(32px,5vw,72px)}
html body main .quo{margin:0}
html body main .quo__by{display:flex;align-items:center;gap:18px}
html body main .quo__photo{flex:none;width:96px;aspect-ratio:1;border-radius:14px;overflow:hidden;background:#F5F5F5}
html body main .quo__photo img{display:block;width:100%;height:100%;object-fit:cover}
html body main .quo__who{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
html body main .quo__name{font-style:normal;color:#1D3557;font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
html body main .quo__role{color:rgba(29,53,87,.72);font-size:14px;line-height:1.4}
html body main .quo__logo{display:inline-block;margin-top:6px;padding:2px 0;border-radius:6px;transition:opacity .25s ease}
html body main .quo__logo img{display:block;height:24px;width:auto}
html body main .quo__logo:hover{opacity:.72}
html body main .quo__logo:focus-visible{outline:2px solid #0381A2;outline-offset:6px}
html body main .quo__quote{margin:clamp(20px,1.8vw,28px) 0 0}
html body main .quo__quote p{margin:0;color:#1D3557;font-size:clamp(17px,.5rem + .8vw,20px);font-weight:500;line-height:1.5;letter-spacing:-.008em}
html body main .quo__hl{font-style:normal;color:#0381A2}
html body main .quo-proof{display:flex;flex-direction:column;justify-content:center;gap:24px;padding-left:clamp(32px,5vw,72px);border-left:1px solid rgba(29,53,87,.12)}
html body main .quo-proof__statement{margin:0;color:#1D3557;font-size:clamp(24px,1rem + .85vw,32px);font-weight:700;line-height:1.14;letter-spacing:-.025em}
html body main .quo-proof__group .eyebrow{margin:0 0 14px}
html body main .quo-proof__logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;border:1px solid rgba(29,53,87,.12);border-radius:14px;overflow:hidden;background:rgba(29,53,87,.12)}
/* the whole tile a link: the logo in ink, the colour logo over it on hover and keyboard focus, on its own ground */
html body main .quo-logo{height:72px;background:#FFFFFF}
html body main .quo-logo > a{display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;padding:10px 14px;transition:background-color .35s ease}
html body main .quo-logo img{grid-area:1 / 1;max-width:100%;max-height:30px;width:auto;height:auto;filter:brightness(0);opacity:.72;transition:opacity .35s ease}
html body main .quo-logo img.quo-logo__colour{filter:none;opacity:0}
html body main .quo-logo > a:focus-visible{outline:2px solid #0381A2;outline-offset:-2px}
@media (hover:hover){
  html body main .quo-logo > a:is(:hover,:focus-visible) > img:first-child{opacity:0}
  html body main .quo-logo > a:is(:hover,:focus-visible) > img.quo-logo__colour{opacity:1}
  html body main .quo-logo--light > a:is(:hover,:focus-visible){background:#FFFFFF}
  html body main .quo-logo--dark > a:is(:hover,:focus-visible){background:#0A1322}
}
/* coming in: each side rises (only once the script is there to bring them in) */
html body main .quo-sec.quo-js :is(.quo-col,.quo-proof){opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
html body main .quo-sec.quo-js .quo-proof{transition-delay:.18s}
html body main .quo-sec.quo-js.is-in :is(.quo-col,.quo-proof){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html body main .quo-sec.quo-js :is(.quo-col,.quo-proof){transform:none;transition:opacity .4s ease}}
/* tablet: still side by side, closer */
@media (max-width:959px){
  html body main .quo-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  html body main .quo-col{padding-right:28px}
  html body main .quo-proof{padding-left:28px}
  html body main .quo__photo{width:84px}
  html body main .quo-logo{height:64px}
  html body main .quo-logo > a{padding:10px}
  html body main .quo-logo img{max-height:26px}
}
/* phone: one under the other, the line between them across */
@media (max-width:767px){
  html body main section.quo-sec.vx-v3{padding-block:76px 84px}
  html body main .quo-grid{grid-template-columns:minmax(0,1fr)}
  html body main .quo-col{padding-right:0}
  html body main .quo-proof{gap:28px;margin-top:40px;padding:40px 0 0;border-left:0;border-top:1px solid rgba(29,53,87,.12)}
  html body main .quo__photo{width:76px;border-radius:12px}
  html body main .quo__by{gap:14px}
  html body main .quo__name{font-size:18px}
  html body main .quo__role{font-size:13px}
  html body main .quo__logo img{height:22px}
}
html body .site-header .mobile-panel .m-cta{display:flex;width:100%;min-height:54px;margin-top:auto;flex:none;background:#1D3557;
  color:#FFFFFF;border:1px solid #1D3557;font-size:17px;font-weight:600}
html body .site-header .mobile-panel .m-cta:hover{background:#000000;border-color:#000000}
html body .site-header .mobile-panel .m-cta:focus-visible{outline:2px solid #0381A2;outline-offset:3px}
html body .site-header .mobile-panel > a.m-link + .m-cta{margin-top:auto}
@media (max-height:420px){html body .site-header .mobile-panel .m-cta{margin-top:28px}}
/* it stays where it is as the menu opens: no slide in with the links (8 Nov 2026) */
html body .site-header .mobile-panel > .m-cta{transform:none!important;opacity:1!important;transition:background-color .3s ease,border-color .3s ease!important}
/* V1 on the brand kit (Downloads/Branding, Brand Guidelines V1.0, Dec 2025) and Basic's type (6 Nov 2026). Last in
   V1's CSS so it settles what each version's own styles differ on.
   - headings: Rethink Sans bold as Basic sets them, at Basic's spacing (the versions ran to -0.05em and 0.99 leading);
   - every section label one style: the guidelines' eyebrow (bold, uppercase, 32% tracking), with no dot or line
     (the dot was tried), AA Sky Blue on light grounds and Sky Blue on dark ones (no lines or brackets);
   - buttons as Basic: Dark Blue on light, turning black; Sky Blue with Dark Blue type on dark, turning white */

/* headings */
html body main h1,html body main h2:not(.sr-only),html body main .h2,html body main .hero__title{letter-spacing:-.03em!important;line-height:1.06!important}
html body main .story__para,html body main .story__we,html body main .vsteps__after{letter-spacing:-.02em!important;line-height:1.18!important}
html body main h3,html body main .h3{letter-spacing:-.015em!important}

/* section labels */
html body :is(.eyebrow,.layers__label,.chapter__label,.example__label,.type-group__label,.behind__label,.hero__eyebrow,.record__label){
  display:inline-flex!important;align-items:center!important;gap:12px!important;font-size:12.5px!important;font-weight:700!important;
  line-height:1.2!important;letter-spacing:.32em!important;text-transform:uppercase!important;color:#0381A2!important}
html body :is([data-chapter=dark],.vx-v4,.hero,.site-footer) :is(.eyebrow,.layers__label,.chapter__label,.example__label,.type-group__label,.behind__label,.hero__eyebrow,.record__label){color:#4CC9F0!important}
html body :is(.eyebrow,.layers__label,.chapter__label,.example__label,.type-group__label,.behind__label,.hero__eyebrow,.record__label)::before{content:none!important;display:none!important}   /* 6 Nov 2026: no dot, no line */
html body :is(.eyebrow,.layers__label,.chapter__label,.example__label,.type-group__label,.behind__label,.hero__eyebrow,.record__label)::after{content:none!important;display:none!important}

/* buttons */
html body main .btn.btn--primary{background:#1D3557!important;color:#FFFFFF!important;border-color:#1D3557!important}
html body main .btn.btn--primary:hover{background:#000000!important;border-color:#000000!important}
html body main :is([data-chapter=dark],.vx-v4,.hero) .btn.btn--primary{background:#4CC9F0!important;color:#1D3557!important;border-color:#4CC9F0!important}
html body main :is([data-chapter=dark],.vx-v4,.hero) .btn.btn--primary:hover{background:#FFFFFF!important;border-color:#FFFFFF!important}
html body .site-header .nav__cta{background:#1D3557!important;color:#FFFFFF!important}
html body .site-header .nav__cta:hover{background:#000000!important}
html body .site-header:is([data-theme=dark],[data-theme=clear]) .nav__cta{background:#4CC9F0!important;color:#1D3557!important}
html body .site-header:is([data-theme=dark],[data-theme=clear]) .nav__cta:hover{background:#FFFFFF!important}
/* the story's second step dimmed, its key phrases in white (7 Nov 2026; on wide screens they light up word by word) */
html body main .vx-v7 .story__para--dim{color:rgba(245,245,245,.42)}
html body main .vx-v7 .story__para--dim .story__hl{color:#FFFFFF;font-weight:600}
/* the story's two more steps (tools/mix/story_more.py): on the story's black, beside its screen */
html body main .vx-v7 .story__more{color:#FFFFFF}
html body main .vx-v7 .sm__for{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .9em;font-size:clamp(26px,1rem + 1.6vw,40px);font-weight:700;
  line-height:1.2;letter-spacing:-.025em}
html body main .vx-v7 .sm__for a{color:#FFFFFF;text-decoration:underline;text-decoration-color:#4CC9F0;text-decoration-thickness:2px;text-underline-offset:.2em;
  white-space:nowrap;transition:color .2s}
html body main .vx-v7 .sm__for a span{color:#4CC9F0}
html body main .vx-v7 .sm__for a:hover{color:#4CC9F0}
html body main .vx-v7 .sm__rows{display:grid;gap:18px;margin-top:clamp(28px,4vh,44px)}
html body main .vx-v7 .sm__rows p{padding-top:16px;border-top:1px solid rgba(174,191,205,.22);color:rgba(255,255,255,.78);font-size:clamp(16px,1.15vw,19px);line-height:1.6}
html body main .vx-v7 .sm__rows b{margin-right:.55em;color:#4CC9F0;font-weight:700}
html body main :is(.vx-v7,.proof-band) .sm__statement{max-width:20ch;font-size:clamp(28px,1rem + 1.9vw,46px);font-weight:700;line-height:1.1;letter-spacing:-.03em}
html body main :is(.vx-v7,.proof-band) .sm__group{margin-top:clamp(24px,3.6vh,40px)}
html body main :is(.vx-v7,.proof-band) .sm__group .eyebrow{margin-bottom:14px}
html body main :is(.vx-v7,.proof-band) .sm__logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;
  border:1px solid rgba(174,191,205,.22);border-radius:12px;overflow:hidden;background:rgba(174,191,205,.22)}
html body main :is(.vx-v7,.proof-band) .sm__logos li{display:grid;place-items:center;height:clamp(62px,8.4vh,84px);padding:12px 18px;background:#000000}
html body main :is(.vx-v7,.proof-band) .sm__logos img{max-width:100%;max-height:36px;width:auto;height:auto;filter:brightness(0) invert(1);opacity:.82}
html body main :is(.vx-v7,.proof-band) .sm__group + .sm__group .sm__logos{grid-template-columns:repeat(4,minmax(0,1fr))}   /* four supporters, one row */
@media (max-width:599px){html body main :is(.vx-v7,.proof-band) .sm__group + .sm__group .sm__logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the proof as its own section again: on black, the statement beside the logos (one column on phones) */
html body main .proof-band{background:#000000;color:#FFFFFF;padding:clamp(88px,10vw,150px) 0}
html body main .proof-band__in{width:min(1296px,100% - 2 * clamp(16px,4vw,64px));margin-inline:auto}
html body main .proof-band__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,6vw,110px);row-gap:0;align-items:start}
html body main .proof-band .sm__statement{grid-column:1;grid-row:1 / span 2;max-width:14ch}
html body main .proof-band .sm__group{grid-column:2}
html body main .proof-band .sm__group:first-of-type{margin-top:0}
html body main .proof-band .eyebrow{color:#4CC9F0!important}
@media (max-width:959px){
  html body main .proof-band__body{grid-template-columns:minmax(0,1fr)}
  html body main .proof-band .sm__statement,html body main .proof-band .sm__group{grid-column:1;grid-row:auto}
  html body main .proof-band .sm__group:first-of-type{margin-top:clamp(28px,6vw,40px)}
}
@media (min-width:960px){
  html.v7--fx-desk body main .vx-v7 .story__more{position:absolute;left:0;right:0;top:50%;translate:0 -50%;margin:0;will-change:transform,opacity}
}
html:not(.v7--fx-desk) body main .vx-v7 .story__more{margin-top:56px}
/* Vera's AI mark before her line, in the line's Sky Blue */
/* the three audiences as cards: an icon tile in Sky Blue, the title, the role in small capitals */
html body main .vx-v7 .sm__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body main .vx-v7 .sm__card{display:flex;align-items:center;gap:14px;height:100%;padding:16px 16px;border:1px solid rgba(174,191,205,.22);border-radius:16px;
  background:rgba(255,255,255,.035);color:#FFFFFF;text-decoration:none;transition:border-color .25s,background-color .25s}
html body main .vx-v7 .sm__card:hover,html body main .vx-v7 .sm__aud:focus-within .sm__card{border-color:rgba(76,201,240,.55);background:rgba(76,201,240,.07)}
html body main .vx-v7 .sm__ico{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:14px;background:rgba(76,201,240,.14);color:#4CC9F0}
html body main .vx-v7 .sm__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body main .vx-v7 .sm__txt{min-width:0}
html body main .vx-v7 .sm__t{display:block;font-size:clamp(15px,1vw,18px);font-weight:700;line-height:1.15;letter-spacing:-.02em}
html body main .vx-v7 .sm__s{display:block;margin-top:6px;color:#AEBFCD;font-size:10.5px;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:1099px){html body main .vx-v7 .sm__cards{grid-template-columns:minmax(0,1fr)}}
/* each audience's card on hover or focus, as the band had: its title, its line and a link down to it */
html body main .vx-v7 .sm__aud{position:relative;display:block}
html body main .vx-v7 .sm__pop{position:absolute;left:0;top:100%;z-index:30;display:grid;gap:8px;width:min(360px,80vw);margin-top:14px;padding:20px 22px;
  border:1px solid rgba(76,201,240,.35);border-radius:16px;background:#0B1424;box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
  color:rgba(245,245,245,.82);font-size:15px;font-weight:500;line-height:1.55;letter-spacing:0;white-space:normal;text-align:left;
  opacity:0;visibility:hidden;translate:0 8px;transition:opacity .25s ease,translate .3s cubic-bezier(.22,1,.36,1),visibility 0s linear .3s}
html body main .vx-v7 .sm__pop::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}   /* the pointer's bridge from the link */
html body main .vx-v7 .sm__aud:last-child .sm__pop{left:auto;right:0}
html body main .vx-v7 .sm__aud:hover .sm__pop,html body main .vx-v7 .sm__aud:focus-within .sm__pop{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
html body main .vx-v7 .sm__pop-title{color:#FFFFFF;font-size:17px;font-weight:700;letter-spacing:-.01em}
html body main .vx-v7 .sm__pop-more{justify-self:start;margin-top:4px;color:#4CC9F0!important;font-size:14.5px;font-weight:600;text-decoration:none!important;white-space:nowrap}
html body main .vx-v7 .sm__pop-more:hover{color:#FFFFFF!important}
/* The product's scroll tour (tools/mix/product_tour.js; the screens from src/screens/hires.py). Each tab's frame stacks
   its screens in one cell and shows one at a time, with a dot per screen. On a wide, tall enough window the console is
   pinned (product_tour.js) while the page scrolls by, stepping through every screen and moving the tab along; elsewhere the screens in
   the open tab step by as its frame passes up the screen */
html body main .vx-v2 .frame[data-shots]{position:relative;display:grid;grid-template:minmax(0,1fr) / minmax(0,1fr)}   /* the cell is the frame, not its tallest screen */
html body main .vx-v2 .frame[data-shots] > img{grid-area:1 / 1;width:100%;height:100%;object-fit:cover;object-position:0 0;
  opacity:0;transition:opacity .5s cubic-bezier(.3,0,.2,1)}
html body main .vx-v2 .frame[data-shots] > img.is-on{opacity:1}
html body main .vx-v2 .frame[data-shots]:not(.is-tour) > img:first-child{opacity:1}
html body main .vx-v2 .shots__dots{position:absolute;left:50%;bottom:12px;translate:-50% 0;display:flex;gap:6px;padding:6px 8px;
  border-radius:99px;background:rgba(14,37,64,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}
html body main .vx-v2 .shots__dots i{display:block;width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.45);
  transition:width .35s cubic-bezier(.3,0,.2,1),background-color .35s ease}
html body main .vx-v2 .shots__dots i.is-on{width:18px;background:#FFFFFF}
html body main .vx-v2 .frame--phone .shots__dots{bottom:44px}
@media (prefers-reduced-motion:reduce){
  html body main .vx-v2 .frame[data-shots] > img,html body main .vx-v2 .shots__dots i{transition:none}
}
/* V1's product (V2's console and scroll tour), 6 Nov 2026: on Meet Vera's black, which it follows (white was tried), with Meet Vera's type for its opening (the eyebrow in Sky Blue, the heading large, the
   lead in grey). On a wide window the console sizes itself to the window's height, so it pins (tools/mix/product_tour.js)
   on short windows too */
html body main section.vx-v2.product{background:#000000!important;color:#F5F5F5;--hair:rgba(174,191,205,.16);--fg-2:#AEBFCD}
html body main .vx-v2.product .section-head{display:block;max-width:none}   /* one column, as Meet Vera's opening */
html body main .vx-v2.product .section-head .eyebrow{color:#4CC9F0;font-size:clamp(15px,1.32vw,19px);font-weight:600;letter-spacing:-.012em;text-transform:none}
html body main .vx-v2.product .section-head .eyebrow::before{display:none}
html body main .vx-v2.product .section-head .h2{max-width:13.5em;margin-top:0;color:#F5F5F5;font-size:clamp(44px,6.67vw,96px);font-weight:700;line-height:.99;letter-spacing:-.05em}
html body main .vx-v2.product .section-head .h2 .hl{color:#4CC9F0;background:none;text-decoration:none;-webkit-text-fill-color:currentColor}
html body main .vx-v2.product .section-head .h2 .hl::before,html body main .vx-v2.product .section-head .h2 .hl::after{content:none!important;display:none!important}
html body main .vx-v2.product .section-head .lead{max-width:none;margin-top:clamp(28px,3.4vw,56px);padding:0;color:#AEBFCD;font-size:clamp(19px,1.78vw,25.5px);font-weight:500;line-height:1.36;letter-spacing:-.018em}
html body main .vx-v2.product .console__tabs{border-bottom-color:rgba(174,191,205,.16)}
html body main .vx-v2.product .console__tab{color:rgba(245,245,245,.5)}
html body main .vx-v2.product .console__tab:hover,html body main .vx-v2.product .console__tab[aria-selected="true"]{color:#FFFFFF}
html body main .vx-v2.product .console__tab-num{color:rgba(174,191,205,.6)}
html body main .vx-v2.product .console__tab[aria-selected="true"] .console__tab-num{color:#4CC9F0}
html body main .vx-v2.product .console__ind{background:#4CC9F0}
html body main .vx-v2.product .console__tray{background:linear-gradient(180deg,rgba(76,201,240,.06),rgba(76,201,240,.015));
  box-shadow:inset 0 0 0 1px rgba(76,201,240,.18)}
html body main .vx-v2.product .console__caption{color:#F5F5F5}
html body main .vx-v2.product .console__decide{color:#AEBFCD}
html body main .vx-v2.product .console__decide b{color:#FFFFFF}
html body main .vx-v2.product .example{background:rgba(255,255,255,.04);border-color:rgba(174,191,205,.16);color:#AEBFCD}
html body main .vx-v2.product .example__label{color:#4CC9F0}
html body main .vx-v2.product .example__steps li{color:#AEBFCD;border-color:rgba(174,191,205,.16)}
html body main .vx-v2.product .example__steps li::before{color:#4CC9F0;border-color:rgba(76,201,240,.4);background:transparent}
html body main .vx-v2.product .console .frame--shot{background:#0B0F16;border-color:rgba(174,191,205,.2)}
html body main .vx-v2.product .tlink{color:#4CC9F0}
/* 6 Nov 2026: every screen fills its frame (16:9, between the 1.6 and the wide captures; none padded with a blank band) */
html body main .vx-v2.product .console .frame--shot{aspect-ratio:16 / 9}
@media (min-width:960px){
  /* the screen as tall as the window allows; the tray's padding and the copy's type step down on short windows */
  html body main .vx-v2.product .console{--avail:calc(100vh - 84px - 66px - 64px - 2 * clamp(18px,3.4vh,52px) - clamp(14px,2.4vh,28px) - 36px)}
  html body main .vx-v2.product .console__tray{margin-top:clamp(14px,2.4vh,28px);padding:clamp(18px,3.4vh,52px) clamp(28px,3.6vw,52px)}
  html body main .vx-v2.product .console .frame--shot{aspect-ratio:16 / 9;width:min(100%,calc(var(--avail) * 16 / 9));justify-self:end;align-self:center}
  html body main .vx-v2.product .console .frame--phone{width:min(246px,calc(var(--avail) * 9 / 19));align-self:center}
  html body main .vx-v2.product .console__copy{align-self:center}
  html body main .vx-v2.product .console__caption{font-size:clamp(16px,2.2vh,21px)}
  html body main .vx-v2.product .console__decide{margin-top:clamp(10px,1.8vh,18px);font-size:clamp(14px,1.75vh,16px)}
  html body main .vx-v2.product .example{margin-top:clamp(12px,2vh,22px)}
  html body main .vx-v2.product .example,html body main .vx-v2.product .example__steps li{font-size:clamp(13px,1.65vh,15px)}
}
html body main .vx-v2.product .tour{--tour-step:.75}   /* each screen holds for three quarters of a window of scroll */
html body main .vx-v2.product .section-head .h2 > svg.contour{display:none}   /* V2's drawn contour under the highlight: Meet Vera's has none */
/* each tab's label in the middle of its own stretch of the line, where the indicator runs under it */
html body main .vx-v2.product .console__tab,html body main .vx-v2.product .console__tab:first-child{justify-content:center;text-align:center;padding-inline:12px}
html body main section.vx-v2.product > .wrap::before{content:none!important;display:none!important}   /* no divider over the product on black */
html body main .vx-v7 .vera__head .lead{grid-column:1 / -1;max-width:none}
/* the hero's entrance: in CSS, on opacity and movement only, so the browser plays it by itself and the page's scripts
   starting up cannot stall it or make it jump. Short: all in within about a second */
html.v7--fx-intro body main .vx-v7 :is(.hero__eyebrow,.hero__title,.hero__life,.hero__btns,.hero__cue,.hero__img){opacity:1}
@keyframes gx-hero-fade{from{opacity:0}}
@keyframes gx-hero-rise{from{opacity:0;translate:0 18px}}
@keyframes gx-hero-settle{from{scale:1.05}}
@media (prefers-reduced-motion:no-preference){
  html body main section.vx-v7.hero .hero__img{animation:gx-hero-fade .7s ease-out backwards}
  html body main section.vx-v7.hero .hero__zoom{animation:gx-hero-settle 1.1s cubic-bezier(.16,1,.3,1) backwards}
  html body main section.vx-v7.hero .hero__eyebrow{animation:gx-hero-rise .55s cubic-bezier(.16,1,.3,1) backwards}
  html body main section.vx-v7.hero .hero__title{animation:gx-hero-rise .65s cubic-bezier(.16,1,.3,1) .05s backwards}
  html body main section.vx-v7.hero .hero__life{animation:gx-hero-rise .55s cubic-bezier(.16,1,.3,1) .16s backwards}
  html body main section.vx-v7.hero .hero__btns{animation:gx-hero-rise .55s cubic-bezier(.16,1,.3,1) .24s backwards}
  html body main section.vx-v7.hero .hero__cue{animation:gx-hero-fade .5s ease-out .4s backwards}
  html.gx-hero-text-wait body main section.vx-v7.hero :is(.hero__eyebrow,.hero__title,.hero__life,.hero__btns,.hero__cue){animation-play-state:paused}
  html.gx-hero-photo-wait body main section.vx-v7.hero :is(.hero__img,.hero__zoom){animation-play-state:paused}
}
/* the decisions line in the story, in a box */
html body main section.vx-v7.story .story__we{max-width:none;font-size:clamp(22px,.7rem + 1.35vw,32px);line-height:1.24;box-sizing:border-box;padding:clamp(16px,1.5vw,24px) clamp(18px,1.8vw,28px);border:1px solid rgba(76,201,240,.42);border-radius:16px;background:rgba(76,201,240,.07)}
html body main section.vx-v7.story .ss-card .story__we{padding:0;border:0;border-radius:0;background:none}
/* Meet Vera's headline: a longer sentence, a little smaller */
html body main section.vx-v7.vera .vera__head .h2{max-width:16em;font-size:min(clamp(32px,1rem + 4.2vw,88px),11vh)}
html body main section.vx-v7.vera .vera__head .eyebrow{margin-bottom:24px}
html body main section.vx-v7.vera .vera__head .h2{margin-top:0}
/* What Vera does: its card as far under the label as What Vera reads' first card is under its own */
html body main .vx-v4 .flow__steps .layers__label--steps{margin-bottom:36.5px}
@media (max-width:959px){html body main .vx-v4 .flow__steps .layers__label--steps{margin-bottom:32.5px}}   /* the slider adds 4px of its own */
/* What Vera does to the product tour on desktop: the padding below the one and the two paddings above the other added up
   to more than a screen's half; one is enough (phones and tablets already have one) */
@media (min-width:960px){
  html body main section.section.vera.vx-v4{padding-bottom:0}
  html body main section.section.product.vx-v2{padding-top:0}
}
/* the product tour's headline: Meet Vera's size and layout, the line under it */
html body main section.vx-v2.product .product__head .h2{grid-column:1 / -1;max-width:16em;font-size:min(clamp(32px,1rem + 4.2vw,88px),11vh)}
html body main section.vx-v2.product .product__head .lead{grid-column:1 / -1;max-width:none;margin-top:clamp(32px,4vw,56px);padding-bottom:0}
/* title to description: 24px in Meet Vera and the product tour */
html body main section.vx-v7.vera .vera__head .lead,html body main section.vx-v2.product .product__head .lead{margin-top:24px}
/* the story: What GeoXtra brings, then each of the three with its text (the scene is in main.js, storyScene) */
html body main .vx-v7 .sb__lead{margin:0;color:#FFFFFF;font-size:var(--fs-intro);font-weight:700;line-height:1.17;letter-spacing:-.02em}
html body main .vx-v7 .sb__t{margin:28px 0 0;color:#FFFFFF;font-size:clamp(24px,1rem + 1.25vw,36px);font-weight:700;line-height:1.16;letter-spacing:-.025em}
html body main .vx-v7 .sb__d{margin:10px 0 0;font-size:clamp(20px,.7rem + 1.05vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.015em}
/* all three texts stay on screen together, so on the pinned screen they are set to fit */
html.v7--fx-desk body main .vx-v7 .sb__d{font-size:min(clamp(18px,.5rem + .95vw,25px),3.1vh)}
html body main .vx-v7 .sb__d{color:rgba(245,245,245,.42)}
html.v7--fx-desk body main .vx-v7 .story__brings{position:absolute;inset:0;--sb-o:0;--sb-p:0;--sb-f:0;--sb-c:0;--sb-a0:0px;--sb-center:0px;--sb-cy:0px;translate:0 calc(var(--sb-a0) + var(--sb-c) * var(--sb-cy) - var(--sb-o) * 50px);scale:calc(1 - var(--sb-o) * .045);pointer-events:none}
html.v7--fx-desk body main .vx-v7 :is(.sb__lead,.sb__t,.sb__d){position:absolute;left:0;right:0;top:calc(var(--y,0px) + var(--sb-f) * var(--dy,0px));margin:0;will-change:transform,opacity}
html.v7--fx-desk body main .vx-v7 .sb__lead{transform-origin:0 0;translate:0 calc((1 - var(--sb-p)) * var(--sb-center));scale:calc(1 - var(--sb-p) * .48);color:color-mix(in srgb,#4CC9F0 calc(var(--sb-p) * 100%),#FFFFFF)}
/* phones and tablets: a card each, the heading over its title */
html body main .vx-v7 .ss-card .sb__t{margin:0;font-size:clamp(17px,4.2vw,22px)}
html body main .vx-v7 .ss-card .sb__t::before{content:"What GeoXtra brings";display:block;margin-bottom:8px;color:#4CC9F0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
html body main .vx-v7 .ss-card .sb__d{margin:10px 0 0;font-size:clamp(15px,3.7vw,20px);font-weight:400;line-height:1.35}
/* the decisions line: bolder everywhere, in its box and in the phone and tablet card */
html body main section.vx-v7.story .story__we,html body main section.vx-v7.story .ss-card .story__we{font-weight:700!important}
/* each title's icon: only in the desktop scene, where it comes in beside the title at the end (the cards have their own) */
html body main .vx-v7 .sb__ico{display:none}
html body main .vx-v7 .sb__tt{display:inline-block}
html.v7--fx-desk body main .vx-v7 .sb__ico{display:flex;align-items:center;justify-content:center;position:absolute;left:0;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:12px;opacity:0;
  background:linear-gradient(150deg,rgba(76,201,240,.26),rgba(76,201,240,.05) 70%);box-shadow:inset 0 0 0 1px rgba(76,201,240,.45)}
html.v7--fx-desk body main .vx-v7 .sb__ico svg{width:56%;height:56%;fill:none;stroke:#4CC9F0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* the decisions box: its icon beside its words */
html.v7--fx-desk body main section.vx-v7.story .story__we{display:flex;align-items:center;gap:clamp(14px,1.3vw,20px)}
html body main .vx-v7 .we__ico{display:none}
html.v7--fx-desk body main .vx-v7 .we__ico{display:flex;flex:none;align-items:center;justify-content:center;width:clamp(44px,3.6vw,54px);height:clamp(44px,3.6vw,54px);border-radius:14px;
  background:linear-gradient(150deg,rgba(76,201,240,.26),rgba(76,201,240,.05) 70%);box-shadow:inset 0 0 0 1px rgba(76,201,240,.45)}
html.v7--fx-desk body main .vx-v7 .we__ico svg{width:56%;height:56%;fill:none;stroke:#4CC9F0;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.v7--fx-desk body main .vx-v7 .we__tx{min-width:0}
/* the footer's Hosted in Canada, its flag before the words */
html body .footer__hosted{display:inline-flex;align-items:center;gap:8px}
html body .footer__hosted .ca-flag{flex:none;display:block;width:27px;height:18px;border-radius:2px}