/* Workvolve roadmap animation (shared). The example roadmap figure[data-roadmap] from the homepage audit section:
   four A4 pages drawn at a fixed design size, scaled to fit. The cover turns away and the pages fan out.
   Ported from home-v2.css so any page can use it with roadmap-v2.js. See the usage note at the top of roadmap-v2.js. */
.au-road{grid-area:road;position:relative;margin:0}
.rd-fit{position:relative;height:650px}
.rd-fan{--dw:610;--dh:650;position:absolute;left:0;top:0;width:calc(var(--dw) * 1px);height:calc(var(--dh) * 1px);transform:scale(var(--s,1));transform-origin:0 0;perspective:1500px}
.rd-cap{margin-top:14px;font-size:12.5px;line-height:1.4;color:var(--ink-3);text-align:center}
.pg{--x0:140px;--y0:86px;--r0:0deg;position:absolute;left:0;top:0;width:330px;height:467px;display:flex;flex-direction:column;padding:20px 22px 13px;border-radius:3px;background:linear-gradient(180deg,#f1ede6,#ede8df);color:#2a2824;font-family:var(--font);box-shadow:0 0 0 1px rgba(60,44,12,.07),0 1px 2px rgba(60,44,12,.08),0 22px 44px -24px rgba(60,44,12,.5);transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);transform-origin:0 50%;transition:transform .85s var(--ease) var(--dl,0s);will-change:transform;backface-visibility:hidden}
.rd-fan.open .pg{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg)}
.pg-cover{z-index:5;--x0:140px;--y0:96px;--r0:-1.6deg;--xm:118px;--ym:96px;--x1:-4px;--y1:132px;--r1:-5deg}
.pg-list{z-index:2;--x0:146px;--y0:100px;--r0:1.4deg;--x1:262px;--y1:0px;--r1:-1.4deg}
.pg-sol{z-index:3;--x0:136px;--y0:102px;--r0:-.6deg;--x1:281px;--y1:88px;--r1:1.7deg;--dl:.03s}
.pg-table{z-index:4;--x0:143px;--y0:98px;--r0:.8deg;--x1:270px;--y1:178px;--r1:.3deg;--dl:.06s}
.rd-fan.open .pg-cover{z-index:0;animation:pgTurn 1.25s both}
@keyframes pgTurn{0%{transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) rotateY(0deg);z-index:5;animation-timing-function:cubic-bezier(.45,0,.75,.5)}38%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:5;animation-timing-function:step-end}39%{transform:translate(var(--xm),var(--ym)) rotate(var(--r0)) rotateY(89deg);z-index:0;animation-timing-function:cubic-bezier(.2,.75,.3,1)}100%{transform:translate(var(--x1),var(--y1)) rotate(var(--r1)) rotateY(0deg);z-index:0}}
.rd-fan.open .pg-table{box-shadow:0 0 0 1px rgba(60,44,12,.07),0 2px 4px rgba(60,44,12,.08),0 34px 60px -28px rgba(60,44,12,.55)}
.pg-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pg-brand{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:-.02em;color:#1d1d1f}
.pg-brand img{width:15px;height:15px}
.pg-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.3}
.pg-meta b{font-size:7px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9a7a37}
.pg-meta span{font-size:7.5px;color:#8a8478}
.pg-f{margin-top:auto;display:flex;justify-content:space-between;gap:8px;padding-top:9px;border-top:1px solid rgba(60,44,12,.13);font-size:6.3px;line-height:1.4;color:#8a8478;white-space:nowrap}
.pg-hd{margin-top:20px;font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.2;font-weight:400;letter-spacing:-.005em;color:#1f1d1a}
.pg-in{margin-top:5px;font-size:9.5px;line-height:1.4;color:#6b665c}
.pg-cv{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:30px}
.pg-ring{width:72px;height:72px}
.pg-title{margin-top:20px;max-width:184px;font-family:Georgia,"Times New Roman",serif;font-size:20px;line-height:1.22;color:#1f1d1a}
.pg-subt{margin-top:10px;max-width:166px;font-size:9.5px;line-height:1.45;color:#6b665c}
.pg-prep{margin-top:auto;margin-bottom:16px;font-size:8.5px;line-height:1.6;color:#6b665c}
.pg-tb{width:100%;margin-top:14px;border-collapse:collapse;table-layout:fixed;font-size:10.5px;line-height:1.35}
.pg-tb th{padding:0 6px 6px 0;text-align:left;font-size:8.5px;font-weight:600;color:#6b665c;border-bottom:1px solid rgba(60,44,12,.24)}
.pg-tb th:nth-child(1){width:28.5%}
.pg-tb th:nth-child(2){width:30%}
.pg-tb td{padding:8px 6px 8px 0;vertical-align:top;border-bottom:1px solid rgba(60,44,12,.11);color:#3a3731}
.pg-tb td:first-child{font-weight:600;color:#1f1d1a}
.rt{display:inline-flex;align-items:baseline;gap:5px;font-weight:600;color:#1f1d1a}
.rt::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;transform:translateY(-1px);box-shadow:inset 0 0 0 1.3px #b8913f}
.rt-high::before{background:#c39d4c;box-shadow:none}
.rt-mid::before{background:linear-gradient(90deg,#c39d4c 50%,transparent 50%)}
.pg-ol{margin-top:15px;display:flex;flex-direction:column;gap:11px;counter-reset:pg}
.pg-ol li{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:23px;counter-increment:pg}
.pg-ol li::before{content:counter(pg);position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:600;color:#7a5d22;box-shadow:inset 0 0 0 1px rgba(184,145,63,.7)}
.pg-ol b{font-size:10.5px;font-weight:600;line-height:1.3;color:#1f1d1a}
.pg-ol span{font-size:9.5px;line-height:1.35;color:#6b665c}
.pg-sol .pg-hd{font-size:16.5px}
.pg-n{color:#9a7a37}
.pg-blk{margin-top:11px}
.pg-blk b{display:block;font-size:8.5px;font-weight:600;color:#7a5d22}
.pg-blk p{margin-top:3px;font-size:9.5px;line-height:1.42;color:#3d3a34}
.pg-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:3px;padding-top:2px;border-top:1px solid rgba(60,44,12,.1)}
.rd-fit-mini{width:100%;flex:none}
.rd-fit-mini .rd-fan{left:50%;margin-left:calc(var(--dw) * var(--s,1) * -.5px)}
@media (max-width:1099.98px){
  .au-road{width:100%;max-width:762px;justify-self:start}
  .au-road .rd-fan{--smax:1.25}
}
@media (max-width:720px){
  .au-road .rd-fan{--dw:330;--dh:590}
  .au-road .rd-fit{height:590px}
  .au-road .pg-cover{--x0:0px;--y0:118px;--r0:-1.4deg;--xm:-96px;--ym:84px;--rm:-9deg;--x1:6px;--y1:40px;--r1:-2.6deg}
  .au-road .pg-list{--x0:4px;--y0:120px;--r0:1.2deg;--x1:-5px;--y1:0px;--r1:-1.3deg}
  .au-road .pg-sol{--x0:-3px;--y0:121px;--r0:-.6deg;--x1:9px;--y1:60px;--r1:1.6deg}
  .au-road .pg-table{--x0:2px;--y0:119px;--r0:.7deg;--x1:0px;--y1:118px;--r1:.3deg}
  .au-road .pg-tb{font-size:11px}
  .rd-cap{margin-top:12px}
}
/* guard: pages-v2.css also defines a different .rt (a grid). Inside the roadmap pages the rating dot stays inline. */
.pg .rt{display:inline-flex;grid-template-columns:none;align-items:baseline;gap:5px;padding:0}