/* Verapath marketing - VIRA landing page (design_handoff_v16 'V16 VIRA.html'), scoped .B.pg-vira.
   VIRA keeps its own palette inside the Verapath shell: navy and bone are declared once below and used
   on this page only. Every other value is a site token or an alpha tint of those two (the technique
   VIRA's own production CSS uses), in place of the eight other hex values in the V16 file.
   Deliberate departures from V16:
   - Type is the self-hosted Serrif + Season Sans (what VIRA's production site ships) rather than the
     Google-hosted Newsreader, Hanken Grotesk, IBM Plex Mono and Cormorant: no third-party font request.
   - Headings stay upright. V16 forces italic on heading <em>; the site rule (font-style:normal) stands
     and a lighter tint carries the emphasis. The Keep / Transform / Retire terms are not headings and
     keep their italic.
   - The nav over the hero, the Request a demo treatment and the inverted footer for /vira belong to the
     layout, not to this file. Every selector here stays inside the page's own markup (.vr and below),
     so the nav/footer wrappers can share the .pg-vira scope without picking anything up. */
.B.pg-vira{
  --vr-navy:#1B3557;                                                 /* VIRA palette */
  --vr-bone:#F4F1EA;                                                 /* VIRA palette */
  --vr-body:color-mix(in srgb,var(--vr-navy) 80%,transparent);       /* body copy on light: 6.5:1 on white, 6.2:1 on bone */
  --vr-soft:color-mix(in srgb,var(--vr-navy) 72%,transparent);       /* labels, card copy, emphasis on light: 5.2:1 / 4.9:1 */
  --vr-bone-soft:color-mix(in srgb,var(--vr-bone) 72%,transparent);  /* labels, emphasis on navy: 6.5:1 */
  --vr-bone-sub:color-mix(in srgb,var(--vr-bone) 86%,transparent);   /* hero lead on navy: 8.6:1 */
  --vr-x:max(clamp(20px,5vw,56px),calc((100vw - 1168px) / 2));       /* VIRA's side gutter: a 1168px measure */
  --navh:76px;                                                       /* fixed nav bar height (vp-site.css) */
}

/* shared */
.B.pg-vira .vr{color:var(--vr-navy);background:var(--paper-2)}
.B.pg-vira .vr-label{font-size:13px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--vr-soft)}
.B.pg-vira .vr-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.B.pg-vira .vbtn{display:inline-flex;align-items:center;background:#fff;color:var(--vr-navy);padding:16px 28px;border-radius:999px;font-weight:650;font-size:16px;transition:transform .2s ease,box-shadow .2s ease}
.B.pg-vira .vbtn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px color-mix(in srgb,var(--forest) 80%,transparent)}
.B.pg-vira .vbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* hero */
.B.pg-vira .vr-hero{background:var(--vr-navy);color:#fff;padding:calc(var(--navh) + clamp(48px,7vw,80px)) var(--vr-x) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.B.pg-vira .vr-lockup{display:flex;align-items:center;gap:12px}
.B.pg-vira .vr-lockup img{height:32px;width:auto}
.B.pg-vira .vr-word{font-family:var(--serif);font-weight:500;font-size:36px;line-height:1;letter-spacing:.1em}
.B.pg-vira .vr-kicker{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;font-size:13px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--vr-bone-soft)}
.B.pg-vira .vr-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,7vw,76px);line-height:.98;letter-spacing:-.025em;max-width:1000px}
.B.pg-vira .vr-hero h1 em{font-style:normal;color:var(--vr-bone-soft)}
.B.pg-vira .vr-sub{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--vr-bone-sub);max-width:680px;text-wrap:pretty}
.B.pg-vira .vr-hero .vr-ctas{justify-content:center}
.B.pg-vira .vr-strip{list-style:none;margin:clamp(32px,4vw,44px) 0 0;padding:22px 0;width:100%;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-size:14px;color:var(--vr-bone-soft)}
/* V16 separates the strip with "·" spans. As list items the dot is generated and kept out of the
   accessibility tree by the second declaration; browsers without that syntax keep the first. */
.B.pg-vira .vr-strip li:not(:last-child)::after{content:"·";content:"·" / "";margin-left:22px}

/* how it works */
.B.pg-vira .vr-how{scroll-margin-top:var(--navh);padding:clamp(56px,7vw,80px) var(--vr-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:40px clamp(32px,5vw,64px)}
.B.pg-vira .vr-how-intro,.B.pg-vira .vr-caps-title,.B.pg-vira .vr-about-title{display:flex;flex-direction:column;gap:24px}
.B.pg-vira .vr-how-intro{align-self:start}
.B.pg-vira .vr-how h2,.B.pg-vira .vr-caps h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,52px);line-height:1.05;letter-spacing:-.015em}
.B.pg-vira .vr-how h2 em,.B.pg-vira .vr-caps h2 em{font-style:normal;color:var(--vr-soft)}
.B.pg-vira .vr-lead{font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:var(--vr-body);text-wrap:pretty}
.B.pg-vira .vr-ktr{display:flex;flex-direction:column;gap:14px;margin:16px 0 0;padding-top:24px;border-top:1px solid var(--line)}
/* term column 120px, not V16's 100px: "Transform" sets 109px wide in Serrif italic */
.B.pg-vira .vr-ktr > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;font-size:16px;line-height:1.5}
.B.pg-vira .vr-ktr dt{font-family:var(--serif);font-style:italic;font-size:22px}
.B.pg-vira .vr-ktr dd{margin:0;color:var(--vr-body)}
.B.pg-vira .vr-steps{list-style:none;margin:0;padding:35px 0 0;display:flex;flex-direction:column}
.B.pg-vira .vr-steps li{display:grid;grid-template-columns:clamp(52px,8vw,96px) minmax(0,1fr);gap:clamp(14px,2.5vw,24px);padding:22px 0;border-top:1px solid var(--line)}
.B.pg-vira .vr-steps li:last-child{border-bottom:1px solid var(--line)}
.B.pg-vira .vr-num{font-family:var(--serif);font-size:clamp(34px,5vw,56px);line-height:1}
.B.pg-vira .vr-step{display:flex;flex-direction:column;gap:8px}
.B.pg-vira .vr-step-k{font-size:13px;font-weight:650;letter-spacing:.08em;color:var(--vr-soft)}
.B.pg-vira .vr-steps h3{font-size:20px;font-weight:650;line-height:1.3}
.B.pg-vira .vr-steps p{font-size:16px;line-height:1.55;color:var(--vr-body)}

/* capabilities */
.B.pg-vira .vr-caps{background:var(--vr-bone);padding:clamp(56px,7vw,80px) var(--vr-x);display:flex;flex-direction:column;gap:40px}
.B.pg-vira .vr-caps-head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:28px clamp(32px,6vw,80px);align-items:end}
.B.pg-vira .vr-caps-copy{display:flex;flex-direction:column;gap:16px;font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:var(--vr-body)}
.B.pg-vira .vr-caps-copy p,.B.pg-vira .vr-about-copy p{text-wrap:pretty}
/* V16 draws these hairlines as a 1px gap over a filled grid, which paints the empty last cell solid
   grey whenever the 15 cards don't fill the final row (two columns, roughly 640-990px wide). Card
   borders draw the same lines and leave an empty cell empty. */
.B.pg-vira .vr-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.B.pg-vira .vr-grid li{background:var(--paper-2);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,3vw,28px) clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:10px}
.B.pg-vira .vr-n{font-size:13px;font-weight:650;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.B.pg-vira .vr-grid h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.B.pg-vira .vr-grid p{font-size:15px;line-height:1.55;color:var(--vr-soft)}

/* about: the navy close, set in bone */
.B.pg-vira .vr-about{background:var(--vr-navy);color:var(--vr-bone);padding:clamp(56px,7vw,80px) var(--vr-x);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:32px clamp(32px,5vw,64px);align-items:start}
.B.pg-vira .vr-about .vr-label{color:var(--vr-bone-soft)}
.B.pg-vira .vr-about h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,56px);line-height:1.04;letter-spacing:-.02em}
.B.pg-vira .vr-about h2 em{font-style:normal;color:var(--vr-bone-soft)}
.B.pg-vira .vr-about-copy{display:flex;flex-direction:column;gap:20px;font-size:clamp(16px,1.8vw,18px);line-height:1.6}
.B.pg-vira .vr-about-copy .vr-ctas{margin-top:12px}
.B.pg-vira .vr-about .vbtn{background:var(--vr-bone)}
.B.pg-vira .vr-about .vbtn:focus-visible{outline-color:var(--vr-bone)}
/* inline link on navy: outranks the site's Midnight inline-link rule, .B p a:not(.btn):not(.go) (0,3,2) */
.B.pg-vira .vr-about p a.vr-link{color:var(--vr-bone);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--vr-bone) 55%,transparent)}
.B.pg-vira .vr-about p a.vr-link:hover,.B.pg-vira .vr-about p a.vr-link:focus-visible{color:var(--vr-bone-soft);text-decoration-color:currentColor}
.B.pg-vira .vr-about p a.vr-link:focus-visible{outline:2px solid var(--vr-bone);outline-offset:3px}