/* ------------------------------------------------------------------------------------
   Onfinity India — page-specific layer on top of va-2026.css.

   Everything here is prefixed va-in* so it cannot collide with the shared sheet, which
   already owns .va-sec, .va-secSunk, .va-secNight, .va-in, .va-eyeb, h2.va-sh, .va-lede,
   .va-btnA and .va-btnB. Colours are taken from that sheet's tokens, never re-picked.

   Mobile matters more here than on any other locale: India is a phone-first market, so
   every grid collapses to one column and the hero photograph moves below the words rather
   than behind them.
   ------------------------------------------------------------------------------------ */

/* shared card, used by several blocks below */
.va-card{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;padding:20px}
.va-card h3{font-size:16px;font-weight:700;color:var(--va-ink);margin:0 0 6px;letter-spacing:-.01em}
.va-card p{font-size:13.5px;color:var(--va-body);line-height:1.6;margin:0}
.va-red{color:var(--va-wred)}
.va-grn{color:var(--va-ok)}

/* ---------------------------------------------------------------------------- hero */
.va-inHero{position:relative;background:#0b3d4f;color:#fff;overflow:hidden;
           min-height:462px;display:flex;align-items:center}
.va-inHeroShot{position:absolute;top:0;right:0;bottom:0;width:58%}
.va-inHeroShot img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.va-inHeroFade{position:absolute;top:0;right:0;bottom:0;left:0;
               background:linear-gradient(90deg,#0b3d4f 0%,#0b3d4f 14%,rgba(11,61,79,.74) 38%,
                                           rgba(11,61,79,.22) 70%,rgba(11,61,79,.08) 100%)}
.va-inHeroIn{position:relative;z-index:2;width:100%;box-sizing:border-box}
.va-inHeroTxt{max-width:47%}
.va-inHero h1{font-size:40px;font-weight:300;line-height:1.12;letter-spacing:-.022em;
              margin:0 0 16px;color:#fff}
.va-inHero h1 b{font-weight:700}
.va-inHero .va-eyeb{color:var(--va-amber)}
.va-inHeroP{font-size:15px;line-height:1.64;color:rgba(255,255,255,.92);margin:0 0 24px}

/* ---------------------------------------------------------------------------- price */
.va-inPrice{background:var(--va-amber);padding:18px 0}
/* Centre, not baseline. Baseline pins the big number to the FIRST line of the sentence, so
   as soon as that sentence wraps the number appears to float above everything. */
.va-inPriceIn{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.va-inPriceN{font-size:27px;font-weight:700;color:#25313a;line-height:1.1;white-space:nowrap}
.va-inPriceT{font-size:14.5px;color:#25313a;line-height:1.5;max-width:62ch}
.va-inPriceL{white-space:nowrap}
.va-inPriceL{font-size:12.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
             color:#25313a;text-decoration:underline}
.va-inPriceL:hover,.va-inPriceL:focus{color:#25313a;text-decoration:underline}

/* ---------------------------------------------------------------------------- costing */
.va-inCost{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.va-inCostCards{display:grid;gap:14px}
.va-inWo{background:var(--va-pg);border:1px solid var(--va-line);border-radius:6px;overflow:hidden}
.va-inWoBar{background:var(--va-wbluesoft);border-bottom:1px solid var(--va-wline);padding:9px 14px;
            font-family:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
            font-size:10.5px;letter-spacing:.04em;color:var(--va-wblue)}
.va-inWoBody{padding:14px 18px}
.va-kv{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--va-body);
       padding:8px 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-kvTot{border-top:1px solid var(--va-line);margin-top:4px;padding-top:10px}
.va-kvTot span{font-weight:700;color:var(--va-ink)}
.va-kvTot b{font-size:15px}

/* ---------------------------------------------------------------------------- screens */
.va-inScr{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start}
.va-inTabs{display:grid;gap:4px;margin-bottom:18px}
.va-inTab{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;
          padding:13px 15px;border-radius:5px;font-size:14.5px;font-family:inherit;
          color:var(--va-body);border-left:2px solid transparent;
          transition:background .18s,color .18s}
.va-inTab:hover{background:#e8eff2;color:var(--va-ink)}
.va-inTab.is-on{background:var(--va-pg);color:var(--va-ink);font-weight:700;
                border-left-color:var(--va-amber);box-shadow:0 2px 10px -6px rgba(10,20,28,.5)}
.va-inTab:focus-visible{outline:2px solid var(--va-blue);outline-offset:2px}
.va-inTabTxt{padding:0 15px}
.va-inTabTxt h3{font-size:17px;font-weight:700;color:var(--va-ink);margin:0 0 6px}
.va-inTabTxt p{font-size:13.5px;color:var(--va-body);line-height:1.62;margin:0}
.va-inScrFrame{position:relative;width:100%;padding-top:56%;border:1px solid var(--va-line);
               border-radius:6px;overflow:hidden;background:var(--va-pg);
               box-shadow:0 8px 26px -18px rgba(10,20,28,.5)}
.va-inScrImg{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;
             object-position:top left;opacity:0;transition:opacity .3s ease}
.va-inScrImg.is-on{opacity:1}

/* ---------------------------------------------------------------------------- trios */
.va-inTrio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.va-inDark{border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:18px}
.va-inDark h3{color:#fff;font-size:15px;font-weight:700;margin:0 0 6px}
.va-inDark p{font-size:13px;color:#93aab6;line-height:1.6;margin:0}

/* ---------------------------------------------------------------------------- stats */
.va-inStats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.va-inStat{text-align:center;padding:18px 12px}
.va-inStatV{display:block;font-size:26px;font-weight:700;color:var(--va-blue);line-height:1}
.va-inStatK{display:block;font-size:11.5px;color:var(--va-body);margin-top:6px;line-height:1.4}

/* ---------------------------------------------------------------------------- modules */
.va-inMods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.va-inMod{padding:14px 16px;font-size:14px;font-weight:700;color:var(--va-ink);
          text-decoration:none;display:block;transition:border-color .18s,color .18s}
.va-inMod:hover,.va-inMod:focus{color:var(--va-blue);border-color:var(--va-blue);text-decoration:none}
/* Three across, for groups of three or nine. The four-column default is right for the
   homepage's twelve tiles and leaves 4+4+1 for a nine, with one item stranded on its own
   row. */
.va-inMods3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.va-inMods3{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.va-inMods3{grid-template-columns:1fr}}

/* .va-inMod was written for anchors. Where the same tile is a plain label -- a feature
   list with no page behind it -- it must not offer a hover state it cannot honour. */
span.va-inMod{cursor:default}
span.va-inMod:hover,span.va-inMod:focus{color:var(--va-ink);border-color:var(--va-line)}

.va-inRuns{font-size:13.5px;color:var(--va-body);line-height:1.6;margin:20px 0 0;max-width:78ch}

/* ---------------------------------------------------------------------------- JioCloud band
   Rebuilds the ValueERP / JioCloud banner this page used to carry, with the Onfinity mark.
   The white discs are the device from that banner and are what makes the pairing read as a
   partnership rather than two logos sitting near each other. */
.va-inJio{background:#0b3d4f;color:#fff;padding:46px 0;overflow:hidden}
.va-inJio .va-eyeb{color:var(--va-amber)}
.va-inJio h2.va-sh{color:#fff}
.va-inJioG{display:grid;grid-template-columns:1.25fr 1fr;gap:34px;align-items:center}
.va-inJioP{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.88);margin:0 0 22px;max-width:52ch}
.va-inJioMarks{position:relative;min-height:210px}
.va-inJioDisc{position:absolute;background:#fff;border-radius:50%;display:flex;
              flex-direction:column;align-items:center;justify-content:center;
              box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.va-inJioDisc{top:0;left:6%;width:168px;height:168px;padding:26px}
.va-inJioDisc img{max-width:100%;height:auto;display:block}
/* The JioCloud disc holds the supplied "Powered by JioCloud" lockup whole -- cloud mark,
   "Powered by" and wordmark are one artwork from Jio, so nothing here re-sets that type or
   pulls the pieces apart. It is landscape, so the disc is a little larger and the padding
   generous enough that the lockup does not touch the curve. */
.va-inJioDisc2{top:56px;left:auto;right:1%;width:196px;height:196px;padding:26px}
.va-inJioDisc2 img{max-width:136px}

/* ---------------------------------------------------------------------------- contact */
.va-inContact{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;
              border-top:1px solid var(--va-line);padding-top:22px;margin-top:20px}
.va-inContactK{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.14em;
               text-transform:uppercase;color:var(--va-wmut);display:block;margin-bottom:6px}
.va-inContactV{font-size:19px;font-weight:700;color:var(--va-ink);text-decoration:none}
.va-inContactV:hover,.va-inContactV:focus{color:var(--va-blue);text-decoration:none}
.va-inContactP{font-size:13.5px;color:var(--va-body);line-height:1.6;margin:0;max-width:52ch}

/* ---------------------------------------------------------------------------- routes */
.va-inRoutes{background:#0b3d4f;color:#fff;padding:52px 0}
.va-inRoutes .va-eyeb{color:var(--va-amber)}
.va-inRoutes h2.va-sh{color:#fff;font-size:25px}
.va-inRoutesG{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.va-inRouteB{border-left:1px solid rgba(255,255,255,.16);padding-left:34px}
.va-inRouteP{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.85);margin:0 0 22px;max-width:44ch}

/* ---------------------------------------------------------------------------- responsive */
@media(max-width:900px){
  .va-inCost,.va-inScr,.va-inRoutesG{grid-template-columns:1fr}
  .va-inScr{gap:18px}
  .va-inTabs{grid-template-columns:repeat(2,1fr);gap:6px}
  .va-inTab{border-left:0;border-bottom:2px solid transparent;text-align:center;font-size:13px}
  .va-inTab.is-on{border-left:0;border-bottom-color:var(--va-amber)}
  .va-inTabTxt{padding:0}
  .va-inRouteB{border-left:0;border-top:1px solid rgba(255,255,255,.16);padding-left:0;padding-top:26px}
  /* The discs stop being absolutely placed and simply sit side by side. */
  .va-inJioG{grid-template-columns:1fr}
  .va-inJioMarks{min-height:0;display:flex;gap:16px;align-items:center;justify-content:flex-start}
  .va-inJioDisc{position:static;width:132px;height:132px;padding:20px}
  .va-inJioDisc2{position:static;width:150px;height:150px;padding:20px}
  .va-inJioDisc2 img{max-width:104px}
  .va-inTrio{grid-template-columns:1fr}
  .va-inStats{grid-template-columns:repeat(2,1fr)}
  .va-inMods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  /* The photograph moves BELOW the words: behind them it swallows the headline, and the
     shot div comes first in source order, so column-reverse puts the text on top without
     moving anything in the markup. */
  .va-inHero{display:flex;flex-direction:column-reverse;min-height:0;padding-top:34px}
  .va-inHeroTxt{max-width:none}
  .va-inHero h1{font-size:30px}
  .va-inHeroShot{position:relative;width:100%;height:190px;margin-top:26px}
  .va-inHeroFade{background:linear-gradient(180deg,rgba(11,61,79,.55) 0%,rgba(11,61,79,0) 45%)}
  .va-inPriceIn{justify-content:flex-start}
  .va-inPriceN{font-size:23px}
}
@media(max-width:460px){
  .va-inStats,.va-inMods,.va-inTabs{grid-template-columns:1fr}
  .va-inHero h1{font-size:27px}
}

/* ---------------------------------------------------------------------------- module map
   The ERP page is the index of the locale: every functional module has its own India page,
   and this grid is how somebody reaches them. Tiles are anchors with a name and one line,
   grouped into tiers, so the page reads as a map rather than a list of links.

   Grid, not flex, so the tiles in a row share a height and the one-line descriptions sit on
   the same baseline whether they wrap or not.
   ---------------------------------------------------------------------------------------- */
.va-inMap{margin-bottom:30px}
.va-inMap:last-child{margin-bottom:0}
.va-inMapH{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.va-inMapH span{font-family:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
                font-size:10px;letter-spacing:.16em;text-transform:uppercase;
                color:var(--va-wmut);white-space:nowrap}
.va-inMapH::after{content:"";flex:1;height:1px;background:var(--va-line)}
.va-inMapG{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.va-inMapT{display:block;background:var(--va-pg);border:1px solid var(--va-line);
           border-radius:6px;padding:15px 16px;text-decoration:none;
           transition:border-color .18s,box-shadow .18s}
.va-inMapT:hover,.va-inMapT:focus{border-color:var(--va-blue);text-decoration:none;
                                  box-shadow:0 4px 14px -10px rgba(11,61,79,.5)}
.va-inMapT b{display:block;font-size:14.5px;font-weight:700;color:var(--va-ink);
             line-height:1.25;margin-bottom:4px}
.va-inMapT:hover b,.va-inMapT:focus b{color:var(--va-blue)}
.va-inMapT span{display:block;font-size:12.5px;color:var(--va-body);line-height:1.5}
/* On the sunk background the tiles need their own ground to lift off it. */
.va-secSunk .va-inMapT{background:var(--va-pg)}

/* ---------------------------------------------------------------------------- reversed hero
   The homepage hero puts the words left and the photograph right. This one is the mirror --
   people on the left, words on the right -- so the two pages do not read as the same page
   twice. The supplied photograph already fades to white on its right, so the gradient here
   runs the other way and stops short of the faded edge rather than fighting it.
   ---------------------------------------------------------------------------------------- */
.va-inHeroR .va-inHeroShot{left:0;right:auto;width:62%}
.va-inHeroR .va-inHeroShot img{object-position:left center}
.va-inHeroR .va-inHeroFade{background:linear-gradient(270deg,
                           #0b3d4f 0%,#0b3d4f 20%,rgba(11,61,79,.72) 42%,
                           rgba(11,61,79,.20) 72%,rgba(11,61,79,.06) 100%)}
.va-inHeroR .va-inHeroIn{display:flex;justify-content:flex-end}
.va-inHeroR .va-inHeroTxt{max-width:46%}

@media(max-width:900px){
  .va-inMapG{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  /* Same reasoning as the homepage hero: the photograph goes below the words. The reversed
     rules above are unset here so the mobile layout is identical on both heroes. */
  .va-inHeroR .va-inHeroShot{position:relative;left:auto;width:100%}
  .va-inHeroR .va-inHeroIn{display:block}
  .va-inHeroR .va-inHeroTxt{max-width:none}
  .va-inHeroR .va-inHeroFade{background:linear-gradient(180deg,rgba(11,61,79,.55) 0%,rgba(11,61,79,0) 45%)}
}
/* Modules go single-column at 620, not 460: a two-up tile is about 200px wide there and the
   one-line description wraps to four lines, which reads worse than a full-width tile. The
   label-only industry tiles have no such problem and keep their two-up to 460. */
@media(max-width:620px){
  .va-inMapG{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------- screen bands
   The Onfinity 7 captures are about 3:1. Dropping one into a page column scales 13px body
   text to roughly 4px and it reads as a grey smear -- so each one gets its own full-width
   wrapper, max-width set to the capture's own pixel width, sitting outside the 1000px
   container rather than inside it. Nothing is downscaled below its native size.
   ---------------------------------------------------------------------------------------- */
.va-inShot{max-width:1430px;margin:28px auto 0;padding:0 15px}
.va-inShot img{width:100%;height:auto;display:block;border:1px solid var(--va-line);
               border-radius:8px;box-shadow:0 10px 30px -20px rgba(10,20,28,.55)}
.va-secNight .va-inShot img{border-color:rgba(255,255,255,.16)}
/* A narrower figure for a screenshot that is supporting evidence rather than the point of
   the section. .va-inShot bursts past the 1000px text column, which is right for a wide
   dashboard band and too loud for a panel sitting beside three paragraphs. This keeps the
   image inside the reading width and lets the text stay the subject. */
.va-inShot.va-inShotIn{max-width:880px;margin-top:24px}

/* A middle size, between the full band and .va-inShotIn.
   The finance shots are tight crops of two or three panels, so they survive being pulled
   into the 880px reading column. The ERP page carries whole dashboards -- a week-long
   resource schedule and a payroll run -- where the width is the information, and 880px
   turns the Gantt into a smear. This trims the shouting without doing that. */
.va-inShot.va-inShotMid{max-width:1130px}

.va-inShotCap{font-size:12px;color:var(--va-wmut);line-height:1.5;margin:9px 2px 0;
              text-align:center}
.va-secNight .va-inShotCap{color:#8aa2ae}

/* ---------------------------------------------------------------------------- big-company tier
   Group consolidation, e-procurement and warehouse management moved down here. They are
   real modules but they are not what a medium manufacturer is shopping for, and putting
   them beside "Stock" made the top of the page read as an enterprise pitch.
   ---------------------------------------------------------------------------------------- */
.va-inBig{border:1px solid var(--va-line);border-radius:8px;padding:26px;background:var(--va-pg)}
.va-inBigNote{font-size:13px;color:var(--va-body);line-height:1.6;margin:16px 0 0}

/* ---------------------------------------------------------------------------- light hero
   The supplied photograph fades to a flat #f4f3f1 down its right-hand side -- sampled off
   the file, consistent at every height -- so it is built to sit on a light ground and merge
   into it. Putting the dark teal gradient over it cancelled exactly the thing it was made
   for, so this variant paints the hero in the photograph's own edge colour instead.

   The fade is done in CSS rather than relied on from the image, because object-fit:cover
   crops the frame differently at every viewport width and would eventually cut the
   photograph's own faded edge off. A gradient in the identical colour finishes the blend
   whatever the crop does.

   Loaded after .va-inHeroR on purpose: both are two-class selectors, so source order is
   what makes these win.
   ---------------------------------------------------------------------------------------- */
.va-inHeroLight{background:#f4f3f1;color:var(--va-ink)}
.va-inHeroLight .va-inHeroShot{width:64%}
.va-inHeroLight .va-inHeroFade{background:linear-gradient(90deg,
    rgba(244,243,241,0) 0%,rgba(244,243,241,0) 40%,
    rgba(244,243,241,.70) 68%,rgba(244,243,241,1) 92%)}
.va-inHeroLight h1{color:var(--va-ink)}
.va-inHeroLight .va-eyeb{color:var(--va-blue)}
.va-inHeroLight .va-inHeroP{color:var(--va-body)}
.va-inHeroLight .va-btnB{color:var(--va-ink);box-shadow:inset 0 0 0 1.5px rgba(34,48,58,.3)}
.va-inHeroLight .va-btnB:hover,.va-inHeroLight .va-btnB:focus{background:rgba(34,48,58,.06);
                                                              color:var(--va-ink)}
@media(max-width:760px){
  /* Photograph below the words, as on the homepage. The fade runs downward here and stays
     in the same colour, so the top of the image still dissolves into the ground. */
  .va-inHeroLight .va-inHeroShot{width:100%}
  .va-inHeroLight .va-inHeroFade{background:linear-gradient(180deg,
      rgba(244,243,241,1) 0%,rgba(244,243,241,0) 38%)}
}