/* ============================================================================
   Onfinity 2026 page system
   ----------------------------------------------------------------------------
   The design language agreed on 2 September 2026, starting with the homepage
   and intended for the module pages after it.

   Two rules govern everything below.

   1. EVERY class is prefixed va-. Bootstrap 3 and material-kit already own
      .btn, .lead, .close, .alert, .pill, .tag, .nav, .chips, .well and .q, and
      several of the mockup's original names collided head-on with them. An
      unprefixed name here would silently restyle the header, the modals and
      every button on the site.

   2. LIGHT ONLY. There is no prefers-color-scheme block anywhere in this file.
      The rest of onfinity.io is a light site; a homepage that went dark for
      visitors whose OS is dark, while the header above it stayed white, would
      read as a bug rather than a feature.

   Chronological development:
     Claude   2026-09-02  Created for the homepage rebuild
   ========================================================================= */

:root{
    --va-pg:#ffffff; --va-sunk:#f2f7f9; --va-ink:#22303a; --va-body:#5a6b76;
    --va-line:#dde7ec; --va-blue:#0f7fa8; --va-deep:#0b5f7d; --va-amber:#f5a623;
    --va-night:#0e1a21; --va-nightsoft:#16262f; --va-ok:#1f8a63;

    /* widget palette, sampled off the product UI */
    --va-wbg:#fbfdfe; --va-wline:#e3ebf0; --va-wmut:#7a8894;
    --va-wblue:#2f80ed; --va-wbluesoft:#e9f2fd;
    --va-wred:#d0342c;  --va-wredsoft:#fdeeed;
    --va-wamb:#a9740f;  --va-wambsoft:#fdf5e2;
    --va-wgrn:#1f8a63;  --va-wgrnsoft:#e8f5f0;
    --va-wtea:#158a8a;  --va-wteasoft:#e0f1f1;
}

/* ---------------------------------------------------------------- scaffolding */
.va-sec{padding:60px 0}
.va-sec.va-tight{padding:44px 0}
.va-secSunk{background:var(--va-sunk)}
.va-secNight{background:var(--va-night);color:#fff}
.va-in{max-width:1000px;margin:0 auto;padding:0 26px}
.va-ctr{text-align:center}
.va-ctr .va-lede,.va-ctr .va-deck{margin-left:auto;margin-right:auto}

.va-eyeb{font-family:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
         font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
         color:var(--va-blue);margin:0 0 10px}
.va-secNight .va-eyeb{color:var(--va-amber)}

h2.va-sh{font-size:clamp(23px,3.1vw,31px);font-weight:300;line-height:1.2;margin:0 0 10px;
         letter-spacing:-.015em;color:var(--va-ink)}
h2.va-sh b{font-weight:700}
.va-secNight h2.va-sh{color:#fff}

.va-lede{font-size:15px;color:var(--va-body);max-width:66ch;line-height:1.65;margin:0 0 26px}
.va-secNight .va-lede{color:#9db3bf}
.va-deck{font-size:clamp(17px,2vw,20px);line-height:1.35;color:var(--va-ink);font-weight:300;
         max-width:34ch;margin:0 0 12px}
.va-deck b{font-weight:700}

/* ---------------------------------------------------------------- hero */
.va-hero26{background:linear-gradient(150deg,#07333f 0%,#0b5f7d 48%,#0f83a4 100%);
           color:#fff;padding:56px 0 52px;position:relative;overflow:hidden}
.va-hero26::after{content:"";position:absolute;right:-90px;top:-70px;width:420px;height:420px;
                  border-radius:50%;pointer-events:none;
                  background:radial-gradient(circle at 35% 35%,rgba(80,210,235,.55),rgba(15,127,168,0) 68%)}
.va-hero26 .va-in{position:relative;z-index:2}
.va-hero26 h1{font-size:clamp(30px,4.6vw,46px);font-weight:300;line-height:1.1;
              letter-spacing:-.022em;margin:0 0 16px;max-width:22ch;color:#fff}
.va-hero26 h1 b{font-weight:700}
.va-hero26 p{font-size:15.5px;line-height:1.68;color:rgba(255,255,255,.9);max-width:56ch;margin:0 0 26px}
.va-hero26 .va-eyeb{color:var(--va-amber)}

/* Two slides stacked in one grid cell, so the block takes the height of the taller
   one and nothing jumps on change. No auto-advance: a rotating hero moves the reading
   position out from under whoever has started slide 1. */
.va-stack{display:grid}
.va-slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .4s ease}
.va-slide.is-on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.va-slide{transition:none}}
.va-slidenav{display:flex;align-items:center;gap:9px;margin-top:26px;position:relative;z-index:3}
.va-dot{width:30px;height:4px;border-radius:99px;background:rgba(255,255,255,.3);border:0;padding:0;
        cursor:pointer;transition:background .25s}
.va-dot[aria-selected="true"]{background:var(--va-amber)}
.va-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.va-slidelab{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
             text-transform:uppercase;color:rgba(255,255,255,.5);margin-left:5px}

/* Bootstrap owns .btn, so the hero and close buttons carry their own names. */
.va-btnA,.va-btnB{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.045em;
                  text-transform:uppercase;padding:13px 22px;border-radius:3px;margin:0 10px 10px 0;
                  text-decoration:none;transition:filter .2s,background .2s}
.va-btnA{background:var(--va-amber);color:#25313a}
.va-btnA:hover,.va-btnA:focus{background:#ffb838;color:#25313a;text-decoration:none}
.va-btnB{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.va-btnB:hover,.va-btnB:focus{color:#fff;background:rgba(255,255,255,.12);text-decoration:none}

/* ---------------------------------------------------------------- system screen */
.va-scr{background:var(--va-wbg);border:1px solid var(--va-wline);border-radius:10px;overflow:hidden;
        box-shadow:0 6px 20px -14px rgba(10,20,28,.45);text-align:left}
.va-scrBar{background:var(--va-wbluesoft);border-bottom:1px solid var(--va-wline);padding:8px 14px;
           font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.04em;
           color:var(--va-wblue)}
.va-scrBody{padding:14px;display:grid;grid-template-columns:1.05fr 1fr;gap:14px}
@media(max-width:700px){.va-scrBody{grid-template-columns:1fr}}
.va-scrP{background:var(--va-pg);border:1px solid var(--va-wline);border-radius:8px;padding:12px 14px}
.va-scrP .va-scrT{font-size:12.5px;font-weight:700;color:var(--va-ink);margin-bottom:9px}
.va-kv{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--va-wmut);
       padding:6px 0;border-bottom:1px solid var(--va-wline)}
.va-kv:last-child{border-bottom:0}
.va-kv b{color:var(--va-ink);font-weight:600;text-align:right}
.va-chat{display:grid;gap:8px}
.va-bub{border-radius:8px;padding:9px 11px;font-size:11px;line-height:1.5}
.va-bub.va-me{background:var(--va-sunk);border:1px solid var(--va-wline);color:var(--va-body);
              justify-self:end;max-width:78%}
.va-bub.va-ai{background:var(--va-wbluesoft);border:1px solid var(--va-wblue);color:var(--va-ink)}
.va-bub.va-ai b{color:var(--va-wblue)}

/* ---------------------------------------------------------------- dictionary numbers */
.va-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:6px}
@media(max-width:720px){.va-nums{grid-template-columns:repeat(2,1fr)}}
.va-num{text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:16px 8px}
.va-num .va-numV{font-size:31px;font-weight:700;color:var(--va-amber);line-height:1}
.va-num .va-numK{font-size:11px;color:#93aab6;margin-top:6px;line-height:1.4}

/* ---------------------------------------------------------------- position chart */
.va-quad{max-width:720px;margin:0 auto}
.va-quadWrap{position:relative;padding-left:26px}
.va-quadBox{position:relative;aspect-ratio:1/.78;border:1px solid var(--va-line);border-radius:6px;
            background:var(--va-pg);overflow:hidden}
.va-quadBox .va-vline,.va-quadBox .va-hline{position:absolute;background:var(--va-line)}
.va-quadBox .va-vline{left:50%;top:0;bottom:0;width:1px}
.va-quadBox .va-hline{top:50%;left:0;right:0;height:1px}
.va-qhi{position:absolute;border-radius:5px;background:rgba(15,127,168,.07);
        border:1px dashed rgba(15,127,168,.42);right:0;top:0;width:50%;height:50%}
.va-qlab{position:absolute;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
         color:var(--va-body);opacity:.62}
.va-qlab.va-tl{top:9px;left:11px}
.va-qlab.va-tr{top:9px;right:11px;text-align:right}
.va-qlab.va-bl{bottom:9px;left:11px}
.va-qlab.va-br{bottom:9px;right:11px;text-align:right}
.va-pt{position:absolute;transform:translate(-50%,-50%);text-align:center;width:132px}
.va-pt .va-ptD{width:11px;height:11px;border-radius:50%;background:var(--va-body);opacity:.5;margin:0 auto 5px}
.va-pt .va-ptN{font-size:10.5px;line-height:1.32;color:var(--va-body)}
.va-pt .va-ptSub{font-size:8.5px;color:var(--va-body);opacity:.72;display:block;margin-top:1px;letter-spacing:.02em}
.va-pt.va-us .va-ptD{width:17px;height:17px;background:var(--va-blue);opacity:1;
                     box-shadow:0 0 0 5px rgba(15,127,168,.18)}
.va-pt.va-us .va-ptN{color:var(--va-ink);font-weight:700;font-size:12px}
.va-pt.va-us .va-ptSub{color:var(--va-blue);opacity:1;font-weight:600}
.va-axx{display:flex;justify-content:space-between;margin-top:9px}
.va-axl{font-size:10.5px;color:var(--va-body);letter-spacing:.06em;text-transform:uppercase}
.va-axnote{font-size:9.5px;color:var(--va-body);opacity:.75;text-transform:none;letter-spacing:0;display:block}
.va-axy{position:absolute;left:-1px;top:50%;transform:rotate(-90deg) translateX(50%);
        transform-origin:left center;white-space:nowrap;font-size:10.5px;color:var(--va-body);
        letter-spacing:.06em;text-transform:uppercase}
.va-asat{font-family:"JetBrains Mono",monospace;font-size:9.5px;color:var(--va-body);opacity:.7;
         text-align:right;margin-top:7px;letter-spacing:.04em}
@media(max-width:640px){
    .va-pt{width:96px}
    .va-pt .va-ptN{font-size:9px}
    .va-pt.va-us .va-ptN{font-size:10.5px}
    .va-qlab{font-size:8px}
}

/* ---------------------------------------------------------------- product widgets */
.va-uses{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.va-uses{grid-template-columns:1fr}}
.va-use{display:block}
.va-use:hover,.va-use:focus{text-decoration:none}
.va-use h3{font-size:16px;font-weight:700;margin:14px 0 5px;color:var(--va-ink)}
.va-use p{font-size:13.5px;color:var(--va-body);margin:0;line-height:1.6}
.va-use .va-useM{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
                 text-transform:uppercase;color:var(--va-blue);margin:0}
a.va-use:hover h3{color:var(--va-blue)}

/* One fixed height across all four so the 2x2 grid reads as a set. Each card is a flex
   column that spreads to fill, which absorbs their different natural heights without
   any of them looking padded out. */
.va-wg{background:var(--va-wbg);border:1px solid var(--va-wline);border-radius:10px;height:382px;
       padding:13px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;
       box-shadow:0 6px 20px -14px rgba(10,20,28,.45);text-align:left}
.va-wgh{display:flex;align-items:center;gap:8px}
.va-wgi{width:26px;height:26px;border-radius:7px;background:var(--va-wbluesoft);display:grid;
        place-items:center;flex:none}
.va-wgi svg{width:14px;height:14px;stroke:var(--va-wblue);fill:none;stroke-width:1.9;
            stroke-linecap:round;stroke-linejoin:round}
.va-wgt{font-size:14px;font-weight:700;color:var(--va-ink);letter-spacing:-.01em}
.va-wgt small{display:block;font-size:9.5px;font-weight:400;color:var(--va-wmut);letter-spacing:0}
.va-wgbadge{font-size:10px;font-weight:700;color:var(--va-wblue);background:var(--va-wbluesoft);
            border-radius:99px;padding:2px 8px}
.va-wgsp{margin-left:auto}
.va-wglink{font-size:11px;color:var(--va-wblue);font-weight:600}
.va-wgdots{color:var(--va-wmut);font-size:13px;line-height:1;margin-left:8px}

.va-wgk2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.va-wgk2 div{border-radius:7px;padding:7px 10px}
.va-wgk2 .va-kL{display:block;font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.va-wgk2 .va-kV{font-size:21px;font-weight:700;line-height:1.15}
.va-wgk2 .va-kb{background:var(--va-wbluesoft)}
.va-wgk2 .va-kb .va-kL,.va-wgk2 .va-kb .va-kV{color:var(--va-wblue)}
.va-wgk2 .va-kr{background:var(--va-wredsoft)}
.va-wgk2 .va-kr .va-kL,.va-wgk2 .va-kr .va-kV{color:var(--va-wred)}

.va-wgchips{display:flex;gap:7px}
.va-wgchips span{flex:1;text-align:center;font-size:9.5px;color:var(--va-body);background:var(--va-pg);
                 border:1px solid var(--va-wline);border-radius:99px;padding:4px 6px;
                 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* overflow:hidden here is load-bearing. It both lets the box shrink below its rows and
   contains anything that will not fit, so a row can never escape past the footer rule. */
.va-wgrows{display:flex;flex-direction:column;flex:1;justify-content:space-between;overflow:hidden}
.va-wgrow{display:flex;align-items:center;gap:9px}
.va-wgtag{font-size:7.5px;font-weight:700;line-height:1.2;text-align:center;border-radius:5px;
          padding:3px 5px;width:60px;flex:none}
.va-wgtag.va-tt{background:var(--va-wteasoft);color:var(--va-wtea)}
.va-wgtag.va-ta{background:var(--va-wambsoft);color:var(--va-wamb)}
.va-wgtag.va-tb{background:var(--va-wbluesoft);color:var(--va-wblue)}
.va-wgrow .va-wgnm{flex:1;min-width:0;font-size:11.5px;font-weight:700;line-height:1.25;
                   color:var(--va-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-wgrow .va-wgnm em{display:block;font-style:normal;font-size:9.5px;line-height:1.25;font-weight:400;
                      color:var(--va-wmut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-wgrow .va-wgdt{font-size:9.5px;color:var(--va-wmut);flex:none}
.va-wgcta{font-size:9.5px;font-weight:700;color:#fff;background:var(--va-wblue);border-radius:5px;
          padding:5px 9px;flex:none}
.va-wgf{display:flex;justify-content:space-between;align-items:center;font-size:9.5px;flex:none;
        color:var(--va-wmut);border-top:1px solid var(--va-wline);padding-top:8px}
.va-wgf b{font-weight:600;color:var(--va-body);border:1px solid var(--va-wline);border-radius:5px;
          padding:2px 7px}

.va-wgAlert{background:var(--va-wambsoft);border:1px solid var(--va-wamb);border-radius:7px;
            padding:9px 11px;display:flex;align-items:center;gap:9px}
.va-wgAlert .va-aX{flex:1;min-width:0}
.va-wgAlert .va-a1{font-size:11px;font-weight:700;color:var(--va-ink)}
.va-wgAlert .va-a2{font-size:9.5px;color:var(--va-wmut);margin-top:1px}
.va-wgAlert .va-aB{font-size:9.5px;font-weight:700;color:var(--va-body);background:var(--va-pg);
                   border:1px solid var(--va-wline);border-radius:5px;padding:5px 10px;flex:none}

.va-wgScroll{flex:1;min-height:0;overflow:hidden}
table.va-wgTable{width:100%;border-collapse:collapse;font-size:10.5px}
table.va-wgTable th{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--va-wmut);
                    font-weight:600;text-align:left;padding:0 0 6px;border-bottom:1px solid var(--va-wline)}
table.va-wgTable td{padding:8px 0;color:var(--va-wmut);border-bottom:1px solid var(--va-wline)}
table.va-wgTable tr:last-child td{border-bottom:0}
table.va-wgTable .va-inv{color:var(--va-wblue);font-weight:700}
table.va-wgTable .va-amt{text-align:right;color:var(--va-ink);font-weight:700;font-variant-numeric:tabular-nums}
table.va-wgTable th.va-amt{color:var(--va-wmut);font-weight:600}
.va-wgPill{display:inline-block;font-size:9px;font-weight:700;background:var(--va-wambsoft);
           color:var(--va-wamb);border-radius:99px;padding:2px 8px;white-space:nowrap}
.va-wgPill.va-od{background:var(--va-wredsoft);color:var(--va-wred)}

.va-ageRow .va-ageT{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.va-ageRow .va-ageN{font-size:11.5px;font-weight:700;color:var(--va-ink);white-space:nowrap;
                    overflow:hidden;text-overflow:ellipsis}
.va-ageRow .va-ageD{font-size:10.5px;font-weight:700;color:var(--va-wred);flex:none}
.va-ageRow .va-ageS{font-size:9.5px;color:var(--va-wmut);margin:1px 0 5px;white-space:nowrap;
                    overflow:hidden;text-overflow:ellipsis}
.va-ageBar{height:5px;border-radius:99px;background:var(--va-wline);overflow:hidden}
.va-ageBar i{display:block;height:100%;background:var(--va-wred);border-radius:99px}

.va-hire{display:grid;grid-template-columns:90px 1fr;gap:14px;flex:1;min-height:0}
.va-hstats{display:flex;flex-direction:column;justify-content:space-evenly}
.va-hstats .va-hL{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--va-wmut);font-weight:600}
.va-hstats .va-hV{font-size:22px;font-weight:700;color:var(--va-ink);line-height:1.15}
.va-hstats .va-hV span{font-size:10px;font-weight:400;color:var(--va-wmut);margin-left:3px}
.va-hstats .va-hN{font-size:8.5px;color:var(--va-wmut)}
.va-hbars{display:flex;flex-direction:column;justify-content:space-evenly}
.va-hbars .va-hH{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--va-wmut);font-weight:600}
.va-hbar .va-hbT{display:flex;justify-content:space-between;font-size:10px;color:var(--va-body);margin-bottom:3px}
.va-hbar .va-hbT b{color:var(--va-ink);font-variant-numeric:tabular-nums}
.va-hbar .va-hbB{height:5px;border-radius:99px;background:var(--va-wline);overflow:hidden}
.va-hbar .va-hbB i{display:block;height:100%;border-radius:99px}

/* ---------------------------------------------------------------- depth */
.va-bars{max-width:600px;margin:0 auto}
.va-brow{display:grid;grid-template-columns:165px 1fr 62px;gap:12px;align-items:center;
         padding:6px 0;font-size:13px}
@media(max-width:600px){.va-brow{grid-template-columns:120px 1fr 54px;font-size:12px}}
.va-brow .va-browN{font-weight:600;color:var(--va-ink)}
.va-brow .va-browT{height:8px;border-radius:99px;background:var(--va-line);overflow:hidden}
.va-brow .va-browT i{display:block;height:100%;background:var(--va-blue);border-radius:99px}
.va-brow .va-browV{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--va-body);text-align:right}

/* ---------------------------------------------------------------- industries */
.va-inds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:760px){.va-inds{grid-template-columns:1fr 1fr}}
.va-ind{border:1px solid var(--va-line);border-radius:5px;padding:14px;background:var(--va-pg);display:block}
.va-ind b{display:block;font-size:13.5px;color:var(--va-ink);margin-bottom:3px}
.va-ind span{font-size:11.5px;color:var(--va-body);line-height:1.5;display:block}
a.va-ind:hover,a.va-ind:focus{text-decoration:none;border-color:var(--va-blue)}
a.va-ind:hover b{color:var(--va-blue)}

/* ---------------------------------------------------------------- two routes */
.va-routes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.va-routes{grid-template-columns:1fr}}
.va-rt{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:20px;
       display:flex;flex-direction:column}
/* the highlighted card's border is a pixel thicker, so its padding comes down by one to
   keep both cards the same size and the two buttons on the same line */
.va-rt.va-hi{border:2px solid var(--va-blue);padding:19px}
.va-rt h4{font-size:16px;font-weight:700;margin:0 0 3px;color:var(--va-ink)}
.va-rt .va-rtW{font-size:12px;color:var(--va-body);margin:0 0 13px}
.va-rt ul{list-style:none;padding:0;margin:0 0 16px;font-size:12.5px;color:var(--va-body);line-height:1.5}
.va-rt li{padding:4px 0 4px 18px;position:relative}
.va-rt li::before{content:"";position:absolute;left:1px;top:11px;width:7px;height:7px;
                  border-radius:50%;background:var(--va-blue);opacity:.32}
.va-rt.va-hi li::before{opacity:.9}
.va-rt ul + .va-rtCta{margin-top:auto}
.va-rtCta{display:block;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;padding:11px;border-radius:3px;text-decoration:none}
.va-rtCta.va-rtSolid{background:var(--va-blue);color:#fff}
.va-rtCta.va-rtSolid:hover,.va-rtCta.va-rtSolid:focus{background:var(--va-deep);color:#fff;text-decoration:none}
.va-rtCta.va-rtGhost{color:var(--va-blue);box-shadow:inset 0 0 0 1.5px var(--va-line)}
.va-rtCta.va-rtGhost:hover,.va-rtCta.va-rtGhost:focus{box-shadow:inset 0 0 0 1.5px var(--va-blue);
                                                      color:var(--va-blue);text-decoration:none}
.va-pLink{display:block;text-align:center;font-size:12.5px;color:var(--va-blue);font-weight:600;margin-top:14px}

/* ---------------------------------------------------------------- proof of life */
.va-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.va-quotes{grid-template-columns:1fr}}
.va-quote{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:18px}
.va-quote p{font-size:13px;color:var(--va-body);line-height:1.6;margin:0 0 12px}
.va-quote .va-who{font-size:11.5px;color:var(--va-ink);font-weight:700}
.va-quote .va-who span{display:block;font-weight:400;color:var(--va-body);font-size:11px}
.va-trust{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:26px;
          font-size:12.5px;color:var(--va-body)}
.va-trust b{color:var(--va-ink)}

/* ---------------------------------------------------------------- close */
.va-closeBlock{background:linear-gradient(150deg,#0b5f7d,#07333f);color:#fff;text-align:center;padding:56px 0}
.va-closeBlock h2{font-size:clamp(23px,3.2vw,32px);font-weight:300;margin:0 0 10px;color:#fff}
.va-closeBlock h2 b{font-weight:700}
.va-closeBlock p{color:rgba(255,255,255,.85);font-size:14.5px;max-width:52ch;margin:0 auto 22px}

/* ---------------------------------------------------------------- release bar + offer */
/* The release bar is parked, not deleted. It came off the homepage on 3 Sep 2026
   because "What changed" pointed at onfinity.php, which still describes version
   3.5.14.0 and never mentions Onfinity 7. Reinstate it once that page is rewritten:
   the markup is four lines and these rules are what it needs. */
.va-relBar{
    background:#16262f;color:#fff;text-align:center;padding:10px 20px;font-size:13px;line-height:1.5;
}
.va-relBar .va-relPill{
    display:inline-block;background:#f5a623;color:#25313a;font-weight:700;font-size:10.5px;
    letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-right:10px;
}
.va-relBar a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:600;margin-left:10px}
.va-relBar a:hover{color:#f5a623}

/* The go-live offer ribbon is parked, not deleted -- the markup came off the homepage
   on 3 Sep 2026 pending a rethink of the offer, and these rules are what it needs to
   come back. */
.va-offerRibbon{
    background:#25313a;color:#fff;text-align:center;padding:16px 20px;
}
.va-offerRibbon .va-offerLead{font-size:16px;font-weight:600;line-height:1.45;display:block}
.va-offerRibbon .va-offerLead em{font-style:normal;color:#f5a623}
.va-offerRibbon .va-offerUntil{
    display:block;font-size:12.5px;color:rgba(255,255,255,.62);margin-top:5px;
}
@media(max-width:600px){
    .va-relBar{font-size:12px;padding:8px 12px}
    .va-relBar a{display:block;margin:4px 0 0}
    .va-offerRibbon .va-offerLead{font-size:14.5px}
}

/* ============================================================================
   ERP page additions
   Alternating module rows: a real screen on one side, the capability list on the
   other, flipping each row. Deliberately a different rhythm from the homepage's
   2x2 widget grid, which the same content in the same layout would only echo.
   ========================================================================= */
.va-mod{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;
        padding:34px 0;border-top:1px solid var(--va-line)}
.va-mod:first-child{border-top:0;padding-top:8px}
@media(max-width:860px){.va-mod{grid-template-columns:1fr;gap:20px}}
.va-mod.va-flip .va-modShot{order:2}
@media(max-width:860px){.va-mod.va-flip .va-modShot{order:0}}
.va-modShot{border:1px solid var(--va-wline);border-radius:10px;overflow:hidden;background:var(--va-wbg);
            box-shadow:0 8px 26px -18px rgba(10,20,28,.5)}
.va-modShot img{display:block;width:100%;height:auto}
.va-modShot figcaption{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.06em;
                       color:var(--va-wmut);padding:7px 12px;border-top:1px solid var(--va-wline);
                       background:var(--va-pg)}
.va-modBody h3{font-size:19px;font-weight:700;color:var(--va-ink);margin:0 0 6px;letter-spacing:-.01em}
.va-modBody .va-modLede{font-size:14px;color:var(--va-body);line-height:1.6;margin:0 0 14px}
.va-modList{list-style:none;padding:0;margin:0;columns:2;column-gap:22px;font-size:12.5px;
            color:var(--va-body);line-height:1.5}
@media(max-width:520px){.va-modList{columns:1}}
.va-modList li{padding:3px 0 3px 15px;position:relative;break-inside:avoid}
.va-modList li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
                       border-radius:50%;background:var(--va-blue);opacity:.45}
.va-modTag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;
           text-transform:uppercase;color:var(--va-blue);background:var(--va-wbluesoft);
           border-radius:99px;padding:3px 9px;margin-bottom:9px}

/* the one-posting flow */
.va-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:820px){.va-flow{grid-template-columns:1fr 1fr}}
.va-flowStep{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:16px 14px}
.va-flowN{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
          background:var(--va-blue);color:#fff;font-size:11px;font-weight:700;margin-bottom:9px}
.va-flowStep b{display:block;font-size:13.5px;color:var(--va-ink);margin-bottom:3px}
.va-flowStep .va-flowD{font-size:11.5px;color:var(--va-body);line-height:1.5;display:block}

/* implementation steps */
.va-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.va-steps{grid-template-columns:1fr}}
.va-step{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:20px}
.va-step .va-stepN{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
                   text-transform:uppercase;color:var(--va-blue);display:block;margin-bottom:8px}
.va-step h4{font-size:15.5px;font-weight:700;color:var(--va-ink);margin:0 0 7px}
.va-step p{font-size:13px;color:var(--va-body);line-height:1.6;margin:0}
.va-step .va-stepWho{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--va-line);
                     font-size:11.5px;color:var(--va-wmut)}
.va-step .va-stepWho b{color:var(--va-blue)}

/* ---------------------------------------------------------------- section sub-nav
   Product sections (ERP, CRM, HR) have sibling pages. The old product headers carried
   these links themselves, but those headers are transparent and absolute -- built to
   sit over a light banner image, with dark link text that vanishes on the 2026 hero.
   Pages on this design use the solid white header instead and carry the sibling links
   here, immediately under it. */
.va-subnav{background:var(--va-pg);border-bottom:1px solid var(--va-line)}
.va-subnavIn{max-width:1000px;margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;
             align-items:center;gap:2px}
.va-subnav a{font-size:12.5px;color:var(--va-body);padding:13px 14px;display:block;
             border-bottom:2px solid transparent;text-decoration:none}
.va-subnav a:hover,.va-subnav a:focus{color:var(--va-blue);text-decoration:none}
.va-subnav a.is-here{color:var(--va-ink);font-weight:600;border-bottom-color:var(--va-blue)}
.va-subnavLabel{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.16em;
                text-transform:uppercase;color:var(--va-wmut);padding-right:14px;margin-right:4px;
                border-right:1px solid var(--va-line)}
@media(max-width:640px){
    .va-subnavLabel{display:none}
    .va-subnav a{padding:11px 10px;font-size:12px}
}

/* ---------------------------------------------------------------- clearing the header
   The site header is .navbar-fixed-top: 67px tall at every breakpoint, position:fixed,
   and it reserves no space in the flow. The old page templates opened with an absolute
   banner that expected to sit under it, so nothing ever accounted for the gap. Pages on
   this design open with a release bar, a sub-nav or the hero, and those render straight
   underneath the header where nobody can see them -- which is exactly what happened to
   the homepage release bar. Every 2026 page wrapper carries this. */
.va-page26{padding-top:67px}

/* four-up module grid for the second tier */
.va-inds4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.va-inds4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.va-inds4{grid-template-columns:1fr}}
.va-modBody h3 a{color:inherit;text-decoration:none}
.va-modBody h3 a:hover,.va-modBody h3 a:focus{color:var(--va-blue);text-decoration:none}
.va-modBody h3 a::after{content:" \203A";color:var(--va-blue);font-weight:400}