/* ============================================================================
   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:#0b3d4f;color:#fff;padding:56px 0 52px;position:relative;overflow:hidden}

.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}
/* .va-btnB is white text inside a white outline: it only exists on the dark heroes and
   close blocks. Dropped onto a light section it is invisible, which is exactly what
   happened to "The full comparison" on open-source-erp.php. This is the same button
   for a light ground. */
/* A 30% hairline composites to about #b4bbc0, which is 1.94:1 against the page -- under
   the 3:1 a UI component needs, which is why this was reported invisible on the India HR
   page. 45% only reached 2.76:1; 55% lands on 3.53:1. The tinted ground is there so the
   shape reads even before the border does. */
.va-btnB.va-onLight{color:var(--va-ink);background:var(--va-sunk);
                    box-shadow:inset 0 0 0 1.5px rgba(34,48,58,.55)}
.va-btnB.va-onLight:hover,.va-btnB.va-onLight:focus{color:var(--va-ink);
                                                    background:#e4eef2;
                                                    box-shadow:inset 0 0 0 1.5px rgba(34,48,58,.7)}

/* ---------------------------------------------------------------- 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;min-width:0}
.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 */
/* Release bar. Off the homepage briefly on 3 Sep 2026 while onfinity.php still
   described version 6, and back the same day once that page was rewritten for 7 --
   which is what "What changed" now points at. */
.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}
/* MRP diagram -- stands in for a screenshot in the manufacturing module. Drawn on purpose:
   the only manufacturing image on file is a design study with none of the application chrome
   the other five captures carry, and publishing it beside them would present a mockup as the
   shipping product. Sized to sit in the same slot, so the two-column rhythm holds. */
.va-modDiag{display:flex;flex-direction:column;justify-content:center}
.va-mrp{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:24px 20px}
.va-mrpH{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.13em;
         text-transform:uppercase;color:var(--va-wmut);margin-bottom:10px}
.va-mrp ul{list-style:none;padding:0;margin:0;font-size:12px;color:var(--va-ink);line-height:1.45}
.va-mrp li{padding:4px 0 4px 13px;position:relative}
.va-mrp li::before{content:"";position:absolute;left:0;top:11px;width:4px;height:4px;border-radius:50%;
                   background:var(--va-wblue);opacity:.55}
.va-mrpArrow{color:var(--va-wblue);font-size:17px;line-height:1;text-align:center}
@media(max-width:430px){.va-mrp{grid-template-columns:1fr;gap:10px}
                        .va-mrpArrow{transform:rotate(90deg)}}

.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 was written for a card of prose. The open source page uses the same card to
   list what an edition includes, so the list needs styling that did not exist -- and a
   tick that is drawn in CSS rather than pulled from the icon font, because the font is
   loaded from a CDN and an unavailable glyph would leave the list looking unanswered. */
.va-step ul{list-style:none;margin:0;padding:0}
.va-step ul li{position:relative;padding-left:20px;font-size:13px;color:var(--va-body);
               line-height:1.5;margin-bottom:7px}
.va-step ul li:last-child{margin-bottom:0}
.va-step ul li::before{content:"";position:absolute;left:2px;top:5px;width:5px;height:9px;
                       border:solid var(--va-ok);border-width:0 1.6px 1.6px 0;
                       transform:rotate(42deg)}

.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}
/* Between 769px and 991px the header is 117px, not 67: Bootstrap shows the desktop
   nav from 768 up but the links only fit on one line from 992, so in that band it
   wraps. Measured across eleven widths -- the bar was hidden on tablets while it
   looked correct on a phone and on a desktop, which is the sort of thing nobody
   finds by opening the page on their own machine. */
@media (min-width:769px) and (max-width:991px){.va-page26{padding-top:117px}}

/* four-up module grid for the second tier */
/* .va-inds holds industry chips on the homepage -- a bold label and half a line -- so two
   columns still read at 320px. Where the same grid carries a full sentence per card it does
   not: two columns on a phone leaves about 140px of text width and roughly four words a
   line. .va-indsWide is that case, and it goes single-column early rather than making the
   shared rule worse for the pages it already suits. */
.va-indsWide{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.va-indsWide{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.va-indsWide{grid-template-columns:1fr}}

.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}

/* ---------------------------------------------------------------- then / now
   Two columns showing what a release changed. The right-hand one is the current
   version and carries the accent border, so which is which reads before the
   labels do. */
.va-then{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.va-then{grid-template-columns:1fr}}
.va-thenCol{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:20px}
.va-thenCol.va-now{border:2px solid var(--va-blue);padding:19px}
.va-thenTag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
            letter-spacing:.14em;text-transform:uppercase;color:var(--va-wmut);
            background:var(--va-sunk);border-radius:99px;padding:3px 10px;margin-bottom:10px}
.va-thenCol.va-now .va-thenTag{color:var(--va-blue);background:var(--va-wbluesoft)}
.va-thenCol h4{font-size:16px;font-weight:700;color:var(--va-ink);margin:0 0 11px}
.va-thenCol ul{list-style:none;padding:0;margin:0;font-size:12.5px;color:var(--va-body);line-height:1.5}
.va-thenCol li{padding:5px 0 5px 18px;position:relative}
.va-thenCol li::before{content:"";position:absolute;left:1px;top:12px;width:7px;height:7px;
                       border-radius:50%;background:var(--va-blue);opacity:.3}
.va-thenCol.va-now li::before{opacity:.9}

/* ---------------------------------------------------------------- release items
   A numbered grid of what a release changed. Numbers here are a real sequence --
   the order the items matter in -- rather than decoration. */
.va-rels{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.va-rels{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.va-rels{grid-template-columns:1fr}}
.va-rel{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:18px}
.va-relN{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
         background:var(--va-wbluesoft);color:var(--va-blue);font-family:"JetBrains Mono",monospace;
         font-size:10.5px;font-weight:700;margin-bottom:10px}
.va-rel h4{font-size:15px;font-weight:700;color:var(--va-ink);margin:0 0 6px;line-height:1.3}
.va-rel p{font-size:12.5px;color:var(--va-body);line-height:1.6;margin:0}
.va-rel .va-relNote{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--va-line);
                    font-size:11.5px;color:var(--va-wmut)}
.va-rel .va-relNote b{color:var(--va-blue)}

/* ---------------------------------------------------------------- hero grounds
   Each page gets its own ground rather than the same gradient with a pattern laid
   over it. Three pages sharing one gradient read as three copies of one page,
   whatever texture sits on top. They stay one family through the palette -- brand
   teal, brand amber, always a single light source -- but the colour, the direction
   and the darkness differ enough that no two look alike.

   Drawn in CSS: nothing to load, nothing to re-cut when the palette moves, and
   sharp at any pixel density.                                                    */

/* Homepage. The copy says night shift, so the ground is close to black with the
   light low and cold, like a window lit at three in the morning. */
.va-hero26.va-heroGlow{
    background:
        radial-gradient(70% 120% at 82% 14%, rgba(46,178,214,.42), rgba(5,26,34,0) 58%),
        radial-gradient(90% 70% at 8% 96%, rgba(16,86,110,.55), rgba(5,26,34,0) 62%),
        linear-gradient(168deg, #04191f 0%, #072e3b 52%, #0a4256 100%);
}

/* ERP. A ledger is sober: graphite and slate, one cool light, ruled lines running
   toward it. Nothing decorative on a page about where the numbers come from. */
.va-hero26.va-heroLedger{
    background:
        radial-gradient(64% 90% at 90% 10%, rgba(96,186,214,.26), rgba(22,34,46,0) 60%),
        linear-gradient(152deg, #141e29 0%, #1c2f40 48%, #24405a 100%);
}
.va-hero26.va-heroLedger::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background-image:repeating-linear-gradient(
        0deg, rgba(255,255,255,.085) 0 1px, rgba(255,255,255,0) 1px 32px);
    -webkit-mask-image:linear-gradient(102deg, rgba(0,0,0,0) 14%, #000 88%);
    mask-image:linear-gradient(102deg, rgba(0,0,0,0) 14%, #000 88%);
}

/* open-source-erp.php. A source tree rather than a ledger, so the rules run vertically
   here where heroLedger's run across: the indent guides an editor draws down the gutter.
   Deep ink, one green light high for the licence, one warm light low because the free
   edition is the generous half of the offer. */
.va-hero26.va-heroSource{
    background:
        radial-gradient(62% 86% at 8% 98%, rgba(245,166,35,.22), rgba(6,20,22,0) 58%),
        radial-gradient(74% 92% at 90% 6%, rgba(31,138,99,.34), rgba(6,20,22,0) 60%),
        linear-gradient(160deg, #06171a 0%, #0b2429 54%, #113a40 100%);
}
.va-hero26.va-heroSource::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background-image:repeating-linear-gradient(
        90deg, rgba(255,255,255,.075) 0 1px, rgba(255,255,255,0) 1px 26px);
    -webkit-mask-image:linear-gradient(76deg, rgba(0,0,0,0) 20%, #000 92%);
    mask-image:linear-gradient(76deg, rgba(0,0,0,0) 20%, #000 92%);
}

/* onfinity.php. The only page announcing something, so it is the bright one:
   saturated teal with the brand amber breaking in at the top corner. */
.va-hero26.va-heroGrid{
    background:
        radial-gradient(58% 74% at 88% 4%, rgba(245,166,35,.34), rgba(7,58,74,0) 56%),
        radial-gradient(80% 90% at 14% 92%, rgba(19,160,170,.46), rgba(7,58,74,0) 62%),
        linear-gradient(142deg, #06485c 0%, #0c7392 58%, #119ab4 100%);
}
.va-hero26.va-heroGrid::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background-image:radial-gradient(rgba(255,255,255,.19) 1.1px, rgba(255,255,255,0) 1.2px);
    background-size:24px 24px;
    -webkit-mask-image:radial-gradient(circle at 72% 24%, #000 6%, rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 76%);
    mask-image:radial-gradient(circle at 72% 24%, #000 6%, rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 76%);
}

/* ---------------------------------------------------------------- who does what
   A three-way split for an offer with two parties and a shared middle. The third
   column is the one that matters, so it carries the accent border -- what makes
   the OEM deal unusual is not the division of labour but the joint ownership. */
.va-split{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:6px}
@media(max-width:820px){.va-split{grid-template-columns:1fr}}
.va-splitCol{border:1px solid rgba(255,255,255,.16);border-radius:6px;padding:20px;text-align:left}
.va-splitCol.va-joint{border:2px solid var(--va-amber);padding:19px}
.va-splitCol .va-splitWho{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
                          letter-spacing:.14em;text-transform:uppercase;color:#93aab6;
                          border:1px solid rgba(255,255,255,.2);border-radius:99px;
                          padding:3px 10px;margin-bottom:11px}
.va-splitCol.va-joint .va-splitWho{color:var(--va-amber);border-color:var(--va-amber)}
.va-splitCol h4{font-size:15.5px;font-weight:700;color:#fff;margin:0 0 9px}
.va-splitCol ul{list-style:none;padding:0;margin:0;font-size:12.5px;color:#9db3bf;line-height:1.55}
.va-splitCol li{padding:4px 0 4px 17px;position:relative}
.va-splitCol li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
                        border-radius:50%;background:#5f8fa3}
.va-splitCol.va-joint li::before{background:var(--va-amber)}
.va-splitCol.va-joint li{color:#cfe0e8}
.va-oemWho{font-size:12.5px;color:#93aab6;text-align:center;margin:22px auto 0;max-width:70ch}
.va-oemWho b{color:#fff;font-weight:600}

/* ---------------------------------------------------------------- questions
   Objection handling. Two columns of question and answer, because a partner
   deciding whether to co-own a product has specific worries and a page that
   answers them beats a page that lists benefits. */
.va-qa{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;text-align:left}
@media(max-width:820px){.va-qa{grid-template-columns:1fr}}
.va-qaItem h4{font-size:14.5px;font-weight:700;color:var(--va-ink);margin:0 0 6px;line-height:1.35}
.va-qaItem p{font-size:13px;color:var(--va-body);line-height:1.6;margin:0}
.va-qaItem p + p{margin-top:8px}

/* what the offer is made of: a plain labelled list, wider than a card grid */
.va-terms{max-width:680px;margin:0 auto;text-align:left}
.va-term{display:grid;grid-template-columns:170px 1fr;gap:18px;padding:14px 0;
         border-top:1px solid var(--va-line)}
.va-term:first-child{border-top:0}
@media(max-width:620px){.va-term{grid-template-columns:1fr;gap:4px}}
.va-term dt{font-size:13px;font-weight:700;color:var(--va-ink)}
.va-term dd{margin:0;font-size:13px;color:var(--va-body);line-height:1.6}
.va-term dd em{font-style:normal;color:var(--va-wmut)}

/* the ask: what to put in the first message */
.va-ask{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;
        padding:22px 24px;max-width:600px;margin:24px auto 0;text-align:left}
.va-ask h4{font-size:14px;font-weight:700;color:var(--va-ink);margin:0 0 10px}
.va-ask ol{margin:0;padding-left:20px;font-size:13px;color:var(--va-body);line-height:1.6}
.va-ask li{margin-bottom:5px}
.va-ask li:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- widgets on a phone
   The widget internals were laid out for a 460px card and would not shrink past about
   340px: the filter chips refuse to wrap, the tag column is a fixed 60px, and the
   invoice table wants four columns. Below 420px the widget stops pretending to be a
   desktop panel -- the chips scroll, the date column goes, and the table drops the
   column a phone reader can infer. */
@media (max-width:420px){
    .va-wg{height:auto;min-height:300px;padding:12px}
    .va-wgchips{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .va-wgchips span{flex:0 0 auto}
    .va-wgrow{gap:7px}
    .va-wgtag{width:52px;font-size:7px}
    .va-wgrow .va-wgdt{display:none}
    .va-wgt{font-size:13px}
    table.va-wgTable th:nth-child(3),
    table.va-wgTable td:nth-child(3){display:none}
    .va-hire{grid-template-columns:78px 1fr;gap:10px}
    .va-modShot figcaption{font-size:9px;padding:6px 9px}
}